/* =============================================================================
   Pixel & Commerce — feuille de style du site vitrine
   Charte tirée des visuels fournis : noir profond, fil d'or, jaune saturé.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
    /* Fonds */
    --noir:          #08080a;
    --noir-profond:  #050506;
    --surface:       #121216;
    --surface-haute: #1a1a20;
    --surface-bord:  #26262e;

    /* Or — repris du dégradé du fil lumineux */
    --or:            #ffd027;
    --or-clair:      #ffe680;
    --or-profond:    #d9a400;
    --or-sombre:     #8a6a00;
    --fil-or:        linear-gradient(135deg, #8a6a00 0%, #ffd027 35%, #fff3b0 50%, #ffd027 65%, #8a6a00 100%);

    /* Texte */
    --texte:         #f4f4f6;
    --texte-doux:    #b8b8c2;
    --texte-faible:  #7c7c88;

    /* Sémantique */
    --succes:        #3ecf8e;
    --alerte:        #ff9f43;
    --erreur:        #ff5f56;

    /* Rythme */
    --rayon:         14px;
    --rayon-sm:      9px;
    --rayon-lg:      22px;
    --largeur:       1180px;
    --gouttiere:     clamp(1.25rem, 4vw, 2.5rem);

    /* Ombres */
    --ombre:         0 18px 50px rgb(0 0 0 / 55%);
    --ombre-or:      0 0 0 1px rgb(255 208 39 / 22%), 0 18px 60px rgb(255 208 39 / 10%);

    /* Typographie */
    --police: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --police-titre: var(--police);
    --police-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* -----------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* L'attribut hidden doit l'emporter sur les display: des composants. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    /* Compense la hauteur de l'en-tête collant lors des ancres */
    scroll-padding-top: 6rem;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    background: var(--noir);
    color: var(--texte);
    font-family: var(--police);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

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

a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-clair); }

ul, ol { padding: 0; list-style: none; }

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

::selection { background: var(--or); color: #101010; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    color: var(--texte-doux);
    line-height: 1.65;
}

.or { color: var(--or); }
.doux { color: var(--texte-doux); }
.faible { color: var(--texte-faible); }
.petit { font-size: 0.875rem; }
.centre { text-align: center; }

