/* Kilco — feuille de style principale.
   Bleu de marque repris du logo. */

:root {
    /* Bleu relevé directement dans le PNG du logo (#0746a3). */
    --bleu: #0746a3;
    --bleu-fonce: #05387f;
    /* Bleu plus lumineux, réservé aux appels à l'action et à la bande CTA. */
    --bleu-vif: #1565d8;
    --bleu-vif-fonce: #0f52b4;
    --bleu-clair: #eaf1fb;
    --encre: #14213a;
    --texte: #3d4a63;
    --gris: #6b7891;
    --bordure: #e3e8f0;
    --fond-alt: #f7f9fc;
    --blanc: #fff;

    /* Palette étendue pour les dégradés et effets lumineux. */
    --cyan: #22d3ee;
    --violet: #7c5cff;
    --rose: #ff5c9d;
    --menthe: #1ea672;

    /* Dégradé signature, réutilisé sur les titres, bordures et halos. */
    --degrade: linear-gradient(120deg, #1565d8, #7c5cff 45%, #22d3ee);
    --degrade-doux: linear-gradient(120deg, #1565d8, #4f8ef7 55%, #22d3ee);

    --wrap: 1100px;
    --rayon: 10px;
    /* Rayon généreux réservé aux nouveaux blocs "vitrine". */
    --rayon-xl: 22px;
    /* Hauteur de l'en-tête, reprise par .header-inner et le voile mobile. */
    --header-h: 76px;
    --ombre: 0 1px 2px rgba(20, 33, 58, .06), 0 8px 24px rgba(20, 33, 58, .06);
    --ombre-haute: 0 4px 12px rgba(20, 33, 58, .06), 0 24px 60px rgba(20, 33, 58, .14);
    --ressort: cubic-bezier(.22, 1, .36, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.65;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--encre);
    line-height: 1.2;
    letter-spacing: -.02em;
}

a {
    color: var(--bleu);
}

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

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--bleu);
    color: var(--blanc);
    padding: .75rem 1rem;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- En-tête ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--bordure);
}

/* Le flou est porté par un pseudo-élément et non par le header lui-même :
   un backdrop-filter sur le header créerait un contexte de contenance qui
   clipperait le voile mobile (position: fixed) à la hauteur de l'en-tête. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(8px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height: 42px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav > a {
    color: var(--texte);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
}

.nav > a:hover {
    color: var(--bleu);
}

.nav .actif {
    color: var(--bleu);
    font-weight: 600;
}

.nav-cta {
    background: var(--bleu-vif);
    color: var(--blanc) !important;
    padding: .55rem 1.1rem;
    border-radius: 7px;
    font-weight: 600;
}

.nav-cta:hover {
    background: var(--bleu-vif-fonce);
}

/* Bouton burger — visible uniquement en mobile (voir media query). */
.menu-btn {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border: 1px solid var(--bordure);
    border-radius: 9px;
    background: var(--blanc);
    transition: border-color .2s, background .2s;
}

.menu-btn:hover {
    border-color: var(--bleu);
}

/* Les trois traits du burger, centrés. */
.menu-btn-trait,
.menu-btn-trait::before,
.menu-btn-trait::after {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--encre);
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
}

.menu-btn-trait {
    top: 50%;
    transform: translate(-50%, -50%);
}

.menu-btn-trait::before,
.menu-btn-trait::after {
    content: "";
    left: 0;
}

.menu-btn-trait::before {
    top: -6px;
}

.menu-btn-trait::after {
    top: 6px;
}

/* Transformation en croix quand le menu est ouvert. */
.nav-ouvert .menu-btn-trait {
    background: transparent;
}

.nav-ouvert .menu-btn-trait::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-ouvert .menu-btn-trait::after {
    top: 0;
    transform: rotate(-45deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Boutons ---------- */

.btn {
    display: inline-block;
    padding: .85rem 1.6rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    /* Les <button> n'héritent pas de la hauteur de ligne du corps de page :
       sans ça, un bouton est plus court qu'un lien .btn au même style. */
    line-height: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.btn-primary {
    background: var(--bleu-vif);
    color: var(--blanc);
}

.btn-primary:hover {
    background: var(--bleu-vif-fonce);
    transform: translateY(-1px);
}

.btn-ghost {
    border-color: var(--bordure);
    color: var(--encre);
    background: var(--blanc);
}

.btn-ghost:hover {
    border-color: var(--bleu);
    color: var(--bleu);
}

.btn-block {
    width: 100%;
    text-align: center;
}

/* ---------- Hero & têtes de page ---------- */

.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--bordure);
}

/* Voile sombre pour garder le texte lisible par-dessus l'image. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 40, .55), rgba(10, 20, 40, .7));
}

.hero-inner {
    position: relative;
    z-index: 1;
    padding: 7rem 1.5rem 6rem;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hero .eyebrow {
    color: #cfe0ff;
}

.hero h1,
.hero .lead {
    color: #fff;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--bleu);
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    margin-bottom: 1.25rem;
}

.accent {
    color: var(--bleu);
}

.hero .accent {
    color: #7db0ff;
}

.lead {
    font-size: 1.15rem;
    color: var(--gris);
    max-width: 620px;
    margin: 0 auto;
}

/* Astérisque de renvoi : sur le mot « gratuitement » et devant la note. */
.renvoi {
    font-size: .55em;
    font-weight: 700;
    vertical-align: super;
    margin-left: .04em;
    color: var(--bleu);
}

.renvoi-note {
    color: var(--bleu);
    font-weight: 700;
    margin-right: .15em;
}

/* Badge de garantie sous le hero (design d'origine). */
.garantie {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    max-width: 500px;
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.35rem;
    text-align: left;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.garantie-icone {
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--bleu);
    margin-top: .1rem;
}

.garantie-titre {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bleu);
    margin-bottom: .3rem;
}

.garantie-texte {
    font-size: .98rem;
    line-height: 1.5;
    color: var(--encre);
}

/* Preuve chiffrée, dans l'en-tête de la section des avis. */
.bande-preuve-texte {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: -1.6rem 0 0;
    padding: .6rem 1.15rem .6rem .65rem;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--encre);
    text-align: left;
}

.bande-preuve-texte svg {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 5px;
    color: var(--blanc);
    background: #1ea672;
    border-radius: 50%;
}

.bande-preuve-texte strong {
    font-weight: 800;
    color: var(--bleu);
}

.hero-actions {
    display: flex;
    flex-direction: column;
    /* Le bouton s'étire sur la même largeur que la carte garantie
       au-dessus (même max-width) : les deux blocs sont alignés. */
    align-items: stretch;
    gap: .8rem;
    margin-top: 2.25rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Gros bouton d'appel à l'action du hero. */
.btn-cta {
    display: inline-flex;
    align-items: center;
    /* Contenu centré : le bouton occupe toute la largeur de .hero-actions. */
    justify-content: center;
    gap: .6rem;
    padding: 1.1rem 2.4rem;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--blanc);
    background: var(--bleu-vif);
    box-shadow: 0 14px 34px rgba(21, 101, 216, .5);
    transition: background .15s, transform .15s, box-shadow .15s;
}

.btn-cta:hover {
    background: var(--bleu-vif-fonce);
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(21, 101, 216, .6);
}

.btn-cta svg {
    width: 22px;
    height: 22px;
    transition: transform .15s;
}

