/*  assets/style.css  :  Espace client OPTIMAVI
 *  Feuille unique des pages PHP (les outils HTML budget, questionnaire et le jeu gardent leur style).
 *  Organisation : jetons (:root) → base → composants (en-tête, onglets, cartes, volets, listes, boutons, formulaires)
 *  → pages (accueil, documents, dossier, messages, compte, gestion, produits) → jeux (page Jeu & Éducation, inchangée).
 *  Règles : polices système (aucune police externe), icônes SVG en traits (lib/icones.php), cibles tactiles de 44 px,
 *  contrastes AA, focus visible, mouvements réduits respectés. Un seul mode, clair. */
@layer base, composants, pages, jeux;

:root{
  --bleu:#496580;--bleu-f:#34495e;--bleu-c:#eaf0f6;
  --encre:#1f2933;--texte:#1f2933;--gris:#5f6b7a;--gris-c:#8a95a3;
  --ligne:#e1e6ec;--fond:#f4f6f8;--surface:#fff;
  --or:#e0a82e;--or-f:#cf981f;--or-t:#8a6508;--or-c:#fff6df;
  --vert:#2f7a55;--vert-c:#e8f4ee;--attention:#8a6508;--attention-c:#fff4d6;   /* --gris-c : icônes et filets seulement (3:1), jamais en texte */
  --rouge:#9b3b2a;--rouge-c:#fbeae7;--info:#3b6a9b;--info-c:#eaf2fb;
  --beige:#FFDBBB;--beige-c:#fff3e8;                      /* conservés pour les jeux et quelques encarts */
  --rayon:12px;--rayon-s:8px;--rayon-xs:6px;
  --ombre:0 1px 2px rgba(31,41,51,.05),0 4px 14px rgba(31,41,51,.05);
  --ombre-f:0 2px 6px rgba(31,41,51,.08),0 12px 32px rgba(31,41,51,.12);
  --police:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --police-titre:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --largeur:1080px;--gouttiere:16px;
}

/* ===================================================== BASE ===================================================== */
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  html,body{margin:0;padding:0}
  body{font-family:var(--police);background:var(--fond);color:var(--encre);font-size:16px;line-height:1.5;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{color:var(--encre);margin:0 0 10px;line-height:1.25;text-wrap:balance}
  h1{font-family:var(--police-titre);font-weight:400;font-size:clamp(26px,22px + 1.2vw,32px);letter-spacing:-.01em}
  h2{font-size:19px;font-weight:600}
  h3{font-size:16.5px;font-weight:600}
  h4{font-size:15px;font-weight:600;margin-bottom:6px}
  p{margin:0 0 12px}
  a{color:var(--bleu);text-decoration-thickness:1px;text-underline-offset:2px}
  a:hover{color:var(--bleu-f)}
  strong,b{font-weight:600}
  img,svg{vertical-align:middle}
  svg.ic{flex:none;width:1.25em;height:1.25em;vertical-align:-.18em}
  button{font:inherit}
  :focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
  ::selection{background:var(--or-c)}
  .num,.montant{font-variant-numeric:tabular-nums}
  [hidden]{display:none!important}
  .visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
}

