/* ==========================================================================
   MonRDV — feuille de style principale
   Prenez rendez-vous, simplement !
   HTML5 / CSS3 sans étape de compilation (CDC §7.2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */

:root {
    /*
     | Verts MonRDV.
     |
     | Les deux bornes du dégradé — 300 (#a8d946) et 900 (#006622) — sont
     | relevées dans le logo lui-même, pas approximées : voir
     | erdv_mobile/outils/preparer_logo.dart. Les teintes intermédiaires en
     | découlent, du plus clair au plus profond.
     */
    --primaire-50: #f3fae9;
    --primaire-100: #ddf3c4;
    --primaire-200: #c5e88c;
    --primaire-300: #a8d946;   /* borne claire du dégradé */
    --primaire-400: #7cc61f;
    --primaire-500: #5cba02;   /* vert du mot « RDV » */
    --primaire-600: #2ea41f;
    --primaire-700: #0e8f35;   /* couleur d'action principale */
    --primaire-800: #037a2a;
    --primaire-900: #006622;   /* borne profonde du dégradé */
    --primaire-encre: #07401a; /* vert presque noir du mot « Mon » */

    /* Dégradé de la marque, orienté comme sur le symbole du logo */
    --degrade-marque: linear-gradient(135deg,
        var(--primaire-300) 0%,
        var(--primaire-700) 55%,
        var(--primaire-900) 100%);

    --degrade-court: linear-gradient(135deg,
        var(--primaire-500) 0%,
        var(--primaire-900) 100%);

    /* Ambre : chaleur, appels à l'action */
    --accent-50: #fffbeb;
    --accent-100: #fef3c7;
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f59e0b;
    --accent-600: #d97706;
    --accent-700: #b45309;

    --neutre-0: #ffffff;
    --neutre-50: #f7faf5;
    --neutre-100: #eef3ea;
    --neutre-200: #e3eadc;
    --neutre-300: #c9d4c1;
    --neutre-400: #97a398;
    --neutre-500: #5f6b60;
    --neutre-600: #47543f;
    --neutre-700: #33402f;
    --neutre-800: #22301f;
    --neutre-900: #17251a;

    --succes: #0e8f35;
    --succes-clair: #ddf3c4;
    --danger: #dc2626;
    --danger-clair: #fee2e2;
    --alerte: #d97706;
    --alerte-clair: #fef3c7;
    --info: #2563eb;
    --info-clair: #dbeafe;

    --rayon-xs: 4px;
    --rayon-sm: 6px;
    --rayon: 10px;
    --rayon-lg: 16px;
    --rayon-xl: 24px;
    --rayon-rond: 999px;

    --ombre-xs: 0 1px 2px rgba(7, 64, 26, .07);
    --ombre-sm: 0 1px 3px rgba(7, 64, 26, .09), 0 1px 2px rgba(7, 64, 26, .05);
    --ombre: 0 4px 12px rgba(7, 64, 26, .09);
    --ombre-lg: 0 12px 28px rgba(7, 64, 26, .13);
    --ombre-xl: 0 24px 48px rgba(7, 64, 26, .18);

    --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --entete-hauteur: 72px;
    --laterale-largeur: 260px;
    --contenu-max: 1240px;

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

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

body {
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.6;
    color: var(--neutre-800);
    background: var(--neutre-50);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

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

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

a { color: var(--primaire-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primaire-800); }

h1, h2, h3, h4, h5 { line-height: 1.25; font-weight: 700; color: var(--neutre-900); }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.5rem; letter-spacing: -.015em; }
h3 { font-size: 1.175rem; }
h4 { font-size: 1rem; }

/* Accessibilité : cible d'un lien d'évitement, ou libellé lu par les lecteurs d'écran */
.visuellement-cache {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible {
    outline: 3px solid var(--primaire-400);
    outline-offset: 2px;
    border-radius: var(--rayon-xs);
}

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */

.conteneur {
    width: 100%;
    max-width: var(--contenu-max);
    margin-inline: auto;
    padding-inline: 20px;
}

.conteneur-etroit { max-width: 720px; }
.conteneur-moyen { max-width: 960px; }

.section { padding-block: 56px; }
.section-compacte { padding-block: 32px; }

.grille { display: grid; gap: 20px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grille-auto-large { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.flex { display: flex; }
.flex-centre { display: flex; align-items: center; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; }
.flex-colonne { display: flex; flex-direction: column; }
.flex-enroule { flex-wrap: wrap; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.pousser { margin-left: auto; }

/* --------------------------------------------------------------------------
   4. Typographie utilitaire
   -------------------------------------------------------------------------- */

.titre-section { font-size: 1.6rem; margin-bottom: 6px; }
.sous-titre { color: var(--neutre-500); font-size: .95rem; }

.texte-xs { font-size: .75rem; }
.texte-sm { font-size: .85rem; }
.texte-lg { font-size: 1.05rem; }
.texte-xl { font-size: 1.3rem; }
.texte-gras { font-weight: 600; }
.texte-tres-gras { font-weight: 700; }
.texte-discret { color: var(--neutre-500); }
.texte-tres-discret { color: var(--neutre-400); }
.texte-primaire { color: var(--primaire-700); }
.texte-succes { color: var(--succes); }
.texte-danger { color: var(--danger); }
.texte-alerte { color: var(--alerte); }
.texte-centre { text-align: center; }
.texte-droite { text-align: right; }
.majuscules { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; }
.tabulaire { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. Cartes
   -------------------------------------------------------------------------- */

.carte {
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xs);
}

.carte-corps { padding: 20px 24px; }
.carte-entete {
    padding: 18px 24px;
    border-bottom: 1px solid var(--neutre-200);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.carte-entete h3 { font-size: 1.05rem; }
.carte-pied {
    padding: 16px 24px;
    border-top: 1px solid var(--neutre-200);
    background: var(--neutre-50);
    border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
}

.carte-interactive { transition: transform var(--transition), box-shadow var(--transition); }
.carte-interactive:hover { transform: translateY(-3px); box-shadow: var(--ombre-lg); }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    font-size: .92rem; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--rayon-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

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

.bouton:disabled,
.bouton.desactive { opacity: .55; cursor: not-allowed; transform: none; }

.bouton-primaire { background: var(--primaire-700); color: #fff; }
.bouton-primaire:hover { background: var(--primaire-800); color: #fff; }

.bouton-accent { background: var(--accent-500); color: var(--neutre-900); }
.bouton-accent:hover { background: var(--accent-400); color: var(--neutre-900); }

.bouton-secondaire {
    background: var(--neutre-0); color: var(--neutre-700); border-color: var(--neutre-300);
}
.bouton-secondaire:hover { background: var(--neutre-100); color: var(--neutre-900); }

.bouton-fantome { background: transparent; color: var(--neutre-600); }
.bouton-fantome:hover { background: var(--neutre-100); color: var(--neutre-900); }

.bouton-danger { background: var(--danger); color: #fff; }
.bouton-danger:hover { background: #b91c1c; color: #fff; }

.bouton-succes { background: var(--succes); color: #fff; }
.bouton-succes:hover { background: #047857; color: #fff; }

.bouton-sm { padding: 6px 12px; font-size: .82rem; }
.bouton-lg { padding: 14px 28px; font-size: 1rem; }
.bouton-bloc { width: 100%; }

.bouton-icone {
    padding: 8px; width: 36px; height: 36px;
    border-radius: var(--rayon-sm);
}

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */

.champ { margin-bottom: 18px; }

.champ label,
.etiquette {
    display: block; margin-bottom: 6px;
    font-size: .85rem; font-weight: 600; color: var(--neutre-700);
}

.obligatoire { color: var(--danger); }

.saisie,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="url"],
input[type="search"], select, textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--neutre-0);
    border: 1px solid var(--neutre-300);
    border-radius: var(--rayon-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    font-size: .92rem;
}

.saisie:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primaire-500);
    box-shadow: 0 0 0 3px var(--primaire-100);
}

input[type="file"] {
    padding: 8px;
    background: var(--neutre-50);
    border: 1px dashed var(--neutre-300);
    border-radius: var(--rayon-sm);
    width: 100%;
    font-size: .85rem;
}

textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.champ-invalide,
input.champ-invalide, select.champ-invalide, textarea.champ-invalide {
    border-color: var(--danger);
}

.erreur-champ {
    display: block; margin-top: 5px;
    font-size: .8rem; color: var(--danger); font-weight: 500;
}

.aide-champ { display: block; margin-top: 5px; font-size: .8rem; color: var(--neutre-500); }

.case, .interrupteur-ligne {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 12px;
}
.case input[type="checkbox"], .case input[type="radio"] {
    width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
    accent-color: var(--primaire-700); cursor: pointer;
}
.case label { margin: 0; font-weight: 500; cursor: pointer; }

.groupe-champs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }

fieldset { border: 0; padding: 0; }

/* --------------------------------------------------------------------------
   8. Alertes
   -------------------------------------------------------------------------- */

.alerte {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px;
    border-radius: var(--rayon);
    border-left: 4px solid;
    margin-bottom: 20px;
    font-size: .9rem;
}
.alerte-icone { flex-shrink: 0; margin-top: 1px; }
.alerte-succes { background: var(--succes-clair); border-color: var(--succes); color: #065f46; }
.alerte-danger { background: var(--danger-clair); border-color: var(--danger); color: #991b1b; }
.alerte-alerte { background: var(--alerte-clair); border-color: var(--alerte); color: #92400e; }
.alerte-info { background: var(--info-clair); border-color: var(--info); color: #1e40af; }
.alerte ul { margin: 6px 0 0; padding-left: 18px; }

/* --------------------------------------------------------------------------
   9. Badges et pastilles
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    font-size: .75rem; font-weight: 600;
    border-radius: var(--rayon-rond);
    white-space: nowrap;
}
.badge-succes { background: var(--succes-clair); color: #065f46; }
.badge-danger { background: var(--danger-clair); color: #991b1b; }
.badge-alerte { background: var(--alerte-clair); color: #92400e; }
.badge-info { background: var(--info-clair); color: #1e40af; }
.badge-neutre { background: var(--neutre-100); color: var(--neutre-600); }
.badge-primaire { background: var(--primaire-100); color: var(--primaire-800); }

.pastille {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--danger); color: #fff;
    font-size: .68rem; font-weight: 700;
    border-radius: var(--rayon-rond);
}

.point {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    display: inline-block;
}
.point-succes { background: var(--succes); }
.point-danger { background: var(--danger); }
.point-alerte { background: var(--alerte); }
.point-neutre { background: var(--neutre-400); }
.point-info { background: var(--info); }

/* --------------------------------------------------------------------------
   10. Tableaux
   -------------------------------------------------------------------------- */

.tableau-conteneur {
    overflow-x: auto;
    border-radius: var(--rayon-lg);
    border: 1px solid var(--neutre-200);
    background: var(--neutre-0);
}

.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }

.tableau th {
    padding: 12px 16px;
    text-align: left;
    background: var(--neutre-50);
    border-bottom: 1px solid var(--neutre-200);
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--neutre-500);
    white-space: nowrap;
}

.tableau td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutre-100);
    vertical-align: middle;
}

.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: var(--neutre-50); }

.tableau-compact td, .tableau-compact th { padding: 9px 12px; }

/* --------------------------------------------------------------------------
   11. En-tête public
   -------------------------------------------------------------------------- */

.entete {
    position: sticky; top: 0; z-index: 100;
    height: var(--entete-hauteur);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--neutre-200);
}

.entete-interieur {
    height: 100%;
    display: flex; align-items: center; gap: 28px;
}

.logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1.28rem; font-weight: 800;
    color: var(--primaire-encre); letter-spacing: -.03em;
    flex-shrink: 0;
}
.logo:hover { color: var(--primaire-900); }

/* Le symbole du logo, coins arrondis pour rappeler l'icône de l'application */
.logo-symbole {
    border-radius: 9px;
    object-fit: cover;
    box-shadow: var(--ombre-xs);
    flex-shrink: 0;
}

.logo-mot { line-height: 1; }

/* « RDV » reprend le vert vif du logo, « Mon » reste en vert encre */
.logo-marque { color: var(--primaire-500); }

/* Sur fond sombre : le mot passe en blanc, la marque en vert clair */
.logo-clair { color: #fff; }
.logo-clair:hover { color: #fff; }
.logo-clair .logo-marque { color: var(--primaire-300); }

.navigation { display: flex; align-items: center; gap: 4px; }
.navigation a {
    padding: 8px 14px;
    color: var(--neutre-600); font-weight: 500; font-size: .92rem;
    border-radius: var(--rayon-sm);
    transition: background var(--transition), color var(--transition);
}
.navigation a:hover { background: var(--neutre-100); color: var(--neutre-900); }
.navigation a.actif { color: var(--primaire-700); background: var(--primaire-50); font-weight: 600; }

.entete-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.bascule-menu {
    display: none;
    background: none; border: 0; cursor: pointer;
    padding: 8px; border-radius: var(--rayon-sm);
}
.bascule-menu:hover { background: var(--neutre-100); }

/* --------------------------------------------------------------------------
   12. Menu utilisateur
   -------------------------------------------------------------------------- */

.menu-utilisateur { position: relative; }

.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primaire-100);
    display: grid; place-items: center;
    color: var(--primaire-800); font-weight: 700; font-size: .82rem;
    flex-shrink: 0;
    border: 2px solid var(--neutre-0);
    box-shadow: var(--ombre-xs);
}
.avatar-sm { width: 30px; height: 30px; font-size: .7rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.05rem; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.5rem; }

.declencheur-menu {
    display: flex; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer;
    padding: 4px; border-radius: var(--rayon-rond);
    transition: background var(--transition);
}
.declencheur-menu:hover { background: var(--neutre-100); }

.panneau-menu {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 240px;
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-lg);
    padding: 6px;
    z-index: 200;
    display: none;
}
.panneau-menu.ouvert { display: block; animation: apparition 140ms ease-out; }

.panneau-menu-entete {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--neutre-100);
    margin-bottom: 6px;
}

.element-menu {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    color: var(--neutre-700); font-size: .9rem; font-weight: 500;
    border-radius: var(--rayon-sm);
    background: none; border: 0; cursor: pointer;
    text-align: left;
    transition: background var(--transition), color var(--transition);
}
.element-menu:hover { background: var(--neutre-100); color: var(--neutre-900); }
.element-menu-danger { color: var(--danger); }
.element-menu-danger:hover { background: var(--danger-clair); color: #991b1b; }

.separateur-menu { height: 1px; background: var(--neutre-100); margin: 6px 0; }

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

/* --------------------------------------------------------------------------
   13. Cloche de notifications
   -------------------------------------------------------------------------- */

.cloche { position: relative; }
.cloche .pastille { position: absolute; top: -2px; right: -2px; }

.panneau-notifications { min-width: 340px; max-height: 420px; overflow-y: auto; }

.notification-ligne {
    display: block;
    padding: 12px;
    border-radius: var(--rayon-sm);
    transition: background var(--transition);
}
.notification-ligne:hover { background: var(--neutre-50); }
.notification-ligne.non-lue { background: var(--primaire-50); }
.notification-ligne.non-lue:hover { background: var(--primaire-100); }

/* --------------------------------------------------------------------------
   14. Slider d'accueil (CDC §3.1)
   -------------------------------------------------------------------------- */

.slider {
    position: relative;
    border-radius: var(--rayon-xl);
    overflow: hidden;
    background: var(--primaire-800);
    box-shadow: var(--ombre-lg);
}

.slider-piste { position: relative; height: 400px; }

.diapositive {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 500ms ease;
    display: flex; align-items: center;
}
.diapositive.active { opacity: 1; visibility: visible; }

.diapositive-fond { position: absolute; inset: 0; }
.diapositive-fond img { width: 100%; height: 100%; object-fit: cover; }
.diapositive-voile {
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 102, 34, .94) 0%,
        rgba(3, 122, 42, .84) 45%,
        rgba(92, 186, 2, .55) 100%);
}

.diapositive-contenu {
    position: relative; z-index: 2;
    padding: 48px 56px;
    max-width: 620px;
    color: #fff;
}
.diapositive-contenu h2 {
    color: #fff;
    font-size: 2.4rem;
    letter-spacing: -.03em;
    margin-bottom: 14px;
}
.diapositive-contenu p {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 26px;
}

.slider-fleche {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff; cursor: pointer;
    transition: background var(--transition);
}
.slider-fleche:hover { background: rgba(255, 255, 255, .32); }
.slider-fleche-precedent { left: 20px; }
.slider-fleche-suivant { right: 20px; }

.slider-puces {
    position: absolute; bottom: 22px; left: 56px;
    z-index: 3;
    display: flex; gap: 8px;
}
.slider-puce {
    width: 32px; height: 4px;
    background: rgba(255, 255, 255, .35);
    border: 0; border-radius: var(--rayon-rond);
    cursor: pointer;
    transition: background var(--transition), width var(--transition);
}
.slider-puce.active { background: var(--accent-400); width: 48px; }

/* --------------------------------------------------------------------------
   15. Recherche
   -------------------------------------------------------------------------- */

.barre-recherche {
    display: flex; align-items: stretch; gap: 0;
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre);
    overflow: visible;
    position: relative;
}

