/* Secours Ops (appli des formateurs du classeur Suivi PSE) : feuille de style unique.
   Lisible en plein soleil (contrastes forts, texte 18 px), cibles tactiles de 48 px, champs en 18 px (au-dessous de 16 px,
   Safari sur iPhone agrandit la page au toucher d'un champ), de 320 à 430 px de large sans défilement horizontal, zones
   sûres de l'iPhone (viewport-fit=cover et env(safe-area-inset-*)), thèmes clair et sombre. */

:root {
  --fond: #eef2f5;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --texte: #0d1b24;
  --texte-2: #3a4b57;
  --primaire: #0b5d7a;
  --primaire-fort: #08465c;
  --sur-primaire: #ffffff;
  --primaire-doux: #dcebf2;
  --bordure: #74889a;
  --bordure-douce: #c9d5dd;
  --succes: #17683f;
  --succes-fond: #d9eee2;
  --attente: #7a4f00;
  --attente-fond: #faecd2;
  --danger: #a8221a;
  --danger-fond: #f9dedb;
  --info-fond: #e1edf5;
  --barre: #0b5d7a;
  --sur-barre: #ffffff;
  --maquette-fond: #ffe9a6;
  --maquette-texte: #4d3800;
  --ombre: 0 1px 2px rgba(13, 27, 36, 0.12), 0 2px 8px rgba(13, 27, 36, 0.06);
  --focus: #e07b00;
  --rayon: 14px;
  --gouttiere: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0b1216;
    --surface: #152129;
    --surface-2: #1b2a33;
    --texte: #eef3f6;
    --texte-2: #b9c7d0;
    --primaire: #6cc6ea;
    --primaire-fort: #9bd9f2;
    --sur-primaire: #04202b;
    --primaire-doux: #183746;
    --bordure: #7f95a3;
    --bordure-douce: #2c3d48;
    --succes: #7fdca7;
    --succes-fond: #133524;
    --attente: #f4c86f;
    --attente-fond: #3a2c0c;
    --danger: #ff9a8f;
    --danger-fond: #3d1714;
    --info-fond: #16303d;
    --barre: #0f1e26;
    --sur-barre: #eef3f6;
    --maquette-fond: #4a3a07;
    --maquette-texte: #ffe9a6;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.5);
    --focus: #ffb347;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fond: #0b1216;
  --surface: #152129;
  --surface-2: #1b2a33;
  --texte: #eef3f6;
  --texte-2: #b9c7d0;
  --primaire: #6cc6ea;
  --primaire-fort: #9bd9f2;
  --sur-primaire: #04202b;
  --primaire-doux: #183746;
  --bordure: #7f95a3;
  --bordure-douce: #2c3d48;
  --succes: #7fdca7;
  --succes-fond: #133524;
  --attente: #f4c86f;
  --attente-fond: #3a2c0c;
  --danger: #ff9a8f;
  --danger-fond: #3d1714;
  --info-fond: #16303d;
  --barre: #0f1e26;
  --sur-barre: #eef3f6;
  --maquette-fond: #4a3a07;
  --maquette-texte: #ffe9a6;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5);
  --focus: #ffb347;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fond);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Barre du haut (sous la barre d'état de l'iPhone : zone sûre) ---------- */
.barre {
  position: sticky; top: 0; z-index: 20;
  background: var(--barre); color: var(--sur-barre);
  padding: env(safe-area-inset-top, 0px) calc(env(safe-area-inset-right, 0px) + 8px) 0 calc(env(safe-area-inset-left, 0px) + 8px);
}
.barre-ligne {
  display: flex; align-items: center; gap: 4px; min-height: 56px; max-width: 40rem; margin: 0 auto;
}
.barre-titre { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 700; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 48px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.barre-bouton:active { background: rgba(255, 255, 255, 0.16); }
.barre-bouton svg { width: 26px; height: 26px; flex: none; }

.bandeau-maquette {
  background: var(--maquette-fond); color: var(--maquette-texte); font-weight: 700; font-size: 16px; text-align: center;
  padding: 6px calc(env(safe-area-inset-right, 0px) + var(--gouttiere)) 6px calc(env(safe-area-inset-left, 0px) + var(--gouttiere));
}

/* ---------- Bandeau d'état ---------- */
.bandeau-etat {
  background: var(--surface); border-bottom: 1px solid var(--bordure-douce);
  padding: 8px calc(env(safe-area-inset-right, 0px) + var(--gouttiere)) 8px calc(env(safe-area-inset-left, 0px) + var(--gouttiere));
}
.bandeau-etat-interieur { max-width: 40rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 16px; }
.pastille { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pastille::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.pastille-en-ligne { color: var(--succes); }
.pastille-hors-ligne { color: var(--texte-2); }
.pastille-hors-ligne::before { background: transparent; border: 2px solid currentColor; }
/* « Connexion difficile » : le téléphone se dit connecté, mais rien ne passe (sous-sol, signal faible). */
.pastille-difficile { color: var(--attente); }
.pastille-difficile::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); border: 2px solid currentColor; }
.bandeau-file { color: var(--texte-2); }
.bandeau-file strong { color: var(--attente); }
.bandeau-envoi { color: var(--texte-2); display: inline-flex; align-items: center; gap: 8px; }
.roue {
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bordure-douce); border-top-color: var(--primaire);
  animation: tourne 0.9s linear infinite; flex: none;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.bandeau-maj {
  background: var(--info-fond); border-bottom: 1px solid var(--bordure-douce);
  padding: 10px calc(env(safe-area-inset-right, 0px) + var(--gouttiere)) 10px calc(env(safe-area-inset-left, 0px) + var(--gouttiere));
}
.bandeau-maj-interieur { max-width: 40rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.bandeau-maj-interieur p { margin: 0; font-weight: 600; }

/* ---------- Écran ---------- */
.ecran {
  max-width: 40rem; margin: 0 auto;
  padding: 16px calc(env(safe-area-inset-right, 0px) + var(--gouttiere)) calc(env(safe-area-inset-bottom, 0px) + 32px) calc(env(safe-area-inset-left, 0px) + var(--gouttiere));
}
.chargement { text-align: center; color: var(--texte-2); padding: 48px 0; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
.discret { color: var(--texte-2); font-size: 16px; }
.petit { font-size: 16px; }

.section { margin: 0 0 24px; }
.section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.section-titre h2 { margin: 0; }

.carte {
  background: var(--surface); border: 1px solid var(--bordure-douce); border-radius: var(--rayon);
  padding: 14px 16px; box-shadow: var(--ombre);
}
.carte + .carte { margin-top: 12px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 18px; border-radius: 12px; border: 2px solid var(--primaire);
  background: var(--surface); color: var(--primaire); font-size: 18px; font-weight: 700; line-height: 1.2;
  text-align: center; cursor: pointer; text-decoration: none; touch-action: manipulation;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.bouton svg { width: 24px; height: 24px; flex: none; }
.bouton:active { transform: translateY(1px); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.bouton-principal { background: var(--primaire); color: var(--sur-primaire); }
.bouton-principal:active { background: var(--primaire-fort); border-color: var(--primaire-fort); }
.bouton-danger { border-color: var(--danger); color: var(--danger); }
.bouton-danger-plein { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.bouton-large { width: 100%; }
.bouton-geant { min-height: 72px; font-size: 22px; border-radius: 16px; }
.bouton-geant svg { width: 30px; height: 30px; }
.bouton-lien {
  border: 0; background: transparent; color: var(--primaire); min-height: 48px; padding: 8px 4px;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 17px;
}
.boutons { display: flex; flex-direction: column; gap: 10px; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.boutons-ligne > .bouton { flex: 1 1 140px; }

/* ---------- Alertes ---------- */
.alerte {
  border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 16px; border: 2px solid transparent;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
}
.alerte > svg { width: 28px; height: 28px; grid-row: span 3; margin-top: 2px; }
.alerte-corps { min-width: 0; }
.alerte h2, .alerte h3 { font-size: 19px; margin: 0 0 4px; }
.alerte p { margin: 0 0 8px; }
.alerte p:last-child { margin-bottom: 0; }
.alerte .boutons-ligne { margin-top: 10px; }
.alerte-info { background: var(--info-fond); border-color: var(--bordure-douce); }
.alerte-attention { background: var(--attente-fond); border-color: var(--attente); }
.alerte-attention > svg { color: var(--attente); }
.alerte-danger { background: var(--danger-fond); border-color: var(--danger); }
.alerte-danger > svg { color: var(--danger); }
.alerte-succes { background: var(--succes-fond); border-color: var(--succes); }
.alerte-succes > svg { color: var(--succes); }

/* ---------- Accueil ---------- */
.salut { font-size: 20px; margin-bottom: 14px; }
.salut strong { font-weight: 700; }
.seance {
  background: var(--surface); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 12px 14px; box-shadow: var(--ombre);
}
.seance + .seance { margin-top: 10px; }
.seance-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.seance-date { font-weight: 700; font-size: 18px; }
.seance-themes { margin: 4px 0; font-weight: 600; }
.seance-infos { color: var(--texte-2); font-size: 16px; margin: 0; }
.seance details { margin-top: 6px; font-size: 16px; }
.seance summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primaire); font-weight: 600; }
.seance-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.seance-actions .bouton { min-height: 48px; font-size: 17px; padding: 8px 14px; }
.etiquette {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 15px; font-weight: 700;
  border: 1px solid currentColor; white-space: nowrap;
}
.etiquette svg { width: 16px; height: 16px; }
.etiquette-envoyee { color: var(--succes); background: var(--succes-fond); }
.etiquette-attente { color: var(--attente); background: var(--attente-fond); }
.etiquette-erreur { color: var(--danger); background: var(--danger-fond); }
.liste-vide { color: var(--texte-2); text-align: center; padding: 20px 8px; }

/* ---------- Saisie ---------- */
.etapes { margin: 0 0 14px; }
.etapes-texte { font-size: 16px; color: var(--texte-2); font-weight: 600; margin-bottom: 6px; }
.etapes-barre { display: flex; gap: 6px; }
.etapes-barre span { flex: 1; height: 6px; border-radius: 3px; background: var(--bordure-douce); }
.etapes-barre span.fait { background: var(--primaire); }

.choix-date { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.choix-date .bouton { justify-content: flex-start; text-align: left; }
.choix-date .bouton[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); }
.choix-date small { display: block; font-weight: 500; font-size: 16px; }
.date-choisie { font-size: 20px; font-weight: 700; margin: 4px 0 12px; }

.calendrier { background: var(--surface); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 10px; margin-bottom: 14px; }
.calendrier-tete { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.calendrier-tete button {
  min-width: 48px; min-height: 48px; border-radius: 12px; border: 1px solid var(--bordure-douce); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.calendrier-tete button svg { width: 24px; height: 24px; }
.calendrier-tete button[disabled] { opacity: 0.35; cursor: not-allowed; }
/* Le nom du mois est un bouton : il ouvre le choix direct du mois et de l'année (rattrapage). */
.calendrier-tete .calendrier-mois {
  flex: 1; min-width: 0; gap: 6px; font-weight: 700; font-size: 19px; color: var(--primaire); background: var(--surface);
  border: 2px solid var(--primaire); padding: 0 8px;
}
.calendrier-tete .calendrier-mois svg { width: 20px; height: 20px; flex: none; }
.calendrier-tete .calendrier-mois[aria-expanded="true"] svg { transform: rotate(180deg); }
.calendrier-annees { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.calendrier-choix-mois { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 2px; }
.calendrier-mois-bouton {
  min-height: 48px; border-radius: 10px; border: 2px solid var(--primaire); background: var(--surface); color: var(--primaire);
  font-weight: 700; font-size: 17px; cursor: pointer; padding: 4px 2px;
}
.calendrier-mois-bouton[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); }
.calendrier-mois-bouton[disabled] { border-color: var(--bordure-douce); color: var(--bordure); cursor: not-allowed; text-decoration: line-through; }
.calendrier table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier th { font-size: 15px; color: var(--texte-2); font-weight: 600; padding: 4px 0; }
.calendrier td { padding: 2px; text-align: center; }
.calendrier td button {
  width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid transparent; background: transparent; font-size: 17px; cursor: pointer;
}
.calendrier td button.aujourdhui { border-color: var(--primaire); font-weight: 700; }
.calendrier td button[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); font-weight: 700; }
.calendrier td button[disabled] { color: var(--bordure); cursor: not-allowed; text-decoration: line-through; opacity: 0.6; }

.case {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--bordure-douce); background: var(--surface);
}
.case:first-child { border-top-left-radius: var(--rayon); border-top-right-radius: var(--rayon); }
.case:last-child { border-bottom: 0; border-bottom-left-radius: var(--rayon); border-bottom-right-radius: var(--rayon); }
.cases { border: 1px solid var(--bordure-douce); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case-boite {
  width: 30px; height: 30px; flex: none; border: 2px solid var(--bordure); border-radius: 8px; background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
}
.case-boite svg { width: 22px; height: 22px; opacity: 0; color: var(--sur-primaire); }
.case input:checked + .case-boite { background: var(--primaire); border-color: var(--primaire); }
.case input:checked + .case-boite svg { opacity: 1; }
.case input:focus-visible + .case-boite { outline: 3px solid var(--focus); outline-offset: 2px; }
.case-texte { flex: 1; min-width: 0; font-weight: 600; }
.case-texte small { display: block; font-weight: 500; color: var(--texte-2); font-size: 15px; }
.case.cochee { background: var(--primaire-doux); }

.recherche {
  width: 100%; min-height: 52px; font-size: 18px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--bordure);
  background: var(--surface); text-transform: uppercase;
}
.recherche::placeholder { text-transform: none; color: var(--texte-2); opacity: 1; }
.champ-libelle { display: block; font-weight: 700; margin-bottom: 6px; }
/* La recherche remonte juste sous la barre du haut : ses résultats restent au-dessus du clavier du téléphone. */
.champ-recherche { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 64px); }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.filtre {
  min-height: 44px; min-width: 64px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--primaire);
  background: var(--surface); color: var(--primaire); font-weight: 700; cursor: pointer; font-size: 17px;
}
.filtre[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); }

.compteur {
  position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--fond); padding: 8px 0; font-weight: 700; font-size: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
}
.grille-personnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.personne {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 4px 4px; border-radius: 12px; border: 2px solid var(--bordure); background: var(--surface); cursor: pointer;
}
.personne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.personne-tri { font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.personne-groupe { font-size: 14px; color: var(--texte-2); font-weight: 600; }
.personne.cochee { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }
.personne.cochee .personne-groupe { color: var(--sur-primaire); }
.personne.cochee::after {
  content: ""; position: absolute; top: 5px; right: 6px; width: 8px; height: 13px;
  border: solid var(--sur-primaire); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.personne:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.partis { margin-top: 18px; }
.partis summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: var(--primaire); }

.conseil { background: var(--info-fond); border: 1px dashed var(--primaire); border-radius: var(--rayon); padding: 12px 14px; margin: 14px 0; }
.conseil h3 { font-size: 18px; margin-bottom: 4px; }
.conseil ol { margin: 4px 0 8px; padding-left: 24px; }
.conseil li { margin: 2px 0; }
.indicatif { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-2); }

.pied-action {
  position: sticky; bottom: 0; z-index: 5; background: var(--fond);
  padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px); margin-top: 16px;
  border-top: 1px solid var(--bordure-douce);
  display: flex; gap: 10px;
}
.pied-action .bouton { flex: 1; }
.pied-action .bouton-retour { flex: 0 0 auto; }

