/* =========================================================================
   Bio Romandie — feuille de style unique
   Aucune dépendance, aucune requête externe. Polices auto-hébergées.
   Ordre : polices › jetons › base › primitives › en-tête › sections › pied
   ========================================================================= */

/* ---------- 1. Polices auto-hébergées ---------------------------------- */
@font-face {
  font-family: 'Inter var';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Jetons de conception ------------------------------------ */
:root {
  /* Couleurs relevées au pixel sur les deux maquettes */
  --vert:        #90b956;
  --vert-fonce:  #4b673e;
  --vert-nuit:   #2c3d24;
  --brun:        #522717;
  --encre:       #241914;

  --gris:        #6b6560;
  --gris-clair:  #e7e3dd;
  --creme:       #faf8f3;
  --creme-2:     #f2efe7;

  --vert-10:     rgba(144, 185, 86, .10);
  --vert-20:     rgba(144, 185, 86, .22);

  /* Typographie */
  --titre: 'Poppins', 'Trebuchet MS', system-ui, sans-serif;
  --texte: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rythme */
  --wrap: 1180px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Formes */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 40px;

  --ombre-s: 0 1px 2px rgba(36, 25, 20, .06), 0 4px 12px rgba(36, 25, 20, .05);
  --ombre-m: 0 2px 6px rgba(36, 25, 20, .05), 0 18px 40px -14px rgba(36, 25, 20, .18);
  --ombre-l: 0 30px 70px -30px rgba(44, 61, 36, .45);

  --transition: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 3. Base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: #fff;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--brun);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.85rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.85rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--vert-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brun); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

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

::selection { background: var(--vert-20); color: var(--brun); }

/* ---------- 4. Primitives ---------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--vert-fonce);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-s) 0;
  font-weight: 600;
}
.saut:focus { left: 0; color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--vert);
  border-radius: 2px;
}

.section { padding-block: var(--section-y); position: relative; }
.section-creme { background: var(--creme); }
.section-nuit  { background: var(--vert-nuit); color: #e9e6df; overflow: hidden; }
.section-nuit h2, .section-nuit h3 { color: #fff; }
.section-nuit .eyebrow { color: var(--vert); }
.section-nuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(144, 185, 86, .16), transparent 70%),
    radial-gradient(60% 60% at 92% 100%, rgba(144, 185, 86, .12), transparent 70%);
  pointer-events: none;
}
.section-nuit .wrap { position: relative; }

.tete {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.tete .eyebrow { justify-content: center; }
.tete .sous { color: var(--gris); font-size: 1.08rem; margin: 0; }
/* Sans paragraphe d'introduction, le h2 garderait sa marge basse et la section
   respirerait plus large que les autres. */
.tete > :last-child { margin-bottom: 0; }
.section-nuit .tete .sous { color: rgba(255, 255, 255, .72); }

.gris { color: var(--gris); }

/* Boutons ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--vert);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 .95rem/1 var(--texte);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), color var(--transition);
  box-shadow: 0 1px 2px rgba(36, 25, 20, .1);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(75, 103, 62, .55);
  color: var(--btn-fg);
}
.btn:active { transform: translateY(0); }

.btn-primaire { --btn-bg: var(--vert-fonce); }
.btn-primaire:hover { --btn-bg: #3f5834; }

.btn-accent { --btn-bg: var(--vert); --btn-fg: #223018; }

.btn-fantome {
  --btn-bg: transparent;
  --btn-fg: var(--brun);
  box-shadow: inset 0 0 0 1.5px var(--gris-clair);
}
.btn-fantome:hover {
  --btn-bg: var(--brun);
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px var(--brun);
}

.btn-sm { padding: .62rem 1.2rem; font-size: .85rem; }
.btn-bloc { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--vert-fonce);
}
.lien-fleche svg { width: 16px; height: 16px; transition: transform var(--transition); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* Apparition au défilement ------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.visible { opacity: 1; transform: none; }

/* Sans JavaScript, le contenu doit rester lisible (et indexable). */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 5. En-tête -------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.entete.defile {
  border-bottom-color: var(--gris-clair);
  box-shadow: 0 6px 24px -18px rgba(36, 25, 20, .5);
}

.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.marque { display: inline-flex; align-items: center; text-decoration: none; }
.marque img { width: 176px; height: 39px; }

.nav-liste {
  display: flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-liste a {
  position: relative;
  display: block;
  padding: .5rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
  transition: color var(--transition);
}
.nav-liste a:hover { color: var(--vert-fonce); }
/* Section courante signalée par un trait fin, pas par un fond coloré. */
.nav-liste a.actif { color: var(--vert-fonce); }
.nav-liste a.actif::after {
  content: '';
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--vert);
}
.nav-liste .btn.actif::after { display: none; }
/* Le bouton Contact reçoit aussi la classe .actif quand sa section est visible.
   Sans cette règle, `.nav-liste a.actif` (0-2-1) l'emporte sur `.nav-liste .btn`
   (0-2-0) et repeint le texte en --vert-fonce, soit la couleur de fond exacte
   de .btn-primaire : le libellé disparaît. Spécificité 0-3-0, donc prioritaire. */
.nav-liste .btn.actif { color: #fff; }
.nav-liste .btn { color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.nav-liste .btn:hover { background: #3f5834; color: #fff; }

.bascule {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--gris-clair);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.bascule span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--brun);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.bascule span:nth-child(1) { top: 16px; }
.bascule span:nth-child(2) { top: 22px; }
.bascule span:nth-child(3) { top: 28px; }
.bascule[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bascule[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.bascule[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .bascule { display: block; }
  .nav {
    position: fixed;
    inset: 76px 0 auto;
    background: #fff;
    border-bottom: 1px solid var(--gris-clair);
    padding: 1rem var(--gouttiere) 1.75rem;
    box-shadow: var(--ombre-m);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 320ms cubic-bezier(.2, .7, .3, 1);
  }
  .nav.ouvert { clip-path: inset(0 0 0 0); }
  .nav-liste { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav-liste a { padding: .9rem .6rem; font-size: .95rem; }
  .nav-liste .btn { margin-top: .6rem; justify-content: center; padding: .9rem; }
}

/* ---------- 6. Héros ---------------------------------------------------- */
.heros {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
}
.heros::before {
  content: '';
  position: absolute;
  top: -340px;
  right: -260px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--vert-20) 0%, rgba(144, 185, 86, 0) 68%);
  border-radius: 50%;
  pointer-events: none;
}
.heros-grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.heros h1 { margin-bottom: .35em; }
/* Mots-clés mis en avant par la couleur seule, sans effet de surligneur. */
.heros h1 .surligne { color: var(--vert-fonce); }
.heros-accroche {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--gris);
  max-width: 34rem;
  margin-bottom: 2rem;
}
.heros-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }

.heros-preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--gris-clair);
  list-style: none;
  margin: 0;
}
.heros-preuves li { display: flex; flex-direction: column; }
.heros-preuves b {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brun);
  line-height: 1.15;
}
.heros-preuves span { font-size: .82rem; color: var(--gris); }

