/* ============================================================
   87seconds — V2 RESPONSIVE · famille « expertise »
   ------------------------------------------------------------
   Feuille partagée par What we do et les 3 piliers (Create, Deploy, Manage) :
   ces pages emploient les mêmes composants (capsule de bloc, bloc de texte
   riche, capsule « Powered by », mosaïque de visuels, cartes KPI).

   Cotes desktop : maquette Figma « WHAT WE DO 6 » (168:43697, 1440).
   Cotes mobile  : « iPhone 13 & 14 - 2 » (334:427, 390).
   Comme sur la homepage, ces deux jeux servent d'ANCRES à la typographie
   fluide : interpolation linéaire entre 390 et 1440, puis bornage.
   ============================================================ */

:root {
  --fs-intro:    clamp(22px, calc(22px + 10 * (100vw - 390px) / 1050), 32px);
  --fs-pill-h:   clamp(24px, calc(24px +  6 * (100vw - 390px) / 1050), 30px);
  --fs-pill-p:   clamp(20px, calc(20px +  6 * (100vw - 390px) / 1050), 26px);
  --fs-capblock: clamp(24px, calc(24px + 12 * (100vw - 390px) / 1050), 36px);
  --fs-lead:     clamp(20px, calc(20px +  4 * (100vw - 390px) / 1050), 24px);
  --fs-xp:       clamp(16px, calc(16px +  8 * (100vw - 390px) / 1050), 24px);
  --fs-powered:  clamp(20px, calc(20px +  3 * (100vw - 390px) / 1050), 23px);
  --fs-obsess:   clamp(20px, calc(20px +  6 * (100vw - 390px) / 1050), 26px);
  --fs-kpi-num:  clamp(37px, calc(37px + 68 * (100vw - 390px) / 1050), 105px);
  --fs-kpi-lab:  clamp(16px, calc(16px + 14 * (100vw - 390px) / 1050), 30px);
  /* Pages piliers (Create / Deploy / Manage) */
  --fs-heroword:   clamp(72px, calc(72px + 56 * (100vw - 390px) / 1050), 128px);
  --fs-introtitle: clamp(22px, calc(22px +  8 * (100vw - 390px) / 1050), 30px);
  --fs-introbody:  clamp(20px, calc(20px +  4 * (100vw - 390px) / 1050), 24px);
  --fs-introclip:  clamp(20px, calc(20px +  6 * (100vw - 390px) / 1050), 26px);
  --fs-aglabel:    clamp(16px, calc(16px +  4 * (100vw - 390px) / 1050), 20px);
  /* Les blocs d'expertise occupent une bande PLUS LARGE que la colonne de texte
     standard : 1302px à 1440 (x63 → x1365 dans la maquette) contre 1204. D'où une
     gouttière propre, qui rejoint les 20px du mobile. */
  --gutter-wide: clamp(20px, calc(20px + 49 * (100vw - 390px) / 1050), 69px);
}

/* Conteneur large — même principe que `.wrap` : `max-width` porte sur la boîte de
   bordure, il faut donc y ajouter les deux gouttières pour obtenir 1302 de contenu. */
.wrap-wide { width: 100%; max-width: calc(1302px + 2 * var(--gutter-wide)); margin-inline: auto; padding-inline: var(--gutter-wide); }

/* ============================================================
   HERO — image plein cadre
   Hauteur : 600 sur la maquette mobile, 753 sur la desktop.
   Le cadrage n'est PAS reproduit en pourcentages (ils ne survivent pas au
   changement de ratio du cadre) mais en `object-fit: cover` + `object-position`,
   déduit des cotes Figma : la fenêtre desktop montre l'image centrée
   verticalement et à 48 % horizontalement ; la maquette mobile, elle, cale
   l'image en haut (62 % top).
   ============================================================ */
/* `--xp-hero-h` : hauteur desktop de la maquette — 753 sur What we do, 785 sur les
   pages piliers. L'ancre mobile est 600 partout, d'où `--xp-hero-d`, l'écart entre
   les deux ancres.
   ATTENTION : `--xp-hero-d` est SANS UNITÉ, et ce n'est pas un détail. Dans un
   `calc`, une longueur ne peut pas être multipliée par une longueur : écrire
   `(var(--xp-hero-h) - 600px) * (100vw - 390px)` rend la déclaration invalide, elle
   est ignorée en bloc et le hero s'effondre à la hauteur de son contenu — 0px ici,
   puisque l'image est en absolu. C'est le défaut corrigé en V29. */
.xp-hero { position: relative; width: 100%; overflow: hidden;
  /* Le bandeau SUIT la hauteur de la fenêtre — voir --banner-fill dans r-base.css —
     et ne descend jamais sous 656px. La cote de maquette (753/785) ne le pilote plus :
     c'est la fenêtre qui commande, pour que le début de la section suivante reste
     visible quelle que soit sa hauteur. */
  height: var(--banner-fill); }
.xp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% top; }
@media (min-width: 900px) { .xp-hero img { object-position: 48% 50%; } }

/* Mot géant des pages piliers (CREATE / DEPLOY / MANAGE), posé sur le visuel.
   La maquette desktop le décale de 56px à droite du centre (3,9 % de 1440) pour
   dégager le sujet de la photo ; en mobile il est centré. */
.xp-hero--word { display: flex; align-items: center; justify-content: center; }
.hero-word { position: relative; z-index: 2; font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-heroword); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: #fff; white-space: nowrap; }
/* « MANAGE » est le plus large des trois mots piliers : 416px au corps commun de 72,
   pour 350 utiles à 390 — il était rogné des deux côtés par le hero. Son ancre
   mobile descend donc à 58 (335px), les autres pages n'y touchent pas ; à 1440 il
   retrouve les 128 du socle. Même correction que « MICHELIN » en V67. */
.man .hero-word { font-size: clamp(58px, calc(58px + 70 * (100vw - 390px) / 1050), 128px); }
@media (min-width: 900px) { .hero-word { margin-left: 3.9%; } }

/* ============================================================
   OUR EXPERTISE — accroche + 3 piliers
   ------------------------------------------------------------
   Le fond diffère entre les deux maquettes (mobile : fond-bleu1-m ; desktop :
   fond-bleu4, miroité horizontalement) : il passe donc par un `background` CSS
   commutable porté par un pseudo-élément — et non par une image du DOM, car il
   faut pouvoir le retourner sans retourner le contenu.
   ============================================================ */
.xp-blue { position: relative; }
.xp-blue::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../img/what-we-do/fond-bleu1-m.webp') center / cover no-repeat; }
@media (min-width: 900px) {
  .xp-blue::before { background-image: url('../img/home/fond-bleu2.webp'); transform: scaleX(-1); }
}

.xp-intro { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-intro); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: #fff; }
@media (min-width: 900px) { .xp-intro { line-height: 1.2; } }

/* Les `<br>` de l'accroche et des chapeaux calent les lignes de la maquette DESKTOP
   (bandes de 1258 et 645px). En dessous de 900px la colonne est bien plus étroite :
   les conserver donnait des lignes très inégales (« … FROM THE / FIRST / IDEA … »).
   On les neutralise sous le point de rupture et le texte se recompose seul — même
   principe que les descriptions de cas de la homepage. */
@media (max-width: 899px) {
  .xp-intro br, .xp-lead br { display: none; }
}

/* Le trait lumineux part du BORD de l'écran — maquette desktop (`Frame 1053` à x0
   dans un `Frame 970` à x1 sur 1440) ET maquette mobile (x0 sur 390) : les piliers
   sont donc hors de `.wrap` et SANS gouttière gauche, à toutes les largeurs. Seule
   la gouttière droite subsiste, pour que le texte respire.
   L'écart trait ↔ texte vaut 32px dans les deux maquettes (349−317 en desktop,
   84−52 en mobile) : il est donc constant, et non fluide. */
.pillars { display: flex; flex-direction: column; gap: 24px; margin-top: var(--gap-lg); padding-left: 0; padding-right: var(--gutter); }
.pillar { display: flex; gap: 32px; align-items: flex-start; }
/* Trait + point dessinés en CSS (la maquette les fournit en SVG déformés) */
.pillar .ico { flex: none; position: relative; margin-top: 4px;
  --dot: clamp(12px, calc(12px + 10 * (100vw - 390px) / 1050), 22px);
  width: clamp(52px, calc(52px + 265 * (100vw - 390px) / 1050), 317px);
  height: clamp(20px, calc(20px + 25 * (100vw - 390px) / 1050), 45px); }
