/* ==========================================================================
   Pourquoi nous ?
   --------------------------------------------------------------------------
   Feuille propre à cette page, chargée seulement sur elle. Elle n'utilise
   que les jetons déjà définis par theme.css et ne redéfinit aucune classe de
   l'accueil : les deux pages restent indépendantes, et retoucher l'une ne
   peut pas abîmer l'autre.

   La page doit respirer. Beaucoup de blanc, de grandes phrases, quelques
   chiffres énormes, deux portraits forts, et très peu de texte visible en
   même temps.
   ========================================================================== */

.pq{
  position:relative;
  padding-block:var(--pq-pad);
  background:var(--white);
}

:root{
  --pq-pad:      clamp(88px, 11vw, 176px);
  --pq-pad-ample:clamp(112px, 14vw, 232px);
  --pq-mesure:   62ch;

  /* Chronologie de lecture — des repères, pas des dates.
     Le retrait est UNIFORME sur tous les chapitres : le filet se prolonge
     exactement de cette valeur au-dessus et au-dessous de son rail, si bien
     que les segments se rejoignent sans rupture d'un chapitre à l'autre.
     Ce retrait absorbe aussi le débordement de l'emblème final. */
  --pq-jalon-pad: clamp(84px, 10vw, 156px);
  --pq-rail:      clamp(44px, 7vw, 108px);

  /* L'échelle typographique est commune à tout le thème : elle est
     déclarée une seule fois, dans theme.css (« --nf-… »). Cette page ne la
     recopie pas.

     SEULE extension, et elle est délibérée : les chiffres de preuve sont le
     moment visuel de la page. Ils se placent entre le titre de section
     (jusqu'à 62 px) et le titre du hero (jusqu'à 89 px) — dans l'échelle,
     pas à côté. La variante courte sert aux valeurs qui ne sont pas des
     nombres, pour qu'elles n'écrasent pas la rangée. */
  --pq-chiffre:      clamp(42px, 5.6vw, 82px);
  --pq-chiffre-long: clamp(26px, 2.9vw, 42px);
}

/* Un filet très fin sépare les blocs sans les enfermer. */
.pq + .pq::before{
  content:"";
  position:absolute; left:var(--gutter); right:var(--gutter); top:0;
  height:1px; background:var(--line-soft);
}

/* --------------------------------------------------------------------------
   Éléments communs à la page
   -------------------------------------------------------------------------- */
.pq__tete{ margin-bottom:clamp(38px, 5vw, 72px); }
.pq__tete--centre{ text-align:center; }

.pq__titre{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-titre);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:18px 0 0;
}

.pq__titre--geant{
  font-size:var(--nf-titre-fort);
  line-height:1.02;
  letter-spacing:-.022em;
  margin-top:26px;
}

.pq__texte{
  max-width:var(--pq-mesure);
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
  margin:0 0 18px;
}
.pq__texte:last-child{ margin-bottom:0; }

.pq__accroche{
  max-width:52ch;
  margin:clamp(28px, 3.4vw, 46px) 0 0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

.pq__amorce{
  max-width:46ch;
  margin:0 0 26px;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.45;
  color:var(--ink);
}

.pq__chute{
  margin:clamp(30px, 3.6vw, 52px) 0 0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.45;
  color:var(--cherry);
}

/* --------------------------------------------------------------------------
   01. Ouverture
   --------------------------------------------------------------------------
   L'en-tête est en position fixe et aucune règle générale ne compense sa
   hauteur : la première section de la page s'en charge elle-même, sur le
   modèle exact du hero de l'accueil.
   -------------------------------------------------------------------------- */
.pq--ouverture{
  padding-top:calc(var(--header-h) + clamp(30px, 5.5vh, 74px));
  padding-bottom:var(--pq-pad-ample);
}

.pq__sequence{
  list-style:none;
  margin:clamp(44px, 5.5vw, 80px) 0 0;
  padding:0;
  max-width:64ch;
  border-top:1px solid var(--line);
}

.pq__sequence-item{
  position:relative;
  padding:clamp(15px, 1.7vw, 22px) 0 clamp(15px, 1.7vw, 22px) 26px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.45;
  color:var(--ink);
}

.pq__sequence-item::before{
  content:"";
  position:absolute; left:0; top:calc(50% - 1px);
  width:12px; height:1px;
  background:var(--cherry);
}

/* --------------------------------------------------------------------------
   02. Notre conviction
   -------------------------------------------------------------------------- */

/* On laisse respirer avant que les chiffres n'arrivent. */
.pq--conviction{ padding-bottom:var(--pq-pad-ample); }

.pq__deux{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px, 5vw, 88px);
}

