/* ============================================================
   87seconds — V2 RESPONSIVE · pages légales
   Cookie management · Personal data · Legal notice
   ------------------------------------------------------------
   Ces pages étaient déjà en flux normal dans la V1 : la conversion consiste à
   remplacer les deux canvases à largeur fixe (1440 / 390) par un conteneur
   fluide et une typographie interpolée entre les deux ancres de maquette.
   ============================================================ */

:root {
  --fs-annex-title: clamp(28px, calc(28px + 20 * (100vw - 390px) / 1050), 48px);
  --fs-annex-body:  clamp(16px, calc(16px +  4 * (100vw - 390px) / 1050), 20px);
  --fs-annex-h2:    clamp(20px, calc(20px +  6 * (100vw - 390px) / 1050), 26px);
  --fs-annex-h3:    clamp(16px, calc(16px +  2 * (100vw - 390px) / 1050), 18px);
  --fs-annex-card:  clamp(18px, calc(18px +  4 * (100vw - 390px) / 1050), 22px);
}

body.annex { background: #fff; }
/* Le titre doit passer sous le header, qui est en absolu au-dessus de la page. */
.annex-main { padding-block: calc(var(--header-h) + clamp(38px, 3vw, 20px)) var(--sec-pad); }
.annex-title { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-annex-title); line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.annex-rule { border: 0; border-top: 1px solid rgba(15,17,34,.25); margin: clamp(28px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px); }

.annex-body { font-family: var(--f-alb); font-size: var(--fs-annex-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--black); }
.annex-body h2 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-annex-h2); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); margin: clamp(36px, 4.5vw, 48px) 0 clamp(12px, 1.5vw, 16px); }
.annex-body h2:first-child { margin-top: 0; }
.annex-body h3 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-annex-h3); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: #72a5e3; margin: clamp(20px, 2.5vw, 26px) 0 6px; }
.annex-body p { margin: 0 0 16px; }
.annex-body ul { margin: 0 0 16px; padding-left: 24px; list-style: disc; }
.annex-body li { margin-bottom: 6px; }
.annex-body a { color: var(--black); text-decoration: underline; }
.annex-body a:hover { text-decoration: none; }
/* Les adresses et URL longues ne doivent pas déborder de la colonne. */
.annex-body a, .annex-card a { overflow-wrap: anywhere; }

/* Encarts côte à côte (Legal notice : éditeur / hébergeur) — empilés en mobile,
   et ferrés à gauche comme le board « -mobil » de la maquette. */
.annex-cards { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.annex-card { border: 2px solid var(--black); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; text-align: left; }
.annex-card .card-title { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-annex-card); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); margin: 0; }
.annex-card p { margin: 0; }
@media (min-width: 768px) {
  .annex-cards { flex-direction: row; gap: 32px; }
  .annex-card { flex: 1; padding: 33px; align-items: center; text-align: center; }
}

/* Pied de page : ces pages n'ont pas le bloc CTA, seulement la barre de liens. */
.annex-foot { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 60px); }

/* ============================================================
   PAGE UTILITAIRE — 404
   Même socle de page que les légales, avec un titre en pastille. Les pages
   Contact (V149) et Thank you (V158) ont été supprimées du site.
   ============================================================ */
.annex-cap { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--black); border-radius: 50px; padding: 12px clamp(24px, 3vw, 40px); margin-bottom: clamp(32px, 4.5vw, 48px); max-width: 100%; }
.annex-cap h1 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-annex-h2); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.annex-cap h1 .l { font-weight: 300; }
/* Colonne de lecture bornée, comme la V1 (900px). */
.annex-body--narrow { max-width: 900px; }


/* ============================================================
   ARTICLE ÉDITORIAL — insight / business case
   ------------------------------------------------------------
   La V1 posait chaque paragraphe en ABSOLU, centré par `translate(-50%,-50%)`,
   sur un canvas de 6 883px de haut. En flux normal l'article se compose seul :
   titre, chapô, puis alternance de titres de section, sous-titres et
   paragraphes, tous centrés comme dans la maquette.
   ============================================================ */