/* Le trait s'arrête au CENTRE du point, d'où le retrait d'un demi-diamètre. */
.pillar .ico::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(100% - var(--dot) / 2); height: 2px; transform: translateY(-50%); background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.5); }
.pillar .ico::after { content: ""; position: absolute; right: 0; top: 50%; width: var(--dot); height: var(--dot); transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,1), 0 0 22px rgba(255,255,255,.8); }
.pillar h2 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-pill-h); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.pillar p { font-family: var(--f-alb); font-size: var(--fs-pill-p); line-height: 1.3; letter-spacing: 0.02em; text-transform: lowercase; color: #fff; margin-top: clamp(8px, 1.2vw, 12px); }
/* V135 — en anglais le pilier est UNE phrase coupée en deux : « WE CREATE » +
   « content that stops the scroll. » ; le bas de casse forcé sert ce raccord.
   En français le titre redevient une étiquette (« CREATE ») et le paragraphe une
   phrase complète (« Nous créons… ») : la forcer en bas de casse lui retirerait
   sa capitale initiale. Bornée au FR — le raccord anglais est inchangé. */
html[lang="fr"] .pillar p { text-transform: none; }

/* ============================================================
   ONE OBSESSION — capsule pleine largeur
   Le texte est REMPLI PAR L'IMAGE (`why-us-bg`) à toutes les largeurs et dans les
   deux langues, comme les deux maquettes (desktop 0:6080, mobile 0:6119).

   Le cadrage n'est PAS celui que le connecteur Figma recopie (`253.55% 5909.64%`
   / `3.12% 10.1%`) : appliquées en CSS, ces valeurs échantillonnent une bande qui
   sort de la manche coral et finit dans le CIEL — le dernier tiers du texte
   ressortait en BLEU (sonde faite sur des boîtes de 1258, 1150 et 350px : la même
   bande dans les trois cas, le pourcentage rendant la région échantillonnée
   indépendante de la boîte). C'est cette bande, et non le repli sur plusieurs
   lignes, qui produisait la « couture coral/bleu » constatée en V1 — d'où le
   rabattement sur du coral plein en mobile et en FR.

   Le cadrage ci-dessous a été retrouvé en cherchant, dans la photo, la bande dont
   le profil de couleur colle au rendu Figma (dégradé brique → coral vif → carmin,
   écart moyen 14/255). Elle est entièrement dans le tissu : plus de bleu possible,
   quel que soit le nombre de lignes.
   ============================================================ */
/* À CHEVAL sur la limite bande bleue / blocs, comme les deux boards (V72) : la
   rangée a une hauteur NULLE et centre son enfant, qui déborde donc à parts égales
   de part et d'autre de la jonction — quel que soit le nombre de lignes de la
   capsule (1 à 1440, 2 en desktop étroit, 4 en mobile, davantage en français).
   Elle était simplement posée sous la bande, dans le blanc. */
.obsession-row { display: flex; justify-content: center; align-items: center; height: 0; margin-top: 0; position: relative; z-index: 3; }
/* Demi-hauteur de la capsule, que le premier bloc doit rendre pour retrouver les
   80px de la maquette : 2 × padding + bordures + n lignes. Le nombre de lignes est
   stable par palier (4 en mobile, 2 en desktop étroit et en FR, 1 en EN à partir de
   1440), ce qui rend le calcul exact — vérifié aux quatre paliers, EN et FR.
   Les variables sont portées par la PAGE : `.xp-section--first` est un frère de la
   rangée, il n'hériterait pas de celles posées sur elle. */
.wwd { --obs-lines: 4; --obs-half: calc((24px + var(--obs-lines) * 1.1 * var(--fs-obsess)) / 2); }
.obsession { background: #fff; border: 1px solid var(--black); border-radius: 6px; padding: 11px 24px; width: 100%; text-align: center; }
.obsession-text { display: block; font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-obsess); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase;
  background-image: url('../img/what-we-do/why-us-bg.webp'); background-size: 666.67% 2443.33%; background-position: 26.95% 36.7%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (min-width: 900px) {
  .obsession { width: auto; border-width: 2px; padding: 11px 24px; }
  .wwd { --obs-lines: 2; --obs-half: calc((26px + var(--obs-lines) * 1.3 * var(--fs-obsess)) / 2); }
  .obsession-text { line-height: 1.3; }
  /* La seconde moitié de la phrase est d'un cran plus petite dans la maquette. */
  .obsession-text .sm { font-size: calc(24 / 26 * 1em); }
}
/* Une seule ligne à partir de 1440 seulement : la phrase fait 41,5 × le corps, soit
   1080px à 26px, et la colonne n'offre ces 1112px utiles qu'à la largeur de maquette
   (1022px nécessaires pour 917 disponibles à 1200 : elle sortait de l'écran).
   En dessous, le texte se replie — le remplissage, lui, ne bouge pas. */
@media (min-width: 1440px) {
  .obsession-text { white-space: nowrap; }
  .wwd { --obs-lines: 1; }
}
/* VARIANTE FR — la phrase française ne tient sur une ligne à AUCUNE largeur : elle
   fait 46,5 × le corps (1208px à 26px) pour 1112px utiles, et la colonne de texte est
   plafonnée à 1204px quelle que soit la taille de l'écran. La capsule FR reste donc
   repliée partout — remplissage par image compris. */
html[lang="fr"] .obsession-text { white-space: normal; }
/* La capsule FR reste sur deux lignes en desktop, y compris au-delà de 1440. */
@media (min-width: 1440px) { html[lang="fr"] .wwd { --obs-lines: 2; } }

/* ============================================================
   INTRODUCTION des pages piliers — titre, corps, capsule
   Le corps a sa première moitié en gras et la seconde en normal (`.rg`), comme
   dans la maquette. La capsule reprend la mécanique de « One obsession » :
   remplissage par image, repliable.
   ============================================================ */
.intro { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vw, 40px); }
.intro-title { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-introtitle); line-height: 1.2; letter-spacing: 0.016em; text-transform: uppercase; text-align: center; color: var(--black); }
.intro-body { font-family: var(--f-alb); font-weight: 700; font-size: var(--fs-introbody); line-height: 1.2; letter-spacing: 0.02em; text-align: center; color: var(--black); }
.intro-body .rg { font-weight: 400; }
.intro-cap { background: #fff; border: 1px solid var(--black); border-radius: 6px; padding: 11px 33px; width: 100%; text-align: center; }
.intro-clip { display: block; font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-introclip); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; }
@media (min-width: 900px) {
  .intro-cap { width: auto; border-width: 2px; padding: 8px clamp(20px, 3vw, 44px); }
  .intro-clip { line-height: 1.38; }
}
/* Les `<br>` du titre et du corps calent les lignes de la maquette large. */
@media (max-width: 899px) { .intro-title br, .intro-body br { display: none; } }

/* ============================================================
   BLOCS D'EXPERTISE — texte + visuels
   Desktop : 2 colonnes, visuels 577 / texte 645, gouttière 80 (maquette).
   `.xp--media-right` inverse la composition (bloc DEPLOY).
   Mobile : une colonne, texte CENTRÉ puis visuels — l'ordre de la maquette
   mobile, qui est aussi l'ordre du DOM (donc le bon ordre de lecture).
   ============================================================ */
/* Deux blocs d'expertise qui se suivent ne doivent compter QU'UNE gouttière de
   section, pas deux : chaque bloc étant sa propre `<section>`, les deux `--sec-pad`
   s'additionnaient et les séparaient de 160px en mobile (80 dans la maquette
   `112:6842`) et de 200px en desktop (100 dans « WHAT WE DO 6 »). La gouttière haute
   du bloc suivant est donc annulée — celle du premier bloc (sous « One obsession »)
   et celle du dernier (au-dessus de « Why us? ») restent entières, conformes.
   La mosaïque en mobile reste à 32px du texte : c'est la cote de la maquette. */
.xp-section + .xp-section { padding-top: 0; }
/* Le PREMIER bloc passe sous la capsule à cheval : il doit dégager la moitié basse
   de celle-ci (29px à 1440 pour une ligne, 55 en mobile pour quatre) PUIS les 80px
   de la maquette. */
