/* RAS LE VOL — maquette V7 « éditorial net ».
   Reprend le langage des extensions maison (pop-up communiqué, questionnaire) : panneaux noirs à
   angles droits, neutres chauds, une seule pilule rouge par écran, voyant rouge, entrées en
   courbe expo. Emprunts nommés : ligne « en direct » et titres bicolores (Stripe, Linear),
   chiffres posés sur photo (DoorDash), mot surligné en rouge (Croix-Rouge), FAQ (Netflix),
   tuiles produit (Apple). Un seul thème clair ; couleurs fixées. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F3F0EC;
  --white: #FFFFFF;
  --ink: #0C0C0C;
  --ink-2: #5F5A55;
  --ink-3: #8A847E;
  --rule: #E2DDD7;
  --rule-2: #CFC9C2;
  --red: #EC0000;
  --red-ink: #C20000;
  --red-hover: #C20000;
  --on-red: #FFFFFF;
  --night: #0C0C0C;
  --night-2: #1C1A18;
  --night-fg: #F6F4F1;
  --night-mute: #B0A9A4;
  --night-rule: #3A3633;
  --focus: #C20000;
  --proto-bg: #E9E6E2;
  --proto-fg: #3A3536;
  --proto-line: #C9C2C3;

  --f: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --f-num: "Rubik", "Arial Rounded MT Bold", "Plus Jakarta Sans", sans-serif;

  /* Échelle 1,25 sur un corps de 17 px, prolongée pour l'affichage */
  --t-xs: 0.8125rem;
  --t-s: 0.875rem;
  --t-m: 1.0625rem;
  --t-l: 1.328rem;
  --t-xl: 1.66rem;
  --t-2xl: 2.075rem;
  --t-3xl: 2.594rem;
  --t-4xl: 3.242rem;
  --t-5xl: 4.053rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: max(16px, 4vw);
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: var(--t-m); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.025em; font-weight: 700; }
h1:focus { outline: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
sup { font-size: 0.6em; line-height: 0; }
.icon { width: 1.125rem; height: 1.125rem; fill: currentColor; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.num { font-family: var(--f-num); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.005em; }

/* ——— Barre du prérendu (hors design du site) ——— */
.proto { background: var(--proto-bg); color: var(--proto-fg); border-bottom: 1px dashed var(--proto-line); font-size: var(--t-xs); }
.proto .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-block: 0.375rem; }
.proto strong { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.proto-pages { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.proto a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.625rem; border: 1px solid var(--proto-line); text-decoration: none; font-weight: 600; }
.proto a[aria-current="page"] { background: var(--proto-fg); color: var(--proto-bg); border-color: var(--proto-fg); }

/* ——— Boutons et liens ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-weight: 700; font-size: var(--t-m); text-decoration: none; letter-spacing: -0.005em; transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms var(--ease-out); }
.btn-red { background: var(--red); color: var(--on-red); }
.btn-red:hover { background: var(--red-hover); }
.btn-red:active { transform: scale(0.98); }
.btn-lg { min-height: 56px; padding: 0 2rem; }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #2A2725; }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--night-fg); }
.link, .more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--ink); }
.link::after, .more::after { content: "→"; color: var(--red-ink); transition: transform 200ms var(--ease-out); }
.link:hover::after, .more:hover::after { transform: translateX(4px); }
.link:hover, .more:hover { color: var(--red-ink); }
.reassure { font-size: 1rem; color: var(--ink-2); }
.eyebrow { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
mark { background: var(--red); color: var(--on-red); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Voyant « en direct » (repris de la pop-up communiqué) */
.live { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 36px; padding: 0 0.875rem 0 0.75rem; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--white); font-size: var(--t-s); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.live b { color: var(--ink); font-family: var(--f-num); font-weight: 800; }
.live:hover { border-color: var(--ink); }
a.live { min-height: 44px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgb(236 0 0 / 0.18); animation: voyant 1.6s ease-in-out 600ms 3; flex: none; }
@keyframes voyant { 50% { box-shadow: 0 0 0 7px rgb(236 0 0 / 0.06); } }
/* Bandeau « en direct » de l'accueil : panneau noir à angles droits, voyant rouge, chiffre en blanc
   qui défile de 0 à la valeur à l'ouverture (comme les compteurs du site actuel) */
.flash { display: inline-flex; align-items: stretch; min-height: 44px; background: var(--night); color: var(--night-fg); font-size: var(--t-s); font-weight: 600; text-decoration: none; }
.flash > span { display: inline-flex; align-items: center; }
.flash-label { gap: 0.625rem; padding: 0 1rem 0 0.875rem; }
.flash-num { gap: 0.375rem; padding: 0 1rem; border-left: 1px solid var(--night-rule); color: var(--night-mute); }
.flash-num b { font-family: var(--f-num); font-weight: 800; color: var(--white); letter-spacing: 0.01em; }
.flash-num::after { content: "→"; margin-left: 0.25rem; color: var(--red); transition: transform 200ms var(--ease-out); }
.flash:hover .flash-num::after { transform: translateX(3px); }
.flash:hover .flash-num { color: var(--night-fg); }
/* Chiffre animé : la valeur finale, invisible, réserve la largeur pour que rien ne bouge pendant le comptage */
.count { display: inline-grid; font-variant-numeric: tabular-nums; }
.count > span { grid-area: 1 / 1; text-align: right; }
.count-ghost { visibility: hidden; }

/* Titres bicolores : la phrase forte en encre, la suite en gris chaud */
.duo { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.duo .mute { color: var(--ink-3); }

/* ——— Logos des réseaux ——— */
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2); color: var(--ink); transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out; }
.socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ——— En-tête ——— */
.site-head { background: var(--paper); border-bottom: 1px solid var(--rule); position: relative; z-index: 2; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.625rem; }
.brand { display: inline-flex; align-items: center; gap: clamp(0.625rem, 1.4vw, 1.125rem); text-decoration: none; min-height: 44px; }
/* Logo à la taille du site actuel (92 px sur ordinateur), réduit sur mobile */
.brand img { width: clamp(64px, 7.2vw, 92px); height: auto; }
.brand-name { font-size: clamp(var(--t-l), 1rem + 0.8vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
/* Bouton « volet » : trois traits qui deviennent une croix à l'ouverture (affiché sous 900 px, avec JavaScript : voir plus bas) */
.menu-btn { display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--ink); border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-btn-bars i { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out); }
.menu-btn-bars i:nth-child(1) { top: 14px; }
.menu-btn-bars i:nth-child(2) { top: 21px; }
.menu-btn-bars i:nth-child(3) { top: 28px; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.875rem; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--ink-2); transition: color 160ms ease-out; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.nav .nav-cta a { background: var(--red); color: var(--on-red); border-radius: 999px; padding-inline: 1.25rem; margin-left: 0.5rem; box-shadow: none; }
.nav .nav-cta a:hover { background: var(--red-hover); }
/* Menu sur ordinateur : un trait se trace sous le lien survolé, de gauche à droite en 250 ms. Il part de l'endroit où la page
   courante a son trait fixe (ci-dessus) : rien ne change au repos. */
.nav .nav-socials { display: none; }
@media (min-width: 901px) {
  .nav a { position: relative; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 250ms var(--ease-out); pointer-events: none; }
  .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
  .nav .nav-cta a::after { display: none; }
}
/* Sous 900 px. Sans JavaScript (pas de classe rlv-js sur <html>, posée dans <head>) : la liste reste visible sous le logo, sans
   bouton. Avec JavaScript : un volet noir plein écran, à angles droits, qui se dévoile du haut vers le bas en 400 ms ; les liens
   montent de 16 px en cascade (40 ms d'écart). La sortie est l'inverse, en 250 ms, puis le volet est vraiment masqué (visibility).
   Le panneau est dans l'en-tête, sous le logo et la croix, qui restent visibles au-dessus. Mouvement réduit : tout est instantané. */
@media (max-width: 900px) {
  .head-row { flex-wrap: wrap; }
  .nav { flex-basis: 100%; }
  .nav ul { flex-direction: column; align-items: stretch; padding-block: 0.5rem 1rem; }
  .nav a { font-size: var(--t-l); color: var(--ink); border-bottom: 1px solid var(--rule); padding-inline: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); padding-left: 0.75rem; }
  .nav .nav-cta a { margin: 0.75rem 0 0; justify-content: center; border: 0; }
  .rlv-js .menu-btn { display: block; }
  .rlv-js .head-row { flex-wrap: nowrap; }
  .rlv-js .nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--tete, 5.5rem) + 1rem) max(var(--gutter), env(safe-area-inset-left, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: var(--night); color: var(--night-fg); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 250ms var(--ease-out), visibility 0s linear 250ms; }
  .rlv-js .nav[data-open="true"] { visibility: visible; clip-path: inset(0); transition: clip-path 400ms var(--ease-out), visibility 0s; }
  .rlv-js .nav ul:not(.nav-socials) { padding: 0; border-top: 1px solid var(--night-rule); }
  .rlv-js .nav ul:not(.nav-socials) a { display: flex; min-height: 4.5rem; font-size: clamp(1.75rem, 7.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--night-fg); border-bottom: 1px solid var(--night-rule); }
  .rlv-js .nav ul:not(.nav-socials) .nav-cta a { display: inline-flex; min-height: 3.5rem; margin: 1.5rem 0 1rem; padding-inline: 1.75rem; justify-content: center; font-size: var(--t-l); letter-spacing: -0.015em; color: var(--on-red); background: var(--red); border: 0; border-radius: 999px; box-shadow: none; }
  .rlv-js .nav ul:not(.nav-socials) .nav-cta a:hover { background: var(--red-hover); }
  .rlv-js .nav .nav-socials { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding: 2rem 0 0; }
  .rlv-js .nav .nav-socials a { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; border: 1px solid var(--night-rule); border-radius: 50%; color: var(--night-fg); }
  .rlv-js .nav .nav-socials a:hover { background: var(--night-fg); border-color: var(--night-fg); color: var(--night); }
  .rlv-js .nav ul:not(.nav-socials) > li, .rlv-js .nav .nav-socials { opacity: 0; transform: translateY(16px); transition: opacity 150ms ease-out, transform 150ms ease-out; }
  .rlv-js .nav[data-open="true"] ul:not(.nav-socials) > li, .rlv-js .nav[data-open="true"] .nav-socials { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out) calc(100ms + var(--i, 0) * 40ms), transform 400ms var(--ease-out) calc(100ms + var(--i, 0) * 40ms); }
  .rlv-js .nav ul:not(.nav-socials) > li:nth-child(2) { --i: 1; }
  .rlv-js .nav ul:not(.nav-socials) > li:nth-child(3) { --i: 2; }
  .rlv-js .nav ul:not(.nav-socials) > li:nth-child(4) { --i: 3; }
  .rlv-js .nav ul:not(.nav-socials) > li:nth-child(5) { --i: 4; }
  .rlv-js .nav .nav-socials { --i: 5; }
  .menu-actif, .menu-actif body { overflow: hidden; }
  .menu-actif .menu-btn, .menu-actif .brand-name { color: var(--night-fg); }
  .menu-actif .menu-btn:focus-visible, .menu-actif .brand:focus-visible, .rlv-js .nav :focus-visible { outline-color: var(--night-fg); }
}