.btn-cta:hover svg {
    transform: translateX(3px);
}

.hero-actions-note {
    font-size: .9rem;
    color: #cfe0ff;
}

/* Note Google sous le CTA du hero. */
.hero-note-google {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
    font-size: .95rem;
    color: #fff;
}

.hero-note-etoiles {
    display: inline-flex;
    gap: .1rem;
    color: #f5a623;
}

.hero-note-etoiles svg {
    width: 18px;
    height: 18px;
}

.hero-note-texte strong {
    font-weight: 800;
}

.hero-note-sep {
    margin: 0 .3rem;
    color: rgba(255, 255, 255, .5);
}

.page-head {
    background: var(--bleu-clair);
    border-bottom: 1px solid var(--bordure);
    padding: 3.75rem 0;
}

.page-head h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin-bottom: 1rem;
    max-width: 780px;
}

.page-head .lead {
    margin: 0;
    max-width: 700px;
}

.page-head .hero-actions {
    justify-content: flex-start;
}

/* ---------- Sections ---------- */

.section {
    padding: 4.5rem 0;
}

.section-alt {
    background: var(--fond-alt);
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
}

.section-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: .6rem;
}

.section-intro {
    color: var(--gris);
    max-width: 620px;
    margin-bottom: 2.5rem;
}

.section-more {
    margin-top: 2.25rem;
}

.lien-fort {
    font-weight: 600;
    text-decoration: none;
}

.lien-fort:hover {
    text-decoration: underline;
}

/* ---------- À propos ---------- */

.apropos {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: center;
}

.apropos-texte .eyebrow {
    margin-bottom: .75rem;
}

.apropos-texte .section-title {
    margin-bottom: 1rem;
}

.apropos-lead {
    font-size: 1.15rem;
    color: var(--encre);
    font-weight: 600;
    margin-bottom: 1rem;
}

.apropos-texte p + p {
    margin-top: 1rem;
}

.apropos-carte {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.75rem;
}

.apropos-chiffres {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}

.apropos-chiffres li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.apropos-chiffres strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bleu);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.apropos-chiffres span {
    font-size: .88rem;
    color: var(--gris);
    line-height: 1.35;
}

@media (max-width: 820px) {
    .apropos {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ---------- Grilles & cartes ---------- */

.grid {
    display: grid;
    gap: 1.25rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Plafonne à 3 colonnes : au-delà les cartes deviennent trop étroites. */
    max-width: 100%;
}

@media (min-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.6rem;
}

.card h2,
.card h3 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.card p {
    font-size: .97rem;
}

/* Cartes "arguments" avec icône et accroche */
.card--feature {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card--feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre);
    border-color: var(--bleu);
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: var(--bleu-clair);
    color: var(--bleu);
}

.card-icon svg {
    width: 22px;
    height: 22px;
}

.card--feature p strong {
    color: var(--encre);
    font-weight: 600;
}

.card--feature p {
    color: var(--gris);
    line-height: 1.55;
}

/* Carte-héros de la section « Pourquoi Kilco » : l'argument massue. */
.argument-phare {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    padding: 2.25rem;
    margin-bottom: 1.25rem;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--bleu);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

@media (min-width: 820px) {
    .argument-phare {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        gap: 2.5rem;
        padding: 2.5rem 2.75rem;
    }
}

.argument-phare-chiffre {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: var(--bleu);
}

.argument-phare-chiffre strong {
    font-size: clamp(3.6rem, 9vw, 5.5rem);
    font-weight: 800;
    line-height: .85;
    letter-spacing: -.04em;
}

.argument-phare-chiffre span {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.argument-phare-corps h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    margin-bottom: .6rem;
}

.argument-phare-corps p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texte);
}

.argument-phare-preuve {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-size: .93rem;
    font-weight: 600;
    color: var(--encre) !important;
}

.argument-phare-preuve svg {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 4px;
    color: var(--blanc);
    background: #1ea672;
    border-radius: 50%;
}

/* Arguments secondaires : volontairement discrets et scannables. */
.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (min-width: 980px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card--mini {
    padding: 1.35rem;
    background: transparent;
    transition: background .18s ease, border-color .18s ease;
}

.card--mini:hover {
    background: var(--blanc);
    border-color: var(--bleu);
}

.card--mini .card-icon {
    width: 36px;
    height: 36px;
    margin-bottom: .8rem;
    border-radius: 10px;
}

.card--mini .card-icon svg {
    width: 18px;
    height: 18px;
}

.card--mini h3 {
    font-size: 1rem;
    margin-bottom: .3rem;
}

.card--mini p {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--gris);
}

/* ---------- Carousel d'avis ---------- */

.avis-carousel {
    position: relative;
    max-width: var(--wrap);
    /* Respiration entre la preuve chiffrée (« 100 % … ») et les cartes.
       Le padding vertical laisse aussi la place au soulèvement des cartes
       au survol, qui serait sinon rogné par le viewport en overflow:hidden. */
    margin: 2.5rem auto 0;
    padding: .5rem 1.5rem;
}

.avis-viewport {
    /* Masque uniquement les débordements latéraux : une marge verticale
       négative compense le padding pour ne pas rogner l'ombre des cartes
       ni leur soulèvement au survol. */
    overflow: hidden;
    padding: 1rem 0;
    margin: -1rem 0;
}

.avis-track {
    display: flex;
    gap: 1.25rem;
    will-change: transform;
    /* Empêche le navigateur de gérer le scroll horizontal : on gère le drag en JS. */
    touch-action: pan-y;
    cursor: grab;
}

.avis-carte {
    flex: 0 0 auto;
    width: 85vw;
    max-width: 340px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Empêche la sélection de texte pendant le glissement. */
    user-select: none;
}

.avis-etoiles {
    display: flex;
    gap: .15rem;
    color: #f5a623;
}

.avis-etoiles svg {
    width: 18px;
    height: 18px;
}

.avis-texte {
    color: var(--texte);
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    flex: 1;
}

.avis-auteur {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.avis-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bleu-clair);
    color: var(--bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.avis-auteur strong {
    display: block;
    color: var(--encre);
    font-size: .95rem;
}

.avis-activite {
    display: block;
    color: var(--gris);
    font-size: .85rem;
}

/* Flèches de navigation — masquées sur mobile (swipe natif). */
.avis-nav {
    display: none;
}

@media (min-width: 768px) {
    .avis-carte {
        width: calc((var(--wrap) - 3rem - 3rem) / 3);
    }

    .avis-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--blanc);
        border: 1px solid var(--bordure);
        box-shadow: var(--ombre);
        color: var(--bleu);
        cursor: pointer;
        z-index: 2;
        transition: background .2s, color .2s;
    }

    .avis-nav:hover {
        background: var(--bleu);
        color: var(--blanc);
    }

    .avis-nav svg {
        width: 22px;
        height: 22px;
    }

    .avis-nav--prev {
        left: -8px;
    }

    .avis-nav--next {
        right: -8px;
    }
}

/* ---------- Réalisations ---------- */

.realisation {
    position: relative;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
    transition: transform .15s, box-shadow .15s;
}

.realisation:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(20, 33, 58, .08), 0 14px 34px rgba(20, 33, 58, .12);
}

.realisation-vignette {
    display: block;
    position: relative;
    z-index: 2;
    aspect-ratio: 1200 / 573;
    overflow: hidden;
    border-bottom: 1px solid var(--bordure);
    background: var(--fond-alt);
}