.recap dt { font-weight: 700; color: var(--texte-2); font-size: 16px; margin-top: 12px; }
.recap dt:first-child { margin-top: 0; }
.recap dd { margin: 2px 0 0; font-size: 18px; }
.recap ul { margin: 4px 0 0; padding-left: 22px; }
.recap .bouton-lien { font-size: 16px; min-height: 44px; }

.resultat { text-align: center; padding: 12px 0; }
.resultat svg.grand { width: 72px; height: 72px; }
.resultat-succes svg.grand { color: var(--succes); }
.resultat-attente svg.grand { color: var(--attente); }
.resultat-erreur svg.grand { color: var(--danger); }

/* ---------- Activation et installation ---------- */
.champ-jeton {
  width: 100%; min-height: 60px; font-size: 24px; letter-spacing: 0.12em; text-align: center; font-weight: 700;
  padding: 10px; border-radius: 12px; border: 2px solid var(--bordure); background: var(--surface); text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.champ-jeton::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 18px; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: var(--texte-2); opacity: 1;
}
.erreur-champ { color: var(--danger); font-weight: 600; margin-top: 8px; }
.code-affiche {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 28px; font-weight: 800; letter-spacing: 0.12em;
  text-align: center; background: var(--surface); border: 2px dashed var(--primaire); border-radius: var(--rayon); padding: 12px; margin: 8px 0 12px;
  user-select: all; -webkit-user-select: all;
}
.etapes-install { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: etape; }
.etapes-install li {
  counter-increment: etape; display: grid; grid-template-columns: 28px 88px 1fr; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 10px 12px; margin-bottom: 10px;
}
.etapes-install li::before {
  content: counter(etape); grid-column: 1; grid-row: 1;
  width: 28px; height: 28px; border-radius: 50%; background: var(--primaire); color: var(--sur-primaire);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.etapes-install li > svg { grid-column: 2; grid-row: 1; width: 88px; height: 66px; }
.etapes-install li > div { grid-column: 3; }
.etapes-install p { margin: 0; }
.etapes-install strong { white-space: nowrap; }

/* Pictogrammes d'installation (couleurs du thème) */
.p-trait { fill: none; stroke: var(--texte); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.p-fond { fill: var(--surface-2); stroke: var(--bordure); stroke-width: 2; }
.p-plein { fill: var(--texte); }
.p-accent { fill: none; stroke: var(--focus); stroke-width: 3.5; }
.p-accent-plein { fill: var(--focus); }
.p-primaire { fill: var(--primaire); }
.p-blanc { fill: var(--sur-primaire); }
.p-marque { fill: none; stroke: var(--sur-primaire); stroke-linecap: round; }
.p-marque-piste { stroke-opacity: 0.35; }
.p-marque-jour { fill: none; stroke: var(--primaire); }
.p-texte { fill: var(--texte); font-size: 11px; font-weight: 700; font-family: inherit; }

/* ---------- Réglages ---------- */
.reglage { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--bordure-douce); }
.reglage:last-child { border-bottom: 0; }
.reglage-nom { font-weight: 700; }
.reglage-valeur { color: var(--texte-2); text-align: right; min-width: 0; }
.adresse { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; word-break: break-all; text-align: left; }
.choix-theme { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Dialogue et messages ---------- */
.calque {
  position: fixed; inset: 0; z-index: 100; background: rgba(5, 12, 16, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 12px);
}
@media (min-height: 560px) and (min-width: 480px) { .calque { align-items: center; } }
.dialogue {
  background: var(--surface); color: var(--texte); border-radius: 18px; width: 100%; max-width: 30rem; max-height: calc(100% - 8px); overflow: auto;
  padding: 20px 18px 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.dialogue h2 { font-size: 22px; }
.dialogue .boutons { margin-top: 16px; }

/* Messages brefs : en haut, sous la barre, et « transparents » au toucher : ils ne cachent jamais les boutons d'action du bas. */
.messages {
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  padding: 0 calc(env(safe-area-inset-right, 0px) + 16px) 0 calc(env(safe-area-inset-left, 0px) + 16px);
}
.message {
  pointer-events: none; max-width: 30rem; width: 100%; background: var(--texte); color: var(--fond); border-radius: 14px;
  padding: 12px 16px; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); opacity: 0.96;
}

/* 4 colonnes dès 360 px : deux fois plus de personnes visibles d'un coup (tuiles de 52 px de haut). */
@media (min-width: 360px) {
  .grille-personnes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lien-affiche { font-size: 15px; font-weight: 600; letter-spacing: normal; word-break: break-all; text-align: left; }
.seance-actions .bouton-corriger { color: var(--primaire); }
/* Au-dessous de 400 px, le calendrier prend toute la largeur : 7 jours de 44 px au moins, même sur 320 px. */
@media (max-width: 399px) {
  .calendrier {
    margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere));
    border-radius: 0; border-left: 0; border-right: 0; padding: 8px 2px;
  }
  .calendrier td { padding: 1px 0; }
}
.logo-activation { width: 64px; height: 64px; }

@media (max-width: 359px) {
  :root { --gouttiere: 12px; }
  body { font-size: 17px; }
  .barre-titre { font-size: 18px; }
  .bouton-geant { font-size: 20px; }
  .etapes-install li { grid-template-columns: 24px 64px 1fr; gap: 8px; padding: 8px; }
  .etapes-install li::before { width: 24px; height: 24px; font-size: 15px; }
  .etapes-install li > svg { width: 64px; height: 48px; }
  .personne-tri { font-size: 17px; }
  .pied-action .bouton { padding: 10px 10px; gap: 6px; }
  .pied-action .bouton-retour svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}