/* ============================================================================
   PRISMIA · HEADER + FOOTER CANONIQUES (V6, _build/SPEC.md §1 et §9)
   Fichier AUTONOME : toutes les var() portent un fallback (les pages qui ont
   deja les tokens Prismia gardent leurs valeurs, les autres restent correctes).
   Toutes les classes sont prefixees "hf-" pour ne pas entrer en collision avec
   le CSS embarque des pages. Zero tiret cadratin dans ce fichier (SPEC §0).
   Chargement : <link rel="stylesheet" href="assets/hf.css">
   (depuis cas/ : href="../assets/hf.css")
   ========================================================================== */

/* ---------- Bilingue FR/EN : filet de securite (les pages ont deja ces
   regles ; les dupliquer est sans effet de bord et rend hf.css autonome) --- */
[data-lang="fr"] .lang-en{display:none !important;}
[data-lang="en"] .lang-fr{display:none !important;}

/* ============================ HEADER ============================ */
.hf-nav{position:sticky; top:0; z-index:60; border-bottom:1px solid transparent;
  background:transparent;
  transition:background var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    border-color var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.hf-nav.is-scrolled{background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline,#e7e9ec);}
.hf-nav__inner{max-width:1380px; margin:0 auto; height:64px;
  padding:0 var(--page-gutter,clamp(20px,5vw,56px));
  display:flex; align-items:center; gap:clamp(14px,1.6vw,26px);}

.hf-logo{display:inline-flex; align-items:center; gap:10px;
  color:var(--ink,#0e1113); text-decoration:none;}
.hf-logo__mark{width:28px; height:28px; border-radius:8px; display:block; flex:0 0 auto; max-width:100%;}
.hf-logo__word{font:var(--w-semibold,600) 18px/1
  var(--font-display,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  letter-spacing:-0.015em;}

.hf-nav__links{display:flex; align-items:center; gap:clamp(2px,0.6vw,8px); margin-left:2px;}
.hf-nav-item{position:relative;}
.hf-nav-link{display:inline-flex; align-items:center; gap:6px; background:none; border:0;
  cursor:pointer; text-decoration:none;
  font:var(--w-medium,500) 14px/1
  var(--font-body,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  color:var(--steel,#5b636b); padding:10px 12px; border-radius:var(--r-plate,9px);
  transition:color var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    background var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.hf-nav-link:hover{color:var(--ink,#0e1113); background:var(--canvas-2,#fafafb);}
.hf-nav-link[aria-current="page"],
.hf-nav-link.hf-is-current{color:var(--ink,#0e1113);}
.hf-nav-link svg{transition:transform var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));
  display:block; max-width:100%;}
.hf-nav-link[aria-expanded="true"] svg{transform:rotate(180deg);}

/* Menu deroulant Solution (3 entrees, pattern du mega-menu existant) */
.hf-nav-menu{position:absolute; top:calc(100% + 4px); left:0; min-width:280px;
  background:var(--canvas,#ffffff); border:1px solid var(--hairline,#e7e9ec);
  border-radius:var(--r-card,12px);
  box-shadow:var(--shadow-panel,0 1px 2px rgba(14,17,19,.04),0 8px 24px -12px rgba(14,17,19,.08));
  padding:8px; display:flex; flex-direction:column; gap:2px; z-index:61;}
.hf-nav-menu[hidden]{display:none;}
.hf-nav-menu a{display:block; color:var(--slate,#33393f); text-decoration:none;
  font:var(--w-medium,500) 14px/1.3
  var(--font-body,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  padding:11px 12px; border-radius:var(--r-plate,9px);
  transition:background var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    color var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.hf-nav-menu a .hf-nm-sub{display:block; margin-top:3px;
  font:var(--w-regular,400) var(--t-caption,0.8125rem)/1.35
  var(--font-body,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  color:var(--mist,#646c74);}
.hf-nav-menu a:hover{background:var(--canvas-2,#fafafb); color:var(--ink,#0e1113);}

.hf-nav__spacer{flex:1 1 auto;}

/* CTA (pill encre, meme langage que .btn--primary des pages) */
.hf-btn{font:var(--w-medium,500) var(--t-body-sm,0.875rem)/1
  var(--font-body,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  letter-spacing:0; border-radius:var(--r-pill,9999px); padding:11px 20px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; text-decoration:none;
  transition:transform var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    background var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    color var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    border-color var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.hf-btn:active{transform:translateY(1px);}
.hf-btn--primary{background:var(--action,#0e1113); color:var(--canvas,#ffffff);
  border-color:var(--action,#0e1113);}
.hf-btn--primary:hover{background:var(--action-hover,#23282c); border-color:var(--action-hover,#23282c);}
.hf-nav__cta{flex:0 0 auto;}

/* Toggle de langue A LARGEUR FIXE (SPEC §1) : les deux libelles occupent la
   MEME cellule de grille ; le libelle inactif reste en visibility:hidden et
   continue de reserver sa largeur. Rien ne bouge au changement FR/EN.
   min-width en secours si un seul libelle est present. */
.hf-lang-toggle{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; min-width:64px; height:36px; padding:0 12px; background:transparent;
  border:1px solid var(--hairline,#e7e9ec); border-radius:var(--r-pill,9999px);
  cursor:pointer; color:var(--steel,#5b636b);
  font:var(--w-medium,500) var(--t-micro,0.6875rem)/1
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:.08em; text-transform:uppercase;
  transition:color var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    border-color var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    background var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.hf-lang-toggle:hover{color:var(--ink,#0e1113); border-color:var(--hairline-strong,#d8dbdf);
  background:var(--canvas-2,#fafafb);}
.hf-lang-toggle svg{width:13px; height:13px; color:var(--mist,#646c74); display:block; flex:0 0 auto;}
.hf-lang-toggle__label{display:inline-grid; text-align:center;}
.hf-lang-toggle__label > span{grid-area:1 / 1; visibility:hidden; white-space:nowrap;}
html:not([data-lang="en"]) .hf-lt-fr{visibility:visible;}
[data-lang="en"] .hf-lt-en{visibility:visible;}

/* Burger (mobile) */
.hf-nav__burger{display:none; margin-left:auto; width:44px; height:44px; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; background:none; border:0; cursor:pointer;
  border-radius:var(--r-plate,9px);}
.hf-nav__burger span{display:block; width:22px; height:2px; background:var(--ink,#0e1113);
  border-radius:2px;
  transition:transform var(--dur-2,220ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    opacity var(--dur-1,150ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.hf-nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hf-nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hf-nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Panneau mobile : ancre sous la nav sticky (position:absolute par rapport a
   .hf-nav, robuste meme avec un bandeau d'annonce au-dessus). */
.hf-nav__mobile{display:none;}
.hf-nav__mobile-group{margin:6px 0 2px; padding:8px 12px 0;
  font:var(--w-medium,500) var(--t-micro,0.6875rem)/1
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:var(--tr-label,0.13em); text-transform:uppercase; color:var(--mist,#646c74);}

/* Bascule burger : 7 entrees (Solution, Manifeste, Offre, Cas clients,
   Carrieres, Partenariats, Ressources) + CTA + toggle ne tiennent plus sous
   ~1180px (verifie aux breakpoints 768, 834, 1024 et 1180 de la SPEC §11). */
@media (max-width:1179.98px){
  .hf-nav__links, .hf-nav__cta, .hf-nav__inner > .hf-lang-toggle{display:none;}
  .hf-nav__burger{display:inline-flex;}
  .hf-nav__mobile{position:absolute; top:100%; left:0; right:0; z-index:55;
    display:flex; flex-direction:column; gap:2px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline,#e7e9ec);
    box-shadow:var(--shadow-panel,0 1px 2px rgba(14,17,19,.04),0 8px 24px -12px rgba(14,17,19,.08));
    padding:12px var(--page-gutter,clamp(20px,5vw,56px)) 20px;
    max-height:calc(100vh - 64px); overflow-y:auto;}
  .hf-nav__mobile[hidden]{display:none;}
  .hf-nav__mobile a{display:block; padding:14px 12px; color:var(--slate,#33393f);
    text-decoration:none;
    font:var(--w-medium,500) 15px/1
    var(--font-body,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
    border-radius:var(--r-plate,9px); border-bottom:1px solid var(--hairline-soft,#f0f1f3);}
  .hf-nav__mobile a[aria-current="page"]{color:var(--ink,#0e1113);}
  .hf-nav__mobile a.hf-btn{margin-top:14px; justify-content:center; border-bottom:0;
    color:var(--canvas,#ffffff);}
  .hf-nav__mobile .hf-lang-toggle{width:100%; height:44px; justify-content:flex-start; margin-top:4px;}
}

/* ============================ FOOTER ============================ */
.hf-footer{background:var(--canvas-2,#fafafb); border-top:1px solid var(--hairline,#e7e9ec);}
.hf-footer__cols{max-width:var(--page-wide,1320px); margin:0 auto;
  padding:clamp(48px,6vw,80px) var(--page-gutter,clamp(20px,5vw,56px)) 40px;
  display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:clamp(24px,3vw,48px);}

/* Col 1 · identite */
.hf-footer__sig .hf-logo{margin-bottom:16px;}
.hf-footer__baseline{margin:0; color:var(--ink,#0e1113); max-width:36ch; line-height:1.5;
  font:var(--w-medium,500) var(--t-body-sm,0.875rem)/1.5
  var(--font-body,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);}
.hf-footer__desc{margin:10px 0 0; color:var(--steel,#5b636b); max-width:40ch; line-height:1.6;
  font-size:var(--t-body-sm,0.875rem);}
.hf-footer__legal-lines{margin:18px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
  color:var(--mist,#646c74); font-size:var(--t-caption,0.8125rem); line-height:1.55;}
.hf-footer__legal-lines a{color:var(--steel,#5b636b); text-decoration:none;}

/* Colonnes de liens */
.hf-footer__col h2{margin:0 0 16px;
  font:var(--w-medium,500) var(--t-micro,0.6875rem)/1
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:var(--tr-label,0.13em); text-transform:uppercase; color:var(--mist,#646c74);}
.hf-footer__col ul{margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:12px;}
.hf-footer a{color:var(--steel,#5b636b); font-size:var(--t-body-sm,0.875rem); text-decoration:none;}
.hf-footer a:hover{color:var(--ink,#0e1113); text-decoration:underline; text-underline-offset:3px;}

/* Sous-liens (Cas d'usage par pole : Finance, Supply chain, RH, Commerce) */
.hf-footer__subs{margin:10px 0 0 2px !important; padding-left:12px !important;
  border-left:1px solid var(--hairline,#e7e9ec); gap:8px !important;}
.hf-footer__subs a{font-size:var(--t-caption,0.8125rem); color:var(--mist,#646c74);}
.hf-footer__subs a:hover{color:var(--ink,#0e1113);}

/* Sous-groupes d'une colonne (Solutions : « Nos offres » puis « En detail ») */
.hf-footer__group{margin:20px 0 10px;
  font:var(--w-medium,500) var(--t-micro,0.6875rem)/1
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:var(--tr-label,0.13em); text-transform:uppercase; color:var(--mist,#646c74);}
.hf-footer__col > .hf-footer__group:first-of-type{margin-top:0;}

/* Repertoire complet : cas d'usage par departement et par industrie (§F5).
   Listes longues : deux sous-colonnes compactes, une seule sous 760px. */
.hf-footer__dir{max-width:var(--page-wide,1320px); margin:0 auto;
  padding:0 var(--page-gutter,clamp(20px,5vw,56px)) 4px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,48px);}
.hf-footer__dirblock{min-width:0; padding-top:26px;
  border-top:1px solid var(--hairline-soft,#f0f1f3);}
.hf-footer__dirblock h2{margin:0 0 14px;
  font:var(--w-medium,500) var(--t-micro,0.6875rem)/1
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:var(--tr-label,0.13em); text-transform:uppercase; color:var(--mist,#646c74);}
.hf-footer__dirlist{margin:0; padding:0; list-style:none;
  columns:2; column-gap:clamp(14px,2vw,32px);}
.hf-footer__dirlist li{break-inside:avoid; margin:0 0 9px;}
.hf-footer__dirlist a{display:inline-block;
  font-size:var(--t-caption,0.8125rem); line-height:1.4; color:var(--mist,#646c74);
  overflow-wrap:anywhere;}
.hf-footer__dirlist a:hover{color:var(--ink,#0e1113);}
.hf-footer__dirall{margin:4px 0 0;}
.hf-footer__dirall a{font-size:var(--t-caption,0.8125rem);}
@media (max-width:759.98px){
  .hf-footer__dir{grid-template-columns:1fr; gap:0;}
  .hf-footer__dirblock + .hf-footer__dirblock{margin-top:4px;}
}

/* Bandeau bas */
.hf-footer__bottom{max-width:var(--page-wide,1320px); margin:0 auto;
  padding:22px var(--page-gutter,clamp(20px,5vw,56px)) 40px;
  border-top:1px solid var(--hairline-soft,#f0f1f3);
  display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap;}
.hf-footer__copy{margin:0;
  font:var(--w-regular,400) var(--t-micro,0.6875rem)/1.6
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  color:var(--mist,#646c74); letter-spacing:.02em;}
.hf-footer__badges{margin:0; display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  font:var(--w-regular,400) var(--t-micro,0.6875rem)/1.6
  var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);
  color:var(--mist,#646c74); letter-spacing:.02em;}
.hf-badge{white-space:nowrap;}
.hf-badge + .hf-badge::before{content:"·"; margin-right:10px; color:var(--mist,#646c74);}

/* Responsive footer (SPEC §9) : 5 col >=1200, 3 col tablette, 2 puis 1 mobile */
@media (max-width:1199.98px){
  .hf-footer__cols{grid-template-columns:repeat(3,1fr);}
  .hf-footer__sig{grid-column:1 / -1;}
}
@media (max-width:759.98px){
  .hf-footer__cols{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:479.98px){
  .hf-footer__cols{grid-template-columns:1fr;}
  .hf-footer__bottom{justify-content:flex-start;}
}

/* Accessibilite : anneau de focus coherent avec les pages */
.hf-nav :focus-visible, .hf-footer :focus-visible{
  outline:2px solid var(--ink,#0e1113); outline-offset:3px; border-radius:4px;}

@media (prefers-reduced-motion:reduce){
  .hf-nav, .hf-nav *, .hf-footer, .hf-footer *{transition:none !important; animation:none !important;}
}


/* Bouton LinkedIn du footer (colonne Identité) : discret, pastille bordée, icône + libellé. */
.hf-footer__social{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--hairline,#e3e5e8);background:var(--canvas,#fff);
  color:var(--steel,#4a5058);text-decoration:none;
  font:500 13px/1 var(--font-body,system-ui,sans-serif);
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.hf-footer__social:hover{border-color:var(--hairline-strong,#c9ced4);color:var(--ink,#101014);transform:translateY(-1px)}
.hf-footer__social:focus-visible{outline:2px solid var(--data-blue,#2f6fb0);outline-offset:2px}
.hf-footer__social svg{flex:0 0 auto}

/* ==========================================================================
   QA RESPONSIVE : CIBLES TACTILES MOBILES (360 / 390 px)
   --------------------------------------------------------------------------
   hf.css est la seule feuille chargee par les 29 pages, et elle est chargee
   APRES le <style> de chaque page : c'est donc le seul endroit ou corriger en
   une fois les cibles tactiles inferieures a 44 px relevees au navigateur.
   Deux techniques :
   1. padding-block + margin-block negatif : agrandit la zone de tap SANS
      deplacer quoi que ce soit (le negatif annule le positif dans le flux).
      Sur un element inline, le padding vertical ne bouge deja pas la ligne.
   2. min-height / hauteur reelle quand la densite le permet (listes du pied).
   Les zones de tap voisines restent jointives, jamais superposees.
   ========================================================================== */
@media (max-width:560px){
  /* Logo d'en-tete : 100x28 -> 100x44, sans decaler la barre de 64px. */
  .hf-logo{padding-block:8px; margin-block:-8px;}

  /* Selecteur de langue du bandeau bas : 64x36 -> 64x44. */
  .hf-footer .hf-lang-toggle{height:44px;}

  /* Bouton LinkedIn : 231x34 -> 231x44. */
  .hf-footer__social{min-height:44px; padding-block:13px;}

  /* Colonnes de liens du pied : 24 liens de 17 px de haut, pas de 29 px.
     Chaque lien devient une rangee de 44 px, jointive et sans recouvrement. */
  .hf-footer__col ul{gap:0;}
  .hf-footer__col ul a{display:flex; align-items:center; min-height:44px;}
  .hf-footer__subs{gap:0 !important;}

  /* Repertoire (plan du site) : meme traitement, 18 -> 44 px. */
  .hf-footer__dirlist li{margin-bottom:0;}
  .hf-footer__dirlist a{display:flex; align-items:center; min-height:44px;}
  .hf-footer__dirall a{display:inline-flex; align-items:center; min-height:44px;}

  /* Adresse et coordonnees : seul l'email est cliquable, 164x18 -> 164x44. */
  .hf-footer__legal-lines a{display:inline-flex; align-items:center; min-height:44px;}

  /* ---- Composants definis dans le <style> des pages ---------------------
     Ces classes ne portent pas le prefixe hf-, mais elles sont partagees par
     plusieurs pages et leur CSS est duplique page par page : les corriger ici
     evite 29 retouches divergentes. Aucun changement visuel. */
  .btn, .slot{min-height:44px; box-sizing:border-box;}
  .skip{min-height:44px; display:inline-flex; align-items:center;}
  .announce__link{padding-block:4px; margin-block:-4px;}
  .tlink, .arrow-link, .sov__more, .mfaq__all, .testi-more,
  .phero__back, .phero__method, .pressto__mail, .replay, .msl__replay,
  .mani__dl, .faq-more a, .breadcrumb a, .crumb a{padding-block:16px; margin-block:-16px;}
  /* Sommaire repliable des pages longues et navigation d'ancres : vraies
     commandes, 36 et 32 px -> 44 px. */
  .toc__mob > summary{min-height:44px; display:flex; align-items:center;}
  .pnav a{min-height:44px;}
  /* Barre d'adresse des fenetres produit : elle etait comprimee a 71 px par
     le badge d'etat (« En production ») et n'affichait plus qu'un fragment
     d'URL. Elle prend desormais tout l'espace libre de la barre. */
  .window__bar{gap:10px; padding-inline:12px;}
  .window__url{flex:1 1 auto; min-width:0; max-width:none;}
  .window__tag, .window__live{flex:0 0 auto;}
  /* pastilles decoratives (aria-hidden) : 49 px rendus a l'adresse sous 480px */
  .window__dots{display:none;}

  /* Chips d'ancres du glossaire : 29 -> 44 px. */
  .toc a{display:inline-flex; align-items:center; min-height:44px;}
  /* Adresses e-mail et liens isoles de fiche (presse, recrutement) : le
     padding vertical d'un lien inline agrandit la zone de tap sans deplacer
     la ligne de texte. */
  a[href^="mailto:"], dd > a{padding-block:14px; margin-block:-14px;}
  /* Fleches et pastilles du slider de methode : 34 et 38 px -> 44 px. */
  .msl__arrow{width:44px; height:44px;}
  .msl__arrow svg{width:16px; height:16px;}
  .msl__dot{padding:7px;}
  .msl__nav{gap:8px;}
}