/* my ESG academy — « Le panneau »
   Programme d'identité institutionnelle française, 1970-85.
   Aucune courbe, aucune ombre, aucun dégradé. Seed 43d096a1. */

/* ── Fonte ─────────────────────────────────────────────────────────
   Satoshi, Fontshare Free Font License. C'est la fonte du logo figé. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ── Sprite des pictogrammes ───────────────────────────────────
   Ces regles vivaient dans un <style> a l'interieur du SVG inline. Les
   sortir ici permet une politique de securite `style-src 'self'` stricte,
   sans `unsafe-inline`. */
.sprite { position: absolute; }
.pg { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: butt; stroke-linejoin: miter; }
.pg-solid { fill: currentColor; stroke: none; }

/* ── Jetons ────────────────────────────────────────────────────── */
:root {
  --green:        #1E3B2E;
  --green-dark:   #122419;
  --green-deeper: #0C1A11;
  --ink:          #F2F0E8;
  --ink-dim:      rgba(242, 240, 232, 0.62);
  --ink-faint:    rgba(242, 240, 232, 0.22);
  --rule:         rgba(242, 240, 232, 0.28);
  --signal:       #F0C33C;

  /* La colonne structurelle. Toute division verticale s'y aligne. */
  --column: 66.6667%;

  --gutter: clamp(1.5rem, 4.5vw, 5.5rem);
  --measure: 62ch;

  /* Échelle typographique */
  /* Le wordmark est cadré au plus juste : entier, jamais coupé. « my ESG
     academy » en Satoshi Black interlettré à -0,035 em mesure 7,9 fois sa
     taille de fonte — rapport constant, mesuré de 320 à 1536 px. 12,5vw
     donne donc 98,7 % de la largeur du cadre : le mot touche presque les
     deux bords sans jamais les franchir. Toucher à ce terme, c'est rogner
     le mot. Le plancher reste sous lui jusqu'à 256 px de large. */
  --t-giant: clamp(2rem, 12.5vw, 17rem);
  --t-h1:    clamp(2.4rem, 8vw, 8.6rem);
  --t-h2:    clamp(1.6rem, 3.2vw, 3.2rem);
  --t-h3:    clamp(1.25rem, 2vw, 1.9rem);
  --t-lead:  clamp(1.05rem, 1.55vw, 1.5rem);
  /* Seconde voix : --t-lead majore de 50 %. Partage par le hero et le
     bandeau des collaborations, qui doivent etre a la meme taille. */
  --t-voice: clamp(1.575rem, 2.325vw, 2.25rem);
  --t-body:  clamp(0.98rem, 1.05vw, 1.1rem);
  --t-label: clamp(0.66rem, 0.76vw, 0.8rem);

  --step: clamp(3.5rem, 7vw, 8rem);
  /* Hauteur du bandeau, soustraite au hero pour que le wordmark
     tombe exactement au bas de la fenetre. */
  --topbar-h: clamp(3.6rem, 5vw, 5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--green);
  color: var(--ink);
  font-family: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.5;
  font-feature-settings: 'tnum' 0;
  overflow-x: hidden;
  /* Grain de sérigraphie : une trame, jamais un dégradé. */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px);
}

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

::selection { background: var(--signal); color: var(--green-dark); }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

/* Lien d'évitement. On le masque par découpe plutôt qu'en le poussant à
   -9999 px : combiné à `overflow-x: hidden` sur body, le déport horizontal
   peut se faire rogner par le conteneur de défilement. */
.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--signal); color: var(--green-dark);
  padding: 0.75rem 1.25rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-label);
}
.skip:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
}

