/* ============ 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[data-theme="auto"]{
    --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="sombre"]{
  --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}
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 ---------- */
.barre-haut{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--fond) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--trait)}
.barre-int{max-width:880px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.logo{width:36px;height:36px;border-radius:9px;flex:0 0 auto;background:#1d4ed8;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;letter-spacing:-.02em}
.brand{flex:1 1 0;min-width:0}
.brand h1{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention{flex:1 1 100%;margin:0;padding-inline-start:46px;font-size:.8rem;color:var(--texte-2);line-height:1.3}
.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:880px;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}

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:99;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)}

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){
  .brand .mention{font-size:.74rem}
  .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}
  #impression{display:block;white-space:pre-wrap;font-family:Georgia,serif;line-height:1.6;font-size:12pt}
  #impression h3,#impression h4,#impression h5,#impression h6{font-family:-apple-system,"Segoe UI",Roboto,sans-serif;margin:12pt 0 4pt}
  #impression p,#impression ul,#impression ol,#impression blockquote{margin:0 0 8pt;white-space:normal}
  #impression blockquote{padding-left:10pt;border-left:2pt solid #999}
  #impression-tete{display:block;direction:ltr;font:700 14pt/1.2 -apple-system,"Segoe UI",Roboto,sans-serif;color:#000;padding:0 0 6pt;margin:0 0 12pt;border-bottom:1pt solid #999}
  #impression-tete .mask{color:#5b21b6}
  [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 */
.barre-haut{transition:transform .25s ease}
.barre-haut.barre-cachee{transform:translateY(-110%)}
/* 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)}
}
@media (prefers-reduced-motion: reduce){ .barre-haut{transition:none} }

/* « 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) */
.brand h1{font-size:1.4rem;line-height:1.2}
.mention{font-size:1.05rem;font-weight:500;color:var(--texte);padding-inline-start:46px;margin-top:2px}
@media (max-width:520px){
  .brand h1{font-size:1.2rem;white-space:normal;overflow:visible}
  .mention{font-size:.98rem;padding-inline-start:0;margin-top:4px}
}

/* 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 --- */
.vers-free{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 8px;padding:12px 14px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);text-align:start;font-size:.92rem;line-height:1.4}
.vers-free .vf-ico{width:36px;height:36px;border-radius:50%;background:var(--accent-doux);color:var(--accent-texte);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vers-free .vf-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vf-texte{flex:1 1 200px;min-width:0;margin:0;color:var(--texte-2)}
.vf-texte b{display:block;color:var(--texte)}
.vf-lien{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--trait-fort);border-radius:999px;background:var(--carte);color:var(--accent-texte);font-weight:600;text-decoration:none}
.vf-lien:hover{border-color:var(--accent)}
.vf-ligne{margin:8px 0 0;font-size:.9rem;color:var(--texte-2);text-align:center}
.vf-ligne a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-texte);font-weight:600}