/* ——— Accueil : ouverture ——— */
.h-hero { padding-block: 4.5rem 5rem; }
.h-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.h-text { display: grid; gap: 1.75rem; justify-items: start; min-width: 0; }
.h-text h1 { font-size: clamp(var(--t-3xl), 1.2rem + 4vw, 4.75rem); }
.h-lead { font-size: clamp(var(--t-l), 1rem + 0.9vw, var(--t-xl)); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); max-width: 34ch; }
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.h-photo { position: relative; min-width: 0; }
.h-photo > img:first-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 30%; }
.h-sticker { position: absolute; width: clamp(96px, 11vw, 148px); left: -2.5rem; bottom: 2.5rem; transform: rotate(-8deg); filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.28)); }

/* Entrée orchestrée de l'ouverture (une seule par page) */
@media (prefers-reduced-motion: no-preference) {
  .h-text > *, .h-photo, .p-head > * { animation: monte 700ms var(--ease-out) both; }
  .h-text > :nth-child(2), .p-head > :nth-child(2) { animation-delay: 60ms; }
  .h-text > :nth-child(3), .p-head > :nth-child(3) { animation-delay: 120ms; }
  .h-text > :nth-child(4), .p-head > :nth-child(4) { animation-delay: 180ms; }
  .h-text > :nth-child(5) { animation-delay: 240ms; }
  .h-photo { animation-delay: 140ms; }
  @keyframes monte { from { opacity: 0; transform: translateY(14px); } }
}

