/* =========================================================================
   By Zigzag — Styles des sections de la page vitrine
   ========================================================================= */

/* ---- Hero ---- */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    /* Fond placeholder : dégradé teinté (aucune image hotlinkée).
       TODO (client) : remplacer par une vraie photo du salon. */
    background:
        var(--hero-tint),
        repeating-linear-gradient(45deg, #181818 0 22px, #151515 22px 44px);
    overflow: hidden;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
}

/* Fondu du bas du hero vers le fond noir de la page : la photo se dissout
   dans la section suivante au lieu d'une coupe nette. Au-dessus de la photo
   et de l'overlay, mais SOUS le contenu (hero__inner, z-index 2). */
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(90px, 18vh, 180px);
    background: linear-gradient(to bottom, transparent, var(--c-bg));
    pointer-events: none;
    z-index: 1;
}

/* Hero avec photo du salon (Media catégorie hero, changeable en admin).
   Le flou vit sur ::before : le contenu au-dessus reste net ; le scale
   masque le halo clair que blur() crée sur les bords. L'overlay sombre
   (élément suivant) garantit le contraste du texte. */
.hero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-image) center / cover no-repeat;
    filter: blur(8px);
    transform: scale(1.06);
}

/* Logo du salon centré au-dessus du titre (Media catégorie logo). */
.hero__logo {
    display: block;
    margin: 0 auto 1.25rem;
    width: clamp(110px, 24vw, 200px);
    height: auto;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}

.hero__inner {
    position: relative;
    z-index: 2; /* au-dessus du fondu de bas de hero (.hero::after) */
    text-align: center;
    padding: 4rem 1.25rem;
}

.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.85rem;
    color: var(--c-accent);
    font-weight: 600;
}

/* Logo en grand au centre quand il remplace le titre texte. */
.hero__logo--titre {
    width: clamp(160px, 32vw, 300px);
}

/* La ligne dorée passe SOUS le logo : même style que l'eyebrow,
   seuls les espacements changent (le baseline gris a disparu). */
.hero__eyebrow--sous-logo {
    margin: 0.75rem 0 2.25rem;
}

.hero__title {
    font-size: clamp(3rem, 12vw, 7rem);
    text-transform: uppercase;
    margin: 0.25rem 0;
}

.hero__baseline {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--c-text-muted);
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Prestations ---- */
.presta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.presta-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    transition: border-color 0.18s ease, transform 0.12s ease;
}

.presta-card:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
}

.presta-card--placeholder {
    border-style: dashed;
    opacity: 0.7;
}

.presta-card__name {
    font-size: 1.2rem;
    margin: 0 0 0.2rem;
    text-transform: none;
    letter-spacing: 0;
}

.presta-card__desc {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.92rem;
}

.presta-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}

.presta-card__duration {
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

.presta-card__price {
    font-family: "Oswald", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-accent);
}

/* ---- Concept ---- */
/* DEUX ÉTATS, et un seul modificateur pour passer de l'un à l'autre.

   Sans photo (`salon` vide au board) : UNE colonne, le texte borné pour rester
   lisible plutôt que de s'étirer sur toute la largeur. Les quatre cases
   « Photo à venir » de la maquette d'origine ne reviennent pas — un gabarit
   d'attente barré donne à un site l'air d'un chantier.

   Avec photos : DEUX colonnes, texte à gauche, photos du LIEU à droite, comme
   sur byzigzag.webergeron.com. C'est .concept__grid--illustre, posé par le
   gabarit quand — et seulement quand — il a des images à mettre. Le CSS ne
   décide donc jamais seul d'ouvrir une colonne qui resterait vide. */
.concept__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.concept__grid--illustre {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.concept__text {
    max-width: 68ch;
}

.concept__text p {
    color: var(--c-text-muted);
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    /* Portée par un <ul> dans la galerie publique : pas de puces, pas de
       retrait — la grille reste une grille. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery__item {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(45deg, #1d1d1d 0 14px, #191919 14px 28px);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.gallery__placeholder {
    color: var(--c-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Item photo : l'image remplit la case, légende superposée en bas.
   Fond UNI, qui remplace les rayures de .gallery__item : celles-ci annoncent
   « emplacement à remplir », ce qui est juste pour un gabarit et faux ici. On
   les verrait par transparence sous un PNG à fond transparent, et surtout à la
   place d'une photo qui ne charge pas — donnant à une vraie galerie l'air d'un
   chantier. La case garde sa forme dans les deux cas et affiche le texte
   alternatif : la grille reste une grille. */
.gallery__item--photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--c-bg-elev);
}

.gallery__item--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    color: var(--c-text);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

/* Galerie en section autonome (photos du salon et réalisations) : grille plus
   large, qui se remplit d'elle-même — trois photos ou douze, la mise en page
   tient sans qu'on compte. */
.gallery--large {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    margin-top: 2rem;
}

.gallery--large .gallery__item {
    aspect-ratio: 4 / 5;
}

