@charset "utf-8";
/* ilyra — feuille unique, écrite à partir du mobile.
   Ordre : polices, variables, base, composants, sections, ruptures,
   mouvement réduit, impression, puis l'évolution CODIR (section 13).
   Références : reference/page-accueil-codir-reference.html (accueil)
   et reference/page-accueil-reference.html (page archivée de l'inventaire) */

/* ============================================================
   1. Polices auto-hébergées — aucun appel à un domaine tiers
   ============================================================ */

@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/marcellus-400-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:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/marcellus-400-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/libre-franklin-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:"Libre Franklin";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/libre-franklin-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   2. Variables de charte
   ============================================================ */

:root{
  /* Couleurs */
  --vert:#1E3A2F;
  --corail:#FF6F59;
  --beige:#EFECE6;
  --fond:#F8F6F1;
  --blanc:#FFFFFF;
  --sourd:#5A665E;
  --texte-2:#3F5048;
  --trait:#D8D5CC;
  --trait-fort:#C9C4B8;
  --vert-2:#2E5446;
  --trait-pointille:#8A948D;
  --vert-survol:#2A4A3D;

  /* Typographie */
  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",Arial,Helvetica,sans-serif;

  /* Mise en page */
  --largeur:1120px;
  --marge:36px;
  --espace-section:72px;
  --angle:26px;
  --angle-petit:8px;
}

/* ============================================================
   3. Base
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fond);
  color:var(--vert);
  font:400 16.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img{max-width:100%}
a{color:var(--vert)}
a:hover{color:var(--vert)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--corail);outline-offset:4px}

.wrap{width:calc(100% - var(--marge));margin-inline:auto}
.vert{background:var(--vert);color:var(--beige)}
.vert a{color:var(--beige)}
.serif{font-family:var(--serif);font-weight:400}

.skip{position:absolute;left:12px;top:-60px;z-index:9;background:var(--vert);color:var(--fond);padding:10px 16px;text-decoration:none}
.skip:focus{top:10px}

/* ============================================================
   4. Composants communs
   ============================================================ */

/* La pierre : repère octogonal corail, creux pour « un indice à vérifier » */
.pierre-m,.pierre-v{
  display:inline-block;width:9px;height:9px;flex:none;background:var(--corail);
  clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}
.pierre-v{position:relative}
.pierre-v::after{
  content:"";position:absolute;inset:2px;background:var(--blanc);
  clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}

/* Étiquettes : les seules capitales de la page */
.etq{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sourd);
}
.vert .etq{color:var(--beige)}

/* Cibles d'au moins 46px de haut (bouton) et 44px de zone (lien) */
.btn{
  display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:11px 20px;
  font:600 14px/1.25 var(--sans);text-decoration:none;
  border:1px solid var(--vert);background:var(--vert);color:var(--fond);
}
.btn:hover{background:var(--vert-survol);color:var(--fond)}
.vert .btn{background:var(--beige);color:var(--vert);border-color:var(--beige)}
.vert .btn:hover{background:var(--fond);color:var(--vert)}

.lien{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;font-size:14px;text-decoration:underline;
  text-decoration-color:var(--corail);text-decoration-thickness:2px;text-underline-offset:6px;
}

/* ============================================================
   5. Bandeau de statut
   ============================================================ */

.avert{
  background:var(--beige);border-left:3px solid var(--corail);
  padding:9px 14px;font-size:12px;line-height:1.45;color:var(--sourd);text-align:center;
}

/* ============================================================
   6. Aplat 1 — en-tête et ouverture
   ============================================================ */

.tete{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px 32px;flex-wrap:wrap;padding:18px 0;
  border-bottom:1px solid rgba(239,236,230,.22);
}
.marque{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;text-decoration:none}
.marque picture{display:block}
.marque img{display:block;height:46px;width:auto}
.marque .marque-fixe{display:none}
.desc{
  flex-basis:100%;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--beige);opacity:.82;
}

.ouv{display:grid;gap:44px;padding:44px 0 64px}
.h1{
  font:400 clamp(44px,5.6vw,76px)/1.04 var(--serif);
  letter-spacing:-.02em;margin:22px 0 26px;
}
.h1 span{display:block}
.h1 .q{color:var(--corail)}
.lede{font-size:clamp(17px,1.45vw,19px);line-height:1.58;max-width:48ch}
.actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:32px}

