/* ============================================================
   ALBA — Design system
   Tokens dérivés de la maquette Figma (terracotta / crème)
   ============================================================ */

:root {
  /* Couleurs : palette officielle alba (Colors.pdf, 11 tons). N'utiliser que ces valeurs. */
  --white:       #FFFFFF;
  --light-beige: #FFF7F0;   /* cartes claires */
  --beige:       #FBEADA;   /* fond de page */
  --pale-orange: #DC9159;   /* accent clair */
  --tangerine:   #D76F42;   /* étiquettes, méthode, vision */
  --sienna:      #AE4F29;   /* couleur principale : boutons, aplats, CTA final, pied de page */
  --terracotta:  #8E3A1A;   /* survol des boutons, bandeaux foncés */
  --prune:       #5B2B3D;   /* titres H1, point du logo */
  --dark-red:    #302B2B;   /* texte courant */
  --light-grey:  #D9D9D9;   /* état « avant » */
  --dark-grey:   #8B8B8B;   /* texte secondaire */

  /* Anciens noms, conservés comme alias */
  --terra-light: var(--pale-orange);
  --terra-mid:   var(--tangerine);
  --terra:       var(--sienna);
  --terra-dark:  var(--terracotta);
  --terra-deep:  var(--terracotta);
  --cream:       var(--beige);
  --cream-card:  var(--light-beige);
  --peach:       var(--beige);
  --ink:         var(--dark-red);
  --muted:       var(--dark-grey);

  /* Typo */
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Rythme */
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-btn: 20px;   /* CTA (mesuré sur la maquette : ~20px pour 68px de haut) */
  --radius-tab: 11px;   /* onglets */
  --radius-pill: 999px;
  --section-y: clamp(64px, 9vw, 112px);
  --container: 1120px;

  /* Échelle typographique (8 tailles) */
  --text-xs:   0.8125rem; /* 13px : surtitres en capitales, dates, sources */
  --text-sm:   0.9375rem; /* 15px : pastilles, tags, méta, navigation */
  --text-base: 1rem;      /* 16px : corps de texte */
  --text-lg:   1.125rem;  /* 18px : boutons, noms des coachs */
  --text-xl:   1.5rem;    /* 24px : H2 de section */
  --text-2xl:  2rem;      /* 32px : H2 mis en avant, guillemet */
  --text-3xl:  2.25rem;   /* 36px : H1 desktop */
  --text-num:  2.5rem;    /* 40px : chiffres clés */
  --leading-body: 1.4; /* interligne unique des paragraphes, deux pages */
  --leading-tight: 1.2;
}

/* ---------- Lien d'évitement ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 100;
  background: var(--terra);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Pages légales et 404 ---------- */
.prose { max-width: 720px; }
.prose h1 { margin-bottom: 24px; }
.prose h2 { margin-top: 40px; margin-bottom: 12px; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 20px; }
.page-404 { text-align: center; max-width: 560px; margin: 0 auto; }
.page-404 .btn { margin: 8px 6px 0; }

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Safari iOS agrandit sinon certains textes de lui-même (pastilles inégales sur mobile) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
}
/* Style unique « Titre 36 » : H1 du hero et titres de section des deux pages.
   Rubik 600, 36 px sur ordinateur, 26 px sur mobile, interligne 1,2, espacement -0,01 em */
h1, .section-title, .constat__title, .vision__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, var(--text-3xl));
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { color: var(--prune); }
h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, var(--text-xl));
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.222; /* 22px */
  letter-spacing: -0.01em;
}
p  { margin: 0 0 1em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--white); }
.section--terra { background: var(--terra); color: var(--white); }
.section--terra h2 { color: var(--white); }
.section--terra-deep { background: var(--terra-deep); color: var(--white); }
.section--terra-deep h2 { color: var(--white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 12px;
}
.section--terra .eyebrow,
.section--terra .lead,
.section--terra-deep .lead { color: var(--light-beige); } /* comme le titre « Imaginez » */

.lead {
  /* plus de niveau « lead » : les introductions ont la taille des paragraphes (16 px) */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--ink); /* paragraphes en gris foncé sur fond clair */
  max-width: 640px;
}
.lead--ink { color: var(--ink); } /* page entreprises : introductions en foncé */
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap; /* un bouton ne passe jamais sur deux lignes */
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--terra); color: var(--white); }
.btn--primary:hover { background: var(--terra-dark); }
.btn--light { background: var(--white); color: var(--terra); }
.btn--light:hover { background: var(--peach); }
.btn--ghost {
  background: transparent;
  color: var(--terra);
  border: 1.5px solid var(--terra);
}
.btn--ghost:hover { background: var(--terra); color: var(--white); }

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 247, 240, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(48, 43, 43, 0.06);
}
.site-header .container {
  max-width: none; /* la barre utilise toute la largeur */
  padding: 0 32px;
  /* logo à gauche, les trois liens centrés, CTA à droite */
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  column-gap: 28px;
  align-items: center;
  height: 72px;
}
.site-header .logo { justify-self: start; }
.site-header .nav a.btn { justify-self: end; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--terra);
  text-decoration: none;
}
.logo__mark { height: 26px; width: auto; display: block; }
.site-footer .logo__mark { height: 22px; }
.site-footer .logo { color: var(--white); }
.nav { display: contents; } /* les liens deviennent des cellules de la grille de la barre */
.nav a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--ink);
  padding: 8px 0; /* zone cliquable de 34 px */
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--terra); }
/* CTA de la barre : mêmes attributs que le bouton primaire (la règle .nav a ci-dessus
   prend le dessus par spécificité, d'où ces rappels), hauteur 48 px pour la barre de 72 px */
.nav a.btn {
  /* plus discret que les CTA de la page : 15 px, 40 px de haut */
  padding: 8px 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 14px;
}
.nav a.btn--ghost { color: var(--terra); }
.nav a.btn--ghost:hover { color: var(--white); background: var(--terra); }
.burger {
  display: none;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s;
}
.burger span { top: 21px; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 6vw, 80px) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.hero__grid--reverse { grid-template-columns: 1.1fr 1fr; }
.hero .lead { margin-bottom: 28px; }
.hero .photo { aspect-ratio: 5 / 6; }
.hero .photo img { object-position: 50% 35%; }
/* photo duo (page femmes) : léger zoom centré sur Clara et Perrine */
.hero .photo img[src$="photo-duo-banc.jpg"] { transform: scale(1.25); transform-origin: 0% 75%; } /* cadrage Figma : bord gauche de la photo, chaise hors champ */