.realisation-vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .3s ease;
}

.realisation:hover .realisation-vignette img {
    transform: scale(1.03);
}

.realisation-corps {
    padding: 1.1rem 1.3rem 1.3rem;
}

.realisation-corps h3 {
    font-size: 1.1rem;
    margin-bottom: .2rem;
}

.realisation-corps h3 a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--encre);
    text-decoration: none;
}

/* Rend toute la carte cliquable, y compris la partie blanche */
.realisation-corps h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.realisation-corps h3 a:hover {
    color: var(--bleu);
}

.realisation-lien-icone {
    width: .85em;
    height: .85em;
    flex-shrink: 0;
    color: var(--gris);
    transition: color .15s, transform .15s;
}

.realisation:hover .realisation-lien-icone {
    color: var(--bleu);
    transform: translate(1px, -1px);
}

.realisation-corps p {
    font-size: .9rem;
    color: var(--gris);
}

/* Ancienneté « En ligne depuis … » sous l'activité. */
.realisation-depuis {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--gris);
}

.realisation-depuis svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--gris);
}

/* Rangée de statistiques (visiteurs, appels) sous le nom du site.
   Tient sur une seule ligne, même sur les cartes étroites. */
.realisation-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    margin-top: .9rem;
}

.realisation-stat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    padding: .32rem .55rem;
    border-radius: 8px;
    background: var(--bleu-clair);
    color: var(--encre);
    font-size: .8rem;
    line-height: 1.2;
    white-space: nowrap;
}

.realisation-stat svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--bleu);
}

.realisation-stat strong {
    font-weight: 700;
}

.realisation-stat span {
    color: var(--gris);
}

/* Couleurs distinctes : bleu = audience, vert = résultat (appels générés). */
.realisation-stat--visiteurs {
    background: var(--bleu-clair);
}

.realisation-stat--visiteurs svg {
    color: var(--bleu);
}

.realisation-stat--appels {
    background: #e7f6ee;
}

.realisation-stat--appels svg {
    color: #1a8a52;
}

.realisation-stat--appels strong {
    color: #14603a;
}

/* ---------- Étapes ---------- */

.steps {
    list-style: none;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    counter-reset: etape;
}

.step {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.6rem;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .9rem;
}

.step h2,
.step h3 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.step p {
    font-size: .97rem;
}

/* ---------- FAQ ---------- */

.faq {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 720px;
    margin: 0 auto;
}

.faq-item h3 {
    font-size: 1.05rem;
    margin-bottom: .4rem;
}

.faq-item p {
    font-size: .97rem;
}

/* ---------- Bandeau d'appel ---------- */

.cta-band {
    background: var(--bleu-vif);
    color: var(--blanc);
}

.cta-inner {
    padding: 4rem 1.5rem;
    text-align: center;
}

.cta-band h2 {
    color: var(--blanc);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: .75rem;
}

.cta-band p {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    color: rgba(255, 255, 255, .85);
}

.cta-band .btn-primary {
    background: var(--blanc);
    color: var(--bleu-vif);
}

.cta-band .btn-primary:hover {
    background: var(--bleu-clair);
}

/* ---------- Contact ---------- */

.contact-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--gris);
}

.contact-note {
    font-size: .95rem;
    color: var(--gris);
}

.contact-form {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.75rem;
    box-shadow: var(--ombre);
}

.field {
    margin-bottom: 1.1rem;
}

.field label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--encre);
    margin-bottom: .35rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--bordure);
    border-radius: 7px;
    font: inherit;
    font-size: .97rem;
    color: var(--encre);
    background: var(--blanc);
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(26, 74, 156, .12);
}

.form-note {
    margin-top: .9rem;
    font-size: .85rem;
    text-align: center;
    color: var(--gris);
}

/* Message affiché à la place du formulaire après envoi. */
.form-confirmation {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #14603a;
    background: #e7f6ee;
    border: 1px solid #b7e2c8;
    border-radius: 8px;
    text-align: center;
}

/* Formulaire de contact : intro à gauche, champs à droite (une colonne en mobile). */
.contact-form-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: start;
}

.contact-form-intro .section-intro {
    margin-bottom: 0;
}

.req {
    color: var(--bleu);
}

/* Mention « facultatif » discrète à côté des libellés optionnels. */
.opt {
    margin-left: .3rem;
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris);
    background: var(--fond-alt);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    padding: .08rem .5rem;
    vertical-align: middle;
}

.form-erreur {
    margin: -.25rem 0 1rem;
    padding: .6rem .85rem;
    font-size: .9rem;
    color: #b0453a;
    background: #fdf1ef;
    border: 1px solid #e5b5ae;
    border-radius: 7px;
}

.form-actions {
    margin-top: .5rem;
}

/* Bouton neutralisé pendant l'envoi du formulaire. */
.btn:disabled {
    opacity: .6;
    cursor: default;
}

/* Pot de miel anti-spam : hors écran plutôt que display:none, que certains
   robots repèrent et contournent. Invisible pour l'utilisateur. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Contacts directs (téléphone, e-mail) affichés à côté du formulaire. */
.contact-direct {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0;
}

.contact-direct li {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.contact-direct .contact-method-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bleu-clair);
    color: var(--bleu);
}

.contact-direct .contact-method-icone svg {
    width: 22px;
    height: 22px;
}

.contact-direct .contact-label {
    display: block;
}

.contact-direct-valeur {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
    word-break: break-word;
}

.contact-direct-valeur:hover {
    color: var(--bleu);
}

/* ---------- Avis (review gating) ---------- */

.avis-carte {
    max-width: 620px;
    margin: 0 auto;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 2.25rem;
    text-align: center;
}

.avis-carte .section-intro {
    margin-left: auto;
    margin-right: auto;
}

/* Rangée d'étoiles cliquables. */
.etoiles {
    display: inline-flex;
    gap: .35rem;
    margin: .5rem 0 .25rem;
}

.etoile {
    padding: .2rem;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.etoile svg {
    width: 46px;
    height: 46px;
    fill: #c2cbdb;
    stroke: #97a3ba;
    stroke-width: 1;
    transition: fill .1s, stroke .1s, transform .1s;
}

.etoile:hover svg {
    fill: #aab5c9;
    stroke: #7d8ba6;
    transform: scale(1.08);
}

.etoile.est-plein svg {
    fill: #f5b301;
    stroke: #d99a00;
}

/* Icône de confirmation (coche verte). */
.avis-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.avis-icone svg {
    width: 30px;
    height: 30px;
}

.avis-icone--ok {
    background: #e7f6ee;
    color: #1a8a52;
}

.avis-form {
    text-align: left;
    margin-top: 1.5rem;
}

/* ---------- Admin (suivi des avis) ---------- */

.admin-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-creer {
    margin-bottom: 2.5rem;
}

.admin-creer-form {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.admin-creer-form input[type="text"] {
    flex: 1 1 260px;
    padding: .7rem .85rem;
    border: 1px solid var(--bordure);
    border-radius: 7px;
    font: inherit;
    font-size: .97rem;
    color: var(--encre);
}

.admin-creer-form input[type="text"]:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(26, 74, 156, .12);
}

.admin-nouveau {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bleu-clair);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.admin-nouveau-label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--encre);
    margin-bottom: .6rem;
}

