/* =========================================================
   Hairmony — couche « maison de groupe »
   Chargée après main.css : elle donne au site son grain,
   son échelle typographique et ses gestes de défilement.
   ========================================================= */

:root{
  --encre:#08080a;
  --encre-2:#141418;
  --papier:#f4f1ec;
  --papier-2:#ebe6df;
  --gris:#6a6660;
  --gris-clair:#9c968e;
  --ligne:rgba(8,8,10,.16);
  --ligne-claire:rgba(244,241,236,.22);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

body{background:var(--papier)}

/* ---------- typographie : plus d'écart, plus d'air ---------- */
h1,h2,h3{font-variation-settings:'opsz' 144;}
h1{font-size:clamp(3rem, 1.6rem + 6.6vw, 7.4rem);line-height:.94;letter-spacing:-.03em;font-weight:250}
h2{font-size:clamp(2.1rem, 1.3rem + 3.1vw, 4.4rem);line-height:1;letter-spacing:-.025em;font-weight:250}
h3{font-size:clamp(1.35rem, 1.1rem + 1vw, 2.1rem);font-weight:300}
.hm-chapo{font-size:clamp(1.05rem,.98rem + .42vw,1.32rem);line-height:1.6;font-weight:340;color:#2b2a28}
.hm-section--encre .hm-chapo{color:rgba(244,241,236,.82)}
.hm-sur-titre{font-size:.68rem;letter-spacing:.28em}
.hm-section{padding-block:clamp(88px,13vh,190px)}

/* ---------- grain sur les fonds encre ---------- */
.hm-section--encre,.hm-ouverture,.hm-pied{position:relative;isolation:isolate}
.hm-section--encre::before,.hm-ouverture::before,.hm-pied::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:160px 160px;opacity:.05;mix-blend-mode:screen
}
.hm-section--encre>*,.hm-ouverture>*,.hm-pied>*{position:relative;z-index:1}

/* ---------- jauge de lecture ---------- */
.hm-jauge{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--encre);z-index:200;
  transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll(root)){
  .hm-jauge{
    animation-name:hm-jauge;animation-duration:1ms;animation-fill-mode:both;
    animation-timeline:scroll(root)
  }
}
@keyframes hm-jauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- en-tête : micro-navigation en capitales ---------- */
.hm-entete{background:rgba(244,241,236,.78);border-bottom:1px solid var(--ligne)}
.hm-entete__barre{height:78px}
.hm-marque{font-size:1.12rem;letter-spacing:.02em;gap:14px;font-variation-settings:'opsz' 144}
.hm-marque img{width:22px;height:22px}
.hm-nav a{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#26251f}
.hm-langues__bouton{border-radius:0;border-color:var(--ligne);font-size:.68rem;letter-spacing:.16em;padding:9px 13px}
.hm-langues__liste{border-radius:0;box-shadow:0 30px 80px rgba(8,8,10,.16)}
.hm-langues__liste a{border-radius:0;font-size:.85rem}
.hm-burger{border-radius:0;border-color:var(--ligne)}
.est-encre .hm-entete{background:rgba(8,8,10,.72);border-bottom-color:var(--ligne-claire)}
.est-encre .hm-entete .hm-marque,.est-encre .hm-nav a{color:var(--papier)}
.est-encre .hm-marque img{filter:invert(1)}
.est-encre .hm-langues__bouton,.est-encre .hm-burger{border-color:var(--ligne-claire);color:var(--papier)}
.est-encre .hm-burger span{background:var(--papier)}
.est-encre .hm-entete .hm-bouton--clair{color:var(--papier);border-color:var(--ligne-claire)}

/* ---------- boutons : angles nets, libellés en capitales ---------- */
.hm-bouton{
  border-radius:0;padding:17px 30px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;gap:1em;transition:background .3s ease,color .3s ease,transform .3s ease
}
.hm-bouton:hover{transform:none;background:var(--encre-2)}
.hm-bouton--clair:hover{background:var(--encre);color:var(--papier)}
.hm-lien{border-bottom:1px solid rgba(8,8,10,.3);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.hm-section--encre .hm-lien{border-bottom-color:var(--ligne-claire)}

/* =========================================================
   OUVERTURE — la première page
   ========================================================= */
.hm-ouverture{
  background:var(--encre);color:var(--papier);
  min-height:min(94vh,980px);display:flex;align-items:flex-end;
  padding-block:clamp(120px,18vh,200px) clamp(38px,6vh,64px);
  overflow:hidden;overflow:clip
}
.hm-ouverture__flamme{
  position:absolute;right:-8%;top:-18%;width:min(58vw,760px);opacity:.07;z-index:0;
  filter:invert(1);animation:hm-derive 26s ease-in-out infinite alternate
}
@keyframes hm-derive{from{transform:translate3d(0,0,0) rotate(-3deg) scale(1)}to{transform:translate3d(-3%,4%,0) rotate(4deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.hm-ouverture__flamme{animation:none}}
.hm-ouverture__grille{display:grid;gap:clamp(30px,5vw,70px);align-items:end;width:100%}
@media(min-width:1000px){.hm-ouverture__grille{grid-template-columns:1.35fr .65fr}}
.hm-ouverture h1{color:var(--papier);margin:0}
.hm-ouverture .hm-sur-titre{color:var(--gris-clair);margin-bottom:2.4em}
.hm-ouverture .hm-chapo{color:rgba(244,241,236,.78);max-width:44ch}
.hm-ouverture .hm-actions{margin-top:2.6em}
.hm-ouverture .hm-bouton{background:var(--papier);color:var(--encre);border-color:var(--papier)}
.hm-ouverture .hm-bouton:hover{background:transparent;color:var(--papier)}
.hm-ouverture .hm-bouton--clair{background:transparent;color:var(--papier);border-color:var(--ligne-claire)}
.hm-ouverture .hm-bouton--clair:hover{background:var(--papier);color:var(--encre)}

/* titres révélés ligne par ligne */
.hm-mot{display:inline-block;overflow:hidden;overflow:clip;vertical-align:bottom}
.hm-mot span{display:inline-block;transform:translateY(105%);opacity:0}
.hm-anime .hm-mot span{animation-name:hm-monte;animation-duration:1.05s;animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.2,.7,.25,1)}
@keyframes hm-monte{to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.hm-mot span{transform:none;opacity:1;animation:none}}

/* filet de descente */
.hm-descente{display:flex;align-items:center;gap:14px;margin-top:clamp(46px,7vh,80px);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-clair)}
.hm-descente__filet{position:relative;flex:1;max-width:180px;height:1px;background:var(--ligne-claire);overflow:hidden}
.hm-descente__filet::after{content:"";position:absolute;inset:0;width:36%;background:var(--papier);
  animation:hm-glisse 2.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes hm-glisse{0%{transform:translateX(-100%)}60%,100%{transform:translateX(320%)}}

/* =========================================================
   BANDEAU DÉFILANT
   ========================================================= */
.hm-bandeau{
  border-block:1px solid var(--ligne);background:var(--papier-2);
  overflow:hidden;overflow:clip;padding-block:20px;white-space:nowrap
}
.hm-bandeau__piste{display:inline-flex;align-items:center;gap:2.6em;animation:hm-defile 46s linear infinite}
.hm-bandeau:hover .hm-bandeau__piste{animation-play-state:paused}
@keyframes hm-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hm-bandeau span{font-family:var(--serif);font-size:clamp(1.1rem,.9rem + .8vw,1.7rem);letter-spacing:.02em;
  font-variation-settings:'opsz' 144;color:#2b2a28}
.hm-bandeau i{font-style:normal;color:var(--gris-clair);font-size:.7em}
@media (prefers-reduced-motion:reduce){.hm-bandeau__piste{animation:none}}

/* =========================================================
   BANDES D'ENTITÉS — pleine largeur, façon maison de mode
   ========================================================= */
.hm-bandes{display:block}
.hm-bande{position:relative;border-top:1px solid var(--ligne);padding-block:clamp(60px,9vh,130px)}
.hm-bande:last-child{border-bottom:1px solid var(--ligne)}
.hm-bande__grille{display:grid;gap:clamp(26px,4vw,64px);align-items:center}
@media(min-width:940px){
  .hm-bande__grille{grid-template-columns:1.18fr .82fr;gap:clamp(34px,5vw,86px)}
  .hm-bande:nth-child(even) .hm-bande__grille{grid-template-columns:.82fr 1.18fr}
  .hm-bande:nth-child(even) .hm-bande__media{order:2}
}
.hm-bande__entete{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(26px,4vh,52px)}
.hm-bande__index{font-family:var(--serif);font-size:.95rem;color:var(--gris);font-variant-numeric:tabular-nums}
.hm-bande__filet{flex:1;height:1px;background:var(--ligne)}
.hm-bande__pastille{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
  display:inline-flex;align-items:center;gap:.7em}
.hm-bande__pastille::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hm-bande__media{position:relative;overflow:hidden;overflow:clip;background:var(--papier-2)}
.hm-bande__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);transform:scale(1.08);transition:filter 1.2s ease,transform 1.4s cubic-bezier(.2,.7,.25,1)}
.hm-bande:hover .hm-bande__media img{filter:none;transform:scale(1.01)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hm-bande__media img{
      animation-name:hm-pose;animation-duration:1ms;animation-fill-mode:both;
      animation-timeline:view(y);animation-range:cover 0% cover 92%
    }
    .hm-bande:hover .hm-bande__media img{animation-play-state:paused}
  }
}
@keyframes hm-pose{
  0%{filter:grayscale(1) blur(5px) contrast(1.05);transform:scale(1.1) translateY(1.6%)}
  30%{filter:grayscale(.35) blur(0) contrast(1.02);transform:scale(1.03) translateY(0)}
  100%{filter:grayscale(0) blur(0);transform:scale(1) translateY(-1.6%)}
}
.hm-bande__titre{font-family:var(--serif);font-size:clamp(2.2rem,1.5rem + 3vw,4.2rem);line-height:.98;
  letter-spacing:-.03em;font-weight:250;margin:0 0 .38em;font-variation-settings:'opsz' 144}
.hm-bande__texte{font-size:clamp(1rem,.96rem + .3vw,1.16rem);line-height:1.62;color:#33322f;max-width:46ch;margin:0 0 1.8em}
.hm-bande__lien{display:inline-flex;align-items:center;gap:.9em;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;padding-bottom:9px;border-bottom:1px solid var(--accent);transition:gap .3s ease}
.hm-bande__lien:hover{gap:1.5em}
.hm-section--encre .hm-bande{border-color:var(--ligne-claire)}
.hm-section--encre .hm-bande__texte{color:rgba(244,241,236,.76)}
.hm-section--encre .hm-bande__index,.hm-section--encre .hm-bande__pastille{color:var(--gris-clair)}
.hm-section--encre .hm-bande__filet{background:var(--ligne-claire)}
.hm-section--encre .hm-bande__media{background:var(--encre-2)}

/* =========================================================
   CHIFFRES — grands, en série, sans cadre
   ========================================================= */
.hm-chiffres{background:none;border:0;border-radius:0;gap:0;border-top:1px solid var(--ligne)}
.hm-chiffre{background:none!important;border-bottom:1px solid var(--ligne);padding:34px 0;
  display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:640px){
  .hm-chiffres{grid-template-columns:1fr;display:grid}
  .hm-chiffre{grid-template-columns:minmax(180px,26%) 1fr;align-items:baseline;gap:clamp(20px,4vw,60px);padding:clamp(24px,3.4vh,40px) 0}
}
.hm-chiffre__valeur{font-size:clamp(2.6rem,1.8rem + 3.4vw,5rem);line-height:.9;margin:0;
  font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 144;font-weight:250;letter-spacing:-.03em}
.hm-chiffre__libelle{font-size:.98rem;color:var(--gris);max-width:44ch;line-height:1.5}
.hm-section--encre .hm-chiffres{border-top-color:var(--ligne-claire)}
.hm-section--encre .hm-chiffre{border-bottom-color:var(--ligne-claire)}

/* =========================================================
   CARTES ET ÉTAPES — sans boîte, à la ligne
   ========================================================= */
.hm-carte{background:none!important;border:0;border-top:1px solid var(--ligne);border-radius:0;padding:26px 0 0}
.hm-section--encre .hm-carte{border-top-color:var(--ligne-claire)}
.hm-carte h3{font-family:var(--sans);font-size:1.06rem;font-weight:600;letter-spacing:-.005em;margin-bottom:.7em}
.hm-carte p{font-size:.98rem;color:var(--gris);line-height:1.6}
.hm-section--encre .hm-carte p{color:rgba(244,241,236,.7)}
.hm-ruban{width:28px;height:2px;background:var(--accent);margin-bottom:22px}
.hm-etape{border-top:1px solid var(--ligne)}
.hm-etape__num{font-size:.8rem;letter-spacing:.14em;color:var(--gris);font-variant-numeric:tabular-nums}
.hm-etape h3{font-size:1.06rem}
.hm-etape p{font-size:.98rem;color:var(--gris)}
.hm-section--encre .hm-etape p{color:rgba(244,241,236,.7)}

/* ---------- duo image / texte ---------- */
.hm-duo__media{border-radius:0}
.hm-duo__media img{filter:grayscale(1) contrast(1.03);transition:filter 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.25,1);transform:scale(1.04)}
.hm-duo:hover .hm-duo__media img{filter:none;transform:scale(1)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hm-duo__media img{animation-name:hm-pose;animation-duration:1ms;animation-fill-mode:both;
      animation-timeline:view(y);animation-range:cover 0% cover 90%}
  }
}

