/* ============================================================
   87seconds — V2 RESPONSIVE · About us
   Réf. V1 : styles inline de `about-us.html` (desktop 1440 / mobile 390).
   ============================================================ */

:root {
  --fs-abouth1:  clamp(24px, calc(24px + 12 * (100vw - 390px) / 1050), 36px);
  --fs-manifest: clamp(16px, calc(16px +  8 * (100vw - 390px) / 1050), 24px);
  --fs-modelh:   clamp(22px, calc(22px +  8 * (100vw - 390px) / 1050), 30px);
  --fs-modeld:   clamp(20px, calc(20px +  6 * (100vw - 390px) / 1050), 26px);
  --fs-160:      clamp(26px, calc(26px + 10 * (100vw - 390px) / 1050), 36px);
  --fs-cultures: clamp(42px, calc(42px + 18 * (100vw - 390px) / 1050), 60px);
  --fs-office:   clamp(28px, calc(28px +  8 * (100vw - 390px) / 1050), 36px);
  /* Citation des fondateurs (boards `123:18356` / `123:18139`) */
  --fs-quote:    clamp(22px, calc(22px + 10 * (100vw - 390px) / 1050), 32px);
  --fs-qmark:    clamp(32px, calc(32px + 16 * (100vw - 390px) / 1050), 48px);
  --fs-sign:     clamp(16px, calc(16px +  4 * (100vw - 390px) / 1050), 20px);
  /* Rythme des deux boards : 50 en mobile, 80 à 1440 — et demi-hauteur réelle de la
     pastille, que le bloc suivant doit rendre après `cap-astride--exact` (cf. V67). */
  --about-gap:      clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px);
  --about-cap-half: calc(13px + 0.6 * var(--fs-seclabel));
}

/* ---------- Hero : la capsule du titre chevauche le bas du visuel ---------- */
.about-hero { position: relative; width: 100%; overflow: visible;
  /* Plafonné par la fenêtre — voir --banner-max dans r-base.css — MOINS le débord de
     la capsule. Celle-ci est posée à cheval sur le bas du bandeau (`translate: 0 50%`,
     plus bas) : elle descend donc de sa demi-hauteur SOUS lui et, sans cette réserve,
     c'est elle qu'on voit dans la bande laissée libre, au lieu du début de la section
     suivante — seul cas du site, vérifié par sondage sur les 11 bandeaux.
     90px = sa demi-hauteur maximale, relevée à 390px de large (178 / 2). Une valeur
     fixe et non un calcul : le titre se replie sur deux ou trois lignes selon la
     largeur, si bien que la hauteur de la capsule n'est pas monotone (120px à 1024,
     150px à 900) et qu'aucun `clamp` ne la décrit. */
  --about-cap-debord: 90px;
  height: max(656px, calc(100vh  - var(--banner-peek) - var(--about-cap-debord)));
  height: max(656px, calc(100svh - var(--banner-peek) - var(--about-cap-debord))); }
.about-hero-img { position: absolute; inset: 0; overflow: hidden; }
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* La capsule est posée à cheval sur le bas du visuel (maquette : y726 pour un hero
   de 785, soit une moitié dedans, une moitié dehors). */
.about-hero .cap-row { position: absolute; left: 0; right: 0; bottom: 0; translate: 0 50%; z-index: 2; padding-inline: var(--gutter); }
.about-h1 { font-family: var(--f-unb); font-weight: 400; font-size: var(--fs-abouth1); line-height: 1.2; letter-spacing: 0.017em; text-transform: uppercase; text-align: center; color: var(--black); }
.about-h1 b, .about-h1 .b { font-weight: 700; }
/* La capsule du hero fait DEUX lignes dans les nouveaux boards (« WE ARE THE
   WORLD'S » en Regular, puis le nom du positionnement en Bold), d'où un padding plus
   généreux que celui du socle : 24/60 à 1440, 15/33 en mobile. */
.about-hero .cap { padding: clamp(15px, calc(15px + 9 * (100vw - 390px) / 1050), 24px) clamp(33px, calc(33px + 27 * (100vw - 390px) / 1050), 60px); }
.about-h1 .rg { font-weight: 400; }

