/* ==========================================================================
   BANANCO — site web
   Palette imposée :
     Vert principal  #2E7D32  → boutons, accents
     Vert foncé      #1B4332  → logo, titres, bandes sombres
     Vert très clair #E8F5E9  → fond
   Typographie : Cormorant Garamond (titres) + Jost (texte et libellés).
   Registre : éditorial, aéré, contrasté — pas de mono, pas de gras lourd.
   ========================================================================== */

:root {
  --green:        #2E7D32;
  --green-dark:   #1B4332;
  --green-light:  #E8F5E9;

  --white:        #FFFFFF;
  --wash:         #F3F9F4;
  --cream:        #FBFCF9;

  --dark-90: rgba(27, 67, 50, .90);
  --dark-70: rgba(27, 67, 50, .70);
  --dark-48: rgba(27, 67, 50, .48);
  --dark-18: rgba(27, 67, 50, .18);
  --dark-10: rgba(27, 67, 50, .10);

  --light-88: rgba(232, 245, 233, .88);
  --light-66: rgba(232, 245, 233, .66);
  --light-26: rgba(232, 245, 233, .26);
  --light-14: rgba(232, 245, 233, .14);

  --radius:    14px;   /* photos et cartes */
  --radius-sm:  8px;   /* tuiles de logo, petits blocs */

  --shell: 1220px;
  --narrow: 860px;
  --gut: clamp(22px, 5vw, 72px);

  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(.7rem, .66rem + .16vw, .78rem);
  --step-0:  clamp(1rem, .96rem + .22vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.7rem, 1.9rem + 3.6vw, 4.9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--green-light);
  color: var(--dark-90);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--green); color: var(--white); }

:focus-visible { outline: 1.5px solid var(--green); outline-offset: 4px; }

/* ------------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.008em;
  color: var(--green-dark);
  margin: 0;
  text-wrap: balance;
}

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

strong { color: var(--green-dark); font-weight: 500; }
em { font-family: var(--display); font-style: italic; font-size: 1.06em; }

.u-lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
  color: var(--dark-70);
}
.u-measure { max-width: 66ch; }
.u-narrow { max-width: var(--narrow); }

/* libellé : petites capitales très espacées, la signature du registre */
.label {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 22px;
}
.label--rule { display: flex; align-items: center; gap: 16px; }
.label--rule::after { content: ""; flex: 1; height: 1px; background: var(--dark-18); }

.h-display { font-size: var(--step-3); margin-bottom: 24px; }
.h-major { font-size: var(--step-2); margin-bottom: 16px; }

/* filet fin : le trait de séparation du registre éditorial */
.hairline { height: 1px; background: var(--dark-18); border: 0; margin: 0; }
.band--dark .hairline { background: var(--light-26); }

/* ----------------------------------------------------------------- layout */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--narrow { max-width: calc(var(--narrow) + 2 * var(--gut)); }

.band { padding-block: clamp(72px, 10vw, 150px); }
.band--tight { padding-block: clamp(48px, 6vw, 84px); }
.band--white { background: var(--white); }
.band--wash { background: var(--wash); }
.band--cream { background: var(--cream); }

