/* ==========================================================================
   Graine d'Iris — styles.css
   Design system — refonte 2026
   ========================================================================== */

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

/* ---------- Design tokens ---------- */
:root {
  /* Couleurs */
  --bleu-nuit: #0f2027;
  --bleu: #2c5364;
  --encre: #284052;
  --orange: #f7971e;
  --jaune: #ffd200;
  --creme: #fdfbf6;
  --gris: #5a6b78;
  --blanc: #ffffff;

  --gradient-soleil: linear-gradient(135deg, var(--jaune), var(--orange));
  --gradient-nuit: linear-gradient(135deg, var(--bleu-nuit), var(--bleu));

  /* Typo */
  --font-title: 'Space Grotesk', sans-serif;
  --font-text: 'Inter', sans-serif;

  /* Rayons */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(15, 32, 39, 0.05);
  --shadow-md: 0 14px 30px -12px rgba(15, 32, 39, 0.14), 0 4px 10px -6px rgba(15, 32, 39, 0.08);
  --shadow-lg: 0 34px 60px -22px rgba(15, 32, 39, 0.24), 0 10px 24px -12px rgba(15, 32, 39, 0.12);

  /* Rythme / transitions */
  --transition: all 0.3s ease;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  /* Header */
  --header-h: 76px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-text);
  color: var(--encre);
  background: var(--creme);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--encre);
  line-height: 1.15;
  font-weight: 700;
  text-wrap: balance;
}

p { color: var(--gris); }

/* Masquage visuel accessible : lisible par les lecteurs d'écran */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffd200;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll,
  .animate-from-left,
  .animate-from-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Layout utilities ---------- */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section {
  padding-block: clamp(4rem, 10vh, 8rem);
}

.section--alt {
  background: linear-gradient(180deg, #fff 0%, #f6f1e6 100%);
}

.section-title {
  font-family: var(--font-title);
  color: var(--encre);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 5px;
  border-radius: 4px;
  background: var(--gradient-soleil);
}

.section-title--center {
  text-align: center;
}

.section-title--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-subtitle {
  color: var(--gris);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  max-width: 62ch;
  margin-bottom: 2.5rem;
}

.section-subtitle--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  font-family: var(--font-text);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--gradient-soleil);
  color: var(--encre);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--ghost {
  border: 2px solid rgba(40, 64, 82, 0.25);
  color: var(--encre);
  background: rgba(255, 255, 255, 0.4);
}

.btn--ghost:hover {
  border-color: var(--orange);
  background: rgba(247, 151, 30, 0.08);
  transform: translateY(-2px);
}

.btn--ghost-dark {
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--blanc);
  background: rgba(255, 255, 255, 0.06);
}

.btn--ghost-dark:hover {
  border-color: var(--jaune);
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

/* ---------- Header (pill, glass, fixed) ---------- */
.site-header {
  position: fixed;
  top: 20px;
  /* centrage SANS pourcentage de transform (Safari saute sinon lors des transitions) :
     left constant = position centrée pour une pilule de 980px max */
  left: max(1.25rem, calc(50vw - 440px));
  transform: translateX(0);
  width: calc(100% - 2.5rem);
  max-width: 880px; /* pilule compacte : le menu reste proche du logo */
  z-index: 1000;
  background: rgba(253, 252, 250, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.6s var(--ease-premium);
}

.site-header.scrolled {
  top: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12);
  background: rgba(253, 252, 250, 0.94);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem 0.5rem 1.25rem;
  position: relative;
  transition: padding 0.45s var(--ease-premium);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--encre);
}

.brand span {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.45s var(--ease-premium), opacity 0.3s ease;
}

.brand img {
  border-radius: 8px;
  transition: width 0.45s var(--ease-premium), height 0.45s var(--ease-premium);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium), visibility 0.45s;
}

.nav-links a:not(.nav-cta) {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--encre);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.nav-links a:not(.nav-cta):hover {
  color: var(--orange);
}

.nav-links a.active {
  color: var(--encre);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-soleil);
}

.nav-cta.btn {
  padding: 0.7rem 1.5rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---------- Hero (home, crossfade piloté au scroll) ---------- */
.hero {
  position: relative;
  height: 165vh;                 /* la hauteur pilote la séquence de scroll */
}

.hero__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--blanc);
  padding-top: calc(var(--header-h) + clamp(0.75rem, 2vh, 2rem));
}

/* Fond FIXE (parallax) : le hero reste cloué au viewport,
   les sections suivantes glissent par-dessus. */
.hero.js-hero .hero__sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  z-index: 0;
}

/* Le contenu qui suit le hero fixe glisse AU-DESSUS (effet parallax).
   On l'enveloppe dans .after-hero : un seul bloc opaque qui masque
   totalement le hero fixe (pas de fuite via les bords transparents du marquee). */
.hero.js-hero ~ .after-hero {
  position: relative;
  z-index: 1;
  background: var(--creme);
}

/* .page-end (CTA + footer) vient après </main>, il glisse aussi par-dessus */
.hero.js-hero ~ .page-end {
  position: relative;
  z-index: 1;
}

/* Les deux photos superposées (grave sous, sourire dessus) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;   /* visages lisibles au centre-droit, texte à gauche */
}

.hero__img--smile {
  opacity: 1;                    /* fallback (sans JS / reduced-motion) : sourire visible */
}

/* Quand le JS pilote (mouvement autorisé) : on part de l'image grave */
.hero.js-hero .hero__img--smile {
  opacity: var(--p, 0);
  will-change: opacity;
}

.hero.js-hero .hero__bg {
  transform: scale(calc(1.04 - 0.04 * var(--p, 0)));
  transform-origin: center;
  will-change: transform;
}

/* Voile de lisibilité + micro-éclaircissement en fin de séquence */
.hero__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(14, 11, 6, 0.82) 0%,
    rgba(14, 11, 6, 0.62) 28%,
    rgba(14, 11, 6, 0.2) 52%,
    rgba(14, 11, 6, 0) 66%);
}

.hero.js-hero .hero__sticky::before {
  opacity: calc(1 - 0.12 * var(--p, 0));
}

/* Vignette cinématographique */
.hero__sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(8, 10, 10, 0.72) 0%, rgba(8, 10, 10, 0.28) 22%, transparent 48%),
    radial-gradient(120% 90% at 50% 20%, transparent 55%, rgba(6, 12, 16, 0.42) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(1rem, 3vh, 3rem) clamp(1.25rem, 5vh, 4.5rem);
}

.hero__text {
  max-width: 620px;
}

/* micro-évolution textuelle : le sous-titre s'éclaircit en fin de course */
.hero.js-hero .hero__content p {
  opacity: calc(0.85 + 0.15 * var(--p, 0));
}

/* Indicateur « défiler » : disparaît dès que la progression commence */
.hero__scrollcue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero.js-hero .hero__scrollcue {
  opacity: max(0, calc(1 - 8 * var(--p, 0)));
}

.hero__scrollcue svg {
  width: 22px;
  height: 22px;
  animation: hero-bounce 1.8s var(--ease-premium) infinite;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
}

.hero h1 {
  color: var(--blanc);
  font-size: clamp(2.1rem, min(5.5vw, 6.8vh), 4.2rem); /* borné aussi par la hauteur d'écran */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: clamp(0.8rem, 2vh, 1.25rem);
}

.text-gradient {
  background: var(--gradient-soleil);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--jaune);
}

.hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.02rem, 1.2vw, 1.1rem);
  margin-bottom: clamp(1.1rem, 3vh, 2.25rem);
  max-width: 460px;
}

.hero p strong {
  color: var(--blanc);
  font-weight: 700;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 4vh, 3rem);
}

