/* ============================================================
 * DCIP — page « La Direction » (/direction)
 * ------------------------------------------------------------
 * Feuille propre à la page, chargée après la feuille en ligne du
 * générateur (outils/generer-direction.js). Elle porte :
 *   1. l'ouverture, bâtie sur le « mot du Directeur général » du
 *      FSN (dgfsn.net) — même géométrie, mêmes ombres, mêmes rayons,
 *      mêmes animations ; seul le vert devient le bleu DCIP ;
 *   2. les cinq missions sur le fond « bleu de nuit » de la bande
 *      GEM de l'accueil (dégradé, trame fine, balayage lumineux) ;
 *   3. les apparitions au défilement (public/js/direction-page.js) ;
 *   4. l'état actif du menu « La Direction ».
 * La section #organisation n'est pas traitée ici.
 * ============================================================ */

/* ---------- Jetons (FSN clair / sombre → palette DCIP) ---------- */
:root{
  --dpm-acc:#1E4FB8;               /* FSN --acc #15803d → bleu principal */
  --dpm-txt:#0A1A33;
  --dpm-txt2:#4A4F6A;
  --dpm-txt3:#646989;
  --dpm-bg:#F6F8FC;                /* FSN --bg #f6f9f7 */
  --dpm-voile:rgba(10,37,87,.04);
  --dpm-bord-s:rgba(10,37,87,.08);
  --dpm-ft:"Quicksand","Montserrat",system-ui,sans-serif;
  --dpm-ff:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dpm-ease:cubic-bezier(.22,1,.36,1);
  --dpm-rebond:cubic-bezier(.34,1.56,.64,1);
  --dpm-holo:#6FD3FF;
}
:root[data-theme="dark"]{
  --dpm-acc:#9DB7F2;               /* FSN --acc sombre → bleu clair de l'accueil */
  --dpm-txt:#F2F4F9;
  --dpm-txt2:#A8AEC6;
  --dpm-txt3:#8A8FA8;
  --dpm-bg:transparent;
  --dpm-voile:rgba(255,255,255,.05);
  --dpm-bord-s:rgba(255,255,255,.06);
}

/* ============================================================
   1. OUVERTURE — « le mot » de la Direction
   ============================================================ */
.dp-mot{padding:60px 0;background:var(--dpm-bg);color:var(--dpm-txt);
  font-family:var(--dpm-ff);font-size:14px;line-height:1.6;overflow-x:clip}
.dp-mot p{margin:0}
/* Gouttière du FSN (--gout : 28 px au téléphone, 5vw ensuite) ; le bloc reste à 1080 px. */
.dp-mot>.dp-wrap{max-width:none;padding-left:clamp(28px,5vw,110px);padding-right:clamp(28px,5vw,110px)}

/* En-tête centré : sur-titre, titre, trait, phrase (FSN .sec-tete) */
.dp-mot-tete{display:block;text-align:center;max-width:780px;margin:0 auto 34px}
.dp-mot-sur{display:inline-flex;align-items:center;gap:8px;font-family:var(--dpm-ff);font-size:10.5px;
  font-weight:700;letter-spacing:1.68px;text-transform:uppercase;line-height:1.6;
  color:color-mix(in srgb,var(--dpm-txt) 60%,transparent);margin-bottom:8px}
.dp-mot-sur svg{color:var(--dpm-acc);flex:none}
/* Titre ramené à la taille des h2 du FSN : deux lignes sur ordinateur. */
.dp-mot .dp-mot-h{font-family:var(--dpm-ft);font-size:clamp(28px,4vw,46px);font-weight:700;
  line-height:1.08;letter-spacing:-.03em;margin:0 auto;max-width:none;color:var(--dpm-txt)}
.dp-mot .dp-mot-h em{font-style:italic;color:var(--dpm-acc)}
.dp-mot-souligne{display:block;width:78px;height:4px;border-radius:99px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--dpm-acc),transparent)}
.dp-mot .dp-mot-p{font-size:13.5px;color:var(--dpm-txt2);margin:16px auto 0;max-width:620px}
.dp-mot-p strong{color:var(--dpm-txt);font-weight:700}

/* Bloc : la carte à gauche, le texte à droite */
.dp-mot-bloc{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start;
  max-width:1080px;margin:0 auto}

/* Carte : la photo (ou l'emblème) occupe tout le fond, sous un voile bleu dégradé ;
   le texte se pose dessus. Le cadre respire, très légèrement, en or. */
