/* ============================================================
   PHONE GENÈVE — Design system
   ------------------------------------------------------------
   Un seul endroit pour les couleurs, l'espacement et les
   composants. Les pages ne doivent plus définir de style inline :
   si un style manque ici, on l'ajoute ici.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* --- Fonds et surfaces ------------------------------------ */
    --bg: #070919;              /* fond de page, très sombre teinté bleu */
    --bg-glow: #131A4A;         /* halo décoratif en haut de page */
    --surface: rgba(255, 255, 255, 0.035);      /* carte */
    --surface-2: rgba(255, 255, 255, 0.055);    /* carte survolée / imbriquée */
    --border: rgba(255, 255, 255, 0.09);
    --border-fort: rgba(255, 255, 255, 0.16);

    /* --- Texte ------------------------------------------------ */
    --texte: #EEF0FA;
    --texte-2: #A3AAC8;         /* texte secondaire */
    --texte-3: #6B7297;         /* texte discret, légendes */

    /* --- Couleurs de marque ----------------------------------- */
    --jaune: #FFC72C;
    --jaune-sombre: #E0A800;
    --jaune-voile: rgba(255, 199, 44, 0.12);
    --bleu: #4C9DFF;
    --bleu-voile: rgba(76, 157, 255, 0.12);
    --vert: #34D399;
    --rouge: #F87171;
    --orange: #FB923C;

    /* --- Rythme ----------------------------------------------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --largeur: 1120px;

    /* --- Compatibilité avec les anciens noms de variables ------
       Certaines pages utilisent encore var(--accent-yellow) etc.
       On les garde en alias pour ne rien casser. */
    --bg-color: var(--bg);
    --text-main: var(--texte);
    --accent-yellow: var(--jaune);
    --accent-blue: var(--bleu);
    --accent-orange: var(--orange);
    --card-bg: var(--surface);
    --panel-bg: var(--surface-2);
    --color-success: var(--vert);
    --color-error: var(--rouge);
    --color-info: var(--bleu);
}

* { box-sizing: border-box; }

/* ---------- Garde-fous d'affichage ---------------------------
   Ces trois règles évitent la panne d'affichage la plus courante :
   une image plus large que son conteneur qui déborde de la page et
   fait apparaître une barre de défilement horizontale sur mobile.
   Elles s'appliquent PARTOUT, même si une classe a été oubliée.
   ------------------------------------------------------------- */
img, video, iframe, svg, canvas {
    max-width: 100%;
}
img {
    height: auto;      /* garde les proportions d'origine */
    display: block;    /* supprime l'espace fantôme sous l'image */
}
/* Un mot très long (référence de pièce, URL) ne doit pas élargir la page */
body { overflow-wrap: break-word; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    /* Halo diffus en haut : donne de la profondeur sans image de fond */
    background-image: radial-gradient(900px 500px at 50% -200px, var(--bg-glow), transparent 70%);
    background-repeat: no-repeat;
    color: var(--texte);
    margin: 0;
    padding: 28px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: var(--largeur);
}

/* Conteneur étroit : formulaires de connexion, pages de texte */
.container-etroit {
    width: 100%;
    max-width: 620px;
}

/* ---------- Typographie ------------------------------------- */

h1, h2, h3 {
    color: var(--texte);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 14px;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* Petit label au-dessus d'un titre de section */
.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jaune);
    margin-bottom: 10px;
}

.lead {
    font-size: 1.1rem;
    color: var(--texte-2);
    max-width: 60ch;
}

.texte-discret { color: var(--texte-3); font-size: 0.9rem; }
.texte-secondaire { color: var(--texte-2); }

