/* =========================================================================
   MOSAÏCA — PAGE D'ACCUEIL
   -------------------------------------------------------------------------
   Huit mouvements, une thèse : le problème nommé n'est pas toujours le
   problème à traiter. La page démontre une manière de regarder avant de
   présenter une offre ; l'ordre des blocs et le poids typographique sont au
   service de cette démonstration.

   ORDRE DE CHARGEMENT (index.html)
     assets/styles.css
     assets/mckinsey.css
     assets/responsive.css
     assets/home.css            <= ce fichier
     assets/mobile-premium.css  <= planchers tactiles et typographiques
     assets/footer.css
     assets/lang-switch.css

   mobile-premium.css est chargé APRÈS et impose sous 900 px
   `main p, main li, main span … { font-size:max(1em,13px) !important }`.
   Sur une page qui porte sa propre échelle, `1em` vaut la taille du PARENT :
   sans reprise, toute la hiérarchie du téléphone s'aplatirait à 16 px. La
   section 11 rend à la page ses tailles, jamais sous le plancher de 13 px.

   PALETTE
   Marine, bleu nuit, or, gris minéral, blanc. Aucun crème, aucun sable :
   var(--sable) n'apparaît nulle part dans ce fichier.

   ROBUSTESSE
   L'état par défaut de chaque élément EST son état final. Les états
   d'attente n'existent que sous `.hm-js`, posée par assets/home.js. Sans
   JavaScript, sans IntersectionObserver ou en mouvement réduit, la page est
   complète et lisible.

   VERSION ANGLAISE
   en/index.html conserve l'architecture précédente et est servie par
   assets/home-legacy.css. Ne pas y reporter les règles ci-dessous tant que
   sa recomposition n'est pas faite.
   ========================================================================= */

.hm-page{
  --ink:#061F33;        /* bleu nuit    */
  --deep:#082F49;       /* bleu profond */
  --navy:#0E4D6C;       /* bleu pétrole Mosaïca */
  --steel:#315D73;      /* bleu acier   */
  --white:#FFFFFF;
  --mineral:#F3F6F8;    /* blanc minéral froid */
  --pearl:#DCE4E9;      /* gris perle froid    */
  --slate:#344753;      /* gris ardoise */
  --gold:#C9A45C;
  --gold-deep:#8A6520;

  --line:rgba(6,31,51,.14);
  --line-soft:rgba(6,31,51,.08);
  --line-light:rgba(255,255,255,.18);

  --gut:clamp(28px,3.6vw,72px);
  --wrap:1440px;

  background:var(--white);
  color:var(--ink);
  overflow-x:clip;
  font-family:'Space Grotesk',Arial,sans-serif;
}
.hm-wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.hm-page ::selection{background:var(--gold);color:var(--ink)}

/* Aucun lien ne doit retomber sur le style violet souligné du navigateur. */
.hm-page a{color:inherit;text-decoration:none}
.hm-page a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hm-sec--deep a:focus-visible,.hm-close a:focus-visible,.hm-tool a:focus-visible{outline-color:var(--gold)}

/* ---------- ÉCHELLE TYPOGRAPHIQUE ---------------------------------------
   Cibles à 1600 px : H1 ≈ 72, titres de section ≈ 48, chapô ≈ 19, texte ≈ 16.
   ------------------------------------------------------------------------ */
.hm-h2{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(2.05rem,2.85vw,3.35rem);line-height:1.09;letter-spacing:-.022em;
  margin:0;color:var(--ink);text-wrap:balance;
}
.hm-kicker{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:.9rem;
}
.hm-lead{font-size:clamp(1.05rem,1.18vw,1.3rem);line-height:1.66;color:var(--slate);margin:1.1rem 0 0;max-width:60ch}

.hm-sec{padding:clamp(60px,5.4vw,102px) 0;position:relative}
.hm-sec--deep{background:var(--deep);color:var(--white)}
.hm-sec--deep .hm-h2{color:var(--white)}
.hm-sec--deep .hm-kicker{color:var(--gold)}
.hm-sec--deep .hm-lead{color:rgba(255,255,255,.78)}
.hm-head{max-width:62ch;margin-bottom:clamp(34px,3.4vw,58px)}

/* ---------- BOUTON ET LIENS ---------------------------------------------
   Un seul modèle de bouton subsiste sur la page : l'appel final. Partout
   ailleurs, un lien éditorial souligné d'or — la homepage n'a pas besoin
   d'une forêt de boutons pour être compréhensible.
   ------------------------------------------------------------------------ */
.hm-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1.05rem 2rem;border-radius:2px;border:1px solid var(--gold);
  background:var(--gold);
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:background .25s,border-color .25s;
}
.hm-btn::after{content:"\2192";transition:transform .25s}
.hm-btn:hover{background:#D8B879;border-color:#D8B879}
.hm-btn:hover::after{transform:translateX(4px)}
/* .hm-page a{color:inherit} est plus spécifique qu'une classe seule : sans
   cette reprise qualifiée, le libellé repartait en blanc sur or, à 2,35:1. */
.hm-page a.hm-btn{color:var(--ink)}

.hm-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;font-weight:700;letter-spacing:.05em;
  border-bottom:1px solid var(--gold);padding-bottom:.16rem;transition:color .22s;
}
.hm-link::after{content:"\2192";transition:transform .22s}
.hm-page a.hm-link{color:var(--navy)}
.hm-page a.hm-link:hover{color:var(--gold-deep)}
.hm-link:hover::after{transform:translateX(3px)}
/* Sur fond sombre, le bleu pétrole tombe sous le seuil : l'or prend le relais. */
.hm-page a.hm-link--light{color:var(--gold)}
.hm-page a.hm-link--light:hover{color:var(--white);border-bottom-color:var(--white)}


/* =========================================================================
   01. HÉROS — LEVÉE DE LA MOSAÏQUE

   Le héros occupe l'écran entier. La navigation se superpose : elle ne
   réserve plus de bande blanche au-dessus de l'image.

   L'image apparaît d'un seul tenant, à cadrage fixe : aucune découpe, aucune
   apparition par tranche ou par pièce, aucun zoom, aucun flou.

   Règle de robustesse conservée : l'état par défaut ci-dessous est l'état
   FINAL (mosaïque complète, texte visible, navigation visible). Les états
   masqués n'existent que sous .is-armed / .is-building / html.hm-intro,
   posés par le script. Sans JavaScript, rien n'est caché.
   ========================================================================= */

/* styles.css pose body{padding-top:var(--nav-h)} pour compenser une barre
   fixe opaque. Sur l'accueil la barre est transparente : on l'annule. */
body.hm-hero-mode{padding-top:0}

.hero-mosaica{
  position:relative;
  /* PLEIN ÉCRAN STRICT. La navigation est superposée (body.hm-hero-mode pose
     padding-top:0), donc le héros part du haut du viewport : il doit occuper
     exactement toute la hauteur visible, sans laisser affleurer la section
     suivante ni ménager la moindre bande blanche d'invitation au défilement.
     min-height, pas height : sur un écran très bas le héros s'étend pour ne
     jamais tronquer la dernière ligne du titre — et la section suivante
     reste alors elle aussi hors du premier écran. */
  min-height:100vh;
  display:flex;align-items:center;
  /* Bleu nuit de départ : le seul état visible pendant les 820 premières
     millisecondes, quand la question est là et l'image pas encore. */
  background:#020D17;
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
}
/* 100svh = plus petite hauteur de viewport (barre d'adresse mobile déployée).
   Quand la barre se rétracte, le héros grandit ; il ne rapetisse jamais sous
   la ligne de flottaison, donc aucun aperçu de la suite au chargement. */
@supports (height:100svh){
  .hero-mosaica{min-height:100svh}
}

/* --- couche 2 : image finale complète ----------------------------------- */
.hero-mosaica__final-image{position:absolute;inset:0;z-index:1}
.hero-mosaica__final-image picture{display:block;width:100%;height:100%}
.hero-mosaica__final-image img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* --- couche 3 : lisibilité, confinée à gauche ---------------------------
   Calibré sur l'image réelle, pas sur une valeur théorique. La moitié
   gauche de la mosaïque est déjà à 17:1 contre le blanc ; le point le plus
   clair de la zone de texte (une tesselle dorée à 53 % de la largeur)
   mesurait 2,61:1 sans voile et 4,96:1 avec l'ancien voile (0,88→0,06).
   Titre allégé et CTA retirés : le bloc de texte est plus court, donc une
   part plus grande du voile ne couvre plus rien. Assoupli d'un cran
   (0,80→0,05) — la tesselle la plus claire reste au-dessus de 4,5:1. ---- */
.hero-mosaica__overlay{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(3,24,39,.80) 0%,
    rgba(3,24,39,.74) 26%,
    rgba(3,24,39,.59) 44%,
    rgba(3,24,39,.26) 58%,
    rgba(3,24,39,.05) 72%,
    rgba(3,24,39,0)   82%);
}
/* Ancrage haut : raccord entre le voile de la barre et l'image. Il est plus
   léger qu'avant, la barre portant désormais son propre fond ; il sert
   uniquement à éviter une arête nette sous la navigation. */