.recherche-segment {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-right: 1px solid var(--neutre-200);
    position: relative;
}
.recherche-segment:last-of-type { border-right: 0; }
.recherche-segment svg { color: var(--neutre-400); flex-shrink: 0; }

.recherche-segment input,
.recherche-segment select {
    border: 0; padding: 0; background: transparent;
    font-size: .95rem; width: 100%;
}
.recherche-segment input:focus,
.recherche-segment select:focus { box-shadow: none; }

.recherche-segment .etiquette-mini {
    position: absolute; top: 6px; left: 46px;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--neutre-400);
}
.recherche-segment.avec-etiquette { padding-top: 22px; padding-bottom: 8px; }

.recherche-bouton { margin: 8px; border-radius: var(--rayon); }

.suggestions {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-lg);
    z-index: 50;
    overflow: hidden;
    display: none;
}
.suggestions.ouvert { display: block; }

.suggestion {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background var(--transition);
}
.suggestion:hover, .suggestion.survol { background: var(--primaire-50); }
.suggestion-type {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    color: var(--primaire-700); background: var(--primaire-50);
    padding: 2px 7px; border-radius: var(--rayon-xs);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. Cartes service et entreprise
   -------------------------------------------------------------------------- */

.carte-service {
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-service:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-lg);
    border-color: var(--primaire-200);
}

