/* =====================
     POLICES AUTO-HEBERGEES
     Syne + Inter, fichiers variables au format woff2, servis depuis nos
     propres serveurs. Aucune requete vers un tiers : l'adresse IP des
     visiteurs ne sort pas de l'hebergement (RGPD / CNIL).
     Licence SIL Open Font 1.1 : voir assets/fonts/OFL-*.txt
  ===================== */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =====================
     PALETTE OFFICIELLE TORPPY
  ===================== */
:root {
  --navy: #0B2D4D;
  --teal-deep: #135D73;
  --teal: #2FA7B8;
  --teal-light: #7DD6E0;
  --teal-pale: #EAF2F6;
  --orange: #F97344;
  --white: #FFFFFF;
  --slate: #4A6070;
  --text-dark: #0B2D4D;
  --sand: #F2F8FA;

  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 24px rgba(11, 45, 77, 0.10);
  --shadow-hover: 0 10px 36px rgba(11, 45, 77, 0.18);

  --nav-height: 80px;
  --subnav-height: 52px;

  --max-w: 1100px;
  --section-pad: 80px 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* overflow-x posé aussi sur html (pas seulement body) : un position:fixed
   (.nav, .nav-drawer) se positionne par rapport au viewport initial, et si
   ce dernier n'est pas explicitement borné, un débordement de flux normal
   ailleurs sur la page (masqué visuellement par le overflow-x de body) peut
   quand même élargir la base de calcul des éléments fixed — audit 2026-09-13
   sur /fr/projets/, confirmé en DevTools : documentElement.scrollWidth
   dépassait clientWidth de ~31px, entièrement dû au menu mobile fixed. */
body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== NAV ===================== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(11, 45, 77, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(127, 214, 224, 0.15);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 80px;
  display: flex;
  align-items: center;
}

.nav-right-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0.04em;
}

.nav-logo-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 24px;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--teal-light);
}

.nav-links a[aria-current="page"],
.nav-drawer-links a[aria-current="page"] {
  color: var(--teal-light);
  font-weight: 700;
}

.nav-cta {
  background: var(--orange) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s, transform 0.15s !important;
}

.nav-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-social-link {
  display: flex;
  color: var(--teal-light);
  transition: color 0.2s, opacity 0.2s;
}

.nav-social-link svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.5;
}

.nav-social-link:hover,
.nav-social-link:focus-visible {
  opacity: 0.75;
}

.nav-drawer-social {
  display: flex;
  width: 100%;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-drawer-social-link {
  display: flex;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}

.nav-drawer-social-link svg {
  width: 22px;
  height: 22px;
}

.nav-drawer-social-link:hover,
.nav-drawer-social-link:focus-visible {
  color: var(--teal-light);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  z-index: 120;
  position: relative;
  margin-left: 12px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-drawer,
.nav-backdrop {
  display: none;
}

/* ===================== HERO ===================== */
#hero {
  /* max() garde 100vh sur un écran normal, mais impose un plancher fixe
     (>= bas de la carte 4 de l'arc + marge) pour qu'une fenêtre très
     basse fasse défiler la page au lieu de rogner les cartes en
     position:absolute (elles ne poussent pas la hauteur du parent). */
  min-height: max(100vh, 850px);
  background:
    radial-gradient(ellipse at 75% 35%, rgba(47, 167, 184, 0.18) 0%, transparent 55%),
    linear-gradient(115deg, rgba(19, 93, 115, 0.03) 0%, rgba(19, 93, 115, 0.18) 42%, rgba(11, 45, 77, 0.42) 100%),
    url('assets/images/hero-turtle.jpg') center 30%/cover no-repeat;
  display: flex;
  align-items: flex-start;
  padding: 100px 24px 80px;
  position: relative;
  overflow: hidden;
}

/* Wave bottom */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(127, 214, 224, 0.15);
}

/* Wave lines SVG */
.hero-waves {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0.12;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin-left: auto;
  text-align: right;
}

#hero>.container {
  width: 100%;
  position: relative;
  z-index: 2;
}

@media (min-width: 901px) {
  .hero-content {
    max-width: 660px;
  }

  .hero-content h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  }
}

/* .hero-content ancré en haut (#hero: align-items flex-start) plutôt que
   centré verticalement : le titre reste toujours sous la nav quelle que
   soit la hauteur d'écran, et ça laisse la moitié basse du hero libre pour
   l'arc de cartes qui longe la tortue (voir .hero-stats-impact). */