/* ---------- Placeholders photos ---------- */
.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(140deg, var(--beige), var(--pale-orange));
  min-height: 320px;
}
.photo::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: rgba(142, 58, 26, 0.55);
  letter-spacing: 0.06em;
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ---------- Grilles de cards génériques ---------- */
.cards {
  display: grid;
  gap: 20px;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card--white { background: var(--white); }
.card--terra { background: var(--terra); color: var(--white); }
.card--terra h3 { color: var(--white); }
.card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--peach);
  color: var(--terra-dark);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* ---------- Cards à badge (Vous êtes au bon endroit si…) ---------- */
.badge-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.badge-card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 200px;
}

/* Flip : recto badge-card, verso témoignage */
.flip {
  perspective: 1600px;
  min-height: 300px;
  cursor: pointer;
  outline: none;
}
.flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  /* Courbe douce : départ progressif, arrivée amortie, sans rebond */
  transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.2, 1);
  will-change: transform;
}
.flip:hover .flip__inner,
.flip:focus-visible .flip__inner,
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  /* 1px de profondeur : évite le scintillement des deux faces à 0° et 180° */
  transform: translateZ(1px);
  box-shadow: 0 1px 0 rgba(48, 43, 43, 0);
  transition: box-shadow 0.9s cubic-bezier(0.25, 0.1, 0.2, 1);
}
.flip:hover .flip__face,
.flip.is-flipped .flip__face { box-shadow: 0 18px 40px -18px rgba(48, 43, 43, 0.35); }
.flip__face.badge-card { min-height: 0; }
.flip__back {
  background: var(--terra);
  color: var(--white);
  transform: rotateY(180deg) translateZ(1px);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}
/* Le contenu du verso apparaît une fois la carte à moitié retournée */
.flip__back > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.35s, transform 0.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.35s;
}
.flip:hover .flip__back > *,
.flip:focus-visible .flip__back > *,
.flip.is-flipped .flip__back > * { opacity: 1; transform: translateY(0); }
.flip__back > .flip__photo { opacity: 1; transform: none; transition: none; }
.flip__back--orange { background: var(--terra-dark); } /* texte blanc 6,9:1 */
.flip__back--photo .flip__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.flip__back--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* voile chaud : teinte terracotta en haut, assombri en bas pour la citation */
  background: linear-gradient(180deg, rgba(174, 79, 41, 0.35) 0%, rgba(142, 58, 26, 0.85) 100%);
  z-index: 1;
}
.flip__back--photo .flip__photo { filter: saturate(0.9); }
.flip__back > * { position: relative; z-index: 2; }
.flip__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.flip__quote { width: 34px; height: 28px; margin-bottom: 16px; }
.flip__back p {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.badge {
  /* Forme des étiquettes (spécification Figma) : rayons 25 px sauf 4 px en bas à gauche */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border-radius: 25px 25px 25px 4px;
  padding: 6px 15px;
  margin-bottom: 20px;
}
.badge img { flex: 0 0 auto; width: 22px; height: 22px; }
.badge span { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 22px; color: var(--terra); }
.badge-card p { margin: 0; font-weight: 600; color: var(--ink); }
.badge-card--cta {
  background: transparent;
  border: 1px solid rgba(174, 79, 41, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.badge-card--cta p { font-weight: 500; }

/* ---------- Outils concrets (carte unique) ---------- */
.tools-card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
  margin-top: 28px;
}
.tool__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--terra);
  margin-bottom: 8px;
  font-size: var(--text-base);
}
.tool__title img { width: 22px; height: 22px; flex: 0 0 auto; }
.tool p { margin: 0; color: var(--ink); font-size: var(--text-base); }

/* ---------- Tag avec icône (badges chiffres / thèmes) ---------- */
.tag-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--terra-deep);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-bottom: 16px;
}
.tag-icon img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.tag-icon--mid { background: var(--terra); } /* texte blanc 5,3:1 */

/* ---------- Carte photo témoignage (overlay sombre + citation) ---------- */
.photo-quote {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 260px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
.photo-quote img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.photo-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(48,43,43,0) 25%, rgba(48,43,43,.8) 100%);
  z-index: 1;
}
.photo-quote > * { position: relative; z-index: 2; }
.photo-quote .eyebrow { color: var(--white); opacity: 0.9; margin-bottom: 2px; }
.photo-quote .quote-mark {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.photo-quote p { margin: 0; font-size: var(--text-base); }

/* ---------- Grille masonry 2 colonnes (stats / vision B2B) ---------- */
.masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ---------- Toggle Individuel / Collectif + onglets ---------- */
.tabs__nav {
  display: inline-flex;
  gap: 8px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-bottom: 40px;
}
.tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--terra);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 10px 22px;
  border-radius: var(--radius-tab);
  border: 1.5px solid transparent;
}
.tabs__btn img { width: 16px; height: 16px; }
.tabs__btn:hover { border-color: var(--peach); }
.tabs__btn[aria-selected="true"] {
  background: var(--terra);
  color: var(--white);
}
.tabs__btn[aria-selected="true"] img { filter: brightness(0) invert(1); }
.tabs__panel[hidden] { display: none; }

/* ---------- Offre individuelle (card + accordéons) ---------- */
.offer {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 24px;
  /* stretch : colonnes gauche et droite de même hauteur */
  align-items: stretch;
}
.offer__main {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px; /* espacement entre les blocs = padding */
}
.offer__main h2 { margin: 0; }
.offer__main h3 { margin: 0; }
/* sous-titres de l'accompagnement (page femmes) : même style que les intitulés de la méthode */
.offer__title { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); }
.offer__desc p { margin: 0 0 14px; color: var(--ink); }
.offer__desc p:last-child { margin-bottom: 0; }
.offer__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.offer__meta li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.offer__meta .ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  text-align: center;
  color: var(--terra);
}
.offer__meta .ico img { width: 22px; height: 22px; }
.accordions {
  display: grid;
  gap: 24px; /* même écart entre les boîtes qu'avec la carte de gauche */
  align-content: start;
}
details.acc {
  background: var(--cream-card);
  border-radius: var(--radius-md);
  padding: 0;
}
details.acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
details.acc[open] summary::after { transform: rotate(45deg); }
details.acc .acc__body { padding: 0 24px 22px; color: var(--ink); }
details.acc { overflow: hidden; } /* animé en JS : la hauteur est pilotée pendant l'ouverture et la fermeture */
details.acc summary::after { transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.2, 1); }
.acc--detail summary { align-items: baseline; }
.acc--detail .acc__title { flex: 1; }
.acc--detail .detail-card__meta { margin-right: 4px; }
.acc--detail .acc__body p { margin: 0 0 0.6em; color: var(--ink); }
.acc--detail .acc__body p:last-child { margin-bottom: 0; }
.acc--detail .acc__body ul { list-style: none; margin: 0; padding: 0; color: var(--ink); }
.acc--detail .acc__body li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.acc--detail .acc__body li::before { content: "•"; position: absolute; left: 0; }

