:root {
  --blanc: #FFFFFF;
  --encre: #0D1220;
  --texte: #2F3747;
  --sourdine: #6F7889;
  --filet: #E4E7EC;
  --panneau: #F4F5F7;
  --bleu: #1F6BFF;
  --bleu-clair: #E6F0FF;
  --police: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --rayon: 24px;
  --nav: 232px;
  --heure: 64px;
  --col-heure: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; background: #E6E4F8; } /* teinte reprise par Safari pour ses barres (haut et bas) */
body { margin: 0; min-height: 100%; font-family: var(--police); font-size: 15px; line-height: 1.5; color: var(--encre); background: var(--blanc); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sourdine { color: var(--sourdine); }
.petit-texte { font-size: .85rem; }
.aide { color: var(--sourdine); font-size: .92rem; }
.erreur { color: #B42318; font-size: .9rem; }
.vide { padding: 48px 24px; text-align: center; color: var(--sourdine); }

/* Boutons et champs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--encre); background: var(--encre); color: var(--blanc); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.btn:hover { background: #262F44; border-color: #262F44; }
.btn.ghost { background: transparent; color: var(--encre); border-color: var(--filet); }
.btn.ghost:hover { background: transparent; border-color: var(--encre); }
.btn.petit { min-height: 36px; padding: 0 14px; font-size: .9rem; }
.btn.danger { color: #B42318; border-color: var(--filet); background: transparent; }
.btn.danger:hover { border-color: #B42318; background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.lien { padding: 0; border: 0; background: none; color: var(--bleu); cursor: pointer; text-decoration: none; }
.lien:hover { text-decoration: underline; }
.lien.sobre { color: var(--sourdine); }
label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--texte); }
label.case { flex-direction: row; align-items: center; gap: 10px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--filet); border-radius: 12px; background: var(--blanc); color: var(--encre); transition: border-color .15s ease; }
input[type="time"], input[type="date"], input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--encre); }
input::placeholder, textarea::placeholder { color: #A3AAB8; }
select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D1220' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bleu); margin: 0; }
.formulaire { display: flex; flex-direction: column; gap: 16px; }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire fieldset { margin: 0; padding: 16px; border: 1px solid var(--filet); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.formulaire legend { padding: 0 6px; font-size: .85rem; color: var(--sourdine); }
.formulaire .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.cases { display: flex; flex-wrap: wrap; gap: 8px; }
.cases label { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--filet); border-radius: 999px; cursor: pointer; }
.cases label:has(:checked) { border-color: var(--encre); }

/* Segments et etiquettes */
.segments { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panneau); }
.segments button { min-height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--sourdine); cursor: pointer; }
.segments button[aria-pressed="true"] { background: var(--blanc); border-color: var(--filet); color: var(--encre); }
.etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; background: var(--panneau); color: var(--texte); white-space: nowrap; }
.etiquette.agent { background: var(--bleu-clair); color: var(--bleu); }
.etiquette.agent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }
.etiquette.nuit { background: var(--encre); color: var(--blanc); }
.etiquette.annule { text-decoration: line-through; }

/* Connexion */
#connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--panneau); }
.carte-connexion { width: min(100%, 420px); display: flex; flex-direction: column; gap: 14px; padding: 40px; background: var(--blanc); border-radius: var(--rayon); }
.carte-connexion h1 { margin-top: 8px; }
.carte-connexion p { color: var(--sourdine); }
.carte-connexion .btn { margin-top: 10px; }