a {
    color: var(--bleu);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
a:hover { color: var(--jaune); }

/* ---------- Navigation --------------------------------------- */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background-color: rgba(10, 13, 35, 0.7);
    border: 1px solid var(--border);
    padding: 12px 22px;
    border-radius: var(--r-lg);
    margin-bottom: 40px;
    backdrop-filter: blur(14px);
    width: 100%;
    max-width: var(--largeur);
    position: sticky;
    top: 16px;
    z-index: 50;
}
.navbar a {
    margin-left: 22px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--texte-2);
}
.navbar a:hover { color: var(--texte); }
.navbar .logo {
    color: var(--texte);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-left: 0;
}
/* Un lien-bouton dans la navbar doit garder la couleur du bouton :
   sans cette règle, ".navbar a" (plus spécifique que ".btn") lui
   imposerait du texte gris sur fond jaune. */
.navbar a.btn { color: #1A1400; }
.navbar a.btn:hover { color: #1A1400; }
.navbar .logo::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jaune);
    margin-right: 9px;
    vertical-align: middle;
}

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

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--jaune);
    color: #1A1400;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    transition: transform 0.18s, background 0.18s, box-shadow 0.18s;
}
button { width: 100%; }   /* comportement historique des boutons de formulaire */
.btn { width: auto; }

button:hover, .btn:hover {
    background: #FFD65C;
    color: #1A1400;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 199, 44, 0.22);
}
button:disabled {
    background: var(--surface-2);
    color: var(--texte-3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: var(--bleu);
    color: #04122B;
}
.btn-secondary:hover { background: #74B5FF; color: #04122B; box-shadow: 0 6px 20px rgba(76, 157, 255, 0.22); }

.btn-danger { background: var(--rouge); color: #2A0808; }
.btn-danger:hover { background: #FF9A9A; color: #2A0808; box-shadow: 0 6px 20px rgba(248, 113, 113, 0.22); }

/* Bouton discret : bordure seule, pour les actions secondaires */
.btn-ghost {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--border-fort);
    font-weight: 550;
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--texte);
    box-shadow: none;
}

.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-bloc { width: 100%; }

/* ---------- Cartes et sections -------------------------------- */

.card, form, fieldset {
    background-color: var(--surface);
    border: 1px solid var(--border);
    padding: 26px;
    border-radius: var(--r-lg);
    margin: 0 0 20px;
}

form, fieldset {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* Formulaire qui doit occuper toute la largeur (tableaux de sélection) */
.form-large { max-width: 100%; }

fieldset { margin-bottom: 0; }
legend { display: none; }

.section { margin-bottom: 64px; }
.section-titre { margin-bottom: 26px; }

/* ---------- Grilles ------------------------------------------- */

.grille-2, .grille-3, .grille-4 {
    display: grid;
    gap: 18px;
}
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Accueil : héro ------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 76px 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(76, 157, 255, 0.14), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
    margin-bottom: 22px;
}
.hero h1 { margin-bottom: 18px; }
.hero .lead { margin: 0 auto 22px; font-size: 1.15rem; }
/* Sans rien sous le texte, la marge du bas créait un grand vide */
.hero .lead:last-child { margin-bottom: 0; }

/* Accroche « 30 minutes » : une pastille, pas un paragraphe. Elle doit
   accrocher l'œil sans concurrencer le titre. */
/* inline-block et non inline-flex : en flex, chaque morceau de texte
   devient une colonne et la phrase se casse en trois sur téléphone. */
.accroche-express {
    display: inline-block;
    margin: 0;
    padding: 9px 20px;
    border: 1px solid rgba(255, 199, 44, 0.35);
    border-radius: 999px;
    background: var(--jaune-voile);
    color: var(--texte-2);
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.5;
}
.accroche-express strong { color: var(--jaune); }

.cta-groupe {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bandeau de réassurance sous le héro */
.bandeau-confiance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 64px;
}
.bandeau-confiance div {
    background: #0A0D22;
    padding: 18px 20px;
    text-align: center;
}
.bandeau-confiance strong {
    display: block;
    font-size: 0.95rem;
    color: var(--texte);
    margin-bottom: 2px;
}
.bandeau-confiance span { font-size: 0.83rem; color: var(--texte-3); }

/* ---------- Les deux grands choix de l'accueil -----------------
   Toute la tuile est un lien : on clique n'importe où dedans.
   Pas d'image ici, volontairement — c'est ce qui déformait la mise
   en page sur mobile. Le pictogramme est un simple caractère, donc
   il ne peut ni déborder ni mettre du temps à charger.
   -------------------------------------------------------------- */

.choix-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 64px;
}

.carte-choix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 28px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--texte);
    font-weight: 400;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.carte-choix:hover {
    transform: translateY(-3px);
    border-color: var(--jaune);
    background: var(--surface-2);
    color: var(--texte);
}
.carte-choix-icone {
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 8px;
}
.carte-choix h2 {
    font-size: 1.25rem;
    margin: 0;
}
.carte-choix p {
    color: var(--texte-2);
    font-size: 0.93rem;
    margin: 0;
}
/* Prix d'appel + flèche, collés en bas de la tuile */
.carte-choix-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 16px;
    color: var(--jaune);
    font-weight: 700;
    font-size: 0.92rem;
}

