/* Masque de données personnelles. © 2026 Philippe Brasseim (DANA-ECOSYSTEME). Logiciel libre sous licence GNU GPL v3, sans aucune garantie : voir LICENCE-GPL-3.0.txt. */
/* ============ ANONYMISEUR DANA v4 , apparence epuree (facon Mac), violet DANA ============
   Un seul bouton principal (violet) par etape. Vert = zone privee (l'appareil),
   orange = zone publique (l'IA), toujours avec une icone et un mot, jamais la couleur seule.
   Aucun style en ligne (politique de securite) : tout est ici. */
:root{
  --fond:#f5f5f7; --carte:#ffffff; --surface:#f2f2f5; --texte:#1d1d1f; --texte-2:#56565c;
  --trait:rgba(0,0,0,.10); --trait-fort:rgba(0,0,0,.18);
  --accent:#6d28d9; --accent-texte:#5b21b6; --accent-doux:rgba(109,40,217,.10); --sur-accent:#ffffff;
  --prive:#17703a; --prive-fond:#e7f4ea; --prive-trait:#9fd3ae;
  --public:#a4480a; --public-fond:#fdf0e1; --public-trait:#f0bf8a;
  --danger:#b42318;
  --c-identite:#c4b5fd; --c-coord:#93c5fd; --c-ident:#6ee7b7; --c-date:#fcd34d; --c-suspect:#f9a8d4;
  --ombre:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07);
  --police:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px; --r-sm:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --fond:#000000; --carte:#1c1c1e; --surface:#2c2c2e; --texte:#f5f5f7; --texte-2:#aeaeb2;
    --trait:rgba(255,255,255,.12); --trait-fort:rgba(255,255,255,.22);
    --accent:#7c3aed; --accent-texte:#c4b5fd; --accent-doux:rgba(167,139,250,.16);
    --prive:#6ee7a0; --prive-fond:rgba(52,199,89,.13); --prive-trait:rgba(110,231,160,.45);
    --public:#ffb366; --public-fond:rgba(255,149,0,.13); --public-trait:rgba(255,179,102,.45);
    --danger:#ff8a80;
    --ombre:0 0 0 1px rgba(255,255,255,.08);
    color-scheme:dark;
  }
}
html[data-theme="dark"]{
  --fond:#000000; --carte:#1c1c1e; --surface:#2c2c2e; --texte:#f5f5f7; --texte-2:#aeaeb2;
  --trait:rgba(255,255,255,.12); --trait-fort:rgba(255,255,255,.22);
  --accent:#7c3aed; --accent-texte:#c4b5fd; --accent-doux:rgba(167,139,250,.16);
  --prive:#6ee7a0; --prive-fond:rgba(52,199,89,.13); --prive-trait:rgba(110,231,160,.45);
  --public:#ffb366; --public-fond:rgba(255,149,0,.13); --public-trait:rgba(255,179,102,.45);
  --danger:#ff8a80;
  --ombre:0 0 0 1px rgba(255,255,255,.08);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 12/10 (Phil) : sur telephone, glisser vers le bas ne recharge plus la page (le travail en cours serait efface) */
html,body{overscroll-behavior-y:none}
body{background:var(--fond);color:var(--texte);font-family:var(--police);font-size:1.0625rem;line-height:1.5;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ico{width:1.25em;height:1.25em;fill:currentColor;flex:0 0 auto}

/* ---------- barre du haut ---------- */

.outils{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.outil{background:var(--carte);border:1px solid var(--trait);color:var(--texte);height:40px;min-height:40px;border-radius:999px;
  padding:0 12px;font-family:var(--police);font-size:.88rem;font-weight:600}
.outil.rond{width:40px;padding:0;font-size:1rem;display:flex;align-items:center;justify-content:center}
.outil.rond .ico{width:20px;height:20px}
select.outil{max-width:128px;padding:0 10px}

/* ---------- mise en page ---------- */
.wrap{max-width:var(--dn-largeur,1000px);margin:0 auto;padding:16px 16px 24px}
.card{background:var(--carte);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--ombre);scroll-margin-top:96px}
.alerte{scroll-margin-top:96px}
.step{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.num{width:28px;height:28px;border-radius:50%;flex:0 0 auto;background:var(--accent-doux);color:var(--accent-texte);
  font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.step h2{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.aide{color:var(--texte-2);font-size:.95rem;margin:4px 0 14px}
.petit{color:var(--texte-2);font-size:.85rem;margin:8px 0 0}

/* ---------- boutons ---------- */
button{font-family:var(--police);font-size:1rem;font-weight:600;border-radius:var(--r-sm);border:1px solid transparent;
  padding:12px 18px;cursor:pointer;min-height:48px;color:var(--texte);background:none;
  -webkit-tap-highlight-color:transparent;transition:transform .08s,background .15s,opacity .15s}
button:active{transform:scale(.98)}
button:disabled{opacity:.4;cursor:not-allowed}
.b-main{background:var(--accent);color:var(--sur-accent)}
.b-main:hover{filter:brightness(1.08)}
.b-main.large{display:block;width:100%;margin-top:16px;font-size:1.05rem;min-height:52px}
.b-second{background:var(--surface);color:var(--texte)}
.b-second:hover{background:var(--trait)}
.lien{background:none;border:0;color:var(--accent-texte);padding:10px 6px;min-height:44px;font-weight:600;font-size:.95rem}
.lien:hover{text-decoration:underline}
.lien.danger{color:var(--danger)}
.liens{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:8px}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.row > button{flex:1 1 auto}

/* ---------- depot ---------- */
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.tuile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);color:var(--texte);font-size:.98rem;text-align:center;padding:14px 10px}
.tuile .ico{width:30px;height:30px;color:var(--accent-texte)}
.tuile:hover{border-color:var(--accent)}
.ocr-langue{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:-4px 0 14px;font-size:.88rem;color:var(--texte-2)}
.ocr-langue select{width:auto;min-height:40px;padding:6px 10px;font-size:.9rem}
#drop{border-radius:var(--r);transition:background .15s}
#drop.over{background:var(--accent-doux);outline:2px dashed var(--accent);outline-offset:4px}
label.champ{display:block;margin:12px 0 6px;font-size:.9rem;color:var(--texte-2);font-weight:600}
textarea{width:100%;background:var(--surface);color:var(--texte);border:1px solid var(--trait);border-radius:var(--r-sm);
  padding:14px;font-family:var(--police);font-size:1rem;line-height:1.55;resize:vertical;min-height:140px}
textarea.grand{min-height:280px;font-family:var(--mono);font-size:.88rem}
textarea.moyen{min-height:96px}
input[type=text],input[type=password],input[type=email],input[type=date],select{background:var(--surface);color:var(--texte);border:1px solid var(--trait);
  border-radius:var(--r-sm);padding:11px 13px;font-family:var(--police);font-size:1rem;min-height:48px;width:100%}
textarea:focus,input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-doux)}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.encart{background:var(--surface);border-radius:var(--r-sm);padding:4px 14px 14px;margin-top:12px}

/* ---------- infographie : zone privee / zone publique ---------- */
.schema{margin:0 0 16px;background:var(--carte);border-radius:var(--r);padding:14px 14px 10px;box-shadow:var(--ombre)}
.schema-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:1rem;margin:0 0 10px}
.schema-tete .lien{font-size:.85rem;padding:6px 4px;min-height:36px;font-weight:600}
.piste{position:relative;display:flex;height:128px;border-radius:12px;overflow:hidden}
.zone{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px}
.zone.prive{flex:0 0 60%;background:var(--prive-fond);border:2px solid var(--prive-trait);border-inline-end:0;border-start-start-radius:12px;border-end-start-radius:12px}
.zone.public{flex:1 1 auto;background:var(--public-fond);border:2px dashed var(--public-trait);border-inline-start:0;border-start-end-radius:12px;border-end-end-radius:12px;align-items:flex-end}
.frontiere{position:absolute;top:0;bottom:0;inset-inline-start:60%;width:0;border-inline-start:3px solid var(--texte-2);opacity:.35}
.zone-nom{display:flex;align-items:flex-start;gap:5px;font-size:.8rem;line-height:1.2}
.zone-nom b{display:block;font-weight:800}
.zone-nom small{display:block;font-size:.72rem;font-weight:500;opacity:.9}
.public .zone-nom{text-align:end}
.prive .zone-nom,.coffre{color:var(--prive)}
.public .zone-nom,.ia-bulle{color:var(--public)}
.coffre{display:flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;opacity:.9}
.coffre .ico{width:1em;height:1em}
.ia-bulle{font-size:.8rem;font-weight:800;border:2px solid var(--public-trait);border-radius:999px;padding:2px 10px;background:var(--carte)}
.paquet{position:absolute;top:46px;inset-inline-start:23%;width:min(128px,38%);margin-inline-start:max(-64px,-19%);height:40px;
  display:flex;align-items:center;gap:5px;padding:0 8px;background:var(--carte);border:1px solid var(--trait-fort);border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);font-size:.74rem;font-weight:700;overflow:hidden}
