/* Espace client LDI : l'application du client (suivi, demandes, documents, moi), la vue du délégué et l'aperçu LDI.
   Un seul accent : le bleu de l'étoile. Aucun trait de couleur sur un seul côté d'un élément. */

@font-face { font-family: "LDI Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LDI Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --papier: #F3F2EE; --feuille: #FFFFFF; --encre: #111214; --gris: #5E6066; --leger: #A9AAAE; --filet: #DAD8D2; --filet-doux: #E7E5E0;
  --cobalt: #0730BE; --cobalt-pale: #E7ECFA; --sur-encre: #F3F2EE; --sur-cobalt: #FFFFFF; --sur-alerte: #FFFFFF;
  --fait: #1F7A4D; --fait-pale: #E2F1E8; --sur-fait: #FFFFFF; --alerte: #B4321F; --alerte-pale: #F8E3DF;
  --voile: rgba(17, 18, 20, .4); --ombre: 0 24px 60px rgba(17, 18, 20, .16); --ombre-douce: 0 6px 18px rgba(17, 18, 20, .10); --ombre-survol: 0 14px 30px rgba(17, 18, 20, .08);
  --titre: "LDI Geist", "Segoe UI", system-ui, sans-serif; --porteur: Georgia, "Newsreader", "Times New Roman", serif; --code: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --court: 160ms; --ease: cubic-bezier(.23, 1, .32, 1); --tiroir: cubic-bezier(.32, .72, 0, 1);
  --barre-bas: 0px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --papier: #0F1013; --feuille: #17181C; --encre: #ECECEA; --gris: #A2A4AA; --leger: #6D6F75; --filet: #2E3036; --filet-doux: #222429;
  --cobalt: #8FA6FF; --cobalt-pale: #1B2448; --sur-encre: #111214; --sur-cobalt: #0F1013;
  --fait: #5CC890; --fait-pale: #13301F; --sur-fait: #0F1013; --alerte: #F07763; --alerte-pale: #3A1A14; --sur-alerte: #0F1013;
  --voile: rgba(0, 0, 0, .6); --ombre: 0 24px 60px rgba(0, 0, 0, .55); --ombre-douce: 0 6px 18px rgba(0, 0, 0, .4); --ombre-survol: 0 14px 30px rgba(0, 0, 0, .35);
  color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--titre); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--cobalt); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.porteur { font-family: var(--porteur); font-style: italic; font-weight: 400; color: var(--cobalt); letter-spacing: -.01em; }
.mono { font-variant-numeric: tabular-nums; }
.ic { width: 22px; height: 22px; flex: none; }
.ic.s12 { width: 12px; height: 12px; } .ic.s14 { width: 14px; height: 14px; } .ic.s16 { width: 16px; height: 16px; } .ic.s18 { width: 18px; height: 18px; } .ic.s20 { width: 20px; height: 20px; } .ic.s26 { width: 26px; height: 26px; } .ic.s30 { width: 30px; height: 30px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 70; background: var(--encre); color: var(--sur-encre); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.evitement:focus { top: 12px; }

/* Bandeau d'aperçu (LDI regarde l'espace d'un client) */
.apercu-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 28px; background: var(--cobalt); color: var(--sur-cobalt); font-size: 14px; font-weight: 600; position: relative; z-index: 15; }
.apercu-bandeau a { margin-left: auto; color: var(--sur-cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.apercu-bandeau a:focus-visible { outline-color: var(--sur-cobalt); }

/* Cadre et en-tête */
.cadre { max-width: 1180px; margin: 0 auto; padding-inline: 28px; }
.entete { display: flex; align-items: center; gap: 18px; padding-block: 20px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); min-height: 44px; }
.logo svg { height: 28px; width: auto; display: block; }
.logo .etoile { fill: var(--cobalt); }
.logo span { font-size: 13px; color: var(--gris); border-left: 1px solid var(--filet); padding-left: 12px; }
.pastille { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--encre); color: var(--sur-encre); font-size: 12px; font-weight: 700; flex: none; }
.entete .pastille { margin-left: 4px; }

/* Onglets de l'application : en haut sur grand écran, barre du bas sur téléphone */
.onglets { margin-left: auto; display: flex; gap: 4px; }
.onglets button { border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gris); padding: 8px 14px; border-radius: 999px; position: relative; min-height: 40px; transition: background-color var(--court) ease, color var(--court) ease; }
.onglets button:hover { color: var(--encre); }
.onglets button[aria-selected="true"] { background: var(--encre); color: var(--sur-encre); }
.onglets button svg { transition: transform .3s var(--ease); }
.onglets .ic { width: 20px; height: 20px; }
.pastille-n { min-width: 18px; height: 18px; border-radius: 9px; background: var(--cobalt); color: var(--sur-cobalt); font-size: 11px; display: inline-grid; place-items: center; padding: 0 5px; font-weight: 800; }
.onglets button[aria-selected="true"] .pastille-n { box-shadow: 0 0 0 2px var(--encre); }

.contenu { outline: none; padding-bottom: 40px; min-height: 60vh; }

/* Squelette de chargement : même structure que l'accueil, jamais d'écran blanc */
.squelette { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 8px; }
.sq { display: block; border-radius: 14px; background: var(--filet-doux); position: relative; overflow: hidden; }
.sq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--feuille) 55%, transparent), transparent); animation: lueur 1.4s ease-in-out infinite; }
@keyframes lueur { to { transform: translateX(100%); } }
.sq-packs { display: flex; gap: 12px; }
.sq-packs .sq { width: min(300px, 46%); height: 96px; border-radius: 18px; }
.sq-titre { width: 260px; max-width: 70%; height: 40px; }
.sq-ligne { width: 520px; max-width: 90%; height: 18px; }
.sq-regle { height: 120px; margin-top: 12px; }
.sq-detail { height: 240px; border-radius: 22px; }