/* Bandeau médias (rangée de « logos » à la Stripe/Linear) */
.logos { border-block: 1px solid var(--rule); }
.page-hero.plain + .logos { border-top: 0; }
.logos .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 3rem; align-items: center; padding-block: 1.75rem; }
.logos p { font-size: var(--t-s); color: var(--ink-2); font-weight: 600; max-width: 10rem; line-height: 1.35; }
.logos ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; }
.logos li { font-weight: 800; font-size: var(--t-l); letter-spacing: -0.03em; color: var(--ink-3); white-space: nowrap; }
.logos a { text-decoration: none; }
/* Logos des médias en défilement continu : deux pistes identiques, la seconde masquée aux lecteurs d'écran */
.marquee { display: flex; overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logos .marquee-track { flex: none; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 3.5rem; padding-right: 3.5rem; animation: defile 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img { max-width: none; }
@keyframes defile { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .logos .marquee-track { flex: 1 1 auto; flex-wrap: wrap; gap: 1.25rem 2.5rem; padding-right: 0; }
  .marquee-track[aria-hidden] { display: none; }
}

/* Preuves chiffrées sur photo (à la DoorDash) */
.proofs { padding-block: 5.5rem 1rem; }
.proofs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding-bottom: 2.5rem; }
.proofs-head h2 { max-width: 22ch; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.proof { position: relative; aspect-ratio: 4 / 5; background: var(--night); color: var(--night-fg); display: flex; align-items: flex-end; overflow: hidden; }
.proof > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proof::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.82) 100%); }
.proof figcaption { position: relative; z-index: 2; display: grid; gap: 0.5rem; padding: 1.75rem; }
.proof .num { font-size: clamp(var(--t-3xl), 1.5rem + 3vw, var(--t-5xl)); line-height: 0.95; color: var(--white); }
.proof span { font-size: var(--t-m); font-weight: 600; line-height: 1.35; max-width: 18rem; }
.proof-note { padding-top: 1.25rem; font-size: var(--t-s); color: var(--ink-2); }

/* Manifeste (paragraphe bicolore à la Linear) */
.manifesto { padding-block: 6rem; }
.manifesto .duo, .verbs-title {font-size: clamp(var(--t-xl), 1rem + 2.2vw, var(--t-3xl)); line-height: 1.18; max-width: 22em; }
.objectives { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 3.5rem; }
.objectives li { border-top: 1px solid var(--ink); padding-top: 1.25rem; font-weight: 600; font-size: var(--t-m); line-height: 1.45; }
.manifesto-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 2.5rem; }
.manifesto-foot p { color: var(--ink-2); max-width: 40rem; font-size: var(--t-s); }
/* « Que faisons-nous concrètement ? » : trois verbes sous filet, point rouge */
.verbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 3.5rem; }
.verbs article { display: grid; align-content: start; gap: 0.875rem; border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.verbs h3 { font-size: clamp(var(--t-xl), 1rem + 1.3vw, var(--t-2xl)); letter-spacing: -0.03em; line-height: 1.05; }
.verbs h3 span { color: var(--red); }
.verbs p { color: var(--ink-2); font-size: var(--t-m); line-height: 1.55; max-width: 34ch; }

/* Blocs repris de l'accueil A (Apple, Linear) : déclaration centrée, quatre tuiles d'action, actualités en rail */
.va-statement { padding-block: 8rem 6rem; text-align: center; }
.va-statement h2 { font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); letter-spacing: -0.04em; line-height: 1.06; max-width: 17em; margin-inline: auto; }
.va-statement .objectives { text-align: left; }
.va-statement .link { margin-top: 2.5rem; }
.va-tiles { padding-block: 5.5rem 1rem; }
.va-tiles .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.va-tiles .va-title { grid-column: 1 / -1; padding-bottom: 1.5rem; }
.ptile-note { flex-basis: 100%; font-size: var(--t-s); color: var(--ink-2); }
.vt.dark .ptile-note { color: var(--night-mute); }
.vt { display: grid; grid-template-rows: auto auto auto auto 1fr; justify-items: center; text-align: center; gap: 1rem; padding: 3.5rem 2rem 0; min-height: 38rem; overflow: hidden; }
.vt.dark { background: var(--night); color: var(--night-fg); }
.vt.light { background: var(--white); border: 1px solid var(--rule); }
.vt.warm { background: var(--paper-2); }
.vt h3 { font-size: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.04; max-width: 13em; }
.vt p { color: var(--ink-2); max-width: 24rem; }
.vt.dark p, .vt.dark .eyebrow { color: var(--night-mute); }
.vt.dark .link { color: var(--night-fg); }
.vt .photo { align-self: end; width: calc(100% + 4rem); max-width: none; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 1rem; }
.vt .sticker-big { align-self: end; width: min(70%, 17rem); transform: translateY(14%) rotate(-7deg); filter: drop-shadow(0 22px 32px rgb(0 0 0 / 0.35)); }
.vt .num-big { font-family: var(--f-num); font-weight: 800; font-size: clamp(3.5rem, 2rem + 4vw, 6rem); line-height: 1; align-self: end; padding-bottom: 3rem; color: var(--red); }
.va-news { padding-block: 6rem; border-top: 1px solid var(--rule); }
/* Rail horizontal (défilement dans son conteneur, jamais dans la page) : au doigt il glisse et s'accroche carte par carte,
   sur ordinateur deux flèches font défiler d'une carte (site.js). Cartes de 300 px au plus : photos de liste plafonnées (garde G10). */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 18.75rem; gap: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 1.25rem; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.rail > * { scroll-snap-align: start; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 2rem; }
