/* En-tête commun de tous les outils DANA-ECOSYSTEME (15/10/2026, demande de Phil).
   Même place pour chaque bouton, même largeur, même fenêtre d'explication, même fenêtre de partage.
   Seule la couleur de l'outil change : --dn-outil (carré, boutons pleins), --dn-outil-texte (textes et liens).
   Aucune animation décorative. Fonds toujours pleins (jamais transparents derrière un texte). */

:root{
  --dn-largeur:1000px;
  --dn-fond:#f5f5f7; --dn-carte:#ffffff; --dn-texte:#1d1d1f; --dn-doux:#5b5b66; --dn-ligne:#d9d9e0;
  --dn-voile:rgba(15,23,42,.62); --dn-ombre:0 18px 48px rgba(0,0,0,.22);
  --dn-accueil:#f97316;
  --dn-outil:#2563eb; --dn-outil-bouton:#2563eb; --dn-outil-texte:#1d4ed8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --dn-fond:#111318; --dn-carte:#1c1f26; --dn-texte:#f2f2f5; --dn-doux:#a9adb8; --dn-ligne:#343843;
    --dn-voile:rgba(0,0,0,.7); --dn-ombre:0 18px 48px rgba(0,0,0,.6);
    --dn-outil-texte:var(--dn-outil-texte-nuit,#93c5fd);
  }
}
:root[data-theme="dark"]{
  --dn-fond:#111318; --dn-carte:#1c1f26; --dn-texte:#f2f2f5; --dn-doux:#a9adb8; --dn-ligne:#343843;
  --dn-voile:rgba(0,0,0,.7); --dn-ombre:0 18px 48px rgba(0,0,0,.6);
  --dn-outil-texte:var(--dn-outil-texte-nuit,#93c5fd);
}

/* ---------- l'en-tête ---------- */
/* les règles générales header/nav/h1 d'un outil ne doivent pas déformer l'en-tête commun */
.dn-entete{display:block;position:static;margin:0;padding:0;gap:0;background:var(--dn-carte);border-bottom:1px solid var(--dn-ligne)}
.dn-entete h1.dn-titre{margin:0;padding:0;border:0}
.dn-nav{position:static;background:none;border:0;box-shadow:none}
.dn-entete-int{max-width:var(--dn-largeur);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.dn-marque{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 320px}
.dn-logo{width:44px;height:44px;border-radius:11px;background:var(--dn-outil);flex:none}
.dn-titres{min-width:0}
.dn-titre{margin:0;font-size:1.2rem;line-height:1.25;font-weight:800;color:var(--dn-texte)}
.dn-phrase{margin:2px 0 0;font-size:.92rem;line-height:1.4;color:var(--dn-doux)}
.dn-outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.dn-bouton,.dn-langue{min-height:44px;border-radius:12px;border:1px solid var(--dn-ligne);background:var(--dn-carte);color:var(--dn-texte);
  font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.dn-langue{padding:0 10px;max-width:170px}
.dn-bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;text-decoration:none}
.dn-rond{width:44px;padding:0}
.dn-bouton svg{width:20px;height:20px;flex:none}
.dn-bouton[hidden]{display:none}
.dn-bouton:hover,.dn-langue:hover{border-color:var(--dn-outil)}
.dn-bouton:focus-visible,.dn-langue:focus-visible{outline:3px solid var(--dn-outil-texte);outline-offset:2px}
.dn-aide{color:var(--dn-outil-texte)}
/* jour/nuit : on montre la lune le jour, le soleil la nuit */
.dn-soleil{display:none}
:root[data-theme="dark"] .dn-soleil{display:block}
:root[data-theme="dark"] .dn-lune{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dn-soleil{display:block}
  :root:not([data-theme="light"]) .dn-lune{display:none}
}

/* ---------- la barre Retour / Partager / Accueil ---------- */
.dn-nav{max-width:var(--dn-largeur);margin:0 auto;padding:12px 16px 0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dn-nav-droite{display:flex;gap:8px}
.dn-retour::before{content:"\2190";font-weight:800}
[dir=rtl] .dn-retour::before{content:"\2192"}
.dn-carre{width:18px;height:18px;border-radius:5px;background:var(--dn-accueil);flex:none}

/* ---------- le contenu de l'outil : même largeur partout ---------- */
.dn-page{max-width:var(--dn-largeur);margin:0 auto;padding:14px 16px 40px}

/* ---------- fenêtres (explication, partage) ---------- */
.dn-fenetre{position:fixed;inset:0;z-index:1000100;background:var(--dn-voile);display:flex;align-items:flex-start;justify-content:center;
  padding:16px;overflow-y:auto}
.dn-fenetre[hidden]{display:none}
.dn-panneau{background:var(--dn-carte);color:var(--dn-texte);border-radius:16px;box-shadow:var(--dn-ombre);width:100%;max-width:720px;
  margin:auto 0;padding:20px}
.dn-panneau-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--dn-ligne);
  padding-bottom:10px;margin-bottom:6px}
.dn-panneau-tete h2{margin:0;font-size:1.3rem;line-height:1.3}
.dn-corps h3{font-size:1.05rem;margin:18px 0 6px;color:var(--dn-outil-texte)}
.dn-corps p,.dn-corps li{line-height:1.6;font-size:.98rem}
.dn-corps ol,.dn-corps ul{padding-inline-start:1.3rem;margin:6px 0}
.dn-pied{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--dn-ligne)}
.dn-plein{background:var(--dn-outil-bouton);border-color:var(--dn-outil-bouton);color:#fff}
.dn-plein:hover{border-color:var(--dn-outil-bouton);filter:brightness(1.08)}
.dn-note{margin:14px 0 0;font-size:.88rem;color:var(--dn-doux);line-height:1.5}
.dn-fin{margin:12px 0 0;font-weight:600;line-height:1.5}

/* partage : le code QR toujours sur blanc, pour que l'appareil photo le lise */
.dn-qr{display:block;margin:12px auto;width:min(260px,70vw);aspect-ratio:1;background:#fff;border-radius:12px;padding:10px;border:1px solid var(--dn-ligne)}
.dn-qr img{width:100%;height:100%;display:block}
.dn-lien{display:block;text-align:center;word-break:break-all;font-size:.9rem;color:var(--dn-outil-texte);margin:4px 0 0}
.dn-panneau-qr{max-width:440px;text-align:center}
.dn-panneau-qr .dn-pied{justify-content:center}

/* ---------- téléphone ---------- */
@media (max-width:640px){
  .dn-entete-int{padding:10px 16px}
  .dn-marque{flex-basis:100%}
  .dn-outils{margin-inline-start:0;width:100%}
  .dn-langue{flex:1 1 auto;max-width:none}
  .dn-titre{font-size:1.08rem}
  .dn-pied .dn-bouton{flex:1 1 auto}
  .dn-outils{flex-wrap:nowrap}
  /* sur téléphone, « Mode d'emploi » devient un bouton rond « ? », pour que tous les boutons tiennent sur une ligne */
  .dn-aide{width:44px;padding:0;flex:none}
  .dn-aide span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dn-rond{flex:none}
}
@media (prefers-reduced-motion: no-preference){
  .dn-bouton,.dn-langue{transition:border-color .15s}
}

/* Couches : le menu (1000000) et le partage (1000100) passent devant tous les écrans des outils. */
.dn-danger{color:#b91c1c}
:root[data-theme="dark"] .dn-danger{color:#fca5a5}

/* ---------- le menu latéral (15/10/2026, Phil : « comme dans le Masque ») ----------
   Un panneau à droite (tout l'écran sur téléphone), ouvert à l'arrivée sur la rubrique « Mode d'emploi ».
   On le ferme avec « ✕ Fermer » ou d'un clic à côté. Rubriques repliables, une seule ouverte à la fois. */
.dn-menu-fond{position:fixed;inset:0;z-index:1000000;background:var(--dn-voile);display:flex;justify-content:flex-end}
.dn-menu-fond[hidden]{display:none}
[dir=rtl] .dn-menu-fond{justify-content:flex-start}
.dn-menu{width:min(440px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--dn-fond);color:var(--dn-texte);
  padding:0 16px calc(32px + env(safe-area-inset-bottom));box-shadow:-12px 0 32px rgba(0,0,0,.25)}
.dn-menu-tete{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0 -16px 6px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;background:var(--dn-fond);border-bottom:1px solid var(--dn-ligne)}
.dn-menu-tete b{font-size:1.2rem;margin-inline-end:auto}
.dn-menu-titre{margin:18px 12px 6px;font-size:.82rem;font-weight:700;color:var(--dn-doux)}
.dn-groupe{background:var(--dn-carte);border:1px solid var(--dn-ligne);border-radius:12px;overflow:hidden}
.dn-groupe > * + *{border-top:1px solid var(--dn-ligne)}
.dn-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:11px 16px;
  background:none;border:0;color:var(--dn-texte);font:inherit;font-size:1rem;font-weight:600;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}
.dn-ligne:hover{background:var(--dn-fond)}
.dn-ligne:focus-visible{outline:3px solid var(--dn-outil-texte);outline-offset:-3px}
.dn-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--dn-doux);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .dn-chev{transform:scaleX(-1)}
/* les règles générales details/summary d'un outil ne doivent pas toucher le menu */
.dn-menu details{border:0;padding:0;margin:0;background:none;box-shadow:none;border-radius:0}
.dn-menu summary{margin:0}
details.dn-acc > summary{list-style:none}
details.dn-acc > summary::-webkit-details-marker{display:none}
details.dn-acc[open] > summary .dn-chev{transform:rotate(90deg)}
details.dn-acc[open] > summary{color:var(--dn-outil-texte)}
/* 02/11/2026 (Phil) : un texte qui s'ouvre se voit : titre coloré ET fond teinté de la couleur de l'outil, arrondi */
details.dn-acc[open] > .dn-acc-corps{background:color-mix(in srgb,var(--dn-outil-texte) 9%,transparent);border-radius:12px;margin:0 8px 10px;padding:12px 14px 14px}
.dn-acc-corps{padding:2px 16px 14px}
.dn-acc-corps h3{font-size:1rem;margin:16px 0 4px;color:var(--dn-outil-texte)}
.dn-acc-corps p,.dn-acc-corps li{line-height:1.6;font-size:.95rem}
.dn-acc-corps ol,.dn-acc-corps ul{padding-inline-start:1.2rem;margin:6px 0}
.dn-pastille{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none}
.dn-ligne-gauche{display:flex;align-items:center;gap:10px}
.dn-menu-bouton span{margin-inline-start:2px}
@media (max-width:640px){
  .dn-menu{box-shadow:none}
  .dn-menu-bouton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dn-menu-bouton{width:44px;padding:0;flex:none}
}
/* « Nos outils » : l'outil où l'on est, coloré, avec « Vous êtes ici » (Phil, 15/10/2026). Couleurs en classes (bloc en bas). */
.dn-pastille{background:var(--dn-c,#999)}
.dn-ici-mot{display:none;font-size:.85rem;font-weight:800;color:var(--dn-texte);white-space:nowrap}
.dn-ici{cursor:default;background:var(--dn-fond);background:color-mix(in srgb,var(--dn-c) 14%,var(--dn-carte));box-shadow:inset 4px 0 0 var(--dn-c)}
[dir=rtl] .dn-ici{box-shadow:inset -4px 0 0 var(--dn-c)}
.dn-ici:hover{background:color-mix(in srgb,var(--dn-c) 14%,var(--dn-carte))}
.dn-ici .dn-ici-mot{display:inline}
.dn-ici .dn-chev{display:none}

/* COULEURS-DES-OUTILS (écrit par entete_commun.py, ne pas modifier à la main) */
.dn-c-initiation,.dn-c-production{--dn-c:#2563eb}.dn-c-masque{--dn-c:#6d28d9}.dn-c-suivi{--dn-c:#059669}.dn-c-articles{--dn-c:#d97706}.dn-c-syntheses{--dn-c:#1e3a8a}
/* FIN-COULEURS-DES-OUTILS */

/* très petit téléphone (360 px et moins de 420) : « Partager » devient un bouton rond (icône QR + nom lu par les lecteurs d'écran),
   pour que « Accueil » ne soit jamais coupé (Phil, 15/10/2026) */
@media (max-width:420px){
  .dn-nav{gap:6px}
  .dn-nav .dn-bouton{padding:0 10px}
  .dn-nav .dn-bouton[data-dn="partager"]{width:44px;padding:0;flex:none}
  .dn-nav .dn-bouton[data-dn="partager"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* sans sélecteur de langue (présentation), les boutons restent à droite sur téléphone */
@media (max-width:640px){ .dn-outils:not(:has(.dn-langue)){justify-content:flex-end} }

/* tête du menu : jamais sur deux lignes, même à 360 px */
.dn-menu-tete .dn-bouton{white-space:nowrap}
@media (max-width:420px){ .dn-menu-tete .dn-bouton{padding:0 10px} .dn-menu-tete{gap:6px} }

/* 🔊 lecture à voix haute : petit bouton rond devant chaque texte de plus de 5 lignes */
.dn-lire{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:2px 0 4px;padding:0;border-radius:50%;
  border:1px solid var(--dn-ligne);background:var(--dn-carte);color:var(--dn-outil-texte);cursor:pointer;vertical-align:middle;flex:none}
.dn-lire svg{width:18px;height:18px}
/* 18/10 (Phil) : la durée d'écoute à côté de l'icône */
.dn-lire{width:auto;min-width:36px;gap:6px;padding:0 11px 0 9px;border-radius:999px}
.dn-lire.dn-lire-bloc{display:flex;width:fit-content;margin:0 0 12px}
.dn-lire-duree{font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap}
.dn-lire:hover{border-color:var(--dn-outil)}
.dn-lire.dn-lit{background:var(--dn-outil-bouton);border-color:var(--dn-outil-bouton);color:#fff}
.dn-lire:focus-visible{outline:3px solid var(--dn-outil-texte);outline-offset:2px}
@media print{.dn-lire{display:none}}

/* ===================== « Plus de vie », commun à tous les outils (Phil, 15/10/2026), accordé à l'accueil =====================
   Halos de couleur qui dérivent lentement, boutons en relief (survol qui soulève, toucher qui enfonce), cartes vivantes et icônes brillantes.
   Chaque outil désigne ses cartes et ses icônes avec ses propres sélecteurs (bloc « VIE » de l'outil), en reprenant ces mêmes valeurs.
   Téléphone : jamais de fond transparent derrière un texte (le verre seulement à partir de 621 px). Moins d'animations : rien ne bouge. */
:root{--vie-c:var(--dn-outil);--vie-o:#f97316;--vie-courbe:cubic-bezier(.2,.8,.2,1)}
@keyframes dn-vie-derive{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3vmax,-2vmax,0) scale(1.08)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes dn-vie-arrivee{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dn-vie-reflet{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
@keyframes dn-vie-pouls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--vie-c) 55%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
:root:not([data-dn-outil="accueil"]) body::after{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(40vmax 40vmax at 12% 8%,color-mix(in srgb,var(--vie-c) 34%,transparent),transparent 70%),
    radial-gradient(36vmax 36vmax at 92% 30%,color-mix(in srgb,var(--vie-o) 22%,transparent),transparent 70%),
    radial-gradient(44vmax 44vmax at 50% 105%,color-mix(in srgb,#8b5cf6 22%,transparent),transparent 70%);
  animation:dn-vie-derive 18s ease-in-out infinite;will-change:transform}
/* boutons : ils se voient comme des boutons */
.dn-bouton,.dn-vie-bouton,.dn-ligne,.dn-lire,.dn-vie-carte,summary{cursor:pointer}
.dn-bouton,.dn-vie-bouton{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 3px 8px rgba(0,0,0,.18);
  transition:transform .15s var(--vie-courbe),box-shadow .15s,border-color .15s,filter .15s}
.dn-bouton:hover,.dn-vie-bouton:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 8px 18px color-mix(in srgb,var(--vie-c) 30%,transparent)}
.dn-bouton:active,.dn-vie-bouton:active,.dn-ligne:active,.dn-vie-carte:active{transform:translateY(1px) scale(.98)!important;filter:brightness(.95)}
.dn-plein,.dn-vie-plein{background:linear-gradient(145deg,color-mix(in srgb,#fff 18%,var(--dn-outil-bouton)),var(--dn-outil-bouton))!important;color:#fff;border-color:transparent;position:relative;overflow:hidden;
  box-shadow:0 8px 22px color-mix(in srgb,var(--vie-c) 35%,transparent)}
.dn-plein::after,.dn-vie-plein::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%) no-repeat;
  background-size:250% 100%;animation:dn-vie-reflet 5s ease-in-out infinite}
.dn-ligne{transition:background .15s,padding .15s}
.dn-ligne:hover{padding-inline-start:20px}
.dn-lire{box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .15s var(--vie-courbe)}
.dn-lire:hover{transform:scale(1.1)}
.dn-lire.dn-lit{animation:dn-vie-pouls 1.4s ease-in-out infinite}
/* cartes vivantes et icônes brillantes (styles réutilisables) */
.dn-vie-carte{border-radius:18px!important;border:1px solid var(--dn-ligne)!important;background:var(--dn-carte)!important;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(0,0,0,.10)!important;
  transition:transform .25s var(--vie-courbe),box-shadow .25s var(--vie-courbe),border-color .25s;animation:dn-vie-arrivee .5s var(--vie-courbe) both}
.dn-vie-carte:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--vie-c) 70%,transparent)!important;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 16px 36px color-mix(in srgb,var(--vie-c) 28%,transparent)!important}
.dn-vie-icone{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:1.35rem;
  background:linear-gradient(145deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,0) 60%),color-mix(in srgb,var(--vie-c) 70%,transparent);
  border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 16px color-mix(in srgb,var(--vie-c) 30%,transparent);transition:transform .25s var(--vie-courbe)}
.dn-vie-carte:hover .dn-vie-icone{transform:scale(1.08) rotate(-3deg)}
@media (min-width:621px){.dn-vie-carte,.dn-entete{background:color-mix(in srgb,var(--dn-carte) 58%,transparent)!important;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}}
@media (prefers-reduced-motion:reduce){
  body::after,.dn-plein::after,.dn-vie-plein::after,.dn-lire.dn-lit,.dn-vie-carte{animation:none!important}
  .dn-bouton,.dn-vie-bouton,.dn-ligne,.dn-lire,.dn-vie-carte,.dn-vie-icone{transition:none!important;transform:none!important}
}
/* une carte vivante garde toujours son état « choisi » visible (sélection, ouverture, copie) */
.dn-vie-carte[aria-pressed="true"],.dn-vie-carte[aria-expanded="true"],.dn-vie-carte[aria-selected="true"],.dn-vie-carte[open],
.dn-vie-carte.on,.dn-vie-carte.active,.dn-vie-carte.selected,.dn-vie-carte.open,.dn-vie-carte.copied,.dn-vie-carte.choisi{
  border-color:var(--vie-c)!important;background:color-mix(in srgb,var(--vie-c) 16%,var(--dn-carte))!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vie-c) 45%,transparent),0 14px 32px color-mix(in srgb,var(--vie-c) 22%,transparent)!important}
/* 19/10 (Phil) : le bandeau du haut se cache quand on descend dans la page, et revient dès qu'on remonte,
   qu'on approche la souris du haut de l'écran, ou qu'on y arrive au clavier. Tout en haut de la page, il est toujours là. */
.dn-entete{position:sticky!important;top:0!important;z-index:50!important;transition:transform .28s ease}   /* au-dessus de la barre « Partager » de la page, qui défile dessous */
.dn-entete.dn-entete-cache{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.dn-entete{transition:none}}
@media print{.dn-entete{position:static!important;transform:none!important}}
/* quand il flotte au-dessus du texte : fond plein, sinon on lit la page à travers (règle « jamais de fond transparent ») */
.dn-entete.dn-entete-flotte{background:var(--dn-carte)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
/* 19/10 (Phil) : la barre « Retour / Partager » reste visible quand le bandeau se cache : elle se colle en haut,
   juste sous le bandeau quand il est là, tout en haut quand il est caché. La ligne elle-même laisse passer les clics. */
.dn-nav{position:sticky!important;top:var(--dn-haut-entete,0px);z-index:49!important;transition:top .28s ease;pointer-events:none}
.dn-nav > *, .dn-nav a, .dn-nav button{pointer-events:auto}
.dn-nav.dn-nav-flotte .dn-bouton{background:var(--dn-carte)!important;box-shadow:0 4px 14px rgba(0,0,0,.22)}
@media (prefers-reduced-motion:reduce){.dn-nav{transition:none}}
@media print{.dn-nav{position:static!important}}

/* 29/10/2026 (Phil, essais sur iPhone et Android) : sur téléphone, un bandeau d'une seule ligne ; la phrase qui dit à quoi sert
   l'outil descend en tête de la page (.dn-phrase-page, posée par entete-commun.js) ; le bandeau et la ligne Retour se cachent
   ensemble dès qu'on descend, sur toutes les pages, accueil compris. Le fond et les reflets restent immobiles sur écran tactile. */
.dn-langue-court{display:contents}
.dn-langue-code,.dn-phrase-page{display:none}
@media (max-width:640px){
  .dn-entete-int{flex-wrap:nowrap;padding:6px 12px;gap:8px}
  .dn-marque{flex:1 1 auto;min-width:0;gap:8px}
  .dn-logo{width:26px;height:26px;border-radius:8px}
  .dn-titre{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dn-entete .dn-phrase{display:none}
  .dn-outils{width:auto;flex:none;gap:4px}
  .dn-entete .dn-bouton{min-height:40px;width:40px;padding:0;border-radius:10px}
  .dn-entete .dn-menu-bouton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* la langue : un code court (FR, EN…) ; la vraie liste reste dessous, invisible, et s'ouvre au toucher */
  .dn-langue-court{display:inline-flex;position:relative;flex:none;align-items:center;justify-content:center;
    min-width:44px;min-height:40px;padding:0 6px;border-radius:10px;border:1px solid var(--dn-ligne);background:var(--dn-carte);color:var(--dn-texte);font-weight:800;font-size:.9rem}
  .dn-langue-code{display:inline}
  .dn-langue-court .dn-langue{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;opacity:0;cursor:pointer}
  .dn-nav{padding:8px 12px 0}
  .dn-nav .dn-bouton{min-height:40px}
  .dn-phrase-page{display:block;max-width:var(--dn-largeur);margin:0 auto;padding:12px 16px 0;
    font-size:1rem;line-height:1.45;font-weight:600;color:var(--dn-texte)}
  .dn-nav{transition:top .28s ease,transform .28s ease}
  .dn-nav.dn-nav-cache{transform:translateY(calc(-100% - 12px))}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.dn-nav{transition:none}}
@media (hover:none) and (pointer:coarse){
  :root:not([data-dn-outil="accueil"]) body::after{animation:none!important;will-change:auto}
  .dn-plein::after,.dn-vie-plein::after{animation:none!important}
}
.dn-phrase-page[hidden]{display:none!important}

/* 29/10/2026 (Phil : « sur iPhone il faut toujours cliquer deux fois ») : sur un écran tactile, pas d'effet de survol
   (Safari prend sinon le premier toucher pour un survol) et pas d'attente du double toucher pour zoomer. */
:root{touch-action:manipulation}
@media (hover:none){
  .dn-bouton:hover,.dn-vie-bouton:hover,.dn-plein:hover,.dn-lire:hover,.dn-vie-carte:hover{transform:none;filter:none}
  .dn-vie-carte:hover .dn-vie-icone{transform:none}
  .dn-ligne:hover{padding-inline-start:16px}
}
/* 02/11/2026 (Phil) : à l'arrivée, le bouton ☰ clignote 6 fois en orange (une fois par seconde), puis redevient normal */
@keyframes dn-appel{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}45%,60%{background:#f97316;color:#fff;border-color:#f97316;box-shadow:0 0 0 6px rgba(249,115,22,.35)}}
.dn-bouton.dn-appel{animation:dn-appel 1s ease-in-out 6}
@media (prefers-reduced-motion:reduce){.dn-bouton.dn-appel{animation:none;outline:3px solid #f97316;outline-offset:2px}}
/* 02/11/2026 (Phil) : la phrase de bienvenue, en tête de chaque mode d'emploi */
.dn-bienvenue{font-weight:700;font-size:1.05em}

/* 02/11/2026 (Phil) : zones de texte qui grandissent, avec une poignée visible ; listes lisibles sur écran tactile */
/* 04/11/2026 (Phil) : pas d'actualisation en tirant la page vers le bas sur téléphone (elle pouvait remettre l'outil à zéro) */
/* 05/11/2026 : sur la page entière seulement ; posée aussi sur le corps de la page, elle arrêtait la molette sur ordinateur (Initiation) */
html{overscroll-behavior-y:none}
.dn-zt{position:relative;display:block}
.dn-zt:has(> textarea[hidden]),.dn-zt:has(> textarea[style*="display: none"]),.dn-zt:has(> textarea[style*="display:none"]){display:none}   /* 03/11 : une zone cachée par l'outil emporte sa poignée */
.dn-zt>textarea{resize:none;overflow-y:auto;padding-bottom:22px}
.dn-poignee{position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:7px;cursor:ns-resize;touch-action:none;
  background:var(--dn-carte,#fff) linear-gradient(135deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%,transparent 64%,currentColor 64%,currentColor 72%,transparent 72%);
  color:var(--dn-texte-2,#64748b);border:1px solid var(--dn-ligne,rgba(0,0,0,.2));opacity:.9}
.dn-poignee.dn-tire,.dn-poignee:hover{color:#f97316;border-color:#f97316;opacity:1}
@media (pointer:coarse){.dn-poignee{width:36px;height:36px;right:6px;bottom:6px;border-radius:10px}.dn-zt>textarea{padding-bottom:44px}}
.dn-liste-fond{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.dn-liste{width:100%;max-width:560px;max-height:72vh;overflow-y:auto;background:var(--dn-carte,#fff);color:var(--dn-texte,#111);
  border-radius:16px 16px 0 0;padding:8px 8px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.dn-liste-titre{margin:6px 10px 8px;font-size:.85rem;font-weight:700;color:var(--dn-texte-2,#64748b)}
.dn-liste-choix{display:block;width:100%;text-align:start;font:inherit;font-size:15px;font-weight:500;line-height:1.35;
  padding:12px 14px;margin:0;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.dn-liste-choix+.dn-liste-choix{border-top:1px solid var(--dn-ligne,rgba(0,0,0,.08))}
.dn-liste-choix[aria-selected="true"]{background:rgba(249,115,22,.14);color:inherit;font-weight:700}
.dn-liste-choix:disabled{opacity:.45}

/* 02/11/2026 (Phil) : version en pied de page, et fenêtre « Quoi de neuf » */
.dn-pied-version{text-align:center;margin:2.5rem 0 1.25rem;padding:0 1rem calc(.5rem + env(safe-area-inset-bottom,0px));font-size:.8rem}
.dn-pied-version button{background:none;border:0;padding:4px 6px;font:inherit;color:var(--dn-doux);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.dn-pied-version button:hover{color:var(--dn-texte)}
.dn-panneau-nv{max-width:560px}
.dn-nv-liste{list-style:none;margin:0 0 1.25rem;padding:0}
.dn-nv-liste li{margin:0 0 .85rem;line-height:1.55}