.hero-acronym {
  position: absolute;
  left: 90px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-acronym b {
  color: var(--orange);
  font-weight: 800;
  font-size: 1.8em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-acronym-amp {
  color: var(--teal);
  font-size: 1.7em;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(127, 214, 224, 0.12);
  border: 1px solid rgba(127, 214, 224, 0.3);
  color: var(--teal-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}

.hero-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

h1 em {
  font-style: normal;
  color: var(--orange);
}

.hero-desc {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px;
  margin-bottom: 40px;
  margin-left: auto;
  font-weight: 700;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-desc strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: white;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 20px rgba(47, 167, 184, 0.35);
  text-decoration: none;
}

.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}

.btn-outline:hover {
  border-color: var(--teal-light);
  color: var(--teal-light);
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 52px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 36px;
  border-top: 1px solid rgba(127, 214, 224, 0.18);
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--teal-light);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  margin-top: 5px;
}

/* Cartes en arc : chaque .hero-stat est positionnée individuellement
   (nth-child) pour dessiner un arc de cercle qui longe la tête et
   l'encolure de la tortue plutôt que de couvrir un bloc rectangulaire.
   .hero-stats-impact devient une simple zone de positionnement calée sur
   .hero-content (déjà position:relative) — les cartes sortent donc du
   flux normal, ce qui règle aussi le débordement vertical sur petit écran
   puisqu'elles ne poussent plus la hauteur de .hero-content. Offsets posés
   à l'oeil à partir des captures d'écran : à réajuster après vérification
   visuelle réelle. */
.hero-stats.hero-stats-impact {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-stats-impact .hero-stat {
  position: absolute;
  pointer-events: auto;
  width: 280px;
  text-align: left;
  background: rgba(7, 30, 51, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-md);
  padding: 12px 14px 10px;
}

/* Arc : la carte 1 part du bord droit sous le texte et s'étire vers le
   bord de la fenêtre (au-delà de .hero-content, right négatif) pour
   combler l'eau vide plutôt que de rester collée au texte. Les cartes
   2/3 s'élargissent aussi vers la droite tout en gardant leur bord
   gauche fixe (bulge inchangé côté tortue). La carte 4 boucle vers la
   gauche pour finir sous la tête de la tortue, remontée pour réduire
   l'écart visuel avec la carte 3. Offsets calés sur le viewport réel
   d'un MacBook Pro 14" (1512x862 en pleine fenêtre) pour tenir sans
   scroll. */
.hero-stats-impact .hero-stat:nth-child(1) {
  top: 146px;
  right: -50px;
}

.hero-stats-impact .hero-stat:nth-child(2) {
  top: 287px;
  right: -25px;
}

.hero-stats-impact .hero-stat:nth-child(3) {
  top: 428px;
  right: 70px;
}

.hero-stats-impact .hero-stat:nth-child(4) {
  top: 478px;
  right: 402px;
}

.hero-stats-impact .hero-stat-num {
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.97);
  white-space: normal;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-stats-impact .hero-stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  line-height: 1.25;
  margin-top: 4px;
  font-size: 0.74rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hero-stat-source {
  font-size: 0.6rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ===================== SECTION TITLES ===================== */
.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}

h2 em {
  font-style: normal;
  color: var(--teal);
}

#rejoindre h2 em {
  color: var(--orange);
}

#rejoindre .btn-primary {
  background: var(--orange);
  box-shadow: none;
}

#rejoindre .btn-outline {
  border-color: var(--orange);
}

#rejoindre .btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.section-intro {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.78;
  margin-bottom: 48px;
}

/* ===================== QUI SOMMES-NOUS ===================== */
#qui-sommes-nous {
  padding: var(--section-pad);
  background: var(--navy);
  text-align: center;
}

#qui-sommes-nous h2 {
  color: white;
}

#qui-sommes-nous p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--orange);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.8;
}

#qui-sommes-nous p+p {
  margin-top: 20px;
}

/* ===================== MISSION ===================== */
#mission {
  padding: var(--section-pad);
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    url('/assets/images/coraux-fond.jpg') center 20%/cover no-repeat;
}

.mission-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.mission-card {
  flex: 1 1 240px;
  max-width: 320px;
  background: var(--teal-pale);
  border-radius: var(--radius-lg);
  padding: 30px;
  border-left: 4px solid var(--orange);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 14px;
}

.mission-card-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-size: 1.8rem;
}

.mission-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.mission-card p {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.7;
}

.onehealth-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-deep) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
  border: 1px solid rgba(127, 214, 224, 0.2);
  position: relative;
  overflow: hidden;
}

.onehealth-banner::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(127, 214, 224, 0.06);
}

.onehealth-icon {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.onehealth-banner h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.onehealth-banner p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
}

.onehealth-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tag {
  background: rgba(127, 214, 224, 0.15);
  color: var(--teal-light);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(127, 214, 224, 0.28);
}

.onehealth-torppy {
  width: fit-content;
  margin-top: -56px;
  margin-left: auto;
  margin-right: 48px;
}

@media (max-width: 900px) {
  .onehealth-torppy {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  .onehealth-torppy {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===================== PROJETS ===================== */
#projets {
  padding: var(--section-pad);
  background: var(--navy);
}

#projets .section-label {
  color: var(--teal-light);
}

#projets h2 {
  color: white;
}

#projets .section-intro {
  color: rgba(255, 255, 255, 0.5);
}

.projets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 18px;
}

.projet-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--teal-light);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}

.projet-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.projet-card:hover {
  background: rgba(47, 167, 184, 0.07);
  border-color: var(--teal-light);
  transform: translateY(-4px);
}

.projet-card:hover::before {
  transform: scaleX(1);
}

.projet-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 2px solid rgba(127, 214, 224, 0.35);
}

.projet-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(127, 214, 224, 0.1);
  border: 2px dashed rgba(127, 214, 224, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.projet-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 6px;
}

.projet-fullname {
  font-size: 0.74rem;
  color: var(--teal-light);
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.4;
}

.projet-card p {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
}

.projet-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal-light);
  background: rgba(127, 214, 224, 0.12);
  border: 1px solid rgba(127, 214, 224, 0.25);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.projet-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-light);
}

.projet-card-new {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-style: dashed;
  border-color: rgba(127, 214, 224, 0.25);
  background: transparent;
}

.projet-card-new:hover {
  background: rgba(47, 167, 184, 0.05);
}

.projet-card-new .projet-name {
  color: var(--teal-light);
  font-size: 1rem;
}

.projet-card-new p {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.82rem;
  margin-top: 8px;
}

/* ===================== ÉQUIPE ===================== */
#equipe {
  padding: var(--section-pad);
  background: var(--white);
}

/* Sur /fr/equipes/, #equipe est la 1re section de .inner-page (pas de
   .inner-page-header avant) : son padding-top s'ajoutait à celui de
   .inner-page et doublait l'espace avant le titre. */
.inner-page #equipe {
  padding-top: 0;
}

/* Le titre de #equipe est un <h1> (TORPP-audit 2026-09-13 : la page n'avait
   aucun H1). Sans .inner-page-header, il hérite sinon du H1 générique pensé
   pour les héros sombres (texte blanc + ombre) : sur le fond blanc d'#equipe,
   il serait invisible. On restaure ici l'habillage qu'avait le H2 précédent. */