.hero-mosaica__overlay::before{
  content:"";position:absolute;left:0;right:0;top:0;height:190px;
  background:linear-gradient(180deg,rgba(3,24,39,.42) 0%,rgba(3,24,39,.20) 54%,rgba(3,24,39,0) 100%);
}

/* --- couche 4 : contenu -------------------------------------------------- */
.hero-mosaica__content{
  position:relative;z-index:4;width:100%;
  padding-left:clamp(56px,7.5vw,150px);
  padding-right:var(--gut);
  /* ZONE DE SÉCURITÉ DE LA NAVIGATION.
     La barre reste superposée, mais plus rien du contenu éditorial ne peut
     remonter derrière elle : sous la hauteur de barre s'ajoute une réserve
     qui garantit au moins 40 px de blanc entre le bas du menu et la première
     ligne du titre, y compris sur un écran bas où le bloc ne peut plus être
     centré et vient buter sur cette marge. */
  padding-top:calc(var(--nav-h,68px) + clamp(40px,6vh,88px));
  /* Le bloc est centré verticalement, mais la marge basse excède nettement la
     marge haute : le texte se pose au-dessus du centre optique, respire, et
     laisse la moitié droite de la mosaïque prendre plus d'importance. */
  padding-bottom:calc(var(--nav-h,68px) + clamp(70px,13vh,170px));
}

.hero-mosaica__title{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  /* Titre principal, poids fort sans écraser : 360 -> ~30px · 768 -> ~40px ·
     1024 -> ~44px · 1280 -> ~49px · 1440 -> ~52px · 1920+ -> 54px (plafond). */
  font-size:clamp(1.9rem, 1.5rem + 1.85vw, 3.375rem);
  line-height:1.12;letter-spacing:-.02em;
  color:var(--white);margin:0;max-width:min(680px,92vw);
}
.hero-mosaica__line{display:block}
/* La 2e ligne est LA question — vrai point focal. Un cran au-dessus du titre,
   jamais écrasée : 360 -> ~32px · 768 -> ~43px · 1280 -> ~52px · 1440 -> ~55px
   · 1920+ -> 58px (plafond). Respiration accrue avant elle ; le corps est
   propre à cette ligne, l'interligne interne du titre n'est pas touché. */
.hero-mosaica__line + .hero-mosaica__line{
  margin-top:.58em;
  font-size:clamp(2.1rem, 1.6rem + 2.1vw, 3.625rem);
  line-height:1.08;letter-spacing:-.022em;
  /* La question est le point focal : elle s'affranchit de la mesure courte du
     titre pour tenir sur une seule ligne dès que la fenêtre le permet.
     width:max-content la fait tenir à son texte ; la borne haute la ramène à
     la ligne — après « vous », jamais en plein mot — sur les fenêtres
     étroites, sans jamais dépasser le bord. */
  width:max-content;
  max-width:min(86vw,900px);
}
.hero-mosaica__gold{color:var(--gold)}

/* Bloc éditorial : deux niveaux distincts, jamais un deuxième titre.
   La deuxième phrase est la définition institutionnelle verrouillée du
   cabinet ; elle est reprise mot pour mot dans le pied de page. */
.hero-mosaica__subtitle{margin-top:clamp(30px,4vw,48px)}
.hero-mosaica__subtitle-lead{
  /* Plus discret que la question, bien lisible : 390 -> 17px · 768 -> 19px ·
     1024 -> 20px · 1366 -> 22px · 1920+ -> 24px (plafond). */
  font-size:clamp(1.0625rem, 0.92rem + .5vw, 1.5rem);
  font-weight:600;line-height:1.4;
  color:rgba(255,255,255,.96);
  margin:0;max-width:min(620px,92vw);
}
/* « et » et « intelligence » sont liés par une espace insécable (voir HTML) :
   ils forment un seul mot pour le moteur de repli des lignes, donc « et »
   ne peut jamais se retrouver seul en fin de ligne, à aucune largeur. */
/* Sous 1200 px, une borne relative devenait plus étroite que le plus long
   mot du titre (« comportements ») et forçait une coupure en plein mot. On
   libère donc la seule mesure du titre ; les deux niveaux du sous-titre
   gardent une mesure courte (leurs mots tiennent partout, jusqu'au 320 px),
   pour un retour à la ligne maîtrisé plutôt qu'une ligne pleine largeur. */
@media(max-width:1200px){
  .hero-mosaica__title{max-width:none}
  .hero-mosaica__subtitle-lead{max-width:min(560px,100%)}
  .hero-mosaica__subtitle-sub{max-width:min(600px,100%)}
}
/* Le socle applique `overflow-wrap:break-word` à tous les titres, ce qui
   autorise la coupure d'un mot lorsqu'il ne tient pas seul sur sa ligne.
   La mesure élargie ci-dessus rend ce cas impossible ; on retire malgré
   tout l'autorisation, pour que la protection soit structurelle et non le
   simple effet d'une largeur suffisante. */
.hero-mosaica__title,
.hero-mosaica__subtitle-lead,
.hero-mosaica__subtitle-sub{overflow-wrap:normal}

.hero-mosaica__subtitle-sub{
  /* Texte descriptif, mesure resserrée et interligne aéré : 390 -> ~15px ·
     768 -> 17px · 1024 -> 18px · 1440 -> 19px · 1920+ -> 20px (plafond). */
  font-size:clamp(0.95rem, 0.88rem + .3vw, 1.25rem);
  font-weight:400;line-height:1.6;
  color:rgba(255,255,255,.8);
  margin:clamp(16px,1.8vw,24px) 0 0;max-width:min(640px,92vw);
}
/* Saut demandé après « intentions », pour que « de ce qui se vit au
   quotidien. » reste entier sur sa propre ligne. Actif seulement à partir
   de 960px : en dessous, le segment qui précède ne tient déjà plus sur une
   seule ligne à lui seul, et forcer la coupure y produit une 2e ligne
   coupée à son tour plutôt que la lecture voulue — le repli naturel du
   texte y est préférable. */
.hero-mosaica__subtitle-break{display:none}
@media(min-width:960px){
  .hero-mosaica__subtitle-break{display:inline}
}

/* =========================================================================
   01b. SÉQUENCE D'INTRODUCTION
   Chronologie réelle : 0,08 s titre · 0,72 s or · 0,82 s levée de l'image ·
   2,00 s navigation · 2,42 s mosaïque pleine · 2,14–2,56 s contenu.
   Les décalages individuels sont posés en ligne par le script.
   ========================================================================= */

/* -- état armé : ce qui est masqué avant le départ ------------------------ */

/* L'image ne se construit pas par morceaux et ne bouge pas : elle monte en
   lumière, d'un seul tenant, à cadrage strictement fixe. Aucun zoom, aucun
   flou, aucune déformation — rien qui vienne s'interposer entre le visiteur
   et la mosaïque. */
.hero-mosaica.is-building .hero-mosaica__final-image{opacity:0}
/* Le voile de lisibilité monte avec l'image. À pleine force dès le départ,
   il écraserait la moitié gauche au moment précis où elle émerge ; rien ne
   l'exige alors, puisque seul le titre est affiché — blanc, 73 px, 16:1 même
   sous voile allégé. Le chapô et la mention n'arrivent qu'après. */
.hero-mosaica.is-building .hero-mosaica__overlay{opacity:.40}
.hero-mosaica.is-armed .hero-mosaica__line{opacity:0;transform:translateY(12px)}
.hero-mosaica.is-armed .hero-mosaica__gold{color:rgba(255,255,255,.94)}
.hero-mosaica.is-armed .hero-mosaica__subtitle{opacity:0;transform:translateY(10px)}

/* -- transitions : posées avant le retrait de .is-armed ------------------- */
.hero-mosaica.is-playing .hero-mosaica__line{
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.72,.28,1);
}
.hero-mosaica.is-playing .hero-mosaica__gold{transition:color .34s ease}
.hero-mosaica.is-playing .hero-mosaica__subtitle{
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.72,.28,1);
}
/* 1,6 s : assez lent pour qu'on voie la mosaïque venir, assez court pour que
   la séquence entière reste sous 2,6 s.

   La courbe est volontairement proche de la droite — environ la moitié de la
   valeur à la moitié du temps — avec une seule détente à l'arrivée. Une
   courbe plus marquée amenait 79 % de l'image en huit dixièmes de seconde
   puis traînait : on ne voyait plus une montée, on voyait un à-coup suivi
   d'une attente. Ici la lumière monte au même rythme du début à la fin. */
.hero-mosaica.is-playing .hero-mosaica__final-image{
  transition:opacity 1.1s cubic-bezier(.35,.22,.55,1);
  will-change:opacity;
}
.hero-mosaica.is-playing .hero-mosaica__overlay{
  transition:opacity 1.1s cubic-bezier(.35,.22,.55,1);
}

/* =========================================================================
   01c. NAVIGATION SUPERPOSÉE (accueil seulement)
   ========================================================================= */
.gnav-logo-mark--blanc{display:none}
body.hm-hero-mode .gnav-logo-mark{display:none}
body.hm-hero-mode .gnav-logo-mark--blanc{display:block}
body.hm-hero-mode .gnav-logo img{height:38px}

