/*
 * Back-office Ma Selfie Box
 * Charte extraite de maselfiebox.fr (couleurs et typographies globales Elementor).
 *
 * Regle de lisibilite : le turquoise sert de fond (avec texte noir) ou
 * d'accent, jamais de couleur de texte sur fond clair.
 */
:root {
    /* Couleurs de la charte */
    --msb-noir: #000000;              /* principale */
    --msb-texte: #171616;             /* texte et accent */
    --msb-turquoise: #10DCCB;         /* secondaire */
    --msb-turquoise-fonce: #1C9A8F;
    --msb-turquoise-clair: #64D9CB;
    --msb-fond: #EFF3F3;
    --msb-gris: #888888;
    --msb-blanc: #FFFFFF;

    /* Roles */
    --msb-surface: var(--msb-blanc);
    --msb-bordure: #D6DEDE;
    --msb-texte-doux: #5E6363;
    --msb-erreur: #B3261E;
    --msb-erreur-fond: #FDECEA;

    /* Typographies : Muli (titres, publiee aujourd'hui sous le nom Mulish) et Poppins (texte) */
    --msb-police-titre: "Mulish", "Muli", system-ui, sans-serif;
    --msb-police-texte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    --msb-rayon: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--msb-police-texte);
    font-size: 15px;
    color: var(--msb-texte);
    background: var(--msb-fond);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--msb-police-titre);
    font-weight: 700;
    color: var(--msb-noir);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Style "accent" du site : petites capitales espacees */
.surtitre {
    font-family: var(--msb-police-titre);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msb-texte-doux);
}

a { color: var(--msb-texte); text-decoration-color: var(--msb-turquoise); text-underline-offset: 3px; }

/* En-tete */
.entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.5rem;
    background: var(--msb-surface);
    border-bottom: 3px solid var(--msb-turquoise);
}
.entete__marque img { display: block; height: 40px; width: auto; }
.entete__compte { display: flex; align-items: center; gap: 1rem; }
.entete__compte form { margin: 0; }

