/* ============================================================================
V1.28.0 — Module 112 : sous-menu « Expertises » de la navigation principale.
POURQUOI UN MODULE OPT-IN, HORS main.css
Le manifeste main.css et ses @import ne sont pas touchés par cette release
(décision de lot). Le module suit donc le précédent du module 109 : une
feuille chargée par un , pas un lien — elle n'a pas de page à elle, elle ouvre cinq
destinations qui, elles, ont chacune la leur.
· Les cinq liens du sous-menu sont dans le HTML servi, sans nofollow et sans
injection JavaScript : ils sont crawlables même si le panneau est replié.
· Desktop : ouverture au clic ET au clavier. Le survol n'ouvre RIEN quand le
JavaScript est actif ; il n'est un repli que sur html.no-js, où le clic est
impossible — et il y est doublé de :focus-within, donc jamais réservé à la
souris.
· Mobile (≤1080px) : accordéon dans le panneau plein écran, cibles ≥ 44 px,
aucun débordement horizontal.
· prefers-reduced-motion : plus aucune transition, l'état reste exact.
========================================================================== */
/* ---------- 1. L'entrée de premier niveau ---------- */
.nav-group{position:relative;display:inline-flex;align-items:center}
/* Le bouton reprend EXACTEMENT la grammaire de .nav-links a (module 00, puis
104) : même taille, même graisse, même gris, même soulignement doré. Une
entrée de menu ne doit pas se lire comme un contrôle d'interface. */
.nav-group-btn{
appearance:none;border:0;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;gap:.34rem;
font:inherit;font-size:.85rem;font-weight:500;font-family:inherit;
color:var(--grey);position:relative;padding:.38rem .04rem;
text-shadow:0 1px 10px rgba(0,0,0,.34);
transition:color .3s;
}
.nav-group-btn::after{
content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;
background:var(--gold);transition:width .45s var(--ease);
}
.nav-group-btn:hover{color:var(--ink)}
.nav-group-btn:hover::after{width:100%}
.nav-group-btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
/* Ouvert, ou portant la page courante : même signal actif que les liens. */
.nav-group.is-open>.nav-group-btn,
.nav-group.has-current>.nav-group-btn{color:#fff}
.nav-group.is-open>.nav-group-btn::after,
.nav-group.has-current>.nav-group-btn::after{
width:100%;height:2px;border-radius:999px;box-shadow:0 0 12px rgba(255,213,98,.4);
}
.nav-group-caret{
width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);
}
.nav-group.is-open>.nav-group-btn>.nav-group-caret{transform:translateY(1px) rotate(-135deg)}
/* ---------- 2. Le panneau, desktop ---------- */
.nav-submenu{
position:absolute;top:calc(100% + 1.1rem);left:50%;transform:translate(-50%,-6px);
z-index:99;display:flex;flex-direction:column;gap:.1rem;
min-width:19rem;padding:.6rem;
border:1px solid rgba(255,255,255,.1);border-radius:16px;
background:
radial-gradient(120% 80% at 50% 0%,rgba(255,213,98,.06),transparent 60%),
linear-gradient(170deg,rgba(17,18,23,.97),rgba(7,7,10,.96));
-webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);
box-shadow:0 20px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
visibility:hidden;opacity:0;pointer-events:none;
transition:opacity .2s ease,transform .26s var(--ease),visibility 0s linear .26s;
}
/* Pont invisible entre l'entrée et le panneau : sans lui, un curseur qui
descend vers le premier lien traverse un vide et referme le panneau. */
.nav-submenu::before{content:"";position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem}
.nav-group.is-open>.nav-submenu{
visibility:visible;opacity:1;pointer-events:auto;transform:translate(-50%,0);
transition:opacity .2s ease,transform .26s var(--ease);
}
/* min-height:44px sur DESKTOP aussi, pas seulement sur mobile : les portables
tactiles sont servis par la mise en page desktop, et un lien de 37 px y est
une cible au doigt trop courte. Le coût est nul au pointeur fin. */
.nav-links .nav-submenu a{
display:flex;align-items:center;min-height:44px;
padding:.55rem .85rem;border-radius:10px;
font-size:.85rem;font-weight:500;line-height:1.3;color:var(--grey);
white-space:normal;transition:color .25s,background-color .25s;
}
.nav-links .nav-submenu a::after{display:none}
.nav-links .nav-submenu a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-links .nav-submenu a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;background:rgba(255,255,255,.06)}
.nav-links .nav-submenu a[aria-current="page"]{color:var(--gold)}
/* Repli sans JavaScript : le bouton ne peut pas être actionné, le panneau
s'ouvre donc au survol ET au focus clavier. Jamais au survol seul. */
html.no-js .nav-group:hover>.nav-submenu,
html.no-js .nav-group:focus-within>.nav-submenu{
visibility:visible;opacity:1;pointer-events:auto;transform:translate(-50%,0);
transition:none;
}
/* ---------- 3. Le panneau, mobile : accordéon ---------- */
@media(max-width:1080px){
.nav-group{display:flex;flex-direction:column;align-items:center;width:min(440px,100%)}
.nav-group-btn{
width:100%;min-height:44px;justify-content:center;padding:.62rem 1rem;border-radius:14px;
font-family:var(--display);font-weight:300;font-size:clamp(1.55rem,6.2vw,2.15rem);
letter-spacing:-.02em;line-height:1.22;color:#e7e9ee;
opacity:0;transform:translateY(14px);
transition:opacity .3s ease,transform .34s var(--ease),color .3s;
}
.nav-links.open .nav-group-btn{opacity:1;transform:none;transition-delay:.12s}
.nav-group-btn::after{display:none}
.nav-group.has-current>.nav-group-btn{color:var(--gold)}
.nav-group-caret{width:.5rem;height:.5rem;border-width:2px}
/* L'accordéon replié ne réserve aucune hauteur ; déplié, il pousse le reste
du panneau, qui défile déjà (overflow-y:auto du module 90). */
.nav-submenu{
position:static;transform:none;left:auto;top:auto;
width:100%;min-width:0;max-width:100%;
margin:0;padding:0;gap:0;
border:0;border-radius:0;background:none;box-shadow:none;
-webkit-backdrop-filter:none;backdrop-filter:none;
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .28s var(--ease),opacity .2s ease;
opacity:0;visibility:hidden;pointer-events:none;
}
.nav-submenu::before{display:none}
.nav-group.is-open>.nav-submenu{
grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
/* Le conteneur de grille masque le débordement pendant l'animation ; les
liens vivent dans une piste de hauteur animée. */
.nav-submenu>a{min-height:0}
.nav-links .nav-submenu a{
display:flex;align-items:center;justify-content:center;
width:100%;min-height:44px;padding:.45rem 1rem;text-align:center;
font-family:var(--text);font-weight:400;font-size:1rem;line-height:1.25;
color:#c8ccd6;border-radius:12px;opacity:1;transform:none;
}
/* grid-template-rows:0fr n'écrase la piste que si l'enfant direct ne peut
pas déborder : une seule piste, overflow caché. */
.nav-submenu{overflow:hidden}
}
/* Panneau plein écran en paysage court : le module 106 met le menu sur deux
colonnes ; le groupe et son accordéon occupent la largeur entière. */
@media (max-width:1080px) and (max-height:560px) and (orientation:landscape){
html body #nav .nav-links .nav-group{grid-column:1/-1;width:100%}
html body #nav .nav-links .nav-group-btn{font-size:clamp(1rem,4.6vh,1.34rem);padding:.28rem .7rem}
html body #nav .nav-links .nav-submenu a{font-size:clamp(.9rem,3.8vh,1.05rem);min-height:44px}
}
/* Sans JavaScript sur mobile : rien de nouveau ne doit être masqué. */
html.no-js .nav-submenu{grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto}
/* ---------- 4. Cadence d'apparition du panneau mobile ---------- */
/* Le groupe s'intercale en quatrième position : les délais nth-child du module
90 ne visent plus les bonnes entrées. Ils sont repris ici pour la structure
réelle (trois liens, le groupe, quatre liens). */
@media(max-width:1080px){
.nav-links.open>a:nth-child(1){transition-delay:.03s}
.nav-links.open>a:nth-child(2){transition-delay:.06s}
.nav-links.open>a:nth-child(3){transition-delay:.09s}
.nav-links.open>a:nth-child(5){transition-delay:.15s}
.nav-links.open>a:nth-child(6){transition-delay:.18s}
.nav-links.open>a:nth-child(7){transition-delay:.22s}
.nav-links.open>a:nth-child(8){transition-delay:.25s}
.nav-links .nav-submenu a{transition-delay:0s!important}
}
/* ---------- 5. Mouvement réduit et couleurs forcées ---------- */
@media(prefers-reduced-motion:reduce){
.nav-group-btn,.nav-group-btn::after,.nav-group-caret,
.nav-submenu,.nav-links .nav-submenu a{transition:none!important}
.nav-submenu{transform:translate(-50%,0)}
.nav-group.is-open>.nav-submenu{transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce) and (max-width:1080px){
.nav-group-btn{opacity:1;transform:none}
.nav-submenu,.nav-group.is-open>.nav-submenu{transform:none}
}
@media (forced-colors:active){
.nav-submenu{border:1px solid CanvasText;background:Canvas}
.nav-group-btn{color:LinkText}
}