.related .rail-head h2 { padding-bottom: 0; }
.rail-tools { display: flex; align-items: center; gap: 0.5rem 1.5rem; }
.rail-ctrl { display: none; gap: 0.5rem; }
.rail-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out; }
.rail-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.rail-btn:disabled { opacity: 0.3; cursor: default; }
.rail-ico { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 641px) { .rail-ctrl { display: inline-flex; } }
/* Mobile : cartes un peu plus étroites que l'écran et rail qui va jusqu'au bord, pour que la carte suivante dépasse et invite à glisser */
@media (max-width: 640px) {
  .rail { grid-auto-columns: 72%; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
}

/* Accueil : bloc « association », piste « Le sceau » (Alexis, 12/11/2026), v27 (13/11/2026) :
   le logo rond au centre (comme en v23-v24), les trois objectifs reliés à lui par un filet terminé d'un point rouge,
   puis un bouton noir */
.sceau { padding-block: 6rem 2rem; }
.sceau-wrap { display: grid; justify-items: center; gap: 1.75rem; text-align: center; }
.sceau-titre { font-size: clamp(var(--t-xl), 1rem + 2.2vw, var(--t-3xl)); line-height: 1.1; max-width: 21em; }
.sceau-sous { font-size: clamp(var(--t-m), 0.95rem + 0.5vw, var(--t-l)); line-height: 1.45; font-weight: 500; color: var(--ink-2); max-width: 40rem; margin-top: -0.5rem; }
.sceau-wrap > .btn { margin-top: 1.25rem; }
.sceau-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 23vw, 300px) minmax(0, 1fr); grid-template-areas: "g c d" ". b ."; align-items: center; margin-top: 0.5rem; }
.sceau-img { grid-area: c; justify-self: center; width: clamp(180px, 19vw, 250px); transform: rotate(-8deg); filter: drop-shadow(0 22px 30px rgb(0 0 0 / 0.28)); }
.sceau-list { display: contents; }
.sceau-list li { display: flex; align-items: center; gap: 1.25rem; font-size: clamp(var(--t-l), 1rem + 0.45vw, 1.3125rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.sceau-list li::before { content: ""; flex: none; width: 4.5rem; height: 9px; background: radial-gradient(circle, var(--red) 4px, transparent 4.5px) right center / 9px 9px no-repeat, linear-gradient(var(--ink), var(--ink)) left center / calc(100% - 9px) 1px no-repeat; }
.sceau-list .sceau-g { grid-area: g; justify-content: flex-end; text-align: right; }
.sceau-list .sceau-g::before { order: 2; }
.sceau-list .sceau-d { grid-area: d; text-align: left; }
.sceau-list .sceau-d::before { transform: scaleX(-1); }
.sceau-list .sceau-b { grid-area: b; flex-direction: column; justify-self: center; max-width: 26rem; gap: 0.875rem; text-align: center; }
.sceau-list .sceau-b::before { width: 9px; height: 3rem; background: radial-gradient(circle, var(--red) 4px, transparent 4.5px) center top / 9px 9px no-repeat, linear-gradient(var(--ink), var(--ink)) center 9px / 1px calc(100% - 9px) no-repeat; }
.arg-n { font-family: var(--f-num); font-weight: 800; font-size: var(--t-l); font-variant-numeric: tabular-nums; }

/* Pétition : présentation du président, en panneau noir */
.president { display: grid; background: var(--night); color: var(--night-fg); }
.president img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 18% 62%; }
.president-body { display: grid; gap: 0.875rem; justify-items: start; padding: clamp(1.75rem, 3vw, 2.5rem); }
.president-role { font-size: var(--t-s); font-weight: 600; color: var(--night-mute); }
.president h3 { font-size: clamp(var(--t-l), 1rem + 0.8vw, var(--t-xl)); letter-spacing: -0.025em; line-height: 1.15; }
.president-body > p:not(.president-role) { color: var(--night-mute); }
.president .btn { margin-top: 0.5rem; }
.president :focus-visible, .arguments :focus-visible, .don-cta :focus-visible { outline-color: var(--white); }

/* Pétition : les trois raisons sur panneau noir, la citation reste à gauche pendant la lecture */
.arguments { background: var(--night); color: var(--night-fg); padding-block: 6rem; }
.arg-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: start; }
/* La citation reste au milieu de l'écran pendant la lecture des arguments (hauteur mesurée par site.js) */
.arg-quote { position: sticky; top: calc(50vh - var(--qh, 14rem) / 2); align-self: start; }
.arg-quote .quote-by { margin-top: 1.25rem; font-size: var(--t-s); font-weight: 600; color: var(--night-mute); }
.arg-quote p { font-size: clamp(var(--t-xl), 1rem + 1.2vw, var(--t-2xl));font-weight: 700; letter-spacing: -0.03em; line-height: 1.14; color: var(--white); }
.arg-list { border-top: 1px solid var(--night-rule); }
.arg-list > li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; padding-block: 2rem; border-bottom: 1px solid var(--night-rule); }
.arg-n { color: var(--red); line-height: 1.3; }
.arg-list h3 { font-size: var(--t-xl); letter-spacing: -0.025em; line-height: 1.15; color: var(--white); }
.arg-list p { color: var(--night-mute); margin-top: 0.75rem; }
.arg-list ul { display: grid; gap: 0.5rem; margin-top: 1rem; }
.arg-list ul li { position: relative; padding-left: 1.25rem; color: var(--night-fg); }
.arg-list ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.625rem; height: 2px; background: var(--red); }

/* Rejoindre : « Qui peut adhérer ? » en liste typographique, une ligne sur deux en gris */
.qui { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem 5rem; align-items: start; }
.qui-head { display: grid; gap: 1rem; }
.qui-head p { color: var(--ink-2); font-size: var(--t-l); line-height: 1.5; }
.qui-list li { font-size: clamp(var(--t-xl), 1rem + 2.2vw, var(--t-3xl)); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; padding-block: 0.35rem; }
.qui-list li:nth-child(even) { color: var(--ink-3); }
/* Rejoindre : « Pourquoi adhérer ? » sous le héros, mêmes proportions que « Qui peut adhérer ? » */
.checks.big { gap: 1.25rem; }
.checks.big li { grid-template-columns: 1.75rem minmax(0, 1fr); font-size: clamp(var(--t-l), 1rem + 0.9vw, var(--t-xl)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.checks.big li::before { width: 1.375rem; height: 1.375rem; transform: translateY(0.1rem); }
.qui-foot { margin-top: 2.5rem; font-weight: 700; font-size: var(--t-l); letter-spacing: -0.02em; }

/* Fonds d'aide : ce que finance un don, en mosaïque d'images (2 grandes, 3 moyennes, l'appel en bande noire) */
.dons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem 1.5rem; }
.don { grid-column: span 2; display: grid; gap: 0.875rem; align-content: start; }
.don-large { grid-column: span 3; }
.don img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.375rem; }
.don-large img { aspect-ratio: 16 / 9; }
.don img.contain { object-fit: contain; background: var(--night); }
.don h3 { font-size: var(--t-xl); letter-spacing: -0.025em; line-height: 1.15; }
.don p { color: var(--ink-2); }
.don-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; background: var(--night); color: var(--night-fg); padding: clamp(2rem, 4vw, 3.5rem); }
.don-cta h3 { font-size: clamp(var(--t-xl), 1rem + 1.6vw, var(--t-3xl)); letter-spacing: -0.03em; line-height: 1.1; max-width: 22ch; }

