/* =========================================================
   FSCare — Feuille de style principale
   Palette médicale (bleu profond + cyan), typographie Sora/Inter
   ========================================================= */

:root {
    --navy:        #0a2540;
    --navy-700:    #0d2e4f;
    --blue:        #0e63b3;
    --blue-600:    #0c579c;
    --blue-700:    #094a86;
    --cyan:        #17b3c4;
    --cyan-soft:   #e6f7f9;
    --red:         #e23b4e;
    --ink:         #1a2433;
    --body:        #45526a;
    --muted:       #5e6883; /* contraste >= 4.5:1 sur blanc (WCAG AA) */
    --line:        #e3e8f0;
    --bg:          #ffffff;
    --bg-soft:     #f5f8fc;
    --bg-tint:     #eef4fb;
    --white:       #ffffff;

    --radius:      14px;
    --radius-sm:   9px;
    --radius-lg:   22px;
    --shadow-sm:   0 2px 8px rgba(10, 37, 64, .06);
    --shadow:      0 12px 30px rgba(10, 37, 64, .10);
    --shadow-lg:   0 24px 60px rgba(10, 37, 64, .16);

    --font-head:   'Sora', system-ui, sans-serif;
    --font-body:   'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --container:   1180px;
    --header-h:    74px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--body);
    background: var(--bg);
    line-height: 1.65;
    font-size: 16.5px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--blue-700); }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3.15rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -.015em; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
.svg, svg.icon { width: 22px; height: 22px; flex: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Eyebrow / sections ---------- */
.eyebrow {
    display: inline-block; font-family: var(--font-head); font-weight: 700;
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 1rem;
}
.eyebrow-light { color: var(--cyan); }
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-alt { background: var(--bg-soft); }
.section-head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.section-lead { font-size: 1.08rem; color: var(--muted); }
.section-cta { text-align: center; margin-top: 40px; }
.muted-note { color: var(--muted); font-size: .95rem; margin-top: 28px; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--font-head); font-weight: 600; font-size: .98rem;
    padding: 13px 24px; border-radius: 100px; border: 1.6px solid transparent;
    cursor: pointer; transition: all .2s ease; line-height: 1; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(14, 99, 179, .28); }
