/* ===========================================================================
* i-Assmat — Public pages (header, drawer mobile, sections génériques, footer)
* ---------------------------------------------------------------------------
* Feuille partagée par toutes les pages publiques (Index, Article, FAQ, Login).
* Contient :
* 1. NAV — header sticky avec backdrop blur
* 2. MOBILE BURGER MENU — drawer Alpine (overlay + drawer + bouton X)
* 3. SECTION HEADER générique (.lp-sec / .lp-sec-head / .lp-sec-eyebrow)
* 4. FOOTER marine identitaire
* 5. BACK TO TOP — bouton de retour en haut
* 6. PAGES ÉDITORIALES — Article / FAQ (layout v1-*, hero, breadcrumb,
* corps art-body, info-box, footnotes, CTA inline, aside complet)
* 7. RESPONSIVE — header / drawer / sections / footer
* Dépend de : ds/theme.css (variables, font-face, utilities signature)
* ds/components.css (.btn, .container, .lp-brand)
* Reference : docs/design_system.md (Ch.6.5 Bandeaux, Ch.6.4 Badges)
* =========================================================================== */
/* ============================================================================
* 1. NAV — header sticky avec backdrop blur
* ========================================================================== */
.lp-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--color-orange-100);
}
/* Hauteur desktop (≥1024px) confortable pour la marketing-page d'accueil.
Hauteur mobile (<1024px) compactée pour s'aligner sur la topbar privée
(cf. règles dans la section RESPONSIVE plus bas). */
.lp-nav-row { display: flex; align-items: center; gap: 32px; padding: 18px 0; }
.lp-nav-links { display: flex; gap: 12px; }
.lp-nav-links a {
font-size: 14.5px; color: var(--fg-muted);
padding: 8px 14px;
border-radius: 9999px;
transition: color .15s, background .15s;
white-space: nowrap;
}
/* Pill chaude au survol (cf. design system Ch.6.1 — accent orange doux) */
.lp-nav-links a:hover {
color: var(--fg-brand);
background: var(--color-orange-50);
}
/* Accessibilité clavier — même feedback visuel + ring marine (Ch.10) */
.lp-nav-links a:focus-visible {
outline: none;
color: var(--fg-brand);
background: var(--color-orange-50);
box-shadow: 0 0 0 2px var(--focus-ring);
}
.lp-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lp-link-quiet { font-size: 14.5px; color: var(--fg-muted); }
/* ============================================================================
* 2. MOBILE BURGER MENU
* Pattern Alpine :
*
* …
*
* ========================================================================== */
.lp-nav-mobile-toggle {
display: none;
background: none;
border: 1px solid var(--color-orange-200);
width: 44px; height: 44px;
border-radius: 9999px;
align-items: center; justify-content: center;
color: var(--fg-brand);
cursor: pointer;
margin-left: auto;
font-size: 18px;
}
.lp-nav-mobile-overlay {
position: fixed; inset: 0;
background: rgba(8, 57, 87, 0.4);
z-index: 60;
display: none;
}
.lp-nav-mobile-overlay.is-open { display: block; }
.lp-nav-mobile-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 86%; max-width: 320px;
background: #fff;
z-index: 70;
box-shadow: var(--shadow-2xl);
/* padding-top à 0 : c'est le .lp-nav-mobile-head qui apporte ses 12px,
pour que sa border-bottom s'aligne pixel-près avec celle de la topbar. */
padding: 0 22px 24px;
transform: translateX(100%);
transition: transform .3s var(--ease-out);
overflow-y: auto;
display: flex; flex-direction: column; gap: 4px;
}
.lp-nav-mobile-drawer.is-open { transform: translateX(0); }
/* Hauteur 64px (12 + 40 + 12) pour s'aligner sur la topbar et créer un
filet bas continu à l'ouverture du drawer. */
.lp-nav-mobile-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0;
margin-bottom: 8px;
border-bottom: 1px solid var(--color-orange-100);
}
/* Bouton de fermeture — cercle marine plein avec X blanc, pattern visuel
marqué pour bien signaler "fermer", conforme aux normes d'usage et adapté
au public CSP- fragile face au numérique.
Taille 40px (légèrement sous le seuil tactile WCAG 44px) pour que le bouton
ne dépasse pas la hauteur de la topbar et que les filets bas s'alignent. */
.lp-nav-mobile-close {
background: var(--fg-brand);
border: none;
cursor: pointer;
width: 40px; height: 40px;
border-radius: 9999px;
color: #fff; /* X blanc sur fond marine */
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
transition: background .15s, transform .15s, box-shadow .15s;
}
.lp-nav-mobile-close:hover {
background: var(--color-b-assmat-2);
transform: scale(1.05);
}
.lp-nav-mobile-close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--focus-ring);
}
.lp-nav-mobile-drawer a {
display: flex; align-items: center; gap: 12px;
padding: 14px 12px;
font-size: 16px; color: var(--fg-default);
border-radius: var(--radius-asym-tl) var(--radius-asym-tr) var(--radius-asym-br) var(--radius-asym-bl);
font-weight: 400;
transition: background .15s;
}
.lp-nav-mobile-drawer a:hover { background: var(--color-orange-50); color: var(--fg-brand); }
.lp-nav-mobile-drawer a.cta {
margin-top: 14px;
background: var(--fg-brand); color: #fff;
justify-content: center;
padding: 16px 20px;
font-weight: 500;
}
.lp-nav-mobile-drawer a.cta:hover { background: var(--color-b-assmat-2); }
/* ============================================================================
* 3. SECTION HEADER générique
* Pattern :
*
*
*
*
Surtitre
*
Titre en italique.
*
Lead descriptif…
*
* …contenu page…
*