/* Omni-Time — © 2026 Ferrus Dantioch
   Licence : Creative Commons BY-NC-ND 4.0 (texte complet dans le fichier LICENSE)
   https://creativecommons.org/licenses/by-nc-nd/4.0/ */

/* ============================================================
   OMNI-TIME — feuille de style
   Principes appliqués :
   - lisible de loin : très gros chiffres, contrastes élevés
   - boutons larges (au moins 56 px de haut, 84 px pour les principaux)
   - aucune animation agressive, aucun clignotement
   - le réglage « réduire les animations » du téléphone est respecté
   - aucun blanc pur ni noir pur : pas de lumière forte
   Les couleurs de chaque thème sont regroupées tout en haut (partie 2).
   ============================================================ */


/* ---------- 1. Polices ----------
   Les trois polices du thème Omni-système, rangées DANS l'application
   (fichiers .woff2 à côté de celui-ci) : elles marchent donc hors ligne,
   sans rien demander à Google. Ce sont exactement les fichiers de
   L'Atelier : des polices « variables » (un seul fichier contient toutes
   les graisses), limitées aux lettres latines, accents français compris.
   Licence : SIL Open Font License 1.1 (fichier POLICES-OFL.txt). */

@font-face {
  font-family: "Oxanium";               /* titres et boutons */
  src: url("./oxanium.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;                   /* le texte s'affiche tout de suite */
}
@font-face {
  font-family: "Literata";              /* texte courant */
  src: url("./literata.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";        /* chiffres */
  src: url("./jetbrains-mono.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. Thèmes ----------
   Le thème choisi est posé sur <html> par l'attribut data-theme
   (« omni », « sombre » ou « clair »). Chaque thème définit les mêmes
   « variables » (les noms qui commencent par --) : le reste de la
   feuille de style ne fait que les utiliser.

   Couleurs des phases d'une séance : --echauffement, --travail,
   --repos, --fini. */

/* Omni-système (thème par défaut) : valeurs reprises À L'IDENTIQUE du
   portfolio de l'Omni-système et de L'Atelier (fichier css/theme.css).
   Les couleurs des phases sont, elles aussi, celles du portfolio :
   l'or de la Fantasy pour l'échauffement, le violet du logo pour le
   travail, le bleu du Space opéra pour le repos. Le rose Cyberpunk et le
   rouge Horreur sont volontairement écartés : trop vifs pour un écran
   regardé longtemps. */
:root,
html[data-theme="omni"] {
  --fond:        #14111d;   /* « nuit » : encre violette très sombre */
  --surface:     #1d1929;   /* « table » : cartes, panneaux */
  --surface-2:   #251f35;   /* « table haute » : boutons, un cran plus clair */
  --trait:       #332c47;   /* filets et bordures */
  --texte:       #e9e4f2;   /* texte principal, jamais blanc pur */
  --discret:     #a59cbb;   /* texte secondaire */
  --accent:      #a777ff;   /* violet du logo */
  --accent-texte:#140d24;   /* texte posé sur un bouton violet */
  --halo:        #d6c2ff;   /* lueur de l'anneau (focus, liens) */
  --lien:        #d6c2ff;
  --echauffement:#c9a24a;   /* or « Fantasy » */
  --travail:     #a777ff;   /* violet du logo */
  --repos:       #5fb4ff;   /* bleu « Space opéra » */
  --fini:        #d6c2ff;   /* lueur de l'anneau */
  --danger:      #e0705f;   /* actions qui font perdre quelque chose */
  --danger-fond: #3a2027;
  --danger-texte:#e9e4f2;

  --f-titre:     "Oxanium", "Trebuchet MS", system-ui, sans-serif;
  --f-texte:     "Literata", Georgia, "Times New Roman", serif;
  --f-chiffres:  "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Cartes à la façon du portfolio : liseré épais en haut, coins plus
     arrondis en bas qu'en haut. */
  --carte-bord:   1px solid #332c47;
  --carte-lisere: 4px solid #a777ff;
  --rayon-carte:  6px 6px 14px 14px;
  --rayon-bouton: 10px;
  /* Lueur discrète autour des gros chiffres, comme l'anneau du logo
     (la « lueur douce » de L'Atelier) */
  --lueur-force: 22%;

  color-scheme: dark;
}

/* Sombre : la gamme « Bleu-gris » de Cap et Refuge, version sombre.
   Les couleurs des phases sont les accents des autres gammes de Cap
   (lavande, pêche, sauge, sable), toutes désaturées. Polices du
   téléphone, comme dans Cap et Refuge. */
html[data-theme="sombre"] {
  --fond:        #161b21;
  --surface:     #1d242d;
  --surface-2:   #252e39;
  --trait:       #344050;
  --texte:       #d4dae0;
  --discret:     #97a2ae;
  --accent:      #9dbcd0;
  --accent-texte:#161b21;
  --halo:        #9dbcd0;
  --lien:        #9dbcd0;
  --echauffement:#c0b6e6;   /* lavande */
  --travail:     #ddb8a3;   /* pêche */
  --repos:       #a5ccb4;   /* sauge */
  --fini:        #d4b597;   /* sable */
  --danger:      #a97f6d;   /* terracotta de Refuge */
  --danger-fond: #4a3a34;
  --danger-texte:#f0d9cd;

  --f-titre:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texte:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-chiffres:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --carte-bord:   1px solid #344050;
  --carte-lisere: 1px solid #344050;
  --rayon-carte:  16px;
  --rayon-bouton: 14px;
  --lueur-force: 0%;
  color-scheme: dark;
}

/* Clair : la gamme « Bleu-gris » de Cap et Refuge, version claire (fond
   gris très clair, jamais blanc pur). Les couleurs des phases sont les
   accents clairs des autres gammes de Cap, légèrement foncés pour
   atteindre un contraste d'au moins 5,5:1 sur le fond (lisible de loin
   en plein jour). */
html[data-theme="clair"] {
  --fond:        #eef0f2;
  --surface:     #f7f8f9;
  --surface-2:   #e9ebee;
  --trait:       #d7dbe0;
  --texte:       #3b4046;
  --discret:     #626870;
  --accent:      #4f7086;
  --accent-texte:#f7f8f9;
  --halo:        #4f7086;
  --lien:        #3f5c6f;
  --echauffement:#5f5890;   /* lavande foncée */
  --travail:     #7d5647;   /* pêche foncée */
  --repos:       #47655c;   /* sauge foncée */
  --fini:        #76593b;   /* sable foncé */
  --danger:      #c08e78;   /* terracotta de Refuge */
  --danger-fond: #f0dcd2;
  --danger-texte:#5a3a2c;

  --f-titre:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texte:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-chiffres:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --carte-bord:   1px solid #d7dbe0;
  --carte-lisere: 1px solid #d7dbe0;
  --rayon-carte:  16px;
  --rayon-bouton: 14px;
  --lueur-force: 0%;
  color-scheme: light;
}

/* Valeurs communes à tous les thèmes */
:root {
  /* Bord des boutons : à mi-chemin entre le texte secondaire et le fond,
     pour qu'on voie bien où appuyer, sans trait éblouissant. */
  --bord-bouton: color-mix(in srgb, var(--discret) 45%, var(--fond));
  /* Force de la teinte de phase sur le panneau de séance (voir partie 8) */
  --teinte-phase: 9%;
  --duree: 400ms;           /* toutes les transitions, volontairement lentes */
}
/* En clair, une teinte plus légère garde les chiffres au-dessus de 5:1 */
html[data-theme="clair"] { --teinte-phase: 5%; }


/* ---------- 3. Base ---------- */

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

/* Un élément marqué « hidden » est toujours caché, quoi qu'il arrive */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duree), color var(--duree);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}

h1, h2, h3 { font-family: var(--f-titre); line-height: 1.15; margin: 0; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.3rem; font-weight: 700; }
h1:focus { outline: none; }   /* le titre reçoit le focus en changeant d'écran */
p { margin: 0; }

a { color: var(--lien); text-underline-offset: 3px; overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--halo);
  outline-offset: 3px;
  border-radius: 6px;
}

small, .aide { color: var(--discret); font-size: 0.92rem; }

/* Petit libellé en capitales espacées (style du portfolio) */
.etiquette {
  font-family: var(--f-titre);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--discret);
}

