
/* ─────────────────────────────────────────────────────────────
   Espace membre — écrans réels branchés sur la base.
   Principe d'accessibilité : un but par écran, de gros boutons,
   peu de mots, aucun jargon. Pensé pour un téléphone d'abord.
   ───────────────────────────────────────────────────────────── */
.app{max-width:680px;margin:0 auto;padding:0 20px}
.app__entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 0;border-bottom:1px solid var(--filet,#D9D2C3)}
.app__marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.app__marque img{height:38px}
.app__marque b{display:block;font-size:1rem;line-height:1.2}
.app__marque span{font-size:.8rem;color:#5B6B77}
/* La pastille de langue ne rétrécit jamais : elle porte overflow:hidden
   pour ses coins arrondis, si bien qu'en rétrécissant elle ROGNAIT le
   bouton « English » — sur un écran de 375 px, il n'en restait que 29 px
   sur 77, libellé coupé, zone tactile de 25 px. Constaté le 28 août dans
   un navigateur, pas en relisant la feuille. L'en-tête passe donc à la
   ligne plutôt que de comprimer la pastille. */
.langue{display:inline-flex;flex:0 0 auto;border:1px solid var(--filet,#D9D2C3);border-radius:999px;overflow:hidden}
.langue button{border:0;background:#fff;padding:12px 16px;min-height:44px;font:inherit;font-size:.82rem;
  cursor:pointer;color:#5B6B77}
.langue button[aria-pressed="true"]{background:#0B4A63;color:#fff;font-weight:600}

.bloc{background:#fff;border:1px solid var(--filet,#D9D2C3);border-radius:14px;
  padding:26px;margin:22px 0}
.bloc h2{font-family:'Poppins','Public Sans',sans-serif;font-size:1.35rem;color:#0B4A63;
  margin:0 0 6px}
.bloc p.aide{color:#5B6B77;font-size:.92rem;margin:0 0 20px}

.champ{margin-bottom:16px}
.champ label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.champ input{width:100%;padding:14px 16px;font:inherit;font-size:1.05rem;
  border:1.5px solid #C9D2D9;border-radius:10px;background:#fff}
.champ input:focus{outline:3px solid rgba(11,74,99,.25);border-color:#0B4A63}

.gros-bouton{display:block;width:100%;padding:16px;font:inherit;font-size:1.05rem;
  font-weight:600;border:0;border-radius:10px;background:#0B4A63;color:#fff;cursor:pointer}
.gros-bouton:hover{background:#0d5a78}
.gros-bouton:disabled{opacity:.55;cursor:default}

.doc{display:flex;align-items:center;gap:16px;padding:18px 0;
  border-bottom:1px solid #EDF1F4}
.doc:last-child{border-bottom:0}
.doc__icone{width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:#F2F6F8;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.doc__texte{flex:1;min-width:0}
.doc__texte b{display:block;font-size:1rem;line-height:1.35}
.doc__texte span{font-size:.85rem;color:#5B6B77}
.doc__action{border:1.5px solid #0B4A63;background:#fff;color:#0B4A63;font:inherit;
  font-weight:600;font-size:.9rem;padding:11px 18px;border-radius:9px;cursor:pointer;white-space:nowrap}
.doc__action:hover{background:#0B4A63;color:#fff}
.doc__action:disabled{opacity:.5;cursor:default}

.avis{padding:14px 16px;border-radius:10px;font-size:.92rem;margin-bottom:18px}
.avis--erreur{background:#FDECEC;color:#8B1A1A;border:1px solid #F3C9C9}
.avis--ok{background:#EAF5EE;color:#1B5E32;border:1px solid #C6E3D0}
.avis--info{background:#F2F6F8;color:#38505E;border:1px solid #D6E2E9}

.resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:4px}
.resume div{background:#F7FAFB;border-radius:10px;padding:14px}
.resume dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#5B6B77;font-weight:600}
.resume dd{margin:4px 0 0;font-size:1.05rem;font-weight:600;color:#0B4A63}

.atouts{list-style:none;margin:0;padding:0}
.atouts li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #EDF1F4;font-size:.95rem}
.atouts li:last-child{border-bottom:0}
.atouts li::before{content:"—";color:#B58B4C;font-weight:700;flex-shrink:0}
.bloc h3{font-family:'Poppins','Public Sans',sans-serif;font-size:1.05rem;color:#0B4A63;margin:0 0 10px}
.vide{text-align:center;padding:26px 10px;color:#5B6B77}

/* ── Activités et inscription ───────────────────────────────────────
   Reprend les codes déjà en place : filet de séparation comme .doc,
   même bleu de titre, même bouton que .gros-bouton en version courte.
   Cibles tactiles d'au moins 44 px : cet écran se consulte au téléphone. */
.activite{padding:20px 0;border-bottom:1px solid var(--filet,#EDE8DC)}
.activite:last-child{border-bottom:0;padding-bottom:4px}
/* L'affiche est décorative : le titre et la description portent le sens,
   d'où le texte de remplacement vide. Hauteur bornée pour qu'une image
   verticale ne repousse pas le bouton d'inscription hors de l'écran. */
.activite__affiche{display:block;width:100%;max-height:220px;object-fit:cover;
  border-radius:10px;margin:0 0 12px;background:#F2F6F8}
.activite h3{font-family:'Poppins','Public Sans',sans-serif;font-size:1.12rem;
  color:#0B4A63;margin:0 0 6px}
.activite__desc{margin:0 0 10px;color:#38505E;font-size:.95rem}
.activite__quand{margin:0 0 4px;font-size:.98rem}
.activite__places{margin:0 0 14px;color:#5B6B77;font-size:.9rem}
.etat-inscription{margin:0 0 12px;color:#1B5E32;font-size:.95rem}
/* Qui participe : cases à cocher larges, lisibles au pouce.
   La case fait 24 px et toute la ligne est cliquable — on ne demande pas
   à un parent pressé de viser un carré de 13 px sur un téléphone. */
.champ-qui{border:0;padding:0;margin:0 0 14px}
.champ-qui legend{font-weight:600;font-size:.9rem;padding:0;margin-bottom:8px}
.qui{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;
  border:1.5px solid var(--filet,#D9D2C3);border-radius:10px;margin-bottom:8px;
  background:#fff;cursor:pointer}
.qui:hover{border-color:#0B4A63}
.qui input{width:24px;height:24px;flex:0 0 auto;accent-color:#0B4A63;cursor:pointer}
.qui:has(input:checked){border-color:#0B4A63;background:#F2F6F8}
.qui input:focus-visible{outline:3px solid rgba(11,74,99,.35)}
.qui span{font-size:1rem}
.qui i{font-style:normal;color:#5B6B77;font-size:.85rem}
/* Renseignements scolaires d'un enfant coché (aide aux devoirs) :
   en retrait sous sa case, préremplis depuis le dossier. */
.qui-details{margin:2px 0 14px 36px;padding:14px 16px;background:#F7FAFB;
  border:1px solid #E1E9EE;border-radius:10px}
.qui-details .champ input{font-size:.98rem;padding:11px 12px}
.qui-details .champ-qui{margin-bottom:6px}
.qui-details .aide{margin:8px 0 0;font-size:.82rem;color:#5B6B77}
@media (max-width:520px){ .qui-details{margin-left:12px} }

/* Modifier sa liste : replié par défaut, pour ne pas encombrer l'écran
   d'une famille qui vient seulement vérifier son inscription. */
.modif{margin-top:12px}
.modif summary{display:inline-block;min-height:44px;line-height:28px;padding:8px 0;
  color:#0B4A63;font-weight:600;font-size:.95rem;cursor:pointer}
.modif summary:hover{text-decoration:underline}
.modif[open] summary{margin-bottom:8px}
.modif .champ-qui{margin-bottom:12px}
.bouton-inscrire{display:inline-block;min-height:44px;padding:12px 20px;font:inherit;
  font-weight:600;background:#0B4A63;color:#fff;border:0;border-radius:10px;cursor:pointer}
.bouton-inscrire:hover{background:#0d5a78}
.bouton-inscrire:disabled{opacity:.55;cursor:default}
.bouton-annuler{display:inline-block;min-height:44px;padding:12px 20px;font:inherit;
  background:#fff;color:#0B4A63;border:1.5px solid #0B4A63;border-radius:10px;cursor:pointer}
.bouton-annuler:hover{background:#0B4A63;color:#fff}
.bouton-annuler:disabled{opacity:.5;cursor:default}
.motif-demande{padding:0 0 18px 60px;border-bottom:1px solid #EDF1F4}
.motif-demande label{display:block;font-size:.9rem;color:#4A565B;margin-bottom:6px}
.motif-demande input{width:100%;max-width:420px;padding:12px 14px;font:inherit;
  border:1.5px solid #D3DDE3;border-radius:9px;margin-bottom:10px}
.motif-demande input:focus{outline:2px solid #1478A0;outline-offset:1px}
[hidden]{display:none !important}
.pied-app{text-align:center;padding:26px 0 40px;color:#5B6B77;font-size:.85rem}
.pied-app a{color:#0B4A63}
.lien-sobre{background:none;border:0;color:#0B4A63;font:inherit;font-size:.9rem;
  display:inline-block;min-height:44px;padding:10px 0;
  text-decoration:underline;cursor:pointer}
/* Mot de passe oublié : la réponse est sur place, pas sur une autre page.
   Le repli garde l'écran de connexion aussi net qu'avant pour ceux qui
   n'en ont pas besoin. */
/* Reprend l'espacement et le centrage que portait le paragraphe supprimé
   (u-7bb59) : un <details> ne peut pas vivre dans un <p>. Le corps du
   repli revient à gauche, plus lisible qu'un paragraphe centré. */
.oubli-mdp{margin:18px 0 0;text-align:center}
.oubli-mdp[open]{padding-bottom:4px}
.oubli-mdp .aide{text-align:left}
.oubli-mdp summary{list-style:none}
.oubli-mdp summary::-webkit-details-marker{display:none}
.oubli-mdp[open] summary{margin-bottom:4px}
.oubli-mdp .aide{margin:0 0 10px;font-size:.88rem;line-height:1.55;color:#4A565B}
.oubli-mdp .aide:last-child{margin-bottom:2px}
.oubli-mdp .aide a{color:#0B4A63;font-weight:600;white-space:nowrap}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
