/* ==========================================================================
   Le Bienfaiteur Masqué
   Direction artistique : or / noir — grotesque unique, surfaces en verre
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Fonds */
  --noir:        #080807;
  --noir-2:      #0d0c0b;
  --surface:     #131110;
  --ligne:       #241f1b;

  /* Or */
  --or:          #c9922e;
  --or-clair:    #e0b45f;
  --or-pale:     #f0dcb0;
  --or-sombre:   #7d5814;
  /* Dégradé métal des mots dorés dans les titres : pic clair assumé,
     le texte est détouré donc il a besoin de luminosité pour ressortir. */
  --or-degrade:  linear-gradient(105deg,
                   #b0801f 0%,
                   #e0b45f 30%,
                   #f6e7c2 50%,
                   #d6a445 72%,
                   #b0801f 100%);
  /* Dégradé des boutons pleins : même angle, même logique, amplitude réduite.
     Sur un aplat, un pic aussi clair délaverait le bouton. */
  --or-degrade-btn: linear-gradient(105deg,
                   #a8761b 0%,
                   #c08a26 30%,
                   #d9a94e 50%,
                   #bd8724 74%,
                   #a8761b 100%);

  /* Textes */
  --blanc:       #f7f4ee;
  --blanc-80:    rgba(247, 244, 238, 0.8);
  --blanc-60:    rgba(247, 244, 238, 0.6);
  --blanc-40:    rgba(247, 244, 238, 0.4);
  --blanc-20:    rgba(247, 244, 238, 0.2);

  /* Verre */
  --verre-pilule: rgba(10, 9, 8, 0.35);
  --verre-auth:   rgba(0, 0, 0, 0.35);
  --verre-carte:  rgba(17, 16, 15, 0.35);
  --verre-panneau: rgba(17, 16, 15, 0.6);
  --bord-verre:   rgba(255, 255, 255, 0.06);

  /* Typographie — Bricolage Grotesque pour les titres, Inter pour le reste */
  --f:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-titre: "Bricolage Grotesque", "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Rythme */
  --max:       1800px;
  --max-texte: 68ch;
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --r:         12px;

  /* Hauteur sur laquelle la photo du héros déborde sous la section suivante */
  --debord: clamp(170px, 26vh, 320px);
  /* Hauteur du fondu de sortie d'une section vers le fond de page */
  --fondu-bas: clamp(140px, 20vh, 260px);

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--f);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height: auto est indispensable : sans lui, une image dont le HTML porte
   des attributs width/height garde sa hauteur d'origine quand sa largeur
   est réduite, et se retrouve déformée. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--or-clair); text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

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

.lien-saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--or); color: #14100a;
  padding: 0.75rem 1.25rem; z-index: 200; font-weight: 600;
}
.lien-saut:focus { left: 1rem; top: 1rem; }

/* --- 3. Rangée : conteneur maître --------------------------------------- */
.rangee {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 640px) { .rangee { padding-inline: 32px; } }
@media (min-width: 768px) { .rangee { padding-inline: 82px; } }

/* Conteneur resserré pour les sections de contenu */
.rangee--texte { max-width: 1240px; }

/* --- 4. Animations d'entrée --------------------------------------------- */

/* Une propriété personnalisée doit être déclarée avec son type pour devenir
   animable. Sans @property, l'angle du dégradé conique resterait figé. */