.heros-visuel { position: relative; }
.cadre-principal {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-l);
  aspect-ratio: 4 / 3;
}
.cadre-principal img { width: 100%; height: 100%; object-fit: cover; }

.cadre-secondaire {
  position: absolute;
  left: -2rem;
  bottom: -2.4rem;
  width: 44%;
  max-width: 215px;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--ombre-m);
  aspect-ratio: 1 / 1;
}
.cadre-secondaire img { width: 100%; height: 100%; object-fit: cover; }

.pastille {
  position: absolute;
  top: -1.3rem;
  right: -.8rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1.15rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--ombre-m);
  font-size: .84rem;
  font-weight: 600;
  color: var(--brun);
}
.pastille .point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vert);
  animation: pouls 2.4s infinite;
}
@keyframes pouls {
  0%   { box-shadow: 0 0 0 0 rgba(144, 185, 86, .6); }
  70%  { box-shadow: 0 0 0 12px rgba(144, 185, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(144, 185, 86, 0); }
}

@media (max-width: 900px) {
  .heros-grille { grid-template-columns: 1fr; }
  .heros-visuel { margin-top: 1.5rem; margin-bottom: 2rem; }
  .cadre-secondaire { left: auto; right: 1rem; bottom: -1.8rem; width: 38%; }
  .pastille { top: -1rem; right: .5rem; }
}

/* ---------- 7. Premier écran : héros + bandeau --------------------------- */
/* Le bandeau doit affleurer le bas de la fenêtre à l'arrivée, puis défiler
   normalement — rien n'est figé, ni `fixed` ni `sticky`. Il suffit que héros
   + bandeau mesurent ensemble exactement une hauteur d'écran : le bandeau
   tombe alors de lui-même sur le bord bas, et remonte avec la page dès qu'on
   défile.
   77px = l'en-tête, qui est `sticky` et occupe donc sa place dans le flux
   au-dessus de <main> (.entete-inner min-height 76px + 1px de bordure).
   `svh` plutôt que `vh` : sur mobile, `vh` mesure la fenêtre barre d'URL
   rétractée, ce qui pousserait le bandeau sous la ligne de flottaison à
   l'arrivée — exactement le défaut qu'on corrige. */
.premier-ecran {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 77px);
  min-height: calc(100svh - 77px);
}
/* Le héros absorbe la hauteur restante et recentre son contenu dedans, pour
   que l'espace gagné se répartisse au lieu de s'empiler sous le texte.
   `flex: 1 0 auto` : il peut grandir, jamais rétrécir sous son contenu — sur
   un écran bas, le bloc dépasse simplement la fenêtre au lieu de se comprimer. */