/* Voile bleu nuit : discret, mais suffisant pour que le logo et les liens
   restent lisibles quand ils passent au-dessus des tesselles claires de la
   mosaïque. Ce n'est pas une barre opaque : la mosaïque reste visible au
   travers et le héros n'est pas coupé. */
body.hm-hero-mode .gnav{
  background:rgba(3,24,39,.72);
  -webkit-backdrop-filter:saturate(118%) blur(7px);
  backdrop-filter:saturate(118%) blur(7px);
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:none;
  transition:background .32s ease,border-color .32s ease,box-shadow .32s ease;
}
body.hm-hero-mode .gnav-link,
body.hm-hero-mode .gnav-btn,
body.hm-hero-mode .gnav-logo-text{color:var(--white)}
body.hm-hero-mode .gnav-logo-text span{color:var(--gold)}
body.hm-hero-mode .gnav-link:hover,
body.hm-hero-mode .gnav-btn:hover,
body.hm-hero-mode .gnav-btn.open{background:rgba(255,255,255,.13);color:var(--gold)}
body.hm-hero-mode .gnav-icon-btn{background:transparent;border-color:rgba(255,255,255,.42);color:var(--white)}
body.hm-hero-mode .gnav-icon-btn:hover{background:rgba(255,255,255,.14);border-color:var(--gold);color:var(--gold)}
body.hm-hero-mode .gnav-mobile-btn span{background:var(--white)}

/* Langue et Mon espace sur le héros transparent : mêmes règles que le
   reste de la barre (blanc au repos, or au survol/focus). */
body.hm-hero-mode .gnav-lang-fr{color:var(--white)}
body.hm-hero-mode .gnav-lang-sep{color:rgba(255,255,255,.35)}
body.hm-hero-mode .gnav-lang-en{color:rgba(255,255,255,.5)}
body.hm-hero-mode .gnav-lang-en:hover,
body.hm-hero-mode .gnav-lang-en:focus-visible{color:rgba(255,255,255,.78)}
body.hm-hero-mode .gnav-myspace{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);color:var(--white)}
body.hm-hero-mode .gnav-myspace:hover{background:var(--gold);border-color:var(--gold);color:#031827}

/* Sortie du héros, ou méga-menu ouvert : bleu nuit presque opaque. */
body.hm-hero-mode .gnav.gnav--solid,
body.hm-hero-mode .gnav:has(.gnav-btn.open){
  background:rgba(6,31,51,.965);
  border-bottom-color:rgba(201,164,92,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.26);
}

/* Apparition de la barre à 2,00 s, en même temps que le logo blanc. */
html.hm-intro .gnav{opacity:0;transform:translateY(-12px);pointer-events:none}
html.hm-intro.hm-nav-in .gnav{
  opacity:1;transform:translateY(0);pointer-events:auto;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.72,.28,1),
             background .32s ease,border-color .32s ease,box-shadow .32s ease;
}

/* =========================================================================
   01d. MOUVEMENT RÉDUIT (héros)
   Le script n'arme jamais la séquence dans ce mode ; ces règles neutralisent
   en plus toute transition résiduelle du héros.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-mosaica,.hero-mosaica *,
  body.hm-hero-mode .gnav{transition:none!important;animation:none!important}
  .hero-mosaica__final-image{opacity:1!important}
}


/* =========================================================================
   01e. INDICATEUR DE DÉFILEMENT
   Un chevron fin, blanc à faible opacité, centré en bas du héros. Vrai lien
   ancré vers la première section de contenu (#situations), focusable. Dérive
   verticale presque subliminale ; fondu dès ~100 px de défilement (classe
   posée par home.js). Sous mouvement réduit : dérive supprimée par le bloc
   01d ci-dessus, le chevron reste visible et cliquable.
   ========================================================================= */
.hero-mosaica__scroll{
  position:absolute;
  /* Aligné à gauche, sur la colonne du texte du héros (même left que
     .hero-mosaica__content), donc dans la zone assombrie par le voile —
     là où un chevron blanc reste lisible. Plus de centrage fenêtre. */
  left:clamp(56px,7.5vw,150px);
  bottom:clamp(40px,6vh,48px);
  z-index:4;
  display:flex;align-items:center;justify-content:flex-start;
  width:44px;height:44px;
  color:#fff;opacity:.7;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));
  transition:opacity .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.hero-mosaica__scroll svg{display:block;width:24px;height:14px}
.hero-mosaica__scroll:hover,
.hero-mosaica__scroll:focus-visible{opacity:.9}
.hero-mosaica__scroll:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
  .hero-mosaica__scroll svg{animation:heroScrollDrift 2.8s ease-in-out infinite}
}
@keyframes heroScrollDrift{
  0%,100%{transform:translateY(-2px)}
  50%{transform:translateY(3px)}
}
body.hm-scrolled .hero-mosaica__scroll{opacity:0;pointer-events:none}
/* Écran trop bas : pas de place pour une invite sous le contenu. */
@media (orientation:landscape) and (max-height:560px){
  .hero-mosaica__scroll{display:none}
}


/* =========================================================================
   02. CONFIANCE — une seule bande de références sur toute la page
   ========================================================================= */
.hm-trust{background:var(--white);padding:clamp(40px,3.2vw,60px) 0;border-bottom:1px solid var(--line-soft)}
.hm-trust-label{
  font-size:.94rem;line-height:1.7;color:var(--slate);
  max-width:76ch;margin:0 0 clamp(24px,2.2vw,36px);
}
.hm-trust-logos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:clamp(18px,2vw,34px);align-items:center;
}
.hm-trust-logos li{display:grid;place-items:center;min-height:76px}

/* -------- NORMALISATION OPTIQUE DES LOGOS -------------------------------
   Un pourcentage de cellule commun ne produit pas une présence commune : un
   bloc carré et un long lettrage horizontal n'occupent pas la même surface à
   largeur égale. Chaque marque reçoit donc sa propre boîte d'affichage, en
   pixels, calibrée sur son rapport réel — le plus large tient sur 176 px de
   long, le plus carré sur 68 px de haut, et tous pèsent alors visuellement
   le même poids. --ls réduit l'ensemble d'un cran, la bande étant désormais
   sur une seule rangée de huit.

   Les couleurs officielles sont conservées : aucun filtre, aucune
   désaturation, aucune recoloration. Seule la surface est harmonisée.
   -------------------------------------------------------------------- */
.hm-trust-logos{--ls:.78}
.hm-trust-logos img{
  width:auto;height:auto;object-fit:contain;
  /* min(100%,...) : sous 360 px, une cellule peut devenir plus étroite que
     la boîte calibrée du logo le plus large. Sans cette borne, le lettrage
     débordait de sa cellule. */
  max-width:min(100%, calc(var(--lw,150px) * var(--ls,1)));
  max-height:calc(var(--lh,56px) * var(--ls,1));
  filter:none;opacity:1;
  /* --logo-scale : quelques fichiers embarquent une marge interne
     importante (zone transparente autour du tracé réel). La boîte seule
     ne peut pas la compenser — le rapport largeur/hauteur du fichier
     reste correct, mais le dessin qu'il contient paraît minuscule. Le
     recadrage n'est pas une option (fichier source à ne pas modifier) ;
     on agrandit donc optiquement, sans jamais changer le rapport. */
  transform:scale(var(--logo-scale,1));
}
/* Lettrages très longs (rapport ≥ 3,9) : bornés par la largeur. */
.hm-page img[data-logo="rio-tinto"],
.hm-page img[data-logo="domtar"]{--lw:176px;--lh:48px}
.hm-page img[data-logo="desjardins"],
.hm-page img[data-logo="ami"]{--lw:168px;--lh:48px}
/* Rapport 2,9 à 3,4. */
.hm-page img[data-logo="cegep-chicoutimi"]{--lw:150px;--lh:56px}
/* Rapport 2,4 à 2,7. */
.hm-page img[data-logo="cnesst"]{--lw:146px;--lh:58px}
/* Blocs et lettrages compacts (rapport < 2,4) : bornés par la hauteur. */
.hm-page img[data-logo="mes-staca"]{--lw:132px;--lh:62px}
.hm-page img[data-logo="promotion-saguenay"]{--lw:132px;--lh:64px;--logo-scale:1.3}

/* -------- LISTE ÉTENDUE (bouton « Voir plus ») --------------------------
   Ces 15 marques héritaient toutes de la même boîte par défaut alors que
   leurs fichiers sources n'ont ni le même rapport, ni la même marge
   interne — d'où des poids visuels très inégaux (ex. Axcio ou Asphalte
   Ultra écrasés à côté de Novektra ou Camions Avantage). Boîte calibrée
   sur le rapport réel du fichier, comme ci-dessus ; --logo-scale ajouté
   seulement pour les fichiers dont le tracé n'occupe qu'une petite partie
   du canevas. */
