/* ==========================================================================
   Pont vers le contenu existant
   Les 47 pages portent encore leur balisage d'origine. Plutôt que de les
   réécrire d'un bloc, on rebranche les classes héritées sur les tokens :
   le site devient cohérent et lisible sur les deux surfaces sans toucher au
   contenu. Cette feuille rétrécit à mesure que les pages sont reprises.
   Chargée APRÈS components.css.
   ========================================================================== */

/* ==========================================================================
   Remappage des variables héritées
   styles.css et frameworks.css appellent 31 variables sur 756 sites. Plutôt
   que de réécrire chaque règle, on repointe les variables elles-mêmes vers
   les nouveaux tokens : tout le CSS hérité devient sensible à la surface
   d'un coup, sans toucher au balisage.
   ========================================================================== */
:root, [data-surface="document"], [data-surface="console"] {
    --white:            var(--surface);
    --bg-light:         var(--surface-2);
    --border-color:     var(--line);

    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-2);
    --text-light:       var(--ink-3);

    --primary-color:    var(--accent);
    --primary-dark:     var(--accent-hover);
    --primary-light:    var(--accent);
    --secondary-color:  var(--accent);
    --accent-color:     var(--accent);

    --dark-bg:          var(--surface-inv);
    --dark-secondary:   var(--surface-inv);
    --dark-tertiary:    var(--surface-inv);

    --success-color:    var(--ok);
    --warning-color:    var(--warn);
    --danger-color:     var(--risk);

    --font-family:      var(--font-sans);

    --radius-sm: var(--r-xs);
    --radius-md: var(--r-sm);
    --radius-lg: var(--r-md);
    --radius-xl: var(--r-lg);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: var(--shadow-2);
    --shadow-xl: var(--shadow-2);

    --transition-fast: var(--dur-1) var(--ease);
    --transition-base: var(--dur-2) var(--ease);
    --transition-slow: var(--dur-3) var(--ease);
}

/* ---- Plus aucun dégradé décoratif --------------------------------------- */
.hero, .hero-background, .framework-hero, .mapping-hero, .resources-hero,
.cta-section, .cta-card, .nis2-mapping-badge, .assessment-section,
.resiplan-hero, .dora-hero, .platform-badge, .company-badge,
/* La liste visait des parents sans fond : le dégradé vit sur ces enfants-ci. */
.resiplan-intro, .resiplan-cta, .service-cta, .company-presentation,
.approach-number, .synergy-box, .dora-cta, .progress-fill, .score-circle,
.iso-header, .cyfun-header, .cyfun-highlight, .highlight {
    background-image: none !important;
}

/* ---- Titres de section --------------------------------------------------- */
.section-title {
    font-size: var(--t-2xl);
    font-weight: var(--fw-semi);
    letter-spacing: -0.015em;
    color: var(--ink);
    text-align: left;
}
.section-subtitle {
    max-width: var(--measure);
    margin-inline: 0;
    font-size: var(--t-md);
    color: var(--ink-2);
    text-align: left;
}

/* ---- Famille « carte » : 22 classes ramenées à un seul rendu -------------- */
.info-card, .service-card, .benefit-card, .entity-card, .sidebar-card,
.cta-card, .approach-card, .why-card, .module-card, .pillar-card,
.entity-type-card, .solution-card, .resource-card, .resource-card-item,
.mapping-category-card, .alignment-card, .difference-card,
.recommendation-card, .framework-card, .domain-card, .measure-card,
.stat-box, .stat-card, .faq-item, .glossary-entry, .law-article,
.timeline-item, .checklist-item, .tool-card, .step-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
    color: var(--ink);
    text-align: left;
}
.info-card:hover, .service-card:hover, .benefit-card:hover,
.entity-card:hover, .domain-card:hover, .solution-card:hover,
.framework-card:hover, .resource-card:hover, .measure-card:hover,
.pillar-card:hover, .module-card:hover, .approach-card:hover,
.why-card:hover, .step-card:hover, .tool-card:hover {
    transform: none;
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2);
}
.benefit-card, .why-card, .approach-card { background: var(--surface-2); }