/* Texte rempli par le dégradé du fil d'or */
.degrade-or {
    background: var(--fil-or);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -----------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */
.conteneur {
    width: min(100% - (var(--gouttiere) * 2), var(--largeur));
    margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--serree { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section-entete {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.section-entete--centre {
    margin-inline: auto;
    text-align: center;
}

.surtitre {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--or);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.surtitre::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: var(--fil-or);
}

.section-entete--centre .surtitre::after {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: var(--fil-or);
}

.grille { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Ligne dorée de séparation entre les sections */
.separateur {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgb(255 208 39 / 30%), transparent);
}

/* -----------------------------------------------------------------------------
   5. En-tête et navigation
   -------------------------------------------------------------------------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(8 8 10 / 72%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: background 0.25s, border-color 0.25s;
}

.entete.est-defilee {
    background: rgb(6 6 8 / 92%);
    border-bottom-color: var(--surface-bord);
}

.entete__interieur {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.5rem;
}

.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: var(--texte);
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.logo:hover { color: var(--texte); }
.logo__pixel { color: var(--texte); }
.logo__commerce { color: var(--or); }

.nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.nav__lien {
    position: relative;
    padding: 0.5rem 0.85rem;
    border-radius: var(--rayon-sm);
    color: var(--texte-doux);
    font-size: 0.94rem;
    font-weight: 500;
    transition: color 0.18s, background 0.18s;
}

.nav__lien:hover,
.nav__lien.est-active {
    background: rgb(255 255 255 / 5%);
    color: var(--texte);
}

.nav__lien.est-active::after {
    content: "";
    position: absolute;
    inset-inline: 0.85rem;
    bottom: 0.28rem;
    height: 2px;
    border-radius: 2px;
    background: var(--fil-or);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.75rem;
}

/* 44 px de côté : la cible tactile confortable retenue par les référentiels
   d'accessibilité mobile. */
.burger {
    display: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: transparent;
    color: var(--texte);
    cursor: pointer;
}

@media (max-width: 900px) {
    .burger { display: grid; margin-left: auto; }

    .nav {
        position: fixed;
        inset: 4.5rem 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        margin: 0;
        padding: 1rem var(--gouttiere) 1.75rem;
        background: rgb(6 6 8 / 98%);
        border-bottom: 1px solid var(--surface-bord);
        box-shadow: var(--ombre);
        transform: translateY(-135%);
        transition: transform 0.28s ease;
        visibility: hidden;
    }

    .nav.est-ouverte { transform: translateY(0); visibility: visible; }

    .nav__lien { padding: 0.85rem 0.75rem; font-size: 1.05rem; }
    .nav__lien.est-active::after { display: none; }
    .nav__actions { flex-direction: column; align-items: stretch; margin: 0.75rem 0 0; }
    .nav__actions .bouton { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.82rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.97rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}

.bouton:active { transform: translateY(1px); }

.bouton--or {
    background: linear-gradient(135deg, var(--or) 0%, #ffc400 100%);
    color: #17130a;
    box-shadow: 0 10px 34px rgb(255 208 39 / 22%);
}

.bouton--or:hover {
    color: #17130a;
    box-shadow: 0 14px 44px rgb(255 208 39 / 34%);
    transform: translateY(-2px);
}

.bouton--fantome {
    border-color: var(--surface-bord);
    background: rgb(255 255 255 / 3%);
    color: var(--texte);
}

.bouton--fantome:hover {
    border-color: rgb(255 208 39 / 45%);
    background: rgb(255 208 39 / 8%);
    color: var(--texte);
    transform: translateY(-2px);
}

.bouton--nu {
    padding-inline: 0.35rem;
    color: var(--texte-doux);
}

.bouton--nu:hover { color: var(--or); }

.bouton--large { width: 100%; }
.bouton--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* min-height plutôt qu'un simple padding : la variante compacte tombait à
   41 px, sous le seuil de confort tactile. */
.bouton--sm { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.86rem; }

/* Sur écran tactile, tout ce qui se touche fait au moins 44 px, quelle que
   soit la largeur de l'écran — une tablette n'est pas un ordinateur. */
@media (pointer: coarse) {
    .bouton,
    .nav__lien,
    .faq__item summary { min-height: 2.75rem; }

    .nav__lien { display: flex; align-items: center; }
}

.bouton[disabled], .bouton[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.bouton__fleche { transition: transform 0.2s; }
.bouton:hover .bouton__fleche { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   7. Section héros
   -------------------------------------------------------------------------- */
.heros {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(92vh, 54rem);
    padding-block: clamp(4rem, 10vw, 7rem);
    overflow: hidden;
}

/* Le visuel « fil d'or » sert de fond, décalé à droite sur grand écran */
.heros__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/fond-epure.jpg");
    background-position: 72% center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.85;
}

/* Voile dégradé pour garantir la lisibilité du texte par-dessus le visuel */
.heros__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, var(--noir) 0%, rgb(8 8 10 / 92%) 38%, rgb(8 8 10 / 45%) 62%, rgb(8 8 10 / 25%) 100%),
        linear-gradient(to top, var(--noir) 0%, transparent 30%);
}

/* 48rem, et non 42 : au-delà de 1200 px la police du titre atteint son
   plafond alors que le bloc, lui, restait figé. « que votre commerce mérite »
   réclamait 829 px pour 672 disponibles, et le dernier mot tombait seul sur
   une troisième ligne. Voir aussi le plafond de .heros h1. */
.heros__contenu { max-width: 48rem; }

.heros__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    padding: 0.42rem 0.95rem 0.42rem 0.5rem;
    border: 1px solid rgb(255 208 39 / 25%);
    border-radius: 999px;
    background: rgb(255 208 39 / 7%);
    color: var(--or-clair);
    font-size: 0.82rem;
    font-weight: 550;
}

.heros__badge span {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--or);
    color: #17130a;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Plafond abaissé à 3.5rem : le titre du héros comporte une ligne longue que
   les 4rem génériques faisaient déborder de son bloc sur grand écran. Les
   autres pages gardent le plafond global, leurs titres étant plus courts. */
.heros h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.heros__accroche {
    max-width: 34rem;
    margin-bottom: 2.25rem;
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    color: var(--texte-doux);
}

.heros__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 3rem;
}

.heros__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 8%);
}