@media (min-width:900px){
  .pq__deux{ grid-template-columns:1fr 1fr; }
}

/* Sans cette garde, un mot long fait deborder la colonne de grille. */
.pq__colonne{ min-width:0; }

.pq__oppositions{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pq__oppositions li{
  position:relative;
  padding-left:26px;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

.pq__oppositions li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:10px; height:1px;
  background:var(--ink-4);
}

.pq__questions{ margin-top:clamp(30px, 3.4vw, 46px); }

.pq__question-amorce{
  /* « Parce qu'au fond… » et « Mais aussi : » sont des phrases de liaison,
     pas des étiquettes. En capitales de 10,5 px elles fragmentaient la
     colonne ; en texte courant elles se lisent, et la section perd un
     traitement typographique de plus. */
  margin:0 0 10px;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-3);
}

.pq__question{
  margin:0 0 26px;
  line-height:1.45;
}

.pq__question--sourde{
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-3);
}

.pq__question--forte{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.32;
  color:var(--cherry);
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   03. Les preuves en chiffres
   --------------------------------------------------------------------------
   Le moment visuel de la page. Les chiffres portent seuls, sans cadre ni
   fond : c'est l'échelle typographique qui fait l'effet.
   -------------------------------------------------------------------------- */
.pq--preuves{ background:var(--paper); }

.pq__chiffres{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px, 4vw, 54px) clamp(24px, 3vw, 48px);
}

@media (min-width:520px){
  .pq__chiffres{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1080px){
  .pq__chiffres[data-nombre="3"]{ grid-template-columns:repeat(3, 1fr); }
  .pq__chiffres[data-nombre="4"]{ grid-template-columns:repeat(4, 1fr); }
  .pq__chiffres[data-nombre="5"],
  .pq__chiffres[data-nombre="6"]{ grid-template-columns:repeat(3, 1fr); }
}

.pq__chiffre{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:20px;
  border-top:1px solid var(--rule);
}

.pq__chiffre-valeur{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--pq-chiffre);
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  text-wrap:balance;
}

/* Les valeurs chiffrees portent le rouge cerise de l'identite — le jeton
   existant, aucune nouvelle nuance. Le suffixe « + » fait partie du meme
   element, il prend donc la meme couleur. Le libelle sous le chiffre garde
   la sienne. */
.pq__chiffre-valeur--compteur{ color:var(--cherry); }

/* Une valeur qui n'est pas un nombre — « Plusieurs pays » — ne peut pas tenir
   la même échelle qu'un « 17+ » sans écraser la rangée. Le gabarit pose ce
   modificateur d'après la longueur réelle de la valeur saisie. */
.pq__chiffre-valeur--long{
  font-size:var(--pq-chiffre-long);
  line-height:1.1;
  letter-spacing:-.015em;
}

.pq__chiffre-libelle{
  font-size:var(--nf-meta);
  line-height:1.68;
  color:var(--ink-2);
  max-width:26ch;
}

.pq__apres-chiffres{
  margin-top:clamp(56px, 6.5vw, 96px);
  max-width:70ch;
}