/* Les pictogrammes emoji à 3rem : on les neutralise plutôt que de les
   laisser rendre différemment sur chaque système.
   .method-icon en est sorti : les quatre pictogrammes de la page contact
   portent désormais une icône du jeu tracé, pas un emoji. */
.service-icon, .benefit-icon, .framework-icon, .solution-icon,
.resource-icon, .feature-icon, .domain-icon, .module-icon,
.pillar-icon, .sitemap-icon, .step-icon, .tool-icon, .card-icon,
.contact-icon, .value-icon, .advantage-icon, .service-emoji,
.ai-icon, .why-icon, .flow-arrow, .difference-icon, .alignment-icon {
    display: none;
}

/* ---- Bandeaux sombres hérités -------------------------------------------- */
.hero, .assessment-section, .cta-section {
    min-height: 0;
    background-color: var(--surface-2);
    color: var(--ink);
}
.hero-title, .hero-subtitle, .highlight {
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
    background: none;
}
.hero-subtitle { color: var(--ink-2); }
/* .stat-label était en blanc sur fond blanc sur 9 pages. */
.stat-label { color: var(--ink-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); }
.stat-number { color: var(--ink); font-family: var(--font-mono); font-weight: var(--fw-semi); }
.scroll-indicator, .scroll-arrow { display: none; }

/* ==========================================================================
   FICHES DE CONTRÔLE  (241 occurrences — le cœur des pages référentiel)
   ========================================================================== */
.controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--s-3);
}
.control-card {
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    scroll-margin-top: calc(var(--nav-h) + var(--s-6));
    transition: border-color var(--dur-1) var(--ease);
}
.control-card:hover { border-color: var(--line-strong); }
/* Cible d'un lien profond : la fiche se signale au lieu de se perdre. */
.control-card:target,
.control-card.is-highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}
.control-id {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--s-2);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: var(--fw-semi);
    color: var(--accent);
    letter-spacing: 0;
}
.control-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--t-md);
    line-height: 1;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.control-expand:hover { background: var(--surface-2); color: var(--ink); transform: none; }
.control-name {
    margin: 0 0 var(--s-2);
    font-size: var(--t-base);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
    color: var(--ink);
}
.control-objective {
    margin: 0 0 var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    border: 0;
    border-left: 2px solid var(--accent-line);
    border-radius: var(--r-xs);
    font-size: var(--t-xs);
    font-style: normal;
    color: var(--ink-2);
}
.control-description {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: var(--lh-snug);
}
.control-details {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--t-sm);
}
.control-details h4 {
    margin: var(--s-4) 0 var(--s-2);
    font-size: var(--t-3xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--ink-3);
}
.control-details h4:first-child { margin-top: 0; }
.control-details ul { margin: 0; padding-left: var(--s-5); color: var(--ink-2); }

.category-section { margin-bottom: var(--s-12); }
.category-section h2 {
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line-strong);
    font-size: var(--t-xl);
}
.category-description { color: var(--ink-2); font-size: var(--t-sm); }