/* ---------- citation ---------- */
.hm-citation{font-size:clamp(2rem,1.3rem + 3.4vw,4.6rem);line-height:1.02;letter-spacing:-.03em;
  font-weight:250;max-width:20ch;font-variation-settings:'opsz' 144}
.hm-signature{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}

/* ---------- questions fréquentes ---------- */
.hm-faq__q{font-size:clamp(1.05rem,.98rem + .5vw,1.45rem);font-weight:300;padding:30px 0}
.hm-faq__item{border-color:var(--ligne)}
.hm-section--encre .hm-faq,.hm-section--encre .hm-faq__item{border-color:var(--ligne-claire)}

/* ---------- journal ---------- */
.hm-article{border-top:1px solid var(--ligne);gap:12px}
.hm-article h3{font-size:1.28rem;font-weight:300;line-height:1.15}
.hm-article__date{font-size:.68rem;letter-spacing:.2em;color:var(--gris)}
.hm-article p{font-size:.95rem}

/* ---------- bannières intérieures ---------- */
.hm-banniere{padding-block:clamp(72px,13vh,150px) clamp(52px,8vh,110px);border-bottom:1px solid var(--ligne)}
.hm-banniere__filigrane{opacity:.045;top:-22%;right:-10%;width:min(48vw,600px)}
.hm-fil{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:3em}
.hm-fil span[aria-hidden]{opacity:.4;margin-inline:.2em}

