/* ============================================================================
   MINERYA — feuille de style du site
   S5 v2 · 12/09/2026

   Le contenu texte est gelé, les couleurs sont gelées. Ce qui change ici :
   la typographie, l'échelle, le rythme des sections, le mouvement.

   Dépend de tokens.css, chargé avant.
   ========================================================================= */

/* ---------------------------------------------------------------- socle -- */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--texte-police);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--titre);
  font-weight: var(--gr-appuye);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  text-wrap: balance;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* La marque déposée se pose en exposant, sinon elle prend la hauteur d'une
   capitale et déséquilibre le mot, surtout dans les grands corps. */
.r { font-size: .52em; vertical-align: .48em; letter-spacing: 0; font-weight: inherit; }

/* iOS Safari peint en bleu système le texte de tout bouton qui ne déclare pas
   sa couleur, et -webkit-text-fill-color prime sur color. Les deux se posent
   ici, une fois, pour tous les boutons du site. */
button {
  font: inherit; color: inherit; -webkit-text-fill-color: currentColor;
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; margin: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--action); color: var(--action-texte);
  padding: var(--e-3) var(--e-5); border-radius: 0 0 var(--r-champ) 0;
  font-weight: var(--gr-moyen);
}
.saut-contenu:focus { left: 0; }

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

/* ------------------------------------------------------------- gabarit -- */

.rail {
  width: 100%; max-width: var(--rail-large);
  margin-inline: auto; padding-inline: var(--gouttiere);
}
.rail--etroit { max-width: var(--rail); }

/* Pleine largeur : une section peut sortir du rail. C'est ce qui sépare une
   page composée d'une page empilée. */
.bande { width: 100%; }

/* Grille à marge d'index. L'étiquette et le filet vivent dans une colonne de
   gauche étroite, le contenu dans la grande. C'est le geste qui change le plus
   la lecture de la page : on passe du dépliant au document. */
.index { display: grid; gap: var(--e-6); }
@media (min-width: 1080px) {
  .index { grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--e-9); align-items: start; }
  .index > .index__marge { position: sticky; top: 120px; display: grid; gap: var(--e-4); }
  .index > .index__corps { display: grid; gap: var(--e-6); }
}
.index__marge { display: grid; gap: var(--e-4); }
.index__corps { display: grid; gap: var(--e-6); }

/* Trois respirations. Une page où toutes les sections font la même hauteur
   n'a pas de rythme. */
.section        { padding-block: var(--souffle); }
.section--court { padding-block: var(--souffle-court); }
.section--ample { padding-block: var(--souffle-ample); }

.section--sombre { background: var(--fond-sombre); color: var(--texte-inverse); }
.section--douce  { background: var(--fond-doux); }

.mesure { max-width: 58ch; }
.mesure--large { max-width: 70ch; }

/* --------------------------------------------------- tête de section --
   Filet plein rail, étiquette en mono, puis le titre. C'est ce motif répété
   qui donne le registre document technique plutôt que brochure. */

.tete { display: grid; gap: var(--e-6); }
.tete__filet {
  height: 1px; background: currentColor; opacity: .18;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-recit) var(--courbe);
}
.tete__filet.est-visible { transform: scaleX(1); }

.etiquette {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: var(--gr-moyen);
  text-transform: uppercase;
  letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
}
.section--sombre .etiquette, .sur-photo .etiquette,
.bloc--sombre .etiquette { color: var(--texte-inverse-doux); }
.bloc--sombre .tete__filet, .section--sombre .tete__filet, .sur-photo .tete__filet { opacity: .34; }
[data-gamme] .bloc--sombre .etiquette::before { border-color: var(--sur-sombre, var(--gamme)); }
[data-gamme] .bloc--sombre .tete__filet { background: var(--sur-sombre, var(--gamme)); opacity: .6; }
[data-gamme] .bloc--sombre .puces li .fleche,
[data-gamme] .bloc--sombre .lecture ul li .fleche,
[data-gamme] .bloc--sombre .usage__titre { color: var(--sur-sombre, var(--gamme)); }
[data-gamme] .bloc--sombre .etiquette { color: var(--sur-sombre, var(--texte-inverse-doux)); }
.bloc--sombre .usage__titre { border-bottom-color: var(--ligne-inverse); }
.etiquette::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border: 1px solid var(--action); border-radius: 50%;
}

/* ------------------------------------------------------------ écriture -- */

.titre-display {
  font-size: var(--t-display); line-height: var(--lh-serre);
  letter-spacing: var(--ls-display); font-weight: var(--gr-appuye);
}
.titre-1 { font-size: var(--t-h1); line-height: var(--lh-serre); letter-spacing: var(--ls-display); }
.titre-2 { font-size: var(--t-h2); line-height: var(--lh-titre); }
.titre-3 { font-size: var(--t-h3); line-height: var(--lh-titre); }
.titre-4 { font-size: var(--t-h4); line-height: var(--lh-sous); letter-spacing: var(--ls-corps); }

.chapeau {
  font-family: var(--texte-police);
  font-size: var(--t-lead); line-height: var(--lh-corps);
  font-weight: var(--gr-normal); letter-spacing: 0;
  color: var(--texte-doux);
}
.corps { font-size: var(--t-corps); color: var(--texte-doux); }
.mention { font-size: var(--t-mention); color: var(--texte-mention); }

.section--sombre .chapeau, .sur-photo .chapeau,
.section--sombre .corps,   .sur-photo .corps { color: var(--texte-inverse-doux); }
.section--sombre .mention, .sur-photo .mention { color: rgb(255 255 255 / .62); }

.marque {
  background: var(--purecontact); color: var(--encre);
  padding: 0 .28em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.marque--chaude { background: var(--orange); color: var(--papier); }

/* -------------------------------------------------------------- actions -- */

/* En inline-flex, chaque suite de texte et chaque balise interne devenaient
   des éléments de flex distincts : le ® était détaché du mot et l'espace qui
   suit était rogné. Le bouton est donc un bloc en ligne, sa hauteur vient du
   remplissage, et la flèche est un élément en ligne comme un autre. */
.cta {
  display: inline-block; text-align: center;
  padding: 16px var(--e-6);
  border: 1px solid transparent; border-radius: var(--r-pilule);
  background: var(--action); color: var(--action-texte);
  font-family: var(--texte-police); font-size: var(--t-petit);
  font-weight: var(--gr-moyen); line-height: 1.35;
  text-decoration: none; cursor: pointer;
  transition: background var(--d-court) var(--courbe),
              border-color var(--d-court) var(--courbe),
              color var(--d-court) var(--courbe),
              transform var(--d-court) var(--courbe);
}
.cta::after {
  content: "→"; font-family: var(--mono);
  display: inline-block; margin-left: var(--e-3);
  transition: transform var(--d-court) var(--courbe);
}
.cta:hover { background: var(--action-survol); }
.cta:hover::after { transform: translateX(4px); }
.cta:active { background: var(--action-actif); transform: translateY(1px); }

.cta--ligne { background: transparent; color: var(--texte); border-color: var(--action); }
.cta--ligne:hover { background: var(--action); color: var(--action-texte); }

.cta--photo { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.cta--photo:hover { background: transparent; color: var(--papier); }
/* ⚖️ Romain, 13/09 : « un bouton vert sur un fond vert avec une écriture
   noire, en attractivité on a déjà vu mieux. » [data-gamme] .cta (0,2,0)
   écrasait .cta--photo (0,1,0) et repeignait le fond en vert de rubrique
   pendant que le texte restait noir. Le bouton posé sur une photo reste
   clair, et prend la rubrique pour son intitulé. */
[data-gamme] .cta.cta--photo {
  background: var(--papier); color: var(--gamme-encre);
  -webkit-text-fill-color: var(--gamme-encre); border-color: var(--papier);
}
[data-gamme] .cta.cta--photo:hover {
  background: color-mix(in srgb, var(--papier) 88%, var(--gamme-encre));
  color: var(--gamme-encre); -webkit-text-fill-color: var(--gamme-encre);
}

.cta--jaune { background: var(--jaune-eu); color: var(--encre); }
.cta--jaune:hover { background: color-mix(in srgb, var(--jaune-eu) 88%, black); }

.cta--orange { background: var(--orange); color: var(--papier); }
.cta--orange:hover { background: color-mix(in srgb, var(--orange) 84%, black); }

.cta--petit { padding: 13px var(--e-5); font-size: var(--t-mention); }

/* Forme de bouton pour ce qui ne mène nulle part sur le site actuel.
   On ne fabrique pas de destination. */
.jeton {
  display: inline-block; padding: 14px var(--e-5);
  border: 1px solid currentColor; border-radius: var(--r-pilule);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  opacity: .7;
}

/* --------------------------------------------------------------- entête -- */

.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: color-mix(in srgb, var(--papier) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-court) var(--courbe),
              background var(--d-court) var(--courbe);
}
.entete.est-collee {
  border-bottom-color: var(--ligne);
  background: color-mix(in srgb, var(--papier) 94%, transparent);
}
.entete__rail {
  display: flex; align-items: center; gap: var(--e-6);
  min-height: 84px;
  transition: min-height var(--d-court) var(--courbe);
}
.entete.est-collee .entete__rail { min-height: 64px; }
/* Le logotype de l'en-tête est gris sur le site actuel, pas noir : relevé à
   #C5C3C2 sur le fichier Wix, soit l'encre à 24 % sur blanc, au point près. */
.entete__logo { flex: none; display: block; color: rgb(0 0 0 / .24); }
.entete__logo .logo {
  width: clamp(146px, 16vw, 200px);
  transition: width var(--d-court) var(--courbe);
}
.entete.est-collee .entete__logo .logo { width: clamp(128px, 13vw, 164px); }

.nav { display: flex; align-items: center; gap: var(--e-6); margin-left: auto; }
.nav a {
  position: relative; text-decoration: none;
  font-size: var(--t-mention); font-weight: var(--gr-moyen);
  padding-block: var(--e-2); white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--action); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-court) var(--courbe);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.langues {
  display: flex; gap: var(--e-2); align-items: center;
  font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .06em;
}
.langues a { text-decoration: none; color: var(--texte-mention); }
.langues a[aria-current="true"] { color: var(--texte); }
.langues span { color: var(--ligne-appuyee); }

.burger { display: none; }

@media (max-width: 1120px) {
  .burger {
    display: inline-flex; align-items: center; gap: var(--e-3);
    margin-left: auto; background: none;
    border: 1px solid var(--ligne-appuyee); border-radius: var(--r-pilule);
    padding: var(--e-2) var(--e-5); min-height: 44px;
    font-family: var(--mono); font-size: var(--t-etiquette);
    text-transform: uppercase; letter-spacing: var(--ls-etiquette);
    cursor: pointer;
  }
  .nav {
    position: fixed; inset: 84px 0 auto; z-index: var(--z-entete);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fond); border-top: 1px solid var(--ligne);
    padding: var(--e-4) var(--gouttiere) var(--e-8);
    box-shadow: var(--ombre-flottante);
    max-height: calc(100dvh - 84px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav > a, .nav__declencheur {
    font-family: var(--titre); font-size: var(--t-h4); font-weight: var(--gr-moyen);
    letter-spacing: var(--ls-titre);
    padding-block: var(--e-4); border-bottom: 1px solid var(--ligne);
  }
  .nav a::after { display: none; }
  .nav .cta { margin-top: var(--e-6); }
  .nav .langues { margin-top: var(--e-6); font-size: var(--t-petit); }
}

/* ----------------------------------------------------------------- hero --
   La photo industrielle tient l'écran. Premier écart visible avec la version
   Wix, où le hero était une bande de 600 px sous une barre blanche. */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88svh, 860px);
  display: grid; align-content: end;
  padding-block: var(--e-11) var(--e-9);
  color: var(--texte-inverse); background: var(--brun);
}
.hero__media { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 12 12 / .62) 0%, rgb(10 12 12 / .26) 38%, rgb(6 8 8 / .88) 100%);
}
.hero__rail { display: grid; gap: var(--e-5); justify-items: start; }
/* Deux fois plus grand qu'en v3 : à taille égale avec celui de l'en-tête, il
   faisait doublon. Ici il pose la marque, il ne la répète pas. */
.hero__logo { width: clamp(280px, 36vw, 520px); color: var(--texte-inverse); }
.hero__sur {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--papier); font-weight: var(--gr-normal);
}
/* Une seule graisse, une seule valeur. Deux niveaux de gras plus deux
   niveaux de gris donnaient quatre informations pour une phrase : le
   lecteur trie au lieu de lire (Romain, 13/09). La phrase se tient seule. */
.hero__titre {
  font-size: var(--t-h1); line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre); font-weight: var(--gr-moyen);
  max-width: 17ch;
}

.hero__pied {
  display: flex; align-items: center; gap: var(--e-5);
  margin-top: var(--e-8); padding-top: var(--e-6);
  border-top: 1px solid var(--ligne-inverse);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-inverse-doux);
}
.hero__defiler { display: inline-flex; align-items: center; gap: var(--e-3); }
.hero__defiler i {
  display: block; width: 56px; height: 1px; background: currentColor;
  transform-origin: left; animation: filet 2800ms var(--courbe) infinite;
}
@keyframes filet { 0%,100% { transform: scaleX(.25); opacity: .4 } 50% { transform: scaleX(1); opacity: 1 } }

@media (max-width: 760px) {
  .hero { min-height: min(88svh, 720px); padding-block: var(--e-10) var(--e-7); }
  .hero__pied { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
}

/* --------------------------------------------------- bandeau européen -- */

.bandeau {
  background: var(--bleu-eu); color: var(--papier);
  overflow: hidden; padding-block: var(--e-3);
}
.bandeau__piste {
  display: flex; gap: var(--e-9); width: max-content;
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  white-space: nowrap;
  animation: defile 44s linear infinite;
}
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

/* ------------------------------------------------- compteur, à l'échelle --
   Le seul moment chiffré que porte le contenu de la home. Traité comme un
   instrument de mesure, pas comme une ligne de texte. */

.compteur { background: var(--bleu-eu); color: var(--jaune-eu); }
.compteur__rail { display: grid; gap: var(--e-7); }
@media (min-width: 1080px) {
  .compteur__rail { grid-template-columns: 200px minmax(0,1fr); column-gap: var(--e-9); align-items: end; }
  .compteur__rail > :first-child { grid-column: 1; align-self: start; }
  .compteur__date, .compteur__pied { grid-column: 2; }
}
.compteur .etiquette { color: rgb(255 255 255 / .72); }
.compteur .etiquette::before { border-color: var(--jaune-eu); }
.compteur__date {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: clamp(var(--e-4), 3.2vw, var(--e-8));
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: var(--gr-moyen); line-height: .86;
}
.compteur__n { font-size: var(--t-chiffre); letter-spacing: -0.045em; }
.compteur__u {
  font-size: clamp(1rem, .5rem + 1.6vw, 1.75rem);
  letter-spacing: var(--ls-etiquette); text-transform: uppercase;
  color: rgb(255 255 255 / .82);
}
.compteur__pied { font-size: var(--t-petit); color: rgb(255 255 255 / .72); max-width: 46ch; }

/* --------------------------------------------------------- bloc PPWR -- */

.ppwr {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--texte-inverse); background: var(--sanctuaire);
}
.ppwr__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.ppwr__media img { width: 100%; height: 100%; object-fit: cover; }
.ppwr__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgb(3 20 62 / .95) 0%, rgb(4 32 100 / .82) 48%, rgb(5 40 130 / .46) 100%);
}
.ppwr__grille { display: grid; gap: var(--e-8); align-items: start; }
@media (min-width: 940px) {
  .ppwr__grille { grid-template-columns: 1.15fr 1fr; gap: var(--e-10); }
  /* le titre reste en place pendant que l'argument défile à côté */
  .ppwr__grille > :first-child { position: sticky; top: 150px; }
}
.ppwr__annee {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.125rem, .8rem + 1.1vw, 1.625rem);
  letter-spacing: .04em; color: var(--jaune-eu);
  margin-bottom: var(--e-4); font-weight: var(--gr-moyen);
}
.ppwr__accroche { font-size: var(--t-h4); font-weight: var(--gr-appuye); line-height: var(--lh-sous); }
.ppwr .cta { margin-top: var(--e-7); max-width: 100%; }
.ppwr .cta--jaune { padding-inline: var(--e-7); }

/* ---------------------------------------------------------- questions -- */

.questions { margin-top: var(--e-8); max-width: var(--rail-texte); }
.questions li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-5);
  padding-block: var(--e-5); border-top: 1px solid var(--ligne);
  font-family: var(--titre); font-size: var(--t-h4);
  font-weight: var(--gr-normal); letter-spacing: var(--ls-corps);
  line-height: var(--lh-sous);
}
.questions li:last-child { border-bottom: 1px solid var(--ligne); }
.questions .fleche { font-family: var(--mono); color: var(--action); }
.questions b { font-weight: var(--gr-appuye); }

/* ------------------------------------------------------------- grilles -- */

.grille { display: grid; gap: var(--e-7) var(--e-6); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); }

/* Mur de gammes : quatre panneaux bord à bord, sans gouttière ni rayon. Les
   quatre couleurs de marque deviennent la matière de la section au lieu d'être
   quatre vignettes posées sur du blanc. */
.mur { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .mur { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mur { grid-template-columns: 1fr; } }
.mur .c-gamme { border-radius: 0; border: 0; border-right: 1px solid rgb(255 255 255 / .18); }
.mur .c-gamme:last-child { border-right: 0; }
.mur .c-gamme:hover { transform: none; }
.mur .c-gamme__tete { padding: var(--e-8) var(--e-5) var(--e-7); gap: var(--e-5); flex: 1; align-content: center; }
.mur .c-gamme__photo { aspect-ratio: 16 / 11; }
.mur .c-gamme__pied {
  padding: var(--e-6) var(--e-4);
  background: var(--fond-sombre);
}
.mur .c-gamme__pied .cta--ligne { color: var(--texte-inverse); border-color: rgb(255 255 255 / .38); }
.mur .c-gamme__pied .cta--ligne:hover { background: var(--papier); color: var(--encre); border-color: var(--papier); }

/* ------------------------------------------------------------- fiches --
   Le texte passe SOUS l'image. Poser du texte sur une photo, c'est le geste
   de la brochure ; le séparer par un filet, c'est celui de la planche. La
   photo redevient lisible, le texte aussi, et la carte disparaît en tant
   qu'objet : il ne reste qu'une colonne. */

.fiche { display: grid; gap: var(--e-5); align-content: start; }
.fiche__vue {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--brun);
  border-radius: var(--r-carte);
}
.fiche__vue img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-long) var(--courbe), filter var(--d-long) var(--courbe);
}
.fiche:hover .fiche__vue img, .fiche:focus-within .fiche__vue img { transform: scale(1.04); }
.fiche__titre { font-size: var(--t-h3); }
.fiche__texte {
  font-size: var(--t-mention); color: var(--texte-doux); line-height: 1.6;
  padding-top: var(--e-4); border-top: 1px solid var(--ligne);
}
.section--sombre .fiche__texte { color: var(--texte-inverse-doux); border-top-color: var(--ligne-inverse); }
.fiche .cta, .fiche .jeton { justify-self: start; }

/* Les trois visuels de la section contact étaient des photos de stock
   abstraites, hors sujet et hors palette. Retirées : trois colonnes de texte
   sous un filet appuyé disent mieux « choisissez votre interlocuteur » que
   trois rectangles gris. À remplacer le jour où on a de vraies photos. */
.fiche--texte { gap: var(--e-4); padding-top: var(--e-5); border-top: 2px solid var(--encre); }
.fiche--texte .fiche__titre { font-size: var(--t-h4); }
.fiche--texte .fiche__texte { border-top: 0; padding-top: 0; }
.fiche--texte .cta { margin-top: var(--e-4); }

/* --------------------------------------------------------- carte gamme -- */

.c-gamme {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-carte); background: var(--surface);
  border: 1px solid var(--ligne);
  transition: transform var(--d-moyen) var(--courbe), border-color var(--d-moyen) var(--courbe);
}
.c-gamme:hover { transform: translateY(-6px); border-color: var(--ligne-appuyee); }
.c-gamme__tete {
  padding: var(--e-6) var(--e-4) var(--e-5);
  display: grid; justify-items: center; gap: var(--e-4);
  text-align: center; color: var(--papier);
}
.c-gamme__secteur {
  /* ⚖️ Romain, 15/09 : « alimentaire, édition, on n'utilise pas de majuscules,
     c'est en minuscule. » Le nom du secteur n'est pas un surtitre de section,
     c'est le nom de la gamme : il se lit en casse normale. */
  font-family: var(--mono); font-size: var(--t-etiquette);
  letter-spacing: var(--ls-corps); text-transform: none;
  opacity: .82;
}
.c-gamme__logo { width: clamp(118px, 62%, 172px); height: auto; }
.c-gamme__desc { font-size: var(--t-mention); line-height: var(--lh-sous); }
.c-gamme__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.c-gamme__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-long) var(--courbe);
}
.c-gamme:hover .c-gamme__photo img { transform: scale(1.06); }
.c-gamme__pied { padding: var(--e-5) var(--e-4); display: grid; justify-items: center; }

.g-purecontact .c-gamme__tete { background: var(--purecontact); color: var(--encre); }
.g-eternel     .c-gamme__tete { background: var(--eternel); }
.g-heritage    .c-gamme__tete { background: var(--heritage); color: var(--brun); }
.g-sanctuaire  .c-gamme__tete { background: var(--sanctuaire); }
/* Les logos de gamme sont des PNG blancs : sur menthe et sur or ils ne se
   lisent pas. Ils ne passent pas pour autant en noir — le noir n'est pas dans
   la charte des gammes. Le PNG sert de masque, le ton profond de la gamme le
   peint. Les couleurs de gamme, elles, ne bougent pas. */


/* ------------------------------------------------------------- Panibag --
   La section occupe toute la largeur au lieu d'empiler une colonne de texte
   à gauche et de laisser le vide à droite. Trois bandes : l'énoncé, les gains
   face aux vues produit, puis la conclusion en pied de section. */

.panibag { background: var(--fond-doux); }
.panibag__titre em { font-style: normal; color: var(--orange); }

.panibag__gains { display: grid; gap: var(--e-8); margin-top: var(--souffle-court); align-items: start; }
@media (min-width: 940px) { .panibag__gains { grid-template-columns: 1fr 1fr; gap: var(--e-10); } }

