/**
 * public/bienvenue/weetuc.css — base visuelle COMMUNE des pages publiques WeeTUC :
 * /bienvenue/ (guide, langues) et /moi/ (téléphone du bénéficiaire).
 *
 * Extrait tel quel du <style> de bienvenue/index.html le 08/09/2026 (décision
 * Maxime : « une base commune »). Tout ce qui fait l'identité est ici : jetons
 * de couleur (clair/sombre), police d'affichage Bricolage Grotesque (.disp),
 * barre du haut (logo W, pastille de langue), écrans animés, tuiles de langue,
 * cartes à icône colorée, boutons-questions, feuilles qui montent du bas,
 * étapes numérotées, dépliants, contacts. Les règles propres à un écran de
 * bienvenue (#screen-lang, .hero…) voyagent avec — inoffensives ailleurs.
 *
 * Servi sous /bienvenue/ (et non /commun/) pour rester dans le périmètre du
 * service worker (public/sw.js) : la page bienvenue marche hors ligne.
 * /moi/ le charge par ../bienvenue/weetuc.css, comme fonts.css.
 */
  /* [hidden] doit gagner sur les styles d'auteur ci-dessous (.card{display:flex},
     .faq-tools{display:flex}…). En cascade CSS, une règle du navigateur
     (UA) peut perdre face à une règle d'auteur de même poids selon le
     moteur — on ne dépend donc pas du navigateur pour ça : cette règle
     rend `hidden` fiable partout, qu'elle soit ou non redondante. */
  [hidden]{display:none !important}

  /* ------------------------------------------------------------------
     Direction visuelle v3 « hybride » (28/08/2026) — challengée par Codex :
     ergonomie calme type Apple + identité WeeTUC (palette bleu/indigo,
     dégradé réservé à la marque et au bouton principal). Corrections
     accessibilité Codex : gris secondaire plus foncé, bordures visibles
     (indispensables en dark mode), vert contact assombri, AUCUN
     letter-spacing négatif ni MAJUSCULES sur les textes traduits
     (illisible/absurde en arabe, amharique…), questions sur une colonne
     (les traductions longues respirent). Police système + Noto secours.
     ------------------------------------------------------------------ */
  :root{
    --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
    --text:#0f172a; --text-2:#475569; --line:#e2e8f0;
    --brand:#2563eb; --brand-deep:#1d4ed8; --brand-soft:#dbeafe; --on-brand:#ffffff;
    --indigo:#4f46e5; --green:#15803d;
    --grad:linear-gradient(135deg,#2563eb,#4f46e5);
    --ok:#15803d; --ok-soft:#dcfce7; --warn:#92600a; --warn-soft:#fdf3d8;
    --bad:#b91c1c; --bad-soft:#fdecec;
    --shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
    --shadow-1:0 1px 2px rgba(15,23,42,.06);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f172a; --surface:#111827; --surface-2:#1f2937;
      --text:#f8fafc; --text-2:#cbd5e1; --line:#334155;
      --brand:#3b82f6; --brand-deep:#93c5fd; --brand-soft:#172554; --on-brand:#ffffff;
      --indigo:#6366f1; --green:#16a34a;
      --ok:#4ade80; --ok-soft:#132e1c; --warn:#fbbf24; --warn-soft:#2e2710;
      --bad:#f87171; --bad-soft:#3a1515;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
      --shadow-1:0 1px 2px rgba(0,0,0,.4);
    }
  }
  *{box-sizing:border-box; margin:0}
  html{scroll-behavior:smooth}
  html,body{height:100%}
  body{
    background:var(--bg);
    background:linear-gradient(180deg,var(--bg) 0%,var(--brand-soft) 140%);
    background-attachment:fixed;
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,system-ui,"Noto Sans","Noto Sans Arabic","Noto Sans Ethiopic","Noto Sans Bengali","Noto Sans SC","Noto Sans Georgian","Noto Sans Armenian",sans-serif;
    font-size:17px; line-height:1.47; -webkit-font-smoothing:antialiased;
  }
  /* Police d'affichage des grands titres : Bricolage Grotesque, embarquée
     depuis le 28/08/2026 (fonts.css) mais jamais appliquée jusqu'ici. Elle ne
     couvre que le latin (unicode-range) : les autres alphabets retombent sur
     la pile Noto du body. Poids 800 → les Noto s'arrêtent à 700, le
     navigateur prend le plus proche. Pas de letter-spacing (règle Codex :
     jamais sur des textes traduits). */
  .disp{font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,system-ui,"Noto Sans","Noto Sans Arabic","Noto Sans Ethiopic","Noto Sans Bengali","Noto Sans SC","Noto Sans Georgian","Noto Sans Armenian",sans-serif;
    font-weight:800}
  button{font:inherit; color:inherit}
  a{color:var(--brand-deep)}
  :focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:8px}

  .app{max-width:520px; margin:0 auto; min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom))}
  @media (min-width:768px){ .app{max-width:600px} }

  /* ------------------------------ top bar ------------------------------ */
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 2px 14px}
  /* La marque est un <button> (retour au choix de langue) : on neutralise
     l'habillage bouton du navigateur pour garder l'apparence du logo. */
  .brand{display:flex; align-items:center; gap:10px; min-width:0;
    background:none; border:0; padding:0; cursor:pointer; text-align:start}
  .brand:active{transform:scale(.97)}
  .brand-mark{flex:0 0 34px; width:34px; height:34px; border-radius:9px; background:var(--grad); color:var(--on-brand);
    display:grid; place-items:center; font-weight:700; font-size:15px}
  .brand-txt{min-width:0}
  .brand-name{display:block; font-weight:700; font-size:17px; line-height:1.15}
  .brand-name span{color:var(--brand)}
  .brand-service{display:block; font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .lang-pill{display:none; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:9px 15px; font-size:14.5px; font-weight:600; cursor:pointer; white-space:nowrap;
    box-shadow:var(--shadow-1)}
  .lang-pill .caret{opacity:.45; font-size:11px}
  .icon-btn{display:none; place-items:center; width:40px; height:40px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); cursor:pointer}
  .icon-btn:active{transform:scale(.92)}

  /* ------------------------- screens & transition ---------------------- */
  .screen{animation:screenIn .4s cubic-bezier(.2,.7,.3,1) both}
  @keyframes screenIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .screen{animation:none} }

  /* ------------------------- screen 1 : language ----------------------- */
  /* Colonne flex sur toute la hauteur : la ligne confidentialité est poussée
     tout en bas (margin-top:auto) — plus de bande blanche morte sous le
     contenu, quel que soit le nombre de tuiles affichées. */
  #screen-lang{display:flex; flex-direction:column; flex:1}
  .hero{display:flex; flex-direction:column; justify-content:center;
    text-align:center; padding:22px 0 8px}
  .hero-word{font-size:clamp(30px,8.5vw,42px); font-weight:700; text-wrap:balance}
  .hero-sub{color:var(--text-2); margin-top:8px; font-size:15px}

  .detect{display:none; margin:16px 0 4px; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow)}
  .detect p{font-size:15px; margin-bottom:12px; font-weight:600}
  .btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--grad); color:var(--on-brand); border:none; border-radius:14px;
    padding:13px 26px; font-size:16.5px; font-weight:600; cursor:pointer}
  .btn-primary:active{transform:scale(.97)}

  .grid-title{margin:20px 4px 10px; font-size:14px; font-weight:600; color:var(--text-2)}
  .lang-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
  @media (min-width:390px){ .lang-grid{grid-template-columns:repeat(3,1fr)} }
  /* Grille « toutes les langues » (30 tuiles) : 4 colonnes compactes pour
     tenir dans l'écran sans (ou presque sans) faire défiler. La vue courte
     (6 langues), elle, garde ses tuiles confortables. */
  @media (min-width:390px){ .lang-grid.tout{grid-template-columns:repeat(4,1fr)} }
  .lang-grid.tout{gap:8px}
  .lang-grid.tout .tile{padding:9px 3px 8px; gap:4px}
  .lang-grid.tout .flag{font-size:22px}
  .lang-grid.tout .name{font-size:11px}
  .tile{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface);
    border:1px solid var(--line); border-radius:14px; padding:14px 6px 12px; cursor:pointer; box-shadow:var(--shadow-1)}
  .tile:active{transform:scale(.96)}
  .tile .flag{font-size:26px; line-height:1}
  .tile .flag.txt{font-weight:700; font-size:23px; color:var(--brand)}
  .tile .name{font-size:12.5px; font-weight:600; text-align:center; line-height:1.25; overflow-wrap:anywhere}
  .privacy-line{text-align:center; color:var(--text-2); font-size:14px; margin-top:auto; padding-top:20px}

  /* --------------------------- screen 2 : menu ------------------------- */
  #screen-menu{display:none}
  .hello{padding:8px 2px 18px}
  .hello h1{font-size:clamp(28px,7.5vw,34px); font-weight:700; text-wrap:balance}
  .hello p{color:var(--text-2); margin-top:4px; font-size:16px}
  .demo-note{display:none; margin:0 0 12px; font-size:13.5px; color:var(--warn); background:var(--warn-soft);
    border-radius:12px; padding:9px 13px}

  /* Annonce pilotée depuis le cockpit admin (modèles pré-traduits 30 langues). */
  .annonce{display:none; margin:0 0 14px; background:var(--warn-soft); border:1px solid var(--warn);
    border-radius:14px; padding:13px 15px; font-size:15px; font-weight:600; line-height:1.4;
    align-items:flex-start; gap:10px; color:var(--text)}
  .annonce.on{display:flex}
  .annonce .ic{flex:0 0 20px; width:20px; height:20px; margin-top:2px; color:var(--warn)}

  /* Blocs masquables depuis le cockpit admin (classes posées sur <body>). */
  body.cfg-hide-video .card.video{display:none}
  body.cfg-hide-guide .card.guide{display:none}
  body.cfg-hide-contacts .card.contact{display:none}
  body.cfg-hide-questions .q-title, body.cfg-hide-questions .q-row{display:none}

  .cards{display:flex; flex-direction:column; gap:12px}
  /* entrée en cascade des cartes du menu */
  .cards .card{animation:cardIn .5s cubic-bezier(.2,.7,.3,1) both}
  .cards .card:nth-child(2){animation-delay:.06s}
  .cards .card:nth-child(3){animation-delay:.12s}
  .cards .card:nth-child(4){animation-delay:.18s}
  @keyframes cardIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .cards .card{animation:none} }
  .card{display:flex; align-items:center; gap:15px; width:100%; text-align:start; background:var(--surface);
    border:1px solid var(--line); border-radius:16px; padding:18px 16px; cursor:pointer; box-shadow:var(--shadow)}
  .card:active{transform:scale(.98)}
  /* Pastilles pleines : la couleur sert de repère quand on lit mal —
     bleu = vidéo, indigo = guide, vert (téléphone) = contacts.
     Jamais la couleur seule : icône + libellé toujours présents. */
  .card .ico{flex:0 0 50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff}
  .card.video .ico{background:var(--brand)}
  .card.guide .ico{background:var(--indigo)}
  .card.contact .ico{background:var(--green)}
  .card .txt{min-width:0}
  .card b{display:block; font-size:18px; font-weight:600}
  .card small{color:var(--text-2); font-size:15px}
  .card .chev{margin-inline-start:auto; color:var(--text-2); opacity:.6; font-size:19px}
  [dir="rtl"] .card .chev, [dir="rtl"] .acc summary .caret, [dir="rtl"] .chev{transform:scaleX(-1)}

  .q-title{margin:28px 4px 10px; font-size:14px; font-weight:600; color:var(--text-2)}
  /* Une colonne : les traductions longues (ourdou, bengali, amharique…)
     gardent toute la largeur — recommandation Codex. */
  .q-row, .q-row.wide{display:grid; grid-template-columns:1fr; gap:9px}
  @media (min-width:600px){ .q-row, .q-row.wide{grid-template-columns:1fr 1fr} }
  .q-btn{display:flex; align-items:center; justify-content:flex-start; gap:12px; background:var(--surface);
    border:1px solid var(--line); border-radius:14px; padding:12px 14px; min-height:48px;
    cursor:pointer; text-align:start; box-shadow:var(--shadow-1)}
  .q-btn:active{transform:scale(.97)}
  .q-ico{flex:0 0 36px; height:36px; border-radius:10px; background:var(--surface-2);
    color:var(--text); display:grid; place-items:center}
  .q-ico .ic{width:19px; height:19px}
  .q-btn .lbl{font-size:15px; font-weight:600; line-height:1.35}
  .q-btn.big{padding:14px 14px}
  .q-btn.big .q-ico{flex-basis:42px; height:42px; border-radius:11px; background:var(--brand-soft); color:var(--brand-deep)}
  .q-btn.big .q-ico .ic{width:21px; height:21px}
  .q-btn.big .lbl{font-size:15.5px}

  /* icônes vectorielles */
  .ic{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; display:block}
  .card .ico .ic{width:24px; height:24px}
  .h2-ico{flex:0 0 34px; height:34px; border-radius:10px; background:var(--surface-2);
    color:var(--text); display:grid; place-items:center}
  .h2-ico .ic{width:18px; height:18px}
  .tool-chip .ic{width:18px; height:18px}
  .icon-btn .ic{width:18px; height:18px}

  /* micro-interactions communes */
  .card,.tile,.q-btn,.btn-primary,.btn-ghost,.lang-pill{transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .15s ease}
  @media (hover:hover){
    .card:hover,.tile:hover,.q-btn:hover{border-color:var(--brand); transform:translateY(-1px)}
    .acc summary:hover{background:var(--surface-2)}
  }
  @media (prefers-reduced-motion: reduce){ .card,.tile,.q-btn,.btn-primary,.btn-ghost,.lang-pill{transition:none} }


  /* ------------------------------- sheets ------------------------------ */
  .sheet-veil{display:none; position:fixed; inset:0; background:rgba(2,6,23,.45); z-index:40}
  .sheet{display:none; position:fixed; inset-inline:0; bottom:0; z-index:50; max-width:520px; margin:0 auto;
    background:var(--surface); border-radius:22px 22px 0 0; border-top:1px solid var(--line);
    padding:16px 20px calc(26px + env(safe-area-inset-bottom));
    max-height:88vh; max-height:88dvh; overflow-y:auto; box-shadow:0 -8px 40px rgba(2,6,23,.2)}
  .sheet.open,.sheet-veil.open{display:block}
  .sheet.open{animation:sheetIn .32s cubic-bezier(.2,.7,.3,1) both}
  @keyframes sheetIn{from{transform:translateY(26px); opacity:.6} to{transform:none; opacity:1}}
  @media (prefers-reduced-motion: reduce){ .sheet.open{animation:none} }
  .sheet-grab{width:38px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 16px;
    position:relative; touch-action:none; cursor:grab}
  /* zone de prise élargie autour de la poignée (glisser pour fermer) */
  .sheet-grab::before{content:''; position:absolute; inset:-16px -80px}
  .sheet h2{font-size:21px; font-weight:700; margin-bottom:14px;
    display:flex; align-items:center; gap:10px; text-wrap:balance}
  .sheet .close-row{margin-top:20px; text-align:center}
  .btn-ghost{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 30px;
    font-size:16px; font-weight:600; cursor:pointer}

  /* barre d'outils d'une fiche question : écouter + montrer en français */
  .faq-tools{display:flex; gap:9px; margin:-4px 0 14px; flex-wrap:wrap}
  .tool-chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:999px; padding:9px 16px;
    font-size:14px; font-weight:600; cursor:pointer}
  .tool-chip:active{transform:scale(.95)}
  .tool-chip[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
  .step .fr-sub{display:block; margin-top:5px; font-size:13.5px; color:var(--text-2);
    font-style:italic; direction:ltr; text-align:left}

  .steps{display:flex; flex-direction:column; gap:10px}
  .step{display:flex; gap:13px; align-items:flex-start; background:var(--surface-2); border-radius:14px; padding:13px 14px}
  .step .n{flex:0 0 29px; height:29px; border-radius:50%; background:var(--brand); color:var(--on-brand);
    display:grid; place-items:center; font-weight:700; font-size:14.5px; font-variant-numeric:tabular-nums}
  .step p{font-size:16px; padding-top:2px}
  .step-note{margin-top:2px; font-size:14px; color:var(--brand-deep); background:var(--brand-soft);
    border-radius:12px; padding:11px 14px}

  .acc{display:flex; flex-direction:column; gap:8px}
  .acc details{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; overflow:hidden}
  .acc summary{display:flex; align-items:center; gap:11px; padding:13px 14px; cursor:pointer;
    font-size:15.5px; font-weight:600; list-style:none}
  .acc summary::-webkit-details-marker{display:none}
  .g-ico{flex:0 0 31px; height:31px; border-radius:9px; background:var(--surface);
    color:var(--brand-deep); display:grid; place-items:center}
  .g-ico .ic{width:16px; height:16px}
  .acc summary .caret{margin-inline-start:auto; color:var(--text-2); opacity:.6; transition:transform .2s}
  .acc details[open] summary .caret{transform:rotate(90deg)}
  [dir="rtl"] .acc details[open] summary .caret{transform:scaleX(-1) rotate(-90deg)}
  .acc .body{padding:2px 15px 13px; display:flex; flex-direction:column; gap:7px}
  .acc .body p{font-size:15px; line-height:1.5; padding-inline-start:14px; position:relative}
  .acc .body p::before{content:'·'; position:absolute; inset-inline-start:0; color:var(--brand); font-weight:800}
  .acc .note{font-size:13.5px; color:var(--text-2); background:var(--surface); border-radius:10px;
    padding:8px 11px; margin-top:3px}
  @media (prefers-reduced-motion: reduce){ .acc summary .caret{transition:none} }

  .topic-list{display:flex; flex-direction:column; gap:8px}
  .topic{display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:14px; padding:12px 13px}
  .topic p{font-size:15.5px; font-weight:600}
  .rule-box{margin-top:12px; border-radius:14px; padding:0; font-size:14.5px;
    display:flex; flex-direction:column; gap:6px}
  .rule-ok{background:var(--ok-soft); color:var(--ok); font-weight:600; border-radius:12px; padding:9px 12px}
  .rule-bad{background:var(--bad-soft); color:var(--bad); font-weight:600; border-radius:12px; padding:9px 12px}
  .guide-open-row{margin-top:16px; text-align:center}
  .guide-open-row a{display:inline-flex; align-items:center; gap:8px; background:var(--grad); color:var(--on-brand);
    text-decoration:none; border-radius:14px; padding:13px 24px; font-size:16px; font-weight:600}
  /* Fiche « guide » : le bouton est en tête, pleine largeur — c'est l'action
     principale, elle doit être atteignable sans faire défiler 8 sections. */
  #sheet-guide .guide-open-row{margin:0 0 16px}
  #sheet-guide .guide-open-row a{width:100%; justify-content:center}
  /* Qui publie, et où aller en cas de doute. La page affiche le numéro de
     l'ONIS : sans cette ligne elle peut passer pour un document officiel.
     Placée avant les consignes, pas reléguée en bas. */
  .mention{margin:0 0 16px; padding:11px 13px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:12px;
    font-size:13.5px; line-height:1.5; color:var(--text-2)}

  .contact-list{display:flex; flex-direction:column; gap:10px}
  .contact-item{display:flex; align-items:flex-start; gap:13px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:14px; padding:13px 14px}
  .contact-item .c-ico{flex:0 0 40px; height:40px; border-radius:12px; background:var(--surface);
    color:var(--brand-deep); display:grid; place-items:center}
  .contact-item .c-ico .ic{width:20px; height:20px}
  .contact-item.sos .c-ico{background:transparent; color:var(--bad)}
  .contact-item b{display:block; font-size:16px; font-weight:600}
  .contact-item small{display:block; color:var(--text-2); font-size:14px; overflow-wrap:anywhere;
    unicode-bidi:plaintext}
  .contact-item a{color:inherit; text-decoration:underline; text-underline-offset:2px}
  .contact-item small.cp{margin-top:3px; font-size:13px}
  .contact-item.sos{background:var(--bad-soft); border-color:var(--bad)}
  .contact-item.sos b{color:var(--bad); font-size:20px}