.preuve__valeur {
    display: block;
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.preuve__libelle {
    font-size: 0.84rem;
    color: var(--texte-faible);
}

/* -----------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */
.carte {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-lg);
    background: linear-gradient(160deg, var(--surface) 0%, var(--noir-profond) 100%);
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.carte:hover {
    border-color: rgb(255 208 39 / 28%);
    box-shadow: var(--ombre);
    transform: translateY(-4px);
}

.carte__icone {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.15rem;
    border: 1px solid rgb(255 208 39 / 22%);
    border-radius: 12px;
    background: rgb(255 208 39 / 8%);
    color: var(--or);
}

.carte h3 { margin-bottom: 0.6rem; }
.carte p { color: var(--texte-doux); font-size: 0.96rem; }

/* -----------------------------------------------------------------------------
   9. Offres
   -------------------------------------------------------------------------- */
.offres {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
}

/* Une carte seule : auto-fit l'étirerait sur toute la largeur du conteneur.
   Utilisé par les pages métiers, qui ne mettent en avant qu'une offre. */
.offres--une {
    max-width: 26rem;
    margin-inline: auto;
}

.offre {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.35rem);
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-lg);
    background: linear-gradient(165deg, var(--surface) 0%, var(--noir-profond) 100%);
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.offre:hover {
    border-color: rgb(255 208 39 / 30%);
    transform: translateY(-5px);
}

/* L'offre mise en avant : bordure dorée et léger décalage vertical */
.offre--vedette {
    border-color: rgb(255 208 39 / 45%);
    background:
        radial-gradient(120% 90% at 50% 0%, rgb(255 208 39 / 11%) 0%, transparent 58%),
        linear-gradient(165deg, var(--surface-haute) 0%, var(--noir-profond) 100%);
    box-shadow: var(--ombre-or);
}

@media (min-width: 62rem) {
    .offre--vedette { transform: translateY(-1.25rem); }
    .offre--vedette:hover { transform: translateY(-1.75rem); }
}

.offre__badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.32rem 1rem;
    border-radius: 999px;
    background: var(--fil-or);
    color: #17130a;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.offre { position: relative; }

.offre__nom {
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.offre__accroche {
    min-height: 2.9rem;
    margin-bottom: 1.5rem;
    color: var(--texte-faible);
    font-size: 0.9rem;
}

.offre__prix {
    padding-block: 1.25rem;
    border-block: 1px solid var(--surface-bord);
    margin-bottom: 1.5rem;
}

.offre__setup {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
}

.offre__montant {
    font-size: 2.35rem;
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1;
}

.offre--vedette .offre__montant { color: var(--or); }

.offre__unite { color: var(--texte-faible); font-size: 0.88rem; }

.offre__abo {
    color: var(--texte-doux);
    font-size: 0.95rem;
}

.offre__abo strong { color: var(--texte); font-weight: 650; }

.offre__resume {
    margin-bottom: 1.35rem;
    color: var(--texte-doux);
    font-size: 0.94rem;
}

.offre__liste {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.75rem;
}

.offre__liste li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.7rem;
    align-items: start;
    font-size: 0.93rem;
}

.offre__liste li svg { margin-top: 0.32rem; color: var(--or); }
.offre__liste li strong { font-weight: 600; }
.offre__liste li span { display: block; color: var(--texte-faible); font-size: 0.85rem; }

.offre__liste--absent li svg { color: var(--texte-faible); opacity: 0.5; }
.offre__liste--absent li { color: var(--texte-faible); text-decoration: line-through; text-decoration-color: rgb(255 255 255 / 20%); }

.offre__pied { margin-top: auto; }

