/* =========================================================================
   ROYAUME — socle visuel
   =========================================================================

   Ce fichier n'est pas un « design system » : c'est le minimum cohérent dont
   les écrans du chantier 1 ont besoin. Il grandira à partir de besoins réels,
   pas d'un catalogue de composants écrit à l'avance.

   INTENTION VISUELLE

   Élégance, calme, maîtrise. Un institut montre ses écrans à ses clientes ;
   l'outil participe à l'image de l'établissement, au même titre que sa
   décoration.

   Écarté volontairement : le rose bonbon, les paillettes, les couronnes — des
   clichés qui vieillissent en trois ans et qui ne ressemblent à aucun institut
   soigné. Écarté aussi : le tableau de bord gris impersonnel, qui a l'air d'un
   logiciel de comptabilité.

   Retenu : un vert profond d'eucalyptus, des neutres chauds, et un bronze
   employé avec parcimonie. Une palette qui restera crédible dans dix ans, et
   qui ne présume ni du genre de la personne qui regarde l'écran.

   ========================================================================= */

:root {
    /* --- Teintes ------------------------------------------------------- */
    --fond: #F6F4F1;
    --surface: #FFFFFF;
    --surface-douce: #FCFBF9;
    --surface-enfoncee: #EFEBE6;

    --encre: #1E2422;
    --encre-douce: #4A544F;
    --encre-tenue: #7A837E;

    --bordure: #E2DCD5;
    --bordure-marquee: #CFC7BE;

    --primaire: #2F4A42;
    --primaire-clair: #3E6055;
    --primaire-voile: #E6EDEA;
    --primaire-encre: #FFFFFF;

    --bronze: #A6854E;
    --bronze-voile: #F5EEE3;

    --succes: #2F6B4F;
    --succes-voile: #E6F0EA;
    --alerte: #8A5A1E;
    --alerte-voile: #FBF1E2;
    --danger: #8C3A38;
    --danger-voile: #F8E9E8;

    /* --- Rythme -------------------------------------------------------- */
    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;
    --e7: 3rem;

    --arrondi: 10px;
    --arrondi-petit: 6px;
    --arrondi-grand: 16px;

    --ombre-1: 0 1px 2px rgba(30, 36, 34, .05), 0 1px 3px rgba(30, 36, 34, .04);
    --ombre-2: 0 2px 6px rgba(30, 36, 34, .07), 0 8px 24px rgba(30, 36, 34, .06);
    --ombre-3: 0 8px 20px rgba(30, 36, 34, .10), 0 24px 60px rgba(30, 36, 34, .12);

    /* Aucune police distante : la politique de contenu interdit les hôtes
       externes, et une police qui met deux secondes à arriver fait clignoter
       toute l'interface. */
    --police: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-titre: ui-serif, Georgia, "Times New Roman", serif;
    --police-chiffres: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* Cibles tactiles : 44 px au minimum. En institut, on saisit debout, entre
       deux clientes, parfois avec les mains occupées. */
    --cible: 44px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e3); line-height: 1.25; font-weight: 600; }
h1 { font-family: var(--police-titre); font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 var(--e3); }

