/* ============================================================
   CAP — feuille de style
   Principes appliqués (les mêmes que pour Refuge, l'app sœur) :
   - aucun blanc pur, aucun noir sur blanc : contrastes doux
   - aucune animation rapide, aucun clignotement
   - zones tactiles très larges (min 60px)
   - plusieurs gammes de couleurs, toutes volontairement désaturées :
     beaucoup de personnes autistes sont sensibles aux couleurs vives,
     donc même les options de personnalisation restent douces
   ============================================================ */

/* Valeurs par défaut (Bleu-gris, sombre), au cas où le script du <head>
   n'aurait pas encore posé l'attribut data-mode sur <html>. */
:root {
  --bg:          #161b21;
  --surface:     #1d242d;
  --surface-2:   #252e39;
  --bord:        #344050;
  --texte:       #d4dae0;   /* gris très clair, jamais #fff */
  --texte-doux:  #97a2ae;
  --accent:      #9dbcd0;
  --accent-fond: #233240;
  --fini:        #d4b597;   /* ton chaud et calme, jamais vert vif ni rouge */
  --fini-fond:   #3a2e22;
  --rayon: 20px;
  --duree: 300ms;           /* toutes les transitions, volontairement lentes */
  color-scheme: dark;
}

/* ---------- Gammes de couleurs, une paire sombre/clair par gamme ----------
   Choisi par la personne dans Réglages ; appliqué par app.js via
   l'attribut data-mode="<gamme>-<sombre|clair>" sur <html>. Chaque paire
   garde la même construction que Refuge : fonds jamais blancs ni noirs
   purs, textes jamais blanc pur, un seul accent désaturé.
   Le texte secondaire (--texte-doux) garde un contraste d'au moins 4,5
   pour 1 sur tous les fonds (bg, surface, surface-2, accent-fond) : c'est
   le minimum recommandé pour un texte lisible (norme WCAG, niveau AA). */

/* En sombre, les accents sont des pastels (clairs mais peu saturés) : sur
   fond foncé, une couleur moyenne se confond avec le gris, alors qu'un
   pastel se distingue sans devenir vif. Les fonds portent aussi une
   légère teinte de la gamme, pour que chacune se reconnaisse. */

html[data-mode="bleu-sombre"] {
  --bg: #161b21; --surface: #1d242d; --surface-2: #252e39; --bord: #344050;
  --texte: #d4dae0; --texte-doux: #97a2ae;
  --accent: #9dbcd0; --accent-fond: #233240;
  --fini: #d4b597; --fini-fond: #3a2e22;
  color-scheme: dark;
}
html[data-mode="bleu-clair"] {
  --bg: #eef0f2; --surface: #f7f8f9; --surface-2: #e9ebee; --bord: #d7dbe0;
  --texte: #3b4046; --texte-doux: #626870;
  --accent: #4f7086; --accent-fond: #e3eaee;
  --fini: #8c6a46; --fini-fond: #f0e6d8;
  color-scheme: light;
}

html[data-mode="sauge-sombre"] {
  --bg: #161c19; --surface: #1d2621; --surface-2: #25302a; --bord: #354539;
  --texte: #d4dcd6; --texte-doux: #98aa9e;
  --accent: #a5ccb4; --accent-fond: #243529;
  --fini: #d4b597; --fini-fond: #3a2e22;
  color-scheme: dark;
}
html[data-mode="sauge-clair"] {
  --bg: #eef1ec; --surface: #f6f8f4; --surface-2: #e7ebe3; --bord: #d3dbcd;
  --texte: #384038; --texte-doux: #5f6a60;
  --accent: #5d8579; --accent-fond: #e2ebe6;
  --fini: #8c6a46; --fini-fond: #f0e6d8;
  color-scheme: light;
}

html[data-mode="lavande-sombre"] {
  --bg: #1a1822; --surface: #221f2d; --surface-2: #2b2839; --bord: #3d3850;
  --texte: #dcd8e3; --texte-doux: #a59fb3;
  --accent: #c0b6e6; --accent-fond: #2f2945;
  --fini: #d4b597; --fini-fond: #3a2e22;
  color-scheme: dark;
}
html[data-mode="lavande-clair"] {
  --bg: #f1eef5; --surface: #f8f6fa; --surface-2: #eae6f0; --bord: #d8d2e2;
  --texte: #423d4c; --texte-doux: #696376;
  --accent: #7871a8; --accent-fond: #e8e4f0;
  --fini: #8c6a46; --fini-fond: #f0e6d8;
  color-scheme: light;
}