/* La fiche : angle haut droit coupé, profondeur par une seconde feuille */
.fiche-pile{position:relative;padding:0 18px 18px 0}
.fiche-pile::before{
  content:"";position:absolute;inset:18px 0 0 18px;background:var(--vert-2);
  clip-path:polygon(0 0,calc(100% - var(--angle)) 0,100% var(--angle),100% 100%,0 100%);
}
.fiche{
  position:relative;background:var(--fond);color:var(--vert);padding:24px 20px 20px;
  clip-path:polygon(0 0,calc(100% - var(--angle)) 0,100% var(--angle),100% 100%,0 100%);
}
.fiche-h{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--trait);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sourd);
}
.fiche-t{font:400 clamp(24px,2.4vw,32px)/1.16 var(--serif);margin:20px 0 16px;max-width:18ch}
.fiche dl>div{display:grid;gap:2px;padding:11px 0;border-top:1px solid var(--trait);font-size:14px;line-height:1.45}
.fiche dt{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-top:2px;color:var(--sourd)}
.fiche dd{display:flex;gap:8px;align-items:baseline}
.legende{margin-top:14px;font-size:12.5px;color:var(--beige);opacity:.82}

/* ============================================================
   7. Sections courantes
   ============================================================ */

.sec{padding:var(--espace-section) 0 0}
.sec-t{display:grid;gap:24px;align-items:end;margin-bottom:44px}
.h2{font:400 clamp(32px,4vw,50px)/1.1 var(--serif);letter-spacing:-.015em;margin-top:16px;max-width:20ch}
.sec-t p.intro{color:var(--texte-2);max-width:46ch;padding-bottom:6px}
.sec>.intro{color:var(--texte-2);max-width:56ch;margin-top:24px}

/* Bloc 2 — les situations */
.sit{border-top:1px solid var(--trait)}
.sit li{display:grid;gap:6px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--trait)}
.sit h3{font:600 17px/1.4 var(--sans);letter-spacing:-.004em}
.sit p{font:400 clamp(20px,1.9vw,24px)/1.3 var(--serif)}

.meme{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:30px}
.meme p.q{font:400 clamp(22px,2.2vw,28px)/1.25 var(--serif)}

/* Bloc 3 — l'inventaire */
.meth{display:grid;gap:40px;align-items:start}
.etapes li{padding:18px 0 20px;border-top:1px solid var(--trait)}
.etapes li:last-child{border-bottom:1px solid var(--trait)}
.etapes h3{font:400 24px/1.2 var(--serif);margin-bottom:6px}
.etapes p{font-size:15px;color:var(--texte-2);max-width:40ch}

.registre{border:1px solid var(--trait);background:var(--blanc)}
.registre-h{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--vert);color:var(--beige);padding:14px 22px;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.constat{padding:22px 22px 20px;border-top:1px solid var(--trait)}
.constat:first-of-type{border-top:0}
.statut{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sourd)}
.constat h3{font:400 clamp(20px,1.9vw,24px)/1.2 var(--serif);margin:8px 0 12px}
.constat dl{display:grid;gap:2px;font-size:14px;line-height:1.5}
.constat dt{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-top:2px;color:var(--sourd)}

.deux{display:grid;gap:28px;margin-top:52px}
.deux>div{border-left:2px solid var(--corail);padding:2px 0 2px 22px}
.deux h3{font:400 24px/1.2 var(--serif);margin-bottom:6px}

/* Le cartouche du capital numérique, en clôture du bloc de l'inventaire */
.capital{
  margin-top:56px;background:var(--beige);border:1px solid var(--trait);border-radius:2px;
  padding:26px 28px;display:grid;gap:20px;align-items:center;
}
.capital .etq{margin-bottom:10px}
.capital p.def{max-width:52ch}
.familles{display:flex;flex-wrap:wrap;gap:8px}
.familles span{
  font-size:12.5px;font-weight:500;padding:7px 12px 7px 11px;
  background:var(--fond);border:1px solid var(--trait-fort);
  clip-path:polygon(0 0,calc(100% - var(--angle-petit)) 0,100% var(--angle-petit),100% 100%,0 100%);
}

