/* Barre du haut en verre liquide façon Apple (02/10/2026), commune à toutes les pages qui ont <header id="hd">.
   Script associé : /nav-glass.js (déformation des bords sur Chrome/Android, reflet mobile, passage en sombre). */
/* ── Verre liquide : la barre ── */
header#hd.lg{position:sticky!important;top:calc(10px + env(safe-area-inset-top))!important;z-index:1000;isolation:isolate;
 background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10))!important;
 -webkit-backdrop-filter:blur(6px) saturate(1.9) brightness(1.06)!important;backdrop-filter:blur(6px) saturate(1.9) brightness(1.06)!important;
 border:0!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.28),inset 0 0 0 .5px rgba(255,255,255,.5),inset 0 0 24px rgba(255,255,255,.16),
  0 1px 2px rgba(15,23,42,.06),0 14px 36px -14px rgba(15,23,42,.30)!important;
 transition:background .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),padding .4s cubic-bezier(.16,1,.3,1)!important}
header#hd.lg.lens{-webkit-backdrop-filter:blur(6px) saturate(1.9) brightness(1.06)!important;backdrop-filter:url(#sf-lens) blur(2.2px) saturate(1.9) brightness(1.06)!important}
header#hd.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;pointer-events:none;z-index:2;
 background:linear-gradient(var(--lg-ang,125deg),rgba(255,255,255,.98),rgba(255,255,255,.25) 22%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 60%,rgba(255,255,255,.35) 82%,rgba(255,255,255,.85));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
header#hd.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:radial-gradient(160px 46px at var(--lg-x,28%) 0%,rgba(255,255,255,.65),transparent 72%),radial-gradient(120px 36px at calc(100% - var(--lg-x,28%)) 100%,rgba(255,255,255,.22),transparent 72%);
 transition:background .2s linear}
