@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════
   SALON DU MIEUX-ÊTRE ET DE L'ARTISANAT LOCAL — Aubenas 2027
   Version 2 — d'après la bannière

   La page se lit comme la lumière de la bannière : l'heure dorée.
   On descend du ciel du couchant vers la pierre chaude, puis vers
   l'ombre profonde du sous-bois. Même mécanique de perspective
   atmosphérique que la version précédente, mais la journée n'est
   plus la même : ce n'est plus l'aube, c'est la fin du jour.

   Emblème : le tournesol, présent sur la bannière comme sur le
   flyer. Il remplace le cercle d'or et traverse la page au fil des
   sections.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────── */

:root {
  /* Couleurs relevées sur la bannière */
  --ciel:          #F8E4C9;   /* le ciel, tout en haut */
  --miel:          #FBE8C5;   /* la lueur basse du couchant */
  --creme:         #FAF2E4;   /* fond de page */
  --creme-clair:   #FEFAF1;
  --calcaire:      #EFE1C7;   /* surfaces, cartes */
  --pierre:        #CDB795;
  --pierre-foncee: #9C8260;

  --tournesol:     #F5BA08;   /* le jaune des fleurs — l'emblème */
  --or:            #C98A2B;   /* ocre doré : filets, sourcils */
  --chataigne:     #8B4A24;   /* le brun des bogues — les ateliers */
  --olive:         #5B5C26;   /* le vert des collines — les conférences */
  --olive-sombre:  #3A3A18;   /* l'ombre du sous-bois — pied de page */
  --myrtille:      #2B2E44;   /* le bleu-nuit des baies — accent rare */

  --encre:         #2A2114;   /* brun très sombre */
  --encre-douce:   #6B5B42;

  /* Familles */
  --police-titre: "Petrona", "Iowan Old Style", Georgia, serif;
  --police-texte: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique */
  --pas-geant: clamp(3.1rem, 9.5vw, 7.5rem);
  --pas-xl:    clamp(1.9rem, 4.4vw, 3.5rem);
  --pas-l:     clamp(1.25rem, 2.1vw, 1.7rem);
  --pas-m:     1.0625rem;
  --pas-s:     0.9375rem;
  --pas-xs:    0.75rem;

  /* Rythme */
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur:   1240px;
  --air:       clamp(4.5rem, 11vh, 8.5rem);

  --transition: 380ms cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. Remise à zéro ──────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--pas-m);
  font-weight: 400;
  line-height: 1.68;
  color: var(--encre);
  background-color: var(--creme);
  background-image: linear-gradient(
    180deg,
    var(--miel)        0%,
    var(--creme)       8%,
    var(--calcaire)    24%,
    var(--calcaire)    38%,
    var(--creme-clair) 52%,
    var(--creme)       66%,
    var(--calcaire)    80%,
    var(--creme)       93%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;          /* Petrona est plus légère que Fraunces */
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol, dl, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--chataigne);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--tournesol); color: var(--olive-sombre); }

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--olive-sombre);
  color: var(--creme);
  text-decoration: none;
  transition: top 180ms;
}
.lien-evitement:focus { top: 1rem; }

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 3. Éléments partagés ──────────────────────────────────── */

.contenant {
  width: min(100% - var(--gouttiere) * 2, var(--largeur));
  margin-inline: auto;
}
.contenant--etroit { max-width: 850px; }

.section {
  position: relative;
  padding-block: var(--air);
}

/* La règle d'or de l'affiche, reprise en séparateur.
   Le soleil avance de gauche à droite au fil de la page :
   c'est la course du soleil sur les deux jours du salon. */
.horizon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--tournesol) 14%,
    var(--or) 50%,
    var(--tournesol) 86%,
    transparent 100%
  );
}
/* Le tournesol de la bannière traverse la page au fil des sections,
   là où la version précédente faisait voyager un cercle d'or. */
.symboles { position: absolute; width: 0; height: 0; overflow: hidden; }
.tournesol__petales { fill: var(--tournesol); }
.tournesol__coeur { fill: var(--chataigne); }

.horizon__fleur {
  position: absolute;
  left: var(--soleil, 50%);
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  filter: drop-shadow(0 1px 2px rgba(80, 56, 20, .35));
}

.sourcil {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 1.1rem;
}

.titre-section {
  font-size: var(--pas-xl);
  color: var(--olive);
  letter-spacing: -.015em;
  max-width: 18ch;
}

.entete-section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.entete-section__note {
  max-width: 46ch;
  color: var(--encre-douce);
  margin-top: 1.2rem;
}
.entete-section--avec-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.entete-section--duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.entete-section--duo .entete-section__note { margin-top: 0; }
.entete-section--centre {
  text-align: center;
  display: grid;
  justify-items: center;
}
.entete-section--centre .titre-section { max-width: 22ch; }

/* Vignettes : même galbe irrégulier que les pierres du mur */
.vignette {
  width: clamp(120px, 22vw, 260px);
  border-radius: 8px 14px 7px 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px -18px rgba(47, 53, 41, .5);
}
.vignette img { width: 100%; }

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.5rem;
  font-size: var(--pas-s);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform 180ms ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

.bouton--plein {
  background: var(--olive);
  color: var(--creme);
  border-color: var(--olive);
}
.bouton--or { color: var(--encre); }
.bouton--plein:hover { background: var(--olive-sombre); border-color: var(--olive-sombre); }

.bouton--nu {
  background: transparent;
  color: var(--olive);
  border-color: color-mix(in srgb, var(--olive) 35%, transparent);
}
.bouton--nu:hover { border-color: var(--olive); background: color-mix(in srgb, var(--olive) 7%, transparent); }

.compteur-resa {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .35rem;
  font-size: var(--pas-xs);
  font-weight: 600;
  color: var(--olive-sombre);
  background: var(--tournesol);
  border-radius: 999px;
}