.band--dark { background: var(--green-dark); color: var(--light-88); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--green-light); }
.band--dark strong { color: var(--green-light); }
.band--dark .u-lede { color: var(--light-88); }
.band--dark .label { color: var(--green-light); }
.band--dark .label--rule::after { background: var(--light-26); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.stack > * + * { margin-top: clamp(36px, 4.5vw, 64px); }

/* ----------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(232, 245, 233, .94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dark-10);
}
.site-head__in { display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); height: 84px; }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
.brand img { height: 42px; width: auto; }
.brand__text { display: grid; gap: 2px; }
.brand__name {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--green-dark);
}
.brand__sub {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dark-48);
  line-height: 1;
}
@media (max-width: 560px) { .brand__sub { display: none; } .brand img { height: 34px; } }

.nav { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.nav a {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dark-70);
  padding: 8px 0;
  position: relative;
  transition: color .25s;
  white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover { color: var(--green-dark); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--green-dark); }
@media (max-width: 940px) { .nav { display: none; } }

.nav-toggle {
  display: none; background: none;
  border: 1px solid var(--dark-18);
  border-radius: 5px;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--green-dark); cursor: pointer;
}
@media (max-width: 940px) { .nav-toggle { display: block; } }

.nav-drawer { display: none; border-top: 1px solid var(--dark-10); background: var(--white); }
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer a {
  display: block; padding: 18px var(--gut);
  text-decoration: none;
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-dark);
  border-bottom: 1px solid var(--dark-10);
}

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 34px;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
  border-radius: 5px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn--line { background: transparent; color: var(--green-dark); border-color: var(--dark-18); }
.btn--line:hover { background: var(--green-dark); color: var(--green-light); border-color: var(--green-dark); }

.band--dark .btn { background: var(--green); border-color: var(--green); color: var(--white); }
.band--dark .btn:hover { background: var(--green-light); border-color: var(--green-light); color: var(--green-dark); }
.band--dark .btn--line { background: transparent; color: var(--green-light); border-color: var(--light-26); }
.band--dark .btn--line:hover { background: var(--green-light); color: var(--green-dark); border-color: var(--green-light); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* lien texte fin */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--green); text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--dark-18);
  transition: color .25s, border-color .25s;
}
.tlink:hover { color: var(--green-dark); border-color: var(--green); }
.band--dark .tlink { color: var(--green-light); border-color: var(--light-26); }
.band--dark .tlink:hover { border-color: var(--green-light); }

/* -------------------------------------------------------------------- hero */

.hero { border-bottom: 1px solid var(--dark-10); padding-block: clamp(64px, 9vw, 140px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__title {
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-bottom: 30px;
}
.hero__title em { font-style: italic; font-size: 1em; color: var(--green); }

/* --------------------------------------------------------------- portique */
/* grand bloc image + titre superposé, pour les ouvertures de page          */

.portico { position: relative; overflow: hidden; border-bottom: 1px solid var(--dark-10); }
.portico__pic {
  width: 100%;
  height: clamp(340px, 56vw, 660px);
  object-fit: cover;
}
.portico__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,67,50,.28) 0%, rgba(27,67,50,.62) 60%, rgba(27,67,50,.84) 100%);
}
.portico__in {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(30px, 5vw, 66px);
}
.portico__in .label { color: var(--green-light); }
.portico__title {
  font-size: var(--step-3);
  font-weight: 300;
  color: var(--green-light);
  max-width: 20ch;
  margin: 0;
}

/* ----------------------------------------------------------------- images */

.fig { margin: 0; }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--dark-10); border-radius: var(--radius); }
.fig figcaption {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dark-48);
}
.band--dark .fig figcaption { color: var(--light-66); }

.hero__media img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
@media (max-width: 940px) { .hero__media img { aspect-ratio: 16 / 10; } }

/* Deux bandes qui se suivent additionnaient leur marge verticale (jusqu'à
   270 px de vide). La seconde réduit donc la sienne. */
.band + .band { padding-top: clamp(48px, 6vw, 96px); }

/* Une bande adjacente à une bande-image réduit sa marge de ce côté :
   sans cela les deux s'additionnent et laissent ~270 px de vide. */
.band:has(+ .imgband) { padding-bottom: clamp(44px, 5vw, 80px); }
.imgband + .band { padding-top: clamp(44px, 5vw, 80px); }

/* bande pleine largeur */
.imgband { position: relative; overflow: hidden; }
.imgband__pic { width: 100%; height: clamp(280px, 40vw, 520px); object-fit: cover; object-position: center 42%; display: block; }
.imgband--tall .imgband__pic { height: clamp(360px, 50vw, 680px); object-position: center 38%; }
.imgband__caption {
  background: var(--green-dark);
  color: var(--light-66);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px var(--gut);
}

/* -------------------------------------------------------------- chiffres */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.figure { border-top: 1px solid var(--dark-18); padding-top: 22px; }
.band--dark .figure { border-top-color: var(--light-26); }
.figure__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--green-dark);
}
.band--dark .figure__n { color: var(--green-light); }
.figure__k {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark-48);
  line-height: 1.7;
}
.band--dark .figure__k { color: var(--light-66); }