/* Bloc 4 — les deux chemins */
.chemins{display:grid;gap:20px}
.chemin{border:1px solid var(--trait-fort);padding:26px 26px 22px;display:flex;flex-direction:column;gap:10px}
.chemin.bon{border:1.5px solid var(--vert);background:var(--blanc)}
.chemin h3{font:400 clamp(22px,2.2vw,28px)/1.2 var(--serif)}
.chemin p{font-size:15px;color:var(--texte-2)}
.chemin .issue{margin-top:auto;padding-top:14px;border-top:1px solid var(--trait);font-size:14px;font-weight:600;color:var(--vert)}
.question{margin-top:40px;border-left:2px solid var(--corail);padding:4px 0 4px 20px;font:400 clamp(26px,3vw,36px)/1.2 var(--serif)}

/* Bloc 5 — la trajectoire */
.frise{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.frise li{border:1.5px dashed var(--trait-pointille);padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.frise li:first-child{border:1.5px solid var(--vert);background:var(--blanc)}
.frise span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sourd)}
.frise strong{font-size:18px;font-weight:600}
.reserve{margin-top:16px;font-size:13.5px;color:var(--sourd);max-width:62ch}

/* Aplat 2 — la thèse */
.these{margin-top:72px;display:grid;gap:20px;align-items:start;padding:30px 24px}
.these img{width:40px;height:auto;display:block}
.these p.t{font:500 clamp(24px,2.5vw,30px)/1.3 var(--sans);letter-spacing:-.008em}
.these p.t span{display:block}
.these p.t .c{color:var(--corail)}

/* Bloc 6 — premier échange */
.contact{display:grid;gap:28px;align-items:end;padding:var(--espace-section) 0 0}
.contact p.intro{color:var(--texte-2);max-width:46ch;margin:18px 0 26px}
.canal{font-size:13px;color:var(--sourd);margin-top:12px}

/* ============================================================
   8. Clôture et pied
   ============================================================ */

.cloture{
  font:400 clamp(28px,3.6vw,40px)/1.2 var(--serif);
  margin:88px 0 0;padding-top:40px;border-top:1px solid var(--trait);max-width:20ch;
}
.promesse{margin-top:16px;font-size:15px;color:var(--texte-2)}
.pied{margin-top:40px;padding:16px 0 56px;border-top:1px solid var(--trait);font-size:12.5px;color:var(--sourd);max-width:70ch}
.pied p{margin-bottom:10px}
.liens-pied{display:flex;flex-wrap:wrap;gap:4px 24px}
.liens-pied a{display:inline-flex;align-items:center;min-height:44px;font-size:12.5px;color:var(--sourd);text-decoration:underline;text-decoration-color:var(--corail);text-underline-offset:4px}

/* ============================================================
   9. Rupture à 640px — la page quitte le mobile
   ============================================================ */

@media (min-width:640px){
  :root{--marge:88px}
  .wrap{width:min(var(--largeur),calc(100% - var(--marge)))}

  .marque img{height:58px}
  .desc{flex-basis:auto}

  .fiche{padding:30px 32px 26px}
  .fiche dl>div{grid-template-columns:86px 1fr;gap:12px}
  .constat dl{grid-template-columns:76px 1fr;gap:6px 14px}

  .sit li{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:6px 32px}
  .deux{grid-template-columns:1fr 1fr;gap:28px 48px}
  .chemins{grid-template-columns:1fr 1fr}
  .frise{grid-template-columns:repeat(4,minmax(0,1fr))}
  .these{grid-template-columns:56px 1fr;gap:34px;padding:46px 52px}
  .these img{width:56px}
}

/* ============================================================
   10. Rupture à 900px — passage en deux colonnes
   ============================================================ */

@media (min-width:900px){
  :root{--espace-section:104px}

  .ouv{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:72px;align-items:center;padding:72px 0 88px}
  .sec-t{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px}
  .meth{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 72px}
  .capital{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 40px}
  .contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 64px}
}

/* ============================================================
   11. Mouvement réduit
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   12. Impression — fond blanc, aplats en cadre fin, bandeau masqué
   ============================================================ */