/* ── 4. En-tête ────────────────────────────────────────────── */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color var(--transition), box-shadow var(--transition),
              backdrop-filter var(--transition);
}
.entete.est-posee {
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pierre) 55%, transparent);
}

/* Au-dessus de la bannière, l'en-tête est encore transparent : son
   encre doit donc être claire. Elle redevient sombre dès que le fond
   crème se pose, au premier défilement. */
.entete:not(.est-posee) .marque__ligne1,
.entete:not(.est-posee) .nav__liste a { color: color-mix(in srgb, var(--creme) 94%, transparent); }
.entete:not(.est-posee) .marque__ligne2 { color: color-mix(in srgb, var(--creme) 66%, transparent); }
.entete:not(.est-posee) .nav__liste a::after { background: var(--tournesol); }
.entete:not(.est-posee) .nav__liste a:hover,
.entete:not(.est-posee) .nav__liste a.est-active { color: var(--tournesol); }
.entete:not(.est-posee) .entete__cta {
  background: var(--tournesol);
  border-color: var(--tournesol);
  color: var(--encre);
}
.entete:not(.est-posee) .entete__cta:hover {
  background: var(--creme);
  border-color: var(--creme);
}
.entete:not(.est-posee) .burger { border-color: color-mix(in srgb, var(--creme) 55%, transparent); }
.entete:not(.est-posee) .burger__barres i { background: var(--creme); }
.entete:not(.est-posee) .burger__mot { color: var(--creme); }

.entete__interieur {
  width: min(100% - var(--gouttiere) * 2, var(--largeur));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(.85rem, 2vw, 1.2rem);
}

.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
}
.marque__signe { width: 27px; height: 27px; flex: none; }
.marque__texte { display: grid; gap: .15rem; line-height: 1.15; }
.marque__ligne1 {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--olive);
}
.marque__ligne2 {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.nav__liste { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav__liste a {
  position: relative;
  display: block;
  padding-block: .3rem;
  font-size: var(--pas-s);
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  transition: color var(--transition);
}
.nav__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__liste a:hover { color: var(--olive); }
.nav__liste a:hover::after,
.nav__liste a.est-active::after { transform: scaleX(1); }
.nav__liste a.est-active { color: var(--olive); }

.entete__cta { padding: .6rem 1.15rem; }

.burger {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .5rem .8rem .5rem .6rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--olive) 30%, transparent);
  border-radius: 3px;
  cursor: pointer;
}
.burger__barres { display: grid; gap: 4px; width: 18px; }
.burger__barres i {
  display: block;
  height: 1.5px;
  background: var(--olive);
  transition: transform var(--transition);
}
.burger[aria-expanded="true"] .burger__barres i:first-child { transform: translateY(2.75px) rotate(9deg); }
.burger[aria-expanded="true"] .burger__barres i:last-child  { transform: translateY(-2.75px) rotate(-9deg); }
.burger__mot {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.menu-mobile {
  background: var(--creme);
  border-top: 1px solid color-mix(in srgb, var(--pierre) 60%, transparent);
  box-shadow: 0 18px 40px -28px rgba(47, 53, 41, .7);
}
.menu-mobile ul { padding: .5rem var(--gouttiere) 1.5rem; }
.menu-mobile a {
  display: block;
  padding: .85rem 0;
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pierre) 45%, transparent);
}

/* ── 5. Accueil ────────────────────────────────────────────
   La bannière occupe tout le cadre. Un voile chaud assombrit la
   gauche — là où le ciel et les collines sont vides — pour que le
   titre s'y pose en clair, pendant que le panier, le pain et les
   tournesols restent entièrement lisibles à droite et en bas. */

/* Une image qui remplit la fenetre affiche forcement toute sa hauteur :
   le cadrage n'a alors plus aucune prise et la planche passe sous le
   bandeau. On lui donne donc une bande dont la hauteur est bornee par
   son propre rapport (1,49), on l'ancre par le bas pour que la planche
   et le couteau restent entiers, et le bandeau se range dessous. Ce qui
   se perd en haut n'est que du ciel. */
.heros {
  position: relative;
  isolation: isolate;
}

.heros__image {
  position: relative;
  height: min(94svh, 67.1vw);
  overflow: hidden;
}
.heros__image picture,
.heros__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.heros__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(26, 19, 10, .72) 0%,
      rgba(26, 19, 10, .58) 22%,
      rgba(26, 19, 10, .26) 40%,
      transparent 58%),
    linear-gradient(180deg,
      transparent 86%,
      color-mix(in srgb, var(--creme) 42%, transparent) 97%,
      color-mix(in srgb, var(--creme) 72%, transparent) 100%);
}

.heros__texte {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: min(100% - var(--gouttiere) * 2, var(--largeur));
  max-width: none;
  padding-top: clamp(5.25rem, 13vh, 8.5rem);
}
/* Une seule taille pour les trois membres : le titre se lit d'un bloc. Ce
   qui distingue, c'est la couleur — « mieux-être » et « artisanat local »
   en jaune de tournesol, le reste en crème, comme sur le flyer. Sur un
   téléphone les trois membres s'empilent, centrés ; au-dessus de 700 px
   ils se remettent sur une seule ligne. */
.heros__titre {
  display: grid;
  gap: .06em;
  font-size: clamp(2rem, 6.1vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--creme);
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 24px rgba(20, 14, 6, .45);
}
.heros__titre .ligne { display: block; }
.heros__titre .accent { color: var(--tournesol); }

.heros__accroche {
  max-width: 40ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--creme) 88%, transparent);
  text-shadow: 0 1px 16px rgba(20, 14, 6, .5);
}

/* Le bandeau d'informations se pose sur le crème du bas de l'image. */
.heros__pied {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 2.5vh, 1.75rem) var(--gouttiere) clamp(1.25rem, 3.5vh, 2.5rem);
}