.gains li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-4);
  padding-block: var(--e-4); border-top: 1px solid var(--ligne);
  font-size: var(--t-corps);
}
.gains li:last-child { border-bottom: 1px solid var(--ligne); }
.gains .fleche { font-family: var(--mono); color: var(--orange); }
.gains b { color: var(--orange); font-weight: var(--gr-appuye); }

.panibag__vues { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.panibag__vues img { aspect-ratio: 1; object-fit: cover; width: 100%; }

.panibag__schema {
  margin-top: var(--souffle-court);
  background: var(--papier); padding: var(--e-6);
}
.panibag__schema img { width: 100%; }

/* Conclusion en pied de section : l'énoncé à gauche, l'action à droite,
   alignés sur la même ligne de base. Plus de vide à droite. */
.panibag__fin {
  display: grid; gap: var(--e-7);
  margin-top: var(--souffle-court);
  padding-top: var(--e-7); border-top: 2px solid var(--brun);
}
@media (min-width: 940px) {
  .panibag__fin { grid-template-columns: 1.4fr 1fr; gap: var(--e-10); align-items: end; }
}
.panibag__fin h2 { max-width: 30ch; }
.panibag__action { display: grid; gap: var(--e-5); justify-items: start; }

/* ----------------------------------------------------------- gardiens -- */

.gardiens {
  position: relative; isolation: isolate; overflow: hidden;
  /* Le fond vient de la rubrique, il n'est pas écrit une seconde fois ici :
     une valeur recopiée finit par diverger de celle qu'elle copie. */
  color: var(--texte-inverse); background: var(--gamme-sombre, var(--fond-sombre));
}
.gardiens__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.gardiens__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.gardiens__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(7 26 23 / .62) 0%, rgb(6 24 21 / .72) 46%, rgb(4 16 14 / .94) 100%);
}
/* Le sceau Gardiens du Vivant vit dans la marge d'index : c'est la place d'une
   marque de garantie sur une planche, à côté du propos et jamais dessus. */
.sceau { width: clamp(104px, 13vw, 150px); color: var(--texte-inverse); }
@media (max-width: 1079px) { .sceau { width: 96px; } }

.gardiens__note {
  font-family: var(--mono); font-size: var(--t-petit);
  letter-spacing: .04em; color: var(--texte-inverse-doux); margin-top: var(--e-4);
}
.engagements { margin-top: var(--e-8); max-width: 68ch; }
.engagements li {
  padding-block: var(--e-4); border-top: 1px solid var(--ligne-inverse);
  font-size: var(--t-lead); color: var(--texte-inverse);
}
.engagements li:last-child { border-bottom: 1px solid var(--ligne-inverse); }
.engagements b { font-weight: var(--gr-appuye); }
/* La conclusion tombait sur six lignes dans une colonne de 36 caractères.
   Elle s'ouvre en largeur, avec l'action à droite sur la même ligne de base :
   même dispositif qu'en pied de section Panibag. */
.gardiens__conclusion {
  display: grid; gap: var(--e-6);
  margin-top: var(--souffle-court);
  padding-top: var(--e-6); border-top: 1px solid var(--ligne-inverse);
}
@media (min-width: 900px) {
  .gardiens__conclusion { grid-template-columns: 1.7fr auto; gap: var(--e-9); align-items: end; }
}
.gardiens__conclusion h3 { max-width: 46ch; }
.gardiens__conclusion .cta { justify-self: start; }

/* ------------------------------------------------------------ contact -- */

.c-contact {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-carte); min-height: 420px;
  padding: var(--e-7) var(--e-5) var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-4);
  color: var(--texte-inverse); background: var(--brun);
}
.c-contact img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: transform var(--d-long) var(--courbe);
}
.c-contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(168deg, rgb(20 26 28 / .70) 0%, rgb(10 13 14 / .92) 72%);
}
.c-contact:hover img, .c-contact:focus-within img { transform: scale(1.05); }
.c-contact__titre { font-size: var(--t-h3); }
.c-contact__texte {
  font-size: var(--t-mention); color: var(--texte-inverse-doux);
  padding-top: var(--e-4); border-top: 1px solid var(--ligne-inverse); margin-top: auto;
}
.c-contact .cta { align-self: flex-start; margin-top: var(--e-4); }

.contact__question { max-width: 21ch; }
.contact__question .vert { color: var(--texte-accent); }

/* ---------------------------------------------------------------- pied --
   Un vrai pied de site : plan complet, coordonnées, mentions légales.
   Toutes les valeurs viennent du site lui-même (CGV et pages de rendez-vous),
   aucune n'est inventée. */

.pied { background: var(--fond-pied); color: var(--texte-inverse); }
.pied__haut { padding-block: var(--souffle) var(--e-9); }
.pied__grille { display: grid; gap: var(--e-8) var(--e-7); }
@media (min-width: 640px)  { .pied__grille { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .pied__grille { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1180px) { .pied__grille { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--e-6); } }

.pied__marque { display: block; margin-bottom: var(--souffle-court); }
.pied__logo { width: clamp(190px, 22vw, 260px); height: auto; }
.pied__coord { display: grid; gap: var(--e-3); font-size: var(--t-mention); color: rgb(255 255 255 / .72); }
.pied__coord a { color: var(--texte-inverse); text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .28); }
.pied__coord a:hover { border-bottom-color: var(--papier); }
.pied__coord .lieu { color: rgb(255 255 255 / .56); }

.pied__col { display: grid; gap: var(--e-4); align-content: start; }
.pied__col h2 {
  font-family: var(--mono); font-size: var(--t-etiquette); font-weight: var(--gr-moyen);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: rgb(255 255 255 / .48);
  padding-bottom: var(--e-3); border-bottom: 1px solid var(--ligne-inverse);
}
.pied__col ul { display: grid; gap: var(--e-3); }
.pied__col a {
  font-size: var(--t-mention); text-decoration: none; color: rgb(255 255 255 / .82);
  transition: color var(--d-court) var(--courbe);
}
.pied__col a:hover { color: var(--papier); }

.pied__bas {
  padding-block: var(--e-5) var(--e-6);
  border-top: 1px solid var(--ligne-inverse);
  display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6);
  align-items: baseline; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-etiquette);
  letter-spacing: .04em; color: rgb(255 255 255 / .5);
}
.pied__bas a { color: rgb(255 255 255 / .74); text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .22); }
.pied__bas a:hover { color: var(--papier); border-bottom-color: var(--papier); }
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }

.haut {
  position: fixed; right: var(--gouttiere); bottom: var(--gouttiere); z-index: var(--z-collant);
  width: 46px; height: 46px; border-radius: var(--r-pilule);
  display: grid; place-items: center;
  background: var(--fond-pied); color: var(--papier);
  border: 1px solid rgb(255 255 255 / .2); cursor: pointer;
  font-family: var(--mono); font-size: 16px; line-height: 1;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-court) var(--courbe), background var(--d-court) var(--courbe);
}
.haut.visible { opacity: 1; pointer-events: auto; }
.haut:hover { background: var(--action); border-color: var(--action); }

/* ============================================== mouvement au défilement ==
   Rien n'est masqué tant que le JS n'a pas pris la main : la classe .js est
   posée dans le <head>. Sans JS, la page est entière et immobile. */

.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--d-recit) var(--courbe), transform var(--d-recit) var(--courbe);
  transition-delay: var(--retard, 0ms);
}
.js [data-reveal].est-visible { opacity: 1; transform: none; }

/* Révélation mot à mot des grands titres : chaque mot monte depuis sous une
   ligne de coupe. C'est ce geste qui sépare « un titre apparaît » de « un
   titre se pose ». */
.js [data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js [data-mots] .mot > i {
  display: inline-block; font-style: inherit;
  transform: translateY(108%);
  transition: transform var(--d-recit) var(--courbe);
  transition-delay: var(--retard, 0ms);
}
.js [data-mots].est-visible .mot > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* L'image animée du hero cède la place à une image fixe : on ne peut pas
     mettre un WebP animé en pause, on le remplace. */
  .hero__media img { content: url("/img/hero-granules.webp"); }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-mots] .mot > i { transform: none; }
  .tete__filet { transform: scaleX(1); }
  .hero__defiler i { animation: none; }
  .hero__media, .ppwr__media, .gardiens__media { transform: none !important; }
}

/* ============================================================ GABARITS ==
   S6 869f13tte. Les blocs que les 36 pages intérieures réutilisent. Un
   portage assemble ces blocs, il n'en dessine pas de nouveaux : c'est la
   condition pour que 6 gabarits couvrent 73 URLs.
   ====================================================================== */

/* ---------------------------------------------------- couleur de gamme --
   Chaque gamme porte sa couleur, et une page secteur doit se reconnaître à
   elle en une seconde. La page pose --gamme, et tout ce qui la signale en
   dérive : le filet de tête, l'étiquette, les chiffres, le fond doux.
   Les 4 valeurs sont celles relevées au pixel sur les cartes de la home. */

/* Le ton profond de chaque gamme est calculé depuis SA teinte, pas emprunté
   au vert Minerya. #0A6B55 était le vert de la marque : sur une page
   PureContact il ne disait rien de la gamme (Romain, 13/09).
   Teinte conservée, saturation soutenue, clarté descendue au niveau d'une
   encre : PureContact 151°, Eternel 327°, Heritage 42°, Sanctuaire 203°. */
/* Deux tons par gamme, et pas un de plus.
   --gamme-encre  : le ton profond de la teinte, pour écrire SUR DU PAPIER.
   --gamme-sur    : ce qui s'écrit SUR L'APLAT DE LA GAMME, dont la clarté
                    change du tout au tout d'une gamme à l'autre.
   PureContact et Heritage posent un aplat clair : on y écrit à l'encre.
   Eternel et Sanctuaire posent un aplat sombre : on y écrit en blanc.
   Sans cette distinction, le hero Sanctuaire écrivait bleu nuit sur bleu. */
/* La marque est sa propre gamme : les pages qui ne portent pas un produit
   (la matière, la réglementation, à propos) prennent le vert Minerya, pour
   que toutes les têtes du site soient montées pareil (Romain, 13/09). */
/* ⚖️ Romain, 13/09 : sur les pages de la marque, c'est LE vert Minerya —
   celui du bouton Contact — et aucune variante plus foncée. --gamme-encre
   vaut donc ici la couleur elle-même, ce qui aligne d'un coup tous les
   pictos, toutes les flèches et tous les boutons de ces pages. */
[data-gamme="minerya"]     { --gamme: var(--vert);         --gamme-encre: var(--vert);
  --gamme-sur: var(--papier);      --gamme-sur-corps: var(--texte-inverse); }
/* ⚖️ Les Gardiens du Vivant ne suivent pas la charte des pages produit :
   « on est dans l'immersif, on rentre dans la forêt ; pas de noir, pas de
   gris » (Romain, 13/09). La rubrique pose donc ses propres fonds — un vert
   très clair pour respirer, un vert profond de sous-bois pour les blocs
   pleins. Le noir et le sable n'y entrent jamais. */
[data-gamme="gardiens"] { --gamme: #1F7A5A;            --gamme-encre: #14543E;
  --gamme-sur: var(--papier);      --gamme-sur-corps: var(--texte-inverse);
  --gamme-doux: #EDF5F0;
  --gamme-sombre: #0C3327;
  --sur-sombre: var(--papier); }

/* La réglementation a sa couleur, le bleu européen du bandeau et du compte à
   rebours. Ce n'est pas une gamme produit, et ça ne s'écrit pas en vert. */
/* ⚖️ Romain, 13/09 : « on n'utilise pas le fond sable pour la réglementation,
   ni le noir. Soit un bleu pâle, soit un bleu soutenu, et dans ce cas on
   travaille en négatif. » Une rubrique déclare donc ses deux fonds ; le sable
   et le noir ne sont que le défaut des pages qui n'en déclarent pas. */
[data-gamme="reglementation"] { --gamme: var(--bleu-eu);   --gamme-encre: var(--bleu-eu);
  --gamme-sur: var(--papier);      --gamme-sur-corps: var(--texte-inverse);
  --gamme-doux: color-mix(in srgb, var(--bleu-eu) 8%, var(--papier));
  --gamme-sombre: var(--bleu-eu);
  /* ⚠️ Le bloc sombre EST peint dans la couleur de la rubrique : filets et
     flèches ne peuvent plus y prendre cette même couleur, ils disparaîtraient
     (Romain, 13/09). Sur ce fond, l'accent est le blanc. */
  --sur-sombre: var(--papier); }
/* ⚖️ Romain, 15/09 : « c'est quoi ce vert pourri ? Il n'est pas charté. […]
   N'invente pas des couleurs qui ne sont pas dans la charte, c'est le vert
   Minerya partout. » #1E5239 était une encre foncée dérivée à la main, jamais
   relevée sur le site. L'encre de PureContact est LE vert Minerya. Le vert
   d'eau #B0E2CA reste la couleur de la gamme, il ne bouge pas.
   ⚠️ heritage, eternel et sanctuaire portent la même encre inventée
   (#51421F, #68083D, #183E56) : à trancher de la même façon. */
[data-gamme="purecontact"] { --gamme: var(--purecontact); --gamme-encre: var(--vert);
  --gamme-sur: var(--gamme-encre); --gamme-sur-corps: var(--texte); }
/* ⚖️ Romain, 15/09 : « c'est le vert Minerya partout », « c'est le bleu
   Minerya ou le vert Minerya qu'il faut utiliser ».
   La couleur d'une gamme est un APLAT — l'en-tête du mur de gammes, le filet,
   la pastille du logotype, le fond du bouton. Elle n'écrit pas. Ce qui écrit,
   c'est le vert Minerya, et le bleu Sanctuaire sur sa propre page puisque
   c'est le bleu de la marque. Aucune encre dérivée, aucune valeur nouvelle. */
[data-gamme="heritage"]    { --gamme: var(--heritage);    --gamme-encre: var(--vert);
  --gamme-sur: var(--gamme-encre); --gamme-sur-corps: var(--texte); }
[data-gamme="eternel"]     { --gamme: var(--eternel);     --gamme-encre: var(--vert);
  --gamme-sur: var(--papier);      --gamme-sur-corps: var(--texte-inverse); }
[data-gamme="sanctuaire"]  { --gamme: var(--sanctuaire);  --gamme-encre: var(--sanctuaire);
  --gamme-sur: var(--papier);      --gamme-sur-corps: var(--texte-inverse); }

/* Fond doux d'une page de gamme : une teinte de SA couleur, pas le blanc
   cassé de Panibag. C'est le reproche de Romain le 13/09 — l'identité du
   matériau doit se lire dans le fond, pas seulement dans un logo. */
.bloc--gamme { background: color-mix(in srgb, var(--gamme) 26%, var(--papier)); }
[data-gamme] .etiquette::before { border-color: var(--gamme-encre); }
[data-gamme] .tete__filet { background: var(--gamme-encre); opacity: .45; }
[data-gamme] .jalon { border-color: var(--gamme-encre); color: var(--gamme-encre); }
[data-gamme] .lecture ul li .fleche,
[data-gamme] .puces li .fleche,
[data-gamme] .questions .fleche { color: var(--gamme-encre); }
[data-gamme] .cta { background: var(--gamme-encre); }
[data-gamme] .cta:hover { background: color-mix(in srgb, var(--gamme-encre) 84%, black); }
[data-gamme] .cta--ligne { background: transparent; color: var(--gamme-encre); border-color: var(--gamme-encre); }
[data-gamme] .cta--ligne:hover { background: var(--gamme-encre); color: var(--papier); }
/* ⚠️ Cette règle forçait l'encre sur TOUS les titres d'une page de gamme,
   y compris ceux posés sur un bloc sombre : titre noir sur fond noir, donc
   invisible. C'est ce qui faisait disparaître « Les 6 bénéfices clés ».
   Elle ne s'applique plus qu'aux fonds clairs. */
[data-gamme] .bloc:not(.bloc--sombre) .titre-2,
[data-gamme] .bloc:not(.bloc--sombre) .fin h1 { color: var(--texte); }
/* La réglementation écrit ses titres de section dans sa couleur : la page
   entière est bleue, les titres n'ont pas de raison de rester noirs. */
[data-gamme="reglementation"] .bloc:not(.bloc--sombre) .titre-2 { color: var(--gamme-encre); }
[data-gamme] .bloc--sombre .titre-2,
[data-gamme] .bloc--sombre .fin h1 { color: var(--texte-inverse); }
[data-gamme] .bloc--sombre .cta { background: var(--gamme-encre); }
/* ⚠️ Quand le bloc sombre EST peint dans la couleur de la rubrique, un bouton
   de cette même couleur y disparaît. Il s'inverse : fond blanc, encre de la
   rubrique (Romain, 13/09). */
/* Le repli valait --gamme-encre : sur une rubrique qui ne déclare pas
   --sur-sombre (minerya), le bouton se peignait vert sur vert et son
   intitulé disparaissait. Le repli est le papier : le bouton est clair, son
   texte prend la couleur de la rubrique. */
/* ⚠️ 15/09 : une rubrique peut déclarer un --sur-sombre SATURÉ, pas un blanc.
   Panibag pose son orange. L'encre de la rubrique y devenait illisible
   (2:1). Le corps du bouton suit donc son propre jeton, dont le repli reste
   l'encre de la rubrique : rien ne change pour les rubriques au blanc. */
[data-gamme] .bloc--sombre .cta:not(.cta--ligne) {
  background: var(--sur-sombre, var(--papier));
  color: var(--sur-sombre-corps, var(--gamme-encre));
  -webkit-text-fill-color: var(--sur-sombre-corps, var(--gamme-encre));
}
/* ⚠️ 15/09 : le survol partait de --gamme-encre quand la rubrique ne déclare
   pas de --sur-sombre. Sur minerya, --gamme-encre EST le vert : le fond du
   bouton virait au vert et son texte, vert lui aussi, disparaissait.
   Romain : « quand je passe sur les boutons, le texte disparaît en survol. »
   Le survol se calcule maintenant depuis le fond AU REPOS, jamais depuis la
   couleur de la rubrique, et le corps garde sa couleur. */
[data-gamme] .bloc--sombre .cta:not(.cta--ligne):hover {
  background: color-mix(in srgb, var(--sur-sombre, var(--papier)) 86%, black);
  color: var(--sur-sombre-corps, var(--gamme-encre));
  -webkit-text-fill-color: var(--sur-sombre-corps, var(--gamme-encre));
}
[data-gamme] .bloc--sombre .cta--ligne {
  color: var(--sur-sombre, var(--texte-inverse));
  border-color: var(--sur-sombre, var(--texte-inverse));
}

/* ------------------------------------------------------- tête de page -- */

.tete-page {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--souffle) var(--souffle-court);
  border-bottom: 1px solid var(--ligne);
}
.tete-page--sobre { padding-block: var(--souffle-court); }
.tete-page--visuel {
  color: var(--texte-inverse); background: var(--brun);
  border-bottom: 0; padding-block: var(--souffle-ample) var(--souffle);
}
/* Le voile d'une page de gamme est teinté de sa couleur : la photo passe
   derrière, la gamme passe devant. */
[data-gamme] .tete-page__voile {
  background:
    linear-gradient(180deg, rgb(6 8 8 / .40) 0%, rgb(6 8 8 / .62) 55%, rgb(6 8 8 / .90) 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--gamme-encre) 78%, transparent) 0%, transparent 62%);
}
[data-gamme] .tete-page--visuel .tete__filet { background: var(--papier); }
[data-gamme] .tete-page--visuel .etiquette::before { border-color: var(--gamme); }

/* ------------------------------------------------------- certification --
   L'encadré pesait autant que le logotype de gamme, ce qui n'a aucun sens :
   c'est une mention, pas une marque. Elle redevient une ligne, avec son sceau
   à gauche et un filet dessous (Romain, 13/09). */

.certif { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: start; }
.certif__sceau {
  width: 34px; height: 34px; padding: 7px; color: var(--gamme-encre);
  border: 1px solid currentColor; border-radius: 50%;
}
.certif__texte { display: grid; gap: var(--e-1); padding-bottom: var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--gamme-encre) 28%, transparent); }
.certif__mention {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette); color: var(--gamme-encre);
}
.certif__enonce {
  font-family: var(--texte-police); font-size: var(--t-corps);
  line-height: 1.4; color: var(--texte);
}
.certif__enonce em { font-style: normal; font-weight: var(--gr-appuye); }

/* ------------------------------------------------------ tête de gamme --
   Cinquième version, et les trois contraintes de Romain sont explicites :
   deux tiers d'aplat dans la couleur de la gamme — la vraie, le vert d'eau,
   pas un ton dérivé —, un tiers d'image, et l'ensemble tient dans un écran
   avec l'en-tête : on ne défile pas pour voir un hero.
   Le logotype passe donc en encre, puisque l'aplat est clair. */

.hero-gamme {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid;
  background: var(--gamme);
  min-height: calc(100svh - 84px);
}
@media (min-width: 900px) {
  .hero-gamme { grid-template-columns: 1.55fr 1fr; max-height: calc(100svh - 84px); }
}
@media (max-width: 899px) { .hero-gamme { min-height: 0; } }

/* La photo court sous tout le hero, et l'aplat de gamme la couvre à 85 % :
   à 93 % on ne la voyait pas (Romain, 13/09). La colonne de droite, elle, la
   montre franchement. */
.hero-gamme__fond { position: absolute; inset: 0; z-index: -2; }
.hero-gamme__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero-gamme__voile {
  position: absolute; inset: 0; z-index: -1;
  background: var(--gamme); opacity: .85;
}
@media (min-width: 900px) {
  .hero-gamme__voile { right: 39%; }
  .hero-gamme__fond  { right: 0; }
}

.hero-gamme__panneau {
  position: relative; color: var(--gamme-sur-corps, var(--texte));
  display: grid; align-content: center; gap: var(--e-6);
  padding: var(--souffle-court) var(--gouttiere);
}
@media (min-width: 900px) {
  .hero-gamme__panneau { padding-inline: clamp(var(--e-7), 6vw, var(--e-10)); padding-block: var(--e-8); }
}
.hero-gamme__panneau .etiquette { color: var(--gamme-sur, var(--gamme-encre)); margin: 0; }
.hero-gamme__panneau .etiquette::before { border-color: var(--gamme-sur, var(--gamme-encre)); }
/* Tout ce qui vit dans le panneau lit --gamme-sur, jamais --gamme-encre. */
.hero-gamme__panneau .certif__sceau,
.hero-gamme__panneau .certif__mention { color: var(--gamme-sur, var(--gamme-encre)); }
.hero-gamme__panneau .certif__texte {
  border-bottom-color: color-mix(in srgb, var(--gamme-sur, var(--gamme-encre)) 28%, transparent);
}
.hero-gamme__panneau .certif__enonce { color: inherit; }