.dp-mot-qui{position:sticky;top:calc(var(--h-bandeau,36px) + clamp(84px,8.8vw,124px) + 22px);
  border-radius:24px;overflow:hidden;padding:0 22px 24px;margin:0;border:none;color:#fff;
  background:#0A2557;box-shadow:0 26px 54px -30px rgba(7,29,70,.85);isolation:isolate}
.dp-mot-qui .dp-mot-por{position:absolute;inset:0;margin:0;border-radius:0;z-index:0;border:none;
  background:none;overflow:hidden}
.dp-mot-qui .dp-mot-por img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.dp-mot-qui::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,37,87,.12) 0%,rgba(30,79,184,.55) 34%,
    rgba(18,50,111,.92) 58%,rgba(7,29,70,.98) 100%)}
.dp-mot-qui::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  border:1.5px solid rgba(239,176,52,.55);box-shadow:0 0 22px -6px rgba(239,176,52,.55) inset;
  animation:dpOra 3.6s ease-in-out infinite}
@keyframes dpOra{0%,100%{opacity:.28;box-shadow:0 0 16px -8px rgba(239,176,52,.4) inset}
  50%{opacity:.95;box-shadow:0 0 30px -4px rgba(239,176,52,.75) inset}}
.dp-mot-qui>p,.dp-mot-qui>ul{position:relative;z-index:2}
.dp-mot-qui .dp-mot-nom{margin-top:300px;font-family:var(--dpm-ft);font-size:21px;font-weight:700;
  letter-spacing:-.4px;line-height:1.28;color:#fff}
.dp-mot-qui .dp-mot-fonc{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-top:4px}
.dp-mot-reperes{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;gap:11px}
.dp-mot-reperes li{display:flex;flex-direction:column;gap:2px}
.dp-mot-reperes b{font-family:var(--dpm-ft);font-size:13.5px;font-weight:700;color:#BCD0FA}
.dp-mot-reperes span{font-size:11.5px;color:rgba(255,255,255,.82);line-height:1.4}
.dp-mot-reperes a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:3px;transition:text-decoration-color .2s}
.dp-mot-reperes a:hover{text-decoration-color:#FFD27A}

/* Portrait absent : monogramme (comme le FSN) */
.dp-mot-por .dp-mot-mono{display:none;position:absolute;left:0;right:0;top:24%;text-align:center;
  font-family:var(--dpm-ft);font-size:58px;font-weight:700;letter-spacing:-2px;color:rgba(188,208,250,.55)}
.dp-mot-por.sans{background:linear-gradient(150deg,rgba(47,111,237,.3),#0A2557)}
.dp-mot-por.sans img{display:none}
.dp-mot-por.sans .dp-mot-mono{display:block}

/* Carte « identité » : tant qu'aucun portrait n'est fourni, l'emblème de la
   Direction tient la place de la photo, sur un fond marine tramé. */
.dp-emb{background:
    radial-gradient(85% 48% at 50% 24%,rgba(47,111,237,.5),transparent 72%),
    radial-gradient(70% 40% at 92% 0%,rgba(40,151,232,.32),transparent 70%),
    linear-gradient(165deg,#15193A 0%,#0A2557 46%,#12326F 100%)}
.dp-mot-qui .dp-emb{background-color:#0A2557}
.dp-emb::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(111,211,255,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(111,211,255,.08) 1px,transparent 1px);
  background-size:27px 27px;background-position:center top;
  -webkit-mask-image:radial-gradient(75% 46% at 50% 26%,#000 20%,transparent 100%);
  mask-image:radial-gradient(75% 46% at 50% 26%,#000 20%,transparent 100%)}
.dp-emb-mono{position:absolute;left:50%;top:4px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--dpm-ft);font-size:118px;font-weight:700;line-height:1;letter-spacing:-5px;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.1);user-select:none}
.dp-emb-sceau{position:absolute;left:50%;top:64px;width:172px;height:172px;margin-left:-86px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#fff 0,#fff 58%,#EEF3FD 100%);display:grid;place-items:center;
  /* Un liseré or très fin à l'intérieur du disque, un anneau de verre autour. */
  box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7.5px rgba(239,176,52,.95),
    0 0 0 9px rgba(255,255,255,.07),0 30px 60px -22px rgba(0,0,0,.75)}
/* Anneau pointillé qui tourne lentement, comme un sceau. */
.dp-emb-sceau::before{content:"";position:absolute;inset:-17px;border-radius:50%;
  border:1px dashed rgba(255,210,122,.5);animation:dpTourne 46s linear infinite}
/* Halo bleu qui respire derrière l'emblème. */
.dp-emb-sceau::after{content:"";position:absolute;inset:-46px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(47,111,237,.55),transparent);animation:dpHalo 3.6s ease-in-out infinite}
@keyframes dpTourne{to{transform:rotate(360deg)}}
@keyframes dpHalo{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
.dp-emb-logo{display:block;width:74%;aspect-ratio:486/408;overflow:hidden;margin-top:2%}
.dp-emb-logo img{display:block;width:100%;height:auto}
/* Le voile laisse l'emblème dégagé, puis fonce sous le texte. */
.dp-mot-qui--id::after{background:linear-gradient(180deg,rgba(10,37,87,0) 0%,rgba(10,37,87,0) 40%,
  rgba(10,37,87,.55) 52%,rgba(7,29,70,.9) 66%,rgba(7,29,70,.98) 100%)}

/* Le mot se lit à même la page : ni carte, ni bordure, ni ombre. */
.dp-mot-dit{position:relative;background:none;border:none;border-radius:0;padding:6px 0 0;box-shadow:none}
.dp-mot-guil{position:absolute;top:-16px;right:6px;font-family:var(--dpm-ft);font-size:120px;font-weight:700;
  line-height:1;color:color-mix(in srgb,var(--dpm-acc) 15%,transparent);pointer-events:none;user-select:none}
.dp-mot .dp-mot-ouv{position:relative;font-family:var(--dpm-ft);font-size:clamp(19px,2.2vw,25px);font-weight:700;
  line-height:1.38;letter-spacing:-.6px;max-width:62ch;color:var(--dpm-txt)}
.dp-mot-ouv em{font-style:italic;color:var(--dpm-acc)}
.dp-mot-eng{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.dp-mot-eng li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 16px;align-items:start;
  padding:16px 18px;border-radius:16px;background:var(--dpm-voile);border:1px solid var(--dpm-bord-s);
  transition:border-color .22s,transform .22s}
.dp-mot-eng li:hover{border-color:color-mix(in srgb,var(--dpm-acc) 40%,transparent);transform:translateX(3px)}
/* Le numéro est un filigrane : grand, clair, il habille la fiche sans la charger. */
.dp-mot-eng .dp-e-n{grid-row:1/3;align-self:center;justify-self:center;text-align:center;
  font-family:var(--dpm-ft);font-size:54px;font-weight:700;line-height:.82;
  letter-spacing:-2.5px;color:color-mix(in srgb,var(--dpm-acc) 24%,transparent);transition:color .22s}
.dp-mot-eng li:hover .dp-e-n{color:color-mix(in srgb,var(--dpm-acc) 55%,transparent)}
.dp-mot-eng b{font-family:var(--dpm-ft);font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--dpm-txt);line-height:1.38;padding-top:2px}
.dp-mot-eng small{font-size:13px;color:var(--dpm-txt2);line-height:1.55}
/* 66ch de Montserrat 14 px, écrit en em : Chrome calcule parfois « ch » sur la
   police de secours (avant le chargement de Montserrat) et ne le recalcule pas. */
.dp-mot .dp-mot-fin{margin-top:22px;font-size:14px;color:var(--dpm-txt2);line-height:1.6;max-width:43.7em}
.dp-mot-fin a{color:var(--dpm-acc);font-weight:600;text-underline-offset:3px}
.dp-mot-signe{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--dpm-bord-s)}
.dp-mot-signe .dp-s-trait{width:46px;height:2px;border-radius:99px;background:var(--dpm-acc);flex-shrink:0}
.dp-mot-signe b{display:block;font-family:var(--dpm-ft);font-size:15.5px;font-weight:700;color:var(--dpm-txt);line-height:1.5}
.dp-mot-signe small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dpm-txt3);margin-top:2px;line-height:1.5}

/* Responsive — mêmes paliers que le FSN */
@media(max-width:1180px){ .dp-mot-bloc{grid-template-columns:260px minmax(0,1fr)} }
@media(max-width:1000px){
  .dp-mot-bloc{grid-template-columns:1fr}
  .dp-mot-qui{position:relative;top:auto;min-height:440px;width:100%;max-width:100%;overflow:hidden}
  .dp-mot-qui .dp-mot-por img{object-position:center 16%}
  .dp-mot-qui .dp-mot-nom{margin-top:216px}
  .dp-mot-dit{padding:20px 0 0}
  .dp-emb-sceau{top:34px;width:150px;height:150px;margin-left:-75px}
  .dp-emb-mono{font-size:104px}
  .dp-mot-qui--id::after{background:linear-gradient(180deg,rgba(10,37,87,0) 0%,rgba(10,37,87,0) 36%,
    rgba(10,37,87,.6) 50%,rgba(7,29,70,.92) 64%,rgba(7,29,70,.98) 100%)}
}
@media(max-width:620px){
  .dp-mot{padding:46px 0}
  .dp-mot-eng li{grid-template-columns:52px minmax(0,1fr);gap:4px 12px;padding:14px}
  .dp-mot-eng .dp-e-n{font-size:40px;letter-spacing:-1.8px}
  .dp-mot-qui{min-height:400px;padding:0 16px 18px}
  .dp-mot-qui .dp-mot-nom{margin-top:180px}
  .dp-mot-qui .dp-mot-por img{object-position:center 14%}
  .dp-emb-sceau{top:28px;width:124px;height:124px;margin-left:-62px}
  .dp-emb-sceau::before{inset:-13px}
  .dp-emb-mono{font-size:88px;letter-spacing:-4px}
}
/* Tablette (700–1000 px) : on repasse en deux colonnes, la carte à gauche. */
@media(min-width:700px) and (max-width:1000px){
  .dp-mot-bloc{grid-template-columns:270px minmax(0,1fr)}
  .dp-mot-qui .dp-mot-nom{margin-top:330px}
  .dp-mot-qui .dp-mot-por img{object-position:center 12%}
  .dp-mot-dit{padding:20px 0 0}
  .dp-emb-sceau{top:76px;width:164px;height:164px;margin-left:-82px}
  .dp-mot-qui--id::after{background:linear-gradient(180deg,rgba(10,37,87,0) 0%,rgba(10,37,87,0) 40%,
    rgba(10,37,87,.55) 52%,rgba(7,29,70,.9) 66%,rgba(7,29,70,.98) 100%)}
}

/* ============================================================
   2. MISSIONS — fond « bleu de nuit » de la bande GEM de l'accueil
   ============================================================ */
.dp-sec.dp-nuit{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:
    radial-gradient(110% 90% at 88% 0%,rgba(40,151,232,.30),transparent 58%),
    linear-gradient(160deg,#15193A 0%,#071D46 55%,#12326F 100%)}
/* Trame fine (lignes de balayage + quadrillage de 54 px) */
.dp-nuit::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(180deg,rgba(111,211,255,.05) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(111,211,255,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(111,211,255,.07) 1px,transparent 1px);
  background-size:100% 4px,54px 54px,54px 54px;opacity:.42;mix-blend-mode:screen}
/* Reflet : une bande lumineuse descend lentement la section */
.dp-nuit::after{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:26%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(111,211,255,.16) 46%,rgba(111,211,255,.3) 50%,
    rgba(111,211,255,.16) 54%,transparent 100%);
  animation:dpBalaye 7.5s linear infinite;mix-blend-mode:screen}
@keyframes dpBalaye{0%{transform:translateY(-120%);opacity:0}12%{opacity:1}88%{opacity:1}
  100%{transform:translateY(420%);opacity:0}}
.dp-nuit>.dp-wrap{position:relative;z-index:1;max-width:1300px}

/* Titres en blanc, accent or */
.dp-nuit .dp-tete h2{color:#fff}
.dp-nuit .dp-tete h2 em{color:#FFD27A}
.dp-nuit .dp-tete p{color:rgba(255,255,255,.78)}
.dp-nuit .dp-sur{color:#FFD27A}
/* Sur le bleu de nuit, un anneau or semi-transparent vire au gris : le point
   rayonne plutôt, comme une lumière (halo flou qui s'élargit et s'éteint). */
.dp-nuit .dp-sur::before{background:#FFD27A;box-shadow:0 0 8px rgba(255,210,122,.75);animation-name:dpBatOr}
@keyframes dpBatOr{0%{box-shadow:0 0 8px rgba(255,210,122,.75),0 0 0 0 rgba(255,210,122,.4)}100%{box-shadow:0 0 8px rgba(255,210,122,.75),0 0 8px 9px rgba(255,210,122,0)}}
.dp-nuit .dp-trait{background:#FFD27A}
.dp-nuit .dp-trait::after{background:#EFB034}

/* Cinq panneaux de verre : 5 colonnes, puis 3 + 2 centrées, 2, 1 */
.dp-nuit-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0;padding:0;list-style:none}
.dp-verre{flex:0 1 calc((100% - 64px) / 5);min-width:0;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;color:#fff;
  background:linear-gradient(160deg,rgba(111,211,255,.13),rgba(7,29,70,.34) 62%);
  -webkit-backdrop-filter:blur(11px) saturate(1.25);backdrop-filter:blur(11px) saturate(1.25);
  border:1px solid rgba(111,211,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 26px rgba(111,211,255,.1),0 18px 40px -26px rgba(0,0,0,.65);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .18s cubic-bezier(.2,.7,.2,1),
    box-shadow .32s cubic-bezier(.2,.7,.2,1)}
/* Liseré supérieur, comme une arête de projection */
.dp-verre::before{content:"";position:absolute;z-index:1;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--dpm-holo),transparent);opacity:.75}
/* Reflet oblique qui traverse le panneau au survol */
.dp-verre::after{content:"";position:absolute;z-index:1;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(74deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  transform:translateX(-70%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.dp-verre:hover{transform:translateY(-5px);border-color:rgba(111,211,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 34px rgba(111,211,255,.18),0 26px 54px -26px rgba(46,155,232,.5)}
.dp-verre:hover::after{transform:translateX(70%)}
.dp-verre-n{position:absolute;z-index:0;top:16px;right:18px;font-family:var(--dpm-ft);font-size:44px;font-weight:700;
  line-height:.82;letter-spacing:-2px;color:rgba(111,211,255,.13);pointer-events:none;transition:color .3s}
.dp-verre:hover .dp-verre-n{color:rgba(111,211,255,.3)}
/* L'icône, en tuile, rayonne */
.dp-verre-ic{position:relative;z-index:2;width:40px;height:40px;padding:9px;border-radius:11px;display:grid;place-items:center;
  margin:0 0 16px;background:rgba(239,176,52,.16);color:var(--dpm-holo);
  filter:drop-shadow(0 0 7px rgba(111,211,255,.65));
  transition:filter .18s cubic-bezier(.2,.7,.2,1),transform .32s var(--dpm-rebond)}
.dp-verre:hover .dp-verre-ic{transform:scale(1.1);filter:drop-shadow(0 0 13px rgba(111,211,255,.9))}
.dp-verre-ic svg{width:22px;height:22px;display:block}
.dp-verre-ic svg>*{stroke:currentColor}
.dp-verre-ic svg>:first-child:not(:only-child){fill:rgba(111,211,255,.14)}
.dp-verre-ic svg>*+*{stroke:#F7D98A;fill:none}
.dp-nuit .dp-verre h3{position:relative;z-index:2;font-family:var(--dpm-ft);font-size:16.5px;font-weight:700;
  line-height:1.15;letter-spacing:-.02em;margin:0 0 9px;color:#EAF7FF;text-shadow:0 0 16px rgba(111,211,255,.45)}
.dp-nuit .dp-verre p{position:relative;z-index:2;font-size:13px;line-height:1.6;color:rgba(226,243,255,.82);margin:0}
@media(max-width:1279px){ .dp-verre{flex-basis:calc((100% - 32px) / 3)} }
@media(max-width:899px){ .dp-verre{flex-basis:calc((100% - 16px) / 2)} }
@media(max-width:559px){
  .dp-nuit-grille{gap:12px}
  .dp-verre{flex-basis:100%;padding:22px 20px}
}

/* ============================================================
   3. MENU — « La Direction » est la page courante
   ============================================================ */
.nav-item[aria-current="page"]{color:var(--bordeaux);position:relative}
.nav-item[aria-current="page"] .ic-duo{opacity:1}
.nav:not(.ouvert) .nav-item[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;
  height:2px;border-radius:2px;background:linear-gradient(90deg,var(--bordeaux),var(--or));
  transform-origin:left;animation:dpTrace .7s var(--dpm-ease) .25s both}
.nav.ouvert .nav-item[aria-current="page"]{background:rgba(30,79,184,.07);border-radius:12px}
[data-theme="dark"] .nav-item[aria-current="page"]{color:#9DB7F2}
[data-theme="dark"] .nav.ouvert .nav-item[aria-current="page"]{background:rgba(157,183,242,.1)}
@keyframes dpTrace{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================
   4. APPARITIONS AU DÉFILEMENT
   Les états « avant » ne valent que sous html.dp-anim (posé dans
   <head>, retiré si public/js/direction-page.js ne démarre pas) :
   sans JavaScript, tout est visible. La classe .dp-vu est ajoutée
   une seule fois. Seules les sections de cette feuille sont visées
   (#organisation garde son propre comportement).
   ============================================================ */

/* --- Titres mot à mot ---
   Avant découpage, le titre attend caché (aucun éclair à l'arrivée) ;
   une fois découpé, chaque mot se pose à son tour. */
.dp-anim .dp-mot-h:not(.dp-mots),.dp-anim .dp-mot-ouv:not(.dp-mots),
.dp-anim :is(#missions,#enjeux) .dp-tete h2:not(.dp-mots){opacity:0}
.dp-anim .dp-mots .dp-w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}
.dp-anim .dp-vu .dp-mots .dp-w,.dp-anim .dp-mots.dp-vu .dp-w{
  animation:dpMot .85s var(--dpm-ease) both;animation-delay:calc(var(--dp-h0,140ms) + var(--w,0) * var(--dp-hp,55ms))}
@keyframes dpMot{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}}
/* La FAQ (balisage de l'accueil) suit le même rythme : le bloc du titre
   reste en place, ce sont les mots qui montent. */
.dp-anim #faq .sec-head .h2.dp-mots{opacity:1;transform:none;transition:none}

/* --- Sur-titre, trait qui se dessine, phrase --- */
.dp-anim .dp-mot-sur,.dp-anim :is(#missions,#enjeux) .dp-tete .dp-sur{
  transition:opacity .6s var(--dpm-ease) .05s,transform .6s var(--dpm-ease) .05s}
.dp-anim .dp-mot-tete:not(.dp-vu) .dp-mot-sur,
.dp-anim :is(#missions,#enjeux) .dp-tete:not(.dp-vu) .dp-sur{opacity:0;transform:translateY(10px)}

.dp-anim .dp-mot-souligne{transition:transform .9s var(--dpm-ease) .55s}
.dp-anim .dp-mot-tete:not(.dp-vu) .dp-mot-souligne{transform:scaleX(0)}
.dp-anim :is(#missions,#enjeux) .dp-tete .dp-trait{transition:transform .8s var(--dpm-ease) .5s}
.dp-anim :is(#missions,#enjeux) .dp-tete:not(.dp-vu) .dp-trait{transform:scaleX(0)}
.dp-anim :is(#missions,#enjeux) .dp-tete .dp-trait::after{transition:opacity .3s ease 1.15s,transform .5s var(--dpm-rebond) 1.15s}
.dp-anim :is(#missions,#enjeux) .dp-tete:not(.dp-vu) .dp-trait::after{opacity:0;transform:scale(0)}

.dp-anim .dp-mot-p,.dp-anim :is(#missions,#enjeux) .dp-tete>p{
  transition:opacity .7s var(--dpm-ease) .6s,transform .7s var(--dpm-ease) .6s}
.dp-anim .dp-mot-tete:not(.dp-vu) .dp-mot-p,
.dp-anim :is(#missions,#enjeux) .dp-tete:not(.dp-vu)>p{opacity:0;transform:translateY(12px)}

/* --- Ouverture : la carte se pose, l'emblème se dépose, les repères suivent --- */
.dp-anim .dp-mot-qui{transition:opacity .9s var(--dpm-ease) .1s,transform .9s var(--dpm-ease) .1s}
.dp-anim .dp-mot-qui:not(.dp-vu){opacity:0;transform:translateY(28px) scale(.97)}
.dp-anim .dp-emb-sceau{transition:opacity .6s ease .35s,transform 1.1s var(--dpm-rebond) .35s}
.dp-anim .dp-mot-qui:not(.dp-vu) .dp-emb-sceau{opacity:0;transform:scale(.55) rotate(-14deg)}
.dp-anim .dp-emb-mono{transition:opacity 1.4s ease .2s,letter-spacing 1.6s var(--dpm-ease) .2s}
.dp-anim .dp-mot-qui:not(.dp-vu) .dp-emb-mono{opacity:0;letter-spacing:12px}
.dp-anim .dp-mot-qui>p,.dp-anim .dp-mot-reperes li{
  transition:opacity .6s var(--dpm-ease) calc(.45s + var(--i,0) * 90ms),
    transform .6s var(--dpm-ease) calc(.45s + var(--i,0) * 90ms)}
.dp-mot-qui>.dp-mot-fonc{--i:1}
.dp-anim .dp-mot-qui:not(.dp-vu)>p,.dp-anim .dp-mot-qui:not(.dp-vu) .dp-mot-reperes li{opacity:0;transform:translateY(12px)}
.dp-anim .dp-mot-reperes{transition:border-color .8s ease .6s}
.dp-anim .dp-mot-qui:not(.dp-vu) .dp-mot-reperes{border-top-color:transparent}

.dp-anim .dp-mot-guil{transition:opacity 1s ease .3s,transform 1.2s var(--dpm-rebond) .3s}
.dp-anim .dp-mot-dit:not(.dp-vu) .dp-mot-guil{opacity:0;transform:translateY(-14px) scale(.7)}

/* Les trois fiches : la fiche monte, le filigrane se pose, le titre suit (FSN). */
.dp-anim .dp-mot-eng li{transition:opacity .66s var(--dpm-ease),transform .66s var(--dpm-ease),border-color .22s;
  transition-delay:calc(var(--i,0) * 130ms)}
.dp-anim .dp-mot-eng li:not(.dp-vu){opacity:0;transform:translateY(22px)}
.dp-anim .dp-mot-eng li.dp-vu:hover{transform:translateX(3px);transition-delay:0s}
.dp-anim .dp-mot-eng li.dp-vu .dp-e-n{animation:dpNum .9s var(--dpm-ease) backwards;animation-delay:calc(var(--i,0) * 130ms + 140ms)}
.dp-anim .dp-mot-eng li.dp-vu b{animation:dpTitre .6s ease backwards;animation-delay:calc(var(--i,0) * 130ms + 220ms)}
@keyframes dpNum{0%{opacity:0;transform:translateY(16px) scale(.78)}60%{opacity:1;transform:translateY(0) scale(1.06)}
  100%{opacity:1;transform:none}}
@keyframes dpTitre{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.dp-anim .dp-mot-fin{transition:opacity .7s var(--dpm-ease),transform .7s var(--dpm-ease)}
.dp-anim .dp-mot-fin:not(.dp-vu){opacity:0;transform:translateY(14px)}
.dp-anim .dp-mot-signe{transition:opacity .7s var(--dpm-ease) .1s,border-color .9s ease .1s}
.dp-anim .dp-mot-signe:not(.dp-vu){opacity:0;border-top-color:transparent}
.dp-anim .dp-mot-signe .dp-s-trait{transform-origin:left;transition:transform .8s var(--dpm-ease) .35s}
.dp-anim .dp-mot-signe:not(.dp-vu) .dp-s-trait{transform:scaleX(0)}

/* --- Missions : les panneaux se posent un à un, l'icône et le numéro rebondissent --- */
.dp-anim .dp-verre:not(.dp-vu){opacity:0;transform:translateY(24px) scale(.97)}
.dp-anim .dp-verre.dp-vu{animation:dpPose .7s var(--dpm-ease) backwards;animation-delay:var(--dp-d,0ms)}
@keyframes dpPose{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.dp-anim .dp-verre.dp-vu .dp-verre-n{animation:dpNum .9s var(--dpm-ease) backwards;animation-delay:calc(var(--dp-d,0ms) + 180ms)}
.dp-anim .dp-verre.dp-vu .dp-verre-ic{animation:dpIcone .8s var(--dpm-rebond) backwards;animation-delay:calc(var(--dp-d,0ms) + 120ms)}
@keyframes dpIcone{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}

/* --- Enjeux : chaque fiche monte, son filet or se colore --- */
.dp-anim .dp-enjeu:not(.dp-vu){opacity:0;transform:translateY(18px)}
.dp-anim .dp-enjeu.dp-vu{animation:dpPose .7s var(--dpm-ease) backwards,dpFilet 1.1s ease backwards;animation-delay:var(--dp-d,0ms)}
@keyframes dpFilet{from{border-left-color:transparent}to{border-left-color:#EFB034}}

/* --- Questions fréquentes : les thèmes puis les questions, en cascade --- */
.dp-anim #faq:not(.dp-vu) .fq-theme,.dp-anim #faq:not(.dp-vu) .fq-qa,
.dp-anim #faq:not(.dp-vu) .fq-aide,.dp-anim #faq:not(.dp-vu) .fq-p{opacity:0}
.dp-anim #faq.dp-vu .fq-p{animation:dpPose .7s var(--dpm-ease) .35s backwards}
.dp-anim #faq.dp-vu .fq-theme{animation:dpGlisse .5s var(--dpm-ease) backwards;animation-delay:calc(.4s + var(--i,0) * 60ms)}
.dp-anim #faq.dp-vu .fq-aide{animation:dpPose .7s var(--dpm-ease) .8s backwards}
.dp-anim #faq.dp-vu .fq-qa{animation:dpPose .6s var(--dpm-ease) backwards;animation-delay:calc(.45s + var(--i,0) * 55ms)}
/* Après un changement de thème, la nouvelle liste se pose sans attendre. */
.dp-anim #faq.dp-vu.dp-filtre .fq-qa{animation-delay:calc(var(--i,0) * 45ms)}
.fq-themes>:nth-child(2),.fq-liste>:nth-child(2){--i:1}.fq-themes>:nth-child(3),.fq-liste>:nth-child(3){--i:2}
.fq-themes>:nth-child(4),.fq-liste>:nth-child(4){--i:3}.fq-themes>:nth-child(5),.fq-liste>:nth-child(5){--i:4}
.fq-themes>:nth-child(6),.fq-liste>:nth-child(6){--i:5}.fq-themes>:nth-child(7),.fq-liste>:nth-child(7){--i:6}
.fq-themes>:nth-child(8),.fq-liste>:nth-child(8){--i:7}.fq-themes>:nth-child(n+9),.fq-liste>:nth-child(n+9){--i:8}
@keyframes dpGlisse{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* --- Pied de page : les colonnes montent l'une après l'autre --- */
.dp-anim .pied-grille>*:not(.dp-vu){opacity:0;transform:translateY(18px)}
.dp-anim .pied-grille>.dp-vu{animation:dpPose .7s var(--dpm-ease) backwards;animation-delay:var(--dp-d,0ms)}

/* --- Mouvement réduit : tout est posé d'emblée --- */
@media(prefers-reduced-motion:reduce){
  .dp-anim .dp-mot-h,.dp-anim .dp-mot-ouv,.dp-anim :is(#missions,#enjeux) .dp-tete h2,
  .dp-anim .dp-mots .dp-w,.dp-anim .dp-mot-sur,.dp-anim :is(#missions,#enjeux) .dp-tete .dp-sur,
  .dp-anim .dp-mot-p,.dp-anim :is(#missions,#enjeux) .dp-tete>p,
  .dp-anim .dp-mot-qui,.dp-anim .dp-mot-qui>p,.dp-anim .dp-mot-reperes li,.dp-anim .dp-emb-sceau,.dp-anim .dp-emb-mono,
  .dp-anim .dp-mot-guil,.dp-anim .dp-mot-eng li,.dp-anim .dp-mot-eng .dp-e-n,.dp-anim .dp-mot-eng b,.dp-anim .dp-mot-fin,
  .dp-anim .dp-mot-signe,.dp-anim .dp-verre,.dp-anim .dp-verre-n,.dp-anim .dp-verre-ic,.dp-anim .dp-enjeu,
  .dp-anim #faq .fq-theme,.dp-anim #faq .fq-qa,.dp-anim #faq .fq-aide,.dp-anim #faq .fq-p,.dp-anim .pied-grille>*{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  .dp-anim .dp-mot-souligne,.dp-anim :is(#missions,#enjeux) .dp-tete .dp-trait,
  .dp-anim :is(#missions,#enjeux) .dp-tete .dp-trait::after,
  .dp-anim .dp-mot-signe .dp-s-trait{transform:none!important;opacity:1!important;transition:none!important}
  .dp-mot-qui::before{animation:none;opacity:.45}
  .dp-emb-sceau::before,.dp-emb-sceau::after{animation:none}
  .dp-nuit::after{animation:none;display:none}
  .dp-verre::after{display:none}
  .dp-verre,.dp-verre-ic,.dp-mot-eng li{transition:none}
  .nav-item[aria-current="page"]::after{animation:none}
}