@property --faisceau {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes faisceau-tour { to { --faisceau: 360deg; } }

@keyframes fade-up    { from { opacity: 0; transform: translateY(24px); }  to { opacity: 1; transform: none; } }
@keyframes fade-down  { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes fade-scale { from { opacity: 0; transform: scale(0.94); }       to { opacity: 1; transform: none; } }

.anim {
  opacity: 0;
  animation-duration: 800ms;
  animation-timing-function: var(--sortie);
  animation-fill-mode: forwards;
}
.anim--bas     { animation-name: fade-up; }
.anim--haut    { animation-name: fade-down; animation-duration: 700ms; }
.anim--echelle { animation-name: fade-scale; animation-duration: 900ms; }

/* Révélation au défilement, pour les sections sous le héros */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms var(--sortie); }
.reveal.vu { opacity: 1; transform: none; }

/* --- 5. Navigation : pilule flottante en verre --------------------------- */
.site-nav {
  position: fixed;
  inset: 14px 0 auto 0;
  z-index: 50;
  padding-inline: 16px;
  /* la barre traverse toute la largeur : on ne capte les clics que sur la pilule */
  pointer-events: none;
}
.site-nav > * { pointer-events: auto; }
@media (min-width: 640px) { .site-nav { top: 22px; padding-inline: 24px; } }

.nav-rangee {
  max-width: 1180px;
  margin-inline: auto;
  height: 58px;
  padding: 0 8px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(12, 11, 10, 0.50);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 16px 44px -26px rgba(0, 0, 0, 0.95);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
@media (min-width: 640px) { .nav-rangee { height: 64px; padding: 0 8px 0 18px; gap: 20px; } }

/* Une fois le héros dépassé, la pilule se densifie légèrement */
.site-nav.colle .nav-rangee {
  background: rgba(10, 9, 8, 0.74);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, 1);
}

/* Logo ------------------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.logo img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.logo-mot {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 18;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blanc);
  white-space: nowrap;
}
.logo-mot em { font-style: normal; color: var(--or-clair); }
@media (min-width: 640px) {
  .logo img { width: 38px; height: 38px; }
  .logo-mot { font-size: 16px; }
}
/* Le pied de page réutilise .logo mais dans un format plus généreux */
.pied .logo img { width: 46px; height: 46px; }
.pied .logo-mot { font-size: 18px; }

/* Liens centraux --------------------------------------------------------- */
.nav-liens { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); }
.nav-liens a {
  font-size: 14px;
  font-weight: 450;
  line-height: 14px;
  color: var(--blanc-80);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-liens a:hover { color: var(--blanc); }
.nav-liens a[aria-current="page"] { color: var(--or-clair); }

/* Action de droite ------------------------------------------------------- */
.nav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.nav-actions .btn-or {
  height: 44px;
  padding-inline: 22px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* Bouton or plein. background-color sert de repli si le dégradé échoue. */
.btn-or {
  background-color: var(--or);
  background-image: var(--or-degrade-btn);
  color: #14100a;
  font-weight: 700;
  transition: filter var(--transition);
}
.btn-or:hover { color: #14100a; filter: brightness(1.08); }

/* Hamburger -------------------------------------------------------------- */
.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background var(--transition);
}
.burger:hover { background: rgba(255, 255, 255, 0.12); }
.burger-icones { position: relative; width: 20px; height: 20px; }
.burger-icones svg {
  position: absolute; inset: 0;
  width: 20px; height: 20px;
  color: var(--blanc);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.burger-icones .i-menu  { opacity: 1; transform: rotate(0) scale(1); }
.burger-icones .i-close { opacity: 0; transform: rotate(-90deg) scale(0.75); }
.burger[aria-expanded="true"] .i-menu  { opacity: 0; transform: rotate(90deg) scale(0.75); }
.burger[aria-expanded="true"] .i-close { opacity: 1; transform: rotate(0) scale(1); }

@media (max-width: 1023.98px) {
  .nav-liens, .nav-actions { display: none; }
  .burger { display: flex; }
}

/* --- 6. Menu mobile ----------------------------------------------------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  transition: visibility 500ms cubic-bezier(0.32, 0.72, 0, 1);
}
.menu-mobile.ouvert { visibility: visible; }
@media (min-width: 1024px) { .menu-mobile { display: none; } }

.menu-fond {
  position: absolute; inset: 0;
  background: rgba(8, 8, 7, 0.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 500ms ease;
}
.menu-mobile.ouvert .menu-fond { opacity: 1; }

.menu-panneau {
  position: absolute;
  top: 82px; left: 16px; right: 16px;
  background: var(--verre-panneau);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border: 1px solid var(--bord-verre);
  border-radius: 14px;
  padding: 24px;
  transform-origin: top;
  opacity: 0;
  transform: translateY(-16px) scale(0.97);
  transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1), transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
}
.menu-mobile.ouvert .menu-panneau { opacity: 1; transform: none; }
@media (min-width: 640px) {
  .menu-panneau { top: 96px; left: 24px; right: 24px; padding: 32px; }
}

.menu-liens { display: flex; flex-direction: column; gap: 4px; }
.menu-liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 450;
  color: rgba(247, 244, 238, 0.9);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 300ms ease, transform 300ms ease, background 300ms ease;
}
.menu-liens a:hover { background: rgba(255, 255, 255, 0.06); }
.menu-mobile.ouvert .menu-liens a { opacity: 1; transform: none; }
.menu-mobile.ouvert .menu-liens a:nth-child(1) { transition-delay: 100ms; }
.menu-mobile.ouvert .menu-liens a:nth-child(2) { transition-delay: 150ms; }
.menu-mobile.ouvert .menu-liens a:nth-child(3) { transition-delay: 200ms; }
.menu-mobile.ouvert .menu-liens a:nth-child(4) { transition-delay: 250ms; }
.menu-mobile.ouvert .menu-liens a:nth-child(5) { transition-delay: 300ms; }

.menu-trait { height: 1px; background: rgba(255, 255, 255, 0.1); margin-block: 20px; }

.menu-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.menu-mobile.ouvert .menu-ctas { opacity: 1; transform: none; transition-delay: 350ms; }
.menu-ctas a {
  width: 100%; height: 50px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 450;
  text-decoration: none;
  transition: background var(--transition);
}
.menu-ctas .contour { border: 1px solid rgba(255, 255, 255, 0.3); color: var(--blanc); }
.menu-ctas .contour:hover { background: rgba(255, 255, 255, 0.05); }

/* --- 7. Héros ----------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 0;              /* la section suivante passera par-dessus */
  width: 100%;
  min-height: 100svh;
  /* visible : le média déborde volontairement sous le héros */
  overflow: visible;
  background: var(--noir);
  display: flex;
  flex-direction: column;
}

/* Média de fond : photo de nuit, vidéo optionnelle par-dessus.
   Le média et son voile descendent de --debord sous le héros ;
   c'est la section suivante qui les recouvre en fondu. */
.hero__media { position: absolute; inset: 0 0 calc(-1 * var(--debord)) 0; z-index: 0; }

.hero__photo,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* La vidéo ne se révèle que si elle est réellement lisible */
.hero__video { opacity: 0; transition: opacity 1200ms ease; }
.hero__video.prete { opacity: 1; }

/* Voile de lisibilité : le texte doit rester lisible sur la photo.
   Mobile — la colonne de texte couvre toute la largeur : voile vertical. */
.hero__voile {
  position: absolute;
  inset: 0 0 calc(-1 * var(--debord)) 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(8,8,7,0.92) 0%,
      rgba(8,8,7,0.74) 38%,
      rgba(8,8,7,0.78) 72%,
      rgba(8,8,7,0.86) 100%);
}

/* Bureau — le texte occupe la gauche : voile latéral, la scène respire au centre. */
@media (min-width: 1024px) {
  .hero__voile {
    background:
      linear-gradient(90deg,
        rgba(8,8,7,0.96) 0%,
        rgba(8,8,7,0.86) 24%,
        rgba(8,8,7,0.50) 46%,
        rgba(8,8,7,0.40) 68%,
        rgba(8,8,7,0.74) 100%),
      linear-gradient(180deg,
        rgba(8,8,7,0.80) 0%,
        rgba(8,8,7,0.00) 20%,
        rgba(8,8,7,0.00) 60%,
        rgba(8,8,7,0.94) 100%),
      radial-gradient(ellipse 55% 45% at 12% 30%, rgba(201, 146, 46, 0.10), transparent 70%);
  }
}

/* Grain fin, casse l'aspect « rendu 3D lisse » */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
}

.hero__corps {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 112px 32px;
}