/* ---------- pied de page ---------- */
.hm-pied{padding-block:clamp(72px,10vh,120px) 32px}
.hm-pied__marque{font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem);line-height:1.02;letter-spacing:-.03em;
  font-weight:250;font-variation-settings:'opsz' 144}
.hm-pied h4{font-size:.66rem;letter-spacing:.24em}
.hm-pied ul{font-size:.92rem;gap:.85em}
.hm-pied__bas{font-size:.72rem;letter-spacing:.06em}

/* ---------- séparation en biais entre papier et encre ---------- */
.hm-section--encre.hm-biais{clip-path:polygon(0 2.2vw,100% 0,100% 100%,0 100%);margin-top:-2.2vw;padding-top:calc(clamp(88px,13vh,190px) + 2.2vw)}

/* ---------- formulaire ---------- */
.hm-champ input,.hm-champ textarea,.hm-champ select{border-radius:0;border-color:var(--ligne);background:transparent;padding:15px 0;
  border-width:0 0 1px}
.hm-champ input:focus,.hm-champ textarea:focus,.hm-champ select:focus{outline:none;border-bottom-color:var(--encre)}
.hm-champ label{font-size:.66rem;letter-spacing:.2em}
.hm-message{border-radius:0}

/* ---------- ouverture sur petits écrans : moins de vide en haut ---------- */
@media(max-width:700px){
  .hm-ouverture{min-height:86vh;padding-block:84px 44px;align-items:center}
  .hm-ouverture__flamme{width:74vw;right:-16%;top:auto;bottom:6%;opacity:.06}
  .hm-descente{margin-top:34px}
  .hm-bandeau{padding-block:15px}
  .hm-bande__entete{margin-bottom:24px}
}