/* sombre au-dessus des zones sombres */
header#hd.lg.lg-dark{background:linear-gradient(180deg,rgba(15,23,42,.42),rgba(15,23,42,.26))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 0 .5px rgba(255,255,255,.18),inset 0 0 24px rgba(255,255,255,.05),0 14px 36px -14px rgba(0,0,0,.55)!important}
header#hd.lg.lg-dark::before{opacity:.55}
header#hd.lg.lg-dark::after{opacity:.35}
header#hd.lg .logo img,header#hd.lg .menu-toggle .bar,header#hd.lg .nav-pill a,header#hd.lg .nav-cmdk{transition:filter .4s,background-color .4s,color .4s,transform .3s cubic-bezier(.16,1,.3,1)}
header#hd.lg.lg-dark .logo img{filter:brightness(0) invert(1)}
header#hd.lg.lg-dark .menu-toggle .bar{background:#fff!important}
/* intérieur (ordinateur) : tout se fond dans le même verre */
header#hd.lg .nav-pill{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
header#hd.lg .nav-pill a{color:#334155}
header#hd.lg .nav-pill a:hover{background:rgba(255,255,255,.35)}
header#hd.lg .nav-pill a.active{color:#1C2738!important;background:rgba(255,255,255,.62)!important;box-shadow:inset 0 1px 0 #fff,0 4px 14px -6px rgba(15,23,42,.25)!important}
header#hd.lg .nav-cmdk{background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.55)!important;color:#475569!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
header#hd.lg.lg-dark .nav-pill a{color:rgba(255,255,255,.82)}
header#hd.lg.lg-dark .nav-pill a.active{color:#5EEAD4!important;background:rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important}
header#hd.lg.lg-dark .nav-cmdk{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important;color:rgba(255,255,255,.8)!important}
header#hd.lg .nav-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px -8px rgba(16,171,175,.7)!important}
header#hd.lg .menu-toggle{border-radius:14px}
header#hd.lg a:active,header#hd.lg .menu-toggle:active,header#hd.lg .nav-cmdk:active{transform:scale(.95)}
/* ordinateur : capsule flottante */
@media(min-width:1025px){
 header#hd.lg{margin:12px auto 0!important;width:calc(100% - 40px)!important;max-width:1240px;border-radius:26px!important;padding:6px 0!important}
 header#hd.lg.scrolled{padding:2px 0!important}
 header#hd.lg{background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.28))!important;-webkit-backdrop-filter:blur(12px) saturate(1.9) brightness(1.05)!important;backdrop-filter:blur(12px) saturate(1.9) brightness(1.05)!important}
 header#hd.lg.lens{backdrop-filter:url(#sf-lens) blur(9px) saturate(1.9) brightness(1.05)!important}
 header#hd.lg.lg-dark{background:linear-gradient(180deg,rgba(15,23,42,.55),rgba(15,23,42,.4))!important}
 header#hd.lg > .w{padding:0 14px 0 22px!important}
}
@media(max-width:1024px){header#hd.lg{border-radius:22px!important;margin:8px 12px 0!important}}
/* pages de tests : menu dans la barre */
header#hd.lg.lg-dark .mnav summary .bar{background:#fff!important}
/* réglage « réduire la transparence » : verre plein, lisible */
@media(prefers-reduced-transparency:reduce){header#hd.lg,header#hd.lg.lens{background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}header#hd.lg.lg-dark{background:rgba(15,23,42,.96)!important}}


/* ── Menu téléphone en verre liquide (02/10/2026) ── */
/* fond derrière le menu : on garde la page visible, sinon le verre n'a plus rien à réfracter */
body.lg-menu .menu-backdrop{background:rgba(15,23,42,.14)!important;-webkit-backdrop-filter:blur(1.5px)!important;backdrop-filter:blur(1.5px)!important}
/* ouverture : le panneau sort de la capsule, avec un léger rebond */
body.lg-menu .menu-drop{transform-origin:calc(100% - 34px) -14px;transform:translateY(-6px) scale(.9)!important;opacity:0;
 transition:transform .55s cubic-bezier(.32,1.28,.5,1),opacity .22s ease!important}
body.lg-menu.menu-open .menu-drop{transform:none!important;opacity:1}
/* la matière : même verre que la barre */
body.lg-menu .menu-drop .menu-card{position:relative;isolation:isolate;border-radius:28px!important;border:0!important;
 background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.5))!important;
 -webkit-backdrop-filter:blur(26px) saturate(2) brightness(1.05)!important;backdrop-filter:blur(26px) saturate(2) brightness(1.05)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 0 34px rgba(255,255,255,.2),0 34px 70px -26px rgba(15,23,42,.5),0 2px 6px rgba(15,23,42,.06)!important}