/* ---- Horaires ---- */
/* Fond « élevé » qui se fond dans la section précédente (fond de base) sur les
   premiers pixels : couture galerie → horaires adoucie (voir aussi .section--avis
   pour le bas du bloc élevé). */
.section--horaires {
    background-color: var(--c-bg-elev);
    background-image: linear-gradient(to bottom, var(--c-bg), transparent 120px);
    background-repeat: no-repeat;
}

.horaires-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 620px;
}

.horaires-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--c-border);
}

.horaires-row__day {
    font-weight: 600;
}

.horaires-row__slots {
    color: var(--c-text-muted);
    text-align: right;
}

.horaires-row.is-closed .horaires-row__slots {
    font-style: italic;
}

.horaires-row.is-today {
    color: var(--c-accent);
}

.horaires-row.is-today .horaires-row__slots {
    color: var(--c-accent);
}

/* ---- Adresse ---- */
.adresse__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: center;
}

.adresse__line {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.adresse__map {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
}

/* ---- Page "bientôt disponible" ---- */
.section--soon {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
}

.soon {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}

.soon__lead {
    color: var(--c-text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.soon__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive sections ---- */
@media (max-width: 800px) {
    /* Le concept repasse en UNE colonne : le texte d'abord, les photos du lieu
       dessous — deux colonnes de 190 px rendraient l'un illisible et les autres
       minuscules. */
    .concept__grid--illustre,
    .adresse__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .presta-card {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main meta"
            "action action";
        gap: 0.75rem 1rem;
    }
    .presta-card__main { grid-area: main; }
    .presta-card__meta { grid-area: meta; }
    .presta-card__action { grid-area: action; }
    .presta-card__action .btn { width: 100%; }

    /* Galerie « Nos coupes » : sur mobile, 2 photos carrées par ligne
       (au lieu d'une seule colonne 4/5 issue de l'auto-fill desktop). */
    .gallery--large {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .gallery--large .gallery__item {
        aspect-ratio: 1 / 1;
    }
}

/* ---- Tunnel de réservation ---- */
.section--tunnel {
    min-height: calc(100vh - var(--header-h));
}

.tunnel-steps {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    flex-wrap: wrap;
}

.tunnel-steps__step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

.tunnel-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--c-bg-elev-2);
    font-size: 0.78rem;
    font-weight: 600;
}

.tunnel-steps__step.is-current {
    border-color: var(--c-accent);
    color: var(--c-text);
}

.tunnel-steps__step.is-current .tunnel-steps__num {
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
}

.tunnel-steps__step.is-done {
    color: var(--c-accent);
}

/* Récapitulatif de la sélection en cours */
.tunnel-recap {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    padding: 1.1rem 1.4rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius);
}

.tunnel-recap__title {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--c-accent);
    margin: 0 0 0.6rem;
}

.tunnel-recap__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.tunnel-recap__list div {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.tunnel-recap__list dt {
    min-width: 110px;
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

.tunnel-recap__list dd {
    margin: 0;
    font-weight: 500;
}

/* Photo du coiffeur choisi, alignée avec son nom dans le récap. */
.tunnel-recap__coiffeur {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tunnel-recap__photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--c-border);
}

.tunnel-recap__ajout {
    margin: 0.75rem 0 0;
}

.tunnel-recap__ajout a {
    color: var(--c-accent);
    font-weight: 500;
}

/* Étape 1 : prestations sélectionnées (enchaînement) */
.tunnel-selection {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tunnel-selection__item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--c-border);
}

.tunnel-selection__name {
    font-weight: 500;
}

.tunnel-selection__meta {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin-left: auto;
}

.tunnel-selection__remove {
    color: var(--c-text-muted);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    padding: 0 0.25rem;
}

.tunnel-selection__remove:hover {
    color: #d66; /* même teinte destructrice que .btn--danger */
}

.tunnel-selection__total {
    margin: 0.75rem 0 1rem;
    font-weight: 600;
}

/* Titre « Ajouter une prestation » / message de plafond atteint */
.tunnel-selection__ajouter {
    text-align: center;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--c-text-muted);
    margin: 0 0 1.25rem;
}

.tunnel-selection__limite {
    text-align: center;
    color: var(--c-text-muted);
    margin: 0 0 1.25rem;
}

/* Rang dans l'enchaînement (O4). L'ORDRE EST UNE INFORMATION — la coupe passe
   avant la couleur — et se lit ici d'un coup d'œil, au lieu de se déduire de
   l'ordre des lignes. Décoratif pour les lecteurs d'écran (aria-hidden) : la
   liste est un <ol>, qui porte déjà la numérotation sémantiquement. */
.tunnel-selection__rang {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
}

/* Déroulé heure par heure de l'enchaînement (récapitulatif avant confirmation,
   puis page « rendez-vous confirmé »). Chaque bloc porte SON horaire et SON
   prix : c'est ce qui rend un enchaînement lisible d'un coup d'œil. */
