/* ════════════════════════════════════════════════════════════════════
   Espace membre au téléphone — v2 (12 octobre 2026).
   Même langage que la console mobile : en-tête compact, onglets au pouce
   en bas, cartes, thème sombre déclaré (doit dissuader Samsung Internet
   d'inverser les couleurs ; à confirmer sur l'appareil). Les sections de
   la page ne bougent pas : chaque onglet affiche son groupe
   (espace-membre-mobile.js pose les classes ; sans lui, la page reste
   celle d'aujourd'hui).
   v2 : accent sombre #1E6B8A (blanc dessus : 5,96:1 ; #2C86AA donnait
   4,12:1) ; contour de focus visible sur les onglets.
   Tout est sous 820 px : rien ne change sur un ordinateur.
   ════════════════════════════════════════════════════════════════════ */
.em-onglets{display:none}

@media (max-width:820px){
  :root{color-scheme:light dark;
    --em-fond:#F3F5F6;--em-surface:#FFFFFF;--em-surface-2:#F5F8F9;--em-texte:#16232A;--em-doux:#5D6B73;--em-filet:#E3E8EB;
    --em-marque:#0B4A63;--em-accent:#0B4A63}
  @media (prefers-color-scheme:dark){
    :root{--em-fond:#0E171B;--em-surface:#16222A;--em-surface-2:#1C2A33;--em-texte:#E4ECEF;--em-doux:#9AABB3;--em-filet:#263640;
      --em-marque:#8FCBE3;--em-accent:#1E6B8A;--filet:#263640}
    .champ input,.champ select,.champ textarea,select,input,textarea{background:var(--em-surface-2) !important;color:var(--em-texte) !important;border-color:#33454F !important}
    .avis--erreur{background:#3B1717;color:#F3B5B5;border-color:#5C2626}
    .avis--ok{background:#16301F;color:#A9DDB9;border-color:#25472F}
    .avis--info{background:#13293A;color:#B9D2E0;border-color:#244257}
    .doc__action{background:transparent;color:#CFE6F0;border-color:#3B6B80}
    .qui,.qui-details{background:var(--em-surface-2);border-color:var(--em-filet)}
    .qui:has(input:checked){background:#1F3440;border-color:var(--em-accent)}
    .activite__desc{color:#B7C7CE}
    .atouts li::before{color:#D9B47A}
    a{color:#8FCBE3}
  }

  html,body{background:var(--em-fond) !important}
  body{color:var(--em-texte);-webkit-tap-highlight-color:transparent;min-height:100dvh}
  .app{padding:0 14px calc(92px + env(safe-area-inset-bottom))}

  /* En-tête compact */
  .app__entete{flex-wrap:nowrap;gap:10px;padding:10px 0;border-bottom:0;position:sticky;top:0;z-index:40;background:var(--em-fond)}
  .app__marque img{height:30px}
  .app__marque b{font-size:.95rem;color:var(--em-marque)}
  .app__marque span{font-size:.75rem;color:var(--em-doux)}
  .langue{border-color:var(--em-filet)}
  .langue button{padding:8px 12px;min-height:38px;font-size:.78rem;background:var(--em-surface);color:var(--em-doux)}
  .langue button[aria-pressed="true"]{background:var(--em-accent);color:#fff}

  /* Cartes */
  .bloc{background:var(--em-surface);border:1px solid var(--em-filet);border-radius:18px;padding:18px 16px;margin:12px 0;
    box-shadow:0 1px 2px rgba(10,40,55,.05),0 8px 20px -14px rgba(10,40,55,.2)}
  .bloc h2{font-size:1.2rem;color:var(--em-marque)}
  .bloc h3{color:var(--em-marque)}
  .bloc p.aide{font-size:.88rem;color:var(--em-doux);margin-bottom:14px}
  .resume{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .resume div{background:var(--em-surface-2);border-radius:12px;padding:10px}
  .resume dt{font-size:.62rem;letter-spacing:.06em;color:var(--em-doux)}
  .resume dd{font-size:.95rem;color:var(--em-marque);overflow-wrap:anywhere}
  .gros-bouton{border-radius:14px;min-height:52px;background:var(--em-accent)}
  .doc{padding:14px 0;border-bottom-color:var(--em-filet)}
  .doc__icone{background:var(--em-surface-2)}
  .doc__action{border-radius:12px;min-height:44px}
  .activite{border-bottom-color:var(--em-filet)}
  .activite h3{color:var(--em-marque)}
  .champ input,.champ select{border-radius:12px;font-size:16px}
  .vide{color:var(--em-doux)}

  /* Un onglet à la fois : les sections hors de l'onglet courant sont masquées */
  body.em-actif[data-em-onglet] #ecran-dossier > *:not(.em-courant){display:none !important}
  body.em-actif .pied-app{display:none}
  body.em-actif[data-em-onglet="dossier"] .pied-app{display:block}

  /* Onglets au pouce */
  body.em-actif .em-onglets{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--em-surface);
    border-top:1px solid var(--em-filet);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .em-onglet{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;min-height:54px;
    font:inherit;font-size:.68rem;font-weight:600;color:var(--em-doux);cursor:pointer;border-radius:12px;position:relative}
  .em-onglet svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .em-onglet.actif{color:var(--em-marque)}
  .em-onglet:focus-visible{outline:3px solid var(--em-marque);outline-offset:-3px}
  .em-onglet.actif svg{background:color-mix(in srgb,var(--em-accent) 14%,transparent);border-radius:12px;padding:3px 14px;width:52px;height:30px}
  .em-onglet .point{position:absolute;top:6px;left:calc(50% + 10px);width:9px;height:9px;border-radius:50%;background:#E0902A;border:2px solid var(--em-surface)}
  .ruban-banc{font-size:11px !important;padding:3px 8px !important;position:static !important}
}