.admin-lien-copie {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.admin-lien-copie input {
    flex: 1 1 260px;
    padding: .6rem .75rem;
    border: 1px solid var(--bordure);
    border-radius: 7px;
    font: inherit;
    font-size: .92rem;
    color: var(--encre);
    background: var(--blanc);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

.admin-table th,
.admin-table td {
    padding: .75rem .85rem;
    text-align: left;
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}

.admin-table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris);
}

.admin-table tbody tr:hover {
    background: var(--fond-alt);
}

.pastille {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gris);
    background: var(--fond-alt);
    border: 1px solid var(--bordure);
}

.pastille--ok {
    color: #14603a;
    background: #e7f6ee;
    border-color: #b7e2c8;
}

.note-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.note-badge--haute {
    color: #14603a;
    background: #e7f6ee;
}

.note-badge--basse {
    color: #b0453a;
    background: #fdf1ef;
}

/* Cellule "Retour" : seule colonne où le texte peut passer à la ligne. */
.admin-retour {
    white-space: normal;
    min-width: 220px;
    max-width: 340px;
}

.retour-texte {
    display: block;
    font-size: .88rem;
    color: var(--texte);
    line-height: 1.45;
    white-space: pre-wrap;
}

.lien-mini {
    padding: .3rem .7rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bleu);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    cursor: pointer;
}

.lien-mini:hover {
    border-color: var(--bleu);
}

/* Actions de l'en-tête admin : lien vers l'autre écran + déconnexion. */
.admin-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

/* Les deux boutons ont des libellés de longueurs différentes et l'un est
   enveloppé dans un <form>. On les met sur une base de flex identique pour
   qu'ils fassent exactement la même largeur, et « stretch » aligne leurs
   hauteurs malgré l'enveloppe intermédiaire. */
.admin-actions {
    align-items: stretch;
}

/* Largeur commune, calée sur le libellé le plus long, sans occuper
   toute la place disponible. */
.admin-actions > .btn,
.admin-actions > .admin-logout {
    flex: 0 0 auto;
    min-width: 170px;
}

/* Le <form> doit s'étirer verticalement pour que son bouton, en hauteur
   100 %, s'aligne sur celui d'à côté. */
.admin-logout {
    display: flex;
    align-items: stretch;
}

/* Seul le bouton du <form> a besoin de width:100 % pour remplir son
   enveloppe ; le lien, lui, est déjà dimensionné par le flex parent. */
.admin-logout .btn {
    width: 100%;
}

.admin-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* ---------- Admin (fréquentation) ---------- */

.stat-periodes {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.stat-periode {
    padding: .4rem .9rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texte);
    text-decoration: none;
    background: var(--blanc);
    transition: border-color .2s, color .2s;
}

.stat-periode:hover {
    border-color: var(--bleu);
    color: var(--bleu);
}

.stat-periode.actif {
    color: var(--blanc);
    background: var(--bleu);
    border-color: var(--bleu);
}

.stat-tuiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-tuile {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.25rem 1.4rem;
}

.stat-tuile-val {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

.stat-tuile-lib {
    font-size: .84rem;
    font-weight: 600;
    color: var(--gris);
}

.stat-courbe-carte {
    padding: 1.4rem;
    margin-bottom: 1.5rem;
}

.stat-bloc-titre {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris);
    margin-bottom: 1rem;
}

/* La courbe s'étire en largeur (preserveAspectRatio="none") : l'épaisseur des
   traits est donc fixée en unités du viewBox, non mise à l'échelle. */
.stat-courbe {
    display: block;
    width: 100%;
    height: 170px;
    overflow: visible;
}

.stat-courbe-aire {
    fill: rgba(21, 101, 216, .10);
}

.stat-courbe-trait {
    fill: none;
    stroke: var(--bleu-vif);
    stroke-width: .4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.stat-courbe-trait--v {
    stroke: var(--violet);
    stroke-dasharray: 3 2;
}

.stat-courbe-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    font-size: .8rem;
    color: var(--gris);
}