.premier-ecran > .heros {
  flex: 1 0 auto;
  display: grid;
  align-content: center;
}

/* ---------- Bandeau de confiance ---------------------------------------- */
.bandeau {
  background: var(--creme);
  border-block: 1px solid var(--creme-2);
  padding-block: 1.5rem;
}
/* Grille plutôt que flex : les quatre repères forment toujours des rangées
   complètes (4 · 2×2 · 1), jamais un élément orphelin sur une deuxième ligne. */
.bandeau-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: center;
  align-items: center;
  gap: 1rem 2rem;
  list-style: none;
  /* `margin: 0` écraserait le `margin-inline: auto` de .wrap et collerait la
     bande à gauche : on ne remet à zéro que les marges verticales. */
  margin-block: 0;
}
.bandeau-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--vert-fonce);
}
.bandeau-item svg { width: 19px; height: 19px; flex: none; }

/* Les 4 colonnes réclament ~1081 px de contenu + 80 px de gouttière : en
   dessous de 1220 px les libellés se comprimeraient sur deux lignes, donc on
   bascule en 2×2 avec une marge de sécurité. */
@media (max-width: 1219px) {
  .bandeau-inner { grid-template-columns: repeat(2, minmax(0, auto)); gap: 1rem 3rem; }
}
@media (max-width: 620px) {
  .bandeau-inner { grid-template-columns: minmax(0, auto); gap: .85rem; }
}

/* ---------- 8. Cartes services ------------------------------------------ */
.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
  gap: 1.4rem;
}
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.8rem 2rem;
  background: #fff;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.carte::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--vert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.carte:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--ombre-m); }
.carte:hover::after { transform: scaleX(1); }

.carte-icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.4rem;
  border-radius: 16px;
  background: var(--vert-10);
  color: var(--vert-fonce);
}
.carte-icone svg { width: 28px; height: 28px; }
.carte h3 { margin-bottom: .5rem; }
.carte p { font-size: .96rem; color: var(--gris); margin: 0; }
.carte-num {
  position: absolute;
  top: 1.5rem;
  right: 1.6rem;
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gris-clair);
  letter-spacing: .1em;
}

