/* La Maison du Coeur - feuille de style du site public.
   Direction "comme les flyers" : les codes des affiches de l'association
   (cartouche blanc arrondi sur la photo, bandeaux violets a encoche, titres
   orange, formes arrondies), en Nunito. */

/* --- Police, hebergee sur le site ---
   Nunito, arrondie comme les lettres du logo. Sous-ensemble latin : il couvre
   le francais (oe lie, euro, guillemets, espace insecable), mais pas l'espace
   fine U+202F. Ne pas l'utiliser dans les contenus. */
@font-face {
  font-family: "Nunito";
  src: url("/polices/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* Le vrai italique, sinon le navigateur penche les lettres droites. */
@font-face {
  font-family: "Nunito";
  src: url("/polices/nunito-italique.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Couleurs du logo et des volets. Les teintes vives ne servent qu'au decor :
     sur fond clair, l'orange du logo n'est pas assez contraste pour du texte. */
  --orange: #fe7002;
  --jaune: #fea700;
  --vert: #72ca74;
  --bleu: #56a9d5;
  --olive: #b4b450;

  /* Teintes lisibles, derivees des precedentes (contraste AA). */
  --orange-titre: #d45400;   /* grands titres seulement (contraste 4,1) */
  --orange-texte: #b34700;
  --orange-bouton: #c24d00;
  --orange-bouton-survol: #a84300;
  --violet: #6a5bb8;         /* violet des bandeaux des flyers, assez fonce
                                pour du texte blanc */

  --encre: #2b2622;
  --encre-douce: #5e554c;
  --fond: #ffffff;
  --sable: #f4f1ea;          /* fond creme des flyers */
  --trait: #e6e1d6;

  --police: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --largeur: 1180px;
  --gouttiere: 24px;
  /* Distance entre le bord de la fenetre et le debut du contenu : sert aux
     blocs qui partent du bord de l'ecran (ouverture de l'accueil) mais dont
     le texte doit rester aligne sur le reste de la page. */
  --decalage: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
  --rayon: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--encre);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.015em;
  color: var(--orange-titre);
}
h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--orange-texte); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 2px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.etroit { max-width: 760px; }

.lien-evitement {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--encre); color: #fff; padding: 10px 16px;
}
.lien-evitement:focus { left: 8px; top: 8px; color: #fff; }

.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Un numero de telephone ne se coupe pas en fin de ligne. */
.tel { white-space: nowrap; }

/* --- Boutons et liens d'action --- */
.bouton {
  display: inline-block;
  padding: .7em 1.35em;
  border: 2px solid var(--orange-bouton);
  border-radius: 999px;
  background: var(--orange-bouton);
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--orange-bouton-survol); border-color: var(--orange-bouton-survol); color: #fff; }
.bouton-contour { background: transparent; border-color: var(--violet); color: var(--violet); }
.bouton-contour:hover { background: var(--violet); border-color: var(--violet); color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.lien-suite { font-weight: 700; }
.liens-suite { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* --- En-tete --- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
/* Le degrade du toit, du logo : bleu, vert, jaune. */
.entete::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--bleu), var(--vert) 50%, var(--jaune));
}
.entete-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 76px;
}
.entete-logo { flex: none; display: block; padding: 6px 0; }
.entete-logo img { width: 155px; height: auto; }

.menu { display: flex; align-items: center; gap: 20px; }
.menu-liens { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.menu-liens a {
  display: block; padding: 8px 9px; white-space: nowrap;
  color: var(--encre); font-size: 1.0625rem; font-weight: 500;
  text-decoration: none;
  border-radius: var(--rayon);
}
.menu-liens a:hover { background: var(--sable); color: var(--encre); }
.menu-liens a[aria-current="page"] {
  color: var(--orange-texte);
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: .45em;
}
.menu-adherer { padding: .5em 1.15em; }

.menu-bouton {
  display: none; align-items: center; gap: 8px;
  padding: 8px 14px; margin-right: -6px;
  background: none; border: 1px solid var(--trait); border-radius: 999px;
  color: var(--encre); font: inherit; font-weight: 700; cursor: pointer;
}
.menu-bouton:hover { background: var(--sable); }
.menu-bouton .ico { width: 22px; height: 22px; }

/* Menu replie sur les ecrans etroits. Sans JavaScript, la classe .js est
   absente : les liens restent alors affiches en clair sous le logo. */
@media (max-width: 1139px) {
  .entete-barre { flex-wrap: wrap; gap: 0 16px; min-height: 68px; }
  .entete-logo img { width: 133px; }
  .menu { flex-wrap: wrap; width: 100%; padding: 4px 0 14px; }
  .menu-liens { flex-wrap: wrap; }

  .js .menu-bouton { display: inline-flex; }
  .js .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 20px;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: 12px var(--gouttiere) 28px;
    background: var(--fond);
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 18px 30px -18px rgba(43, 38, 34, .35);
  }
  .js .menu.ouvert { display: flex; }
  .js .menu-liens { flex-direction: column; align-items: stretch; gap: 0; }
  .js .menu-liens li + li { border-top: 1px solid var(--trait); }
  .js .menu-liens a { padding: 13px 2px; border-radius: 0; font-size: 1.4rem; font-weight: 700; }
  .js .menu-liens a:hover { background: none; color: var(--orange-texte); }
  .js .menu-liens a[aria-current="page"] { text-underline-offset: .3em; }
  .js .menu-adherer { align-self: flex-start; padding: .7em 1.6em; }
}

/* --- Sections --- */
.bloc { padding: clamp(56px, 4rem + 2vw, 104px) 0; }
/* Une section atteinte par un lien (#agenda) ne passe pas sous l'en-tete colle. */
section[id] { scroll-margin-top: 72px; }
.bloc-sable { background: var(--sable); }

/* Titres de section en bandeau violet a encoche, comme sur les flyers. */
.bloc h2 {
  display: inline-block;
  padding: .3em .9em .35em 1.15em;
  background: var(--violet); color: #fff;
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  text-transform: uppercase; letter-spacing: .03em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .6em 50%);
}

.bloc-entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; margin-bottom: 28px;
}
.bloc-entete h2 { margin: 0; }
.bloc-intro { max-width: 46em; color: var(--encre-douce); margin-top: -8px; margin-bottom: 32px; }

/* --- Ouverture de l'accueil ---
   Sur grand ecran : le texte a gauche, la photo du portail a droite, qui file
   jusqu'au bord de l'ecran et s'arrondit du cote du texte. Rien ne passe sur
   la photo. Sur petit ecran : la photo, puis le cartouche blanc qui la
   chevauche, comme le titre des flyers. */
