/* ==========================================================================
   AGRINOVA GROUP — feuille de styles principale
   Design system + Header + Hero
   Les couleurs sont sondées directement sur la maquette validée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Verts */
  --vert-fonce:     #00482a;  /* fond du header */
  --vert-fonce-alt: #003a22;  /* pastilles sur fond vert */
  --vert-titre:     #0a3d24;  /* « POUR UNE BIODIVERSITÉ » */
  --vert-accent:    #64a81c;  /* « AGRICOLE » */
  --vert-accent-texte: #4a7d15; /* le même vert, lisible en petit texte */
  --vert-texte:     #1b3b2c;  /* corps de texte */
  --vert-doux:      #577566;  /* texte secondaire */

  /* Or */
  --or:        #ffbd12;
  --or-clair:  #ffd83d;
  --or-sombre: #ffb000;
  --or-texte:  #00301f;       /* texte posé sur l’or */

  /* Neutres */
  --noir: #111111;          /* texte du bandeau */
  --noir-trait: 17, 17, 17;  /* composantes du noir, pour les voiles */
  --blanc: #ffffff;
  --creme: #fffdf4;
  --brume: #f3f6ee;
  --ciel:  #eef6fb;

  /* Typographie */
  --police: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rythme */
  --hauteur-entete: 92px;
  --retrait-hero: clamp(0px, 12vw, 170px);
  --gouttiere: clamp(20px, 4vw, 64px);
  --largeur-max: 1680px;

  /* Habillage */
  /* Trois rayons suffisent : un trait, un petit, un de conteneur.
     La feuille en comptait treize, poses au cas par cas. */
  --rayon-trait: 3px;   /* liseres, barres, traits */
  --rayon-petit: 9px;   /* champs, liens de menu, petits blocs */
  --rayon-pill: 999px;
  --rayon: 14px;        /* cartes et conteneurs */
  --ombre-or: 0 8px 22px rgba(255, 176, 0, .35);
  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

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

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

/* Les ancres doivent s’arrêter sous l’en-tête collant, pas dessous */
:target { scroll-margin-top: calc(var(--hauteur-entete) + 18px); }
section[id], li[id] { scroll-margin-top: calc(var(--hauteur-entete) + 18px); }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--vert-texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--vert-fonce);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95);
  border-radius: var(--rayon-petit);
}

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

/* Posée par le script le temps d’un changement de palier responsive */
.sans-transition *, .sans-transition *::before, .sans-transition *::after {
  transition: none !important;
}

/* Lien d’évitement clavier */
.lien-evitement {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 200;
  transform: translate(-50%, -140%);
  padding: 12px 22px;
  font-weight: 700;
  color: var(--or-texte);
  background: var(--or);
  border-radius: 0 0 var(--rayon) var(--rayon);
  transition: transform var(--transition);
}
.lien-evitement:focus { transform: translate(-50%, 0); }

/* Visible uniquement pour les lecteurs d’écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-size: .95rem;
  font-weight: 800;
  white-space: nowrap;
  border-radius: var(--rayon-pill);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn svg { flex: none; }

.btn--or {
  color: var(--or-texte);
  background: linear-gradient(180deg, var(--or-clair), var(--or-sombre));
  box-shadow: var(--ombre-or);
}
.btn--or:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 176, 0, .45); }
.btn--or:active { transform: translateY(0); }

.btn--contour {
  color: var(--vert-fonce);
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(0, 72, 42, .28);
  backdrop-filter: blur(4px);
}
.btn--contour:hover { background: var(--blanc); border-color: var(--vert-fonce); transform: translateY(-2px); }

/* Pastille « lecture » du bouton secondaire */
.btn__play {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-left: -10px;
  color: var(--blanc);
  background: var(--vert-fonce);
  border-radius: 50%;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc);
  /* Le bord gauche du hero est presque blanc : sans ce filet, le
     bandeau s'y dissoudrait au défilement. */
  border-bottom: 1px solid rgba(var(--noir-trait), .18);
  box-shadow: 0 1px 14px rgba(0, 40, 22, .07);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  max-width: var(--largeur-max);
  min-height: var(--hauteur-entete);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* -- Marque -- */
.marque { display: flex; align-items: center; gap: 18px; flex: none; }

/* Le bandeau est blanc : le mot-symbole vert foncé du logo officiel s’y
   lit directement. La plaque qui lui rendait son contraste sur le vert
   n’a plus d’objet, et le logo inversé n’est plus nécessaire. */
.marque__plaque {
  display: block;
}
.marque__logo { height: 54px; width: auto; }

.marque__sep {
  width: 1px;
  height: 46px;
  background: rgba(var(--noir-trait), .18);
}

.marque__baseline {
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--noir);
}

/* -- Navigation -- */
.nav { margin-inline: auto; }
.nav__liste { display: flex; align-items: center; gap: clamp(2px, .8vw, 14px); }
.nav__item { position: relative; }

.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--noir);
  border-radius: var(--rayon-petit);
  transition: background var(--transition), color var(--transition);
}
.nav__lien:hover { background: rgba(var(--noir-trait), .06); color: var(--noir); }