.tunnel-deroule {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tunnel-deroule__bloc {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border);
}

.tunnel-deroule__bloc:last-child {
    border-bottom: none;
}

.tunnel-deroule__heure {
    flex-shrink: 0;
    font-family: "Oswald", sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent);
    font-size: 0.9rem;
}

.tunnel-deroule__nom {
    font-weight: 500;
}

.tunnel-deroule__prix {
    margin-left: auto;
    color: var(--c-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Entrée vers l'étape 1 depuis l'accueil, sous la liste des prestations : les
   cartes, elles, gardent leur raccourci direct vers le choix du coiffeur. */
.presta-list__enchainer {
    text-align: center;
    margin: 1.75rem 0 0;
    color: var(--c-text-muted);
}

.presta-list__enchainer a {
    color: var(--c-accent);
    font-weight: 500;
}

@media (max-width: 560px) {
    /* Le prix passe sous le nom plutôt que de comprimer les deux. */
    .tunnel-deroule__bloc {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }
    .tunnel-deroule__heure {
        flex: 1 1 100%;
    }
}

/* Étape 2 : cartes coiffeurs */
.coiffeur-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.coiffeur-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.75rem 1.25rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-align: center;
}

.coiffeur-card:hover {
    border-color: var(--c-accent);
}

.coiffeur-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--avatar-color);
    color: var(--avatar-color);
    font-family: "Oswald", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
}

/* Photo du coiffeur (repli sur .coiffeur-card__avatar si absente). */
.coiffeur-card__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--avatar-color);
}

.coiffeur-card__name {
    font-family: "Oswald", sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* Étape 3 : grille des créneaux */
.tunnel-week-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* Accordéon des horaires par jour (étape 3 du tunnel). */
.creneau-accordion {
    display: grid;
    gap: 0.6rem;
}

.creneau-day {
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Ligne d'un jour sans disponibilité (non dépliable). */
.creneau-day.is-empty {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    opacity: 0.55;
}

/* En-tête cliquable d'un jour (résumé du <details>). */
.creneau-day__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    cursor: pointer;
    list-style: none; /* masque le triangle natif (WebKit ci-dessous) */
    user-select: none;
}

.creneau-day__summary::-webkit-details-marker {
    display: none;
}

/* Chevron doré, pivote à l'ouverture. */
.creneau-day__summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.creneau-day[open] .creneau-day__summary::after {
    transform: rotate(-135deg);
}

.creneau-day__summary:hover .creneau-day__title {
    color: var(--c-accent);
}

.creneau-day__title {
    font-family: "Oswald", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin: 0;
}

.creneau-day__count {
    margin-left: auto;
    color: var(--c-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Ligne « jour sans dispo » : garder le compteur à droite. */
.creneau-day.is-empty .creneau-day__count {
    margin-left: 0;
}

.creneau-day__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0 1.25rem 1.1rem;
}

.creneau-slot {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background-color: var(--c-bg);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.creneau-slot:hover {
    border-color: var(--c-accent);
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
}

/* .creneau-slot sert aussi de bouton (modification de RDV côté client). */
button.creneau-slot {
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
}

.creneau-day__slots form {
    margin: 0;
}

/* Semaine sans dispo : bloc d'aide au rebond (prochaine dispo + autres coiffeurs). */
.creneau-rebond {
    margin-top: 1.5rem;
    text-align: center;
}

.creneau-rebond__cta {
    text-transform: none;
}

.creneau-rebond__none {
    color: var(--c-text-muted);
}

/* Secondaire, discret : les autres coiffeurs disponibles plus tôt. */
.creneau-rebond__autres {
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.creneau-rebond__autres-titre {
    margin: 0 0 0.4rem;
    color: var(--c-text-muted);
}

.creneau-rebond__autres-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.creneau-rebond__autres-list a {
    color: var(--c-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.creneau-rebond__autres-list a:hover {
    color: var(--c-accent);
}

/* Écran de modification d'un RDV (espace client). */
.modif-actuel {
    padding: 0.9rem 1.1rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    line-height: 1.6;
}

.modif-presta {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.modif-presta label {
    width: 100%;
    color: var(--c-text-muted);
    font-size: 0.88rem;
}

.modif-presta select {
    flex: 1 1 260px;
    padding: 0.55rem 0.75rem;
    background-color: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font: inherit;
    color-scheme: dark;
}

.modif-presta select:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: -1px;
}

/* Étape 4 : formulaire coordonnées */
.tunnel-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.tunnel-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.tunnel-form label {
    display: block;
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin-bottom: 0.35rem;
}

.tunnel-form input[type="text"],
.tunnel-form input[type="email"],
.tunnel-form input[type="tel"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font: inherit;
}

.tunnel-form input:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: -1px;
}

/* Listbox (select) : même rendu sombre que les inputs. */
.tunnel-form select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font: inherit;
    color-scheme: dark; /* flèche native lisible sur fond sombre */
    cursor: pointer;
}

.tunnel-form select:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: -1px;
}

/* Cases à cocher personnalisées : carré doré coché (même langage que l'admin). */
.tunnel-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tunnel-form input[type="checkbox"]::before {
    content: "✓";
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-accent-contrast);
    transform: scale(0);
    transition: transform 0.12s ease;
}

.tunnel-form input[type="checkbox"]:checked {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.tunnel-form input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.tunnel-form input[type="checkbox"]:focus-visible,
.tunnel-form input[type="radio"]:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Boutons radio : même pastille dorée, mais ronde (choix unique). */
.tunnel-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: var(--c-bg);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tunnel-form input[type="radio"]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-accent-contrast);
    transform: scale(0);
    transition: transform 0.12s ease;
}

.tunnel-form input[type="radio"]:checked {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.tunnel-form input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Case + libellé sur une ligne (option « rendre récurrent »). */
.tunnel-form .tunnel-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--c-text);
    font-size: 0.95rem;
    cursor: pointer;
}