.hero__grille {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1024px) {
  .hero__grille {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
}

.hero__texte { max-width: 593px; }

.hero__sur {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--or-clair);
  border: 1px solid rgba(201, 146, 46, 0.35);
  border-radius: 100px;
  padding: 7px 14px 7px 11px;
  margin-bottom: 24px;
}
.hero__sur svg { width: 13px; height: 13px; }

.hero__titre {
  font-family: var(--f-titre);
  /* opsz 96 : dessin optique taillé pour les grands corps */
  font-variation-settings: "opsz" 96;
  font-size: 36px;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--blanc);
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero__titre em { font-style: normal; color: var(--or-clair); }
@media (min-width: 640px)  { .hero__titre { font-size: 52px; margin-bottom: 32px; } }
@media (min-width: 768px)  { .hero__titre { font-size: 62px; } }
@media (min-width: 1024px) { .hero__titre { font-size: 70px; } }

.hero__sous {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 24;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--blanc-80);
  max-width: 400px;
  margin-bottom: 38px;
}
@media (min-width: 640px) { .hero__sous { font-size: 18px; margin-bottom: 56px; } }
@media (min-width: 768px) { .hero__sous { font-size: 20px; } }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 640px) { .hero__ctas { gap: 16px; } }

.btn-hero {
  height: 46px;
  padding-inline: 20px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 450;
  line-height: 15.5px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), filter var(--transition);
}
@media (min-width: 640px) { .btn-hero { height: 51px; padding-inline: 27px; font-size: 15.5px; } }
.btn-hero.plein {
  background-color: var(--or);
  background-image: var(--or-degrade-btn);
  color: #14100a;
  font-weight: 700;
}
.btn-hero.plein:hover { color: #14100a; filter: brightness(1.08); }

/* Reflet métallique balayant les boutons dorés.
   overflow: hidden découpe le reflet sur les angles arrondis ;
   la bande reste étroite et peu opaque pour ne pas délaver le libellé. */
.btn-or,
.btn-hero.plein {
  position: relative;
  overflow: hidden;
}
.btn-or::after,
.btn-hero.plein::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent            38%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.14) 54%,
    transparent            62%);
  transform: translateX(-130%);
  animation: reflet 5s ease-in-out infinite;
}
/* Le reflet reste hors champ 78 % du temps : un balayage toutes les 5 s,
   d'une durée d'environ une seconde. */
@keyframes reflet {
  0%, 78% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
.btn-hero.contour { border: 1px solid rgba(255, 255, 255, 0.6); color: var(--blanc); }
.btn-hero.contour:hover { background: rgba(255, 255, 255, 0.08); color: var(--blanc); }


/* Titre du heros d'accueil en capitales. L'approche negative convient aux
   bas-de-casse mais resserre trop les capitales : on la ramene a zero. */
.hero .hero__titre {
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.96;
}

/* --- 8. Carte de verre « impact » --------------------------------------- */
.carte-verre {
  position: relative;
  width: 100%;
  max-width: 405px;
  margin-inline: auto;
  background: var(--verre-carte);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--bord-verre);
  border-radius: 24px;
  --rayon: 24px;
  padding: 20px 20px 20px;
}
@media (min-width: 640px)  { .carte-verre { border-radius: 33px; --rayon: 33px; padding: 32px 32px 24px; } }
@media (min-width: 1024px) { .carte-verre { margin-inline: 0; } }

/* Faisceau lumineux parcourant le contour.
   Mutualisé : chaque élément déclare son propre --rayon, le faisceau
   déborde d'1px pour recouvrir la bordure et ajoute donc 1px au rayon.
   Le double masque ne conserve que l'anneau. */
.carte-verre::after,
.bandeau-or::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--rayon) + 1px);
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--faisceau) at 50% 50%,
    transparent            0deg,
    transparent          248deg,
    rgba(201, 146, 46, 0.30) 300deg,
    rgba(240, 220, 176, 0.95) 342deg,
    rgba(224, 180, 95, 0.45) 354deg,
    transparent          360deg);
  /* Découpe en anneau : surface totale moins la surface intérieure */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: faisceau-tour 5s linear infinite;
}
.bandeau-or::after { animation-duration: 7s; }


.cv-label {
  font-size: 16px;
  font-weight: 450;
  line-height: 20px;
  color: var(--blanc);
  margin-bottom: 12px;
}
@media (min-width: 640px) { .cv-label { font-size: 20px; margin-bottom: 16px; } }