/* ── Primitives ───────────────────────────────────────────────── */
.label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.num {
  font-variant-numeric: tabular-lining;
  font-feature-settings: 'tnum' 1;
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Boutons — rectangles. Aucun arrondi n'existe dans ce système. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1.25em 1.9em;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.25;
  transition: background-color .18s linear, color .18s linear, border-color .18s linear;
}
.btn--primary { background: var(--signal); color: var(--green-dark); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--ink); color: var(--green-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--green-dark); }
.btn--small { padding: 0.75em 1.15em; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ── Le champ : deux verts, une seule arête ───────────────────── */
.field {
  position: relative;
  background: var(--green);
}
.field::after {
  content: '';
  position: absolute; inset: 0 0 0 var(--column);
  background: var(--green-dark);
  pointer-events: none;
  z-index: 0;
}
.field > * { position: relative; z-index: 1; }

/* ── Bandeau commun à toutes les pages ────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--gutter);
  background: var(--green-deeper);
  border-bottom: 1px solid var(--rule);
}
.topbar__brand {
  color: var(--ink); text-decoration: none;
  font-weight: 900; letter-spacing: -0.02em;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
}
.topbar__brand:hover, .topbar__brand:focus-visible { color: var(--signal); }
.topbar__nav {
  display: flex; align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  margin-left: auto;   /* navigation et acces regroupes a droite */
}
.topbar__acces { flex: 0 0 auto; }
.topbar__nav a {
  color: var(--ink); text-decoration: none;
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.topbar__nav a:not(.btn):hover,
.topbar__nav a:not(.btn):focus-visible { color: var(--signal); }

/* ── Premier écran ────────────────────────────────────────────── */
.hero {
  min-height: calc(100svh - var(--topbar-h));
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}

.hero__body {
  padding: 0 var(--gutter);
  align-self: center;
  max-width: 1700px;
}

.hero__title {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.022em;
  /* Pas de mesure : les coupes sont explicites, et la brider empechait le
     titre de franchir l'arete des deux tiers — le geste signature du comp. */
  max-width: none;
}

.hero__aside {
  margin-top: clamp(2rem, 4.4vh, 3.4rem);
  /* Pas de mesure : les deux phrases portent leur propre <br>, et la brider
     coupait « conseil » sur une troisieme ligne. */
  max-width: none;
}
.hero__aside .rule { width: 9rem; margin-bottom: 1.4rem; }
.hero__aside p {
  margin: 0;
  font-size: var(--t-voice);
  font-weight: 500;
  line-height: 1.42;
}

.hero__actions {
  margin-top: clamp(1.9rem, 3.6vh, 3rem);
  display: flex; flex-wrap: wrap; gap: 0.85rem;
}

/* Le wordmark géant. Satoshi Black, la fonte du logo figé.
   Cadré au plus juste : le mot est entier, d'un bord à l'autre. */
.wordmark {
  /* Écart minimal avant le filet. Le corps du premier écran est centré dans
     la rangée `1fr` : cette marge la rogne, donc l'écart visible ne descend
     jamais sous elle. Sans quoi, dès que la fenêtre est courte (petit
     téléphone, bureau en 800 px de haut), la rangée tombe à la hauteur de
     son contenu et le filet vient toucher les boutons. */
  margin-top: clamp(1.6rem, 3.2vh, 2.6rem);
  border-top: 2px solid var(--signal);
  padding-top: clamp(0.4rem, 0.9vw, 1rem);
  /* Filet de sécurité : si la fonte tombe en repli (Helvetica, Arial), ses
     chasses diffèrent de celles de Satoshi et le mot peut franchir le cadre.
     On le coupe alors plutôt que d'ouvrir une barre de défilement. */
  overflow: hidden;
  /* Flex centré : le mot reste centré sur le cadre, et si le repli le rend
     plus large que son parent, il déborde symétriquement des deux côtés
     plutôt que de se décapiter à droite comme le feraient `text-align` ou
     `margin: auto`. */
  display: flex;
  justify-content: center;
}
.wordmark span {
  flex: 0 0 auto;
  font-size: var(--t-giant);
  font-weight: 900;
  /* Assez d'interligne pour que la descendante du « y » reste entière :
     le comp approuvé l'exige explicitement. */
  line-height: 0.96;
  letter-spacing: -0.035em;
  white-space: nowrap;
  /* La descendante du « y » dépasse la boîte de ligne : on lui rend la place
     en em, pour que le rattrapage suive la taille fluide. */
  padding-bottom: 0.17em;
}

/* ── Bandeau des collaborations ───────────────────────────────── */
.collab {
  border-top: 1px solid var(--rule);
  padding: clamp(2rem, 4vw, 3.2rem) var(--gutter);
  background: var(--green-deeper);
}
/* Meme taille que la seconde voix du hero, centree. */
.collab p {
  margin: 0 auto 2.6rem; max-width: none; color: var(--ink-dim);
  font-size: var(--t-voice); line-height: 1.3; text-align: center;
}
.collab ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
}
.collab li { font-size: clamp(0.95rem, 1.35vw, 1.35rem); font-weight: 700; letter-spacing: 0.02em; }