/* ---------- Cartes de service (accueil) ----------------------- */

.carte-service {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s, border-color 0.22s;
}
.carte-service:hover { transform: translateY(-3px); border-color: var(--border-fort); }
.carte-service img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.carte-service-corps { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.carte-service h3 { margin-bottom: 8px; }
.carte-service p { color: var(--texte-2); font-size: 0.94rem; flex: 1; }
.carte-service .prix-depart {
    display: block;
    color: var(--jaune);
    font-weight: 700;
    font-size: 0.9rem;
    margin: 14px 0 16px;
}

/* ---------- Groupe de choix (page de sélection) ----------------
   Sans séparation, les quatre groupes de la page console se lisent
   comme un seul long bloc de texte. Chaque groupe devient donc une
   zone visuellement fermée, avec son titre en tête.
   --------------------------------------------------------------- */

.groupe-choix {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 20px 6px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.015);
}
.groupe-choix > label:first-child,
.groupe-choix .groupe-titre {
    display: block;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--jaune);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
/* Les tableaux internes ne doivent pas ajouter une deuxième bordure */
.groupe-choix .table-scroll { margin-bottom: 0; }
.groupe-choix table { border: none; background: none; }

/* Liste de liens d'administration : une colonne de liens lisibles,
   plus compacte qu'une rangée de boutons et plus facile à parcourir. */
.liens-admin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
}
.liens-admin a {
    padding: 7px 10px;
    border-radius: var(--r-sm);
    font-size: 0.93rem;
    font-weight: 500;
}
.liens-admin a:hover { background: var(--surface-2); color: var(--jaune); }

/* ---------- Liste de résultats de recherche --------------------
   Utilisée pour retrouver un client dans l'administration. Elle défile
   au lieu de s'allonger : la page garde la même hauteur qu'il y ait
   trois clients ou trois cents.
   --------------------------------------------------------------- */

.liste-resultats {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 14px;
}

.resultat-client {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    color: var(--texte);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.resultat-client:last-child { border-bottom: none; }
.resultat-client:hover {
    background: var(--surface-2);
    transform: none;
    box-shadow: none;
    color: var(--texte);
}
/* Ligne retenue : elle doit rester visible après le clic, même si la
   souris est repartie ailleurs. */
.resultat-client.est-choisi {
    background: var(--jaune-voile);
    box-shadow: inset 3px 0 0 var(--jaune);
}
.resultat-client.est-choisi strong { color: var(--jaune); }

/* ---------- Fenêtre explicative (<dialog>) --------------------
   Utilisée sur la page de sélection pour expliquer une option sans
   allonger la page : « Pourquoi l'ajouter ? » ouvre la fenêtre.
   -------------------------------------------------------------- */

dialog.modale {
    max-width: 560px;
    width: calc(100% - 32px);
    /* Sur téléphone, un texte long dépasserait l'écran et le titre
       serait coupé : la fenêtre défile au lieu de déborder. */
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--border-fort);
    border-radius: var(--r-lg);
    background: #0C1030;
    color: var(--texte);
}
dialog.modale::backdrop {
    background: rgba(3, 5, 18, 0.72);
    backdrop-filter: blur(3px);
}
dialog.modale h3 { margin-bottom: 14px; color: var(--jaune); }
dialog.modale p { color: var(--texte-2); font-size: 0.95rem; margin-bottom: 12px; }
dialog.modale strong { color: var(--texte); }
dialog.modale .btn { width: 100%; margin-top: 10px; }