/* La section suivante doit dégager la moitié basse de la capsule — qui fait
   maintenant deux lignes (cinq en mobile) : le dégagement est donc plus grand, et
   dimensionné sur le cas le plus haut (le français). Mesuré : 80px sous la capsule
   à 1440, 50 en mobile, comme la gouttière de bloc des boards. */
.about-manifesto { padding-top: clamp(139px, calc(139px + 10 * (100vw - 390px) / 1050), 149px); }
/* Le bloc de citation est plus large que la colonne de lecture : 1360 dans le board
   (soit 40 de gouttière), contre les 1204 habituels. */
@media (min-width: 900px) { .about-manifesto .wrap { max-width: 1440px; padding-inline: 40px; } }

/* ============================================================
   CITATION DES FONDATEURS — remplace le manifeste centré
   (boards `123:18361` desktop / `123:18148` mobile)
   ------------------------------------------------------------
   Desktop : la photo (577 × 680) à gauche, 71 de gouttière, la colonne à droite —
   citation bleue entre guillemets, paragraphe, puis la signature.
   Mobile : tout est centré et la photo passe SOUS le texte (350 × 467).
   ============================================================ */
.quote-block { display: flex; flex-direction: column; gap: 32px; }
.quote-media { position: relative; overflow: hidden; border-radius: 15px; aspect-ratio: 350/467; }
.quote-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.quote-body { display: flex; flex-direction: column; gap: 16px; text-align: center; }
.quote-text { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-quote); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: #72a5e3; }
/* Les guillemets sont posés dans le flux (et non en absolu comme dans le board) :
   ils suivent ainsi la casse du texte quelle que soit la langue ou la largeur. */
.quote-text .qm { font-family: var(--f-unb); font-weight: 900; font-size: var(--fs-qmark); line-height: 0; letter-spacing: 0.02em; vertical-align: -0.12em; }
.quote-text .qm--open { margin-right: .12em; }
.quote-text .qm--close { margin-left: .12em; }
/* Le paragraphe et la signature forment un sous-bloc (24 en mobile, 32 à 1440) ; la
   citation, elle, est à 16 / 50 du reste. */
.quote-foot { display: flex; flex-direction: column; gap: 24px; }
.quote-p { font-family: var(--f-alb); font-size: var(--fs-manifest); line-height: 1.2; letter-spacing: -0.01em; color: var(--black); }
.quote-sign { font-family: var(--f-alb); font-size: var(--fs-manifest); line-height: 1.2; letter-spacing: 0.02em; color: var(--black); }
.quote-sign b { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-sign); text-transform: uppercase; }
/* Les `<br>` calent les lignes des boards LARGES ; sous 900px le texte se recompose
   (un espace précède chacun d'eux, sinon les mots se recolleraient — leçon V67). */
@media (max-width: 899px) {
  .quote-text br, .quote-p br, .comex-intro br, .cultures-body br { display: none; }
}
@media (min-width: 900px) {
  .quote-block { flex-direction: row; align-items: center; gap: 71px; }
  /* Le board mobile met la photo SOUS le texte, le desktop à sa GAUCHE : l'ordre du
     DOM suit le mobile (et la lecture), `order` la ramène à gauche en desktop. */
  /* 577px est la cote du board — mais elle vaut pour une colonne de 1204. Figée,
     elle affame la colonne de texte dans la bande 900-1000 : à 900 il ne restait que
     172px pour la citation, dont le plus long mot insécable — « 87SECONDS, » — en
     demande 218. D'où 5px de débord de page, apparus en V145 : en retirant « Group »,
     la virgule s'est collée à « 87seconds » et a rallongé ce mot d'un caractère.
     On garde donc la PROPORTION du board (577/1204 = 48 %) et non sa valeur absolue :
     identique à 1440, et la colonne de texte respire en dessous. */
  .quote-media { order: -1; flex: none; width: min(577px, 48%); aspect-ratio: 577/680; }
  .quote-body { flex: 1 1 0; min-width: 0; gap: 50px; }
  .quote-text { line-height: 1.2; }
  .quote-foot { gap: 32px; }
}