/* ---------- Cartes détail (panel Collectif : titre + méta, sans accordéon) ---------- */
.detail-card {
  background: var(--cream-card);
  border-radius: var(--radius-md);
  padding: 24px;
}
.detail-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.detail-card__head h4 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); }
.detail-card__meta {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--terra-mid);
}
.detail-card p { margin: 0 0 0.6em; color: var(--ink); }
.detail-card p:last-child { margin-bottom: 0; }
.detail-card ul { list-style: none; margin: 0; padding: 0; }
.detail-card li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.detail-card li::before { content: "•"; position: absolute; left: 0; }

/* ---------- Pills « Imaginez-vous dans 6 mois » ---------- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.pills__row { display: contents; }
.pill {
  background: var(--cream-card);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  /* apparition progressive quand la section entre dans l'écran (classe is-visible posée en JS) */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.1, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.pills.is-visible .pill { opacity: 1; transform: none; }

/* ---------- Équipe ---------- */
.team-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 24px;
  align-items: stretch;
}
.team-intro__photo { min-height: 0; margin: 0; aspect-ratio: 2 / 3; }
.team-intro__photo img { transform: scale(1.12); transform-origin: 50% 42%; }
.team-intro__text {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-intro__text h2 { margin-bottom: 28px; }
.team-intro__text p { margin: 0 0 14px; color: var(--ink); }
.team-intro__text p:last-child { margin-bottom: 0; }
.team__bios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.bio {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.bio h3 { margin-bottom: 16px; } /* écart nom / texte */
.bio p { margin: 0 0 14px; } /* même écart entre paragraphes que l'intro de l'équipe */
.bio .btn { margin-top: 12px; }

/* ---------- Équipe (B2B) : portraits N&B ---------- */
.team-b2b {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.team-b2b__portraits { display: flex; gap: 24px; }
.team-b2b__member { text-align: center; }
.team-b2b__member .photo {
  width: 180px;
  height: 220px;
  min-height: 0;
  margin-bottom: 14px;
  filter: grayscale(1);
}
.team-b2b__member h3 { margin: 0; font-size: var(--text-lg); }
.team-b2b__text p.highlight {
  color: var(--terra);
  font-weight: 600;
}
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  margin-top: 40px;
  opacity: 0.75;
}
.logos span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.logos img { width: auto; max-height: 36px; filter: grayscale(1); }
/* Certifications (bas des sections équipe) : centrées, plus grandes */
.logos--certif {
  justify-content: center;
  gap: 56px;
  margin-top: 56px;
  opacity: 0.9;
}
.logos--certif img { height: 72px; max-height: 72px; }

/* ---------- Carrousel témoignages ---------- */
/* Carrousel en pleine largeur : sort du conteneur, la première carte reste alignée sur la grille */
.carousel { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.carousel__track {
  --bleed: max(24px, calc(50vw - 536px));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(480px, 80vw); /* desktop : cartes au format paysage */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px var(--bleed) 8px;
  scroll-padding-inline: var(--bleed);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.testimonial {
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 240px;
}
.testimonial h3 { margin-bottom: 4px; font-size: var(--text-base); }
.testimonial .role {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}
.testimonial p { font-size: var(--text-base); color: var(--ink); margin: 0; }
.carousel__nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  padding: 0 24px; /* le carrousel est en pleine largeur : on garde les marges du contenu */
}
.carousel__nav { align-items: stretch; }
.carousel__nav button {
  width: 50px;
  height: auto;
  align-self: stretch; /* même hauteur que le bouton « Voir tous les commentaires » */
  border-radius: 14px; /* même forme que les boutons secondaires : carré aux angles arrondis */
  border: 1.5px solid var(--terra);
  background: transparent;
  color: var(--terra);
  font-size: var(--text-lg);
}
.carousel__nav button:hover { background: var(--terra); color: var(--white); }

/* ---------- FAQ ---------- */
.faq details.acc { background: var(--cream-card); }
.section--terra .faq details.acc,
.section--terra-deep .faq details.acc { background: var(--cream-card); color: var(--ink); }
.section--terra .faq,
.section--terra-deep .faq { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
/* FAQ de la page femmes : fond clair, pour enchaîner sur la bande « aube » qui part du crème */
.section--faq .faq { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.section--faq .faq details.acc { background: var(--white); color: var(--ink); }

/* ---------- Bandeau CTA final ---------- */
.cta-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.cta-final__left h2 { margin-bottom: 0; }
.cta-final__right { display: grid; gap: 20px; justify-items: start; }
.logo-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--terra);
  line-height: 1;
}
.cta-final .logo-big {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  color: var(--cream);
}
.cta-final p { margin: 0; max-width: 480px; }

/* ---------- Stats (B2B) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.stat {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-num);
  color: var(--terra);
  line-height: 1;
  margin-bottom: 10px;
}
.stat p { margin: 0; color: var(--ink); font-size: var(--text-base); }
.sources {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 20px;
}

/* ---------- Bandeau conséquences / coût (B2B) : cartes pleine largeur ---------- */
.icon-card {
  background: var(--terra);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
}
.icon-card .eyebrow { color: var(--white); }
.icon-card h2 { color: var(--white); }
.icon-card .lead { color: var(--white); max-width: 760px; }
.icon-card .card__tag { color: var(--terra-deep); }
.icon-heading { display: flex; align-items: center; gap: 20px; }
.icon-heading img { width: 40px; height: 40px; flex: 0 0 auto; filter: brightness(0) invert(1); opacity: .9; }
.consequences h2 { max-width: 720px; margin: 0; }
.consequences .lead { color: var(--white); margin-top: 16px; margin-bottom: 0; }

/* ---------- Page entreprises · Le constat (maquette Figma, grille 1120) ---------- */
.constat .eyebrow { display: block; color: var(--ink); font-size: var(--text-lg); letter-spacing: 0.02em; margin: 0 0 44px; }
.constat__title {
  color: var(--terra-deep); /* typo : style « Titre 36 » */
  margin: 0 0 52px;
}
.constat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.constat .stat {
  padding: 26px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}
.constat .badge { margin: 0; align-self: flex-start; }
/* Spécification Figma : padding 6 px 15 px, rayons 25 px sauf 4 px en bas à gauche, Rubik 500 18 px / 22 px */
.badge--dark { background: var(--terra-deep); }
.badge--dark span { color: var(--cream); }
/* Variantes de l'étiquette unique : couleur (--dark, --tangerine) et taille (--sm, page entreprises) */
.badge--tangerine { background: var(--tangerine); }
.badge--tangerine span { color: var(--white); }
.badge--sm span { font-size: var(--text-base); }
.badge--dark img { filter: brightness(0) invert(1) sepia(0.15); }
/* pictos livrés déjà en crème (deux tons) : pas de filtre */
.badge--dark img.icon-cream, .stack__icon.icon-cream { filter: none; opacity: 1; }
.card .badge { margin-bottom: 14px; }
.constat .stat__row { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.constat .stat__num { font-size: var(--text-3xl); color: var(--terra-deep); line-height: 1; margin: 0; min-width: 72px; } /* même couleur que les étiquettes */
.constat .stat p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); }
.constat .photo-quote { min-height: 257px; padding: 26px; border-radius: 24px; justify-content: flex-end; }
.constat .photo-quote::before { background: linear-gradient(180deg, rgba(174, 79, 41, 0.35) 0%, rgba(142, 58, 26, 0.85) 100%); } /* même traitement que les versos de la page femmes */
.constat .photo-quote img { filter: saturate(0.9); }
.constat .photo-quote .eyebrow { color: var(--white); font-size: var(--text-base); margin: 0 0 8px; }
.constat .photo-quote .quote-icon { position: relative; inset: auto; z-index: 2; display: block; width: 42px; height: 34px; margin: 0 0 40px; object-fit: contain; filter: none; }
.constat .photo-quote p { margin: 0; font-size: var(--text-base); line-height: 1.4; }
.constat .sources { text-align: right; font-style: italic; font-size: var(--text-xs); margin-top: 12px; }

/* ---------- Page entreprises · trois cartes empilées (conséquences, coût, conviction) ----------
   Chaque carte est « sticky » sous l'en-tête : en défilant, la suivante vient recouvrir la précédente.
   Dimensions relevées sur la maquette, ramenées à la grille de 1120 px. */
.stack { display: grid; gap: 24px; }
.stack__spacer { height: 0; margin-top: -24px; } /* allongé en JS (mobile) : distance pendant laquelle la carte précédente reste collée */
.stack__card {
  position: sticky;
  top: 96px; /* en-tête de 72 px + 24 px */
  min-height: 514px;
  border-radius: var(--radius-lg);
  padding: 88px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cream);
  transform-origin: 50% 0;
  will-change: transform;
}
.stack__card--deep { background: var(--terra-deep); }
.stack__card--terra { background: var(--terra); }
.stack__card--mid { background: var(--terra-mid); }
.stack__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 18px;
}
/* picto en première ligne, puis surtitre, titre et texte (maquette du 7/10) :
   l'en-tête s'efface pour que le picto passe avant le surtitre */