.offre__mention {
    margin-top: 0.85rem;
    color: var(--texte-faible);
    font-size: 0.78rem;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   10. Tableau comparatif
   -------------------------------------------------------------------------- */
.comparatif-boite {
    overflow-x: auto;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-lg);
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

.comparatif {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.comparatif th,
.comparatif td {
    padding: 0.95rem 1.15rem;
    text-align: left;
    border-bottom: 1px solid var(--surface-bord);
}

.comparatif thead th {
    position: sticky;
    top: 0;
    background: var(--surface-haute);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.comparatif thead th:not(:first-child) { text-align: center; }
.comparatif td:not(:first-child) { text-align: center; }

.comparatif th.est-vedette,
.comparatif td.est-vedette {
    background: rgb(255 208 39 / 6%);
}

.comparatif thead th.est-vedette { color: var(--or); }

.comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif tbody tr:hover td { background: rgb(255 255 255 / 3%); }
.comparatif tbody tr:hover td.est-vedette { background: rgb(255 208 39 / 9%); }

.comparatif .categorie td {
    background: var(--noir-profond);
    color: var(--or);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.marque-oui { color: var(--or); }
.marque-non { color: var(--texte-faible); opacity: 0.45; }

/* -----------------------------------------------------------------------------
   11. Étapes du parcours
   -------------------------------------------------------------------------- */
.etapes {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    counter-reset: etape;
}

.etape {
    position: relative;
    padding-top: 3.25rem;
    counter-increment: etape;
}

.etape::before {
    content: counter(etape, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--police-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--or);
}

/* Le trait horizontal reliant les étapes, façon fil d'or */
.etape::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 2.5rem;
    right: -1.5rem;
    height: 1px;
    background: linear-gradient(90deg, rgb(255 208 39 / 45%), rgb(255 208 39 / 5%));
}

.etape:last-child::after { display: none; }

@media (max-width: 60rem) {
    .etape::after { display: none; }
}

.etape h3 { margin-bottom: 0.5rem; }
.etape p { color: var(--texte-doux); font-size: 0.94rem; }

/* -----------------------------------------------------------------------------
   12. Bloc démonstration
   -------------------------------------------------------------------------- */
.demo-bloc {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-lg);
    background:
        linear-gradient(100deg, rgb(8 8 10 / 96%) 0%, rgb(8 8 10 / 80%) 55%, rgb(8 8 10 / 55%) 100%),
        url("../img/fond-complexe.jpg") right center / cover no-repeat;
}

.demo-bloc__contenu { max-width: 34rem; }

.demo-bloc h2 { margin-bottom: 1rem; }
.demo-bloc p { margin-bottom: 1.75rem; color: var(--texte-doux); }

.demo-url {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: rgb(0 0 0 / 45%);
    font-family: var(--police-mono);
    font-size: 0.88rem;
    color: var(--or-clair);
}

.demo-url::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--succes);
    box-shadow: 0 0 0 3px rgb(62 207 142 / 18%);
}

/* -----------------------------------------------------------------------------
   13. Foire aux questions
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.75rem; max-width: 52rem; margin-inline: auto; }

.faq__item {
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.2s;
}

.faq__item[open] { border-color: rgb(255 208 39 / 30%); }

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

.faq__item summary::after {
    content: "+";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--surface-bord);
    border-radius: 50%;
    color: var(--or);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.22s;
}

.faq__item[open] summary::after { content: "−"; transform: rotate(180deg); }

.faq__reponse {
    padding: 0 1.35rem 1.35rem;
    color: var(--texte-doux);
    font-size: 0.96rem;
}

/* -----------------------------------------------------------------------------
   14. Appel à l'action final
   -------------------------------------------------------------------------- */
.cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    border: 1px solid rgb(255 208 39 / 25%);
    border-radius: var(--rayon-lg);
    background:
        radial-gradient(90% 130% at 50% 0%, rgb(255 208 39 / 12%) 0%, transparent 62%),
        linear-gradient(165deg, var(--surface-haute), var(--noir-profond));
    text-align: center;
}

.cta h2 { margin-bottom: 1rem; }
.cta p { max-width: 38rem; margin: 0 auto 2rem; color: var(--texte-doux); }

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.pied {
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-block: clamp(3rem, 6vw, 4rem) 2rem;
    border-top: 1px solid var(--surface-bord);
    background: var(--noir-profond);
}

/* Colonnes explicites plutôt qu'auto-fit : auto-fit ne supprime que les pistes
   vides, jamais celles qui portent du contenu — la largeur minimale
   s'additionnait donc et débordait de l'écran. Chaque palier pose exactement
   autant de pistes qu'il y a de blocs : une piste de trop et le dernier bloc
   part seul sur une deuxième ligne, en laissant un grand vide à sa droite. */
.pied__grille {
    display: grid;
    gap: 1.75rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 3rem;
}

/* Le bloc d'introduction prend toute la largeur tant que les colonnes de liens
   ne tiennent pas toutes sur une ligne à côté de lui. Le bloc contact fait de
   même sur deux colonnes : l'adresse e-mail y est plus large qu'une demi-page
   de téléphone, et se couperait au milieu du nom de domaine. */
.pied__intro,
.pied__contact { grid-column: 1 / -1; }