.ouverture { display: grid; }
.ouverture-photo { position: relative; }
.ouverture-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
.ouverture-texte { position: relative; z-index: 1; background: #fff; }
.ouverture-texte h1 { max-width: 11em; margin-bottom: .45em; }
.chapeau { font-size: 1.2rem; line-height: 1.5; color: var(--encre-douce); max-width: 30em; margin-bottom: 1.6em; }

@media (min-width: 960px) {
  .ouverture {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    min-height: min(80vh, 680px);
    padding: 32px 0;
  }
  .ouverture-texte { align-self: center; padding: 24px 56px 24px var(--decalage); }
  .ouverture-photo { border-radius: 48px 0 0 48px; overflow: hidden; }
}
@media (max-width: 959px) {
  .ouverture-photo { order: -1; aspect-ratio: 4 / 3; max-height: 58vh; width: 100%; }
  .ouverture-texte {
    margin: -40px 16px 0 0;
    padding: 28px var(--gouttiere) 8px;
    border-radius: 0 32px 0 0;
  }
}

/* --- Cours de la semaine --- */
.cours-grille {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 72px; align-items: start;
}
.cours-intro p { color: var(--encre-douce); max-width: 26em; }
.cours-photo { margin-top: 32px; }
.cours-photo img { border-radius: var(--rayon); aspect-ratio: 4 / 3; object-fit: cover; }

.semaine { margin: 0; padding: 0; list-style: none; }
.semaine-ligne {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 28px;
  padding: 22px 0; border-bottom: 2px dotted var(--trait);
}
.semaine-quand { margin: 0; display: flex; flex-direction: column; }
.semaine-jour { font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: var(--orange-titre); }
.semaine-heure { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.semaine-cours h3 { font-size: 1.35rem; margin: 0 0 .15em; }
.semaine-cours p { margin: 0; line-height: 1.45; }
.semaine-avec { color: var(--encre-douce); font-size: 1rem; margin-top: .2em !important; }

@media (max-width: 959px) {
  .cours-grille { grid-template-columns: 1fr; }
  .cours-photo { display: none; }
}
@media (max-width: 520px) {
  .semaine-ligne { grid-template-columns: 1fr; }
  .semaine-quand { flex-direction: row; align-items: baseline; gap: 10px; }
}

/* --- Calendrier (js/agenda.js) --- */
.agenda {
  --type-atelier: var(--orange-bouton);
  --type-formation: var(--violet);
  --type-soin: #6e6e22;
  --type-evenement: #2a7099;
  container-type: inline-size;
}

.agenda-outils { display: grid; gap: 14px; margin-bottom: 16px; }
.agenda-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agenda-mois { margin: 0 4px; min-width: 9.5em; font-size: 1.3rem; font-weight: 800; text-align: center; }
.agenda button { font: inherit; cursor: pointer; }
.agenda-fleche, .agenda-retour, .agenda-vues button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: #fff; color: var(--encre); font-weight: 700;
}
.agenda-fleche { width: 40px; padding: 0; }
.agenda-fleche:hover, .agenda-retour:hover, .agenda-vues button:hover { background: var(--sable); }
.agenda-vues { display: inline-flex; margin-left: auto; }
.agenda-vues button:first-child { border-radius: 999px 0 0 999px; }
.agenda-vues button:last-child { border-radius: 0 999px 999px 0; margin-left: -1px; }
.agenda-vues button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }

.agenda-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.agenda-types { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-type {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border: 1px solid var(--trait); border-radius: 999px;
  background: #fff; color: var(--encre); font-size: .95rem; font-weight: 700;
}
.agenda-type .pastille { width: 11px; height: 11px; border-radius: 50%; background: var(--couleur); }
.agenda-type[aria-pressed="false"] { color: var(--encre-douce); text-decoration: line-through; background: var(--sable); }
.agenda-type[aria-pressed="false"] .pastille { background: transparent; box-shadow: inset 0 0 0 2px var(--couleur); }
/* Salles : une seule a la fois. Le bouton radio reste dans la page, pour le
   clavier et les lecteurs d'ecran, mais c'est son libelle qu'on voit. */
.agenda-salles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.agenda-salles legend { float: left; margin-right: 6px; padding: 0; font-weight: 700; font-size: .95rem; }
.agenda-salles label { position: relative; cursor: pointer; }
.agenda-salles input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.agenda-salles span {
  display: inline-block; padding: 5px 14px;
  border: 1px solid var(--trait); border-radius: 999px; background: #fff;
  color: var(--encre); font-size: .95rem; font-weight: 700;
}
.agenda-salles label:hover span { background: var(--sable); }
.agenda-salles input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.agenda-salles input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }

/* Couleur de chaque type, partagee par les filtres, les puces et les fiches. */
.type-atelier { --couleur: var(--type-atelier); }
.type-formation { --couleur: var(--type-formation); }
.type-soin { --couleur: var(--type-soin); }
.type-evenement { --couleur: var(--type-evenement); }
.type-cours { --couleur: #b7ad9b; }

/* Grille du mois */
.agenda-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; }
.agenda-table th {
  padding: 6px 4px; font-size: .85rem; font-weight: 700; color: var(--encre-douce);
  text-transform: uppercase; letter-spacing: .04em; text-align: left;
}
.agenda-table td { height: 118px; padding: 0; vertical-align: top; border: 1px solid var(--trait); }
.agenda-table td.hors-mois { background: #faf8f3; }
.agenda-table td > .agenda-num { display: block; padding: 6px 8px; }
.agenda-num { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.agenda-table td.passe .agenda-num { color: var(--encre-douce); font-weight: 400; }
.agenda-table td.aujourdhui .agenda-num {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin: 3px;
  padding: 0; border-radius: 50%; background: var(--orange-bouton); color: #fff;
}
.agenda-case {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; height: 100%; min-height: 118px; padding: 6px 7px;
  background: none; border: 0; text-align: left; color: var(--encre);
}
.agenda-case:hover { background: #fbf9f4; }
.agenda-case[aria-pressed="true"] { background: #f1eefa; box-shadow: inset 0 0 0 2px var(--violet); }
.agenda-case .agenda-num { padding: 0 2px; }
.agenda-puces { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Intitule sur deux lignes au plus : au-dela, il est coupe et le detail du
   jour le donne en entier. */
.agenda-puce {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  padding: 0 7px; border: 3px solid var(--couleur); border-left-width: 0; border-right-width: 0;
  border-radius: 6px;
  background: var(--couleur); color: #fff;
  font-size: .8rem; font-weight: 600; line-height: 1.3;
}
.agenda-puce.type-cours { background: #f4f1ea; border-color: #f4f1ea; color: var(--encre); box-shadow: 0 0 0 1px #d9d0bf; }
.agenda-plus { font-size: .78rem; font-weight: 700; color: var(--encre-douce); padding-left: 4px; }
.agenda-table td.passe .agenda-puce { opacity: .55; }

/* Detail du jour choisi, insere sous sa semaine, et vue liste */
.agenda-table .agenda-detail-ligne td {
  position: relative; height: auto; padding: 16px 18px 18px;
  background: #f6f4fb; border: 2px solid var(--violet);
}
.agenda-fermer {
  position: absolute; top: 10px; right: 10px;
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--trait); border-radius: 50%; background: #fff; color: var(--encre);
}
.agenda-fermer:hover { background: var(--sable); }
.agenda-detail-ligne .agenda-jour-titre { padding-right: 48px; }
.agenda-detail-ligne .agenda-fiche { background: #fff; }
.agenda-jour-titre { font-size: 1.15rem; margin: 0 0 10px; }
.agenda-liste .agenda-jour-bloc + .agenda-jour-bloc { margin-top: 22px; }
.agenda-fiches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.agenda-fiche {
  padding: 12px 16px 12px 18px; border-radius: 12px;
  background: var(--sable); border-left: 6px solid var(--couleur);
}
.agenda-fiche p { margin: 0; font-size: .98rem; line-height: 1.45; }
.agenda-fiche h5 { font-size: 1.12rem; font-weight: 800; margin: 2px 0 2px; }
.agenda-fiche-type { font-size: .85rem !important; font-weight: 700; color: var(--encre-douce); }
.agenda-fiche-sujet { font-style: italic; color: var(--encre-douce); }
.agenda-fiche-avec { color: var(--encre-douce); }
.agenda-fiche-quand { font-weight: 700; margin-top: 4px !important; }
.agenda-fiche-seance { font-size: .9rem !important; color: var(--encre-douce); }
.agenda-vide { color: var(--encre-douce); padding: 18px 0; margin: 0; }

/* Rendez-vous annule : il reste visible, barre, avec une etiquette. */
.agenda-fiche-etat {
  display: inline-block; margin: 4px 0 2px !important; padding: 1px 10px; border-radius: 999px;
  background: #fbeceb; color: #a1281f; font-size: .85rem !important; font-weight: 800;
}
.agenda-fiche-brouillon { background: #eeeae2; color: var(--encre-douce); }
.agenda-fiche-annulee h5, .agenda-fiche-annulee .agenda-fiche-quand { text-decoration: line-through; color: var(--encre-douce); }
.agenda-puce.annulee { text-decoration: line-through; opacity: .5; }
.agenda-puce.brouillon { opacity: .6; outline: 1px dashed var(--encre-douce); outline-offset: -1px; }
.agenda-fiche-modifier { display: inline-block; margin-top: 6px; font-weight: 800; }

/* Etiquette "Annule" des listes de rendez-vous. */
.etiquette-annule {
  display: inline-block; margin: 0 0 .4em !important; padding: 1px 10px; border-radius: 999px;
  background: #fbeceb; color: #a1281f; font-size: .85rem; font-weight: 800;
}
.atelier-annule h3, .rdv-annule h4 { text-decoration: line-through; color: var(--encre-douce); }
.atelier-annule .atelier-date, .rdv-annule .rdv-date { opacity: .55; }
.rdv.rdv-annule { --couleur: #b8ae9c; }
.semaine-exception { margin-top: .35em !important; font-size: .95rem; font-weight: 700; color: #a1281f; }

/* Liste affichee quand JavaScript n'est pas disponible */
.agenda-repli { margin: 0; padding: 0; list-style: none; }
.agenda-repli li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 2px dotted var(--trait); }
.agenda-repli time { font-weight: 700; color: var(--orange-titre); }

/* Calendrier etroit : les puces deviennent des pastilles de couleur, le
   detail du jour donne les informations. */
@container (max-width: 560px) {
  .agenda-table td { height: 56px; }
  .agenda-table .agenda-detail-ligne td { padding: 12px 10px 14px; }
  .agenda-case { min-height: 56px; align-items: center; padding: 4px 2px; }
  .agenda-table th { text-align: center; font-size: .75rem; letter-spacing: 0; }
  .agenda-table td > .agenda-num { text-align: center; padding: 6px 0; }
  .agenda-puces { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .agenda-puce { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; font-size: 0; }
  .agenda-puce.type-cours { background: var(--couleur); box-shadow: none; }
  .agenda-puce b { display: none; }
  .agenda-plus { display: none; }
  .agenda-mois { min-width: 0; margin: 0; flex: 0 0 calc(100% - 104px); white-space: nowrap; }
  .agenda-retour { order: 1; }
  .agenda-vues { order: 2; }
}

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Prochains ateliers --- */
.ateliers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.atelier {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--rayon);
  box-shadow: 0 2px 14px rgba(60, 50, 30, .08);
  overflow: hidden;
}
.atelier-date {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  padding: 16px 20px;
  background: var(--orange-bouton); color: #fff;
}
.atelier-numero {
  grid-row: 1 / 3;
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  font-variant-numeric: lining-nums;
}
.atelier-jour, .atelier-mois { font-size: 1rem; line-height: 1.25; }
.atelier-jour { align-self: end; }
.atelier-mois { align-self: start; font-weight: 700; }
.atelier-corps { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.atelier-corps h3 { font-size: 1.25rem; margin-bottom: .3em; }
.atelier-corps p { margin: 0 0 .35em; font-size: 1rem; }
.atelier-sujet { color: var(--encre-douce); font-style: italic; }
.atelier-avec { color: var(--encre-douce); }
.atelier-infos { font-weight: 700; padding-top: .4em; }
.atelier-infos .sep { margin: 0 .45em; color: var(--encre-douce); font-weight: 400; }
.atelier-contact { color: var(--encre-douce); margin-bottom: 0 !important; }

@media (max-width: 1079px) {
  .ateliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ateliers { grid-template-columns: 1fr; }
}

/* --- Le lieu --- */
.lieu-grille {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 40px 64px; align-items: center;
}
.lieu-texte p { max-width: 30em; }

/* La salle d'activites a gauche sur deux rangs, la salle de soins et la
   mezzanine empilees a droite, le jardin en bandeau dessous. */
.mosaique {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px;
}
.mosaique figure { position: relative; }
.mosaique img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
/* La grande photo prend la hauteur des deux petites : elle est sortie du flux
   pour ne pas imposer sa propre hauteur aux rangs de la grille. */
.mosaique-grande { grid-row: span 2; }
.mosaique-grande img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.mosaique-large { grid-column: 1 / -1; }
.mosaique-large img { aspect-ratio: 3 / 1; }
.mosaique figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--encre);
  font-size: .9rem; font-weight: 700;
}

@media (max-width: 959px) {
  .lieu-grille { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mosaique-grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .mosaique-large img { aspect-ratio: 2 / 1; }
}

/* --- Soins : cartes creme --- */
.soins {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.soin { background: var(--sable); border-radius: var(--rayon); padding: 24px 26px 22px; }
.soin h3 { margin-bottom: .2em; }
.soin p { margin-bottom: .5em; line-height: 1.5; }
.soin-structure { color: var(--encre-douce); font-style: italic; margin-top: -.2em; }
.soin-dispo { color: var(--encre-douce); }
.soin-tel { font-weight: 700; margin-top: .8em; }

@media (max-width: 959px) {
  .soins { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Association : bande violette pleine, comme le pied des flyers --- */
.bloc-violet { background: var(--violet); color: #fff; }
.bloc-violet h2 { background: #fff; color: var(--violet); }
.association-grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 48px 80px; align-items: start;
}
.citation { margin: 0 0 28px; padding: 0 0 0 24px; border-left: 3px solid var(--jaune); }
.citation p {
  font-style: italic; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
  line-height: 1.45; margin-bottom: .6em;
}
.citation footer { font-size: 1rem; opacity: .85; }

.adhesion { background: #fff; color: var(--encre); border-radius: var(--rayon); padding: 28px 28px 32px; }
.adhesion-prix { font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin-bottom: .4em; }
.adhesion-prix span { display: block; font-size: 1rem; font-weight: 400; color: var(--encre-douce); }

@media (max-width: 959px) {
  .association-grille { grid-template-columns: 1fr; }
}

/* --- Pages interieures ---
   En-tete de page : le titre et son chapeau a gauche, une photo arrondie a
   droite. Les pages sans photo (agenda, contact, textes legaux) n'ont que le
   texte, sur une colonne. */
.page-entete { padding: clamp(36px, 2rem + 2vw, 64px) 0 clamp(40px, 2rem + 2vw, 72px); }
.page-entete-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px 64px; align-items: center;
}
.page-entete h1 { max-width: 12em; margin-bottom: .4em; }
.page-entete .chapeau { margin-bottom: 1.4em; }
.page-entete-court { padding-bottom: 8px; }
.page-entete-court .chapeau { max-width: 38em; }
.page-entete-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 48px 48px 48px 0;
}
/* La section qui suit un en-tete court n'a pas besoin de tout son espace. */
.bloc-haut-reduit { padding-top: clamp(24px, 1rem + 2vw, 48px); }

@media (max-width: 959px) {
  .page-entete-grille { grid-template-columns: 1fr; }
  .page-entete-photo { order: -1; }
  .page-entete-photo img { aspect-ratio: 3 / 2; border-radius: 32px 32px 32px 0; }
}

/* Sommaire de page : pastilles qui menent aux sections. */
.sommaire ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sommaire a {
  display: inline-block; padding: 6px 14px;
  border: 1px solid var(--trait); border-radius: 999px;
  color: var(--encre); font-size: .98rem; font-weight: 700; text-decoration: none;
}
.sommaire a:hover { background: var(--sable); border-color: var(--sable); }
.sommaire a span { color: var(--orange-texte); font-weight: 800; }

/* Deux colonnes de texte, ou texte et photo. */
.deux-colonnes {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 72px; align-items: start;
}
.deux-colonnes-centre { align-items: center; }
@media (max-width: 959px) {
  .deux-colonnes { grid-template-columns: 1fr; }
}

.texte-large { font-size: 1.2rem; line-height: 1.55; }
.petit { font-size: .95rem; color: var(--encre-douce); }
.sous-titre { margin-top: 56px; }

.photo-arrondie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }

.liste-puces { margin: 0 0 1em; padding: 0; list-style: none; }
.liste-puces li { position: relative; padding-left: 1.4em; margin-bottom: .55em; }
.liste-puces li::before {
  content: ""; position: absolute; left: .2em; top: .62em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--orange);
}

.sep { margin: 0 .45em; color: var(--encre-douce); font-weight: 400; }

.actions-fin { justify-content: flex-end; }
.actions-centre { justify-content: center; margin-top: 48px; }
@media (max-width: 959px) {
  .actions-fin { justify-content: flex-start; }
}

/* Sur fond violet : textes, liens et puces en clair. */
.bloc-violet a:not(.bouton) { color: #fff; }
.bloc-violet a:not(.bouton):hover { color: var(--sable); }
.bloc-violet .liste-puces li::before { background: var(--jaune); }
.bloc-violet .photo-arrondie img { box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); }
.bouton-blanc { background: #fff; border-color: #fff; color: var(--violet); }
.bouton-blanc:hover { background: var(--sable); border-color: var(--sable); color: var(--violet); }
.bouton-contour-blanc { background: transparent; border-color: #fff; color: #fff; }
.bouton-contour-blanc:hover { background: #fff; border-color: #fff; color: var(--violet); }

/* Titre de bloc sans bandeau (cartes). */
.bloc h2.titre-simple {
  display: block; padding: 0; background: none; color: var(--encre);
  font-size: 1.5rem; text-transform: none; letter-spacing: 0; clip-path: none;
}

/* --- Activites : une fiche par cours --- */
.fiches-cours { display: grid; gap: 0; margin-top: 8px; }
.fiche-cours {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 8px 40px;
  padding: 32px 0; border-bottom: 2px dotted var(--trait);
  scroll-margin-top: 90px;
}
.fiche-cours-quand { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.fiche-cours-quand .semaine-jour { font-size: 1.6rem; }
.fiche-cours-note {
  align-self: flex-start; margin-top: 8px; padding: 2px 10px;
  border-radius: 999px; background: var(--sable);
  font-size: .85rem; font-weight: 700; color: var(--encre-douce);
}
.fiche-cours-texte { max-width: 44em; }
.fiche-cours-texte h3 { font-size: 1.6rem; margin-bottom: .35em; }
.fiche-cours-texte p { margin-bottom: .6em; }
.fiche-cours-avec { color: var(--encre-douce); }
.fiche-cours-infos { font-weight: 700; }
@media (max-width: 700px) {
  .fiche-cours { grid-template-columns: 1fr; padding: 26px 0; }
  .fiche-cours-quand { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .fiche-cours-note { margin-top: 0; }
}

.ateliers-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1079px) {
  .ateliers-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ateliers-trois { grid-template-columns: 1fr; }
}

/* --- Soins : une carte par praticien --- */
.praticiens {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: 8px;
}
.praticien {
  display: flex; flex-direction: column;
  padding: 26px 26px 24px; border-radius: var(--rayon);
  background: #fff; box-shadow: 0 2px 14px rgba(60, 50, 30, .08);
  border-top: 6px solid var(--olive);
  scroll-margin-top: 90px;
}
.praticien:nth-child(2) { border-top-color: var(--orange); }
.praticien:nth-child(3) { border-top-color: var(--violet); }
.praticien h3 { margin-bottom: .15em; }
.praticien-tete { margin-bottom: 14px; }
.praticien-tete p { margin: 0; }
.praticien-quand { color: var(--encre-douce); margin-top: .5em !important; }
.praticien-soins { margin-bottom: 14px; }
.praticien-plus { font-style: italic; color: var(--encre-douce); }
.praticien-dates { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: var(--sable); }
.praticien-dates p { margin: 0 0 4px; font-weight: 800; }
.praticien-dates ul { margin: 0; padding: 0; list-style: none; }
.praticien-contact { margin: auto 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--trait); }
.praticien-contact li { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; font-weight: 700; }
.praticien-contact .ico { color: var(--encre-douce); }
.praticien-contact a { overflow-wrap: anywhere; }
@media (max-width: 1079px) {
  .praticiens { grid-template-columns: 1fr; }
}

/* --- Galerie : une grande photo et des vignettes --- */
.galerie {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.galerie figure { position: relative; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
.galerie-grande { grid-column: span 2; grid-row: span 2; }
.galerie-grande img { height: 100%; }
.galerie figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--encre);
  font-size: .9rem; font-weight: 700;
}
@media (max-width: 700px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .galerie-grande { grid-column: 1 / -1; grid-row: auto; }
  .galerie-grande img { height: auto; }
  /* Nombre impair de vignettes : la derniere prend toute la largeur plutot
     que de rester seule a gauche. */
  .galerie-grande ~ figure:last-child:nth-child(even) { grid-column: 1 / -1; }
}

.espace-texte { max-width: 44em; margin-bottom: 32px; }
.espace-texte p:last-child { margin-bottom: 0; }

.adresse { font-style: normal; font-size: 1.25rem; font-weight: 700; line-height: 1.5; margin-bottom: 18px; }

/* --- Agenda : liste detaillee des rendez-vous --- */
.mois-titre {
  margin: 40px 0 14px; font-size: 1.5rem; color: var(--orange-titre);
}
.bloc h2 + .mois-titre { margin-top: 20px; }
.rdv-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rdv {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 24px;
  padding: 20px 24px 20px 20px; border-radius: var(--rayon);
  background: var(--sable); border-left: 6px solid var(--couleur);
}
.rdv-date {
  display: flex; flex-direction: column; align-items: center; align-self: start;
  padding: 10px 6px; border-radius: 14px; background: #fff; text-align: center;
}
.rdv-jour, .rdv-mois { font-size: .9rem; line-height: 1.2; color: var(--encre-douce); }
.rdv-mois { font-weight: 700; }
.rdv-numero { font-size: 2.1rem; font-weight: 800; line-height: 1.05; color: var(--encre); }
.rdv-corps { max-width: 48em; }
.rdv-corps h4 { font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin: 2px 0 .3em; }
.rdv-corps p { margin: 0 0 .4em; }
.rdv-sujet { font-style: italic; color: var(--encre-douce); }
.rdv-avec { color: var(--encre-douce); }
.rdv-seances { margin: .2em 0 .6em; padding: 0; list-style: none; font-weight: 700; }
.rdv-seances li { padding: 2px 0; }
.rdv-seances li.passee { color: var(--encre-douce); font-weight: 400; text-decoration: line-through; }
.rdv-infos { font-weight: 700; }
.rdv-type { display: inline-flex; align-items: center; gap: 7px; }
.rdv-type .pastille { width: 11px; height: 11px; border-radius: 50%; background: var(--couleur); }
.rdv-contact { color: var(--encre-douce); }
.rdv.type-atelier { --couleur: var(--orange-bouton); }
.rdv.type-formation { --couleur: var(--violet); }
.rdv.type-evenement { --couleur: #2a7099; }
@media (max-width: 560px) {
  .rdv { grid-template-columns: 1fr; padding: 16px 18px; }
  .rdv-date { flex-direction: row; gap: 6px; align-items: baseline; justify-self: start; margin-bottom: 10px; padding: 4px 12px; }
  .rdv-numero { font-size: 1.15rem; }
}

.rdv-passes { margin-top: 36px; }
.rdv-passes summary {
  display: inline-block; cursor: pointer; padding: 6px 16px;
  border: 1px solid var(--trait); border-radius: 999px; font-weight: 700;
}
.rdv-passes summary:hover { background: var(--sable); }
.rdv-passes ul { margin: 16px 0 0; padding: 0; list-style: none; }
.rdv-passes li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 16px;
  padding: 8px 0; border-bottom: 2px dotted var(--trait); color: var(--encre-douce);
}
.rdv-passes time { font-weight: 700; }
@media (max-width: 560px) {
  .rdv-passes li { grid-template-columns: 1fr; }
}

/* --- Documents a telecharger --- */
.documents { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.document {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--trait);
  color: var(--encre); text-decoration: none;
}
.document:hover { border-color: var(--orange-bouton); color: var(--encre); }
.document .ico { width: 30px; height: 30px; color: var(--orange-bouton); }
.document-nom { display: block; font-weight: 800; line-height: 1.3; }
.document-poids { display: block; font-size: .9rem; color: var(--encre-douce); }
.bloc-violet .document { color: var(--encre); }

/* --- Liseuse de PDF (js/site.js) ---
   Une fenetre presque plein ecran, la barre du titre et des actions en haut,
   le lecteur PDF du navigateur dessous. */
.liseuse-ouverte { overflow: hidden; }
.liseuse {
  display: none; flex-direction: column;
  width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 48px); height: calc(100dvh - 48px);
  max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden;
  background: var(--sable); color: var(--encre);
  box-shadow: 0 24px 60px rgba(43, 38, 34, .35);
}
.liseuse[open] { display: flex; }
.liseuse::backdrop { background: rgba(43, 38, 34, .62); }
.liseuse-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 10px 12px 10px 22px; background: #fff; border-bottom: 1px solid var(--trait);
}
/* Rappel du degrade du toit, comme en haut du site. */
.liseuse-barre { border-top: 4px solid; border-image: linear-gradient(90deg, var(--bleu), var(--vert) 50%, var(--jaune)) 1; }
.liseuse-titre { margin: 0; font-weight: 800; font-size: 1.08rem; line-height: 1.3; min-width: 0; }
.liseuse-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.liseuse-action {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--trait); border-radius: 999px;
  color: var(--encre); font-size: .95rem; font-weight: 700; text-decoration: none;
}
.liseuse-action:hover { background: var(--sable); color: var(--encre); }
.liseuse-telecharger { background: var(--orange-bouton); border-color: var(--orange-bouton); color: #fff; }
.liseuse-telecharger:hover { background: var(--orange-bouton-survol); border-color: var(--orange-bouton-survol); color: #fff; }
.liseuse-fermer {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 4px;
  border: 1px solid var(--trait); border-radius: 50%; background: #fff; color: var(--encre); cursor: pointer;
}
.liseuse-fermer:hover { background: var(--sable); }
.liseuse-fermer .ico { width: 22px; height: 22px; }
.liseuse-cadre { flex: 1; width: 100%; border: 0; background: #e9e5dc; }

@media (max-width: 700px) {
  .liseuse { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .liseuse-barre { flex-wrap: wrap; padding: 8px 10px 8px 16px; }
  /* Le titre et la croix sur la premiere ligne, les deux actions dessous. */
  .liseuse-titre { flex: 1 1 calc(100% - 80px); order: 0; }
  .liseuse-fermer { order: 1; margin-left: 0; }
  .liseuse-actions { display: contents; }
  .liseuse-action { order: 2; flex: 1; justify-content: center; white-space: nowrap; }
}

/* --- Photos des galeries, cliquables (js/site.js) --- */
.agrandissable { overflow: hidden; border-radius: var(--rayon); cursor: zoom-in; }
.agrandissable img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.agrandissable:hover img { transform: scale(1.04); }
/* Pastille "agrandir", qui apparait au survol. */
.agrandissable::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2622' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 4px 14px rgba(43, 38, 34, .18);
  opacity: 0; transform: scale(.85);
  transition: opacity .25s, transform .25s;
}
.agrandissable:hover::after, .agrandissable:focus-visible::after { opacity: 1; transform: none; }
.agrandissable:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

/* --- Visionneuse de photos (js/site.js) ---
   Plein ecran sur fond sombre : le compteur et la croix en haut, la photo au
   centre entre deux fleches, les vignettes en bas. */
.visionneuse-ouverte { overflow: hidden; }
.visionneuse {
  display: none; grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(24, 20, 17, .97); color: #fff;
}
.visionneuse[open] { display: grid; animation: visionneuse-fondu .3s ease-out; }
.visionneuse::backdrop { background: transparent; }
@keyframes visionneuse-fondu { from { opacity: 0; } }

.visionneuse-haut {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 6px 26px;
}
.visionneuse-compteur {
  margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .08em;
  color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums;
}
.visionneuse button { font: inherit; cursor: pointer; }
.visionneuse-fermer, .visionneuse-fleche {
  display: inline-grid; place-items: center; flex: none;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background-color .2s, transform .2s;
}
.visionneuse-fermer { width: 46px; height: 46px; }
.visionneuse-fleche { width: 58px; height: 58px; }
.visionneuse-fermer:hover, .visionneuse-fleche:hover { background: rgba(255, 255, 255, .2); }
.visionneuse-fleche:active { transform: scale(.94); }
.visionneuse-fermer .ico { width: 24px; height: 24px; }
.visionneuse-fleche .ico { width: 28px; height: 28px; stroke-width: 1.8; }
.visionneuse :focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

.visionneuse-scene {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 20px; padding: 0 22px; min-height: 0;
}
.visionneuse-figure {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  height: 100%; min-height: 0; margin: 0;
}
.visionneuse-photo {
  display: block; min-height: 0; max-width: 100%; max-height: calc(100% - 4.5em);
  width: auto; height: auto; object-fit: contain;
  border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  user-select: none; -webkit-user-drag: none;
  transition: filter .4s;
}
/* Petite version affichee le temps que la grande arrive. */
.visionneuse-photo.provisoire { filter: blur(6px); }
.visionneuse-legende {
  max-width: 62ch; margin: 0; text-align: center;
  font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, .82);
}

.visionneuse-photo.apparait { animation: visionneuse-apparait .45s cubic-bezier(.2, .7, .2, 1); }
.visionneuse-photo.arrive-droite { animation: visionneuse-droite .45s cubic-bezier(.2, .7, .2, 1); }
.visionneuse-photo.arrive-gauche { animation: visionneuse-gauche .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes visionneuse-apparait { from { opacity: 0; transform: scale(.96); } }
@keyframes visionneuse-droite { from { opacity: 0; transform: translateX(48px); } }
@keyframes visionneuse-gauche { from { opacity: 0; transform: translateX(-48px); } }

.visionneuse-vignettes {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 14px 22px 20px;
}
.visionneuse-vignettes::-webkit-scrollbar { display: none; }
/* Centrees quand elles tiennent, defilantes sinon. */
.visionneuse-vignette:first-child { margin-left: auto; }
.visionneuse-vignette:last-child { margin-right: auto; }
.visionneuse-vignette {
  flex: none; width: 76px; height: 52px; padding: 0;
  border: 2px solid transparent; border-radius: 9px; overflow: hidden;
  background: none; opacity: .5; transition: opacity .2s, border-color .2s;
}
.visionneuse-vignette img { width: 100%; height: 100%; object-fit: cover; }
.visionneuse-vignette:hover { opacity: .85; }
.visionneuse-vignette[aria-current="true"] { opacity: 1; border-color: #fff; }

@media (max-width: 700px) {
  .visionneuse-haut { padding: 10px 10px 4px 18px; }
  .visionneuse-scene { grid-template-columns: minmax(0, 1fr); padding: 0 12px; position: relative; }
  /* Les fleches passent sur les bords de la photo ; on peut aussi glisser. */
  .visionneuse-fleche {
    position: absolute; top: calc(50% - 2.5em); z-index: 1;
    width: 44px; height: 44px; background: rgba(24, 20, 17, .55);
  }
  .visionneuse-precedente { left: 8px; }
  .visionneuse-suivante { right: 8px; }
  .visionneuse-photo { border-radius: 8px; }
  .visionneuse-legende { font-size: .93rem; padding: 0 8px; }
  .visionneuse-vignette { width: 60px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .visionneuse[open], .visionneuse-photo { animation: none !important; }
}

/* --- Location --- */
.espaces {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.espace { border-radius: var(--rayon); overflow: hidden; background: var(--sable); }
.espace img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.espace-corps { padding: 20px 22px 22px; }
.espace-corps h3 { margin-bottom: .25em; }
.espace-mesures { font-weight: 800; color: var(--orange-texte); margin-bottom: .5em; }
.espace-corps p:last-child { margin-bottom: 0; }
@media (max-width: 959px) {
  .espaces { grid-template-columns: 1fr; }
  .espace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .espace img { height: 100%; }
}
@media (max-width: 560px) {
  .espace { grid-template-columns: 1fr; }
}

/* minmax(0, 1fr) : sans lui, la largeur minimale des tableaux elargirait la
   page entiere au lieu de les faire defiler dans leur cadre. */
.tarifs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 56px; }
.tableau-bloc h3 { font-size: 1.25rem; }
.tableau-defile { overflow-x: auto; border-radius: var(--rayon); background: #fff; }
.tableau { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.tableau thead th { font-size: .92rem; color: var(--encre-douce); font-weight: 700; background: #fbf9f4; }
.tableau tbody th { font-weight: 800; width: 34%; }
.tableau td { font-weight: 700; font-size: 1.08rem; }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau-note { display: block; font-size: .88rem; font-weight: 400; color: var(--encre-douce); }
/* Ecran etroit : chaque ligne du tableau devient une fiche, chaque prix
   porte son intitule (data-label). */
@media (max-width: 640px) {
  .tableau { min-width: 0; }
  .tableau thead { display: none; }
  .tableau tr { display: block; padding: 6px 0 10px; border-bottom: 1px solid var(--trait); }
  .tableau tbody tr:last-child { border-bottom: 0; }
  .tableau th, .tableau td { border-bottom: 0; }
  .tableau tbody th { display: block; width: auto; padding: 12px 18px 6px; }
  .tableau td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 5px 18px; text-align: right;
  }
  .tableau td::before { content: attr(data-label); font-weight: 400; font-size: .95rem; color: var(--encre-douce); text-align: left; }
  .tableau td.vide { display: none; }
  .tableau-note { text-align: right; }
}
.regles-location h3 { font-size: 1.25rem; }
.regles-location .document { margin-top: 8px; }

.citation-claire { border-left-color: var(--orange); color: var(--encre); }
.citation-claire footer { color: var(--encre-douce); opacity: 1; }

/* Etapes numerotees */
.etapes {
  display: grid; gap: 14px; max-width: 900px;
  margin: 8px 0 0; padding: 0; list-style: none; counter-reset: etape;
}
.etapes li {
  position: relative; padding: 22px 28px 20px 84px; border-radius: var(--rayon); background: #fff;
  counter-increment: etape;
}
.etapes li::before {
  content: counter(etape);
  position: absolute; top: 20px; left: 26px;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--violet); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.etapes h3 { font-size: 1.25rem; margin: 4px 0 .35em; }
.etapes p { margin-bottom: .6em; }
.etapes p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .etapes li { padding: 70px 20px 20px; }
  .etapes li::before { left: 20px; }
}
.etapes .document { margin-top: 4px; background: var(--sable); border-color: var(--sable); }
.bloc:not(.bloc-sable) .etapes li { background: var(--sable); }

.statuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.statut { padding: 22px 24px 8px; border-radius: var(--rayon); background: #fff; }
.statut h4 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .7em; }
.statut .liste-puces { font-size: 1rem; }
@media (max-width: 959px) {
  .statuts { grid-template-columns: 1fr; }
}

/* --- Association --- */
.mission-texte .liste-puces li { margin-bottom: .8em; }
.valeurs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin: 8px 0 0; padding: 0; list-style: none;
}
.valeur {
  padding: 26px 24px 20px; border-radius: var(--rayon); background: var(--sable);
  border-top: 6px solid var(--couleur);
  font-size: 1.12rem; line-height: 1.5;
}
.valeur strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--encre); margin-bottom: .2em; }
.valeur-1 { --couleur: var(--bleu); }
.valeur-2 { --couleur: var(--vert); }
.valeur-3 { --couleur: var(--olive); }
.valeur-4 { --couleur: var(--jaune); }
@media (max-width: 1079px) {
  .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .valeurs { grid-template-columns: 1fr; }
}

.bureau { margin: 0 0 20px; padding: 0; list-style: none; }
.bureau li { padding: 10px 0; border-bottom: 2px dotted var(--trait); color: var(--encre-douce); }
.bureau strong { display: block; color: var(--encre); font-size: 1.15rem; }

/* --- Contact --- */
.contact-grille {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 72px; align-items: start;
}
.contact-carte { padding: 28px 30px 20px; border-radius: var(--rayon); background: var(--sable); }
.contact-liste { margin: 0 0 18px; padding: 0; list-style: none; }
.contact-liste li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; font-size: 1.08rem; }
.contact-liste .ico { margin-top: .2em; color: var(--orange-bouton); }
.contact-liste a { overflow-wrap: break-word; }
.qui { margin: 0; }
.qui > div { padding: 16px 0; border-bottom: 2px dotted var(--trait); }
.qui dt { font-weight: 800; font-size: 1.15rem; }
.qui dd { margin: 2px 0 0; color: var(--encre-douce); }
@media (max-width: 959px) {
  .contact-grille { grid-template-columns: 1fr; }
}

/* --- Adhesion --- */
.cotisations {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  max-width: 820px; margin: 0; padding: 0; list-style: none;
}
.cotisation { padding: 28px 30px 22px; border-radius: var(--rayon); background: var(--sable); }
.cotisation p { margin: 0; }
.cotisation-prix { font-size: 3rem; font-weight: 800; line-height: 1.05; color: var(--orange-titre); }
.cotisation-pour { font-weight: 700; margin-bottom: .8em !important; }
.cotisation-violette { background: var(--violet); color: #fff; }
.cotisation-violette .cotisation-prix { color: #fff; }
@media (max-width: 600px) {
  .cotisations { grid-template-columns: 1fr; }
}

/* --- Formulaires (site et administration) --- */
.formulaire { display: grid; gap: 18px; }
.formulaire h2 {
  margin: 14px 0 -4px; font-size: 1.2rem;
  display: block; padding: 0; background: none; color: var(--encre); clip-path: none;
  text-transform: none; letter-spacing: 0;
}
.formulaire h2:first-of-type { margin-top: 0; }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label, .lignes-repetees legend, .choix-adhesion legend { font-weight: 700; font-size: 1rem; }
.facultatif { font-weight: 400; font-size: .88rem; color: var(--encre-douce); }
.champ-aide { margin: -2px 0 2px; font-size: .92rem; line-height: 1.4; color: var(--encre-douce); }
.champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .champ textarea,
.lignes-repetees input, .pied-lettre input {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid #cfc7b8; border-radius: 12px;
  background: #fff; color: var(--encre);
  font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ select { appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e554c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .lignes-repetees input:focus, .pied-lettre input:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(106, 91, 184, .2);
}
.champ-erreur input:not([type="checkbox"]), .champ-erreur select, .champ-erreur textarea { border-color: #b3261e; }
.champ-message { margin: 0; font-size: .92rem; font-weight: 700; color: #b3261e; }
.champ-message::before { content: "! "; }

.champ-case { grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.champ-case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--violet); cursor: pointer; }
.champ-case label { font-weight: 600; cursor: pointer; }
.champ-case .champ-aide, .champ-case .champ-message { grid-column: 2; margin-top: 0; }
.champs-cases { display: grid; gap: 14px; padding: 4px 0; }

/* Deux champs cote a cote : l'aide de l'un ne decale pas la case de l'autre. */
.champs-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: end; }
.champs-deux:has(.champ-message) { align-items: start; }
.champs-trois { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; }
.champs-cp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 600px) {
  .champs-deux, .champs-trois { grid-template-columns: 1fr; }
  .champs-cp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.formulaire-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 6px; }
.formulaire-fin .petit { margin: 0; flex: 1 1 260px; }
button.bouton { font: inherit; font-weight: 700; cursor: pointer; }
.bouton-grand { padding: .85em 1.7em; font-size: 1.1rem; }
.bouton-lien {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--orange-texte);
  text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.bouton-lien:hover { color: var(--encre); }
.bouton-danger { background: #b3261e; border-color: #b3261e; }
.bouton-danger:hover { background: #8c1d17; border-color: #8c1d17; }
.bouton-danger-lien { color: #b3261e; }

/* Champ piege pour les robots : hors de l'ecran, jamais vu. */
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Messages */
.alerte {
  margin: 0 0 18px; padding: 14px 18px; border-radius: 12px;
  border-left: 5px solid var(--violet); background: #f1eefa; line-height: 1.5;
}
.alerte p { margin: 0 0 .4em; }
.alerte p:last-child, .alerte ul:last-child { margin-bottom: 0; }
.alerte ul { margin: 0; padding-left: 1.2em; }
.alerte a { color: var(--encre); font-weight: 700; }
.alerte-erreur { border-color: #b3261e; background: #fbeceb; }
.alerte-succes { border-color: #2f7a3a; background: #e9f4ea; }
.alerte:focus { outline: none; }

/* --- Adhesion en ligne --- */
.adhesion-grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 48px; align-items: start;
}
.carte-formulaire { padding: clamp(22px, 3vw, 36px); border-radius: var(--rayon); background: var(--sable); }
.adhesion-cote { display: grid; gap: 16px; }
.encart { padding: 22px 24px; border-radius: var(--rayon); border: 1px solid var(--trait); }
.encart .titre-simple { font-size: 1.2rem; margin-bottom: .6em; }
.encart p:last-child, .encart .liste-puces:last-child { margin-bottom: 0; }
.encart .document { margin-top: 4px; }
.mention-donnees { margin: 0; font-size: .9rem; color: var(--encre-douce); }
@media (max-width: 959px) {
  .adhesion-grille { grid-template-columns: 1fr; }
}

/* Choix du type d'adhesion : deux cartes a cocher. */
.choix-adhesion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choix-adhesion legend { margin-bottom: 8px; padding: 0; }
.choix-carte { position: relative; display: block; cursor: pointer; }
.choix-carte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-carte-corps {
  display: grid; gap: 2px; height: 100%; padding: 16px 18px 16px 50px;
  border: 2px solid var(--trait); border-radius: 14px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.choix-carte-corps::before {
  content: ""; position: absolute; left: 18px; top: 19px;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8ae9c; background: #fff;
}
.choix-carte input:checked + .choix-carte-corps { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.choix-carte input:checked + .choix-carte-corps::before { border: 6px solid var(--violet); }
.choix-carte input:focus-visible + .choix-carte-corps { outline: 3px solid var(--violet); outline-offset: 2px; }
.choix-carte-titre { font-weight: 800; line-height: 1.3; }
.choix-carte-detail { font-size: .92rem; color: var(--encre-douce); line-height: 1.35; }
.choix-carte-prix { margin-top: 6px; font-size: 1.4rem; font-weight: 800; color: var(--orange-titre); }
.choix-carte-prix small { font-size: .9rem; font-weight: 600; color: var(--encre-douce); }
@media (max-width: 520px) {
  .choix-adhesion { grid-template-columns: 1fr; }
}

/* Recapitulatif d'une adhesion (paiement, remerciement). */
.recapitulatif { margin-bottom: 28px; padding: 6px 24px; border-radius: var(--rayon); background: var(--sable); }
.recapitulatif dl { margin: 0; }
.recapitulatif dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.recapitulatif dl > div:last-child { border-bottom: 0; }
.recapitulatif dt { color: var(--encre-douce); }
.recapitulatif dd { margin: 0; font-weight: 700; text-align: right; }
.recapitulatif-total dd { font-size: 1.3rem; color: var(--orange-titre); }
.paiement-demo .actions { margin-top: 4px; }
.pastille-succes {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 18px;
  border-radius: 50%; background: #e9f4ea; color: #2f7a3a;
}
.pastille-succes .ico { width: 34px; height: 34px; stroke-width: 2.4; }

/* Lettre d'informations, dans le pied de page. */
.pied-lettre { margin-top: 22px; max-width: 340px; }
.pied-lettre label { display: block; margin-bottom: 8px; font-weight: 800; }
.pied-lettre-ligne { display: flex; gap: 8px; }
.pied-lettre input { min-height: 44px; border-radius: 999px; padding: 8px 16px; }
.pied-lettre .bouton { flex: none; padding: .55em 1.1em; }

/* --- Textes legaux --- */
.prose h2 {
  display: block; padding: 0; margin: 2em 0 .5em;
  background: none; color: var(--encre); clip-path: none;
  font-size: 1.35rem; text-transform: none; letter-spacing: 0;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .3em; }

/* --- Pages simples --- */
.page-simple { min-height: 50vh; }

/* --- Pied de page --- */
.pied { background: var(--sable); padding-top: 56px; font-size: 1rem; }
.pied-grille {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px; padding-bottom: 44px;
}
.pied-marque img { width: 108px; margin-bottom: 16px; }
.pied-marque p { color: var(--encre-douce); max-width: 18em; }
.pied-titre { font-size: 1rem; font-weight: 800; margin-bottom: 14px; letter-spacing: .01em; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied-contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.pied-contact .ico { margin-top: .15em; color: var(--encre-douce); }
.pied-contact a { color: var(--encre); overflow-wrap: break-word; }
.pied-liens li { margin-bottom: 6px; }
.pied-liens a { color: var(--encre); text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 18px; padding-bottom: 28px;
  border-top: 1px solid #ddd6c8;
  color: var(--encre-douce); font-size: .95rem;
}
.pied-bas p { margin: 0; }
.pied-bas ul { display: flex; gap: 20px; }
.pied-bas a { color: var(--encre-douce); }

@media (max-width: 800px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .pied-grille { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}