/* ------------------------------------------------------------------ cartes */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(24px, 3vw, 44px); }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; gap: 14px; }
.card__rule { height: 1px; background: var(--dark-18); }
.band--dark .card__rule { background: var(--light-26); }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--dark-70); margin: 0; }
.band--dark .card p { color: var(--light-88); }

/* --------------------------------------------------- catalogue de matières
   Grille 12 colonnes : le produit phare occupe toute la largeur avec une
   image en paysage, les quatre autres suivent en rang de quatre. Le cadre
   fin et le fond crème sous chaque image harmonisent des photos aux fonds
   très différents (studio, laboratoire, atelier).                          */

.matrix { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px); }

.mtile { text-decoration: none; display: grid; gap: 20px; align-content: start; }
.mtile__pic {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--dark-10);
  border-radius: var(--radius);
  /* force une couche de composition : sans ça le zoom au survol
     laisse déborder les angles arrondis sur certains navigateurs */
  transform: translateZ(0);
}
.mtile__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* légère désaturation au repos : harmonise des photos aux dominantes
     très différentes, la couleur revient au survol */
  filter: saturate(.88);
  transition: transform 1s cubic-bezier(.2,.7,.3,1), filter .5s;
}
.mtile:hover .mtile__pic img,
.mtile:focus-visible .mtile__pic img { transform: scale(1.035); filter: saturate(1); }

.mtile__no {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 400;
  line-height: 1; color: var(--green);
  margin-bottom: 12px;
}
.mtile h3 { font-size: var(--step-1); margin-bottom: 10px; }
.mtile p { color: var(--dark-70); margin: 0; font-size: .95rem; }
.mtile__more {
  margin-top: 14px;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase; color: var(--green);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s, transform .35s;
}
.mtile:hover .mtile__more, .mtile:focus-visible .mtile__more { opacity: 1; transform: none; }

/* produit phare */
.mtile--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mtile--lead .mtile__pic { aspect-ratio: 16 / 10; }
.mtile--lead h3 { font-size: var(--step-2); }
.mtile--lead p { font-size: 1rem; }
@media (max-width: 900px) { .mtile--lead { grid-template-columns: 1fr; } }

/* les quatre suivants */
.mtile--item { grid-column: span 3; }
.mtile--item .mtile__pic { aspect-ratio: 3 / 4; }
@media (max-width: 1000px) { .mtile--item { grid-column: span 6; } }
@media (max-width: 600px) { .mtile--item { grid-column: 1 / -1; } }

.matrix__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--dark-18);
  padding-top: 26px;
}
.matrix__foot p { margin: 0; color: var(--dark-70); max-width: 52ch; }

/* --------------------------------------------------------- logos partenaires
   Les fichiers de assets/logos/ sont normalisés : même toile 760x260 et
   surface optique constante, marges comprises. Le CSS n'a donc plus qu'à
   poser une tuile blanche — aucun réglage au cas par cas.                  */

.partner__logo {
  width: 100%;
  aspect-ratio: 760 / 260;
  background: var(--white);
  border: 1px solid var(--dark-10);
  border-radius: var(--radius-sm);
  display: block;
  overflow: hidden;
}
.partner__logo img { width: 100%; height: 100%; object-fit: contain; }
.band--dark .partner__logo { border-color: transparent; }

/* bandeau de logos */
.logostrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
}
.logostrip .partner__logo { border-color: var(--dark-10); }
.band--dark .logostrip .partner__logo { border-color: transparent; }

/* --------------------------------------------------------------- archive
   Diaporama : un grand visuel à la fois, que l'on fait défiler vers la
   droite, avec une bande de miniatures dessous — la structure de l'archive
   visuelle de l'ancien site.

   Deux règles à ne pas casser :
   - 'proximity' et non 'mandatory' : l'accrochage strict annule les
     défilements programmés par les boutons et les miniatures ;
   - on vise l'offsetLeft réel d'une diapositive, jamais un multiple calculé.
                                                                          */

.archive__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(36px, 4.6vw, 66px); }
.archive__head .label { margin-bottom: 18px; }
.archive__head p { margin: 0; }