.tunnel-form__consent {
    padding: 1rem 1.2rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-size: 0.88rem;
}

.tunnel-form__consent label {
    display: inline;
    color: var(--c-text);
    font-size: inherit;
    margin: 0 0 0 0.4rem;
}

/* Option « rendre récurrent » (client connecté). */
.tunnel-form__recurrence {
    padding: 1rem 1.2rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.tunnel-form__recurrence-options {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--c-border);
}

.tunnel-form__recurrence-options[hidden] {
    display: none;
}

.tunnel-note {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--c-text-muted);
    line-height: 1.6;
}

.tunnel-merci__recurrence {
    margin: 0 auto 1rem;
    max-width: 46ch;
    padding: 0.85rem 1.1rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-accent);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: 0.92rem;
    line-height: 1.6;
}

.tunnel-form .help-text,
.tunnel-form .form-help {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: 0.25rem;
}

.tunnel-form ul {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    color: #e88;
    font-size: 0.85rem;
}

.tunnel-form .btn {
    align-self: center;
    margin-top: 0.5rem;
}

/* --- Espace client (connexion, inscription, mon compte) ------------------ */
/* Mêmes règles visuelles que le formulaire du tunnel. */
.client-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 480px;
    margin: 0 auto;
}

.client-form label {
    display: block;
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin-bottom: 0.35rem;
}

.client-form input[type="text"],
.client-form input[type="email"],
.client-form input[type="tel"],
.client-form input[type="password"],
.client-form select,
.client-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font: inherit;
}

.client-form input:focus,
.client-form select:focus,
.client-form textarea:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: -1px;
}

.client-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

/* Valeur AFFICHÉE et non saisissable (O7 : l'adresse e-mail sur « ma fiche »).
   Volontairement PAS un `input` désactivé : un champ grisé ressemble à une
   saisie qu'on refuse, alors qu'il n'y a simplement rien à saisir ici. */
.client-form__lecture {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.client-form__lecture-label {
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

/* `min-width: 0` + coupure forcée : une adresse longue doit se replier dans la
   boîte, jamais l'élargir — c'est la cause de débordement du lot H. */
.client-form__lecture-valeur {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--c-text);
}

.client-form__consent {
    padding: 1rem 1.2rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-size: 0.88rem;
}

.client-form__consent label {
    display: inline;
    color: var(--c-text);
    font-size: inherit;
    margin: 0 0 0 0.4rem;
}

.client-form ul {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    color: #e88;
    font-size: 0.85rem;
}

.client-form .btn {
    align-self: center;
    margin-top: 0.5rem;
}

.client-form__alt {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--c-text-muted);
}

.client-form__alt a {
    color: var(--c-accent);
}

.section__subtitle {
    font-family: "Oswald", sans-serif;
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 2rem 0 0.8rem;
}

.client-table-vide {
    color: var(--c-text-muted);
    margin-bottom: 2rem;
}

.client-table-vide a {
    color: var(--c-accent);
}

/* Tableaux de l'espace client (RDV à venir / passés). */
.client-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

.client-table th,
.client-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.92rem;
}

.client-table th {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    background: var(--c-bg-elev-2);
}

.client-table tr:last-child td {
    border-bottom: none;
}

/* Colonne d'action (Annuler / avis) : vraie cellule de tableau alignée à
   droite. On NE met PAS display:flex sur le <td> — cela le sort de la grille
   de colonnes et désaligne l'action des lignes. Les formulaires passent en
   inline-flex pour être poussés à droite par text-align. */
.client-table__actions {
    text-align: right;
    vertical-align: middle;
}