.ruban {
  width: min(100%, var(--largeur));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--pierre-foncee) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--pierre-foncee) 50%, transparent);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 22px 50px -30px rgba(42, 33, 20, .9);
}
.ruban__bloc {
  padding: 1.15rem 1.35rem;
  background: color-mix(in srgb, var(--creme-clair) 94%, transparent);
  backdrop-filter: blur(10px);
}
.ruban__cle {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chataigne);
  margin-bottom: .3rem;
}
.ruban__valeur {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--olive-sombre);
}
.ruban__note {
  font-size: var(--pas-s);
  color: var(--encre-douce);
  margin-top: .2rem;
}
.ruban__bloc--actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  justify-content: center;
}
.ruban__bloc--actions .bouton { width: 100%; }

/* ── 6. Le salon en une page ───────────────────────────────── */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.intro__propos p { margin-top: 1.1rem; max-width: 52ch; color: var(--encre-douce); }
.intro__equinoxe {
  font-family: var(--police-titre);
  font-size: var(--pas-l);
  font-style: italic;
  line-height: 1.45;
  color: var(--chataigne) !important;
  border-left: 1px solid var(--or);
  padding-left: 1.2rem;
}

.sommaire {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
}
.sommaire__item a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.15rem .3rem;
  text-decoration: none;
  background: color-mix(in srgb, var(--creme-clair) 55%, transparent);
  transition: background-color var(--transition), padding-left var(--transition);
}
.sommaire__item a:hover {
  background: color-mix(in srgb, var(--creme-clair) 100%, transparent);
  padding-left: 1rem;
}
.sommaire__nombre {
  font-family: var(--police-titre);
  font-size: 2.5rem;
  line-height: .9;
  color: var(--teinte, var(--olive));
  min-width: 1.8ch;
  text-align: right;
}
.sommaire__nom {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.2rem;
  color: var(--olive);
}
.sommaire__desc { display: block; font-size: var(--pas-s); color: var(--encre-douce); }

/* L'engagement local : trois faits, pas une charte. */
.engagement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
}
.engagement__point {
  padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.1rem, 2vw, 1.6rem);
  background: color-mix(in srgb, var(--creme-clair) 58%, transparent);
}
.engagement__point h3 {
  font-size: 1.2rem;
  color: var(--olive);
  margin-bottom: .55rem;
}
.engagement__point h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-bottom: .8rem;
  background: var(--or);
}
.engagement__point p { font-size: var(--pas-s); color: var(--encre-douce); }

.sommaire__item[data-teinte="pierre"] { --teinte: var(--pierre-foncee); }
.sommaire__item[data-teinte="terre"]  { --teinte: var(--chataigne); }
.sommaire__item[data-teinte="mousse"] { --teinte: var(--encre-douce); }
.sommaire__item[data-teinte="or"]     { --teinte: var(--or); }

/* ── 7. Exposants : le mur de pierre sèche ─────────────────── */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.filtre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: var(--pas-s);
  font-weight: 500;
  color: var(--encre-douce);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--pierre-foncee) 55%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.filtre:hover { border-color: var(--encre-douce); color: var(--olive); }
.filtre.est-actif {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--creme);
}
.filtre__compte {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .06em;
  opacity: .65;
}

/* Un mur monté sans ciment : chaque pierre a sa largeur, les
   assises se rejoignent bord à bord parce que les pierres
   s'étirent pour combler la rangée. */
.mur {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border-radius: 5px;
  /* Le fond sombre apparaît dans les joints : c'est l'ombre entre
     deux pierres, la seule chose qui tienne un mur sans mortier. */
  background: #8A7347;   /* l’ombre entre deux pierres */
  box-shadow: inset 0 2px 7px rgba(58, 48, 32, .45);
}
/* Grain minéral, posé sur tout le mur d'un seul tenant */
.mur::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.26'/%3E%3C/svg%3E");
}

.pierre {
  position: relative;
  overflow: hidden;
  flex: var(--w) 1 calc(var(--w) * 10.5px);
  min-width: 172px;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: 1.05rem 1.15rem 1rem;
  background:
    radial-gradient(125% 150% at 16% -10%,
      rgba(255, 252, 243, .95) 0%,
      rgba(255, 252, 243, 0) 58%),
    linear-gradient(158deg, #F3E6CA 0%, #E6D3AF 46%, #CDB68C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 246, .85),
    inset 0 -2px 4px rgba(116, 100, 72, .16),
    0 1px 2px rgba(88, 74, 50, .2);
  transition: transform 260ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 260ms, filter 260ms;
}

/* Chaque pierre est taillée différemment */
.pierre:nth-child(4n+1) { border-radius: 4px 11px 5px 9px; }
.pierre:nth-child(4n+2) { border-radius: 10px 4px 9px 5px; }
.pierre:nth-child(4n+3) { border-radius: 7px 8px 4px 11px; }
.pierre:nth-child(4n)   { border-radius: 9px 6px 10px 4px; }
/* Aucune pierre n'a tout à fait le ton de sa voisine. Le voile est
   posé en calque plutôt qu'en filtre, pour ne pas entrer en conflit
   avec l'éclaircissement au survol. */
.pierre::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pierre:nth-child(3n+2)::before { background: rgba(150, 112, 56, .10); }
.pierre:nth-child(5n+3)::before { background: rgba(104, 110, 58, .09); }
.pierre:nth-child(7n+5)::before { background: rgba(206, 164, 92, .12); }
.pierre:nth-child(4n+3)::before { background: rgba(132, 106, 62, .07); }
.pierre:nth-child(9n+7)::before { background: rgba(182, 144, 84, .13); }

.pierre h3 {
  font-size: 1.0625rem;
  color: var(--encre);
  line-height: 1.22;
}
.pierre__qui {
  font-size: var(--pas-xs);
  font-style: italic;
  color: var(--encre-douce);
  margin-bottom: .12rem;
}

/* La pierre entière est cliquable, sans casser la sémantique du contenu. */
.pierre__bouton {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pierre__bouton:focus-visible { outline-offset: -3px; }
.pierre__donnees { display: none; }

.pierre.est-ouverte {
  box-shadow:
    inset 0 0 0 1.5px var(--chataigne),
    inset 0 -2px 4px rgba(116, 100, 72, .16),
    0 8px 20px -12px rgba(66, 56, 36, .8);
}
.pierre.est-ouverte h3 { color: var(--chataigne); }
.pierre__metier {
  font-size: var(--pas-s);
  line-height: 1.4;
  color: var(--encre-douce);
}
.pierre__lieu {
  margin-top: auto;
  padding-top: .55rem;
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chataigne);
}
.pierre:hover {
  transform: translateY(-2px);
  filter: brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 246, .9),
    inset 0 -1px 0 rgba(120, 105, 78, .16),
    0 14px 26px -18px rgba(66, 56, 36, .75);
}
.pierre[hidden] { display: none; }