.xp-section--first { padding-top: calc(80px + var(--obs-half)); }
/* ------------------------------------------------------------
   DEPLOY — recalage sur le board `123:19057` (V74).
   Même famille de corrections que *What we do*, scopée à `.dep` : *Create* et
   *Manage* ont leurs propres boards (V50→V55).
   ------------------------------------------------------------ */
/* Chapeau : 50 entre le titre, le corps et la capsule en mobile, 32 à 1440 — l'écart
   DÉCROÎT avec la largeur, contrairement à l'usage du site (il valait 24/40).
   Dégagements de la section : 50/50 en mobile, 48/100 à 1440. */
.dep .intro { gap: clamp(32px, calc(50px - 18 * (100vw - 390px) / 1050), 50px); }
/* Titre à 32 dans le board 1440 (il était à 30), et interlignes serrés du board
   mobile : 1 pour le titre et la capsule, 1,1 pour le corps (ils étaient à 1,2).
   La coupe de ligne du titre est CONSERVÉE en mobile — le board la garde, et sans
   elle le titre passait sur quatre lignes au lieu de trois. */
/* Interlettrage NÉGATIF (−1 %) comme les deux boards : le +1,6 % du socle poussait
   « ONE SECOND TO DELIVER » à 354px pour 350 disponibles, d'où une ligne de plus. */
.dep .intro-title { font-size: clamp(22px, calc(22px + 10 * (100vw - 390px) / 1050), 32px); letter-spacing: -0.01em; }
/* Capsule : 11/24 de padding aux deux largeurs (le socle en posait 11/33 puis 8/44),
   ce qui rendait la ligne trop courte et ajoutait un repli. */
.dep .intro-cap { padding: 11px 24px; }
@media (max-width: 899px) {
  .dep .intro-title { line-height: 1; }
  .dep .intro-title br { display: revert; }
  .dep .intro-body { line-height: 1.1; }
  .dep .intro-clip { line-height: 1; }
}
.dep .xp-tight-top { padding-top: clamp(48px, calc(50px - 2 * (100vw - 390px) / 1050), 50px);
  padding-bottom: clamp(50px, calc(50px + 50 * (100vw - 390px) / 1050), 100px); }
/* Bande OUR APPROACH : 80 sous la pastille, 80 avant les piliers, 50 → 80 en bas
   (le board mobile n'en donne que 50, contre 100 posés par le socle). */
.dep .xp-blue { padding-bottom: clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px); }
.dep .xp-blue .cap-astride--exact + .approach-catch {
  margin-top: calc(clamp(32px, calc(32px + 48 * (100vw - 390px) / 1050), 80px) - (13px + 0.6 * var(--fs-seclabel)));
}
.dep .pillars { margin-top: clamp(70px, calc(70px + 10 * (100vw - 390px) / 1050), 80px); }
/* Bloc Wezen en mobile : le board CENTRE tout (titre, accroche, corps, bouton),
   espace de 16 entre eux, et place le visuel APRÈS le texte — il était ferré à
   gauche, à 24 d'écart, et l'image passait avant (ordre du DOM corrigé). */
/* `display:flex` : la colonne n'était mise en flex qu'à partir de 900px, si bien
   qu'en mobile ses trois blocs se touchaient (gouttière ignorée). */
.dep .tech-body { display: flex; flex-direction: column; gap: clamp(16px, calc(16px + 34 * (100vw - 390px) / 1050), 50px); align-items: center; text-align: center; }
.dep .tech { gap: 32px; }
.dep .tech-media { aspect-ratio: 577/680; }
@media (max-width: 899px) { .dep .tech-title { text-align: center; } }
@media (min-width: 900px) {
  /* 577 + 80 + 547 dans 1204 (les blocs étaient sur le conteneur large de 1302),
     et 50px entre la pastille et le texte. */
  .dep .xp-block { grid-template-columns: minmax(0, 577fr) minmax(0, 547fr); column-gap: 80px; }
  .dep .xp-block.xp--media-right { grid-template-columns: minmax(0, 547fr) minmax(0, 577fr); }
  .dep .xp-body { gap: 50px; }
  .dep .tech { grid-template-columns: minmax(0, 577fr) minmax(0, 556fr); column-gap: 71px; }
  /* En desktop la colonne reste ferrée à gauche, comme le board 1440. */
  .dep .tech-body { align-items: flex-start; text-align: left; }
}

/* ------------------------------------------------------------
   MANAGE — recalage du MOBILE sur le board `123:18650` (« MANAGE-M », V79).
   Scopé à `.man` : les familles `xp-*`, `tech-*` et `.cap` sont partagées avec
   *Create*, *Deploy* et *What we do*, recalées sur LEURS propres boards.
   Toutes les cotes ci-dessous sont interpolées vers les valeurs desktop en place
   (V55) : à 1440 le rendu ne bouge pas.
   ------------------------------------------------------------ */
/* Chapeau : le board pose 50 entre le titre, le corps et la capsule (il en posait
   24), et des interlignes serrés — 1 pour le titre et la capsule, 1,1 pour le
   corps (ils étaient à 1,2). Interlettrage NÉGATIF (−1 %) sur le titre, là où le
   socle en pose +1,6 %. Capsule en 11/24 (le socle en posait 11/33). */
.man .intro { gap: clamp(40px, calc(50px - 10 * (100vw - 390px) / 1050), 50px); }
@media (max-width: 899px) {
  .man .intro-title { line-height: 1; letter-spacing: -0.01em; }
  .man .intro-body  { line-height: 1.1; }
  .man .intro-cap   { padding: 11px 24px; }
  .man .intro-clip  { line-height: 1; }
}
/* Dégagements du chapeau : 50 en haut (il en posait 40).
   En bas, le board laisse **100 de blanc** entre la capsule du chapeau et celle
   de « OUR APPROACH » (il n'en restait que 48). La pastille à cheval étant
   remontée de la moitié de sa hauteur, la gouttière doit porter ces 100 PLUS
   cette demi-hauteur — d'où le `calc`. */
.man .xp-tight-top {
  padding-top: clamp(48px, calc(50px - 2 * (100vw - 390px) / 1050), 50px);
  padding-bottom: clamp(100px, calc(127.5px - 27.5 * (100vw - 390px) / 1050), 127.5px);
}
/* Bande OUR APPROACH. Le fond bleu du board est RETOURNÉ : il démarre au milieu
   de la pastille (1465,5 pour une pastille posée 1440→1491), qui est donc à
   cheval au pixel — d'où le passage en `cap-astride--exact` dans le HTML.
   Sous la pastille, le board donne 82 avant les flèches : 50 de gouttière de
   section + les 32 de padding interne du composant carrousel. Idem en bas. */
.man .xp-blue { padding-bottom: clamp(82px, calc(82px + 18 * (100vw - 390px) / 1050), 100px); }
@media (max-width: 899px) {
  /* Centrage EXACT de la pastille sur la limite (la variante du socle remonte d'un
     demi-65px figé, soit 4,5px trop bas ici). Cantonné au mobile : à 1440 le
     carrousel descendrait de 32px, or le desktop est validé depuis la V55. */
  .man .xp-blue .cap-astride { margin-top: calc(-1 * var(--sec-pad)); margin-bottom: 0; transform: translateY(-50%); }
  /* La pastille étant remontée de la moitié de sa hauteur, l'écart de 82 du board
     se pose en retranchant cette demi-hauteur. */
  .man .xp-blue .cap-astride + .meth { margin-top: calc(82px - (13px + 0.6 * var(--fs-seclabel))); }
}
/* Le premier bloc ne garde que les 50 du board sous la bande bleue : les deux
   gouttières s'additionnaient et l'en éloignaient de 160 (132 en maquette). */
.man .xp-blue + .xp-section { padding-top: clamp(50px, calc(50px + 50 * (100vw - 390px) / 1050), 100px); }
@media (max-width: 899px) {
  /* Pastille de bloc : toute la largeur de la colonne et 33 de padding, comme le
     board — le socle en posait 20 en mobile, ce qui gardait « ORGANIC VISIBILITY »
     sur une seule ligne quand la maquette la replie sur deux. */
  .man .xp-block .cap { width: 100%; padding: 11px 33px; }
  /* Visuels des blocs : 350 × 415 (le ratio desktop 577/675 n'en rendait que 409). */
  .man .xp-media--solo { aspect-ratio: 350 / 415; }
  /* Puces à sous-ligne : 8 entre elles comme les puces simples (elles étaient à 12). */
  .man .xp-list--sub { gap: 8px; }
}
/* Bloc whatsquare en mobile : le board place le visuel APRÈS le texte (l'image
   passait avant — ordre du DOM corrigé), CENTRE tout (titre, accroche, puces,
   bouton) et espace ces quatre blocs de 16.
   `display:flex` : la colonne n'était mise en flex qu'à partir de 900px, si bien
   qu'en mobile titre, texte et bouton se touchaient (gouttière ignorée). */