@media print{
  .avert,.skip,.liens-pied{display:none !important}
  body{background:var(--blanc) !important;color:#000 !important;font-size:11pt}
  .vert,.vert .etq,.vert a{background:var(--blanc) !important;color:#000 !important}
  .these,section.vert>.wrap{border:1px solid var(--trait) !important;padding:16pt !important}
  .these{margin-top:24pt}
  .legende,.desc{color:#333 !important;opacity:1 !important}
  .marque-anim{display:none !important}
  .marque-fixe{display:block !important;height:46px;width:auto}
  .fiche-pile::before{display:none !important}
  .fiche,.registre,.chemin,.frise li,.capital{background:var(--blanc) !important}
  .btn{border:1px solid #000 !important;background:var(--blanc) !important;color:#000 !important}
  .sec,.contact{padding-top:24pt !important}
  .cloture{margin-top:24pt !important}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt;color:#333}
  .sit li,.constat,.chemin,.these{break-inside:avoid}
}

/* ============================================================
   13. Évolution CODIR — « Direction du capital numérique »
   Référence : reference/page-accueil-codir-reference.html.
   La nouvelle page d'accueil porte la classe accueil-codir sur
   body ; l'ancienne page, archivée sous site/inventaire/, garde
   son rendu : tout écart d'échelle est borné à cette classe.
   ============================================================ */

/* Texte masqué à l'écran, servi aux lecteurs d'écran */
.visu-cachee{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Bloc logo : le descripteur sous le mot, précédé d'un trait corail.
   Montage provisoire — un fichier d'animation incluant le descripteur
   le remplacera. Le fondu attend la fin de l'animation du logotype. */
.marque-dir{flex-direction:column;align-items:flex-start;gap:0}
.verrou-desc{display:flex;flex-direction:column;gap:7px;margin:0 0 4px 34px;animation:desc-in .8s ease-out 1.8s both}
.verrou-desc i{display:block;width:30px;height:2px;background:var(--corail)}
.verrou-desc span{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--beige)}
@keyframes desc-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Échelle propre à la page CODIR */
.accueil-codir{--espace-section:76px}
.accueil-codir .h1{font-size:clamp(46px,6vw,82px);line-height:1.03;margin-bottom:28px}
.accueil-codir .lede{max-width:46ch}
.accueil-codir .sec-t{margin-bottom:48px}
.accueil-codir .h2{font-size:clamp(32px,4vw,52px)}
.h2.longue{max-width:22ch}
.accueil-codir p.intro{max-width:48ch}
.accueil-codir .fiche-t{font-size:clamp(26px,2.6vw,34px);line-height:1.12;margin:18px 0 10px;max-width:none}
.accueil-codir .question{font-size:clamp(24px,2.8vw,34px);max-width:30ch}
.accueil-codir .these{margin-top:76px}
.accueil-codir .cloture{margin-top:96px}
.accueil-codir .chemin{padding:28px 28px 24px}

/* La fiche d'ouverture : une définition, puis les cinq éléments du stock */
.fiche-d{font-size:14.5px;line-height:1.5;color:var(--texte-2);margin-bottom:16px}
.fiche li{display:flex;gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--trait);font-size:14.5px;line-height:1.4}

/* Le schéma de la bascule : pile dans l'ordre de lecture,
   grille à cinq colonnes au bureau */
.ep{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sourd);padding-bottom:12px}
.ep.auj{margin-top:18px;border-top:1.5px dashed var(--trait-pointille);padding:12px 0}
.noeud{border:1.5px solid var(--vert);padding:22px 20px;display:flex;flex-direction:column;gap:8px;background:var(--fond)}
.noeud h3{font:400 clamp(21px,2vw,26px)/1.15 var(--serif)}
.noeud p{font-size:14px;line-height:1.5;color:var(--texte-2)}
.noeud.coeur{background:var(--blanc);border-width:2px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.fleche{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:11.5px;line-height:1.3;color:var(--sourd)}
.fleche i{display:block;width:1.5px;height:28px;flex:none;background:var(--vert);position:relative}
.fleche i::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);border-left:4.75px solid transparent;border-right:4.75px solid transparent;border-top:8px solid var(--vert)}
.issues{display:grid;gap:10px;margin-top:14px}
.issues .issue{font-size:13.5px;line-height:1.4;padding:10px 12px}
.issues .issue.std{border:1.5px dashed var(--corail)}
.issues .issue.sing{border:1.5px solid var(--vert);background:var(--blanc)}
.issues .issue strong{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sourd);margin-bottom:2px}
.codir{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.codir p.q{font:400 clamp(20px,2vw,24px)/1.3 var(--serif)}

/* L'enjeu : le cartouche d'exemple et le constat à filet corail */
.exemple{margin-top:8px;display:grid;gap:24px;background:var(--beige);border:1px solid var(--trait);border-radius:2px;padding:26px 22px}
.exemple h3{font:400 clamp(24px,2.4vw,32px)/1.15 var(--serif);margin-top:12px}
.exemple p{max-width:52ch}
.constat-fort{margin-top:40px;border-left:2px solid var(--corail);padding:4px 0 4px 20px;font:400 clamp(22px,2.4vw,30px)/1.25 var(--serif);max-width:34ch}

/* La comparaison : un vrai tableau. En colonne étroite, chaque ligne
   devient une grille, le critère au-dessus des deux valeurs. */
.compare{width:100%;border-collapse:collapse;border-top:1.5px solid var(--vert);display:block}
.compare thead,.compare tbody{display:block}
.compare tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--trait)}
.compare thead tr{padding:14px 0}
.compare thead td{display:none}
.compare th,.compare td{padding:0;text-align:left;font-weight:400}
.compare th[scope="col"]{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sourd)}
.compare th.cn{color:var(--vert)}
.compare th .pierre-m{margin-right:8px}
.compare th[scope="row"]{grid-column:1 / -1;font-size:14px;font-weight:600}
.compare td.h{color:var(--texte-2)}
.compare td.n{font:400 clamp(19px,1.8vw,22px)/1.3 var(--serif)}
.chute{margin-top:30px;max-width:60ch}