:root {
  --fs-art-h1:  clamp(24px, calc(24px + 12 * (100vw - 390px) / 1050), 36px);
  --fs-art-h2:  clamp(22px, calc(22px + 13 * (100vw - 390px) / 1050), 35px);
  --fs-art-h3:  clamp(18px, calc(18px +  6 * (100vw - 390px) / 1050), 24px);
  --fs-art-p:   clamp(16px, calc(16px +  8 * (100vw - 390px) / 1050), 24px);
}
.art { display: flex; flex-direction: column; align-items: center; text-align: center; }
.art > * { max-width: 1248px; }
.art h1 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-art-h1); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; }
.art h2 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-art-h2); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; margin-top: clamp(40px, 6vw, 90px); }
/* Sous-titre d'un groupe : mis en gras dans la maquette, sans changement de corps.
   `text-transform` obligatoire — Unbounded ne s'utilise qu'en capitales, et `h1`
   comme `h2` juste au-dessus le portent déjà. */
.art h3 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-art-h3); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; margin-top: clamp(20px, 3vw, 34px); }
.art p { font-family: var(--f-alb); font-size: var(--fs-art-p); line-height: 1.2; letter-spacing: 0.02em; margin-top: clamp(12px, 1.8vw, 20px); }
.art a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.art .chapo { margin-top: clamp(20px, 3vw, 32px); }
/* Sections claires sur fond bleu : le texte passe en blanc. */
.art--light, .art--light h2, .art--light h3, .art--light p { color: #fff; }
/* Les `<br>` calent les lignes de la maquette large : neutralisés en colonne étroite. */
@media (max-width: 899px) { .art p br, .art .chapo br { display: none; } }
/* Libellé d'étape (« STEP 1 ») : même corps que le titre d'article dans la maquette. */
.art .step { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-art-h1); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; margin-top: clamp(40px, 6vw, 90px); }
.art .step + h2 { margin-top: clamp(8px, 1.2vw, 16px); }
/* Citation pleine largeur sur fond noir, en fin d'article. */
.art-quote { background: #000; }
.art-quote p { font-family: var(--f-unb); font-weight: 700; font-size: clamp(18px, calc(18px + 8 * (100vw - 390px) / 1050), 26px); line-height: 1.1; letter-spacing: -0.01em; text-align: center; color: #fff; max-width: 1104px; margin-inline: auto; }
@media (max-width: 899px) { .art-quote p br { display: none; } }

/* ============================================================
   BUSINESS CASE — bloc résultats et bandeau « Notre actualité »
   ============================================================ */
.case-intro { font-family: var(--f-alb); font-size: var(--fs-art-p); line-height: 1.2; letter-spacing: 0.02em; text-align: center; color: var(--cloud); }
.case-headline { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-art-h2); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: #fff; }
/* Résultats : grande capture à gauche, colonne logo + visuel + chiffres à droite
   (maquette : 660 et 656, gouttière 24). */
.result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 24px); }
.result-shot { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 660/591; }
.result-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.result-col { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px); }
.result-row { display: grid; grid-template-columns: minmax(0, 283fr) minmax(0, 349fr); gap: clamp(16px, 2.4vw, 24px); }
.result-logo { background: var(--night); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 23px 25px; aspect-ratio: 283/284; }
.result-logo img { width: 100%; height: auto; }
.result-visual { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 349/284; }
.result-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.result-kpi-card { border: 1px solid var(--black); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.result-kpi-card p { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-art-h3); line-height: 1.38; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
@media (min-width: 900px) {
  .result-grid { grid-template-columns: minmax(0, 660fr) minmax(0, 656fr); align-items: start; }
  .result-col { height: 100%; }
  .result-kpi-card { flex: 1; }
}

/* ---------- Bandeau « Notre actualité » ---------- */
.news { background: #000; }
/* Deux cartes empilées à gauche, une haute à droite — comme la grille Our work. */
.news-grid { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px); margin-top: var(--gap-md); }
.news-stack { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px); }
.news-card { position: relative; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px; height: 250px; }
.news-card img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card::after { content: ""; position: absolute; inset: 0; background: rgba(15,17,34,.5); }
.news-card:hover img.bg { transform: scale(1.05); }
.news-card span { position: relative; z-index: 1; font-family: var(--f-display); font-size: clamp(28px, calc(28px + 8 * (100vw - 390px) / 1050), 36px); line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: #fff; }
.news-more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 900px) {
  .news-grid { flex-direction: row; aspect-ratio: 1204/590.5; }
  .news-grid > * { flex: 1 1 0; min-width: 0; }
  .news-card { height: auto; }
  .news-stack > .news-card { flex: 1 1 0; }
  .news-more { justify-content: flex-end; }
}
.btn-ghost { display: inline-flex; align-items: center; gap: 18px; border: 2px solid #fff; border-radius: 13px; padding: 11px clamp(24px, 4vw, 45px); font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-ui); letter-spacing: -0.01em; text-transform: uppercase; color: #fff; transition: background-color .25s ease, color .25s ease; }
.btn-ghost img { width: 14.5px; height: 14.9px; }
.btn-ghost:hover { background: #fff; color: var(--black); }
.btn-ghost:hover img { filter: invert(1); }

/* ============================================================
   INSIGHT — mise en bandes (maquettes `112:4287` EN / `112:4369` FR)
   ------------------------------------------------------------
   L'article n'est plus une colonne blanche unique : il alterne des BANDES BLEUES,
   chacune ouverte par une pastille à cheval (« MASTERING NAVER SEO », « STEP 1 »…),
   et des sections blanches. La typographie, elle, ne change pas : `.art` était déjà
   centré et à la bonne échelle, `.art--light` passait déjà le texte en blanc.
   ============================================================ */
/* Les bandes se SUIVENT sans blanc entre elles : la pastille se pose à cheval sur la
   jonction, et c'est l'alternance bleu / blanc qui sépare les parties. Relevé sur le
   rendu de la maquette : bleu 777→1148 (chapeau), blanc jusqu'à 1583, bleu 1583→2873
   (étape 1), blanc jusqu'à 4116 (étape 2), bleu 4116→5011 (étape 3), blanc, puis le
   bandeau noir. L'étape 2 est donc BLANCHE, à l'inverse des deux autres.

   Rythme d'espacement de la maquette, identique en desktop et en mobile à l'échelle
   près : 80px entre deux blocs à 1440 (50 à 390), 24 entre deux sous-blocs, 12 entre
   un sous-titre et son paragraphe. Les gouttières génériques de `.art` (20px entre
   paragraphes) étaient bien trop serrées pour cette page. */
:root { --ins-gap: clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px); }
.ins-sec .art > h2, .ins-sec .art > p { margin-top: var(--ins-gap); }
.ins-sec .art > h3 { margin-top: 24px; }
/* PREMIER sous-titre d'un groupe : il ouvre un bloc, il prend donc la gouttière de
   bloc (80 à 1440, 50 en mobile) et non les 24px qui séparent deux sous-blocs.
   Sans cela, « we focus on four key areas: » était collé à sa première puce, alors
   que le paragraphe de clôture, lui, respirait déjà de 80px sous le dernier bloc. */
.ins-sec .art > h3.ins-h3-first { margin-top: var(--ins-gap); }
.ins-sec .art > h3 + p { margin-top: 12px; }
/* Premier titre d'une section : c'est la pastille à cheval (ou la gouttière de
   section, quand il n'y en a pas) qui pose le dégagement.
   ⚠ La rangée de pastille est EXCLUE : sa marge haute négative est précisément ce
   qui la fait chevaucher la limite entre deux blocs. La remettre à zéro la
   redescendait de 100px À L'INTÉRIEUR de la bande — le défaut signalé. */
.ins-sec .art > *:first-child:not(.cap-row), .ins-h2-first { margin-top: 0 !important; }
/* Titre d'appel en bleu clair, comme les accroches des blocs d'expertise ; le
   paragraphe qui le suit est en gras dans la maquette. */
.ins-accent { color: #72a5e3; }
.ins-accent + p { font-weight: 700; }

/* ============================================================
   PAGE D'ACTUALITÉ (news-87seconds)
   Même socle que les insights — `.art` pour la colonne de texte, `.ins-sec` pour
   le rythme — avec trois ajouts propres à la maquette (board `393:12275`).
   ============================================================ */
/* Le bandeau ne porte AUCUNE image : la maquette y met le seul dégradé bleu du
   socle, que `.xp-blue::before` peint déjà. On lui donne donc une hauteur, et
   rien d'autre. Cotes du board : 390 × 500 en mobile, 1440 × 525 en desktop.
   Un plancher couvre l'en-tête fixe sur les fenêtres très basses. */
.news-hero { aspect-ratio: 390/500; min-height: 320px; }
@media (min-width: 900px) { .news-hero { aspect-ratio: 1440/525; } }

/* Citation de fin : fond noir, guillemet ouvrant en gros, texte centré dans une
   colonne plus étroite, signature ferrée à gauche sous le bloc (board 1004 de
   colonne pour 938 de texte). La signature est en gras de la fonte de texte et
   NON en Unbounded : elle est en casse normale, et Unbounded ne s'emploie qu'en
   capitales. */
.news-quote { background: #000; }
.news-quote .nq { max-width: 1004px; margin: 0 auto; }
.news-quote .nq-mark { display: block; font-family: var(--f-unb); font-weight: 900;
  font-size: clamp(38px, calc(38px + 26 * (100vw - 390px) / 1050), 64px); line-height: .7; color: #fff; }
.news-quote blockquote { margin: 0; }
.news-quote blockquote p { max-width: 938px; margin: clamp(22px, 3vw, 34px) auto 0;
  font-family: var(--f-alb); font-size: var(--fs-art-p); line-height: 1.35; letter-spacing: 0.02em;
  text-align: center; color: #fff; }
.news-quote .nq-sign { margin-top: clamp(26px, 3.6vw, 44px);
  font-family: var(--f-alb); font-size: var(--fs-art-p); line-height: 1.3; color: #fff; }
.news-quote .nq-sign b { font-weight: 700; }

/* Le titre de l'actualité est long : il est calé sur trois lignes en français,
   deux en anglais, par des `<br>` — même principe qu'en V142 pour les pastilles
   de business case. Sous 900 la colonne est trop étroite pour que la coupe serve,
   le texte se recompose seul et `balance` évite le mot orphelin. */
.ins-sec .cap .cap-block { text-wrap: balance; }
@media (max-width: 899px) { .ins-sec .cap .cap-block br { display: none; } }

/* ============================================================
   BUSINESS CASE MICHELIN — recalage sur les deux boards
   (`123:17927` desktop 1440 · `123:17858` mobile 390)
   ------------------------------------------------------------
   La page reprenait les tokens génériques de l'article (`--fs-art-*`), les
   pastilles de l'ancien socle (demi-65px figé) et des paragraphes séparés par des
   `<br><br>`. Les deux boards donnent une échelle et un rythme propres :

     · corps 20 → 24 (interligne 1,1 → 1,2), accroche 22 → 24, titre 22 → 32,
       chiffres 22 → 27 (interligne 1,09), puces 16 → 20 ;
     · 50 (390) → 80 (1440) entre deux blocs, UNE LIGNE VIDE entre deux
       paragraphes d'un même bloc, 8px entre deux puces ;
     · interlettrage +2 % en mobile, −1 % en desktop (les deux boards diffèrent) ;
     · bento des résultats : la rangée est au ratio 1204/590 et ses quatre blocs
       font 283 — la capture de gauche fait donc toute la hauteur de la colonne de
       droite (ratio porté par la RANGÉE, jamais par un enfant étiré : leçon V48).

   Tout est porté par `.case-page` / `.case-sec` : les pastilles et les blocs de la
   famille `xp-*` sont partagés avec les pages piliers, `.news-*` avec `landing`.
   ============================================================ */
:root {
  --fs-case-p:     clamp(20px, calc(20px +  4 * (100vw - 390px) / 1050), 24px);
  --fs-case-punch: clamp(22px, calc(22px +  2 * (100vw - 390px) / 1050), 24px);
  --fs-case-h2:    clamp(22px, calc(22px + 10 * (100vw - 390px) / 1050), 32px);
  --fs-case-kpi:   clamp(22px, calc(22px +  5 * (100vw - 390px) / 1050), 27px);
  --fs-case-body:  clamp(16px, calc(16px +  4 * (100vw - 390px) / 1050), 20px);
  --case-gap:      clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px);
  /* Demi-hauteur RÉELLE de la pastille : 2 bordures + 2 × 11 de padding + 1,2 ligne.
     `cap-astride--exact` la remonte de cette valeur ; le bloc suivant doit donc la
     rendre pour que l'écart VU sous la pastille soit exactement --case-gap. */
  --case-cap-half: calc(13px + 0.6 * var(--fs-seclabel));
}

/* ---------- Hero ---------- */
/* « MICHELIN » fait 8 lettres : au corps des pages piliers (72 en mobile) le mot
   sortait de l'écran de 60px à 390. Le board mobile le donne à 351px de large sur
   390, soit 56 ; le desktop à 802 sur 1440, soit les 128 du socle.
   Il est aussi CENTRÉ ici, sans le décalage de 3,9 % des pages piliers. */
.case-page .hero-word { font-size: clamp(56px, calc(56px + 72 * (100vw - 390px) / 1050), 128px); margin-left: 0; }

/* ---------- Rythme commun des sections ---------- */
/* Écart sous une pastille à cheval : --case-gap mesuré depuis son bord BAS visible. */
/* `--cap-half` est posée par `initCaseCapOffset` (main.js) : c'est la demi-hauteur
   MESURÉE de la pastille, donc juste à toute largeur et à tout nombre de lignes.
   Les valeurs ci-dessous ne servent que de repli sans script. */
.case-sec .cap-astride--exact + * { margin-top: calc(var(--case-gap) - var(--cap-half, var(--case-cap-half))); }
/* `--case-cap-half` suppose UNE ligne. `cap-astride--exact` recentre bien la
   pastille sur la limite quel que soit son nombre de lignes (le `translateY(-50%)`
   porte sur sa hauteur réelle), mais la marge ci-dessus, elle, ne compense qu'une
   demi-ligne : chaque ligne SUPPLÉMENTAIRE repousse le bloc suivant d'une
   demi-ligne. Mesuré à 1440 avant correction : 131 sous la pastille de titre
   (2 lignes) contre 108 sous « LE RÉSULTAT » (1 ligne), sur la même page.
   La correction exacte est mesurée par `initCaseCapOffset` (main.js). Ce qui suit
   est le REPLI sans script : on rattrape 0,6 × le corps par `<br>` présent, ce qui
   est juste partout où la coupe calée tient en deux (ou trois) lignes — donc à
   1440, la largeur de référence. Le test porte sur le `<br>` lui-même et non sur
   une classe posée à la main : si le libellé change — la traduction FR du titre
   Michelin est encore à valider — le repli suit tout seul. */
@media (min-width: 900px) {
  .case-sec .cap-astride--exact:has(.sec-label br) + * {
    margin-top: calc(var(--case-gap) - var(--cap-half, calc(var(--case-cap-half) + 0.6 * var(--fs-seclabel))));
  }
  .case-sec .cap-astride--exact:has(.sec-label br ~ br) + * {
    margin-top: calc(var(--case-gap) - var(--cap-half, calc(var(--case-cap-half) + 1.2 * var(--fs-seclabel))));
  }
}
.case-sec .case-punch, .case-sec .case-headline + .case-intro { margin-top: var(--case-gap); }
/* Deux paragraphes d'un même bloc : une ligne vide, comme les boards. */
.case-sec .case-intro + .case-intro { margin-top: 1.1em; }

.case-page .case-intro { font-size: var(--fs-case-p); line-height: 1.1; letter-spacing: 0.02em; }
.case-punch { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-case-punch); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--cloud); }
.case-page .case-headline { font-size: var(--fs-case-h2); line-height: 1; letter-spacing: -0.01em; color: var(--cloud); }
/* ---------- Titre de cas en pastille ---------- */
/* V142 — La pastille ÉPOUSE son texte tant qu'il tient sur une ligne : c'est un
   item flex en `inline-flex`, sa base est sa largeur max-content. Dès que le
   texte déborde, l'item se réduit à 100 % de la rangée et le texte se coupe où
   il tombe : pastille pleine largeur (1204 à 1440) avec, une fois sur deux, un
   MOT ORPHELIN sur la 2e ligne — « LE CLIENTÉLISME WHATSAPP DE LUXE À GRANDE /
   ÉCHELLE », « … RAYONS DE / PHARMACIE », « … RENCONTRE / L'ATHLÉTISME ».
   Depuis la V141 la pastille porte le TITRE du cas et non plus « NOTRE APPROCHE » :
   mesuré au rendu, aucun des 26 titres ne tient sur une ligne en dessous de
   ~1130px, et en français aucun ne tient même à 1440 (107 % à 200 % du disponible).
   La coupe est donc CALÉE dans le HTML par un `<br>`, comme les `.case-intro` et
   les `.result-kpi-card` : la largeur max-content redevient celle de la plus
   longue des deux lignes, donc la pastille épouse de nouveau son texte.
   Point de coupe arbitré à la main sur deux critères — équilibre des lignes mesuré
   au rendu, et propreté syntaxique : pas d'article ni de préposition en fin de
   ligne, pas de nom séparé de son adjectif. Banc : `_outils-qa/banc-titre-case.html`.
   Seul « TRANSFORMER UNE CHAÎNE DE PRODUCTION DE CONTENU DERMO-COSMÉTIQUE À
   GRANDE ÉCHELLE » est sur TROIS lignes : à 200 % du disponible, sa meilleure
   coupe en deux donne encore une pastille de 1247 pour 1204 de contenu. */
.case-page .cap .sec-label { text-wrap: balance; }

/* Les `<br>` calent les lignes des boards LARGES ; en colonne étroite le texte se
   recompose seul (même principe que `.xp-intro` / `.art p`). Le `<br>` de la
   pastille suit la même règle : sous 900 la colonne est trop étroite pour que la
   coupe calée serve encore, `text-wrap: balance` prend le relais. */
@media (max-width: 899px) {
  .case-page .case-intro br, .case-page .case-punch br, .case-page .result-kpi-card br,
  .case-page .cap .sec-label br { display: none; }
}
@media (min-width: 900px) {
  .case-page .case-intro { line-height: 1.2; letter-spacing: -0.01em; }
  .case-page .case-punch, .case-page .case-headline { line-height: 1.2; }
  .case-sec .case-intro + .case-intro { margin-top: 1.2em; }
}

/* ---------- OUR RESPONSE ---------- */
/* Le bloc fait 1204 dans le board (577 pour l'image, 80 de gouttière, 547 pour la
   colonne) : c'est `.wrap`, et non le `.wrap-wide` de 1302 des pages piliers.
   La pastille n'y est PAS à cheval — elle ouvre la colonne, 50px sous la bande
   bleue — et elle occupe toute la largeur de la colonne en desktop. */
.case-sec--resp { padding-top: 50px; }
.case-page .xp-block--case { gap: 32px; }
/* Le board mobile ferre la colonne À GAUCHE (pastille comprise), là où les pages
   piliers la centrent sous 900px. */
.case-page .xp-body { gap: clamp(32px, calc(32px + 18 * (100vw - 390px) / 1050), 50px); align-items: flex-start; text-align: left; }
.case-page .xp-list { font-size: var(--fs-case-body); }
/* V138 — RÉGRESSION corrigée. Cette règle réintroduisait `box-shadow: 0 4px 4px
   rgba(0,0,0,.25)` — la valeur par défaut de Figma, recopiée telle quelle. À 4 px de
   flou pour 4 px de décalage elle ne se lit pas comme une élévation mais comme un
   SECOND RECTANGLE décalé : bande grise à arête franche sous le visuel, filet
   vertical le long du bord droit.
   Or **la V50 a retiré l'ombre des visuels à la demande du client**, en nommant
   explicitement le business case Michelin parmi les blocs concernés ; la règle de
   base `.xp-media--solo` (r-expertise.css) n'en porte donc aucune. C'est la reprise
   responsive qui l'a rétablie ici, plus spécifique, donc gagnante. On l'enlève :
   plus aucun visuel du site n'est ombré. Comparatif des variantes envisagées, si le
   client revenait sur la V50 : `_outils-qa/banc-ombre-case.html`. */
.case-page .xp-media--solo { aspect-ratio: 577/680; border-radius: clamp(10px, calc(10px + 6 * (100vw - 390px) / 1050), 16px); }
@media (min-width: 900px) {
  .case-sec--resp { padding-top: 48px; }
  .case-page .xp-block--case { grid-template-columns: minmax(0, 577fr) minmax(0, 547fr); column-gap: 80px; }
  .case-sec--resp .xp-body .cap-row, .case-sec--resp .xp-body .cap { width: 100%; }
}

/* ============================================================
   BLOC « NOTRE RÉPONSE » EN LISTE JALONNÉE
   Gabarit du board Henkel (`401:3036`), qui n'a ni visuel ni colonnes : pastille
   à cheval sur la limite bleu/blanc, accroche bleue centrée, sous-titre noir
   centré, puis une liste de points jalonnés — un filet horizontal venant du bord
   de la page, une pastille noire, et en regard le titre puis son paragraphe.
   Cotes relevées sur les deux cadres du board : la pastille noire est à 23px du
   bord de colonne en mobile et 148 en desktop, le texte à 65 et 191.
   ============================================================ */
:root {
  --step-dot:  clamp(23px, calc(23px + 125 * (100vw - 390px) / 1050), 148px);
  --step-text: clamp(65px, calc(65px + 126 * (100vw - 390px) / 1050), 191px);
  --step-r:    clamp(16px, calc(16px +   8 * (100vw - 390px) / 1050),  24px);
  --step-h3:   clamp(18px, calc(18px +  14 * (100vw - 390px) / 1050),  32px);
}
/* Le filet part du bord de la FENÊTRE, pas de la colonne : `50% - 50vw` le fait
   remonter jusqu'au bord quelle que soit la largeur, et `overflow-x: clip` évite
   qu'il ne crée une barre de défilement. */
.case-sec--steps { overflow-x: clip; }
.case-sec--steps .steps-lead {
  font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-case-h2); line-height: 1.2;
  letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: #72a5e3; }
.case-sec--steps .steps-sub {
  font-family: var(--f-alb); font-size: var(--fs-case-p); line-height: 1.2; letter-spacing: 0.02em;
  text-align: center; color: var(--black); margin-top: clamp(16px, 2vw, 26px); }

.steps { list-style: none; margin: clamp(40px, 5vw, 76px) 0 0; padding: 0;
  display: grid; gap: clamp(26px, 3.4vw, 48px); }
.step { position: relative; padding-left: var(--step-text); }
.step::before, .step::after { content: ""; position: absolute; top: calc(.6 * var(--step-h3)); }
.step::before { left: calc(50% - 50vw); width: calc(50vw - 50% + var(--step-dot)); height: 1px;
  background: var(--black); }
.step::after { left: var(--step-dot); width: var(--step-r); height: var(--step-r);
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--black); }
.step h3 { font-family: var(--f-unb); font-weight: 700; font-size: var(--step-h3); line-height: 1.2;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); margin: 0; }
/* La maquette met le corps en BAS DE CASSE — « henkel », « elle garantit… ». On ne
   la suit pas : la V135 a déjà tranché ce point pour les piliers, une minuscule à
   un nom propre ou en début de phrase se lit comme une faute. */
.step p { font-family: var(--f-alb); font-size: var(--fs-case-body); line-height: 1.35;
  letter-spacing: 0.02em; color: var(--black); margin-top: clamp(8px, 1.1vw, 14px); }

/* ---------- THE RESULT : le bento ---------- */
/* Écart entre la bande bleue et le bento : 50 en mobile, 118 à 1440. */
.case-sec--work { padding-top: clamp(50px, calc(50px + 68 * (100vw - 390px) / 1050), 118px); }
.case-page .result-shot { aspect-ratio: 350/250; }
/* Fond NOIR (#010104 dans les deux boards) et non le bleu nuit du socle. */
.case-page .result-logo { aspect-ratio: 350/190; background: #010104; }
/* Le visuel moto n'est pas dans le board mobile : la carte du logo y prend toute
   la largeur. Il revient à partir de 900. */
.case-page .result-row { grid-template-columns: minmax(0, 1fr); }
.case-page .result-visual { display: none; }
.case-page .result-kpi-card { border-width: 2px; }
.case-page .result-kpi-card p { font-size: var(--fs-case-kpi); line-height: 1.09; text-align: left; }
.case-page .result-kpi-card p + p { margin-top: 1.09em; }
@media (min-width: 900px) {
  /* Le RATIO est porté par la rangée (1204 × 590) : la capture s'étire alors sur
     toute la hauteur, et la colonne de droite se partage en deux blocs de 283. */
  .case-page .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; aspect-ratio: 1204/590; }
  .case-page .result-shot { aspect-ratio: auto; height: 100%; }
  /* Deux pistes ÉGALES, et non deux `flex: 1` : la carte des chiffres a 24 de
     padding et 2 de bordure, et en `border-box` une base flex de 0 se clampe à ces
     52px — elle prenait 309 pour 257 à la rangée du dessus. */
  .case-page .result-col { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .case-page .result-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-page .result-logo { aspect-ratio: auto; }
  .case-page .result-visual { display: block; aspect-ratio: auto; }
}

/* ---------- Bandeau « Notre actualité » ---------- */
/* Board mobile : deux petites cartes carrées côte à côte (167) puis la grande
   (350), coins à 10, titres en Unbounded Bold — 16 pour les petites, 30 pour la
   grande. Le board desktop de CETTE page compose encore ces titres en Special
   Gothic, comme l'ancien composant ; la refonte d'Our work (`112:7800`, V61) et le
   board mobile les donnent tous deux en Unbounded : c'est cette version qui est
   retenue, avec les 36 du desktop. */
.case-sec--news .cap-astride--exact + .news-grid { margin-top: calc(clamp(50px, calc(50px + 75 * (100vw - 390px) / 1050), 125px) - var(--cap-half, var(--case-cap-half))); }
/* En grille et non en flex : les cartes ont 24 de padding, et une base flex de 0 en
   `border-box` se clampe à 24 — la pile de gauche mesurait 566 pour 614 à la grande
   carte, là où la maquette donne deux colonnes égales (590). */
.case-page .news-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.case-page .news-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-page .news-card { height: auto; border-radius: clamp(10px, calc(10px + 6 * (100vw - 390px) / 1050), 16px); }
.case-page .news-stack > .news-card, .case-page .news-card--lg { aspect-ratio: 1/1; }
.case-page .news-card span { font-family: var(--f-unb); font-weight: 700; }
.case-page .news-stack .news-card span { font-size: clamp(16px, calc(16px + 20 * (100vw - 390px) / 1050), 36px); }
.case-page .news-card--lg span { font-size: clamp(30px, calc(30px + 6 * (100vw - 390px) / 1050), 36px); }
/* La grande carte est à peine voilée dans le board (18 %), contre 50 % pour les
   deux petites. */
.case-page .news-card--lg::after { background: rgba(15,17,34,.18); }
.case-page .news-more { justify-content: flex-end; margin-top: 50px; }
.case-page .btn-ghost { font-size: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px); }
@media (min-width: 900px) {
  .case-page .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-page .news-stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .case-page .news-stack > .news-card, .case-page .news-card--lg { aspect-ratio: auto; }
}