.nav__lien[aria-current="page"],
.nav__lien.est-actif {
  background: rgba(var(--noir-trait), .07);
  color: var(--noir);
  font-weight: 700;
}
.nav__lien[aria-current="page"]::after,
.nav__lien.est-actif::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%;
  bottom: 4px;
  height: 3px;
  background: var(--vert-fonce);
  border-radius: var(--rayon-trait);
}

.nav__chevron { transition: transform var(--transition); }
[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* -- Sous-menu -- */
.sous-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 246px;
  padding: 10px;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: 0 18px 44px rgba(0, 40, 22, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.sous-menu.est-ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ouverture au survol : uniquement sur pointeur fin et grand écran */
@media (min-width: 1261px) and (hover: hover) {
  .nav__item:hover .sous-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.sous-menu a {
  display: block;
  padding: 11px 16px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--noir);
  border-radius: var(--rayon-petit);
  transition: background var(--transition), color var(--transition);
}
.sous-menu a:hover { background: var(--brume); color: var(--vert-fonce); }

/* -- Actions à droite -- */
.entete__actions { display: flex; align-items: center; gap: 13px; flex: none; }

.entete__sep {
  width: 1px;
  height: 40px;
  background: rgba(var(--noir-trait), .16);
}

.icone-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--noir);
  background: rgba(var(--noir-trait), .05);
  border: 1px solid rgba(var(--noir-trait), .45);
  border-radius: 50%;
  transition: background var(--transition);
}
.icone-btn:hover { background: rgba(var(--noir-trait), .1); }

/* `display: grid` ci-dessus l emporterait sur l attribut hidden : on le dit
   explicitement, sinon un bouton masque resterait visible. */
.icone-btn[hidden] { display: none; }

/* -- Sélecteur de langue -- */
.langue { position: relative; }

.langue__bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid rgba(var(--noir-trait), .45);
  border-radius: var(--rayon-pill);
}
.langue__bouton:hover { background: var(--brume); }

/* Drapeaux en SVG : les emoji drapeaux ne sont pas rendus sous Windows */
.drapeau {
  flex: none;
  width: 21px;
  height: 15px;
  border-radius: var(--rayon-trait);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.langue__liste {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 142px;
  padding: 8px;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: 0 18px 44px rgba(0, 40, 22, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.langue__liste.est-ouvert { opacity: 1; visibility: visible; transform: translateY(0); }

.langue__liste a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--noir);
  border-radius: var(--rayon-petit);
}
.langue__liste a:hover { background: var(--brume); }

/* -- Burger -- */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;                 /* entraxe des traits = 5 + 2.5 = 7.5px */
  width: 46px; height: 46px;
  color: var(--noir);
}
.burger__trait {
  display: block;
  width: 24px; height: 2.5px;
  background: currentColor;
  border-radius: var(--rayon-trait);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] .burger__trait:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__trait:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
/* Le hero adopte les proportions exactes de la photo de fond (2170 × 725).
   La photo est donc visible en entier : feuillages des deux bords, maison, arbre.
   Si le contenu dépasse, la boîte grandit — `aspect-ratio` reste une préférence. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  aspect-ratio: 2170 / 725;
  background: var(--brume);
}

/* Calque 1 — le paysage, plein cadre */
.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center / cover no-repeat;
  background-image: url("../img/hero-fond.jpg");                /* repli */
  background-image: image-set(url("../img/hero-fond.webp") type("image/webp"),
                              url("../img/hero-fond.jpg")  type("image/jpeg"));
}

/* Voile blanc dégressif : rend la colonne de texte lisible sans masquer la photo */
.hero__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .42)   0%,   /* le feuillage du bord reste vif */
    rgba(255, 255, 255, .88)   7%,
    rgba(255, 255, 255, .86)  32%,   /* zone du texte */
    rgba(255, 255, 255, .52)  55%,
    rgba(255, 255, 255, .16)  74%,
    rgba(255, 255, 255, 0)   100%);  /* maison, arbre et feuillage droit intacts */
}

