/* =====================================================================
   hakea.fr — feuille de style unique
   =====================================================================

   ─── LA CHARTE VIENT DE L’APPLICATION, PAS D’ICI ───

   Les couleurs ci-dessous sont recopiées de `lib/theme/app_colors.dart`,
   qui est la source de vérité. Si la charte de l’application change,
   c’est ce bloc de variables qu’il faut mettre à jour — et lui seul :
   aucune couleur n’est écrite en clair ailleurs dans ce fichier.

   Le reste suit trois principes tenus dans toute l’application :
     - des angles arrondis et des ombres douces plutôt que des cadres nets ;
     - une largeur de lecture BORNÉE, parce qu’un paragraphe étalé sur
       1600 px ne se lit pas ;
     - le vert pour l’action, le rose pour l’accent, et rien d’autre.
   ===================================================================== */

:root {
  /* ─── Couleurs de l’application ─── */
  --vert            : #BFDFC0;   /* pastelGreen */
  --vert-fonce      : #8FBF92;   /* pastelGreenDark */
  --rose            : #F3C9D6;   /* pastelPink */
  --rose-fonce      : #E7A3B8;   /* pastelPinkDark */
  --texte           : #2E2E2E;   /* textDark */
  --texte-clair     : #757575;   /* textLight */
  --fond            : #FFFFFF;
  --fond-doux       : #F7F9F6;   /* fond des sections alternées */
  --bandeau         : #F2F2F2;   /* celui de l’en-tête de l’application */
  --orange          : #E65100;   /* dataAccentOrange, pour les avertissements */

  /* Voile végétal du pied de page. Il n’existe pas dans
     l’application, qui n’a pas de pied de page : c’est le --vert
     ci-dessus, très désaturé, et non une couleur inventée à côté
     de la charte. */
  --vert-voile      : #EEF4EC;

  --bord            : #E4EBE3;
  --ombre           : 0 2px 10px rgba(0, 0, 0, .06);
  --ombre-forte     : 0 6px 24px rgba(0, 0, 0, .10);
  --arrondi         : 16px;
  --arrondi-petit   : 10px;

  --largeur         : 1120px;
  --largeur-etroite : 760px;

  /* Hauteur de l’en-tête collant : sert au décalage des ancres pour
     qu’un titre visé ne se retrouve pas caché dessous. */
  --entete-h        : 68px;
}

/* ─── Base ─────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Le décalage des ancres : sans lui, cliquer « Contact » amène le
     titre EXACTEMENT sous l’en-tête collant, donc invisible. */
  scroll-padding-top: calc(var(--entete-h) + 12px);
}

/* Quiconque a demandé moins d’animations à son système ne veut pas non
   plus d’un défilement animé. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: #4f7a52; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #3d6140; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }

/* ─── Justification ────────────────────────────────────────────────
   Demandée pour l’ensemble des textes.

   ⚠️ SANS CÉSURE, demandée elle aussi — et `hyphens` est donc mis à
   `manual` EXPLICITEMENT, pas seulement omis. C’est la valeur par
   défaut des navigateurs aujourd’hui, mais l’écrire évite qu’une
   feuille de style ajoutée plus tard, ou un futur réglage de
   navigateur, ne réintroduise des coupures sans qu’on l’ait voulu.

   La contrepartie à connaître : sans coupure, la justification écarte
   les mots pour combler les lignes. En français, où les mots sont
   longs, cela se voit surtout dans les colonnes étroites — les cartes
   du carrousel font 340 px. Si l’espacement devient gênant, le levier
   n’est pas la césure mais la LARGEUR de la colonne.

   Ce qui n’est PAS justifié, et pour cause : les titres, les libellés
   de boutons et les entrées de menu. Sur une ligne unique ou deux mots,
   la justification n’a rien à répartir — elle ne ferait qu’écarter les
   lettres au hasard. */