/* Choix du pack : le fond bleu glisse SOUS les cartes et ne se voit qu'à travers elles */
.packs-choix { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 320px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin-top: 8px; position: relative; scrollbar-width: none; }
.packs-choix::-webkit-scrollbar { display: none; }
.fond-bleu { position: absolute; top: -1px; bottom: -1px; left: 0; background: var(--cobalt); z-index: 0; pointer-events: none; transition: transform .55s cubic-bezier(.65, 0, .35, 1), width .55s cubic-bezier(.65, 0, .35, 1); }
.pack-carte > :not(.fond-bleu) { position: relative; z-index: 1; }
.pack-carte { position: relative; overflow: hidden; isolation: isolate; scroll-snap-align: start; text-align: left; border: 1px solid var(--filet); background: transparent; border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; color: var(--encre); transition: border-color var(--court) ease, color .3s ease .18s, transform .2s var(--ease); }
.pack-carte:hover { border-color: var(--encre); }
.pack-carte:active { transform: scale(.97); }
.pack-carte[aria-selected="true"], .pack-carte.seul { color: var(--sur-cobalt); border-color: transparent; }
.pack-carte.seul { background: var(--cobalt); cursor: default; }
.pack-carte.seul:active { transform: none; }
.contenu-p { display: grid; gap: 8px; }
.pack-carte .l1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pack-carte b { font-size: 17px; font-weight: 760; letter-spacing: -.02em; }
.pack-carte small { font-size: 13px; color: var(--gris); }
.pack-carte[aria-selected="true"] small, .pack-carte.seul small { color: color-mix(in srgb, var(--sur-cobalt) 75%, transparent); }
.pack-carte[aria-selected="true"] .etat, .pack-carte.seul .etat { background: color-mix(in srgb, var(--sur-cobalt) 18%, transparent); color: var(--sur-cobalt); }
.coulisse { display: block; width: 100%; height: auto; overflow: visible; color: var(--gris); }
.coulisse .curseur-c { animation: glisseDe .9s var(--ease); }
@keyframes glisseDe { from { transform: var(--de); } }
.coulisse .lame { fill: var(--cobalt); }
.pack-carte[aria-selected="true"] .coulisse, .pack-carte.seul .coulisse { color: color-mix(in srgb, var(--sur-cobalt) 70%, transparent); }
.pack-carte[aria-selected="true"] .coulisse .lame, .pack-carte.seul .coulisse .lame { fill: var(--sur-cobalt); }
.pack-carte .mesure { font-size: 12.5px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.pack-carte .mesure span:last-child { font-variant-numeric: tabular-nums; }

/* Ouverture */
.ouverture { padding-block: 22px 10px; }
.salut { font-size: clamp(28px, 3.2vw, 40px); font-weight: 760; letter-spacing: -.035em; line-height: 1.1; color: var(--encre); outline: none; }
.phrase { font-size: clamp(42px, 6.2vw, 90px); font-weight: 760; letter-spacing: -.055em; line-height: .98; margin-top: 6px; }
.phrase .porteur { font-weight: 400; letter-spacing: -.02em; }
.chiffres { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; font-size: 15px; color: var(--gris); }
.chiffres b { color: var(--encre); font-weight: 700; }
.chemin-boite { margin: 30px 0 0; }
.sans-pack { margin-top: 18px; border-radius: 22px; padding: 26px; background: var(--feuille); border: 1px solid var(--filet-doux); display: grid; gap: 8px; }
.sans-pack b { font-size: 20px; font-weight: 720; letter-spacing: -.02em; }

/* Suivi : une règle fine (graduations, étapes, curseur bleu) et le détail de l'étape choisie */
.frise-boite { display: grid; gap: 22px; }
.frise-scroll { overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
.frise-scroll::-webkit-scrollbar { display: none; }
.frise { position: relative; padding-top: 34px; }
.regle-t { position: relative; height: 22px; display: flex; justify-content: space-between; align-items: flex-end; }
.regle-t i { width: 1px; height: 8px; background: var(--filet); transform-origin: bottom; border-radius: 1px; }
.regle-t i.maj { width: 1.5px; height: 18px; background: color-mix(in srgb, var(--gris) 55%, transparent); }
.regle-t i.f { background: var(--encre); }
.regle-base { position: relative; height: 1px; background: var(--filet); }
.regle-base b { position: absolute; left: 0; top: -.5px; height: 2px; background: var(--encre); }
.curseur-f { position: absolute; top: 6px; height: 50px; width: 2px; margin-left: -1px; background: var(--cobalt); z-index: 2; transition: left .9s var(--ease); }
.curseur-f span { position: absolute; top: -6px; left: 8px; white-space: nowrap; background: var(--cobalt); color: var(--sur-cobalt); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.curseur-f.a-droite span { left: auto; right: 8px; }
/* À l'ouverture : une vague fait pousser les graduations, une seconde noircit le travail fait, puis le curseur se pose. */
.vague .regle-t i { animation: pousse .7s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 14ms); }
.vague .regle-t i.f { animation: pousse .7s cubic-bezier(.3, 1.4, .5, 1) both, noircit .5s ease both; animation-delay: calc(var(--i) * 14ms), calc(.75s + var(--i) * 24ms); }
@keyframes pousse { from { transform: scaleY(0); } }
@keyframes noircit { from { background: var(--filet); } }
.vague .regle-base b { animation: trace-b ease-out both; animation-delay: .75s; animation-duration: calc(var(--k) * 24ms + 200ms); }
@keyframes trace-b { from { width: 0; } }
.vague .curseur-f { animation: pose .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.85s + var(--k) * 24ms); }
@keyframes pose { from { opacity: 0; transform: translateY(-14px); } }
.stations { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); position: relative; margin-top: 8px; }
.st { border: 0; background: none; text-align: left; padding: 8px 12px 16px 0; display: grid; gap: 2px; align-content: start; color: var(--encre); border-radius: 8px; min-height: 44px; }
.st .n { font-size: 12px; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.st b { font-size: 15px; font-weight: 750; line-height: 1.2; letter-spacing: -.01em; transition: color .25s ease; }
.st small { font-size: 12.5px; color: var(--gris); }
.st.av b { color: var(--gris); font-weight: 650; }
.st.a .n, .st.c .n { color: var(--cobalt); }
.st[aria-selected="true"] b { color: var(--cobalt); }
.st:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.indic { position: absolute; bottom: 0; height: 3px; width: calc(100% / var(--n, 6) - 18px); border-radius: 2px; background: var(--cobalt); transition: left .45s cubic-bezier(.6, 0, .25, 1); }
.vague .st { animation: monte .5s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * 60ms); }
.detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; background: var(--feuille); border: 1px solid var(--filet-doux); border-radius: 22px; padding: 26px; }
.detail:focus-visible { outline-offset: 2px; border-radius: 22px; }
.detail.vers-d > * { animation: entreD .42s var(--ease) both; }
.detail.vers-g > * { animation: entreG .42s var(--ease) both; }
.detail > *:nth-child(2) { animation-delay: .06s; }
@keyframes entreD { from { opacity: 0; transform: translateX(18px); } }
@keyframes entreG { from { opacity: 0; transform: translateX(-18px); } }
.vague .detail { animation: monte .6s .9s var(--ease) both; }
.d-tete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.detail h3 { font-size: 26px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; margin-top: 10px; }
.d-resume { color: var(--gris); margin-top: 8px; max-width: 58ch; }
.d-intro { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--gris); margin-top: 20px; }
.d-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.d-liste li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.d-liste li .ic { color: var(--fait); position: relative; top: 2px; }
.d-liste .pt { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--gris) 70%, transparent); flex: none; position: relative; top: -1px; }
.d-liste em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--cobalt); margin-left: 6px; }
.detail .actions { margin-top: 20px; }
.d-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 14px; position: relative; }
.d-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--filet-doux); }
.lien-n { border: 0; background: none; padding: 4px 0; font-weight: 700; font-size: 14px; color: var(--gris); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lien-n:hover { color: var(--encre); }
.lien-n:disabled { opacity: .35; }
.d-captures { display: grid; gap: 10px; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-captures > :first-child { grid-column: 1 / -1; }
.d-capture { border: 1px solid var(--filet-doux); border-radius: 14px; overflow: hidden; padding: 0; background: var(--papier); transition: transform .2s var(--ease), border-color .2s ease; aspect-ratio: 16 / 10; }
.d-capture:hover { transform: translateY(-2px); border-color: var(--encre); }
.d-capture img, .vignette img, .ecran img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-vide { grid-column: 1 / -1; border: 1.5px dashed var(--filet); border-radius: 14px; padding: 28px; color: var(--gris); font-size: 14px; display: grid; place-items: center; text-align: center; min-height: 170px; }

/* Blocs de la page */
section.bloc { padding-block: 40px; border-top: 1px solid var(--filet); }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bloc-tete h2 { font-size: 28px; font-weight: 760; letter-spacing: -.04em; }
.bloc-tete p { color: var(--gris); font-size: 14px; }
.tag-pack { font-size: 12px; font-weight: 700; color: var(--gris); border: 1px solid var(--filet); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.vide-bloc { color: var(--gris); font-size: 15px; max-width: 60ch; }

.nouveautes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.nouveaute { scroll-snap-align: start; border: 0; background: none; padding: 0; text-align: left; display: grid; gap: 10px; align-content: start; color: var(--encre); }
.nouveaute .vignette { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--filet); background: var(--feuille); position: relative; display: block; transition: transform var(--court) var(--ease), border-color var(--court) ease; }
.nouveaute:hover .vignette { transform: translateY(-3px); border-color: var(--encre); }
.nouveaute .marque { position: absolute; left: 10px; top: 10px; }
.nouveaute b { font-size: 15px; font-weight: 700; display: block; }
.nouveaute small { display: flex; gap: 8px; align-items: center; color: var(--gris); font-size: 13px; flex-wrap: wrap; margin-top: 2px; }
.neutre { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--gris); background: color-mix(in srgb, var(--cobalt-pale) 55%, var(--feuille)); font-size: 13px; font-weight: 700; text-align: center; padding: 12px; }
.neutre .ic { width: 30px; height: 30px; color: var(--cobalt); }

.tuiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tuile { grid-column: span 6; border-radius: 22px; padding: 22px; display: grid; gap: 14px; align-content: start; background: var(--feuille); border: 1px solid var(--filet-doux); min-width: 0; transition: transform .25s var(--ease), box-shadow .25s ease; }
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre-survol); }
.tuile.large { grid-column: 1 / -1; }
.tuile .tete-t { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--gris); flex-wrap: wrap; }
.tuile .tete-t .tag-pack { margin-left: auto; font-weight: 700; }
.tuile h3 { font-size: 22px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; }
.tuile .mini-t { font-size: 14px; color: var(--gris); }
.tuile.repondre { background: var(--cobalt-pale); border-color: transparent; }
.tuile.repondre .tete-t { color: var(--cobalt); }
.tuile.decider { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.tuile.decider .tete-t, .tuile.decider .mini-t { color: color-mix(in srgb, var(--sur-encre) 72%, transparent); }
.tuile.decider .tag-pack { color: inherit; border-color: color-mix(in srgb, var(--sur-encre) 30%, transparent); }
.tuile.decider .btn { background: var(--sur-encre); color: var(--encre); }
.tuile.decider .btn.clair { background: transparent; color: var(--sur-encre); border-color: color-mix(in srgb, var(--sur-encre) 40%, transparent); }
.tuile.decider :focus-visible { outline-color: var(--sur-encre); }
.tuile.signer { background: var(--cobalt-pale); border-color: transparent; }
.progres-t { display: grid; gap: 6px; }
.progres-t .b { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--cobalt) 20%, transparent); overflow: hidden; }
.progres-t .b i { display: block; height: 100%; background: var(--cobalt); border-radius: 4px; transition: width .5s var(--ease); }
.progres-t span { font-size: 14px; font-weight: 700; }
.themes { display: flex; flex-wrap: wrap; gap: 6px; }
.themes span { font-size: 13px; border-radius: 999px; padding: 4px 10px; background: color-mix(in srgb, var(--feuille) 70%, transparent); display: inline-flex; gap: 6px; align-items: center; }
.themes span.ok { color: var(--fait); font-weight: 700; }
.recu { display: flex; align-items: center; gap: 8px; color: var(--fait); font-weight: 700; }
.rien-a-faire { grid-column: 1 / -1; border-radius: 22px; padding: 26px; background: var(--feuille); border: 1px solid var(--filet-doux); font-size: 20px; font-weight: 700; }