.stat-legende {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

.stat-puce {
    display: inline-block;
    width: .7rem;
    height: .2rem;
    border-radius: 2px;
}

.stat-puce--pages { background: var(--bleu-vif); }
.stat-puce--visiteurs { background: var(--violet); }
.stat-legende .stat-puce:not(:first-child) { margin-left: .6rem; }

.stat-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.stat-bloc {
    padding: 1.4rem;
}

/* Bloc unique (les pays) : il occupe toute la largeur, on aère un peu. */
.stat-bloc--large {
    padding: 1.6rem 1.8rem;
}

.stat-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.stat-ligne {
    display: grid;
    grid-template-columns: minmax(70px, 8rem) 1fr auto;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
}

.stat-ligne-nom {
    font-weight: 600;
    color: var(--encre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-jauge {
    height: .5rem;
    border-radius: 999px;
    background: var(--fond-alt);
    border: 1px solid var(--bordure);
    overflow: hidden;
}

.stat-jauge-remplie {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--degrade-doux);
}

.stat-ligne-val {
    font-weight: 700;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-ligne-val small {
    font-weight: 600;
    color: var(--gris);
    margin-left: .35rem;
}

.stat-vide {
    font-size: .88rem;
    color: var(--gris);
}

.stat-titre-recent {
    margin: 2.5rem 0 1rem;
}

.stat-note {
    margin-top: 1.5rem;
    font-size: .84rem;
    color: var(--gris);
    max-width: 62ch;
}

@media (max-width: 860px) {
    .stat-tuiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .stat-tuile-val {
        font-size: 1.6rem;
    }

    /* Écrans étroits : la jauge passe sous le libellé plutôt que de l'écraser. */
    .stat-ligne {
        grid-template-columns: 1fr auto;
    }

    .stat-jauge {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* ---------- Pied de page ---------- */

.site-footer {
    background: var(--encre);
    color: rgba(255, 255, 255, .7);
    padding-top: 3.5rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

/* <picture> est une boîte en ligne : sans cela elle ajouterait l'espace
   réservé aux descendantes sous le logo. */
.footer-brand picture,
.logo picture {
    display: block;
}

.footer-logo {
    height: 26px;
    width: auto;
    background: var(--blanc);
    padding: .4rem .6rem;
    border-radius: 6px;
    margin-bottom: .9rem;
}

.footer-tag {
    font-size: .93rem;
    max-width: 300px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.footer-col h2 {
    color: var(--blanc);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .35rem;
}

.footer-col a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .93rem;
}

.footer-col a:hover {
    color: var(--blanc);
}

/* Bloc identité de l'éditeur : mêmes coordonnées que les mentions légales. */
.footer-identite address {
    font-style: normal;
    font-size: .93rem;
    line-height: 1.7;
}

.footer-tva {
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
}

.footer-legal {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
}

/* ---------- Mobile ---------- */

@media (max-width: 820px) {
    .contact-form-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 720px) {
    /* Le header ouvert doit passer au-dessus du contenu de la page :
       le panneau et le bouton sont ses enfants, leur z-index est donc
       plafonné par celui du header. */
    .site-header.nav-ouvert {
        z-index: 100;
    }

    .menu-btn {
        display: block;
        position: relative;
        z-index: 60;
    }

    /* Voile léger sur la page sous la feuille, pour concentrer l'attention
       sans masquer le site. Porté par le header et non par .nav : à
       l'intérieur du panneau il assombrirait son propre fond. */
    .site-header::after {
        content: "";
        position: fixed;
        /* Commence sous l'en-tête : le logo et le bouton restent nets. */
        top: var(--header-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 54;
        background: rgba(10, 20, 40, .3);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s;
    }

    .site-header.nav-ouvert::after {
        opacity: 1;
        visibility: visible;
    }

    /* Feuille qui se déroule depuis le haut, calée sous l'en-tête.
       Absolute (et non fixed) => elle s'accroche au header et ne couvre que
       la hauteur de son contenu, pas toute la page. */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 55;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        padding: .75rem 1rem 1rem;
        background: var(--blanc);
        border-bottom: 1px solid var(--bordure);
        box-shadow: 0 14px 30px rgba(20, 33, 58, .12);
        /* Fermé : la feuille remonte derrière l'en-tête et se rogne par le
           haut (clip-path plutôt que scaleY, qui écraserait le texte).
           Ni cliquable, ni lisible par les lecteurs d'écran. */
        transform: translateY(-12px);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
        visibility: hidden;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                    clip-path .3s cubic-bezier(.4, 0, .2, 1),
                    opacity .25s ease,
                    visibility .3s;
    }

    .nav-ouvert .nav {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
        visibility: visible;
    }

    .nav > a {
        padding: .85rem 1rem;
        border-radius: 10px;
        font-size: 1.05rem;
        text-align: center;
        /* Chaque lien descend en douceur ; contre-échelle du scaleY parent
           pour que le texte ne soit pas écrasé pendant l'animation. */
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, background .15s;
    }

    .nav > a:hover {
        background: var(--bleu-clair);
    }

    .nav-ouvert .nav > a {
        opacity: 1;
        transform: translateY(0);
    }

    /* Décalage progressif (effet cascade) des liens à l'ouverture. */
    .nav-ouvert .nav > a:nth-child(1) { transition-delay: .12s; }
    .nav-ouvert .nav > a:nth-child(2) { transition-delay: .18s; }
    .nav-ouvert .nav > a:nth-child(3) { transition-delay: .24s; }
    .nav-ouvert .nav > a:nth-child(4) { transition-delay: .30s; }

    .nav-cta {
        margin-top: .75rem;
        padding: .95rem 1.4rem;
    }

    .nav-cta:hover {
        background: var(--bleu-fonce);
    }

    /* Hero mobile compacté : tout doit tenir au-dessus de la ligne de flottaison
       pour que le bouton d'appel à l'action soit visible sans défiler. */
    .hero-inner {
        padding: 1.75rem 1.5rem 2rem;
    }

    .hero .eyebrow {
        margin-bottom: .6rem;
    }

    .hero-badge {
        margin-bottom: 1rem;
        padding: .35rem .8rem .35rem .4rem;
        font-size: .82rem;
    }

    .hero-badge svg {
        width: 20px;
        height: 20px;
    }

    .hero h1 {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
        margin-bottom: .8rem;
    }

    .hero .lead {
        font-size: 1rem;
    }

    .garantie {
        margin-top: 1.4rem;
        padding: .9rem 1.1rem;
        gap: .7rem;
    }

    .garantie-titre {
        font-size: .74rem;
        margin-bottom: .2rem;
    }

    .garantie-texte {
        font-size: .9rem;
        line-height: 1.45;
    }

    /* Le bouton s'aligne sur la largeur de la carte garantie (même max-width). */
    .hero-actions {
        margin-top: 1.4rem;
        align-items: stretch;
    }

    .btn-cta {
        justify-content: center;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: .95rem 1.9rem;
        font-size: 1.1rem;
    }

    .section {
        padding: 3rem 0;
    }
}

/* Très petits écrans : logo un peu plus compact. */
@media (max-width: 380px) {
    .logo img {
        height: 36px;
    }

    .header-inner {
        min-height: 64px;
    }

    /* On resserre encore un peu pour les petits iPhone. */
    .hero-inner {
        padding: 1.25rem 1.25rem 1.75rem;
    }

    .garantie {
        margin-top: 1.1rem;
    }

    .hero-actions {
        margin-top: 1.1rem;
    }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Pages légales ---------- */

.legal-content {
    max-width: 780px;
}

.legal-content h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    color: var(--bleu-fonce);
    margin: 2.25rem 0 .75rem;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    color: var(--texte);
    line-height: 1.7;
}

.legal-content ul {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.legal-content li {
    margin-bottom: .5rem;
}

.legal-content a {
    color: var(--bleu);
}

.legal-maj {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bordure);
    color: var(--gris);
    font-size: .9rem;
}

/* ============================================================
   COUCHE « VITRINE »
   Tout ce qui suit habille le site : mouvement, matière, relief.
   Écrit en dernier pour surcharger la base sans la réécrire.
   ============================================================ */

/* ---------- 1. Typographie affichage ---------- */

/* Police variable moderne pour les titres, avec repli système immédiat :
   le texte reste lisible même si la police n'arrive jamais. */
@font-face {
    font-family: "Kilco Display";
    src: local("Inter Display"), local("SF Pro Display"), local("Segoe UI Variable Display"),
         local("Inter"), local("Helvetica Neue");
    font-weight: 100 900;
    font-display: swap;
}

h1, h2, h3 {
    font-family: "Kilco Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: -.035em;
    font-weight: 800;
}

/* Barre de progression de lecture, collée sous l'en-tête. */
.barre-progression {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 200;
    transform: scaleX(var(--progres, 0));
    transform-origin: 0 50%;
    background: var(--degrade);
    pointer-events: none;
    will-change: transform;
}

/* ---------- 2. Apparitions au défilement ---------- */

/* État de départ : posé par le JS uniquement (classe sur <html>), pour que
   le contenu reste visible si le script ne s'exécute pas. */
.js-anim [data-anim] {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity .75s var(--ressort), transform .75s var(--ressort);
    transition-delay: var(--retard, 0ms);
}

.js-anim [data-anim="haut"]    { transform: translateY(34px); }
.js-anim [data-anim="gauche"]  { transform: translateX(-40px); }
.js-anim [data-anim="droite"]  { transform: translateX(40px); }
.js-anim [data-anim="zoom"]    { transform: scale(.92); }
.js-anim [data-anim="flou"]    { transform: translateY(20px); filter: blur(12px); }

.js-anim [data-anim].est-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Titres révélés mot par mot (découpage fait en JS).
   Le masque déborde légèrement (padding + marge négative) pour ne pas
   rogner les accents en haut ni les jambages en bas. */
.mot {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
    padding: .12em .04em .16em;
    margin: -.12em -.04em -.16em;
}

.mot > span {
    display: inline-block;
    transform: translateY(115%);
    transition: transform .9s var(--ressort);
    transition-delay: var(--retard, 0ms);
    will-change: transform;
}

.est-visible .mot > span,
.mot.est-visible > span {
    transform: translateY(0);
}

/* ---------- 3. Hero cinétique ---------- */

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    background-color: #060d1c;
    /* L'image est portée par ::after (voir plus bas) et non par le fond de la
       section : on peut ainsi l'agrandir en transform sans jamais perdre le
       « cover », y compris sur les écrans étroits. */
}

/* Calque d'image de fond, zoomé en douceur.

   L'image existe en quatre largeurs (WebP) et c'est le média qui choisit :
   inutile d'envoyer 2560 px à un téléphone. Le fichier le plus petit sert de
   valeur par défaut — un navigateur qui ne comprendrait aucune media query
   reçoit ainsi le fichier le plus léger, jamais le plus lourd.

   Ces largeurs doivent rester alignées avec le <link rel="preload"> de
   base.html : c'est le même fichier qu'on précharge, sinon on en télécharge
   deux. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* z-index 0 : au-dessus du fond de la section, sous le voile (::before,
       z-index 1) et sous le contenu (.hero-inner, z-index 2). */
    z-index: 0;
    background-image: url("img/hero-960.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroZoom 26s ease-in-out infinite alternate;
    will-change: transform;
}

/* Bornes strictement identiques à celles du <link rel="preload"> de
   index.html, sans quoi le navigateur téléchargerait deux images. */
@media (min-width: 601px) {
    .hero::after { background-image: url("img/hero-1440.webp"); }
}

@media (min-width: 1201px) {
    .hero::after { background-image: url("img/hero-1920.webp"); }
}

/* Au-delà, seuls les très grands écrans (ou le retina sur grand écran)
   justifient le fichier le plus lourd. Pas de preload à cette taille : le
   gain visuel ne vaut pas la priorité réseau. */
@media (min-width: 1800px), (min-width: 1201px) and (min-resolution: 1.5dppx) {
    .hero::after { background-image: url("img/hero-2560.webp"); }
}

@keyframes heroZoom {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}

/* Voile bleu profond, plus contrasté que le gris d'origine.
   Posé au-dessus du calque d'image (::after) pour garder le texte lisible. */
.hero::before {
    z-index: 1;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(21, 101, 216, .35), transparent 70%),
        linear-gradient(180deg, rgba(6, 13, 28, .74), rgba(6, 13, 28, .9));
}

/* Décor et contenu, empilés au-dessus du voile. */
.hero-aurore,
.hero-grille,
.hero-particules { z-index: 2; }

.hero-inner,
.hero-scroll,
.hero-vague { z-index: 3; }

/* Aurores : deux taches de couleur qui dérivent lentement derrière le texte. */
.hero-aurore {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    filter: blur(70px);
    /* Posée au-dessus du voile : l'opacité compense le fond déjà assombri. */
    opacity: .85;
}

.hero-aurore span {
    position: absolute;
    display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.hero-aurore span:nth-child(1) {
    width: 46vw; height: 46vw;
    left: 4%; top: 6%;
    background: radial-gradient(circle, #1565d8, transparent 62%);
    animation: derive1 22s ease-in-out infinite alternate;
}

.hero-aurore span:nth-child(2) {
    width: 38vw; height: 38vw;
    right: 2%; top: 24%;
    background: radial-gradient(circle, #7c5cff, transparent 62%);
    animation: derive2 27s ease-in-out infinite alternate;
}

.hero-aurore span:nth-child(3) {
    width: 30vw; height: 30vw;
    left: 38%; bottom: -6%;
    background: radial-gradient(circle, #22d3ee, transparent 62%);
    animation: derive3 19s ease-in-out infinite alternate;
}

@keyframes derive1 { to { transform: translate3d(14%, 12%, 0) scale(1.25); } }
@keyframes derive2 { to { transform: translate3d(-16%, 8%, 0) scale(1.18); } }
@keyframes derive3 { to { transform: translate3d(10%, -14%, 0) scale(1.3); } }

/* Grille en perspective : la signature "on sait faire du web". */
.hero-grille {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 176, 255, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 176, 255, .22) 1px, transparent 1px);
    background-size: 54px 54px;
    /* Fondu vers le centre pour que la grille ne mange pas le texte. */
    mask-image: radial-gradient(120% 80% at 50% 40%, transparent 30%, #000 92%);
    -webkit-mask-image: radial-gradient(120% 80% at 50% 40%, transparent 30%, #000 92%);
    animation: grilleDefile 18s linear infinite;
}

@keyframes grilleDefile {
    to { background-position: 54px 54px, 54px 54px; }
}

/* Particules discrètes qui montent (générées en JS). */
.hero-particules {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.particule {
    position: absolute;
    bottom: -12px;
    width: var(--taille, 4px);
    height: var(--taille, 4px);
    border-radius: 50%;
    background: rgba(190, 220, 255, .85);
    box-shadow: 0 0 10px rgba(120, 180, 255, .9);
    animation: monte var(--duree, 14s) linear var(--delai, 0s) infinite;
    opacity: 0;
}

@keyframes monte {
    0%   { opacity: 0; transform: translateY(0) translateX(0); }
    12%  { opacity: var(--alpha, .7); }
    88%  { opacity: var(--alpha, .7); }
    100% { opacity: 0; transform: translateY(calc(-1 * var(--course, 90vh))) translateX(var(--derive, 20px)); }
}

.hero-inner {
    padding-top: 8rem;
    padding-bottom: 7rem;
}

/* Étiquette "Agence web" transformée en pastille de verre. */
.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem 1rem .4rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    color: #dbe8ff;
    margin-bottom: 1.4rem;
}

/* Point vert clignotant : "disponible". */
.eyebrow-pastille {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35e08d;
    box-shadow: 0 0 0 4px rgba(53, 224, 141, .18);
}

.eyebrow-pastille::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #35e08d;
    animation: pulsePastille 2.2s ease-out infinite;
}

@keyframes pulsePastille {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(3.2); opacity: 0; }
}

.hero h1 {
    font-size: clamp(2.3rem, 6vw, 4.1rem);
    letter-spacing: -.045em;
    line-height: 1.05;
    text-wrap: balance;
}

/* Le mot fort du titre : dégradé animé.
   Le dégradé est porté par .accent ET par les mots découpés à l'intérieur :
   un background-clip:text sur un parent en display:inline n'est pas peint
   de façon fiable une fois le texte réparti dans des boîtes enfants. */
.hero .accent,
.hero .accent .mot > span {
    background: linear-gradient(100deg, #7db0ff, #c9a3ff 40%, #6ee7f9 70%, #7db0ff);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glisseDegrade 7s ease-in-out infinite;
}

.hero .accent { position: relative; }

@keyframes glisseDegrade {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.hero .lead {
    color: rgba(226, 236, 255, .82);
    font-size: 1.2rem;
}

/* Carte garantie en verre dépoli plutôt qu'en bloc blanc opaque. */
.garantie {
    position: relative;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(16px) saturate(140%);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Reflet qui balaie la carte en boucle. */
.garantie::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    animation: balayage 5.5s ease-in-out infinite;
}

@keyframes balayage {
    0%, 65% { left: -60%; }
    100%    { left: 130%; }
}

.garantie-icone { color: #7db0ff; }
.garantie-titre { color: #9dc2ff; }
.garantie-texte { color: #eaf1ff; }
.garantie-texte strong { color: #fff; }

/* Bouton d'appel principal : dégradé, halo, et brillance au survol. */
.btn-cta {
    position: relative;
    overflow: hidden;
    background: var(--degrade-doux);
    background-size: 200% 100%;
    box-shadow: 0 10px 30px rgba(21, 101, 216, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset;
    animation: glisseDegrade 6s ease-in-out infinite;
    transition: transform .35s var(--ressort), box-shadow .35s var(--ressort);
}

.btn-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    transition: left .6s var(--ressort);
}

.btn-cta:hover::before { left: 130%; }

.btn-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 46px rgba(21, 101, 216, .6), 0 0 0 1px rgba(255, 255, 255, .2) inset;
}

.btn-cta > * { position: relative; z-index: 1; }

.hero-note-google {
    padding: .5rem 1rem .5rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

.hero-note-etoiles svg {
    animation: etoilePop .5s var(--ressort) backwards;
}

.hero-note-etoiles svg:nth-child(1) { animation-delay: .1s; }
.hero-note-etoiles svg:nth-child(2) { animation-delay: .2s; }
.hero-note-etoiles svg:nth-child(3) { animation-delay: .3s; }
.hero-note-etoiles svg:nth-child(4) { animation-delay: .4s; }
.hero-note-etoiles svg:nth-child(5) { animation-delay: .5s; }

@keyframes etoilePop {
    from { transform: scale(0) rotate(-45deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* Indicateur de défilement en bas du hero. */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(219, 232, 255, .6);
    text-decoration: none;
}

.hero-scroll-souris {
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(219, 232, 255, .45);
    border-radius: 14px;
    position: relative;
}

.hero-scroll-souris::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: rgba(219, 232, 255, .9);
    animation: molette 1.8s ease-in-out infinite;
}

@keyframes molette {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(11px); opacity: .2; }
}

/* Vague SVG qui referme le hero sur la section suivante. */
.hero-vague {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 1;
    width: 100%;
    height: 70px;
    display: block;
    color: var(--fond-alt);
    pointer-events: none;
}

/* ---------- 4. En-tête vivant ---------- */

.site-header {
    background: rgba(255, 255, 255, .72);
    border-bottom: 1px solid transparent;
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-header::before { backdrop-filter: blur(14px) saturate(160%); }

/* Classe posée par le JS après quelques pixels de défilement. */
.site-header.est-colle {
    background: rgba(255, 255, 255, .86);
    border-bottom-color: var(--bordure);
    box-shadow: 0 8px 30px rgba(20, 33, 58, .08);
}

.logo img { transition: transform .4s var(--ressort); }
.logo:hover img { transform: scale(1.06) rotate(-1.5deg); }

/* Soulignement animé sous les liens de navigation. */
.nav-link {
    position: relative;
    padding-bottom: 2px;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--degrade);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .35s var(--ressort);
}

.nav-link:hover::after,
.nav-link.actif::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.nav-cta {
    position: relative;
    overflow: hidden;
    background: var(--degrade-doux);
    background-size: 200% 100%;
    box-shadow: 0 6px 18px rgba(21, 101, 216, .32);
    transition: transform .3s var(--ressort), box-shadow .3s var(--ressort), background-position .5s ease;
}

.nav-cta:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(21, 101, 216, .45);
}

/* ---------- 4 bis. Têtes de page intérieures ---------- */

.page-head {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    padding: 5rem 0 4.5rem;
    background:
        radial-gradient(70% 90% at 15% 0%, rgba(21, 101, 216, .14), transparent 65%),
        radial-gradient(60% 80% at 88% 100%, rgba(124, 92, 255, .13), transparent 65%),
        var(--bleu-clair);
}

/* Même grille que le hero, en beaucoup plus discret. */
.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(21, 101, 216, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 101, 216, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 78%);
    pointer-events: none;
}

.page-head .wrap { position: relative; z-index: 1; }

.page-head h1 {
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    text-wrap: balance;
}

.page-head .lead { color: var(--texte); }

/* ---------- 5. Sections & titres ---------- */

.section { position: relative; }

/* Halo coloré très diffus derrière les sections claires. */
.section-alt {
    border-top: 0;
    border-bottom: 0;
    background:
        radial-gradient(60% 50% at 12% 0%, rgba(21, 101, 216, .07), transparent 70%),
        radial-gradient(50% 50% at 88% 100%, rgba(124, 92, 255, .07), transparent 70%),
        var(--fond-alt);
}

.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    text-wrap: balance;
}

/* Petit trait dégradé sous chaque titre de section. */
.section-title::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin-top: .85rem;
    border-radius: 4px;
    background: var(--degrade);
}

.section-intro { font-size: 1.05rem; }

.eyebrow {
    display: inline-block;
    background: var(--degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Le hero garde sa pastille de verre : le texte y reste plein, pas dégradé. */
.hero .eyebrow {
    background: rgba(255, 255, 255, .07);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #dbe8ff;
}

/* ---------- 6. Cartes en relief ---------- */

/* Bordure dégradée révélée au survol, sans double bordure. */
.card,
.realisation,
.avis-carte,
.apropos-carte,
.contact-form,
.step {
    position: relative;
    border-radius: var(--rayon-xl);
    transition: transform .45s var(--ressort), box-shadow .45s var(--ressort), border-color .45s ease;
}

/* Les réalisations en sont exclues : leur bordure reste neutre pour ne pas
   concurrencer les couleurs des captures de sites qu'elles présentent. */
.card--feature,
.step {
    background:
        linear-gradient(var(--blanc), var(--blanc)) padding-box,
        var(--degrade) border-box;
    border: 1px solid transparent;
}

.card--feature:hover,
.step:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-haute);
}

/* Lueur qui suit le curseur sur les cartes (coordonnées posées en JS). */
.card--feature::before,
.realisation::before,
.step::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    background: radial-gradient(240px circle at var(--souris-x, 50%) var(--souris-y, 50%),
                rgba(21, 101, 216, .12), transparent 65%);
}

.card--feature:hover::before,
.realisation:hover::before,
.step:hover::before { opacity: 1; }

.card--feature > *,
.step > * { position: relative; z-index: 1; }

/* Icônes : fond dégradé et petit rebond au survol. */
.card-icon {
    background: var(--degrade);
    color: var(--blanc);
    box-shadow: 0 8px 20px rgba(21, 101, 216, .3);
    transition: transform .45s var(--ressort);
}

.card:hover .card-icon,
.step:hover .card-icon {
    transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

.card--mini {
    border-radius: 18px;
    border-color: transparent;
}

.card--mini:hover {
    border-color: transparent;
    background:
        linear-gradient(var(--blanc), var(--blanc)) padding-box,
        var(--degrade) border-box;
    border: 1px solid transparent;
    transform: translateY(-4px);
    box-shadow: var(--ombre);
}

/* ---------- 7. Argument phare ---------- */

.argument-phare {
    overflow: hidden;
    border: 1px solid transparent;
    border-left: 0;
    border-radius: var(--rayon-xl);
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--degrade) border-box;
    box-shadow: var(--ombre-haute);
}

/* Filet dégradé vertical à gauche, à la place de la bordure d'origine. */
.argument-phare::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--degrade);
}

.argument-phare-chiffre strong {
    background: var(--degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

/* ---------- 8. Bandeau de chiffres animés ---------- */

.stats-bande {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-top: 3rem;
    border-radius: var(--rayon-xl);
    overflow: hidden;
    background: var(--bordure);
    box-shadow: var(--ombre);
}

.stat-case {
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--blanc);
    transition: background .35s ease;
}

.stat-case:hover { background: var(--bleu-clair); }

.stat-valeur {
    display: block;
    font-family: "Kilco Display", system-ui, sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    display: block;
    margin-top: .5rem;
    font-size: .88rem;
    color: var(--gris);
    line-height: 1.35;
}

/* ---------- 9. Bandeau défilant (marquee) ---------- */

.ruban {
    overflow: hidden;
    padding: 1.1rem 0;
    background: var(--encre);
    /* Fondu sur les bords pour que le texte n'apparaisse pas net d'un coup. */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ruban-piste {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: rubanDefile 32s linear infinite;
}

.ruban:hover .ruban-piste { animation-play-state: paused; }

@keyframes rubanDefile {
    to { transform: translateX(-50%); }
}

.ruban-item {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
}

.ruban-item svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--cyan);
}

/* ---------- 10. Avis ---------- */

.avis-carte {
    border-radius: var(--rayon-xl);
    transition: transform .4s var(--ressort), box-shadow .4s var(--ressort);
}

/* Guillemet décoratif : uniquement sur la carte pleine largeur de la page
   « laisser un avis », jamais dans le carrousel où il chevaucherait le texte. */
.avis-form-carte::before {
    content: "«";
    position: absolute;
    top: .1rem;
    right: 1.1rem;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--bleu);
    opacity: .1;
    pointer-events: none;
}

.avis-carte:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-haute);
}

.avis-avatar {
    background: var(--degrade);
    color: var(--blanc);
    box-shadow: 0 6px 16px rgba(21, 101, 216, .3);
}

.avis-nav {
    transition: background .3s var(--ressort), color .3s var(--ressort), transform .3s var(--ressort);
}

.avis-nav:hover {
    background: var(--degrade);
    color: var(--blanc);
    transform: translateY(-50%) scale(1.12);
    border-color: transparent;
}

.bande-preuve-texte {
    box-shadow: var(--ombre);
    transition: transform .35s var(--ressort);
}

.bande-preuve-texte:hover { transform: translateY(-2px); }

/* ---------- 11. Réalisations ---------- */

.realisation { overflow: hidden; }

.realisation:hover {
    transform: translateY(-8px);
    box-shadow: var(--ombre-haute);
}

.realisation-vignette::after {
    /* Voile dégradé qui se lève au survol. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 13, 28, .55));
    opacity: 0;
    transition: opacity .4s ease;
}

.realisation:hover .realisation-vignette::after { opacity: 1; }

.realisation:hover .realisation-vignette img { transform: scale(1.07); }

.realisation-vignette img { transition: transform .7s var(--ressort); }

/* Badge "Voir le site" qui monte depuis le bas de la vignette. */
.realisation-badge {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    z-index: 2;
    transform: translate(-50%, 130%);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--encre);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    transition: transform .45s var(--ressort);
}

.realisation:hover .realisation-badge { transform: translate(-50%, 0); }

.realisation-badge svg { width: 14px; height: 14px; }

.realisation-stat {
    transition: transform .3s var(--ressort);
}

.realisation:hover .realisation-stat { transform: translateY(-2px); }

/* ---------- 13. FAQ en accordéon ---------- */

.faq { max-width: 800px; gap: .85rem; }

.faq-item {
    border-radius: 16px;
    border: 1px solid var(--bordure);
    background: var(--blanc);
    overflow: hidden;
    transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.faq-item[open] {
    border-color: transparent;
    background:
        linear-gradient(var(--blanc), var(--blanc)) padding-box,
        var(--degrade) border-box;
    box-shadow: var(--ombre);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-family: "Kilco Display", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--encre);
    transition: color .25s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--bleu); }

/* Chevron qui pivote à l'ouverture. */
.faq-chevron {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bleu-clair);
    color: var(--bleu);
    transition: transform .4s var(--ressort), background .3s ease, color .3s ease;
}