/* Structure */
#application { display: grid; grid-template-columns: var(--nav) minmax(0, 1fr); min-height: 100vh; }
.nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px; border-right: 1px solid var(--filet); }
.nav .marque { display: flex; align-items: center; gap: 10px; padding: 6px 10px 26px; text-decoration: none; font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.nav nav { display: flex; flex-direction: column; gap: 2px; }
.nav nav a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--texte); }
.nav nav a:hover { color: var(--encre); background: var(--panneau); }
.nav nav a[aria-current="page"] { color: var(--encre); background: var(--panneau); }
.nav .pied { margin-top: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.nav .pied b { font-weight: 500; }
.nav .pied .lien { color: var(--sourdine); align-self: flex-start; }
#contenu { padding: 28px 40px 56px; min-width: 0; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.entete .titre { display: flex; flex-direction: column; gap: 4px; }
.entete .titre p { color: var(--sourdine); }
.outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.outils select { width: auto; min-width: 180px; }
.navigation-dates { display: inline-flex; align-items: center; gap: 2px; }
.navigation-dates button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filet); background: var(--blanc); cursor: pointer; display: grid; place-items: center; }
.navigation-dates button:hover { border-color: var(--encre); }
.navigation-dates .aujourdhui-btn { width: auto; border-radius: 999px; padding: 0 14px; }
.carte { background: var(--panneau); border-radius: var(--rayon); padding: 24px; }
.carte + .carte { margin-top: 20px; }
.carte h2 { margin-bottom: 14px; }
.carte .entete-carte { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.carte .entete-carte h2 { margin: 0; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: start; }
.liste-blanche { background: var(--blanc); border-radius: 16px; overflow: hidden; }
.liste-blanche > * + * { border-top: 1px solid var(--filet); }
.ligne-liste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; }
.ligne-liste.cliquable { cursor: pointer; text-decoration: none; }
.ligne-liste.cliquable:hover { background: #FAFBFC; }
.ligne-liste b { display: block; font-weight: 500; }
.ligne-liste small { display: block; color: var(--sourdine); font-size: .85rem; }
.ligne-liste .droite { display: flex; align-items: center; gap: 10px; color: var(--sourdine); font-size: .9rem; white-space: nowrap; }
.ligne-liste.inactif b { color: var(--sourdine); }
.recherche-barre { position: relative; max-width: 420px; }
.compteurs { display: flex; gap: 10px; flex-wrap: wrap; }
.compteur { padding: 18px 20px; background: var(--panneau); border-radius: 18px; min-width: 150px; }
.compteur b { display: block; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.03em; }
.compteur span { font-size: .85rem; color: var(--sourdine); }

/* Agenda */
.agenda { border: 1px solid var(--filet); border-radius: 20px; overflow: hidden; background: var(--blanc); user-select: none; }
.agenda .entetes { display: grid; grid-template-columns: var(--col-heure) repeat(var(--colonnes), minmax(0, 1fr)); border-bottom: 1px solid var(--filet); }
.agenda .entetes > div { padding: 12px 10px; text-align: center; font-size: .9rem; color: var(--texte); border-left: 1px solid var(--filet); }
.agenda .entetes > div:first-child { border-left: 0; }
.agenda .entetes b { display: block; font-weight: 500; font-size: 1.05rem; color: var(--encre); }
.agenda .entetes .aujourdhui b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--encre); color: var(--blanc); }
.agenda .entetes small { display: block; color: var(--sourdine); font-size: .8rem; }
.agenda .corps { display: grid; grid-template-columns: var(--col-heure) repeat(var(--colonnes), minmax(0, 1fr)); height: calc(var(--heures) * var(--heure)); max-height: 72vh; overflow-y: auto; }
.agenda .heures { position: relative; }
.agenda .heures div { position: absolute; right: 10px; transform: translateY(-50%); font-size: .78rem; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.agenda .colonne { position: relative; border-left: 1px solid var(--filet); background: var(--panneau); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure) - 1px), var(--filet) calc(var(--heure) - 1px) var(--heure)); cursor: crosshair; }
.agenda .colonne.passe { cursor: default; }
.agenda .ouvert { position: absolute; left: 0; right: 0; background: var(--blanc); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure) - 1px), var(--filet) calc(var(--heure) - 1px) var(--heure)); background-position: 0 var(--decalage); }
.agenda .fermeture { position: absolute; left: 4px; right: 4px; padding: 6px 8px; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--panneau) 0 6px, #ECEEF2 6px 12px); color: var(--sourdine); font-size: .78rem; overflow: hidden; }
.agenda .rdv { position: absolute; left: 4px; right: 4px; padding: 4px 8px; border-radius: 10px; background: var(--bleu-clair); color: var(--encre); font-size: .8rem; line-height: 1.3; overflow: hidden; cursor: pointer; transition: background .12s ease; display: flex; flex-direction: column; gap: 1px; text-align: left; border: 0; width: auto; }
.agenda .rdv:hover { background: #D6E5FF; }
.agenda .rdv b { font-weight: 500; }
.agenda .rdv span { color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda .rdv .marque-agent { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }
.agenda .rdv.court { flex-direction: row; gap: 6px; align-items: center; padding: 0 8px; }
.agenda .rdv.court span { flex: 1; min-width: 0; }
.agenda .maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--bleu); z-index: 2; pointer-events: none; }
.agenda .maintenant::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: .85rem; color: var(--sourdine); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--bleu-clair); }
.legende i.agent { border-radius: 50%; width: 7px; height: 7px; background: var(--bleu); }
.legende i.absence { background: repeating-linear-gradient(135deg, var(--panneau) 0 3px, #DADDE3 3px 6px); }

/* Volet de droite (detail d'un rendez-vous) */
#volet { position: fixed; top: 16px; right: 16px; bottom: 16px; width: 400px; max-width: calc(100vw - 32px); padding: 28px; overflow-y: auto; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: 0 20px 60px rgba(13, 18, 32, .12); z-index: 20; display: flex; flex-direction: column; gap: 18px; }
#volet .fermer { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--panneau); cursor: pointer; font-size: 1.1rem; }
#volet dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: .95rem; }
#volet dt { color: var(--sourdine); }
#volet dd { margin: 0; }
#volet .bloc { padding: 16px; background: var(--panneau); border-radius: 16px; display: flex; flex-direction: column; gap: 10px; }
#volet .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dialogues */
dialog { width: min(100%, 560px); padding: 32px; border: 0; border-radius: var(--rayon); background: var(--blanc); color: var(--encre); box-shadow: 0 30px 80px rgba(13, 18, 32, .18); }
dialog::backdrop { background: rgba(13, 18, 32, .35); }
dialog h2 { margin-bottom: 4px; }
.resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.resultats:empty { display: none; }
.resultats li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.resultats li:hover { background: var(--panneau); }
.resultats li small { color: var(--sourdine); }
.patient .choisi { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bleu-clair); }
.cle-rendue { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: 14px; background: var(--panneau); }
.cle-rendue code { flex: 1; font-size: .85rem; word-break: break-all; }

/* Horaires */
.semaine-type { display: flex; flex-direction: column; gap: 10px; }
.jour-type { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; background: var(--blanc); border-radius: 14px; }
.jour-type b { font-weight: 500; padding-top: 10px; }
.jour-type .plages { display: flex; flex-direction: column; gap: 8px; }
.plage { display: flex; align-items: center; gap: 8px; }
.plage input { width: 118px; }
.plage .lien { margin-left: 4px; }
.jour-type .ferme { color: var(--sourdine); padding-top: 10px; }

/* Journal */
.journal-jour { margin-bottom: 24px; }
.journal-jour h3 { margin-bottom: 10px; color: var(--sourdine); font-size: .9rem; letter-spacing: 0; }
.journal-entree { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px 18px; }
.journal-entree time { color: var(--sourdine); font-variant-numeric: tabular-nums; font-size: .9rem; padding-top: 2px; }
.journal-entree .corps-entree { display: flex; flex-direction: column; gap: 6px; }
.journal-entree .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.journal-entree .meta .type { font-size: .82rem; color: var(--sourdine); }
.journal-entree.relais .resume { padding-left: 12px; border-left: 2px solid var(--bleu); }
.journal-entree .liens { display: flex; gap: 12px; font-size: .85rem; }

/* Tableau simple */
table { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: 16px; overflow: hidden; }
th, td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--filet); vertical-align: middle; }
th { font-weight: 500; font-size: .85rem; color: var(--sourdine); border-top: 0; }
td .lien { font-size: .9rem; }

