/* ===================================================================
   MOSAICA CONSEILS — SYSTEME RESPONSIVE GLOBAL
   -------------------------------------------------------------------
   Ce fichier se charge EN DERNIER, apres styles.css, mckinsey.css et
   les feuilles de page. Il ne remplace pas ces fichiers : il installe
   au-dessus d'eux un systeme unique et coherent.

   REGLE PERMANENTE DU PROJET
   Toute nouvelle section, tout nouveau composant et toute modification
   visuelle doivent etre concus et valides simultanement sur ordinateur,
   tablette et telephone. Les jetons et les echelles ci-dessous sont les
   seuls outils a utiliser : aucune valeur en pixels codee en dur pour
   les espacements, les marges laterales ou la typographie.

   SOMMAIRE
   1. Jetons fluides
   2. Echelle de points de rupture (canonique)
   3. Gardes anti-debordement
   4. Conteneurs et marges laterales
   5. Rythme vertical des sections
   6. Typographie fluide
   7. Bannieres et heroes
   8. Systeme de grilles
   9. Navigation et elements fixes ou collants
   10. Zones tactiles et formulaires
   11. Medias et ratios d'image
   12. Tableaux
   13. Accessibilite et mouvement reduit
   =================================================================== */


/* ═══════════════════════════════════════════════════════════════════
   1. JETONS FLUIDES
   Une seule source de verite pour la largeur, les marges laterales,
   le rythme vertical et la typographie.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Chrome de navigation. --nav-h est declare dans styles.css ; on le
     redonne ici comme filet de securite si styles.css evolue. */
  --nav-h:clamp(4.25rem, 3.06rem + 2.7vw, 6rem);
  /* Hauteur totale de la barre Formation fixe, bordure comprise. Les 25
     pages qui la portent derivent leur body{padding-top} de
     calc(var(--nav-h) + var(--subnav-h)). */
  --subnav-h:50px;

  /* Largeurs maximales de contenu */
  --container-width:1180px;
  --container-wide:1320px;
  --container-narrow:820px;
  --measure:68ch;           /* longueur de ligne confortable */

  /* Marges laterales : 20px sur telephone, 48px sur grand ecran */
  --page-padding:clamp(1.25rem,4vw,3rem);

  /* Rythme vertical des sections : 48px sur telephone, 80px au-dela */
  --section-spacing:clamp(3rem,7vw,5rem);
  --section-spacing-lg:clamp(3.5rem,9vw,7rem);
  --block-spacing:clamp(1.75rem,4vw,3rem);

  /* Gouttieres de grille */
  --gap-xs:clamp(0.5rem,1vw,0.75rem);
  --gap-sm:clamp(0.75rem,1.5vw,1rem);
  --gap-md:clamp(1rem,2vw,1.5rem);
  --gap-lg:clamp(1.5rem,3vw,2.5rem);
  --gap-xl:clamp(2rem,5vw,5rem);

  /* Echelle typographique fluide */
  --title-xl:clamp(2rem,5.5vw,4.2rem);
  --title-lg:clamp(1.75rem,4vw,2.75rem);
  --title-md:clamp(1.5rem,3vw,2.15rem);
  --title-sm:clamp(1.15rem,2vw,1.5rem);
  --text-lg:clamp(1rem,1.4vw,1.18rem);
  --text-base:clamp(0.95rem,1.1vw,1.02rem);
  --text-sm:clamp(0.86rem,1vw,0.92rem);
  /* Plancher de lisibilite : jamais de texte courant sous 13px sur
     telephone. Les surtitres et etiquettes utilisent --text-label, dont
     la borne basse vaut 12,8px : en dessous, un libelle en majuscules
     espacees devient illisible sur un ecran de telephone. */
  --text-label:clamp(0.8rem,1.6vw,0.85rem);

  /* Zone tactile minimale recommandee (WCAG 2.5.8 / Apple HIG) */
  --tap:44px;
}


/* ═══════════════════════════════════════════════════════════════════
   2. ECHELLE DE POINTS DE RUPTURE CANONIQUE
   -------------------------------------------------------------------
   Le site n'utilise plus que ces cinq seuils. Toute nouvelle regle
   responsive doit reutiliser l'un d'eux, jamais une valeur ad hoc.

     1200px  grand ordinateur  → ordinateur
     1080px  ordinateur        → tablette paysage  (bascule du menu)
      900px  tablette paysage  → tablette portrait
      640px  tablette portrait → telephone
      420px  telephone         → petit telephone
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   3. GARDES ANTI-DEBORDEMENT
   Aucun defilement horizontal involontaire, quelle que soit la page.
   ═══════════════════════════════════════════════════════════════════ */