a { color: var(--primaire); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Le focus reste visible partout. Le retirer « parce que c'est plus joli »
   rend l'application inutilisable au clavier — et le clavier est le moyen le
   plus rapide de saisir un rendez-vous. */
:focus-visible {
    outline: 2px solid var(--primaire);
    outline-offset: 2px;
    border-radius: var(--arrondi-petit);
}

/* ---------------------------------------------------------------- Structure */

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

.rail {
    width: 232px;
    flex: 0 0 232px;
    background: var(--surface);
    border-right: 1px solid var(--bordure);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.rail__marque {
    padding: var(--e5) var(--e5) var(--e4);
    border-bottom: 1px solid var(--bordure);
}

.rail__nom {
    font-family: var(--police-titre);
    font-size: 1.35rem;
    letter-spacing: .04em;
    color: var(--primaire);
    display: block;
    text-decoration: none;
}

.rail__institut {
    display: block;
    font-size: .78rem;
    color: var(--encre-tenue);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail__nav { padding: var(--e3); flex: 1; overflow-y: auto; }

.rail__lien {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: var(--cible);
    padding: 0 var(--e3);
    margin-bottom: 2px;
    border-radius: var(--arrondi);
    color: var(--encre-douce);
    text-decoration: none;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.rail__lien:hover { background: var(--surface-enfoncee); color: var(--encre); }

.rail__lien.actif {
    background: var(--primaire-voile);
    color: var(--primaire);
    font-weight: 600;
}

.rail__lien svg { width: 19px; height: 19px; flex: 0 0 19px; }

.rail__pied { padding: var(--e3); border-top: 1px solid var(--bordure); }

.rail__compte {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e2) var(--e3);
    font-size: .85rem;
}

.rail__compte strong { display: block; font-size: .9rem; }
.rail__compte span { color: var(--encre-tenue); font-size: .78rem; }

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

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e5) var(--e6) var(--e4);
    flex-wrap: wrap;
}

.entete__titres { min-width: 0; }
.entete__titres p { margin: 0; color: var(--encre-tenue); font-size: .9rem; }
.entete__actions { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }

.contenu { padding: 0 var(--e6) var(--e7); flex: 1; min-width: 0; }

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

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: var(--cible);
    padding: 0 var(--e4);
    border: 1px solid transparent;
    border-radius: var(--arrondi);
    background: var(--surface);
    color: var(--encre);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

.bouton--principal { background: var(--primaire); color: var(--primaire-encre); }
.bouton--principal:hover:not(:disabled) { background: var(--primaire-clair); }

.bouton--contour { border-color: var(--bordure-marquee); }
.bouton--contour:hover:not(:disabled) { background: var(--surface-enfoncee); }

.bouton--discret { background: transparent; color: var(--encre-douce); }
.bouton--discret:hover:not(:disabled) { background: var(--surface-enfoncee); color: var(--encre); }

.bouton--danger { background: var(--danger); color: #fff; }
.bouton--danger:hover:not(:disabled) { filter: brightness(1.08); }

.bouton--petit { min-height: 34px; padding: 0 var(--e3); font-size: .86rem; }
.bouton--icone { padding: 0; width: var(--cible); }

/* ------------------------------------------------------------------ Champs */

.champ { display: block; margin-bottom: var(--e4); }
.champ__etiquette { display: block; font-size: .85rem; font-weight: 550; color: var(--encre-douce); margin-bottom: var(--e1); }
.champ__aide { display: block; font-size: .8rem; color: var(--encre-tenue); margin-top: var(--e1); }

.saisie, .selection, .zone-texte {
    width: 100%;
    min-height: var(--cible);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--bordure-marquee);
    border-radius: var(--arrondi);
    background: var(--surface);
    color: var(--encre);
    font: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.saisie:focus, .selection:focus, .zone-texte:focus {
    outline: none;
    border-color: var(--primaire);
    box-shadow: 0 0 0 3px var(--primaire-voile);
}

.zone-texte { min-height: 88px; resize: vertical; }

.champ--erreur .saisie, .champ--erreur .selection { border-color: var(--danger); }

.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 var(--e4); }

/* ------------------------------------------------------------------ Cartes */

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-grand);
    box-shadow: var(--ombre-1);
}

.carte__entete {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--bordure);
}

.carte__corps { padding: var(--e5); }
.carte__corps--serre { padding: var(--e4); }

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

.tableau { width: 100%; border-collapse: collapse; }

.tableau th {
    text-align: left;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--encre-tenue);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}

.tableau td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: var(--surface-douce); }
.tableau__actions { text-align: right; white-space: nowrap; }

.enveloppe-tableau { overflow-x: auto; }

/* ------------------------------------------------------------------ Pastilles */

.pastille {
    display: inline-flex; align-items: center; gap: var(--e1);
    padding: 2px var(--e2);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--surface-enfoncee);
    color: var(--encre-douce);
    white-space: nowrap;
}

/* Chaque pastille porte un TEXTE : la couleur ne dit jamais seule ce qui se
   passe. Un écran délavé ou un œil daltonien ne doivent pas faire perdre
   l'information. */
.pastille--succes { background: var(--succes-voile); color: var(--succes); }
.pastille--alerte { background: var(--alerte-voile); color: var(--alerte); }
.pastille--danger { background: var(--danger-voile); color: var(--danger); }
.pastille--primaire { background: var(--primaire-voile); color: var(--primaire); }
.pastille--bronze { background: var(--bronze-voile); color: var(--bronze); }

/* ------------------------------------------------------------------ Messages */

.message {
    display: flex; gap: var(--e3); align-items: flex-start;
    padding: var(--e3) var(--e4);
    border-radius: var(--arrondi);
    margin-bottom: var(--e4);
    font-size: .92rem;
    border: 1px solid transparent;
}

.message--erreur { background: var(--danger-voile); color: var(--danger); border-color: rgba(140,58,56,.18); }
.message--succes { background: var(--succes-voile); color: var(--succes); border-color: rgba(47,107,79,.18); }
.message--info { background: var(--primaire-voile); color: var(--primaire); border-color: rgba(47,74,66,.15); }
.message--alerte { background: var(--alerte-voile); color: var(--alerte); border-color: rgba(138,90,30,.18); }

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