@media (min-width: 34rem) {
    /* Quatre colonnes de liens, l'introduction au-dessus. La dernière piste est
       plus large : c'est celle qui porte l'adresse e-mail. */
    .pied__grille {
        gap: 2.25rem 1.75rem;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 1.3fr;
    }

    .pied__contact { grid-column: auto; }
}

/* 74rem et non 60rem : en dessous, la cinquième piste devient trop étroite pour
   l'adresse e-mail, qui repart sur deux lignes — exactement ce que ce découpage
   cherche à éviter. */
@media (min-width: 74rem) {
    .pied__grille {
        gap: 2.25rem 2rem;
        grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) 1.2fr;
    }

    .pied__intro { grid-column: auto; }
}

.pied__intro p {
    max-width: 24rem;
    margin-top: 1rem;
    color: var(--texte-faible);
    font-size: 0.92rem;
}

/* Zone d'intervention. Elle vivait dans la colonne « Votre métier », où elle
   n'a rien à faire : un département n'est pas une activité. */
.pied__zone {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-top: 1.25rem;
}

.pied__zone svg {
    flex: none;
    margin-top: 0.15rem;
    color: var(--or);
}

.pied__zone a {
    color: var(--texte-doux);
    transition: color 0.18s;
}

.pied__zone a:hover { color: var(--or); }

.pied h4 {
    margin-bottom: 1rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

/* min-width: 0 — sans cela un enfant de grille refuse de descendre sous la
   largeur de son contenu et déborde sur la colonne voisine. Une adresse
   e-mail longue suffit à provoquer le chevauchement. */
.pied__grille > * { min-width: 0; }

.pied__liens { display: grid; gap: 0.6rem; }

.pied__liens a {
    display: inline-block;
    max-width: 100%;
    color: var(--texte-doux);
    font-size: 0.93rem;
    overflow-wrap: anywhere;
    transition: color 0.18s;
}

.pied__liens a:hover { color: var(--or); }

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid var(--surface-bord);
    color: var(--texte-faible);
    font-size: 0.85rem;
}

.pied__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}

/* Séparateur tracé en CSS plutôt qu'écrit dans le HTML : un point médian dans
   le texte serait annoncé par les lecteurs d'écran au milieu des libellés. */
.pied__legal li + li { position: relative; }

.pied__legal li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.75rem;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--texte-faible);
    transform: translateY(-50%);
}

.pied__legal a {
    color: var(--texte-doux);
    transition: color 0.18s;
}

.pied__legal a:hover { color: var(--or); }

.pied__mentions p + p { margin-top: 0.3rem; }

@media (min-width: 48rem) {
    .pied__mentions { text-align: right; }
}

/* -----------------------------------------------------------------------------
   16. Formulaires
   -------------------------------------------------------------------------- */
.champ { margin-bottom: 1.35rem; }