/* Contact : témoignages sous filet, initiales à la place des photos */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.avis figure { display: grid; gap: 1.75rem; align-content: space-between; border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.avis blockquote p { font-size: var(--t-l); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.avis blockquote p::before { content: "«"; display: block; font-family: var(--f-num); font-size: 2.75rem; line-height: 0.8; color: var(--red-ink); margin-bottom: 0.5rem; }
.avis figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.875rem; align-items: center; }
.avis .initiales { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night); color: var(--white); font-weight: 700; font-size: var(--t-s); }
.avis figcaption b { font-weight: 700; }
.avis figcaption span:last-child { color: var(--ink-2); font-size: var(--t-s); }
.avis blockquote, .arg-quote { margin: 0; }
.avis + .note-maquette { margin-top: 2.5rem; }
.petition.petition-top { padding-top: 6rem; }

/* Panneau noir (repris de la pop-up) */
.panel-section { padding-block: 1rem 6rem; }
.panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--night); color: var(--night-fg); }
.panel-text { display: grid; gap: 1.5rem; align-content: center; justify-items: start; padding: clamp(2rem, 5vw, 4.5rem); }
.panel-text h2 { font-size: clamp(var(--t-2xl), 1rem + 3vw, var(--t-4xl)); line-height: 1.06; letter-spacing: -0.03em; }
.panel-text > p { color: var(--night-mute); font-size: var(--t-m); max-width: 36rem; }
.panel .live { background: transparent; border-color: var(--night-rule); color: var(--night-mute); }
.panel .live b { color: var(--night-fg); }
.panel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; min-height: 22rem; }
.panel .sig { color: var(--night-mute); font-size: var(--t-s); }
.panel .sig b { color: var(--night-fg); font-size: var(--t-xl); margin-right: 0.25rem; }
.panel :focus-visible { outline-color: var(--white); }

/* Actualités : une grande, une colonne de brèves */
.news { padding-block: 6rem; border-top: 1px solid var(--rule); }
.news-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-bottom: 2.5rem; }
.news-head h2, .section-title { font-size: clamp(var(--t-xl), 1rem + 2vw, var(--t-3xl)); letter-spacing: -0.03em; line-height: 1.1; }
.news-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; }
.news-lead { position: relative; display: grid; gap: 1rem; }
.news-lead img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }
.news-lead h3 { font-size: clamp(var(--t-l), 1rem + 1.2vw, var(--t-2xl)); line-height: 1.15; letter-spacing: -0.025em; }
.news-lead p.excerpt { color: var(--ink-2); max-width: 40rem; }
.news-lead a, .news-item a { text-decoration: none; }
.news-lead a::after, .news-item a::after { content: ""; position: absolute; inset: 0; }
.news-lead:hover h3, .news-item:hover h3 { color: var(--red-ink); }
.meta { font-size: var(--t-s); color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.news-list { display: grid; border-top: 1px solid var(--ink); }
.news-item { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.news-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.news-item h3 { font-size: var(--t-m); line-height: 1.35; letter-spacing: -0.01em; padding-top: 0.25rem; }

/* « Je veux agir » (liste d'intentions à la Croix-Rouge) */
.intents { padding-block: 6rem; background: var(--paper-2); }
.intents-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
.intents h2 { font-size: clamp(var(--t-2xl), 1rem + 3vw, var(--t-4xl)); letter-spacing: -0.03em; line-height: 1.05; }
.intent-list { border-top: 1px solid var(--ink); }
.intent-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 72px; padding-block: 1rem; border-bottom: 1px solid var(--rule-2); text-decoration: none; font-size: clamp(var(--t-l), 1rem + 1vw, var(--t-xl)); font-weight: 700; letter-spacing: -0.02em; transition: color 160ms ease-out, padding 240ms var(--ease-out); }
.intent-list a::after { content: "→"; color: var(--red); font-weight: 700; transition: transform 240ms var(--ease-out); }
.intent-list a:hover { color: var(--red-ink); padding-left: 0.5rem; }
.intent-list a:hover::after { transform: translateX(6px); }
.intent-list small { display: block; font-size: var(--t-s); font-weight: 500; color: var(--ink-2); letter-spacing: 0; padding-top: 0.25rem; }

/* Questions fréquentes (accordéon à la Netflix, natif) */
.faq { padding-block: 6rem; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
.faq-grid > div > p { color: var(--ink-2); padding-top: 1rem; max-width: 20rem; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--rule-2); }
.faq-list summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 1rem; align-items: center; min-height: 72px; padding-block: 1rem; cursor: pointer; list-style: none; font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule-2); background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat; transition: transform 240ms var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); background-color: var(--paper-2); }
.faq-list details p { color: var(--ink-2); max-width: 44rem; padding-bottom: 1.5rem; }

/* Tuiles produit (à la Apple) */
.duo-tiles { padding-block: 0 6rem; }
.duo-tiles .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ptile { display: grid; gap: 1.25rem; align-content: start; justify-items: center; text-align: center; padding: clamp(2rem, 4vw, 3.5rem) 2rem 0; overflow: hidden; min-height: 32rem; }
.ptile.dark { background: var(--night); color: var(--night-fg); }
.ptile.light { background: var(--white); border: 1px solid var(--rule); }
.ptile h2 { font-size: clamp(var(--t-xl), 1rem + 1.8vw, var(--t-3xl)); letter-spacing: -0.03em; line-height: 1.08; }
.ptile p { color: var(--ink-2); max-width: 26rem; }
.ptile.dark p { color: var(--night-mute); }
.ptile-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.5rem; }
.ptile.dark .link { color: var(--night-fg); }
.ptile-img { width: min(80%, 18rem); margin-top: auto; transform: translateY(12%) rotate(-6deg); filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.5)); }
.ptile-people { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: auto; }