.man .tech-body { display: flex; flex-direction: column;
  gap: clamp(16px, calc(16px + 24 * (100vw - 390px) / 1050), 40px);
  align-items: center; text-align: center; }
/* `row-gap` seul : la gouttière de COLONNE du desktop (79) doit rester intacte. */
.man .tech { row-gap: 32px; }
/* Titre à 30 dans le board mobile, là où le socle le prend à `--fs-capblock` (24). */
.man .tech-title { font-size: clamp(30px, calc(30px + 6 * (100vw - 390px) / 1050), 36px); }
@media (max-width: 899px) {
  .man .tech-title { text-align: center; }
  .man .tech-media { aspect-ratio: 350 / 457; }
  /* Le logo est CENTRÉ dans le visuel du board mobile (299 × 65 dans 350 × 457) ;
     les 41,05 % du socle sont la cote desktop, sur un cadre au ratio 575/592. */
  .man .tech-media .brand { top: 42.9%; }
}
@media (min-width: 900px) {
  /* En desktop la colonne reste ferrée à gauche, comme le board 1440. */
  .man .tech-body { align-items: flex-start; text-align: left; }
}

/* ------------------------------------------------------------
   WHAT WE DO — recalage sur les boards `123:19880` / `123:19986` (V72).
   Tout est scopé à `.wwd` : les familles `xp-*` sont partagées avec les pages
   piliers, recalées en V50→V55 sur LEURS propres boards.
   ------------------------------------------------------------ */
/* Board mobile : la pastille du bloc est ferrée À GAUCHE de la colonne (le texte,
   lui, reste centré). */
@media (max-width: 899px) { .wwd .xp-body .cap-row { align-self: flex-start; } }
/* Bande OUR EXPERTISE : 32 → 80 sous la pastille (elle en donnait 48/68), 70 → 80
   avant les piliers, et 100 → 80 de dégagement en bas. */
.wwd .xp-blue { padding-bottom: clamp(80px, calc(100px - 20 * (100vw - 390px) / 1050), 100px); }
.wwd .xp-blue .cap-astride--exact + .xp-intro {
  margin-top: calc(clamp(32px, calc(32px + 48 * (100vw - 390px) / 1050), 80px) - (13px + 0.6 * var(--fs-seclabel)));
}
.wwd .pillars { margin-top: clamp(70px, calc(70px + 10 * (100vw - 390px) / 1050), 80px); }
/* Colonne de texte des blocs : 547 (le board pose 577 + 80 + 547 dans 1204), et
   50px entre la pastille, le texte et la capsule « Powered by » — contre 32. */
@media (min-width: 900px) {
  .wwd .xp-block { grid-template-columns: minmax(0, 577fr) minmax(0, 547fr); column-gap: 80px; }
  .wwd .xp-block.xp--media-right { grid-template-columns: minmax(0, 547fr) minmax(0, 577fr); }
  .wwd .xp-body { gap: 50px; }
  /* La capsule « Powered by » tient TOUTE la colonne et son texte se replie sur deux
     lignes, comme les trois blocs du board. En libre (`width:auto`) avec un texte
     insécable, elle dépassait la colonne de 90px et venait toucher la photo du bloc
     *Deploy* — le défaut signalé. */
  .wwd .powered { width: 100%; padding: 11px 24px; }
  .wwd .powered-text { white-space: normal; }
}
/* Deux serrages repris de la maquette Create (`112:6246`), où la gouttière de
   section (100 en desktop) est trop lâche : **48px** entre le hero et le chapeau
   (777 → 825) et entre le dernier bloc et la bande des agences (4215 → 4263).
   Interpolés vers 40px en mobile, faute de nœud mobile de référence. */
.xp-tight-top    { padding-top:    clamp(40px, calc(40px + 8 * (100vw - 390px) / 1050), 48px); }
/* Le serrage bas est un cran plus large que la maquette (72 contre 48 à 1440) : le
   client a trouvé le dernier bloc trop collé à la bande qui suit — bande *Why us?* sur
   Deploy et Manage, bande des agences sur Create. */
.xp-tight-bottom { padding-bottom: clamp(56px, calc(56px + 16 * (100vw - 390px) / 1050), 72px); }
/* NB — devant une section bleue (Deploy, Manage), la gouttière basse du chapeau
   reste ENTIÈRE : la bande colorée démarre au bord de sa section, et c'est ce blanc
   qui dégage la pastille « à cheval » qui la chevauche. La resserrer ne laissait que
   16px au-dessus d'elle. Même raison pour la gouttière HAUTE de la bande bleue :
   elle porte le décalage de la pastille et ne doit jamais être annulée. */