.pq__transition{
  margin:clamp(26px, 3vw, 40px) 0 0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

.pq__enjeux{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  font-size:var(--nf-corps);
  line-height:2;
  letter-spacing:.04em;
}

.pq__enjeux li{ display:inline-flex; align-items:baseline; }

/* Le séparateur vit dans le CSS : il n'appartient pas au mot, et ne doit
   donc pas se retrouver sous le filet du survol. */
.pq__enjeux li + li::before{
  content:"·";
  margin:0 .62em;
  color:var(--ink-4);
}

/* Les mots-clés portent l'encre pleine et une graisse d'un cran au-dessus
   du texte courant : ils se repèrent d'un coup d'œil, sans crier. */
.pq__enjeu{
  position:relative;
  font-weight:400;
  color:var(--ink);
}

/* Le filet se trace de la gauche au survol, et se retire par la droite :
   deux origines pour un même trait, c'est ce qui donne le mouvement. */
.pq__enjeu::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:var(--cherry);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .32s var(--ease);
}

/* Réservé aux pointeurs fins : sur un écran tactile, le survol se bloque et
   les mots doivent de toute façon se lire sans interaction. */
@media (hover:hover) and (pointer:fine){
  .pq__enjeu:hover::after{
    transform:scaleX(1);
    transform-origin:left;
  }
}

/* --------------------------------------------------------------------------
   04. Ce que le terrain nous a appris
   -------------------------------------------------------------------------- */

/* Le recit est la partie la plus dense de la page : on lui donne de l'air. */
.pq--terrain{ padding-block:var(--pq-pad-ample); }

.pq__recit{ max-width:var(--pq-mesure); }

.pq__causes{
  list-style:none;
  margin:clamp(46px, 5.5vw, 78px) 0 0;
  padding:0;
  display:grid;
  /* minmax(0,1fr) et non « 1fr » : « 1fr » vaut minmax(auto,1fr) et refuse
     de descendre sous la largeur du contenu. La grille sortait alors de sa
     colonne — à 320px, la seconde cellule finissait 41px au-delà du bord,
     et « Un manque de structure. » se retrouvait coupé. */
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

/* Sous 400px, deux colonnes ne laissent plus la place à une phrase : une
   seule, pleine largeur. */
@media (max-width:400px){
  .pq__causes{ grid-template-columns:1fr; }
}

@media (min-width:820px){
  .pq__causes{ grid-template-columns:repeat(3, 1fr); }
}

/* A partir de 1000px, le récit passe en deux colonnes et cette liste tombe
   dans la colonne étroite : elle perd d'un coup plus de la moitié de sa
   largeur — 266px par cellule à 999px, 117px à 1000px. Trois colonnes n'y
   tiennent plus : « Un manque de structure. » s'y brise en cinq lignes.
   Le nombre de colonnes suivait la largeur de la FENÊTRE, alors que la
   place disponible, elle, avait fondu.

   On revient donc à deux colonnes tant que la troisième n'a pas de quoi se
   lire. À 1400px la cellule retrouve la géométrie approuvée — mêmes
   hauteurs qu'à 1440 — et les trois colonnes reviennent, inchangées.
   minmax(0,1fr) les rend égales : sans lui, « 1fr » cède au contenu et les
   colonnes se déséquilibrent. */
@media (min-width:1000px){
  .pq__causes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width:1400px){
  .pq__causes{ grid-template-columns:repeat(3, 1fr); }
}

.pq__causes li{
  background:var(--white);
  padding:clamp(20px, 2.6vw, 34px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.4;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   05. Les personnes clés
   -------------------------------------------------------------------------- */

/* Les portraits ont besoin d'espace avant la vision. */
.pq--personnes{ padding-bottom:var(--pq-pad-ample); }

.pq__texte--tete{ margin-top:18px; max-width:58ch; }

.pq__profils{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(48px, 6vw, 76px);
}

@media (min-width:860px){
  .pq__profils{ grid-template-columns:repeat(2, 1fr); }
}

/* Meme garde de debordement que pour les colonnes de la section 02. */
.pq__profil{ min-width:0; }

.pq__portrait{
  margin:0 0 clamp(22px, 2.6vw, 34px);
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--paper);
}

.pq__portrait-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 28%;
  display:block;
}

/* Repli sans photographie : un cartouche aux mêmes proportions, pour que le
   remplacement par une vraie image ne décale jamais la mise en page. */
.pq__portrait-repli{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%; height:100%;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}

.pq__initiales{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-titre);
  letter-spacing:.04em;
  color:var(--ink-4);
}

