/* Sablier — application parent. Mobile d'abord ; thèmes clair et sombre par jetons. */

/* ============ Jetons ============ */
:root {
  color-scheme: light;
  --fond: #F4F5FA;
  --surface: #FFFFFF;
  --surface-2: #F6F7FB;
  --surface-3: #ECEEF5;
  --surface-verre: rgba(255, 255, 255, .78);
  --surface-inverse: #161A2B;
  --texte-inverse: #F3F4FA;
  --bord: rgba(20, 24, 50, .08);
  --bord-fort: rgba(20, 24, 50, .16);
  --texte: #10142A;
  --texte-2: #464D66;
  --texte-3: #646B84;
  --primaire: #5B47F5;
  --primaire-fond: #5B47F5;
  --primaire-texte: #4734E0;
  --primaire-doux: rgba(91, 71, 245, .10);
  --sable: #E89A2C;
  --sable-doux: rgba(232, 154, 44, .12);
  --ok: #12A150;
  --ok-texte: #0B7A3B;
  --ok-doux: rgba(18, 161, 80, .11);
  --alerte: #D97706;
  --alerte-texte: #9A5200;
  --alerte-doux: rgba(217, 119, 6, .11);
  --danger: #DC2E2E;
  --danger-texte: #B91C1C;
  --danger-doux: rgba(220, 46, 46, .09);
  --danger-bord: rgba(220, 46, 46, .25);
  --ombre-1: 0 1px 2px rgba(16, 20, 42, .04), 0 4px 16px -6px rgba(16, 20, 42, .08);
  --ombre-2: 0 2px 6px rgba(16, 20, 42, .06), 0 16px 40px -12px rgba(16, 20, 42, .22);
  --anneau-focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--primaire);
  --rayon: 20px;
  --rayon-m: 14px;
  --nav-h: 64px;
  --nav-l: 248px;
  --hb: env(safe-area-inset-bottom, 0px);
  --ht: env(safe-area-inset-top, 0px);
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --police-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #0B0D14;
    --surface: #141824;
    --surface-2: #1A1F2D;
    --surface-3: #252B3C;
    --surface-verre: rgba(20, 24, 36, .80);
    --surface-inverse: #F1F2F8;
    --texte-inverse: #11152A;
    --bord: rgba(255, 255, 255, .07);
    --bord-fort: rgba(255, 255, 255, .14);
    --texte: #EEF0F8;
    --texte-2: #B9BFD2;
    --texte-3: #9097AD;
    --primaire: #8C7DFF;
    --primaire-fond: #6553FF;
    --primaire-texte: #ADA3FF;
    --primaire-doux: rgba(140, 125, 255, .16);
    --sable: #F2B357;
    --sable-doux: rgba(242, 179, 87, .14);
    --ok: #2FCB72;
    --ok-texte: #5FE098;
    --ok-doux: rgba(47, 203, 114, .14);
    --alerte: #F59E0B;
    --alerte-texte: #FBBF4A;
    --alerte-doux: rgba(245, 158, 11, .14);
    --danger: #F05252;
    --danger-texte: #FF8A8A;
    --danger-doux: rgba(240, 82, 82, .14);
    --danger-bord: rgba(240, 82, 82, .32);
    --ombre-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 20px -10px rgba(0, 0, 0, .6);
    --ombre-2: 0 24px 60px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0B0D14;
  --surface: #141824;
  --surface-2: #1A1F2D;
  --surface-3: #252B3C;
  --surface-verre: rgba(20, 24, 36, .80);
  --surface-inverse: #F1F2F8;
  --texte-inverse: #11152A;
  --bord: rgba(255, 255, 255, .07);
  --bord-fort: rgba(255, 255, 255, .14);
  --texte: #EEF0F8;
  --texte-2: #B9BFD2;
  --texte-3: #9097AD;
  --primaire: #8C7DFF;
  --primaire-fond: #6553FF;
  --primaire-texte: #ADA3FF;
  --primaire-doux: rgba(140, 125, 255, .16);
  --sable: #F2B357;
  --sable-doux: rgba(242, 179, 87, .14);
  --ok: #2FCB72;
  --ok-texte: #5FE098;
  --ok-doux: rgba(47, 203, 114, .14);
  --alerte: #F59E0B;
  --alerte-texte: #FBBF4A;
  --alerte-doux: rgba(245, 158, 11, .14);
  --danger: #F05252;
  --danger-texte: #FF8A8A;
  --danger-doux: rgba(240, 82, 82, .14);
  --danger-bord: rgba(240, 82, 82, .32);
  --ombre-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 20px -10px rgba(0, 0, 0, .6);
  --ombre-2: 0 24px 60px -16px rgba(0, 0, 0, .7);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html.transition-theme body, html.transition-theme .carte, html.transition-theme .navigation { transition: background-color .3s, color .3s, border-color .3s; }
html.feuille-ouverte body { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -.015em; line-height: 1.2; }
a { color: var(--primaire-texte); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--police-mono); font-size: .88em; background: var(--surface-3); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texte-2 { color: var(--texte-2); }
.texte-3 { color: var(--texte-3); }
.petit-texte { font-size: 14px; }
.pile { display: grid; gap: 16px; align-content: start; min-width: 0; }
.aller-contenu { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--primaire-fond); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.aller-contenu:focus { top: calc(var(--ht) + 12px); }

/* ============ Écran de démarrage ============ */
#demarrage {
  position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--fond); transition: opacity .4s ease, visibility .4s;
}
#demarrage img { border-radius: 22px; box-shadow: 0 18px 50px -12px rgba(91, 71, 245, .55); animation: respire 1.8s ease-in-out infinite; }
#demarrage span { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
#demarrage.fini { opacity: 0; visibility: hidden; }
@keyframes respire { 50% { transform: scale(1.04); } }

/* ============ Coquille ============ */
#app { min-height: 100vh; min-height: 100dvh; }
.vue {
  padding: calc(var(--ht) + 18px) max(16px, env(safe-area-inset-right)) calc(var(--nav-h) + var(--hb) + 28px) max(16px, env(safe-area-inset-left));
}
.vue:focus { outline: none; }
.vue-contenu { max-width: 1160px; margin: 0 auto; display: grid; gap: 18px; min-width: 0; animation: apparait .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } }
body.sans-nav .vue { padding-bottom: calc(var(--hb) + 24px); }
body.avec-barre .vue { padding-bottom: calc(var(--nav-h) + var(--hb) + 110px); }