/* =========================================================
   Reprise du 09/09 : ouverture recentrée, textes qui respirent,
   bandeau en logos de marques.
   ========================================================= */

/* ---------- ouverture : le bloc est centré dans la hauteur ---------- */
.hm-ouverture{
  align-items:center;
  min-height:min(88vh,940px);
  padding-block:clamp(112px,15vh,168px) clamp(72px,10vh,120px)
}
.hm-ouverture__grille{gap:clamp(38px,6vw,96px)}
@media(min-width:1000px){.hm-ouverture__grille{grid-template-columns:1.3fr .7fr;align-items:center}}
.hm-ouverture .hm-sur-titre{margin-bottom:2.9em}
.hm-ouverture h1{line-height:1.02;margin-bottom:0}
.hm-ouverture .hm-chapo{line-height:1.8;max-width:40ch;font-size:clamp(1.02rem,.96rem + .34vw,1.2rem)}
.hm-ouverture .hm-actions{margin-top:3em;gap:16px}
.hm-descente{margin-top:clamp(52px,8vh,88px)}

/* ---------- de l'air dans les textes ---------- */
body{line-height:1.75}
p{margin-bottom:1.35em}
.hm-chapo{line-height:1.78}
.hm-bande__texte{line-height:1.78;margin-bottom:2.1em}
.hm-carte p,.hm-etape p{line-height:1.75}
.hm-chiffre__libelle{line-height:1.65}
.hm-prose li{margin-bottom:.7em;line-height:1.75}
.hm-prose h2{margin-top:2.2em;margin-bottom:.7em}
.hm-prose h3{margin-top:2em}
.hm-etroit{max-width:66ch}
.hm-banniere .hm-chapo{line-height:1.8}
.hm-faq__r>div{line-height:1.78}
.hm-pied ul{gap:1em}
.hm-pied__marque{line-height:1.12;margin-bottom:.7em}