/* ================================================= COMPOSANTS ================================================= */
@layer composants{
  /* ---- Lien d'évitement, en-tête, navigation ---- */
  .saut{position:absolute;left:-999px;top:8px;z-index:100;background:var(--encre);color:#fff;padding:10px 14px;border-radius:var(--rayon-s)}
  .saut:focus{left:8px}
  .entete{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--ligne)}
  .entete-int{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere);min-height:60px;display:flex;align-items:center;gap:14px}
  .entete .logo{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}   /* peut rétrécir sur les écrans étroits, sans jamais pousser le reste hors de l'écran */
  .entete .logo img{height:auto;max-height:34px;width:auto;max-width:100%;display:block}
  .nav-principale{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap}
  .nav-principale a{display:inline-flex;align-items:center;gap:7px;padding:0 12px;height:40px;border-radius:var(--rayon-s);font-weight:600;font-size:15px;color:var(--gris);text-decoration:none;white-space:nowrap}
  .nav-principale a:hover{background:var(--fond);color:var(--encre)}
  .nav-principale a[aria-current=page]{color:var(--bleu);background:var(--bleu-c)}
  .nav-principale .ic{color:currentColor}
  .compteur{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bleu);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .compteur.or{background:var(--or);color:var(--encre)}
  .compteur.gris{background:var(--fond);color:var(--gris)}
  .entete-droite{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
  .entete-droite .btn{white-space:nowrap}
  @media (max-width:400px){.entete-droite .btn.petit{padding-left:10px;padding-right:10px}}
  .entete nav.menu{display:flex;gap:6px;align-items:center;margin-left:auto}
  .entete nav.menu a{text-decoration:none;font-weight:600;color:var(--gris);padding:0 10px;min-height:40px;display:inline-flex;align-items:center;border-radius:var(--rayon-s)}
  .entete nav.menu a:hover{background:var(--fond);color:var(--encre)}
  .entete-droite .lien-simple{color:var(--gris);text-decoration:none;font-weight:600;font-size:14.5px;padding:0 8px;height:40px;display:inline-flex;align-items:center;border-radius:var(--rayon-s)}
  .entete-droite .lien-simple:hover{background:var(--fond);color:var(--encre)}
  .langue{display:inline-flex;border:1px solid var(--ligne);border-radius:20px;overflow:hidden;font-size:12.5px;flex:none}
  .langue a{padding:5px 9px;text-decoration:none;color:var(--gris);font-weight:600;min-height:28px;display:inline-flex;align-items:center}
  @media (max-width:400px){.entete-droite .langue a.on{display:none}}   /* écran étroit : seule l'autre langue est proposée (FR ⇄ EN) */
  .langue a.on{background:var(--bleu);color:#fff}
  @media (pointer:coarse){.langue a{min-height:40px;min-width:44px;justify-content:center}.lien{min-height:44px;display:inline-flex;align-items:center}.liste a,.pied a,.fiche .liens a,.pcarte .liens a,.carte-pied a,.faq summary,.aller-plus-loin a{display:inline-flex;align-items:center;min-height:44px}.pied a{padding:0 4px}:is(p,li,td,span,.pj,.faits div,.doc-txt b)>a:not([class]){padding-block:6px;margin-block:-6px}}
  .menu-compte{position:relative}
  .menu-compte>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;height:44px;padding:0 8px 0 4px;border-radius:22px;font-weight:600;color:var(--encre)}
  .menu-compte>summary::-webkit-details-marker{display:none}
  .menu-compte>summary:hover{background:var(--fond)}
  .menu-compte .avatar{width:34px;height:34px;border-radius:50%;background:var(--bleu);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em;flex:none}
  .menu-compte .prenom{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-compte .deroule{position:absolute;right:0;top:50px;min-width:230px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre-f);padding:6px;z-index:60}
  .menu-compte .deroule a,.menu-compte .deroule button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border-radius:var(--rayon-s);text-decoration:none;color:var(--encre);background:none;border:0;cursor:pointer;text-align:left;font-weight:500;font-size:15px}
  .menu-compte .deroule a:hover,.menu-compte .deroule button:hover{background:var(--fond)}
  .menu-compte .deroule .ic{color:var(--gris)}
  .menu-compte .deroule .sep{height:1px;background:var(--ligne);margin:6px 4px}
  .menu-compte .deroule .qui{padding:8px 12px 6px;font-size:13px;color:var(--gris)}
  .menu-compte .deroule .qui b{display:block;color:var(--encre);font-size:14.5px}
  .onglets-bas{display:none}
  .contenu{flex:1;width:100%;max-width:var(--largeur);margin:0 auto;padding:22px var(--gouttiere) 48px}
  body.large .contenu,body.large .entete-int{max-width:1240px}
  @media (max-width:899px){
    .nav-principale{display:none}
    .entete-int{min-height:56px}
    .menu-compte .prenom{display:none}
    .onglets-bas{display:grid;grid-template-columns:repeat(5,minmax(0,110px));justify-content:center;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--ligne);padding-bottom:env(safe-area-inset-bottom);z-index:50;transition:transform .2s}
    body:has(textarea:focus,input:not([type=checkbox]):not([type=radio]):not([type=file]):focus) .onglets-bas,body.clavier .onglets-bas{transform:translateY(110%)}
    .onglets-bas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;font-size:11px;font-weight:600;color:var(--gris);text-decoration:none;position:relative}
    .onglets-bas a .ic{width:24px;height:24px}
    .onglets-bas a[aria-current=page]{color:var(--bleu)}
    .onglets-bas a[aria-current=page]::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--bleu)}
    .onglets-bas .compteur{position:absolute;top:5px;left:calc(50% + 4px);height:18px;min-width:18px;font-size:11px}
    body.connecte .contenu{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
    .contenu{padding-top:16px}
  }
  /* ---- Pied ---- */
  .pied{background:var(--surface);border-top:1px solid var(--ligne);padding:18px var(--gouttiere) 22px;font-size:12.5px;color:var(--gris);text-align:center}
  .pied p{margin:0 0 6px;max-width:820px;margin-left:auto;margin-right:auto}
  .pied .petit{font-size:11.5px}
  .pied a{color:var(--gris)}
  @media (max-width:899px){body.connecte .pied{padding-bottom:calc(80px + env(safe-area-inset-bottom))}}

  /* ---- Titres de page, sections ---- */
  .page-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin:2px 0 18px}
  .page-tete h1{margin:0}
  .page-tete .sous{margin:4px 0 0;color:var(--gris);font-size:15px;max-width:60ch}
  .page-tete .actions{display:flex;gap:8px;flex-wrap:wrap}
  .page-tete .pastilles{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .section{margin:26px 0 12px}
  .section h2{margin:0 0 2px}
  .section p.sous{margin:0 0 12px;color:var(--gris);font-size:14.5px}
  .bienvenue{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
  .bienvenue p{color:var(--gris);margin:0}

  /* ---- Cartes ---- */
  .carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:20px 22px;margin-bottom:14px}
  .carte.etroite{max-width:520px;margin:0 auto 14px}
  .carte.accent-or{border-left:4px solid var(--or)}
  .carte.accent-vert{border-left:4px solid var(--vert)}
  .carte.accent-bleu{border-left:4px solid var(--bleu)}
  .carte h3{margin:0 0 10px}
  .carte-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .carte-tete h2,.carte-tete h3{margin:0;display:flex;align-items:center;gap:8px}
  .carte-tete .ic{color:var(--bleu)}
  .carte-tete .aide{margin:0}
  .carte-pied{margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .carte-pied.reparti{justify-content:space-between}
  @media (max-width:640px){.carte{padding:16px 16px;border-radius:10px}.carte.etroite{margin-bottom:12px}}

  /* ---- Volets dépliables ---- */
  details.volet{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);margin-bottom:12px;scroll-margin-top:76px}
  [id]{scroll-margin-top:76px}
  details.volet>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 16px;cursor:pointer;font-weight:600;font-size:16px;color:var(--encre);border-radius:var(--rayon)}
  details.volet>summary::-webkit-details-marker{display:none}
  details.volet>summary:hover{background:var(--fond)}
  details.volet[open]>summary{border-radius:var(--rayon) var(--rayon) 0 0}
  details.volet>summary>.ic{color:var(--bleu)}
  details.volet>summary .titre{flex:1;min-width:0}
  details.volet>summary .sous{font-weight:400;color:var(--gris);font-size:14px;white-space:nowrap}
  details.volet>summary .chevron{color:var(--gris-c);transition:transform .2s;flex:none}
  details.volet[open]>summary .chevron{transform:rotate(180deg)}
  .volet-corps{padding:4px 16px 18px;border-top:1px solid var(--ligne)}
  .volet-corps>p:first-child{margin-top:10px}
  details.volet details.volet{border-radius:var(--rayon-s);margin:10px 0 0}
  @media (max-width:640px){details.volet>summary .sous{display:none}}

  /* ---- Liste « À faire » ---- */
  .a-faire{list-style:none;margin:0;padding:0}
  .a-faire li.tache{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--ligne)}
  .a-faire li.tache:first-child{border-top:0}
  .tache-ic{width:42px;height:42px;border-radius:50%;background:var(--or-c);color:var(--or-t);display:flex;align-items:center;justify-content:center;flex:none}
  .tache.fait .tache-ic{background:var(--vert-c);color:var(--vert)}
  .tache.info .tache-ic{background:var(--info-c);color:var(--info)}
  .tache-txt{min-width:0}
  .tache-txt b{display:block;font-size:16px;line-height:1.3}
  .tache-txt span{color:var(--gris);font-size:14px}
  .tache-action{display:flex;gap:6px}
  .tache-action .btn{white-space:nowrap}
  .a-faire-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  .a-faire-tete .reste{color:var(--gris);font-size:14px}
  .progression{height:8px;background:var(--fond);border-radius:6px;overflow:hidden;margin:8px 0 2px}
  .progression i{display:block;height:100%;background:var(--bleu);border-radius:6px;transition:width .4s}
  .progression.or i{background:var(--or)}
  @media (max-width:640px){.a-faire li.tache{grid-template-columns:auto 1fr}.tache-action{grid-column:2;justify-self:start}.tache-action .btn{min-height:40px}}

  /* ---- Accès rapides (tuiles cliquables) et tuiles de chiffres (gestion) ---- */
  .tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
  .tuiles.larges{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  a.tuile{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:14px 14px 14px 16px;text-decoration:none;color:var(--encre);min-height:78px;transition:border-color .15s,box-shadow .15s,transform .15s}
  a.tuile:hover{border-color:var(--bleu);box-shadow:var(--ombre);transform:translateY(-1px)}
  .tuile-ic{width:42px;height:42px;border-radius:11px;background:var(--bleu-c);color:var(--bleu);display:flex;align-items:center;justify-content:center;flex:none}
  a.tuile.or .tuile-ic{background:var(--or-c);color:var(--or-t)}
  a.tuile.vert .tuile-ic{background:var(--vert-c);color:var(--vert)}
  a.tuile b{display:block;font-size:15px;line-height:1.3}
  a.tuile .meta{font-size:13px;color:var(--gris);margin-top:2px}
  a.tuile .meta.attention{color:var(--or-t);font-weight:600}
  a.tuile .chevron{color:var(--gris-c)}
  div.tuile{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
  div.tuile.or{border-left:4px solid var(--or)}
  div.tuile .ic{font-size:24px;line-height:1}
  div.tuile h2{font-size:17px;margin:0}
  div.tuile .etat{font-size:14px;color:var(--gris)}
  div.tuile .etat b{color:var(--encre)}
  div.tuile .actions{margin-top:auto;padding-top:8px;display:flex;gap:8px;flex-wrap:wrap}
  @media (max-width:640px){.tuiles{grid-template-columns:1fr 1fr;gap:8px}a.tuile{grid-template-columns:1fr;padding:12px;min-height:0;gap:8px}a.tuile .chevron{display:none}a.tuile .tuile-ic{width:36px;height:36px}}

  /* ---- Listes de documents, états ---- */
  .liste-docs{list-style:none;margin:0;padding:0}
  .liste-docs>li.doc{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--ligne)}
  .liste-docs>li.doc:first-child{border-top:0}
  .doc-ic{width:42px;height:42px;border-radius:11px;background:var(--fond);color:var(--bleu);display:flex;align-items:center;justify-content:center;flex:none}
  li.doc.a-signer .doc-ic{background:var(--or-c);color:var(--or-t)}
  li.doc.signe .doc-ic{background:var(--vert-c);color:var(--vert)}
  .doc-txt{min-width:0}
  .doc-txt b{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .doc-txt .meta{font-size:13px;color:var(--gris);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:2px}
  .doc-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
  .doc-actions .btn{min-height:40px;padding:8px 14px;font-size:14px}
  .liste-docs .vide{color:var(--gris);font-size:14.5px;padding:8px 0}
  @media (max-width:640px){.liste-docs>li.doc{grid-template-columns:auto 1fr}.doc-actions{grid-column:2/-1;justify-content:flex-start}}
  .etat,.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--fond);color:var(--gris);white-space:nowrap;line-height:1.6;vertical-align:middle}
  .etat .ic,.badge .ic{width:14px;height:14px}
  .etat.a-faire,.badge.or{background:var(--or-c);color:var(--or-t)}
  .etat.fait,.badge.vert{background:var(--vert-c);color:var(--vert)}
  .etat.attention,.badge.rouge{background:var(--rouge-c);color:var(--rouge)}
  .etat.info,.badge.bleu{background:var(--info-c);color:var(--info)}
  .etat.neutre{background:var(--fond);color:var(--gris)}
  @media (forced-colors:active){.etat,.badge,.compteur{border:1px solid currentColor}}

  /* ---- Boutons ---- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--bleu);border-radius:var(--rayon-s);background:var(--bleu);color:#fff;font:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center;transition:background .15s,border-color .15s,color .15s}
  .btn:hover{background:var(--bleu-f);border-color:var(--bleu-f);color:#fff}
  .btn.cta,.btn.or{background:var(--or);border-color:var(--or);color:#2b2b2b}
  .btn.cta:hover,.btn.or:hover{background:var(--or-f);border-color:var(--or-f);color:#2b2b2b}
  .btn.secondaire,.btn.contour{background:var(--surface);color:var(--bleu)}
  .btn.secondaire:hover,.btn.contour:hover{background:var(--bleu-c);color:var(--bleu-f);border-color:var(--bleu-f)}
  .btn.discret{background:transparent;border-color:transparent;color:var(--bleu)}
  .btn.discret:hover{background:var(--fond);color:var(--bleu-f)}
  .btn.blanc{background:#fff;color:var(--bleu);border-color:#fff}
  .btn.danger{background:var(--rouge);border-color:var(--rouge)}
  .btn.danger:hover{background:#7e2f21;border-color:#7e2f21}
  .btn.petit{font-size:14px;padding:8px 12px}
  @media (pointer:fine){.btn.petit{min-height:36px;padding:6px 12px}}
  .btn.large{width:100%;margin-top:14px}
  .btn:disabled{opacity:.55;cursor:wait}
  .btn .ic{width:18px;height:18px}
  .lien{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--bleu);text-decoration:underline;text-underline-offset:2px}
  .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

  /* ---- Messages, alertes, états vides ---- */
  .alerte{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--rayon-s);border:1px solid var(--ligne);background:var(--surface);font-size:15px;margin:0 0 14px}
  .alerte .ic{flex:none;margin-top:2px}
  .alerte p{margin:0}
  .alerte.ok{background:var(--vert-c);border-color:#cfe3d7;color:#1f5a41}
  .alerte.info{background:var(--info-c);border-color:#cfdff0;color:#2b4f75}
  .alerte.attention{background:var(--attention-c);border-color:#f0dcb6;color:#6b4300}
  .alerte.danger{background:var(--rouge-c);border-color:#efcdc5;color:#7a3423}
  .msg{display:none;padding:11px 13px;border-radius:var(--rayon-s);margin:12px 0 0;font-size:14.5px}
  .msg.on{display:block}
  .msg.ok{background:var(--vert-c);color:#1f5a41}
  .lien-copie{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.lien-copie input{flex:1 1 220px;min-width:0;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
  .msg.ko{background:var(--rouge-c);color:#7a3423}
  .enclair{background:var(--bleu-c);border-left:4px solid var(--bleu);padding:10px 12px;border-radius:var(--rayon-xs);font-size:14.5px}
  .aide{font-size:14px;color:var(--gris);margin:4px 0 0}
  .vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 12px;color:var(--gris);font-size:14.5px}
  .vide .ic{width:36px;height:36px;color:var(--gris-c)}
  .vide b{color:var(--encre)}

  /* ---- Formulaires ---- */
  label{display:block;font-weight:600;font-size:14.5px;margin:12px 0 5px}
  input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=search],input[type=url],textarea,select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #c5ced8;border-radius:var(--rayon-s);font:inherit;font-size:16px;background:var(--surface);color:var(--encre)}
  textarea{min-height:96px;resize:vertical;field-sizing:content}
  select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
  input:focus,textarea:focus,select:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:var(--bleu)}
  input:disabled,select:disabled{background:var(--fond);color:var(--gris)}
  input[type=file]{font:inherit;font-size:14px;width:100%;padding:8px 0}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--bleu)}
  @media (pointer:coarse){input[type=checkbox],input[type=radio]{width:24px;height:24px}}
  /* Gestion : demande de questionnaire (formulaire + aperçu de l'email) */
  .demande-grille{align-items:start}
  .apercu-email{background:var(--fond);border:1px solid var(--ligne);border-radius:var(--rayon);padding:14px}
  .apercu-email iframe{width:100%;height:560px;border:1px solid var(--ligne);border-radius:var(--rayon-s);background:#fff}
  .apercu-sujet{margin:6px 0 10px;font-size:14.5px}
  .fd-modeles{font-size:13.5px;margin:4px 0 12px}
  .fd-modeles .lien{background:none;border:0;padding:0;color:var(--bleu);text-decoration:underline;cursor:pointer;font:inherit;font-size:13.5px}
  @media (max-width:899px){.apercu-email iframe{height:440px}}
  .champ-mdp{display:block;position:relative}
  .champ-mdp input{padding-right:48px}
  .voir-mdp{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--gris);border-radius:var(--rayon-s);cursor:pointer}
  .voir-mdp:hover,.voir-mdp[aria-pressed=true]{color:var(--bleu)}
  .case{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14.5px;margin:12px 0;cursor:pointer}
  .case input{margin-top:2px;flex:none}
  .champ{margin-bottom:4px}
  .champ label{margin-top:10px}
  .grille-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
  .grille-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}
  .form-ligne{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  .code2fa,.code-saisie{font-family:var(--police-titre);font-size:30px;letter-spacing:8px;text-align:center}
  .zone-depot{border:2px dashed #c5ced8;border-radius:var(--rayon);padding:18px 16px;text-align:center;background:var(--fond);transition:border-color .15s,background .15s}
  .zone-depot.survol{border-color:var(--bleu);background:var(--bleu-c)}
  .zone-depot p{margin:6px 0 0;font-size:14px;color:var(--gris)}
  .zone-depot .ic{width:32px;height:32px;color:var(--bleu)}
  .zone-depot .actions{justify-content:center;margin-top:10px}
  .fichiers-choisis{list-style:none;margin:10px 0 0;padding:0;font-size:14px;text-align:left}
  .fichiers-choisis li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--ligne)}

  /* ---- Onglets, listes simples, tableaux ---- */
  .onglets{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
  .onglets a{padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:20px;text-decoration:none;font-weight:600;font-size:14px;color:var(--bleu);background:var(--surface);border:1px solid var(--ligne)}
  .onglets a.on{background:var(--bleu);color:#fff;border-color:var(--bleu)}
  .liste{margin:0;padding:0;list-style:none}
  .liste li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--ligne);font-size:14.5px;flex-wrap:wrap}
  .liste li:last-child{border-bottom:0}
  .liste .d,.d{color:var(--gris);font-size:13px}
  table.tab,.table-cartes{width:100%;border-collapse:collapse;font-size:14.5px}
  table.tab th,table.tab td,.table-cartes th,.table-cartes td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--ligne);vertical-align:top}
  table.tab th,.table-cartes th{color:var(--gris);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
  .defil{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .legal .carte table{display:block;overflow-x:auto;max-width:100%}
  @media (max-width:640px){.table-cartes thead{display:none}.table-cartes tr{display:block;border:1px solid var(--ligne);border-radius:10px;padding:8px 12px;margin-bottom:8px}.table-cartes td{display:block;border:0;padding:6px 0;text-align:left;min-width:0;overflow-wrap:anywhere}.table-cartes td:empty{display:none}.table-cartes td::before{content:attr(data-l);display:block;color:var(--gris);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}.table-cartes td[data-l=""]::before,.table-cartes td:not([data-l])::before{display:none}.table-cartes td .pastilles-dossier{gap:4px}}

  /* ---- Fenêtre modale ---- */
  dialog.modale{border:0;border-radius:var(--rayon);padding:0;width:min(560px,calc(100vw - 32px));box-shadow:var(--ombre-f);color:var(--encre)}
  dialog.modale::backdrop{background:rgba(31,41,51,.45)}
  .modale-corps{padding:20px 22px}
  .modale-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .modale-tete h2{margin:0}
  .modale-fermer{background:none;border:0;width:40px;height:40px;border-radius:50%;cursor:pointer;color:var(--gris);display:inline-flex;align-items:center;justify-content:center}
  .modale-fermer:hover{background:var(--fond)}
  @media (max-width:640px){dialog.modale{width:calc(100vw - 16px);margin:auto 8px 8px}}

  /* ---- Contact à trois choix ---- */
  .contact-liste{display:flex;flex-direction:column;gap:8px}
  .contact-liste a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre);background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:10px 12px;min-height:52px;font-size:14.5px;line-height:1.3;transition:border-color .15s,background .15s}
  .contact-liste a:hover{border-color:var(--bleu);background:var(--bleu-c)}
  .contact-liste .ic{color:var(--bleu);width:22px;height:22px}
  .contact-liste b{color:var(--encre);white-space:nowrap}
  .contact-liste span:last-child{color:var(--gris);font-size:13px;margin-left:auto;text-align:right}
  .contact-phrase{font-size:13.5px;color:var(--gris);margin:8px 0 0}
  .contact-bloc{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 20px;margin:14px 0 20px}
  .contact-bloc h3{margin:0 0 10px}
  .contact-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
  .contact-choix .cc{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--encre);background:var(--fond);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:12px 14px;min-height:76px;transition:border-color .15s}
  .contact-choix .cc:hover{border-color:var(--bleu)}
  .contact-choix .cc .ic{color:var(--bleu);width:22px;height:22px}
  .contact-choix .cc b{color:var(--bleu);font-size:15px}
  .contact-choix .cc span:last-child{font-size:13px;color:var(--gris);line-height:1.4}
  .contact-compact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .contact-compact .btn{padding:8px 14px;font-size:14px;min-height:40px}

  /* ---- Divers hérités (gestion, connexion, pages de présentation) ---- */
  .jauge{height:9px;background:var(--fond);border-radius:6px;overflow:hidden}
  .jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--bleu),var(--or));border-radius:6px}
  details.bloc-repli{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);margin-bottom:12px;padding:0 16px}
  details.bloc-repli summary{cursor:pointer;min-height:52px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px;color:var(--encre);list-style:none}
  details.bloc-repli summary::-webkit-details-marker{display:none}
  details.bloc-repli summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--gris-c);border-bottom:2px solid var(--gris-c);transform:rotate(45deg);margin-right:4px;transition:transform .2s}
  details.bloc-repli[open] summary::after{transform:rotate(-135deg)}
  details.bloc-repli .corps{padding:0 0 16px}
  .frise{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--ligne)}
  .frise li{position:relative;padding:4px 0 12px 14px;font-size:14.5px}
  .frise li::before{content:"";position:absolute;left:-20px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--bleu);border:2px solid #fff}
  .frise li .d{color:var(--gris);font-size:13px;display:block}
  .bandeau{background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--bleu);border-radius:var(--rayon);padding:16px 20px;margin-bottom:16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  .bandeau.client{border-left-color:var(--vert)}
  .bandeau .qui{flex:1;min-width:220px}
  .bandeau .qui h1{font-size:24px;margin:0 0 4px}
  .bandeau .qui p{margin:0;color:var(--gris);font-size:14.5px}
  .bandeau .statut{font-size:13px;font-weight:700;color:var(--or-t);background:var(--or-c);border-radius:20px;padding:4px 12px;white-space:nowrap}
  .bandeau .statut.client{background:var(--vert-c);color:var(--vert)}
  .niveau{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;background:var(--fond);border-radius:var(--rayon-s)}
  .niveau .ic{font-size:22px}
  .niveau .txt{flex:1;font-size:13.5px}
  .niveau .txt b{display:block;font-size:14.5px}
  .niveau .jauge{margin-top:5px}
  .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .badges span{font-size:12px;padding:3px 9px;border-radius:12px;background:var(--surface);border:1px solid var(--ligne);color:var(--gris)}
  .badges span.ok{border-color:var(--or);color:var(--encre);background:var(--or-c)}
  .pj-liste li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--ligne);font-size:14px;flex-wrap:wrap}
}