.zone { display: grid; place-items: center; gap: 4px; text-align: center; min-height: 110px; border-radius: 16px; border: 2px dashed var(--filet); color: var(--gris); font-size: 14px; cursor: pointer; transition: border-color var(--court) ease, background-color var(--court) ease; position: relative; padding: 14px; }
.zone:hover, .zone.survol, .zone:focus-within { border-color: var(--cobalt); background: var(--cobalt-pale); color: var(--encre); }
.zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zone .ic { color: var(--encre); }
.zone.petite { min-height: 0; padding: 10px; }
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.fichiers li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.fichiers .nom { overflow-wrap: anywhere; }
.fichiers .barre-f { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: var(--filet-doux); overflow: hidden; }
.fichiers .barre-f i { display: block; height: 100%; width: 0; background: var(--cobalt); transition: width .3s linear; }
.fichiers li.fini .barre-f { display: none; }
.fichiers .range { grid-column: 2 / -1; font-size: 12px; color: var(--gris); overflow-wrap: anywhere; }
.fichiers li.nouveau .range { animation: monte .4s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * 150ms); }
.fichiers .erreur-f { grid-column: 2 / -1; font-size: 12.5px; color: var(--alerte); font-weight: 650; }
.chemin-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fait); background: var(--fait-pale); border-radius: 10px; padding: 7px 10px; }
.chemin-drive .sep { opacity: .5; }
.chemin-drive.nouveau-drive { animation: monte .45s var(--ease) both; animation-delay: .5s; }