.btn-primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14, 99, 179, .34); }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-ghost { background: var(--bg-tint); color: var(--ink); }
.btn-ghost:hover { background: var(--line); color: var(--ink); }
.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-link { background: none; padding: 0; color: var(--blue); font-family: var(--font-head); font-weight: 600; }
.btn-link svg { transition: transform .2s; }
.btn-link:hover svg { transform: translateX(4px); }
.link-button { background: none; border: none; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.link-button:hover { color: var(--blue); }
/* Bouton secondaire plein (ex. « Tout refuser » : poids visuel égal à « Tout accepter ») */
.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #0b1320; color: #fff; transform: translateY(-2px); }

/* Accessibilité : focus clavier visible sur tous les éléments interactifs (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Sur fonds sombres, contour clair pour rester visible (header exclu : fond clair) */
.hero :focus-visible,
.page-hero :focus-visible,
.section-trust :focus-visible,
.section-final :focus-visible,
.contact-info :focus-visible,
.site-footer :focus-visible {
    outline-color: #fff;
}

/* Contenu réservé aux lecteurs d'écran (visuellement masqué) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line);
    transition: box-shadow .25s, background .25s;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--navy); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; }
.brand-icon { width: 22px; height: 22px; }
.brand-text strong { color: var(--blue); }
.brand:hover { color: var(--navy); }
.brand-logo { height: 54px; width: auto; display: block; }

.primary-nav { display: flex; align-items: center; gap: 30px; }
.primary-nav > ul { display: flex; align-items: center; gap: 6px; }
.primary-nav > ul a {
    display: block; padding: 9px 14px; border-radius: 8px; color: var(--ink);
    font-weight: 500; font-size: .97rem;
}
.primary-nav > ul a:hover { background: var(--bg-tint); color: var(--blue); }
.primary-nav > ul a.is-active { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--muted); }
.lang-switch a { color: var(--muted); padding: 2px 4px; border-radius: 5px; }
.lang-switch a.is-active { color: var(--navy); background: var(--bg-tint); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--navy); padding: 6px; }
.nav-toggle svg { width: 28px; height: 28px; }
.nav-toggle .icon-close { display: none; }

/* ---------- Hero (slider d'images avec texte) ---------- */
.hero {
    position: relative; color: #fff; overflow: hidden;
    min-height: clamp(440px, 56vh, 560px);
    display: flex; align-items: center; background: var(--navy);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Voile dégradé : sombre à gauche (lisibilité du texte) -> transparent à droite (scène visible).
   Fonctionne sur images claires comme sombres. */
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(90deg, rgba(8,30,54,.90) 0%, rgba(8,30,54,.70) 28%, rgba(8,30,54,.34) 52%, rgba(8,30,54,.08) 74%, transparent 90%),
        linear-gradient(0deg, rgba(8,30,54,.40) 0%, transparent 42%);
}
.hero > .container { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 72px; }
.hero-content { max-width: 600px; }
.hero-content h1 { color: #fff; margin-bottom: .5em; text-shadow: 0 2px 22px rgba(0,0,0,.40); }
.hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,.92); max-width: 540px; margin-bottom: 2rem; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Contrôles du slider */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55);
    background: rgba(8,30,54,.4); color: #fff; cursor: pointer; display: grid; place-items: center;
    backdrop-filter: blur(3px); transition: background .2s, border-color .2s;
}
.hero-arrow:hover { background: rgba(8,30,54,.78); border-color: #fff; }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }
.hero-dots {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px;
    display: flex; justify-content: center; gap: 9px; padding: 0 16px;
}
.hero-dot {
    width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); padding: 0; cursor: pointer;
    background: rgba(8,30,54,.4); transition: background .2s, transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.hero-dot.is-active { background: var(--cyan); border-color: #fff; transform: scale(1.2); }
.hero-dot:hover { background: rgba(255,255,255,.6); }

/* ---------- Page hero (internes) ---------- */
.page-hero {
    background: radial-gradient(120% 130% at 85% 0%, var(--blue) 0%, var(--navy) 60%);
    color: #fff; padding: clamp(54px, 7vw, 88px) 0 clamp(46px, 6vw, 70px); text-align: center;
}
.page-hero h1 { color: #fff; }
.page-hero-lead { color: rgba(255,255,255,.82); font-size: 1.12rem; max-width: 660px; margin: 0 auto; }

/* ---------- Intro + stats ---------- */
.intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 16px; text-align: center; }
.stat-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2.3rem; color: var(--blue); line-height: 1; }
.stat-label { display: block; margin-top: 8px; font-size: .85rem; color: var(--muted); }

/* ---------- Cards grid ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--cyan-soft); color: var(--blue); margin-bottom: 18px; }
.card-icon .card-ico { width: 28px; height: 28px; }
.card-domain p { color: var(--muted); font-size: .97rem; }
.card-tag { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 600; color: var(--blue); background: var(--bg-tint); padding: 4px 11px; border-radius: 100px; }

.card-value { position: relative; padding-top: 34px; }
.value-num { position: absolute; top: 22px; right: 26px; font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; color: var(--bg-tint); line-height: 1; }
.card-value h3 { color: var(--blue); }

/* ---------- Posts ---------- */
.card-post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-post-media { height: 180px; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.post-media-news-1 { background: linear-gradient(135deg, #0e63b3, #17b3c4); }
.post-media-news-2 { background: linear-gradient(135deg, #0a2540, #0e63b3); }
.card-post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card-post-body time { font-size: .8rem; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.card-post-body h2, .card-post-body h3 { font-size: 1.2rem; margin: 8px 0 10px; }
.card-post-body p { color: var(--muted); font-size: .95rem; flex: 1; }
/* Visuel de carte : lien cliquable + image uploadée en fond */
a.card-post-media { display: block; background-size: cover; background-position: center; }
.card-post-body h2 a, .card-post-body h3 a { color: inherit; }
.card-post-body h2 a:hover, .card-post-body h3 a:hover { color: var(--blue); }

/* ---------- Article d'actualité (détail) ---------- */
.post-hero { text-align: left; }
/* Empile chaque élément du hero (retour, étiquette, titre, date) sur sa propre ligne */
.post-hero .container { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; }
.post-back { display: inline-flex; align-items: center; gap: .4em; color: rgba(255,255,255,.85); font-family: var(--font-head); font-weight: 600; font-size: .9rem; margin-bottom: 1.1rem; }
.post-back:hover { color: #fff; }
.post-back svg { width: 18px; height: 18px; }
.post-meta { color: rgba(255,255,255,.8); margin: .4rem 0 0; }
.post-container { max-width: 820px; }
.post-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 2rem; }
.rich-text { color: var(--body); font-size: 1.06rem; }
.rich-text h2 { margin-top: 1.6em; }
.rich-text h3 { margin-top: 1.4em; }
.rich-text p { margin: 0 0 1.1rem; }
.rich-text ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1.1rem; }
.rich-text ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1.1rem; }
.rich-text li { margin: .3em 0; }
.rich-text a { color: var(--blue); text-decoration: underline; }
.rich-text img { border-radius: var(--radius-sm); margin: 1.2rem 0; }
.rich-text blockquote { border-left: 4px solid var(--cyan); margin: 1.4rem 0; padding: .4rem 0 .4rem 1.2rem; color: var(--muted); font-style: italic; }
.rich-text hr { border: none; border-top: 1px solid var(--line); margin: 1.8rem 0; }

/* ---------- Partners strip / cards ---------- */
/* Bloc partenaires animé (page d'accueil) : un "spotlight" passe d'une carte à l'autre */
/* Flex centré : 3 cartes par ligne, et toute ligne incomplète (ex. 9 -> 3/3/3,
   ou un reliquat à un autre point de rupture) reste centrée automatiquement. */
.home-partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 4px; }
.hp-card {
    flex: 0 1 calc(33.333% - 15px);
    position: relative; display: grid; place-items: center; min-height: 132px;
    padding: 26px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .55s ease, box-shadow .55s ease, border-color .55s ease, filter .55s ease, opacity .55s ease;
    /* état "non focalisé" : atténué et désaturé */
    filter: grayscale(78%); opacity: .6; transform: scale(.97);
}
.hp-card.is-focused, .hp-card:hover, .hp-card:focus-visible {
    filter: none; opacity: 1; transform: scale(1.04);
    box-shadow: 0 16px 36px rgba(10, 37, 64, .16); border-color: var(--cyan);
}
.hp-logo { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
.hp-name { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--navy); }
.hp-badge {
    position: absolute; top: 9px; right: 9px; background: var(--cyan); color: #fff;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 3px 9px; border-radius: 100px;
}
/* Respect de prefers-reduced-motion : le spotlight tourne (changement de couleur)
   mais sans mouvement (pas de mise à l'échelle). */
@media (prefers-reduced-motion: reduce) {
    .hp-card, .hp-card.is-focused, .hp-card:hover, .hp-card:focus-visible { transform: none; }
}

.partners-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.partner-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cyan); }
.partner-card.is-main { grid-column: 1 / -1; border-color: var(--cyan); background: linear-gradient(180deg, var(--cyan-soft), #fff 60%); }
.partner-badge { position: absolute; top: 22px; right: 22px; background: var(--cyan); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 100px; }
.partner-card-logo { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--navy); margin-bottom: 16px; min-height: 52px; display: flex; align-items: center; }
.partner-card-logo img { max-height: 52px; width: auto; max-width: 230px; object-fit: contain; display: block; }
.partner-card.is-main .partner-card-logo img { max-height: 60px; }
.partner-card-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; margin-bottom: 14px; }
.partner-card-meta .meta-ico { width: 18px; height: 18px; }

/* ---------- Trust ---------- */
.section-trust { background: var(--navy); color: #fff; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.section-trust h2 { color: #fff; }
.section-trust .trust-text p { color: rgba(255,255,255,.8); }
.trust-list { display: grid; gap: 14px; }
.trust-list li { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; }
.trust-list .check-ico { width: 22px; height: 22px; color: var(--cyan); background: rgba(23,179,196,.16); border-radius: 50%; padding: 5px; box-sizing: content-box; flex: none; }

/* ---------- Preuve sociale (Ils nous font confiance) ---------- */
.section-proof { background: var(--bg-tint); }
.proof-inner { max-width: 840px; margin: 0 auto; text-align: center; }
.proof-figure { margin: 4px 0 22px; }
.proof-num {
    display: block; font-family: var(--font-head); font-weight: 800;
    font-size: clamp(2.8rem, 6.5vw, 4.4rem); line-height: 1; letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--blue), var(--cyan));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blue);
}
.proof-num-label { display: block; margin-top: 12px; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.proof-text { font-size: 1.18rem; color: var(--body); max-width: 740px; margin: 0 auto; }

/* ---------- Final CTA ---------- */
.section-final { background: linear-gradient(120deg, var(--blue), var(--cyan)); color: #fff; text-align: center; }
.final-inner { max-width: 680px; margin: 0 auto; }
.section-final h2 { color: #fff; }
.section-final p { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-bottom: 1.8rem; }
.section-final .btn-primary { background: #fff; color: var(--blue); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.section-final .btn-primary:hover { background: var(--navy); color: #fff; }

/* ---------- Products page ---------- */
.products-list { display: grid; gap: 22px; }
.product-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 26px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: box-shadow .25s, border-color .25s; }
.product-row:hover { box-shadow: var(--shadow); border-color: transparent; }
.product-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; background: var(--cyan-soft); color: var(--blue); }
.product-icon .product-ico { width: 34px; height: 34px; }
.product-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 8px; }
.product-head h2 { font-size: 1.4rem; margin: 0; }
.product-partner { font-size: .85rem; color: var(--muted); }
.product-partner strong { color: var(--blue); }
.product-features { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.product-features li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--body); }
.product-features .check-ico { width: 18px; height: 18px; color: var(--cyan); }
.product-cta { align-self: center; }

