/* ==========================================================================
   Purelec - le verre (Liquid Glass)
   Le verre vit sur la couche des commandes : navigation, barre d'appel mobile,
   lecture des prestations, légendes. Le reste du site est mat.
   Trois propriétés, rien d'autre :
   - il réfracte : le bord courbe ce qui passe dessous (Chromium, voir app.js),
     ailleurs un flou net tient lieu de matière ;
   - il capte la lumière : un liseré clair sur l'arête haute, jamais de halo ;
   - il s'adapte : clair sur fond clair, sombre sur fond sombre.
   ========================================================================== */

.verre{
  --t:9 28 58; --ta:.34; --at:var(--energie); --encre:var(--epure); --doux:#C0C9D6; --trait:rgb(255 255 255/.16); --bord:1.5px;
  position:relative;isolation:isolate;color:var(--encre);
  background:rgb(var(--t)/var(--ta));
  -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.06);
  backdrop-filter:var(--lentille,blur(18px) saturate(190%) brightness(1.06));
  /* Épaisseur : lumière qui entre par le haut, rebond clair en bas, ombre portée courte. */
  box-shadow:inset 0 1px 0 rgb(255 255 255/.32),inset 0 14px 22px -16px rgb(255 255 255/.22),inset 0 -12px 20px -14px rgb(255 255 255/.16),inset 0 0 0 .5px rgb(255 255 255/.1),
    0 1px 2px rgb(0 6 15/.2),0 18px 40px -18px rgb(0 6 15/.6);
  transition:background-color .5s var(--aise-sortie),color .4s var(--aise-sortie),transform .6s var(--ressort),box-shadow .5s;
}
/* Arête : le chant du verre accroche la lumière en haut à gauche et en bas à droite ;
   l'angle suit le pointeur, ou le défilement sur écran tactile. */
