/* =====================================================================
   N2M INTELLIGENCE — REFONTE 2026, SOCLE DE DIRECTION ARTISTIQUE (B1)
   ---------------------------------------------------------------------
   Chargée APRÈS theme.css. Elle fait trois choses :
     1. elle redéfinit les jetons de couleur et de typo → tout le site
        adopte la nouvelle charte d'un coup, y compris les pages encore
        au gabarit de juillet ;
     2. elle neutralise le rail vertical et la barre supérieure ;
     3. elle apporte l'en-tête horizontal clair et le nouveau pied de page.

   Le NOM DU FICHIER est versionné volontairement (da-v2) : le cache LWS
   indexe les CSS par nom et ignore le ?ver. Un nom neuf = un cache frais.
   Charte : CDC v1 du 05/10/2026 §3. Accessibilité : WCAG 2.2 AA.
   ===================================================================== */

/* ---------- 0. Polices hébergées localement (CDC §3) ----------
   Fichiers variables : un seul par famille et par sous-ensemble couvre
   toute la plage de graisses. Le `unicode-range` fait que latin-ext n'est
   téléchargé que si la page en a besoin — une page en français ne charge
   que les deux fichiers latin (≈ 50 Ko à deux).
   `font-display:swap` : le texte s'affiche tout de suite dans le repli
   système, la police prend le relais — pas de texte invisible. */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("../fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 1. Jetons ---------- */
:root{
  /* ---------------------------------------------------------------
     Palette = LES COULEURS RÉELLES DU LOGO, pas celles du CDC.

     Le cahier des charges §3 annonçait #062C51 et #2AAEDD. Mesure faite
     sur le fichier du logo : ses deux couleurs dominantes sont #001020
     (42 %) et #08B0F8 (36 %) — soit un bleu profond NETTEMENT plus
     sombre et un cyan plus vif. Le CDC disait vouloir « reprendre le
     bleu profond, le cyan et le blanc du dépliant » : ses codes
     hexadécimaux ne correspondaient simplement pas au dépliant.
     On suit la marque, pas la coquille. (Signalé par Jack, 14/10.)

     Contrastes vérifiés : #001424 sur blanc = 18,66 ; cyan sur bleu
     profond = 8,05 ; texte courant = 14,45 ; texte secondaire = 6,46.
     --------------------------------------------------------------- */
  --n2-deep:#001424;        /* bleu profond du logo : hero, titres, boutons */
  --n2-cyan:#03B5FF;        /* cyan du logo : icônes, soulignements, accents */
  --n2-pale:#EAF6FD;        /* bleu pâle : sections alternées, fonds de cartes */
  --n2-text:#0E2C40;        /* texte courant sur fond clair */
  --n2-text-2:#46617A;      /* texte secondaire, légendes */
  --n2-white:#FFFFFF;
  --n2-line:rgba(0,20,36,.16);
  --n2-line-soft:rgba(0,20,36,.09);

  /* Le cyan du logo sur blanc ne donne que 2,32:1 — illisible en texte.
     Cette variante assombrie (5,67:1) sert UNIQUEMENT au texte cyan sur
     fond clair : liens, puces, intitulés. Jamais aux aplats. */
  --n2-cyan-ink:#0A6E99;

  /* Remappage des jetons de juillet → les gabarits existants suivent. */
  --paper:var(--n2-white); --paper-2:#FAFCFE; --paper-3:var(--n2-pale);
  --ink:var(--n2-text); --ink-2:var(--n2-deep);
  --navy:var(--n2-deep); --navy-deep:#000B14; --rail:var(--n2-deep);
  --tech:var(--n2-cyan); --tech-deep:var(--n2-cyan-ink); --tech-2:#4FCBFF;
  --muted:var(--n2-text-2); --muted-2:#6B8399;
  --hair:var(--n2-line-soft); --hair-2:var(--n2-line);
  --rail-w:0px; --rail-w-open:0px;

  /* Typographie — deux familles au maximum (CDC §3), hébergées localement
     au §0 ci-dessus, repli système derrière. */
  --n2-display:"Manrope",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --n2-body:"Source Sans 3","Source Sans Pro",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:var(--n2-body);

  /* Mesures CDC §3 */
  --wrap:1200px;
  --gutter:20px;
  --sec-y:clamp(40px,7vw,96px);
  --radius:12px;
  --shadow:0 1px 2px rgba(0,20,36,.07),0 8px 24px rgba(0,20,36,.07);
  --header-h:76px;
}

/* ---------- 2. Base ---------- */
body{
  font-family:var(--n2-body);
  color:var(--n2-text);
  background:var(--n2-white);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.n2-display{font-family:var(--n2-display);color:var(--n2-deep);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(32px,5vw,64px)}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.22}
h3{font-size:clamp(20px,2vw,26px)}
p{line-height:1.6}
a{color:var(--n2-deep)}
a:hover{color:var(--n2-cyan-ink)}
:focus-visible{outline:3px solid var(--n2-cyan-ink);outline-offset:3px;border-radius:2px}

.n2-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.n2-section{padding-block:var(--sec-y)}
.n2-section--pale{background:var(--n2-pale)}
.n2-section--deep{background:var(--n2-deep);color:#D8E6F0}
.n2-section--deep h1,.n2-section--deep h2,.n2-section--deep h3{color:#fff}
.n2-eyebrow{
  font-family:var(--n2-display);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--n2-cyan-ink);display:flex;align-items:center;gap:10px;margin:0 0 14px
}
.n2-eyebrow::before{content:"";width:28px;height:2px;background:var(--n2-cyan);flex:0 0 auto}
.n2-section--deep .n2-eyebrow{color:var(--n2-cyan)}

/* ---------- 3. Boutons (CDC §3 : 4 états prévus) ---------- */
.n2-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--n2-display);font-size:15px;font-weight:700;line-height:1;
  padding:15px 22px;min-height:44px;border-radius:8px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.n2-btn svg{width:18px;height:18px;flex:0 0 auto}
.n2-btn--primary{background:var(--n2-deep);color:#fff;border-color:var(--n2-deep)}
.n2-btn--primary:hover{background:#0A3550;border-color:#0A3550;color:#fff}
.n2-btn--ghost{background:transparent;color:var(--n2-deep);border-color:var(--n2-line)}
.n2-btn--ghost:hover{border-color:var(--n2-deep);color:var(--n2-deep)}
/* Sur fond sombre : cyan à texte bleu profond (CDC §3). */
.n2-section--deep .n2-btn--primary,.n2-btn--on-deep{background:var(--n2-cyan);border-color:var(--n2-cyan);color:var(--n2-deep)}
.n2-section--deep .n2-btn--primary:hover,.n2-btn--on-deep:hover{background:#4FCBFF;border-color:#4FCBFF;color:var(--n2-deep)}
.n2-section--deep .n2-btn--ghost,.n2-hero .n2-btn--ghost,.n2-btn--ghost-on-deep{color:#fff;border-color:rgba(255,255,255,.45)}
.n2-section--deep .n2-btn--ghost:hover,.n2-hero .n2-btn--ghost:hover,.n2-btn--ghost-on-deep:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.n2-btn[aria-disabled="true"],.n2-btn:disabled{opacity:.45;pointer-events:none}
.n2-btn[data-loading="true"]{opacity:.7;pointer-events:none}

/* ---------- 4. On range le rail de juillet ---------- */
.rail,.rail-backdrop,.topbar,.foot{display:none !important}
.main{margin-left:0 !important}

/* ---------- 5. En-tête horizontal clair ---------- */
.n2-header{
  position:sticky;top:0;z-index:120;background:var(--n2-white);
  border-bottom:1px solid var(--n2-line-soft);
}
.n2-header__inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter);
  min-height:var(--header-h);display:flex;align-items:center;gap:20px;
}
.n2-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto;padding:8px 0}
.n2-logo img{display:block;height:52px;width:auto;max-width:264px}
.n2-logo__txt{font-family:var(--n2-display);font-weight:800;font-size:19px;color:var(--n2-deep);letter-spacing:.01em;line-height:1.1}
.n2-logo__txt b{color:var(--n2-cyan)}
.n2-logo__txt small{display:block;font-size:8.5px;font-weight:600;letter-spacing:.2em;color:var(--n2-text-2);margin-top:3px}

.n2-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.n2-nav__item{position:relative}
.n2-nav__link{
  display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border-radius:8px;
  font-family:var(--n2-display);font-size:15.5px;font-weight:600;color:var(--n2-deep);
  text-decoration:none;background:none;border:0;cursor:pointer;font-feature-settings:inherit;
}
.n2-nav__link:hover{background:var(--n2-pale)}
.n2-nav__item--current > .n2-nav__link{box-shadow:inset 0 -2px 0 var(--n2-cyan)}
.n2-nav__caret{width:14px;height:14px;transition:transform .18s}
.n2-nav__item[data-open="true"] .n2-nav__caret{transform:rotate(180deg)}

.n2-sub{
  position:absolute;top:calc(100% + 6px);left:0;min-width:330px;max-width:420px;
  background:#fff;border:1px solid var(--n2-line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px;margin:0;list-style:none;
  max-height:min(70vh,560px);overflow-y:auto;
}
.n2-sub[hidden]{display:none}
.n2-nav__item:last-child .n2-sub{left:auto;right:0}
.n2-sub a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--n2-deep)}
.n2-sub a:hover{background:var(--n2-pale)}
.n2-sub__label{font-family:var(--n2-display);font-weight:700;font-size:15px;display:block}
.n2-sub__desc{display:block;font-size:13.5px;color:var(--n2-text-2);line-height:1.45;margin-top:2px}
.n2-sub__all{border-top:1px solid var(--n2-line-soft);margin-top:6px;padding-top:6px}
.n2-sub__all a{font-weight:700;color:var(--n2-cyan-ink)}

