/* Institut des Voix Populaires : styles communs à toutes les pages */
/* Maquette IVP-Home / Clean : 1 rem = 10 px à 1440 px de large, tout suit la largeur de l'écran. */
:root {
  --bordeaux: #30041B; --bordeaux-2: #440627; --bordeaux-3: #710A40;
  --rouge: #FF3838; --beige: #E4E4E4; --bleu: #B3D1FF; --blanc: #FFFFFF; --gris: #B8B8B8;
  --font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.8,.26,1);
  --peek: 12.8rem; --stack-top: 3.2rem;
  --w-title: 600; /* titres en demi-gras */
  color-scheme: dark;
  font-size: clamp(7px, .69444vw, 12px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bordeaux); color: var(--beige); font: 400 1.8rem/1.28 var(--font); margin: 0; }
h1, h2, h3, p { margin: 0; font: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .4rem; }
img { display: block; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.btn { font: 400 1.8rem/1.28 var(--font); padding: 1.2rem 2.4rem; border: 1px solid transparent; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.btn-beige { background: var(--beige); color: var(--bordeaux-3); }
.btn-beige:hover { background: var(--blanc); }
.btn-line { background: none; border-color: var(--beige); color: var(--beige); }
.btn-line:hover { background: var(--beige); color: var(--bordeaux); }
.btn-dark { background: var(--bordeaux); color: var(--beige); }
.btn-dark { border-color: var(--bordeaux); }
/* survol : le bouton se vide, garde son contour et son texte passe en bordeaux */
.btn-dark:hover { background: transparent; color: var(--bordeaux); border-color: var(--bordeaux); }

.title-xl { font-weight: var(--w-title); font-size: 6.4rem; line-height: 1.28; }

/* Header (sur le bleu du hero) — sticky desktop : se masque en descendant, réapparaît en remontant */
.header { display: flex; justify-content: space-between; align-items: center; padding: 2.8rem 6.4rem; background: var(--bleu); color: var(--bordeaux); position: relative; z-index: 60; transition: transform .35s var(--ease), box-shadow .3s ease, background-color .3s ease; }
.header .logo { width: 8.8rem; height: auto; }
@media (min-width: 1025px) {
  .header { position: sticky; top: 0; }
  .header.is-scrolled { box-shadow: 0 1.2rem 3.2rem -1.6rem rgba(48,4,27,.35); }
  .header.is-hidden { transform: translateY(-110%); }
}
/* --hdr (posé par site.js en desktop) = hauteur du header quand il est visible, 0 quand il est masqué :
   les éléments sticky se décalent dessous au lieu d’être recouverts */
.card, .split > .h2, .ts-label, .toc { transition: top .35s var(--ease); }
.nav { display: flex; align-items: center; gap: 2.8rem; font-size: 1.6rem; }
.nav .btn { font-size: 1.6rem; padding: .9rem 1.8rem; }
.burger { display: none; width: 2.4rem; height: 2.4rem; padding: 0; background: none; border: 0; color: var(--bordeaux); cursor: pointer; }
.burger svg { display: block; width: 100%; height: 100%; }

/* Mega menu « L'institut » : liens à gauche, bloc « Nous parler » à droite, barre Fermer en bas */
.nav-trigger { display: inline-flex; align-items: center; gap: .6rem; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.nav-trigger svg { width: 1.2rem; height: 1.2rem; transition: transform .3s var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-trigger:hover span { text-decoration: underline; text-underline-offset: .4rem; }
.mega { position: absolute; top: calc(100% - .8rem); left: 0; width: 64rem; background: var(--blanc); color: var(--bordeaux); box-shadow: 0 2.4rem 6.4rem -1.6rem rgba(48,4,27,.45); opacity: 0; transform: translateY(-.8rem); transition: opacity .2s ease, transform .3s var(--ease); }
.mega.on { opacity: 1; transform: none; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 3.2rem; } /* pont invisible : la souris peut descendre du lien au panneau sans le fermer */
.mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 4rem; align-items: start; padding: 4rem; }
.mega-kicker { margin-bottom: 2rem; font-weight: var(--w-title); font-size: 2.2rem; }
.mega-main { display: flex; flex-direction: column; gap: 1.8rem; margin: 0; padding: 0; list-style: none; font-size: 1.7rem; }
.mega-main a { color: var(--bordeaux-3); }
.mega-main a:hover { color: var(--bordeaux); }
.mega-main .mobile-only { display: none; }
.mega-cta { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.8rem; background: var(--bordeaux); color: var(--beige); }
.mega-cta:hover { text-decoration: none; }
.mega-cta b { font-weight: var(--w-title); font-size: 2.4rem; line-height: 1.1; }
.mega-cta span { font-size: 1.5rem; color: var(--gris); }
.mega-cta i { margin-top: 1.2rem; font-style: normal; font-size: 1.5rem; color: var(--rouge); }
.mega-cta i em { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.mega-cta:hover i em { transform: translateX(.6rem); }
.btn-line-dark { background: none; border-color: var(--bordeaux); color: var(--bordeaux); }
.btn-line-dark:hover { background: var(--bordeaux); color: var(--beige); }
.header :focus-visible, .hero :focus-visible { outline-color: var(--bordeaux); }

/* Hero : fond bleu, typo bordeaux. Texte à gauche, 3 contenus à la une à droite qui défilent à l'horizontale */
.hero { display: flex; flex-direction: column; align-items: center; gap: 7.2rem; padding: 5.6rem 6.4rem 12rem; background: var(--bleu); color: var(--bordeaux); overflow: clip; }
.hero-text { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.hero h1 { max-width: 118rem; font-weight: var(--w-title); font-size: 8rem; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.intro { width: 100rem; max-width: 100%; font-size: 2.4rem; }
.cta { display: flex; gap: 2.4rem; padding-top: .8rem; flex-wrap: wrap; justify-content: center; }
.une-wrap { width: 100%; min-width: 0; }

.une { display: flex; justify-content: center; align-items: flex-start; gap: 3.2rem; margin: 0; padding: 0; list-style: none; }
.une-nav { display: none; justify-content: flex-end; gap: .8rem; margin-top: 1.6rem; padding-right: 6.4rem; }
.une-nav button { width: 4.8rem; height: 4.8rem; display: grid; place-items: center; padding: 0; font: 500 2rem/1 var(--font); color: var(--bordeaux); background: none; border: 1px solid var(--bordeaux); cursor: pointer; transition: background-color .25s, color .25s, opacity .25s; }
.une-nav button:hover { background: var(--bordeaux); color: var(--beige); }
.une-nav button:disabled { opacity: .3; cursor: default; background: none; color: var(--bordeaux); }

.hero[data-v="1"] .hero-text { align-items: flex-start; text-align: left; }
.hero[data-v="1"] .cta { justify-content: flex-start; }

/* Deux colonnes, les cartes partent jusqu'au bord droit */
.hero[data-v="1"] { display: grid; grid-template-columns: minmax(0, 54rem) minmax(0, 1fr); align-items: center; gap: 6.4rem; padding-right: 0; padding-bottom: 9.6rem; }
.hero[data-v="1"] h1 { font-size: 6.4rem; line-height: .98; letter-spacing: -.015em; }
.hero[data-v="1"] .intro { font-size: 2rem; }
.hero[data-v="1"] .une { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 2rem 6.4rem 3.2rem 0; scrollbar-width: none; }
.hero[data-v="1"] .une::-webkit-scrollbar { display: none; }
.hero[data-v="1"] .une li { flex: none; scroll-snap-align: start; }
.hero[data-v="1"] .une-nav { display: flex; }
/* Grand écran : cartes plus petites pour que la 3e dépasse déjà */
@media (min-width: 1025px) {
  .hero[data-v="1"] .une { gap: 2.4rem; }
  .hero[data-v="1"] .tile { width: 29.6rem; height: 42rem; padding: 2.4rem; }
  .hero[data-v="1"] .tile h2 { font-size: 2.6rem; }
  .hero[data-v="1"] .tile p, .hero[data-v="1"] .more { font-size: 1.6rem; }
  .hero[data-v="1"] .tag { font-size: 1.2rem; }
  .hero[data-v="1"] .tile-chiffre .big { font-size: 12.8rem; }
  .hero[data-v="1"] .tile-chiffre p { font-size: 1.9rem; margin: 1.2rem 0 2.4rem; }
  .hero[data-v="1"] .tile-etude p { margin: 1.2rem 0 2.4rem; }
  .hero[data-v="1"] .tile-entretien h2 { font-size: 3.2rem; }
}

.tile { position: relative; display: flex; flex-direction: column; width: 36rem; height: 50rem; padding: 2.8rem; background: var(--bg); color: var(--fg); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tile:hover { text-decoration: none; transform: translateY(-1.2rem); box-shadow: 0 2.4rem 4.8rem -2.4rem rgba(48,4,27,.45); }
.tag { align-self: flex-start; font-weight: 500; font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; padding: .6rem 1.2rem; border: 1px solid currentColor; }
.tile h2 { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.15; }
.tile p { font-size: 1.8rem; }
.more { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid currentColor; font-weight: 500; }
.more i { font-style: normal; transition: transform .35s var(--ease); }
.tile:hover .more i { transform: translateX(.8rem); }
.tile-chiffre .big { margin-top: auto; font-weight: var(--w-title); font-size: 16rem; line-height: .9; letter-spacing: -.03em; }
.tile-chiffre p { margin: 1.6rem 0 3.2rem; font-size: 2.2rem; }
.tile-etude h2 { margin-top: auto; }
.tile-etude p { margin: 1.6rem 0 3.2rem; }
/* Entretien sans photo : la citation prend la place, calée en bas comme le chiffre */
.tile-entretien h2 { margin: auto 0 3.2rem; font-size: 3.6rem; line-height: 1.12; }

/* Manifeste */
/* Aligné à gauche sur le texte du hero, avec une grande respiration avant les chiffres */
.manifeste { padding: 8rem 6.4rem 19.2rem; background: var(--bleu); }
.manifeste p { max-width: 118rem; text-align: left; font-size: 4.8rem; line-height: 1.27; color: var(--bordeaux); }

/* Chiffres clés */
/* Les 3 chiffres tiennent dans un seul écran pour se lire ensemble :
   illustration, pourcentage, texte, sur des lignes resserrées */
.chiffres { padding: 12.8rem 6.4rem 9.6rem; display: flex; flex-direction: column; gap: 4.8rem; }
.chiffres h2 { color: var(--bleu); font-size: 5.6rem; line-height: 1.1; text-wrap: balance; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 20rem 26rem minmax(0, 1fr); grid-template-areas: "visuel valeur libelle"; gap: 4.8rem; align-items: center; padding: 2.4rem 0; border-top: 1px solid rgba(179,209,255,.25); }
.row:last-child { border-bottom: 1px solid rgba(179,209,255,.25); }
.valeur { grid-area: valeur; font-weight: 500; font-size: 9.6rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.visuel { grid-area: visuel; height: 16rem; display: flex; align-items: center; justify-content: flex-start; }
.visuel svg { display: block; height: auto; overflow: visible; }
#v-foule svg { width: 16rem; } #v-tv svg { width: 17.6rem; } #v-hemi svg { width: 13.6rem; }
.libelle { grid-area: libelle; max-width: 52rem; text-wrap: balance; font-size: 2.8rem; line-height: 1.2; }

/* Petit « i » après chaque texte : au survol (ou au toucher), une bulle explique le chiffre */
.info { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: .4rem; padding: 0; vertical-align: .2em; font: 600 1.4rem/1 var(--font); color: var(--bleu); background: none; border: 1px solid var(--bleu); border-radius: 50%; cursor: help; transition: background-color .2s, color .2s; }
.info:hover, .info[aria-expanded="true"] { background: var(--bleu); color: var(--bordeaux); }
.tip { position: fixed; z-index: 30; width: 36rem; max-width: calc(100vw - 32px); padding: 2rem 2.4rem; background: var(--beige); color: var(--bordeaux); font-size: 1.6rem; line-height: 1.4; box-shadow: 0 1.6rem 4rem -1.6rem rgba(0,0,0,.6); pointer-events: none; opacity: 0; transform: translateY(.4rem); transition: opacity .18s, transform .18s; }
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; margin-bottom: .8rem; font-weight: var(--w-title); font-size: 1.8rem; }
.tip small { display: block; margin-top: 1.2rem; font-size: 1.3rem; color: var(--bordeaux-3); }

/* Version 2 : 3 colonnes côte à côte (illustration, pourcentage, explication) */
.chiffres[data-v="2"] .rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4.8rem; }
.chiffres[data-v="2"] .row, .chiffres[data-v="2"] .row:last-child { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visuel" "valeur" "libelle"; align-content: start; gap: 2.4rem; padding: 3.2rem 0 0; border-top: 0; border-bottom: 0; }
.chiffres[data-v="2"] .visuel { height: 20rem; align-items: flex-end; }
.chiffres[data-v="2"] #v-foule svg { width: 20rem; } .chiffres[data-v="2"] #v-tv svg { width: 23.2rem; } .chiffres[data-v="2"] #v-hemi svg { width: 17.6rem; }
.chiffres[data-v="2"] .valeur { font-size: 10.4rem; }
.chiffres[data-v="2"] .libelle { font-size: 2.4rem; }
.dot { fill: var(--bleu); transition: fill .7s ease; }
.lit .dot-r { fill: var(--rouge); }

/* Constat */
.constat { position: relative; padding: 22.2rem 12rem; overflow: clip; }
.constat .voix { position: absolute; left: 50%; top: 50%; width: 164.7rem; max-width: none; height: 66.3rem; transform: translate(-50%,-50%); }
.constat-in { position: relative; }
.panel { background: var(--rouge); color: var(--bordeaux); padding: 4.8rem 5.6rem; font-size: 3.2rem; }
.panel mark { color: inherit; padding: .5rem .7rem; margin: 0 -.7rem; background: linear-gradient(var(--beige), var(--beige)) no-repeat 0 0 / 0% 100%; transition: background-size 1s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.panel.on mark { background-size: 100% 100%; }
.panel.on mark + mark, .panel.on .m2 { transition-delay: .7s; }

/* Piliers */
.piliers { padding: 8rem 12rem; display: flex; flex-direction: column; gap: 4rem; }
.piliers-head { display: flex; justify-content: space-between; align-items: center; gap: 2.4rem; }
.piliers h2 { color: var(--bleu); font-weight: var(--w-title); font-size: 4.8rem; line-height: 1.27; }
/* Cartes plus basses pour que les 3 empilées tiennent dans l'écran,
   et plus d'écart entre elles pour laisser le temps de lire avant que la suivante recouvre */
.cards { display: flex; flex-direction: column; gap: 16rem; }
.card { position: sticky; top: calc(var(--hdr, 0px) + var(--stack-top) + var(--i) * var(--peek)); display: flex; justify-content: space-between; gap: 4.8rem; padding: 3.6rem; color: var(--bordeaux); }
.card-media { width: 44rem; flex: none; display: flex; flex-direction: column; gap: 3.2rem; }
.num { font-weight: 500; font-size: 10rem; line-height: 1; }
.card-media img { width: 44rem; height: 28rem; object-fit: cover; }
.card-text { width: 56rem; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 3.2rem; }
.card-text h3 { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.28; }

/* Publications */
/* Publications : à gauche une étagère où chaque livre est une étude de l'Institut,
   puis les 3 formats de la future plateforme de contributions */
.pubs { position: relative; z-index: 2; background: var(--beige); color: var(--bordeaux); padding: 12rem 6.4rem; display: flex; flex-direction: column; gap: 8rem; }
.pubs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56rem); gap: 2.4rem 6.4rem; align-items: end; }
.pubs-head h2 { grid-column: 1 / -1; font-weight: var(--w-title); font-size: 6.4rem; line-height: 1.05; }
.pubs-lead { max-width: 64rem; font-size: 3.2rem; line-height: 1.2; text-wrap: balance; }
.pubs-text { font-size: 2rem; }
/* Les deux blocs l'un sous l'autre, chacun : texte à gauche, visuel à droite, alignés sur la même grille */
.pubs-grid { display: flex; flex-direction: column; }
.pub-block { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); grid-template-areas: "text visual"; gap: 6.4rem; align-items: end; padding: 6.4rem 0; border-top: 1px solid rgba(48,4,27,.2); }
.pub-block:last-child { padding-bottom: 0; }
.pub-text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.pub-text h3 { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.15; }
.pub-text .btn { margin-top: .8rem; }
.pub-visual { grid-area: visual; position: relative; z-index: 1; min-width: 0; height: auto; display: flex; flex-direction: column; justify-content: flex-end; background: var(--beige); }

/* Étagère */
.books { display: flex; gap: .8rem; align-items: flex-end; width: 100%; }
.book { --open-w: 30rem; flex: none; position: relative; width: var(--spine, 7rem); height: var(--h, 40rem); overflow: hidden; background: var(--bg, #30041B); color: var(--fg, #FF3838); cursor: pointer; transition: width .65s var(--ease); }
.book.open { width: var(--open-w); cursor: default; }
.face { position: absolute; top: 0; bottom: 0; left: 0; transition: opacity .3s ease; }
.cover { width: var(--open-w); display: flex; flex-direction: column; justify-content: space-between; padding: 3.2rem 2.4rem; opacity: 0; pointer-events: none; }
.cover-tag { font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; }
.cover h4 { margin: 0; font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.12; text-wrap: balance; }
.cover p { margin-top: 1.2rem; font-size: 1.6rem; }
/* Tranche façon livre : filets doubles en tête et en pied, date en haut, titre, logo de l'Institut en bas */
.spine { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1.6rem; padding: 3.2rem 0; }
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: .5rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .4; }
.spine::before { top: 1.2rem; }
.spine::after { bottom: 1.2rem; }
.spine img { flex: none; width: 70%; max-width: 5.6rem; height: auto; }
.spine b { flex: 1 1 auto; text-align: center; }
.spine b { font-weight: var(--w-title); font-size: 2.4rem; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.spine i { font-style: normal; font-weight: 500; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; opacity: .75; }
.book.open .cover { opacity: 1; pointer-events: auto; transition-delay: .22s; }
.book.open .spine { opacity: 0; pointer-events: none; }
.shelf { height: 2.4rem; background: var(--bordeaux); }

/* Accueil mobile : catalogue à la place de l’étagère (comme sur Publications) */
.home-catalog { display: none; margin: 0; padding: 0; list-style: none; }
.home-catalog a { display: flex; flex-direction: column; gap: 1.2rem; min-height: 22rem; padding: 2.4rem; background: var(--bg); color: var(--fg); }
.home-catalog a:hover { text-decoration: none; }
.home-catalog .tag { align-self: start; }
.home-catalog h4 { margin: 0; font-weight: var(--w-title); font-size: 2.4rem; line-height: 1.12; text-wrap: balance; }
.home-catalog p { margin: 0; font-size: 1.5rem; line-height: 1.35; }
.home-catalog .more { margin-top: auto; font-weight: 500; font-size: 1.4rem; }

/* Formats de la plateforme : 3 cartes légèrement décalées */
.pub-visual.mosaic { height: auto; padding-top: 8rem; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; align-items: stretch; }
.mosaic-note { position: absolute; top: 0; left: 0; font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.contrib { --r: 0deg; --y: 0rem; display: flex; flex-direction: column; gap: 1.6rem; padding: 2.8rem 2.4rem 3.2rem; background: var(--bg); color: var(--fg); transform: translateY(var(--y)) rotate(var(--r)); transition: transform .4s var(--ease); }
.contrib:hover { transform: translateY(calc(var(--y) - .8rem)) rotate(0deg); }
.contrib:nth-child(odd) { --y: -4rem; }
.contrib .tag { margin-bottom: 2.4rem; }
.contrib h4 { margin: 0; font-weight: var(--w-title); font-size: 2.8rem; line-height: 1.12; text-wrap: balance; }
.contrib p { font-size: 1.7rem; line-height: 1.4; }

/* Footer : flux normal (plus de sticky reveal) — le sticky bottom:0 masquait l’étagère publications
   sur la preview (footer ~70vh collé au bas de l’écran pendant le scroll de la section). */
main { position: relative; z-index: 1; background: var(--bordeaux); } /* bordeaux opaque : chiffres, constat et piliers (texte beige) ; le footer reste en flux, derrière */
.footer { position: relative; z-index: 0; overflow: hidden; background: var(--bordeaux); color: var(--beige); padding: 0 6.4rem; }
.footer-in { opacity: 1; }
.partners { display: grid; grid-template-columns: 20rem minmax(0, 1fr); align-items: center; gap: 4.8rem; padding: 4rem 0; border-bottom: 1px solid rgba(228,228,228,.2); }
.f-label { font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.partners ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.partner { height: 6.4rem; display: grid; place-items: center; padding: 0 1.2rem; text-align: center; font-size: 1.3rem; color: var(--gris); border: 1px dashed rgba(228,228,228,.35); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6.4rem; padding: 5.6rem 0 4.8rem; }
.f-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.f-id .f-tagline { max-width: 48rem; font-weight: var(--w-title); font-size: 4rem; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.f-contact { display: flex; flex-direction: column; gap: .4rem; font-style: normal; font-size: 1.6rem; color: var(--gris); }
.f-social { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.f-social a { display: inline-block; padding: .6rem 1.4rem; font-size: 1.4rem; border: 1px solid rgba(228,228,228,.5); }
.f-social a:hover { text-decoration: none; background: var(--beige); color: var(--bordeaux); }
.f-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: 3.2rem; }
.f-nav h3 { margin-bottom: 1.6rem; font-weight: var(--w-title); font-size: 2.4rem; line-height: 1.15; text-wrap: balance; }
.f-nav ul { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; list-style: none; font-size: 1.7rem; color: var(--gris); }
.f-nav ul a:hover { color: var(--beige); }
.f-nav .btn { margin-top: .4rem; font-size: 1.5rem; padding: 1rem 1.8rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem; padding: 2rem 0; border-top: 1px solid rgba(228,228,228,.2); font-size: 1.4rem; color: var(--gris); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.wordmark { display: block; padding: 2.4rem 0 4.8rem; }
.wordmark img { display: block; width: 100%; height: auto; }

/* Widget « Nous parler » : bouton fixé en bas à droite, panneau en plusieurs écrans
   (accueil avec profil facultatif, écrire, vocal, merci). Tailles en px pour rester lisible à toutes les largeurs. */
.talk-fab { position: fixed; z-index: 70; right: max(32px, env(safe-area-inset-right, 0px)); bottom: calc(32px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; font: 600 16px/1 var(--font); color: var(--bordeaux); background: var(--rouge); border: 2px solid var(--bordeaux); box-shadow: 4px 4px 0 var(--bordeaux); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.talk-fab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bordeaux); }
.talk-fab svg, .talk svg { flex: none; }
.talk { position: fixed; z-index: 71; right: max(32px, env(safe-area-inset-right, 0px)); bottom: calc(32px + env(safe-area-inset-bottom, 0px)); width: 400px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 64px); overflow-y: auto; box-sizing: border-box; padding: 22px; display: flex; flex-direction: column; gap: 16px; font: 400 15px/1.45 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); box-shadow: 6px 6px 0 var(--bordeaux); opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .3s var(--ease); }
.talk.on { opacity: 1; transform: none; }
.talk :focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 2px; }
.talk-head { display: flex; align-items: center; gap: 8px; }
.talk-head b { font-weight: var(--w-title); font-size: 22px; }
.talk-icon { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--bordeaux); background: none; border: 0; cursor: pointer; }
.talk-close { margin-left: auto; }
.talk-badge { padding: 3px 10px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--bordeaux); }
.talk-screen { display: flex; flex-direction: column; gap: 14px; }
.talk-lead { margin-top: -6px; color: var(--bordeaux-3); }
.talk-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bordeaux-3); }
.talk-list { display: flex; flex-direction: column; gap: 6px; }
.talk-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 7px 14px; text-align: left; font: inherit; color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); cursor: pointer; transition: background-color .2s; }
.talk-list button:hover { background: var(--beige); }
.talk-list b { display: block; font-weight: var(--w-title); font-size: 16px; line-height: 1.2; }
.talk-list small { display: block; font-size: 13px; color: var(--bordeaux-3); }
.talk-list i { font-style: normal; font-size: 18px; transition: transform .25s var(--ease); }
.talk-list button:hover i { transform: translateX(4px); }
.talk-video { position: relative; height: 210px; flex: none; overflow: hidden; background: var(--bordeaux); color: var(--beige); }
.talk-video-tag { position: absolute; top: 12px; left: 12px; padding: 4px 8px; font-size: 12px; background: var(--bordeaux-2); }
.talk-play { position: absolute; top: 62px; left: 50%; width: 60px; height: 60px; margin-left: -30px; display: grid; place-items: center; padding: 0; color: var(--bordeaux); background: var(--rouge); border: 0; border-radius: 50%; cursor: pointer; }
.talk-sub { position: absolute; left: 12px; right: 12px; bottom: 14px; text-align: center; line-height: 1.75; }
.talk-sub span { padding: 3px 6px; font-weight: 600; font-size: 14px; color: var(--bordeaux); background: var(--bleu); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.talk-raison { margin-top: -6px; color: var(--bordeaux-3); }
.talk-wide { display: flex; align-items: center; justify-content: center; gap: 10px; }
.talk-row2-big > * { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; font: 600 15px/1 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); cursor: pointer; }
.talk-row2-big > *:hover { text-decoration: none; background: var(--beige); }
.talk-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.talk-ways > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; font: 600 14px/1 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); cursor: pointer; }
.talk-ways > *:hover { text-decoration: none; background: var(--beige); }
.talk-ways .primary, .talk-send { background: var(--rouge); }
.talk-ways .primary:hover { background: var(--rouge); filter: brightness(1.05); }
.talk-foot { font-size: 13px; text-align: center; color: var(--bordeaux-3); }
.talk-h { font-weight: var(--w-title); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.talk-h mark { color: inherit; background: linear-gradient(transparent 58%, var(--bleu) 58%); }
.talk textarea, .talk input[type="text"] { width: 100%; box-sizing: border-box; font: 400 15px/1.45 var(--font); padding: 10px 12px; color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); resize: vertical; }
.talk input[type="text"] { min-height: 48px; }
.talk-field { display: flex; flex-direction: column; gap: 6px; }
.talk-field label, .talk-consent { font-size: 13px; font-weight: 600; }
.talk-help { margin-top: -8px; font-size: 13px; color: var(--bordeaux-3); }
.talk-error { font-size: 13px; font-weight: 600; color: #B4001E; }
.talk-send { min-height: 54px; font: 600 16px/1 var(--font); color: var(--bordeaux); border: 2px solid var(--bordeaux); cursor: pointer; }
.talk-link { align-self: center; min-height: 40px; padding: 0; font: 500 14px/1 var(--font); color: var(--bordeaux); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.talk-note { font-size: 12px; text-align: center; color: var(--bordeaux-3); }
.talk-quote { font-weight: var(--w-title); font-size: 20px; line-height: 1.2; }
.talk-bars { height: 64px; display: flex; align-items: center; justify-content: center; gap: 3px; border: 2px solid var(--bordeaux); user-select: none; }
.talk-bars span { width: 5px; min-height: 4px; border-radius: 3px; background: var(--gris); transition: background-color .15s, height .09s linear; pointer-events: none; }
.talk-bars span.lit { background: var(--bordeaux); }
.talk-bars.seekable { cursor: pointer; touch-action: none; }
.talk-bars.seekable:hover span:not(.lit) { background: rgba(48,4,27,.4); }
.talk-time { text-align: center; font-weight: var(--w-title); font-size: 18px; font-variant-numeric: tabular-nums; }
.talk-time small { font-weight: 400; font-size: 15px; color: var(--bordeaux-3); }
.talk-rec { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.talk-rec button { width: 84px; height: 84px; display: grid; place-items: center; padding: 0; color: var(--rouge); background: var(--bordeaux); border: 0; border-radius: 50%; cursor: pointer; }
.talk-rec button.recording { border: 5px solid var(--rouge); animation: talkPulse 1.4s ease-in-out infinite; }
.talk-rec button.recording span { width: 26px; height: 26px; background: var(--rouge); }
@keyframes talkPulse { 50% { transform: scale(1.07); } }
.talk-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.talk-row2 button { min-height: 44px; font: 600 14px/1 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); cursor: pointer; }
.talk-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; line-height: 1.4; color: var(--bordeaux-3); }
.talk-consent input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--bordeaux); }
.talk-star { font-weight: var(--w-title); font-size: 96px; line-height: .8; height: 56px; color: var(--rouge); }
.talk-merci-h { font-weight: var(--w-title); font-size: 34px; line-height: 1.05; letter-spacing: -.02em; }
.talk-merci-h mark { color: inherit; background: linear-gradient(transparent 58%, var(--bleu) 58%); }
.talk-btn { display: flex; align-items: center; justify-content: center; min-height: 50px; font: 600 15px/1 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); cursor: pointer; }
.talk-btn.dark { color: var(--beige); background: var(--bordeaux); }
.talk-btn:hover { text-decoration: none; }