/* Un logotype de gamme ne doit jamais devenir noir : le noir n'est pas dans
   la charte, la matière est naturelle (Romain, 13/09). Il est donc TEINTÉ À LA
   FABRICATION dans le ton profond de sa gamme, et servi comme une image
   ordinaire.
   ⚠️ Première tentative écartée : peindre un masque CSS depuis une variable.
   Chromium l'acceptait, Safari non — le logotype y disparaissait entièrement.
   Un fichier déjà coloré ne peut pas échouer. */
.hero-gamme__signature {
  width: min(100%, clamp(300px, 42vw, 520px)); height: auto; display: block;
}

/* La phrase de tête porte la promesse de la gamme : elle doit passer devant
   les trois assurances, pas derrière. Sans règle propre, elle sortait à la
   taille du texte courant et se faisait doubler par ce qui la suit. */
/* Quand la tête porte le H1 de la page — et non un simple chapeau au-dessus
   d'un H1 plus bas — il prend la taille d'affichage : au corps des autres
   titres il se perdait au milieu (Romain, 13/09). */
h1.hero-gamme__titre {
  font-size: var(--t-display); line-height: var(--lh-serre);
  letter-spacing: var(--ls-display); font-weight: var(--gr-appuye);
  max-width: 14ch;
}
h1.hero-gamme__titre--long { font-size: var(--t-h1); max-width: 19ch; }
.hero-gamme__titre { overflow-wrap: break-word; }
.hero-gamme__titre {
  font-size: var(--t-h3); line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre); font-weight: var(--gr-moyen);
  max-width: 24ch; margin: 0; color: inherit;
}

.hero-gamme__chapeau {
  font-family: var(--texte-police); font-size: var(--t-lead);
  line-height: var(--lh-corps); color: inherit; opacity: .82;
  max-width: 46ch; margin: 0;
}

.hero-gamme__panneau .jalons { gap: var(--e-2); }
.hero-gamme__panneau .jalon { border-color: var(--gamme-sur, var(--gamme-encre)); color: var(--gamme-sur, var(--gamme-encre)); }

/* ------------------------------------------------------- assurances --
   Trois promesses tenues côte à côte dans la tête, relevées telles quelles
   sur les pages Packaging, Édition et Technique. Un filet vertical les
   sépare : elles se lisent d'un coup d'œil, sans devenir des puces.
   Sous 700 px elles s'empilent, le filet passe à l'horizontale. */
.assurances {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding-top: var(--e-5);
  border-top: 1px solid color-mix(in srgb, var(--gamme-sur, var(--gamme-encre)) 30%, transparent);
}
.assurance { display: grid; gap: var(--e-1); align-content: start; }
/* Un picto peut ouvrir l'assurance : « avec éventuellement des pictos »
   (Romain, 15/09). Il prend la couleur du texte de la tête, jamais une autre. */
.assurance__icone { width: 30px; height: 30px; margin-bottom: var(--e-2); color: inherit; opacity: .9; }
.assurance__icone .icone { width: 100%; height: 100%; stroke-width: 1.6; }
.assurance + .assurance {
  padding-left: var(--e-5);
  border-left: 1px solid color-mix(in srgb, var(--gamme-sur, var(--gamme-encre)) 22%, transparent);
}
@media (max-width: 699px) {
  .assurance + .assurance {
    padding-left: 0; padding-top: var(--e-4); border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--gamme-sur, var(--gamme-encre)) 22%, transparent);
  }
}
.assurance__fort {
  font-family: var(--titre); font-size: var(--t-h4);
  line-height: 1.15; letter-spacing: var(--ls-titre);
  font-weight: var(--gr-appuye); color: inherit;
}
/* Explication sous un chiffre : elle existe sur la page Édition, nulle part
   ailleurs. Plus petite que le libellé, elle ne lui dispute pas la lecture. */
.chiffre__note {
  font-family: var(--texte-police); font-size: var(--t-mention);
  line-height: 1.45; color: var(--texte-mention); max-width: 26ch;
}
.bloc--sombre .chiffre__note { color: var(--texte-inverse-doux); }

.assurance__suite {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--gamme-sur, var(--gamme-encre)); opacity: .82;
}

/* La colonne d'image ne doit pas imposer sa hauteur : l'image est détachée du
   flux et remplit la case, sinon un visuel vertical de 1712 px pousse le hero
   bien au-delà de l'écran. */
.hero-gamme__media { position: relative; overflow: hidden; min-height: 0; z-index: 0; }
.hero-gamme__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .hero-gamme__media { position: static; }
  .hero-gamme__media img { position: static; }
}
@media (max-width: 899px) { .hero-gamme__media img { aspect-ratio: 16 / 10; } }
.hero-gamme__legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-8) var(--e-4) var(--e-3);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--papier);
  background: linear-gradient(180deg, transparent, rgb(6 8 8 / .7));
}

/* Marque de gamme dans la tête : le repère le plus rapide. */
.tete-page__gamme { display: grid; gap: var(--e-4); justify-items: start; margin-bottom: var(--e-6); }
.tete-page__gamme img { width: clamp(148px, 20vw, 210px); height: auto; }
.tete-page__gamme .etiquette { margin: 0; }

/* Titre de tête d'une page de gamme : la hiérarchie vient de la graisse et
   de la couleur, jamais des capitales seules. Les segments en capitales du
   texte gelé sont mis en avant, les liaisons restent en retrait. */
/* ⚠️ La casse du titre de tête a été changée : les capitales d'origine
   formaient un pavé illisible sur quatre lignes. Les MOTS sont intacts, la
   casse ne l'est pas — c'est un écart au gel, assumé et à valider par Romain.
   La hiérarchie vient désormais de la graisse et de la couleur de gamme. */
.titre-gamme { display: grid; gap: var(--e-1); max-width: 15ch; }
.titre-gamme b {
  display: block; font-weight: var(--gr-appuye);
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: var(--ls-display);
}
.titre-gamme b.fort { color: var(--gamme, var(--papier)); }
.titre-gamme .liaison {
  display: block; font-weight: var(--gr-normal);
  font-size: var(--t-h4); line-height: 1.3; letter-spacing: 0;
  color: var(--texte-inverse-doux);
}
.tete-page__gamme img { width: clamp(210px, 30vw, 340px); }

/* Le voile du hero s'allège : on doit voir de quoi la page parle. */
[data-gamme] .tete-page__voile {
  background:
    linear-gradient(90deg, rgb(6 8 8 / .82) 0%, rgb(6 8 8 / .52) 46%, rgb(6 8 8 / .18) 100%),
    linear-gradient(180deg, rgb(6 8 8 / .28) 0%, transparent 40%, rgb(6 8 8 / .55) 100%);
}
.tete-page--visuel .etiquette { color: var(--texte-inverse-doux); }
.tete-page--visuel .chapeau { color: var(--texte-inverse-doux); }
.tete-page--visuel .tete__filet { opacity: .3; }
.tete-page__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.tete-page__media img { width: 100%; height: 100%; object-fit: cover; }
.tete-page__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 12 12 / .58) 0%, rgb(10 12 12 / .40) 45%, rgb(6 8 8 / .86) 100%);
}

/* --------------------------------------------------------- corps de page --
   Une page intérieure est une suite de sections, toutes bâties sur la même
   grille à marge d'index que la home. */

.bloc { padding-block: var(--souffle-court); }
.bloc--ample { padding-block: var(--souffle); }
/* ⚖️ Romain, 13/09 : « j'ai beaucoup d'écritures noires sur fond vert foncé,
   c'est valable sur plusieurs sections. » La cause n'était pas une section
   mais la méthode : chaque composant recevait sa couleur inversée par une
   règle dédiée, et il suffisait qu'une règle plus tardive de même poids
   (.mouvement .lecture p) repose --texte pour que le noir revienne. On
   inverse donc les JETONS à l'entrée du bloc : tout ce qui lit --texte ou
   --texte-doux suit, y compris les composants écrits plus tard. */
.bloc--sombre {
  background: var(--fond-sombre); color: var(--texte-inverse);
  --texte: var(--texte-inverse);
  --texte-doux: var(--texte-inverse-doux);
  --texte-mention: rgb(255 255 255 / .62);
}
/* Les îlots clairs posés DANS un bloc sombre reprennent l'encre normale :
   sinon on écrirait blanc sur blanc. */
/* ⚠️ Toute boîte qui repose sa propre surface claire DANS un bloc sombre doit
   remettre les jetons d'encre à l'endroit, sinon elle hérite du blanc du bloc
   et son texte disparaît sur son propre fond. .atout manquait à la liste :
   « il n'y a rien d'affiché dans les carrés » (Romain, 15/09). */
.bloc--sombre .carte-gamme,
.bloc--sombre .profil,
.bloc--sombre .atout,
.bloc--sombre .sigle,
.bloc--sombre .limite,
.bloc--sombre .entree {
  --texte: var(--encre);
  --texte-doux: rgb(0 0 0 / .69);
  --texte-mention: rgb(0 0 0 / .55);
}
.bloc--doux { background: var(--fond-doux); }
[data-gamme] .bloc--doux { background: var(--gamme-doux, var(--fond-doux)); }
[data-gamme] .bloc--sombre { background: var(--gamme-sombre, var(--fond-sombre)); }
/* Deux blocs de même fond se suivent sans doubler la respiration, mais ils
   ne se collent pas : le texte doit respirer sous la section précédente. */
.bloc + .bloc:not(.bloc--sombre):not(.bloc--doux):not(.bloc--gamme) { padding-top: var(--souffle-court); }

/* colonne de lecture : tout texte long passe par là, jamais en pleine largeur */
.lecture { max-width: 68ch; display: grid; gap: var(--e-5); }
.lecture > * { max-width: 100%; }
.lecture h2 { font-size: var(--t-h3); margin-top: var(--e-6); }
.lecture h3 { font-size: var(--t-h4); margin-top: var(--e-5); }
.lecture h2:first-child, .lecture h3:first-child { margin-top: 0; }
.lecture p { color: var(--texte-doux); }
.lecture strong, .lecture b { color: var(--texte); font-weight: var(--gr-appuye); }
.lecture ul { display: grid; gap: var(--e-3); }
.lecture ul li { color: var(--texte-doux); }
/* La flèche est un vrai nœud de texte et non un ::before : sur le site actuel
   elle fait partie du contenu, et le contrôle de parité la compte.
   Elle vit dans sa propre colonne, sinon elle se colle au mot suivant et la
   liste redevient un pavé — reproche de Romain le 13/09. */
.puces { display: grid; gap: var(--e-3); }
/* ⚠️ La grille à deux colonnes ne vaut QUE pour les listes à flèche. Une
   liste d'article vient du Markdown et n'en a pas : son texte tombait dans
   la colonne de 1,4 em et se lisait à un mot par ligne (Romain, 13/09). */
.puces li,
.lecture ul li:has(.fleche) {
  display: grid; grid-template-columns: 1.4em 1fr; gap: var(--e-2);
  align-items: baseline; color: var(--texte-doux);
}
/* Une liste d'article garde une puce, dessinée plutôt que confiée au
   ::marker, que chaque navigateur place à sa façon. */
.lecture ul li:not(:has(.fleche)) { position: relative; padding-left: 1.4em; }
.lecture ul li:not(:has(.fleche))::before {
  content: ""; position: absolute; left: .25em; top: .66em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gamme-encre, var(--action));
}
.lecture ol { display: grid; gap: var(--e-3); counter-reset: puce; }
.lecture ol li {
  position: relative; padding-left: 1.9em; color: var(--texte-doux); counter-increment: puce;
}
.lecture ol li::before {
  content: counter(puce) "."; position: absolute; left: 0; top: .1em;
  font-family: var(--mono); font-size: var(--t-mention);
  color: var(--gamme-encre, var(--action));
}
.puces li .fleche,
.lecture ul li .fleche { font-family: var(--mono); color: var(--gamme-encre, var(--action)); }
.bloc--sombre .puces li { color: var(--texte-inverse-doux); }
/* .corps porte une encre sombre par défaut : sur fond sombre, la ligne
   d'introduction d'un bénéfice (« Conçue pour répondre à ») disparaissait et
   laissait un blanc au-dessus des puces. C'était l'« espace mort » relevé sur
   la page alimentaire (Romain, 13/09). */
.bloc--sombre .corps,
.bloc--sombre .chapeau,
.bloc--sombre .mention { color: var(--texte-inverse-doux); }
.bloc--sombre .titre-4 { color: var(--texte-inverse); }
.lecture a { color: var(--texte-accent); text-underline-offset: 3px; }
.bloc--sombre .lecture p, .bloc--sombre .lecture ul li { color: var(--texte-inverse-doux); }
.bloc--sombre .lecture strong, .bloc--sombre .lecture b { color: var(--texte-inverse); }

/* ------------------------------------------------------------- chiffres --
   C'est le moment le plus lisible d'une page secteur : une icône qui dit le
   sujet avant la lecture, un chiffre à l'échelle, un libellé court. Les
   chiffres sont en Archivo et non en chasse fixe : la chasse fixe donnait un
   registre tableur là où il faut de la présence (Romain, 13/09). */

.chiffres {
  display: grid; gap: 1px;
  background: color-mix(in srgb, var(--gamme-encre, var(--encre)) 16%, transparent);
}
@media (min-width: 620px)  { .chiffres { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .chiffres { grid-template-columns: repeat(var(--colonnes, 4), minmax(0,1fr)); } }
.chiffre {
  background: var(--fond-bande, var(--fond));
  padding: var(--e-7) var(--e-5) var(--e-6);
  display: grid; gap: var(--e-4); align-content: start;
}
.chiffre__icone {
  width: clamp(38px, 3.6vw, 48px); height: clamp(38px, 3.6vw, 48px);
  color: var(--gamme-encre, var(--action));
}
/* (le titre de carte a repris la couleur d'encre courante, voir plus bas) */
.chiffre__valeur {
  font-family: var(--titre); font-variant-numeric: tabular-nums;
  font-size: var(--t-chiffre, clamp(2.5rem, 1.4rem + 3.4vw, 4rem));
  line-height: .96; letter-spacing: -.04em; font-weight: var(--gr-appuye);
  color: var(--gamme-encre, var(--texte-accent));
  overflow-wrap: anywhere;
}
.chiffre__valeur .unite { font-size: .52em; font-weight: var(--gr-moyen); margin-left: .12em; }
/* ⚖️ Romain, 15/09 : « pour les 5 tonnes et le seuil produit, j'aimerais que
   le "seuil produit" ressorte un peu plus, soit du vert soit une police plus
   grande. » Les deux : la couleur de la rubrique et un cran de corps. */
.chiffre__libelle {
  font-family: var(--mono); font-size: var(--t-mention);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  font-weight: var(--gr-moyen);
  color: var(--gamme-encre, var(--texte-accent)); line-height: 1.55;
  padding-top: var(--e-4);
  border-top: 1px solid color-mix(in srgb, var(--gamme-encre, var(--encre)) 20%, transparent);
}
.bloc--sombre .chiffre__libelle { color: var(--sur-sombre, var(--texte-inverse)); }
.bloc--sombre .chiffres { background: var(--ligne-inverse); }
.bloc--sombre .chiffre { background: var(--fond-sombre); }
.bloc--sombre .chiffre__valeur, .bloc--sombre .chiffre__icone { color: var(--gamme, var(--action-focus)); }
.bloc--sombre .chiffre__libelle { color: var(--texte-inverse-doux); border-top-color: var(--ligne-inverse); }

/* Le chiffre monte à sa valeur en entrant à l'écran. Sans JS, il est déjà là. */
.js .chiffre__valeur[data-monte] { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- usages --
   Un usage se projette : une image, un intitulé, la liste des applications.
   Sans image, la section n'est qu'une colonne de mots (Romain, 13/09). */

.usages { display: grid; gap: var(--e-8) var(--e-6); }
@media (min-width: 760px) { .usages { grid-template-columns: repeat(2, 1fr); } }
.usage { display: grid; gap: var(--e-5); align-content: start; }
/* Grand, et le même traitement pour les quatre : l'image porte l'usage, la
   liste vient après. Quatre vignettes de 200 px n'apprenaient rien. */
.usage__vue {
  aspect-ratio: 3 / 2; overflow: hidden;
  background: color-mix(in srgb, var(--gamme, var(--encre)) 22%, var(--papier));
}
.usage__vue img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-long) var(--courbe);
}
.usage:hover .usage__vue img { transform: scale(1.05); }
/* ⚖️ Romain, 15/09, sur trois pages de suite : « le titre, c'est tout petit,
   pas agréable à lire », « ils sont trop petits et pas uniformisés avec le
   reste ». Le mono en capitales est le dessin d'un SURTITRE, pas d'un titre
   de carte. Il prend donc la même forme que .carte-gamme__titre — un seul
   dessin de titre de carte pour tout le site. Le filet reste : c'est lui qui
   sépare le titre de la liste. */
.usage__titre {
  font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); letter-spacing: var(--ls-corps);
  font-weight: var(--gr-appuye); text-transform: none;
  color: var(--texte);
  padding-bottom: var(--e-3); border-bottom: 1px solid var(--ligne);
}
.usage .puces { font-size: var(--t-mention); }

/* -------------------------------------------------------- bandeau photo --
   Une bande pleine largeur, bord à bord, sans texte : elle ne sert qu'à se
   projeter. C'est ce qui manquait à la page (Romain, 13/09). */

.bandeau-photo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.bandeau-photo img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 4; display: block;
  transition: transform var(--d-long) var(--courbe);
}
@media (min-width: 900px) { .bandeau-photo img { aspect-ratio: 4 / 5; } }
.bandeau-photo figure { margin: 0; overflow: hidden; }
.bandeau-photo figure:hover img { transform: scale(1.04); }
@media (max-width: 760px) {
  .bandeau-photo { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .bandeau-photo figure:last-child { display: none; }
}

/* ---------------------------------------------------------- bénéfices --
   Un picto par bénéfice : on doit savoir de quoi il s'agit avant de lire.
   La grille démarre sous le titre, sans blanc mort. */

.benefices { display: grid; gap: 1px; background: var(--ligne-inverse); }
@media (min-width: 700px)  { .benefices { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .benefices { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.benefice {
  background: var(--fond-sombre);
  padding: var(--e-6) var(--e-5) var(--e-7);
  display: grid; gap: var(--e-4); align-content: start;
}
.benefice__icone {
  width: 40px; height: 40px; color: var(--gamme, var(--action-focus));
}
.benefice h3 { font-size: var(--t-h4); }
.benefice .corps { font-size: var(--t-mention); }

/* ------------------------------------------------------------- jalons --
   Les étiquettes réglementaires (PFAS, PPWR, EUDR, GREEN DEAL) et toute
   série courte de repères. */

.jalons { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.jalon {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--ligne-appuyee); border-radius: var(--r-pilule);
}
.bloc--sombre .jalon, .sur-photo .jalon { border-color: var(--ligne-inverse); }

/* ------------------------------------------------------------- rangees --
   Item + description en lignes pleine largeur : usages, bénéfices, étapes.
   Remplace les grilles de cartes quand le contenu est une énumération. */

.rangees { display: grid; }
.rangee-item {
  display: grid; gap: var(--e-4) var(--e-7);
  padding-block: var(--e-6);
  border-top: 1px solid var(--ligne);
}
.rangees .rangee-item:last-child { border-bottom: 1px solid var(--ligne); }
@media (min-width: 860px) {
  /* Le titre garde au moins 240 px : à un tiers de la colonne, « Basculer les
     achats vers des flux "matières brutes + finition UE" » tombait sur quatre
     lignes de deux mots (Romain, 13/09). */
  .rangee-item { grid-template-columns: minmax(240px, 1fr) 1.7fr; align-items: baseline; }
  /* ⚠️ Une rangée qui n'a QU'UN titre le laissait dans la colonne d'un tiers :
     trois mots par ligne dans une page de 1400 px (Romain, 13/09). Sans
     texte, le titre prend toute la largeur. */
  .rangee-item:not(:has(p)) { grid-template-columns: 1fr; }
  .rangee-item:not(:has(p)) h3 { max-width: 90ch; }
}
/* ⚠️ 15/09 : sur une rangée dont le titre passe à trois ou quatre lignes, le
   centrage vertical du picto remontait le premier mot contre le filet du
   haut. Romain : « GMS Premium, c'est collé à la ligne. » Le picto s'aligne
   désormais sur la première ligne, et la rangée respire par le haut. */
.rangee-item h3 {
  font-size: var(--t-h4); display: flex; align-items: flex-start; gap: var(--e-4);
  line-height: var(--lh-sous); margin: 0;
}
.rangee-item h3 .rangee-item__icone { margin-top: -.15em; }
/* Le picto porte la couleur de la gamme, pas un vert foncé générique : c'est
   le code couleur de la section (Romain, 13/09). Il est posé sur un disque de
   la même teinte, très clair, pour rester lisible sur blanc. */
.rangee-item__icone {
  width: 42px; height: 42px; flex: none; padding: 8px; border-radius: 50%;
  color: var(--gamme, var(--action));
  background: color-mix(in srgb, var(--gamme, var(--action)) 28%, var(--papier));
}
.rangee-item__icone .icone { stroke-width: 1.7; }
.rangee-item p { color: var(--texte-doux); font-size: var(--t-corps); }
.bloc--sombre .rangee-item { border-color: var(--ligne-inverse); }
.bloc--sombre .rangee-item p { color: var(--texte-inverse-doux); }

/* ----------------------------------------------------------- deux temps --
   Texte d'un côté, visuel de l'autre. Le sens alterne d'un bloc au suivant. */

.duo { display: grid; gap: var(--e-8); align-items: center; }
@media (min-width: 940px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--e-10); }
  .duo--inverse > :first-child { order: 2; }
}
.duo__media { position: relative; }
.duo__media img { width: 100%; }
/* Une image ne se truque pas en transparence pour « s'intégrer » : elle prend
   sa place. Elle remplit sa colonne du haut jusqu'en bas, bord à bord, sans
   cadre ni fondu. Reproche de Romain le 13/09, et il avait raison. */
.duo--plein { align-items: stretch; gap: 0; }
@media (min-width: 940px) { .duo--plein { grid-template-columns: 1fr 1.2fr; } }
.duo--plein .duo__texte { padding-block: var(--souffle-court); padding-right: var(--e-9); }
.duo__media--plein { align-self: stretch; }
.duo__media--plein img {
  width: 100%; height: 100%; object-fit: cover;
  min-height: clamp(300px, 32vw, 520px);
}

/* ------------------------------------------------------------ document --
   Cas /catalogue-solutions-industrielles-rn : 47 mots et un PDF de 64 pages.
   Le contenu EST le document ; la page l'annonce et le donne, sans le
   déguiser en texte. */

.document {
  display: grid; gap: var(--e-5);
  padding: var(--e-7); border: 1px solid var(--ligne-appuyee);
  max-width: var(--rail-texte);
}
.document__meta {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
}
.document__cadre {
  aspect-ratio: 3 / 4; width: 100%; border: 1px solid var(--ligne);
  background: var(--fond-doux);
}
.document__cadre iframe, .document__cadre embed, .document__cadre object {
  width: 100%; height: 100%; border: 0; display: block;
}
.document__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* ------------------------------------------------------------- article --
   Un article se lit, il ne se parcourt pas : colonne unique, mesure courte,
   dates et catégories en chasse fixe. */

.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
}
.article__corps { max-width: 66ch; display: grid; gap: var(--e-5); font-size: var(--t-lead); }

/* Un article était entièrement en noir et gris : rien n'accrochait l'œil
   (Romain, 13/09). La couleur entre par trois portes seulement — les
   intertitres, les passages saillants, les citations — et c'est toujours la
   même, le vert Minerya. Une quatrième couleur ferait un sapin de Noël. */
.article__corps h2 {
  font-size: var(--t-h3); margin-top: var(--e-7);
  color: var(--texte-accent); position: relative; padding-top: var(--e-4);
}
.article__corps h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 2px; background: var(--action);
}
.article__corps h3 { font-size: var(--t-h4); margin-top: var(--e-5); color: var(--texte-accent); }
.article__corps p { color: var(--texte-doux); }

