/* ==========================================================================
   Agendas médicaux — feuille de style
   ========================================================================== */
:root {
  --fond: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --texte: #0f172a;
  --texte-2: #334155;
  --discret: #64748b;
  --bord: #e2e8f0;
  --bord-fort: #cbd5e1;
  --primaire: #1d4ed8;
  --primaire-fonce: #1e3a8a;
  --primaire-clair: #e0e9ff;
  --accent: #0f9d74;          /* disponibilités, actions de réservation */
  --accent-clair: #dcf5ec;
  --danger: #c2410c;
  --danger-clair: #fff1e8;
  --succes: #15803d;
  --succes-clair: #e3f7ea;
  --attention: #b45309;
  --menu: #0f1f3d;
  --menu-texte: #c7d2e8;
  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --ombre-haute: 0 12px 32px rgba(15, 23, 42, .16);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       background: var(--fond); color: var(--texte); }
a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
small, .discret { color: var(--discret); }
[hidden] { display: none !important; }
svg.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- formulaires */
label { display: block; margin-bottom: .85rem; font-weight: 600; font-size: .9rem; color: var(--texte-2); }
label small { font-weight: 400; }
input, select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .75rem; font: inherit; font-weight: 400;
  color: var(--texte); background: var(--surface); border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit);
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--primaire-clair); border-color: var(--primaire); }
input[type=color] { padding: 2px; height: 40px; width: 56px; }
input[type=checkbox], input[type=radio] { width: auto; display: inline-block; margin: 0; accent-color: var(--primaire); }
label.case { display: flex; gap: .6rem; align-items: center; font-weight: 400; cursor: pointer; color: var(--texte); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.trois { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 0 1rem; }
fieldset { border: 1px solid var(--bord); border-radius: var(--rayon-petit); margin: 0 0 .9rem; padding: .75rem 1rem 0; }
legend { font-weight: 700; padding: 0 .3rem; font-size: .9rem; }

/* ---------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem 1rem;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte);
  font: inherit; font-weight: 600; font-size: .92rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bouton:hover { background: var(--surface-2); text-decoration: none; }
.bouton.plein { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.bouton.plein:hover { background: var(--primaire-fonce); }
.bouton.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.accent:hover { filter: brightness(.93); }
.bouton.danger { color: var(--danger); border-color: #f5c9b3; }
.bouton.petit { padding: .3rem .65rem; font-size: .85rem; }
.bouton.large { width: 100%; padding: .75rem 1rem; font-size: 1rem; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--primaire); cursor: pointer; }
.lien:hover { text-decoration: underline; }
.lien.danger { color: var(--danger); }

/* ---------------------------------------------------------------- éléments */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.5rem; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 1rem; }
.carte.etroite { max-width: 460px; margin: 2.5rem auto; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.entete h1, .entete h2 { margin: 0; }
.flash { padding: .75rem 1rem; border-radius: var(--rayon-petit); margin-bottom: 1rem; background: var(--primaire-clair); color: var(--primaire-fonce); }
.flash.erreur { background: var(--danger-clair); color: var(--danger); }
.flash.succes { background: var(--succes-clair); color: var(--succes); }
.etiquette { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .55rem; border-radius: 99px; background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--bord); }
.etiquette.vert { background: var(--succes-clair); color: var(--succes); border-color: transparent; }
.etiquette.rouge { background: var(--danger-clair); color: var(--danger); border-color: transparent; }
.etiquette.bleu { background: var(--primaire-clair); color: var(--primaire-fonce); border-color: transparent; }
.etiquette.gris { background: #eef1f5; color: var(--discret); border-color: transparent; }
.pastille { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; vertical-align: 0; flex: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
          background: var(--primaire-clair); color: var(--primaire-fonce); font-weight: 700; letter-spacing: .02em; }
.avatar.grand { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar.petit { width: 30px; height: 30px; font-size: .78rem; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--discret); font-weight: 700; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau.compact td { font-size: .88rem; padding: .4rem .5rem; }
.droite { text-align: right; white-space: nowrap; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filtres input, .filtres select { width: auto; flex: 1 1 180px; margin: 0; }
.niveaux { padding-left: 1.2rem; color: var(--discret); }
.vide { text-align: center; padding: 2rem 1rem; color: var(--discret); }

/* ---------------------------------------------------------------- espace professionnel */
.app-pro { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.menu { background: var(--menu); color: var(--menu-texte); display: flex; flex-direction: column; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; }
.menu .logo { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 800; font-size: 1.05rem; padding: .4rem .6rem 1.1rem; }
.menu .logo span.marque { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); align-items: center; justify-content: center; }
.menu nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.menu nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--rayon-petit); color: var(--menu-texte); font-weight: 500; font-size: .93rem; }
.menu nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.menu nav a.actif { background: rgba(255,255,255,.12); color: #fff; }
.menu .titre-groupe { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #7d8bab; padding: 1rem .7rem .35rem; }
.menu .moi { border-top: 1px solid rgba(255,255,255,.1); padding: .9rem .6rem 0; font-size: .88rem; }
.menu .moi strong { color: #fff; display: block; }
.menu .moi a, .menu .moi .lien { color: var(--menu-texte); font-size: .85rem; }
.menu .moi form { display: inline; margin: 0; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.barre-haut { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 20; }
.barre-haut .bouton-menu { display: none; }
.recherche-globale { position: relative; flex: 1; max-width: 460px; }
.recherche-globale svg.icone { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--discret); }
.recherche-globale input { margin: 0; padding-left: 2.3rem; background: var(--surface-2); }
.contenu { padding: 1.5rem; max-width: 1200px; width: 100%; }
.contenu.large { max-width: none; }

/* liste déroulante de suggestions (patients) */
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--bord);
               border-radius: var(--rayon-petit); box-shadow: var(--ombre-haute); z-index: 50; max-height: 340px; overflow-y: auto; }
.suggestions a, .suggestions button { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .75rem; text-align: left;
               background: none; border: 0; font: inherit; color: var(--texte); cursor: pointer; }
.suggestions a:hover, .suggestions button:hover, .suggestions .actif { background: var(--surface-2); text-decoration: none; }
.suggestions small { display: block; }
.suggestions .ajouter { color: var(--primaire); font-weight: 600; border-top: 1px solid var(--bord); }

/* ---------------------------------------------------------------- agenda */
.agenda-barre { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.agenda-barre .titre-date { font-size: 1.15rem; font-weight: 700; margin: 0 .5rem; text-transform: capitalize; min-width: 14ch; }
.agenda-barre input[type=date] { width: auto; margin: 0; padding: .45rem .6rem; }
.groupe-boutons { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); overflow: hidden; }
.groupe-boutons button { border: 0; background: var(--surface); padding: .5rem .85rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--texte-2); }
.groupe-boutons button + button { border-left: 1px solid var(--bord-fort); }
.groupe-boutons button.actif { background: var(--primaire); color: #fff; }
.espace { flex: 1; }
.puces-medecins { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.puce { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--bord-fort); border-radius: 99px;
        background: var(--surface); font-size: .86rem; cursor: pointer; user-select: none; color: var(--texte-2); }
.puce.active { border-color: var(--couleur, var(--primaire)); background: color-mix(in srgb, var(--couleur, var(--primaire)) 12%, white); color: var(--texte); font-weight: 600; }
.puce .pastille { margin: 0; }
.bandeau-patient { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; margin-bottom: 1rem; border-radius: var(--rayon-petit);
                   background: var(--accent-clair); color: #065f46; font-weight: 500; }
.colonnes-agenda { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 0; overflow-x: auto;
                   background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.colonne { border-right: 1px solid var(--bord); min-width: 0; }
.colonnes-agenda .fc { --fc-today-bg-color: transparent; }
.colonne:last-child { border-right: 0; }
.entete-colonne { position: relative; z-index: 5; display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem;
                  background: var(--surface); border-bottom: 1px solid var(--bord); border-top: 3px solid var(--couleur, var(--primaire)); }
.entete-colonne strong { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-colonne small { display: block; font-size: .78rem; }
.entete-colonne .compteur { margin-left: auto; white-space: nowrap; }
.colonne:not(:first-child) .fc-timegrid-axis, .colonne:not(:first-child) .fc-timegrid-slot-label { width: 0 !important; padding: 0 !important; }
.colonne:not(:first-child) .fc-timegrid-slot-label-cushion, .colonne:not(:first-child) .fc-timegrid-axis-cushion { display: none; }
.vue-semaine { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .5rem; box-shadow: var(--ombre); }
.fc { --fc-border-color: #edf0f5; --fc-today-bg-color: #fffbea; --fc-now-indicator-color: #e11d48; font-size: .85rem; }
.fc .fc-non-business { background: repeating-linear-gradient(-45deg, #f6f7fa, #f6f7fa 6px, #eff2f6 6px, #eff2f6 12px); }
.fc .fc-timegrid-slot { height: 2.2em; }
.fc-event { border-radius: 6px !important; cursor: pointer; }
.fc-event .ev { padding: 1px 4px; line-height: 1.25; overflow: hidden; }
.fc-event .ev-heure { font-size: .74rem; opacity: .9; }
.fc-event .ev-nom { font-weight: 700; font-size: .82rem; }
.fc-event .ev-intitule { font-size: .75rem; opacity: .95; }
.fc-event .ev-icone { float: right; font-size: .75rem; margin-left: 4px; }
.fc-event.statut-arrive { box-shadow: inset 4px 0 0 #16a34a; }
.fc-event.statut-vu { opacity: .55; }
.fc-event.statut-absent { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 5px, transparent 5px 10px) !important; opacity: .75; }
.fc-event.statut-absent .ev-nom { text-decoration: line-through; }

/* fenêtre de rendez-vous */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: var(--ombre-haute); color: var(--texte); }
dialog::backdrop { background: rgba(15, 23, 42, .45); }
.fenetre-entete { display: flex; align-items: flex-start; gap: .75rem; padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--bord); }
.fenetre-entete h2 { margin: 0; font-size: 1.1rem; }
.fenetre-entete .fermer { margin-left: auto; background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--discret); }
.fenetre-corps { padding: 1rem 1.25rem; max-height: calc(100vh - 220px); overflow-y: auto; }
.fenetre-pied { display: flex; gap: .5rem; align-items: center; padding: .9rem 1.25rem; border-top: 1px solid var(--bord); background: var(--surface-2); border-radius: 0 0 16px 16px; }
.champ-patient { position: relative; margin-bottom: .9rem; }
.patient-choisi { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface-2); }
.patient-choisi .infos { flex: 1; min-width: 0; }
.patient-choisi strong { display: block; }
.puces-intitules { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .9rem; }
.puces-intitules button { border: 1px solid var(--bord-fort); background: var(--surface); border-radius: 99px; padding: .35rem .75rem; font: inherit; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.puces-intitules button.actif { border-color: var(--primaire); background: var(--primaire-clair); color: var(--primaire-fonce); font-weight: 600; }
.statuts { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.statuts button { flex: 1; border: 1px solid var(--bord-fort); background: var(--surface); border-radius: var(--rayon-petit); padding: .45rem .5rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--texte-2); }
.statuts button.actif[data-statut=confirme] { background: var(--primaire-clair); border-color: var(--primaire); color: var(--primaire-fonce); }
.statuts button.actif[data-statut=arrive] { background: var(--succes-clair); border-color: var(--succes); color: var(--succes); }
.statuts button.actif[data-statut=vu] { background: #eef1f5; border-color: var(--discret); color: var(--texte-2); }
.statuts button.actif[data-statut=absent] { background: var(--danger-clair); border-color: var(--danger); color: var(--danger); }
.ligne-heures { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
details.plus { margin-bottom: .9rem; }
details.plus summary { cursor: pointer; color: var(--primaire); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; }

/* panneau « prochaines disponibilités » */
.panneau-dispos { position: absolute; right: 0; top: calc(100% + 6px); width: 340px; background: var(--surface); border: 1px solid var(--bord);
                  border-radius: var(--rayon); box-shadow: var(--ombre-haute); padding: 1rem; z-index: 40; }
.panneau-dispos label { margin-bottom: .6rem; }
.liste-dispos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .5rem; }
.liste-dispos button { border: 0; background: var(--accent-clair); color: #065f46; border-radius: var(--rayon-petit); padding: .45rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; text-align: center; }
.liste-dispos button:hover { background: var(--accent); color: #fff; }
.relatif { position: relative; }

/* ---------------------------------------------------------------- fiche patient */
.fiche-entete { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fiche-entete h1 { margin: 0; }
.fiche-entete .meta { color: var(--discret); display: flex; gap: 1rem; flex-wrap: wrap; font-size: .92rem; margin-top: .2rem; }
.fiche-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; margin-top: 1rem; align-items: start; }
.liste-rdv { list-style: none; padding: 0; margin: 0; }
.liste-rdv li { display: flex; gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--bord); }
.liste-rdv li:last-child { border-bottom: 0; }
.date-bloc { flex: none; width: 54px; text-align: center; border-radius: var(--rayon-petit); background: var(--surface-2); border: 1px solid var(--bord); padding: .3rem 0; line-height: 1.15; }
.date-bloc .jour { font-size: 1.2rem; font-weight: 800; display: block; }
.date-bloc .mois { font-size: .72rem; text-transform: uppercase; color: var(--discret); }
.liste-rdv .infos { flex: 1; min-width: 0; }
.liste-rdv form { margin: 0; }
.resultats-patients a.ligne { display: flex; align-items: center; gap: .9rem; padding: .75rem .5rem; border-bottom: 1px solid var(--bord); color: inherit; }
.resultats-patients a.ligne:hover { background: var(--surface-2); text-decoration: none; }

/* ---------------------------------------------------------------- espace public */
.entete-public { background: var(--surface); border-bottom: 1px solid var(--bord); }
.entete-public .interieur { max-width: 1120px; margin: 0 auto; padding: .8rem 16px; display: flex; align-items: center; gap: 1.25rem; }
.entete-public .logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--texte); font-size: 1.05rem; }
.entete-public .logo span.marque { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; align-items: center; justify-content: center; }
.entete-public nav { margin-left: auto; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .93rem; }
.entete-public nav a { color: var(--texte-2); font-weight: 500; }
.entete-public nav form { margin: 0; }
.page-publique { max-width: 1120px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.hero { background: linear-gradient(135deg, var(--primaire-fonce), var(--primaire)); color: #fff; }
.hero .interieur { max-width: 1120px; margin: 0 auto; padding: 2.2rem 16px 2.4rem; }
.hero h1 { font-size: 1.8rem; margin-bottom: 1.1rem; }
.barre-recherche { display: flex; background: #fff; border-radius: var(--rayon); padding: .35rem; gap: .35rem; box-shadow: var(--ombre-haute); max-width: 860px; }
.barre-recherche input { border: 0; margin: 0; font-size: 1rem; padding: .7rem .85rem; }
.barre-recherche input:focus { outline: none; background: var(--surface-2); border-radius: var(--rayon-petit); }
.barre-recherche .separateur { width: 1px; background: var(--bord); margin: .4rem 0; }
.barre-recherche .bouton { padding: .7rem 1.4rem; font-size: 1rem; }
.resultat { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--bord);
            border-radius: var(--rayon); padding: 1.25rem; box-shadow: var(--ombre); margin-bottom: 1rem; }
.resultat .identite { display: flex; gap: 1rem; align-items: flex-start; }
.resultat .identite h2 { margin: 0; font-size: 1.1rem; }
.resultat .identite p { margin: .15rem 0; color: var(--texte-2); font-size: .92rem; }
.grille-creneaux { display: grid; grid-template-columns: repeat(var(--nb, 4), 1fr); gap: .5rem; }
.grille-creneaux .jour-titre { text-align: center; font-size: .82rem; font-weight: 700; color: var(--texte-2); text-transform: capitalize; }
.grille-creneaux .jour-titre small { display: block; font-weight: 400; }
.creneaux-jour { display: flex; flex-direction: column; gap: .35rem; }
.creneau { display: block; text-align: center; padding: .4rem .2rem; border-radius: var(--rayon-petit); background: var(--accent-clair);
           color: #065f46; font-weight: 700; font-size: .88rem; }
.creneau:hover { background: var(--accent); color: #fff; text-decoration: none; }
.creneau.vide { background: none; color: var(--bord-fort); font-weight: 400; }
.prochaine-dispo { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; padding: 1rem; border-radius: var(--rayon-petit); background: var(--surface-2); text-align: center; }
.profil-grille { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; align-items: start; }
.profil-entete { display: flex; gap: 1.25rem; align-items: center; }
.profil-entete h1 { margin: 0; font-size: 1.6rem; }
.infos-pratiques dt { font-weight: 700; margin-top: .9rem; display: flex; align-items: center; gap: .5rem; }
.infos-pratiques dd { margin: .25rem 0 0 1.6rem; color: var(--texte-2); white-space: pre-line; }
.choix-intitules { display: flex; flex-direction: column; gap: .5rem; }
.choix-intitules a { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); color: var(--texte); font-weight: 600; }
.choix-intitules a:hover { border-color: var(--accent); background: var(--accent-clair); text-decoration: none; }
.etapes { display: flex; gap: .5rem; margin-bottom: 1rem; font-size: .85rem; color: var(--discret); flex-wrap: wrap; }
.etapes span.fait { color: var(--succes); font-weight: 600; }
.etapes span.encours { color: var(--primaire); font-weight: 700; }
.recap { display: flex; gap: 1rem; align-items: center; padding: 1rem; background: var(--surface-2); border-radius: var(--rayon-petit); margin-bottom: 1rem; }

/* intitulés, horaires */
.ligne-intitule { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.ligne-intitule input[name=libelle] { flex: 1 1 220px; width: auto; margin: 0; }
.ligne-intitule input[type=number] { width: 90px; margin: 0; }
.ligne-intitule input[type=color] { margin: 0; }
.ligne-intitule label.case { margin: 0; }
.tableau.intitules td { padding: .45rem 0; }
.tableau.horaires input { display: inline-block; width: auto; margin: 0; }
.grille-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem 1rem; margin-bottom: 1rem; }
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bord); margin-bottom: 1.25rem; flex-wrap: wrap; }
.onglets a { padding: .6rem 1rem; color: var(--texte-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a.actif { color: var(--primaire); border-bottom-color: var(--primaire); }
.onglets a:hover { text-decoration: none; color: var(--primaire); }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .texte-large { display: none; }
  .recherche-globale { min-width: 0; }
  .entete-public .interieur { flex-wrap: wrap; gap: .5rem 1rem; }
  .entete-public nav { margin-left: 0; gap: .4rem .9rem; font-size: .88rem; }
  .app-pro { grid-template-columns: 1fr; }
  .menu { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 100; transform: translateX(-100%); transition: transform .2s; }
  .menu.ouvert { transform: none; box-shadow: var(--ombre-haute); }
  .barre-haut .bouton-menu { display: inline-flex; }
  .barre-haut { padding: .6rem 16px; }
  .contenu { padding: 1rem 16px; }
  .fiche-grille, .profil-grille, .resultat { grid-template-columns: 1fr; }
  .deux, .trois { grid-template-columns: 1fr; }
  .tableau { display: block; overflow-x: auto; }
  .barre-recherche { flex-direction: column; }
  .barre-recherche .separateur { display: none; }
  .panneau-dispos { position: fixed; left: 16px; right: 16px; width: auto; top: 120px; }
}