/* LeLogo, feuille de style unique.
   Ecran lisible a distance pendant une consultation : gros caracteres pour ce
   qui compte, contraste eleve, aucune couleur porteuse de sens a elle seule. */

:root {
    --encre: #16202b;
    --encre-douce: #5a6b7c;
    --fond: #f4f6f8;
    --carte: #ffffff;
    --trait: #d9e0e7;
    --accent: #1f5c8b;
    --accent-clair: #e8f1f8;
    --vert: #1d7a4c;
    --vert-clair: #e6f4ec;
    --rouge: #b3261e;
    --rouge-clair: #fbeae9;
    --ambre: #8a6100;
    --ambre-clair: #fdf3dd;
    --rayon: 10px;
}

* { box-sizing: border-box; }

/* La place de l'ascenseur est reservee en permanence. Sans cela, une page qui
   defile rend 15 px de moins que les autres, et l'en-tete bascule sur deux
   lignes d'un ecran a l'autre sans qu'on comprenne pourquoi. */
html { scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--encre);
    background: var(--fond);
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- en-tete */
.entete {
    background: var(--carte);
    border-bottom: 1px solid var(--trait);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.marque {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.2px;
    padding: 14px 0;
    white-space: nowrap;
}

.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }

.menu a {
    padding: 16px 10px;
    text-decoration: none;
    color: var(--encre-douce);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.menu a:hover { color: var(--encre); background: var(--fond); }
.menu a.actif { color: var(--accent); border-bottom-color: var(--accent); }

.identite {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--encre-douce);
}

/* ------------------------------------------------------------------ corps */
main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }

h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -0.3px; }
h2 { font-size: 17px; margin: 28px 0 12px; }
.sous-titre { color: var(--encre-douce); margin: 0 0 24px; }

.carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 20px;
    margin-bottom: 16px;
    /* Un tableau plus large que la carte defile dans la carte. Le corps de la
       page ne defile jamais horizontalement, a aucune largeur d'ecran. */
    overflow-x: auto;
}

.grille { display: grid; gap: 16px; }
.grille.deux { grid-template-columns: 2fr 1fr; }
/* Sans min-width, une colonne de grille refuse de descendre sous la largeur
   de son contenu et pousse toute la page. */
.grille > * { min-width: 0; }
/* --------------------------------------------------------------------------
   Calendrier de la semaine

   Une grille de sept colonnes, une par jour, et une gouttiere d'heures a
   gauche. Les seances ne sont pas des cases de tableau mais des blocs places
   a la minute pres, en pourcentage de la hauteur de la journee : une seance de
   9h05 a 9h50 tombe donc au bon endroit sans qu'il faille une ligne de tableau
   pour chaque cas de figure.

   Les creneaux libres sont des boutons transparents places dessous. Un creneau
   pris est recouvert par son bloc, donc materiellement inatteignable : on ne
   peut pas cliquer sur une place deja occupee.
   -------------------------------------------------------------------------- */

.calendrier-cadre { overflow-x: auto; }

.calendrier {
    --heure-hauteur: 56px;
    display: grid;
    grid-template-columns: 52px repeat(7, minmax(104px, 1fr));
    min-width: 780px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--carte);
}

.calendrier .titre-jour {
    padding: 8px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--fond);
    border-bottom: 1px solid var(--trait);
    border-left: 1px solid var(--trait);
}

.calendrier .titre-heures {
    background: var(--fond);
    border-bottom: 1px solid var(--trait);
}

.calendrier .gouttiere {
    position: relative;
    background: var(--fond);
}