/* ============================================================
   OUR COMEX — nouveau bloc (boards `123:18403` / `123:18187`)
   ------------------------------------------------------------
   Pastille à cheval sur la fin de la bande bleue, chapô en deux paragraphes,
   capsule inclinée à texte rempli d'image, puis les neuf portraits du comité.
   ============================================================ */
.about-comex .cap-astride--exact + * { margin-top: calc(var(--about-gap) - var(--about-cap-half)); }
.comex-intro { font-family: var(--f-alb); font-size: var(--fs-manifest); line-height: 1.2; letter-spacing: -0.01em; text-align: center; color: var(--black); }
.comex-intro b { font-weight: 700; }
.comex-intro + .comex-intro { margin-top: 1.2em; }

/* Capsule inclinée, texte rempli d'image — même principe que « 160 CULTURES ».
   Le remplissage est une BANDE extraite de la photo d'origine (le connecteur donne
   un cadrage en % qui ne reproduit pas le rendu Figma) : elle est simplement étirée
   sur la boîte du texte, ce qui la rend indépendante de la langue et de la casse. */
/* En mobile la capsule dépasse légèrement la colonne de lecture dans le board (374
   pour 350) : les 12px rendus de chaque côté lui permettent de tenir sur trois
   lignes comme la maquette, au lieu de quatre. */
.tilt-wrap { display: flex; justify-content: center; margin-top: clamp(12px, 1.6vw, 20px); margin-inline: -12px; }
@media (min-width: 900px) { .tilt-wrap { margin-inline: 0; } }
.tilt-cap { display: inline-flex; align-items: center; justify-content: center; background: #fbfcfe; border: 2px solid var(--black); border-radius: 6px;
  padding: clamp(6px, .8vw, 8px) clamp(12px, 1.6vw, 24px); transform: rotate(-2.5deg); max-width: 100%; }
.clip-fill { background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.clip-meet { font-family: var(--f-unb); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; text-align: center;
  background-image: url('../img/about/fill-meet-team.webp'); }
@media (min-width: 900px) { .tilt-cap { transform: rotate(-2deg); } .clip-meet { line-height: 1.38; white-space: nowrap; } }
/* V137 — la bannière est en `white-space: nowrap` à un corps FIGÉ à 26 px : dès
   900 px la phrase française (« Rencontrez l'équipe qui fait compter chaque
   seconde. », 1 042 px de large) sortait du cadre blanc ET de l'écran — 72 px de
   défilement horizontal à 900, 22 à 1000, et un débord du cadre jusqu'à ~1270.
   Le corps se cale donc sur la largeur disponible, sans jamais dépasser les 26 px
   du gabarit : 17,9 px à 900, 19,9 à 1000, 21,9 à 1100, puis 26 dès ~1180 où la
   phrase tient d'elle-même. 40,2 = largeur du texte par point de corps (mesurée :
   40,094) ; 46 px couvre le rembourrage fluide (33 à 900, 50 à 1440) plus la
   bordure. La bande reste sur UNE ligne — c'est son identité graphique.
   Borné au FR : l'anglais est plus court (34,876 par point) et son rendu, validé,
   ne doit pas bouger. Le conteneur est `.tilt-wrap`, conteneur de bloc à largeur
   définie — cf. le piège documenté en V136 sur `.cap-row`. */
/* V155 — l'anglais souffre du même mal, contrairement à ce que dit la note ci-dessus :
   « Meet the team that makes every second count. » demande 907px au corps de 26
   (34,876 par point, la mesure déjà consignée en V137) alors que le cadre n'en offre
   que 719 à 900px. La bannière débordait donc son cadre sous ~1130px, et la page de
   4px à 900 — vérifié identique en v4, c'est un défaut antérieur, pas une régression.
   Même mécanique, avec le ratio de l'anglais. Au-dessus de ~1130 le `min()` rend les
   26px du gabarit : le rendu validé à 1440 ne bouge pas. */
@media (min-width: 900px) {
  .tilt-wrap { container-type: inline-size; }
  html[lang="fr"] .clip-meet { font-size: min(26px, (100cqw - 46px) / 40.2); }
  html[lang="en"] .clip-meet { font-size: min(26px, (100cqw - 46px) / 34.9); }
}

/* Grille du comité — boards `403:5074` (1440) et `403:5125` (390).
   Le board pose les deux fondateurs SEULS sur la première rangée, CENTRÉS, puis les
   huit autres en trois colonnes : 3 + 3 + 2, la dernière rangée ferrée à gauche.

   Une grille à trois colonnes ne sait pas centrer deux cartes — il faudrait les poser
   à cheval sur les colonnes 1,5 à 2,5. La grille est donc en SIX colonnes et chaque
   carte en occupe DEUX : à 1204 de large et 24 de gouttière, une colonne fait 180,67
   et un empan de deux fait 180,67 × 2 + 24 = 385,33 — la largeur de carte du board,
   au pixel. Les fondateurs sont placés en 2-3 et 4-5, soit x = 204,67 et 614 :
   exactement les abscisses du board. Les huit suivantes se placent toutes seules,
   la colonne 6 de la première rangée restant vide (un empan de deux n'y tient pas). */
.comex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: var(--about-gap); }
/* Le board n'a que deux états : une colonne en mobile, la grille complète au-dessus.
   Pas de palier intermédiaire à deux colonnes — il donnait « 2 puis 2 » là où le board
   dit « 2 puis 3 ». La bascule se fait donc à 600, pas à 900. */