#equipe h1 {
  color: var(--navy);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  line-height: 1.12;
  margin-bottom: 16px;
  text-shadow: none;
}

#equipe h1 em {
  color: var(--teal);
}

.equipe-tabs {
  display: flex;
  gap: 4px;
  background: var(--teal-pale);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 40px;
  width: fit-content;
}

.equipe-tab {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.2s;
}

.equipe-tab.active {
  background: var(--navy);
  color: white;
}

.equipe-panel {
  display: none;
}

.equipe-panel.active {
  display: block;
}

.bureau-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.membre-card {
  background: var(--teal-pale);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

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

.membre-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  border: 3px solid var(--teal);
}

.membre-photo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  margin: 0 auto 12px;
  border: 3px solid var(--teal);
}

.membre-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.membre-role {
  font-size: 0.75rem;
  color: var(--teal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.membre-bio {
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.6;
  margin-top: 10px;
}

.membres-actifs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 4px;
}

.membre-actif-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--teal-pale);
  border-radius: var(--radius-md);
}

.membre-actif-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  border: 2px solid var(--teal);
}

.membre-actif-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--teal);
}

.membre-actif-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
}

.membre-actif-role {
  font-size: 0.75rem;
  color: var(--slate);
  margin-top: 2px;
}

.rejoindre-equipe {
  background: rgba(47, 167, 184, 0.07);
  border: 1.5px dashed rgba(47, 167, 184, 0.4);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rejoindre-equipe p {
  font-size: 0.82rem;
  color: var(--slate);
}

.rejoindre-equipe a {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: underline;
}

.cs-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal-pale);
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cs-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--teal-pale);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--teal);
  transition: box-shadow 0.2s;
}

.cs-card:hover {
  box-shadow: var(--shadow-card);
}

.cs-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.cs-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
}

/* Témoignages Présidente / Coordinateur Scientifique (TORPP-20) — côte à
   côte, image telle quelle (texte de citation déjà composé dans le visuel
   fourni par le bureau), visibles au-dessus des onglets donc quel que soit
   l'onglet actif. flex-wrap plutôt qu'un breakpoint dédié : les deux images
   passent naturellement en pile sous ~600px cumulés. */
.temoignages-duo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin: 32px 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 16px;
  box-sizing: border-box;
}

.temoignage-card {
  flex: 1 1 460px;
  background: var(--sand);
  border: 1px solid var(--teal-pale);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(11, 45, 77, 0.06);
  padding: 40px;
}

.temoignage-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.temoignage-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.temoignage-identite {
  flex: 1;
}

.temoignage-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
}

.temoignage-role {
  font-size: 0.85rem;
  color: var(--teal);
}

.temoignage-logo {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.temoignage-quote {
  font-size: 0.96rem;
  font-style: italic;
  color: var(--slate);
  line-height: 1.7;
}

.temoignage-quote+.temoignage-quote {
  margin-top: 10px;
}


.cs-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
}

.cs-role {
  font-size: 0.74rem;
  color: var(--slate);
  margin-top: 2px;
  line-height: 1.4;
}

/* ===================== VIDÉOS ===================== */
#videos {
  padding: var(--section-pad);
  background: var(--white);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Scopé à #videos (page /fr/actions/) : .video-grid est réutilisée telle
   quelle par .plaquette-card sur /fr/soutenir/ (voir TORPP-21 plus bas),
   qui a besoin de rester en 2 colonnes — ne pas toucher la règle .video-grid
   de base pour éviter de casser cette grille de plaquettes. */
#videos .video-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===================== ACTUALITÉS ===================== */
#actualites {
  padding: var(--section-pad);
  background: var(--sand);
}

/* ===================== PARTICIPER (actions) ===================== */
#participer,
#participate {
  padding: var(--section-pad);
  background: var(--white);
}

.actu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.actu-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s, transform 0.25s;
}

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

.actu-img {
  height: 160px;
  background: linear-gradient(135deg, var(--navy), var(--teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  overflow: hidden;
}

.actu-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Carrousel actualités (TORPP-22) : wrapper optionnel autour de .actu-grid,
   qui bascule la grille en piste défilante horizontale à scroll-snap. Le
   sélecteur reste imbriqué sous .actu-carousel pour que .actu-grid seul
   (page d'accueil anglaise) garde sa grille CSS classique sans fléches. */
.actu-carousel {
  display: flex;
  align-items: center;
  gap: 12px;
}

.actu-carousel .actu-grid {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.actu-carousel .actu-grid::-webkit-scrollbar {
  display: none;
}

.actu-carousel .actu-card {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  scroll-snap-align: start;
}

/* Les cartes peu/pas visibles au chargement (aperçu à 90% en mobile, 4e
   carte masquée par le scroll horizontal en desktop) n'atteignent pas le
   seuil de déclenchement de l'IntersectionObserver du scroll reveal tant
   qu'aucun scroll ne force un recalcul — elles restaient donc invisibles
   (opacity: 0) au premier rendu. Le carrousel n'a pas besoin de cette
   animation d'apparition : ses cartes s'affichent directement. */
.actu-carousel .actu-card.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.actu-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--teal-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.actu-arrow svg {
  width: 20px;
  height: 20px;
}

.actu-arrow:hover {
  background: var(--teal);
  color: var(--white);
}

.actu-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: var(--white);
  color: var(--navy);
}

.actu-body {
  padding: 22px;
}

.actu-date {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.actu-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}

.actu-card p {
  font-size: 0.84rem;
  color: var(--slate);
  line-height: 1.65;
}

.actu-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal);
  transition: gap 0.2s;
}

.actu-card:hover .actu-link {
  gap: 8px;
}

/* ===================== PLAQUETTES DE FINANCEMENT (TORPP-21) ===================== */
/* Grille (.video-grid) et carte + hover (.actu-card) réutilisées telles
   quelles depuis les composants existants plutôt que redéfinies — seul le
   comportement propre au lien <a> (display:block, par défaut inline) et le
   dimensionnement de l'<img> manquaient. */
.plaquette-card {
  display: block;
}

.plaquette-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ===================== PARTENAIRES ===================== */
#partenaires {
  padding: var(--section-pad);
  background: var(--white);
}

