:root {
  /* Couleurs desaturees par rapport aux bleu/rose vifs d'origine : rendu
     plus calme et "clinique", plus proche des logiciels medicaux que des
     apps grand public. Les deux restent bien distinguables l'une de
     l'autre et suffisamment contrastees avec du texte blanc. */
  --papa: #2f6690;
  --papa-bg: #d8e7f1;
  --maman: #99436d;
  --maman-bg: #f3dce8;
  --tous: #52525b;
  --tous-bg: #f1f1f3;
  --border: #e6e6ea;
  --border-strong: #d4d4d9;
  --text: #1c1c1f;
  --text-secondary: #6b6b72;
  --text-muted: #9a9aa2;
  --accent: #1f9254;
  --accent-hover: #19793f;
  --danger: #e0433f;
  --surface: #ffffff;
  --page-bg: #f6f6f8;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 20, 30, 0.10);
  --shadow-lg: 0 16px 48px rgba(20, 20, 30, 0.18);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 180ms;
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }

/* Contour de focus coherent au clavier (Tab) sur tous les elements
   interactifs, y compris les div "boutonnifiees" via tabindex (cartes,
   onglets) qui n'ont par defaut aucun indice visuel de focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body {
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
  /* Assez large pour que la liste de rendez-vous (voir #liste / .jour-groupe
     plus bas) puisse s'étaler sur plusieurs colonnes façon grille sur un
     écran large, plutôt que de rester coincée dans une longue colonne
     unique comme avant. Sur mobile ça ne change rien (le viewport est de
     toute façon plus étroit que ce max-width). */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 100px;
}
h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: -0.01em; }
.sous-titre { color: var(--text-secondary); margin: 0; font-size: 14px; }

/* Le titre de page et ses actions se collent SOUS la barre de navigation,
   pas par-dessus. --h-nav est mesuree en JS (assets/entete.js) car la
   barre peut passer sur deux lignes selon la largeur ; 52px est le repli
   si le script n'a pas encore tourne. */
.topbar {
  position: sticky;
  top: var(--h-nav, 52px);
  z-index: 20;
  background: var(--page-bg);
  /* 22px = les 18px d'origine + les 4px de marge que .barre-nav a perdus,
     pour garder exactement le meme air entre la barre et le titre. */
  padding-top: 22px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.entete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.entete-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Sur mobile, "Ajouter" cede sa place au bouton rond flottant (.fab, voir
   plus bas) : il ne reste qu'Imprimer + le menu du compte, qui passent a
   la ligne sous le titre faute de place. Sans consigne d'alignement, ce
   groupe se retrouve colle a gauche sous le titre (aligne avec lui) avec
   beaucoup de vide a droite - moins naturel qu'un alignement a droite,
   qui distingue mieux le titre (a gauche) des actions (a droite). */
@media (max-width: 640px) {
  .entete-actions { width: 100%; justify-content: flex-end; }
}

/* Boutons "Ajouter"/"Imprimer" ramenes dans la barre du titre, en version
   compacte plutot qu'une grosse barre dediee en dessous (qui prenait
   beaucoup de place, surtout "+ Ajouter un rendez-vous" en toutes
   lettres). Sur mobile, "Ajouter" reste cache (voir plus bas) : le bouton
   rond flottant (.fab) prend deja ce role. */
/* --- Barre de navigation partagee (voir lib/entete.php) -------------
   Premier etage : ou puis-je aller. Les actions propres a chaque page
   (Ajouter, Imprimer...) vivent en dessous, dans la page elle-meme. */
.barre-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Toujours visible : naviguer d'une page a l'autre ne doit pas obliger
     a remonter en haut. Les marges negatives font deborder le fond sur
     toute la largeur, sinon le contenu defilant apparaitrait sur les
     cotes (meme technique que .topbar). */
  position: sticky;
  top: 0;
  z-index: 26;
  background: var(--page-bg);
  padding: 10px 16px;
  /* Aucune marge sous la barre : le bandeau du titre (.topbar) s'y colle a
     ras, sinon le contenu de la page defile dans l'interstice. L'air qui
     separe la barre du titre est repris dans le padding-top de .topbar.
     Sur les pages sans .topbar, .barre-admin apporte deja sa marge de
     18px (qui absorbait de toute facon ces 4px par fusion des marges). */
  margin: 0 -16px;
  border-bottom: 1px solid var(--border);
}
.logo-site {
  display: inline-flex;
  flex: none;
  line-height: 0;
  border-radius: 8px;
}
.logo-site svg { width: 30px; height: 30px; display: block; }
.logo-site:hover { opacity: 0.85; }

/* Texte reserve aux lecteurs d'ecran : retire de l'affichage sans etre
   retire du document (display:none le rendrait invisible pour eux aussi). */