/* Le passage saillant est surligné plutôt que noirci : le gras seul se
   confond avec le texte courant sur un écran. */
.article__corps strong, .article__corps b {
  color: var(--texte); font-weight: var(--gr-appuye);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--action) 22%, transparent) 62%);
}

/* La citation quitte la colonne de lecture par la gauche : on la voit avant
   de la lire. */
.article__corps blockquote {
  margin: var(--e-4) 0; padding: var(--e-2) 0 var(--e-2) var(--e-6);
  border-left: 3px solid var(--action);
  font-family: var(--titre); font-size: var(--t-h4); line-height: var(--lh-sous);
  letter-spacing: var(--ls-corps); color: var(--texte-accent);
}
.article__corps blockquote p { color: inherit; }
@media (min-width: 1100px) { .article__corps blockquote { margin-left: calc(var(--e-7) * -1); } }

.article__corps img { margin-block: var(--e-4); }
.article__corps figcaption, .article__corps em:only-child {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention); font-style: normal;
}
.article__pied {
  margin-top: var(--souffle-court); padding-top: var(--e-6);
  border-top: 1px solid var(--ligne);
  display: flex; flex-wrap: wrap; gap: var(--e-5); justify-content: space-between; align-items: center;
}

/* --------------------------------------------------------- liste blog -- */

.liste-articles { display: grid; gap: var(--e-7) var(--e-6); }
@media (min-width: 760px)  { .liste-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .liste-articles { grid-template-columns: repeat(3, 1fr); } }
.entree { display: grid; gap: var(--e-4); align-content: start; }
/* La vignette est un lien : sans display:block, un <a> reste en ligne et
   aspect-ratio n'a aucun effet — les cartes de la liste se désalignaient
   au gré du format de chaque couverture. */
.entree__vue { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--brun); }
.entree__vue img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-long) var(--courbe);
}
.entree:hover .entree__vue img { transform: scale(1.04); }
.entree__titre { font-size: var(--t-h4); }
.entree__titre a { text-decoration: none; }
.entree__titre a:hover { color: var(--texte-accent); }
.entree__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
}
.entree__extrait { font-size: var(--t-mention); color: var(--texte-doux); }

.filtres { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.filtres a {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  padding: var(--e-2) var(--e-4); text-decoration: none;
  border: 1px solid var(--ligne-appuyee); border-radius: var(--r-pilule);
  transition: background var(--d-court) var(--courbe), color var(--d-court) var(--courbe);
}
.filtres a:hover, .filtres a[aria-current="page"] { background: var(--action); color: var(--action-texte); border-color: var(--action); }

/* --------------------------------------------------------------- offre --
   Page de rendez-vous et fiche produit : même forme, un visuel, un énoncé
   court, des caractéristiques en chasse fixe, une action. */

.offre { display: grid; gap: var(--e-8); align-items: start; }
@media (min-width: 940px) { .offre { grid-template-columns: 1fr 1fr; gap: var(--e-10); } }
.offre__media img { width: 100%; }
.offre__faits { display: grid; gap: 0; margin-block: var(--e-6); }
.offre__fait {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-4);
  padding-block: var(--e-3); border-top: 1px solid var(--ligne);
  font-size: var(--t-petit);
}
.offre__faits .offre__fait:last-child { border-bottom: 1px solid var(--ligne); }
.offre__fait dt { color: var(--texte-mention); }
.offre__fait dd { margin: 0; font-family: var(--mono); text-align: right; }
.offre__reservation { margin-top: var(--e-6); }
.offre__reservation iframe { width: 100%; min-height: 620px; border: 1px solid var(--ligne); display: block; }

/* -------------------------------------------------------- fin de page --
   Toute page intérieure se termine par une reprise d'action. */

.fin {
  display: grid; gap: var(--e-6);
  padding-top: var(--e-7); border-top: 2px solid currentColor;
}
/* ⚠️ `auto` sur la colonne du bouton : un intitulé long lui donnait la moitié
   du bloc et le texte tombait à deux mots par ligne. La colonne est bornée,
   et le bouton lui-même plafonne (Romain, 13/09). */
@media (min-width: 900px) {
  /* La colonne du bouton prend sa largeur NATURELLE, plafonnée : un intitulé
     court tient alors sur une ligne — « Découvrir nos solutions
     industrielles » se coupait en deux —, et un intitulé long reste borné au
     lieu de manger la moitié du bloc (Romain, 13/09). */
  .fin { grid-template-columns: minmax(0, 1fr) minmax(0, min(max-content, 24rem)); align-items: end; }
  /* Sans bouton, il n'y a pas de seconde colonne à réserver : la phrase
     prenait la moitié de la page pour rien. */
  .fin:not(:has(.panibag__action)) { grid-template-columns: 1fr; }
}
.fin h2 { max-width: 30ch; font-size: var(--t-h3); }
.fin .cta { justify-self: start; max-width: 100%; }
.fin .panibag__action .cta { text-align: left; }

/* --------------------------------------------------------- familles --
   Les pages Packaging et Technique détaillent leurs usages par famille :
   un intitulé de famille, sa phrase, puis ses métiers. Sans ce palier, les
   14 entrées formaient un mur indifférencié (« des gros pavés de textes »,
   Romain 13/09). La famille se lit d'abord, le détail ensuite. */
.familles { display: grid; gap: var(--souffle-court); }
.famille { display: grid; gap: var(--e-4); }
.famille__tete { display: flex; align-items: center; gap: var(--e-4); margin: 0; }
.famille__icone {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 10px;
  color: var(--gamme-encre, var(--action));
  border: 1px solid color-mix(in srgb, var(--gamme-encre, var(--encre)) 34%, transparent);
  border-radius: 50%;
}
.famille__nom {
  font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); letter-spacing: var(--ls-corps);
  font-weight: var(--gr-appuye);
  color: var(--gamme-encre, var(--texte-accent));
}
.famille__chapeau {
  font-family: var(--texte-police); font-size: var(--t-lead);
  line-height: 1.5; color: var(--texte-mention); max-width: 62ch; margin: 0;
}
.famille .rangees { margin-top: var(--e-3); }

/* ----------------------------------------------------------- jauges --
   Quatre constats posés au-dessus des bénéfices, en une seule ligne.
   Ce sont des faits, pas des puces : pas de tiret, un filet les sépare. */
.jauges {
  list-style: none; margin: var(--e-7) 0 0; padding: 0;
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.jauges li {
  padding-top: var(--e-3);
  border-top: 1px solid var(--ligne-appuyee);
  font-family: var(--mono); font-size: var(--t-mention);
  line-height: 1.4; text-transform: uppercase; letter-spacing: .02em;
}
.bloc--sombre .jauges li { border-top-color: var(--ligne-inverse); color: var(--texte-inverse-doux); }

/* ------------------------------------------------------ bandeau large --
   Une seule image pleine largeur, en respiration entre deux sections.
   Elle ne porte aucun texte : sa hauteur est bornée pour ne jamais pousser
   la lecture hors de l'écran. */
.bandeau-large { overflow: hidden; height: clamp(200px, 34vw, 420px); }
.bandeau-large img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }

/* ------------------------------------------------------- comparatif --
   Cinq critères sur trois matières. La colonne de la feuille minérale est
   la seule à porter un fond : le tableau doit se lire, pas s'arbitrer.
   Il déborde sur téléphone, dans son propre conteneur, jamais la page. */
.comparatif { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparatif table { border-collapse: collapse; width: 100%; min-width: 720px; }
.comparatif th, .comparatif td {
  padding: var(--e-5) var(--e-4); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ligne);
}
.comparatif thead th {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention); border-bottom-color: var(--ligne-appuyee);
  white-space: nowrap;
}
.comparatif tbody th {
  font-family: var(--mono); font-size: var(--t-mention);
  text-transform: uppercase; letter-spacing: .02em;
  font-weight: var(--gr-normal); color: var(--texte-mention); width: 1%; white-space: nowrap;
}
.comparatif td { font-size: var(--t-petit); line-height: 1.45; color: var(--texte-doux); }
.comparatif .cellule__ligne { display: block; }
.comparatif .cellule__ligne + .cellule__ligne { margin-top: var(--e-1); }
.comparatif .est-notre-colonne {
  background: color-mix(in srgb, var(--gamme, var(--action)) 12%, transparent);
  color: var(--texte); font-weight: var(--gr-moyen);
}
.comparatif thead .est-notre-colonne { color: var(--texte); }

/* --------------------------------------------- bénéfices sur fond clair --
   Même grille que la version sombre, les filets prennent l'encre du papier. */
.benefices--clair { background: var(--ligne); }
.benefices--clair .benefice { background: var(--fond); }

/* --------------------------------------------------- carte de gamme --
   Sur la page matière, chaque usage renvoie à sa gamme. La carte emprunte
   la couleur de cette gamme pour son filet et sa flèche : on reconnaît la
   destination avant de lire son nom. */
.usage--gamme { border-top: 3px solid var(--gamme, var(--action)); padding-top: var(--e-5); }
.usage--gamme .usage__titre { border-bottom: 0; }
.usage__lien {
  display: flex; align-items: center; gap: var(--e-4);
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--ligne); text-decoration: none;
}
.usage__lien span {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--gamme-encre, var(--action));
}
.usage__lien img { width: clamp(96px, 34%, 132px); height: auto; }
.usage__lien:hover span { text-decoration: underline; text-underline-offset: .3em; }

/* ------------------------------------------------------- composition --
   80 % de minéral, 20 % de résine : une proportion se montre, elle ne se
   liste pas. La barre porte les deux parts à l'échelle, chaque part est
   reliée à sa description par la couleur. Remplace le camembert sur fond
   blanc, posé dans un carré blanc à côté d'un grand vide (Romain, 13/09). */
.composition { display: grid; gap: var(--e-7); }
/* Le camembert détouré : pas de cadre, pas de fond, il pose sa découpe sur
   la couleur de la page. */
.composition__camembert { margin: 0; }
.composition__camembert img { width: clamp(220px, 34vw, 380px); height: auto; display: block; }
/* ⚖️ Romain, 13/09 : le camembert se place À GAUCHE de la barre, plus petit,
   à la même hauteur qu'elle. La première tentative avait échoué parce que
   les LÉGENDES suivaient dans la même colonne et tombaient à un mot par
   ligne. Ici seule la barre partage la rangée ; les légendes passent en
   dessous, sur toute la largeur. */
.composition__camembert { justify-self: start; }
/* ⚠️ Ne plus mettre le camembert dans cette grille : il y volait sa largeur
   à la barre, et le 80/20 cessait d'être aligné sur ses légendes. Il vit
   maintenant dans la colonne de marge (Romain, 13/09). */
.composition__barre {
  display: flex; height: 76px; overflow: hidden;
  border: 1px solid var(--ligne-appuyee);
}
.composition__part {
  flex: 0 0 auto; width: calc(var(--part) * 1%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--courbe);
}
.js .est-visible .composition__part,
.composition[data-reveal].est-visible .composition__part { transform: scaleX(1); }
.composition__part--80 { background: var(--vert); }
.composition__part--20 {
  background: var(--purecontact);
  border-left: 1px solid var(--papier);
  transition-delay: .18s;
}
.composition__legendes { display: grid; gap: var(--e-6); }
/* Deux colonnes égales. Une largeur proportionnelle à la part se lit comme
   un bug, pas comme une intention : c'est la barre qui porte l'échelle. */
@media (min-width: 760px) { .composition__legendes { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.composition__ligne {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: start;
  padding-top: var(--e-4); border-top: 3px solid;
}
.composition__ligne--80 { border-top-color: var(--vert); }
.composition__ligne--20 { border-top-color: var(--purecontact); }
.composition__chiffre {
  font-family: var(--titre); font-size: var(--t-h1); line-height: .9;
  letter-spacing: var(--ls-display); font-weight: var(--gr-appuye);
  font-variant-numeric: tabular-nums; margin: 0;
}
.composition__ligne--80 .composition__chiffre { color: var(--vert); }
/* Le 20 % prend le vert clair de sa part sur la barre : le chiffre et le
   segment se répondent (Romain, 13/09). Un ton foncé les décrochait. */
.composition__ligne--20 .composition__chiffre { color: var(--purecontact); }
.composition__chiffre .unite { font-size: .42em; margin-left: .12em; vertical-align: .9em; }
.composition__quoi {
  font-family: var(--titre); font-size: var(--t-h4); line-height: var(--lh-sous);
  letter-spacing: var(--ls-corps); color: var(--texte); margin: 0 0 var(--e-2);
}
/* ⚠️ Cibler « .composition__ligne p » écrasait le chiffre, qui est un <p> :
   il retombait à la taille du texte courant. La règle ne vise que le texte
   de description. */
.composition__ligne > div > p:last-child { color: var(--texte-doux); font-size: var(--t-petit); margin: 0; }

/* ------------------------------------------------------ carte de gamme --
   Quatre portes vers les quatre gammes. Chacune porte SA couleur, du filet
   de tête au bouton, et le nom du secteur se lit de loin : en mono minuscule
   il passait inaperçu et on ne voyait pas non plus que « Découvrir » était
   un bouton (Romain, 13/09). */
.carte-gamme {
  display: grid; gap: var(--e-4); align-content: start;
  padding-top: var(--e-5); border-top: 6px solid var(--gamme);
}
.carte-gamme__vue {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: color-mix(in srgb, var(--gamme) 22%, var(--papier));
}
.carte-gamme__vue > img:first-child {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--d-long) var(--courbe);
}
.carte-gamme:hover .carte-gamme__vue > img:first-child { transform: scale(1.04); }
/* Le logotype se pose SUR l'image, dans un bandeau clair : posé dessous il
   flottait, et l'œil ne savait pas à quelle carte il appartenait. */
.carte-gamme__logo {
  position: absolute; left: 0; bottom: 0; width: clamp(120px, 52%, 190px); height: auto;
  padding: var(--e-3) var(--e-4);
  background: var(--gamme);
}
/* ⚖️ Romain, 13/09 : la couleur d'une gamme, c'est SA couleur de charte, pas
   un ton foncé dérivé. Elle est donc partout — filet, pastille, bouton — et
   le titre la porte en surlignage plutôt qu'en encre : le vert d'eau et l'or
   ne se lisent pas en texte sur du papier, ils se lisent en aplat. */
/* ⚠️ Le surlignage a été retiré : un titre dans un encadré de couleur
   n'apportait rien et alourdissait la carte (Romain, 13/09). La couleur de
   la gamme reste sur le filet, la pastille du logotype et le bouton. */
/* ⚖️ Romain, 13/09 : le titre en mono capitales très espacées était « trop
   large et trop espacé » — « PACKAGING ALIMENTAIRE (FEUILLE PUR CONTACT
   MINERYA) » tenait sur trois lignes pour dire deux mots. Il revient à la
   police de titre, en casse normale ; la précision entre parenthèses passe
   sur sa propre ligne, en second plan. */
.carte-gamme__titre {
  font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); letter-spacing: var(--ls-corps);
  font-weight: var(--gr-appuye); text-transform: none;
  color: var(--texte); margin: 0;
}
.carte-gamme__note {
  display: block; margin-top: var(--e-1);
  font-family: var(--texte-police); font-size: var(--t-mention);
  font-weight: var(--gr-normal); letter-spacing: 0;
  color: var(--texte-mention);
}
.carte-gamme__chapeau { font-size: var(--t-corps); color: var(--texte); margin: 0; }
.carte-gamme .puces li { font-size: var(--t-petit); }
.carte-gamme__action { margin: var(--e-3) 0 0; }
.carte-gamme .cta {
  background: var(--gamme);
  color: var(--gamme-sur-corps, var(--texte));
  -webkit-text-fill-color: currentColor;
}
.carte-gamme .cta:hover { background: color-mix(in srgb, var(--gamme) 86%, black); }

/* Un picto par colonne du comparatif. */
.comparatif thead th { vertical-align: bottom; }
.comparatif__picto {
  display: block; width: 26px; height: 26px;
  margin-bottom: var(--e-3); color: var(--texte-mention);
}
.comparatif .est-notre-colonne .comparatif__picto { color: var(--vert); }

/* ------------------------------------------------- carte d'identité --
   Quatorze faits sur la matière, un picto chacun. On doit pouvoir se dire
   « ça ne consomme pas d'arbres » sans lire une phrase (Romain, 13/09).
   Grille dense, aucune carte : ce sont des faits alignés, pas des objets. */
/* ⚠️ Pas de grille à fond plein ici : avec cinq entrées sur quatre colonnes,
   la case manquante s'affichait en aplat gris. Chaque fait porte son propre
   filet, une case absente ne laisse donc rien derrière elle. */
.identite {
  display: grid; gap: var(--e-6) var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* Une famille de quatre entrées courtes tient sur un rang : à trois colonnes,
   la quatrième restait seule sous un grand vide. */
@media (min-width: 1000px) { .identite--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.identite__item {
  padding-top: var(--e-4); border-top: 1px solid var(--ligne);
  display: grid; gap: var(--e-2); align-content: start;
}
/* Le vert officiel, pas un ton foncé dérivé, et une taille qui se voit de
   loin : c'est le picto qu'on lit ici, pas la phrase (Romain, 13/09). */
/* Le picto suit la rubrique de SA page : vert Minerya sur /feuille-minerale,
   bleu européen sur la page mono-matériau, qui relève de la réglementation.
   Sur les pages de la marque, --gamme-encre VAUT le vert : rien ne change là. */
.identite__icone {
  width: 52px; height: 52px; color: var(--gamme-encre, var(--vert)); stroke-width: 1.2;
  margin-bottom: var(--e-3);
}
.identite__famille + .identite__famille { margin-top: var(--souffle-court); }
.identite__nom {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  font-weight: var(--gr-normal); color: var(--texte-mention);
  margin: 0 0 var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--ligne-appuyee);
}
.identite__item h4 {
  font-size: var(--t-corps); line-height: var(--lh-sous);
  letter-spacing: var(--ls-corps); margin: 0;
}
.identite__item h3 {
  font-size: var(--t-corps); line-height: var(--lh-sous);
  letter-spacing: var(--ls-corps); margin: 0;
}
.identite__item p { font-size: var(--t-mention); line-height: 1.45; color: var(--texte-mention); margin: 0; }

/* Les pastilles réglementaires sur la photo du hero de la home : même objet
   que sur les pages de gamme, encre inversée puisque le fond est sombre. */
.hero .jalons { margin-top: var(--e-6); }
.hero .jalon { border-color: var(--ligne-inverse); color: var(--texte-inverse-doux); }

/* --------------------------------------------------- pile de dossier --
   Dans une catégorie, les articles se rangent par dossier. Le nom du dossier
   coupe la liste par un filet plein largeur : on voit où finit PPWR et où
   commence EUDR sans compter les cartes. */
.pile + .pile { margin-top: var(--souffle-court); }
/* Le filet passe au-dessus du nom de dossier : il se cale alors sur celui de
   la colonne de gauche, à la même hauteur, au lieu de flotter dessous
   (Romain, 13/09). */
.pile__nom {
  display: flex; align-items: baseline; gap: var(--e-4);
  margin: 0 0 var(--e-6); padding-top: var(--e-3);
  border-top: 2px solid var(--gamme, var(--ligne-appuyee));
  font-family: var(--mono); font-size: var(--t-petit);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  font-weight: var(--gr-appuye); color: var(--gamme-encre, var(--texte));
}
.pile__compte {
  margin-left: auto; font-variant-numeric: tabular-nums; color: var(--texte-mention);
}

/* ---------------------------------------------------------- pastille --
   Le rattachement d'un article, lisible avant son titre. */
.pastille {
  display: inline-block; padding: .18em .7em;
  border: 1px solid var(--ligne-appuyee); border-radius: var(--r-pilule);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-accent); text-decoration: none;
}
a.pastille:hover { background: var(--action); color: var(--papier); border-color: var(--action); }
/* Dans une liste, la rubrique se remplit et le dossier reste en contour :
   deux rangs, deux poids, la même couleur.
   ⚠️ Le sélecteur porte [data-gamme] : sans lui il perdait, à égalité de
   spécificité, contre la règle générale placée plus bas, et la pastille
   s'écrivait en bleu SUR du bleu (Romain, 13/09). */