p, li, dd, figcaption, blockquote {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Les listes de navigation et les boutons restent au fer à gauche :
   ce sont des étiquettes, pas du texte suivi. */
.nav li, .pied__colonne li, .carrousel__points button,
.bouton, .plan-du-site__liens li {
  text-align: left;
}

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

/* Lien d’évitement : premier élément atteignable au clavier, invisible
   tant qu’il n’a pas le focus. Obligation d’accessibilité, et deux
   secondes gagnées pour qui navigue au clavier. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--vert-fonce); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--arrondi-petit) 0;
}
.evitement:focus { left: 0; }

.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2.5rem, var(--largeur-etroite)); }

.icone { width: 20px; height: 20px; flex: none; }
.icone--grande { width: 34px; height: 34px; }

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

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 242, 242, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.entete__interieur {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--entete-h);
}

.marque {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--texte); margin-right: auto;
}
.marque img { border-radius: 8px; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__texte strong { font-size: 1.15rem; }
.marque__texte small { color: var(--texte-clair); font-size: .76rem; }

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav ul { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--texte); text-decoration: none; font-size: .93rem;
  padding: .35rem 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--vert); }

/* Section courante, mise à jour par main.js. Le repère est UTILE sur une
   page unique : sans lui, on ne sait plus où l’on en est du défilement. */
.nav a.actif { border-bottom-color: var(--vert-fonce); font-weight: 600; }

.burger {
  display: none; width: 42px; height: 38px;
  background: none; border: 1px solid var(--bord); border-radius: 8px;
  cursor: pointer; padding: 9px 8px;
}
.burger span {
  display: block; height: 2px; background: var(--texte); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--entete-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fond); border-bottom: 1px solid var(--bord);
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: var(--ombre-forte);
    /* Replié par défaut. `display:none` plutôt qu’une hauteur nulle :
       un menu simplement transparent reste atteignable au clavier, ce
       qui piège qui tabule. */
    display: none;
  }
  .nav.ouvert { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--bord); }
  .nav a { display: block; padding: .85rem .2rem; font-size: 1rem; }
  .nav__app { margin-top: 1rem; justify-content: center; }
  .marque__texte small { display: none; }
}

/* ─── Boutons ──────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.bouton--grand { padding: .8rem 1.5rem; font-size: 1rem; }
.bouton--plein { background: var(--vert-fonce); color: #fff; }
.bouton--plein:hover { background: #7fae83; color: #fff; transform: translateY(-1px); box-shadow: var(--ombre); }
.bouton--contour { border-color: var(--vert-fonce); color: #4f7a52; background: transparent; }
.bouton--contour:hover { background: rgba(191, 223, 192, .3); color: #3d6140; }
.bouton--inactif {
  background: #ECECEC; color: var(--texte-clair); cursor: not-allowed;
  font-weight: 500;
}
.bouton:focus-visible,
.nav a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--vert-fonce); outline-offset: 2px;
}

/* ─── Sections ─────────────────────────────────────────────────── */

.section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.section--claire { background: var(--fond-doux); }
/* ─── ⚠️ TITRES ET CHAPÔS À LA LARGEUR DE LEUR BLOC ───

   Le chapô était borné à 62 caractères. Sur une section dont les
   cartes occupent les 1120 px du conteneur, cela donnait un titre et
   deux lignes de texte serrés dans le tiers gauche, au-dessus d'une
   rangée qui va jusqu'au bord : deux colonnes de lecture différentes
   dans un même bloc, et un chapô qui passe à la ligne au milieu d'une
   phrase courte.

   Un chapô est une phrase, pas un paragraphe : il n'a pas besoin d'une
   mesure de lecture. Il suit donc la largeur de ce qu'il annonce.

   ⚠️ L'EXCEPTION est la section « Qui développe Hakea ? » : elle porte
   de la PROSE, plusieurs paragraphes d'affilée, et là la mesure de
   lecture compte plus que l'alignement. Voir plus bas. */
.section__chapo {
  color: var(--texte-clair); font-size: 1.05rem;
  margin-bottom: 2rem;
}
.sous-titre { margin-top: 3rem; }

/* ─── Accueil ──────────────────────────────────────────────────── */

.section--heros { position: relative; overflow: hidden; padding-top: 3.5rem; }