/* Ordinateur et tablette : panneau latéral sur toute la hauteur à droite, page assombrie derrière, textes plus grands */
@media (min-width: 601px) {
  .talk { top: 0; right: 0; bottom: 0; width: 520px; max-width: 100vw; max-height: none; padding: 28px 36px calc(36px + env(safe-area-inset-bottom, 0px)); gap: 22px; font-size: 16px; border-width: 0 0 0 2px; box-shadow: 0 0 0 100vmax rgba(48,4,27,.4); transform: translateX(32px); }
  .talk.on { transform: none; }
  .talk-head b { font-size: 26px; }
  .talk-screen { gap: 18px; }
  .talk-lead { font-size: 17px; }
  .talk-label { font-size: 13px; }
  .talk-list { gap: 8px; }
  .talk-list button { min-height: 64px; padding: 10px 18px; }
  .talk-list b { font-size: 18px; }
  .talk-list small { font-size: 14px; }
  .talk-ways { gap: 10px; }
  .talk-ways > * { min-height: 88px; font-size: 15px; gap: 8px; }
  .talk-foot { font-size: 14px; }
  .talk-video { height: 280px; }
  .talk-video-tag { top: 14px; left: 14px; font-size: 13px; }
  .talk-play { top: 84px; width: 76px; height: 76px; margin-left: -38px; }
  .talk-sub { left: 16px; right: 16px; bottom: 18px; }
  .talk-sub span { font-size: 16px; }
  .talk-h { font-size: 32px; }
  .talk-raison { font-size: 17px; }
  .talk-send { min-height: 60px; font-size: 17px; }
  .talk-row2-big > * { min-height: 56px; font-size: 16px; }
  .talk textarea, .talk input[type="text"] { font-size: 16px; padding: 12px 14px; }
  .talk input[type="text"] { min-height: 54px; }
  .talk-field label { font-size: 14px; }
  .talk-help, .talk-error, .talk-consent { font-size: 14px; }
  .talk-link { font-size: 15px; }
  .talk-note { font-size: 13px; }
  .talk-quote { font-size: 24px; }
  .talk-bars { height: 84px; gap: 5px; }
  .talk-bars span { width: 6px; }
  .talk-time { font-size: 22px; }
  .talk-rec { font-size: 15px; }
  .talk-rec button { width: 100px; height: 100px; }
  .talk-row2 button { min-height: 50px; font-size: 15px; }
  .talk-star { font-size: 120px; height: 72px; }
  .talk-merci-h { font-size: 44px; }
  .talk-btn { min-height: 56px; font-size: 16px; }
}

