/* =====================================================================
   Sens & Santé — Gestion des cabinets
   Palette reprise du site www.etrerelie.be :
   - Bleu foncé  #303a4d (titres, menu, texte principal)
   - Beige rosé  #b89888 (accent)
   - Gris        #676c77 (texte secondaire)
   - Fond clair  #f1f2f8 et bordures #e1e4eb
   L'information n'est jamais donnée uniquement par la couleur :
   chaque état est écrit en toutes lettres.
   ===================================================================== */

:root {
    --bleu:     #303a4d;
    --accent:   #b89888;
    --gris:     #676c77;
    --fond:     #f1f2f8;
    --bordure:  #e1e4eb;
    --blanc:    #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    color: #000000;
    background: var(--fond);
}

/* --- En-tête --- */
.entete {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--blanc);
    border-bottom: 3px solid var(--accent);
}
.logo { height: 60px; width: auto; }
.site-nom { font-size: 26px; font-weight: bold; color: var(--bleu); }
.site-sous { font-size: 14px; color: var(--gris); }

/* --- Menu --- */
.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px;
    background: var(--bleu);
}
.menu a {
    color: var(--blanc);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
}
.menu a:hover { background: var(--gris); }
.menu a.actif { background: var(--accent); color: var(--bleu); font-weight: bold; }

/* --- Contenu --- */
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { color: var(--bleu); font-size: 28px; margin: 10px 0 20px; }
h2 { color: var(--bleu); font-size: 20px; margin: 26px 0 10px; }
h3 { color: var(--gris); font-size: 17px; }
a { color: var(--bleu); }

.message {
    background: var(--blanc);
    border: 1px solid var(--accent);
    border-left: 6px solid var(--accent);
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 6px;
}

/* --- Blocs et formulaires --- */
.bloc {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
label { display: block; margin: 10px 0 4px; color: var(--bleu); font-weight: bold; }
input[type=text], input[type=email], input[type=password], input[type=date],
select, textarea {
    width: 100%;
    max-width: 420px;
    padding: 8px;
    border: 1px solid var(--gris);
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    background: var(--blanc);
}
textarea { max-width: 620px; min-height: 90px; }
button, .bouton {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 18px;
    background: var(--bleu);
    color: var(--blanc);
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .bouton:hover { background: var(--gris); }
button.secondaire { background: var(--blanc); color: var(--bleu); border: 1px solid var(--bleu); }

/* --- Tableaux --- */
table { width: 100%; border-collapse: collapse; background: var(--blanc); }
th, td {
    border: 1px solid var(--bordure);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}
th { background: var(--bleu); color: var(--blanc); font-weight: bold; }
tr:nth-child(even) td { background: var(--fond); }

/* États écrits en toutes lettres ; le fond reste discret. */
.etat-libre   { font-weight: bold; }
.etat-occupe  { color: var(--gris); }

.compteur {
    display: inline-block;
    background: var(--blanc);
    border: 2px solid var(--bleu);
    border-radius: 8px;
    padding: 14px 20px;
    margin: 6px 10px 6px 0;
    font-size: 17px;
}
.compteur strong { font-size: 26px; color: var(--bleu); }

/* --- Pied de page --- */
.pied {
    text-align: center;
    color: var(--gris);
    padding: 16px;
    border-top: 1px solid var(--bordure);
    background: var(--blanc);
}

/* --- Téléphone --- */
@media (max-width: 700px) {
    .entete { flex-direction: column; text-align: center; }
    main { padding: 12px 8px 30px; }
    table, thead, tbody, tr { display: block; }
    thead { display: none; }
    td { display: block; border: none; border-bottom: 1px solid var(--bordure); }
    td::before { content: attr(data-titre) ' : '; font-weight: bold; color: var(--bleu); }
    td.sans-titre::before { content: ''; }
    tr { border: 1px solid var(--bordure); margin-bottom: 10px; background: var(--blanc); }
}