/* ============================================================================
   Chamap v2 - feuille de style
   ----------------------------------------------------------------------------
   Source : maquette Claude Design (AMAP Chamap - Maquettes), integree telle
   quelle, planche de presentation retiree. Les composants que la maquette ne
   dessine pas sont regroupes en fin de fichier, sous « COMPLEMENTS ».

   Conventions : classes en francais, en toutes lettres ; variables CSS pour la
   palette ; aucune dependance externe (pas de police distante, pas d'icones
   tierces).
   ========================================================================== */
:root{
  --vert-principal:#2D6A4F;
  --vert-fonce:#1F4D39;
  --vert-moyen:#40916C;
  --vert-clair:#74C69D;
  --vert-pale:#D8F3DC;
  --ambre:#E9A800;
  --ambre-pale:#FFF3D1;
  --ambre-texte:#6B4A00;
  --fond:#F6F8F5;
  --blanc:#FFFFFF;
  --texte:#1A1A1A;
  --texte-secondaire:#5B6470;
  --bordure:#D7DED5;
  --bordure-forte:#9AA69B;
  --rayon-carte:16px;
  --rayon-bouton:10px;
  --espace-tres-petit:6px;
  --espace-petit:10px;
  --espace-moyen:16px;
  --espace-grand:24px;
  --espace-tres-grand:36px;
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--police);
  color:var(--texte);
  background:#E7EBE5; /* visible seulement autour de la colonne, sur grand ecran */
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:var(--vert-principal)}
a:hover{color:var(--vert-fonce)}
button{font:inherit}
:focus-visible{outline:3px solid var(--vert-principal);outline-offset:2px;border-radius:4px}
.entete-application :focus-visible,.bouton-principal:focus-visible{outline-color:var(--ambre)}

/* ---------- ossature d'un ecran ---------- */
.entete-application{
  background:var(--vert-principal);color:var(--blanc);
  padding:var(--espace-moyen) var(--espace-moyen) var(--espace-moyen);
  display:flex;align-items:center;justify-content:space-between;gap:var(--espace-petit);
}
.entete-application-titre{font-size:20px;font-weight:700;margin:0;line-height:1.2}
.entete-application-sous-titre{margin:2px 0 0;font-size:14px;color:#CFE7DA}
.bouton-entete{
  min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
  color:var(--blanc);border-radius:var(--rayon-bouton);padding:0 14px;
  font-size:15px;font-weight:600;cursor:pointer;
}
.corps-ecran{padding:var(--espace-moyen);display:flex;flex-direction:column;gap:var(--espace-moyen)}

/* ---------- carte de date ---------- */
.carte-date{
  background:var(--blanc);border:1px solid var(--bordure);
  border-radius:var(--rayon-carte);overflow:hidden;
}
.carte-date-entete{
  padding:14px var(--espace-moyen);
  border-bottom:1px solid var(--bordure);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--espace-petit);
}
.date-longue{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em}
.date-relative{font-size:14px;color:var(--texte-secondaire);white-space:nowrap}
.bloc{padding:var(--espace-moyen);display:flex;flex-direction:column;gap:12px}
.bloc + .bloc{border-top:1px solid var(--bordure)}
.bloc-titre{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texte-secondaire);margin:0;
}
.bloc-titre svg{flex:none}
.ligne-etat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.compteur{font-size:17px;font-weight:700;color:var(--vert-principal)}
.compteur-complet{color:var(--texte)}
.places-restantes{font-size:15px;color:var(--texte-secondaire)}
.etiquette-complet{
  font-size:13px;font-weight:700;background:var(--vert-pale);color:var(--vert-fonce);
  border:1px solid var(--vert-clair);border-radius:999px;padding:4px 10px;
}

/* ---------- inscrits ---------- */
.liste-inscrits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.inscrit{display:flex;align-items:center;gap:10px;font-size:16px}
.pastille{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  background:var(--vert-pale);color:var(--vert-fonce);border:1px solid var(--vert-clair);
}
.pastille-moi{background:var(--vert-principal);color:var(--blanc);border-color:var(--vert-principal)}
.inscrit-nom{font-weight:500}
.inscrit-moi{font-weight:700}
.mention-moi{
  font-size:13px;font-weight:700;color:var(--blanc);background:var(--vert-principal);
  border-radius:999px;padding:3px 9px;
}
.place-libre{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--texte-secondaire)}
.pastille-vide{
  flex:none;width:38px;height:38px;border-radius:50%;
  border:2px dashed var(--bordure-forte);
}