/* Boutons et états */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 15px; background: var(--encre); color: var(--sur-encre); text-decoration: none; white-space: nowrap; min-height: 44px; transition: transform var(--court) var(--ease), border-color var(--court) ease; }
.btn:active { transform: scale(.97); }
.btn.clair { background: transparent; color: var(--encre); border-color: var(--filet); }
.btn.clair:hover { border-color: var(--encre); }
.btn.petit { padding: 7px 14px; font-size: 14px; min-height: 36px; }
.btn.plein { width: 100%; white-space: normal; }
.btn:disabled { opacity: .5; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.e-cours { color: var(--cobalt); background: var(--cobalt-pale); }
.e-fait { color: var(--fait); background: var(--fait-pale); }
.e-vous { color: var(--sur-cobalt); background: var(--cobalt); }
.e-venir { color: var(--gris); background: var(--filet-doux); }
.meta { color: var(--gris); font-size: 14px; }
.aide { font-size: 13px; color: var(--gris); }
.sous { color: var(--gris); font-size: 14px; }

.lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.lignes > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 6px; border-bottom: 1px solid var(--filet); }
.lignes .quoi { font-weight: 650; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.lignes .quoi a { color: var(--encre); }
.lignes .sous { font-size: 14px; color: var(--gris); }
.droite { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.outil { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--filet-doux); background: var(--feuille); color: var(--encre); text-decoration: none; }
.outil b { display: block; font-size: 15px; }
.outil small { color: var(--gris); font-size: 13px; }
.pied { padding-block: 40px 40px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--gris); font-size: 14px; }
.pied b { color: var(--encre); }
.pied a { color: var(--encre); }

/* Pastille « ! » discrète pour signaler */
.signaler-flottant { position: fixed; right: 20px; bottom: calc(20px + var(--barre-bas) + env(safe-area-inset-bottom, 0px)); z-index: 20; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--filet); background: var(--feuille); color: var(--gris); display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 0 0 13px; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 14px; box-shadow: var(--ombre-douce); transition: width .3s var(--ease), color .2s ease, border-color .2s ease; }
.signaler-flottant .ic { width: 16px; height: 16px; }
.signaler-flottant span { opacity: 0; transition: opacity .2s ease; }
.signaler-flottant:hover, .signaler-flottant:focus-visible { width: 118px; color: var(--encre); border-color: var(--encre); }
.signaler-flottant:hover span, .signaler-flottant:focus-visible span { opacity: 1; }

/* Fenêtres */
/* Fond derrière les fenêtres : uniquement du flou, ni teinte ni ombre. Très fort autour de la fenêtre, il retombe vite
   vers les bords : le voile floute un peu, puis deux flous de plus en plus forts, masqués vers le centre.
   En mouvement réduit, pas de fondu (règle générale plus bas). */