.xp-block { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 48px); }
.xp-body { display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.cap-block { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-capblock); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
/* V136 — pastille dont le mot le plus long dépasse la rangée.
   « CONVERSATIONNELLE » fait 14,11 px de large par point de corps : à 24 px il
   mesure 339 px pour 280 disponibles. Or `max-width: 100%` ne retient PAS la
   pastille — en tant qu'item flex elle a un `min-width: auto` égal à sa taille
   min-content, et le minimum l'emporte sur le maximum : la pastille sortait de
   l'écran (9 px à 390, 44 px à 900).
   Le corps se cale donc sur la largeur de la RANGÉE (`cqw`), jamais au-dessus du
   corps nominal : 19,4 px à 390, 23,2 à 900, 29,5 à 1100, et la valeur nominale
   dès ~1150 où le mot tient de lui-même. 74 px = 2 × 33 de rembourrage + 4 de
   bordure + 4 de marge. Continu, sans palier. Deux autres pistes écartées au
   banc (`_outils-qa/banc-cap-conv.html`) : la césure douce affiche « CONVER- /
   SATIONNELLE » sur trois lignes — un trait d'union dans une pastille de marque
   se lit comme une coquille ; et ne rien faire laisse la pastille hors écran.
   Le conteneur est `.xp-body` et NON la rangée : `.cap-row` est un item flex de
   colonne en `align-items: flex-start`, donc dimensionné par son contenu. Le
   confinement `inline-size` fait justement IGNORER le contenu — posé sur la
   rangée il l'écrasait à 0 px, et le corps calculé tombait à 0. `.xp-body` tient
   sa largeur de la grille (403 px à 900, 645 à 1440) : elle est définie. */
.xp-body--fit { container-type: inline-size; }
.xp-body--fit .cap-row--fit .cap-block { font-size: min(var(--fs-capblock), (100cqw - 74px) / 14.2); }
.xp-lead { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: #72a5e3; }
.xp-desc { font-family: var(--f-alb); font-size: var(--fs-xp); line-height: 1.2; letter-spacing: -0.01em; color: var(--black); }
.xp-list { display: flex; flex-direction: column; gap: 8px; font-family: var(--f-alb); font-size: var(--fs-xp); line-height: 1.2; letter-spacing: -0.01em; color: var(--black); }
/* Puces à sous-ligne (Manage · Conversational experience) : la V1 indentait avec
   six `&nbsp;`, remplacés par un retrait propre. */
.xp-list--sub { gap: 12px; }
.xp-list--sub span { display: inline-block; padding-left: 1.6em; }
/* Le groupe accroche + texte + puces : 32px de gouttière dans la maquette V2,
   16px en mobile. */
.xp-text { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 32px); }

/* Capsule « Powered by … » — texte rempli d'image.
   Mobile : pleine largeur et texte replié ; desktop : à la taille du texte, sur
   une ligne (`nowrap`), comme la maquette. */
.powered { background: #fff; border: 2px solid var(--black); border-radius: 6px; padding: 11px 24px; width: 100%; text-align: center; }
.powered-text { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-powered); line-height: 1.3; text-transform: uppercase; }
/* V135 — « CONVERSATIONNELLE » (17 lettres) est le mot le plus long du site en
   Unbounded 700 : il ne peut pas se couper, donc si la colonne est plus étroite
   que lui, il SORT de la capsule. Le point de pincement est la bande 900 → 1000 :
   à 900 la grille passe en deux colonnes (l'espace utile tombe de 521 à 281 px)
   alors que le corps, lui, a continué de grandir — le mot mesurait 306 px pour
   281 disponibles, soit 25 px dehors. Au-delà de 1000 la colonne a rattrapé.
   Interpolation continue plutôt que palier : le corps repart de 0,9 × la valeur
   nominale à 900 px et rejoint EXACTEMENT `--fs-powered` à 1000 px, donc aucune
   marche au redimensionnement. L'anglais (« CONVERSATIONAL », 14 lettres) tient
   dans les 281 px : la règle lui est inutile et ne le touche pas. */
@media (min-width: 900px) and (max-width: 999.98px) {
  html[lang="fr"] .powered-text { font-size: calc(19.31px + 2.43 * (100vw - 900px) / 100); }
}
/* Les crochets et le ™ sont en graisse normale dans la maquette. */
.powered-text .r { font-weight: 400; }

@media (min-width: 900px) {
  .xp-block { display: grid; grid-template-columns: minmax(0, 577fr) minmax(0, 645fr); column-gap: clamp(32px, 5.5vw, 80px); align-items: start; }
  .xp-media { grid-column: 1; grid-row: 1; }
  /* Le texte démarre plus bas que les visuels (y174 contre y0 dans la maquette). */
  .xp-body { grid-column: 2; grid-row: 1; align-items: flex-start; text-align: left; padding-top: clamp(0px, 6vw, 76px); }
  /* Miroir : il faut AUSSI inverser le gabarit de colonnes — sans cela l'image
     atterrit dans la colonne de texte (645) et non dans la sienne (577). Même
     piège que le cas client en miroir de la homepage. */
  .xp--media-right { grid-template-columns: minmax(0, 645fr) minmax(0, 577fr); }
  .xp--media-right .xp-media { grid-column: 2; }
  .xp--media-right .xp-body { grid-column: 1; }
  /* Variante des pages piliers : le bloc de texte est CENTRÉ verticalement sur les
     visuels, et non calé en haut. Vérifié sur la maquette Create : capsule + texte
     centrés dans 682px de visuels placent la capsule à 161 et le texte à 258, pour
     149 et 264 dans Figma. */
  .xp-block--mid { align-items: center; }
  .xp-block--mid .xp-body { padding-top: 0; }
  .powered { width: auto; padding: 8px 26px; }
}
/* Une seule ligne à partir de 1440 SEULEMENT.
   Mesure : « POWERED BY BR[AI]N OUR CREATIVE [AI] » fait 25,44 × le corps, soit 585px
   à 23px — et la colonne de texte n'offre ses 645px qu'à la largeur de maquette. La
   garder sur une ligne plus bas imposerait un corps de 18,9px à 1200 et de 13,6px à
   900 : illisible. En dessous, la capsule se replie sur deux lignes, comme en mobile.
   La gouttière desktop passe de 30 à 26px pour la même raison : à 30, les 585px de
   texte + 64px de capsule dépassaient de 4px les 645px de la colonne. */
@media (min-width: 1440px) {
  .powered-text { white-space: nowrap; }
}

/* ============================================================
   MOSAÏQUE DE VISUELS — 4 tuiles (Create, Manage) ou 1 seule (Deploy)
   Grille reprise de la maquette, identique en mobile et en desktop :
     ┌────┬────┐   m1 à gauche sur deux rangées,
     │    │ m2 │   m2 et m3 empilées à droite,
     │ m1 ├────┤   m4 sur toute la largeur en dessous.
     │    │ m3 │
     ├────┴────┤
     │   m4    │
     └─────────┘
   PAS d'`aspect-ratio` sur m1 : elle est étirée sur deux rangées, et un ratio sur
   un élément étiré fait dériver sa largeur de sa hauteur (dépendance circulaire).
   Sa hauteur vient donc de m2 + gouttière + m3, et l'image la remplit en `cover`.
   ============================================================ */
.mosaic { display: grid; grid-template-columns: minmax(0, 280fr) minmax(0, 281fr);
  column-gap: clamp(10px, 1.1vw, 16px); row-gap: clamp(8px, 0.9vw, 13px); }
.mosaic > * { position: relative; overflow: hidden; border-radius: clamp(10px, 1vw, 15px); }
/* Images en ABSOLU : une image en flux avec `height:100%` dans un item étiré ne
   peut pas résoudre sa hauteur (la rangée dépend du contenu, le contenu de la
   rangée) et retombe sur sa hauteur intrinsèque — elle regonflait les rangées et
   `.m1` dépassait alors la colonne de droite. En absolu, l'image ne participe plus
   au calcul : les rangées viennent des seuls ratios de m2/m3, et m1 les suit. */
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic .m1 { grid-column: 1; grid-row: 1 / span 2; }
.mosaic .m2 { grid-column: 2; grid-row: 1; aspect-ratio: 281/167; }
.mosaic .m3 { grid-column: 2; grid-row: 2; aspect-ratio: 281/178; }
.mosaic .m4 { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 577/311; }
/* Variante « paire » — 2 tuiles côte à côte (280 × 357 chacune) puis une large
   (577 × 310) en dessous. Employée par Creative commerce. */
.mosaic--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mosaic--pair .p1, .mosaic--pair .p2 { grid-row: 1; aspect-ratio: 280/357; }
.mosaic--pair .p1 { grid-column: 1; }
.mosaic--pair .p2 { grid-column: 2; }
.mosaic--pair .p3 { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 577/310; }

/* Visuel unique (Deploy) : cotes maquette 577 × 675. */
/* Pas d'ombre portée : celle de la maquette (0 4px 4px rgba(0,0,0,.25)) a été
   retirée à la demande du client — le visuel Deploy de What we do était le seul
   élément ombré de la page. */
.xp-media--solo { position: relative; overflow: hidden; border-radius: clamp(10px, 1vw, 16px); aspect-ratio: 577/675; }
.xp-media--solo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   WHY US — cartes KPI en verre
   Desktop : 2 cartes en haut, la 3e centrée en dessous (maquette : 590 × 260,7,
   gouttière 35). Mobile : 2 colonnes, la 3e sur toute la largeur.
   ============================================================ */
.why { position: relative; color: #fff; }
/* Fond : `cover` + `object-position` plutôt qu'un recadrage en pourcentages, qui ne
   survit pas au changement de ratio du cadre. La maquette desktop rend l'image à
   137 % de ce que donnerait un `cover` (2024px de large pour un cadre de 1478),
   calée en haut à gauche — d'où le `scale`, absorbé par l'`overflow` de `.sec-bg`. */
.why .sec-bg img { object-position: left top; }
/* Le cadrage du fond diffère d'une maquette à l'autre : Deploy et Manage montrent
   la photo ENTIÈRE (aucun zoom, seul l'ancrage horizontal change — la boîte est un
   peu moins large que la photo), tandis que What we do est zoomée sur le haut-gauche
   du sujet. Chaque page pose donc ses deux valeurs en variables, comme le hero des
   pages piliers. Relevé par comparaison au rendu des nœuds (`0:5505` Deploy,
   `0:5409` Manage, `0:5963` What we do), sur la bande basse libre de cartes :
   l'écart au rendu tombe de 71 à 30 (Deploy), 38 à 15 (Manage), 36 à 22 (What we do). */
@media (min-width: 900px) {
  .why .sec-bg img { object-position: var(--why-pos, 50% 50%);
    transform: scale(var(--why-zoom, 1)); transform-origin: left top; }
}
.kpi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: var(--gap-md); }
.kpi { position: relative; border-radius: 16px; padding: 32px 12px; text-align: center; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
/* Contour en dégradé : un `border` uni ne rend pas l'effet verre de la maquette.
   Masque en XOR pour ne garder que l'anneau de 1,5px. */
.kpi::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(140deg, rgba(255,255,255,.9), rgba(255,255,255,.2) 48%, rgba(255,255,255,.42));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* Presque tous ces chiffres sont des nombres purs ; « x3 » est le seul à porter
   une lettre, et Unbounded ne s'utilise qu'en capitales — d'où la règle ici
   plutôt qu'un « X » écrit en dur dans les deux langues. */
.kpi .num { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-kpi-num); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; }
.kpi .lab { font-family: var(--f-alb); font-size: var(--fs-kpi-lab); line-height: 1.2; letter-spacing: -0.01em; margin-top: 12px; }
.kpi--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .kpi-grid { gap: clamp(12px, 2.4vw, 35px); }
  /* `align-self:start` + `aspect-ratio` : la hauteur découle de la LARGEUR de colonne.
     Sans cela, la hauteur viendrait de la rangée, elle-même dérivée du ratio — une
     boucle. */
  .kpi { padding: 24px; aspect-ratio: 590/260.7; align-self: start; }
  /* La 3e carte garde la largeur d'UNE colonne, centrée sur la grille. */
  .kpi--wide { width: calc(50% - clamp(12px, 2.4vw, 35px) / 2); justify-self: center; }
}