/* Tablette : frame IVP-Home / Tablette 768 (1 rem = 10 px à 768 px) */
@media (max-width: 1024px) {
  :root { font-size: min(1.30208vw, 12px); --peek: 11.2rem; }
  .footer { padding-left: 4rem; padding-right: 4rem; }
  .partners { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 4rem 0; }
  .partners ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 4.8rem; padding: 4.8rem 0; }
  .f-id .f-tagline { font-size: 3.6rem; }
  .header { padding: 2.4rem 4rem; }
  /* Tablette et mobile : navigation repliée dans le burger, le panneau prend toute la largeur */
  .nav a, .nav-trigger { display: none; }
  .burger { display: block; }
  .mega { left: 0 !important; right: 0; width: auto; top: 100%; max-height: calc(100dvh - 8rem); overflow-y: auto; }
  .mega-in { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; padding: 3.2rem 4rem; }
  .mega-main .mobile-only { display: list-item; }
  .mega-main .sep { margin-top: 1.2rem; padding-top: 2.4rem; border-top: 1px solid rgba(48,4,27,.15); }
  .mega-main { font-size: 2rem; }
  .header .logo { width: 8rem; }
  .nav { gap: 2.4rem; }
  .title-xl { font-size: 4.8rem; }
  .hero { padding: 3.2rem 4rem 8rem; gap: 5.6rem; }
  .hero h1 { font-size: 5.6rem; }
  .intro { width: 100%; font-size: 2rem; }
  .une { gap: 1.6rem; }
  .hero[data-v="1"] { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 3.2rem; padding-right: 0; padding-bottom: 6.4rem; }
  .hero[data-v="1"] h1 { font-size: 4.4rem; line-height: 1; }
  .hero[data-v="1"] .intro { font-size: 1.7rem; }
  .hero[data-v="1"] .une { padding-right: 4rem; }
  .une-nav { padding-right: 4rem; }
  .tile { width: 22.4rem; height: 38rem; padding: 2rem; }
  .tile h2 { font-size: 2.2rem; }
  .tile p, .more { font-size: 1.5rem; }
  .tag { font-size: 1.1rem; }
  .tile-chiffre .big { font-size: 10rem; }
  .tile-chiffre p { font-size: 1.7rem; margin: 1.2rem 0 2rem; }
  .tile-etude p { margin: 1.2rem 0 2rem; }
  .tile-entretien h2 { margin-bottom: 2rem; font-size: 2.6rem; }
  .manifeste { padding: 6.4rem 4rem 12.8rem; }
  .manifeste p { font-size: 4rem; }
  .chiffres { padding: 9.6rem 4rem 8rem; gap: 4rem; }
  .chiffres h2 { font-size: 4.4rem; }
  .row { grid-template-columns: 16rem 18rem minmax(0, 1fr); gap: 3.2rem; padding: 2rem 0; }
  .valeur { font-size: 7.2rem; }
  .visuel { height: 13rem; }
  #v-foule svg { width: 13rem; } #v-tv svg { width: 14.4rem; } #v-hemi svg { width: 11.2rem; }
  .libelle { font-size: 2.2rem; }
  .chiffres[data-v="2"] .rows { gap: 0 3.2rem; }
  .chiffres[data-v="2"] .row, .chiffres[data-v="2"] .row:last-child { gap: 1.6rem; padding-top: 2.4rem; }
  .chiffres[data-v="2"] .visuel { height: 14rem; }
  .chiffres[data-v="2"] #v-foule svg { width: 14rem; } .chiffres[data-v="2"] #v-tv svg { width: 16rem; } .chiffres[data-v="2"] #v-hemi svg { width: 12.4rem; }
  .chiffres[data-v="2"] .valeur { font-size: 6.8rem; }
  .chiffres[data-v="2"] .libelle { font-size: 1.9rem; }
  .constat { padding: 13.6rem 4rem; }
  .constat .voix { width: 131.8rem; height: 53rem; }
  .panel { padding: 4rem; font-size: 2.8rem; }
  .piliers { padding: 6.4rem 4rem; gap: 3.2rem; }
  .piliers h2 { font-size: 4rem; }
  .cards { gap: 12.8rem; }
  .card { justify-content: flex-start; gap: 3.2rem; padding: 3.2rem; }
  .card-media { width: 28rem; flex: none; gap: 2rem; }
  .num { font-size: 8.4rem; }
  .card-media img { width: 28rem; height: 18.7rem; }
  .card-text { flex: 1 1 0; min-width: 0; width: auto; gap: 1.6rem; font-size: 1.6rem; }
  .card-text h3 { font-size: 2.8rem; }
  .pubs { padding: 8rem 4rem; gap: 5.6rem; }
  .pubs-head { grid-template-columns: minmax(0, 1fr); }
  .pubs-head h2 { font-size: 4.8rem; }
  .pubs-lead { font-size: 2.8rem; }
  .pubs-text { font-size: 1.8rem; }
  .pub-block { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "visual"; gap: 4rem; padding: 5.6rem 0; }
  .pub-visual { height: auto; }
  .pub-visual.mosaic { padding-top: 6.4rem; }
  .mosaic { gap: 1.6rem; }
  .contrib { padding: 2rem 1.8rem 2.4rem; gap: 1.2rem; }
  .contrib h4 { font-size: 2.2rem; }
  .contrib p { font-size: 1.5rem; }
}