.stack__head { display: contents; }
.stack__icon { order: -1; margin: 0 0 28px; }
.stack__eyebrow { margin-bottom: 12px; }
.stack__icon { width: 64px; height: 64px; flex: 0 0 auto; filter: brightness(0) invert(1) sepia(0.15); opacity: 0.95; }
.stack__icon--rocket { width: 72px; height: 72px; }
.stack__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 980px;
  margin: 0;
}
.stack__lead { margin: 24px 0 0; max-width: 920px; font-size: var(--text-base); line-height: var(--leading-body); color: var(--cream); }
/* carte « coût de l'inaction » */
.stack__card.cost { padding: 34px 52px 32px; justify-content: flex-start; }
.stack__head--cost { gap: 56px; }
.stack__icon--euro { width: 56px; height: 60px; }
.cost__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.cost__card { background: var(--cream-card); border-radius: var(--radius-lg); padding: 24px; color: var(--ink); }
.cost__label { display: block; font-weight: 600; font-size: var(--text-base); line-height: 22px; text-transform: uppercase; color: var(--terra-deep); margin: 0 0 16px; }
.cost__price { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.3; color: var(--terra-mid); margin: 0 0 16px; }
.cost__card p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); }

/* ---------- Carte 4 : le regard sur la parentalité (deux états : avant / avec alba) ---------- */
.stack__card--white { background: var(--white); color: var(--ink); }
.stack__card.regard { padding: 63px 68px 60px; justify-content: flex-start; align-items: center; min-height: 536px; }
.regard .tabs__nav { background: var(--cream); border-radius: var(--radius-md); padding: 6px; gap: 0; margin: 0 0 56px; }
.regard .tabs__btn { padding: 12px 24px; min-width: 140px; justify-content: center; font-size: var(--text-lg); font-weight: 500; }
.regard__body { display: grid; grid-template-columns: minmax(0, 523px) max-content; justify-content: space-between; gap: 50px; width: 100%; align-items: start; } /* la photo rétrécit, les pastilles gardent leur largeur */
.regard__quote { min-height: 258px; padding: 26px; border-radius: 24px; justify-content: flex-end; }
.regard__quote::before {
  /* lisibilité : voile léger sur le visage, plus dense en bas, sous la citation */
  background: linear-gradient(180deg, rgba(48, 43, 43, 0.08) 0%, rgba(48, 43, 43, 0.22) 35%, rgba(48, 43, 43, 0.68) 72%, rgba(48, 43, 43, 0.86) 100%);
}
.regard__quote p, .regard__quote .eyebrow { text-shadow: 0 1px 8px rgba(48, 43, 43, 0.35); }
/* desktop : la citation occupe la gauche, le visage est décalé à droite et reste dégagé */
@media (min-width: 961px) {
  .regard__quote::before {
    background:
      linear-gradient(90deg, rgba(48, 43, 43, 0.72) 0%, rgba(48, 43, 43, 0.5) 40%, rgba(48, 43, 43, 0.08) 75%, rgba(48, 43, 43, 0) 100%),
      linear-gradient(180deg, rgba(48, 43, 43, 0) 50%, rgba(48, 43, 43, 0.35) 100%);
  }
  .regard__quote > :not(img) { max-width: 58%; }
  .regard__quote .regard__photo { transform: scale(1.2) translateX(8%); }
}
.regard__photo { transition: opacity 0.5s ease; }
.regard__photo--avant { filter: grayscale(1); }
.regard__quote .eyebrow { color: var(--white); font-size: var(--text-base); margin: 0 0 8px; }
.regard__quote .quote-icon { position: relative; inset: auto; z-index: 2; display: block; width: 42px; height: 34px; margin: 0 0 44px; object-fit: contain; filter: none; }
.regard__quote p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); }
.regard__eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); text-transform: uppercase; color: var(--terra); margin: 6px 0 28px; }
.regard__pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; justify-items: start; }
/* les deux listes (avant / avec) occupent la même case : la colonne garde la même largeur
   et le titre comme les pastilles ne bougent pas quand on bascule d'un état à l'autre */
