/* =========================================================================
   Section « Conseils » — feuille dédiée à services/conseil.html
   Réutilise les variables de styles.css (--navy, --navy-deep, --gold,
   --gold-dark, --sable, --gray1, --gray2, --gray6, --gray8) et le hero
   partagé assets/service-hero-premium.css.
   Aucune règle .shp-* ici : la bannière n'est pas modifiée.
   ========================================================================= */

:root{
  --cn-navy: var(--navy);
  --cn-navy-deep: var(--navy-deep);
  --cn-gold: var(--gold);
  --cn-gold-deep: var(--gold-dark);
  --cn-sand: var(--sable);
  --cn-steel: #2c5a6f;
  --cn-line: #e3e8eb;
}

/* ---------- lien d'évitement ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--cn-navy);color:#fff;padding:.75rem 1.25rem;z-index:2000;font:700 .85rem 'Space Grotesk',sans-serif}
.skip-link:focus{left:1rem;top:1rem}

/* ---------- ossature ---------- */
.cn-page{color:var(--gray8);background:#fff}
.cn-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(1.5rem,4vw,64px);box-sizing:border-box}
.cn-sec{padding:clamp(4rem,7vw,6.5rem) 0}
.cn-kicker{
  display:block;font:700 .68rem/1 'Space Grotesk',sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:var(--cn-gold-deep);margin-bottom:.95rem;
}
.cn-h2{
  font-family:'Ibarra Real Nova',serif;font-weight:700;
  font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.24;letter-spacing:-.008em;
  color:var(--cn-navy-deep);margin:0 0 1rem;max-width:22ch;
}
.cn-lead{font-size:1rem;line-height:1.8;color:var(--gray6);margin:0;max-width:62ch}
.cn-page a:focus-visible,
.cn-page button:focus-visible,
.cn-page input:focus-visible,
.cn-page textarea:focus-visible{outline:3px solid var(--cn-gold);outline-offset:3px;border-radius:2px}
.cn-rule{display:block;width:88px;height:2px;background:var(--cn-gold);transform-origin:left center}

.cn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--cn-gold);color:#052230;border:1.5px solid transparent;cursor:pointer;
  font:700 .84rem/1 'Space Grotesk',sans-serif;letter-spacing:.03em;
  padding:15px 28px;text-decoration:none;min-height:46px;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.cn-btn:hover{background:var(--cn-gold-deep);color:#fff;transform:translateY(-2px)}
.cn-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42);
  font:600 .84rem/1 'Space Grotesk',sans-serif;letter-spacing:.03em;
  padding:15px 28px;text-decoration:none;min-height:46px;
  transition:background .22s ease,border-color .22s ease;
}
.cn-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
.cn-btn-ghost.on-light{color:var(--cn-navy);border-color:rgba(14,77,108,.4)}
.cn-btn-ghost.on-light:hover{background:rgba(14,77,108,.06);border-color:var(--cn-navy)}

/* Lien souligné animé (le trait se dessine au survol) */
.cn-link{
  position:relative;display:inline-block;color:var(--cn-navy);text-decoration:none;
  font:700 .84rem/1.5 'Space Grotesk',sans-serif;padding-bottom:3px;
}
.cn-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cn-gold-deep);
  transform:scaleX(.32);transform-origin:left center;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.cn-link:hover::after,.cn-link:focus-visible::after{transform:scaleX(1)}

/* =========================================================================
   Navigation secondaire fixe
   ========================================================================= */