/* Calque 2 — la feuille de cultures, PNG d’origine sans retouche */
.hero__feuille {
  position: absolute;
  z-index: -1;
  /* Rapprochée du soleil, au centre du fond. Le décalage se resserre sur les
     écrans étroits pour garder de l’air avec la rangée d’atouts. */
  /* Rapprochée du soleil, au centre du fond. La matière de la feuille ne
     commence qu’à 26 % de sa boîte (51 % près de la pointe), ce qui permet
     de la remonter bien plus près du texte qu’il n’y paraît. */
  right: 26%;
  bottom: 17%;
  height: 76%;
  /* Halo blanc diffus : détache la feuille du champ sans retoucher le PNG.
     Les deux passes se cumulent — une proche et dense, une large et douce. */
  --halo: clamp(10px, 1.25vw, 23px);
  filter:
    drop-shadow(0 0 calc(var(--halo) * .4) #fff)
    drop-shadow(0 0 var(--halo) #fff)
    drop-shadow(0 0 calc(var(--halo) * 2.6) rgba(255, 255, 255, .8));
  pointer-events: none;
}
.hero__feuille img {
  height: 100%;
  width: auto;
  max-width: none;
}

/* Toutes les mesures du hero sont en vw : le bloc de texte garde donc les mêmes
   proportions que la photo, quelle que soit la largeur, et rien n’est rogné. */
.hero__inner {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 1.05vw var(--gouttiere);
}

/* La paire texte + feuille est centrée, comme sur la référence : de larges
   marges extérieures et un faible écart entre les deux. */
.hero__contenu {
  margin-left: var(--retrait-hero);
  max-width: min(62%, 1100px);
}

/* -- Surtitre -- */
.hero__surtitre {
  margin: 0 0 .72vw;
  font-size: clamp(.52rem, .68vw, .9rem);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vert-titre);
}
.hero__surtitre::before {
  content: "";
  display: block;
  width: 3.4vw;
  min-width: 38px;
  height: .31vw;
  min-height: 3px;
  margin-bottom: .78vw;
  background: var(--or);
  border-radius: var(--rayon-trait);
}

/* -- Titre --
   Composition en trois temps : « Pour une » encadré de filets, les deux grands
   mots en capitales condensées, puis l’ornement. Le bloc se cale sur la largeur
   du mot le plus long grâce à `fit-content`, ce qui aligne filets et ornement. */
.hero__titre {
  width: fit-content;
  margin: 0 0 .95vw;
  font-size: clamp(2.1rem, 5.5vw, 7rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--vert-titre);
}

/* « Pour une » */
.titre__sur {
  display: flex;
  align-items: center;
  gap: .42em;
  margin-bottom: 0;
  font-family: var(--police);
  font-size: .3em;
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1;
  text-indent: .3em;          /* compense la chasse après la dernière lettre */
}
.titre__sur::before,
.titre__sur::after {
  content: "";
  flex: 1;
  height: .1em;
  background: currentColor;
}

/* « Biodiversité » et « Agricole » */
/* L’accent de « É » dépasse la capitale de 0,25 em dans Anton : il faut
   cet écart pour qu’il ne percute pas le filet de « Pour une ». */
.titre__sur + .titre__fort { margin-top: .22em; }

.titre__fort {
  position: relative;
  display: block;
  font-family: 'Anton', var(--police);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .004em;
}
.titre__fort.est-accent { color: var(--vert-accent); }

/* Feuille posée sur le mot, purement décorative */
.titre__feuille {
  position: absolute;
  left: 43%;
  top: 47%;
  transform: translate(-50%, -50%) rotate(-6deg);
  height: .54em;
  width: auto;
}

/* Filet et feuilles de clôture */
.titre__ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .34em;
  margin-top: .08em;
}
.titre__ornement::before,
.titre__ornement::after {
  content: "";
  flex: 1;
  max-width: 2.4em;
  height: .05em;
  min-height: 1px;
  background: currentColor;
}
.titre__ornement svg { height: .24em; width: auto; }

/* -- Accroche -- */
.hero__accroche {
  max-width: 34ch;
  margin: 0 0 1.2vw;
  font-size: clamp(.78rem, 1.1vw, 1.45rem);
  line-height: 1.52;
  color: var(--vert-texte);
}
.hero__accroche strong { font-weight: 800; color: var(--vert-titre); }

/* -- Boutons -- */
.hero__actions { display: flex; flex-wrap: wrap; gap: 1vw; }
.hero__actions .btn {
  padding: .85vw 1.6vw;
  font-size: clamp(.7rem, .89vw, 1.15rem);
}
.hero__actions .btn__play {
  width: 1.75vw; height: 1.75vw;
  min-width: 22px; min-height: 22px;
  margin-left: -.5vw;
}

/* -- Atouts -- */
.hero__atouts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8vw;
  margin-top: .7vw;
  margin-left: var(--retrait-hero);
}

.hero__atouts li {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Fond translucide : la photo du champ passe dessous, le texte doit rester
     lisible quel que soit le feuillage. */
  padding: 4px 12px 4px 6px;
  font-size: clamp(.72rem, .82vw, .78rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--vert-texte);
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(10, 61, 36, .09);
  border-radius: var(--rayon-pill);
  backdrop-filter: blur(3px);
}

.atout__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 2vw; height: 2vw;
  min-width: 24px; min-height: 24px;
  max-width: 48px; max-height: 48px;
  color: var(--blanc);
  background: var(--vert-fonce);
  border-radius: 50%;
}
.atout__icone svg { width: 48%; height: 48%; }

/* ==========================================================================
   6. Responsive
   ========================================================================== */

/* -- Écrans intermédiaires : on resserre la nav -- */
@media (max-width: 1480px) {
  /* Six onglets + actions : on resserre pour rester sur une ligne, barre de
     défilement comprise (elle retire ~15 px de largeur utile). */
  .nav__liste { gap: clamp(0px, .45vw, 10px); }
  .nav__lien { padding: 11px 10px; font-size: .88rem; }
  .entete__actions { gap: 10px; }
  .entete__actions .btn--or { padding: 13px 18px; font-size: .88rem; }
}

@media (max-width: 1340px) {
  .marque__baseline, .marque__sep { display: none; }
}