/* Le chemin retenu porte sa conclusion */
.chemin .issue-c{margin-top:auto;padding-top:14px;border-top:1px solid var(--trait);font-size:14px;font-weight:600;color:var(--vert)}

/* Ce que vous recevez */
.recoit{display:grid;gap:20px}
.recoit li{border-top:1.5px solid var(--vert);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.recoit li.agents{border-top-color:var(--corail)}
.recoit h3{font:400 clamp(21px,2vw,26px)/1.2 var(--serif)}
.recoit p{font-size:15px;color:var(--texte-2)}
.recoit .borne{font-size:13.5px;color:var(--vert);font-weight:500}

/* Les quatre verbes de la direction du capital numérique */
.verbes{display:grid;gap:20px}
.verbes li{padding:22px 20px 24px;border:1px solid var(--trait-fort);display:flex;flex-direction:column;gap:8px}
.verbes li:first-child{border:1.5px solid var(--vert);background:var(--blanc)}
.verbes h3{font:400 24px/1.2 var(--serif)}
.verbes p{font-size:14.5px;color:var(--texte-2)}
.nefait{margin-top:28px;display:flex;gap:12px;align-items:baseline;max-width:70ch;font-size:15px}

/* Signature sous la clôture */
.sig{margin-top:12px;font-size:14.5px;color:var(--texte-2)}

/* Rupture à 640px */
@media (min-width:640px){
  .marque-dir img{height:68px}
  .marque-dir .verrou-desc{margin-left:50px}
  .accueil-codir .fiche{padding:28px 30px 24px}
  .recoit,.verbes{grid-template-columns:repeat(2,minmax(0,1fr))}

  .compare{display:table}
  .compare caption{display:table-caption}
  .compare thead{display:table-header-group}
  .compare tbody{display:table-row-group}
  .compare tr,.compare thead tr{display:table-row;padding:0}
  .compare thead td{display:table-cell}
  .compare th,.compare td{display:table-cell;vertical-align:baseline;border-bottom:1px solid var(--trait);padding:18px 32px 18px 0}
  .compare thead th,.compare thead td{padding:14px 32px 14px 0}
  .compare th:last-child,.compare td:last-child{padding-right:0}
  .compare th[scope="row"]{width:26%}
}

/* Rupture à 900px */
@media (min-width:900px){
  .accueil-codir{--espace-section:112px}
  .accueil-codir .ouv{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);padding:76px 0 92px}
  .accueil-codir .these{margin-top:112px}
  .recoit{grid-template-columns:repeat(3,minmax(0,1fr))}
  .verbes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .exemple{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 56px;padding:34px 36px}

  .bascule{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1.15fr) 92px minmax(0,1fr);align-items:stretch}
  .ep{grid-row:1}
  .ep.hier{grid-column:1}
  .ep.auj{grid-column:3 / -1;margin:0 0 0 -46px;border-top:0;border-left:1.5px dashed var(--trait-pointille);padding:0 0 12px 16px}
  .noeud{grid-row:2}
  .noeud.rh{grid-column:1}
  .noeud.coeur{grid-column:3}
  .noeud.ra{grid-column:5}
  .fleche{grid-row:2;flex-direction:column;justify-content:center;gap:6px;padding:0 6px;text-align:center}
  .fleche.f1{grid-column:2}
  .fleche.f2{grid-column:4}
  .fleche i{width:100%;height:1.5px}
  .fleche i::after{left:auto;right:-1px;top:-4px;bottom:auto;transform:none;border-left:8px solid var(--vert);border-top:4.75px solid transparent;border-bottom:4.75px solid transparent;border-right:0}
  .issues{grid-column:5;grid-row:3}
  .codir{grid-column:1 / -1;grid-row:4}
}