/* ============================================================
   OUR APPROACH — section bleue à accroche + piliers (Deploy)
   La variante `--plain` ne règle plus que le CORPS du paragraphe : le bas de casse
   du socle `.pillar p` est bien celui de la maquette (nœud `112:5895`), y compris
   sur « AI », qui s'y affiche « ai ». Le texte de la page, lui, garde sa casse
   propre — seul le rendu est transformé (copie, lecture d'écran et SEO intacts).
   ============================================================ */
.approach-catch { font-family: var(--f-alb); font-size: var(--fs-catch); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: #fff; }
.approach-catch .b { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-catch-b); }
.pillars--plain .pillar p { font-size: var(--fs-xp); line-height: 1.2; letter-spacing: -0.01em; }

/* ============================================================
   OUR TECHNOLOGY — bloc Wezen (page Deploy)
   Le visuel est un composite : photo de fond, capture d'écran superposée et
   logo. Les trois couches sont posées en pourcentages d'un cadre à ratio fixe
   (575 × 592) — le ratio étant constant, les pourcentages restent valides.
   Le logo n'est présent que dans la maquette desktop.
   ============================================================ */
.tech { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 40px); }
.tech-media { position: relative; width: 100%; aspect-ratio: 575/592; border-radius: clamp(10px, 1vw, 16px); }
.tech-media .base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tech-media .shot { position: absolute; left: 4.52%; top: 27.53%; width: 90.96%; height: auto; }
.tech-media .logo { display: none; }
.tech-title { font-family: var(--f-unb); font-weight: 300; font-size: var(--fs-capblock); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); }
.tech-title .sg { font-family: var(--f-display); font-weight: 400; line-height: 1.13; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 2px solid var(--black); border-radius: 13px; background: #fff;
  font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-ui); letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--black); padding: 16px 26px 16px 32px;
  transition: background-color .25s ease, color .25s ease; }
.btn-outline img { width: 14.5px; height: 14.9px; flex: none; transition: transform .25s ease; }
.btn-outline:hover { background: var(--black); color: #fff; }
.btn-outline:hover img { filter: invert(1); transform: translateX(4px); }
/* Variante « whatsquare » (page Manage) : une seule surimpression, le logo, et le
   visuel passe à DROITE — le gabarit de colonnes est donc inversé lui aussi. */
.tech-media .brand { position: absolute; left: 7.13%; top: 41.05%; width: 85.74%; height: auto; }
@media (min-width: 900px) {
  .tech { display: grid; grid-template-columns: minmax(0, 575fr) minmax(0, 645fr); column-gap: clamp(32px, 5.5vw, 79px); align-items: center; }
  .tech-media { grid-column: 1; grid-row: 1; }
  .tech-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); align-items: flex-start; }
  .tech--media-right { grid-template-columns: minmax(0, 680fr) minmax(0, 575fr); }
  .tech--media-right .tech-media { grid-column: 2; }
  .tech--media-right .tech-body { grid-column: 1; }
  /* Le logo Wezen déborde le cadre à gauche (x40 pour un visuel à x65) et n'est
     rendu qu'à moitié de sa hauteur dans la maquette, d'où le cadre à `overflow`. */
  .tech-media .logo { display: block; position: absolute; left: -4.35%; top: 20.44%; width: 108.7%; height: 29.9%; overflow: hidden; }
  .tech-media .logo img { position: absolute; left: -0.06%; top: 0; width: 100.12%; height: 198.87%; max-width: none; object-fit: cover; }
}

/* ============================================================
   OUR AGENCIES — bandeau défilant des agences (page Create)
   Le socle fournit `.marquee` et `@keyframes marquee` (ajoutés en V33) ; ici on n'a que
   la mise en forme des éléments. La piste contient la séquence DEUX FOIS et
   l'animation la translate de 50 % : la boucle est donc sans couture.
   Le halo derrière chaque logo est le même fichier, flouté (`.gl`).
   ============================================================ */
.agencies { background: var(--black); color: #fff; }
.ag-title { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-intro); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: #fff; margin-top: var(--gap-md); }
.ag-marquee { margin-top: var(--gap-md); }
.ag-track { display: flex; align-items: flex-end; gap: clamp(0px, 3vw, 45px); width: max-content; animation: marquee 45s linear infinite; }
.agencies:hover .ag-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ag-track { animation: none; } }
.ag { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vw, 24px); padding: 0 20px; }
.ag-logo { position: relative; display: flex; align-items: center; justify-content: center;
  height: clamp(60px, calc(60px + 112 * (100vw - 390px) / 1050), 172px); }
.ag-logo img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
/* Halo : le même visuel, flouté, calé derrière le logo net. */
.ag-logo .gl { position: absolute; inset: 0; margin: auto; filter: blur(6px); }
.ag-label { font-family: var(--f-alb); font-size: var(--fs-aglabel); line-height: 1.38; letter-spacing: -0.01em; text-align: center; color: #fff; }
/* Les logos sont dimensionnés en pourcentage de la hauteur de piste pour rester
   proportionnels : les cotes maquette (172px de haut) valent à 1440. */
/* Les deux seuls logos VECTORIELS du bandeau (`--wide` et `--us`) sont exportés en
   `preserveAspectRatio="none"` avec `width/height: 100%` : ils n'ont donc AUCUNE
   dimension intrinsèque et `height: auto` retombait sur la hauteur par défaut de
   150px — 2,1× trop haut pour la Chine, 2,7× pour les États-Unis. Leur
   `aspect-ratio` reprend le ratio de leur `viewBox`. Les autres variantes sont des
   PNG, qui ont leur ratio intrinsèque. */
.ag-logo--sq img  { height: 100%; width: auto; }
.ag-logo--wide img { aspect-ratio: 228.82/70.4078; width: clamp(107px, calc(107px + 123 * (100vw - 390px) / 1050), 230px); }
.ag-logo--vk img  { width: clamp(145px, calc(145px + 129 * (100vw - 390px) / 1050), 274px); }
.ag-logo--ch img  { width: clamp(139px, calc(139px + 111 * (100vw - 390px) / 1050), 250px); }
.ag-logo--us img  { aspect-ratio: 415/55.0002; width: clamp(180px, calc(180px + 235 * (100vw - 390px) / 1050), 415px); }
.ag-logo--lt img  { width: clamp(133px, calc(133px + 133 * (100vw - 390px) / 1050), 266px); }
.ag-logo--fh img  { width: clamp(99px,  calc(99px  +  61 * (100vw - 390px) / 1050), 160px); }

/* ============================================================
   CARROUSEL MÉTHODOLOGIE — « Our approach » de la page Manage
   ------------------------------------------------------------
   Une seule fenêtre, une piste translatée par le script de la page. Le PAS de
   défilement n'est plus une constante en pixels (626 en desktop, 350 en mobile
   dans la V1) : il est mesuré sur le DOM à chaque calcul, donc juste à toutes
   les largeurs. Panneaux : un seul visible en mobile (88 % de la fenêtre, le
   suivant amorcé), deux en desktop — les proportions de la maquette.
   ============================================================ */
/* La gouttière au-dessus du carrousel est portée par la rangée des flèches en
   mobile ; en desktop, où cette rangée s'efface, elle revient sur la fenêtre. */
.meth-viewport { overflow: hidden; }
@media (min-width: 900px) { .meth-viewport { margin-top: var(--gap-md); } }
.meth-track { display: flex; gap: clamp(40px, 3.5vw, 50px); transition: transform .6s cubic-bezier(.4,0,.2,1); will-change: transform; }
.meth-panel { flex: none; width: calc(100% - clamp(40px, 3.5vw, 50px)); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); }
.meth-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); width: 100%; }
/* AUCUN halo dans ce carrousel — ni sur les titres, ni sur les puces. La fenêtre
   étant en `overflow: hidden`, tout débord lumineux se fait TRANCHER par le masque :
   le halo des puces de gauche était coupé net, et celui du panneau suivant apparaissait
   à droite. La maquette (`112:5579`) ne montre d'ailleurs ni halo de titre ni halo de
   puce — c'est du blanc franc. */