.partenaires-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.partenaires-tab {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--teal-pale);
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.2s;
}

.partenaires-tab.active,
.partenaires-tab:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

.partenaires-panel {
  display: none;
}

.partenaires-panel.active {
  display: block;
}

.partenaires-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.partenaire-card {
  border: 1.5px solid var(--teal-pale);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.partenaire-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--teal);
  transform: translateY(-2px);
}

.partenaire-logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.partenaire-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.partenaire-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Logos plus grands sur l'onglet Partenaires de /fr/equipes/ (TORPP-20) —
   .partenaire-logo est partagée avec en/index.html, dont l'onglet
   Partenaires scientifiques n'affiche pour l'instant que des placeholders.
   Le scoping passe par .inner-page (présent uniquement sur les pages
   profondes, jamais sur l'accueil FR ni EN) pour ne pas agrandir aussi ces
   futurs logos EN le jour où ils seront renseignés. */
.inner-page #tab-partenaires .partenaire-logo {
  width: min(256px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  background: none;
  border: none;
  padding: 0;
}

.partenaire-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
}

.partenaire-type {
  font-size: 0.72rem;
  color: var(--teal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.partenaire-card-new {
  border-style: dashed;
  border-color: rgba(47, 167, 184, 0.35);
  background: var(--teal-pale);
}

.partenaire-card-new .partenaire-name {
  color: var(--teal);
}

.partenaire-card-new p {
  font-size: 0.75rem;
  color: var(--slate);
  text-align: center;
}

/* ===================== MÉCÈNES — page dédiée (TORPP-19) ===================== */
.mecene-spotlight {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--white);
  border: 1.5px solid var(--teal-pale);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.mecene-spotlight+.mecene-spotlight {
  margin-top: 24px;
}

.mecene-spotlight-logo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  flex-shrink: 0;
}

.mecene-spotlight-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mecene-spotlight-body {
  flex: 1;
}

.mecene-spotlight-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
}

.mecene-spotlight-type {
  font-size: 0.75rem;
  color: var(--teal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.mecene-spotlight-text {
  margin-top: 14px;
  color: var(--slate);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .mecene-spotlight {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }

  .mecene-spotlight-logo {
    width: 88px;
    height: 88px;
    font-size: 2rem;
  }
}

#mecenes {
  padding: var(--section-pad);
  background: var(--white);
}

#devenir-mecene {
  padding: var(--section-pad);
  background: var(--sand);
}

#mecenes,
#devenir-mecene {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

/* ===================== REJOINDRE — avec Torppy ===================== */
#rejoindre {
  padding: var(--section-pad);
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

#rejoindre .section-label {
  color: var(--teal-light);
}

#rejoindre h2 {
  color: white;
}

#rejoindre .section-intro {
  color: rgba(255, 255, 255, 0.5);
}

/* Torppy dans la section rejoindre */
.rejoindre-torppy {
  position: absolute;
  right: max(24px, calc(50% - 560px));
  bottom: 0;
  width: min(280px, 28vw);
  opacity: 1;
  pointer-events: none;
}

.rejoindre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.rejoindre-card {
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid rgba(127, 214, 224, 0.15);
  position: relative;
  z-index: 1;
}

.rejoindre-card.benevole {
  background: rgba(127, 214, 224, 0.07);
}

.rejoindre-card.don {
  background: var(--teal);
}

.rejoindre-card-icon {
  font-size: 2rem;
  margin-bottom: 14px;
  display: block;
}

.rejoindre-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.rejoindre-card.benevole h3 {
  color: white;
}

.rejoindre-card.don h3 {
  color: var(--navy);
}

.rejoindre-card.benevole p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  line-height: 1.7;
}

.rejoindre-card.don p {
  color: rgba(11, 45, 77, 0.7);
  font-size: 0.92rem;
  line-height: 1.7;
}

.btn-don {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: var(--navy);
  color: var(--teal-light);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
}

.btn-don:hover {
  opacity: 0.85;
}

.btn-benevole {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: var(--teal);
  color: white;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
}

.btn-benevole:hover {
  opacity: 0.85;
}

.contact-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(127, 214, 224, 0.12);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  z-index: 1;
}

.contact-wrap h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: white;
  margin-bottom: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea,
.form-group select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 12px 16px;
  border: 1.5px solid rgba(127, 214, 224, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-group select option {
  background: var(--navy);
  color: white;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47, 167, 184, 0.12);
}

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

/* ===================== TORPPY SECTION ===================== */
@keyframes torppy-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

#torppy {
  padding: 60px 24px;
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.torppy-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}

.torppy-img-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

.torppy-main-img {
  width: min(280px, 90%);
  filter: drop-shadow(0 16px 40px rgba(11, 45, 77, 0.18));
  animation: torppy-float 4s ease-in-out infinite;
}

.torppy-text .section-label {
  color: var(--teal-deep);
}

.torppy-text h2 {
  color: var(--navy);
}

.torppy-text p {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.78;
  margin-bottom: 16px;
}

.torppy-moods {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.torppy-mood {
  background: white;
  border: 1.5px solid var(--teal-light);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--teal-deep);
}

/* ===================== FOOTER ===================== */
footer {
  background: #071E33;
  color: rgba(255, 255, 255, 0.45);
  padding: 52px 24px 32px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-logo-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: white;
}

