/* Les deux polices de parrain-ami.org, toutes deux libres (SIL OFL) :
   Poppins pour les titres, Roboto pour le texte courant. Elles sont servies
   DEPUIS CE SITE, jamais depuis un CDN — aucune requete ne part vers un tiers,
   ce que promet l'article 11 des CGV, et la politique de contenu n'autorise
   de toute facon que « font-src 'self' ». Voir static/fonts/LICENCES.txt.

   « ?v=1 » n'est pas decoratif : sans lui, ces fichiers ne seraient gardes que
   cinq minutes en cache (voir static.go). A incrementer si une police change.
   « swap » : le texte s'affiche tout de suite dans la police de secours, puis
   se recompose — jamais de page blanche le temps du telechargement. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2?v=1") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.woff2?v=1") format("woff2");
  font-weight: 100 900;   /* fichier variable : un seul pour toutes les graisses */
  font-style: normal;
  font-display: swap;
}

/* Feuille de style unique du site de reservation.

   Les couleurs sont declarees une fois ici, en variables : changer la palette
   d'un site revient a changer ces deux blocs, celui du theme clair et celui du
   theme sombre. Tout le reste du fichier est commun a tous les sites. */

:root {
  /* La charte est celle de parrain-ami.org, relevee sur leur site : TOUT est
     sur fond blanc, les titres sont en vert fonce, et quelques elements en
     rouge framboise. Trois couleurs, pas une de plus.

     Consequence a garder en tete : il n'y a plus de bandeau sombre. La
     banniere et le pied sont blancs comme le reste, et ce sont les filets et
     la couleur du texte qui decoupent la page. */
  --fond: #ffffff;
  --fond-carte: #ffffff;
  --fond-appui: #f4f9ec;
  --texte: #282626;           /* le gris tres fonce de leurs textes */
  --texte-doux: #5f6b58;
  --accent: #39791f;          /* leur vert fonce : titres, liens */
  --accent-fonce: #2b5c16;
  --accent-clair: #eef6e3;
  --accent-vif: #80bd26;      /* leur vert clair : la jauge, les filets */
  --rouge: #e31963;           /* leur framboise : l'appel a reserver */
  --rouge-fonce: #b81250;
  --rouge-clair: #fdecf2;
  --bord: #e0e6d8;
  --rayon: 12px;
  --largeur: 62rem;
  --police: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titres: "Poppins", "Roboto", system-ui, sans-serif;
  /* Le site est CLAIR, pour tout le monde. La charte de l'ASBL n'a pas de
     variante sombre, et un site de reservation qui change de couleurs selon le
     reglage du visiteur ne ressemblerait plus au sien.

     Cette ligne n'est pas decorative : sans elle, le navigateur d'un visiteur
     en theme sombre peindrait les champs de saisie, les listes deroulantes et
     les ascenseurs en sombre au milieu d'une page blanche. */
  color-scheme: light;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* Sur leur site, tous les titres sont verts, et en Poppins demi-gras. Poppins
   est large : 600 suffit la ou le modele montait a 650. */
h1, h2, h3 {
  font-family: var(--police-titres);
  line-height: 1.2;
  font-weight: 600;
  color: var(--accent);
}
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 .6rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--accent-clair);
  padding: .1em .35em;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
}
.evitement:focus { left: .5rem; top: .5rem; z-index: 10; }