.meth-title { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-catch-b); line-height: 1.2; letter-spacing: 0.02em; color: var(--cloud); white-space: nowrap; }
.meth-head .line { flex: 1; height: 2px; background: var(--cloud); position: relative; }
/* La pointe garde son calage d'ORIGINE : la reculer dans la fenêtre laissait dépasser
   le bout du trait derrière elle (le trait va jusqu'au bord, le chevron reculait).
   C'est donc la fenêtre qui s'élargit à droite — voir `.meth-viewport`. */
.meth-head .line::after { content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--cloud); border-right: 2px solid var(--cloud); transform: translateY(-50%) rotate(45deg); }
/* Deux lignes réservées au sous-titre : les puces des deux panneaux affichés côte à
   côte démarrent ainsi à la même hauteur, quel que soit le couple montré. */
.meth-sub { font-family: var(--f-alb); font-weight: 700; font-size: var(--fs-catch); line-height: 1.2; letter-spacing: -0.01em; color: var(--cloud); min-height: 2.4em; }
.meth-item { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.meth-item + .meth-item { margin-top: clamp(16px, 2.6vw, 30px); }
.meth-item .glow-dot { width: 10px; height: 10px; flex: none; box-shadow: none; }
.meth-item p { font-family: var(--f-alb); font-size: var(--fs-xp); line-height: 1.2; letter-spacing: -0.01em; color: var(--cloud); flex: 1; }
/* Commandes — board mobile `123:18667` (V77) : les deux flèches sont AU-DESSUS du
   carrousel, ferrées à DROITE (28px, fond nuit, filet clair, 24 entre elles), et
   les pastilles de pagination sont SEULES en dessous, centrées (8px, 16 d'écart).
   Elles étaient toutes les trois en ligne sous le carrousel, flèches de 44px de part
   et d'autre des pastilles. En desktop, les flèches passent aux bords de la section
   (voir plus bas) et la rangée qui les porte s'efface. */
.meth-arrows { display: flex; justify-content: flex-end; gap: 24px; margin-top: var(--gap-md); margin-bottom: 32px; }
.meth-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
/* Relevé AU PIXEL sur le rendu du board (le connecteur annonçait un fond
   `#0f1122` que l'instance n'a pas) : cercle de 30, fond TRANSPARENT, filet blanc
   `#FBFCFE` de 1px, flèche de 10,5. */
.meth-arrow { width: 30px; height: 30px; flex: none; background: transparent; border: 1px solid var(--cloud); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.meth-arrow img { width: 10.5px; height: 10.8px; }
.meth-arrow[disabled] { opacity: .5; cursor: default; }
.meth-arrow--prev img { transform: rotate(180deg); }
.meth-dots { display: flex; gap: 16px; }
.meth-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; }
.meth-dots button[aria-current="true"] { background: #fff; }
@media (min-width: 900px) {
  .meth-panel { width: calc((100% - clamp(40px, 3.5vw, 50px)) / 2); }
  .meth { position: relative; }
  /* La fenêtre déborde de 8px À DROITE de sa boîte de mise en page : le `padding`
     élargit la zone de masquage, la marge négative annule l'effet sur la largeur —
     les panneaux gardent donc exactement leurs cotes (577 à 1440). Ces 8px laissent
     passer la pointe de la flèche du 2e panneau, qui dépasse de 2,9px, sans jamais
     découvrir le panneau suivant : il commence 32 à 42px plus loin.
     Réservé au desktop : en mobile le panneau suivant démarre PILE au bord de la
     fenêtre, et ces 8px auraient laissé voir le début de son titre — c'est
     exactement le défaut signalé. La flèche mobile, elle, finit 45px avant le bord. */
  .meth-viewport { padding-right: 8px; margin-right: -8px; }
  .meth-nav { margin-top: clamp(24px, 3vw, 40px); }
  /* Les flèches sont DANS LES GOUTTIÈRES, hors de la colonne de contenu : dans la
     maquette elles sont à x52 et x1348 quand la fenêtre du carrousel occupe
     x118 → x1332. Posées à `left:0`, elles passaient sur le texte des panneaux.
     Décalage = leur largeur + une respiration, borné pour rester dans la gouttière
     (67px à 900px de large, 118 à 1440). */
  /* La rangée des flèches s'efface : elles reprennent leur place absolue aux bords
     de la section, et le carrousel retrouve sa gouttière haute. */
  .meth-arrows { display: contents; }
  .meth-arrow { position: absolute; top: 50%; translate: 0 -50%;
    width: 44px; height: 44px; background: transparent; border-width: 2px;
    --meth-arrow-off: calc(44px + clamp(8px, 1.5vw, 22px)); }
  .meth-arrow img { width: 14.5px; height: 14.9px; }
  .meth-dots { gap: 10px; }
  .meth-dots button { width: 12px; height: 12px; border-width: 1.5px; }
  .meth-nav { margin-top: clamp(24px, 3vw, 40px); }
  .meth-arrow--prev { left: calc(-1 * var(--meth-arrow-off)); }
  .meth-arrow--next { right: calc(-1 * var(--meth-arrow-off)); }
}
/* Le `<br>` du sous-titre cale les deux lignes de la maquette DESKTOP ; en mobile le
   panneau est bien plus étroit et le texte se recompose seul — même principe que les
   accroches des blocs d'expertise. */
@media (max-width: 899px) { .meth-sub br { display: none; } }
/* Entre 900 et 1100, les colonnes sont assez étroites pour qu'un sous-titre passe sur
   TROIS lignes (« Understand how your market searches and engages » en anglais, deux
   panneaux en français) : la réserve passe donc à trois lignes sur cette plage, sans
   quoi les puces des deux panneaux affichés côte à côte se décalent de 36px. */
@media (min-width: 900px) and (max-width: 1099px) { .meth-sub { min-height: 3.6em; } }

/* Cartes KPI en chiffres « Special Gothic » (Deploy, Manage) */
.kpi--sg .num { font-family: var(--f-display); font-weight: 400; }
/* Ces deux images n'ont PAS d'attributs width/height, à la différence des 937 autres :
   elles sont en `width:100%` dans une pastille dimensionnée par son contenu, et déclarer
   les dimensions intrinsèques y fait résoudre la largeur à 223 au lieu de 391. */
.kpi .lab img, .kpi .num img { display: block; width: 100%; max-width: 391px; height: auto; margin: 0 auto; }

/* ============================================================
   FOOTER — aucune variante
   ------------------------------------------------------------
   La V1 donnait à ces pages un footer différent de celui de la homepage : fond
   `what-we-do/sra.webp` et personnage recadré à 899 × 661. Or `sra.webp` n'est pas
   un ciel — LE PERSONNAGE Y EST DÉJÀ INCRUSTÉ — et l'on superposait par-dessus le
   PNG détouré du même personnage : il apparaissait donc DEUX FOIS. `footer.webp`,
   utilisé par la homepage, est bien un ciel vide.
   Le footer est désormais unique sur tout le site : celui du socle (V30).
   ============================================================ */

/* ============================================================
   CAREERS — bandeau d'introduction et blocs image + texte
   Réf. V1 : `careers.css` (desktop 1440 / mobile 390).
   Les blocs réutilisent la grille `.xp-block` de la famille, avec un visuel
   pleine hauteur (577 × 680 dans la maquette) et une colonne de texte de 547.
   ============================================================ */
/* Rythme des deux boards (V70) : les trois blocs vivent dans UNE seule section —
   ils étaient dans trois `.section` distinctes, et leurs paddings s'additionnaient
   (200px entre deux blocs à 1440 pour 100 dans la maquette, 160 pour 80 en mobile).
     · bande bleue → 1er bloc : 118 à 1440 (55 en mobile)
     · entre deux blocs : 100 (80)
     · pastille → texte : 50 (32) · texte → visuel : 32 (mobile)
     · bas de section : 80 (50) */
.careers-blocks { padding-block: clamp(55px, calc(55px + 63 * (100vw - 390px) / 1050), 118px) clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px); }
.careers-blocks-in { display: flex; flex-direction: column; gap: clamp(80px, calc(80px + 20 * (100vw - 390px) / 1050), 100px); }
/* Bandeau du chapô : 80px sous la pastille à 1440, 32 en mobile (la marge du socle
   en donnait 68 et 48), et 80/50 de dégagement en bas. */
.careers-intro-sec { padding-bottom: clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px); }
.careers-intro-sec .cap-astride { margin-bottom: clamp(32px, calc(32px + 48 * (100vw - 390px) / 1050), 80px); }
/* Le chapô fait 999 de large dans le board desktop, et non toute la colonne. */
.careers-intro { font-family: var(--f-alb); font-size: var(--fs-xp); line-height: 1.2; letter-spacing: -0.01em; text-align: center; color: var(--cloud); max-width: 999px; margin-inline: auto; }
/* Pastille-titre : pleine largeur de la colonne aux DEUX largeurs (le board desktop
   l'étire sur les 547 de la colonne), padding 11/33 comme la pastille du socle.
   Seule celle du chapô est libre (`--intro`) : 11/33 en mobile, 24/60 à 1440. */