/* Lien qui ouvre une fenêtre : c'est un <button> pour l'accessibilité,
   mais il doit se lire comme un lien, pas comme un bouton d'action. */
.lien-info {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--bleu);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.lien-info:hover { color: var(--jaune); background: none; transform: none; box-shadow: none; }

/* Note explicative sous un groupe de choix : elle doit se lire comme un
   commentaire, pas comme une option supplémentaire. */
.aide-groupe {
    margin: -8px 0 22px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    line-height: 1.55;
}
.aide-groupe strong { color: var(--texte-2); }

/* ---------- Étapes "comment ça marche" ------------------------ */

.etape {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px;
}
.etape-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--jaune-voile);
    color: var(--jaune);
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 12px;
}
.etape h3 { font-size: 1rem; margin-bottom: 6px; }
.etape p { color: var(--texte-2); font-size: 0.9rem; }

/* ---------- Liste de tarifs ----------------------------------- */

.tarif-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    margin-bottom: 8px;
}
.tarif-ligne .tarif-nom { font-size: 0.94rem; }
.tarif-ligne .tarif-prix { color: var(--jaune); font-weight: 700; white-space: nowrap; }

/* ---------- Diaporama des réalisations ------------------------ */

.diaporama {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 460px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background-color: var(--surface);
}
.diaporama .diapo {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.diaporama .diapo.active { opacity: 1; pointer-events: auto; }
.diaporama .diapo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.diaporama .diapo figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 22px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    /* Dégradé plutôt qu'un bandeau opaque : la photo reste lisible dessous */
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
}

.diapo-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border-fort);
    border-radius: 50%;
    background: rgba(10, 13, 35, 0.65);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.diapo-fleche:hover { background: rgba(10, 13, 35, 0.9); transform: translateY(-50%); box-shadow: none; }
.diapo-prec { left: 14px; }
.diapo-suiv { right: 14px; }

.diapo-points {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.diapo-point {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-fort);
    cursor: pointer;
    transition: 0.2s;
}
.diapo-point:hover { background: var(--texte-3); transform: none; box-shadow: none; }
.diapo-point.active { background: var(--jaune); width: 24px; border-radius: 999px; }

@media (max-width: 768px) {
    .diaporama { aspect-ratio: 4 / 3; }
    .diapo-fleche { width: 36px; height: 36px; font-size: 1.25rem; }
}

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

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 18px 20px;
    margin-bottom: 10px;
}
.faq-item h3 { font-size: 0.98rem; margin-bottom: 6px; color: var(--texte); }
.faq-item p { color: var(--texte-2); font-size: 0.92rem; }

/* ---------- Bandeau d'appel à l'action ------------------------ */

.bande-cta {
    text-align: center;
    padding: 52px 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(255, 199, 44, 0.07), rgba(255,255,255,0.012));
    margin-bottom: 60px;
}
.bande-cta h2 { margin-bottom: 10px; }
.bande-cta p { color: var(--texte-2); margin-bottom: 24px; }

/* ---------- Formulaires --------------------------------------- */

label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--texte-2);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], input[type="date"], input[type="number"],
input[type="tel"], textarea, select {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border-fort);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--texte);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s, background 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--texte-3); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--jaune);
    background-color: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 3px var(--jaune-voile);
}

/* Les listes déroulantes natives ont besoin d'un fond opaque,
   sinon les options sont illisibles sur certains navigateurs. */
select { background-color: #12162F; cursor: pointer; }
option { background-color: #12162F; color: var(--texte); }

input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--jaune);
    cursor: pointer;
    transform: scale(1.15);
}