.champ > label,
.champ__legende {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.champ__aide {
    display: block;
    margin-top: 0.4rem;
    color: var(--texte-faible);
    font-size: 0.83rem;
}

.requis { color: var(--or); }

.saisie,
.zone-texte,
.liste-deroulante {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: var(--noir-profond);
    color: var(--texte);
    font-size: 0.97rem;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.saisie::placeholder,
.zone-texte::placeholder { color: var(--texte-faible); }

.saisie:focus,
.zone-texte:focus,
.liste-deroulante:focus {
    outline: none;
    border-color: var(--or);
    background: #0b0b0e;
    box-shadow: 0 0 0 3px rgb(255 208 39 / 14%);
}

.zone-texte { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.liste-deroulante {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffd027' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

.liste-deroulante option { background: var(--surface); color: var(--texte); }

.champ.est-invalide .saisie,
.champ.est-invalide .zone-texte,
.champ.est-invalide .liste-deroulante {
    border-color: var(--erreur);
}

.champ__erreur {
    display: block;
    margin-top: 0.4rem;
    color: var(--erreur);
    font-size: 0.84rem;
    font-weight: 500;
}

.duo {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Cases à cocher et boutons radio présentés en pastilles cliquables */
.choix-grille {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.choix {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: var(--noir-profond);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}

.choix:hover { border-color: rgb(255 208 39 / 35%); }

.choix input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--or);
    cursor: pointer;
}

.choix:has(input:checked) {
    border-color: var(--or);
    background: rgb(255 208 39 / 8%);
}

.choix__texte { font-size: 0.93rem; line-height: 1.45; }
.choix__texte span { display: block; color: var(--texte-faible); font-size: 0.82rem; }

/* Zone de dépôt des photos */
.depot {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 2.25rem 1.5rem;
    border: 1.5px dashed var(--surface-bord);
    border-radius: var(--rayon);
    background: var(--noir-profond);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.depot:hover,
.depot.est-survolee {
    border-color: var(--or);
    background: rgb(255 208 39 / 6%);
}

.depot input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.depot__icone { color: var(--or); }
.depot__titre { font-weight: 600; }
.depot__aide { color: var(--texte-faible); font-size: 0.85rem; }

.depot-liste { display: grid; gap: 0.5rem; margin-top: 1rem; }

.depot-liste:empty { display: none; }

.depot-fichier {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: var(--surface);
    font-size: 0.88rem;
}

.depot-fichier__vignette {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6px;
    object-fit: cover;
    background: var(--noir-profond);
}

.depot-fichier__nom {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.depot-fichier__poids { color: var(--texte-faible); font-size: 0.8rem; }

/* -----------------------------------------------------------------------------
   17. Formulaire par étapes
   -------------------------------------------------------------------------- */
.parcours {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 64rem) {
    .parcours { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.progression {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 2.25rem;
    list-style: none;
}

.progression li {
    flex: 1;
    padding-top: 0.75rem;
    border-top: 2px solid var(--surface-bord);
    color: var(--texte-faible);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.25s, border-color 0.25s;
}

.progression li.est-faite { border-top-color: rgb(255 208 39 / 45%); color: var(--texte-doux); }
.progression li.est-active { border-top-color: var(--or); color: var(--or); }

.progression__num { display: block; font-family: var(--police-mono); font-size: 0.72rem; opacity: 0.7; }

/* Ligne d'étape affichée uniquement sur mobile, alimentée par demande.js. */
.progression__mobile { display: none; }

/* Cinq libellés côte à côte deviennent illisibles sous 640 px : on ne garde
   que les segments colorés, et l'étape en cours s'écrit en toutes lettres. */
@media (max-width: 40rem) {
    .progression { gap: 0.3rem; margin-bottom: 0.85rem; }

    .progression li {
        padding-top: 0.5rem;
        font-size: 0;          /* masque le libellé, conserve le trait */
        line-height: 0;
    }

    .progression__num { display: none; }

    .progression__mobile {
        display: block;
        margin-bottom: 2rem;
        color: var(--or);
        font-size: 0.83rem;
        font-weight: 650;
        letter-spacing: 0.03em;
    }
}

.etape-form { display: none; }
.etape-form.est-active { display: block; animation: apparition 0.32s ease both; }

@keyframes apparition {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.etape-form__titre { margin-bottom: 0.5rem; }
.etape-form__intro { margin-bottom: 2rem; color: var(--texte-doux); }

.parcours__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--surface-bord);
}

/* Panneau récapitulatif latéral.
   En colonne unique il se place sous le formulaire : le rendre collant le
   ferait alors adhérer au bas de l'écran sans rien apporter. Il ne le devient
   qu'à partir du moment où il occupe une vraie colonne. */
.resume {
    position: static;
    padding: 1.6rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-lg);
    background: linear-gradient(165deg, var(--surface), var(--noir-profond));
}

@media (min-width: 64rem) {
    .resume { position: sticky; top: 6rem; }
}

.resume h3 { margin-bottom: 1.25rem; font-size: 1.05rem; }

.resume__ligne {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--surface-bord);
    font-size: 0.9rem;
}

.resume__ligne:last-of-type { border-bottom: 0; }
.resume__ligne dt { color: var(--texte-faible); }
.resume__ligne dd { margin: 0; font-weight: 600; text-align: right; }

.resume__total {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 208 39 / 25%);
}

.resume__total .resume__ligne dd { color: var(--or); font-size: 1.05rem; }

.resume__note {
    margin-top: 1.25rem;
    color: var(--texte-faible);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Créneaux de rendez-vous */
.creneaux { display: grid; gap: 1.5rem; }

.creneaux__jour h4 {
    margin-bottom: 0.75rem;
    color: var(--or);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.creneaux__liste {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.creneau {
    position: relative;
    display: block;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: var(--noir-profond);
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.creneau input { position: absolute; opacity: 0; pointer-events: none; }
.creneau:hover { border-color: rgb(255 208 39 / 45%); }

.creneau:has(input:checked) {
    border-color: var(--or);
    background: rgb(255 208 39 / 12%);
    color: var(--or);
}

.creneau small { display: block; color: var(--texte-faible); font-size: 0.74rem; font-weight: 500; }
.creneau:has(input:checked) small { color: var(--or-clair); }

.creneaux-vides {
    padding: 1.5rem;
    border: 1px dashed var(--surface-bord);
    border-radius: var(--rayon);
    color: var(--texte-doux);
    font-size: 0.93rem;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   18. Messages
   -------------------------------------------------------------------------- */
.alerte {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid;
    border-radius: var(--rayon-sm);
    font-size: 0.93rem;
}

.alerte--succes { border-color: rgb(62 207 142 / 40%); background: rgb(62 207 142 / 10%); color: #9ff0cb; }
.alerte--erreur { border-color: rgb(255 95 86 / 40%);  background: rgb(255 95 86 / 10%);  color: #ffb3ae; }
.alerte--info   { border-color: rgb(255 208 39 / 35%); background: rgb(255 208 39 / 8%);  color: var(--or-clair); }

.alerte ul { margin-top: 0.5rem; display: grid; gap: 0.25rem; }
.alerte li { list-style: disc; margin-left: 1.1rem; }

/* -----------------------------------------------------------------------------
   19. Page de confirmation
   -------------------------------------------------------------------------- */
.confirmation {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
}

.confirmation__pastille {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 2rem;
    border: 1px solid rgb(255 208 39 / 30%);
    border-radius: 50%;
    background: rgb(255 208 39 / 8%);
    color: var(--or);
    animation: pulsation 2.6s ease-in-out infinite;
}

@keyframes pulsation {
    0%, 100% { box-shadow: 0 0 0 0 rgb(255 208 39 / 22%); }
    50%      { box-shadow: 0 0 0 18px rgb(255 208 39 / 0%); }
}

.reference {
    display: inline-block;
    margin-block: 1.5rem;
    padding: 0.7rem 1.35rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon-sm);
    background: var(--surface);
    font-family: var(--police-mono);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: var(--or);
}

.suite {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
    text-align: left;
}

.suite li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.15rem;
    border: 1px solid var(--surface-bord);
    border-radius: var(--rayon);
    background: var(--surface);
    font-size: 0.94rem;
}

.suite li strong { display: block; margin-bottom: 0.15rem; }
.suite li span { color: var(--texte-doux); }

.suite__num {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgb(255 208 39 / 12%);
    color: var(--or);
    font-family: var(--police-mono);
    font-size: 0.85rem;
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   20. Pages de contenu (mentions légales, CGV…)
   -------------------------------------------------------------------------- */
.prose { max-width: 46rem; }
.prose h2 { margin-block: 2.5rem 1rem; font-size: 1.5rem; }
.prose h3 { margin-block: 1.75rem 0.65rem; font-size: 1.1rem; }
.prose p, .prose li { color: var(--texte-doux); margin-bottom: 0.9rem; }
.prose ul { margin-bottom: 1.25rem; display: grid; gap: 0.45rem; }
.prose li { list-style: disc; margin-left: 1.25rem; }
.prose strong { color: var(--texte); }

.prose dl { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0 0 0.5rem; color: var(--texte-doux); }

/* -----------------------------------------------------------------------------
   21. Pages d'erreur
   -------------------------------------------------------------------------- */
.erreur-page {
    display: grid;
    place-items: center;
    gap: 1rem;
    min-height: 60vh;
    text-align: center;
}

.erreur-page__code {
    font-family: var(--police-mono);
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
}

/* -----------------------------------------------------------------------------
   22. Utilitaires
   -------------------------------------------------------------------------- */
.invisible {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.saut-contenu {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.7rem 1.2rem;
    border-radius: 0 0 var(--rayon-sm) var(--rayon-sm);
    background: var(--or);
    color: #17130a;
    font-weight: 650;
}

.saut-contenu:focus { top: 0; color: #17130a; }

/* Pot de miel : invisible pour l'humain, tentant pour un robot.
   Découpé plutôt que déporté à gauche : un décalage de -9999px élargit la
   zone défilable sur certains navigateurs mobiles. */
.pot-de-miel {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

@media print {
    .entete, .pied, .bouton, .cta { display: none !important; }
    body { background: #fff; color: #000; }
}