/* Fond BLANC (#FBFCFE, le « Blanc » des boards) et non `--cloud` (#F4F4FB) : ce
   gris-lavande se voyait nettement sur le blanc de la section. */
.careers-cap { display: flex; align-items: center; justify-content: center; background: #fbfcfe; border: 2px solid var(--black); border-radius: 50px; padding: 11px 33px; width: 100%; }
.careers-cap h1, .careers-cap h2 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-capblock); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.careers-cap .l { font-family: var(--f-unb); font-weight: 400; }
/* Celle du chapô est LIBRE (elle épouse son texte) dans les deux boards, et elle
   dépasse un peu la colonne de lecture en mobile (366 pour 350) : sans ces 12px
   rendus de chaque côté, « 87SECONDS GROUP » (299px à 24) passait à la ligne. */
.careers-cap--intro { width: auto; max-width: calc(100% + 24px); margin-inline: -12px; }
/* Les titres des pastilles tiennent sur DEUX lignes en mobile dans le board
   (« Everyone / matters ») et sur une seule en desktop. */
@media (min-width: 900px) { .careers-cap br { display: none; } }
.careers-col { display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, calc(32px + 18 * (100vw - 390px) / 1050), 50px); }
/* Le texte est CENTRÉ en mobile dans le board, ferré à gauche en desktop. */
.careers-col .xp-desc { white-space: normal; text-align: center; }
/* Visuel des blocs : ratio de la maquette, image en absolu (voir le piège des
   images en flux dans un item étiré). Coins à 10 en mobile, 15 en desktop. */
.careers-media { position: relative; overflow: hidden; border-radius: clamp(10px, calc(10px + 5 * (100vw - 390px) / 1050), 15px); aspect-ratio: 350/415; }
.careers-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Mobile : pastille + texte, puis le visuel 32px plus bas (ils se touchaient). */
.careers-block { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 900px) {
  /* Maquette : visuel 577 à x118, colonne de texte 547 à x775 → gouttière 80. */
  .careers-block { display: grid; grid-template-columns: minmax(0, 577fr) minmax(0, 547fr); column-gap: clamp(32px, 5.5vw, 80px); align-items: center; }
  .careers-block .careers-media { grid-column: 1; grid-row: 1; aspect-ratio: 577/680; }
  .careers-block .careers-col { grid-column: 2; grid-row: 1; }
  .careers-block--media-right { grid-template-columns: minmax(0, 547fr) minmax(0, 577fr); }
  .careers-block--media-right .careers-media { grid-column: 2; }
  .careers-block--media-right .careers-col { grid-column: 1; }
  .careers-col .xp-desc { text-align: left; }
  .careers-cap--intro { padding: 24px 60px; max-width: 100%; margin-inline: 0; }
}


/* ============================================================
   POP-UP « INDEX ÉGALITÉ PROFESSIONNELLE » (careers FR)
   Maquette Figma `398:6551` — deux cadres, 1200 × 848 en desktop et 346 × 676 en
   mobile. Le contenu est le même : seule la disposition de la grille change, le
   cinquième bloc passant d'une colonne haute à droite à une bande pleine largeur
   en bas. Un seul jeu de règles, donc, avec une bascule de grille à 700px.
   ============================================================ */
/* Note de bas de bloc qui porte le lien d'ouverture. */
.xp-note { font-family: var(--f-alb); font-size: clamp(13px, calc(13px + 3 * (100vw - 390px) / 1050), 16px);
  line-height: 1.35; letter-spacing: -0.01em; color: rgba(9, 9, 9, .7); margin-top: 16px; }
.xp-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.xp-note a:hover { color: var(--black); }
.careers-col .xp-note { text-align: center; }
@media (min-width: 900px) { .careers-col .xp-note { text-align: left; } }

/* Le voile et la carte reprennent la mécanique de la pop-up Contact : `visibility`
   pour sortir de l'ordre de lecture, et `backdrop-filter` UNIQUEMENT à l'ouverture
   — posé sur l'élément fermé il teinte toute la page malgré l'opacité nulle. */
.idx-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vw, 32px); background: rgba(15, 17, 34, .55);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.idx-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Dégradé relevé sur la maquette : 197,219,245 au coin haut-gauche, 102,153,214 au
   coin bas-droit. Le rapport 1200/848 n'est pas imposé en hauteur : la carte suit son
   contenu, et défile si la fenêtre est trop basse. */
.idx-card { position: relative; width: min(1200px, 100%); max-height: min(88vh, 900px); overflow: auto;
  border-radius: clamp(14px, 1.6vw, 20px); padding: clamp(22px, 3.4vw, 44px);
  background: linear-gradient(135deg, #C5DBF5 0%, #95BAE7 52%, #6699D6 100%);
  box-shadow: 0 30px 80px rgba(15, 17, 34, .4);
  transform: translateY(16px) scale(.985); transition: transform .3s ease; }
.idx-modal.is-open .idx-card { transform: none; }

/* Croix noire sur pastille blanche, comme la pop-up Contact : sur ce bleu clair une
   croix blanche tomberait sous le seuil de contraste. */
.idx-close { position: absolute; top: clamp(12px, 1.4vw, 18px); right: clamp(12px, 1.4vw, 18px);
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--black); background: #fff;
  transition: background-color .2s ease; z-index: 1; }
.idx-close::before, .idx-close::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px; background: var(--black); border-radius: 2px; }
.idx-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.idx-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.idx-close:hover { background: var(--black); }
.idx-close:hover::before, .idx-close:hover::after { background: #fff; }

/* « SCORE INDEX 2026 » en maigre, « 85/100 » en gras dessous. Unbounded : le premier
   est en capitales, le second purement numérique — les deux cas admis par l'invariant. */
.idx-title { font-family: var(--f-unb); color: #fff; line-height: 1; margin: 0 0 clamp(20px, 2.6vw, 34px); }
.idx-title .l { display: block; font-weight: 300; font-size: clamp(22px, calc(22px + 24 * (100vw - 390px) / 1050), 46px);
  letter-spacing: 0.01em; }
.idx-title .b { display: block; font-weight: 700; font-size: clamp(28px, calc(28px + 28 * (100vw - 390px) / 1050), 56px);
  letter-spacing: -0.01em; margin-top: .12em; }

/* Quatre blocs en 2 × 2, le cinquième à part. En dessous de 700px il passe sous les
   quatre autres, sur toute la largeur ; au-dessus il prend une troisième colonne et
   toute la hauteur, comme le board desktop. */
.idx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); }
.idx-cell--tall { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .idx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idx-cell--tall { grid-column: 3; grid-row: 1 / span 2; }
}

.idx-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: clamp(8px, 1vw, 14px); padding: clamp(16px, 2.2vw, 30px) clamp(12px, 1.8vw, 24px);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: clamp(10px, 1.2vw, 16px);
  background: rgba(255, 255, 255, .14); color: #fff; }
.idx-cell p { font-family: var(--f-alb); font-size: clamp(13px, calc(13px + 5 * (100vw - 390px) / 1050), 18px);
  line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.idx-cell b { font-family: var(--f-unb); font-weight: 700;
  font-size: clamp(26px, calc(26px + 28 * (100vw - 390px) / 1050), 54px); line-height: 1; letter-spacing: -0.01em; }