.vide { text-align: center; padding: var(--e7) var(--e5); color: var(--encre-tenue); }
.vide h3 { color: var(--encre-douce); }
.vide p { max-width: 42ch; margin-inline: auto; }

/* ------------------------------------------------------------------ Panneau */

.voile {
    position: fixed; inset: 0;
    background: rgba(30, 36, 34, .34);
    z-index: 40;
    animation: apparaitre .14s ease;
}

.panneau {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(480px, 100vw);
    background: var(--surface);
    box-shadow: var(--ombre-3);
    z-index: 41;
    display: flex; flex-direction: column;
    animation: glisser .18s cubic-bezier(.2,.7,.3,1);
}

.panneau__entete {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3);
    padding: var(--e5) var(--e5) var(--e4);
    border-bottom: 1px solid var(--bordure);
}

.panneau__corps { padding: var(--e5); overflow-y: auto; flex: 1; }
.panneau__pied {
    padding: var(--e4) var(--e5);
    border-top: 1px solid var(--bordure);
    display: flex; gap: var(--e2); justify-content: flex-end; flex-wrap: wrap;
}

@keyframes apparaitre { from { opacity: 0 } to { opacity: 1 } }
@keyframes glisser { from { transform: translateX(18px); opacity: .6 } to { transform: none; opacity: 1 } }

/* ------------------------------------------------------------------ Divers */

.chargement {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--bordure-marquee);
    border-top-color: var(--primaire);
    border-radius: 50%;
    animation: tourner .7s linear infinite;
}

@keyframes tourner { to { transform: rotate(360deg) } }

.pastille-couleur { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 12px; }

.jeton {
    display: inline-flex; align-items: center; gap: var(--e2);
    padding: var(--e1) var(--e2) var(--e1) var(--e1);
    border-radius: 999px;
    background: var(--surface-enfoncee);
    font-size: .84rem;
}

.initiales {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    font-size: .76rem; font-weight: 700; color: #fff;
    flex: 0 0 30px;
    background: var(--primaire);
}

.discret { color: var(--encre-tenue); }
.chiffres { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rien { color: var(--encre-tenue); }

.pile { display: flex; flex-direction: column; gap: var(--e4); }
.rangee { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.rangee--espacee { justify-content: space-between; }
.pousse { margin-left: auto; }

.invisible {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- Écrans étroits */

@media (max-width: 900px) {
    .cadre { flex-direction: column; }

    .rail {
        width: auto; flex: none; height: auto; position: static;
        flex-direction: row; align-items: center;
        border-right: none; border-bottom: 1px solid var(--bordure);
        overflow-x: auto;
    }

    .rail__marque { border-bottom: none; padding: var(--e3) var(--e4); }
    .rail__institut { display: none; }
    .rail__nav { display: flex; padding: var(--e2); gap: var(--e1); }
    .rail__lien { white-space: nowrap; }
    .rail__lien span { display: none; }
    .rail__pied { border-top: none; }
    .rail__compte span { display: none; }

    .entete, .contenu { padding-inline: var(--e4); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ */
/* Impression du document émis                                         */
/*                                                                     */
/* Pas de bibliothèque PDF. Le navigateur sait déjà paginer et exporter */
/* en PDF ; une dépendance de plus ne produirait pas un meilleur        */
/* document, mais un second moteur de rendu à maintenir — et une        */
/* divergence possible entre ce qui est vu à l'écran et ce qui est      */
/* imprimé. Ici, c'est littéralement la même page.                      */
/* ------------------------------------------------------------------ */

@media print {
    /* Rien de l'application ne s'imprime : ni navigation, ni boutons,
       ni messages. Une facture avec un rail de menu au bord n'est pas
       un document. */
    .rail,
    .entete__actions,
    .alerte,
    .bouton,
    .ne-pas-imprimer {
        display: none !important;
    }

    html, body, .cadre, .contenu {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .carte {
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 1.2rem 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }

    /* Un tableau coupé en deux pages avec l'en-tête d'un côté et les
       montants de l'autre est illisible. */
    table { page-break-inside: avoid; }
    tr    { page-break-inside: avoid; }

    .enveloppe-tableau {
        overflow: visible !important;
    }

    /* La ventilation de TVA et les totaux restent avec le corps du
       document plutôt que de partir seuls sur une seconde page. */
    #document-totaux { page-break-before: avoid; }

    a[href]::after { content: ""; }

    @page { margin: 16mm; }
}