[data-gamme] .entree .pastille,
.entree[data-gamme] .pastille {
  background: var(--gamme-encre); color: var(--papier);
  border-color: var(--gamme-encre);
}
[data-gamme] .entree .pastille--dossier,
.entree[data-gamme] .pastille--dossier {
  background: transparent; color: var(--gamme-encre);
  border-color: color-mix(in srgb, var(--gamme-encre) 55%, transparent);
}
/* Le dossier d'un article se voyait à peine en gris pointillé : il prend la
   couleur de sa rubrique, le bleu européen pour la réglementation
   (Romain, 13/09). */
.pastille--dossier {
  color: var(--gamme-encre, var(--texte-accent));
  border-color: color-mix(in srgb, var(--gamme-encre, var(--action)) 45%, transparent);
  border-style: solid;
}
/* La ligne d'identité d'une carte : pastilles et date, alignées et espacées.
   Sans cette règle les pastilles collaient à la date et la ligne se cassait
   au milieu d'un mot. */
.entree__meta { align-items: center; gap: var(--e-2) var(--e-3); }
.entree__meta time { white-space: nowrap; }

/* -------------------------------------------------------------- fil --
   Où l'on est, et comment remonter. En haut de l'article, pas en bas :
   un retour en pied de page n'est pas une navigation, c'est une sortie. */
.fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-6);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
}
.fil a { color: var(--texte-accent); text-decoration: none; }
.fil a:hover { text-decoration: underline; text-underline-offset: .35em; }
.fil__sep { color: var(--texte-mention); }
.fil__ici { color: var(--texte-mention); }


/* ------------------------------------------------------- arborescence --
   La colonne de gauche du blog, identique sur l'index, une catégorie et un
   article. Trois rangs, un compte à droite : on voit d'un coup ce que le
   blog contient et où l'on se trouve dedans. */
.arbre { display: grid; gap: var(--e-4); }
.arbre .etiquette { margin: 0; }
/* ⚖️ Romain préfère la version en boutons : « on voyait mieux où on était »
   (13/09). Chaque rang est donc une pilule, la page courante étant pleine.
   La hiérarchie tient au décalage et au filet, pas à la taille. */
.arbre__liste { display: grid; gap: var(--e-2); justify-items: start; }
.arbre__lien {
  display: inline-flex; align-items: baseline; gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--ligne-appuyee); border-radius: var(--r-pilule);
  font-family: var(--texte-police); font-size: var(--t-petit);
  color: var(--texte-doux); text-decoration: none;
  transition: background var(--d-court) var(--courbe), color var(--d-court) var(--courbe);
}
.arbre__lien:not([aria-current="page"]):hover {
  color: var(--gamme-encre, var(--texte-accent));
  border-color: var(--gamme-encre, var(--action));
}
.arbre__lien[aria-current="page"] {
  background: var(--gamme-encre, var(--action));
  border-color: var(--gamme-encre, var(--action));
  color: var(--papier); font-weight: var(--gr-moyen);
}
.arbre__lien[aria-current="page"] .arbre__compte { color: rgb(255 255 255 / .72); }
.arbre__compte {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-etiquette);
  color: var(--texte-mention); font-variant-numeric: tabular-nums;
}
/* Le rang des dossiers est décalé, avec un filet vertical : la hiérarchie se
   voit sans avoir à lire les intitulés. */
/* Le dossier est décalé vers la droite : il dépend de sa rubrique et doit se
   lire comme tel. Le filet vertical prend la couleur de la rubrique. */
.arbre__liste--dossiers {
  margin: var(--e-2) 0 var(--e-3) var(--e-5);
  padding-left: var(--e-4);
  border-left: 2px solid color-mix(in srgb, var(--gamme, var(--encre)) 40%, transparent);
}
/* Le dossier porte la couleur de sa rubrique dès le repos, pas seulement au
   survol : c'est ce qui fait voir d'un coup « Réglementation, et dedans
   PPWR » (Romain, 13/09). */
.arbre__lien--dossier {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  padding: var(--e-1) var(--e-3);
  color: var(--gamme-encre, var(--texte-doux));
  border-color: color-mix(in srgb, var(--gamme-encre, var(--encre)) 45%, transparent);
}
.arbre__lien--dossier .arbre__compte { color: inherit; opacity: .7; }

/* La signature de l'article vit sous l'arborescence, séparée d'elle. */
.article__signature {
  margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: 1px solid var(--ligne); display: grid; gap: var(--e-1);
}


/* --------------------------------------------------------- article --
   ⚖️ Romain, 13/09 : « tu as des trucs énormes ». Un titre d'article court
   sur cinq lignes en corps d'affichage écrase tout ce qui suit, et le vide
   entre la tête et le texte fait croire à un bloc manquant. Le titre passe
   donc au corps de section, borné en largeur, et la tête se resserre. */
.tete-page--article .titre-1 {
  font-size: var(--t-h2); line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre); max-width: 26ch;
}
.tete-page--article { padding-bottom: var(--e-7); }
.tete-page--article + .bloc { padding-top: var(--e-8); }

/* Une image d'article respire, mais ne prend pas un écran entier. */
.article__corps img {
  max-height: 62vh; width: 100%; object-fit: cover; display: block;
}

/* Un chiffre ou une échéance mis en avant : l'encadré vaut mieux qu'un
   paragraphe de plus. Le liseré prend la couleur de la rubrique — bleu
   européen sur un article réglementaire. */
.article__corps h3 {
  font-size: var(--t-h4); margin-top: var(--e-6);
  padding-left: var(--e-4); border-left: 2px solid var(--gamme, var(--action));
  color: var(--texte);
}
.article__corps h4 {
  font-family: var(--texte-police); font-size: var(--t-lead);
  font-weight: var(--gr-appuye); letter-spacing: 0; color: var(--texte);
  margin-top: var(--e-5);
}
.article__corps h2 { font-size: var(--t-h3); }
.article__corps h2::before { background: var(--gamme, var(--action)); }
.article__corps h2, .article__corps h3 { color: var(--gamme-encre, var(--texte-accent)); }
.article__corps blockquote { border-left-color: var(--gamme, var(--action)); }
.article__corps strong, .article__corps b {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--gamme, var(--action)) 22%, transparent) 62%);
}


/* La liste du blog remonte sous son titre : la tête sobre laissait un vide
   qui faisait croire à un bloc manquant (Romain, 13/09). */
.tete-page--sobre + .bloc { padding-top: var(--e-8); }


/* ------------------------------------------ tout suit la rubrique --
   ⚖️ Romain, 13/09 : « la réglementation, la couleur, c'est bleu, donc pas
   de survol sur les liens en vert, tout en bleu ». Une page qui déclare une
   gamme — un produit, la marque, la réglementation — ne laisse plus passer
   le vert par défaut nulle part : liens, survols, flèches, filets et pastilles
   prennent sa couleur. Une seule teinte par page, sans exception. */
[data-gamme] .lecture a,
[data-gamme] .entree__titre a:hover,
[data-gamme] .pastille,
[data-gamme] .questions .fleche { color: var(--gamme-encre); }
[data-gamme] a.pastille:hover {
  background: var(--gamme-encre); color: var(--papier); border-color: var(--gamme-encre);
}
[data-gamme] .cta--ligne { border-color: var(--gamme-encre); }
[data-gamme] .haut:hover { background: var(--gamme-encre); border-color: var(--gamme-encre); }
/* ⚠️ Le survol ne s'applique PAS à la pilule courante : elle est déjà pleine,
   lui repeindre le texte en couleur revenait à écrire bleu sur bleu et le
   libellé disparaissait (Romain, 13/09). */
[data-gamme] .arbre__lien:not([aria-current="page"]):hover { color: var(--gamme-encre); }
[data-gamme] .arbre__lien[aria-current="page"]:hover {
  color: var(--papier);
  background: color-mix(in srgb, var(--gamme-encre) 86%, black);
}


/* ------------------------------------------------ montage de l'article --
   ⚖️ Romain, 13/09 : « les textes sont super gros, je veux des cadres, des
   fonds, des choses ramassées ». Le corps redescend au texte courant, les
   niveaux se resserrent, et les énumérations — qui font l'essentiel d'un
   article réglementaire — deviennent des blocs posés sur un fond teinté de
   la rubrique plutôt que des listes à perte de vue. */
.article__corps { font-size: var(--t-corps); gap: var(--e-4); max-width: 62ch; }

/* Le filet plein largeur suffit à ouvrir une section : en capitales mono
   par-dessus, le titre s'étirait sur deux lignes pour rien. */
.article__corps h2 {
  font-size: var(--t-h3); margin-top: var(--e-8); padding-top: var(--e-4);
  font-family: var(--titre); letter-spacing: var(--ls-titre);
  font-weight: var(--gr-appuye); text-transform: none;
}
.article__corps h2::before { width: 100%; }
.article__corps h3 {
  font-size: var(--t-h4); margin-top: var(--e-6);
  font-family: var(--titre); letter-spacing: var(--ls-corps);
  text-transform: none; border-left: 0; padding-left: 0;
}
/* Un titre ne se coupe jamais au milieu d'une locution. */
.article__corps h2, .article__corps h3, .article__corps h4 { text-wrap: balance; }

/* L'énumération devient un encadré : c'est le bloc que l'œil retient. */
.article__corps ul, .article__corps ol {
  background: color-mix(in srgb, var(--gamme, var(--action)) 7%, transparent);
  border-left: 3px solid var(--gamme, var(--action));
  padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6);
  gap: var(--e-2);
}
.article__corps ul li:not(:has(.fleche))::before { left: 0; top: .58em; }
.article__corps li { font-size: var(--t-petit); }

/* Deux paragraphes se suivent de près : un article n'est pas une affiche. */
.article__corps p { line-height: var(--lh-corps); }
.article__corps p + p { margin-top: calc(var(--e-2) * -1); }

/* ------------------------------------------------------------ étapes --
   Une suite de jalons. La numérotation dit ici quelque chose de vrai —
   l'ordre EST l'information — et le trait qui relie les pastilles montre la
   progression sans qu'on ait à lire les dates. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-7); counter-reset: etape; }
.etape {
  position: relative; padding-left: var(--e-9);
  counter-increment: etape;
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--gamme-encre, var(--action)); border-radius: 50%;
  font-family: var(--mono); font-size: var(--t-mention);
  color: var(--gamme-encre, var(--action)); background: var(--fond);
}
/* Le trait de liaison court derrière les pastilles, sauf après la dernière. */
.etape:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 44px; bottom: calc(var(--e-7) * -1);
  width: 1px; background: color-mix(in srgb, var(--gamme-encre, var(--encre)) 30%, transparent);
}
.etape h3 { font-size: var(--t-h4); margin: var(--e-2) 0 var(--e-2); }
.etape p { color: var(--texte-doux); font-size: var(--t-petit); margin: 0; max-width: 66ch; }
@media (max-width: 600px) { .etape { padding-left: var(--e-8); } }

/* ---------------------------------------------------------- balance --
   Ce qui sort d'un côté, ce qui reste de l'autre. Deux colonnes de poids
   égal, distinguées par un filet de tête : le lecteur voit le tri avant de
   lire les listes. Le rouge est proscrit — la charte n'en a pas — donc la
   perte se marque par l'atténuation, pas par l'alarme. */
.balance { display: grid; gap: var(--e-7); }
@media (min-width: 860px) { .balance { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.balance__cote { padding-top: var(--e-4); border-top: 3px solid; }
.balance__cote--sort { border-top-color: color-mix(in srgb, var(--texte) 26%, transparent); }
.balance__cote--reste { border-top-color: var(--gamme, var(--action)); }
.balance__cote h3 {
  font-size: var(--t-h4); line-height: var(--lh-sous);
  letter-spacing: var(--ls-corps); margin: 0 0 var(--e-5);
}
.balance__cote--sort h3 { color: var(--texte-mention); }
.balance__cote p { font-size: var(--t-petit); color: var(--texte-doux); margin: 0 0 var(--e-4); }
.balance__cote .puces li { font-size: var(--t-petit); }
.bloc--sombre .balance__cote--sort h3 { color: var(--texte-inverse-doux); }

/* ----------------------------------------------------------- barème --
   Une valeur en face de ce qu'elle mesure. Un tableau serait plus lourd
   qu'utile pour trois à cinq lignes. */
.bareme { margin: var(--e-5) 0 0; display: grid; gap: 0; }
.bareme__ligne {
  display: grid; gap: var(--e-2) var(--e-5); align-items: baseline;
  padding: var(--e-3) 0; border-top: 1px solid var(--ligne);
}
@media (min-width: 700px) { .bareme__ligne { grid-template-columns: 1fr auto; } }
.bareme dt { margin: 0; font-size: var(--t-corps); color: var(--texte-doux); }
/* ⚖️ Romain, 13/09 : « cette mention a la même taille que le sous-titre, il
   faudrait qu'elle soit plus petite, à répercuter partout. » La valeur d'un
   barème n'est pas un titre : elle garde sa graisse et sa couleur de rubrique
   pour rester la valeur, mais elle descend d'un cran sous le sous-titre. */
.bareme dd {
  margin: 0; font-family: var(--titre); font-size: var(--t-corps);
  line-height: var(--lh-sous);
  letter-spacing: var(--ls-corps); font-weight: var(--gr-appuye);
  color: var(--gamme-encre, var(--texte-accent)); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 699px) { .bareme dd { white-space: normal; } }
/* ⚠️ Une valeur qui est une phrase n'est pas un chiffre : composée en grand
   elle débordait de la colonne et écrasait ce qu'elle mesure. */
.bareme dd.bareme__phrase {
  font-family: var(--texte-police); font-size: var(--t-petit);
  font-weight: var(--gr-normal); white-space: normal;
  max-width: 34ch; text-align: right;
}
@media (max-width: 699px) { .bareme dd.bareme__phrase { text-align: left; } }

/* ---------------------------------------------------------- sources --
   Les textes officiels, en pilules : ce sont des sorties, elles se voient. */
.sources { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
.sources a {
  display: inline-block; padding: var(--e-2) var(--e-4);
  border: 1px solid var(--gamme-encre, var(--ligne-appuyee)); border-radius: var(--r-pilule);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--gamme-encre, var(--texte-accent)); text-decoration: none;
}
.sources a:hover { background: var(--gamme-encre, var(--action)); color: var(--papier); }

/* Une étape sans titre n'a pas à réserver la place d'un titre. */
.etape > p:first-child { margin-top: var(--e-2); }

/* ------------------------------------------------ vignette de section --
   ⚖️ Romain, 13/09 : « associer les images aux sujets abordés ». La colonne
   de marge est vide sur la plupart des sections ; elle accueille une image
   du sujet, sous l'étiquette. Le rythme de la page ne bouge pas, et chaque
   section gagne son visuel sans qu'on ajoute un bandeau de plus. */
.index__marge .vignette {
  display: block; margin: var(--e-5) 0 0; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: color-mix(in srgb, var(--gamme, var(--encre)) 12%, transparent);
}
.index__marge .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1079px) { .index__marge .vignette { aspect-ratio: 16 / 9; max-width: 420px; } }

/* Un bandeau qui porte une trame : la photo seule faisait décor, la trame en
   fait un motif de rubrique. */
.bandeau-large--trame { position: relative; }
.bandeau-large--trame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg,
      color-mix(in srgb, var(--gamme, var(--encre)) 42%, transparent) 0 2px,
      transparent 2px 13px),
    linear-gradient(90deg,
      color-mix(in srgb, var(--gamme, var(--encre)) 62%, transparent) 0%,
      transparent 58%);
}

/* -------------------------------------------------------------- scène --
   ⚖️ Romain, 13/09 : « pas un simple picto, quelque chose d'un peu plus
   travaillé, dans des tons bleus, qui illustre chaque sous-titre ». Les
   vignettes de marge sont retirées : une image minuscule dans une colonne
   étroite ne sert à rien, elle fait vignette des années 90.
   La scène ouvre la section, à une taille où on la lit. */
/* ⚖️ Romain, 13/09 : l'illustration REMPLACE la vignette photo, elle ne se
   pose pas au-dessus du titre — « ça fait perdre trop d'espace ». Elle vit
   donc dans la colonne de marge. Un dessin au trait tient à cette largeur là
   où une photo devenait un timbre. Et il porte sa légende : un schéma qu'on
   doit deviner ne sert à rien. */
.scene { margin: var(--e-5) 0 0; color: var(--gamme-encre, var(--action)); }
.scene .illustration { overflow: visible; }
.scene figcaption {
  margin-top: var(--e-3);
  font-family: var(--mono); font-size: var(--t-etiquette);
  line-height: 1.45; text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
}
.bloc--sombre .scene { color: var(--papier); }
.bloc--sombre .scene figcaption { color: var(--texte-inverse-doux); }
/* Sous 1080 px la marge repasse au-dessus du corps : la scène s'y borne. */
@media (max-width: 1079px) { .scene { max-width: 320px; } }

/* Trois photos plutôt qu'une seule étirée : à hauteur lisible, on les voit. */
.bandeau-photo--trois { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bandeau-photo--trois figure { aspect-ratio: 4 / 3; }
.bandeau-photo--trois img { width: 100%; height: 100%; object-fit: cover; }


/* ------------------------------------------------------- bouton, suite --
   ⚖️ Romain, 13/09 : « les boutons sont d'un bleu un peu trop foncé et très
   subtils, ils ne bougent pas trop, il n'y a que la flèche qui montre que
   c'est un bouton ». Le survol se voit maintenant en trois temps : le bouton
   se soulève, il porte une ombre à sa propre couleur, et la flèche part.
   La couleur de rubrique s'éclaircit au lieu de foncer — sur du bleu foncé,
   foncer encore ne se remarque pas. */
.cta {
  box-shadow: 0 0 0 0 transparent;
  transition: background var(--d-court) var(--courbe),
              border-color var(--d-court) var(--courbe),
              color var(--d-court) var(--courbe),
              box-shadow var(--d-court) var(--courbe),
              transform var(--d-court) var(--courbe);
}
.cta::after { font-size: 1.15em; }
[data-gamme] .cta:hover {
  background: color-mix(in srgb, var(--gamme-encre) 84%, white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--gamme-encre) 34%, transparent);
}
[data-gamme] .cta:active { transform: translateY(0); box-shadow: none; }
[data-gamme] .cta:hover::after { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .cta, [data-gamme] .cta:hover { transform: none; }
}

/* Le numéro d'une étape est un repère, pas une annotation : il se remplit,
   il grossit, et la pastille porte la couleur de la rubrique. */
.etape::before {
  width: 52px; height: 52px;
  background: var(--gamme-encre, var(--action)); border-color: transparent;
  color: var(--papier); font-size: var(--t-petit);
  font-weight: var(--gr-appuye); letter-spacing: 0;
}
.etape { padding-left: calc(var(--e-9) + var(--e-2)); }
.etape:not(:last-child)::after { left: 26px; top: 52px; }
.bloc--sombre .etape::before { background: var(--papier); color: var(--gamme-encre, var(--encre)); }

/* ------------------------------------------------------- vue de marge --
   Une vraie photo dans la colonne de marge, quand le sujet en appelle une
   plutôt qu'un schéma. Format portrait, à la largeur de la colonne. */
.vue-marge { margin: var(--e-5) 0 0; overflow: hidden; aspect-ratio: 3 / 4; }
.vue-marge img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1079px) { .vue-marge { max-width: 260px; aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------- profils --
   Quatre entrées « selon votre rôle ». Chacune est une porte : un picto, une
   question, une sortie. Elles font la même hauteur pour que le bouton tombe
   toujours au même endroit. */
.profils { display: grid; gap: 1px; background: var(--ligne); }
/* Cinq profils sur deux colonnes laissaient un trou : le dernier prend la
   ligne entière. Sans effet sur les grilles paires. */
.profils > .profil:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 780px) { .profils { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.profil {
  background: var(--fond); padding: var(--e-6) var(--e-5);
  display: grid; gap: var(--e-3); align-content: start;
}
.profil__icone {
  width: 42px; height: 42px; padding: 8px; border-radius: 50%;
  color: var(--gamme, var(--action));
  background: color-mix(in srgb, var(--gamme, var(--action)) 24%, var(--papier));
  margin-bottom: var(--e-2);
}
.profil h3 { font-size: var(--t-h4); margin: 0; }
.profil p { color: var(--texte-doux); font-size: var(--t-petit); margin: 0; }
.profil__action { margin-top: auto; padding-top: var(--e-4); }
.bloc--sombre .profils { background: var(--ligne-inverse); }
.bloc--sombre .profil { background: var(--gamme-sombre, var(--fond-sombre)); }

/* ---------------------------------------------------------- piliers --
   Six engagements, six visages du vivant. Une page d'engagement se regarde
   autant qu'elle se lit : chaque pilier porte sa photo, et le picto se pose
   dessus pour dire de quel enjeu il s'agit sans attendre le titre. */
.piliers { display: grid; gap: var(--e-7) var(--e-6); }
@media (min-width: 700px)  { .piliers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .piliers { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pilier { display: grid; gap: var(--e-3); align-content: start; }
.pilier__vue { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.pilier__vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--d-long) var(--courbe);
}
.pilier:hover .pilier__vue img { transform: scale(1.04); }
.pilier__icone {
  position: absolute; left: 0; bottom: 0;
  width: 62px; height: 62px; padding: 15px;
  color: var(--papier); background: var(--gamme, var(--action));
}
.pilier h3 { font-size: var(--t-h4); margin: var(--e-2) 0 0; }
.pilier p { font-size: var(--t-petit); line-height: 1.55; color: var(--texte-doux); margin: 0; }

/* Le sceau dans la tête : il signe l'engagement, il ne l'illustre pas. */
.gdv-sceau { margin: 0; width: clamp(110px, 15vw, 158px); color: var(--gamme-sur-corps, var(--texte)); }
.gdv-sceau svg { width: 100%; height: auto; display: block; }


/* Une image qui doit se voir ENTIÈRE — un graphique, un logotype — se
   contient au lieu de se recadrer. En « cover », le camembert de composition
   sortait de son cadre (Romain, 13/09). */
.vue-marge--entiere { aspect-ratio: auto; background: none; }
.vue-marge--entiere img { height: auto; object-fit: contain; }

/* ⚠️ La flèche d'un bouton ne part jamais seule à la ligne : elle est collée
   au dernier mot par deux espaces insécables, sans marge. Avec une marge, le
   navigateur trouvait là une occasion de couper (Romain, 13/09). */
.cta::after { content: "\00a0\00a0→"; margin-left: 0; }

/* Sur un aplat de rubrique, la scène s'écrit en blanc. */
.bloc--sombre .scene, .bloc--sombre .scene figcaption { color: var(--papier); }
.bloc--sombre .famille__icone {
  color: var(--papier); border-color: color-mix(in srgb, var(--papier) 40%, transparent);
}
.bloc--sombre .famille__nom { color: var(--papier); }
.bloc--sombre .etape h3 { color: var(--texte-inverse); }
.bloc--sombre .etape p { color: var(--texte-inverse-doux); }
.bloc--sombre .etape:not(:last-child)::after {
  background: color-mix(in srgb, var(--papier) 34%, transparent);
}

/* -------------------------------------------------- bandeau du vivant --
   ⚖️ Romain, 13/09 : « on est sur quelque chose de très immersif, des
   bandeaux d'images en parallaxe illustrant la nature, avec le logo Gardiens
   du Vivant apposé sur chaque visuel. »
   Pleine largeur, haut, l'image dérive au défilement, le sceau signe. Ce
   n'est pas une illustration de section : c'est une respiration entre deux
   mouvements du manifeste. */
.vivant {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(340px, 62vh, 620px);
  display: grid; place-items: center;
}
.vivant__fond { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.vivant__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vivant::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(6 20 16 / .34) 0%, rgb(6 20 16 / .12) 42%, rgb(6 20 16 / .58) 100%);
}
.vivant__sceau { width: clamp(96px, 11vw, 148px); color: var(--papier); }
.vivant__sceau svg { width: 100%; height: auto; display: block; }
.vivant__mot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-8) var(--gouttiere) var(--e-5);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--papier); text-align: center;
}