.mur__vide {
  padding: 3rem 0;
  text-align: center;
  color: var(--encre-douce);
}

/* ── La niche ──────────────────────────────────────────────
   On descelle une pierre : le mur s'ouvre à cet endroit précis,
   les pierres suivantes descendent d'une assise, et l'ombre du
   fond apparaît. */

.fiche {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(178deg, #58432A 0%, #3E2F1C 100%);
  box-shadow:
    inset 0 4px 16px rgba(26, 21, 12, .6),
    inset 0 -1px 0 rgba(255, 244, 214, .1);
}
.fiche:focus { outline: none; }
.fiche:focus-visible { outline: 2px solid var(--tournesol); outline-offset: -4px; }

.fiche__interieur {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: start;
  padding: clamp(1.25rem, 2.6vw, 1.85rem);
}

/* Une tuile de pierre gravée aux initiales, en attendant la photo */
.fiche__portrait {
  width: clamp(78px, 11vw, 118px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px 13px 5px 11px;
  background: linear-gradient(158deg, #F1E8D6 0%, #E1D5BC 48%, #CBBC9F 100%);
  box-shadow: 0 8px 20px -10px rgba(20, 16, 8, .8), inset 0 1px 0 rgba(255, 253, 246, .8);
}
.fiche__portrait img { width: 100%; height: 100%; object-fit: cover; }
.fiche__initiales {
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: .02em;
  color: var(--olive);
}

.fiche__corps {
  color: color-mix(in srgb, var(--creme) 88%, transparent);
  padding-right: 2.75rem;
}
.fiche__lieu {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tournesol);
  margin-bottom: .45rem;
}
.fiche__lieu:empty { display: none; }
.fiche__nom {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  color: var(--creme);
  line-height: 1.15;
}
.fiche__qui {
  font-size: var(--pas-s);
  font-style: italic;
  color: color-mix(in srgb, var(--creme) 72%, transparent);
  margin-top: .2rem;
}
.fiche__qui:empty { display: none; }
.fiche__metier {
  font-size: var(--pas-s);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tournesol);
  margin-top: .5rem;
}
.fiche__presentation {
  max-width: 62ch;
  margin-top: .9rem;
  line-height: 1.62;
}
.fiche__liens {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.1rem;
  font-size: var(--pas-s);
}
.fiche__liens:empty { display: none; }
.fiche__liens a,
.fiche__liens span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.fiche__liens a {
  color: var(--tournesol);
  text-underline-offset: 3px;
}
.fiche__liens a:hover { color: var(--creme); }
.fiche__liens .fiche__prog {
  color: color-mix(in srgb, var(--creme) 78%, transparent);
  padding: .18rem .6rem;
  border: 1px solid color-mix(in srgb, var(--tournesol) 45%, transparent);
  border-radius: 999px;
  font-size: var(--pas-xs);
  letter-spacing: .06em;
}

.fiche__fermer {
  position: absolute;
  top: clamp(.85rem, 2vw, 1.25rem);
  right: clamp(.85rem, 2vw, 1.25rem);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tournesol);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--tournesol) 40%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.fiche__fermer:hover {
  background: color-mix(in srgb, var(--tournesol) 18%, transparent);
  color: var(--creme);
}

.appel-exposant {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--tournesol);
  border-radius: 4px;
  background: color-mix(in srgb, var(--creme-clair) 70%, transparent);
}
.appel-exposant h3 {
  font-size: var(--pas-l);
  color: var(--olive);
  margin-bottom: .4rem;
}
.appel-exposant p { max-width: 52ch; color: var(--encre-douce); font-size: var(--pas-s); }

/* ── 8. Programme : une grille horaire par jour ────────────
   Ateliers et conférences partagent les mêmes lignes, à la
   demi-heure. C'est ce qui rend le chevauchement lisible : ce qui se
   ferme est juste à côté, à la même hauteur. */