/* -- Tablette et mobile : menu en tiroir -- */
@media (max-width: 1260px) {
  :root { --hauteur-entete: 76px; }

  .marque__logo { height: 42px; }

  /* La navigation sort du flux une fois en tiroir : il faut pousser
     explicitement la langue et le burger contre le bord droit. */
  .entete__actions { margin-left: auto; }
  .burger { display: flex; }
  .entete__sep, .icone-btn, .entete__actions .btn--or { display: none; }

  .nav {
    position: fixed;
    inset: var(--hauteur-entete) 0 auto 0;
    max-height: calc(100dvh - var(--hauteur-entete));
    margin: 0;
    padding: 18px var(--gouttiere) 30px;
    overflow-y: auto;
    background: var(--blanc);
    border-top: 1px solid rgba(var(--noir-trait), .1);
    box-shadow: 0 22px 40px rgba(0, 40, 22, .16);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav.est-ouvert { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__lien { width: 100%; justify-content: space-between; padding: 15px 16px; font-size: 1rem; }
  .nav__lien[aria-current="page"]::after,
  .nav__lien.est-actif::after { left: 16px; right: auto; width: 26px; bottom: 7px; }

  .sous-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 4px 0 4px 14px;
    background: none;
    box-shadow: none;
    border-left: 2px solid rgba(var(--noir-trait), .14);
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sous-menu.est-ouvert { display: block; }
  .sous-menu a { color: var(--noir); }
  .sous-menu a:hover { background: var(--brume); color: var(--vert-fonce); }

  /* Le CTA et la langue passent dans le tiroir */
  .nav__pied { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
  .nav__pied .btn--or { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 1261px) {
  .nav__pied { display: none; }
}

/* -- Le hero passe en pile : texte d’abord, photo ensuite.
      L’échelle en vw n’a plus de sens ici, on repasse en tailles absolues. -- */
@media (max-width: 1260px) {
  .hero {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }

  .hero__inner {
    order: 1;
    padding: clamp(36px, 7vw, 56px) var(--gouttiere) 0;
  }

  .hero__surtitre { margin-bottom: 18px; font-size: .7rem; }
  .hero__surtitre::before { width: 56px; height: 5px; margin-bottom: 18px; }
  .hero__accroche { margin-bottom: clamp(26px, 5vw, 36px); font-size: clamp(1rem, 4vw, 1.2rem); }
  .hero__actions { gap: 14px; }
  .hero__actions .btn { padding: 15px 26px; font-size: .95rem; }
  .hero__actions .btn__play { width: 30px; height: 30px; margin-left: -10px; }
  .hero__atouts li { gap: 11px; font-size: .78rem; }
  .atout__icone { width: 38px; height: 38px; }

  /* Le voile devient vertical : le texte occupe toute la largeur */
  .hero__fond::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .96)   0%,
      rgba(255, 255, 255, .93)  52%,
      rgba(255, 255, 255, .58) 100%);
  }

  .hero__feuille {
    position: relative;
    inset: auto;
    order: 2;
    align-self: center;
    width: clamp(240px, 38vw, 420px);
    height: auto;
    margin-top: clamp(20px, 4vw, 36px);
  }
  .hero__feuille img { width: 100%; height: auto; }

  .hero__contenu { margin-left: 0; max-width: none; }
  .hero__atouts { margin-left: 0; }
  /* Anton est condensée : il faut monter la taille pour remplir la colonne */
  .hero__titre { font-size: clamp(3rem, 15vw, 5.6rem); }
  .hero__accroche { max-width: none; }

  .hero__atouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: clamp(28px, 6vw, 40px) 0 clamp(36px, 7vw, 52px);
  }
  .hero__atouts li {
    padding: 14px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(10, 61, 36, .1);
    border-radius: var(--rayon);
  }
  .hero__atouts li + li { padding-left: 14px; border-left: 1px solid rgba(10, 61, 36, .1); }
  .atout__icone { width: 36px; height: 36px; }
}

@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .hero__atouts { gap: 10px; }
  .hero__atouts li { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 12px; }
  .hero__atouts li + li { padding-left: 12px; }
}

@media (max-width: 380px) {
  .hero__atouts { grid-template-columns: 1fr; }
  .hero__atouts li { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   7. SECTIONS DE CONTENU
   Tout ce qui suit le hero. Le hero garde ses propres règles, en amont.
   ========================================================================== */

.section {
  padding: clamp(60px, 7vw, 112px) 0;
  background: var(--blanc);
}
.section--creme { background: var(--creme); }

.section--vert {
  color: rgba(255, 255, 255, .88);
  background: var(--vert-fonce);
}
.section--vert .section__titre { color: var(--blanc); }
.section--vert .section__surtitre { color: var(--or); }
.section--vert .section__chapo { color: rgba(255, 255, 255, .72); }

.section__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* -- En-tête de section -- */
.section__entete {
  max-width: 62ch;
  margin: 0 auto clamp(40px, 4.5vw, 68px);
  text-align: center;
}

.section__surtitre {
  margin: 0 0 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vert-accent-texte);
}

.section__titre {
  margin: 0;
  font-family: 'Anton', var(--police);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--vert-titre);
}