html[data-mode="sable-sombre"] {
  --bg: #1c1815; --surface: #241f1a; --surface-2: #2e2721; --bord: #453a30;
  --texte: #ded6cc; --texte-doux: #a89c8e;
  --accent: #b89a7a; --accent-fond: #332b22;
  --fini: #9591c4; --fini-fond: #2c2840;
  color-scheme: dark;
}
html[data-mode="sable-clair"] {
  --bg: #f3ece2; --surface: #faf6f0; --surface-2: #ede4d6; --bord: #ddd0bd;
  --texte: #453a30; --texte-doux: #706356;
  --accent: #8c6a46; --accent-fond: #f0e6d8;
  --fini: #7871a8; --fini-fond: #e8e4f0;
  color-scheme: light;
}

/* Gammes chaudes et claires. Pour elles, la couleur de fin de minuteur
   (--fini) est un ton froid : le changement doit se voir. */

html[data-mode="peche-sombre"] {
  --bg: #1d1816; --surface: #27201d; --surface-2: #312824; --bord: #4a3b34;
  --texte: #e6dbd4; --texte-doux: #b09f95;
  --accent: #ddb8a3; --accent-fond: #3d2b22;
  --fini: #a5ccb4; --fini-fond: #243529;
  color-scheme: dark;
}
html[data-mode="peche-clair"] {
  --bg: #f7eee8; --surface: #fcf7f3; --surface-2: #f1e5dc; --bord: #e3d1c4;
  --texte: #4a3a32; --texte-doux: #746157;
  --accent: #a47260; --accent-fond: #f5e2d7;
  --fini: #5d8579; --fini-fond: #e2ebe6;
  color-scheme: light;
}

html[data-mode="miel-sombre"] {
  --bg: #1c1a15; --surface: #26231c; --surface-2: #302c23; --bord: #484133;
  --texte: #e3ddd0; --texte-doux: #aca48f;
  --accent: #d6c19f; --accent-fond: #3a3324;
  --fini: #9dbcd0; --fini-fond: #233240;
  color-scheme: dark;
}
html[data-mode="miel-clair"] {
  --bg: #f6f1e4; --surface: #fbf8ef; --surface-2: #efe8d6; --bord: #ded3b9;
  --texte: #463f2e; --texte-doux: #6f6651;
  --accent: #8a7748; --accent-fond: #f1e9d2;
  --fini: #4f7086; --fini-fond: #e3eaee;
  color-scheme: light;
}

html[data-mode="rose-sombre"] {
  --bg: #1d1719; --surface: #271f22; --surface-2: #31272b; --bord: #4a3a40;
  --texte: #e5d9dd; --texte-doux: #ae9ca3;
  --accent: #daabb5; --accent-fond: #3d2a30;
  --fini: #a5ccb4; --fini-fond: #243529;
  color-scheme: dark;
}
html[data-mode="rose-clair"] {
  --bg: #f6eef0; --surface: #fbf6f7; --surface-2: #efe3e6; --bord: #e0cdd2;
  --texte: #4a3940; --texte-doux: #746068;
  --accent: #a4677a; --accent-fond: #f3e2e7;
  --fini: #5d8579; --fini-fond: #e2ebe6;
  color-scheme: light;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  overscroll-behavior: none;
}

/* Taille du texte choisie dans Réglages : --echelle vaut 0.9, 1, 1.15 ou
   1.35. Presque toutes les tailles de ce fichier sont en « rem » : elles
   suivent toutes ce seul réglage. */
