/* =========================================================
   ELSASSPHONE — THÈME SOMBRE
   Noir, blanc et bleu
========================================================= */

:root {
    --blue: #0a66ff;
    --blue-dark: #004dcc;
    --blue-light: #6ea6ff;

    --background: #05070b;
    --background-soft: #090d14;
    --surface: #10151e;
    --surface-hover: #151c28;

    --white: #ffffff;
    --text: #f4f7fb;
    --text-light: #aab4c3;

    --border: rgba(255, 255, 255, 0.09);
    --border-blue: rgba(10, 102, 255, 0.4);

    --shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
    --shadow-blue: 0 18px 45px rgba(10, 102, 255, 0.25);

    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    --container: 1180px;
    --transition: 220ms ease;
}

/* BASE */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    background: var(--background);
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background: var(--background);
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--white);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

p {
    color: var(--text-light);
}

section {
    position: relative;
    padding: 105px 0;
    background: var(--background);
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

::selection {
    color: var(--white);
    background: var(--blue);
}

/* BOUTONS */

.btn-primary,
.btn-secondary,
.btn-header,
.configurator-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.btn-primary,
.btn-header,
.configurator-button {
    color: var(--white);
    background: var(--blue);
    border: 1px solid var(--blue);
    box-shadow: 0 12px 30px rgba(10, 102, 255, 0.22);
}

.btn-primary:hover,
.btn-header:hover,
.configurator-button:hover {
    transform: translateY(-2px);
    background: var(--blue-dark);
    box-shadow: var(--shadow-blue);
}

.btn-secondary {
    color: var(--white);
    background: var(--surface);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    color: var(--blue-light);
    border-color: var(--border-blue);
}

/* HEADER */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5, 7, 11, 0.9);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
}

.header.is-scrolled {
    background: rgba(5, 7, 11, 0.97);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.32);
}

.header-content {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    overflow: visible;
}

.logo img {
    display: block;
    width: 190px;
    height: 68px;
    max-height: none;
    object-fit: contain;
    object-position: left center;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
}

.navbar a {
    position: relative;
    color: var(--text-light);
    font-size: 0.94rem;
    font-weight: 650;
    transition: color var(--transition);
}

.navbar a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 2px;
    background: var(--blue);
    border-radius: 99px;
    transform: scaleX(0);
    transition: transform var(--transition);
}

.navbar a:hover,
.navbar a.active {
    color: var(--white);
}

.navbar a:hover::after,
.navbar a.active::after {
    transform: scaleX(1);
}

.btn-header {
    min-height: 45px;
    padding-inline: 19px;
    font-size: 0.9rem;
}

/* HERO */

.hero {
    min-height: 710px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 95px 0;
    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(10, 102, 255, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 12%,
            rgba(10, 102, 255, 0.09),
            transparent 27%
        ),
        var(--background);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: center;
    gap: 70px;
}

.hero-text {
    max-width: 680px;
    justify-self: start;
    text-align: left;
}

.hero-rating {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 10px 15px;
    color: var(--white);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.hero-stars,
.stars {
    color: var(--blue);
    letter-spacing: 1px;
}

.hero-label {
    display: block;
    width: fit-content;
    margin-bottom: 18px;
    color: var(--blue-light);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 25px;
    font-size: clamp(2.8rem, 5vw, 5.1rem);
    line-height: 0.99;
}

.hero h1 strong {
    color: var(--blue);
}

.hero-text > p {
    max-width: 620px;
    margin-bottom: 32px;
    font-size: 1.08rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image::before {
    content: "";
    position: absolute;
    inset: 10% 2% 4%;
    z-index: -1;
    background: rgba(10, 102, 255, 0.11);
    border: 1px solid rgba(10, 102, 255, 0.25);
    border-radius: 38px;
    transform: rotate(2deg);
}

.hero-image img {
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.55));
}

/* BARRE DE CONFIANCE */

.trust,
.trust-bar {
    padding: 0;
    background: var(--background-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-item {
    min-height: 132px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 27px 23px;
    border-right: 1px solid var(--border);
    transition: background var(--transition);
}

.trust-item:last-child {
    border-right: 0;
}

.trust-item:hover {
    background: var(--surface);
}

.trust-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    color: var(--blue-light);
    background: rgba(10, 102, 255, 0.12);
    border: 1px solid rgba(10, 102, 255, 0.2);
    border-radius: 16px;
}

.trust-item strong,
.trust-item span {
    display: block;
}

.trust-item strong {
    margin-bottom: 3px;
    color: var(--white);
}

.trust-item span {
    color: var(--text-light);
    font-size: 0.84rem;
}

/* TITRES */

.section-title {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-title > span {
    display: block;
    margin-bottom: 12px;
    color: var(--blue-light);
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-title h2 {
    margin-bottom: 17px;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.section-title p {
    font-size: 1.02rem;
}

/* GRILLES */

.categories-grid,
.repairs-grid,
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.brands-grid,
.advantages-grid,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* CARTES */

.category-card,
.brand-card,
.repair-card,
.advantage-card,
.review-card,
.contact-card,
.repair-result {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.category-card,
.repair-card,
.advantage-card,
.review-card {
    min-height: 230px;
    padding: 31px;
}

.category-card,
.brand-card {
    appearance: none;
    cursor: pointer;
}

.category-card {
    text-align: left;
}

.brand-card {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    font-weight: 750;
}

.contact-card {
    min-height: 245px;
    padding: 31px 24px;
    text-align: center;
}

.category-card:hover,
.category-card.active,
.brand-card:hover,
.brand-card.active,
.repair-card:hover,
.advantage-card:hover,
.review-card:hover,
.contact-card:hover {
    transform: translateY(-6px);
    background: var(--surface-hover);
    border-color: var(--border-blue);
    box-shadow: var(--shadow-blue);
}

.category-card i,
.repair-card i,
.advantage-card i,
.contact-card i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: var(--blue-light);
    background: rgba(10, 102, 255, 0.12);
    border-radius: 18px;
    font-size: 1.4rem;
}

.contact-card i {
    margin: 0 auto 22px;
}

.brand-card i {
    color: var(--white);
    font-size: 2rem;
}

.category-card h3,
.repair-card h3,
.advantage-card h3,
.contact-card h3 {
    margin-bottom: 11px;
    font-size: 1.2rem;
}

.contact-card a {
    color: var(--blue-light);
    font-weight: 750;
}

/* ALTERNANCE DES SECTIONS */

.brands,
.advantages,
.contact {
    background: var(--background-soft);
}

.categories,
.repairs,
.reviews {
    background: var(--background);
}

/* CONFIGURATEUR */

.configurator {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(10, 102, 255, 0.24),
            transparent 30%
        ),
        var(--background-soft);
}

.configurator-box {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.configurator-steps {
    display: grid;
    gap: 14px;
}

.configurator-field {
    padding: 21px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.configurator-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--text);
    font-weight: 750;
}

.configurator-field select {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    color: var(--white);
    background: var(--background-soft);
    border: 1px solid var(--border);
    border-radius: 13px;
    outline: none;
}

.configurator-field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(10, 102, 255, 0.14);
}

.configurator-field select:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.repair-result {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
}

.repair-result-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: var(--white);
    background: var(--blue);
    border-radius: 20px;
}

.repair-information {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.repair-information > div {
    padding: 18px;
    background: var(--background-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.repair-information span,
.repair-information strong {
    display: block;
}

.repair-information span {
    color: var(--text-light);
    font-size: 0.8rem;
}

.repair-information strong {
    color: var(--blue-light);
    font-size: 1.2rem;
}

.configurator-button {
    width: 100%;
}

/* AVIS */

.review-card {
    position: relative;
}

.review-card::before {
    content: "“";
    position: absolute;
    top: 16px;
    right: 24px;
    color: rgba(10, 102, 255, 0.14);
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
}

.review-card p {
    position: relative;
    z-index: 1;
}

/* FOOTER */

.footer {
    color: var(--white);
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(10, 102, 255, 0.16),
            transparent 27%
        ),
        #030509;
    border-top: 1px solid var(--border);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr 1fr;
    gap: 65px;
    padding-top: 72px;
    padding-bottom: 62px;
}

.footer-brand img {
    width: 178px;
    max-height: 68px;
    margin-bottom: 22px;
    object-fit: contain;
}

.footer-brand p,
.footer-links a,
.footer-contact p,
.footer-contact a {
    color: var(--text-light);
}

.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-links h3,
.footer-contact h3 {
    color: var(--white);
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--blue-light);
}

.footer-bottom {
    padding: 22px 20px;
    text-align: center;
    border-top: 1px solid var(--border);
}

/* ANIMATIONS */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .hero-content,
    .configurator-box {
        grid-template-columns: 1fr;
    }

    .hero-text {
        margin-inline: auto;
        text-align: center;
    }

    .hero-label,
    .hero-rating {
        margin-inline: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        max-width: 620px;
        margin-inline: auto;
    }

    .trust-grid,
    .advantages-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    section {
        padding: 85px 0;
    }

    .navbar {
        display: none;
    }

    .categories-grid,
    .repairs-grid,
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    section {
        padding: 70px 0;
    }

    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .logo img {
        width: 140px;
    }

    .btn-header {
        padding-inline: 14px;
        font-size: 0.8rem;
    }

    .hero {
        min-height: auto;
        padding: 70px 0 60px;
    }

    .hero h1 {
        font-size: clamp(2.4rem, 12vw, 3.6rem);
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons a {
        width: 100%;
    }

    .trust-grid,
    .categories-grid,
    .brands-grid,
    .repairs-grid,
    .advantages-grid,
    .reviews-grid,
    .contact-grid,
    .repair-information,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .trust-item {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .category-card,
    .repair-card,
    .advantage-card,
    .review-card,
    .contact-card {
        min-height: auto;
        padding: 26px;
    }

    .configurator-box {
        padding: 15px;
    }

    .repair-result {
        padding: 30px 24px;
    }

    .footer-brand {
        grid-column: auto;
    }
}

/* 3.3.6 — Correctif d'affichage permanent
   Le contenu ne doit jamais rester invisible si l'animation JavaScript
   ou IntersectionObserver ne se déclenche pas sur un appareil. */
.reveal,
.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   HERO PREMIUM — ELSASSPHONE
========================================================= */

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-text {
    position: relative;
}

.hero-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    backdrop-filter: blur(14px);
}

.hero-rating span:last-child {
    color: #c5cedb;
    font-size: 0.9rem;
    font-weight: 650;
}

.hero-stars {
    color: #0a66ff;
    letter-spacing: 2px;
}

.hero-label {
    display: block;
    width: fit-content;
    margin-bottom: 18px;
    color: #74aaff;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 24px;
    color: #ffffff;
    font-size: clamp(3rem, 5vw, 5.25rem);
    line-height: 0.98;
}

.hero h1 strong {
    display: block;
    margin-top: 8px;
    color: #0a66ff;
    font-weight: 850;
}

.hero-text > p {
    max-width: 620px;
    margin-bottom: 31px;
    color: #aab4c3;
    font-size: 1.08rem;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-buttons i {
    font-size: 0.95rem;
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin-top: 30px;
}

.hero-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c2cad6;
    font-size: 0.9rem;
    font-weight: 650;
}

.hero-benefits i {
    color: #0a66ff;
}

.hero-image {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.hero-image::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    z-index: -2;
    background: rgba(10, 102, 255, 0.13);
    border-radius: 50%;
    filter: blur(70px);
}

.hero-image-frame {
    position: relative;
    width: min(100%, 530px);
    padding: 24px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 38px;
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
}

.hero-image-frame::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -80px;
    width: 230px;
    height: 230px;
    background: #0a66ff;
    border-radius: 50%;
    opacity: 0.18;
    filter: blur(42px);
}

.hero-image-frame img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.48));
}