/* ---------- Sélection d'intervention : grandes bulles ---------------
   Toute la bulle est cliquable et change de couleur d'un bloc, pour que
   la sélection soit lisible d'un coup d'œil et confortable au doigt.
   La case native est masquée : elle reste dans le DOM pour le formulaire
   et l'accessibilité, mais c'est la bulle qui fait office de contrôle. */

.option-intervention {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    margin-bottom: 12px;
    background-color: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color 0.18s, background-color 0.18s, transform 0.12s;
}
.option-intervention:hover {
    border-color: var(--border-fort);
    background-color: var(--surface-2);
}
.option-intervention:active { transform: scale(0.995); }

/* La vraie case est retirée du flux visuel, sans être masquée pour les
   lecteurs d'écran ni exclue de l'envoi du formulaire. */
.option-intervention input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Pastille de sélection à gauche */
.option-intervention .oi-marque {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-fort);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: transparent;
    transition: 0.18s;
}

.option-intervention .oi-nom {
    flex: 1;
    font-weight: 650;
    font-size: 1.02rem;
    color: var(--texte);
}
.option-intervention .oi-detail {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--texte-3);
    margin-top: 4px;
}
.option-intervention .oi-prix {
    color: var(--texte);
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

/* Sélectionnée : la classe est posée par le script plutôt que via :has(),
   pour ne pas dépendre du support de ce sélecteur. */
.option-intervention.est-cochee {
    border-color: var(--jaune);
    background-color: rgba(255, 199, 44, 0.14);
}
.option-intervention.est-cochee .oi-marque {
    background-color: var(--jaune);
    border-color: var(--jaune);
    color: #1A1400;
}
.option-intervention.est-cochee .oi-prix { color: var(--jaune); }

/* Compteur de total, collé sous la liste des bulles */
.total-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    margin: 4px 0 20px;
    border: 2px dashed var(--border-fort);
    border-radius: var(--r-lg);
    background-color: var(--surface);
}
.total-selection .ts-libelle { color: var(--texte-2); font-weight: 600; }
.total-selection .ts-montant { color: var(--jaune); font-weight: 800; font-size: 1.3rem; white-space: nowrap; }
.total-selection .ts-detail  { display: block; font-size: 0.83rem; color: var(--texte-3); font-weight: 400; margin-top: 3px; }

/* Groupe d'options dans un formulaire (type d'intervention) */
.service-group {
    margin-bottom: 14px;
    padding: 18px;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--bleu);
    border-radius: var(--r-sm);
}
.service-group label { font-weight: 600; color: var(--texte); }

/* Bouton pleine largeur pour le choix de marque / modèle */
.btn-marque {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
    padding: 16px 22px;
    font-size: 1rem;
}

/* ---------- Tableaux ------------------------------------------ */

.table-scroll { width: 100%; overflow-x: auto; margin-bottom: 20px; }

table {
    width: 100%;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 0.93rem;
}

th, td {
    padding: 13px 16px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--border);
}

th {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--texte-3);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td, tr:hover td { background-color: rgba(255, 255, 255, 0.022); }

/* ---------- Messages d'état ----------------------------------- */