.mono { font-family: var(--f-chiffres); font-variant-numeric: tabular-nums; }

/* Texte réservé aux lecteurs d'écran : invisible, mais lu à voix haute */
.annonce {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pile { display: grid; gap: 18px; }

.titre-section { margin: 4px 0 12px; }

.erreur {
  color: var(--danger-texte);
  background: var(--danger-fond);
  border: 2px solid var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
}

.avis {
  color: var(--texte);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
}


/* ---------- 4. Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--surface-2);
  color: var(--texte);
  font: 700 1.05rem/1.2 var(--f-titre);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* évite la sélection de texte et le menu « copier » sur un appui long */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background-color var(--duree), border-color var(--duree), color var(--duree);
}

.bouton-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
}

.bouton:disabled { opacity: 0.45; cursor: not-allowed; }

/* Bouton « armé » : premier appui fait sur une action qui fait perdre
   quelque chose ; il faut appuyer une seconde fois pour confirmer. */
.bouton.arme {
  background: var(--danger-fond);
  border-color: var(--danger);
  color: var(--danger-texte);
}

.large  { width: 100%; }
.grand  { width: 100%; min-height: 64px; font-size: 1.15rem; }
.enorme { width: 100%; min-height: 84px; font-size: 1.5rem; letter-spacing: 0.04em; }

