/* ============================================================================
   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{
  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-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}

/* ---------- 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}
.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(3,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(4,1fr) }
.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 ------------------------------------------- */

#app {
  max-width: 480px;
  min-height: 100vh;
  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); }
}

/* --- 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; }

/* --- 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 16px 0; }
.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; }
.carrousel-points { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.carrousel-point { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.carrousel-point.actif { background: #fff; }
@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: 480px;
  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; }
/* Connecte, l'accueil porte aussi la barre : meme marge. */
body[data-adherent="1"] #ecran-accueil { padding-bottom: 104px; }