.alert {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    margin-bottom: 18px;
    border: 1px solid;
    font-size: 0.93rem;
    font-weight: 500;
}
.alert p, .alert strong { margin: 0; }
.alert-error   { border-color: rgba(248, 113, 113, 0.35); color: #FFC4C4; background-color: rgba(248, 113, 113, 0.09); }
.alert-success { border-color: rgba(52, 211, 153, 0.35);  color: #B0F2D8; background-color: rgba(52, 211, 153, 0.09); }
.alert-warning { border-color: rgba(255, 199, 44, 0.35);  color: #FFE49B; background-color: rgba(255, 199, 44, 0.09); }
.alert-info    { border-color: rgba(76, 157, 255, 0.35);  color: #BBDBFF; background-color: rgba(76, 157, 255, 0.09); }

/* ---------- Badges de statut ---------------------------------- */

.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid;
}
.badge-success { background-color: rgba(52, 211, 153, 0.1);  color: var(--vert);  border-color: rgba(52, 211, 153, 0.3); }
.badge-warning { background-color: rgba(255, 199, 44, 0.1);  color: var(--jaune); border-color: rgba(255, 199, 44, 0.3); }
.badge-error   { background-color: rgba(248, 113, 113, 0.1); color: var(--rouge); border-color: rgba(248, 113, 113, 0.3); }
.badge-info    { background-color: rgba(76, 157, 255, 0.1);  color: var(--bleu);  border-color: rgba(76, 157, 255, 0.3); }
.badge-neutral { background-color: var(--surface-2);         color: var(--texte-2); border-color: var(--border); }

/* ---------- État vide ----------------------------------------- */

.etat-vide {
    width: 100%;
    text-align: center;
    padding: 48px 30px;
    color: var(--texte-3);
    background-color: var(--surface);
    border: 1px dashed var(--border-fort);
    border-radius: var(--r-lg);
    margin-bottom: 20px;
}
.etat-vide .etat-vide-icone {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.7;
}
.etat-vide p { margin: 0; }

td.etat-vide-cell {
    text-align: center;
    padding: 26px;
    color: var(--texte-3);
    font-style: italic;
}

/* ---------- Créneaux de rendez-vous (panier) ------------------ */

.creneaux-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.btn-creneau {
    padding: 11px 8px;
    background-color: var(--surface-2);
    border: 1px solid var(--border-fort);
    color: var(--texte);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 0.92rem;
    transition: 0.18s;
}
.btn-creneau:hover { border-color: var(--bleu); background-color: var(--bleu-voile); }
.btn-creneau.selected {
    background-color: var(--jaune);
    color: #1A1400;
    border-color: var(--jaune);
}

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

.site-footer {
    width: 100%;
    max-width: var(--largeur);
    margin-top: 70px;
    padding: 30px 0 40px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--texte-3);
    font-size: 0.88rem;
}
.site-footer a { color: var(--texte-2); font-weight: 500; }
.site-footer a:hover { color: var(--jaune); }
.site-footer .footer-liens { margin-bottom: 12px; }
.site-footer .footer-liens a { margin: 0 12px; }
.site-footer .footer-sep { color: var(--border-fort); }

/* ---------- Utilitaires --------------------------------------- */

.centre { text-align: center; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

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

@media (max-width: 768px) {
    body { padding: 16px 14px 0; }

    .navbar {
        flex-direction: column;
        gap: 12px;
        padding: 14px 18px;
        position: static;
        margin-bottom: 28px;
    }
    .navbar > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 4px;
    }
    .navbar a { margin-left: 0; padding: 4px 8px; }

    .hero { padding: 48px 20px; }
    .cta-groupe { flex-direction: column; }
    .cta-groupe .btn { width: 100%; }

    .section { margin-bottom: 44px; }
    .bandeau-confiance { margin-bottom: 44px; }

    .card, form, fieldset { padding: 20px; }

    /* Les tableaux larges défilent horizontalement au lieu de déborder */
    .table-scroll { -webkit-overflow-scrolling: touch; }
    table { font-size: 0.88rem; }
    th, td { padding: 11px 12px; }

    .tarif-ligne { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Case d'acceptation des conditions : elle doit se voir sans écraser
   le bouton de paiement qui la suit. */
.case-cgv {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 4px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--texte-2);
    cursor: pointer;
}
.case-cgv input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--jaune);
    cursor: pointer;
}
.case-cgv:hover { border-color: var(--border-fort); }

/* Choix radio présenté comme une ligne cliquable entière, plus facile à
   viser qu'un petit rond — utilisé dans les formulaires d'administration. */
.option-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.93rem;
    color: var(--texte-2);
    cursor: pointer;
}
.option-radio:hover { border-color: var(--border-fort); background: var(--surface); }
.option-radio input[type="radio"] { margin: 2px 0 0; accent-color: var(--jaune); cursor: pointer; }