.grille-jour {
  display: grid;
  grid-template-columns: 3.1rem repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto repeat(var(--lignes), minmax(1.6rem, auto));
  column-gap: clamp(.6rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.grille-jour:last-of-type { margin-bottom: 0; }

.grille-jour .jour__titre { grid-column: 1 / -1; grid-row: 1; }

.grille-jour__enseigne {
  grid-column: var(--c);
  grid-row: 2;
  padding-bottom: .5rem;
  margin-bottom: .6rem;
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-douce);
  border-bottom: 1px solid color-mix(in srgb, var(--pierre-foncee) 45%, transparent);
}
.grille-jour__enseigne:last-of-type { color: var(--olive); }

.grille-jour__heure {
  grid-column: 1;
  grid-row: var(--l);
  align-self: start;
  padding-top: .1rem;
  font-family: var(--police-titre);
  font-size: .9rem;
  line-height: 1;
  color: var(--encre-douce);
  font-feature-settings: "tnum" 1;
}
.grille-jour__filet {
  grid-column: 2 / -1;
  grid-row: var(--l);
  align-self: start;
  height: 0;
  border-top: 1px solid color-mix(in srgb, var(--pierre-foncee) 26%, transparent);
}

/* Un créneau occupe sa vraie durée : une heure et demie couvre trois
   lignes, et l'on voit d'un coup d'œil ce qu'elle recouvre à côté. */
.creneau {
  grid-column: var(--c);
  grid-row: var(--l1) / var(--l2);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: .12rem;
  margin-bottom: 4px;
  padding: .7rem .85rem .75rem;
  border-radius: 3px;
  border-left: 2px solid var(--teinte);
  background: color-mix(in srgb, var(--creme-clair) 78%, transparent);
  box-shadow: 0 1px 2px rgba(88, 74, 50, .12);
}
.creneau--atelier { --teinte: var(--chataigne); }
.creneau--conference { --teinte: var(--olive); }

.creneau__heure {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--teinte);
  font-feature-settings: "tnum" 1;
}
.creneau__fin { opacity: .6; }
.creneau h4 {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--olive-sombre);
}
.creneau__sous {
  font-size: var(--pas-s);
  font-style: italic;
  line-height: 1.35;
  color: var(--encre-douce);
}
.creneau__qui {
  margin-top: .2rem;
  font-size: var(--pas-s);
  color: var(--encre-douce);
}
/* La salle est déjà annoncée par l'en-tête de colonne : on ne la
   répète que sur mobile, quand la grille se replie. */
.creneau__lieu {
  display: none;
  font-size: var(--pas-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--encre-douce) 75%, transparent);
}
.creneau__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  margin-top: .35rem;
  font-size: var(--pas-xs);
  letter-spacing: .06em;
  color: var(--encre-douce);
}
.creneau__meta li { display: flex; align-items: center; gap: .5rem; }
.creneau__meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--or);
  margin-left: -.4rem;
}
.creneau .reserver { margin-top: .55rem; }

.jour__titre {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: .9rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--chataigne);
  font-size: var(--pas-l);
  color: var(--olive);
}
.jour__titre em {
  font-style: italic;
  font-weight: 300;
  color: var(--chataigne);
}
.jour__horaire {
  margin-left: auto;
  font-family: var(--police-texte);
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.apres-programme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--pierre-foncee) 32%, transparent);
}
.apres-programme__note { font-size: var(--pas-s); color: var(--encre-douce); max-width: 44ch; }

/* Réserver depuis le programme : le bouton coche la case correspondante
   du formulaire, il n'y a pas deux états à tenir à jour. */
.reserver {
  justify-self: start;
  margin-top: .7rem;
  padding: .34rem .85rem;
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chataigne);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--chataigne) 55%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.reserver:hover { background: color-mix(in srgb, var(--chataigne) 12%, transparent); }
.reserver[aria-pressed="true"] {
  color: var(--creme);
  background: var(--chataigne);
  border-color: var(--chataigne);
}
.reserver[aria-pressed="true"]::before { content: "✓ "; }

/* Le bouton prend la couleur de sa piste */
.creneau--conference .reserver {
  color: var(--olive);
  border-color: color-mix(in srgb, var(--olive) 45%, transparent);
}
.creneau--conference .reserver:hover { background: color-mix(in srgb, var(--olive) 10%, transparent); }
.creneau--conference .reserver[aria-pressed="true"] {
  color: var(--creme);
  background: var(--olive);
  border-color: var(--olive);
}

/* Retour à la grille après le panneau sombre de l'invité */
.programme__entree {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: clamp(.5rem, 2vw, 1rem);
}
.programme__entree h3 {
  font-size: var(--pas-l);
  color: var(--olive);
  margin-bottom: .55rem;
}
.programme__entree p { font-size: var(--pas-s); color: var(--encre-douce); }

/* ── 9. L'invité du salon ───────────────────────────────────
   Le seul rendez-vous payant, à jauge limitée, et le dernier de la
   soirée du samedi. Fond vert profond, comme le pied de page : c'est
   la fin du jour, et ça le distingue sans sortir de la palette. */

.phare {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 4px;
  background: linear-gradient(168deg, var(--olive) 0%, var(--olive-sombre) 100%);
  color: color-mix(in srgb, var(--creme) 86%, transparent);
  box-shadow: 0 20px 45px -30px rgba(30, 36, 24, .9);
}

.phare__portrait {
  width: clamp(150px, 22vw, 300px);
  align-self: stretch;               /* toute la hauteur du texte */
  max-height: 640px;
  border-radius: 5px 12px 4px 10px;  /* le galbe des pierres du mur */
  overflow: hidden;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .8);
}
.phare__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;       /* le regard reste dans le cadre */
}

.phare__sourcil {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tournesol);
  margin-bottom: .7rem;
}
.phare__nom {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--creme);
}
.phare__role {
  margin-top: .3rem;
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--pas-l);
  color: var(--tournesol);
}

/* Les trois faits qui décident : quand, quoi, combien de places. */
.phare__faits {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 1.5rem 0;
  background: color-mix(in srgb, var(--creme) 16%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--creme) 16%, transparent);
}
.phare__faits li {
  flex: 1 1 8rem;
  padding: .7rem .9rem;
  font-size: var(--pas-s);
  color: color-mix(in srgb, var(--creme) 70%, transparent);
  background: var(--olive-sombre);
}
.phare__faits span {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  color: var(--creme);
}

.phare__texte { max-width: 66ch; }
.phare__texte p + p { margin-top: .9rem; }

.phare__jauge {
  max-width: 66ch;
  margin-top: 1.35rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--or);
  font-size: var(--pas-s);
  color: var(--tournesol);
}

.phare__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.35rem;
  margin-top: 1.75rem;
}
.phare__mention {
  font-size: var(--pas-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--creme) 55%, transparent);
}

/* Le seul bouton doré du site : il n'y a qu'une place à réserver ici. */
.bouton--or {
  background: var(--tournesol);
  color: var(--olive-sombre);
  border-color: var(--tournesol);
}
.bouton--or:hover { background: var(--creme); border-color: var(--creme); }

