/* ==========================================================================
   HELIOS ENGINEERING GROUP — Header, méga-panneau, recherche, menu mobile
   --------------------------------------------------------------------------
   Porté depuis le prototype « Helios Engineering Template/assets/css/style.css »
   (ADR-0007 : réutilisation directe). Le bloc header (survol, état .is-solid,
   .searchbar, .mega, .mnav) est repris VERBATIM. Ajouts Lot 2, tous préfixés
   d'un commentaire « (+) » : lien d'évitement, classe utilitaire lecteur d'écran,
   révélations sans JS (`.no-js`), accordéon mobile natif `<details>`, verrou de
   défilement du body. Enfilée avec `helios-base` en dépendance.
   ========================================================================== */

/* --------------------------------------------------- (+) a11y utilitaires -- */
/* Lien d'évitement (README §12) — invisible jusqu'au focus. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;
  font-family:var(--sans);font-size:14px;font-weight:700;
}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--orange);outline-offset:2px;}

/* Texte réservé aux lecteurs d'écran (libellés de champs, etc.). */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;
  position:absolute;word-wrap:normal !important;
}

/* ======================================================== header ========= */
.hdr{position:sticky;top:0;z-index:80;background:transparent;border-bottom:1px solid rgba(255,255,255,.18);transition:background .35s ease,border-color .35s ease;}
.hdr__bar{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:var(--hdr-h);display:flex;align-items:center;gap:clamp(12px,2vw,32px);}
.hdr__nav{display:flex;align-items:stretch;height:100%;gap:clamp(10px,1.6vw,26px);flex-shrink:0;}
.hdr__item{display:flex;align-items:center;flex-shrink:0;}
.hdr__link{position:relative;display:flex;align-items:center;height:100%;padding:0 2px;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:600;letter-spacing:.005em;white-space:nowrap;color:#fff;transition:color .3s ease;}
.hdr__link:hover{color:var(--orange);}
.hdr__mark{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--orange);display:block;opacity:0;transition:opacity .3s ease;}
.hdr__item.is-open .hdr__mark,.hdr__link.is-current .hdr__mark{opacity:1;}
.hdr__burger{width:48px;height:48px;border:1px solid #fff;background:transparent;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex-shrink:0;}
.hdr__burger span{width:20px;height:2px;background:#fff;display:block;}
.hdr__burger span:nth-child(2){background:var(--orange);}
.hdr__search{width:48px;height:48px;border:1px solid transparent;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hdr__search:hover{border-color:var(--orange);}
.hdr__ring{width:15px;height:15px;border:2px solid #fff;border-radius:50%;display:block;position:relative;}
.hdr__ring i{position:absolute;right:-7px;bottom:-5px;width:9px;height:2px;background:#fff;display:block;transform:rotate(45deg);}
.hdr__cta{display:inline-flex;align-items:center;height:48px;padding:0 22px;background:var(--orange);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:all .3s ease;flex-shrink:0;}
.hdr__cta:hover{background:var(--ink);color:#fff;}
.hdr__logo{position:relative;margin-left:auto;display:flex;align-items:center;flex-shrink:0;}
.hdr__logo img{height:clamp(38px,4vw,52px);width:auto;display:block;transition:opacity .35s ease;}
.hdr__logo img[data-hdr-logo="dark"]{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;}

.hdr.is-solid{background:#fff;border-bottom-color:var(--line);}
.hdr.is-solid .hdr__link,.hdr.is-solid .hdr__cta:hover{color:var(--ink);}
.hdr.is-solid .hdr__link:hover{color:var(--orange);}
.hdr.is-solid .hdr__burger{border-color:var(--ink);}
.hdr.is-solid .hdr__burger span{background:var(--ink);}
.hdr.is-solid .hdr__burger span:nth-child(2){background:var(--orange);}
.hdr.is-solid .hdr__ring{border-color:var(--ink);}
.hdr.is-solid .hdr__ring i{background:var(--ink);}
.hdr.is-solid .hdr__logo img[data-hdr-logo="light"]{opacity:0;}
.hdr.is-solid .hdr__logo img[data-hdr-logo="dark"]{opacity:1;}
.hdr.is-solid .hdr__cta{background:var(--orange);color:#fff;}

/* (+) le burger et l'anneau sont des liens de bascule (<a href="#…">) : neutraliser
   le style de lien global, garder la présentation d'icône du prototype. */
.hdr__burger,.hdr__search{text-decoration:none;color:inherit;}
.hdr__burger:hover{color:inherit;}

/* search bar */
.searchbar{display:none;border-top:1px solid var(--line);background:#fff;}
.searchbar.is-open{display:block;}
.searchbar__in{max-width:var(--wrap);margin:0 auto;padding:clamp(16px,2vw,26px) var(--pad);display:flex;align-items:center;gap:14px;}
.searchbar input{flex:1;min-width:0;height:56px;padding:0 18px;border:1px solid var(--line-soft);background:var(--grey-soft);font-family:inherit;font-size:15px;color:var(--ink);outline:none;}
/* Même défaut, même correctif qu'au formulaire (Lot 9) : `outline:none`
   porté du prototype écrasait le contour du socle. */
.searchbar input:focus{border-color:var(--orange);}
.searchbar input:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.searchbar__go{height:56px;padding:0 26px;border:0;background:var(--orange);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;}
.searchbar__go:hover{background:var(--ink);}
.searchbar__close{width:56px;height:56px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:18px;cursor:pointer;}
.searchbar__close:hover{background:var(--ink);color:#fff;}

/* mega panel */
/* (+) le .mega est désormais imbriqué dans son .hdr__item (voir plus bas) plutôt
   que frère direct de .hdr comme dans le prototype — accepté en revue (Cowork,
   2026-09-08) : .hdr__item n'est PAS positionné et .hdr est `position:sticky`,
   donc le bloc conteneur de `.mega{position:absolute}` reste `.hdr` et le rendu
   est identique. CONTRAINTE À TENIR : ne jamais poser `position:relative` sur
   `.hdr__item`/`.hdr__bar` ni `overflow:hidden` sur `.hdr`, sous peine de
   recaler le méga sur le mauvais conteneur. */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:3px solid var(--orange);box-shadow:0 34px 70px rgba(21,26,31,.42);overflow:hidden;}
.mega.is-open{display:block;}
.mega__img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;}
.mega__veil{position:absolute;inset:0;background:linear-gradient(90deg,#20272E 0%,rgba(32,39,46,.9) 58%,rgba(32,39,46,.7) 100%);}
.mega__in{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(28px,3.2vw,52px) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,64px);}
.mega__left{max-width:440px;}
.mega__title{font-size:clamp(22px,2.2vw,32px);font-weight:800;line-height:1.1;letter-spacing:-.018em;color:#fff;}
.mega__lead{margin-top:16px;font-size:clamp(14.5px,1.15vw,17px);font-weight:700;line-height:1.4;color:#fff;}
.mega__text{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--light);}
.mega__list{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(20px,2.6vw,48px);display:grid;align-content:start;}
.mega__link{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 6px;color:#fff;font-size:clamp(15px,1.25vw,18px);font-weight:500;border-bottom:1px solid rgba(255,255,255,.1);transition:color .3s ease,padding-left .3s ease;}
.mega__link:hover{color:var(--orange);padding-left:14px;}
.mega__link i{color:var(--orange);flex-shrink:0;font-style:normal;}

/* (+) le méga-panneau est désormais imbriqué dans son .hdr__item (a11y + sans JS).
   Sans JS : révélation au survol (souris) et au focus clavier. Avec JS,
   header.js pilote l'ouverture via .is-open et gère Échap + renvoi de focus. */
.no-js .hdr__item:hover > .mega,
.no-js .hdr__item:focus-within > .mega{display:block;}
.mega__text p{margin:0;}
.mega__text p + p{margin-top:10px;}

/* mobile nav */
.mnav{display:none;position:fixed;left:0;right:0;top:var(--hdr-h);bottom:0;z-index:90;background:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mnav.is-open{display:block;}
.no-js .mnav:target{display:block;} /* (+) repli sans JS : ouverture par ancre (#site-mnav) */
.mnav__in{padding:8px clamp(16px,5vw,32px) 32px;}
.mnav__group{border-bottom:1px solid rgba(255,255,255,.14);}
.mnav__head{width:100%;min-height:60px;padding:0;border:0;background:transparent;color:#fff;font-size:16.5px;font-weight:600;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;}
.mnav__sign{font-size:24px;font-weight:300;line-height:1;color:var(--orange);flex-shrink:0;}
.mnav__panel{display:none;padding:0 0 14px;gap:2px;}
.mnav__group.is-open .mnav__panel{display:grid;}
.mnav__panel a{display:flex;align-items:center;min-height:48px;padding-left:14px;border-left:2px solid rgba(234,85,43,.5);color:var(--light);font-size:14.5px;}
.mnav__panel a:hover{color:#fff;border-left-color:var(--orange);}
.mnav__flat{display:flex;align-items:center;min-height:60px;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;font-size:16.5px;font-weight:600;}
.mnav__cta{margin-top:22px;display:flex;align-items:center;justify-content:center;height:58px;background:var(--orange);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.mnav__place{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-3);}
.mnav__tel{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:17px;font-weight:800;}

/* (+) accordéon mobile natif : <summary class="mnav__head"> + <details class="mnav__group">.
   Fonctionne sans JS ; header.js ne fait que synchroniser aria-expanded. */
.mnav__head{list-style:none;}
.mnav__head::-webkit-details-marker{display:none;}
.mnav__sign::before{content:"+";}
details.mnav__group[open] > .mnav__head .mnav__sign::before{content:"\2212";}
details.mnav__group[open] > .mnav__panel{display:grid;}

/* (+) bouton de fermeture du menu mobile — utile uniquement sans JS (ancre :target).
   Avec JS, le burger referme le panneau comme dans le prototype. */
.mnav__dismiss{display:none;position:absolute;right:clamp(16px,5vw,32px);top:12px;width:44px;height:44px;align-items:center;justify-content:center;color:#fff;text-decoration:none;}
.mnav__dismiss::before{content:"\2715";font-size:20px;line-height:1;}
.no-js .mnav__dismiss{display:flex;}
.no-js .mnav__in{padding-top:56px;}

/* (+) verrou de défilement quand le menu mobile est ouvert (JS ajoute .has-mnav). */
body.has-mnav{overflow:hidden;}

/* ==================================================== media queries ====== */
@media (max-width:1180px){.hdr__cta{display:none;}}
@media (max-width:1079px){
  .hdr__nav{display:none;}
  .hdr__burger{display:flex;}
}
@media (max-width:980px){
  .mega__in{grid-template-columns:minmax(0,1fr);}
}