.cv-montant { margin-bottom: 8px; line-height: 1; }
.cv-montant .fort,
.cv-montant .faible {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 48;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cv-montant .fort   { color: var(--blanc); }
.cv-montant .faible { color: var(--blanc-20); }
@media (min-width: 640px) { .cv-montant .fort, .cv-montant .faible { font-size: 46px; } }
@media (min-width: 640px) { .cv-montant { margin-bottom: 12px; } }

.cv-delta { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
@media (min-width: 640px) { .cv-delta { margin-bottom: 32px; } }
.cv-badge {
  padding: 7px 6px;
  background: rgba(201, 146, 46, 0.22);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--or-pale);
}
@media (min-width: 640px) { .cv-badge { font-size: 14px; } }
.cv-legende { font-size: 12px; font-weight: 450; line-height: 14px; color: var(--blanc-80); opacity: 0.7; }
@media (min-width: 640px) { .cv-legende { font-size: 14px; } }

.cv-stats { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cv-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cv-stat .v { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--blanc); }
.cv-stat .l { font-size: 13px; font-weight: 450; color: var(--blanc-60); text-align: right; }

.cv-pied {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  font-size: 11.5px;
  font-weight: 450;
  color: var(--blanc-40);
}
.cv-pied svg { width: 13px; height: 13px; flex: none; color: var(--or); }

/* --- 9. Typographie de contenu ------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.5em; font-variation-settings: "opsz" 48; }
h3 { font-size: 1.1rem; margin-bottom: 0.4em; letter-spacing: -0.015em; font-variation-settings: "opsz" 24; }
h4 { font-variation-settings: "opsz" 14; }

p { margin-bottom: 1.1em; max-width: var(--max-texte); }
/* :where() garde une spécificité nulle, pour qu'une classe utilitaire
   posée sur un <p> (ex. .hero__sous) puisse toujours imposer sa marge. */
p:where(:last-child) { margin-bottom: 0; }

.or { color: var(--or-clair); }
.texte-sec { color: var(--blanc-60); }

/* Dégradé métal sur les mots dorés des titres.
   Volontairement limité aux titres : sur un paragraphe, du texte détouré
   par le fond perd du contraste et devient pénible à lire. */
.hero__titre em,
h1 .or, h2 .or, h3 .or, h4 .or {
  background-image: var(--or-degrade);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Sans le détourage, le texte transparent serait invisible : on repasse en or plein. */
@supports not (-webkit-background-clip: text) {
  .hero__titre em,
  h1 .or, h2 .or, h3 .or, h4 .or { color: var(--or-clair); }
}

.kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 14px;
}

.section { padding-block: var(--section-y); position: relative; }
.section--sombre { background: var(--noir-2); }

/* Section à texture : éventail sombre en fond.
   isolation + z-index -1 placent la texture derrière le contenu
   mais devant la couleur de fond de la section. */
/* Bornes du masque de texture, redéfinissables par section */
.section--texture {
  position: relative;
  isolation: isolate;
  background: var(--noir-2);
  --tex-haut: 8%;
  --tex-bas: 86%;
}
.section--texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/texture-tissu.jpg");
  background-image: image-set(
    url("../img/texture-tissu.avif") type("image/avif"),
    url("../img/texture-tissu.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.15;
  /* Fondus haut et bas : les raccords avec les sections voisines
     restent des aplats de --noir-2, donc aucune ligne visible. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 var(--tex-haut), #000 var(--tex-bas), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 var(--tex-haut), #000 var(--tex-bas), transparent 100%);
}

/* Section qui recouvre le débord du héros.
   Haut — fond transparent : la photo du héros reste visible, puis la section
          la recouvre jusqu'à l'opacité pleine à --debord.
   Bas  — retour vers --noir, couleur de la section suivante qui, elle,
          n'a pas de texture. */
.section--fondu {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0)    0,
    rgba(13, 12, 11, 0.42) calc(var(--debord) * 0.42),
    rgba(13, 12, 11, 0.86) calc(var(--debord) * 0.78),
    #0d0c0b               var(--debord),
    #0d0c0b               calc(100% - var(--fondu-bas)),
    #080807               100%);
  --tex-haut: 30%;
  --tex-bas: 80%;
}

/* Section à texture insérée entre deux sections sur fond de page.
   Elle entre et sort en fondu vers --noir des deux côtés. */
.section--fondu-bords {
  position: relative;
  background: linear-gradient(180deg,
    #080807 0,
    #0d0c0b var(--fondu-bas),
    #0d0c0b calc(100% - var(--fondu-bas)),
    #080807 100%);
  --tex-haut: 24%;
  --tex-bas: 76%;
}

.section-tete { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-tete.centre { margin-inline: auto; text-align: center; }
.section-tete.centre p { margin-inline: auto; }

/* Chapeau de section : même police que les titres, en corps de lecture */
.section-tete p {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 24;
  font-weight: 400;
  font-size: 1.075rem;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.grille { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.duo { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--texte-droite > *:first-child { order: 2; }
}

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.section-tete.centre .btns { justify-content: center; }

/* --- 10. Cartes de contenu ---------------------------------------------- */
.carte {
  /* Aplat de base + deux voiles : une lumière venue du haut-gauche,
     et un halo doré très faible dans l'angle. Le liseré interne clair
     simule l'arête éclairée de la carte. */
  background-color: var(--surface);
  background-image:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.082) 0%,
      rgba(255, 255, 255, 0.028) 38%,
      rgba(255, 255, 255, 0) 68%),
    radial-gradient(ellipse 130% 90% at 0% 0%,
      rgba(201, 146, 46, 0.105), transparent 64%);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 14px 30px -20px rgba(0, 0, 0, 0.95);
  transition:
    border-color var(--transition),
    transform var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}
.carte:hover {
  border-color: var(--or-sombre);
  transform: translateY(-2px);
  /* On éclaircit l'aplat plutôt que le dégradé : une couleur s'interpole
     de façon fiable, un dégradé non. */
  background-color: #191614;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 34px -22px rgba(0, 0, 0, 1);
}
.carte p { color: var(--blanc-60); font-size: 0.95rem; margin-bottom: 0; }

.pastille {
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(201, 146, 46, 0.28);
  background-image: linear-gradient(158deg,
    rgba(201, 146, 46, 0.22) 0%,
    rgba(201, 146, 46, 0.08) 52%,
    rgba(201, 146, 46, 0.03) 100%);
  box-shadow: inset 0 1px 0 rgba(240, 220, 176, 0.14);
  display: grid;
  place-items: center;
  color: var(--or-clair);
  margin-bottom: 1rem;
  flex: none;
}
.pastille svg { width: 20px; height: 20px; }

.item-ligne { display: flex; gap: 1rem; align-items: flex-start; }
.item-ligne .pastille { margin-bottom: 0; }
.item-ligne p { overflow-wrap: anywhere; }

/* --- 11. Chiffres ------------------------------------------------------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  overflow: hidden;
}
.chiffre { background: var(--noir-2); padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem; }
.chiffre .val {
  display: block;
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 48;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--or-clair);
  margin-bottom: 0.6rem;
}
.chiffre .lib { font-size: 13px; font-weight: 450; color: var(--blanc-60); }

/* --- 12. Emplacements photo --------------------------------------------- */
.photo-vide {
  border: 1px dashed rgba(201, 146, 46, 0.4);
  border-radius: 14px;
  background: rgba(201, 146, 46, 0.03);
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  aspect-ratio: 4 / 3;
  color: var(--or-sombre);
}
.photo-vide svg { width: 28px; height: 28px; opacity: 0.9; }
.photo-vide .ph-titre {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--or);
}
.photo-vide .ph-note { font-size: 12.5px; color: var(--blanc-40); max-width: 30ch; line-height: 1.5; margin: 0; }
.photo-vide.portrait { aspect-ratio: 3 / 4; }
.photo-vide.large    { aspect-ratio: 16 / 9; }

/* Grille des prestations offertes par les partenaires */
.prestations {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}
.prestations img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--ligne);
}
.prestations b {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.prestations span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--blanc-40);
  /* Deux lignes reservees : une description plus longue ne decalera plus
     le bas des vignettes voisines. */
  min-height: 2.7em;
}
@media (max-width: 480px) { .prestations { grid-template-columns: repeat(2, 1fr); } }