.pq__alias{
  margin:0 0 6px;
  font-size:var(--nf-etiquette);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cherry);
}

.pq__nom{
  margin:0 0 10px;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.18;
  color:var(--ink);
}

.pq__role{
  margin:0 0 20px;
  font-size:var(--nf-meta);
  line-height:1.68;
  color:var(--ink-3);
}

.pq__preuves{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pq__preuves li{
  position:relative;
  padding-left:20px;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink);
}

.pq__preuves li::before{
  content:"";
  position:absolute; left:0; top:.65em;
  width:8px; height:1px;
  background:var(--cherry);
}

.pq__marqueurs{
  margin:24px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:var(--nf-meta);
  line-height:1.85;
  letter-spacing:.04em;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   06. Notre vision
   -------------------------------------------------------------------------- */
.pq--vision{
  padding-block:var(--pq-pad-ample);
  text-align:center;
}

.pq__emblem{
  position:absolute;
  left:50%;
  top:clamp(-90px, -6vw, -40px);
  width:clamp(220px, 26vw, 400px);
  opacity:.05;
  pointer-events:none;
  /* Même traitement que les emblèmes de l'accueil : z-index 0, et surtout
     AUCUN rognage sur la section. Le motif dépasse vers le haut, dans le
     grand blanc qui sépare les deux blocs — il relie les sections au lieu
     d'être enfermé dans l'une d'elles.

     Le dépassement (90 px au plus) reste très inférieur au retrait bas de
     la section précédente (jusqu'à 232 px) : il tombe donc toujours dans du
     vide, jamais sur du texte. */
  z-index:0;
  /* La transformation de base est déclarée ici ET en data-base : le script
     l'écrit en style inline, mais ne le fait pas en mouvement réduit. */
  transform:translateX(-50%);
}

/* Le contenu reste au-dessus du motif décoratif. */
.pq--vision .shell{ position:relative; z-index:1; }

.pq__declaration{
  max-width:20ch;
  margin:0 auto;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-declaration);
  line-height:1.14;
  letter-spacing:-.018em;
  color:var(--ink);
  text-wrap:balance;
}

.pq__vision-corps{
  max-width:58ch;
  margin:clamp(36px, 4vw, 60px) auto 0;
}

.pq__vision-corps .pq__texte{ max-width:none; }

.pq__chute--forte{
  font-size:var(--nf-enonce);
  color:var(--cherry);
  margin-top:clamp(20px, 2.4vw, 32px);
}

.pq__actions{
  display:flex;
  justify-content:center;
  margin-top:clamp(42px, 5vw, 70px);
}

/* ==========================================================================
   Chronologie de lecture
   --------------------------------------------------------------------------
   Un filet très fin, des nœuds cerise, des repères numérotés. Ce n'est pas
   une frise historique : les numéros sont des chapitres, ils ne désignent
   aucune date.

   Le tracé reprend le vocabulaire de la section « méthode » de l'accueil :
   l'effet vit sur un pseudo-élément, jamais sur l'élément observé — un
   élément mis à l'échelle zéro n'intersecte jamais, et sa révélation ne
   partirait pas.
   ========================================================================== */

.pq--jalon{
  padding-block:var(--pq-jalon-pad);
}

.pq--jalon .shell{
  display:grid;
  grid-template-columns:var(--pq-rail) minmax(0, 1fr);
  column-gap:clamp(16px, 2.4vw, 40px);
}

.pq__rail{
  position:relative;
  min-height:100%;
}