/* ── Sections ─────────────────────────────────────────────────── */
.section { padding: var(--step) var(--gutter); border-top: 1px solid var(--rule); }
.section__label { color: var(--ink-dim); margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.claim {
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.tenets {
  /* Le retrait de liste par defaut decalait les filets du bas de 40 px :
     celui de gauche etait donc plus court que celui du haut. */
  margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  border-top: 1px solid var(--rule);
}
.tenets li {
  list-style: none;
  text-align: center;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.2rem, 2vw, 2rem) clamp(2rem, 3.4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-lead);
  line-height: 1.35;
  font-weight: 500;
}
.tenets ul { margin: 0; padding: 0; }

/* Les trois composants : une bande pleine largeur chacun.
   Jamais une grille de trois cartes. */
.band {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.4rem, 4.6vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.band__index {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  font-weight: 900;
  line-height: 0.8;
  color: var(--signal);
  letter-spacing: -0.04em;
}
.band__title {
  margin: 0.9rem 0 1.1rem;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.band__body { margin: 0; max-width: var(--measure); color: var(--ink-dim); line-height: 1.55; }
.band__list { margin: 1.6rem 0 0; padding: 0; list-style: none; }
.band__list li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.4rem;
  padding: 0.72rem 0;
  border-top: 1px solid var(--ink-faint);
  color: var(--ink-dim);
  line-height: 1.4;
}
.band__list li span:first-child { color: var(--signal); font-weight: 700; }

/* Témoignages — grille de trois par ligne, séparée par des filets.
   Aucune carte, aucun fond, aucun arrondi : ce sont des cellules de tableau,
   pas des boîtes posées sur la page. */
.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.voice {
  display: block;
  padding: clamp(1.5rem, 2.2vw, 2.2rem) clamp(1.2rem, 1.8vw, 1.9rem);
  border-top: 0;
}
/* Filets internes uniquement : jamais de double trait sur les bords. */
.voice:not(:nth-child(3n + 1)) { border-left: 1px solid var(--rule); }
.voice:nth-child(n + 4) { border-top: 1px solid var(--rule); }

.voice__who {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 1rem;
}
.voice__face {
  width: 84px; height: 84px; flex: 0 0 84px;
  border-radius: 0;
  object-fit: cover;
}
.voice__txt { display: block; line-height: 1.3; }
.voice__name { display: block; font-weight: 700; letter-spacing: 0.01em; }
.voice__role {
  display: block; margin-top: 0.28rem;
  color: var(--ink-dim); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.voice blockquote {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-dim);
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice:not(:nth-child(3n + 1)) { border-left: 0; }
  .voice:not(:nth-child(2n + 1)) { border-left: 1px solid var(--rule); }
  .voice:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .voices { grid-template-columns: 1fr; }
  .voice { border-left: 0 !important; }
  .voice:not(:first-child) { border-top: 1px solid var(--rule); }
}

/* Fondateur */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.founder__name { margin: 0 0 1.4rem; font-size: var(--t-h3); font-weight: 900; letter-spacing: -0.01em; }
.founder p { margin: 0 0 1.15rem; max-width: var(--measure); color: var(--ink-dim); line-height: 1.6; }
.founder a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* Clôture */
.closing { padding: var(--step) var(--gutter); border-top: 1px solid var(--rule); background: var(--green-deeper); }
.closing h2 {
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.8rem);
  font-size: var(--t-h2); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; max-width: 18ch;
}

/* Pied de page */
.foot { padding: clamp(2.4rem, 4vw, 3.5rem) var(--gutter) clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--rule); background: var(--green-deeper); }
.foot__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.foot p { margin: 0; max-width: var(--measure); color: var(--ink-dim); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: 2px; }
.foot a:hover, .foot a:focus-visible { border-bottom-color: var(--signal); }
.foot__base { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); color: var(--ink-dim); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; }