/* ---- Correspondances ------------------------------------------------------ */
.control-mapping-section { display: flex; flex-direction: column; gap: var(--s-2); }
.mapping-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    border: 0;
    padding: 0;
}
.mapping-label {
    font-size: var(--t-3xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--ink-3);
}
.mapping-label strong { font-weight: inherit; color: inherit; }
.mapping-links { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.mapping-badge, .control-badge, .framework-badge, .category-badge,
.deliverable-tag, .nis2-mapping-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 2px var(--s-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: var(--t-2xs);
    font-weight: var(--fw-semi);
    line-height: 1.5;
    color: var(--ink-2);
    white-space: nowrap;
    transform: none;
}
a.mapping-badge:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.nis2-mapping-badge {
    font-family: var(--font-sans);
    font-weight: var(--fw-normal);
    white-space: normal;
    color: oklch(var(--chip-l) var(--chip-c) var(--h-nis2));
    background: oklch(var(--chip-bg-l) var(--chip-bg-c) var(--h-nis2));
    border-color: oklch(var(--chip-bd-l) var(--chip-bd-c) var(--h-nis2));
}
.nis2-badge, a.nis2-badge {
    color: oklch(var(--chip-l) var(--chip-c) var(--h-nis2));
    background: oklch(var(--chip-bg-l) var(--chip-bg-c) var(--h-nis2));
    border-color: oklch(var(--chip-bd-l) var(--chip-bd-c) var(--h-nis2));
}
.iso-badge, a.iso-badge {
    color: oklch(var(--chip-l) var(--chip-c) var(--h-iso));
    background: oklch(var(--chip-bg-l) var(--chip-bg-c) var(--h-iso));
    border-color: oklch(var(--chip-bd-l) var(--chip-bd-c) var(--h-iso));
}
.cyfun-badge, a.cyfun-badge {
    color: oklch(var(--chip-l) var(--chip-c) var(--h-cyfun));
    background: oklch(var(--chip-bg-l) var(--chip-bg-c) var(--h-cyfun));
    border-color: oklch(var(--chip-bd-l) var(--chip-bd-c) var(--h-cyfun));
}

/* ---- Sommaire latéral ----------------------------------------------------- */
.content-layout { gap: var(--s-8); }
.toc-sidebar { top: calc(var(--nav-h) + var(--s-4)); }
.toc-sidebar h3 {
    font-size: var(--t-3xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--ink-3);
}
.toc-link {
    display: block;
    padding: var(--s-2) var(--s-3);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    font-size: var(--t-sm);
    color: var(--ink-2);
    background: none;
}
.toc-link:hover { background: var(--surface-2); color: var(--ink); }
.toc-link.active {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: var(--fw-medium);
}
.main-content { max-width: none; }
.intro-section { color: var(--ink-2); }

/* ---- Recherche de page ---------------------------------------------------- */
.search-section {
    padding-block: var(--s-6);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.search-bar { gap: var(--s-2); max-width: 720px; margin-inline: auto; }
.search-bar input, .search-input, .form-input, input[type="text"],
input[type="email"], input[type="search"], textarea, select {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--t-sm);
    color: var(--ink);
}
.search-bar input:focus, .search-input:focus, .form-input:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-bar button, #searchBtn {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--accent-ink);
    font-weight: var(--fw-semi);
    font-size: var(--t-sm);
    padding-inline: var(--s-5);
}
.search-result-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--ink);
}
.search-result-item:hover { transform: none; background: var(--surface-2); }
.search-result-id { font-family: var(--font-mono); color: var(--accent); }
.search-result-excerpt, .search-result-mapping { color: var(--ink-2); }

