/* ==========================================================================
   GAYA — design system
   Palette et typographie reprises du site 2021 (gaya.marketing), modernisées.
   Aucune dépendance externe : la police est servie depuis le domaine.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marque (reprise de l'existant) */
  --green: #6cb540;
  --green-dot: #6bb54a;
  --green-dark: #4c9520;
  --blue: #1a4c6f;
  --ink-logo: #1d1d1b;
  --darkGray: #2c2c2c;
  --lightGray: #f3f3f3;

  /* Étendu pour la refonte */
  --blue-900: #0d2333;
  --blue-800: #123a56;
  --blue-100: #e9f0f5;
  --ink: #10151a;
  --body: #33414d;
  --muted: #64748b;
  --paper: #ffffff;
  --bg: #f7f9fa;
  --border: rgba(26, 76, 111, 0.14);
  --border-strong: rgba(26, 76, 111, 0.28);
  --error: #c0392b;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(13, 35, 51, 0.06);
  --shadow: 0 1px 2px rgba(13, 35, 51, 0.06), 0 10px 28px rgba(13, 35, 51, 0.08);

  --wrap: 1140px;
  --gutter: clamp(18px, 4vw, 40px);
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-800); }
button { font: inherit; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;      /* évite les titres à un mot orphelin sur la dernière ligne */
}
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(19px, 2vw, 23px); }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 600; color: var(--ink); }
/* Identifiants techniques cités en clair (clés de traceurs, noms de fichiers). */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--blue-100);
  color: var(--blue-800);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- layout ----- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--bg); }
.section--blue { background: var(--blue-900); color: #dbe6ee; }
.section--blue h2, .section--blue h3 { color: #fff; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.75em;
}
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--body); }
.section--blue .lead { color: #b9cddc; }

/* ------------------------------------------------------------ boutons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease-in-out, background 0.2s ease-in-out,
              color 0.2s ease-in-out, border-color 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--blue); background: var(--blue-100); }
.btn--onblue { background: #fff; color: var(--blue-900); }
.btn--onblue:hover { color: var(--blue-900); filter: brightness(0.92); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------- header ----- */
/* Les ancres vers une rubrique doivent s'arrêter sous l'en-tête collant, pas derrière lui. */
[id] {
  scroll-margin-top: 92px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  /* Les liens sont soulignés par défaut sur ce site : la signature porte déjà son trait. */
  text-decoration: none;
}

/* Signature : GAYA en capitales, dans la police du site, souligné d'un trait vert.
   Le trait est un vrai soulignement : sa position se mesure depuis la ligne de base, alors
   qu'une bordure ou un fond se mesurent depuis le bas de la boîte — dont la place réservée
   au jambage ne dit rien de la hauteur réelle des capitales. */
.brand-word {
  display: inline-block;
  /* Calée sur la hauteur d'un bouton du site (.btn--sm : 40 px), en-tête compris. */
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Sous-marqueur de la signature : « Climate », aligné sur la ligne de base de GAYA et plus
   petit. Le trait vert de la signature reste porté par GAYA seul, jamais par le sous-marqueur :
   un soulignement étendu à un mot de longueur variable se cale sur une ligne de base différente. */
.brand-sub {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--blue);
}

.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transition: right 0.2s ease-in-out;
}
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }
.nav-link.is-active { font-weight: 600; }

.nav-mobile { display: none; }
.header-cta { flex-shrink: 0; }

/* --------------------------------------------------------------- hero ----- */
.hero {
  position: relative;
  background: var(--blue-900);
  color: #e2ecf3;
  overflow: hidden;
  padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 88px);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle at 50% 50%, rgba(108, 181, 64, 0.16), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 880px; }
