/* ═══════════════════════════════════════════════════════════════════ PASSE RESPONSIVE GLOBALE Chargée en dernier sur toutes les pages : c'est ici, et nulle part ailleurs, qu'on corrige le comportement aux petites largeurs. Deux paliers, les mêmes partout : 900 px — le menu passe en tiroir (palier déjà posé par styles.css) 640 px — l'écran ne tient plus une barre à trois blocs Ne pas introduire de troisième palier sans raison : le site en compte déjà neuf hérités (1080, 1040, 1024, 1000, 900, 700, 640, 620, 560), et chaque palier de plus est un endroit de plus où tester. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Le logo ne se comprime plus ───────────────────────────────── Le logo est un monogramme en portrait (979x1182) : à 40 px de haut il fait 33 px de large, pas davantage. Sous 414 px, le cluster de droite (langue + CTA + burger) réclamait 303 px des 335 disponibles et le logo, simple élément flex, se laissait écraser jusqu'à 8 px de large. Un logo à 8 px n'est plus un logo. */ .nav-inner { min-width: 0; } .nav-logo { flex: 0 0 auto; } .nav-logo img { display: block; width: auto; max-width: none; } /* ── 2. La barre sous 900 px ──────────────────────────────────────── Le burger est la commande principale : il garde ses 44x44 quoi qu'il arrive, et ne sert pas de variable d'ajustement au reste de la barre. */ @media (max-width: 900px) { .nav-inner { gap: 14px; } .nav-right { gap: 14px; flex: 0 0 auto; } .nav-right .btn { white-space: nowrap; } .nav-burger { flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; } /* Le sélecteur de langue faisait 34x22 : sous le doigt, c'est raté une fois sur trois. La règle (pointer: coarse) de styles.css couvre les vrais appareils tactiles ; celle-ci couvre le reste (fenêtre étroite sur portable, hybrides à pointeur fin). Un padding seul ne suffit pas — la police fait 10 px et l'interligne est à 1 : on pose la hauteur, et on centre dedans. */ .lang-toggle button, .lang-toggle .lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; } /* Le logo mesure 33x40 : c'est un lien de retour à l'accueil, il doit se viser comme les autres. */ .nav-logo { min-height: 44px; align-items: center; } } /* ── 3. La barre sous 640 px ──────────────────────────────────────── À 375 px, logo + langue + CTA + burger réclament 368 px pour 335 disponibles : quelque chose doit partir. Le CTA descend dans le tiroir, où il occupe toute la largeur — plus visible qu'écrasé dans un coin. main.js l'y clone au chargement. */ @media (max-width: 640px) { .nav-right > .btn { display: none; } } /* ── 4. Le tiroir de navigation ───────────────────────────────────── .nav-menu porte align-items:center pour la barre horizontale ; en colonne, cet héritage centrait les liens et réduisait leur zone cliquable à la largeur du texte. Chaque lien redevient une ligne pleine largeur. */ @media (max-width: 900px) { .nav-menu.open { align-items: stretch; text-align: left; gap: 4px; padding-top: 12px; padding-bottom: 20px; max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; } .nav-menu.open > a, .nav-menu.open .nav-dd-trigger { display: block; padding: 14px 0; min-height: 44px; } /* .nav-dd est lui-même un flex en colonne calé sur flex-start : sans stretch, le sous-menu et ses liens se réduisent à la largeur du mot. */ .nav-menu.open .nav-dd, .nav-menu.open .nav-dd-menu { width: 100%; align-items: stretch; } .nav-menu.open .nav-dd-menu a { display: block; padding: 12px 0; min-height: 44px; } /* Le CTA cloné : pleine largeur, en bas du tiroir, séparé des liens. */ .nav-cta-drawer { display: none; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--grey-200); } .nav-cta-drawer .btn { display: flex; width: 100%; justify-content: center; padding: 16px 20px; font-size: 12px; } .nav-menu.open .nav-cta-drawer { display: block; } } @media (min-width: 641px) { /* Au-dessus de 640 px le CTA reste dans la barre : pas de doublon. */ .nav-cta-drawer { display: none !important; } } /* Le tiroir ouvert fige le fond : sans ça, le scroll de la page passe sous le menu et l'utilisateur perd sa position. */ body.nav-open { overflow: hidden; } /* ── 5. Cibles tactiles ───────────────────────────────────────────── Les filtres de la muraille de logos faisaient 39 px de haut. Quatre de moins que le minimum, sur une rangée de boutons serrés. */ @media (max-width: 900px) { .logo-filter { min-height: 44px; padding: 12px 16px; } .logo-filters { gap: 10px 8px; } } /* ── 6. Plancher typographique sur petit écran ────────────────────── Les libellés mono à 9–10,5 px tiennent sur un 27 pouces, pas dans une main. On les remonte à 11 px sous 640 px et on rogne l'interlettrage d'autant : à cette taille, 0,24em coupe le mot en morceaux. Le rendu bureau ne bouge pas. */ @media (max-width: 640px) { /* Libellés du socle (styles.css) */ .hsplit-text .hero-eyebrow, .hsplit-labels, .map-panel-eyebrow, .map-panel .status, .region-country .badge, .case-study .cs-block h5, .sector-card .sector-clients-label, .hero-hud, .team-role, .team-mini em, .footer-esomar span, /* Pages de contenu (styles-contenus.css) */ .art-facts dt, .tw th, .ct-card-top, .ct-card-foot, .wb-rail a, .stat-s, .imp-k, .art-by-r, /* Décision rapide (styles-decision.css) */ .dr-stat-l, .dr-tl-label, .dr-tl-item, .dr-budget-l, .dr-interne-tag, /* Séquence v4 (styles-v4-2.css / v4-3.css) On ne touche pas au chrome de tournage (.v4-pp) : ce sont des pastilles décoratives calibrées au pixel, pas du texte qu'on lit. Les grossir les ferait déborder. */ .v4-slate, .v4-act-meter, .v4-morph-labels, .v4-turn-hint { font-size: 11px; } /* À 11 px, un interlettrage de 0,2em et plus découpe le mot en lettres isolées. On le ramène sous 0,14em partout où il dépassait. */ .hsplit-labels, .map-panel-eyebrow, .region-country .badge, .team-role, .team-mini em, .footer-esomar span, .art-facts dt, .tw th, .ct-card-top, .stat-s, .imp-k, .v4-slate, .v4-act-meter, .v4-morph-labels, .v4-turn-hint { letter-spacing: .12em; } /* Les étiquettes dessinées dans les SVG suivent la même règle. */ .fg-ax, .fg-n { font-size: 11px; letter-spacing: .12em; } /* FR / EN est une commande, pas un ornement : 10 px et 0,18em, c'est illisible sur la seule chose qu'un anglophone cherche en arrivant. */ .lang-toggle { font-size: 11px; letter-spacing: .12em; } } /* ── 7. Garde-fou médias ──────────────────────────────────────────── Aucun média n'a de raison de dépasser son conteneur. Les tableaux sont déjà tous enveloppés dans .tw, qui défile (styles-contenus.css) — rien à ajouter ici, et surtout pas une règle générique qui entrerait en conflit avec ce wrapper. */ img, svg, video, canvas, iframe { max-width: 100%; } /* ── 8. Le hero « démontage » (accueil) sous 1000 px ──────────────── styles-v4-3.css garde, sous 1000 px, la chorégraphie d'origine : le plan en bandeau absolu, et les six paliers de texte empilés au même endroit, calés sur `bottom: 96px`. Ça tient tant que le palier est plus court que l'espace laissé sous le bandeau — ce qui n'est jamais vrai du premier, le seul qui porte à la fois un titre sur trois lignes, un chapô et deux boutons pleine largeur. Mesuré sur 375x812 : bandeau jusqu'à 433 px, premier palier haut de 382 px posé à 334 px. Cent pixels de titre par-dessus la vidéo. Et le défaut suit la HAUTEUR, pas la largeur : une tablette en paysage (1024x768) le reproduit. On ne rattrape pas ça au pixel. Sous 1000 px le hero redevient un bloc de flux : le plan, puis les six paliers à la suite — soit le hero et la méthode en cinq étapes, lisibles d'un seul défilement. C'est exactement le repli déjà écrit pour `prefers-reduced-motion`, dont on reprend les règles. */ @media (max-width: 1000px) { body.v4-3 .v4-hero2 .v4-act-track { height: auto; } body.v4-3 .h2-stage { position: static; height: auto; padding: 104px 0 72px; contain: none; } body.v4-3 .h2-media { position: relative; top: auto; right: auto; left: auto; width: 100%; height: 46vh; transform: none; margin-bottom: 40px; } body.v4-3 .h2-media video { transform: none; } body.v4-3 .h2-copy { position: static; inset: auto; } body.v4-3 .h2-copy::before { display: none; } body.v4-3 .h2-beat { position: static; left: auto; right: auto; bottom: auto; width: auto; max-width: 62ch; opacity: 1; visibility: visible; transform: none; margin-bottom: 48px; padding: 0 var(--gutter); } body.v4-3 .h2-beat:last-child { margin-bottom: 0; } /* Repères de tournage : ils commentent une séquence qui n'existe plus. */ body.v4-3 .h2-rail, body.v4-3 .h2-cue { display: none; } body.v4-3 .v4-hero2 .v4-bar { transform: scaleY(.07); } } /* ── 9. Le hero des pages intérieures ─────────────────────────────── `.hero-compact` réserve 180 px au-dessus du titre pour passer sous la barre — une valeur calée sur une barre de bureau à 96 px. Sur mobile la barre en fait 80, et les 100 px restants s'ajoutent à un écran qui n'en a pas à donner : la page s'ouvre sur du vide. Dix-neuf pages concernées. */ @media (max-width: 900px) { .hero-compact { padding-top: 120px; padding-bottom: 56px; } } @media (max-width: 560px) { .hero-compact { padding-top: 104px; padding-bottom: 44px; } } /* ── 10. Deux rangées de liens trop plates ────────────────────────── Les rubriques de la FAQ (39 px) et le sommaire du livre blanc (17 px) sont des rangées de liens serrées : c'est le cas où quatre pixels manquants se paient en fausses manœuvres. */ @media (max-width: 900px) { .faq-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; } /* Le sommaire est déjà passé en rail horizontal défilant sous 1040 px : on lui donne de la hauteur, pas de la largeur. */ .wb-rail a { min-height: 44px; align-items: center; } } /* Le fil d'Ariane des articles faisait 19 px de haut. On l'epaissit a 33 px — au-dela, le soulignement se decolle du mot et le lien ne se lit plus comme un lien. Au-dessus du minimum de 24 px de la WCAG 2.2, en dessous des 44 px qu'on tient partout ailleurs : c'est le compromis que le soulignement impose. */ @media (max-width: 900px) { .art-kicker a { display: inline-block; padding: 8px 0 6px; } } /* ── 11. Les étiquettes dans les SVG ──────────────────────────────── Un dans un viewBox n'est pas 9 px à l'écran : il est 9 fois l'échelle du SVG. Mesuré sur 375 px de large — carte des territoires (viewBox 600, affiché 335) : échelle 0,56, « AMÉRIQUES / EUROPE / ASIE » rendus à 5 px ; plan du bureau (viewBox 400, affiché 285) : échelle 0,71, l'adresse rendue à 6,4 px et la ville à 5,7 px. On repose la taille en unités du viewBox pour retomber sur 11 px. L'interlettrage est en unités lui aussi : on le réduit d'autant. */ @media (max-width: 640px) { /* Calibrees sur 320 px, la largeur la plus defavorable. */ .terr-teaser-map text { font-size: 24px; letter-spacing: 1.2px; } .office-map text { font-size: 19px; letter-spacing: 1px; } } /* -- 12. Les schemas d'articles ------------------------------------ Les trente figures des articles sont dessinees dans un viewBox de 720 unites de large. Affichees dans une colonne de 280 px, l'echelle tombe a 0,39 : un libelle ecrit en 11 arrive a 4,3 px. Ce n'est plus illisible, c'est absent. Aucun reglage de taille ne rattrape ca — cinq colonnes de frise dans 280 px, c'est 55 px par colonne. On applique donc au schema ce que styles-contenus.css applique deja au tableau : il defile dans sa boite, avec une largeur plancher qui garantit une echelle lisible. 620 unites sur 720 : echelle 0,86, le titre d'etape retombe a 11,6 px. Au-dela d'environ 660 px de fenetre, rien ne defile. */ @media (max-width: 900px) { .fg { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .fg-svg { min-width: 620px; } /* Le sous-titre suivait a 9,9 px : on lui rend deux unites. */ .fg-s { font-size: 13px; } .fg figcaption { position: sticky; left: 0; } } /* -- 13. Hauteur minimale des boutons ------------------------------- Un .btn se retrouvait a 43 px de haut selon son remplissage. Le seuil ne se negocie pas a un pixel pres. */ @media (max-width: 900px) { .btn { min-height: 44px; } }