html{
  overflow-x:hidden;
  /* Empeche iOS de regrossir le texte a la rotation de l'appareil. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:clip;
  /* clip vaut mieux que hidden : il ne cree pas de conteneur de
     defilement, donc position:sticky continue de fonctionner. */
}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}

/* Les mots longs (« intelligence organisationnelle », URL, courriels)
   ne poussent plus la mise en page au-dela de l'ecran. */
h1,h2,h3,h4,h5,h6,p,li,dd,dt,blockquote,figcaption,cite,label,summary,
td,th,a,strong,em,span{
  overflow-wrap:break-word;
}
/* Les titres editoriaux ne se coupent jamais au milieu d'un mot. */
h1,h2,h3,h4,.mos-title,.page-hero h1,.svc-hero h1,.crs-hero h1,
.section-title,.eb-head h2{
  word-break:normal;
  hyphens:none;
}
/* Titres courts : evite les lignes veuves d'un seul mot. */
@supports (text-wrap:balance){
  h1,h2,.section-title,.eb-head h2,.mos-title{text-wrap:balance}
}
@supports (text-wrap:pretty){
  p,.section-lead,.eb-head p,.mos-sub{text-wrap:pretty}
}

/* Rien ne depasse de son conteneur. */
img,svg,video,canvas,iframe,embed,object,picture{max-width:100%}
pre,code,kbd,samp{max-width:100%;overflow-x:auto;overflow-wrap:break-word}

/* Les elements de grille et de flex ne sont plus repousses par leur
   contenu : c'est la cause la plus fréquente de debordement. */
.wrap > *,.wrap-narrow > *,.container > *{min-width:0}


/* ═══════════════════════════════════════════════════════════════════
   4. CONTENEURS ET MARGES LATERALES
   Une seule regle de marge laterale pour tout le site.
   ═══════════════════════════════════════════════════════════════════ */
.wrap{
  max-width:var(--container-width);
  margin-inline:auto;
  padding-inline:var(--page-padding);
  width:100%;
}
.wrap-narrow{
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding-inline:var(--page-padding);
  width:100%;
}
.container{
  max-width:var(--container-width);
  margin-inline:auto;
  padding-inline:var(--page-padding);
  width:100%;
}
.gnav-inner,
.gnav-mega-inner,
.crs-hero-inner,
.crs-facts-inner,
.crs-quicknav-inner,
.page-hero-inner{
  padding-inline:var(--page-padding);
  width:100%;
}
.gnav-inner{max-width:var(--container-wide);margin-inline:auto}
.gnav-mega-inner,.crs-hero-inner,.crs-facts-inner,.crs-quicknav-inner,
.page-hero-inner{max-width:var(--container-width);margin-inline:auto}

/* Longueur de ligne : un paragraphe ne depasse jamais la mesure
   confortable, meme dans un conteneur large. */
.eb-head p,.section-lead,.art-p,.crs-accroche p{max-width:min(var(--measure),100%)}


/* ═══════════════════════════════════════════════════════════════════
   5. RYTHME VERTICAL DES SECTIONS
   Remplace les paddings codes en dur (5rem / 6rem / 3.25rem) et le
   hack section{padding:...!important} supprime de styles.css.
   ═══════════════════════════════════════════════════════════════════ */
section.pad{padding-block:var(--section-spacing)}
section.pad.pad-lg{padding-block:var(--section-spacing-lg)}

/* Sections heritees qui portaient un padding fixe en rem. */
.stat-band,.nl-band,.globe-section,.ig2-levels-section,.igp-levels-section,
.ig-maturite-section,.ig-final-cta,.ig-hero,.ig2-cta-band{
  padding-block:var(--section-spacing);
}
.nl-band,.globe-section,.ig2-levels-section,.ig2-cta-band{
  padding-inline:var(--page-padding);
}
.err-page{padding:var(--section-spacing-lg) var(--page-padding) var(--section-spacing)}

/* Entetes de section : marge basse fluide au lieu de 3rem fixes. */
.eb-head,.services-header,.clients-header,.insights-header,.integ-header,
.ig2-levels-intro{margin-bottom:var(--block-spacing)}