.navigation {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0 max(6px, env(safe-area-inset-right)) var(--hb) max(6px, env(safe-area-inset-left));
  background: var(--surface-verre); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--bord);
}
.navigation .marque, .navigation .nav-pied { display: none; }
.navigation ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--nav-h); }
.onglet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%;
  color: var(--texte-3); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  transition: color .2s;
}
.onglet-ico { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .25s, transform .2s; }
.onglet[aria-current="page"] { color: var(--primaire-texte); }
.onglet[aria-current="page"] .onglet-ico { background: var(--primaire-doux); }
.onglet:active .onglet-ico { transform: scale(.92); }
.pastille-nombre {
  position: absolute; top: -3px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.bandeau-connexion {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; text-align: center;
  padding: calc(var(--ht) + 6px) 16px 6px; background: var(--alerte); color: #1D1300; font-size: 13px; font-weight: 600;
}

@media (min-width: 960px) {
  .navigation {
    top: 0; right: auto; width: var(--nav-l); padding: 24px 16px; border-top: 0; border-right: 1px solid var(--bord);
    display: flex; flex-direction: column; gap: 28px; background: var(--surface);
  }
  .navigation .marque { display: flex; align-items: center; gap: 12px; padding: 4px 10px; text-decoration: none; color: var(--texte); font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
  .navigation .marque img { border-radius: 9px; }
  .navigation ul { display: grid; grid-template-columns: 1fr; height: auto; gap: 4px; }
  .onglet { flex-direction: row; justify-content: flex-start; gap: 12px; height: 46px; padding: 0 10px; font-size: 15px; font-weight: 550; border-radius: 12px; color: var(--texte-2); }
  .onglet:hover { background: var(--surface-2); color: var(--texte); }
  .onglet-ico { width: 26px; height: 26px; border-radius: 8px; }
  .onglet[aria-current="page"] { background: var(--primaire-doux); }
  .onglet[aria-current="page"] .onglet-ico { background: none; }
  .pastille-nombre { top: -6px; right: -10px; }
  .vue { margin-left: var(--nav-l); padding: 36px 40px 48px; }
  body.sans-nav .vue { margin-left: 0; }
  body.avec-barre .vue { padding-bottom: 120px; }
}

/* ============ En-têtes ============ */
.entete-page { position: relative; display: grid; gap: 6px; padding-top: 4px; }
.entete-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.entete-titres { min-width: 0; }
.entete-page h1 { font-size: 30px; font-weight: 760; letter-spacing: -.025em; overflow-wrap: anywhere; }
.surtitre { font-size: 13px; font-weight: 600; color: var(--texte-3); margin-bottom: 2px; }
.surtitre::first-letter { text-transform: uppercase; }
.sous-titre { color: var(--texte-2); font-size: 15px; margin-top: 4px; }
.entete-actions { display: flex; gap: 8px; flex-shrink: 0; }
.retour { display: inline-flex; align-items: center; gap: 2px; margin-left: -8px; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--primaire-texte); justify-self: start; border-radius: 10px; }
.pastille-demo { position: absolute; top: 0; right: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sable); background: var(--sable-doux); padding: 4px 9px; border-radius: 999px; }
.entete-page:has(.retour) .pastille-demo { top: 12px; }
.titre-section { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--texte-2); }
.titre-section .ico { color: var(--primaire-texte); }
.titre-section-ligne { display: grid; gap: 2px; margin-bottom: 12px; }
.compteur { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--danger); color: #fff; font-size: 12px; }
.titre-carte { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.titre-carte .ico { color: var(--primaire-texte); flex-shrink: 0; }
.titre-bloc { font-size: 15px; font-weight: 700; margin-top: 4px; }

/* ============ Cartes ============ */
.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre-1); padding: 18px; min-width: 0;
}
.section-reglages { display: grid; gap: 14px; align-content: start; }
.sous-section { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--bord); }
.sous-section h3 { font-size: 15px; font-weight: 650; }

/* ============ Boutons ============ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--rayon-m); border: 1px solid transparent;
  font-size: 15px; font-weight: 650; text-decoration: none; white-space: nowrap; position: relative;
  transition: transform .12s ease, background-color .2s, box-shadow .2s, opacity .2s; user-select: none; -webkit-user-select: none;
}
.bouton:active:not(:disabled) { transform: scale(.975); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton.primaire { background: var(--primaire-fond); color: #fff; box-shadow: 0 8px 20px -10px var(--primaire-fond), inset 0 1px 0 rgba(255, 255, 255, .18); }
.bouton.primaire:hover:not(:disabled) { filter: brightness(1.07); }
.bouton.secondaire { background: var(--surface-3); color: var(--texte); }
.bouton.secondaire:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-3) 80%, var(--texte) 6%); }
.bouton.fantome { background: transparent; color: var(--primaire-texte); }
.bouton.fantome:hover:not(:disabled) { background: var(--primaire-doux); }
.bouton.danger { background: var(--danger); color: #fff; }
.bouton.danger-doux { background: var(--danger-doux); color: var(--danger-texte); }
.bouton.petit { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.bouton.large { width: 100%; }
.bouton .ico { flex-shrink: 0; }
.bouton.occupe { color: transparent !important; }
.bouton.occupe .ico { opacity: 0; }
.bouton.occupe::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) transparent transparent; animation: tourne .7s linear infinite;
}
.bouton.secondaire.occupe::after, .bouton.fantome.occupe::after, .tuile-action.occupe::after { border-color: var(--primaire) var(--primaire) transparent transparent; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (pointer: coarse) { .bouton.petit { min-height: 44px; } }
.bouton-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 0;
  background: transparent; color: var(--texte-2); text-decoration: none; transition: background-color .2s, color .2s;
}
.bouton-icone:hover { background: var(--surface-3); color: var(--texte); }
.bouton-icone.discret { color: var(--texte-3); }
.lien { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--primaire-texte); font-weight: 600; font-size: 15px; text-decoration: none; }
.lien-fleche { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; min-height: 44px; font-weight: 650; font-size: 15px; text-decoration: none; }
.ligne-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============ Champs ============ */
.etiquette-champ { display: grid; gap: 7px; min-width: 0; }
.etiquette-champ > span:first-child, .etiquette-seule { font-size: 14px; font-weight: 650; color: var(--texte-2); }
.champ {
  width: 100%; min-height: 50px; padding: 0 15px; border-radius: var(--rayon-m);
  border: 1px solid var(--bord-fort); background: var(--surface-2); color: var(--texte);
  font-size: 16px; transition: border-color .2s, box-shadow .2s, background-color .2s; -webkit-appearance: none; appearance: none;
}
textarea.champ { padding: 13px 15px; min-height: 96px; resize: vertical; line-height: 1.4; }
select.champ { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A90A6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
select.champ.petit { min-height: 40px; font-size: 15px; padding: 0 34px 0 12px; }
.champ::placeholder { color: var(--texte-3); opacity: .8; }
.champ:focus { border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-doux); background: var(--surface); outline: none; }
.champ[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-doux); }
input[type="time"].champ { font-variant-numeric: tabular-nums; min-width: 0; }
input[type="search"].champ { padding-left: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A90A6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 15px center; }
.champ.code { font-family: var(--police-mono); letter-spacing: .14em; text-transform: uppercase; }
.champ-titre { font-size: 20px; font-weight: 700; min-height: 52px; }
.aide { font-size: 13px; color: var(--texte-3); }
.champ-avec-bouton { position: relative; }
.champ-avec-bouton .champ { padding-right: 52px; }
.voir-mdp { position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; background: none; color: var(--texte-3); display: grid; place-items: center; border-radius: 12px; }
.erreur-formulaire { color: var(--danger-texte); font-size: 14px; font-weight: 550; }
.erreur-formulaire:empty, .erreur-champ:empty { display: none; }
.erreur-champ { color: var(--danger-texte); font-size: 13px; }
.succes { display: flex; align-items: center; gap: 8px; color: var(--ok-texte); font-weight: 600; }
.ligne-heures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ligne-champ { display: grid; gap: 8px; }