.voile { position: fixed; inset: 0; z-index: 40; opacity: 0; transition: opacity 320ms ease; background: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.voile::before, .voile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.voile::before { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 52%, transparent 78%); mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 52%, transparent 78%); }
.voile::after { -webkit-backdrop-filter: blur(60px); backdrop-filter: blur(60px); -webkit-mask-image: radial-gradient(ellipse 56% 60% at 50% 50%, #000 66%, transparent 84%); mask-image: radial-gradient(ellipse 56% 60% at 50% 50%, #000 66%, transparent 84%); }
.voile.ouvert { opacity: 1; }
.fenetre { position: fixed; z-index: 41; left: 50%; top: 50%; width: min(980px, calc(100% - 48px)); max-height: calc(100% - 48px); transform: translate(-50%, -46%) scale(.98); opacity: 0; pointer-events: none; background: var(--feuille); border-radius: 26px; border: 1px solid var(--filet); display: flex; flex-direction: column; overflow: hidden; transition: transform 260ms var(--tiroir), opacity 200ms ease, visibility 0s linear 260ms; visibility: hidden; }
.fenetre.ouvert { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.fenetre .fh { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--filet-doux); }
.fenetre .fh h2 { font-size: 22px; font-weight: 760; letter-spacing: -.03em; }
.fenetre .fh p { font-size: 13px; color: var(--gris); }
.fermer { margin-left: auto; border: 1px solid var(--filet); background: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.fermer:hover { border-color: var(--encre); }
.carrousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; min-height: 0; }
.carrousel::-webkit-scrollbar { display: none; }
.diapo { flex: 0 0 100%; scroll-snap-align: start; overflow-y: auto; padding: 22px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-content: start; }
.diapo .ecran { border-radius: 16px; overflow: hidden; border: 1px solid var(--filet-doux); aspect-ratio: 16 / 10; background: var(--papier); }
.avant-apres { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.avant-apres button { border: 1px solid var(--filet); background: none; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; min-height: 36px; }
.avant-apres button[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.diapo h3 { font-size: 24px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; margin-top: 8px; }
.diapo .desc { margin-top: 10px; color: var(--gris); }
.remarques { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.remarques li { border-radius: 14px; background: var(--cobalt-pale); padding: 12px 14px; font-size: 14px; }
.remarques li b { display: block; font-size: 13px; color: var(--gris); font-weight: 650; margin-bottom: 2px; }
.navigation { display: flex; align-items: center; gap: 12px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--filet-doux); flex-wrap: wrap; }
.puces { display: flex; gap: 2px; margin: 0 auto; }
.puces button { width: 24px; height: 32px; border: 0; padding: 0; background: none; display: grid; place-items: center; }
.puces button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--filet); transition: width var(--court) var(--ease); }
.puces button[aria-current="true"]::before { background: var(--cobalt); width: 22px; border-radius: 6px; }
/* Une question qui a sa réponse : puce verte (la courante reste plus large). */
.puces button.ok::before, .puces button.ok[aria-current="true"]::before { background: var(--fait); }
.q-puces { flex-wrap: wrap; margin: 0; }
.fleche { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); background: none; display: grid; place-items: center; flex: none; }
.fleche:disabled { opacity: .35; }
.formulaire { padding: 22px; overflow-y: auto; display: grid; gap: 18px; }
.choix-r { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.choix-r legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.choix-r label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--filet); border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; min-height: 44px; }
.choix-r label:has(input:checked) { border-color: var(--encre); background: var(--encre); color: var(--sur-encre); }
.choix-r label:has(input:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.choix-r input { accent-color: var(--encre); }
.micro { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gros-micro { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--encre); color: var(--sur-encre); display: grid; place-items: center; transition: transform var(--court) var(--ease); }
.gros-micro:active { transform: scale(.95); }
.gros-micro.rec { background: var(--alerte); color: var(--sur-alerte); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px var(--alerte-pale); } }
.onde { display: inline-flex; align-items: center; gap: 3px; height: 26px; color: var(--alerte); }
.onde i { width: 3px; border-radius: 2px; background: currentColor; height: 30%; animation: onde .9s ease-in-out infinite; }
.onde i:nth-child(2n) { animation-delay: .15s; } .onde i:nth-child(3n) { animation-delay: .3s; }
@keyframes onde { 50% { height: 100%; } }
.message-vocal { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--filet); font-size: 14px; font-weight: 600; }
.merci { display: grid; gap: 12px; place-items: center; text-align: center; padding: 50px 22px; }
.merci .grand, .succes .grand { font-size: clamp(36px, 5vw, 56px); font-weight: 760; letter-spacing: -.05em; line-height: 1; }
.merci .grand .porteur, .succes .grand .porteur { color: var(--cobalt); }

/* Feuille du bas (téléphone) ou fenêtre centrée (grand écran) */
.feuille { position: fixed; z-index: 41; left: 50%; bottom: 50%; width: min(520px, calc(100% - 32px)); max-height: 88%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; background: var(--feuille); border-radius: 24px; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--filet); transform: translate(-50%, 60%); opacity: 0; transition: transform 380ms cubic-bezier(.2, .9, .25, 1.08), opacity 200ms ease; }
.feuille.ouvert { transform: translate(-50%, 50%); opacity: 1; }
.feuille.ouvert > * { animation: monte .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
.feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--filet); justify-self: center; }
.feuille h3 { font-size: 20px; font-weight: 760; letter-spacing: -.02em; }
.etiq { display: grid; gap: 5px; font-size: 13.5px; font-weight: 700; }
.lien-unique { display: flex; gap: 6px; align-items: center; background: var(--papier); border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 13.5px; overflow-wrap: anywhere; }
.lien-unique code { flex: 1; font-family: var(--code); font-size: 12.5px; min-width: 0; }

.toast { position: fixed; left: 50%; bottom: calc(26px + var(--barre-bas) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--encre); color: var(--sur-encre); border-radius: 999px; padding: 11px 20px; font-weight: 700; z-index: 60; max-width: calc(100% - 32px); width: max-content; text-align: center; font-size: 14.5px; animation: monte .3s var(--ease) both; }
.reseau { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 55; background: var(--feuille); color: var(--encre); border: 1px solid var(--filet); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; box-shadow: var(--ombre-douce); display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); }
.reseau::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); flex: none; }

/* Écran d'entrée, erreurs */
.entree { min-height: 70vh; display: grid; align-content: center; gap: 22px; max-width: 520px; margin: 0 auto; padding-block: 60px; }
.entree form { display: grid; gap: 12px; }
.entree .note { border-radius: 14px; padding: 12px 14px; background: var(--cobalt-pale); font-size: 14.5px; }
.panne { min-height: 50vh; display: grid; align-content: center; gap: 16px; max-width: 560px; padding-block: 40px; }
.panne h1 { font-size: 30px; font-weight: 760; letter-spacing: -.04em; line-height: 1.1; }