/* ——— Pied de page ——— */
.site-foot { background: var(--night); color: var(--night-fg); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding-block: 4rem 3rem; }
.foot-brand { display: grid; gap: 1.25rem; justify-items: start; max-width: 24rem; }
.brand-row { display: flex; align-items: center; gap: 0.75rem; }
.foot-brand img { width: 52px; height: 52px; }
.foot-name { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; }
.foot-desc { color: var(--night-mute); font-size: 0.95rem; }
.site-foot .socials a { color: var(--night-fg); border-color: var(--night-rule); }
.site-foot .socials a:hover { background: var(--night-fg); color: var(--night); border-color: var(--night-fg); }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-content: start; }
.foot-nav h2 { font-size: var(--t-s); font-weight: 600; letter-spacing: 0; color: var(--night-mute); padding-bottom: 0.75rem; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-weight: 500; }
.foot-nav a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.3em; }
.foot-word { font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; font-size: clamp(4rem, 15vw, 13.5rem); color: var(--night-2); padding-top: 1rem; overflow: hidden; white-space: nowrap; user-select: none; }
.foot-bottom { border-top: 1px solid var(--night-rule); padding-block: 1.25rem; font-size: var(--t-s); color: var(--night-mute); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.site-foot :focus-visible { outline-color: var(--white); }

/* ——— Pages intérieures : en-tête de page ——— */
.page-hero { padding-top: 4.5rem; }
.page-hero .wrap { display: grid; gap: 1.5rem; justify-items: start; }
.page-hero .eyebrow { color: var(--ink-2); }
.page-hero h1 { font-size: clamp(var(--t-3xl), 1.2rem + 3.6vw, var(--t-5xl)); letter-spacing: -0.035em; line-height: 1.02; max-width: 16em; }
.page-hero .lead { font-size: clamp(var(--t-m), 0.9rem + 0.6vw, var(--t-l)); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }
.page-hero .reassure { color: var(--ink-2); }
.page-hero::after { content: ""; display: block; height: clamp(14rem, 34vw, 30rem); margin-top: 4rem; background: var(--night) var(--bg) var(--pos, center 35%) / cover no-repeat; }
.page-hero.plain { padding-bottom: 4rem; border-bottom: 1px solid var(--rule); }
.page-hero.plain::after { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; padding-top: 0.25rem; }
.sig { font-size: var(--t-s); color: var(--ink-2); }
.sig strong, .sig b { font-family: var(--f-num); font-weight: 800; color: var(--ink); font-size: var(--t-xl); margin-right: 0.25rem; font-variant-numeric: tabular-nums; }

/* Sections */
.section { padding-block: 6rem; }
.section.alt { background: var(--paper-2); }
.section-head { display: grid; gap: 1rem; justify-items: start; padding-bottom: 3rem; max-width: 46rem; }
.section-head > p:not(.eyebrow) { color: var(--ink-2); font-size: var(--t-l); line-height: 1.5; }
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; align-items: center; }
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.split figure img { width: 100%; }
.split figcaption { font-size: var(--t-s); color: var(--ink-2); padding-top: 0.75rem; }
.text-stack { display: grid; gap: 1.25rem; justify-items: start; align-content: start; min-width: 0; }
.text-stack > p { color: var(--ink-2); }
.text-stack h2 { font-size: clamp(var(--t-xl), 1rem + 1.8vw, var(--t-3xl)); letter-spacing: -0.03em; line-height: 1.1; }
.pull { font-size: clamp(var(--t-xl), 1rem + 2.4vw, var(--t-4xl)); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; color: var(--ink) !important; }
.pull em { font-style: normal; background: var(--red); color: var(--on-red); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.strong-line { font-weight: 700; font-size: var(--t-l); color: var(--ink) !important; letter-spacing: -0.02em; }

/* Tuiles : colonnes séparées par un filet, sans cadre */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.tile { display: grid; gap: 0.875rem; align-content: start; border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.tile h3 { font-size: var(--t-l); line-height: 1.25; letter-spacing: -0.02em; }
.tile p, .tile li { color: var(--ink-2); }
.tile ul { display: grid; gap: 0.5rem; padding-top: 0.25rem; }
.tile li { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.tile li::before { content: "—"; color: var(--red-ink); }
.tile-cta { background: var(--night); color: var(--night-fg); border-top: 0; padding: 2rem; justify-items: start; }
.tile-cta h3 { color: var(--night-fg); }
.section-foot { padding-top: 2.5rem; font-weight: 700; font-size: var(--t-l); letter-spacing: -0.02em; }

/* Listes */
.checks { display: grid; gap: 0.875rem; }
.checks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-weight: 500; color: var(--ink); }
.checks li::before { content: ""; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; transform: translateY(0.15rem); }
.checks.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 1.25rem; }
.checks strong { font-weight: 700; }
.numbered { display: grid; counter-reset: n; border-top: 1px solid var(--ink); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 1.125rem; border-bottom: 1px solid var(--rule); font-weight: 600; }
.numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--f-num); font-weight: 800; color: var(--red-ink); font-size: var(--t-m); }
.arrows { display: grid; gap: 0.75rem; }
.arrows li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-weight: 700; color: var(--ink); font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.3; }
.arrows li::before { content: "→"; color: var(--red); }

/* Bandeau d'affirmation (panneau noir) */
.statement { background: var(--night); color: var(--night-fg); }
.statement .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: end; padding-block: 6rem; }
.statement h2 { font-size: clamp(var(--t-3xl), 1rem + 4.5vw, var(--t-5xl)); letter-spacing: -0.04em; line-height: 0.98; }
.statement p { color: var(--night-mute); font-size: var(--t-l); line-height: 1.5; }

/* Pétition (panneau noir réutilisé dans plusieurs pages) */
.petition { padding-block: 0 6rem; }
.petition .wrap { display: block; }
.petition-grid { display: grid; }
.petition-text { background: var(--night); color: var(--night-fg); display: grid; gap: 1.5rem; justify-items: start; padding: clamp(2rem, 5vw, 4.5rem); }
.petition h2 { font-size: clamp(var(--t-2xl), 1rem + 3vw, var(--t-4xl)); letter-spacing: -0.03em; line-height: 1.06; max-width: 18em; }
.petition-text > p { color: var(--night-mute); max-width: 44rem; }
.petition-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.petition .sig { color: var(--night-mute); }
.petition .sig strong { color: var(--night-fg); }
.petition .reassure { color: var(--night-mute); }
.petition-cta-col { display: grid; gap: 0.75rem; justify-items: start; }
/* Suite après la signature : deuxième rangée du même panneau noir, séparée par un filet fin ; bouton blanc */
.petition-next { background: var(--night); color: var(--night-fg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.5rem); border-top: 1px solid var(--night-rule); }
.petition-next h3 { flex: 1 1 18rem; font-size: clamp(var(--t-l), 1rem + 0.8vw, var(--t-xl)); letter-spacing: -0.025em; line-height: 1.2; max-width: 26ch; }
.petition-next .petition-cta-col { flex: 0 1 24rem; justify-items: start; }
.petition-next .reassure { color: var(--night-mute); }
.petition-next :focus-visible { outline-color: var(--white); }