.hm-page img[data-logo="camions-avantage"],
.hm-page img[data-logo="novektra"]{--lw:186px;--lh:44px}
.hm-page img[data-logo="enerserv"]{--lw:184px;--lh:41px}
.hm-page img[data-logo="sante-quebec"]{--lw:160px;--lh:48px}
.hm-page img[data-logo="conformit"]{--lw:170px;--lh:51px;--logo-scale:1.25}
.hm-page img[data-logo="dr-recrutement"]{--lw:154px;--lh:50px;--logo-scale:1.25}
.hm-page img[data-logo="mel"],
.hm-page img[data-logo="eglinc"]{--lw:150px;--lh:50px}
.hm-page img[data-logo="secuor"]{--lw:138px;--lh:56px}
.hm-page img[data-logo="collectif-femmes"]{--lw:140px;--lh:60px}
.hm-page img[data-logo="college-alma"]{--lw:128px;--lh:63px}
.hm-page img[data-logo="cap-jaseux"]{--lw:112px;--lh:62px}
.hm-page img[data-logo="axcio"]{--lw:80px;--lh:64px;--logo-scale:1.5}
.hm-page img[data-logo="cdc-du-roc"]{--lw:78px;--lh:70px}
.hm-page img[data-logo="asphalte-ultra"]{--lw:74px;--lh:74px;--logo-scale:1.3}


/* =========================================================================
   03. LE DÉPLACEMENT DU REGARD
   -------------------------------------------------------------------------
   LE MÉCANISME SIGNATURE DE L’ACCUEIL.

   UNE SEULE MOSAÏQUE, QUATRE LECTURES. Aucun cadre, aucune boîte, aucune
   deuxième illustration : c’est le même système qui devient progressivement
   intelligible, et le dessin doit se lire avant les quatre libellés.

     01  presque tout est sourd ; une seule tesselle est pleinement là ;
     02  les tesselles s’allument par ondes À PARTIR d’elle (--r) ;
     03  trois liens rejoignent trois tesselles éloignées ;
     04  la mosaïque se retire d’un cran, deux tesselles passent à l’or.

   L’OR NE SIGNIFIE QUE DEUX CHOSES DANS CETTE SCÈNE : la relation qui compte
   et le point d’action. Il n’est jamais employé pour rythmer un dessin. La
   tesselle nommée reste encre, jamais or.

   POURQUOI DES ANIMATIONS ET NON DES TRANSITIONS. Une tesselle ordinaire
   passe par trois valeurs d’opacité (sourde, pleine, retirée) : une
   transition ne connaît qu’un point d’arrivée. Deux images clés
   superposées le font sans minuteur JavaScript, et `forwards` sur la
   seconde garantit que l’état conservé est exactement l’état par défaut de
   la feuille — celui qu’on voit sans script.
   ========================================================================= */
.hm-shift{background:var(--mineral)}
/* Deux colonnes : la thèse à gauche, le carrousel à droite. La colonne de
   gauche reste alignée en haut ; elle ne défile pas avec les cas. */
.hm-shift-grid{
  display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(30px,4.6vw,72px);align-items:start;
}
.hm-shift-intro{max-width:none}
.hm-shift-intro .hm-h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);max-width:13.5em}
.hm-shift-intro .hm-lead{max-width:36ch}

/* --- Les trois demandes réelles -----------------------------------------
   Chaque cas est une grande citation éditoriale, suivie d'une scène en deux
   temps : la réaction immédiate apparaît, un filet la barre, puis la lecture
   Mosaïca monte en évidence, en or. Le déplacement qui donne son titre à la
   section n'est plus seulement énoncé : il se voit. Trois propriétés
   seulement sont animées (opacity, transform, la largeur du filet barré) :
   aucune ne modifie la mise en page, et tout repose sur des délais CSS —
   aucun minuteur JavaScript. */
.hm-cases{
  list-style:none;margin:clamp(50px,4.6vw,80px) 0 0;padding:0;
  border-top:1px solid var(--line);
}
.hm-case{
  position:relative;
  padding:clamp(38px,4vw,58px) 0;
  border-bottom:1px solid var(--line-soft);
}
.hm-case:last-child{border-bottom:0}

/* Le numéro et la citation partagent une ligne : le numéro n'est plus un
   repère isolé qui entre en collision avec la ponctuation du guillemet, il
   cadre la citation comme un folio de manuscrit. */
.hm-case-head{
  display:flex;align-items:baseline;gap:clamp(12px,1.4vw,18px);
  margin:0 0 clamp(22px,2.2vw,32px);
}
.hm-case-n{
  flex:none;
  font-family:'Space Grotesk',Arial,sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;color:var(--gold-deep);
}
/* La citation : la plus grande typographie de la section, en italique
   éditorial. Les guillemets français font partie du texte — aucun pictogramme
   décoratif superposé, aucune marque qui puisse se lire comme un artefact. */
.hm-case-quote{
  margin:0;max-width:26ch;text-wrap:balance;
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-style:italic;
  font-size:clamp(1.9rem,1.44rem + 2.2vw,3.1rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);
}
/* Les guillemets sont du texte, pas du contenu généré : un lecteur d'écran
   ne restitue pas ::before/::after de façon fiable, et la citation en fait
   partie du sens. Voir index.html. */
.hm-case-quote b{color:var(--gold-deep);font-style:normal;font-weight:600}

/* La scène du déplacement : réflexe à gauche, flèche, lecture à droite. La
   lecture Mosaïca porte un fond doré très pâle, flush contre son filet — ce
   n'est pas une carte, c'est un surlignage, mais il donne au constat final
   un poids qui tient face à la citation. */
.hm-case-shift{
  display:grid;grid-template-columns:minmax(0,.78fr) auto minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);align-items:stretch;max-width:88ch;
}
.hm-case-reflex{
  padding:clamp(12px,1.2vw,16px) 0 clamp(12px,1.2vw,16px) clamp(16px,1.4vw,22px);
  border-left:1px solid var(--line);align-self:center;
}
.hm-case-read{
  padding:clamp(14px,1.4vw,20px) clamp(18px,1.8vw,26px);
  border-left:2px solid var(--gold);
  background:rgba(201,164,92,.09);
  align-self:center;
}
.hm-case-tag{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.6rem;
}
.hm-case-tag--gold{color:var(--gold-deep)}
.hm-case-reflex p{
  position:relative;display:inline-block;margin:0;
  font-size:1.02rem;line-height:1.5;color:var(--slate);
}
/* Le filet qui barre le réflexe : il se trace de gauche à droite, sous
   .hm-js et une fois la scène révélée — voir plus bas. À l'état par défaut
   (sans script) il est déjà tracé : le réflexe se lit comme dépassé sans
   dépendre de l'animation. */
.hm-case-reflex p::after{
  content:"";position:absolute;left:0;right:0;top:52%;height:1px;
  background:var(--slate);opacity:.68;
}
.hm-case-read p{
  margin:0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(1.14rem,1vw + .72rem,1.4rem);line-height:1.38;letter-spacing:-.01em;
  color:var(--navy);
}
.hm-case-arrow{
  justify-self:center;align-self:center;display:block;
  width:34px;height:1px;background:var(--gold-deep);
}
.hm-case-arrow::after{
  content:"";display:block;width:7px;height:7px;margin:-3.5px 0 0 27px;
  border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(-45deg);
}

/* --- Le carrousel -------------------------------------------------------
   SANS JS (ou si l'initialisation échoue) : .hm-case-carousel reste un bloc
   ordinaire, .hm-cases empile les trois cas comme avant, #caseNav reste
   [hidden]. Rien n'est perdu.

   AVEC JS : assets/home.js ajoute .is-carousel sur #caseCarousel. Les trois
   <li> se superposent alors dans la même cellule de grille (la technique
   classique de la pile CSS) — le conteneur se dimensionne sur le plus grand
   des trois sans mesure JavaScript — et seul .is-active reste visible et
   franchissable au clavier.

   Spécificité : préfixé par .hm-page pour l'emporter sur
   `.hm-js .hm-cases.is-in > *` (section 09, plus bas dans ce fichier), qui
   sans cela regagnerait l'égalité de spécificité par son ordre de source et
   rendrait les trois cas visibles à la fois. */
.is-carousel .hm-cases{
  border-top:0;margin-top:0;
  display:grid;grid-template-areas:"stack";
}
.hm-page .is-carousel .hm-case{
  grid-area:stack;border-bottom:0;padding-top:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease;
}
.hm-page .is-carousel .hm-case.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
}
/* Le mouvement d'entrée propre à chaque cas (filet barré, flèche, lecture)
   ne doit jouer qu'à l'arrivée du cas actif, jamais en boucle derrière un
   autre cas déjà passé : .hm-js .hm-cases.is-in reste la condition commune,
   mais dans le carrousel c'est .is-active qui relance la scène — voir
   home.js, qui retire puis repose .is-active pour redéclencher les
   transitions CSS existantes. */

.hm-case-nav{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(28px,3vw,42px);
}
/* 44 px de zone franchissable partout, y compris pour les deux cercles :
   même règle que les icônes du pied de page. La typographie ne grandit pas
   pour l'obtenir. */