.cn-subnav{
  position:sticky;top:var(--nav-h,68px);z-index:80;background:#fff;
  border-bottom:1px solid var(--cn-line);box-shadow:0 2px 10px rgba(1,46,74,.05);
}
.cn-subnav-inner{
  max-width:1240px;margin:0 auto;padding:0 clamp(1.5rem,4vw,64px);
  display:flex;gap:2rem;overflow-x:auto;flex-wrap:nowrap;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cn-subnav-inner::-webkit-scrollbar{display:none}
.cn-subnav a{
  flex:0 0 auto;padding:.9rem 0;white-space:nowrap;text-decoration:none;
  font:600 .78rem/1 'Space Grotesk',sans-serif;letter-spacing:.02em;color:var(--gray6);
  border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.cn-subnav a:hover{color:var(--cn-navy)}
.cn-subnav a.is-active{color:var(--cn-navy);border-bottom-color:var(--cn-gold)}

/* =========================================================================
   1. ENTRÉE ÉDITORIALE
   ========================================================================= */
.cn-open{background:#fff;padding-top:clamp(3.5rem,6vw,5.5rem);padding-bottom:0}
.cn-open-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
}
.cn-open-manifest{
  font-family:'Ibarra Real Nova',serif;font-weight:700;
  font-size:clamp(1.85rem,3.1vw,2.75rem);line-height:1.16;letter-spacing:-.015em;
  color:var(--cn-navy-deep);margin:0 0 1.5rem;max-width:15ch;
}
.cn-open-text p{font-size:1.01rem;line-height:1.85;color:var(--gray6);margin:0 0 1.1rem;max-width:52ch}
.cn-open-text p:last-of-type{margin-bottom:0}
.cn-open-close{
  margin-top:1.6rem;padding-left:1.35rem;border-left:2px solid var(--cn-gold);
  font-family:'Ibarra Real Nova',serif;font-size:1.08rem;line-height:1.55;
  color:var(--cn-navy-deep);max-width:40ch;
}
/* Média : bord biseauté, rappel discret de la mosaïque */
.cn-open-media{position:relative;overflow:hidden;aspect-ratio:4/3;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 46px)}
.cn-open-media img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;display:block;filter:saturate(.86) contrast(1.04)}
.cn-open-caption{
  margin-top:.75rem;font-size:.76rem;line-height:1.6;color:var(--gray6);max-width:44ch;
  padding-left:.9rem;border-left:1px solid var(--cn-gold);
}

/* =========================================================================
   2. CARTOGRAPHIE DES CHAMPS D'INTERVENTION (composition signature)
   Cinq strates décalées, reliées par une faille verticale dorée.
   Le texte reste dans le flux : sélectionnable, lisible sans JavaScript.
   ========================================================================= */