/* ── Adaptation ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --column: 100%; }
  /* Les coupes du comp ne valent qu'en grand format. L'espace qui précède
     chaque <br> subsiste, sans quoi les mots se colleraient. */
  .wide { display: none; }
  .hero { padding-top: clamp(5rem, 14vh, 7rem); }
  .hero__title { max-width: 100%; overflow-wrap: break-word; }
  .hero__actions { display: grid; }
  .btn { width: 100%; max-width: 100%; }
  /* Le bandeau garde des boutons compacts : la pleine largeur ne vaut
     que pour les actions de contenu. (L'ancienne exception visait
     `.masthead`, nom abandonne lors du passage a `.topbar` : elle ne
     s'appliquait donc plus, et « Se connecter » occupait toute la
     largeur de l'ecran sur telephone.) */
  .topbar .btn { width: auto; max-width: none; }
  .field::after { display: none; }
  .band, .voice, .founder, .foot__top { grid-template-columns: 1fr; }
  .hero__title { max-width: 100%; }
  .wordmark span { transform: none; }
}

/* ── Éléments visuels ─────────────────────────────────────────── */

/* Logos partenaires : silhouettes dans l'encre du site, poids optiques
   équilibrés à la main — quatre logos de fabrique différente n'ont pas
   la même densité à hauteur égale. */
.collab__logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  align-items: center;      /* alignement par le milieu */
  justify-content: center;  /* centres au milieu de la page */
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.collab__logos img { height: auto; width: auto; opacity: 0.9; }
.collab__logos li:nth-child(1) img { height: clamp(2.2rem, 3.4vw, 3rem); }  /* Bpifrance */
.collab__logos li:nth-child(2) img { height: clamp(3.4rem, 5.4vw, 4.8rem); }  /* Crédit Agricole */
.collab__logos li:nth-child(3) img { height: clamp(3rem, 4.6vw, 4rem); }    /* Banque Populaire */
.collab__logos li:nth-child(4) img { height: clamp(3rem, 4.6vw, 4rem); }    /* Siparex */

/* Pictogrammes : dessinés en SVG, jamais en image. Ils héritent de la
   couleur du texte, donc ils suivent le système sans exception. */
.band__pg {
  width: clamp(2.75rem, 4.4vw, 4rem);
  height: auto;
  color: var(--signal);
  display: block;
  margin-bottom: 1.1rem;
}

/* Les regles des temoignages vivent plus haut, dans le bloc de la grille. */

/* Portrait du fondateur */
.founder__col { display: block; }
.founder__portrait { margin: 0 0 1.2rem; }
.founder__portrait img { width: 100%; height: auto; }
.founder__name { margin: 0; font-size: var(--t-h3); font-weight: 900; letter-spacing: -0.01em; }



/* ── Pages intérieures ────────────────────────────────────────── */
.page-head { border-top: 0; }
.page-head .claim { max-width: 26ch; }

/* Sous 900 px le bandeau passe sur deux rangs plutot que d'ecraser ses
   entrees. « Se connecter » n'est JAMAIS masque : c'est la seule sortie
   fonctionnelle du site vers la plateforme, et aucun pied de page ne la
   reprend. */
@media (max-width: 900px) {
  :root { --topbar-h: 4.9rem; }
  .topbar {
    height: var(--topbar-h);
    flex-wrap: wrap; align-content: center;
    gap: 0.5rem 1rem;
    padding-block: 0.6rem;
  }
  .topbar__brand { flex: 0 0 auto; order: 1; }
  .topbar__acces { order: 2; margin-left: auto; }
  .topbar__nav {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: wrap; gap: 0.4rem 0.625rem;
  }
  /* Les trois rubriques depassaient de 12 px a 390 px, ce qui rejetait
     « Contact » sur un rang a lui seul. Les 12 px sont pris sur
     l'interlettrage et l'espacement, JAMAIS sur le corps : a 10,5 px une
     capitale suivie ne supporte pas d'etre reduite davantage. */
  .topbar__nav a { letter-spacing: 0.03em; }
  .topbar .btn { padding: 0.55em 0.85em; }
}
@media (max-width: 400px) {
  :root { --topbar-h: 4.9rem; }
}

/* Liste de projets sur la page Contact — puces carrées dessinées, jamais
   de disque : aucune courbe n'existe dans ce système. */
.projets { list-style: none; margin: 0 0 1.15rem; padding: 0; max-width: var(--measure); }
.projets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--ink-dim);
  line-height: 1.55;
}
.projets li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--signal);
}
.projets strong { color: var(--ink); font-weight: 700; }
.projets a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.projets a:hover strong, .projets a:focus-visible strong { color: var(--signal); }