.hm-case-arrowbtn{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  background:none;border:1px solid var(--line);border-radius:50%;
  font-family:'Ibarra Real Nova',Georgia,serif;font-size:1.15rem;line-height:1;
  color:var(--navy);cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.hm-case-arrowbtn:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.hm-case-arrowbtn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

.hm-case-tabs{list-style:none;display:flex;gap:.2rem;margin:0;padding:0}
.hm-case-tab{
  min-width:44px;min-height:44px;padding:.3rem .5rem;
  background:none;border:0;border-bottom:2px solid transparent;
  font-family:'Space Grotesk',Arial,sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;color:var(--slate);cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.hm-case-tab:hover{color:var(--ink)}
.hm-case-tab:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.hm-case-tab[aria-selected="true"]{color:var(--gold-deep);border-bottom-color:var(--gold-deep)}

.hm-case-play{
  margin-left:auto;padding:15px 0;background:none;border:0;
  font-family:'Space Grotesk',Arial,sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  border-bottom:1px solid var(--line);cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.hm-case-play:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.hm-case-play:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

/* Annonce du cas actif pour les technologies d'assistance : invisible à
   l'écran, présente dans l'arbre d'accessibilité. */
.hm-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* =========================================================================
   04. LA LECTURE MOSAÏCA — une coupe, pas quatre plans
   -------------------------------------------------------------------------
   Trois niveaux tenus par un rail continu. Les décisions et les pratiques ne
   sont pas un quatrième niveau : elles sont la charnière par laquelle
   l'organisation devient une expérience. Elles sont donc décalées, en creux
   dans le rail, et portent le seul fond distinct de la coupe.
   ========================================================================= */
.hm-read-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(38px,4.4vw,86px);align-items:start}
.hm-read-side .hm-lead{color:rgba(255,255,255,.8)}
.hm-read-claim{
  margin:clamp(26px,2.4vw,36px) 0 0;padding-left:1.2rem;
  border-left:2px solid var(--gold);
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1.16rem,1.34vw,1.48rem);line-height:1.46;
  color:var(--gold);max-width:34ch;
}
.hm-read-more{
  margin:clamp(26px,2.4vw,36px) 0 0;padding-top:1.1rem;
  border-top:1px solid var(--line-light);
  font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.68);max-width:52ch;
}
.hm-page .hm-read-more a{color:var(--white);border-bottom:1px solid rgba(201,164,92,.7);padding-bottom:.05rem}
.hm-page .hm-read-more a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.hm-cut{position:relative;padding-left:clamp(26px,2.6vw,44px)}
/* Le rail : continu du premier niveau au dernier, il ne s'interrompt pas à
   la charnière — c'est tout le propos. */
.hm-cut::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--gold) 0%,rgba(201,164,92,.55) 62%,rgba(201,164,92,.2) 100%);
}
.hm-cut-level{position:relative;padding:clamp(20px,1.9vw,28px) 0}
.hm-cut-level + .hm-cut-level,
.hm-cut-hinge + .hm-cut-level{border-top:1px solid var(--line-light)}
.hm-cut-level::before{
  content:"";position:absolute;left:calc(-1 * clamp(26px,2.6vw,44px) - 4px);
  top:calc(clamp(20px,1.9vw,28px) + .5rem);
  width:9px;height:9px;background:var(--gold);
}
.hm-cut-n{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold);margin-bottom:.5rem;
}
.hm-cut-level h3{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(1.3rem,1.6vw,1.72rem);line-height:1.16;letter-spacing:-.018em;
  margin:0 0 .55rem;color:var(--white);
}
.hm-cut-level p{margin:0;font-size:clamp(.94rem,1vw,1.06rem);line-height:1.68;color:rgba(255,255,255,.78)}
/* La charnière : décalée, adossée au rail par son propre filet doré, et
   seule à porter un fond. Elle transmet, elle ne s'ajoute pas. */
.hm-cut-hinge{
  position:relative;margin-left:clamp(18px,2vw,34px);
  padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,28px);
  background:rgba(255,255,255,.055);border-left:2px solid var(--gold);
}
.hm-cut-hinge::before{
  content:"";position:absolute;left:calc(-1 * clamp(18px,2vw,34px) - clamp(26px,2.6vw,44px));
  right:100%;top:50%;height:1px;background:rgba(201,164,92,.5);
}
.hm-cut-hinge-t{
  font-size:.72rem !important;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .5rem !important;
}
.hm-cut-hinge p:last-child{margin:0;font-size:clamp(.92rem,.98vw,1.02rem);line-height:1.66;color:rgba(255,255,255,.8)}


/* =========================================================================
   05. MOSAÏCA EN ACTION — trois preuves, pas une galerie
   La hauteur des deux cadres de droite fixe celle de la rangée ; la grande
   photographie occupe les deux rangées et s'y cale exactement. Les trois
   cadres se terminent donc sur la même ligne, condition d'une composition
   éditoriale et non d'une galerie.
   ========================================================================= */
.hm-act{background:var(--white)}
.hm-act-grid{
  display:grid;grid-template-columns:1.06fr 1.34fr;
  grid-template-rows:auto auto;gap:clamp(16px,1.6vw,26px);
}
.hm-shot{position:relative;display:block;overflow:hidden;margin:0;background:var(--ink)}
/* La photo est enveloppée d'un <a> (zone cliquable) : il remplit le cadre
   sans créer de nouveau contexte de positionnement, pour que l'image et la
   légende restent ancrées sur .hm-shot comme avant. */
.hm-shot > a{position:absolute;inset:0;display:block}
.hm-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.hm-shot:hover img{transform:scale(1.04)}
.hm-shot > a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.hm-shot--main{grid-row:1 / span 2;height:100%;min-height:100%}
.hm-act-grid > .hm-shot:not(.hm-shot--main){aspect-ratio:16/9}

/* Le dégradé n'existe que dans le bas du cadre, exactement là où le texte se
   pose. Sur les 44 % supérieurs, alpha = 0 : les visages, les mains et les
   situations gardent leur lumière d'origine. Les valeurs basses ne sont pas
   choisies au jugé — le point le plus clair sous le texte, dans les trois
   photographies, est un blanc pur (tableau, fenêtre). Il fallait .60 pour
   tenir 4,5:1 en blanc à cet endroit ; la courbe y passe à .67. */
.hm-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,31,51,0)    0%,
    rgba(6,31,51,.12) 28%,
    rgba(6,31,51,.38) 52%,
    rgba(6,31,51,.64) 72%,
    rgba(6,31,51,.78) 100%);
}
/* Second voile, celui-ci calé sur le bloc de texte lui-même et non sur un
   pourcentage du cadre : la hauteur de la légende n'est pas la même dans la
   grande photographie et dans les deux petites, et seul un voile qui suit le
   texte garantit le même contraste dans les trois. */
.hm-shot-caption{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(52px,4.6vw,80px) clamp(20px,2vw,32px) clamp(20px,1.9vw,30px);
  background:linear-gradient(180deg,
    rgba(6,31,51,0)   0%,
    rgba(6,31,51,.24) 45%,
    rgba(6,31,51,.50) 78%,
    rgba(6,31,51,.55) 100%);
}
.hm-shot-caption > *{max-width:30ch}
/* Le label est blanc, non doré : sur une photographie, l'or à 10 px ne tient
   4,5:1 qu'au prix d'un voile à .85, qui éteindrait l'image. L'or reste
   présent, en filet — même signe que le trait des trois situations. */
.hm-shot-label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--white);margin-bottom:.6rem;
}
.hm-shot-label::before{
  content:"";display:block;width:26px;height:2px;background:var(--gold);margin-bottom:.7rem;
}
.hm-shot-title{
  display:block;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(1.16rem,1.4vw,1.5rem);line-height:1.16;letter-spacing:-.018em;
  color:var(--white);text-wrap:balance;
}
.hm-shot--main .hm-shot-title{font-size:clamp(1.4rem,1.82vw,1.95rem)}


/* =========================================================================
   07. PREUVES — Domtar, puis l'Intégramètre
   Aucun chiffre de résultat n'est avancé pour Domtar : aucun n'est
   documenté, et la preuve tient sans. Pour l'Intégramètre, deux repères
   vérifiés et un seul lien ; les onze étapes appartiennent à sa page.
   ========================================================================= */
.hm-proof{background:var(--white)}
.hm-proof-grid{display:grid;grid-template-columns:42% 58%;gap:clamp(32px,3.4vw,64px);align-items:start}
.hm-proof-media{margin:0}
/* Ratio d'origine strictement conservé : ni étirement, ni recadrage. */
.hm-proof-media img{
  width:100%;height:auto;max-height:440px;object-fit:contain;display:block;
  background:var(--mineral);border:1px solid var(--line-soft);
}
.hm-proof-media figcaption{margin-top:.7rem;font-size:.78rem;line-height:1.6;color:var(--slate)}
/* Un seul paragraphe : la durée, l'ampleur et la continuité de la
   collaboration, sans découpage clinique. */
.hm-proof-text{
  margin:1.4rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);
  font-size:1rem;line-height:1.8;color:var(--slate);max-width:64ch;
}

.hm-tool{
  margin-top:clamp(46px,4.6vw,82px);
  background:var(--deep);color:var(--white);
  padding:clamp(28px,3vw,50px) clamp(26px,3vw,54px);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(26px,3vw,56px);align-items:center;
}
.hm-tool .hm-kicker{color:var(--gold)}
.hm-tool .hm-h2{color:var(--white);font-size:clamp(1.8rem,2.3vw,2.6rem)}
.hm-tool-say p{margin:1rem 0 0;font-size:clamp(1rem,1.1vw,1.16rem);line-height:1.68;
  color:rgba(255,255,255,.82);max-width:56ch}