.lecture-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nav-destinations { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-lien:hover { background: var(--surface); color: var(--text); }
/* Page affichee : fond fonce + gras + soulignement. Trois marques plutot
   qu'une seule couleur, et surtout PAS de vert - il est reserve aux
   actions principales (Ajouter, Enregistrer) et ne doit pas signifier
   aussi "vous etes ici". */
.nav-lien.actif {
  background: var(--text);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.barre-nav .menu-suspendu { margin-left: auto; }

/* Les destinations sont dans la barre a partir de cette largeur, et donc
   retirees du menu deroulant ; en dessous c'est l'inverse (la barre ne
   peut pas afficher cinq boutons sur un telephone). Meme seuil des deux
   cotes : toujours exactement un chemin vers chaque page. */
@media (min-width: 901px) {
  .menu-deroulant .doublon-nav { display: none !important; }
}
@media (max-width: 900px) {
  .nav-destinations { display: none; }
}
@media print { .barre-nav { display: none !important; } }

.bouton-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--surface);
  color: var(--text);
  /* La classe sert aussi sur des <a> (ex. "Modifier le plan") : sans ca
     ils gardent le soulignement par defaut du navigateur. */
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bouton-compact:hover { background: #fbfbfc; }
.bouton-compact:active { transform: scale(0.96); }
.bouton-compact-principal { background: var(--accent); color: #fff; }
.bouton-compact-principal:hover { background: var(--accent-hover); }
.qui-connecte {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 10px;
}
.qui-connecte .icone { margin-right: 5px; vertical-align: middle; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; }
.tab {
  flex: 1;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:active { transform: scale(0.96); }
.tab.active.tous { background: var(--tous); color: #fff; box-shadow: var(--shadow-md); }
.tab.active.papa { background: var(--papa); color: #fff; box-shadow: var(--shadow-md); }
.tab.active.maman { background: var(--maman); color: #fff; box-shadow: var(--shadow-md); }

/* Filtre temps (A venir/Passes/Tout l'historique) : volontairement plus
   discret que le filtre personne juste au-dessus (pilules pleines,
   couleur vive). Les deux etaient auparavant traites avec le meme style
   de pilule, empiles l'un sur l'autre - ca faisait deux rangees quasi
   identiques et pretait a confusion avec un "Tous" qui apparaissait deux
   fois avec un sens different a chaque fois. Ici : simples onglets
   soulignes, sans fond, toujours alignes a gauche (pas etires meme sur
   mobile - c'est un filtre secondaire, pas la peine de grandes cibles
   pleine largeur). */
.tabs-temps {
  display: flex;
  gap: 18px;
  margin-top: -4px;
  padding-bottom: 14px;
}
.tab-temps {
  flex: 0 0 auto;
  padding: 0 2px 6px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab-temps.active { color: var(--accent); border-bottom-color: var(--accent); }
.compteur-tab { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.tab-temps.active .compteur-tab { color: var(--accent); }

/* Bouton qui deplie la recherche (repliee par defaut, voir index.php et
   app.js) : loge dans la rangee des onglets de personne, pousse tout a
   droite par "margin-left:auto" - la place y etait libre, ca evite une
   ligne de plus avant les rendez-vous. Volontairement discret : il ne doit
   pas attirer l'oeil plus que les onglets ou les rendez-vous. */
.tabs .btn-ouvrir-recherche {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs .btn-ouvrir-recherche:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.tabs .btn-ouvrir-recherche[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* Sur telephone les trois onglets occupent toute la largeur (flex:1) : le
   bouton se reduit a la loupe seule pour ne pas les etrangler. */
@media (max-width: 640px) {
  .tabs .texte-btn-recherche { display: none; }
  .tabs .btn-ouvrir-recherche { padding: 8px 10px; }
}
@media print { .btn-ouvrir-recherche { display: none !important; } }

.recherche-barre { position: relative; margin: 2px 0 14px; }
.recherche-barre .icone {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.recherche-barre input[type=search] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 36px 9px 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.recherche-barre input[type=search]::-webkit-search-cancel-button,
.recherche-barre input[type=search]::-webkit-search-decoration {
  display: none;
}
.recherche-barre input[type=search]:focus { outline: none; border-color: var(--accent); }
.btn-effacer-recherche {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-effacer-recherche svg { width: 16px; height: 16px; }
.btn-effacer-recherche:hover { color: var(--text); }

/* Sur mobile, le filtre personne s'etire sur toute la largeur pour de
   grandes cibles faciles a toucher. Sur un ecran large (la page fait
   1100px maintenant), le meme etirement laissait chaque onglet avec
   beaucoup de vide interieur - on repasse a une largeur naturelle,
   alignee a gauche, des que la place le permet. */
@media (min-width: 641px) {
  .tabs { justify-content: flex-start; }
  .tab { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
}

/* --- Widget "Taches" : colonne de droite sur desktop, bandeau compact
   sur telephone (voir afficherBarreTaches()/afficherBandeauTaches() dans
   app.js). --- */

/* Telephone : bandeau juste sous les onglets, la tache la plus urgente +
   un lien vers la liste complete. Masque des qu'il n'y a aucune tache
   ouverte (voir :empty) ou sur desktop (la colonne prend le relais). */
.bandeau-taches {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
  margin: 0 0 14px;
}
.bandeau-taches:empty { display: none; margin: 0; }
.lien-voir-tout-taches {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.page-layout { display: block; }
.colonne-principale { min-width: 0; }
.barre-taches { display: none; }

@media (min-width: 900px) {
  .bandeau-taches { display: none; }
  .page-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    align-items: start;
    gap: 20px;
  }
  .barre-taches {
    display: block;
    position: sticky;
    /* Deux bandeaux collants se superposent au-dessus de cette colonne :
       la barre de navigation (--h-nav) puis le bandeau du titre
       (--hauteur-topbar). Les deux hauteurs sont mesurees en JS
       (mesurer() dans entete.js, ajusterHauteurTopbar() dans app.js) car
       elles varient avec la largeur, la recherche et les onglets - un
       chiffre fixe se desynchronisait et le titre "Taches" se retrouvait
       cache derriere. Les replis (52px / 220px) servent si le JS n'a pas
       encore tourne. */
    top: calc(var(--h-nav, 52px) + var(--hauteur-topbar, 220px) + 14px);
    max-height: calc(100vh - var(--h-nav, 52px) - var(--hauteur-topbar, 220px) - 34px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
  }
  .barre-taches-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .barre-taches-entete h2 { font-size: 15px; margin: 0; }
  .barre-taches-entete a { font-size: 12px; font-weight: 600; color: var(--accent); flex: none; }
  .vide-taches { font-size: 13px; color: var(--text-muted); margin: 0; }
}

.liste-taches-widget { display: flex; flex-direction: column; gap: 2px; }
.item-tache-widget {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease);
}
.item-tache-widget:hover { background: var(--page-bg); }
.item-tache-widget input[type=checkbox] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
}
.item-tache-contenu { min-width: 0; }
.item-tache-texte { display: block; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.item-tache-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.principal, button.secondaire, button.danger, a.secondaire, a.principal {
  flex: 1;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
button.principal, a.principal {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button.principal:hover, a.principal:hover { background: var(--accent-hover); }
button.principal:active, a.principal:active { transform: scale(0.97); }
button.principal:disabled { opacity: 0.6; cursor: default; transform: none; }
button.secondaire, a.secondaire {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  /* a.secondaire : un lien stylise en bouton (ex. "Annuler" l'edition
     d'une tache) doit rester centre comme un vrai bouton. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button.secondaire:hover, a.secondaire:hover { background: #fbfbfc; }
button.secondaire:active, a.secondaire:active { transform: scale(0.97); }
button.danger {
  background: var(--danger);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
button.danger:hover { opacity: 0.92; }
button.danger:active { transform: scale(0.97); }

/* Menu deroulant "Imprimer" : un seul bouton dans la barre d'actions
   (plutot que deux boutons Normal/Compact a poids egal) qui ouvre un
   petit choix Normal/Compact - allege la barre et met en avant "Ajouter"
   comme action principale. */
/* Mecanique generique de menu deroulant (bouton -> liste d'options),
   reutilisee pour le menu "Imprimer" (Normal/Compact) et le menu de
   compte (Administration/Historique/Rappels/Deconnexion) - un seul
   mecanisme CSS+JS (voir initMenuSuspendu() dans app.js) plutot que du
   code duplique pour chaque nouveau menu. */
.menu-suspendu { position: relative; }
.bouton-menu-suspendu { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.icone-chevron { margin-left: 2px; transition: transform var(--dur) var(--ease); }
.menu-suspendu.ouvert .icone-chevron { transform: rotate(180deg); }
.menu-deroulant {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 25;
}
.menu-suspendu.ouvert .menu-deroulant { display: flex; }
.menu-deroulant button, .menu-deroulant a {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.menu-deroulant button:hover, .menu-deroulant a:hover { background: var(--page-bg); }
/* "Deconnexion" ecarte du reste par un filet : il ne doit pas se cliquer
   dans la foulee des liens de navigation qui le precedent. */
.menu-deroulant .lien-deconnexion {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Raccourcis "Médicaments" et "Pathologies" dans la barre du haut : les
   deux fiches que Michel et Christiane consultent/impriment, sorties du
   menu a leur prenom ou personne ne les trouvait. Uniquement sur grand
   ecran - sur telephone la barre est deja pleine (voir la regle mobile
   plus bas), ils restent accessibles par le menu. */
.raccourci-desktop { text-decoration: none; }
@media (max-width: 900px) {
  .raccourci-desktop { display: none !important; }
}
/* Reciproquement : au-dessus de ce seuil, les memes entrees disparaissent
   du menu deroulant, ou elles feraient doublon avec les raccourcis de la
   barre juste au-dessus. Les deux regles utilisent le meme seuil (900px)
   pour qu'il y ait toujours exactement un chemin vers chaque page. */
@media (min-width: 901px) {
  .menu-deroulant .doublon-raccourci { display: none !important; }
}

#btnImportIcs { width: 100%; margin-bottom: 22px; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.38);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 40;
}
.overlay.visible { opacity: 1; pointer-events: auto; }

.modal {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 50;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal.ouvert { display: flex; }
.modal h2 { font-size: 16px; margin: 0 0 10px; }

.modal-corps {
  overflow-y: auto;
  min-height: 0;
  padding: 16px 20px 4px;
}
.modal-dialogue #dialogueMessage { font-size: 16px; line-height: 1.5; margin: 4px 0; text-align: center; }

/* Toast de confirmation (ajout/modification/suppression d'un rendez-vous) :
   message discret en bas de l'ecran, disparait tout seul, ne bloque rien
   (contrairement au modal de dialogue). */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  background: var(--text);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 60;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-action {
  flex: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px;
  cursor: pointer;
}
@media print { .toast { display: none !important; } }

.modal .form-boutons {
  flex-shrink: 0;
  margin-top: 0;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
}
/* Message d'erreur : toute la largeur, au-dessus des boutons. */
.modal .form-boutons .erreur { flex: 1 0 100%; margin: 0 0 8px; }
.modal .form-boutons .erreur:empty { display: none; }
/* "Supprimer" : vrai bouton rouge avec icone poubelle, pousse a gauche et
   a l'ecart des deux boutons d'action (marge auto a droite) - un lien
   souligne se remarquait mal, alors qu'une corbeille rouge est comprise
   sans lire. Contour plutot que fond plein : reste identifiable comme
   destructif sans rivaliser visuellement avec "Enregistrer". La
   confirmation avant suppression reste en place (voir app.js). */
.modal .form-boutons .bouton-supprimer-rdv {
  flex: 0 0 auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--danger);
  background: none;
  border: 1.5px solid var(--danger);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal .form-boutons .bouton-supprimer-rdv svg { width: 17px; height: 17px; flex: none; }
.modal .form-boutons .bouton-supprimer-rdv:hover {
  background: var(--danger);
  color: #fff;
}
.modal .form-boutons .bouton-supprimer-rdv:active { transform: scale(0.97); }
/* Sur petit ecran, seule la corbeille reste : le mot "Supprimer" prendrait
   la place des boutons Enregistrer/Annuler sur la meme ligne. */
@media (max-width: 480px) {
  .modal .form-boutons .texte-supprimer-rdv { display: none; }
  .modal .form-boutons .bouton-supprimer-rdv { padding: 11px 12px; }
}

@media (min-width: 641px) {
  .modal {
    top: 50%;
    left: 50%;
    width: 92%;
    max-width: 460px;
    max-height: 85vh;
    border-radius: var(--radius-lg);
    transform: translate(-50%, -46%) scale(0.97);
    opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .modal.ouvert { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Formulaire de rendez-vous (#formCard uniquement - pas la modale de
   confirmation/erreur #dialogueModal, qui doit rester petite) : sur
   desktop assez large, passe en 2 colonnes pour reduire le scroll vertical
   d'un formulaire devenu long (12 champs). Les blocs .section-groupe (voir
   index.php) se repartissent naturellement Quand|Qui, Details
   medicaux|Coordonnees, Notes|Questions, dans l'ordre du HTML. */
@media (min-width: 860px) {
  #formCard.modal {
    max-width: 680px;
  }
  #formCard .modal-corps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    align-content: start;
  }
  #formCard .modal-corps > h2,
  #formCard #erreurForm,
  #formCard #btnSupprimer {
    grid-column: 1 / -1;
  }
  /* Les deux premiers groupes (Quand, Qui) se retrouvent cote a cote sur
     la meme rangee : aucun des deux n'a besoin du filet separateur du
     haut (deja gere pour le tout premier par la regle "h2 + .section-groupe"
     ci-dessus, ceci couvre le second). */
  #formCard .section-groupe:nth-of-type(2) > .section-titre {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Date sur sa propre ligne, Heure et Duree en dessous : une colonne de
     modale fait moitie moins large qu'avant, et Date + Heure + Duree cote
     a cote n'y tiennent pas sans rogner l'annee ("31 / 08 / 202"). Ca
     equilibre au passage les deux colonnes, la section "Qui" ayant un
     champ de plus. */
  #formCard .champ-ligne-3 { flex-wrap: wrap; }
  #formCard .champ-ligne-3 .champ:nth-child(1) { flex: 1 0 100%; min-width: 0; }
}

@media (max-width: 640px) {
  .modal {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform 240ms var(--ease);
  }
  .modal.ouvert { transform: translateY(0); }
}

/* Petits intitules de section dans le formulaire (Quand / Qui / Details
   medicaux / Coordonnees / Notes), pour aerer un formulaire autrement
   long et plat - meme traitement typographique que .jour-titre pour
   rester coherent avec le reste du site. */
.section-titre {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.modal h2 + .section-groupe > .section-titre { margin-top: 0; padding-top: 0; border-top: none; }

/* Marges/paddings resserres par rapport a l'origine (14px/6px/12px) pour
   qu'un formulaire avec beaucoup de champs (Accompagnant, etc.) tienne
   sans trop scroller sur mobile. Polices aussi legerement reduites
   (16->15px sur les champs, 13->12px sur les labels) a la demande de
   Chem - attention, en dessous de 16px sur un <input>, iOS Safari zoome
   automatiquement l'ecran au focus du champ (comportement natif du
   navigateur, pas un bug) : a garder en tete si jamais ca genait un
   parent sur iPhone. */
.champ { margin-bottom: 10px; }
.champ label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; }
.champ-ligne { display: flex; gap: 10px; }
.champ-ligne .champ { flex: 1; min-width: 0; }
/* Date/Heure/Duree sur une meme ligne (3 colonnes au lieu de 2) : experimental,
   a valider a l'usage sur telephone - les champs date/heure natifs du
   navigateur peuvent s'afficher a l'etroit sur un petit ecran. Gap et
   padding horizontal reduits ici uniquement, pour laisser un peu plus de
   place au contenu sans toucher a la hauteur des champs (donc sans
   rogner la zone tactile). */
.champ-ligne-3 { gap: 6px; }
.champ-ligne-3 .champ input,
.champ-ligne-3 .champ select {
  padding-left: 6px;
  padding-right: 6px;
}
/* Date a besoin de plus de place que Heure/Duree pour afficher
   "jj/mm/aaaa" sans se faire couper - largeurs inegales plutot que le
   partage a 1/3 - 1/3 - 1/3 par defaut (voir .champ-ligne .champ ci-dessus).
   min-width : depuis le passage du formulaire en 2 colonnes sur desktop,
   la ligne dispose de moitie moins de largeur et l'annee se retrouvait
   coupee ("09 / 10 / 20"). Un plancher en pixels garantit la place du
   "jj/mm/aaaa" complet plus l'icone calendrier du navigateur ; ce sont
   Heure et Duree qui se resserrent si besoin (leur min-width vaut 0). */
.champ-ligne-3 .champ:nth-child(1) { flex: 1.3; min-width: 132px; }
.champ-ligne-3 .champ:nth-child(2) { flex: 0.85; }
.champ-ligne-3 .champ:nth-child(3) { flex: 1; }
.champ input[type=date], .champ input[type=time], .champ input[type=text], .champ input[type=tel], .champ select, .champ textarea {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
  font-family: inherit;
}
/* Champ obligatoire laisse vide (classe posee par marquerChampManquant()
   dans app.js au clic sur Enregistrer) : signale sur place plutot que par
   une phrase en bas du formulaire qu'il fallait lire puis traduire en
   "quel champ, deja ?".
   IMPORTANT - ne jamais s'appuyer sur la seule couleur : Chem est
   daltonien et ne voyait pas le lisere rouge. Chaque marque est donc
   doublee d'un indice non colore : la mention ecrite "A REMPLIR", un
   triangle d'avertissement, un cadre nettement plus epais et une breve
   secousse a l'apparition. */
.champ.manquant::before {
  content: "⚠ À REMPLIR";
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--danger);
  margin-bottom: 3px;
}
.champ.manquant > label { color: var(--danger); font-weight: 700; }
.champ.manquant input,
.champ.manquant select {
  border-width: 3px;
  border-color: var(--danger);
  background: #fff2f2;
}
.champ.manquant .personnes label {
  border-width: 3px;
  border-color: var(--danger);
}
/* Titre de la section concernee ("Quand", "Qui") : le triangle rend le
   reperage possible sans distinguer la couleur. */
.section-groupe.manquant > .section-titre { color: var(--danger); }
.section-groupe.manquant > .section-titre::before { content: "⚠ "; }

/* Secousse courte a l'apparition : un mouvement attire l'oeil quelle que
   soit la perception des couleurs. Desactivee si la personne a demande de
   limiter les animations dans son systeme. */
.champ.manquant { animation: secousse-champ 320ms ease; }
@keyframes secousse-champ {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .champ.manquant { animation: none; }
}

.champ textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.4;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.lien-importer-medecin {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}
.lien-importer-medecin:hover { text-decoration: underline; }
.lien-importer-medecin:disabled { opacity: 0.6; cursor: default; }
.personnes { display: flex; gap: 8px; }
.personnes label {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.personnes input { display: none; }
.personnes label.sel-papa { border-color: var(--border); }
.personnes label.sel-papa.checked { background: var(--papa-bg); color: var(--papa); border-color: var(--papa); }
.personnes label.sel-maman.checked { background: var(--maman-bg); color: var(--maman); border-color: var(--maman); }
.personnes label.sel-deux.checked { background: var(--tous-bg); color: var(--tous); border-color: var(--tous); }

.form-boutons { display: flex; gap: 10px; margin-top: 6px; }

.jour-titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 20px 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* Le titre du jour doit prendre toute la largeur au-dessus de la grille
     de cartes de ce jour-la (voir .jour-groupe juste en dessous), pas
     rester coince dans une seule colonne. */
  grid-column: 1 / -1;
}
.jour-groupe:first-child .jour-titre { margin-top: 2px; }

/* Chaque jour regroupe ses rendez-vous dans une grille responsive (façon
   grille de cartes de l'impression compacte, mais en plus spacieux) au
   lieu d'une longue liste empilée sur une seule colonne : sur un écran
   large, plusieurs rendez-vous cote a cote ; sur mobile, une colonne
   unique comme avant (le viewport est plus etroit que minmax()). */
.jour-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  /* Chaque carte prend sa hauteur naturelle au lieu d'etre etiree a la
     hauteur de la plus haute de sa rangee : un rendez-vous sans notes ni
     questions laissait sinon un grand rectangle vide a cote d'un voisin
     charge. (Si le resultat parait trop irregulier a l'usage, retirer
     cette ligne suffit a revenir a l'ancien comportement.) */
  align-items: start;
}
/* Mois avec un seul rendez-vous : la carte occupe toute la largeur plutot
   que de laisser une demi-ligne blanche a sa droite - meme principe qu'a
   l'impression (voir .cc-mois-grille). Uniquement quand la grille a
   plusieurs colonnes, sinon la regle ne change rien. */
.jour-groupe > .rdv:only-of-type { grid-column: 1 / -1; }

.rdv {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: entree 220ms var(--ease) both;
}
.rdv:hover { box-shadow: var(--shadow-md); }
.rdv:active { transform: scale(0.985); }

/* Petit crayon discret en coin de carte : sur ecran tactile il n'y a pas
   de survol pour deviner qu'une carte est cliquable, ce repere visuel
   reste toujours present (contrairement a l'ombre au survol, souris
   seulement). */
.rdv-modifier {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: var(--text-muted);
  opacity: 0.45;
  pointer-events: none;
}
.rdv-modifier svg { display: block; width: 14px; height: 14px; }

@keyframes entree {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bandeau en tete de carte : nom de la personne concernee et heure du
   rendez-vous, repris du meme principe que la grille d'impression
   compacte, pour reperer d'un coup d'oeil qui est concerne. Fond
   legerement teinte + texte colore plutot qu'un aplat plein : avec
   plusieurs cartes cote a cote, un bandeau plein sur chacune devenait
   vite tres charge visuellement ; un fond doux + texte colore reste tout
   aussi reperable sans "crier". */
.rdv-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  color: var(--tous);
  background: var(--tous-bg);
  border-bottom: 1px solid var(--border);
}
.rdv-entete.rdv-papa { background: var(--papa-bg); color: var(--papa); border-bottom-color: rgba(61, 111, 150, 0.18); }
.rdv-entete.rdv-maman { background: var(--maman-bg); color: var(--maman); border-bottom-color: rgba(161, 86, 124, 0.18); }
.rdv-entete-nom { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Date desormais ecrite en entier ("mardi 18 août — 14h05", voir
   dateCourte() dans app.js) : elle peut passer sur deux lignes sur une
   carte etroite plutot que d'etre coupee. */
.rdv-entete-heure { font-size: 14px; font-weight: 700; text-align: right; }

/* Petites icones devant adresse/telephone/route/notes (voir ICONES dans
   app.js) : taille fixe, alignees sur le texte, couleur heritee du
   parent pour ne pas avoir a gerer une couleur en plus. */
.icone { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; flex-shrink: 0; }

.rdv-corps { padding: 12px 14px 14px; }
/* align-self : la carte (.rdv) est un conteneur flex vertical, donc un
   inline-block s'y etire sur toute la largeur - la pastille "Aujourd'hui"
   devenait une grosse barre coloree qui pesait plus lourd que le nom du
   medecin en dessous. On la ramene a sa largeur naturelle, a gauche. */
.badge-jour {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  margin: 10px 0 0 14px;
}
.badge-aujourdhui { background: var(--accent); color: #fff; }
.badge-demain { background: var(--tous-bg); color: var(--tous); }
/* Nom du medecin affiche en entier, sur deux lignes si necessaire : c'est
   l'information principale de la carte, la couper avec "..." la rendait
   inutilisable ("Consultation avec Anne-Catherine Poule..."). L'icone est
   sortie du flux du texte pour que la 2e ligne s'aligne sous la 1re et
   non sous l'icone. */
.medecin {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.medecin .icone { margin-top: 4px; }
.departement { font-size: 16px; font-weight: 700; color: var(--text-secondary); font-style: italic; }
/* La ligne "lieu · route" peut etre longue : elle se replie sur une
   deuxieme ligne plutot que d'etre coupee par "..." (l'adresse tronquee
   etait inutilisable). */
.contact { font-size: 13px; color: var(--text-muted); }
.route { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Route accolee au lieu sur la meme ligne (voir lieuEtRouteHtml dans
   app.js) : gardee en gras et en couleur de texte normale pour rester
   reperable au milieu de la ligne d'adresse, plus discrete. */
.route-en-ligne { font-weight: 700; color: var(--text); white-space: nowrap; }
.accompagnant { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pathologie associee au rendez-vous (voir pathologies.php) : petite
   etiquette sous le nom du medecin, pour voir d'un coup d'oeil "ce
   rendez-vous, c'est pour le dos". */
.pathologie-rdv {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--page-bg);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: 3px;
}
/* Note toujours affichee en entier : plus de troncature sur une ligne avec
   "..." (il fallait alors survoler ou taper la note pour la lire, ce qui
   n'etait pas devinable). Les cartes d'une meme rangee sont de toute facon
   etirees a la meme hauteur par la grille (voir .jour-groupe). */
.notes { font-size: 14px; color: var(--text-muted); white-space: pre-line; }

/* Liste de questions a poser au professionnel (voir listeQuestionsHtml()
   dans app.js) : contrairement a .notes, toujours affichee en entier (pas
   de troncature/survol) - c'est une liste qu'on doit pouvoir lire d'un
   coup d'oeil et emporter au rendez-vous. */
.questions {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--page-bg);
  border-radius: var(--radius-sm, 8px);
  border: 1px dashed var(--border-strong);
}
.questions-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.questions-titre .icone { width: 14px; height: 14px; flex: none; }
.questions-liste { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.questions-liste li { margin: 2px 0; }

.lien-danger {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 14px;
  padding: 10px 0 0;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-align: left;
}
.lien-danger:hover { opacity: 0.75; }

.vide { color: var(--text-muted); text-align: center; padding: 60px 20px; font-size: 15px; }
.vide-icone { width: 44px; height: 44px; margin: 0 auto 12px; display: block; color: var(--border-strong); }
.vide p { margin: 0; }
.erreur { color: var(--danger); font-size: 14px; margin: 8px 0; }
.info { color: var(--accent); font-size: 14px; margin: 8px 0; }

/* Forme reprenant les cartes de rendez-vous (bandeau + corps) plutot que
   de simples barres generiques, pour que le chargement annonce deja la
   forme de ce qui va apparaitre. */
.squelette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding-top: 4px;
}
.squelette-carte {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.squelette-bandeau, .squelette-corps {
  background: linear-gradient(90deg, #ececef 25%, #f6f6f8 37%, #ececef 63%);
  background-size: 400% 100%;
  animation: scintille 1.4s ease infinite;
}
.squelette-bandeau { height: 32px; }
.squelette-corps { height: 76px; }
@keyframes scintille {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 28px;
  line-height: 1;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 30;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fab:active { transform: scale(0.92); }

@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: 110px; }
  .fab { display: flex; align-items: center; justify-content: center; }
  /* Le bouton rond flottant (.fab) remplace "Ajouter" sur mobile. */
  #btnAjouter { display: none; }
}

#btnImportIcs.ics-ligne { display: block; }
.ics-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ics-ligne input[type=checkbox] { width: 20px; height: 20px; }
.ics-details { flex: 1; }
.ics-titre { font-weight: 600; font-size: 15px; }
.ics-adresse { font-size: 12px; color: var(--text-muted); }
.ics-date { font-size: 13px; color: var(--text-secondary); }
.ics-personne { font-size: 14px; padding: 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); }

.page-login { display: flex; align-items: center; justify-content: center; min-height: 90vh; }
.login-card {
  max-width: 380px;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 24px;
  text-align: center;
}
.login-card input[type=password], .login-card input[type=text] {
  width: 100%;
  font-size: 16px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  margin: 12px 0;
}

.choix-personnes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.choix-personnes button { padding: 22px 10px; font-size: 17px; }
@media (max-width: 360px) { .choix-personnes { grid-template-columns: 1fr; } }

.outils-footer { text-align: center; font-size: 13px; margin: 32px 0 12px; }
.outils-footer a { color: var(--text-muted); }

/* Grille compacte : rendue en permanence en arriere-plan (donnees a jour
   pour l'impression), mais jamais visible a l'ecran ni a l'impression
   normale — seulement en mode "Imprimer (compact)", voir plus bas. */
#listeCompacte { display: none; }
#tachesCompacte { display: none; }

@media print {
  @page { margin: 1.2cm; }

  .topbar, .modal, .overlay, .fab, .outils-footer, .bandeau-taches, .barre-taches { display: none !important; }
  .page-layout { display: block !important; }
  /* Tailles pensees pour une lecture confortable a bout de bras par une
     personne agee (presbytie) : la feuille imprimee est ce qu'ils ont en
     main en salle d'attente. On accepte volontiers une page de plus. */
  body { padding: 0; font-size: 12pt; line-height: 1.35; max-width: 100%; background: #fff; }

  /* Un seul rendu a l'impression : la grille de cartes (#listeCompacte).
     La liste detaillee de l'ecran (#liste) est masquee - il n'y a plus de
     mode "Normal" separe, l'ancien "Compact" est devenu l'unique format. */
  #liste { display: none !important; }
  /* Un bloc par mois (titre + sa propre grille de cartes), voir
     genererGrilleCompacte() dans app.js. Le conteneur reste un simple
     bloc : c'est chaque mois qui porte sa grille. */
  body.impression-compacte #listeCompacte { display: block !important; }

  .cc-mois-bloc { margin-top: 20px; }
  .cc-mois-bloc:first-child { margin-top: 0; }
  /* Mois assez court pour tenir sur une page (classe posee en JS, voir
     genererGrilleCompacte) : insecable, donc jamais un titre seul en bas
     de page avec ses rendez-vous rejetes sur la suivante. Un mois charge
     ne recoit pas cette classe et peut se couper normalement. */
  .cc-mois-bloc-insecable {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Titre de mois hors de la grille, en flux normal : en tant qu'element
     de grille, "break-after: avoid" etait ignore par les navigateurs et un
     titre pouvait se retrouver seul en bas d'une page. Ici il precede
     directement sa grille, et les deux regles ci-dessous le maintiennent
     avec au moins ses premieres cartes.
     Bandeau plein plutot qu'un filet sous le texte : avec un filet, on ne
     savait pas s'il fermait le titre ou s'il ouvrait les cartes. */
  .cc-mois-titre {
    font-size: 12.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #222;
    background: #e8e8ea;
    padding: 4px 9px;
    border-radius: 4px;
    margin: 0 0 8px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 2 colonnes plutot que 3 : avec des caracteres remontes pour rester
     lisibles (voir plus bas), 3 colonnes rendaient chaque carte trop
     etroite et coupaient les adresses. */
  .cc-mois-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    break-before: avoid;
    page-break-before: avoid;
  }
  /* Carte seule sur sa ligne (mois a nombre impair de rendez-vous) : elle
     occupe les deux colonnes. Le texte disposant du double de largeur, les
     notes et adresses se replient sur moins de lignes - la carte est plus
     basse et il n'y a plus de demi-ligne vide a cote.
     ":nth-child(odd)" = carte en colonne de gauche ; combine a
     ":last-child", c'est donc bien une carte sans voisine a sa droite. */
  .cc-mois-grille .carte-compacte:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .carte-compacte {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Bandeau en haut de la carte, pleine largeur, pour repérer en un coup
     d'oeil qui est concerné (couleur + nom), sans devoir lire le petit
     texte en bas de la carte comme avant. print-color-adjust force
     l'impression du fond colore meme si "graphiques d'arriere-plan" n'est
     pas coche dans la boite de dialogue d'impression. */
  .cc-entete {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    color: #fff;
    background: var(--tous);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  .cc-entete.cc-papa { background: var(--papa); }
  .cc-entete.cc-maman { background: var(--maman); }
  .cc-entete-nom { font-size: 11pt; font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-corps { display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; }
  .cc-date { min-width: 40px; text-align: center; line-height: 1.15; }
  .cc-jour { display: block; font-size: 18pt; font-weight: 700; color: var(--papa); }
  .cc-mois { display: block; font-size: 10pt; text-transform: uppercase; color: var(--papa); }
  .cc-annee { display: block; font-size: 9pt; color: #777; }
  .cc-heure { display: block; font-size: 11pt; font-weight: 700; color: var(--text); margin-top: 2px; }
  .cc-date.cc-maman .cc-jour, .cc-date.cc-maman .cc-mois { color: var(--maman); }
  .cc-date.cc-deux .cc-jour, .cc-date.cc-deux .cc-mois { color: var(--tous); }
  .cc-contenu { min-width: 0; }
  .cc-titre { font-size: 11.5pt; font-weight: 700; line-height: 1.25; }
  .cc-sous { font-size: 10.5pt; font-weight: 700; color: #555; font-style: italic; margin-top: 1px; }
  /* Adresse affichee en entier : la tronquer a 2 lignes avec "..." rendait
     certaines adresses inutilisables une fois sur papier. */
  .cc-adresse {
    font-size: 10pt;
    color: #555;
    margin-top: 2px;
    line-height: 1.25;
  }
  .cc-route { font-size: 10pt; font-weight: 700; margin-top: 1px; }
  .cc-route-en-ligne { font-weight: 700; color: #222; white-space: nowrap; }
  .cc-accompagnant { font-size: 10pt; color: #555; margin-top: 1px; }
  .cc-pathologie { font-size: 10pt; font-weight: 700; color: #444; margin-top: 1px; }
  .cc-notes {
    font-size: 10pt;
    color: #555;
    margin-top: 3px;
    line-height: 1.3;
    white-space: pre-line;
  }
  .cc-questions { margin-top: 3px; }
  .cc-questions-titre { font-size: 9pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #666; }
  .cc-questions-liste { margin: 2px 0 0; padding-left: 14px; font-size: 10pt; line-height: 1.3; }
  .cc-questions-liste li { margin: 0; }

  /* Section "Taches" ajoutee sous la liste des rendez-vous, a
     l'impression normale comme au mode compact (voir
     genererTachesCompactes() dans app.js). */
  #tachesCompacte {
    display: block !important;
    margin-top: 14px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #tachesCompacte:empty { display: none !important; margin: 0; }
  .cc-taches-titre {
    font-size: 11pt;
    margin: 0 0 6px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
  }
  .cc-taches-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .cc-tache {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 7px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cc-tache-case {
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 2px;
    border: 1.3px solid #999;
    border-radius: 2px;
  }
  .cc-tache-contenu { min-width: 0; }
  .cc-tache-texte { font-size: 8.5pt; font-weight: 600; line-height: 1.25; }
  .cc-tache-meta { font-size: 7.5pt; color: #666; margin-top: 1px; }
  .cc-tache-papa .cc-tache-meta { color: var(--papa); }
  .cc-tache-maman .cc-tache-meta { color: var(--maman); }
}
#entete-impression { display: none; }
@media print {
  #entete-impression { display: block; margin-bottom: 12px; }
  #entete-impression h1 { font-size: 16pt; margin: 0 0 3px; }
  #entete-impression p { font-size: 11pt; color: #444; margin: 0; }
  #entete-impression p:empty { display: none; }
}
/* Zone du bouton "Se connecter avec Google" (login.php). Le bouton lui-meme
   est dessine par Google dans une iframe : on ne peut pas le styler, on se
   contente de le centrer. Sa largeur est imposee par Google, d'ou le
   display:flex plutot qu'un text-align qui n'aurait aucun effet sur un
   element de type inline-block a largeur fixe. */
.zone-bouton-google { display: flex; justify-content: center; margin-top: 18px; min-height: 44px; }

/* Lien vers /admin/login.php depuis la page de connexion : discret, mais
   presente. C'est la seule porte qui ne depend pas de Google - donc celle
   qu'il faut trouver quand Google est justement le probleme. */
.lien-secours { margin-top: 20px; font-size: 13px; color: var(--text-muted); }
.lien-secours a { color: var(--text-secondary); }

/* Rendez-vous dont le rappel par email a ete desactive (case decochee dans
   le formulaire). Ecrit en toutes lettres et non signale par une couleur :
   il faut pouvoir reperer d'un coup d'oeil, dans une liste, lesquels
   n'enverront rien - sans quoi il faudrait ouvrir chaque fiche. */
.sans-rappel { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
@media print { .sans-rappel { display: none; } }

/* Case "Envoyer un rappel la veille" dans le formulaire de rendez-vous. */
.case-rappel { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--text); cursor: pointer; margin-top: 4px; }
.case-rappel input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.aide-rappel { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 0; }