.verre::before{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:var(--bord);pointer-events:none;
  background:conic-gradient(from var(--lumiere,150deg) at 50% 50%,rgb(255 255 255/.95),rgb(163 196 243/.16) 14%,rgb(255 255 255/.05) 36%,rgb(163 196 243/.55) 50%,rgb(255 255 255/.08) 64%,rgb(255 255 255/.05) 86%,rgb(255 255 255/.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Reflet : une bande claire, à la pente du symbole, glisse dans l'épaisseur quand on bouge. */
.verre::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(127deg,transparent 30%,rgb(255 255 255/.13) 42%,rgb(255 255 255/.03) 52%,transparent 60%) no-repeat;
  background-size:260% 100%;background-position:var(--reflet,30%) 0;
}
html[data-t="clair"] .verre:not([data-verre]),html[data-t="blanc"] .verre:not([data-verre]),.verre[data-verre="clair"]{
  --t:255 255 255; --ta:.3; --at:var(--petrole); --encre:var(--petrole); --doux:#3F4C62; --trait:rgb(11 36 71/.14);
  box-shadow:inset 0 1px 0 #fff,inset 0 14px 22px -16px rgb(255 255 255/.7),inset 0 -12px 20px -14px rgb(255 255 255/.5),inset 0 0 0 .5px rgb(11 36 71/.08),
    0 1px 2px rgb(11 36 71/.08),0 18px 40px -20px rgb(11 36 71/.38);
}
html[data-t="clair"] .verre:not([data-verre])::before,html[data-t="blanc"] .verre:not([data-verre])::before,.verre[data-verre="clair"]::before{
  background:conic-gradient(from var(--lumiere,150deg) at 50% 50%,#fff,rgb(255 255 255/.55) 14%,rgb(11 36 71/.1) 36%,rgb(255 255 255/.9) 50%,rgb(255 255 255/.5) 64%,rgb(11 36 71/.1) 86%,#fff)}
html[data-t="energie"] .verre:not([data-verre]),.verre[data-verre="energie"]{--t:255 246 214;--ta:.3;--at:var(--petrole);--encre:var(--petrole);--doux:var(--petrole);--trait:rgb(11 36 71/.2)}
.verre[data-verre="sombre"]{--at:var(--energie);--t:9 28 58;--ta:.34;--encre:var(--epure)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .verre{--ta:.94}
}
@media (prefers-reduced-transparency:reduce){
  .verre{-webkit-backdrop-filter:none;backdrop-filter:none;--ta:.97}
  .verre::after{display:none}
}

/* ------------------------------------------------------------ Navigation */
.nav-ancre{position:sticky;top:0;height:0;z-index:100}
.nav{position:absolute;left:50%;top:10px;width:min(100% - 20px,1320px);margin-left:calc(min(100% - 20px,1320px)/-2);border-radius:30px;view-transition-name:navigation;
  transition:transform .7s var(--ressort-doux),background-color .4s var(--aise-sortie),color .35s var(--aise-sortie)}
.nav.est-cache{transform:translateY(calc(-100% - 90px))}
/* Gel : app.js fait varier --gel avec la vitesse du défilement, le verre s'étire à peine. */
.nav,.dock{scale:calc(1 - var(--gel,0)*.35) calc(1 + var(--gel,0))}
.nav[data-ouvert]{--ta:.78}
.nav[data-ouvert][data-verre="clair"]{--ta:.86}
.nav__barre{position:relative;display:grid;grid-template-columns:minmax(min-content,1fr) auto minmax(min-content,1fr);align-items:center;gap:6px;height:var(--nav-h);padding:0 16px 0 8px}

.nav__burger{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;justify-self:start;transition:background-color .25s,transform .5s var(--ressort)}
.nav__burger:hover{background:rgb(255 255 255/.1)}
.nav__burger:active{transform:scale(.9)}
.nav__burger-traits{position:relative;width:22px;height:12px}
.nav__burger-traits i{position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .5s var(--ressort),top .4s var(--aise),width .4s var(--aise)}
.nav__burger-traits i:first-child{top:0}
.nav__burger-traits i:last-child{top:10px;width:15px}
.nav[data-ouvert] .nav__burger-traits i:first-child{top:5px;transform:rotate(45deg)}
.nav[data-ouvert] .nav__burger-traits i:last-child{top:5px;width:22px;transform:rotate(-45deg)}

.nav__goutte-li{position:absolute;inset:0;pointer-events:none;list-style:none}
.nav__liens{position:relative;display:none;align-items:center;gap:2px;margin:0}
/* La goutte : une lentille de verre qui glisse sous le lien visé. */
/* La goutte ne couvre que le libellé : app.js la cale sur le texte, pas sur la zone cliquable. */
.nav__goutte{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;width:var(--gw,0);border-radius:var(--r-capsule);pointer-events:none;opacity:0;
  background:rgb(255 255 255/.14);box-shadow:inset 0 0 0 1px rgb(255 255 255/.22),inset 0 1px 0 rgb(255 255 255/.55);
  transform:translateX(var(--gx,0));
  transition:transform .55s var(--ressort),width .55s var(--ressort),opacity .25s}
.nav__goutte.est-visible{opacity:1}
.nav__goutte.est-tasse{transition-duration:.12s;transform:translateX(var(--gx,0)) scale(.95)}
.nav[data-verre="clair"] .nav__goutte{background:rgb(255 255 255/.9);box-shadow:inset 0 0 0 1px rgb(11 36 71/.06),0 4px 12px -6px rgb(11 36 71/.3)}

.nav__lien{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:0 .8em;border-radius:var(--r-capsule);font-size:.94rem;font-weight:500;text-decoration:none;white-space:nowrap}
.nav__lien[aria-current="page"]{font-weight:600}
.nav__lien .ico{transition:transform .45s var(--ressort)}
.nav__lien[aria-expanded="true"] .ico{transform:rotate(180deg)}
.nav__lien--bureau{display:none}
.nav__num{font-variant-numeric:tabular-nums;font-weight:600}

.nav__logo{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-radius:var(--r-capsule);text-decoration:none}
.nav__symbole{height:26px;width:auto;overflow:visible}
.nav__symbole .s-o,.nav__symbole .s-f{transition:transform .6s var(--ressort)}
.nav__logo:hover .s-o{transform:translateX(26px)}
.nav__logo:hover .s-f{transform:translateX(-14px)}
.nav__mot{height:13px;width:auto}

.nav__actions{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.nav__cta-devis{display:none}
.nav__cta-appel{--h:38px;padding:0 calc(var(--c) + .35em)}
.nav .btn{flex:none}

@media (min-width:1000px){
  .nav__barre{padding:0 18px 0 12px}
  .nav__burger{display:none}
  .nav__liens{display:flex}
  .nav__lien--bureau{display:inline-flex}
  .nav__cta-devis{--h:40px;display:inline-flex;margin-left:8px}
  .nav__cta-appel{display:none}
  .nav__symbole{height:30px}
  .nav__mot{height:15px}
}
/* Entre 1000 et 1239px, la place manque : le numéro reste dans le menu Prestations et en bas de page. */
@media (min-width:1000px) and (max-width:1239px){
  .nav__num{display:none}
  .nav__lien{padding:0 .62em;font-size:.9rem}
  .nav__mot{display:none}
}
@media (max-width:359px){.nav__mot{display:none}}

/* Panneau : la capsule elle-même s'agrandit pour révéler le menu. */
.nav__panneau{height:0;overflow:hidden;transition:height .55s var(--aise)}
.nav__panneau-in{overflow-y:auto;overscroll-behavior:contain;padding:2px 12px 14px;scrollbar-width:thin}
.menu{display:none}
.nav[data-ouvert="tout"] .menu--racine,
.nav[data-ouvert="prestations"] .menu--prestations,
.nav[data-ouvert="zones"] .menu--zones{display:block}
.nav[data-ouvert] .menu > *{animation:menu-entre .6s var(--ressort-doux) both;animation-delay:calc(var(--m,0)*35ms)}
@keyframes menu-entre{from{opacity:0;transform:translateY(-10px)}}

/* Mobile, niveau 1 : cinq lignes et un numéro. */
.menu--racine ul{margin:0}
.racine__lien{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 6px;text-decoration:none;text-align:left;
  font-family:var(--f-titre);font-weight:650;font-size:1.55rem;letter-spacing:-.03em;box-shadow:0 1px 0 rgb(255 255 255/.14)}
[data-verre="clair"] .racine__lien{box-shadow:0 1px 0 rgb(11 36 71/.12)}
.racine__lien .ico{width:18px;height:18px;transform:rotate(-90deg);opacity:.6}
.menu--racine li:last-child .racine__lien{box-shadow:none}
.racine__appel{width:100%;margin-top:14px}

/* Mobile, niveau 2 : retour, puis des noms, rien d'autre. */
.menu__retour{display:flex;align-items:center;gap:.6em;min-height:48px;padding:0 6px;font-weight:600;font-size:1rem}
.menu__retour::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(2px,-2px)}
.menu__famille-nom,.menu__court,.menu__urgence{display:none}
.menu__familles{display:block}
.menu__item,.menu__zone{display:flex;align-items:center;min-height:52px;padding:0 6px;text-decoration:none;box-shadow:0 1px 0 rgb(255 255 255/.12);transition:background-color .25s}
[data-verre="clair"] .menu__item,[data-verre="clair"] .menu__zone{box-shadow:0 1px 0 rgb(11 36 71/.1)}
.menu__famille ul{margin:0}
.menu__item[aria-current="page"] .menu__nom{color:var(--at)}
.menu__nom{display:block;font-weight:600;font-size:1.08rem;letter-spacing:-.012em}
.menu__zones{display:block;margin:0}
.menu__zone{justify-content:space-between;gap:12px}
.menu__zone strong{font-size:1.08rem;letter-spacing:-.012em}
.menu__zone span{font-size:.86rem;opacity:.6}

@media (min-width:1000px){
  .nav__panneau-in{padding:6px 16px 18px}
  .menu__retour{display:none}
  .menu__famille-nom,.menu__court,.menu__urgence{display:block}
  .nav[data-ouvert="prestations"] .menu--prestations{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:16px;align-items:stretch}
  .menu__familles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px}
  .menu__famille-nom{padding:8px 12px 6px;font-size:.8rem;font-weight:500;opacity:.58}
  .menu__item{display:block;min-height:0;padding:9px 12px;box-shadow:none}
  .menu__nom{display:inline-flex;align-items:center}
  .menu__nom::before,.menu__zone strong::before{content:"";flex:none;width:0;height:.5em;margin-right:0;background:var(--energie);transform:skewX(var(--pente));transition:width .45s var(--ressort),margin .45s var(--ressort)}
  .menu__item:hover .menu__nom::before,.menu__item:focus-visible .menu__nom::before,.menu__zone:hover strong::before,.menu__zone:focus-visible strong::before{width:.85em;margin-right:.5em}
  .menu__zone strong{display:inline-flex;align-items:center}
  .menu__item:hover .menu__court{opacity:.95}
  .menu__court{margin-top:2px;font-size:.86rem;opacity:.68;line-height:1.35}
  .menu__zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
  .nav[data-ouvert="zones"] .menu--zones{display:block}
  .menu__zone{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:54px;padding:8px 12px;box-shadow:none}
  .menu--prestations .menu__urgence{display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;padding:18px;text-decoration:none;color:var(--petrole);background:var(--energie);
    clip-path:polygon(24px 0,100% 0,100% 100%,0 100%);transition:background-color .25s}
  .menu__urgence:hover{background:var(--flamme)}
  .menu__urgence span{display:block;font-size:.9rem;font-weight:500}
  .menu__urgence strong{display:block;margin-top:6px;font-family:var(--f-titre);font-size:1.65rem;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
}

.nav-voile{position:fixed;inset:0;z-index:99;background:rgb(4 14 30/.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s var(--aise-sortie)}
.nav-voile.est-visible{opacity:1;pointer-events:auto}
html.menu-plein{overflow:hidden}

/* Barre d'actions mobile : les commandes descendent sous le pouce quand la navigation se retire. */
.dock{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:stretch;padding:0;overflow:hidden;border-radius:var(--r-capsule);transform:translate(-50%,calc(100% + 40px));transition:transform .75s var(--ressort-doux),background-color .4s,color .35s;white-space:nowrap;--ta:.42}
.dock.est-visible{transform:translate(-50%,0)}
.dock[data-verre="clair"]{--ta:.6}
.dock__btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:54px;padding:0 1.3em 0 1.5em;font-weight:600;font-size:.97rem;text-decoration:none;transition:transform .5s var(--ressort)}
.dock__btn:active{transform:scale(.96)}
.dock__btn--plein{--h:54px;--c:calc(var(--h)*.75);padding:0 calc(var(--c)*.9) 0 calc(var(--c) + .2em);background:var(--energie);color:var(--petrole);clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%);margin-left:-8px}
@media (min-width:1000px){.dock{display:none}}