/* ---------- Hero stats (glass cards + counters) ---------- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.5vh, 1rem);
  margin-top: clamp(1rem, 3.5vh, 3.5rem);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(10, 16, 22, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  text-align: left;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium), border-color 0.4s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 210, 0, 0.5);
  box-shadow: var(--shadow-lg);
}

.stat-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--jaune);
  background: rgba(255, 210, 0, 0.1);
  border: 1px solid rgba(255, 210, 0, 0.18);
}

.stat-card__icon svg {
  width: 34px;
  height: 34px;
}

.stat-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-card__num {
  display: block;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--jaune);
  line-height: 1.1;
  white-space: nowrap;
}

.stat-card__label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0.15rem;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  background: var(--gradient-nuit);
  color: var(--blanc);
  padding-block: calc(var(--header-h) + 3.5rem) clamp(3.5rem, 8vw, 6rem);
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 210, 0, 0.12), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(247, 151, 30, 0.12), transparent 50%);
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: var(--blanc);
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  margin-bottom: 1rem;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 65ch;
  margin-inline: auto;
  font-size: 1.1rem;
}

/* ---------- Generic stats row (inner pages) ---------- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
}

.stat {
  text-align: center;
  min-width: 140px;
}

.stat__num {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: #a85800;
  font-weight: 700;
}

.stat__label {
  color: var(--gris);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Stats-row placées dans un page-hero (fond sombre) : lisibilité */
.page-hero .stat__num {
  color: var(--jaune);
}

.page-hero .stat__label {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff3cf;
  color: var(--encre);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
}

.badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---------- Hero de page "Qui sommes-nous" (photo fondue + iris filigrane) ---------- */
.about-hero {
  position: relative;
  background: var(--gradient-nuit);
  color: var(--blanc);
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 3rem));
  padding-bottom: clamp(2rem, 5vh, 4.5rem);
  min-height: 100svh; /* le hero remplit l'écran, quelle que soit sa taille */
  display: flex;
  align-items: center;
}

.about-hero__media {
  position: absolute;
  inset: 0;
}

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
}

.about-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #0f2027 0%,
    rgba(15, 32, 39, 0.96) 34%,
    rgba(15, 32, 39, 0.72) 52%,
    rgba(15, 32, 39, 0.15) 78%,
    rgba(15, 32, 39, 0.05) 100%);
}

.about-hero__iris {
  position: absolute;
  left: -20px;
  bottom: -30px;
  width: clamp(140px, 16vw, 220px);
  height: auto;
  color: rgba(255, 210, 0, 0.28);
  z-index: 1;
  pointer-events: none;
}

.about-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.eyebrow--dark {
  color: var(--jaune);
}

.about-hero h1 {
  color: var(--blanc);
  font-size: clamp(2rem, min(4.2vw, 5.5vh), 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  max-width: 15ch;
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}

/* trait "coup de pinceau" sous le mot clé */
.hl-stroke {
  position: relative;
  white-space: nowrap;
}

.hl-stroke::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.14em;
  background: var(--jaune);
  border-radius: 999px;
  transform: rotate(-1.2deg) skewX(-14deg);
  opacity: 0.95;
}

.about-hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 44ch;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.about-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.about-hero__features li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-inline: clamp(1rem, 2.5vw, 1.75rem);
}

.about-hero__features li:first-child {
  padding-left: 0;
}

.about-hero__features li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.about-hero__features svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--jaune);
}

.about-hero__features strong {
  display: block;
  color: var(--blanc);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
}

.about-hero__features span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

/* Écrans peu hauts : tout tient sans déborder */
@media (max-height: 760px) {

  .about-hero h1 {
    font-size: clamp(1.8rem, 4.5vh, 2.6rem);
    margin-bottom: 0.9rem;
  }

  .about-hero p {
    margin-bottom: 1.25rem;
  }

  .about-hero__features svg {
    width: 26px;
    height: 26px;
  }

  .about-hero__iris {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .about-hero__media img {
    object-position: 70% center;
  }

  .about-hero__iris {
    width: 110px;
    opacity: 0.6;
  }

  .about-hero h1 {
    max-width: none;
  }

  .about-hero__media::after {
    background: linear-gradient(90deg,
      rgba(15, 32, 39, 0.97) 0%,
      rgba(15, 32, 39, 0.88) 55%,
      rgba(15, 32, 39, 0.7) 100%);
  }

  .about-hero__features {
    flex-direction: column;
    gap: 0.9rem;
  }

  .about-hero__features li {
    padding-inline: 0;
  }

  .about-hero__features li + li {
    border-left: none;
  }
}

/* ---------- Hero "Nos actions" : texte + triptyque photo ---------- */
.actions-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--gradient-nuit);
  color: var(--blanc);
  overflow: hidden;
  padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.actions-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  padding-block: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) clamp(2rem, 5vh, 4rem);
}

.actions-hero__text h1 {
  color: var(--blanc);
  font-size: clamp(2rem, min(3.8vw, 5.5vh), 3.1rem);
  font-weight: 800;
  line-height: 1.15;
  position: relative;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  max-width: 16ch;
}

.actions-hero__text h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 5px;
  border-radius: 4px;
  background: var(--jaune);
}

.actions-hero__text p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
}

/* Les photos du triptyque contiennent déjà pastilles et légendes :
   on les affiche entières (pas de recadrage), dans un bloc arrondi. */
.actions-hero__panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: rgba(255, 255, 255, 0.65); /* fins séparateurs clairs */
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  margin-top: calc(var(--header-h) + clamp(1rem, 3vh, 2rem));
  align-self: end;
}

.actions-hero__panel {
  display: block;
  overflow: hidden;
}

.actions-hero__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.actions-hero__panel:hover img {
  transform: scale(1.04);
}