/* la scène */
.archive__stage {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.archive__stage::-webkit-scrollbar { display: none; }

.archive__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.archive__frame {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(232, 245, 233, .05);
  border: 1px solid var(--light-14);
}
.band--dark .archive__frame { background: rgba(232, 245, 233, .05); }
/* 'contain' et non 'cover' : l'archive mélange des formats portrait et
   paysage, un recadrage les mutilerait. */
.archive__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.archive__slide figcaption {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--light-66);
  text-align: center;
}

/* la barre de commande */
.archive__bar {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(22px, 2.6vw, 34px);
}
.archive__count {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .26em;
  color: var(--light-66);
  min-width: 6.5em;
  text-align: center;
}

/* les miniatures */
.archive__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: clamp(24px, 3vw, 40px);
  padding-bottom: 4px;
}
.archive__thumbs::-webkit-scrollbar { display: none; }

.archive__thumb {
  flex: 0 0 clamp(76px, 8.4vw, 116px);
  aspect-ratio: 4 / 3;
  padding: 0;
  background: rgba(232, 245, 233, .06);
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: .42;
  transition: opacity .3s, border-color .3s;
}
.archive__thumb img { width: 100%; height: 100%; object-fit: cover; }
.archive__thumb:hover { opacity: .78; }
.archive__thumb[aria-current="true"] { opacity: 1; border-color: var(--green-light); }

@media (prefers-reduced-motion: reduce) { .archive__stage { scroll-behavior: auto; } }

/* boutons de navigation, partagés */
.rail-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--dark-18);
  border-radius: 50%;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 1rem; line-height: 1;
  transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.rail-btn:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); color: var(--green-light); }
.rail-btn:disabled { opacity: .25; cursor: default; }
.band--dark .rail-btn { border-color: var(--light-26); color: var(--green-light); }
.band--dark .rail-btn:hover:not(:disabled) { background: var(--green-light); color: var(--green-dark); border-color: var(--green-light); }

/* -------------------------------------------------------------- portrait */

.person { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 680px) { .person { grid-template-columns: 1fr; } }
.person__photo { margin: 0; overflow: hidden; }
.person__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 18%; }

/* ------------------------------------------------------------- dirigeants */
/* deux fiches côte à côte, comme sur le site actuel : portrait rond centré,
   nom, fonction, biographie, puis la citation en pied de carte.            */

.leaders { display: grid; gap: clamp(32px, 4vw, 60px); }
@media (min-width: 860px) { .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.leader {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--dark-10);
  border-radius: var(--radius);
  padding: clamp(30px, 4vw, 52px);
}
.band--dark .leader { background: rgba(232,245,233,.05); border-color: var(--light-26); }
.band--wash .leader, .band--white .leader { background: var(--cream); }

.leader__head { text-align: center; margin-bottom: 28px; }
.leader__photo {
  width: 148px; height: 148px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--dark-18);
}
.leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.leader__name { font-size: var(--step-2); margin-bottom: 10px; }
.leader__role {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--green);
  margin: 0;
}
.leader__bio { color: var(--dark-70); font-size: .97rem; }
.leader__bio p { margin-bottom: 1em; }
.band--dark .leader__bio { color: var(--light-88); }

.leader__quote {
  margin: auto 0 0; padding-top: 26px;
  border-top: 1px solid var(--dark-18);
}
.leader__quote p {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: var(--step-1); line-height: 1.4;
  color: var(--green-dark); margin: 0;
  text-align: center;
}
.band--dark .leader__quote { border-top-color: var(--light-26); }
.band--dark .leader__quote p { color: var(--green-light); }

/* --------------------------------------------------------------- produits */

.product { border-top: 1px solid var(--dark-18); padding-block: clamp(48px, 6vw, 96px); }
/* La bande fournit déjà la marge extérieure : le premier et le dernier
   produit n'y ajoutent pas la leur, sinon les deux s'additionnent. */