/* ═══════════════════════════════════════════════════════════════════
   6. TYPOGRAPHIE FLUIDE
   Hierarchie unique, du telephone au grand ecran.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero h1,.svc-hero h1,.crs-hero h1{font-size:var(--title-lg);line-height:1.12}
.mos-title{font-size:clamp(1.85rem,4.3vw,3.6rem);line-height:1.1}
.section-title,.eb-head h2,.cta-band h2{font-size:var(--title-md);line-height:1.2}
.globe-text h2,.ig2-cta-inner h3,.integ-cta-inner h3,.art-item h3{
  font-size:var(--title-sm);line-height:1.3;
}
.page-hero p,.svc-hero-sub,.crs-hero-tagline{font-size:var(--text-lg);line-height:1.65}
.eb-head p,.section-lead,.art-p{font-size:var(--text-base)}

/* Plancher de lisibilite sur telephone ET tablette : les etiquettes,
   surtitres et pastilles descendaient jusqu'a 9,9px (0,62rem). Le seuil
   est 1080px, c'est-a-dire tout ce qui n'est pas un ordinateur : le rendu
   editorial compact du bureau reste inchange. */
@media(max-width:1080px){
  .tag-cat,.section-eyebrow,.art-eyebrow,.res-pill,.svc6-tag,.tile-label,
  .mos-proof-label,.gnav-mega-label,.res-filter-label,.crs-phase-label,
  .igp-panel-tag,.ig2-panel-badge,.ig-step-badge,.crs-fact .lbl,
  .outil-tag,.insight-tag,.equipe-role,.chrono-tag,.quiz-step-label,
  .proof-item span,.stat-band span,.cal2-date .m{
    font-size:var(--text-label);
    letter-spacing:0.08em;
  }
  /* Texte courant : jamais sous 13,6px. */
  .res-card p,.svc4-card p,.svc6-card p,.domain-card p,.crs-related-card p,
  .cal2-meta,.equipe-desc,.chrono-desc,.tile-title,
  .art-p,.constat-card p,.val-card p,.svc3-card p{
    font-size:0.875rem;
    line-height:1.65;
  }
  /* Famille « fiche de formation » (crs-*) et sous-navigation Formation :
     fil d'Ariane, sommaire collant, etats de session et onglets tombaient
     entre 11,5 et 12,5px. */
  .crs-hero .breadcrumb,.crs-hero .breadcrumb a,
  .page-hero .breadcrumb a,
  .crs-etat,.crs-fact .lbl{
    font-size:var(--text-label);
  }
  /* Etiquette du panneau de recherche des domaines. */
  .domaines-panel > label{font-size:var(--text-label)}

  /* Sous-navigations locales (Formation, Tables Rondes) : les feuilles de
     page declarent .svc-subnav a, plus specifique que le systeme central
     et chargee apres. On monte la specificite plutot que d'editer 25
     blocs <style> identiques. */
  .svc-subnav .svc-subnav-links a,
  .svc-subnav .svc-subnav-links .gnav-btn,
  .tr-quicknav .tr-quicknav-links a{
    font-size:0.84rem;
  }

  /* Signatures de citation et libelles d'onglets. */
  cite,.testi-card cite,.testi-card cite span,.tr-plenary cite,
  .ed-tab-btn .k,.temo-info span{
    font-size:0.82rem;
  }
  .ed-tab-btn .k{font-size:var(--text-label)}
  .crs-quicknav a,.svc-subnav-links a,.svc-subnav a,
  .crs-session-table .btn-gold,.crs-session-table td,
  .crs-module li,.crs-situation,.crs-obj-item,
  .res-chip,.res-filters .res-chip{
    font-size:0.86rem;
  }

  /* Descriptions secondaires des menus et des cartes : 0,76rem valait
     12,2px. Plancher a 0,8rem (12,8px). */
  .gnav-mega-item small,.mega-item small,.sect-card span,.ev-meta,
  .art-photo-card p,.res-card a.res-link,.svc3-link,.chrono-link,
  .cal2-btn,.ev a.ev-cta,
  .tlq-head span{
    font-size:0.8rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   7. BANNIERES ET HEROES
   body porte deja padding-top:var(--nav-h) : les heroes n'ont donc pas
   a compenser une seconde fois la hauteur de la barre. L'ancien
   calc(68px + …) creait un vide mort de plus de 120px sur telephone.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero{
  padding-block:calc(var(--nav-h) + 3.5rem) 3.5rem;
  padding-inline:var(--page-padding);
}
@media(max-width:900px){
  .page-hero{padding-block:calc(var(--nav-h) * 0.5 + 2rem) 2.5rem}
}
@media(max-width:640px){
  .page-hero{padding-block:2.5rem}
}
.page-hero h1{max-width:min(820px,100%)}
.page-hero p{max-width:min(var(--measure),100%)}
.page-hero .breadcrumb{
  font-size:var(--text-label);
  line-height:1.6;
  overflow-wrap:anywhere;
}

/* Banniere animee des pages de service : hauteur proportionnelle a
   l'ecran plutot que 540px fixes. */
.svc-hero{
  min-height:clamp(340px,54vh,540px);
  padding-top:calc(var(--nav-h) * 0.5 + 1.5rem);
}
.svc-hero-inner{padding-bottom:clamp(1.75rem,4vw,3.25rem)}
@media(max-width:640px){
  .svc-hero{min-height:clamp(300px,48vh,420px)}
}

/* Banniere de formation : marges laterales unifiees. */
.crs-hero{padding:clamp(2.5rem,6vw,3.75rem) var(--page-padding) clamp(2.25rem,5vw,3.25rem)}
.crs-hero-inner{padding-inline:0}

/* Hero d'accueil : 100svh evite le saut de mise en page provoque par la
   barre d'adresse mobile, que 100vh ignore. */
@supports (height:100svh){
  #hero.hero-eq{height:100svh}
}
@media(max-width:1080px){
  @supports (height:100svh){
    #hero.hero-eq{height:auto;min-height:100svh}
  }
}
@media(max-width:640px){
  @supports (height:100svh){
    #hero.hero-eq{height:auto;min-height:0}
  }
}


/* ═══════════════════════════════════════════════════════════════════
   8. SYSTEME DE GRILLES
   -------------------------------------------------------------------
   Deux principes appliques a toutes les grilles du site :

   a) minmax(0,1fr) au lieu de 1fr. Une piste « 1fr » ne descend jamais
      sous la largeur intrinseque de son contenu : c'est la cause n°1
      des grilles qui debordent. minmax(0,1fr) autorise la compression.

   b) Une echelle de degression unique, appliquee par famille :
        4 colonnes → 2 @1080 → 1 @640
        3 colonnes → 2  @900 → 1 @640
        2 colonnes → 1  @860
      Les cartes ne descendent jamais sous ~260px de large : en dessous,
      la hierarchie titre / texte / lien s'effondre.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Gouttieres fluides ------------------------------------------- */
.feat-grid,.svc3-grid,.val-grid,.constat-grid,.art-photo-grid,.res-grid,
.cal2-grid,.proof-grid,.stat-band-grid,.svc4-grid,.services-grid,
.temoignages,.equipe-grid,.domain-grid,.crs-related-grid,.outils-grid,
.chrono-grid,.insights-grid,.sect-grid,.svc6-grid,.rc-grid,
.igp-levels,.ig2-levels,.integ-levels,.ig-levels-cards,
.igp-cols,.ig2-panel-cols,.ig-detail-grid{
  gap:var(--gap-md);
}
.svc3-grid,.val-grid,.constat-grid,.art-photo-grid,.outils-grid{
  gap:var(--gap-lg);
}

/* --- Famille 4 colonnes ------------------------------------------- */
.feat-grid,.svc4-grid,.proof-grid,.stat-band-grid,
.igp-levels,.ig2-levels,.integ-levels,.ig-levels-cards{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1080px){
  .feat-grid,.svc4-grid,.proof-grid,.stat-band-grid,
  .igp-levels,.ig2-levels,.integ-levels,.ig-levels-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
/* Variantes de comptage. Elles remplacent les attributs style= poses
   directement dans le HTML, qui bloquaient la degression jusqu'a 375px.
   Nouvelle section : utiliser ces classes, jamais un style= en ligne. */
.svc4-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc4-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-band-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .svc4-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .svc4-grid--3,.svc4-grid--2,.stat-band-grid--3{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:640px){
  .feat-grid,.svc4-grid,
  .igp-levels,.ig2-levels,.integ-levels,.ig-levels-cards{
    grid-template-columns:minmax(0,1fr);
  }
  /* Les chiffres restent en deux colonnes : ils sont courts et gagnent
     a etre compares cote a cote. */
  .proof-grid,.stat-band-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg)}
}

/* --- Famille 3 colonnes ------------------------------------------- */
.svc3-grid,.val-grid,.constat-grid,.res-grid,.services-grid,.temoignages,
.equipe-grid,.domain-grid,.crs-related-grid,.svc6-grid,
.igp-cols,.ig2-panel-cols,.ig-detail-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:900px){
  .res-grid,.services-grid,.equipe-grid,.domain-grid,.svc6-grid,
  .temoignages,.crs-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* Ces trois familles portent des paragraphes longs : deux colonnes a
     900px les rendraient illisibles, on passe directement a une. */
  .svc3-grid,.val-grid,.constat-grid,
  .igp-cols,.ig2-panel-cols,.ig-detail-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:640px){
  .res-grid,.services-grid,.domain-grid,.svc6-grid,.temoignages,
  .crs-related-grid,.equipe-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* --- Famille 2 colonnes ------------------------------------------- */
.art-photo-grid,.cal2-grid,.outils-grid,.eb-stat-grid,
.pos-grid,.tr-inner,.contact-grid,.globe-grid,.integ-wheel-wrap,
.ig-hero-inner,.ig-final-inner,.form-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.eb-stat-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.pos-grid,.tr-inner,.contact-grid{gap:var(--gap-xl)}
@media(max-width:900px){
  .pos-grid,.tr-inner,.contact-grid,.globe-grid,.integ-wheel-wrap,
  .ig-hero-inner,.ig-final-inner{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){
  .art-photo-grid,.cal2-grid,.outils-grid,.eb-stat-grid,.form-row{
    grid-template-columns:minmax(0,1fr);
  }
}

/* --- Grilles asymetriques (redaction / mise en avant) -------------- */
.insights-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.chrono-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1080px){
  .insights-grid,.chrono-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .insight-main{grid-column:span 2}
  .chrono-card.chrono-featured{grid-row:span 1}
}
@media(max-width:640px){
  .insights-grid,.chrono-grid{grid-template-columns:minmax(0,1fr)}
  .insight-main{grid-column:span 1}
}

/* --- Grille annuaire (5 colonnes de liens courts) ------------------ */
.sect-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1080px){.sect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.sect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sous 560px, deux colonnes donnaient des cartes de 140px : le nom du
   secteur passait sur quatre lignes. Une seule colonne. */
@media(max-width:560px){.sect-grid{grid-template-columns:minmax(0,1fr)}}

/* --- Logos de references ------------------------------------------- */
.rc-grid{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.rc-card{height:auto;min-height:clamp(96px,22vw,128px);padding:var(--gap-sm)}
.rc-card img{max-height:clamp(34px,9vw,56px);max-width:100%}

/* Pied de page : voir assets/footer.css (namespace .mfoot), qui porte
   désormais son propre système responsive, cohérent avec l'échelle de
   points de rupture canonique ci-dessus (900px / 640px). */


/* ═══════════════════════════════════════════════════════════════════
   9. NAVIGATION ET ELEMENTS FIXES OU COLLANTS
   Tous les decalages sont derives de --nav-h : plus aucun 64px, 68px,
   117px ou 118px code en dur.
   ═══════════════════════════════════════════════════════════════════ */
.gnav{height:var(--nav-h)}
.gnav-mega,.gnav-mega-overlay,.gnav-mobile{top:var(--nav-h)}
.gnav-mega{max-height:calc(100dvh - var(--nav-h));overscroll-behavior:contain}
.gnav-mobile{
  height:calc(100dvh - var(--nav-h));
  overscroll-behavior:contain;
  padding-bottom:calc(2rem + env(safe-area-inset-bottom));
}
.gnav-mega.below-subnav,.gnav-mega-overlay.below-subnav{
  top:calc(var(--nav-h) + var(--subnav-h));
}
.gnav-mega.below-subnav{max-height:calc(100dvh - var(--nav-h) - var(--subnav-h))}

/* Le mega-menu tenait sur 4 colonnes jusqu'a 1080px seulement parce que
   la barre disparaissait ; en mode tactile il s'ouvre en pleine largeur. */
@media(max-width:640px){
  .gnav-mega-cols,.gnav-mega-cols.cols-2{grid-template-columns:minmax(0,1fr);max-width:none}
}

/* Sous 1080px, mckinsey.css masquait la loupe en meme temps que le menu
   principal : il ne restait plus AUCUN acces a la recherche sur tablette
   ni sur telephone. Le bouton revient a cote du menu hamburger. */
@media(max-width:1080px){
  .gnav-icon-btn.search-desktop{display:flex}
}
.gnav-util{flex-wrap:nowrap}
/* La barre debordait de 12px a 375px : gouttiere de 28px, logo, loupe,
   menu ne tenaient pas. Sous 1080px, l'utilitaire ne porte plus que la
   loupe (langue et Mon espace rejoignent le panneau mobile) : on resserre
   quand meme la gouttiere et on garantit la largeur du bouton de menu. */
@media(max-width:1080px){
  .gnav-inner{gap:var(--gap-sm)}
  .gnav-util{margin-left:auto;gap:var(--gap-xs)}
  .gnav-mobile-btn{flex:0 0 var(--tap);width:var(--tap);height:var(--tap)}
}
@media(max-width:440px){
  .gnav-logo-text{font-size:0.92rem}
}

/* Barre Formation fixe : une seule source de verite pour sa hauteur. */
.svc-subnav{top:var(--nav-h)}
.svc-subnav-inner{min-height:calc(var(--subnav-h) - 1px)}

/* Les barres collantes se placent sous la navigation, pas a 117px. */
.crs-quicknav{top:calc(var(--nav-h) + var(--subnav-h))}
.igp-stage,.ig2-stage{top:var(--nav-h)}
/* Sur tablette et telephone, empiler navigation + sous-nav + barre
   collante + panneau consommait la moitie de l'ecran : on desactive le
   collage sous 900px. */
@media(max-width:900px){
  .igp-stage,.ig2-stage{position:relative;top:auto}
  .crs-quicknav{top:var(--nav-h)}
}

/* Les barres a defilement horizontal (sommaire, frise) restent
   utilisables au doigt et ne sont pas coupees par les marges. */
.crs-quicknav-inner,.igp-timeline,.ig2-timeline-wrap,.res-filters{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
}
.crs-quicknav-inner > a,.res-filters > *{scroll-snap-align:start}

/* Bouton de rendez-vous flottant : respecte l'encoche et ne recouvre
   plus le dernier lien du pied de page. */
.book-float{
  bottom:calc(1rem + env(safe-area-inset-bottom));
  right:calc(1rem + env(safe-area-inset-right));
  min-height:var(--tap);
  min-width:var(--tap);
  justify-content:center;
}

/* Le lien d'ancre visé n'est plus masqué par la barre fixe. */
:target{scroll-margin-top:calc(var(--nav-h) + 1rem)}
[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}


/* ═══════════════════════════════════════════════════════════════════
   10. ZONES TACTILES ET FORMULAIRES
   ═══════════════════════════════════════════════════════════════════ */
/* Commandes reelles : 44px minimum au doigt. Les liens en ligne dans un
   paragraphe sont exclus : les agrandir casserait l'interlignage.
   On ne touche PAS a la propriete display des composants qui ont deja
   leur propre mise en page (flex, block pleine largeur) : seule la
   hauteur minimale est imposee. */
.gnav-link,.gnav-btn,.gnav-icon-btn,.gnav-myspace,.gnav-mobile-btn,
.gm-item > a,.gm-item > button,.gm-myspace,
.btn-gold,.btn-outline,.form-submit,.res-chip,.quiz-opt,.quiz-back,
.cal2-btn,.crs-quicknav a,.crs-facts-cta .btn-ghost,.mos-cta,
.equipe-btn,.lang-btn,.contact-mandat-btn,.svc-subnav .gnav-btn{
  min-height:var(--tap);
}
/* Ces composants sont deja en ligne : on les centre verticalement. */
.res-chip,.cal2-btn,.crs-quicknav a,.crs-facts-cta .btn-ghost,
.quiz-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-gold,.btn-outline,.form-submit,.mos-cta{justify-content:center}

/* Liens de listes (mega-menu, sous-menus mobiles) : inline par defaut,
   donc insensibles a min-height. On les passe en bloc et on regle la
   cible via le rembourrage vertical. Le pied de page gere sa propre
   zone tactile dans assets/footer.css. */
.gm-sub a{display:inline-block;padding-block:0.4rem}
.gnav-mega-item{padding-block:0.85rem}
@media(max-width:900px){
  /* Sur tactile, la pleine hauteur de zone tactile. */
  .gm-sub a{
    display:flex;
    align-items:center;
    min-height:var(--tap);
    padding-block:0.5rem;
  }
  .gnav-mega-item{min-height:var(--tap);display:flex;flex-direction:column;justify-content:center}
}

/* Les puces du carrousel d'accueil mesuraient 12px : on garde le point
   discret et on elargit la cible avec un pseudo-element. */
.mos-dot{position:relative}
.mos-dot::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:var(--tap);height:var(--tap);
}
.mos-car-nav{gap:14px}

/* Formulaires : jamais de zoom automatique iOS (declenche sous 16px) et
   jamais de champ plus large que l'ecran. */
input,select,textarea,button{font-family:inherit;max-width:100%}
/* Les cases a cocher, boutons radio et champs de type bouton sont
   exclus : leur taille intrinseque est voulue. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
select,textarea{
  width:100%;
}
/* Sous 1080px (tablette et telephone), le clavier tactile est en jeu :
   16px minimum, sinon iOS zoome automatiquement sur le champ et casse la
   mise en page. Le rendu compact du bureau est preserve. */
@media(max-width:1080px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
  select,textarea{
    font-size:1rem;
    min-height:var(--tap);
  }
}
input[type=checkbox],input[type=radio]{
  width:auto;
  min-width:20px;
  min-height:20px;
}
textarea{min-height:clamp(120px,20vh,180px)}
.form-group,.form-row,.nl-form,.quiz-email-form{min-width:0}
.nl-form input,.quiz-email-form input{min-width:0;flex:1 1 min(240px,100%)}
.nl-form,.quiz-email-form{flex-wrap:wrap}
@media(max-width:640px){
  .nl-form,.quiz-email-form{flex-direction:column;align-items:stretch}
  .nl-form input,.quiz-email-form input,
  .nl-form .btn-gold,.quiz-email-form .btn-gold{width:100%}
}
/* Le champ de recherche compact de la barre Formation reste masque sous
   860px : la barre est fixe et sa hauteur pilote le decalage du corps de
   page. La recherche passe par la loupe globale, reactivee ci-dessous. */
.svc-hero-search{max-width:min(520px,100%)}

/* Etat de focus visible et coherent, clavier comme lecteur d'ecran. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}


/* ═══════════════════════════════════════════════════════════════════
   11. MEDIAS ET RATIOS D'IMAGE
   Les hauteurs fixes (150px, 170px, 220px…) coupaient les visages sur
   telephone. On passe a des ratios stables.
   ═══════════════════════════════════════════════════════════════════ */
.feat-card img,
.res-card-img,
.art-photo-card img,
.chrono-img img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
  display:block;
}
.chrono-img{height:auto;aspect-ratio:16/10}
.chrono-card.chrono-featured .chrono-img{aspect-ratio:4/3}
.eb-stat-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.insight-main-img{height:auto;aspect-ratio:16/9}
.equipe-avatar{height:auto;aspect-ratio:4/3;min-height:150px}
.tile-media img{object-position:center}