.client-table__actions form {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.client-table .aide {
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

/* Badges de statut (mêmes codes couleur que l'admin). */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 99px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.badge--confirmee { border-color: rgba(90, 160, 90, 0.7); color: #8fce8f; }
.badge--en_attente { border-color: rgba(201, 161, 74, 0.7); color: var(--c-accent); }
.badge--annulee { border-color: rgba(176, 34, 38, 0.7); color: #e88; }
.badge--honoree { border-color: var(--c-border); color: var(--c-text-muted); }

/* =========================================================================
   Rendez-vous du client : cartes, récapitulatifs, créneaux (T4).

   Des CARTES et non un tableau pour les rendez-vous À VENIR : ce bloc porte
   désormais deux boutons ET, quand une action est fermée, la phrase qui
   l'explique. Empilé dans une cellule de tableau, tout cela finit dans un
   défilement horizontal — or c'est l'écran le plus consulté au téléphone.
   Les rendez-vous PASSÉS, eux, restent un tableau : rien à y faire.
   ========================================================================= */
.rdv-liste {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rdv-card {
    padding: 1.1rem 1.25rem;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.rdv-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.rdv-card__quand {
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: var(--c-text);
}

/* Paires libellé/valeur : deux colonnes au large, empilées en étroit. */
.rdv-card__meta,
.rdv-recap__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    margin: 0.75rem 0 0;
}

.rdv-card__meta dt,
.rdv-recap__meta dt {
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 0.15rem;
}

.rdv-card__meta dd,
.rdv-recap__meta dd {
    margin: 0;
    font-size: 0.95rem;
}

.rdv-card__actions,
.rdv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.rdv-actions form {
    margin: 0;
}

/* Explication d'une action fermée : LISIBLE SANS SURVOL, sous les boutons
   qu'elle décrit (aria-describedby). Jamais un title — un client sur
   téléphone ne survole rien. */
.rdv-card__aide {
    margin: 0.8rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

.rdv-card__aide p {
    margin: 0 0 0.3rem;
}

.rdv-card__aide p:last-child {
    margin-bottom: 0;
}

.rdv-card__tel a {
    color: var(--c-accent);
}

/* =========================================================================
   Rendez-vous RÉGULIERS du client (séries) : la liste des occurrences, et la
   distinction MAINTENU / ANNULÉ qui décide si la cliente se déplace.

   Réemploie .rdv-liste / .rdv-card / .policy-note : une série est un
   rendez-vous qui se répète, elle n'a pas besoin d'un autre langage visuel.
   ========================================================================= */
.serie-card__sous-titre {
    margin: 1rem 0 0.4rem;
    font-family: "Oswald", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.serie-occurrences {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--c-text-muted);
}

/* La pastille de gauche porte l'information, PAS la couleur seule : le texte
   voisin dit « maintenu » ou « annulé » en toutes lettres. Une cliente
   daltonienne ne doit pas avoir à distinguer un vert d'un rouge pour savoir
   si elle doit se déplacer. */
.serie-occurrences li {
    padding-left: 1rem;
    position: relative;
}

.serie-occurrences li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--c-border);
}

.serie-occurrences--maintenues li {
    color: var(--c-text);
}

.serie-occurrences--maintenues li::before {
    background: var(--c-accent);
}

.serie-occurrences--annulees li {
    text-decoration: line-through;
}

/* Variante APPUYÉE de .policy-note, réservée à ce qui engage un déplacement :
   « ce rendez-vous est maintenu, venez-y ». Le reste des avertissements garde
   le ton normal — tout mettre en avant revient à ne rien mettre en avant. */
.policy-note--fort {
    background: rgba(201, 161, 74, 0.16);
    border-color: var(--c-accent);
    font-size: 1rem;
}

/* Récapitulatif d'un rendez-vous (pages « annuler » et « déplacer »). */
.rdv-recap {
    padding: 1.1rem 1.25rem;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

.rdv-recap__label {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.rdv-recap__quand {
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.rdv-recap__meta--large {
    margin: 1.25rem 0;
}

/* Choix de la nouvelle date : champ date natif (calendrier du téléphone). */
.rdv-jour {
    margin: 1.5rem 0 0.5rem;
}

.rdv-jour label {
    display: block;
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin-bottom: 0.35rem;
}

.rdv-jour__champ {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.rdv-jour input[type="date"] {
    flex: 1 1 12rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font: inherit;
    /* Sans cela, iOS étire le champ hors de son conteneur. */
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

.rdv-jour input[type="date"]:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: -1px;
}

/* Créneaux proposés — un groupe par coiffeur. */
.rdv-creneaux {
    padding: 1rem 1.1rem;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    margin-bottom: 0.9rem;
}

.rdv-creneaux__titre {
    margin: 0 0 0.7rem;
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
}

.rdv-creneaux__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rdv-creneaux__vide {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.9rem;
}

.rdv-creneaux__intro {
    margin: 1.5rem 0 0.7rem;
    color: var(--c-text-muted);
}

.rdv-creneaux__note {
    margin: 0.5rem 0 0;
    color: var(--c-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.rdv-creneaux__note a {
    color: var(--c-accent);
}

/* L'heure ACTUELLE du rendez-vous, reconnaissable parmi les propositions :
   le moteur l'y laisse (il exclut la réservation d'elle-même du calcul), et
   la voir barrée d'un repère évite de « déplacer » vers le même créneau. */
.creneau-slot.is-actuel {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.creneau-slot.is-actuel::after {
    content: " (actuel)";
    font-size: 0.75em;
    letter-spacing: 0.5px;
}

/* Bascule « avant → après » du récapitulatif de déplacement. */
.rdv-bascule {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.rdv-bascule__cote {
    flex: 1 1 12rem;
    padding: 1rem 1.1rem;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.rdv-bascule__cote--avant {
    opacity: 0.7;
}

.rdv-bascule__cote--apres {
    border-color: var(--c-accent);
}

.rdv-bascule__fleche {
    align-self: center;
    margin: 0;
    font-size: 1.5rem;
    color: var(--c-accent);
}

.rdv-bascule__quand {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

.rdv-bascule__heure {
    margin: 0.1rem 0;
    font-family: "Oswald", sans-serif;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
}

.rdv-bascule__qui {
    margin: 0;
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

@media (max-width: 560px) {
    /* Boutons pleine largeur : cibles tactiles confortables, et un
       « Annuler » qui ne se clique pas par erreur à côté de « Déplacer ». */
    .rdv-card__actions .btn,
    .rdv-actions .btn,
    .rdv-actions form {
        flex: 1 1 100%;
    }
    .rdv-actions form .btn {
        width: 100%;
    }
    /* Les deux cartes s'empilent : la flèche prend sa propre ligne pour
       rester ENTRE elles (sinon elle se colle à droite de « Avant », où elle
       ne relie plus rien) et pointe vers le bas. */
    .rdv-bascule__fleche {
        flex: 1 1 100%;
        align-self: center;
        text-align: center;
        margin: 0;
    }

    .rdv-bascule__fleche span {
        display: inline-block;
        transform: rotate(90deg);
    }
}

.tunnel-back {
    text-align: center;
    margin-top: 2rem;
}

.tunnel-back a {
    color: var(--c-text-muted);
}

/* Étape 5 : confirmation */
.tunnel-merci {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.tunnel-merci__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
    font-size: 2rem;
}

.tunnel-merci .tunnel-recap {
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}

.tunnel-merci__adresse {
    color: var(--c-text-muted);
    line-height: 1.7;
}

@media (max-width: 560px) {
    .tunnel-form__row {
        grid-template-columns: 1fr;
    }
    .tunnel-week-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ---- Avis clients ---- */
/* Bas du bloc élevé (horaires + avis) : se fond dans la section suivante
   (adresse, fond de base). La couture horaires ↔ avis reste plate (élevé/élevé). */
.section--avis {
    background-color: var(--c-bg-elev);
    background-image: linear-gradient(to top, var(--c-bg), transparent 120px);
    background-repeat: no-repeat;
}

.avis-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Carrousel d'avis : 3 visibles, pagination par flèches ---- */
.avis-carousel {
    position: relative;
}

/* La liste d'avis devient une bande horizontale à défilement (scroll-snap).
   Surcharge le display:grid de .avis-list (règle placée après). */
.avis-carousel__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    /* Snap « proximity » : agréable au doigt sans forcer la position. Les
       flèches ne font que régler scrollLeft ; le défilement fluide est porté
       par scroll-behavior (désactivé si l'utilisateur réduit les animations). */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox : on navigue aux flèches */
}
.avis-carousel__track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
@media (prefers-reduced-motion: reduce) {
    .avis-carousel__track {
        scroll-behavior: auto;
    }
}

/* 3 cartes visibles (2 gouttières entre elles) ; flex-grow pour remplir
   proprement quand il y a moins de 3 avis (pas de carte étriquée). */
.avis-carousel__track > .avis-card {
    flex: 1 0 calc((100% - 2 * 1.25rem) / 3);
    scroll-snap-align: start;
}

/* Flèches : masquées par défaut, révélées seulement si le JS les active
   ET qu'il y a débordement (sans JS, la bande reste défilable au doigt). */
.avis-carousel__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--c-accent);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.avis-carousel.is-enhanced .avis-carousel__arrow {
    display: flex;
}
.avis-carousel__arrow:hover {
    background: var(--c-accent);
    color: var(--c-bg);
}
.avis-carousel__arrow:disabled {
    opacity: 0.3;
    cursor: default;
    background: var(--c-bg);
    color: var(--c-accent);
}
.avis-carousel__arrow--prev { left: -1.1rem; }
.avis-carousel__arrow--next { right: -1.1rem; }

/* Tablette : 2 avis visibles. */
@media (max-width: 900px) {
    .avis-carousel__track > .avis-card {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

/* Mobile : 1 avis visible, flèches ramenées sur les bords. */
@media (max-width: 560px) {
    .avis-carousel__track > .avis-card {
        flex-basis: 100%;
    }
    .avis-carousel__arrow--prev { left: 0; }
    .avis-carousel__arrow--next { right: 0; }
}

.avis-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background-color: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.avis-card__stars {
    color: var(--c-accent);
    letter-spacing: 3px;
    margin: 0;
}

.avis-card__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-text);
    flex: 1;
}

.avis-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.avis-card__author {
    font-weight: 600;
    font-size: 0.9rem;
}

.avis-card__source {
    font-size: 0.78rem;
    color: var(--c-text-muted);
}

/* Encart d'appel à l'action, sous les listes d'avis (SEO). Nommé `avis-cta`
   et non `avis-google` (son nom chez By Zigzag) : il porte toujours notre
   propre porte « Noter mon rendez-vous », et n'accueille les boutons Google
   que lorsque la source Google répond. */
.avis-cta {
    margin-top: 2rem;
    text-align: center;
}

.avis-cta p {
    color: var(--c-text-muted);
    margin: 0 0 0.75rem;
}

/* Boutons « noter mon rendez-vous » / « laisser un avis sur Google » / « voir
   la fiche » côte à côte. */
.avis-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Barre d'actions de l'espace client (boutons différenciés). */
.compte-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* =========================================================================
   Pages légales (mentions légales, politique de confidentialité)
   Contenu texte long : lisibilité et rythme vertical.
   ========================================================================= */
.legal h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    color: var(--c-accent);
    margin: 2rem 0 0.6rem;
}

.legal p,
.legal li {
    color: var(--c-text-muted);
    line-height: 1.7;
}

.legal ul {
    padding-left: 1.2rem;
    margin: 0.5rem 0 1rem;
}

.legal li {
    margin-bottom: 0.4rem;
}

.legal strong {
    color: var(--c-text);
}

.legal a {
    color: var(--c-accent);
}

.legal__back {
    margin-top: 2.5rem;
}

/* Avis Google : note agrégée, avatar auteur, attribution. */
.avis-google-note strong {
    color: var(--c-accent);
    font-size: 1.15rem;
}

.avis-google-note span[aria-hidden] {
    color: var(--c-accent);
    letter-spacing: 1px;
}

.avis-card__avatar {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.avis-google__attribution {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    letter-spacing: 0.5px;
}

/* =========================================================================
   Avis — compléments du lot O1-vitrine.

   Tout ce qui précède (carrousel, cartes, encart Google) vient du portage du
   design By Zigzag et est repris tel quel. Ne s'ajoutent ici que les éléments
   que By Zigzag n'a pas : l'accroche de la note FUSIONNÉE (lui n'affiche que
   la note Google), le badge « avis vérifié », les sous-titres des deux flux
   séparés, et l'encart du jour du lancement.
   ========================================================================= */

/* L'accroche : la note fusionnée, en gros, juste sous le titre de section. */
.avis-resume {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0 0.3rem;
}

.avis-resume__note {
    font-family: "Oswald", sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--c-accent);
}

.avis-resume__etoiles {
    color: var(--c-accent);
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.avis-resume__total {
    color: var(--c-text-muted);
    font-size: 0.95rem;
}

/* D'où vient la note : discret, mais jamais absent (la note change quand une
   source disparaît — il faut pouvoir l'expliquer). */
.avis-resume__sources {
    font-size: 0.88rem;
    margin-bottom: 0;
}

/* Titre de chacun des deux flux (Google / ce site), avec sa note propre : la
   note est fusionnée pour l'accroche, mais la distinction des sources doit
   rester lisible. */
.avis-bloc__titre {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: "Oswald", sans-serif;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 2.2rem 0 1rem;
}

.avis-bloc__note {
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-text-muted);
}

.avis-bloc__troncature {
    margin: -0.4rem 0 0.9rem;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

/* Le badge « avis vérifié » — l'argument commercial du produit. Assez présent
   pour se voir sur une carte, assez sobre pour ne pas manger la citation. */
.avis-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--c-accent);
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--c-accent);
    white-space: nowrap;
}

.avis-card__verifie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--c-border);
}

.avis-card__verifie-aide {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* ÉTAT DU JOUR DU LANCEMENT : aucun avis sur le site. Un encart plein, pas un
   carrousel vide — il porte l'explication du badge plutôt qu'un blanc. */
.avis-vide {
    margin: 0;
    padding: 1.5rem;
    background-color: var(--c-bg);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text-muted);
    line-height: 1.7;
}

.avis-vide .avis-badge {
    /* Cité dans une phrase : ne doit pas décaler l'interligne. */
    vertical-align: baseline;
}

/* ---- Formulaire de dépôt d'avis (espace client) ---- */
.avis-note {
    border: none;
    margin: 0 0 1.2rem;
    padding: 0;
}

.avis-note legend {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    margin-bottom: 0.5rem;
    padding: 0;
}

.avis-note__choix {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Une ligne par note : cible tactile pleine largeur, et le libellé « 3 sur 5 »
   reste lisible à côté des étoiles (celles-ci sont décoratives). */
.avis-note__option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.avis-note__option:hover {
    border-color: var(--c-accent);
}

/* Le bouton radio reste un VRAI radio, visible et focusable : c'est lui qui
   porte la sélection au clavier comme au lecteur d'écran. */
.avis-note__option input {
    accent-color: var(--c-accent);
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}

.avis-note__option:has(input:checked) {
    border-color: var(--c-accent);
}

.avis-note__option:has(input:focus-visible) {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.avis-note__etoiles {
    color: var(--c-accent);
    letter-spacing: 2px;
}

.avis-note__libelle {
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

.avis-form__aide {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

/* La piste est focusable (tabindex) pour que les flèches ← → du clavier la
   fassent défiler nativement, y compris sans JavaScript : il lui faut donc un
   anneau de focus visible, comme à n'importe quel élément atteignable. */
.avis-carousel__track:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 4px;
    border-radius: var(--radius);
}

@media (max-width: 560px) {
    /* Cible tactile d'au moins 44 px : à 390 px, la flèche est le seul point
       d'appui précis, la carte occupant toute la largeur. */
    .avis-carousel__arrow {
        width: 2.9rem;
        height: 2.9rem;
    }

    /* En mobile les flèches sont ramenées SUR les bords (règle du design
       d'origine, plus haut) et recouvrent alors les 46 premiers pixels de la
       carte — donc le début de chaque ligne de la citation, mesuré à 390 px.
       On écarte le contenu de la carte plutôt que de déplacer les flèches :
       les garder à hauteur du pouce, de part et d'autre, est ce qui rend le
       carrousel utilisable d'une seule main. */
    .avis-carousel__track > .avis-card {
        padding-left: 3.4rem;
        padding-right: 3.4rem;
    }

    .avis-resume__note {
        font-size: 1.7rem;
    }
}

/* =========================================================================
   Apparition en fondu des sections au défilement (section_reveal.js)
   L'état masqué n'est appliqué que si le JS a posé .reveal-enabled sur <html>
   ET que l'utilisateur ne demande pas de mouvement réduit : sans JS, tout
   reste visible.
   ========================================================================= */
.reveal-enabled .section.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.reveal-enabled .section.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-enabled .section.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================================
   Mes données & suppression du compte (O8)

   Une page longue, consultée pour répondre à « qu'est-ce que ce salon sait de
   moi ? ». Elle réutilise ce qui existe déjà dans l'espace client (.client-table
   dans .table-scroll, .badge, .tunnel-recap) ; ce bloc n'ajoute que ce qui lui
   est propre : la barre d'actions, le sommaire chiffré, la fiche en deux
   colonnes, les cartes d'avis et de séries, et la phrase à recopier.
   ========================================================================= */
.donnees-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.donnees-aide {
    color: var(--c-text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
}

.donnees-aide a {
    color: var(--c-accent);
}

/* Sommaire : autant de liens que de sections, chacun avec son compte. Sur
   téléphone, les puces passent à la ligne d'elles-mêmes plutôt que de forcer
   un défilement horizontal. */
.donnees-sommaire {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.donnees-sommaire a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 99px;
    background: var(--c-bg-elev);
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

.donnees-sommaire a:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.donnees-sommaire span {
    color: var(--c-accent);
    font-family: "Oswald", sans-serif;
}

/* Compteur repris dans les titres de section. */
.donnees-compteur {
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

/* Fiche d'identité : libellé au-dessus de la valeur, en grille auto-ajustée —
   une colonne à 390 px, deux ou trois au-delà, sans media query. */
.donnees-fiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 1.1rem 1.25rem;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.donnees-fiche dt {
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 0.25rem;
}

.donnees-fiche dd {
    margin: 0;
    /* Une adresse e-mail longue ne doit pas élargir la grille. */
    overflow-wrap: anywhere;
}

.donnees-liste {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.donnees-carte {
    padding: 1.1rem 1.25rem;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.donnees-carte__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.donnees-carte__titre {
    margin: 0;
    color: var(--c-accent);
    font-family: "Oswald", sans-serif;
    letter-spacing: 1px;
}

.donnees-carte p {
    margin: 0 0 0.4rem;
}

.donnees-carte .aide,
.client-table .aide {
    display: block;
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

.donnees-annule {
    color: #e88;
}

/* Conséquences de la suppression : une liste qu'on lit, pas qu'on survole. */
.donnees-consequences {
    margin: 0;
    padding-left: 1.2rem;
}

.donnees-consequences li {
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.donnees-consequences li:last-child {
    margin-bottom: 0;
}

/* La phrase à recopier : lisible, sélectionnable, mais posée comme une
   citation — surtout PAS un bouton « copier », la friction est le garde-fou. */
.donnees-phrase {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: var(--c-bg-elev-2);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    color: var(--c-accent);
    font-family: "Oswald", sans-serif;
    letter-spacing: 2px;
    text-align: center;
}