.product:first-of-type { padding-top: clamp(26px, 3vw, 44px); }
.product:last-of-type { padding-bottom: 0; }
.product__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(30px, 5vw, 72px); align-items: start;
  margin-bottom: clamp(30px, 4vw, 56px);
}
@media (max-width: 900px) { .product__grid { grid-template-columns: 1fr; } }
.product__no {
  display: block;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase; color: var(--green);
  margin-bottom: 16px;
}
.product__title { font-size: var(--step-3); margin-bottom: 22px; }
.product__photo { margin: 0; overflow: hidden; border-radius: var(--radius); transform: translateZ(0); }
.product__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product__photo--tall img { aspect-ratio: 3 / 4; }

.subhead {
  font-family: var(--sans);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--green-dark);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dark-18);
  margin: 0 0 22px;
}
.band--dark .subhead { color: var(--green-light); border-bottom-color: var(--light-26); }

.speclist { list-style: none; margin: 0; padding: 0; }
.speclist li {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dark-10);
  color: var(--dark-70);
  font-size: .95rem;
}
.speclist li strong {
  flex: 0 0 auto;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-dark);
  min-width: 11rem;
  padding-top: 3px;
}

.appgroup { margin-bottom: 28px; }
.appgroup:last-child { margin-bottom: 0; }
.appgroup h4 {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.applist { list-style: none; margin: 0; padding: 0; }
.applist li { position: relative; padding: 5px 0 5px 20px; color: var(--dark-70); font-size: .95rem; }
.applist li::before { content: ""; position: absolute; left: 0; top: 16px; width: 9px; height: 1px; background: var(--green); }
.band--dark .applist li { color: var(--light-88); }
.band--dark .applist li::before { background: var(--green-light); }

.whylist { list-style: none; margin: 0; padding: 0; }
.whylist li { padding: 18px 0; border-bottom: 1px solid var(--dark-10); color: var(--dark-70); }
.whylist li:first-child { border-top: 1px solid var(--dark-10); }
.whylist strong {
  display: block;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------- timeline */

.tl { border-top: 1px solid var(--dark-18); }
.tl__row {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(34px, 4.4vw, 60px);
  border-bottom: 1px solid var(--dark-18);
}
@media (max-width: 800px) { .tl__row { grid-template-columns: 1fr; gap: 16px; } }
.tl__year {
  font-family: var(--display); font-size: var(--step-2); font-weight: 300;
  line-height: 1; color: var(--green-dark);
}
.tl__year span {
  display: block; margin-top: 12px;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase; color: var(--green);
}
.tl__list { list-style: none; margin: 0; padding: 0; }
.tl__list li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--dark-10); color: var(--dark-70); }
.tl__list li:first-child { border-top: 0; }
.tl__list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 9px; height: 1px; background: var(--green); }
.tl__list li:first-child::before { top: 11px; }
.band--dark .tl, .band--dark .tl__row { border-color: var(--light-26); }
.band--dark .tl__list li { color: var(--light-88); border-top-color: var(--light-14); }
.band--dark .tl__list li::before { background: var(--green-light); }
.band--dark .tl__year span { color: var(--green-light); }

/* --------------------------------------------------------------- métriques */

.metrics { display: grid; gap: clamp(28px, 3.4vw, 52px); }
@media (min-width: 900px) { .metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric { border-top: 1px solid var(--dark-18); padding-top: 22px; }
.band--dark .metric { border-top-color: var(--light-26); }
.metric h3 {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 14px;
}
.band--dark .metric h3 { color: var(--green-light); }
.metric p { color: var(--dark-70); margin: 0; }
.band--dark .metric p { color: var(--light-88); }
@media (min-width: 900px) { .metric--wide { grid-column: 1 / -1; } }

/* --------------------------------------------------------------- citation */

.quotebox { margin: 0; padding: 0; max-width: 34ch; }
.quotebox p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.28;
  color: var(--green-dark);
  margin-bottom: 22px;
}
.band--dark .quotebox p { color: var(--green-light); }
.quotebox footer {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase; color: var(--dark-48);
}
.band--dark .quotebox footer { color: var(--light-66); }

/* ---------------------------------------------------------------- tableau */