/* Logo historique dans le bandeau — declinaison beige, la seule qui tienne
   sur le vert sombre. Le lockup fait deux lignes, d'ou une hauteur contenue. */
.topbar__brand { display: flex; align-items: center; }
.topbar__brand img {
  height: clamp(1.9rem, 2.6vw, 2.5rem);
  width: auto;
  transition: opacity .18s linear;
}
.topbar__brand:hover img, .topbar__brand:focus-visible img { opacity: 0.72; }
@media (prefers-reduced-motion: reduce) { .topbar__brand img { transition: none; } }

/* Photo du fondateur reduite d'un tiers sur la page A propos. */
.founder__portrait { max-width: 66.6667%; }
@media (max-width: 900px) { .founder__portrait { max-width: 60%; } }

/* ── Pièce reproduite et fiche de données ─────────────────────────
   La capture vidéo garde ses couleurs d'origine : c'est une reproduction
   montée dans un cadre, pas un élément d'interface. Convention de planche
   institutionnelle. */
.band--piece { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
/* Disponible si une bande doit un jour occuper toute la largeur.
   Non utilisee : le client a choisi de garder la colonne libre. */
.band--full  { grid-template-columns: 1fr; }

.piece { margin: 0; }
.piece img { width: 100%; height: auto; border: 1px solid var(--rule); }
.piece figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); line-height: 1.4;
}

/* Fiche : trois informations d'un même poids typographique, séparées par
   des filets. Aucune hiérarchie interne — le client la veut homogène. */
.fiche {
  margin: 1.6rem 0 0; padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.fiche li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ink-faint);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  font-variant-numeric: tabular-lining;
  font-feature-settings: 'tnum' 1;
}

@media (max-width: 900px) {
  .band--piece { grid-template-columns: 1fr; }
}

/* Le pied de page porte quatre liens sortants : ils doivent se distinguer
   du texte sans crier. */
.foot__base a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink-faint); padding-bottom: 1px;
}
.foot__base a:hover, .foot__base a:focus-visible { color: var(--signal); border-bottom-color: var(--signal); }

/* ── Page « Le contenu de l'accompagnement » ─────────────────────── */
.page-lede {
  margin: 0; max-width: 48ch;
  font-size: var(--t-voice); font-weight: 500; line-height: 1.35;
  color: var(--ink-dim);
}
.section__action { margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; }

/* Les huit bénéfices : cellules d'un tableau, séparées par des filets.
   Ni carte, ni fond, ni ombre — le système n'en comporte aucun. */
.benefices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.benefice { padding: clamp(1.4rem, 2vw, 2rem) clamp(1.1rem, 1.6vw, 1.7rem); }
.benefice:not(:nth-child(4n + 1)) { border-left: 1px solid var(--rule); }
.benefice:nth-child(n + 5) { border-top: 1px solid var(--rule); }
.benefice h3 {
  margin: 0 0 0.7rem;
  font-size: var(--t-body); font-weight: 700; line-height: 1.3;
  letter-spacing: 0.01em;
}
.benefice p { margin: 0; color: var(--ink-dim); line-height: 1.5; }

/* Les regles de la FAQ vivent plus bas : deroules natifs. */

.piece--large { max-width: 62rem; }

@media (max-width: 1100px) {
  .benefices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefice:not(:nth-child(4n + 1)) { border-left: 0; }
  .benefice:not(:nth-child(2n + 1)) { border-left: 1px solid var(--rule); }
  .benefice:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .benefices { grid-template-columns: 1fr; }
  .benefice { border-left: 0 !important; }
  .benefice:not(:first-child) { border-top: 1px solid var(--rule); }
}

/* ── Variation de fond entre rubriques ──────────────────────────
   Le vert le plus sombre marque les rubriques denses — grilles et
   preuves — et les distingue des rubriques de discours. */
.section--sombre { background: var(--green-deeper); }