/* En-tete ------------------------------------------------------------- */
.entete { background: var(--fond-carte); border-bottom: 1px solid var(--bord); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.marque {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
}


/* Le pictogramme du logo de l'ASBL, detoure sur fond transparent. Le nom est
   ecrit a cote, en toutes lettres : inutile d'y remettre le texte du logo, qui
   serait illisible a cette taille.

   Hauteur fixee, largeur libre : l'image est plus haute que large, la contraindre
   dans un carre l'ecraserait. Pas de coins arrondis non plus — il n'y a pas de
   fond a arrondir. */
.marque__logo {
  flex: none;
  height: 52px;
  width: auto;
}

@media (max-width: 34rem) {
  .marque__logo { height: 44px; }
}

/* Le nom et sa ligne de dessous respirent : sans cet interligne, les deux se
   touchaient. */
.marque__texte {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.marque__nom { line-height: 1.1; }

.marque__sous {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu__liste { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.menu__liste a { text-decoration: none; color: var(--texte-doux); padding: .2rem 0; }
.menu__liste a:hover,
.menu__liste a[aria-current="page"] {
  color: var(--texte);
  border-bottom: 2px solid var(--accent);
}

.menu__bouton { display: none; }

@media (max-width: 40rem) {
  .menu__bouton[hidden] { display: none; }
  .menu__bouton {
    display: block;
    font: inherit;
    color: var(--texte);
    background: var(--fond-appui);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .35rem .9rem;
    cursor: pointer;
  }
  .menu[hidden] { display: none; }
  .menu { width: 100%; }
  .menu__liste { flex-direction: column; gap: .5rem; }
}

/* Banniere ------------------------------------------------------------ */
/* Blanche, comme le reste de la page. Ce qui la distingue, c'est l'espace et
   la taille du titre, pas un aplat de couleur. */
.banniere {
  background: var(--fond);
  color: var(--texte);
  padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* Bannière avec photo de fond. L'empilement compte : photo en -2, voile en
   -1, texte au-dessus. Avec les deux en -1, c'est l'ordre du document qui
   tranche — le voile (::before) est genere AVANT l'image, qui se peindrait
   donc par-dessus et le masquerait entierement. */
/* Avec une photo, la banniere n'a plus d'aplat de couleur : c'est lui qui
   restait sombre au raccord avec la page. Sans photo, .banniere garde son
   fond. */
.banniere--photo {
  position: relative;
  isolation: isolate;
  background: none;
}

.banniere__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;

  /* La photo se dissout dans le dernier quart de la banniere. Le meme masque
     est pose sur le voile, juste dessous : les deux s'effacent ensemble, et ce
     qui apparait alors n'est pas un fond de secours, c'est la page. Sans cela,
     l'aplat sombre de .banniere affleure au raccord, et aucun degrade pose
     par-dessus ne le rattrape — on ne fait qu'etaler la bande. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
  mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
}

/* Un voile sombre, sans quoi le texte devient illisible des que la photo est
   claire. A ajuster selon les photos du client : plus dense s'il envoie des
   ciels et des fleurs au soleil. */
.banniere--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  /* Le meme masque que la photo : ils s'effacent du meme pas. Voir
     .banniere__fond. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
  mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
  background: linear-gradient(90deg, #00000099 0%, #0000007a 60%, #00000040 100%);
}

.banniere--photo h1 { color: #fff; }
.banniere--photo h1,
.banniere--photo .surtitre,
.banniere--photo .accroche { text-shadow: 0 1px 3px #0000008c; }

.banniere__texte { max-width: 42rem; }
.banniere h1 { color: var(--accent); }

.surtitre {
  margin: 0 0 .5rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rouge);
  font-weight: 650;
}

.banniere .accroche { color: var(--texte-doux); font-size: 1.15rem; }
.banniere__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Bande de chiffres --------------------------------------------------- */
.bande {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.bande__chiffre { flex: 0 0 auto; }
.bande__chiffre p { margin: 0; color: var(--texte-doux); max-width: 14rem; }
.chiffre { font-size: 2.4rem; font-weight: 750; color: var(--accent); line-height: 1; }
.bande__texte { flex: 1 1 22rem; margin: 0; font-size: 1.1rem; }

/* Cartes -------------------------------------------------------------- */
.cartes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.carte p { margin: 0; color: var(--texte-doux); }
.carte--accent { border-color: var(--accent); background: var(--accent-clair); }
.carte--accent p { color: var(--texte); }
.lien-fort { font-weight: 650; }

/* Interventions ------------------------------------------------------- */
.titre-page { padding-top: 2.5rem; }
.accroche { font-size: 1.15rem; color: var(--texte-doux); max-width: 40rem; }

.publics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 1.5rem;
}

.public {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.public h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.public p { margin: 0 0 .7rem; color: var(--texte-doux); }

.avertissement {
  font-weight: 650;
  color: var(--accent-fonce) !important;
  background: var(--accent-clair);
  border-radius: 6px;
  padding: .4rem .7rem;
  display: inline-block;
}

/* Temoignages et galerie ---------------------------------------------- */
.temoignages, .galerie__grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.temoignage, .galerie figure {
  margin: 0;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
}

.temoignage img, .galerie img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
  background: var(--fond-appui);
}

/* Un temoignage sans photo : on remplace l'image par un filet d'accent, pour
   qu'il ait l'air voulu a cote de ceux qui en ont une. */
.temoignage--sans-photo {
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* sans image, le texte se centre plutot que de
                                laisser un vide sous lui */
}

.temoignage blockquote { margin: 0; padding: 1rem 1.2rem .3rem; font-size: .98rem; }
.temoignage figcaption, .galerie figcaption {
  padding: 0 1.2rem 1.1rem;
  color: var(--texte-doux);
  font-size: .88rem;
}
.galerie figcaption { padding-top: .8rem; }

.note { color: var(--texte-doux); font-size: .92rem; }

/* En attendant les photographies : une zone qui annonce ce qui viendra,
   plutot qu'un blanc qui ressemble a une panne. */
.galerie .note, .galerie__grille .note {
  display: block;
  border: 1px dashed var(--bord);
  border-radius: var(--rayon);
  padding: 1.75rem;
  text-align: center;
  background: var(--fond-carte);
}

.appel {
  background: var(--fond-appui);
  border-radius: var(--rayon);
  padding: 1.75rem;
  margin: 3rem auto;
  text-align: center;
}
.appel h2 { margin-top: 0; }

/* Contact ------------------------------------------------------------- */
/* Coordonnees et encart d'adresse a gauche, l'un sous l'autre ; le plan a
   droite, un peu plus large : c'est lui qui a besoin de place. */
.contact {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  padding-bottom: 3rem;
}

@media (max-width: 46rem) {
  .contact { grid-template-columns: 1fr; }
}

.contact__coordonnees {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem;
}
.contact__principal .contact__coordonnees { margin-top: 2rem; }
.contact__coordonnees h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.contact__coordonnees p { margin: 0 0 .7rem; }

/* Coordonnees et reseaux ---------------------------------------------- */
.coordonnees { margin: 0; }
.coordonnees dt {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 650;
  margin-top: 1.75rem;
}
.coordonnees dt:first-child { margin-top: 0; }
.coordonnees dd { margin: .2rem 0 0; }

.gros-lien a, a.gros-lien {
  font-size: 1.3rem;
  font-weight: 650;
  text-decoration: none;
}
.gros-lien a:hover, a.gros-lien:hover { text-decoration: underline; }

.reseaux {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
}

.reseaux a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-weight: 600;
}
.reseaux a:hover { text-decoration: underline; }

.reseaux__icone { width: 1.25em; height: 1.25em; flex: none; }

/* Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-block;
  padding: .65rem 1.3rem;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  border: 2px solid var(--accent);
  cursor: pointer;
  font-family: inherit;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

/* Le bouton d'appel : le seul rouge un peu large de la page, reserve a
   l'action qu'on est venu faire — reserver, payer. Les boutons ordinaires,
   y compris ceux de l'administration, restent verts : un « Enregistrer »
   rouge inquiete pour rien. */
.bouton--appel { background: var(--rouge); border-color: var(--rouge); }
.bouton--appel:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

/* Le bouton creux vit maintenant sur du blanc : vert sur blanc, et non plus
   blanc sur sombre. Il redevient blanc au-dessus d'une photo, seul endroit
   sombre qui reste. */
.bouton--creux {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.bouton--creux:hover { background: var(--accent-clair); }

/* ---------- l'ecran de porte, et le billet ---------- */

/* Un bouton qu'on touche du pouce, debout, sans regarder : c'est celui de
   l'ecran de porte. */
.bouton--large {
  display: block;
  width: 100%;
  padding: 1.1rem;
  font-size: 1.25rem;
  margin: 1.5rem 0;
}
/* Depointer est une correction, pas l'action courante : le bouton ne doit pas
   appeler le pouce comme celui qui pointe. */
.bouton--sobre {
  background: transparent;
  color: var(--texte-doux);
  border-color: var(--bord);
}
.bouton--sobre:hover { background: var(--fond-appui); border-color: var(--texte-doux); }

/* L'ecran de porte se lit a bout de bras, dans une file, parfois en plein
   courant d'air. Tout y est plus gros qu'ailleurs, et il y a peu de choses. */
.porte { max-width: 32rem; padding-top: 1.5rem; padding-bottom: 3rem; }
.porte__fait { margin-bottom: 1.5rem; }
.porte__reference {
  margin: 0;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.porte__nom { margin: .2rem 0 .3rem; font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.1; }
.porte__places { margin: 0; font-size: 1.2rem; color: var(--texte-doux); }

/* L'etat du paiement : la seule chose qu'on puisse avoir besoin de reclamer. */
.porte__etat {
  margin: 1.2rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--rayon);
  font-size: 1.3rem;
  font-weight: 600;
}
.porte__etat--ok { background: var(--accent-clair); color: var(--accent-fonce); }
.porte__etat--du { background: var(--rouge-clair); color: var(--rouge-fonce); }

/* Le second scan du meme billet. Il ne bloque rien — il previent. */
.porte__deja {
  margin: 1.2rem 0 0;
  padding: .8rem 1rem;
  border: 2px solid var(--rouge);
  border-radius: var(--rayon);
  color: var(--rouge-fonce);
}

.porte__detail { margin-top: 2rem; font-size: .95rem; }

/* La recherche de la porte et ses resultats. Les lignes sont hautes : on les
   touche du pouce, debout, et une erreur de doigt fait entrer la mauvaise
   personne. */
.porte__recherche { margin: 2rem 0 1rem; }
.porte__recherche input { font-size: 1.1rem; }

.porte__trouves { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.porte__trouves li { border-bottom: 1px solid var(--bord); }
.porte__trouves a {
  display: block;
  padding: .9rem .2rem;
  text-decoration: none;
  color: inherit;
}
.porte__trouves a:hover, .porte__trouves a:focus { background: var(--fond-appui); }
.porte__trouves strong { display: block; font-size: 1.15rem; color: var(--accent); }
.porte__trouves .note { display: block; margin-top: .15rem; }

/* Le plan de la salle, sur la page Contact. Un titre et une mise en garde :
   l'adresse de l'association figure juste au-dessus, et les deux ne sont pas au
   meme endroit. */
.plan-salle { margin-top: 2.5rem; }
.plan-salle h2 { margin-bottom: .3rem; }
.plan-salle > .note { margin-top: 0; }
.plan-salle .plan { margin-top: 1.2rem; }

/* Le mode d'emploi replie. Il sert la premiere fois et plus jamais : il ne doit
   pas s'interposer entre le benevole et ses trois boutons. */
.porte__aide { margin: 2rem 0; border-top: 1px solid var(--bord); padding-top: 1rem; }
.porte__aide summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.porte__aide ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.porte__aide li { margin-bottom: .4rem; }

/* L'adresse courte, a lire et a dicter : elle doit se detacher du texte. */
.porte__adresse {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin: .6rem 0;
}

/* Le lien personnel d'un benevole : long, a copier d'un geste, jamais a lire. */
.commande .champ input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
}
.porte__retour { margin-top: 2rem; }

/* Le billet, sur la page de suivi. Le QR est peint en noir sur blanc dans le
   SVG lui-meme : il ne suit NI le theme sombre, NI l'impression en nuances de
   gris. Un code aux couleurs inversees n'est pas lu par une partie des
   telephones, et c'est le genre de defaut qu'on decouvre devant la file. */
.billet { margin: 2rem 0; text-align: center; }
.billet .qr {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
/* La consigne compte autant que le code : sans elle, quelqu'un attend un
   billet par courriel qui n'arrivera pas. Elle est donc lisible, alignee a
   gauche sous le code, et pas en petits caracteres de legende. */
.billet figcaption {
  margin: .8rem auto 0;
  max-width: 28rem;
  font-size: .95rem;
  text-align: left;
  color: var(--texte);
}

.banniere--photo .bouton--creux { color: #fff; border-color: #ffffffb3; }
.banniere--photo .bouton--creux:hover { background: #ffffff1a; border-color: #fff; }

/* Pied ---------------------------------------------------------------- */
/* Blanc lui aussi. Un filet vert le separe du contenu : c'est tout ce qu'il
   faut pour qu'on voie ou finit la page. */
.pied {
  background: var(--fond);
  color: var(--texte-doux);
  margin-top: 3rem;
  border-top: 3px solid var(--accent-vif);
  padding: 2.25rem 0 1.25rem;
  font-size: .95rem;
}

.pied a { color: var(--accent); }
.pied p { margin: 0 0 .3rem; }
.pied__nom { font-weight: 700; color: var(--accent); font-size: 1.05rem; }

.pied__grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 1.5rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--bord);
  padding-top: 1rem;
}

/* Version et date de compilation : presentes mais discretes. Pour les retirer,
   supprimer ce bloc et le paragraphe correspondant dans partials/pied.html. */
.pied__version { font-size: .8rem; opacity: .7; }

/* Formulaires ---------------------------------------------------------- */
.champs {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.champ { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ--case { flex-direction: row; align-items: flex-start; gap: .5rem; }
.champ--case label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.requis { color: var(--accent); }

.champ input, .champ textarea, .champ select {
  font: inherit;
  color: var(--texte);
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: .6rem .7rem;
  width: 100%;
}

/* Cases et boutons radio : la largeur de 100 % ci-dessus est faite pour les
   champs de saisie, elle etirerait un bouton radio en travers du formulaire. */
.champ input[type="checkbox"],
.champ input[type="radio"] { width: auto; }

/* Un groupe de choix n'est pas un champ encadre : la bordure du fieldset
   ferait un cadre dans le cadre. */
fieldset.champ { border: none; padding: 0; margin-inline: 0; }
/* Un champ de fichier ne se met pas en boite comme les autres : le bouton du
   navigateur a deja son propre cadre. */
.champ input[type="file"] { border: none; background: none; padding: .3rem 0; }

.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.piege { position: absolute; left: -9999px; }

/* Lu par les lecteurs d'ecran, invisible a l'oeil. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.message { border-radius: var(--rayon); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.message p { margin: 0 0 .4rem; }
.message p:last-child { margin-bottom: 0; }
.message ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.message--ok { background: var(--accent-clair); border: 1px solid #c3dc9c; color: var(--accent-fonce); }
.message--erreur { background: var(--rouge-clair); border: 1px solid var(--rouge); color: var(--rouge-fonce); }

/* Tableaux : formules, lignes de reservation ----------------------------------------------- */
.catalogue { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.catalogue th, .catalogue td {
  text-align: left;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.catalogue thead th {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.catalogue .col-prix { text-align: right; white-space: nowrap; }
/* Nettement plus etroite qu'avant (7rem), mais pas au point de tronquer : a
   3,5rem, un nombre a deux chiffres passait sous les fleches du navigateur.
   4,5rem laisse la place a deux chiffres bien lisibles. L'en-tete reste « Qté »,
   et la place gagnee revient au nom du produit. */
.catalogue .col-qte { width: 4.5rem; }
.catalogue .col-qte input { width: 100%; padding-left: .5rem; padding-right: .3rem; }
.catalogue tfoot td { border-bottom: none; padding-top: .9rem; }
.unite { color: var(--texte-doux); font-weight: 400; }
.indispo { opacity: .55; }

/* Administration ------------------------------------------------------- */
.admin-barre {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  padding: .7rem 0;
  margin-top: 1rem;
}
.admin-barre nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.admin-barre a { text-decoration: none; color: var(--texte-doux); font-weight: 600; }
.admin-barre a:hover, .admin-barre a[aria-current="page"] { color: var(--accent); }

.admin-form {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.25rem 1.25rem .5rem;
}

.admin-connexion { max-width: 22rem; padding-bottom: 4rem; }

.lien-bouton {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.lien-bouton--danger { color: var(--rouge-fonce); }
.col-actions { white-space: nowrap; }
.col-actions form { display: inline; margin-left: .6rem; }
.col-actions a { margin-right: 0; }


/* En-tete collant : sur les pages longues — galeries, catalogue — on garde la
   navigation sous la main sans devoir remonter.
   z-index 20 : au-dessus du contenu, mais sous la visionneuse de galerie (50),
   qui doit pouvoir le recouvrir.
   max-height : sur telephone, le menu deplie pourrait depasser l'ecran ; il
   devient defilant plutot que de tout recouvrir. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  max-height: 100vh;
  overflow-y: auto;
}

/* Une cible d'ancre ne doit pas se retrouver cachee derriere l'en-tete. */
:target { scroll-margin-top: 6rem; }


/* ---------- vignettes de photos ---------- */

.catalogue .col-photo { width: 8rem; padding-right: 0; }

.vignette {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--fond-appui);
}

.catalogue--admin .vignette { width: 56px; height: 56px; }

.vignette--grande { width: 120px; height: 120px; }

.photo-actuelle { margin-top: -.6rem; }


@media (max-width: 34rem) {
  /* Sur telephone, la colonne des photos mangerait la place du nom. */
  .catalogue .col-photo { width: 5rem; }
  .vignette { width: 70px; height: 70px; }
  .catalogue--admin .vignette { width: 48px; height: 48px; }
}

/* ---------- visionneuse ---------- */

/* La photo s'affiche par-dessus la page. Meme principe que sur ateliersweyne :
   le lien fonctionne sans JavaScript, le script ne fait qu'intercepter. */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  background: #000000ee;
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--rayon); }
.visionneuse figcaption { color: #eef5e6; font-size: .95rem; text-align: center; }

.visionneuse__fermer, .visionneuse__precedent, .visionneuse__suivant {
  position: absolute;
  background: #ffffff1f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.75rem; height: 2.75rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__precedent { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suivant { right: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse button:hover { background: #ffffff38; }
.visionneuse button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- photos des emplacements ---------- */

/* La banniere passe en position relative pour accueillir sa photo de fond. Sans
   photo, rien de tout cela ne s'applique : le fond vert est conserve. */
/* L'empilement compte : photo en -2, voile en -1, texte au-dessus. Avec la
   photo et le voile tous deux en -1, c'est l'ordre du document qui tranche —
   or le voile (::before) est genere AVANT l'image, qui se peignait donc par-
   dessus et le masquait entierement. Le texte reposait sur la photo brute. */
/* Voile dense la ou se trouve le texte (15 a 62 % de la largeur), allege a
   droite ou il n'y en a pas : la photo respire sans sacrifier la lecture.
   Opacites mesurees sur une photo tres claire (ciel, soleil, fleurs saturees),
   au 95e centile de luminosite de la zone de texte : titre 6,6:1, accroche
   5,9:1, surtitre 5:1 — au-dessus du minimum de 4,5:1 pour du texte courant. */
.banniere--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    #1c3516bd 0%,
    #1c3516ad 55%,
    #1c35168c 65%,
    #1c351640 82%,
    #1c351626 100%);
}

/* Sur fond de photo, les teintes grisee et rose de la banniere unie ne
   suffisent plus : on les eclaircit, et une ombre tres douce detache les
   lettres des zones les plus vives (le soleil, les fleurs claires). Les
   boutons ont leur propre fond et n'en ont pas besoin. */
.banniere--photo .accroche { color: #eef5e6; }
.banniere--photo .surtitre { color: #cfe79f; }
.banniere--photo h1 { color: #fff; }
.banniere--photo h1,
.banniere--photo .surtitre,
.banniere--photo .accroche { text-shadow: 0 1px 3px #0000008c; }

/* Sur telephone, le texte occupe toute la largeur : le degrade n'a plus de
   sens, le voile devient uniforme. */
@media (max-width: 48rem) {
  .banniere--photo::before { background: #1c3516b3; }
}

.carte__photo, .public__photo {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 .9rem;
}

.photo-large {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: var(--rayon);
  margin: 1rem 0 0;
}

/* ---------- a propos ---------- */

.apropos {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 1.5rem;
}

.apropos__photo {
  flex: 0 0 18rem;
  width: 18rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}

.apropos__texte { flex: 1; min-width: 0; max-width: 40rem; }
.apropos__texte p:first-child { margin-top: 0; }

@media (max-width: 46rem) {
  .apropos { flex-direction: column; gap: 1.25rem; }
  .apropos__photo { flex: none; width: 100%; max-width: 22rem; }
}

/* Une page de texte : conditions de vente, mentions legales. La largeur est
   limitee parce qu'une ligne de quinze centimetres se lit mal. */
.texte-long { max-width: 44rem; }
.texte-long h2 { margin-top: 2rem; font-size: 1.15rem; }
.identite { font-style: normal; line-height: 1.8; }


/* Les quatre issues du simulateur, alignees. */
.simulateur { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }

/* Un choix : le point, puis le texte, alignes proprement meme sur deux lignes. */
.choix {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem 0;
  border-top: 1px solid var(--bord);
}

.choix input { margin-top: .35rem; }


/* ---------- les reservations, dans l'administration ---------- */

.commande {
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.2rem;
  margin: 0 0 1.5rem;
}

/* Une commande traitee s'efface, sans disparaitre. */
.commande--traitee { border-left-color: var(--bord); opacity: .65; }

.commande__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  align-items: flex-start;
}

.commande__entete h2 { margin: 0; font-size: 1.15rem; }
.commande__etat { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.commande__message { font-style: italic; color: var(--texte-doux); }

.etiquette {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  font-size: .85rem;
  white-space: nowrap;
}

.etiquette--ok { border-color: var(--accent); color: var(--accent-fonce); font-weight: 650; }
.etiquette--attente { border-color: #b8860b; color: #b8860b; }
.etiquette--mode { color: var(--texte-doux); }

.bouton--petit { padding: .35rem .9rem; font-size: .95rem; }

/* ---------- emplacements, dans l'administration ---------- */

.emplacement { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.25rem; }
.emplacement__champs { flex: 1; min-width: 0; }
.emplacement .champ:last-child { margin-bottom: 0; }

/* Le cadre vide montre qu'un emplacement existe et qu'il attend une photo. */
.vignette--vide {
  border: 1px dashed var(--bord);
  background: var(--fond-appui);
}

.sous-titre { margin: 1.5rem 0 .8rem; font-size: 1.05rem; }

@media (max-width: 34rem) {
  .emplacement { flex-direction: column; }
}

/* ---------- bande de photos qui defile ---------- */

.bande-photos { position: relative; margin: 1rem 0 0; }

.bande-photos__piste {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  /* Chaque photo vient se caler au bord : le defilement s'arrete proprement
     plutot qu'a mi-image. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bande-photos__piste li {
  flex: 0 0 auto;
  width: min(20rem, 72vw);
  scroll-snap-align: start;
}

.bande-photos__piste img {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  border-radius: var(--rayon);
  background: var(--fond-appui);
}

.bande-photos__legende {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--texte-doux);
}

.bande-photos__fleche {
  position: absolute;
  top: 7rem; /* le milieu des images, legendes exclues */
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: var(--fond-carte);
  color: var(--texte);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px #0000001f;
}

.bande-photos__fleche[hidden] { display: none; }
.bande-photos__fleche--gauche { left: -.75rem; }
.bande-photos__fleche--droite { right: -.75rem; }
.bande-photos__fleche:hover { background: var(--fond-appui); }
.bande-photos__fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Au doigt, les fleches ne servent a rien et masqueraient une photo. */
@media (hover: none) {
  .bande-photos__fleche { display: none; }
}

@media (max-width: 34rem) {
  .bande-photos__piste img { height: 11rem; }
}

/* ---------- retrait ou livraison ---------- */

.remise {
  margin: 1.5rem 0 1.5rem;
  padding: 1rem 1.2rem 1.1rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}

.remise legend {
  padding: 0 .4rem;
  font-weight: 650;
}

.remise__choix + .remise__choix {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bord);
}

/* Toute la ligne est cliquable, pas seulement le petit rond. */
.remise__option {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  cursor: pointer;
}
.remise__option input { margin-top: .3rem; accent-color: var(--accent); }

/* La precision s'aligne sous le libelle, pas sous le bouton radio. */
.remise__detail { margin: .7rem 0 0 1.6rem; }
.remise__detail[hidden] { display: none; }
.remise__detail .note { margin: .4rem 0 0; }

/* « retrait uniquement » : visible sans crier, a cote du nom du produit. */
.etiquette--retrait {
  margin-left: .35rem;
  background: var(--fond-appui);
  color: var(--texte-doux);
  font-weight: 500;
  vertical-align: .1em;
}

.recap__livraison[hidden], .recap__alerte[hidden] { display: none; }
.recap__alerte { margin-top: .5rem; }

/* Une commande a expedier se repere au premier coup d'oeil dans la liste :
   il y a un colis a peser et un montant a envoyer. */
.etiquette--livraison { background: var(--accent-clair); color: var(--accent-fonce); }

/* ---------- plan d'acces ---------- */

/* « plan » et non « carte » : cette classe-la habille deja les encarts de
   l'accueil, et le plan n'en veut pas le cadre. */
.plan { margin: 0; }
.plan img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-appui);
}
.plan figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--texte-doux);
}

/* Une phrase d'explication sous un champ : elle doit se lire sans peser. */
.aide {
  display: block;
  margin-top: .25rem;
  color: var(--texte-doux);
  font-size: .9rem;
}

/* Un bloc de reglages, encadre, dans l'administration. */
.admin-bloc {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1rem 1.2rem;
  margin: 0 0 1.5rem;
}

.admin-bloc legend {
  padding: 0 .4rem;
  font-weight: 650;
}

/* ---------- le fond de page ---------- */

/* Pas de degrade, pas de halo : le fond est blanc, comme sur parrain-ami.org.
   Ce qui structure la page, ce sont les filets, les cartes et la couleur des
   titres — rien d'autre. */

/* ---------- l'evenement ---------- */

/* Quand, ou, jusqu'a quand : la meme carte sur l'accueil, dans le formulaire
   et dans l'administration. Une definition par ligne, le terme a gauche. */
.evenement {
  margin: 1.2rem 0;
  padding: 0;
  display: grid;
  gap: .1rem 1.2rem;
}

.evenement__ligne {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: .3rem 1.2rem;
  padding: .55rem 0;
  border-top: 1px solid var(--bord);
}

.evenement dt {
  margin: 0;
  color: var(--texte-doux);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: .15rem;
}

.evenement dd { margin: 0; font-weight: 600; }
.evenement dd .note { display: block; font-weight: 400; }

@media (max-width: 34rem) {
  .evenement__ligne { grid-template-columns: 1fr; }
}

/* L'encart qui porte l'appel a reserver, ou le motif de la fermeture. */
.carte-reservation {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem;
  margin: 2rem 0;
}

.carte-reservation > :first-child { margin-top: 0; }
.carte-reservation > :last-child { margin-bottom: 0; }

.infos-pratiques {
  border-top: 1px solid var(--bord);
  padding-top: 1.5rem;
  max-width: 44rem;
}

/* ---------- la jauge de remplissage ---------- */

/* La largeur ne peut pas etre un « style= » en ligne : la politique de
   contenu les interdit, et c'est elle qui protege la page. D'ou onze paliers
   de dix pour cent, que la fonction « palier » choisit (voir render.go).
   L'oeil ne fait pas la difference avec une barre au pour cent pres. */
.jauge { margin: 1.2rem 0; }

.jauge__barre {
  height: .6rem;
  border-radius: 999px;
  background: var(--fond-appui);
  border: 1px solid var(--bord);
  overflow: hidden;
}

.jauge__barre span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-vif);
  border-radius: 999px;
}

.jauge--10 span { width: 10%; }
.jauge--20 span { width: 20%; }
.jauge--30 span { width: 30%; }
.jauge--40 span { width: 40%; }
.jauge--50 span { width: 50%; }
.jauge--60 span { width: 60%; }
.jauge--70 span { width: 70%; }
.jauge--80 span { width: 80%; }
.jauge--90 span { width: 90%; }
.jauge--100 span { width: 100%; }

/* Presque plein : la barre vire a l'orange sans qu'on ait a le dire. */
.jauge--90 span, .jauge--100 span { background: #c47f17; }

.jauge__texte { margin: .5rem 0 0; color: var(--texte-doux); font-size: .95rem; }
.jauge__texte strong { color: var(--texte); }

/* ---------- les formules, dans le formulaire ---------- */

.formules { border: none; padding: 0; margin: 0 0 1.5rem; }
.formules legend { padding: 0; font-weight: 650; font-size: 1.1rem; }

/* Le texte a gauche, prix et quantite a droite. Sur telephone, la meme regle
   qu'au catalogue de la boutique : le texte prend toute la largeur et les
   chiffres passent en dessous — une description ne doit pas s'ecrire dans une
   colonne de deux centimetres. */
.formule {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .9rem 0;
  border-top: 1px solid var(--bord);
}

.formule:last-child { border-bottom: 1px solid var(--bord); }
.formule__texte { flex: 1 1 14rem; min-width: 0; }
.formule__texte label { font-weight: 650; }
.formule__texte .note { margin: .2rem 0 0; }

.formule__chiffres {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-left: auto;
}

.formule__prix { font-weight: 650; white-space: nowrap; }

/* Le champ de quantite ne vit pas dans un .champ : sans cette regle, le
   navigateur lui met un fond blanc, illisible en theme sombre. */
.formule__chiffres input[type="number"] {
  font: inherit;
  color: var(--texte);
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: .5rem .6rem;
  width: 4.8rem;
}

.formule--complete { opacity: .6; }

@media (max-width: 34rem) {
  .formule__texte { flex: 1 1 100%; }
  .formule__chiffres { margin-left: 0; }
}

/* ---------- la page de suivi ---------- */

.suivi__etat { margin: 0 0 1rem; }
.suivi__participants h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.suivi__participants ul { margin: 0; padding-left: 1.2rem; }

/* ---------- le bilan des reservations ---------- */

/* Les trois chiffres que l'organisateur vient verifier, cote a cote. */
.bilan {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.bilan__chiffre { display: flex; flex-direction: column; }
.bilan__chiffre strong { font-size: 1.8rem; line-height: 1.1; }
.bilan__chiffre span { color: var(--texte-doux); font-size: .9rem; }

/* Une formule masquee reste lisible, mais s'efface. */
.ligne--inactive { opacity: .6; }

/* Le total calcule a la volee (voir site.js). Masque tant qu'aucune place
   n'est demandee, et absent si le JavaScript ne tourne pas. */
.formules__total {
  margin: .9rem 0 0;
  font-size: 1.15rem;
  font-weight: 650;
  text-align: right;
}

/* L'etat de l'encaissement, en tete de l'administration. Il doit se voir sans
   qu'on le cherche : c'est le seul endroit ou l'on apprend qu'une cle de test
   encaisse dans le vide. */
.admin-avertissement { margin: 1rem 0 1.5rem; }

/* Le bandeau d'apercu, en tete des pages publiques quand le site est hors
   ligne. Large et rouge : il doit gener un peu, sinon on oublie de rouvrir.

   « bandeau-apercu » et non « apercu » : ce mot sert a deux choses dans ce
   depot. Ici c'est le bandeau du site ferme ; ailleurs — repris du modele
   boutique — c'etait l'apercu d'un texte long coupe a une ligne dans un
   tableau. Les deux ont porte la meme classe, et le « line-clamp: 1 » du
   second tronquait ce bandeau de trois lignes a une seule. La regle de
   troncature est partie, plus aucun gabarit ne s'en servait ; le nom distinct
   est la pour qu'un copier-coller depuis l'autre modele ne la ramene pas. */
/* La largeur demande une ligne de plus que « .conteneur » ne donne. Celui-ci
   ecarte le TEXTE des bords par un padding, ce qui suffit a un bloc sans
   decor ; ici le cadre est visible, et il venait donc toucher les deux bords
   du telephone alors qu'il s'arrete a 62rem et se centre sur un ecran large.
   On lui rend le meme retrait, sous forme de largeur cette fois. */
.bandeau-apercu {
  margin: 1.5rem auto;
  width: calc(100% - 2.5rem);
}