/* ---------- En 2024, notre engagement en chiffres ---------- */
.chiffres-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.chiffre-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--blanc);
  border: 1px solid rgba(40, 64, 82, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.chiffre-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.chiffre-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.chiffre-card__icon svg { width: 34px; height: 34px; }

.chiffre-card__num {
  display: block;
  font-family: var(--font-title);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
}

.chiffre-card__label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.chiffre-card__label::after {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  margin-block: 0.55rem;
}

.chiffre-card p {
  font-size: 0.92rem;
}

.chiffre-card--y { background: #fdf8ec; }
.chiffre-card--y .chiffre-card__icon { background: #fdf3d1; color: #b45f00; }
.chiffre-card--y .chiffre-card__num,
.chiffre-card--y .chiffre-card__label { color: #b45f00; }
.chiffre-card--y .chiffre-card__label::after { background: var(--jaune); }

.chiffre-card--g .chiffre-card__icon { background: #e6efe0; color: #4c7040; }
.chiffre-card--g .chiffre-card__num,
.chiffre-card--g .chiffre-card__label { color: #4c7040; }
.chiffre-card--g .chiffre-card__label::after { background: #7d9b76; }

.chiffre-card--b .chiffre-card__icon { background: #e3edf7; color: #33618f; }
.chiffre-card--b .chiffre-card__num,
.chiffre-card--b .chiffre-card__label { color: #33618f; }
.chiffre-card--b .chiffre-card__label::after { background: #4c7397; }

.chiffres-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
  color: var(--encre);
  font-size: 1.02rem;
}

.chiffres-note__heart {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  color: var(--orange);
}

.chiffres-note__heart svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
  .actions-hero {
    grid-template-columns: 1fr;
  }

  .actions-hero__text {
    padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2rem));
    padding-bottom: 0;
  }

  .actions-hero__panels {
    margin-top: 0;
    margin-inline: auto;
    width: min(100%, 640px);
  }

  .chiffres-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ---------- "À quoi sert votre don ?" (soutenir, maquette) ---------- */
.don-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.don-card {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid rgba(40, 64, 82, 0.09);
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.don-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.don-card__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.don-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.don-card__icon svg { width: 30px; height: 30px; }

.don-card__head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.don-card__head h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin-top: 0.45rem;
}

.don-card > p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.don-card__pill {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.93rem;
}

.don-card__pill svg { width: 18px; height: 18px; flex-shrink: 0; }

.don-card--y { background: #fffaf0; }
.don-card--y .don-card__icon { background: #fdf3d1; color: #b45f00; }
.don-card--y h3 { color: #c96a00; }
.don-card--y h3::after { background: var(--orange); }
.don-card--y .don-card__pill { background: #fdeed3; color: #c96a00; }

.don-card--g .don-card__icon { background: #e6efe0; color: #4c7040; }
.don-card--g h3 { color: #4c7040; }
.don-card--g h3::after { background: #7d9b76; }
.don-card--g .don-card__pill { background: #e9f2e3; color: #40603a; }

.don-card--b .don-card__icon { background: #e3edf7; color: #2c5f96; }
.don-card--b h3 { color: #2c5f96; }
.don-card--b h3::after { background: #4c7397; }
.don-card--b .don-card__pill { background: #e3edf7; color: #2c5f96; }

/* Encart fiscal */
.don-fiscal {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  /* fond photo : mur clair à gauche (texte), iris en pot à droite */
  background-image: url('assets/fonds-iris-pot.jpg');
  background-size: cover;
  background-position: right center;
  border: 1px solid rgba(247, 151, 30, 0.25);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: clamp(9rem, 18vw, 16rem); /* réserve l'espace de l'iris */
  margin-top: 2rem;
  overflow: hidden;
}

.don-fiscal__left {
  text-align: center;
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid rgba(40, 64, 82, 0.15);
}

.don-fiscal__big {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #d97d00;
  line-height: 1;
}

.don-fiscal__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre);
}

.don-fiscal__label svg { width: 20px; height: 20px; color: #d97d00; }

.don-fiscal__body { position: relative; z-index: 1; max-width: 60ch; }

.don-fiscal__body h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.don-fiscal__body > p {
  font-size: 0.97rem;
}

.don-fiscal__note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  color: var(--gris);
  margin-block: 0.8rem 1.2rem;
}

.don-fiscal__note svg { width: 16px; height: 16px; color: #d97d00; flex-shrink: 0; }


.don-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
  color: var(--encre);
  font-size: 1rem;
}

.don-secure svg { width: 22px; height: 22px; color: #4c7040; flex-shrink: 0; }

@media (max-width: 1024px) {
  .don-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

@media (max-width: 768px) {
  .don-fiscal { grid-template-columns: 1fr; }

  .don-fiscal__left {
    border-right: none;
    border-bottom: 1px solid rgba(40, 64, 82, 0.15);
    padding-right: 0;
    padding-bottom: 1.25rem;
  }

  .don-fiscal {
    padding-right: clamp(1.5rem, 3vw, 2.5rem); /* l'iris passe derrière, on garde la lisibilité */
    background-position: 82% center;
  }
}

/* ---------- Page contact (maquette "Parlons de votre situation") ---------- */
.contact-hero {
  position: relative;
  background: var(--creme);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem));
  overflow: visible;
}

.contact-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: min(56vw, 820px);
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.contact-hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.contact-hero h1 {
  font-size: clamp(2.1rem, min(4.2vw, 5.5vh), 3.2rem);
  font-weight: 800;
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 0.9rem;
}

.contact-hero h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 5px;
  border-radius: 4px;
  background: var(--jaune);
}

.contact-hero p {
  color: var(--encre);
  font-size: 1.05rem;
}

.contact-main {
  padding-top: 0;
  position: relative;
  z-index: 1;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 1.75rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

/* Carte coordonnées bleu nuit */
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #12263a;
  color: var(--blanc);
  border-radius: 20px;
  padding: 1.9rem 1.7rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.contact-card::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 210, 0, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.contact-card h2 {
  color: var(--blanc);
  font-size: 1.45rem;
  margin-bottom: 0.4rem;
}

.contact-card h2::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--jaune);
  margin-top: 0.6rem;
}

.contact-card__list {
  margin-top: 1.4rem;
}

.contact-card__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  font-size: 0.98rem;
  line-height: 1.45;
}

.contact-card__list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-card__list a:hover {
  color: var(--jaune);
}

.contact-card__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 210, 0, 0.5);
  color: var(--jaune);
}

.contact-card__ico svg { width: 19px; height: 19px; }

.contact-card__alert {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--gradient-soleil);
  color: var(--encre);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.contact-card__alert strong {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.contact-card__bell {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blanc);
  color: #c96a00;
}

.contact-card__bell svg { width: 22px; height: 22px; }

/* Formulaire */
.contact-form {
  background: var(--blanc);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.contact-form__submit {
  width: 100%;
  gap: 0.7rem;
  padding: 1.05rem 2rem;
  font-size: 1.02rem;
}

.contact-form__submit svg { width: 20px; height: 20px; }

.contact-form .contact-form__note {
  display: block; /* les lignes occupent toute la largeur du bouton */
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: none; /* prime sur .form-note (50ch), déclarée plus loin dans le fichier */
}

.contact-form__note svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: var(--encre);
  vertical-align: -3px;
  margin-right: 0.4rem;
}

/* Bandeau réassurance */
.contact-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fbf7ee;
  border: 1px solid rgba(40, 64, 82, 0.07);
  border-radius: 16px;
  padding: 1.4rem 1rem;
}

.contact-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.25rem;
}

.contact-feature + .contact-feature {
  border-left: 1px solid rgba(40, 64, 82, 0.12);
}

.contact-feature__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e9f2e3;
  color: #4c7040;
}

.contact-feature__icon svg { width: 26px; height: 26px; }

.contact-feature strong {
  display: block;
  color: var(--encre);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.contact-feature span {
  color: var(--gris);
  font-size: 0.88rem;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }

  .contact-hero__photo { opacity: 0.35; width: 70vw; }

  .contact-features { grid-template-columns: 1fr; gap: 1rem; }

  .contact-feature + .contact-feature {
    border-left: none;
    border-top: 1px solid rgba(40, 64, 82, 0.12);
    padding-top: 1rem;
  }
}

@media (max-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Le sport comme levier (nos-actions) ---------- */
.sport-levier {
  align-items: center;
}

.sport-values {
  display: flex;
  margin-top: 2rem;
}

.sport-values li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.sport-values li:first-child {
  padding-left: 0;
}

.sport-values li + li {
  border-left: 1px solid rgba(40, 64, 82, 0.15);
}

.sport-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fdf3d1;
  color: var(--encre);
}

.sport-values__icon svg {
  width: 34px;
  height: 34px;
}

.sport-values strong {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre);
}

.sport-values strong::after {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
  margin: 0.35rem auto 0;
}

@media (max-width: 600px) {
  .sport-values {
    flex-direction: column;
    gap: 1.25rem;
  }

  .sport-values li {
    flex-direction: row;
    text-align: left;
    padding-inline: 0;
  }

  .sport-values li + li {
    border-left: none;
  }

  .sport-values strong::after {
    margin-left: 0;
  }
}

/* ---------- Équipe pluridisciplinaire — bento autour d'une carte centrale ---------- */
.team-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.tcard {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid rgba(40, 64, 82, 0.08);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.tcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.tcard__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.tcard__head h3 {
  font-size: 1.08rem;
  line-height: 1.3;
}

.tcard > p {
  font-size: 0.93rem;
  margin-bottom: 1rem;
}

.tcard > img {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

.tcard__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.tcard__icon svg {
  width: 26px;
  height: 26px;
}

.tcard__icon--y { background: #fdf3d1; color: #b45f00; }
.tcard__icon--b { background: #e3edf7; color: #4c7397; }
.tcard__icon--g { background: #e6efe0; color: #5f8a52; }
.tcard__icon--v { background: #ece7f4; color: #6e5a9e; }
.tcard__icon--r { background: #fbe7e7; color: #b95c5c; }

.team-center {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #12263a;
  color: var(--blanc);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-lg);
}

.team-center > svg {
  width: 42px;
  height: 42px;
  color: var(--jaune);
  margin-bottom: 0.9rem;
}

.team-center__line1 {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
}

.team-center__line2 {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  color: var(--jaune);
}

.team-center__line2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--jaune);
  margin: 0.7rem auto 0;
}

.team-center p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin-top: 0.9rem;
  max-width: 26ch;
}

.tcard--wide {
  grid-column: span 6;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.tcard--wide > div {
  flex: 1;
}

.tcard--wide > div > p {
  font-size: 0.93rem;
}

.tcard--wide > img {
  margin-top: 0;
  width: 42%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 1024px) {
  .team-bento .tcard,
  .team-center { grid-column: span 6; }

  .tcard--wide { grid-column: span 12; }
}

@media (max-width: 600px) {
  .team-bento .tcard,
  .team-center,
  .tcard--wide { grid-column: span 12; }

  .tcard--wide { flex-direction: column; align-items: stretch; }

  .tcard--wide > img { width: 100%; aspect-ratio: 16 / 9; }
}

/* ---------- Nos valeurs — grille bento (qui-sommes-nous) ---------- */
.valeurs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.vcard {
  position: relative;
  grid-column: span 4;
  background: #fffdf7;
  border: 1px solid rgba(40, 64, 82, 0.08);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.6rem;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.vcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.valeurs-grid .vcard:nth-child(1) { grid-column: span 6; }
.valeurs-grid .vcard:nth-child(2),
.valeurs-grid .vcard:nth-child(3) { grid-column: span 3; }

.vcard__num {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  border-radius: 8px;
  background: var(--jaune);
  color: var(--encre);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 1;
}

.vcard__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.4rem 0 0.9rem;
}

.vcard__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fdf3d1;
  color: var(--encre);
}

.vcard__icon svg {
  width: 28px;
  height: 28px;
}

.vcard h3 {
  font-size: 1.15rem;
  line-height: 1.3;
}

.vcard h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
  margin-top: 0.5rem;
}

.vcard > p {
  font-size: 0.95rem;
}

/* Carte 01 : photo + voile bleu nuit */
.vcard--photo {
  overflow: hidden;
  background: var(--bleu-nuit);
  border: none;
  color: var(--blanc);
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

.vcard--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.vcard--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 32, 39, 0.94) 0%, rgba(15, 32, 39, 0.75) 34%, rgba(15, 32, 39, 0.12) 62%, transparent 80%);
}

.vcard--photo .vcard__body {
  position: relative;
  z-index: 1;
  max-width: 55%;
}

.vcard--photo .vcard__icon {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: var(--jaune);
  margin-bottom: 0.9rem;
}

.vcard--photo h3 {
  color: var(--blanc);
  font-size: 1.4rem;
}

.vcard--photo p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
}

/* Variantes de fond */
.vcard--blue {
  background: #eef3f9;
  border-color: rgba(40, 64, 82, 0.1);
}

.vcard--blue .vcard__num {
  background: var(--encre);
  color: var(--blanc);
}

.vcard--blue .vcard__icon {
  background: #dde8f3;
}

.vcard--warm {
  background: #fdf8ec;
}

/* surligneur jaune */
.hl-marker {
  background: linear-gradient(transparent 55%, rgba(255, 210, 0, 0.65) 55%);
  padding-inline: 2px;
}

@media (max-width: 1024px) {
  .valeurs-grid .vcard,
  .valeurs-grid .vcard:nth-child(1),
  .valeurs-grid .vcard:nth-child(2),
  .valeurs-grid .vcard:nth-child(3) { grid-column: span 6; }

  .vcard--photo .vcard__body { max-width: 70%; }
}

@media (max-width: 600px) {
  .valeurs-grid .vcard,
  .valeurs-grid .vcard:nth-child(1),
  .valeurs-grid .vcard:nth-child(2),
  .valeurs-grid .vcard:nth-child(3) { grid-column: span 12; }

  .vcard--photo .vcard__body { max-width: 100%; }
}

/* ---------- Section "Notre histoire" plein écran ---------- */
.about-histoire {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.about-histoire > .container {
  width: 100%;
}

.about-histoire .collage__main img {
  max-height: min(72svh, 700px);
}

/* ---------- Le bureau + chiffres clés (qui-sommes-nous) ---------- */
.bureau__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.bureau__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.bureau-card {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--blanc);
  border-radius: 16px;
  padding: 1rem 3rem 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.bureau-card__avatar {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
}

.bureau-card__name {
  display: block;
  font-weight: 700;
  color: var(--encre);
  line-height: 1.25;
}

.bureau-card__name::after {
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--jaune);
  margin-block: 4px 5px;
}

.bureau-card__role {
  color: var(--gris);
  font-size: 0.88rem;
}

.bureau-card__icon {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fdf3d1;
  color: #b45f00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bureau-card__icon svg {
  width: 16px;
  height: 16px;
}

.bureau__note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--blanc);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  margin-top: 1.25rem;
  box-shadow: var(--shadow-sm);
  color: var(--gris);
  font-size: 0.95rem;
}

.bureau__note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--orange);
}

.keyfigures {
  background: #12263a;
  border-radius: 20px;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--blanc);
}

.keyfigures__title {
  display: block;
  color: var(--jaune);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.keyfigures__title::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--jaune);
  margin-top: 0.5rem;
}

.keyfigure {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  padding: 1.2rem;
  margin-top: 1.2rem;
}

.keyfigure__icon {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fdf3d1;
  color: #12263a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.keyfigure__icon svg {
  width: 28px;
  height: 28px;
}

.keyfigure__num {
  display: block;
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 700;
  color: var(--jaune);
  line-height: 1.1;
}

.keyfigure strong {
  display: block;
  color: var(--blanc);
  font-weight: 700;
  line-height: 1.3;
  margin-block: 0.15rem 0.2rem;
}

.keyfigure__sub {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}

.keyfigures__src {
  margin-top: 1.2rem;
  text-align: center;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

@media (max-width: 1024px) {
  .bureau__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Collage photo avec cartes superposées (qui-sommes-nous) ---------- */
.collage {
  position: relative;
  margin-inline: 0.9rem; /* laisse dépasser les cartes latérales */
  margin-bottom: 1.25rem; /* espace pour la carte qui déborde en bas */
}

.collage__main {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.collage__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 0.92;
}

.collage__badge {
  position: absolute;
  top: 4%;
  left: -0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--jaune);
  color: var(--encre);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  max-width: 9.5rem;
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.collage__badge svg {
  width: 30px;
  height: 30px;
  margin-bottom: 0.35rem;
}

.collage__badge strong {
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}

.collage__inset {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 42%;
  border-radius: 16px;
  border: 5px solid #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.collage__inset img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.collage__dark {
  position: absolute;
  right: -0.9rem;
  bottom: -1rem; /* déborde légèrement du coin bas-droit, comme la maquette */
  width: clamp(9rem, 34%, 11.5rem);
  background: #12263a;
  color: var(--blanc);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-lg);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.collage__dark svg {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 26px;
  height: 26px;
  color: var(--jaune);
}

.collage__dark strong {
  display: block;
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--jaune);
  line-height: 1.1;
}

@media (max-width: 600px) {
  .collage {
    margin-inline: 0.5rem;
  }

  .collage__badge {
    left: -0.5rem;
    padding: 0.7rem 0.8rem;
    max-width: 8rem;
    font-size: 0.78rem;
  }

  .collage__badge strong {
    font-size: 1.4rem;
  }

  .collage__dark {
    right: -0.5rem;
    padding: 0.85rem 0.95rem;
    font-size: 0.82rem;
  }

  .collage__dark strong {
    font-size: 2rem;
  }
}

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Grids / cards ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.card__body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.card__body h3 {
  font-size: 1.25rem;
}

.card__link {
  color: #a85800;
  font-weight: 600;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.3s ease;
}

.card__link:hover {
  gap: 0.6rem;
}

/* ---------- Images ---------- */
.img-round {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  object-fit: cover;
}

/* ---------- Lists ---------- */
.list-check li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.9rem;
  color: var(--encre);
}

.list-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--encre);
  font-weight: 700;
  background: var(--gradient-soleil);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* ---------- Split screen (2 panels) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.split-panel {
  position: relative;
  min-height: clamp(420px, 55vh, 560px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-md);
}

