/* ===== Helpdesk ElpisIA — premium ===== */
:root {
    --primary: #6a4cf0;
    --primary-dark: #5b3cf0;
    --ink: #1a1440;
    --text-gray: #5b6472;
    --bg-light: #f6f7ff;
    --radius-lg: 22px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg-light); line-height: 1.6; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
img { max-width: 100%; }

/* --- Navbar (verre, logo gauche / menu centré) --- */
.navbar { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 rgba(30,27,70,.06), 0 6px 24px rgba(30,27,70,.06); }
.nav-content { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; position: relative; }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.logo-img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }

/* ── Logo : respiration de la marque, et décalage vers la gauche ──
 *
 * Même animation que sur apps.elpisia.com : la marque de l'écosystème bat de la
 * même façon partout, plutôt qu'une variante par site.
 *
 * Au survol, l'animation est mise en PAUSE avant d'appliquer la rotation : sans
 * cela, les deux transformations se disputent le même logo et il tremble.
 *
 * Le décalage est une marge négative sur « .logo » seul. Réduire le padding du
 * « .container » l'aurait déplacé aussi — mais avec les liens et le bouton
 * d'appel, qui n'ont rien demandé. Réservé au-delà de 768 px : sur mobile, les
 * 2 rem de padding sont déjà la seule marge entre le logo et le bord de l'écran. */

.logo-img {
    animation: elpHdLogo 3.6s ease-in-out infinite;
    will-change: transform, filter;
}

@keyframes elpHdLogo {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(106, 76, 240, 0)); }
    50%      { transform: scale(1.07); filter: drop-shadow(0 3px 10px rgba(106, 76, 240, .5)); }
}

.logo:hover .logo-img {
    animation-play-state: paused;
    transform: scale(1.12) rotate(-5deg);
    transition: transform .3s ease;
}