.hero-floating-card {
    position: absolute;
    z-index: 5;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    background: rgba(15, 21, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
}

.hero-floating-card > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #0a66ff;
    border-radius: 13px;
    box-shadow: 0 10px 25px rgba(10, 102, 255, 0.3);
}

.hero-floating-card strong,
.hero-floating-card span {
    display: block;
}

.hero-floating-card strong {
    margin-bottom: 2px;
    color: #ffffff;
    font-size: 0.91rem;
}

.hero-floating-card span {
    color: #8f9aaa;
    font-size: 0.75rem;
    line-height: 1.35;
}
.hero-floating-card-top {
    top: 24px;
    right: -24px;
    left: auto;
}

.hero-floating-card-bottom {
    right: -24px;
    bottom: 24px;
    left: auto;
}

.hero-floating-card {
    width: auto;
    min-width: 260px;
    max-width: 320px;
}

@media (max-width: 1100px) {
    .hero-image {
        width: 100%;
        max-width: 650px;
        min-height: 530px;
        margin-inline: auto;
    }

    .hero-text {
        text-align: center;
    }

    .hero-rating,
    .hero-label {
        margin-inline: auto;
    }

    .hero-text > p {
        margin-inline: auto;
    }

    .hero-benefits,
    .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 680px) {
    .hero h1 {
        font-size: clamp(2.55rem, 12vw, 3.75rem);
    }

    .hero-image {
        min-height: auto;
        padding-top: 20px;
    }

    .hero-image-frame {
        padding: 14px;
        border-radius: 26px;
    }

    .hero-floating-card {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        margin-top: 13px;
    }

    .hero-benefits {
        flex-direction: column;
        align-items: center;
    }
}/* =========================================================
   CORRECTION FINALE DU HERO
========================================================= */

.hero {
    min-height: calc(100vh - 86px);
    display: flex;
    align-items: center;
    padding: 75px 0 55px;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(460px, 0.95fr);
    align-items: center;
    gap: 70px;
}

.hero-text {
    width: 100%;
    max-width: 720px;
    justify-self: start;
    text-align: left;
}

