/* =========================================================
   ELYD - Socle commun a tout le site (charge par head.php, apres elyd-v2.css)
   Reprend sur toutes les pages ce qui a ete fait pour l'accueil :
   - la police Satoshi (la variable --elyd-font est dans elyd-v2.css) ;
   - le menu flottant en verre depoli ;
   - les grands titres "mixtes" : texte fin en gris, mots cles en blanc plus gras ;
   - le nom ELYD en tres grand au bas du pied de page.
   Le jaune reste reserve aux boutons.
   ========================================================= */

@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/satoshi-300.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/satoshi-700.woff2') format('woff2'); }

body.elyd-v2 {
    --hx-gutter: clamp(20px, 3.6vw, 50px);
    --hx-max: 1200px;
    --hx-nav-top: 14px;
    --hx-nav-h: 62px;
    --hx-sans: var(--elyd-font);
    --hx-nav-bg: rgba(14, 14, 9, .72);
    --hx-nav-solid: #0e0e09;
}
html[data-elyd-theme="light"] body.elyd-v2 {
    --hx-nav-bg: rgba(247, 244, 235, .72);
    --hx-nav-solid: #f7f4eb;
}

/* ============ MENU FLOTTANT (habillage de header.php) ============ */
body.elyd-v2 .header-area,
body.elyd-v2 .header-area.header--sticky,
html[data-elyd-theme="light"] body.elyd-v2 .header-area,
html[data-elyd-theme="light"] body.elyd-v2 .header-area.header--sticky {
    top: var(--hx-nav-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: min(calc(100% - 2 * var(--hx-gutter) + 24px), calc(var(--hx-max) + 24px));
    margin-inline: auto;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px;
    background-color: transparent !important;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-elyd-theme="light"] body.elyd-v2 .header-area,
html[data-elyd-theme="light"] body.elyd-v2 .header-area.header--sticky {
    border-color: rgba(0, 0, 0, .08) !important;
}
body.elyd-v2 .header-area::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--hx-nav-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    pointer-events: none;
}
/* Ombre une fois la page defilee (classe posee par le theme, ou par home.js sur l'accueil) */
body.elyd-v2 .header-area.header--sticky,
body.elyd-v2.hx-scrolled .header-area {
    box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .9);
}
html[data-elyd-theme="light"] body.elyd-v2 .header-area.header--sticky,
html[data-elyd-theme="light"] body.elyd-v2.hx-scrolled .header-area {
    box-shadow: 0 18px 50px -24px rgba(35, 32, 22, .28);
}
body.elyd-v2 .header-area.header-one .header-container-one { padding: 7px 8px 7px 22px !important; }
body.elyd-v2 .header-area .logo { display: flex; align-items: center; }
body.elyd-v2 .header-area .logo img {
    width: 108px; height: 46px;
    min-width: 0;
    object-fit: cover;
}
body.elyd-v2 .header-area.header-one .header-wrapper .header-right { gap: 10px; }
body.elyd-v2 .header-area.header-one .header-wrapper .header-right .nav-area { margin-right: clamp(10px, 2.6vw, 44px) !important; }
body.elyd-v2 .header-area.header-one .header-wrapper .header-right .nav-area ul li { margin-left: 14px !important; margin-right: 14px !important; }
body.elyd-v2 .header-area.header-one .header-wrapper .header-right .nav-area ul li > a { font-size: 14px !important; font-weight: 500; letter-spacing: -.01em; text-transform: none !important; }
body.elyd-v2 .header-area .nav-area ul.sub-menu.mega-menu { top: calc(100% + 18px) !important; }

@media (max-width: 767px) {
    body.elyd-v2 { --hx-nav-top: 10px; --hx-nav-h: 56px; }
    body.elyd-v2 .header-area.header-one .header-container-one { padding: 6px 16px 6px 14px !important; }
    body.elyd-v2 .header-area .logo img { width: 86px; height: 42px; }
    body.elyd-v2 .header-area.header-one .header-wrapper .header-right { gap: 8px; }
    body.elyd-v2 .header-area .elyd-theme-toggle { width: 40px; height: 40px; }
    body.elyd-v2 .header-area .header-right > .rts-btn.btn-primary-1 { height: 40px; padding: 0 12px !important; font-size: 13px !important; }
}
@media (max-width: 389px) {
    body.elyd-v2 .header-area .header-right > .rts-btn.btn-primary-1 .header-phone-icon { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
    body.elyd-v2 .header-area::before { background: var(--hx-nav-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    body.elyd-v2 .header-area::before { background: var(--hx-nav-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.elyd-v2 .header-area { box-shadow: 0 0 0 1px var(--elyd-silver); }
}

/* ============ GRANDS TITRES "MIXTES" ============
   Comme sur l'accueil : la phrase en gris et en trait fin, les mots mis en avant en blanc et plus gras.
   Un titre sans mot mis en avant reste blanc, en graisse moyenne. */
body.elyd-v2 :is(.hero-title, .v2-hero-title, .section-headline, .v2-section-title, .final-cta-headline, .section-h2, .merci-title, .legal-title, .ressources-page h1) {
    font-weight: 300;
    letter-spacing: -.03em;
    color: var(--elyd-silver);
}
body.elyd-v2 :is(.hero-title, .v2-hero-title, .section-headline, .v2-section-title, .final-cta-headline, .section-h2, .merci-title, .legal-title, .ressources-page h1) :is(.highlight, .neon, em, span) {
    font-weight: 500;
    font-style: normal;
    color: var(--elyd-white);
    background: none;
}
body.elyd-v2 :is(.hero-title, .v2-hero-title, .section-headline, .v2-section-title, .final-cta-headline, .section-h2, .merci-title, .legal-title, .ressources-page h1):not(:has(.highlight, .neon, em, span)) {
    font-weight: 500;
    color: var(--elyd-white);
}

/* ============ PIED DE PAGE : le nom en tres grand, coupe en bas, qui se fond dans le fond ============ */
body.elyd-v2 .rts-footer-area-one { overflow: hidden; }
body.elyd-v2 .rts-footer-area-one::after {
    content: "ELYD" / "";
    display: block;
    height: .78em;
    margin-top: clamp(24px, 4vw, 56px);
    font-family: var(--elyd-font);
    font-size: clamp(110px, 27vw, 420px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    text-align: center;
    background: linear-gradient(180deg, rgba(250, 251, 243, .1) 0%, rgba(250, 251, 243, 0) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    user-select: none;
}
html[data-elyd-theme="light"] body.elyd-v2 .rts-footer-area-one::after {
    background-image: linear-gradient(180deg, rgba(23, 22, 15, .08) 0%, rgba(23, 22, 15, 0) 85%);
}

/* ============ ETIQUETTES : neutres, le jaune reste aux boutons ============ */
body.elyd-v2 :is(.pack-badge, .pricing-badge, .v2-offer-badge) {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--elyd-border) !important;
    color: var(--elyd-white) !important;
    border-radius: 8px !important;
}
html[data-elyd-theme="light"] body.elyd-v2 :is(.pack-badge, .pricing-badge, .v2-offer-badge) {
    background: rgba(23, 22, 15, .05) !important;
}