/* Blocs partagés par toutes les pages. */

/* ---------- Boutons : carrés, pleins ou cerclés ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 28px;
  background: var(--noir);
  color: var(--blanc);
  font: 700 1.0625rem/1.1 var(--police);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 120ms var(--sortie);
}
.btn.o { background: var(--blanc); color: var(--noir); box-shadow: inset 0 0 0 2px var(--noir); }
.btn:active { transform: scale(0.97); }
.row-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--rouge); }
  .btn.o:hover { background: var(--noir); color: var(--blanc); }
  .btn:hover .arr, .cta-s:hover .arr { transform: translateX(5px); }
}

/* ---------- Liens ---------- */
.lien {
  font-weight: 700;
  color: var(--noir);
  text-decoration: underline;
  text-decoration-thickness: var(--trait);
  text-underline-offset: 0.28em;
  transition: color 160ms ease;
}
.lien:active { color: var(--rouge); }
@media (hover: hover) and (pointer: fine) {
  .lien:hover { color: var(--rouge); }
  .lien:hover .arr { transform: translateX(5px); }
}
.prose a:not(.btn) { font-weight: 600; color: var(--noir); }

/* ---------- Tête de page ---------- */
.ph { padding-top: clamp(48px, 7vw, 104px); }
.ph .lab { margin-bottom: 28px; }
.ph h1 {
  font-size: clamp(2.25rem, 5.2vw, 4.75rem);
  line-height: 0.98;
  max-width: 17ch;
}
.ph h1.large { max-width: 21ch; }
.lead {
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.42;
  color: var(--gris-f);
  max-width: 44ch;
  margin-top: 32px;
}
.ph .lead { max-width: 52ch; }

/* ---------- Section ---------- */
.sec .cols > .rail { position: sticky; top: calc(var(--haut) + 24px); }
.sec { padding-top: clamp(72px, 10vw, 144px); }
.sec-tete { border-top: var(--trait-m) solid var(--noir); padding-top: 20px; }
.sec-tete .lab { margin-bottom: 0; }
.sec h2 {
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  line-height: 1;
  max-width: 20ch;
}
.sec .lede { margin-top: 28px; max-width: 62ch; font-size: 1.1875rem; color: var(--gris-f); }

/* ---------- Texte courant ---------- */
.prose { max-width: var(--lecture); font-size: 1.1875rem; line-height: 1.58; }
.prose p + p { margin-top: 1.1em; }
.prose h2 {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.08;
  margin-top: 2.2em;
  margin-bottom: 0.7em;
  padding-top: 18px;
  border-top: var(--trait) solid var(--noir);
}
.prose h2:first-child { margin-top: 0; }

/* ---------- Les chiffres de l'offre, en une phrase ---------- */
.en-bref { margin-top: 48px; max-width: 34ch; font-size: clamp(1.625rem, 2.8vw, 2.375rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--noir); text-wrap: balance; }
.en-bref b { font-weight: 900; color: var(--marine); font-variant-numeric: tabular-nums; }

/* ---------- Lecture : libellé et valeur, filets gris ---------- */
dl.lecture { margin: 0; }
dl.lecture > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--filet); }
dl.lecture dt { font-size: 0.875rem; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); padding-top: 4px; }
dl.lecture dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--noir); font-weight: 500; }

/* ---------- Références ---------- */
.refs { padding-top: clamp(40px, 5vw, 64px); }
.refs-in { display: grid; grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; border-top: 1px solid var(--filet); padding-top: 24px; }
.refs ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 4vw, 56px); }
.refs img { height: 34px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.8; }
.refs li:nth-child(2) img { height: 28px; }

/* ---------- Modalités : colonnes coiffées d'un trait, sans cartes ---------- */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 56px); margin-top: 48px; }
.mod { border-top: var(--trait-m) solid var(--noir); padding-top: 16px; }
.mod h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); margin-top: 14px; }
.mod p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; color: var(--gris-f); }
.mods-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 32px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--filet); }
.mods-pied p { font-size: 1rem; color: var(--gris-f); max-width: 62ch; }

/* ---------- Question centrale ---------- */
.question { padding-top: clamp(72px, 10vw, 144px); }
.question-in { border-top: var(--trait-m) solid var(--noir); padding-top: 20px; }
.question blockquote { margin: 28px 0 0; }
.question blockquote p {
  font-size: clamp(2rem, 4.9vw, 4.25rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
  word-spacing: 0.05em;
  color: var(--noir);
  max-width: 21ch;
  text-wrap: balance;
}
.question blockquote em { font-style: normal; color: var(--rouge); }

/* ---------- Qui parle ---------- */
.qui { display: grid; grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
.qui-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.portrait { border-top: var(--trait-l) solid var(--noir); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.04); background: var(--encadre); }
.portrait figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--gris); line-height: 1.4; }
.qui-texte p { font-size: 1.1875rem; line-height: 1.55; max-width: 40rem; }
.qui-texte p + p { margin-top: 1em; }

/* Repères : quatre dates, un trait chacune. */
.reperes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin: 40px 0 0; padding: 0; list-style: none; }
.reperes li { border-top: var(--trait-m) solid var(--noir); padding-top: 12px; }
.reperes b { display: block; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--marine); font-variant-numeric: tabular-nums; }
.reperes li:first-child b { color: var(--rouge); }
.reperes span { display: block; margin-top: 8px; font-size: 0.9375rem; line-height: 1.35; color: var(--gris-f); }
.reperes strong { display: block; font-size: 1rem; }

/* ---------- Fin de page ---------- */
.fin { padding-top: clamp(80px, 11vw, 160px); }
.fin-in { border-top: var(--trait-l) solid var(--noir); padding-top: clamp(28px, 4vw, 48px); }
.fin h2 { font-size: clamp(2.125rem, 5.4vw, 4.75rem); line-height: 0.98; max-width: 18ch; }
.fin .sous { margin-top: 24px; max-width: 54ch; color: var(--gris-f); }
.fin .mini { margin-top: 28px; font-size: 0.9375rem; color: var(--gris-f); }

/* ---------- Adaptation ---------- */
@media (max-width: 60em) {
  .refs-in, .qui { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .qui-corps { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 360px; }
  .mods { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 40em) {
  .ph h1 { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .btn { width: 100%; justify-content: space-between; }
  dl.lecture > div { grid-template-columns: 1fr; gap: 2px; }
}