.section__chapo {
  margin: 18px 0 0;
  font-size: clamp(.95rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  color: var(--vert-doux);
}

/* --------------------------------------------------------------------------
   Nos domaines d’activité
   -------------------------------------------------------------------------- */
.domaines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
/* Les familles à une seule entrée s’étalent en ligne plutôt qu’en bloc */
.domaines--large { grid-template-columns: minmax(0, 1fr); }
.domaines--large .domaine {
  display: grid;
  grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
  padding-right: clamp(70px, 7vw, 110px);
}
.domaines--large .domaine__icone { margin-bottom: 0; }
.domaines--large .domaine__titre { margin: 0; }
.domaines--large .domaine__texte { margin: 0; }

@media (max-width: 760px) {
  .domaines--large .domaine {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-right: clamp(26px, 2.4vw, 36px);
  }
  .domaines--large .domaine__icone { margin-bottom: 4px; }
}

/* Intertitre de famille : productions, moyens techniques, valorisation */
.domaines__groupe {
  margin: clamp(30px, 3vw, 44px) 0 16px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vert-doux);
}
.domaines__groupe:first-of-type { margin-top: 0; }

@media (max-width: 860px) {
  .domaines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .domaines { grid-template-columns: minmax(0, 1fr); }
}

.domaine {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 2.4vw, 36px);
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .12);
  border-radius: var(--rayon);
  transition: background var(--transition), border-color var(--transition);
}
.domaine:hover {
  background: var(--brume);
  border-color: rgba(10, 61, 36, .3);
}

.domaine__numero {
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: 'Anton', var(--police);
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(10, 61, 36, .07);
}

.domaine__icone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  color: var(--blanc);
  background: var(--vert-fonce);
  border-radius: var(--rayon);
}
.domaine__icone svg { width: 27px; height: 27px; }

.domaine__titre {
  margin: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--vert-titre);
}

.domaine__texte {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--vert-doux);
}

/* --------------------------------------------------------------------------
   Notre identité
   -------------------------------------------------------------------------- */
.identite {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.identite__texte .section__surtitre,
.identite__texte .section__titre { text-align: left; }

.identite__texte .section__titre { margin-bottom: 22px; }

.identite__texte p {
  margin: 0 0 16px;
  max-width: 52ch;
  font-size: clamp(.98rem, 1.1vw, 1.12rem);
  line-height: 1.68;
  color: var(--vert-texte);
}

.identite__texte .btn { margin-top: 14px; }

.identite__visuel {
  display: block;
  justify-self: center;
}
.identite__visuel img {
  width: 100%;
  max-width: 330px;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 48, 28, .18));
}

/* --------------------------------------------------------------------------
   Nos cultures — catalogue photographique
   Les vignettes sont découpées dans la feuille composée de la marque.
   -------------------------------------------------------------------------- */
.cultures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.culture {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--brume);
}
.culture img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}
.culture:hover img { transform: scale(1.06); }

.culture__nom {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 14px 12px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--blanc);
  background: linear-gradient(180deg, transparent, rgba(0, 40, 22, .86));
  text-shadow: 0 1px 3px rgba(0, 30, 16, .6);
}

.cultures__complement {
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  font-size: .95rem;
  text-align: center;
  color: var(--vert-doux);
}
.cultures__complement strong { font-weight: 700; color: var(--vert-titre); }

.cultures__mot {
  margin: clamp(32px, 3.6vw, 50px) auto 0;
  max-width: 24ch;
  font-family: 'Anton', var(--police);
  font-size: clamp(1.35rem, 2.3vw, 2.3rem);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--vert-accent-texte);
}

@media (max-width: 820px) {
  .cultures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .cultures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .culture__nom { padding: 22px 11px 10px; font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   Nos engagements
   -------------------------------------------------------------------------- */
.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  counter-reset: none;
}

.engagements li {
  padding-top: 26px;
  border-top: 2px solid rgba(255, 255, 255, .22);
}

.engagement__numero {
  display: block;
  margin-bottom: 14px;
  font-family: 'Anton', var(--police);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--or);
}

.engagement__titre {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--blanc);
}

.engagements p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, .74);
}

/* -- Citation -- */
.citation {
  max-width: 44ch;
  margin: clamp(48px, 5.5vw, 86px) auto 0;
  text-align: center;
}

.citation blockquote {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.72rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  color: var(--blanc);
}
.citation blockquote::before { content: "« "; color: var(--or); }
.citation blockquote::after  { content: " »"; color: var(--or); }

.citation figcaption {
  margin-top: 18px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.coordonnees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
}

.coordonnees li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  font-size: 1.02rem;
  font-weight: 700;
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .12);
  border-radius: var(--rayon-pill);
  transition: border-color var(--transition), background var(--transition);
}
.coordonnees li:hover {
  background: var(--brume);
  border-color: var(--vert-accent-texte);
}
.coordonnees a { color: var(--vert-titre); }

.coordonnee__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--blanc);
  background: var(--vert-fonce);
  border-radius: 50%;
}
.coordonnee__icone svg { width: 21px; height: 21px; }

/* ==========================================================================
   8. PIED DE PAGE
   ========================================================================== */
.pied {
  padding: clamp(46px, 5vw, 74px) 0 0;
  color: rgba(255, 255, 255, .78);
  background: var(--vert-fonce);
}