@media (min-width: 600px) {
  .comex-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(32px, 5.9vw, 53px); }
  .comex-grid > .comex-card { grid-column: span 2; }
  .comex-grid > .comex-card:nth-child(1) { grid-column: 2 / span 2; }
  .comex-grid > .comex-card:nth-child(2) { grid-column: 4 / span 2; }
}
.comex-card { display: flex; flex-direction: column; gap: 12px; }
/* Le portrait garde le MÊME rapport aux deux échelles : 385,33 × 370 en desktop,
   350 × 336,07 en mobile — 1,0414 dans les deux cas. Rayon 12 (24 dans l'export 2×). */
.comex-photo { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 385.33/370; }
.comex-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 24px dans les deux boards (nom en Unbounded Bold, fonction en Albert). Entre 600 et 1000 la carte descend à 160-230 de large :
   la taille suit, sinon « GENERAL MANAGER WHATSQUARE » part sur quatre lignes. */
.comex-card figcaption { font-family: var(--f-alb); font-size: clamp(13px, calc(13px + 11 * (100vw - 600px) / 840), 24px); line-height: 1.2; letter-spacing: 0.02em; text-align: center; color: var(--black); }
@media (max-width: 599px) { .comex-card figcaption { font-size: 24px; } }
.comex-card figcaption b { font-family: var(--f-unb); font-weight: 700; text-transform: uppercase; }

/* ---------- OUR MODEL ---------- */
/* Mêmes trait et point lumineux que les piliers de la famille expertise, mais la
   feuille n'est pas chargée ici : les règles sont reprises à l'identique. */
/* Les nouveaux boards ont RETIRÉ la pastille « OUR MODEL » qui ouvrait la bande (le
   titre reste, en gros, sur la section des bureaux) : la bande commence donc
   directement par les trois rangées, 110px sous son bord haut à 1440, 50 en mobile. */
.about-model { padding-block: clamp(50px, calc(50px + 60 * (100vw - 390px) / 1050), 110px) clamp(50px, calc(50px + 30 * (100vw - 390px) / 1050), 80px); }
/* Le fond est le MÊME `fond-bleu4` que les pages d'expertise, mais RETOURNÉ : les
   boards le donnent foncé à gauche (relevé au pixel : leur bord gauche vaut le bord
   droit de l'image). Il était posé à l'endroit, d'où une bande claire à gauche. */