/* ------------------------------------------------------- mouvement --
   Un mouvement du manifeste : une affirmation, puis sa démonstration. Le
   texte est plus large et plus aéré qu'ailleurs sur le site — on lit une
   conviction, pas une fiche produit. */
.mouvement .titre-2 { max-width: 20ch; }
.mouvement .lecture { max-width: 60ch; font-size: var(--t-lead); gap: var(--e-6); }
.mouvement .lecture p { color: var(--texte); }

/* Deux volets qui s'opposent — la pierre et l'arbre. */
.opposition { display: grid; gap: var(--e-6); margin-top: var(--souffle-court); }
@media (min-width: 800px) { .opposition { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.opposition__volet { padding-top: var(--e-4); border-top: 3px solid var(--gamme, var(--action)); }
.opposition__volet:last-child { border-top-color: color-mix(in srgb, var(--texte) 26%, transparent); }
.opposition__volet h3 { font-size: var(--t-h3); margin: 0 0 var(--e-4); }
.opposition__volet p { color: var(--texte-doux); margin: 0; }

/* Les quatre limites de la fibre : des constats, pas des arguments. */
.limites { display: grid; gap: 1px; background: var(--ligne); margin-top: var(--souffle-court); }
@media (min-width: 760px) { .limites { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Quatre colonnes seulement s'il y a de quoi les remplir : la page pilier
   n'expose que deux règles de lecture, et à quatre colonnes elles se
   retrouvaient étranglées à côté d'une cellule vide. */
@media (min-width: 1180px) { .limites:has(.limite:nth-child(3)) { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.limite { background: var(--fond); padding: var(--e-6) var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.limite h3 { font-size: var(--t-h4); margin: 0; }
.limite p { font-size: var(--t-petit); color: var(--texte-doux); margin: 0; }


/* ================================================== tête immersive ==
   ⚖️ Romain, 13/09 : « on rentre dans la nature, dans le vivant, dans la
   forêt ; il faut donner envie d'adhérer. » Pas de panneau ni de colonne :
   l'image tient toute la page, le texte se pose dessus. C'est la seule tête
   du site construite ainsi, et c'est voulu — cette page n'est pas une fiche. */
.immersif {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 84px);
  display: grid; align-items: end;
}
.immersif__fond { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.immersif__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.immersif__voile {
  position: absolute; inset: 0; z-index: -1;
  /* ⚖️ Romain, 14/09 : « fonce l'image du hero, le titre se voit mais on est
     limite, et le texte en dessous est difficile à lire. » Le palier du
     milieu était à 18 % : c'est exactement la hauteur du chapô. Il passe à
     46 %, et le voile latéral s'étend pour couvrir toute la colonne de
     texte au lieu de s'arrêter à 62 %. */
  background:
    linear-gradient(180deg, rgb(5 26 20 / .62) 0%, rgb(5 26 20 / .46) 38%, rgb(5 26 20 / .92) 100%),
    linear-gradient(90deg, rgb(5 26 20 / .74) 0%, rgb(5 26 20 / .34) 56%, transparent 84%);
}
.immersif__mot {
  padding-block: var(--souffle-court) var(--souffle);
  display: grid; gap: var(--e-6); justify-items: start;
  color: var(--texte-inverse);
}
.immersif__mot .etiquette { color: var(--papier); margin: 0; }
.immersif__mot .etiquette::before { border-color: var(--papier); }
.immersif__titre {
  font-size: var(--t-display); line-height: var(--lh-serre);
  letter-spacing: var(--ls-display); font-weight: var(--gr-appuye);
  max-width: 17ch; margin: 0; text-wrap: balance;
}
.immersif__chapeau {
  font-family: var(--texte-police); font-size: var(--t-lead);
  line-height: var(--lh-corps); color: rgb(255 255 255 / .88);
  max-width: 52ch; margin: 0;
}
.immersif__legende {
  position: absolute; right: 0; bottom: 0; margin: 0;
  padding: var(--e-5) var(--gouttiere);
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: rgb(255 255 255 / .72);
}
.immersif .lecture p { color: rgb(255 255 255 / .9); }
.immersif .gdv-sceau { color: var(--papier); }

/* ------------------------------------------------ titre en deux temps --
   ⚠️ Romain, 13/09 : « arrête les débuts de phrase avec juste un mot à la
   ligne ». Un titre de manifeste n'est pas une phrase qui se replie au
   hasard : c'est une affirmation, puis sa contrepartie. Le portage écrit
   donc explicitement les deux lignes, et la seconde porte la charge. */
.duo-titre { display: grid; gap: var(--e-2); margin: 0; max-width: 22ch; }
.duo-titre__un {
  font-family: var(--titre); font-size: var(--t-h3); line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre); font-weight: var(--gr-moyen);
  color: var(--texte-mention);
}
.duo-titre__deux {
  font-family: var(--titre); font-size: var(--t-h2); line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre); font-weight: var(--gr-appuye);
  color: var(--gamme-encre, var(--texte));
}
.bloc--sombre .duo-titre__un { color: rgb(255 255 255 / .62); }
.bloc--sombre .duo-titre__deux { color: var(--papier); }


/* ============================================ jonction bleu → vert ==
   ⚖️ Romain, 13/09 : sur la page mono-matériau, DEUX couleurs cohabitent —
   le bleu réglementaire et le vert Minerya — « parce que c'est ce qui fait
   la jonction entre la réglementation et Minerya, qui arrive en solution ».
   Chaque section déclare donc SA rubrique par data-gamme, et les deux
   charnières du récit portent le dégradé de l'une vers l'autre. */
/* ⚖️ Romain, 13/09 : « le dégradé est plus sympa, mais on est quand même très
   présents sur le bleu, j'aimerais que le vert prenne plus de place. » Le
   bleu ne tient plus qu'une amorce, la bascule commence tôt et le vert
   occupe le dernier tiers en aplat. */
[data-degrade="bleu-vert"] .hero-gamme__voile {
  background: linear-gradient(112deg, var(--bleu-eu) 0%, var(--bleu-eu) 8%, var(--vert) 70%, var(--vert) 100%);
}
/* ⚖️ Romain, 14/09 : « je veux le même ratio que sur les autres héros. »
   La colonne reprend donc 1.55fr / 1fr comme partout ailleurs — plus aucune
   exception de largeur pour cette page. */
/* ⚖️ Romain, 13/09 : « ton dégradé est très shiny, fais un dégradé plus large
   avec le vert un peu plus présent, le bleu vient tout écraser. » L'angle
   s'aplatit, la bascule s'étale sur toute la largeur au lieu de se jouer sur
   un quart, et le vert finit en aplat. */
.bloc--sombre[data-degrade="bleu-vert"] {
  /* ⚠️ 15/09 : #0A6B55 n'est pas le vert Minerya. Le vert Minerya est
     #008C76 (color_35 du relevé). Le dégradé prenait donc un vert inventé. */
  background: linear-gradient(100deg, var(--bleu-eu) 0%, var(--vert) 66%, var(--vert) 100%);
}

/* Le fond pierre de la section « ce qu'est Minerya » : la matière parle
   d'elle-même, pas de la loi. */
[data-gamme="minerya"].bloc--doux { background: var(--fond-doux); }

/* ── La frise du calendrier ────────────────────────────────────────────────
   L'actif unique de la page pilier : 23 échéances avec, pour chacune, la
   mention ferme ou conditionnelle. Cette distinction est la seule
   information que le lecteur doit pouvoir lire sans lire la ligne, donc
   elle est portée par la couleur du filet autant que par le mot. */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ligne); }
.frise__ligne {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--e-4) var(--e-6);
  padding: var(--e-6) 0 var(--e-6) var(--e-5);
  background: var(--papier);
  border-left: 3px solid var(--gamme-encre, var(--action));
}
.frise__ligne[data-statut="conditionnelle"] {
  border-left-style: dashed;
  border-left-color: color-mix(in srgb, var(--gamme-encre, var(--action)) 45%, var(--papier));
}
.frise__quand { margin: 0; display: grid; gap: var(--e-2); align-content: start; }
.frise__date {
  font-family: var(--titre); font-size: var(--t-h4); font-weight: var(--gr-appuye);
  line-height: var(--lh-sous); color: var(--texte);
}
.frise__statut {
  font-family: var(--mono); font-size: var(--t-mention);
  letter-spacing: var(--ls-etiquette); text-transform: uppercase;
  color: var(--gamme-encre, var(--action));
}
.frise__ligne[data-statut="conditionnelle"] .frise__statut { color: var(--texte-mention); }
.frise__note { font-size: var(--t-mention); color: var(--texte-mention); font-style: italic; }
.frise__fait { display: grid; gap: var(--e-3); }
.frise__quoi { margin: 0; color: var(--texte-doux); }
.frise__qui { margin: 0; font-size: var(--t-petit); color: var(--texte-mention); }
.frise__texte { font-family: var(--mono); }
@media (max-width: 720px) {
  .frise__ligne { grid-template-columns: 1fr; }
}

/* ── Le plan de la page ────────────────────────────────────────────────────
   ⚖️ Romain, 13/09 : « ton sommaire est beaucoup trop long et illisible, je
   préférerais que ce soit regroupé dans des petits blocs, pour avoir une
   vision d'ensemble plutôt que des phrases à lire. » Huit tuiles courtes
   donc, pas huit phrases : le lecteur voit l'étendue d'un coup d'œil et
   choisit son entrée. */
.plan-page {
  list-style: none; margin: var(--souffle-court) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--ligne);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
/* Les tuiles d'une même rangée font la même hauteur, sinon le fond de grille
   apparaît sous les libellés courts. */
.plan-page > li { display: grid; }
.plan-page a {
  display: grid; gap: var(--e-3); align-content: start; height: 100%;
  padding: var(--e-5) var(--e-5) var(--e-6);
  background: var(--fond); text-decoration: none;
  transition: background var(--duree-2) var(--sortie), color var(--duree-2) var(--sortie);
}
.plan-page__n {
  font-family: var(--mono); font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette); color: var(--texte-mention);
}
.plan-page__quoi {
  font-family: var(--titre); font-size: var(--t-h4); line-height: var(--lh-sous);
  font-weight: var(--gr-appuye); color: var(--texte);
}
.plan-page a:hover { background: var(--gamme-encre, var(--action)); }
.plan-page a:hover .plan-page__n,
.plan-page a:hover .plan-page__quoi { color: var(--papier); }

/* ── Les cinq verdicts ─────────────────────────────────────────────────────
   ⚖️ Romain, 13/09 : « mets ça dans une typographie un peu plus épaisse et
   chaque terme à la ligne ». Cinq valeurs de droit alignées verticalement :
   c'est une nomenclature, pas une phrase, et ça se lit comme telle. */
.verdicts { margin: var(--souffle-court) 0 0; }
.verdicts__quoi { margin: 0 0 var(--e-5); color: var(--texte-doux); max-width: var(--rail-texte); }
.verdicts__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.verdicts__liste li {
  display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: var(--e-4);
  padding: var(--e-4) 0; border-top: 1px solid var(--ligne);
}
.verdicts__liste li:last-child { border-bottom: 1px solid var(--ligne); }
.verdicts__n { font-family: var(--mono); font-size: var(--t-etiquette); color: var(--texte-mention); }
.verdicts__mot {
  font-family: var(--titre); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.05; letter-spacing: -.02em; font-weight: var(--gr-appuye);
  text-transform: uppercase; color: var(--gamme-encre, var(--texte));
}

/* ── L'écart de barème ─────────────────────────────────────────────────────
   ⚖️ Romain, 13/09 : « je ne comprends pas bien le rectangle bleu, s'agit-il
   d'une échelle ? » C'en est une maintenant, pour de bon : deux barres à
   l'échelle des deux tarifs, et le rapport se lit sans qu'on l'annonce. */
.echelle { margin: var(--souffle-court) 0 0; display: grid; gap: var(--e-5); max-width: 46rem; }
.echelle__ligne { display: grid; gap: var(--e-3); }
.echelle__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); }
.echelle__quoi { font-weight: var(--gr-moyen); color: var(--texte); }
.echelle__valeur { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.echelle__barre { height: 14px; background: color-mix(in srgb, var(--gamme-encre, var(--action)) 12%, transparent); }
.echelle__part { height: 100%; width: var(--part); background: var(--gamme-encre, var(--action)); }
.echelle__ligne--basse .echelle__part { background: color-mix(in srgb, var(--gamme-encre, var(--action)) 42%, var(--papier)); }
.echelle__note { margin: 0; font-size: var(--t-petit); color: var(--texte-mention); }
.echelle__note b { font-family: var(--titre); font-size: var(--t-h4); color: var(--gamme-encre, var(--texte)); }

/* Les amorces des questions ouvertes prennent la couleur de la rubrique :
   six puces de texte dense avaient besoin d'un point d'entrée (Romain). */
[data-gamme] .puces--ouvert li b { color: var(--gamme-encre); }

/* Un picto dans la colonne de marge, là où la section n'a pas d'illustration.
   ⚖️ Romain, 13/09 : « on peut s'abstenir de certains visuels, mais j'aimerais
   au moins garder les pictos dans la colonne de gauche. » */
.picto-marge {
  margin-top: var(--e-5);
  width: clamp(40px, 3.4vw, 52px); height: clamp(40px, 3.4vw, 52px);
  color: var(--gamme-encre, var(--action));
}
.picto-marge .icone { width: 100%; height: 100%; stroke-width: 1.5; }
.bloc--sombre .picto-marge { color: var(--sur-sombre, var(--papier)); }

/* Un titre que la rubrique ne colore pas : réservé aux sections dont le
   contenu porte déjà plusieurs couleurs et où une teinte de plus ferait
   sapin de Noël (Romain, 13/09). */
[data-gamme] .bloc:not(.bloc--sombre) .titre--neutre,
.titre--neutre { color: var(--texte); }

/* ── La masse du vivant contre celle du socle ──────────────────────────────
   Des arbres debout sur un trait fin, un vide, puis la roche : c'est
   l'écartement qui fait respirer les deux et le trait fin qui dit que la
   peau du vivant n'est presque rien (Romain, 13/09).
   La figure est bornée en largeur : la photo de calcaire fait 1300 px, elle
   reste nette tant qu'on ne l'étire pas au-delà de la moitié de ça. */
.masse { margin: var(--souffle-court) 0 0; }
/* ⚖️ Romain, 14/09 : les noms et les parts se lisent EN FACE de ce qu'ils
   nomment, et les deux nombres tombent l'un sous l'autre. C'est le seul
   montage où l'on sent que 0,00000002 et 99,99999998 décrivent la même
   échelle. */
.masse__grille {
  display: grid; gap: var(--e-4) var(--e-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 760px) {
  /* ⚖️ Romain, 14/09 : « je ne veux pas tout sur le côté, je voudrais que le
     schéma prenne plus de largeur ; la ligne sous 99 peut tenir sur deux
     lignes pour réduire la largeur de cette colonne. » Le visuel prend donc
     tout ce qui reste, les parts se contentent de 19 rem. */
  .masse__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    /* Deux rangées partagées : le visuel et sa légende occupent la même, donc
       le filet pointillé tombe sur la frontière entre le trait d'arbres et le
       bloc de roche, sans réglage à la main. */
    grid-template-rows: auto auto;
    align-items: start;
  }
}
/* La colonne des parts : deux nombres alignés, un filet pointillé entre eux,
   et le rapport juste dessous — le tout tient dans un écran avec l'image.
   ⚖️ Romain, 14/09 : « qu'on puisse clairement comparer », « que le 5
   milliards s'affiche sur le même écran ». */
/* Le filet de séparation de la légende : il ouvre la seconde rangée, celle du
   socle, donc il s'aligne sur le haut du bloc de roche. */
.masse__part--socle {
  padding-top: var(--e-4);
  border-top: 1px dashed color-mix(in srgb, var(--texte-mention) 60%, transparent);
}
/* La note tient sur une ligne dès que la colonne le permet. */


/* Le rapport prend l'air sous une figure devenue haute. */
/* ⚖️ Romain, 14/09 : « les 5 milliards apparaissent au moment où je fais
   disparaître le haut du schéma. » Collé au schéma, il entre dans l'écran
   pendant qu'on le regarde encore. */
.masse__rapport {
  margin: var(--e-4) 0 0; padding-top: var(--e-4);
  border-top: 1px solid var(--ligne);
}
.masse__phrase { max-width: none; }
.masse__etiquette b { font-weight: var(--gr-appuye); }
.masse__etiquette {
  margin: 0 0 var(--e-4);
  font-family: var(--mono); font-size: var(--t-mention);
  letter-spacing: var(--ls-etiquette); text-transform: uppercase;
  color: var(--gamme-encre, var(--action));
}
.bloc--sombre .masse__etiquette { color: var(--sur-sombre, var(--papier)); }
.masse__peau { display: grid; gap: 0; align-self: end; }
.masse__arbres {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-3); color: var(--gamme, var(--action));
}
.masse__arbres :global(.icone) { width: 13px; height: 13px; stroke-width: 1.9; display: block; margin-bottom: -2.5px; }
.masse__trait { height: 2px; background: var(--gamme, var(--action)); }
/* Le vide qui sépare la peau du socle. Sans lui, les deux se lisent comme
   une seule masse. */
.masse__socle {
  /* ⚖️ Romain, 14/09 : « je suis obligée de faire sortir le schéma par le
     haut pour que le 5 milliards s'affiche. » Le carré prenait toute la
     largeur de la colonne, soit près de 900 px de haut. Le bloc est plafonné :
     la figure entière et son rapport tiennent dans un écran. */
  position: relative; overflow: hidden; margin-top: 0;
  aspect-ratio: 16 / 11; max-height: clamp(240px, 38vh, 400px); display: grid;
}
.masse__socle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }


.masse__quoi {
  margin: 0; font-family: var(--titre); font-size: var(--t-h4);
  font-weight: var(--gr-appuye); color: var(--papier);
}
/* La part du socle se lit au même format que celle de la peau : c'est la
   comparaison qui compte, pas chaque nombre pris seul. */
.masse__quoi b { font-family: var(--mono); font-size: var(--t-mention); font-weight: var(--gr-normal); letter-spacing: var(--ls-etiquette); }
/* La note n'est plus posée sur la photo depuis que les libellés sont passés
   à droite : elle reprend l'encre douce de la page, sinon elle est blanche
   sur blanc. */
.masse__note { margin: 0; font-size: var(--t-petit); color: var(--texte-doux); }
.masse__rapport {
  margin-top: var(--e-6);
  display: grid; gap: var(--e-2); align-items: baseline;
}
/* Le rapport ferme la démonstration : c'est le plus gros nombre de la page,
   et il se compte au défilement. */
.masse__n {
  display: block;
  font-family: var(--titre); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, .9rem + 2.1vw, 2.4rem); line-height: 1;
  font-weight: var(--gr-appuye); letter-spacing: -.04em;
  color: var(--gamme-encre, var(--texte));
}
.masse__rapport { margin-top: var(--souffle-court); }
.bloc--sombre .masse__n { color: var(--sur-sombre, var(--papier)); }
.masse__phrase { color: var(--texte-doux); }

/* ── Une section posée sur une photo ───────────────────────────────────────
   ⚖️ Romain, 13/09 : « une image en arrière-plan avec un vert à 80 ou 90 %,
   on verrait sans voir l'image qu'il y a derrière. » La section garde toutes
   les règles typographiques de bloc--sombre ; seul l'aplat devient un voile,
   dont l'opacité se règle section par section avec --voile. */
.bloc--photo { position: relative; isolation: isolate; overflow: hidden; background: none; }
.bloc__fond { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.bloc__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloc--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gamme-sombre, var(--fond-sombre));
  opacity: var(--voile, .88);
}
[data-gamme] .bloc--sombre.bloc--photo { background: none; }
.bloc--photo .lecture p,
.bloc--photo .opposition__volet p,
.bloc--photo .chapeau,
.bloc--photo .pilier p { color: rgb(255 255 255 / .88); }
.bloc--photo .duo-titre__un { color: rgb(255 255 255 / .72); }

/* Un picto par limite : quatre constats se lisent d'un coup quand chacun a
   son signe (Romain, 13/09). */
.limite__icone {
  width: 30px; height: 30px; color: var(--gamme-encre, var(--action));
  margin-bottom: var(--e-2);
}
.limite__icone .icone { width: 100%; height: 100%; stroke-width: 1.6; }

/* ── L'exergue ─────────────────────────────────────────────────────────────
   Une phrase qui répond à une objection ne doit pas être la dernière ligne
   d'un paragraphe : elle en sort et prend un filet (Romain, 13/09). */
.exergue {
  margin: var(--souffle-court) 0 0; max-width: 34ch;
  padding-left: var(--e-5);
  border-left: 3px solid var(--gamme-encre, var(--action));
  font-family: var(--titre); font-size: var(--t-h3);
  line-height: var(--lh-sous); font-weight: var(--gr-moyen);
  color: var(--texte);
}
.exergue b { font-weight: var(--gr-appuye); color: var(--gamme-encre, var(--texte)); }

