/* Composants web. Toutes les valeurs viennent de tokens.css. Voir COMPOSANTS.md. */
/* Seuils des @media et @container, écrits en px (une requête ne lit pas une variable) : 900 = layout.wideFrom,
   720 = layout.twoColFrom, 500 (hauteur, couché) = layout.landscapeMaxHeight, 1000 = layout.persoFrom − 1.
   Les autres (600, 560, 700, 220, 119, 103…) sont des seuils de dessin d'un composant (grille, cartes de minuteur). */
/* Restent en px, voulus : traits de 1 à 3 px, demi-pixels de calage, dessins réduits à l'échelle de leur cadre (croquis,
   mini-écrans, scène du tutoriel, cartes de minuteur en cqw), points et pastilles de repère (message, marques). */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* Un élément masqué le reste, quel que soit son display. */
[hidden] { display: none !important; }
/* Pas de bloc bleu de Chrome au toucher : chaque zone cliquable a déjà son retour (pression à l'échelle, focus clavier visible). Hérité par toute la page. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  color: var(--text);
  font: var(--fw-texte) var(--fs-body) / 1.5 var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
/* Fond de page, avec le motif de l'ambiance s'il y en a un. */
body, .fond { background-color: var(--bg); background-image: var(--motif); background-size: var(--motif-size); }
strong, b { font-weight: var(--fw-titre); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-titre); letter-spacing: calc(-0.02em * var(--track-k)); line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: calc(-0.01em * var(--track-k)); }
p { margin: 0; }
small, .small { font-size: var(--fs-small); }
.muted { color: var(--text-2); }
.accent { color: var(--accent-text); }
.num { font-variant-numeric: tabular-nums; }
.big-num { font-size: var(--fs-num); font-weight: var(--fw-titre); letter-spacing: calc(-0.02em * var(--track-k)); line-height: 1.1; font-variant-numeric: tabular-nums; }
.section-title { font-size: var(--fs-caption); font-weight: var(--fw-nom); color: var(--text-2); }
/* Petits libellés courts (titres de section, statuts, badges, jours) : en majuscules, un peu espacés, pour se lire en petit. Jamais une phrase. */
.section-title, .bloc__titre, .page-tete__sur, .badge, .minuteur__fin, .row--minuteur .row__sub, .calendrier__nom, .frise-jours__jour small, .quantite-badge, .muscle { text-transform: uppercase; letter-spacing: calc(var(--track-caps) * var(--track-k)); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Structure d'un écran : un bloc n'a pas de marge propre. */
.page--aeree { --aere: 1.5; --head-gap: var(--s-4); --list-gap: var(--s-5); }
.page { display: flex; flex-direction: column; gap: calc(var(--block-gap) * var(--aere, 1)); max-width: var(--measure); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
/*
 * Occuper l'espace : 720 (--measure) reste la largeur de lecture (texte, formulaires, réglages) ;
 * .page--large (--measure-wide) pour les écrans qui ont de quoi remplir (grilles, tableaux de bord, fiche + détail).
 * Le fond reste celui du body, sur tout l'écran. Les modèles ci-dessous suivent la largeur de leur conteneur,
 * pas celle de l'écran (LayoutBuilder en Flutter). Seuil des deux colonnes : 720 px de conteneur (layout.twoColFrom).
 */
.page--large { max-width: var(--measure-wide); }
.page--large > .lecture { width: 100%; max-width: var(--measure); }
/* Grille de cartes : autant de colonnes que la place en permet, 2 sur téléphone, 5 au plus, jamais plus étroites que --tile-min. */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(var(--tile-min), calc((100% - 4 * var(--s-3)) / 5)), 1fr)); gap: var(--s-3); }
/* Fiche en deux colonnes : la colonne de côté (ingrédients, résumé) d'abord, collée en haut une fois côte à côte. */
.deux-cols { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--block-gap); align-items: start; }
.deux-cols > * { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 720px) {
  .deux-cols > .deux-cols__cote { position: sticky; top: var(--s-4); grid-column: 1; }
  .deux-cols > .deux-cols__principal { grid-column: 2 / -1; }
}
/* Liste et détail : côte à côte dès 720 px ; plus étroit, l'un ou l'autre (data-vue="detail" montre le détail). */
.liste-detail { container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--block-gap); align-items: start; }
.liste-detail > * { grid-column: 1 / -1; min-width: 0; }
.liste-detail > .liste-detail__detail { display: none; }
.liste-detail[data-vue='detail'] > .liste-detail__liste { display: none; }
.liste-detail[data-vue='detail'] > .liste-detail__detail { display: block; }
@container (min-width: 720px) {
  .liste-detail > .liste-detail__liste { display: block; grid-column: 1 / 3; }
  .liste-detail > .liste-detail__detail { display: block; position: sticky; top: var(--s-4); grid-column: 3 / -1; }
}
/* Groupes de cartes (rayons, réglages) : deux colonnes dès 720 px, chaque groupe garde sa hauteur. */
.grille-blocs { container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--block-gap); align-items: start; align-content: start; }
.grille-blocs > * { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 720px) { .grille-blocs > * { grid-column: auto; } }
/* Carte qui garde toute la ligne dans les deux colonnes (le bloc principal d'un accueil) : les autres vont par deux. */
@container (min-width: 720px) { .grille-blocs > .grille-blocs__large { grid-column: 1 / -1; } }
/* Groupes de hauteurs très différentes (rayons de courses) : à la suite en colonnes, sans trous sous les plus courts ; une seule colonne sous 2 × 22rem. */
/* Deux blocs côte à côte, même sur téléphone (deux réglages qu'on fait ensemble : répétitions et poids). */
.blocs-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; }
.blocs-paire > * { min-width: 0; }
.grille-blocs--flot { display: block; columns: 22rem 3; column-gap: var(--block-gap); }
.grille-blocs--flot > * { break-inside: avoid; margin-block-end: var(--block-gap); }
.grille-blocs--flot > :last-child { margin-block-end: 0; }
/* Écran partagé (plein écran, assistant) : texte puis action ; couché, côte à côte. Le parent a une hauteur (plein écran). */
.ecran-partage { container-type: size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: var(--block-gap); width: 100%; height: 100%; }
.ecran-partage > * { grid-column: 1 / -1; min-width: 0; min-height: 0; }
.ecran-partage__action { display: flex; align-items: center; justify-content: center; }
@container (orientation: landscape) and (min-width: 560px) {
  .ecran-partage > .ecran-partage__texte { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .ecran-partage > .ecran-partage__action { grid-column: 2; grid-row: 1 / -1; }
}
/* Une carte en lien n'est pas en ligne ; écrit avant les mises en page (.pile, .ligne, .groupes), qui l'emportent. */
:where(a, button).card { display: block; }
.block { display: flex; flex-direction: column; gap: var(--head-gap); }
.pile { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
/* Rangée centrée : l'action de fin de page (Se déconnecter, Supprimer la page), en danger teinté, seule au milieu. */
.ligne--centre { justify-content: center; }
/* Champ et son bouton sur une ligne (ajouter une règle, inviter) : le champ prend la place, le bouton garde sa taille,
   alignés par le bas (une étiquette au-dessus du champ ne décale pas le bouton). */
.ligne--champs { flex-wrap: nowrap; align-items: flex-end; }
.ligne--champs > :is(.field, .select, .input) { flex: 1 1 0; min-width: 0; }
.ligne--champs > .btn { flex: none; }
.list { display: flex; flex-direction: column; gap: var(--list-gap); }
/* Sur un vrai <ul> ou <ol> : sans puces ni retrait du navigateur. */
:where(ul, ol).list { margin: 0; padding: 0; list-style: none; }

/* Tuile : pas de bordure, le fond suffit à la détacher. */
.card { background: var(--surface); border: var(--card-edge) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--inset); }
.card--sm { border-radius: var(--r-md); }
/* Carte entière en lien ou en bouton (a.card, button.card) : admise quand rien d'autre ne s'y touche. Avec ses propres
   boutons : .carte-lien et son titre, qui couvre la carte. :where : la mise en page de la carte (.groupes, .pile) l'emporte. */
:where(a, button).card { width: 100%; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
:where(a, button).card:active { transform: scale(var(--press-scale)); }
/* Carte de liste : ses lignes à plat ont déjà leur marge, la carte n'en garde qu'un peu en haut et en bas. */
.card--liste { padding-block: var(--s-1); }

/* Ligne de liste */
.row { display: flex; align-items: center; gap: var(--s-3); min-height: var(--row-min); padding: var(--inset-y) var(--inset); background: var(--surface); border: var(--card-edge) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
a.row__appui { text-decoration: none; }
a.row, button.row { width: 100%; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
a.row:active, button.row:active { transform: scale(var(--press-scale)); }
/* Survol à la souris, la seule règle commune (« Formes communes ») : ce qui se clique prend le fond teinté à 12 %, d'un
   coup, sans bouger (ni carte qui monte, ni ligne qui se décale). Lignes, zone d'appui d'une ligne, cartes cliquables,
   onglets et liens du menu qui ne sont pas la page courante. */
@media (hover: hover) {
  a.row:hover, button.row:hover, :where(a, button).card:hover { background-color: color-mix(in srgb, var(--surface) 88%, var(--text)); }
  .row__appui:hover, .tab:hover:not([aria-current='page'], [data-allume]), .side-link:hover:not([aria-current='page']) { background-color: color-mix(in srgb, var(--text) 12%, transparent); }
}
.row__main { flex: 1; min-width: 0; font-weight: var(--fw-nom); }
.row__sub { display: block; font-size: var(--fs-small); font-weight: var(--fw-texte); color: var(--text-2); }
/* Sous-ligne qui est une donnée (libellé d'opération, adresse, dernière erreur) : sur une seule ligne, finie par « … ».
   Une option, jamais par défaut : un nom ne se coupe pas (voir GUIDE). */
.row__sub--coupe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* État dit dans une sous-ligne (dernière erreur, échéance dépassée) : sa couleur, la phrase le dit aussi. */
.row__sub--warn { color: var(--warn); }
.row__sub--danger { color: var(--danger); }
/* Fin de ligne à deux étages : la valeur et sa précision dessous (« −12,99 € » / « / mois »), alignées au bord. */
.row__fin { display: grid; flex: none; justify-items: end; gap: 2px; text-align: end; }
.row__fin > .row__sub { white-space: nowrap; }
/* Valeurs à icônes (repris de SportOne) : quelques valeurs courtes, chacune précédée de son icône (séries, répétitions, poids,
   repos…), sur une ligne qui passe à la suivante si besoin. Seule ou en sous-ligne d'une ligne (.row__sub.valeurs). */
.valeurs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-small); font-weight: var(--fw-nom); color: var(--text-2); font-variant-numeric: tabular-nums; }
.valeurs__item { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
/* Valeur sans icône (une liste de muscles, un groupe) : peut passer à la ligne, sinon elle déborde sur la fin de ligne. */
.valeurs__item--texte { min-width: 0; white-space: normal; }
.valeurs .icon { flex: none; width: 1.15em; height: 1.15em; }
.row__sub.valeurs { display: flex; margin-top: 2px; }
/* Titre qui est une phrase (historique, journal) : même taille qu'un nom, police légère. Contraste garde la graisse normale, lisible de loin. */
.row__main--phrase { font-weight: var(--fw-phrase); }
[data-look='contraste'] .row__main--phrase { font-weight: var(--fw-texte); }
.row__value { font-variant-numeric: tabular-nums; font-weight: var(--fw-nom); }
/* Une valeur qui compte (heure de fin d'un minuteur allé au bout) ; pâle, celle d'un arrêt avant la fin. */
.row__value--fort { color: var(--text); font-weight: var(--fw-titre); }
.row__value--pale { color: var(--text-2); font-weight: var(--fw-texte); }
/* Ligne estompée (élément masqué, arrêté, en attente, encore listé) : le contenu à 55 %, les actions restent nettes. */
.row--pale > :not(.row__actions) { opacity: var(--estompe); }
/* Zone qui se recharge (aria-busy="true" sur un [data-recharge]) : son contenu d'avant reste en place, estompé comme une
   ligne en attente, et revient net à l'arrivée des données. Opacité seule. */
[data-recharge] { transition: opacity var(--t-base) var(--ease-out); }
[data-recharge][aria-busy='true'] { opacity: var(--estompe); }

/* Boutons : une seule action en accent par écran. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  --b: var(--surface-2);
  min-height: var(--tap); padding: 0 var(--btn-x) 0 calc(var(--btn-x) - 4px); border: 0; border-radius: var(--r-btn);
  background: var(--b); color: var(--text);
  font: var(--fw-nom) var(--fs-body) / 1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-fast);
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--b) 88%, var(--text)); } }
.btn:active { transform: scale(var(--press-scale)); transition-duration: var(--t-press); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
/* Action qui prend du temps : le contenu laisse la place au cercle, puis à la coche, sans changer la taille. Voir actionBouton. */
.btn[aria-busy='true'] { pointer-events: none; }
.btn__contenu { display: inline-flex; align-items: center; gap: var(--s-2); transition: opacity var(--t-toggle-fade), transform var(--t-slow) var(--ease-out); }
.btn__etat { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(0.6); transition: opacity var(--t-toggle-fade), transform var(--t-slow) var(--ease-out); pointer-events: none; }
.btn--attente .btn__contenu { opacity: 0; transform: scale(0.8); }
.btn--attente .btn__etat { opacity: 1; transform: none; }
.btn--primary { --b: var(--accent); color: var(--on-accent); }
.btn--danger { --b: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
/* Réussite (« Exercice terminé », « Séance terminée ») : vert teinté, ou vert plein pour la toute dernière action. */
.btn--ok { --b: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.btn--ok-plein { --b: var(--ok); color: var(--surface); }
.btn--ghost { --b: transparent; }
/* Bouton discret au bout d'une ligne : son texte s'aligne sur le bord, comme une valeur ou une heure au-dessus (la zone de toucher reste). */
.bloc__ligne > .btn--ghost:last-child, .row > .btn--ghost:last-child { margin-inline-end: calc(var(--btn-x) * -1); }
.bloc__ligne > .btn--ghost.btn--small:last-child, .row > .btn--ghost.btn--small:last-child { margin-inline-end: calc((var(--btn-x) - 4px) * -1); }
/* Petit bouton : sur les côtés, le même vide qu'au-dessus et au-dessous (de l'icône côté icône, du texte côté texte). */
.btn--small { min-height: var(--tap-small); padding: 0 calc((var(--tap-small) - var(--fs-small)) / 2) 0 calc((var(--tap-small) - var(--icon-sm)) / 2); font-size: var(--fs-small); }
.btn--small .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Bouton d'en-tête à libellé (Se connecter, Mon compte : .btn.btn--small.btn--tete, libellé dans .btn__libelle) : sous
   380 px de large et dans une tête sur une ligne fine (.page-tete--ligne), il se réduit à son icône, en carré ; le
   libellé reste lu par les lecteurs d'écran. Il garde le rayon d'un bouton : pas de pilule. */
.btn--tete { flex: none; }
.page-tete--ligne .btn--tete { width: var(--tap-small); padding: 0; }
.page-tete--ligne .btn--tete > .btn__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 379px) {
  .btn--tete { width: var(--tap-small); padding: 0; }
  .btn--tete > .btn__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
}
.btn--block { width: 100%; min-height: var(--tap-block); }
.spinner { width: var(--icon-sm); height: var(--icon-sm); flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: socle-spin 0.8s linear infinite; }
.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn--accent { background: var(--accent); color: var(--on-accent); }
.icon-btn--teinte { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
/* Bascule de sourdine : coupé, l'état inhabituel ressort, rouge dans un rond teinté, icône barrée. */
.icon-btn--coupe { color: var(--text); }
.icon-btn.icon-btn--coupe[aria-pressed='true'] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.page-tete__sur .icon-btn { width: var(--tap-small); height: var(--tap-small); margin-block: calc((var(--icon-sm) - var(--tap-small)) / 2); }
.page-tete__sur .icon-btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
.page-tete__actions { display: flex; flex: none; align-items: center; gap: var(--s-1); }
/* Un bouton à libellé (Terminé) à côté de boutons ronds : un peu plus d'air avant lui (12 en tout, comme Clepso). */
.page-tete__actions > .btn { margin-inline-start: var(--s-2); }
.page-tete__actions .icon-btn:not(.icon-btn--accent, .icon-btn--teinte) { color: var(--text); }

/* Icône Lucide au trait, depuis le sprite : <svg class="icon"><use href="web/icones.svg#plus"/></svg> */
.icon { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
/* Icône découpée le temps de son geste, voir brancherBoutons. */
.icone-parties { position: relative; display: inline-block; flex: none; }
.icone-parties .icon { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Puces, badges */
.chip { display: inline-flex; align-items: center; min-height: var(--tap-small); padding: 0 calc(var(--btn-x) - 4px); border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.chip:active { transform: scale(var(--press-scale)); }
.chip[aria-pressed='true'] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
/* Puce d'une catégorie : son point de couleur devant le libellé (.point-couleur, couleur-dN ou --mc). */
.chip > .point-couleur { margin-inline-end: var(--s-2); }
.badge > .point-couleur { margin-inline-end: var(--s-1); }
.badge { --c: var(--text-2); display: inline-flex; align-items: center; padding: 2px var(--s-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: var(--fs-caption); font-weight: var(--fw-nom); }
.badge--ok { --c: var(--ok); }
.badge--warn { --c: var(--warn); }
.badge--danger { --c: var(--danger); }
/* Informatif : ni réussite ni attention (« En utilisation »). */
.badge--info { --c: var(--info); }
/* Badge à la couleur d'une catégorie (muscle, famille, projet) : couleur-dN ou couleur-perso (--mc) sur le badge. */
.badge--categorie { --c: var(--mc, var(--text-2)); }
.badges { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
/* Badge-bouton : une valeur à toucher pour la régler (« 2:30 › »), avec son chevron. */
.badge--bouton { gap: 2px; min-height: var(--s-6); padding-inline: var(--s-2) var(--s-1); border: 0; font-family: var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.badge--bouton:active { transform: scale(var(--press-scale)); }
.badge--bouton .icon { width: var(--fs-small); height: var(--fs-small); }
/* État dans un tableau et son filtre : même taille, casse normale (un statut de plusieurs mots est une phrase), comme SIRH. */
.badge.badge--phrase, .table .badge, .filtre .badge { text-transform: none; letter-spacing: normal; }

/* Champs : 16 px pour éviter le zoom automatique d'iOS. */
.field { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-small); color: var(--text-2); }
.input { width: 100%; min-width: 0; min-height: var(--tap); padding: 0 var(--inset-sm); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: var(--fw-texte) var(--fs-input) / 1.2 var(--font); }
.input--court { flex: none; width: auto; min-height: var(--tap-small); }
/* Champ de N chiffres (--chiffres, 3 par défaut) : juste assez large, chiffres centrés et alignés, sans flèches. */
.input--chiffres { --chiffres: 3; flex: none; width: calc(var(--chiffres) * 1ch + 2 * var(--inset-sm) + 2px); text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; }
.input--chiffres::-webkit-inner-spin-button, .input--chiffres::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.input:focus { outline: 2px solid var(--accent-text); outline-offset: -1px; border-color: transparent; }
.input:disabled, .check:disabled, .switch--desactive { opacity: 0.45; cursor: default; }

/* Curseur : --piste donne un fond à la barre, un dégradé de couleur par exemple. */
.range { appearance: none; width: 100%; height: var(--tap-small); margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: var(--gauge); border-radius: var(--r-pill); background: var(--piste, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line); }
.range::-moz-range-track { height: var(--gauge); border-radius: var(--r-pill); background: var(--piste, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line); }
.range::-webkit-slider-thumb { appearance: none; width: var(--check); height: var(--check); margin-top: calc((var(--gauge) - var(--check)) / 2); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.range::-moz-range-thumb { width: var(--check); height: var(--check); border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.range:disabled { opacity: 0.45; cursor: default; }
/* Curseur entre deux icônes (volume bas, volume haut). */
.curseur-icones { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); }
.curseur-icones .range { flex: 1; min-width: 0; }
.curseur-icones .icon { flex: none; width: var(--icon-md); height: var(--icon-md); }

/* Contrôle segmenté : une icône et un libellé par option, sans rail. Seul le choix a un fond, qui glisse d'une option à l'autre. Voir suivreSegmentes. */
.seg { position: relative; display: inline-flex; align-self: flex-start; max-width: 100%; overflow-x: auto; gap: 2px; border-radius: var(--r-btn); }
.seg button { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: var(--s-1); min-height: var(--tap-small); padding: 0 calc(var(--btn-x) - 4px) 0 calc(var(--btn-x) - 8px); border: 0; border-radius: var(--r-btn); background: transparent; color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1 var(--font); cursor: pointer; }
.seg .icon { width: var(--icon-sm); height: var(--icon-sm); }
.seg button[aria-pressed='true'] { color: var(--accent-text); }
/* Un réglage : le choix est teinté d'accent, comme une tuile ou une puce choisie. */
.seg__fond { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-btn); background: color-mix(in srgb, var(--accent-text) 14%, transparent); transform-origin: left; }
/* Un filtre (ce qu'on montre, pas ce qu'on règle) reste discret, en gris. En clair, surface-2 se confond avec le fond de page : text à 9 %. */
.seg--filtre button[aria-pressed='true'] { color: var(--text); }
.seg--filtre .seg__fond { background: light-dark(color-mix(in srgb, var(--text) 9%, transparent), var(--surface-2)); }
.bloc__panneau .seg--filtre .seg__fond { background: var(--line); }
/* Sur toute la largeur : les options se partagent la place. */
.seg--plein { display: flex; align-self: stretch; }
.seg--plein button { flex: 1 1 0; justify-content: center; min-width: 0; }

/* Jauge : scaleX plutôt que width, pour rester sur le compositeur. */
.gauge { height: var(--gauge); overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.gauge > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--t-slow) var(--ease-out); }

/* Tête de carte avec action au bout (.card__tete) : titre (et sa sous-ligne) qui prend la place, bouton icône au bord de la carte. */
.card__tete { display: flex; align-items: center; gap: var(--s-2); }
.card__tete > :first-child { flex: 1; min-width: 0; }
.card__tete > .icon-btn { flex: none; margin-block: calc(var(--s-2) * -1); margin-inline-end: calc(var(--s-2) * -1); }

/* Pastille de début de ligne : icône, ou initiale pour une personne. --c donne la couleur de catégorie. */
.pastille { --c: var(--text-2); display: grid; place-items: center; width: var(--pastille); height: var(--pastille); flex: none; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--c); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.pastille .icon { width: var(--icon-md); height: var(--icon-md); }
/* Vignette d'objet, en tête de ligne : la photo de l'objet, sinon son dessin (schéma du métier), sinon une icône, dans un
   carré arrondi teinté de tap × 1,25. Bouton (button.vignette-objet, ou span[role="button"] dans une ligne qui est déjà un bouton) : l'appui ouvre la fiche de l'objet. */
.vignette-objet { --c: var(--text-2); display: grid; place-items: center; flex: none; width: calc(var(--tap) * 1.25); height: calc(var(--tap) * 1.25); padding: 0; overflow: hidden; border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); }
.vignette-objet > img { width: 100%; height: 100%; object-fit: cover; }
.vignette-objet > svg:not(.icon) { width: 86%; height: 86%; }
.vignette-objet > .icon { width: var(--icon-md); height: var(--icon-md); }
:is(button, [role='button']).vignette-objet { cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
:is(button, [role='button']).vignette-objet:active { transform: scale(var(--press-scale)); }
.pastille--pleine { background: var(--c); color: var(--encre, var(--bg)); }
/* Pastille à l'accent : l'élément qui vient (la prochaine séance d'une liste numérotée), surtout pleine. */
.pastille--accent { --c: var(--accent-text); }

/* Champ en erreur et messages : toujours une icône et une phrase qui dit quoi faire. */
.field--error .input { border-color: var(--danger); }
.field__msg { display: flex; align-items: center; gap: var(--s-1); color: var(--danger); }
.field__msg .icon { width: calc(var(--icon-sm) - 2px); height: calc(var(--icon-sm) - 2px); }
.notice { --c: var(--text-2); display: flex; gap: var(--s-3); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--text); }
.notice > .icon { color: var(--c); }
.notice--ok { --c: var(--ok); }
.notice--warn { --c: var(--warn); }
.notice--danger { --c: var(--danger); }

/* Indicateur de contraste : icône, ratio et phrase, jamais la couleur seule. */
.contrast { --c: var(--text-2); display: inline-flex; align-items: center; gap: var(--s-1); color: var(--c); font-size: var(--fs-caption); font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.contrast .icon { width: calc(var(--icon-sm) - 2px); height: calc(var(--icon-sm) - 2px); }
.contrast--ok { --c: var(--ok); }
.contrast--warn { --c: var(--warn); }
.contrast--danger { --c: var(--danger); }
.contrast--herite { --c: currentColor; }

/* Lien dans un texte */
.lien { color: var(--accent-text); text-decoration: underline; }
/* Lien de suite (« Tout voir », « Mois par mois ») : texte d'accent 13 / 500 et chevron, en tête de carte ou sous une liste coupée. */
.lien-suite { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap-small); padding: 0; border: 0; background: none; color: var(--accent-text); font: var(--fw-nom) var(--fs-small) / 1.2 var(--font); text-decoration: none; cursor: pointer; }
.lien-suite .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Choix de couleur et d'ambiance sur mesure, voir web/personnalisation.js. */
.choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.couleur-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: calc(var(--tap) + 40px); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); font-weight: var(--fw-titre); box-shadow: inset 0 0 0 1px var(--line); }
.couleur-bloc__aa { font-size: var(--fs-h2); }
.couleur-bloc__texte { flex: 1 1 auto; }
.couleur-point { flex: none; width: var(--tap-small); height: var(--tap-small); padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.couleur-point--vide { background: var(--surface-2); cursor: default; }
.couleur-point[aria-pressed='true'] { outline: 2px solid var(--text); outline-offset: 2px; }
.apercus { position: sticky; z-index: 2; top: calc(var(--s-5) * -1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-inline: calc(var(--s-2) * -1); padding: var(--s-2); background: var(--surface); }
[data-density='large'] .apercus { position: static; grid-template-columns: minmax(0, 1fr); }
.apercu { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--inset-sm); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-small); box-shadow: inset 0 0 0 1px var(--line); }
.apercu__scene { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.apercu__scene .gauge { width: 100%; }
.apercu__mesure { display: flex; flex-direction: column; gap: 2px; }
.sheet__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }

/* Interrupteur : le pouce glisse, et sa face change par un fondu avec un effet d'échelle. Seuls transform et opacity s'animent. */
.switch { position: relative; display: inline-block; flex: none; width: var(--switch-w); height: var(--switch-h); border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.switch input { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.switch__actif { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; transition: opacity var(--t-toggle-fade); }
.switch__pouce { position: absolute; top: 3px; left: 3px; width: calc(var(--switch-h) - 6px); height: calc(var(--switch-h) - 6px); transition: transform var(--t-toggle) var(--ease-out); will-change: transform; }
.switch__forme { position: absolute; inset: 0; }
.switch__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; transition: opacity var(--t-toggle-fade), transform var(--t-toggle) var(--ease-out); }
.switch__face .icon { width: 68%; height: 68%; stroke-width: calc(var(--icon-stroke) * 1.5); }
.switch__face--off { background: var(--text-2); color: var(--surface); }
.switch__face--on { background: var(--on-accent); color: var(--accent); opacity: 0; transform: scale(0.5); }
.switch input:checked ~ .switch__actif { opacity: 1; }
.switch input:checked ~ .switch__pouce { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
.switch input:checked ~ .switch__pouce .switch__face--on { opacity: 1; transform: none; }
.switch input:checked ~ .switch__pouce .switch__face--off { opacity: 0; transform: scale(0.5); }
.switch input:focus-visible ~ .switch__pouce { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 50%; }

/* Tuile de choix : tout filtre ou réglage se choisit sur un aperçu de ce qu'il donne. */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(var(--tap) * 2.2), 7rem), 1fr)); gap: var(--s-2); }
/* Tuile de réglage, comme Clepso : un seul bloc, le croquis posé sur la tuile (sans cadre), la coche devant le nom.
   Fond : en clair, surface-2 à 35 % sur surface (plus léger) ; en sombre, surface-2 (piste 62C, 2026-11-05). */
.tuile-choix { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content) minmax(0, 1fr); align-items: center; row-gap: var(--s-2); min-width: 0; padding: var(--s-3) var(--s-2) var(--s-2); border: 0; border-radius: var(--r-md); background: light-dark(color-mix(in srgb, var(--surface-2) 35%, var(--surface)), var(--surface-2)); color: var(--text-2); font: var(--fw-nom) var(--fs-caption) / 1.2 var(--font); text-align: center; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.tuile-choix:active { transform: scale(var(--press-scale)); }
/* Choisie : teintée à 12 %, contour et coche (une carte, elle, garde son fond : .tuile-choix--image, .carte-choix). */
.tuile-choix[aria-pressed='true'] { background: color-mix(in srgb, var(--accent-text) 12%, var(--surface)); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent-text); }
/* Aperçu sans cadre ni fond : le croquis est sur la tuile. Un aperçu d'écran (.mini.fond : ambiance, thème) garde son fond et un trait. */
.tuile-choix__apercu { position: relative; display: grid; grid-row: 1; grid-column: 1 / -1; overflow: hidden; height: calc(var(--tap) * 1.5); border-radius: calc(var(--r-md) * 0.6); }
.tuile-choix__apercu .mini.fond { box-shadow: inset 0 0 0 1px var(--line); }
/* Rangées fixées : la coche et le nom restent sur la même ligne, quel que soit leur ordre dans le balisage. */
/* Un nom ne se coupe jamais au milieu d'un mot (règle de l'utilisateur, 2026-11-05) : il passe à la ligne entre deux mots,
   deux lignes au plus, puis finit par « … ». */
.tuile-choix__nom { display: -webkit-box; grid-row: 2; grid-column: 3; min-width: 0; overflow: hidden; overflow-wrap: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Grand aperçu : une image carrée (une idée illustrée), le nom dessous. */
/* Grand aperçu : posée comme une carte de contenu (fond surface, ombre, contour fin), le texte à l'encre du texte. */
.tuile-choix--image { border: var(--card-edge) solid var(--line); color: var(--text); }
.tuile-choix--image, .tuile-choix--image[aria-pressed='true'] { background: var(--surface); box-shadow: var(--shadow-card); }
.tuile-choix--image .tuile-choix__apercu { height: auto; aspect-ratio: 1; }
/* Grand aperçu carré, jamais étiré : un aperçu de l'app (apercuApp), thème, couleur ou ambiance. */
.tuile-choix--grand .tuile-choix__apercu { height: auto; aspect-ratio: 1; }
/* En bande : aperçu deux fois plus large que haut, son contenu côte à côte (couleur des Réglages : onglet et bouton). */
.tuile-choix--bande .tuile-choix__apercu { height: auto; aspect-ratio: 2 / 1; }
.apercu-app--ligne > .apercu-app__contenu { flex-direction: row; gap: var(--s-3); }
/* Aperçu propre à l'app : son contenu, à sa taille naturelle, réduit par ajusterApercus pour tenir (transform). Centré même plus
   large que la tuile (piste bornée à 0, unsafe) : sinon la piste s'élargit vers la droite et la réduction depuis le centre le décale. */
.apercu-app { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: unsafe center; width: 100%; height: 100%; min-height: 0; overflow: hidden; padding: var(--s-3); color: var(--text); font-family: var(--font); pointer-events: none; }
.apercu-app__contenu { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--s-2); width: max-content; transform-origin: center; }
.tuile-choix__apercu .apercu-app.fond { box-shadow: inset 0 0 0 1px var(--line); }
.tuile-choix--image .tuile-choix__apercu > img, .tuile-choix--image .tuile-choix__apercu > .couverture { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
/* Carte qu'on choisit (une parmi plusieurs) : même contour d'accent que la tuile de choix. */
.carte-choix { width: 100%; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.carte-choix:active { transform: scale(var(--press-scale)); }
/* Choisie : 2 px d'accent partout, image comprise. La bordure (cardEdge) passe en accent, et une couche par-dessus le contenu
   ajoute le reste (outline et ombre intérieure passeraient sous une couverture en position: relative). */
.carte-choix, .tuile-choix--image { position: relative; }
.carte-choix[aria-pressed='true'], .carte-choix[aria-current='true'], .tuile-choix--image[aria-pressed='true'] { border-color: var(--accent-text); }
.carte-choix[aria-pressed='true']::after, .carte-choix[aria-current='true']::after, .tuile-choix--image[aria-pressed='true']::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 calc(2px - var(--card-edge)) var(--accent-text); pointer-events: none; }
/* Carte de contenu posée sur un bouton : sans la marge du bouton, l'image touche les bords. */
.carte-media.carte-choix { padding: 0; }
.tuile-choix__coche { grid-row: 2; grid-column: 2; display: grid; place-items: center; width: 0; height: 1.35em; border-radius: 50%; background: var(--accent-text); color: var(--surface); transform: scale(0); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast); }
.tuile-choix__coche .icon { width: 1em; height: 1em; stroke-width: calc(var(--icon-stroke) * 1.5); }
.tuile-choix[aria-pressed='true'] .tuile-choix__coche { width: 1.35em; margin-inline-end: var(--s-1); transform: none; opacity: 1; }

/* Petits aperçus, dessinés avec les vraies variables : ils montrent la vraie ambiance, le vrai accent. */
.mini { display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); min-width: 0; padding: var(--s-2); color: var(--text); }
.mini__aa { font-size: var(--fs-small); font-weight: var(--fw-titre); line-height: 1; }
.mini__trait { width: 70%; height: 3px; border-radius: var(--r-pill); background: var(--text-2); }
.mini__bouton { width: 60%; height: 10px; border-radius: calc(var(--r-btn) * 0.5); background: var(--accent); }
.mini__plein { display: block; width: 60%; height: 100%; border-radius: inherit; background: var(--accent); }
.mini .gauge { height: 5px; }
.mini-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Petit écran de l'app : titre, anneau, bouton, onglets en bas. Moitié clair, moitié sombre : deux écrans superposés, le second découpé. */
.mini--ecran { justify-content: space-between; align-items: center; gap: 3px; padding: var(--s-1) var(--s-1) 0; }
.mini-ecran__titre { align-self: flex-start; width: 45%; height: 3px; border-radius: var(--r-pill); background: var(--text-2); }
.mini-ecran__anneau { width: calc(var(--tap) * 0.5); aspect-ratio: 1; border: 3px solid var(--accent); border-left-color: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 50%; }
.mini-ecran__bouton { width: 40%; height: 6px; border-radius: calc(var(--r-btn) * 0.4); background: var(--accent); }
.mini-ecran__onglets { display: flex; align-self: stretch; justify-content: space-around; align-items: center; height: 9px; margin-inline: calc(var(--s-1) * -1); background: var(--surface); box-shadow: inset 0 1px 0 var(--line); }
.mini-ecran__onglets i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-2); }
.mini-ecran__onglets i:first-child { background: var(--accent); }
.mini-moitie { display: grid; }
.mini-moitie > .mini { grid-area: 1 / 1; }
.mini-moitie > .mini:last-child { clip-path: inset(0 0 0 50%); }
.mini-duo .mini { padding: var(--s-1); }
.mini--icone { align-items: center; }
.mini--icone span { display: grid; place-items: center; width: var(--tap-small); height: var(--tap-small); border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.mini--icone .icon { width: var(--icon-md); height: var(--icon-md); }
/* Couleur secondaire proposée : un bloc encadré de sa couleur et son « + », comme en mise en page d'un écran. */
.mini--secondaire { position: relative; align-items: center; }
.mini--secondaire .mini__cadre { width: 80%; height: calc(var(--tap) * 0.6); border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px var(--secondaire); background: color-mix(in srgb, var(--secondaire) 6%, transparent); }
.mini--secondaire .mini__rond, .apercu__secondaire .mini__rond { position: absolute; bottom: var(--s-1); display: grid; place-items: center; width: calc(var(--handle) - var(--s-1)); height: calc(var(--handle) - var(--s-1)); border-radius: 50%; background: var(--secondaire); color: var(--on-secondaire); }
.mini--secondaire .icon, .apercu__secondaire .icon { width: var(--handle-icon); height: var(--handle-icon); }
.apercu__secondaire { position: relative; display: grid; place-items: center; width: 100%; height: calc(var(--tap) * 0.9); border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px var(--secondaire); background: color-mix(in srgb, var(--secondaire) 6%, transparent); }
.apercu__secondaire .mini__rond { position: static; }
.mini--pastille, .mini--aa { align-items: center; }
.mini--pastille i { width: calc(var(--tap) * 0.6); aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.mini__aa--normal { font-size: var(--fs-h3); }
.mini__aa--grand { font-size: calc(var(--fs-h3) * 1.45); }
.mini--densite i { display: block; height: 3px; border-radius: var(--r-pill); background: var(--text-2); }
.mini--normale i:nth-child(n + 4) { display: none; }
.mini--large { gap: 5px; }
.mini--large i { height: 8px; }
.mini--large i:nth-child(n + 3) { display: none; }
.mini-coin { place-self: center; width: 56%; height: 62%; border-radius: calc(24px * var(--r-k)) 0 0 0; background: var(--surface-2); box-shadow: inset 2px 2px 0 var(--text-2); }
.mini-police { place-self: center; color: var(--text); font-size: var(--fs-h2); line-height: 1; }
/* Anneau en petit, pour les parties de l'ambiance qui l'habillent (épaisseur, extrémités, graduations) ; bouton pressé. */
.mini-anneau { place-self: center; width: calc(var(--tap) * 1.1); }
.mini-anneau .anneau { --ep: calc(var(--s-1) * 1.25 * var(--ring-k, 1)); }
.mini--appui { align-items: center; }
.mini--appui .mini__bouton { width: 66%; height: 40%; }
.apercu__anneau { align-self: center; width: calc(var(--tap) * 2.2); }
.apercu__anneau .minuteur__temps { font-size: 25cqw; letter-spacing: -0.04em; }

/* Case : contrôle natif redessiné, clavier et lecteur d'écran compris. */
.choice { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; }
.check { appearance: none; flex: none; margin: 0; cursor: pointer; background: var(--surface-2); }
.check { display: grid; place-items: center; width: var(--check); height: var(--check); border-radius: calc(var(--check) * 0.32); box-shadow: inset 0 0 0 1px var(--line-strong); }
.check::after { content: ''; width: calc(var(--check) * 0.5); height: calc(var(--check) * 0.27); border: solid var(--on-accent); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale var(--t-fast) var(--ease-out); }
.check:checked { background: var(--accent); box-shadow: none; }
.check:checked::after { scale: 1; }
/* Case à trois états (.check--etats) : rien, prévu (data-etat="prevu"), fait (cochée). Plus grande à l'œil (checkEtats,
   28) ; sa zone de toucher reste celle de l'étiquette (tap). Prévu : fond teinté franc, contour et icône calendar-check à
   l'accent (masque, tracé de Lucide) ; fait : fond plein et coche. */
.check--etats { --check: var(--check-etats); }
/* Case seule, sans libellé visible (au bout d'un créneau) : l'étiquette donne la zone de toucher, tap × tap. */
.choice--seule { flex: none; justify-content: center; min-width: var(--tap); margin-inline-end: calc((var(--tap) - var(--check)) / -2); }
.check--etats::before { content: ''; grid-area: 1 / 1; width: 72%; height: 72%; background: var(--accent-text); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v3M16 2v3'/><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18m-12 6 2 2 4-4'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v3M16 2v3'/><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18m-12 6 2 2 4-4'/></svg>") center / contain no-repeat; opacity: 0; transform: scale(0.6); transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.check--etats::after { grid-area: 1 / 1; }
.check[data-etat='prevu']:not(:checked) { background: color-mix(in srgb, var(--accent-text) 22%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent-text); }
.check--etats[data-etat='prevu']:not(:checked)::before { opacity: 1; transform: none; }

/* État vide : une icône, une phrase, l'action suivante. */
/* Indice de suite : fondu vers le fond et chevron, tant qu'il reste à défiler (seule l'opacité s'anime). La place (bottom) revient à l'app. */
.indice-suite { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; height: calc(var(--tap) + var(--s-5)); padding-bottom: var(--s-1); background: linear-gradient(to bottom, transparent, var(--bg)); color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); }
.indice-suite[data-visible] { opacity: 1; }
.indice-suite--dans { position: absolute; }
/* Icône seule d'une page centrée (erreur de démarrage) : 48, sans pastille, de la couleur de l'état. */
.icone-seule { width: calc(var(--s-6) * 1.5); height: calc(var(--s-6) * 1.5); }
.icone-seule--danger { color: var(--danger); }
/* Grande icône seule, pâle, sans pastille (historique vide, erreur) : 64 à 30 %. */
.empty__icone { width: calc(var(--s-6) * 2); height: calc(var(--s-6) * 2); color: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: calc(var(--icon-stroke) * 0.75); }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-6) var(--inset); text-align: center; color: var(--text-2); }

/* Tableau : défile dans son cadre, un fondu montre de quel côté il continue. Voir suivreTableaux. */
.tableau { position: relative; overflow: hidden; padding: 0; border-radius: var(--r-md); }
.tableau__defile { overflow-x: auto; }
.tableau__fondu { position: absolute; top: 0; bottom: 0; width: var(--s-7); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); }
.tableau__fondu--debut { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.tableau__fondu--fin { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.tableau[data-debut='true'] .tableau__fondu--debut, .tableau[data-fin='true'] .tableau__fondu--fin { opacity: 1; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-size: var(--fs-small); font-weight: var(--fw-nom); color: var(--text-2); }
.table th, .table td { padding: var(--cell-y) var(--inset-sm); border-bottom: 1px solid var(--line); white-space: nowrap; }
/* Première et dernière colonnes alignées sur le contenu des tuiles et des lignes. */
.table th:first-child, .table td:first-child { padding-left: var(--inset); }
.table th:last-child, .table td:last-child { padding-right: var(--inset); }
.table tr:last-child td { border-bottom: 0; }

/* Minuteurs : voir web/minuteurs.js. --mc donne la couleur du minuteur, l'accent sinon. Rien ne bouge que par transform et opacity. */
.couleur-ok { --mc: var(--ok); }
.couleur-warn { --mc: var(--warn); }
.couleur-danger { --mc: var(--danger); }
/* Couleur d'état (data-couleur-etat) : posée par le temps qui reste, vert, puis ambre sous 50 %, rouge sous 20 %. */
[data-couleur-etat][data-niveau='ok'] { --mc: var(--ok); }
[data-couleur-etat][data-niveau='moitie'] { --mc: var(--warn); }
[data-couleur-etat][data-niveau='fin'] { --mc: var(--danger); }
/* Couleur choisie par la personne pour un minuteur : une catégorie, donc une couleur de données. */
.couleur-d1 { --mc: var(--data-1); }
.couleur-d2 { --mc: var(--data-2); }
.couleur-d3 { --mc: var(--data-3); }
.couleur-d4 { --mc: var(--data-4); }
.couleur-d5 { --mc: var(--data-5); }
.couleur-d6 { --mc: var(--data-6); }
.couleur-d7 { --mc: var(--data-7); }
.couleur-d8 { --mc: var(--data-8); }
/* Version foncée de la couleur (bandeau, texte sur fond clair), comme foncer() : même teinte, --fonce de sa luminosité. */
[class*='couleur-'], [data-couleur-etat] { --mc-fonce: color-mix(in srgb, var(--mc) var(--fonce), #000); }

/* Anneau : deux moitiés qui tournent dans leur découpe, une tête ronde. */
/* Découpé : en tournant, les coins invisibles de ses couches élargiraient la page. Marge d'un pixel : le bord lissé du cercle
   (qui touche la boîte) n'est pas rogné, sinon il paraît plat en haut, en bas et sur les côtés. */
/* --ep-net : l'épaisseur au pixel entier. Chrome arrondit vers le bas l'épaisseur d'une bordure (l'arc, la piste) mais pas une taille
   (les ronds du départ et de la tête) : avec 10,5 px, l'arc faisait 10 et les ronds dépassaient d'un demi-pixel côté intérieur.
   Tout ce qui dessine l'anneau lit --ep-net, les retraits du contenu gardent --ep. */
.anneau { --ep: calc(var(--ring) * var(--ring-k, 1)); --ep-net: round(down, var(--ep), 1px); --ep-retrait: round(calc(var(--ep-net) * 0.08), 1px); container-type: inline-size; position: relative; display: block; flex: none; width: 100%; aspect-ratio: 1; overflow: clip; overflow-clip-margin: 1px; }
.anneau__centre .minuteur__nom, .anneau__centre .minuteur__fin { max-width: 77%; }
.anneau--fin { --ep: var(--s-1); width: var(--pastille); }
.anneau__piste { position: absolute; inset: var(--ep-retrait); border: calc(var(--ep-net) - 2 * var(--ep-retrait)) solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 50%; }
/* Piste rentrée de 8 % de l'épaisseur de chaque côté (un pixel sur un anneau de carte) : les moitiés tournées sont rendues à une fraction de pixel près, sous la couleur son bord se devinerait en filet gris. */
/* Fenêtres d'une moitié : un pixel de plus vers l'extérieur (haut, bas, bord), sinon elles rognent le liseré lissé du cercle
   et le font paraître plat aux quatre extrémités. Cercles en cqw (l'anneau est le conteneur) : alignés au pixel près. */
.anneau__moitie { position: absolute; top: -1px; bottom: -1px; overflow: hidden; }
.anneau__moitie--droite { left: 50%; width: calc(50cqw + 1px); }
.anneau__moitie--gauche { left: -1px; }
.anneau__moitie i { position: absolute; top: 1px; width: 100cqw; height: 100cqw; border: var(--ep-net) solid transparent; border-radius: 50%; }
/* La gauche dépasse l'axe d'un pixel : les deux moitiés se chevauchent, sinon un trait du fond passe entre elles. */
.anneau__moitie--gauche { width: calc(50cqw + 2px); }
/* Jointure à six heures, la gauche montrée : un trait de la couleur de l'arc, deux pixels sur toute l'épaisseur, posé sur l'axe
   (bord droit de la fenêtre de la gauche), la recouvre ; sinon un filet du fond y passe entre les deux coupes. */
.anneau:not(.anneau--plein) .anneau__moitie--gauche { background: linear-gradient(var(--mc, var(--accent-text)), var(--mc, var(--accent-text))) right 0 bottom 1px / 2px var(--ep-net) no-repeat; }
.anneau__moitie--droite i { left: -50cqw; border-top-color: var(--mc, var(--accent-text)); border-left-color: var(--mc, var(--accent-text)); }
.anneau__moitie--gauche i { left: 1px; border-right-color: var(--mc, var(--accent-text)); border-bottom-color: var(--mc, var(--accent-text)); }
.anneau__depart, .anneau__tete i { position: absolute; top: 0; left: calc(50% - var(--ep-net) / 2); width: var(--ep-net); height: var(--ep-net); border-radius: var(--anneau-bout, 50%); background: var(--mc, var(--accent-text)); }
.anneau__tete { position: absolute; inset: 0; }
/* Un point clair au bout de l'arc montre où en est le minuteur, sauf sur l'anneau fin et à l'arrêt, anneau plein. */
/* Bordure de la couleur de l'arc (22 % de l'épaisseur), centre clair limité à l'intérieur de la bordure : le bord lissé du point
   est de la couleur de l'arc, sans liseré clair (un fond clair cerné d'une ombre intérieure en laissait un). Toute forme de bout. */
.anneau:not(.anneau--fin) .anneau__tete i { border: round(calc(var(--ep-net) * 0.22), 1px) solid var(--mc, var(--accent-text)); background: var(--ring-dot) padding-box; }
[data-etat='pret'] .anneau:not(.anneau--fin) .anneau__tete i { background: var(--mc, var(--accent-text)); box-shadow: none; }
/* Il sonne : l'anneau est plein, sans point au bout. */
[data-etat='fini'] .anneau__tete { opacity: 0; }
.anneau--vide .anneau__depart, .anneau--vide .anneau__tete, .anneau--vide .anneau__moitie { opacity: 0; }
/* Sens anti-horaire : l'anneau en miroir, son centre remis à l'endroit. */
.anneau--anti { transform: scaleX(-1); }
.anneau--anti > .anneau__centre { transform: scaleX(-1); }
/* Graduations juste à l'intérieur de l'anneau, comme un cadran : 12 longues (--graduations: block), et 60 avec les fines
   (--graduations-fines: block). Posées par l'ambiance sur mesure ; absentes sinon. */
.anneau__graduations { position: absolute; inset: var(--ep); display: var(--graduations, none); border-radius: 50%; pointer-events: none; }
.anneau__graduations i { --long: max(calc(var(--ep) * 0.9), 7px); position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -1deg, color-mix(in srgb, var(--text) 27%, transparent) 0 2deg, transparent 2deg 30deg); mask: radial-gradient(closest-side, transparent calc(100% - var(--long)), #000 calc(100% - var(--long))); }
.anneau__graduations i + i { --long: max(calc(var(--ep) * 0.45), 3px); display: var(--graduations-fines, none); background: repeating-conic-gradient(from -0.5deg, color-mix(in srgb, var(--text) 27%, transparent) 0 1deg, transparent 1deg 6deg); }
.anneau__centre { position: absolute; inset: var(--ep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; text-align: center; }
/* Disque plein, pour un cadran ou un balayage : même mouvement, sans trou. */
.anneau--plein .anneau__piste, .anneau--plein .anneau__depart, .anneau--plein .anneau__tete { display: none; }
.anneau--plein .anneau__moitie i { border: 0; }
.anneau--plein .anneau__moitie--droite i { background: linear-gradient(135deg, var(--mc, var(--accent-text)) 50%, transparent 50%); }
.anneau--plein .anneau__moitie--gauche i { background: linear-gradient(315deg, var(--mc, var(--accent-text)) 50%, transparent 50%); }
/* Disque plein : la jointure du bas, du centre à six heures, recouverte de même. */
.anneau--plein .anneau__moitie--gauche { background: linear-gradient(var(--mc, var(--accent-text)), var(--mc, var(--accent-text))) right 0 bottom 1px / 2px 50% no-repeat; }
/* Segments d'une séquence : des coupures fixes dans la couleur du fond. */
.anneau__coupure { position: absolute; inset: 0; transform: rotate(var(--a)); }
.anneau__coupure i { position: absolute; top: -1px; left: calc(50% - 1.5px); width: 3px; height: calc(var(--ep) + 2px); background: var(--bg); }

/* Carte de minuteur : anneau seul, carte teintée, carte pleine. */
.minuteurs { container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); width: 100%; }
[data-density='large'] .minuteurs { grid-template-columns: minmax(0, 1fr); }
.minuteur { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-width: 0; color: var(--text); border: 0; background: none; font: inherit; }
.minuteur[data-appui], .row--minuteur[data-appui] { cursor: pointer; }
/* Une carte de la grille rétrécit sous le doigt, à l'échelle d'appui de l'ambiance (comme l'app), hors mode disposition. */
.grille-carres:not([data-edition]) [data-appui-long] { transition: transform var(--t-press) var(--ease-out); }
.grille-carres:not([data-edition]) [data-appui-long]:active { transform: scale(var(--press-scale)); }
.minuteur__nom { display: block; max-width: 100%; overflow: hidden; font-size: var(--fs-small); font-weight: var(--fw-nom); text-overflow: ellipsis; white-space: nowrap; }
.minuteur__temps { display: block; font-size: var(--fs-h1); font-weight: var(--graisse-temps, var(--fw-phrase)); line-height: 1.1; font-variant-numeric: tabular-nums; }
.minuteur__fin { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-caption); font-weight: var(--fw-nom); color: var(--text-2); }
.minuteur__fin .icon { width: 1em; height: 1em; }
/* Arrêté, le temps passe en texte à 55 %, plus clair que text-2, comme Clepso. */
.minuteur[data-etat='pret'] .minuteur__temps, .minuteur[data-etat='pause'] .minuteur__temps { color: color-mix(in srgb, var(--text) 55%, transparent); }
.minuteur[data-etat='cours'] .minuteur__fin { text-transform: none; letter-spacing: normal; }
/* Statut d'une app qui le dit elle-même : en phrase (départ programmé), ou en majuscules (préparation, qui tourne déjà). */
.minuteur .minuteur__fin.minuteur__fin--phrase { text-transform: none; letter-spacing: normal; }
.minuteur .minuteur__fin.minuteur__fin--caps { text-transform: uppercase; letter-spacing: calc(var(--track-caps) * var(--track-k, 1)); }
.minuteur[data-etat] .minuteur__fin.minuteur__fin--icone .icon { display: inline-block; }
.minuteur[data-etat='fini'] .minuteur__fin { color: var(--mc, var(--accent-text)); font-weight: var(--fw-titre); }
.minuteur--teintee, .minuteur--pleine { align-items: stretch; padding: var(--inset); border-radius: var(--r-lg); background: color-mix(in srgb, var(--mc, var(--accent-text)) 16%, var(--surface)); }
/* Teintée : la couleur du minuteur seulement quand il tourne ou sonne ; prêt ou en pause, la carte reste blanche. */
.minuteur--teintee[data-etat='pret'], .minuteur--teintee[data-etat='pause'] { background: var(--surface); }
/* Sur deux colonnes, la carte teintée est plus haute que large (--tinted-row), comme dans l'éditeur et dans Clepso. */
.minuteurs > .minuteur--teintee { height: calc((100cqw - var(--s-3)) / 2 * var(--tinted-row)); }
[data-density='large'] .minuteurs > .minuteur--teintee { height: auto; }
/* Teintée, comme Clepso : nom, l'anneau dans toute la place qui reste, statut ; tailles et écarts suivent la largeur de la carte. */
.minuteur--teintee { container-type: inline-size; gap: 0; }
.minuteur--teintee .minuteur__titre { margin-block-end: clamp(var(--s-1), 3cqw, var(--s-3)); gap: var(--s-2); font-size: clamp(var(--fs-caption), 9cqw, var(--fs-h2)); }
.minuteur--teintee .minuteur__titre .minuteur__nom { font-size: inherit; }
.minuteur--teintee .anneau { flex: 1 1 0; align-self: center; width: auto; max-width: 100%; min-height: 0; }
.minuteur--teintee .anneau .minuteur__temps { font-size: 20cqw; }
.minuteur--teintee > .minuteur__fin { margin-block-start: clamp(var(--s-2), 5.4cqw, var(--s-3)); font-size: clamp(var(--fs-caption), 7.2cqw, var(--fs-h3)); }
/* Dans l'anneau, comme Clepso : nom, temps, statut, proportionnels à l'anneau, 2 puis 4 px d'écart à la taille habituelle. */
.anneau .minuteur__nom { font-size: clamp(var(--fs-caption), 8.8cqw, var(--fs-h2)); font-weight: var(--fw-nom); color: color-mix(in srgb, var(--text) 85%, transparent); }
.anneau .minuteur__fin { font-size: clamp(var(--fs-caption), 7.6cqw, var(--fs-h3)); }
.anneau__centre .minuteur__temps { margin-block: 1.3cqw 2.5cqw; letter-spacing: -0.04em; }
[data-etat]:not([data-etat='cours']) .row__sub .icon, [data-etat]:not([data-etat='cours']) .minuteur__fin .icon { display: none; }
.minuteur__titre { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.minuteur__point { flex: none; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--mc, var(--accent-text)); }
.minuteur--teintee > .minuteur__fin { justify-content: center; text-align: center; }
.minuteur--pleine { justify-content: space-between; min-height: 100%; background: var(--mc, var(--accent-text)); color: var(--bg); }
.minuteur--pleine .minuteur__point { background: var(--bg); }
.minuteur--pleine .minuteur__fin, .minuteur--pleine[data-etat] .minuteur__temps { color: inherit; }
.minuteur--pleine .minuteur__temps { font-size: var(--fs-num); }
.anneau .minuteur__temps { font-size: 25cqw; }
/* Anneau seul : en retrait d'une épaisseur dans sa case, comme Clepso. */
.minuteur:not(.minuteur--teintee) > .anneau { width: calc(100% - 2 * var(--ep)); }
/* Barre de temps : scaleX, comme la jauge. */
.temps-barre { display: block; overflow: hidden; height: var(--s-1); border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 22%, transparent); }
.temps-barre i { display: block; height: 100%; border-radius: inherit; background: currentColor; transform-origin: left; }

/* Cadran : disque teinté, part restante, aiguille et graduations. */
.cadran { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 1; overflow: hidden; border: calc(1.5 * var(--card-edge)) solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
/* Cadran comme Clepso : la part restante à 30 % jusqu'à 94 % du rayon, une marque par minute, une aiguille qui dépasse un peu le centre, un point au centre. */
.cadran .anneau { position: absolute; inset: 3%; width: auto; }
.cadran .anneau--plein { opacity: 0.3; }
.cadran__marque { position: absolute; inset: 0; transform: rotate(var(--a)); }
.cadran__marque i { position: absolute; top: 3%; left: calc(50% - 0.5px); width: 1px; height: 3%; border-radius: 1px; background: var(--text-2); opacity: 0.3; }
.cadran__marque--longue i { left: calc(50% - 1px); width: 2px; height: 7%; opacity: 0.7; }
.cadran__aiguille { position: absolute; inset: 0; }
.cadran__aiguille i { position: absolute; top: 10%; bottom: 45%; left: calc(50% - 2px); width: 4px; border-radius: 2px; background: var(--mc, var(--accent-text)); }
.cadran__centre { position: absolute; top: 50%; left: 50%; width: max(6%, 6px); aspect-ratio: 1; border-radius: 50%; background: var(--mc, var(--accent-text)); transform: translate(-50%, -50%); }
.minuteur--cadran .cadran { width: 72%; }

/* Autres objets posés sur une page. */
.tuile-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; aspect-ratio: 1; padding: var(--inset); border: 0; border-radius: var(--r-lg); background: color-mix(in srgb, var(--mc, var(--accent-text)) 22%, var(--surface)); color: var(--text); font: var(--fw-nom) var(--fs-h3) / 1.2 var(--font); cursor: pointer; transition: transform var(--t-slow) var(--ease-out); }
.tuile-action:active { transform: scale(var(--press-scale)); transition-duration: var(--t-press); }
.temps-liste { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; padding: var(--inset); border-radius: var(--r-md); background: var(--surface); }
.temps-liste__ligne { display: flex; flex-direction: column; gap: var(--s-1); color: var(--mc, var(--accent-text)); }
.temps-liste__texte { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--text); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.lancement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); width: 100%; }
.lancement .btn { padding-inline: var(--s-1); }

/* Grille en carrés (web/grille.js) : chaque carte posée par left et top, de data-taille carrés sur data-lignes. Comme Clepso. */
.grille-carres { --rang-k: 1; position: relative; width: 100%; column-gap: var(--s-2); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.grille-carres--haute { --rang-k: var(--tinted-row); }
.grille-carres__carte { container-type: size; position: absolute; display: flex; min-width: 0; min-height: 0; }
/* Ancien dessin d'une carte qui s'allume ou s'éteint, effacé en fondu par-dessus le nouveau (fondreChangements). */
.grille-carres__fondu { position: absolute; inset: 0; z-index: 1; display: flex; pointer-events: none; }
.grille-carres__fondu > * { flex: 1 1 auto; min-width: 0; }
/* Grille vide le temps que sa dernière carte parte (la page passe ensuite à son état vide). */
.grille-carres__fantome { position: relative; height: 0; overflow: visible; pointer-events: none; }
/* Contour d'une carte qu'on montre (revelerCarte) : une pulsation d'accent, en opacité. */
.grille-carres__revele { position: absolute; inset: 0; z-index: 2; border-radius: var(--r-lg); box-shadow: 0 0 0 3px var(--accent); pointer-events: none; opacity: 0; }
.grille-carres__carte > * { flex: 1; min-width: 0; min-height: 0; }
.grille-carres__partie { pointer-events: none; }
/* Mode disposition : les cases libres derrière, un cadre et trois poignées sur chaque carte. */
.grille-carres__fond { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), var(--cellule, 1fr)); grid-auto-rows: var(--rang, 80px); align-content: start; gap: var(--s-2); pointer-events: none; }
.grille-carres__fond i { border-radius: calc(var(--r-lg) + var(--s-1)); background: color-mix(in srgb, var(--text) 6%, transparent); }
.grille-carres__cadre { position: absolute; inset: 0; z-index: 1; border: calc(1.5 * var(--card-edge)) solid color-mix(in srgb, var(--accent-text) 50%, transparent); border-radius: calc(var(--r-lg) + var(--s-1)); pointer-events: none; transition: opacity var(--t-fast) var(--ease-out); }
.grille-carres__cadre--fort { border-width: 3px; border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 12%, transparent); opacity: 0; }
.grille-carres__carte.redim .grille-carres__cadre--fort { opacity: 1; }
.grille-carres[data-edition] > [data-carre] { touch-action: pan-y; cursor: grab; }
/* Chaque carte se pose à s1 du bord de sa case, à l'arrondi rLg (bouton d'action compris) : la case et le quadrillage se voient dans tous les affichages.
   Cases et cadre à rLg + s1 : les arrondis sont concentriques. */
.grille-carres[data-edition] > [data-carre] > :not(.poignee, .grille-carres__cadre) { margin: var(--s-1); border-radius: var(--r-lg); --surface: color-mix(in srgb, var(--surface-page) 82%, transparent); }
/* Ce qui se peint en surface (widgets, cartes teintées, boutons d'action) devient un peu translucide : le widget d'abord, le quadrillage deviné derrière. */
.grille-carres[data-edition] { --surface-page: var(--surface); }
.grille-carres[data-edition] > [data-carre] > :not(.poignee, .grille-carres__cadre) { pointer-events: none; }
.grille-carres__carte .poignee { z-index: 2; }
.grille-carres__carte[data-pleine-largeur] .poignee--haut-gauche { display: none; }
.grille-carres__carte .poignee--haut-gauche { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.poignee[data-poignee-taille] { touch-action: none; }
.grille-carres__carte.deplace { opacity: 0.25; }
.grille-carres__fantome { position: fixed; z-index: 40; display: flex; pointer-events: none; transform: scale(1.08); }
.grille-carres__fantome > * { flex: 1; min-width: 0; }

/* Pages qui défilent au doigt, une à la fois : défilement natif, calé page par page. */
.defile-pages { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.defile-pages::-webkit-scrollbar { display: none; }
.defile-pages[data-fige] { overflow-x: hidden; }
.defile-pages__page { flex: 0 0 100%; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; }

/* Carte de minuteur dans la grille : tailles et écarts proportionnels à la carte (cqw de la case), comme Clepso. */
.grille-carres__carte > .minuteur--teintee { padding: clamp(var(--s-2), 9cqw, var(--inset)); }
.minuteur__carre { container-type: size; position: relative; display: grid; place-items: center; flex: 1 1 0; width: 100%; min-height: 0; }
.minuteur__carre > .anneau { width: calc(min(100cqw, 100cqh) - 2 * var(--ep)); }
/* Boutons + et − autour : l'anneau rentre un peu, leurs morceaux prennent les coins bas. */
.minuteur__carre--autour > .anneau { width: calc(min(100cqw, 100cqh) * 0.97 - 2 * var(--ep)); }
/* Boutons + et − dedans : le texte reste au-dessus d'eux, un peu plus petit. */
.minuteur__carre--dedans .anneau__centre { inset: var(--ep) var(--ep) 33%; }
.minuteur__carre--dedans .anneau .minuteur__nom { font-size: clamp(var(--fs-caption), 7cqw, var(--fs-h2)); }
.minuteur__carre--dedans .anneau .minuteur__temps { font-size: 20cqw; }
.minuteur__carre--dedans .anneau .minuteur__fin { font-size: clamp(var(--fs-caption), 6.1cqw, var(--fs-h3)); }
.minuteur__dessous { display: flex; align-items: center; justify-content: center; gap: var(--s-2); max-width: 100%; min-width: 0; font-size: var(--fs-small); font-weight: var(--fw-nom); }
.minuteur__dessous .minuteur__nom { font-size: inherit; }
.minuteur--dessous { justify-content: flex-start; }
.minuteur__sous { display: block; max-width: 100%; overflow: hidden; color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); text-overflow: ellipsis; white-space: nowrap; }
.anneau .minuteur__sous { font-size: clamp(var(--fs-caption), 7.6cqw, var(--fs-h3)); }
.minuteur--teintee > .minuteur__sous { margin-block-start: clamp(var(--s-2), 5.4cqw, var(--s-3)); font-size: clamp(var(--fs-caption), 7.2cqw, var(--fs-h3)); text-align: center; }
.minuteur__marque { flex: none; width: 1.1em; height: 1.1em; color: var(--text-2); }
/* Une horloge ne s'éteint pas : ses chiffres restent pleins sur une carte blanche. */
.minuteur--horloge.minuteur--teintee { background: var(--surface); }
/* Teintée : la zone de l'anneau, et ses deux boutons dans les coins bas. */
.minuteur__zone { container-type: size; position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-height: 0; }
.minuteur--teintee .minuteur__zone > .anneau { flex: none; width: min(100cqw, 100cqh); max-width: none; }
.minuteur__zone--coins { padding-block-end: clamp(24px, 23.5cqw, 44px); }
.minuteur__coin { position: absolute; bottom: 0; }
.minuteur__coin--debut { left: 0; }
.minuteur__coin--fin { right: 0; }
.minuteur__coin--haut { top: calc(var(--s-1) * -1); bottom: auto; right: calc(var(--s-1) * -1); }

/* Boutons + et − d'une carte : rond avec le signe, ou pilule avec le temps qu'il ajoute. */
.ajust-rond { display: inline-grid; place-items: center; width: clamp(24px, 23.5cqw, 44px); height: clamp(24px, 23.5cqw, 44px); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 16%, transparent); color: var(--text); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.ajust-rond .icon { width: clamp(14px, 13.2cqw, 26px); height: clamp(14px, 13.2cqw, 26px); }
.ajust-rond--temps { width: auto; height: clamp(22px, 22cqw, 42px); padding-inline: clamp(6px, 6.6cqw, 14px); border-radius: var(--r-pill); font: var(--fw-nom) clamp(10px, 8.8cqw, 18px) / 1 var(--font); white-space: nowrap; }
.ajust-rond--lecture { background: var(--mc, var(--accent-text)); color: var(--surface); }
.ajust-rond:active { transform: scale(var(--press-scale)); }
/* Sur l'anneau : deux morceaux dessinés en SVG par poserAjusts, dedans ou autour. Pâle, plein ou contour. */
.ajusts { position: absolute; top: 50%; left: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); transform: translate(-50%, -50%); pointer-events: none; }
.ajust { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--mc, var(--accent-text)); }
.ajust__forme { fill: currentColor; stroke: currentColor; pointer-events: visiblePainted; cursor: pointer; }
.ajusts--pale .ajust__fond { opacity: 0.16; }
.ajusts--pale .ajust--off .ajust__fond { opacity: 0.06; }
.ajusts--plein .ajust--off .ajust__fond, .ajusts--contour .ajust--off .ajust__fond { opacity: 0.35; }
.ajust__texte { fill: currentColor; font-family: var(--font); font-weight: var(--fw-nom); pointer-events: none; }
.ajust__signe { font-weight: var(--fw-titre); }
.ajusts--plein .ajust__texte { fill: var(--surface); }
.ajust--off .ajust__texte { opacity: 0.3; }
.ajusts--plein .ajust--off .ajust__texte { opacity: 0.6; }
.ajust__forme:active { opacity: 0.8; }

/* Séquence : un anneau fin des étapes à l'intérieur, qui se vide étape par étape. */
.anneau--interieur { --ep: calc(var(--ring-inner) * var(--ring-k, 1)); position: absolute; inset: calc(var(--ring) * var(--ring-k, 1) + var(--ring-inner-gap)); width: auto; }
.anneau__coupure i { background: var(--fond-carte, var(--bg)); }
/* Avec l'anneau des étapes, le texte rentre d'autant et rapetisse un peu (l'app passe de 16 à 20 % de marge). */
.anneau--etapes > .anneau__centre { inset: calc((var(--ring) + var(--ring-inner)) * var(--ring-k, 1) + var(--ring-inner-gap)); }
.anneau--etapes .minuteur__nom { font-size: clamp(var(--fs-caption), 7.5cqw, var(--fs-h2)); }
.anneau.anneau--etapes .minuteur__temps { font-size: 21cqw; }
.minuteur--teintee .anneau.anneau--etapes .minuteur__temps { font-size: 17cqw; }
.anneau--etapes .minuteur__fin { font-size: clamp(var(--fs-caption), 6.5cqw, var(--fs-h3)); }
.anneau--interieur .anneau__coupure i { top: -1px; height: calc(var(--ep) + 2px); }
/* Étapes en segments, chacune dans sa couleur (anneauEtapes) : celui qui se vide tourne dans sa découpe, une moitié de disque,
   son contenu tourne à l'envers et reste immobile (web/minuteurs.js). Découpé : en tournant, ses coins élargiraient la page. */
.anneau-segments { display: block; overflow: hidden; }
.anneau-segments__part { position: absolute; inset: 0; mask: conic-gradient(from var(--de), #000 0 var(--part), transparent 0); }
.anneau-segments__arc { position: absolute; inset: 0; border: var(--ep-net, round(down, var(--ep), 1px)) solid var(--mc, var(--accent-text)); border-radius: 50%; }
.anneau-segments__pan { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; overflow: hidden; transform-origin: 0 50%; }
.anneau-segments__pan > span { position: absolute; top: 0; bottom: 0; left: -100%; width: 200%; }
.minuteur--teintee { --fond-carte: color-mix(in srgb, var(--mc, var(--accent-text)) 16%, var(--surface)); }
.minuteur--teintee[data-etat='pret'], .minuteur--teintee[data-etat='pause'] { --fond-carte: var(--surface); }

/* Pleine, comme Clepso : de sa couleur quand il tourne ou sonne, blanche sinon ; nom, grand temps, barre, statut. */
.minuteur--pleine[data-etat='pret'], .minuteur--pleine[data-etat='pause'] { background: var(--surface); color: var(--text); }
.minuteur--pleine[data-etat='pret'] .minuteur__point, .minuteur--pleine[data-etat='pause'] .minuteur__point { background: var(--mc, var(--accent-text)); }
.minuteur--pleine[data-etat='pret'] .minuteur__temps, .minuteur--pleine[data-etat='pause'] .minuteur__temps { color: color-mix(in srgb, var(--text) 55%, transparent); }
.minuteur--pleine[data-etat='pret'] .minuteur__fin, .minuteur--pleine[data-etat='pause'] .minuteur__fin { color: var(--text-2); }
.minuteur--pleine[data-etat='pret'] > .temps-barre, .minuteur--pleine[data-etat='pause'] > .temps-barre { display: none; }
.grille-carres__carte > .minuteur--pleine { gap: 0; padding: clamp(var(--s-2), 8.9cqw, 22px); }
.grille-carres__carte > .minuteur--pleine .minuteur__titre { gap: var(--s-2); font-size: clamp(11px, 8.3cqw, 24px); }
.grille-carres__carte > .minuteur--pleine .minuteur__titre .minuteur__nom { flex: 1; font-size: inherit; }
.grille-carres__carte > .minuteur--pleine > .minuteur__temps { display: flex; flex: 1 1 0; align-items: center; min-height: 0; font-size: 25.5cqw; letter-spacing: -0.04em; }
.grille-carres__carte > .minuteur--pleine > .temps-barre { flex: none; height: clamp(3px, 2.8cqw, 8px); margin-block-end: 4.4cqw; }
.minuteur__pied { display: flex; align-items: center; gap: 3.3cqw; min-width: 0; }
.minuteur__pied .minuteur__fin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10px, 6.7cqw, 18px); }
.minuteur__pied--boutons { justify-content: flex-end; margin-block-start: 3.3cqw; }
.minuteur--pleine:not([data-etat='pret']):not([data-etat='pause']) .ajust-rond { color: inherit; }
.minuteur--pleine:not([data-etat='pret']):not([data-etat='pause']) .minuteur__marque { color: inherit; opacity: 0.8; }

/* Cadran dans une carte (teintée ou pleine) ; dans la grille, tailles proportionnelles à la carte. */
.minuteur--carte { padding: clamp(var(--s-2), 9cqw, var(--inset)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--mc, var(--accent-text)) 16%, var(--surface)); }
.minuteur--carte[data-etat='pret'], .minuteur--carte[data-etat='pause'], .minuteur--carte:not([data-etat]) { background: var(--surface); }
.grille-carres__carte > .minuteur--cadran { gap: 0; }
.grille-carres__carte > .minuteur--cadran .cadran { flex: 1 1 0; width: auto; max-width: 100%; min-height: 0; max-height: 100cqw; margin-block-end: 5.6cqw; }
/* Peu de lignes dans une carte haute (chronomètre) : il reste rond, au plus aussi haut que la carte est large. */
.grille-carres__carte > .minuteur--carte.minuteur--cadran .cadran { max-height: calc(100cqw - 2 * clamp(var(--s-2), 9cqw, var(--inset)) - 2 * var(--card-edge)); }
.grille-carres__carte > .minuteur--cadran > .minuteur__nom { font-size: 7.2cqw; color: color-mix(in srgb, var(--text) 85%, transparent); }
.grille-carres__carte > .minuteur--cadran > .minuteur__temps { font-size: 14.4cqw; font-weight: var(--fw-texte); }
.grille-carres__carte > .minuteur--cadran > .minuteur__fin, .grille-carres__carte > .minuteur--cadran > .minuteur__sous { font-size: 6.1cqw; }
/* Cadran avec + et − : le cadran et ses lignes dans un carré un peu rentré (cqmin du carré), les boutons dans ses coins bas. */
.minuteur__cadran { display: flex; flex-direction: column; align-items: center; width: calc(min(100cqw, 100cqh) * 0.97); height: calc(min(100cqw, 100cqh) * 0.97); min-width: 0; }
.minuteur__cadran > * { max-width: 100%; }
.minuteur__cadran > .cadran { flex: 1 1 0; width: auto; min-height: 0; margin-block-end: 5.4cqmin; }
.minuteur__cadran > .minuteur__nom { font-size: 7cqmin; color: color-mix(in srgb, var(--text) 85%, transparent); }
.minuteur__cadran > .minuteur__temps { font-size: 14cqmin; font-weight: var(--fw-texte); }
.minuteur__cadran > .minuteur__fin { font-size: 5.9cqmin; }
.minuteur__cadran > .minuteur__temps--heures { font-size: 9.7cqmin; }
.minuteur__cadran > .minuteur__temps--long { font-size: 7.8cqmin; }
/* Chronomètre en cadran : l'aiguille des minutes, courte, à l'encre du texte ; la trotteuse, celle du minuteur. En pause, les chiffres restent pleins. */
.cadran__aiguille--courte i { top: calc(50% - 27.5%); left: calc(50% - 2.5px); width: 5px; border-radius: 2.5px; background: var(--text); }
.minuteur--cadran[data-chrono-pause] .minuteur__temps { color: var(--text); }
/* Cadran d'horloge : heures, minutes et trotteuse, qui dépassent toutes un peu le centre. */
.cadran__aiguille--heures i, .cadran__aiguille--minutes i { background: var(--text); }
.cadran__aiguille--heures i { top: calc(50% - 25%); width: 4px; }
.cadran__aiguille--minutes i { top: calc(50% - 37%); left: calc(50% - 1.5px); width: 3px; }
.cadran__aiguille--secondes i { top: calc(50% - 42%); left: calc(50% - 0.75px); width: 1.5px; }

/* Dès une heure, le temps s'écrit H:MM:SS : plus petit, pour tenir à la même place. */
.anneau .minuteur__temps.minuteur__temps--heures { font-size: 17cqw; }
.minuteur--teintee .anneau .minuteur__temps.minuteur__temps--heures { font-size: 14cqw; }
.minuteur__carre--dedans .anneau .minuteur__temps.minuteur__temps--heures { font-size: 13.6cqw; }
.grille-carres__carte > .minuteur--pleine > .minuteur__temps--heures { font-size: 17.5cqw; }
.grille-carres__carte > .minuteur--cadran > .minuteur__temps--heures { font-size: 10cqw; }
/* Plus long encore (0:04:00.00, 1:04:00.0) : plus petit, pour tenir. */
.anneau .minuteur__temps.minuteur__temps--long { font-size: 13cqw; }
.minuteur--teintee .anneau .minuteur__temps.minuteur__temps--long { font-size: 11cqw; }
.minuteur__carre--dedans .anneau .minuteur__temps.minuteur__temps--long { font-size: 10.5cqw; }
.grille-carres__carte > .minuteur--pleine > .minuteur__temps--long { font-size: 13cqw; }
.grille-carres__carte > .minuteur--cadran > .minuteur__temps--long { font-size: 8cqw; }
/* Petites cartes : sous 120 px (104 pour une teintée), le temps seul. */
@container (max-width: 119px) {
  .anneau__centre .minuteur__nom, .anneau__centre .minuteur__fin, .anneau__centre .minuteur__sous, .anneau__centre .chrono__bas, .anneau__centre .chrono__haut { display: none; }
  .grille-carres__carte > .minuteur--pleine .minuteur__titre, .grille-carres__carte > .minuteur--pleine .minuteur__pied, .grille-carres__carte > .minuteur--pleine > .temps-barre { display: none; }
  .grille-carres__carte > .minuteur--cadran > :not(.cadran, .minuteur__temps, .minuteur__carre), .minuteur__cadran > :not(.cadran, .minuteur__temps) { display: none; }
}
@container (max-width: 103px) {
  .minuteur--teintee > .minuteur__titre, .minuteur--teintee > .minuteur__fin, .minuteur--teintee > .minuteur__sous, .minuteur--teintee .minuteur__coin { display: none; }
  .minuteur__zone--coins { padding-block-end: 0; }
}
/* Marque d'un éphémère trop petit pour l'écrire : dans son coin. */
.minuteur__coin-marque { position: absolute; top: 6px; right: 6px; z-index: 1; display: none; width: 14px; height: 14px; color: var(--text); }
@container (max-width: 119px) { .minuteur__coin-marque { display: block; } }
.grille-carres__carte > .minuteur--cadran ~ .minuteur__coin-marque { display: block; }

/* Chronomètre : nom au-dessus, chiffres au milieu, le bouton de remise à zéro en dessous à l'arrêt. */
.chrono__haut, .chrono__bas { display: flex; align-items: flex-end; justify-content: center; height: 20cqw; max-width: 100%; min-width: 0; }
.chrono__bas { align-items: center; }
.chrono__haut .minuteur__nom { max-width: 100%; }
.minuteur[data-chrono] .anneau .minuteur__temps { margin: 0; font-size: 22cqw; }
.minuteur--teintee[data-chrono-pause] .minuteur__temps { color: var(--text); }
.minuteur:not(.minuteur--teintee)[data-chrono-pause] .anneau .minuteur__temps { color: var(--text-2); }
.bouton-remise { display: inline-grid; place-items: center; flex: none; width: clamp(24px, 15.6cqw, 40px); height: clamp(24px, 15.6cqw, 40px); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--mc, var(--accent-text)) 24%, var(--surface)); color: color-mix(in srgb, var(--mc, var(--accent-text)) 65%, var(--text)); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.bouton-remise .icon { width: 58%; height: 58%; }
.bouton-remise:active { transform: scale(var(--press-scale)); }
.minuteur--teintee .bouton-remise { width: clamp(24px, 20.6cqw, 40px); height: clamp(24px, 20.6cqw, 40px); }

/* Bouton d'action dans la grille : plein, contour ou teinté ; icône et texte à la taille de la case, à côté quand elle est large. */
.grille-carres__carte > .tuile-action { aspect-ratio: auto; height: auto; margin: 6px; padding: calc((100cqmin - 12px) * 0.16); gap: calc((100cqmin - 12px) * 0.06); border-radius: 28px; font-size: clamp(5px, calc((100cqmin - 12px) * 0.115), 28px); font-weight: var(--fw-nom); line-height: 1.15; text-align: center; }
.grille-carres__carte > .tuile-action > .icon { flex: none; width: calc((100cqmin - 12px) * 0.26); height: calc((100cqmin - 12px) * 0.26); }
.tuile-action__textes { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; overflow-wrap: normal; }
.tuile-action__portee { margin-top: 0.2em; font-size: 0.8em; font-weight: var(--fw-texte); opacity: 0.75; }
.tuile-action--plein { background: var(--mc, var(--accent)); color: var(--surface); }
.tuile-action:not([class*='couleur-']).tuile-action--plein { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent-text); }
.tuile-action--teinte { background: color-mix(in srgb, var(--mc, var(--accent-text)) 16%, var(--surface)); color: color-mix(in srgb, var(--mc, var(--accent-text)) 65%, var(--text)); }
.tuile-action--contour { background: none; box-shadow: inset 0 0 0 2px currentColor; color: var(--mc, var(--accent-text)); }
@container (min-aspect-ratio: 7 / 5) {
  .grille-carres__carte > .tuile-action { flex-direction: row; gap: calc((100cqmin - 12px) * 0.12); font-size: clamp(5px, calc((100cqmin - 12px) * 0.17), 28px); text-align: start; }
  .grille-carres__carte > .tuile-action > .icon { width: calc((100cqmin - 12px) * 0.34); height: calc((100cqmin - 12px) * 0.34); }
  .grille-carres__carte > .tuile-action .tuile-action__textes { align-items: flex-start; }
}

/* « En cours » : les minuteurs actifs en barres, le premier à finir en haut ; défile s'ils ne tiennent pas. */
.temps-liste--carte { gap: 0; overflow-y: auto; padding: clamp(var(--s-2), 9cqw, 18px) clamp(var(--s-2), 9cqw, 18px); border-radius: var(--r-lg); scrollbar-width: thin; }
.temps-liste--carte .temps-liste__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nom temps' 'barre barre'; align-content: center; align-items: center; column-gap: var(--s-2); row-gap: var(--s-1); flex: none; min-height: var(--tap); padding-inline-end: var(--s-2); border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.temps-liste__nom { display: flex; grid-area: nom; align-items: center; gap: var(--s-1); min-width: 0; overflow: hidden; font-size: var(--fs-small); }
.temps-liste__nom > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.temps-liste__temps { grid-area: temps; font-size: var(--fs-body); font-weight: var(--graisse-temps, var(--fw-phrase)); font-variant-numeric: tabular-nums; }
.temps-liste--carte .temps-barre { grid-area: barre; height: 6px; background: color-mix(in srgb, var(--mc, var(--accent-text)) 22%, var(--surface)); color: var(--mc, var(--accent-text)); }
.temps-liste__vide { display: grid; flex: 1; place-items: center; color: var(--text-2); font-size: var(--fs-small); text-align: center; }
/* Large : une seule colonne de noms pour tout le widget, à la largeur du plus long (40 % au plus) ; les barres, alignées, prennent le reste. */
@container (min-width: 220px) {
  .temps-liste--carte { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr) auto; align-content: start; column-gap: 10px; }
  .temps-liste--carte .temps-liste__ligne { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: 'nom barre temps'; }
  .temps-liste--carte .temps-liste__vide { grid-column: 1 / -1; }
}

/* « Lancement rapide » : une durée par pilule teintée, sur une ligne, sur deux quand la carte est étroite. */
.lancement--carte { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: 10px; border-radius: var(--r-lg); background: var(--surface); }
.lancement__duree { display: grid; place-items: center; min-width: 0; overflow: hidden; padding-inline: min(10px, 2cqw); border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--mc, var(--accent-text)) 24%, var(--surface)); color: color-mix(in srgb, var(--mc, var(--accent-text)) 40%, var(--text)); font: var(--fw-texte) min(var(--fs-small), 4cqw) / 1 var(--font); white-space: nowrap; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.lancement__duree:active { transform: scale(var(--press-scale)); }
@container (max-width: 219px) {
  .lancement--carte[data-deux-lignes] { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  /* Sur deux rangées, chacune prend toute la largeur : une dernière pilule seule s'étire (comme l'app). */
  .lancement--carte[data-deux-lignes] > .lancement__duree:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Pastille d'une autre page : un minuteur qui tourne ou sonne ailleurs, sa page, son temps ; un appui y mène. */
.pilule-page { display: inline-flex; flex: none; margin-inline-start: auto; text-transform: none; letter-spacing: normal; align-items: center; gap: var(--s-2); max-width: 100%; min-height: var(--tap-small); padding: var(--s-1) var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: var(--fw-nom) var(--fs-small) / 1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.pilule-page:active { transform: scale(var(--press-scale)); }
.pilule-page[data-etat='fini'] { background: color-mix(in srgb, var(--mc, var(--accent-text)) 25%, var(--surface)); }
.pilule-page__nom { min-width: 0; overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.pilule-page__temps { font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
.pilule-page[data-etat='fini'] .pilule-page__temps { color: var(--mc, var(--accent-text)); text-transform: uppercase; }
.pilule-page__plus { color: var(--text-2); font-size: var(--fs-caption); }
.pilule-page .minuteur__point { width: var(--s-2); height: var(--s-2); }

/* Page vide : un anneau vide, le titre, l'aide ; les ondes partent du vrai bouton +. */
.anneau-vide { display: block; width: var(--empty-ring); aspect-ratio: 1; border: var(--ring) solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 50%; }
.empty--page { justify-content: center; gap: var(--s-2); min-height: 100%; padding: var(--s-5) calc(var(--s-6) + var(--s-2)) 120px; }
.empty--page .anneau-vide { margin-block-end: calc(var(--s-5) + var(--s-1)); }
.empty--page h2 { margin: 0; color: var(--text); font-size: var(--fs-h2); font-weight: var(--fw-titre); letter-spacing: -0.02em; }
.empty--page p { margin: 0; line-height: 1.5; white-space: pre-line; }

/* Bouton flottant teinté, comme le + de Clepso : discret, opaque, contour fin. */
.fab--teinte { border: var(--card-edge) solid var(--line); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-text); box-shadow: none; }
/* Icône du bouton flottant teinté : 30 px en normal, suit la densité. */
.fab--teinte .icon { width: calc(var(--icon) + 8px); height: calc(var(--icon) + 8px); }

/* Plein écran (repris de focus_screen.dart) : un minuteur lisible de loin. Fond noir ou blanc (data-fond), réglage à part
   du thème ; sans data-fond, le fond de la page. --encre-ecran : l'encre de l'écran (ou de sa copie sur la couleur). */
.plein { --encre-ecran: var(--text); container: plein / size; position: relative; display: block; height: 100%; overflow: hidden; background: var(--bg); color: var(--encre-ecran); }
.plein[data-fond] { --bg: var(--plein-fond); color-scheme: dark; }
.plein[data-fond='blanc'] { color-scheme: light; }
/* Tout l'écran sur une grille : en paysage, ajouts à gauche, boutons à droite, titre en haut (voir plus bas). */
.plein__corps { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'haut' 'titre' 'etape' 'zone' 'suite' 'ajouts' 'boutons'; padding-bottom: env(safe-area-inset-bottom, 0px); }
/* La croix dans un rond teinté, la même sur tous les pleins écrans. */
.plein__fermer { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--encre-ecran) 12%, transparent); color: var(--encre-ecran); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.plein__fermer:active, .plein__mode:active { transform: scale(0.92); }
.plein__corps > .plein__fermer { grid-area: haut; justify-self: start; margin: var(--s-3) 0 0 var(--s-3); }
.plein__mode-zone { grid-area: haut; justify-self: end; align-self: center; margin: var(--s-3) var(--s-3) 0 0; }
/* Menu des modes : pastille teintée, icône et nom du mode, qui se replie en rond après quelques secondes. */
.plein__mode { position: relative; display: inline-flex; align-items: center; height: var(--tap); padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--encre-ecran); font: var(--fw-nom) var(--fs-small) / 1 var(--font); white-space: nowrap; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.plein__mode-fond { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--encre-ecran) 12%, transparent); transition: opacity var(--t-toggle) var(--ease-out); }
.plein__mode-icone { position: relative; display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); transition: transform var(--t-toggle) var(--ease-out); }
.plein__mode-icone > i { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--encre-ecran) 12%, transparent); opacity: 0; transition: opacity var(--t-toggle) var(--ease-out); }
.plein__mode-icone .icon { position: relative; width: var(--icon-md); height: var(--icon-md); }
.plein__mode-nom { position: relative; display: inline-flex; align-items: center; gap: 2px; padding-inline-end: var(--s-2); transition: opacity var(--t-toggle) var(--ease-out), transform var(--t-toggle) var(--ease-out); }
.plein__mode-nom .icon { width: var(--icon-md); height: var(--icon-md); }
.plein__mode[data-replie] .plein__mode-fond { opacity: 0; }
.plein__mode[data-replie] .plein__mode-icone { transform: translateX(var(--replie, 0px)); }
.plein__mode[data-replie] .plein__mode-icone > i { opacity: 1; }
.plein__mode[data-replie] .plein__mode-nom { opacity: 0; transform: translateX(var(--s-3)); pointer-events: none; }
/* Une fois replié, le nom quitte la place : la pastille n'est plus qu'un rond, ce qui est à côté reprend la place. */
.plein__mode[data-replie-fin] .plein__mode-nom { display: none; }
.plein__mode[data-replie-fin] .plein__mode-icone { transform: none; transition: none; }
.plein__titre { grid-area: titre; display: -webkit-box; margin: 0; padding-inline: var(--s-4); overflow: hidden; font-size: var(--fs-h1); font-weight: var(--fw-texte); line-height: 1.25; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.plein__titre--paysage { display: none; }
/* L'étape d'une séquence, en grand et dans sa couleur. */
.plein__etape { grid-area: etape; margin: 0; padding: var(--s-1) var(--s-4) 0; overflow: hidden; color: var(--mc, var(--accent-text)); font-size: var(--fs-h1); font-weight: var(--fw-titre); line-height: 1.25; letter-spacing: 0.05em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.plein__zone { grid-area: zone; container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; }
.plein__anneau { width: calc(min(100cqw, 100cqh) - 2 * var(--s-5)); }
.plein__anneau .anneau { --ep: var(--plein-anneau); }
.plein__centre { display: flex; flex-direction: column; align-items: center; width: 62cqw; }
/* Les chiffres prennent la place qu'ils ont, sans dépasser leur taille de départ (le FittedBox de l'app). */
.plein__temps { font-size: min(var(--plein-chiffres), 23cqw); font-weight: var(--fw-titre); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plein__temps--heures { font-size: min(var(--plein-chiffres), 17cqw); }
.plein__temps--long { font-size: min(var(--plein-chiffres), 13cqw); }
.plein--arrete .plein__temps { color: color-mix(in srgb, var(--encre-ecran) 60%, transparent); }
.plein__statut { color: var(--mc, var(--accent-text)); font-size: var(--fs-small); font-weight: var(--fw-nom); letter-spacing: 0.1em; text-align: center; }
/* Remplissage et cercle : grands chiffres seuls, le statut juste dessous. */
.plein__zone--texte { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: var(--s-4); }
.plein__temps--grand { font-size: min(var(--plein-chiffres-grands), calc((100cqw - 2 * var(--s-4)) / 2.7), 78cqh); }
.plein__temps--grand.plein__temps--heures { font-size: min(var(--plein-chiffres-grands), calc((100cqw - 2 * var(--s-4)) / 3.6), 78cqh); }
.plein__temps--grand.plein__temps--long { font-size: min(var(--plein-chiffres-grands), calc((100cqw - 2 * var(--s-4)) / 4.8), 78cqh); }
.plein__zone--texte .plein__statut { color: inherit; }
.plein__suite { grid-area: suite; padding: 0 var(--s-5) var(--s-4); }
/* Plein écran de repos (ouvrirReposPlein) : posé sur toute la fenêtre, la couleur qui reste se vide vers le bas,
   le temps énorme, la carte « Ensuite », « Je suis prêt » au pouce. Arrive et part en fondu et à 0,96. */
.plein--fixe { position: fixed; inset: 0; z-index: 35; height: auto; }
.plein--repos .plein__boutons .btn { flex: 1; max-width: var(--measure); background: var(--encre-ecran); color: var(--mc, var(--accent-text)); }
.plein--repos .a-suivre { background: color-mix(in srgb, var(--encre-ecran) 12%, transparent); color: var(--encre-ecran); }
.a-suivre .metas { color: color-mix(in srgb, currentColor 75%, transparent); }
.a-suivre .metas .icon { width: 1em; height: 1em; }
/* Sur une couleur qui monte : un bloc du fond de l'écran, lisible où qu'en soit la couleur. */
.plein__suite-bloc { --encre-ecran: var(--text); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); background: var(--bg); color: var(--text); }
.plein__ajouts { grid-area: ajouts; display: flex; justify-content: safe center; gap: var(--s-2); min-width: 0; padding: 0 var(--s-4) var(--s-5); overflow: auto; scrollbar-width: none; }
.plein__pilule { flex: none; min-width: var(--plein-rond); height: var(--pill); padding: 0 var(--s-5); border: var(--card-edge) solid color-mix(in srgb, var(--encre-ecran) 30%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--encre-ecran) 20%, transparent); color: var(--encre-ecran); font: var(--fw-nom) var(--fs-body) / 1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--t-slow) var(--ease-out); }
.plein__pilule--teinte { min-width: calc(var(--plein-rond) + var(--s-5)); padding: 0 var(--s-3); border: 0; background: color-mix(in srgb, var(--encre-ecran) 18%, transparent); }
.plein__boutons { grid-area: boutons; display: flex; align-items: center; justify-content: center; gap: var(--s-5); padding: 0 var(--s-5) var(--s-6); }
/* Boutons ronds, lisibles de loin : 64, et le principal 88 dans la couleur du minuteur. */
.plein__rond { display: grid; place-items: center; flex: none; width: var(--plein-rond); height: var(--plein-rond); padding: 0; border: var(--card-edge) solid color-mix(in srgb, var(--encre-ecran) 30%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--encre-ecran) 20%, transparent); color: var(--encre-ecran); cursor: pointer; transition: transform var(--t-slow) var(--ease-out); }
.plein__rond .icon { width: 44%; height: 44%; }
.plein__rond--grand { width: var(--plein-rond-grand); height: var(--plein-rond-grand); border: 0; background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); }
.plein__rond--grand .icon { width: 50%; height: 50%; }
.plein__rond:disabled, .plein__pilule:disabled { border-color: color-mix(in srgb, var(--encre-ecran) 10%, transparent); background: color-mix(in srgb, var(--encre-ecran) 6%, transparent); color: color-mix(in srgb, var(--encre-ecran) 24%, transparent); cursor: default; }
.plein__rond:active:not(:disabled), .plein__pilule:active:not(:disabled) { transform: scale(var(--press-scale)); transition-duration: var(--t-press); }
/* Sur la couleur qui monte, une ombre lisible quelle que soit la couleur ; le principal à l'encre de l'écran. */
:is(.plein--remplissage, .plein--balayage) :is(.plein__rond:not(.plein__rond--grand), .plein__pilule) { background: color-mix(in srgb, var(--scrim) 50%, transparent); }
:is(.plein--remplissage, .plein--balayage) .plein__rond--grand { background: var(--encre-ecran); color: var(--bg); }
:is(.plein--remplissage, .plein--balayage) .plein__copie .plein__rond--grand { color: var(--text); }
:is(.plein--remplissage, .plein--balayage) .plein__etape { color: inherit; }
/* Remplissage : la couleur monte du bas avec une copie de l'écran à l'encre de la couleur, découpée à sa limite. */
.plein__niveau { position: absolute; inset: 0; overflow: hidden; background: var(--mc, var(--accent-text)); pointer-events: none; }
.plein__niveau > div { position: absolute; inset: 0; }
.plein__copie { --encre-ecran: var(--encre, var(--bg)); position: absolute; inset: 0; color: var(--encre-ecran); }
/* Cercle : la couleur tourne depuis midi comme l'anneau, sur tout l'écran (deux volets découpés chacun par sa moitié). */
.balayage { --cote: 200cqmax; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.balayage__moitie { position: absolute; top: calc(50% - var(--cote) / 2); width: calc(var(--cote) / 2); height: var(--cote); overflow: hidden; }
.balayage__moitie--droite { left: 50%; }
.balayage__moitie--gauche { left: calc(50% - var(--cote) / 2); }
.balayage__pan { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; background: var(--mc, var(--accent-text)); }
.balayage__pan--droite { right: 100%; transform-origin: 100% 50%; }
.balayage__pan--gauche { left: 100%; transform-origin: 0 50%; }
.balayage__pan > div { position: absolute; top: calc(var(--cote) / 2 - 50cqh); width: 100cqw; height: 100cqh; }
.balayage__pan--droite > div { left: calc(var(--cote) / 2 - 50cqw); }
.balayage__pan--gauche > div { left: -50cqw; }
/* Il sonne : toute la couleur. */
.plein[data-etat='fini'] :is(.plein__niveau:not(.plein__niveau--vide), .plein__niveau:not(.plein__niveau--vide) > div) { transform: none !important; }
.plein[data-etat='fini'] .balayage__pan { transform: rotate(180deg) !important; }
.plein[data-etat='fini'] .balayage__pan > div { transform: rotate(-180deg) !important; }
/* Cadran : l'étiquette du nom dans la couleur, le temps en couleur, l'anneau épais numéroté, l'emoji au centre. */
.plein__zone--cadran { display: flex; flex-direction: column; align-items: center; padding: var(--s-1) var(--s-5) var(--s-4); }
.plein__etiquette { flex: none; max-width: 100%; padding: var(--s-1) var(--s-3); overflow: hidden; border-radius: var(--r-md); background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); font-size: var(--fs-body); font-weight: var(--fw-titre); text-overflow: ellipsis; white-space: nowrap; }
.plein__cadran-temps { flex: 2 1 0; container-type: size; display: grid; place-items: center; width: 100%; min-height: 0; }
.plein__cadran-temps .plein__temps { color: var(--mc, var(--accent-text)); font-size: min(var(--plein-chiffres), 82cqh, calc(100cqw / 2.7)); }
.plein__cadran-temps .plein__temps--heures { font-size: min(var(--plein-chiffres), 82cqh, calc(100cqw / 3.6)); }
.plein__cadran-temps .plein__temps--long { font-size: min(var(--plein-chiffres), 82cqh, calc(100cqw / 4.8)); }
.plein--arrete .plein__cadran-temps .plein__temps { color: color-mix(in srgb, var(--mc, var(--accent-text)) 60%, transparent); }
.plein__cadran-statut { flex: none; color: color-mix(in srgb, var(--encre-ecran) 60%, transparent); font-size: var(--fs-small); letter-spacing: 0.03em; }
.plein__cadran-zone { flex: 5 1 0; container-type: size; display: grid; place-items: center; width: 100%; min-height: 0; margin-top: var(--s-4); }
.cadran-plein { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; container-type: inline-size; }
.cadran-plein__marques { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cadran-plein__marques text { fill: color-mix(in srgb, var(--encre-ecran) 45%, transparent); font-family: var(--font); font-weight: var(--fw-titre); }
.cadran-plein__marques circle { fill: color-mix(in srgb, var(--encre-ecran) 30%, transparent); }
.cadran-plein__marques [data-allume] { fill: var(--mc, var(--accent-text)); }
.cadran-plein__face { position: absolute; inset: 24%; border-radius: 50%; background: light-dark(color-mix(in srgb, var(--encre-ecran) 4%, transparent), color-mix(in srgb, var(--encre-ecran) 7%, transparent)); }
.cadran-plein .anneau { --ep: 10cqw; position: absolute; inset: 12%; width: auto; }
.cadran-plein .anneau__piste { border-color: light-dark(color-mix(in srgb, var(--encre-ecran) 10%, transparent), color-mix(in srgb, var(--encre-ecran) 16%, transparent)); }
.cadran-plein :is(.anneau__tete, .anneau__depart) { display: none; }
.cadran-plein__centre { position: absolute; inset: 33%; display: grid; place-items: center; color: var(--mc, var(--accent-text)); font-size: 26cqw; line-height: 1; }
.cadran-plein__centre .icon { width: 100%; height: 100%; }
/* Paysage : ajouts rapides en colonne à gauche, boutons à droite, titre en haut entre la croix et le menu. */
@container plein (orientation: landscape) {
  .plein__corps { grid-template-columns: var(--plein-cote) minmax(0, 1fr) var(--plein-cote); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'fermer titre mode' 'ajouts etape boutons' 'ajouts zone boutons' 'ajouts suite boutons'; }
  .plein__corps > .plein__fermer { grid-area: fermer; justify-self: center; margin: var(--s-3) 0 0; }
  .plein__mode-zone { grid-area: mode; margin: var(--s-3) var(--s-3) 0 0; }
  .plein__titre { align-self: center; padding: var(--s-3) 0 0; -webkit-line-clamp: 1; }
  .plein__titre--paysage { display: -webkit-box; }
  .plein__etiquette { display: none; }
  .plein__etape { padding-top: 0; }
  .plein__anneau { width: calc(min(100cqw, 100cqh) - 2 * var(--s-1)); }
  .plein__suite { padding: var(--s-1) var(--s-5); }
  .plein__suite .a-suivre { display: none; }
  .plein__corps > .plein__ajouts { flex-direction: column; justify-content: safe center; align-items: center; padding: 0; }
  .plein__corps > .plein__boutons { flex-direction: column; gap: var(--s-4); padding: 0 0 var(--s-2); }
  /* Repos : « Je suis prêt » est une phrase, pas un rond ; il prend une rangée sous le temps, au milieu. */
  .plein--repos .plein__corps { grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: 'fermer titre mode' 'ajouts etape .' 'ajouts zone .' 'ajouts suite .' 'ajouts boutons .'; }
  .plein--repos .plein__corps > .plein__boutons { flex-direction: row; padding: 0 0 var(--s-3); }
}

/* Tableau d'une séquence (sequence_board.dart) : temps total en haut, l'étape en grand dans sa couleur, la suivante, les étapes. */
.plein__tableau { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'tete' 'bloc' 'suivre' 'bande' 'bas'; gap: var(--s-4); padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
.plein__tableau > .a-suivre { grid-area: suivre; margin-top: calc(var(--s-3) - var(--s-4)); }
.plein__tableau > .bande-etapes { grid-area: bande; }
.tableau-tete { grid-area: tete; display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.tableau-tete > .plein__fermer { margin-inline-end: var(--s-2); }
.tableau-tete__total { container-type: inline-size; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: var(--s-2) var(--s-4); border-radius: var(--r-lg); background: color-mix(in srgb, var(--encre-ecran) 6%, transparent); }
.tableau-tete__total--prep { background: color-mix(in srgb, var(--mc, var(--accent-text)) 90%, transparent); color: var(--encre, var(--bg)); }
.tableau-tete__libelle { overflow: hidden; color: color-mix(in srgb, currentColor 75%, transparent); font-size: var(--fs-caption); font-weight: var(--fw-titre); letter-spacing: 0.1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tableau-tete__temps { font-size: min(var(--fs-h1), calc(100cqw / 3.7)); font-weight: var(--fw-titre); line-height: 1; font-variant-numeric: tabular-nums; }
.tableau-tete > .icon-btn { color: color-mix(in srgb, var(--encre-ecran) 70%, transparent); }
.plein__bloc-zone { grid-area: bloc; position: relative; min-height: 0; }
.plein__bloc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-lg); background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); text-align: center; }
/* Ce qui s'est vidé : une trace de la couleur, à l'encre de l'écran. */
.plein__bloc--trace { background: color-mix(in srgb, var(--mc, var(--accent-text)) 20%, var(--bg)); color: var(--encre-ecran); }
.plein__bloc-nom { max-width: 100%; overflow: hidden; font-size: var(--fs-h1); font-weight: var(--fw-titre); letter-spacing: 0.05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.plein__bloc-temps { flex: 1; container-type: size; display: grid; place-items: center; width: 100%; min-height: 0; }
.plein__bloc-temps > span { font-size: min(var(--plein-tableau), 88cqh, calc(100cqw / 2.7)); font-weight: var(--fw-titre); line-height: 1; font-variant-numeric: tabular-nums; }
.plein__bloc-temps > .plein__temps--heures { font-size: min(var(--plein-tableau), 88cqh, calc(100cqw / 3.6)); }
.plein__bloc-temps > .plein__temps--long { font-size: min(var(--plein-tableau), 88cqh, calc(100cqw / 4.8)); }
.plein__bloc-etape { color: color-mix(in srgb, currentColor 80%, transparent); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.plein__vider { position: absolute; right: var(--s-1); bottom: var(--s-1); display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; cursor: pointer; }
.plein__vider[aria-pressed='true'] { background: color-mix(in srgb, currentColor 20%, transparent); }
.plein__vider[aria-pressed='true'] .icon { fill: currentColor; }
.plein__niveau--bloc { background: none; }
.plein__tableau-bas { grid-area: bas; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); min-width: 0; }
.plein__tableau-bas > .plein__ajouts { max-width: 100%; padding: 0; }
.plein__tableau-bas > .plein__boutons { padding: 0; }
@container plein (orientation: landscape) {
  .plein__tableau { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'tete tete' 'bloc suivre' 'bloc bas' 'bande bas'; gap: var(--s-3) var(--s-4); }
  .plein__tableau > .a-suivre { margin-top: 0; }
  .plein__tableau-bas { align-self: center; }
}
/* Téléphone couché (500 px de haut au plus) : le temps sur toute la largeur, la croix et le temps total dans les coins du
   haut, le reste en bande en bas (repris de SportOne). En deux colonnes, le temps y perdait un quart de sa taille. */
@container plein (orientation: landscape) and (max-height: 500px) {
  .plein__tableau { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: minmax(0, 1fr) clamp(var(--tap), 20cqh, calc(var(--tap) * 1.7)); grid-template-areas: 'bloc bloc bloc bloc' 'bande suivre ajouts boutons'; gap: var(--s-2); padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) max(var(--s-2), env(safe-area-inset-right, 0px)) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)) max(var(--s-2), env(safe-area-inset-left, 0px)); }
  .plein__tableau > .tableau-tete { --encre-ecran: var(--encre, var(--bg)); position: absolute; z-index: 2; top: calc(var(--s-4) + env(safe-area-inset-top, 0px)); left: max(var(--s-4), calc(env(safe-area-inset-left, 0px) + var(--s-2))); right: max(var(--s-4), calc(env(safe-area-inset-right, 0px) + var(--s-2))); justify-content: flex-start; color: var(--encre-ecran); pointer-events: none; }
  .plein__tableau > .tableau-tete > * { pointer-events: auto; }
  .plein__tableau .tableau-tete__total { order: 1; flex: none; align-items: flex-end; width: 8rem; margin-inline-start: auto; padding: 0; background: none; }
  .plein__tableau .plein__bloc { padding: var(--s-3) calc(var(--tap) + var(--s-7)) var(--s-2); }
  .plein__tableau > .a-suivre { margin-top: 0; padding: var(--s-1) var(--s-4); }
  .plein__tableau :is(.a-suivre__nom, .a-suivre__duree) { font-size: var(--fs-h3); }
  .plein__tableau > .bande-etapes { justify-content: center; width: 9rem; }
  .plein__tableau-bas { display: contents; }
  .plein__tableau-bas > .plein__ajouts { grid-area: ajouts; align-items: stretch; padding: 0; }
  .plein__tableau-bas .plein__pilule { height: 100%; }
  .plein__tableau-bas > .plein__boutons { grid-area: boutons; padding: 0; }
  .plein__tableau-bas .plein__rond--grand { width: auto; height: 100%; aspect-ratio: 1; }
}
/* L'étape suivante, pleine de sa couleur : « À suivre », son nom, sa durée. */
.a-suivre { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-3) var(--s-5); border-radius: var(--r-lg); background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); }
.a-suivre__texte { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.a-suivre__libelle { color: color-mix(in srgb, currentColor 65%, transparent); font-size: var(--fs-caption); font-weight: var(--fw-titre); letter-spacing: 0.1em; text-transform: uppercase; }
.a-suivre__nom { overflow: hidden; font-size: var(--fs-h2); font-weight: var(--fw-titre); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.a-suivre__duree { flex: none; font-size: var(--fs-h2); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
/* Où en est une séquence : un segment par étape dans sa couleur, faites vides, à venir à 55 %, celle en cours qui se vide. */
.bande-etapes { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.bande-etapes__barre { display: flex; gap: 3px; height: var(--s-2); }
.bande-etapes__seg { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--s-1); background: color-mix(in srgb, var(--encre-ecran) 10%, transparent); color: var(--mc, var(--accent-text)); }
.bande-etapes__seg.temps-barre { height: auto; border-radius: var(--s-1); background: color-mix(in srgb, var(--encre-ecran) 10%, transparent); }
.bande-etapes__seg i { display: block; height: 100%; background: currentColor; transform-origin: left; }
.bande-etapes__seg--avenir { color: color-mix(in srgb, var(--mc, var(--accent-text)) 55%, transparent); }
.bande-etapes__seg--fait i { transform: scaleX(0); }
.bande-etapes__texte { color: color-mix(in srgb, var(--encre-ecran) 60%, transparent); font-size: var(--fs-caption); font-weight: var(--fw-nom); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }

/* Écran de sonnerie (alarm_screen.dart) : toujours noir, le nom, l'anneau plein, le dépassement qui grandit, Arrêter. */
.sonnerie-plein { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); text-align: center; }
.sonnerie-plein > .plein__titre { flex: none; padding: 0; font-weight: var(--fw-nom); }
.sonnerie-plein__autres { flex: none; margin: var(--s-1) 0 0; color: color-mix(in srgb, var(--encre-ecran) 54%, transparent); }
.sonnerie-plein > .plein__zone { flex: 1; }
.sonnerie-plein .plein__anneau { width: min(100cqw, 100cqh); }
.sonnerie-plein__centre { display: flex; flex-direction: column; align-items: center; }
.sonnerie-plein__centre > .icon { width: calc(var(--icon) * 2); height: calc(var(--icon) * 2); color: var(--mc, var(--accent-text)); }
.sonnerie-plein__depasse { margin-top: var(--s-2); font-size: min(calc(var(--fs-num) * 1.4), 16cqw); font-weight: var(--fw-phrase); line-height: 1.15; font-variant-numeric: tabular-nums; }
.sonnerie-plein .plein__statut { letter-spacing: 0.12em; }
.sonnerie-plein__actions { display: flex; flex: none; flex-direction: column; gap: var(--s-3); }
.sonnerie-plein__arreter.btn { height: var(--plein-rond); border: 0; background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); font-size: var(--fs-h2); font-weight: var(--fw-titre); }
.sonnerie-plein__plus.btn { height: calc(var(--plein-rond) - var(--s-2)); border: var(--card-edge) solid color-mix(in srgb, var(--encre-ecran) 24%, transparent); background: none; color: var(--encre-ecran); font-size: var(--fs-h3); }
@container plein (orientation: landscape) {
  .sonnerie-plein { padding-top: var(--s-4); }
  .sonnerie-plein__actions { flex-direction: row; }
  .sonnerie-plein__actions > .btn { flex: 1; }
}

/* Chronomètre et horloge en grand (stopwatch_screen.dart, clock_screen.dart) : anneau d'un tour, temps au centre. */
.plein__corps--objet { grid-template-rows: auto auto minmax(0, 3fr) auto minmax(0, 2fr); grid-template-areas: 'haut' 'titre' 'zone' 'boutons' 'tours'; }
.plein__corps--horloge { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'haut' 'titre' 'zone'; }
.plein__corps--objet > .plein__boutons { padding-bottom: var(--s-5); }
.plein__centre--chrono { width: 72cqw; }
.plein__temps--chrono { font-size: min(var(--plein-chiffres), 25cqw); }
.plein__temps--chrono[data-precision='d'] { font-size: min(var(--plein-chiffres), 19cqw); }
.plein__temps--chrono[data-precision='c'] { font-size: min(var(--plein-chiffres), 16cqw); }
.plein__temps--horloge { font-size: min(var(--plein-chiffres), 21cqw); }
.plein__centre .plein__statut { margin-top: var(--s-1); }
.plein__tours { grid-area: tours; min-height: 0; margin: 0; padding: 0 var(--s-6) var(--s-4); overflow-y: auto; list-style: none; }
.plein__tour { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); color: color-mix(in srgb, var(--encre-ecran) 60%, transparent); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.plein__tour:first-child { color: var(--encre-ecran); }
@container plein (orientation: landscape) {
  .plein__corps--objet, .plein__corps--horloge { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'haut haut haut' 'zone boutons tours'; }
  .plein__corps--horloge { grid-template-areas: 'haut haut haut' 'zone zone zone'; }
  :is(.plein__corps--objet, .plein__corps--horloge) > .plein__fermer { grid-area: haut; justify-self: start; margin: var(--s-3) 0 0 var(--s-3); }
  :is(.plein__corps--objet, .plein__corps--horloge) > .plein__titre { grid-area: haut; align-self: center; padding: var(--s-3) calc(var(--tap) + 2 * var(--s-3)) 0; -webkit-line-clamp: 1; }
  .plein__corps--objet > .plein__boutons { flex-direction: column; gap: var(--s-4); padding: 0 var(--s-4); }
  .plein__corps--objet > .plein__tours { padding-top: var(--s-4); }
}

/* Ligne de minuteur : même hauteur dans tous les états, rien ne bouge sous le doigt. */
.row__zone { display: flex; flex: 1; align-items: center; gap: var(--s-3); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.row--minuteur { position: relative; overflow: hidden; }
.row--minuteur .row__main { min-width: 0; }
/* Suite des blocs d'un minuteur par intervalles, chacun à la mesure de sa durée (data-part, posé par suivreMinuteurs). */
.blocs-temps { display: flex; gap: 2px; height: var(--s-1); margin-top: var(--s-1); }
.blocs-temps > i { flex: 1 1 0; min-width: 2px; border-radius: var(--r-pill); background: var(--mc, var(--text-2)); }
.row__nom, .row--minuteur .row__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row--minuteur .row__sub { display: flex; font-size: var(--fs-caption); font-weight: var(--fw-nom); align-items: center; gap: 2px; }
.row--minuteur .row__sub .icon { width: 1em; height: 1em; flex: none; }
.row--minuteur .row__sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__temps { flex: none; font-size: var(--fs-h3); font-weight: var(--graisse-temps, var(--fw-phrase)); font-variant-numeric: tabular-nums; }
.row--minuteur[data-etat='pret'] .row__temps, .row--minuteur[data-etat='pause'] .row__temps { color: var(--text-2); }
.row--minuteur[data-etat='fini'] .row__sub { color: var(--mc, var(--accent-text)); font-weight: var(--fw-titre); }
.row__actions { display: flex; flex: none; margin-inline-end: calc(var(--s-2) * -1); }
/* Au plus une action par ligne de minuteur sur téléphone : le nom garde sa place. Une action secondaire (crayon, plein
   écran : .row__action--secondaire) n'est montrée qu'à partir de 600 px ; l'appui ou l'appui long sur la ligne la remplace. */
@media (max-width: 599px) { :is(.row--minuteur, .row--objet) .row__action--secondaire { display: none; } }
/* Ligne et actions à côté (.row.row--actions) : la zone d'appui (button.row__appui) puis les boutons icône (.row__actions),
   hors de la zone : un bouton ne se pose pas dans un bouton. Le cadre reste à la ligne, seule la zone rétrécit sous le doigt. */
.row--actions { gap: 0; padding-block: 0; padding-inline-start: 0; }
.row__appui { display: flex; flex: 1; align-items: center; gap: var(--s-3); min-width: 0; min-height: var(--row-min); padding: var(--inset-y) var(--s-2) var(--inset-y) var(--inset); border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.row__appui:active { transform: scale(var(--press-scale)); }
/* Actions sous le texte (.row--dessous, .row__dessous) : boutons avec leur libellé sur une ligne à eux, dans le cadre, sous la zone
   d'appui ; à droite ne reste que la poignée (ou une seule action). Le texte garde toute la largeur au lieu de céder à trois boutons. */
.row--dessous { flex-wrap: wrap; }
.row--dessous .row__appui { padding-bottom: var(--s-2); }
.row__dessous { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--s-2); padding: 0 var(--inset) var(--inset-y); }
/* Barre d'état, au bord de la ligne : elle naît de son milieu. */
/* Barre d'état d'une ligne active : 32 de haut au milieu de la ligne, qui grandit depuis son centre (Clepso : 240 ms). */
.row__actif { position: absolute; top: 50%; left: 0; width: var(--s-1); height: var(--s-6); margin-top: calc(var(--s-6) / -2); border-radius: 0 calc(3px * var(--r-k)) calc(3px * var(--r-k)) 0; background: var(--mc, var(--accent-text)); transform: scaleY(0); transition: transform calc(var(--t-base) * 1.2) var(--ease-out); }
.row--minuteur:not([data-etat='pret']) .row__actif { transform: none; }
/* Un symbole (emoji) au centre de l'anneau fin d'une ligne. */
.anneau--fin .anneau__centre { font-size: var(--fs-body); line-height: 1; }
/* Ligne d'un autre objet (horloge, chronomètre, bouton) : sa pastille dans sa couleur, la barre d'état et les chiffres pleins quand il tourne. */
.row--objet { position: relative; overflow: hidden; }
.row--objet .pastille { --c: var(--mc, var(--accent-text)); }
.row--objet[data-etat='cours'] .row__actif { transform: none; }
.row--objet:not([data-etat='cours']) .row__temps { color: var(--text-2); }

/* Barre de temps entre les infos de gauche et celles de droite : prend la place libre. */
.row--avec-barre .row__main { flex: 0 1 auto; }
.row__barre { flex: 1 1 var(--s-5); min-width: var(--s-4); color: var(--mc, var(--accent-text)); }

/* Glisser pour supprimer : la ligne suit le doigt, le fond rouge attend dessous. */
.glisser { position: relative; overflow: hidden; border-radius: var(--r-md); touch-action: pan-y; }
.glisser__fond { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--inset); background: var(--danger); color: var(--bg); opacity: 0; }
.glisser > .row { position: relative; }

/* Bloc de réglages : petit titre, panneau, filets entre les lignes. */
.bloc { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; min-width: 0; }
.bloc__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); }
.bloc__panneau { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.bloc__ligne { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--row-min); padding: var(--inset-y) var(--inset); border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
/* Ligne dont tout le corps déclenche l'action de son bouton (autorisation à donner) : le pointeur le dit. */
.bloc__ligne--action { cursor: pointer; }
/* Ligne haute (plusieurs sous-lignes et des boutons à libellé : une connexion, un abonnement) : le texte en haut, ses
   boutons (.bloc__actions) à côté tant qu'il lui reste cinq cibles de large, sinon dessous, au bord droit. */
.bloc__ligne--haute { align-items: flex-start; flex-wrap: wrap; }
.bloc__ligne--haute > .row__main { flex: 1 1 calc(var(--tap) * 5); }
.bloc__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); margin-inline-start: auto; }
.bloc__ligne + .bloc__ligne { box-shadow: inset 0 1px 0 var(--line); }
button.bloc__ligne, a.bloc__ligne { cursor: pointer; }
.bloc__ligne > .icon { color: var(--text-2); }
/* Ligne qui détruit (Effacer, Supprimer) : après .bloc__ligne, sinon son color: inherit l'emporte ; l'icône aussi. */
.bloc__ligne--danger, .bloc__ligne--danger > .icon, .bloc__ligne--danger .icon { color: var(--danger); }
/* Titre de bloc qui ouvre ce qu'il nomme (une page, une catégorie) : chevron au bout. */
.bloc__titre--lien { width: 100%; min-height: var(--tap-small); padding: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: opacity var(--t-press) var(--ease-out); }
.bloc__titre--lien:active { opacity: 0.6; }
.bloc__titre--lien > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloc__titre--lien > .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.bloc__etat { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); color: var(--ok); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.bloc__etat .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Un titre et son badge d'état sur la même ligne (« Autoriser les notifications · Obligatoire »). */
.row__titre-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
/* Une ligne choisie dans une liste en sélection : teintée d'accent. */
.bloc__ligne--choisie { background: color-mix(in srgb, var(--accent-text) 8%, transparent); }
/* Une aide sous le panneau d'un bloc, alignée sur le texte des lignes. */
.bloc > .bloc__aide { padding-inline: var(--inset); }
/* Le cœur du soutien : toujours plein, dans la couleur du danger, quel que soit l'accent. */
.icon.icon--coeur { color: var(--danger); fill: currentColor; }

/* Pavé de durée : les chiffres arrivent par la droite, comme sur un téléphone. */
.pave { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.pave__champs { display: flex; justify-content: center; align-items: center; gap: var(--s-2); }
.pave__champ { display: flex; flex-direction: column; align-items: center; }
.pave__valeur { display: flex; align-items: baseline; gap: 2px; overflow: clip; font-size: min(calc(var(--fs-num) * 1.4), 15vw); font-weight: var(--fw-phrase); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pave__valeur [data-pave-champ] { display: inline-block; }
.pave__valeur small { color: var(--text-2); font-size: var(--fs-h3); letter-spacing: 0; }
.pave__valeur:not([data-tape]) [data-pave-champ] { color: color-mix(in srgb, var(--text) 25%, transparent); }
.pave__aide { margin: 0; color: var(--text-2); font-size: var(--fs-caption); text-align: center; }
.pave__touche:disabled { opacity: 0.45; cursor: default; }
.pave__touches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.pave__touche { display: grid; place-items: center; min-height: var(--tap-block); border: 0; border-radius: var(--r-btn); background: var(--surface-2); color: var(--text); font: var(--fw-texte) var(--fs-h3) / 1 var(--font); cursor: pointer; transition: transform var(--t-slow) var(--ease-out); }
.pave__touche:active { transform: scale(var(--press-scale)); transition-duration: var(--t-press); }

/* Recherche avec suggestions. */
.recherche { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.recherche__champ { position: relative; display: flex; align-items: center; }
/* Emoji devant une option de feuille (catégorie) : à la place et à la taille d'une icône. */
.bloc__emoji { flex: none; width: var(--icon); font-size: var(--fs-h3); line-height: 1; text-align: center; }
.recherche__champ > .icon { position: absolute; left: var(--inset-sm); color: var(--text-2); pointer-events: none; }
.recherche__champ .input { padding-left: calc(var(--inset-sm) + var(--icon) + var(--s-2)); }
.point-couleur { flex: none; width: var(--s-3); height: var(--s-3); border-radius: 50%; background: var(--mc, var(--accent-text)); }
/* Dans une phrase (« couleur ● → ● ») ; vide : pas de couleur à soi. */
/* En tête d'une ligne, un point prend la place d'une icône : les textes restent alignés. */
.bloc__ligne > .point-couleur { margin-inline: calc((var(--icon) - var(--s-3)) / 2); }
.point-couleur--texte { display: inline-block; vertical-align: middle; }
.point-couleur--vide { background: none; box-shadow: inset 0 0 0 1px var(--text-2); }

/* En-tête d'une page d'objets. */
.page-tete { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; }
.page-tete__sur { display: flex; align-items: center; gap: var(--s-2); color: var(--accent-text); font-size: var(--fs-caption); font-weight: var(--fw-nom); }
/* Un bouton dans la ligne du haut (Ajouter une page, en mode disposition) se cale à droite, comme la pastille d'une autre page. */
.page-tete__sur > .btn { margin-inline-start: auto; text-transform: none; letter-spacing: normal; }
.page-tete__sur .icon { width: var(--icon-sm); height: var(--icon-sm); }
.page-tete__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.page-tete__resume { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tete__titre { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: var(--fw-titre) var(--fs-h1) / 1.15 var(--font-display); cursor: pointer; }
/* Sur une ligne fine (téléphone couché) : titre, points de page, surtitre qui prend la place restante, actions au bout. */
.page-tete--ligne { flex-direction: row; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.page-tete--ligne > .page-tete__titre { flex: 0 1 auto; font-size: var(--fs-h2); }
.page-tete--ligne > .page-tete__titre > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tete--ligne > .points { flex: none; margin-inline-end: var(--s-2); }
.page-tete--ligne > .page-tete__sur { flex: 1 1 0; min-width: 0; overflow-x: clip; white-space: nowrap; }
.page-tete--ligne .pilule-page { flex-shrink: 1; min-width: 0; }
.points { display: flex; align-items: center; gap: var(--s-1); }
.points i { width: var(--s-1); height: var(--s-1); border-radius: var(--r-pill); background: var(--line-strong); }
.points i[aria-current] { width: var(--s-4); background: var(--accent-text); }

/* Éditeur de grille : cases libres, carte avec ses poignées. */
/* Une case par colonne, carrée ; en carte teintée, la rangée est plus haute (--tinted-row), comme Clepso. */
.grille-edit { --rang-k: 1; container-type: inline-size; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); width: 100%; }
.grille-edit--haute { --rang-k: var(--tinted-row); }
/* Les cases forment un fond à part, sous les cartes : on les voit à travers, elles montrent la place que prend chacune. */
.grille-edit__fond { position: absolute; inset: 0; display: grid; grid-template-columns: inherit; align-content: start; gap: inherit; pointer-events: none; }
.grille-edit__case { height: calc((100cqw - 3 * var(--s-2)) / 4 * var(--rang-k)); border-radius: var(--r-md); background: color-mix(in srgb, var(--text) 6%, transparent); }
.grille-edit > .grille-edit__case { visibility: hidden; }
.grille-edit__carte { position: relative; display: flex; grid-column: span 2; grid-row: span 2; height: calc((100cqw - 3 * var(--s-2)) / 2 * var(--rang-k) + var(--s-2)); overflow: hidden; padding: var(--s-2); border-radius: var(--r-lg); box-shadow: inset 0 0 0 2px var(--accent-text); }
/* En édition, la carte garde l'affichage choisi, réduit pour tenir dans ses 2 × 2 cases. */
.grille-edit__carte > .minuteur { flex: 1; min-width: 0; min-height: 0; }
.grille-edit__carte .minuteur--cadran .cadran { width: 54%; }
.grille-edit__carte .minuteur--cadran { gap: var(--s-1); }
.poignee { position: absolute; z-index: 1; display: grid; place-items: center; width: var(--handle); height: var(--handle); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-text); box-shadow: var(--shadow-card); cursor: pointer; }
.poignee .icon { width: var(--handle-icon); height: var(--handle-icon); }
/* Poignées à 3 px du bord de la carte (posée à s1 dans sa case), ni collées ni poussées dehors (choix de l'utilisateur, 2026-11-05). */
/* Comme Clepso : aligner et supprimer teintés, changer la taille en plein. */
.poignee--haut-gauche { top: calc(var(--s-1) * 1.75); left: calc(var(--s-1) * 1.75); }
.poignee--haut-droite { top: calc(var(--s-1) * 1.75); right: calc(var(--s-1) * 1.75); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.poignee--bas-droite { right: calc(var(--s-1) * 1.75); bottom: calc(var(--s-1) * 1.75); background: var(--accent); color: var(--on-accent); }
/* Saisie, la poignée de taille grossit sous le doigt (29 → 35 dans Clepso). */
.poignee--bas-droite { transition: transform var(--t-press) var(--ease-out); }
.poignee--bas-droite:active { transform: scale(1.2); }
/* Panneau de sonnerie, comme Clepso : au-dessus de tout tant qu'on ne l'a pas arrêtée. Réveil de sa couleur, nom, depuis quand, +1 min et Arrêter. */
.sonnerie { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; padding: calc(var(--inset) + 2px) calc(var(--inset) + 4px) var(--inset); border-radius: var(--r-lg); background: color-mix(in srgb, var(--mc, var(--accent-text)) 18%, var(--surface)); box-shadow: var(--shadow-float); }
.sonnerie__tete { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.sonnerie__tete > .icon { flex: none; width: calc(var(--icon) + 6px); height: calc(var(--icon) + 6px); color: var(--mc, var(--accent-text)); }
.sonnerie__nom { display: block; overflow: hidden; font-size: var(--fs-h2); font-weight: var(--fw-texte); text-overflow: ellipsis; white-space: nowrap; }
.sonnerie__depuis { display: block; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.sonnerie__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.sonnerie__actions .btn { min-height: var(--tap-block); }
.sonnerie__arreter { --b: var(--mc, var(--accent)); background: var(--mc, var(--accent)); color: var(--surface); }
/* Page vide : le bouton envoie deux ondes, puis se repose (1,9 s puis 0,9 s de repos, comme Clepso). */
.ondes { position: relative; display: inline-grid; place-items: center; }
.ondes i { position: absolute; inset: 0; border-radius: var(--r-btn); box-shadow: 0 0 0 2px var(--accent-text); opacity: 0; animation: socle-onde 2.8s var(--ease-out) infinite; pointer-events: none; }
.ondes i + i { animation-delay: 0.36s; }
.ondes--rond i { border-radius: 50%; }
@keyframes socle-onde { 0% { opacity: 0.7; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(2.1); } }
/* Sans animation : une seule onde, immobile. */
@media (prefers-reduced-motion: reduce) { .ondes i { animation: none; opacity: 0.6; transform: scale(1.3); } .ondes i + i { display: none; } }
/* Widget de l'écran d'accueil. */
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); width: 100%; }
.widget { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); min-width: 0; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.widget--large { grid-column: 1 / -1; }
.widget__temps { font-size: var(--fs-h1); font-weight: var(--graisse-temps, var(--fw-phrase)); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Fond d'un widget : teinté de sa couleur, plein de sa couleur, ou transparent (sur le fond d'écran). */
.widget--teinte { background: color-mix(in srgb, var(--mc, var(--accent-text)) 22%, var(--surface)); }
/* Comme l'app (HomeWidgets.kt) : « Plein » est un fond uni, la surface (blanc, ou gris foncé en sombre), pas la couleur. */
.widget--plein { background: var(--surface); }
/* Aperçu d'un widget d'accueil à ses proportions (home_widget_config de Clepso) : carré, large (deux fois), bas (un peu plus de la moitié). */
.widget-apercu__cadre { align-items: center; }
.widget-apercu { width: min(100%, calc(var(--tap) * 3.4)); height: calc(var(--tap) * 3.4); padding: var(--s-2); overflow: hidden; text-align: center; }
.widget-apercu--large { width: min(100%, calc(var(--tap) * 6.8)); }
.widget-apercu--bas { height: calc(var(--tap) * 1.8); }
.widget-apercu .widget__temps { font-size: var(--fs-h2); }
.widget-apercu__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding-inline: var(--s-2); font-size: var(--fs-small); }
.widget-apercu__ligne .widget__temps { font-size: var(--fs-body); }
.widget-apercu__cases { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); min-height: 0; }
.widget-apercu__case { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-radius: var(--r-md); background: color-mix(in srgb, var(--mc, var(--text-2)) 30%, var(--surface)); color: var(--text); font-size: var(--fs-caption); }
.widget-apercu__case > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-apercu__pilules { display: flex; flex: 1; gap: var(--s-1); min-width: 0; }
.widget-apercu__pilules > .pilule-teinte { flex: 1 1 0; min-width: 0; padding-inline: var(--s-1); }
/* « Transparent » : un voile léger, blanc en clair, noir en sombre (80 / 255 dans l'app, soit 31 %), sans contour. */
.widget--transparent { background: light-dark(color-mix(in srgb, var(--surface) 31%, transparent), color-mix(in srgb, var(--scrim) 56%, transparent)); }
/* ===== Objets repris des projets, voir web/objets.js et INVENTAIRE.md ===== */
/* Zone de texte, liste de choix, champs composés. */
textarea.input { min-height: calc(var(--tap) * 2); padding-block: var(--cell-y); resize: vertical; line-height: 1.4; }
.field__pied { display: flex; justify-content: space-between; gap: var(--s-2); }
.field__compte { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.select { position: relative; display: block; }
.select select { appearance: none; padding-inline-end: calc(var(--inset-sm) + var(--icon)); }
.select > .icon { position: absolute; top: 50%; right: var(--inset-sm); color: var(--text-2); transform: translateY(-50%); pointer-events: none; }
.champ-icone { position: relative; display: block; }
.champ-icone .input { padding-inline-end: var(--tap); }
.champ-icone > .icon-btn { position: absolute; top: 0; right: 0; }
.plage { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap) * 3), 1fr)); gap: var(--s-2); }
.en-ligne { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.en-ligne > .input, .en-ligne > .champ-icone, .en-ligne > .select { flex: 1 1 calc(var(--tap) * 3); width: auto; }
.en-ligne > .btn { flex: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
/* Lu par les lecteurs d'écran seulement (titre d'écran caché, précision d'un bouton). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; white-space: nowrap; clip-path: inset(50%); }
.terme { padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: none; color: inherit; font: inherit; cursor: help; }
.bulle { position: fixed; inset: auto; max-width: min(var(--bulle-w), calc(100vw - var(--s-4))); margin: 0; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-size: var(--fs-small); pointer-events: none; }
/* Compteur − / +, molette, règle. */
.compteur { display: inline-flex; align-self: flex-start; align-items: center; border-radius: var(--r-btn); background: var(--surface-2); }
.compteur .icon-btn { width: var(--tap-small); height: var(--tap-small); }
.compteur .icon-btn:disabled { opacity: 0.45; cursor: default; }
.compteur__valeur { min-width: calc(var(--tap) * 0.8); text-align: center; font-size: inherit; font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.compteur[data-sans-valeur] .compteur__valeur { opacity: 0.45; }
.quantite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.molette { container: molette / inline-size; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; padding: var(--inset-y) var(--inset-sm); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-body); user-select: none; }
/* Molette étroite (dans une paire, sur téléphone) : sans la place de ses quatre boutons, − et + des côtés s'effacent, les
   flèches au-dessus et au-dessous du nombre, qui font la même chose, restent (comme StyleMolette). Seuil de dessin, en em
   du texte courant pour suivre la densité : 2 × (tap + s2) + le nombre le plus long, soit 10 em pour 2 chiffres (160 px,
   200 en grande taille), 11,5 pour 3 et 13 pour 4 (data-chiffres, posé par suivreNombres d'après data-max). La molette
   prend toute la largeur offerte (elle est son propre conteneur). */
@container molette (max-width: 9.99em) {
  .molette > .icon-btn { display: none; }
  .molette > .molette__centre { margin-inline: auto; }
}
@container molette (max-width: 11.49em) {
  .molette[data-chiffres='3'] > .icon-btn { display: none; }
  .molette[data-chiffres='3'] > .molette__centre { margin-inline: auto; }
}
@container molette (max-width: 12.99em) {
  .molette[data-chiffres='4'] > .icon-btn { display: none; }
  .molette[data-chiffres='4'] > .molette__centre { margin-inline: auto; }
}
/* Seuls le nombre et ses flèches glissent : ailleurs, le bloc laisse défiler la page. */
.molette__centre { display: flex; flex-direction: column; align-items: center; min-width: 0; touch-action: none; cursor: ns-resize; }
.molette__saisie { display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: text; }
.compteur__zone { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.15em; font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.molette__valeur { font-size: var(--fs-num); font-weight: var(--fw-phrase); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Le nombre se tape : un champ sans cadre ni flèches du navigateur, dans la police de la valeur, à la largeur de son texte. */
.molette__valeur, .compteur__valeur { field-sizing: content; min-width: 2ch; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font-family: inherit; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.molette__valeur::-webkit-inner-spin-button, .molette__valeur::-webkit-outer-spin-button, .compteur__valeur::-webkit-inner-spin-button, .compteur__valeur::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.molette__valeur:focus-visible, .compteur__valeur:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* Flèches tout près du nombre, en plus de − et + sur les côtés. */
.molette__fleche { width: var(--tap); height: calc(var(--tap-small) * 0.75); }
.compteur__zone { touch-action: none; cursor: ns-resize; }
.molette__unite { color: var(--text-2); font-size: var(--fs-small); }
.molette[data-atteint] .molette__valeur { color: var(--ok); }
.molette[data-atteint] .molette__unite::after { content: ' · objectif atteint'; color: var(--ok); }
/* Valeur proposée à toucher (objectif, dernière fois), cochée en vert une fois atteinte. */
.molette__cible { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-small); margin-block: var(--s-1) 0; padding-inline: var(--s-2); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.molette__cible:active { transform: scale(var(--press-scale)); }
.molette__cible .icon { width: var(--icon-sm); height: var(--icon-sm); }
.molette__cible[data-atteint] { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.molette__cible > .molette__cible-ok, .molette__cible[data-atteint] > .molette__cible-vise { display: none; }
.molette__cible[data-atteint] > .molette__cible-ok { display: block; }
/* Zéro nommé : à zéro, le nom à la place du nombre (le champ reste là, invisible, pour la saisie) ; le bouton barré y ramène. */
.molette[data-zero-nom] .molette__saisie { position: relative; }
.molette__zero-nom { display: none; font-size: var(--fs-h2); font-weight: var(--fw-nom); line-height: 1.1; text-align: center; }
.molette[data-a-zero]:not([data-saisie]) .molette__zero-nom { display: block; }
.molette[data-a-zero]:not([data-saisie]) :is(.molette__valeur, .molette__unite) { position: absolute; width: 1px; opacity: 0; }
.molette__vers-zero { width: var(--tap-small); height: var(--tap-small); color: var(--text-2); }
.regle { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.regle__valeur { font-size: var(--fs-num); font-weight: var(--fw-phrase); line-height: 1.1; font-variant-numeric: tabular-nums; }
.regle__fenetre { position: relative; width: 100%; height: var(--s-6); overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent); }
/* Le nombre se tape (data-nombre-saisi) : champ sans cadre, dans la police de la valeur, à la largeur de son texte. Un toucher l'ouvre. */
.regle__valeur { cursor: text; }
.regle__saisie { field-sizing: content; min-width: 1ch; max-width: 100%; padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); outline: 0; background: none; color: inherit; font: inherit; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
/* En saisie : un fond teinté plutôt qu'un contour, qui serait rogné en haut par la règle et collé au repère en bas. */
.regle__saisie:focus { background: color-mix(in srgb, var(--accent-text) 14%, transparent); }
.regle { --regle-ecart: var(--s-2); }
.regle__piste { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 8000px; background-image: repeating-linear-gradient(to right, var(--line-strong) 0 2px, transparent 2px var(--regle-ecart)); }
/* Majeures (data-majeur) : une graduation sur N plus haute et plus foncée, son nombre dessous. */
.regle[data-majeur] .regle__fenetre { height: calc(var(--s-6) + var(--fs-small) * 1.4); }
.regle[data-majeur] .regle__piste { background-image: repeating-linear-gradient(to right, var(--text-2) 0 2px, transparent 2px calc(var(--regle-ecart) * var(--regle-majeur, 5))), repeating-linear-gradient(to right, var(--line-strong) 0 2px, transparent 2px var(--regle-ecart)); background-size: 100% var(--s-6), 100% calc(var(--s-6) * 0.6); background-repeat: no-repeat; background-position: 0 0, 0 calc(var(--s-6) * 0.2); }
.regle__nombre { position: absolute; top: var(--s-6); left: 1px; padding-top: 2px; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
/* Première position nommée (data-zero-nom, « Sans poids ») : à zéro, le nom remplace le nombre, comme la molette. */
.regle__zero-nom { display: none; font-size: var(--fs-h2); font-weight: var(--fw-nom); line-height: 1.1; }
/* Le nom prend la hauteur du nombre : la règle ne bouge pas en arrivant au zéro. */
.regle[data-a-zero]:not([data-saisie]) .regle__zero-nom { display: flex; align-items: center; min-height: calc(var(--fs-num) * 1.1); cursor: text; }
/* Le champ reste là, invisible, pour la saisie : pendant la saisie, le nombre reparaît à la place du nom. */
.regle[data-a-zero]:not([data-saisie]) .regle__valeur { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.regle__repere { position: absolute; top: 0; height: var(--s-6); left: calc(50% - 1.5px); width: 3px; border-radius: var(--r-pill); background: var(--accent-text); }
/* Puces : valeur, nombre, retrait, indisponible. */
.chip__nombre { margin-inline-start: var(--s-1); opacity: 0.7; font-variant-numeric: tabular-nums; }
.chip[aria-disabled='true'] { opacity: 0.45; text-decoration: line-through; cursor: default; }
.chip .icon { width: var(--icon-sm); height: var(--icon-sm); margin-inline-start: var(--s-1); }
.chip-retirable { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-small); padding-inline: calc(var(--btn-x) - 4px) var(--s-1); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.chip-retirable .icon-btn { width: calc(var(--tap-small) - 8px); height: calc(var(--tap-small) - 8px); }
.chip-retirable .icon-btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Puce cochable et retirable : un appui sur le libellé la choisit (en text sur bg, comme une puce active), la croix la retire. */
.chip-retirable--choix { padding-inline-start: 0; transition: transform var(--t-press) var(--ease-out); }
.chip-retirable--choix[data-choisie] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
.chip-retirable__choix { align-self: stretch; padding: 0 var(--s-1) 0 calc(var(--btn-x) - 4px); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.chip-retirable__choix:disabled { opacity: 0.45; cursor: default; }
.chip-retirable--choix .icon-btn { color: inherit; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choix-defile { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.choix-defile > * { flex: none; }
/* Jusqu'aux bords de l'écran : la ligne sort de la marge de la page, ses puces y restent alignées. */
.choix-defile--bord { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
@media (hover: hover) and (pointer: fine) { .choix-defile--bord { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; } }
.grille-symboles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tap), 1fr)); gap: var(--s-2); }
.symbole { display: grid; place-items: center; min-height: var(--tap); padding: 0; border: 0; border-radius: var(--r-btn); background: var(--surface-2); color: var(--text); font: var(--fw-nom) var(--fs-small) / 1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.symbole--grand { font-size: var(--fs-h2); }
.symbole:active { transform: scale(var(--press-scale)); }
.symbole[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--accent-text); }
/* Choix d'une icône (choisirIcone) : recherche, puis la grille qui défile seule. */
.choix-icone { display: flex; flex-direction: column; gap: var(--head-gap); }
.choix-icone__recherche { position: relative; display: block; }
.choix-icone__recherche > .icon { position: absolute; top: 50%; left: var(--s-3); width: var(--icon-sm); height: var(--icon-sm); color: var(--text-2); transform: translateY(-50%); pointer-events: none; }
.choix-icone__recherche > .input { padding-inline-start: calc(var(--s-3) * 2 + var(--icon-sm)); }
.choix-icone__grille { max-height: min(50vh, calc(var(--tap) * 7)); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
/* Dessins du métier (choisirIcone, dessins) : tuiles carrées plus grandes, le dessin à 80 %, rangées sous leur catégorie. */
.grille-symboles--dessins { grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap) * 1.6), 1fr)); }
.symbole--dessin { aspect-ratio: 1; }
.symbole--dessin > svg:not(.icon) { width: 80%; height: 80%; }
.choix-icone__categorie { grid-column: 1 / -1; margin-block-start: var(--s-2); color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-titre); }
/* Ligne à cocher : le trait qui barre le titre se pose en scaleX. */
.coche-ligne { display: flex; align-items: center; gap: var(--s-3); min-height: var(--row-min); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; }
.coche-ligne__titre { position: relative; flex: 1; min-width: 0; font-weight: var(--fw-nom); }
.coche-ligne__texte { transition: opacity var(--t-base); }
/* Barré ligne par ligne (un titre sur deux lignes est barré deux fois), puis pâli ; seul le pâli s'anime. */
.coche-ligne input:checked ~ .coche-ligne__titre .coche-ligne__texte { opacity: 0.55; text-decoration: line-through 2px; }
.choice--long { align-items: flex-start; }
.choice--long .check { margin-block-start: 2px; }
/* Téléversement et photo. */
.depot { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--inset); border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); text-align: center; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.depot:active { transform: scale(var(--press-scale)); }
.depot[data-survol] { box-shadow: inset 0 0 0 2px var(--accent-text); color: var(--text); }
.depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.row--fichier > .icon { color: var(--text-2); }
/* overflow: clip et non hidden : un cadre qui défile perd sa taille minimale et s'écrase dans une colonne flexible
   (.row__dessous mis en colonne) ; clip garde son 4:3. */
.photo { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 100%; overflow: clip; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.photo__vide { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); font-size: var(--fs-small); }
/* Compacte tant qu'elle est vide (feuille d'ajout : le cadre 4:3 vide pousserait les boutons hors de l'écran) : une ligne,
   icône et texte côte à côte ; data-pleine (posé par brancherObjets, ou par l'app qui pose l'image) rend le cadre 4:3. */
.photo--compacte:not([data-pleine]) { aspect-ratio: auto; min-height: var(--tap-block); padding: var(--inset-y) var(--inset); }
.photo--compacte:not([data-pleine]) .photo__vide { flex-direction: row; gap: var(--s-2); }
/* Code PIN. */
.pin { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: calc(var(--tap-block) * 6); margin-inline: auto; }
.pin__points { display: flex; justify-content: center; gap: var(--s-3); }
.pin__point { width: var(--s-3); height: var(--s-3); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.pin__point[data-plein] { background: var(--text); box-shadow: none; }
.pin__message { min-height: 1.5em; color: var(--text-2); font-size: var(--fs-small); text-align: center; }
.pin__message[data-etat='ok'] { color: var(--ok); }
.pin__message[data-etat='danger'] { color: var(--danger); }
/* Formulaire : deux colonnes dès qu'il y a la place. */
.formulaire { position: relative; display: flex; flex-direction: column; gap: var(--block-gap); width: 100%; }
.formulaire__champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tap) * 5)), 1fr)); gap: var(--head-gap) var(--s-3); }
.formulaire__large { grid-column: 1 / -1; }
.formulaire__pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
/* Listes à modifier. */
.ligne-editable { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-1) var(--s-1) var(--inset-sm); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.ligne-editable .input { flex: 1; min-width: 0; border-color: transparent; padding-inline: 0; background: transparent; }
.ligne-editable .icon-btn { flex: none; width: var(--tap-small); height: var(--tap-small); }
.ligne-editable .icon-btn:disabled { opacity: 0.3; cursor: default; }
.ligne-ajout-zone { display: flex; flex-direction: column; gap: var(--list-gap); }
/* Toute poignée de liste triable, quelle que soit sa classe : le doigt la déplace, le navigateur ne défile pas (sinon il annule le
   glissement au premier mouvement, pointercancel). */
.poignee-ligne, [data-poignee] { cursor: grab; touch-action: none; }
.poignee-ligne { color: var(--text-2); }
[data-triable] > * { position: relative; }
[data-triable] > .glisse { transition: transform var(--t-slow) var(--ease-out); }
[data-triable] > .saisi { z-index: 2; box-shadow: var(--shadow-float); }

/* Recherche : effacer, surligner, groupes. */
.recherche__champ .icon-btn { position: absolute; right: 0; }
.recherche__champ .icon-btn + .icon-btn { right: var(--tap); }
.recherche__champ .input { padding-inline-end: var(--tap); }
/* Deux boutons (effacer et dicter) : la saisie s'arrête avant le second. Posée par brancherObjets quand la dictée existe. */
.recherche__champ--deux .input { padding-inline-end: calc(var(--tap) * 2); }
/* La croix du navigateur (type="search") doublerait celle du composant. */
.recherche__champ .input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
mark { border-radius: calc(3px * var(--r-k)); background: color-mix(in srgb, var(--accent-text) 22%, transparent); color: inherit; }
.bloc__ligne--creer { color: var(--accent-text); font-weight: var(--fw-nom); }
.bloc__ligne--creer > .icon { color: inherit; }
.bloc__panneau--plat { box-shadow: none; background: var(--surface-2); }

/* Menu, dans la couche du dessus. */
.menu-panneau { position: fixed; inset: auto; min-width: calc(var(--tap) * 4); max-width: min(var(--menu-w), calc(100vw - var(--s-4))); max-height: min(60dvh, 420px); overflow-y: auto; margin: 0; padding: var(--s-1); border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow-float); }
.menu-panneau .input { margin-block-end: var(--s-1); }
.menu-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 0 var(--inset-sm); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .menu-item:hover { background: var(--surface-2); } }
.menu-item > .icon { color: var(--text-2); }
.menu-item--danger, .menu-item--danger > .icon { color: var(--danger); }
.menu-item > .icon--coche { margin-inline-start: auto; opacity: 0; color: var(--accent-text); }
.menu-item[aria-checked='true'] > .icon--coche { opacity: 1; }
/* Choix surligné sans coche (menu des modes du plein écran de Clepso) : teinté d'accent comme un réglage choisi. */
.menu-item--surligne[aria-checked='true'], .menu-item--surligne[aria-checked='true'] > .icon { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
.menu-filet { height: 1px; margin: var(--s-1) 0; background: var(--line); }
.bouton-menu { justify-content: space-between; width: 100%; padding-inline: var(--inset-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: var(--fw-texte); }
/* Filtre en pastille, repris de SIRH (FiltrePastille) : « Intitulé : valeur », contour pointillé ; choisi, contour plein
   teinté d'accent et une croix pour le retirer. Le menu des choix est celui de [data-menu]. */
.filtre { position: relative; display: inline-flex; align-items: center; min-height: var(--tap-small); border: var(--card-edge) dashed var(--line-strong); border-radius: var(--r-pill); color: var(--text-2); font-size: var(--fs-small); }
@media (hover: hover) { .filtre:hover { border-color: var(--text-2); } }
.filtre .chip { gap: var(--s-1); min-height: calc(var(--tap-small) - 2 * var(--card-edge)); padding-inline: var(--s-3) var(--s-1); border-radius: inherit; background: none; color: inherit; white-space: nowrap; }
/* Dans une carte (.card .chip prend surface-2) : la pastille reste transparente, son contour suffit. */
.card .filtre .chip:not([aria-pressed='true']), .filtre .chip { background: none; box-shadow: none; }
.filtre__intitule { font-weight: var(--fw-nom); }
.filtre [data-menu-valeur] { font-weight: var(--fw-titre); }
.filtre .chip > .icon { transition: transform var(--t-slow) var(--ease-out); }
.filtre .chip[aria-expanded='true'] > .icon { transform: rotate(180deg); }
.filtre[data-actif] { border-style: solid; border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
.filtre__effacer { display: none; place-items: center; width: calc(var(--tap-small) * 0.6); height: calc(var(--tap-small) * 0.6); margin-inline-end: var(--s-1); padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.filtre__effacer .icon { width: var(--icon-sm); height: var(--icon-sm); }
.filtre[data-actif] .filtre__effacer { display: grid; }
@media (hover: hover) { .filtre__effacer:hover { background: color-mix(in srgb, var(--accent-text) 15%, transparent); } }
.chip--filtre[aria-pressed='true'] { background: light-dark(color-mix(in srgb, var(--text) 9%, transparent), var(--surface-2)); color: var(--text); }

/* Tiroir : feuille qui arrive du bord droit. */
dialog.tiroir { width: min(var(--drawer-w), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: var(--inset); border: 0; background: var(--surface); color: var(--text); }
dialog.tiroir::backdrop { background: var(--scrim); }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-block-end: var(--head-gap); }
.sheet__poignee { display: block; width: var(--s-6); height: var(--s-1); margin: calc(var(--s-3) * -1) auto var(--s-3); padding: 0; border: var(--s-2) solid transparent; box-sizing: content-box; background: var(--line-strong); background-clip: padding-box; border-radius: var(--r-pill); touch-action: none; cursor: grab; }
@media (min-width: 900px) { .sheet__poignee { display: none; } }

/* Repliable : la flèche tourne, le contenu apparaît, ce qui suit glisse. */
.repli { border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.repli summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--row-min); padding: var(--inset-y) var(--inset); font-weight: var(--fw-nom); list-style: none; cursor: pointer; }
.repli summary::-webkit-details-marker { display: none; }
.repli summary > .icon { flex: none; color: var(--text-2); transition: transform var(--t-slow) var(--ease-out); }
.repli[open] summary > .icon { transform: rotate(180deg); }
.repli__corps { padding: 0 var(--inset) var(--inset-y); color: var(--text-2); }
.repli__nombre { margin-inline-start: var(--s-1); color: var(--text-2); font-weight: var(--fw-texte); font-variant-numeric: tabular-nums; }
.accordeon { display: flex; flex-direction: column; gap: var(--list-gap); }
.suite__texte { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.suite[data-ouvert] .suite__texte { display: block; }
.suite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.lien-bouton { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; cursor: pointer; }

/* Fil d'Ariane, onglets de page. */
.ariane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-small); }
.ariane a { color: inherit; text-decoration: none; }
.ariane a:hover { text-decoration: underline; }
.ariane .icon { width: 1em; height: 1em; }
.ariane [aria-current] { color: var(--text); font-weight: var(--fw-nom); }
.retour { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; border: 0; background: none; color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1.5 var(--font); text-decoration: none; cursor: pointer; }
.retour .icon { width: var(--icon-sm); height: var(--icon-sm); }
.onglets { position: relative; display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.onglet { position: relative; display: inline-flex; flex: none; align-items: center; gap: var(--s-1); min-height: var(--tap); padding-inline: var(--inset-sm); border: 0; background: none; color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1 var(--font); cursor: pointer; }
.onglet[aria-selected='true'] { color: var(--text); }
.onglet .icon { width: var(--icon-sm); height: var(--icon-sm); }
.onglets__trait { position: absolute; bottom: 0; left: 0; width: 1px; height: 2px; background: var(--accent-text); transform-origin: left; }

/* Barres de page. */
.barre-haut { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.barre-haut__titre { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-h3); font-weight: var(--fw-titre); text-overflow: ellipsis; white-space: nowrap; }
/* Icône facultative devant le titre d'une feuille : à l'encre du texte, ni accent ni pastille. */
.barre-haut__icone { flex: none; width: var(--icon); height: var(--icon); color: var(--text); }
.page-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.page-entete__texte { flex: 1 1 calc(var(--tap) * 5); display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.page-entete__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.groupe-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.groupe-tete__nombre { color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.outils-liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); width: 100%; }
.outils-liste__recherche { position: relative; flex: 1 1 calc(var(--tap) * 4); display: flex; align-items: center; }
.outils-liste__recherche > .icon { position: absolute; left: var(--inset-sm); color: var(--text-2); pointer-events: none; }
.outils-liste__recherche .input { padding-inline-start: calc(var(--inset-sm) + var(--icon) + var(--s-2)); }
.outils-liste__effacer { position: absolute; right: var(--s-1); width: calc(var(--tap-small) * 0.8); height: calc(var(--tap-small) * 0.8); }
/* Tableau avec sa barre d'outils, repris de SIRH (ListingTable) : en tête de la carte, le titre et son nombre puis les
   actions ; dessous, la barre : recherche à gauche, filtres en pastilles, puis l'affichage et les colonnes ; une sélection
   la remplace par ses actions ; au pied, le rang des lignes, les lignes par page et les pages. */
.tableau-carte { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; }
.tableau-carte__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--inset); }
.tableau-carte__titre { display: flex; flex: 1 1 calc(var(--tap) * 5); align-items: baseline; gap: var(--s-1); min-width: 0; margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-titre); }
.tableau-carte__nombre { color: var(--text-2); font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.tableau-carte__outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: calc(var(--tap-small) + var(--s-4)); padding: var(--s-2) var(--inset); border-top: var(--card-edge) solid var(--line); }
.tableau-carte__espace { flex: 1 1 0; }
.tableau-carte .outils-liste__recherche { flex: 0 1 calc(var(--tap) * 7); min-width: min(100%, calc(var(--tap) * 4)); }
.tableau-carte .outils-liste__recherche .input { min-height: var(--tap-small); padding-block: 0; padding-inline-end: var(--tap-small); }
.tableau-carte__tete .btn:not(.btn--primary), .tableau-carte__outils .btn:not(.btn--ghost) { background: var(--surface); box-shadow: inset 0 0 0 var(--card-edge) var(--line-strong); }
.tableau-carte > .barre-masse { gap: var(--s-2); min-height: calc(var(--tap-small) + var(--s-4)); padding: var(--s-2) var(--inset); border-top: var(--card-edge) solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--accent-text) 10%, var(--surface)); color: var(--text); }
.tableau-carte > .barre-masse .barre-masse__nombre { flex: none; color: var(--accent-text); font-weight: var(--fw-titre); }
.tableau-carte > .barre-masse .btn { color: var(--text); }
.tableau-carte > .barre-masse .btn--danger { color: var(--danger); }
.tableau-carte .tableau { border: 0; border-top: var(--card-edge) solid var(--line); border-radius: 0; box-shadow: none; }
.tableau-carte__cartes { padding: var(--inset); border-top: var(--card-edge) solid var(--line); }
.tableau-carte > .empty { border-top: var(--card-edge) solid var(--line); }
.tableau-carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--inset); border-top: var(--card-edge) solid var(--line); color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.tableau-carte__pied .select { width: calc(var(--tap) * 1.9); }
.tableau-carte__pied .select .input { min-height: var(--tap-small); padding-block: 0; }
.outils-liste__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-inline-start: auto; }
.resume-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-small); }
.resume-liste strong { color: var(--text); font-variant-numeric: tabular-nums; }
.barre-masse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--inset); border-radius: var(--r-md); background: var(--text); color: var(--bg); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.barre-masse__nombre { flex: 1 0 auto; font-variant-numeric: tabular-nums; }
.barre-masse .btn { --b: transparent; color: inherit; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1); }
.pagination__page { display: grid; place-items: center; min-width: var(--tap-small); height: var(--tap-small); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.pagination__page[aria-current] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
.pagination .icon-btn { width: var(--tap-small); height: var(--tap-small); }
.barre-enregistrer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-float); }
.barre-enregistrer__etat { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-small); }
.barre-enregistrer__etat::before { content: ''; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--text-2); }
.barre-enregistrer[data-etat='modifie'] .barre-enregistrer__etat::before { background: var(--warn); }
.barre-enregistrer[data-etat='enregistre'] .barre-enregistrer__etat::before { background: var(--ok); }
.fab { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: var(--tap-block); height: var(--tap-block); padding: 0 var(--inset); border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font: var(--fw-nom) var(--fs-body) / 1 var(--font); box-shadow: var(--shadow-float); cursor: pointer; transition: transform var(--t-slow) var(--ease-out); }
.fab:active { transform: scale(var(--press-scale)); transition-duration: var(--t-press); }
.fab--rond { width: var(--tap-block); padding: 0; }
.actions-icones { display: flex; align-items: center; gap: var(--s-1); }
.actions-icones .icon-btn { border-radius: var(--r-btn); background: var(--surface-2); color: var(--text); }
.actions-icones .icon-btn--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.actions-icones__fin { margin-inline-start: auto; }
.icon-btn[aria-pressed='true'] { color: var(--accent-text); }
.bandeau { --c: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--inset-y) var(--inset); background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--text); font-size: var(--fs-small); }
.bandeau > .icon { color: var(--c); }
.bandeau__texte { flex: 1 1 calc(var(--tap) * 3); }
.bandeau--ok { --c: var(--ok); }
.bandeau--warn { --c: var(--warn); }
.bandeau--danger { --c: var(--danger); }
.voile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: calc(var(--tap) * 5); padding: var(--inset); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text); text-align: center; }
.evitement { position: fixed; z-index: 50; top: var(--s-2); left: var(--s-2); padding: var(--s-2) var(--inset-sm); border-radius: var(--r-sm); background: var(--text); color: var(--bg); transform: translateY(calc(-100% - var(--s-3))); transition: transform var(--t-base) var(--ease-out); }
.evitement:focus { transform: none; }
.evitement--demo { position: static; display: inline-block; transform: none; }
.visite { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--inset); border-radius: var(--r-md); background: var(--text); color: var(--bg); box-shadow: var(--shadow-float); }
.visite__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.visite .btn { --b: var(--bg); color: var(--text); }
.visite .points i { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.visite .points i[aria-current] { background: var(--bg); }

/* Données : chiffres, montants, tendances. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap) * 3), 1fr)); gap: var(--s-3); width: 100%; }
/* Carte qui regroupe plusieurs choses (chiffres, une phrase, des clés) : groupes espacés de --group-gap, éléments d'un groupe
   de s2 ; un grand chiffre et son libellé restent à s1 (.chiffre). */
.groupes { display: flex; flex-direction: column; gap: var(--group-gap); min-width: 0; }
/* Carte de texte (conservation, astuces) : son titre au-dessus, comme tout bloc ; un paragraphe par phrase ou par astuce. */
.carte-texte { display: flex; flex-direction: column; gap: var(--head-gap); color: var(--text-2); line-height: 1.55; }
.carte-texte > p { margin: 0; }
.groupe { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.chiffre { container-type: inline-size; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
a.chiffre, button.chiffre { border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
a.chiffre:active, button.chiffre:active { transform: scale(var(--press-scale)); }
.chiffre__nom { display: flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-small); }
.chiffre__nom .icon { width: var(--icon-sm); height: var(--icon-sm); }
.chiffre__valeur { font-size: min(var(--fs-h1), 13.5cqi); font-weight: var(--fw-titre); line-height: 1.1; letter-spacing: calc(-0.02em * var(--track-k)); font-variant-numeric: tabular-nums; }
.chiffre--grand .chiffre__valeur { font-size: var(--fs-num); }
.chiffre--warn .chiffre__valeur { color: var(--warn); }
.chiffre--ok .chiffre__valeur { color: var(--ok); }
.chiffre--danger .chiffre__valeur { color: var(--danger); }
.chiffre__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.chiffre [data-graphique='mini'] { flex: 1; min-width: 0; }
/* Chiffre posé dans une carte (.card.groupes) : ni fond, ni ombre, ni contour, ni marge ; la valeur avant son libellé. */
.chiffre.chiffre--nu { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.chiffre--nu .chiffre__valeur { order: -1; }
.chiffres--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Trois sur une ligne, même à 360 px (entrées, sorties, net) : la valeur se réduit à sa tuile. */
.chiffres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.chiffres--trois > .chiffre { padding: var(--inset-sm); }
.chiffres--trois .chiffre__valeur { font-size: min(var(--fs-h1), 17cqi); }
/* Carte de compte (.chiffre--compte) : en tête ce qui dit d'où vient le chiffre et son état (.chiffre__tete : badge, pastille),
   le nom sur une ligne, la valeur en titre de tuile. Souvent un lien (a.chiffre). */
.chiffre__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.chiffre--compte .chiffre__nom { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chiffre--compte .chiffre__valeur { font-size: var(--fs-h3); line-height: inherit; letter-spacing: normal; white-space: nowrap; }
.faits { display: flex; width: 100%; padding-block: var(--inset-y); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.fait { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding-inline: var(--s-2); text-align: center; }
.fait + .fait { box-shadow: inset 1px 0 0 var(--line); }
.fait strong { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.fait span { color: var(--text-2); font-size: var(--fs-caption); }
.montant { font-weight: var(--fw-nom); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Dans une tuile de chiffre, le montant prend la graisse du chiffre. */
.chiffre__valeur .montant { font-weight: inherit; }
.montant--plus { color: var(--ok); }
/* Solde net négatif (bilan, résultat du mois) : en danger, le signe reste dans le texte. */
.montant--perte { color: var(--danger); }
.montant--attente { color: var(--text-2); font-style: italic; }
.variation { display: inline-flex; align-items: center; gap: 2px; color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-nom); white-space: nowrap; font-variant-numeric: tabular-nums; }
.variation .icon { width: 1em; height: 1em; }
.variation--bien { color: var(--ok); }
.variation--mal { color: var(--danger); }
.cles { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); margin: 0; width: 100%; }
.cles dt, .cles dd { margin: 0; padding-block: var(--cell-y); box-shadow: inset 0 -1px 0 var(--line); }
.cles dt { padding-inline-end: var(--s-4); color: var(--text-2); font-size: var(--fs-small); }
.cles dd { text-align: end; font-weight: var(--fw-nom); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cles dt:nth-last-of-type(1), .cles dt:nth-last-of-type(1) + dd { box-shadow: none; }
.roulant { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }

/* États à point, en direct. */
.etat { --c: var(--text-2); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.etat::before { content: ''; flex: none; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--c); }
.etat--ok { --c: var(--ok); }
.etat--warn { --c: var(--warn); }
.etat--danger { --c: var(--danger); }
.etat--info { --c: var(--info); }
.direct { position: relative; display: inline-block; flex: none; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--ok); }
.direct::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: socle-direct 1.8s var(--ease-out) infinite; }
@keyframes socle-direct { 0% { opacity: 0.6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.quantite-badge { display: inline-flex; align-items: center; padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-size: var(--fs-caption); font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.nombre-pose { position: relative; display: inline-flex; }
.nombre-pose__chiffre { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: var(--icon-sm); height: var(--icon-sm); padding-inline: var(--s-1); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-caption); font-weight: var(--fw-titre); line-height: 1; font-variant-numeric: tabular-nums; }
.synchro { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-small); }
.synchro .icon-btn { width: var(--tap-small); height: var(--tap-small); }
.synchro[data-en-cours] .icon { animation: socle-spin 0.8s linear infinite; }

/* Mesures : tout passe par scaleX, sauf les parts d'une barre, posées une fois. */
.mesures { display: grid; grid-template-columns: minmax(min-content, 2fr) minmax(0, 3fr) auto; gap: var(--s-2); width: 100%; margin: 0; padding: 0; list-style: none; }
/* Un nom ne se coupe jamais : il passe à la ligne entre ses mots, et sa colonne s'élargit pour son mot le plus long.
   Dans .mesures, les lignes partagent leurs colonnes (subgrid) : barres et valeurs restent alignées. */
.mesure { display: grid; grid-template-columns: minmax(min-content, 2fr) minmax(0, 3fr) auto; align-items: center; gap: var(--s-2); font-size: var(--fs-small); }
.mesures > .mesure { grid-column: 1 / -1; grid-template-columns: subgrid; }
.mesure__nom { overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: pretty; }
.mesure__valeur { min-width: 6ch; text-align: end; font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.mesure__piste { position: relative; display: block; height: var(--gauge); overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.mesure__plein { display: block; height: 100%; background: var(--g, var(--accent-text)); border-radius: inherit; transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--t-slow) var(--ease-out); }
.mesure__repere { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); transform: translateX(var(--repere, 0)); }
.mesures--repere .mesure__piste { overflow: visible; }
.crans { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); }
.crans__cases { display: inline-flex; gap: 3px; }
.crans__cases i { width: var(--s-4); height: var(--s-2); border-radius: calc(2px * var(--r-k)); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
/* « Tous » à la place des crans (segmenté en tuiles) : un rond vide de leur hauteur, les noms restent alignés. */
.crans__tous { display: inline-block; width: var(--s-2); height: var(--s-2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.crans__cases i[data-plein] { background: var(--g, var(--accent-text)); box-shadow: none; }
/* Crans en couleurs d'état (un niveau : 1 vert, 2 ambre, 3 rouge), data-niveau sur .crans. */
.crans[data-niveau='1'] { --g: var(--ok); }
.crans[data-niveau='2'] { --g: var(--warn); }
.crans[data-niveau='3'] { --g: var(--danger); }
.segments { display: flex; gap: 2px; width: 100%; }
.segments i { flex: 1; height: var(--s-1); border-radius: var(--r-pill); background: var(--surface-2); }
.segments i[data-etat='fait'] { background: var(--g, var(--accent-text)); }
.segments i[data-etat='ici'] { background: color-mix(in srgb, var(--g, var(--accent-text)) 50%, var(--surface-2)); }
.repartition { display: flex; gap: 2px; width: 100%; height: var(--gauge); }
.repartition i { display: block; min-width: 2px; flex-grow: var(--p); flex-basis: 0; background: var(--g); }
.repartition i:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.repartition i:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.repartition--haute { height: 28px; }
.repartition--haute i { display: flex; align-items: center; padding-inline: var(--s-1); border-radius: calc(4px * var(--r-k)); color: var(--bg); font-size: var(--fs-caption); font-style: normal; font-weight: var(--fw-titre); overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.repartition__depassement { background-image: repeating-linear-gradient(45deg, var(--danger) 0 4px, transparent 4px 8px) !important; }
.chaleur { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; width: 100%; padding-block-end: var(--s-1); }
.chaleur__case { width: var(--s-4); height: var(--s-4); padding: 0; border: 0; border-radius: calc(3px * var(--r-k)); background: color-mix(in srgb, var(--accent-text) calc(var(--n, 0) * 25%), var(--surface-2)); cursor: pointer; }
.chaleur__case[disabled] { opacity: 0.35; cursor: default; }
/* Avec ses étiquettes (.chaleur-cadre) : jours à gauche, fixes (.chaleur__jours, 7 lignes, vides ou « lun. »…), mois
   au-dessus des cases (.chaleur__mois, chacun posé à sa semaine par --col, 1 pour la première), qui défilent avec elles. */
.chaleur-cadre { --chaleur-tete: calc(var(--fs-caption) * 1.4); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); width: 100%; color: var(--text-2); font-size: var(--fs-caption); line-height: 1; }
.chaleur__jours { display: grid; grid-template-rows: repeat(7, var(--s-4)); gap: 3px; align-items: center; padding-block-start: calc(var(--chaleur-tete) + var(--s-1)); white-space: nowrap; }
.chaleur__defile { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; overflow-x: auto; padding-block-end: var(--s-1); }
.chaleur__mois { display: grid; grid-auto-flow: column; grid-auto-columns: var(--s-4); gap: 3px; height: var(--chaleur-tete); align-items: end; }
.chaleur__mois > * { grid-row: 1; grid-column: var(--col, auto); white-space: nowrap; }
.chaleur-cadre .chaleur { width: max-content; overflow: visible; padding: 0; }
.chaleur-legende { display: flex; align-items: center; gap: 3px; color: var(--text-2); font-size: var(--fs-caption); }
.chaleur-legende .chaleur__case { width: var(--s-3); height: var(--s-3); cursor: default; }

/* Table de données. */
.table--donnees th[aria-sort] { padding: 0; }
.table__tri { display: inline-flex; align-items: center; gap: var(--s-1); width: 100%; padding: var(--cell-y) var(--inset-sm); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.table--donnees th:first-child .table__tri { padding-inline-start: var(--inset); }
.table__tri .icon { width: 1em; height: 1em; opacity: 0.4; transition: transform var(--t-base) var(--ease-out); }
th[aria-sort='ascending'] .table__tri .icon, th[aria-sort='descending'] .table__tri .icon { opacity: 1; color: var(--text); }
th[aria-sort='descending'] .table__tri .icon { transform: rotate(180deg); }
.table--donnees tr[data-choisie] td { background: color-mix(in srgb, var(--accent-text) 8%, transparent); }
.table__case { width: 1%; }

/* Listes dans le temps. */
.jour { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
/* Barre de filtres collante en tête d'une page liste : recherche puis puces jusqu'aux bords, fond de la page. Sa hauteur
   (--haut-collant, posée par suivreBarreCollante) sert aux têtes de jour qui se collent juste dessous. */
.barre-filtres { position: sticky; z-index: 6; top: 0; display: flex; flex-direction: column; gap: var(--s-2); margin-inline: calc(var(--gutter) * -1); padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--gutter) var(--s-2); background: var(--bg); }
.jour__tete--collante { position: sticky; z-index: 5; top: var(--haut-collant, 0px); padding-block: var(--s-2); background: var(--bg); }
/* Liste qui filtre ce qui suit (catégories) : la ligne choisie reste nette, les autres s'estompent à 45 %. */
[data-liste-filtre] [data-filtre-ligne] { transition: opacity var(--t-base) var(--ease-out); }
[data-liste-filtre][data-filtre-choisi] [data-filtre-ligne]:not([aria-pressed='true']) { opacity: 0.45; }
/* En-tête de détail centré (haut d'une feuille de détail) : grand avatar, grand montant, nom, sous-ligne, état. */
.detail-tete { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); text-align: center; }
.detail-tete > .avatar { width: calc(var(--pastille) * 1.45); height: calc(var(--pastille) * 1.45); margin-block-end: var(--s-2); font-size: var(--fs-h2); }
.detail-tete__valeur { font-size: var(--fs-num); font-weight: var(--fw-titre); line-height: 1.1; letter-spacing: calc(-0.02em * var(--track-k)); font-variant-numeric: tabular-nums; }
.detail-tete__nom { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-h3); font-weight: var(--fw-nom); }
.detail-tete__nom > .icon-btn { width: var(--tap-small); height: var(--tap-small); }
.detail-tete__sous { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-small); }
/* État d'un champ enregistré seul (enregistrerSeul) : sous le champ, « Enregistrement… », « Enregistré » qui s'efface. */
.etat-enregistrement { min-height: 1.4em; color: var(--text-2); font-size: var(--fs-caption); transition: opacity var(--t-slow) var(--ease-out); }
.etat-enregistrement[data-etat='fait'] { color: var(--ok); }
.etat-enregistrement[data-etat='erreur'] { color: var(--danger); }
.etat-enregistrement[data-etat='efface'] { opacity: 0; }
/* Fin d'une liste chargée par lots (suivreDefilement) : phrase pâle, ou erreur et Réessayer. */
.lots-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3); color: var(--text-2); font-size: var(--fs-small); text-align: center; }
.jour__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding-inline: var(--inset); color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.jour__total { font-variant-numeric: tabular-nums; }
.journal { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.journal li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-block: var(--cell-y); box-shadow: inset 0 -1px 0 var(--line); font-size: var(--fs-small); }
.journal li:last-child { box-shadow: none; }
.journal__date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.journal__erreur { flex-basis: 100%; color: var(--danger); }

/* Graphiques, voir web/graphiques.js. Marques fines, grille discrète, le texte reste en couleur de texte. */
.graphique { position: relative; display: flex; flex-direction: column; gap: var(--s-3); width: 100%; min-width: 0; }
.g-svg { display: block; max-width: 100%; overflow: visible; }
/* La courbe se lit au doigt, d'un toucher ou en glissant de côté ; la page défile toujours de haut en bas. */
[data-graphique='courbe'] > .g-svg { touch-action: pan-y; }
.g-texte { fill: var(--text-2); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.g-grille { stroke: var(--line); stroke-width: 1; }
.g-zero { stroke: var(--line-strong); stroke-width: 1; }
.g-barre { fill: var(--g); }
.g-barre--choisie { stroke: var(--text); stroke-width: 2; }
/* Une marque choisie (colonne d'un mois, part d'une catégorie) : elle reste pleine, les autres passent en retrait. */
.g--choix .g-marque:not([aria-current]) .g-barre { fill: var(--surface-2); }
.g--choix .g-marque[aria-current] .g-barre { fill: var(--text); stroke: none; }
.g--choix .g-marque:not([aria-current]) .g-arc, .g-legende.g--choix .g-legende__choix:not([aria-current]) { opacity: 0.35; }
.g--choix-signe .g-marque:not([aria-current]) .g-barre { opacity: 0.55; }
.g-legende__choix { cursor: pointer; transition: opacity var(--t-base) var(--ease-out); }
.g-zone { fill: transparent; }
.g-marque { outline: none; cursor: pointer; }
.g-marque:focus-visible .g-barre, .g-marque:focus-visible .g-arc { stroke: var(--text); }
.g-marque:hover .g-barre { opacity: 0.8; }
.g-ligne { fill: none; stroke: var(--g); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-aire { fill: var(--g); opacity: 0.1; }
.g-point { fill: var(--g); stroke: var(--surface); stroke-width: 2; }
.g-point--seul { stroke-width: 1; }
.g-croix { stroke: var(--text-2); stroke-width: 1; pointer-events: none; }
.g-arc { fill: none; stroke: var(--g); }
.g-marque:hover .g-arc { opacity: 0.8; }
.g-bulle { position: absolute; z-index: 3; top: 0; left: 0; min-width: calc(var(--tap) * 2); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-float); font-size: var(--fs-small); pointer-events: none; }
.g-bulle__titre { color: var(--text-2); font-size: var(--fs-caption); }
.g-bulle__ligne { display: flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.g-bulle__ligne span { color: var(--text-2); }
.g-cle { flex: none; display: inline-block; width: var(--s-3); height: 3px; border-radius: var(--r-pill); background: var(--g); }
.g-legende { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; color: var(--text-2); font-size: var(--fs-small); list-style: none; }
.g-legende li { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.g-legende--chiffres { flex-direction: column; flex-wrap: nowrap; }
.g-legende--chiffres li { display: flex; width: 100%; }
.g-legende--chiffres strong { color: var(--text); font-variant-numeric: tabular-nums; }
.g-legende__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-legende__part { min-width: 4ch; text-align: end; font-variant-numeric: tabular-nums; }
.g-anneau { position: relative; flex: none; align-self: center; }
/* Anneau à côté de sa liste (.graphique-liste : l'anneau sans légende, puis la .list de l'app) : l'anneau garde --anneau-cote,
   la liste prend le reste ; sous --anneau-cote-from de conteneur, la liste passe dessous sur toute la largeur, l'anneau centré. */
.graphique-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); min-width: 0; }
.graphique-liste > [data-graphique] { flex: 0 0 var(--anneau-cote); width: var(--anneau-cote); max-width: 100%; }
.graphique-liste > .list { flex: 1 1 calc(var(--anneau-cote-from) - var(--anneau-cote) - var(--s-4)); min-width: 0; }
.g-centre { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.g-centre strong { font-size: var(--fs-h2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.g-centre span { color: var(--text-2); font-size: var(--fs-caption); }
.g-chiffres summary { color: var(--text-2); font-size: var(--fs-small); cursor: pointer; }
.g-chiffres[open] summary { margin-block-end: var(--s-2); }
.ligne-mini { flex: none; width: calc(var(--tap) * 1.6); }

/* Dates : naviguer, choisir un jour, poser un créneau. */
.navigateur { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; border-radius: var(--r-btn); background: var(--surface-2); }
.navigateur .icon-btn { flex: none; width: var(--tap-small); height: var(--tap-small); }
.navigateur .icon-btn:disabled { opacity: 0.3; cursor: default; }
.navigateur__titre { display: inline-block; flex: 0 1 calc(var(--tap) * 2.6); min-width: 0; text-align: center; font-size: var(--fs-small); font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; }
.frise-jours { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; width: 100%; padding-block: 2px; }
.frise-jours__jour { display: flex; flex: 1 0 calc(var(--tap) * 1.05); flex-direction: column; align-items: center; gap: 2px; min-height: calc(var(--tap) * 1.35); justify-content: center; padding: 0; border: 0; border-radius: var(--r-btn); background: var(--surface); color: var(--text); font: var(--fw-titre) var(--fs-body) / 1.1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.frise-jours__jour:active { transform: scale(var(--press-scale)); }
.frise-jours__jour small { color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); }
.frise-jours__jour[data-passe] { opacity: 0.55; }
.frise-jours__jour[data-aujourdhui] small { color: var(--accent-text); }
.frise-jours__jour[aria-pressed='true'] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); opacity: 1; }
.frise-jours__jour[aria-pressed='true'] small { color: inherit; }
/* Défilante : sept jours et un bout de la veille (0,4) dans la largeur, calée sur aujourd'hui (calerFrise), molette de côté. */
.frise-jours--defilante > .frise-jours__jour { flex: 0 0 calc((100% - 7 * var(--s-1)) / 7.4); min-width: 0; }
/* Sept ronds, plafonnés : sur une grande largeur, ils ne s'écartent pas de 110 px (comme .ronds et --rounds-max). */
.jours-ronds { display: flex; justify-content: space-between; gap: var(--s-1); width: 100%; max-width: calc(var(--tap) * 7 + var(--s-4) * 6); }
.jour-rond { flex: 0 1 var(--tap); aspect-ratio: 1; max-width: var(--tap); min-width: 0; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.jour-rond:active { transform: scale(var(--press-scale)); }
.jour-rond[data-aujourdhui] { box-shadow: inset 0 0 0 2px var(--accent-text); }
.jour-rond[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
/* Toute la largeur de sa place ; dans une carte large, les jours s'élargissent mais gardent leur hauteur (max-height). */
.calendrier { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.calendrier__titre { font-weight: var(--fw-titre); text-transform: capitalize; }
.calendrier__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; container-type: inline-size; }
.calendrier__nom { padding-block: var(--s-1); color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); text-align: center; }
.calendrier__jour { position: relative; display: grid; place-items: center; height: min(calc((100cqw - 12px) / 7), calc(var(--tap) * 1.15)); min-width: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: var(--fw-texte) var(--fs-small) / 1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.calendrier__jour:active { transform: scale(var(--press-scale)); }
.calendrier__jour[data-hors] { color: var(--text-2); opacity: 0.45; }
.calendrier__jour[data-aujourdhui] { box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: var(--fw-titre); }
.calendrier__jour[data-marque]::after { content: ''; position: absolute; bottom: 14%; width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--g, var(--accent-text)); }
.calendrier__jour[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.calendrier__jour[aria-pressed='true']::after { background: var(--on-accent); }
.calendrier__jour[data-dans-plage] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); border-radius: 0; }
.menu-panneau--calendrier { padding: var(--inset-sm); }
.champ-date { position: relative; display: block; }
.champ-date .input { padding-inline-end: var(--tap); }
.champ-date > .icon-btn { position: absolute; top: 0; right: 0; }

/* Créneaux et horaires. */
.creneau { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--row-min); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.creneau__heure { flex: none; min-width: calc(var(--tap) * 1.1); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
.creneau__heure small { display: block; color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-texte); }
.creneau[data-etat='passe'] { opacity: 0.55; }
/* Créneau touchable en entier : remis à zéro comme un bouton, il rétrécit sous le doigt ; chevron au bout. */
button.creneau { width: 100%; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
button.creneau:active { transform: scale(var(--press-scale)); }
.creneau__heure--fixe { min-width: 5.5em; }
.creneau[data-etat='cours'] { box-shadow: inset 3px 0 0 var(--accent-text), var(--shadow-card); }
.horaires { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.horaires li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--cell-y) var(--inset-sm); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.horaires li[aria-current] { background: var(--surface-2); font-weight: var(--fw-titre); }
.horaires li span:last-child { color: var(--text-2); }
.horaires li[aria-current] span:last-child { color: var(--text); }

/* Planning : grille fixe à gauche, qui défile. */
.planning { --col: calc(var(--tap) * 1.5); overflow-x: auto; width: 100%; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.planning table { border-collapse: collapse; width: 100%; min-width: max-content; font-size: var(--fs-small); }
.planning th { padding: var(--cell-y) var(--s-2); color: var(--text-2); font-weight: var(--fw-nom); text-align: center; white-space: nowrap; }
.planning th[scope='row'] { position: sticky; left: 0; z-index: 1; padding-inline-start: var(--inset); background: var(--surface); color: var(--text); text-align: left; }
.planning thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.planning td { min-width: var(--col); padding: 2px; box-shadow: inset 0 1px 0 var(--line); text-align: center; }
.planning__ferie { background: var(--surface-2); }
.planning__bloc { --g: var(--data-1); display: block; padding: var(--s-1) var(--s-1); border-radius: var(--r-sm); background: color-mix(in srgb, var(--g) 16%, var(--surface)); box-shadow: inset 2px 0 0 var(--g); font-size: var(--fs-caption); font-weight: var(--fw-nom); white-space: nowrap; font-variant-numeric: tabular-nums; }
.planning__bloc--absence { --g: var(--data-autres); }
.planning__alerte { --g: var(--danger); }

/* Étapes : ronds reliés par un trait. */
.etapes { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.etape { position: relative; display: flex; gap: var(--s-3); padding-block-end: var(--group-gap); }
.etape:last-child { padding-block-end: 0; }
.etape:not(:last-child)::before { content: ''; position: absolute; top: var(--tap-small); bottom: 0; left: calc(var(--tap-small) / 2 - 1px); width: 2px; background: var(--surface-2); }
.etape[data-etat='fait']:not(:last-child)::before { background: var(--accent-text); }
.etape__rond { position: relative; display: grid; flex: none; place-items: center; width: var(--tap-small); height: var(--tap-small); border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
.etape__rond .icon { width: var(--icon-sm); height: var(--icon-sm); }
.etape[data-etat='fait'] .etape__rond { background: var(--accent); color: var(--on-accent); }
.etape[data-etat='ici'] .etape__rond { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent-text); color: var(--accent-text); }
.etape[data-etat='refuse'] .etape__rond { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
/* Commencée puis laissée de côté : rond cerclé d'ambre. */
.etape[data-etat='laisse'] .etape__rond { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); box-shadow: inset 0 0 0 2px var(--warn); color: var(--warn); }
button.etape__rond { border: 0; font-family: inherit; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
button.etape__rond:active { transform: scale(0.85); }
/* Carte de l'étape en cours, ouverte dans la frise (.etape--carte) : à la place du texte quand l'étape est en cours. */
.etape__ici { display: none; flex: 1; flex-direction: column; gap: var(--head-gap); min-width: 0; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.etape--carte[data-etat='ici'] > .etape__ici { display: flex; }
.etape--carte[data-etat='ici'] > .etape__texte { display: none; }
.etape__ici-tete { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etape__ici-sur { color: var(--accent-text); font-size: var(--fs-caption); font-weight: var(--fw-titre); letter-spacing: 0.06em; text-transform: uppercase; }
.etape__ici-nom { font-size: var(--fs-h2); font-weight: var(--fw-titre); line-height: 1.15; }
.etape__ici-detail { color: var(--text-2); font-size: var(--fs-small); }
/* Anneau qui voyage d'un rond à l'autre quand on choisit une autre étape (choisirEtape) : un transform, puis il s'efface. */
.etape__rond[data-attend-anneau] { box-shadow: none; }
.etapes__anneau { position: absolute; z-index: 1; width: var(--tap-small); height: var(--tap-small); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent-text); pointer-events: none; }
.etape__texte { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; padding-block-start: calc((var(--tap-small) - 1.5em) / 2); }
.etape__titre { font-weight: var(--fw-nom); }
/* Étape dont le texte est une phrase longue (consigne d'une recette, d'un mode d'emploi) : graisse courante, interligne de lecture. */
.etape__titre--phrase { font-weight: var(--fw-texte); line-height: 1.5; }
.etape[data-etat='avenir'] .etape__titre { color: var(--text-2); }
.etape__detail { color: var(--text-2); font-size: var(--fs-small); }
.etape__carte { margin-block-start: var(--s-1); }
.etapes--horizontales { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
.etapes--horizontales .etape { flex: 1 0 calc(var(--tap) * 2); flex-direction: column; gap: var(--s-1); padding-block-end: 0; padding-inline-end: var(--s-2); }
.etapes--horizontales .etape:not(:last-child)::before { top: calc(var(--tap-small) / 2 - 1px); bottom: auto; left: var(--tap-small); right: 0; width: auto; height: 2px; }
.etapes--horizontales .etape__texte { padding-block-start: 0; }
.etape-cochable { position: relative; align-items: flex-start; }
.etape-parallele { display: flex; flex-direction: column; gap: var(--head-gap); margin-block-start: var(--group-gap); margin-inline-start: var(--s-4); padding-inline-start: var(--s-3); box-shadow: inset 2px 0 0 var(--surface-2); }
.etape-parallele > .etapes .etape:last-child { padding-block-end: 0; }
/* Étape cochable : le numéro, puis la coche une fois faite, au même endroit ; l'un s'efface, l'autre surgit (transform, opacity). */
.etape__rond > .etape__num, .etape__rond > .etape__coche { grid-area: 1 / 1; transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast); }
.etape__rond > .etape__coche { opacity: 0; transform: scale(0.6); }
.etape[data-etat='fait'] .etape__rond > .etape__coche { opacity: 1; transform: none; }
.etape[data-etat='fait'] .etape__rond > .etape__num { opacity: 0; transform: scale(0.6); }
/* Sous le texte d'une étape, une seule zone : son minuteur (il porte la durée), puis une phrase avec son icône. */
.etape-plus { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-block-start: var(--head-gap); }
.etape-info { display: inline-flex; align-items: flex-start; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-small); }
.etape-info .icon { flex: none; width: 1.1em; height: 1.1em; margin-block-start: 0.15em; }
.etape-parallele__titre { color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-nom); }

/* Assistant : sommaire, étape en cours, précédent et suivant. */
.assistant { display: flex; flex-direction: column; gap: var(--block-gap); width: 100%; }
.assistant__tete { display: flex; align-items: center; gap: var(--s-2); }
.assistant__compte { flex: none; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.assistant__tete .segments { flex: 1; }
.assistant__corps { display: flex; flex-direction: column; gap: var(--head-gap); }
.assistant__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }

/* Colonnes à glisser. */
.colonnes { display: flex; gap: var(--s-3); overflow-x: auto; width: 100%; padding-block-end: var(--s-1); align-items: flex-start; }
.colonne { display: flex; flex: 1 0 calc(var(--tap) * 5); flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-2); border-radius: var(--r-md); background: var(--surface-2); }
.colonne[data-survol] { box-shadow: inset 0 0 0 2px var(--accent-text); }
.colonne__tete { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.colonne__nombre { color: var(--text-2); font-weight: var(--fw-texte); font-variant-numeric: tabular-nums; }
.colonne__cartes { display: flex; flex-direction: column; gap: var(--s-2); min-height: var(--tap); }
.carte-glisse { padding: var(--inset-sm); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-card); cursor: grab; touch-action: none; user-select: none; }
.carte-glisse.saisi { z-index: 5; box-shadow: var(--shadow-float); cursor: grabbing; }
.dates-liste { display: flex; flex-direction: column; gap: var(--list-gap); width: 100%; }
.date-ligne { display: flex; align-items: center; gap: var(--s-3); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.date-ligne__date { display: flex; flex: none; flex-direction: column; align-items: center; min-width: var(--tap); font-size: var(--fs-h3); font-weight: var(--fw-titre); line-height: 1.1; }
.date-ligne__date small { color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); }
.parcours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); margin: 0; width: 100%; }
.parcours dt { color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.parcours dd { margin: 0; }
/* En grand, pour un site vitrine : dates lisibles, intitulés en titre, plus d'air entre les lignes. */
.parcours--grand { gap: var(--s-5) var(--s-6); }
.parcours--grand dt { padding-block-start: 0.35em; font-size: var(--fs-body); }
.parcours--grand dd { font-size: var(--fs-h2); font-weight: var(--fw-nom); line-height: 1.25; }
.parcours--grand dd small { display: block; margin-block-start: var(--s-1); color: var(--text-2); font-size: var(--fs-body); font-weight: var(--fw-texte); }

/* Cartes et médias. */
.avatar { --c: var(--data-1); position: relative; display: grid; flex: none; place-items: center; overflow: hidden; width: var(--pastille); height: var(--pastille); border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--text); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar--grand { width: calc(var(--pastille) * 2); height: calc(var(--pastille) * 2); font-size: var(--fs-h2); }
.avatars { display: inline-flex; }
.avatars .avatar + .avatar { margin-inline-start: calc(var(--s-2) * -1); box-shadow: 0 0 0 2px var(--surface); }
.couverture { --a: var(--data-1); --b: var(--data-3); position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; width: 100%; border-radius: var(--r-md); background: color-mix(in srgb, var(--a) 40%, var(--surface)); color: var(--text); }
.couverture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.couverture > .icon { width: 28%; height: auto; aspect-ratio: 1; opacity: 0.8; }
.couverture--carre { aspect-ratio: 1; }
.couverture--mini { flex: none; aspect-ratio: 1; width: var(--tap); border-radius: var(--r-sm); }
.couverture--mini > .icon { width: 60%; }
.couverture__badge { position: absolute; right: var(--s-1); bottom: var(--s-1); display: grid; place-items: center; width: var(--tap-small); height: var(--tap-small); border-radius: 50%; background: var(--surface); }
.couverture__badge .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Dessin de métier à la place de la photo (assiette de Cuisine, silhouette…), dans .couverture__dessin : entier, avec 6 % de marge.
   Grande (16 / 9) : le dessin est recadré, plus large que haut de cadre et décalé ; l'app règle --dessin-l, --dessin-x et --dessin-y
   selon la place. Ronde : taille d'une pastille, sans fond, pour une ligne. Vignette : carré d'une ligne à choisir. */
.couverture > .couverture__dessin { position: absolute; inset: 6%; width: 88%; height: 88%; }
.couverture--grande { aspect-ratio: 16 / 9; }
.couverture--grande > .couverture__dessin { inset: var(--dessin-y, -14%) auto auto; inset-inline-start: var(--dessin-x, 22%); width: var(--dessin-l, 92%); height: auto; aspect-ratio: 1; }
.couverture--ronde { flex: none; aspect-ratio: 1; width: var(--pastille); border-radius: 50%; background: transparent; }
.couverture--ronde > .couverture__dessin { inset: 0; width: 100%; height: 100%; }
.couverture--ronde > img { border: var(--card-edge) solid var(--line); border-radius: 50%; }
.couverture--vignette { flex: none; aspect-ratio: 1; width: calc(var(--tap) * 1.7); border-radius: var(--r-sm); }
/* Boutons posés sur la photo d'en-tête (retour à gauche, favori ou menu à droite) : ronds, sur fond surface, pour rester lisibles
   sur n'importe quelle image. La barre se pose dans la couverture ou dans le cadre qui la porte (position: relative). */
.couverture__barre { position: absolute; inset: calc(env(safe-area-inset-top, 0px) + var(--s-3)) var(--inset) auto; z-index: 1; display: flex; justify-content: space-between; gap: var(--s-2); }
.couverture__barre .icon-btn, .couverture__barre .faveur { border: var(--card-edge) solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); }
.couverture__barre .icon-btn { color: var(--text); }
.carte-media { position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform var(--t-press) var(--ease-out); }
a.carte-media:active { transform: scale(var(--press-scale)); }
.carte-media .couverture { border-radius: 0; }
.carte-media__corps { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--inset-sm) var(--inset); }
.carte-media__titre { font-weight: var(--fw-titre); line-height: 1.25; }
.carte-media__favori { position: absolute; z-index: 1; top: var(--s-1); right: var(--s-1); background: var(--surface); }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--tap) * 3.4)), 1fr)); gap: var(--s-3); width: 100%; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); width: 100%; }
.bento__large { grid-column: 1 / -1; }
/* Carte teintée par sa catégorie (--mc : couleur-dN ou sur mesure), et contour de celle qu'on suit (data-suivi). */
.carte-teintee { background: color-mix(in srgb, var(--mc, var(--accent-text)) 14%, var(--surface)); }
.carte-teintee[data-suivi], .card[data-suivi] { box-shadow: inset 0 0 0 2px var(--accent-text), var(--shadow-card); }
/* Couleurs sobres (data-palette="sobre" sur la racine, réglage « Couleurs » de web/apparence.js) : les couleurs de
   catégorie passent à l'encre secondaire, l'accent reste seul. Graphiques et minuteurs gardent les leurs. */
[data-palette='sobre'] :is(.badge--categorie, .chip .point-couleur, .carte-teintee, .mesure) { --mc: var(--text-2); }
/* Pastille « i » au coin d'une icône : il y a plus à lire (une fiche s'ouvre au toucher). */
.avec-info { position: relative; display: inline-grid; flex: none; }
.avec-info__i { position: absolute; top: calc(var(--s-1) * -1); right: calc(var(--s-1) * -1); display: grid; place-items: center; width: var(--s-4); height: var(--s-4); border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface); font: var(--fw-titre) var(--fs-caption) / 1 var(--font); pointer-events: none; }
.carte-appel { display: flex; flex-direction: column; gap: var(--head-gap); padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.carte-appel__sur { color: var(--accent-text); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.porte { --c: var(--accent-text); display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--inset); border-radius: var(--r-lg); background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: inherit; text-decoration: none; transition: transform var(--t-press) var(--ease-out); }
.porte:active { transform: scale(var(--press-scale)); }
.porte__symbole { font-size: var(--fs-h1); line-height: 1; }
.porte__titre { font-size: var(--fs-h3); font-weight: var(--fw-titre); }
.titre-carte { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-titre); }
.fiche-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); width: 100%; }
.fiche-tete__texte { display: flex; flex: 1 1 calc(var(--tap) * 4); flex-direction: column; gap: var(--s-1); min-width: 0; }
.fiche-tete__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.metas { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; color: var(--text-2); font-size: var(--fs-small); list-style: none; }
.metas > * { display: inline-flex; align-items: center; gap: var(--s-1); }
.metas .icon { width: 1.1em; height: 1.1em; }
.faveur { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.faveur:active { transform: scale(0.92); }
.faveur .icon { transition: transform var(--t-slow) var(--ease-out); }
.faveur[aria-pressed='true'] { color: var(--danger); }
.faveur[aria-pressed='true'] .icon { fill: currentColor; }
.maintenir { position: relative; overflow: hidden; }
.maintenir__plein { position: absolute; inset: 0; background: color-mix(in srgb, currentColor 22%, transparent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* Bouton qui valide : le texte s'efface vers le haut, une grande coche paraît, puis (évènement « valide ») la barre de repos
   monte à sa place, de la même taille ; à la fin elle redescend et le texte revient d'en bas (lancerBoutonBarre). */
.bouton-barre { position: relative; overflow: hidden; width: 100%; min-height: var(--tap-block); border-radius: var(--r-btn); }
.bouton-barre > .btn { width: 100%; }
.bouton-barre > .btn:disabled { opacity: 1; }
.bouton-barre__libelle { display: inline-flex; align-items: center; gap: inherit; }
.bouton-barre__coche { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.bouton-barre__coche .icon { width: calc(var(--icon) * 1.75); height: calc(var(--icon) * 1.75); stroke-width: 3; }
.bouton-barre > .bouton-barre__barre { position: absolute; inset: 0; z-index: 1; min-height: 0; }
.copier { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; padding: var(--inset-sm); border-radius: var(--r-md); background: var(--surface-2); }
/* Le texte se sélectionne et défile dans 120 au plus (export de Clepso : SelectableText dans maxHeight 120). */
.copier__texte { max-height: calc(var(--s-6) * 3.75); overflow: auto; overscroll-behavior: contain; font-size: var(--fs-small); white-space: pre-wrap; user-select: text; }
.cle-copie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; padding: var(--s-1) var(--s-1) var(--s-1) var(--inset-sm); border-radius: var(--r-btn); background: var(--surface-2); }
.cle-copie code { overflow-wrap: anywhere; font-size: var(--fs-body); font-weight: var(--fw-titre); letter-spacing: 0.04em; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px var(--s-1); border-radius: calc(5px * var(--r-k)); background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line-strong); font: var(--fw-nom) var(--fs-small) / 1.3 var(--font); text-align: center; }
/* Fond blanc fixe, dans tous les thèmes : un code QR ne se lit que foncé sur clair. */
.qr { display: inline-block; padding: var(--s-2); border-radius: var(--r-sm); background: #fff; line-height: 0; }
.qr svg { display: block; width: var(--qr, calc(var(--tap) * 3)); height: auto; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap) * 2), 1fr)); gap: var(--s-1); width: 100%; }
.galerie__photo { overflow: hidden; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-sm); background: none; cursor: zoom-in; }
.galerie__photo .couverture { height: 100%; border-radius: 0; }
dialog.visionneuse { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--scrim); }
dialog.visionneuse::backdrop { background: var(--scrim); }
.visionneuse__image { position: absolute; inset: var(--tap) var(--s-3); display: grid; place-items: center; }
.visionneuse__image .couverture { max-width: var(--measure); border-radius: var(--r-sm); }
/* Une photo, ou un dessin (schéma du métier, pictogramme) agrandi sur une surface claire : tient dans l'écran sans être étiré. */
.visionneuse__image > img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.visionneuse__image > svg:not(.icon), .visionneuse__image > .visionneuse__dessin { display: grid; place-items: center; width: min(100%, var(--measure), 100cqh); aspect-ratio: 1; height: auto; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); }
.visionneuse__image { container-type: size; }
.visionneuse__dessin > svg { width: 100%; height: 100%; }
.visionneuse__fermer { position: absolute; z-index: 1; top: var(--s-1); right: var(--s-1); background: var(--surface); color: var(--text); }
.video { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); cursor: pointer; }
.video__cadre { display: block; aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--r-md); }
.video__lecture { position: relative; display: grid; place-items: center; width: var(--tap-block); height: var(--tap-block); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-float); transition: transform var(--t-press) var(--ease-out); }
.video:active .video__cadre { display: block; aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--r-md); }
.video__lecture { transform: scale(var(--press-scale)); }
.lecteur { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.lecteur__tete { display: flex; align-items: center; gap: var(--s-3); }
.lecteur__titres { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lecteur__titres button { display: flex; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; align-items: center; }
.lecteur__titres button[aria-current] { color: var(--accent-text); font-weight: var(--fw-titre); }
.lecteur__titres span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
.bulles { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.bulle-msg { max-width: 82%; align-self: flex-start; padding: var(--s-2) var(--inset-sm); border-radius: var(--r-md); border-end-start-radius: calc(4px * var(--r-k)); background: var(--surface); box-shadow: var(--shadow-card); }
.bulle-msg--moi { align-self: flex-end; border-radius: var(--r-md); border-end-end-radius: calc(4px * var(--r-k)); background: var(--accent); color: var(--on-accent); }
.bulle-msg__date { display: block; margin-block-start: 2px; color: inherit; font-size: var(--fs-caption); opacity: 0.7; }
.comparateur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.comparateur__tete { padding: var(--inset-sm); font-weight: var(--fw-titre); box-shadow: inset 0 -1px 0 var(--line); }
.comparateur__ligne { grid-column: 1 / -1; padding: var(--s-1) var(--inset-sm) 0; color: var(--text-2); font-size: var(--fs-caption); }
.comparateur__valeur { padding: 2px var(--inset-sm) var(--s-2); box-shadow: inset 0 -1px 0 var(--line); font-variant-numeric: tabular-nums; }
.arbre { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; width: 100%; }
.arbre ul { margin: 0; padding: 0 0 0 var(--s-4); list-style: none; box-shadow: inset 1px 0 0 var(--line); margin-inline-start: var(--s-4); }
.arbre summary, .arbre__feuille { display: flex; align-items: center; gap: var(--s-1); min-height: var(--tap); padding-inline: var(--s-1); border-radius: var(--r-sm); list-style: none; cursor: pointer; }
.arbre summary::-webkit-details-marker { display: none; }
.arbre summary > .icon:first-child { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-2); transition: transform var(--t-base) var(--ease-out); transform: rotate(-90deg); }
.arbre details[open] > summary > .icon:first-child { transform: none; }
.arbre__nombre { margin-inline-start: auto; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pas-a-pas { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.pas-a-pas__piste { display: flex; transition: transform var(--t-slow) var(--ease-out); }
.pas-a-pas__page { display: flex; flex: 0 0 100%; flex-direction: column; justify-content: center; gap: var(--s-2); min-height: calc(var(--tap) * 5); padding: var(--inset); font-size: var(--fs-h3); }
.pas-a-pas__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--inset-sm); }
/* En plein écran (mode cuisson de Cuisine, séance de sport) : un pas par écran, sur le fond de la page. En haut, fermer et les
   segments ; au milieu le pas, centré, qui défile s'il est long ; en bas Précédent (un tiers) et Suivant (deux tiers).
   L'app lui donne sa place (position: fixed; inset: 0, ou une fenêtre). Les pas se remplacent (hidden) : poserPas de objets.js. */
.pas-a-pas.pas-a-pas--plein { height: 100%; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
.pas-a-pas__tete { flex: none; width: 100%; max-width: var(--measure); margin-inline: auto; padding: calc(env(safe-area-inset-top, 0px) + var(--s-2)) var(--gutter) var(--s-1); }
.pas-a-pas__tete .segments { flex: 1; }
.pas-a-pas--plein > .pas-a-pas__piste { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; transition: none; touch-action: pan-y pinch-zoom; }
.pas-a-pas--plein .pas-a-pas__page { position: absolute; inset: 0; justify-content: safe center; gap: var(--s-4); max-width: var(--measure); min-height: 0; margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-7); overflow-y: auto; }
/* Un pas qui est une liste (ingrédients à sortir) part du haut ; le dernier est centré ; un pas en deux colonnes prend la page large. */
.pas-a-pas--plein .pas-a-pas__page--haut { justify-content: flex-start; padding-block-end: var(--s-5); }
.pas-a-pas--plein .pas-a-pas__page--fin { align-items: center; text-align: center; }
.pas-a-pas--plein .pas-a-pas__page--large { max-width: var(--measure-wide); }
.pas-a-pas__consigne { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-nom); line-height: 1.4; text-wrap: pretty; }
.pas-a-pas--plein > .pas-a-pas__pied { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, 2fr); flex: none; width: 100%; max-width: var(--measure); margin-inline: auto; padding: var(--s-2) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--s-3)); }
@media print { .pas-imprimer, .tabbar, .btn, .icon-btn { display: none !important; } }

/* Parcours et questionnaires. */
.question { display: flex; flex-direction: column; justify-content: space-between; gap: var(--block-gap); width: 100%; min-height: calc(var(--tap) * 8); padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.question__tete { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.question__emoji { display: inline-block; font-size: var(--fs-num); line-height: 1; }
.question__emoji .icon, .porte__symbole .icon { width: 1em; height: 1em; }
.question__sur { color: var(--accent-text); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.reponses { display: flex; flex-direction: column; gap: var(--s-2); }
.reponse { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap-block); padding: var(--s-2) var(--inset); border: 0; border-radius: var(--r-btn); background: var(--surface-2); color: var(--text); font: var(--fw-nom) var(--fs-body) / 1.25 var(--font); cursor: pointer; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base); }
.reponse:active { transform: scale(var(--press-scale)); transition-duration: var(--t-press); }
.reponse--discrete { min-height: var(--tap); background: none; color: var(--text-2); }
.reponse[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.reponses[data-fige] .reponse { pointer-events: none; }
.reponses[data-fige] .reponse:not([aria-pressed='true']) { opacity: 0.4; }
.reponse[data-juste='oui'] { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); opacity: 1 !important; }
.reponse[data-juste='non'] { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); opacity: 1 !important; }
.verdict { padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-small); }
.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--s-2); width: 100%; }
.duel__ou { align-self: center; color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-titre); }
.duel .reponse { flex-direction: column; min-height: calc(var(--tap) * 3); }
.duel__symbole { font-size: var(--fs-h1); line-height: 1; }
.pile-cartes { position: relative; display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.pile-cartes__zone { position: relative; isolation: isolate; height: calc(var(--tap) * 6); touch-action: pan-y; }
.carte-jet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); overflow: hidden; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-float); text-align: center; cursor: grab; user-select: none; }
.carte-jet + .carte-jet { z-index: -1; transform: scale(0.95) translateY(var(--s-2)); box-shadow: var(--shadow-card); }
.carte-jet__tampon { position: absolute; top: var(--s-3); padding: 2px var(--s-2); border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px currentColor; font-weight: var(--fw-titre); opacity: 0; }
.carte-jet__tampon--oui { left: var(--s-3); color: var(--ok); }
.carte-jet__tampon--non { right: var(--s-3); color: var(--danger); }
.pile-cartes__boutons { display: flex; justify-content: center; gap: var(--s-3); }
.bouton-rond { display: grid; place-items: center; width: var(--tap-block); height: var(--tap-block); padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-2); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.bouton-rond:active { transform: scale(0.92); }
.bouton-rond--oui { color: var(--ok); }
.bouton-rond--non { color: var(--danger); }
.retournable { position: relative; display: grid; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 800px; }
.retournable__face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: calc(var(--tap) * 4); padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); text-align: center; backface-visibility: hidden; transition: transform var(--t-toggle) var(--ease-out); }
.retournable__face--dos { background: var(--accent); color: var(--on-accent); }
.retournable__face--devant { transform: rotateY(180deg); }
.retournable[aria-pressed='true'] .retournable__face--dos { transform: rotateY(-180deg); }
.retournable[aria-pressed='true'] .retournable__face--devant { transform: none; }
.visages { display: flex; justify-content: space-between; gap: var(--s-1); width: 100%; }
.visage { flex: 1; min-height: var(--tap-block); padding: 0; border: 0; border-radius: var(--r-btn); background: var(--surface-2); font-size: var(--fs-h2); cursor: pointer; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base); }
.visages[data-note] .visage:not([aria-checked='true']) { opacity: 0.45; }
.visage[aria-checked='true'] { box-shadow: inset 0 0 0 2px var(--accent-text); transform: scale(1.08); }
.confetti { position: fixed; z-index: 60; top: 0; left: 0; width: var(--s-2); height: var(--s-2); border-radius: calc(2px * var(--r-k)); background: var(--g); pointer-events: none; }

/* Site vitrine. */
.site-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); width: 100%; min-height: var(--tabbar); padding: var(--s-2) var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); transition: transform var(--t-slow) var(--ease-out); }
.site-tete[data-cache] { transform: translateY(-110%); }
.site-tete--fixe { position: sticky; z-index: 10; top: 0; }
.site-tete__logo { margin-inline-end: auto; font-weight: var(--fw-titre); color: inherit; text-decoration: none; }
.site-tete__liens { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-small); }
.site-tete__liens a { color: var(--text-2); font-weight: var(--fw-nom); text-decoration: none; }
.site-tete__liens a[aria-current] { color: var(--text); box-shadow: 0 2px 0 var(--accent-text); }
.site-menu summary { display: grid; place-items: center; width: var(--tap); height: var(--tap); list-style: none; cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu__corps { display: flex; flex-direction: column; gap: var(--s-1); padding-block: var(--s-2); }
.site-menu__corps a { padding-block: var(--s-1); color: inherit; font-size: var(--fs-h3); font-weight: var(--fw-titre); text-decoration: none; }
.site-pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap) * 3), 1fr)); gap: var(--s-5); width: 100%; padding: var(--s-5) var(--inset); border-radius: var(--r-md); background: var(--surface); }
.site-pied__colonne { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-small); }
.site-pied__colonne strong { margin-block-end: var(--s-1); }
.site-pied__colonne a { color: var(--text-2); text-decoration: none; }
.site-pied__bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-block-start: var(--s-3); box-shadow: inset 0 1px 0 var(--line); color: var(--text-2); font-size: var(--fs-caption); }
.site-pied__nom { grid-column: 1 / -1; overflow: hidden; font-size: var(--fs-display); font-weight: var(--fw-titre); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.heros { position: relative; display: flex; flex-direction: column; gap: var(--block-gap); width: 100%; }
.heros__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.heros__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.heros--panneau .couverture { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.heros--panneau .heros__texte { position: relative; z-index: 1; margin-block-start: calc(var(--s-7) * -1); margin-inline: var(--s-3); padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-float); }
.heros--plein { justify-content: center; min-height: calc(var(--tap) * 8); padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.heros--plein .heros__texte { align-items: center; }
/* Tête d'une page de produit (repris de jsv) : la marque (logo et nom), l'accroche, un texte court. Centrée sous 720 px de place. */
.heros--produit { container-type: inline-size; }
.heros--produit > .heros__texte { gap: var(--s-4); }
.heros__marque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.heros__accroche { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-nom); line-height: 1.2; }
.heros__detail { max-width: 56ch; margin: 0; color: var(--text-2); }
@container (max-width: 719px) { .heros--produit > .heros__texte { align-items: center; text-align: center; } .heros--produit .heros__marque { justify-content: center; } }
@media (min-width: 900px) { .heros--panneau { flex-direction: row; align-items: center; } .heros--panneau .couverture { flex: 1.3; } .heros--panneau .heros__texte { flex: 1; margin: 0 0 0 calc(var(--s-7) * -1); } }
.titre-revele { display: flex; flex-direction: column; font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-titre); line-height: 1.02; letter-spacing: calc(-0.03em * var(--track-k)); }
/* Chaque ligne est découpée pour la révélation : une marge basse garde les jambages (p, g, y), reprise par la marge
   négative pour ne pas écarter les lignes ; une ligne ne se replie pas (le titre est coupé en lignes par l'auteur). */
.titre-revele > span { display: block; overflow: hidden; padding-block-end: 0.1em; margin-block-end: -0.1em; white-space: nowrap; }
.titre-revele > span > span { display: block; animation: socle-revele var(--t-toggle) var(--ease-out) backwards; }
.titre-revele > span:nth-child(2) > span { animation-delay: 80ms; }
.titre-revele > span:nth-child(3) > span { animation-delay: 160ms; }
@keyframes socle-revele { from { transform: translateY(110%); } }
.section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); width: 100%; }
[data-apparait] { opacity: 0; transform: translateY(var(--s-3)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-apparait='vu'] { opacity: 1; transform: none; }
/* Capture qui se redresse en arrivant (téléphone d'un site vitrine) : elle monte, tourne et grandit jusqu'à sa place ;
   sa légende suit un temps après (.apparait--apres). Toujours transform et opacity. */
.apparait--redresse[data-apparait]:not([data-apparait='vu']) { transform: translateY(var(--s-7)) rotate(-6deg) scale(0.9); }
.apparait--redresse[data-apparait] { transition-duration: calc(var(--t-slow) * 2); }
.apparait--apres[data-apparait] { transition-delay: calc(var(--t-slow) * 0.8); }
/* Entrée échelonnée (ouverture d'une page, d'une section) : les [data-apparait] d'un [data-apparait-suite] arrivent
   ensemble, l'un après l'autre, de plus bas (s5) ; --rang est posé par web/apparitions.js, --t-rang sépare deux rangs. */
[data-apparait-suite] [data-apparait]:not([data-apparait='vu']) { transform: translateY(var(--s-5)); }
[data-apparait-suite] [data-apparait='vu'] { transition-delay: calc(var(--rang, 0) * var(--t-rang)); }
.defilant { overflow: hidden; width: 100%; padding-block: var(--s-2); }
.defilant__piste { display: flex; width: max-content; animation: socle-defile 24s linear infinite; }
.defilant:hover .defilant__piste { animation-play-state: paused; }
.defilant__piste > span { padding-inline: var(--s-3); font-size: var(--fs-h2); font-weight: var(--fw-titre); white-space: nowrap; }
@keyframes socle-defile { to { transform: translateX(-50%); } }
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tap) * 5)), 1fr)); gap: var(--s-3); width: 100%; }
.tarif { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.tarif__prix { font-size: var(--fs-num); font-weight: var(--fw-titre); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tarif__prix small { color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-texte); }
.tarif .metas { flex-direction: column; flex: 1; }
.tarif--principal { box-shadow: inset 0 0 0 2px var(--accent-text), var(--shadow-card); }
.carrousel { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.carrousel__piste { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrousel__piste > * { flex: 0 0 100%; scroll-snap-align: start; }
.carrousel__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.temoignage { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.temoignage > .icon { color: var(--text-2); }
.temoignage p { font-size: var(--fs-h3); line-height: 1.35; }
.temoignage footer { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-small); }
.appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; padding: var(--s-5) var(--inset); border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); }
.appel__texte { flex: 1 1 calc(var(--tap) * 5); display: flex; flex-direction: column; gap: var(--s-1); }
.appel:not(.appel--simple) .btn { --b: var(--on-accent); color: var(--accent); }
/* Appel final sans carte (fin d'une page de produit, repris de jsv) : logo, phrase, bouton principal, adresse en petit. Centré sous 720 px de place. */
.appel--simple { container-type: inline-size; display: grid; justify-items: start; gap: var(--s-3); padding: var(--section-gap) 0; border-radius: 0; background: none; color: inherit; }
.appel__phrase { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-titre); line-height: 1.15; }
@container (max-width: 719px) { .appel--simple > * { justify-self: center; text-align: center; } }
.actions-rapides { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap) * 1.8), 1fr)); gap: var(--s-2); width: 100%; }
.action-rapide { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-1); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); color: inherit; font-size: var(--fs-small); font-weight: var(--fw-nom); text-decoration: none; transition: transform var(--t-press) var(--ease-out); }
.action-rapide:active { transform: scale(var(--press-scale)); }
.coordonnees { display: flex; flex-direction: column; gap: var(--s-1); font-style: normal; }
.reseaux { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.carte-acces { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-md); background: var(--surface-2); }
.bio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tap) * 5)), 1fr)); align-items: center; gap: var(--s-4); width: 100%; }
.bio__texte { display: flex; flex-direction: column; gap: var(--s-2); }
/* Captures d'un produit avec leur légende (repris de jsv) : la capture d'un côté, puis de l'autre, une fois sur deux, dès 720 px de
   place ; en dessous, la capture puis sa légende, centrées. La capture ne dépasse pas la colonne de côté (--col-side). */
.presentations { container-type: inline-size; display: grid; gap: var(--section-gap); width: 100%; }
.bio--capture { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-4); margin: 0; text-align: center; }
.bio--capture > :first-child { width: min(66cqw, var(--col-side)); }
.bio--capture > .bio__texte { color: var(--text-2); }
.bio--capture > .bio__texte > strong { color: var(--text); font-size: var(--fs-h2); font-weight: var(--fw-titre); line-height: 1.15; }
@container (min-width: 720px) {
  .bio--capture { grid-template-columns: min(38cqw, var(--col-side)) minmax(0, 1fr); justify-items: stretch; gap: var(--s-7); text-align: start; }
  .bio--capture > :first-child { width: auto; }
  .presentations > .bio--capture:nth-child(even) { grid-template-columns: minmax(0, 1fr) min(38cqw, var(--col-side)); }
  .presentations > .bio--capture:nth-child(even) > :first-child { order: 1; }
}
.presentation { display: flex; flex-direction: column; gap: var(--block-gap); width: 100%; }
/* L'adresse rétrécit d'abord avec la largeur (de fs-h1 à fs-h3) pour tenir sur une ligne ; coupée en dernier recours. */
.contact-grand { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%; }
.contact-grand a { max-width: 100%; overflow-wrap: anywhere; color: inherit; font-size: clamp(var(--fs-h3), 6.2cqi, var(--fs-h1)); font-weight: var(--fw-titre); line-height: 1.1; }
.inclinable { transition: transform var(--t-base) var(--ease-out); transform-style: preserve-3d; }
.liste-grande { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.liste-grande a { display: block; padding-block: var(--s-2); box-shadow: inset 0 -1px 0 var(--line); color: inherit; font-size: var(--fs-h2); font-weight: var(--fw-titre); text-decoration: none; transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) { .liste-grande a:hover { transform: translateX(var(--s-2)); } }
.empiles { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.empiles > * { position: sticky; top: var(--s-3); }

/* Écrans types. */
.ecran-connexion { display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); width: 100%; max-width: var(--login-w); margin-inline: auto; padding: var(--s-5) var(--inset); }
.ecran-connexion--plein { min-height: 100dvh; padding-block: max(var(--s-5), env(safe-area-inset-top, 0px)) max(var(--s-5), env(safe-area-inset-bottom, 0px)); }
.ecran-connexion__marque { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
/* Logo de marque clair ou sombre selon le thème : deux images, .logo-theme__clair et .logo-theme__sombre. */
.logo-theme__sombre { display: none; }
:root[data-theme='dark'] .logo-theme__clair { display: none; }
:root[data-theme='dark'] .logo-theme__sombre { display: inline-block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .logo-theme__clair { display: none; } :root:not([data-theme='light']) .logo-theme__sombre { display: inline-block; } }
.logo-rond { display: grid; place-items: center; width: var(--tap-block); height: var(--tap-block); border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); }
.page-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: calc(var(--tap) * 7); padding: var(--inset); text-align: center; width: 100%; }
.page-centre__code { color: var(--text-2); font-size: var(--fs-num); font-weight: var(--fw-phrase); font-variant-numeric: tabular-nums; }
.prose { display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--measure); width: 100%; }
.prose h2 { margin-block-start: var(--s-3); font-size: var(--fs-h2); }
.prose ul { margin: 0; padding-inline-start: var(--s-4); }
.prose a { color: var(--accent-text); }
.prose .retour { color: var(--text-2); }
.prose figure { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.prose figure > img { width: 100%; height: auto; border-radius: var(--r-md); }
.prose figcaption { color: var(--text-2); font-size: var(--fs-small); }
/* Texte saisi par quelqu'un : ses retours à la ligne restent. */
.prose--saisi, .prose .saisi { white-space: pre-line; }
/* Page de texte autonome (mentions légales, confidentialité), hors coquille : ses marges haute et basse, des titres plus
   détachés du paragraphe qui précède, le lien de retour (.retour) en tête ou en fin. */
.page--seule { padding-block: calc(var(--s-7) + env(safe-area-inset-top, 0px)) calc(var(--s-7) + env(safe-area-inset-bottom, 0px)); }
.page--seule.prose h2 { margin-block-start: var(--s-5); }
.page--seule.prose > .retour { align-self: flex-start; }
.page--seule.prose > .retour:last-child { margin-block-start: var(--s-5); }
.prix { font-size: var(--fs-h3); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
.recap { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; padding: var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.recap dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); margin: 0; }
.recap dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.recap__total { font-size: var(--fs-h3); font-weight: var(--fw-titre); }
.frame--ecran { display: flex; flex-direction: column; gap: var(--block-gap); width: 100%; }

/* Minuteurs, suite : repos entre deux séries, pilule visible partout, intervalles. */
.repos { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); overflow: hidden; width: 100%; min-height: var(--tap-block); padding-inline: var(--inset) var(--s-1); border-radius: var(--r-btn); background: var(--surface-2); }
.repos__plein { position: absolute; inset: 0; color: var(--mc, var(--accent-text)); }
.repos__plein.temps-barre { height: auto; border-radius: 0; background: none; }
.repos__plein.temps-barre i { background: color-mix(in srgb, currentColor 24%, transparent); border-radius: 0; }
.repos__texte, .repos__actions { position: relative; display: flex; align-items: center; gap: var(--s-1); }
.repos__temps { font-size: var(--fs-h3); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
/* Ligne de détail du repos global (ligne : l'exercice, la dernière série), coupée si la place manque. */
.repos__texte { flex: 1 1 auto; min-width: 0; }
.repos__actions { flex: none; }
.repos__ligne { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repos--bandeau { border-radius: 0; }
/* Bicolore : la couleur recule vers le début et le temps change d'encre exactement à sa limite. La couche porte une copie
   du texte (posée par suivreMinuteurs) et glisse, sa copie glisse à l'envers : deux transform, rien d'autre. Les boutons
   restent au-dessus, sur leur fond (surface-2, lisible sur les deux parts). Texte de la partie vide : la version foncée de la couleur en clair, le texte en sombre. */
.repos--bicolore { background: var(--surface); box-shadow: inset 0 0 0 var(--card-edge) var(--line); color: light-dark(var(--mc-fonce, var(--accent-text)), var(--text)); }
.repos--bicolore .repos__actions { z-index: 2; }
.repos[data-agrandir] { cursor: pointer; }
.repos__couche { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--mc, var(--accent)); color: var(--surface); pointer-events: none; }
.repos__copie { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-inline: var(--inset) var(--s-1); }
/* Les boutons recopiés dans la copie, invisibles : ils lui donnent la même place qu'au vrai texte. */
.repos__actions--place { visibility: hidden; }
/* Bandeau global (montrerReposGlobal) : collé en haut sur tous les écrans, le contenu descend pour lui laisser sa place
   (data-repos-global sur la racine), la barre de détail se colle dessous. Avec le menu latéral, il se pose à côté du menu. */
.repos--global { position: fixed; z-index: 30; inset: calc(env(safe-area-inset-top, 0px) + var(--s-2)) max(var(--gutter), env(safe-area-inset-right, 0px)) auto max(var(--gutter), env(safe-area-inset-left, 0px)); width: auto; max-width: var(--measure); margin-inline: auto; box-shadow: var(--shadow-float), inset 0 0 0 var(--card-edge) var(--line); cursor: pointer; }
[data-repos-global] .coquille__contenu { padding-top: calc(var(--tap-block) + var(--s-2)); }
[data-repos-global] .barre-detail { top: calc(var(--tap-block) + var(--s-2)); }
.pilule-minuteur { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; min-height: var(--tap); padding-inline: var(--s-2) var(--s-1); border-radius: var(--r-pill); background: var(--text); color: var(--bg); box-shadow: var(--shadow-float); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.pilule-minuteur__temps { font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }
.pilule-minuteur .icon-btn { width: var(--tap-small); height: var(--tap-small); color: inherit; }
.pilule-minuteur .anneau--fin { --ep: 3px; width: var(--icon); color: inherit; }
.pilule-minuteur .anneau__piste { border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.minuteur-etape { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-small); padding-inline: var(--s-2); border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: var(--fw-nom) var(--fs-small) / 1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.minuteur-etape .icon { width: var(--icon-sm); height: var(--icon-sm); }
.minuteur-etape[data-etat='cours'] { background: color-mix(in srgb, var(--accent-text) 16%, var(--surface)); color: var(--accent-text); }
.minuteur-etape[data-etat='fini'] { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }
/* Durée à vérifier (saisie par l'utilisateur, « Temps du paquet ») : texte à l'accent tant qu'il n'est pas lancé. */
.minuteur-etape--accent:not([data-etat]) { color: var(--accent-text); }
/* Icône seule, juste après le minuteur (crayon : changer la durée pour cette fois) : rond de tap-small. */
.minuteur-etape--icone { justify-content: center; width: var(--tap-small); padding: 0; }
.choix-duree { display: flex; flex-direction: column; gap: var(--group-gap); width: 100%; }
.intervalle { --mc: var(--accent-text); display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--inset-sm); border-radius: var(--r-md); background: color-mix(in srgb, var(--mc) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--mc); }
.intervalle__nom { flex: 1; min-width: 0; font-weight: var(--fw-nom); }
.intervalle .compteur { background: var(--surface); }
.sequence-plein { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); overflow: hidden; width: 100%; min-height: calc(var(--tap) * 8); padding: var(--inset); border-radius: var(--r-lg); color: var(--bg); text-align: center; }
.sequence-plein__fond { --mc: var(--accent-text); position: absolute; inset: 0; background: var(--mc); }
.sequence-plein > :not(.sequence-plein__fond) { position: relative; }
.sequence-plein__temps { font-size: var(--fs-display); font-weight: var(--graisse-temps, var(--fw-phrase)); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sequence-plein__nom { font-size: var(--fs-h2); font-weight: var(--fw-titre); }
.sequence-plein .temps-barre { width: 100%; color: inherit; }
.sequence-plein__commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-block-start: var(--s-3); }
.sequence-plein .btn { --b: var(--bg); color: var(--text); }
.sequence-plein[data-etat='fini'] .sequence-plein__fond { --mc: var(--text-2); }
.miniature-ecran { --mc: var(--accent-text); display: flex; flex-direction: column; gap: 2px; width: calc(var(--tap) * 1.6); aspect-ratio: 9 / 16; padding: var(--s-1); border-radius: var(--r-sm); background: var(--mc); color: var(--bg); font-size: 10px; text-align: center; justify-content: center; }
.miniature-ecran strong { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.grille-edit__carte--mobile { touch-action: none; cursor: grab; }
.grille-edit__carte--mobile.saisi { z-index: 3; box-shadow: inset 0 0 0 2px var(--accent-text), var(--shadow-float); cursor: grabbing; }
.pave__valeur[data-pave-glisse] { touch-action: none; cursor: ns-resize; user-select: none; }

/* Derniers objets repris des projets. */
.recadrage { position: relative; overflow: hidden; aspect-ratio: 1; width: 100%; max-width: calc(var(--tap) * 7); border-radius: var(--r-md); background: var(--surface-2); touch-action: none; cursor: grab; }
.recadrage__image { position: absolute; inset: 0; transform-origin: center; }
.recadrage__image .couverture { height: 100%; border-radius: 0; aspect-ratio: auto; }
.recadrage__cadre { position: absolute; inset: 8%; border-radius: 50%; box-shadow: 0 0 0 999px color-mix(in srgb, var(--bg) 62%, transparent), inset 0 0 0 2px var(--surface); pointer-events: none; }
/* Cadrage plein écran d'une photo (cadrerPhoto) : fond noir, l'image se déplace et se zoome sous un cercle toujours couvert. */
dialog.cadrage-plein { color-scheme: dark; --bg: var(--plein-fond); display: flex; flex-direction: column; gap: var(--s-3); width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) 0 calc(env(safe-area-inset-bottom, 0px) + var(--s-4)); border: 0; background: var(--bg); color: var(--text); }
dialog.cadrage-plein:not([open]) { display: none; }
.cadrage-plein__titre { font-weight: var(--fw-titre); text-align: center; }
.cadrage-plein__scene { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; }
.cadrage-plein__scene:active { cursor: grabbing; }
.cadrage-plein__image { position: absolute; top: 50%; left: 50%; pointer-events: none; will-change: transform; }
.cadrage-plein__image > canvas { display: block; width: 100%; height: 100%; }
.cadrage-plein__trou { position: absolute; top: 50%; left: 50%; border-radius: 50%; box-shadow: 0 0 0 2px var(--text), 0 0 0 100vmax color-mix(in srgb, var(--bg) 62%, transparent); transform: translate(-50%, -50%); pointer-events: none; }
.cadrage-plein__zoom { width: auto; margin-inline: var(--s-6); }
.cadrage-plein__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding-inline: var(--inset); }
/* Lecteur de QR code plein écran (ouvrirLecteurQr) : la caméra, le cadre (blanc, orange quand un code est repéré, vert
   une fois lu, rouge s'il n'est pas pour l'app), la ligne qui balaie puis se fixe et pulse, la coche, le statut en bas. */
dialog.lecteur-qr { color-scheme: dark; --bg: var(--plein-fond); --cadre: var(--text); width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; overflow: hidden; border: 0; background: var(--bg); color: var(--text); }
.lecteur-qr__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lecteur-qr__cadre { --cote: min(68vw, calc(var(--tap) * 6.4)); position: absolute; top: 44%; left: 50%; width: var(--cote); aspect-ratio: 1; border-radius: var(--r-lg); box-shadow: inset 0 0 0 3px var(--cadre), 0 0 0 100vmax color-mix(in srgb, var(--bg) 45%, transparent); transform: translate(-50%, -50%); }
.lecteur-qr[data-etat='vu'] { --cadre: var(--warn); }
.lecteur-qr[data-etat='lu'] { --cadre: var(--ok); }
.lecteur-qr:is([data-etat='inconnu'], [data-etat='erreur']) { --cadre: var(--danger); }
.lecteur-qr__ligne { position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 1px; background: var(--cadre); opacity: 0; }
.lecteur-qr:is([data-etat='cherche'], [data-etat='indice'], [data-etat='sombre']) .lecteur-qr__ligne { opacity: 1; animation: qr-balaie 2200ms ease-in-out infinite alternate; }
.lecteur-qr[data-etat='vu'] .lecteur-qr__ligne { top: 50%; opacity: 1; animation: qr-tient 700ms ease-in-out infinite alternate; }
@keyframes qr-balaie { from { transform: translateY(calc(var(--cote) * 0.08)); } to { transform: translateY(calc(var(--cote) * 0.92)); } }
@keyframes qr-tient { from { opacity: 0.35; } to { opacity: 1; } }
.lecteur-qr__coche { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: calc(var(--tap) * 1.6); aspect-ratio: 1; border-radius: 50%; background: var(--ok); color: var(--bg); opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.lecteur-qr__coche .icon { width: calc(var(--icon) * 1.6); height: calc(var(--icon) * 1.6); stroke-width: 3; }
.lecteur-qr[data-etat='lu'] .lecteur-qr__coche { opacity: 1; transform: translate(-50%, -50%); transition: opacity var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.lecteur-qr__fermer { position: absolute; top: calc(env(safe-area-inset-top, 0px) + var(--s-3)); right: var(--s-4); background: color-mix(in srgb, var(--bg) 45%, transparent); color: var(--text); }
.lecteur-qr__statut { position: absolute; inset: auto var(--s-5) calc(env(safe-area-inset-bottom, 0px) + var(--s-6)); display: grid; align-content: center; gap: var(--s-1); min-height: calc(var(--tap) * 1.8); padding: var(--inset-y) var(--inset); border-radius: var(--r-lg); background: color-mix(in srgb, var(--bg) 55%, transparent); text-align: center; }
.lecteur-qr__titre { font-weight: var(--fw-titre); }
.lecteur-qr__detail { color: var(--text-2); font-size: var(--fs-small); }
@media (prefers-reduced-motion: reduce) { .lecteur-qr .lecteur-qr__ligne { animation: none !important; } }
/* Avatar à photo (brancherAvatarPhoto) : le rond, puis Prendre, Choisir, Retirer. */
.avatar-photo { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.avatar-photo__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
/* Connexion par fournisseur : « ou » entre deux traits, puis un bouton par fournisseur, logo officiel et libellé. */
.fournisseurs { display: flex; flex-direction: column; gap: var(--s-2); }
.separateur-ou { display: flex; align-items: center; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-small); }
.separateur-ou > i { flex: 1; height: 1px; background: var(--line); }
.fournisseur__logo { flex: none; width: var(--icon); height: var(--icon); }
.notification { display: flex; gap: var(--s-3); padding: var(--inset-y) var(--inset); }
.notification[data-non-lue] { background: color-mix(in srgb, var(--accent-text) 7%, transparent); }
.notification__point { flex: none; width: var(--s-2); height: var(--s-2); margin-block-start: 7px; border-radius: 50%; background: var(--accent-text); }
.notification:not([data-non-lue]) .notification__point { opacity: 0; }
.notifications { display: flex; flex-direction: column; overflow: hidden; width: 100%; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.notification + .notification { box-shadow: inset 0 1px 0 var(--line); }
.terminal-texte { width: 100%; max-height: calc(var(--tap) * 4); overflow: auto; margin: 0; padding: var(--inset-sm); border-radius: var(--r-sm); background: var(--surface-2); font: var(--fw-texte) var(--fs-small) / 1.5 ui-monospace, monospace; white-space: pre-wrap; }
.titre-lettres { display: flex; flex-wrap: wrap; font-size: var(--fs-num); font-weight: var(--fw-titre); line-height: 1.1; }
.titre-lettres span { display: inline-block; white-space: pre; }
.apercu-flottant { position: fixed; z-index: 40; top: 0; left: 0; width: calc(var(--tap) * 4); pointer-events: none; }
.rideau { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; min-height: calc(var(--tap) * 4); border-radius: var(--r-md); background: var(--surface-2); }
.rideau__voile { position: absolute; inset: 0; background: var(--text); transform: translateY(-100%); pointer-events: none; }
.depliant__bouton { padding: 0; border: 0; border-bottom: 2px solid var(--accent-text); background: none; color: inherit; font: inherit; font-weight: var(--fw-titre); cursor: pointer; }
.depliant__contenu { display: block; margin-block: var(--s-2); padding: var(--inset-sm); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-small); }
.ruban { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100%; }
.ruban__chapitre { flex: 0 0 85%; min-height: calc(var(--tap) * 4); padding: var(--inset); scroll-snap-align: start; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }

/* Métier : montré, à copier, jamais imposé. */
.schema-metier { display: grid; place-items: center; width: calc(var(--tap) * 2.4); height: calc(var(--tap) * 2.4); border-radius: var(--r-sm); background: var(--surface-2); }
.schema-metier svg { width: 100%; height: 100%; }
/* Schéma qu'on touche pour l'agrandir (visionneuse). */
button.schema-metier { padding: 0; border: 0; color: inherit; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
button.schema-metier:active { transform: scale(var(--press-scale)); }
.muscle { display: inline-flex; padding: 2px var(--s-2); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); }
.muscle--principal { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
/* Sport (web/metier/sport) : silhouette des muscles travaillés, pictogrammes de mouvement, tuiles qui se remplissent. */
.silhouette { display: block; width: 100%; max-width: calc(var(--tap) * 4); height: auto; }
.silhouette--mini { width: calc(var(--tap) * 1.1); }
.silhouette--grand { max-width: calc(var(--tap) * 5); }
.silhouette__peau { fill: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.silhouette__muscle { fill: color-mix(in srgb, var(--text) 20%, var(--surface)); stroke: color-mix(in srgb, var(--text) 9%, var(--surface)); stroke-width: 1.4; stroke-linejoin: round; }
.silhouette__muscle--actif { fill: var(--mc, var(--accent-text)); }
.silhouette__muscle--aide { fill: color-mix(in srgb, var(--mc, var(--accent-text)) 45%, color-mix(in srgb, var(--text) 20%, var(--surface))); }
.silhouette--mini .silhouette__muscle:not(.silhouette__muscle--actif) { fill: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.picto { display: block; overflow: visible; }
.picto path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.picto__materiel path { stroke: var(--text-2); stroke-width: 1.8; opacity: 0.55; }
.picto__corps path { stroke: var(--text); stroke-width: 3.2; opacity: 0.78; }
.picto__cible path { stroke: var(--mc, var(--accent-text)); stroke-width: 3.6; }
.picto__tete { fill: var(--text); opacity: 0.78; }
.picto-tuile { position: relative; isolation: isolate; display: grid; flex: none; place-items: center; overflow: hidden; width: var(--tap); aspect-ratio: 1; border-radius: var(--r-md); background: var(--surface-2); }
.picto-tuile > .picto { width: 80%; height: 80%; }
button.picto-tuile { padding: 0; border: 0; color: inherit; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
button.picto-tuile:active { transform: scale(var(--press-scale)); }
/* Avec sa pastille « i » dans le coin : la tuile ne la rogne pas. */
.picto-tuile.avec-info { overflow: visible; }
.picto-tuile--sm { width: calc(var(--tap) * 0.85); border-radius: var(--r-sm); }
.picto-tuile--lg { width: calc(var(--tap) * 1.35); }
.picto-tuile--xl { width: calc(var(--tap) * 2); border-radius: var(--r-lg); }
.picto-tuile__niveau { position: absolute; inset: 0; z-index: -1; background: var(--accent); opacity: 0.55; transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-slow) var(--ease-out); }
/* Exercices d'une séance sur une ligne qui défile jusqu'au bord de la carte. */
.pictos-ligne { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline-end: calc(var(--inset) * -1); padding-inline-end: var(--inset); }
/* Cuisine (web/metier/cuisine) : assiette ou mug sur une nappe teintée par l'accent, pastilles de saison, coût. */
.nappe-assiette { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.assiette { --assiette: var(--surface); --assiette-bord: var(--line-strong); display: block; width: 100%; height: 100%; }
.pastilles-saison { display: inline-flex; align-items: center; gap: calc(var(--s-1) * 0.75); }
.pastilles-saison i { width: calc(var(--s-1) * 1.5); height: calc(var(--s-1) * 1.5); border-radius: 50%; background: var(--line-strong); }
.pastilles-saison i.on { background: var(--text-2); }
.pastilles-saison i.now { background: var(--text); }
.cout { font-weight: var(--fw-titre); letter-spacing: 0.02em; color: var(--text); }
.cout__reste { color: var(--line-strong); }
.serie { display: grid; grid-template-columns: var(--pastille) 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--inset-sm); border-radius: var(--r-sm); background: var(--surface); font-variant-numeric: tabular-nums; }
.decision { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; padding: var(--inset); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.decision__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.organigramme { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.organigramme__rang { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.organigramme__case { min-width: calc(var(--tap) * 2.6); padding: var(--s-2) var(--inset-sm); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-card); font-size: var(--fs-small); text-align: center; }

/* Menu latéral : à partir de 900 px, à la place des onglets du bas. */
.side-link { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--inset-sm); border-radius: var(--r-sm); color: var(--text-2); font-weight: var(--fw-nom); text-decoration: none; }
.side-link[aria-current='page'] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
/* Le bloc qui suit le lien actif, dans les onglets et le menu latéral. Voir deplacerMarque. */
.marque { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent-text) 14%, transparent); transform-origin: 0 0; pointer-events: none; }
.tabbar > .marque { border-radius: max(0px, calc(var(--r-md) - var(--s-3) / 2)); }
.marque ~ .side-link { position: relative; z-index: 1; }
/* Glisser-déposer d'une personnalisation : le fantôme translucide suit le pointeur ; au milieu d'une cible, elle
   s'encadre et un badge dit « Échanger » ; près d'un bord, un trait à l'accent montre où l'élément s'insère. */
.fantome-glisse { position: fixed; z-index: 70; top: 0; left: 0; margin: 0; opacity: 0.55; pointer-events: none; box-shadow: var(--shadow-float); }
.trait-depot { position: fixed; z-index: 71; top: 0; left: 0; border-radius: var(--r-pill); background: var(--accent); pointer-events: none; }
.trait-depot[data-sens='vertical'] { width: 4px; margin-left: -2px; }
.trait-depot[data-sens='horizontal'] { height: 4px; margin-top: -2px; }
.badge-depot { position: fixed; z-index: 71; top: 0; left: 0; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: var(--fw-nom) var(--fs-small) / 1.2 var(--font); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-float); }
.badge-depot .icon { width: var(--icon-sm); height: var(--icon-sm); }
[data-depot-echange] { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Titre d'un groupe du menu latéral, avec sa flèche à droite : replie ou rouvre les liens qui le suivent. */
.side-groupe { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--tap-small); margin-top: var(--s-3); padding: 0 var(--inset-sm); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: var(--fw-nom) var(--fs-caption) / 1.2 var(--font); text-align: start; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.side-groupe:first-child, .marque + .side-groupe { margin-top: 0; }
.side-groupe > span { flex: 1 1 auto; min-width: 0; }
.side-groupe > .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--t-slow) var(--ease-out); }
.side-groupe[aria-expanded='false'] > .icon { transform: rotate(-90deg); }
.side-groupe:hover { color: var(--text); }
.marque ~ .side-groupe { position: relative; z-index: 1; }
/* Menu latéral (dès 900 px) : une surface blanche du haut en bas, séparée de la page par le contour fin à droite. La place (collé, hauteur) revient à la page. */
.menu-lateral { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) var(--s-3); background: var(--surface); box-shadow: inset calc(var(--card-edge) * -1) 0 0 var(--line); }
.marque ~ .side-link[aria-current='page'] { background: none; }
/* Recherche du menu latéral : un bouton à l'aspect d'un champ, raccourci à droite, ouvre la recherche. */
.side-search { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--inset-sm); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font: var(--fw-texte) var(--fs-small) / 1.2 var(--font); text-align: start; cursor: pointer; }
.side-search:hover { color: var(--text); }
.side-search:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -1px; border-color: transparent; }
.side-search__texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Titre de site vitrine : seule taille qui suit la largeur de l'écran. */
.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-titre); letter-spacing: calc(-0.03em * var(--track-k)); line-height: 1.02; text-wrap: balance; }

/* Barre d'onglets flottante : même fond que les autres blocs. L'arrondi du bloc actif suit celui de la barre, moins sa marge. */
/* Onglets : chacun garde ses marges et grandit si son texte l'exige (densité Grande), les courts se partagent le reste à parts égales ;
   si rien ne tient, la barre défile au doigt (deplacerMarque y amène l'onglet actif). */
.tabbar { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; align-items: center; width: fit-content; max-width: 100%; height: var(--tabbar); margin-inline: auto; padding-inline: calc(var(--s-3) / 2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-float); }
.tabbar--fixe { position: fixed; z-index: 20; left: max(var(--s-3), env(safe-area-inset-left, 0px)); right: max(var(--s-3), env(safe-area-inset-right, 0px)); max-width: calc(100% - max(var(--s-3), env(safe-area-inset-left, 0px)) - max(var(--s-3), env(safe-area-inset-right, 0px))); bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
/* Cachée seulement là où la coquille montre son menu latéral : dès 900 px, avec une souris, pas sur un téléphone couché. Une tablette garde ses onglets. */
@media (min-width: 900px) and (min-height: 501px) and (hover: hover) and (pointer: fine) { .tabbar--fixe { display: none; } }
/* Cachée le temps d'un plein écran : elle descend en s'effaçant, puis revient. */
.tabbar--fixe { transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.tabbar--fixe.tabbar--cachee { opacity: 0; transform: translateY(calc(100% + var(--s-3))); pointer-events: none; }
/* Trop étroite pour tous ses libellés (beaucoup d'onglets) : seul l'onglet actif garde le sien, les autres leur icône. */
.tabbar--etroite .tab:not([aria-current='page'], [data-allume]) { gap: 0; font-size: 0; }
/* Onglet allumé hors de son adresse (un écran rangé sous lui : Compte sous Réglages). */
.tab[data-allume] { color: var(--accent-text); }
/* Icône d'onglet ou de lien de menu. Pressée, elle rétrécit à peine : −3 % inactive (iconePresse, 97 %), −9 % sur l'onglet
   déjà actif (iconePresseActif, environ 100 %). Devenue active, en deux temps comme
   le geste de la croix : elle s'efface en passant à 92 % (popDepart, à 40 % de la durée : popCreux), puis réapparaît en
   grandissant jusqu'à 110 % (actifScale), en pop (320 ms), et y reste. Repart de la taille pressée : aucun saut. */
.tab .icon, .side-link .icon { transition: transform var(--t-base) var(--ease-out); }
.tab:is([aria-current='page'], [data-allume]) .icon, .side-link[aria-current='page'] .icon { transform: scale(var(--actif-scale)); animation: icone-pop var(--t-pop) linear; }
.tab:active .icon, .side-link:active .icon { transform: scale(var(--icone-presse)); }
.tab:is([aria-current='page'], [data-allume]):active .icon, .side-link[aria-current='page']:active .icon { transform: scale(calc(var(--actif-scale) * var(--icone-presse-actif))); }
@keyframes icone-pop {
  from { opacity: 1; transform: scale(var(--icone-presse)); animation-timing-function: var(--ease-out); }
  40% { opacity: 0; transform: scale(var(--pop-depart)); animation-timing-function: var(--ease-out); }
}
.tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--tap); min-height: calc(var(--tabbar) - var(--s-3)); padding-inline: var(--s-2); border: 0; border-radius: max(0px, calc(var(--r-md) - var(--s-3) / 2)); background: none; color: var(--text-2); font: var(--fw-nom) var(--fs-caption) / 1.2 var(--font); text-decoration: none; cursor: pointer; }
.tabbar::-webkit-scrollbar { display: none; }
.tab[aria-current='page'] { color: var(--accent-text); }
/* Onglets en colonne (rail) : onglets l'un sous l'autre, largeur var(--rail), centrés dans la hauteur. */
.tabbar--colonne { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: center; width: var(--rail); height: auto; margin: 0; padding: calc(var(--s-3) / 2); }
.tabbar--colonne .tab { min-width: 0; min-height: 0; padding: var(--s-2) var(--s-1); text-align: center; }
/* Téléphone couché (paysage, 500 px de haut au plus : layout.landscapeMaxHeight) : la hauteur va à la page.
   .tabbar--rail : la barre fixe passe en colonne sur le bord droit, toute la hauteur ; l'app réserve var(--rail) à droite et cache son menu latéral.
   Une tablette couchée (tactile) prend aussi le rail. En-tête d'onglet sur une ligne fine (téléphone seulement) : titre en h2. */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .tabbar--fixe.tabbar--rail { display: grid; grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: center; top: max(var(--s-3), env(safe-area-inset-top, 0px)); right: max(var(--s-3), env(safe-area-inset-right, 0px)); bottom: max(var(--s-3), env(safe-area-inset-bottom, 0px)); left: auto; width: var(--rail); height: auto; margin: 0; padding: calc(var(--s-3) / 2); }
  .tabbar--rail .tab { min-width: 0; min-height: 0; padding: var(--s-2) var(--s-1); text-align: center; }
}
@media (orientation: landscape) and (max-height: 500px) { .page-tete__ligne > h1 { font-size: var(--fs-h2); } }

/* Chiffre qui roule, marqué (roulerChiffre(…, { marque: true })) : la couche d'accent et l'ancien chiffre posés par-dessus. */
.chiffre-roule { position: relative; display: inline-block; }
.chiffre-neuf { position: relative; display: inline-block; }
.chiffre-marque, .chiffre-parti { position: absolute; inset: 0; pointer-events: none; }
.chiffre-marque { color: var(--accent-text); }
/* Badge flottant global (démonstration, simulation) : en bas, au-dessus des onglets et du message bref, sans gêner le toucher. */
.badge-flottant { position: fixed; z-index: 25; left: 50%; bottom: calc(var(--toast-bas, var(--s-5)) + env(safe-area-inset-bottom, 0px) + var(--tap)); transform: translateX(-50%); box-shadow: var(--shadow-float); pointer-events: none; white-space: nowrap; }
/* Par-dessus le contenu, un fond transparent ne se lit plus : le badge flottant est plein, encre du fond. */
.badge.badge-flottant { background: var(--c); color: var(--bg); }

/* Barre des écrans de détail : la flèche à gauche, le type de l'écran au milieu (Programme, Séance) ; quand le grand titre
   sort de l'écran (suivreGrandTitre), la barre prend son fond et le nom remplace le type ; un filet de progression peut
   s'y coller dessous (.barre-detail__filet). */
.barre-detail { position: sticky; z-index: 15; top: 0; display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); align-items: center; min-height: var(--tap); margin-inline: calc(var(--gutter) * -1); padding: env(safe-area-inset-top, 0px) calc(var(--gutter) - (var(--tap) - var(--icon)) / 2) 0; transition: background-color 0s; }
.barre-detail::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.barre-detail[data-repliee]::before { opacity: 1; }
.barre-detail__milieu { position: relative; display: grid; min-width: 0; text-align: center; }
.barre-detail__type, .barre-detail__nom { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.barre-detail__type { color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.barre-detail__nom { font-weight: var(--fw-titre); opacity: 0; transform: translateY(var(--s-2)); }
.barre-detail[data-repliee] .barre-detail__type { opacity: 0; transform: translateY(calc(var(--s-2) * -1)); }
.barre-detail[data-repliee] .barre-detail__nom { opacity: 1; transform: none; }
.barre-detail__filet { position: absolute; inset: auto var(--gutter) -1px; }

/* Carte touchable en entier (.carte-lien) : son titre est un lien (.carte-lien__titre) qui couvre la carte ; ses propres
   boutons restent au-dessus et gardent leur action. */
.carte-lien { position: relative; }
.carte-lien__titre { color: inherit; font-weight: var(--fw-titre); text-decoration: none; }
.carte-lien__titre::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.carte-lien :is(button, a:not(.carte-lien__titre), input, select, label) { position: relative; z-index: 1; }
/* Frise de jours reliée : les ronds liés par un trait ; un jour fait est plein (data-fait). */
.frise-jours--reliee .frise-jours__jour { position: relative; }
.frise-jours--reliee .frise-jours__jour + .frise-jours__jour::before { content: ''; position: absolute; z-index: -1; top: 50%; right: 50%; width: calc(100% + var(--s-1)); height: 2px; background: var(--line); }
.frise-jours__jour[data-fait] { background: var(--accent); color: var(--on-accent); }
.frise-jours__jour[data-fait] small { color: inherit; }
/* Liste coupée (couperListes) : « Voir tout » sous la liste. */
.liste-coupee__tout { align-self: flex-start; }
/* Barres d'une catégorie : la barre prend la couleur de la catégorie de sa ligne (couleur-dN ou --mc). */
.mesure[class*='couleur-'] .mesure__plein { background: var(--mc); }
/* Carte de chaleur touchable : chaque jour est un bouton qui ouvre sa journée. */
button.chaleur__case { cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
button.chaleur__case:active { transform: scale(0.85); }
/* Recherche repliée en loupe (data-recherche-repliee) : la loupe ronde ; le champ glisse et apparaît par-dessus, à sa gauche. */
.recherche-repliee { position: relative; display: inline-flex; justify-content: flex-end; }
.recherche-repliee .input { position: absolute; right: 0; width: min(calc(100vw - var(--gutter) * 2), calc(var(--tap) * 7)); padding-inline-end: var(--tap); opacity: 0; transform: translateX(var(--s-4)); pointer-events: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.recherche-repliee[data-ouverte] .input { opacity: 1; transform: none; pointer-events: auto; }
.recherche-repliee__loupe { position: relative; z-index: 1; }
/* Nombre dans un bouton (« Voir 12 résultats ») : chiffres alignés, il roule à chaque changement (roulerChiffre). */
.btn__nombre { display: inline-block; font-variant-numeric: tabular-nums; }
/* Segmenté en tuiles : libellé et nombre sur deux lignes, fond plein qui glisse (avec .seg--plein), lié à des pages (data-pages). */
.seg--tuiles { display: flex; width: 100%; }
.seg--tuiles button { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: calc(var(--tap) * 1.3); padding-inline: var(--s-2); }
.seg--tuiles .seg__nombre { font-size: var(--fs-h3); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; line-height: 1; }

/* Coquille d'une app à onglets (modèle de nouveau-projet, comme meds) : le contenu, une vue par onglet avec ses marges sous
   les onglets du bas, le menu latéral dès 900 px de large et 501 px de haut, le rail d'onglets couché ; le message bref
   se pose au-dessus des onglets (--toast-bas). Sur <body> : .coquille ; le menu : .menu-lateral.coquille__menu. */
.coquille { --toast-bas: calc(var(--tabbar) + var(--s-3) * 2); }
.coquille__contenu { overflow-x: clip; min-height: 100dvh; }
.coquille__vue { display: flex; flex-direction: column; gap: var(--block-gap); padding-block: calc(env(safe-area-inset-top, 0px) + var(--s-6)) calc(var(--tabbar) + var(--s-3) * 2 + env(safe-area-inset-bottom, 0px) + var(--s-5)); }
.coquille__menu { display: none; }
/* Barre de filtres d'une vue : elle remonte toucher le haut de l'écran (elle porte déjà la zone sûre), sans règle dans l'app. */
.coquille__vue > .barre-filtres { margin-top: calc((env(safe-area-inset-top, 0px) + var(--s-6)) * -1); }
/* Bouton flottant de la coquille (.fab.coquille__fab) : au pouce, au-dessus des onglets du bas, à côté du rail couché, dans
   le coin avec le menu latéral. .coquille--fab sur la coquille laisse sa place sous la dernière ligne. */
.coquille__fab { position: fixed; z-index: 21; inset-inline-end: var(--gutter); bottom: calc(var(--toast-bas, var(--s-5)) + env(safe-area-inset-bottom, 0px)); }
.coquille--fab .coquille__vue { padding-block-end: calc(var(--tabbar) + var(--s-3) * 3 + var(--tap-block) + env(safe-area-inset-bottom, 0px) + var(--s-5)); }
/* Minuteurs en cours, visibles sur tous les écrans (.coquille__pilules, des .pilule-minuteur) : empilés en haut à droite,
   à gutter du bord, à côté du rail couché et jamais dessus. Vide, la pile ne prend aucun toucher. */
.coquille__pilules { position: fixed; z-index: 25; top: calc(env(safe-area-inset-top, 0px) + var(--s-3)); inset-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); max-width: calc(100vw - var(--gutter) * 2); }
.coquille__marque { display: flex; align-items: center; gap: var(--s-3); margin-block-end: var(--s-4); padding-inline: var(--s-1); color: inherit; font-weight: var(--fw-titre); text-decoration: none; }
.coquille__marque .logo-rond { width: var(--tap); height: var(--tap); }
.pile-blocs { display: flex; flex-direction: column; gap: var(--block-gap); }
/* Deux piles à la suite (blocs du style puis ceux de l'app) : même écart qu'entre deux blocs. */
.pile-blocs + .pile-blocs { margin-top: var(--block-gap); }
/* Deux colonnes indépendantes (deux piles dans les groupes en deux colonnes) : l'écart vient de la grille. */
.grille-blocs > .pile-blocs + .pile-blocs { margin-top: 0; }
/* Le pied du menu (profil, minuteur en cours) : en bas. */
.coquille__pied { margin-top: auto; }
/* Menu latéral seulement avec une souris (une tablette couchée garde l'interface tactile). */
@media (min-width: 900px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
  .coquille__menu { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: calc(var(--tap) * 6); }
  .coquille__contenu { margin-inline-start: calc(var(--tap) * 6); }
  .coquille__vue { padding-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--s-6)); }
  .coquille { --toast-bas: var(--s-5); }
  .coquille .repos--global { inset-inline-start: calc(var(--tap) * 6 + var(--gutter)); }
  .coquille--fab .coquille__vue { padding-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--s-6) + var(--tap-block) + var(--s-3)); }
}
/* Téléphone couché, tablette couchée tactile : rail d'onglets à droite (.tabbar--rail), pas de menu latéral. */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .coquille__menu { display: none; }
  .coquille__contenu { margin-inline-start: 0; padding-inline-end: calc(var(--rail) + var(--s-3)); }
  .coquille .repos--global { inset-inline-end: calc(var(--rail) + var(--s-3) + var(--gutter)); }
  .coquille__fab { inset-inline-end: calc(var(--rail) + var(--s-3) + var(--gutter)); }
  .coquille__pilules { inset-inline-end: calc(var(--rail) + var(--s-3) + var(--gutter)); max-width: calc(100vw - var(--rail) - var(--s-3) - var(--gutter) * 2); }
  .coquille--fab .coquille__vue { padding-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--s-6) + var(--tap-block) + var(--s-3)); }
  .coquille__vue { padding-block: calc(env(safe-area-inset-top, 0px) + var(--s-4)) calc(env(safe-area-inset-bottom, 0px) + var(--s-6)); }
  .coquille__vue > .barre-filtres { margin-top: calc((env(safe-area-inset-top, 0px) + var(--s-4)) * -1); }
  .coquille { --toast-bas: var(--s-5); }
}

/* Message et feuille basse */
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--toast-bas, var(--s-5)) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--s-3); width: max-content; max-width: calc(100vw - var(--s-6)); padding: var(--inset-y) var(--inset); border-radius: var(--r-md); background: var(--text); color: var(--bg); font-size: var(--fs-small); font-weight: var(--fw-nom); box-shadow: var(--shadow-float); transform: translateX(-50%); animation: socle-rise-centre var(--t-base) var(--ease-out); }
.toast .btn { --b: transparent; color: inherit; }
/* Barre de temps d'un message (afficherMessage(…, { barre: true })) : elle se vide le temps qu'il reste, tenu elle s'arrête. */
.toast__temps { position: absolute; inset: auto var(--s-3) 3px; height: 2px; border-radius: var(--r-pill); background: currentColor; opacity: 0.5; transform-origin: left; animation: toast-temps var(--toast-duree, 2400ms) linear forwards; pointer-events: none; }
.toast[data-tenu] .toast__temps { animation-play-state: paused; }
@keyframes toast-temps { to { transform: scaleX(0); } }
/* Message de Clepso (afficherMessage) : point de couleur, anneau du temps restant autour d'Annuler, tenu, glissé. */
.toast { touch-action: none; }
.toast__point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mc, var(--accent)); }
.toast__texte { min-width: 0; }
.toast__anneau { position: relative; display: inline-grid; flex: none; place-items: center; width: calc(var(--icon-sm) + 8px); height: calc(var(--icon-sm) + 8px); }
.toast__anneau .icon { width: calc(var(--icon-sm) - 4px); height: calc(var(--icon-sm) - 4px); }
/* L'anneau se vide dans le sens des aiguilles d'une montre : deux moitiés qui tournent hors de leur découpe (transform seulement). */
.toast__moitie { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
.toast__moitie--d { left: 50%; }
.toast__moitie--g { left: 0; }
.toast__moitie i { position: absolute; top: 0; width: 200%; height: 100%; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; transform: rotate(-45deg); animation: toast-anneau calc(var(--toast-duree, 4s) / 2) linear forwards; }
.toast__moitie--d i { left: -100%; border-color: transparent currentColor currentColor transparent; }
.toast__moitie--g i { left: 0; border-color: currentColor transparent transparent currentColor; animation-delay: calc(var(--toast-duree, 4s) / 2); }
.toast[data-tenu] .toast__moitie i { animation-play-state: paused; }
@keyframes toast-anneau { to { transform: rotate(135deg); } }
/* Page qui s'en va pendant un changement de page, voir web/mouvement.js. */
.glissement { position: fixed; z-index: 5; overflow: hidden; pointer-events: none; }
dialog.sheet { width: 100%; max-width: var(--sheet-w); margin: auto auto 0; padding: var(--s-5) var(--inset) calc(var(--inset) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); color: var(--text); }
/* Dans une carte : les lignes se posent à plat, séparées par un filet, et ce qui se distingue par son fond prend surface-2. */
.card .list { gap: 0; }
.card .list > *, .card .dates-liste > *, .card .accordeon > .repli, .card > .repli { padding-inline: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* Une ligne de puces dans une liste en carte (séries sous leur exercice) : l'écart d'une ligne sous le trait. */
.card .list > .ligne { padding-block: var(--cell-y); }
/* Ligne à actions posée à plat : sa zone d'appui s'aligne sur les autres lignes, sans retrait. */
.card .list > .row--actions > .row__appui { padding-inline-start: 0; }
.card .list > * + *, .card .dates-liste > * + *, .card .accordeon > .repli + .repli, .card > .repli { box-shadow: inset 0 1px 0 var(--line); }
.card .repli summary, .card .repli__corps { padding-inline: 0; }
.card .list > .creneau[data-etat='cours'] { padding-inline-start: var(--s-3); box-shadow: inset 3px 0 0 var(--accent-text); }
.card .jour__tete { padding-inline: 0; }
.card .faits, .card .lecteur { padding-inline: 0; border: 0; background: none; box-shadow: none; }
.card .chip:not([aria-pressed='true']), .row__dessous .chip:not([aria-pressed='true']), .card .organigramme__case { background: var(--surface-2); box-shadow: none; }
dialog.sheet .chip:not([aria-pressed='true']) { background: var(--surface-2); }
/* Corps d'une feuille : ses blocs espacés de --block-gap, comme sur une page ; sous la barre du titre, --head-gap. */
.feuille__corps { display: flex; flex-direction: column; gap: var(--block-gap); }
.feuille__corps > .barre-haut { margin-bottom: calc(var(--head-gap) - var(--block-gap)); }
.feuille__corps > .sheet__poignee { margin-bottom: calc(var(--s-3) - var(--block-gap)); }
dialog.sheet .bloc__panneau { background: var(--surface-2); box-shadow: none; }
dialog.sheet .bloc__panneau .chip:not([aria-pressed='true']), dialog.sheet .bloc__panneau .pave__touche, dialog.sheet .bloc__panneau .emoji-btn, dialog.sheet .bloc__panneau .jour-rond:not([aria-pressed='true']) { background: var(--surface); }
dialog.sheet[open] { animation: socle-rise var(--t-slow) var(--ease-out); }
/* Feuille à un cran (poserCran) : toute la hauteur, descendue pour n'en montrer qu'une part ; elle remonte en défilant. */
dialog.sheet[data-cran] { height: calc(100dvh - var(--s-6)); max-height: none; translate: 0 var(--cran, 0px); transition: translate var(--t-slow) var(--ease-out); }
/* Collé au bas visible (le décalage du cran au-dessus du bas de la feuille), sans prendre de place. */
.sheet__fondu { position: sticky; z-index: 1; bottom: var(--cran, 0px); display: block; height: calc(var(--tap) + var(--s-3)); margin: calc((var(--tap) + var(--s-3)) * -1) calc(var(--inset) * -1) 0; background: linear-gradient(transparent, var(--surface)); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); }
.sheet__fondu[data-visible] { opacity: 1; }
dialog.sheet::backdrop { background: var(--scrim); }
@media (min-width: 900px) { dialog.sheet { margin: auto; border-radius: var(--r-lg); } }
/* Feuille qui devient tiroir (le détail ouvert depuis une liste) : feuille basse sur téléphone ; dès 900 px, tiroir à
   droite sans voile, la liste reste visible et active à côté (ouvrirFeuilleOuTiroir). Au-dessus de la barre d'onglets. */
@media (min-width: 900px) {
  dialog.sheet--tiroir { position: fixed; z-index: 30; inset: 0 0 0 auto; width: var(--drawer-w); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; overflow-y: auto; border-radius: 0; box-shadow: var(--shadow-float); }
  dialog.sheet--tiroir[open] { animation: socle-tiroir var(--t-slow) var(--ease-out); }
  dialog.sheet--tiroir .sheet__poignee { display: none; }
}
@keyframes socle-tiroir { from { opacity: 0; transform: translateX(var(--s-6)); } }

/* Barre d'actualisation (web/donnees.js), comme SIRH : fine, en haut de l'écran, pendant que des données gardées se mettent à jour.
   Elle s'allonge par une échelle (transform), sur la couche graphique, puis s'efface. */
.barre-actualisation { position: fixed; z-index: 60; inset: 0 0 auto; height: var(--barre-actualisation); overflow: hidden; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); }
.barre-actualisation[data-fini] { opacity: 0; }
.barre-actualisation__remplissage { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
/* Mise à jour d'une app installée (web/mise-a-jour.js) : l'étape, le pourcentage, la barre qui se remplit (scaleX). */
.carte-maj { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--inset-y) var(--inset); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.carte-maj__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.carte-maj__part { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.carte-maj__piste { overflow: hidden; height: var(--s-1); border-radius: var(--r-pill); background: var(--surface-2); }
.carte-maj__barre { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
[dir='rtl'] .carte-maj__barre { transform-origin: right; }
.carte-maj[data-etape='ajour'] .carte-maj__barre { background: var(--ok); }
.carte-maj[data-etape='erreur'] .carte-maj__barre { background: var(--danger); }
.carte-maj--flottante { position: fixed; z-index: 60; inset: calc(env(safe-area-inset-top, 0px) + var(--s-2)) var(--gutter) auto; max-width: var(--measure); margin-inline: auto; box-shadow: var(--shadow-float); animation: maj-arrive var(--t-base) var(--ease-out); }
@keyframes maj-arrive { from { opacity: 0; transform: translateY(calc(var(--s-2) * -1)); } }
@media (prefers-reduced-motion: reduce) { .carte-maj--flottante { animation: none; } .carte-maj__barre { transition: none; } }
[dir='rtl'] .barre-actualisation__remplissage { transform-origin: right; }

/* Texte qui change (changerTexte de web/mouvement.js) : l'ancien, posé par-dessus à sa place, monte en s'effaçant. */
.texte-change { position: relative; }
.texte-change__neuf { display: inline-block; max-width: 100%; }
.texte-change__ancien { position: absolute; display: block; white-space: nowrap; pointer-events: none; }

/* Squelette de chargement */
.skeleton { border-radius: var(--r-sm); background: var(--surface-2); animation: socle-pulse 1.4s ease-in-out infinite; }
/* Ligne en squelette (premier chargement d'une liste) : vignette et deux traits, à la hauteur d'une ligne. */
.row--squelette { pointer-events: none; }
.row--squelette > .skeleton:first-child { flex: none; width: var(--pastille); height: var(--pastille); border-radius: 50%; }
.row--squelette > .row__main { display: flex; flex-direction: column; gap: var(--s-2); }
.row--squelette > .row__main > .skeleton { width: 60%; height: var(--s-3); }
.row--squelette > .row__main > .skeleton + .skeleton { width: 38%; }

/* Monter en apparaissant : transform seulement ; le message bref garde son centrage (translateX(-50%)). */
@keyframes socle-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes socle-rise-centre { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes socle-pulse { 50% { opacity: 0.5; } }
/* Ce qui sonne et attend qu'on l'arrête (pilule ou minuteur d'une étape) : clignote doucement, sans fin. */
.clignote { animation: socle-clignote 1s ease-in-out infinite alternate; }
@keyframes socle-clignote { to { opacity: 0.55; } }
@keyframes socle-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-property: none !important; scroll-behavior: auto !important; }
}
/* Animations coupées par l'app (réglage « Sans animation ») : comme le mouvement réduit, sauf les croquis qui montrent un mouvement. */
:root[data-sans-animation] :not(.croquis-boucle, .croquis-boucle *), :root[data-sans-animation] :not(.croquis-boucle *)::before, :root[data-sans-animation] :not(.croquis-boucle *)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-property: none !important; scroll-behavior: auto !important; }

/* Cartes personnalisables, copie de « Personnaliser l'écran » de SIRH (web/disposition.js). */
.titre-carte__replier, .titre-carte > .outils-carte { margin-block: calc((var(--pastille) - var(--tap)) / 2); }
.titre-carte__replier { flex: none; margin-inline: auto calc((var(--icon-md) - var(--tap)) / 2); }
.titre-carte .row__main + .titre-carte__replier, .titre-carte .row__main + .outils-carte { margin-inline-start: 0; }
.titre-carte .row__main + .outils-carte { margin-inline-start: auto; }
.titre-carte__replier .icon { transition: transform var(--t-slow) var(--ease-out); }
.titre-carte__replier[aria-expanded='false'] .icon { transform: rotate(-90deg); }
/* Repliée : pas plus haute que son titre dans une grille (align-self), mais toujours sa pleine largeur, même dans une
   colonne flex où align-self la réduirait à son titre. */
.card[data-repliee] { align-self: start; width: 100%; }
.card[data-repliee] > :not(.titre-carte) { display: none; }
.card[data-masquee] > :not(.titre-carte) { opacity: 0.4; transition: opacity var(--t-base) var(--ease-out); }
.card[data-masquee] .titre-carte .row__main { color: var(--text-2); text-decoration: line-through; }
.bandeau--accent { --c: var(--accent-text); }

/* Tableau de cartes : 4 colonnes, 2 sous 900 px de large, petites cartes deux par ligne sous 560 px. S = 1, M = 2, L = la ligne. */
[data-disposition] { container: disposition / inline-size; }
.tableau-bord { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--block-gap); }
.tableau-bord > .card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; transform-origin: top left; }
.tableau-bord > .carte-chiffre { gap: var(--s-1); }
.carte-chiffre .chiffre__pied { margin-top: auto; padding-top: var(--s-2); }
.carte-chiffre--warn .chiffre__valeur { color: var(--warn); }
.carte-chiffre--danger .chiffre__valeur { color: var(--danger); }
.carte-chiffre--ok .chiffre__valeur { color: var(--ok); }
.tableau-bord > [data-taille='s'] { grid-column: span 1; }
.tableau-bord > [data-taille='m'] { grid-column: span 2; }
.tableau-bord > [data-taille='l'] { grid-column: 1 / -1; }
@container disposition (max-width: 900px) { .tableau-bord { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Personnalisation : la grille garde les colonnes de l'affichage (data-colonnes-vue), même si le panneau rétrécit la
   place ; une carte trop étroite pour son contenu le fait défiler. L'aperçu « Téléphone » reprend la grille du téléphone. */
[data-personnalisation]:not([data-apercu-telephone]) [data-edition] .tableau-bord[data-colonnes-vue='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-personnalisation]:not([data-apercu-telephone]) [data-edition] .tableau-bord[data-colonnes-vue='4'] > .card { overflow: auto; }
[data-personnalisation]:not([data-apercu-telephone]) [data-edition] .tableau-bord[data-colonnes-vue='4'][data-lignes] { grid-auto-flow: row; }
[data-personnalisation]:not([data-apercu-telephone]) [data-edition] .tableau-bord[data-colonnes-vue='4'] > [data-nouvelle-ligne][data-taille='s'] { grid-column: 1 / span 1; }
[data-personnalisation]:not([data-apercu-telephone]) [data-edition] .tableau-bord[data-colonnes-vue='4'] > [data-nouvelle-ligne][data-taille='m'] { grid-column: 1 / span 2; }
/* Lignes libres (une carte commence une ligne) : sur quatre colonnes seulement ; la grille ne comble plus ses trous. */
@container disposition (min-width: 901px) {
  .tableau-bord[data-lignes] { grid-auto-flow: row; }
  .tableau-bord > [data-nouvelle-ligne][data-taille='s'] { grid-column: 1 / span 1; }
  .tableau-bord > [data-nouvelle-ligne][data-taille='m'] { grid-column: 1 / span 2; }
}
@container disposition (max-width: 560px) { .tableau-bord { gap: var(--s-3); } }

/* En personnalisation : cartes en pointillés, déplaçables ; la cible du dépôt repérée, la carte glissée pâlie. */
[data-edition] .card[data-carte] { outline: 1px dashed var(--line-strong); outline-offset: -1px; }
/* Ce qui n'a pas sa place pendant la personnalisation (actions rapides de l'en-tête) : caché. */
[data-edition] [data-hors-perso], [data-personnalisation] [data-hors-perso] { display: none; }
/* Réservé à l'ordinateur, comme SIRH : le bouton disparaît jusqu'à 1000 px (layout.persoFrom − 1). */
@media (max-width: 1000px) { [data-personnaliser] { display: none; } }
/* Ouvert : le bouton reste marqué, teinté d'accent comme un réglage choisi (SIRH : « selected »). */
.btn[data-personnaliser][aria-pressed='true'] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
[data-edition] .tableau-bord > .card[data-carte] { cursor: grab; }
.card[data-deplacee] { opacity: 0.5; }
/* La carte qu'on vient de changer : un halo d'accent qui s'estompe (opacité seule). */
.card[data-arrivee] { position: relative; }
.card[data-arrivee]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--accent); pointer-events: none; animation: perso-halo 1s ease-out forwards; }
@keyframes perso-halo { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }

/* Outils d'une carte : barre flottante en haut à droite (tableau) ou dans le titre (sections). */
.outils-carte { display: flex; flex: none; align-items: center; gap: 2px; padding: 3px; border: var(--card-edge) solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-float); }
/* Une petite carte étroite : la barre passe sur deux lignes plutôt que de déborder. */
.tableau-bord .outils-carte { align-self: flex-end; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.outils-carte__poignee { display: flex; flex: none; padding-inline: 2px; color: var(--text-2); cursor: grab; }
.outils-carte__poignee .icon, .outils-carte__outil .icon { width: var(--handle-icon); height: var(--handle-icon); }
.outils-carte__tailles { display: flex; flex: none; gap: 1px; padding-inline: 2px; }
.outils-carte__taille, .outils-carte__outil { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: var(--handle); height: var(--handle); padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: var(--fw-titre) var(--fs-caption) / 1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.outils-carte__taille:active, .outils-carte__outil:active:not(:disabled) { transform: scale(var(--press-scale)); }
.outils-carte__taille[aria-checked='true'], .outils-carte__outil[aria-pressed='true'] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); color: var(--accent-text); }
.outils-carte__outil:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .outils-carte__taille:hover:not([aria-checked='true']), .outils-carte__outil:hover:not(:disabled, [aria-pressed='true']) { background: var(--surface-2); color: var(--text); } }

/* Bandeau d'explication en tête de l'écran personnalisé. */
.bandeau-perso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--inset-y) var(--inset); border: var(--card-edge) solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent-text) 10%, var(--surface)); }
.bandeau-perso__icone { display: grid; flex: none; place-items: center; width: var(--pastille); height: var(--pastille); border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); }
.bandeau-perso__texte { display: flex; flex: 1 1 calc(var(--tap) * 5); flex-direction: column; gap: 2px; font-size: var(--fs-small); }
.bandeau-perso__texte strong { font-size: var(--fs-body); font-weight: var(--fw-titre); }

/* Le cadre de la page : place du panneau à droite (en bas sur un téléphone), fond pointillé (on édite une maquette). */
[data-personnalisation] [data-perso-cadre] { padding-inline-end: calc(var(--panneau-perso) + var(--s-3) + var(--gutter)); background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: var(--s-4) var(--s-4); }
/* Aperçu téléphone : la page dans un cadre de téléphone. */
@media (min-width: 600px) { [data-personnalisation][data-apercu-telephone] [data-perso-cadre] > * { max-width: var(--apercu-telephone); margin-inline: auto; padding: var(--s-4); border: var(--card-edge) solid var(--line-strong); border-radius: calc(var(--r-lg) * 2); background: var(--bg); box-shadow: var(--shadow-float); } }

/* Panneau « Mise en page » : glisse depuis la droite (depuis le bas sur un téléphone). */
.panneau-perso { position: fixed; z-index: 25; top: var(--perso-haut, var(--s-3)); right: var(--s-3); bottom: var(--s-3); display: flex; flex-direction: column; width: var(--panneau-perso); overflow: hidden; border: var(--card-edge) solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-float); color: var(--text); opacity: 0; transform: translateX(calc(100% + var(--s-5))); transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.panneau-perso[data-ouvert] { opacity: 1; transform: none; }
.panneau-perso__tete { padding: var(--inset); border-bottom: var(--card-edge) solid var(--line); }
.panneau-perso__nom { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-titre); }
.panneau-perso__niveau { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-small); }
.panneau-perso__niveau .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.panneau-perso__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panneau-perso__section { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--inset); border-bottom: var(--card-edge) solid var(--line); }
.panneau-perso__section--ajout { gap: var(--s-2); border-bottom: 0; }
.panneau-perso__titre { font-size: var(--fs-small); font-weight: var(--fw-titre); }
.panneau-perso__aide { margin: 0; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.45; }
.panneau-perso__segments { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: calc(var(--r-md) + 2px); background: var(--surface-2); }
.panneau-perso__segment { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-width: 0; min-height: var(--tap-small); padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: var(--fw-nom) var(--fs-small) / 1.2 var(--font); cursor: pointer; }
.panneau-perso__segment .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.panneau-perso__segment[aria-checked='true'] { background: color-mix(in srgb, var(--accent-text) 14%, var(--surface)); color: var(--accent-text); }
.panneau-perso__famille { margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); letter-spacing: var(--track-caps); text-transform: uppercase; }
.panneau-perso__carte { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--tap-small); padding: var(--s-2) var(--s-3); border: var(--card-edge) solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-small); text-align: start; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.panneau-perso__carte:active { transform: scale(var(--press-scale)); }
.panneau-perso__carte .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--text-2); }
.panneau-perso__carte .icon:last-child { color: var(--accent-text); }
.panneau-perso__carte .row__main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .panneau-perso__carte:hover, .panneau-perso__segment:hover:not([aria-checked='true']) { background: var(--surface-2); } }
.panneau-perso__pied { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--inset); border-top: var(--card-edge) solid var(--line); }
.panneau-perso__secondaires { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.panneau-perso__secondaires > .btn { flex: 1 1 auto; }
@media (max-width: 599px) {
  [data-personnalisation] [data-perso-cadre] { padding-inline-end: var(--gutter); padding-bottom: 60vh; }
  /* Déjà sur un téléphone : pas d'aperçu à choisir. */
  .panneau-perso__section--apercu { display: none; }
  .panneau-perso { top: auto; left: var(--s-3); width: auto; height: 55vh; transform: translateY(calc(100% + var(--s-5))); }
}

/* Écran en blocs de champs, copie du design center de SIRH (web/mise-en-page.js) : lignes de blocs, rangées de cases,
   chaque case tient un champ. Les cases d'une rangée se partagent la place à parts égales, la largeur minimale décide
   du passage à la ligne. */
.mep { display: flex; flex-direction: column; gap: var(--block-gap); min-width: 0; }
.mep__ligne { --g: var(--block-gap); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--block-gap); }
.mep__panneau-onglet { display: flex; flex-direction: column; gap: var(--block-gap); min-width: 0; }
.mep__bloc { position: relative; display: flex; flex: 1 1 calc(var(--tap) * 8); flex-direction: column; gap: var(--head-gap); min-width: 0; }
.mep__contenu { min-width: 0; }
.mep__rangees { display: flex; flex-direction: column; gap: var(--s-4); }
.mep__rangee { --g: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
/* Largeur choisie : 25, 50, 75 ou 100 % de la ligne, écarts compris (quatre quarts et trois écarts font la ligne). */
.mep__case[data-largeur], .mep__bloc[data-largeur] { flex: 0 0 calc(var(--l) * 1% - var(--g) * (100 - var(--l)) / 100); }
[data-largeur='25'] { --l: 25; }
[data-largeur='50'] { --l: 50; }
[data-largeur='75'] { --l: 75; }
[data-largeur='100'] { --l: 100; }
/* Étroit (téléphone, aperçu téléphone) : chaque bloc et chaque champ reprend toute la ligne. */
.mep__panneau-onglet { container-type: inline-size; }
@container (max-width: 599px) { .mep__case[data-largeur], .mep__bloc[data-largeur] { flex-basis: 100%; } }
.mep__case { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-start; min-width: min(100%, calc(var(--tap) * 5)); }
.mep__case--oui-non { justify-content: center; }
/* Case ou bloc vide hors personnalisation : garde sa largeur dans la ligne, sans rien montrer ni occuper de hauteur. */
.mep__case--fantome, .mep__bloc--fantome { visibility: hidden; min-height: 0; }
.mep__case--tableau { min-width: min(100%, calc(var(--tap) * 7)); }
.mep__case > .field { min-width: 0; }
.mep__requis { margin-inline-start: 2px; color: var(--danger); font-weight: var(--fw-titre); text-decoration: none; }
.mep__bascule { min-height: var(--tap); }
.mep__tableau .tableau { border: var(--card-edge) solid var(--line); }
.mep__encart { color: var(--text); }
.mep__encart > .mep__nom { color: var(--text-2); }
/* Bloc qui ne tient qu'un encart « bord » (un tableau avec sa barre) : bord à bord, l'encart sans son propre cadre. */
.mep__bloc--bord { overflow: hidden; padding: 0; }
.mep__bloc--bord .tableau-carte { border: 0; border-radius: 0; background: none; box-shadow: none; }
.mep__squelette { display: flex; flex-direction: column; gap: var(--s-2); }
.mep__squelette-nom { width: 40%; height: var(--fs-small); }
.mep__squelette-saisie { display: block; width: 100%; height: var(--tap); }
/* Titre de bloc : il replie la carte (hors personnalisation). */
.mep__tete { min-width: 0; margin: 0; font-size: var(--fs-body); }
.mep__replier { display: flex; flex: 1 1 auto; align-items: center; gap: var(--s-2); min-width: 0; min-height: var(--tap-small); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mep__replier > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mep__replier > .mep__pastille { flex: none; overflow: visible; }
/* Icône du titre en personnalisation : la pastille de l'icône, ou un rond en pointillés « + » pour en ajouter une. */
.mep__icone-titre { display: grid; flex: none; place-items: center; width: var(--pastille); height: var(--pastille); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text-2) 16%, var(--surface)); color: var(--text-2); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.mep__icone-titre .icon { width: var(--icon-md); height: var(--icon-md); }
.mep__icone-titre:active { transform: scale(var(--press-scale)); }
.mep__icone-titre--vide { background: none; box-shadow: inset 0 0 0 var(--card-edge) var(--line-strong); color: var(--text-2); }
.mep__icone-titre--vide .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mep__replier > .icon, .mep__fleche .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--text-2); transition: transform var(--t-slow) var(--ease-out); }
.mep__bloc--replie .mep__replier > .icon, .mep__bloc--replie .mep__fleche .icon { transform: rotate(-90deg); }
.mep__barre-onglets { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.mep__onglets { flex: 0 1 auto; min-width: 0; }
.mep__onglets .badge { margin-inline-start: var(--s-1); }
.mep__nouveautes { margin: 0; }

/* Personnalisation : chaque case en pointillés, assez haute pour ses boutons ; les outils au survol ou au clavier. */
[data-mep-edition] .mep__case { min-height: calc(var(--tap) + var(--s-6)); padding: var(--s-2); border: var(--card-edge) dashed var(--line-strong); border-radius: var(--r-sm); }
[data-mep-edition] .mep__case--vide { min-width: min(100%, calc(var(--tap) * 3.5)); justify-content: center; }
[data-mep-edition] .mep__case[draggable='true'] { cursor: grab; }
[data-mep-edition] .mep__case:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
[data-mep-edition] .mep__case[data-depot='oui'] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
[data-mep-edition] .mep__case[data-depot='non'] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); cursor: not-allowed; }
.mep__case[data-deplacee] { opacity: 0.5; }
/* Arrivée après un déplacement (marquerArrivee) : un contour bref à l'accent, sur n'importe quel élément. */
[data-arrivee] { position: relative; }
[data-arrivee]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--accent); pointer-events: none; animation: perso-halo 1s ease-out forwards; }
.mep__case[data-arrivee]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--accent); pointer-events: none; animation: perso-halo 1s ease-out forwards; }
.mep__vide { color: var(--text-2); font-size: var(--fs-small); text-align: center; }
[data-mep-edition] .mep__bloc { outline: 1px dashed var(--line-strong); outline-offset: -1px; }
.mep__outils { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: color-mix(in srgb, var(--accent-text) 8%, transparent); box-shadow: inset 0 0 0 2px var(--accent-text); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
/* Au survol, ou au toucher (la case prend le focus) ; voile invisible sinon, et sans réaction. */
.mep__outils { pointer-events: none; }
.mep__case:hover > .mep__outils, .mep__case:focus-within > .mep__outils, .mep__case:focus > .mep__outils { opacity: 1; pointer-events: auto; }
/* Boutons d'une case centrés sur son voile, comme SIRH (retirer ou cadenas, déplacer, colonnes). */
.mep__milieu { display: flex; align-items: center; gap: var(--s-2); }
/* Bord droit d'un champ ou d'un bloc : une bande invisible où le curseur devient ↔ ; on tire pour changer la largeur. Trait seulement au clavier. */
.mep__bord { position: absolute; z-index: 1; top: 0; right: calc(var(--s-1) * -1); bottom: 0; width: var(--s-2); cursor: ew-resize; touch-action: none; }
.mep__bloc-outils .mep__bord { pointer-events: auto; }
/* Icône ↔ : en bas à droite d'un champ (accent), en haut à droite d'un bloc (secondaire). */
.mep__largeur { position: absolute; z-index: 2; right: 0; bottom: 0; display: grid; place-items: center; width: calc(var(--handle) - var(--s-1)); height: calc(var(--handle) - var(--s-1)); border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: ew-resize; touch-action: none; transform: translate(35%, 35%); }
.mep__largeur .icon { width: var(--handle-icon); height: var(--handle-icon); }
.mep__largeur:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.mep__bloc-outils .mep__largeur { top: 0; bottom: auto; background: var(--secondaire); color: var(--on-secondaire); pointer-events: auto; transform: translate(35%, -35%); }
[data-redim] { cursor: ew-resize; }
[data-redim] > .mep__outils, [data-redim] > .mep__bloc-outils { opacity: 1; }
[data-redim]::before { content: attr(data-redim-valeur); position: absolute; z-index: 3; top: var(--s-2); right: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-size: var(--fs-caption); font-weight: var(--fw-nom); pointer-events: none; }
.mep__rond { display: inline-grid; flex: none; place-items: center; width: var(--handle); height: var(--handle); padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.mep__rond .icon { width: var(--handle-icon); height: var(--handle-icon); }
.mep__rond--retirer { background: var(--danger); color: var(--surface); }
.mep__rond--verrou { cursor: default; }
button.mep__rond:active { transform: scale(var(--press-scale)); }
/* Les « + » : ronds, à cheval sur le bord de la case (accent) ou à côté du bloc (neutres). */
.mep__plus { position: absolute; z-index: 2; display: grid; place-items: center; width: calc(var(--handle) - var(--s-1)); height: calc(var(--handle) - var(--s-1)); padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.mep__plus .icon { width: var(--handle-icon); height: var(--handle-icon); }
.mep__plus--haut { top: 0; left: 50%; transform: translate(-50%, -50%); }
.mep__plus--bas { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.mep__plus--gauche { top: 50%; left: 0; transform: translate(-50%, -50%); }
.mep__plus--droite { top: 50%; right: 0; transform: translate(50%, -50%); }
.mep__bloc-outils { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.mep__bloc:hover > .mep__bloc-outils, .mep__bloc:focus-within > .mep__bloc-outils { opacity: 1; }
/* Bloc survolé : encadré de la couleur secondaire (violet pour l'instant, jeton --secondaire), distinct de l'accent des cases. */
.mep__bloc-outils { border-radius: inherit; background: color-mix(in srgb, var(--secondaire) 4%, transparent); box-shadow: inset 0 0 0 2px var(--secondaire); }
.mep__bloc-outils .mep__plus { background: var(--secondaire); color: var(--on-secondaire); box-shadow: var(--shadow-float); pointer-events: auto; }
.mep__bloc-outils .mep__plus--haut { top: calc(var(--s-2) * -1); }
.mep__bloc-outils .mep__plus--bas { bottom: calc(var(--s-2) * -1); }
.mep__bloc-outils .mep__plus--gauche { left: calc(var(--s-2) * -1); }
.mep__bloc-outils .mep__plus--droite { right: calc(var(--s-2) * -1); }
/* Titre modifiable sur place : du texte, qui devient champ au focus. */
.mep__titre { flex: 1 1 auto; min-width: 0; min-height: var(--tap-small); padding: 0 var(--s-2); border: var(--card-edge) dashed transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font: var(--fw-titre) var(--fs-body) / 1.2 var(--font); }
.mep__titre::placeholder { color: var(--accent-text); font-weight: var(--fw-titre); opacity: 1; }
.mep__titre:hover { border-color: var(--line-strong); }
.mep__titre:focus { border-color: var(--accent-text); border-style: solid; outline: none; background: var(--surface); }
.mep__ajout-onglet { flex: none; color: var(--accent-text); }
.mep__premier { align-self: flex-start; }
/* Panneau : champs de l'écran, à glisser. */
.mep__panneau-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.mep__panneau-titre .icon-btn { width: var(--tap-small); height: var(--tap-small); }
.mep__panneau-titre .icon-btn:disabled { opacity: 0.35; }
.mep__dispo { cursor: grab; }
.mep__dispo .icon:first-child { color: var(--text-2); }
.mep__dispo .icon:last-child { color: var(--text-2); }
.mep__dispo .badge { flex: none; }
.mep__type { flex: none; color: var(--text-2); font-size: var(--fs-caption); }

/* Raccourci de tâche : ce qui attend, avec son nombre. Un appui y mène. */
.raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tap) * 5)), 1fr)); gap: var(--s-3); width: 100%; }
.raccourci { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--inset-y) var(--inset); border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.raccourci:active { transform: scale(0.98); }
.raccourci:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.raccourci__nombre { display: grid; place-items: center; flex: none; min-width: calc(var(--tap) / 2); height: calc(var(--tap) / 2); padding-inline: var(--s-2); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-small); font-weight: var(--fw-titre); font-variant-numeric: tabular-nums; }

/* Clé-valeur en ligne : l'essentiel d'une fiche au-dessus de ses onglets. */
.cles--ligne { grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap) * 3.2), 1fr)); gap: var(--block-gap); }
.cles--ligne > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cles--ligne dt, .cles--ligne dd { padding: 0; box-shadow: none; text-align: start; }
.cles--ligne dd { font-weight: var(--fw-titre); }

/* Barre d'enregistrement collée au bas de l'écran, et passage d'une fiche à l'autre. */
.barre-enregistrer--collee { position: sticky; bottom: var(--s-3); z-index: 5; }
.suivant-precedent { display: inline-flex; align-items: center; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.suivant-precedent__rang { min-width: calc(var(--tap) * 0.9); text-align: center; }

/* Tableau dans une carte : la carte fait le cadre. Actions de ligne toujours visibles, à droite. */
.card .tableau { border: 0; border-radius: var(--r-sm); box-shadow: none; }
.table__actions { width: 1%; white-space: nowrap; text-align: end; }

/* Bloc de réglage libre, dans un panneau : un intitulé, le réglage (puces, tuiles…), une aide. Un filet le sépare des lignes voisines. */
.bloc__corps { display: flex; flex-direction: column; gap: var(--head-gap); padding: var(--inset); }
.bloc__ligne + .bloc__corps, .bloc__corps + .bloc__corps, .bloc__corps + .bloc__ligne, .bloc__ligne + .bloc__sous-titre, .bloc__corps + .bloc__sous-titre { box-shadow: inset 0 1px 0 var(--line); }
.bloc__corps--large { gap: var(--s-5); }
/* Plusieurs réglages dans un même corps (sortie audio puis volume) : chacun son intitulé, sa commande, son aide ; s5 entre eux, sans filet. */
.bloc__reglage { display: flex; flex-direction: column; gap: var(--head-gap); min-width: 0; }
.bloc__intitule { margin: 0; color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-texte); }
.bloc__aide { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
.bloc__aide[data-accent] { color: var(--accent-text); }
.bloc__sous-titre { margin: 0; padding: var(--inset) var(--inset) 0; color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-nom); text-transform: uppercase; letter-spacing: calc(var(--track-caps) * 2); }
.bloc__sous-titre + .bloc__corps { padding-top: var(--inset-y); }
.bloc__valeur { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--text-2); font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
/* Ligne qui déplie la suite du panneau : la flèche tourne. */
.bloc__fleche { flex: none; color: var(--text-2); transition: transform var(--t-slow) var(--ease-out); }
[aria-expanded='true'] > .bloc__fleche { transform: rotate(180deg); }

/* Création d'un minuteur (repris de Clepso) : vignettes, emoji, couleurs, croquis des réglages, jours, coche de ligne. */
/* Vignette : un objet en petit, au début d'une ligne. Ce qu'elle contient se dessine en proportion de sa taille. */
.vignette { container-type: size; display: grid; flex: none; place-items: center; width: var(--vignette); height: var(--vignette); color: var(--text); }
.vignette > * { grid-area: 1 / 1; }
.vignette__couleur { display: block; width: 100%; }
.vignette .anneau { --ep: var(--s-1); width: 100%; }
.vignette .anneau--interieur { --ep: 2px; inset: calc(var(--s-1) * 2); width: auto; }
.vignette .anneau--etapes > .anneau__centre { inset: calc(var(--s-1) * 2.5); }
.vignette .anneau__centre { font-size: max(18cqw, 9px); font-weight: var(--fw-nom); font-variant-numeric: tabular-nums; line-height: 1; }
.vignette__emoji { font-size: 25cqw; line-height: 1; }
.vignette__pale { color: var(--text-2); }
.vignette__barres { display: flex; flex-direction: column; justify-content: center; gap: 11cqw; width: 100%; }
.vignette__barres .temps-barre { height: 11cqw; background: color-mix(in srgb, var(--mc) 22%, transparent); color: var(--mc); }
.vignette__durees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7cqw; width: 100%; height: 100%; padding: 3.5cqw; }
.vignette__durees span { display: grid; place-items: center; border-radius: 14cqw; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent-text); font-size: max(18cqw, 9px); }
.vignette__bouton { display: grid; place-items: center; width: 86%; height: 86%; border-radius: 25cqw; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent-text); }
.vignette__bouton .icon { width: 43cqw; height: 43cqw; }
.bloc__ligne > .vignette { margin-inline-start: calc(var(--s-1) * -1); }

/* Bouton d'emoji, à gauche d'un nom : l'emoji choisi, une suggestion pâle, ou de quoi en choisir un. */
.emoji-btn { display: grid; flex: none; place-items: center; width: var(--tap-block); height: var(--tap-block); padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-h2); line-height: 1; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.emoji-btn:active { transform: scale(var(--press-scale)); }
.emoji-btn[aria-expanded='true'] { background: color-mix(in srgb, var(--accent-text) 16%, var(--surface)); color: var(--accent-text); }
.emoji-btn__pale { opacity: 0.45; }
.nom-emoji { display: flex; align-items: center; gap: var(--s-2); }
.nom-emoji > .recherche__champ, .nom-emoji > .champ-suffixe, .nom-emoji > .input { flex: 1; min-width: 0; }
/* Grille d'emojis : la grille de symboles, les suggérés d'abord, à part. La première case retire l'emoji. */
.grille-emojis { display: flex; flex-direction: column; gap: var(--s-2); }
.grille-emojis__sep { height: 1px; background: var(--line); }
/* Emojis suggérés au bout d'un champ : pâles, un appui en prend un. */
.emojis-suggeres { position: absolute; right: var(--s-1); display: flex; }
.champ-suffixe { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; }
.champ-suffixe .input { padding-inline-end: var(--tap); }
.champ-suffixe--emojis .input { padding-inline-end: calc(var(--tap-small) * 3 + var(--s-1)); }
.champ-suffixe > .icon-btn { position: absolute; right: 0; }
/* Sur une zone de texte, le bouton reste en haut à droite. */
.champ-suffixe--haut { align-items: flex-start; }
.champ-suffixe--haut > .icon-btn { top: var(--s-1); right: var(--s-1); }
.emojis-suggeres button { display: grid; place-items: center; width: var(--tap-small); height: var(--tap-small); padding: 0; border: 0; border-radius: 50%; background: none; font-size: var(--fs-h3); opacity: 0.5; cursor: pointer; }

/* Couleurs : la choisie a son contour et sa coche ; la dernière ouvre la couleur sur mesure ; une pastille barrée = aucune. */
.couleur-point { position: relative; display: grid; place-items: center; background-color: var(--mc, var(--surface-2)); color: var(--encre, var(--bg)); transition: transform var(--t-press) var(--ease-out); }
.couleur-point:active { transform: scale(var(--press-scale)); }
.couleur-point > .icon { width: 56%; height: 56%; stroke-width: calc(var(--icon-stroke) * 1.4); transform: scale(0.4); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast); }
.couleur-point[aria-pressed='true'] > .icon { transform: none; opacity: 1; }
.couleur-point--perso { background: conic-gradient(var(--data-8), var(--data-4), var(--data-6), var(--data-1), var(--data-7), var(--data-5), var(--data-8)); color: var(--surface); }
.couleur-point--perso > .icon { transform: none; opacity: 1; }
.couleur-point--perso[aria-pressed='true'] { outline: 2px solid var(--text); outline-offset: 2px; }
/* Sur mesure choisie : la pastille prend la couleur choisie (--mc, posée par poserChoixCouleur) et sa coche, à l'encre lisible. */
.couleur-point--perso.couleur-perso[aria-pressed='true'] { background: var(--mc); color: var(--encre, var(--surface)); }
.couleur-point--aucune { background: none; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.couleur-point--aucune::before { content: ''; position: absolute; width: 1.5px; height: 70%; border-radius: 1px; background: var(--line-strong); transform: rotate(45deg); }
.couleur-point--aucune[aria-pressed='true']::before { opacity: 0; }
.choix-couleurs { display: flex; justify-content: space-between; gap: var(--s-3); overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: none; }

/* Valeur que « Général » donne, quand c'est lui qui est choisi : contour en pointillés. */
.chip[data-implicite]:not([aria-pressed='true']), .tuile-choix[data-implicite]:not([aria-pressed='true']) { outline: 2px dashed var(--text-2); outline-offset: -2px; }
.chip > .icon:first-child { margin-inline: 0 var(--s-1); }

/* Croquis : de petits dessins à l'encre de la tuile, pour l'aperçu d'un réglage. */
.croquis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: currentColor; font-size: var(--fs-caption); font-weight: var(--fw-titre); line-height: 1; }
.croquis__anneau { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(var(--tap) * 1.05); aspect-ratio: 1; border: var(--s-1) solid currentColor; border-radius: 50%; }
.croquis__temps { color: var(--text); font-size: var(--fs-small); font-weight: var(--graisse-temps, var(--fw-phrase)); }
.croquis__bouton { display: grid; place-items: center; min-width: calc(var(--tap) * 1.2); height: calc(var(--tap) * 0.65); padding-inline: var(--s-1); border-radius: var(--r-sm); background: color-mix(in srgb, currentColor 18%, transparent); font-size: var(--fs-small); font-weight: var(--fw-nom); }
.croquis__bouton b { font-weight: var(--fw-titre); }
.croquis-palette { flex-direction: row; gap: var(--s-1); }
.croquis-palette > i { width: var(--s-4); height: var(--s-4); border-radius: 50%; background: color-mix(in srgb, var(--mc) 30%, var(--surface)); box-shadow: inset 0 0 0 2px var(--mc); }
.croquis-palette--sobre > i { --mc: var(--text-2); }
.croquis-palette > b { width: var(--s-5); height: var(--s-4); border-radius: var(--r-pill); background: var(--accent); }
.croquis__bouton--signe { font-size: var(--fs-h2); font-weight: var(--fw-texte); }
.croquis__bouton--plein { background: currentColor; }
.croquis__bouton--plein > * { color: var(--surface); }
.croquis__bouton--contour { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.croquis__carte { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--s-1); width: calc(var(--tap) * 1.2); height: var(--tap); padding: 6px; border: 1.5px solid currentColor; border-radius: var(--r-sm); }
.croquis__carte i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.croquis .icon { width: var(--icon); height: var(--icon); }
.croquis__action { display: flex; align-items: center; justify-content: center; gap: var(--s-1); width: calc(var(--tap) * 1.3); height: calc(var(--tap) * 0.68); border-radius: var(--r-pill); background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); }
.croquis .croquis__action .icon { width: calc(var(--tap) * 0.32); height: calc(var(--tap) * 0.32); }
.croquis__action i { width: 30%; height: calc(var(--s-1) * 0.75); border-radius: var(--r-pill); background: currentColor; }
.croquis__action--contour { background: none; color: var(--mc, var(--accent-text)); box-shadow: inset 0 0 0 2px currentColor; }
.croquis__action--teinte { background: color-mix(in srgb, var(--mc, var(--accent-text)) 16%, var(--surface)); color: var(--mc, var(--accent-text)); }
.tuile-choix__apercu .vignette, .tuile-choix__apercu .croquis { place-self: center; }
/* Croquis faits des vrais objets en petit, à l'encre de la tuile : anneau avec ses boutons + et −, forme du temps. */
.croquis--objet { --mc: currentColor; width: calc(var(--tap) * 1.2); height: calc(var(--tap) * 1.2); }
.croquis--objet .anneau { --ep: 3px; }
.croquis--objet .minuteur__carre { width: 100%; height: 100%; }
.croquis--forme { --mc: var(--accent-text); width: var(--tap); height: var(--tap); }
.croquis--forme .anneau { --ep: 5px; }
.croquis--forme .cadran { width: 100%; }
/* Toutes sur une ligne tant qu'elles ont la place ; trop serrées, elles passent à la ligne plutôt que de couper leurs noms. */
.tuiles--ligne { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tap) * 1.75)), 1fr)); }
/* Défilante (une rangée de filtres plus longue que l'écran, repris de Cuisine) : toujours une seule ligne, qui défile de côté sans barre ;
   chaque tuile garde au moins 1,9 cible de large. La marge intérieure laisse voir le contour du focus, que le défilement couperait. */
.tuiles--defilante { grid-auto-flow: column; grid-auto-columns: minmax(calc(var(--tap) * 1.9), 1fr); grid-template-columns: none; margin: calc(var(--s-1) * -1); padding: var(--s-1); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.tuiles--defilante::-webkit-scrollbar { display: none; }
/* Tuile trop étroite pour la coche et un nom d'un mot (trois tuiles en ligne sur un téléphone) : la coche passe au coin
   haut de la tuile, le nom garde toute la largeur (jamais rogné). Dans une grille de tuiles seulement : leur largeur y est fixée. */
.tuiles > .tuile-choix { container: tuile / inline-size; }
@container tuile (max-width: 8.5em) {
  .tuile-choix__coche { position: absolute; grid-area: auto; top: var(--s-1); inset-inline-end: var(--s-1); box-shadow: 0 0 0 2px var(--surface); }
  .tuile-choix[aria-pressed='true'] .tuile-choix__coche { margin: 0; }
}
/* Croquis de réglages d'affichage et d'écran (repris de Clepso) : chiffres, téléphone, anneau qui se vide, mouvement en boucle. */
.croquis__chiffres { color: var(--text); font-size: var(--fs-small); font-weight: var(--graisse-temps, var(--fw-phrase)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.croquis--forme .anneau--anti { --ep: 5px; }
/* Téléphone : un cadre à l'encre de la tuile, ce qu'il montre dedans. data-fond : l'écran noir ou blanc d'un plein écran. */
.croquis__telephone { position: relative; display: flex; flex-direction: column; gap: 3px; width: calc(var(--tap) * 0.85); height: calc(var(--tap) * 1.3); padding: 5px 4px; border: 1.5px solid currentColor; border-radius: calc(var(--r-sm) * 0.8); background: var(--bg); }
.croquis__telephone[data-fond] { align-items: center; justify-content: center; background: var(--plein-fond); color-scheme: dark; }
.croquis__telephone[data-fond='blanc'] { color-scheme: light; }
.croquis__telephone .croquis__anneau { --mc: var(--accent-text); width: calc(var(--tap) * 0.7); border-width: 3px; border-color: var(--accent-text); }
.croquis__telephone .croquis__temps { font-size: 9px; }
.croquis__ligne { display: flex; align-items: center; justify-content: space-evenly; gap: 2px; }
.croquis__trait { flex: 1; height: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 45%, transparent); }
.croquis__trait--court { flex: 0 0 45%; }
.croquis__rond { width: 11px; height: 11px; border: 2px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 50%; }
.croquis__plus { display: grid; flex: none; place-items: center; width: 11px; height: 11px; border: 1.2px solid currentColor; border-radius: 50%; background: color-mix(in srgb, currentColor 15%, transparent); font-size: 9px; font-weight: var(--fw-titre); line-height: 1; }
.croquis__plus--plein { position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; background: color-mix(in srgb, currentColor 30%, transparent); font-size: 12px; }
/* Notification sur l'écran verrouillé : tout, sans détail (une ligne courte), rien. */
.croquis__notif { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 18%, transparent); }
/* Carte de minuteur en petit, dans un affichage : anneaux seuls, carte teintée avec son anneau, carte pleine. */
.croquis__style { display: grid; place-items: center; width: calc(var(--tap) * 1.25); aspect-ratio: 1; border-radius: var(--r-sm); }
.croquis__style .anneau { --mc: currentColor; --ep: 4px; width: 78%; }
.croquis__style--teintee { background: color-mix(in srgb, currentColor 30%, var(--surface)); }
.croquis__style--teintee .anneau { --ep: 6px; width: 70%; }
.croquis__style--pleine { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 9px 8px; background: currentColor; }
.croquis__style--pleine i { display: block; border-radius: 2px; background: var(--surface); }
.croquis__style--pleine i:nth-child(1) { width: 40%; height: 4px; opacity: 0.7; }
.croquis__style--pleine i:nth-child(2) { width: 66%; height: 12px; }
.croquis__style--pleine i:nth-child(3) { width: 100%; height: 4px; background: linear-gradient(90deg, var(--surface) 72%, color-mix(in srgb, var(--surface) 30%, transparent) 72%); }
/* Force en niveaux (vibration) : trois barres, les premières pleines ; points espacés régulièrement ou de plus en plus serrés. */
.croquis__style--plein { background: currentColor; }
.croquis__style--vide { border: 1.5px dashed currentColor; }
.croquis__niveau { display: flex; align-items: flex-end; gap: 3px; height: calc(var(--tap) * 0.5); }
.croquis__niveau i { width: 6px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); }
.croquis__niveau i:nth-child(1) { height: 40%; }
.croquis__niveau i:nth-child(2) { height: 70%; }
.croquis__niveau i:nth-child(3) { height: 100%; }
.croquis__niveau[data-n='1'] i:nth-child(-n + 1), .croquis__niveau[data-n='2'] i:nth-child(-n + 2), .croquis__niveau[data-n='3'] i { background: currentColor; }
.croquis__points { display: flex; align-items: center; gap: 7px; }
.croquis__points i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.croquis__points--serres i:nth-child(2) { margin-inline-start: -2px; }
.croquis__points--serres i:nth-child(3) { margin-inline-start: -4px; }
.croquis__points--serres i:nth-child(n + 4) { margin-inline-start: -5px; }
/* Mouvement en boucle (.croquis-boucle) : un temps qui passe l'heure, un panneau qui monte et redescend. Gardé même
   animations coupées par l'app, puisqu'il les montre ; arrêté par le mouvement réduit de l'appareil. */
.croquis__defile { position: relative; display: grid; overflow: hidden; height: 1.5em; color: var(--text); font-size: var(--fs-h3); font-weight: var(--graisse-temps, var(--fw-phrase)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.croquis__defile > span { grid-area: 1 / 1; place-self: center; animation: croquis-defile 3.2s var(--ease-out) infinite both; }
.croquis__defile > span + span { animation-delay: -1.6s; }
@keyframes croquis-defile { 0% { opacity: 0; transform: translateY(60%); } 8%, 50% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: translateY(-60%); } }
.croquis__ecran { position: relative; display: flex; flex-direction: column; gap: 4px; overflow: hidden; width: calc(var(--tap) * 0.85); height: calc(var(--tap) * 1.3); padding: 7px 5px; border: 1.5px solid currentColor; border-radius: calc(var(--r-sm) * 0.8); background: var(--bg); }
.croquis__ecran > i { height: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--text) 30%, transparent); }
.croquis__ecran > i:nth-child(2) { width: 60%; }
.croquis__panneau { position: absolute; inset: auto 0 0; height: 48%; border-radius: 6px 6px 0 0; background: var(--surface-2); box-shadow: 0 -1px 0 var(--line); animation: croquis-panneau 4s infinite; }
.croquis__panneau i { position: absolute; top: 6px; left: 20%; width: 60%; height: 4px; border-radius: var(--r-pill); background: var(--accent); }
@keyframes croquis-panneau { 0%, 40% { transform: translateY(105%); animation-timing-function: var(--ease-out); } 50%, 90% { transform: none; animation-timing-function: var(--ease-out); } 100% { transform: translateY(105%); } }
.croquis__panneau--sec { animation-name: croquis-panneau-sec; }
@keyframes croquis-panneau-sec { 0%, 49.9% { transform: translateY(105%); } 50%, 99.9% { transform: none; } 100% { transform: translateY(105%); } }
@media (prefers-reduced-motion: reduce) { .toast__moitie i { animation: none; } }
:root[data-sans-animation] .toast__moitie i { animation: none; }
@media (prefers-reduced-motion: reduce) { .croquis__defile > span, .croquis__panneau { animation: none; } .croquis__defile > span + span { display: none; } }

/* Cadre d'aperçu : dit qu'il montre, et non qu'il se touche. Dans les deux thèmes côte à côte, avec ce qu'habille la couleur. */
.apercu-cadre { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-2) 50%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.apercu-cadre > .section-title { display: flex; align-items: center; gap: var(--s-2); }
.apercu-cadre > .section-title .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Titre en casse normale (une phrase, pas un libellé court) : « Aperçu dans le menu d'un minuteur (non cliquable) ». */
.apercu-cadre__titre { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-small); }
.apercu-cadre__titre .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.apercus--fixe { position: static; margin: 0; padding: 0; background: none; }
.apercus--fixe .apercu { align-items: center; text-align: center; }
.apercu__carte { display: grid; place-items: center; width: 100%; height: calc(var(--tap) * 3.5); }

/* Ligne d'une liste à choix unique : la coche apparaît au bout de la ligne choisie. */
.bloc__coche { flex: none; color: var(--accent-text); transform: scale(0.4); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast); }
.bloc__ligne[aria-pressed='true'] > .bloc__coche { transform: none; opacity: 1; }
.bloc__ligne > .bloc__coche.icon { color: var(--accent-text); }

/* Un nombre saisi au pavé : grand, pâle tant qu'aucune touche ne l'a remplacé. */
.nombre-saisi { margin: 0; font-size: calc(var(--fs-num) * 1.1); font-weight: var(--fw-phrase); line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; }
.nombre-saisi[data-pale] { color: var(--text-2); }

/* Recherche : un retour au début du champ, à la place de la loupe. */
.recherche__champ > .recherche__retour { position: absolute; left: 0; right: auto; }
.recherche__champ > .recherche__retour ~ .input { padding-left: var(--tap); }

/* Menu d'un objet, repris de Clepso (menu_actions.dart) : l'objet en tête, dans sa couleur, puis ce qui le commande en boutons ronds. */
.carte-tete { container-type: inline-size; display: flex; flex-direction: column; padding: calc(var(--inset) + var(--s-1) / 2) calc(var(--inset) + var(--s-1)) calc(var(--inset) + var(--s-1)); border-radius: var(--r-lg); background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); }
.carte-tete__titre { overflow: hidden; font-size: var(--fs-body); font-weight: var(--fw-nom); text-overflow: ellipsis; white-space: nowrap; }
.carte-tete__sous { color: color-mix(in srgb, currentColor 80%, transparent); font-size: var(--fs-small); }
.carte-tete__ligne { display: flex; align-items: center; gap: var(--s-3); }
.carte-tete__temps { flex: 1; min-width: 0; overflow: hidden; font-size: min(var(--fs-hero), 22cqw); font-weight: var(--graisse-temps, var(--fw-phrase)); line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-tete__temps--heures { font-size: min(var(--fs-hero), 14cqw); }
.carte-tete__ligne--pilules .carte-tete__temps { font-size: min(var(--fs-hero), 16cqw); }
.carte-tete__ligne--pilules .carte-tete__temps--heures { font-size: min(var(--fs-hero), 10.5cqw); }
.carte-tete__temps--long { font-size: min(var(--fs-hero), 11cqw); }
.carte-tete__ligne--pilules .carte-tete__temps--long { font-size: min(var(--fs-hero), 8.5cqw); }
.carte-tete__cote { display: flex; flex: none; gap: var(--s-2); }
.carte-tete__ajust { display: grid; place-items: center; min-width: var(--tap-block); height: var(--tap-block); padding: 0; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; font: var(--fw-nom) var(--fs-body) / 1 var(--font); white-space: nowrap; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.carte-tete__ajust--temps { padding-inline: calc(var(--s-3) + var(--s-1) / 2); }
.carte-tete__ajust .icon { width: calc(var(--tap-block) * 0.54); height: calc(var(--tap-block) * 0.54); }
.carte-tete__ajust:active:not(:disabled) { transform: scale(var(--press-scale)); }
.carte-tete__ajust:disabled { background: color-mix(in srgb, currentColor 8%, transparent); color: color-mix(in srgb, currentColor 40%, transparent); cursor: default; }
.carte-tete > .temps-barre { height: calc(var(--s-1) * 1.5); margin-block-start: var(--s-2); background: color-mix(in srgb, currentColor 25%, transparent); }
.carte-tete > .pilules { margin-block-start: var(--s-4); }
.carte-tete .pilule-teinte { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }
/* Pilules teintées : une valeur d'un appui (ajouter 5 min, une durée de lancement). */
.pilules { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pilule-teinte { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pill); padding-inline: var(--s-4); border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--mc, var(--accent-text)) 18%, transparent); color: color-mix(in srgb, var(--mc, var(--accent-text)) 70%, var(--text)); font: var(--fw-nom) var(--fs-body) / 1 var(--font); white-space: nowrap; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.pilule-teinte:active { transform: scale(var(--press-scale)); }
/* Quatre pilules sur deux rangées égales (cases du Lanceur) ; une case vide en pointillés. */
.pilules--deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pilule-teinte--vide { background: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text-2); }
/* Boutons ronds : le principal au milieu, grand et de la couleur de l'objet, deux plus petits de chaque côté, chacun nommé dessous. */
.ronds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: var(--rounds-max); margin-inline: auto; }
.rond { display: flex; grid-row: 1; flex-direction: column; align-items: center; min-width: 0; padding: 0; border: 0; background: none; color: var(--text-2); font: var(--fw-nom) var(--fs-caption) / 1.3 var(--font); cursor: pointer; }
.rond--debut { grid-column: 1; }
.rond--principal { grid-column: 2; }
.rond--fin { grid-column: 3; }
.rond__bouton { display: grid; place-items: center; width: var(--round-side); height: var(--round-side); margin-block: calc((var(--round) - var(--round-side)) / 2); border-radius: 50%; background: var(--surface-2); color: var(--text); transition: transform var(--t-press) var(--ease-out); }
.rond__bouton .icon { width: calc(var(--round-side) * 0.42); height: calc(var(--round-side) * 0.42); }
.rond--principal .rond__bouton { width: var(--round); height: var(--round); margin-block: 0; background: var(--mc, var(--accent-text)); color: var(--encre, var(--bg)); }
.rond--principal .rond__bouton .icon { width: calc(var(--round) * 0.42); height: calc(var(--round) * 0.42); }
.rond:active .rond__bouton { transform: scale(var(--press-scale)); }
.rond__nom { display: -webkit-box; max-width: 100%; padding: var(--s-2) var(--s-1) var(--s-1); overflow: hidden; text-align: center; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Un objet en tête de menu sans carte : pastille pleine de sa couleur, nom et ce qu'il est. */
.bloc__ligne > .pastille--pleine .icon { color: inherit; }
/* Icône d'accent au début d'une ligne (choix unique : rond plein) ; ligne éteinte. */
.bloc__ligne > .bloc__accent { color: var(--accent-text); }
.bloc__ligne:disabled { opacity: 0.45; cursor: default; }
/* Glisser une ligne d'un bloc : filets gardés, fond du panneau sous la ligne, vers la gauche seulement avec data-glisser. */
.bloc__panneau > .glisser { flex: none; border-radius: 0; background: inherit; }
.glisser > .bloc__ligne { position: relative; background: inherit; }
.glisser + .glisser > .bloc__ligne, .bloc__ligne + .glisser > .bloc__ligne, .glisser + .bloc__ligne { box-shadow: inset 0 1px 0 var(--line); }
.glisser[data-glisser='gauche'] > .glisser__fond { justify-content: flex-end; }

/* ===== Premier lancement (repris de Clepso) : première configuration, tutoriel animé, message phrase par phrase. Voir web/accueil.js. ===== */
/* Première configuration (tout l'écran que lui donne l'app) : ce qu'il faut autoriser en cartes d'étape, de quoi passer tout en haut, le bouton pour continuer collé en bas. */
.depart { display: flex; flex-direction: column; min-height: 100%; background-color: var(--bg); }
.depart > .barre-haut { padding: var(--s-1) calc(var(--gutter) - var(--s-2)) 0 var(--gutter); }
.depart__corps, .depart__pied { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.depart__corps { display: flex; flex: 1; flex-direction: column; gap: var(--block-gap); padding-block: var(--s-2) var(--s-5); }
.depart__passer, .depart__intro { display: flex; flex-direction: column; gap: var(--s-2); }
.depart__intro h2 { margin: 0; font-size: var(--fs-h2); }
.depart__intro p { margin: 0; color: var(--text-2); }
.depart__etapes { display: flex; flex-direction: column; gap: var(--list-gap); }
/* Ce que veut dire passer, et pourquoi on ne peut pas continuer : en danger, sous le bouton ou juste au-dessus. */
.depart__alerte { margin: 0; color: var(--danger); font-size: var(--fs-small); text-align: center; }
.depart__pied { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-2) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
/* Carte d'étape : l'icône d'accent, le titre et où en est l'étape (badge, ou « Activé »), ce qu'elle fait, son bouton au bout. */
.carte-etape { display: flex; flex-direction: column; gap: var(--s-2); }
.carte-etape__tete { display: flex; align-items: center; gap: var(--s-3); }
.carte-etape__tete > .icon { flex: none; color: var(--accent-text); }
.carte-etape__titre { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-body); font-weight: var(--fw-nom); }
.carte-etape__tete > .badge, .carte-etape__tete > .bloc__etat { flex: none; }
.carte-etape__texte { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
.carte-etape > .btn { align-self: flex-end; margin-block-start: var(--s-1); }

/* Tutoriel animé : où on en est, Passer ; la scène ; le texte de l'étape ; Précédent et Suivant. Voir allerAuPas. */
.tuto { display: flex; flex-direction: column; height: 100%; overflow-x: clip; background: var(--surface); }
.tuto__haut { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) calc(var(--gutter) - var(--s-2)) var(--s-1) calc(var(--gutter) + var(--s-3)); }
.tuto__haut > .segments { flex: 1; gap: var(--s-1); }
.tuto__corps { display: flex; flex: 1; flex-direction: column; min-height: 0; width: 100%; max-width: var(--measure); margin-inline: auto; padding: var(--s-1) var(--gutter) var(--s-4); }
.tuto__scene { position: relative; flex: 1; min-height: 0; overflow: clip; }
/* Les textes des étapes à la même place : le plus long fixe la hauteur, la scène garde sa taille d'une étape à l'autre.
   Celui qui part s'efface d'abord, puis le nouveau apparaît en glissant : jamais deux textes mêlés. */
.tuto__textes { display: grid; margin-block-start: var(--s-5); padding-inline: var(--s-2); }
.tuto__texte { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--s-2); opacity: 0; transform: translateX(20%); transition: transform var(--t-slow) var(--ease-out), opacity calc(var(--t-slow) * 0.4) var(--ease-out); }
.tuto__texte[data-place='avant'] { transform: translateX(-20%); }
.tuto__texte[data-place='ici'] { opacity: 1; transform: none; transition-duration: var(--t-slow), calc(var(--t-slow) * 0.6); transition-delay: 0s, calc(var(--t-slow) * 0.4); }
.tuto__texte h2 { margin: 0; font-size: var(--fs-h1); }
.tuto__texte p { margin: 0; color: var(--text-2); line-height: 1.45; }
.tuto__pied { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap-block); margin-block-start: var(--s-3); padding-inline: var(--s-2); }
.tuto__pied > .btn { min-width: 0; }
.tuto__pied > .btn--primary { margin-inline-start: auto; }
/* Couché : la scène à gauche, le texte et les boutons à droite. */
@media (orientation: landscape) and (min-width: 700px) {
  .tuto__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--s-5); max-width: none; padding: var(--s-1) calc(var(--gutter) + var(--s-3)) var(--s-3) var(--gutter); }
  .tuto__scene { grid-row: 1 / 3; }
  .tuto__textes { align-self: center; margin: 0; }
}
/* Scène : une page en petit, dessinée en unités fixes (--scene-l × --scene-h ; pour chaque élément --sx, --sy, --sl, --sh, --st pour le texte, --si pour l'icône, propres à lui),
   mise à l'échelle de sa place (--scene-k, posée par ajusterScene). Un doigt la parcourt, tout bouge par transform et opacity. */
/* Propres à chaque élément : un enfant ne prend pas la place ni la taille de son parent. */
@property --sx { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sy { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sl { syntax: '*'; inherits: false; }
@property --sh { syntax: '*'; inherits: false; }
@property --st { syntax: '<number>'; inherits: false; initial-value: 14; }
@property --si { syntax: '<number>'; inherits: false; initial-value: 22; }
.scene-pas { position: absolute; inset: 0; }
.scene { position: absolute; left: 50%; top: 50%; width: calc(var(--scene-l, 350) * 1px); height: calc(var(--scene-h, 440) * 1px); overflow: hidden; border-radius: calc(var(--r-lg) * 1.6); background: var(--bg); translate: -50% -50%; scale: var(--scene-k, 1); }
.scene__el { position: absolute; left: calc(var(--sx) * 1px); top: calc(var(--sy) * 1px); width: calc(var(--sl) * 1px); height: calc(var(--sh) * 1px); }
.scene__couche { position: absolute; inset: 0; border-radius: inherit; }
.scene__texte { display: block; overflow: hidden; color: var(--text); font-size: calc(var(--st) * 1px); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.scene__texte--pale { color: var(--text-2); }
.scene__chiffres { font-weight: var(--graisse-temps, var(--fw-phrase)); font-variant-numeric: tabular-nums; line-height: 1.1; }
.scene__icone { display: grid; place-items: center; color: var(--text-2); }
.scene__icone .icon { width: calc(var(--si) * 1px); height: calc(var(--si) * 1px); }
.scene__rond { border-radius: 50%; }
.scene__teinte { background: color-mix(in srgb, var(--mc, var(--accent)) 18%, var(--surface)); color: var(--mc, var(--accent-text)); }
.scene__plein { background: var(--mc, var(--accent)); color: var(--on-accent); }
.scene__plein .scene__texte { color: inherit; }
.scene__pilule { display: grid; place-items: center; border-radius: var(--r-pill); }
.scene__carte { border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 var(--card-edge) var(--line); }
.scene__case { border-radius: var(--r-md); background: color-mix(in srgb, var(--text) 6%, transparent); }
/* Carte qui s'élargit sans changer de taille : ses deux moitiés s'écartent, un morceau dessous, entre elles, s'étire en scaleX.
   Chaque morceau d'une couche opaque (bord compris) : là où ils se recouvrent, rien ne se voit. */
.scene__morceau { border-radius: var(--r-lg); }
.scene__morceau--debut { border-start-end-radius: 0; border-end-end-radius: 0; }
.scene__morceau--fin { border-start-start-radius: 0; border-end-start-radius: 0; }
.scene__morceau > .scene__fond { background: color-mix(in srgb, var(--mc, var(--accent)) 16%, var(--surface)); }
.scene__morceau > .scene__bord { border: 2px solid color-mix(in srgb, var(--accent-text) 70%, color-mix(in srgb, var(--mc, var(--accent)) 16%, var(--surface))); }
.scene__morceau--milieu { border-radius: 0; transform-origin: 0 50%; }
.scene__morceau--milieu > .scene__bord { border-inline: 0; }
.scene__morceau--debut > .scene__bord { border-inline-end: 0; }
.scene__morceau--fin > .scene__bord { border-inline-start: 0; }
.scene__doigt { border: 2px solid color-mix(in srgb, var(--text) 75%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--text) 24%, transparent); }
.scene__appui { border: 3px solid var(--text); border-radius: 50%; }
.scene__feuille { right: 0; padding: 16px 24px 0; border-radius: calc(var(--r-lg) * 1.4) calc(var(--r-lg) * 1.4) 0 0; background: var(--surface); box-shadow: var(--shadow-float); }
.scene__colonne { display: flex; flex-direction: column; align-items: center; }
.scene__ligne { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 60px; }

/* Message phrase par phrase : chacune monte doucement à son tour, le pied avec la dernière. Voir devoilerLettre. */
.lettre { display: flex; flex-direction: column; gap: var(--s-4); }
.lettre__phrase { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; line-height: 1.42; }
.lettre__phrase p { margin: 0; }
.lettre__coeur { width: calc(var(--icon) * 1.6); height: calc(var(--icon) * 1.6); margin-block-end: var(--s-2); }
.lettre__titre { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-nom); letter-spacing: -0.025em; line-height: 1.1; }
.lettre__pale { color: var(--text-2); }
.lettre__signature { font-weight: var(--fw-nom); }
/* En plein écran : le message défile, le pied garde sa place dès le début (le texte ne bouge pas quand il arrive). */
.lettre-ecran { display: flex; flex-direction: column; height: 100%; }
.lettre-ecran__corps { flex: 1; overflow-y: auto; padding: var(--s-6) calc(var(--gutter) + var(--s-3)) var(--s-4); }
.lettre-ecran__pied { display: flex; flex-direction: column; gap: var(--s-2); padding: 0 calc(var(--gutter) + var(--s-1)) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
.lettre-ecran__corps > *, .lettre-ecran__pied { width: 100%; max-width: var(--measure); margin-inline: auto; }
.lettre-ecran__note { margin: 0; color: var(--text-2); font-size: var(--fs-small); text-align: center; }
/* Boutons qui se partagent la largeur (montants d'un don). */
.boutons-egaux { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--s-2); }
.boutons-egaux > .btn { min-height: var(--tap-block); padding-inline: var(--s-2); }
/* Cœur du soutien vide, tant qu'il n'y a pas eu de don. */
.icon.icon--coeur.icon--vide { fill: none; }

/* Avis flottant : en bas, par-dessus la page, tant que la situation dure. Un appui y mène, la croix le ferme. */
.notice--flottant { align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-1) var(--s-1) var(--inset); box-shadow: var(--shadow-float); animation: socle-rise var(--t-base) var(--ease-out); }
.notice__zone { display: flex; flex: 1; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-1) 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: opacity var(--t-press) var(--ease-out); }
.notice__zone:active { opacity: 0.6; }
.notice__zone > .icon { flex: none; color: var(--c); }
.notice__titre { display: block; font-weight: var(--fw-nom); }
.notice__textes { min-width: 0; }
/* Sur une ligne (téléphone couché) : titre entier, phrase coupée au bout par des points. Sans place pour le titre
   (téléphone debout, grande taille), la phrase s'efface d'abord, puis le titre finit lui aussi par des points. */
.notice--ligne .notice__textes { display: flex; flex: 1; align-items: baseline; gap: var(--s-2); }
.notice--ligne .notice__titre { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice--ligne .notice__textes > .small { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Questions dépliables dans un panneau (aide) : à plat, séparées par un filet ; icône au début, réponse puis ce qui la règle. */
.bloc__panneau > .repli { border: 0; border-radius: 0; background: none; box-shadow: none; }
.bloc__panneau > * + .repli, .bloc__panneau > .repli + * { box-shadow: inset 0 1px 0 var(--line); }
.repli summary > span { flex: 1; min-width: 0; }
.repli summary > .icon:first-child:not(:last-child) { transform: none; }
.repli__corps > p { margin: 0; line-height: 1.45; }
.repli__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); }

/* Contour fin de toutes les surfaces, repris de SIRH : le même trait que .card et .row (jeton --card-edge). */
.bloc__panneau, .widget, .coche-ligne, .repli, .chiffre, a.chiffre, button.chiffre, .faits, .creneau, .planning, .carte-glisse, .date-ligne, .carte-media, .carte-appel, .lecteur, .comparateur, .pas-a-pas, .question, .retournable__face, .tarif, .temoignage, .action-rapide, .recap, .notifications, .ruban__chapitre, .decision, .organigramme__case, .raccourci, .barre-enregistrer, .minuteur--teintee, .minuteur--pleine, .minuteur--carte, .temps-liste--carte, .lancement--carte { border: var(--card-edge) solid var(--line); }

/* Page à catégories (réglages rangés, comme SIRH) : sur téléphone, le sommaire en puces qui défilent, collé en haut sur le verre ;
   dès 720 px de place, une colonne de liens à gauche, collée elle aussi. La section lue s'allume (data-ancres, data-section).
   --categories-haut : hauteur d'une barre collée au-dessus (en-tête d'app). */
.categories { container-type: inline-size; }
.categories__grille { display: flex; flex-direction: column; gap: var(--block-gap); }
.categories__nav { position: sticky; z-index: 2; top: var(--categories-haut, 0px); display: flex; gap: var(--s-2); overflow-x: auto; padding-block: var(--s-2); background: var(--glass); backdrop-filter: blur(12px); scrollbar-width: none; }
.categories__lien { flex: none; gap: var(--s-2); }
.categories__lien .icon { width: calc(var(--icon) * 0.85); height: calc(var(--icon) * 0.85); }
.categories__corps { display: flex; flex-direction: column; gap: calc(var(--block-gap) * 2); min-width: 0; }
.categories__section { display: flex; flex-direction: column; gap: var(--block-gap); scroll-margin-top: calc(var(--categories-haut, 0px) + var(--tap-small) + var(--s-5)); }
.categories__tete { display: flex; flex-direction: column; gap: var(--s-1); }
.categories__tete h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-h2); }
.categories__tete h2 .icon { color: var(--accent-text); }
.categories__tete p { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
@container (min-width: 720px) {
  .categories__grille { display: grid; grid-template-columns: calc(var(--tap) * 4.5) minmax(0, 1fr); align-items: start; gap: var(--s-6); }
  .categories__nav { top: calc(var(--categories-haut, 0px) + var(--s-4)); flex-direction: column; gap: var(--s-1); overflow: visible; margin: 0; padding: 0; background: none; backdrop-filter: none; }
  .categories__lien { justify-content: flex-start; min-height: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-md); background: none; }
  .categories__lien[aria-pressed='true'] { background: color-mix(in srgb, var(--accent-text) 12%, var(--surface)); color: var(--accent-text); }
  .categories__section { scroll-margin-top: calc(var(--categories-haut, 0px) + var(--s-4)); }
}

/* Droite à gauche (arabe…) : un temps, un compte à rebours ou une heure se lisent toujours de gauche à droite
   (« -1:08 », pas « 1:08- ») ; isolés, ils ne dérangent pas le sens du texte qui les entoure. */
.minuteur__temps, .row__temps, .plein__temps, .pilule-page__temps, .pilule-minuteur__temps, .carte-tete__temps, .croquis__temps, .repos__temps, .sequence-plein__temps, .tableau-tete__temps, .temps-liste__temps, .widget__temps, .ajust-rond--temps, .nombre-saisi, .pave__valeurs, .pave__touches { direction: ltr; unicode-bidi: isolate; }