/* Graphiques SVG des pages Industries.
   Ces figures ont un viewBox de 340 a 560 unites et etaient ecrasees dans
   un conteneur de 269px sur telephone : facteur d'echelle 0,48, donc des
   libelles a 6,2px effectifs — illisibles, alors que la mesure CSS
   annoncait 13px. On rend au graphique une echelle lisible et on assume un
   defilement horizontal DANS la figure, jamais dans la page. */
@media(max-width:760px){
  .eb-chart-card{
    position:relative;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding-bottom:1.1rem;
    scroll-behavior:smooth;
  }
  .eb-chart-card svg{min-width:520px}
  .eb-chart-card::before{
    content:"";
    position:sticky;
    float:right;
    top:0;right:0;
    width:28px;height:calc(100% - 1.1rem);
    margin-left:-28px;
    background:linear-gradient(90deg,rgba(251,250,247,0) 0%,#fbfaf7 100%);
    pointer-events:none;
    transition:opacity 0.4s ease;
  }
  .eb-chart-card.is-revealed::before{opacity:0}
  .eb-chart-card::after{
    content:"Faites glisser pour tout voir →";
    display:block;
    clear:both;
    margin-top:0.5rem;
    font-size:var(--text-label);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gray6);
    position:sticky;
    left:0;
  }
  .eb-chart-card.is-revealed::after{content:"← Glissez pour revoir le début"}
}