/* Toasts */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { padding: 12px 20px; border-radius: 999px; background: var(--encre); color: var(--blanc); font-size: .92rem; box-shadow: 0 10px 30px rgba(13, 18, 32, .2); animation: toast .25s ease; }
.toast.erreur { background: #B42318; color: var(--blanc); }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ---------- Liquid Glass : le fond colore et le verre de l'accueil, transposes a l'agenda ---------- */
/* Les lumieres : deux calques fixes derriere toute la page, animes par transform seulement (jamais par filtre). */
.lumieres { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--blanc); }
.lumieres::before, .lumieres::after { content: ""; position: absolute; inset: -14% -12%; will-change: transform; }
.lumieres::before { background:
    radial-gradient(34% 75% at 14% 42%, rgba(31,107,255,.8), rgba(31,107,255,0) 72%),
    radial-gradient(34% 75% at 40% 70%, rgba(127,179,255,.8), rgba(127,179,255,0) 72%),
    radial-gradient(34% 75% at 64% 36%, rgba(161,140,209,.85), rgba(161,140,209,0) 72%),
    radial-gradient(34% 75% at 88% 62%, rgba(251,194,235,.95), rgba(251,194,235,0) 72%),
    linear-gradient(180deg, #FFFFFF, #FFFFFF);
  animation: lumiere-a 24s ease-in-out infinite alternate; }
.lumieres::after { background:
    radial-gradient(28% 40% at 75% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    radial-gradient(26% 40% at 20% 80%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light; animation: lumiere-b 31s ease-in-out infinite alternate; }
@keyframes lumiere-a { to { transform: translate3d(6%, 4%, 0) scale(1.08); } }
@keyframes lumiere-b { to { transform: translate3d(-7%, -5%, 0) scale(1.1); } }
body { background: transparent; }

/* Verre fume (le carre noir des catalogues) et verre clair (les tuiles interieures). Quatre backdrop-filter au plus a l'ecran :
   la barre laterale, la grille de l'agenda, le volet, un dialogue. Les autres surfaces sont en verre clair sans flou. */
.verre-fume, .nav, #toasts .toast { position: relative; background: linear-gradient(160deg, rgba(13,18,32,.34), rgba(13,18,32,.5)); color: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 1.5px 1.5px 2px -1px rgba(255,255,255,.85), inset -1px -1px 2px -1px rgba(255,255,255,.5), 0 30px 60px -30px rgba(13,18,32,.55); }
.nav { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
.nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(80% 50% at 18% 0%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 28%); }
.nav::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.1) 42%, rgba(255,255,255,.06) 58%, rgba(255,255,255,.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.verre-clair, .carte, .liste-blanche, table, .compteur, .segments, .agenda, #volet, dialog, .carte-connexion, .jour-type, .cle-rendue, #volet .bloc, .formulaire fieldset {
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.4)); border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 1.5px 1.5px 2px -1px rgba(255,255,255,.9), inset -1px -1px 2px -1px rgba(255,255,255,.45), 0 20px 40px -30px rgba(13,18,32,.35); }
.carte .liste-blanche, .carte table, .jour-type, #volet .bloc, .formulaire fieldset { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.agenda, #volet, dialog, .carte-connexion { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
.agenda { background: rgba(255,255,255,.55); }
#volet, dialog { background: rgba(255,255,255,.72); border: 0; }
.carte-connexion { background: rgba(255,255,255,.6); }
#connexion { background: transparent; }