.footer-logo-text {
  color: white;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.footer-desc {
  font-size: 0.84rem;
  line-height: 1.72;
}

.footer-col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--teal-light);
}

.footer-col a {
  display: block;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 9px;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: white;
}

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom a:hover {
  color: white;
}

.social-links {
  display: flex;
  gap: 10px;
}

.social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
  font-family: var(--font-display);
}

.social-link:hover {
  background: var(--teal);
  color: white;
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* ===================== ACCUEIL — NOUVEAUX BLOCS (TORPP-04) ===================== */
#one-health {
  padding: var(--section-pad);
  background: var(--sand);
}

#one-health .btn-outline {
  color: var(--navy);
  border-color: rgba(11, 45, 77, 0.3);
}

#one-health .btn-outline:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.img-bleed {
  width: 100vw;
  margin: 8px calc(50% - 50vw) 40px;
}

.img-bleed-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

.img-bleed-inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.img-bleed-inner img.img-scale-80 {
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .img-bleed-inner {
    padding: 0 20px;
  }
}

#credibilite,
#pragmatisme {
  padding: var(--section-pad);
  background: var(--white);
}

#pragmatisme {
  padding-top: 24px;
}

.credibilite-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.credibilite-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--teal-deep);
  line-height: 1;
}

.credibilite-stat-label {
  font-size: 0.76rem;
  color: var(--slate);
  margin-top: 5px;
}

.video-frame-centered {
  max-width: 640px;
  margin: 32px auto 0;
}

.soutenir-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.soutenir-actions > .btn-don {
  margin-top: 0;
}

/* ===================== SCROLL REVEAL ===================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ===================== PAGE SUBNAV ===================== */
.page-subnav {
  position: sticky;
  top: calc(var(--nav-height) + 1px);
  z-index: 90;
  margin-top: var(--nav-height);
  height: var(--subnav-height);
  background: var(--white);
  border-bottom: 1px solid rgba(11, 45, 77, 0.08);
}

.page-subnav-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .page-subnav-inner {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
}

.page-subnav-link {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  transition: color 0.2s;
}

.page-subnav-link:hover {
  color: var(--teal-deep);
}

.page-subnav-link[aria-current="true"] {
  color: var(--teal);
  font-weight: 700;
}

.inner-page-content section[id] {
  scroll-margin-top: calc(var(--nav-height) + var(--subnav-height) + 24px);
}

/* ===================== INNER PAGE ===================== */
.inner-page {
  padding: 140px 24px 96px;
}

/* A .page-subnav already occupies margin-top: var(--nav-height) plus its own
   height above <main>, so pages that use it need far less extra top padding
   than pages without the component. */
.page-subnav+.inner-page {
  padding-top: 40px;
}

.inner-page-header {
  max-width: var(--max-w);
  margin: 0 auto 56px;
  text-align: center;
}

.inner-page-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--navy);
}

.inner-page-header p {
  margin-top: 16px;
  color: var(--slate);
  font-size: 1.1rem;
}

/* Modifier used only on /fr/comprendre/ — leaves .inner-page-header untouched
   for the other pages that share the component. */
.hero-turtle {
  width: 100vw;
  max-width: none;
  margin: 0 0 64px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 96px 24px;
  background:
    linear-gradient(rgba(11, 45, 77, 0.6), rgba(11, 45, 77, 0.82)),
    url('/assets/images/fond-tortue.png') center / cover no-repeat;
}

.hero-turtle-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.hero-turtle h1 {
  color: var(--white);
}

.hero-turtle p {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
  .hero-turtle {
    padding: 64px 20px;
  }
}

.inner-page-content {
  max-width: 72ch;
  margin: 0 auto;
}

.inner-page-content>*+* {
  margin-top: 1.5em;
}

.inner-page-content section+section {
  margin-top: 64px;
}

@media (max-width: 900px) {
  .inner-page {
    padding: 108px 20px 72px;
  }

  .page-subnav+.inner-page {
    padding-top: 32px;
  }
}

/* /fr/comprendre/ only — the hero-turtle band handles its own top spacing
   (see .hero-turtle padding), so .inner-page just needs to clear the fixed
   nav, not the extra breathing room the white-background header needed. */
.inner-page--flush-hero {
  padding-top: var(--nav-height);
}

/* ===================== RESPONSIVE ===================== */
/* 1120px, not 900px: .nav-inner is capped at --max-w (1100px), so the
   horizontal nav's content budget never exceeds ~1052px. Between 900 and
   1100px the viewport itself — not the design width — was the constraint,
   narrower than that budget, which is what caused the nav to overflow.
   Switching to the hamburger before that band is reached means the
   horizontal nav only ever shows with its full, tested budget. */