/* Canvas decoratifs (globe, scene du hero de service) : jamais plus
   larges que le conteneur, jamais deformes. */
.globe-canvas-wrap canvas,.globe-mini-wrap canvas,.svc-hero-canvas{
  max-width:100%;
  height:auto;
}
.svc-hero-canvas{height:100%}

/* Les motifs de mosaique en position absolue debordaient et creaient un
   defilement lateral fantome sur telephone. */
.mosaic-art{max-width:100vw}
@media(max-width:640px){
  .mosaic-corner-br{width:min(86vw,420px);right:-14%;bottom:-8%;opacity:0.4}
  .mosaic-corner-bl{display:none}
  .ig-hero::before,.ig-hero::after{display:none}
}

/* Logos : la piste de logos ne se comprime plus jusqu'a l'illisible. */
.mos-proof-logos img{height:clamp(20px,5vw,30px)}
.client-logo-img{height:auto;min-height:clamp(56px,14vw,70px);min-width:0}
.client-logo-img img{max-height:clamp(28px,7vw,40px)}


/* ═══════════════════════════════════════════════════════════════════
   12. TABLEAUX
   ═══════════════════════════════════════════════════════════════════ */
table{width:100%;max-width:100%;border-collapse:collapse}
/* Les tableaux de donnees qui n'ont pas de mise en page mobile dediee
   defilent dans leur propre boite plutot que d'elargir la page.
   .crs-session-table possede deja sa version en cartes. */