/* Barre laterale : carre de verre fume detache du bord, textes en blanc */
#application { gap: 16px; padding: 16px; min-height: 100vh; align-items: start; }
.nav { top: 16px; height: calc(100vh - 32px); border-radius: 34px; border-right: 0; padding: 26px 16px 22px; }
.nav .marque, .nav nav a, .nav .pied, .nav .pied .lien { color: var(--blanc); }
.nav nav a { color: rgba(255,255,255,.78); }
.nav nav a:hover { color: var(--blanc); background: rgba(255,255,255,.12); }
.nav nav a[aria-current="page"] { color: var(--encre); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 20px -12px rgba(0,0,0,.5); }
.nav .pied .lien { color: rgba(255,255,255,.7); }
.nav .pied .lien:hover { color: var(--blanc); }
.nav .marque img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
#contenu { padding: 20px 28px 56px 12px; }

/* Surfaces de travail */
.agenda .colonne { background: rgba(228,231,236,.45); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure) - 1px), rgba(13,18,32,.07) calc(var(--heure) - 1px) var(--heure)); border-left-color: rgba(13,18,32,.07); }
.agenda .ouvert { background: rgba(255,255,255,.72); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure) - 1px), rgba(13,18,32,.07) calc(var(--heure) - 1px) var(--heure)); }
.agenda .entetes { border-bottom-color: rgba(13,18,32,.08); }
.agenda .entetes > div { border-left-color: rgba(13,18,32,.07); }
.agenda .fermeture { background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 6px, rgba(13,18,32,.06) 6px 12px); }
.agenda .rdv { background: rgba(230,240,255,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.agenda .rdv:hover { background: rgba(214,229,255,.98); }
.liste-blanche > * + *, th, td { border-top-color: rgba(13,18,32,.07); }
.ligne-liste.cliquable:hover { background: rgba(255,255,255,.55); }
.segments button[aria-pressed="true"] { background: rgba(255,255,255,.95); border-color: transparent; box-shadow: 0 6px 14px -8px rgba(13,18,32,.35); }
.etiquette { background: rgba(255,255,255,.7); }
.etiquette.agent { background: rgba(230,240,255,.95); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.9); }
input:focus, select:focus, textarea:focus { border-color: var(--encre); background: rgba(255,255,255,.92); }
.btn.ghost { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.9); }
.btn.ghost:hover { background: rgba(255,255,255,.8); border-color: var(--encre); }
.btn.danger { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.9); }
.navigation-dates button { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.9); }
.cases label { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.9); }
.cases label:has(:checked) { border-color: var(--encre); background: rgba(255,255,255,.9); }
#volet .fermer, .patient .choisi { background: rgba(255,255,255,.6); }
.resultats li:hover { background: rgba(255,255,255,.6); }
#toasts .toast { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#toasts .toast.erreur { background: linear-gradient(160deg, rgba(180,35,24,.75), rgba(180,35,24,.9)); }
dialog::backdrop { background: rgba(13,18,32,.28); }
@media (prefers-reduced-motion: reduce) { .lumieres::before, .lumieres::after { animation: none; } }