/* ===== ELEMENT 2 : « Les autres outils DANA » (CSS A INTEGRER, app.css) ===== */
.autres-outils h2{margin:0 0 6px}
.vignettes{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:22px 16px}
.vig-lien{display:flex;flex-direction:column;gap:4px;height:100%;color:inherit;text-decoration:none;border-radius:var(--r)}
.vig-lien:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.vig-img{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1e293b}
.vig-img img{display:block;width:100%;height:100%;object-fit:cover}
.vig-prix{position:absolute;inset-inline-end:8px;bottom:8px;background:rgba(0,0,0,.84);color:#fff;font-weight:700;font-size:.85rem;line-height:1;padding:6px 9px;border-radius:6px}
.vig-gratuit .vig-prix{background:#fff;color:#0f172a}
.vig-nom{margin-top:6px;font-weight:700;font-size:1rem;line-height:1.3;color:var(--texte)}
.vig-texte{font-size:.92rem;line-height:1.4;color:var(--texte-2)}
.vig-detail{font-size:.85rem;font-weight:600;color:var(--texte-2)}
.vig-lien:hover .vig-nom{color:var(--accent-texte);text-decoration:underline}
@media (prefers-reduced-motion:no-preference){.vig-img img{transition:transform .25s}.vig-lien:hover .vig-img img{transform:scale(1.04)}}

#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 « PromptTamerMask » d'un seul bloc, « Mask » dans la couleur de l'outil (ADR 2026-10-03) */
.brand h1.marque{overflow-wrap:normal;white-space:normal;overflow:visible;font-size:clamp(.9rem,4.2vw,1.4rem)}
.marque span{display:inline-block;white-space:nowrap}
.brand h1.marque{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .brand h1.marque{text-align:right}
.marque .mask{color:var(--accent-texte)}
/* 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) */
.barre-retour{margin:0 0 14px}
.btn-retour{min-height:44px;padding:8px 16px}
.btn-retour::before{content:"\2190\00a0";display:inline-block}
[dir=rtl] .btn-retour::before{transform:scaleX(-1)}

/* ---------- 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)}
.menu-mobile{position:fixed;inset:0;z-index:70;background:var(--fond);overflow-y:auto;padding:16px 16px 40px}
.menu-mobile .menu-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.menu-mobile .menu-tete b{font-size:1.15rem}
.menu-mobile .menu-note{font-size:.9rem;color:var(--texte-2);margin-bottom:12px}
.menu-mobile .menu-liste{list-style:none;padding:0;margin:0 0 12px}
.menu-mobile .menu-liste a{display:block;background:var(--carte);border-radius:var(--r-sm);padding:14px;
  margin-bottom:8px;color:var(--texte);text-decoration:none;font-weight:600;box-shadow:var(--ombre)}
.menu-mobile details{background:var(--carte);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px;box-shadow:var(--ombre)}
.menu-mobile summary{cursor:pointer;font-weight:700;color:var(--accent-texte)}
.menu-mobile p{font-size:.92rem;margin-top:8px;color:var(--texte-2)}
/* 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 ---------- */
.menu-mobile .menu-section{margin:2px 0 8px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-2)}
.menu-mobile .menu-outils{background:var(--carte);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px;box-shadow:var(--ombre)}
.menu-mobile .menu-outils .exemple-encart{margin-bottom:12px}
.menu-mobile .menu-outils .fiche-etat{margin-bottom:0}
.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 */
.menu-mobile .menu-titre-aide{text-align:start;width:100%}
.menu-mobile .bulle-aide{background:none;border:0;padding:8px 0 0;margin:0}
.menu-mobile .menu-expl .ocr-langue{margin:4px 0 0}

/* ---------- 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}
.menu-mobile .raccourcis.en-bas{margin-top:0;padding-top:0;border-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}
/* 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. */
.menu-mobile{padding:0;overflow:hidden;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;justify-content:flex-end}
.menu-mobile[hidden]{display:none}
.m-panneau{width:min(440px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--fond);
  padding:0 16px calc(32px + env(safe-area-inset-bottom));box-shadow:-12px 0 32px rgba(0,0,0,.18);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif}
.m-panneau .menu-tete{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  margin:0 -16px 4px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  background:color-mix(in srgb,var(--fond) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.m-panneau .menu-tete b{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.m-fermer{border:0;border-radius:999px;background:var(--surface);color:var(--texte);font:inherit;font-weight:600;font-size:.92rem;
  min-height:36px;padding:6px 14px;cursor:pointer}
.m-titre{margin:18px 12px 6px;font-size:.8rem;font-weight:600;color:var(--texte-2);letter-spacing:.01em}
.m-groupe{background:var(--carte);border-radius:12px;overflow:hidden;border:1px solid var(--trait);margin:0 0 4px}
.m-groupe > * + *{border-top:1px solid var(--trait)}
.m-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:11px 16px;
  background:none;border:0;border-radius:0;color:var(--texte);font:inherit;font-size:1rem;font-weight:500;text-align:start;
  text-decoration:none;cursor:pointer;box-shadow:none}
.m-ligne:hover{background:var(--surface)}
a.m-ligne{color:var(--texte)}
.m-chev{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--texte-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
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 .m-chev{transform:rotate(90deg)}
details.m-acc[open] > summary{font-weight:600}
.m-corps{padding:0 16px 14px}
.m-corps p,.m-corps li{margin:0 0 8px;font-size:.95rem;line-height:1.5;color:var(--texte-2)}
.m-corps ol{margin:0 0 8px;padding-inline-start:20px}
.m-double{flex-direction:column;align-items:stretch;gap:2px;cursor:default}
.m-double:hover{background:none}
.m-bouton{background:none;border:0;padding:0;font:inherit;font-size:1rem;font-weight:500;color:var(--accent-texte);text-align:start;cursor:pointer;min-height:0}
.m-ligne.m-bouton{color:var(--accent-texte)}
.m-sous{margin:0;font-size:.84rem;line-height:1.4;color:var(--texte-2)}
.m-danger.m-ligne{color:#d0342c}
.m-pied{margin:12px 8px 0;font-size:.78rem;line-height:1.45;color:var(--texte-2);text-align:center}
.m-panneau .vers-free{margin:16px 0 4px}
.m-panneau #carteReprise{margin:0;padding:12px 16px;border-radius:0}
.m-panneau .ocr-langue select,.m-panneau .grille select,.m-panneau .grille input{width:100%}
@media (max-width:480px){ .m-panneau{width:100%;box-shadow:none} }

/* « 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}
.m-ligne.m-bouton{padding:11px 16px;min-height:48px;width:100%}
.m-panneau .m-groupe.menu-outils{padding:0;box-shadow:none}
.m-double .m-bouton{padding:0;min-height:30px}
.m-panneau .m-groupe > * + *{border-top:1px solid var(--trait)}
#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] > .m-corps{background:color-mix(in srgb,var(--accent-doux) 70%,var(--carte));margin:0 10px 10px;padding:12px 14px 6px;border-radius:10px}
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}

/* 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}