/* ---------- boutons ---------- */
.bouton-principal,.bouton-secondaire,.bouton-discret,.bouton-inactif,.bouton-danger{
  min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--rayon-bouton);font-size:17px;font-weight:700;cursor:pointer;
  padding:0 16px;text-decoration:none;
}
.bouton-principal{background:var(--vert-principal);color:var(--blanc);border:1px solid var(--vert-principal)}
.bouton-principal:hover{background:var(--vert-fonce)}
.bouton-secondaire{background:var(--blanc);color:var(--vert-fonce);border:2px solid var(--vert-principal)}
.bouton-secondaire:hover{background:var(--vert-pale)}
.bouton-discret{background:transparent;color:var(--texte-secondaire);border:1px solid var(--bordure-forte);font-weight:600}
.bouton-discret:hover{background:#EDF1EB;color:var(--texte)}
.bouton-danger{background:#B3261E;color:var(--blanc);border:1px solid #B3261E}
.bouton-danger:hover{background:#8C1D18}
.bouton-danger:disabled{opacity:.6;cursor:wait}
.encart-annulation{
  background:#FBEFEA;border:2px solid #C9704A;border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;
}
.encart-annulation h3{margin:0;font-size:18px;color:#8A2B1E}
.encart-annulation p{margin:0;font-size:17px;line-height:1.45;color:var(--texte)}
.bouton-inactif{background:#EDF1EB;color:#6A736C;border:1px solid var(--bordure);cursor:not-allowed}
.lien-texte{
  display:inline-flex;align-items:center;min-height:48px;
  font-size:16px;font-weight:600;color:var(--vert-principal);
}

/* ---------- mon panier ---------- */
.etat-panier{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45}
.etat-panier strong{font-weight:700}
.etat-panier svg{flex:none;margin-top:2px}
.encadre-reservation{
  background:#DCEBFA;border:1px solid #8FBCE4;
  border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;
}
.encadre-reservation .titre{font-size:16px;font-weight:700;color:#134272;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.encadre-reservation .detail{font-size:15px;color:#134272;margin:0}
.encadre-attente{
  background:#FFFFFF;border:1px dashed var(--bordure-forte);
  border-radius:12px;padding:12px 14px;font-size:15px;color:var(--texte-secondaire);
}
.rappel-regle{font-size:14px;color:var(--texte-secondaire);margin:0;line-height:1.45}

/* ---------- formulaires ---------- */
.carte-formulaire{
  background:var(--blanc);border:1px solid var(--bordure);
  border-radius:var(--rayon-carte);padding:var(--espace-moyen);
  display:flex;flex-direction:column;gap:var(--espace-moyen);
}
.titre-ecran{font-size:24px;font-weight:700;margin:0;letter-spacing:-.02em}
.texte-introduction{font-size:16px;line-height:1.5;color:var(--texte-secondaire);margin:0}
.champ{display:flex;flex-direction:column;gap:6px}
.champ-libelle{font-size:15px;font-weight:700}
.champ-saisie{
  min-height:52px;font-size:17px;font-family:var(--police);color:var(--texte);
  padding:12px 14px;border:2px solid var(--bordure-forte);border-radius:var(--rayon-bouton);
  background:var(--blanc);width:100%;
}
.champ-saisie::placeholder{color:#8A928B}
.champ-aide{font-size:14px;color:var(--texte-secondaire)}
.ligne-oubli{display:flex;justify-content:flex-end}
.separateur{display:flex;align-items:center;gap:12px;color:var(--texte-secondaire);font-size:14px}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--bordure)}
.bouton-google{
  min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blanc);border:2px solid var(--bordure-forte);border-radius:var(--rayon-bouton);
  font-size:17px;font-weight:600;color:var(--texte);cursor:pointer;
}
.bouton-google:hover{background:#F2F4F1}

/* ---------- encart premiere connexion ---------- */
.encart-premiere-connexion{
  background:var(--vert-pale);border:2px solid var(--vert-moyen);
  border-radius:var(--rayon-carte);padding:var(--espace-moyen);
  display:flex;flex-direction:column;gap:12px;
}
.encart-premiere-connexion h2{font-size:19px;font-weight:700;color:var(--vert-fonce);margin:0}
.encart-premiere-connexion p{font-size:16px;line-height:1.45;color:#2B4A3A;margin:0}
.bouton-encart{
  min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blanc);color:var(--vert-fonce);border:2px solid var(--vert-principal);
  border-radius:var(--rayon-bouton);font-size:17px;font-weight:700;cursor:pointer;
}
.bouton-encart:hover{background:#EAF8EF}


/* ---------- onglets administrateur ---------- */
.barre-onglets{display:flex;background:var(--vert-fonce)}
.onglet{
  flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-bottom:4px solid transparent;
  color:#CFE7DA;font-size:15px;font-weight:700;cursor:pointer;padding:0 8px;
}
.onglet-actif{color:var(--blanc);border-bottom-color:var(--ambre)}

/* ---------- formulaires depliables ---------- */
.bloc-depliable{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon-carte);
  overflow:hidden;
}
.bloc-depliable > summary{
  min-height:52px;display:flex;align-items:center;gap:10px;
  padding:0 var(--espace-moyen);font-size:17px;font-weight:700;cursor:pointer;
  list-style:none;
}
.bloc-depliable > summary::-webkit-details-marker{display:none}
.bloc-depliable > summary::after{
  content:"";margin-left:auto;width:10px;height:10px;
  border-right:2.5px solid var(--vert-principal);border-bottom:2.5px solid var(--vert-principal);
  transform:rotate(45deg);
}
.bloc-depliable[open] > summary{border-bottom:1px solid var(--bordure)}
.bloc-depliable[open] > summary::after{transform:rotate(-135deg)}
.contenu-depliable{padding:var(--espace-moyen);display:flex;flex-direction:column;gap:var(--espace-moyen)}
.rangee-champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.champ-selection{
  min-height:52px;font-size:17px;font-family:var(--police);color:var(--texte);
  padding:12px 14px;border:2px solid var(--bordure-forte);border-radius:var(--rayon-bouton);
  background:var(--blanc);width:100%;
}

/* ---------- listes administrateur ---------- */
.titre-liste{
  margin:var(--espace-petit) 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texte-secondaire);
}
.ligne-liste{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:12px;
  padding:12px var(--espace-moyen);display:flex;flex-direction:column;gap:8px;
}
.ligne-liste-entete{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.ligne-liste-titre{margin:0;font-size:17px;font-weight:700}
.ligne-liste-detail{margin:0;font-size:15px;color:var(--texte-secondaire);line-height:1.45}
.ligne-liste-passee{opacity:.72}
.rangee-actions{display:flex;gap:8px;flex-wrap:wrap}
.bouton-petit{
  min-height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--blanc);color:var(--vert-fonce);border:2px solid var(--vert-principal);
  border-radius:var(--rayon-bouton);font-size:15px;font-weight:700;padding:0 14px;cursor:pointer;
}
.bouton-petit:hover{background:var(--vert-pale)}
.bouton-petit-danger{color:#8A2B1E;border-color:#C9704A}
.bouton-petit-danger:hover{background:#FBEFEA}
.bouton-petit-inactif{color:#6A736C;border:2px solid var(--bordure);background:#EDF1EB;cursor:not-allowed}
.etiquette{
  font-size:13px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;
  border:1px solid var(--bordure-forte);color:var(--texte-secondaire);background:var(--blanc);
}
.etiquette-verte{background:var(--vert-pale);color:var(--vert-fonce);border-color:var(--vert-clair)}
.etiquette-ambre{background:var(--ambre-pale);color:var(--ambre-texte);border-color:var(--ambre)}
.rangee-etiquettes{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- tableau de bord ---------- */
.carte-action-attente{
  background:var(--ambre-pale);border:2px solid var(--ambre);border-radius:var(--rayon-carte);
  padding:var(--espace-moyen);display:flex;flex-direction:column;gap:10px;
}
.carte-action-attente h3{margin:0;font-size:18px;font-weight:700;color:var(--ambre-texte)}
.carte-action-attente p{margin:0;font-size:16px;line-height:1.45;color:#4A3300}
.bouton-ambre{
  min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--ambre-texte);color:var(--blanc);border:2px solid var(--ambre-texte);
  border-radius:var(--rayon-bouton);font-size:17px;font-weight:700;cursor:pointer;
}
.bouton-ambre:hover{background:#523700}
.liste-historique{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.element-historique{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:12px;
  padding:12px var(--espace-moyen);display:flex;align-items:center;gap:12px;
}
.element-historique .intitule{flex:1;font-size:16px;min-width:0}
.element-historique .precision{display:block;font-size:14px;color:var(--texte-secondaire);margin-top:2px}

.liste-inscriptions-newsletter{
  list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;font-size:15px;
}
.liste-inscriptions-newsletter li{padding:6px 0;border-bottom:1px solid var(--bordure)}
.liste-inscriptions-newsletter li:last-child{border-bottom:none}
.liste-inscriptions-newsletter .champ-aide{display:inline;margin-left:6px}

/* ---------- ceder un panier ---------- */
.choix-taille{display:flex;flex-direction:column;gap:8px}
.option-taille{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;
  border:2px solid var(--bordure-forte);border-radius:12px;background:var(--blanc);
  font-size:17px;cursor:pointer;
}
.option-taille-choisie{border-color:var(--vert-principal);background:var(--vert-pale)}
.option-taille input{width:24px;height:24px;accent-color:var(--vert-principal);margin:0;flex:none}
.option-taille .prix{margin-left:auto;font-weight:700}
.bloc-contact{
  background:var(--vert-pale);border:1px solid var(--vert-clair);border-radius:12px;
  padding:var(--espace-moyen);display:flex;flex-direction:column;gap:6px;
}
.bloc-contact .nom{margin:0;font-size:20px;font-weight:700;color:var(--vert-fonce)}
.bloc-contact .numero{margin:0;font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--texte)}
.bouton-appeler{
  min-height:56px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--vert-principal);color:var(--blanc);border:1px solid var(--vert-principal);
  border-radius:var(--rayon-bouton);font-size:18px;font-weight:700;text-decoration:none;
}
.bouton-appeler:hover{background:var(--vert-fonce);color:var(--blanc)}


/* ---------- etats d'un panier (langage commun) ---------- */
.etiquette-etat{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:14px;font-weight:700;border-radius:999px;padding:5px 11px;border:1px solid;
}
.etat-disponible{background:#D8F3DC;color:#14432C;border-color:#74C69D}
.etat-attente{background:#E7EAE7;color:#4A5158;border-color:#B4BBB4}
.etat-en-cours{background:#FFF3CD;color:#6B4300;border-color:#E9A800}
.etat-reserve{background:#DCEBFA;color:#134272;border-color:#8FBCE4}
.etiquette-etat svg{flex:none}
.explication-file{margin:0;font-size:15px;line-height:1.45;color:var(--texte-secondaire)}
.carte-panier{flex-direction:column;align-items:stretch;gap:12px}
.rangee-panier{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.carte-panier-attente{background:#FAFBFA;border-color:#DFE3DE}
.mention-etat{margin:0;font-size:15px;line-height:1.4;color:#6B4300}
.mention-etat-reserve{color:#134272}
.encart-engagement{
  background:var(--ambre-pale);border:2px solid var(--ambre);border-radius:12px;
  padding:14px;display:flex;gap:10px;align-items:flex-start;
  font-size:16px;line-height:1.5;color:#4A3300;
}
.encart-engagement svg{flex:none;margin-top:2px}
.compte-a-rebours{
  display:flex;align-items:center;gap:8px;align-self:flex-start;
  background:#EDF1EB;border:1px solid var(--bordure-forte);border-radius:999px;
  padding:6px 12px;font-size:15px;color:var(--texte-secondaire);
}

/* ---------- ecrans annexes ---------- */
.pied-ecran{padding:0 var(--espace-moyen) var(--espace-grand);text-align:center}
.pied-ecran p{font-size:15px;color:var(--texte-secondaire);margin:0;line-height:1.5}
.rappel-indesirables{
  background:var(--ambre-pale);border:1px solid var(--ambre);border-radius:12px;
  padding:12px 14px;font-size:15px;line-height:1.45;color:var(--ambre-texte);
}
.bandeau-retour{
  padding:var(--espace-petit) var(--espace-moyen);
  display:flex;align-items:center;
}
.bouton-retour{
  display:flex;align-items:center;gap:8px;min-height:48px;
  background:none;border:none;color:var(--vert-principal);
  font-size:16px;font-weight:700;cursor:pointer;padding:0 4px 0 0;
}
/* ---------- robustesse du mot de passe ---------- */
.indicateur-robustesse{display:flex;flex-direction:column;gap:6px}
.jauge-robustesse{display:flex;gap:4px}
.segment-robustesse{flex:1;height:8px;border-radius:999px;background:#E2E7E0}
.segment-rempli{background:var(--vert-moyen)}
.texte-robustesse{font-size:15px;font-weight:700;color:var(--vert-fonce)}
.conseil{
  background:var(--vert-pale);border:1px solid var(--vert-clair);border-radius:12px;
  padding:12px 14px;display:flex;gap:10px;align-items:flex-start;
  font-size:15px;line-height:1.45;color:#2B4A3A;
}
.conseil svg{flex:none;margin-top:2px}
.conseil .exemple{display:block;margin-top:6px;font-weight:700}

/* ---------- consentement ---------- */
.liste-sections{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--espace-moyen)}
.section-consentement{display:flex;flex-direction:column;gap:4px}
.section-consentement h3{
  margin:0;font-size:16px;font-weight:700;color:var(--vert-fonce);
}
.section-consentement p{margin:0;font-size:16px;line-height:1.5;color:var(--texte)}
.section-consentement + .section-consentement{border-top:1px solid var(--bordure);padding-top:var(--espace-moyen)}
.ligne-case-a-cocher{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--blanc);border:2px solid var(--vert-principal);border-radius:12px;
  padding:14px;cursor:pointer;
}
.case-a-cocher{
  flex:none;width:26px;height:26px;margin:0;accent-color:var(--vert-principal);
}
.ligne-case-a-cocher span{font-size:16px;line-height:1.45;font-weight:600}
/* ---------- profil ---------- */
.carte-reglage{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon-carte);
  padding:var(--espace-moyen);display:flex;flex-direction:column;gap:10px;
}
.carte-reglage-titre{
  margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texte-secondaire);
}
.valeur-principale{margin:0;font-size:19px;font-weight:700}
.valeur-secondaire{margin:0;font-size:16px;color:var(--texte)}
.note-explicative{margin:0;font-size:15px;line-height:1.45;color:var(--texte-secondaire)}
.bouton-deconnexion{
  min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blanc);color:#8A2B1E;border:2px solid #C9704A;border-radius:var(--rayon-bouton);
  font-size:17px;font-weight:700;cursor:pointer;
}
.bouton-deconnexion:hover{background:#FBEFEA}

/* ---------- en-tete public ---------- */
.entete-publique{
  background:var(--blanc);border-bottom:1px solid var(--bordure);
  padding:12px var(--espace-moyen);
  display:flex;flex-direction:column;gap:12px;
}
.rangee-marque{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo-association{height:52px;width:auto;display:block}
.nom-association{display:flex;flex-direction:column;gap:2px;min-width:0}
.nom-association .titre{font-size:18px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.nom-association .sous-titre{font-size:14px;color:var(--texte-secondaire);line-height:1.2}
.entete-membre .rangee-marque{gap:10px}
.entete-membre .bouton-entete-secondaire{min-height:44px;font-size:15px}
.baseline-entete{margin:0;font-size:15px;line-height:1.35;color:var(--vert-fonce);font-weight:600}
.pied-legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:18px var(--espace-moyen) 28px;font-size:14px}
.pied-legal a{color:var(--texte-secondaire);text-decoration:underline}
.rangee-appels-entete{display:flex;gap:10px}
.rangee-appels-entete > *{flex:1}
.bouton-entete-secondaire{
  min-height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--blanc);color:var(--vert-fonce);border:2px solid var(--vert-principal);
  border-radius:var(--rayon-bouton);font-size:16px;font-weight:700;padding:0 10px;cursor:pointer;
  text-align:center;line-height:1.15;
}
.bouton-entete-secondaire:hover{background:var(--vert-pale)}
.bouton-entete-principal{
  min-height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--vert-principal);color:var(--blanc);border:2px solid var(--vert-principal);
  border-radius:var(--rayon-bouton);font-size:16px;font-weight:700;padding:0 10px;cursor:pointer;
  text-align:center;line-height:1.15;
}
.bouton-entete-principal:hover{background:var(--vert-fonce)}
.rangee-partenaires{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px var(--espace-moyen) 0;
}
.rangee-partenaires .mention{font-size:13px;color:var(--texte-secondaire);letter-spacing:.04em;text-transform:uppercase;font-weight:700;width:100%}
.logo-partenaire{height:40px;width:auto;display:block;border-radius:6px}

/* ---------- accueil public ---------- */
.banniere-publique{
  background:var(--vert-principal);color:var(--blanc);padding:var(--espace-grand) var(--espace-moyen);
}
.banniere-publique h1{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.02em}
.banniere-publique p{margin:8px 0 0;font-size:17px;line-height:1.5;color:#D7ECE0}
.groupe-date{display:flex;flex-direction:column;gap:10px}
.intitule-date{
  margin:0;font-size:17px;font-weight:700;color:var(--vert-fonce);
  display:flex;align-items:baseline;gap:8px;
}
.intitule-date .lieu{font-size:15px;font-weight:500;color:var(--texte-secondaire)}
.carte-panier{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon-carte);
  padding:var(--espace-moyen);display:flex;flex-direction:column;align-items:stretch;gap:12px;
}
.description-panier{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.taille-panier{font-size:18px;font-weight:700}
.prix-panier{font-size:17px;color:var(--texte)}
.bouton-prendre{
  min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--vert-principal);color:var(--blanc);border:1px solid var(--vert-principal);
  border-radius:var(--rayon-bouton);font-size:16px;font-weight:700;padding:0 18px;cursor:pointer;white-space:nowrap;
}
.bouton-prendre:hover{background:var(--vert-fonce)}
.zone-appels{display:flex;flex-direction:column;gap:10px;padding-top:var(--espace-petit)}

/* ---------- confirmation ---------- */
.illustration-telephone{
  width:64px;height:64px;border-radius:50%;background:var(--vert-pale);
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.recapitulatif{
  background:var(--fond);border:1px solid var(--bordure);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;font-size:16px;
}
.ligne-recapitulatif{display:flex;justify-content:space-between;gap:12px}
.ligne-recapitulatif dt{color:var(--texte-secondaire);margin:0}
.ligne-recapitulatif dd{margin:0;font-weight:700;text-align:right}
.illustration-enveloppe{
  width:64px;height:64px;border-radius:50%;background:var(--vert-pale);
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}


/* ---------- ajouts de la maquette (mise a jour du 19/09) ---------- */
.message-erreur { display:flex;gap:10px;align-items:flex-start; background:#FBEFEA;border:2px solid #C9704A;border-radius:12px;padding:12px 14px; font-size:16px;line-height:1.45;color:#7A2418; }
.message-erreur svg { flex:none;margin-top:2px }
.message-erreur strong { font-weight:700 }
.champ-saisie-erreur { border-color:#C9704A }
.champ-aide-erreur { font-size:15px;color:#7A2418;font-weight:600 }
.liste-etapes { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px }
.etape { display:flex;gap:12px;align-items:flex-start }
.numero-etape { flex:none;width:32px;height:32px;border-radius:50%;background:var(--vert-pale); color:var(--vert-fonce);border:1px solid var(--vert-clair); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px; }
.etape p { margin:0;font-size:16px;line-height:1.45 }
.etape .intitule-etape { font-weight:700;display:block }
.barre-navigation { display:grid;grid-template-columns:repeat(4,1fr); background:var(--blanc);border-top:1px solid var(--bordure); }
.onglet-navigation { min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; background:none;border:none;border-top:4px solid transparent; color:var(--texte-secondaire);font-size:14px;font-weight:700;cursor:pointer;padding:6px 4px; }
.barre-navigation-administrateur { grid-template-columns:repeat(5,1fr) }
/* Cinq entrees sur un petit ecran : libelles un peu plus serres. */
.barre-navigation-administrateur .onglet-navigation { font-size:12.5px;padding:6px 2px }
.onglet-navigation { min-width:0 }
.onglet-navigation:hover { background:#F1F5F0 }
.onglet-navigation-actif { color:var(--vert-fonce);border-top-color:var(--vert-principal);background:var(--vert-pale) }
.pastille-alerte { position:relative; }
.pastille-alerte::after { content:attr(data-nombre);position:absolute;top:-6px;right:-12px; min-width:20px;height:20px;border-radius:999px;background:var(--ambre-texte);color:var(--blanc); font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px; }
.emplacement-photo { aspect-ratio:16 / 9;background:#E8EEE7;border-bottom:1px solid var(--bordure); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; color:var(--texte-secondaire);text-align:center;padding:var(--espace-moyen); }
.emplacement-photo .intitule-photo { font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase }
.emplacement-photo .precision-photo { font-size:14px;max-width:26ch;line-height:1.4 }

/* ============================================================================
   COMPLEMENTS
   ----------------------------------------------------------------------------
   Tout ce qui suit n'existe pas dans la maquette Claude Design : ce sont les
   composants que l'application exige et que la maquette ne dessine pas
   (alertes, etats vides, bascule d'affichage du mot de passe, navigation
   membre). Ils reprennent les variables de la maquette pour rester coherents.
   A remplacer par des maquettes des qu'elles existent.
   ========================================================================== */

/* Sans cette regle, un `display:flex` de classe l'emporte sur l'attribut
   `hidden` du navigateur et l'element reste visible. */
[hidden] { display: none !important; }

/* --- Colonne de l'application ------------------------------------------- */

/* Telephone d'abord, puis tablette et bureau : la colonne s'elargit par
   paliers (voir le bloc RESPONSIVE en fin de fichier), toujours centree, avec
   un fond visible autour sur grand ecran. La largeur de la colonne sert aussi
   a la barre de navigation du bas. */
:root { --largeur-app: 480px; }

#app {
  max-width: var(--largeur-app);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--fond);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 520px) {
  #app { box-shadow: 0 10px 30px rgba(26, 40, 32, .12); }
}

/* Les ajustements tablette et petits ecrans sont a la FIN de ce fichier :
   ils doivent venir apres les regles qu'ils surchargent. */

/* --- Alertes ------------------------------------------------------------- */

.message {
  padding: 13px 15px;
  font-size: 16px;
  line-height: 1.45;
  border-radius: 12px;
  border: 1px solid;
}
.message.succes { background: var(--vert-pale); color: var(--vert-fonce); border-color: var(--vert-clair); }
.message.erreur { background: #FBEFEA; color: #7A2418; border-color: #C9704A; border-width: 2px; }
.message.info   { background: var(--ambre-pale); color: var(--ambre-texte); border-color: var(--ambre); }
[role="alert"]:empty { display: none; }
[role="alert"] .message { margin: 0; }
.carte-formulaire > [role="alert"] { margin: 0; }

/* --- Etats vides et chargement ------------------------------------------- */

.vide {
  padding: 28px var(--espace-moyen);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte-secondaire);
  background: var(--blanc);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon-carte);
}
.vide .aide { display: block; margin-top: 6px; font-size: 15px; }

.ecran-attente {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--texte-secondaire);
}

/* --- Liens et petits textes --------------------------------------------- */

/* Un bouton qui se lit comme un lien, au milieu d'une phrase. */
.lien-bouton {
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--vert-principal);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--vert-fonce); }

.aide { margin: 0; font-size: 15px; line-height: 1.45; color: var(--texte-secondaire); }
.centre-texte { text-align: center; }
.facultatif { font-weight: 500; color: var(--texte-secondaire); }

/* --- Champ de mot de passe, avec bascule d'affichage --------------------- */

/* La maquette n'a pas de bouton « Afficher » ; il a ete demande, parce qu'on
   encourage les phrases de plusieurs mots, celles qu'on tape de travers sur un
   clavier de telephone. */
.champ-secret { position: relative; display: flex; }
.champ-secret .champ-saisie { padding-right: 96px; }

.bascule-visibilite {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  min-width: 88px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--vert-fonce);
  background: none;
  border: none;
  border-radius: 0 var(--rayon-bouton) var(--rayon-bouton) 0;
  cursor: pointer;
}
.bascule-visibilite:hover { background: var(--vert-pale); }

/* --- Navigation de l'espace membre --------------------------------------- */

/* Les onglets de la maquette servent aussi a la sous-navigation de l'administration. */
.barre-onglets { overflow-x: auto; scrollbar-width: none; }
.barre-onglets::-webkit-scrollbar { display: none; }
.onglet { white-space: nowrap; }


/* --- Formulaires : ajustements ------------------------------------------- */

textarea.champ-saisie { resize: vertical; min-height: 96px; }
.champ-saisie:focus { outline: none; border-color: var(--vert-principal); }
.champ-erreur { border-color: #C9704A; }

/* --- Robustesse du mot de passe : segments remplis selon le niveau -------- */

.jauge-robustesse[data-niveau="1"] .segment-robustesse:nth-child(-n+1),
.jauge-robustesse[data-niveau="2"] .segment-robustesse:nth-child(-n+2),
.jauge-robustesse[data-niveau="3"] .segment-robustesse:nth-child(-n+3) {
  background: var(--vert-moyen);
}
.jauge-robustesse[data-niveau="1"] .segment-robustesse:nth-child(-n+1) { background: #C9704A; }
.jauge-robustesse[data-niveau="2"] .segment-robustesse:nth-child(-n+2) { background: var(--ambre); }

/* --- Etats d'un panier : precisions -------------------------------------- */

.carte-panier-attente .taille-panier,
.carte-panier-attente .prix-panier { color: var(--texte-secondaire); }

/* Aide a la lecture des inscrits : « Vous » ressort davantage. */
.inscrit-moi { color: var(--vert-fonce); }

/* --- Administration : commande de nombre de places en ligne -------------- */

.champ-inline { display: flex; align-items: center; gap: 10px; }
.champ-inline .champ-saisie { width: 92px; min-height: 48px; }
.champ-inline label { font-size: 15px; font-weight: 700; }
.champ-inline input[type="date"] { width: auto; flex: 1 1 auto; min-width: 0; }

/* --- Accueil public (maquette « Accueil public ») ------------------------------- */

.entete-compacte { background: var(--blanc); border-bottom: 1px solid var(--bordure); padding: 10px var(--espace-moyen); display: flex; flex-direction: column; gap: 10px; }
.marque-compacte { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marque-compacte .nom { font-size: 16px; font-weight: 700; line-height: 1.15; }
.marque-compacte img { height: 44px; width: auto; display: block; }
/* Bandeau : logos a gauche et deconnexion a droite sur une ligne, nom de l'AMAP
   sur la ligne du dessous (il passait mal a cote des logos sur mobile). */
.ligne-marque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.entete-compacte .rangee-marque { order: 1; gap: 8px; flex-wrap: nowrap; flex: none; }
.entete-compacte .rangee-marque img { height: 36px; width: auto; }
.bouton-deconnexion-entete { order: 2; margin-left: auto; }
.nom-amap { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.15; color: var(--vert-fonce); }
.bouton-deconnexion-entete {
  flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--vert-fonce); background: var(--blanc); border: 2px solid var(--vert-principal); border-radius: var(--rayon-bouton);
}
.bouton-deconnexion-entete:hover { background: var(--vert-pale); }
.actions-entete { display: flex; gap: 10px; }
.actions-entete > * { flex: 1; }
.lien-connexion, .lien-adherer {
  min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 10px;
  text-align: center; line-height: 1.15; border-radius: var(--rayon-bouton); font-size: 15px; font-weight: 700; cursor: pointer;
}
.lien-connexion { color: var(--blanc); background: var(--vert-principal); border: 1px solid var(--vert-principal); }
.lien-connexion:hover { background: var(--vert-fonce); }
.lien-adherer { color: var(--vert-fonce); background: var(--blanc); border: 2px solid var(--vert-principal); }
.lien-adherer:hover { background: var(--vert-pale); }

.hero-accueil { position: relative; background: var(--vert-principal); min-height: 190px; overflow: hidden; }
.hero-accueil #carrousel-photos { padding: 0; }
.hero-accueil .carrousel { border-radius: 0; }
.voile-photo {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 36px var(--espace-moyen) 16px; color: var(--blanc); text-align: left;
  background: linear-gradient(to top, rgba(20, 35, 26, .92), rgba(20, 35, 26, 0));
}
.voile-photo h1 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.02em; }
.voile-photo p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: #E6F1EA; }
/* Sans photo, le titre n'est plus « pose » : il occupe le fond vert. */
.hero-accueil #carrousel-photos[hidden] + .voile-photo { position: static; background: none; padding: 24px var(--espace-moyen); }
.points-carrousel { display: flex; gap: 6px; justify-content: center; padding: 10px 0; background: var(--blanc); border-bottom: 1px solid var(--bordure); }
.points-carrousel[hidden] { display: none; }
.points-carrousel span { width: 8px; height: 8px; border-radius: 50%; background: var(--bordure-forte); }
.points-carrousel span.actif { background: var(--vert-principal); width: 20px; border-radius: 999px; }

.mode-emploi { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: var(--espace-moyen); display: flex; flex-direction: column; gap: 12px; }
.mode-emploi h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-secondaire); }
.liste-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.etape { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.numero-etape { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

.liste-dates { display: flex; flex-direction: column; gap: 10px; }
.date-depliante { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); overflow: hidden; }
.date-depliante > summary { list-style: none; cursor: pointer; min-height: 64px; padding: 12px var(--espace-moyen); display: flex; align-items: center; gap: 8px; }
.date-depliante > summary::-webkit-details-marker { display: none; }
.date-depliante .titre-date { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.date-depliante .jour { font-size: 16px; font-weight: 700; color: var(--vert-fonce); }
.date-depliante .lieu { font-size: 13px; color: var(--texte-secondaire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-depliante .chevron { flex: none; transition: transform .15s ease; }
.date-depliante[open] .chevron { transform: rotate(180deg); }
.date-depliante[open] > summary { border-bottom: 1px solid var(--bordure); }
.contenu-date { padding: var(--espace-moyen); display: flex; flex-direction: column; gap: 10px; background: var(--fond); }
.puce-dispo, .puce-vide { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.puce-dispo { background: var(--vert-pale); color: #14532D; border: 1px solid var(--vert-moyen); }
.puce-vide { background: #EEF1EE; color: #3F4A44; border: 1px solid var(--bordure-forte); }

.pied-public { background: var(--blanc); border-top: 1px solid var(--bordure); padding: var(--espace-moyen); display: flex; flex-direction: column; gap: 12px; }
.pied-public .mention { margin: 0; font-size: 13px; color: var(--texte-secondaire); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.rangee-logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rangee-logos img { height: 34px; width: auto; display: block; border-radius: 6px; }
.pied-public .contact, .pied-public .liens-legaux { margin: 0; font-size: 15px; color: var(--texte-secondaire); }
.pied-public .liens-legaux { font-size: 14px; }

/* Connecte, l'accueil porte la navigation du bas : le pied lui laisse la place. */
body[data-adherent="1"] #ecran-accueil .pied-public { padding-bottom: 96px; }

/* Macaron « TEST » sur les paniers de demonstration. */
.carte-panier-demo { position: relative; border-style: dashed; }
.macaron-test {
  position: absolute; top: -9px; right: 12px; z-index: 1;
  background: var(--ambre); color: var(--ambre-texte); font-size: 12px; font-weight: 800; letter-spacing: .12em;
  padding: 3px 10px; border-radius: 999px; transform: rotate(4deg); box-shadow: 0 2px 6px rgba(26, 40, 32, .25);
}

.bloc-newsletter { background: var(--vert-pale); border: 1px solid var(--vert-moyen); border-radius: var(--rayon-carte); padding: var(--espace-moyen); display: flex; flex-direction: column; gap: 12px; }
.bloc-newsletter h2 { margin: 0; font-size: 19px; color: var(--vert-fonce); }
.bloc-newsletter p { margin: 0; font-size: 16px; line-height: 1.45; color: #2B4A3A; }

.vide #bouton-alerte-paniers { display: block; margin: 14px auto 0; }

/* --- Pop-in : « M'alerter » quand aucun panier n'est disponible --------------- */
.voile-popin {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 40, 32, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--espace-moyen);
}
.carte-popin {
  position: relative; width: 100%; max-width: 420px;
  background: var(--blanc); border-radius: var(--rayon-carte);
  padding: var(--espace-grand) var(--espace-moyen) var(--espace-moyen);
  display: flex; flex-direction: column; gap: var(--espace-petit);
  box-shadow: 0 12px 32px rgba(26, 40, 32, .3);
}
.carte-popin h2 { margin: 0; font-size: 20px; color: var(--vert-fonce); }
.carte-popin p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--texte-secondaire); }
.fermer-popin {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: transparent; font-size: 22px; line-height: 1; color: var(--texte-secondaire);
  cursor: pointer;
}
.fermer-popin:hover { background: var(--vert-pale); }

/* --- Tableau de bord de l'adherent : tuiles colorees --------------------------- */

.qualif { flex: none; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 5px 11px; border: 1px solid; white-space: nowrap; }
.qualif-en-cours { background: var(--ambre-pale); color: var(--ambre-texte); border-color: var(--ambre); }
.qualif-valide { background: var(--vert-pale); color: #14532D; border-color: var(--vert-moyen); }
.qualif-annule { background: #EEF1EE; color: #4A5450; border-color: var(--bordure-forte); }
.bloc-distribution { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ligne-distribution { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ligne-distribution .intitule { flex: 1; min-width: 0; }
.ligne-distribution .etiquette { flex: none; white-space: nowrap; }
.actions-distribution { display: flex; gap: 8px; }
.actions-distribution .bouton-petit { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; text-align: center; line-height: 1.2; }
.bouton-petit-plein { background: var(--vert-principal); color: var(--blanc); border-color: var(--vert-principal); }
.bouton-petit-plein:hover { background: var(--vert-fonce); }
.legende-qualif { display: flex; flex-direction: column; gap: 8px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 12px; padding: 12px 14px; }
.legende-qualif p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texte-secondaire); }
.legende-qualif .qualif { margin-right: 6px; font-size: 13px; padding: 2px 9px; }

.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tuile {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 16px; border-radius: 18px; color: #fff; min-height: 138px;
  box-shadow: 0 6px 14px rgba(26, 40, 32, .14);
}
.tuile-icone { opacity: .9; display: flex; }
.tuile-nombre { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.tuile-libelle { font-size: 15px; line-height: 1.2; font-weight: 700; }
.tuile-detail { font-size: 13px; line-height: 1.2; opacity: .88; }
.tuile-verte { background: linear-gradient(145deg, #2D6A4F, #1F4D39); }
.tuile-bleue { background: linear-gradient(145deg, #2F6FA5, #1F4E7A); }
.tuile-ambre { background: linear-gradient(145deg, #C77400, #96590A); }
.tuile-violette { background: linear-gradient(145deg, #8A5AB0, #62397F); }

/* Meme famille de couleurs pour les tuiles de l'administration. */
.tuiles-admin { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tuiles-admin .tuile { min-height: 112px; }
.tuile-rose { background: linear-gradient(145deg, #C2456B, #8F2C4C); }

/* --- Bilan des permanences (administration) ------------------------------------ */

.carte-bilan { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.carte-bilan h3 { margin: 0; font-size: 18px; color: var(--vert-fonce); }
.bilan-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bilan-chiffre { background: #F1F6F3; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.bilan-chiffre strong { font-size: 26px; line-height: 1.1; color: var(--vert-fonce); }
.bilan-chiffre span { font-size: 13px; color: var(--texte-secondaire); }
.bilan-extreme { border-radius: 12px; padding: 10px 12px; font-size: 15px; line-height: 1.4; }
.bilan-extreme strong { font-size: 18px; }
.bilan-bas { background: #FDECEC; color: #7A2418; }
.bilan-haut { background: #E3F4EA; color: #17452F; }
.liste-mediane { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.liste-mediane li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.classement li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #F1F6F3; }
.classement li.meneur { background: var(--ambre-pale); border: 1px solid var(--ambre); font-weight: 700; }
/* La date qu'on vient de modifier : un halo bref, pour ne pas douter de laquelle il s'agit. */
.carte-date-mise-en-avant { animation: halo-date 2.2s ease-out 1; }
@keyframes halo-date {
  0%   { box-shadow: 0 0 0 4px rgba(45, 106, 79, .55); }
  100% { box-shadow: 0 0 0 4px rgba(45, 106, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { .carte-date-mise-en-avant { animation: none; outline: 3px solid var(--vert-principal); } }

/* « Ajouter a mon agenda » : un menu <details> a deux liens. */
.menu-agenda { width: 100%; }
.menu-agenda > summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--vert-fonce);
  background: var(--blanc); border: 2px solid var(--vert-principal); border-radius: var(--rayon-bouton);
}
.menu-agenda > summary::-webkit-details-marker { display: none; }
.menu-agenda > summary:hover, .menu-agenda[open] > summary { background: var(--vert-pale); }
.menu-agenda-liens { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.menu-agenda-liens a {
  min-height: 44px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 16px; font-weight: 600; text-decoration: none; color: var(--vert-fonce);
  background: var(--blanc); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-bouton);
}
.menu-agenda-liens a:hover { background: #EDF1EB; }

/* --- « Mes paniers » : ce qui fait revenir (prochaine distribution, choses a faire) ---- */

.carte-prochaine {
  background: var(--vert-fonce); color: var(--blanc); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.carte-prochaine .surtitre {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vert-clair);
}
.carte-prochaine-date h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.carte-prochaine-date p { margin: 4px 0 0; font-size: 18px; color: var(--vert-pale); }
.carte-prochaine-detail { margin: 0; font-size: 16px; line-height: 1.4; color: var(--vert-pale); }
/* L'agenda, sur fond fonce : un bouton clair plutot que le contour vert. */
.carte-prochaine .menu-agenda > summary {
  background: var(--vert-clair); border-color: var(--vert-clair); color: #12351F; min-height: 48px; font-size: 17px;
}
.carte-prochaine .menu-agenda > summary:hover, .carte-prochaine .menu-agenda[open] > summary { background: #95D5B2; border-color: #95D5B2; }
.lien-clair {
  min-height: 44px; padding: 0 8px; background: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--vert-pale); text-decoration: underline; text-align: center;
}
.lien-clair:disabled { opacity: .6; cursor: wait; }

.lien-action {
  min-height: 44px; background: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ambre-texte); text-decoration: underline;
}
.bouton-ambre-contour {
  min-height: 48px; width: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--blanc); color: var(--ambre-texte); border: 2px solid var(--ambre-texte);
  border-radius: var(--rayon-bouton); font-size: 17px; font-weight: 600; cursor: pointer;
}
.bouton-ambre-contour:hover { background: var(--ambre-pale); }
.bouton-ambre-contour:disabled { opacity: .6; cursor: wait; }

.entete-section { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entete-section .titre-liste { margin: 0; }
.pastille-compte {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ambre-texte); color: var(--blanc); font-size: 14px; font-weight: 700;
}

.carte-vente {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.carte-vente .note-explicative { margin: 0; }
.intitule-fort { font-size: 18px; font-weight: 700; color: var(--vert-fonce); }
.carte-vide-inscrit {
  background: var(--blanc); border: 2px solid var(--vert-principal); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.carte-vide-inscrit h2 { margin: 0; font-size: 22px; line-height: 1.2; color: var(--vert-fonce); }
.carte-vide-inscrit p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texte-secondaire); }
.lien-centre { align-self: center; }

.compteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compteur-tuile {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 12px; padding: 10px 12px;
  display: flex; align-items: baseline; gap: 8px;
}
.compteur-tuile strong { font-size: 20px; color: var(--vert-fonce); }
.compteur-tuile span { font-size: 14px; line-height: 1.25; color: var(--texte-secondaire); }

/* Blocs replies : historiques, actions en plus, autres dates. */
.repli { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; padding: 0 16px; }
.repli > summary {
  min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 17px; font-weight: 600; color: var(--vert-fonce);
}
.repli > summary > span { font-size: 15px; font-weight: 400; color: var(--texte-secondaire); }
.repli[open] > summary > span { font-size: 0; }
.repli[open] > summary > span::after { content: "Masquer"; font-size: 15px; }
.repli-corps { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.repli-actions { background: none; border: 0; padding: 0; }
.repli-actions > summary { justify-content: center; text-decoration: underline; }
.repli-actions > summary > span { display: none; }
.liste-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ligne-simple { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--bordure); }
.ligne-simple:first-child { border-top: 0; }
.ligne-simple .intitule { flex: 1; min-width: 0; font-size: 16px; }
.ligne-simple .precision { display: block; margin-top: 2px; font-size: 14px; color: var(--texte-secondaire); }

/* Fiche adherent : une ligne (nom + derniere connexion), le reste se deplie. */
.ligne-adherent { padding: 0; }
.resume-adherent { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; }
.resume-adherent::-webkit-details-marker { display: none; }
.nom-adherent { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connexion-adherent { flex: none; font-size: 13px; color: var(--texte-secondaire); white-space: nowrap; }
.connexion-jamais { font-style: italic; }
.ligne-adherent .chevron { flex: none; transition: transform .15s ease; }
.ligne-adherent[open] .chevron { transform: rotate(180deg); }
.ligne-adherent[open] > .resume-adherent { border-bottom: 1px solid var(--bordure); }
.contenu-adherent { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.compteurs-membre { display: flex; gap: 8px; flex-wrap: wrap; }
.compteurs-membre .etiquette { font-weight: 700; }

.resultat-diagnostic { margin: 0; padding: 12px; background: #F1F6F3; border-radius: 10px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }

/* --- Suivi des contrats, statut inactif ------------------------------------ */

.liste-repartition { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-repartition li { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; padding: 8px 12px; background: #F1F6F3; border-radius: 10px; }
.tableau-defilant { overflow-x: auto; }
.tableau-suivi { border-collapse: collapse; width: 100%; font-size: 14px; }
.tableau-suivi th, .tableau-suivi td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
.tableau-suivi thead th { font-size: 13px; color: var(--texte-secondaire); }
.tableau-suivi tbody th { font-weight: 600; }
.panneau-inactif { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-top: 8px; border: 2px solid var(--ambre); border-radius: 12px; background: var(--ambre-pale); }
.panneau-inactif p { margin: 0; }
.champ-inline select.champ-saisie { width: auto; flex: 1 1 auto; min-width: 0; }

/* --- Cession et suivi des paniers ------------------------------------------ */

.groupe-choix { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.groupe-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px;
  background: #fff; color: var(--vert-fonce); border: 2px solid #B9CFC2;
}
.filtre-actif { background: var(--vert-fonce); color: #fff; border-color: var(--vert-fonce); }
.element-colonne { flex-direction: column; align-items: stretch; gap: 8px; }
.rangee-element { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.actions-element { display: flex; flex-wrap: wrap; gap: 8px; }
.zone-acheteur:empty { display: none; }
.demande { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .12); }
.demande p { margin: 0; }

/* --- Reservation d'un panier par un visiteur ------------------------------ */

.recap-panier { background: #F1F6F3; border-radius: 12px; padding: 14px 16px; }
.recap-panier > div { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; }
.recap-panier p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--texte-secondaire); }
.compte-a-rebours { margin: 0; font-size: 16px; color: var(--ambre-texte); }
.compte-a-rebours strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.encart-engagement {
  background: var(--ambre-pale); border: 2px solid var(--ambre); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.encart-engagement h3 { margin: 0; font-size: 18px; color: var(--ambre-texte); }
.encart-engagement p { margin: 0; font-size: 16px; line-height: 1.45; color: #4A3300; }
.etapes-reservation { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.45; }

/* --- Carrousel de photos (page d'accueil) --------------------------------- */

#carrousel-photos { padding: 16px; }

/* --- Pages legales (mentions-legales.html, confidentialite.html) --------------- */

.texte-legal { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.55; }
.texte-legal h2 { margin: 12px 0 0; font-size: 19px; color: var(--vert-fonce); }
.texte-legal p, .texte-legal ul { margin: 0; }
.texte-legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.texte-legal dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.texte-legal dt { font-weight: 700; }
.texte-legal dd { margin: 0; }
.texte-legal a { color: var(--vert-principal); }
.texte-legal .mise-a-jour { font-size: 14px; color: var(--texte-secondaire); }
@media (max-width: 420px) { .texte-legal dl { grid-template-columns: 1fr; } .texte-legal dd { margin-bottom: 6px; } }
.carrousel { position: relative; border-radius: 18px; overflow: hidden; background: #E4EBE6; }
.carrousel-piste {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste:focus-visible { outline: 3px solid #2D6A4F; outline-offset: -3px; }
.carrousel-diapo { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
.carrousel-diapo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrousel-legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 30px; font-size: 15px; line-height: 1.3; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
.carrousel-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #1F4D39; background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.carrousel-precedent { left: 10px; }
.carrousel-suivant { right: 10px; }
@media (prefers-reduced-motion: reduce) { .carrousel-piste { scroll-behavior: auto; } }

/* --- Formulaire a l'interieur d'une carte -------------------------------- */

/* La maquette met les champs directement dans la carte ; un vrai <form> doit
   reprendre le meme espacement vertical. */
.formulaire-colonne { display: flex; flex-direction: column; gap: var(--espace-moyen); }

/* Un bouton qui se comporte comme le lien de la maquette (.lien-texte). */
button.lien-texte {
  padding: 0;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
button.lien-texte:hover { color: var(--vert-fonce); text-decoration: underline; }

/* Etat desactive : la maquette ne le dessine pas, or un bouton inactif qui a
   l'air actif fait croire a une panne (« J'accepte » avant d'avoir coche la
   case, « Enregistrer » avant d'avoir confirme le mot de passe). */
.bouton-principal:disabled,
.bouton-secondaire:disabled,
.bouton-ambre:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.bouton-principal:disabled:hover { background: var(--vert-principal); }

/* Champ present pour les gestionnaires de mots de passe (il leur faut un
   identifiant a associer au mot de passe), invisible pour l'utilisateur. */
.cache-visuellement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Un ecran imbrique dans un autre (l'administration dans l'espace membre) ne
   doit pas doubler la marge exterieure. */
.corps-imbrique { padding: 0; }

/* Aide sous un champ, quand elle signale un probleme. */
.champ-aide.erreur { color: #8A2B1E; font-weight: 700; }

/* --- Barre de navigation de l'espace membre ------------------------------ */

/* La maquette la dessine en bas de l'ecran ; dans une page qui defile, elle
   doit rester fixee, dans la colonne de l'application et au-dessus de la barre
   de geste des telephones recents. */
.barre-navigation {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--largeur-app);
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 14px rgba(26, 40, 32, .08);
}

/* Le contenu ne doit pas passer sous la barre. */
#contenu-membre { padding-bottom: 104px; }

/* =============================================================================
   RESPONSIVE — telephone d'abord, puis tablette et bureau, par paliers de
   largeur. Ce bloc reste en fin de fichier : il surcharge des regles definies
   plus haut. Aucune de ces regles ne depend du type de pointeur (souris ou
   tactile) : une tablette et un ordinateur a la meme largeur de fenetre voient
   la meme mise en page — seule la largeur disponible compte. */

/* Tablette (portrait) et petit ecran d'ordinateur : colonne plus large, tuiles
   sur une ligne, photo moins haute. */
@media (min-width: 700px) {
  :root { --largeur-app: 720px; }
  .tuiles { grid-template-columns: repeat(4, 1fr); }
  .tuile { min-height: 150px; }
  .carrousel-diapo { aspect-ratio: 16 / 9; }
  .voile-photo h1 { font-size: 30px; }
  .voile-photo p { font-size: 18px; max-width: 46ch; }
  .corps-ecran { padding: 22px 28px; }
  .entete-compacte, .entete-publique { padding-left: 28px; padding-right: 28px; }
  .actions-entete { max-width: 460px; }
  .carte-formulaire { padding: 24px 28px; }
  #contenu-membre { padding-bottom: 110px; }
}

/* Tablette (paysage) et ecran d'ordinateur : un peu plus large encore, sans
   jamais s'etaler — la colonne reste confortable a lire, comme sur telephone. */
@media (min-width: 1000px) {
  :root { --largeur-app: 840px; }
}

/* =============================================================================
   BUREAU (1100px et plus) — vraie mise en page d'ordinateur, pas seulement une
   colonne mobile elargie. L'espace adherent gagne une navigation LATERALE,
   fixee a gauche de l'ecran, a la place de la barre du bas ; le contenu se
   centre dans l'espace restant. Un visiteur non connecte (accueil public,
   connexion) garde la colonne centree simple, juste un peu plus large.
   `body[data-adherent="1"]` est le repere deja utilise par ui.js/main.js pour
   savoir si la navigation doit exister : on s'y accroche pour rester en phase.
   ============================================================================= */
:root { --largeur-nav-laterale: 232px; --marge-bureau: 48px; }

@media (min-width: 1100px) {
  :root { --largeur-app: 880px; }

  /* La colonne (#app) se centre normalement dans TOUTE la largeur de la page ;
     en reservant la bande de gauche au niveau du corps de page, elle se
     recentre toute seule dans l'espace qui reste, a droite de la navigation.
     Une marge est AUSSI reservee des deux cotes (`--marge-bureau`) : un
     ordinateur annonce sa resolution en pixels PHYSIQUES (1920, 2560…), mais
     la mise a l'echelle de Windows (125 %, 150 %…, tres frequente sur les
     ecrans de portable) reduit la largeur reellement disponible pour le site.
     Sans cette marge garantie, la colonne peut coller aux bords sur un
     portable annonce en 1920 ou 2560 mais affichant en realite une largeur
     bien plus etroite. Avec elle, l'espace autour du contenu reste toujours
     confortable, quelle que soit cette largeur reelle. */
  body[data-adherent="1"] {
    padding-left: calc(var(--largeur-nav-laterale) + var(--marge-bureau));
    padding-right: var(--marge-bureau);
  }

  /* La barre du bas devient une colonne de gauche, fixee sur toute la hauteur. */
  body[data-adherent="1"] .barre-navigation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--largeur-nav-laterale);
    max-width: none;
    transform: none;
    padding: var(--espace-grand) var(--espace-petit);
    border-top: 0;
    border-right: 1px solid var(--bordure);
    box-shadow: 4px 0 14px rgba(26, 40, 32, .06);
  }
  /* Cinq entrees (administrateur) : une colonne les accueille sans se serrer,
     contrairement a la barre du bas qui devait retrecir chaque onglet. */
  body[data-adherent="1"] .barre-navigation-administrateur { grid-template-columns: none; }
  body[data-adherent="1"] .barre-navigation-administrateur .onglet-navigation,
  body[data-adherent="1"] .barre-navigation .onglet-navigation {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 52px;
    font-size: 16px;
    padding: 10px var(--espace-moyen);
    border-top: 0;
    border-left: 4px solid transparent;
    border-radius: 0 var(--rayon-bouton) var(--rayon-bouton) 0;
  }
  body[data-adherent="1"] .barre-navigation .onglet-navigation-actif {
    border-top: 0;
    border-left-color: var(--vert-principal);
  }
  /* Plus de barre fixee en bas a compenser : le contenu retrouve un padding normal. */
  body[data-adherent="1"] #contenu-membre { padding-bottom: var(--espace-grand); }
}

/* Grand ecran d'ordinateur (1920px de large et plus, au zoom habituel) : encore
   un peu de place pour le contenu, et un fond bien visible de part et d'autre
   de la colonne (voir le halo sur #app plus haut) — la navigation laterale,
   elle, ne s'elargit pas : elle n'a pas besoin de plus de place. */
@media (min-width: 1600px) {
  :root { --largeur-app: 1000px; }
  .carrousel-diapo { aspect-ratio: 21 / 9; }
}

/* Petits telephones : rien ne doit deborder. */
@media (max-width: 360px) {
  .voile-photo h1 { font-size: 22px; }
  .voile-photo p { font-size: 15px; }
  .tuile-nombre { font-size: 34px; }
  .tuile { padding: 12px; min-height: 128px; }
  .rangee-marque { gap: 8px; }
  .lien-connexion, .lien-adherer { font-size: 14px; }
  .onglet-navigation { font-size: 12px; }
}

/* Aucun defilement horizontal de la page ; les tableaux defilent dans leur cadre. */
html, body { overflow-x: hidden; }
img { max-width: 100%; }