@media (max-width: 1120px) {
  .nav-links {
    display: none;
  }

  .nav-social {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-drawer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 68px;
    right: 0;
    bottom: 0;
    width: min(320px, 82vw);
    gap: 4px;
    background: rgba(11, 45, 77, 0.98);
    padding: 28px 24px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    z-index: 110;
  }

  .nav-drawer.nav-open {
    transform: translateX(0);
  }

  .nav-drawer-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nav-drawer-links li {
    width: 100%;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-drawer.nav-open .nav-drawer-links li {
    opacity: 1;
    transform: translateX(0);
  }

  .nav-drawer.nav-open .nav-drawer-links li:nth-child(1) {
    transition-delay: 0.05s;
  }

  .nav-drawer.nav-open .nav-drawer-links li:nth-child(2) {
    transition-delay: 0.1s;
  }

  .nav-drawer.nav-open .nav-drawer-links li:nth-child(3) {
    transition-delay: 0.15s;
  }

  .nav-drawer.nav-open .nav-drawer-links li:nth-child(4) {
    transition-delay: 0.2s;
  }

  .nav-drawer.nav-open .nav-drawer-links li:nth-child(5) {
    transition-delay: 0.25s;
  }

  .nav-drawer.nav-open .nav-drawer-links li:nth-child(6) {
    transition-delay: 0.3s;
  }

  .nav-drawer-links a {
    padding: 10px 4px;
    width: 100%;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
  }

  .nav-drawer-links a:hover {
    color: var(--teal-light);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(5, 15, 25, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 95;
  }

  .nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-open {
    overflow: hidden;
  }

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

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

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

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

  .membres-actifs-grid {
    grid-template-columns: 1fr 1fr;
  }

  .torppy-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 56px 20px;
  }

  #pragmatisme {
    padding-top: 16px;
  }

  .mission-card {
    flex-basis: 100%;
    max-width: 100%;
  }

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

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

  /* Largeur < 100% : un bout de la carte suivante dépasse à droite, pour
     signaler qu'on peut swiper (complété par le fondu ci-dessous, même
     technique que .page-subnav-inner). */
  .actu-carousel .actu-card {
    flex-basis: 90%;
  }

  /* Sous 768px, garder les flèches à côté d'une carte quasi plein écran ne
     laisse presque plus de place pour le texte et les fait flotter au
     milieu de la carte (align-items:center sur .actu-carousel, hauteur de
     carte variable). La navigation tactile (swipe / scroll-snap déjà en
     place sur .actu-grid) suffit sur mobile, avec l'aperçu de carte
     suivante + le fondu en guise d'indice visuel. */
  .actu-arrow {
    display: none;
  }

  .actu-carousel .actu-grid {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }

  .video-grid,
  #videos .video-grid {
    grid-template-columns: 1fr;
  }

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

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .onehealth-banner {
    flex-direction: column;
    padding: 28px 24px;
  }

  h1 {
    font-size: 2rem;
  }

  .hero-stats {
    gap: 24px;
    justify-content: flex-start;
  }

  /* L'arc absolu ne marche que sur une photo large ; sur mobile/tablette
     on repasse les cartes dans le flux normal, empilées sous le texte. */
  .hero-stats.hero-stats-impact {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
    align-items: flex-start;
  }

  .hero-stats-impact .hero-stat {
    position: static;
    width: 100%;
    max-width: 320px;
  }

  #hero {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .hero-content {
    margin-top: 0;
    margin-left: 0;
    text-align: left;
  }

  .hero-desc {
    margin-left: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-acronym {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font-size: 0.8rem;
    white-space: normal;
    text-align: center;
  }

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

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

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

  .membres-actifs-grid {
    grid-template-columns: 1fr;
  }

  /* flex-wrap cassait le fond en pilule (var(--radius-pill)) sur 2 lignes
     dès que les 3 boutons ne tenaient plus sur une ligne : le bouton actif
     débordait du contour arrondi. Piste défilante à la place, même
     principe que .page-subnav-inner (fondu au bord droit inclus). */
  .equipe-tabs {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }

  .equipe-tabs::-webkit-scrollbar {
    display: none;
  }

  .equipe-tab {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 8px 14px;
  }
}

/* ===================== LANG SWITCH ===================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(127, 214, 224, 0.15);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  padding: 4px 8px;
  transition: all 0.2s;
  text-transform: uppercase;
}

.lang-btn.active {
  background: rgba(47, 167, 184, 0.6);
  color: white;
}

.lang-btn:hover:not(.active) {
  color: var(--teal-light);
}

/* ===================== MOBILE RESPONSIVE ===================== */
@media (max-width: 768px) {
  :root {
    --section-pad: 56px 20px;
    --nav-height: 60px;
  }

  /* Nav */
  .nav-inner {
    padding: 0 16px;
    height: 60px;
  }

  .nav-logo {
    font-size: 1rem;
  }

  .nav-logo-img {
    width: 48px;
    height: 48px;
  }

  .nav-logo-text-sub {
    font-size: 0.55rem;
  }

  .nav-drawer {
    top: 60px;
  }

  .lang-btn {
    padding: 4px 7px;
    font-size: 0.62rem;
  }

  /* Hero */
  #hero {
    padding: 80px 20px 48px;
    min-height: auto;
  }

  .hero-content {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }

  .hero-desc {
    font-size: 0.92rem;
    margin-bottom: 28px;
  }

  .hero-actions {
    gap: 10px;
  }

  .btn-primary,
  .btn-outline {
    padding: 12px 20px;
    font-size: 0.88rem;
  }

  .hero-stats {
    gap: 24px;
    margin-top: 36px;
  }

  .hero-stat-num {
    font-size: 1.8rem;
  }

  /* Mission */
  .mission-grid {
    gap: 14px;
  }

  .mission-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* Torppy section */
  .torppy-inner {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .torppy-img-wrap {
    width: 180px;
    margin: 0 auto 24px;
  }

  .torppy-main-img {
    width: 100%;
  }

  #torppy {
    padding: 48px 20px;
  }

  /* Projets */
  .projets-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .projet-card {
    padding: 20px;
  }

  /* Équipe */
  .equipe-tabs {
    gap: 8px;
  }

  .membres-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .membre-card {
    padding: 16px 12px;
  }

  /* Partenaires */
  .partenaires-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .partenaires-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Actualités */
  .actu-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Rejoindre */
  .rejoindre-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rejoindre-torppy {
    width: 180px;
    opacity: 0.05;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: 24px;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-social {
    justify-content: flex-start;
  }

  /* Sections */
  h2 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .section-intro {
    font-size: 0.92rem;
    margin-bottom: 32px;
  }

  .onehealth-banner {
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px;
  }
}

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

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

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

  .equipe-tab,
  .partenaires-tab {
    font-size: 0.78rem;
    padding: 8px 12px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ===================== COMPRENDRE — ACCORDÉON & CALLOUT (TORPP-05) ===================== */
.inner-page-content section>*+p {
  margin-top: 1.5em;
}

.accordion {
  border: 1px solid rgba(11, 45, 77, 0.12);
  border-radius: var(--radius-md);
  margin-top: 24px;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal-deep);
  cursor: pointer;
  text-align: left;
}