/* Cadre d'une photo réelle. La hauteur suit l'image, jamais l'inverse. */
.photo-cadre {
  border: 1px solid var(--ligne);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.95);
}
.photo-cadre img { width: 100%; height: auto; }
.photo-cadre figcaption {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--blanc-40);
  padding: 0.85rem 1.1rem 1rem;
  border-top: 1px solid var(--ligne);
}

/* --- 13. Listes, citations, bandeaux ------------------------------------ */
.liste-puces { list-style: none; display: grid; gap: 0.65rem; }
.liste-puces li { position: relative; padding-left: 1.5rem; color: var(--blanc-60); font-size: 0.95rem; }
.liste-puces li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--or);
}

.citation { border-left: 2px solid var(--or-sombre); padding-left: 1.75rem; }
.citation p {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 32;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--blanc);
}
.citation footer { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); margin-top: 0.85rem; }

.bandeau-or {
  position: relative;
  --rayon: 14px;
  border: 1px solid rgba(201, 146, 46, 0.3);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  text-align: center;
  background: rgba(201, 146, 46, 0.05);
}
.bandeau-or p {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 450;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: none;
  color: var(--blanc-80);
}

/* --- 14. Appel à l'action final ----------------------------------------- */
.cta-final {
  text-align: center;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(201, 146, 46, 0.1), transparent 65%), var(--noir-2);
  border-top: 1px solid var(--ligne);
}
.cta-final p { margin-inline: auto; }
.cta-final .btns { justify-content: center; }

/* --- 15. Pied de page --------------------------------------------------- */
.pied { background: var(--noir); border-top: 1px solid var(--ligne); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pied-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-bottom: 3rem;
}
.pied h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); margin-bottom: 1rem; }
.pied ul { list-style: none; display: grid; gap: 0.55rem; }
.pied ul a, .pied ul span { color: var(--blanc-60); text-decoration: none; font-size: 0.92rem; overflow-wrap: anywhere; }
.pied ul a:hover { color: var(--or-clair); }
.pied p { color: var(--blanc-60); font-size: 0.92rem; }
.pied .logo { margin-bottom: 1.1rem; }

.reseaux { display: flex; gap: 10px; list-style: none; }
.reseaux a {
  width: 42px; height: 42px;
  border: 1px solid var(--ligne);
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--blanc-60);
  transition: color var(--transition), border-color var(--transition);
}
.reseaux a:hover { color: var(--or-clair); border-color: var(--or-sombre); }
.reseaux svg { width: 18px; height: 18px; }

.pied-bas {
  border-top: 1px solid var(--ligne);
  padding-top: 1.6rem;
  display: flex; flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  align-items: center; justify-content: space-between;
  font-size: 0.82rem;
  color: var(--blanc-40);
}
.pied-bas a { color: var(--blanc-40); text-decoration: none; }
.pied-bas a:hover { color: var(--or); }
.pied-bas-gauche { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

/* Signature du studio : discrete, elle ne doit jamais concurrencer
   le nom de l'association juste a cote. */
.signature-studio { margin: 0; color: var(--blanc-40); }
.signature-studio a {
  color: var(--blanc-60);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.signature-studio a:hover { color: var(--or-clair); border-bottom-color: var(--or-sombre); }

/* --- 15b. Pages intérieures --------------------------------------------- */

/* Hero compact : pas de photo, un halo doré et la texture tissu en fond.
   La marge haute laisse la place à la pilule de navigation fixe. */
.hero-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noir);
  padding-block: clamp(150px, 22vh, 210px) clamp(56px, 8vw, 96px);
}
.hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 60% at 16% 30%, rgba(201, 146, 46, 0.16), transparent 66%),
    radial-gradient(ellipse 45% 60% at 88% 85%, rgba(201, 146, 46, 0.07), transparent 66%);
}
.hero-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("../img/texture-tissu.jpg");
  background-image: image-set(
    url("../img/texture-tissu.avif") type("image/avif"),
    url("../img/texture-tissu.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-page .hero__titre {
  font-size: 34px;
  max-width: 18ch;
}
@media (min-width: 640px)  { .hero-page .hero__titre { font-size: 46px; } }
@media (min-width: 768px)  { .hero-page .hero__titre { font-size: 54px; } }
@media (min-width: 1024px) { .hero-page .hero__titre { font-size: 60px; } }
.hero-page .hero__sous { max-width: 56ch; margin-bottom: 0; }

/* Titre de section en deux niveaux : kicker + h2, déjà utilisés sur l'accueil.
   Version centrée pour les blocs qui tiennent en une colonne. */
.section-tete.centre { text-align: center; margin-inline: auto; }

/* Lettre du fondateur ----------------------------------------------------- */
.lettre {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.25rem);
  background: var(--surface);
  background-image:
    linear-gradient(158deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(201, 146, 46, 0.08), transparent 62%);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 50px -30px rgba(0, 0, 0, 0.95);
}
/* Guillemet ouvrant en filigrane, dans la police des titres */
.lettre::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: clamp(1rem, 3vw, 2rem);
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 96;
  font-size: clamp(6rem, 12vw, 9rem);
  line-height: 1;
  color: var(--or);
  opacity: 0.16;
  pointer-events: none;
}
.lettre h2 { position: relative; margin-bottom: 1.25rem; }
.lettre p {
  position: relative;
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 24;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--blanc-80);
  max-width: 60ch;
  margin-bottom: 1.1em;
}
/* La litanie « De l'attention. Du respect. … » : une ligne par idée,
   révélées une à une quand la lettre entre dans l'écran. */