.hm-tool-say .hm-link{margin-top:1.4rem}
.hm-tool-figures{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,32px);
  border-top:1px solid var(--line-light);padding-top:1.3rem}
.hm-tool-figures dt{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(2.1rem,2.7vw,3rem);line-height:1;color:var(--gold);letter-spacing:-.02em;
}
.hm-tool-figures dd{margin:.42rem 0 0;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.78);line-height:1.4}


/* =========================================================================
   08. PERSPECTIVES ET PROCHAINE ÉTAPE — un seul mouvement de clôture
   Perspectives y tient le rôle de preuve de pensée : deux contenus, en
   liste éditoriale, sans vignette. Puis la page se referme sur une seule
   invitation, et un seul appel à l'action.
   ========================================================================= */
.hm-close{background:var(--ink);color:var(--white);padding:clamp(62px,5.4vw,100px) 0}
.hm-close .hm-kicker{color:var(--gold)}

.hm-close-final{
  margin-top:clamp(44px,4.4vw,76px);padding-top:clamp(30px,3vw,48px);
  border-top:1px solid rgba(255,255,255,.2);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(30px,3.6vw,68px);align-items:center;
}
.hm-close-final h2{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(1.95rem,2.7vw,3.1rem);line-height:1.13;letter-spacing:-.022em;
  margin:0;color:var(--white);text-wrap:balance;
}
.hm-close-final p{font-size:clamp(1rem,1.1vw,1.18rem);line-height:1.72;
  color:rgba(255,255,255,.76);margin:1.2rem 0 0;max-width:56ch}
.hm-close-act{display:flex;justify-content:flex-end}
.hm-close-contact{
  margin:clamp(32px,3vw,46px) 0 0;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:1.6rem;
  font-size:.86rem;color:rgba(255,255,255,.6);
}
.hm-page .hm-close-contact a{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.28)}
.hm-page .hm-close-contact a:hover{color:var(--gold)}


/* =========================================================================
   02b. LA SUITE DES ORGANISATIONS
   Révélée au clic, jamais en carrousel. `hidden` est l'état par défaut :
   sans JavaScript, la première rangée suffit et le bouton reste masqué.
   Aucune animation, aucun mouvement horizontal : la grille apparaît.
   ========================================================================= */
.hm-trust-more{
  /* Quinze organisations : cinq colonnes donnent trois rangées pleines,
     plus dense que la première rangée sans devenir une planche de vignettes. */
  grid-template-columns:repeat(5,1fr);
  margin-top:clamp(18px,2vw,30px);
  padding-top:clamp(18px,2vw,30px);
  border-top:1px solid var(--line-soft);
}
.hm-trust-more[hidden]{display:none}

.hm-trust-toggle{
  display:inline-block;margin-top:clamp(20px,2.2vw,32px);
  min-height:44px;padding:.7rem 0;
  background:none;border:0;border-bottom:1px solid var(--line);
  font-family:inherit;font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.hm-trust-toggle:hover{color:var(--ink);border-bottom-color:var(--gold)}
.hm-trust-toggle:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.hm-trust-toggle[hidden]{display:none}


/* =========================================================================
   06. NOS INTERVENTIONS — deux territoires, six interventions photographiées
   Comprendre occupe le fond blanc, Agir le fond minéral. Chaque intervention
   est portée par une photographie réelle : c'est elle qui donne à la section
   la présence qui lui manquait quand elle n'était qu'une liste de liens.
   Ce ne sont pas des cartes : aucun fond, aucune ombre, aucun coin arrondi,
   aucun bouton. Le seul ornement est le filet doré en bord haut de l'image,
   le même geste que partout ailleurs sur la page.
   ========================================================================= */
.hm-doors{padding-bottom:0}
.hm-doors .hm-head{margin-bottom:clamp(34px,3.4vw,56px)}

.hm-terr{padding:clamp(52px,5.2vw,92px) 0}
.hm-terr--light{background:var(--white);border-top:1px solid var(--line-soft)}
.hm-terr--mineral{background:var(--mineral);border-top:1px solid var(--line-soft)}

/* L'intitulé du territoire porte l'échelle la plus haute de la section : il
   annonce un registre, pas un service. */
.hm-terr-say{margin-bottom:clamp(30px,3.2vw,52px);max-width:62ch}
.hm-terr-n{
  display:block;font-size:.74rem;font-weight:700;
  letter-spacing:.18em;color:var(--gold-deep);margin-bottom:.9rem;
}
.hm-terr-title{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(2.4rem,4.4vw,4.25rem);line-height:1;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 clamp(12px,1.2vw,18px);
}
.hm-terr-when{
  font-size:clamp(1rem,1.05vw,1.14rem);line-height:1.6;
  color:var(--slate);margin:0;max-width:44ch;
}

/* --- Les interventions --------------------------------------------------- */
.hm-srv{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,3.4vw,60px) clamp(26px,3vw,52px);
}
/* Comprendre n'en porte que deux : elles occupent la même largeur que les
   quatre d'Agir, pour que les deux territoires restent alignés. */
.hm-srv--two{grid-template-columns:repeat(2,minmax(0,1fr))}

.hm-srv a{display:block;text-decoration:none;color:inherit;height:100%}
.hm-srv a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.hm-srv-media{
  display:block;overflow:hidden;background:var(--ink);
  border-top:2px solid var(--gold);
}
.hm-srv-media img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.72,.28,1);
}
.hm-srv a:hover .hm-srv-media img{transform:scale(1.03)}
.hm-srv-body{display:block;padding-top:clamp(15px,1.5vw,21px)}
.hm-srv b{
  display:block;
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(1.34rem,2vw,1.9rem);line-height:1.14;letter-spacing:-.018em;
  color:var(--ink);margin-bottom:.5rem;transition:color .2s ease;
}
.hm-srv a:hover b{color:var(--gold-deep)}
.hm-srv-body > span{
  display:block;font-size:1rem;line-height:1.62;color:var(--slate);max-width:52ch;
}


/* =========================================================================
   07b. L'INTÉGRAMÈTRE — l'outil propriétaire prend sa respiration
   Trois repères qui racontent une progression : ce qui est examiné, sur
   quelle étendue, ce qui en sort. Aucune animation.
   ========================================================================= */
.hm-tool-sec{background:var(--ink);color:var(--white);padding:clamp(64px,6.4vw,116px) 0}
.hm-tool-sec .hm-kicker{color:var(--gold)}
.hm-tool{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,4.4vw,80px);align-items:center;
}
.hm-tool-say .hm-h2{color:var(--white);margin-bottom:clamp(14px,1.4vw,20px)}
.hm-tool-claim{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1.2rem,1.7vw,1.62rem);line-height:1.42;letter-spacing:-.012em;
  color:var(--gold);margin:0 0 clamp(16px,1.6vw,24px);max-width:30ch;
}
.hm-tool-desc{
  font-size:1rem;line-height:1.72;color:rgba(255,255,255,.78);
  margin:0 0 clamp(24px,2.4vw,34px);max-width:58ch;
}
.hm-tool-figures{
  margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,32px);
}
.hm-tool-figures > div{padding-top:clamp(16px,1.6vw,22px);border-top:2px solid var(--gold)}
.hm-tool-figures dt{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:400;
  font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;
  color:var(--white);margin-bottom:.5rem;
}
.hm-tool-figures dd{
  margin:0;font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);line-height:1.45;
}


/* =========================================================================
   08. PERSPECTIVES — sur fond clair, désormais séparée de la clôture
   Deux objets éditoriaux, chacun porté par une photographie réelle. Zone
   entièrement cliquable. Aucune ombre, aucun coin arrondi, aucune carte.
   ========================================================================= */
.hm-persp{background:var(--mineral)}
.hm-persp .hm-head{margin-bottom:clamp(30px,3vw,48px)}
.hm-persp-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,58px);
}
.hm-persp-list a{
  display:block;text-decoration:none;color:inherit;height:100%;
}
.hm-persp-list a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.hm-persp-media{
  display:block;overflow:hidden;background:var(--night);
  border-top:2px solid var(--gold);
}
.hm-persp-media img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.72,.28,1);
}
.hm-persp-list a:hover .hm-persp-media img{transform:scale(1.03)}
.hm-persp-body{display:block;padding-top:clamp(16px,1.6vw,22px)}
.hm-persp-cat{
  display:block;font-size:.68rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.6rem;
}
.hm-persp-list b{
  display:block;
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;
  font-size:clamp(1.24rem,1.7vw,1.62rem);line-height:1.24;letter-spacing:-.014em;
  color:var(--ink);margin-bottom:.5rem;transition:color .2s ease;
}
.hm-persp-list a:hover b{color:var(--gold-deep)}
.hm-persp-say{display:block;font-size:.98rem;line-height:1.6;color:var(--slate)}
.hm-persp-all{margin-top:clamp(28px,3vw,46px)}