.n2-header__cta{flex:0 0 auto;margin-left:8px}
.n2-burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--n2-line);
  border-radius:8px;width:46px;height:46px;align-items:center;justify-content:center;
  color:var(--n2-deep);cursor:pointer
}
.n2-burger svg{width:24px;height:24px}

/* ---------- 6. Panneau mobile ---------- */
.n2-panel{
  position:fixed;inset:var(--header-h) 0 0;background:#fff;z-index:119;
  overflow-y:auto;padding:16px var(--gutter) 40px;
}
.n2-panel[hidden]{display:none}
.n2-panel__group{border-bottom:1px solid var(--n2-line-soft)}
.n2-panel__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--n2-display);font-size:18px;font-weight:700;color:var(--n2-deep);text-align:left
}
.n2-panel__head svg{width:18px;height:18px;transition:transform .18s}
.n2-panel__group[data-open="true"] .n2-panel__head svg{transform:rotate(180deg)}
.n2-panel__list{list-style:none;margin:0;padding:0 0 12px}
.n2-panel__list[hidden]{display:none}
.n2-panel__list a{display:block;padding:12px 2px;color:var(--n2-text);text-decoration:none;min-height:44px}
.n2-panel__list a:hover{color:var(--n2-deep)}
.n2-panel__solo{display:block;padding:16px 2px;font-family:var(--n2-display);font-size:18px;font-weight:700;color:var(--n2-deep);text-decoration:none}
.n2-panel__cta{margin-top:22px}
.n2-panel__cta .n2-btn{width:100%}
.n2-panel__contact{margin-top:24px;font-size:15px;color:var(--n2-text-2)}
.n2-panel__contact a{display:block;padding:8px 0;color:var(--n2-deep);text-decoration:none;min-height:44px}
body.n2-panel-open{overflow:hidden}