/* Le module de billetterie, déplié à la demande */
.billetterie {
  grid-column: 1 / -1;
  overflow: hidden;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  border-radius: 4px;
  background: var(--creme-clair);
}
.billetterie iframe {
  display: block;
  width: 100%;
  min-height: 750px;
  border: 0;
}

/* ── 10. Inscription ───────────────────────────────────────── */

.onglets {
  border: 1px solid color-mix(in srgb, var(--pierre-foncee) 50%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--creme-clair) 78%, transparent);
  overflow: hidden;
}
.onglets__barre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid color-mix(in srgb, var(--pierre-foncee) 50%, transparent);
}
.onglet {
  padding: 1.05rem 1rem;
  font-size: var(--pas-s);
  font-weight: 600;
  color: var(--encre-douce);
  background: color-mix(in srgb, var(--calcaire) 60%, transparent);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.onglet + .onglet { border-left: 1px solid color-mix(in srgb, var(--pierre-foncee) 50%, transparent); }
.onglet:hover { color: var(--olive); }
.onglet.est-actif {
  background: transparent;
  color: var(--olive);
  border-bottom-color: var(--chataigne);
}

.panneau { padding: clamp(1.5rem, 4vw, 2.5rem); }

.rappel-date {
  margin-bottom: 1.75rem;
  padding: .7rem 1rem;
  font-size: var(--pas-s);
  color: var(--chataigne);
  background: color-mix(in srgb, var(--tournesol) 22%, transparent);
  border-left: 2px solid var(--or);
  border-radius: 0 3px 3px 0;
}

/* Le choix des créneaux : le programme, en cases à cocher, rangé
   comme la grille — samedi ateliers | samedi conférences, puis
   dimanche. Deux colonnes fixes, sinon les paires se désalignent. */
.choix-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: .9rem;
}
.choix-bloc h4 {
  font-family: var(--police-texte);
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chataigne);
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
}
.choix-bloc ul { display: grid; gap: .1rem; }
.choix { display: flex; align-items: start; gap: .6rem; }
.choix input {
  margin-top: .42rem;
  width: .95rem;
  height: .95rem;
  flex: none;
  accent-color: var(--chataigne);
}
/* Spécificité montée d'un cran : sinon ces libellés héritent des
   capitales espacées de « .champ label ». */
.champ .choix label {
  flex: 1;
  padding: .3rem 0;
  font-size: var(--pas-s);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--encre-douce);
  cursor: pointer;
}
.champ .choix:has(input:checked) label { color: var(--olive-sombre); font-weight: 500; }

/* Créneau rendu indisponible par un chevauchement */
.choix.est-en-conflit label { color: color-mix(in srgb, var(--encre-douce) 55%, transparent); cursor: not-allowed; }
.choix.est-en-conflit input { cursor: not-allowed; }
.choix__conflit { font-style: italic; }

.reserver:disabled {
  color: color-mix(in srgb, var(--encre-douce) 60%, transparent);
  border-color: color-mix(in srgb, var(--pierre-foncee) 45%, transparent);
  border-style: dashed;
  background: transparent;
  cursor: not-allowed;
}
.jour--conf .reserver:disabled { color: color-mix(in srgb, var(--encre-douce) 60%, transparent); }

.choix-total {
  margin-top: 1.3rem;
  padding: .7rem 1rem;
  font-size: var(--pas-s);
  color: var(--encre-douce);
  background: color-mix(in srgb, var(--calcaire) 55%, transparent);
  border-left: 2px solid var(--pierre-foncee);
  border-radius: 0 3px 3px 0;
  transition: border-color var(--transition), color var(--transition);
}
.choix-total.est-remplie {
  color: var(--chataigne);
  border-left-color: var(--chataigne);
  font-weight: 500;
}

/* La grille tarifaire des exposants */
.tableau-tarifs { margin-bottom: 2.25rem; }
.tableau-tarifs > table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pas-s);
}
.tableau-tarifs th,
.tableau-tarifs td {
  padding: .8rem .7rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--pierre-foncee) 32%, transparent);
  vertical-align: top;
}
.tableau-tarifs thead th {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-douce);
  border-bottom-color: var(--encre-douce);
}
.tableau-tarifs tbody th {
  font-weight: 500;
  color: var(--olive-sombre);
}
.tableau-tarifs tbody th small {
  display: block;
  font-size: var(--pas-xs);
  font-weight: 400;
  color: var(--encre-douce);
}
.tableau-tarifs td b {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--chataigne);
  font-feature-settings: "tnum" 1;
}
.tableau-tarifs td span {
  display: block;
  font-size: var(--pas-xs);
  letter-spacing: .06em;
  color: var(--encre-douce);
}
.tableau-tarifs__part th,
.tableau-tarifs__part td { background: color-mix(in srgb, var(--calcaire) 45%, transparent); }
.tableau-tarifs__note {
  margin-top: .9rem;
  font-size: var(--pas-xs);
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 62ch;
}

/* Le champ qui n'apparaît qu'une fois la case cochée : le filet
   d'or à gauche dit qu'il dépend de la ligne du dessus. */
.champ-conditionnel {
  overflow: hidden;
  margin-top: -.4rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--or);
}
.champ-conditionnel .champ__aide { margin-bottom: 0; }

.formulaire { display: grid; gap: 1.25rem; }
.champ-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.champ { display: grid; gap: .4rem; border: 0; padding: 0; }
.champ--court { max-width: 9rem; }

.champ label,
.champ legend {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 0;
}
.champ__option { font-weight: 400; letter-spacing: .06em; text-transform: none; opacity: .8; }
.champ__aide {
  font-size: var(--pas-s);
  color: var(--encre-douce);
  margin-bottom: .35rem;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="number"],