@media (min-width: 768px) {
    .logo { margin-left: -1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-img { animation: none; }
    .logo:hover .logo-img { transform: none; transition: none; }
}
.logo-text { font-size: 1.4rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.logo-highlight { background: linear-gradient(135deg, #6a4cf0, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.logo-subtitle { font-size: .85rem; font-weight: 700; color: var(--primary); margin-left: .5rem; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
@media (min-width: 969px) {
    .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.nav-link { color: var(--text-gray); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .8rem; border-radius: 10px; transition: color .2s, background .2s; }
.nav-link:hover { color: var(--primary); background: rgba(106,76,240,.08); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border: 0; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, #6a4cf0, #a855f7); color: #fff; box-shadow: 0 8px 22px rgba(124,76,240,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(124,76,240,.5); }
.btn-large { padding: 1rem 2.2rem; font-size: 1.05rem; }
@media (max-width: 968px) { .nav-links .nav-link { display: none; } }

/* --- Hero --- */
.hero { text-align: center; padding: 5.5rem 0 4rem; background: radial-gradient(900px 420px at 50% -80px, rgba(124,110,240,.16), transparent 70%), var(--bg-light); }
.hero-badge { display: inline-block; background: #ece9ff; color: var(--primary); font-weight: 700; font-size: .85rem; padding: .5rem 1.15rem; border-radius: 999px; margin-bottom: 1.4rem; }
.hero-title { font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.12; }
.hero-accent { background: linear-gradient(90deg, #6a4cf0, #a855f7, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { max-width: 620px; margin: 1.2rem auto 0; color: var(--text-gray); font-size: 1.12rem; }

/* --- Sections --- */
.section-header { text-align: center; margin-bottom: 2.6rem; }
.section-label { display: inline-block; background: #ece9ff; color: var(--primary); font-weight: 800; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; padding: .45rem 1rem; border-radius: 999px; }
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 900; margin-top: .8rem; letter-spacing: -.02em; }

/* --- Cartes d'aide (dark premium, relief retina) --- */
.help { padding: 2.5rem 0 4rem; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.8rem; }
.help-card {
    position: relative; overflow: hidden; display: block; text-decoration: none;
    padding: 2rem 1.8rem 1.9rem; border-radius: var(--radius-lg); color: #fff;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 18px 44px rgba(20,16,50,.40), 0 5px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.help-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); pointer-events: none; }
.help-card > * { position: relative; z-index: 1; }
.help-card:hover { transform: translateY(-9px); }
.hc-dep  { background: linear-gradient(150deg, #351130 0%, #75205c 55%, #c33489 100%); }
.hc-form { background: linear-gradient(150deg, #12213f 0%, #1e3e75 55%, #3060b8 100%); }
.hc-shop { background: linear-gradient(150deg, #241663 0%, #4a2aa6 55%, #6d3bd6 100%); }
.hc-forum{ background: linear-gradient(150deg, #072a3d 0%, #0c4d68 55%, #1690b8 100%); }
.hc-dep:hover  { box-shadow: 0 28px 62px rgba(195,52,137,.5); }
.hc-form:hover { box-shadow: 0 28px 62px rgba(48,96,184,.5); }
.hc-shop:hover { box-shadow: 0 28px 62px rgba(109,59,214,.5); }
.hc-forum:hover{ box-shadow: 0 28px 62px rgba(22,144,184,.5); }
.hc-icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; border-radius: 15px; margin-bottom: 1.2rem;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.help-card h3 { font-size: 1.22rem; font-weight: 800; margin-bottom: .55rem; color: #fff; }
.help-card p { color: rgba(255,255,255,.82); font-size: .93rem; margin-bottom: 1.1rem; }
.hc-link { font-weight: 700; font-size: .92rem; color: #fff; opacity: .95; }

/* --- FAQ --- */
.faq { padding: 1.5rem 0 4.5rem; }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .9rem; }
.faq-item {
    background: #fff; border-radius: 16px; border: 1px solid rgba(122,110,240,.12);
    box-shadow: 0 2px 8px rgba(90,62,166,.05), 0 14px 34px rgba(90,62,166,.10);
    overflow: hidden; transition: box-shadow .3s ease;
}
.faq-item:hover { box-shadow: 0 4px 12px rgba(90,62,166,.08), 0 20px 44px rgba(90,62,166,.16); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 1.4rem; position: relative;
    font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #ece9ff; color: var(--primary); font-weight: 800; transition: transform .25s ease, background .25s, color .25s;
}
.faq-item[open] summary::after { content: "–"; background: var(--primary); color: #fff; }
.faq-item p { padding: 0 1.4rem 1.25rem; color: var(--text-gray); font-size: .96rem; }
.faq-cta { text-align: center; margin-top: 3rem; }
.faq-cta p { color: var(--text-gray); font-weight: 600; margin-bottom: 1rem; }
.faq-cta .btn-large { animation: hdCtaGlow 2.4s ease-in-out infinite; }
@keyframes hdCtaGlow { 0%,100% { box-shadow: 0 8px 24px rgba(124,76,240,.35); } 50% { box-shadow: 0 16px 42px rgba(168,85,247,.62); } }
@media (prefers-reduced-motion: reduce) { .faq-cta .btn-large { animation: none; } }

/* --- Footer --- */
.footer { background: #17132e; color: rgba(255,255,255,.85); padding: 2.6rem 0 2rem; margin-top: 2rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand { display: flex; align-items: center; gap: .7rem; font-weight: 700; color: #fff; }
.footer-logo { width: 38px; height: 38px; border-radius: 50%; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600; font-size: .93rem; transition: color .2s; }
.footer-links a:hover { color: #c4b5fd; }
.footer-copy { text-align: center; padding-top: 1.5rem; color: rgba(255,255,255,.92); font-weight: 500; font-size: .95rem; }
.ftr-heart { display: inline-block; filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 7px rgba(255,60,90,.85)) drop-shadow(0 0 16px rgba(255,60,90,.5)); animation: ftrHeartPulse 1.6s ease-in-out infinite; }
@keyframes ftrHeartPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .ftr-heart { animation: none; } }
.ftr-link { color: #fff; text-decoration: none; font-weight: 600; }
.ftr-link:hover { color: #c4b5fd; text-decoration: underline; }

/* ===== HD-V2 : centre d'aide façon Zendesk ===== */
.nav-cta-btn { margin-right: 0; }
@media (min-width: 969px) { .navbar .nav-cta-btn { margin-right: 108px; } }

/* Bandeau recherche */
.hd-hero {
    background: linear-gradient(140deg, #37246e 0%, #5b3cf0 55%, #7c3aed 100%);
    padding: 4.2rem 0 4.6rem; text-align: center; position: relative; overflow: visible;
}
.hd-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 320px at 78% -60px, rgba(255,255,255,.16), transparent 70%); pointer-events: none; }
.hd-hero .container { position: relative; }
.hd-badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: .85rem; padding: .45rem 1.05rem; border-radius: 999px; margin-bottom: 1.2rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hd-title { color: #fff; font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: 1.6rem; text-shadow: 0 4px 24px rgba(0,0,0,.22); }
.hd-search { position: relative; max-width: 640px; margin: 0 auto; }
.hd-search > svg { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; color: #6a4cf0; pointer-events: none; }
.hd-search input {
    width: 100%; border: 0; outline: 0; border-radius: 14px;
    padding: 1.15rem 1.3rem 1.15rem 3.1rem; font: inherit; font-size: 1.04rem; color: #1a1440;
    background: #fff; box-shadow: 0 18px 46px rgba(15,10,50,.35), 0 3px 10px rgba(15,10,50,.22);
    transition: box-shadow .25s ease, transform .25s ease;
}
.hd-search input::placeholder { color: #9a92bd; }
.hd-search input:focus { box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 22px 52px rgba(15,10,50,.4); transform: translateY(-1px); }
.hd-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50; text-align: left;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15,10,50,.35);
    padding: .45rem; display: none;
}
.hd-suggest.is-open { display: block; }
.hd-suggest a { display: block; padding: .7rem .9rem; border-radius: 10px; text-decoration: none; color: #1a1440; font-weight: 600; font-size: .95rem; }
.hd-suggest a:hover { background: #f1edff; color: #5b3cf0; }
.hd-hint { color: rgba(255,255,255,.85); font-size: .92rem; margin-top: 1.1rem; }

/* Base de connaissances */
.kb { max-width: 1020px; margin: 0 auto; padding: 2.6rem 2rem 1rem; min-height: 340px; }
.kb-h2 { font-size: 1.32rem; font-weight: 800; color: var(--ink); margin: 2.2rem 0 1.1rem; }
.kb-h2:first-child { margin-top: 0; }
.kb-h2.small { font-size: 1.1rem; }
.kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.kb-cat {
    display: flex; align-items: center; gap: 1rem; text-decoration: none;
    background: #fff; border: 1px solid #e8e6f7; border-radius: 16px; padding: 1.15rem 1.2rem;
    box-shadow: 0 2px 6px rgba(90,62,166,.05), 0 12px 28px rgba(90,62,166,.08);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.kb-cat:hover { transform: translateY(-4px); border-color: #c9bffb; box-shadow: 0 6px 14px rgba(90,62,166,.08), 0 20px 44px rgba(106,76,240,.18); }
.kb-cat-ico {
    flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; border-radius: 13px; background: linear-gradient(160deg, #f1edff, #e4dcff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(106,76,240,.14);
}
.kb-cat-ico.big { width: 62px; height: 62px; font-size: 30px; }
.kb-cat-body { flex: 1; min-width: 0; }
.kb-cat-body strong { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 800; }
.kb-cat-body em { display: block; font-style: normal; color: var(--text-gray); font-size: .85rem; margin-top: .15rem; }
.kb-count { display: inline-block; margin-top: .45rem; background: #f1edff; color: #5b3cf0; font-size: .72rem; font-weight: 800; padding: .18rem .6rem; border-radius: 999px; }
.kb-cat-arrow { color: #b6aee0; font-size: 1.5rem; font-weight: 700; }
.kb-pops { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .6rem; }
.kb-pop {
    display: flex; align-items: center; gap: .6rem; text-decoration: none;
    color: #33296b; font-weight: 600; font-size: .96rem; padding: .75rem .9rem;
    background: #fff; border: 1px solid #eceaf8; border-radius: 12px;
    transition: border-color .2s, background .2s, transform .2s;
}
.kb-pop:hover { border-color: #c9bffb; background: #faf9ff; transform: translateX(3px); color: #5b3cf0; }
.kb-pop-ico { flex: 0 0 auto; }

/* Vue catégorie / résultats */
.kb-bc { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .87rem; margin-bottom: 1.4rem; }
.kb-bc a { color: #6a4cf0; text-decoration: none; font-weight: 600; }
.kb-bc a:hover { text-decoration: underline; }
.kb-bc span { color: #6b6490; font-weight: 600; }
.kb-bc i { color: #b6aee0; font-style: normal; }
.kb-cat-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.kb-cat-head h1 { font-size: 1.6rem; font-weight: 900; color: var(--ink); }
.kb-cat-head p { color: var(--text-gray); font-size: .95rem; }
.kb-list { display: flex; flex-direction: column; gap: .55rem; }
.kb-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    text-decoration: none; color: #26205c; font-weight: 600; font-size: 1rem;
    background: #fff; border: 1px solid #eceaf8; border-radius: 12px; padding: .95rem 1.15rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.kb-row:hover { border-color: #c9bffb; transform: translateX(3px); box-shadow: 0 10px 24px rgba(106,76,240,.12); color: #5b3cf0; }
.kb-empty { color: var(--text-gray); }

/* Vue article */
.kb-article h1 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 900; color: var(--ink); margin-bottom: 1.2rem; letter-spacing: -.01em; }
.kb-body { background: #fff; border: 1px solid #eceaf8; border-radius: 18px; padding: 1.7rem 1.8rem; box-shadow: 0 2px 8px rgba(90,62,166,.05), 0 16px 38px rgba(90,62,166,.09); color: #2d2757; font-size: 1.0rem; line-height: 1.75; }
.kb-body p { margin-bottom: .9rem; }
.kb-body p:last-child { margin-bottom: 0; }
.kb-body ul, .kb-body ol { margin: .2rem 0 1rem 1.3rem; }
.kb-body li { margin-bottom: .4rem; }
.kb-body a { color: #5b3cf0; font-weight: 600; }
.kb-body code { background: #f1edff; padding: .1em .45em; border-radius: 6px; font-size: .92em; }
.kb-helpful { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; color: var(--text-gray); font-weight: 600; font-size: .95rem; }
.kb-vote { border: 1.5px solid #ded8f6; background: #fff; border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 700; color: #33296b; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.kb-vote:hover { border-color: #6a4cf0; background: #f6f3ff; transform: translateY(-1px); }
.kb-thanks { margin-top: 1.4rem; color: #0f9d58; font-weight: 700; }

/* Bandeau contact */
.hd-contact { padding: 2.6rem 0 3.4rem; }
.hd-contact-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
    background: linear-gradient(140deg, #37246e 0%, #5b3cf0 60%, #7c3aed 100%);
    border-radius: 22px; padding: 2rem 2.2rem;
    box-shadow: 0 22px 54px rgba(91,60,240,.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.hd-contact-card h2 { color: #fff; font-size: 1.35rem; font-weight: 800; }
.hd-contact-card p { color: rgba(255,255,255,.85); margin-top: .25rem; }
.hd-contact-card .btn-primary { background: #fff; color: #5b3cf0; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.hd-contact-card .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.3); }
@media (max-width: 640px) { .kb { padding: 2rem 1.2rem 1rem; } .hd-contact-card { justify-content: center; text-align: center; } }
/* /HD-V2 */


/* ===== ELP-NAV-ACTIVE ===== */
.nav-link.active { color: #5b3cf0; background: rgba(106,76,240,.12); }

/* ===== ELP-SOCIAL (04/08/2026) : 7 reseaux, identiques aux autres sites
   du groupe (styles repris de depannage.elpisia.com) ===== */
.social-links {
    display: flex;
    gap: 0.75rem;
}
.social-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.social-icon:hover {
    transform: translateY(-4px) scale(1.05);
}
.social-icon.youtube:hover {
    background: #FF0000;
}
.social-icon.facebook:hover {
    background: #1877F2;
}
.social-icon.tiktok:hover {
    background: linear-gradient(135deg, #69C9D0 0%, #EE1D52 100%);
}
.social-icon.linkedin:hover {
    background: #0077B5;
}
.social-icon.x:hover {
    background: #000000;
}
.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-icon.github:hover {
    background: #333333;
}
.social-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}
/* le footer du helpdesk empile son contenu : on centre la rangee */
.footer-copy + .social-links { justify-content: center; margin-top: 1rem; }
/* /ELP-SOCIAL */


/* Infolettre : mêmes dimensions que web.elpisia.com, la référence. */
.elp-news { padding-top: 1.1rem !important; padding-bottom: 1.05rem !important; }
.elp-news__t { margin-bottom: .3rem !important; }
.elp-news__s { margin-bottom: .85rem !important; }
.elp-news__m:empty { display: none !important; }
.elp-news__m { margin-top: .5rem !important; min-height: 0 !important; }
.elp-news__l { margin-top: .55rem !important; }

/* La loupe replacée dans la rangée de l'en-tête (voir helpdesk-app.js). */
.nav-content .elp-loupe { flex: 0 0 auto; margin-right: .75rem; }
@media (max-width: 968px) { .nav-content .elp-loupe { margin-left: auto; margin-right: .5rem; } }


/* ===== Pied de page sur le modèle de blog.elpisia.com (3 sept. 2026) =====
   Deux colonnes indépendantes : à gauche la marque puis l'infolettre, à droite
   les liens puis les réseaux. La barre du bas porte la mention centrée et le
   lien cookies tout à gauche, comme sur les autres sites du réseau. */
.elp-foot { background: #17132e; color: rgba(255,255,255,.85); padding: 2.6rem 0 1.4rem; margin-top: 2rem; }
.elp-foot__inner { max-width: 1188px; margin: 0 auto; padding: 0 1.5rem 1.8rem;
  display: flex; align-items: stretch; gap: 3rem; flex-wrap: wrap; }
.elp-foot__left  { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.elp-foot__right { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 2rem; }
.elp-foot__brand { display: flex; align-items: center; gap: .9rem; }
.elp-foot__logo  { width: 56px; height: 56px; border-radius: 50%; }
.elp-foot__name  { color: #fff; font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }
.elp-foot__name .eb-ia { color: #a78bfa; }
.elp-foot__suffix { color: #c4b5fd; font-weight: 700; }
.elp-foot__tag   { margin: .2rem 0 0; font-size: .92rem; color: rgba(255,255,255,.72); }

.elp-foot__cols { display: flex; gap: 3rem; flex-wrap: wrap; }
.elp-foot__col  { display: flex; flex-direction: column; gap: .55rem; }
.elp-foot__col h4 { margin: 0 0 .35rem; font-size: .76rem; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight: 700; }
.elp-foot__col a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .95rem; transition: color .2s ease; }
.elp-foot__col a:hover { color: #c4b5fd; }

.elp-social { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.elp-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; transition: background .2s ease, transform .2s ease; }
.elp-social a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.elp-social svg { width: 22px; height: 22px; }
.elp-social svg path { fill: #fff; }

/* L'infolettre dans la colonne de gauche : resserrée pour un pied de page,
   champ et bouton sur une seule ligne. */
.elp-foot .elp-news-wrap { margin: 0; max-width: none; }
.elp-foot .elp-news-wrap .elp-news { margin: 0 !important; max-width: none !important; width: 100% !important;
  padding: 1.25rem 1.4rem !important; }
.elp-foot .elp-news-wrap .elp-news__t { font-size: 1.26rem; margin-bottom: .35rem !important; }
.elp-foot .elp-news-wrap .elp-news__s { margin-bottom: .9rem !important; }
.elp-foot .elp-news-wrap .elp-news__m:empty { display: none !important; }
.elp-foot .elp-news-wrap .elp-news__m { min-height: 0 !important; margin: .45rem 0 0 !important; }
.elp-foot .elp-news-wrap .elp-news__l { margin: .4rem 0 0 !important; }
.elp-foot .elp-news-wrap .elp-news__row { flex-wrap: nowrap; }
.elp-foot .elp-news-wrap .elp-news__in { flex: 1 1 260px; min-width: 0; }
.elp-foot .elp-news-wrap .elp-news__b  { width: auto !important; flex: 0 0 auto; }

.elp-foot__bar { position: relative; max-width: 1188px; margin: 0 auto; padding: 1rem 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .92rem; color: rgba(255,255,255,.92); }
.elp-foot__legal { text-align: center; }
.elp-foot__legal .ftr-link { color: #fff; text-decoration: none; font-weight: 600; }
.elp-foot__cookies { position: absolute; left: 1rem; top: calc(50% + .5rem); transform: translateY(-50%);
  color: inherit; text-decoration: none !important; opacity: .6; font-size: .82rem; }
.elp-foot__cookies:hover { opacity: .95; }

@media (max-width: 900px) {
  .elp-foot__inner { flex-direction: column; gap: 1.5rem; }
  .elp-foot__right { gap: 1.25rem; }
  .elp-social { justify-content: center; }
  .elp-foot .elp-news-wrap .elp-news__row { flex-wrap: wrap; }
  .elp-foot .elp-news-wrap .elp-news__b { width: 100% !important; }
  .elp-foot__bar { flex-direction: column; text-align: center; padding-bottom: .6rem; }
  .elp-foot__cookies { position: static; transform: none; }
}

/* ===== ELP-AUDIT-VISUEL (13/10/2026) : liens de la barre sur iPad portrait et iPhone paysage,
   en-tête de l'iPhone en allemand, suggestions de recherche sur écran bas =====
   1) 769–968 px : « Accueil · Catégories · Dépannage » étaient masqués sous 969 px, sans menu de
      remplacement, alors que la barre a la place de les montrer → affichés, resserrés, entre le logo
      et la loupe. (Sous 769 px, faute de place et de menu, ils restent masqués : voir la fiche.)
   2) iPhone portrait (≤ 420 px), en allemand : « Schreiben Sie uns » repoussait la loupe sur « IA »
      du logo (32 px de recouvrement) → bouton et logo un peu resserrés.
   3) Écran bas (iPhone paysage) : la liste de suggestions commençait au bas de l'écran (une seule
      visible) → bandeau de recherche moins haut. */
@media (min-width: 769px) and (max-width: 968px) {
  .nav-links { margin: 0 auto; gap: .15rem; }
  .nav-links .nav-link { display: inline-block; padding: .45rem .6rem; font-size: .9rem; white-space: nowrap; }
}
@media (max-width: 420px) {
  .navbar .container { padding-left: 14px; padding-right: 14px; }
  .navbar .logo-text { font-size: 1.25rem; }
  .navbar .nav-cta-btn { padding: .6rem .85rem; font-size: .85rem; }
  .nav-content .elp-loupe { margin-right: .35rem; }
}
@media (max-height: 500px) {
  .hd-hero { padding: 1.6rem 0 2.2rem; }
  .hd-badge { margin-bottom: .6rem; }
  .hd-title { font-size: 1.7rem; margin-bottom: .9rem; }
}
/* /ELP-AUDIT-VISUEL */