/* 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; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 400 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: 650; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 650; 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); }
.num { font-variant-numeric: tabular-nums; }
.big-num { font-size: var(--fs-num); font-weight: 650; 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: 500; 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 { display: flex; flex-direction: column; gap: var(--block-gap); 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; }
.grille-blocs > * { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 720px) { .grille-blocs > * { grid-column: auto; } }
/* 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. */
.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; }
}
.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; }
.list { display: flex; flex-direction: column; gap: var(--list-gap); }

/* 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); }

/* 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, 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)); }
.row__main { flex: 1; min-width: 0; font-weight: 500; }
.row__sub { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--text-2); }
/* 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: 300; }
[data-look='contraste'] .row__main--phrase { font-weight: 400; }
.row__value { font-variant-numeric: tabular-nums; font-weight: 500; }
/* 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: 650; }
.row__value--pale { color: var(--text-2); font-weight: 400; }

/* 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: 500 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); }
.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); }
.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: 500 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); }
.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: 500; }
.badge--ok { --c: var(--ok); }
.badge--warn { --c: var(--warn); }
.badge--danger { --c: var(--danger); }
/* É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: 400 var(--fs-input) / 1.2 var(--font); }
.input--court { flex: none; width: auto; min-height: var(--tap-small); }
.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: 500 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); }

/* 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: 650; }
.pastille .icon { width: var(--icon-md); height: var(--icon-md); }
.pastille--pleine { background: var(--c); color: var(--encre, var(--bg)); }

/* 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: 500; 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; }

/* 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: 650; 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); }
.bloc__ligne--danger, .bloc__ligne--danger .icon { color: var(--danger); }

/* 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: 500 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; }
.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: 650; 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--compact { gap: 2px; }
.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; }

/* É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: 500; 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 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); }

/* 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. */
.anneau { --ep: calc(var(--ring) * var(--ring-k, 1)); 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: calc(var(--ep) * 0.08); border: calc(var(--ep) * 0.84) 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) 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); }
.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) / 2); width: var(--ep); height: var(--ep); 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. */
.anneau:not(.anneau--fin) .anneau__tete i { background: var(--ring-dot); box-shadow: inset 0 0 0 calc(var(--ep) * 0.22) var(--mc, var(--accent-text)); }
[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%); }
/* 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: 500; text-overflow: ellipsis; white-space: nowrap; }
.minuteur__temps { display: block; font-size: var(--fs-h1); font-weight: var(--graisse-temps, 300); 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: 500; 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: 650; }
.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: 500; 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: 500 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: 500; }
.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: 500; 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: 500 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: 500; pointer-events: none; }
.ajust__signe { font-weight: 650; }
.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) 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: 400; }
.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: 400; }
.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: 500; 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: 400; 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, 300); 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: 400 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: 500 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: 650; 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: 650; 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; }
.plein button { -webkit-tap-highlight-color: transparent; }
/* 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: 500 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: 400; 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: 650; 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: 650; 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: 500; 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); }
/* 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: 500 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: 650; 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: 650; }
.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); }
}

/* 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: 650; 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: 650; 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: 650; 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: 650; 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: 650; }
.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; }
}
/* 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: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.a-suivre__nom { overflow: hidden; font-size: var(--fs-h2); font-weight: 650; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.a-suivre__duree { flex: none; font-size: var(--fs-h2); font-weight: 650; 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: 500; 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: 500; }
.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: 300; 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: 650; }
.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; }
.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: 500; 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, 300); 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: 650; }
.row__actions { display: flex; flex: none; margin-inline-end: calc(var(--s-2) * -1); }
/* 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: 500; }
.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; }
.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); }
/* 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: 500; }
.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: 300; 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: 400 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; }
.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: 500; }
/* 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: 650 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: 400; 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, 300); 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; }
.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: 500; font-variant-numeric: tabular-nums; }
.compteur[data-inconnu] .compteur__valeur { opacity: 0.45; }
.quantite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.molette { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--inset-y) var(--inset-sm); border-radius: var(--r-md); background: var(--surface-2); touch-action: none; cursor: ns-resize; user-select: none; }
.molette__centre { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.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: 500; font-variant-numeric: tabular-nums; }
.molette__valeur { font-size: var(--fs-num); font-weight: 300; 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 { 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); }
.regle { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.regle__valeur { font-size: var(--fs-num); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.regle__fenetre { position: relative; width: 100%; height: var(--s-6); overflow: hidden; }
.regle__piste { position: absolute; top: 0; bottom: 0; left: 50%; width: 4000px; background-image: repeating-linear-gradient(to right, var(--line-strong) 0 2px, transparent 2px 8px); }
.regle__repere { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); 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: 500; }
.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; }
.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: 500 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; }
/* 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: 500; }
.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 { 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); }
.photo { position: relative; display: grid; place-items: center; overflow: hidden; 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); }
/* 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); }
.poignee-ligne { cursor: grab; touch-action: none; 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); }
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: 500; }
.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: 400; }
/* 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: 500; }
.filtre [data-menu-valeur] { font-weight: 650; }
.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: 500; 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: 400; 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: 500; }
.retour { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; border: 0; background: none; color: var(--text-2); font: 500 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: 500 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: 650; 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: 650; }
.tableau-carte__nombre { color: var(--text-2); font-weight: 500; 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: 650; }
.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: 500; }
.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: 500 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: 500 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 { 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: var(--fs-h1); font-weight: 650; 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)); }
.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: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.montant--plus { color: var(--ok); }
.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: 500; 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: 500; 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: 500; }
.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); }
.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: 500; 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: 650; 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: flex; flex-direction: column; gap: var(--s-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.mesure { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: center; gap: var(--s-2); font-size: var(--fs-small); }
.mesure__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesure__valeur { min-width: 6ch; text-align: end; font-weight: 500; 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); }
.crans__cases i[data-plein] { background: var(--g, var(--accent-text)); box-shadow: none; }
.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: 650; 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; }
.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%; }
.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: 500; }
.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; }
.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; }
.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; }
.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: 500; 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: 650 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: 500; }
.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; }
/* 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: 500 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); }
.calendrier { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; max-width: calc(var(--tap) * 8.5); }
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.calendrier__titre { font-weight: 650; text-transform: capitalize; }
.calendrier__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendrier__nom { padding-block: var(--s-1); color: var(--text-2); font-size: var(--fs-caption); font-weight: 500; text-align: center; }
.calendrier__jour { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: 400 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: 650; }
.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: 650; font-variant-numeric: tabular-nums; }
.creneau__heure small { display: block; color: var(--text-2); font-size: var(--fs-caption); font-weight: 400; }
.creneau[data-etat='passe'] { opacity: 0.55; }
.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: 650; }
.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: 500; 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: 500; 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 { 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: 650; 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); }
.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: 500; }
.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: 500; }

/* 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: 650; }
.colonne__nombre { color: var(--text-2); font-weight: 400; 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: 650; line-height: 1.1; }
.date-ligne__date small { color: var(--text-2); font-size: var(--fs-caption); font-weight: 500; }
.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; }

/* 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: 650; }
.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); }
.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: 650; 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-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: 650; }
.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: 650; }
.titre-carte { display: flex; align-items: center; gap: var(--s-2); font-weight: 650; }
.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-barre { position: relative; width: 100%; min-height: var(--tap-block); }
.bouton-barre__barre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); overflow: hidden; padding-inline: var(--inset); border-radius: var(--r-btn); background: var(--surface-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.bouton-barre__plein { position: absolute; inset: 0; background: color-mix(in srgb, var(--accent-text) 22%, transparent); transform-origin: left; }
.bouton-barre__barre > span:not(.bouton-barre__plein) { position: relative; }
.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: 650; 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: 500 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); }
.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: 650; }
.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: 650; 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); }
@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: 650; }
.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: 500 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: 650; }
.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: 650; 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: 650; 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: 500; 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: 650; 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: 650; 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; }
@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: 650; line-height: 1.02; letter-spacing: calc(-0.03em * var(--track-k)); }
.titre-revele > span { display: block; overflow: hidden; }
.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(100%); } }
.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; }
.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: 650; 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: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tarif__prix small { color: var(--text-2); font-size: var(--fs-small); font-weight: 400; }
.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 .btn { --b: var(--on-accent); color: var(--accent); }
.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: 500; 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); }
.presentation { display: flex; flex-direction: column; gap: var(--block-gap); width: 100%; }
.contact-grand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%; }
.contact-grand a { overflow-wrap: anywhere; color: inherit; font-size: var(--fs-h1); font-weight: 650; 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: 650; 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__marque { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.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: 300; 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); }
.prix { font-size: var(--fs-h3); font-weight: 650; 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: 650; }
.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: 650; font-variant-numeric: tabular-nums; }
.repos--bandeau { border-radius: 0; }
.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: 500; }
.pilule-minuteur__temps { font-weight: 650; 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: 500 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); }
.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: 500; }
.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, 300); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sequence-plein__nom { font-size: var(--fs-h2); font-weight: 650; }
.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; }
.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: 400 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: 650; 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: 650; 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%; }
.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: 500; }
.muscle--principal { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
/* 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: 650; 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: 500; 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; }
/* 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: 400 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: 650; 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)); }
@media (min-width: 900px) { .tabbar--fixe { display: none; } }
.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: 500 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); } }

/* 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: 500; box-shadow: var(--shadow-float); transform: translateX(-50%); animation: socle-rise-centre var(--t-base) var(--ease-out); }
.toast .btn { --b: transparent; color: inherit; }
/* 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; }
.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']), .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); } }

/* Squelette de chargement */
.skeleton { border-radius: var(--r-sm); background: var(--surface-2); animation: socle-pulse 1.4s ease-in-out infinite; }