/* Le filet dépasse du rail de tout le retrait de la section : les segments
   se touchent d'un chapitre à l'autre et forment une ligne continue. */
.pq__ligne{
  position:absolute;
  left:0;
  top:calc(-1 * var(--pq-jalon-pad));
  bottom:calc(-1 * var(--pq-jalon-pad));
  width:1px;
}

.pq__ligne::before{
  content:"";
  position:absolute; inset:0;
  background:var(--line);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1.3s var(--ease) var(--d, 0s);
}

.pq__ligne.is-in::before{ transform:scaleY(1); }

/* Le dernier chapitre referme la chronologie : le filet s'arrête au nœud. */
.pq__rail--fin .pq__ligne{
  bottom:auto;
  height:calc(var(--pq-jalon-pad) + 1.1em);
}

.pq__noeud{
  position:absolute;
  left:0;
  top:.55em;
  width:7px; height:7px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--cherry);
  transform:scale(.85);
  transition:opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}

.pq__noeud.is-in{ transform:scale(1); }

.pq__num{
  position:absolute;
  left:22px;
  top:0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}

.pq__colonne-contenu{ min-width:0; }

/* Le filet de séparation entre blocs disparaît : la chronologie relie
   désormais les sections, deux traits feraient doublon. */
.pq--jalon + .pq--jalon::before{ display:none; }

/* 04 — les portraits respirent : ils s'affranchissent de la colonne, mais
   s'arrêtent avant le filet, qui reste lisible à leur gauche. La
   chronologie se fait discrète sans disparaître. */
@media (min-width:860px){
  .pq--personnes .pq__profils{
    margin-left:calc(-1 * var(--pq-rail) + 28px);
  }
}

.pq--personnes .pq__ligne::before{ opacity:.55; }

/* 03 — composition décalée, pour rompre la répétition d'un chapitre à
   l'autre sans changer la structure du contenu. */
@media (min-width:1000px){
  .pq--terrain .pq__colonne-contenu{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    column-gap:clamp(40px, 5vw, 88px);
    align-items:start;
  }
  .pq--terrain .pq__tete{ grid-column:1 / -1; }
  .pq--terrain .pq__recit{ max-width:none; }
  .pq--terrain .pq__causes{ margin-top:0; }
  .pq--terrain .pq__chute{ grid-column:1 / -1; }
}

/* Mobile : rail étroit à gauche, contenu à droite, une seule colonne. */
@media (max-width:640px){
  .pq__num{
    left:20px;
    font-size:var(--nf-enonce);
  }
}

/* --------------------------------------------------------------------------
   Ancres
   --------------------------------------------------------------------------
   Aucune compensation d'ancre n'existe dans le thème et l'en-tête est fixe :
   sans cette règle, un lien vers une section de cette page la ferait passer
   sous l'en-tête. Portée volontairement limitée aux sections de la page.
   -------------------------------------------------------------------------- */
.pq[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* --------------------------------------------------------------------------
   Mouvement réduit
   --------------------------------------------------------------------------
   Le thème neutralise déjà les durées et remet [data-reveal] à plat — le
   nœud est donc couvert. Le tracé du filet vit sur un pseudo-élément : il se
   déclare ici, exactement comme le thème le fait pour .method__spine.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pq__ligne::before{ transform:scaleY(1) !important; }
  .pq__emblem{ transform:translateX(-50%) !important; }
}

/* --------------------------------------------------------------------------
   Amélioration progressive — l'état d'arrivée est le défaut

   Voir theme.css, section 15 bis : les états d'entrée ne s'appliquent que sous
   « nf-anime », posée par l'amorce en tête de page et retirée dès que le moteur
   d'animation échoue ou tarde. Cette feuille rattrape les états qu'elle a
   elle-même déclarés — aucune autre ne les connaît.
   -------------------------------------------------------------------------- */
html:not(.nf-anime) .pq__ligne::before{ transform:scaleY(1) !important; }
html:not(.nf-anime) .pq__noeud{ transform:scale(1) !important; }