/* ==========================================================================
   JojoCutz — système visuel
   Palette échantillonnée directement dans le logo : noir profond, or brossé,
   filet blanc. Aucune couleur inventée.
   ========================================================================== */

:root {
    /* Noirs */
    --noir:          #000000;
    --fond:          #08080A;
    --surface:       #101014;
    --surface-haute: #17171C;
    --bordure:       #24242C;
    --bordure-claire:#33333D;

    /* Or, du plus sombre au plus brillant */
    --or-sombre:   #907C47;
    --or:          #C1B07A;
    --or-clair:    #E7D19F;
    --or-brillant: #F6ECD3;
    --or-voile:    rgba(193, 176, 122, .12);

    /* Textes */
    --texte:       #F3F1EB;
    --texte-doux:  #9C978B;
    --texte-faible:#6B675E;

    /* Retours */
    --succes:  #4ADE80;
    --erreur:  #F87171;
    --attente: #FBBF24;

    --rayon:       14px;
    --rayon-petit: 9px;
    --largeur:     1140px;

    --metal: linear-gradient(135deg, var(--or-sombre) 0%, var(--or-clair) 38%,
                             var(--or-brillant) 50%, var(--or) 64%, var(--or-sombre) 100%);
}

[hidden] { display: none !important; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 16px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Halo doré discret derrière le haut de page */
body::before {
    content: "";
    position: fixed;
    top: -280px; left: 50%;
    width: 900px; height: 600px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(193,176,122,.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.035em; font-weight: 700; }

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

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px max(20px, calc((100vw - var(--largeur)) / 2));
    background: rgba(8, 8, 10, .82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--bordure);
}

.marque { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marque img { width: 40px; height: 40px; border-radius: 10px; }
.marque-nom { color: #F7F7F5; font-size: 1.1rem; font-weight: 900; letter-spacing: -.04em; }
.site-client .marque-nom::after { content: "."; color: #E1A62A; }

/* Repli si le logo n'est pas chargé */
.marque .marque-texte {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.entete nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.entete nav form { margin: 0; }

.entete nav a,
.entete nav .lien {
    padding: 9px 13px;
    border-radius: var(--rayon-petit);
    font-size: .92rem;
    font-weight: 500;
    color: var(--texte-doux);
    transition: color .18s ease, background .18s ease;
}
.entete nav a:hover,
.entete nav .lien:hover { color: var(--or-clair); background: var(--or-voile); }

.entete nav a.bouton, .entete nav a.bouton:hover { color: var(--noir); }

/* ==========================================================================
   Boutons
   ========================================================================== */

.bouton, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 13px 26px;
    background: var(--metal);
    background-size: 200% 200%;
    color: var(--noir);
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .22s ease, background-position .5s ease;
    box-shadow: 0 2px 14px rgba(193,176,122,.16);
}
.bouton:hover, button:hover, input[type="submit"]:hover {
    transform: translateY(-1px);
    background-position: 100% 0;
    box-shadow: 0 6px 26px rgba(193,176,122,.30);
}
.bouton:active, button:active { transform: translateY(0); }

.bouton.petit, button.petit { padding: 9px 18px; font-size: .88rem; }

/* Bouton secondaire : contour doré */
.bouton.fantome, button.fantome, .bouton-secondaire {
    background: transparent;
    color: var(--or-clair);
    border: 1px solid var(--bordure-claire);
    box-shadow: none;
}
.bouton.fantome:hover, button.fantome:hover, .bouton-secondaire:hover {
    border-color: var(--or-sombre);
    background: var(--or-voile);
    box-shadow: none;
}

/* Lien déguisé en bouton de formulaire (déconnexion, etc.) */
button.lien, .lien {
    background: none; border: 0; box-shadow: none;
    color: var(--texte-doux); font: inherit; font-weight: 500;
    padding: 9px 13px; cursor: pointer; border-radius: var(--rayon-petit);
}
button.lien:hover { background: var(--or-voile); color: var(--or-clair); transform: none; box-shadow: none; }

/* ==========================================================================
   Structure
   ========================================================================== */

.contenu {
    position: relative;
    z-index: 1;
    width: min(var(--largeur), calc(100% - 32px));
    margin: 0 auto 96px;
}

section { margin-top: 88px; }
section:first-child { margin-top: 0; }

.surtitre {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 13px;
    border: 1px solid var(--bordure-claire);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--or-clair);
    background: var(--or-voile);
}

/* ==========================================================================
   Bandeau d'accueil
   ========================================================================== */

.hero { padding: 76px 0 24px; text-align: center; }

.hero-logo { margin: 0 auto 30px; max-width: 380px; }
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 6px 30px rgba(193,176,122,.22)); }

.hero h1 {
    max-width: 15ch;
    margin: 0 auto 20px;
    font-size: clamp(2.5rem, 8.5vw, 5rem);
    letter-spacing: -.05em;
}
.hero h1 .doré {
    background: var(--metal);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero .accroche { max-width: 46ch; margin: 0 auto 26px; color: var(--texte-doux); font-size: 1.06rem; }

.hero-infos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
    margin: 0 0 30px; color: var(--texte-doux); font-size: .95rem;
}
.hero-infos a:hover { color: var(--or-clair); }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Bandeau de note Google */
.note-google {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 auto 22px; padding: 8px 16px;
    border: 1px solid var(--bordure-claire); border-radius: 999px;
    background: var(--surface); font-size: .9rem;
}
.note-google .etoiles { color: var(--or-clair); letter-spacing: .08em; }
.note-google strong { color: var(--texte); }
.note-google span { color: var(--texte-doux); }

/* ==========================================================================
   Cartes et grilles
   ========================================================================== */

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

.carte {
    position: relative;
    padding: 24px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: linear-gradient(180deg, var(--surface-haute), var(--surface));
    transition: border-color .2s ease, transform .2s ease;
}
.carte:hover { border-color: var(--or-sombre); transform: translateY(-2px); }

.carte h3 { font-size: 1.12rem; margin-bottom: 6px; }
.carte p { margin: 0 0 14px; color: var(--texte-doux); font-size: .92rem; }
.carte strong {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Carte de service : le tarif descend en bas */
.carte-service { display: flex; flex-direction: column; }

/* Photo d'exemple du service. Marges négatives : l'image touche les bords de la
   carte, dont le débordement est masqué par le rayon de bordure. */
.carte { overflow: hidden; }
.vignette {
    width: calc(100% + 48px);
    margin: -24px -24px 16px;
    height: 168px;
    object-fit: cover;
    border-bottom: 1px solid var(--bordure);
}

/* Bannière du salon, entre les services et les avis */
.banniere { margin-top: 72px; }
.banniere img {
    width: 100%;
    height: clamp(200px, 34vw, 420px);
    object-fit: cover;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.carte-service .duree {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--texte-faible);
}
.carte-service .bas {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: auto; padding-top: 16px;
}

/* ==========================================================================
   Horaires
   ========================================================================== */

.horaire-public dl { display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; margin: 14px 0 0; }
.horaire-public dt { color: var(--texte-doux); font-size: .92rem; }
.horaire-public dd {
    margin: 0; text-align: right; font-size: .92rem;
    font-variant-numeric: tabular-nums; color: var(--texte);
}
.horaire-public dd:only-child, .horaire-public .ferme { color: var(--texte-faible); }

/* ==========================================================================
   Avis
   ========================================================================== */

.avis { display: flex; flex-direction: column; gap: 12px; }
.avis .etoiles { color: var(--or-clair); font-size: .95rem; letter-spacing: .1em; }
.avis blockquote { margin: 0; font-size: .98rem; line-height: 1.65; color: var(--texte); }
.avis figcaption { display: flex; align-items: center; gap: 10px; color: var(--texte-doux); font-size: .86rem; }
.avis .pastille {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--or-voile); border: 1px solid var(--bordure-claire);
    color: var(--or-clair); font-weight: 700; font-size: .82rem;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

form { margin: 22px 0; }

label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--texte-doux); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--or-sombre);
    box-shadow: 0 0 0 3px var(--or-voile);
}
textarea { min-height: 110px; resize: vertical; }

::placeholder { color: var(--texte-faible); }

.champ, form p { margin: 0 0 16px; }
.aide, .helptext { display: block; margin-top: 5px; font-size: .82rem; color: var(--texte-faible); }
.erreurlist, .errorlist { margin: 6px 0 0; padding-left: 18px; color: var(--erreur); font-size: .86rem; }

fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px; margin: 0 0 20px; }
legend { padding: 0 8px; font-weight: 700; color: var(--or-clair); }

/* Choix de créneaux : boutons en grille */
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.creneaux button, .creneaux .bouton {
    padding: 11px 8px; border-radius: var(--rayon-petit);
    background: var(--surface); color: var(--texte);
    border: 1px solid var(--bordure); box-shadow: none;
    font-variant-numeric: tabular-nums; font-weight: 600;
}
.creneaux button:hover, .creneaux .bouton:hover {
    border-color: var(--or); background: var(--or-voile); color: var(--or-clair);
    transform: none; box-shadow: none;
}

/* ==========================================================================
   Tableaux
   ========================================================================== */

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .93rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--bordure); }
th { color: var(--texte-doux); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:hover { background: var(--surface); }

/* ==========================================================================
   Messages et états
   ========================================================================== */

.message {
    padding: 13px 16px; margin: 0 0 14px;
    border: 1px solid var(--bordure-claire); border-left-width: 3px;
    border-radius: var(--rayon-petit);
    background: var(--surface); font-size: .93rem;
}
.message.success { border-left-color: var(--succes); }
.message.error   { border-left-color: var(--erreur); }
.message.warning { border-left-color: var(--attente); }
.message.info    { border-left-color: var(--or); }

.etiquette {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    background: var(--or-voile); color: var(--or-clair); border: 1px solid var(--bordure-claire);
}

/* ==========================================================================
   Actions et pied de page
   ========================================================================== */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }

.pied-page {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px;
    width: min(var(--largeur), calc(100% - 32px));
    margin: 0 auto; padding: 30px 0 40px;
    border-top: 1px solid var(--bordure);
    color: var(--texte-faible); font-size: .87rem;
}
.pied-page a:hover { color: var(--or-clair); }
.pied-page .pied-liens { display: flex; flex-wrap: wrap; gap: 18px; }

/* ==========================================================================
   Téléphone
   ========================================================================== */