/* ---------- 9. Fonctionnement (frise) ----------------------------------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.etape { position: relative; padding-top: 3.9rem; }
.etape::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .05);
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}
.etape::after {
  content: '';
  position: absolute;
  top: 26px;
  left: 64px;
  right: -1.6rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06));
}
.etape:last-child::after { display: none; }
.etape h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.etape p { font-size: .95rem; color: rgba(255, 255, 255, .72); margin: 0; }

@media (max-width: 760px) { .etape::after { display: none; } }

/* ---------- 10. Blocs deux colonnes ------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.duo > * { min-width: 0; align-self: center; }

/* Grille à une cellule : l'image remplit toujours le cadre, quelle que soit
   sa proportion d'origine. */
.cadre-photo {
  display: grid;
  height: 100%;
  min-height: clamp(320px, 42vw, 520px);
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-m);
}
.cadre-photo img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .cadre-photo { min-height: 280px; }
}

.liste-puces { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.liste-puces li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .85rem;
  font-size: .99rem;
}
.liste-puces li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vert-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b673e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Frise historique */
.frise {
  display: grid;
  gap: 1.1rem;
  margin: 2.2rem 0 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--gris-clair);
  list-style: none;
}
.frise li { position: relative; }
.frise li::before {
  content: '';
  position: absolute;
  left: calc(-1.6rem - 6px);
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 4px var(--creme);
}
.frise b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  color: var(--brun);
  letter-spacing: .02em;
}
.frise span { font-size: .95rem; color: var(--gris); }

/* ---------- 11. Producteurs / cantons ----------------------------------- */
.cantons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: .9rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.canton {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-m);
  font-weight: 600;
  font-size: .93rem;
  color: var(--brun);
  transition: border-color var(--transition), transform var(--transition);
}
.canton:hover { border-color: var(--vert); transform: translateY(-3px); }
.canton .sigle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--vert-10);
  color: var(--vert-fonce);
  font-family: var(--titre);
  font-size: .8rem;
  letter-spacing: .04em;
}

.citation {
  margin: 2rem 0 0;
  padding: 1.8rem 2rem;
  background: #fff;
  border-left: 3px solid var(--vert);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  box-shadow: var(--ombre-s);
}
.citation p {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--brun);
  line-height: 1.5;
  margin-bottom: .8rem;
}
.citation footer { font-size: .88rem; color: var(--gris); }

/* ---------- 12. Cartes illustrées (grille d'actualités) ------------------
   ⚠️ Styles CONSERVÉS mais PLUS UTILISÉS : la section « Actualités » a été
   retirée de index.html le 2026-08-12 (les 3 articles étaient fictifs).
   Le gabarit est gardé tel quel pour pouvoir reconstruire la grille le jour
   où il y aura de vraies actualités — ou tout autre contenu en 3 cartes :
     <section><div class="wrap"><div class="grille-actus">
       <article class="actu">
         <div class="actu-media"><img …></div>
         <div class="actu-corps">
           <p class="actu-date">…</p><h3>…</h3><p>…</p>
           <a class="lien-fleche" href="…">…</a>
         </div>
       </article> ×3
     </div></div></section>
   ------------------------------------------------------------------------ */
.grille-actus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 278px), 1fr));
  gap: 1.6rem;
}
.actu {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.actu:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); }
.actu-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--creme-2); }
.actu-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.actu:hover .actu-media img { transform: scale(1.05); }
.actu-corps { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.actu-date {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: .6rem;
}
.actu h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.actu p { font-size: .93rem; color: var(--gris); margin-bottom: 1.2rem; }
.actu .lien-fleche { margin-top: auto; }

/* ---------- 13. FAQ ------------------------------------------------------ */
.faq { max-width: 48rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--gris-clair); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem .2rem;
  font-family: var(--titre);
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--brun);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vert-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b673e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 13px no-repeat;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-reponse { padding: 0 .2rem 1.4rem; color: var(--gris); font-size: .98rem; }