/* Mobile : frame IVP-Home / Mobile 375 (1 rem = 10 px à 375 px) */
@media (max-width: 600px) {
  .talk-fab { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 52px; padding: 0 18px; }
  .talk { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 90dvh; padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-width: 2px 0 0; box-shadow: 0 -12px 40px rgba(48,4,27,.35); }
  :root { font-size: min(2.66667vw, 16px); --peek: 0rem; }
  .footer { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .partners ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .partner { height: 5.6rem; }
  .f-id .f-tagline { font-size: 3rem; }
  .f-nav { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .f-nav h3 { font-size: 2.2rem; margin-bottom: 1.2rem; }
  .footer-bottom { flex-direction: column; gap: 1.2rem; }
  .footer-bottom ul { gap: 1.6rem; }
  .wordmark { padding: 1.6rem 0 calc(8rem + env(safe-area-inset-bottom, 0px)); }
  body { font-size: 1.6rem; }
  .btn { font-size: 1.6rem; }
  .title-xl { font-size: 3.6rem; }
  .header { padding: 2.4rem max(16px, env(safe-area-inset-right, 0px)) 2.4rem max(16px, env(safe-area-inset-left, 0px)); }
  .header .logo { width: 7.2rem; }
  .nav { gap: 1.6rem; }
  .mega-in { padding: 2.4rem max(16px, env(safe-area-inset-right, 0px)) 3.2rem max(16px, env(safe-area-inset-left, 0px)); }
  .nav .btn { padding: .8rem 1.6rem; }
  .burger { display: block; }
  .hero, .manifeste, .chiffres, .constat, .piliers, .pubs { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  /* Mobile : texte au-dessus, cartes dessous */
  .hero, .hero[data-v="1"] { display: flex; flex-direction: column; align-items: stretch; gap: 4rem; padding-top: 1.6rem; padding-bottom: 4.8rem; padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hero-text, .hero[data-v] .hero-text { align-items: flex-start; text-align: left; gap: 2rem; }
  .hero h1, .hero[data-v] h1 { font-size: 4rem; line-height: 1.1; }
  .intro, .hero[data-v] .intro { width: 100%; font-size: 1.8rem; }
  .cta, .hero[data-v] .cta { justify-content: flex-start; gap: 1.2rem; }
  .une-nav, .hero[data-v] .une-nav { display: none; }
  /* Mobile : les 3 contenus défilent au doigt, la carte suivante dépasse */
  .une, .hero[data-v] .une { justify-content: flex-start; gap: 1.2rem; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 0 max(16px, env(safe-area-inset-left, 0px)) 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); scrollbar-width: none; }
  .une::-webkit-scrollbar { display: none; }
  .une li { flex: none; scroll-snap-align: start; transform: none !important; }
  .tile { width: 27rem; height: 40rem; padding: 2rem; }
  .tile:hover { transform: none; box-shadow: none; }
  .tile h2 { font-size: 2.4rem; }
  .tile p, .more { font-size: 1.6rem; }
  .tile-chiffre .big { font-size: 11rem; }
  .tile-entretien h2 { font-size: 3rem; }
  .manifeste { padding-block: 4.8rem 9.6rem; }
  .manifeste p { font-size: 2.8rem; }
  .chiffres { padding-block: 7.2rem 6.4rem; gap: 3.2rem; }
  .chiffres h2 { font-size: 3.2rem; }
  /* Mobile : illustration à gauche, chiffre et texte empilés à droite */
  .row { grid-template-columns: 10.4rem minmax(0, 1fr); grid-template-areas: "visuel valeur" "visuel libelle"; gap: .4rem 2rem; padding: 2rem 0; }
  .valeur { font-size: 5.6rem; align-self: end; }
  .visuel { height: 10.4rem; }
  #v-foule svg { width: 10.4rem; } #v-tv svg { width: 10.4rem; } #v-hemi svg { width: 8.8rem; }
  .libelle { font-size: 1.7rem; align-self: start; }
  /* Version 2 sur mobile : les 3 colonnes restent côte à côte, en petit */
  /* Mobile : les trois chiffres s'empilent (illustration, chiffre, explication) */
  .chiffres[data-v="2"] .rows { grid-template-columns: minmax(0, 1fr); gap: 4.8rem; }
  .chiffres[data-v="2"] .row, .chiffres[data-v="2"] .row:last-child { gap: 1.2rem; padding-top: 0; }
  .chiffres[data-v="2"] .visuel { height: auto; }
  .chiffres[data-v="2"] #v-foule svg { width: 16rem; } .chiffres[data-v="2"] #v-tv svg { width: 20rem; } .chiffres[data-v="2"] #v-hemi svg { width: 14rem; }
  .chiffres[data-v="2"] .valeur { align-self: start; }
  .chiffres[data-v="2"] .libelle { text-wrap: pretty; }
  .constat { padding-block: 8rem; }
  .constat .voix { width: 82.4rem; height: 33.2rem; }
  .panel { padding: 3.2rem 2.4rem; font-size: 2.2rem; }
  .piliers { padding-block: 4.8rem; gap: 2.4rem; }
  .piliers-head { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .piliers h2 { font-size: 3.2rem; }
  .cards { gap: 2.4rem; }
  .card { position: static; flex-direction: column; gap: 2.4rem; padding: 2.4rem; }
  .card-media { width: 100%; gap: 1.6rem; }
  .num { font-size: 7.2rem; line-height: 1.28; }
  .card-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .card-text { flex: none; width: 100%; justify-content: flex-start; }
  .card-text h3 { font-size: 2.4rem; }
  .pubs { padding-block: 6.4rem; gap: 4rem; }
  .pubs-head h2 { font-size: 3.6rem; }
  .pubs-lead { font-size: 2.2rem; }
  .pubs-text { font-size: 1.6rem; }
  .pub-block { gap: 3.2rem; padding: 4.8rem 0; }
  .pub-text h3 { font-size: 2.6rem; }
  .pub-visual { height: auto; }
  .pub-visual.mosaic { padding-top: 6rem; }
  .book { --open-w: 17.2rem; }
  .books .book:not(.open) { --spine: 4.8rem !important; }
  /* Accueil mobile : le texte, puis l’étagère animée, comme sur la maquette */
  .pubs { display: flex; flex-direction: column; }
  .pub-text-home { order: 1; }
  .pub-visual-home { order: 2; overflow: hidden; }
  .pubs-grid { order: 3; }
  .cover { padding: 2rem 1.6rem; }
  .cover h4 { font-size: 2.2rem; }
  .cover p { font-size: 1.3rem; }
  .spine { gap: 1rem; padding: 2.4rem 0; }
  .spine::before { top: .8rem; }
  .spine::after { bottom: .8rem; }
  .spine b { font-size: 1.8rem; }
  .spine i { font-size: 1rem; }
  .shelf { height: 1.6rem; }
  .pub-visual.mosaic { padding-top: 4rem; }
  .mosaic { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .contrib, .contrib:nth-child(odd) { --y: 0rem; padding: 2.4rem 2rem; }
  .contrib .tag { margin-bottom: 1.2rem; font-size: 1.1rem; }
  .contrib h4 { font-size: 2.4rem; }
  .contrib p { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .talk-rec button.recording { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* Liens : boutons en <a>, logo cliquable, page en cours dans la navigation */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.logo-link { display: block; line-height: 0; }
.nav a[aria-current="page"], .mega-main a[aria-current="page"] { text-decoration: underline; text-underline-offset: .5rem; text-decoration-thickness: 2px; }

/* ==========================================================================
   Pages intérieures : composants dérivés de l'accueil
   (sections de couleur, hero bleu, texte en deux colonnes, grandes phrases,
   chiffres, cartes, équipe, onglets, formulaires, bandeau d'appel)
   ========================================================================== */
.sec { padding: 12rem 6.4rem; display: flex; flex-direction: column; gap: 6.4rem; }
.bg-bleu { background: var(--bleu); color: var(--bordeaux); }
.bg-beige { background: var(--beige); color: var(--bordeaux); }
.bg-bordeaux { background: var(--bordeaux); color: var(--beige); }
.bg-rouge { background: var(--rouge); color: var(--bordeaux); }
.bg-blanc { background: var(--blanc); color: var(--bordeaux); }
.kicker { font-weight: 500; font-size: 1.4rem; letter-spacing: .1em; text-transform: uppercase; }
.bg-bordeaux .kicker { color: var(--rouge); }
.h2 { max-width: 110rem; font-weight: var(--w-title); font-size: 5.6rem; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.h3 { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.12; text-wrap: balance; }
.prose { display: flex; flex-direction: column; gap: 2rem; max-width: 72rem; font-size: 2rem; line-height: 1.45; }
.prose strong, .prose b { font-weight: var(--w-title); }
.lead { font-size: 3.2rem; line-height: 1.2; text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; gap: 1.6rem; }

/* Hero des pages intérieures : bleu, titre à gauche, chapô et intro en dessous */
.p-hero { background: var(--bleu); color: var(--bordeaux); padding: 6.4rem 6.4rem 12rem; display: flex; flex-direction: column; gap: 3.2rem; }
.p-hero h1 { max-width: 120rem; font-weight: var(--w-title); font-size: 8rem; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.p-hero h1.long { font-size: 6.4rem; line-height: 1.02; }
.p-hero-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6.4rem; align-items: start; margin-top: 2.4rem; padding-top: 3.2rem; border-top: 1px solid rgba(48,4,27,.25); }
.p-hero-cols .lead { max-width: 60rem; }
.p-hero-cols .prose { font-size: 2rem; }
.badge { align-self: flex-start; padding: .6rem 1.4rem; font-weight: 500; font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; background: var(--rouge); color: var(--bordeaux); }

/* Titre à gauche, texte à droite */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6.4rem; align-items: start; }
.split > .h2 { position: sticky; top: calc(var(--hdr, 0px) + 4rem); }

/* Grande phrase, éventuellement colorée mot à mot au défilement (.js-words) */
.statement { max-width: 120rem; font-weight: var(--w-title); font-size: 4.8rem; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.statement.small { font-size: 3.6rem; }

/* Étiquettes (métiers, transformations…) */
.tags { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.tags li { padding: .8rem 1.6rem; font-size: 1.8rem; border: 1px solid currentColor; }
.tags.big { gap: 1.2rem 1.6rem; }
.tags.big li { padding: 1.2rem 2.4rem; font-weight: var(--w-title); font-size: 4rem; line-height: 1.1; letter-spacing: -.01em; border-width: 2px; transition: background-color .25s, color .25s; }
.bg-bordeaux .tags.big li:nth-child(3n+1) { color: var(--rouge); }
.bg-bordeaux .tags.big li:nth-child(3n+2) { color: var(--bleu); }
.bg-bordeaux .tags.big li:hover { background: var(--beige); color: var(--bordeaux); }

/* Chiffres : petite mention au-dessus, très grand chiffre, explication */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.8rem; margin: 0; padding: 0; list-style: none; }
.stats li { display: flex; flex-direction: column; gap: 1.2rem; }
.stats small { font-size: 1.8rem; }
.stats b { font-weight: var(--w-title); font-size: 11.2rem; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats span { max-width: 36rem; font-size: 2rem; line-height: 1.35; }
.question { max-width: 100rem; padding: 4rem 4.8rem; font-weight: var(--w-title); font-size: 3.6rem; line-height: 1.2; text-wrap: balance; background: var(--bordeaux); color: var(--beige); }


/* Trois colonnes de cartes simples */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem; margin: 0; padding: 0; list-style: none; }
.col-card { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem; background: var(--bg, var(--blanc)); color: var(--fg, var(--bordeaux)); }
.col-card .num { font-weight: 500; font-size: 6.4rem; line-height: 1; }
.col-card p { font-size: 1.8rem; line-height: 1.45; }

/* Bandeau d'appel (fond rouge) */
.cta-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6.4rem; align-items: end; }
.cta-band .prose { font-size: 2rem; }

/* Catalogue des études */
.catalog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3.2rem; margin: 0; padding: 0; list-style: none; }
.pub-card { display: flex; flex-direction: column; gap: 1.6rem; }
.pub-cover { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem; background: var(--bg); color: var(--fg); box-shadow: inset 1.2rem 0 0 rgba(0,0,0,.12); transition: transform .35s var(--ease); }
.pub-card:hover .pub-cover { transform: translateY(-.8rem); }
.pub-cover b { font-weight: var(--w-title); font-size: 2.2rem; line-height: 1.1; text-wrap: balance; }
.pub-cover img { width: 7.2rem; height: auto; }
.pub-card h3 { font-weight: var(--w-title); font-size: 2rem; line-height: 1.2; }
.pub-card p { font-size: 1.6rem; color: inherit; opacity: .8; }
.pub-meta { font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; }
.pub-link { font-weight: 500; font-size: 1.6rem; text-decoration: underline; text-underline-offset: .4rem; }
.pub-card.soon .pub-cover { opacity: .55; }

/* Mise en avant d'une étude (première enquête) */
.feature { display: grid; grid-template-columns: 44rem minmax(0, 1fr); gap: 8rem; align-items: center; }
.feature .pub-cover { aspect-ratio: 3 / 4; padding: 4rem 3.2rem; }
.feature .pub-cover b { font-size: 5.6rem; line-height: 1; }

/* Étapes numérotées (vraie séquence) */
.steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 3.2rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; flex-direction: column; gap: 1.2rem; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font-weight: 500; font-size: 4.8rem; line-height: 1; }
.steps h3 { font-weight: var(--w-title); font-size: 2.4rem; line-height: 1.15; }
.steps p { font-size: 1.7rem; line-height: 1.45; }

/* Équipe */
.team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.member { display: flex; flex-direction: column; gap: 1.2rem; }
.member-photo { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--bg); color: var(--fg); font-weight: var(--w-title); font-size: 6.4rem; letter-spacing: -.02em; }
.member b { font-weight: var(--w-title); font-size: 2.2rem; line-height: 1.15; }
.member span { font-size: 1.6rem; opacity: .85; }
.bridge { display: grid; grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr); align-items: stretch; }
.bridge p { padding: 4rem; font-size: 2.2rem; line-height: 1.4; background: var(--bg); color: var(--fg); }
.bridge i { display: grid; place-items: center; font-style: normal; font-size: 4rem; }

/* Pages Plateforme : onglets des trois formats */
.tabs-list { display: flex; flex-wrap: wrap; gap: .8rem; }
.tabs-list [role="tab"] { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 24rem; padding: 1.6rem 2.4rem; text-align: left; font: inherit; color: var(--bordeaux); background: transparent; border: 2px solid var(--bordeaux); cursor: pointer; }
.tabs-list [role="tab"] small { font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; }
.tabs-list [role="tab"] b { font-weight: var(--w-title); font-size: 2.2rem; }
.tabs-list [role="tab"][aria-selected="true"] { background: var(--bordeaux); color: var(--beige); }
.tab-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6.4rem; padding: 5.6rem; background: var(--blanc); color: var(--bordeaux); }
.tab-panel .h3 { font-size: 5.6rem; line-height: 1; }
.promise { padding: 2.4rem; font-weight: var(--w-title); font-size: 2rem; line-height: 1.35; background: var(--beige); }
.struct { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.struct li { display: grid; grid-template-columns: 26rem minmax(0, 1fr); gap: 2.4rem; padding: 1.2rem 0; font-size: 1.7rem; line-height: 1.4; }
.struct li b { font-weight: var(--w-title); }
.example { display: flex; flex-direction: column; gap: .8rem; padding: 2.4rem; border: 2px dashed var(--bordeaux); }
.example b { font-weight: var(--w-title); font-size: 2.2rem; line-height: 1.2; }
.example i { font-size: 1.6rem; }
.note { font-size: 1.6rem; line-height: 1.45; }

/* Formulaires des pages (contribution, être informé·e) */
.form { display: flex; flex-direction: column; gap: 2rem; max-width: 76rem; }
.form label, .form legend { font-weight: 500; font-size: 1.6rem; }
.form input[type="text"], .form input[type="email"], .form textarea { width: 100%; padding: 1.4rem 1.6rem; font: 400 1.8rem/1.45 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); }
.form textarea { resize: vertical; }
.form .field { display: flex; flex-direction: column; gap: .8rem; }
.form .hint { font-size: 1.4rem; opacity: .8; }
.form fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.choices label { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 2rem; background: var(--blanc); border: 2px solid var(--bordeaux); cursor: pointer; }
.choices input { position: absolute; opacity: 0; }
.choices label:has(input:checked) { background: var(--bordeaux); color: var(--beige); }
.choices label:has(input:focus-visible) { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
.choices b { font-weight: var(--w-title); font-size: 2rem; }
.choices small { font-size: 1.4rem; }
.form-error { font-weight: 600; font-size: 1.6rem; color: #B4001E; }
.bg-rouge .form-error, .bg-bordeaux .form-error { color: var(--blanc); }
.form-done { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem; background: var(--blanc); color: var(--bordeaux); max-width: 76rem; }
.form-done b { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.1; }
.inline-form { display: flex; gap: 1.2rem; max-width: 64rem; }
.inline-form input { flex: 1 1 auto; min-width: 0; padding: 1.4rem 1.6rem; font: 400 1.8rem/1.3 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--bordeaux); }

/* Page Contribuer : grandes lignes cliquables */
.ways { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.way { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 24rem; gap: 4.8rem; align-items: start; padding: 4.8rem 2.4rem; border-top: 2px solid var(--bordeaux); transition: background-color .3s; }
.ways li:last-child .way { border-bottom: 2px solid var(--bordeaux); }
.way:hover { background: var(--bleu); }
.way h2 { font-weight: var(--w-title); font-size: 4rem; line-height: 1.1; text-wrap: balance; }
.way h2 i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.way:hover h2 i { transform: translateX(1rem); }
.way p { font-size: 1.8rem; line-height: 1.45; }
.partners-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.partners-grid li { height: 10rem; display: grid; place-items: center; font-size: 1.4rem; color: var(--gris); border: 1px dashed rgba(228,228,228,.4); }

/* Tablette */
@media (max-width: 1024px) {
  .sec { padding: 8rem 4rem; gap: 4.8rem; }
  .p-hero { padding: 4.8rem 4rem 8rem; }
  .p-hero h1 { font-size: 6.4rem; }
  .p-hero h1.long { font-size: 5.2rem; }
  .p-hero-cols, .split, .cta-band { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .split > .h2 { position: static; }
  .h2 { font-size: 4.8rem; }
  .statement { font-size: 4rem; }
  .tags.big li { font-size: 3.2rem; }
  .stats b { font-size: 8.8rem; }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 30rem minmax(0, 1fr); gap: 4.8rem; }
  .feature .pub-cover b { font-size: 4rem; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab-panel { grid-template-columns: minmax(0, 1fr); padding: 4rem; gap: 4rem; }
  .way { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px) {
  .sec, .p-hero { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .sec { padding-top: 6.4rem; padding-bottom: 6.4rem; gap: 4rem; }
  .p-hero { padding-top: 3.2rem; padding-bottom: 6.4rem; gap: 2.4rem; }
  .p-hero h1 { font-size: 4.8rem; }
  .p-hero h1.long { font-size: 3.6rem; }
  .h2 { font-size: 3.4rem; }
  .h3 { font-size: 2.6rem; }
  .lead { font-size: 2.4rem; }
  .prose, .p-hero-cols .prose, .cta-band .prose { font-size: 1.7rem; }
  .statement { font-size: 3rem; }
  .statement.small { font-size: 2.6rem; }
  .tags li { font-size: 1.5rem; }
  .tags.big li { padding: .8rem 1.4rem; font-size: 2.2rem; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .stats b { font-size: 8rem; }
  .stats span { font-size: 1.7rem; }
  .question { padding: 2.4rem; font-size: 2.4rem; }
  .cols3, .steps { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .col-card { padding: 2.4rem; }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
  .pub-cover { padding: 1.4rem; }
  .pub-cover b { font-size: 1.8rem; }
  .pub-cover img { width: 4.8rem; }
  .pub-card h3 { font-size: 1.7rem; }
  .pub-card p { font-size: 1.4rem; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .pub-cover { max-width: 24rem; }
  .feature .pub-cover b { font-size: 3.2rem; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.2rem; }
  .member-photo { font-size: 4.8rem; }
  .member b { font-size: 1.9rem; }
  .member span { font-size: 1.5rem; }
  .bridge { grid-template-columns: minmax(0, 1fr); }
  .bridge p { padding: 2.4rem; font-size: 1.8rem; }
  .bridge i { transform: rotate(90deg); padding: 1.2rem 0; }
  .tabs-list [role="tab"] { min-width: 0; flex: 1 1 100%; padding: 1.2rem 1.6rem; }
  .tab-panel { padding: 2.4rem 1.6rem; }
  .tab-panel .h3 { font-size: 3.6rem; }
  .struct li { grid-template-columns: minmax(0, 1fr); gap: .4rem; font-size: 1.6rem; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .inline-form { flex-direction: column; }
  .way { padding: 3.2rem 0; }
  .way h2 { font-size: 3rem; }
  .way p { font-size: 1.6rem; }
  .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .partners-grid li { height: 7.2rem; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-form { flex-wrap: wrap; }
.inline-form .form-error { flex-basis: 100%; }
.way > .btn { justify-self: end; }
@media (max-width: 1024px) { .way > .btn { justify-self: start; } }

/* Illustrations des chiffres sur les pages intérieures (« Pourquoi maintenant ? ») */
.stat-illu { height: 22rem; display: flex; align-items: flex-end; margin-bottom: 1.6rem; }
.stat-illu svg { display: block; height: auto; overflow: visible; }
.illu-hemi svg { width: 18.4rem; } .illu-tv svg { width: 24rem; } .illu-etudes svg { width: 28.8rem; }
.lit .dot-k { fill: var(--beige); }
.illu-label { font: 500 10.5px var(--font); fill: currentColor; }
/* sur fond bleu, les ronds « éteints » passent en bordeaux léger (sauf dans l'écran de la télévision) */
.bg-bleu [data-illu]:not([data-illu="tv"]) .dot { fill: rgba(48,4,27,.18); }
.bg-bleu [data-illu] .lit .dot-k { fill: var(--bordeaux); }
.bg-bleu [data-illu] .lit .dot-r { fill: var(--rouge); }
@media (max-width: 1024px) {
  .stat-illu { height: 16rem; }
  .illu-hemi svg { width: 13.6rem; } .illu-tv svg { width: 17.6rem; } .illu-etudes svg { width: 21rem; }
}
@media (max-width: 600px) {
  .stat-illu { height: auto; margin-bottom: .8rem; }
  .illu-hemi svg { width: 16rem; } .illu-tv svg { width: 20rem; } .illu-etudes svg { width: 24rem; }
}

/* Phrases dont un mot se surligne de gauche à droite à l'arrivée (« des / aux / avec ») */
.hl-lines { display: flex; flex-direction: column; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.hl-lines li { --hl: var(--bleu); font-weight: var(--w-title); font-size: 5.6rem; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.hl-lines li:last-child { --hl: var(--rouge); }
.hl-lines mark { color: inherit; padding: 0 .8rem; margin: 0 -.4rem; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 0% 100%; transition: background-size .9s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-lines.on mark { background-size: 100% 100%; }
.hl-lines li:nth-child(2) mark { transition-delay: .6s; }
.hl-lines li:nth-child(3) mark { transition-delay: 1.2s; }
@media (max-width: 1024px) { .hl-lines li { font-size: 4.4rem; } }
@media (max-width: 600px) { .hl-lines li { font-size: 3rem; } }

/* Le mot « voix » en fond derrière un bloc de texte (comme le bloc « constat » de l'accueil) */
.clip-x { overflow-x: clip; }
.voix-bg { position: relative; padding: 13rem 0; }
.voix-bg .voix { position: absolute; left: 50%; top: 50%; width: 140rem; max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
.voix-bg .voix { width: 118rem; }
.voix-bg > :not(.voix) { position: relative; }
@media (max-width: 1024px) { .voix-bg { padding: 10rem 0; } .voix-bg .voix { width: 96rem; } }
@media (max-width: 600px) { .voix-bg { padding: 7.2rem 0; } .voix-bg .voix { width: 64rem; } }

/* « Pourquoi maintenant ? » : section « tournant français » — 50 ans en très grand, texte, portrait bichrome, bandeau défilant */
.tournant { gap: 5.6rem; }
.tournant-grid { display: grid; grid-template-columns: minmax(0, 1fr) 28rem; gap: 8rem; align-items: end; }
.big-years { display: flex; flex-direction: column; font-weight: var(--w-title); line-height: .8; letter-spacing: -.05em; color: var(--bordeaux); }
.big-years b { font-weight: inherit; font-size: 20rem; }
.big-years span { font-size: 7.2rem; letter-spacing: -.03em; color: var(--rouge); }
.tournant .prose { max-width: 84rem; }
.tournant .h2 { font-size: 5.6rem; }
.tournant .lead { font-size: 3rem; }
.duo { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--rouge); }
.duo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: multiply; }
.ticker { overflow: hidden; color: var(--bordeaux); border-top: 2px solid var(--bordeaux); border-bottom: 2px solid var(--bordeaux); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker li { display: flex; align-items: center; padding: 2.8rem 0; font-weight: var(--w-title); font-size: 5.6rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.ticker li::after { content: ""; width: 1.6rem; height: 1.6rem; margin: 0 4.8rem; border-radius: 50%; background: var(--rouge); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; }
  .ticker ul[aria-hidden] { display: none; }
  .ticker ul { flex-wrap: wrap; padding: 0 6.4rem; }
}
@media (max-width: 1024px) {
  .tournant { gap: 5.6rem; }
  .tournant-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; }
  .tournant .h2 { font-size: 4.4rem; }
  .tournant .lead { font-size: 2.4rem; }
  .big-years b { font-size: 16rem; }
  .big-years span { font-size: 6rem; }
  .ticker li { font-size: 4.8rem; padding: 2.4rem 0; }
}
@media (max-width: 600px) {
  .tournant { gap: 4rem; }
  .tournant .h2 { font-size: 3.2rem; }
  .tournant .lead { font-size: 2rem; }
  .tournant-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .duo { width: 44%; }
  .big-years b { font-size: 12rem; }
  .big-years span { font-size: 4.8rem; }
  .ticker li { font-size: 3.2rem; padding: 2rem 0; }
  .ticker li::after { width: 1rem; height: 1rem; margin: 0 2.4rem; }
}
.tournant-end { max-width: 100rem; }
/* Mots surlignés de gauche à droite à l'arrivée (bloc .marked avec .js-mark) */
.marked mark { color: inherit; padding: 0 .6rem; margin: 0 -.3rem; background: linear-gradient(var(--bleu), var(--bleu)) no-repeat 0 0 / 0% 100%; transition: background-size .9s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.marked.on mark { background-size: 100% 100%; }
.marked mark + mark, .marked mark:nth-of-type(2) { transition-delay: .6s; }

/* Page Équipe : fondateur·ices au défilement. Les portraits défilent au centre et s'ouvrent en apparaissant ;
   à droite, le numéro, le nom et l'expertise restent fixes et changent à chaque portrait. */
.ts-sec { padding-bottom: 4rem; }
.ts { display: grid; grid-template-columns: 22rem 44rem minmax(0, 1fr); gap: 6.4rem; align-items: start; }
.ts-label { position: sticky; top: calc(var(--hdr, 0px) + 12rem); color: var(--rouge); }
.ts-photos { display: flex; flex-direction: column; gap: 12rem; margin: 0; padding: 0 0 30vh; list-style: none; }
.ts-photo { margin: 0; }
.ts-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); clip-path: inset(22% 10% 22% 10%); transition: clip-path 1.1s var(--ease); }
.ts-frame canvas { display: block; width: 100%; height: 100%; transform: scale(1.18); transition: transform 1.4s var(--ease); }
.ts-photo.in .ts-frame { clip-path: inset(0 0 0 0); }
.ts-photo.in canvas { transform: none; }
.ts-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts-info { position: sticky; top: calc(50vh - 14rem); display: flex; flex-direction: column; gap: 2rem; }
.ts-num { font-weight: 500; font-size: 1.6rem; letter-spacing: .08em; color: var(--rouge); font-variant-numeric: tabular-nums; }
.ts-names { position: relative; height: 22rem; overflow: hidden; }
.ts-name { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; font-weight: var(--w-title); font-size: 8rem; line-height: .95; letter-spacing: -.03em; color: var(--beige); transform: translateY(102%); transition: transform .8s var(--ease); }
.ts-name.is-on { transform: none; }
.ts-name.is-past { transform: translateY(-102%); }
.ts-roles { position: relative; height: 3.2rem; }
.ts-role { position: absolute; left: 0; top: 0; font-weight: 500; font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); opacity: 0; transform: translateY(1rem); transition: opacity .4s ease, transform .5s var(--ease); }
.ts-role.is-on { opacity: 1; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
  .ts-frame { clip-path: none; }
  .ts-frame canvas { transform: none; }
}
@media (max-width: 1024px) {
  .ts { grid-template-columns: 30rem minmax(0, 1fr); gap: 4rem; }
  .ts-label { grid-column: 1 / -1; position: static; }
  .ts-photos { gap: 8rem; padding-bottom: 20vh; }
  .ts-name { font-size: 5.6rem; }
  .ts-names { height: 16rem; }
}
@media (max-width: 600px) {
  .ts { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .ts-info { display: none; }
  .ts-photos { gap: 4.8rem; padding-bottom: 0; }
  .ts-cap { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: flex; flex-direction: column; gap: .6rem; margin-top: 1.6rem; }
  .ts-cap-num { font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; color: var(--rouge); }
  .ts-cap b { font-weight: var(--w-title); font-size: 3.6rem; line-height: 1; color: var(--beige); }
  .ts-cap span:last-child { font-weight: 500; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
}
/* Au défilement : quand un portrait devient actif (au milieu de l'écran), la vraie photo remplace la trame en fondu */
.ts-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.ts-photo.is-active .ts-real { opacity: 1; transition-delay: .35s; }
/* Titre puis texte, l'un sous l'autre, alignés à gauche */
.stack-head { display: flex; flex-direction: column; gap: 2.4rem; }
.stack-head .prose { max-width: 80rem; gap: 1.2rem; }

/* Nos publications : intro sur trois colonnes, filtres, bascule étagère / catalogue */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.8rem; max-width: none !important; }
.pub-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; padding: 2rem 0; border-top: 1px solid rgba(48,4,27,.2); border-bottom: 1px solid rgba(48,4,27,.2); }
.pub-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; }
.seg { display: inline-flex; border: 2px solid var(--bordeaux); }
.seg button { padding: 1rem 2rem; font: 500 1.6rem/1 var(--font); color: var(--bordeaux); background: transparent; border: 0; cursor: pointer; }
.seg button + button { border-left: 2px solid var(--bordeaux); }
.seg button[aria-pressed="true"] { background: var(--bordeaux); color: var(--beige); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--blanc); }
.pub-year { display: inline-flex; align-items: center; gap: 1.2rem; font-weight: 500; font-size: 1.6rem; }
.pub-year select { padding: .9rem 3.6rem .9rem 1.4rem; font: 500 1.6rem/1 var(--font); color: var(--bordeaux); background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%2330041B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1.2rem center / 1.2rem; border: 2px solid var(--bordeaux); border-radius: 0; appearance: none; cursor: pointer; }
.pub-empty { font-size: 2rem; padding: 4rem 0; }
.shelf-view { display: flex; flex-direction: column; }
.books-wide { gap: 1.2rem; }
.books-wide .book { --open-w: 42rem; }
.books-wide .cover { padding: 4rem 3.2rem; }
.books-wide .cover h4 { font-size: 4rem; }
.books-wide .cover p { font-size: 1.8rem; }
.books-wide .spine b { font-size: 3rem; }
.cover-link { display: inline-block; margin-top: 2rem; font-weight: 500; font-size: 1.6rem; text-decoration: underline; text-underline-offset: .4rem; color: inherit; }
@media (max-width: 1024px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .books-wide .book { --open-w: 32rem; }
  .books-wide .book:not(.open) { --spine: 6.4rem !important; }
}
@media (max-width: 600px) {
  .pub-tools { flex-direction: column; align-items: stretch; }
  .seg { display: flex; }
  .seg button { flex: 1 1 0; padding: 1rem .8rem; font-size: 1.5rem; }
  .books { gap: .6rem; }
  .books .book { --open-w: 15.6rem; }
  .books .book:not(.open) { --spine: 3.8rem !important; }
  .books .spine b { font-size: 1.6rem !important; }
  .books .spine img { display: none; }
  .books-wide .cover { padding: 2rem 1.6rem; }
  .books-wide .cover h4 { font-size: 2.2rem; }
  .books-wide .cover p { font-size: 1.3rem; }
  .books-wide .spine b { font-size: 1.8rem; }
  .cover-link { font-size: 1.3rem; margin-top: 1rem; }
}
/* Cartes « À la une » : titre court en plus grand, carte « à venir » non cliquable */
.tile.tile-big h2 { font-size: 4.4rem; line-height: 1; }
.hero[data-v="1"] .tile.tile-big h2 { font-size: 3.8rem; }
.tile-soon { cursor: default; }
.tile-soon:hover { transform: none; box-shadow: none; }
@media (max-width: 1024px) { .tile.tile-big h2, .hero[data-v="1"] .tile.tile-big h2 { font-size: 3rem; } }
@media (max-width: 600px) { .tile.tile-big h2, .hero[data-v="1"] .tile.tile-big h2 { font-size: 3.4rem; } }

/* ==========================================================================
   Page d'étude (lecture longue) : sommaire fixe à gauche, contenu à droite, graphiques simples
   ========================================================================== */
.study-hero .kicker a { text-decoration: underline; text-underline-offset: .3rem; }
.study-warn { font-weight: 500; }
.study { display: grid; grid-template-columns: 30rem minmax(0, 1fr); gap: 8rem; padding: 8rem 6.4rem 12rem; background: var(--beige); color: var(--bordeaux); }
.toc { position: sticky; top: calc(var(--hdr, 0px) + 3.2rem); align-self: start; }
.toc-toggle { display: none; }
.toc-panel .kicker { margin-bottom: 1.6rem; }
.toc-progress { height: 3px; margin-bottom: 2rem; background: rgba(48,4,27,.15); }
.toc-progress span { display: block; height: 100%; width: 0; background: var(--rouge); transition: width .2s linear; }
.toc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.toc-list a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .8rem 0 .8rem 1.2rem; font-size: 1.6rem; line-height: 1.3; color: rgba(48,4,27,.6); border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.toc-list a:hover { text-decoration: none; color: var(--bordeaux); }
.toc-n { font-weight: 500; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.toc-list a.is-on { color: var(--bordeaux); font-weight: 600; border-left-color: var(--rouge); }
.toc-list a.is-done { color: var(--bordeaux); }
.toc-list .lock { color: var(--bordeaux-3); }
.study.unlocked .toc-list .lock { display: none; }
.study-body { max-width: 86rem; display: flex; flex-direction: column; }
.st-sec { padding: 6.4rem 0; border-top: 1px solid rgba(48,4,27,.15); scroll-margin-top: calc(var(--hdr-h, 0px) + 2.4rem); display: flex; flex-direction: column; gap: 2.4rem; }
.st-sec:first-child { padding-top: 0; border-top: 0; }
.st-num { font-weight: 500; font-size: 1.4rem; letter-spacing: .08em; color: var(--rouge); }
.st-sec h2 { font-weight: var(--w-title); font-size: 4rem; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.st-sec h2 .hl { color: var(--bordeaux-3); }
.st-h2b { margin-top: 3.2rem; }
.st-sec h3 { font-weight: var(--w-title); font-size: 2rem; line-height: 1.2; }
.st-lead { font-size: 2rem; line-height: 1.45; }
.st-big { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.2; }
.st-big em { font-style: normal; color: var(--rouge); }
.st-sec ul:not([class]) { margin: 0; padding-left: 2rem; display: flex; flex-direction: column; gap: .6rem; }
.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.st-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-cards > div { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.4rem; background: var(--blanc); font-size: 1.6rem; line-height: 1.45; }
.st-callout { padding: 2rem 2.4rem; font-size: 1.8rem; line-height: 1.45; background: var(--bordeaux); color: var(--beige); }
.st-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; counter-reset: s; }
.st-steps li { display: flex; flex-direction: column; gap: 1rem; padding: 2.4rem; background: var(--bleu); font-size: 1.6rem; line-height: 1.45; counter-increment: s; }
.st-steps li::before { content: counter(s); font-weight: var(--w-title); font-size: 4rem; line-height: 1; }
.st-table { margin: 0; display: flex; flex-direction: column; }
.st-table > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; padding: 1.4rem 0; border-top: 1px solid rgba(48,4,27,.15); font-size: 1.8rem; }
.st-table dd { margin: 0; font-size: 1.6rem; opacity: .8; }
.st-examples { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.st-examples li { display: flex; flex-direction: column; justify-content: space-between; gap: 2.4rem; padding: 2rem; background: var(--blanc); font-size: 1.6rem; line-height: 1.4; }
.pill { align-self: flex-start; padding: .6rem 1.2rem; font-weight: 500; font-size: 1.4rem; border-radius: 99px; }
.pill.pop { background: var(--bordeaux); color: var(--beige); }
.pill.cad { background: var(--bleu); color: var(--bordeaux); }
.pill.neu { background: var(--gris); color: var(--bordeaux); }
.st-note { font-size: 1.4rem; line-height: 1.45; opacity: .75; }
.st-src { font-size: 1.3rem; opacity: .6; }
/* barre empilée + chiffres */
.stack { display: flex; height: 4.8rem; background: rgba(48,4,27,.08); }
.stack span { display: block; height: 100%; }
.s-pop { background: var(--bordeaux); } .s-cad { background: var(--bleu); } .s-oth { background: rgba(48,4,27,.15); }
.st-stats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.st-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-stats li { display: flex; flex-direction: column; gap: .4rem; padding-left: 1.6rem; border-left: 4px solid var(--c); font-size: 1.6rem; line-height: 1.4; }
.st-stats li.pop { --c: var(--bordeaux); } .st-stats li.cad { --c: var(--bleu); } .st-stats li.oth { --c: rgba(48,4,27,.25); }
.st-stats b { font-weight: var(--w-title); font-size: 5.6rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-stats strong { font-weight: var(--w-title); }
/* barres horizontales */
.hbars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.hbars li { display: grid; grid-template-columns: 32rem minmax(0, 1fr) 6.4rem; gap: 1.6rem; align-items: center; font-size: 1.6rem; }
.hb-label { text-align: right; }
.hb-track { height: 1.8rem; }
.hb-bar { display: block; height: 100%; background: var(--bordeaux); transform-origin: left; }
.hb-val { font-variant-numeric: tabular-nums; font-weight: 500; }
/* légende et barres en miroir */
.legend { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; font-size: 1.4rem; }
.legend span::before { content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; margin-right: .8rem; vertical-align: -.1rem; }
.lg-pop::before { background: var(--bordeaux); } .lg-cad::before { background: var(--bleu); } .lg-txt::before { display: none !important; }
.lg-txt { opacity: .75; }
.bfly { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.bfly li { display: grid; grid-template-columns: minmax(0, 1fr) 22rem minmax(0, 1fr); gap: 1.6rem; align-items: center; font-size: 1.6rem; }
.bf-label { text-align: center; font-weight: 600; }
.bf-left, .bf-right { display: flex; align-items: center; gap: 1rem; height: 2.4rem; }
.bf-left { justify-content: flex-end; }
.bf-bar { display: block; height: 100%; max-width: calc(100% - 7rem); }
.bf-bar.pop { background: var(--bordeaux); } .bf-bar.cad { background: var(--bleu); }
.bf-val { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; }
/* barres verticales (âges) */
.vbars { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4rem; }
.vbars li { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; font-size: 1.6rem; }
.vb-bars { display: flex; align-items: flex-end; gap: .6rem; height: 28rem; width: 100%; justify-content: center; border-bottom: 1px solid rgba(48,4,27,.3); }
.vb { position: relative; width: 40%; max-width: 6.4rem; }
.vb.pop { background: var(--bordeaux); } .vb.cad { background: var(--bleu); }
.vb i { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -.4rem); font-style: normal; font-size: 1.4rem; font-weight: 500; white-space: nowrap; }
.vbars small { font-size: 1.4rem; opacity: .75; }
.vbars li.max small { opacity: 1; font-weight: 600; color: var(--bordeaux-3); }
/* animation discrète : les barres se déploient à l'arrivée */
.st-sec .hb-bar, .st-sec .bf-bar { transition: transform .9s var(--ease); }
.st-sec .vb { transition: transform .9s var(--ease); transform-origin: bottom; }
.st-sec:not(.seen) .hb-bar, .st-sec:not(.seen) .bf-bar.cad { transform: scaleX(0); }
.st-sec:not(.seen) .bf-bar.pop { transform: scaleX(0); transform-origin: right; }
.st-sec:not(.seen) .vb { transform: scaleY(0); }
.bf-bar.pop { transform-origin: right; } .bf-bar.cad { transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .st-sec .hb-bar, .st-sec .bf-bar, .st-sec .vb { transform: none !important; } }
/* accès par e-mail */
.gate { position: relative; margin: 2.4rem 0 0; padding: 4.8rem; background: var(--bordeaux); color: var(--beige); display: flex; flex-direction: column; gap: 1.6rem; }
.gate::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16rem; background: linear-gradient(to bottom, rgba(228,228,228,0), var(--beige)); pointer-events: none; }
.gate .kicker { color: var(--rouge); }
.gate h2 { font-weight: var(--w-title); font-size: 4rem; line-height: 1.1; }
.gate p { font-size: 1.8rem; line-height: 1.45; max-width: 64rem; }
.gate-form { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.2rem; }
.gate-form input[type="email"] { flex: 1 1 32rem; min-width: 0; padding: 1.4rem 1.6rem; font: 400 1.8rem/1.3 var(--font); color: var(--bordeaux); background: var(--blanc); border: 2px solid var(--blanc); }
.gate-form .btn { background: var(--rouge); color: var(--bordeaux); }
.gate-form .btn:hover { background: var(--beige); }
.gate-opt { flex-basis: 100%; display: flex; gap: 1rem; align-items: center; font-size: 1.6rem; }
.gate-opt input { width: 1.8rem; height: 1.8rem; accent-color: var(--rouge); }
.gate .form-error { flex-basis: 100%; color: var(--rouge); }
.gate-legal { flex-basis: 100%; font-size: 1.4rem !important; opacity: .7; }
.study.unlocked .gate { display: none; }
@media (max-width: 1024px) {
  .study { grid-template-columns: 22rem minmax(0, 1fr); gap: 4rem; padding: 6.4rem 4rem 8rem; }
  .hbars li { grid-template-columns: 22rem minmax(0, 1fr) 5.6rem; }
  .bfly li { grid-template-columns: minmax(0, 1fr) 16rem minmax(0, 1fr); }
  .st-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cards.three, .st-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .study { display: block; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 6.4rem max(16px, env(safe-area-inset-left, 0px)); }
  /* le sommaire devient une barre repliable, fixée en haut pendant la lecture */
  .toc { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 3.2rem; background: var(--beige); border-bottom: 1px solid rgba(48,4,27,.2); }
  .toc-toggle { display: flex; width: 100%; justify-content: space-between; gap: 1.2rem; padding: 1.6rem max(16px, env(safe-area-inset-left, 0px)); font: 600 1.6rem/1.2 var(--font); color: var(--bordeaux); background: none; border: 0; text-align: left; cursor: pointer; }
  .toc-toggle span { font-weight: 400; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toc-panel { display: none; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 1.6rem; max-height: 70vh; overflow-y: auto; }
  .toc.open .toc-panel { display: block; }
  .toc-panel .kicker { display: none; }
  .st-sec { padding: 4.8rem 0; }
  .st-sec h2, .gate h2 { font-size: 2.6rem; }
  .st-lead, .gate p { font-size: 1.6rem; }
  .st-big { font-size: 2.2rem; }
  .st-cards, .st-examples, .st-stats, .st-stats.two { grid-template-columns: minmax(0, 1fr); }
  .st-table > div { grid-template-columns: minmax(0, 1fr); gap: .4rem; font-size: 1.6rem; }
  .st-stats b { font-size: 4rem; }
  .hbars li { grid-template-columns: minmax(0, 1fr) 4.8rem; gap: .4rem 1rem; font-size: 1.4rem; }
  .hb-label { grid-column: 1 / -1; text-align: left; }
  .bfly li { grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr); gap: .8rem; font-size: 1.3rem; }
  .bf-bar { max-width: calc(100% - 5rem); }
  .vbars { gap: .8rem; }
  .vbars li { font-size: 1.2rem; }
  .vb-bars { height: 18rem; }
  .vb i { font-size: 1.1rem; }
  .gate { padding: 3.2rem 2rem; }
}

/* ==========================================================================
   Échelle typographique commune (ordinateur, au-delà de 1024 px)
   11 tailles : chiffres 104 · titres de page 80 / 64 · sections 56 · grandes phrases 40
   · sous-titres 32 · petits titres 24 · texte 20 / 18 / 16 · étiquettes 14
   ========================================================================== */
@media (min-width: 1025px) {
  /* Chiffres */
  .stats b, .num, .chiffres[data-v="2"] .valeur, .valeur { font-size: 10.4rem; }
  /* Titres de section */
  .h2, .title-xl, .piliers h2, .pubs-head h2, .chiffres h2, .hl-lines li { font-size: 5.6rem; }
  /* Grandes phrases */
  .statement, .statement.small, .question, .tags.big li, .way h2, .tab-panel .h3,
  .tile.tile-big h2, .hero[data-v="1"] .tile.tile-big h2, .books-wide .cover h4 { font-size: 4rem; }
  /* Sous-titres */
  .h3, .lead, .p-hero-cols .lead, .tournant .lead, .pubs-lead, .card-text h3, .cover h4, .panel, .pub-text h3, .contrib h4 { font-size: 3.2rem; }
  .manifeste p { font-size: 4rem; }
  .books-wide .spine b { font-size: 2.4rem; }
  /* Petits titres */
  .libelle, .chiffres[data-v="2"] .libelle, .steps h3, .tile h2, .hero[data-v="1"] .tile h2, .example b, .tabs-list [role="tab"] b, .tab-panel .lead { font-size: 2.4rem !important; }
  /* Texte */
  .bridge p { font-size: 2rem; }
  .contrib p, .steps p, .struct li, .col-card p, .pub-card h3, .cta-band .prose { font-size: 1.8rem; }
  .note, .pub-card p, .tile p, .hero[data-v="1"] .tile p, .more, .hero[data-v="1"] .more, .promise { font-size: 1.6rem; }
  /* Étiquettes en capitales */
  .kicker, .tag, .hero[data-v="1"] .tag, .cover-tag, .mosaic-note, .pub-meta, .spine i, .tabs-list [role="tab"] small, .ts-role, .ts-num, .f-label { font-size: 1.4rem; }
}

/* Échelle typographique commune (mobile, jusqu'à 600 px)
   10 tailles : chiffres 72 · titres 40 / 32 · grandes phrases 26 · sous-titres 22 · petits titres 20
   · texte 18 / 16 · petit texte 14 · étiquettes 12 */
@media (max-width: 600px) {
  .stats b, .num { font-size: 7.2rem !important; }
  .p-hero h1, .hero h1, .hero[data-v] h1, .valeur { font-size: 4rem !important; }
  .chiffres[data-v="2"] .valeur { font-size: 7.2rem !important; }
  .chiffres[data-v="2"] .libelle { font-size: 1.8rem !important; }
  .p-hero h1.long, .h2, .title-xl, .piliers h2, .pubs-head h2, .chiffres h2, .ts-cap b, .tournant .h2 { font-size: 3.2rem !important; }
  .statement, .statement.small, .hl-lines li, .manifeste p, .tags.big li, .way h2, .tab-panel .h3, .question,
  .tile.tile-big h2, .hero[data-v="1"] .tile.tile-big h2, .feature .pub-cover b, .talk-merci-h { font-size: 2.6rem !important; }
  .h3, .card-text h3, .pub-text h3, .contrib h4, .tile h2, .hero[data-v] .tile h2, .panel, .pubs-lead, .lead, .tournant .lead, .cover h4, .books-wide .cover h4 { font-size: 2.2rem !important; }
  .steps h3, .example b, .tabs-list [role="tab"] b, .tab-panel .lead, .promise, .member b, .pub-card h3 { font-size: 2rem !important; }
  .intro, .bridge p, .pubs-text { font-size: 1.8rem !important; }
  .prose, .p-hero-cols .prose, .cta-band .prose, .prose p, .struct li, .steps p, .col-card p, .way p, .card-text, .tile p, .hero[data-v] .tile p, .more, .hero[data-v] .more, .btn { font-size: 1.6rem !important; }
  .contrib p, .libelle, .chiffres[data-v="2"] .libelle, .pub-card p, .note, .seg button, .pub-year, .pub-year select, .cover p, .books-wide .cover p, .stats span, .stats small { font-size: 1.4rem !important; }
  .kicker, .tag, .contrib .tag, .hero[data-v] .tag, .cover-tag, .mosaic-note, .pub-meta, .spine i, .tabs-list [role="tab"] small, .ts-cap-num, .ts-cap span:last-child, .cover-link, .illu-label { font-size: 1.2rem !important; }
}

/* Échelle typographique commune (tablette, 601 à 1024 px)
   10 tailles : chiffres 84 · titres 64 / 48 · grandes phrases 32 · sous-titres 24 · petits titres 20
   · texte 18 / 16 · étiquettes 13 */
@media (min-width: 601px) and (max-width: 1024px) {
  .stats b, .num, .valeur, .chiffres[data-v="2"] .valeur { font-size: 8.4rem !important; }
  .p-hero h1 { font-size: 6.4rem !important; }
  .p-hero h1.long, .hero h1, .hero[data-v="1"] h1, .h2, .title-xl, .piliers h2, .pubs-head h2, .chiffres h2, .ts-name, .tournant .h2 { font-size: 4.8rem !important; }
  .statement, .statement.small, .hl-lines li, .manifeste p, .tags.big li, .way h2, .tab-panel .h3, .question,
  .tile.tile-big h2, .hero[data-v="1"] .tile.tile-big h2, .feature .pub-cover b, .books-wide .cover h4 { font-size: 3.2rem !important; }
  .h3, .card-text h3, .pub-text h3, .contrib h4, .panel, .pubs-lead, .lead, .p-hero-cols .lead, .tournant .lead, .cover h4, .books-wide .spine b { font-size: 2.4rem !important; }
  .tile h2, .hero[data-v="1"] .tile h2, .steps h3, .example b, .tabs-list [role="tab"] b, .tab-panel .lead, .promise, .member b, .pub-card h3, .libelle, .chiffres[data-v="2"] .libelle { font-size: 2rem !important; }
  .intro, .bridge p, .pubs-text, .prose, .p-hero-cols .prose, .cta-band .prose, .way p, .btn { font-size: 1.8rem !important; }
  .struct li, .steps p, .col-card p, .card-text, .contrib p, .tile p, .hero[data-v="1"] .tile p, .more, .hero[data-v="1"] .more, .pub-card p, .note, .seg button, .pub-year, .stats span, .cover p { font-size: 1.6rem !important; }
  .kicker, .tag, .hero[data-v="1"] .tag, .contrib .tag, .cover-tag, .mosaic-note, .pub-meta, .spine i, .tabs-list [role="tab"] small, .ts-role, .ts-num, .illu-label { font-size: 1.3rem !important; }
}
@media (max-width: 600px) { .seg-view { display: none !important; } }

/* Mobile : plus d'air entre les sections et entre les blocs, texte courant plus aéré */
@media (max-width: 600px) {
  .sec, .chiffres, .constat, .piliers, .pubs { padding-top: 8.8rem !important; padding-bottom: 8.8rem !important; }
  .manifeste { padding-top: 7.2rem !important; padding-bottom: 10.4rem !important; }
  .hero { gap: 4.8rem !important; padding-bottom: 7.2rem !important; }
  .p-hero { padding-bottom: 8rem !important; gap: 2.4rem !important; }
  .sec, .pubs { gap: 5.6rem !important; }
  .chiffres { gap: 4.8rem !important; }
  .piliers { gap: 4rem !important; }
  .split, .p-hero-cols, .cta-band, .tournant-grid { gap: 3.2rem !important; }
  .stack-head { gap: 2.4rem; }
  .prose { gap: 1.8rem !important; }
  .prose p, .prose li, .pub-text p, .card-text p, .st-lead, .st-cards > div { line-height: 1.6; }
  .pub-block { padding: 7.2rem 0 !important; gap: 4rem !important; }
  .pub-text { gap: 2.4rem !important; }
  .p-hero-cols { margin-top: 1.6rem; padding-top: 2.4rem; }
  .st-sec { padding: 6.4rem 0 !important; gap: 3.2rem !important; }
  .way { padding: 4.8rem 0 !important; gap: 2.4rem !important; }
  .ts-photos { gap: 7.2rem !important; }
  .footer-main { gap: 5.6rem !important; padding: 6.4rem 0 !important; }
}

/* Ordinateur : titre à gauche, étagère à droite, sans display:contents
   (Safari peint ces boîtes puis les retire, d’où l’étagère qui apparaît au refresh et disparaît). */
@media (min-width: 1025px) {
  .pubs {
    display: grid;
    grid-template-columns: minmax(28rem, 44rem) minmax(0, 1fr);
    grid-template-areas: "head shelf" "copy shelf" "rest rest";
    column-gap: 6.4rem;
    row-gap: 3.2rem;
    align-items: start;
  }
  .pubs-head { grid-area: head; grid-template-columns: minmax(0, 1fr); }
  .pub-visual-home { grid-area: shelf; align-self: start; width: 100%; }
  .pub-text-home { grid-area: copy; padding-top: 2.4rem; border-top: 1px solid rgba(48,4,27,.2); }
  .pubs-grid { grid-area: rest; }
}
/* Pages mentions légales et confidentialité */
.legal h2 { font-weight: var(--w-title); font-size: 3.2rem; line-height: 1.15; }
.legal .prose { max-width: 86rem; }
.legal ul { margin: 0; padding-left: 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
.legal a { text-underline-offset: .3rem; }
.pending { margin: 0; padding: 1.6rem 2rem; border-left: 4px solid var(--rouge); background: var(--blanc); }

@media (min-width: 1025px) and (max-height: 860px) {
  .pubs { padding-top: 4rem !important; padding-bottom: 4rem !important; gap: 2.4rem !important; }
  .pub-block { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
}