.champ select,
.champ textarea {
  width: 100%;
  padding: .72rem .85rem;
  background: var(--creme-clair);
  border: 1px solid color-mix(in srgb, var(--pierre-foncee) 65%, transparent);
  border-radius: 3px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { resize: vertical; line-height: 1.55; }
.champ select { appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238E5223' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 0;
  border-color: var(--chataigne);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tournesol) 38%, transparent);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: #A03A2B; }

.champ--case { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; }
.champ--case input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--olive); }
.champ--case label {
  font-size: var(--pas-s);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
}

.radios { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  font-size: var(--pas-s);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
  border: 1px solid color-mix(in srgb, var(--pierre-foncee) 60%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.radio input { accent-color: var(--olive); }
.radio:has(input:checked) {
  border-color: var(--olive);
  background: color-mix(in srgb, var(--olive) 9%, transparent);
}

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.25rem;
  margin-top: .5rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--pierre-foncee) 32%, transparent);
}
.formulaire__mention { font-size: var(--pas-s); color: var(--encre-douce); }
/* Le champ piège : hors de l'écran plutôt qu'en display:none, que
   certains robots savent détecter et éviter. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mention-donnees {
  margin-top: 1rem;
  font-size: var(--pas-xs);
  line-height: 1.6;
  color: color-mix(in srgb, var(--encre-douce) 85%, transparent);
  max-width: 64ch;
}
.mention-donnees a { color: var(--chataigne); }

.formulaire__retour {
  padding: .8rem 1rem;
  font-size: var(--pas-s);
  color: var(--olive-sombre);
  background: color-mix(in srgb, var(--olive) 12%, transparent);
  border-left: 2px solid var(--olive);
  border-radius: 0 3px 3px 0;
}
.formulaire__retour.est-en-echec {
  color: #7A2E1E;
  background: color-mix(in srgb, #A03A2B 12%, transparent);
  border-left-color: #A03A2B;
}

.formulaire button[type="submit"]:disabled {
  opacity: .6;
  cursor: progress;
}

/* ── 11. Infos pratiques ───────────────────────────────────── */

.grille-pratique {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--pierre-foncee) 40%, transparent);
  border-radius: 4px;
  overflow: hidden;
}
.carte-info {
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  background: color-mix(in srgb, var(--creme-clair) 72%, transparent);
}
.carte-info h3 {
  font-size: var(--pas-xs);
  font-family: var(--police-texte);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chataigne);
  margin-bottom: 1rem;
}
.carte-info p { font-size: var(--pas-s); color: var(--encre-douce); }
.carte-info p + p { margin-top: .8rem; }
.carte-info dl { margin: 0 0 .8rem; }
.carte-info dt {
  font-family: var(--police-titre);
  font-size: 1.0625rem;
  color: var(--olive);
  margin-top: .6rem;
}
.carte-info dd { margin: 0; font-size: var(--pas-s); color: var(--encre-douce); }
.carte-info strong { color: var(--olive); font-weight: 600; }

.affiche-lien {
  display: grid;
  gap: .8rem;
  justify-items: start;
  text-decoration: none;
  font-size: var(--pas-s);
  font-weight: 600;
  color: var(--olive);
  margin-bottom: .8rem;
}
.affiche-lien img {
  width: 140px;
  border-radius: 3px;
  box-shadow: 0 10px 26px -16px rgba(47, 53, 41, .75);
  transition: transform var(--transition), box-shadow var(--transition);
}
.affiche-lien:hover img {
  transform: translateY(-3px) rotate(-.8deg);
  box-shadow: 0 16px 34px -16px rgba(47, 53, 41, .8);
}
.affiche-lien__poids {
  display: block;
  font-weight: 400;
  font-size: var(--pas-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ── 12. Pied de page ──────────────────────────────────────── */

.pied {
  padding-block: clamp(3.5rem, 8vh, 6rem) 2rem;
  background: var(--olive-sombre);
  color: color-mix(in srgb, var(--creme) 82%, transparent);
}
.pied a { color: inherit; }

.pied__signature { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.pied__regle {
  width: min(100%, 420px);
  height: 24px;
  margin: 0 auto 1.5rem;
  overflow: visible;
}
.pied__regle path { stroke: var(--or); stroke-width: 1; }
.pied__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--creme);
}
.pied__lieu {
  margin-top: .9rem;
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tournesol);
}

.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
.pied__bloc h2 {
  font-family: var(--police-texte);
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tournesol);
  margin-bottom: 1.1rem;
}
.pied__bloc p { font-size: var(--pas-s); }
.pied__bloc p + p { margin-top: .8rem; }
.pied__bloc a { text-decoration-color: color-mix(in srgb, var(--tournesol) 55%, transparent); }
.pied__bloc a:hover { color: var(--tournesol); }

.partenaires { display: flex; flex-wrap: wrap; gap: 1.5rem 1.75rem; }
.partenaires a {
  display: grid;
  gap: .7rem;
  justify-items: start;
  text-decoration: none;
}
.partenaires img {
  height: 78px;
  width: auto;
  padding: .7rem .9rem;
  background: var(--creme-clair);
  border-radius: 3px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.partenaires a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8);
}
.partenaires span {
  font-size: var(--pas-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--creme) 65%, transparent);
  transition: color var(--transition);
}
.partenaires a:hover span { color: var(--tournesol); }

.pied__liens { display: grid; gap: .55rem; font-size: var(--pas-s); }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { color: var(--tournesol); text-decoration: underline; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--creme) 18%, transparent);
  font-size: var(--pas-xs);
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--creme) 55%, transparent);
}

/* ── 13. Mouvement ─────────────────────────────────────────── */

.js-anim [data-anim="montee"] { opacity: 0; }
.js-anim .heros__image img { opacity: 0; }
.js-anim .ruban { opacity: 0; }
.js-anim .pierre { opacity: 0; }
.js-anim .seance,
.js-anim .conf,
.js-anim .sommaire__item,
.js-anim .carte-info { opacity: 0; }
.js-anim .horizon { transform: scaleX(0); transform-origin: left center; }
.js-anim .horizon__fleur { opacity: 0; }