.calendrier .gouttiere .heure {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

/* La derniere heure ferme la journee : aucune ligne ne lui correspond, et la
   centrer sur le bord la ferait couper par le cadre. Elle se pose donc juste
   au-dessus. */
.calendrier .gouttiere .heure.derniere { transform: translateY(-100%); }

.colonne-jour {
    position: relative;
    border-left: 1px solid var(--trait);
    /* Un trait plein a chaque heure, un trait clair a la demie : on lit
       l'heure d'un coup d'oeil sans compter les lignes. */
    background-image:
        repeating-linear-gradient(to bottom, var(--trait) 0 1px,
                                  transparent 1px var(--heure-hauteur)),
        repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure-hauteur) / 2),
                                  var(--fond) calc(var(--heure-hauteur) / 2)
                                  calc(var(--heure-hauteur) / 2 + 1px),
                                  transparent calc(var(--heure-hauteur) / 2 + 1px)
                                  var(--heure-hauteur));
}

.calendrier .titre-jour.aujourdhui { background: var(--accent-clair); color: var(--accent); }
.calendrier .titre-jour.ferme { color: var(--encre-douce); }

/* Un jour ferme se voit d'un coup d'oeil : hachure legere, et aucun creneau
   libre a l'interieur puisqu'il ne s'y passe rien. */
.colonne-jour.ferme {
    background-image: repeating-linear-gradient(45deg, var(--fond) 0 6px,
                                                var(--carte) 6px 12px);
}

.creneau-libre {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.creneau-libre:hover { background: var(--accent-clair); }

.creneau-libre:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.bloc-seance {
    position: absolute;
    left: 3px;
    right: 3px;
    display: block;
    overflow: hidden;
    padding: 3px 5px;
    border-radius: 6px;
    border: 1px solid #bcd6e8;
    background: var(--accent-clair);
    color: var(--encre);
    font-size: 11px;
    line-height: 1.25;
    text-decoration: none;
}

.bloc-seance:hover { border-color: var(--accent); }
.bloc-seance.tiers-payant { background: var(--vert-clair); border-color: #bfe0cd; }
/* Une presence pointee est un fait acquis : trait plein a gauche. */
.bloc-seance.presente { border-left: 4px solid var(--vert); }
.bloc-seance.absente { opacity: 0.55; text-decoration: line-through; }
.bloc-seance .qui { font-weight: 600; display: block; }
.bloc-seance .quand { color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Deux fleches encadrant le mois : on avance et on recule sans passer par une
   liste deroulante. */
/* Zone de depot : on glisse le fichier dessus, ou on clique. Le champ de
   fichier reste dessous et fait le travail ; l'habillage ne fait que le rendre
   visible et accueillant. */
.zone-depot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 18px;
    border: 2px dashed var(--trait);
    border-radius: var(--rayon);
    background: var(--fond);
    cursor: pointer;
    text-align: center;
}

.zone-depot:hover, .zone-depot.survol { border-color: var(--accent); background: var(--accent-clair); }
.zone-depot.rempli { border-style: solid; border-color: var(--vert); background: var(--vert-clair); }
.zone-depot .titre-depot { font-weight: 600; }
.zone-depot .nom-fichier { font-size: 13px; margin-top: 6px; font-weight: 600; }
.zone-depot input[type=file] { display: none; }

.navigation-mois { align-items: center; gap: 10px; }
.navigation-mois .bouton { padding: 6px 12px; font-size: 16px; line-height: 1; }
.navigation-mois h2 { white-space: nowrap; }

/* Ligne modifiable : lecture d'abord, correction ensuite.

   Une ligne de facture ou de comptabilite s'affiche comme du texte. Le bouton
   « Modifier » ouvre les champs et devient « Enregistrer ». Sans cela, une
   dizaine de cases de saisie s'offrent en permanence a la faute de frappe, et
   l'ecran ressemble a un formulaire alors qu'on vient surtout y lire. */
.ligne-modifiable .en-lecture { display: block; }
.ligne-modifiable .en-saisie { display: none; }
.ligne-modifiable.ouverte .en-lecture { display: none; }
.ligne-modifiable.ouverte .en-saisie { display: block; }
.ligne-modifiable.ouverte { background: var(--accent-clair); }
.ligne-modifiable .bouton.enregistrer { display: none; }
.ligne-modifiable.ouverte .bouton.enregistrer { display: inline-block; }
.ligne-modifiable.ouverte .bouton.ouvrir { display: none; }

/* Dans un tableau, les deux boutons d'une ligne tiennent cote a cote et ne
   s'etirent pas : sinon chaque ligne prend deux fois sa hauteur. */
td .rangee { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
td .rangee .bouton { white-space: nowrap; }
table input[type=text], table input[type=date], table select { width: auto; }

.en-ordre { color: var(--vert); font-size: 13px; white-space: nowrap; }

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--encre-douce);
}

.legende span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: -1px;
}