.regard__side { display: grid; grid-template-columns: max-content; }
.regard__side .regard__eyebrow { grid-row: 1; }
.regard__side .regard__pills { grid-row: 2; grid-column: 1; }
.regard[data-state="avant"] .regard__side .regard__only-avec,
.regard[data-state="avec"] .regard__side .regard__only-avant { display: grid; visibility: hidden; }
.regard__pill {
  display: inline-block;
  padding: 8px 18px;
  border: 1.5px solid var(--terra);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  white-space: nowrap; /* une pastille ne passe jamais sur deux lignes */
  color: var(--terra);
}
/* état « avant » : tout en gris */
.regard[data-state="avant"] .regard__eyebrow { color: var(--dark-grey); }
.regard[data-state="avant"] .regard__pill { color: var(--dark-grey); border-color: var(--dark-grey); background: var(--light-grey); }
.regard[data-state="avant"] .regard__photo--avec, .regard[data-state="avant"] .regard__only-avec { display: none; }
.regard[data-state="avec"] .regard__photo--avant, .regard[data-state="avec"] .regard__only-avant { display: none; }
.regard__quote .regard__photo { display: block; }
.regard[data-state="avant"] .regard__photo--avec { display: none; }

/* ---------- Méthode alba (page entreprises) : trois onglets, d'après la maquette Figma ----------
   Chaque niveau a sa couleur : individu terracotta foncé, collectif tangerine, organisation sienna. */
.methode { --m-color: var(--terra-deep); background: var(--beige); border-radius: var(--radius-lg); padding: 36px 40px 40px; margin-top: 32px; }
.methode__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; background: none; padding: 0; margin: 0; border-radius: 0; }
.methode__tab {
  --t-color: var(--terra-deep);
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-tab);
  background: var(--cream-card);
  color: var(--t-color);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.methode__tab--collectif { --t-color: var(--terra-mid); }
.methode__tab--organisation { --t-color: var(--terra); }
.methode__tab[aria-selected="true"] { background: var(--t-color); color: var(--cream); }
.methode__tab:hover { border-color: transparent; }
.methode__tab .methode__ico { width: 20px; height: 20px; flex: 0 0 auto; }
.methode__tab .methode__ico, .methode__tab[aria-selected="true"] .methode__ico { filter: none; }
.methode__tab[aria-selected="true"] .methode__ico--off,
.methode__tab[aria-selected="false"] .methode__ico--on { display: none; }
.methode__tab--organisation .methode__ico--off { display: none; } /* un seul picto, lisible dans les deux états */
.methode__tab--organisation[aria-selected="false"] .methode__ico--on { display: block; }
.methode__panel { display: grid; grid-template-columns: 345px 1fr; gap: 48px; margin-top: 36px; align-items: start; } /* les deux colonnes partent du haut */
.methode__panel[hidden] { display: none; }
.methode__panel--collectif { --m-color: var(--terra-mid); }
.methode__panel--organisation { --m-color: var(--terra); }
.methode__intro h3 { margin: 0 0 18px; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--m-color); }
.methode__intro p { margin: 0 0 14px; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); }
.methode__box { margin-top: 20px; background: var(--m-color); color: var(--cream); border-radius: 20px; padding: 24px; }
.methode__box strong { display: block; margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); text-transform: uppercase; }
.methode__intro .methode__box p { color: var(--cream); margin: 0 0 10px; }
.methode__intro .methode__box p:last-child { margin-bottom: 0; }
.methode__box--strong { border-radius: 10px; }
.methode__box--strong p { font-family: var(--font-display); font-weight: 600; }
.methode__offers { display: grid; gap: 12px; }
.methode__offer { background: var(--cream-card); border-radius: 8px; padding: 18px 22px; }
.methode__offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.methode__offer-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink); }
.methode__offer-meta { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--m-color); text-align: right; white-space: nowrap; }
.methode__offer p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); }

/* ---------- Titres de section : couleurs (la typo vient du style « Titre 36 », en haut du fichier) ---------- */
.section-title--sienna { color: var(--terra); }
.section-title--terracotta { color: var(--terra-deep); }
.section-title.section-title--light { color: var(--cream-card); }
.section-title--prune { color: var(--prune); }