.hero h1 {
    max-width: 720px;
    margin: 0 0 26px;
    font-size: clamp(3.3rem, 4.6vw, 4.8rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.hero h1 strong {
    display: block;
    color: var(--blue);
    white-space: nowrap;
}

.hero-text > p {
    max-width: 650px;
    margin: 0 0 32px;
    line-height: 1.7;
}

.hero-image {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-frame {
    position: relative;
    width: 100%;
    max-width: 590px;
    aspect-ratio: 1 / 0.92;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(28, 47, 78, 0.95),
            rgba(8, 14, 24, 0.98)
        );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    max-height: none;
    display: block;
    object-fit: cover;
    border-radius: 24px;
    filter: none;
}

.hero-image::before {
    inset: 5% -4%;
    border-radius: 50%;
    background: rgba(10, 102, 255, 0.17);
    filter: blur(70px);
    transform: none;
    border: 0;
}

.hero-floating-card {
    z-index: 4;
}

.hero-floating-card-top {
    top: 9%;
    right: -4%;
}

.hero-floating-card-bottom {
    left: -6%;
    bottom: 10%;
}@media (max-width: 1050px) {
    .hero {
        min-height: auto;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .hero-text {
        max-width: 760px;
    }

    .hero-image {
        max-width: 680px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .hero {
        padding: 55px 0 45px;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .hero h1 strong {
        white-space: normal;
    }

    .hero-image-frame {
        padding: 14px;
        border-radius: 26px;
    }

    .hero-image-frame img {
        border-radius: 18px;
    }

    .hero-floating-card {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 12px;
    }
}

/* =====================================================
   FIXER PRIX ELSASSPHONE
   ===================================================== */
.price-fixer {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
    gap: 24px;
    align-items: stretch;
    max-width: 1050px;
    margin: 0 auto;
}
.price-fixer-controls,
.price-result {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(18,25,42,.96), rgba(9,14,26,.96));
    box-shadow: 0 25px 65px rgba(0,0,0,.28);
}
.price-fixer-controls { padding: 26px; }
.price-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.price-progress span {
    padding: 10px 8px;
    border-radius: 11px;
    color: #8490a6;
    background: rgba(255,255,255,.035);
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
}
.price-progress span.is-active,
.price-progress span.is-done {
    color: #fff;
    background: rgba(0,102,255,.18);
    box-shadow: inset 0 0 0 1px rgba(0,102,255,.34);
}
.price-progress span.is-done { color: #4ee28a; }
.price-field { margin-bottom: 18px; }
.price-field label {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-weight: 800;
}
.price-field select {
    width: 100%;
    min-height: 56px;
    padding: 0 46px 0 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    outline: none;
    color: #fff;
    background: #101827;
    font: inherit;
    cursor: pointer;
}
.price-field select:focus { border-color: #267cff; box-shadow: 0 0 0 3px rgba(38,124,255,.14); }
.price-field select:disabled { opacity: .48; cursor: not-allowed; }
.price-field option { color: #111; background: #fff; }
.price-reset {
    border: 0;
    padding: 8px 0;
    color: #99a5b9;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}
.price-reset:hover { color: #fff; }
.price-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
    overflow: hidden;
    position: relative;
}
.price-result::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -110px;
    top: -120px;
    border-radius: 50%;
    background: rgba(0,102,255,.19);
    filter: blur(8px);
}
.price-result > * { position: relative; z-index: 1; }
.price-result-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0066ff, #7c4dff);
    font-size: 1.25rem;
}
.price-result-kicker {
    margin: 0 0 7px;
    color: #55dc8b;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem;
}
.price-result h3 { margin: 0 0 8px; color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.price-result > p:not(.price-result-kicker) { margin: 0; color: #99a5b9; }
.price-result-amount {
    display: block;
    margin: 24px 0;
    color: #fff;
    font-size: clamp(3.1rem, 7vw, 5rem);
    line-height: .95;
    letter-spacing: -.055em;
}
.price-result-info { display: grid; gap: 10px; margin-bottom: 24px; }
.price-result-info span { color: #d9e1ef; font-size: .93rem; }
.price-result-info i { width: 22px; color: #55dc8b; }
.price-call { width: 100%; text-align: center; }
.price-result.has-price { border-color: rgba(78,226,138,.35); }
.price-result.has-price .price-result-icon { background: linear-gradient(135deg, #17b85c, #0066ff); }

@media (max-width: 850px) {
    .price-fixer { grid-template-columns: 1fr; }
    .price-result { min-height: 430px; }
}
@media (max-width: 560px) {
    .price-fixer-controls, .price-result { padding: 20px 16px; border-radius: 20px; }
    .price-progress span { font-size: .68rem; padding: 9px 3px; }
    .price-result { min-height: 390px; }
}


/* ===== ELSASSPHONE WAOUH V1 ===== */
:root{--mouse-x:50%;--mouse-y:20%;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(700px circle at var(--mouse-x) var(--mouse-y),rgba(0,102,255,.09),transparent 44%)}
.header-actions{display:flex;align-items:center;gap:14px}.shop-status{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(9,16,31,.72);backdrop-filter:blur(14px);font-size:.78rem;font-weight:700;white-space:nowrap}.shop-status-dot{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 12px currentColor}.shop-status.is-open .shop-status-dot{background:#2ee59d;animation:statusPulse 1.8s infinite}.shop-status.is-closed .shop-status-dot{background:#ff5d73}@keyframes statusPulse{50%{box-shadow:0 0 0 7px rgba(46,229,157,0)}}
.hero-video{position:relative;overflow:hidden;isolation:isolate;min-height:760px}.hero-bg-video,.hero-video-overlay{position:absolute;inset:0;width:100%;height:100%}.hero-bg-video{object-fit:cover;z-index:-3;filter:saturate(.75) contrast(1.08)}.hero-video-overlay{z-index:-2;background:linear-gradient(90deg,rgba(4,8,17,.96) 0%,rgba(4,8,17,.82) 48%,rgba(4,8,17,.38) 100%),linear-gradient(0deg,#060b14 0%,transparent 30%)}.hero-video .hero-image{opacity:.12;transform:scale(.94)}.hero-video .hero-text{max-width:760px}.hero-video h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.94;letter-spacing:-.065em}.hero-video h1 strong{display:block;background:linear-gradient(100deg,#fff,#7db5ff 55%,#3ae6be);-webkit-background-clip:text;color:transparent}.hero-label{box-shadow:0 0 30px rgba(0,102,255,.22)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.25,1)}.reveal.is-visible{opacity:1;transform:none}
.category-card,.brand-card,.repair-card,.advantage-card,.review-card,.contact-card,.symptom-card{position:relative;overflow:hidden;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.category-card::after,.brand-card::after,.repair-card::after,.advantage-card::after,.review-card::after,.contact-card::after,.symptom-card::after{content:"";position:absolute;inset:-1px;background:radial-gradient(280px circle at var(--card-x,50%) var(--card-y,50%),rgba(67,140,255,.20),transparent 45%);opacity:0;transition:.25s;pointer-events:none}.category-card:hover::after,.brand-card:hover::after,.repair-card:hover::after,.advantage-card:hover::after,.review-card:hover::after,.contact-card:hover::after,.symptom-card:hover::after{opacity:1}.category-card:hover,.brand-card:hover,.repair-card:hover,.advantage-card:hover,.review-card:hover,.contact-card:hover,.symptom-card:hover{transform:translateY(-7px);border-color:rgba(74,145,255,.55);box-shadow:0 22px 55px rgba(0,0,0,.32)}
.symptom-finder{padding:110px 0}.symptom-shell{padding:34px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(145deg,rgba(17,27,48,.92),rgba(7,12,24,.94));box-shadow:0 35px 100px rgba(0,0,0,.32);position:relative;overflow:hidden}.symptom-shell::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(0,102,255,.12);filter:blur(80px);right:-180px;top:-240px}.symptom-intro{max-width:720px;margin-bottom:28px;position:relative}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:#72a9ff;font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.symptom-intro h3{font-size:clamp(1.8rem,4vw,3rem);margin:12px 0}.symptom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}.symptom-card{min-height:126px;padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#fff;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:20px}.symptom-card i{font-size:1.55rem;color:#6ca7ff}.symptom-card span{font-weight:800}.symptom-card.is-selected{border-color:#3789ff;background:rgba(0,102,255,.15);box-shadow:0 0 0 4px rgba(0,102,255,.09)}.symptom-answer{margin-top:20px;padding:22px;border-radius:20px;background:rgba(0,102,255,.11);border:1px solid rgba(75,145,255,.30);display:flex;align-items:center;justify-content:space-between;gap:22px}.symptom-answer[hidden]{display:none}.symptom-answer span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#7fb1ff;font-weight:900}.symptom-answer strong{display:block;font-size:1.3rem;margin:5px 0}.symptom-answer p{margin:0;color:#a9b6cb}
.price-result.has-price{animation:priceReveal .55s cubic-bezier(.16,.9,.25,1)}@keyframes priceReveal{0%{transform:scale(.96);filter:brightness(1.8)}100%{transform:scale(1);filter:none}}.price-result-amount{position:relative;text-shadow:0 0 35px rgba(61,142,255,.35)}.price-result-actions{display:grid;gap:10px;width:100%}.expert-trigger{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);color:#fff;padding:14px 18px;border-radius:14px;font:inherit;font-weight:800;cursor:pointer;transition:.25s}.expert-trigger:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.workshop{padding:120px 0}.workshop-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:70px}.workshop-copy h2{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.045em;margin:16px 0}.workshop-copy>p{color:#9ba8ba;font-size:1.05rem;line-height:1.8}.process-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.process-list span{padding:15px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(255,255,255,.035);font-weight:700}.process-list b{color:#66a2ff;margin-right:8px}.workshop-visual{position:relative;min-height:500px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.13);box-shadow:0 34px 90px rgba(0,0,0,.42)}.workshop-visual video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.workshop-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,8,16,.75),transparent 55%)}.workshop-badge{position:absolute;z-index:2;left:22px;bottom:22px;display:flex;align-items:center;gap:13px;padding:14px 17px;border-radius:16px;background:rgba(5,10,20,.76);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px)}.workshop-badge i{color:#55dfa9;font-size:1.4rem}.workshop-badge span{display:flex;flex-direction:column;font-size:.8rem;color:#aab6c8}.workshop-badge strong{color:#fff;font-size:.95rem}
.expert-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.3s}.expert-modal.is-open{opacity:1;visibility:visible}.expert-modal-backdrop{position:absolute;inset:0;background:rgba(1,4,10,.78);backdrop-filter:blur(12px)}.expert-modal-panel{position:relative;width:min(980px,100%);max-height:90vh;overflow:auto;padding:40px;border-radius:28px;background:linear-gradient(150deg,#111b2f,#070c17);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 130px rgba(0,0,0,.65);transform:translateY(20px) scale(.97);transition:.35s}.expert-modal.is-open .expert-modal-panel{transform:none}.expert-modal-close{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}.expert-modal-panel h2{font-size:clamp(2rem,4vw,3.5rem);margin:14px 0 28px;max-width:760px}.expert-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:28px}.expert-steps article{position:relative;padding:24px 18px;border:1px solid rgba(255,255,255,.10);border-radius:19px;background:rgba(255,255,255,.035)}.expert-steps article>span{position:absolute;right:14px;top:12px;color:rgba(255,255,255,.18);font-size:1.4rem;font-weight:900}.expert-steps i{font-size:1.4rem;color:#6faaff;margin-bottom:28px}.expert-steps h3{margin:0 0 9px}.expert-steps p{color:#9faec2;line-height:1.55;font-size:.9rem;margin:0}body.modal-open{overflow:hidden}
.contact-card small{display:block;margin-top:8px;color:#72a9ff;font-weight:700;line-height:1.4}
@media(max-width:1050px){.shop-status{display:none}.symptom-grid{grid-template-columns:repeat(2,1fr)}.workshop-grid{grid-template-columns:1fr}.expert-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.hero-video{min-height:auto}.hero-video h1{font-size:clamp(2.8rem,14vw,4.5rem)}.hero-video .hero-image{display:none}.symptom-shell{padding:22px 16px}.symptom-grid{grid-template-columns:1fr 1fr;gap:9px}.symptom-card{min-height:110px;padding:16px}.symptom-answer{align-items:stretch;flex-direction:column}.process-list,.expert-steps{grid-template-columns:1fr}.workshop-visual{min-height:390px}.expert-modal-panel{padding:32px 19px}.header-actions .btn-header{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero-bg-video,.workshop-visual video{display:none}.reveal{opacity:1;transform:none}}

/* =========================================================
   HERO GRAND FORMAT — image pleine largeur + texte au-dessus
   Correction du voile trop sombre
========================================================= */
.hero.hero-video {
    position: relative;
    isolation: isolate;
    min-height: clamp(650px, calc(100vh - 150px), 820px);
    padding: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #050914;
}

/* La vidéo du haut est désactivée : l'image fixe devient le visuel principal. */
.hero.hero-video .hero-bg-video,
.hero.hero-video .hero-video-overlay {
    display: none !important;
}

.hero.hero-video .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding-top: 58px;
    padding-bottom: 58px;
}

/* L'image sort du conteneur et remplit uniquement le hero. */
.hero.hero-video .hero-image {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-width: none;
    min-width: 100vw;
    margin: 0;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    display: block;
    pointer-events: none;
}

.hero.hero-video .hero-image::before {
    display: none;
}

.hero.hero-video .hero-image-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hero.hero-video .hero-image-frame::before {
    display: none;
}

/* Dégradé localisé derrière le texte, sans assombrir tout le visuel. */
.hero.hero-video .hero-image-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(3, 7, 15, .92) 0%,
            rgba(3, 7, 15, .82) 25%,
            rgba(3, 7, 15, .55) 43%,
            rgba(3, 7, 15, .16) 65%,
            rgba(3, 7, 15, 0) 82%),
        linear-gradient(0deg,
            rgba(3, 7, 15, .40) 0%,
            rgba(3, 7, 15, 0) 22%,
            rgba(3, 7, 15, .10) 100%);
    pointer-events: none;
}

.hero.hero-video .hero-image-frame img {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center right;
    border-radius: 0;
    filter: brightness(.96) saturate(1.08) contrast(1.04);
}

.hero.hero-video .hero-floating-card {
    display: none !important;
}

/* Le texte passe réellement devant l'image. */
.hero.hero-video .hero-text {
    position: relative;
    z-index: 4;
    width: min(900px, 70vw);
    max-width: 900px;
    margin: 0;
    opacity: 1;
    transform: none;
    text-align: left;
}

.hero.hero-video h1 {
    width: min(1000px, 78vw);
    max-width: 1000px;
    margin: 22px 0 24px;
    font-size: clamp(3.4rem, 5.35vw, 6rem);
    line-height: .94;
    letter-spacing: -.06em;
    color: #fff;
    text-shadow: 0 5px 30px rgba(0, 0, 0, .38);
}

.hero.hero-video h1 strong {
    display: block;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    background: linear-gradient(100deg, #f7fbff 0%, #74aaff 44%, #35dfc2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero.hero-video .hero-text > p {
    max-width: 650px;
    color: #c7d0df;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.hero.hero-video .hero-rating,
.hero.hero-video .hero-label,
.hero.hero-video .hero-buttons,
.hero.hero-video .hero-benefits {
    position: relative;
    z-index: 5;
}

@media (max-width: 1050px) {
    .hero.hero-video {
        min-height: 720px;
    }

    .hero.hero-video .hero-content {
        display: flex;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero.hero-video .hero-text {
        width: 82vw;
    }

    .hero.hero-video h1 {
        width: 88vw;
        font-size: clamp(3rem, 7.5vw, 5rem);
    }

    .hero.hero-video .hero-image-frame img {
        object-position: 62% center;
    }
}

@media (max-width: 700px) {
    .hero.hero-video {
        min-height: 720px;
    }

    .hero.hero-video .hero-content {
        padding-top: 42px;
        padding-bottom: 42px;
        align-items: flex-end;
    }

    .hero.hero-video .hero-image {
        display: block !important;
    }

    .hero.hero-video .hero-image-frame img {
        object-position: 66% center;
        filter: brightness(.72) saturate(1.08);
    }

    .hero.hero-video .hero-image-frame::after {
        background:
            linear-gradient(0deg,
                rgba(3, 7, 15, .96) 0%,
                rgba(3, 7, 15, .78) 52%,
                rgba(3, 7, 15, .20) 100%);
    }

    .hero.hero-video .hero-text,
    .hero.hero-video h1 {
        width: 100%;
        max-width: 100%;
    }

    .hero.hero-video h1 {
        font-size: clamp(2.7rem, 13.2vw, 4.3rem);
        line-height: .96;
    }

    .hero.hero-video h1 strong {
        width: auto;
        white-space: normal;
    }
}

/* ===== CARROUSEL AVIS GOOGLE ===== */
.reviews-summary{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 auto 34px;padding:22px 28px;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.reviews-score{display:flex;align-items:baseline;gap:5px}.reviews-score strong{font-size:3rem;line-height:1}.reviews-score span{color:var(--muted)}
.reviews-summary p{margin:5px 0 0;color:var(--muted)}
.reviews-carousel{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:18px;max-width:920px;margin:0 auto}
.reviews-viewport{overflow:hidden;border-radius:28px}
.reviews-track{display:flex;transition:transform .65s cubic-bezier(.22,.61,.36,1);will-change:transform}
.review-slide{min-width:100%;min-height:280px;padding:38px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}
.review-top{display:flex;align-items:center;gap:15px}.review-top h3{margin:0 0 5px}.review-avatar{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;font-weight:850;background:rgba(10,102,255,.15);color:var(--blue-light);border:1px solid var(--border-blue)}
.review-google{margin-left:auto;font-size:1.5rem;color:var(--blue-light)}
.review-slide blockquote{margin:28px 0 0;font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.55;color:var(--text)}
.reviews-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:transform .25s,background .25s,border-color .25s}.reviews-arrow:hover{transform:scale(1.07);background:var(--surface-hover);border-color:var(--border-blue)}
.reviews-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}.reviews-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.24);cursor:pointer;transition:width .25s,background .25s}.reviews-dot.active{width:28px;background:var(--blue-light)}
.reviews-actions{justify-content:center;margin-top:30px}
@media(max-width:700px){.reviews-summary{padding:18px;gap:14px}.reviews-score strong{font-size:2.4rem}.reviews-carousel{grid-template-columns:1fr}.reviews-arrow{position:absolute;z-index:2;bottom:16px}.reviews-prev{left:16px}.reviews-next{right:16px}.review-slide{min-height:330px;padding:28px 26px 78px}.review-slide blockquote{font-size:1.2rem}.reviews-dots{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.reviews-track{transition:none}}


/* Avis Google premium — widget Elfsight synchronisé */
.reviews-premium{position:relative;overflow:hidden}
.reviews-premium::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,122,0,.11),transparent 42%);pointer-events:none}
.reviews-premium .container{position:relative;z-index:1}
.reviews-premium-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:34px;align-items:end;margin-bottom:36px}
.reviews-premium-title{text-align:left;margin:0}
.reviews-premium-title p{max-width:650px;margin-left:0}
.reviews-premium-score{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 24px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);border-radius:26px;box-shadow:0 22px 70px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.reviews-premium-score-number{font-size:clamp(2.8rem,6vw,4.6rem);font-weight:800;letter-spacing:-.08em;line-height:.9;color:var(--text)}
.reviews-premium-score-copy{display:flex;flex-direction:column;gap:3px}
.reviews-premium-score-copy .stars{font-size:1rem;letter-spacing:2px}
.reviews-premium-score-copy strong{font-size:1rem;color:var(--text)}
.reviews-premium-score-copy span{font-size:.88rem;color:var(--muted)}
.reviews-premium-score>.fa-google{font-size:1.55rem;color:#fff;opacity:.85}
.reviews-widget-shell{position:relative;min-height:320px;padding:22px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.1);border-radius:30px;box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:hidden;isolation:isolate}
.reviews-widget-glow{position:absolute;width:280px;height:280px;right:-100px;top:-130px;border-radius:50%;background:rgba(255,122,0,.12);filter:blur(55px);pointer-events:none;z-index:-1}
.reviews-widget-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:.95rem;z-index:-1}
.reviews-widget-loading i{color:var(--accent);font-size:1.25rem}
.reviews-widget-shell [class*="elfsight-app-"]{position:relative;z-index:1;min-height:260px}
.reviews-premium-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.reviews-premium-actions a{min-width:220px;justify-content:center}
@media(max-width:900px){.reviews-premium-head{grid-template-columns:1fr;align-items:stretch}.reviews-premium-title{text-align:center}.reviews-premium-title p{margin-left:auto;margin-right:auto}.reviews-premium-score{max-width:520px;width:100%;margin:0 auto}}
@media(max-width:600px){.reviews-widget-shell{padding:10px;border-radius:22px;min-height:360px}.reviews-premium-score{grid-template-columns:auto 1fr;padding:18px}.reviews-premium-score>.fa-google{display:none}.reviews-premium-actions{display:grid;grid-template-columns:1fr}.reviews-premium-actions a{width:100%;min-width:0}}


/* ===== Avis Google natifs gratuits ===== */
.reviews-native {
    overflow: hidden;
}
.native-reviews-wrap {
    position: relative;
    margin-top: 34px;
}
.native-reviews-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 6px 2px 18px;
}
.native-reviews-track::-webkit-scrollbar { display: none; }
.native-review-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-height: 260px;
    scroll-snap-align: start;
    background:
        radial-gradient(circle at 100% 0%, rgba(15, 108, 255, .14), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.native-review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(55,132,255,.45);
}
.native-review-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
}
.native-review-top > div {
    min-width: 0;
}
.native-review-top strong,
.native-review-top span {
    display: block;
}
.native-review-top strong {
    color: #fff;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.native-review-top span {
    margin-top: 3px;
    color: rgba(255,255,255,.54);
    font-size: .82rem;
}
.native-review-top > i {
    color: #4285f4;
    font-size: 1.22rem;
}
.native-review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid !important;
    place-items: center;
    background: linear-gradient(145deg, #1d72ff, #0b3d99);
    color: #fff !important;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.native-review-stars {
    color: #fbbc04;
    letter-spacing: 2px;
    margin: 22px 0 15px;
    font-size: 1.03rem;
}
.native-review-card p {
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: 1rem;
    line-height: 1.7;
}
.native-reviews-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}
.native-review-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    background: rgba(255,255,255,.055);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.native-review-arrow:hover {
    transform: translateY(-2px);
    background: #1167ef;
    border-color: #1167ef;
}
.native-review-progress {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    overflow: hidden;
}
.native-review-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b63f6, #52a3ff);
    transition: width .45s ease;
}
.native-review-note {
    margin: 18px 0 0;
    text-align: center;
    color: rgba(255,255,255,.50);
    font-size: .86rem;
}
@media (max-width: 980px) {
    .native-review-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
    .native-review-card { flex-basis: 88%; min-height: 245px; padding: 22px; }
    .native-reviews-controls { gap: 10px; }
    .native-review-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .native-reviews-track { scroll-behavior: auto; }
    .native-review-card, .native-review-progress span { transition: none; }
}


@media (max-width: 768px) {
    .logo img {
        width: 145px;
        height: 52px;
    }
}


/* =========================================================
   DIAGNOSTICS — EXPRESS GRATUIT / APPROFONDI 20 €
========================================================= */

.diagnostic-options {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 15%, rgba(10, 102, 255, 0.13), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(110, 166, 255, 0.08), transparent 30%),
        var(--background);
}

.diagnostic-options::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.diagnostic-options .container {
    position: relative;
    z-index: 1;
}

.diagnostic-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1020px;
    margin: 48px auto 0;
}

.diagnostic-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(12, 17, 25, 0.82);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.diagnostic-plan::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -80px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(10, 102, 255, 0.13);
    filter: blur(12px);
    pointer-events: none;
}

.diagnostic-plan:hover {
    transform: translateY(-7px);
    border-color: var(--border-blue);
    box-shadow: var(--shadow-blue);
}

.diagnostic-plan-deep {
    border-color: rgba(10, 102, 255, 0.38);
    background:
        linear-gradient(145deg, rgba(10, 102, 255, 0.16), rgba(255, 255, 255, 0.025) 46%),
        rgba(12, 17, 25, 0.88);
}

.diagnostic-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.diagnostic-plan-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    flex: 0 0 auto;
    color: var(--white);
    font-size: 22px;
    border: 1px solid rgba(110, 166, 255, 0.32);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(10, 102, 255, 0.95), rgba(0, 77, 204, 0.72));
    box-shadow: 0 14px 34px rgba(10, 102, 255, 0.28);
}

.diagnostic-plan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 13px;
    color: #c9dcff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(110, 166, 255, 0.24);
    border-radius: var(--radius-pill);
    background: rgba(10, 102, 255, 0.1);
}

.diagnostic-plan-eyebrow {
    margin-bottom: 10px;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.diagnostic-plan h3 {
    max-width: 520px;
    margin-bottom: 14px;
    font-size: clamp(25px, 3vw, 34px);
}

.diagnostic-plan-description {
    margin-bottom: 24px;
    font-size: 15px;
}

.diagnostic-plan-list {
    display: grid;
    gap: 13px;
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

.diagnostic-plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #dbe4f1;
    font-size: 14px;
}

.diagnostic-plan-list i {
    margin-top: 5px;
    color: var(--blue-light);
    font-size: 13px;
}

.diagnostic-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-height: 72px;
    padding-top: 24px;
    margin-top: auto;
    border-top: 1px solid var(--border);
}

.diagnostic-plan-price strong {
    color: var(--white);
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.diagnostic-plan-free .diagnostic-plan-price strong {
    color: #8cffb2;
}

.diagnostic-plan-price span {
    max-width: 300px;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.45;
}

.diagnostic-plan-action {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.diagnostic-options-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 760px;
    margin: 24px auto 0;
    color: var(--text-light);
    font-size: 13px;
    text-align: center;
}

.diagnostic-options-note i {
    color: var(--blue-light);
}

@media (max-width: 820px) {
    .diagnostic-options-grid {
        grid-template-columns: 1fr;
        max-width: 610px;
    }
}

@media (max-width: 560px) {
    .diagnostic-options-grid {
        margin-top: 34px;
        gap: 18px;
    }

    .diagnostic-plan {
        padding: 25px 21px;
        border-radius: 24px;
    }

    .diagnostic-plan-top {
        align-items: flex-start;
    }

    .diagnostic-plan-badge {
        font-size: 10px;
    }

    .diagnostic-plan h3 {
        font-size: 27px;
    }

    .diagnostic-plan-price {
        align-items: flex-start;
        flex-direction: column;
    }
}




/* =========================================================
   CORRECTIF — SÉLECTEUR MULTI-APPAREILS
========================================================= */

.device-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.device-switch {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: #dce8ff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
}

.device-switch i {
    flex: 0 0 auto;
    position: static;
    width: 1.15em;
    margin: 0;
    transform: none;
    text-align: center;
    color: #76a9ff;
}

.device-switch:hover {
    transform: translateY(-2px);
    border-color: rgba(93, 153, 255, 0.58);
    background: rgba(43, 104, 214, 0.12);
    color: #fff;
}

.device-switch.is-active {
    border-color: #4c8dff;
    background: linear-gradient(
        135deg,
        rgba(25, 105, 255, 0.34),
        rgba(31, 67, 142, 0.22)
    );
    color: #fff;
    box-shadow:
        0 0 0 3px rgba(76, 141, 255, 0.11),
        0 12px 28px rgba(0, 75, 190, 0.18);
}

.device-help {
    margin: 0 0 18px;
    color: #9fb0cc;
    font-size: 0.94rem;
}

/* Le tiret d'attente ne doit plus apparaître comme une grosse barre blanche. */
.price-result:not(.has-price) .price-result-amount {
    min-height: 46px;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 820px) {
    .device-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .device-switch {
        min-height: 46px;
        padding: 11px 8px;
        font-size: 0.82rem;
    }

    .device-switch:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 390px) {
    .device-switcher {
        grid-template-columns: 1fr;
    }

    .device-switch:last-child {
        grid-column: auto;
    }
}


/* =========================================================
   BANDE DE CONFIANCE — VERSION PREMIUM
========================================================= */

.trust-bar {
    position: relative;
    z-index: 5;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background:
        linear-gradient(180deg, rgba(8, 13, 22, 0.97), rgba(5, 10, 17, 0.98));
    overflow: hidden;
}

.trust-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 50%, rgba(30, 115, 255, 0.09), transparent 28%),
        radial-gradient(circle at 85% 50%, rgba(57, 204, 255, 0.06), transparent 30%);
}