.faq-chevron svg { width: 16px; height: 16px; }

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    background: var(--degrade);
    color: var(--blanc);
}

/* La réponse se déroule : hauteur animée par le JS (grid-template-rows). */
.faq-reponse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ressort);
}

.faq-item[open] .faq-reponse { grid-template-rows: 1fr; }

.faq-reponse > div { overflow: hidden; }

.faq-reponse p {
    padding: 0 1.4rem 1.3rem;
    font-size: .97rem;
    color: var(--texte);
}

/* ---------- 14. Bandeau d'appel final ---------- */

.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--encre);
}

/* Dégradé animé + grille, pour un final qui claque. */
.cta-band::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, #1565d8, #7c5cff, #22d3ee, #1565d8);
    opacity: .55;
    filter: blur(60px);
    animation: tourne 18s linear infinite;
}

@keyframes tourne {
    to { transform: rotate(360deg); }
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 44px 44px;
}

.cta-inner {
    position: relative;
    z-index: 1;
    padding: 5.5rem 1.5rem;
}

.cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

.cta-band p { color: rgba(255, 255, 255, .9); }

.cta-band .btn-primary {
    padding: 1rem 2.2rem;
    border-radius: 12px;
    font-size: 1.05rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    transition: transform .35s var(--ressort), box-shadow .35s var(--ressort);
}