.split-panel__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.split-panel__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fdf3d1; /* jaune pâle opaque, comme la maquette */
  color: var(--encre);
}

.split-panel__icon svg {
  width: 26px;
  height: 26px;
}

.split-panel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-premium);
}

.split-panel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 32, 39, 0.88), rgba(15, 32, 39, 0.25) 60%);
  transition: background 0.5s ease;
}

.split-panel__content {
  position: relative;
  z-index: 1;
  padding: 2.5rem;
  color: var(--blanc);
}

.split-panel__content h3 {
  color: var(--blanc);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 0;
}

.split-panel__content p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.1rem;
  max-width: 46ch;
}

.split-panel__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--jaune);
  transition: gap 0.3s ease;
}

.split-panel:hover .split-panel__image {
  transform: scale(1.06);
}

.split-panel:hover .split-panel__overlay {
  background: linear-gradient(0deg, rgba(15, 32, 39, 0.72), rgba(15, 32, 39, 0.1) 60%);
}

.split-panel:hover .split-panel__arrow {
  gap: 0.85rem;
}

/* ---------- Numbered cards (01/02/03) ---------- */
.numbered-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.numbered-card {
  position: relative;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.25rem 1.85rem 2rem;
  border-left: 5px solid var(--jaune);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.numbered-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.numbered-card--orange { border-left-color: var(--orange); }
.numbered-card--blue { border-left-color: var(--bleu); }

.numbered-card__num {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(56px, 6vw, 86px);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-soleil);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
}