body.lg-menu .menu-drop .menu-card.lens{backdrop-filter:url(#sf-lens-menu) blur(22px) saturate(2) brightness(1.05)!important}
body.lg-menu .menu-drop::after{content:"";position:absolute;inset:0;border-radius:28px;padding:1.3px;pointer-events:none;z-index:3;
 background:linear-gradient(var(--lg-ang,125deg),rgba(255,255,255,.98),rgba(255,255,255,.25) 18%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(255,255,255,.4) 88%,rgba(255,255,255,.9));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
body.lg-menu .menu-drop::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;border-radius:28px 28px 0 0;pointer-events:none;z-index:2;
 background:radial-gradient(220px 70px at var(--lg-x,28%) 0%,rgba(255,255,255,.55),transparent 72%)}
/* lignes */
body.lg-menu .mc-nav{padding:10px 10px 6px!important}
body.lg-menu .mc-link,body.lg-menu .mc-toggle{position:relative;gap:14px!important;padding:10px 12px!important;border-radius:20px!important;color:#0F172A!important;
 font:600 16px/1.2 Poppins,sans-serif!important;transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s!important}
body.lg-menu .mc-t b{display:block;font-weight:600}
body.lg-menu .mc-t small{display:block;margin-top:3px;font:400 12.5px/1.3 Almarai,sans-serif;color:#64748B}
body.lg-menu .mc-ico{width:42px!important;height:42px!important;border-radius:14px!important;color:#0F172A!important;background:rgba(255,255,255,.62)!important;
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(255,255,255,.8),0 6px 14px -8px rgba(15,23,42,.35)}
body.lg-menu .mc-ico svg{width:19px!important;height:19px!important}
body.lg-menu .mc-link::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid #94A3B8;border-top:2px solid #94A3B8;transform:rotate(45deg);margin-right:6px;flex:none}
body.lg-menu .mc-link.active{background:rgba(255,255,255,.7)!important;box-shadow:inset 0 1px 0 #fff,0 8px 20px -12px rgba(15,23,42,.35)}
body.lg-menu .mc-link.active .mc-ico{background:#202C40!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 18px -8px rgba(32,44,64,.8)}
body.lg-menu .mc-link.active .mc-t b{color:#1C2738}
body.lg-menu .mc-link:active,body.lg-menu .mc-toggle:active{transform:scale(.975);background:rgba(255,255,255,.5)!important}
body.lg-menu .mc-arr{stroke:#94A3B8!important;margin-right:2px}
body.lg-menu .mc-sep{height:1px!important;background:linear-gradient(90deg,transparent,rgba(15,23,42,.12),transparent)!important;margin:6px 22px!important}
/* sous-menu Formations : un petit bloc de verre dans le verre */
body.lg-menu .mc-formations{margin:0 6px;border-radius:20px;background:rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
body.lg-menu.f-open .mc-formations{margin:2px 6px 8px;padding:6px 0}
body.lg-menu .mc-formations > a.mcx-all{margin:2px 8px 6px!important;border-radius:16px!important}
body.lg-menu .mc-formations > a.mcx-d{padding:8px 14px!important;margin:0 4px;border-radius:14px}
/* bas du menu : deux boutons côte à côte */
body.lg-menu .mc-bottom{flex-direction:row!important;gap:10px!important;padding:8px 12px 14px!important}
body.lg-menu .mc-phone,body.lg-menu .mc-doc{flex:1 1 0;min-width:0;border-radius:18px!important;padding:14px 10px!important;font:600 14px/1 Poppins,sans-serif!important;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1)!important}
body.lg-menu .mc-phone{background:rgba(255,255,255,.6)!important;color:#0F172A!important;box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(15,23,42,.35)}
body.lg-menu .mc-doc{background:#10ABAF!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 24px -12px rgba(16,171,175,.85)}
body.lg-menu .mc-phone:active,body.lg-menu .mc-doc:active{transform:scale(.96)}
/* entrée en cascade */
body.lg-menu.menu-open .mc-nav > *,body.lg-menu.menu-open .mc-bottom{animation:lgIn .5s cubic-bezier(.16,1,.3,1) both}
body.lg-menu.menu-open .mc-nav > :nth-child(1){animation-delay:.04s}body.lg-menu.menu-open .mc-nav > :nth-child(2){animation-delay:.08s}
body.lg-menu.menu-open .mc-nav > :nth-child(4){animation-delay:.12s}body.lg-menu.menu-open .mc-nav > :nth-child(5){animation-delay:.16s}
body.lg-menu.menu-open .mc-nav > :nth-child(6){animation-delay:.2s}body.lg-menu.menu-open .mc-bottom{animation-delay:.26s}
@keyframes lgIn{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){body.lg-menu .menu-drop{transition:opacity .2s!important;transform:none!important}body.lg-menu.menu-open .mc-nav > *,body.lg-menu.menu-open .mc-bottom{animation:none}}
/* menu des pages de tests (dans la barre) : même dessin, fond PLEIN — placé dans la barre, il ne peut pas flouter la page et laissait voir le texte derrière */
header#hd.lg .mnav-card{border:0!important;border-radius:26px!important;padding:10px!important;width:min(320px,calc(100vw - 32px))!important;
 background:linear-gradient(180deg,#fff,#FAFBFC)!important;transform-origin:calc(100% - 22px) -10px;
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(15,23,42,.06),0 30px 60px -24px rgba(15,23,42,.45)!important;animation:lgPop .5s cubic-bezier(.32,1.28,.5,1) both!important}
@keyframes lgPop{from{opacity:0;transform:translateY(-6px) scale(.9)}}
header#hd.lg .mnav-card a{justify-content:space-between;min-height:50px!important;border-radius:16px!important;font:600 16px/1.2 Poppins,sans-serif!important;color:#0F172A!important}
header#hd.lg .mnav-card a::after{content:"";width:7px;height:7px;border-right:2px solid #94A3B8;border-top:2px solid #94A3B8;transform:rotate(45deg);margin-right:4px;flex:none}
header#hd.lg .mnav-card a[aria-current]{background:rgba(32,44,64,.1);color:#1C2738!important}
header#hd.lg .mnav-card .mnav-tel{margin-top:8px!important;border-top:0!important;border-radius:16px!important;justify-content:center!important;background:rgba(15,23,42,.05);color:#0F172A!important}
header#hd.lg .mnav-card .mnav-tel::after{display:none}

/* ── Barre devis des pages formation (qb-) : verre givré lisible (02/10/2026) ──
   Le verre ci-dessus écrasait les fonds prévus pour la barre agrandie et le formulaire : texte de la page qui transparaissait. */
header#hd.lg.qb-on{background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.66))!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.04)!important;backdrop-filter:blur(22px) saturate(1.8) brightness(1.04)!important}
header#hd.lg.lens.qb-on{backdrop-filter:url(#sf-lens) blur(22px) saturate(1.8) brightness(1.04)!important}
header#hd.lg.lg-dark.qb-on:not(.qb-form){background:linear-gradient(180deg,rgba(11,17,32,.80),rgba(11,17,32,.68))!important}
header#hd.lg.lg-dark:not(.qb-form) .qb-ctx-t b{color:#F8FAFC}
header#hd.lg.lg-dark:not(.qb-form) .qb-ctx-t span{color:rgba(226,232,240,.62)}
header#hd.lg.lg-dark:not(.qb-form) .qb-rail-in::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 22%,rgba(255,255,255,.14) 78%,transparent)}
/* formulaire ouvert : feuille quasi opaque, toujours claire, le verre reste sur le contour */
header#hd.lg.qb-form,header#hd.lg.lg-dark.qb-form{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.93))!important;
 -webkit-backdrop-filter:blur(30px) saturate(1.6)!important;backdrop-filter:blur(30px) saturate(1.6)!important;
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(255,255,255,.7),0 40px 90px -30px rgba(2,6,23,.65),0 2px 8px rgba(2,6,23,.10)!important}
header#hd.lg.lens.qb-form{backdrop-filter:url(#sf-lens) blur(30px) saturate(1.6)!important}
header#hd.lg.qb-form::before{opacity:1!important}
header#hd.lg.qb-form .logo img{filter:none!important}
header#hd.lg.qb-form .menu-toggle .bar{background:#0F172A!important}
html body .qb-veil{background:rgba(11,17,32,.52);-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9)}
html body .qb-sub{color:#64748B}
html body .qb-lb{color:#475569}
html body .qb-consent{color:#64748B}
html body .qb-f input,html body .qb-f select,html body .qb-f textarea{border-color:rgba(15,23,42,.12)}
/* fin de la zone qui défile : fondu par masque (plus de bande blanche qui « coupe » un champ) + repère */
.qb-more{display:none;align-items:center;justify-content:center;gap:6px;margin:-6px 0 2px;font:600 11px/1 Almarai,sans-serif;color:#94A3B8;letter-spacing:.02em}
.qb-more svg{width:12px;height:12px;stroke:#94A3B8;fill:none;stroke-width:2.4;stroke-linecap:round;animation:qbMore 1.6s ease-in-out infinite}
@keyframes qbMore{50%{transform:translateY(2px)}}
@media(max-width:1024px){
 html body .qb-foot::before{display:none}
 html body .qb-scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent);padding-bottom:14px}
 html body .qb-scroll.qb-end{-webkit-mask-image:none;mask-image:none}
 html body .qb-foot{border-top-color:rgba(15,23,42,.08)}
 .qb-more{display:flex}
 .qb-scroll.qb-end ~ .qb-more{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.qb-more svg{animation:none}}