/* ============ Contrôles ============ */
.segment {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  padding: 4px; border-radius: 14px; background: var(--surface-3); isolation: isolate;
}
.segment button {
  position: relative; z-index: 1; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none;
  font-size: 14px; font-weight: 650; color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.15; text-align: center; transition: color .2s;
}
.segment button[aria-checked="true"] { color: var(--texte); }
.segment .curseur {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2));
  transform: translateX(calc(100% * var(--i, 0))); border-radius: 10px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 20, 42, .12), 0 0 0 1px var(--bord); transition: transform .3s cubic-bezier(.3, .9, .3, 1);
}
:root[data-theme="dark"] .segment .curseur { background: #343B52; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segment .curseur { background: #343B52; } }
.segment.petit button { min-height: 36px; font-size: 13.5px; }
@media (pointer: coarse) { .segment button, .segment.petit button { min-height: 42px; } }

.interrupteur { position: relative; display: inline-block; flex-shrink: 0; width: 52px; height: 32px; }
.interrupteur input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.interrupteur .piste { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--bord-fort); transition: background-color .25s; }
.interrupteur .bille { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .22); transition: transform .28s cubic-bezier(.3, .9, .3, 1.2); }
.interrupteur input:checked + .piste { background: var(--ok); box-shadow: none; }
.interrupteur input:checked + .piste .bille { transform: translateX(20px); }
.interrupteur input:focus-visible + .piste { box-shadow: var(--anneau-focus); }
.interrupteur input:disabled + .piste { opacity: .5; }

.ligne-reglage { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; cursor: default; }
label.ligne-reglage { cursor: pointer; }
.ligne-reglage + .ligne-reglage, .ligne-reglage + .verticale { border-top: 1px solid var(--bord); padding-top: 12px; }
.ligne-reglage.verticale { flex-wrap: wrap; }
.ligne-reglage.verticale .segment { flex-basis: 100%; }
.pastille-ico { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--primaire-doux); color: var(--primaire-texte); }
.ligne-texte { flex: 1; display: grid; gap: 2px; min-width: 0; text-align: left; }
.ligne-titre { font-size: 16px; font-weight: 620; }
.ligne-desc { font-size: 14px; color: var(--texte-3); }

.puces, .idees { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--bord-fort); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--texte-2); transition: all .2s;
}
.puce[aria-pressed="true"] { background: var(--primaire-doux); border-color: var(--primaire); color: var(--primaire-texte); }
@media (pointer: coarse) { .puce { min-height: 44px; } }

.puces-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; flex: 1; min-width: 0; max-width: 380px; }
.puce-jour {
  height: 44px; min-width: 0; border-radius: 12px; border: 0; background: var(--surface-3); color: var(--texte-2);
  font-size: 15px; font-weight: 700; transition: background-color .2s, color .2s, transform .12s;
}
.puce-jour[aria-pressed="true"] { background: var(--c, var(--primaire-fond)); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.puce-jour:active { transform: scale(.94); }

.pas-a-pas { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 15px; background: var(--surface-3); flex-shrink: 0; }
.pas-bouton { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: transform .1s, opacity .2s; touch-action: manipulation; }
.pas-bouton:active:not(:disabled) { transform: scale(.92); }
.pas-bouton:disabled { opacity: .35; }
.pas-valeur { min-width: 86px; text-align: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.liste-jetons { display: grid; gap: 10px; }
.jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.jeton { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 2px 0 12px; min-height: 36px; border-radius: 999px; background: var(--surface-3); font-size: 14px; font-weight: 550; }
.jeton span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeton button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--texte-3); flex-shrink: 0; }
.jeton button:hover { background: var(--surface-2); color: var(--danger-texte); }
.jetons-vide { font-size: 14px; color: var(--texte-3); padding: 6px 0; }
.ajout-jeton { display: flex; gap: 8px; }
.champ-jeton { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord-fort); background: var(--surface-2); font-size: 16px; }
.champ-jeton:focus { border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-doux); outline: none; }

/* ============ Avatars, badges ============ */
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; line-height: 1; font-weight: 700;
  background: var(--surface-3); background: color-mix(in srgb, var(--c) 20%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); color: var(--texte);
}
.avatar.grand { width: 56px; height: 56px; font-size: 24px; }
.avatar.petit { width: 32px; height: 32px; font-size: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--texte-2); font-size: 13px; font-weight: 650; white-space: nowrap; }
.badge.ok { background: var(--ok-doux); color: var(--ok-texte); }
.badge.danger { background: var(--danger-doux); color: var(--danger-texte); }
.badge.attention { background: var(--alerte-doux); color: var(--alerte-texte); }
.badge.mini { font-size: 11.5px; padding: 2px 8px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-groupe {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 650;
  background: var(--surface-3); background: color-mix(in srgb, var(--c, var(--primaire)) 16%, transparent); color: var(--texte); white-space: nowrap;
}
.point-statut { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--texte-3); }
.point-statut.en-ligne { background: var(--ok); }

/* ============ Feuilles ============ */
.voile {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 8, 18, .5); opacity: 0; transition: opacity .28s ease;
}
.voile.visible { opacity: 1; }
.feuille {
  width: 100%; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: var(--ombre-2);
  transform: translateY(100%); transition: transform .34s cubic-bezier(.2, .9, .25, 1); outline: none;
}
.voile.visible .feuille { transform: none; }
.poignee { width: 38px; height: 5px; border-radius: 3px; background: var(--bord-fort); margin: 8px auto 0; flex-shrink: 0; }
.feuille-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px 4px 22px; }
.feuille-entete > div { padding-top: 8px; min-width: 0; }
.feuille-entete h2 { font-size: 21px; font-weight: 740; }
.feuille-entete .sous { color: var(--texte-3); font-size: 14.5px; margin-top: 4px; }
.feuille-entete .sous:empty { display: none; }
.feuille-corps { overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px 22px; flex: 1; -webkit-overflow-scrolling: touch; }
.feuille-pied { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 22px calc(12px + var(--hb)); border-top: 1px solid var(--bord); }
.feuille-pied .bouton { flex: 1; }
@media (min-width: 720px) {
  .voile { align-items: center; padding: 24px; }
  .feuille { width: min(560px, 100%); max-height: min(86vh, 820px); border-radius: 24px; transform: translateY(16px) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .25s; }
  .feuille.large { width: min(780px, 100%); }
  .voile.visible .feuille { opacity: 1; }
  .poignee { display: none; }
  .feuille-pied { padding-bottom: 14px; }
  .feuille-pied .bouton { flex: 0 0 auto; min-width: 120px; }
}