/* ── Le credo ──────────────────────────────────────────────────────────────
   ⚖️ Romain, 13/09 : « c'est le cœur de notre engagement, traite cette partie
   pour qu'on ait vraiment envie de la lire. » Une seule colonne centrée, le
   sceau en tête, et la question posée plus grand que tout le reste de la
   page. L'emphase ne fonctionne que parce qu'elle n'existe qu'ici. */
.credo { text-align: center; }
.credo__rail { display: grid; justify-items: center; gap: var(--e-5); max-width: 62rem; }
.credo__sceau { width: clamp(84px, 9vw, 116px); color: var(--papier); margin: 0; }
.credo__sceau svg { width: 100%; height: auto; display: block; }
.credo__titre { display: grid; gap: var(--e-2); margin: 0; max-width: 34ch; text-wrap: balance; }
.credo__un {
  font-family: var(--titre); font-size: var(--t-h3); line-height: var(--lh-sous);
  font-weight: var(--gr-moyen); color: var(--texte-inverse-doux);
}
.credo__deux {
  font-family: var(--titre); font-size: var(--t-h1); line-height: var(--lh-titre);
  letter-spacing: -.02em; font-weight: var(--gr-appuye); color: var(--papier);
}
.credo__texte { max-width: 56ch; color: var(--texte-inverse-doux); margin: var(--e-4) 0 0; }
.credo__question {
  margin-top: var(--souffle-court); padding-top: var(--souffle-court);
  border-top: 1px solid var(--ligne-inverse);
  display: grid; gap: var(--e-4); justify-items: center;
}
.credo__amorce { margin: 0; max-width: 48ch; color: var(--texte-inverse-doux); }
.credo__demande {
  margin: 0; max-width: 24ch; text-wrap: balance;
  font-family: var(--titre); font-size: clamp(1.9rem, 1rem + 3.9vw, 3.8rem);
  line-height: 1.03; letter-spacing: -.03em; font-weight: var(--gr-appuye);
  color: var(--papier);
}
/* La réponse se détache de la question : c'est la seule ligne verte de la
   section, et c'est elle qu'on doit emporter. */
.credo__reponse b { font-weight: var(--gr-appuye); color: var(--papier); }
.credo__reponse {
  margin: 0; font-family: var(--titre); font-size: var(--t-h3);
  font-weight: var(--gr-moyen);
  color: color-mix(in srgb, var(--gamme, var(--vert)) 55%, white);
}
.credo__action { margin: var(--souffle-court) 0 0; }

/* Le gris neutre de la charte : le noir du site à 5 %, comme ses trois gris
   de texte. Le blanc cassé #F2EAE7 tire sur le rose et jurait entre le bleu
   réglementaire et le vert Minerya (Romain, 13/09). */
.bloc--gris,
[data-gamme] .bloc--gris.bloc--doux,
[data-gamme="minerya"].bloc--gris.bloc--doux {
  background: color-mix(in srgb, var(--encre) 5%, var(--papier));
}

/* La colonne image du hero se resserre encore : « réduis-la, s'il te
   plaît » (Romain, 13/09, deuxième passe). */
@media (min-width: 900px) {
  /* ⚖️ Romain, 13/09, mise au point : « je ne veux pas changer le ratio entre
     la gauche et la droite, je veux le même que sur les autres héros ; c'est
     l'affichage À L'INTÉRIEUR de l'image qui est trop en gros plan. »
     J'avais rétréci la colonne quatre fois de suite en croyant réduire la
     photo : la colonne revient donc au ratio commun, et c'est le cadrage qui
     se desserre — la photo entière tient dans la colonne au lieu d'être
     recadrée en son centre. */
}

/* ── La tête de la home ────────────────────────────────────────────────────
   La hiérarchie des pages de gamme, sans leur découpage d'image : un filet,
   une étiquette, puis un titre en deux paliers. Les paliers ne diffèrent que
   par la taille — même graisse, même couleur — parce qu'ajouter du gras et
   du gris donnait quatre informations pour une seule phrase (Romain). */
.hero__tete { display: flex; align-items: center; gap: var(--e-4); margin: 0; }
.hero__filet { display: block; width: clamp(40px, 6vw, 88px); height: 1px; background: var(--papier); opacity: .5; }
.hero__titre--paliers { display: grid; gap: 0; max-width: 22ch; }
.hero__palier-un {
  display: block; font-size: var(--t-h3); line-height: var(--lh-sous);
  font-weight: var(--gr-moyen); letter-spacing: var(--ls-corps);
}
/* Le palier qui porte la promesse. C'est le seul en grand : ce qu'on lit de
   loin doit être ce qu'on gagne, pas la restriction qui suit. */
.hero__palier-deux {
  display: block; font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.4rem); line-height: 1.03;
  letter-spacing: -.02em; font-weight: var(--gr-moyen);
}
.hero__palier-trois {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-h3); line-height: var(--lh-sous);
  font-weight: var(--gr-moyen); letter-spacing: var(--ls-corps);
}

/* Le verdict d'une famille, avant ses trois faits : une ligne qui dit où on
   va, pour que le tableau qui suit se lise en diagonale (Romain, 13/09). */
.famille__verdict {
  margin: var(--e-3) 0 0; font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); font-weight: var(--gr-appuye);
  color: var(--gamme-encre, var(--texte));
}

/* ── Les questions ouvertes ────────────────────────────────────────────────
   ⚖️ Romain, 13/09 : « il faut lire pour savoir de quoi on parle ; il faut un
   tableau visuel clair d'un coup d'œil ». Le sujet devient un titre, le picto
   le signe, et ce qui se décide tient sur deux lignes. */
.ouvertes {
  display: grid; gap: 1px; background: var(--ligne);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ouverte {
  background: var(--fond); padding: var(--e-6) var(--e-5);
  display: grid; gap: var(--e-3); align-content: start;
}
.ouverte__icone { width: 30px; height: 30px; color: var(--gamme-encre, var(--action)); }
.ouverte__icone .icone { width: 100%; height: 100%; stroke-width: 1.6; }
.ouverte__sujet {
  margin: 0; font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); font-weight: var(--gr-appuye); color: var(--texte);
}
.ouverte__decide { margin: 0; font-size: var(--t-petit); line-height: 1.55; color: var(--texte-doux); }
.bloc--doux .ouverte { background: var(--papier); }

/* ── Les trois gestes de transformation ────────────────────────────────────
   Trois carrés, un picto, un verbe : « visuellement avec un picto on comprend
   tout de suite de quoi il s'agit » (Romain, 13/09). */
/* Même règle que .atouts : le nombre de colonnes suit le nombre de gestes,
   sinon auto-fit ouvre une piste de plus et le gris de la grille apparaît. */
.gestes { display: grid; gap: 1px; background: var(--ligne); }
@media (min-width: 560px) { .gestes { grid-template-columns: repeat(min(2, var(--colonnes, 4)), minmax(0,1fr)); } }
@media (min-width: 900px) { .gestes { grid-template-columns: repeat(var(--colonnes, 4), minmax(0,1fr)); } }
.geste {
  background: var(--fond); aspect-ratio: 1 / .8;
  display: grid; align-content: center; justify-items: center; gap: var(--e-4);
  padding: var(--e-5);
}
.geste__icone { width: clamp(40px, 4vw, 56px); height: clamp(40px, 4vw, 56px); color: var(--gamme-encre, var(--action)); }
.geste__icone .icone { width: 100%; height: 100%; stroke-width: 1.5; }
.geste__nom {
  margin: 0; font-family: var(--titre); font-size: var(--t-h4);
  font-weight: var(--gr-appuye); color: var(--texte); text-align: center;
}
.geste__suite { margin: var(--e-4) 0 0; color: var(--texte-doux); max-width: 52ch; }

/* ── Les deux parts, en grand ──────────────────────────────────────────────
   ⚖️ Romain, 13/09 : « ces chiffres sont trop petits et peu visibles, mets-les
   en avant. » Ce sont eux la démonstration : le libellé les annonce, le
   pourcentage prend la taille d'un titre, et les deux parts s'écrivent au
   même format pour que la comparaison saute aux yeux. */
.masse__part { margin: 0 0 var(--e-4); display: grid; gap: 2px; }
.masse__quoi-part {
  font-family: var(--mono); font-size: var(--t-mention);
  letter-spacing: var(--ls-etiquette); text-transform: uppercase;
  color: var(--texte-mention);
}
.masse__pourcent {
  font-family: var(--titre); font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, .9rem + 2.6vw, 2.8rem); line-height: 1.02;
  letter-spacing: -.03em; font-weight: var(--gr-appuye);
  color: var(--gamme-encre, var(--texte));
}
.masse__de { font-size: var(--t-petit); color: var(--texte-doux); }
.bloc--sombre .masse__quoi-part { color: rgb(255 255 255 / .6); }
.bloc--sombre .masse__pourcent { color: var(--sur-sombre, var(--papier)); }
.masse__part--socle { margin: 0 0 var(--e-2); }
.masse__part { margin: 0; }
.masse__part--socle .masse__note { display: block; margin-top: var(--e-2); }

/* Le tramage sur la roche : elle recule, les chiffres passent devant.
   « Ajoute un tramage sur l'image de la pierre, elle sera plus grisée et
   s'effacera davantage » (Romain, 13/09). */
/* ⚖️ Romain, 14/09 : « assombris-la un tout petit peu pour montrer que c'est
   la terre, la roche ; elle est un peu trop claire. » Un calcaire photographié
   en studio sur fond blanc ne pèse rien à l'œil : il faut lui rendre sa masse
   sans le salir. */
.masse__socle img { filter: grayscale(.62) contrast(1.04) brightness(.84); }
/* ⚖️ Romain, 14/09 : « je préférais des lignes obliques ». Une trame de
   hachures à 45°, très fine et très pâle : elle grise la roche sans la
   piqueter, ce que reprochait la trame de points. */
.masse__socle::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgb(255 255 255 / .22) 0 1px,
    transparent 1px 6px
  );
}

/* La photo du hero à dégradé se montre entière, pas recadrée : une image de
   2000 × 1300 dans une colonne haute et étroite, en « cover », ne laisse voir
   que son centre — d'où l'impression de gros plan. */
/* ⚖️ Romain, 14/09 : « remets l'image en pleine hauteur. » J'ai essayé deux
   fois de la réduire dans sa colonne — cadrage entier sur fond blanc, puis
   sur fond flouté — et les deux étaient pires que le problème. La colonne du
   hero se comporte donc comme partout ailleurs sur le site : la photo la
   remplit, point. Le recadrage se fera dans le fichier. */

/* Les décimales d'une part : plus petites que le chiffre de tête, parce que
   c'est l'ordre de grandeur qui compte, pas la précision (Romain, 13/09). */
.masse__decimales {
  font-size: .46em; letter-spacing: 0; font-weight: var(--gr-moyen);
  vertical-align: baseline;
}

/* ── Le sommaire d'un document ─────────────────────────────────────────────
   Le catalogue n'est pas téléchargeable : il se consulte page par page. Le
   sommaire est donc la seule table de navigation, et il reprend celui du
   document, numéros de page compris (Romain, 14/09). */
/* Dans la colonne de marge : un repère de pagination, pas un menu. Petit,
   discret, et cliquable pour ceux qui s'en servent (Romain, 14/09). */
.sommaire { margin: var(--e-5) 0 0; }
.sommaire__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.sommaire__liste a {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-4);
  align-items: baseline;
  padding: var(--e-3) 0; border-bottom: 1px solid var(--ligne);
  text-decoration: none; color: var(--texte);
  transition: color var(--duree-2) var(--sortie);
}
.sommaire__liste a:hover { color: var(--gamme-encre, var(--action)); }
.sommaire__titre {
  font-size: var(--t-petit); line-height: 1.35; font-weight: var(--gr-moyen);
}
.sommaire__sous button { padding-left: var(--e-4); }
.sommaire__sous .sommaire__titre {
  font-weight: var(--gr-normal); color: var(--texte-doux);
}
.sommaire__page {
  font-family: var(--mono); font-size: var(--t-mention);
  color: var(--texte-mention); font-variant-numeric: tabular-nums;
}
.sommaire__mention {
  margin: var(--e-4) 0 0; font-family: var(--mono); font-size: var(--t-mention);
  letter-spacing: var(--ls-etiquette); text-transform: uppercase;
  color: var(--texte-mention);
}

/* ── La visionneuse en livret ──────────────────────────────────────────────
   ⚖️ Romain, 14/09 : « une visionneuse fluide où l'on voit la forme d'un vrai
   magazine, avec une animation. » Deux pages côte à côte, une reliure au
   milieu, une ombre qui creuse le pli, et la page qui pivote sur la reliure
   quand on avance. Aucune bibliothèque : perspective CSS et une copie de la
   page en transit.
   La couverture va seule à DROITE, comme une première de couverture. */
.livret { margin: 0; display: grid; gap: var(--e-5); }
.livret__scene {
  display: grid; grid-template-columns: 1fr;
  perspective: 2400px; position: relative;
  filter: drop-shadow(0 22px 48px rgb(0 0 0 / .18));
}
@media (min-width: 760px) { .livret__scene { grid-template-columns: 1fr 1fr; } }
.livret__page { margin: 0; position: relative; background: var(--fond-doux); min-height: 1px; }
.livret__page img { width: 100%; height: auto; display: block; }
/* Le pli : une ombre portée vers l'intérieur, comme le creux d'une reliure. */
.livret__page--gauche::after,
.livret__page--droite::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
@media (min-width: 760px) {
  .livret__page--gauche::after { background: linear-gradient(90deg, transparent 88%, rgb(0 0 0 / .13) 100%); }
  .livret__page--droite::after { background: linear-gradient(270deg, transparent 88%, rgb(0 0 0 / .13) 100%); }
}
/* Une moitié sans page — la couverture, la dernière — garde sa place vide. */
.livret__page--vide { background: none; }
.livret__page--vide::after { display: none; }
@media (max-width: 759px) { .livret__page--vide { display: none; } }

/* La page en train de tourner : une copie posée sur la moitié qu'elle quitte,
   qui bascule sur la reliure. */
.livret__tourne {
  position: absolute; top: 0; bottom: 0; width: 50%;
  transform-style: preserve-3d; backface-visibility: hidden;
  opacity: 0; pointer-events: none; z-index: 2;
}
.livret__tourne img { width: 100%; height: 100%; object-fit: fill; display: block; }
.livret__tourne.est-droite { left: 50%; transform-origin: left center; opacity: 1; }
.livret__tourne.est-gauche { left: 0;   transform-origin: right center; opacity: 1; }
.livret__tourne.est-droite.tourne {
  animation: tourne-droite 560ms cubic-bezier(.4, 0, .2, 1) forwards;
}
.livret__tourne.est-gauche.tourne {
  animation: tourne-gauche 560ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes tourne-droite {
  0%   { transform: rotateY(0deg);    filter: brightness(1); }
  100% { transform: rotateY(-172deg); filter: brightness(.72); }
}
@keyframes tourne-gauche {
  0%   { transform: rotateY(0deg);    filter: brightness(1); }
  100% { transform: rotateY(172deg);  filter: brightness(.72); }
}
@media (max-width: 759px) { .livret__tourne { display: none; } }
@media (prefers-reduced-motion: reduce) { .livret__tourne { display: none; } }

.livret__barre { display: flex; align-items: center; justify-content: center; gap: var(--e-5); }
.livret__fleche {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ligne-appuyee); background: var(--fond);
  color: var(--texte); font-size: 18px; line-height: 1; cursor: pointer;
  transition: background var(--duree-2) var(--sortie), color var(--duree-2) var(--sortie);
}
.livret__fleche:hover:not(:disabled) {
  background: var(--gamme-encre, var(--action)); color: var(--papier);
  border-color: var(--gamme-encre, var(--action));
}
.livret__fleche:disabled { opacity: .3; cursor: default; }
.livret__compte {
  margin: 0; display: flex; gap: var(--e-2); align-items: baseline;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-corps); color: var(--texte);
}
.livret__sur { font-size: var(--t-mention); color: var(--texte-mention); }

/* Les entrées du sommaire pilotent le livret : ce sont des boutons, pas des
   ancres, puisqu'il n'y a plus rien à atteindre par défilement. */
.sommaire__liste button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-3);
  align-items: baseline; padding: var(--e-2) 0;
  border-bottom: 1px solid var(--ligne); color: var(--texte);
  font: inherit;
  transition: color var(--duree-2) var(--sortie);
}
/* ⚖️ Romain, 14/09 : « ne mets pas de hover, hover signifie que c'est un
   bouton cliquable. » Il l'est pourtant : il ouvre le bon feuillet. On garde
   donc le signal minimal — le numéro de page seul s'anime — au lieu de
   déguiser la ligne entière en bouton. */
.sommaire__liste button:hover .sommaire__page { color: var(--gamme-encre, var(--action)); }

/* La trame européenne : des hachures obliques dans le bleu EU, posées sur la
   photo du drapeau pour qu'elle cesse d'être une image de banque au milieu
   d'images de matière (Romain, 14/09). Même famille que la trame du socle
   minéral sur Gardiens du Vivant : 45°, fine, non recouvrante. */
.trame-eu { position: relative; }
.trame-eu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--bleu-eu) 34%, transparent) 0 2px,
      transparent 2px 9px),
    linear-gradient(200deg,
      color-mix(in srgb, var(--bleu-eu) 26%, transparent) 0%,
      transparent 62%);
}

/* ── Les atouts en boîtes ──────────────────────────────────────────────────
   Un picto, une propriété, sa précision. Quatre boîtes se lisent en diagonale
   là où quatre puces demandent une lecture (Romain, 14/09). */
/* Deux ou quatre colonnes, jamais trois : quatre boîtes sur trois colonnes
   laissent un trou gris au milieu de la grille. */
/* ⚠️ Le fond gris de la grille est le filet entre les boîtes. Avec trois
   boîtes sur quatre colonnes, la quatrième case restait vide et affichait ce
   gris : « pourquoi mettre un carré gris à côté ? S'il y en a trois, vous
   mettez trois » (Romain, 15/09). Le nombre de colonnes suit le nombre de
   boîtes ; --colonnes est posé par la page. */
.atouts { display: grid; gap: 1px; background: var(--ligne); }
@media (min-width: 620px)  { .atouts { grid-template-columns: repeat(min(2, var(--colonnes, 4)), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .atouts { grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr)); } }
.atout {
  background: var(--fond); padding: var(--e-6) var(--e-5);
  display: grid; gap: var(--e-3); align-content: start;
}
.atout__icone { width: 34px; height: 34px; color: var(--gamme-encre, var(--action)); }
.atout__icone .icone { width: 100%; height: 100%; stroke-width: 1.6; }
.atout__titre {
  margin: 0; font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); font-weight: var(--gr-appuye); color: var(--texte);
}
.atout__note { margin: 0; font-size: var(--t-petit); line-height: 1.5; color: var(--texte-doux); }

/* Sur une page document, le corps s'aligne sur le filet de la marge : il n'a
   pas de titre de section à décrocher (Romain, 14/09). */
.index__corps--haut { padding-top: 0; margin-top: 0; }

/* ------------------------------------------------------------- Contact --
   Trois parcours, trois cartes. La même vignette que les usages, plus une
   action en pied de carte : ce sont des portes, pas des illustrations. */

@media (min-width: 900px) { .usages--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usage__action { margin-top: var(--e-2); }
.usage__action .cta { width: 100%; text-align: center; }
.usage p { color: var(--texte-doux); margin: 0; }

/* Le formulaire. Un seul, le profil se règle par le champ du haut : trois
   formulaires distincts, c'est trois fois la même maintenance. */
.formulaire { display: grid; gap: var(--e-5); max-width: 46rem; }
.formulaire__paire { display: grid; gap: var(--e-5); }
@media (min-width: 640px) { .formulaire__paire { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: var(--e-2); }
.champ > span {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
}
.champ input, .champ select, .champ textarea {
  font: inherit; color: var(--texte); background: var(--papier);
  border: 1px solid var(--ligne-appuyee); border-radius: 0;
  padding: var(--e-3) var(--e-4); width: 100%;
  transition: border-color var(--d-court) var(--courbe);
}
.champ textarea { min-height: 8.5rem; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--gamme-encre, var(--action)); outline-offset: 1px;
  border-color: transparent;
}
.formulaire__pied { display: grid; gap: var(--e-4); justify-items: start; }
.formulaire__pied .mention { margin: 0; }

/* Lien de renvoi discret, en pied de carte : une flèche, pas un bouton. */
.lien-fleche {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--gamme-encre, var(--action)); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .5em;
}
.lien-fleche .fleche { transition: transform var(--d-court) var(--courbe); }
.lien-fleche:hover .fleche { transform: translateX(.25em); }
.bloc--sombre .lien-fleche { color: var(--sur-sombre, var(--papier)); }
/* Un titre de boîte peut être un lien : il garde son dessin de titre. */
.atout__titre a { color: inherit; text-decoration: none; }
.atout__titre a:hover { color: var(--gamme-encre, var(--action)); }

/* ========================================================= RUBRIQUE PANIBAG
   ⚖️ Romain, 14/09 : « Pour les pages Panibag, tu peux remettre en page selon
   notre charte, en utilisant leur code couleur. » La mise en page est celle
   du site — rail, index, marge, filets. Les couleurs sont celles de Panibag.

   Aucune valeur Minerya n'est modifiée : la rubrique déclare les siennes.
   L'orange est le --orange du relevé (color_34), inchangé. L'encre en dérive
   par calcul, comme pour les quatre gammes : #EA6020 seul ne passe pas le
   seuil de lisibilité sur blanc (3,1:1), sa version assombrie oui (5,3:1).
   Le taupe et le kraft sont relevés sur les visuels de la marque. */