@media (max-width: 720px) {
    .entete { padding: 12px 16px; gap: 12px; }
    .marque img { height: 32px; }
    .entete nav { gap: 2px; }
    .entete nav a, .entete nav .lien { padding: 8px 10px; font-size: .86rem; }

    .contenu { width: calc(100% - 28px); margin-bottom: 64px; }
    section { margin-top: 60px; }
    .hero { padding: 44px 0 12px; }
    .hero-logo { max-width: 280px; margin-bottom: 24px; }
    .hero-actions .bouton { width: 100%; }
    .grille { grid-template-columns: 1fr; }
    .carte { padding: 20px; }
    .vignette { width: calc(100% + 40px); margin: -20px -20px 14px; height: 148px; }
    .banniere { margin-top: 52px; }
    .pied-page { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ==========================================================================
   Portail client — noir et or, accès direct à la réservation
   ========================================================================== */

.site-client .hero {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: clamp(48px, 8vw, 88px) clamp(18px, 5vw, 62px);
    border: 1px solid rgba(231, 209, 159, .13);
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 0, rgba(193, 176, 122, .2), transparent 34%),
        linear-gradient(145deg, #12130F, #08080A 64%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    animation: portail-entree .45s cubic-bezier(.2, .8, .3, 1) both;
}
.site-client .hero::after {
    content: "JC";
    position: absolute;
    right: clamp(-20px, 4vw, 30px);
    bottom: -45px;
    color: rgba(231, 209, 159, .045);
    font-size: clamp(9rem, 25vw, 20rem);
    font-weight: 850;
    letter-spacing: -.12em;
    line-height: 1;
    pointer-events: none;
}
.site-client .hero > * { position: relative; z-index: 1; }
.site-client .hero-logo { max-width: 260px; margin-bottom: 20px; }
.site-client .hero h1 { max-width: 14ch; font-size: clamp(2.6rem, 8vw, 5rem); }
.site-client .portail-emplacement { margin-bottom: 14px; border: 0; background: transparent; }
.site-client .hero .accroche { max-width: 54ch; }

.portail-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
}
.portail-actions a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    align-items: center;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--bordure);
    border-radius: 18px;
    background: linear-gradient(145deg, #17171C, #101014);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.portail-actions a:hover { transform: translateY(-3px); border-color: var(--or-sombre); background: #1B1A16; }
.portail-actions a:first-child { border-color: rgba(231, 209, 159, .32); background: linear-gradient(145deg, #2A2112, #17130D); }
.portail-action-icone {
    grid-row: 1 / 3;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    color: #171109;
    background: var(--metal);
    font-size: 1.2rem;
    font-weight: 800;
}
.portail-actions strong { align-self: end; color: var(--texte); font-size: .94rem; }
.portail-actions small { align-self: start; color: var(--texte-doux); font-size: .76rem; }
.site-client #services { margin-top: 72px; }
.site-client .carte-service { border-radius: 20px; }

@keyframes portail-entree {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
    .site-client .entete nav a:not(.bouton), .site-client .entete nav form { display: none; }
    .site-client .hero { margin-top: 12px; padding: 34px 19px 38px; text-align: left; }
    .site-client .hero-logo { margin: 0 0 18px; max-width: 210px; }
    .site-client .note-google { margin-left: 0; }
    .site-client .hero h1, .site-client .hero .accroche { margin-left: 0; }
    .site-client .hero-infos, .site-client .hero-actions { justify-content: flex-start; }
    .site-client .hero-actions .bouton { width: auto; }
    .portail-actions { grid-template-columns: 1fr 1fr; gap: 9px; }
    .portail-actions a { grid-template-columns: 1fr; min-height: 112px; padding: 13px; align-content: center; }
    .portail-actions a:first-child { grid-column: 1 / -1; grid-template-columns: auto 1fr; min-height: 84px; }
    .portail-actions a:first-child .portail-action-icone { grid-row: 1 / 3; }
    .portail-action-icone { grid-row: auto; width: 39px; height: 39px; }
}

/* ==========================================================================
   App Jojo — interface de gestion claire, mobile-first
   ========================================================================== */

.app-jojo {
    --app-fond: #F1ECE2;
    --app-fond-haut: #FAF6ED;
    --app-carte: #FFFDF8;
    --app-encre: #1D241F;
    --app-doux: #68736B;
    --app-ligne: #DED7CA;
    --app-or: #D7A84E;
    --app-or-clair: #F2D99E;
    --app-vert: #0B0B0D;
    min-height: 100vh;
    color: var(--app-encre);
    background:
        radial-gradient(circle at 92% 0, rgba(215, 168, 78, .22), transparent 25rem),
        linear-gradient(180deg, var(--app-fond-haut), var(--app-fond));
}

.app-jojo::before { display: none; }

.app-entete {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: 12px max(18px, calc((100vw - 1320px) / 2));
    border-bottom: 1px solid rgba(66, 75, 68, .1);
    background: rgba(255, 253, 248, .9);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.app-identite { display: flex; align-items: center; gap: 10px; }
.app-identite > span:last-child { display: grid; line-height: 1.15; }
.app-identite strong { color: var(--app-encre); font-size: .98rem; }
.app-identite small { color: var(--app-doux); font-size: .72rem; }
.app-monogramme {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #241B0D;
    background: linear-gradient(145deg, var(--app-or-clair), var(--app-or));
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(163, 111, 25, .16);
}
.app-logo {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(5, 5, 5, .16);
}
.app-identite-mobile { display: none; }
.app-entete-actions { display: flex; align-items: center; gap: 12px; }
.app-entete-actions form { margin: 0; }
.app-statut { display: inline-flex; align-items: center; gap: 7px; color: var(--app-doux); font-size: .8rem; }
.app-statut i { width: 8px; height: 8px; border-radius: 50%; background: #4E9D70; box-shadow: 0 0 0 4px rgba(78, 157, 112, .12); }
.app-deconnexion {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--app-ligne);
    border-radius: 11px;
    color: var(--app-encre);
    background: var(--app-carte);
    box-shadow: none;
}

.app-jojo .contenu { width: 100%; max-width: none; margin: 0; }
.app-jojo .contenu > .message { width: min(760px, calc(100% - 28px)); margin: 14px auto 0; }
.app-coque { display: grid; grid-template-columns: 242px minmax(0, 1fr); min-height: calc(100vh - 70px); }
.app-lateral {
    padding: 24px 14px;
    border-right: 1px solid rgba(66, 75, 68, .1);
    background: rgba(255, 253, 248, .62);
}
.app-nav-titre { margin: 0 10px 8px; color: #8B938C; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.app-nav-titre:not(:first-child) { margin-top: 25px; }
.console-nav { display: grid; gap: 5px; }
.console-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 45px;
    padding: 9px 12px;
    border-radius: 13px;
    color: #58635C;
    font-size: .9rem;
    font-weight: 650;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.console-nav a span { display: grid; width: 24px; place-items: center; color: #8B7650; font-size: 1.05rem; }
.console-nav a:hover { color: var(--app-encre); background: #F6EEDC; transform: translateX(2px); }
.console-nav a.actif { color: #6A4510; background: #F6E8C8; }
.console-nav a.actif span { color: #A06D1B; }
.console-nav-secondaire a { font-weight: 550; }

.app-principale { min-width: 0; padding: 30px clamp(18px, 3vw, 46px) 60px; animation: app-page .32s cubic-bezier(.2,.8,.3,1) both; }
.app-principale h1, .app-principale h2, .app-principale h3 { color: var(--app-encre); }
.app-principale h1 { font-size: clamp(2rem, 4vw, 3rem); }
.app-principale p { color: var(--app-doux); }
.app-principale section { margin-top: 20px; }
.app-principale section:first-child { margin-top: 0; }
.app-principale .surtitre {
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    color: #95651B;
    background: transparent;
}
.app-principale .titre-action { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.app-principale .actions { margin-top: 15px; }

.app-principale .carte,
.app-principale .panneau,
.app-principale .jour-calendrier,
.app-principale .rdv-console,
.app-principale .alerte-frais {
    border: 1px solid rgba(71, 80, 73, .09);
    border-radius: 19px;
    color: var(--app-encre);
    background: rgba(255, 253, 248, .95);
    box-shadow: 0 12px 34px rgba(55, 44, 24, .065);
}
.app-principale .panneau,
.app-principale .jour-calendrier,
.app-principale .alerte-frais { padding: 20px; }
.app-principale .carte:hover { border-color: rgba(163, 111, 25, .22); box-shadow: 0 15px 38px rgba(55, 44, 24, .09); }
.app-principale .carte p,
.app-principale .rdv-console small,
.app-principale .vide { color: var(--app-doux); }

.app-principale .bouton,
.app-principale button,
.app-principale input[type="submit"] {
    border-radius: 13px;
    color: #241B0D;
    background: linear-gradient(145deg, var(--app-or-clair), var(--app-or));
    box-shadow: 0 8px 22px rgba(163, 111, 25, .14);
}
.app-principale .bouton:hover,
.app-principale button:hover { box-shadow: 0 11px 27px rgba(163, 111, 25, .2); }
.app-principale .danger,
.app-principale button.danger {
    border: 1px solid #E1B5AF;
    color: #A13B34;
    background: #FFF7F5;
    box-shadow: none;
}
.app-principale button.selectionne { color: #F9F6EE; background: var(--app-vert); }
.app-principale button.danger-fond { color: #FFF8F6; background: #A7443E; }

.app-principale input[type="text"],
.app-principale input[type="email"],
.app-principale input[type="password"],
.app-principale input[type="tel"],
.app-principale input[type="search"],
.app-principale input[type="number"],
.app-principale input[type="date"],
.app-principale input[type="time"],
.app-principale input[type="datetime-local"],
.app-principale select,
.app-principale textarea {
    border-color: var(--app-ligne);
    color: var(--app-encre);
    background: var(--app-carte);
}
.app-principale label { color: #4D5850; }
.app-principale .helptext, .app-principale .aide { color: var(--app-doux); }

.barre-calendrier {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 7px;
    border-radius: 16px;
    background: #E8E1D5;
}
.barre-calendrier > a { padding: 9px 12px; color: #5A655E; font-weight: 650; }
.barre-calendrier > a:last-child { text-align: right; }
.choix-vue { display: flex; gap: 4px; }
.choix-vue a { padding: 8px 14px; border-radius: 10px; color: #68736B; font-size: .86rem; font-weight: 700; }
.choix-vue a.actif { color: #FFF9F0; background: var(--app-vert); }
.jours-calendrier { display: grid; gap: 14px; }
.jour-calendrier { min-width: 0; }
.jour-calendrier h2 { margin-bottom: 15px; font-size: 1.08rem; }
.rdv-console { margin-top: 10px; padding: 15px; }
.rdv-console-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rdv-console-titre span { color: #655226; font-size: .82rem; }
.rdv-console > a { display: inline-block; margin-bottom: 3px; font-weight: 750; }
.rdv-console-resume { display: grid; min-width: 0; gap: 2px; line-height: 1.15; }
.rdv-console-resume strong,
.rdv-console-resume span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-console-resume strong { color: #26322B; font-size: .82rem; }
.rdv-console-resume span { color: #56635B; font-size: .74rem; font-weight: 750; }
.pointage { display: grid; gap: 7px; margin-top: 12px; }
.pointage form, .actions-console form { margin: 0; }
.pointage form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pointage button { padding: 8px 10px; font-size: .78rem; }
.actions-console { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.actions-console a, .actions-console button { min-height: 34px; padding: 7px 10px; border-radius: 10px; font-size: .76rem; }

.recherche { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin: 0 0 16px; }
.recherche input { min-height: 51px; }
.liste-clients, .liste-rendez-vous { display: grid; gap: 10px; }
.client-ligne { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 18px; }
.client-ligne small { color: var(--app-doux); }
.fiche-client { align-items: start; }
.fiche-client .panneau { margin-top: 0; }
.fiche-client dl { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.fiche-client dt { color: var(--app-doux); }
.fiche-client dd { margin: 0; font-weight: 750; }

.app-principale table { overflow: hidden; border-radius: 15px; background: var(--app-carte); }
.app-principale th { color: var(--app-doux); }
.app-principale th, .app-principale td { border-color: var(--app-ligne); }
.app-principale tbody tr:hover { background: #FAF4E7; }
.app-principale .message { color: var(--app-encre); background: var(--app-carte); }

.app-navigation-mobile { display: none; }

@keyframes app-page {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 820px) {
    .app-entete { min-height: 62px; padding: 10px 14px; }
    .app-identite small, .app-statut, .app-deconnexion { display: none; }
    .app-coque { display: block; min-height: 0; }
    .app-lateral { display: none; }
    .app-principale { padding: 22px 14px 108px; }
    .app-principale h1 { font-size: 2rem; }
    .app-principale .titre-action { align-items: center; }
    .app-principale .titre-action .bouton { padding: 10px 13px; font-size: .78rem; }
    .app-navigation-mobile {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 70;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        min-height: 80px;
        padding: 6px max(6px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        border-top: 1px solid rgba(66, 75, 68, .12);
        background: rgba(255, 253, 248, .95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -10px 30px rgba(55, 44, 24, .08);
    }
    .app-navigation-mobile a { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; border-radius: 12px; color: #707970; touch-action: manipulation; }
    .app-navigation-mobile a span { font-size: 1.15rem; line-height: 1; }
    .app-navigation-mobile a small { max-width: 100%; overflow: hidden; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
    .app-navigation-mobile a.actif { color: #7B5114; background: #F7ECD4; }
.app-navigation-mobile a.ajouter { margin: -16px 4px 4px; border-radius: 17px; color: #FFF9F0; background: var(--app-vert); box-shadow: 0 9px 24px rgba(11, 11, 13, .24); }
.app-navigation-mobile::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--jojo-jaune, #E1A62A);
    opacity: 0;
}
.app-navigation-mobile a.navigation-touchee { color: #6A4510; background: #F7ECD4; transform: scale(.96); }
.app-navigation-en-cours .app-navigation-mobile::before { opacity: 1; animation: navigation-rapide 1.4s ease-out forwards; }
.app-navigation-en-cours .app-principale { opacity: .88; transition: opacity .12s ease; }
    .barre-calendrier { grid-template-columns: 1fr 1fr; }
    .barre-calendrier .choix-vue { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
    .barre-calendrier > a { grid-row: 2; }
}

@media (max-width: 430px) {
    .app-principale .titre-action { align-items: flex-start; }
    .recherche { grid-template-columns: 1fr; }
    .recherche button { width: 100%; }
    .client-ligne { align-items: flex-start; flex-direction: column; }
    .app-principale .grille { gap: 11px; }
}

/* ==========================================================================
   Finitions des parcours réels — contraste, états et interactions
   ========================================================================== */

.site-client .panneau {
    margin-top: 34px;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid var(--bordure);
    border-radius: 22px;
    color: var(--texte);
    background: linear-gradient(145deg, #17171C, #0F0F13);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}
.site-client .panneau.etroit { width: min(640px, 100%); margin-inline: auto; }
.site-client .panneau h1, .site-client .panneau h2, .site-client .panneau h3 { color: var(--texte); }
.site-client .panneau p { color: #B7B3AA; }
.site-client .panneau a:not(.bouton) { color: var(--or-clair); }
.site-client .panneau input,
.site-client .panneau select,
.site-client .panneau textarea { color: var(--texte); background: #0D0D10; }
.site-client .panneau label { color: #D3CFC5; }

.reservation-progression {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(700px, 100%);
    margin: 30px auto 0;
    color: #6F6B63;
    font-size: .78rem;
    font-weight: 750;
    text-align: center;
}
.reservation-progression span { position: relative; display: grid; gap: 6px; justify-items: center; }
.reservation-progression span::after { content: ""; position: absolute; top: 14px; left: 60%; width: 80%; height: 2px; background: #29292F; }
.reservation-progression span:last-child::after { display: none; }
.reservation-progression b { position: relative; z-index: 1; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #33333B; border-radius: 50%; background: #101014; }
.reservation-progression .actif { color: var(--or-clair); }
.reservation-progression .actif b { border-color: var(--or); color: #171109; background: var(--metal); }
.reservation-panneau { width: min(820px, 100%); margin-inline: auto; }
.reservation-panneau > h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.reservation-formulaire { display: grid; gap: 18px; }
.choix-services { display: grid; gap: 9px; padding: 0; border: 0; }
.choix-services legend { margin-bottom: 8px; padding: 0; color: #D3CFC5; }
.choix-service {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 13px;
    border: 1px solid #2A2A31;
    border-radius: 16px;
    color: var(--texte);
    background: #111115;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.choix-service:hover { transform: translateY(-2px); border-color: #6D5B35; background: #191713; }
.choix-service:has(input:checked) { border-color: var(--or); background: #211C12; box-shadow: 0 0 0 2px rgba(193, 176, 122, .1); }
.choix-service input { width: 18px; height: 18px; margin: 0; accent-color: var(--or); }
.choix-service-couleur { width: 9px; height: 42px; border-radius: 5px; background: var(--couleur-service); }
.choix-service-image { width: 58px; height: 58px; border: 1px solid #39332A; border-radius: 12px; object-fit: cover; }
.choix-service span strong, .choix-service span small { display: block; }
.choix-service span small { margin-top: 3px; color: var(--texte-doux); }
.choix-service > b { color: var(--or-clair); font-size: 1.05rem; }
.reservation-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reservation-continuer { width: 100%; min-height: 52px; }
.reservation-continuer span { font-size: 1.2rem; }
.lien-after { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 15px; border: 1px solid #594822; border-radius: 15px; background: #1B170F; }
.lien-after strong, .lien-after span { display: block; }
.lien-after span { color: #AFA89A; font-size: .82rem; text-align: right; }
.creneaux-section { width: min(820px, 100%); margin-inline: auto; }
.creneaux-section > p { color: var(--texte-doux); }
.creneaux-section .creneaux button { min-height: 51px; border-radius: 13px; }
.after-prix { display: grid; gap: 3px; margin: 18px 0; padding: 18px; border: 1px solid #5A4823; border-radius: 17px; background: #1E190F; }
.after-prix span, .after-prix small { color: #BEB7AA; }
.after-prix strong { color: var(--or-clair); font-size: 2rem; }
.after-horaire { margin: 16px 0; padding: 14px; border: 1px solid rgba(214, 174, 91, .24); border-radius: 15px; background: rgba(215, 168, 78, .07); }
.after-horaire > strong { display: block; margin-bottom: 10px; color: #F3E9D2; }
.after-horaire > div { display: flex; flex-wrap: wrap; gap: 7px; }
.after-horaire span { padding: 7px 9px; border: 1px solid rgba(214, 174, 91, .19); border-radius: 99px; color: #D9CEBA; background: rgba(255, 255, 255, .035); font-size: .72rem; }
.info-reservation { padding: 13px; border-left: 3px solid var(--or); background: #15130E; }

/* Parcours client — même logique guidée que l’ajout App Jojo */
.reservation-client-v2 { width: min(860px, 100%); margin: 30px auto 0; }
.reservation-client-v2 [hidden] { display: none !important; }
.reservation-client-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.reservation-client-entete h1 { margin: 4px 0 8px; font-size: clamp(2rem, 6vw, 3.45rem); letter-spacing: -.045em; }
.reservation-client-entete p { max-width: 590px; margin: 0; color: #AAA69D; }
.reservation-client-identite { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #2C2A26; border-radius: 16px; background: #111114; }
.reservation-client-identite > b { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #1D160A; background: var(--metal); }
.reservation-client-identite span, .reservation-client-identite small, .reservation-client-identite strong { display: block; }
.reservation-client-identite small { color: #8D887E; font-size: .68rem; }
.reservation-client-identite strong { margin-top: 2px; color: #F3F1EB; font-size: .85rem; }
.reservation-client-progression { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.reservation-client-progression span { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid #24242A; border-radius: 13px; color: #767269; background: #0E0E11; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.reservation-client-progression b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #8F8A80; background: #1A1A1E; font-size: .74rem; }
.reservation-client-progression small { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.reservation-client-progression span.actif { border-color: #6C5730; color: var(--or-clair); background: #18140D; }
.reservation-client-progression span.actif b { color: #1D160A; background: var(--metal); }
.reservation-client-formulaire { display: block; }
.reservation-client-etape { padding: clamp(20px, 4vw, 32px); border: 1px solid #27272D; border-radius: 24px; background: linear-gradient(145deg, #121216, #0E0E11); box-shadow: 0 24px 70px rgba(0, 0, 0, .24); animation: reservation-client-entree .18s ease-out; }
.reservation-client-etape-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.reservation-client-etape-entete h2 { margin: 3px 0 5px; font-size: clamp(1.55rem, 5vw, 2.25rem); letter-spacing: -.035em; }
.reservation-client-etape-entete p { margin: 0; color: #A9A59C; }
.reservation-client-services { display: grid; gap: 10px; }
.reservation-client-services > button { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; width: 100%; min-height: 76px; margin: 0; padding: 9px 13px; border: 1px solid #2A2A31; border-radius: 17px; color: var(--texte); background: #17171B; box-shadow: none; text-align: left; }
.reservation-client-services > button:hover { border-color: #8E713D; background: #211B11; transform: translateY(-1px); }
.reservation-client-services img, .reservation-client-services i { width: 58px; height: 58px; border: 1px solid #39332A; border-radius: 13px; object-fit: cover; }
.reservation-client-services i { display: block; background: var(--couleur-service); }
.reservation-client-services span strong, .reservation-client-services span small { display: block; }
.reservation-client-services span small { margin-top: 4px; color: #99958C; font-size: .76rem; }
.reservation-client-services > button > b { color: var(--or-clair); white-space: nowrap; }
.reservation-client-services em { color: #8D7B55; font-size: 1.35rem; font-style: normal; }
.reservation-client-after { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; padding: 15px 17px; border: 1px solid #584621; border-radius: 17px; background: #1C170E; }
.reservation-client-after span small, .reservation-client-after span strong { display: block; }
.reservation-client-after span small { margin-bottom: 3px; color: #9F998D; }
.reservation-client-after span strong, .reservation-client-after > b { color: var(--or-clair); }
.reservation-client-after > b { font-size: .78rem; white-space: nowrap; }
.reservation-client-selection { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 18px; padding: 14px; border: 1px solid #4B412D; border-radius: 17px; background: #1A160F; }
.reservation-client-selection .app-logo-mini { border: 1px solid #54431F; color: #E8BA4D; background: #080808; }
.reservation-client-selection div small, .reservation-client-selection div strong, .reservation-client-selection div span { display: block; }
.reservation-client-selection div small, .reservation-client-selection div span { color: #9D978C; }
.reservation-client-selection div strong { margin: 2px 0; color: #F5F0E5; }
.reservation-client-selection > b { color: #E5B94E; }
.reservation-client-date { display: grid; gap: 8px; color: #D9D4C9; font-weight: 800; }
.reservation-client-date input { min-height: 58px; margin: 0; border-color: #37343B; border-radius: 15px; font-size: 1rem; }
.reservation-client-date small { color: #969188; font-weight: 500; }
.reservation-client-calendrier { padding: 14px; border: 1px solid #343238; border-radius: 19px; background: #111115; }
.reservation-client-calendrier-nav { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; margin-bottom: 12px; }
.reservation-client-calendrier-nav strong { color: #F3EFE5; font-size: 1rem; text-align: center; text-transform: capitalize; }
.reservation-client-calendrier-nav button { min-height: 40px; margin: 0; padding: 0; border: 1px solid #37343B; border-radius: 12px; color: #E8DFCD; background: #1A1A1F; box-shadow: none; font-size: 1.35rem; }
.reservation-client-calendrier-nav button:hover:not(:disabled) { border-color: #9B7837; color: #F4C96A; background: #211A0F; transform: none; }
.reservation-client-calendrier-nav button:disabled { opacity: .3; }
.reservation-client-calendrier-semaine,
.reservation-client-calendrier-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.reservation-client-calendrier-semaine { margin-bottom: 6px; }
.reservation-client-calendrier-semaine span { color: #858077; font-size: .64rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.reservation-client-calendrier-jours button,
.reservation-client-calendrier-jours .vide { aspect-ratio: 1; min-width: 0; }
.reservation-client-calendrier-jours button { min-height: 38px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 12px; color: #E8E3D9; background: #1A1A1F; box-shadow: none; font-size: .82rem; font-weight: 800; }
.reservation-client-calendrier-jours button:hover:not(:disabled) { border-color: #8A6B32; color: #F5CC70; background: #211A0F; transform: none; }
.reservation-client-calendrier-jours button.aujourdhui { border-color: #5A5142; }
.reservation-client-calendrier-jours button.selectionne { border-color: #E4B756; color: #1A1307; background: var(--metal); }
.reservation-client-calendrier-jours button:disabled { color: #4F4C46; background: #141417; opacity: .48; }
.reservation-client-calendrier > small { display: block; margin-top: 11px; color: #969188; font-size: .72rem; line-height: 1.45; }
.reservation-client-actions { display: grid; grid-template-columns: auto minmax(220px, 1fr); gap: 9px; margin-top: 20px; }
.reservation-client-actions button { min-height: 51px; margin: 0; }
.reservation-client-creneaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.reservation-client-creneaux button { min-height: 52px; margin: 0; border: 1px solid #333138; border-radius: 14px; color: #EDE9E0; background: #18181C; box-shadow: none; }
.reservation-client-creneaux button:hover, .reservation-client-creneaux button.selectionne { border-color: #D0A94E; color: #1A1307; background: var(--metal); transform: none; }
.reservation-client-creneaux-etat { margin: 13px 0 0; color: #A6A197; text-align: center; }
.reservation-client-after-raccourci { display: block; margin-top: 13px; padding: 11px 13px; border: 1px solid #4A3D24; border-radius: 13px; color: #AFA89A; background: #17130D; text-align: center; }
.reservation-client-after-raccourci strong { color: var(--or-clair); }
.reservation-client-confirmation { margin-top: 22px; padding: 18px; border: 1px solid #5B4927; border-radius: 19px; background: #19150E; }
.reservation-client-confirmation dl { display: grid; gap: 0; margin: 8px 0 15px; }
.reservation-client-confirmation dl div { display: grid; grid-template-columns: minmax(100px, .8fr) 1.2fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(220, 189, 120, .12); }
.reservation-client-confirmation dt { color: #9F998E; }
.reservation-client-confirmation dd { margin: 0; color: #F4EFE4; font-weight: 800; text-align: right; }
.reservation-client-confirmation button { width: 100%; min-height: 54px; margin: 0; }
.reservation-client-sans-paiement { margin: 0 0 13px; color: #AAA397; text-align: center; }
@keyframes reservation-client-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.app-page-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.app-page-entete p { margin: 5px 0 0; }
.app-notification { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: var(--app-encre); background: var(--app-carte); box-shadow: 0 8px 24px rgba(55, 44, 24, .09); transition: transform .18s ease, background .18s ease; }
.app-notification:hover { transform: translateY(-2px); background: #F8EBCF; }
.resume-journee {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: clamp(20px, 4vw, 30px);
    border-radius: 24px;
    color: #251B0B;
    background: linear-gradient(135deg, #F2D99E, #D7A84E);
    box-shadow: 0 18px 40px rgba(174, 121, 32, .16);
}
.resume-journee span, .resume-journee strong, .resume-journee small { display: block; }
.resume-journee span { color: #5A421B; font-size: .74rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.resume-journee > div > strong { margin: 8px 0 4px; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.05em; }
.resume-cercle { display: grid; width: 88px; height: 88px; place-items: center; align-content: center; border: 8px solid rgba(255, 255, 255, .38); border-radius: 50%; background: rgba(255, 255, 255, .16); text-align: center; }
.resume-cercle strong { font-size: 1.7rem; line-height: 1; }
.resume-cercle small { font-size: .62rem; font-weight: 800; }
.app-statistiques { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 12px; }
.app-statistiques a { padding: 18px; border-radius: 18px; background: var(--app-carte); box-shadow: 0 10px 28px rgba(55, 44, 24, .06); transition: transform .18s ease, box-shadow .18s ease; }
.app-statistiques a:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(55, 44, 24, .1); }
.app-statistiques span, .app-statistiques strong { display: block; }
.app-statistiques span { color: var(--app-doux); font-size: .78rem; }
.app-statistiques strong { margin-top: 6px; color: var(--app-encre); font-size: 1.65rem; letter-spacing: -.04em; }
.tableau-journee { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 14px; margin-top: 14px; }
.tableau-journee section { margin-top: 0; }
.section-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-ligne > span { color: var(--app-doux); font-size: .78rem; }
.statut-pastille { padding: 5px 9px; border-radius: 999px; color: #2E6241; background: #E3F4E8; font-size: .7rem; font-weight: 800; }
.statut-pastille.attente { color: #69450F; background: #F7E5B8; }
.prochain-client { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-top: 14px; color: var(--app-encre); }
.prochain-client span strong, .prochain-client span small { display: block; }
.prochain-client span small { margin-top: 3px; color: var(--app-doux); }
.client-initiales { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #251B0B; background: linear-gradient(145deg, var(--app-or-clair), var(--app-or)); font-weight: 850; text-transform: uppercase; }
.demande-resume { margin-top: 12px !important; background: linear-gradient(145deg, #FFF9ED, #F5E6C6) !important; }
.actions-rapides > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.actions-rapides a { display: grid; min-height: 82px; align-content: center; gap: 5px; padding: 13px; border: 1px solid rgba(71, 80, 73, .09); border-radius: 15px; color: var(--app-encre); background: #F8F4EC; transition: transform .18s ease, background .18s ease; }
.actions-rapides a:last-child { grid-column: 1 / -1; }
.actions-rapides a:hover { transform: translateY(-2px); background: #F8EBCF; }
.actions-rapides a span { color: #95651B; font-size: 1.2rem; }

.legende-services { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.legende-services span { padding: 5px 9px; border-radius: 99px; color: #465049; background: #FFFDF8; font-size: .68rem; }
.legende-services .service-adulte { border-left: 4px solid #3B82C4; }
.legende-services .service-combo { border-left: 4px solid #8B5CB6; }
.legende-services .service-lineup { border-left: 4px solid #4C956C; }
.legende-services .service-after { border-left: 4px solid #D7A84E; }
.jours-calendrier.vue-3jours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ligne-temps { display: grid; isolation: isolate; }
.creneau-agenda { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; height: 64px; min-height: 64px; padding: 5px 0; border-top: 1px solid rgba(66, 75, 68, .08); }
.creneau-agenda time { padding-top: 9px; color: #7B847D; font-size: .72rem; font-variant-numeric: tabular-nums; }
.creneau-agenda .rdv-console { margin: 0; border-left: 5px solid var(--couleur-service); border-radius: 12px; background: color-mix(in srgb, var(--couleur-service) 12%, #FFFDF8); box-shadow: none; }
.creneau-agenda .rdv-agenda-etendu { position: absolute; z-index: 2; top: calc(5px + var(--rdv-decalage, 0px)); right: 0; left: 56px; height: var(--rdv-hauteur); min-height: 0; padding: 7px 10px; overflow: hidden; }
.creneau-agenda .rdv-agenda-etendu .rdv-console-resume { height: 100%; justify-content: center; }
.creneau-agenda .rdv-agenda-etendu .rdv-console-titre { margin-bottom: 2px; line-height: 1.2; }
.creneau-agenda .rdv-agenda-etendu > a { margin: 0; line-height: 1.2; }
.creneau-agenda .rdv-agenda-etendu > small { display: block; margin-top: 2px; line-height: 1.15; }
.creneau-agenda .rdv-agenda-etendu .actions-console { display: none; }
.vue-jour .rdv-jour-contenu {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: flex-start;
    flex-direction: column;
}
.vue-jour .rdv-jour-contenu strong,
.vue-jour .rdv-jour-contenu span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vue-jour .rdv-jour-contenu strong { width: 100%; color: #202A24; font-size: .94rem; line-height: 1.05; }
.vue-jour .rdv-jour-contenu span { width: 100%; margin-top: 2px; color: #59655D; font-size: .68rem; font-weight: 700; line-height: 1.05; }
.vue-jour .rdv-jour-contenu b { margin-top: auto; color: #202A24; font-size: .7rem; line-height: 1; white-space: nowrap; }
.vue-3jours .rdv-3jours-nom { display: grid; height: 100%; min-width: 0; align-items: center; }
.vue-3jours .rdv-3jours-nom strong {
    display: -webkit-box;
    overflow: hidden;
    color: #26322B;
    font-size: .72rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.vue-jour .rdv-agenda-court .rdv-jour-contenu { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.vue-jour .rdv-agenda-court .rdv-jour-contenu strong { font-size: .68rem; }
.vue-jour .rdv-agenda-court .rdv-jour-contenu span { display: none; }
.vue-jour .rdv-agenda-court .rdv-jour-contenu b { margin: 0; font-size: .62rem; }
.vue-3jours .rdv-agenda-court .rdv-3jours-nom strong { font-size: .58rem; -webkit-line-clamp: 1; }
.creneau-agenda .rdv-agenda-court { display: flex; align-items: center; padding-block: 2px; }
.creneau-agenda .rdv-agenda-court .rdv-console-titre,
.creneau-agenda .rdv-agenda-court > small { display: none; }
.creneau-agenda .rdv-agenda-court > a { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.creneau-agenda .rdv-agenda-court .rdv-console-resume { display: flex; width: 100%; align-items: center; gap: 6px; }
.creneau-agenda .rdv-agenda-court .rdv-console-resume strong,
.creneau-agenda .rdv-agenda-court .rdv-console-resume span { font-size: .65rem; }
.creneau-agenda .rdv-agenda-court .rdv-console-resume strong::after { content: "·"; margin-left: 6px; color: #7A847D; }
.creneau-libre { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 8px 11px; border-radius: 11px; color: #858D86; font-size: .76rem; transition: color .18s ease, background .18s ease; }
.creneau-libre:hover { color: #744C11; background: #FAEFD7; }
.creneau-continuation { min-height: 46px; pointer-events: none; }
.rdv-console { border-left: 5px solid var(--couleur-service); }

.notifications-liste { display: grid; gap: 9px; }
.notification-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid rgba(71, 80, 73, .09); border-radius: 17px; background: var(--app-carte); box-shadow: 0 9px 25px rgba(55, 44, 24, .05); transition: transform .18s ease; }
.notification-ligne:hover { transform: translateX(3px); }
.notification-icone { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #315F43; background: #E4F2E8; font-weight: 850; }
.notification-ligne.type-annule .notification-icone { color: #A13B34; background: #F9E3DF; }
.notification-ligne.type-after .notification-icone { color: #744C11; background: #F7E5B8; }
.notification-ligne.type-deplace .notification-icone { color: #475F9B; background: #E6ECF9; }
.notification-ligne p, .notification-ligne small { display: block; margin: 2px 0 0; color: var(--app-doux); }
.notification-ligne time { color: #7B847D; font-size: .7rem; }

.revenus-resume { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.revenus-resume article { padding: 18px; border-radius: 18px; color: var(--app-encre); background: var(--app-carte); box-shadow: 0 10px 28px rgba(55, 44, 24, .06); }
.revenus-resume article:first-child { background: linear-gradient(145deg, var(--app-or-clair), var(--app-or)); }
.revenus-resume span, .revenus-resume strong, .revenus-resume small { display: block; }
.revenus-resume span, .revenus-resume small { color: #667068; }
.revenus-resume article:first-child span, .revenus-resume article:first-child small { color: #4D3A19; }
.revenus-resume strong { margin: 8px 0 3px; color: var(--app-encre); font-size: 1.7rem; letter-spacing: -.04em; }
.revenus-tableau { margin-top: 12px !important; }
.table-defilante { overflow-x: auto; }

.services-console { display: grid; gap: 9px; }
.service-console { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 13px; align-items: center; padding: 15px; border: 1px solid rgba(71, 80, 73, .09); border-radius: 17px; background: var(--app-carte); box-shadow: 0 9px 25px rgba(55, 44, 24, .05); }
.service-console > i { width: 10px; height: 44px; border-radius: 5px; background: var(--couleur-service); }
.service-console-image { width: 54px; height: 54px; border-radius: 13px; object-fit: cover; }
.service-console div strong, .service-console div small { display: block; }
.service-console div small { margin-top: 4px; color: var(--app-doux); }
.app-principale .bouton.secondaire { border: 1px solid var(--app-ligne); color: var(--app-encre); background: #F8F4EC; box-shadow: none; }
.formulaire-app form { display: grid; gap: 12px; }
.horaire-ligne { display: grid; grid-template-columns: 120px minmax(90px, 1fr) 135px 135px auto; gap: 10px; align-items: end; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--app-ligne); }
.horaire-ligne:last-child { border-bottom: 0; }
.horaire-ligne label { margin: 0; }
.horaire-ligne input { margin-top: 4px; }
.horaire-ligne > span { align-self: center; color: var(--app-doux); }
.horaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.pauses-liste { display: grid; gap: 8px; margin-top: 13px; }
.pauses-liste article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 13px; background: #F7F1E6; }
.pauses-liste article small { display: block; margin-top: 3px; color: var(--app-doux); }
.pauses-liste form { margin: 0; }
.reglages-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.reglages-grille > div { margin: 0; }
.reglages-grille > button, .reglage-paiement { grid-column: 1 / -1; }
.reglage-paiement { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 13px; background: #F7F1E6; }

.choix-retard { display: grid; gap: 8px; }
.case-rendez-vous { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; margin: 0; padding: 14px !important; cursor: pointer; }
.case-rendez-vous:has(input:checked) { border-color: #C28D32; background: #FFF4DA; }
.case-rendez-vous input { width: 20px; height: 20px; accent-color: var(--app-vert); }
.actions-retard { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.demandes-actions form { margin: 0; }

/* Interactions tactiles et fiche rapide d'un rendez-vous */
a, button, .carte-service, .rdv-console { -webkit-tap-highlight-color: transparent; }
.app-jojo a:active, .app-jojo button:active, .site-client a:active, .site-client button:active { transform: scale(.98); }
.rdv-console[data-dialog-id] { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.rdv-console[data-dialog-id]:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(55, 44, 24, .1); }
.rdv-console[data-dialog-id]:focus-visible { outline: 3px solid rgba(59, 130, 196, .32); outline-offset: 3px; }
.fiche-rdv { width: min(460px, calc(100% - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 22px; border: 0; border-radius: 23px; color: var(--app-encre); background: #FFFDF8; box-shadow: 0 30px 90px rgba(28, 22, 14, .3); }
.fiche-rdv[open] { animation: dialogue-entree .2s ease-out; }
.fiche-rdv::backdrop { background: rgba(28, 25, 20, .48); backdrop-filter: blur(4px); }
.fiche-rdv-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fiche-rdv-entete h2 { margin: 2px 0 12px; }
.fermer-dialogue { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--app-ligne); border-radius: 50%; color: var(--app-encre); background: #F7F2E9; font-size: 1.4rem; }
.fiche-rdv dl { display: grid; gap: 0; margin: 16px 0; }
.fiche-rdv dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--app-ligne); }
.fiche-rdv dt { color: var(--app-doux); font-size: .75rem; }
.fiche-rdv dd { margin: 0; color: var(--app-encre); font-weight: 750; }
.note-dialogue { padding: 13px; border-radius: 13px; background: #F5EFE4; }
.note-dialogue p { margin: 5px 0 0; color: var(--app-doux); }
.dialogue-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.dialogue-actions .bouton { display: grid; place-items: center; margin: 0; text-align: center; }
@keyframes dialogue-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
    .revenus-resume { grid-template-columns: 1fr 1fr; }
    .horaire-ligne { grid-template-columns: 1fr 1fr; }
    .horaire-ligne > strong, .horaire-ligne > span { align-self: center; }
    .horaire-ligne > button { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .tableau-journee { grid-template-columns: 1fr; }
    .jours-calendrier.vue-3jours { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .vue-3jours .jour-calendrier { padding: 8px; }
    .vue-3jours .jour-calendrier h2 { font-size: .74rem; text-align: center; }
    .vue-3jours .creneau-agenda { grid-template-columns: 28px minmax(0, 1fr); gap: 3px; height: 64px; min-height: 64px; }
    .vue-3jours .creneau-agenda time { display: block; padding: 7px 0 0; font-size: .56rem; }
    .vue-3jours .creneau-agenda .rdv-agenda-etendu { left: 31px; }
    .vue-3jours .rdv-console { padding: 6px; border-left-width: 3px; }
    .vue-3jours .rdv-3jours-nom strong { font-size: .62rem; }
    .vue-3jours .rdv-console-titre { display: block; margin: 0; }
    .vue-3jours .rdv-console-titre strong, .vue-3jours .rdv-console > a { font-size: .65rem; }
    .vue-3jours .rdv-console-titre span, .vue-3jours .rdv-console small, .vue-3jours .actions-console { display: none; }
    .vue-3jours .creneau-libre { min-height: 38px; padding: 5px; font-size: .6rem; }
    .horaire-grille { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .reservation-champs, .reglages-grille { grid-template-columns: 1fr; }
    .reglages-grille > button, .reglage-paiement { grid-column: auto; }
    .lien-after { align-items: flex-start; flex-direction: column; }
    .lien-after span { text-align: left; }
    .resume-cercle { width: 72px; height: 72px; border-width: 6px; }
    .app-statistiques, .revenus-resume { grid-template-columns: 1fr 1fr; }
    .revenus-resume article { padding: 14px; }
    .revenus-resume strong { font-size: 1.42rem; }
    .service-console { grid-template-columns: 54px minmax(0, 1fr) auto; }
    .service-console .bouton { grid-column: 2 / -1; width: 100%; }
    .horaire-ligne { grid-template-columns: 1fr 1fr; }
    .horaire-ligne > strong, .horaire-ligne > span { grid-column: auto; }
    .notification-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .notification-ligne time { grid-column: 2; }
    .reservation-client-v2 { margin-top: 12px; }
    .reservation-client-entete { align-items: flex-start; flex-direction: column; }
    .reservation-client-identite { width: 100%; }
    .reservation-client-progression span { grid-template-columns: 24px minmax(0, 1fr); padding: 7px; }
    .reservation-client-progression b { width: 24px; height: 24px; }
    .reservation-client-etape { padding: 18px 14px; border-radius: 20px; }
    .reservation-client-etape-entete { flex-direction: column; }
    .reservation-client-services > button { grid-template-columns: 52px minmax(0, 1fr) auto 14px; gap: 9px; padding: 8px; }
    .reservation-client-services img, .reservation-client-services i { width: 52px; height: 52px; }
    .reservation-client-services span small { font-size: .7rem; }
    .reservation-client-services > button > b { font-size: .86rem; }
    .reservation-client-after { align-items: flex-start; flex-direction: column; }
    .reservation-client-actions { grid-template-columns: 1fr; }
    .reservation-client-creneaux { grid-template-columns: repeat(3, 1fr); }
    .reservation-client-confirmation dl div { grid-template-columns: .8fr 1.2fr; }
}

/* Réservation client — version claire, mobile d'abord.
   L'en-tête reste noir afin de conserver l'identité JC noire et or. */
body.reservation-client-claire {
    --jojo-jaune: #E1A62A;
    --jojo-jaune-survol: #F0B943;
    min-height: 100vh;
    color: #1C241F;
    background: #F6F2EA;
}
body.reservation-client-claire::before {
    top: -240px;
    width: 760px;
    height: 560px;
    background: radial-gradient(ellipse at center, rgba(203, 157, 67, .16), transparent 68%);
}
.reservation-client-claire .entete {
    border-bottom-color: #292929;
    background: #000000;
}
.reservation-client-claire .entete nav a,
.reservation-client-claire .entete nav .lien { color: #D8D4CA; }
.reservation-client-claire .entete nav a:hover,
.reservation-client-claire .entete nav .lien:hover { color: #F0CD78; }
.reservation-client-claire .entete nav a.bouton,
.reservation-client-claire .entete nav a.bouton:hover,
.reservation-client-claire .reservation-client-actions button:not(.fantome),
.reservation-client-claire .reservation-client-confirmation button,
.reservation-client-claire .after-client-v2 .formulaire button[type="submit"] {
    border: 1px solid var(--jojo-jaune);
    color: #120E05;
    background: var(--jojo-jaune);
    box-shadow: 0 6px 20px rgba(225, 166, 42, .26);
}
.reservation-client-claire .entete nav a.bouton,
.portail-entete nav a.bouton {
    color: #000000 !important;
    font-weight: 900;
    text-shadow: none;
    opacity: 1;
}
.reservation-client-claire .reservation-client-actions button:not(.fantome):hover,
.reservation-client-claire .reservation-client-confirmation button:hover,
.reservation-client-claire .after-client-v2 .formulaire button[type="submit"]:hover {
    border-color: var(--jojo-jaune-survol);
    background: var(--jojo-jaune-survol);
    box-shadow: 0 9px 25px rgba(225, 166, 42, .34);
}
.reservation-client-claire .contenu { padding-top: 1px; }
.reservation-client-claire .reservation-client-v2 { color: #1C241F; }
.reservation-client-claire .reservation-client-entete h1,
.reservation-client-claire .reservation-client-etape-entete h2 { color: #151B17; }
.reservation-client-claire .reservation-client-entete p,
.reservation-client-claire .reservation-client-etape-entete p { color: #4F5751; }
.reservation-client-claire .surtitre {
    border-color: #DDC894;
    color: #71501D;
    background: #F3E5BE;
}
.reservation-client-claire .reservation-client-identite {
    border-color: #DDD5C7;
    background: rgba(255, 253, 248, .92);
    box-shadow: 0 10px 28px rgba(63, 48, 23, .07);
}
.reservation-client-claire .reservation-client-identite small { color: #555D57; }
.reservation-client-claire .reservation-client-identite strong { color: #202822; }
.reservation-client-claire .reservation-client-progression span {
    border-color: #DED8CE;
    color: #81857F;
    background: #EEE9E0;
}
.reservation-client-claire .reservation-client-progression b {
    color: #747A74;
    background: #DDD8CF;
}
.reservation-client-claire .reservation-client-progression span.actif {
    border-color: var(--jojo-jaune);
    color: #664713;
    background: #F5E7BD;
}
.reservation-client-claire .reservation-client-progression span.actif b {
    color: #120E05;
    background: var(--jojo-jaune);
}
.reservation-client-claire .reservation-client-etape {
    border-color: #DDD6C9;
    background: #FFFDF8;
    box-shadow: 0 24px 65px rgba(70, 52, 22, .10);
}
.reservation-client-claire .reservation-client-services > button {
    border-color: #E1DBD0;
    color: #1E2721;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(47, 39, 26, .04);
}
.reservation-client-claire .reservation-client-services > button:hover {
    border-color: #C59A42;
    background: #FFF9EA;
    box-shadow: 0 8px 22px rgba(111, 79, 23, .09);
}
.reservation-client-claire .reservation-client-services img,
.reservation-client-claire .reservation-client-services i { border-color: #D8CDBA; }
.reservation-client-claire .reservation-client-services span small { color: #525A54; }
.reservation-client-claire .reservation-client-services > button > b { color: #78581F; }
.reservation-client-claire .reservation-client-services em { color: #A27625; }
.reservation-client-claire .reservation-client-after {
    border-color: #D8B668;
    background: #FBF2D9;
}
.reservation-client-claire .reservation-client-after span small { color: #554D3F; }
.reservation-client-claire .reservation-client-after span strong,
.reservation-client-claire .reservation-client-after > b { color: #6F4C13; }
.reservation-client-claire .reservation-client-selection {
    border-color: #D9C492;
    background: #FBF3DC;
}
.reservation-client-claire .reservation-client-selection div small,
.reservation-client-claire .reservation-client-selection div span { color: #504A40; }
.reservation-client-claire .reservation-client-selection div strong { color: #1E2721; }
.reservation-client-claire .reservation-client-selection > b { color: #805D1D; }
.reservation-client-claire .reservation-client-date { color: #29322C; }
.reservation-client-claire .reservation-client-date small { color: #535B55; }
.reservation-client-claire .reservation-client-date input,
.reservation-client-claire input[type="text"],
.reservation-client-claire input[type="email"],
.reservation-client-claire input[type="tel"],
.reservation-client-claire textarea,
.reservation-client-claire select {
    border-color: #DCD5C9;
    color: #202822;
    background: #FFFFFF;
}
.reservation-client-claire .reservation-client-calendrier {
    border-color: #DBD3C6;
    background: #FAF8F3;
    box-shadow: inset 0 1px 0 #FFFFFF;
}
.reservation-client-claire .reservation-client-calendrier-nav strong { color: #202822; }
.reservation-client-claire .reservation-client-calendrier-nav button {
    border-color: #DDD5C8;
    color: #58472A;
    background: #FFFFFF;
}
.reservation-client-claire .reservation-client-calendrier-nav button:hover:not(:disabled) {
    border-color: #C39A45;
    color: #6E4C12;
    background: #FFF5D8;
}
.reservation-client-claire .reservation-client-calendrier-semaine span { color: #515A53; }
.reservation-client-claire .reservation-client-calendrier-jours button {
    border-color: #ECE6DC;
    color: #29312C;
    background: #FFFFFF;
}
.reservation-client-claire .reservation-client-calendrier-jours button:hover:not(:disabled) {
    border-color: #C59A42;
    color: #684711;
    background: #FFF7E2;
}
.reservation-client-claire .reservation-client-calendrier-jours button.aujourdhui {
    border-color: #A78547;
    box-shadow: inset 0 0 0 1px #A78547;
}
.reservation-client-claire .reservation-client-calendrier-jours button.selectionne {
    border-color: var(--jojo-jaune);
    color: #211707;
    background: var(--jojo-jaune);
    box-shadow: 0 5px 14px rgba(157, 105, 20, .18);
}
.reservation-client-claire .reservation-client-calendrier-jours button:disabled {
    color: #B5B4AE;
    background: #F1EEE8;
    opacity: .72;
}
.reservation-client-claire .reservation-client-calendrier > small { color: #525A54; }
.reservation-client-claire .reservation-client-actions .fantome {
    border-color: #CFC6B7;
    color: #52462F;
    background: #FFFFFF;
}
.reservation-client-claire .reservation-client-etape-entete .fantome {
    border-color: #CFC6B7;
    color: #594A2E;
    background: #FFFFFF;
}
.reservation-client-claire .reservation-client-actions .fantome:hover {
    border-color: #B38B3E;
    color: #6A4913;
    background: #FFF7E3;
}
.reservation-client-claire .reservation-client-etape-entete .fantome:hover {
    border-color: #B38B3E;
    color: #6A4913;
    background: #FFF7E3;
}
.reservation-client-claire .reservation-client-creneaux button {
    border-color: #DDD6CA;
    color: #242D27;
    background: #FFFFFF;
}
.reservation-client-claire .reservation-client-creneaux button:hover,
.reservation-client-claire .reservation-client-creneaux button.selectionne {
    border-color: var(--jojo-jaune);
    color: #201606;
    background: var(--jojo-jaune);
}
.reservation-client-claire .reservation-client-creneaux-etat { color: #505852; }
.reservation-client-claire .reservation-client-after-raccourci {
    border-color: #D6C69F;
    color: #6F675A;
    background: #FBF4E2;
}
.reservation-client-claire .reservation-client-after-raccourci strong { color: #704C10; }
.reservation-client-claire .reservation-client-confirmation {
    border-color: #D8C492;
    background: #FBF3DD;
}
.reservation-client-claire .reservation-client-confirmation dl div { border-bottom-color: rgba(108, 79, 27, .14); }
.reservation-client-claire .reservation-client-confirmation dt { color: #706A5F; }
.reservation-client-claire .reservation-client-confirmation dd { color: #202822; }
.reservation-client-claire .reservation-client-sans-paiement { color: #514C43; }
.reservation-client-claire .pied-page {
    border-top-color: #DAD2C5;
    color: #565D57;
}
.reservation-client-claire .pied-page a:hover { color: #7A5719; }

/* Demande After Hours — continuité exacte du parcours de réservation clair. */
.reservation-client-claire .after-client-v2 {
    width: min(680px, 100%);
    margin-top: 30px;
    padding: clamp(22px, 5vw, 36px);
    border-color: #DDD6C9;
    color: #1C241F;
    background: #FFFDF8;
    box-shadow: 0 24px 65px rgba(70, 52, 22, .10);
}
.reservation-client-claire .after-client-v2 h1 {
    max-width: 560px;
    color: #151B17;
    font-size: clamp(2rem, 7vw, 3.2rem);
}
.reservation-client-claire .after-client-v2 > p { color: #4B534D; }
.reservation-client-claire .after-client-v2 .after-prix {
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    padding: 20px;
    border-color: #D4AE59;
    color: #251A09;
    background: linear-gradient(135deg, #F4D992, #D6A746);
    box-shadow: 0 12px 28px rgba(164, 111, 20, .16);
}
.reservation-client-claire .after-client-v2 .after-prix::after {
    content: "JC";
    position: absolute;
    right: 18px;
    top: 50%;
    color: rgba(47, 31, 7, .10);
    font-size: 3.8rem;
    font-weight: 950;
    line-height: 1;
    transform: translateY(-50%);
}
.reservation-client-claire .after-client-v2 .after-prix span,
.reservation-client-claire .after-client-v2 .after-prix small { color: #493712; }
.reservation-client-claire .after-client-v2 .after-prix strong { color: #221706; }
.reservation-client-claire .after-client-v2 .after-horaire {
    margin: 18px 0;
    padding: 16px;
    border-color: #DED4C1;
    background: #FAF7F0;
}
.reservation-client-claire .after-client-v2 .after-horaire > strong { color: #202822; }
.reservation-client-claire .after-client-v2 .after-horaire span {
    border-color: #DDCDA8;
    color: #604718;
    background: #FFF7E1;
}
.reservation-client-claire .after-client-v2 .info-reservation {
    padding: 14px 15px;
    border-left-color: #C99A3B;
    border-radius: 0 13px 13px 0;
    color: #494238;
    background: #F8F0DD;
}
.reservation-client-claire .after-client-v2 .formulaire {
    display: grid;
    gap: 14px;
    margin: 22px 0 14px;
}
.reservation-client-claire .after-client-v2 .formulaire > div {
    display: grid;
    gap: 7px;
    margin: 0;
}
.reservation-client-claire .after-client-v2 fieldset {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 18px;
    border-color: #D8D0C3;
    border-radius: 16px;
    background: #FAF8F3;
}
.reservation-client-claire .after-client-v2 fieldset legend {
    padding: 0 7px;
    color: #574B35;
    font-weight: 800;
}
.reservation-client-claire .after-client-v2 label {
    margin: 0;
    color: #343D36;
    font-weight: 750;
}
.reservation-client-claire .after-client-v2 input,
.reservation-client-claire .after-client-v2 select,
.reservation-client-claire .after-client-v2 textarea {
    min-height: 52px;
    border-color: #DCD5C9;
    border-radius: 13px;
    color: #202822;
    background: #FFFFFF;
}
.reservation-client-claire .after-client-v2 input:focus,
.reservation-client-claire .after-client-v2 select:focus,
.reservation-client-claire .after-client-v2 textarea:focus {
    border-color: #B8872E;
    box-shadow: 0 0 0 3px rgba(184, 135, 46, .14);
}
.reservation-client-claire .after-client-v2 .formulaire button {
    width: 100%;
    min-height: 55px;
    margin-top: 4px;
}
.reservation-client-claire .after-client-v2 .errorlist,
.reservation-client-claire .after-client-v2 .erreurlist { color: #A02E27; }
.reservation-client-claire .after-client-v2 a.after-retour-regulier {
    display: block;
    padding: 10px;
    color: #6D6048;
    font-weight: 750;
    text-align: center;
}
.reservation-client-claire .after-client-v2 a.after-retour-regulier:hover { color: #765217; }

/* After Hours — parcours en trois étapes identique à la réservation normale. */
.after-wizard-v3 .after-wizard-prix {
    display: grid;
    min-width: 126px;
    padding: 13px 16px;
    border: 1px solid #D69E25;
    border-radius: 17px;
    color: #100C04;
    background: #E1A62A;
    box-shadow: 0 10px 25px rgba(225, 166, 42, .22);
}
.after-wizard-v3 .after-wizard-prix small,
.after-wizard-v3 .after-wizard-prix strong { display: block; }
.after-wizard-v3 .after-wizard-prix small { color: #493407; font-size: .7rem; font-weight: 800; }
.after-wizard-v3 .after-wizard-prix strong { margin-top: 2px; color: #000000; font-size: 1.4rem; }
.after-wizard-v3 .after-wizard-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid #E1A62A;
    border-radius: 0 12px 12px 0;
    color: #4B504B;
    background: #F8F0DC;
    font-size: .82rem;
}
.after-wizard-v3 .after-wizard-fenetres-resume {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.after-wizard-v3 .after-wizard-fenetres-resume span {
    padding: 7px 10px;
    border: 1px solid #D9C798;
    border-radius: 999px;
    color: #584315;
    background: #FFF6DB;
    font-size: .72rem;
    font-weight: 750;
}
.reservation-client-claire .after-wizard-v3 a.after-retour-regulier {
    display: block;
    margin-top: 12px;
    padding: 11px;
    color: #514A3E;
    font-weight: 800;
    text-align: center;
}
.reservation-client-claire .after-wizard-v3 a.after-retour-regulier:hover { color: #6C4A0E; }
.after-wizard-v3 .after-wizard-erreurs {
    margin: 0 0 12px;
    color: #711E1A;
    background: #FFF3F1;
}
.after-wizard-v3 .after-wizard-erreurs strong { display: block; margin-bottom: 5px; }

@media (max-width: 560px) {
    .reservation-client-claire .contenu { width: calc(100% - 24px); }
    .reservation-client-claire .reservation-client-entete h1 { font-size: 2.15rem; }
    .reservation-client-claire .reservation-client-etape { padding: 18px 12px; }
    .reservation-client-claire .reservation-client-calendrier { padding: 11px 9px; }
    .reservation-client-claire .reservation-client-calendrier-semaine,
    .reservation-client-claire .reservation-client-calendrier-jours { gap: 4px; }
    .reservation-client-claire .after-client-v2 { margin-top: 12px; padding: 22px 15px; }
    .reservation-client-claire .after-client-v2 h1 { font-size: 2.15rem; }
    .after-wizard-v3 .reservation-client-entete { gap: 14px; }
    .after-wizard-v3 .after-wizard-prix { width: 100%; grid-template-columns: 1fr auto; align-items: center; }
    .after-wizard-v3 .after-wizard-prix strong { margin: 0; }
}

/* ==========================================================================
   Version approuvée — transfert fidèle des deux écrans d’accueil
   ========================================================================== */

/* Portail client : structure noire et or du prototype approuvé. */
.accueil-client-v3 {
    background: #080A09;
}
.accueil-client-v3::before { display: none; }
.accueil-client-v3 .contenu {
    width: 100%;
    max-width: none;
    margin: 0;
}
.portail-entete {
    padding: 15px 5%;
    border-color: #252925;
    background: rgba(8, 10, 9, .95);
}
.portail-marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #F7F7F5;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.045em;
}
.portail-marque img { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.portail-marque span::after { content: "."; color: #E1A62A; }
.portail-entete nav a { color: #DEDBD4; }
.portail-entete nav a.actif { color: #EFC96F; }
.portail-entete nav a.bouton,
.portail-entete nav a.bouton:hover {
    min-height: 46px;
    padding: 11px 18px;
    color: #17120A;
    background: #E1A62A;
    box-shadow: 0 6px 20px rgba(225, 166, 42, .27);
}
.portail-hero-v3 {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    min-height: 510px;
    margin: 0;
    background: #080A09;
}
.portail-hero-copie {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 8%;
    background: radial-gradient(circle at 12% 16%, #2A2211 0, #090A09 48%);
}
.portail-surtitre {
    margin: 0;
    color: #E2BA68;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.portail-hero-copie h1 {
    max-width: 600px;
    margin: 14px 0;
    color: #F8F6F0;
    font-size: clamp(2.75rem, 7vw, 4.75rem);
    line-height: .98;
    letter-spacing: -.06em;
}
.portail-hero-copie h1 span { color: #EFC96F; }
.portail-hero-copie > p:last-child {
    max-width: 520px;
    margin: 0;
    color: #D0CBC1;
    font-size: 1.08rem;
}
.portail-hero-visuel {
    position: relative;
    display: grid;
    min-height: 420px;
    overflow: hidden;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(4, 5, 4, .2), rgba(4, 5, 4, .58)),
        url("hero-banner-preview.eb0b276939d4.webp") center 52% / cover no-repeat;
}
.portail-hero-visuel::before {
    position: absolute;
    inset: 0;
    content: "";
    background: radial-gradient(circle at 50% 46%, rgba(5, 5, 5, .12), rgba(5, 5, 5, .7) 76%);
}
.portail-hero-visuel > img {
    position: relative;
    z-index: 1;
    display: block;
    width: min(230px, 58%);
    aspect-ratio: 1;
    border-radius: 22%;
    box-shadow: 0 0 0 16px rgba(225, 166, 42, .07), 0 30px 70px rgba(0, 0, 0, .62);
}
.portail-hero-visuel small {
    position: absolute;
    z-index: 1;
    bottom: 28px;
    color: #CBC5BA;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.portail-actions-v3 {
    gap: 11px;
    margin: 0;
    padding: 17px 5%;
    border-block: 1px solid #242824;
    background: #0C0F0D;
}
.portail-actions-v3 a,
.portail-actions-v3 a:first-child {
    display: block;
    min-height: 74px;
    padding: 13px;
    border: 1px solid #323832;
    border-radius: 12px;
    color: #F7F4ED;
    background: #151915;
    box-shadow: none;
    text-align: left;
}
.portail-actions-v3 a.principal {
    border-color: #E1A62A;
    color: #120E05;
    background: #E1A62A;
}
.portail-actions-v3 a.principal strong { color: #120E05; }
.portail-actions-v3 a.principal small { color: #4C360A; }
.portail-actions-v3 a:hover {
    transform: translateY(-2px);
    border-color: #8D692B;
    background: #211A0F;
}
.portail-actions-v3 a.principal:hover {
    border-color: #F0B943;
    background: #F0B943;
}
.portail-actions-v3 strong,
.portail-actions-v3 small { display: block; }
.portail-actions-v3 strong { color: #F7F4ED; font-size: .94rem; }
.portail-actions-v3 small { margin-top: 4px; color: #B8BBB5; font-size: .75rem; }
.accueil-client-v3 #services.services-approuves {
    margin: 0;
    padding: 32px 5% 42px;
    background: #0A0C0B;
}
.services-entete-v3 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}
.services-entete-v3 h2 {
    margin-top: 4px;
    color: #F7F4ED;
    font-size: 1.85rem;
}
.services-entete-v3 > span { color: #B7B8B1; font-size: .82rem; }
.services-grille-v3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.service-v3 {
    overflow: hidden;
    border: 1px solid #2D332E;
    border-radius: 16px;
    color: #F7F4ED;
    background: #151915;
    transition: transform .18s ease, border-color .18s ease;
}
.service-v3:hover { transform: translateY(-3px); border-color: #8D692B; }
.service-v3-visuel { height: 174px; overflow: hidden; background: #101310; }
.service-v3-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-v3:hover .service-v3-visuel img { transform: scale(1.035); }
.service-v3-visuel > span { display: grid; height: 100%; place-items: center; color: #17120A; background: #D6A849; font-size: 2rem; font-weight: 900; }
.service-v3-copie { padding: 18px; }
.service-v3 h3 { color: #F7F4ED; }
.service-v3 p { margin: 7px 0 20px; color: #B8BBB5; }
.service-v3-copie > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-v3 strong { color: #EFC96F; font-size: 1.12rem; }
.service-v3 a {
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid #E1A62A;
    border-radius: 11px;
    color: #120E05;
    background: #E1A62A;
    font-size: .82rem;
    font-weight: 750;
}
.service-v3 a:hover { border-color: #F0B943; background: #F0B943; }
.accueil-client-v3 .banniere,
.accueil-client-v3 #avis,
.accueil-client-v3 #horaires,
.accueil-client-v3 #contact {
    width: min(var(--largeur), calc(100% - 32px));
    margin-inline: auto;
}
.accueil-client-v3 #contact .bouton:not(.fantome),
.accueil-client-v3 #contact .bouton:not(.fantome):hover {
    border: 1px solid #E1A62A;
    color: #000000;
    background: #E1A62A;
    font-weight: 900;
    text-shadow: none;
    box-shadow: 0 7px 22px rgba(225, 166, 42, .27);
}
.accueil-client-v3 #contact .bouton:not(.fantome):hover {
    border-color: #F0B943;
    background: #F0B943;
}

/* Mes rendez-vous — même identité noire, blanche et jaune que l'accueil. */
.rdv-client-v3 { color: #F7F4ED; background: #080A09; }
.rdv-client-v3::before { display: none; }
.rdv-client-v3 .contenu {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 72px);
    margin: 0;
    background: radial-gradient(circle at 88% 0, rgba(225, 166, 42, .09), transparent 28%), #080A09;
}
.rdv-client-page {
    width: min(920px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 72px;
}
.rdv-client-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 28px;
}
.rdv-client-entete h1 { margin: 6px 0 8px; color: #FFFFFF; font-size: clamp(2.3rem, 7vw, 4rem); }
.rdv-client-entete p:not(.portail-surtitre) { margin: 0; color: #B8BBB5; }
.rdv-client-nouveau {
    display: inline-flex;
    min-height: 50px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    border: 1px solid #E1A62A;
    border-radius: 14px;
    color: #000000;
    background: #E1A62A;
    box-shadow: 0 8px 24px rgba(225, 166, 42, .22);
    font-weight: 900;
}
.rdv-client-nouveau:hover { border-color: #F0B943; background: #F0B943; transform: translateY(-2px); }
.rdv-client-nouveau span { font-size: 1.15rem; }
.rdv-client-frais {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin: 0 0 16px;
    padding: 15px;
    border: 1px solid #7F5820;
    border-radius: 17px;
    color: #F9E7BF;
    background: #21170B;
}
.rdv-client-frais-icone { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #130D03; background: #E1A62A; font-weight: 950; }
.rdv-client-frais p { margin: 2px 0 0; color: #C9BFAE; font-size: .8rem; }
.rdv-client-frais form { margin: 0; }
.rdv-client-frais button { min-height: 42px; padding: 9px 15px; border-radius: 12px; color: #000; background: #E1A62A; }
.rdv-client-section { margin-top: 20px; }
.rdv-client-section-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.rdv-client-section-entete > div { display: flex; align-items: center; gap: 9px; }
.rdv-client-section-entete h2 { color: #FFFFFF; font-size: 1.3rem; }
.rdv-client-section-entete > small { color: #939A94; }
.rdv-client-section-icone { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #3A3F3B; border-radius: 10px; color: #E1A62A; background: #151915; }
.rdv-client-liste { display: grid; gap: 11px; }
.rdv-client-carte {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 15px;
    padding: 16px;
    border: 1px solid #2D332E;
    border-radius: 20px;
    background: #121612;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .20);
    transition: border-color .18s ease, transform .18s ease;
}
.rdv-client-carte:hover { border-color: #6E5728; transform: translateY(-2px); }
.rdv-client-carte.after { border-color: #6A5120; background: linear-gradient(145deg, #18170F, #111411); }
.rdv-client-date {
    display: grid;
    height: 86px;
    align-content: center;
    place-items: center;
    border: 1px solid #343A35;
    border-radius: 16px;
    color: #FFFFFF;
    background: #1C211D;
    line-height: 1;
}
.rdv-client-carte.after .rdv-client-date { border-color: #8C6926; background: #211A0D; }
.rdv-client-date small { color: #A6ADA7; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.rdv-client-date strong { margin: 6px 0 4px; color: #E1A62A; font-size: 1.85rem; }
.rdv-client-date span { color: #D7D8D3; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.rdv-client-copie { min-width: 0; }
.rdv-client-titre { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rdv-client-titre small { color: #A8AEA9; font-size: .76rem; }
.rdv-client-titre h3 { margin-top: 3px; color: #FFFFFF; font-size: 1.2rem; }
.rdv-client-statut { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 5px 9px; border-radius: 999px; color: #D8DAD6; background: #2A2F2B; font-size: .68rem; font-weight: 850; }
.rdv-client-statut.confirme { color: #AEE6BB; background: #173421; }
.rdv-client-statut.attente { color: #F4D383; background: #3A2B0D; }
.rdv-client-statut.annule { color: #E8A7A4; background: #3A1D1B; }
.rdv-client-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #292E2A; }
.rdv-client-meta > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #E1A62A; background: #050605; font-size: .68rem; font-weight: 900; }
.rdv-client-meta p { margin: 0; color: #AEB3AE; font-size: .8rem; }
.rdv-client-meta p strong { color: #F5F4EF; }
.rdv-client-meta > b { color: #E1A62A; }
.rdv-client-after-label { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 11px; border: 1px solid #654D1E; border-radius: 12px; color: #E1A62A; background: #211A0E; font-size: .75rem; }
.rdv-client-after-label small { margin-left: auto; color: #BCAE90; }
.rdv-client-attente { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid #E1A62A; color: #C8C3B8; background: #1D1A12; font-size: .78rem; }
.rdv-client-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.rdv-client-actions form { margin: 0; }
.rdv-client-actions a,
.rdv-client-actions button {
    min-height: 38px;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid #4C514D;
    border-radius: 11px;
    color: #F3F1EB;
    background: #1B201C;
    box-shadow: none;
    font-size: .76rem;
    font-weight: 800;
}
.rdv-client-actions a:hover { border-color: #E1A62A; color: #E1A62A; background: #211A0F; }
.rdv-client-actions button,
.rdv-client-actions button:hover { border-color: #6A3330; color: #F0AAA7; background: #251413; box-shadow: none; transform: none; }
.rdv-client-contre-offre { margin-top: 11px; padding: 13px; border: 1px solid #8A6725; border-radius: 14px; background: #211A0E; }
.rdv-client-contre-offre header { display: flex; justify-content: space-between; gap: 8px; color: #E1A62A; font-size: .75rem; font-weight: 850; }
.rdv-client-contre-offre header small { color: #BEB4A1; font-weight: 500; }
.rdv-client-contre-offre > strong { display: block; margin-top: 7px; color: #FFFFFF; }
.rdv-client-contre-offre > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.rdv-client-contre-offre form { margin: 0; }
.rdv-client-contre-offre button { width: 100%; min-height: 42px; border-radius: 11px; color: #000; background: #E1A62A; }
.rdv-client-contre-offre button.rdv-client-refuser { border: 1px solid #6A3330; color: #F0AAA7; background: #251413; box-shadow: none; }
.rdv-client-vide { padding: 38px 20px; border: 1px dashed #3A403B; border-radius: 20px; text-align: center; background: #101310; }
.rdv-client-vide > span { display: grid; width: 56px; height: 56px; margin: 0 auto 13px; place-items: center; border-radius: 16px; color: #E1A62A; background: #050605; font-weight: 950; }
.rdv-client-vide h3 { color: #FFFFFF; }
.rdv-client-vide p { margin: 6px 0 16px; color: #A7ADA7; }
.rdv-client-vide a { display: inline-flex; padding: 10px 15px; border-radius: 11px; color: #000; background: #E1A62A; font-weight: 900; }
.rdv-client-historique { margin-top: 34px; }
.rdv-client-historique-liste { overflow: hidden; border: 1px solid #292E2A; border-radius: 18px; background: #101310; }
.rdv-client-historique-liste article { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #292E2A; }
.rdv-client-historique-liste article:last-child { border-bottom: 0; }
.rdv-client-historique-date { display: grid; line-height: 1.05; }
.rdv-client-historique-date strong { color: #E1A62A; font-size: 1.25rem; }
.rdv-client-historique-date small,
.rdv-client-historique-liste article > div small { margin-top: 3px; color: #909791; font-size: .7rem; }
.rdv-client-historique-liste article > div { display: grid; min-width: 0; }
.rdv-client-historique-liste article > div strong { overflow: hidden; color: #F5F3ED; text-overflow: ellipsis; white-space: nowrap; }
.rdv-client-historique-vide { margin: 0; padding: 22px; color: #969D97; text-align: center; }
.rdv-client-v3 .pied-page { border-top-color: #252A26; color: #777E78; }

@media (max-width: 620px) {
    .rdv-client-page { width: calc(100% - 24px); padding-top: 26px; }
    .rdv-client-entete { align-items: stretch; flex-direction: column; }
    .rdv-client-entete h1 { font-size: 2.45rem; }
    .rdv-client-nouveau { justify-content: center; width: 100%; }
    .rdv-client-frais { grid-template-columns: auto minmax(0, 1fr); }
    .rdv-client-frais form { grid-column: 1 / -1; }
    .rdv-client-frais button { width: 100%; }
    .rdv-client-carte { grid-template-columns: 62px minmax(0, 1fr); gap: 11px; padding: 12px; border-radius: 17px; }
    .rdv-client-date { width: 62px; height: 76px; }
    .rdv-client-date strong { font-size: 1.55rem; }
    .rdv-client-titre { gap: 8px; }
    .rdv-client-titre h3 { font-size: 1.03rem; }
    .rdv-client-after-label { align-items: flex-start; flex-wrap: wrap; }
    .rdv-client-after-label small { width: 100%; margin-left: 0; }
    .rdv-client-actions { justify-content: stretch; }
    .rdv-client-actions a,
    .rdv-client-actions form,
    .rdv-client-actions button { flex: 1; width: 100%; text-align: center; }
    .rdv-client-contre-offre header { flex-direction: column; }
    .rdv-client-historique-liste article { grid-template-columns: 58px minmax(0, 1fr); }
    .rdv-client-historique-liste article > .rdv-client-statut { grid-column: 2; justify-self: start; }
}

/* App Jojo : même coquille et même navigation que le prototype approuvé. */
.app-jojo-v3 .contenu { min-height: 100vh; }
.app-coque-v3 {
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}
.app-lateral-v3 {
    display: flex;
    flex-direction: column;
    padding: 24px 14px;
    border-color: rgba(65, 77, 68, .1);
    background: rgba(255, 253, 248, .72);
}
.app-identite-v3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 6px 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(65, 77, 68, .1);
}
.app-identite-v3 > span:last-child { display: grid; line-height: 1.15; }
.app-identite-v3 strong { color: var(--app-encre); }
.app-identite-v3 small { color: var(--app-doux); font-size: .72rem; }
.app-lateral-v3 .console-nav { gap: 7px; }
.app-lateral-v3 .console-nav a { min-height: 47px; border-radius: 13px; }
.app-sortie { margin: auto 0 0; padding-top: 20px; }
.app-sortie button {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--app-ligne);
    border-radius: 12px;
    color: var(--app-doux);
    background: #FFFDF8;
    box-shadow: none;
}
.app-jojo-v3 .app-principale {
    padding: 30px clamp(18px, 3vw, 46px) 60px;
    background: radial-gradient(circle at 94% 0, rgba(211, 165, 74, .2), transparent 27%), linear-gradient(180deg, #F8F4EB 0, #EFE9DD 100%);
}
.app-page-entete h1 { letter-spacing: -.045em; }
.app-jojo-v3 .panneau { border: 0; border-radius: 20px; }
.app-jojo-v3 .resume-journee { border-radius: 24px; }
.app-jojo-v3 .actions-rapides > div:last-child { gap: 10px; }
.app-jojo-v3 .actions-rapides a { min-height: 82px; border: 0; border-radius: 16px; background: #FFFDF8; box-shadow: 0 9px 25px rgba(55, 44, 24, .065); }
.app-plus-mobile { position: relative; display: grid; }
.app-plus-mobile summary {
    display: grid;
    height: 100%;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-radius: 12px;
    color: #707970;
    cursor: pointer;
    list-style: none;
}
.app-plus-mobile summary::-webkit-details-marker { display: none; }
.app-plus-mobile summary span { font-size: 1.15rem; line-height: 1; }
.app-plus-mobile summary small { font-size: .61rem; }
.app-plus-feuille { display: none; }

@media (max-width: 820px) {
    .app-coque-v3 { display: block; min-height: 100vh; }
    .app-lateral-v3 { display: none; }
    .app-jojo-v3 .app-principale { padding: 22px 14px 108px; }
    .app-identite-mobile {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 18px;
        color: var(--app-encre);
    }
    .app-identite-mobile img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        box-shadow: 0 7px 18px rgba(5, 5, 5, .15);
    }
    .app-identite-mobile span { display: grid; line-height: 1.05; }
    .app-identite-mobile strong { font-size: .84rem; }
    .app-identite-mobile small { margin-top: 3px; color: var(--app-doux); font-size: .64rem; }
    .app-jojo-v3 .app-page-entete { margin-bottom: 18px; }
    .app-jojo-v3 .app-page-entete h1 { font-size: 1.8rem; }
    .app-jojo-v3 .app-navigation-mobile {
        grid-template-columns: repeat(5, 1fr);
        min-height: 80px;
        border-top: 1px solid rgba(65, 77, 68, .12);
        background: rgba(255, 253, 248, .96);
    }
    .app-plus-mobile[open] summary { color: #7B5114; background: #F7ECD4; }
    .app-plus-mobile[open]::before {
        content: "";
        position: fixed;
        inset: 0 0 80px;
        z-index: -1;
        background: rgba(28, 25, 20, .4);
        backdrop-filter: blur(3px);
    }
    .app-plus-mobile[open] .app-plus-feuille {
        position: fixed;
        right: 8px;
        bottom: 90px;
        left: 8px;
        z-index: 75;
        display: grid;
        max-height: calc(100dvh - 105px);
        overflow: auto;
        padding: 18px;
        border: 1px solid rgba(65, 77, 68, .1);
        border-radius: 22px;
        background: #FFFDF8;
        box-shadow: 0 24px 70px rgba(55, 44, 24, .24);
        animation: app-plus-entree .18s ease-out;
    }
    .app-plus-feuille > strong { margin-bottom: 9px; color: var(--app-encre); font-size: 1.2rem; }
    .app-plus-feuille a { display: flex !important; justify-content: space-between; min-height: 47px; padding: 12px 5px; border-bottom: 1px solid var(--app-ligne); border-radius: 0 !important; color: var(--app-encre) !important; }
}

@media (max-width: 720px) {
    .portail-entete { padding: 14px; }
    .portail-entete nav a:not(.bouton) { display: none; }
    .portail-hero-v3 { grid-template-columns: 1fr; min-height: 0; }
    .portail-hero-copie { order: 2; padding: 31px 20px 35px; }
    .portail-hero-copie h1 { font-size: 2.62rem; }
    .portail-hero-copie > p:last-child { font-size: 1rem; }
    .portail-hero-visuel { min-height: 410px; background-position: center 52%; }
    .portail-hero-visuel > img { width: 158px; }
    .portail-actions-v3 { grid-template-columns: 1fr 1fr; gap: 9px; padding: 13px; }
    .portail-actions-v3 a,
    .portail-actions-v3 a:first-child { min-height: 78px; padding: 11px; border-radius: 15px; }
    .portail-actions-v3 a.principal { grid-column: 1 / -1; }
    .accueil-client-v3 #services.services-approuves { padding: 26px 13px 34px; }
    .services-grille-v3 { grid-template-columns: 1fr; }
    .service-v3 { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
    .service-v3-visuel { height: 100%; min-height: 148px; }
    .service-v3-copie { padding: 16px; }
    .services-entete-v3 { align-items: flex-start; }
    .services-entete-v3 > span { max-width: 105px; text-align: right; }
}

@media (max-width: 390px) {
    .portail-hero-copie h1 { font-size: 2.3rem; }
    .app-jojo-v3 .resume-journee { padding: 18px; }
    .app-jojo-v3 .resume-journee > div > strong { font-size: 1.85rem; }
}

@keyframes app-plus-entree {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes navigation-rapide {
    0% { width: 8%; }
    55% { width: 72%; }
    100% { width: 94%; }
}

/* ==========================================================================
   App Jojo — écrans quotidiens finalisés
   ========================================================================== */

.clients-entete { margin-bottom: 18px; }
.bouton-ajouter-client { min-height: 52px; border-radius: 16px !important; }
.bouton-ajouter-client span { font-size: 1.15rem; }
.client-recherche-wrap { position: relative; margin-bottom: 13px; }
.client-recherche-wrap > span {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 1;
    transform: translateY(-50%);
    color: #89938B;
    font-size: 1.1rem;
}
.app-principale .client-recherche-v3 {
    width: 100%;
    min-height: 56px;
    padding: 13px 16px 13px 46px;
    border: 1px solid rgba(65, 77, 68, .12);
    border-radius: 17px;
    color: var(--app-encre);
    background: #FFFDF8;
    box-shadow: 0 8px 25px rgba(55, 44, 24, .055);
}
.client-filtres-v3 { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.app-principale .client-filtres-v3 button {
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    color: #5F675F;
    background: #E7E0D3;
    box-shadow: none;
    font-size: .82rem;
}
.app-principale .client-filtres-v3 button.actif { color: #FFFAF0; background: var(--app-vert); }
.client-ajout-recherche {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    margin-bottom: 10px;
    padding: 13px;
    border: 1px dashed rgba(163, 111, 25, .45);
    border-radius: 15px;
    color: #70470D;
    background: #FFF9EC;
}
.client-ajout-recherche[hidden] { display: none; }
.clients-liste-v3 { display: grid; gap: 9px; }
.client-carte-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 82px;
    padding: 11px;
    border: 1px solid rgba(65, 77, 68, .08);
    border-radius: 18px;
    background: #FFFDF8;
    box-shadow: 0 9px 25px rgba(55, 44, 24, .055);
    transition: transform .18s ease, box-shadow .18s ease;
}
.client-carte-v3:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(55, 44, 24, .09); }
.client-carte-v3[hidden] { display: none; }
.app-principale .client-ouvrir-v3 {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--app-encre);
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.app-principale .client-ouvrir-v3:hover { box-shadow: none; }
.client-copie-v3 { min-width: 0; }
.client-copie-v3 strong,
.client-copie-v3 small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-copie-v3 small { margin-top: 3px; color: var(--app-doux); font-size: .72rem; }
.app-principale .client-rdv-rapide {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #70470D;
    background: #F3E6C9;
    font-size: 1.15rem;
    font-weight: 800;
}
.etat-vide-v3 {
    display: grid;
    min-height: 280px;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 30px 20px;
    border: 1px dashed rgba(65, 77, 68, .18);
    border-radius: 22px;
    color: var(--app-encre);
    background: rgba(255, 253, 248, .58);
    text-align: center;
}
.etat-vide-v3 > span { color: #A06D1B; font-size: 2rem; }
.etat-vide-v3 h2, .etat-vide-v3 p { margin: 0; }
.aucun-resultat-v3 { padding: 24px; text-align: center; }
.fiche-client-identite { display: flex; align-items: center; gap: 11px; }
.fiche-client-identite .surtitre { margin-bottom: 4px; }
.client-stats-dialogue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0; }
.client-stats-dialogue div { padding: 11px 8px; border-radius: 12px; background: #F5EFE4; text-align: center; }
.client-stats-dialogue span,
.client-stats-dialogue strong { display: block; }
.client-stats-dialogue span { color: var(--app-doux); font-size: .66rem; }
.client-stats-dialogue strong { margin-top: 4px; font-size: 1.05rem; }

.plus-grille-v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plus-grille-v3 > a {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 94px;
    padding: 16px;
    border: 1px solid rgba(65, 77, 68, .08);
    border-radius: 19px;
    color: var(--app-encre);
    background: #FFFDF8;
    box-shadow: 0 9px 25px rgba(55, 44, 24, .055);
    transition: transform .18s ease, background .18s ease;
}
.plus-grille-v3 > a:hover { transform: translateY(-2px); background: #FFF7E7; }
.plus-grille-v3 strong,
.plus-grille-v3 small { display: block; }
.plus-grille-v3 small { margin-top: 4px; color: var(--app-doux); }
.plus-grille-v3 b { color: #8A5C16; font-size: 1.25rem; }
.plus-icone { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #6A4510; background: #F3E6C9; font-size: 1.15rem; font-weight: 850; }

/* Sous-pages de Plus — même langage visuel que l'Agenda */
.plus-page-entete { align-items: flex-start; margin-bottom: 18px; }
.plus-page-entete > div { min-width: 0; }
.plus-retour {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 13px;
    color: #FFFDF8;
    background: #111211;
    box-shadow: 0 8px 20px rgba(23, 19, 12, .12);
    font-size: .78rem;
    font-weight: 850;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}
.plus-retour:hover { color: #211707; background: var(--jojo-jaune, #E1A62A); transform: translateY(-2px); }
.page-console_notifications .notification-ligne,
.page-console_services .service-console,
.page-console_revenus .revenus-resume article { border: 0; border-radius: 19px; }
.page-console_notifications .notification-ligne,
.page-console_services .service-console { min-height: 82px; }
.page-console_horaires .horaires-console,
.page-console_revenus .revenus-tableau,
.page-console_reglages .reglage-section,
.page-console_reglages .notifications-iphone { border-radius: 21px; }

.after-demandes-v4 { display: grid; gap: 12px; }
.after-demande-v4 {
    padding: 19px;
    border-radius: 21px;
    color: var(--app-encre);
    background: #FFFDF8;
    box-shadow: 0 10px 28px rgba(55, 44, 24, .065);
}
.after-demande-v4 > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.after-demande-v4 > header small,
.after-demande-v4 > header h2 { display: block; margin: 0; }
.after-demande-v4 > header small { color: var(--app-doux); font-size: .7rem; }
.after-demande-v4 > header h2 { margin-top: 3px; font-size: 1.18rem; }
.after-demande-v4 > header > strong { padding: 8px 11px; border-radius: 11px; color: #2C210E; background: #F1D48F; font-size: .9rem; white-space: nowrap; }
.after-demande-plage-v4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin-top: 14px; padding: 14px; border-radius: 15px; background: #F6EFE2; }
.after-demande-plage-v4 > strong { text-transform: capitalize; }
.after-demande-plage-v4 > span { color: #805517; font-weight: 850; }
.after-demande-plage-v4 > small { grid-column: 1 / -1; color: var(--app-doux); }
.after-demande-v4 > p { margin: 10px 0 0; color: var(--app-doux); font-size: .72rem; }
.after-demande-actions-v4 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 15px; }
.after-demande-actions-v4 form { display: grid; }
.after-demande-actions-v4 button,
.after-demande-actions-v4 .bouton { width: 100%; min-height: 46px; margin: 0; place-items: center; border-radius: 13px; text-align: center; }
.after-demande-actions-v4 .bouton { display: grid; }

.plus-formulaire-v4 { margin-top: 0 !important; border-radius: 21px !important; }
.plus-formulaire-v4 form { display: grid; gap: 13px; }
.plus-formulaire-v4 form > div { margin: 0; }
.plus-formulaire-v4 label { color: #4E5A52; font-size: .79rem; font-weight: 750; }
.plus-formulaire-v4 input,
.plus-formulaire-v4 select,
.plus-formulaire-v4 textarea { color: var(--app-encre); background: #FFFDF8; }
.plus-formulaire-v4 button[type="submit"] { min-height: 52px; border-radius: 14px; }
.contre-offre-resume-v4 { display: grid; gap: 4px; margin-bottom: 15px; padding: 15px; border-radius: 15px; background: #F6EFE2; }
.contre-offre-resume-v4 span,
.contre-offre-resume-v4 small { color: var(--app-doux); font-size: .74rem; }
.contre-offre-resume-v4 strong { color: var(--app-encre); }

.agenda-outils-v3 { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.agenda-date-v3 { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; min-height: 48px; border-radius: 14px; background: #FFFDF8; box-shadow: 0 7px 20px rgba(55, 44, 24, .05); }
.agenda-date-v3 a { display: grid; height: 100%; place-items: center; color: #805517; font-size: 1.45rem; }
.agenda-date-v3 strong { text-align: center; text-transform: capitalize; }
.agenda-outils-v3 .choix-vue { display: flex; justify-self: end; gap: 4px; padding: 5px; border-radius: 14px; background: #E7E0D3; }
.agenda-outils-v3 .choix-vue a { min-height: 39px; padding: 9px 13px; border-radius: 10px; color: #5F675F; font-size: .82rem; font-weight: 750; }
.agenda-outils-v3 .choix-vue a.actif { color: #FFFAF0; background: var(--app-vert); }
.agenda-semaine-v3 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 11px; }
.agenda-semaine-v3 a {
    display: grid;
    min-width: 0;
    min-height: 68px;
    place-items: center;
    align-content: center;
    border-radius: 14px;
    color: #3E4942;
    background: #FFFDF8;
    box-shadow: 0 7px 20px rgba(55, 44, 24, .05);
}
.agenda-semaine-v3 small,
.agenda-semaine-v3 strong,
.agenda-semaine-v3 span { display: block; line-height: 1.15; }
.agenda-semaine-v3 small { overflow: hidden; max-width: 100%; font-size: .62rem; text-transform: uppercase; }
.agenda-semaine-v3 strong { margin: 3px 0; }
.agenda-semaine-v3 span { color: #7A827B; font-size: .62rem; }
.agenda-semaine-v3 a.actif { color: #2B200E; background: linear-gradient(145deg, #F2D99F, #DFB45D); }
.agenda-semaine-v3 a.actif span { color: #4D3A19; }

.retard-page-v3 { margin-top: 0 !important; }
.retard-hero-v3 { display: flex; justify-content: space-between; gap: 14px; padding: 17px; border-radius: 18px; color: #1C160D; background: linear-gradient(145deg, #EFCD86, #CF9C42); }
.retard-hero-v3 strong,
.retard-hero-v3 span { display: block; }
.retard-hero-v3 span { margin-top: 4px; color: #4F3B1C; font-size: .75rem; }
.retard-hero-v3 b { align-self: center; max-width: 90px; text-align: right; text-transform: capitalize; }
.retard-date-v3 { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0; }
.retard-date-v3 label { margin: 0; }
.retard-date-v3 input { margin-top: 5px; }
.retard-date-v3 button { align-self: end; min-height: 48px; }
.retard-form-v3 { margin: 0; }
.retard-options-v3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 14px 0 20px; }
.app-principale .retard-options-v3 button { min-height: 48px; padding: 8px; border: 1px solid rgba(65, 77, 68, .1); border-radius: 13px; color: #425048; background: #FFFDF8; box-shadow: none; }
.app-principale .retard-options-v3 button.actif { border-color: #D3A54A; color: #241B0D; background: #D3A54A; }
.retard-liste-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.retard-liste-entete h2 { font-size: 1.25rem; }
.retard-liste-entete span { color: var(--app-doux); font-size: .78rem; }
.retard-liste-v3 { display: grid; gap: 8px; }
.retard-personne-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(65, 77, 68, .09);
    border-radius: 17px;
    color: var(--app-encre);
    background: #FFFDF8;
    cursor: pointer;
}
.retard-personne-v3 > input { grid-column: 2; grid-row: 1; width: 20px; height: 20px; margin: 0; accent-color: #C28D32; }
.retard-personne-v3 > span:first-of-type { grid-column: 1; grid-row: 1; }
.retard-personne-v3 strong,
.retard-personne-v3 small { display: block; }
.retard-personne-v3 small { margin-top: 3px; color: var(--app-doux); }
.retard-heures-v3 { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--app-ligne); }
.retard-heures-v3 small:last-child { text-align: right; }
.app-principale .retard-appliquer-v3 { position: sticky; bottom: 79px; z-index: 5; width: 100%; min-height: 54px; margin-top: 12px; border-radius: 15px; }
.retard-appliquer-v3:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 820px) {
    .plus-grille-v3 { grid-template-columns: 1fr; }
    .plus-grille-v3 > a { min-height: 78px; }
    .agenda-outils-v3 { grid-template-columns: 1fr; }
    .agenda-outils-v3 .choix-vue { grid-row: 1; justify-self: stretch; }
    .agenda-outils-v3 .choix-vue a { flex: 1; text-align: center; }
    .agenda-date-v3 { grid-row: 2; }
    .plus-page-entete { position: relative; padding-top: 50px; }
    .plus-page-entete .plus-retour { position: absolute; top: 0; left: 0; }
}

@media (max-width: 560px) {
    .after-demande-v4 { padding: 16px; }
    .after-demande-actions-v4 { grid-template-columns: 1fr 1fr; }
    .after-demande-actions-v4 form:first-child { grid-column: 1 / -1; }
    .page-console_notifications .notification-ligne { min-height: 0; padding: 14px; }
}

@media (max-width: 430px) {
    .clients-entete { align-items: flex-start !important; }
    .clients-entete > div { max-width: 225px; }
    .bouton-ajouter-client { min-width: 92px; padding-inline: 13px !important; }
    .client-copie-v3 small { max-width: 220px; }
    .agenda-ajouter { min-width: 112px; }
    .agenda-semaine-v3 { gap: 4px; }
    .agenda-semaine-v3 a { min-height: 64px; border-radius: 12px; }
    .legende-services { gap: 5px; }
    .legende-services span { padding: 5px 7px; font-size: .6rem; }
    .retard-date-v3 { grid-template-columns: 1fr 92px; }
}

.app-etat-vide {
    display: grid;
    min-height: 300px;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 32px 22px;
    border: 1px dashed rgba(65, 77, 68, .18);
    border-radius: 22px;
    color: var(--app-encre);
    background: rgba(255, 253, 248, .7);
    text-align: center;
}
.app-etat-vide > span { color: #A06D1B; font-size: 2rem; }
.app-etat-vide h2,
.app-etat-vide p { margin: 0; }
.app-etat-vide p { max-width: 420px; color: var(--app-doux); }
.app-etat-vide .bouton { margin-top: 8px; }

.reglages-sections { display: grid; gap: 12px; }
.reglage-section { padding: 20px; }
.reglage-section-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.reglage-section-entete > span {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    color: #6A4510;
    background: #F3E6C9;
    font-size: 1.05rem;
    font-weight: 850;
}
.reglage-section-entete h2,
.reglage-section-entete p { margin: 0; }
.reglage-section-entete p { margin-top: 3px; color: var(--app-doux); font-size: .78rem; }
.reglage-champs { display: grid; gap: 11px; }
.reglage-champs.deux-colonnes { grid-template-columns: 2fr 1fr; }
.reglage-champs.trois-colonnes { grid-template-columns: repeat(3, 1fr); }
.reglages-sections label { margin: 0; color: #536057; font-size: .78rem; font-weight: 750; }
.reglages-sections input,
.reglages-sections textarea { margin-top: 6px; color: var(--app-encre); background: #FFFDF8; }
.reglages-sections textarea { min-height: 0; resize: vertical; }
.reglage-info {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 13px;
    border-radius: 14px;
    color: #31584B;
    background: #EDF4EE;
}
.reglage-info > span { font-size: 1.1rem; }
.reglage-info strong,
.reglage-info p { display: block; margin: 0; }
.reglage-info p { margin-top: 3px; color: #5F756B; font-size: .75rem; }
.reglage-paiement { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border: 1px solid rgba(65, 77, 68, .09); border-radius: 17px; color: var(--app-encre); background: #FFFDF8; }
.reglage-paiement b,
.reglage-paiement small { display: block; }
.reglage-paiement small { margin-top: 3px; color: var(--app-doux); }
.reglage-paiement strong { padding: 7px 10px; border-radius: 999px; color: #6B4A16; background: #F3E6C9; font-size: .72rem; }
.app-principale .reglages-enregistrer { position: sticky; bottom: 79px; z-index: 5; min-height: 54px; border-radius: 15px; }

.app-principale button.creneau-libre {
    width: 100%;
    border: 0;
    color: #858D86;
    background: transparent;
    box-shadow: none;
    font-weight: 500;
}
.app-principale button.creneau-libre:hover { color: #744C11; background: #FAEFD7; box-shadow: none; }
.dialogue-rdv-ajout { overflow-y: auto; }
.dialogue-rdv-ajout #rdv-resume-plage { margin: -7px 0 0; color: var(--app-doux); font-size: .8rem; }
.rdv-form-dialogue { display: grid; gap: 10px; margin-top: 14px; }
.rdv-form-dialogue > div { margin: 0; }
.rdv-form-dialogue label { margin: 0; }
.rdv-form-dialogue input,
.rdv-form-dialogue select,
.rdv-form-dialogue textarea { margin-top: 5px; color: var(--app-encre); background: #FFFDF8; }
.rdv-form-dialogue #client-recherche-rdv { margin-top: 5px; }
.rdv-form-dialogue .client-ajout-recherche { margin: 0; }

.client-autocomplete { position: relative; }
.client-autocomplete-resultats {
    position: absolute;
    z-index: 30;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(79, 65, 37, .16);
    border-radius: 14px;
    background: #FFFDF8;
    box-shadow: 0 18px 44px rgba(40, 34, 21, .18);
}
.app-principale .client-autocomplete-resultat {
    display: grid;
    width: 100%;
    min-height: 0;
    gap: 3px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    color: var(--app-encre);
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.app-principale .client-autocomplete-resultat:hover,
.app-principale .client-autocomplete-resultat:focus-visible {
    color: #5E410F;
    background: #F7EACF;
    box-shadow: none;
}
.client-autocomplete-resultat small { overflow: hidden; color: var(--app-doux); text-overflow: ellipsis; white-space: nowrap; }
.client-autocomplete-selection {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 7px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: #275F4C;
    background: #EAF3ED;
    font-size: .78rem;
}
.client-autocomplete-selection[hidden],
.client-autocomplete-resultats[hidden] { display: none; }

/* Ajout de rendez-vous : parcours mobile en trois étapes. */
.rdv-ajout-page { width: min(690px, 100%); margin-inline: auto; padding: clamp(18px, 4vw, 32px); }
.rdv-wizard [hidden] { display: none !important; }
.rdv-wizard-progression { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 22px; }
.rdv-wizard-progression span { height: 4px; border-radius: 99px; background: #DED8CD; transition: background .18s ease; }
.rdv-wizard-progression span.actif { background: var(--app-or); }
.rdv-wizard-etape { animation: rdv-etape-entree .17s ease-out; }
.rdv-wizard-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.rdv-wizard-entete h2, .rdv-wizard-entete h3, .rdv-wizard-entete p { margin: 0; }
.rdv-wizard-entete h2 { color: var(--app-encre); font-size: clamp(1.45rem, 5vw, 2rem); letter-spacing: -.035em; }
.rdv-wizard-entete h3 { color: var(--app-encre); font-size: 1.15rem; }
.rdv-wizard-entete p:not(.surtitre) { margin-top: 5px; color: var(--app-doux); }
.rdv-wizard-erreurs { margin-bottom: 14px; padding: 11px 13px; border-radius: 12px; color: #8F2929; background: #FCEAEA; }
.rdv-recherche-client { display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 0 13px; border: 1px solid var(--app-ligne); border-radius: 14px; background: #FFFDF8; box-shadow: 0 8px 24px rgba(55, 44, 24, .05); }
.rdv-recherche-client > span { color: var(--app-doux); font-size: 1.25rem; }
.app-principale .rdv-recherche-client input { min-height: 52px; margin: 0; padding-inline: 0; border: 0; background: transparent; box-shadow: none; }
.rdv-client-resultats { display: grid; max-height: 320px; margin-top: 11px; overflow-y: auto; border-block: 1px solid var(--app-ligne); }
.app-principale .rdv-client-resultat,
.app-principale .rdv-client-nouveau,
.app-principale .rdv-services-choix button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    min-height: 66px;
    gap: 12px;
    align-items: center;
    padding: 10px 5px;
    border: 0;
    border-bottom: 1px solid var(--app-ligne);
    border-radius: 0;
    color: var(--app-encre);
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.app-principale .rdv-client-resultat:hover,
.app-principale .rdv-client-nouveau:hover,
.app-principale .rdv-services-choix button:hover { color: #65430F; background: #F8EDD7; box-shadow: none; transform: none; }
.rdv-client-resultat > span:nth-child(2), .rdv-client-nouveau > span:nth-child(2), .rdv-services-choix button > span { min-width: 0; }
.rdv-client-resultat strong, .rdv-client-resultat small,
.rdv-client-nouveau strong, .rdv-client-nouveau small,
.rdv-services-choix strong, .rdv-services-choix small { display: block; }
.rdv-client-resultat small, .rdv-client-nouveau small, .rdv-services-choix small { margin-top: 3px; overflow: hidden; color: var(--app-doux); text-overflow: ellipsis; white-space: nowrap; }
.rdv-client-avatar, .rdv-client-nouveau > span:first-child {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #EEC969;
    background: #20231F;
    font-size: .75rem;
    font-weight: 800;
}
.rdv-client-nouveau { margin-top: 3px; }
.rdv-client-nouveau > span:first-child { color: #FFFDF8; background: #B9852E; font-size: 1.25rem; }
.rdv-resultat-vide { margin: 0; padding: 16px 5px; color: var(--app-doux); }
.rdv-nouveau-client { display: grid; gap: 12px; margin-top: 13px; padding: 17px; border: 1px solid #E6D7B9; border-radius: 17px; background: #FBF2DF; }
.rdv-nouveau-client .rdv-wizard-entete { margin-bottom: 0; }
.rdv-nouveau-client input { background: #FFFDF8; }
.rdv-coordonnees-toggle { display: flex; align-items: center; min-height: 46px; gap: 9px; color: var(--app-encre); }
.rdv-coordonnees-toggle input { width: 20px; height: 20px; margin: 0; accent-color: #A97827; }
.rdv-coordonnees { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rdv-client-selection, .rdv-jojo-fixe {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 13px;
    color: #295F4D;
    background: #EAF3ED;
}
.rdv-client-selection > div, .rdv-jojo-fixe > div { display: grid; flex: 1; }
.rdv-client-selection small, .rdv-jojo-fixe small { color: #55766A; }
.rdv-jojo-fixe { margin: 0 0 12px; color: var(--app-encre); background: #F5E7C9; }
.rdv-jojo-fixe > span:last-child { color: #275F4C; }
.app-logo-mini { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #EBC45E; background: #171916; font-size: .72rem; font-weight: 900; }
.rdv-services-choix { display: grid; border-top: 1px solid var(--app-ligne); }
.rdv-services-choix i { width: 9px; height: 42px; border-radius: 8px; background: var(--couleur-service); }
.rdv-wizard-etape > button.fantome { margin-top: 15px; }
.rdv-resume-final { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 15px; }
.rdv-resume-final > div { min-width: 0; padding: 11px; border-radius: 13px; background: #F5E7C9; }
.rdv-resume-final small, .rdv-resume-final strong { display: block; }
.rdv-resume-final small { color: #766A55; }
.rdv-resume-final strong { margin-top: 3px; overflow: hidden; color: var(--app-encre); text-overflow: ellipsis; white-space: nowrap; }
.rdv-date-heure-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rdv-date-heure-champs label { display: grid; }
.rdv-date-heure-champs input { background: #FFFDF8; }
.rdv-date-heure-champs label > small { margin-top: 4px; color: var(--app-doux); }
.rdv-creneaux-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 17px 0 8px; }
.rdv-creneaux-entete small { color: var(--app-doux); text-align: right; }
.rdv-creneaux-libres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.app-principale .rdv-creneaux-libres button { min-height: 44px; padding: 9px 6px; border: 1px solid var(--app-ligne); border-radius: 11px; color: var(--app-encre); background: #FFFDF8; box-shadow: none; }
.app-principale .rdv-creneaux-libres button:hover,
.app-principale .rdv-creneaux-libres button.selectionne { border-color: #B9852E; color: #5F3D0B; background: #F4DFB5; box-shadow: none; transform: none; }
.rdv-notes { display: grid; margin-top: 17px; }
.rdv-notes textarea { min-height: 76px; background: #FFFDF8; }
.rdv-wizard-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 9px; margin-top: 17px; }
.rdv-wizard-actions button { margin: 0; }
.dialogue-rdv-ajout .rdv-wizard-entete h2 { font-size: 1.4rem; }

@keyframes rdv-etape-entree {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
    .rdv-ajout-page { padding: 18px 14px; border-radius: 20px !important; }
    .dialogue-rdv-ajout { width: min(100% - 14px, 560px); max-height: calc(100dvh - 20px); padding: 17px 14px; }
    .rdv-coordonnees, .rdv-date-heure-champs { grid-template-columns: 1fr; }
    .rdv-resume-final { grid-template-columns: 1fr; gap: 5px; }
    .rdv-resume-final > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; }
    .rdv-resume-final strong { margin: 0; }
    .rdv-creneaux-libres { grid-template-columns: repeat(3, 1fr); }
    .rdv-wizard-actions { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .reglage-section { padding: 17px; }
    .reglage-champs.deux-colonnes,
    .reglage-champs.trois-colonnes { grid-template-columns: 1fr; }
}

.notifications-iphone {
    margin-bottom: 13px;
    padding: 20px;
    border: 1px solid rgba(73, 93, 81, .12);
    background: linear-gradient(145deg, #FFFDF8, #F5E8C9);
}
.notifications-etat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border-radius: 15px;
    color: var(--app-encre);
    background: rgba(255, 255, 255, .64);
}
.notifications-etat strong,
.notifications-etat p { display: block; margin: 0; }
.notifications-etat p { margin-top: 3px; color: var(--app-doux); font-size: .76rem; }
.notifications-voyant {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 3px solid #E6D2A6;
    border-radius: 50%;
    background: #A18658;
    box-shadow: 0 0 0 5px rgba(161, 134, 88, .12);
}
.notifications-voyant.actif { border-color: #B8D6C8; background: #2F765E; box-shadow: 0 0 0 5px rgba(47, 118, 94, .13); }
.notifications-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.app-principale .notifications-actions button { min-height: 45px; border-radius: 13px; }
.installation-etapes { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.installation-etapes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px; border-radius: 13px; background: #F7F1E6; }
.installation-etapes b:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #5E410F; background: #ECD49F; }

@media (max-width: 540px) {
    .notifications-iphone { padding: 17px; }
    .notifications-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .app-principale .notifications-actions button { width: 100%; padding-inline: 10px; }
}

/* Prototype validable — accueil, horaires et agenda plus structurés */
.app-notification {
    color: #24744D;
    background: #E5F3E9;
    box-shadow: 0 8px 24px rgba(36, 116, 77, .13);
}
.app-notification:hover { color: #175B3A; background: #D7EEDF; }

.horaire-section-entete-v4 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}
.horaire-section-entete-v4 :is(h2, p) { margin: 0; }
.horaire-section-entete-v4 > span,
.horaire-section-entete-v4 > strong {
    padding: 7px 10px;
    border-radius: 999px;
    color: #755017;
    background: #F3E7CC;
    font-size: .69rem;
    font-weight: 850;
    white-space: nowrap;
}
.horaires-liste-v4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.horaire-carte-v4 {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 15px;
    border: 1px solid rgba(65, 77, 68, .1);
    border-radius: 17px;
    background: #FBF9F4;
}
.horaire-carte-v4 header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.horaire-carte-v4 header div { min-width: 0; }
.horaire-carte-v4 header :is(strong, small) { display: block; }
.horaire-carte-v4 header strong { color: var(--app-encre); font-size: 1rem; }
.horaire-carte-v4 header small { margin-top: 2px; color: var(--app-doux); font-size: .68rem; }
.horaire-carte-v4 header > span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #2C6948;
    background: #E3F3E8;
    font-size: .63rem;
    font-weight: 850;
}
.horaires-after-v4 .horaire-carte-v4 header > span { color: #775018; background: #F4E6C6; }
.horaire-heures-v4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: end; }
.horaire-heures-v4 label { min-width: 0; margin: 0; }
.horaire-heures-v4 label > span { display: block; margin-bottom: 5px; color: #667069; font-size: .67rem; font-weight: 800; }
.horaire-heures-v4 input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding-inline: 9px;
    border-color: #D8D2C7;
    border-radius: 11px;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.app-principale .horaire-carte-v4 > button { width: 100%; min-height: 43px; margin: 0; border-radius: 11px; }
.pause-form-v4 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pause-form-v4 > div { min-width: 0; margin: 0; }
.pause-form-v4 > div:nth-of-type(2),
.pause-form-v4 > div:nth-of-type(3),
.pause-form-v4 button { grid-column: 1 / -1; }
.pause-form-v4 :is(input, select) { width: 100%; }
.pauses-liste-v4 article { border: 1px solid rgba(65, 77, 68, .08); background: #FBF9F4; }
.pause-vide-v4 { display: grid; min-height: 140px; place-items: center; align-content: center; gap: 7px; color: #8A918B; text-align: center; }
.pause-vide-v4 span { font-size: 1.45rem; }
.pause-vide-v4 p { margin: 0; }

.agenda-setmore-v4 .jour-calendrier {
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    background: #FFFDF8;
}
.agenda-setmore-v4 .jour-calendrier > h2 {
    margin: 0;
    padding: 13px 15px;
    border-bottom: 1px solid #DCD7CD;
    background: #F2EEE6;
    font-size: .9rem;
}
.agenda-setmore-v4 .ligne-temps { background: #FFFDF8; }
.agenda-setmore-v4 .creneau-agenda {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0;
    height: 60px;
    min-height: 60px;
    padding: 0;
    border-top: 1px solid #E4E0D8;
}
.agenda-setmore-v4 .creneau-agenda:first-child { border-top: 0; }
.agenda-setmore-v4 .creneau-agenda time {
    height: 100%;
    padding: 10px 8px 0;
    border-right: 1px solid #DED9CF;
    color: #626B64;
    background: #F7F4ED;
    font-size: .69rem;
    font-weight: 750;
    text-align: right;
}
.agenda-setmore-v4 .creneau-agenda .rdv-agenda-etendu {
    top: calc(3px + var(--rdv-decalage, 0px));
    right: 4px;
    left: 62px;
    border: 1px solid color-mix(in srgb, var(--couleur-service) 32%, #CFC9BE);
    border-left: 6px solid var(--couleur-service);
    border-radius: 7px;
    box-shadow: 0 2px 7px rgba(45, 40, 32, .07);
}
.agenda-setmore-v4 .creneau-libre {
    align-self: stretch;
    min-height: 0;
    margin: 3px 4px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
}
.agenda-setmore-v4 .creneau-libre:hover { border-color: #E4D4B3; }

@media (max-width: 820px) {
    .horaires-liste-v4 { grid-template-columns: 1fr; }
    .horaire-grille { gap: 11px; }
    .agenda-setmore-v4.vue-3jours .jour-calendrier { padding: 0; }
    .agenda-setmore-v4.vue-3jours .jour-calendrier > h2 { min-height: 48px; padding: 10px 3px; font-size: .7rem; }
    .agenda-setmore-v4.vue-3jours .creneau-agenda { grid-template-columns: 27px minmax(0, 1fr); gap: 0; height: 58px; min-height: 58px; }
    .agenda-setmore-v4.vue-3jours .creneau-agenda time { padding: 8px 2px 0; font-size: .5rem; text-align: center; }
    .agenda-setmore-v4.vue-3jours .creneau-agenda .rdv-agenda-etendu { right: 2px; left: 29px; padding: 5px; border-left-width: 3px; border-radius: 5px; }
}

@media (max-width: 560px) {
    .horaires-console { padding: 15px !important; }
    .horaire-section-entete-v4 { align-items: center; }
    .horaire-section-entete-v4 > span { display: none; }
    .horaire-carte-v4 { padding: 13px; }
    .horaire-heures-v4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .horaire-heures-v4 input { min-height: 44px; padding-inline: 7px; font-size: .85rem; }
    .pause-form-v4 { grid-template-columns: 1fr; }
    .pause-form-v4 > div,
    .pause-form-v4 > div:nth-of-type(2),
    .pause-form-v4 > div:nth-of-type(3),
    .pause-form-v4 button { grid-column: 1; }
}