/* ============ Toasts ============ */
.toasts { position: fixed; z-index: 120; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--hb) + 12px); display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
body.sans-nav .toasts { bottom: calc(var(--hb) + 16px); }
body.avec-barre .toasts { bottom: calc(var(--nav-h) + var(--hb) + 96px); }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 12px 16px; border-radius: 16px;
  background: var(--surface-inverse); color: var(--texte-inverse); font-size: 15px; font-weight: 550; box-shadow: var(--ombre-2);
  opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.visible { opacity: 1; transform: none; }
.toast.ok .ico { color: var(--ok); }
.toast.erreur .ico { color: var(--danger); }
@media (min-width: 960px) { .toasts { bottom: 24px; left: var(--nav-l); } body.avec-barre .toasts { bottom: 104px; } }

/* ============ Squelettes, vide ============ */
.squelette { display: block; border-radius: var(--rayon); background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%); background-size: 300% 100%; animation: miroite 1.4s ease-in-out infinite; }
@keyframes miroite { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vide { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 20px; }
.vide-ico { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; background: var(--primaire-doux); color: var(--primaire-texte); margin-bottom: 4px; }
.vide h3 { font-size: 19px; }
.vide p { color: var(--texte-3); max-width: 340px; }

/* ============ Accueil ============ */
.accueil-grille { display: grid; gap: 18px; min-width: 0; }
.accueil-principal { display: grid; gap: 18px; min-width: 0; align-content: start; }
.zone-demandes, .zone-enfants { display: grid; gap: 14px; }
.zone-demandes:empty { display: none; }
@media (min-width: 1180px) {
  .accueil-grille { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; }
  .accueil-cote { position: sticky; top: 24px; }
}
.zone-journal { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre-1); }
.zone-journal .titre-section { margin-bottom: 6px; }

.carte-demande {
  display: grid; gap: 14px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--sable-doux), transparent 60%), var(--surface);
  border-color: color-mix(in srgb, var(--sable) 35%, transparent);
  transition: opacity .25s, transform .25s;
}
.carte-demande.cible { animation: cible 1.6s ease 2; }
@keyframes cible { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sable) 50%, transparent); } }
.carte-demande.partie { opacity: 0; transform: scale(.97); }
.demande-tete { display: flex; align-items: center; gap: 12px; }
.demande-titre { display: grid; gap: 4px; min-width: 0; }
.demande-titre h3 { font-size: 18px; font-weight: 720; }
.demande-titre p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; }
.motif { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 15.5px; color: var(--texte-2); font-style: italic; overflow-wrap: anywhere; }
.demande-reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.demande-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }

.carte-enfant { display: grid; gap: 16px; padding: 18px; position: relative; overflow: hidden; }
.carte-enfant::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
}
.enfant-tete { position: relative; display: flex; align-items: center; gap: 14px; }
.avatar-statut { position: relative; }
.avatar-statut .point-statut { position: absolute; right: 0; bottom: 1px; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--surface); }
.enfant-titres { flex: 1; min-width: 0; }
.enfant-titres h2 { font-size: 23px; font-weight: 760; }
.enfant-titres p { font-size: 14.5px; }
.enfant-corps { position: relative; display: grid; gap: 14px; }
.appli-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--ok-doux); font-size: 15px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.anneaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.groupe-etat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 14px; border-radius: 18px; background: var(--surface-2); text-align: center; border: 1px solid transparent; }
.groupe-etat.actif { border-color: var(--bord-fort); }
.groupe-legende { display: grid; gap: 2px; font-size: 13px; }
.groupe-legende strong { font-size: 15px; font-weight: 680; }
.motif-arret { color: var(--danger-texte); font-weight: 650; }
.anneau { position: relative; width: var(--taille); height: var(--taille); }
.anneau-svg { display: block; }
.anneau-fond { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.anneau-arc { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.3, .8, .3, 1), stroke .3s; }
.anneau-arc.illimite { opacity: .35; }
.anneau.bas .anneau-arc { stroke: var(--alerte); }
.anneau.arrete .anneau-arc { opacity: 0; }
.anneau-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.anneau-centre strong { font-size: 19px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.anneau-centre small { font-size: 12px; color: var(--texte-3); font-weight: 600; }
.anneau-centre.bloque { color: var(--danger-texte); }
.anneau.bas .anneau-centre strong { color: var(--alerte-texte); }
.actions-rapides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .actions-rapides { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tuile-action {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 76px; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--bord); background: var(--surface-2);
  font-size: 13px; font-weight: 650; color: var(--texte); text-align: center; line-height: 1.15; transition: transform .12s, background-color .2s;
}
.tuile-action:hover { background: var(--surface-3); }
.tuile-action:active { transform: scale(.96); }
.tuile-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--primaire-doux); color: var(--primaire-texte); }
.tuile-action.actif { background: var(--danger-doux); border-color: var(--danger-bord); }
.tuile-action.actif .tuile-ico { background: var(--danger); color: #fff; }
.tuile-action.occupe > * { opacity: .3; }
.tuile-action.occupe::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid; animation: tourne .7s linear infinite; }
.encart { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--primaire-doux); }
.encart > .ico { color: var(--primaire-texte); flex-shrink: 0; }
.encart > div { flex: 1; min-width: 0; }
.encart p { font-size: 14px; color: var(--texte-2); }
.encart-leger { display: flex; align-items: center; gap: 8px; }
.grille-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 88px; padding: 14px; border-radius: 16px; border: 1px solid var(--bord-fort); background: var(--surface-2); font-size: 15px; font-weight: 650; text-align: left; position: relative; }
.choix-carte .ico { color: var(--primaire-texte); }
.choix-carte:hover { border-color: var(--primaire); }