/* ---------- La vision (page entreprises), d'après la maquette Figma ---------- */
.vision__eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: 40px; }
.vision__title { margin: 0 0 48px; max-width: none; color: var(--terra-mid); } /* typo : style « Titre 36 » */
.vision__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.vision__card--retention { grid-column: 1; grid-row: 1; }
.vision__card--performance { grid-column: 2; grid-row: 1; }
.vision__card--cohesion { grid-column: 1; grid-row: 2; }
.vision__card--leadership { grid-column: 1; grid-row: 3; }
.vision__quote { grid-column: 2; grid-row: 2 / span 2; }
.vision__grid > .vision__card { align-self: stretch; }
.vision__grid > .vision__card--cohesion, .vision__grid > .vision__card--leadership { align-self: start; }
.vision__card { background: var(--cream-card); border-radius: var(--radius-lg); padding: 24px 24px 28px; }
.vision__card .badge { margin: 0; }
.vision__card p { margin: 32px 0 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); }
/* témoignage : même traitement que les versos de la page femmes (voile terracotta, assombri en bas) */
.vision__quote { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 245px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); }
.vision__quote::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(174, 79, 41, 0.35) 0%, rgba(142, 58, 26, 0.85) 100%); }
.vision__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); z-index: 0; }
.vision__quote > :not(.vision__photo) { position: relative; z-index: 2; }
.vision__quote-label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 12px; }
.vision__quote-mark { width: 34px; height: auto; margin-bottom: 40px; }
.vision__quote p { margin: 0; font-size: var(--text-base); line-height: 1.4; }

/* ---------- L'équipe (page entreprises), d'après la maquette Figma ---------- */
.team2__title { color: var(--terra); }
.team2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.team2__member { margin: 0; }
.team2__member img { display: block; width: 100%; aspect-ratio: 330 / 420; object-fit: cover; object-position: 50% 20%; border-radius: 20px; }
.team2__member figcaption { margin-top: 24px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink); }
.team2__text p { margin: 0 0 22px; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); }
.team2__text p:last-child { margin-bottom: 0; }
.team2__text .team2__conviction { font-weight: 700; color: var(--terra-deep); }
.team2__logos { justify-content: center; gap: 100px; margin-top: 48px; opacity: 1; }
.team2__logos img { height: 100px; max-height: 100px; }

/* ---------- Coûts (B2B) ---------- */
.cost { margin-top: 32px; }
.cost .card { background: var(--cream-card); }
.cost .card__tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terra-deep);
  background: none;
  padding: 0;
  margin-bottom: 14px;
}
.cost .card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--terra); /* 5,0:1 sur cream-card */
  margin: 6px 0 12px;
}
.cost .card p { color: var(--ink); }

/* ---------- Avant / Avec alba (B2B) ---------- */

/* ---------- Méthode (B2B) : pour qui ---------- */
.forwho {
  background: var(--peach);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.forwho ul { margin: 8px 0 0; padding-left: 18px; }
.forwho li { margin-bottom: 8px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--terra-deep);
  color: var(--peach);
  padding: 48px 0;
  margin-top: 0;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--peach); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer .logo { color: var(--white); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--text-sm); }
.site-footer nav a { padding: 8px 0; display: inline-block; }
/* ---------- Aube : bande dégradée entre le contenu et le CTA final ----------
   Un dôme sienna puis tangerine se lève depuis le bas (dégradé radial à arrêts rapprochés pour une
   courbe douce), sur un fond crème ; un grain fin par-dessus évite les paliers de couleur.
   Le bas de la bande a exactement la couleur du CTA et du pied de page. */
:root {
  --dawn-end: var(--terra); /* sienna (primary) : bas du dégradé, CTA final et pied de page */
}
.dawn-band {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 44vw, 640px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px clamp(100px, 12vw, 180px); /* la phrase se place dans la zone orange pâle */
  text-align: center;
  /* couleurs de la maquette Figma (tangerine, orange pâle, beige) ; dôme large et aplati :
     sa largeur est fixée en pixels sur mobile (--dome-w), pour qu'il y reste aplati ; son cœur
     tangerine couvre tout le bas de la bande, bords compris, sans raccord visible.
     Les teintes intermédiaires en dur sont des paliers entre deux couleurs de la palette (sienna, tangerine, orange pâle, beige) */
  background:
    /* raccord : fondu doux vers le sienna sur le dernier quart, bords compris */
    linear-gradient(180deg, rgba(174, 79, 41, 0) 72%, rgba(174, 79, 41, 0.35) 84%, rgba(174, 79, 41, 0.8) 94%, var(--dawn-end) 100%),
    radial-gradient(var(--dome-w, 140%) 92% at 50% 100%,
      var(--dawn-end) 0%, var(--dawn-end) 14%, #C05A30 24%, var(--tangerine) 34%, #DA8150 42%, var(--terra-light) 50%,
      #E6AA80 60%, #EFC4A3 70%, #F6DAC3 79%, #F9E4D1 88%, var(--cream) 97%),
    var(--cream);
}
.dawn-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
  /* le grain s'estompe vers le bas pour ne pas marquer la jonction avec le CTA */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
}
.dawn { position: relative; z-index: 1; max-width: 900px; }
.dawn__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem); /* 36 px dans Figma */
  font-weight: 600;
  line-height: 1.2;
  color: var(--prune); /* prune : début de phrase, sur la partie claire */
}
/* fin de phrase en blanc ; halo sienna très diffus pour la détacher de l'orange pâle */
.dawn__rotator { text-shadow: 0 0 18px rgba(174, 79, 41, 0.45), 0 1px 2px rgba(142, 58, 26, 0.25); }
/* la fin de phrase se tape puis s'efface (js/main.js) : elle a sa propre ligne, de hauteur
   réservée, pour que la bande ne bouge pas quand sa longueur varie */
.dawn__rotator { display: block; position: relative; color: var(--white); }
.dawn__phrase::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background: currentColor;
  animation: dawn-caret 1s steps(1) infinite;
}
@keyframes dawn-caret { 50% { opacity: 0; } }