.trust-bar .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1480px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.trust-item {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 108px;
    padding: 18px 28px;
}

.trust-item + .trust-item::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(110, 166, 255, 0.22),
        transparent
    );
}

.trust-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(73, 137, 255, 0.28);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(20, 93, 225, 0.18), rgba(7, 35, 88, 0.42));
    color: #73a8ff;
    font-size: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 28px rgba(0, 0, 0, 0.16);
}

.trust-item:hover .trust-icon {
    border-color: rgba(79, 151, 255, 0.52);
    color: #9cc3ff;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(54, 128, 255, 0.06),
        0 14px 30px rgba(8, 62, 154, 0.2);
}

.trust-icon,
.trust-item {
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        color 0.24s ease;
}

.trust-item:hover {
    transform: translateY(-2px);
}

.trust-content {
    min-width: 0;
}

.trust-content strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: clamp(0.98rem, 1.1vw, 1.12rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.trust-content span,
.trust-content p {
    display: block;
    margin: 0;
    color: #aebbd0;
    font-size: 0.89rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .trust-bar .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-item:nth-child(3)::before {
        display: none;
    }

    .trust-item:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.065);
    }
}

@media (max-width: 640px) {
    .trust-bar .container {
        grid-template-columns: 1fr;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .trust-item {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 88px;
        padding: 15px 10px;
    }

    .trust-item + .trust-item::before {
        display: none;
    }

    .trust-item:nth-child(n+2) {
        border-top: 1px solid rgba(255, 255, 255, 0.065);
    }

    .trust-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 20px;
    }

    .trust-content strong {
        font-size: 1rem;
    }

    .trust-content span,
    .trust-content p {
        font-size: 0.86rem;
    }
}