/* Application : écrans Demandes, questionnaire, documents, moi */
.titre-ecran { font-size: 26px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 4px; }
.filtres { display: flex; gap: 6px; margin: 16px 0 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.filtres button { border: 1px solid var(--filet); background: var(--feuille); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 650; white-space: nowrap; min-height: 40px; }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.groupe-t { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--gris); margin: 18px 0 8px; }
.demande { width: 100%; text-align: left; border: 1px solid var(--filet-doux); background: var(--feuille); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 10px; color: var(--encre); text-decoration: none; transition: border-color var(--court) ease, transform .25s var(--ease), box-shadow .25s ease; }
.demande:hover { border-color: var(--encre); transform: translateY(-2px); box-shadow: var(--ombre-survol); }
.demande:active { transform: scale(.98); }
.demande.statique:hover { transform: none; box-shadow: none; border-color: var(--filet-doux); }
.demande .pic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--papier); }
.demande.afaire .pic { background: var(--cobalt-pale); color: var(--cobalt); }
.demande.fini { opacity: .78; }
.demande b { font-size: 15.5px; font-weight: 750; line-height: 1.25; display: block; overflow-wrap: anywhere; }
.demande .l2 { font-size: 13px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.demande .barre { height: 5px; border-radius: 3px; background: var(--filet-doux); margin-top: 10px; overflow: hidden; display: block; }
.demande .barre i { display: block; height: 100%; background: var(--cobalt); border-radius: 3px; }
.tag { font-size: 11.5px; font-weight: 700; color: var(--gris); border: 1px solid var(--filet); border-radius: 999px; padding: 0 8px; }
.carte-inst { border-radius: 18px; padding: 16px; background: var(--encre); color: var(--sur-encre); display: grid; gap: 10px; margin: 6px 0 14px; }
.carte-inst p { font-size: 13.5px; color: color-mix(in srgb, var(--sur-encre) 75%, transparent); }
.carte-inst ol { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.carte-inst .btn { background: var(--sur-encre); color: var(--encre); }
.carte-inst .btn.clair { background: transparent; color: var(--sur-encre); border-color: color-mix(in srgb, var(--sur-encre) 35%, transparent); }
.carte-inst :focus-visible { outline-color: var(--sur-encre); }
.colonne-app { max-width: 720px; }

.q-tete { position: sticky; top: 0; z-index: 3; background: var(--papier); padding: 6px 0 10px; margin: 0 -2px; }
.retour { border: 0; background: none; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--gris); min-height: 44px; }
.retour:hover { color: var(--encre); }
.q-titre { font-size: 22px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; }
.sauve { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gris); margin-top: 6px; min-height: 20px; }
.sauve .p { width: 8px; height: 8px; border-radius: 50%; background: var(--fait); flex: none; }
.sauve.encours .p { background: var(--cobalt); animation: clign 1s ease-in-out infinite; }
.sauve.horsligne .p { background: var(--gris); }
.sauve.horsligne { color: var(--encre); font-weight: 700; }
.sauve.erreur .p { background: var(--alerte); }
.sauve.erreur { color: var(--alerte); font-weight: 700; }
@keyframes clign { 50% { opacity: .3; } }
.progres { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; }
.progres .b { flex: 1; height: 6px; border-radius: 3px; background: var(--filet-doux); overflow: hidden; }
.progres .b i { display: block; height: 100%; background: var(--encre); border-radius: 3px; transition: width .4s var(--ease); }
.sections { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding: 2px 2px 4px; }
.sections::-webkit-scrollbar { display: none; }
.sections button { border: 1px solid var(--filet); background: var(--feuille); border-radius: 12px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; display: grid; gap: 0; text-align: left; min-height: 44px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.sections button small { font-weight: 600; color: var(--gris); font-size: 11.5px; }
.sections button[aria-current="step"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.sections button[aria-current="step"] small { color: color-mix(in srgb, var(--sur-encre) 70%, transparent); }
.sections button.complet small { color: var(--fait); }
.sections button[aria-current="step"].complet small { color: color-mix(in srgb, var(--sur-encre) 80%, transparent); }
.sections button.complet small::before { content: ""; display: inline-block; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); margin-right: 6px; animation: pop .35s var(--ease); }
.section-titre { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--gris); margin: 14px 0 8px; }
.info-q { font-size: 13px; color: var(--gris); background: var(--feuille); border-radius: 10px; padding: 8px 10px; }
.question .info-q { background: var(--papier); }
.alerte-q { font-size: 13px; font-weight: 650; color: var(--alerte); background: var(--alerte-pale); border-radius: 10px; padding: 8px 10px; }