.table-wrap { overflow-x: auto; }
.datatable { width: 100%; border-collapse: collapse; min-width: 580px; }
.datatable th, .datatable td {
  text-align: left; padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--dark-10);
  font-size: .95rem; font-weight: 300;
}
.datatable thead th {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--green-dark);
  border-bottom: 1px solid var(--dark-18);
}
.datatable tbody th { font-weight: 400; color: var(--green-dark); }
.datatable td { color: var(--dark-70); }
.datatable td.is-goal { color: var(--green); font-weight: 400; }

/* -------------------------------------------------------------------- SDG */

.sdg { display: grid; gap: clamp(28px, 3.4vw, 52px); }
@media (min-width: 900px) { .sdg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sdg__item { border-top: 1px solid var(--dark-18); padding-top: 22px; }
@media (min-width: 900px) { .sdg__item--wide { grid-column: 1 / -1; } }
.sdg__no {
  display: block;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--green);
  margin-bottom: 10px;
}
.sdg__item h3 { font-size: var(--step-1); margin-bottom: 12px; }
.sdg__item p { color: var(--dark-70); margin: 0; }

/* ---------------------------------------------- schéma du procédé (cascade) */

.cascade { position: relative; max-width: 470px; margin-inline: auto; width: 100%; }
.cascade__svg { width: 100%; height: auto; }
.cascade__ring { cursor: pointer; transition: opacity .3s; }
/* Le contour de focus d'un <g> SVG est tracé sur sa boîte englobante :
   sur un anneau circulaire, cela dessine un carré. On le supprime et on
   signale le focus clavier en épaississant le trait du cercle lui-même,
   qui épouse la forme. */
.cascade__ring:focus,
.cascade__ring:focus-visible { outline: none; }
.cascade__ring circle { transition: stroke .2s, stroke-width .2s; }
.cascade__ring:focus-visible circle { stroke: var(--green-dark); stroke-width: 5; }
.band--dark .cascade__ring:focus-visible circle { stroke: var(--green-light); stroke-width: 5; }
.cascade[data-active] .cascade__ring { opacity: .42; }
.cascade[data-active] .cascade__ring[data-on] { opacity: 1; }
.cascade__mark { font-family: var(--display); font-size: 20px; font-weight: 400; pointer-events: none; }
/* La lecture se place AU-DESSUS du cercle et reste un détail bref :
   hauteur fixe pour que le schéma ne saute pas d'une étape à l'autre. */
.cascade__readout {
  min-height: 84px;
  margin-bottom: 22px;
  text-align: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cascade__stage {
  display: block;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--green);
  margin-bottom: 8px;
}
.band--dark .cascade__stage { color: var(--green-light); }
.cascade__readout h3 { font-size: var(--step-1); margin-bottom: 6px; }
.cascade__readout p { color: var(--dark-70); margin: 0; font-size: .92rem; }
.band--dark .cascade__readout p { color: var(--light-66); }
.cascade__hint {
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dark-48);
}

/* -------------------------------------------------------------- formulaire */

.form { display: grid; gap: 26px; }
.field { display: grid; gap: 10px; }
.field label {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green-dark);
}
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  color: var(--dark-90);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--dark-18);
  border-radius: 0;
  padding: 12px 2px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--green);
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 620px) { .field-pair { grid-template-columns: 1fr; } }
.form__note { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .04em; color: var(--dark-48); margin: 0; }

/* ------------------------------------------------------------------ footer */

.site-foot { background: var(--green-dark); color: var(--light-66); padding-block: clamp(60px, 7vw, 100px) 32px; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(32px, 4.5vw, 68px);
}
.foot-logo { max-width: 210px; margin-bottom: 20px; }
.foot-grid h4 {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--green-light); margin-bottom: 20px;
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.foot-list a, .foot-list li {
  font-family: var(--sans); font-size: .82rem; font-weight: 300;
  letter-spacing: .04em; color: var(--light-66);
  text-decoration: none; line-height: 1.7;
}
.foot-list a:hover { color: var(--green-light); }
.foot-bottom {
  margin-top: clamp(44px, 5.5vw, 72px); padding-top: 26px;
  border-top: 1px solid var(--light-26);
  display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: space-between;
  font-family: var(--sans); font-size: .68rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(232, 245, 233, .48);
}

/* --------------------------------------------------------------- reveal fx */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

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