.lettre .litanie {
  display: grid;
  gap: 0.15em;
  margin: 0.6em 0 1.2em;
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--blanc);
}
.lettre .litanie span {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 600ms ease, transform 600ms var(--sortie);
}
.lettre.vu .litanie span { opacity: 1; transform: none; }
.lettre.vu .litanie span:nth-child(1) { transition-delay: 150ms; }
.lettre.vu .litanie span:nth-child(2) { transition-delay: 300ms; }
.lettre.vu .litanie span:nth-child(3) { transition-delay: 450ms; }
.lettre.vu .litanie span:nth-child(4) { transition-delay: 600ms; }
.lettre.vu .litanie span:nth-child(5) { transition-delay: 750ms; }
.lettre .litanie span:last-child { color: var(--or-clair); }

.lettre .signature {
  position: relative;
  display: grid;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}
/* Un trait doré qui se dessine de gauche à droite */
.lettre .signature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--or), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--sortie) 500ms;
}
.lettre.vu .signature::before { transform: scaleX(1); }
.lettre .signature b {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 24;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--blanc);
}
.lettre .signature span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }

/* Grille des valeurs : cinq cartes sur une ligne au format bureau ------- */
.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 186px), 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.valeurs .carte { padding: 1.35rem 1.25rem; }
.valeurs h3 { font-size: 1.05rem; }
.valeurs p { font-size: 0.92rem; }

/* Équipe --------------------------------------------------------------------- */
.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Colonne explicite : une grille sans colonne déclarée crée une piste
   « auto » qui peut dépasser sa carte selon le contenu. minmax(0, 1fr)
   la borne à la largeur disponible. */
/* Deux rangées explicites : le portrait garde la hauteur que lui donne son
   format, et c'est le corps qui absorbe la hauteur supplémentaire quand la
   carte s'étire pour s'aligner sur la plus haute de la rangée. Sans cela,
   l'espace libre se répartit entre les deux et décale le texte vers le bas. */
.membre {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
.membre .portrait {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--ligne);
}
/* Le portrait peut être une vraie photo : elle remplit la même boîte */
.membre img.portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.membre .portrait.photo-vide { padding: 1.5rem 1rem; }
.membre .corps { padding: 1.25rem 1.35rem 1.5rem; display: grid; gap: 0.35rem; align-content: start; }
.membre .role {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}
.membre h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.membre p { font-size: 0.92rem; }
.membre.honneur { border-color: rgba(201, 146, 46, 0.35); }
.membre.honneur .role { color: var(--or-clair); }

/* Mission, énoncé seul : une grande phrase centrée sur fond texturé -------- */
.enonce {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.enonce h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 0.6em; }
.enonce p { margin-inline: auto; font-size: 1.1rem; color: var(--blanc-60); }

/* --- 15c. Page Nos actions ---------------------------------------------- */

/* Les sept actions : une carte phare pleine largeur, puis six en grille */
.actions { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.actions-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Deux rangées : le visuel garde sa hauteur, le texte prend le reste,
   pour que toutes les cartes d'une rangée aient le même visuel. */
.action { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.action .visuel { aspect-ratio: 16 / 10; border: none; border-radius: 0; border-bottom: 1px solid var(--ligne); padding: 1.25rem; }
/* Le visuel peut être une vraie photo : elle remplit la même boîte */
.action img.visuel { padding: 0; width: 100%; height: 100%; object-fit: cover; }
.action .corps { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
.action .corps .pastille { margin-bottom: 0.25rem; }
.action h3 { font-size: 1.15rem; }
.action p { font-size: 0.95rem; }

/* Carte phare : visuel à gauche, texte à droite au format bureau */
.action--phare { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
@media (min-width: 820px) {
  .action--phare { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; }
  .action--phare .visuel { aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--ligne); min-height: 100%; }
  /* La photo reste un élément de la grille : elle occupe sa colonne et
     s'étire sur la hauteur définie par la colonne de texte. */
  .action--phare img.visuel { height: 100%; min-height: 340px; align-self: stretch; }
  .action--phare .corps { padding: clamp(1.75rem, 3.5vw, 2.75rem); align-content: center; }
}
.action--phare { border-color: rgba(201, 146, 46, 0.35); }
.action--phare h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-variation-settings: "opsz" 40; }
.action--phare p { font-size: 1.02rem; max-width: 46ch; }
.action--phare .etiquette {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--or); margin-bottom: 0.25rem;
}

/* Une rencontre, pas à pas : frise verticale numérotée ------------------ */
.etapes {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 760px;
  padding-left: 62px;
}
/* Rail gris permanent, puis rail doré qui se dessine vers le bas */
/* Les deux rails sont posés sous les pastilles : sans z-index, le rail doré
   étant le dernier élément du conteneur, il se peindrait par-dessus. */
.etapes::before, .etapes::after {
  content: "";
  position: absolute;
  left: 20px; top: 10px; bottom: 10px;
  width: 1px;
  z-index: 0;
}
.etapes::before { background: var(--ligne); }
.etapes::after {
  background: linear-gradient(180deg, var(--or-clair), var(--or) 60%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 2200ms var(--sortie) 200ms;
}
.etapes.vu::after { transform: scaleY(1); }

.etape { position: relative; display: grid; gap: 0.35rem; }
.etape .num {
  position: absolute;
  z-index: 1;
  left: -62px; top: -2px;
  width: 41px; height: 41px;
  border-radius: 50%;
  border: 1px solid var(--or-sombre);
  background: var(--noir-2);
  display: grid; place-items: center;
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 18;
  font-weight: 600;
  font-size: 14px;
  color: var(--or-clair);
  font-variant-numeric: tabular-nums;
}
.etape h3 { font-size: 1.2rem; }
.etape .question {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 24;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  color: var(--blanc);
  max-width: 56ch;
}
.etape p { color: var(--blanc-60); font-size: 0.96rem; max-width: 60ch; }
@media (max-width: 480px) {
  .etapes { padding-left: 50px; }
  .etapes::before, .etapes::after { left: 15px; }
  .etape .num { left: -50px; width: 32px; height: 32px; font-size: 12.5px; }
}

/* Derniers épisodes : trois vidéos verticales --------------------------- */
.episodes {
  display: grid;
  grid-template-columns: minmax(0, 340px);
  justify-content: start;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 560px)  { .episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (min-width: 1000px) { .episodes { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
.episodes .photo-vide { aspect-ratio: 9 / 16; }

/* --- 15d. Page Partenaires ---------------------------------------------- */

/* Sept prestations en pleine largeur : jusqu'à sept par rangée */
.prestations--large { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px)  { .prestations--large { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .prestations--large { grid-template-columns: repeat(7, 1fr); } }
/* Tuile « Autre » : pas de photo, une pastille sur fond de carte */
.prestations .autre {
  aspect-ratio: 4 / 3.4;
  border: 1px dashed rgba(201, 146, 46, 0.4);
  border-radius: 10px;
  background: rgba(201, 146, 46, 0.04);
  display: grid;
  place-items: center;
}
.prestations .autre .pastille { margin: 0; }

/* Trois étapes de gauche à droite, reliées par une flèche ---------------- */
.parcours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.parcours .carte { position: relative; padding-top: 1.6rem; }
.parcours .num {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 96;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--or);
  opacity: 0.9;
  margin-bottom: 0.75rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 800px) {
  .parcours .carte:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: calc(-1 * clamp(1rem, 2vw, 1.5rem) / 2);
    width: 10px; height: 10px;
    border-top: 1px solid var(--or-sombre);
    border-right: 1px solid var(--or-sombre);
    transform: translate(50%, -50%) rotate(45deg);
    z-index: 1;
  }
}

/* Bande « ils nous font confiance » : à remplacer par des logos ----------- */
.confiance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--ligne);
}
.confiance span {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc-60);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
}

/* Coordonnées en colonne, à côté d'un formulaire ---------------------------- */
.coordonnees { list-style: none; display: grid; gap: 1.1rem; }
.coordonnees li { display: flex; gap: 0.9rem; align-items: center; }
.coordonnees .pastille { width: 44px; height: 44px; margin: 0; }
.coordonnees .pastille svg { width: 19px; height: 19px; }
.coordonnees .lib { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc-40); }
/* overflow-wrap : une adresse e-mail est un mot de 31 caractères, elle doit
   pouvoir se couper sur les écrans les plus étroits. */