[data-gamme="panibag"] {
  /* Le code couleur Panibag, relevé sur le logotype officiel
     (MEDIA/…/Panibag/Panibag-Logo.svg) que Romain a fourni le 15/09 :
     brun #33211a, taupe #cfb8a5, ambre #f1b566, plus l'orange #EA6020 du
     relevé de site. Le brun de Panibag et celui de la charte Minerya
     (--brun #312C28) sont à 2 % l'un de l'autre : on garde celui de la
     charte plutôt que d'en déclarer un treizième. */
  --pb-taupe: #cfb8a5;
  --gamme: var(--orange);
  /* ⚖️ Romain, 15/09, en deux temps : « tu ne m'en mets pas un deuxième »,
     puis « je t'ai dit de les mettre en orange Panibag, c'est juste que ce
     n'était pas le bon orange ». Donc : #EA6020, celui du relevé, et lui
     seul — ni version assombrie, ni brun de remplacement. */
  --gamme-encre: var(--orange);
  --gamme-sur: var(--papier);
  --gamme-sur-corps: var(--texte-inverse);
  --gamme-sombre: var(--brun);
  --gamme-doux: color-mix(in srgb, var(--pb-taupe) 32%, var(--papier));
  /* ⚠️ 15/09 : le brun très foncé que j'avais posé ici n'est pas dans la
     charte. Le bloc plein reprend donc le noir du site, comme partout
     ailleurs — c'est aussi ce que montre la page Wix. */
  /* Sur le fond sombre, l'accent est l'orange : il y tient, contrairement au
     bleu de la réglementation qui peignait déjà le fond. */
  --sur-sombre: var(--orange);
  --sur-sombre-corps: var(--papier);
}
[data-gamme="panibag"] .bloc--gamme { background: var(--gamme-doux); }

/* La bande de pictogrammes de la marque. Six vignettes carrées, sur leur
   propre taupe : ce sont des images finies, pas des icônes de trait. */
.pb-pictos { display: grid; gap: 1px; background: var(--ligne); }
@media (min-width: 520px)  { .pb-pictos { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .pb-pictos { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.pb-pictos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* La visionneuse d'explication : une vidéo, rien autour. */
.pb-video { position: relative; background: var(--gamme-doux, var(--fond-doux)); }
.pb-video video { display: block; width: 100%; height: auto; }

/* Le témoignage. Il sort du rail par la gauche, comme une citation d'article,
   et son filet est celui de la rubrique. */
.temoignage {
  display: grid; gap: var(--e-6);
  border-left: 3px solid var(--gamme-encre, var(--action));
  padding-left: var(--e-6);
}
.temoignage blockquote { margin: 0; display: grid; gap: var(--e-5); }
.temoignage p {
  font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); color: var(--texte);
}
.temoignage footer {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-mention);
}
.bloc--sombre .temoignage p { color: var(--texte-inverse); }
.bloc--sombre .temoignage footer { color: var(--texte-inverse-doux); }

/* La FAQ. Un <details> par question : elle doit s'ouvrir sans JS, et rester
   lisible quand le navigateur cherche un mot dans une réponse repliée. */
.faq { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--e-5) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-5);
  font-family: var(--titre); font-size: var(--t-h4);
  line-height: var(--lh-sous); font-weight: var(--gr-appuye); color: var(--texte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--mono); font-weight: var(--gr-normal);
  color: var(--gamme-encre, var(--action)); flex: none;
  transition: transform var(--d-court) var(--courbe);
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--gamme-encre, var(--action)); }
.faq__reponse { padding-bottom: var(--e-6); }
.faq__reponse p { color: var(--texte-doux); max-width: 68ch; margin: 0; }


/* ⚠️ Le corps du chiffre est calibré pour QUATRE colonnes et un libellé court.
   Dès qu'il y a cinq colonnes, ou une unité collée à la valeur (« 0,001 € »,
   « 15-21 j »), il déborde et se coupe en deux. Romain, 15/09 : « ils sont
   tellement gros que j'ai des retours à la ligne partout. » Cette variante
   rend au chiffre la place de tenir sur une ligne. */
.chiffres--compact { --t-chiffre: clamp(1.7rem, .9rem + 1.9vw, 2.4rem); }
.chiffres--compact .chiffre__valeur { white-space: nowrap; overflow-wrap: normal; }

/* Une liste de faits dont les valeurs sont des PHRASES, pas des mesures : la
   chasse fixe alignée à droite y devient illisible. Même dessin, lecture à
   gauche. */
.offre__faits--texte dd {
  font-family: inherit; text-align: left; color: var(--texte-doux);
}
/* ⚠️ La colonne des valeurs vaut « auto » : elle se dimensionne au texte, donc
   text-align n'y change rien à l'œil. Une phrase a besoin de sa propre largeur. */
.offre__faits--texte .offre__fait { grid-template-columns: minmax(8rem, 1fr) 2.2fr; }
.bloc--sombre .offre__faits--texte dd { color: var(--texte-inverse-doux); }
.bloc--sombre .offre__fait { border-color: var(--ligne-inverse); }
.bloc--sombre .offre__fait dt { color: var(--texte-inverse-doux); }

/* Une rangée peut porter plusieurs paragraphes : ils tiennent dans un bloc,
   sinon le deuxième retombe dans la colonne du titre. */
.rangee-item__texte { display: grid; gap: var(--e-4); }
.rangee-item__texte p { color: var(--texte-doux); font-size: var(--t-corps); margin: 0; }
.bloc--sombre .rangee-item__texte p { color: var(--texte-inverse-doux); }


/* ---------------------------------------------------------- bloc vert --
   ⚖️ Romain, 15/09 : « pour Collaboration, mets-moi ça en vert. » Le bloc
   plein de la marque, à côté du bloc noir. Le vert est celui de la charte,
   posé dans son état assombri — le même calcul que --action-survol, aucune
   valeur nouvelle : sur #008C76 pur le texte blanc tombe à 4,2:1, dessus il
   passe à 5,1:1. */
.bloc--vert {
  background: var(--action-survol); color: var(--texte-inverse);
  --texte: var(--texte-inverse);
  --texte-doux: var(--texte-inverse-doux);
  --texte-mention: rgb(255 255 255 / .68);
  --ligne: rgb(255 255 255 / .20);
  --ligne-appuyee: rgb(255 255 255 / .34);
  /* Sur ce fond, l'accent est le blanc : un vert sur du vert ne se voit pas. */
  --sur-sombre: var(--papier);
  --sur-sombre-corps: var(--gamme-encre, var(--action-survol));
}
.bloc--vert .etiquette, .bloc--vert .mention { color: var(--texte-inverse-doux); }
.bloc--vert .tete__filet { background: var(--papier); opacity: .5; }
[data-gamme] .bloc--vert .tete__filet { background: var(--papier); opacity: .5; }
[data-gamme] .bloc--vert .etiquette::before { border-color: var(--papier); }
.bloc--vert .titre-2, .bloc--vert .titre-3, .bloc--vert .titre-4 { color: var(--texte-inverse); }
.bloc--vert .profils { background: rgb(255 255 255 / .22); }
.bloc--vert .profil {
  background: var(--action-survol);
  --texte: var(--texte-inverse); --texte-doux: var(--texte-inverse-doux);
}
.bloc--vert .profil h3 { color: var(--texte-inverse); }
[data-gamme] .bloc--vert .cta:not(.cta--ligne) {
  background: var(--papier);
  color: var(--action-survol); -webkit-text-fill-color: var(--action-survol);
}
[data-gamme] .bloc--vert .cta:not(.cta--ligne):hover {
  background: color-mix(in srgb, var(--papier) 88%, var(--action-survol));
}

/* ------------------------------------------------------------- sigles --
   Trois textes réglementaires, pas trois mesures. Le sigle se lit en un coup
   d'œil, son intitulé complet tient dessous sans se couper, et le picto dit
   de quoi il retourne. Le bloc .chiffre le rendait en corps de titre : « PPWR »
   passait en 64 px et « Packaging and Packaging Waste Regulation » tombait sur
   quatre lignes (Romain, 15/09). */
.sigles { display: grid; gap: 1px; background: var(--ligne); }
@media (min-width: 700px) { .sigles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sigle {
  background: var(--fond); padding: var(--e-6) var(--e-5);
  display: grid; gap: var(--e-3); align-content: start;
}
.sigle__icone { width: 34px; height: 34px; color: var(--gamme-encre, var(--action)); }
.sigle__icone .icone { width: 100%; height: 100%; stroke-width: 1.6; }
.sigle__nom {
  font-family: var(--titre); font-size: var(--t-h3); line-height: 1;
  font-weight: var(--gr-appuye); letter-spacing: -.02em;
  color: var(--gamme-encre, var(--texte-accent));
}
.sigle__intitule {
  font-family: var(--mono); font-size: var(--t-etiquette); line-height: 1.5;
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--texte-doux);
  padding-top: var(--e-3); border-top: 1px solid var(--ligne);
}
.sigle__contexte { font-size: var(--t-petit); line-height: 1.5; color: var(--texte-mention); margin: 0; }



/* Geste illustré : le picto dit le terme, la photo dit la réalité d'atelier.
   ⚖️ Romain, 15/09 : « on comprend qu'on parle de grosses bobines
   industrielles, de façonnage, de découpage, de passage dans des rotatives,
   avec des pictos qui associent chaque terme. C'est ça que je veux, pas du
   texte. » */
.gestes--illustres .geste { aspect-ratio: auto; align-content: start; gap: 0; padding: 0; }
.geste__vue { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fond-doux); }
.geste__vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--d-long) var(--courbe);
}
.geste:hover .geste__vue img { transform: scale(1.05); }
.gestes--illustres .geste__corps {
  display: grid; justify-items: center; gap: var(--e-3);
  padding: var(--e-5);
}

/* Une boîte peut porter son action : le titre n'est plus le lien, le bouton
   l'est (Romain, 15/09). */
.atout__action { margin: var(--e-3) 0 0; }

/* Le picto d'un parcours, posé sous la vignette : il nomme le métier avant
   qu'on lise le titre (Romain, 15/09). */
.usage__picto {
  width: 34px; height: 34px; color: var(--gamme-encre, var(--action));
  margin-top: calc(var(--e-2) * -1);
}
.usage__picto .icone { width: 100%; height: 100%; stroke-width: 1.6; }


/* ⚖️ Romain, 15/09 : « tu ne me fais pas de modification sur le orange du
   Panibag, tu mets le bouton de la même couleur. » L'aplat du bouton est donc
   #EA6020 exactement. --gamme-encre, sa version assombrie, ne sert plus qu'à
   ÉCRIRE sur du papier — flèches, surtitres, filets — là où l'orange pur ne
   passe pas le seuil de lisibilité. Même règle que pour les quatre gammes. */
[data-gamme="panibag"] .cta:not(.cta--ligne) {
  background: var(--orange);
  color: var(--papier); -webkit-text-fill-color: var(--papier);
}
[data-gamme="panibag"] .cta:not(.cta--ligne):hover {
  background: color-mix(in srgb, var(--orange) 86%, black);
}
[data-gamme="panibag"] .bloc--sombre .cta:not(.cta--ligne) {
  background: var(--orange);
  color: var(--papier); -webkit-text-fill-color: var(--papier);
}

/* Une vignette qui n'a pas encore sa photo juste : le picto tient la place,
   à la même hauteur que les vignettes voisines. Mieux qu'une image fausse. */
.usage__vue--picto {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gamme, var(--encre)) 14%, var(--papier));
  color: var(--gamme-encre, var(--action));
}
.usage__vue--picto .icone { width: 34%; height: auto; stroke-width: 1.3; }

/* Les sceaux de certification de la page alimentaire. Ce sont des images
   finies : on ne les recolore pas, on leur donne de la place. */
/* ⚖️ Romain, 15/09 : « pour les certifications, pas besoin de les mettre
   aussi grosses : une seule ligne suffit. » Huit sceaux sur un rang, à la
   taille d'un jeton. Ils se replient en deux rangs sous 900 px, jamais plus. */
.sceaux { display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: center; }
.sceaux img { width: clamp(54px, 7vw, 78px); height: auto; display: block; }
@media (min-width: 900px) {
  .sceaux--ligne { flex-wrap: nowrap; justify-content: space-between; }
}

/* Le comparatif hygiène et la palette : des documents finis, on leur donne
   leur largeur de lecture et rien d'autre. */
.pb-comparatif, .pb-palette { margin: var(--souffle-court) 0 0; }
.pb-comparatif img { width: 100%; max-width: 560px; height: auto; display: block; }
.pb-palette img { width: 100%; max-width: 460px; height: auto; display: block; }


/* Trois parcours sur trois colonnes : à deux colonnes le troisième prenait
   toute la largeur et pesait deux fois plus que les autres. */
@media (min-width: 900px) { .profils--trois { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.profils--trois > .profil:last-child:nth-child(odd) { grid-column: auto; }


/* Le mur de gammes en PIED de page métier n'est pas la section de la home :
   c'est un rappel. « Le rappel de la gamme Minerya est carrément trop gros,
   ça prend plus de place qu'autre chose » (Romain, 15/09). Même dessin, deux
   fois moins haut. */
.mur--rappel .c-gamme__tete { padding: var(--e-6) var(--e-5) var(--e-5); gap: var(--e-4); }
.mur--rappel .c-gamme__photo { aspect-ratio: 16 / 7; }
.mur--rappel .c-gamme__logo { width: clamp(96px, 48%, 132px); }
.mur--rappel .c-gamme__pied { padding: var(--e-4); }

/* Quatre portes, rien de plus : le rappel des gammes quand la page les a déjà
   montrées en détail plus haut. Chaque bouton porte la couleur de sa gamme. */
.portes { display: flex; flex-wrap: wrap; gap: var(--e-4); margin: var(--souffle-court) 0 0; }
.portes .cta--ligne { border-color: var(--gamme); color: var(--gamme-encre); }
.portes .cta--ligne:hover { background: var(--gamme); color: var(--gamme-sur-corps, var(--texte)); }


/* Palette et paquets individuels côte à côte : Panibag se commande des deux
   façons, la page doit montrer les deux (Romain, 15/09). */
.pb-conditionnements { display: grid; gap: var(--e-6); margin-top: var(--souffle-court); }
@media (min-width: 760px) { .pb-conditionnements { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pb-conditionnements figure { margin: 0; display: grid; gap: var(--e-3); }
.pb-conditionnements img { width: 100%; height: auto; display: block; background: var(--gamme-doux); }
.pb-conditionnements figcaption {
  font-family: var(--mono); font-size: var(--t-etiquette);
  text-transform: uppercase; letter-spacing: var(--ls-etiquette);
  color: var(--gamme-encre, var(--texte-mention));
}

/* Le plan breveté : un document technique, il se lit à sa taille de lecture. */
.pb-brevet { margin: var(--souffle-court) 0 0; }
.pb-brevet img { width: 100%; max-width: 420px; height: auto; display: block; }

/* Un bandeau déjà cadré large n'a pas besoin qu'on lui impose une hauteur :
   il garde son rapport, sinon on lui coupe la tête. */
.bandeau-large--bandeau img { height: auto; aspect-ratio: auto; object-fit: contain; }


/* ------------------------------------------------- Panibag, mise en page --
   ⚖️ Romain, 15/09 : « j'aimerais que les pictos sous micro-perforation,
   respirant, soient plus gros, car c'est ça qui est important : le dessin qui
   explique comment ça fonctionne. » */
/* Pleine largeur, sans gouttière : les six vignettes forment une bande, et
   chacune fait alors le double de sa taille précédente. */
.pb-pictos--grands { gap: 0; background: transparent; }
@media (min-width: 520px)  { .pb-pictos--grands { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .pb-pictos--grands { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* ⚖️ « L'illustration sous la vidéo, j'aimerais qu'elle soit plus grande et
   qu'on puisse lire ce qu'il y a dessus, sur fond blanc. On va faire comme si
   on avait écrit directement sur le fond, pas une image dans une image
   toujours encapsulée. » Le croquis sort donc du rail : pleine largeur, sur
   le papier, sans cadre ni fond propre. */

/* ⚠️ Le comparatif est un document sur fond blanc : posé dans un bloc sombre
   il faisait une vignette blanche sur du noir. Il a sa propre section claire. */

/* Un surtitre ne se coupe pas avant son point d'interrogation. */
.etiquette { text-wrap: balance; }

/* Deux conditionnements, deux colonnes : la palette et le pack artisan.
   Le pack entrepreneur n'existe pas au catalogue (Romain, 15/09). */
@media (min-width: 760px) { .pb-conditionnements--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-conditionnements--deux img { max-width: 420px; }


/* ------------------------------------------------ Panibag, les bandes --
   Un document posé entre deux sections : pas de cadre, pas de fond propre,
   pas de titre. Il respire de part et d'autre et reste à une taille où on le
   lit. ⚖️ Romain, 15/09 : « les pictos sont beaucoup trop grands, recentre-les
   pour les afficher plus petit ; pareil pour le bandeau avec les croquis. » */
.pb-bande {
  margin: 0; padding-block: var(--souffle-court);
  display: grid; justify-items: center;
}
.pb-bande img { width: 100%; height: auto; display: block; }
.pb-bande--croquis img    { max-width: min(92%, 1080px); }
.pb-bande--comparatif img { max-width: min(92%, 560px); }

/* Les six pictogrammes : une bande, mais des vignettes à taille de lecture,
   centrées dans leur cellule plutôt qu'étirées d'un bord à l'autre. */
.pb-pictos--grands {
  gap: var(--e-6); background: transparent;
  padding-block: var(--souffle-court);
  justify-items: center; align-items: center;
  /* La rangée se resserre au centre : étalée d'un bord à l'autre de l'écran,
     six vignettes de 130 px flottaient dans le vide. */
  max-width: 1040px; margin-inline: auto;
  padding-inline: var(--e-6);
}
.pb-pictos--grands img { width: 100%; max-width: 148px; }

/* Une vignette de conditionnement peut être une porte vers sa fiche. */
.pb-conditionnements a { text-decoration: none; color: inherit; display: block; }
.pb-conditionnements figcaption a:hover { color: var(--gamme-encre, var(--action)); text-decoration: underline; }


/* ======================================= une section, un écran d'ordinateur
   ⚖️ Romain, 17/09, après une première tentative à côté de la plaque :
   « Je veux que chaque section OCCUPE toute la hauteur de l'écran, comme la
   vidéo qui prend toute la place. Là elle est trop petite, je vois la bande
   du dessus et celle du dessous. »

   J'avais compris l'inverse : j'avais rétréci la section pour la faire
   rentrer, en réduisant le corps du titre. Deux erreurs.
   « Tu ne peux pas réduire un titre simplement parce que cela t'arrange. Les
   titres doivent conserver une taille cohérente : le H1, le H2, le H3
   doivent toujours avoir la même dimension. »

   Donc : AUCUNE règle de typographie ici. La section reçoit une hauteur
   minimale d'un écran et centre son contenu dedans. Une section courte
   s'étire pour remplir l'écran, une section longue reste longue — la
   hiérarchie ne bouge dans aucun des deux cas.

   84 px, c'est la hauteur de .entete__rail. svh et non vh : sur mobile, vh
   compte la barre d'adresse qui disparaît, et la section déborde d'autant. */

.section--ecran {
  min-height: calc(100svh - 84px);
  display: grid; align-content: center;
  padding-block: var(--souffle-court);
}
/* Le contenu d'une section pleine hauteur ne se colle pas aux bords quand il
   est plus haut que l'écran : la règle ne doit jamais rogner la lecture. */
@media (max-height: 700px) { .section--ecran { min-height: 0; } }

/* Le mur de gammes dans une section pleine hauteur : on récupère de la place
   dans les BLANCS de la carte et dans le cadrage de la photo, jamais dans le
   corps du texte. L'en-tête de carte absorbait 266 px pour ~150 px de
   contenu ; la photo était cadrée en 16/11.
   ⚠️ Ne pas toucher aux tailles de titre : .c-gamme__secteur et .c-gamme__desc
   gardent exactement le dessin qu'ils ont partout ailleurs. */
.section--ecran .mur .c-gamme__tete { padding: var(--e-6) var(--e-5) var(--e-5); gap: var(--e-4); }
.section--ecran .mur .c-gamme__photo { aspect-ratio: 16 / 9; }
.section--ecran .mur .c-gamme__pied { padding: var(--e-4) var(--e-4) var(--e-5); }

/* Écran court — un portable de 900 px de haut laisse 815 px sous l'en-tête.
   La même section y déborde de 170 px et coupe les boutons : c'est le défaut
   d'origine signalé par Romain. On récupère ces 170 px dans la respiration
   de la section et dans le CADRAGE de la photo, qui se met en bandeau.
   Toujours aucune règle de typographie : le titre garde son corps. */
@media (max-height: 950px) {
  .section--ecran { padding-block: var(--e-8); }
  .section--ecran .mur .c-gamme__tete { padding: var(--e-5) var(--e-5) var(--e-4); gap: var(--e-3); }
  .section--ecran .mur .c-gamme__photo { aspect-ratio: 16 / 6; }
  .section--ecran .mur .c-gamme__pied { padding: var(--e-3) var(--e-4) var(--e-4); }
}


/* ⚖️ Romain, 17/09 : « L'idée est d'appliquer ce principe à toutes les
   sections pour s'assurer qu'elles occupent la hauteur d'un écran. »
   Règle unique sur les sections de premier niveau, plutôt que la classe
   posée à la main dans 36 fichiers : une section ajoutée demain l'aura
   sans qu'on y pense.

   Sont exclues, et pour une raison :
   · .hero et .hero-gamme portent déjà leur propre hauteur ;
   · .bandeau, .bandeau-large, .bandeau-photo, .pb-bande sont des frises et
     des documents, pas des sections — les étirer ne dirait rien ;
   · en dessous de 700 px de haut, la règle se retire : sur un écran aussi
     court, imposer une hauteur minimale rogne la lecture au lieu de l'aider.

   La règle n'ajoute JAMAIS de contrainte de typographie. Elle donne un
   plancher de hauteur et centre le contenu dedans : une section courte
   s'étire, une section longue reste longue. */

@media (min-height: 701px) {
  main > section:not(.hero):not(.hero-gamme):not(.section--libre) {
    min-height: calc(100svh - 84px);
    display: grid; align-content: center;
  }
}

/* ⚠️ L'exception, et elle est nécessaire. Mesuré sur les 20 pages : quelques
   sections ne portent qu'une RANGÉE D'OBJETS, sans texte — huit sceaux de
   certification (78 px de contenu), quatre boutons de gamme (149 px).
   Étirées sur un écran entier, elles ne montrent que du vide : la règle se
   retourne contre ce qu'elle cherche à obtenir.
   Une section d'ÉNONCÉ court, elle, garde la pleine hauteur : un seul
   message par écran, c'est précisément le rythme demandé. */
.section--libre { min-height: 0 !important; }