/* Engagement (panneau noir) */
.engage { padding-block: 0 6rem; }
.engage-box { background: var(--night); color: var(--night-fg); }
.engage-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; padding: clamp(2rem, 5vw, 4rem); }
.engage-text { display: grid; gap: 0.875rem; }
.engage .eyebrow { color: var(--night-mute); }
.engage h2 { font-size: clamp(var(--t-xl), 1rem + 2.2vw, var(--t-3xl)); letter-spacing: -0.03em; line-height: 1.08; max-width: 18em; }
.engage-desc { color: var(--night-mute); }
.engage-cta { display: grid; gap: 0.75rem; justify-items: start; max-width: 26rem; }
.engage .reassure { color: var(--night-mute); }
.engage .link { color: var(--night-fg); }
.engage-sig { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.engage-sig .sig { color: var(--night-mute); }
.engage-sig .sig b { color: var(--night-fg); font-size: var(--t-l); }
.engage :focus-visible { outline-color: var(--white); }
.engage.engage-post { padding: 0; margin-top: 3rem; }

/* Cartes d'actualités (grilles des pages intérieures) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; display: grid; gap: 1rem; align-content: start; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { display: grid; gap: 0.625rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: var(--t-s); color: var(--ink-2); }
.card-meta span:first-child { display: none; }
.card h3 { font-size: var(--t-l); line-height: 1.2; letter-spacing: -0.02em; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 { color: var(--red-ink); }
.card .excerpt { color: var(--ink-2); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .more { display: none; }
.actu-foot { display: flex; justify-content: flex-start; padding-top: 3rem; }

/* Revue de presse */
.media-list { display: grid; border-top: 1px solid var(--ink); }
.media-item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem; align-items: center; padding-block: 2.5rem; border-bottom: 1px solid var(--rule); }
.media-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.media-item .text-stack { gap: 0.75rem; }
.media-item .eyebrow { font-weight: 800; color: var(--ink); letter-spacing: -0.02em; font-size: var(--t-m); }
.media-item h3 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -0.025em; }
.media-item .more::after { content: "↗"; }

/* Boutique */
.product { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; align-items: center; }
.product-img { background: var(--night); padding: clamp(2rem, 6vw, 5rem); }
.product-img img { filter: drop-shadow(0 20px 30px rgb(0 0 0 / 0.5)); transform: rotate(-5deg); }
.product h1, .product h2 { font-size: clamp(var(--t-3xl), 1.2rem + 3vw, var(--t-5xl)); letter-spacing: -0.035em; line-height: 1.02; }
.product .lead { font-size: var(--t-l); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: start; }
.contact-grid h1 { font-size: clamp(var(--t-3xl), 1.2rem + 3vw, var(--t-5xl)); letter-spacing: -0.035em; line-height: 1.02; }
.form-card { background: var(--white); border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 2.5rem); }
.form-grid { display: grid; gap: 1.25rem; }
.form-grid .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.form-grid label { display: grid; gap: 0.5rem; font-weight: 600; font-size: var(--t-s); }
.form-grid input, .form-grid textarea { font: inherit; font-size: var(--t-m); color: var(--ink); background: var(--paper); border: 0; border-bottom: 1.5px solid var(--rule-2); border-radius: 0; padding: 0.75rem 0.25rem; min-height: 48px; width: 100%; transition: border-color 160ms ease-out; }
.form-grid textarea { min-height: 8rem; resize: vertical; }
.form-grid input:focus, .form-grid textarea:focus { border-bottom-color: var(--ink); outline: none; background: var(--white); }
.form-grid .btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.form-status { font-size: var(--t-s); color: var(--ink-2); }

/* Note de maquette (hors design du site) */
.note-maquette { border: 1.5px dashed var(--proto-line); background: var(--proto-bg); color: var(--proto-fg); padding: 1.25rem 1.5rem; font-size: 0.95rem; max-width: 46rem; }
.note-maquette strong { display: block; padding-bottom: 0.25rem; }