/* =========================================================
   HERO — CIRCUIT VIVANT V3 (SANS HALO, SANS BALAYAGE)
========================================================= */

.hero-video,
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-video-overlay {
    z-index: 0;
    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 18, .95) 0%,
            rgba(2, 8, 18, .77) 34%,
            rgba(2, 8, 18, .28) 59%,
            rgba(2, 8, 18, .08) 100%
        );
}

.hero-circuit-v2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .92;
}

.hero-video .container,
.hero .container,
.hero-video .hero-content,
.hero .hero-content {
    position: relative;
    z-index: 4;
}

.v2-static-glow path {
    stroke: rgba(33, 158, 255, .16);
    stroke-width: 1.8;
}

.v2-line {
    stroke: #4fd3ff;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 5 95;
    animation: v3-flow 3.4s linear infinite;
    opacity: .82;
}

.l2,
.l6,
.l10 {
    stroke: #167fff;
    animation-duration: 4.25s;
    animation-delay: -1.1s;
}

.l3,
.l7 {
    stroke: #9cefff;
    animation-duration: 3.85s;
    animation-delay: -1.8s;
}

.l4,
.l8 {
    animation-duration: 4.7s;
    animation-delay: -2.6s;
}

.l5,
.l9 {
    animation-duration: 4s;
    animation-delay: -.8s;
}