.pied__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  gap: clamp(30px, 4vw, 64px);
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere) clamp(38px, 4vw, 58px);
}

.pied__marque picture {
  display: block;
  width: fit-content;
  padding: 8px 14px;
  background: var(--blanc);
  border-radius: var(--rayon);
}
.pied__marque img { height: 52px; width: auto; }

.pied__baseline {
  margin: 16px 0 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.pied__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
}
.pied__nav a,
.pied__coordonnees a {
  font-size: .93rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  transition: color var(--transition);
}
.pied__nav a:hover,
.pied__coordonnees a:hover { color: var(--or); }

.pied__coordonnees { display: grid; gap: 11px; }

.pied__mentions {
  margin: 0;
  padding: 22px var(--gouttiere);
  font-size: .82rem;
  text-align: center;
  color: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ==========================================================================
   9. Responsive des sections
   ========================================================================== */
@media (max-width: 900px) {
  .identite { grid-template-columns: minmax(0, 1fr); }
  .identite__visuel { order: -1; }
  .identite__visuel img { max-width: 240px; }
  .identite__texte .section__surtitre,
  .identite__texte .section__titre { text-align: center; }
  .identite__texte p { max-width: none; text-align: center; }
  .identite__texte .btn { display: flex; width: fit-content; margin-inline: auto; }

  .pied__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .pied__nav ul { justify-items: center; }
}

@media (max-width: 560px) {
  .domaine__numero { font-size: 2.8rem; }
  .cultures li { padding: 11px 20px; font-size: .9rem; }
  .coordonnees li { width: 100%; justify-content: center; padding: 16px 20px; font-size: .95rem; }
  .pied__nav ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ==========================================================================
   10. CONTACT — formulaire et coordonnées
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
  gap: clamp(26px, 3.5vw, 56px);
  max-width: 1040px;
  margin: 0 auto;
}

.formulaire {
  padding: clamp(26px, 2.8vw, 42px);
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .12);
  border-radius: var(--rayon);
}

.formulaire__intro {
  margin: 0 0 24px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--vert-titre);
}

.champ { margin-bottom: 18px; }

.champ label {
  display: block;
  margin-bottom: 7px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--vert-titre);
}
.champ__option { font-weight: 500; color: var(--vert-doux); }

.champ input,
.champ textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: .95rem;
  color: var(--vert-texte);
  background: var(--brume);
  border: 1.5px solid rgba(10, 61, 36, .14);
  border-radius: var(--rayon-petit);
  transition: border-color var(--transition), background var(--transition);
}
.champ textarea { resize: vertical; min-height: 118px; }

.champ input:focus,
.champ textarea:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--vert-accent);
}
.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: 3px solid var(--vert-fonce);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95);
}

.champ input.est-invalide,
.champ textarea.est-invalide { border-color: #c0392b; background: #fdf3f2; }

.champ__erreur {
  margin: 7px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: #c0392b;
}

.formulaire .btn { width: 100%; justify-content: center; margin-top: 6px; }

.formulaire__etat {
  margin: 16px 0 0;
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
}
.formulaire__etat:empty { margin: 0; }
.formulaire__etat.est-erreur  { color: #c0392b; }
.formulaire__etat.est-succes  { color: var(--vert-accent-texte); }

/* -- Coordonnées, en colonne à droite -- */
.contact__coordonnees h3 {
  margin: 0 0 18px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-doux);
}
.contact__coordonnees .coordonnees {
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}
.contact__coordonnees .coordonnees li { width: 100%; padding: 15px 20px; font-size: .94rem; }

/* ==========================================================================
   11. BANDEAU D’APPEL
   ========================================================================== */
.appel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 6vw, 94px) 0;
  text-align: center;
  background: var(--vert-fonce);
}
.appel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: center / cover no-repeat;
  background-image: url("../img/hero-fond.jpg");
  background-image: image-set(url("../img/hero-fond.webp") type("image/webp"),
                              url("../img/hero-fond.jpg")  type("image/jpeg"));
  opacity: .3;
}
.appel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 72, 42, .82), rgba(0, 58, 34, .92));
}

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

.appel__surtitre {
  margin: 0 0 16px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}

.appel__titre {
  margin: 0 0 30px;
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.42;
  color: var(--blanc);
}
.appel__titre strong { font-weight: 800; color: var(--or-clair); }

/* ==========================================================================
   12. Responsive — contact
   ========================================================================== */
@media (max-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__coordonnees .coordonnees { flex-direction: row; flex-wrap: wrap; }
  .contact__coordonnees .coordonnees li { width: auto; flex: 1 1 240px; justify-content: center; }
}

/* ==========================================================================
   13. JOBS — offres détaillées
   ========================================================================== */
.offres {
  display: grid;
  gap: clamp(20px, 2.2vw, 32px);
  max-width: 1180px;
  margin: 0 auto;
}

.offre {
  padding: clamp(26px, 2.8vw, 42px);
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .12);
  border-radius: var(--rayon);
  transition: background var(--transition), border-color var(--transition);
}
.offre:hover {
  background: var(--brume);
  border-color: rgba(10, 61, 36, .3);
}