/* ---- Tableaux -------------------------------------------------------------- */
.comparison-table, .mapping-table, .matrix-table, .data-table-legacy {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
    font-size: var(--t-sm);
    overflow: hidden;
}
.comparison-table th, .mapping-table th, .matrix-table th {
    padding: var(--s-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-strong);
    font-size: var(--t-3xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--ink-3);
}
.comparison-table thead, .mapping-table thead { background: var(--surface-2); color: var(--ink-3); }
.comparison-table td, .mapping-table td, .matrix-table td {
    padding: var(--s-3);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.comparison-table tr:hover td, .mapping-table tr:hover td { background: var(--surface-2); }
.comparison-table .nis2-col, .comparison-table .dora-col { background: none; }

.coverage { display: inline-flex; padding: 2px var(--s-2); border-radius: var(--r-xs); font-size: var(--t-2xs); font-weight: var(--fw-semi); }
.coverage.high   { background: var(--ok-soft);   color: var(--ok); }
.coverage.medium { background: var(--warn-soft); color: var(--warn); }
.coverage.low    { background: var(--risk-soft); color: var(--risk); }

/* ---- Glossaire, FAQ, plan du site ----------------------------------------- */
.glossary-entry, .faq-item, .law-article { padding: var(--s-4); }
.glossary-entry h3, .faq-item h3, .law-title { font-size: var(--t-base); }
.answer, .faq-answer { color: var(--ink-2); font-size: var(--t-sm); }
.sitemap-section { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.sitemap-link { color: var(--ink-2); }
.sitemap-link:hover { color: var(--accent); }

/* ---- Formulaires ----------------------------------------------------------- */
.form-group label, .form-label {
    font-size: var(--t-xs);
    font-weight: var(--fw-semi);
    color: var(--ink-2);
}

/* ---- Divers ----------------------------------------------------------------- */
.highlight-box, .warning-box, .info-box, .note-box, .alert {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--ink);
}
.warning-box { border-left-color: var(--warn); background: var(--warn-soft); }
.alert-danger, .danger-box { border-left-color: var(--risk); background: var(--risk-soft); }


/* ---- Derniers hex en dur des feuilles héritées ---------------------------- */
.intro-section, .info-box-blue, .highlight-blue { background: var(--surface); }
.framework-hero, .mapping-hero, .resources-hero { background: var(--surface-2); color: var(--ink); }
.control-objective, .objective-box { background: var(--surface-2); }


/* ==========================================================================
   Bandeaux d'appel à l'action hérités
   Ils portaient un dégradé ; une fois celui-ci retiré, le raccourci
   « background: linear-gradient(...) » ne laisse aucune couleur de fond.
   On leur donne un aplat lisible sur les deux surfaces.
   ========================================================================== */
.service-cta, .dora-cta, .resiplan-cta, .resiplan-intro, .tools-cta,
.cta-card, .cta-section, .newsletter-section, .assessment-section,
.company-presentation {
    background-color: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    color: var(--ink);
    text-align: left;
}
.service-cta h2, .service-cta h3, .service-cta h4,
.dora-cta h2, .dora-cta h3, .resiplan-cta h2, .resiplan-cta h3,
.resiplan-intro h2, .resiplan-intro h3, .tools-cta h2, .tools-cta h3,
.newsletter-section h2, .newsletter-section h3, .cta-card h3 {
    color: var(--ink);
}
.service-cta p, .dora-cta p, .resiplan-cta p, .resiplan-intro p,
.tools-cta p, .newsletter-section p { color: var(--ink-2); opacity: 1; }

/* Pastilles numérotées : l'aplat reste, le texte doit contraster. */
.approach-number, .measure-number, .step-number, .flow-number {
    background-color: var(--accent);
    color: var(--accent-ink);
}

/* Jauges et compteurs des outils. */
.progress-fill { background-color: var(--accent); }
.score-circle  { background-color: var(--accent); color: var(--accent-ink); }
.synergy-box   { background-color: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }


/* ==========================================================================
   Classes portées par le balisage mais définies nulle part
   Deux sections entières de l'accueil se rendaient sans mise en forme.
   ========================================================================== */
.features-grid, .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
}
.feature-item {
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.feature-item h3, .feature-item h4 { margin-top: 0; font-size: var(--t-base); }
.feature-item p { margin-bottom: 0; color: var(--ink-2); font-size: var(--t-sm); }

.solution-features { margin: var(--s-3) 0 0; padding-left: var(--s-5); font-size: var(--t-sm); color: var(--ink-2); }
.solution-features li { margin-bottom: var(--s-1); }

/* Carte mise en avant : une bordure d'accent suffit, pas un fond différent. */
.card-highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }

.solutions-overview, .why-us, .quick-tools, .dora-intro,
.quiz-questions, .calculator-section { display: block; }
.cta-content, .company-logo-area { max-width: var(--measure); }

/* Repères de maturité dans une fiche de contrôle : ce sont des paliers, pas
   des attributs — on les distingue de la liste au-dessus. */
.attr-list.maturite dt { font-family: var(--font-mono); color: var(--accent); }
.attr-list.maturite dd { color: var(--ink-2); }

/* Pas de règle générique sur .icon : chaque icône est dimensionnée par son
   contexte (.btn svg, .nav__chevron, .searchbar__icon…). Une taille par défaut
   ici écrase ces contextes et fait enfler chevrons et loupe.
*/