.numbered-card--orange .numbered-card__num {
  background: linear-gradient(135deg, var(--orange), var(--bleu));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.numbered-card--blue .numbered-card__num {
  background: linear-gradient(135deg, var(--bleu), var(--bleu-nuit));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.numbered-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}

.numbered-card__body h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.numbered-card__body p {
  margin-bottom: 1rem;
}

/* ---------- Process steps (01-04) ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}

.process-step {
  position: relative;
  padding-top: 1rem;
}

.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: -2rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(247, 151, 30, 0.35), rgba(247, 151, 30, 0.05));
}

.process-step:last-child::before {
  display: none;
}

.process-step__num {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 2.25rem;
  font-weight: 700;
  color: rgba(40, 64, 82, 0.18);
  margin-bottom: 0.75rem;
}

.process-step__title {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.process-step__text {
  color: var(--gris);
  font-size: 0.95rem;
}

/* ---------- Quote band ---------- */
.quote-band {
  background: var(--gradient-nuit);
  text-align: center;
  padding-block: clamp(2.5rem, 6vh, 4rem); /* bande compacte, comme la maquette */
  position: relative;
  overflow: hidden;
}

.quote-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 30%, rgba(255, 210, 0, 0.1), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(247, 151, 30, 0.12), transparent 45%);
}

.quote-band__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blanc);
  margin-inline: auto;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.testimonial {
  position: relative;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -0.34em;
  left: 0.5rem;
  font-family: var(--font-title);
  font-size: 7rem;
  line-height: 1;
  color: rgba(247, 151, 30, 0.14);
  z-index: 0;
  pointer-events: none;
}

.testimonial::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--gradient-soleil);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-premium);
}

.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.testimonial:hover::after {
  transform: scaleX(1);
}

.testimonial__quote {
  position: relative;
  z-index: 1;
  color: var(--encre);
  font-size: 1.05rem;
  font-style: italic;
}

.testimonial__quote::before { content: '\201C'; }
.testimonial__quote::after { content: '\201D'; }

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-soleil);
  color: var(--encre);
  font-family: var(--font-title);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial__meta strong {
  display: block;
  color: var(--encre);
  font-size: 0.95rem;
}

.testimonial__meta span {
  color: var(--gris);
  font-size: 0.85rem;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--gradient-nuit);
  color: var(--blanc);
  text-align: center;
}

.cta-band h2 {
  color: var(--blanc);
  margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
  font-size: clamp(1.7rem, min(3.5vw, 4.5vh), 2.6rem);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  max-width: 55ch;
  margin-inline: auto;
}

.cta-band__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--encre);
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.85rem 1rem;
  border: 1px solid #d7dee2;
  border-radius: var(--radius);
  background: var(--blanc);
  color: var(--encre);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(247, 151, 30, 0.15);
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-required::after {
  content: ' *';
  color: var(--orange);
}

.form-note {
  font-size: 0.82rem;
  color: var(--gris);
  margin-top: 1rem;
  max-width: 50ch;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

/* Icône de note : petite et alignée (sinon le SVG occupe toute la largeur). */
.form-note svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ---------- Scroll animations ---------- */
.animate-on-scroll,
.animate-from-left,
.animate-from-right {
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
  transition-delay: var(--step-delay, 0s);
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
}

.animate-from-left {
  opacity: 0;
  transform: translateX(-60px);
}

.animate-from-right {
  opacity: 0;
  transform: translateX(60px);
}

.numbered-card.animate-on-scroll {
  transform: scale(1.15);
}

.animate-on-scroll.is-visible,
.animate-from-left.is-visible,
.animate-from-right.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  background: var(--encre);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  z-index: 2000;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bleu-nuit);
  color: rgba(255, 255, 255, 0.85);
  padding-block: clamp(2.25rem, 6vh, 4rem) clamp(1rem, 2.5vh, 1.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.footer-grid h3 {
  color: var(--blanc);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.footer-grid p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1rem;
}

.footer-grid ul li {
  margin-bottom: 0.6rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-grid a:hover {
  color: var(--jaune);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom a:hover {
  color: var(--jaune);
}

/* ---------- Parcours d'accompagnement (journey, maquette) ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* chaque étape est une carte bordée (maquette) */
.journey-step {
  background: var(--blanc);
  border: 1px solid rgba(40, 64, 82, 0.09);
  border-radius: 14px;
  padding: 0.7rem 0.7rem 1.6rem;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.journey-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.journey-step__marker,
.journey-step__title,
.journey-step__text {
  padding-inline: 0.75rem;
}

.journey-step__image {
  height: clamp(170px, 18vw, 230px);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.journey-step__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.journey-step:hover .journey-step__image img {
  transform: scale(1.05);
}

.journey-step__marker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.journey-step__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fdf3d1; /* jaune pâle, icône sombre — comme la maquette */
  color: var(--encre);
}

.journey-step__icon svg {
  width: 24px;
  height: 24px;
}

.journey-step__num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.4rem;
  color: #d97d00; /* orangé maquette, contraste préservé */
}

/* trait de liaison qui court vers l'étape suivante */
.journey-step__marker::after {
  content: '';
  flex: 1;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(247, 151, 30, 0.55);
}

.journey-step__title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.journey-step__text {
  font-size: 0.95rem;
}

/* bandeau sous la grille */
.journey-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: fit-content;
  margin: 2.5rem auto 0;
  padding: 0.85rem 1.5rem;
  background: #faf3e0;
  border: 1px solid rgba(247, 151, 30, 0.15);
  border-radius: 12px;
  color: var(--encre);
  font-size: 0.98rem;
}

.journey-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--orange);
}