.offre__entete {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid rgba(10, 61, 36, .1);
}

.offre__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  color: var(--blanc);
  background: var(--vert-fonce);
  border-radius: var(--rayon);
}
.offre__icone svg { width: 27px; height: 27px; }

.offre__titre {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.26;
  color: var(--vert-titre);
}

.offre__accroche {
  margin: 0;
  max-width: 62ch;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--vert-doux);
}

.offre__soustitre {
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-accent-texte);
}

.offre__liste { display: grid; gap: 10px; }

.offre__liste li {
  position: relative;
  padding-left: 26px;
  font-size: .94rem;
  line-height: 1.58;
  color: var(--vert-texte);
}
.offre__liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 9px;
  height: 9px;
  background: var(--vert-accent);
  border-radius: 50%;
}

.offre__pied { padding-top: clamp(4px, 1vw, 10px); }

@media (max-width: 760px) {
}

@media (max-width: 480px) {
  .offre__entete { flex-direction: column; gap: 16px; }
  .offre__pied .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   14. CANDIDATURE
   ========================================================================== */
.candidature {
  max-width: 760px;
  margin: clamp(34px, 3.8vw, 54px) auto 0;
}

.candidature__titre {
  margin: 0 0 24px;
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--vert-titre);
}

.formulaire--candidature { background: var(--brume); }
.formulaire--candidature .champ input,
.formulaire--candidature .champ select,
.formulaire--candidature .champ textarea { background: var(--blanc); }

.champ-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.champ select {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: .95rem;
  color: var(--vert-texte);
  background: var(--brume);
  border: 1.5px solid rgba(10, 61, 36, .14);
  border-radius: var(--rayon-petit);
  transition: border-color var(--transition);
}
.champ select:focus { outline: none; border-color: var(--vert-accent); }
.champ select:focus-visible {
  outline: 3px solid var(--vert-fonce);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95);
}
.champ select.est-invalide { border-color: #c0392b; }

.champ input[type="file"] {
  padding: 11px 14px;
  font-size: .9rem;
  cursor: pointer;
}
.champ input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 16px;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--blanc);
  background: var(--vert-fonce);
  border: 0;
  border-radius: var(--rayon-petit);
  cursor: pointer;
}
.champ input[type="file"]::file-selector-button:hover { background: var(--vert-accent); }

/* -- Case à cocher du consentement -- */
.champ--case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 26px 0 22px;
}
.champ--case input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--vert-fonce);
  cursor: pointer;
}
.champ--case label {
  margin: 0;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--vert-texte);
  cursor: pointer;
}
.champ--case .champ__erreur { grid-column: 1 / -1; margin-top: 2px; }
.champ--case input.est-invalide { outline: 2px solid #c0392b; outline-offset: 2px; }

@media (max-width: 560px) {
  .champ-duo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --------------------------------------------------------------------------
   Hero centré sur petit écran
   En pile, la colonne occupe toute la largeur : le texte aligné à gauche
   paraît déséquilibré. On centre le surtitre, le titre et l’accroche.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero__contenu { text-align: center; }
  .hero__surtitre::before { margin-inline: auto; }
  .hero__titre { margin-inline: auto; }
  .hero__accroche { max-width: 42ch; margin-inline: auto; }
  .hero__actions { justify-content: center; }
}

/* ==========================================================================
   15. PAGES JOBS — liste des postes et page d’une offre
   ========================================================================== */
/* Ces pages n’ont pas de hero : un bandeau clair tient lieu d’entrée en
   matière et porte le fil d’Ariane, le titre et le chapô. */
.page-entete {
  padding: clamp(34px, 5vw, 64px) 0 clamp(28px, 4vw, 52px);
  background: var(--brume);
  border-bottom: 1px solid rgba(10, 61, 36, .1);
}

.page-entete__titre {
  margin: 0;
  font-family: 'Anton', var(--police);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--vert-titre);
}

/* -- Fil d’Ariane -- */
.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  font-size: .85rem;
  font-weight: 600;
  color: var(--vert-doux);
}
.fil a {
  color: var(--vert-titre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fil a:hover { color: var(--vert-fonce); }
.fil [aria-current="page"] { color: var(--vert-doux); font-weight: 500; }

/* -- Informations pratiques d’une offre -- */
.offre-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 16px 0 0;
}
.offre-meta--entete { margin-top: clamp(18px, 2vw, 26px); }

.offre-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--vert-titre);
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .14);
  border-radius: var(--rayon-pill);
}
.offre-meta__item svg { flex: none; width: 15px; height: 15px; }

/* Une offre fermée doit se repérer d’un coup d’œil, sans dépendre de la
   seule couleur : le libellé le dit en toutes lettres. */
.offre-meta__item--close {
  color: #8a2a1e;
  background: #fdf3f2;
  border-color: rgba(138, 42, 30, .3);
}

/* Le bandeau est clair : la pastille y gagne un fond plus net. */
.page-entete .offre-meta__item { background: var(--blanc); }

/* -- Lien « Voir le poste » -- */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--vert-fonce);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: gap var(--transition);
}
.lien-fleche:hover { gap: 14px; }
.lien-fleche svg { flex: none; }