@media(max-width:760px){
  table:not(.crs-session-table){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   13. ACCESSIBILITE ET MOUVEMENT REDUIT
   ═══════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}

/* Sur telephone, les animations decoratives en boucle consomment de la
   batterie et genent la lecture pendant le defilement. On garde les
   transitions d'interaction, on arrete les boucles infinies. */
@media(max-width:640px){
  .hero-sky,.hero-mountains,.hero-fjord,.hero-aurora,.hp,.hero-line,
  .signal-band-inner{
    animation:none;
  }
  /* La bande defilante devient une liste qui passe a la ligne. */
  .signal-band-inner{
    width:auto;
    white-space:normal;
    flex-wrap:wrap;
    gap:0.75rem 1.25rem;
    justify-content:center;
  }
  .signal-band{padding:0.9rem var(--page-padding)}
  /* Les effets de survol n'ont pas de sens au doigt et provoquaient un
     etat « colle » apres un tap. */
  .service-card:hover,.svc3-card:hover,.res-card:hover,.chrono-card:hover,
  .igp-level:hover,.ig2-level:hover,.integ-level:hover,.domain-card:hover,
  .art-photo-card:hover,.svc4-card:hover,.feat-card:hover img,
  .ig-level-card:hover{
    transform:none;
  }
}

/* Les effets de flou coutent cher en composition sur mobile. */
@media(max-width:640px){
  .hero-stats{backdrop-filter:none}
  .hero-aurora{filter:none}
}

/* Sur telephone, le survol qui devoile un texte cache (.chrono-card) est
   inaccessible : le texte est affiche en permanence. */
@media(hover:none){
  .chrono-desc-hover{max-height:none;opacity:1;margin-bottom:0.75rem}
}

/* Bloc de saut de lien, si un jour ajoute au balisage. */
.skip-link{
  position:absolute;left:-9999px;
  background:var(--gold);color:var(--navy);
  padding:0.75rem 1.25rem;font-weight:700;z-index:2000;
}
.skip-link:focus{left:1rem;top:1rem}


/* ═══════════════════════════════════════════════════════════════════
   PALIER PETIT TELEPHONE (≤420px)
   Dernier filet : on ne descend plus jamais sous ces valeurs.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:420px){
  :root{
    --page-padding:1.125rem;
    --section-spacing:2.75rem;
  }
  .igp-cols,.ig2-panel-cols,.ig-detail-grid,
  .integ-levels,.igp-levels,.ig2-levels,.ig-levels-cards{
    grid-template-columns:minmax(0,1fr);
  }
  .proof-grid,.stat-band-grid{grid-template-columns:minmax(0,1fr)}
  .cal2-card{flex-direction:column;gap:var(--gap-sm)}
  .cal2-date{width:100%;display:flex;align-items:baseline;gap:0.5rem;justify-content:center}
  .crs-facts-inner{gap:1rem 1.5rem}
  .quiz-score-ring{width:120px;height:120px}
}