.accordion-trigger:hover,
.accordion-trigger:focus-visible {
  color: var(--teal);
}

.accordion-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.accordion-icon::before {
  content: '+';
}

.accordion.is-open .accordion-icon::before {
  content: '\2212';
}

.accordion-panel {
  display: none;
  padding: 0 20px 20px;
}

.accordion.is-open .accordion-panel {
  display: block;
}

.accordion-torppy-links,
.projet-poster-link {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.axis-torppy-bubble,
.torppy-link {
  background: white;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}

.torppy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  text-decoration: none;
}

.torppy-link:hover,
.torppy-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.torppy-link-icon {
  width: 28px;
  height: auto;
  flex-shrink: 0;
}

.callout-stat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--sand);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
}

.callout-stat-num {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  color: var(--teal-deep);
  line-height: 1;
  flex-shrink: 0;
}

.callout-stat p {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .callout-stat-num {
    font-size: 2.75rem;
  }
}

/* ===================== COMPRENDRE — RÉCIT VISUEL (fil conducteur) ===================== */
.title-accent {
  color: var(--orange);
}

.title-underline {
  padding-bottom: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='18' viewBox='0 0 70 18'%3E%3Cpath d='M2 11c4-7 8-7 12 0s8 7 12 0 8-7 12 0 8 7 12 0 8-7 12 0' fill='none' stroke='%23F97344' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 70px 18px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.story-photo {
  width: 42%;
  max-width: 320px;
  margin-top: 28px;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotate(-1.4deg);
}

.story-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.story-photo--right {
  margin-left: auto;
  transform: rotate(1.4deg);
}

.story-photo--left {
  margin-right: auto;
  transform: rotate(-1.4deg);
}

.story-block--right,
.story-block--left {
  width: min(72ch, calc(100vw - 48px));
  margin-left: 50%;
}

.story-block--right {
  transform: translateX(calc(min(var(--max-w), 100vw - 48px) / 2 - 100%));
}

.story-block--left {
  transform: translateX(calc(min(var(--max-w), 100vw - 48px) / -2));
}

.story-thread {
  max-width: 240px;
  height: 70px;
  margin: 4px auto;
}

.story-thread--flourish {
  height: 84px;
}

.story-thread svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.story-thread path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.1s ease;
}

.story-thread.visible path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .story-thread path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 640px) {
  .story-thread {
    max-width: none;
    width: 16px;
    height: 56px;
    margin: 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28' viewBox='0 0 16 28'%3E%3Cpath d='M8 2c7 4 -7 8 0 12s -7 8 0 12' fill='none' stroke='%23F97344' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center top;
  }

  .story-thread svg {
    display: none;
  }

  .story-photo {
    width: 70%;
    max-width: 260px;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none;
  }
}

#one-health h2 {
  text-align: center;
}

.onehealth-lead {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.15rem;
}

@media (min-width: 641px) {
  #one-health {
    width: min(var(--max-w), calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

#voir-projets {
  text-align: center;
}

/* ===================== PROJETS — ONGLETS D'AXE (TORPP-06) ===================== */
#projets-axes {
  padding: var(--section-pad);
  background: var(--navy);
}

#projets-axes .section-label {
  color: var(--teal-light);
}

#projets-axes h2 {
  color: white;
}

#projets-axes .section-intro {
  color: rgba(255, 255, 255, 0.5);
}

.section-photo-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 48px 0 0;
}

.section-photo {
  display: block;
  width: 80%;
  min-width: 0;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.section-photo--large {
  width: 100%;
  margin-top: 32px;
  margin-bottom: 48px;
}

@media (max-width: 640px) {
  .section-photo-row {
    flex-direction: column;
  }

  .section-photo {
    width: 100%;
  }
}

.axis-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.axis-tab {
  flex: 1;
  min-width: 180px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.axis-tab.active {
  background: var(--teal);
  color: white;
}

.axis-tab:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: 2px;
}

.axis-panel {
  display: none;
}

.axis-panel.active {
  display: block;
}

.axis-intro {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 72ch;
  margin-bottom: 28px;
}

/* Accordéon TORPP-05 réutilisé ici sur fond sombre : override de contraste */
#projets-axes .accordion {
  border-color: rgba(127, 214, 224, 0.2);
  margin-top: 16px;
}

#projets-axes .accordion-trigger {
  color: var(--teal-light);
}

@media (max-width: 640px) {
  .axis-tabs {
    flex-direction: column;
    border-radius: var(--radius-lg);
  }

  .axis-tab {
    min-width: 0;
  }
}

/* ===================== PROJETS — LOGO À INITIALES (TORPP-06) ===================== */
.projet-logo-initials {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

/* ===================== SOUTENIR (TORPP-08) ===================== */

/* La règle scroll-margin-top existante (styles.css:1596) ne cible que
   .inner-page-content section[id] ; cette page n'utilise pas .inner-page-content
   (cartes/grilles pleine largeur, comme /projets/ et /association/), donc on la
   généralise via la présence de .page-subnav plutôt que du conteneur de texte. */
.page-subnav~.inner-page section[id] {
  scroll-margin-top: calc(var(--nav-height) + var(--subnav-height) + 24px);
}

#don {
  padding: var(--section-pad);
  background: var(--white);
}

#financer-etude {
  padding: var(--section-pad);
  background: var(--white);
}

#benevolat {
  padding: var(--section-pad);
  background: var(--teal-pale);
}