.contenu { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

/* Connexion */
.page-connexion .contenu {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carte {
    background: var(--msb-surface);
    border-radius: var(--msb-rayon);
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}
.carte--connexion { width: 100%; max-width: 400px; border-top: 4px solid var(--msb-turquoise); }
.carte--connexion .logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 0.5rem; }
.carte--connexion .surtitre { text-align: center; margin: 0 0 1.5rem; }

/* Formulaires */
label { display: block; margin: 1rem 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
input[type="email"], input[type="password"], input[type="text"] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--msb-bordure);
    border-radius: var(--msb-rayon);
    font: inherit;
    background: var(--msb-blanc);
}
input:focus { outline: 2px solid var(--msb-turquoise-fonce); outline-offset: 1px; border-color: var(--msb-turquoise-fonce); }
.case { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.case input { accent-color: var(--msb-turquoise-fonce); }

/* Boutons : turquoise + texte noir, inversion au survol */
.bouton {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    border: 2px solid transparent;
    border-radius: var(--msb-rayon);
    font-family: var(--msb-police-titre);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.bouton--principal {
    width: 100%;
    margin-top: 1.5rem;
    background: var(--msb-turquoise);
    color: var(--msb-noir);
}
.bouton--principal:hover, .bouton--principal:focus-visible {
    background: var(--msb-noir);
    color: var(--msb-turquoise);
}
.bouton--discret { background: transparent; color: var(--msb-texte-doux); padding: 0.4rem 0.6rem; font-family: var(--msb-police-texte); font-weight: 500; }
.bouton--discret:hover { color: var(--msb-noir); }

/* Alertes */
.alerte { padding: 0.75rem 1rem; border-radius: var(--msb-rayon); margin-bottom: 1rem; }
.alerte--erreur { background: var(--msb-erreur-fond); color: var(--msb-erreur); }

/* =====================================================================
   Navigation, pages, composants communs
   ===================================================================== */
.entete__nav { display: flex; align-items: center; gap: 1.25rem; margin-left: 2rem; margin-right: auto; }
.entete__nav a:not(.bouton) { text-decoration: none; font-weight: 500; }
.entete__nav a:not(.bouton):hover { text-decoration: underline; text-decoration-color: var(--msb-turquoise); }

.contenu--large { max-width: 1400px; }
.titre-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.titre-page h1 { margin: 0.1rem 0 0; }
.titre-page .surtitre { margin: 0; }

.bouton--action, .bouton--petit { background: var(--msb-turquoise); color: var(--msb-noir); text-decoration: none; }
.bouton--action:hover, .bouton--petit:hover { background: var(--msb-noir); color: var(--msb-turquoise); }
.bouton--petit { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.bouton--grand { font-size: 1.05rem; padding: 0.95rem 1.2rem; }
.bouton:disabled { opacity: 0.6; cursor: wait; }
.lien { background: none; border: none; padding: 0; font: inherit; color: var(--msb-texte); text-decoration: underline; text-decoration-color: var(--msb-turquoise); cursor: pointer; }

.aide { color: var(--msb-texte-doux); font-size: 0.85rem; margin: 0.35rem 0 0; }
.label { display: block; margin: 1rem 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
.alerte--succes { background: #E3F8F5; color: #0F5E57; border-left: 4px solid var(--msb-turquoise); }
.liste-erreurs { margin: 0; padding-left: 1.2rem; }

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="number"],
input[type="tel"], input[type="search"], select, textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--msb-bordure);
    border-radius: var(--msb-rayon);
    font: inherit;
    background: var(--msb-blanc);
    color: var(--msb-texte);
}
select:focus, textarea:focus { outline: 2px solid var(--msb-turquoise-fonce); outline-offset: 1px; }

/* Grilles */
.grille { display: grid; gap: 0 1rem; }
.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--serree { gap: 0 0.5rem; }
.grille--adresse { grid-template-columns: 3fr 1fr 2fr; }
.grille--fiche { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.grille--fiche .carte h2 { margin-top: 0; font-size: 1.05rem; }

/* Choix segmentes (creneau, type de lieu, type de client) */
.segment { display: inline-flex; border: 1px solid var(--msb-bordure); border-radius: var(--msb-rayon); overflow: hidden; background: var(--msb-blanc); }
.segment label { margin: 0; padding: 0.6rem 1rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; }
.segment label + label { border-left: 1px solid var(--msb-bordure); }
.segment input { accent-color: var(--msb-turquoise-fonce); }
.segment label:has(input:checked) { background: var(--msb-turquoise); color: var(--msb-noir); }
.segment--large { margin-bottom: 0.5rem; }
.segment--discret { margin-top: 0.75rem; }
.segment--discret label { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* =====================================================================
   Saisie rapide
   ===================================================================== */
.saisie { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.bloc { background: var(--msb-surface); border-radius: var(--msb-rayon); padding: 1.25rem 1.5rem 1.5rem; margin-bottom: 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.bloc h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.25rem; font-size: 1.2rem; }
.bloc__num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
             background: var(--msb-turquoise); color: var(--msb-noir); font-size: 0.95rem; }
.sous-bloc { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--msb-bordure); }
.sous-bloc__entete { display: flex; justify-content: space-between; align-items: baseline; }
.sous-bloc__entete .label { margin-top: 0; }

.choix-formules { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.formule { margin: 0; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 2px solid var(--msb-bordure);
           border-radius: var(--msb-rayon); cursor: pointer; font-weight: 400; position: relative; }
.formule input { position: absolute; opacity: 0; }
.formule__nom { font-family: var(--msb-police-titre); font-weight: 700; }
.formule__prix { color: var(--msb-texte-doux); }
.formule:has(input:checked) { border-color: var(--msb-turquoise-fonce); background: #E9FBF9; }
.formule:has(input:focus-visible) { outline: 2px solid var(--msb-turquoise-fonce); outline-offset: 2px; }
.formule--aucune { justify-content: center; color: var(--msb-texte-doux); }

.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem; }
.option { margin: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem;
          padding: 0.55rem 0.75rem; border: 1px solid var(--msb-bordure); border-radius: var(--msb-rayon); font-weight: 400; cursor: pointer; }
.option input { accent-color: var(--msb-turquoise-fonce); }
.option__prix { color: var(--msb-texte-doux); font-size: 0.9rem; }
.option:has(input:checked) { border-color: var(--msb-turquoise-fonce); background: #E9FBF9; }
.option--remise { border-style: dashed; }

.recherche { position: relative; }
.recherche__resultats { position: absolute; z-index: 10; left: 0; right: 0; margin: 0.25rem 0 0; padding: 0; list-style: none;
                        background: var(--msb-blanc); border: 1px solid var(--msb-bordure); border-radius: var(--msb-rayon);
                        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); max-height: 320px; overflow-y: auto; }
.recherche__resultats li { padding: 0.6rem 0.9rem; cursor: pointer; }
.recherche__resultats li + li { border-top: 1px solid var(--msb-fond); }
.recherche__resultats li[data-i]:hover { background: #E9FBF9; }
.client-choisi { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; margin-top: 0.5rem;
                 border-left: 4px solid var(--msb-turquoise); background: #E9FBF9; border-radius: var(--msb-rayon); }

.saisie__cote { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.panneau { background: var(--msb-surface); border-radius: var(--msb-rayon); padding: 1rem 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.panneau h3 { margin: 0 0 0.75rem; font-size: 1rem; }

.dispo__ligne { display: flex; justify-content: space-between; padding: 0.45rem 0.7rem; border-radius: 6px; margin-bottom: 0.35rem; font-size: 0.9rem; }
.dispo__ligne--libre { background: #E3F8F5; }
.dispo__ligne--partiel { background: #FFF4DB; }
.dispo__ligne--complet { background: var(--msb-erreur-fond); color: var(--msb-erreur); }
.dispo__alerte { padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; border-radius: 6px; background: var(--msb-erreur-fond); color: var(--msb-erreur); font-weight: 600; }
.dispo__titre { margin: 0.9rem 0 0.3rem; font-weight: 600; font-size: 0.85rem; }
.dispo__liste { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.dispo__liste li { margin-bottom: 0.3rem; }

.recap { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.recap td { padding: 0.3rem 0; }
.recap .total td { padding-top: 0.6rem; border-top: 2px solid var(--msb-noir); font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.1rem; }

/* =====================================================================
   Tableaux, badges, fiche
   ===================================================================== */
.carte--table { padding: 0; overflow-x: auto; margin-bottom: 1rem; }
.carte--table > .aide { padding: 0 1.25rem 1rem; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--msb-texte-doux);
              padding: 0.8rem 1.25rem; border-bottom: 2px solid var(--msb-fond); }
.tableau td { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--msb-fond); }
.tableau tfoot td { border-bottom: none; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.tableau tfoot .total td { font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.1rem; border-top: 2px solid var(--msb-noir); }
.tableau .cliquable { cursor: pointer; }
.tableau .cliquable:hover { background: #F4FBFA; }
.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vide { text-align: center; padding: 3rem 2rem; }

.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--msb-fond); white-space: nowrap; }
.badge--grand { font-size: 0.95rem; padding: 0.4rem 0.9rem; }
.badge--demande, .badge--devis_envoye { background: #FFF4DB; color: #7A5A00; }
.badge--devis_signe, .badge--confirme, .badge--template_valide, .badge--pret { background: #E3F8F5; color: #0F5E57; }
.badge--livre, .badge--repris, .badge--photos_livrees, .badge--clos { background: #E8EDF3; color: #34495E; }
.badge--expire, .badge--annule { background: #EEEEEE; color: #666; }
.badge--litige { background: var(--msb-erreur-fond); color: var(--msb-erreur); }

/* =====================================================================
   Tablette et telephone
   ===================================================================== */
@media (max-width: 1000px) {
    .saisie { grid-template-columns: 1fr; }
    .saisie__cote { position: static; order: -1; }
    .grille--fiche { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .grille--2, .grille--3, .grille--4, .grille--adresse { grid-template-columns: 1fr; }
    .entete { flex-wrap: wrap; gap: 0.5rem; }
    .entete__nav { margin-left: 0; }
    .contenu { padding: 1rem; }
    .bloc { padding: 1rem; }
}