/* Pagination, lien croisé */
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 3.5rem; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 1rem; border: 1px solid var(--rule-2); border-radius: 999px; font-weight: 700; text-decoration: none; }
.pagination span[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination a:hover { border-color: var(--ink); }
.crosslink { border-top: 1px solid var(--rule); }
.crosslink .wrap { padding-block: 2.5rem; }
.text-link { font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.text-link:hover { color: var(--red-ink); }
.crosslink a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* ——— Article ——— */
.post { padding-block: 4.5rem 2rem; }
.col { max-width: 44rem; margin-inline: auto; }
.wide { max-width: 64rem; margin-inline: auto; }
.post-head { display: grid; gap: 1.25rem; padding-bottom: 2.5rem; }
.post-head h1 { font-size: clamp(var(--t-3xl), 1.2rem + 3vw, var(--t-5xl)); letter-spacing: -0.035em; line-height: 1.02; }
.post-meta { font-size: var(--t-s); color: var(--ink-2); }
.post-meta span { color: var(--ink); font-weight: 700; }
.prose > * + * { margin-top: 1.25rem; }
.prose p { color: #2A2724; }
.prose .rlv-chapo { font-size: var(--t-l); line-height: 1.5; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.prose h3 { font-size: var(--t-xl); line-height: 1.2; margin-top: 3rem; letter-spacing: -0.025em; }
.media-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; margin-block: 3.5rem; }
.media-text img { width: 100%; }
.media-text h3 { margin-top: 0; }
.mt-content > * + * { margin-top: 1rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.share p { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-block: 1.5rem; border-block: 1px solid var(--rule); }
.post-nav a { display: grid; gap: 0.25rem; text-decoration: none; max-width: 28rem; min-height: 44px; }
.post-nav small { font-size: var(--t-s); color: var(--ink-2); }
.post-nav span { font-weight: 700; letter-spacing: -0.015em; }
.post-nav a:hover span { color: var(--red-ink); }
.related { padding-block: 4rem 6rem; }
.related h2 { font-size: var(--t-xl); letter-spacing: -0.025em; padding-bottom: 2rem; }

/* ——— Écrans moyens et petits ——— */
@media (max-width: 960px) {
  .h-grid, .panel, .news-grid, .intents-grid, .faq-grid, .foot-grid, .split, .split.even, .product, .contact-grid, .media-item, .statement .wrap, .engage-inner, .media-text, .checks.two-col { grid-template-columns: minmax(0, 1fr); }
  .h-hero { padding-block: 2.5rem 3.5rem; }
  .h-grid, .split, .product, .contact-grid { gap: 2.5rem; }
  .h-photo > img:first-child { aspect-ratio: 4 / 3; }
  .h-sticker { left: auto; right: 1rem; bottom: -1.5rem; }
  .logos .wrap { grid-template-columns: minmax(0, 1fr); }
  .logos ul { justify-content: flex-start; gap: 0.5rem 1.5rem; }
  .proof-grid, .objectives, .verbs, .tiles, .cards, .va-tiles .wrap { grid-template-columns: minmax(0, 1fr); }
  .va-statement { padding-block: 5rem 4rem; }
  .vt { min-height: 32rem; }
  .proof { aspect-ratio: 16 / 10; }
  .tiles.four, .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-tiles .wrap { grid-template-columns: minmax(0, 1fr); }
  .manifesto, .news, .intents, .faq, .section { padding-block: 4rem; }
  .panel-section, .petition, .engage, .duo-tiles { padding-bottom: 4rem; }
  .statement .wrap { padding-block: 4rem; }
  .page-hero { padding-top: 3rem; }
  .page-hero::after { margin-top: 2.5rem; }
  .arg-grid, .qui, .avis { grid-template-columns: minmax(0, 1fr); }
  .sceau, .arguments { padding-block: 4rem; }
  .sceau { padding-bottom: 1rem; }
  .sceau-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "g" "d" "b"; row-gap: 2rem; }
  .sceau-grid .sceau-list li { flex-direction: column; justify-content: center; justify-self: center; max-width: 26rem; gap: 0.75rem; text-align: center; }
  .sceau-grid .sceau-list li::before { order: 0; width: 9px; height: 9px; transform: none; border-radius: 50%; background: var(--red); }
  .petition.petition-top { padding-top: 4rem; }
  .arg-quote { position: static; }
  .don, .don-large { grid-column: span 3; }
  .don-large img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .tiles.four, .cards.two, .form-grid .row2 { grid-template-columns: minmax(0, 1fr); }
  .don, .don-large { grid-column: 1 / -1; }
  .arg-list > li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; }
  .news-item { grid-template-columns: 5rem minmax(0, 1fr); }
  .post-nav { flex-direction: column; }
  .ptile { min-height: 26rem; }
}

/* ——— Bloc « association » de l'accueil sur téléphone (v30, mise en page « fiche » choisie par Alexis le 13/11/2026) ———
   Sous 640 px : alignée à gauche, logo en tampon à droite du titre, objectifs numérotés sous filets, bouton noir pleine largeur.
   De 641 px à 960 px et sur ordinateur, le bloc reste celui de la v28. */
@media (max-width: 640px) {
  .sceau { overflow-x: clip; } /* le logo, collé à droite, déborde avant son entrée en tampon (hors écran, invisible) */
  .sceau .sceau-wrap { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: start; column-gap: 1rem; row-gap: 1.25rem; text-align: left; }
  .sceau .sceau-grid { display: contents; }
  .sceau .sceau-wrap .sceau-titre { grid-column: 1; grid-row: 1; max-width: none; font-size: 1.5rem; }
  .sceau .sceau-wrap .sceau-img { grid-area: auto; grid-column: 2; grid-row: 1; width: 96px; justify-self: end; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.25)); }
  .sceau .sceau-wrap .sceau-sous, .sceau .sceau-wrap .sceau-list, .sceau .sceau-wrap > .btn { grid-column: 1 / -1; }
  .sceau .sceau-wrap .sceau-sous { margin-top: 0; max-width: none; }
  .sceau .sceau-wrap .sceau-list { display: block; counter-reset: n; margin-top: 0.5rem; border-top: 1px solid var(--ink); }
  .sceau .sceau-wrap .sceau-list li { counter-increment: n; justify-self: stretch; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; justify-content: stretch; gap: 0; max-width: none; padding-block: 1.125rem; border-bottom: 1px solid var(--rule); text-align: left; }
  .sceau .sceau-wrap .sceau-list li::before { content: counter(n, decimal-leading-zero); order: 0; width: auto; height: auto; border-radius: 0; background: none; transform: none; color: var(--red-ink); font-family: var(--f-num); font-weight: 800; font-size: var(--t-m); }
  .sceau .sceau-wrap > .btn { width: 100%; margin-top: 0.75rem; }
}

/* ——— Mouvement : entrées au défilement, compteurs, changement de page, défilement doux ——— */
/* Remplace celui de la maquette (outils/theme.py) : rien n'est masqué ni retardé après la première peinture (voir « Mouvement » de site.js). */
@media (prefers-reduced-motion: no-preference) {
  /* Blocs sous la ligne de flottaison : montent de 16 px en apparaissant, une seule fois, à leur arrivée à l'écran.
     site.js ne pose data-reveal que sur eux : ce qui est à l'écran à l'ouverture n'est jamais masqué. */
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
  /* Le sceau s'appose comme un tampon quand son bloc arrive à l'écran */
  .js-reveal .sceau[data-reveal] .sceau-img { transition: transform 900ms var(--ease-out) 200ms, opacity 500ms ease-out 200ms; }
  .js-reveal .sceau[data-reveal]:not(.is-in) .sceau-img { opacity: 0; transform: rotate(-26deg) scale(1.25); }
  /* Compteurs : le HTML porte la valeur finale ; tant que site.js ne l'a pas mise à 0, elle est masquée (la place reste réservée),
     sinon on verrait la valeur finale, puis 0, puis le comptage. La classe rlv-mouvement vient du <head> (functions.php).
     Repli : si le script ne tourne pas, la valeur reparaît d'elle-même au bout de 2,5 s. */
  .rlv-mouvement [data-count-to]:not(.is-prete) { visibility: hidden; animation: compteur-repli 0s linear 2.5s forwards; }
}
@keyframes compteur-repli { to { visibility: visible; } }
/* Changement de page (navigateurs récents) : court, l'ancienne page s'efface en 120 ms pendant que la nouvelle monte en 180 ms,
   sans décalage ; en-tête et barre fixes. Les autres navigateurs naviguent simplement (aucun script). */
@view-transition { navigation: auto; }
.site-head { view-transition-name: entete; }
.proto { view-transition-name: prerendu; }
::view-transition-old(root) { animation: page-sort 120ms cubic-bezier(0.7, 0, 0.84, 0) both; }
::view-transition-new(root) { animation: page-entre 180ms var(--ease-out) both; }
@keyframes page-sort { to { opacity: 0; transform: translateY(-18px); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(24px); } }
/* Défilement doux (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}