/* Mouvement réduit : le descripteur apparaît immédiatement */
@media (prefers-reduced-motion:reduce){
  .verrou-desc{animation:none}
}

/* Impression */
@media print{
  .verrou-desc{animation:none !important}
  .verrou-desc i{background:#333 !important}
  .verrou-desc span{color:#333 !important}
  .noeud,.noeud.coeur,.issues .issue.sing,.verbes li,.exemple{background:var(--blanc) !important}
  .noeud,.verbes li,.recoit li,.exemple,.issues,.compare tr{break-inside:avoid}
}

/* ============================================================
   14. Consentement — bandeau Google Analytics et lien de gestion
   Les deux boutons ont le même poids : refuser doit être aussi
   simple qu'accepter.
   ============================================================ */

.consent{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:20;
  display:grid;gap:14px;padding:18px 20px;
  background:var(--vert);color:var(--beige);border-left:3px solid var(--corail);
}
.consent p{font-size:14px;line-height:1.5;max-width:60ch}
.consent a{color:var(--beige);text-decoration-color:var(--corail);text-underline-offset:3px}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
.consent .btn{background:var(--beige);color:var(--vert);border-color:var(--beige);cursor:pointer}
.consent .btn:hover{background:var(--fond);color:var(--vert)}

.lien-consent{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;
  font:inherit;font-size:12.5px;color:var(--sourd);
  text-decoration:underline;text-decoration-color:var(--corail);text-underline-offset:4px;
}
.lien-consent[hidden]{display:none}
.lien-consent:focus-visible{outline:2px solid var(--corail);outline-offset:4px}

@media (min-width:640px){
  .consent{left:auto;right:24px;bottom:24px;max-width:520px}
}

@media print{
  .consent,.lien-consent{display:none !important}
}

/* ============================================================
   15. Pages légales et formulaire de contact
   ============================================================ */

.legal{max-width:72ch}
.legal h2{font:400 clamp(21px,2.2vw,25px)/1.3 var(--serif);margin:44px 0 12px}
.legal p{margin-bottom:14px;color:var(--texte-2)}
.legal dl{display:grid;grid-template-columns:minmax(0,1fr);margin:6px 0 18px;border-top:1px solid var(--trait)}
.legal dt{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sourd);padding-top:12px}
.legal dd{margin:0;padding:2px 0 12px;border-bottom:1px solid var(--trait)}
.maj{font-size:12.5px;color:var(--sourd);margin-top:32px}

.formulaire{display:grid;gap:20px;max-width:640px;margin-top:36px}
.champ{display:grid;gap:6px}
.champ label{font-size:13px;font-weight:600}
.champ label span{font-weight:400;color:var(--sourd);margin-left:6px}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:46px;padding:11px 12px;
  font:inherit;font-size:16px;color:var(--vert);
  background:var(--blanc);border:1px solid var(--trait-fort);border-radius:0;
}
.champ textarea{min-height:170px;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--corail);outline-offset:2px;border-color:var(--vert)}
.note-donnees{font-size:12.5px;line-height:1.55;color:var(--sourd);max-width:64ch}
.note-donnees a{color:var(--sourd);text-decoration-color:var(--corail);text-underline-offset:3px}
.formulaire .btn{justify-self:start;cursor:pointer}
.robot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

@media (min-width:640px){
  .legal dl{grid-template-columns:220px minmax(0,1fr)}
  .legal dt{padding:12px 0;border-bottom:1px solid var(--trait)}
  .legal dd{padding:12px 0}
}

@media print{
  .formulaire,.robot{display:none !important}
}