/* ── Les quatre parties, sur une seule ligne ─────────────────── */
.parties {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.partie { padding: clamp(1.5rem, 2.2vw, 2.2rem) clamp(1.1rem, 1.6vw, 1.8rem); }
.partie:not(:first-child) { border-left: 1px solid var(--rule); }
.partie__index {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 900; line-height: 0.8;
  letter-spacing: -0.04em; color: var(--signal);
}
.partie__titre {
  margin: 0 0 0.7rem;
  font-size: var(--t-body); font-weight: 700; line-height: 1.3;
}
.partie__chapeau {
  margin: 0 0 1.1rem; color: var(--ink-dim); line-height: 1.5;
  font-size: calc(var(--t-body) * 0.94);
}
.partie__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink-faint); }
.partie__liste li {
  padding: 0.6rem 0; border-bottom: 1px solid var(--ink-faint);
  line-height: 1.4; font-size: calc(var(--t-body) * 0.94);
}
.partie__liste li:last-child { border-bottom: 0; }

/* ── Vidéo hébergée chez Vimeo ──────────────────────────────────
   dnt=1 demande à Vimeo de ne pas pister le visiteur. Le cadre reste
   un tiers : à mentionner dans la politique de confidentialité. */
.video {
  position: relative;
  max-width: 62rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  background: var(--green-dark);
}
/* Affiche de repli, placee SOUS le cadre Vimeo : si l'iframe se charge,
   elle la recouvre ; si un bloqueur, un proxy d'entreprise ou un outil de
   consentement l'empeche — le cas courant chez un acheteur RSE — le
   visiteur voit l'affiche au lieu d'un rectangle vide.
   C'est une IMAGE et non un lien : un lien reste focalisable meme couvert,
   et le clavier tomberait sur une cible invisible. */
.video__affiche {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.video iframe {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border: 0; display: block;
}

/* ── Questions fréquentes, en déroulés natifs ───────────────────
   <details> : fonctionne sans JavaScript, accessible au clavier.
   Le marqueur est un carré — aucune courbe dans ce système. */
.faq { border-top: 1px solid var(--rule); }
.qr { border-bottom: 1px solid var(--rule); }
.qr summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: clamp(1.1rem, 1.8vw, 1.6rem) 0;
  cursor: pointer; list-style: none;
  font-weight: 700; line-height: 1.4;
  transition: color .18s linear;
}
.qr summary::-webkit-details-marker { display: none; }
.qr summary::before {
  content: ''; flex: 0 0 auto;
  width: 13px; height: 13px; margin-top: 0.42em;
  background: var(--signal);
  clip-path: polygon(0 42%, 42% 42%, 42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%);
  transition: clip-path .18s linear;
}
.qr[open] summary::before {
  clip-path: polygon(0 42%, 100% 42%, 100% 58%, 0 58%);
}
.qr summary:hover, .qr summary:focus-visible { color: var(--signal); }
/* Poser `display: flex` sur un <summary> empeche le navigateur de masquer
   le contenu quand le detail est ferme. On le masque donc explicitement. */
.qr:not([open]) .qr__reponse { display: none; }
.qr__reponse { padding: 0 0 clamp(1.2rem, 2vw, 1.8rem) calc(13px + 1rem); }
.qr__reponse p { margin: 0; color: var(--ink-dim); line-height: 1.6; max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  .qr summary, .qr summary::before { transition: none; }
}
@media (max-width: 1100px) {
  .parties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partie:not(:first-child) { border-left: 0; }
  .partie:not(:nth-child(2n + 1)) { border-left: 1px solid var(--rule); }
  .partie:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .parties { grid-template-columns: 1fr; }
  .partie { border-left: 0 !important; }
  .partie:not(:first-child) { border-top: 1px solid var(--rule); }
}

/* La vidéo est centrée dans sa rubrique. */
.video { margin-inline: auto; }

/* Une rubrique qui prolonge la précédente : pas de filet de séparation,
   et un espacement réduit pour qu'elle se lise comme sa suite. */
.section--suite {
  border-top: 0;
  padding-top: clamp(1rem, 2vw, 2rem);
}

/* Clôture sur fond vert — accueil uniquement. */
.closing--vert { background: var(--green); }