/* =========================================================================
   09. RÉVÉLATIONS — uniquement sous .hm-js, jamais bloquantes
   Un seul observateur, posé par assets/home.js, sur quatre familles de
   cibles. Aucune animation ne modifie la mise en page : opacité, translation
   et découpe seulement, donc aucun décalage de contenu.
   ========================================================================= */
.hm-js .hm-rise{opacity:0;transform:translateY(16px)}
.hm-js .hm-rise.is-in{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .5s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.hm-js .hm-stagger > *{opacity:0;transform:translateY(16px)}
.hm-js .hm-stagger.is-in > *{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 70ms),
             transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 70ms)}
/* --- La coupe : le rail se trace, puis les strates se posent -------------
   Le rail part du haut et descend sur toute la hauteur ; les trois plans et
   la charnière arrivent ensuite, dans l'ordre de lecture. C'est la seule
   animation de cette section, et elle ne fait qu'accompagner la lecture :
   aucun élément ne bouge de place, seules l'opacité et une translation de
   quelques pixels sont mises en jeu. */
.hm-js .hm-cut--seq::before{transform:scaleY(0);transform-origin:top center}
.hm-js .hm-cut--seq.is-in::before{
  transform:scaleY(1);
  transition:transform .9s cubic-bezier(.22,.61,.36,1) 120ms;
}
.hm-js .hm-cut--seq > .hm-cut-level,
.hm-js .hm-cut--seq > .hm-cut-hinge{opacity:0;transform:translateY(12px)}
.hm-js .hm-cut--seq.is-in > .hm-cut-level,
.hm-js .hm-cut--seq.is-in > .hm-cut-hinge{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--dd,0ms),
             transform .55s cubic-bezier(.22,.61,.36,1) var(--dd,0ms);
}
.hm-js .hm-cut--seq > *:nth-child(1){--dd:340ms}
.hm-js .hm-cut--seq > *:nth-child(2){--dd:500ms}
/* La charnière arrive après les deux plans qu'elle relie : c'est elle qui
   explique le passage de l'organisation à l'expérience. */
.hm-js .hm-cut--seq > *:nth-child(3){--dd:720ms}
.hm-js .hm-cut--seq > *:nth-child(4){--dd:900ms}

.hm-js .hm-cases > *{opacity:0;transform:translateY(16px)}
.hm-js .hm-cases.is-in > *{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms),
             transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms)}

/* Le déplacement, en scène : une fois le cas révélé, le filet barre le
   réflexe puis la lecture Mosaïca monte en évidence. Sans .hm-js (ou en
   mouvement réduit, neutralisé plus bas), le filet est déjà tracé et la
   lecture déjà pleine : rien de ce raisonnement ne dépend de l'animation. */
.hm-js .hm-case-reflex p::after{transform:scaleX(0);transform-origin:left}
.hm-js .hm-cases.is-in .hm-case-reflex p::after{
  transform:scaleX(1);
  transition:transform .5s ease calc(var(--i,0) * 90ms + 560ms);
}
.hm-js .hm-case-arrow{opacity:0;transform:scaleX(.4);transform-origin:left}
.hm-js .hm-cases.is-in .hm-case-arrow{
  opacity:1;transform:none;
  transition:opacity .4s ease calc(var(--i,0) * 90ms + 680ms),
             transform .4s ease calc(var(--i,0) * 90ms + 680ms);
}
.hm-js .hm-case-read{opacity:.4;transform:translateX(-8px) scale(.97)}
.hm-js .hm-cases.is-in .hm-case-read{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms + 780ms),
             transform .55s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms + 780ms);
}

/* --- Les quatre temps du mécanisme --------------------------------------
   Aucun minuteur : tout est porté par les retards de la feuille. La vague
   d’allumage suit --r, la distance à la tesselle nommée, et non l’ordre du
   DOM — c’est ce qui fait qu’on voit un regard s’élargir et non une liste
   se remplir de gauche à droite. Cadence : 0,15 s la tesselle nommée ;
   0,80 s le début de la vague, 0,13 s par onde ; 1,90 s les liens, le
   dernier tracé s’achève à 2,94 s ; 3,10 s le retrait et l’or. Un peu moins
   de quatre secondes, aucune étape ne chevauche la suivante. */
@keyframes hmLensWake{from{opacity:.16}to{opacity:1}}
@keyframes hmLensRecede{from{opacity:1}to{opacity:.55}}
@keyframes hmLensHold{from{opacity:1}to{opacity:.78}}

/* Le héros a sa propre séquence (section 01b) : il est exclu de ce système. */


/* =========================================================================
   10. PALIERS
   Le contenu gagne toujours. Aucune scène n'est calée sur 100vh en dehors du
   héros, aucune composition n'est comprimée pour tenir dans un écran : une
   section qui ne tient plus grandit.
   ========================================================================= */

/* --- Ordinateur portable large : la matrice reste à trois colonnes, la
       mosaïque s'épaissit d'un cran. ------------------------------------- */
@media(max-width:1280px){
  .hm-case-shift{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,2vw,26px)}
  .hm-trust-logos{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px)}
}

/* --- Tablette large et petits portables : les compositions à deux colonnes
       passent en une, la matrice garde deux colonnes utiles. -------------- */
@media(max-width:1080px){
  /* Deux rangees de libelles a cette largeur : le plafond descend d autant,
     pour que la scene et ses quatre etats restent une seule vue. */
  .hm-read-grid,.hm-proof-grid,.hm-tool,.hm-shift-grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vh,46px)}
  .hm-shift-intro .hm-h2{max-width:none}
  .hm-tool-figures{grid-template-columns:repeat(2,1fr);max-width:420px}
  .hm-close-final{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vh,36px);align-items:start}
  .hm-close-act{justify-content:flex-start}
  /* La grande photographie passe en bandeau et les deux autres se rangent
     côte à côte sous elle. Trois photographies empilées pleine largeur
     auraient fait de cette scène le plus long défilement de la page pour
     l'idée la plus simple. */
  .hm-act-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vh,22px)}
  .hm-shot--main{grid-row:auto;grid-column:1 / -1;height:auto;min-height:0;aspect-ratio:16/9}
  .hm-act-grid > .hm-shot:not(.hm-shot--main){aspect-ratio:4/3}
  /* Les deux territoires passent en une colonne : l'intitulé se pose
     au-dessus de ses interventions, sans perdre son échelle. */
  .hm-terr-when{max-width:52ch}
  /* Tablette : environ quatre logos par ligne. */
  .hm-trust-more{grid-template-columns:repeat(4,1fr)}
}

/* --- Sous 900 px : le mécanisme prend de la hauteur, la matrice se déplie
       en trois temps lisibles. ------------------------------------------- */
@media(max-width:900px){
  .hm-sec{padding:clamp(48px,7vh,72px) 0}
  /* La mosaïque se compacte au lieu de se réduire : à cette largeur, une
     scène large ferait des tesselles des filets. */
  /* Trois temps empilés : la citation, le réflexe, la lecture. Le filet passe
     à gauche dans les deux cas — la comparaison se lit de haut en bas. La
     flèche horizontale n'a plus de sens à la verticale : elle disparaît. */
  .hm-case-shift{grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.6vh,24px)}
  .hm-case-arrow{display:none}
  .hm-cut::before{left:0}
  .hm-cut-hinge::before{display:none}
  .hm-persp-list{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,38px)}
  .hm-srv,.hm-srv--two{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,40px)}
  .hm-tool-figures{grid-template-columns:repeat(3,1fr);max-width:none;gap:clamp(12px,2vw,20px)}
  /* Tablette : environ quatre logos par ligne dans les deux grilles. */
  .hm-trust-logos,.hm-trust-more{grid-template-columns:repeat(4,1fr)}
}

/* --- Téléphone : une idée forte par séquence. ---------------------------- */
@media(max-width:700px){
  /* Planchers tactiles : les liens de texte courant restent des liens de
     texte (la typographie ne change pas), mais leur zone d'appui atteint
     44 px par le remplissage vertical. */
  .hm-read-more a,
  .hm-close-contact a{
    display:inline-block;padding:12px 0;min-height:44px;
  }
  .hm-close-contact{row-gap:0}
  /* Une photographie par séquence : le bandeau et la paire ne tiennent plus
     côte à côte sans réduire chaque scène à une vignette. */
  .hm-act-grid{grid-template-columns:minmax(0,1fr)}
  .hm-shot--main{grid-column:auto}
  .hm-trust-logos,.hm-trust-more{grid-template-columns:repeat(2,1fr);gap:22px}
  .hm-trust-logos li{min-height:66px}
  .hm-trust-logos{--ls:.9}
  /* La grande photographie ne peut pas rester en 16/10 au téléphone : elle
     deviendrait une bande. Un rapport plus haut redonne à la scène sa
     lisibilité, et la légende cesse de couvrir la moitié du cadre. */
  .hm-shot--main{aspect-ratio:4/5}
  .hm-act-grid > .hm-shot:not(.hm-shot--main){aspect-ratio:4/3}
  .hm-shot-caption{padding:clamp(44px,16vw,64px) 18px 18px}
  .hm-btn{width:100%;justify-content:center}
  .hm-close-act{width:100%}
  .hm-close-contact{gap:.65rem 1.4rem}
}