/* CTA final et pied de page en sienna, dans la continuité de la bande */
.section--tangerine { background: var(--dawn-end); color: var(--cream); padding-top: clamp(24px, 4vw, 48px); }
.section--tangerine h2 { color: var(--cream); }
.section--tangerine .btn--light { background: var(--cream); color: var(--terra-deep); }
.section--tangerine .btn--light:hover { background: var(--cream-card); }
/* CTA final centré, sur une colonne */
.section--tangerine .cta-final { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
.section--tangerine .cta-final__left h2 { max-width: 640px; margin: 0 auto; }
.section--tangerine .cta-final__right { justify-items: center; }
.section--tangerine .cta-final p { margin: 0 auto; max-width: 520px; }
.site-footer--tangerine { background: var(--dawn-end); color: var(--cream); padding-top: 0; }
.site-footer--tangerine .container { border-top: 1px solid rgba(251, 234, 218, 0.35); padding-top: 28px; }
.site-footer--tangerine a, .site-footer--tangerine .site-footer__copy { color: var(--cream); }
/* pied de page tangerine : petit logo et liens sur une ligne, mentions en dessous */
.site-footer--tangerine .container { justify-content: space-between; }
.site-footer--tangerine .logo__mark { height: 24px; }
.site-footer__copy { width: 100%; margin: 8px 0 0; font-size: var(--text-xs); opacity: 0.8; }
.site-footer__credit { width: 100%; margin: -16px 0 0; font-size: var(--text-xs); opacity: 0.8; }
.site-footer__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid, .hero__grid--reverse,
  .offer, .cta-final,
  .team-intro, .team__bios, .masonry, .tools-grid, .regard {
    grid-template-columns: 1fr;
  }
  .badge-cards, .cards--3 { grid-template-columns: repeat(2, 1fr); }
  /* Hero en une colonne : texte et bouton avant la photo */
  .hero .photo { order: 2; width: 100%; margin: 0; aspect-ratio: 4 / 3; min-height: 0; } /* margin 0 : la figure a 40 px de marge par défaut */
  .hero .photo img[src$="photo-duo-banc.jpg"] { transform-origin: 0% 30%; }
  .team-b2b { grid-template-columns: 1fr; }
  .constat__grid { grid-template-columns: 1fr; }
  .stack__card { padding: 48px 28px; min-height: 0; top: 84px; }
  .stack__card.cost { padding: 28px 24px; }
  /* mobile : cartes empilées en pleine largeur d'écran, titre sous le picto */
  .stack-section .container { padding: 0; }
  .stack__card { border-radius: 0; }
  .stack__head, .stack__head--cost { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stack__icon { width: 44px; height: 44px; }
  .stack__icon--rocket, .stack__icon--euro { width: 48px; height: 48px; }
  .stack__icon { margin-bottom: 20px; }
  .stack__title { font-size: 24px; }
  .stack__lead { margin-top: 28px; }
  /* carte coût : les trois sous-cartes en carrousel horizontal, pour que la carte tienne dans l'écran */
  .stack__card.cost { padding-left: 0; padding-right: 0; }
  .stack__card.cost .stack__eyebrow, .stack__card.cost .stack__icon, .stack__card.cost .stack__title { margin-left: 24px; margin-right: 24px; }
  .cost__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76vw;
    gap: 14px;
    margin-top: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 24px 4px;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .cost__grid::-webkit-scrollbar { display: none; }
  .cost__card { scroll-snap-align: start; }
  .stack__card.regard { padding: 28px 20px; }
  .regard .tabs__nav { margin-bottom: 24px; }
  /* équipe : les deux portraits côte à côte, le texte dessous */
  .team2__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .team2__text { grid-column: 1 / -1; margin-top: 12px; }
  .team2__member figcaption { margin-top: 12px; font-size: 15px; white-space: nowrap; }
  .team2__logos { gap: 32px; margin-top: 36px; flex-wrap: wrap; }
  .team2__logos img { height: 56px; max-height: 56px; }
  /* vision : une colonne, témoignage en dernier */
  .vision__eyebrow { font-size: 18px; margin-bottom: 20px; }
  .vision__title { margin-bottom: 28px; }
  .vision__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 16px; } /* toutes les cartes à la même hauteur */
  .vision__grid > * { grid-column: 1 !important; grid-row: auto !important; align-self: stretch !important; }
  .vision__quote { order: 1; min-height: 0; }
  .vision__card { padding: 20px; }
  .vision__card p { margin-top: 20px; font-size: 16px; line-height: var(--leading-body); }
  .vision__quote p { font-size: 16px; line-height: var(--leading-body); }
  /* méthode : onglets compacts (picto au-dessus du libellé), une colonne, durée sous l'intitulé */
  /* méthode, mobile : fond beige, sans carte autour (un niveau d'indentation en moins) ;
     on change d'onglet en touchant l'onglet ou en glissant sur le contenu */
  .section--methode { background: var(--cream); }
  .section--methode .lead { color: var(--ink); }
  .methode { background: none; border-radius: 0; padding: 0; margin-top: 28px; }
  /* les trois onglets tiennent dans la largeur de l'écran : picto au-dessus du libellé */
  .methode__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .methode__tab { flex-direction: column; height: auto; min-height: 64px; min-width: 0; padding: 10px 4px; gap: 6px; font-size: 12px; }
  .methode__panel { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; touch-action: pan-y; }
  .methode__intro h3 { font-size: 21px; margin-bottom: 18px; }
  .methode__intro p { margin-bottom: 14px; }
  .methode__box { margin-top: 18px; padding: 20px; }
  .methode__offers { margin-top: 0; gap: 12px; }
  .methode__offer { padding: 18px; }
  .methode__offer-head { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
  .methode__offer-title, .methode__offer-meta { font-size: var(--text-base); }
  .regard .tabs__btn { min-width: 0; padding: 10px 18px; font-size: var(--text-base); }
  .regard__body { grid-template-columns: 1fr; gap: 20px; }
  .regard__quote { min-height: 340px; padding: 20px; }
  .regard__quote .regard__photo { object-position: 50% 15%; }
  .regard__quote .quote-icon { margin-bottom: 20px; }
  .regard__quote p { font-size: var(--text-base); }
  .regard__eyebrow { margin: 0 0 14px; font-size: var(--text-base); }
  .regard__pills { gap: 12px; }
  .regard__pill { padding: 7px 14px; font-size: var(--text-sm); }
  /* les cartes empilées ne dépassent jamais l'écran */
  .stack__card { max-height: calc(100vh - 100px); overflow: hidden; }
  .team-b2b__portraits { justify-content: center; }
  .team-intro__text { padding: 32px; }
  .logos--certif { gap: 32px; }
  /* logos clients (page entreprises) : une seule ligne qui défile lentement de gauche à droite ;
     la piste contient deux fois les logos (copie ajoutée en JS) pour boucler sans à-coup */
  .logos--clients { flex-wrap: nowrap; overflow: hidden; justify-content: flex-start !important; gap: 0; margin: 0 -24px; padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .logos--clients .logos__track { display: flex; align-items: center; width: max-content; animation: logos-ltr var(--logos-dur, 30s) linear infinite; will-change: transform; }
  .logos--clients .logos__track > img { margin-right: 36px; flex: 0 0 auto; }
  .logos--clients .logos__clone { display: block; }
  .logos--certif img { height: 56px; max-height: 56px; }
}
@media (max-width: 680px) {
  .nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--cream);
    padding: 20px 24px 28px;
    gap: 18px;
    display: none;
    border-bottom: 1px solid rgba(48, 43, 43, 0.08);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; } /* 42 px de haut au doigt */
  .nav a.btn { padding: 11px 18px; margin-top: 6px; text-align: center; justify-content: center; }
  .site-header .container { padding: 0 24px; display: flex; justify-content: space-between; }
  .burger { display: block; }
  /* Outils : carrousel horizontal dans l'encart */
  .tools-card { padding: 28px 0 28px; }
  .tools-card h3 { padding: 0 24px; }
  .tools-grid {
    display: grid;
    grid-template-columns: none; /* annule les 3 colonnes du desktop */
    grid-auto-flow: column;
    grid-auto-columns: 72vw;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 24px 4px;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .tools-grid::-webkit-scrollbar { display: none; }
  .tool { scroll-snap-align: start; background: var(--cream); border-radius: var(--radius-md); padding: 20px; }
  /* Témoignages : le bouton « Voir tous » prend la ligne, les flèches en dessous */
  .carousel__nav { flex-wrap: wrap; }
  .carousel__nav .btn { flex: 1 0 100%; order: -1; text-align: center; }
  .carousel__nav button { min-height: 58px; } /* même hauteur que le bouton « Voir tous » */
  /* Témoignages : cartes au format portrait */
  .carousel__track { grid-auto-columns: 78vw; }
  .testimonial { min-height: 380px; }
  /* Pastilles : trois rangées sur une ligne chacune, plus larges que l'écran, qui dérivent lentement */
  .section--terra { overflow: hidden; }
  .pills { display: block; }
  .pills__row { display: flex; gap: 10px; width: max-content; margin-bottom: 10px; animation: pills-drift 40s ease-in-out infinite alternate; will-change: transform; } /* durée recalculée en JS : vitesse identique pour toutes les rangées */
  .pills__row:nth-child(even) { animation-direction: alternate-reverse; }
  .pills__row:last-child { margin-bottom: 0; }
  .pill { white-space: nowrap; }
  .badge-cards, .cards--3, .cards--2, .stats { grid-template-columns: 1fr; }
  .team-b2b__portraits { flex-direction: column; align-items: center; }
}

/* ---------- Page femmes, retours mobile du 7/10 ---------- */
/* Cartes « Vous êtes au bon endroit si » : petit picto qui signale que la carte se retourne (écrans tactiles) */
@media (hover: none), (max-width: 680px) {
  .flip__face.badge-card::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 18px;
    height: 18px;
    background: var(--terra);
    opacity: 0.5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 680px) {
  /* Accompagnement : les boutons tiennent sur une ligne */
  .offer__main { padding: 32px 24px; gap: 32px; }
  .offer__main .btn { width: 100%; white-space: nowrap; font-size: var(--text-base); padding: 14px 16px; }
  /* Collectif : intitulé sur sa propre ligne, durée en dessous */
  details.acc--detail summary { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 18px 20px; }
  .acc--detail .acc__title { grid-column: 1; white-space: nowrap; }
  .acc--detail .detail-card__meta { grid-column: 1; grid-row: 2; margin: 0; }
  details.acc--detail summary::after { grid-column: 2; grid-row: 1 / 3; }
  details.acc--detail .acc__body { padding: 0 20px 20px; }
  /* Imaginez-vous dans 6 mois : la section occupe la hauteur de l'écran */
  .section--pills { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .section--pills > .container { width: 100%; }
  /* Équipe : la photo garde sa hauteur naturelle (Safari pouvait la réduire à zéro) */
  .team-intro__photo { aspect-ratio: auto; width: 100%; }
  .team-intro__photo img { position: relative; inset: auto; height: auto; display: block; }
  /* Témoignages : flèches et bouton sur une seule ligne */
  .carousel__nav { flex-wrap: nowrap; gap: 8px; }
  .carousel__nav .btn { flex: 1 1 auto; order: 0; min-width: 0; white-space: nowrap; font-size: var(--text-sm); padding: 14px 12px; }
  .carousel__nav button { flex: 0 0 48px; width: 48px; min-height: 0; }
  .dawn__title { font-size: 1.5rem; }
  .dawn-band { --dome-w: 600px; }
}
@media (max-width: 360px) {
  .carousel__nav .btn { font-size: 14px; padding: 14px 8px; letter-spacing: -0.03em; }
  .carousel__nav { padding: 0 16px; }
  .team2__member figcaption { font-size: 13px; }
  .methode__tab { font-size: 11.5px; letter-spacing: -0.01em; text-transform: none; padding-left: 2px; padding-right: 2px; }
  .methode__tabs { gap: 6px; }
  .regard__pill { font-size: 13px; padding: 6px 12px; }
  /* petits écrans (iPhone SE) : les boutons restent sur une ligne sans élargir la page */
  .btn { font-size: 15px; padding-left: 14px; padding-right: 14px; letter-spacing: -0.03em; }
  .badge-card--cta { padding-left: 16px; padding-right: 16px; }
  .offer__main { padding-left: 18px; padding-right: 18px; }
  .offer { grid-template-columns: minmax(0, 1fr); }
  .dawn__title { font-size: 1.3rem; }
  .carousel__nav button { flex-basis: 42px; width: 42px; }
}

/* ---------- Accessibilité : reduced motion ---------- */
/* piste des logos : la deuxième moitié est la copie de la première, on la fait glisser vers la droite */
.logos__track { display: contents; }
.logos__clone { display: none; }
@keyframes logos-ltr {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes pills-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--shift, 0px)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .flip__inner { transition: none; }
  .flip__back > * { opacity: 1; transform: none; }
  .pill { opacity: 1; transform: none; }
  .pills { overflow-x: auto; } /* sans animation, les rangées restent lisibles en les faisant défiler */
  .logos--clients { overflow-x: auto; }
}

/* ---------- Mur des témoignages (temoignages.html) ---------- */
.wall-section h1 { margin-bottom: 12px; }
.wall-intro { margin: 0 auto 48px; max-width: 640px; }
.wall { columns: 3 300px; column-gap: 24px; }
.wall .testimonial { break-inside: avoid; min-height: 0; width: auto; margin: 0 0 24px; display: block; }