@media (max-width: 960px) {
  #application { grid-template-columns: 1fr; }
  #application { padding: 12px; gap: 12px; }
  .nav { position: static; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 24px; overflow-x: auto; }
  .nav .marque { padding: 0 8px 0 0; }
  .nav .marque span { display: none; }
  .nav nav { flex-direction: row; }
  .nav .pied { margin-left: auto; flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  #contenu { padding: 12px 4px 48px; }
  .formulaire .deux { grid-template-columns: 1fr; }
  #volet { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 80vh; border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Comptes nominatifs (2026-10-22) */
.carte-connexion .liens-connexion { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; font-size: .92rem; }
.carte-connexion .liens-connexion .lien { color: var(--sourdine); }
.carte-connexion .liens-connexion .lien:hover { color: var(--bleu); }
.carte-connexion .aide { margin: 0; }
.nav .pied #nav-utilisateur { color: rgba(255, 255, 255, .7); font-size: .85rem; white-space: nowrap; }
.nav .pied .lien { white-space: nowrap; }
@media (max-width: 1100px) { .nav .pied #nav-utilisateur { display: none; } }
.etiquette.role { text-transform: capitalize; }
.ligne-liste .boutons { display: flex; gap: 14px; align-items: center; }

/* ---------- Telephone (iPhone, 375 a 430 px de large) : 2026-10-22 ---------- */
/* Hors telephone, les icones d'onglets, le bouton du compte et la bande des jours n'existent pas. */
.nav .icone, .bouton-compte { display: none; }
.bande-jours { display: flex; gap: 4px; width: 100%; }
.bande-jours button { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0; border: 0; border-radius: 16px; background: transparent; color: var(--texte); cursor: pointer; }
.bande-jours small { font-size: .72rem; color: var(--sourdine); text-transform: capitalize; }
.bande-jours b { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 999px; font-weight: 500; font-size: 1rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.bande-jours .aujourdhui b { color: var(--bleu); }
.bande-jours button[aria-pressed="true"] b { background: var(--encre); color: var(--blanc); }

/* La barre en deux lignes (logo et compte, puis six onglets) sert aussi a la tablette en portrait. */
@media (max-width: 960px) {
  /* Barre : logo et compte en haut, les six onglets sur une ligne en dessous, icone sur libelle */
  .nav { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 10px 8px; border-radius: 26px; overflow: visible; }
  .nav .marque { min-height: 44px; padding: 0 0 0 6px; font-size: 1.05rem; }
  .nav .marque span { display: inline; }
  .bouton-compte { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: .85rem; font-weight: 500; letter-spacing: .02em; color: var(--encre); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 20px -12px rgba(0,0,0,.5); }
  .nav nav { grid-column: 1 / -1; flex-direction: row; gap: 2px; }
  .nav nav a { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 2px 5px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .72rem; line-height: 1.1; text-align: center; }
  .nav nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .icone { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* Le pied devient un menu sous le bouton du compte */
  .nav .pied { display: none; position: absolute; top: 62px; right: 8px; z-index: 30; width: min(280px, calc(100vw - 36px)); margin: 0; padding: 10px; flex-direction: column; align-items: stretch; gap: 0; border-radius: 22px; background: rgba(23, 29, 46, .92); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 24px 48px -16px rgba(13,18,32,.6); }
  .nav.menu-ouvert .pied { display: flex; }
  .nav .pied b { padding: 8px 12px 0; }
  .nav .pied #nav-utilisateur { display: block; padding: 0 12px 8px; white-space: normal; }
  .nav .pied .lien { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; align-self: stretch; color: var(--blanc); }
  .nav .pied .lien:hover { text-decoration: none; background: rgba(255,255,255,.12); }
  #application { align-content: start; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  h1 { font-size: 1.4rem; letter-spacing: -0.025em; }
  h2 { font-size: 1.15rem; }
  /* Safari zoome sur un champ en dessous de 16 px : on reste a 16. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  #application { padding: 10px; gap: 10px; }
  #contenu { padding: 14px 2px calc(48px + env(safe-area-inset-bottom)); }

  /* En-tete compact : titre, puis les outils en grille serree */
  .entete { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; }
  .entete .titre { gap: 2px; }
  .entete .titre p { font-size: .9rem; }
  .outils { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 8px; }
  .outils > .btn, .outils select, .outils .recherche-barre { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; }
  .segments { flex: 1 1 auto; padding: 2px; }
  .segments button { flex: 1 1 auto; min-height: 44px; padding: 0 10px; }
  .navigation-dates { gap: 4px; }
  .navigation-dates button { width: 44px; height: 44px; font-size: 1.1rem; }
  .navigation-dates .aujourdhui-btn.btn { padding: 0 12px; font-size: .88rem; }
  .bande-jours { margin: -2px 0 -4px; }
  /* Ligne 1 : Jour/Semaine et fleches ; puis le praticien (semaine), la bande des jours (jour), le bouton */
  .outils select { order: 1; }
  .bande-jours { order: 2; }
  .outils > .btn { order: 3; }

  /* Grille : colonnes lisibles, defilement horizontal si elles ne tiennent pas, defilement vertical interne */
  .agenda { --heure: 76px; --col-heure: 46px; overflow-x: auto; border-radius: 20px; -webkit-overflow-scrolling: touch; }
  .agenda.jour { --col-min: 96px; }
  .agenda.semaine { --col-min: 64px; }
  .agenda .entetes, .agenda .corps { min-width: calc(var(--col-heure) + var(--colonnes) * var(--col-min)); }
  .agenda .corps { max-height: max(360px, calc(100svh - 150px)); }
  .agenda .entetes > div { padding: 10px 4px; font-size: .82rem; overflow: hidden; }
  .agenda .entetes b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agenda .entetes small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agenda .heures div { right: 6px; font-size: .72rem; }
  .agenda .rdv { left: 3px; right: 3px; padding: 3px 6px; font-size: .78rem; }
  .agenda .rdv.court { padding: 0 6px; gap: 4px; }
  .agenda .rdv .marque-agent { top: 5px; right: 5px; }
  .agenda .fermeture { left: 3px; right: 3px; padding: 4px 6px; font-size: .72rem; }
  .legende { font-size: .8rem; gap: 6px 14px; }

  /* Cartes et listes */
  .carte { padding: 18px 14px; border-radius: 20px; }
  .carte + .carte { margin-top: 14px; }
  .grille-cartes { gap: 14px; }
  .carte .entete-carte { flex-wrap: wrap; }
  .ligne-liste { padding: 12px 14px; gap: 10px; }
  .ligne-liste .boutons { flex-direction: column; align-items: flex-end; gap: 0; }
  .ligne-liste .droite { white-space: normal; }
  .lien { min-height: 44px; display: inline-flex; align-items: center; }
  .vide .lien, p .lien { min-height: 0; display: inline; }
  .carte-connexion .liens-connexion { gap: 0 18px; }
  .btn.petit { min-height: 44px; padding: 0 18px; }
  .formulaire .actions { flex-wrap: wrap; }
  .formulaire .actions .btn { flex: 1 1 auto; }

  /* Motifs : le tableau devient une liste de cartes */
  .table-motifs thead { display: none; }
  .table-motifs, .table-motifs tbody { display: block; }
  .table-motifs tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; }
  .table-motifs tr + tr { border-top: 1px solid rgba(13,18,32,.07); }
  .table-motifs td { padding: 0; border: 0; }
  .table-motifs td.nom { grid-column: 1 / 4; }
  .table-motifs td.duree, .table-motifs td.prix { grid-row: 2; font-size: .88rem; color: var(--texte); }
  .table-motifs td.praticiens { grid-column: 1 / 4; font-size: .85rem; color: var(--sourdine); }
  .table-motifs td.action { grid-column: 4; grid-row: 1 / 4; }
  .table-motifs td.vide { grid-column: 1 / -1; }

  /* Horaires : le nom du jour au-dessus de ses plages */
  .jour-type { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
  .jour-type b, .jour-type .ferme { padding-top: 0; }
  .plage { flex-wrap: wrap; gap: 6px 8px; }
  .plage input { width: auto; flex: 1 1 96px; min-width: 0; }
  .plage .lien { margin-left: 0; }

  /* Journal */
  .compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .compteur { min-width: 0; padding: 12px; border-radius: 16px; }
  .compteur b { font-size: 1.35rem; }
  .compteur span { display: block; font-size: .75rem; line-height: 1.3; }
  .journal-entree { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .journal-entree .liens { gap: 0 14px; flex-wrap: wrap; }

  /* Volet et dialogues : feuilles qui montent du bas de l'ecran */
  #volet { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 92svh; padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; gap: 16px; }
  #volet .fermer { top: 14px; right: 14px; width: 44px; height: 44px; }
  #volet > div:first-of-type { padding-right: 48px; }
  #volet dl { grid-template-columns: 88px minmax(0, 1fr); }
  dialog { width: 100%; max-width: 100%; max-height: 94svh; margin: auto 0 0; padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; }
  .resultats li { min-height: 44px; align-items: center; }

  /* Connexion */
  #connexion { padding: 16px; }
  .carte-connexion { padding: 28px 22px; }

  #toasts { left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; align-items: center; }
  .toast { border-radius: 20px; text-align: center; }
}

/* ---------- Telephone, facon application iPhone (2026-10-22, apres le retour de Ryan) ---------- */
/* Hors telephone : ni onglet Plus, ni bouton + flottant. */
.onglet-plus, .fab { display: none; }
.feuille-plus .icone, .bouton-rond .icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 700px) {
  #application { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  #contenu { padding: 6px 2px calc(124px + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.6rem; letter-spacing: -0.03em; }

  /* Barre d'onglets en bas, a portee de pouce : Agenda, Patients, Journal, Plus */
  .nav { position: fixed; z-index: 25; top: auto; height: auto; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; padding: 6px; border-radius: 34px; }
  .nav .marque, .nav .bouton-compte, .nav .pied, .nav nav a[data-vue="motifs"], .nav nav a[data-vue="horaires"], .nav nav a[data-vue="reglages"] { display: none !important; }
  .nav nav { flex: 1; display: flex; gap: 4px; }
  .nav nav a, .nav nav .onglet-plus { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 2px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .74rem; line-height: 1.1; }
  .nav nav .onglet-plus { border: 0; background: transparent; color: rgba(255,255,255,.78); cursor: pointer; font-family: inherit; }
  .nav nav .onglet-plus[aria-current="page"] { color: var(--encre); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 20px -12px rgba(0,0,0,.5); }
  .nav nav .onglet-plus .icone { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* Bouton + flottant, au-dessus de la barre, sur l'agenda seulement */
  body[data-vue="agenda"] .fab { display: grid; }
  .fab { position: fixed; z-index: 24; place-items: center; right: max(18px, env(safe-area-inset-right)); bottom: calc(96px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--bleu); color: var(--blanc); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 1.5px 1.5px 2px -1px rgba(255,255,255,.7), 0 16px 30px -10px rgba(31,107,255,.65); }
  .fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .fab:active { transform: scale(.94); }

  /* En-tete du jour : le jour en grand, deux boutons, la bande de la semaine ; reste en haut au defilement */
  /* Carte de verre flottante aux coins arrondis, comme la barre d'onglets : en haut, la teinte des barres de Safari
     continue sans coupure jusqu'a elle. */
  .tete-jour { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 10; margin: 0 0 12px; padding: 12px 14px 6px; border-radius: 30px;
    background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.42)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 1.5px 1.5px 2px -1px rgba(255,255,255,.9), 0 20px 40px -26px rgba(13,18,32,.4); }
  .tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tete-jour h1 { min-width: 0; font-size: 1.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tete-jour .sous-ligne { min-height: 32px; margin-top: -2px; }
  .tete-jour .sous-ligne p { min-width: 0; color: var(--sourdine); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bouton-rond { flex-shrink: 0; }
  /* Pastille de 32 px a l'oeil, 44 px au doigt (marges negatives compensees) */
  .pastille { flex-shrink: 0; min-height: 32px; margin: -6px 0; padding: 0 14px; position: relative; border: 0; border-radius: 999px; font-size: .9rem; color: var(--encre); cursor: pointer; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
  .bouton-rond { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--encre); cursor: pointer; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
  .pastille::after { content: ""; position: absolute; inset: -6px 0; }
  .tete-jour .bande-jours { margin: 6px -4px 0; }
  .bande-jours button { min-height: 58px; gap: 1px; }
  .bande-jours i { width: 5px; height: 5px; border-radius: 50%; }
  .bande-jours i.plein { background: var(--bleu); }
  .bande-jours button[aria-pressed="true"] i.plein { background: var(--encre); }

  /* La journee en liste : une carte par rendez-vous, lisible d'un pouce */
  .corps-jour.depuis-droite { animation: glisse-droite .22s ease-out; }
  .corps-jour.depuis-gauche { animation: glisse-gauche .22s ease-out; }
  .liste-jour { display: flex; flex-direction: column; gap: 8px; }
  .carte-rdv, .carte-absence { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px 16px; border: 0; border-radius: 22px; text-align: left; font: inherit; color: var(--encre);
    background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.5)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 1.5px 1.5px 2px -1px rgba(255,255,255,.9), 0 16px 30px -26px rgba(13,18,32,.45); }
  .carte-rdv { cursor: pointer; }
  .carte-rdv:active { transform: scale(.985); background: rgba(255,255,255,.85); }
  .carte-rdv .heure, .carte-absence .heure { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
  .heure b { font-weight: 500; font-size: 1rem; }
  .heure small { font-size: .8rem; color: var(--sourdine); }
  .infos { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-left: 12px; border-left: 2px solid rgba(31,107,255,.35); }
  .infos b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .point-agent { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--bleu); vertical-align: middle; }
  .infos small { font-size: .85rem; color: var(--sourdine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .carte-absence { color: var(--sourdine); background: repeating-linear-gradient(135deg, rgba(255,255,255,.72) 0 6px, rgba(236,238,242,.72) 6px 12px); }
  .carte-absence .infos { border-left-color: rgba(13,18,32,.15); }
  .carte-absence .infos b { color: var(--texte); }
  .repere-maintenant { display: flex; align-items: center; gap: 8px; margin: 2px 0; color: var(--bleu); font-size: .78rem; font-variant-numeric: tabular-nums; }
  .repere-maintenant::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }
  .repere-maintenant::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--bleu); }
  .vide-jour { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 20px; border-radius: 22px; text-align: center; color: var(--sourdine); background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.4)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
  /* La grille, quand on la choisit : elle tient entre l'en-tete et la barre d'onglets */
  .corps-jour .agenda .corps { max-height: max(300px, calc(100svh - 300px - env(safe-area-inset-bottom))); }

  /* Feuilles du bas : une poignee, le volet au-dessus de la barre avec un voile */
  dialog::before, #volet::before { content: ""; display: block; flex: none; width: 38px; height: 5px; margin: -10px auto 10px; border-radius: 3px; background: rgba(13,18,32,.18); }
  #volet { z-index: 40; box-shadow: 0 0 0 100vmax rgba(13,18,32,.28), 0 -20px 50px rgba(13,18,32,.15); }
  #toasts { bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* Feuille Plus : ecrans secondaires et compte */
  .feuille-plus { display: none; }
  .feuille-plus[open] { display: flex; flex-direction: column; gap: 14px; }
  .plus-tete { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
  .plus-tete b { font-weight: 500; font-size: 1.15rem; }
  .plus-liste { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
  .plus-liste > * { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 16px; border: 0; background: transparent; font: inherit; color: var(--encre); text-align: left; text-decoration: none; cursor: pointer; }
  .plus-liste > * + * { border-top: 1px solid rgba(13,18,32,.07); }
  .plus-liste > *:active { background: rgba(255,255,255,.7); }
  .plus-liste i { margin-left: auto; font-style: normal; color: var(--sourdine); font-size: 1.2rem; }
  .plus-liste [data-action="deconnexion"] { color: #B42318; }
  @keyframes glisse-droite { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes glisse-gauche { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .corps-jour.depuis-droite, .corps-jour.depuis-gauche { animation: none; } }

/* Telephone : Safari peint sa barre d'etat et sa barre d'adresse de la couleur de fond de la page.
   Les lumieres se fondent vers cette meme teinte en haut et en bas : plus de coupure nette. */
@media (max-width: 700px) {
  body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, #E6E4F8 0, #E6E4F8 8px, rgba(230,228,248,0) 90px, rgba(230,228,248,0) calc(100% - 150px), #E6E4F8 100%); }
}

/* Mon compte : sur ordinateur le dialogue montre tout ; sur telephone, un menu facon Reglages d'iPhone
   (carte d'identite, lignes Mot de passe et Adresse e-mail, interrupteur des nouveautes) puis un ecran par formulaire. */
.compte-menu, .retour-panneau { display: none; }
@media (max-width: 700px) {
  #dlg-compte .compte-menu { display: flex; flex-direction: column; gap: 14px; }
  #dlg-compte[data-panneau="menu"] #compte-identite, #dlg-compte[data-panneau="menu"] #form-compte, #dlg-compte[data-panneau="menu"] #form-adresse { display: none; }
  #dlg-compte:not([data-panneau="menu"]) .compte-menu, #dlg-compte:not([data-panneau="menu"]) .compte-courriels, #dlg-compte:not([data-panneau="menu"]) .compte-fermer, #dlg-compte:not([data-panneau="menu"]) #compte-identite { display: none; }
  #dlg-compte[data-panneau="mdp"] #form-adresse, #dlg-compte[data-panneau="adresse"] #form-compte { display: none; }
  #dlg-compte:not([data-panneau="menu"]) .retour-panneau { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -6px 0 -6px -4px; padding: 0 4px; border: 0; background: none; color: var(--bleu); font: inherit; font-size: 1rem; cursor: pointer; }
  #dlg-compte h2 { font-size: 1.5rem; margin: 0; }
  /* Les cadres a legende disparaissent : le titre de l'ecran dit deja de quoi il s'agit */
  #dlg-compte fieldset { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 14px; }
  #dlg-compte legend { display: none; }
  #dlg-compte form .actions .btn { width: 100%; }
  #dlg-compte #form-adresse .btn.ghost { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
  .compte-carte { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
  .compte-carte .avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--encre); color: var(--blanc); font-weight: 500; font-size: 1.1rem; letter-spacing: .02em; }
  .compte-carte div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .compte-carte b { font-weight: 500; font-size: 1.1rem; }
  .compte-carte small { color: var(--sourdine); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Nouveautes : une ligne de liste avec un interrupteur */
  #dlg-compte .compte-courriels { gap: 8px; }
  .compte-courriels label.case { flex-direction: row-reverse; justify-content: space-between; gap: 14px; min-height: 54px; padding: 10px 16px; line-height: 1.3; border-radius: 20px; font-size: 1rem; color: var(--encre); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
  .compte-courriels .aide { padding: 0 16px; font-size: .85rem; }
  .compte-courriels input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: rgba(120,120,128,.2); cursor: pointer; transition: background .2s ease; }
  .compte-courriels input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--blanc); box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.08); transition: transform .2s ease; }
  .compte-courriels input[type="checkbox"]:checked { background: var(--bleu); }
  .compte-courriels input[type="checkbox"]:checked::before { transform: translateX(20px); }
  .plus-liste button small { margin-left: auto; color: var(--sourdine); font-size: .85rem; }
}

/* Telephone, agenda : la page ne defile plus. Seule la journee defile, entre l'en-tete et la barre d'onglets,
   avec un fondu a ses bords : aucune carte ne passe sous l'en-tete ni sous la barre. */
@media (max-width: 700px) {
  body[data-vue="agenda"] #application { min-height: 0; }
  body[data-vue="agenda"] #contenu { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
    height: calc(100svh - max(12px, env(safe-area-inset-top)) - 92px - env(safe-area-inset-bottom)); }
  body[data-vue="agenda"] .tete-jour { position: relative; top: auto; flex: none; }
  .corps-jour.mode-liste, .corps-jour.mode-grille { flex: 1; min-height: 0; margin: -4px -12px 0; padding: 14px 12px 84px; /* le bouton + ne cache jamais le bas */
    overflow-y: auto; overscroll-behavior: contain; }
  .corps-jour.mode-liste {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
  /* En grille, la grille garde toute sa hauteur et c'est la zone qui defile. La zone est elle-meme la carte
     arrondie et decoupe son contenu : la ligne des praticiens colle exactement a son bord, sans coin ni bande
     par ou la grille deborderait (vecu sur iPhone). */
  .corps-jour.mode-grille { margin: 0; padding: 0; border-radius: 20px; overflow-x: hidden; overflow-y: auto;
    background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 20px 40px -30px rgba(13,18,32,.35);
    -webkit-mask-image: none; mask-image: none; }
  .corps-jour.mode-grille .agenda { border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .corps-jour.mode-grille .agenda .corps { max-height: none; overflow: visible; }
  .corps-jour.mode-grille .agenda.tient { overflow: visible; }
  .corps-jour.mode-grille .agenda.tient .entetes { position: sticky; top: 0; z-index: 4; background: rgba(246,246,252,.98); }
  /* Pas de rebond iOS dans la grille ni sur la page de l'agenda : tirer au-dela du haut ou du bas decollait
     la ligne des praticiens et decouvrait le fond de la carte (vecu sur iPhone). */
  .corps-jour.mode-grille { overscroll-behavior: none; }
  html:has(body[data-vue="agenda"]), body[data-vue="agenda"] { overscroll-behavior: none; }
  /* Filet si un iOS rebondit quand meme : la couleur de la ligne des praticiens continue au-dessus d'elle. */
  .corps-jour.mode-grille .agenda.tient .entetes::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 240px; background: rgba(246,246,252,.98); pointer-events: none; }
}