@keyframes v3-flow {
    0% {
        stroke-dashoffset: 105;
        opacity: .12;
    }
    18% {
        opacity: .92;
    }
    58% {
        opacity: .76;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: .08;
    }
}

.v2-dot {
    fill: #ffffff;
    stroke: #38d9ff;
    stroke-width: 3;
    opacity: .9;
}

.v3-nodes circle {
    fill: rgba(141, 235, 255, .58);
    animation: v3-node-pulse 2.8s ease-in-out infinite;
}

.v3-nodes circle:nth-child(2n) {
    animation-delay: -1.2s;
}

.v3-nodes circle:nth-child(3n) {
    animation-delay: -2s;
}

@keyframes v3-node-pulse {
    0%, 100% {
        opacity: .18;
        transform: scale(.85);
        transform-box: fill-box;
        transform-origin: center;
    }
    50% {
        opacity: .85;
        transform: scale(1.22);
    }
}

.hero-bg-video,
.hero-video > img,
.hero > img {
    animation: v3-image-breathe 7s ease-in-out infinite;
    transform-origin: 67% 50%;
    will-change: transform, filter;
}

@keyframes v3-image-breathe {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1) saturate(1);
    }
    50% {
        transform: scale(1.009);
        filter: brightness(1.06) saturate(1.08);
    }
}

.hero-video:has(.btn-primary:hover) .hero-circuit-v2,
.hero:has(.btn-primary:hover) .hero-circuit-v2 {
    filter: brightness(1.18) saturate(1.18);
}

.hero-video:has(.btn-primary:hover) .v2-line,
.hero:has(.btn-primary:hover) .v2-line {
    animation-duration: 1.9s;
    stroke-width: 4;
}

@media (max-width: 760px) {
    .hero-circuit-v2 {
        opacity: .62;
    }

    .v2-line {
        stroke-width: 2.5;
    }

    .v2-dots circle:nth-child(n+4) {
        display: none;
    }

    .v3-nodes circle:nth-child(n+7) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-line,
    .v3-nodes circle,
    .hero-bg-video,
    .hero-video > img,
    .hero > img {
        animation: none;
    }

    .v2-dots {
        display: none;
    }

    .hero-circuit-v2 {
        opacity: .35;
    }
}


/* =========================================================
   FOOTER ET PAGES D'INFORMATION
========================================================= */

.footer-warranty {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 17px !important;
    color: #dff7ff !important;
    font-weight: 750;
}

.footer-warranty i {
    color: #38cfff;
}

.footer-warranty-note {
    margin-top: 4px !important;
    color: #8190a8 !important;
    font-size: .78rem !important;
}

.footer-legal-mini {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
}

.footer-legal-mini a {
    color: #8fa2be;
    font-size: .83rem;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-legal-mini a:hover {
    color: #49d7ff;
}

.legal-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 75% 0%, rgba(11, 112, 255, .12), transparent 29%),
        linear-gradient(180deg, #070b12 0%, #0a101a 48%, #070b12 100%);
    color: #eef5ff;
}