/* 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); }
.card[data-repliee] { align-self: start; }
.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)); } }
@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; }
[data-edition] .card[data-cible] { outline: 2px solid var(--accent-text); outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 20%, transparent); }
.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: 650 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: 650; }

/* 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: 650; }
.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: 650; }
.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: 500 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: 500; 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: 650; 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; }
.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: 500; 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: 650 var(--fs-body) / 1.2 var(--font); }
.mep__titre::placeholder { color: var(--accent-text); font-weight: 650; 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: 650; 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: 650; }

/* 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: 400; }
.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: 500; text-transform: uppercase; letter-spacing: calc(var(--track-caps) * 2); }
.bloc__sous-titre + .bloc__corps { padding-top: var(--inset-y); }
.bloc__valeur { flex: none; color: var(--text-2); font-size: var(--fs-small); }
/* 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: 500; 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; }
.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: 650; 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, 300); }
.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: 500; }
.croquis__bouton b { font-weight: 650; }
.croquis__bouton--signe { font-size: var(--fs-h2); font-weight: 400; }
.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)); }
/* 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, 300); 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: 650; 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, 300); 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: 300; 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: 500; 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, 300); 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: 500 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: 500 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: 500 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: 500; }
.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, 300); 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: 500; letter-spacing: -0.025em; line-height: 1.1; }
.lettre__pale { color: var(--text-2); }
.lettre__signature { font-weight: 500; }
/* 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: 500; }
.notice__textes { min-width: 0; }
/* Sur une ligne (téléphone couché) : titre entier, phrase coupée au bout par des points. */
.notice--ligne .notice__textes { display: flex; align-items: baseline; gap: var(--s-2); }
.notice--ligne .notice__titre { flex: none; white-space: nowrap; }
.notice--ligne .notice__textes > .small { 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; }