/* ── 14. Adaptations ───────────────────────────────────────── */

/* Sur un écran large, le titre tient sur une seule ligne, centrée en haut
   de la bande — au-dessus des collines, pas sur les tournesols. Les deux
   membres se remettent côte à côte ; inline-block plutôt qu'inline, sinon
   l'animation d'entrée n'aurait aucune prise. */
@media (min-width: 701px) {
  .heros__texte { text-align: center; }
  .heros__titre {
    display: block;
    font-size: clamp(1.95rem, 4.05vw, 3.5rem);
    margin-bottom: 1rem;
  }
  .heros__titre .ligne { display: inline-block; vertical-align: baseline; }
  .heros__accroche { margin-inline: auto; }
}

@media (max-width: 900px) {
  /* Plus assez de large pour trois pistes côte à côte : la grille se
     replie en une seule colonne, dans l'ordre chronologique du HTML.
     Ce qui se chevauche reste voisin, en dessous au lieu d'à côté. */
  .grille-jour { display: block; }
  .grille-jour__enseigne,
  .grille-jour__heure,
  .grille-jour__filet { display: none; }
  .creneau { margin-bottom: 6px; padding: .85rem 1rem .9rem; }
  .phare { grid-template-columns: minmax(0, 1fr); }
  .phare__portrait { width: clamp(140px, 40vw, 220px); align-self: start; max-height: none; }
  .creneau__lieu { display: block; }
  .choix-grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .nav, .entete__cta { display: none; }
  .burger { display: inline-flex; }
  .entete { background: color-mix(in srgb, var(--creme) 92%, transparent); backdrop-filter: blur(14px); }

  /* Le fond crème est là dès le chargement : l'encre doit rester sombre,
     y compris au-dessus de la bannière. */
  .entete:not(.est-posee) .marque__ligne1 { color: var(--olive); }
  .entete:not(.est-posee) .marque__ligne2 { color: var(--encre-douce); }
  .entete:not(.est-posee) .burger { border-color: color-mix(in srgb, var(--olive) 32%, transparent); }
  .entete:not(.est-posee) .burger__barres i { background: var(--olive); }
  .entete:not(.est-posee) .burger__mot { color: var(--encre); }
  .ruban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro { grid-template-columns: minmax(0, 1fr); }
  .entete-section--avec-image { grid-template-columns: minmax(0, 1fr); }
  .entete-section--avec-image .vignette { order: -1; }
  .entete-section--duo { grid-template-columns: minmax(0, 1fr); }
  .entete-section--duo .entete-section__note { margin-top: 1.2rem; }
}

@media (max-width: 700px) {
  :root { --pas-m: 1rem; }
  /* L'intitulé doit tenir sur une ligne à côté du bouton menu : sa taille
     suit la largeur de l'écran plutôt que de se replier. */
  .marque__ligne1 { font-size: clamp(.72rem, 3.3vw, .9375rem); white-space: nowrap; }
  /* Le cadrage vertical a son propre rapport (0,56) : la bande suit ce
     rapport-la, et l'ancrage a 42 % garde la planche et le couteau. */
  .heros__image { height: min(82svh, 148vw); }
  .heros__image img { object-position: center 42%; }
  /* Le titre se lit en trois temps, centrés ; l'accroche suit, sinon elle
     pendrait à gauche sous un titre centré. */
  .heros__texte { padding-top: clamp(5.25rem, 14vh, 7.5rem); text-align: center; }
  .heros__accroche { margin-inline: auto; }
  .heros__pied { padding-top: .9rem; }
  /* Deux colonnes plutôt qu'une : le bandeau est deux fois moins haut,
     et le panier de la bannière reste visible au-dessus. */
  .ruban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruban__bloc { padding: .85rem .9rem; }
  .ruban__valeur { font-size: 1.05rem; }
  .ruban__note { font-size: .8125rem; }
  /* Quatre blocs, deux colonnes : une grille 2 × 2 pleine, sans case
     vide par laquelle l'image transparaîtrait. */
  .ruban__bloc--actions { flex-direction: column; gap: .45rem; }
  .ruban__bloc--actions .bouton { width: 100%; padding: .65rem .8rem; }
  .champ-duo { grid-template-columns: minmax(0, 1fr); }
  .onglets__barre { grid-template-columns: minmax(0, 1fr); }
  .onglet + .onglet { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--pierre-foncee) 50%, transparent); }
  .conf { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .1rem .9rem; }
  .conf__quand { font-size: 1.15rem; }
  .jour--conf .reserver { grid-column: 2; grid-row: auto; justify-self: start; margin-top: .6rem; }
  .choix-grille { gap: 1.35rem 1.5rem; }
  .tableau-tarifs { overflow-x: auto; }
  .tableau-tarifs > table { min-width: 460px; }
  .fiche__interieur { grid-template-columns: minmax(0, 1fr); }
  .fiche__corps { padding-right: 0; }
  /* Deux pierres par assise : le mur reste un mur sur un téléphone.
     La base doit être relative, sinon une seule pierre tient par ligne. */
  .pierre { flex: var(--w) 1 40%; min-width: 40%; padding: .85rem .9rem .8rem; }
  .pierre h3 { font-size: 1rem; }
  .pierre__metier { font-size: .875rem; }
  .sommaire__nombre { font-size: 2rem; }
  .entete-section--avec-image .vignette { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-anim [data-anim="montee"],
  .js-anim .heros__image img,
  .js-anim .ruban,
  .js-anim .pierre,
  .js-anim .seance,
  .js-anim .conf,
  .js-anim .sommaire__item,
  .js-anim .carte-info,
  .js-anim .horizon__fleur { opacity: 1; }
  .js-anim .horizon { transform: none; }
}