.carte-service-visuel {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--primaire-100), var(--primaire-200));
    overflow: hidden;
}
.carte-service-visuel img { width: 100%; height: 100%; object-fit: cover; }

.carte-service-etiquette {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    border-radius: var(--rayon-rond);
    font-size: .72rem; font-weight: 700;
    color: var(--neutre-700);
}

.carte-service-corps { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.carte-service-titre { font-size: 1rem; margin-bottom: 4px; }
.carte-service-titre a { color: var(--neutre-900); }
.carte-service-titre a:hover { color: var(--primaire-700); }
.carte-service-pied {
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--neutre-100);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* --------------------------------------------------------------------------
   17. Étoiles
   -------------------------------------------------------------------------- */

.etoiles { display: inline-flex; align-items: center; gap: 1px; color: var(--accent-500); }
.etoiles svg { width: 15px; height: 15px; }
.etoile-vide { color: var(--neutre-300); }

.notation-saisie { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.notation-saisie input { display: none; }
.notation-saisie label {
    cursor: pointer; color: var(--neutre-300);
    transition: color var(--transition), transform var(--transition);
    margin: 0;
}
.notation-saisie label svg { width: 34px; height: 34px; }
.notation-saisie input:checked ~ label,
.notation-saisie label:hover,
.notation-saisie label:hover ~ label { color: var(--accent-500); }
.notation-saisie label:hover { transform: scale(1.12); }

.barre-note { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.barre-note-piste {
    flex: 1; height: 7px;
    background: var(--neutre-100);
    border-radius: var(--rayon-rond);
    overflow: hidden;
}
.barre-note-remplissage { height: 100%; background: var(--accent-500); border-radius: var(--rayon-rond); }

/* --------------------------------------------------------------------------
   18. Créneaux et agenda
   -------------------------------------------------------------------------- */

.jours-onglets {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.jour-onglet {
    flex-shrink: 0;
    min-width: 78px;
    padding: 10px 12px;
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}
.jour-onglet:hover { border-color: var(--primaire-300); background: var(--primaire-50); }
.jour-onglet.actif {
    background: var(--primaire-700); border-color: var(--primaire-700); color: #fff;
}
.jour-onglet.actif .jour-onglet-nom,
.jour-onglet.actif .jour-onglet-dispo { color: rgba(255, 255, 255, .85); }
.jour-onglet.vide { opacity: .45; cursor: not-allowed; }

.jour-onglet-nom { font-size: .72rem; text-transform: uppercase; color: var(--neutre-500); font-weight: 700; }
.jour-onglet-numero { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.jour-onglet-dispo { font-size: .68rem; color: var(--succes); font-weight: 600; }

.grille-creneaux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.creneau {
    padding: 11px 8px;
    background: var(--neutre-0);
    border: 1.5px solid var(--neutre-200);
    border-radius: var(--rayon-sm);
    text-align: center;
    font-size: .88rem; font-weight: 600;
    color: var(--neutre-700);
    cursor: pointer;
    transition: all var(--transition);
}
.creneau:hover { border-color: var(--primaire-500); background: var(--primaire-50); color: var(--primaire-800); }
.creneau.selectionne {
    background: var(--primaire-700); border-color: var(--primaire-700); color: #fff;
    box-shadow: var(--ombre);
}
.creneau.indisponible {
    background: var(--neutre-100); color: var(--neutre-400);
    cursor: not-allowed; text-decoration: line-through;
    border-color: var(--neutre-200);
}

/* Grille hebdomadaire du professionnel */
.semaine-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.semaine-colonne {
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon);
    overflow: hidden;
    min-width: 140px;
}
.semaine-entete {
    padding: 10px;
    background: var(--neutre-50);
    border-bottom: 1px solid var(--neutre-200);
    text-align: center;
}
.semaine-entete.aujourdhui { background: var(--primaire-700); color: #fff; }
.semaine-entete.aujourdhui .texte-discret { color: rgba(255, 255, 255, .8); }
.semaine-corps { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 90px; }

.creneau-pro {
    padding: 7px 9px;
    border-radius: var(--rayon-xs);
    font-size: .78rem; font-weight: 600;
    border-left: 3px solid;
    background: var(--neutre-50);
    display: flex; flex-direction: column; gap: 2px;
}
.creneau-pro-disponible { border-color: var(--succes); background: var(--succes-clair); color: #065f46; }
.creneau-pro-reserve { border-color: var(--info); background: var(--info-clair); color: #1e40af; }
.creneau-pro-bloque { border-color: var(--neutre-400); background: var(--neutre-100); color: var(--neutre-500); }

/* --------------------------------------------------------------------------
   19. Tableaux de bord
   -------------------------------------------------------------------------- */

.grille-indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.indicateur {
    background: var(--neutre-0);
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.indicateur::after {
    content: ""; position: absolute; top: 0; left: 0;
    width: 3px; height: 100%; background: var(--primaire-500);
}
.indicateur-accent::after { background: var(--accent-500); }
.indicateur-succes::after { background: var(--succes); }
.indicateur-danger::after { background: var(--danger); }
.indicateur-info::after { background: var(--info); }

.indicateur-libelle {
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--neutre-500);
    margin-bottom: 8px;
}
.indicateur-valeur {
    font-size: 1.85rem; font-weight: 800;
    color: var(--neutre-900);
    letter-spacing: -.03em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.indicateur-detail { font-size: .8rem; color: var(--neutre-500); margin-top: 5px; }

/* Graphique en barres, tracé sans bibliothèque externe */
.graphique { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 20px; }
.graphique-colonne { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.graphique-barre-zone { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.graphique-barre {
    width: 100%;
    background: linear-gradient(180deg, var(--primaire-400), var(--primaire-600));
    border-radius: var(--rayon-xs) var(--rayon-xs) 0 0;
    min-height: 3px;
    position: relative;
    transition: opacity var(--transition);
}
.graphique-barre:hover { opacity: .82; }
.graphique-valeur {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: .72rem; font-weight: 700; color: var(--neutre-600);
    white-space: nowrap;
}
.graphique-etiquette { font-size: .72rem; color: var(--neutre-500); font-weight: 600; }

/* --------------------------------------------------------------------------
   20. Espaces authentifiés (barre latérale)
   -------------------------------------------------------------------------- */

.application { display: flex; min-height: 100vh; }

.laterale {
    width: var(--laterale-largeur);
    flex-shrink: 0;
    background: var(--neutre-900);
    color: var(--neutre-300);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}

.laterale-entete {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.laterale-entete .logo { color: #fff; font-size: 1.15rem; }
.laterale-entete .logo:hover { color: var(--primaire-300); }

.laterale-section { padding: 16px 12px 6px; }
.laterale-section-titre {
    padding: 0 12px 8px;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--neutre-500);
}

.laterale-lien {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    color: var(--neutre-300);
    font-size: .9rem; font-weight: 500;
    border-radius: var(--rayon-sm);
    transition: background var(--transition), color var(--transition);
}
.laterale-lien:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.laterale-lien.actif { background: var(--primaire-700); color: #fff; font-weight: 600; }
.laterale-lien svg { flex-shrink: 0; opacity: .85; }
.laterale-lien .pastille { margin-left: auto; }

.laterale-pied {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.zone-principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barre-superieure {
    height: var(--entete-hauteur);
    background: var(--neutre-0);
    border-bottom: 1px solid var(--neutre-200);
    display: flex; align-items: center; gap: 16px;
    padding-inline: 28px;
    position: sticky; top: 0; z-index: 90;
}

.contenu-principal { flex: 1; padding: 28px; }

.entete-page { margin-bottom: 26px; }
.entete-page h1 { font-size: 1.65rem; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   21. Onglets
   -------------------------------------------------------------------------- */

.onglets {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--neutre-200);
    margin-bottom: 22px;
    overflow-x: auto;
}

.onglet {
    padding: 11px 18px;
    color: var(--neutre-500); font-weight: 600; font-size: .9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
    display: inline-flex; align-items: center; gap: 8px;
}
.onglet:hover { color: var(--neutre-800); }
.onglet.actif { color: var(--primaire-700); border-color: var(--primaire-700); }
.onglet-compteur {
    padding: 1px 7px;
    background: var(--neutre-100);
    border-radius: var(--rayon-rond);
    font-size: .72rem;
}
.onglet.actif .onglet-compteur { background: var(--primaire-100); color: var(--primaire-800); }

/* --------------------------------------------------------------------------
   22. Fenêtres modales
   -------------------------------------------------------------------------- */

.voile-modale {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    z-index: 500;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.voile-modale.ouvert { display: flex; animation: apparition 160ms ease-out; }

.modale {
    background: var(--neutre-0);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xl);
    width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
}
.modale-entete {
    padding: 20px 24px;
    border-bottom: 1px solid var(--neutre-200);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.modale-corps { padding: 24px; }
.modale-pied {
    padding: 16px 24px;
    border-top: 1px solid var(--neutre-200);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--neutre-50);
    border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
}

/* --------------------------------------------------------------------------
   23. États vides
   -------------------------------------------------------------------------- */

.etat-vide {
    padding: 56px 24px;
    text-align: center;
    color: var(--neutre-500);
}
.etat-vide-icone {
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    background: var(--neutre-100);
    border-radius: 50%;
    color: var(--neutre-400);
}
.etat-vide h3 { color: var(--neutre-700); margin-bottom: 6px; font-size: 1.05rem; }
.etat-vide p { max-width: 380px; margin: 0 auto 20px; font-size: .9rem; }

/* --------------------------------------------------------------------------
   24. Pagination
   -------------------------------------------------------------------------- */

.pagination {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 28px; flex-wrap: wrap;
}
.pagination a, .pagination span {
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--neutre-200);
    border-radius: var(--rayon-sm);
    background: var(--neutre-0);
    color: var(--neutre-600); font-size: .88rem; font-weight: 600;
    transition: all var(--transition);
}
.pagination a:hover { background: var(--neutre-100); border-color: var(--neutre-300); color: var(--neutre-900); }
.pagination .actif span, .pagination span[aria-current] {
    background: var(--primaire-700); border-color: var(--primaire-700); color: #fff;
}
.pagination .desactive span { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   25. Fil d'Ariane, séparateurs, divers
   -------------------------------------------------------------------------- */

.fil-ariane {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: .85rem; color: var(--neutre-500);
    margin-bottom: 16px;
}
.fil-ariane a { color: var(--neutre-500); }
.fil-ariane a:hover { color: var(--primaire-700); }

.separateur { height: 1px; background: var(--neutre-200); margin: 24px 0; border: 0; }

.puce-liste { list-style: none; padding: 0; }
.puce-liste li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--neutre-100);
}
.puce-liste li:last-child { border-bottom: 0; }

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.galerie img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--rayon-sm);
    border: 1px solid var(--neutre-200);
}
.galerie-element { position: relative; }
.galerie-element form { position: absolute; top: 6px; right: 6px; }

.ruban-info {
    background: var(--primaire-50);
    border: 1px solid var(--primaire-200);
    border-radius: var(--rayon);
    padding: 14px 18px;
    font-size: .88rem;
    color: var(--primaire-900);
}

.encart-montant {
    background: var(--degrade-marque);
    color: #fff;
    border-radius: var(--rayon-lg);
    padding: 26px;
}
.encart-montant .indicateur-libelle { color: rgba(255, 255, 255, .75); }
.encart-montant .indicateur-valeur { color: #fff; font-size: 2.2rem; }

/* --------------------------------------------------------------------------
   26. Pied de page
   -------------------------------------------------------------------------- */

.pied-de-page {
    background: var(--neutre-900);
    color: var(--neutre-400);
    padding: 48px 0 24px;
    margin-top: 64px;
}
.pied-de-page h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.pied-de-page a { color: var(--neutre-400); font-size: .88rem; }
.pied-de-page a:hover { color: var(--primaire-300); }
.pied-de-page ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pied-bas {
    margin-top: 36px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: .82rem; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   27. Impression
   -------------------------------------------------------------------------- */

@media print {
    .entete, .laterale, .barre-superieure, .pied-de-page,
    .bouton, .onglets, .pagination { display: none !important; }
    body { background: #fff; }
    .carte { border: 1px solid #ddd; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   28. Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .grille-4 { grid-template-columns: repeat(2, 1fr); }
    .diapositive-contenu { padding: 40px; }
    .diapositive-contenu h2 { font-size: 2rem; }
}

@media (max-width: 900px) {
    .laterale {
        position: fixed; left: 0; top: 0; bottom: 0;
        z-index: 400;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--ombre-xl);
    }
    .laterale.ouverte { transform: translateX(0); }
    .bascule-menu { display: inline-flex; }
    .voile-laterale {
        position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
        z-index: 350; display: none;
    }
    .voile-laterale.ouvert { display: block; }
    .contenu-principal { padding: 20px 16px; }
    .barre-superieure { padding-inline: 16px; }
}

@media (max-width: 780px) {
    body { font-size: 14.5px; }
    h1 { font-size: 1.6rem; }

    .navigation { display: none; }
    .navigation.ouverte {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute; top: var(--entete-hauteur); left: 0; right: 0;
        background: var(--neutre-0);
        border-bottom: 1px solid var(--neutre-200);
        padding: 12px;
        box-shadow: var(--ombre);
        gap: 2px;
    }

    .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
    .groupe-champs { grid-template-columns: 1fr; }

    .barre-recherche { flex-direction: column; }
    .recherche-segment { border-right: 0; border-bottom: 1px solid var(--neutre-200); }
    .recherche-bouton { margin: 12px; }

    .slider-piste { height: 340px; }
    .diapositive-contenu { padding: 28px 24px; }
    .diapositive-contenu h2 { font-size: 1.55rem; }
    .diapositive-contenu p { font-size: .95rem; }
    .slider-fleche { display: none; }
    .slider-puces { left: 24px; bottom: 16px; }

    .section { padding-block: 36px; }
    .carte-corps, .carte-entete, .carte-pied { padding-inline: 18px; }

    .grille-creneaux { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .indicateur-valeur { font-size: 1.55rem; }

    .pied-bas { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
    .entete-actions .bouton { padding: 8px 12px; font-size: .85rem; }
    .panneau-notifications { min-width: min(340px, calc(100vw - 32px)); }
    .modale-pied { flex-direction: column-reverse; }
    .modale-pied .bouton { width: 100%; }
}