.hero h1 { color: #fff; margin-bottom: 0.35em; }
.hero h1 em {
  font-style: normal;
  color: var(--green);
}
.hero-sub {
  font-size: clamp(18px, 1.9vw, 22px);
  color: #b9cddc;
  max-width: 720px;
  margin-bottom: 1.8em;
}
.hero-sub strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------- bandeau preuves */
.proof {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.proof-list li { display: inline-flex; align-items: center; gap: 8px; }
.proof-list svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; }
.proof-list strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- cartes --- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Deux colonnes garanties : en auto-fit, quatre cartes se rangent sur trois colonnes dès que la
   largeur le permet (1080 px de contenu / 320 px = 3), et la quatrième reste seule sur sa ligne. */
.grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .grid--2x2 { grid-template-columns: 1fr; }
}
/* ------------------------------------------ tableau comparatif des parcours --- */
/* Le seul tableau du site : les deux parcours ligne à ligne, sur les critères qui les
   distinguent vraiment. Il se lit d'un coup d'œil, ce qu'une liste de cartes ne permet pas.
   Sur un écran étroit il défile horizontalement plutôt que d'écraser ses colonnes. */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.compare caption {
  padding-bottom: 14px;
  text-align: left;
  color: var(--muted);
  font-size: 15px;
}
.compare th,
.compare td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--blue-800);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare tbody th {
  width: 24%;
  color: var(--ink);
  font-weight: 600;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- punchline --- */
/* La signature de l'offre : pleine largeur, sous les trois blocs. */
.punch {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--green-dark);
}

/* ------------------------------------------------- points de carte -------- */
.card-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.card-points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.card-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--green);
}

/* ------------------------------------------------ bandeau signaux --------- */
.signaux-band {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--border);
}
.signaux-band h3 {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .signaux-band { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--border-strong);
  color: inherit;
}
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue);
  margin-bottom: 16px;
}
.card-icon svg { width: 22px; height: 22px; }
/* Vignettes : même tuile, dessin plus large qu'une icône de trait. */
.card-icon--illu { background: var(--blue-100); }
.card-icon--illu svg { width: 30px; height: 30px; }
.card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--green-dark);
}
.card-more::after { content: '→'; transition: transform 0.2s ease-in-out; }
.card--link:hover .card-more::after { transform: translateX(3px); }