@media (max-width: 1024px) {
  .journey {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .journey {
    grid-template-columns: 1fr;
  }

  .journey-step__image {
    height: clamp(180px, 42vw, 240px);
  }
}

/* ==========================================================================
   Media queries
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .process {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-step::before {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme); /* opaque : rien ne transparaît */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 32, 39, 0.28);
    padding: 0.6rem 0.6rem 0.85rem;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .nav-links li:not(:last-child) {
    border-bottom: 1px solid rgba(40, 64, 82, 0.08);
  }

  .nav-links a:not(.nav-cta) {
    display: block;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    font-size: 1.05rem;
  }

  .nav-links a:not(.nav-cta):hover,
  .nav-links a:not(.nav-cta):active {
    background: rgba(247, 151, 30, 0.1);
    color: var(--encre);
  }

  .nav-links a.active {
    color: #a85800;
  }

  .nav-links a.active::after {
    display: none;
  }

  .nav-cta.btn {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0.5rem 0;
    padding: 0.95rem 1.5rem;
  }

  /* Voile sombre derrière le menu ouvert */
  body.menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 39, 0.5);
    z-index: 900; /* sous le header (1000), au-dessus du reste */
    animation: fadeInUp 0.25s ease;
  }

  .grid-2,
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .process {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Hero : garder des visages visibles + voile renforcé sur petit écran */
  .hero__img {
    object-position: 64% center;
  }

  .hero__sticky::before {
    background: linear-gradient(90deg,
      rgba(14, 11, 6, 0.9) 0%,
      rgba(14, 11, 6, 0.78) 35%,
      rgba(14, 11, 6, 0.5) 70%,
      rgba(14, 11, 6, 0.28) 100%);
  }

  .stat-card__icon {
    width: 40px;
    height: 40px;
  }

  .stat-card__icon svg {
    width: 28px;
    height: 28px;
  }

  .stat-card__num {
    font-size: 1.4rem;
  }
}

@media (max-width: 600px) {
  .container {
    padding-inline: 1.25rem;
  }

  .site-header {
    width: calc(100% - 1.5rem);
    left: max(0.75rem, calc(50vw - 440px));
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .stats-row {
    gap: 1.5rem;
  }

  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Signature effects — home 2026 (additifs, non destructifs)
   ========================================================================== */

/* ---------- Barre de progression du scroll ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 1500;
  background: rgba(15, 32, 39, 0.06);
  pointer-events: none;
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--jaune), var(--orange));
  box-shadow: 0 0 12px rgba(247, 151, 30, 0.5);
  transition: width 0.1s linear;
}

/* ---------- Header pilule rétractable (desktop) ---------- */
@media (min-width: 769px) {
  .site-header {
    overflow: hidden;
  }

  .brand {
    transition: gap 0.45s var(--ease-premium);
  }

  /* Au dé-repli (scroll vers le haut) : la pilule revient d'abord au centre,
     PUIS les liens et le nom réapparaissent — sinon ils surgissent à droite. */
  .site-header:not(.shrink) .nav-links {
    transition-delay: 0.4s;
    transition-duration: 0.3s;
  }

  .site-header:not(.shrink) .brand span {
    transition-delay: 0.35s;
  }

  .site-header.shrink {
    max-width: 72px; /* quasi-cercle autour du logo */
    /* glissade vers la gauche : translation en longueurs pures (px/vw, jamais de %),
       interpolée correctement par tous les navigateurs */
    transform: translateX(min(0px, calc(460px - 50vw)));
    transition-delay: 0.15s; /* les liens s'effacent d'abord, la pilule se replie ensuite */
  }

  .site-header.shrink .nav {
    padding: 0.55rem 0;
    justify-content: center;
  }

  .site-header.shrink .brand {
    gap: 0; /* sinon le gap décale le logo du centre */
  }

  .site-header.shrink .brand img {
    width: 50px;
    height: 50px;
  }

  .site-header.shrink .brand span {
    max-width: 0;
    opacity: 0;
  }

  .nav-links {
    min-width: 0;
    max-width: 60rem;
    max-height: 80px;
    overflow: hidden;
  }

  .site-header.shrink .nav-links {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(12px);
    max-width: 0; /* rend aussi l'espace occupé, sinon le logo est poussé hors de la pilule */
    max-height: 0; /* et sa hauteur, sinon la pilule est trop haute et le logo décentré */
    gap: 0;
    transition-duration: 0.2s; /* disparition rapide avant le repli */
  }

  /* IMPORTANT : plus d'ouverture au SURVOL de la souris.
     La pilule rétractée reste un logo propre et stable (fini le bug de la
     pilule blanche large et vide au survol). Le menu complet réapparaît
     dès qu'on remonte vers le haut de la page.
     On garde uniquement l'ouverture au FOCUS clavier (accessibilité). */
  .site-header.shrink:focus-within {
    max-width: 880px;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .site-header.shrink:focus-within .nav {
    padding: 0.5rem 0.6rem 0.5rem 1.25rem;
    justify-content: space-between;
  }

  .site-header.shrink:focus-within .brand {
    gap: 0.65rem;
  }

  .site-header.shrink:focus-within .brand img {
    width: 44px;
    height: 44px;
    opacity: 1;
  }

  .site-header.shrink:focus-within .brand span {
    max-width: 200px;
    opacity: 1;
  }

  .site-header.shrink:focus-within .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-width: 60rem;
    max-height: 80px;
    gap: 2rem;
    transition-delay: 0s;
    transition-duration: 0.3s;
  }
}

/* ---------- Pilule rétractable (mobile) : repli sur logo + burger ---------- */
@media (max-width: 768px) {
  .site-header.shrink:not(:has(.nav-links.is-open)) {
    max-width: 128px;
    transform: translateX(min(0px, calc(452px - 50vw)));
  }

  .site-header.shrink:not(:has(.nav-links.is-open)) .nav {
    padding: 0.5rem 0.75rem;
  }

  .site-header.shrink:not(:has(.nav-links.is-open)) .brand span {
    max-width: 0;
    opacity: 0;
  }
}

/* ---------- Eyebrow / sur-titre (texte simple, sans pilule) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #a85800;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jaune);
  flex-shrink: 0;
}

.section-head--center {
  text-align: center;
}

.section-head--center .eyebrow {
  margin-inline: auto;
}

/* ---------- Hero : micro-particules « graines » ---------- */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero__particles span {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2b0, var(--jaune));
  opacity: 0;
  box-shadow: 0 0 10px rgba(255, 210, 0, 0.6);
  animation: seed-float 14s linear infinite;
}

.hero__particles span:nth-child(1) { left: 12%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 0s; }
.hero__particles span:nth-child(2) { left: 28%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 3s; }
.hero__particles span:nth-child(3) { left: 44%; width: 6px; height: 6px; animation-duration: 13s; animation-delay: 6s; }
.hero__particles span:nth-child(4) { left: 61%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 1.5s; }
.hero__particles span:nth-child(5) { left: 74%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 4.5s; }
.hero__particles span:nth-child(6) { left: 86%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: 8s; }
.hero__particles span:nth-child(7) { left: 53%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 10s; }

/* Particules décoratives désactivées sur petits écrans */
@media (max-width: 768px) {
  .hero__particles { display: none; }
}

@keyframes seed-float {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translateY(-52vh) translateX(18px) scale(1); opacity: 0.5; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-100vh) translateX(-10px) scale(0.7); opacity: 0; }
}

/* ---------- Marquee (bande de valeurs) ---------- */
.marquee {
  overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--creme);
  border-block: 1px solid rgba(40, 64, 82, 0.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
}

.marquee__word {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  letter-spacing: -0.01em;
  color: var(--encre);
  white-space: nowrap;
}

.marquee__word--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(40, 64, 82, 0.7);
}