/* ---------- bandeau : les logos des marques ---------- */
.hm-bandeau{padding-block:26px;background:var(--papier-2)}
.hm-bandeau__piste{gap:clamp(2.6em,5vw,4.6em)}
.hm-bandeau i{font-size:.5rem;opacity:.35;color:var(--gris)}
.hm-logo{display:inline-flex;align-items:center;vertical-align:middle;
  opacity:.9;transition:opacity .4s ease}
.hm-bandeau:hover .hm-logo{opacity:1}
img.hm-logo--mot{height:var(--h,28px);width:auto;display:block}
.hm-logo--bloc{gap:.6em;font-family:var(--serif);font-size:clamp(1.15rem,.95rem + .6vw,1.5rem);
  font-variation-settings:'opsz' 144;color:#1d1c19;white-space:nowrap}
.hm-logo--bloc img{height:clamp(26px,2.2vw,32px);width:auto;display:block}
@media(max-width:700px){
  img.hm-logo--mot{height:calc(var(--h,28px) * .82)}
  .hm-bandeau{padding-block:20px}
}

/* en une seule colonne, l'indication de défilement s'intercalerait entre le titre
   et le chapô : on la retire tant que la grille n'est pas sur deux colonnes */
@media(max-width:999px){.hm-descente{display:none}}

/* ---------- sélecteur de langue : drapeaux ---------- */
.hm-langues__bouton{gap:.6em;padding:7px 12px 7px 8px;align-items:center}
.hm-langues__bouton span{font-size:.68rem;letter-spacing:.14em}
.hm-drapeau{display:block;flex:none;border-radius:50%}
.hm-langues__liste{min-width:210px;padding:10px}
.hm-langues__liste a{display:flex;align-items:center;gap:.8em;padding:9px 10px;font-size:.92rem;color:#22211e}
.hm-langues__liste a[aria-current]{font-weight:600}
.hm-langues__liste a:hover{background:var(--papier-2)}
.est-encre .hm-langues__liste{background:var(--encre-2);border-color:var(--ligne-claire)}
.est-encre .hm-langues__liste a{color:var(--papier)}
.est-encre .hm-langues__liste a:hover{background:rgba(244,241,236,.08)}

/* ---------- bandeau : ligne de base commune et tailles harmonisées ---------- */
/* Chaque fichier a sa propre proportion : le manche du pinceau de YDOL monte très
   haut, la sous-ligne « KUST » de l'Académie descend très bas, KUST occupe toute
   la hauteur de son image. Deux réglages par logo (dans hm_entites) corrigent cela :
   « logo_hauteur » est calculée pour que les lettres aient toutes la même force
   optique, et « logo_descente » indique la part de l'image située sous la ligne de
   base, pour que les mots se posent tous sur la même ligne — les jambages, la
   sous-ligne et le manche du pinceau débordant naturellement. */
.hm-bandeau{padding-block:22px}
/* la réserve basse tient les jambages : rien ne dépasse de la piste, donc rien
   n'est rogné par le « overflow » qui masque le défilement horizontal */
.hm-bandeau__piste{align-items:flex-end;padding-bottom:18px}
img.hm-logo--mot{margin-bottom:calc(var(--h,28px) * var(--descente,0) * -1)}
.hm-bandeau i{align-self:flex-end;margin-bottom:calc(18px + .55em);line-height:1}
@media(max-width:700px){
  .hm-bandeau{padding-block:16px}
  img.hm-logo--mot{margin-bottom:calc(var(--h,28px) * .82 * var(--descente,0) * -1)}
}

/* ---------- ouverture : pleine hauteur d'écran ---------- */
/* La bannière descend exactement jusqu'à la ligne de flottaison : la hauteur de
   l'écran moins celle de l'en-tête, qui est collant et occupe le flux.
   « svh » est la hauteur du viewport barre d'adresse visible : sur mobile, la
   bannière tient donc à l'écran dès le chargement, sans saut quand la barre
   se rétracte (ce que provoquerait « vh » ou « dvh »). */
:root{--hm-entete:79px} /* barre 78 px + le filet du bas */
.hm-ouverture{
  min-height:calc(100vh - var(--hm-entete));
  min-height:calc(100svh - var(--hm-entete));
  padding-block:clamp(64px,9vh,120px) clamp(48px,7vh,96px)
}
@media(max-width:900px){
  .hm-ouverture{padding-block:52px 40px}
}
@media(max-width:700px){
  .hm-ouverture{
    align-items:center;
    padding-block:38px 30px
  }
  .hm-ouverture .hm-sur-titre{margin-bottom:1.4em}
  .hm-ouverture h1{font-size:clamp(2.5rem,1.5rem + 7vw,3.4rem)}
  .hm-ouverture .hm-actions{margin-top:2em}
  .hm-descente{margin-top:24px}
}
/* écrans bas (portables 13", paysage mobile) : on comprime plutôt que de déborder */
@media(max-height:680px){
  .hm-ouverture{padding-block:36px 28px}
  .hm-ouverture h1{font-size:clamp(2.2rem,1.4rem + 4.4vw,3.6rem)}
  .hm-descente{margin-top:22px}
}

/* Les mots du titre sont masqués par leur propre boîte pour l'apparition ligne
   par ligne. Avec une interligne aussi serrée, cette boîte rognait les jambages
   (le « p » de groupe, de professionnelle) : on l'agrandit en hauteur et on
   annule ce gain en marge, la mise en page ne bouge pas. */
.hm-mot{padding-block:.2em .32em;margin-block:-.2em -.32em}

/* Interligne : très serrée sur grand écran, elle est desserrée dès que le titre
   se replie sur plusieurs lignes courtes, sinon les jambages d'une ligne
   viennent toucher les hampes de la suivante. */
@media(max-width:900px){ .hm-ouverture h1{line-height:1.02} }
@media(max-width:700px){ .hm-ouverture h1{line-height:1.08} }