.rangee-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rangee-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.commandes { display: grid; gap: 12px; }


/* ---------- 5. Accueil ---------- */

.entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 20px;
}
.logo { width: 44px; height: 44px; border-radius: 10px; display: block; }

/* Le nom « Omni-Time » garde la police du logo dans tous les thèmes */
.marque {
  font-family: "Oxanium", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.02em;
}
.marque span { color: var(--accent); }
.marque-petite { font-size: 1.5rem; }

.bandeau {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--rayon-carte);
}
.bandeau strong { font-family: var(--f-titre); font-size: 1.2rem; }

.tuiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.tuile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  background: var(--surface);
  color: var(--texte);
  border: var(--carte-bord);
  border-top: var(--carte-lisere);
  border-radius: var(--rayon-carte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.tuile svg { width: 34px; height: 34px; color: var(--accent); }
.tuile-titre { font-family: var(--f-titre); font-weight: 700; font-size: 1.2rem; }
.tuile-etat { color: var(--discret); font-size: 0.9rem; line-height: 1.35; }
.tuile.active .tuile-etat {
  color: var(--texte);
  font-family: var(--f-chiffres);
  font-variant-numeric: tabular-nums;
}

.liste-seances {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.carte, .bloc {
  background: var(--surface);
  border: var(--carte-bord);
  border-top: var(--carte-lisere);
  border-radius: var(--rayon-carte);
  padding: 18px;
}

.seance { display: grid; gap: 10px; }
.seance-nom { font-size: 1.35rem; overflow-wrap: anywhere; }
.seance-resume { color: var(--discret); font-size: 0.95rem; }
.seance-total { font-size: 0.95rem; }
.seance .rangee-3 .bouton { padding: 8px 4px; font-size: 0.95rem; }

.vide {
  margin-top: 14px;
  padding: 16px;
  color: var(--discret);
  border: 2px dashed var(--trait);
  border-radius: 14px;
}

.pied {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}


/* ---------- 6. Barre du haut des autres écrans ---------- */

.barre {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin-bottom: 20px;
}
.retour { min-height: 52px; padding: 8px 14px; font-size: 1rem; flex-shrink: 0; }
.barre h1 { overflow-wrap: anywhere; }


/* ---------- 7. Gros chiffres ---------- */

.chiffres {
  margin: 0;
  font-family: var(--f-chiffres);
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* chaque chiffre a la même largeur : rien ne bouge */
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: center;
}

/* Minuteur et séance : « 03:00 », 5 caractères. La taille suit la
   largeur de l'écran (vw) sans dépasser la hauteur (vh). Au-delà d'une
   heure (« 1:05:00 », 7 caractères), la classe « long » réduit la taille. */
.chiffres-geants {
  font-size: min(29vw, 40vh);
  color: var(--phase);
  text-shadow: 0 0 14px color-mix(in srgb, var(--phase) var(--lueur-force), transparent);
  transition: color var(--duree), opacity var(--duree);
}
.chiffres-geants.long { font-size: min(20vw, 30vh); }

/* Chronomètre : « 00:00,0 », 7 caractères (9 au-delà d'une heure) */
.chiffres-chrono { font-size: min(19vw, 30vh); }
.chiffres-chrono.long { font-size: min(15vw, 24vh); }

.affichage { display: grid; gap: 10px; padding: 18px 0 26px; text-align: center; }
.sous-chiffres { color: var(--discret); font-size: 1.15rem; }
.sous-chiffres .mono { color: var(--texte); font-weight: 700; }


/* ---------- 8. Séance en cours et minuteur en marche ---------- */

/* La couleur --phase change selon la phase en cours. Le panneau prend
   une teinte très légère de cette couleur : on reconnaît la phase de
   loin, sans écran éblouissant. */
.lecteur {
  --phase: var(--travail);
  display: grid;
  gap: 14px;
  padding: 16px 14px;
  text-align: center;
  background: color-mix(in srgb, var(--phase) var(--teinte-phase), var(--fond));
  border-radius: 18px;
  transition: background-color var(--duree);
}
.lecteur[data-phase="echauffement"] { --phase: var(--echauffement); }
.lecteur[data-phase="repos"],
.lecteur[data-phase="reposFinal"]   { --phase: var(--repos); }
.lecteur[data-phase="minuteur"]     { --phase: var(--accent); }
.lecteur[data-phase="fini"]         { --phase: var(--fini); }

.lecteur-haut { display: grid; gap: 4px; }

.phase {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: clamp(1.9rem, 9vw, 3rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phase);
  transition: color var(--duree);
}
.round { font-size: clamp(1.4rem, 6.5vw, 2.1rem); font-weight: 700; }

.badge-pause {
  justify-self: center;
  margin-top: 6px;
  padding: 4px 14px;
  border: 2px solid var(--texte);
  border-radius: 999px;
  font-family: var(--f-titre);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.en-pause .chiffres-geants { opacity: 0.55; }

/* Barre qui se vide au fil de la phase. Pas d'animation : elle est
   simplement redessinée dix fois par seconde. */
.barre-progression {
  height: 14px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.barre-progression > div {
  height: 100%;
  width: 100%;
  background: var(--phase);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(1);
  transition: background-color var(--duree);
}

.lecteur-infos { display: grid; gap: 8px; }
.lecteur-infos:empty { display: none; }
.ensuite { font-size: 1.2rem; }
.reste-total { color: var(--discret); font-size: 1rem; }
.reste-total .mono { color: var(--texte); font-weight: 700; }
.lecteur-nom { font-size: 1.25rem; color: var(--discret); }

.lecteur-fin {
  display: grid;
  gap: 16px;
  padding-top: 8vh;
  text-align: center;
}
.phase-fin { color: var(--fini); }
.fin-resume { font-size: 1.3rem; margin-bottom: 12px; }


/* ---------- 9. Minuteur : réglage ---------- */

.raccourcis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.raccourcis .bouton { font-family: var(--f-chiffres); }


/* ---------- 10. Chronomètre : tours ---------- */

.tours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tours li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num duree" "num total";
  align-items: baseline;
  column-gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 12px;
}
.tour-num   { grid-area: num; font-family: var(--f-titre); font-weight: 700; color: var(--discret); align-self: center; }
.tour-duree { grid-area: duree; font: 700 1.45rem var(--f-chiffres); font-variant-numeric: tabular-nums; text-align: right; }
.tour-total { grid-area: total; font-family: var(--f-chiffres); font-variant-numeric: tabular-nums; color: var(--discret); font-size: 0.9rem; text-align: right; }
.commandes + .titre-section { margin-top: 26px; }


/* ---------- 11. Formulaires ---------- */

.champ { display: grid; gap: 8px; }

.champ-texte {
  min-height: 60px;
  padding: 10px 14px;
  font: 600 1.2rem var(--f-titre);
  color: var(--texte);
  background: var(--surface);
  border: 2px solid var(--bord-bouton);
  border-radius: 12px;
  width: 100%;
}
.champ-texte:focus { outline: none; border-color: var(--halo); }
.champ-texte::placeholder { color: var(--discret); opacity: 1; }

/* Réglage d'une durée : [−] 03 : 00 [+], et du nombre de rounds */
.duree, .nombre {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 10px;
}
.duree-bouton { min-height: 64px; padding: 0; font-size: 2rem; line-height: 1; }
.duree-champs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  background: var(--surface);
  border: 2px solid var(--bord-bouton);
  border-radius: 12px;
}
.duree-champs:focus-within { border-color: var(--halo); }
.duree-champs input {
  width: 2.4ch;
  padding: 6px 0;
  font: 700 2rem var(--f-chiffres);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--texte);
  background: transparent;
  border: 0;
}
.duree-champs input:focus { outline: none; }
.duree-sep { font: 700 2rem var(--f-chiffres); color: var(--discret); }

/* Version géante pour le minuteur */
.duree-grande .duree-champs { min-height: 96px; }
.duree-grande .duree-champs input,
.duree-grande .duree-sep { font-size: min(13vw, 3.6rem); }
.duree-grande .duree-bouton { min-height: 96px; }

.total { font-size: 1.15rem; }
.total strong { font-size: 1.35rem; }

/* Interrupteur marche / arrêt (une case à cocher redessinée : celle du
   navigateur est d'un blanc pur en thème clair) */
.interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  cursor: pointer;
  font-size: 1.05rem;
}
.interrupteur input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 36px;
  margin: 0;
  border: 2px solid var(--bord-bouton);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color var(--duree), border-color var(--duree);
}
.interrupteur input::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--discret);
  transition: transform var(--duree), background-color var(--duree);
}
.interrupteur input:checked { background: var(--accent); border-color: var(--accent); }
.interrupteur input:checked::after { transform: translateX(28px); background: var(--accent-texte); }
.interrupteur input:disabled { opacity: 0.45; cursor: not-allowed; }