/* ---------- 7. Pied de page ---------- */
.n2-footer{background:var(--n2-deep);color:#C9DCEA;padding-block:clamp(36px,5vw,64px) 0;margin-top:var(--sec-y)}
.n2-footer a{color:#C9DCEA;text-decoration:none}
.n2-footer a:hover{color:#fff;text-decoration:underline}
.n2-footer__grid{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:32px
}
.n2-footer__brand .n2-logo__txt{color:#fff}
.n2-footer__brand .n2-logo__txt small{color:#7FA3BF}
.n2-footer__pitch{margin:16px 0 0;font-size:15px;line-height:1.6;color:#A9C4D8;max-width:36ch}
.n2-footer h2{font-family:var(--n2-display);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--n2-cyan);margin:0 0 14px}
.n2-footer ul{list-style:none;margin:0;padding:0}
.n2-footer li{margin-bottom:9px;font-size:15px}
.n2-footer__contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.n2-footer__contact svg{width:18px;height:18px;flex:0 0 auto;color:var(--n2-cyan);margin-top:2px}
.n2-footer__bar{
  border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(28px,4vw,48px)
}
.n2-footer__bar-inner{
  max-width:var(--wrap);margin-inline:auto;padding:20px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;font-size:13.5px;color:#8FAFC8
}
.n2-footer__legal{display:flex;flex-wrap:wrap;gap:10px 20px;margin-left:auto}
.n2-fsign{color:#8FAFC8}
.n2-fsign a{color:var(--n2-cyan);text-decoration:none}
.n2-fsign a:hover{text-decoration:underline}

/* ---------- 8. Responsive ---------- */
@media (max-width:1100px){
  .n2-nav{display:none}
  .n2-header__cta{display:none}
  .n2-burger{display:inline-flex}
  .n2-footer__grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .n2-footer__brand{grid-column:1 / -1}
}
@media (min-width:1101px){
  .n2-panel{display:none !important}
}
@media (max-width:560px){
  .n2-footer__grid{grid-template-columns:1fr}
  .n2-footer__legal{margin-left:0}
  .n2-logo img{height:42px}
}

/* ---------- 9. Préférences utilisateur ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* Lien d'évitement : il doit rester visible au clavier. */
.skip-link:focus{left:16px;top:12px;z-index:200;background:var(--n2-deep);color:#fff;padding:12px 18px;border-radius:8px;font-family:var(--n2-display)}

/* =====================================================================
   B2 — PAGE D'ACCUEIL
   ===================================================================== */

/* ---------- Hero deux colonnes (CDC §4) ---------- */
.n2-hero{background:var(--n2-deep);color:#D8E6F0;overflow:hidden}
.n2-hero__inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding-block:clamp(44px,6vw,86px)
}
.n2-hero__title{color:#fff;font-size:clamp(32px,4.6vw,64px);line-height:1.08;margin:0 0 18px}
.n2-hero .n2-hl{color:var(--n2-cyan)}
.n2-hero__sub{font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:#B9D1E2;max-width:46ch;margin:0 0 28px}
.n2-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.n2-hero .n2-eyebrow{color:var(--n2-cyan)}
.n2-hero__media img,.n2-hero__media .n2mi-imgslot{
  width:100%;height:auto;display:block;border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(0,0,0,.34)
}
.n2-hero__media img{aspect-ratio:16/10;object-fit:cover}

/* ---------- Têtes de section ---------- */
.n2-sec-head{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:end;margin-bottom:clamp(26px,3vw,44px)}
.n2-sec-head h2{margin:0}
.n2-sec-head__note{margin:0;color:var(--n2-text-2);font-size:16px;line-height:1.6}
.n2-section--deep .n2-sec-head__note{color:#A9C4D8}
.n2-lead{font-size:clamp(16.5px,1.3vw,19px);line-height:1.62;color:var(--n2-text-2);max-width:72ch;margin:0 0 clamp(26px,3vw,40px)}
.n2-lead--light{color:#B9D1E2}
.n2-hl-ink{color:var(--n2-cyan-ink)}
.n2-sec-foot{margin:clamp(22px,2.5vw,34px) 0 0}
.n2-link-more{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--n2-display);font-weight:700;
  font-size:16px;color:var(--n2-cyan-ink);text-decoration:none;padding:10px 0;min-height:44px
}
.n2-link-more:hover{text-decoration:underline}

/* ---------- Grilles et cartes ---------- */
.n2-grid{display:grid;gap:18px}
.n2-grid--3{grid-template-columns:repeat(3,1fr)}
.n2-grid--4{grid-template-columns:repeat(4,1fr)}
.n2-card{
  background:#fff;border:1px solid var(--n2-line-soft);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column
}
.n2-section--pale .n2-card{background:#fff}
.n2-card h3{margin:0 0 8px;font-size:18px}
.n2-card p{margin:0;color:var(--n2-text-2);font-size:15px;line-height:1.55}
.n2-card--link{text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s;padding-bottom:46px}
.n2-card--link:hover{border-color:var(--n2-cyan);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,20,36,.12)}
.n2-card__ic{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;background:var(--n2-pale);color:var(--n2-cyan-ink);margin-bottom:14px
}
.n2-card__ic svg{width:23px;height:23px}
.n2-card__go{position:absolute;left:20px;bottom:18px;color:var(--n2-cyan-ink);font-size:18px;line-height:1}

/* ---------- Secteurs ---------- */
.n2-secteurs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.n2-secteurs a{
  display:flex;flex-direction:column;gap:8px;height:100%;background:#fff;text-decoration:none;
  border:1px solid var(--n2-line-soft);border-left:3px solid var(--n2-cyan);
  border-radius:var(--radius);padding:20px 18px;transition:border-color .18s,transform .18s
}
.n2-secteurs a:hover{transform:translateY(-2px);border-color:var(--n2-cyan)}
.n2-secteurs__name{font-family:var(--n2-display);font-weight:700;font-size:17px;color:var(--n2-deep)}
.n2-secteurs__risk{font-size:14.5px;line-height:1.5;color:var(--n2-text-2)}

/* ---------- Chaîne intégrée ---------- */
.n2-chaine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:n}
.n2-chaine__item{position:relative;padding-top:8px}
/* Le trait qui relie les étapes : décoratif, il disparaît en une colonne. */
.n2-chaine__item::after{
  content:"";position:absolute;top:30px;left:calc(50% + 32px);right:calc(-50% + 32px);height:1px;
  background:rgba(3,181,255,.38)
}
.n2-chaine__item:last-child::after{display:none}
.n2-chaine__mark{display:block;width:48px;height:48px;color:var(--n2-cyan);margin-bottom:14px}
.n2-chaine__num{display:block;font-family:var(--n2-display);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--n2-cyan);margin-bottom:6px}
.n2-chaine h3{color:#fff;font-size:18px;margin:0 0 6px}
.n2-chaine p{margin:0;color:#A9C4D8;font-size:14.5px;line-height:1.55}

/* ---------- Méthode ---------- */
.n2-methode{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.n2-methode li{border-top:2px solid var(--n2-cyan);padding-top:18px}
.n2-methode__num{display:block;font-family:var(--n2-display);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--n2-cyan-ink);margin-bottom:8px}
.n2-methode h3{margin:0 0 8px;font-size:19px}
.n2-methode p{margin:0;color:var(--n2-text-2);font-size:15px;line-height:1.55}

/* ---------- Appel au diagnostic ---------- */
.n2-cta__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.n2-cta__act{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.n2-cta__coord{margin:0;display:flex;flex-direction:column;gap:4px;font-size:16px}
.n2-cta__coord a{color:var(--n2-cyan);text-decoration:none;padding:6px 0;min-height:44px;display:inline-flex;align-items:center}
.n2-cta__coord a:hover{text-decoration:underline}

/* ---------- Adaptations ---------- */
@media (max-width:1024px){
  .n2-grid--4{grid-template-columns:repeat(2,1fr)}
  .n2-secteurs{grid-template-columns:repeat(2,1fr)}
  .n2-chaine{grid-template-columns:repeat(2,1fr)}
  .n2-chaine__item::after{display:none}
  .n2-methode{grid-template-columns:repeat(2,1fr)}
  .n2-sec-head{grid-template-columns:1fr}
  .n2-hero__inner{grid-template-columns:1fr}
  /* Sur mobile le titre, le texte et les boutons passent AVANT l'image (CDC §4). */
  .n2-hero__media{order:2}
  .n2-hero__txt{order:1}
  .n2-cta__inner{grid-template-columns:1fr}
}
@media (max-width:680px){
  .n2-grid--3,.n2-grid--4{grid-template-columns:1fr}
  .n2-secteurs{grid-template-columns:1fr}
  .n2-chaine{grid-template-columns:1fr}
  .n2-methode{grid-template-columns:1fr}
  .n2-hero__cta .n2-btn{flex:1 1 100%}
}

/* =====================================================================
   B3 — FICHE SOLUTION (modèle CDC §5)
   ===================================================================== */

.n2-page-hero{background:var(--n2-deep);color:#C9DCEA;padding-block:clamp(30px,4vw,56px)}
.n2-page-hero__inner{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.n2-page-hero h1{color:#fff;margin:10px 0 12px;font-size:clamp(30px,4vw,52px)}
.n2-page-hero__sub{margin:0 0 22px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:#B9D1E2;max-width:60ch}
.n2-page-hero__ic{width:110px;height:110px;border-radius:20px;background:rgba(3,181,255,.14);
  border:1px solid rgba(3,181,255,.38);display:flex;align-items:center;justify-content:center;color:var(--n2-cyan)}
.n2-page-hero__ic svg{width:54px;height:54px}
.n2-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#8FAFC8}
.n2-crumb a{color:#8FAFC8;text-decoration:none}
.n2-crumb a:hover{color:#fff;text-decoration:underline}
.n2-crumb [aria-current]{color:var(--n2-cyan)}

.n2-solution__media{margin-top:-28px;position:relative;z-index:2}
.n2-solution__media img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:21/9;object-fit:cover}

.n2-solution__body{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(24px,3vw,48px);align-items:start}
.n2-prose{font-size:17.5px;line-height:1.68;color:var(--n2-text)}
.n2-prose h2{font-size:clamp(23px,2.2vw,30px);margin:34px 0 12px}
.n2-prose h3{margin:26px 0 10px}
.n2-prose p{margin:0 0 16px}
.n2-prose ul{margin:0 0 18px;padding-left:20px}
.n2-prose li{margin-bottom:8px}
.n2-prose a{color:var(--n2-cyan-ink);text-decoration:underline;text-underline-offset:2px}

.n2-aside-box{background:var(--n2-pale);border-radius:var(--radius);padding:22px 20px;margin-bottom:18px}
.n2-aside-box--plain{background:#fff;border:1px solid var(--n2-line-soft)}
.n2-aside-box h2{font-size:16px;font-family:var(--n2-display);letter-spacing:.04em;margin:0 0 14px}
.n2-aside-note{font-size:14px;line-height:1.55;color:var(--n2-text-2);margin:14px 0 0}
.n2-aside-note--light{color:#A9C4D8;margin-top:22px}

.n2-ticks,.n2-dots{list-style:none;margin:0;padding:0}
.n2-ticks li,.n2-dots li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15.5px;line-height:1.55}
.n2-ticks li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:8px;
  border-left:2px solid var(--n2-cyan-ink);border-bottom:2px solid var(--n2-cyan-ink);transform:rotate(-45deg)
}
.n2-dots li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--n2-cyan)}
.n2-ticks--cols{columns:2;column-gap:36px}

.n2-card__num{display:block;font-family:var(--n2-display);font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--n2-cyan-ink);margin-bottom:10px}
.n2-grid--2{grid-template-columns:repeat(2,1fr)}
.n2-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,56px);align-items:start}

.n2-steps{list-style:none;margin:0;padding:0}
.n2-steps li{position:relative;padding:0 0 22px 46px;border-left:1px solid var(--n2-line)}
.n2-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.n2-steps__num{
  position:absolute;left:-15px;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--n2-deep);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--n2-display);font-size:12px;font-weight:700
}
.n2-steps h3{margin:3px 0 6px;font-size:18px}
.n2-steps p{margin:0;color:var(--n2-text-2);font-size:15px;line-height:1.55}

.n2-case{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:24px 22px}
.n2-case h3{color:#fff;margin:0 0 10px;font-size:19px}
.n2-case p{margin:0;color:#B9D1E2;font-size:15.5px;line-height:1.6}

.n2-faq-wrap{max-width:900px}
.n2-faq{margin-top:10px}
.n2-faq__item{border-bottom:1px solid var(--n2-line);background:none}
.n2-faq__item summary{
  cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;
  font-family:var(--n2-display);font-weight:700;font-size:17.5px;color:var(--n2-deep);min-height:44px
}
.n2-faq__item summary::-webkit-details-marker{display:none}
.n2-faq__item summary::after{
  content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--n2-cyan-ink);border-bottom:2px solid var(--n2-cyan-ink);
  transform:rotate(45deg);transition:transform .18s
}
.n2-faq__item[open] summary::after{transform:rotate(-135deg)}
.n2-faq__a{padding:0 0 20px}
.n2-faq__a p{margin:0;color:var(--n2-text-2);font-size:16.5px;line-height:1.62;max-width:78ch}

.n2-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.n2-chips a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--n2-line);color:var(--n2-deep);text-decoration:none;font-size:15px;background:#fff
}
.n2-chips a:hover{border-color:var(--n2-cyan);background:var(--n2-pale)}
.n2-related{margin-top:clamp(34px,4vw,56px)}
.n2-related h2{margin:0 0 18px}

@media (max-width:1024px){
  .n2-solution__body{grid-template-columns:1fr}
  .n2-two{grid-template-columns:1fr}
  .n2-page-hero__inner{grid-template-columns:1fr}
  .n2-page-hero__ic{display:none}
}
@media (max-width:680px){
  .n2-grid--2{grid-template-columns:1fr}
  .n2-ticks--cols{columns:1}
  .n2-solution__media img{aspect-ratio:16/9}
}

/* =====================================================================
   B6 — ARCHIVES
   ===================================================================== */
.n2-archive-intro{max-width:72ch}
.n2-archive-intro .n2-lead{margin-bottom:18px}
.n2-prose-p{font-size:17px;line-height:1.68;color:var(--n2-text-2);margin:0 0 16px;max-width:72ch}
/* L'archive des secteurs en affiche onze : 3 colonnes respirent mieux que 5. */
.n2-secteurs--archive{grid-template-columns:repeat(3,1fr)}
.n2-pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,40px)}
.n2-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 12px;border-radius:8px;border:1px solid var(--n2-line);background:#fff;
  color:var(--n2-deep);text-decoration:none;font-family:var(--n2-display);font-weight:600
}
.n2-pagination .page-numbers:hover{border-color:var(--n2-cyan)}
.n2-pagination .page-numbers.current{background:var(--n2-deep);border-color:var(--n2-deep);color:#fff}
@media (max-width:1024px){ .n2-secteurs--archive{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .n2-secteurs--archive{grid-template-columns:1fr} }

/* =====================================================================
   B7 — PAGES ÉDITORIALES
   ===================================================================== */
.n2-etapes{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.n2-etape{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:#fff;border:1px solid var(--n2-line-soft);border-radius:var(--radius);padding:24px 22px}
.n2-etape__num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--n2-deep);color:#fff;font-family:var(--n2-display);font-weight:700;font-size:15px}
.n2-etape h3{margin:6px 0 10px;font-size:21px}
.n2-etape p{margin:0 0 12px;color:var(--n2-text-2);font-size:16px;line-height:1.62;max-width:78ch}
.n2-etape__livrable{margin:0;font-size:15px;color:var(--n2-deep);
  border-left:3px solid var(--n2-cyan);padding-left:12px}
.n2-etape__livrable strong{font-family:var(--n2-display)}
@media (max-width:680px){
  .n2-etape{grid-template-columns:1fr;gap:12px}
}

/* ---------- B7 : coordonnées, formulaires, statistiques ---------- */
.n2-coord{list-style:none;margin:0;padding:0}
.n2-coord li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--n2-line-soft);font-size:15.5px}
.n2-coord li:last-child{border-bottom:0}
.n2-coord span{font-family:var(--n2-display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--n2-text-2)}
.n2-coord a{color:var(--n2-deep);text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
.n2-coord a:hover{color:var(--n2-cyan-ink);text-decoration:underline}

.n2-suite{margin:0;padding-left:20px;color:var(--n2-text-2);font-size:15px;line-height:1.55}
.n2-suite li{margin-bottom:9px}

.n2-contexte-pre{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:10px 16px;border-radius:999px;
  background:var(--n2-pale);font-size:15px;color:var(--n2-text-2)
}
.n2-contexte-pre a{color:var(--n2-cyan-ink);font-weight:700}

.n2-res-meta{font-family:var(--n2-display);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n2-text-2);margin:12px 0 0}

.n2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.n2-stat{border-top:2px solid var(--n2-cyan);padding-top:18px}
.n2-stat__v{display:block;font-family:var(--n2-display);font-size:clamp(38px,4.5vw,58px);font-weight:800;color:#fff;line-height:1}
.n2-stat__l{display:block;margin-top:8px;color:#A9C4D8;font-size:15.5px;line-height:1.5}

/* Appel au diagnostic posé sur fond CLAIR : le cyan pur n'y passe pas. */
.n2-section:not(.n2-section--deep) .n2-cta__coord a{color:var(--n2-cyan-ink)}

/* Le formulaire hérite des champs existants ; on borne juste sa largeur. */
.n2-form{max-width:46rem;margin-top:20px}

@media (max-width:680px){
  .n2-stats{grid-template-columns:1fr}
}

/* ---------- B10 : correctif de contraste ----------
   Dans le pied de page, `.n2-footer a{color:#C9DCEA}` écrasait la couleur du
   bouton cyan : texte bleu pâle sur cyan, contraste 1,82 au lieu des 4,5
   exigés. On redonne la main au bouton, partout où il apparaît. */
.n2-footer .n2-btn--on-deep,
.n2-footer .n2-btn--on-deep:hover,
.n2-section--deep .n2-btn--on-deep,
a.n2-btn--on-deep{color:var(--n2-deep)}

/* ---------- Vidéo de fond du hero ----------
   Elle se superpose à l'image d'affiche et n'apparaît qu'une fois réellement
   lancée, pour qu'aucun cadre vide ne s'affiche entre-temps. */
.n2-hero__media{position:relative}
.n2-hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius);display:block;opacity:0;transition:opacity .5s ease;
  pointer-events:none;z-index:1
}
.n2-hero__video.est-active{opacity:1}
.n2-hero__media img{position:relative;z-index:0}
@media (max-width:1024px){ .n2-hero__video{display:none} }

/* ---- Bande photo de section (n2mi_band) ----------------------------------
   Rendue seulement quand l'emplacement porte une image : pas de cadre vide.
   Sur mobile on repasse en 16/9, une bande 21/9 y devient une fente illisible. */
.n2-band{margin:30px 0 0;width:100%;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper-3)}
.n2-band img{width:100%;height:100%;object-fit:cover;display:block}
.n2-section--deep .n2-band,.n2-cta .n2-band{box-shadow:0 18px 44px rgba(0,0,0,.34)}
@media(max-width:820px){.n2-band{aspect-ratio:16/9!important;margin-top:22px;border-radius:calc(var(--radius) * .8)}}
/* Photo en tête de carte d'entité : collée au bord haut de la carte, pas de marge. */
.n2-card--photo{padding-top:0;overflow:hidden}
.n2-band--card{margin:0 0 16px;border-radius:0;box-shadow:none;border-bottom:1px solid var(--hair)}
.n2-card--photo>h3{padding-inline:2px}

/* ---- Menu : libelle cliquable + chevron separe -----------------------------
   Le libelle mene a la page de la rubrique, le chevron ouvre le panneau.
   Les deux restent visuellement UN seul element de menu. */
.n2-nav__item{display:flex;align-items:center;gap:2px}
.n2-nav__toggle{display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:6px 6px;margin:0;cursor:pointer;color:inherit;
  border-radius:6px;line-height:0}
.n2-nav__toggle:hover,.n2-nav__toggle:focus-visible{background:rgba(255,255,255,.08)}
.n2-nav__item[data-open] .n2-nav__toggle svg{transform:rotate(180deg)}
.n2-nav__toggle svg{transition:transform .18s ease}

/* ---- Hero : la vidéo occupe tout le fond --------------------------------
   Le texte passe par-dessus. Le voile est un DÉGRADÉ, pas un gris uniforme :
   il est dense du côté du texte (lisibilité) et s'allège vers la droite pour
   laisser voir le mur d'écrans. Sans lui, le texte blanc devient illisible dès
   que le plan s'éclaircit. */
.n2-hero--full{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(560px,78vh,860px)}
.n2-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.n2-hero__bgimg,.n2-hero--full .n2-hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;margin:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.n2-hero--full .n2-hero__video{opacity:0;transition:opacity .6s ease;z-index:1;pointer-events:none}
.n2-hero--full .n2-hero__video.est-active{opacity:1}
.n2-hero__veil{position:absolute;inset:0;z-index:2;display:block;background:
  linear-gradient(90deg,rgba(8,20,33,.95) 0%,rgba(8,20,33,.88) 38%,rgba(8,20,33,.60) 72%,rgba(8,20,33,.46) 100%)}
.n2-hero--full .n2-hero__inner{position:relative;z-index:3;display:block;
  padding-block:clamp(64px,9vw,118px)}
.n2-hero--full .n2-hero__txt{max-width:60ch}
.n2-hero--full .n2-hero__sub{color:#CBDDEA}
@media (max-width:1024px){
  .n2-hero--full{min-height:clamp(460px,68vh,620px)}
  /* En colonne, le texte couvre toute la largeur : le dégradé devient vertical.
     Allégé par rapport au premier essai, où l'image disparaissait complètement
     derrière le voile. On garde assez de densité pour le texte blanc. */
  .n2-hero__veil{background:
    linear-gradient(180deg,rgba(8,20,33,.72) 0%,rgba(8,20,33,.78) 48%,rgba(8,20,33,.90) 100%)}
  /* Pas de vidéo sous 1024px : inutile de la laisser dans le flux. */
  .n2-hero--full .n2-hero__video{display:none}
}

/* Le mot qui se réécrit : largeur réservée pour que la ligne ne saute pas. */
.n2-hero__title [data-n2mi-typewriter]{display:inline-block;min-width:1ch}
.n2-hero__title [data-n2mi-typewriter]::after{content:"";display:inline-block;width:2px;height:.92em;
  margin-left:3px;vertical-align:-.08em;background:currentColor;animation:n2mi-curseur 1s step-end infinite}
@keyframes n2mi-curseur{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .n2-hero__title [data-n2mi-typewriter]::after{animation:none;opacity:0}
}
/* Le curseur suit aussi les titres de page. */
.n2-page-hero h1 [data-n2mi-typewriter]{display:inline-block}
.n2-page-hero h1 [data-n2mi-typewriter]::after{content:"";display:inline-block;width:2px;height:.9em;
  margin-left:3px;vertical-align:-.06em;background:currentColor;animation:n2mi-curseur 1s step-end infinite}
@media (prefers-reduced-motion:reduce){
  .n2-page-hero h1 [data-n2mi-typewriter]::after{animation:none;opacity:0}
}

/* ---- Images de fond sur les cartes --------------------------------------
   La photo de la fiche passe en fond de sa carte. Le voile est un DÉGRADÉ :
   léger en haut, là où il n'y a que l'icône, et presque opaque en bas, là où
   se lisent le titre et le texte. C'est ce qui permet de voir l'image sans
   toucher au contraste du texte, qui reste sombre sur blanc.
   Au survol, l'image se rapproche et le voile s'allège un peu. */
.n2-card--fond,.n2-secteurs--fond{position:relative;overflow:hidden;isolation:isolate}
.n2-card--fond::before,.n2-card--fond::after,
.n2-secteurs--fond::before,.n2-secteurs--fond::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.n2-card--fond::before,.n2-secteurs--fond::before{
  background-image:var(--n2-fond);background-size:cover;background-position:center;
  transform:scale(1.03);transition:transform .5s ease;z-index:0}
/* Carte SOLUTION : une icone en haut, le texte en bas → voile léger en haut. */
.n2-card--fond::after{z-index:1;background:linear-gradient(180deg,
  rgba(255,255,255,.60) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.965) 72%,rgba(255,255,255,.985) 100%)}
/* Carte SECTEUR : pas d'icone, le texte commence EN HAUT → dégradé inversé,
   sinon l'image passe derrière le titre et la lisibilité tombe. */
.n2-secteurs--fond::after{z-index:1;background:linear-gradient(180deg,
  rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 46%,rgba(255,255,255,.74) 80%,rgba(255,255,255,.52) 100%)}
/* Le contenu repasse au-dessus des deux couches. */
.n2-card--fond>*,.n2-secteurs--fond>*{position:relative;z-index:2}
.n2-card--fond:hover::before,.n2-secteurs--fond:hover::before{transform:scale(1.09)}
.n2-card--fond:hover::after{background:linear-gradient(180deg,
  rgba(255,255,255,.46) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.95) 72%,rgba(255,255,255,.98) 100%)}
.n2-secteurs--fond:hover::after{background:linear-gradient(180deg,
  rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.62) 80%,rgba(255,255,255,.38) 100%)}
/* L'icône reste lisible sur la partie la plus claire du voile. */
.n2-card--fond .n2-card__ic{background:rgba(255,255,255,.86);backdrop-filter:blur(2px)}
@media (prefers-reduced-motion:reduce){
  .n2-card--fond::before,.n2-secteurs--fond::before{transition:none}
  .n2-card--fond:hover::before,.n2-secteurs--fond:hover::before{transform:scale(1.03)}
}
/* Pas de fond de carte sous 1024 px.
   Un navigateur ne télécharge pas une background-image qui n'est pas appliquée :
   cette règle vaut donc ZÉRO octet de fond sur mobile, pas seulement un masquage.
   Même principe que la vidéo du hero — le décor ne se paie pas en forfait. */
@media (max-width:1024px){
  .n2-card--fond::before,.n2-secteurs--fond::before,
  .n2-card--fond::after,.n2-secteurs--fond::after{background-image:none}
}