.about-model .sec-bg img { transform: scaleX(-1); }
.model-rows { display: flex; flex-direction: column; gap: 24px; padding-left: 0; padding-right: var(--gutter); }
.model-row { display: flex; gap: clamp(16px, 3vw, 32px); align-items: flex-start; }
.model-row .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); }
.model-row .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); }
.model-row .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); }
.model-row h2 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-modelh); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
/* Le descriptif occupe toute la largeur restante (973 dans le board, gouttière de
   droite comprise) : le plafond de 796 de la V1 le cassait trop tôt. */
.model-row .desc { font-family: var(--f-alb); font-size: var(--fs-modeld); line-height: 1.2; letter-spacing: 0.02em; color: #fff; margin-top: clamp(8px, 1.2vw, 12px); }
/* Liens fléchés en Semibold 600 — correction demandée en V2, conservée. Ils ne
   figurent plus que dans le board mobile ; ils sont gardés aux deux largeurs. */
.model-row .link-arrow { margin-top: clamp(10px, 1.2vw, 12px); font-family: var(--f-alb); font-weight: 600; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: #fff; }
.model-row .link-arrow img { filter: invert(1); }

/* ---------- 160 CULTURES ---------- */
.cultures-title { font-family: var(--f-unb); font-weight: 300; font-size: var(--fs-cultures); line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.cultures-title .b { font-weight: 700; }
/* La pastille est inclinée : la rotation est portée par la pastille et l'apparition
   par son enveloppe, sinon `.rv.in { transform:none }` écraserait l'inclinaison.
   Elle CHEVAUCHE le bas du titre (−9 en mobile, −20 à 1440) dans les nouveaux
   boards, et son texte est rempli par la bande cyan extraite de la maquette. */
/* Le −20 du board plaçait la pastille 5px trop haut dans le navigateur (les
   métriques de la boîte de ligne ne sont pas celles de Figma) : −15 à 1440. */
.badge-160-wrap { display: flex; justify-content: center; margin-top: clamp(-15px, calc(-9px - 6 * (100vw - 390px) / 1050), -9px); }
.badge-160 { display: inline-flex; align-items: center; justify-content: center; background: #fbfcfe; border: 2px solid var(--black); border-radius: 6px; padding: 6px 12px; transform: rotate(-2.5deg); }
/* Remplissage : la bande n'est PAS le cadrage en % donné par le connecteur (il tire
   une zone bien plus claire de la photo). Elle est RELEVÉE SUR LE RENDU du board,
   colonne par colonne dans les glyphes : gris-turquoise clair sur « 160 », puis azur
   profond ~#0F8CB6 sur « CULTURES ». */
.clip-160 { font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-160); line-height: 1; text-transform: uppercase; text-align: center; white-space: nowrap;
  background-image: url('../img/about/fill-160-cultures.webp'); background-size: 100% 100%; }
/* Board desktop : la pastille fait 50 de haut pour un texte de 36 (interligne 64),
   sans padding vertical — d'où la hauteur imposée plutôt qu'un padding. */
@media (min-width: 900px) {
  .badge-160 { height: 50px; padding: 0 24px; transform: rotate(-3.6deg); }
  .clip-160 { line-height: 1.3; }
}
.cultures-body { font-family: var(--f-alb); font-size: var(--fs-manifest); line-height: 1.2; letter-spacing: 0.02em; text-align: center; color: var(--black); margin-top: var(--about-gap); }

/* ---------- Filtre des bureaux ---------- */
/* Ferré à DROITE dans les deux nouveaux boards (il était centré), et sans cadre sous
   900px — le board mobile ne montre que « FILTER » et son chevron. */
.filter-row { display: flex; justify-content: flex-end; margin-top: var(--about-gap); }
.filter-wrap { position: relative; }
.filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 177px; padding: 16px 26px; background: #fff; border: 2px solid var(--black); border-radius: 13px; font-family: var(--f-unb); font-weight: 700; font-size: var(--fs-ui); letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); }
.filter-btn .chev { transition: transform .25s ease; }
.filter-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (max-width: 899px) {
  .filter-btn { min-width: 0; padding: 8px 0; background: none; border: 0; font-size: 20px; }
}
/* Flou fort + éclaircissement : le menu reste transparent mais ses libellés noirs
   restent lisibles par-dessus les photos sombres de la grille. */
.filter-menu { position: absolute; top: calc(100% + 9px); left: 0; min-width: 220px; padding: 10px; border-radius: 16px; z-index: 20;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(30px) contrast(.29) brightness(1.55) saturate(180%);
  -webkit-backdrop-filter: blur(30px) contrast(.29) brightness(1.55) saturate(180%);
  border: 1px solid rgba(255,255,255,.5); box-shadow: 0 18px 50px rgba(15,17,34,.22);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.filter-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.filter-menu button { display: block; width: 100%; text-align: left; padding: 10px 18px; border-radius: 9px; font-family: var(--f-unb); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; color: var(--black); transition: background-color .2s ease; }
.filter-menu button:hover, .filter-menu button[aria-current="true"] { background: rgba(255,255,255,.6); }
/* Le filtre est ferré à droite : le menu s'ouvre donc vers l'INTÉRIEUR, sans quoi il
   sortait de l'écran de 91px à 390. */
.filter-menu { left: auto; right: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .filter-menu { background: rgba(255,255,255,.95); }
}

/* ---------- Grille des bureaux ---------- */
/* Une colonne en mobile (maquette 390), trois en desktop (maquette : 1186 pour
   3 colonnes et 24 de gouttière). Palier intermédiaire à 2 colonnes. */
.office-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 24px); margin-top: var(--about-gap); }
@media (min-width: 600px) { .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .office-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 300 en mobile dans le nouveau board (elles faisaient 200), 370 à 1440. */
.office { position: relative; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
  height: clamp(300px, calc(300px + 70 * (100vw - 390px) / 1050), 370px); }
.office img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.office img.bg-hover { opacity: 0; transition: opacity .4s ease; }
.office:hover img.bg-hover { opacity: 1; }
.office::after { content: ""; position: absolute; inset: 0; background: rgba(15,17,34,.3); transition: background-color .4s ease; }
.office:hover img.bg { transform: scale(1.05); }
.office > span { position: relative; z-index: 1; font-family: var(--f-display); font-size: var(--fs-office); line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: #fff; }
.office[hidden] { display: none; }

/* Bloc de contact injecté par `initOfficeContacts()` (main.js) */
.office-info { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.office-contact { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease; display: flex; flex-direction: column; gap: 4px; }
.office-contact .city { font-family: var(--f-unb); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.office-contact .addr { font-family: var(--f-alb); font-size: 14px; line-height: 1.4; }
.office-contact a { font-family: var(--f-unb); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: #fff; }
.office-contact a:hover { text-decoration: underline; }
.office-cta { display: none; align-items: center; gap: 8px; font-family: var(--f-unb); font-weight: 700; font-size: 14px; text-transform: uppercase; color: #fff; margin-top: 10px; }
.office-cta svg { width: 20px; height: 14px; }

/* Desktop : le survol révèle le contact. Mobile : « Contact us » visible, et le
   contact s'ouvre au tap (classe `is-open` posée par le script de la page — la
   fonction de `main.js` teste `.vp-m`, qui n'existe plus dans le DOM unique). */
@media (min-width: 900px) {
  .office:hover .office-contact { max-height: 220px; opacity: 1; margin-top: 12px; }
  .office:hover::after { background: rgba(15,17,34,.72); }
}
@media (max-width: 899px) {
  .office-cta { display: inline-flex; }
  /* La carte GARDE sa hauteur fermée à l'ouverture. Elle passait en `height:auto`
     avec un `min-height` plus court que sa hauteur normale : le contact tenant
     largement dedans, la carte RÉTRÉCISSAIT de 300 à 203px au tap (défaut signalé
     par le client). Le contact se déplie donc à l'intérieur d'un cadre stable —
     c'est déjà ce que fait le survol en desktop. */
  .office.is-open .office-cta { display: none; }
  .office.is-open .office-contact { max-height: 220px; opacity: 1; margin-top: 8px; }
  .office.is-open::after { background: rgba(15,17,34,.72); }
}