.coordonnees a, .coordonnees .val { color: var(--blanc); text-decoration: none; font-size: 1.02rem; overflow-wrap: anywhere; }
.coordonnees a:hover { color: var(--or-clair); }

/* --- 15e. Page Faire un don ----------------------------------------------- */

/* Carte de don : la carte de verre de l'accueil, élargie et centrée.
   Elle hérite du faisceau lumineux, qui attire l'œil sur le bouton. */
.don-carte { max-width: 620px; margin-inline: auto; text-align: center; }
.don-carte .cv-label { margin-bottom: 0.5rem; }
.don-carte h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-variation-settings: "opsz" 40;
  margin-bottom: 0.75rem;
}
.don-carte p { color: var(--blanc-60); max-width: 44ch; margin-inline: auto; font-size: 0.98rem; }
.don-carte .btns { justify-content: center; margin-top: 1.5rem; }
.don-carte .garanties {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem;
  margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px; color: var(--blanc-40);
}
.don-carte .garanties span { display: inline-flex; align-items: center; gap: 0.4rem; }
.don-carte .garanties svg { width: 14px; height: 14px; color: var(--or); }

/* Module HelloAsso : emplacement de l'iframe fournie par la plateforme */
.don-module { max-width: 620px; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; }
.don-module .photo-vide { aspect-ratio: auto; min-height: 260px; }

/* Autres moyens de donner : deux cartes côte à côte */
.don-autres { display: grid; gap: clamp(1rem, 2vw, 1.5rem); max-width: 620px; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; }
@media (min-width: 640px) { .don-autres { grid-template-columns: 1fr 1fr; } }
.don-autres .qr {
  width: 96px; height: 96px; border-radius: 8px;
  border: 1px dashed rgba(201, 146, 46, 0.4);
  display: grid; place-items: center; color: var(--or-sombre);
  margin-bottom: 0.85rem;
}
.don-autres .qr svg { width: 28px; height: 28px; }

/* Partager : liens vers les réseaux, en boutons larges */
.partager { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Questions fréquentes : deux colonnes, réponses visibles ------------------- */
.faq {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 720px) { .faq { grid-template-columns: 1fr 1fr; } }
.faq .carte h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.faq .carte p { font-size: 0.95rem; }

/* Signature en fin de lettre, pour l'appel final ------------------------------ */
.cta-final .signe {
  font-family: var(--f-titre);
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--or-clair);
  margin-top: 1.25rem;
}

/* --- 15f. Page Contact --------------------------------------------------- */
.objets { display: grid; gap: clamp(0.75rem, 1.4vw, 1rem); margin-top: 1.5rem; }
@media (min-width: 560px) { .objets { grid-template-columns: 1fr 1fr; } }
/* Une carte qui est un lien : pas de soulignement, titre qui passe en doré au survol */
a.carte { text-decoration: none; color: inherit; }
a.carte h3 { transition: color var(--transition); }
a.carte:hover h3 { color: var(--or-clair); }
.objets .carte { padding: 1.1rem 1.15rem; }
.objets .carte h3 { font-size: 1rem; }
.objets .carte p { font-size: 0.88rem; }
.objets .pastille { width: 40px; height: 40px; }
.objets .pastille svg { width: 18px; height: 18px; }