.question { background: var(--feuille); border: 1px solid var(--filet-doux); border-radius: 20px; padding: 16px; margin-bottom: 12px; display: grid; gap: 12px; transition: border-color .35s ease, box-shadow .35s ease; }
.question.repondue { border-color: color-mix(in srgb, var(--fait) 35%, var(--filet-doux)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fait) 12%, transparent); }
.question.transmise { border-style: dashed; }
.q-l1 { display: flex; gap: 10px; align-items: baseline; }
.q-l1 .n { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--papier); font-size: 12px; font-weight: 800; color: var(--gris); flex: none; transition: background-color .3s ease, color .3s ease; position: relative; top: -1px; }
.q-l1 .n .ok-n { display: none; }
.question.repondue .n { background: var(--fait); color: var(--sur-fait); animation: halo .7s ease-out; }
.question.repondue .n .num-n { display: none; }
.question.repondue .n .ok-n { display: block; animation: pop .45s var(--ease); }
.q-libelle { font-size: 16.5px; font-weight: 720; letter-spacing: -.01em; line-height: 1.3; }
.q-libelle .obl { color: var(--cobalt); }
.q-aide { font-size: 13.5px; color: var(--gris); margin-top: -6px; }
.champ { width: 100%; border: 1px solid var(--filet); background: var(--papier); border-radius: 12px; padding: 11px 12px; font-size: 16px; min-height: 44px; }
.champ:focus { outline: 2px solid var(--cobalt); outline-offset: -1px; border-color: transparent; }
.champ:disabled, .champ[readonly] { opacity: .65; }
textarea.champ { resize: vertical; min-height: 88px; }
.unite { display: flex; align-items: center; gap: 10px; }
.unite .champ { max-width: 220px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts button { border: 1px solid var(--filet); background: var(--papier); border-radius: 999px; padding: 8px 14px; font-size: 14.5px; font-weight: 600; text-align: left; min-height: 44px; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--ease); }
.opts button:active, .echelle button:active { transform: scale(.94); }
.opts button[aria-pressed="true"], .opts button[aria-checked="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.opts button[aria-pressed="true"]::before, .opts button[aria-checked="true"]::before { content: ""; display: inline-block; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -3px); margin-right: 9px; animation: pop .3s var(--ease); }
.opts.colonne { flex-direction: column; align-items: stretch; }
.opts.colonne button { border-radius: 12px; }
.echelle { display: grid; grid-template-columns: repeat(var(--k, 5), minmax(0, 1fr)); gap: 6px; }
.echelle button { border: 1px solid var(--filet); background: var(--papier); border-radius: 10px; padding: 10px 0; font-weight: 750; min-height: 44px; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--ease); }
.echelle button[aria-checked="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.echelle-l { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--gris); }
.classement { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.classement li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--papier); border-radius: 12px; padding: 8px 10px; font-size: 14.5px; font-weight: 600; }
.classement .rang { font-weight: 800; color: var(--gris); }
.classement .fl { display: flex; gap: 4px; }
.mini-b { border: 1px solid var(--filet); background: var(--feuille); border-radius: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; flex: none; }
.mini-b:disabled { opacity: .35; }
.tableau-q { display: grid; gap: 8px; }
.tableau-q .rangee { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 44px; gap: 6px; }
.ajout { border: 1px dashed var(--filet); background: none; border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--gris); justify-self: start; min-height: 44px; }
.ajout:hover { color: var(--encre); border-color: var(--encre); }
.ajout:disabled { opacity: .45; }
/* Plusieurs valeurs : un champ par valeur ; la ligne ajoutée apparaît en douceur (coupé si le mouvement est réduit). */
.multi-q { display: grid; gap: 8px; }
/* Précision sous un choix « autre » ou « je ne sais pas » : apparaît en douceur. */
.precis.apparait { animation: monte .3s var(--ease) both; }
/* Pied de chaque question : une précision libre et un document joint, toujours possibles. */
.q-plus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.q-plus .fichiers { flex-basis: 100%; }
.plus summary { cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--gris); padding: 6px 0; display: inline-flex; align-items: center; min-height: 36px; }
.plus summary::-webkit-details-marker { display: none; }
.plus summary:hover { color: var(--encre); }
.plus[open] { flex-basis: 100%; }
.plus textarea { margin-top: 6px; min-height: 80px; animation: monte .25s var(--ease) both; }
.mini-zone { display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--filet); border-radius: 999px; padding: 5px 12px; min-height: 36px; font-size: 13.5px; font-weight: 700; color: var(--gris); cursor: pointer; position: relative; transition: border-color var(--court) ease, color var(--court) ease; }
.mini-zone:hover, .mini-zone:focus-within, .mini-zone.survol { border-color: var(--cobalt); color: var(--encre); }
.mini-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* À la fin : ce qui reste sans réponse, chaque question à un geste. */
.manquent { border-radius: 14px; background: var(--cobalt-pale); padding: 14px 16px; display: grid; gap: 8px; }
.manquent:empty { display: none; }
.manquent p { font-size: 14px; font-weight: 700; }
.manquent .liens { display: flex; flex-wrap: wrap; gap: 6px; }
.manquent button { border: 1px solid var(--cobalt); background: var(--feuille); color: var(--cobalt); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; min-height: 36px; text-align: left; }
.manquent.complet { background: var(--fait-pale); }
.manquent.complet p { color: var(--fait); }
.multi-q .rangee { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; }
.multi-q .mini-b { border-color: transparent; background: none; color: var(--gris); transition: background-color var(--court) ease, color var(--court) ease; }
.multi-q .mini-b:not(:disabled):hover { background: var(--cobalt-pale); color: var(--encre); }
.tableau-q .rangee.apparait, .multi-q .rangee.apparait { animation: apparait .22s var(--ease) both; }
@keyframes apparait { from { opacity: 0; transform: translateY(-6px); } }
.q-outils { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--filet-doux); padding-top: 10px; }
.q-outils button { border: 0; background: var(--papier); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: var(--gris); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.q-outils button:hover { color: var(--encre); }
.q-outils button[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
.q-outils .compte { background: var(--cobalt); color: var(--sur-cobalt); border-radius: 9px; font-size: 11px; padding: 0 6px; }
.fil { display: grid; gap: 8px; }
.bulle { border-radius: 14px; padding: 9px 12px; font-size: 14px; background: var(--papier); overflow-wrap: anywhere; }
.bulle.ldi { background: var(--cobalt-pale); }
.bulle b { display: block; font-size: 12px; color: var(--gris); font-weight: 700; }
.saisie-fil { display: flex; gap: 6px; }
.saisie-fil .champ { padding: 8px 10px; font-size: 16px; }
.ruban { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; border-radius: 12px; padding: 8px 10px; background: var(--cobalt-pale); color: var(--cobalt); }
.ruban.ok { background: var(--fait-pale); color: var(--fait); }
.ruban button { border: 0; background: none; padding: 0 2px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 750; font-size: 13px; min-height: 32px; }
.q-pied { display: grid; gap: 10px; margin: 18px 0 10px; }
.picker { position: relative; display: grid; gap: 6px; }
.picker-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.picker-b[aria-expanded="true"] { border-color: var(--encre); }
.picker-b .ic { transition: transform .25s var(--ease); }
.picker-b[aria-expanded="true"] .ic { transform: rotate(180deg); }
.pick-list { display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: var(--feuille); border: 1px solid var(--filet); box-shadow: 0 16px 36px rgba(17, 18, 20, .14); transform-origin: top; animation: deroule .24s var(--ease); }
.pick-list button { border: 0; background: none; border-radius: 10px; padding: 10px 12px; text-align: left; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; min-height: 44px; animation: monte .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.pick-list button:hover, .pick-list button:focus-visible { background: var(--papier); outline: none; }
.pick-list button[aria-selected="true"] { font-weight: 800; }
.pick-list button[aria-selected="true"] .ic { color: var(--fait); animation: pop .35s var(--ease); }
.delegue-tete { background: var(--encre); color: var(--sur-encre); border-radius: 20px; padding: 16px; display: grid; gap: 6px; margin: 4px 0 14px; }
.delegue-tete p { font-size: 13.5px; color: color-mix(in srgb, var(--sur-encre) 75%, transparent); }
.succes { display: grid; gap: 14px; place-items: center; text-align: center; padding: 60px 10px 30px; }
.succes svg { width: 96px; height: 96px; }
.succes circle { fill: none; stroke: var(--fait); stroke-width: 3; stroke-dasharray: 290; --l: 290; animation: trace .8s var(--ease) both; }
.succes path { fill: none; stroke: var(--fait); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; --l: 60; animation: trace .45s .65s var(--ease) both; }
.succes .grand { animation: monte .5s .5s var(--ease) both; }
.succes p.sous, .succes .btn { animation: monte .5s .75s var(--ease) both; }
.decision-b { display: grid; gap: 12px; background: var(--encre); color: var(--sur-encre); border-radius: 22px; padding: 22px; }
.decision-b p { color: color-mix(in srgb, var(--sur-encre) 75%, transparent); }
.decision-b .btn { background: var(--sur-encre); color: var(--encre); }
.decision-b .btn.clair { background: transparent; color: var(--sur-encre); border-color: color-mix(in srgb, var(--sur-encre) 40%, transparent); }
.decision-b :focus-visible { outline-color: var(--sur-encre); }

/* Mouvement : entrées en cascade, glissés, coches qui apparaissent */
@keyframes monte { from { opacity: 0; transform: translateY(16px); } }
@keyframes glisse { from { opacity: 0; transform: translateX(32px); } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 65% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bosse { 40% { transform: scale(1.3); } }
@keyframes deroule { from { opacity: 0; transform: translateY(-8px) scaleY(.94); } }
@keyframes trace { from { stroke-dashoffset: var(--l, 80); } to { stroke-dashoffset: 0; } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fait) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.anim > * { animation: monte .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.anim-glisse > * { animation: glisse .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.bosse { animation: bosse .45s var(--ease); display: inline-block; }
.premier .salut, .premier .chiffres, .premier .packs-choix { animation: monte .7s var(--ease) both; }
.premier .packs-choix { animation-delay: 0s; } .premier .salut { animation-delay: .08s; } .premier .chiffres { animation-delay: .3s; }
.revele { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.revele.vu { opacity: 1; transform: none; }
.revele .tuile, .revele .nouveaute, .revele .lignes > li, .revele .outil { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease), border-color var(--court) ease, background-color var(--court) ease, box-shadow .25s ease; transition-delay: calc(.12s + var(--i, 0) * 70ms); }
.revele.vu .tuile, .revele.vu .nouveaute, .revele.vu .lignes > li, .revele.vu .outil { opacity: 1; transform: none; }
.revele.vu .tuile:hover { transform: translateY(-3px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .revele, .revele .tuile, .revele .nouveaute, .revele .lignes > li, .revele .outil { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  :root { --barre-bas: 68px; }
  .cadre, .apercu-bandeau { padding-inline: 18px; }
  .entete { padding-block: 12px; gap: 10px; }
  .logo svg { height: 24px; }
  .logo span { display: none; }
  .entete .pastille { margin-left: auto; }
  .onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; background: var(--feuille); border-top: 1px solid var(--filet); padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .onglets button { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; padding: 6px 0; border-radius: 0; min-height: 52px; }
  .onglets button[aria-selected="true"] { background: none; color: var(--encre); }
  .onglets button[aria-selected="true"] svg { transform: translateY(-2px) scale(1.08); }
  .onglets .ic { width: 22px; height: 22px; }
  .onglets .pastille-n { position: absolute; top: 2px; left: calc(50% + 6px); }
  .onglets button[aria-selected="true"] .pastille-n { box-shadow: none; }
  .contenu { padding-bottom: calc(var(--barre-bas) + 40px); }
  .phrase { font-size: 42px; }
  .packs-choix { grid-auto-columns: 82%; }
  section.bloc { padding-block: 30px; }
  .bloc-tete h2 { font-size: 24px; }
  .tuiles { grid-template-columns: minmax(0, 1fr); }
  .tuile, .tuile.large { grid-column: auto; padding: 18px; }
  .nouveautes { grid-auto-columns: 78%; }
  .lignes > li { grid-template-columns: minmax(0, 1fr); }
  .droite { justify-content: flex-start; }
  .fenetre { width: 100%; max-height: 100%; height: 100%; border-radius: 0; top: 0; left: 0; transform: translateY(4%); }
  .fenetre.ouvert { transform: none; }
  .diapo { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
  .frise { min-width: 680px; }
  .detail { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 22px; }
  .detail h3 { font-size: 22px; }
  .feuille { left: 0; right: 0; bottom: 0; width: auto; border-radius: 24px 24px 0 0; transform: translateY(100%); opacity: 1; }
  .feuille.ouvert { transform: none; }
  .pied { padding-bottom: 24px; }
  .q-tete { top: 0; }
  .plus summary, .mini-zone, .manquent button { min-height: 44px; }
}
@media (min-width: 761px) { .feuille .poignee { display: none; } }
/* Téléphone : quand une feuille ou une fenêtre est ouverte, le message passe en haut pour ne rien masquer. */
@media (max-width: 760px) { body:has(.feuille.ouvert, .fenetre.ouvert) .toast { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); } }
/* Téléphone : les liens isolés gardent une cible d'au moins 44 px de haut. */
@media (max-width: 760px) { .pied a, .lignes .quoi a, .colonne-app p > a[href^="mailto:"], .apercu-bandeau a { display: inline-flex; align-items: center; min-height: 44px; } }