.cta-band .btn-primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .4);
}

/* ---------- 15. Formulaires ---------- */

.contact-form {
    box-shadow: var(--ombre-haute);
}

.field input,
.field select,
.field textarea {
    border-radius: 12px;
    background: var(--fond-alt);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    background: var(--blanc);
    border-color: var(--bleu-vif);
    box-shadow: 0 0 0 4px rgba(21, 101, 216, .14);
}

.btn-primary {
    position: relative;
    overflow: hidden;
    background: var(--degrade-doux);
    background-size: 200% 100%;
    transition: transform .3s var(--ressort), box-shadow .3s var(--ressort), background-position .5s ease;
}

.btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(21, 101, 216, .4);
}

/* ---------- 16. Pied de page ---------- */

.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--encre);
}

/* Lueur douce en haut du pied de page. */
.site-footer::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 720px;
    height: 360px;
    margin-left: -360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 101, 216, .5), transparent 68%);
    filter: blur(50px);
    pointer-events: none;
}

.footer-inner,
.footer-legal { position: relative; z-index: 1; }

.footer-col a {
    display: inline-block;
    transition: color .25s ease, transform .25s var(--ressort);
}

.footer-col a:hover { transform: translateX(4px); }

/* ---------- 18. Mobile & confort ---------- */

@media (max-width: 720px) {
    .hero-inner {
        padding-top: 3rem;
        padding-bottom: 4.5rem;
    }

    .hero-scroll { display: none; }

    .hero-grille { background-size: 38px 38px; }

    .cta-inner { padding: 4rem 1.5rem; }

    .stats-bande { margin-top: 2rem; }

    .stat-case { padding: 1.5rem 1rem; }
}

/* Sur écrans tactiles, on désactive les effets liés au survol. */
@media (hover: none) {
    .card--feature::before,
    .realisation::before,
    .step::before { display: none; }
}

/* Réduction des animations : on coupe tout le décor, on garde la lisibilité. */
@media (prefers-reduced-motion: reduce) {
    .hero,
    .hero-aurore span,
    .hero-grille,
    .particule,
    .ruban-piste,
    .cta-band::before,
    .garantie::after,
    .hero .accent,
    .btn-cta,
    .eyebrow-pastille::after,
    .hero-note-etoiles svg,
    .hero-scroll-souris::after {
        animation: none !important;
    }

    .js-anim [data-anim],
    .mot > span {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero { background-size: cover; }
}