.marquee__word--soleil {
  background: var(--gradient-soleil);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.marquee__sep {
  color: var(--orange);
  font-size: clamp(1rem, 3vw, 1.8rem);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Cartes 3 pôles ---------- */
.pole-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.pole-card {
  position: relative;
  background: var(--blanc);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  overflow: visible;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.pole-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.pole-card__image {
  position: relative;
  height: var(--pole-img-h, 260px);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.pole-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pole-card__badge {
  position: absolute;
  left: 1.5rem;
  top: var(--pole-img-h, 260px); /* à cheval sur le bas de l'IMAGE (le badge est hors du conteneur image pour ne pas être rogné par son overflow) */
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--encre);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #fff, var(--shadow-sm);
  z-index: 1;
}

.pole-card__body {
  padding: 2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pole-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.pole-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 210, 0, 0.15);
  color: var(--encre);
}

.pole-card__icon svg {
  width: 24px;
  height: 24px;
}

.pole-card__head h3 {
  font-size: 1.2rem;
}

.pole-card__body p {
  font-size: 0.95rem;
}

.pole-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-top: 0.25rem;
  font-weight: 700;
  color: var(--encre);
  border-bottom: 3px solid var(--jaune);
  padding-bottom: 2px;
}

.pole-card__arrow {
  color: var(--orange);
  transition: transform 0.3s ease;
}

.pole-card__link:hover .pole-card__arrow {
  transform: translateX(4px);
}

/* ---------- CTA band avec photo + voile ---------- */
.cta-band--photo {
  position: relative;
  background-image: linear-gradient(120deg, rgba(15, 32, 39, 0.92), rgba(44, 83, 100, 0.82)), url('assets/friends-spending-time-together.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cta-band--photo > .container {
  position: relative;
  z-index: 1;
}

/* Fin de page : CTA finale + footer sur le même fond photo continu (accueil) */
.page-end {
  position: relative;
  z-index: 1; /* passe au-dessus des fonds fixes (hero soutenir) */
  background-color: var(--bleu-nuit); /* repli sombre : plus de crème visible si la photo ne couvre pas tout */
  background-image: linear-gradient(120deg, rgba(15, 32, 39, 0.93), rgba(44, 83, 100, 0.84)), url('assets/friends-spending-time-together.jpg');
  background-size: cover;
  background-position: center;
}

/* Repli sombre global : tout débordement/rebond en bas de page reste sombre,
   jamais un aplat crème « vide » sous le footer sur mobile. */
html { background-color: var(--bleu-nuit); }

.page-end .cta-band {
  background: transparent;
  padding-block: clamp(2.75rem, 8vh, 6rem); /* s'adapte à la hauteur d'écran */
}

.page-end .site-footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Pages sans CTA finale (contact, mentions) : le footer seul sur le fond photo */
.page-end--footer-only .site-footer {
  border-top: none;
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

/* ==========================================================================
   Responsive — signature effects
   ========================================================================== */
@media (max-width: 900px) {
  .hero {
    height: 180vh;               /* séquence plus courte sur mobile */
  }

  .pole-cards {
    grid-template-columns: 1fr;
  }
}

/* Écrans peu hauts (portables 13", petites fenêtres) : tout tient dans 100svh */
@media (min-width: 769px) and (max-height: 820px) {
  .stat-card {
    padding: 0.6rem 0.8rem;
    gap: 0.65rem;
  }

  .stat-card__icon {
    width: 38px;
    height: 38px;
  }

  .stat-card__icon svg {
    width: 26px;
    height: 26px;
  }

  .stat-card__num {
    font-size: 1.25rem;
  }

  .hero__scrollcue {
    bottom: 0.5rem;
  }
}

@media (max-height: 620px) {
  .hero__scrollcue {
    display: none;
  }

  .hero__eyebrow {
    font-size: 0.75rem;
    padding: 0.35rem 0.85rem;
  }
}

/* Petits mobiles : compacité du hero */
@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.4rem);
  }

  .stat-card {
    padding: 0.7rem 0.8rem;
    gap: 0.65rem;
  }

  .stat-card__icon {
    width: 36px;
    height: 36px;
  }

  .stat-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .stat-card__num {
    font-size: 1.2rem;
  }
}

/* Très grands écrans : le texte respire davantage */
@media (min-width: 1600px) {
  .hero__text {
    max-width: 680px;
  }
}

@media (max-width: 600px) {
  .marquee__word {
    font-size: clamp(1.4rem, 8vw, 2.2rem);
  }
}

/* ==========================================================================
   Reduced motion — signature effects
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__particles { display: none; }

  .scroll-progress { display: none; }

  .marquee__track { animation: none; transform: none; }

  /* Hero : pas de séquence animée, statique 100svh avec l'image souriante */
  .hero {
    height: auto !important;
    min-height: 100svh;
  }

  .hero__sticky {
    position: static !important;
    min-height: 100svh;
  }

  .hero__img--smile {
    opacity: 1 !important;
  }

  .hero__bg {
    transform: none !important;
  }

  .hero__scrollcue {
    display: none;
  }
}

/* ==========================================================================
   Page "Nous soutenir" — refonte 2026 (additifs, préfixe .soutien-*)
   ========================================================================== */

/* ---------- Hero : nuit + photo fondue à droite + raccourcis cliquables ---------- */
.soutien-hero {
  position: relative;
  background: var(--gradient-nuit);
  color: var(--blanc);
}

.soutien-hero__sticky {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 3rem));
  padding-bottom: clamp(2rem, 5vh, 4.5rem);
  min-height: 100svh; /* le hero remplit l'écran, quelle que soit sa taille */
  display: flex;
  align-items: center;
}

/* Effet scroll façon HelloAsso (activé par JS via .js-soutien) :
   le hero reste épinglé, le voile se lève sur la photo, le 1er message
   s'efface, le second se révèle. --sp = progression 0→1. */
.soutien-hero.js-soutien {
  height: 165vh;
}

/* Fond FIXE (parallax HelloAsso) : le hero est cloué au viewport,
   les sections suivantes glissent par-dessus. */
.soutien-hero.js-soutien .soutien-hero__sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  min-height: 0;
  z-index: 0;
}

/* tout ce qui suit le hero passe AU-DESSUS du fond fixe */
.soutien-hero.js-soutien ~ * {
  position: relative;
  z-index: 1;
  background: var(--creme);
}

.soutien-hero.js-soutien ~ .section--alt {
  background: linear-gradient(180deg, #fff 0%, #f6f1e6 100%);
}

.soutien-hero.js-soutien ~ .cta-band {
  background: var(--gradient-nuit);
}

/* Masque façon HelloAsso : la photo vit dans une "graine" découpée (clip-path SVG)
   dont l'échelle explose au scroll jusqu'à engloutir l'écran. */
.soutien-hero.js-soutien .soutien-hero__media {
  clip-path: url(#gdi-seed);
  -webkit-clip-path: url(#gdi-seed);
}

.soutien-hero.js-soutien .soutien-hero__media::after {
  /* léger voile uniforme dans la graine, qui s'estompe quand elle envahit l'écran */
  background: rgba(15, 32, 39, 0.55);
  opacity: calc(0.65 - 0.45 * var(--sp, 0));
}

.soutien-hero.js-soutien .soutien-hero__media img {
  transform: scale(calc(1.08 - 0.08 * var(--sp, 0)));
  transform-origin: 65% 45%;
}


.soutien-hero.js-soutien .soutien-hero__content {
  opacity: calc(1 - var(--sp, 0) * 2.2);
  transform: translateY(calc(var(--sp, 0) * -34px));
}

.soutien-hero.is-past .soutien-hero__content {
  pointer-events: none;
}

/* voile latéral gauche pour la lisibilité du bloc révélé (comme la maquette) */
.soutien-hero__sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 18, 28, 0.92) 0%, rgba(10, 18, 28, 0.72) 30%, rgba(10, 18, 28, 0.35) 52%, rgba(10, 18, 28, 0.05) 72%, transparent 85%);
  opacity: 0;
}

.soutien-hero.js-soutien .soutien-hero__sticky::after {
  opacity: var(--sp, 0);
}

.soutien-hero__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.soutien-hero__reveal > .container {
  width: 100%;
}

.soutien-hero.js-soutien .soutien-hero__reveal {
  opacity: calc((var(--sp, 0) - 0.45) / 0.3);
  transform: translateY(calc(28px * (1 - var(--sp, 0))));
}