#mecenat {
  padding: var(--section-pad);
  background: var(--white);
}

#contact {
  padding: var(--section-pad);
  background: var(--navy);
}

#contact .section-label {
  color: var(--teal-light);
}

#contact h2 {
  color: white;
}

#contact .section-intro {
  color: rgba(255, 255, 255, 0.5);
}

#coordonnees {
  padding: var(--section-pad);
  background: var(--teal-pale);
}

/* .social-link (styles.css:1468) est conçu pour un fond sombre (footer) ;
   variante claire pour la section coordonnées, fond teal-pale. */
#coordonnees .social-link {
  background: rgba(11, 45, 77, 0.06);
  color: var(--navy);
}

#coordonnees .social-link:hover {
  background: var(--teal);
  color: white;
}

.soutenir-notice {
  background: var(--teal-pale);
  border-left: 4px solid var(--teal-deep);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 24px 0;
}

.soutenir-notice p {
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.6;
}

.soutenir-notice a {
  color: var(--teal-deep);
  font-weight: 600;
}

/* Variante sombre : réutilisée telle quelle dans #contact (fond navy). */
#contact .soutenir-notice {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--teal-light);
}

#contact .soutenir-notice p {
  color: rgba(255, 255, 255, 0.75);
}

#contact .soutenir-notice a {
  color: var(--teal-light);
}

.benevolat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.benevolat-group {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  border-left: 4px solid var(--teal);
}

.benevolat-group h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}

.benevolat-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benevolat-group li {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.benevolat-group li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

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

/* ===================== AXE — BULLE TORPPY "EN SAVOIR PLUS" ===================== */
.axis-intro-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.axis-intro-row .axis-intro {
  margin-bottom: 0;
}

.axis-torppy {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.axis-torppy-bubble {
  position: relative;
  white-space: nowrap;
  padding: 10px 18px;
  margin-bottom: 16px;
  transform: rotate(-3deg);
}

.axis-torppy-bubble:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.axis-torppy-bubble:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: 3px;
}

.axis-torppy-bubble::before,
.axis-torppy-bubble::after {
  content: '';
  position: absolute;
  left: 28px;
  border: 8px solid transparent;
  border-bottom: 0;
}

.axis-torppy-bubble::before {
  bottom: -9px;
  border-top-color: var(--navy);
}

.axis-torppy-bubble::after {
  bottom: -6.5px;
  left: 30px;
  border-width: 6px;
  border-top-color: white;
}

.axis-torppy-img {
  width: 120px;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(11, 45, 77, 0.35));
}

@media (max-width: 640px) {
  .axis-intro-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ===================== POPUP IMAGE GÉNÉRIQUE ===================== */
.img-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.img-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.img-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 45, 77, 0.75);
  cursor: pointer;
}

.img-modal-dialog {
  position: relative;
  max-width: min(720px, 92vw);
  max-height: 88vh;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

.img-modal-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
}

.img-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: white;
  color: var(--navy);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: background 0.2s;
}

.img-modal-close:hover,
.img-modal-close:focus-visible {
  background: var(--teal-pale);
}

body.modal-open {
  overflow: hidden;
}

.pdf-modal-dialog {
  position: relative;
  width: min(820px, 92vw);
  height: 88vh;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pdf-modal-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

.pdf-modal-fallback {
  flex-shrink: 0;
  padding: 12px 20px;
  background: var(--teal-pale);
  border-top: 1px solid rgba(11, 45, 77, 0.08);
  text-align: center;
  font-size: 0.85rem;
  color: var(--slate);
}

.pdf-modal-fallback a {
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: underline;
}
/* ===================== PAGE LÉGALE (mentions légales / confidentialité) ===================== */
.legal-page h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 8px;
}

.legal-page section+section {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(11, 45, 77, 0.1);
}

.legal-page h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  margin-top: 40px;
  margin-bottom: 4px;
}

.legal-page p,
.legal-page li {
  color: var(--slate);
  font-size: 0.98rem;
  line-height: 1.6;
}

.legal-page strong {
  color: var(--text-dark);
}

.legal-page ul {
  list-style: disc;
  padding-left: 1.3em;
}

.legal-page li+li {
  margin-top: 6px;
}

.legal-page .legal-updated {
  font-size: 0.85rem;
  color: var(--teal-deep);
  font-weight: 600;
}

.legal-page .table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(11, 45, 77, 0.12);
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}

.legal-page th,
.legal-page td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11, 45, 77, 0.1);
  vertical-align: top;
}

.legal-page thead th {
  background: var(--teal-pale);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
}

.legal-page tbody tr:last-child td {
  border-bottom: none;
}

/* ===================== FAÇADE VIDÉO YOUTUBE (RGPD) ===================== */
/* La vidéo n'est pas chargée tant que le visiteur n'a pas cliqué : voir
   fr/mentions-legales/ point 6, et script.js en fin de fichier. */

.video-facade-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #0B2D4D;
  cursor: pointer;
  display: block;
  font: inherit;
  color: inherit;
}

.video-facade-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(11, 45, 77, .35);
  transition: transform .2s ease;
}

.video-facade-btn:hover .video-facade-play,
.video-facade-btn:focus-visible .video-facade-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-facade-play svg {
  width: 26px;
  height: 26px;
  fill: var(--white);
  margin-left: 3px;
}

.video-facade-notice {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 12px 10px;
  font-size: .72rem;
  line-height: 1.35;
  text-align: left;
  color: var(--white);
  background: linear-gradient(to top, rgba(11, 45, 77, .88), rgba(11, 45, 77, 0));
}

.video-facade-btn:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .video-facade-play {
    transition: none;
  }
}

@media (max-width: 700px) {
  .video-facade-play {
    width: 52px;
    height: 52px;
  }

  .video-facade-notice {
    font-size: .68rem;
  }
}