.legal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(5, 9, 15, .86);
    backdrop-filter: blur(18px);
}

.legal-header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.legal-logo img {
    display: block;
    width: 148px;
    height: auto;
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid rgba(90, 166, 255, .25);
    border-radius: 999px;
    color: #eaf4ff;
    background: rgba(15, 51, 101, .25);
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.legal-back:hover {
    transform: translateY(-2px);
    border-color: rgba(80, 204, 255, .55);
    background: rgba(16, 86, 174, .3);
}

.legal-hero {
    padding: 86px 0 44px;
    text-align: center;
}

.legal-kicker {
    display: inline-flex;
    margin-bottom: 18px;
    color: #45d4ff;
    font-size: .79rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.legal-hero h1 {
    max-width: 920px;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.legal-hero p {
    max-width: 760px;
    margin: 24px auto 0;
    color: #aebbd0;
    font-size: 1.04rem;
    line-height: 1.75;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
    gap: 42px;
    padding-bottom: 90px;
}

.legal-content {
    display: grid;
    gap: 18px;
}

.legal-card {
    padding: clamp(25px, 4vw, 42px);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(19, 29, 44, .9), rgba(9, 15, 25, .94));
    box-shadow: 0 24px 70px rgba(0,0,0,.2);
}

.legal-card h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(1.25rem, 3vw, 1.72rem);
    letter-spacing: -.025em;
}

.legal-card h2 i {
    color: #43d0ff;
    font-size: .9em;
}

.legal-card h3 {
    margin: 26px 0 10px;
    color: #eaf5ff;
    font-size: 1.03rem;
}

.legal-card p,
.legal-card li {
    color: #b3c0d2;
    line-height: 1.78;
}

.legal-card ul {
    margin: 12px 0 0;
    padding-left: 21px;
}

.legal-card a {
    color: #52d7ff;
}

.legal-highlight {
    border-color: rgba(53, 194, 255, .23);
    background:
        radial-gradient(circle at 92% 5%, rgba(32, 142, 255, .16), transparent 35%),
        linear-gradient(145deg, rgba(17, 32, 52, .96), rgba(8, 15, 25, .96));
}

.legal-warning {
    padding: 18px 20px;
    border: 1px solid rgba(255, 184, 74, .32);
    border-radius: 17px;
    background: rgba(116, 74, 12, .16);
    color: #ffdca0;
    line-height: 1.6;
}

.legal-warning strong {
    color: #fff0ca;
}

.legal-toc {
    position: sticky;
    top: 110px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 22px;
    background: rgba(10, 17, 28, .78);
    backdrop-filter: blur(14px);
}

.legal-toc strong {
    display: block;
    margin-bottom: 13px;
    color: #fff;
}

.legal-toc a {
    display: block;
    padding: 8px 0;
    color: #9fb0c6;
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.4;
}

.legal-toc a:hover {
    color: #4fd7ff;
}

.legal-page-footer {
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #8190a8;
    text-align: center;
}

.legal-page-footer a {
    color: #b9c9dd;
}

.guarantee-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 16px;
    padding: 12px 17px;
    border: 1px solid rgba(58, 210, 255, .28);
    border-radius: 15px;
    color: #e9fbff;
    background: rgba(20, 121, 171, .13);
    font-weight: 800;
}

@media (max-width: 900px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .legal-header-inner {
        min-height: 70px;
    }

    .legal-logo img {
        width: 118px;
    }

    .legal-back {
        padding: 10px 13px;
        font-size: .86rem;
    }

    .legal-hero {
        padding-top: 60px;
    }

    .legal-card {
        border-radius: 20px;
    }
}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.contact-card a{color:inherit}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.contact-form{display:grid;gap:16px}.contact-form label{display:grid;gap:7px;font-weight:700}.contact-form label span,.form-note{font-weight:400;color:#9da9bc;font-size:.9rem}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0b111c;color:#fff;padding:13px 14px;font:inherit}.contact-form textarea{resize:vertical}.contact-consent{grid-template-columns:auto 1fr!important;align-items:start;font-weight:400!important}.contact-consent input{width:auto;margin-top:4px}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border:1px solid rgba(255,255,255,.25);border-radius:12px;text-decoration:none;color:#fff;font-weight:800}.legal-page-nav{display:flex;gap:18px;flex-wrap:wrap}.legal-page-nav a{color:#dce7f7;text-decoration:none}@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}


/* Bandeau temporaire des tarifs */
.price-update-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 980px;
    margin: 0 auto 26px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 193, 7, .58);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 193, 7, .14), rgba(255, 132, 0, .07));
    box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
    color: #fff;
}
.price-update-notice > i { color: #ffc107; font-size: 1.35rem; margin-top: 3px; }
.price-update-notice strong { display: block; margin-bottom: 4px; font-size: 1.06rem; }
.price-update-notice p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.6; }