/* ---------- About ---------- */
.about-mission { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; }
.about-mission-badge { display: grid; place-items: center; }
.about-mission-badge .mission-ico { width: 130px; height: 130px; color: var(--blue); opacity: .9; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.contact-info { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 36px; }
.contact-info h2 { color: #fff; font-size: 1.4rem; }
.contact-info-list { display: grid; gap: 20px; margin-top: 22px; }
.contact-info-list li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255,255,255,.86); font-size: .96rem; }
.contact-info-list a { color: #fff; }
.contact-info-list .ci-ico { width: 22px; height: 22px; color: var(--cyan); flex: none; margin-top: 2px; }

.contact-form-wrap h2 { font-size: 1.4rem; }
.contact-form { margin-top: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 7px; }
.form-group input, .form-group textarea {
    width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--bg-soft); transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(14,99,179,.12); }
.form-group input.has-error, .form-group textarea.has-error { border-color: var(--red); }
.field-error { display: block; color: var(--red); font-size: .82rem; margin-top: 5px; }
.form-consent .checkbox { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.form-consent .checkbox input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--blue); }
.form-consent .checkbox span { font-family: var(--font-body); font-size: .9rem; color: var(--body); }
.form-required { font-size: .82rem; color: var(--muted); margin: 4px 0 18px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: .95rem; }
.alert svg { width: 22px; height: 22px; flex: none; }
.alert-success { background: #e6f7ee; color: #0f7a47; border: 1px solid #b6e6cd; }
.alert-error { background: #fdeaec; color: #b3263a; border: 1px solid #f5c2ca; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.74); padding-top: 64px; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; }
.brand-footer { color: #fff; margin-bottom: 16px; }
.brand-footer:hover { color: #fff; }
.footer-about p { max-width: 280px; }
.footer-col h3 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a, .footer-col .link-button { color: rgba(255,255,255,.74); }
.footer-col a:hover, .footer-col .link-button:hover { color: var(--cyan); }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }
.footer-contact svg { width: 19px; height: 19px; color: var(--cyan); flex: none; margin-top: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .85rem; }
.footer-bottom-inner p { margin: 0; }
.footer-links { display: flex; gap: 20px; }

/* ---------- Legal ---------- */
.legal-prose { max-width: 800px; margin: 0 auto; }
.legal-prose h2 { font-size: 1.3rem; margin-top: 2em; color: var(--navy); }
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-updated { color: var(--muted); font-size: .9rem; }
.legal-placeholder-note { margin-top: 2.5em; padding: 14px 18px; background: #fff7e6; border: 1px solid #ffe2a8; border-radius: var(--radius-sm); color: #8a5a00; font-size: .9rem; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px; border: 1px solid var(--line); font-size: .92rem; }
.legal-table th { background: var(--bg-soft); font-family: var(--font-head); color: var(--ink); }

/* ---------- 404 ---------- */
.section-404 { text-align: center; padding: clamp(70px, 12vw, 140px) 0; }
.error-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--bg-tint); display: block; }
.error-inner h1 { margin-top: -.2em; }
.error-inner p { color: var(--muted); margin-bottom: 1.6rem; }

/* ---------- Cookie banner & modal ---------- */
.cookie-banner { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 200; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: slideUp .4s ease; }
.cookie-banner[hidden] { display: none; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cookie-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; max-width: var(--container); margin: 0 auto; }
.cookie-banner-inner p { margin: 0; font-size: .92rem; color: var(--body); }
.cookie-actions { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }

.cookie-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.cookie-modal[hidden] { display: none; }
.cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(10,37,64,.55); backdrop-filter: blur(2px); }
.cookie-modal-box { position: relative; z-index: 1; background: #fff; border-radius: var(--radius-lg); padding: 36px; max-width: 520px; width: 100%; box-shadow: var(--shadow-lg); animation: slideUp .35s ease; max-height: 90vh; overflow-y: auto; }
.cookie-modal-box h2 { font-size: 1.4rem; }
.cookie-modal-close { position: absolute; top: 18px; right: 18px; background: var(--bg-soft); border: none; border-radius: 8px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.cookie-modal-close:hover { background: var(--line); color: var(--ink); }
.cookie-option { padding: 18px 0; border-top: 1px solid var(--line); }
.cookie-option-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-option-head h3 { margin: 0; font-size: 1.05rem; }
.cookie-option p { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.cookie-always { font-size: .78rem; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: .05em; }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* Switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--line); border-radius: 100px; transition: .25s; cursor: pointer; }
.switch-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .switch-slider { background: var(--blue); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .hero { min-height: clamp(420px, 62vh, 520px); }
    .intro-grid, .trust-grid, .about-mission, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
    .cards-grid, .cards-grid-2, .cards-grid-3 { grid-template-columns: 1fr 1fr; }
    .partners-cards { grid-template-columns: 1fr; }
    .home-partners .hp-card { flex-basis: calc(50% - 11px); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    /* Menu mobile hors-canvas — le panneau fermé est parqué hors-écran via
       translateX(105%). Deux précautions pour que ça marche sur mobile :
       1) On DÉSACTIVE le backdrop-filter du header en mobile. Un filtre fait de
          l'élément le « bloc conteneur » de ses descendants position:fixed ; une
          fois la transition d'ouverture terminée et le calque de compositing
          ré-aplati, certains moteurs mobiles rognaient alors le menu à la boîte
          du header (74px de haut) → le menu disparaissait, ne laissant qu'un
          bandeau tout en haut. Sans filtre, le menu se réfère au viewport et
          n'est jamais rogné. (Le flou n'apporte rien derrière un panneau opaque.)
       2) Le garde anti-débordement horizontal passe sur la RACINE (html), un
          ancêtre pleine hauteur, au lieu du header. overflow-x:clip (et non
          hidden) ne crée pas de conteneur de défilement → sticky du header et
          scroll vertical intacts ; overflow-y reste visible. */
    html { overflow-x: clip; }
    .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
    .nav-toggle { display: block; }
    .brand-logo { height: 44px; }
    .hero { min-height: 480px; }
    .hero-arrow { display: none; } /* mobile : on garde les points, on masque les flèches */
    .hero > .container { padding-bottom: 60px; }
    .primary-nav {
        /* Le header n'ayant plus de backdrop-filter en mobile (voir plus haut),
           ce panneau position:fixed se réfère au viewport. On fixe top + height
           explicitement : le header étant collé en haut, top = hauteur du header,
           et la hauteur remplit le reste de l'écran (dvh pour les barres mobiles). */
        position: fixed; top: var(--header-h); right: 0; left: auto; bottom: auto;
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
        width: min(320px, 84vw);
        flex-direction: column; align-items: stretch; gap: 0; background: #fff;
        box-shadow: var(--shadow-lg); padding: 18px; transform: translateX(105%);
        transition: transform .3s ease; overflow-y: auto;
    }
    .primary-nav.is-open { transform: translateX(0); }
    .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .primary-nav > ul a { padding: 13px 14px; }
    .nav-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
    .lang-switch { justify-content: center; }
    .nav-cta { justify-content: center; }
    .nav-toggle.is-open .icon-menu { display: none; }
    .nav-toggle.is-open .icon-close { display: block; }
    body.nav-open { overflow: hidden; }

    .cards-grid, .cards-grid-2, .cards-grid-3, .stats { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .product-row { grid-template-columns: 1fr; gap: 16px; }
    .product-cta { align-self: start; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .cookie-banner-inner { flex-direction: column; align-items: stretch; }
    .cookie-actions { justify-content: stretch; }
    .cookie-actions .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; scroll-behavior: auto !important; }
}