/* Courbes de niveau — décor, jamais lisible par-dessus le texte. */
.courbes {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.courbes ellipse {
  fill: none; stroke: var(--vert-fonce); stroke-width: 1.1; opacity: .16;
}

/* ⚠️ Plus de bride à 46 rem : la phrase d'accroche se cassait en deux
   — « Les données existent. Hakea les / assemble. » — au-dessus d'une
   rangée de cartes deux fois plus large. Une punchline coupée au
   milieu n'en est plus une. Le bloc suit maintenant le conteneur, comme
   ce qui le suit. */
.heros { position: relative; z-index: 1; margin-bottom: 3rem; }
.surtitre {
  text-transform: uppercase; letter-spacing: .09em; font-size: .76rem;
  font-weight: 700; color: #4f7a52; margin-bottom: .8rem;
}
.chapo { font-size: 1.1rem; color: #4a4a4a; }
.heros__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.4rem; }

.origine-nom {
  border-left: 3px solid var(--vert);
  padding-left: 1rem; margin-top: 1.5rem;
  font-style: italic; color: var(--texte-clair); font-size: .93rem;
}

/* ─── Cartes ───────────────────────────────────────────────────── */

.cartes {
  display: grid; gap: 1.1rem; list-style: none; padding: 0; margin: 0 0 2rem;
  position: relative; z-index: 1;
}
.cartes--trois       { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartes--quatre      { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cartes--plateformes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.carte {
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--arrondi); padding: 1.4rem;
  box-shadow: var(--ombre);
}
.carte h3, .carte h4 { margin-bottom: .4rem; }
.carte p { color: var(--texte-clair); font-size: .93rem; margin-bottom: 0; }
.carte p + .bouton { margin-top: 1rem; }

.carte__pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--vert); color: #4f7a52; margin-bottom: .9rem;
}
.carte__pastille--rose { background: var(--rose); color: #a8546e; }

.carte--plateforme { text-align: center; }
.carte--plateforme .carte__pastille { margin-inline: auto; }
.carte--attente { opacity: .72; }

/* ─── Avertissement ────────────────────────────────────────────── */

.avertissement {
  position: relative; z-index: 1;
  background: rgba(230, 81, 0, .06);
  border: 1px solid rgba(230, 81, 0, .28);
  border-radius: var(--arrondi); padding: 1.3rem 1.5rem;
}
.avertissement h3 {
  display: flex; align-items: center; gap: .5rem;
  color: var(--orange); font-size: 1rem; margin-bottom: .6rem;
}
.avertissement ul { margin: 0; padding-left: 1.2rem; }
.avertissement li { font-size: .92rem; color: #5a4a3f; margin-bottom: .4rem; }

.note {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .87rem; color: var(--texte-clair); max-width: 70ch;
}
/* Numéro de version à côté du titre « Installer Hakea » : un lien vers
   les archives des versions, habillé en pastille pour se lire comme
   une étiquette et non comme une partie du titre. */
.titre-version { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.pastille-version {
  font-size: .85rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
  padding: .4rem .75rem; border-radius: 999px;
  background: rgba(191, 223, 192, .45); border: 1px solid var(--vert-fonce);
  color: #3d6140; text-decoration: none;
  transition: background .15s, transform .15s;
}
.pastille-version:hover,
.pastille-version:focus-visible { background: var(--vert); color: #2f4d31; transform: translateY(-1px); }

/* ─── Carrousel ────────────────────────────────────────────────── */

.carrousel { position: relative; }

/* Défilement à ancrage : le geste tactile fonctionne nativement, les
   flèches ne font qu’ajouter le confort à la souris. Un carrousel
   piloté uniquement en JavaScript perd le glissement du doigt. */
.carrousel__piste {
  display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0 0 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.carrousel__vue { flex: 0 0 min(100%, 460px); scroll-snap-align: center; }
.carrousel__vue figure { margin: 0; }
.carrousel__vue img,
.capture-absente {
  width: 100%; border-radius: var(--arrondi);
  border: 1px solid var(--bord); box-shadow: var(--ombre);
  background: var(--fond);
}
.carrousel__vue figcaption {
  margin-top: .8rem; font-size: .88rem; color: var(--texte-clair);
}

/* Capture cliquable. Le curseur « loupe » et le badge disent que le
   clic mène quelque part : une image qui s’agrandit sans rien
   l’annoncer n’est trouvée que par hasard. Le badge est décoratif —
   c’est le lien entier qui est cliquable, pas lui. */
.capture-lien {
  display: block; position: relative; cursor: zoom-in;
  border-radius: var(--arrondi);
  transition: transform .15s ease, box-shadow .15s ease;
}
.capture-lien:hover { transform: translateY(-2px); }
.capture-lien:hover .capture-lien__loupe { background: #fff; color: var(--texte); }
.capture-lien__loupe {
  position: absolute; right: .55rem; bottom: .55rem;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88); color: #4f7a52;
  box-shadow: var(--ombre); pointer-events: none;
}

/* Cadre affiché tant que la capture n’a pas été déposée. */
.capture-absente {
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; border-style: dashed; border-color: var(--vert-fonce);
  color: var(--texte-clair); text-align: center; padding: 1rem;
}
.capture-absente p { margin: 0; font-weight: 600; }
.capture-absente code {
  font-size: .78rem; background: var(--fond-doux);
  padding: .25rem .5rem; border-radius: 6px; word-break: break-all;
}

.carrousel__fleche {
  position: absolute; top: 38%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--bord); box-shadow: var(--ombre);
  font-size: 1.7rem; line-height: 1; color: #4f7a52; cursor: pointer;
}
.carrousel__fleche:hover { background: var(--vert); }
.carrousel__fleche--gauche { left: -14px; }
.carrousel__fleche--droite { right: -14px; }
/* ⚠️ Plus aucune flèche n'est désactivée depuis que le carrousel
   BOUCLE (voir main.js) : la règle reste pour un carrousel qui, un
   jour, s'arrêterait aux bouts. */
.carrousel__fleche[disabled] { opacity: .35; cursor: default; }
@media (max-width: 700px) { .carrousel__fleche { display: none; } }

.carrousel__points { display: flex; justify-content: center; gap: .5rem; margin-top: .4rem; }
.carrousel__points button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: none; background: var(--bord); cursor: pointer;
}
.carrousel__points button[aria-selected="true"] { background: var(--vert-fonce); width: 22px; border-radius: 999px; }

/* ─── Carrousel des atouts ─────────────────────────────────────────
   Même mécanique que celui des captures, deux différences :
   plusieurs cartes tiennent de front sur un grand écran, et la carte
   doit garder une hauteur commune pour que les flèches ne sautent pas
   d’une vue à l’autre. */
.carrousel--atouts .carrousel__piste { align-items: stretch; padding-top: .3rem; }
.carrousel--atouts .carrousel__vue {
  flex: 0 0 min(100%, 340px);
  display: flex; flex-direction: column;
  /* `center` et non `start` : le script centre la vue visée, et deux
     règles d'ancrage contradictoires font sautiller le défilement. */
  scroll-snap-align: center;
}
.carrousel--atouts .carrousel__vue p { flex: 1; }
.carrousel--atouts .carrousel__fleche { top: 42%; }

/* ─── Visionneuse des captures ─────────────────────────────────────
   Une capture au format téléphone, réduite à 460 px dans le
   carrousel, ne laisse rien lire de l’application. La visionneuse la
   montre en grand, sans quitter la page.

   ⚠️ `width: fit-content` : le cadre épouse l’image, donc la croix et
   les flèches se posent SUR elle et non au bord de l’écran, où elles
   flotteraient loin d’une capture étroite. */
.visionneuse {
  width: fit-content; max-width: min(96vw, 1180px);
  padding: 0; border: none; background: transparent;
  overflow: visible;
}
.visionneuse::backdrop { background: rgba(24, 34, 26, .84); }

.visionneuse__cadre { margin: 0; }
/* Ce bloc épouse l’image — c’est lui qui porte les boutons. */
.visionneuse__image { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.visionneuse__zone {
  border-radius: var(--arrondi);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.visionneuse__zone img {
  display: block;
  max-width: 100%; max-height: 80vh; width: auto;
  border-radius: var(--arrondi); background: var(--fond);
}

/* ─── Second clic : la capture à sa taille réelle ───
   Sur un téléphone de 375 px, montrer « en grand » une capture large
   de 1017 px ne gagne presque rien : l’écran est plus étroit que la
   vignette d’un écran de bureau. Le second clic affiche donc l’image
   telle qu’elle a été prise, dans une zone que l’on fait défiler.

   ⚠️ Les boutons sont hors de la zone défilante : dedans, la croix
   partirait avec l’image dès le premier glissement. */
.visionneuse__image--zoomable .visionneuse__zone img { cursor: zoom-in; }
.visionneuse__image--zoom { width: 100%; }
.visionneuse__image--zoom .visionneuse__zone {
  overflow: auto; max-height: 80vh; background: var(--fond);
}
.visionneuse__image--zoom .visionneuse__zone img {
  max-width: none; max-height: none; width: auto;
  border-radius: 0; cursor: zoom-out;
}
.visionneuse__cadre figcaption {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .3rem .9rem; margin: .8rem auto 0; max-width: 68ch;
  color: #fff; font-size: .9rem; text-align: center;
}
.visionneuse__rang {
  color: rgba(255, 255, 255, .72); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.visionneuse__fermer, .visionneuse__fleche {
  position: absolute; z-index: 2;
  border: none; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(255, 255, 255, .92); color: #4f7a52;
  box-shadow: var(--ombre-forte);
}
.visionneuse__fermer:hover, .visionneuse__fleche:hover { background: #fff; }
.visionneuse__fermer {
  top: .6rem; right: .6rem; width: 40px; height: 40px; font-size: 1.6rem;
}
/* ⚠️ Les flèches restent visibles sur téléphone, contrairement à
   celles du carrousel : dans la visionneuse, il n’y a pas de
   glissement du doigt pour les remplacer. */
.visionneuse__fleche { top: 45%; width: 44px; height: 44px; font-size: 1.7rem; }
.visionneuse__fleche--gauche { left: .6rem; }
.visionneuse__fleche--droite { right: .6rem; }

@media (max-width: 560px) {
  .visionneuse__fleche { width: 38px; height: 38px; font-size: 1.4rem; }
  .visionneuse__cadre img { max-height: 72vh; }
}

/* ─── À propos ─────────────────────────────────────────────────── */

/* ⚠️ LA SECTION QUI GARDE SA MESURE DE LECTURE.
   Partout ailleurs, titres et chapôs prennent la largeur de leur bloc
   (voir `.section__chapo`). Ici non, et c'est demandé : cette section
   est la seule à porter de la PROSE — plusieurs paragraphes qui se
   lisent à la suite. Étalés sur 1120 px, ils font 150 signes par ligne,
   et l'œil perd la ligne suivante en revenant à la marge. */
#a-propos .section__chapo,
#a-propos .colonnes__texte p { max-width: 68ch; }

.colonnes { display: grid; gap: 1.6rem; grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 800px) { .colonnes { grid-template-columns: 1fr; } }
.colonnes__aparte {
  background: rgba(191, 223, 192, .22); border-radius: var(--arrondi);
  padding: 1.3rem 1.5rem;
}
.colonnes__aparte h3 { font-size: 1rem; }
.colonnes__aparte p { font-size: .9rem; color: #4a4a4a; margin: 0; }

.constats { counter-reset: n; list-style: none; padding: 0; display: grid; gap: 1rem; }
.constats li {
  counter-increment: n; position: relative; padding-left: 3.2rem;
}
.constats li::before {
  content: counter(n); position: absolute; left: 0; top: 0;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--vert); color: #4f7a52;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.constats h4 { margin-bottom: .2rem; }
.constats p { color: var(--texte-clair); font-size: .93rem; margin: 0; }

/* ─── FAQ ──────────────────────────────────────────────────────── */

.faq { display: grid; gap: .7rem; }
.faq__item {
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--arrondi-petit); overflow: hidden;
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; cursor: pointer; font-weight: 600; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: rgba(191, 223, 192, .18); }
.faq__chevron {
  flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--vert-fonce); border-bottom: 2px solid var(--vert-fonce);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.faq__item[open] .faq__chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item[open] summary { background: rgba(191, 223, 192, .22); }
.faq__reponse { padding: .2rem 1.2rem 1.1rem; font-size: .95rem; }
.faq__reponse p:last-child { margin-bottom: 0; }
.faq__reponse ul { padding-left: 1.2rem; }
.faq__reponse li { margin-bottom: .35rem; }

/* ─── Formulaire ───────────────────────────────────────────────── */

.formulaire { display: grid; gap: 1.3rem; }
.champ { display: grid; gap: .35rem; margin: 0; border: 0; padding: 0; }
.champ label, .champ legend { font-weight: 600; font-size: .95rem; padding: 0; }
.champ__aide { font-size: .84rem; color: var(--texte-clair); }

input[type="text"], input[type="email"], textarea {
  width: 100%; font: inherit; color: inherit;
  padding: .7rem .85rem; border: 1px solid var(--bord);
  border-radius: var(--arrondi-petit); background: var(--fond);
}
input:focus, textarea:focus { border-color: var(--vert-fonce); }
textarea { resize: vertical; min-height: 9rem; }

.motifs { display: grid; gap: .5rem; margin-top: .5rem; }
@media (min-width: 620px) { .motifs { grid-template-columns: 1fr 1fr; } }

.motif {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem .85rem; border: 1px solid var(--bord);
  border-radius: var(--arrondi-petit); cursor: pointer; background: var(--fond);
}
.motif:hover { border-color: var(--vert-fonce); }
.motif:has(input:checked) {
  background: rgba(191, 223, 192, .3); border-color: var(--vert-fonce); border-width: 1.6px;
}
.motif input { margin-top: .25rem; accent-color: var(--vert-fonce); }
.motif__corps { display: flex; flex-direction: column; }
.motif__corps strong { font-size: .93rem; }
.motif__corps small { font-size: .8rem; color: var(--texte-clair); }

/* Champ piège : déporté hors écran plutôt que `display:none`, que
   certains robots savent reconnaître et éviter. */
.piege {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.formulaire__envoi { margin: 0; }

.message {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .9rem 1.1rem; border-radius: var(--arrondi-petit);
  margin-bottom: 1.5rem; font-size: .95rem;
}
.message--ok     { background: rgba(191, 223, 192, .4); border: 1px solid var(--vert-fonce); }
.message--erreur { background: rgba(230, 81, 0, .08);  border: 1px solid rgba(230, 81, 0, .4); color: #7a3b12; }

/* ─── Pages annexes : fil, sommaire, texte légal ───────────────── */

.fil { font-size: .85rem; color: var(--texte-clair); margin-bottom: 1.2rem; }
.fil a { color: var(--texte-clair); }

/* Sommaire de page. Ces textes sont longs et se consultent pour UN
   point précis : sans lui, on fait défiler à l'aveugle. */
.sommaire {
  background: rgba(191, 223, 192, .22); border-radius: var(--arrondi);
  padding: 1.2rem 1.5rem; margin-bottom: 2.5rem;
}
.sommaire h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: #4f7a52; }
.sommaire ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.sommaire li { font-size: .9rem; margin-bottom: .3rem; break-inside: avoid; }
@media (max-width: 640px) { .sommaire ol { columns: 1; } }

.texte-legal { margin-bottom: 2.2rem; scroll-margin-top: calc(var(--entete-h) + 16px); }
.texte-legal h2 {
  font-size: 1.15rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--vert);
}
.texte-legal p { font-size: .95rem; }
.texte-legal p:last-child { margin-bottom: 0; }

/* Archives des versions : même gabarit que les textes légaux, avec deux
   listes par série, « Ajouts » puis « Corrigé ». */
.archive h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.archive__actuelle {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--rose); color: #7a3b52;
}
.archive__rubrique {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: #4f7a52; margin: 1.1rem 0 .4rem;
}
.archive__liste { margin: 0; padding-left: 1.2rem; }
.archive__liste li { font-size: .95rem; margin-bottom: .3rem; }

.retour { margin-top: 2.5rem; }

/* ─── Plan du site ─────────────────────────────────────────────── */

.plan { margin-bottom: 2.5rem; }
.plan h2 {
  font-size: 1.1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--vert);
}
.plan__note { font-size: .88rem; color: var(--texte-clair); }
.plan__liste { list-style: none; padding: 0; margin: 0; }
.plan__liste > li { padding: .45rem 0; border-bottom: 1px solid var(--bord); }
.plan__liste > li:last-child { border-bottom: none; }
.plan__liste--detaillee > li { padding: .8rem 0; }
.plan__resume { display: block; font-size: .85rem; color: var(--texte-clair); }
.plan__sous-liste {
  list-style: none; margin: .5rem 0 0; padding-left: 1rem;
  border-left: 2px solid var(--vert);
}
.plan__sous-liste li { padding: .18rem 0; font-size: .87rem; }

/* ─── Pied de page ─────────────────────────────────────────────── */

.pied {
  /* ─── UN PIED DE PAGE QUI NE SOIT PAS UNE PAGE BLANCHE ───
     Le gris uni d’origine (--bandeau) donnait une bande éteinte sous
     un site déjà très clair : rien n’y indiquait qu’on avait changé de
     zone. Le dégradé descend du fond doux des sections vers le voile
     végétal — assez pour que la limite se voie, trop peu pour que la
     couleur se remarque. */
  position: relative;
  background: linear-gradient(180deg, var(--fond-doux) 0%, var(--vert-voile) 100%);
  border-top: 2px solid var(--vert);
  padding: 2.5rem 0 1.8rem; margin-top: 1rem;
  /* Le rameau ci-dessous déborde volontairement dans la marge basse :
     sans cette coupe, il ajouterait une barre de défilement. */
  overflow: hidden;
}
.pied__interieur { display: grid; gap: 1.4rem; position: relative; }
.pied__haut { display: grid; gap: 1.6rem; grid-template-columns: minmax(200px, 1fr) 2.4fr; }
@media (max-width: 760px) { .pied__haut { grid-template-columns: 1fr; } }

/* ─── LE RAMEAU ───
   Décor pur, donc pseudo-élément : rien à écrire dans le HTML, rien à
   annoncer à un lecteur d'écran, rien à cliquer.

   Il se pose dans le vide à DROITE du crédit, qui est borné à 75ch et
   ne peut donc pas venir le rencontrer. En dessous de 900 px cette
   réserve disparaît : le rameau s’efface plutôt que de passer derrière
   le texte. */
.pied__interieur::after {
  content: '';
  position: absolute; right: 0; bottom: -1.4rem;
  width: 116px; height: 150px;
  background: url('../img/rameau.svg') no-repeat right bottom / contain;
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 900px) { .pied__interieur::after { display: none; } }

.pied__marque { display: flex; align-items: center; gap: .7rem; align-self: start; }
.pied__marque img { border-radius: 7px; }
.pied__marque strong { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.pied__marque span { font-size: .85rem; color: var(--texte-clair); }

.pied__colonnes { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* ⚠️ Les titres de colonne étaient en gris clair : à .75rem et en
   capitales, ils se lisaient plus pâles que les liens qu'ils
   coiffent — l’inverse de ce qu’un titre doit faire. Ils reprennent
   la couleur du texte, et un trait vert court les tient. */
.pied__colonne h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; color: var(--texte);
  position: relative; margin-bottom: .7rem; padding-bottom: .45rem;
}
.pied__colonne h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px; border-radius: 2px; background: var(--vert-fonce);
}
.pied__colonne ul { list-style: none; margin: 0; padding: 0; }
.pied__colonne li { margin-bottom: .32rem; }
.pied__colonne a { font-size: .88rem; color: var(--texte); text-decoration: none; }
.pied__colonne a:hover { text-decoration: underline; color: #3d6140; }

.pied__credit {
  font-size: .82rem; color: var(--texte-clair); max-width: 75ch; margin: 0;
  padding-top: 1.2rem; border-top: 1px solid var(--bord);
}
.pied__annee { font-size: .82rem; color: var(--texte-clair); margin: 0; }

/* ─── Impression ───────────────────────────────────────────────── */

@media print {
  .entete, .burger, .carrousel__fleche, .carrousel__points, .formulaire { display: none; }
  /* Le rameau du pied de page : un décor qui ne coûte rien à
     l’écran coûte de l’encre sur le papier. */
  .pied__interieur::after { display: none; }
  .pied { background: none; }
  .section { padding: 1rem 0; break-inside: avoid; }
  .faq__item[open] .faq__reponse, .faq__reponse { display: block; }
}

/* ─── Bandeau de mesure d'audience ─────────────────────────────────
   Posé en bas, discret, et surtout NON BLOQUANT : le site se lit
   entièrement sans y répondre. Un bandeau qui empêche de lire pousse
   à accepter n'importe quoi pour s'en débarrasser, ce qui vide le
   consentement de son sens. */
.bandeau-audience {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem;
  background: #fff; border: 1px solid var(--bord);
  border-radius: var(--arrondi); box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}
.bandeau-audience p {
  flex: 1 1 260px; margin: 0;
  font-size: .84rem; line-height: 1.45; color: var(--texte-clair);
}
.bandeau-audience__actions { display: flex; gap: .5rem; flex: 0 0 auto; }
/* Les deux boutons ont la MÊME taille et la même hauteur : un refus
   plus petit ou plus pâle que l'acceptation n'est pas un choix libre. */
.bandeau-audience .bouton { padding: .5rem .9rem; font-size: .85rem; }

@media print { .bandeau-audience { display: none; } }