/* ── Page Contact ───────────────────────────────────────────────
   Les champs sont des lignes à remplir, pas des boîtes de logiciel :
   le système ne comporte aucun cadre arrondi. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: clamp(2rem, 3.5vw, 3rem);
}

.contact__aside p { margin: 0 0 0.9rem; color: var(--ink-dim); line-height: 1.5; }
.contact__adresse {
  display: inline-block;
  font-size: var(--t-lead); font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--signal); padding-bottom: 2px;
}
.contact__adresse:hover, .contact__adresse:focus-visible { color: var(--signal); }

.champ { margin-bottom: clamp(1.4rem, 2.2vw, 1.9rem); }
.champ label {
  display: block; margin-bottom: 0.55rem;
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.champ__note { font-weight: 500; letter-spacing: 0.08em; }
.champ input, .champ textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.55rem 0;
  color: var(--ink);
  font-family: inherit; font-size: var(--t-body); font-weight: 500;
  line-height: 1.5;
  transition: border-color .18s linear;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:hover, .champ textarea:hover { border-bottom-color: var(--ink-dim); }
.champ input:focus, .champ textarea:focus {
  border-bottom-color: var(--ink); border-bottom-width: 2px;
  padding-bottom: calc(0.55rem - 1px);
}
/* Erreur : `:user-invalid` ne se declenche qu'apres saisie ou envoi.
   L'ancienne regle `:invalid:not(:placeholder-shown)` ne pouvait jamais
   se fermer — aucun champ ne porte d'attribut placeholder — si bien que
   les champs requis s'affichaient en erreur sur un formulaire vierge.
   L'erreur est en jaune signal, la mise au point en encre : les deux
   etats ne se confondent plus. */
.champ input:user-invalid, .champ textarea:user-invalid {
  border-bottom-color: var(--signal); border-bottom-width: 2px;
  padding-bottom: calc(0.55rem - 1px);
}
.champ:has(:user-invalid) label { color: var(--signal); }

.mention-rgpd {
  margin: 1.6rem 0 0; max-width: var(--measure);
  font-size: calc(var(--t-body) * 0.92); line-height: 1.55; color: var(--ink-dim);
}
.mention-rgpd a { color: var(--ink); text-underline-offset: 0.22em; }

@media (prefers-reduced-motion: reduce) {
  .champ input, .champ textarea { transition: none; }
}
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
}

/* ── Pages légales ──────────────────────────────────────────────
   Un texte de référence : une mesure de lecture confortable, une
   hiérarchie nette, aucune mise en scène. */
.legal { max-width: 74ch; }
.legal__chapeau {
  margin: 0 0 1.6rem;
  font-size: var(--t-lead); line-height: 1.5; color: var(--ink);
}
.legal p { margin: 0 0 1.15rem; color: var(--ink-dim); line-height: 1.65; }
.legal h2 {
  margin: clamp(2.4rem, 4vw, 3.4rem) 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-h3); font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em;
}
.legal h3 {
  margin: 1.9rem 0 0.7rem;
  font-size: var(--t-body); font-weight: 700; letter-spacing: 0.01em;
}
.legal__num { display: block; color: var(--signal); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
.legal ul, .legal ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.legal li { margin-bottom: 0.6rem; color: var(--ink-dim); line-height: 1.6; }
.legal li::marker { color: var(--signal); }
.legal ul ul { margin: 0.6rem 0 0; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal a { color: var(--ink); text-underline-offset: 0.22em; }
.legal__maj {
  margin-top: clamp(2.4rem, 4vw, 3.4rem); padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* Fiche d'informations des mentions légales. */
.legal__fiche { margin: 0 0 1.5rem; border-top: 1px solid var(--rule); }
.legal__fiche > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ink-faint);
}
.legal__fiche dt {
  font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.legal__fiche dd { margin: 0; font-weight: 700; }
@media (max-width: 620px) {
  .legal__fiche > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Titres courts qui doivent tenir sur une seule ligne : la mesure de
   22 caractères les coupait en deux sans raison. Ils se replient
   naturellement sous 700 px, où une ligne unique ne rentre plus. */
/* Deux classes, pour passer devant `.page-head .claim` qui en compte
   deux aussi : a specificite egale, c'est l'ordre qui tranche. */
.claim.claim--large { max-width: none; }

/* Le lien direct vers la video vit sous le cadre : utile que l'iframe se
   soit chargee ou non, et jamais masque derriere elle. */
.video__lien { margin: 0.9rem 0 0; max-width: 62rem; }
.video__lien a {
  color: var(--ink); text-decoration: none;
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 2px solid var(--signal); padding-bottom: 2px;
}
.video__lien a:hover, .video__lien a:focus-visible { color: var(--signal); }