.legende .tp::before { background: var(--vert-clair); border: 1px solid #bfe0cd; }
.legende .ordinaire::before { background: var(--accent-clair); border: 1px solid #bcd6e8; }
.legende .libre::before { background: var(--carte); border: 1px solid var(--trait); }
.legende .pointee::before { background: var(--carte); border: 1px solid var(--trait);
                            border-left: 4px solid var(--vert); }

@media (max-width: 900px) { .grille.deux { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- patient du jour */
/* Le patient du moment occupe deux colonnes : a gauche qui il est et les deux
   boutons, a droite le decompte et les reperes de facturation. L'ancienne
   version empilait tout au centre et laissait la moitie de la carte vide. */
.patient-courant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    gap: 28px;
    align-items: start;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 28px;
    margin-bottom: 16px;
}

.patient-details { border-left: 1px solid var(--trait); padding-left: 24px; }

.repere { width: 100%; }
.repere td { padding: 4px 0; border: 0; font-size: 14px; }
.repere td:first-child { color: var(--encre-douce); width: 45%; }
.repere td:last-child { text-align: right; font-weight: 600; }

/* Une date en toutes lettres commence par un nom de jour en minuscule : la
   majuscule se pose ici plutot que dans le texte, qui sert aussi ailleurs.
   `::first-letter` ne s'applique qu'a un bloc, d'ou le display. */
.capitale { display: inline-block; }
.capitale::first-letter { text-transform: uppercase; }

/* La ligne du jour, dans le releve du mois. */
tr.appuyee td { background: var(--accent-clair); font-weight: 600; }

.patient-courant.alerte { border-color: var(--accent); border-width: 2px; }

.etiquette {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--encre-douce);
    font-weight: 600;
}

.nom-patient {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin: 6px 0 2px;
}

.creneau { color: var(--encre-douce); font-size: 16px; }

.decompte {
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    margin: 8px 0 4px;
}

/* La fin d'une seance n'est pas une alerte : c'est l'heure. Le texte se fait
   simplement plus petit et plus calme, sans rouge. */
.decompte.fini,
.decompte:not([data-secondes]) { font-size: 22px; letter-spacing: 0; color: var(--encre-douce); }

.boutons-pointage { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid var(--trait);
    background: var(--carte);
    color: var(--encre);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.bouton:hover { background: var(--fond); }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.principal:hover { background: #17496e; }
.bouton.present { background: var(--vert); border-color: var(--vert); color: #fff; }
.bouton.present:hover { background: #17603c; }
.bouton.absent { background: var(--carte); border-color: var(--rouge); color: var(--rouge); }
.bouton.absent:hover { background: var(--rouge-clair); }
.bouton.grand { padding: 16px 30px; font-size: 17px; }
.bouton:disabled { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------------- tableaux */
table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--encre-douce);
    padding: 8px 10px;
    border-bottom: 1px solid var(--trait);
    white-space: nowrap;
}

td { padding: 10px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.faible td { color: var(--encre-douce); }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- etiquettes */
.pastille {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pastille.presente { background: var(--vert-clair); color: var(--vert); }
.pastille.absente { background: var(--rouge-clair); color: var(--rouge); }
.pastille.prevue { background: var(--fond); color: var(--encre-douce); }
.pastille.tp { background: var(--accent-clair); color: var(--accent); }
.pastille.alerte { background: var(--ambre-clair); color: var(--ambre); }

/* ---------------------------------------------------------------- messages */
.message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--trait);
    background: var(--carte);
}

.message.succes { background: var(--vert-clair); border-color: #bfe0cd; color: var(--vert); }
.message.erreur { background: var(--rouge-clair); border-color: #f0c8c5; color: var(--rouge); }
.message.attention { background: var(--ambre-clair); border-color: #ecd9a6; color: var(--ambre); }

/* ------------------------------------------------------------------ formes */
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="time"], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--trait);
    border-radius: 7px;
    font-size: 15px;
    font-family: inherit;
    background: var(--carte);
    color: var(--encre);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.champ { margin-bottom: 14px; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }

.case { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.case input { width: auto; }
.case label { margin: 0; font-weight: 500; }

fieldset { border: 1px solid var(--trait); border-radius: 8px; padding: 14px; margin: 0 0 16px; }
legend { font-weight: 600; font-size: 13px; padding: 0 6px; }

/* ---------------------------------------------------------------- connexion */
.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.boite-connexion { width: 100%; max-width: 380px; }

/* ------------------------------------------------------------------ divers */
.discret { color: var(--encre-douce); font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.rangee { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre-deux { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vide { padding: 36px 20px; text-align: center; color: var(--encre-douce); }

.secret-affiche {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 20px;
    letter-spacing: 1px;
    background: var(--carte);
    border: 1px dashed var(--accent);
    border-radius: 8px;
    padding: 12px 16px;
    display: inline-block;
    margin-top: 8px;
}

/* ------------------------------------------------------------ petits ecrans */
/* Le cabinet travaille sur deux Mac, mais l'ecran doit rester lisible si
   quelqu'un ouvre la page sur un portable etroit ou une fenetre reduite. */
@media (max-width: 640px) {
    main { padding: 16px 12px 48px; }
    /* En etroit, l'en-tete s'empile au lieu de casser le menu en quatre lignes :
       marque, puis menu qui defile horizontalement, puis identite. */
    /* flex-wrap doit repasser a nowrap : en colonne, un conteneur qui enroule
       calcule sa largeur sur l'element le plus large et etire tous les autres
       dessus, ce qui pousse l'en-tete hors de l'ecran. */
    .entete {
        padding: 0 12px;
        gap: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    /* Le nom du cabinet est saisi par le client : il peut etre long, donc il
       doit pouvoir revenir a la ligne plutot que pousser la page. */
    .marque { padding: 12px 0 4px; font-size: 16px; white-space: normal; }
    .menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        border-top: 1px solid var(--trait);
    }
    .menu a { padding: 12px 10px; }
    .identite {
        justify-content: space-between;
        padding: 8px 0;
        border-top: 1px solid var(--trait);
    }
    th { white-space: normal; }
    .colonnes { grid-template-columns: 1fr; }
    .patient-courant { padding: 20px; grid-template-columns: 1fr; gap: 18px; }
    .patient-details { border-left: 0; border-top: 1px solid var(--trait);
                       padding-left: 0; padding-top: 16px; }
    .nom-patient { font-size: 26px; }
    .decompte { font-size: 44px; letter-spacing: -1px; }
    .boutons-pointage .bouton.grand { flex: 1; }
    .entre-deux { flex-direction: column; align-items: stretch; }
    /* Le calendrier garde sa largeur et defile dans son cadre : le comprimer
       rendrait les noms illisibles, et c'est justement ce qu'on voulait
       corriger. */
    .calendrier { --heure-hauteur: 48px; }
}

@media print {
    .entete, .boutons-pointage, .bouton, .sans-impression { display: none !important; }
    .creneau-libre { display: none !important; }
    .calendrier-cadre { overflow: visible; }
    body { background: #fff; }
    .carte { border: none; padding: 0; }
}