.liste-evenements { list-style: none; display: grid; }
.evenement { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.evenement + .evenement { border-top: 1px solid var(--bord); }
.evenement-ico { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: var(--surface-3); color: var(--texte-2); }
.evenement-texte { flex: 1; display: grid; gap: 1px; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.evenement-texte small { font-size: 13px; color: var(--texte-3); }
.evenement-heure { font-size: 13px; color: var(--texte-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.evenement.protection .evenement-ico { background: var(--danger-doux); color: var(--danger-texte); }
.evenement.protection .evenement-texte > span { font-weight: 650; }
.etiquette-protection { justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: var(--danger-doux); color: var(--danger-texte) !important; font-weight: 700; font-size: 11.5px !important; letter-spacing: .02em; }
.compacte .evenement { padding: 8px 0; }
.compacte .evenement-texte { font-size: 14.5px; }

/* ============ Règles ============ */
.selecteur-enfant { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.selecteur-enfant::-webkit-scrollbar { display: none; }
.choix-enfant { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 16px 4px 6px; border-radius: 999px; border: 1px solid var(--bord-fort); background: var(--surface); font-weight: 650; flex-shrink: 0; }
.choix-enfant[aria-checked="true"] { background: var(--primaire-doux); border-color: var(--primaire); color: var(--primaire-texte); }
.liste-groupes { display: grid; gap: 10px; }
@media (min-width: 760px) { .liste-groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-groupe { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 16px; transition: transform .15s, box-shadow .2s, border-color .2s; }
.carte-groupe:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: var(--ombre-2); }
.carte-groupe:active { transform: scale(.99); }
.groupe-pastille {
  display: grid; place-items: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 16px; font-size: 25px; line-height: 1; border: 0;
  background: var(--surface-3); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.groupe-pastille.grande { width: 72px; height: 72px; font-size: 36px; border-radius: 22px; }
.groupe-infos { flex: 1; display: grid; gap: 3px; min-width: 0; }
.groupe-infos strong { font-size: 17px; font-weight: 700; }
.groupe-temps { font-size: 14.5px; font-weight: 550; color: var(--texte-2); }
.groupe-infos .texte-3 { font-size: 13px; }
.chevron-fin { color: var(--texte-3); flex-shrink: 0; }
.carte-ajout { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 76px; border: 1.5px dashed var(--bord-fort); background: transparent; box-shadow: none; color: var(--primaire-texte); font-weight: 700; font-size: 15px; }
.carte-ajout:hover { background: var(--primaire-doux); border-color: var(--primaire); }
.grille-sections, .grille-groupe, .grille-reglages { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 1000px) {
  .grille-sections, .grille-groupe, .grille-reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.detail-nuit { display: grid; gap: 14px; padding-top: 6px; }

.identite-ligne { display: flex; align-items: center; gap: 16px; }
.identite-champs { flex: 1; display: grid; gap: 12px; min-width: 0; }
.nuancier { display: flex; flex-wrap: wrap; gap: 2px; }
.nuance { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.nuance::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--c); transition: box-shadow .2s, transform .2s; }
.nuance[aria-checked="true"]::before { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c); transform: scale(.92); }
.grille-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 8px; }
.emoji { height: 52px; border-radius: 15px; border: 1px solid var(--bord); background: var(--surface-2); font-size: 26px; line-height: 1; transition: transform .12s; }
.emoji:active { transform: scale(.92); }
.emoji[aria-checked="true"], .emoji[aria-pressed="true"] { background: var(--primaire-doux); border-color: var(--primaire); box-shadow: 0 0 0 1px var(--primaire); }
.apercu-avatar { display: flex; justify-content: center; padding: 4px 0; }

.resume-temps { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 15px; background: var(--primaire-doux); color: var(--primaire-texte); font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.resume-temps .ico { flex-shrink: 0; margin-top: 1px; }
.avert-temps { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--alerte-doux); color: var(--texte-2); font-size: 13.5px; }
.avert-temps .ico { color: var(--alerte-texte); flex-shrink: 0; margin-top: 2px; }
.liste-enveloppes, .liste-plages { display: grid; gap: 10px; }
.enveloppe, .plage { display: grid; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 17px; background: var(--surface-2); border: 1px solid var(--bord); }
.enveloppe { box-shadow: inset 4px 0 0 var(--c); }
.env-haut { display: flex; align-items: center; gap: 4px; }
.env-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.env-bas .segment { flex: 1 1 200px; }
.phrase-env { font-size: 14px; font-weight: 600; color: var(--texte-2); }
.aide-depliable { font-size: 14px; color: var(--texte-2); }
.aide-depliable summary { cursor: pointer; color: var(--primaire-texte); font-weight: 650; min-height: 44px; display: flex; align-items: center; list-style: none; }
.aide-depliable summary::-webkit-details-marker { display: none; }
.aide-depliable summary::before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--primaire-doux); font-size: 12px; font-weight: 800; }
.aide-depliable p { margin-top: 6px; }

.liste-applis { list-style: none; display: grid; }
.appli { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.appli + .appli { border-top: 1px solid var(--bord); }
.appli-ico { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--surface-3); color: var(--texte-2); }
.appli-texte { flex: 1; display: grid; min-width: 0; text-align: left; }
.appli-texte strong { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appli-texte small { font-size: 12.5px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.applis-vide { color: var(--texte-3); font-size: 14px; padding: 8px 0; }
.boutons-ajout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.boutons-ajout .bouton { flex-direction: column; gap: 4px; min-height: 66px; padding: 8px 4px; font-size: 13.5px; white-space: normal; text-align: center; }
.zone-danger { display: flex; justify-content: center; padding-top: 6px; }

/* Barre d'enregistrement */
.barre-enregistrer { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--hb) + 10px); display: flex; justify-content: center; animation: monte .3s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes monte { from { transform: translateY(24px); opacity: 0; } }
.barre-int { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; padding: 8px 8px 8px 16px; border-radius: 20px; background: var(--surface-inverse); color: var(--texte-inverse); box-shadow: var(--ombre-2); }
.barre-msg { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.barre-msg .ico { flex-shrink: 0; opacity: .8; }
.barre-msg.erreur { color: #FF9C9C; }
:root[data-theme="dark"] .barre-msg.erreur { color: #C21E1E; }
.barre-boutons { display: flex; gap: 6px; flex-shrink: 0; }
.barre-boutons .bouton { min-height: 44px; padding: 0 14px; }
.barre-boutons .bouton.fantome { color: inherit; opacity: .85; }
.barre-boutons .bouton.fantome:hover { background: rgba(127, 127, 127, .15); }
@media (min-width: 960px) { .barre-enregistrer { left: calc(var(--nav-l) + 24px); right: 24px; bottom: 24px; } }
@media (max-width: 400px) { .barre-msg span { font-size: 13px; } .barre-boutons .bouton { padding: 0 12px; } }

/* Catalogue et inventaire */
.catalogue { display: grid; gap: 12px; }
.filtres-cat { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.filtres-cat::-webkit-scrollbar { display: none; }
.filtres-cat .puce { flex-shrink: 0; }
.grille-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.grille-cat.dense { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.tuile-cat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 12px; min-height: 112px;
  border-radius: 18px; border: 1px solid var(--bord); background: var(--surface-2); transition: transform .12s, border-color .2s, background-color .2s;
}
.tuile-cat:active:not(:disabled) { transform: scale(.96); }
.tuile-cat[aria-pressed="true"] { border-color: var(--primaire); background: var(--primaire-doux); box-shadow: 0 0 0 1px var(--primaire); }
.tuile-cat:disabled { opacity: .55; cursor: default; }
.icone-cat { font-size: 32px; line-height: 1; height: 36px; display: grid; place-items: center; object-fit: contain; }
.nom-cat { font-size: 13.5px; font-weight: 650; text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.detail-cat { font-size: 11.5px; color: var(--texte-3); font-weight: 600; }
.coche-cat { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--primaire-fond); color: #fff; transform: scale(0); transition: transform .2s cubic-bezier(.3, .9, .3, 1.4); }
.tuile-cat[aria-pressed="true"] .coche-cat { transform: scale(1); }
.cat-rien { grid-column: 1 / -1; text-align: center; padding: 20px; }
.cat-pied { line-height: 1.4; }
.inventaire { display: grid; gap: 12px; }
.liste-inventaire { list-style: none; display: grid; gap: 6px; }
.ligne-inventaire { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface-2); text-align: left; }
.ligne-inventaire[aria-pressed="true"] { border-color: var(--primaire); background: var(--primaire-doux); }
.ligne-inventaire:disabled { opacity: .55; }
.case { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; border: 2px solid var(--bord-fort); color: transparent; transition: all .15s; }
.ligne-inventaire[aria-pressed="true"] .case { background: var(--primaire-fond); border-color: var(--primaire-fond); color: #fff; }

/* ============ Appairage ============ */
.appairage { display: grid; gap: 18px; }
.code-appairage { display: grid; justify-items: center; gap: 12px; padding: 20px 12px 14px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--bord); }
.code-car { display: flex; justify-content: center; gap: 8px; width: 100%; }
.car {
  flex: 1 1 0; max-width: 54px; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--bord-fort); box-shadow: var(--ombre-1);
  font-family: var(--police-mono); font-size: clamp(24px, 8vw, 36px); font-weight: 750; color: var(--texte);
}
.code-appairage.petit .car { max-width: 42px; font-size: clamp(20px, 6vw, 28px); }
.code-appairage.expire .car { opacity: .35; text-decoration: line-through; }
.code-pied { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; color: var(--texte-3); font-size: 14px; }
.code-pied .lien { min-height: 36px; margin-left: 8px; font-size: 14px; }
.rebours { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texte); }
.etapes-pc { list-style: none; display: grid; gap: 14px; }
.etapes-pc li { display: flex; gap: 14px; align-items: flex-start; }
.etapes-pc li > div { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.etapes-pc span:not(.num) { font-size: 14px; color: var(--texte-3); }
.etapes-pc .bouton span { color: inherit; font-size: 14px; }
.num { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--primaire-doux); color: var(--primaire-texte); font-weight: 800; font-size: 14px; }
.attente-appairage { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texte-2); font-size: 15px; font-weight: 550; padding: 4px; }
.point-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--primaire); animation: pulse-p 1.6s infinite; }
@keyframes pulse-p { 0% { box-shadow: 0 0 0 0 var(--primaire); } 70% { box-shadow: 0 0 0 10px transparent; } }
.succes-appairage { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px 0; }
.succes-appairage p { color: var(--texte-2); max-width: 340px; }
.grande-coche { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--ok); color: #fff; box-shadow: 0 14px 34px -10px var(--ok); animation: pop .5s cubic-bezier(.3, .9, .3, 1.5); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.etapes-simples { padding-left: 20px; display: grid; gap: 8px; color: var(--texte-2); font-size: 15px; }

/* ============ Activité ============ */
.grille-activite { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 1180px) { .grille-activite { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.carte-graphe { display: grid; gap: 14px; }
.graphe-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.graphe-entete .segment { min-width: 190px; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chiffre { display: grid; gap: 2px; padding: 12px; border-radius: 15px; background: var(--surface-2); min-width: 0; }
.chiffre span { font-size: 12.5px; font-weight: 600; }
.chiffre strong { font-size: 19px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.graphe-zone { margin: 0 -4px; }
.graphe { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.graphe .grille { stroke: var(--bord); stroke-width: 1; }
.graphe .axe { stroke: var(--bord-fort); stroke-width: 1; }
.graphe .graduation { fill: var(--texte-3); font-size: 12px; font-family: var(--police); font-variant-numeric: tabular-nums; }
.graphe .graduation.aujourdhui { fill: var(--texte); font-weight: 700; }
.graphe .moyenne { stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.graphe .cible { fill: transparent; }
.graphe .barre-jour { cursor: pointer; outline: none; }
.graphe .barre-jour.sel .cible, .graphe .barre-jour:hover .cible { fill: var(--surface-3); opacity: .7; }
.graphe .barre-jour:focus-visible .cible { stroke: var(--primaire); stroke-width: 2; }
.infobulle { padding: 12px 14px; border-radius: 15px; background: var(--surface-2); border: 1px solid var(--bord); font-size: 14px; display: grid; gap: 6px; }
.infobulle ul { list-style: none; display: grid; gap: 4px; }
.infobulle li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.infobulle .valeur { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.infobulle small { flex-basis: 100%; padding-left: 18px; }
.legende { list-style: none; display: grid; gap: 8px; }
.legende li { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 10px; align-items: center; font-size: 14.5px; }
.legende .leg-moy { grid-column: 2 / 4; font-size: 13px; margin-top: -2px; }
.legende .leg-val { font-weight: 720; font-variant-numeric: tabular-nums; }
.legende .leg-nom { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille-leg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex-shrink: 0; }
.trait-moy { display: inline-block; width: 12px; border-top: 2px dashed var(--texte-3); }
.leg-moyenne { padding-top: 6px; border-top: 1px solid var(--bord); }
.tableau-donnees summary { cursor: pointer; color: var(--primaire-texte); font-weight: 650; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.tableau-defile { overflow-x: auto; }
.tableau-donnees table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tableau-donnees th, .tableau-donnees td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau-donnees thead th { color: var(--texte-3); font-weight: 650; }
.alerte-protection { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px; border-radius: var(--rayon); background: var(--danger-doux); border: 1px solid var(--danger-bord); }
.alerte-protection > div { flex: 1 1 220px; display: grid; gap: 4px; }
.alerte-protection strong { color: var(--danger-texte); font-size: 16px; }
.alerte-protection p { font-size: 14px; color: var(--texte-2); }
.alerte-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--danger); color: #fff; flex-shrink: 0; }
.carte-journal { display: grid; align-content: start; }
.jour-journal { font-size: 12.5px; font-weight: 700; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 2px; }
.carte-journal .titre-carte + .jour-journal { margin-top: 10px; }

/* ============ Appareils ============ */
.liste-appareils { display: grid; gap: 18px; }
.carte-appareil { display: grid; gap: 16px; }
.appareil-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.appareil-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--primaire-doux); color: var(--primaire-texte); flex-shrink: 0; }
.appareil-titres { flex: 1; min-width: 0; }
.appareil-titres h2 { font-size: 20px; font-weight: 740; overflow-wrap: anywhere; }
.appareil-titres p { font-size: 14px; }
.appareil-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appareil-meta > div { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.appareil-meta span { font-size: 12px; font-weight: 600; }
.appareil-meta strong { font-size: 15px; font-weight: 680; overflow-wrap: anywhere; }
.meta-enfant { display: inline-flex; align-items: center; gap: 6px; }
.bloc-protection { display: grid; gap: 6px; padding: 16px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--bord); }
.protection-tete { display: flex; align-items: center; gap: 16px; padding-bottom: 8px; }
.protection-tete h3 { font-size: 18px; font-weight: 740; }
.protection-tete p { font-size: 13.5px; margin-top: 2px; }
.jauge-protection { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.jauge-protection .anneau-fond { stroke-width: 8; stroke: var(--surface-3); }
.jauge-arc { fill: none; stroke-width: 8; stroke-linecap: round; stroke: var(--ok); transition: stroke-dashoffset 1s cubic-bezier(.3, .8, .3, 1); }
.jauge-protection.moyen .jauge-arc { stroke: var(--alerte); }
.jauge-protection.faible .jauge-arc { stroke: var(--danger); }
.jauge-note { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.jauge-note strong { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.jauge-note small { font-size: 11px; color: var(--texte-3); font-weight: 650; margin-top: 2px; }
.recommandations { list-style: none; display: grid; }
.recommandation { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.rec-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; background: var(--primaire-doux); color: var(--primaire-texte); }
.recommandation.haute .rec-ico { background: var(--danger-doux); color: var(--danger-texte); }
.recommandation.moyenne .rec-ico { background: var(--alerte-doux); color: var(--alerte-texte); }
.rec-texte { flex: 1 1 200px; display: grid; gap: 3px; min-width: 0; }
.rec-texte strong { font-size: 15.5px; font-weight: 680; }
.rec-texte p { font-size: 14px; color: var(--texte-3); }
.recommandation > .bouton { margin-left: 48px; }
@media (min-width: 600px) { .recommandation { flex-wrap: nowrap; align-items: center; } .recommandation > .bouton { margin-left: 0; } }
.etiquette-conseil { justify-self: start; font-size: 11.5px; font-weight: 700; color: var(--primaire-texte); background: var(--primaire-doux); padding: 1px 8px; border-radius: 999px; }
.bloc-comptes { display: grid; gap: 6px; }
.liste-comptes { list-style: none; display: grid; margin-top: 4px; }
.compte { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.compte + .compte { border-top: 1px solid var(--bord); }
.compte-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--texte-2); flex-shrink: 0; }
.compte-texte { flex: 1; display: grid; gap: 2px; min-width: 0; justify-items: start; }
.compte-texte strong { font-size: 15.5px; }
.compte-texte small { font-size: 13px; }
.compte-surveille { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.appareil-pied { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--bord); padding-top: 14px; }

/* ============ Réglages ============ */
.profil { display: flex; align-items: center; gap: 14px; }
.profil strong { font-size: 18px; }
.profil p { font-size: 14px; overflow-wrap: anywhere; }
.liste-parents { list-style: none; display: grid; gap: 8px; }
.liste-parents li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.liste-enfants-reglages { list-style: none; display: grid; }
.liste-enfants-reglages li + li { border-top: 1px solid var(--bord); }
.ligne-enfant { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; border: 0; background: none; text-align: left; }
.aide-ios { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--bord); font-size: 14.5px; }
.aide-ios ol { padding-left: 20px; display: grid; gap: 6px; color: var(--texte-2); }
.aide-ios .ico { vertical-align: -3px; color: var(--primaire-texte); }
.version { text-align: center; font-size: 13px; padding: 8px; }
.section-reglages > .bouton { justify-self: start; }

/* ============ Connexion ============ */
.vue-connexion { padding-top: 0; padding-left: 0; padding-right: 0; }
.vue-connexion .vue-contenu { max-width: none; }
.ecran-connexion { min-height: 100vh; min-height: 100dvh; display: grid; align-content: start; gap: 22px; padding: calc(var(--ht) + 36px) max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); position: relative; isolation: isolate; }
.ecran-connexion::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1;
  background: radial-gradient(60% 70% at 15% 0%, rgba(110, 91, 255, .30), transparent 70%), radial-gradient(50% 60% at 95% 10%, rgba(242, 169, 59, .20), transparent 70%);
}
.connexion-hero { display: grid; gap: 12px; max-width: 460px; width: 100%; margin: 0 auto; }
.logo-hero { border-radius: 20px; box-shadow: 0 18px 44px -14px rgba(91, 71, 245, .7); }
.connexion-hero h1 { font-size: 36px; font-weight: 800; letter-spacing: -.035em; }
.accroche { font-size: 18px; color: var(--texte-2); line-height: 1.4; }
.atouts { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.atouts li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--texte-2); font-weight: 550; }
.atouts .ico { color: var(--primaire-texte); flex-shrink: 0; padding: 7px; width: 32px; height: 32px; border-radius: 10px; background: var(--primaire-doux); }
.connexion-carte { width: 100%; max-width: 460px; margin: 0 auto; padding: 20px; display: grid; gap: 18px; box-shadow: var(--ombre-2); }
.formulaire-connexion { display: grid; gap: 16px; }
details.invitation summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--primaire-texte); font-weight: 650; font-size: 15px; list-style: none; }
details.invitation summary::-webkit-details-marker { display: none; }
details.invitation[open] summary { margin-bottom: 8px; }
.mentions { text-align: center; font-size: 13px; color: var(--texte-3); max-width: 460px; margin: 0 auto; }
@media (min-width: 960px) {
  .ecran-connexion { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-content: center; align-items: center; gap: 64px; max-width: 1100px; margin: 0 auto; padding: 48px; }
  .ecran-connexion::before { position: fixed; height: 100%; }
  .connexion-hero { margin: 0; max-width: 520px; }
  .connexion-hero h1 { font-size: 52px; }
  .accroche { font-size: 21px; }
  .mentions { grid-column: 2; }
}

/* ============ Accueil guidé ============ */
.bienvenue { max-width: 640px; width: 100%; margin: 0 auto; display: grid; gap: 18px; }
.bienvenue-haut { display: flex; align-items: center; gap: 16px; }
.progression { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.prog-pas { display: grid; gap: 6px; }
.prog-barre { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; position: relative; }
.prog-pas.fait .prog-barre, .prog-pas.courant .prog-barre { background: var(--primaire); }
.prog-texte { font-size: 11.5px; font-weight: 650; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-pas.courant .prog-texte { color: var(--texte); }
.passer { flex-shrink: 0; }
.bienvenue-carte { padding: 22px 18px; display: grid; gap: 20px; }
.bienvenue-entete { display: grid; gap: 8px; }
.bienvenue-entete h1 { font-size: 27px; font-weight: 780; letter-spacing: -.025em; }
.bienvenue-entete p { font-size: 15.5px; }
.bienvenue-pied { display: grid; gap: 10px; padding-top: 4px; }
.vue-bienvenue .vue-contenu { max-width: 680px; }
.apercu-notif { border-radius: 20px; background: var(--surface-2); border: 1px solid var(--bord); overflow: hidden; box-shadow: var(--ombre-1); }
.notif-factice { display: flex; align-items: center; gap: 12px; padding: 14px; }
.notif-factice img { border-radius: 9px; }
.notif-factice > div { flex: 1; min-width: 0; }
.notif-factice p { font-size: 14px; color: var(--texte-2); }
.notif-factice > span { font-size: 12px; align-self: flex-start; }
.notif-boutons { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bord); }
.notif-boutons span { text-align: center; padding: 11px; font-weight: 650; color: var(--primaire-texte); font-size: 14.5px; }
.notif-boutons span + span { border-left: 1px solid var(--bord); }
.fin-bienvenue { display: grid; justify-items: center; gap: 22px; padding: 6px 0; }
@media (min-width: 720px) { .bienvenue-carte { padding: 30px; } }

/* ============ Mouvement réduit ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .puce-jour[aria-pressed="true"], .puce[aria-pressed="true"], .tuile-cat[aria-pressed="true"] { outline: 2px solid Highlight; }
  .interrupteur .piste { border: 1px solid CanvasText; }
}

/* ============ Ajouts : PC partagé, horaires du PC, pauses, barre ============ */
.comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comparaison > div { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--bord); font-size: 13.5px; color: var(--texte-2); }
.comparaison strong { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--primaire-texte); }
.schema-ecran {
  position: relative; width: min(260px, 100%); aspect-ratio: 16 / 10; margin: 4px auto 0; border-radius: 14px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); border: 2px solid var(--bord-fort);
}
.schema-ecran::after { content: ""; position: absolute; left: 38%; right: 38%; bottom: -14px; height: 10px; border-radius: 0 0 8px 8px; background: var(--bord-fort); }
.schema-fenetre { position: absolute; inset: 26% 24%; border-radius: 8px; background: var(--surface); box-shadow: var(--ombre-1); border: 1px solid var(--bord); }
.schema-bord { position: absolute; border: 0; background: none; padding: 0; display: grid; }
.schema-bord::before { content: ""; border-radius: 6px; background: var(--bord-fort); transition: background-color .2s, box-shadow .2s; }
.schema-bord.haut, .schema-bord.bas { left: 0; right: 0; height: 44px; }
.schema-bord.haut { top: -2px; align-items: start; }
.schema-bord.bas { bottom: -2px; align-items: end; }
.schema-bord.haut::before, .schema-bord.bas::before { height: 12px; margin: 5px; }
.schema-bord.gauche, .schema-bord.droite { top: 44px; bottom: 44px; width: 44px; }
.schema-bord.gauche { left: -2px; justify-items: start; }
.schema-bord.droite { right: -2px; justify-items: end; }
.schema-bord.gauche::before, .schema-bord.droite::before { width: 16px; margin: 5px; }
.schema-bord:hover::before { background: color-mix(in srgb, var(--primaire) 45%, transparent); }
.schema-bord[aria-checked="true"]::before { background: var(--primaire-fond); box-shadow: 0 4px 14px -4px var(--primaire-fond); }
.schema-bord:focus-visible { outline: none; }
.schema-bord:focus-visible::before { box-shadow: var(--anneau-focus); }
.infos-enfant { display: grid; gap: 8px; }
.ligne-total { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 15px; background: var(--surface-2); }
.ligne-total-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--primaire-doux); color: var(--primaire-texte); flex-shrink: 0; }
.ligne-total-texte { flex: 1; display: grid; gap: 6px; min-width: 0; }
.ligne-total-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.ligne-total-haut span { color: var(--texte-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.jauge-lineaire { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.jauge-lineaire span { display: block; height: 100%; border-radius: 3px; background: var(--primaire); transition: width .8s; }
.ligne-total.bas .jauge-lineaire span { background: var(--alerte); }
.ligne-total.arrete .ligne-total-ico { background: var(--danger-doux); color: var(--danger-texte); }
.motif-pause { color: var(--alerte-texte); font-weight: 650; }
.anneau-centre.en-pause { color: var(--alerte-texte); gap: 2px; justify-items: center; }
.anneau-centre.en-pause small { color: var(--alerte-texte); }
.compte.nouveau { margin: 4px -10px; padding: 10px; border-radius: 14px; background: var(--alerte-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alerte) 40%, transparent); }
.compte.nouveau + .compte { border-top: 0; }
.compte .champ.petit { width: auto; max-width: 46%; min-width: 120px; flex-shrink: 0; }
.compte-badges { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.mini-texte { font-size: 12.5px; }
.meta-enfant { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.meta-un { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 380px) { .comparaison { grid-template-columns: 1fr; } }
.grille-choix > :last-child:nth-child(odd) { grid-column: span 2; }
.choix-carte small { font-size: 13px; font-weight: 500; margin-top: -6px; }
.actions-rapides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.actions-rapides > .tuile-action:last-child:nth-child(4n + 3) { grid-column: span 2; }
@media (min-width: 600px) { .actions-rapides { grid-template-columns: repeat(7, minmax(0, 1fr)); } .actions-rapides > .tuile-action:last-child:nth-child(4n + 3) { grid-column: auto; } }
/* Les grilles ne s'élargissent jamais au-delà de leur conteneur (contenu long, listes déroulantes). */
.carte-appareil, .carte-enfant, .carte-demande, .section-reglages, .carte-graphe, .pile, .bloc-protection, .bloc-comptes, .enfant-corps, .vue-contenu, .accueil-principal, .liste-appareils, .zone-enfants, .zone-demandes { grid-template-columns: minmax(0, 1fr); }
.liste-groupes { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .liste-groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liste-comptes, .recommandations, .liste-applis, .liste-evenements { grid-template-columns: minmax(0, 1fr); }
.compte-badges .badge { white-space: normal; }
.compte .champ.petit { max-width: 48%; min-width: 0; width: 150px; text-overflow: ellipsis; }
.ligne-champ > .texte-2 { font-size: 14px; font-weight: 600; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.msg-court { display: none; }
@media (max-width: 520px) { .msg-long { display: none; } .msg-court { display: inline; } }
.msg-court { white-space: nowrap; }