/* --- Téléphone étroit ET court (320 × 568 et voisins). Le titre passait à
       six lignes et poussait la définition du cabinet hors du premier écran.
       La règle est conditionnée à la hauteur réelle, pas à la seule largeur :
       un 360 × 800 a la place, un 320 × 568 ne l'a pas. Rien n'est coupé
       dans un cas comme dans l'autre — seule la respiration change. ------- */
@media(max-width:400px) and (max-height:700px){
  .hero-mosaica__title{font-size:clamp(1.55rem,1.2rem + 1.8vw,1.85rem)}
  .hero-mosaica__line + .hero-mosaica__line{
    font-size:clamp(1.7rem,1.3rem + 2vw,2rem);margin-top:.5em;
  }
  .hero-mosaica__content{
    padding-top:calc(var(--nav-h,68px) + clamp(24px,4vh,44px));
    padding-bottom:clamp(30px,8vh,64px);
  }
  .hero-mosaica__subtitle{margin-top:20px}
  .hero-mosaica__subtitle-sub{margin-top:12px}
}

@media(max-width:420px){
  /* Deux colonnes tenues jusqu'à 320 px : une seule colonne faisait de la
     bande de confiance la plus haute section du téléphone, pour le contenu
     le moins essentiel. */
  .hm-trust-logos{gap:16px}
  .hm-trust-logos li{min-height:56px}
}

/* --- Écran peu haut (1366 × 768, 1280 × 720, portables 16:9 à 125 %).
       On resserre les respirations, jamais la taille des titres, et le
       héros conserve sa zone de sécurité sous la navigation. ------------- */
@media(min-width:901px) and (max-height:820px){
  .hm-sec{padding:clamp(46px,6.4vh,80px) 0}
  .hm-head{margin-bottom:clamp(26px,3.4vh,44px)}
  .hero-mosaica__content{
    padding-top:calc(var(--nav-h,68px) + clamp(28px,4vh,58px));
    padding-bottom:calc(var(--nav-h,68px) + clamp(46px,7vh,96px));
  }
  .hero-mosaica__subtitle{margin-top:clamp(18px,2.6vh,30px)}
  .hero-mosaica__subtitle-sub{margin-top:14px}
  .hm-close{padding:clamp(48px,6.4vh,84px) 0}
}
/* La scène du mécanisme suit la largeur avant la hauteur : sur un écran bas
   MAIS large, elle peut s'aplatir sans que les tesselles deviennent des
   traits ; sur un écran bas et étroit, non. */
/* La proportion de la scène est déjà bornée en hauteur par max-height : il
   ne reste ici qu à resserrer les respirations qui l entourent, pour que les
   quatre états restent dans le champ avec elle. */
@media(min-width:901px) and (max-height:820px){
  .hm-shift-intro{margin-bottom:clamp(18px,2.6vh,30px)}
}

/* --- Téléphone en paysage : la hauteur utile fond. Le héros cesse d'être
       calé sur l'écran, sinon son contenu déborde sans recours. ---------- */
@media(orientation:landscape) and (max-height:520px){
  .hero-mosaica{min-height:0;padding-block:clamp(1rem,4vh,1.8rem)}
  /* La réserve sous la barre reste entière — c'est elle qui empêche le titre
     de passer derrière le menu — mais tout le reste se resserre. */
  .hero-mosaica__content{
    padding-top:calc(var(--nav-h,68px) + 18px);
    padding-bottom:22px;
  }
  .hero-mosaica__subtitle{margin-top:14px}
  .hero-mosaica__subtitle-sub{margin-top:10px}
  .hm-sec{padding:clamp(38px,8vh,58px) 0}
}


/* =========================================================================
   11. RESTITUTION DE LA HIÉRARCHIE TYPOGRAPHIQUE AU TÉLÉPHONE

   assets/mobile-premium.css est chargé après cette feuille et impose sous
   900 px `main p, main li, main span, main b, main h3 … {
   font-size:max(1em,13px) !important }`, plus `main > * p {
   font-size:max(1em,15px) !important }`. Sur une page qui porte sa propre
   échelle, `1em` vaut la taille du PARENT — donc 16 px partout — et le
   plancher devient un plafond inversé : toute la hiérarchie disparaîtrait.

   Ces règles rendent à la page ses tailles propres. Aucune ne descend sous
   13 px : le plancher d'accessibilité est respecté, il n'est pas contourné.
   Trois classes suffisent à passer devant les sélecteurs de mobile-premium
   (0,2,3) sans !important arbitraire — il n'est employé que là où la règle
   d'en face en porte un.
   ========================================================================= */
@media(max-width:900px){
  .hm-page .hm-wrap .hm-lead{font-size:16.5px !important;line-height:1.66 !important}
  .hm-page .hm-wrap .hm-kicker{font-size:13px !important;letter-spacing:.15em}
  .hm-page .hm-wrap .hm-h2{font-size:clamp(1.6rem,6.4vw,2.1rem) !important;line-height:1.14 !important}
  /* La these de la page garde un cran d avance sur les autres titres, au
     telephone comme sur ordinateur. */
  .hm-page .hm-wrap #shift-title{font-size:clamp(1.75rem,7.4vw,2.4rem) !important;line-height:1.13 !important}

  .hm-page .hm-wrap .hm-trust-label{font-size:15px !important;line-height:1.68 !important}


  .hm-page .hm-wrap .hm-case-n{font-size:12px !important;letter-spacing:.15em}
  .hm-page .hm-wrap .hm-case-quote{font-size:clamp(1.5rem,7.4vw,1.9rem) !important;line-height:1.14 !important}
  .hm-page .hm-wrap .hm-case-tag{font-size:13px !important;letter-spacing:.13em}
  .hm-page .hm-wrap .hm-case-reflex p{font-size:15px !important;line-height:1.58 !important}
  .hm-page .hm-wrap .hm-case-read p{font-size:16px !important;line-height:1.5 !important}

  .hm-page .hm-wrap .hm-read-claim{font-size:clamp(1.14rem,4.9vw,1.36rem) !important;line-height:1.44 !important}
  .hm-page .hm-wrap .hm-read-more{font-size:14.5px !important;line-height:1.66 !important}
  .hm-page .hm-wrap .hm-cut-n{font-size:13px !important}
  .hm-page .hm-wrap .hm-cut-level h3{font-size:19px !important;line-height:1.2 !important}
  .hm-page .hm-wrap .hm-cut-level p{font-size:15.5px !important;line-height:1.64 !important}
  .hm-page .hm-wrap .hm-cut-hinge-t{font-size:13px !important}
  .hm-page .hm-wrap .hm-cut-hinge p:last-child{font-size:15px !important;line-height:1.62 !important}

  .hm-page .hm-wrap .hm-shot-label{font-size:13px !important;letter-spacing:.18em}
  .hm-page .hm-wrap .hm-shot-title{font-size:17px !important;line-height:1.2 !important}
  .hm-page .hm-wrap .hm-shot--main .hm-shot-title{font-size:20px !important}


  .hm-page .hm-wrap .hm-proof-text{font-size:15.5px !important;line-height:1.75 !important}
  .hm-page .hm-wrap .hm-proof-media figcaption{font-size:13.5px !important}
  .hm-page .hm-wrap .hm-tool-say p{font-size:16px !important;line-height:1.66 !important}
  .hm-page .hm-wrap .hm-tool-figures dt{font-size:2.1rem !important}
  .hm-page .hm-wrap .hm-tool-figures dd{font-size:13px !important}

  .hm-page .hm-wrap .hm-close-final h2{font-size:clamp(1.62rem,6.6vw,2.15rem) !important;line-height:1.16 !important}
  .hm-page .hm-wrap .hm-close-final p{font-size:16px !important;line-height:1.7 !important}
  .hm-page .hm-wrap .hm-close-contact,
  .hm-page .hm-wrap .hm-close-contact a{font-size:14px !important}
  .hm-page .hm-wrap .hm-btn{font-size:13.5px !important;letter-spacing:.06em}
  .hm-page .hm-wrap .hm-link{font-size:14.5px !important}
}


/* =========================================================================
   12. VERSION SANS MOUVEMENT (COMPLÈTE)
   Toute l'information apparaît immédiatement, dans son état final. Les
   quatre temps du mécanisme sont tous visibles en même temps : le dessin
   reste entièrement compréhensible sans son déroulé.
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .hm-page *,.hm-page *::before,.hm-page *::after{
    transition-duration:.01ms !important;animation-duration:.01ms !important}
  .hm-js .hm-rise,.hm-js .hm-stagger > *,.hm-js .hm-cases > *{opacity:1;transform:none}
  .hm-js .hm-case-reflex p::after{transform:scaleX(1) !important}
  .hm-js .hm-case-arrow,
  .hm-js .hm-case-read{opacity:1 !important;transform:none !important}
  .hm-js .hm-cut--seq::before{transform:scaleY(1) !important}
  .hm-js .hm-cut--seq > .hm-cut-level,
  .hm-js .hm-cut--seq > .hm-cut-hinge{opacity:1 !important;transform:none !important}
}