input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="range"]:disabled { opacity: 0.45; }


/* ---------- 12. Réglages ---------- */

.bloc { display: grid; gap: 12px; margin-bottom: 16px; }

.choix-themes { display: grid; gap: 10px; }
.choix-theme {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 2px solid var(--bord-bouton);
  border-radius: 14px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
}
.choix-theme:has(input:checked) { border-color: var(--accent); }
/* Bouton rond redessiné, pour la même raison que l'interrupteur */
.choix-theme input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 2px solid var(--bord-bouton);
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.choix-theme input::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--duree);
}
.choix-theme input:checked { border-color: var(--accent); }
.choix-theme input:checked::after { transform: scale(1); }
.apercu {
  width: 64px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--trait);
}
.apercu-omni   { background: linear-gradient(135deg, #14111d 52%, #a777ff 52%); }
.apercu-sombre { background: linear-gradient(135deg, #161b21 52%, #9dbcd0 52%); }
.apercu-clair  { background: linear-gradient(135deg, #eef0f2 52%, #4f7086 52%); }


/* ---------- 13. À propos ---------- */

.apropos-entete { display: flex; align-items: center; gap: 16px; }
.apropos-entete img { width: 72px; height: 72px; border-radius: 16px; display: block; }
/* L'adresse e-mail, seule sur sa ligne et assez petite pour tenir d'un
   bloc sur un téléphone (elle ne se coupe qu'en dernier recours) */
.adresse-mail {
  display: block;
  margin-top: 4px;
  font-family: var(--f-chiffres);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.note-installation { color: var(--discret); margin: 8px 0 16px; }
.signature {
  margin-top: 8px;
  text-align: center;
  font-family: var(--f-titre);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--discret);
}

/* Une fois l'application installée, la note d'installation ne sert plus */
@media (display-mode: standalone) {
  .note-installation { display: none; }
}


/* ---------- 14. Téléphone tenu à l'horizontale ----------
   Pendant une séance : les chiffres à gauche, les commandes à droite,
   pour garder des chiffres immenses sans avoir à faire défiler. */

@media (orientation: landscape) and (max-height: 560px) {
  body[data-vue="seance"] main,
  body[data-vue="minuteur"] main { max-width: none; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  .vue-lecteur .barre,
  section[data-vue="minuteur"] .barre { min-height: 44px; margin-bottom: 8px; }
  .vue-lecteur .retour,
  section[data-vue="minuteur"] .retour { min-height: 44px; }

  /* À gauche : phase, chiffres, barre. À droite : « Ensuite… » puis
     les boutons. */
  .lecteur {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "haut     infos"
      "temps    commandes"
      "barre    commandes";
    align-items: center;
    column-gap: 28px;
    row-gap: 8px;
    padding: 10px 14px;
  }
  .lecteur-haut      { grid-area: haut; }
  .lecteur .chiffres-geants { grid-area: temps; font-size: min(17vw, 36vh); }
  .lecteur .chiffres-geants.long { font-size: min(12vw, 26vh); }
  .lecteur .barre-progression { grid-area: barre; }
  .lecteur-infos     { grid-area: infos; }
  .lecteur .commandes { grid-area: commandes; align-self: center; }

  .phase { font-size: clamp(1.4rem, 5vh + 1rem, 2.4rem); }
  .round { font-size: 1.2rem; }
  .ensuite { font-size: 1.05rem; }
}


/* ---------- 15. Réduire les animations ----------
   Si le téléphone demande moins d'animations, il n'y en a plus aucune :
   les changements de couleur deviennent instantanés. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}