/* --- 15g. Lecteur d'épisode : affiche, puis vidéo au clic ---------------- */
.episode {
  position: relative;
  /* Les épisodes sont en 3:4, pas en 9:16 : WhatsApp les avait encadrés de noir */
  aspect-ratio: 3 / 4;
  border: 1px solid var(--ligne);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0;
  transition: border-color var(--transition), transform var(--transition);
}
.episode:hover { border-color: var(--or-sombre); transform: translateY(-2px); }
.episode img, .episode video { width: 100%; height: 100%; object-fit: cover; display: block; }
.episode video { position: absolute; inset: 0; }
/* Voile + bouton de lecture, retirés dès que la vidéo démarre */
.episode .lecture {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(8,8,7,0.15) 0%, rgba(8,8,7,0.55) 100%);
  transition: opacity var(--transition);
}
.episode.joue .lecture { opacity: 0; pointer-events: none; }
.episode .lecture span {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--or);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.9);
  transition: transform var(--transition);
}
.episode:hover .lecture span { transform: scale(1.06); }
.episode .lecture svg { width: 22px; height: 22px; color: #14100a; margin-left: 3px; }
.episode .titre {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  font-size: 13px; font-weight: 500; color: var(--blanc);
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
  transition: opacity var(--transition);
}
.episode.joue .titre { opacity: 0; }


/* Une carte d'action sans photo : le corps occupe toute la carte */
.action > .corps:only-child { padding-top: clamp(1.5rem, 3vw, 2rem); }
/* Une image peut porter directement le cadre photo */
img.photo-cadre { width: 100%; height: auto; object-fit: cover; }


/* Panneau graphique : meme format qu'une photo, pour les actions
   dont nous n'avons pas encore d'image. Le symbole reste discret,
   la pastille du corps porte deja l'icone a taille lisible. */
.visuel--symbole {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--ligne);
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 90% 90% at 50% 40%, rgba(201, 146, 46, 0.10), transparent 70%),
    var(--noir-2);
  position: relative;
  overflow: hidden;
}
.visuel--symbole::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: url("../img/texture-tissu.jpg");
  background-image: image-set(
    url("../img/texture-tissu.avif") type("image/avif"),
    url("../img/texture-tissu.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
}
.visuel--symbole svg {
  position: relative;
  width: 44%;
  max-width: 96px;
  height: auto;
  aspect-ratio: 1;
  color: var(--or);
  opacity: 0.22;
}

/* --- 15h. Carrousel ------------------------------------------------------ */
.carrousel { position: relative; }

.carrousel-piste {
  display: flex;
  gap: clamp(12px, 1.8vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barre de defilement est masquee : la navigation passe par les
     fleches, les points, le doigt ou la molette. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 4px 6px;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste > * {
  flex: 0 0 auto;
  width: min(76vw, 320px);
  scroll-snap-align: start;
}
.carrousel-piste:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 6px; border-radius: 14px; }

/* Commandes : fleches et points, sous la piste */
/* Masquees quand tout tient dans la largeur : une fleche inerte
   et des points uniques feraient croire a un carrousel casse. */
.carrousel-cmd[hidden] { display: none; }
.carrousel-cmd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
}
.carrousel-fleche {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ligne);
  background: var(--surface);
  color: var(--blanc);
  display: grid; place-items: center;
  flex: none;
  transition: border-color var(--transition), color var(--transition), opacity var(--transition);
}
.carrousel-fleche svg { width: 18px; height: 18px; }
.carrousel-fleche:hover:not(:disabled) { border-color: var(--or-sombre); color: var(--or-clair); }
.carrousel-fleche:disabled { opacity: 0.3; cursor: default; }
.carrousel-fleche.prec svg { transform: rotate(180deg); }

.carrousel-points { display: flex; gap: 7px; margin-left: 4px; }
.carrousel-points button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ligne);
  padding: 0;
  transition: background var(--transition), width var(--transition);
}
.carrousel-points button[aria-current="true"] { background: var(--or); width: 22px; border-radius: 4px; }

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

/* --- 15i. Bouton de don flottant ----------------------------------------- */
/* Apparait une fois le premier ecran passe, disparait quand l'appel a
   l'action final est visible : deux boutons identiques cote a cote
   n'apporteraient rien. */
.don-flottant {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding-inline: 20px;
  border-radius: 14px;
  background-color: var(--or);
  background-image: var(--or-degrade-btn);
  color: #14100a;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(201, 146, 46, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 320ms var(--sortie), transform 320ms var(--sortie),
              visibility 320ms, filter var(--transition);
  overflow: hidden;
}
.don-flottant.visible { opacity: 1; visibility: visible; transform: none; }
.don-flottant:hover { color: #14100a; filter: brightness(1.08); }
.don-flottant svg { width: 17px; height: 17px; flex: none; }

/* Le reflet des boutons dores, repris a l'identique */
.don-flottant::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.14) 54%,
    transparent 62%);
  transform: translateX(-130%);
  animation: reflet 5s ease-in-out infinite;
}

/* Sur les plus petits ecrans, le libelle se reduit pour ne pas couvrir
   le contenu, et le bouton remonte au-dessus de la zone du pouce. */
@media (max-width: 480px) {
  .don-flottant { height: 48px; padding-inline: 16px; font-size: 14px; }
  .don-flottant .long { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .don-flottant { transition: none; }
  .don-flottant::after { display: none; }
}

/* --- 16. Accessibilité mouvement ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .anim { opacity: 1 !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__video { display: none; }
  /* Une animation infinie ramenée à 0,01ms clignoterait : on l'arrête net
     et on fige le faisceau sur un liseré doré discret. */
  .btn-or::after,
  .btn-hero.plein::after { display: none !important; }
  .carte-verre::after,
  .bandeau-or::after {
    animation: none !important;
    background: linear-gradient(135deg, rgba(224, 180, 95, 0.45), rgba(201, 146, 46, 0.12));
  }
}

/* --- 17. Impression ----------------------------------------------------- */
@media print {
  .site-nav, .menu-mobile, .hero__video, .hero__voile, .hero__grain, .photo-vide { display: none !important; }
  body { background: #fff; color: #000; }
}