html { font-size: calc(17px * var(--echelle, 1)); }
body { font-size: 1rem; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

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

h1, h2, h3 { font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; color: var(--texte-doux); font-weight: 600; }
p  { margin: 0 0 14px; }
small { font-size: 0.85rem; color: var(--texte-doux); }

/* Lien en texte simple (section « À propos ») : même couleur douce que le
   texte autour, juste souligné, jamais le bleu vif du navigateur. La
   hauteur minimale garde une zone tactile de 60 px, comme partout ailleurs.
   overflow-wrap : une adresse longue passe à la ligne sur petit écran. */
.lien-discret {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  overflow-wrap: anywhere;
}

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

/* ---------- Mise en page ---------- */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 18px calc(28px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.vue { display: none; max-width: 640px; width: 100%; margin: 0 auto; }
.vue.active { display: block; }

#vue-accueil.active { display: flex; flex-direction: column; justify-content: center; min-height: 100%; position: relative; }

/* Le titre « Cap » a la même hauteur que le bouton Réglages posé à côté
   (60 px) : le bouton ne déborde jamais sur la carte qui suit. */
.titre-accueil {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* Petit bouton Réglages, discret, dans le coin de l'accueil — pas un
   4ᵉ gros bouton, pour ne pas surcharger l'écran principal. */
.bouton-reglages-accueil {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  min-height: 60px;
  padding: 0;
  border-radius: 14px;
  font-size: 1.4rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px;
  margin-bottom: 16px;
}

/* Barre du haut de chaque écran secondaire : un seul geste vers l'accueil,
   toujours au même endroit. */
.barre-haut {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.bouton-retour {
  width: auto;
  min-width: 60px;
  min-height: 60px;
  padding: 10px 16px;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.barre-haut h1 { margin: 0; flex: 1; }

/* ---------- Boutons ---------- */

button, .bouton {
  font: inherit;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 16px 18px;
  min-height: 60px;
  width: 100%;
  cursor: pointer;
  text-align: center;
  transition: background var(--duree) linear, border-color var(--duree) linear;
}

button:active { background: var(--bord); }

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

.bouton-accueil {
  min-height: 130px;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 24px;
  margin-bottom: 16px;
  padding: 18px;
  background: var(--surface);
  /* Un mélange doux de l'accent et de la bordure : la gamme choisie se
     reconnaît sur l'accueil, sans aplat de couleur. Les navigateurs qui ne
     connaissent pas color-mix gardent simplement la bordure grise. */
  border-color: color-mix(in srgb, var(--accent) 40%, var(--bord));
}
.bouton-accueil .sous {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--texte-doux);
  margin-top: 8px;
}

.bouton-secondaire {
  background: transparent;
  border-color: var(--bord);
  color: var(--texte-doux);
  font-size: 0.92rem;
  min-height: 60px;
}

/* flex-wrap : si les boutons ne tiennent pas côte à côte (petit écran,
   grand texte), le dernier passe à la ligne au lieu de déborder de l'écran. */
.bouton-rangee { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton-rangee > * { flex: 1; }

/* Carte « Une nouvelle version de Cap est prête » (accueil) : posée dans
   la page comme les autres cartes, sans rien qui surgisse ni ne bouge. */
.carte-mise-a-jour { border-color: var(--accent); }
.carte-mise-a-jour h2 { margin-top: 0; }

/* Un bouton armé attend un second appui avant une action qu'on ne peut pas
   annuler (supprimer une routine, une tâche...). */
button.arme {
  background: var(--fini-fond);
  border-color: var(--fini);
  color: var(--texte);
}

/* ---------- Formulaires ---------- */

label { display: block; margin-bottom: 8px; color: var(--texte-doux); font-size: 0.92rem; }

input[type="text"], input[type="number"] {
  font: inherit;
  width: 100%;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 14px;
  min-height: 60px;
  margin-bottom: 16px;
}

/* Cases à cocher redessinées : celles du navigateur sont d'un blanc pur en
   thème clair, ce qui va contre la règle « aucun blanc pur ».
   - vide : un carré au fond doux, bordé du gris du texte secondaire (bien
     visible : contraste d'au moins 4,5 pour 1 avec le fond) ;
   - cochée : remplie de la couleur de la gamme, avec une coche de la
     couleur du fond (foncée en sombre, claire en clair).
   Le changement se fait par un fondu lent, comme les boutons. La taille
   est donnée plus bas, selon l'endroit (tâches, interrupteurs). */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  margin: 0;
  border: 2px solid var(--texte-doux);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--duree) linear, border-color var(--duree) linear;
}
/* La coche : un petit « L » tourné, dessiné avec deux bordures. */
input[type="checkbox"]::before {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 3px solid var(--bg);
  border-bottom: 3px solid var(--bg);
  transform: translateY(-2px) rotate(-45deg);
  opacity: 0;
  transition: opacity var(--duree) linear;
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::before { opacity: 1; }

/* ---------- Listes d'étapes (formulaire routine / tâche) ---------- */

/* Chaque étape est une petite carte sur deux rangées :
     [image] [texte de l'étape] [✕]
     [durée prévue]         [↑] [↓]   */
.ligne-etape {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 12px;
}
.ligne-haut, .ligne-bas { display: flex; align-items: center; gap: 8px; }
.ligne-bas { margin-top: 8px; }
.ligne-bas .espace { flex: 1; }
.ligne-etape input[type="text"] { margin-bottom: 0; flex: 1; min-width: 0; }
.ligne-etape button {
  width: auto;
  min-width: 60px;
  min-height: 60px;
  padding: 8px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ligne-etape .bouton-picto { font-size: 1.7rem; line-height: 1; }
.ligne-etape .bouton-picto.vide { font-size: 0.8rem; color: var(--texte-doux); }

/* « ☆ Essentielle » (routines) : une rangée à part, sur toute la largeur.
   Enfoncé, il prend la couleur douce de la gamme et l'étoile se remplit. */
.ligne-etape .bouton-essentielle {
  width: 100%;
  margin-top: 8px;
  font-size: 0.95rem;
  background: transparent;
  color: var(--texte-doux);
}
.ligne-etape .bouton-essentielle[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  color: var(--texte);
  font-weight: 600;
}

select {
  font: inherit;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 0 12px;
  min-height: 60px;
}
.ligne-bas select { flex: 1; min-width: 0; }

/* Le choix d'images, qui s'ouvre sous l'étape concernée. */
.choix-image {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bord);
}
.choix-image button {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 0;
  font-size: 1.7rem;
  line-height: 1;
}
.choix-image button[aria-pressed="true"] { background: var(--accent-fond); border-color: var(--accent); }
.choix-image .aucune { grid-column: 1 / -1; font-size: 0.95rem; }

/* Les images d'étape sont des émojis, souvent très colorés : on les
   désature pour respecter la règle « aucune couleur vive ». */
.picto { filter: saturate(0.35); }
span.picto { display: inline-block; margin-right: 0.45em; }

/* ---------- Listes (routines / tâches) ---------- */

.fiche {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}
.fiche .nom { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.fiche .meta { color: var(--texte-doux); font-size: 0.9rem; margin-bottom: 14px; }
.fiche .bouton-rangee button { min-height: 60px; font-size: 0.92rem; }

.barre-progres {
  height: 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  overflow: hidden;
  margin-bottom: 4px;
}
.barre-progres > div {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width var(--duree) ease;
}

.vide { color: var(--texte-doux); text-align: center; padding: 36px 12px; }

/* Liste des étapes repliable (« Voir les étapes ») : on sait ce qui vient
   avant même de commencer. */
details.apercu {
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 14px;
  margin-bottom: 14px;
}
details.apercu summary {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
  color: var(--texte-doux);
  list-style: none;
}
details.apercu summary::-webkit-details-marker { display: none; }
details.apercu summary::before {
  content: '▸';
  margin-right: 10px;
  transition: transform var(--duree) ease;
}
details.apercu[open] summary::before { transform: rotate(90deg); }
details.apercu ol { margin: 0; padding: 0 16px 14px 42px; }
details.apercu li { padding: 5px 0; }
details.apercu li.actuelle { font-weight: 600; }
details.apercu li.faite, details.apercu li.passee { color: var(--texte-doux); }
details.apercu li.faite { text-decoration: line-through; }
.duree { color: var(--texte-doux); font-size: 0.88rem; }

/* Onglets simples "En cours" / "Terminées" */
.sous-onglets { display: flex; gap: 10px; margin-bottom: 18px; }
.sous-onglets button {
  min-height: 60px;
  font-size: 0.95rem;
}
.sous-onglets button[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---------- Routine : exécution pas à pas ---------- */

.scene-routine {
  text-align: center;
  padding: 30px 10px 10px;
}
.scene-routine .compteur {
  color: var(--texte-doux);
  font-size: 0.95rem;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.etape-texte {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  min-height: 3.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 18px;
}
/* La grande image de l'étape, au-dessus de son texte. */
.etape-image {
  font-size: 3.2rem;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 4px;
}
.scene-routine .ensuite {
  color: var(--texte-doux);
  font-size: 0.95rem;
  min-height: 1.6em;
  margin-bottom: 22px;
}

/* Durée prévue d'une étape : une barre qui se vide doucement. Une fois le
   temps écoulé, elle se remplit de la couleur de fin, sans clignoter. */
.minuteur-etape { max-width: 360px; margin: 0 auto 14px; }
.minuteur-etape p { color: var(--texte-doux); font-size: 0.95rem; margin: 6px 0 0; }
.minuteur-etape .barre-progres > div { transition: width 1s linear, background var(--duree) ease; }
.minuteur-etape.termine .barre-progres > div { background: var(--fini); }

/* Journée difficile : la petite phrase qui dit pourquoi la routine est
   plus courte. */
.note-difficile { margin: -6px 0 14px; }

/* Mode « Une seule chose » (routines et tâches) : la classe « une-chose »
   posée sur l'écran cache tout ce qui est marqué « hors-une-chose », et
   l'étape en cours s'affiche plus grand. Rien ne bouge brusquement : les
   éléments disparaissent simplement. */
.une-chose .hors-une-chose { display: none !important; }
.une-chose .etape-texte {
  font-size: 2rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.une-chose .etape-image { font-size: 4.4rem; }
.une-chose .scene-routine { padding-top: 36px; }

/* Le bouton « Une seule chose » / « Voir tout » : toujours au même endroit,
   en haut de l'écran. */
.bouton-mode { margin-bottom: 18px; }

/* Transitions douces : pendant la pause, l'écran ne garde que sa barre du
   haut (la flèche ← reste disponible) et la pause elle-même. */
.en-pause > :not(.barre-haut):not(.pause-douce) { display: none !important; }

/* La pause est un seul grand bouton calme : un toucher n'importe où la
   termine. Elle apparaît par un fondu lent, et sa barre se vide d'une
   seule glissade régulière (réglée par app.js sur la durée de la pause). */
.pause-douce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 60vh;
  padding: 30px 20px;
  background: var(--surface);
  border-radius: 24px;
  animation: apparition-douce 600ms ease;
}
.pause-message { display: block; font-size: 1.35rem; font-weight: 600; line-height: 1.4; }
.pause-ensuite { display: block; color: var(--texte-doux); overflow-wrap: anywhere; }
.pause-jauge {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  overflow: hidden;
}
.pause-barre { display: block; height: 100%; width: 100%; background: var(--accent); }
.pause-aide { display: block; font-size: 0.85rem; color: var(--texte-doux); }

/* « ✓ Fait » en tête de la pause, quand l'étape d'avant vient d'être faite. */
.pause-fait { display: block; font-weight: 600; color: var(--texte-doux); }

/* Retour positif sobre : un petit « ✓ Fait » en bas de l'écran, qui
   apparaît et s'efface par un fondu lent (opacité seulement : rien ne
   bouge, rien ne clignote). Il ne gêne aucun toucher (pointer-events). */
.retour-fait {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent-fond);
  border: 1px solid var(--accent);
  /* Un halo de la couleur du fond la détache de ce qu'elle recouvre. */
  box-shadow: 0 0 0 6px var(--bg);
  color: var(--texte);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  z-index: 10;
}
.retour-fait.visible { opacity: 1; }

@keyframes apparition-douce {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mouvements réduits : la barre ne pourrait plus glisser (elle sauterait
   d'un coup à vide) ; on la retire, le texte dit combien de temps dure la
   pause. */
@media (prefers-reduced-motion: reduce) {
  .pause-jauge { display: none; }
}

/* Tâche en mode « Une seule chose ». */
.une-etape { text-align: center; padding: 10px 0 6px; }
.une-etape .etape-texte { margin-bottom: 22px; }
.une-chose .une-etape { padding-top: 30px; }
.bouton-valider {
  min-height: 90px;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--accent-fond);
  border-color: var(--accent);
  border-radius: 24px;
  margin-bottom: 14px;
}

/* ---------- Case à cocher (tâches) ---------- */

.etape-cochable {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bord);
  cursor: pointer;
  /* Une étape à faire en couleur de texte normale ; une fois cochée, elle
     passe en gris et barrée (règle plus bas) : la différence se voit. */
  color: var(--texte);
}
.etape-cochable:last-of-type { border-bottom: none; }
.etape-cochable input {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.etape-cochable span { flex: 1; font-size: 1rem; }
/* Une fois cochée, l'étape est barrée — mais pas l'étiquette « Pour
   démarrer », rangée à côté du texte dans la « colonne ». */
.etape-cochable:has(input:checked) span:not(.colonne) {
  color: var(--texte-doux);
  text-decoration: line-through;
}

/* Petite action de démarrage (tâches) : mise en valeur doucement, avec le
   fond de la couleur de la gamme et l'étiquette « Pour démarrer ». Placé
   après les règles ci-dessus pour garder sa bordure complète. */
.etape-cochable.etape-mini {
  background: var(--accent-fond);
  border: 1px solid var(--bord);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bord));
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.etape-cochable .colonne { flex: 1; }
.etiquette-mini {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
}
.une-etape .etiquette-mini { margin-bottom: 6px; }

/* Carte « Temps passé » d'une tâche (chrono, temps prévu, écart). */
.temps-tache h2 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.temps-valeur { font-size: 1.1rem; font-weight: 600; }

/* Historique : une carte par jour, les routines terminées en dessous. */
.jour-historique { font-size: 1rem; margin-bottom: 6px; }
.liste-historique { margin: 0; padding-left: 20px; }
.liste-historique li { padding: 4px 0; overflow-wrap: anywhere; }

.ajout-etape-rapide {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.ajout-etape-rapide input { margin-bottom: 0; flex: 1; }
.ajout-etape-rapide button { width: auto; min-width: 60px; }

/* ---------- Minuteur ---------- */

.scene-minuteur {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 20px;
}
.anneau-minuteur { position: relative; width: 240px; height: 240px; margin-bottom: 10px; }
.anneau-minuteur svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau-minuteur circle {
  fill: none;
  stroke-width: 16;
}
.anneau-minuteur .fond { stroke: var(--surface-2); }
.anneau-minuteur .avancement {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke var(--duree) ease;
}
/* Préavis : l'anneau glisse lentement (4 s) vers une teinte entre l'accent
   et la couleur de fin. Les navigateurs sans color-mix gardent l'accent :
   le temps restant écrit en mots suffit alors. */
.anneau-minuteur.bientot .avancement {
  stroke: color-mix(in srgb, var(--accent) 45%, var(--fini));
  transition: stroke-dashoffset 1s linear, stroke 4s ease;
}
.anneau-minuteur.termine .avancement { stroke: var(--fini); }
.anneau-minuteur .temps {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}
.etat-minuteur {
  text-align: center;
  color: var(--texte-doux);
  min-height: 1.6em;
  margin-bottom: 18px;
}
.nom-minuteur {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.choix { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.choix button {
  width: auto;
  flex: 1 1 auto;
  min-width: 64px;
  min-height: 64px;
  padding: 12px;
}

/* Durées rapides du minuteur : une vraie grille 2×2, plutôt qu'un flex qui
   laisse le 4ᵉ bouton seul sur sa ligne selon la largeur d'écran. */
#min-choix-duree {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#min-choix-duree button { width: 100%; min-width: 0; }
.choix button[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  color: var(--texte);
  font-weight: 600;
}

.duree-libre { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.duree-libre input { margin-bottom: 0; }
.duree-libre span { color: var(--texte-doux); white-space: nowrap; }

.interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  min-height: 60px;
  color: var(--texte);
  font-size: 0.95rem;
}
.interrupteur input { width: 28px; height: 28px; flex-shrink: 0; }

/* L'interrupteur « Journée difficile » de l'accueil, dans une carte : allumé,
   la carte prend la couleur douce de la gamme, pour qu'on voie d'un coup
   d'œil que les routines sont allégées. */
.carte-interrupteur {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 10px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background var(--duree) linear, border-color var(--duree) linear;
}
.carte-interrupteur:has(input:checked) {
  background: var(--accent-fond);
  border-color: var(--accent);
}
.carte-interrupteur .sous {
  display: block;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* ---------- Réglages : thème et gammes de couleurs ---------- */

.palette-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.palette-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px 10px;
}
.palette-carte .pastille {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bord);
  display: block;
}
.palette-carte[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---------- Accueil : ce qui est en cours, tâche du jour, lien Refuge ---------- */

.bouton-en-cours {
  text-align: left;
  margin-bottom: 12px;
  background: var(--accent-fond);
  border-color: var(--accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bouton-en-cours .sous {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--texte-doux);
  margin-top: 4px;
}

.tache-du-jour h2 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.tache-du-jour .nom { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }
.tdj-etape { margin-bottom: 14px; overflow-wrap: anywhere; }
.tdj-etape .intro { color: var(--texte-doux); }

.lien-refuge { text-align: center; margin: 4px 0 0; }

/* Message d'état annoncé aux lecteurs d'écran uniquement */
.annonce {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.masque { display: none !important; }

/* Note d'installation (section À propos) : inutile une fois l'application
   installée, puisqu'elle s'ouvre alors dans sa propre fenêtre (mode
   d'affichage autre que « browser », celui d'un onglet de navigateur). */
@media not all and (display-mode: browser) {
  .note-installation { display: none; }
}