/* Page Nos réalisations */
.portfolio-hero { padding: 150px 0 72px; text-align: center; position: relative; overflow: hidden; }
.portfolio-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(0,102,255,.22), transparent 58%); pointer-events: none; }
.portfolio-hero .container { position: relative; z-index: 1; }
.portfolio-hero h1 { max-width: 900px; margin: 12px auto 18px; font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1.05; }
.portfolio-hero p { max-width: 760px; margin: 0 auto; color: rgba(255,255,255,.78); font-size: 1.08rem; line-height: 1.7; }
.realisation-section { padding: 70px 0 100px; }
.realisation-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 38px; }
.realisation-card { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.045); box-shadow: 0 18px 55px rgba(0,0,0,.2); }
.realisation-visual { position: relative; min-height: 250px; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(135deg, rgba(0,102,255,.18), rgba(0,0,0,.45)); }
.realisation-half { display: grid; place-items: center; padding: 24px; color: rgba(255,255,255,.55); border-right: 1px solid rgba(255,255,255,.08); text-align: center; }
.realisation-half:last-child { border-right: 0; }
.realisation-half i { display:block; font-size: 2.4rem; margin-bottom: 10px; color:#4ca6ff; }
.realisation-badge { position:absolute; top:14px; left:14px; padding:7px 11px; border-radius:999px; background:rgba(5,12,27,.84); border:1px solid rgba(255,255,255,.12); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.realisation-content { padding: 22px; }
.realisation-content h2 { margin: 0 0 10px; font-size: 1.22rem; }
.realisation-content p { margin: 0; color: rgba(255,255,255,.7); line-height:1.65; }
.realisation-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.realisation-meta span { padding:7px 10px; border-radius:999px; background:rgba(0,102,255,.13); border:1px solid rgba(76,166,255,.2); color:#a9d3ff; font-size:.82rem; }
.portfolio-empty-note { margin-top:32px; padding:22px; border-radius:18px; border:1px dashed rgba(76,166,255,.4); background:rgba(0,102,255,.07); color:rgba(255,255,255,.8); text-align:center; }
@media (max-width: 900px) { .realisation-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .realisation-grid { grid-template-columns: 1fr; } .portfolio-hero { padding-top: 120px; } .price-update-notice { margin-left: 14px; margin-right: 14px; } }


/* Accessoires & protections */
.accessories-home{padding:95px 0;background:radial-gradient(circle at 15% 20%,rgba(0,102,255,.12),transparent 38%)}
.accessories-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}.accessory-mini-card{padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 18px 48px rgba(0,0,0,.18)}.accessory-mini-icon,.accessory-card-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:rgba(0,102,255,.16);border:1px solid rgba(76,166,255,.28);color:#5eb2ff;font-size:1.45rem}.accessory-mini-card h3{margin:20px 0 10px;font-size:1.25rem}.accessory-mini-card p{margin:0;color:rgba(255,255,255,.7);line-height:1.65}.accessories-home-action{text-align:center;margin-top:34px}
.accessories-hero{padding:155px 0 95px;position:relative;overflow:hidden}.accessories-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 35%,rgba(0,102,255,.25),transparent 35%),radial-gradient(circle at 15% 0%,rgba(32,190,255,.12),transparent 38%);pointer-events:none}.accessories-hero-inner{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center}.accessories-hero h1{font-size:clamp(2.6rem,5.4vw,5rem);line-height:1.03;margin:14px 0 22px;max-width:900px}.accessories-hero p{font-size:1.1rem;line-height:1.75;color:rgba(255,255,255,.76);max-width:720px}.accessories-hero-visual{min-height:360px;display:grid;place-items:center;position:relative;border:1px solid rgba(255,255,255,.1);border-radius:38px;background:linear-gradient(145deg,rgba(0,102,255,.18),rgba(255,255,255,.035));box-shadow:0 30px 80px rgba(0,0,0,.32)}.accessories-hero-visual>i{font-size:10rem;color:#e7f4ff;filter:drop-shadow(0 0 34px rgba(0,125,255,.48))}.accessories-hero-visual span{position:absolute;right:35px;bottom:34px;width:84px;height:84px;display:grid;place-items:center;border-radius:24px;background:#087cff;color:#fff;font-size:2rem;box-shadow:0 18px 45px rgba(0,102,255,.42)}
.accessories-catalog{padding:90px 0}.accessory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:42px}.accessory-card{padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.04);transition:transform .25s ease,border-color .25s ease}.accessory-card:hover{transform:translateY(-4px);border-color:rgba(76,166,255,.38)}.accessory-card h2{margin:20px 0 9px;font-size:1.45rem}.accessory-card>p{color:rgba(255,255,255,.7);line-height:1.65}.accessory-card ul{display:grid;gap:10px;margin:20px 0 24px;padding:0;list-style:none}.accessory-card li{color:rgba(255,255,255,.82)}.accessory-card li::before{content:"✓";color:#55b4ff;font-weight:900;margin-right:10px}.accessory-card>a{display:inline-flex;gap:10px;align-items:center;color:#79c1ff;font-weight:800;text-decoration:none}
.protection-compare{padding:90px 0;background:rgba(255,255,255,.018)}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}.compare-card{position:relative;padding:32px;border-radius:25px;border:1px solid rgba(255,255,255,.1);background:#0b111c}.compare-card.featured{border-color:rgba(56,157,255,.55);box-shadow:0 22px 65px rgba(0,102,255,.13)}.compare-badge{position:absolute;right:22px;top:20px;padding:7px 11px;border-radius:999px;background:rgba(0,102,255,.17);color:#84c7ff;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.compare-title{display:flex;align-items:center;gap:14px}.compare-title i{font-size:1.7rem;color:#58b4ff}.compare-title h3{font-size:1.55rem;margin:0}.compare-best{color:rgba(255,255,255,.7);margin:18px 0 24px}.compare-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}.compare-row i{color:#55b4ff;margin-top:3px}.compare-row.muted{color:rgba(255,255,255,.62)}.protection-advice{display:flex;gap:18px;align-items:flex-start;margin-top:28px;padding:25px;border:1px solid rgba(76,166,255,.26);border-radius:20px;background:rgba(0,102,255,.08)}.protection-advice>i{font-size:1.65rem;color:#6fbdff}.protection-advice strong{font-size:1.15rem}.protection-advice p{margin:7px 0 0;color:rgba(255,255,255,.72);line-height:1.65}.accessories-cta{padding:85px 0}.accessories-cta .container{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:38px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(135deg,rgba(0,102,255,.17),rgba(255,255,255,.035))}.accessories-cta h2{font-size:clamp(2rem,4vw,3.2rem);margin:10px 0}.accessories-cta p{margin:0;color:rgba(255,255,255,.72)}
@media(max-width:900px){.accessories-home-grid{grid-template-columns:1fr}.accessories-hero-inner{grid-template-columns:1fr}.accessories-hero-visual{min-height:280px}.accessory-grid,.compare-grid{grid-template-columns:1fr}.accessories-cta .container{display:block}.accessories-cta .hero-buttons{margin-top:25px}}
@media(max-width:620px){.accessories-hero{padding-top:120px}.accessories-hero-visual>i{font-size:7rem}.accessories-hero-visual span{width:68px;height:68px;right:22px;bottom:22px}.accessory-card,.compare-card{padding:24px}.compare-badge{position:static;display:inline-block;margin-bottom:18px}.accessories-cta .container{padding:26px}}

/* 3.0.2 — Sécurité d’affichage des contenus animés */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* RÉSEAUX SOCIAUX */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    align-self: start;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    color: var(--white);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.social-link i {
    font-size: 1.15rem;
}

.social-link:hover {
    transform: translateY(-2px);
    border-color: rgba(58,153,255,0.65);
    background: rgba(10,102,255,0.13);
    color: var(--white);
}

.social-whatsapp:hover {
    border-color: rgba(37,211,102,0.7);
    background: rgba(37,211,102,0.10);
}

.social-tiktok:hover {
    border-color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.08);
}

.social-snapchat:hover {
    border-color: rgba(255,252,0,0.7);
    background: rgba(255,252,0,0.08);
}

.legal-page-footer .social-links {
    justify-content: center;
    margin: 0 auto 18px;
}

@media (max-width: 680px) {
    .social-links {
        width: 100%;
    }
    .social-link {
        flex: 1 1 135px;
        justify-content: center;
    }
}


/* =========================================================
   NAVIGATION MOBILE PARTAGÉE — 10/09/2026
========================================================= */
.mobile-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: rgba(5,17,36,.96);
    color: #fff;
    font-size: 1.35rem;
    cursor: pointer;
}
.mobile-menu-toggle:focus-visible { outline: 3px solid #74d9ff; outline-offset: 3px; }
.navbar .mobile-nav-whatsapp { display: none !important; }
@media (max-width: 1024px) {
    .header { position: sticky; top: 0; z-index: 1000; }
    .header-content { position: relative; min-height: 72px; gap: 12px; }
    .mobile-menu-toggle { display: inline-flex; margin-left: auto; }
    .header-actions { display: none !important; }
    .navbar {
        display: flex !important;
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        z-index: 1001;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px;
        border: 1px solid rgba(90,182,255,.30);
        border-radius: 16px;
        background: rgba(4,13,28,.98);
        box-shadow: 0 20px 45px rgba(0,0,0,.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .navbar.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    .navbar a { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 10px; color: #fff; text-decoration: none; }
    .navbar a:hover, .navbar a:focus-visible { background: rgba(0,132,255,.18); color: #8fe7ff; }
    .navbar .mobile-nav-whatsapp { display: flex !important; justify-content: center; margin-top: 6px; background: #25d366; color: #fff; font-weight: 800; }
    body.mobile-menu-open { overflow: hidden; }
}

/* =========================================================
   FOOTER COMPACT — 10/09/2026
   4 blocs sur une ligne en desktop pour supprimer la zone vide.
========================================================= */
.footer-content {
    grid-template-columns: minmax(0, 1.35fr) minmax(165px, .78fr) minmax(165px, .82fr) minmax(250px, 1.15fr);
    align-items: start;
    gap: 34px;
    padding-top: 46px;
    padding-bottom: 38px;
}
.footer-brand img { width: 154px; max-height: 58px; margin-bottom: 16px; }
.footer-brand > p:not(.footer-warranty):not(.footer-warranty-note) { margin-bottom: 12px; line-height: 1.55; }
.footer-warranty { margin-top: 13px !important; margin-bottom: 3px; }
.footer-warranty-note { margin-bottom: 0; }
.footer-links h3, .footer-contact h3 { margin-bottom: 14px; }
.footer-links a { line-height: 1.45; margin-bottom: 5px; }
.footer-contact p { margin-bottom: 8px; line-height: 1.5; }
.footer-contact p:last-child { margin-bottom: 0; }
.footer .social-links { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; align-items: stretch; }
.footer .social-link { width: 100%; min-height: 40px; padding: 8px 12px; justify-content: flex-start; }
.footer-bottom { padding: 15px 20px 17px; }
.footer-bottom > p { margin-bottom: 6px; }
@media (max-width: 1100px) {
    .footer-content { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 42px; padding-top: 42px; padding-bottom: 34px; }
    .footer-brand { grid-column: auto; }
}
@media (max-width: 680px) {
    .footer-content { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 30px; }
    .footer .social-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .footer .social-link { justify-content: center; }
    .footer-bottom { padding-block: 14px 18px; }
}
@media (max-width: 430px) { .footer .social-links { grid-template-columns: 1fr; } }