.soutien-hero.is-past .soutien-hero__reveal {
  pointer-events: auto; /* le bouton devient cliquable une fois révélé */
}

.soutien-hero__reveal .eyebrow::before {
  display: none; /* pas de point : trait dessous, comme la maquette */
}

.soutien-hero__reveal .eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--jaune);
  margin-top: 0.55rem;
}

.soutien-hero__reveal .eyebrow {
  display: block;
  margin-bottom: 1.1rem;
}

.soutien-hero__reveal-title {
  color: var(--blanc);
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.9rem, min(3.9vw, 5.2vh), 3.1rem);
  line-height: 1.18;
  margin-bottom: clamp(0.9rem, 2.5vh, 1.4rem);
  /* les 3 lignes sont fixées par des <br> dans le HTML, comme la maquette */
}

.soutien-hero__reveal-sub {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
}

.soutien-hero__reveal-btn {
  padding: 1rem 2.1rem;
  gap: 2.4rem; /* flèche écartée du libellé, comme la maquette */
}

.soutien-hero__media {
  position: absolute;
  inset: 0;
}

.soutien-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

/* fondu de la photo vers le bleu nuit (texte lisible à gauche) */
.soutien-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #0f2027 0%,
    rgba(15, 32, 39, 0.95) 32%,
    rgba(15, 32, 39, 0.7) 52%,
    rgba(15, 32, 39, 0.18) 80%,
    rgba(15, 32, 39, 0.05) 100%);
}

.soutien-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.soutien-hero h1 {
  color: var(--blanc);
  font-size: clamp(2rem, min(4.4vw, 5.6vh), 3.3rem); /* borné aussi par la hauteur d'écran */
  font-weight: 800;
  line-height: 1.1;
  max-width: 16ch;
  margin-bottom: clamp(0.9rem, 2.5vh, 1.4rem);
}

.soutien-hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 46ch;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.soutien-hero__jumps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  max-width: 760px;
}

.soutien-jump {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 16px;
  background: rgba(10, 16, 22, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.4s var(--ease-premium), border-color 0.4s ease, box-shadow 0.4s var(--ease-premium);
}

.soutien-jump:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 210, 0, 0.55);
  box-shadow: var(--shadow-lg);
}

.soutien-jump__icon {
  display: inline-flex;
  color: var(--jaune); /* icône nue, sans cartouche — comme la maquette */
  margin-bottom: 0.2rem;
}

.soutien-jump__icon svg { width: 34px; height: 34px; }

.soutien-jump__label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blanc);
}

.soutien-jump__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  line-height: 1.4;
}

.soutien-jump__arrow {
  margin-top: 0.4rem;
  color: var(--jaune);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.soutien-jump:hover .soutien-jump__arrow {
  transform: translateX(5px);
}

/* Écrans peu hauts : tout tient sans déborder */
@media (max-height: 760px) {
  .soutien-hero h1 {
    font-size: clamp(1.8rem, 4.6vh, 2.6rem);
    margin-bottom: 0.9rem;
  }

  .soutien-hero p {
    margin-bottom: 1.2rem;
  }

  .soutien-jump {
    padding: 0.85rem 1rem 0.95rem;
  }

  .soutien-jump__icon {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 768px) {
  .soutien-hero__media img {
    object-position: 68% center;
  }

  .soutien-hero__media::after {
    background: linear-gradient(90deg,
      rgba(15, 32, 39, 0.97) 0%,
      rgba(15, 32, 39, 0.9) 55%,
      rgba(15, 32, 39, 0.72) 100%);
  }

  .soutien-hero h1 {
    max-width: none;
  }

  /* Contenu du hero visible dès le chargement (au-dessus de la ligne de
     flottaison), sans attendre un défilement. */
  .soutien-hero__content .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ---- Les 3 raccourcis en CARROUSEL horizontal (prend moins de hauteur) ----
     Le défilement est contenu DANS la piste : aucun ascenseur horizontal sur la page. */
  .soutien-hero__jumps {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 0.7rem;
    max-width: 100%;
    margin-top: clamp(4rem, 20vh, 11rem); /* carrousel nettement plus bas dans le hero */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-bottom: 0.5rem;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
    -webkit-overflow-scrolling: touch;
  }

  .soutien-hero__jumps::-webkit-scrollbar { display: none; } /* Safari/Chrome */

  .soutien-jump {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
    flex-direction: column;         /* carte verticale, pas en ligne */
    align-items: stretch;
  }
}

/* (Les 3 raccourcis passent en carrousel dès 768 px — voir plus haut.) */

/* ---------- Encart fiscal 66 % (jaune pâle, mis en avant) ---------- */
.soutien-fiscal {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 2rem;
  background: #fdf8ec;
  border: 1px solid rgba(255, 210, 0, 0.4);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.soutien-fiscal__big {
  flex-shrink: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
  color: #b45f00;
}

.soutien-fiscal__body h3 {
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.soutien-fiscal__body p {
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 600px) {
  .soutien-fiscal {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- Modalités de don (virement / chèque) ---------- */
.soutien-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 1.75rem;
}

.soutien-method {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--blanc);
  border: 1px solid rgba(40, 64, 82, 0.1);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.soutien-method__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fdf3d1;
  color: #b45f00;
}

.soutien-method__icon svg {
  width: 26px;
  height: 26px;
}

.soutien-method h3 {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.soutien-method p {
  font-size: 0.9rem;
  margin: 0;
}

@media (max-width: 600px) {
  .soutien-methods {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Finitions mobile "premium" (audit DA) — bloc consolidé, non destructif.
   ========================================================================== */
@media (max-width: 768px) {
  /* Le hero parallax était trop long sur mobile : on raccourcit la séquence
     pour que le contenu apparaisse plus vite (moins de "zone morte"). */
  .hero { height: 128vh; }
  .soutien-hero.js-soutien { height: 132vh; }

  /* Bloc-titre des pages internes : moins de vide sombre en bas. */
  .page-hero { padding-block: calc(var(--header-h) + 2.25rem) clamp(2.25rem, 6vw, 3.25rem); }

  /* Cibles tactiles confortables (>=44px) : liens de nav et boutons. */
  .btn { min-height: 46px; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 400px) {
  /* Très petits écrans : on plafonne les titres pour éviter tout titre géant. */
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .page-hero h1 { font-size: clamp(1.8rem, 7.6vw, 2.2rem); }
}

/* ---------- Menu : page active en pastille dorée (desktop) ---------- */
@media (min-width: 769px) {
  .nav-links { gap: 0.35rem; }
  .nav-links a:not(.nav-cta) { padding: 0.5rem 1rem; border-radius: 999px; transition: background 0.3s ease, color 0.3s ease; }
  .nav-links a:not(.nav-cta):hover { background: rgba(40, 64, 82, 0.06); color: var(--encre); }
  .nav-links a.active { background: linear-gradient(135deg, rgba(255, 210, 0, 0.32), rgba(247, 151, 30, 0.22)); color: var(--encre); box-shadow: inset 0 0 0 1px rgba(247, 151, 30, 0.25); }
  .nav-links a.active::after { display: none; }
}

/* ---- Menu : page active en pastille bleu nuit ---- */
@media (min-width: 769px){
  .nav-links a.active,
  .nav-links a.active:hover{background:var(--bleu-nuit);color:var(--creme);box-shadow:none}
}
@media (max-width: 768px){
  .nav-links a.active{color:var(--bleu-nuit)}
}

/* ---- Bande devise : sobre, la chute en or ---- */
.quote-band__text{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:700;letter-spacing:.06em;color:rgba(253,251,246,.92)}
.quote-band__text .qb-or{color:var(--jaune)}
.quote-band__text .qb-eyebrow{display:block;font-family:var(--font-text);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,210,0,.75);margin-bottom:1.1rem}
.quote-band__text .qb-rule{display:block;width:44px;height:3px;border-radius:2px;background:var(--jaune);margin:1.2rem auto 0}