.paquet .doc{color:var(--texte-2);width:18px;height:18px}
.paquet .nom{position:absolute;inset-inline-start:30px;inset-inline-end:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paquet .vrai{color:var(--prive)}
.paquet .repere{color:var(--accent-texte);font-family:var(--mono);opacity:0}
.paquet .engrenage{position:absolute;top:-2px;inset-inline-end:-2px;width:12px;height:12px;border-radius:50%;
  border:3px dotted var(--texte-2);opacity:0}
.temps{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:10px 0 0;padding:0}
.temps li{counter-increment:t;font-size:.74rem;line-height:1.25;color:var(--texte-2);text-align:center;padding:6px 2px;border-radius:8px}
.temps li::before{content:counter(t);display:block;margin:0 auto 3px;width:20px;height:20px;line-height:20px;border-radius:50%;
  background:var(--surface);font-weight:700;font-size:.72rem}
.temps .t3,.temps .t4{color:var(--public)}
.temps .t1,.temps .t2,.temps .t5,.temps .t6{color:var(--prive)}

/* 15 s, 6 temps de 2,5 s (07/10, Phil : le temps « copier la reponse et la coller ici » ajoute) */
.paquet{animation:trajet 15s ease-in-out infinite}
.paquet .vrai{animation:vrai 15s linear infinite}
.paquet .repere{animation:repere 15s linear infinite}
.paquet .engrenage{animation:moulin 15s linear infinite}
.ia-bulle{animation:bulle 15s ease-in-out infinite}
.temps li{animation:actif 15s linear infinite}
.temps .t2{animation-delay:2.5s} .temps .t3{animation-delay:5s} .temps .t4{animation-delay:7.5s} .temps .t5{animation-delay:10s} .temps .t6{animation-delay:12.5s}
.schema.pause *{animation-play-state:paused !important}
@keyframes trajet{
  0%{inset-inline-start:23%;opacity:0} 4%{opacity:1}
  17%{inset-inline-start:23%} 22%{inset-inline-start:38%} 36%{inset-inline-start:38%}
  48%{inset-inline-start:80%} 68%{inset-inline-start:80%}
  80%{inset-inline-start:38%} 96%{inset-inline-start:38%;opacity:1} 100%{inset-inline-start:38%;opacity:0}
}
@keyframes vrai{0%,22%{opacity:1} 26%,84%{opacity:0} 88%,100%{opacity:1}}
@keyframes repere{0%,22%{opacity:0} 26%,84%{opacity:1} 88%,100%{opacity:0}}
@keyframes moulin{0%,17%{opacity:0;transform:rotate(0)} 19%{opacity:1} 31%{opacity:1;transform:rotate(360deg)} 33%,100%{opacity:0}}
@keyframes bulle{0%,52%{transform:scale(1)} 58%{transform:scale(1.12)} 64%,100%{transform:scale(1)}}
@keyframes actif{0%,16%{background:var(--accent-doux);color:var(--texte)} 16.7%,100%{background:transparent}}

/* ---------- analyse ---------- */
#stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.stat{background:var(--surface);border-radius:var(--r-sm);padding:8px 12px;font-size:.82rem;color:var(--texte-2)}
.stat b{display:block;font-size:1.25rem;line-height:1.2;color:var(--texte)}
.legende{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px;font-size:.8rem;color:var(--texte-2)}
.legende span{display:flex;align-items:center;gap:5px}
.legende i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legende .identite{background:var(--c-identite);border-bottom:3px solid var(--texte)} .legende .coord{background:var(--c-coord);border-bottom:3px dashed var(--texte)}
.legende .ident{background:var(--c-ident);border-bottom:3px dotted var(--texte)} .legende .date{background:var(--c-date);border-bottom:4px double var(--texte)}
.texte{background:var(--surface);border-radius:var(--r-sm);padding:14px;font-family:var(--police);font-size:1rem;line-height:1.8;
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow-y:auto;tab-size:4}
mark{border-radius:4px;padding:1px 3px;color:#111;font-weight:600;cursor:pointer}
mark.identite{background:var(--c-identite);border-bottom:3px solid #111} mark.coord{background:var(--c-coord);border-bottom:3px dashed #111}
mark.ident{background:var(--c-ident);border-bottom:3px dotted #111} mark.date{background:var(--c-date);border-bottom:4px double #111}
mark:hover{outline:2px solid var(--texte)}
.liste-donnees{list-style:none;padding:0;margin:8px 0 0}
.liste-donnees li{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0;border-bottom:1px solid var(--trait)}
.liste-donnees .val{font-family:var(--mono);flex:1 1 160px;overflow-wrap:anywhere}
.liste-donnees .cat{font-size:.8rem;color:var(--texte-2)}
.liste-donnees button{min-height:44px;padding:8px 12px;font-size:.85rem}

.sus{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border-radius:var(--r-sm);padding:12px;margin-bottom:10px}
.sus .mot{font-family:var(--mono);font-size:.95rem;font-weight:700;flex:1 1 140px;overflow-wrap:anywhere}
.sus .mot small{display:block;font-family:var(--police);color:var(--texte-2);font-size:.78rem;font-weight:400}
.sus button{padding:8px 12px;font-size:.88rem;min-height:44px}
.contexte{color:var(--texte-2);font-size:.85rem;flex:1 1 100%;overflow-wrap:anywhere}

/* ---------- traitements ---------- */
.famille{margin:20px 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-2)}
.op{display:block;width:100%;text-align:start;background:var(--surface);border:2px solid transparent;border-radius:var(--r-sm);
  padding:13px 14px;margin-bottom:8px;min-height:0}
.op:hover{border-color:var(--trait-fort)}
.op[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-doux)}
.op .t{display:block;font-weight:700;font-size:1rem}
.op .s{display:block;color:var(--texte-2);font-size:.88rem;font-weight:400;margin-top:2px}
.options-op{background:var(--surface);border-radius:var(--r-sm);padding:2px 14px 14px;margin:-4px 0 12px}

/* 03/10 : avancement par-dessus la zone de texte, bien visible, avec une animation de scanner */
.zone-src{position:relative}
/* 03/10 : guide de l'icone « copier » et zone de retour mise en avant */
.guide-copier{display:flex;align-items:center;gap:14px;margin:12px 0 4px;padding:12px 14px;border:2px dashed var(--accent);border-radius:var(--r-sm);background:var(--accent-doux)}
.guide-copier p{margin:0;font-size:1rem;color:var(--texte)}
.icone-copier{flex:0 0 52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--carte);border:1px solid var(--trait-fort);box-shadow:var(--ombre)}
.icone-copier .ico{width:30px;height:30px;fill:var(--texte)}
#carte-restauration #reponse{border:2px solid var(--accent)}
.a-coller{animation:aColler 1s ease-in-out 4}
@keyframes aColler{0%,100%{box-shadow:0 0 0 0 var(--accent-doux)}50%{box-shadow:0 0 0 10px var(--accent-doux)}}
@media (prefers-reduced-motion:reduce){.a-coller{animation:none;outline:3px solid var(--accent);outline-offset:3px}}
.type-doc{margin:4px 0 14px}.type-doc select{max-width:100%}
.zone-src.lecture textarea{min-height:230px}
#avancement{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:16px;background:var(--carte);border:2px solid var(--accent);border-radius:var(--r-sm);z-index:2;text-align:center}
#avancement[hidden]{display:none}
#avancement #barre{width:min(320px,85%);height:10px}
#avancement p{font-size:1rem;font-weight:600;color:var(--texte)}
.scan{position:relative;width:64px;height:80px}
.feuille{position:absolute;inset:0;background:var(--surface);border:2px solid var(--trait-fort);border-radius:6px;padding:12px 10px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.feuille i{display:block;height:4px;border-radius:2px;background:var(--c-identite);animation:ligneLue 1.6s ease-in-out infinite}
.feuille i:nth-child(2){width:80%;background:var(--c-coord);animation-delay:.2s}
.feuille i:nth-child(3){width:92%;background:var(--c-ident);animation-delay:.4s}
.feuille i:nth-child(4){width:70%;background:var(--c-date);animation-delay:.6s}
.feuille i:nth-child(5){width:85%;animation-delay:.8s}
.rayon{position:absolute;left:-8px;right:-8px;height:4px;top:0;border-radius:4px;background:var(--accent);box-shadow:0 0 14px 4px var(--accent-doux);animation:balayage 1.6s ease-in-out infinite alternate}
@keyframes balayage{from{top:4px}to{top:72px}}
@keyframes ligneLue{0%,100%{opacity:.35;transform:scaleX(.6);transform-origin:left}50%{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.rayon,.feuille i{animation:none}.rayon{top:38px}}
#barre{height:6px;background:var(--surface);border-radius:99px;overflow:hidden}
#barre span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
#avancement p{margin:0}

.note{background:var(--public-fond);border-radius:var(--r-sm);padding:12px 14px;font-size:.92rem;color:var(--texte);margin-top:12px}
.note.ok{background:var(--prive-fond)}
.alerte{background:var(--public-fond);border:1px solid var(--public-trait);border-radius:var(--r-sm);padding:12px 14px;font-size:.95rem;margin-top:12px}
.alerte p{margin:0 0 6px}
/* 12/10 (Phil) : une decision attend avant l'envoi, le cadre devient rouge et clignote */
.alerte.a-decider{border:2px solid var(--danger);box-shadow:0 0 0 0 var(--danger)}
.alerte.clignote{animation:decider .7s ease-in-out 4}
@keyframes decider{0%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--danger)}50%{box-shadow:0 0 0 6px var(--danger);border-color:transparent}}
@media (prefers-reduced-motion:reduce){.alerte.clignote{animation:none;outline:3px solid var(--danger);outline-offset:3px}}
.fenetre-boite.decision-boite{border:2px solid var(--danger)}

details{border-top:1px solid var(--trait);padding:12px 2px 2px;margin-top:14px}
details summary{cursor:pointer;font-size:.95rem;font-weight:600;color:var(--accent-texte);min-height:32px;display:list-item}
details[open] summary{margin-bottom:8px}
details ul{margin:6px 0 0;padding-inline-start:20px;font-size:.92rem;color:var(--texte-2)}
details li{margin-bottom:6px}

/* ---------- barre d'etapes en bas ---------- */
nav.bas{position:fixed;left:0;right:0;bottom:0;z-index:65;background:color-mix(in srgb,var(--carte) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:1px solid var(--trait);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
nav.bas .onglets{display:flex;max-width:880px;margin:0 auto}
nav.bas button{flex:1;min-width:0;background:transparent;border:0;color:var(--texte-2);display:flex;flex-direction:column;align-items:center;
  gap:3px;font-size:.72rem;font-weight:600;padding:6px 2px;min-height:56px;position:relative;overflow-wrap:anywhere;border-radius:10px}
nav.bas .ico{width:24px;height:24px}
nav.bas button[aria-selected="true"]{color:var(--accent-texte)}
nav.bas .pastille{position:absolute;top:2px;inset-inline-end:calc(50% - 22px);background:var(--c-suspect);color:#111;font-size:.68rem;
  font-weight:800;border-radius:99px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px}

.vue{display:none}
.vue.active{display:block}

/* message bref : en haut, pour ne jamais cacher un bouton */
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,40px);background:var(--texte);color:var(--fond);
  padding:11px 18px;border-radius:14px;font-size:.92rem;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;
  pointer-events:none;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.2);width:max-content;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* Hugo 10/10 : message avec bouton « Recacher » : on peut appuyer dessus */
#toast.avec-action{pointer-events:auto}
.toast-action{margin-inline-start:10px;background:var(--fond);color:var(--texte);border:0;border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;cursor:pointer;min-height:36px}

footer{margin-top:8px;padding:0 4px;color:var(--texte-2);font-size:.88rem;line-height:1.6;text-align:center}
footer details{text-align:start;border-top:0}
footer summary{text-align:center}

.champ-code{display:flex;gap:8px}
.champ-code input{flex:1}
.champ-code button{flex:0 0 auto}
.code-session{font-family:var(--mono);font-size:1.25rem;font-weight:700;letter-spacing:.06em;overflow-wrap:anywhere;
  background:var(--carte);border-radius:var(--r-sm);padding:10px 12px;margin:8px 0;user-select:all}
.code-saisie{font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
label.coche{display:flex;align-items:center;gap:10px;margin-top:10px;font-weight:600;cursor:pointer}
label.coche input{width:22px;height:22px;flex:0 0 auto}
#impression,#impression-tete{display:none}
.saut{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:#fff;padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.saut:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.texte-grand{font-size:112.5%} html.texte-tres-grand{font-size:125%}

@media (max-width:520px){
  
  .card{padding:16px}
  .step h2{font-size:1.18rem}
  .piste{height:128px}
  select.outil{max-width:92px}
  .outil{height:36px;min-height:36px}
  .outil.rond{width:36px}
  .temps li{font-size:.68rem}
}
@media (forced-colors: active){
  mark{forced-color-adjust:none;background:Mark;color:MarkText;border:1px solid CanvasText}
  .op[aria-pressed="true"],nav.bas button[aria-selected="true"]{outline:3px solid Highlight}
  #barre span{background:Highlight}
}
/* mouvement reduit : pas d'animation, le schema devient une image fixe (etape 2 affichee) */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .paquet{inset-inline-start:38%}
  .paquet .vrai{opacity:0} .paquet .repere{opacity:1}
  #btnAnim{display:none}
}
@media print{
  body{background:#fff;color:#000;padding:0}
  .wrap,.barre-haut,nav.bas,#toast{display:none !important}
  /* 26/10 (Phil : « en PDF le haut de page est en trop ») : l'en-tête commun, la barre Retour/Partager/Accueil, le menu et le fond */
  .dn-entete,.dn-nav,.dn-menu-fond,#eco-reseau,.eco-fond,#bandeau-maj{display:none !important}
  /* 26/10 (Phil : « le PDF n'est pas fun, il est imbuvable ») : la même mise en forme que la lecture, en couleurs claires pour le papier */
  #impression{display:block;font:11pt/1.55 -apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:#1d1d1f;
    --carte:#fff;--surface:#f4f4f7;--texte:#1d1d1f;--texte-2:#55555c;--trait:rgba(0,0,0,.14);--accent:#6d28d9;--accent-texte:#5b21b6;--accent-2:#0072b2;--alerte:#d55e00;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #impression{border:0;padding:0;font-size:11pt;line-height:1.55}
  #impression p,#impression ul,#impression ol{margin:0 0 7pt}
  #impression blockquote{padding-left:10pt;border-left:2pt solid #999}
  #impression .titre-partie{font-size:13pt;margin:14pt 0 6pt;break-after:avoid;page-break-after:avoid}
  #impression li.li-long,#impression .kpi,#impression q.cit,#impression .fiche,#impression .g-fig,#impression li.li-faire{break-inside:avoid;page-break-inside:avoid}
  #impression .kpis{grid-template-columns:repeat(4,1fr)}
  #impression .kpi{box-shadow:none}
  #impression .kpi-val{font-size:16pt}
  :root,html{color-scheme:light !important}
  html,body{background:#fff !important;background-image:none !important}
  body::before,body::after,html::before,html::after{display:none !important}
  #impression-tete{display:block;direction:ltr;font:800 15pt/1.2 -apple-system,"Segoe UI",Roboto,sans-serif;color:#1d1d1f;padding:0 0 8pt;margin:0 0 14pt;border-bottom:3pt solid #6d28d9;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #impression-tete .mask{color:#5b21b6}
  @page{margin:16mm 14mm}
  [dir=rtl] #impression-tete{text-align:right}
}
.tuile:only-child{grid-column:1 / -1}

/* ---------- fiche « Mes donnees » ---------- */
.fiche-etat{display:flex;align-items:center;gap:10px;background:var(--prive-fond);border-radius:var(--r-sm);padding:10px 12px;margin:0 0 14px}
.fiche-etat .ico{color:var(--prive);width:24px;height:24px}
.fiche-etat p{flex:1 1 auto;margin:0;font-size:.9rem;line-height:1.35}
.fiche-etat button{flex:0 0 auto;min-height:40px;padding:8px 14px;font-size:.9rem;background:var(--carte)}
.b-second.large-second{display:block;width:100%;margin-top:10px}
.lien.retour{padding-inline-start:0;margin:-6px 0 6px}
.personne{background:var(--surface);border-radius:var(--r-sm);padding:4px 14px 14px;margin:12px 0}
.personne-tete{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:10px}
.personne-tete h3{margin:0;font-size:1.05rem}
.personne-tete select{width:auto;min-height:40px}
.personne input{background:var(--carte)}
.champ-sensible{display:flex;gap:8px}
.champ-sensible input{flex:1}
.champ-sensible button{flex:0 0 auto;min-height:44px;padding:8px 12px;font-size:.85rem;background:var(--carte)}
.liste-donnees .etiq{font-size:.8rem;color:var(--texte-2);flex:1 1 100%}
.liste-donnees .val{unicode-bidi:isolate}
#ficheControleListe .val,#ficheCopierListe .val{direction:ltr;unicode-bidi:isolate;text-align:start}

/* ================= pages « Decouvrir » et « Mode d'emploi » ================= */
body[data-titre]{padding-bottom:24px}
.page .card h2{margin:0 0 10px;font-size:1.3rem;letter-spacing:-.015em}
.page .card p{margin:0 0 10px;line-height:1.6}
.hero{text-align:center;padding:28px 8px 20px}
.accroche{font-size:clamp(1.6rem,5.5vw,2.4rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 14px;font-weight:800}
.accroche.petite{font-size:1.3rem;margin-bottom:6px}
.sous-accroche{font-size:1.08rem;color:var(--texte-2);max-width:640px;margin:0 auto 14px;line-height:1.55}
.badges{display:inline-block;background:var(--prive-fond);color:var(--prive);font-weight:700;font-size:.88rem;border-radius:999px;padding:8px 14px;margin:0 0 18px}
.appel{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lien-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.fin{text-align:center}
.pied-page{max-width:880px;margin:10px auto 0;padding:0 16px 24px;text-align:center;color:var(--texte-2);font-size:.88rem}
.pied-page a{color:var(--accent-texte)}
.pied-page .petit{text-align:start;max-width:720px;margin:10px auto 0}
.prive-carte{border-inline-start:5px solid var(--prive-trait)}
.public-carte{border-inline-start:5px solid var(--public-trait)}
.grille-cas{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.grille-cas li{background:var(--surface);border-radius:var(--r-sm);padding:12px 14px;line-height:1.45}
.grille-cas b{display:block;margin-bottom:4px}
.grille-cas span{color:var(--texte-2);font-size:.95rem}
.numerotee{counter-reset:n}
.numerotee li{counter-increment:n}
.numerotee b::before{content:counter(n) ". ";color:var(--accent-texte)}
.sommaire ol{margin:0;padding-inline-start:20px;line-height:2}
.sommaire a,.liste-ops a{color:var(--accent-texte)}
.liste-ops{margin:6px 0 12px;padding-inline-start:20px;line-height:1.5}
.liste-ops li{margin-bottom:6px}
.page details p{margin:6px 0 4px}

/* infographie « Tout ce que vous pouvez faire » : 12 usages visibles, allumes a tour de role (24 s) */
.info{margin:0 0 16px;background:var(--carte);border-radius:var(--r);padding:18px 16px;box-shadow:var(--ombre)}
.info h2{margin:0 0 4px;font-size:1.3rem}
.info-grille{display:grid;grid-template-columns:minmax(150px,1fr) 150px minmax(0,2.6fr);gap:16px;align-items:center;margin-top:10px}
.info-etiq{margin:0 0 8px;font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-2)}
.entrees{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.entrees li{display:flex;align-items:center;gap:8px;background:var(--prive-fond);color:var(--prive);border-radius:10px;padding:9px 12px;font-weight:700;font-size:.92rem}
.info-docs{margin:10px 0 0;font-size:.82rem;color:var(--texte-2);line-height:1.5}
.info-coeur{position:relative;display:flex;align-items:center;justify-content:center;min-height:150px}
.bouclier{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:140px;padding:16px 10px;
  border-radius:24px;background:var(--prive-fond);border:2px solid var(--prive-trait);color:var(--prive)}
.bouclier .ico{width:34px;height:34px}
.bouclier b{font-size:.95rem}
.bouclier small{font-size:.76rem;line-height:1.3}
.onde{position:absolute;width:140px;height:140px;border-radius:50%;border:2px solid var(--prive-trait);animation:onde 3s ease-out infinite;opacity:0}
.onde.o2{animation-delay:1.5s}
@keyframes onde{0%{transform:scale(.8);opacity:.9} 100%{transform:scale(1.5);opacity:0}}
.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cap{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:2px solid transparent;border-radius:12px;padding:10px 10px 10px 40px;
  min-height:64px;animation:cap 24s linear infinite}
.cap .ico{position:absolute;inset-inline-start:10px;top:11px;width:22px;height:22px;color:var(--accent-texte)}
[dir="rtl"] .cap{padding:10px 40px 10px 10px}
.cap-t{font-weight:800;font-size:.9rem;line-height:1.25}
.cap-ex{font-size:.8rem;color:var(--texte-2);line-height:1.3}
.cap::after{content:"";position:absolute;top:50%;inset-inline-start:-7px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--prive);opacity:0;animation:point 24s linear infinite}
.cap:nth-child(2),.cap:nth-child(2)::after{animation-delay:2s} .cap:nth-child(3),.cap:nth-child(3)::after{animation-delay:4s}
.cap:nth-child(4),.cap:nth-child(4)::after{animation-delay:6s} .cap:nth-child(5),.cap:nth-child(5)::after{animation-delay:8s}
.cap:nth-child(6),.cap:nth-child(6)::after{animation-delay:10s} .cap:nth-child(7),.cap:nth-child(7)::after{animation-delay:12s}
.cap:nth-child(8),.cap:nth-child(8)::after{animation-delay:14s} .cap:nth-child(9),.cap:nth-child(9)::after{animation-delay:16s}
.cap:nth-child(10),.cap:nth-child(10)::after{animation-delay:18s} .cap:nth-child(11),.cap:nth-child(11)::after{animation-delay:20s}
.cap:nth-child(12),.cap:nth-child(12)::after{animation-delay:22s}
@keyframes cap{0%,7.5%{border-color:var(--accent);background:var(--accent-doux);transform:scale(1.03)} 9%,100%{border-color:transparent;background:var(--surface);transform:none}}
@keyframes point{0%{opacity:1;transform:translateX(-18px)} 4%{opacity:1;transform:none} 8%,100%{opacity:0}}
[dir="rtl"] .cap::after{animation-name:point-rtl}
@keyframes point-rtl{0%{opacity:1;transform:translateX(18px)} 4%{opacity:1;transform:none} 8%,100%{opacity:0}}
.info-retour{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;color:var(--prive);font-weight:700;text-align:center}
.info.pause *{animation-play-state:paused !important}
@media (max-width:760px){
  .info-grille{grid-template-columns:1fr;gap:12px}
  .entrees{grid-template-columns:repeat(3,minmax(0,1fr))}
  .entrees li{flex-direction:column;text-align:center;font-size:.82rem;padding:8px 4px}
  .info-coeur{min-height:130px}
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap::after{display:none}
}
@media (prefers-reduced-motion: reduce){ .cap{transform:none !important} .onde{display:none} }

/* ---- correctifs Lea 29/09 : flux visible, zone publique orange, anneau sans debordement, 360 px, arabe, lisibilite ---- */
.info-grille{align-items:stretch}
.info-entree,.info-sortie{align-self:start}
.info-sortie{background:var(--public-fond);border:2px dashed var(--public-trait);border-radius:16px;padding:12px}
.info-sortie .info-etiq{color:var(--public)}
.info-public{margin:-2px 0 10px;font-size:.85rem;color:var(--public);font-weight:600}
.cap{background:var(--carte);padding-inline:40px 10px}
[dir="rtl"] .cap{padding:10px;padding-inline:40px 10px}
.cap .ico{color:var(--public)}
.cap-t,.cap-ex{overflow-wrap:anywhere;hyphens:auto}
.cap-ex{font-size:.875rem}
.info-etiq{font-size:.8125rem}
.info-coeur{overflow:hidden;min-height:160px}
.info-coeur::before,.info-coeur::after{content:"\2192";position:absolute;top:50%;translate:0 -50%;font-size:1.6rem;font-weight:800;color:var(--texte-2);z-index:2}
.info-coeur::before{inset-inline-start:-6px}.info-coeur::after{inset-inline-end:-6px}
[dir="rtl"] .info-coeur::before,[dir="rtl"] .info-coeur::after{content:"\2190"}
.cap::after{display:none}
@keyframes cap{0%,7.5%{box-shadow:0 0 0 3px var(--accent);background:var(--accent-doux)} 9%,100%{box-shadow:none;background:var(--carte)}}
.info-retour .fleche-retour{font-size:1.3rem}
.info .appel{margin-top:14px}
:lang(ar) .info-etiq,:lang(hi) .info-etiq,:lang(th) .info-etiq{letter-spacing:0;text-transform:none}
:lang(ar) .famille,:lang(hi) .famille,:lang(th) .famille{letter-spacing:0;text-transform:none}
@media (max-width:760px){ .info-coeur::before,.info-coeur::after{content:"\2193";top:auto;translate:none;inset-inline-start:50%} .info-coeur::before{top:2px} .info-coeur::after{bottom:2px} }
@media (max-width:400px){ .caps{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
  .cap{animation:none;box-shadow:none} .onde{display:none}
  .cap:first-child{box-shadow:0 0 0 3px var(--accent);background:var(--accent-doux)}
}
@media (max-width:760px){ [dir="rtl"] .info-coeur::before,[dir="rtl"] .info-coeur::after{content:"\2193"} }

/* ---------- camera dans la page ---------- */
.camera{position:fixed;inset:0;z-index:200;background:#000;color:#fff;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom))}
.camera-tete h2{margin:0;font-size:1.1rem}
.camera-tete p{margin:4px 0 8px;font-size:.88rem;color:#d4d4d8;line-height:1.4}
.camera video{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;background:#111;border-radius:12px}
.camera-erreur{background:#3f1d1d;color:#fecaca;border-radius:10px;padding:10px 12px;margin:10px 0 0;font-size:.92rem}
.camera-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.camera-bas .b-second{background:#27272a;color:#fff;flex:1 1 0;font-size:.9rem;padding:10px 8px}
.declencheur{width:74px;height:74px;min-height:74px;flex:0 0 auto;border-radius:50%;border:4px solid #fff;background:transparent;padding:5px}
.declencheur span{display:block;width:100%;height:100%;border-radius:50%;background:#fff}
.declencheur:disabled{opacity:.35}
html.camera-ouverte body{overflow:hidden}

/* ---------- etape 3 : familles qui s'ouvrent au clic ---------- */
.famille-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--carte);border:1px solid var(--trait-fort);
  border-radius:var(--r-sm);padding:14px 16px;margin:10px 0 0;font-size:1.02rem;font-weight:700;color:var(--texte)}
.famille-btn[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-doux)}
.famille-nb{margin-inline-start:auto;min-width:26px;height:26px;border-radius:99px;background:var(--surface);color:var(--texte-2);
  font-size:.82rem;display:flex;align-items:center;justify-content:center;padding:0 8px}
.chevron{width:10px;height:10px;border-inline-end:2.5px solid var(--texte-2);border-bottom:2.5px solid var(--texte-2);transform:rotate(45deg);margin:-4px 4px 0}
.famille-btn[aria-expanded="true"] .chevron{transform:rotate(225deg);margin-top:4px}
.famille-corps{padding:10px 0 2px}

/* ---------- histoire en 4 etapes (page Decouvrir) : un exemple suivi du debut a la fin, image du masque ---------- */
.histoire{background:var(--carte);border-radius:var(--r);padding:18px 16px;margin:0 0 16px;box-shadow:var(--ombre)}
.hist-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hist-tete h2{margin:0;font-size:1.3rem}
.etapes-hist{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.he{position:relative;border-radius:14px;padding:12px 14px;border:2px solid transparent;animation:he 12s linear infinite}
.he.prive{background:var(--prive-fond);border-color:var(--prive-trait)}
.he.public{background:var(--public-fond);border:2px dashed var(--public-trait)}
.he + .he::before{content:"\2193";position:absolute;top:-25px;inset-inline-start:50%;margin-inline-start:-8px;font-size:1.3rem;font-weight:800;color:var(--texte-2)}
.he-tete{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.he-num{width:30px;height:30px;border-radius:50%;background:var(--carte);font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.he-lieu{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.prive .he-lieu,.prive .he-num{color:var(--prive)}
.public .he-lieu,.public .he-num{color:var(--public)}
:lang(ar) .he-lieu,:lang(hi) .he-lieu,:lang(th) .he-lieu{text-transform:none;letter-spacing:0}
.he-corps{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:center}
.he h3{margin:0 0 4px;font-size:1.1rem}
.he p{margin:0;line-height:1.5}
.mini{display:flex;align-items:center;gap:10px;background:var(--carte);border-radius:10px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08);min-height:64px}
.mini .ico{width:26px;height:26px;color:var(--texte-2);flex:0 0 auto}
.mini .masque{width:34px;height:34px;color:var(--accent-texte)}
.ml{display:grid;font-size:.9rem;line-height:1.4;min-width:0}
.ml b{font-weight:700}
.bascule{display:grid}
.bascule > span{grid-area:1/1;display:flex;flex-direction:column}
.he2 .av{animation:he2av 12s linear infinite} .he2 .ap{animation:he2ap 12s linear infinite;color:var(--accent-texte);font-family:var(--mono)}
.he4 .av{animation:he4av 12s linear infinite;font-family:var(--mono);color:var(--accent-texte)} .he4 .ap{animation:he4ap 12s linear infinite;font-weight:700;color:var(--prive)}
@keyframes he2av{0%,33%{opacity:1} 38%,100%{opacity:0}}
@keyframes he2ap{0%,33%{opacity:0} 38%,100%{opacity:1}}
@keyframes he4av{0%,83%{opacity:1} 88%,100%{opacity:0}}
@keyframes he4ap{0%,83%{opacity:0} 88%,100%{opacity:1}}
.he2{animation-delay:3s} .he3{animation-delay:6s} .he4{animation-delay:9s}
@keyframes he{0%,24%{box-shadow:0 0 0 3px var(--accent)} 25%,100%{box-shadow:none}}
.he-chips{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}
.he-chips li{background:var(--carte);border-radius:10px;padding:8px 10px;font-size:.9rem;line-height:1.35}
.he-chips li span{color:var(--texte-2)}
.histoire.pause *{animation-play-state:paused !important}
@media (max-width:560px){ .he-corps{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
  .he{animation:none} .he2 .av,.he4 .av{animation:none;opacity:0} .he2 .ap,.he4 .ap{animation:none;opacity:1}
}
.tuile-petit{display:block;font-size:.78rem;font-weight:500;color:var(--texte-2);margin-top:-4px}
.he-formats{margin:10px 0 0;font-size:.88rem;color:var(--prive);font-weight:600;line-height:1.45}

/* « Voir un exemple » mis en avant */
.exemple-encart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--accent-doux);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 12px}
.exemple-encart p{flex:1 1 200px;margin:0;font-size:.92rem;line-height:1.4}
.exemple-encart button{flex:0 0 auto;background:var(--carte);color:var(--accent-texte);border:1px solid var(--accent);min-height:44px}
.exemple-note{text-align:center;color:var(--texte-2);font-size:.9rem;margin:10px auto 0;max-width:560px}

/* histoire en 5 etapes (15 s, 3 s par etape) : remplace les reglages a 4 etapes */
.he{animation-duration:15s}
.he2{animation-delay:3s} .he3{animation-delay:6s} .he4{animation-delay:9s} .he5{animation-delay:12s}
@keyframes he{0%,19%{box-shadow:0 0 0 3px var(--accent)} 20%,100%{box-shadow:none}}
.he2 .av{animation:he2av 15s linear infinite} .he2 .ap{animation:he2ap 15s linear infinite}
@keyframes he2av{0%,28%{opacity:1} 32%,100%{opacity:0}}
@keyframes he2ap{0%,28%{opacity:0} 32%,100%{opacity:1}}
.he4 .av,.he4 .ap{animation:none}
.he4 .ml{font-family:var(--mono);color:var(--accent-texte)}
.he5 .av{animation:he5av 15s linear infinite;font-family:var(--mono);color:var(--accent-texte)} .he5 .ap{animation:he5ap 15s linear infinite;font-weight:700;color:var(--prive)}
@keyframes he5av{0%,88%{opacity:1} 92%,100%{opacity:0}}
@keyframes he5ap{0%,88%{opacity:0} 92%,100%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .he5 .av{animation:none;opacity:0} .he5 .ap{animation:none;opacity:1} }

/* ---------- bloc « Votre securite » ---------- */
.securite{border-top:5px solid var(--prive-trait)}
.sec-grille{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sec-carte{position:relative;background:var(--prive-fond);border-radius:12px;padding:14px 14px 12px 50px}
[dir="rtl"] .sec-carte{padding:14px 50px 12px 14px}
.sec-carte .ico{position:absolute;top:15px;inset-inline-start:14px;width:24px;height:24px;color:var(--prive)}
.sec-carte h3{margin:0 0 6px;font-size:1.02rem}
.sec-carte p{margin:0 0 8px;font-size:.95rem;line-height:1.5}
.sec-carte p:last-child{margin-bottom:0}
.sec-carte.limite{background:var(--public-fond)}
.sec-carte.limite .ico{color:var(--public)}
.sec-details ul{padding-inline-start:20px}
.sec-details li{font-size:.9rem;margin-bottom:8px;overflow-wrap:anywhere}
/* mots longs (russe, allemand...) sur petit ecran : jamais de debordement */
.temps{grid-template-columns:repeat(6,minmax(0,1fr))}
.temps li{min-width:0;overflow-wrap:anywhere;hyphens:auto}
nav.bas .onglets{min-width:0;width:100%}
nav.bas button{min-width:0;overflow:hidden}
nav.bas button span{max-width:100%;overflow-wrap:anywhere;hyphens:auto;text-align:center}

/* fermer l'exemple, effacer le document */
.effacer-doc{margin:6px 0 0;text-align:end}
.effacer-doc .lien{min-height:36px;padding:6px 4px;font-size:.9rem}

/* bulle au survol de « Voir un exemple » ; sur ecran tactile, la phrase reste affichee sous les boutons */
.bulle-ex{position:relative;display:inline-flex;flex:0 0 auto}
.bulle-ex:has(> [hidden]){display:none}
.bulle-ex .bulle{display:none}
@media (hover:hover) and (pointer:fine){
  .bulle-ex .bulle{display:block;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,4px);width:max-content;max-width:min(300px,80vw);
    background:var(--texte);color:var(--carte);font-size:.86rem;line-height:1.4;font-weight:400;text-align:center;padding:9px 13px;border-radius:10px;
    box-shadow:var(--ombre);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:30}
  .bulle-ex .bulle::before{content:"";position:absolute;bottom:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-bottom-color:var(--texte)}
  .bulle-ex:hover .bulle,.bulle-ex:focus-within .bulle{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .exemple-encart .bulle-ex .bulle{left:auto;inset-inline-end:0;transform:translateY(4px)}
  .exemple-encart .bulle-ex:hover .bulle,.exemple-encart .bulle-ex:focus-within .bulle{transform:none}
  .exemple-encart .bulle-ex .bulle::before{left:auto;inset-inline-end:24px}
  .exemple-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion: reduce){ .bulle-ex .bulle{transition:none} }

/* titres et schema de l'app alignes sur la page « Decouvrir » (Phil 29/09 soir) */
.schema-tete,#schema-titre{font-size:1.3rem}
.schema-tete .lien,#btnAnim{font-size:.95rem}
.zone-nom b{font-size:.95rem}
.zone-nom small{font-size:.8rem}
.coffre{font-size:.8rem}
.ia-bulle{font-size:.95rem}
.paquet{width:min(156px,40%);margin-inline-start:max(-78px,-20%)}
.paquet .nom{font-size:.86rem;top:50%;transform:translateY(-50%);line-height:1.2}
.temps li{font-size:clamp(.74rem,2.4vw,.9rem);line-height:1.3}
.step h2{font-size:1.5rem}
.step .num{width:32px;height:32px;font-size:1rem}
p.aide{font-size:1rem}
.exemple-encart p{font-size:1rem}
@media (max-width:420px){
  .schema-tete,#schema-titre{font-size:1.15rem}
  .step h2{font-size:1.3rem}
}

/* telephone : 5 numeros en ligne, et en dessous le texte de l'etape en cours, en grand */
@media (max-width:520px){
  .zone-nom b{font-size:.84rem} .zone-nom small,.coffre{font-size:.7rem}
  .paquet .nom{font-size:.78rem}
  .temps{position:relative;padding-bottom:3.3em}
  .temps li{padding:4px 0}
  .temps li span{position:absolute;inset-inline:4px;bottom:0;min-height:2.7em;display:flex;align-items:center;justify-content:center;
    font-size:.95rem;line-height:1.3;font-weight:600;opacity:0;animation:legende 15s linear infinite;overflow-wrap:normal;hyphens:manual}
  .temps .t2 span{animation-delay:2.5s} .temps .t3 span{animation-delay:5s} .temps .t4 span{animation-delay:7.5s} .temps .t5 span{animation-delay:10s} .temps .t6 span{animation-delay:12.5s}
}
@keyframes legende{0%,16%{opacity:1} 16.7%,100%{opacity:0}}
/* mouvement reduit sur telephone : le schema est fige sur l'etape 2, on affiche son texte */
@media (max-width:520px) and (prefers-reduced-motion: reduce){
  .temps .t2 span{opacity:1}
}

/* « Remplacer aussi ce passage » : mini-animation (9 s, 2 tours) et bulle d'aide */
.demo-sel{position:relative;background:var(--surface);border:1px dashed var(--trait-fort);border-radius:var(--r-sm);padding:12px 14px 14px;margin:6px 0 4px;overflow:hidden}
.ds-ligne{margin:0 0 12px;font-size:.98rem;line-height:1.5}
.ds-mot{position:relative;display:inline-block;padding:0 3px;border-radius:4px;font-weight:700;border-bottom:3px solid transparent}
.ds-mot::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:0;background:rgba(56,132,255,.35);border-radius:3px}
.ds-bas{display:flex;align-items:center;gap:8px}
.ds-bouton{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--carte);border:1px solid var(--trait-fort);font-weight:600;font-size:.9rem}
.ds-doigt{color:var(--texte);opacity:0}
.ds-doigt .ico{width:26px;height:26px}
.ds-bulle{position:absolute;inset-inline-end:10px;top:8px;max-width:min(260px,70%);background:var(--texte);color:var(--carte);font-size:.85rem;font-weight:600;
  padding:7px 11px;border-radius:10px;box-shadow:var(--ombre);opacity:0}
.demo-sel.joue .ds-mot::after{animation:ds-sel 9s ease-in-out 2}
.demo-sel.joue .ds-mot{animation:ds-code 9s linear 2 forwards}
.demo-sel.joue .ds-doigt{animation:ds-doigt 9s ease-in-out 2}
.demo-sel.joue .ds-bouton{animation:ds-appui 9s ease-in-out 2}
.demo-sel.joue .ds-bulle{animation:ds-bulle 9s ease-in-out 2 forwards}
.demo-sel.pause *,.demo-sel.pause *::after{animation-play-state:paused !important}
@keyframes ds-sel{0%,8%{width:0} 28%,44%{width:100%} 48%,100%{width:0}}
@keyframes ds-code{0%,46%{background:transparent;border-bottom-color:transparent} 50%,100%{background:var(--c-identite);border-bottom-color:var(--texte);color:#111}}
@keyframes ds-doigt{0%,30%{opacity:0;transform:translate(10px,6px)} 36%{opacity:1;transform:translate(0,0)} 40%{transform:scale(.85)} 44%{opacity:1;transform:scale(1)} 50%,100%{opacity:0}}
@keyframes ds-appui{0%,37%{background:var(--carte)} 40%{background:var(--accent-doux);transform:scale(.96)} 45%,100%{background:var(--carte);transform:none}}
@keyframes ds-bulle{0%,47%{opacity:0;transform:translateY(-4px)} 52%,100%{opacity:1;transform:none}}
.ds-cmd{margin:0 0 10px;text-align:end}
.ds-cmd .lien{font-size:.85rem}
.sel-row{display:flex;align-items:center;gap:10px}
.sel-row #btnSelection{flex:1 1 auto}
.rond-info{flex:0 0 auto;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--carte);color:var(--accent-texte);border:1px solid var(--accent)}
.rond-info .ico{width:24px;height:24px}
.rond-info[aria-expanded="true"]{background:var(--accent-doux)}
.bulle-aide{position:relative;margin:12px 0 4px;background:var(--carte);border:1px solid var(--accent);border-radius:var(--r-sm);padding:12px 16px;box-shadow:var(--ombre);font-size:.95rem;line-height:1.45}
.bulle-aide::before{content:"";position:absolute;bottom:100%;inset-inline-end:14px;border:8px solid transparent;border-bottom-color:var(--accent)}
.bulle-aide .ba-titre{font-weight:700;margin:0 0 6px}
.bulle-aide ol{margin:0 0 8px;padding-inline-start:1.3em}
.bulle-aide li{margin:0 0 6px}
.bulle-aide p{margin:0 0 8px}
@media (prefers-reduced-motion: reduce){
  .ds-mot{background:var(--c-identite);border-bottom-color:var(--texte);color:#111}
  .ds-bulle{opacity:1;position:static;display:inline-block;margin-top:10px}
  .ds-cmd{display:none}
}
@media (max-width:520px){
  .ds-bulle{position:static;display:block;max-width:none;margin-top:10px}
}
.row.sel-row{flex-wrap:nowrap}
.sel-row > .rond-info{flex:0 0 44px;width:44px}

/* le doigt se pose SUR le bouton (bout du doigt vers le milieu bas du bouton) */
.ds-appuyer{position:relative;display:inline-block}
.ds-appuyer .ds-doigt{position:absolute;top:45%;inset-inline-start:58%;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(255,255,255,.9))}
.ds-appuyer .ds-doigt .ico{width:28px;height:28px}
@keyframes ds-doigt{0%,28%{opacity:0;transform:translate(18px,22px)} 35%{opacity:1;transform:translate(0,0)} 39%{opacity:1;transform:translate(0,2px) scale(.88)} 44%{opacity:1;transform:translate(0,0) scale(1)} 50%,100%{opacity:0;transform:translate(0,0)}}
@keyframes ds-appui{0%,37%{background:var(--carte);transform:none;box-shadow:none} 39%,42%{background:var(--accent-doux);transform:scale(.95);box-shadow:inset 0 2px 4px rgba(0,0,0,.18)} 46%,100%{background:var(--carte);transform:none;box-shadow:none}}

/* demonstration : ouverte par un lien, dans un encadre bien distinct du reste de la page */
.demo-appel{margin-bottom:8px}
.lien-demo{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--accent-texte);text-decoration:underline;text-underline-offset:3px;padding:2px 0;min-height:32px;text-align:start}
.lien-demo .ico{width:20px;height:20px;flex:0 0 auto}
.demo-cadre{margin:6px 0 12px;background:#f3eeff;border:2px solid var(--accent);border-radius:14px;padding:10px 12px 12px;box-shadow:0 6px 18px rgba(109,40,217,.18);animation:demo-entre .25s ease-out}
.demo-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.demo-etiquette{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5b21b6}
.demo-fermer{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff;color:#5b21b6;border:1px solid #c4b5fd}
.demo-fermer .ico{width:20px;height:20px}
.demo-cadre .demo-sel{background:#ffffff;color:#1d1d1f;border:1px solid #ddd6fe;margin:0}
.demo-cadre .ds-bouton{background:#ffffff;color:#1d1d1f;border-color:#c7c7cc}
.demo-cadre .ds-doigt{color:#1d1d1f}
.demo-cadre .ds-bulle{background:#1d1d1f;color:#ffffff}
.demo-cadre .ds-mot{color:#1d1d1f}
@keyframes demo-entre{from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none}}
.demo-sel.joue .ds-mot::after{animation-iteration-count:3}
.demo-sel.joue .ds-mot{animation-iteration-count:3}
.demo-sel.joue .ds-doigt{animation-iteration-count:3}
.demo-sel.joue .ds-bouton{animation-iteration-count:3}
.demo-sel.joue .ds-bulle{animation-iteration-count:3}
/* theme sombre : l'encadre reste clair, comme une fenetre d'explication posee sur la page */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .demo-cadre{box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 4px rgba(167,139,250,.25)} }
:root[data-theme="dark"] .demo-cadre{box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 4px rgba(167,139,250,.25)}
/* l encadre de demonstration garde les couleurs du theme clair, meme en theme sombre */
.demo-cadre{--carte:#ffffff;--surface:#f2f2f5;--texte:#1d1d1f;--texte-2:#56565c;--trait-fort:#c7c7cc;--accent-doux:rgba(109,40,217,.14);--accent-texte:#5b21b6;--c-identite:#c4b5fd;color:#1d1d1f}

/* zone de reponse : hauteur ajustee au texte par le script */
#reponse{overflow-y:hidden;resize:none}
/* en-tete qui s'efface sur telephone */

/* telephone : « Voir un exemple » et « Ma fiche » deviennent deux boutons sur une seule ligne ;
   les phrases d'explication restent lues par les lecteurs d'ecran */
@media (max-width:520px){
  .raccourcis{display:flex;gap:8px;margin:0 0 12px}
  .raccourcis .exemple-encart,.raccourcis .fiche-etat{flex:1 1 0;min-width:0;display:block;background:none;padding:0;margin:0;border-radius:0}
  .raccourcis #exempleTexte,.raccourcis #ficheEtatTexte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .raccourcis .fiche-etat > .ico{display:none}
  .raccourcis .bulle-ex{display:flex;width:100%}
  .raccourcis .bulle-ex:has(> [hidden]){display:none}
  .raccourcis button{width:100%;min-height:44px;padding:8px 10px;font-size:.92rem;font-weight:700;border-radius:12px}
  .raccourcis #btnExemple,.raccourcis #btnFermerExemple{background:var(--accent-doux);color:var(--accent-texte);border:1px solid var(--accent)}
  .raccourcis #btnFiche{background:var(--prive-fond);color:var(--prive);border:1px solid var(--prive-trait)}
}

/* « Voir un exemple » et « Ma fiche » en bas de l'ecran Document, sous un fin trait */
.raccourcis.en-bas{margin-top:18px;padding-top:16px;border-top:1px solid var(--trait)}
.raccourcis.en-bas .fiche-etat{margin-bottom:0}
@media (max-width:520px){ .raccourcis.en-bas{margin-bottom:0} }

/* en-tete : titre et phrase plus grands (Phil 30/09) */

/* camera : code technique sous le message, pour le diagnostic */
.camera-erreur .cam-code{display:block;margin-top:6px;font-size:.78rem;opacity:.8;font-family:var(--mono)}

/* etape 5 : la bulle « Coller » du telephone est annoncee sous le bouton */
.note-coller{margin:8px 0 14px;text-align:center}

/* 01/10/2026 (ADR anonymiseur-gratuit-public-vitrine-liens-croises), maquette Léa */
/* --- CSS A INTEGRER (app.css) : bloc vers FREE + ligne apres copie --- */

/* ===== ELEMENT 2 : « Les autres outils DANA » (CSS A INTEGRER, app.css) ===== */
.autres-outils h2{margin:0 0 6px}

#juridique .card h2{margin-top:0}
#juridique ul{padding-inline-start:1.2em}
/* 03/10 : bloc « Nos tests, en chiffres reels » (page Decouvrir) */
.chiffres h3{margin:18px 0 8px;font-size:1.05rem}
.chif-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:6px 0 14px}
.chif-cles p{margin:0;padding:12px;border-radius:12px;background:var(--accent-doux);display:flex;flex-direction:column;gap:4px;line-height:1.4}
.chif-gros{font-size:2rem;line-height:1;color:var(--accent-texte)}
.chif-types{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.chif-types li{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,38%) 3.6em;gap:8px;align-items:center}
.chif-nom{overflow-wrap:anywhere;line-height:1.3}
.chif-barre{height:10px;border-radius:5px;background:var(--surface);overflow:hidden}
.chif-barre span{display:block;height:100%;background:var(--accent);border-radius:5px}
.chif-barre span.faible{background:var(--public-trait)}
.chif-types strong{text-align:end;white-space:nowrap}
.chif-tableau{overflow-x:auto;margin:0 0 8px}
.chif-tableau table{width:100%;border-collapse:collapse;font-size:.95rem}
.chif-tableau th,.chif-tableau td{padding:6px 8px;border-bottom:1px solid var(--surface);text-align:end}
.chif-tableau th[scope=row],.chif-tableau thead th:first-child{text-align:start}
.chif-tableau tr.actuelle{background:var(--accent-doux);font-weight:700}
/* 03/10 : logo du nom en deux parties, la seconde dans la couleur de l'outil (ADR 2026-10-03) */

/* 03/10 : numero de version visible (pied de page) et bandeau « nouvelle version » */
footer .version-app,.pied-page .version-app{text-align:center;color:var(--texte-2);font-size:.85rem;margin:8px 0 0}
#bandeau-maj{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;max-width:560px;margin:0 auto;
  background:var(--carte);color:var(--texte);border:2px solid var(--accent);border-radius:14px;box-shadow:var(--ombre);padding:12px 14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#bandeau-maj[hidden]{display:none}
#bandeau-maj p{flex:1 1 220px;margin:0;line-height:1.4;font-size:.95rem}
#bandeau-maj .b-main{min-height:44px;padding:8px 16px}
#bandeau-maj .lien{min-height:44px}
@media print{#bandeau-maj{display:none !important}}
/* 03/10 : bouton « Fermer cette page » (Licence, Mode d'emploi) */

/* ---------- 06/10 (Phil) : bulle de selection, menu des liens et des explications ----------
   Memes couleurs et memes rayons que le reste : la bulle reprend l'accent violet,
   le menu reprend les cartes et les angles des autres encarts. */
.bulle-sel{position:fixed;z-index:60;background:var(--accent);color:var(--sur-accent);border:0;border-radius:999px;
  padding:10px 16px;font-weight:700;font-size:.92rem;min-height:44px;max-width:calc(100vw - 16px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);font-family:var(--police);cursor:pointer}
.bulle-sel:hover{filter:brightness(1.08)}

/* 07/10 : la regle de la maquette qui cachait les liens du bas sur telephone est retiree :
   l'outil n'a plus de pied de page, et les pages Decouvrir, Mode d'emploi, Licence en ont besoin */

/* ---------- 06/10 (Phil) : menu, l'animation du trajet dans l'IA, la lecture a voix haute ---------- */

.anim-copie{margin:16px 0 0;background:var(--surface);border-radius:var(--r);padding:12px 14px}
.anim-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:1rem;margin:0 0 10px}
.anim-tete .lien{font-size:.85rem;padding:6px 4px;min-height:36px;font-weight:600}
.ac-fenetre{flex:1 1 230px;min-width:210px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-sm);overflow:hidden}
.ac-barre{display:flex;align-items:center;gap:5px;padding:7px 9px;background:var(--surface);border-bottom:1px solid var(--trait)}
.ac-point{width:9px;height:9px;border-radius:50%;background:var(--trait-fort);flex:0 0 auto}
.ac-adresse{margin-inline-start:6px;font-size:.74rem;color:var(--texte-2);background:var(--carte);border-radius:999px;padding:2px 10px}
.ac-corps{padding:10px 11px;display:flex;flex-direction:column;gap:8px;min-height:116px}
.ac-message{background:var(--accent-doux);border-radius:var(--r-sm);padding:8px 10px;}
.ac-etiquette{font-size:.7rem;font-weight:700;color:var(--accent-texte);text-transform:uppercase;letter-spacing:.03em}
.ac-message b{display:block;height:6px;border-radius:3px;background:var(--trait-fort);margin-top:6px;width:92%}
.ac-message b + b{width:76%}
.ac-message b + b + b{width:58%}
.ac-travail{display:flex;gap:5px;}
.ac-travail i{width:8px;height:8px;border-radius:50%;background:var(--public);animation:acPoint .9s infinite}
.ac-travail i:nth-child(2){animation-delay:.15s}
.ac-travail i:nth-child(3){animation-delay:.3s}
.ac-reponse{display:flex;flex-direction:column;gap:6px;}
.ac-reponse i{height:6px;border-radius:3px;background:var(--prive-trait)}
.ac-reponse i:nth-child(1){width:88%}
.ac-reponse i:nth-child(2){width:70%}
.ac-reponse i:nth-child(3){width:80%}
.ac-reponse i:nth-child(4){width:44%}
.ac-copier{position:relative;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:.77rem;font-weight:700;color:var(--accent-texte);border:1px solid var(--trait);border-radius:999px;padding:5px 10px;}
.ac-copier .ico{width:16px;height:16px}
.ac-app{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:center;}
.ac-app-bouton{font-size:.75rem;font-weight:700;background:var(--accent);color:var(--sur-accent);border-radius:var(--r-sm);padding:7px 10px;max-width:160px;text-align:center}
.ac-app-bulle{font-size:.73rem;font-weight:700;background:var(--prive-fond);color:var(--prive);border:1px solid var(--prive-trait);border-radius:999px;padding:3px 10px}
.ac-etapes{margin:10px 0 0;padding-inline-start:22px;font-size:.86rem;color:var(--texte-2)}
.ac-etapes li{margin-bottom:4px}
.anim-copie.pause *{animation-play-state:paused !important}
/* 06/10 (Phil) : afficher une animation apres l'avoir cachee la reprend au temps ecoule,
   pas au debut : elle n'est plus en phase avec ses etapes. Cette classe la relance. */
.stop-anim *{animation:none !important}

@media (prefers-reduced-motion: reduce){
  .anim-copie *{animation:none !important}
  .anim-copie .ac-message,.anim-copie .ac-reponse,.anim-copie .ac-app,.anim-copie .ac-travail{opacity:1}
}
@media (max-width:400px){
  .ac-panneau .ac-fenetre{max-width:100%}
}

/* 06/10 (Phil) : la bulle « colle » de la zone de reception */
.bulle-colle{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;background:var(--prive-fond);
  color:var(--prive);border:1px solid var(--prive-trait);border-radius:999px;padding:3px 12px}

/* 06/10 (Phil) : dans le menu, l'aide et les reglages se lisent comme des titres */

/* ---------- 06/10 (Phil) : animation plus parlante, point d'appui, ecran d'adieu ---------- */
.ac-etiquette.verte{color:var(--prive)}
.ac-bulle-etape{position:absolute;right:8px;bottom:-9px;font-size:.68rem;font-weight:700;background:var(--prive-fond);
  color:var(--prive);border:1px solid var(--prive-trait);border-radius:999px;padding:2px 8px}
.ac-message{position:relative}
.ac-appui{position:absolute;width:26px;height:26px;pointer-events:none}
.ac-appui i{position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:.9}
.ac-appui::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent)}
.ac-app{position:relative}

@media (prefers-reduced-motion: reduce){ .ac-appui{opacity:1;animation:none} }
.adieu{position:fixed;inset:0;z-index:120;background:var(--fond);display:flex;align-items:center;justify-content:center;padding:24px}
.adieu-boite{background:var(--carte);border-radius:var(--r);padding:22px;max-width:420px;text-align:center;box-shadow:var(--ombre)}
.adieu-boite b{display:block;font-size:1.15rem;margin-bottom:8px}
.adieu-boite p{font-size:.94rem;color:var(--texte-2)}
.carte-sans-document .btn-redonner{margin-top:14px}

/* ---------- 06/10 (Phil) : l'animation du trajet en cinq tableaux, un geste par tableau ---------- */
.ac-panneaux{display:flex;align-items:center;justify-content:center;background:var(--fond-2);border-radius:var(--r);
  padding:14px 12px;margin:10px 0;min-height:200px}
.ac-panneau{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.ac-legende{margin:0;display:flex;gap:9px;align-items:flex-start;max-width:340px;font-size:.9rem;line-height:1.4;text-align:start}
.ac-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--sur-accent);
  font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.ac-panneau .ac-fenetre{width:100%;max-width:320px;flex:0 0 auto}
.ac-panneau .ac-app.seule{max-width:320px;position:relative;padding:10px 0}
.ac-panneau .ac-app.seule .ac-bulle-etape{left:6px;right:auto;bottom:-11px}
.ac-appui{position:absolute;right:-9px;bottom:-9px;width:22px;height:22px;pointer-events:none}
.ac-appui i{position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:.85}
.ac-appui::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);animation:acPulse 1.9s ease-out infinite}
@keyframes acPulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
.ac-etapes li button{background:none;border:0;padding:2px 0;font:inherit;color:var(--texte-2);text-align:start;cursor:pointer}
.ac-etapes li button[aria-current="step"]{color:var(--accent-texte);font-weight:700}
@media (prefers-reduced-motion: reduce){ .ac-appui::after{animation:none} }

/* les points qui clignotent pendant que l'IA travaille (tableau 3) */
@keyframes acPoint{0%,60%,100%{opacity:.35;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}

/* ---------- 07/10 (Phil) : envoi en six tableaux, retour vers l'outil, fin de parcours ---------- */
.ac-corps{position:relative}
.ac-message.petit-msg b{width:60%}
.ac-envoyer{position:relative;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--accent);color:var(--sur-accent)}
.ac-envoyer .ico{width:18px;height:18px}
.ac-onglets{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:10px 0}
.ac-onglet{position:relative;font-size:.78rem;font-weight:700;border:1px solid var(--trait);border-radius:var(--r-sm);padding:8px 12px;
  background:var(--carte);color:var(--texte-2)}
.ac-onglet.actif{border-color:var(--prive-trait);background:var(--prive-fond);color:var(--prive)}
.ac-fleche .ico{width:22px;height:22px;color:var(--texte-2)}
[dir=rtl] .ac-fleche .ico{transform:scaleX(-1)}
.note-ecoute{margin:6px 0 0}
.fin-parcours{display:flex;flex-direction:column;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--trait)}
.fin-parcours .petit{margin:0 0 6px}
.fin-parcours .large-second{width:100%;min-height:52px;font-size:1.05rem;font-weight:700;margin-top:0}

/* 07/10 : les six etapes en pastilles sur une ou deux lignes (en liste, elles prenaient tout l'ecran du telephone) */
.ac-etapes{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:10px 0 0;counter-reset:ac}
.ac-etapes li{margin:0;counter-increment:ac}
.ac-etapes li button{min-height:36px;padding:6px 11px;border:1px solid var(--trait);border-radius:999px;background:var(--carte);font-size:.84rem}
.ac-etapes li button::before{content:counter(ac) ". "}
.ac-etapes li button[aria-current="step"]{border-color:var(--accent);background:var(--accent-doux)}
.ac-panneaux{min-height:236px}
/* Lea/Thomas 07/10 : appui en proprietes logiques (droite a gauche), legendes de hauteur stable,
   pause cachee quand le mouvement est reduit, message en bas (il cachait le titre et le menu) */
.ac-appui{right:auto;inset-inline-end:-9px}
.ac-panneaux{align-items:flex-start}
.ac-legende{min-height:4.4em}
@media (prefers-reduced-motion: reduce){ #btnAnimCopie{display:none} }
/* 07/10 (Phil) : la reponse de l'IA affichee proprement, sans les signes ##, ** */
.reponse-lue{border:2px solid var(--accent);border-radius:var(--r-sm);background:var(--carte);padding:14px 16px;line-height:1.65;font-size:1rem;overflow-wrap:anywhere}
.reponse-lue h3,.reponse-lue h4,.reponse-lue h5,.reponse-lue h6{margin:16px 0 6px;font-size:1.08rem;line-height:1.35}
.reponse-lue h3{font-size:1.18rem}
.reponse-lue > :first-child{margin-top:0}
.reponse-lue p{margin:0 0 10px}
.reponse-lue ul,.reponse-lue ol{margin:0 0 10px;padding-inline-start:24px}
.reponse-lue li{margin-bottom:6px}
.reponse-lue blockquote{margin:0 0 10px;padding-inline-start:12px;border-inline-start:3px solid var(--trait-fort);color:var(--texte-2)}
.reponse-lue code{font-family:var(--mono);background:var(--surface);border-radius:4px;padding:0 4px}
.reponse-lue hr{border:0;border-top:1px solid var(--trait);margin:12px 0}
#btnModifierReponse{margin-top:6px}
/* 07/10 : documents de plusieurs pages */
.encart-pages{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--prive-fond);border:1px solid var(--prive-trait);border-radius:var(--r-sm);padding:12px 14px;margin:10px 0 0}
.encart-pages p{flex:1 1 220px;margin:0;font-size:.95rem;line-height:1.4}
.encart-pages button{flex:0 0 auto;min-height:44px}
.note-direct{text-align:center;margin:6px 0 0}
/* 07/10 (Phil) : cadre de la page, photo automatique, lampe */
.cam-vue{position:relative;flex:1 1 auto;min-height:0;display:flex}
.cam-vue video{flex:1 1 auto}
.cam-cadre{position:absolute;inset:7% 9%;border:3px dashed rgba(255,255,255,.75);border-radius:10px;pointer-events:none}
.cam-auto{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;background:rgba(0,0,0,.65);color:#fff;
  border-radius:999px;padding:6px 14px;font-size:.92rem;max-width:90%;text-align:center}
.cam-auto:empty{display:none}
.declencheur{background:conic-gradient(#22c55e calc(var(--prog,0) * 360deg),transparent 0)}
.cam-options{display:flex;justify-content:center;gap:10px;margin-top:10px}
.cam-option{background:#27272a;color:#fff;border:1px solid #52525b;border-radius:999px;min-height:40px;padding:6px 14px;font-size:.88rem}
.cam-option[aria-pressed="true"]{background:#14532d;border-color:#22c55e}
/* 07/10 (Phil) : niveau a bulle, ranger le document, encart d'autonomie */
.cam-niveau{position:absolute;top:12px;inset-inline-end:12px;width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.cam-niveau::before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:1px dashed rgba(255,255,255,.7)}
.cam-niveau span{width:16px;height:16px;border-radius:50%;background:#f59e0b;transition:transform .1s linear}
.cam-niveau.plat{border-color:#22c55e}
.cam-niveau.plat span{background:#22c55e}
.note-ranger{margin:6px 0 0}
.autonomie{margin:18px 0 0;padding:16px;border-radius:var(--r);background:var(--accent-doux);border:1px solid var(--accent)}
.autonomie h3{margin:0 0 8px;font-size:1.1rem}
.autonomie p{margin:0 0 8px;line-height:1.5}
.autonomie-liens{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:10px}
.autonomie-liens .b-main{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;text-decoration:none;border-radius:12px}
.autonomie-liens .lien{font-weight:600}
/* 07/10 (Phil) : le cadre de collage remplace le bouton ; grand texte au milieu, qui disparait une fois colle */
#reponse{min-height:170px;cursor:pointer}
#reponse:placeholder-shown{padding-top:58px;text-align:center;border-style:dashed;background:var(--accent-doux)}
#reponse::placeholder{font-size:1.35rem;font-weight:700;color:var(--accent-texte);opacity:1}
#reponse.a-coller{box-shadow:0 0 0 4px var(--accent)}
.ac-zone-coller{display:block;border:2px dashed var(--accent);background:var(--accent-doux);color:var(--accent-texte);border-radius:var(--r-sm);
  padding:18px 14px;font-weight:700;font-size:.85rem;text-align:center;max-width:240px}
#carte-restauration.vide .apres-collage{display:none}
.autre-ia{margin:14px 0;padding:12px 14px;border:1px solid var(--trait);border-radius:12px}
.autre-ia p{margin:0 0 8px}.autre-ia .row{gap:8px;flex-wrap:wrap}.autre-ia select{flex:1 1 200px;min-width:0}
/* 07/10 (Phil) : actions sur la reponse, une grille de boutons identiques */
.actions-reponse{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:14px}
.actions-reponse .action{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:12px;border:1px solid var(--trait);
  background:var(--carte);color:var(--texte);font:inherit;font-weight:600;font-size:.95rem;text-align:start;cursor:pointer}
.actions-reponse .action:hover{border-color:var(--accent)}
.actions-reponse .action .ico{width:22px;height:22px;flex:0 0 auto;color:var(--accent-texte)}
.actions-reponse .action[aria-pressed="true"]{background:var(--accent-doux);border-color:var(--accent)}
.notes-actions{margin:10px 0 0;padding-inline-start:18px;font-size:.84rem;color:var(--texte-2);line-height:1.45}
.notes-actions li{margin-bottom:4px}
#note-inconnus{margin-top:8px;color:var(--texte-2)}
#carte-restauration:not(.vide) .avant-collage{display:none}
.actions-reponse .action:last-child:nth-child(odd){grid-column:1 / -1}
/* 07/10 (Phil) : « Changer de document » sur chaque etape */
.step .recommencer{margin-inline-start:auto;font-size:.88rem;font-weight:600;white-space:normal;text-align:end}
.recommencer.a-confirmer{color:var(--danger,#b91c1c)}
.step:has(.recommencer){flex-wrap:wrap}
/* 07/10 (Phil) : signes de travail dans l'animation du haut.
   Roue dentee verte = l'outil travaille sur votre appareil (temps 2 : noms -> etiquettes ; temps 6 : etiquettes -> vrais noms).
   Trois points orange = l'IA reflechit sur internet (temps 4). Meme duree de 15 s que le reste de l'animation. */
.atelier{position:absolute;opacity:0;pointer-events:none}
.atelier-app{top:10px;inset-inline-start:44%;width:30px;height:30px;color:var(--prive);animation:travailApp 15s linear infinite}
.atelier-app .ico{width:30px;height:30px;animation:tourne 1.4s linear infinite}
.atelier-ia{bottom:14px;inset-inline-end:62px;display:flex;gap:4px;align-items:center;animation:travailIA 15s linear infinite}
.atelier-ia i{width:8px;height:8px;border-radius:50%;background:var(--public);animation:acPoint .9s infinite}
.atelier-ia i:nth-child(2){animation-delay:.15s}
.atelier-ia i:nth-child(3){animation-delay:.3s}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes travailApp{0%,16.5%{opacity:0} 18%,31%{opacity:1} 33%,81%{opacity:0} 83%,92%{opacity:1} 94%,100%{opacity:0}}
@keyframes travailIA{0%,49%{opacity:0} 51%,65%{opacity:1} 67%,100%{opacity:0}}
.schema.pause .atelier,.schema.pause .atelier *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){ .atelier{display:none} }
/* 07/10 (Phil) : « il faut voir clairement : selectionner un mot pour le cacher » */
.astuces-texte{background:var(--accent-doux);border:1px solid var(--accent);border-radius:var(--r-sm);padding:10px 14px;margin:10px 0}
.astuces-texte p{display:flex;align-items:flex-start;gap:10px;margin:4px 0;font-weight:600;font-size:1rem;line-height:1.4;color:var(--texte)}
.astuces-texte .ico{width:22px;height:22px;flex:0 0 auto;color:var(--accent-texte);margin-top:1px}

/* ---------- 07/10 (Phil) : menu sobre, facon reglages d'un Mac ----------
   Un panneau a droite (plein ecran sur telephone), des groupes arrondis, des lignes fines,
   des rubriques repliables avec un chevron. Une seule rubrique ouverte a la fois. */

a.m-ligne{color:var(--texte)}

details.m-acc{background:none;border-radius:0;padding:0;margin:0;box-shadow:none}
details.m-acc > summary{list-style:none;color:var(--texte);font-weight:500}
details.m-acc > summary::-webkit-details-marker{display:none}

details.m-acc[open] > summary{font-weight:600}

/* 14/10 (Phil) : sur telephone, une bande reste visible a gauche ; toucher cette bande ferme le menu.
   Le panneau suit la hauteur reelle de l'ecran (barres du navigateur comprises), « Fermer » reste en vue. */

/* « En savoir plus » dans le parcours : discret, toujours au meme endroit */
.en-savoir{background:none;border:0;padding:0 2px;font:inherit;font-size:.9em;font-weight:600;color:var(--accent-texte);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:0;white-space:nowrap}
.champ-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.champ-ligne .champ{margin-bottom:6px}

#btnVoirAnim.m-ligne{color:var(--texte)}

/* ---------- 07/10 soir (Phil) : formats repliables, animation a la demande et plus parlante, arret de lecture ---------- */
.formats-repli{margin:10px 0 0}
.formats-repli > summary{cursor:pointer;color:var(--accent-texte);font-weight:600;font-size:.92rem}
.formats-repli #note-formats{margin:6px 0 0}
.anim-repli{margin:16px 0 0}
.anim-repli > summary{cursor:pointer;font-weight:700;color:var(--accent-texte);padding:8px 0}
.anim-repli .anim-copie{margin-top:6px}
/* le doigt appuie AU MILIEU de ce qu'il faut toucher */
.ac-panneau .ac-appui{right:auto;bottom:auto;inset-inline-end:auto;left:50%;top:50%;margin:-11px 0 0 -11px;opacity:0;animation:acDoigt 4.5s ease-out both}
@keyframes acDoigt{0%,35%{opacity:0;transform:scale(1.6)} 45%{opacity:1;transform:scale(1)} 60%{opacity:1;transform:scale(.85)} 75%,100%{opacity:.9;transform:scale(1)}}
.ac-envoyer,.ac-copier,.ac-zone-coller,.ac-onglet.actif{position:relative}
/* tableau 1 : la demande s'ecrit, puis on envoie */
.ac-panneau[data-tableau="2"] .ac-message b{transform-origin:left;animation:acLigne 4.5s ease-out both}
.ac-panneau[data-tableau="2"] .ac-message b:nth-of-type(2){animation-delay:.25s}
.ac-panneau[data-tableau="2"] .ac-message b:nth-of-type(3){animation-delay:.5s}
@keyframes acLigne{0%{transform:scaleX(0)} 25%,100%{transform:scaleX(1)}}
/* tableau 3 : la reponse s'ecrit ligne par ligne */
.ac-panneau[data-tableau="4"] .ac-reponse i{transform-origin:left;animation:acLigne 4.5s ease-out both}
.ac-panneau[data-tableau="4"] .ac-reponse i:nth-of-type(2){animation-delay:.5s}
.ac-panneau[data-tableau="4"] .ac-reponse i:nth-of-type(3){animation-delay:1s}
[dir=rtl] .ac-panneau .ac-message b,[dir=rtl] .ac-panneau .ac-reponse i{transform-origin:right}
/* tableaux 4 et 6 : « Copie », « Colle » apparaissent apres l'appui */
.ac-fait{display:inline-block;margin-top:8px;font-size:.78rem;font-weight:700;background:var(--prive-fond);color:var(--prive);
  border:1px solid var(--prive-trait);border-radius:999px;padding:3px 12px;opacity:0;animation:acFait 4.5s ease-out both}
@keyframes acFait{0%,62%{opacity:0;transform:translateY(4px)} 72%,100%{opacity:1;transform:none}}
.ac-panneau[data-tableau="5"] .ac-corps{align-items:flex-start}
/* tableau 5 : la fleche glisse vers l'outil */
.ac-panneau[data-tableau="6"] .ac-fleche{animation:acFleche 4.5s ease-in-out both}
@keyframes acFleche{0%{transform:translateX(-12px);opacity:.3} 40%,100%{transform:none;opacity:1}}
[dir=rtl] .ac-panneau[data-tableau="6"] .ac-fleche{animation-name:none}
/* tableau 6 : la zone se remplit */
.ac-zone-coller{display:block;min-width:200px}
.ac-zone-lignes{display:none;flex-direction:column;gap:6px}
.ac-zone-lignes i{display:block;height:6px;border-radius:3px;background:var(--prive-trait)}
.ac-zone-lignes i:nth-child(2){width:80%} .ac-zone-lignes i:nth-child(3){width:60%}
.ac-panneau[data-tableau="7"] .ac-zone-txt{animation:acDisparait 4.5s both}
.ac-panneau[data-tableau="7"] .ac-zone-lignes{display:flex;opacity:0;animation:acApparait 4.5s both}
@keyframes acDisparait{0%,60%{opacity:1} 66%,100%{opacity:0;height:0;overflow:hidden}}
@keyframes acApparait{0%,62%{opacity:0} 70%,100%{opacity:1}}
.ac-panneau[data-tableau="7"] .ac-app.seule{display:flex;flex-direction:column;align-items:center}
@media (prefers-reduced-motion: reduce){
  .ac-panneau *{animation:none !important;opacity:1 !important;transform:none !important}
  .ac-panneau[data-tableau="7"] .ac-zone-txt{display:none}
}
/* arret de la lecture, toujours a portee pendant qu'elle parle */
.lecture-flottante{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));z-index:66;
  display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--texte);color:var(--fond);
  font:inherit;font-weight:700;padding:12px 20px;min-height:48px;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
.lecture-flottante .ico{width:18px;height:18px}
.lecture-flottante[hidden]{display:none}
/* Pause : chaque tableau montre son etat final, lisible (et non son premier instant, vide) */
.anim-copie.pause .ac-panneau *{animation:none !important}
.anim-copie.pause .ac-appui,.anim-copie.pause .ac-fait{opacity:1}
.anim-copie.pause .ac-panneau[data-tableau="7"] .ac-zone-txt{display:none}
.anim-copie.pause .ac-panneau[data-tableau="7"] .ac-zone-lignes{opacity:1}
/* 07/10 (Phil) : la rubrique ouverte depuis « En savoir plus » garde son titre visible sous l'en-tete du menu,
   et son texte est legerement colore */
details.m-acc{scroll-margin-top:76px}

details.m-acc[open] > summary{color:var(--accent-texte)}

/* 07/10 soir : tableau 1 (dans l'outil, on copie) et tableau 8 (dans l'outil, vos informations reviennent) */
.ac-outil{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-sm);padding:12px 16px;min-width:220px;max-width:320px}
.ac-outil-nom{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--prive)}
.ac-outil .ac-app-bouton{position:relative}
.ac-roue{width:18px;height:18px;color:var(--prive);opacity:0;animation:acRoue 4.5s linear both}
@keyframes acRoue{0%,10%{opacity:0;transform:rotate(0)} 15%{opacity:1} 60%{opacity:1;transform:rotate(540deg)} 70%,100%{opacity:0;transform:rotate(600deg)}}
.ac-doc{display:flex;flex-direction:column;gap:7px;width:100%}
.ac-doc > b{display:block;height:6px;border-radius:3px;background:var(--trait-fort);width:90%}
.ac-doc > b.court{width:55%}
.ac-puce{position:relative;display:inline-flex;align-self:flex-start;font-size:.78rem;font-weight:700;border-radius:6px;padding:2px 8px;min-height:22px}
.ac-etq{font-family:var(--mono);color:var(--accent-texte);background:var(--accent-doux);border-radius:6px;padding:2px 6px;animation:acEtq 4.5s both}
.ac-vrai{position:absolute;left:8px;top:2px;color:var(--prive);background:var(--prive-fond);border-radius:6px;padding:2px 6px;opacity:0;animation:acVrai 4.5s both}
@keyframes acEtq{0%,45%{opacity:1} 55%,100%{opacity:0}}
@keyframes acVrai{0%,50%{opacity:0;transform:scale(.9)} 60%,100%{opacity:1;transform:none}}
.anim-copie.pause .ac-etq{opacity:0}
.anim-copie.pause .ac-vrai{opacity:1}
@media (prefers-reduced-motion: reduce){ .ac-etq{display:none} }

/* 07/10 soir (Phil) : « Cacher a l'IA » / « Montrer a l'IA » ont une vraie apparence de bouton */
.b-cacher,.b-montrer{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border-radius:12px;
  font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.b-cacher{background:var(--accent);color:var(--sur-accent);border:1px solid var(--accent)}
.b-montrer{background:var(--carte);color:var(--texte);border:1px solid var(--trait-fort)}
.b-cacher:hover{filter:brightness(1.08)} .b-montrer:hover{border-color:var(--accent)}
.sus .b-cacher,.sus .b-montrer{flex:0 0 auto}
.liste-donnees .b-montrer{font-size:.85rem;padding:6px 12px;min-height:40px}

/* 07/10 soir (Phil) : liste rapide a parcourir, une ligne par mot, un seul bouton */
.sus{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:8px 12px;margin-bottom:6px}
.sus .mot{grid-column:1;font-size:.95rem}
.sus .contexte{grid-column:1;font-size:.8rem;color:var(--texte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sus .b-cacher{grid-column:2;grid-row:1 / span 2;min-height:40px;padding:6px 14px}
/* boutons du bas : actif = bien visible ; pas encore disponible = tres pale ; ecran en cours = pastille violette */
nav.bas button:not(:disabled){color:var(--texte);font-weight:700}
nav.bas button:not(:disabled) .ico{color:var(--accent-texte)}
nav.bas button:disabled{opacity:.32;cursor:default}
nav.bas button[aria-selected="true"]{color:var(--accent-texte)}
nav.bas button[aria-selected="true"] .ico{background:var(--accent-doux);border-radius:999px;padding:3px 14px;box-sizing:content-box}

/* 07/10 : tableaux dans la reponse de l'IA, lisibles sur telephone (defilement horizontal du tableau seul) */
.tableau-rep{overflow-x:auto;margin:0 0 12px;-webkit-overflow-scrolling:touch}
.tableau-rep table{border-collapse:collapse;font-size:.92rem;min-width:100%}
.tableau-rep th,.tableau-rep td{border:1px solid var(--trait);padding:6px 10px;text-align:start;vertical-align:top}
.tableau-rep th{background:var(--surface);font-weight:700}
#impression .tableau-rep th,#impression .tableau-rep td{border:1pt solid #999}

/* 07/10 soir : idees pretes sous « Preciser ma demande » */
.idees{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.idee{border:1px solid var(--accent);background:var(--carte);color:var(--accent-texte);border-radius:999px;padding:6px 12px;min-height:36px;
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.idee::before{content:"+ "}
.idee[aria-pressed="true"]{background:var(--accent-doux)}
.note-precision{margin:4px 0 0}

/* 10/10 (Phil) : sur telephone, le texte colore s'affiche en entier, sans cadre qui defile dans la page :
   les poignees de selection glissent alors normalement (Android et iPhone) */
#srcView{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
@media (pointer: coarse){ #srcView{max-height:none;overflow-y:visible} }
/* 07/10 soir : sur ecran tactile, la bulle « Cacher a l'IA » se pose en bas, loin de la barre du telephone */
.bulle-sel.en-bas{left:50% !important;transform:translateX(-50%);min-height:52px;padding:12px 24px;font-size:1rem;box-shadow:0 8px 28px rgba(0,0,0,.35)}

/* 07/10 soir (Phil) : apercu de la camera plein cadre ; le cadre en pointilles est sur l'image elle-meme */
.camera-tete p{font-size:.82rem;margin:2px 0 6px}
.cam-vue{border-radius:12px;overflow:hidden;background:#111}
.cam-vue video{width:100%;height:100%;object-fit:cover;border-radius:0}
.cam-cadre{inset:5% 6%}
@media (max-height:700px){ .camera-tete p{display:none} }

/* 07/10 soir (Phil) : « l'aperçu doit être le plus grand possible » : la caméra occupe TOUT l'écran ;
   titre, boutons et réglages flottent par-dessus, sur un fond dégradé. Le cadre évite ces zones. */
.camera{padding:0;display:block}
.camera .cam-vue{position:absolute;inset:0;border-radius:0}
.camera .cam-vue video{width:100%;height:100%;object-fit:cover}
.camera .camera-tete{position:absolute;top:0;left:0;right:0;z-index:2;padding:calc(10px + env(safe-area-inset-top)) 14px 22px;
  background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,0))}
.camera .camera-tete p{display:none}
.camera .camera-bas,.camera .cam-options{position:absolute;left:12px;right:12px;z-index:2;margin:0}
.camera .camera-bas{bottom:calc(64px + env(safe-area-inset-bottom))}
.camera .cam-options{bottom:calc(14px + env(safe-area-inset-bottom))}
.camera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72))}
.camera .cam-cadre{top:calc(64px + env(safe-area-inset-top));bottom:calc(178px + env(safe-area-inset-bottom));left:5%;right:5%}
.camera .cam-auto{bottom:calc(190px + env(safe-area-inset-bottom));z-index:3}
.camera .cam-niveau{top:calc(64px + env(safe-area-inset-top))}
.camera .camera-erreur{position:absolute;left:12px;right:12px;top:calc(70px + env(safe-area-inset-top));z-index:3}
.camera-erreur .cam-reessayer{display:block;width:100%;margin-top:10px;min-height:48px}
 /* 09/10 : espace entre les deux parties du nom (Masque de données personnelles) */
 /* 09/10 : en allemand le nom est un seul mot, Datenmaske */
.mon-ia{margin:10px 0 4px}.mon-ia input{flex:1 1 220px;min-width:0;padding:11px 12px;border-radius:12px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 25%,transparent);font:inherit;background:transparent;color:inherit} /* 09/10 : Mon IA */

/* 10/10 (Phil, proposition Hugo) : les codes a utiliser si l'IA pose des questions (fond plein, jamais transparent) */
.reperes-repli{margin:14px 0;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-sm);padding:10px 14px}
.reperes-repli summary{cursor:pointer;font-weight:700}
.reperes-liste{list-style:none;margin:8px 0 0;padding:0}
.reperes-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0;border-top:1px solid var(--trait)}
.reperes-liste code{font-family:var(--mono);background:var(--surface);border-radius:4px;padding:2px 6px;overflow-wrap:anywhere}
.reperes-nature{flex:1 1 140px;color:var(--texte-2)}

/* 10/10 (Phil) : fenêtre « Préparer ma réponse à l'IA » (fond plein, jamais transparent) */
.fenetre{position:fixed;inset:0;z-index:110;background:var(--fond);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
.fenetre-boite{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:20px;max-width:560px;width:100%;box-shadow:var(--ombre);margin:auto 0}
.fenetre-boite h2{margin:0 0 10px;font-size:1.15rem}
.fenetre-etapes{margin:0 0 12px;padding-inline-start:22px}
.fenetre-etapes li{margin-bottom:6px}
.alerte-douce{background:var(--surface);border-inline-start:4px solid var(--accent);border-radius:var(--r-sm);padding:10px 12px;font-size:.92rem}
.fenetre-apercu{background:var(--surface);border:1px dashed var(--trait-fort);border-radius:var(--r-sm);padding:10px 12px;min-height:56px;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:12px}
.repondre-ia-bloc{margin:14px 0 0;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-sm);padding:10px 14px}
.repondre-ia-bloc .petit{margin:0 0 8px}

/* 11/10 (Phil) : écran de chargement. Fond plein tout de suite (jamais de cadres vides), dessin qui
   apparaît après un court instant (pas de clignotement si tout est déjà prêt). Retiré par finChargement()
   (js/version.js) ; disparaît tout seul après 10 s si un script ne répond pas. */
.chargement{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--fond);
  transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility 0s linear .4s;animation:ch-secours 0s linear 10s forwards}
.chargement.fini{opacity:0;visibility:hidden;pointer-events:none}
@keyframes ch-secours{to{opacity:0;visibility:hidden;pointer-events:none}}
.ch-doc{width:112px;height:140px;overflow:visible;opacity:0;animation:ch-entree .5s cubic-bezier(.2,.8,.2,1) .15s forwards}
.chargement.fini .ch-doc{transform:scale(.96);transition:transform .4s cubic-bezier(.4,0,.2,1)}
@keyframes ch-entree{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.ch-carte{fill:var(--carte);stroke:var(--trait-fort);stroke-width:1.5;filter:drop-shadow(0 6px 14px rgba(0,0,0,.10))}
.ch-l,.ch-m{transform-box:fill-box;transform-origin:left center}
.ch-l{fill:var(--trait-fort);animation:ch-ligne 2.8s cubic-bezier(.4,0,.2,1) infinite}
.ch-l.l1{fill:var(--texte-2);opacity:.55}
.l2{animation-delay:.06s}.l3{animation-delay:.12s}.l4{animation-delay:.18s}.l5{animation-delay:.24s}.l6{animation-delay:.30s}.l7{animation-delay:.36s}
@keyframes ch-ligne{0%{transform:scaleX(0)}22%,86%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.ch-m{fill:var(--accent);animation:ch-masque 2.8s cubic-bezier(.65,0,.35,1) infinite}
.m1{animation-delay:.10s}.m2{animation-delay:.28s}.m3{animation-delay:.46s}
@keyframes ch-masque{0%,34%{transform:scaleX(0);opacity:1}50%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.ch-scan{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 4px var(--accent));animation:ch-scan 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ch-scan{0%,22%{transform:translateY(16px);opacity:0}28%{opacity:.9}62%{transform:translateY(128px);opacity:.9}68%,100%{transform:translateY(128px);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .ch-doc{animation:none;opacity:1}
  .ch-l,.ch-m{animation:none}
  .ch-scan{display:none}
  .chargement{transition:none}
}

/* 11/10 (Phil) : graphiques dessinés sur l'appareil (js/graphiques.js). Le rapport téléchargeable reprend ces règles (.g-*). */
.g-fig{position:relative;margin:18px 0;padding:16px 14px 10px;border:1px solid var(--g-trait,rgba(0,0,0,.1));border-radius:16px;background:var(--g-fond,#fff);color:var(--g-texte,#1d1d1f);--g-fond:var(--carte,#fff);--g-texte:var(--texte,#1d1d1f)}
.g-titre{font-weight:700;font-size:1.02rem;margin:0 4px 10px;line-height:1.35}
.g-zone{width:100%;overflow:hidden}
.g-svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.g-axe{font-size:12px;fill:currentColor;opacity:.62}
.g-ligne{stroke:currentColor;stroke-opacity:.1;stroke-width:1}
.g-zero{stroke:currentColor;stroke-opacity:.35;stroke-width:1.2}
.g-alerte{stroke-width:2;stroke-dasharray:6 5}
.g-zone-alerte{fill:#d55e00;fill-opacity:.07}
.g-lien{stroke:currentColor;stroke-opacity:.35;stroke-dasharray:3 3}
.g-valeur{font-size:11.5px;font-weight:700;fill:currentColor;opacity:.85}
.g-pc{font-size:12px;font-weight:700;fill:#fff;pointer-events:none}
.g-sur-barre{font-size:13px;font-weight:700;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:2px}
.g-hors-barre{font-size:13px;font-weight:700;fill:currentColor;pointer-events:none;paint-order:stroke;stroke:var(--g-fond,#fff);stroke-width:4px;stroke-linejoin:round}
.g-centre-v{font-size:22px;font-weight:800;fill:currentColor}
.g-centre-l{font-size:12px;fill:currentColor;opacity:.65}
.g-point{cursor:pointer;outline:none;transition:opacity .2s ease,filter .2s ease}
.g-survol .g-point:not(.g-actif){opacity:.4}
.g-point.g-actif,.g-point:focus-visible{filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.g-rond.g-actif{stroke-width:4}
.g-sous-alerte{stroke:#d55e00!important}
.g-bulle{position:absolute;z-index:5;pointer-events:none;background:#1d1d1f;color:#fff;border-radius:10px;padding:8px 11px;font-size:.86rem;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:240px}
.g-b-titre{font-weight:700;margin-bottom:2px}
.g-b-ligne{display:flex;align-items:center;gap:6px}
.g-pastille{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.g-legende{display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 2px 0}
.g-leg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--g-trait,rgba(0,0,0,.12));background:transparent;color:inherit;border-radius:999px;padding:5px 11px;font:inherit;font-size:.85rem;cursor:pointer;min-height:32px;transition:opacity .2s}
.g-leg.g-off{opacity:.42;text-decoration:line-through}
.g-outils{display:flex;justify-content:flex-end;margin-top:6px}
.g-image{background:transparent;border:0;color:inherit;opacity:.7;font:inherit;font-size:.82rem;text-decoration:underline;cursor:pointer;padding:6px 4px;min-height:32px}
.g-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g-anime .g-barre{transform-box:fill-box;transform-origin:50% 100%;animation:g-pousse .7s cubic-bezier(.2,.8,.2,1) both}
.g-anime .g-barre.g-neg{transform-origin:50% 0}
.g-anime .g-barre.g-horiz{transform-origin:50% 50%;animation-name:g-large}
.g-anime .g-trait{stroke-dasharray:1;animation:g-trace 1.3s cubic-bezier(.45,0,.2,1) both}
.g-anime .g-aire{animation:g-apparait .9s ease both}
.g-anime .g-rond,.g-anime .g-valeur,.g-anime .g-pc,.g-anime .g-sur-barre,.g-anime .g-hors-barre,.g-anime .g-lien{animation:g-apparait .45s ease both}
.g-anime .g-part{transform-box:view-box;transform-origin:50% 50%;animation:g-tourne .75s cubic-bezier(.2,.8,.2,1) both}
.g-anime .g-centre-v,.g-anime .g-centre-l{animation:g-apparait .6s ease .5s both}
@keyframes g-pousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes g-large{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes g-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes g-apparait{from{opacity:0}to{opacity:1}}
@keyframes g-tourne{from{opacity:0;transform:scale(.86) rotate(-12deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.g-anime *{animation:none!important}}
@media print{.g-fig{break-inside:avoid;border-color:#ccc}.g-legende,.g-outils,.g-bulle{display:none}.g-anime *{animation:none!important}}
/* 11/10 : blocs de code de la réponse (formules, version pour tableur) et graphiques dans la réponse */
.reponse-lue pre{background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;overflow-x:auto;margin:0 0 4px;font-size:.9rem;line-height:1.5}
.reponse-lue pre code{background:none;padding:0;white-space:pre}
.code-rep{margin:0 0 12px}
.code-copier{font-size:.88rem}
.note-graph{color:var(--texte-2)}
.reponse-lue .g-fig{--g-fond:var(--carte);--g-texte:var(--texte);--g-trait:var(--trait)}
/* 11/10 (Phil) : tableau de bord instantané */
.carte-chiffres{border:2px solid var(--accent)}
.chiffres-titre{margin:0 0 4px;font-size:1.2rem}
.chiffres-contenu{line-height:1.6;overflow-wrap:anywhere;--g-fond:var(--carte);--g-texte:var(--texte);--g-trait:var(--trait)}
.chiffres-contenu h3{font-size:1.1rem;margin:18px 0 10px}
.chiffres-contenu h3:first-child{margin-top:8px}
.chiffres-contenu h4{font-size:1rem;margin:16px 0 6px}
.chiffres-contenu h3 + ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;list-style:none;padding:0;margin:0 0 10px}
.chiffres-contenu h3 + ul li{background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;font-size:1.08rem;font-weight:700;font-variant-numeric:tabular-nums}
.chiffres-contenu h3 + ul li strong{font-size:.82rem;font-weight:600;color:var(--texte-2)}
.chiffres-contenu ul{padding-inline-start:22px}
.chiffres-contenu p{margin:0 0 10px}
#btnRapportChiffres{margin-top:4px}
/* 11/10 (Phil) : classement des actions : recherche, conseillé, favoris, étoiles, intertitres */
.raccourcis-ops{margin:0 0 14px}
.chercher-action{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--carte);color:var(--texte);min-height:48px}
.chercher-action:focus{outline:2px solid var(--accent);outline-offset:1px}
.aucune-action{margin:8px 2px}
.rangee{margin-top:12px}
.rangee-titre{margin:0 0 6px;font-weight:700;font-size:.92rem;color:var(--texte-2)}
.rangee-favoris .rangee-titre::before{content:"\2605\00a0";color:#e69f00}
.puces-actions{display:flex;flex-wrap:wrap;gap:8px}
.puce-action{font:inherit;font-size:.92rem;font-weight:600;border:1px solid var(--accent);background:var(--accent-doux);color:var(--accent-texte);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;text-align:start}
.puce-action:hover{background:var(--accent);color:var(--sur-accent)}
.op-ligne{position:relative}
.op-ligne .op{padding-inline-end:52px}
.op-etoile{position:absolute;top:6px;inset-inline-end:6px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--texte-2);font-size:1.35rem;line-height:1;cursor:pointer}
.op-etoile[aria-pressed="true"]{color:#e69f00}
.op-etoile:hover{background:var(--accent-doux)}
.famille-sous{margin:12px 2px 6px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-texte)}
.famille-sous:first-child{margin-top:2px}
/* 11/10 (Phil) : préparer mon rapport, pour qui */
.prep-publics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.prep-public{font:inherit;font-size:.92rem;border:1px solid var(--trait-fort);background:var(--carte);color:var(--texte);border-radius:999px;padding:8px 14px;min-height:42px;cursor:pointer}
.prep-public[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--sur-accent);font-weight:700}
.prep-autre{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--carte);color:var(--texte);margin:0 0 10px}
.prep-conseil{margin:0 0 12px}
.prep-parties{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.prep-partie{display:flex;align-items:flex-start;gap:8px;background:var(--surface);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;line-height:1.4}
.prep-partie input{margin-top:3px;width:18px;height:18px;flex:none}
#prepRapport textarea{width:100%;margin-bottom:12px}
/* 11/10 (Phil) : menu « Pour qui ? » */
.menu-pourqui,.prep-menu{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--carte);color:var(--texte);min-height:46px;margin-bottom:8px}
.pourqui-autre{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--carte);color:var(--texte);margin-bottom:10px}
/* 12/10 (Phil) : note de l'IA pour l'auteur seul, et signature du rapport */
.note-pour-moi{background:var(--surface);border:1px dashed var(--trait-fort);border-radius:var(--r-sm);padding:12px 14px;margin:16px 0}
.note-pour-moi-titre{font-weight:700;margin:0 0 6px}
.prep-signature{margin:6px 0 4px}
.prep-reste{margin:0 0 10px}
/* 12/10 (Phil) : mot de passe du rapport */
.prep-protection{background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;margin:8px 0 10px}
.prep-protection .prep-partie{background:none;padding:4px 0;font-weight:700}
.prep-mdp-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.prep-mdp-ligne input{flex:1 1 180px;margin:0}
.prep-mdp-ligne button{flex:none;min-height:44px}
/* 12/10 (Phil) : couleur de l'en-tete du rapport */
.prep-couleurs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.prep-couleur{width:44px;height:44px;border-radius:50%;border:3px solid var(--carte);box-shadow:0 0 0 1px var(--trait-fort);cursor:pointer;padding:0}
.prep-couleur[aria-checked="true"]{box-shadow:0 0 0 3px var(--texte)}
/* ===== 12/10/2026 (Phil) : Découvrir embellie, page Exemples, mode d'emploi complet ===== */
.sur-titre{margin:0 0 8px;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-texte)}
:lang(ar) .sur-titre,:lang(hi) .sur-titre,:lang(th) .sur-titre,:lang(ja) .sur-titre,:lang(zh) .sur-titre,:lang(ko) .sur-titre{letter-spacing:0;text-transform:none}
.hero-court{padding-bottom:8px}
/* Découvrir : un début court, avec une petite démonstration animée */

.puces-hero{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0}
.puces-hero li{background:var(--prive-fond);color:var(--prive);font-weight:700;font-size:.88rem;border-radius:999px;padding:7px 13px}
.demo{display:flex;flex-direction:column;align-items:center;gap:10px}
.demo-doc{position:relative;width:min(100%,320px);background:var(--carte);border-radius:18px;padding:22px 20px 18px;box-shadow:0 2px 6px rgba(0,0,0,.06),0 24px 48px rgba(91,33,182,.16);transform:rotate(-2deg)}
.demo-l{display:grid;margin:0 0 10px;font-weight:700;font-size:1.02rem}
.demo-l > span{grid-area:1/1;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-etq{justify-self:start;background:var(--c-identite);color:#1d1d1f;border-radius:6px;padding:0 6px;font-family:var(--mono);font-size:.92rem;opacity:0}
.demo-l2 .demo-etq{background:var(--c-coord)}
.demo-l3 .demo-etq{background:var(--c-ident)}
.demo-trait{display:block;height:8px;border-radius:4px;background:var(--surface);margin:10px 0 0}
.demo-trait.court{width:62%}
.demo-legende{display:flex;align-items:center;gap:8px;margin:0;font-size:.88rem;color:var(--texte-2);text-align:center}
.demo-cle{flex:0 0 auto;width:14px;height:14px;border-radius:4px;background:var(--c-identite)}
@media (prefers-reduced-motion:no-preference){
  .demo-vrai{animation:demo-av 6s ease-in-out infinite}
  .demo-etq{animation:demo-ap 6s ease-in-out infinite}
  .demo-l2 span{animation-delay:.35s}.demo-l3 span{animation-delay:.7s}
  .demo-doc{animation:demo-flotte 7s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.demo-vrai{opacity:0}.demo-etq{opacity:1}}
@keyframes demo-av{0%,30%{opacity:1;transform:none}40%,85%{opacity:0;transform:translateY(-6px)}95%,100%{opacity:1;transform:none}}
@keyframes demo-ap{0%,30%{opacity:0;transform:translateY(6px)}40%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px)}}
@keyframes demo-flotte{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-6px)}}
@media (max-width:720px){.hero-dec .appel,.puces-hero{justify-content:center}}
/* Tout ce que fait le Masque */
.f-grille{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.f-carte{background:var(--surface);border-radius:var(--r);padding:16px 16px 8px;display:flex;flex-direction:column}
.f-carte .ico{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--accent-doux);fill:var(--accent-texte);margin-bottom:8px}
.f-carte h3{margin:0 0 6px;font-size:1.04rem}
.f-carte p{margin:0 0 6px;color:var(--texte-2);font-size:.95rem;line-height:1.45;flex:1}
.f-carte .lien{align-self:flex-start;padding-inline:0}
/* Sans IA et sans internet : mis en avant */
.hors-ligne{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start;background:linear-gradient(160deg,var(--prive-fond),var(--carte) 70%);border:1px solid var(--prive-trait)}
.hl-badge{display:inline-block;margin:0 0 8px;background:var(--prive);color:var(--carte);font-weight:800;font-size:.85rem;border-radius:999px;padding:6px 12px}
.hors-ligne h2{margin-top:0}
.hl-liste{margin:6px 0 12px;padding-inline-start:20px;line-height:1.5}
.hl-liste li{margin-bottom:6px}
.hl-image{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);max-height:520px}
.hl-image img{display:block;width:100%;height:auto}
@media (max-width:720px){.hors-ligne{grid-template-columns:1fr}.hl-image{max-height:420px}}
/* Les exemples */
.ex-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:8px 0 16px}
.ex-carte{display:flex;flex-direction:column;gap:4px;background:var(--carte);border-radius:var(--r);padding:16px;box-shadow:var(--ombre);color:inherit;text-decoration:none;border-top:4px solid var(--ex-c,var(--accent))}
.card .ex-carte{background:var(--surface);box-shadow:none}
.ex-carte b{font-size:1.05rem}.ex-carte span:last-child{color:var(--texte-2);font-size:.94rem;line-height:1.4}
.ex-carte:hover b{color:var(--accent-texte);text-decoration:underline}
.ex-carte:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ex-c-cv{--ex-c:#1d4ed8}.ex-c-ent{--ex-c:#047857}.ex-c-mon{--ex-c:#9f1239}
.ex-avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ex-c,var(--accent));color:#fff;font-weight:800;font-size:1.1rem;flex:0 0 auto;margin-bottom:4px}
.ex-cas{border-top:5px solid var(--ex-c,var(--accent))}
.ex-tete{display:flex;gap:14px;align-items:flex-start;margin-bottom:8px}
.ex-tete h2{margin:2px 0 6px}.ex-tete p{margin:0;color:var(--texte-2)}
.ex-etapes{list-style:none;margin:14px 0 0;padding:0;counter-reset:ex}
.ex-e{position:relative;counter-increment:ex;border-radius:var(--r);padding:14px 14px 10px 54px;margin:0 0 12px;background:var(--surface)}
.ex-e::before{content:counter(ex);position:absolute;inset-inline-start:14px;top:14px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--carte)}
[dir="rtl"] .ex-e{padding:14px 54px 10px 14px}
.ex-e.prive{background:var(--prive-fond)}.ex-e.prive::before,.ex-e.prive .ex-lieu{color:var(--prive)}
.ex-e.public{background:var(--public-fond)}.ex-e.public::before,.ex-e.public .ex-lieu{color:var(--public)}
.ex-e.ex-fort{border:2px solid var(--prive)}
.ex-lieu{margin:0 0 2px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
:lang(ar) .ex-lieu,:lang(hi) .ex-lieu,:lang(th) .ex-lieu{text-transform:none;letter-spacing:0}
.ex-e h3{margin:0 0 6px;font-size:1.05rem}
.ex-e > p{margin:0 0 10px;line-height:1.5}
.ex-texte{margin:0;background:var(--carte);border-radius:var(--r-sm);padding:12px 14px;font-family:var(--mono);font-size:.82rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;border:1px solid var(--trait)}
.ex-repere{background:var(--c-identite);color:#1d1d1f;border-radius:4px;padding:0 3px;font-weight:700}
.ex-entier{margin:8px 0 4px}
.ex-entier summary{cursor:pointer;color:var(--accent-texte);font-weight:600;min-height:40px;display:flex;align-items:center}
.ex-entier .ex-texte{max-height:520px}
.ex-image{margin:0 0 10px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--trait);background:var(--carte);max-width:420px}
.ex-image img{display:block;width:100%;height:auto}
.ex-rapport{max-height:640px;overflow:auto}
.ex-petit{max-width:300px}
.ex-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin-bottom:6px}
.ex-duo .ex-image{max-width:none;max-height:520px;overflow:auto}
.ex-chemin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;font-weight:700}
.ex-chemin span:not([aria-hidden]){background:var(--carte);border-radius:999px;padding:5px 11px;border:1px solid var(--trait)}
.ex-champ{margin:0 0 6px}
.ex-mdp code{font-family:var(--mono);background:var(--carte);border:1px solid var(--trait);border-radius:6px;padding:2px 8px;font-size:.95rem;user-select:all}
.ex-langue{margin:0 0 14px}
/* Questions et détails : des volets */
.volet{border-top:1px solid var(--trait)}
.volet:last-child{border-bottom:1px solid var(--trait)}
.volet > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 2px;font-weight:700;font-size:1.04rem}
.volet > summary::-webkit-details-marker{display:none}
.volet > summary::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:2.5px solid var(--accent-texte);border-bottom:2.5px solid var(--accent-texte);transform:rotate(45deg);transition:transform .25s}
.volet[open] > summary::after{transform:rotate(-135deg)}
.volet-corps{padding:0 2px 14px}
.securite > .volet,.chiffres > .volet{margin-top:10px}
/* Mode d'emploi */
.som-2col{columns:2 240px;column-gap:28px}
.som-2col li{break-inside:avoid}
.liste-puces{margin:6px 0 12px;padding-inline-start:20px;line-height:1.5}
.liste-puces li{margin-bottom:6px}
.card h3{margin:16px 0 6px;font-size:1.04rem}
.encadre-hl{background:var(--prive-fond);border:1px solid var(--prive-trait);border-radius:var(--r);padding:4px 16px 8px;margin:10px 0 14px}
.encadre-hl h3{color:var(--prive)}
@media (max-width:560px){.f-grille{grid-template-columns:1fr 1fr;gap:8px}.f-carte{padding:12px 12px 4px}.f-carte h3{font-size:.95rem}.f-carte p{font-size:.86rem}.f-carte .ico{width:30px;height:30px;padding:6px}}
/* 12/10 : revue de Léa */

.puces-hero{gap:6px}.puces-hero li{background:var(--accent-doux);color:var(--accent-texte);padding:6px 11px}

@media (prefers-reduced-motion:no-preference){.demo-vrai,.demo-etq,.demo-doc{animation-iteration-count:3;animation-fill-mode:forwards}}
@keyframes demo-av{0%,30%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes demo-ap{0%,30%{opacity:0;transform:translateY(6px)}40%,100%{opacity:1;transform:none}}
.hl-image{position:relative;min-height:260px}
.hl-image::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(transparent,var(--carte));pointer-events:none}
.ex-lieu{font-size:.82rem}
.hero-court .sous-accroche{text-align:start}
.volet-chips{margin-top:12px;border-top:0}
.volet-chips > summary{font-size:.98rem;color:var(--prive)}
.som-2col{list-style:decimal}

/* 14/10 (Phil) : rubrique « Mon métier », normes à cocher et « Retirer les données perso pour ce travail » */
.normes{border:1px solid var(--trait);border-radius:var(--r-sm);padding:10px 12px 4px;margin:10px 0;min-width:0}
.normes legend{padding:0 4px;margin:0}
.normes > .petit{margin:0 0 6px}
.norme{display:flex;align-items:flex-start;gap:10px;padding:8px 0;cursor:pointer;line-height:1.35;overflow-wrap:anywhere}
.normes .norme + .norme{border-top:1px solid var(--trait)}
.norme input[type=checkbox]{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.norme-tags{font-size:.82rem;color:var(--texte-2)}
.case-retirer{background:var(--carte);border:2px solid var(--accent);border-radius:var(--r-sm);padding:12px;margin:12px 0}
/* 14/10 (Phil, ADR 2026-10-14) : le nom n'est plus stylisé en logo, une seule couleur ; il passe à la ligne sur petit écran */
.marque .mask,#impression-tete .mask{color:inherit}

/* 14/10 (Phil) : « Écrire avec ma voix » */
.case-voix{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-sm);padding:12px;margin:12px 0 6px}
.voix-bloc{margin:0 0 10px}
/* 14/10 (Phil) : « Mes consignes », repliées par défaut pour ne pas encombrer */
.consignes{border:1px solid var(--trait);border-radius:var(--r-sm);padding:10px 12px;margin:12px 0 6px;background:var(--carte)}
.consignes > summary{cursor:pointer;font-weight:700;color:var(--accent-texte);min-height:32px}
.consignes select{width:100%}
.consigne-params{margin:0 0 8px 32px}
.consigne-params input{width:100%}
/* 14/10 (Phil) : chaque famille dit à quoi elle sert, sous son nom */
.famille-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.famille-nom{font-weight:700}
.famille-desc{font-size:.86rem;font-weight:400;color:var(--texte-2);line-height:1.35}
.famille-btn .chevron,.famille-btn .famille-nb{flex:0 0 auto}
/* 14/10 (Phil) : sous-rubriques repliées dans chaque rubrique */
.sous-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:none;border:0;border-bottom:1px solid var(--trait);
  padding:14px 6px;min-height:48px;font:inherit;font-weight:700;color:var(--accent-texte);cursor:pointer}
.sous-btn .famille-nb,.sous-btn .chevron{flex:0 0 auto}
.sous-btn .famille-nb{margin-inline-start:auto}
.sous-btn[aria-expanded="true"] .chevron{transform:rotate(225deg);margin-top:4px}
.sous-corps{padding:8px 0 4px}
/* 14/10 (Phil) : « Que voulez-vous faire ? », toutes les rubriques en tuiles, et l'entrée directe en haut */
.entree-directe{width:100%;margin:0 0 16px}
.choix-tuiles{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
@media (min-width:640px){ .choix-tuiles{grid-template-columns:1fr 1fr} .choix-detail{grid-column:1 / -1} }
.choix-tuile{display:flex;flex-direction:column;gap:4px;text-align:start;background:var(--carte);border:1px solid var(--trait-fort);border-radius:var(--r-sm);
  padding:14px 16px;font:inherit;color:var(--texte);cursor:pointer;min-height:64px}
.choix-tuile[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-doux)}
.choix-detail{border-inline-start:3px solid var(--accent);padding:4px 0 8px 12px;display:flex;flex-direction:column;gap:8px}
.choix-detail-titre{font-weight:700;margin:4px 0}
.choix-rappel{background:var(--accent-doux);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 12px}
.choix-rappel p{margin:6px 0}
.voir-choix{margin:0 0 10px}
.choix-detail .sous-corps{display:flex;flex-direction:column;gap:8px}
/* 14/10 (Phil) : la rubrique choisie forme un seul bloc de couleur, et reste seule à l'écran */
.retour-rubriques{display:block;margin:2px 0 12px;font-weight:700}
.famille-btn[aria-expanded="true"]{border:2px solid var(--accent);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;margin-bottom:0}
.famille-btn[aria-expanded="true"] + .famille-corps{border:2px solid var(--accent);border-top:0;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--accent-doux);padding:6px 12px 14px;margin-bottom:12px}
.focus-famille > .famille-btn[aria-expanded="false"]{display:none}
.famille-corps .sous-btn{border-bottom-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.choix-tuiles.focus{gap:0}
.choix-tuiles.focus .choix-tuile[aria-expanded="false"]{display:none}
.choix-tuiles.focus .choix-tuile{grid-column:1 / -1}
.choix-tuile[aria-expanded="true"]{border:2px solid var(--accent);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0}
.choix-tuile[aria-expanded="true"] + .choix-detail{border:2px solid var(--accent);border-top:0;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--accent-doux);padding:6px 12px 14px}
.choix-detail .op{background:var(--carte)}
.famille-corps .op-ligne .op{background:var(--carte)}

/* =====================================================================
   14/10/2026 (Phil) : page Découvrir vivante, inspirée du site vitrine
   ===================================================================== */

@media (prefers-reduced-motion:no-preference){
  
  
  /* l'ouverture ne s'arrête plus après trois tours : un bouton met tout en pause */
  
  .demo-scan{animation:pm-balaie 6s ease-in-out infinite}
}

.demo-scan{position:absolute;left:12px;right:12px;top:18px;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 16px var(--accent);opacity:0}

/* partage par code QR */

/* bouton « Partager » toujours à portée de main */

.hors-ecran{position:fixed;top:-1000px;left:0}

/* les rubriques apparaissent au défilement */
.apparait{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.apparait.vu{opacity:1;transform:none}

/* tout en pause (bouton) : animations CSS arrêtées, image finale */
html.anim-pause *,html.anim-pause *::before,html.anim-pause *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){ .pm-tel,.pm-qr-vu,.pm-da,.pm-coche,.apparait{transition:none} }

/* 14/10 (Phil) : comme dans la réalité, le téléphone qui scanne passe DEVANT celui qui montre le code */

/* 15/10 (Phil) : « Les autres outils » : une vignette de la couleur de l'outil, sans logo ni marque */

/* 15/10/2026 (Phil) : en-tête et menu communs (entete-commun.css) ; lignes propres au Masque dans le menu commun */
.dn-ligne-double{display:block;padding:10px 16px;border-bottom:1px solid var(--dn-ligne)}
.dn-ligne-double .dn-ligne{padding:0;border:0;min-height:44px}
.dn-sous{margin:2px 0 0;font-size:.88rem;line-height:1.45;color:var(--dn-doux)}
.dn-groupe .encart{margin:8px 16px 12px}
.dn-groupe .grille{display:grid;gap:10px}
/* 15/10 : sur téléphone, jamais de fond transparent derrière un texte (règle de Phil) : barre des étapes opaque */
@media (max-width:640px){nav.bas{background:var(--carte)}}

/* 15/10/2026 : une case proposee d'apres les consignes de la personne, a verifier */
.tag-verifier{display:inline-block;margin-inline-start:8px;padding:1px 9px;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1.5;
  background:var(--accent-doux);color:var(--accent-texte);border:1px solid var(--accent);vertical-align:middle;white-space:nowrap}
/* 15/10/2026 : les cartes « vie » de l'en-tête commun imposent fond, bord et coins ; on garde visible le choix fait */
.choix-tuile.dn-vie-carte[aria-expanded="true"]{background:var(--accent-doux)!important;border:2px solid var(--accent)!important;border-bottom:0!important;border-radius:var(--r-sm) var(--r-sm) 0 0!important;transform:none}
.op.dn-vie-carte[aria-pressed="true"]{background:var(--accent-doux)!important;border-color:var(--accent)!important}

/* 15/10/2026 (Phil) : l'ecran d'une action avec consignes, en 4 etapes */
.etape-op{margin:18px 0 6px;padding:14px 14px 10px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--carte)}
.etape-op-titre{margin:0 0 8px;font-size:1.05rem;color:var(--texte)}
.depot-consignes{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 14px;margin:4px 0 12px;
  border:2px dashed var(--accent);border-radius:var(--r-sm);background:var(--surface)}
.depot-consignes.survol{background:var(--accent-doux);border-style:solid}
.depot-consignes .depot-titre{margin:0;font-weight:700;font-size:1rem}
.depot-consignes .petit{margin:0 0 4px}
.toutes-regles,.plus-options{margin:10px 0;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--carte);padding:4px 14px}
.toutes-regles>summary,.plus-options>summary{cursor:pointer;font-weight:700;padding:10px 0;color:var(--accent-texte)}
.toutes-regles[open]>summary,.plus-options[open]>summary{margin-bottom:6px;border-bottom:1px solid var(--trait)}
/* 19/10/2026 (Phil) : les actions s'enchaînent */
.suite-travail{margin:18px 0 6px;padding:14px 16px;border-radius:14px;border:2px solid var(--violet,#7c3aed);background:color-mix(in srgb,var(--violet,#7c3aed) 8%,transparent)}
.suite-travail h3{margin:0 0 4px;font-size:1.05rem}
.puces-suite{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.puce-suite{font:inherit;font-weight:700;padding:10px 14px;border-radius:999px;border:1px solid var(--violet,#7c3aed);background:var(--carte,#fff);color:inherit;cursor:pointer}
.puce-suite:hover,.puce-suite:focus-visible{background:var(--violet,#7c3aed);color:#fff}
.case-precedent{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;margin:0 0 12px;padding:10px 12px;border-radius:12px;border:1px solid var(--violet,#7c3aed);background:color-mix(in srgb,var(--violet,#7c3aed) 8%,transparent)}
.case-precedent input{margin-top:3px}.case-precedent span{font-weight:700}.case-precedent small{grid-column:2;opacity:.85}
.options-op,.op-ligne{scroll-margin-top:130px}   /* 19/10 : le haut du formulaire ne passe plus sous la barre du haut */
.prep-mode-choix{display:flex;gap:10px;align-items:flex-start}.prep-mode-choix small{opacity:.85;font-weight:400}   /* 19/10 : rapport ou document prêt à envoyer */
/* 19/10 : la question sur l IA n a pas de reponse : un message bien visible sous la question */
.alerte-ia{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border-inline-start:4px solid var(--danger);color:var(--texte);font-weight:600}

/* 19/10 (Phil) : « Que voulez-vous faire ? » en haut de l'accueil */
.cherche-grand{margin:6px 0 14px}
.cherche-grand input[type=search]{width:100%;font:inherit;font-size:1.15rem;padding:14px 16px;border-radius:14px;border:2px solid var(--accent);background:var(--surface);color:var(--texte)}
.cherche-exemples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px}
.cherche-resultats{display:grid;gap:8px;margin-top:10px}
.cherche-resultats:empty{display:none}
.cherche-titre{margin:4px 0 0;font-weight:600}
.ou-rubrique{margin:16px 0 4px;font-weight:600}
.cherche-exemples .idee::before{content:none}

/* 19/10 (Phil) : ecouter la demande avant de l'envoyer, avec la duree d'ecoute a cote */
.ecoute-demande{margin-top:10px}
.duree-ecoute{margin-inline-start:8px;font-size:.85rem;opacity:.8;font-weight:500}
.duree-ecoute:empty{display:none}

/* 19/10 (Phil) : la fiche, visible a l'etape 1 */
.fiche-visible{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:12px 14px;border-radius:var(--r-sm);border:1px dashed var(--accent);background:var(--surface);color:var(--texte);font:inherit;text-align:start;cursor:pointer}
.fiche-visible b{display:block}
.fiche-visible small{display:block;color:var(--texte-2);font-size:.88rem;margin-top:2px}
.fiche-ico{font-size:1.4rem}

/* 20/10 (Phil) : la rubrique du document, en couleur, et son action principale */
.famille-btn.famille-du-doc{border:2px solid var(--accent);background:var(--accent-doux)}
.pour-doc{display:inline-block;align-self:flex-start;margin:0 0 4px;padding:2px 10px;border-radius:999px;background:var(--accent);color:var(--sur-accent);font-size:.8rem;font-weight:700}
/* le style commun des cartes (dn-vie-carte) pose sa propre bordure : celle-ci doit passer devant */
.famille-corps .op-ligne.op-du-doc .op{border:2px solid var(--accent)!important;background:var(--accent-doux)!important}
/* 20/10 : une sous-rubrique ou une autre rubrique qui contient une action conseillee pour ce document */
.sous-btn.sous-du-doc{border-inline-start:4px solid var(--accent)!important;padding-inline-start:10px}
.famille-btn.famille-aussi{border:2px dashed var(--accent)}
@media (forced-colors:active){.famille-btn.famille-du-doc,.op-du-doc .op{outline:3px solid Highlight}}
/* 20/10 : ce qui est repris du travail precedent */
.deja-repris{margin:-4px 0 12px;padding:8px 12px;border-radius:var(--r-sm);background:var(--accent-doux)}
.deja-repris .lien{margin-inline-start:4px}
/* 20/10 : en arrivant sur les graphiques, leur haut ne passe pas sous la barre du haut ni sous « Retour » */
#carteChiffres{scroll-margin-top:140px}

/* ---------- 26/10/2026 (Phil) : parcours simple, une seule chose en couleur ---------- */
/* étape 1 : l'appareil photo en grand, le fichier en dessous, plus discret */
.tuiles-depot{grid-template-columns:1fr}
.tuile-photo{min-height:150px;font-size:1.15rem;font-weight:700;background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.tuile-photo .ico{width:46px;height:46px;color:var(--sur-accent)}
.tuile-photo:hover{filter:brightness(1.08)}
.tuile-fichier{min-height:0;flex-direction:row;flex-wrap:wrap;gap:4px 10px;padding:12px}
.tuile-fichier .ico{width:22px;height:22px}
.tuile-fichier .tuile-petit{width:100%;margin-top:0}
#src{min-height:90px}
/* Ma fiche : une petite ligne, plus un cadre */
.fiche-visible.fiche-ligne{border:0;background:none;padding:4px 0;margin:2px 0 10px;gap:8px}
.fiche-visible.fiche-ligne b{font-weight:600;color:var(--accent-texte);text-decoration:underline;text-underline-offset:3px}
.fiche-visible.fiche-ligne small{display:none}
/* 26/10 : la ligne de la fiche dit son état ; « Comment ça marche » à côté */
.fiche-zone{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:2px 0 10px}
.fiche-zone .fiche-visible.fiche-ligne{width:auto;margin:0;flex:0 1 auto}
.fiche-zone .fiche-visible.fiche-ligne small{display:inline;margin:0}
.fiche-visible.fiche-ligne[data-etat=ouverte] b{text-decoration:none;color:var(--ok-texte,var(--texte))}
/* étape 3 : trois manières d'afficher */
.propositions,.barre-seule,.barre-tout{display:none}
#listeOps.mode-propositions > :not(.propositions){display:none}
#listeOps.mode-propositions > .propositions{display:block}
#listeOps.mode-tout > .barre-tout{display:block;margin:0 0 10px}
#listeOps.mode-seule > .barre-seule{display:block;margin:0 0 10px}
#listeOps.mode-seule > .raccourcis-ops,#listeOps.mode-seule > .retour-rubriques,#listeOps.mode-seule .famille-btn,
#listeOps.mode-seule .sous-btn,#listeOps.mode-seule .op-ligne:not(.op-active){display:none!important}
#listeOps.mode-seule .famille-corps,#listeOps.mode-seule .sous-corps{border:0!important;padding:0!important;margin:0!important;background:none!important}
.propositions-titre{font-weight:600;margin:4px 0 10px}
.proposition{display:block;width:100%;text-align:start;margin:0 0 10px;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--trait);color:var(--texte);font:inherit;cursor:pointer}
.proposition .t{display:block;font-weight:700;font-size:1.05rem}
.proposition .s{display:block;color:var(--texte-2);font-size:.9rem;margin-top:4px}
.proposition:hover{border-color:var(--accent)}
.proposition-premiere{border:2px solid var(--accent);background:var(--accent-doux)}
.proposition-badge{display:inline-block;font-size:.75rem;font-weight:700;background:var(--accent);color:var(--sur-accent);border-radius:999px;padding:2px 10px;margin-bottom:6px}
.propositions-autre{display:inline-block;margin-top:4px}
/* dans la liste complète, plus de cartes surlignées en plus : seule l'action choisie est en couleur */
.famille-corps .op-ligne.op-du-doc .op{border:2px solid transparent!important;background:var(--carte)!important}
.famille-corps .op-ligne.op-du-doc .op[aria-pressed="true"]{border-color:var(--accent)!important;background:var(--accent-doux)!important}
.sous-btn.sous-du-doc{border-inline-start:0!important;padding-inline-start:inherit}
/* les graphiques, repliés après l'étape 3 */
.chiffres-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.chiffres-tete .chiffres-titre{margin:0}
@media (forced-colors:active){.proposition-premiere{outline:3px solid Highlight}}
.carte-chiffres{border:1px solid var(--trait)}
/* la touche « vie » commune pose son propre fond sur les cartes : le bouton photo garde sa couleur */
#btnPhoto.tuile-photo{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--sur-accent)!important}
.alerte-piege ul{margin:6px 0 10px;padding-inline-start:20px}.alerte-piege li{margin:4px 0;font-style:italic;overflow-wrap:anywhere}

/* 26/10 : ce qu'on sait de l'IA choisie, sous la liste */
.ia-info{margin:6px 0 10px;color:var(--texte-2)}
.ia-conseil{margin:4px 0 8px;font-size:.95rem}
/* 26/10 (Phil) : la rubrique du menu ouverte par « En savoir plus » se voit d'un coup d'oeil (teinte posée sur un fond plein) */
.dn-menu details.dn-acc.dn-acc-cible{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-inline-start:4px solid var(--accent);border-radius:10px;scroll-margin-top:var(--dn-tete-menu,96px)}
.dn-menu details.dn-acc.dn-acc-cible > summary{font-weight:700}

/* 26/10 (Phil) : le tableau « Comparer les IA » : la première colonne reste visible quand on fait défiler */
.comparer-boite{max-width:min(980px,100%);min-width:0}
#comparerIA{overflow-x:hidden}
.comparer-zone{overflow-x:auto;max-width:100%;border:1px solid var(--trait);border-radius:var(--r-sm);margin:10px 0}
.comparer-ia{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem}
.comparer-ia th,.comparer-ia td{padding:8px 10px;border-bottom:1px solid var(--trait);text-align:start;vertical-align:top}
.comparer-ia thead th{background:var(--surface);font-weight:700}
.comparer-ia tbody th{position:sticky;inset-inline-start:0;background:var(--carte);font-weight:600;min-width:140px;z-index:1}
.comparer-ia tr.choisie th,.comparer-ia tr.choisie td{background:color-mix(in srgb,var(--accent) 12%,var(--carte))}
.comparer-ia .niv{white-space:nowrap}.comparer-ia .niv3{font-weight:600}.comparer-ia .niv0{color:var(--texte-2)}
.ia-comparer{margin:0 0 12px}

/* 26/10 (Phil : « un tableau visuel hyper clair ») : pastilles de couleur, ligne cliquable ; sur téléphone, une carte par IA */
.comparer-ia tbody tr{cursor:pointer}
.comparer-ia tbody tr:hover td,.comparer-ia tbody tr:hover th{background:color-mix(in srgb,var(--accent) 7%,var(--carte))}
.cmp-choisir{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-weight:700;color:var(--texte)}
.cmp-choisir:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.cmp-coche{font-size:.78rem;font-weight:600;color:var(--accent-texte);text-decoration:underline;text-underline-offset:2px}
tr.choisie .cmp-coche{text-decoration:none}
.pastille{display:inline-block;padding:3px 9px;border-radius:999px;white-space:nowrap;font-size:.84rem;border:1px solid transparent}
.pastille.bon{background:#dcfce7;color:#14532d;border-color:#86efac}
.pastille.moyen{background:#fef3c7;color:#713f12;border-color:#fcd34d}
.pastille.faible{background:#fee2e2;color:#7f1d1d;border-color:#fca5a5}
.pastille.inconnu{background:var(--surface);color:var(--texte-2);border-color:var(--trait)}
.pastille.neutre{background:var(--surface);color:var(--texte)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pastille.bon{background:#14532d;color:#dcfce7;border-color:#166534}
  :root:not([data-theme="light"]) .pastille.moyen{background:#713f12;color:#fef3c7;border-color:#854d0e}
  :root:not([data-theme="light"]) .pastille.faible{background:#7f1d1d;color:#fee2e2;border-color:#991b1b}}
:root[data-theme="dark"] .pastille.bon{background:#14532d;color:#dcfce7;border-color:#166534}
:root[data-theme="dark"] .pastille.moyen{background:#713f12;color:#fef3c7;border-color:#854d0e}
:root[data-theme="dark"] .pastille.faible{background:#7f1d1d;color:#fee2e2;border-color:#991b1b}
.cmp-legende{margin:4px 0 0}
@media (max-width:700px){
  .comparer-zone{border:0;overflow:visible}
  .comparer-ia{min-width:0}
  .comparer-ia thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .comparer-ia,.comparer-ia tbody,.comparer-ia tr,.comparer-ia td,.comparer-ia tbody th{display:block}
  .comparer-ia tbody tr{border:1px solid var(--trait);border-radius:var(--r-sm);margin:0 0 12px;padding:10px 12px;background:var(--carte)}
  .comparer-ia tbody th{position:static;border:0;padding:0 0 8px;min-width:0;background:none}
  .comparer-ia tbody th .cmp-choisir{flex-direction:row;justify-content:space-between;align-items:center;font-size:1.02rem}
  .comparer-ia td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;padding:4px 0}
  .comparer-ia td::before{content:attr(data-col);color:var(--texte-2);font-size:.84rem}
  .comparer-ia tr.choisie{border:2px solid var(--accent)}
}

/* 26/10 (Phil) : l'IA choisie par l'outil, sur une ligne, à la place de la liste ; « Changer d'IA » rouvre la liste */
#carte-bloc.ia-auto-on #choixIA{display:none}
.ia-auto{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px;margin:6px 0 4px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface)}
.ia-auto-nom{font-weight:700}
.ia-auto-pourquoi{color:var(--texte-2)}
.ia-auto-changer{margin-inline-start:auto}

/* 26/10 : marques [CONSTAT], [HYPOTHÈSE]… en petites pastilles */
.etq{display:inline-block;margin-inline-end:4px;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;line-height:1.6;vertical-align:.08em;background:var(--surface);color:var(--texte-2);border:1px solid var(--trait)}

/* 26/10 (Phil) : les chiffres clés de la réponse, en grandes cases */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0 16px}
.kpi{background:var(--carte);border:1px solid var(--trait);border-top:5px solid var(--accent);border-radius:14px;padding:12px 14px}
.kpi:nth-child(2){border-top-color:#0072b2}.kpi:nth-child(3){border-top-color:#009e73}.kpi:nth-child(4){border-top-color:#d55e00}
.kpi-val{display:block;font-size:1.45rem;font-weight:800;line-height:1.15}
.kpi-lib{display:block;font-weight:600;margin-top:4px;line-height:1.3}.kpi-det{display:block;font-size:.85rem;color:var(--texte-2)}

/* 26/10 (Phil : « pas compris, rien en cliquant ») : dans « Répondre à l'IA », les codes se voient en couleur */
.fenetre-apercu .code-cache{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-texte);border-radius:6px;padding:0 4px;font-weight:600}
.repondre-etat{margin:6px 0 10px;font-size:.92rem}
.repondre-etat.rien{color:var(--texte-2)}
.repondre-outils{margin:6px 0 12px}

.fenetre-apercu [role=button]{cursor:pointer;border-radius:5px}
.fenetre-apercu .mot-libre:hover,.fenetre-apercu .mot-libre:focus-visible{background:color-mix(in srgb,var(--accent) 10%,transparent);outline:1px dashed var(--accent)}
.fenetre-apercu .code-cache:hover,.fenetre-apercu .code-cache:focus-visible{outline:2px solid var(--accent)}

/* 26/10/2026 (Phil : « une qualité graphique exceptionnelle ») : cadre soigné, pistes, lueur, étiquettes */
.g-fig{background:linear-gradient(180deg,color-mix(in srgb,var(--g-fond,#fff) 94%,#7c3aed 6%),var(--g-fond,#fff) 55%);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(40,20,90,.08);border-radius:20px;padding:18px 16px 12px}
.g-titre{display:flex;align-items:center;gap:10px;font-size:1.06rem;letter-spacing:-.005em}
.g-titre::before{content:"";flex:none;width:6px;height:1.1em;border-radius:3px;background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.g-piste{fill:currentColor;fill-opacity:.035}
.g-piste-anneau{stroke:currentColor;stroke-opacity:.06}
.g-ligne{stroke-dasharray:3 4;stroke-opacity:.14}
.g-axe{font-size:11.5px;opacity:.58}
.g-valeur{font-size:12px;font-weight:800;opacity:.9}
.g-badge-t{font-size:11.5px;font-weight:800;fill:#fff}
.g-centre-v{font-size:28px;letter-spacing:-.02em}
.g-part{transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease;transform-box:view-box;transform-origin:50% 50%}
.g-part.g-actif{transform:scale(1.035)}
.g-bulle{background:rgba(24,24,32,.94);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.g-leg{transition:background .2s ease,opacity .2s ease}.g-leg:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.g-anime .g-badge{animation:g-apparait .5s ease both}
@media print{.g-fig{box-shadow:none;background:#fff}}
/* >>> RAPPORT EMBELLI (copie de js/rapport.js, refaite par le script embellir.py) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px}
.kpi{background:var(--carte);border:1px solid var(--trait);border-top:5px solid var(--accent);border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.kpi:nth-child(2){border-top-color:var(--accent-2)}.kpi:nth-child(3){border-top-color:#009e73}.kpi:nth-child(4){border-top-color:var(--alerte)}
.kpi-val{display:block;font-size:1.65rem;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.kpi-lib{display:block;font-weight:650;margin-top:6px;line-height:1.3}.kpi-det{display:block;font-size:.85rem;color:var(--texte-2);margin-top:2px}
.p-icone{font-size:1.3rem;line-height:1;margin-inline-end:2px;flex:0 0 auto}.partie-titre h2{flex:1 1 auto}
.reponse-lue .partie-cle{border:2px solid var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--carte)),var(--carte) 70%)}
.li-faire{list-style:none;position:relative;margin:10px 0;padding:10px 12px 10px 42px;border-radius:12px;background:color-mix(in srgb,#009e73 9%,var(--carte));border:1px solid color-mix(in srgb,#009e73 40%,transparent)}
.li-faire::before{content:"✓";position:absolute;inset-inline-start:14px;top:9px;font-weight:800;color:#009e73}
ul:has(>.li-faire),ol:has(>.li-faire){padding-inline-start:0}
.lexique{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:8px 0}
.reponse-lue ul:has(>li.li-long),.reponse-lue ol:has(>li.li-long){padding-inline-start:0}
.reponse-lue li.li-long{list-style:none;margin:0 0 14px;padding:14px 16px;background:var(--surface);border-radius:14px;border-inline-start:4px solid var(--trait);line-height:1.7}
.li-tete{font-size:1.05rem}
.statut{display:inline-block;margin:0 8px 6px 0;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;vertical-align:.1em}
.st-negocier{background:#fde68a;color:#713f12}.st-eclaircir{background:#bfdbfe;color:#1e3a8a}.st-verifier{background:#ddd6fe;color:#4c1d95}.st-attention{background:#fecaca;color:#7f1d1d}.st-bon{background:#bbf7d0;color:#14532d}
li.li-long:has(.st-negocier){border-inline-start-color:#d97706}li.li-long:has(.st-eclaircir){border-inline-start-color:#2563eb}li.li-long:has(.st-attention){border-inline-start-color:#dc2626}li.li-long:has(.st-bon){border-inline-start-color:#16a34a}
q.cit{display:block;quotes:none;margin:8px 0;padding:8px 12px;border-inline-start:3px solid var(--accent-2);background:var(--carte);border-radius:0 10px 10px 0;font-style:italic;color:var(--texte-2)}
q.cit::before,q.cit::after{content:none}
.nb{font-weight:700;color:var(--accent);white-space:nowrap}q.cit .nb{color:inherit}
.pc-violet{border-inline-start-color:#7c3aed!important}.pc-rouge{border-inline-start-color:#dc2626!important}.pc-orange{border-inline-start-color:#ea580c!important}.pc-vert{border-inline-start-color:#16a34a!important}.pc-bleu{border-inline-start-color:#2563eb!important}.pc-ambre{border-inline-start-color:#d97706!important}.pc-turquoise{border-inline-start-color:#0d9488!important}

.pc-rouge .p-icone{background:#fee2e2}.pc-orange .p-icone{background:#ffedd5}.pc-vert .p-icone{background:#dcfce7}.pc-bleu .p-icone{background:#dbeafe}.pc-ambre .p-icone{background:#fef3c7}.pc-turquoise .p-icone{background:#ccfbf1}.pc-violet .p-icone{background:#ede9fe}
.pc-rouge .li-tete{color:#b91c1c}.pc-orange .li-tete{color:#c2410c}.pc-vert .li-tete{color:#15803d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-rouge .li-tete{color:#fca5a5}:root:not([data-theme="light"]) .pc-orange .li-tete{color:#fdba74}:root:not([data-theme="light"]) .pc-vert .li-tete{color:#86efac}}
:root[data-theme="dark"] .pc-rouge .li-tete{color:#fca5a5}:root[data-theme="dark"] .pc-orange .li-tete{color:#fdba74}:root[data-theme="dark"] .pc-vert .li-tete{color:#86efac}
.cit-ref{display:block;margin-top:4px;font-style:normal;font-size:.8rem;color:var(--texte-2)}q.cit .cit-ref{order:2}
q.cit-question{border-inline-start-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--carte));color:var(--texte);font-style:normal;font-weight:600}
.sous-lib{display:block;margin:10px 0 2px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.fiche{background:var(--surface);border-radius:12px;padding:12px 14px;border-inline-start:4px solid var(--accent-2)}.fiche b{display:block;margin-bottom:3px}.fiche p{margin:0;font-size:.95rem;color:var(--texte-2)}
.etq{display:inline-block;margin-inline-end:4px;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;line-height:1.6;vertical-align:.08em;background:var(--surface);color:var(--texte);border:1px solid var(--trait)}
.reponse-lue{--accent-2:#0072b2;--alerte:#d55e00}
.reponse-lue .titre-partie{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:22px 0 10px;border-radius:12px;background:var(--surface);border-inline-start:5px solid var(--trait)}
.reponse-lue .titre-partie .p-icone{flex:none}
.reponse-lue .pc-violet{border-inline-start-color:#7c3aed}.reponse-lue .pc-rouge{border-inline-start-color:#dc2626}.reponse-lue .pc-orange{border-inline-start-color:#ea580c}.reponse-lue .pc-vert{border-inline-start-color:#16a34a}.reponse-lue .pc-bleu{border-inline-start-color:#2563eb}.reponse-lue .pc-ambre{border-inline-start-color:#d97706}.reponse-lue .pc-turquoise{border-inline-start-color:#0d9488}
/* <<< RAPPORT EMBELLI */

/* 26/10 : l'encadré de l'identité fictive */
.identite-fictive{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--trait);border-radius:14px;background:var(--surface)}
.if-titre{margin:0 0 6px}
.if-liste{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
.if-liste li{overflow-wrap:anywhere}
.if-vrai{color:var(--texte-2)}
.if-faux{color:var(--accent-texte)}
.if-actions{gap:10px;flex-wrap:wrap;align-items:center}
.if-garder{display:inline-flex;gap:6px;align-items:center;font-size:.92rem}

.ia-refus{margin:0 0 10px}.ia-refus summary{cursor:pointer;font-size:.92rem;font-weight:600;color:var(--accent-texte)}.ia-refus p{margin:6px 0}

/* 26/10 : « Ce que peut voir l'IA » */
.controle-ia{margin:0 0 14px;padding:10px 14px;border:1px solid var(--trait);border-radius:14px;background:var(--surface)}
.controle-ia summary{cursor:pointer}
.controle-ia.ctrl-alerte{border-color:color-mix(in srgb,#d97706 55%,transparent);background:color-mix(in srgb,#d97706 7%,var(--surface))}
.controle-ia.ctrl-alerte summary #ctrlResume{color:#b45309;font-weight:600}
.ctrl-liste{margin:8px 0;padding-inline-start:18px}.ctrl-liste li{margin:4px 0}.ctrl-recouper{font-weight:600}
/* 26/10 : l'étape 5 montre où copier dans l'IA, puis où coller */
.guide-copie{margin:12px 0 16px;padding:16px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--carte)),var(--carte));border:1px solid var(--trait)}
.gc-scene{display:flex;flex-direction:column;align-items:center;gap:6px}
.gc-ia{width:min(100%,420px);padding:12px 14px;border-radius:16px;background:var(--carte);border:1px solid var(--trait);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.gc-qui{display:block;font-size:.78rem;font-weight:700;color:var(--texte-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.gc-bulle i{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--texte) 18%,transparent);margin:6px 0}.gc-bulle i.court{width:60%}
.gc-outils{display:flex;align-items:center;gap:10px;margin-top:10px}
.gc-ic{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--texte-2)}
.gc-ic svg{width:18px;height:18px;fill:currentColor}
.gc-copier{color:var(--accent-texte);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.gc-anneau{position:absolute;inset:-6px;border-radius:12px;border:2px solid var(--accent)}
.gc-doigt{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(124,58,237,.35);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);right:-10px;bottom:-12px}
.gc-copie{margin-inline-start:4px;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700}
.gc-fleche svg{width:30px;height:30px;fill:var(--accent)}
.gc-etapes{margin:10px auto 6px;max-width:460px;padding-inline-start:22px;font-weight:600}
.gc-etapes li{margin:6px 0}
.gc-mini{width:24px;height:24px;vertical-align:middle;color:var(--accent-texte);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.guide-copie>.petit{text-align:center;margin:4px 0 0}
@media (prefers-reduced-motion:no-preference){
  .gc-anneau{animation:gc-pulse 1.8s ease-out infinite}
  .gc-doigt{animation:gc-tape 3.6s ease-in-out infinite}
  .gc-copie{animation:gc-copie 3.6s ease-in-out infinite}
  .gc-fleche{animation:gc-fleche 1.6s ease-in-out infinite}
}
@keyframes gc-pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes gc-tape{0%,20%{transform:translate(14px,14px);opacity:0}35%{transform:translate(0,0);opacity:1}45%{transform:translate(0,0) scale(.8)}55%,100%{transform:translate(0,0);opacity:0}}
@keyframes gc-copie{0%,44%{opacity:0;transform:translateY(4px)}52%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gc-fleche{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.gc-ic svg.gc-bas{transform:rotate(180deg)}

/* 26/10 : l'IA pose d'abord des questions */
.questions-ia{margin:10px 0 14px;padding:14px 16px;border-radius:14px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--carte))}
.questions-ia p{margin:0 0 8px}.questions-ia ol{margin:0;padding-inline-start:20px}.questions-ia li{margin:8px 0}
.questions-ia li button{margin-top:6px}
.reponse-gestes{gap:18px;flex-wrap:wrap;margin:8px 0}

.reponse-lue q.cit.cit-courte{display:inline;margin:0;padding:0;border:0;background:none;font-style:italic;color:inherit}.reponse-lue q.cit.cit-courte .cit-ref{display:inline;margin-inline-start:4px}
/* 03/11/2026 (Phil) : filigrane « Confidentiel » à l'impression, une fois par feuille, très clair, derrière le texte */
.imp-filigrane{display:none}
@media print{
  #impression .imp-filigrane{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;pointer-events:none;z-index:0}
  #impression .imp-filigrane span{transform:rotate(-35deg);font:800 62pt/1 -apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:rgba(190,30,30,.12);-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.prep-format{margin:10px 0 4px}
/* 04/11/2026 (Phil) : les actions sur la réponse dans la couleur du Masque (charte des boutons), et les options à part */
.actions-reponse .action{background:var(--accent);color:var(--sur-accent);border-color:var(--accent);box-shadow:0 4px 12px rgba(109,40,217,.22)}
.actions-reponse .action .ico{color:var(--sur-accent)}
.actions-reponse .action:hover{filter:brightness(1.08);border-color:var(--accent)}
.actions-reponse .action[aria-pressed="true"]{background:var(--accent-texte);border-color:var(--accent-texte)}
.fin-parcours #btnSauverSession{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}
.fin-parcours{margin-top:16px}
.zone-options{margin-top:22px;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--texte) 6%,var(--carte));border:1px dashed var(--trait)}
.zone-options > :first-child{margin-top:0}
/* 04/11/2026 (Phil) : la fin des actions se voit ; dessous, seulement des options */
.fin-actions-masque{display:flex;align-items:center;gap:12px;margin:26px 0 6px;color:var(--accent-texte);font-weight:800;font-size:1.05rem}
.fin-actions-masque::before,.fin-actions-masque::after{content:"";flex:1;height:2px;background:var(--accent);opacity:.45;border-radius:2px}
.options-titre{margin:0 0 12px;font-weight:700;color:var(--texte-2);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
/* 04/11/2026 (Phil) : « Tout cacher à l'IA » en tête de la liste des risques */
.ctrl-liste li.ctrl-tout{list-style:none;margin:4px 0 10px}
.ctrl-liste li.ctrl-tout .b-main{min-height:44px;padding:8px 16px;border-radius:12px;font-weight:700}

/* 04/11/2026 (Phil) : longue réponse montrée en partie, « Voir toute la réponse » ; « Effacer mes informations » en rouge, c'est vital */
.reponse-lue.replie{overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.voir-suite{display:block;width:100%;margin:8px 0 4px;min-height:46px;font-weight:700}
.fin-parcours .b-danger,.b-main.b-danger{background:#b91c1c;color:#fff;border-color:#b91c1c}
.fin-parcours .b-danger:hover,.b-main.b-danger:hover{background:#991b1b}
.b-main.b-danger:focus-visible{outline:3px solid #fca5a5;outline-offset:2px}
/* le module commun « vie » peint les boutons pleins en dégradé de la couleur de l'outil (!important) : le rouge doit passer devant */
.b-main.b-danger,.b-main.b-danger.dn-vie-plein{background:linear-gradient(145deg,#dc2626,#b91c1c)!important;color:#fff}
.b-main.b-danger:hover{filter:brightness(.95)}

/* 04/11/2026 : ligne discrète sous les tuiles de l'étape 1, pour qui arrive sans document */
.sans-document{margin:10px 0 0;text-align:center}
.sans-document .lien{font-size:.95rem}

/* 04/11/2026 : avant le rapport, l'IA n'a fait que poser des questions */
.qia-rapport{margin-top:12px;padding-top:10px;border-top:1px solid var(--trait)}
.qia-rapport p{margin:0 0 8px}
#questionsIA.clignote{animation:qiaClignote 1.2s ease 2}
@keyframes qiaClignote{50%{box-shadow:0 0 0 4px var(--accent)}}
@media (prefers-reduced-motion: reduce){#questionsIA.clignote{animation:none}}
#questionsIA{scroll-margin-top:96px}
/* 05/11/2026 (Phil) : « Ce que l'IA ne verra pas » (étape 4) : une case par genre, avec la couleur de la légende */
.ia-cache{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--trait);border-radius:14px;background:var(--surface);min-width:0}
.ia-cache legend{padding:0 6px;font-size:1rem}
.ia-cache .petit{margin:2px 0 10px}
.ia-cache-liste{display:flex;flex-direction:column;gap:6px}
.ia-cache-case{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:10px;background:var(--carte);border:1px solid var(--trait);cursor:pointer;overflow-wrap:anywhere}
.ia-cache-case input{width:22px;height:22px;flex:0 0 auto;margin:0;accent-color:var(--accent)}
.ia-cache-case i{width:14px;height:14px;border-radius:3px;flex:0 0 auto}
.ia-cache-case i.identite{background:var(--c-identite);border-bottom:3px solid var(--texte)} .ia-cache-case i.coord{background:var(--c-coord);border-bottom:3px dashed var(--texte)}
.ia-cache-case i.ident{background:var(--c-ident);border-bottom:3px dotted var(--texte)} .ia-cache-case i.date{background:var(--c-date);border-bottom:4px double var(--texte)}
.ia-cache-case:has(input:not(:checked)){border-color:var(--accent)}
.ia-cache-avert{margin:10px 0 0;background:var(--carte)}