.cn-map{background:var(--cn-sand);padding-block:clamp(1.7rem,2.35vw,2.1rem)}
.cn-map-head{max-width:74ch;margin-bottom:clamp(.8rem,1.1vw,1.05rem)}
.cn-map .cn-kicker{margin-bottom:.45rem}
.cn-map .cn-h2{font-size:clamp(1.45rem,2.05vw,1.8rem);line-height:1.16;margin:0 0 .5rem;max-width:24ch}
/* Déclaration d’expertise : affirmée, pas un paragraphe descriptif */
.cn-map-statement{
  font-family:'Ibarra Real Nova',serif;font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.4;color:var(--cn-navy-deep);margin:0;max-width:70ch;
  padding-left:1.1rem;border-left:2px solid var(--cn-gold);
}
.cn-map-body{position:relative;padding-left:clamp(2.5rem,4vw,3.5rem)}
.cn-map-spine{
  position:absolute;left:0;top:0;bottom:0;width:clamp(2.5rem,4vw,3.5rem);
  display:flex;align-items:center;justify-content:center;
}
.cn-map-spine::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--cn-gold);
  transform:translateX(-50%);transform-origin:top center;
}
.cn-map-spine span{
  position:relative;writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 .6rem/1 'Space Grotesk',sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cn-navy-deep);background:var(--cn-sand);padding:.55rem 0;
}
.cn-strata{list-style:none;margin:0;padding:0}
.cn-stratum{
  display:grid;grid-template-columns:2.1rem minmax(0,11.5rem) minmax(0,1fr);
  gap:clamp(.75rem,1.25vw,1.25rem);align-items:start;
  padding:clamp(.55rem,.83vw,.74rem) clamp(1.1rem,1.7vw,1.5rem);
  border-top:1px solid rgba(10,56,80,.16);
}
/* Escalier : chaque strate s'enfonce un peu plus dans l'organisation */
.cn-stratum:nth-child(1){margin-left:0;background:#fff}
.cn-stratum:nth-child(2){margin-left:clamp(.6rem,1vw,1rem);background:#fbf8f0}
.cn-stratum:nth-child(3){margin-left:clamp(1.2rem,2vw,2rem);background:#f3ece0}
.cn-stratum:nth-child(4){margin-left:clamp(1.8rem,3vw,3rem);background:#e7dcc9;border-top-color:rgba(10,56,80,.22)}
.cn-stratum:nth-child(5){margin-left:clamp(2.4rem,4vw,4rem);background:var(--cn-navy-deep);border-top-color:var(--cn-gold)}
.cn-stratum-num{font:700 .68rem/1.5 'Space Grotesk',sans-serif;letter-spacing:.1em;color:var(--cn-gold-deep)}
.cn-stratum h3{font-family:'Ibarra Real Nova',serif;font-size:1.02rem;line-height:1.2;color:var(--cn-navy-deep);margin:0 0 .14rem;font-weight:700}
.cn-stratum-sub{font-size:.75rem;line-height:1.34;color:var(--gray6);margin:0}
.cn-fields{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.26rem .34rem}
.cn-fields li{
  font-size:.76rem;line-height:1.28;color:#3c4a51;
  padding:.2rem .5rem;border:1px solid rgba(10,56,80,.18);background:rgba(255,255,255,.55);
}
.cn-fields li.is-key{border-color:var(--cn-gold-deep);color:var(--cn-navy-deep);font-weight:700;background:#fff}
/* Strate sombre : inversion des couleurs de texte */
.cn-stratum:nth-child(5) h3{color:#fff}
.cn-stratum:nth-child(5) .cn-stratum-sub{color:rgba(255,255,255,.68)}
.cn-stratum:nth-child(5) .cn-stratum-num{color:var(--cn-gold)}
.cn-stratum:nth-child(5) .cn-fields li{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.cn-stratum:nth-child(5) .cn-fields li.is-key{color:#fff;border-color:var(--cn-gold);background:rgba(201,164,92,.18)}
.cn-map-note{
  margin-top:.8rem;font-size:.79rem;line-height:1.5;color:var(--gray6);max-width:78ch;
  padding-top:.7rem;border-top:1px solid rgba(10,56,80,.16);
}
.cn-map-legend{display:inline-flex;align-items:center;gap:.4rem;margin-right:1rem;font-size:.75rem;color:var(--gray6)}
.cn-map-legend i{display:inline-block;width:10px;height:10px;border:1px solid var(--cn-gold-deep);background:#fff;flex-shrink:0}

/* =========================================================================
   3. INDEX ÉDITORIAL DES MANDATS
   ========================================================================= */
.cn-mandats{background:#fff}
.cn-mandats-head{max-width:58ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.cn-index{list-style:none;margin:0;padding:0;border-top:2px solid var(--cn-navy-deep)}
.cn-entry{
  display:grid;grid-template-columns:3.5rem minmax(0,1.05fr) minmax(0,1.25fr);
  gap:clamp(1.25rem,2.6vw,2.75rem);align-items:start;
  padding:clamp(1.8rem,3vw,2.5rem) 0;border-bottom:1px solid var(--cn-line);
  transition:background .3s ease;
}
.cn-entry:hover{background:#fcfbf8}
.cn-entry-num{font-family:'Ibarra Real Nova',serif;font-size:1.5rem;font-weight:700;color:var(--cn-gold-deep);line-height:1.1}
.cn-entry h3{font-family:'Ibarra Real Nova',serif;font-size:1.28rem;line-height:1.28;color:var(--cn-navy-deep);margin:0 0 .55rem}
.cn-entry-situation{font-family:'Ibarra Real Nova',serif;font-style:italic;font-size:1rem;line-height:1.6;color:var(--cn-navy);margin:0;max-width:34ch}
.cn-entry-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2vw,2rem)}
.cn-entry-col b{
  display:block;font:700 .64rem/1 'Space Grotesk',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray6);margin-bottom:.5rem;
}
.cn-entry-col p{font-size:.86rem;line-height:1.7;color:#4c5c64;margin:0}
.cn-entry-links{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1rem}

/* Bande photographique intercalée dans l'index */
.cn-mandats-figure{margin:clamp(2rem,3.5vw,3rem) 0 0;position:relative;overflow:hidden;
  aspect-ratio:21/8;clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}
.cn-mandats-figure img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;filter:saturate(.86) contrast(1.03)}
.cn-figure-caption{margin-top:.7rem;font-size:.76rem;color:var(--gray6);padding-left:.9rem;border-left:1px solid var(--cn-gold);max-width:52ch}

/* =========================================================================
   4. QUATRE MODES D'INTERVENTION — ligne de lecture
   ========================================================================= */
.cn-modes{background:var(--cn-sand)}
.cn-modes-head{max-width:58ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.cn-rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2.5rem);
  position:relative;padding-top:2.6rem;
}
.cn-rail-line{
  position:absolute;top:0;left:0;right:0;height:2px;background:rgba(10,56,80,.2);transform-origin:left center;
}
.cn-mode{position:relative;padding-top:.2rem}
.cn-mode::before{
  content:"";position:absolute;top:-2.6rem;left:0;width:12px;height:12px;background:var(--cn-gold);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.cn-mode-need{
  font-family:'Ibarra Real Nova',serif;font-size:1.18rem;line-height:1.35;
  color:var(--cn-navy-deep);margin:0 0 .55rem;font-weight:700;
}
.cn-mode-name{
  display:inline-block;font:700 .68rem/1 'Space Grotesk',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cn-gold-deep);margin-bottom:.7rem;
  padding-bottom:.35rem;border-bottom:1px solid var(--cn-gold);
}
.cn-mode p{font-size:.86rem;line-height:1.72;color:var(--gray6);margin:0;max-width:30ch}
.cn-mode-link{display:inline-block;margin-top:.9rem}
.cn-modes-note{
  margin-top:clamp(2rem,3.5vw,2.8rem);padding-left:1.35rem;border-left:2px solid var(--cn-gold);
  font-size:.9rem;line-height:1.75;color:var(--gray6);max-width:62ch;
}

/* =========================================================================
   5. INTÉGRAMÈTRE
   ========================================================================= */
.cn-ig{background:linear-gradient(150deg,#082c41,#0b4c68 58%,#255468);color:#fff;position:relative;overflow:hidden}
.cn-ig::after{
  content:"";position:absolute;right:-6%;top:-25%;width:44%;height:150%;pointer-events:none;
  background:linear-gradient(140deg,rgba(201,164,92,.13),rgba(201,164,92,0) 62%);
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);
}
.cn-ig-inner{position:relative;z-index:1}
.cn-ig .cn-kicker{color:var(--cn-gold)}
.cn-ig .cn-h2{color:#fff;max-width:24ch}
.cn-ig-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(2rem,4.5vw,4rem);align-items:start}
.cn-ig-top p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.8;max-width:52ch;margin:0 0 1.1rem}
.cn-ig-facts{display:flex;gap:2.25rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2)}
.cn-fact b{display:block;font-family:'Ibarra Real Nova',serif;font-size:2.15rem;line-height:1;color:var(--cn-gold)}
.cn-fact span{display:block;font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.66);margin-top:.35rem;max-width:16ch}

/* Parcours des 11 étapes : Pilotage transversal + 3 phases */
.cn-parcours{margin-top:clamp(2.5rem,4.5vw,3.5rem)}
.cn-pilotage{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  padding:.9rem 1.15rem;border:1px solid var(--cn-gold);background:rgba(201,164,92,.1);
}
.cn-pilotage b{font-family:'Ibarra Real Nova',serif;font-size:1.05rem;color:#fff;font-weight:700}
.cn-pilotage span{font-size:.82rem;color:rgba(255,255,255,.74);line-height:1.55}
.cn-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem);margin-top:1.4rem}
.cn-phase-label{
  font:700 .64rem/1 'Space Grotesk',sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cn-gold);margin-bottom:.85rem;padding-bottom:.55rem;border-bottom:1px solid rgba(201,164,92,.4);
}
.cn-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.cn-step{display:grid;grid-template-columns:1.9rem 1fr;gap:.7rem;align-items:baseline}
.cn-step i{
  font:700 .7rem/1.5 'Space Grotesk',sans-serif;font-style:normal;color:var(--cn-gold);
  border-bottom:1px solid rgba(201,164,92,.45);
}
.cn-step span{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.9)}
.cn-ig-flow{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;margin-top:1.75rem;
  padding-top:1.35rem;border-top:1px solid rgba(255,255,255,.2);
  font:700 .74rem/1.5 'Space Grotesk',sans-serif;color:rgba(255,255,255,.86);
}
.cn-ig-flow em{font-style:normal;color:var(--cn-gold)}

/* Demande de compte */
.cn-ig-access{
  margin-top:clamp(2.5rem,4.5vw,3.5rem);padding-top:clamp(2rem,3.5vw,2.8rem);
  border-top:1px solid rgba(255,255,255,.22);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.cn-ig-access h3{font-family:'Ibarra Real Nova',serif;font-size:1.3rem;line-height:1.3;color:#fff;margin:0 0 .8rem}
.cn-ig-access p{color:rgba(255,255,255,.78);font-size:.94rem;line-height:1.75;margin:0 0 1.2rem;max-width:44ch}
.cn-ig-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.cn-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cn-field{display:flex;flex-direction:column;gap:.4rem}
.cn-field--full{grid-column:1/-1}
.cn-field label{font:600 .74rem/1 'Space Grotesk',sans-serif;letter-spacing:.05em;color:rgba(255,255,255,.72)}
.cn-field input,.cn-field textarea,.cn-field select{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);color:#fff;
  font:400 .9rem/1.5 'Space Grotesk',sans-serif;padding:.7rem .85rem;border-radius:0;
  transition:border-color .2s ease,background .2s ease;
}
.cn-field input::placeholder,.cn-field textarea::placeholder{color:rgba(255,255,255,.42)}
.cn-field input:hover,.cn-field textarea:hover,.cn-field select:hover{border-color:rgba(255,255,255,.45)}
.cn-field textarea{min-height:92px;resize:vertical}
.cn-field select option{background:#0b3550;color:#fff}
/* fieldset remis à plat : aucune bordure ni légende par défaut du navigateur */
.cn-choice{grid-column:1/-1;border:0;margin:0;padding:0;min-inline-size:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem}
.cn-choice legend{
  float:left;width:100%;padding:0;margin:0 0 .55rem;
  font:600 .74rem/1 'Space Grotesk',sans-serif;letter-spacing:.05em;color:rgba(255,255,255,.72);
}
.cn-choice label{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:rgba(255,255,255,.88);cursor:pointer}
.cn-choice input{accent-color:var(--cn-gold);width:16px;height:16px}
.cn-ig-secondary{display:inline-block;margin-top:1.1rem;color:#fff}
.cn-ig-secondary::after{background:var(--cn-gold)}
.cn-ig-secondary:hover{color:var(--cn-gold)}
/* Les trois libellés de phase s'alignent même lorsque l'un passe sur deux lignes */
.cn-phase-label{min-height:2.4em;display:flex;align-items:flex-end}
.cn-form-submit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.3rem}
.cn-form-note{font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.55);max-width:38ch;margin:0}
.cn-form-thanks{
  display:none;padding:1.1rem 1.3rem;border:1px solid var(--cn-gold);background:rgba(201,164,92,.12);
  color:#fff;font-size:.92rem;line-height:1.7;margin-top:1rem;
}

/* =========================================================================
   6. DÉMARCHE ET LIVRABLES
   ========================================================================= */
.cn-demarche{background:#fff}
.cn-moves{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2.25rem);
  margin-top:clamp(1.8rem,3vw,2.5rem);border-top:1px solid var(--cn-line);
}
.cn-move{padding-top:1.4rem;position:relative}
.cn-move::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--cn-gold);transform-origin:left center}
.cn-move b{display:block;font:700 .68rem/1 'Space Grotesk',sans-serif;letter-spacing:.12em;color:var(--cn-gold-deep);margin-bottom:.6rem}
.cn-move h3{font-family:'Ibarra Real Nova',serif;font-size:1.08rem;line-height:1.3;color:var(--cn-navy-deep);margin:0 0 .5rem}
.cn-move p{font-size:.85rem;line-height:1.7;color:var(--gray6);margin:0;max-width:30ch}
.cn-livrables{margin-top:clamp(2.2rem,3.8vw,3rem);padding-top:1.6rem;border-top:1px solid var(--cn-line)}
.cn-livrables-label{display:block;font:700 .68rem/1 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gray6);margin-bottom:1rem}
.cn-livrables-list{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.cn-livrables-list li{font-size:.82rem;color:#3c4a51;padding:.42rem .8rem;border:1px solid var(--cn-line)}
.cn-livrables p{font-size:.85rem;line-height:1.7;color:var(--gray6);margin:0;max-width:60ch;font-style:italic}

/* =========================================================================
   7. CONVERSION
   ========================================================================= */
.cn-final{background:var(--cn-navy-deep);color:#fff;padding:clamp(3.5rem,6vw,5.5rem) 0}
.cn-final-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.cn-final .cn-kicker{color:var(--cn-gold)}
.cn-final h2{font-family:'Ibarra Real Nova',serif;font-weight:700;color:#fff;
  font-size:clamp(1.5rem,2.8vw,2.05rem);line-height:1.26;margin:0 0 1rem;max-width:20ch}
.cn-final p{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.8;margin:0 0 1.8rem;max-width:52ch}
.cn-final-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.cn-final-aside{border-top:1px solid rgba(255,255,255,.22);padding-top:1.4rem}
.cn-final-aside h3{font:700 .68rem/1 'Space Grotesk',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--cn-gold);margin:0 0 1rem}
.cn-final-aside ul{list-style:none;margin:0;padding:0}
.cn-final-aside li{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.8)}
.cn-final-aside a{color:var(--cn-gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(201,164,92,.5)}
.cn-final-aside a:hover{color:#fff}

/* =========================================================================
   SYSTÈME D'ANIMATION
   Rien n'est masqué tant que le JavaScript n'a pas confirmé sa présence
   (classe .cn-js posée sur <html>). Sans JS, la page reste complète.
   ========================================================================= */
.cn-js .cn-reveal{opacity:0;transform:translateY(18px)}
.cn-js .cn-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .72s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.cn-js .cn-mask{overflow:hidden}
.cn-js .cn-mask>img,.cn-js .cn-mask>span{display:block;transform:translateY(101%)}
.cn-js .cn-mask.is-in>img,.cn-js .cn-mask.is-in>span{
  transform:none;transition:transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.cn-js .cn-draw{transform:scaleX(0)}
.cn-js .cn-draw.is-in{transform:scaleX(1);transition:transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.cn-js .cn-map-spine::before{transform:translateX(-50%) scaleY(0)}
.cn-js .cn-map-body.is-in .cn-map-spine::before{transform:translateX(-50%) scaleY(1);transition:transform .9s cubic-bezier(.32,.72,.3,1) 300ms}

/* --- Cartographie : entrée orchestrée, jouée une seule fois -------------
   Ordre : surtitre, titre, déclaration (délais posés dans le HTML), puis
   la ligne dorée, les cinq niveaux, leurs étiquettes, et la légende.
   Chaque niveau se révèle par un volet vertical (clip-path) doublé d'un
   déplacement de 12 px : aucun rebond, aucun zoom, aucune boucle. */
.cn-js .cn-stratum{
  opacity:0;transform:translateY(12px);clip-path:inset(0 0 100% 0);
}
.cn-js .cn-strata.is-in .cn-stratum{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .64s cubic-bezier(.32,.72,.3,1) var(--lvl,0ms),
             transform .64s cubic-bezier(.32,.72,.3,1) var(--lvl,0ms),
             clip-path .68s cubic-bezier(.32,.72,.3,1) var(--lvl,0ms);
}
.cn-js .cn-strata .cn-stratum:nth-child(1){--lvl:460ms}
.cn-js .cn-strata .cn-stratum:nth-child(2){--lvl:600ms}
.cn-js .cn-strata .cn-stratum:nth-child(3){--lvl:740ms}
.cn-js .cn-strata .cn-stratum:nth-child(4){--lvl:880ms}
.cn-js .cn-strata .cn-stratum:nth-child(5){--lvl:1020ms}

/* Étiquettes : un seul groupe calme par niveau, juste après lui */
.cn-js .cn-fields{opacity:0;transform:translateY(6px)}
.cn-js .cn-strata.is-in .cn-fields{
  opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.32,.72,.3,1) calc(var(--lvl,0ms) + 190ms),
             transform .5s cubic-bezier(.32,.72,.3,1) calc(var(--lvl,0ms) + 190ms);
}

/* Légende : dernière du scénario. Pilotée par .cn-map-body et non par son
   propre observateur, sinon elle resterait dans l'angle mort du bas de
   fenêtre maintenant que toute la section tient dans un écran. */
.cn-js .cn-map-note{opacity:0;transform:translateY(8px)}
.cn-js .cn-map-body.is-in .cn-map-note{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.32,.72,.3,1) 1330ms,
             transform .55s cubic-bezier(.32,.72,.3,1) 1330ms;
}

/* Libellé vertical : discret, après le début du tracé de la ligne */
.cn-js .cn-map-spine span{opacity:0}
.cn-js .cn-map-body.is-in .cn-map-spine span{opacity:1;transition:opacity .6s ease 620ms}

/* Modes : le rail se dessine, puis les repères apparaissent */
.cn-js .cn-rail-line{transform:scaleX(0)}
.cn-js .cn-rail.is-in .cn-rail-line{transform:scaleX(1);transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.cn-js .cn-mode{opacity:0;transform:translateY(14px)}
.cn-js .cn-rail.is-in .cn-mode{opacity:1;transform:none;
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
.cn-js .cn-rail.is-in .cn-mode:nth-child(2){transition-delay:280ms}
.cn-js .cn-rail.is-in .cn-mode:nth-child(3){transition-delay:400ms}
.cn-js .cn-rail.is-in .cn-mode:nth-child(4){transition-delay:520ms}
.cn-js .cn-rail.is-in .cn-mode:nth-child(5){transition-delay:640ms}

/* Étapes de l'Intégramètre : progression une étape après l'autre */
.cn-js .cn-step{opacity:0;transform:translateX(-10px)}
.cn-js .cn-parcours.is-in .cn-step{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.cn-js .cn-parcours.is-in .cn-step{transition-delay:calc(var(--i,0) * 70ms + 240ms)}
.cn-js .cn-pilotage{opacity:0;transform:translateY(12px)}
.cn-js .cn-parcours.is-in .cn-pilotage{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}

/* Démarche : les filets se dessinent */
.cn-js .cn-move::before{transform:scaleX(0)}
.cn-js .cn-moves.is-in .cn-move::before{transform:scaleX(1);transition:transform .6s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 110ms)}

/* Premier écran : entrée courte, une seule fois */
.cn-js .cn-rise{opacity:0;transform:translateY(14px)}
.cn-js .cn-rise.is-in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.cn-js .cn-rise[data-rise="1"].is-in{transition-delay:60ms}
.cn-js .cn-rise[data-rise="2"].is-in{transition-delay:170ms}
.cn-js .cn-rise[data-rise="3"].is-in{transition-delay:300ms}
.cn-js .cn-rise[data-rise="4"].is-in{transition-delay:430ms}

/* =========================================================================
   MOUVEMENT RÉDUIT — tout est affiché immédiatement
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .cn-js .cn-reveal,.cn-js .cn-rise,.cn-js .cn-stratum,
  .cn-js .cn-fields,.cn-js .cn-map-spine span,.cn-js .cn-map-note,
  .cn-js .cn-mode,.cn-js .cn-step,.cn-js .cn-pilotage{opacity:1;transform:none;transition:none}
  .cn-js .cn-stratum,.cn-js .cn-strata.is-in .cn-stratum{clip-path:none;transition:none}
  .cn-js .cn-mask>img,.cn-js .cn-mask>span,.cn-js .cn-draw,
  .cn-js .cn-rail-line,.cn-js .cn-move::before{transform:none;transition:none}
  .cn-js .cn-map-spine::before,
  .cn-js .cn-map-body.is-in .cn-map-spine::before{transform:translateX(-50%);transition:none}
  .cn-btn:hover,.cn-entry:hover{transform:none}
  .cn-link::after{transition:none}
}

/* =========================================================================
   ADAPTATION MOBILE

   Cette feuille ne comportait aucun point de rupture : ses onze grilles
   restaient figées à toute largeur. Sous 760 px, le texte se retrouvait
   dans des colonnes de 92 à 155 px — onze à dix-neuf caractères par
   ligne — et jusqu'à 16 px pour un libellé de repère.

   Rien ne débordait pour autant : les grilles compriment au lieu de
   dépasser, ce qu'un contrôle de débordement horizontal ne détecte pas.

   Deux grilles ne sont volontairement PAS touchées : `.cn-step` et la
   première colonne de `.cn-stratum` / `.cn-entry` sont des gouttières de
   numérotation de 1,9 à 3,5 rem. Les réduire à une colonne ferait perdre
   l'alignement du numéro avec son texte.
   ========================================================================= */
/* Tablettes (761 à 1000 px) : la page garde ses deux volets, mais les
   imbrications de grilles sont défaites. À 768 px, `.cn-entry` conservait
   ses trois colonnes et `.cn-entry-cols` en ajoutait deux à l'intérieur :
   quatre colonnes de texte à 153 px, soit dix-neuf caractères par ligne.
   Les rails de quatre cartes tombaient à 146 px chacun. */
@media(min-width:761px) and (max-width:1000px){
  .cn-entry{grid-template-columns:3.5rem minmax(0,1fr)}
  /* `.cn-entry` porte quatre enfants pour deux colonnes : sans placement
     explicite, le troisième repart à la ligne dans la gouttière de
     3,5 rem et son texte se retrouve sur 56 px. Tout ce qui n'est pas le
     numéro occupe donc la seconde colonne. */
  .cn-entry > :not(.cn-entry-num){grid-column:2}
  .cn-entry-cols{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .cn-rail,
  .cn-moves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-phases{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:760px){

  /* Sections à deux volets : le second passe sous le premier. */
  .cn-open-grid,
  .cn-ig-top,
  .cn-ig-access,
  .cn-final-grid,
  .cn-entry-cols{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(1.4rem,4vw,2rem);
  }

  /* Rails de quatre cartes : deux par rangée restent lisibles à 375 px,
     une seule colonne les étirerait sur toute la hauteur de l'écran. */
  .cn-rail,
  .cn-moves{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem;
  }

  /* Trois phases : empilées, chacune garde sa mesure. */
  .cn-phases{grid-template-columns:minmax(0,1fr);gap:1rem}

  /* Ces listes portent une gouttière de numérotation de 2,1 à 3,5 rem.
     Sur un écran de 375 px, cette gouttière et son espacement coûtent
     près de 50 px de mesure — 15 % de la largeur utile — et laissent le
     texte dans une colonne de 165 px. Le numéro passe donc au-dessus,
     en repère, et le texte reprend toute la largeur.
     `.cn-entry` porte quatre enfants et `.cn-stratum` trois : la colonne
     unique évite d'avoir à les replacer un par un. */
  .cn-stratum,
  .cn-entry{
    grid-template-columns:minmax(0,1fr);
    gap:.5rem;
  }
  .cn-stratum-num,
  .cn-entry-num{margin-bottom:-.15rem}
  /* `.cn-entry-links` est calé sur `grid-column:2/-1` dans la feuille de
     base. Laissé tel quel, il recrée à lui seul une deuxième colonne
     implicite et la déclaration à une colonne ci-dessus reste sans
     effet — le texte retombait alors dans une gouttière de 19 px. */
  .cn-entry-links{grid-column:auto}

  /* Formulaire : un champ par ligne. */
  .cn-form-grid{grid-template-columns:minmax(0,1fr)}
}

/* Sous 420 px, même les rails à deux colonnes deviennent trop étroits. */
@media(max-width:420px){
  .cn-rail,
  .cn-moves{grid-template-columns:minmax(0,1fr)}

  /* La colonne dorée et son libellé vertical réservent 40 px sur la
     gauche. Sur un écran de 320 px, ces 40 px s'ajoutent aux 48 px de
     marge de page et aux 35 px de la liste : il ne reste que 197 px de
     mesure. Le libellé repasse donc à l'horizontale, au-dessus de la
     liste, et rend sa gouttière. Il n'est pas masqué : il porte une
     phrase, pas une décoration. */
  .cn-map-body{padding-left:0}
  .cn-map-spine{
    position:static;width:auto;
    justify-content:flex-start;
    margin-bottom:.8rem;
  }
  .cn-map-spine::before{
    /* Le trait vertical devient un filet horizontal sous le libellé. */
    top:auto;bottom:-.4rem;left:0;
    width:2.5rem;height:2px;transform:none;
  }
  .cn-map-spine span{
    writing-mode:horizontal-tb;transform:none;
    padding:0;background:none;
  }
  .cn-stratum{padding-inline:0}
}