/* ---------- 14. Contact -------------------------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

.coordonnees { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.3rem; }
.coordonnees li { display: flex; gap: 1rem; align-items: flex-start; }
.coordonnees .ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--vert-10);
  color: var(--vert-fonce);
}
.coordonnees .ic svg { width: 20px; height: 20px; }
.coordonnees b {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .15rem;
}
.coordonnees a { font-weight: 500; text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; }
.coordonnees .val { font-style: normal; }

/* Formulaire */
.formulaire {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.8rem);
  background: var(--vert-fonce);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-l);
  overflow: hidden;
}
.formulaire::before {
  content: '';
  position: absolute;
  right: -90px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 185, 86, .38), transparent 65%);
  pointer-events: none;
}
.formulaire > * { position: relative; }
.formulaire h3 {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  margin-bottom: .4rem;
}
.formulaire .intro { color: rgba(255, 255, 255, .78); font-size: .95rem; margin-bottom: 1.7rem; }

.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .rangee { grid-template-columns: 1fr; } }

.champ { margin-bottom: 1rem; }
.champ label {
  display: block;
  margin-bottom: .4rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.champ label .req { color: var(--vert); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: 400 1rem/1.5 var(--texte);
  color: var(--encre);
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--r-s);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.champ textarea { resize: vertical; min-height: 128px; }
.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23522717' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
  padding-right: 2.6rem;
}
.champ input::placeholder, .champ textarea::placeholder { color: #a29a93; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 4px rgba(144, 185, 86, .35);
}
.champ.erreur input,
.champ.erreur select,
.champ.erreur textarea { border-color: #ffb4a2; box-shadow: 0 0 0 4px rgba(255, 138, 112, .25); }
.champ.ok input, .champ.ok textarea { border-color: rgba(144, 185, 86, .8); }

.compteur {
  display: block;
  margin-top: .35rem;
  font-size: .76rem;
  text-align: right;
  color: rgba(255, 255, 255, .55);
}

.msg-erreur { margin: .4rem 0 0; font-size: .83rem; font-weight: 500; color: #ffd9cf; }

.rgpd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .7rem;
  margin: .4rem 0 1.4rem;
  font-size: .83rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.rgpd input { width: 18px; height: 18px; margin: .2rem 0 0; flex: none; accent-color: var(--vert); }
.rgpd a { color: #fff; }
.rgpd.erreur { color: #ffd9cf; }
/* Le message d'erreur de la case à cocher passe sous le libellé, pas à côté. */
.rgpd .msg-erreur { flex: 0 0 100%; margin: 0 0 0 1.7rem; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.statut {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-radius: var(--r-s);
  font-size: .92rem;
  font-weight: 500;
  display: none;
}
.statut.visible { display: block; }
.statut.ok { background: rgba(255, 255, 255, .95); color: #2f5a22; }
.statut.ko { background: rgba(255, 214, 204, .95); color: #7a2d16; }

.note-demo {
  margin: 1.1rem 0 0;
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* ---------- 15. Pied de page --------------------------------------------- */
.pied {
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .93rem;
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: 1fr; } }

.pied img { width: 176px; height: 39px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .92; }
.pied h4 {
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pied a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.pied a:hover { color: var(--vert); }
.pied address { font-style: normal; line-height: 1.8; }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .83rem;
}
.pied-bas p { margin: 0; }

/* ---------- 16. Bouton retour en haut ------------------------------------ */
.haut {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--vert-fonce);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--ombre-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.haut.visible { opacity: 1; visibility: visible; transform: none; }
.haut svg { width: 20px; height: 20px; }

/* ---------- 17. Pages secondaires ---------------------------------------- */
.page-simple { padding-block: clamp(3rem, 7vw, 6rem); }
.page-simple .wrap { max-width: 46rem; }
.page-simple h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.page-simple dt { font-weight: 600; color: var(--brun); }
.page-simple dd { margin: 0 0 .8rem; }

.erreur-404 { text-align: center; padding-block: clamp(5rem, 14vw, 10rem); }
.erreur-404 .code {
  font-family: var(--titre);
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 700;
  line-height: 1;
  color: var(--vert);
  margin: 0;
}

/* ---------- 18. Impression ----------------------------------------------- */
@media print {
  .entete, .haut, .formulaire, .pied { display: none; }
  body { font-size: 11pt; }
  .reveal { opacity: 1; transform: none; }
}