/* Le titre de la carte est cliquable sans changer d’aspect. */
.offre__lien { color: inherit; }
.offre__lien:hover { text-decoration: underline; text-underline-offset: 4px; }

/* -- Carte resserrée, pour l’aperçu de l’accueil et les autres postes -- */
.offre--compacte { padding: clamp(22px, 2.2vw, 30px); }
.offre--compacte .offre__entete { padding-bottom: clamp(16px, 1.6vw, 22px); }

/* -- Détail d’une offre : missions et profil côte à côte -- */
.offre-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(22px, 3vw, 48px);
  max-width: 1180px;
  margin: 0 auto clamp(34px, 4vw, 58px);
  padding: clamp(26px, 2.8vw, 42px);
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .12);
  border-radius: var(--rayon);
}

/* -- Appel vers la page des offres, depuis l’accueil -- */
.jobs__appel {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 46px);
}

/* -- Les autres postes, en bas d’une offre -- */
.jobs__autres { margin-top: clamp(44px, 5vw, 80px); }

.jobs__autres-titre {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 800;
  color: var(--vert-titre);
}

/* -- Aucun poste ouvert -- */
.jobs__vide {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 38px);
  font-size: 1rem;
  line-height: 1.65;
  text-align: center;
  color: var(--vert-texte);
  background: var(--brume);
  border-radius: var(--rayon);
}
.jobs__vide a { color: var(--vert-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* -- Responsive -- */
@media (max-width: 860px) {
  .offre-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .fil { font-size: .8rem; gap: 7px; }
  .offre-meta__item { font-size: .78rem; padding: 6px 11px; }
}

/* --------------------------------------------------------------------------
   Liste des postes en rangées
   --------------------------------------------------------------------------
   La page des offres se balaie plutôt qu'elle ne se lit : les postes tiennent
   en rangées basses pour se voir tous sans défiler. En cartes, un seul des
   quatre était visible à l'ouverture.
   -------------------------------------------------------------------------- */

/* L'en-tête se contente de situer la page : trois lignes suffisent. */
.page-entete--mince {
  padding: clamp(24px, 3.4vw, 40px) 0 clamp(20px, 2.8vw, 32px);
}

.section--serree { padding: clamp(34px, 4vw, 58px) 0; }

.section__chapo--court { max-width: 56ch; }

/* Pastille atténuée, pour une information de second rang. */
.offre-meta__item--sourdine {
  color: var(--vert-doux);
  background: var(--brume);
  border-color: rgba(10, 61, 36, .12);
}

.lien-fleche--sobre {
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 61, 36, .3);
}
.lien-fleche--sobre:hover { border-bottom-color: var(--vert-fonce); }

.btn--petit { padding: 11px 20px; font-size: .88rem; }

.rangees {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--blanc);
  border: 1px solid rgba(10, 61, 36, .12);
  border-radius: var(--rayon);
  overflow: hidden;
}

.rangee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 28px);
  transition: background var(--transition);
}
.rangee + .rangee { border-top: 1px solid rgba(10, 61, 36, .1); }
.rangee:hover { background: var(--brume); }

/* L'icône garde sa pastille mais rétrécit : la rangée doit rester basse. */
.rangee .offre__icone { width: 42px; height: 42px; }
.rangee .offre__icone svg { width: 21px; height: 21px; }

.rangee__titre {
  margin: 0 0 4px;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--vert-titre);
}
.rangee__titre a { color: inherit; }
.rangee__titre a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Une seule ligne d'accroche : au-delà, la rangée n'est plus une rangée. */
.rangee__accroche {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--vert-doux);
}

.rangee__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rangee__meta .offre-meta__item { padding: 5px 11px; font-size: .76rem; }

.rangee__actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}

.rangees__pied {
  max-width: 1180px;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--vert-doux);
}
.rangees__pied a { color: var(--vert-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* -- Formulaire de candidature spontanée, replié --
   Replié il tient en 71 px ; déplié il en prend 855. Sur une page où l'on n'a
   pas encore choisi de poste, il n'a pas à occuper le quart de l'écran. */
.candidature-repliee {
  max-width: 1180px;
  margin: clamp(26px, 3vw, 40px) auto 0;
  background: var(--brume);
  border: 1px solid rgba(10, 61, 36, .14);
  border-radius: var(--rayon);
}

.candidature-repliee__bouton {
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 2.2vw, 28px);
  font-size: 1rem;
  font-weight: 700;
  color: var(--vert-titre);
  cursor: pointer;
  list-style: none;
}
.candidature-repliee__bouton::-webkit-details-marker { display: none; }
.candidature-repliee__bouton::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  font-weight: 800;
  color: var(--vert-accent-texte);
}
.candidature-repliee[open] .candidature-repliee__bouton::before { content: "−"; }
.candidature-repliee__bouton:hover { color: var(--vert-fonce); }

.candidature-repliee__corps {
  padding: 0 clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
}
.candidature-repliee__corps .candidature { margin-top: 0; }

@media (max-width: 900px) {
  .rangee { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
  .rangee__meta, .rangee__actions { grid-column: 2 / -1; }
  .rangee__accroche { -webkit-line-clamp: 2; }
}