/* ------------------------------------------------------------ fondateurs --- */
.founder-photo {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.founder h3 { margin-bottom: 2px; }
.founder-role {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- étapes --- */
.steps { counter-reset: step; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps--v { grid-template-columns: 1fr; gap: 22px; }
.step { position: relative; padding-top: 8px; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.step h3 { font-size: 19px; }
.step p { font-size: 16px; margin-bottom: 0; }
.steps--v .step { padding-left: 52px; padding-top: 0; }
.steps--v .step-num { position: absolute; left: 0; top: 2px; margin-bottom: 0; }
/* Jalon daté : le même marqueur, élargi pour porter une année. */
.step-num--year { width: auto; padding: 0 12px; border-radius: 999px; letter-spacing: 0.02em; }

/* --------------------------------------------------------- bloc en avant --- */
.feature {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
}
.feature > aside {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 2.6vw, 32px);
}
.feature > aside h3 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- chips ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.chip {
  position: relative;
  display: inline-block;
  padding: 7px 13px 7px 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.chip::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 2px;      /* rappel du point carré du logo */
  background: var(--green);
}
/* Un chip qui mène à une page de signal s'annonce AU REPOS : le tactile n'a pas de survol, et
   un effet de survol seul laisserait le lien indécouvrable sur téléphone. Le chevron porte
   l'annonce, la transition ne fait que la confirmer. */
.chip--lien {
  padding-right: 32px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}
.chip--lien::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid var(--green);
  border-bottom: 1.5px solid var(--green);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.chip--lien:hover,
.chip--lien:focus-visible {
  border-color: var(--green);
  background: rgba(108, 181, 64, 0.09);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 76, 111, 0.12);
  text-decoration: none;
}
/* Le chevron avance vers la droite : translate appliqué APRÈS la rotation, dans le repère déjà
   tourné (3, 3) donne un déplacement horizontal de ~4 px, pas une montée. */
.chip--lien:hover::after,
.chip--lien:focus-visible::after {
  transform: rotate(-45deg) translate(3px, 3px);
}
.chip--lien:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* Lien vers le catalogue complet : même chip, légèrement accentué (fond et bordure verts). */
.chip--tout {
  border-color: rgba(108, 181, 64, 0.55);
  background: rgba(108, 181, 64, 0.1);
  font-weight: 600;
}
.chip--tout:hover,
.chip--tout:focus-visible {
  background: rgba(108, 181, 64, 0.18);
}
/* Le signal de la page où l'on se trouve : plus un lien, donc plus de chevron (voir app.js). */
.chip--courant {
  padding-right: 13px;
  cursor: default;
}
.chip--courant::after { display: none; }

/* ---------------------------------------------------------- livraisons ---- */
.delivery { display: grid; gap: 10px; margin-bottom: 22px; }
.delivery-item {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.delivery-item strong { font-size: 15px; }
.delivery-item span { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------------- schéma ----- */
.schema { margin: 0; }
.schema svg { width: 100%; height: auto; display: block; }
.schema figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
/* Deux variantes : horizontale (large) et verticale (étroit). Jamais l'une écrasée. */
.schema--narrow { display: none; }

@media (max-width: 760px) {
  .schema--wide { display: none; }
  .schema--narrow { display: block; }
  .schema figcaption { font-size: 15px; text-align: left; }
}

/* ------------------------------------------------- figures et galeries ----- */
/* Une image de contenu technique se pose avec sa légende : un lecteur d'écran n'a que l'attribut
   alt, et une capture sans légende ne dit pas ce qu'elle montre. */
.figure { margin: 0; }
.figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
}
/* Schéma vectoriel : pas de cadre, le dessin porte déjà ses limites. */
.figure--plain img { border: 0; box-shadow: none; background: none; }
.figure figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.figure--center { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Carrousel de captures. La première est mise en avant ; le survol d'une autre lui prend la
   place, image et légende ensemble.
   Aucun JavaScript et aucun clic : la mise en avant est un effet de largeur et de hauteur, le
   contenu (les trois captures et leurs légendes) reste entier dans le document, donc rien
   n'échappe à un lecteur d'écran ni à une page consultée sans souris.
   La figure réserve d'emblée la hauteur de la plus grande boîte : sans cette réserve, la rangée
   se tasserait pendant la transition, le temps que l'une cède et que l'autre grandisse. Les
   légendes sont ancrées en bas, donc alignées entre elles, et ne bougent pas.
   La cession de la première est conditionnée à la présence d'un survol ailleurs (`:has`), sinon
   elle se déclencherait aussi quand on la survole elle, et elle se rétracterait avant de se
   rouvrir. */
.carrousel {
  --vue-large: clamp(220px, 28vw, 370px);
  --vue-courte: clamp(140px, 18vw, 240px);
  --reserve-legende: 48px; /* deux lignes de légende et l'écart au-dessus */
  display: flex;
  gap: 14px;
}
.carrousel .ecran {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--vue-large) + var(--reserve-legende));
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: flex-grow 0.35s ease-out;
}
.carrousel .ecran--actif,
.carrousel .ecran:hover { flex-grow: 3.4; }
.carrousel .ecran--actif .vue,
.carrousel .ecran:hover .vue {
  height: var(--vue-large);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
/* La mise en avant par défaut cède tout entier : largeur, hauteur, cadre et légende. Ne céder
   que la largeur laisserait une vignette étroite mais haute, et les légendes se décaleraient. */
.carrousel:has(.ecran:not(.ecran--actif):hover) .ecran--actif { flex-grow: 1; }
.carrousel:has(.ecran:not(.ecran--actif):hover) .ecran--actif .vue {
  height: var(--vue-courte);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.carrousel:has(.ecran:not(.ecran--actif):hover) .ecran--actif figcaption { color: var(--muted); }
.carrousel .vue {
  height: var(--vue-courte);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: height 0.35s ease-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.carrousel .ecran--actif .vue,
.carrousel .ecran:hover .vue {
  height: var(--vue-large);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
/* Les captures sont larges : la boîte les recadre par le haut, à l'endroit où l'outil affiche
   ses onglets et son titre, plutôt que par le milieu. Un recadrage centré sur la hauteur
   couperait justement cette bande d'identification. */
.carrousel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.carrousel figcaption {
  margin-top: auto; /* la légende colle au bas de la figure, donc s'aligne avec les autres */
  font-size: 13px;
  line-height: 1.45;
  min-height: 2.9em;
  color: var(--muted);
  transition: color 0.25s ease-in-out;
}
.carrousel .ecran--actif figcaption,
.carrousel .ecran:hover figcaption { color: var(--body); }
/* Sous 760 px, trois colonnes seraient illisibles : les captures s'empilent en pleine largeur,
   chacune entière, et la mise en avant n'a plus lieu d'être. */
@media (max-width: 760px) {
  .carrousel { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .carrousel .ecran,
  .carrousel .ecran--actif,
  .carrousel .ecran:hover { flex-grow: 0; min-height: 0; }
  .carrousel .vue,
  .carrousel .ecran--actif .vue,
  .carrousel .ecran:hover .vue { height: auto; }
  .carrousel img { height: auto; }
  .carrousel figcaption { font-size: 14px; min-height: 0; }
}

/* Deux colonnes texte et visuel. Sous 900 px, tout s'empile. */
.split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}
.split--reverse .split-media { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

/* ---------------------------------------------------------- sources ------- */
/* Logos de tiers : hauteur normalisée (jamais la largeur, les ratios vont de 1:1 à 4:1),
   en niveaux de gris et légèrement estompés. Le libellé de la section dit ce qu'ils sont. */
.sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sources li { display: flex; align-items: center; justify-content: center; height: 42px; }
.sources img {
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
}

/* ------------------------------------------------------------- secteurs --- */
.sector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
a.sector:hover { border-color: var(--border-strong); color: var(--blue); }
.sector svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }

/* ------------------------------------------------------------ audience ---- */
.audience { border-left: 3px solid var(--green); padding-left: 18px; }
.audience h3 { font-size: 18px; margin-bottom: 0.3em; }
.audience p { font-size: 16px; margin-bottom: 0.6em; }
.audience .quote {
  font-style: italic;
  color: var(--blue);
  font-size: 16px;
  margin: 0;
}

/* ----------------------------------------------------------- bandeau CTA -- */
.cta-band {
  background: var(--blue);
  color: #dce8f0;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; margin-bottom: 0.25em; font-size: clamp(22px, 2.6vw, 30px); }
.cta-band p { margin-bottom: 0; color: #c6d8e5; max-width: 620px; }
.cta-band .btn-row { flex-shrink: 0; }

/* -------------------------------------------------------------- footer ---- */
.site-footer {
  background: var(--darkGray);
  color: #c9cdd1;
  padding: clamp(40px, 5vw, 64px) 0 24px;
  font-size: 15px;
}
.site-footer h2 { color: #fff; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.9em; }
.site-footer a { color: #e4e7ea; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1.6fr 1fr 1fr; }
.footer-brand .brand-word {
  font-size: 30px;
  color: #fff;
  text-underline-offset: 5px;
  margin-bottom: 14px;
}
/* Le sous-marqueur suit la signature dans le pied de page : même couleur que le texte du bloc,
   à la taille du corps, pour ne pas concurrencer GAYA. */
.footer-brand .brand-sub { font-size: 17px; color: #e4e7ea; }
.footer-brand p { margin: 0; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: #9aa1a8;
}

/* -------------------------------------------------------------- formulaires */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(26, 76, 111, 0.12); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--error); }
.field-error { display: none; color: var(--error); font-size: 13px; margin-top: 5px; }
.field--error .field-error { display: block; }
.form-note { font-size: 13px; color: var(--muted); }
/* Un formulaire seul dans la page : un champ de saisie ne s'étire pas sur toute la largeur. */
.form-contact { max-width: 620px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------------- blog ---- */
.article { padding: clamp(48px, 7vw, 88px) 0; }
.article-head { max-width: 760px; }
.article-meta { color: var(--muted); font-size: 0.92rem; margin: 0; }
/* Un article se lit : la colonne reste courte même quand l'écran est large. */
.article-body { max-width: 720px; }
.article-body > *:first-child { margin-top: 0; }
.article-body > p:first-child { font-size: 1.12rem; color: var(--ink); }
.article-body > h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 2.2em 0 0.6em; }
.article-body > h3 { margin: 1.9em 0 0.5em; }
.article-body ul { padding-left: 1.25em; }
.article-body li { margin-bottom: 0.4em; }
.article-body blockquote {
  margin: 1.7em 0;
  padding-left: 18px;
  border-left: 3px solid var(--green);
  color: var(--ink);
  font-weight: 500;
}
.card .article-meta { margin-bottom: 0.55em; }

/* -------------------------------------------------------------- utilitaires */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

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

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .nav-mobile {
    display: block;
    margin-left: auto;
    position: relative;
  }
  .nav-mobile > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .nav-mobile > summary::-webkit-details-marker { display: none; }
  .nav-mobile[open] > summary { border-color: var(--blue); }
  .nav-mobile .nav-list {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 230px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    z-index: 120;
  }
  .nav-mobile .nav-link { display: block; padding: 10px 12px; border-radius: 8px; }
  .nav-mobile .nav-link::after { display: none; }
  .nav-mobile .nav-link:hover { background: var(--blue-100); }
  .header-cta { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn-row { width: 100%; }
  .proof-list { justify-content: flex-start; }
}