/* ==================================================== PAGES ==================================================== */
@layer pages{
  /* ---- Accueil ---- */
  .accueil-grille{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
  .accueil-grille>div{min-width:0}
  @media (max-width:899px){.accueil-grille{display:flex;flex-direction:column;align-items:stretch}.accueil-grille>div{display:contents}.accueil-grille .ordre-1{order:1}.accueil-grille .ordre-2{order:2}.accueil-grille .ordre-3{order:3}.accueil-grille .ordre-4{order:4}.accueil-grille .ordre-5{order:5}}
  details.replis{margin-top:12px;border-top:1px solid var(--ligne);padding-top:6px}
  details.replis>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;font-weight:600;font-size:14.5px;color:var(--gris)}
  details.replis>summary::-webkit-details-marker{display:none}
  details.replis>summary .chevron{transition:transform .2s;color:var(--gris-c)}
  details.replis[open]>summary .chevron{transform:rotate(90deg)}
  .faits{list-style:none;margin:0;padding:0;font-size:14.5px}
  .faits li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--ligne)}
  .faits li:first-child{border-top:0}
  .faits .ic{color:var(--vert);margin-top:3px}
  .faits .d{color:var(--gris);font-size:13px;display:block}
  .piliers-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 18px}
  .piliers-liste li{display:flex;gap:10px;font-size:14.5px;line-height:1.4}
  .piliers-liste .ic{color:var(--bleu);flex:none;margin-top:3px}
  .piliers-liste b{display:block}
  .piliers-liste span{color:var(--gris)}
  .avantages{list-style:none;margin:8px 0 0;padding:0}
  .avantages li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;padding:7px 0;border-top:1px solid var(--ligne)}
  .avantages li:first-child{border-top:0}
  .avantages li .ic{color:var(--bleu);flex:none;margin-top:3px}
  .avantages li b{display:block}
  .avantages li span{color:var(--gris);font-size:13.5px}
  .legaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0 4px}
  .legal{background:var(--fond);border-radius:var(--rayon-s);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
  .legal b{font-size:14.5px}.legal span{font-size:13px;color:var(--gris);flex:1}.legal a{font-size:14px;font-weight:600;margin-top:6px}
  .analyse{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 20px;margin-bottom:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .analyse .texte{flex:1;min-width:240px}
  .analyse h2{margin:0 0 6px}
  .analyse p{margin:0;font-size:14.5px;color:var(--gris)}

  /* ---- Documents, signature, attestation ---- */
  .signer-apercu{border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;background:#e9ecef;height:min(68vh,640px);position:relative;margin-bottom:12px}
  .tactile-seul{display:none}
  @media (pointer:coarse){.tactile-seul{display:inline-flex}}
  @media (max-width:899px),(pointer:coarse){.apercu-pc{display:none}}   /* sur téléphone, le PDF s'ouvre dans un nouvel onglet : un cadre n'y est pas lisible */
  .signer-apercu iframe{width:100%;height:100%;border:0;display:block}
  .signer-etapes{margin:0;padding:0;list-style:none;counter-reset:etape}
  .signer-etapes>li{position:relative;padding:16px 0 16px 48px;border-top:1px solid var(--ligne);min-width:0}
  .signer-etapes>li::before{counter-increment:etape;content:counter(etape);position:absolute;left:0;top:16px;width:34px;height:34px;border-radius:50%;background:var(--bleu-c);color:var(--bleu);font-weight:700;display:flex;align-items:center;justify-content:center}
  .signer-etapes .mentions{background:var(--fond);border-radius:var(--rayon-s);padding:12px 14px;margin-top:10px;font-size:14px}
  .signer-etapes .mentions ul{margin:6px 0 0;padding-left:18px}
  .signer-etapes .mentions details.replis{margin-top:6px;border:0;padding:0}
  .signer-etapes .aide.avant{margin:0 0 10px}
  .signer-etapes .actions.apres{margin-top:12px}
  .carte .aide.apres{margin-top:14px}
  .carte .actions.apres,.volet-corps .actions.apres{margin-top:14px}
  .volet-corps .aide.apres{margin-top:12px}
  .carte h4.apres{margin:12px 0 6px}
  .zone-depot.apres{margin-top:12px}
  .zone-depot select{max-width:260px}
  .liste.compacte{font-size:14.5px}
  .liste.colonnes{columns:2;column-gap:24px}
  .liste.colonnes li{break-inside:avoid}
  @media (max-width:640px){.liste.colonnes{columns:1}}
  @media (max-width:640px){.signer-etapes>li{padding-left:42px}.signer-etapes>li::before{width:30px;height:30px;font-size:14px}}
  .signer-etapes>li.fait::before{background:var(--vert-c);color:var(--vert);content:"✓"}
  .signer-etapes h3{margin:4px 0 6px}
  .signer-etapes .code-saisie{max-width:240px;letter-spacing:10px;font-size:28px}
  .mentions{font-size:13.5px;color:var(--gris);background:var(--fond);border-radius:var(--rayon-s);padding:10px 12px;margin:10px 0}
  .mentions ul{margin:6px 0 0;padding-left:18px}
  .preuve{list-style:none;margin:0;padding:0;font-size:14.5px}
  .preuve li{display:grid;grid-template-columns:200px 1fr;gap:8px 14px;padding:8px 0;border-top:1px solid var(--ligne);overflow-wrap:anywhere}
  .preuve li span:first-child{color:var(--gris)}
  @media (max-width:640px){.preuve li{grid-template-columns:1fr}.signer-apercu{height:60vh}}
  @media print{body.attestation .entete,body.attestation .onglets-bas,body.attestation .pied,body.attestation .btn,body.attestation .actions,body.attestation .page-tete .actions,body.attestation #contact-attestation{display:none!important}body.attestation .carte{border:0;padding:0}body.attestation{background:#fff}@page{margin:14mm}}

  /* ---- Mon dossier (informations) ---- */
  .ds-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 16px}
  .ds-champ label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;color:var(--gris);margin:10px 0 4px}
  .ds-champ input,.ds-champ select{width:100%}
  .ds-champ.ds-vide input,.ds-champ.ds-vide select{border-style:dashed}
  .ds-nombre{display:flex;align-items:center;gap:6px}.ds-nombre span{color:var(--gris)}
  .ds-src{font-size:11px;font-weight:700;color:var(--bleu);background:var(--bleu-c);border-radius:10px;padding:1px 8px;white-space:nowrap}
  .ds-src:empty{display:none}
  .ds-src[data-src=kyc]{background:var(--vert-c);color:var(--vert)}
  .ds-pied{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--ligne);padding:12px 16px;margin:0 -16px -16px;border-radius:0 0 var(--rayon) var(--rayon);display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:5}
  @media (max-width:899px){body.connecte .ds-pied{bottom:calc(58px + env(safe-area-inset-bottom))}}

  /* ---- Messages (fil de discussion) ---- */
  .chat{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
  .chat-fils{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:8px;display:flex;flex-direction:column;gap:4px}
  .chat-fils .fil{display:block;padding:10px 12px;border-radius:var(--rayon-s);text-decoration:none;color:var(--encre);border:1px solid transparent;min-height:44px}
  .chat-fils .fil:hover{background:var(--fond)}
  .chat-fils .fil.on{background:var(--bleu-c);border-color:#d3dfeb}
  .chat-fils .fil b{display:inline-block;font-size:14.5px}
  .chat-fils .fil .d{display:block;font-size:12.5px;color:var(--gris);margin-top:2px}
  .chat-conv{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 20px;min-width:0}
  .chat-retour{display:none}
  .bulles{display:flex;flex-direction:column;gap:10px;padding:4px 2px;margin-bottom:12px}
  .bulle{max-width:85%;border-radius:14px;padding:10px 14px;font-size:14.5px}
  .bulle.moi{align-self:flex-end;background:var(--bleu);color:#fff;border-bottom-right-radius:4px}
  .bulle.conseiller{align-self:flex-start;background:var(--fond);border:1px solid var(--ligne);border-bottom-left-radius:4px}
  .bulle .qui{font-size:11.5px;opacity:.8;margin-bottom:4px}
  .bulle .txt{white-space:pre-line;line-height:1.45;overflow-wrap:anywhere}
  .bulle .pj{margin-top:6px;font-size:12.5px}
  .bulle .pj a{display:inline-flex;align-items:center;gap:4px;margin-right:8px}
  .bulle.moi .pj a,.bulle.moi a{color:#fff}
  .chat-form label{margin-top:4px}
  @media (max-width:899px){
    .chat{grid-template-columns:1fr}
    .chat.fil-ouvert .chat-fils{display:none}
    .chat:not(.fil-ouvert) .chat-conv{display:none}
    .chat-retour{display:inline-flex;margin-bottom:8px}
    .bulle{max-width:92%}
    .chat-conv{padding:14px}
  }

  /* ---- Compte, connexion, contact ---- */
  .compte-menu{font-size:13px}
  .cadre-partenaire{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;height:2200px}
  @media (max-width:899px){.cadre-partenaire{height:calc(100vh - 140px);min-height:560px}}
  .cadre-partenaire iframe{width:100%;height:100%;border:0;display:block}

  /* ---- Mes informations : jauge, compteurs des volets, barre d'enregistrement ---- */
  .ds-avancement{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
  .ds-avancement b{font-size:16px}
  .ds-avancement span{font-size:14px;color:var(--gris)}
  .ds-avancement .jauge{margin-top:6px}
  .ds-avancement .jauge i{width:0;transition:width .4s}
  body.page-dossier details.volet>summary .sous{display:inline;font-variant-numeric:tabular-nums}
  .ds-note{margin:0 0 12px}
  form[data-modifie] .ds-pied{display:none}
  form[data-modifie].modifie .ds-pied,form[data-modifie].enregistre .ds-pied{display:flex}
  #dsForm .ds-pied{margin:0 0 14px;border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre-f)}
  #dsForm .ds-pied .msg{margin:0;flex:1 1 220px}
  @media (max-width:640px){#avancement .actions{flex-direction:column;align-items:stretch}#avancement .actions .btn{justify-content:flex-start;text-align:left}}

  /* ---- Mon compte : raccourcis (la ligne entière est cliquable ; la ligne « langue » porte deux boutons) ---- */
  .raccourcis>li.doc{position:relative}
  .raccourcis .doc-txt a,.raccourcis .doc-txt .lien{color:var(--encre);text-decoration:none;font-weight:600;font-size:15px}
  .raccourcis .doc-txt a::after,.raccourcis .doc-txt .lien::after{content:"";position:absolute;inset:0}
  .raccourcis>li.doc:hover .doc-txt a,.raccourcis>li.doc:hover .doc-txt .lien{color:var(--bleu)}
  .raccourcis .doc-txt a:focus-visible,.raccourcis .doc-txt .lien:focus-visible{outline-offset:4px}
  .raccourcis .chevron{color:var(--gris-c)}
  .raccourcis .doc-actions{position:relative;z-index:1}
  @media (max-width:640px){.raccourcis>li.doc:not(.doc-langue){grid-template-columns:auto 1fr auto}.raccourcis>li.doc:not(.doc-langue) .doc-actions{grid-column:auto}}
  body.page-compte form .actions{margin-top:14px}
  body.page-compte .volet-corps h3{margin-top:20px}

  /* ---- Messages : en-tête de conversation, formulaire ---- */
  .chat-tete{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:10px}
  .chat-tete h2,.chat-tete .aide{margin:0}
  .chat-fils .fil .etat{margin-left:6px}
  .chat-form .actions{margin-top:10px}
  .chat-form .actions input[type=file]{flex:1 1 200px;width:auto}
  .chat-conv .vide{padding:40px 12px}

  /* ---- Gestion ---- */
  .gestion-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
  .gestion-filtres input[type=search]{max-width:280px;min-height:40px}
  .puce{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:18px;border:1px solid var(--ligne);background:var(--surface);color:var(--gris);font-weight:600;font-size:13.5px;cursor:pointer}
  .puce.on{border-color:var(--bleu);background:var(--bleu-c);color:var(--bleu)}
  .pastilles-dossier{display:flex;gap:6px;flex-wrap:wrap}
  .pastilles-dossier .etat{font-size:12px}
  @media (max-width:899px){table.tab.comptes th:nth-child(n+5),table.tab.comptes td:nth-child(n+5){display:none}}
  .gestion-tuiles{margin-bottom:16px}
  .recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px}
  .recap .item{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:10px 12px;text-decoration:none;color:var(--encre);min-height:56px;transition:border-color .15s}
  .recap .item:hover{border-color:var(--bleu)}
  .recap .item .ic{color:var(--bleu);flex:none}
  .recap .item b{display:block;font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
  .recap .item span{font-size:12.5px;color:var(--gris)}
  @media (max-width:640px){.recap{grid-template-columns:1fr 1fr;gap:6px}.recap .item{padding:8px 10px;min-height:52px}}
  .fil-ariane{margin:0 0 10px;font-size:14px}
  .fil-ariane a{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:600;min-height:40px}
  .btn.discret.rouge,.lien.rouge{color:var(--rouge)}
  .btn.discret.rouge:hover{background:var(--rouge-c);color:var(--rouge)}
  .carte-int{background:var(--fond);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:14px 16px;margin-bottom:12px}
  .carte-int .carte-tete{margin-bottom:6px}
  .carte-int h3{margin:0;font-size:16px}
  .carte-int .faits li{border-top:0;padding-top:2px}
  .fil-gestion{border-top:1px solid var(--ligne);padding-top:14px;margin-top:14px}
  .fil-gestion h3{margin:0}
  .faits .btn{margin-left:auto;flex:none}
  .etat.neutre{background:var(--fond);color:var(--gris)}
  #tableau td .pastilles-dossier{gap:4px}

  /* ---- Pages de présentation (services, produits) ---- */
  .presentation{background:var(--bleu);color:#fff;border-radius:var(--rayon);padding:22px 24px;margin-bottom:18px}
  .presentation h2{color:#fff;font-size:24px;margin:0 0 8px}
  .presentation p{font-size:15.5px;margin:0 0 8px;max-width:760px}
  .presentation .btn{background:var(--or);color:#2b2b2b;margin-top:8px}
  .piliers-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:18px}
  .pcarte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 20px;border-top:4px solid var(--bleu);display:flex;flex-direction:column;gap:8px}
  .pcarte.or{border-top-color:var(--or)}
  .pcarte .ic{font-size:28px;line-height:1}
  .pcarte h3{margin:0;font-size:18px}
  .pcarte .besoins{font-size:14px;color:var(--gris);margin:0}
  .pcarte .produits{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .pcarte .produits span{font-size:12.5px;padding:4px 10px;border-radius:12px;background:var(--fond);color:var(--bleu);font-weight:600}
  .pcarte .liens{font-size:13.5px;margin-top:6px}
  .pcarte .liens a{margin-right:10px}
  .sommaire{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  @media (max-width:640px){.sommaire{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -16px 14px;padding-left:16px;padding-right:16px}.sommaire a{flex:none}}
  .sommaire a{font-size:13px;padding:8px 12px;min-height:36px;display:inline-flex;align-items:center;border-radius:18px;background:var(--surface);color:var(--bleu);font-weight:600;text-decoration:none;border:1px solid var(--ligne)}
  .sommaire a:hover{border-color:var(--bleu)}
  .fiche h2{display:flex;align-items:center;gap:10px;scroll-margin-top:80px}
  .fiche h2 .ic{font-size:26px;line-height:1}
  .fiche .phrase{font-size:16px;margin:4px 0 12px}
  .trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
  .trois>div{background:var(--fond);border-radius:var(--rayon-s);padding:10px 12px;font-size:14px;line-height:1.5}
  .trois>div>b{color:var(--bleu);display:block;margin-bottom:4px}
  .trois ul{margin:0;padding-left:18px}
  .trois li{margin:3px 0}
  .fiche .liens{font-size:13.5px;margin:12px 0 0}
  .fiche .liens a{margin-right:12px;white-space:nowrap}
  .docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
  .docs li{background:var(--surface);border-radius:var(--rayon-s);padding:12px 14px;border:1px solid var(--ligne);display:flex;gap:10px;align-items:flex-start}
  .docs li .ic{font-size:20px;line-height:1.2}
  .docs li b{display:block;font-size:14.5px}
  .docs li span{font-size:13px;color:var(--gris)}
  .docs li a{font-size:13px;white-space:nowrap;margin-left:auto}
  .choix{display:flex;flex-direction:column;gap:8px;margin:8px 0}
  .choix-btn{text-align:left;background:var(--surface);border:2px solid var(--ligne);border-radius:var(--rayon);padding:12px 14px;font:inherit;font-size:15px;cursor:pointer;min-height:44px;color:var(--encre)}
  .choix-btn:hover{border-color:var(--bleu)}
  .choix-btn.on{border-color:var(--bleu);background:var(--bleu-c);font-weight:600}
  .choix-btn.multi{position:relative;padding-left:44px}
  .choix-btn .rang{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--bleu);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
}

/* ===================================================== JEUX ===================================================== */
/* Page Jeu & Éducation : conservée telle quelle (les émojis y sont le jeu). */
@layer jeux{
/* ---- Page Jeu & Éducation (jeux.php) ---- */
/* Vitrine des jeux : un bloc par jeu, bien distinct, cliquable */
.jeux-vitrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:4px 0 18px}
.jeu-carte{display:flex;flex-direction:column;gap:4px;background:#fff;border:2px solid var(--ligne);border-radius:16px;padding:14px 14px 12px;text-decoration:none;color:var(--texte);box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .12s,border-color .12s;position:relative;min-height:126px}
.jeu-carte:hover{transform:translateY(-2px);border-color:var(--bleu)}
.jeu-carte.on{border-color:var(--or);background:linear-gradient(135deg,#fff8e6,#fff);box-shadow:0 4px 16px rgba(224,168,46,.18)}
.jeu-carte.on::after{content:"▶ en cours";position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;color:#7a5a00;background:#fff3d6;border-radius:10px;padding:2px 8px}
.jeu-carte .ic{font-size:30px;line-height:1}
.jeu-carte b{font-size:16px;color:var(--bleu);font-family:Georgia,serif;line-height:1.2}
.jeu-carte .court{font-size:13px;color:var(--gris);line-height:1.35;flex:1}
.jeu-carte .jeu-record,.jeu-carte .badge{align-self:flex-start;margin-top:4px}
@media (max-width:560px){.jeux-vitrine{grid-template-columns:1fr 1fr;gap:8px}.jeu-carte{padding:11px 11px 10px;min-height:0;border-radius:13px}.jeu-carte .ic{font-size:24px}.jeu-carte b{font-size:14px}.jeu-carte .court{font-size:12px}.jeu-carte.on::after{top:7px;right:8px;font-size:10px}}
section.jeu{border-top-color:var(--bleu)}
.jeu-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.jeu-tete h3{margin:0;font-size:20px}
.jeu-record:empty{display:none}
.jeu-record{font-size:13px;font-weight:700;color:var(--or);background:#fff8e6;border:1px solid #f3dea3;border-radius:12px;padding:3px 10px}
.jeu-zone{margin-top:10px;user-select:none;-webkit-user-select:none}
.jeu-depart{background:var(--beige-c);border:1px dashed var(--beige);border-radius:14px;padding:22px 18px;text-align:center}
.jeu-depart p{margin:0 0 14px;font-size:15.5px}
.btn.large-jeu{font-size:18px;padding:14px 28px}
.jeu-barre{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--gris);margin-bottom:8px}
.jeu-barre b{color:var(--texte);font-size:16px}
.chrono{height:8px;background:var(--fond);border-radius:6px;overflow:hidden;margin-bottom:8px}
.chrono i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--or),var(--rouge));border-radius:6px;transition:width .05s linear}
.jeu-compteur{font-size:13px;color:var(--gris);margin:4px 0 2px}
.jeu-enonce{font-size:18px;font-weight:700;margin:4px 0 12px;line-height:1.35}
.vf-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vf-btns .btn{font-size:18px;padding:16px 10px}
.vf-btns .btn.vrai{background:var(--vert)}.vf-btns .btn.faux{background:var(--rouge)}
.vf-btns .btn:disabled{opacity:.55;cursor:default}
.jeu-score{background:var(--beige-c);border:1px solid var(--beige);border-radius:14px;padding:16px 18px;margin:8px 0}
.jeu-score b{font-size:22px;display:block}
.jeu-score p{margin:6px 0 0;font-size:15px}
.jeu-zone h4{margin:14px 0 6px;font-size:15.5px}
.recap{margin:0;padding-left:0;list-style:none;font-size:14px}
.recap li{padding:5px 0;border-bottom:1px solid var(--ligne)}
.arena{position:relative;height:min(62vh,440px);min-height:300px;background:linear-gradient(180deg,#fff8f1,#ffe9d6);border:2px solid var(--beige);border-radius:14px;overflow:hidden;touch-action:none}
.arena .bulle{position:absolute;border:0;border-radius:24px;padding:10px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.12);max-width:170px;text-align:left;line-height:1.25;transition:transform .12s}
.arena .bulle.b-arnaque{background:#fff;color:var(--texte);border:2px solid #f0c9c9}
.arena .bulle.b-ok{background:#fff;color:var(--texte);border:2px solid #cfe6d9}
.arena .bulle:active{transform:scale(.94)}
.arena .bulle.pop{animation:pop .35s forwards;background:#eaf5ef;border-color:var(--vert)}
.arena .bulle.boum{animation:boum .35s forwards;background:#fbecea;border-color:var(--rouge)}
@keyframes pop{to{transform:scale(1.5);opacity:0}}
@keyframes boum{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}100%{transform:translateX(0);opacity:0}}
.piste{display:block;width:100%;height:260px;border:2px solid var(--beige);border-radius:14px;touch-action:none;cursor:pointer}
.curseur{background:var(--fond);border-radius:14px;padding:16px 18px;margin:8px 0 12px}
.curseur output{display:block;text-align:center;font-size:26px;font-weight:700;color:var(--bleu);margin-bottom:8px}
.curseur input[type=range]{width:100%;accent-color:var(--or);height:36px}
.curseur-ligne{display:flex;align-items:center;gap:10px}
.curseur-ligne input[type=range]{flex:1;min-width:0}
.curseur-ligne .pas{width:44px;height:44px;padding:0;font-size:22px;line-height:1;flex:none;border-radius:50%}
.curseur .bornes{display:flex;justify-content:space-between;font-size:12.5px;color:var(--gris)}
@media (max-width:480px){.jeu-enonce{font-size:16.5px}}
/* ---- Jeux : consignes, vie, récit ---- */
.jeu-recommencer{display:block;margin:10px auto 0;font-size:13px;color:var(--gris)}
.legende{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;text-align:left;margin:12px 0}
.legende h4{margin:0 0 6px;font-size:14px}
.legende ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.legende li{display:flex;gap:8px;align-items:center;padding:2px 0}
.legende li span{font-size:20px;width:26px;text-align:center}
@media (max-width:420px){.legende{grid-template-columns:1fr}}
.vie-statut{font-size:13.5px;color:var(--gris);margin:0 0 6px}
.vie-statut b{color:var(--texte)}
.vie-statut .mult{font-weight:700;color:var(--vert)}
.jauges-vie{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.jauge-vie{display:flex;align-items:center;gap:8px;font-size:14px}
.jauge-vie .jauge{flex:1}
.jauge-vie i.b{background:linear-gradient(90deg,#f6c453,#e0a82e)}.jauge-vie i.a{background:linear-gradient(90deg,#7fb3a0,#2f7a55)}.jauge-vie i.c{background:linear-gradient(90deg,#8fa9c4,#496580)}
.jauge-vie b{width:28px;text-align:right;font-size:13px}
.recap.bilans li{border:0;padding:6px 0 6px 26px;position:relative;font-size:14.5px;line-height:1.45}
.recap.bilans li::before{content:"💬";position:absolute;left:0;top:6px}
.seo-texte{font-size:15px;line-height:1.6;margin:0 0 10px}
.faq{margin:14px 0 0}
.faq details{border-top:1px solid var(--ligne);padding:8px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:15px}
.faq p{margin:6px 0 0;font-size:14.5px;color:var(--gris)}
.surnom{font-size:15px;margin:8px 0 4px}

/* ---- La course de ma vie : accueil, piste, cartes, records ---- */
.course-depart{text-align:left}
.course-depart .defi{background:#fff3d6;border:1px solid var(--or);border-radius:10px;padding:8px 12px;font-size:14.5px}
.depart-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 18px;margin:12px 0}
.depart-grille h4{margin:0 0 6px;font-size:14px}
.choix-ligne{display:flex;flex-wrap:wrap;gap:6px}
.pastille{font:inherit;font-size:13.5px;padding:7px 11px;border-radius:18px;border:1.5px solid var(--ligne);background:#fff;cursor:pointer;color:var(--texte)}
.pastille.on{border-color:var(--or);background:#fff3d6;font-weight:700}
.avatars .pastille{font-size:20px;padding:5px 9px}
.piste-wrap{position:relative}
.piste{height:300px}
.piste-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(37,33,33,.22);border-radius:14px;z-index:2}
.piste-overlay.haute{bottom:auto;min-height:100%;align-items:flex-start;padding:8px;background:rgba(37,33,33,.28)}
.carte-chance{background:#fff;border-radius:14px;padding:14px 16px;max-width:520px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.25);animation:cartein .25s ease-out}
.carte-chance.ok{border:3px solid var(--vert)}.carte-chance.ko{border:3px solid var(--rouge)}
.carte-chance .chrono{margin-bottom:8px}
.cc-titre{margin:0 0 6px;font-weight:700;font-size:15px}
.cc-q{margin:0 0 10px;font-size:16px;font-weight:700;line-height:1.3}
.cc-indice{font-size:13px;color:var(--gris);margin:0 0 8px}
.carte-chance .vf-btns .btn{padding:12px 8px;font-size:16px}
.coffre{background:#fff;border-radius:14px;padding:12px 14px;max-width:560px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.coffre-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.carte3{font:inherit;background:linear-gradient(160deg,#fff8e6,#fff);border:2px solid var(--or);border-radius:12px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;animation:flip .5s ease-out both;transform-origin:center}
.carte3 .ic{font-size:28px}.carte3 b{font-size:13.5px;line-height:1.2}.carte3 span:last-child{font-size:11.5px;color:var(--gris);line-height:1.25}
.carte3:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(224,168,46,.35)}
@keyframes flip{from{transform:rotateY(90deg);opacity:0}to{transform:rotateY(0);opacity:1}}
@keyframes cartein{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.piste-ctrl{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.piste-ctrl .btn{padding:10px 14px;font-size:14px;flex:1;min-width:0}
.piste-ctrl #coSon{flex:0 0 auto}
.course-info{min-height:22px;margin-top:6px}
.vie-statut .skills{font-size:15px}
.objectif{font-size:14.5px;background:var(--fond);border-radius:10px;padding:8px 12px;margin:8px 0}
.objectif.ok{background:#eaf5ef;color:#1f5a41}.objectif.ko{background:#fbecea;color:#7a3423}
.recap.lecons li{border:0;padding:6px 0 6px 26px;position:relative;font-size:14.5px}
.recap.lecons li::before{content:"🎓";position:absolute;left:0;top:6px}
.records{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 10px}
.records th,.records td{padding:7px 8px;border-bottom:1px solid var(--ligne);text-align:left;white-space:nowrap}
.records th{font-size:12.5px;color:var(--gris)}
.records tr.moi td{background:#fff3d6;font-weight:700}
.records-onglets{margin:10px 0 8px}
.badges-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.badge-carte{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.badge-carte.pris{border-color:var(--or);background:linear-gradient(160deg,#fff8e6,#fff)}
.badge-carte .ic{font-size:24px}.badge-carte b{font-size:13px}.badge-carte .d{color:var(--gris)}.badge-carte .qui{margin-top:4px;font-weight:700;color:#7a5a00}.badge-carte .qui.libre{color:var(--gris);font-weight:400}
.records-form{background:linear-gradient(160deg,#fff8e6,#fff);border:2px solid var(--or);border-radius:14px;padding:12px 14px;margin:6px 0 14px}
.records-form h4{margin:0 0 8px}
.records-form .ligne{display:flex;gap:8px;flex-wrap:wrap}
.records-form input[type=text]{flex:1;min-width:160px;font:inherit;padding:10px;border:1px solid var(--ligne);border-radius:9px}
.records-form .case{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--gris);margin-top:8px}
@media (max-width:480px){.piste{height:260px}.coffre-cartes{gap:5px}.carte3 .ic{font-size:22px}.carte3 b{font-size:12px}.records th:nth-child(5),.records td:nth-child(5){display:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,168,46,.5)}50%{box-shadow:0 0 0 8px rgba(224,168,46,0)}}
/* La course de ma vie : barre de vie, chances, jauges de vie, question dans la fenêtre du jeu, prix des choix */
.vie-barre{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap}
.vie-jauge{display:inline-block;width:92px;height:12px;background:#e6e2da;border-radius:7px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.vie-jauge i{display:block;height:100%;background:linear-gradient(90deg,#7fb3a0,#2f7a55);border-radius:7px;transition:width .3s}
.vie-jauge i.moyen{background:linear-gradient(90deg,#f6c453,#e0a82e)}.vie-jauge i.bas{background:linear-gradient(90deg,#e08a72,#8a3a26)}
.jauges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.jauges span{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.jauges b{display:inline-block;width:52px;height:7px;background:#e6e2da;border-radius:5px;overflow:hidden}
.jauges u{display:block;height:100%;background:linear-gradient(90deg,#8fa9c4,#496580);border-radius:5px;transition:width .4s}
.vie-question{background:#fff;border:3px solid var(--or);border-radius:14px;padding:10px 12px;max-width:560px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.25);animation:cartein .25s ease-out}
.vie-question.crise{border-color:var(--rouge)}
.vie-question .cc-titre{font-size:15px;line-height:1.3;margin-bottom:6px}
.vie-question .cc-q{font-size:13.5px;font-weight:400;color:var(--gris);margin-bottom:8px}
.vie-question .choix{gap:6px;margin:4px 0 0}
.vie-question .choix-btn{padding:8px 10px;font-size:14px;line-height:1.3}
.choix-btn .prix{display:block;font-size:12px;font-weight:700;color:var(--rouge);margin-top:2px}
.jauges-fin{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.jauges-fin li{display:grid;grid-template-columns:110px 1fr 32px;gap:6px 10px;align-items:center;font-size:14px}
.jauges-fin .barre{height:10px;background:#e6e2da;border-radius:6px;overflow:hidden}
.jauges-fin .barre i{display:block;height:100%;background:linear-gradient(90deg,#8fa9c4,#496580);border-radius:6px}
.jauges-fin .barre i.haut{background:linear-gradient(90deg,#7fb3a0,#2f7a55)}.jauges-fin .barre i.bas{background:linear-gradient(90deg,#e08a72,#8a3a26)}
.jauges-fin .val{text-align:right;font-weight:700;font-size:13px}
.jauges-fin .com{grid-column:1/-1;font-size:13px;color:var(--gris);margin-top:-2px}
@media (max-width:480px){.vie-jauge{width:64px}.jauges{gap:7px}.jauges b{width:38px}.jauges span{font-size:12px}.vie-question .choix-btn{font-size:13px;padding:7px 9px}.jauges-fin li{grid-template-columns:96px 1fr 28px;font-size:13px}}
/* La course de ma vie : profil de fin, graphique, bestiaire, badges à prendre, coups de théâtre */
.profil-fin{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:10px 0 12px}
.profil-fin canvas{width:220px;height:220px;flex:none}
.profil-fin>div{flex:1;min-width:240px}
.profil-titre{margin:0 0 4px;font-size:16px}
.score-edu{margin:6px 0;font-size:15px}
.courbe{width:100%;height:200px;display:block;border:1px solid var(--ligne);border-radius:12px;margin:6px 0 14px;background:#fff}
.bestiaire{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 12px}
.bestiaire li{display:grid;grid-template-columns:30px 1fr;gap:0 8px;align-items:center;font-size:13.5px;padding:6px 8px;background:var(--beige-c);border-radius:10px}
.bestiaire .ic{font-size:22px;grid-row:1/3}
.bestiaire .cpt{font-size:12px;color:var(--gris);margin-left:4px}
.bestiaire .d{grid-column:2;font-size:12.5px;color:var(--gris);line-height:1.3}
.badges-gagnes{background:#fff3d6;border:3px solid var(--or);border-radius:14px;padding:12px 16px;margin:0 0 12px;animation:pulse 1.4s ease-in-out 3}
.badges-gagnes.ok{background:#e8f5ee;border-color:var(--vert);animation:none}
.badges-gagnes .bg-titre{margin:0 0 6px;font-size:17px;font-weight:700}
.badges-gagnes ul{list-style:none;padding:0;margin:0 0 8px}
.badges-gagnes li{padding:3px 0;font-size:14.5px}.badges-gagnes .ic{font-size:20px;margin-right:6px}
.badges-gagnes p{margin:0;font-size:14px}
.vie-question.coup{border-color:#7a2a8a}.vie-question.krach{border-color:var(--rouge);background:#fff4f1}
@media (max-width:480px){.profil-fin canvas{width:200px;height:200px;margin:0 auto}.bestiaire{grid-template-columns:1fr}}
/* La course de ma vie : reprise, série de jours, joker du cabinet, « et si ? », impression du bilan */
.reprise{margin:0 0 10px}.reprise .large-jeu{background:var(--vert)}
.serie-jours{margin:8px 0 0;font-weight:700;color:#8a3a26;font-size:14px}
.choix-btn .effet{display:block;font-size:12px;font-weight:700;color:var(--bleu);margin-top:3px}
.joker{margin:8px 0 0;font-size:13px}.joker .lien{font-weight:700;color:var(--bleu)}
.joker-rep{display:block;font-size:12.5px;color:var(--gris);font-style:italic;line-height:1.3}
.etsi li b.plus{color:var(--vert)}.etsi li b.moins{color:var(--rouge)}
@media print{
  body.impression .entete,body.impression .pied,body.impression .jeux-vitrine,body.impression .section,body.impression .analyse,body.impression .carte:not(#course),body.impression .faq,body.impression .seo-texte,body.impression .actions,body.impression .records,body.impression .records-onglets,body.impression form,body.impression #coRecords,body.impression .bestiaire,body.impression .btn{display:none!important}
  body.impression{background:#fff}body.impression .carte{box-shadow:none;border:0;padding:0}
  body.impression .courbe{height:160px}
  @page{margin:14mm}
}
/* La carte du destin : trois cartes face cachée */
.coffre.destin{background:linear-gradient(160deg,#2b2140,#4a2d6b);color:#fff}
.coffre.destin .cc-titre{color:#fff}.coffre.destin .cc-titre .ok{color:#b9f0cf}.coffre.destin .cc-titre .ko{color:#ffb4a2}
.carte3.dos{background:linear-gradient(160deg,#5a3b8a,#2b2140);border-color:#e0a82e;color:#fff}.carte3.dos b{font-size:26px}.carte3.dos span:last-child{color:#e9dcff}
.destin .carte3.choisie{outline:3px solid var(--or);transform:scale(1.04)}.destin .carte3.bonne{border-color:var(--vert)}.destin .carte3:not(.bonne):not(.dos){border-color:var(--rouge)}
/* Quel investisseur êtes-vous ? et Vrai ou Faux chrono */
.profil-choix .likert{padding:9px 12px 9px 44px;font-size:14px}
.actions-profil li{margin:4px 0}.sources li{font-size:13px;color:var(--gris)}
.jeu-compteur .theme{text-transform:capitalize;color:var(--bleu);font-weight:700}
/* Chasse aux arnaques : loupe ORIAS et révélation ; Devine le chiffre : barre d'écart */
.arena .bulle.b-loupe{background:#e8f0fb;border:2px solid var(--bleu);color:var(--bleu)}
.arena .bulle.revele-ko{border-color:var(--rouge);background:#fbecea}.arena .bulle.revele-ok{border-color:var(--vert);background:#eaf5ef}
.ecart-barre{position:relative;height:16px;background:var(--fond);border-radius:8px;margin:10px 0 4px}
.ecart-barre .zone10{position:absolute;top:0;bottom:0;background:rgba(47,122,85,.22);border-radius:8px}
.ecart-barre i{position:absolute;top:-4px;width:4px;height:24px;border-radius:2px;margin-left:-2px}
.ecart-barre i.vrai{background:var(--vert)}.ecart-barre i.vous{background:var(--or)}
.ecart-legende{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;margin:0 0 8px;color:var(--gris)}
.ecart-legende .vrai{color:var(--vert);font-weight:700}.ecart-legende .vous{color:#a87512;font-weight:700}
.vf-themes .pastille{text-transform:capitalize}.vf-themes .pastille .aide{font-size:11.5px;margin-left:3px}
/* Jeux : signature du cabinet et titre de FAQ */
.verifie{font-size:13px;color:var(--gris);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--ligne)}
.faq-titre{font-size:16px;margin:18px 0 6px}
/* Pour aller plus loin : guides et simulateurs du site */
.aller-plus-loin{background:#f3f7fb;border:1px solid var(--ligne);border-radius:12px;padding:10px 14px;margin:12px 0}
.aller-plus-loin h4{margin:0 0 6px;font-size:15px}.aller-plus-loin ul{margin:0;padding-left:18px}.aller-plus-loin li{margin:3px 0}
/* Vitrine : la section du jeu choisi s'affiche sous la barre, et sur téléphone la vitrine devient une bande compacte */
section.jeu{scroll-margin-top:10px}
@media (max-width:640px){
  .jeux-vitrine.compacte{display:flex;overflow-x:auto;gap:8px;padding:2px 2px 8px;margin:0 -4px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .jeux-vitrine.compacte .jeu-carte{flex:0 0 auto;width:132px;padding:9px 10px;scroll-snap-align:start;gap:2px}
  .jeux-vitrine.compacte .jeu-carte .court,.jeux-vitrine.compacte .jeu-carte .jeu-record,.jeux-vitrine.compacte .jeu-carte .badge{display:none}
  .jeux-vitrine.compacte .jeu-carte .ic{font-size:20px}.jeux-vitrine.compacte .jeu-carte b{font-size:13px}
  .jeux-vitrine.compacte .jeu-carte.on::after{content:"▶";top:6px;right:8px;padding:1px 6px}
}
/* La course sur téléphone : plein écran paysage, piste zoomée (jamais étirée), commandes compactes */
.tourner{display:none}
body.course-immersif{overflow:hidden}
body.course-immersif #coZone{position:fixed;inset:0;z-index:1000;background:var(--fond);margin:0;padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:3px;overflow:hidden;height:100vh;height:100dvh}
body.course-immersif #coZone .jeu-barre{margin:0;font-size:12.5px;gap:8px}
body.course-immersif #coZone .jeu-barre b{font-size:14px}
body.course-immersif #coZone .vie-statut{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.course-immersif #coZone .jauges{margin:0;gap:8px;flex-wrap:nowrap}
body.course-immersif #coZone .jauges span{font-size:11px}body.course-immersif #coZone .jauges b{width:34px;height:6px}
body.course-immersif #coZone .piste-wrap{flex:1;min-height:0}
body.course-immersif #coZone .piste{height:100%;border-radius:10px}
body.course-immersif #coZone .piste-overlay{overflow:auto;border-radius:10px}
body.course-immersif #coZone .piste-overlay.haute{bottom:0;min-height:0}
body.course-immersif #coZone .piste-ctrl{margin:0;gap:6px;flex-wrap:nowrap}
body.course-immersif #coZone .piste-ctrl .btn{padding:6px 8px;font-size:12.5px}
body.course-immersif #coZone .course-info,body.course-immersif #coZone .jeu-recommencer{display:none}
body.course-immersif #coZone .vie-question{max-width:640px}
body.course-immersif #coZone .vie-question .choix-btn{padding:6px 9px;font-size:13px}
@media (orientation:portrait){
  body.course-immersif #coZone .tourner{display:flex;position:absolute;inset:0;z-index:5;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:linear-gradient(160deg,#fff8e6,#e4f0fb)}
  body.course-immersif #coZone .tourner .ic{font-size:64px;animation:tourner 1.6s ease-in-out infinite}
  body.course-immersif #coZone .tourner b{font-size:22px;color:var(--bleu-f)}
  body.course-immersif #coZone .tourner span{max-width:300px;color:var(--gris)}
}
@keyframes tourner{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){body.course-immersif #coZone .tourner .ic{animation:none}}
}