@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
/* Deux couleurs seulement : le blanc et la couleur de la page (ou celle choisie par le visiteur). */
/* Couleurs déclarées comme couleurs : quand on en change, elles passent de l'une à l'autre en fondu lent. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #E2462F; }
@property --white { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --frame { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .17); }
@property --frame-hi { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .27); }
:root {
  --fade: .35s cubic-bezier(.4, 0, .2, 1);
  --white: #FFFFFF;
  --f-display: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --swift: cubic-bezier(.7, 0, .2, 1);
  color-scheme: light;
}
.page {
  --bg: var(--user, var(--tool, #D4381F));
  --tint: color-mix(in srgb, var(--bg) 9%, #FFFFFF);
  --tint-2: color-mix(in srgb, var(--bg) 16%, #FFFFFF);
  --line: color-mix(in srgb, var(--bg) 24%, #FFFFFF);
  --shadow: color-mix(in srgb, var(--bg) 38%, transparent);
  /* Le cadre maison : rectangle arrondi, couleur plus claire. Le même pour tout ce qu'on touche. */
  --frame: rgba(255, 255, 255, .17);
  --frame-hi: rgba(255, 255, 255, .27);
  --r: 16px;
  --peek: 0px; /* le bandeau va jusqu'en bas de la fenêtre ; une flèche invite à descendre */
  transition: --bg var(--fade);
}
/* Une seule transition par couleur, là où elle est déclarée : les éléments enfants suivent sans à-coups. */
.hero, .cbar { transition: --white var(--fade), --frame var(--fade), --frame-hi var(--fade); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; font-family: var(--f-body); font-size: 16px; line-height: 1.5; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.below :focus-visible, .popover :focus-visible, .dd-menu :focus-visible, .theme-panel :focus-visible { outline-color: var(--bg); }
.site-foot :focus-visible { outline-color: var(--white); }

/* Valeurs qui changent sans rien décaler : cases de largeur fixe et « fantômes » invisibles. */
.stack { display: inline-grid; justify-items: center; align-items: center; }
.stack > * { grid-area: 1 / 1; white-space: nowrap; }
.ghost { visibility: hidden; }
.dg { display: inline-block; width: .5em; text-align: center; }
.sep { display: inline-block; }

/* ---------- Bandeau outil ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  background-color: var(--bg); color: var(--white);
  padding-block: 18px 56px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.hero--alarm, .hero--timer, .hero--stopwatch, .hero--clock, .hero--pomodoro {
  /* Même hauteur pour tous les outils : l'écran entier, moins un liseré qui laisse deviner la suite en blanc. */
  min-height: min(calc(100vh - var(--peek)), 1100px); min-height: min(calc(100svh - var(--peek)), 1100px);
}
.hero--alarm .tool, .hero--timer .tool, .hero--stopwatch .tool, .hero--pomodoro .tool { justify-content: center; padding-bottom: 6vh; }
.scene { position: absolute; inset: 0; z-index: -2; }
.scene svg { display: block; width: 100%; height: 100%; max-width: none; }
.scene::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 25%, transparent); }

/* En-tête : logo et titre à gauche ; onglets ferrés à droite, contre les boutons. Rien ne bouge d'un onglet à l'autre. */
.top { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; view-transition-name: top; }
.top-right { justify-self: end; }
.top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-title { margin: 0; padding-left: 14px; border-left: 1.5px solid color-mix(in srgb, var(--white) 45%, transparent); font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.logo { display: inline-flex; align-items: center; color: var(--white); text-decoration: none; line-height: 1; }
/* Logo : « clock » ; seul le o est une petite roue (un o au-dessus, un o en dessous, estompés). */
.logo-word { --lf: 30px; display: inline-block; padding-block: .72em; font-family: var(--f-body); font-weight: 800; font-size: var(--lf); letter-spacing: -.035em; line-height: 1.1; white-space: nowrap; }
.logo-o { position: relative; display: inline-block; }
.lo-ghost { visibility: hidden; }
.lo-wheel { position: absolute; left: -.16em; right: -.16em; top: 50%; height: 2.5em; margin-top: -1.25em; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); }
.lo-wheel .wheel-track { position: absolute; inset: 0; }
.lo-wheel .w-item { letter-spacing: 0; }
.logo-static span { position: absolute; left: 0; right: 0; top: 50%; height: 1.1em; margin-top: -.55em; line-height: 1.1em; text-align: center; letter-spacing: 0; }
.logo-static span:nth-child(1) { transform: translateY(-.64em) scale(.84); opacity: .45; }
.logo-static span:nth-child(3) { transform: translateY(.64em) scale(.84); opacity: .45; }
.lo-wheel.ready .logo-static { display: none; }
.site-foot .logo-word { --lf: 48px; padding-block: .3em; }
.nav { display: flex; gap: 2px; }
.nav a { position: relative; display: inline-flex; flex-direction: column; align-items: center; color: var(--white); text-decoration: none; font-weight: 500; font-size: 17px; padding: 10px 12px; white-space: nowrap; }
.nav a::before { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; } /* largeur du gras réservée : rien ne bouge */
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--white); transform: scaleX(0); transition: transform .25s var(--ease); }
.nav a:hover::after { transform: scaleX(.5); }
.nav a[aria-current="page"] { font-weight: 700; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.top-right { display: flex; align-items: center; gap: 6px; }
.lang { color: var(--white); font-weight: 700; font-size: 15px; padding: 12px 8px; text-decoration: none; }
.lang:hover { text-decoration: underline; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s; }
.icon-btn:hover { background: var(--frame-hi); }
[data-fullscreen] .fs-exit, .hero.is-fs [data-fullscreen] > svg:not(.fs-exit) { display: none; }
.hero.is-fs [data-fullscreen] .fs-exit { display: block; }

.hero { --gap: clamp(22px, 4.8vh, 60px); }
.tool { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding-top: clamp(16px, 3.2vh, 44px); text-align: center; }
.hero--alarm .tool { justify-content: center; padding-bottom: 8px; }
.eyebrow { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lead { position: relative; z-index: 2; margin: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 500; line-height: 1.3; }
.page-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(48px, 9vw, 96px); line-height: 1; }
.date { margin: 0; font-size: 18px; font-weight: 500; min-height: 1.5em; }

/* ---------- Réveil : le réglage, puis le réveil programmé qui monte comme un rideau de couleur ---------- */
.stage { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.state { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.state--idle { justify-content: center; transition: visibility 0s linear .7s; }
.hero:not(.is-armed) .state--idle { transition: none; }
.is-armed .state--idle { visibility: hidden; }
.hero--alarm .tool { position: static; }
/* Le réveil programmé couvre tout le bandeau (sous l'en-tête) ; il se dévoile de bas en haut, le contenu ne bouge pas. */
.state--armed {
  position: absolute; inset: 0; z-index: 3; justify-content: center; gap: clamp(10px, 2.4vh, 30px);
  padding: 92px max(var(--gutter), env(safe-area-inset-right, 0px)) 40px;
  background: var(--bg); color: var(--white);
  clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: clip-path .7s var(--swift), visibility 0s linear .7s;
}
.is-armed .state--armed { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--swift), visibility 0s; }
.hero--alarm .top { z-index: 4; }
.hero.instant, .hero.instant * { transition: none !important; }

.time-pick { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2.5vw, 28px); }
.round-btn { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--white) 55%, transparent); background: transparent; color: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s, transform .12s; }
.round-btn:hover { background: color-mix(in srgb, var(--white) 14%, transparent); border-color: var(--white); }
.round-btn:active { transform: scale(.92); }
.time-anchor { position: relative; }
.big-time { display: inline-flex; font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, min(14vw, 20vh), 190px); line-height: 1; padding: 0 .34em; }
.big-time > .stack { padding: .04em 0; }
.tv { position: relative; display: inline-flex; align-items: center; }
.tv-h, .tv-m { overflow: hidden; width: 1.16em; border: 0; padding: .04em 0 0; margin: 0; background: var(--frame); color: var(--white); font: inherit; line-height: 1; border-radius: .11em; transition: background-color .15s, transform .12s; }
.tv-sep { width: .3em; text-align: center; }
.tv-h:hover, .tv-m:hover, .tv-h.is-open, .tv-m.is-open { background: var(--frame-hi); }
.tv-h:active, .tv-m:active { transform: scale(.97); }
.tv-sep { display: inline-block; }
.tv.no-hour .tv-h, .tv.no-hour .tv-sep { display: none; }
.big-time .unit { position: absolute; left: 100%; top: .4em; margin-left: .6em; font-family: var(--f-body); font-weight: 700; font-size: .14em; line-height: 1; letter-spacing: .06em; }
.countdown { font-family: var(--f-display); font-size: clamp(64px, min(15vw, 17vh), 190px); line-height: 1; }
.sleep-note { margin: 0; min-height: 1.5em; font-size: clamp(17px, 2vw, 20px); font-weight: 500; }
.hint { margin: 0; font-size: 15px; }
.is-armed .btn-primary { color: var(--bg); }

/* Citation : la phrase, l'auteur et le bouton pour en changer, sur la même ligne */
.quote { margin: 0; width: min(1000px, 100%); min-height: 3em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; text-align: center; }
.quote blockquote { margin: 0; font-size: clamp(18px, 2vw, 22px); font-style: italic; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.quote blockquote.bump { animation: bump .3s var(--ease); }
.quote figcaption { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: .85; }
.quote-more { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--frame); color: var(--white); transition: background-color .15s; }
.quote-more:hover { background: var(--frame-hi); }
.quote-more svg { transition: transform .4s var(--ease); }
.quote-more:active svg { transform: rotate(-180deg); }

/* Fenêtre de choix : d'abord l'heure, puis les minutes */
.popover { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 30; width: min(380px, calc(100vw - 32px)); transform: translateX(-50%); background: var(--white); color: var(--bg); border-radius: 24px; padding: 14px; box-shadow: 0 24px 64px var(--shadow); text-align: left; font-family: var(--f-body); line-height: 1.3; }
.popover:not([hidden]) { animation: pop .16s var(--ease); }
@keyframes pop { from { transform: translateX(-50%) translateY(-8px) scale(.98); } }
.pop-tabs { margin-bottom: 12px; }
.pop-sub { margin: 10px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.pop-sub:first-child { margin-top: 0; }
.pop-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pop-grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pop-grid button, .seg button { min-height: 46px; padding: 0 2px; border: 0; border-radius: 12px; background: var(--tint); color: var(--bg); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .12s; }
.pop-grid button:hover, .seg button:hover { background: var(--tint-2); }
.pop-grid button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--bg); color: var(--white); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---------- Choix au toucher (sonnerie, répétition, à / dans) ---------- */
.sentence { margin: 0; font-size: clamp(21px, 3vw, 32px); line-height: 1.9; font-weight: 500; max-width: 1040px; text-wrap: balance; }
.cyc { position: relative; display: inline-flex; align-items: stretch; vertical-align: baseline; line-height: 1.3; border-radius: 14px; background: var(--frame); transition: background-color .15s; }
.cyc:hover, .cyc:has(.cyc-more[aria-expanded="true"]) { background: var(--frame-hi); }
.cyc-btn, .cyc-more { border: 0; background: transparent; color: var(--white); font-weight: inherit; font-size: 1em; }
.cyc-btn { min-height: 0; padding: .1em .42em .14em; border-radius: 14px; text-align: left; white-space: nowrap; transition: width .28s var(--ease); }
.cyc-more { display: inline-flex; align-items: center; margin-left: -.15em; padding: 0 .4em 0 .1em; border-radius: 0 14px 14px 0; opacity: .85; }
.cyc-more:hover { opacity: 1; }
.cyc-btn:active { transform: scale(.98); }
.cyc-btn { overflow: hidden; }
.cyc-btn [data-cyc-value] { display: inline-block; }
.cyc-btn.bump [data-cyc-value] { animation: bump .28s var(--ease); }
@keyframes bump { from { transform: translateY(.35em); } }
.cyc-more .chev { width: .55em; height: .55em; min-width: 14px; min-height: 14px; transition: transform .2s var(--ease); }
.cyc-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-menu { display: block; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 100%; margin: 0; padding: 8px; background: var(--white); color: var(--bg); border-radius: 20px; box-shadow: 0 24px 64px var(--shadow); font-size: 17px; line-height: 1.3; text-align: left; white-space: nowrap; outline: none; }
.dd-menu:not([hidden]) { animation: drop .16s var(--ease); }
@keyframes drop { from { transform: translateY(-6px); } }
/* La liste des sonneries, en pop-up */
.modal-card.dd-card { width: min(360px, 100%); text-align: center; }
.dd-card .modal-title { margin-bottom: 18px; }
.dd-card .dd-menu { position: static; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; background: none; color: var(--bg); border-radius: 0; box-shadow: none; font-size: 19px; text-align: center; animation: none; }
.dd-card .dd-opt { justify-content: center; min-height: 60px; padding: 0 18px; border-radius: var(--r); background: var(--tint); font-weight: 700; transition: background-color .15s, transform .12s; }
.dd-card .dd-opt:hover, .dd-card .dd-opt.is-active { background: var(--tint-2); }
.dd-card .dd-opt[aria-selected="true"] { background: var(--bg); color: var(--white); }
.dd-card .dd-opt:active { transform: scale(.98); }
.dd-card .dd-opt .check { display: none; }
.dd-opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 12px; border-radius: 12px; cursor: pointer; font-weight: 500; }
.dd-opt .check { flex: none; visibility: hidden; }
.dd-opt[aria-selected="true"] { font-weight: 700; }
.dd-opt[aria-selected="true"] .check { visibility: visible; }
.dd-opt:hover, .dd-opt.is-active { background: var(--tint); }

/* ---------- Règle à faire glisser au doigt ---------- */
.ruler-wrap { position: relative; width: min(760px, 100%); }
.ruler-wrap::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 88px; margin-left: -44px; border-radius: 14px; background: var(--frame); pointer-events: none; }
.ruler { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.ruler::-webkit-scrollbar { display: none; }
.ruler.dragging { scroll-snap-type: none; cursor: grabbing; }
.ruler-track { display: flex; padding-inline: calc(50% - 44px); }
.r-item { flex: none; width: 88px; height: 66px; padding: 0; border: 0; background: transparent; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); font-family: var(--f-display); font-size: 26px; line-height: 1; text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.r-item small { margin-top: 4px; font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.r-item.is-center { color: var(--white); }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-primary, .btn-ghost { min-height: 62px; padding: 0 36px; border: 0; border-radius: var(--r); font-weight: 700; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .12s, box-shadow .2s, background-color .15s, color .45s; }
.btn-primary { background: var(--white); color: var(--bg); }
.btn-primary:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--white) 28%, transparent); }
.btn-ghost { background: var(--frame); color: var(--white); }
.btn-ghost:hover:not(:disabled) { background: var(--frame-hi); }
.btn-primary:active, .btn-ghost:active:not(:disabled) { transform: scale(.97); }
.btn-wide { min-width: 210px; }
.label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.chip-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; transition: background-color .15s, color .15s; }
.chip-btn:hover { background: var(--frame-hi); }
.chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }

/* ---------- Horloge ---------- */
.clock { display: flex; align-items: center; justify-content: center; min-height: clamp(150px, 26vw, 320px); font-family: var(--f-display); font-weight: 400; line-height: 1; }
.clock--mono { --hm: clamp(100px, min(26vw, 40vh), 440px); }
.clock--mono .hm { font-size: var(--hm); line-height: .82; }
.clock--mono .side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; align-self: center; height: calc(.72 * var(--hm)); margin-left: .22em; }
.clock--mono .sec { line-height: .78; }
.clock--mono .ampm { line-height: 1; }
.clock--mono .side:has(> :only-child) { justify-content: flex-end; }
.clock--mono .sec { font-size: clamp(30px, min(7vw, 11vh), 120px); }
.clock--mono .ampm { font-family: var(--f-body); font-weight: 700; font-size: clamp(16px, min(2.4vw, 3.4vh), 40px); letter-spacing: .06em; }
.clock--flip { gap: clamp(10px, 2vw, 20px); }
.flip-card { position: relative; background: color-mix(in srgb, var(--bg) 70%, #000); border-radius: .1em; padding: .06em .14em; font-size: clamp(76px, min(21vw, 34vh), 340px); }
.clock--flip.has-sec .flip-card { font-size: clamp(56px, min(15vw, 28vh), 260px); }
.flip-card::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--bg); }
.colon { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 26px); }
.colon i { display: block; width: clamp(10px, 1.4vw, 18px); height: clamp(10px, 1.4vw, 18px); border-radius: 50%; background: var(--white); }
/* Montre de prestige, en relief : acier poli, cadran soleillé de la couleur de la page, verre bombé, bracelet cuir */
.clock--watch { --w: clamp(200px, min(34vh, 60vw), 460px); }
.lux { position: relative; width: calc(var(--w) * 1.12); height: calc(var(--w) * 1.75); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 calc(var(--w) * .06) calc(var(--w) * .07) rgba(0, 0, 0, .35)); }
.lux-strap { position: absolute; left: 50%; width: calc(var(--w) * .46); height: calc(var(--w) * .5); margin-left: calc(var(--w) * -.23); background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 18%, rgba(255,255,255,.08) 50%, rgba(0,0,0,0) 82%, rgba(0,0,0,.35)), repeating-linear-gradient(35deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.04) 2px 4px), color-mix(in srgb, var(--bg) 38%, #2A1A12); }
.lux-strap::before { content: ""; position: absolute; inset: calc(var(--w) * .02) calc(var(--w) * .035); border-left: 1.5px dashed rgba(255, 238, 214, .55); border-right: 1.5px dashed rgba(255, 238, 214, .55); }
.lux-strap--top { top: 0; border-radius: calc(var(--w) * .06) calc(var(--w) * .06) 0 0; }
.lux-strap--bot { bottom: 0; border-radius: 0 0 calc(var(--w) * .06) calc(var(--w) * .06); }
.lux-case { position: relative; width: var(--w); height: var(--w); border-radius: 50%; background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #E9ECEF 18%, #A9AFB6 48%, #F5F6F7 62%, #7E858D 82%, #C9CDD2 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 calc(var(--w) * -.02) calc(var(--w) * .04) rgba(0,0,0,.35); }
.lux-case::before, .lux-case::after { content: ""; position: absolute; left: 50%; width: calc(var(--w) * .52); height: calc(var(--w) * .16); margin-left: calc(var(--w) * -.26); background: linear-gradient(90deg, #8A9097, #F1F3F5 30%, #B9BEC4 55%, #ECEEF0 75%, #858B92); z-index: -1; }
.lux-case::before { top: calc(var(--w) * -.08); border-radius: calc(var(--w) * .05) calc(var(--w) * .05) 0 0; }
.lux-case::after { bottom: calc(var(--w) * -.08); border-radius: 0 0 calc(var(--w) * .05) calc(var(--w) * .05); }
.lux-crown { position: absolute; top: 50%; left: 50%; width: calc(var(--w) * .07); height: calc(var(--w) * .15); margin-top: calc(var(--w) * -.075); margin-left: calc(var(--w) * .49); border-radius: calc(var(--w) * .02); background: repeating-linear-gradient(180deg, #E6E9EC 0 2px, #8C9299 2px 4px); box-shadow: inset -2px 0 4px rgba(0,0,0,.35); }
.lux-bezel { position: absolute; inset: calc(var(--w) * .05); border-radius: 50%; background: conic-gradient(from 210deg, #9AA0A7, #FFFFFF, #B4B9BF, #6F767E, #F2F4F6, #9AA0A7); padding: calc(var(--w) * .022); box-shadow: inset 0 0 calc(var(--w) * .01) rgba(0,0,0,.5); }
.lux-dial { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; --dial: color-mix(in srgb, var(--bg) 72%, #06070F); background: radial-gradient(circle, transparent 55%, rgba(0,0,0,.42) 100%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--dial) 82%, #FFFFFF) 0deg, var(--dial) 2.5deg, color-mix(in srgb, var(--dial) 88%, #000) 5deg, var(--dial) 7.5deg, color-mix(in srgb, var(--dial) 82%, #FFFFFF) 10deg), var(--dial); box-shadow: inset 0 calc(var(--w) * .012) calc(var(--w) * .03) rgba(0,0,0,.55); }
.lux-track { position: absolute; inset: 4%; border-radius: 50%; background: repeating-conic-gradient(from -.5deg, rgba(240, 242, 245, .85) 0 1deg, transparent 1deg 6deg); -webkit-mask: radial-gradient(circle, transparent 0 92%, #000 92.5% 98%, transparent 98.5%); mask: radial-gradient(circle, transparent 0 92%, #000 92.5% 98%, transparent 98.5%); }
.lux-idx i { position: absolute; left: 50%; top: 50%; width: 3.4%; height: 11%; border-radius: 1px; background: linear-gradient(90deg, #8E949B, #FFFFFF 45%, #C7CBD0 55%, #7D838A); box-shadow: 0 1px 2px rgba(0,0,0,.6); transform: translate(-50%, -50%) rotate(var(--a)) translateY(-345%); }
.lux-idx i.twelve { width: 6.6%; background: linear-gradient(90deg, #8E949B, #FFFFFF 22%, #C7CBD0 28%, #7D838A 46%, transparent 46% 54%, #8E949B 54%, #FFFFFF 72%, #C7CBD0 78%, #7D838A); box-shadow: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); }
.lux-logo { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .066em; height: 3.4em; font-family: var(--f-body); font-weight: 800; font-size: calc(var(--w) * .044); letter-spacing: -.03em; line-height: 1.1; color: #EEF0F2; text-shadow: 0 1px 1px rgba(0,0,0,.45); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 32%, #000 68%, rgba(0, 0, 0, .5) 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 32%, #000 68%, rgba(0, 0, 0, .5) 86%, transparent 100%); }
.lux-logo span:not(:nth-child(2)) { opacity: .38; transform: scale(.84); }
.lux-sub { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); font-family: var(--f-body); font-weight: 700; font-size: calc(var(--w) * .022); letter-spacing: .32em; color: rgba(238, 240, 242, .8); }
.lux-date { position: absolute; top: 50%; left: 72%; width: 9%; height: 7.5%; margin-top: -3.75%; border-radius: 2px; background: linear-gradient(180deg, #D9DCDF, #FFFFFF 40%, #F1F2F3); box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 0 0 1.5px #B9BEC4; display: flex; align-items: center; justify-content: center; font-family: var(--f-body); font-weight: 700; font-size: calc(var(--w) * .034); color: #1B1E22; }
.lux-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; filter: drop-shadow(calc(var(--w) * .006) calc(var(--w) * .012) calc(var(--w) * .008) rgba(0,0,0,.55)); }
.lux-hand--h { width: 5.6%; height: 27%; margin-left: -2.8%; transform: rotate(var(--h, 0deg)); background: linear-gradient(90deg, #FFFFFF 50%, #A8AEB4 50%); clip-path: polygon(50% 0, 100% 82%, 50% 100%, 0 82%); }
.lux-hand--m { width: 4.4%; height: 40%; margin-left: -2.2%; transform: rotate(var(--m, 0deg)); background: linear-gradient(90deg, #FFFFFF 50%, #A8AEB4 50%); clip-path: polygon(50% 0, 100% 86%, 50% 100%, 0 86%); }
.lux-hand--s { width: 1%; height: 46%; margin-left: -.5%; transform: rotate(var(--s, 0deg)); background: #E9ECEF; border-radius: 2px; box-shadow: 0 calc(var(--w) * .08) 0 0 #E9ECEF; }
.lux-cap { position: absolute; left: 50%; top: 50%; width: 4%; height: 4%; margin: -2% 0 0 -2%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #9BA1A8 70%); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.lux-glass { position: absolute; inset: calc(var(--w) * .07); border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 42%), radial-gradient(circle at 70% 82%, rgba(255,255,255,.1), transparent 30%); pointer-events: none; }
.clock--analog svg { width: clamp(220px, min(70vw, 58vh), 620px); height: auto; }
.clock--words { min-height: calc(3.3 * clamp(34px, min(6.6vw, 9vh), 120px)); }
.clock--words .words { font-size: clamp(34px, min(6.6vw, 9vh), 120px); text-transform: uppercase; max-width: 18ch; text-wrap: balance; line-height: 1.06; }
.clock--words.has-sec .words { font-size: clamp(28px, min(5.4vw, 7.4vh), 96px); max-width: 22ch; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- Minuteur ---------- */
.timer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 3vw, 36px); width: 100%; max-width: 1100px; }
.visual { justify-self: end; width: clamp(56px, min(10vw, 13vh), 140px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.visual svg { width: 100%; height: auto; }
.visual .egg-state { font-weight: 700; font-size: clamp(11px, 1.3vw, 15px); letter-spacing: .08em; text-transform: uppercase; min-height: 1.4em; }
.timer-display { min-height: 0; font-size: clamp(64px, min(17vw, 21vh), 220px); }
.timer-display > .stack { padding: .04em 0; }
.progress { width: min(640px, 100%); height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--white) 25%, transparent); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--white); border-radius: 999px; transition: width .2s linear; }
.is-running .ruler-wrap { pointer-events: none; }
.is-running .r-item { color: color-mix(in srgb, var(--white) 35%, transparent); }
.presets { width: 100%; max-width: 920px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.preset-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* Préréglages : on les fait défiler au doigt, à la souris (avec élan), à la molette ou avec les flèches. */
.preset-wrap { position: relative; max-width: min(920px, 100%); }
.pr-arrow { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--bg); display: none; align-items: center; justify-content: center; box-shadow: 0 6px 16px var(--shadow); transition: transform .15s; }
.pr-arrow svg { width: 20px; height: 20px; }
.pr-arrow:active { transform: scale(.92); }
.pr-prev { left: -8px; }
.pr-next { right: -8px; }
@media (hover: hover) and (pointer: fine) { .pr-arrow { display: flex; } }
.preset-wrap.is-start .pr-prev, .preset-wrap.is-end .pr-next { visibility: hidden; }
.preset-row { position: relative; display: flex; gap: 8px; max-width: min(920px, 100%); padding: 4px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.preset-row::-webkit-scrollbar { display: none; }
.preset-row.dragging { scroll-snap-type: none; cursor: grabbing; }
.preset-row .preset { flex: none; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 14px 0 8px; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); font-weight: 700; font-size: 14px; white-space: nowrap; transition: background-color .15s, box-shadow .15s; user-select: none; -webkit-user-select: none; }
.preset-row .preset:hover { background: var(--frame-hi); }
.preset-row .preset[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--white); }
.preset-row svg { width: 32px; height: 40px; flex: none; pointer-events: none; }
.preset-row small { font-weight: 500; font-size: 13px; opacity: .85; }

/* ---------- Chronomètre ---------- */
.sw-display { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(76px, 16vw, 220px); align-items: baseline; }
.sw-display .cs { font-size: .36em; margin-left: .06em; }
/* Chrono : choix du style */
.sw-styles { display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: var(--frame); }
.sw-styles .chip-btn { min-height: 38px; padding: 0 14px; font-size: 14px; background: transparent; }
.sw-styles .chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.hero.is-fs .sw-styles { display: none; }
.sw-body { display: contents; }
.sw-push { display: none; }
/* Chronomètre d'entraîneur : un boîtier rond qu'on tient en main, un poussoir de chaque côté */
.sw-dial, .sw-crown { display: none; }
/* Chrono d'entraîneur : un cadran rond, ses graduations, un repère qui fait le tour en une minute, la couronne en haut. */
.sw-coach { --dia: clamp(200px, min(42vh, 56vw), 440px); }
.sw-coach .sw-body { display: flex; flex-direction: column; align-items: center; }
.sw-coach .sw-display { position: relative; flex: none; width: var(--dia); height: var(--dia); min-height: 0; border-radius: 50%; justify-content: center; align-items: center; font-size: calc(var(--dia) * .2); background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05) 66%); box-shadow: inset 0 0 0 calc(var(--dia) * .026) var(--white); }
.sw-coach .sw-dial { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sw-hand { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--sa, 0deg)); }
.sw-coach .sw-display .hm, .sw-coach .sw-display .cs { position: relative; }
.sw-coach .sw-crown { display: block; position: relative; flex: none; width: calc(var(--dia) * .17); height: calc(var(--dia) * .085); margin-bottom: calc(var(--dia) * .05); padding: 0; border: 0; border-radius: calc(var(--dia) * .025); background: var(--white); cursor: pointer; transition: transform .12s; }
.sw-coach .sw-crown::after { content: ""; position: absolute; left: 50%; top: 100%; width: calc(var(--dia) * .06); height: calc(var(--dia) * .05); margin-left: calc(var(--dia) * -.03); background: var(--white); }
.sw-coach .sw-crown:active { transform: translateY(4px); }
.sw-coach .laps { width: min(380px, 100%); }
.sw-pusher { display: none; }
.sw-coach .sw-body { position: relative; }
.sw-coach .sw-pusher { display: block; position: absolute; left: calc(50% + var(--dia) * .385); top: calc(var(--dia) * .25); width: calc(var(--dia) * .12); height: calc(var(--dia) * .075); padding: 0; border: 0; border-radius: calc(var(--dia) * .022); background: var(--white); transform: translate(-50%, -50%) rotate(45deg); cursor: pointer; transition: transform .12s; }
.sw-coach .sw-pusher:active { transform: translate(-50%, -50%) rotate(45deg) translateY(4px); }
.tool--stopwatch:not(.beep-on) .beep-with { display: none; }
.laps { list-style: none; margin: 0; padding: 0; width: min(460px, 100%); display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.laps li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 10px 16px; background: color-mix(in srgb, var(--white) 14%, transparent); border-radius: 12px; font-weight: 500; text-align: left; }
.laps li b { font-weight: 700; }
.laps li.new { animation: lap-in .25s var(--ease); }
@keyframes lap-in { from { transform: translateY(-10px); } }

/* ---------- Sonnerie ---------- */
.ring { position: absolute; inset: 0; z-index: 40; isolation: isolate; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 24px; }
.ripple { position: absolute; left: 50%; top: 50%; z-index: -1; }
.ripple i { position: absolute; left: -40vmin; top: -40vmin; width: 80vmin; height: 80vmin; border-radius: 50%; border: 4px solid var(--white); animation: ripple 2.4s ease-out infinite; }
.ripple i:nth-child(2) { animation-delay: .8s; }
.ripple i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.ring-time { margin: 0; font-family: var(--f-display); font-size: clamp(88px, 16vw, 220px); line-height: 1; }
.ring-title { margin: 0; font-size: clamp(28px, 4vw, 48px); }

/* ---------- Couleurs et ambiances (toutes les pages) ---------- */
.theme-fab { position: relative; z-index: 2; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(from 20deg, #E2462F, #E44B87, #3359E0, #179160, #F6B92E, #E2462F); box-shadow: 0 10px 28px var(--shadow); display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); }
.theme-fab:hover { transform: scale(1.06) rotate(-8deg); }
.theme-fab span { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 3px solid var(--white); transition: background-color .3s; }
.theme-fab[aria-expanded="true"] { transform: scale(.94); }
/* Petite pulsation toutes les 15 secondes, tant que le visiteur n'a pas ouvert le panneau. */
/* La palette flotte doucement sur place ; toutes les 5 secondes, deux battements de cœur. */
.theme-fab.pulse { animation: fab-beat 5s ease-in-out 1.5s infinite, fab-float 4.2s ease-in-out infinite; }
@keyframes fab-beat { 0%, 17%, 100% { scale: 1; } 4% { scale: 1.17; } 8.5% { scale: 1; } 12.5% { scale: 1.12; } }
/* ouverte : elle se pose */
.theme-fab.pulse[aria-expanded="true"] { animation: none; }
@keyframes fab-float { 0%, 100% { translate: 0 0; } 30% { translate: 1px -5px; } 65% { translate: -1px -2px; } }
.theme-panel { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 68px); z-index: 60; width: min(388px, calc(100vw - 32px)); max-height: calc(100vh - 110px); max-height: calc(100svh - 110px); overflow: auto; overscroll-behavior: contain; background: var(--white); color: var(--bg); border-radius: 26px; padding: 22px 20px 20px; box-shadow: 0 28px 80px var(--shadow); transform-origin: bottom right; text-align: left; view-transition-name: theme-panel; }
.theme-panel:not([hidden]) { animation: pop-br .2s var(--ease); }
@keyframes pop-br { from { transform: translateY(12px) scale(.96); } }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tp-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; }
.tp-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tint); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; }
.tp-h { margin: 16px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tp-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tp-sw { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--sw); color: var(--bg); display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease), box-shadow .15s; }
.tp-sw:hover { transform: scale(1.1); }
.tp-sw[aria-pressed="true"], .tp-sw.is-on { box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--bg); }
.tp-sw--custom { background: conic-gradient(#FF3B30, #FFCC00, #34C759, #00C7BE, #007AFF, #AF52DE, #FF2D55, #FF3B30); overflow: hidden; }
.tp-sw--custom input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.tp-sw--random { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--bg); }
.tp-sw--random[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--bg), 0 0 0 3px var(--white), 0 0 0 5.5px var(--bg); }
.tp-sw:has(input:focus-visible) { outline: 3px solid var(--bg); outline-offset: 3px; }
.tp-moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-moods button { padding: 0; border: 0; border-radius: 14px; overflow: hidden; color: var(--white); text-align: left; transition: transform .15s var(--ease), box-shadow .15s; }
.tp-moods button:hover { transform: translateY(-2px); }
.tp-moods button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--bg); }
.tp-moods svg { display: block; width: 100%; height: 64px; max-width: none; }
.tp-moods span { display: block; padding: 6px 10px 7px; font-weight: 700; font-size: 13px; }
.tp-search { width: 100%; height: 46px; margin-bottom: 10px; padding: 0 16px; border: 2px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--bg); background: var(--white); }
.tp-search::placeholder { color: color-mix(in srgb, var(--bg) 70%, #FFFFFF); }
.tp-search:focus-visible { outline: none; border-color: var(--bg); }
.tp-none { margin: 4px 0 0; font-size: 14px; }
.tp-reset { margin-top: 16px; width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--tint); color: var(--bg); font-weight: 700; font-size: 15px; }
.tp-reset:hover { background: var(--tint-2); }

/* Couleur claire (jaune, code couleur clair) : le blanc devient une encre foncée de la même teinte,
   et le texte sur fond blanc prend une version foncée de la couleur, pour rester lisible. */
:root[data-light] .hero, :root[data-light] .cbar { --white: var(--ink); --frame: color-mix(in srgb, var(--ink) 12%, transparent); --frame-hi: color-mix(in srgb, var(--ink) 20%, transparent); }
:root[data-light] .page > :not(.hero):not(.cbar) { --bg: var(--deep); --tint: color-mix(in srgb, var(--deep) 9%, #FFFFFF); --tint-2: color-mix(in srgb, var(--deep) 16%, #FFFFFF); --line: color-mix(in srgb, var(--deep) 24%, #FFFFFF); }

/* Plein écran */
.hero.is-fs { justify-content: center; min-height: 100%; }
.hero.is-fs .nav, .hero.is-fs .lang, .hero.is-fs .logo, .hero.is-fs .controls, .hero.is-fs .top-title, .hero.is-fs .preset-wrap, .hero.is-fs .preset-row, .hero.is-fs .progress, .hero.is-fs .ruler-wrap, .hero.is-fs .presets,
.hero.is-fs [data-voice], .hero.is-fs [data-idea-open], .hero.is-fs .eyebrow, .hero.is-fs [data-test], .hero.is-fs .hint, .hero.is-fs .sentence, .hero.is-fs .pomo-round, .hero.is-fs .pomo-phases, .hero.is-fs .menu-btn { display: none; }
.hero.is-fs .top { position: absolute; top: 16px; right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.hero.is-fs .tool { flex: 0; }
.hero.is-fs .clock { min-height: 0; }
/* Les réglages restent à portée en plein écran : ils apparaissent au mouvement de la souris, repartent après 3 s (en glissant). */
.hero.is-fs .tool, .hero.is-fs .clock-stage { position: static; }
.fs-bar { display: none; }
.hero.is-fs .clock-bar, .hero.is-fs .fs-bar { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 18px; background: var(--frame); position: absolute; left: 50%; bottom: 28px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); transition: transform .2s var(--ease); }
.fs-bar .chip-btn { background: transparent; }
.fs-bar .chip-btn:hover { background: var(--frame); }
.fs-bar .chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.hero.is-fs.fs-idle .clock-bar, .hero.is-fs.fs-idle .fs-bar { transform: translate(-50%, calc(100% + 48px)); }
.hero.is-fs .top { transition: transform .2s var(--ease); }
/* « Appuyez sur Échap » : s'affiche à l'entrée du plein écran, repart tout seul */
.fs-hint { position: absolute; left: 50%; top: 22px; z-index: 5; margin: 0; padding: 10px 18px; border-radius: 14px; background: var(--white); color: var(--bg); font-weight: 700; font-size: 15px; white-space: nowrap; transform: translate(-50%, -160%); transition: transform .25s var(--ease); pointer-events: none; }
.hero:not(.is-fs) .fs-hint { visibility: hidden; }
.hero.is-fs.fs-hint-on .fs-hint { transform: translate(-50%, 0); }
.hero.is-fs.fs-idle .top { transform: translateY(calc(-100% - 32px)); }
.hero.is-fs.fs-idle { cursor: none; }
.hero.is-fs { position: fixed; inset: 0; z-index: 100; min-height: 0; }
.fs-lock, .fs-lock body { overflow: hidden; }
/* En plein écran, la palette reste en bas à droite ; elle glisse hors de l'écran quand on arrête de bouger. */
.hero.is-fs ~ .cbar { z-index: 120; transition: transform .25s var(--ease), opacity .25s; }
.hero.is-fs.fs-idle ~ .cbar:not(.is-open) { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.page:has(.cbar.is-open) .hero.is-fs .clock-bar, .page:has(.cbar.is-open) .hero.is-fs .fs-bar { transform: translate(-50%, calc(100% + 48px)); }
/* Taille de l'horloge */
/* Taille : l'horloge toujours ; les autres outils en plein écran seulement */
.hero--clock .clock > *, .hero.is-fs .zoomable:not(.stage) > *, .hero--alarm.is-fs .zoomable .countdown, .hero--alarm.is-fs .zoomable .picker { zoom: var(--cs, 1); }
.size-ctl { display: inline-flex; align-items: center; gap: 0; }
.size-lbl { padding: 0 4px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.size-ctl .chip-btn { padding: 0 10px; }
.size-ctl .chip-btn.bump { animation: nudge .3s var(--ease); }
@keyframes nudge { 30% { transform: translateX(3px); } 60% { transform: translateX(-3px); } }

/* ---------- Partie basse : blanc et couleur de la page ---------- */
.below { background: var(--white); color: var(--bg); transition: color .45s ease; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.narrow { max-width: 900px; }
.band { padding-block: clamp(48px, 7vw, 88px); }
.band--how { padding-bottom: clamp(32px, 4vw, 48px); }
.band--ad { padding-block: 8px; }
.band--content { padding-top: clamp(32px, 4vw, 48px); }
.band--faq { background: var(--tint); }
.section-title { margin: 0 0 28px; font-family: var(--f-display); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; text-wrap: balance; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 22px; padding: 0; font-size: 14px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { color: var(--bg); text-underline-offset: 3px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { padding: 26px 24px 28px; border-radius: 24px; background: var(--tint); }
.steps .num { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 50%; background: var(--bg); color: var(--white); font-family: var(--f-display); font-size: 24px; }
.steps h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; }
.steps p { margin: 0; font-size: 16px; line-height: 1.55; }

.ad { width: 100%; margin-inline: auto; border: 2px dashed var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ad--leader { max-width: 728px; height: 90px; }
.ad--rect { max-width: 300px; height: 250px; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.cols:not(:has(.side)) { grid-template-columns: minmax(0, 1fr); }
.side { position: sticky; top: 24px; }
.content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.content h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 54px); line-height: 1.04; text-wrap: balance; }
.content h3 { margin: 22px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3vw, 32px); line-height: 1.1; }
.content p, .content ul { margin: 0; font-size: 18px; line-height: 1.65; max-width: 68ch; }
.content ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.content a:not(.time-card) { color: var(--bg); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.content .note { font-size: 15px; }
.cards--time { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.time-card { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 16px 8px 14px; border-radius: 16px; background: var(--tint); border: 2px solid transparent; color: var(--bg); text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--ease); }
.time-card b { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; }
.time-card span { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.time-card:hover { border-color: var(--bg); transform: translateY(-2px); }
.time-card[aria-current="page"] { background: var(--bg); border-color: var(--bg); color: var(--white); }
.table-wrap { overflow-x: auto; border-radius: 20px; border: 2px solid var(--line); }
.content table { width: 100%; border-collapse: collapse; font-size: 17px; }
.content th { padding: 14px 20px; background: var(--tint); text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.content td { padding: 14px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.content td:first-child { font-weight: 700; }
.content td:nth-child(2) { font-family: var(--f-display); font-size: 22px; white-space: nowrap; }

.faq { border-top: 3px solid var(--bg); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font-size: clamp(18px, 2vw, 21px); font-weight: 700; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--white); }
.plus::after { transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq details p { margin: 0 0 24px; max-width: 68ch; font-size: 17px; line-height: 1.65; }

.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tool-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 24px 24px 70px; border-radius: 24px; background: var(--tint); color: var(--bg); text-decoration: none; transition: transform .2s var(--ease), background-color .2s, color .2s; }
.tool-card b { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.04; }
.tool-card span { font-size: 16px; line-height: 1.4; }
.tool-card svg { position: absolute; left: 24px; bottom: 24px; transition: transform .2s var(--ease); }
.tool-card:hover { transform: translateY(-4px); background: var(--bg); color: var(--white); }
.tool-card:hover svg { transform: translateX(6px); }

.site-foot { background: var(--bg); color: var(--white); padding-block: 64px 28px; }
.site-foot .logo { font-size: inherit; }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 40px; }
.foot-top p { margin: 0; }
.foot-cols { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.foot-h { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.foot-links { display: grid; gap: 4px 16px; }
.foot-links--2, .foot-links--3 { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.foot-links a { padding: 5px 0; color: var(--white); font-size: 15px; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 14px; }
.foot-bottom p { margin: 0; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-bottom a { color: var(--white); }


/* ---------- Réveil : choix de l'heure, en roue ou en pop-up (réglage alarmPicker dans site.config.mjs) ---------- */
.picker { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.5vw, 28px); }
.stage[data-picker="wheel"] .pk-pop, .stage[data-picker="pop"] .pk-wheel { display: none; }
.pk-side { flex: none; width: 92px; display: flex; justify-content: center; align-items: center; }
.pk-unit { font-weight: 700; font-size: 18px; letter-spacing: .08em; }
.stage[data-picker="wheel"] .pk-side { display: none; }
.when { --pkf: clamp(60px, min(10vw, 12.5vh), 128px); display: flex; flex-direction: column; align-items: center; gap: var(--gap); width: 100%; }
.pk-wheel { position: relative; display: flex; align-items: center; font-family: var(--f-display); font-weight: 400; font-size: var(--pkf); line-height: 1; }
/* Sur grand écran, la phrase et les chiffres forment un seul bloc, centré comme un tout. */
/* La phrase au-dessus, la roue au milieu, la suite de la phrase dessous : tout centré. */
.when { gap: clamp(4px, 1.4vh, 16px); }
.when .lead { white-space: nowrap; }
.wheel::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.12em; margin-top: -.56em; border-radius: .14em; background: var(--frame); pointer-events: none; }
.wheel:hover::before { background: var(--frame-hi); }
.wheel { position: relative; width: 1.24em; height: 3.4em; overflow: hidden; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 32%, #000 68%, rgba(0, 0, 0, .5) 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 32%, #000 68%, rgba(0, 0, 0, .5) 86%, transparent 100%); }
.wheel.dragging { cursor: grabbing; }
.wheel:focus-visible .w-item.is-center { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .08em; }
.wheel-track { position: absolute; inset: 0; }
.w-item { position: absolute; left: 0; right: 0; top: 50%; height: 1.1em; margin-top: -.55em; line-height: 1.1em; text-align: center; white-space: nowrap; }
.ap-slot { position: relative; flex: none; width: 1.1em; margin: 0 .12em; display: flex; align-items: center; justify-content: center; }
.wheel--ampm { width: 2.6em; height: 2.8em; font-size: .4em; border-radius: .35em; -webkit-mask-image: none; mask-image: none; }
/* AM / PM : un encadré à part, qui n'affiche que la valeur choisie. Toucher ou glisser pour basculer. */
.wheel--ampm::before { height: 2.8em; margin-top: -1.4em; border-radius: .35em; }
.wheel-sep { width: .32em; text-align: center; }
.ap-slot { transition: width .35s var(--ease), margin .35s var(--ease); }
.mode-in .wheel-sep { width: .62em; }
.mode-in .ap-slot { width: 0; margin: 0; }
.ampm-btn { min-width: 88px; min-height: 58px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); font-weight: 700; font-size: 20px; letter-spacing: .06em; transition: background-color .15s, transform .12s; }
.ampm-btn:hover { background: var(--frame-hi); }
.ampm-btn:active { transform: scale(.93); }
.ampm-btn [data-ampm-value] { display: inline-block; }
.ampm-btn.bump [data-ampm-value] { animation: bump .28s var(--ease); }

/* Pop-up : pas de carte blanche. Le contenu est posé directement sur le fond flouté et teinté,
   avec les mêmes cadres que la page. Dans la carte, les couleurs s'inversent : le blanc devient l'encre,
   la couleur devient le texte des boutons pleins. */
.modal { --accent: var(--bg); position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--accent) 44%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); color: #FFFFFF; }
.modal:not([hidden]) { animation: modal-bg .34s ease both; }
@keyframes modal-bg { from { background-color: transparent; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); } }
/* La croix pour fermer, en haut à droite, comme la sortie du plein écran */
.modal-x { position: fixed; top: 16px; right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px)); z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .17); color: #FFFFFF; cursor: pointer; transition: background-color .15s, transform .15s var(--ease); }
.modal-x:hover { background: rgba(255, 255, 255, .28); }
.modal-x:active { transform: scale(.94); }
:root[data-light] .modal-x { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.modal-card { --bg: #FFFFFF; --white: var(--accent); --tint: rgba(255, 255, 255, .17); --tint-2: rgba(255, 255, 255, .28); --line: rgba(255, 255, 255, .4); width: min(460px, 100%); padding: 0; background: none; color: var(--bg); text-align: left; animation: modal-in .34s var(--swift); }
:root[data-light] .page > .modal:not(.hero):not(.cbar) { --accent: var(--user); }
:root[data-light] .modal-card { --bg: var(--ink); --tint: color-mix(in srgb, var(--ink) 12%, transparent); --tint-2: color-mix(in srgb, var(--ink) 20%, transparent); --line: color-mix(in srgb, var(--ink) 35%, transparent); }
/* Les onglets d'une pop-up ne changent pas sa taille : tous les panneaux occupent la même case, le plus grand donne la hauteur. */
.modal-card:has(> .modal-panel) { display: grid; grid-template-columns: minmax(0, 1fr); }
.modal-card > .modal-panel { grid-row: 2; grid-column: 1; }
.modal-card > .modal-panel[hidden] { display: block !important; visibility: hidden; }
.modal-card > .preset-grid[hidden] { display: grid !important; }
.modal-card .preset-card { background: var(--tint); color: var(--bg); }
.modal-card .preset-card:hover { background: var(--tint-2); }
.modal-card .preset-card[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--bg); }
.modal-card .pop-grid button, .modal-card .seg button { font-size: 17px; }
.modal-card .pop-grid--4 button, .modal-card .pop-grid--big button { font-size: 22px; }
@keyframes modal-in { from { transform: scale(.82); opacity: 0; } }
.modal-panel:not([hidden]) { animation: panel-in .2s var(--ease); }
@keyframes panel-in { from { transform: translateX(28px); } }
.pop-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Minuteur : chaque minute et chaque seconde à un toucher */
.modal-card--wide { width: min(560px, 100%); }
.pop-grid--10 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.modal-card .pop-grid--10 button { min-height: 42px; border-radius: 10px; font-size: 16px; }
@media (max-width: 480px) { .pop-grid--10 { gap: 3px; } .modal-card .pop-grid--10 button { min-height: 36px; border-radius: 8px; font-size: 13px; } }
.pop-grid--4 button, .pop-grid--big button { min-height: 66px; border-radius: 16px; font-size: 22px; }
.modal-card--confirm { padding: 28px 24px 24px; text-align: center; }
.modal-title { margin: 0 0 10px; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 5vw, 40px); line-height: 1.05; }
.modal-text { margin: 0 0 22px; font-size: 17px; line-height: 1.5; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }
.m-primary, .m-ghost { min-height: 56px; padding: 0 20px; border: 0; border-radius: var(--r); font-weight: 700; font-size: 18px; transition: transform .12s, background-color .15s; }
.m-primary { background: var(--bg); color: var(--white); }
.m-ghost { background: var(--tint); color: var(--bg); }
.m-ghost:hover { background: var(--tint-2); }
.m-primary:active, .m-ghost:active { transform: scale(.97); }

/* Sélecteur visible uniquement dans l'aperçu, pour comparer les deux maquettes */
.mock-switch { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--white); color: var(--bg); box-shadow: 0 10px 28px var(--shadow); font-size: 13px; font-weight: 700; }
.mock-switch button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tint); color: var(--bg); font-weight: 700; font-size: 13px; }
.mock-switch button[aria-pressed="true"] { background: var(--bg); color: var(--white); }


/* ---------- Barre des couleurs : elle se déroule vers la gauche depuis le bouton rond ---------- */
.voice-fab { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--peek)); z-index: 60; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--bg); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px var(--shadow); view-transition-name: voice-fab; transition: transform .2s var(--ease); }
.voice-fab:hover { transform: scale(1.06); }
.voice-fab:active { transform: scale(.94); }
.voice-fab svg { width: 26px; height: 26px; }
.hero.is-fs ~ .voice-fab { display: none; }
.cbar { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--peek)); z-index: 60; display: flex; align-items: center; view-transition-name: cbar; pointer-events: none; }
.cbar > .theme-fab, .cbar.is-open .cbar-items, .cbar-free { pointer-events: auto; }
/* Pas de fond : chaque pastille a son liseré blanc, les icônes sont blanches sur la couleur de la page. */
.cbar-items { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-right: 12px; clip-path: inset(-12px -12px -12px 100%); visibility: hidden; transition: clip-path .5s var(--ease), visibility 0s linear .5s; }
.cbar.is-open .cbar-items { clip-path: inset(-120px -12px -12px -12px); visibility: visible; transition: clip-path .5s var(--ease), visibility 0s; }
.cb, .cb-hue, .cbar-items > .cb-light { position: relative; flex: none; transform: scale(.2); transition: transform .32s var(--ease), box-shadow .15s; }
.cbar.is-open .cb, .cbar.is-open .cb-hue, .cbar.is-open .cbar-items > .cb-light { transform: none; transition-delay: calc(var(--d, 0) * 50ms), 0s; }
.cb-hue { width: clamp(150px, 26vw, 300px); height: 40px; transform-origin: right center; }
.cb-extra { align-items: center; }
/* Le dé et l'aléatoire, cachés derrière « ‹ » */
.cb-extra { display: flex; gap: 10px; }
.cbar:not(.show-extra) .cb-extra { display: none; }
.cbar.show-extra .cb-extra > * { animation: pop-in .28s var(--ease) both; }
.cbar.show-extra .cb-extra > :nth-child(2) { animation-delay: 40ms; }
.cbar.show-extra .cb-extra > :first-child { animation-delay: 80ms; }
/* « › » : replie toute la barre */
.cb.cb--fold { background: transparent; box-shadow: none; }
.cb.cb--fold svg { width: 22px; height: 22px; }
@keyframes pop-in { from { transform: scale(.2); } }
.cb.cb--more { width: 32px; height: 32px; background: var(--bg); }
.cb--more svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.cbar.show-extra .cb--more svg { transform: rotate(45deg); }
.cb { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--sw); color: var(--white); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2.5px var(--white), 0 8px 20px var(--shadow); }
.cbar.is-open .cb:hover { transform: scale(1.12); transition-delay: 0s; }
.cb[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5.5px var(--white), 0 8px 20px var(--shadow); }
.cb--icon { background: var(--bg); }
.cb--icon svg { width: 21px; height: 21px; }
.cb--free { background: radial-gradient(circle, var(--bg) 0 52%, transparent 53%), conic-gradient(#E2462F, #F6B92E, #179160, #2BB5C9, #3359E0, #8B3FE0, #E44B87, #E2462F); }
.cb-light { flex: none; height: 40px; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 999px; background: var(--bg); color: var(--white); box-shadow: 0 0 0 2.5px var(--white), 0 8px 20px var(--shadow); }
.cb-light button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s; }
.cb-light button:hover { background: var(--frame); }
.cb-light button:active { transform: scale(.92); }
.cb-light > svg { opacity: .9; }
/* « + » : couleur libre, sur l'arc-en-ciel ou avec le code (#RRGGBB) */
.cbar-free { position: absolute; right: 0; bottom: calc(100% + 16px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 10px; width: min(520px, calc(100vw - 32px)); }
.cbar-free:not([hidden]) { animation: drop-up .22s var(--ease); }
@keyframes drop-up { from { transform: translateY(10px); } }
.hex-field { flex: none; display: flex; align-items: center; height: 40px; padding: 0 10px 0 12px; border-radius: 14px; background: var(--bg); color: var(--white); box-shadow: 0 0 0 2.5px var(--white), 0 8px 20px var(--shadow); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; cursor: text; }
.hex-hash { opacity: .7; margin-right: 2px; }
.hex-field input { width: 5.4em; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: .04em; text-transform: uppercase; outline: none; }
.hex-field:focus-within { box-shadow: 0 0 0 2.5px var(--white), 0 0 0 5.5px var(--bg), 0 8px 20px var(--shadow); }
.hue-track { position: relative; height: 44px; border-radius: 14px; touch-action: none; cursor: pointer; outline: none; box-shadow: 0 0 0 2.5px var(--white), 0 8px 20px var(--shadow); background: linear-gradient(90deg, hsl(0 80% 47%), hsl(30 80% 47%), hsl(60 80% 47%), hsl(90 80% 47%), hsl(120 80% 47%), hsl(150 80% 47%), hsl(180 80% 47%), hsl(210 80% 47%), hsl(240 80% 47%), hsl(270 80% 47%), hsl(300 80% 47%), hsl(330 80% 47%), hsl(360 80% 47%)); }
.hue-track:focus-visible { box-shadow: 0 0 0 2.5px var(--white), 0 0 0 5.5px var(--bg); }
.hue-thumb { position: absolute; top: -5px; bottom: -5px; width: 16px; margin-left: -8px; border-radius: 8px; border: 3px solid #FFFFFF; background: var(--bg); box-shadow: 0 2px 10px var(--shadow); pointer-events: none; }

/* ---------- Minuteur : la roue, puis les gros chiffres pendant le compte à rebours ---------- */
.t-center { display: grid; font-family: var(--f-display); font-weight: 400; font-size: clamp(60px, min(12vw, 11.6vh), 140px); line-height: 1; }
.t-center > * { grid-area: 1 / 1; }
.t-wheels.pk-wheel { font-size: inherit; }
.t-run { display: flex; align-items: center; justify-content: center; visibility: hidden; }
.t-started .t-wheels { visibility: hidden; }
.t-started .t-run { visibility: visible; }
.t-started .preset-row { opacity: .5; }
/* Pomodoro */
.pomo { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.pomo-phases { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; border-radius: 18px; background: var(--frame); }
.pomo-phases .chip-btn { background: transparent; }
.pomo-phases .chip-btn:hover { background: var(--frame); }
.pomo-phases .chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.pomo-phases small { font-weight: 600; opacity: .7; margin-left: 2px; }
.pomo-time { font-family: var(--f-display); font-size: clamp(80px, min(17vw, 21vh), 240px); line-height: 1; }
.pomo-round { margin: 0; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.pomo-dots { display: inline-flex; gap: 8px; }
.pomo-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--white); }
.pomo-dots i.done { background: var(--white); }
.pomo-dots i.now { background: color-mix(in srgb, var(--white) 45%, transparent); }
/* Pause : la couleur complémentaire monte comme un rideau, le contenu ne bouge pas. */
.pomo-bg { position: absolute; inset: 0; z-index: -1; background: var(--comp, #1F2A5C); clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--swift); }
.on-break .pomo-bg { clip-path: inset(0 0 0 0); }
.hero.is-fs .pomo-phases { display: none; }

/* Préréglages : un seul bouton, qui affiche le préréglage choisi, et une pop-up par catégories */
.presets-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); font-weight: 700; font-size: 16px; transition: background-color .15s, transform .12s; }
.presets-btn:hover { background: var(--frame-hi); }
.presets-btn:active { transform: scale(.97); }
.t-started .presets-btn { visibility: hidden; }
.hero.is-fs .presets-btn { display: none; }
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.modal-card--presets { width: min(560px, 100%); }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; }
.preset-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border: 0; border-radius: 18px; background: var(--bg); color: var(--white); text-align: center; transition: transform .15s var(--ease), box-shadow .15s; }
.preset-card:hover { transform: translateY(-2px); }
.preset-card[aria-pressed="true"] { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--bg); }
.preset-card svg { width: 54px; height: 66px; }
.preset-card b { font-size: 15px; line-height: 1.2; }
.preset-card small { font-size: 13px; font-weight: 600; opacity: .85; }
.hero--timer:not(.t-started) .progress { visibility: hidden; }
/* Une seule place sous les chiffres : le bouton Préréglages à l'arrêt, la barre de progression pendant le décompte. */
.t-slot { display: grid; place-items: center; width: min(640px, 100%); }
.t-slot > * { grid-area: 1 / 1; }

/* ---------- Horloge : tout l'écran, réglages dans une barre fixe en bas ---------- */
.tool--clock { gap: 14px; }
.clock-stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 4vh; }
.hero--clock .clock { width: 100%; min-height: min(50vh, 60vw); }
.clock-bar { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px; border-radius: 18px; background: var(--frame); overflow-x: auto; scrollbar-width: none; }
.clock-bar::-webkit-scrollbar { display: none; }
.clock-bar .chip-btn { flex: none; background: transparent; }
.clock-bar .chip-btn:hover { background: var(--frame); }
.clock-bar .chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.bar-sep { flex: none; width: 1.5px; height: 24px; margin: 0 4px; background: color-mix(in srgb, var(--white) 40%, transparent); }

/* ---------- Changement d'onglet : toute la page glisse, vite, sans fondu ---------- */
@view-transition { navigation: auto; }
::view-transition { background-color: var(--canvas, transparent); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .34s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); animation-fill-mode: both; }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-back; }
::view-transition-group(top), ::view-transition-group(cbar), ::view-transition-group(voice-fab), ::view-transition-new(top), ::view-transition-new(cbar), ::view-transition-new(voice-fab) { animation: none; }
::view-transition-old(top), ::view-transition-old(cbar), ::view-transition-old(voice-fab) { animation: none; opacity: 0; }
@keyframes vt-out { to { transform: translateX(-100%); } }
@keyframes vt-in { from { transform: translateX(100%); } }
@keyframes vt-out-back { to { transform: translateX(100%); } }
@keyframes vt-in-back { from { transform: translateX(-100%); } }



/* Une idée pour améliorer l'outil */
.band--idea { padding-block: 8px clamp(32px, 4vw, 48px); }
.idea { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 24px; background: var(--tint); }
.idea-icon { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--bg); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.idea-body { flex: 1; min-width: 0; }
.idea-title { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; }
.idea-body p { margin: 0; font-size: 16px; line-height: 1.5; }
.idea-btn { flex: none; min-height: 50px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--bg); color: var(--white); font-weight: 700; font-size: 16px; transition: transform .12s; }
.idea-btn:active { transform: scale(.97); }
.modal-card .idea-icon { margin: 0 auto 14px; }
.idea-text { display: block; width: 100%; margin: 0 0 14px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--tint); color: var(--bg); font: inherit; font-size: 17px; line-height: 1.4; resize: vertical; }
.idea-text::placeholder { color: color-mix(in srgb, var(--bg) 65%, #FFFFFF); }
.idea-text:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }
.idea-thanks { margin: 14px 0 0; font-weight: 700; }
@media (max-width: 720px) { .idea { flex-direction: column; align-items: flex-start; } .idea-btn { width: 100%; } }

/* Micro : une fenêtre qui écoute */
.modal-card--voice { display: flex; flex-direction: column; align-items: center; }
.voice-orb { position: relative; flex: none; width: 96px; height: 96px; margin: 6px 0 20px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--white); display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease), background-color .2s; }
.voice-orb:active { transform: scale(.95); }
.voice-orb svg { position: relative; width: 40px; height: 40px; }
.voice-rings, .voice-rings i { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.voice-rings i { border: 3px solid var(--bg); opacity: 0; }
.is-listening .voice-rings i { animation: voice-ring 1.8s ease-out infinite; }
.is-listening .voice-rings i:nth-child(2) { animation-delay: .9s; }
@keyframes voice-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.75); opacity: 0; } }
.voice-title { margin-bottom: 8px; }
.voice-said { width: 100%; min-height: 2.6em; margin: 0 0 8px; font-size: 21px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.voice-hint { min-height: 2.9em; margin: 0; font-size: 15px; line-height: 1.45; opacity: .8; }
.voice-orb .voice-ok, .is-ok .voice-orb .voice-mic { display: none; }
.is-ok .voice-orb .voice-ok { display: block; }
.is-typed .voice-said:empty { display: none; }
.is-typed .voice-hint { min-height: 0; }
.voice-form { display: flex; gap: 8px; width: 100%; margin-top: 18px; }
.voice-input { flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--tint); color: var(--bg); font: inherit; font-size: 17px; }
.voice-input::placeholder { color: color-mix(in srgb, var(--bg) 60%, #FFFFFF); }
.voice-input:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }
.voice-form .m-primary { flex: none; min-width: 76px; }
/* AM ou PM ? deux grands boutons côte à côte */
.modal-actions--two { flex-direction: row; }
.modal-actions--two > button { flex: 1; min-height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ap-big { font-family: var(--f-display); font-weight: 400; font-size: 52px; line-height: 1; }
.modal-actions--two small { font-size: 15px; font-weight: 600; opacity: .85; }

/* Écrans d'ordinateur bas (13 pouces) : tout l'outil tient dans un seul écran. */
@media (min-width: 721px) and (max-height: 900px) {
  .hero { padding-bottom: 28px; --gap: clamp(18px, 4.2vh, 40px); }
  .sentence { line-height: 1.6; }
  .when { --pkf: clamp(56px, min(9.5vw, 11vh), 120px); }
  .t-center { font-size: clamp(54px, min(11vw, 10.4vh), 130px); }
  .btn-primary, .btn-ghost { min-height: 54px; font-size: 18px; }
  .clock { min-height: clamp(130px, 22vh, 260px); }
  .clock--mono { --hm: clamp(80px, min(22vw, 33vh), 320px); }
  .sw-display { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(70px, min(16vw, 22vh), 220px); }
  .r-item { height: 56px; }
  .preset-row .preset { height: 48px; }
  .preset-row svg { width: 28px; height: 36px; }
  .quote { min-height: 2.8em; }
  .progress { height: 6px; }
  .clock--words { min-height: calc(3.3 * clamp(32px, min(6.2vw, 8vh), 88px)); }
  .clock--words .words { font-size: clamp(32px, min(6.2vw, 8vh), 88px); }
}

@media (min-width: 721px) and (max-height: 720px) {
  .hero { --gap: clamp(12px, 3.4vh, 26px); }
  .tool { padding-top: 10px; }
  .countdown { font-size: clamp(56px, min(13vw, 14vh), 150px); }
  .state--armed { gap: 10px; }
  .quote blockquote { font-size: 17px; }
  .r-item { height: 50px; }
  .timer-display { font-size: clamp(60px, min(17vw, 18vh), 200px); }
}

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .hero { padding-bottom: 84px; }
  .voice-fab { width: 50px; height: 50px; }
  .state--armed { padding-top: 132px; }
  .top { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; overflow-x: auto; margin-inline: -8px; scrollbar-width: none; }
  .nav a { font-size: 16px; padding: 10px 8px; }
  .nav a::after { left: 8px; right: 8px; }
  .hero { --gap: clamp(18px, 3.6vh, 34px); }
  .tool { padding-top: 20px; }
  .round-btn { width: 46px; height: 46px; }
  .round-btn svg { width: 22px; height: 22px; }
  .big-time { font-size: clamp(76px, 21vw, 120px); }
  .pk-side { width: 64px; }
  .ampm-btn { min-width: 60px; min-height: 48px; padding: 0 10px; font-size: 17px; }
  .big-time { padding: 0 .1em; }
  .stage[data-picker="pop"] .big-time { font-size: clamp(76px, 19vw, 110px); }
  .countdown { font-size: clamp(64px, 18vw, 110px); }
  .quote { min-height: 5.6em; }
  .btn-primary, .btn-ghost { min-height: 56px; padding: 0 22px; font-size: 17px; }
  .actions { width: 100%; }
  .btn-wide { min-width: 0; flex: 1 1 140px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .side { position: static; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .theme-fab { width: 50px; height: 50px; }
  .theme-fab span { width: 28px; height: 28px; }
  .top-left { flex-direction: column; align-items: flex-start; gap: 0; }
  .top-title { padding-left: 0; border-left: 0; font-size: 10px; letter-spacing: .1em; }
  .cb { width: 36px; height: 36px; }
  .cbar-items { gap: 8px; margin-right: 10px; }
  .pomo-phases .chip-btn { padding: 0 10px; font-size: 14px; }
  .pomo-phases small { display: none; }
  .cb-hue { width: calc(100vw - 260px); min-width: 90px; }
  .cb-light button { width: 28px; height: 28px; }
  .cb-extra { position: absolute; left: 0; bottom: calc(100% + 14px); gap: 9px; }
  .page:has(.cbar.is-open) .voice-fab { visibility: hidden; }
  .clock-bar { max-width: 100%; flex-wrap: wrap; justify-content: center; overflow: visible; gap: 2px; padding: 4px; }
  .clock-bar .chip-btn { min-height: 38px; padding: 0 9px; font-size: 13px; }
  .clock-bar .size-lbl { display: none; }
  .hero--clock { padding-bottom: 96px; }
  .clock--watch { --w: min(30vh, 58vw); }
  .hero--clock .clock { min-height: 0; }
  .clock-bar .bar-sep { display: none; }
  .t-center { font-size: clamp(64px, 19vw, 110px); }
  .clock--mono { --hm: clamp(80px, 29vw, 170px); }
  .theme-panel { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 62px); }
}

/* ---------- Réglages : toujours au même endroit ----------
   Une barre en bas du bandeau, au centre (styles de l'horloge, Classique / Entraîneur, catégories de préréglages).
   Tous les outils réservent la même place en bas : le contenu est centré pareil partout, barre ou pas. */
.tbar { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 18px; background: var(--frame); transition: opacity .3s var(--ease), transform .2s var(--ease); }
.tbar .chip-btn { flex: none; background: transparent; }
.tbar .chip-btn:hover { background: var(--frame); }
.tbar .chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.tbar .chip-btn svg { flex: none; width: 18px; height: 18px; }
.hero--timer .tool, .hero--stopwatch .tool, .hero--clock .tool, .hero--pomodoro .tool { position: static; }
@media (min-width: 721px) {
  .hero--alarm, .hero--timer, .hero--stopwatch, .hero--clock, .hero--pomodoro { padding-bottom: 136px; }
  .hero--alarm .tool, .hero--timer .tool, .hero--stopwatch .tool, .hero--clock .tool, .hero--pomodoro .tool { padding-bottom: 0; }
  .hero .tbar { position: absolute; left: 50%; bottom: 66px; z-index: 3; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); }
  .hero.is-fs { padding-block: 18px; }
}
.hero.is-fs .t-bar, .hero.is-fs .sw-styles { display: none; }
.sw-styles .chip-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
/* Plein écran : une citation discrète, centrée sous l'outil ; elle glisse vers la suivante. L'œil (dans la barre) la masque. */
.fs-quote { display: none; }
.hero.is-fs .fs-quote { display: block; width: min(720px, 100%); min-height: 3.4em; margin: 6px auto 0; overflow: hidden; text-align: center; opacity: .82; pointer-events: none; }
.fs-quote-in { display: block; transition: transform .55s var(--swift); }
.fs-quote-in.is-out { transform: translateY(-130%); }
.fs-quote-in.is-below { transform: translateY(130%); transition: none; }
.fsq-text { display: block; font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.fs-quote figcaption { margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero.no-quotes .fs-quote, .hero.no-quotes.is-fs .quote { visibility: hidden; }
.hero:not(.is-fs) .quotes-btn { display: none; }
/* Plein écran : une fois lancé, c'est lancé. Pas de réglages ; les boutons partent avec la souris immobile. */
.hero.is-fs .tool .actions { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hero.is-fs.fs-idle .tool .actions { opacity: 0; transform: translateY(10px); }
.t-bar .tb-group { display: inline-flex; align-items: center; gap: 4px; }
.t-started .t-presets { opacity: .35; pointer-events: none; }
/* Minuteur : la sonnerie, en petit, sur la ligne des boutons */
.t-actions { align-items: center; }
.t-actions .ring-with { margin: 0 12px 0 0; font-size: 18px; line-height: 1.4; white-space: nowrap; }
@media (max-width: 720px) { .t-actions .ring-with { flex: 0 0 100%; margin: 0 0 6px; text-align: center; } }
/* Minuteur : la progression court au ras du bandeau, sans prendre de place */
.hero--timer .progress { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 5px; border-radius: 0; background: color-mix(in srgb, var(--white) 22%, transparent); }
.hero--timer .progress > div { border-radius: 0; }
/* Horloge : la date se pose au-dessus sans pousser l'horloge, qui reste centrée */
.clock-stage { padding-bottom: 0; gap: 14px; }
@media (min-width: 721px) { .hero--clock .clock { min-height: 0; } }
.clock-stage .date { font-size: 20px; font-weight: 700; letter-spacing: .02em; min-height: 1.5em; line-height: 1.5; }
.clock-stage::after { content: ""; flex: none; height: 30px; margin-top: 0; }
/* Sans la date, on enlève la date et sa contrepartie : l'horloge reste au même endroit, et gagne la place en plein écran. */
.clock-stage.no-date .date, .clock-stage.no-date::after { display: none; }
/* Montre : la photo, détourée, le bracelet s'efface en haut et en bas ; l'heure en direct dessous */
.lux2 { display: flex; flex-direction: column; align-items: center; margin: 0; }
.lux2-img { display: block; width: auto; height: calc(var(--w) * 1.5); max-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); user-select: none; -webkit-user-drag: none; }
.lux2-face { position: relative; }
.lux2-hands { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 calc(var(--w) * .008) calc(var(--w) * .008) rgba(0, 0, 0, .55)); }
.lux2-time { margin-top: calc(var(--w) * -.06); font-family: var(--f-display); font-size: calc(var(--w) * .15); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
/* Pomodoro : la durée se règle à la roue, les secondes restent à 00 */
.pomo-zero { width: 1.24em; text-align: center; opacity: .55; }
.pomo-round { flex-wrap: wrap; justify-content: center; gap: 10px 32px; font-size: 18px; }
.pr-part { display: inline-flex; align-items: center; gap: 12px; }
.pomo-round .cyc-btn { min-height: 1.9em; padding: 2px .55em; }
/* − 4 + : le nombre de tours, dans le cadre maison */
.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--frame); }
.stepper button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, opacity .15s; }
.stepper button:hover { background: var(--frame-hi); }
.stepper button:disabled { opacity: .35; cursor: default; background: transparent; }
.stepper svg { width: 15px; height: 15px; }
.stepper b { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.stepper b.bump { animation: bump .28s var(--ease); }

/* Réveil : pas de barre en bas, l'outil prend la place et respire. */
@media (min-width: 721px) {
  .hero--alarm { padding-bottom: 96px; --gap: clamp(22px, 5.4vh, 64px); }
  .hero--alarm .when { --pkf: clamp(60px, min(11vw, 12.6vh), 150px); }
  .hero--alarm .sentence, .hero--alarm .when .lead { font-size: clamp(21px, 2vw, 28px); line-height: 1.5; }
  .hero--alarm .state--armed { gap: clamp(18px, 4vh, 44px); padding-top: 150px; padding-bottom: 80px; }
  .hero--alarm .countdown { font-size: clamp(70px, min(16vw, 20vh), 230px); }
}

/* ---------- En-tête : logo | nom de l'outil (même police, sans gras) ; à droite, les outils dans un même cadre ---------- */
.top { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
.top-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.top-left .logo { flex: none; }
.top-left .top-title { margin: 0; padding-left: 18px; border-left: 1.5px solid color-mix(in srgb, var(--white) 40%, transparent); font-family: var(--f-body); font-weight: 400; font-size: 30px; letter-spacing: -.035em; text-transform: lowercase; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { display: flex; align-items: center; gap: 8px; }
/* « More tools » : une roue de noms, comme le o du logo. Le cadre maison reste au centre, les noms y passent. */
.nav.mt { position: relative; display: flex; align-items: center; margin-right: 6px; }
.mt-wheel { position: relative; display: grid; height: 88px; font-size: 17px; font-weight: 600; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 27%, #000 73%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 27%, #000 73%, transparent 100%); }
.mt-wheel::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: 12px; background: var(--frame); transition: background-color .15s; }
.mt-wheel:hover::before, .mt-wheel:focus-visible::before { background: var(--frame-hi); }
.mt-wheel:focus-visible::before { box-shadow: 0 0 0 2px var(--white); }
.mt-sizer { display: grid; align-self: center; visibility: hidden; }
.mt-sizer span { grid-area: 1 / 1; height: 0; overflow: hidden; padding: 0 16px; white-space: nowrap; }
.mt-wheel .wheel-track { position: absolute; inset: 0; }
.mt-wheel .w-item:not(.is-center) { font-weight: 500; }
.show-sm { display: none !important; }
@media (min-width: 721px) and (max-width: 1180px) {
  .top-left .top-title { font-size: 24px; padding-left: 14px; }
  .top-left { gap: 14px; }
}
/* Petite fenêtre : une seule ligne. Le logo à gauche, le nom de l'outil au centre, « More tools » à droite. */
@media (max-width: 720px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; }
  .top-left { display: contents; }
  .top-left .top-title { grid-column: 2; justify-self: center; max-width: 100%; padding-left: 0; border-left: 0; font-size: 17px; text-align: center; }
  .top-right { grid-column: 3; }
  .top-right .lang, .hide-sm { display: none !important; }
  .show-sm { display: inline-flex !important; }
  .nav.mt { margin: 0; overflow: visible; }
  .mt-wheel { font-size: 15px; }
  .mt-sizer span { padding: 0 12px; }
}
/* La pop-up des outils : la même liste que les sonneries */
#tools-modal .dd-opt { color: inherit; text-decoration: none; }
#tools-modal .dd-opt[aria-selected="true"] { color: var(--white); }
.tl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 14px; }
.tl-sm { padding: 8px 4px; border: 0; background: none; color: var(--bg); font: inherit; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Pastille qui glisse d'un choix à l'autre */
.has-pill:not(.tbar) { position: relative; }
.seg-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 12px; background: var(--pill, var(--white)); pointer-events: none; transition: transform .38s var(--swift), width .38s var(--swift), height .38s var(--swift); }
.has-pill > button { position: relative; z-index: 1; transition: color .25s, background-color .15s; }
.has-pill > button[aria-pressed="true"] { background: transparent !important; color: var(--pill-ink, var(--bg)); }
.modal-card .has-pill { --pill: var(--bg); --pill-ink: var(--white); }
/* Pomodoro : les chiffres glissent quand on change de phase ; les durées se règlent dans la phrase */
.pomo-slide { display: inline-block; }
.pomo-slide.from-r { animation: pomo-from-r .45s var(--swift); }
.pomo-slide.from-l { animation: pomo-from-l .45s var(--swift); }
@keyframes pomo-from-r { from { transform: translateX(30%); } }
@keyframes pomo-from-l { from { transform: translateX(-30%); } }
.pomo .pomo-round { gap: 12px; font-size: 15px; }
.pomo-sentence { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.6; }
.iw { position: relative; display: inline-block; width: 1.7em; height: 2.7em; margin: 0 .06em; vertical-align: middle; overflow: hidden; cursor: ns-resize; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.iw::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.3em; margin-top: -.65em; border-radius: .3em; background: var(--frame); transition: background-color .15s; }
.iw:hover::before { background: var(--frame-hi); }
.iw:focus-visible { box-shadow: 0 0 0 2px var(--white); }
.iw .wheel-track { position: absolute; inset: 0; }
.iw .w-item { font-variant-numeric: tabular-nums; }
.modal-card--pick { text-align: center; }
.modal-card--pick .modal-title { margin-bottom: 16px; }
@media (min-width: 721px) { .t-run { font-size: 1.5em; } }

/* Flèche pour descendre vers la suite de la page */
.scroll-down { position: absolute; left: 50%; bottom: 14px; z-index: 3; width: 44px; height: 44px; margin-left: -22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); opacity: .8; animation: nudge-down 2.6s var(--ease) infinite; transition: opacity .15s; }
.scroll-down:hover { opacity: 1; }
@keyframes nudge-down { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(6px); } }
.hero.is-fs .scroll-down, .hero.is-armed .scroll-down { display: none; }
html { scroll-behavior: smooth; }
@media (max-width: 720px) { .hero { padding-bottom: 70px; } .hero--clock { padding-bottom: 70px; } .scroll-down { bottom: 8px; } }

/* Une seule police, une seule graisse dans l'outil ; seule l'heure (les gros chiffres) se distingue. */
.hero .tool .btn-primary, .hero .tool .btn-ghost, .hero .ring .btn-primary, .hero .ring .btn-ghost { font-weight: 500; }
.hero .tool .eyebrow { font-weight: 500; }
.hero .tool .quote figcaption { font-weight: 500; }

/* Minuteur : pavé numérique */
.modal-card.modal-card--keypad { width: min(380px, 100%); text-align: center; }
.kp-display { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 0 0 18px; font-family: var(--f-display); font-size: clamp(54px, 13vw, 72px); line-height: 1; opacity: .6; font-variant-numeric: tabular-nums; }
.kp-display.is-typing { opacity: 1; }
.kp-display.bump { animation: bump .2s var(--ease); }
.kp-display small { margin: 0 10px 0 2px; font-family: var(--f-body); font-size: 15px; font-weight: 500; opacity: .8; }
.kp-display small:last-child { margin-right: 0; }
.kp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.kp-grid button { min-height: 60px; border: 0; border-radius: 16px; background: var(--tint); color: var(--bg); font-size: 24px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: background-color .12s, transform .1s; }
.kp-grid button:hover { background: var(--tint-2); }
.kp-grid button:active { transform: scale(.95); }
.kp-ok { width: 100%; }

/* Pomodoro, comme le réveil : une phrase avec la grande roue */
.hero--pomodoro .when { --pkf: clamp(60px, min(11vw, 12.6vh), 150px); }
.pomo-center { font-size: var(--pkf); }
.hero--pomodoro .when .lead, .hero--pomodoro .when .sentence { font-size: clamp(21px, 2vw, 28px); line-height: 1.5; }
.pomo-status { visibility: hidden; }
.t-started .pomo-status { visibility: visible; }
.pomo .t-run { font-size: 1.5em; }
.hero .laps { max-height: 128px; overflow-y: auto; scrollbar-width: thin; }

/* Préréglages : proposer une idée */
.modal-card .pm-idea { grid-row: 3; justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--tint); color: var(--bg); font-weight: 500; font-size: 15px; }
.modal-card .pm-idea:hover { background: var(--tint-2); }
/* L'ampoule de la barre des couleurs grossit et rayonne avec la luminosité */
.cb-light > svg { transform: scale(calc(.72 + var(--lum, .45) * .7)); filter: drop-shadow(0 0 calc(var(--lum, .45) * 7px) rgba(255, 255, 255, calc(var(--lum, .45) * 1.1))); transition: transform .3s var(--ease), filter .3s; }
.hero--pomodoro .when .sentence { max-width: 32em; text-wrap: balance; }

/* Minuteur : les minutes seules ; les heures et les secondes s'ajoutent avec « + h » et « + s » */
.t-wheels .tw-part { display: none; align-items: center; }
.t-wheels.show-h .tw-h, .t-wheels.show-s .tw-s { display: inline-flex; animation: tw-in .35s var(--swift); }
@keyframes tw-in { from { transform: scale(.6); } }
.tw-add { flex: none; align-self: center; margin: 0 .22em; padding: 0 12px; height: 40px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font-family: var(--f-body); font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.tw-add:hover { background: var(--frame-hi); }
.tw-add .stack { justify-items: center; }
.hero.is-fs .tw-add { display: none; }

/* Minuteur : une seule colonne, toujours centrée. Un préréglage choisi s'affiche en petit au-dessus des roues ;
   une fois lancé, l'illustration (un gros œuf) passe à gauche et le temps à droite, plus petit. */
.hero--timer .timer-row { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(6px, 1.6vh, 16px); }
.hero--timer .visual-spacer, .hero--timer:not(.has-preset) .visual { display: none; }
.hero--timer.has-preset .visual { justify-self: center; width: auto; }
.hero--timer .vis-art, .hero--timer .visual .egg-state { display: none; }
.vis-tag { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 14px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: background-color .15s; }
.vis-tag:hover { background: var(--frame-hi); }
.vis-tag svg { opacity: .8; }
.hero.is-fs .vis-tag { display: none; }
.hero--timer.has-preset.t-started .timer-row { grid-template-columns: auto auto; align-items: center; gap: clamp(20px, 5vw, 80px); }
.hero--timer.has-preset.t-started .visual { display: flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(150px, min(24vw, 38vh), 320px); }
.hero--timer.has-preset.t-started .vis-art { display: block; width: 100%; }
.hero--timer.has-preset.t-started .vis-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12)); }
.hero--timer.has-preset.t-started .visual .egg-state { display: block; font-size: clamp(13px, 1.7vh, 17px); letter-spacing: .1em; }
.hero--timer.has-preset.t-started .vis-tag { display: none; }
.hero--timer.has-preset.t-started .t-center { font-size: clamp(40px, min(6vw, 8vh), 92px); }
@media (max-width: 720px) { .hero--timer.has-preset.t-started .timer-row { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Chrono d'entraîneur : pas de boutons, deux petites étiquettes montrent la couronne et le poussoir ---------- */
.sw-tag { display: none; }
.sw-coach .sw-tag { position: absolute; display: flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 700; font-size: clamp(13px, calc(var(--dia) * .042), 17px); white-space: nowrap; pointer-events: none; transition: opacity .2s; }
.sw-coach .sw-tag::before { content: ""; flex: none; width: calc(var(--dia) * .09); height: 2px; border-radius: 1px; background: currentColor; opacity: .55; }
.sw-tag--crown { right: calc(50% + var(--dia) * .085 + 12px); top: calc(var(--dia) * .0425); flex-direction: row-reverse; transform: translateY(-50%); }
.sw-tag--pusher { left: calc(50% + var(--dia) * .44 + 8px); top: calc(var(--dia) * .2); transform: translateY(-50%); }
.sw-coach .sw-tag--pusher::before { transform: rotate(-45deg) translate(-2px, 6px); transform-origin: 0 50%; }
.sw-tag.is-off { opacity: .45; }
.sw-coach [data-sw-start], .sw-coach [data-sw-lap], .sw-coach [data-sw-reset] { display: none; }
.sw-coach .sw-body { align-self: stretch; }
/* En plein écran, le chrono d'entraîneur grandit en entier (boîtier, couronne, poussoir), pas seulement les chiffres */
.hero.is-fs .sw-coach .sw-body > * { zoom: 1; }
.hero.is-fs .sw-coach .sw-body { --dia: calc(clamp(200px, min(42vh, 56vw), 440px) * var(--cs, 1)); }

/* ---------- Horloge : la date se touche pour changer de format ---------- */
button.date { position: relative; z-index: 1; display: block; padding: 2px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font-family: inherit; cursor: pointer; transition: background-color .15s; }
button.date:hover { background: var(--frame); }
button.date.slide { animation: date-in .35s var(--swift); }
@keyframes date-in { from { transform: translateY(40%); } }
/* Montre en plein écran : elle remplit l'écran, tout le boîtier visible, le bracelet sort par le haut et le bas. */
.hero.is-fs.is-watch { overflow: hidden; }
.hero.is-fs .clock--watch { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero.is-fs .clock--watch > * { zoom: 1; }
.hero.is-fs .clock--watch .lux2 { transform: translateY(4.5vh); }
.hero.is-fs .clock--watch .lux2-img { height: calc(136vh * var(--cs, 1)); -webkit-mask-image: none; mask-image: none; }
.hero.is-fs .clock--watch .lux2-hands { filter: drop-shadow(0 .4vh .4vh rgba(0, 0, 0, .55)); }
.hero.is-fs.is-watch .clock-stage .date { position: relative; z-index: 1; }
.hero.is-fs.is-watch .clock-bar, .hero.is-fs.is-watch .top, .hero.is-fs.is-watch .fs-quote { z-index: 2; }

/* L'horloge ne se laisse pas écraser par la scène : si elle est trop grande, la taille se réduit (et la date reste au-dessus). */
.hero--clock .clock-stage > * { flex-shrink: 0; }
.hero--clock .clock--mono .hm { margin-block: .1em; }
/* Montre en plein écran : rien par-dessus le cadran (ni date, ni citation) */
.hero.is-fs.is-watch .clock-stage .date, .hero.is-fs.is-watch [data-show-date] { display: none; }
/* Les citations, en bas à droite, à côté de la montre */
.hero.is-fs.is-watch .fs-quote { position: absolute; right: max(32px, env(safe-area-inset-right, 0px)); bottom: 104px; z-index: 2; width: min(340px, 26vw); margin: 0; text-align: right; }
/* N/B : un toucher blanc, le suivant noir */
.cb.cb-bw { background: var(--bg); color: var(--white); font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: .02em; }

/* ---------- Réveil programmé : le même esprit que le réglage (mêmes roues, même taille, même phrase) ---------- */
.state--armed .cd-wheels .wheel { pointer-events: none; cursor: default; }
.state--armed .armed-when .lead { white-space: nowrap; }
.quote-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(1000px, 100%); min-height: 3.4em; }
.state--armed .quote { width: auto; max-width: 100%; min-height: 0; overflow: hidden; padding-block: 4px; }
.q-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 14px; transition: transform .55s var(--swift); }
.q-in.is-out { transform: translateY(-140%); }
.q-in.is-below { transform: translateY(140%); transition: none; }
.state--armed .quote blockquote { font-size: clamp(17px, 1.7vw, 21px); }
.quote-eye { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .15s; }
.quote-eye:hover { background: var(--frame-hi); }
.quote-eye svg { width: 20px; height: 20px; }
.quote-eye .qe-hide, .quote-eye .qe-show { display: inline-flex; align-items: center; gap: 8px; }
.quote-eye[aria-pressed="true"] .qe-show, .quote-eye[aria-pressed="false"] .qe-hide { display: none; }
.hero.no-quotes .state--armed .quote { display: none; }
.hero.is-fs .quote-eye { display: none; }
.hero--alarm.is-fs .fs-bar { z-index: 6; }
.hero--alarm .state--armed { gap: var(--gap); }
.state--armed .armed-foot { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 var(--gutter); }
.hero.is-fs .state--armed .armed-foot { bottom: 104px; }
.state--armed .quote-row { min-height: 0; }

@media (max-width: 720px) { .state--armed .armed-foot { bottom: 84px; } }
.vis-tag svg { flex: none; width: 14px !important; height: 14px !important; }
.vis-tag span { white-space: nowrap; }
.hero--timer.has-preset.t-started .timer-row { justify-content: center; }

/* ---------- Réveil programmé, mode nuit (par défaut) : la pièce s'éteint. Fond presque noir, tout en lumière douce ;
   sans bouger quelques secondes, tout s'assombrit encore ; on bouge, ça revient. Sans mode nuit : la couleur, en pleine lumière. ---------- */
.hero--alarm.is-night .state--armed { background: color-mix(in srgb, var(--bg) 14%, #070709); }
:root .hero.hero--alarm.is-armed.is-night { --white: #BFC2CB; --frame: rgba(255, 255, 255, .08); --frame-hi: rgba(255, 255, 255, .14); }
.hero--alarm.is-armed.is-night .state--armed .btn-primary { background: var(--frame); color: var(--white); }
.hero--alarm.is-armed.is-night .state--armed .btn-primary:hover { background: var(--frame-hi); }
.hero--alarm.is-armed.is-night .state--armed .w-item:not(.is-center) { opacity: .5; }
.state--armed .hint { font-size: 14px; opacity: .8; }
.page:has(.hero--alarm.is-armed.is-night) .cbar { opacity: .35; }
.hero--alarm.is-night .state--armed > *, .hero--alarm.is-night .top, .page:has(.hero--alarm.is-night) .cbar { transition: opacity 1.2s ease; }
/* Au repos (8 s sans bouger) : écran noir, tout l'inutile disparaît, il ne reste que le temps, en gris très sombre.
   Presque aucune lumière (et, sur les écrans OLED, presque aucune batterie). On bouge : tout revient. */
.hero--alarm.is-night .state--armed { transition: clip-path .7s var(--swift), visibility 0s, background-color 1.6s ease, color 1.6s ease; }
.hero--alarm.is-night.night-idle .state--armed { background: #000000; color: #2B2B30; }
.hero--alarm.is-night.night-idle .state--armed > :not(.when), .hero--alarm.is-night.night-idle .armed-when > :not(.cd-picker) { opacity: 0; pointer-events: none; }
.hero--alarm.is-night.night-idle .cd-wheels .w-item:not(.is-center), .hero--alarm.is-night.night-idle .cd-wheels .wheel::before { opacity: 0; transition: opacity 1.2s ease; }
.hero--alarm.is-night.night-idle .cd-wheels .w-item.is-center { color: #2B2B30; }
.hero--alarm.is-night.night-idle .top, .page:has(.hero--alarm.is-night.night-idle) .cbar, .hero--alarm.is-night.night-idle .fs-bar { opacity: 0; pointer-events: none; }
.hero--alarm.is-night.night-idle { cursor: none; }
.night-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
.night-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s; }
.night-btn:hover { background: var(--frame-hi); }
.night-btn[aria-pressed="true"] { background: var(--white); color: #0B0B0F; }
.night-btn svg { width: 16px; height: 16px; }

.hero--alarm.is-armed.is-night .fs-bar .chip-btn[aria-pressed="true"] { color: #0B0B0F; }
.hero.is-fs .state--armed .hint { display: inline-flex; }

/* ---------- Pop-up en roue : le fond flouté, une grande roue au milieu, un toucher au centre choisit ---------- */
.modal-card.wp-card { width: auto; min-width: min(300px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.wp-card .modal-title { margin-bottom: 6px; }
.wp-wheel { position: relative; display: grid; height: 4.3em; font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.wp-wheel::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.42em; margin-top: -.71em; border-radius: .3em; background: var(--tint); transition: background-color .15s; }
.wp-wheel:hover::before { background: var(--tint-2); }
.wp-wheel:focus-visible::before { box-shadow: 0 0 0 2px var(--bg); }
.wp-sizer { display: grid; align-self: center; visibility: hidden; }
.wp-sizer span { grid-area: 1 / 1; height: 0; overflow: hidden; padding: 0 .75em; white-space: nowrap; }
.wp-wheel .wheel-track { position: absolute; inset: 0; }
.wp-wheel .w-item.is-center { cursor: pointer; }
.wp-card.wp--num .wp-wheel { font-family: var(--f-display); font-weight: 400; letter-spacing: 0; font-size: clamp(60px, 9vw, 104px); }
.wp-card.wp--num .wp-sizer span { padding: 0 .5em; }
.wp-hint { margin: 10px 0 0; font-size: 14px; font-weight: 500; opacity: .72; }
.wp-extra { margin-top: 10px; }
.wp-extra:empty { display: none; }
/* Minuteur : l'unité à côté de chaque roue (05 min ; 1 h 05 min 30 s), plus clair que les deux-points */
.tw-unit { flex: none; align-self: center; margin: .3em .18em 0 .1em; font-family: var(--f-body); font-weight: 600; font-size: .2em; letter-spacing: .01em; opacity: .85; }

/* ---------- Horloge en lettres : une boîte de hauteur fixe pour la phrase, les secondes sur leur ligne ---------- */
.clock--words .words { display: flex; flex-direction: column; align-items: center; gap: .3em; max-width: none; font-size: clamp(34px, min(6.4vw, 8.6vh), 116px); text-transform: none; }
.clock--words.has-sec .words { font-size: clamp(34px, min(6.4vw, 8.6vh), 116px); max-width: none; }
.w-main { display: grid; align-items: center; justify-items: center; width: 15ch; height: 3.3em; overflow: hidden; text-transform: uppercase; line-height: 1.06; }
.w-in { display: block; text-wrap: balance; transition: transform .38s var(--swift); }
.w-in.is-out { transform: translateY(-120%); }
.w-in.is-below { transform: translateY(120%); transition: none; }
.w-sec { height: 1.3em; font-family: var(--f-body); font-weight: 500; font-size: .32em; line-height: 1.3; opacity: .8; white-space: nowrap; }
.clock--words { min-height: 0; }

/* ---------- Pomodoro : « Focus for » à gauche de la grande roue ; la phrase en dessous avec ses petites roues ---------- */
.pomo-top { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 30px); }
.pomo-top .pomo-lead { flex: 1 1 0; display: flex; justify-content: flex-end; text-align: right; white-space: nowrap; }
.pomo-top .pomo-lead .stack { justify-items: end; }
.pomo-top .pomo-lead-ghost { flex: 1 1 0; }
.pomo-top .picker { flex: none; }
.hero--pomodoro .when .pomo-sentence { max-width: 30em; line-height: 1.2; }
.hero--pomodoro .when { gap: clamp(2px, 1vh, 12px); }

.hero--pomodoro .when .pomo-sentence { max-width: 44em; font-size: clamp(19px, 1.75vw, 25px); }

/* ---------- Centrage optique : le contenu au milieu de l'espace libre, un peu remonté. Ni collé en haut, ni en bas. ---------- */
:root { --lift: clamp(14px, 5vh, 60px); }
.hero:not(.is-fs) main.tool { padding-bottom: var(--lift); }
@media (min-width: 721px) {
  .hero--alarm { --gap: clamp(16px, 4.2vh, 50px); }
  .hero--alarm .when { --pkf: clamp(56px, min(10.5vw, 11.4vh), 140px); }
  .hero--pomodoro .when { --pkf: clamp(54px, min(9.5vw, 10.4vh), 130px); }
  .hero--pomodoro .pomo { gap: clamp(14px, 3.6vh, 44px); }
}
.hero--pomodoro .pomo { position: relative; }
.hero--pomodoro .pomo-status { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 4px; }

/* ---------- Téléphone : le réveil programmé s'empile, tout reste touchable ---------- */
@media (max-width: 720px) {
  .hero--alarm .state--armed { justify-content: center; gap: clamp(10px, 2.2vh, 20px); padding-top: 100px; padding-bottom: 24px; overflow-y: auto; }
  .state--armed .armed-foot { position: static; padding: 0; gap: 8px; }
  .state--armed .quote-row { gap: 10px; }
  .state--armed .quote blockquote { font-size: 16px; }
  .state--armed .quote figcaption { font-size: 11px; }
  .state--armed .night-row { flex-direction: column; gap: 6px; }
  .state--armed .hint { font-size: 12px; max-width: 30em; text-align: center; }
  .hero--alarm .state--armed .cd-wheels { font-size: clamp(46px, min(14vw, 8.4vh), 76px); }
}
@media (max-width: 720px) and (max-height: 700px) {
  .state--armed .quote-row { display: none; }
  .hero--alarm .state--armed .lead { font-size: 19px; }
}

/* Chrono classique : pas de hauteur réservée sous les chiffres (sinon un grand vide sur téléphone) */
.tool--stopwatch:not(.sw-coach) .sw-display { min-height: 0; }
/* Petits écrans (iPhone SE…) : tout un peu plus petit pour respirer sous l'en-tête */
@media (max-width: 720px) and (max-height: 720px) {
  .hero { --gap: clamp(12px, 2.6vh, 22px); }
  .hero--alarm .when, .hero--pomodoro .when { --pkf: clamp(48px, 8.6vh, 64px); }
  .t-center { font-size: clamp(50px, 9vh, 72px); }
  .tool--stopwatch:not(.sw-coach) .sw-display { font-size: clamp(56px, 16vw, 80px); }
  .hero .tool { padding-top: 8px; }
}
/* Écrans d'ordinateur peu hauts (13 pouces, fenêtre réduite) : la roue du réveil un peu plus petite, pour respirer sous l'en-tête */
@media (min-width: 721px) and (max-height: 780px) {
  .hero--alarm .when { --pkf: clamp(52px, min(10.5vw, 9.8vh), 120px); }
  .hero--alarm { --gap: clamp(14px, 3.6vh, 40px); }
  .hero--pomodoro .when { --pkf: clamp(50px, min(9.5vw, 9.4vh), 110px); }
}
/* Réveil et Pomodoro n'ont pas de barre en bas : moins de marge réservée, le contenu se centre vraiment (avec un léger remontage). */
@media (min-width: 721px) { .hero.hero--alarm:not(.is-fs), .hero.hero--pomodoro:not(.is-fs) { padding-bottom: 64px; } }
/* La couleur de fond ne change jamais d'elle-même (réveil programmé, pause du Pomodoro, sonnerie) : seulement avec la palette.
   Le mode nuit du réveil assombrit la même couleur, il ne la remplace pas. */
.pomo-bg { display: none; }

/* Téléphone : le plein écran reste à portée, une icône à droite de « More tools » ; le titre se fait un peu plus petit. */
@media (max-width: 720px) {
  .top-right .icon-btn.hide-sm[data-fullscreen] { display: inline-flex !important; width: 38px; height: 38px; }
  .top-left .top-title { font-size: 15px; }
  .logo-word { --lf: 23px; }
  .top { gap: 6px 8px; }
  .mt-wheel { font-size: 14px; }
  .mt-sizer span { padding: 0 10px; }
}

/* Plein écran sur téléphone : des marges sur les côtés, pas de « Échap », la palette au-dessus de la barre */
@media (max-width: 720px) {
  .hero.is-fs main.tool { width: 100%; padding-inline: 16px; box-sizing: border-box; }
  .hero.is-fs .fs-hint { display: none; }
  .hero.is-fs ~ .cbar { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 84px); }
}
@media (hover: none) { .hero.is-fs .fs-hint { display: none; } }

@media (max-width: 720px) {
  .hero.is-fs .pomo, .hero.is-fs .tool > .actions, .hero.is-fs .pomo > .actions { max-width: 100%; width: 100%; }
  .hero.is-fs .actions .btn-wide { min-width: 0; }
}
/* Écran noir du réveil : les valeurs voisines disparaissent aussi */
.hero--alarm.is-night.night-idle .cd-wheels .w-item:not(.is-center) { visibility: hidden; }

/* ---------- Mode concentré : l'outil tourne, les réglages s'effacent ; on touche ou on bouge, ils reviennent ---------- */
.hero .top, .hero .tbar, .hero .clock-bar, .hero .t-actions, .hero .pomo-sentence, .hero .sw-beep, .hero .scroll-down, .hero .vis-tag, .state--armed .actions, .state--armed .armed-foot, .cbar { transition: opacity .6s ease, transform .2s var(--ease); }
.hero.live-idle .top, .hero.live-idle .tbar, .hero.live-idle .clock-bar, .hero.live-idle .scroll-down, .page:has(.hero.live-idle) .cbar:not(.is-open) { opacity: 0; pointer-events: none; }
.hero--timer.live-idle .t-actions, .hero--pomodoro.live-idle .t-actions, .hero--pomodoro.live-idle .pomo-sentence { opacity: 0; pointer-events: none; }
/* Le chrono garde ses boutons (Tour, Stop) ; seul le réglage du bip s'efface */
.hero--stopwatch.live-idle .sw-beep { opacity: 0; pointer-events: none; }
.hero--alarm.live-idle .state--armed .actions, .hero--alarm.live-idle .state--armed .armed-foot { opacity: 0; pointer-events: none; }
.hero.live-idle { cursor: none; }

/* ---------- Cohérence : tous les outils suivent la même structure que le réveil ----------
   une phrase en haut, les roues (ou les chiffres), les réglages en phrase, les boutons seuls sur leur ligne, la barre en bas.
   Lancés, le minuteur et le Pomodoro décomptent sur leurs roues, comme le réveil. */
.t-run { display: none !important; }
.t-started .t-wheels { visibility: visible; }
.t-started .t-wheels .wheel, .pomo .t-started .wheel, .hero--pomodoro.t-started .pomo-center .wheel { pointer-events: none; }
.t-wheels.live-s .tw-s, .t-wheels.live-h .tw-h { display: inline-flex; }
.t-started .tw-add { visibility: hidden; }
.hero--timer .timer-when, .hero--pomodoro .pomo-when { display: flex; flex-direction: column; align-items: center; }
.hero--timer.has-preset:not(.t-started) .t-lead { display: none; }
/* Mêmes tailles partout : la grande roue, la phrase du haut, la phrase des réglages */
.hero--alarm .when, .hero--timer .timer-when, .hero--pomodoro .when { --pkf: clamp(56px, min(10.5vw, 11.4vh), 140px); }
.hero--timer .t-center, .hero--pomodoro .pomo-center { font-size: var(--pkf); }
.hero .when .lead, .hero .t-lead, .hero--pomodoro .when .lead { font-size: clamp(21px, 2vw, 28px); line-height: 1.5; font-weight: 500; }
.hero .when .sentence, .hero .t-sentence, .hero .sw-beep, .hero--pomodoro .when .pomo-sentence { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.5; }
.hero--pomodoro .when .pomo-sentence { max-width: 40em; line-height: 1.25; }
.hero .sw-beep { margin: 0; }
.hero--timer.has-preset.t-started .t-center { font-size: clamp(44px, min(6.4vw, 8.6vh), 96px); }
@media (min-width: 721px) and (max-height: 780px) {
  .hero--alarm .when, .hero--timer .timer-when, .hero--pomodoro .when { --pkf: clamp(52px, min(10.5vw, 9.8vh), 120px); }
}
@media (max-width: 720px) {
  .hero--alarm .when, .hero--timer .timer-when, .hero--pomodoro .when { --pkf: clamp(52px, min(15vw, 9.6vh), 92px); }
  .hero .when .lead, .hero .t-lead { font-size: 21px; }
  .hero .when .sentence, .hero .t-sentence, .hero .sw-beep, .hero--pomodoro .when .pomo-sentence { font-size: 19px; }
}
@media (max-width: 720px) and (max-height: 720px) {
  .hero--alarm .when, .hero--timer .timer-when, .hero--pomodoro .when { --pkf: clamp(46px, 8.4vh, 62px); }
}
/* Mode concentré : la phrase des réglages s'efface aussi */
.hero .t-sentence { transition: opacity .6s ease; }
.hero--timer.live-idle .t-sentence { opacity: 0; pointer-events: none; }


/* ---------- Contenu long (guides, conseils) : de l'air entre les sections, listes numérotées comme les puces ---------- */
.content h2:not(:first-child) { margin-top: 34px; }
.content ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.65; max-width: 68ch; }
.content li b { font-weight: 700; }
.content .table-wrap { max-width: 100%; overflow-x: auto; }

/* « More tools » : un simple bouton dans le cadre maison (plus de roue dans l'en-tête) */
.nav-more { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font: inherit; font-weight: 600; font-size: 16px; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .15s var(--ease); }
.nav-more:hover { background: var(--frame-hi); }
.nav-more:active { transform: scale(.97); }
@media (max-width: 720px) { .nav-more { height: 38px; padding: 0 12px; font-size: 15px; } }


.t-wheels .tw-add { display: none; }
.t-wheels .tw-unit { font-size: .24em; }

/* Quand on ne peut pas toucher (décompte du réveil, minuteur ou Pomodoro lancé) : plus de roue,
   seulement les chiffres, qui glissent d'un cran à chaque seconde. */
.pk-wheel .wheel { transition: height .45s var(--ease); }
.pk-wheel.is-live .wheel { height: 1.3em; -webkit-mask-image: none; mask-image: none; }
.pk-wheel.is-live .wheel::before, .pk-wheel.is-live .wheel:hover::before { background: transparent; }
.t-started .t-cols { opacity: .35; pointer-events: none; }
.t-cols .chip-btn { min-width: 0; }
/* Téléphone : la barre du minuteur passe sur deux lignes (préréglages, puis heures et secondes) au lieu de déborder. */
@media (max-width: 720px) {
  .hero .t-bar { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  .t-bar .bar-sep { display: none; }
}
/* Montre : on centre sur l'axe des aiguilles (pas sur l'image, qui a la couronne à droite et le bracelet),
   un peu au-dessus du centre pour la correction optique. L'axe est à 48,6 % / 47,2 % de l'image. */
.clock--watch .lux2-face { transform: translate(calc(var(--w) * 1.5 * .00898), calc(var(--w) * 1.5 * .02826)); }
.hero.is-fs .clock--watch { --wh: calc(min(136vh, 165vw) * var(--cs, 1)); }
.hero.is-fs .clock--watch .lux2-img { height: var(--wh); }
.hero.is-fs .clock--watch .lux2 { transform: none; }
.hero.is-fs .clock--watch .lux2-face { transform: translate(calc(var(--wh) * .00898), calc(var(--wh) * .02826 - 3vh)); }
@media (max-width: 720px) { .hero:not(.is-fs) .clock--watch .lux2-face { transform: translate(calc(var(--w) * 1.5 * .00898), calc(var(--w) * 1.5 * .02826 - 18px)); } }
@media (max-width: 720px) { .hero.is-fs.is-watch .fs-quote { display: none; } }
/* Langue : le code (EN, FR…) ouvre la roue des langues. */
button.lang { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.foot-links .foot-all { grid-column: 1 / -1; font-weight: 700; }
.foot-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 18px; font-size: 14px; }
.foot-langs svg { opacity: .8; }
.foot-langs a { color: var(--white); text-decoration: none; opacity: .85; }
.foot-langs a:hover { text-decoration: underline; opacity: 1; }
.foot-langs a[aria-current] { font-weight: 700; opacity: 1; }
.tl-sm svg { vertical-align: -3px; margin-right: 6px; }
.content h3 + .cards { margin-top: 8px; }

/* ============ Compte à rebours de Noël ============ */
.hero--xmas .tool { justify-content: center; padding-bottom: 4vh; z-index: 2; pointer-events: none; }
.hero--xmas .tool > * { pointer-events: auto; }
.xmas { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4vh, 22px); pointer-events: none; }
.xmas > * { pointer-events: auto; }
.xm-snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.xm-stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero--xmas .top, .hero--xmas .xm-bar { position: relative; z-index: 3; }
.xm-count { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 1.6vw, 22px); font-family: var(--f-display); font-size: clamp(56px, min(12.5vw, 19vh), 180px); line-height: 1; }
.xm-count .unit { display: flex; flex-direction: column; align-items: center; gap: .1em; cursor: default; user-select: none; -webkit-user-select: none; }
.xm-count .num { position: relative; overflow: hidden; height: 1.12em; width: 1.18em; border-radius: .12em; background: var(--frame); font-variant-numeric: tabular-nums; }
.xm-count .unit--d .num { width: 1.72em; }
.xm-count .num span { position: absolute; inset: 0; display: grid; place-items: center; }
.xm-count .num .in { animation: xmIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.xm-count .num .out { animation: xmOut .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xmIn { from { transform: translateY(100%); } }
@keyframes xmOut { to { transform: translateY(-100%); } }
.xm-count small { font-family: var(--f-body); font-size: clamp(12px, 1.25vw, 15px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.xm-sentence { max-width: 34ch; text-wrap: balance; }
.xm-hint { margin: 0; font-size: 13px; opacity: .8; }
.xm-bar { flex-wrap: wrap; justify-content: center; }
.xm-bar .chip-btn svg { width: 18px; height: 18px; }

.stk { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); animation: stkIn .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.stk svg { display: block; width: 100%; height: auto; pointer-events: none; }
.stk.dragging { cursor: grabbing; z-index: 5; }
.stk.bye { animation: stkOut .3s ease-in both; }
@keyframes stkIn { from { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.2); opacity: 0; } }
@keyframes stkOut { to { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.1); opacity: 0; } }

.xm-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); animation: xmFade .25s ease both; color: var(--white); }
@keyframes xmFade { from { opacity: 0; } }
.xm-card { position: relative; width: min(560px, 100%); max-height: calc(100% - 8px); overflow: auto; box-sizing: border-box; padding: 28px 24px 24px; border-radius: 24px; background: color-mix(in srgb, var(--bg) 72%, #000 10%); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); text-align: left; animation: xmRise .35s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes xmRise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.xm-card h2 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1.05; }
.xm-card .sub { margin: 0 0 18px; opacity: .85; line-height: 1.4; }
.xm-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--frame); color: var(--white); cursor: pointer; display: grid; place-items: center; }
.xm-x:hover, .xm-btn:hover { background: var(--frame-hi); }
.xm-btn { height: 44px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer; font: inherit; font-weight: 700; background: var(--frame); color: var(--white); }
.xm-btn--white { background: var(--white); color: var(--bg); }
.xm-btn--white:hover { background: rgba(255, 255, 255, .88); }
.xm-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.xm-row--c { justify-content: center; }
.xm-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.xm-tray button { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: transform .15s; }
.xm-tray button:hover { background: var(--frame-hi); transform: rotate(-3deg); }
.xm-tray svg { width: 54px; height: 54px; }
.xm-player { position: relative; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 16px; overflow: hidden; background: #000; }
.xm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xm-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; margin-bottom: 12px; border-radius: 16px; background: var(--frame-hi); }
.xm-box p { margin: 0; line-height: 1.35; }
.xm-songs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xm-songs li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--frame); }
.xm-songs .rk { font-family: var(--f-display); font-size: 28px; line-height: 1; text-align: center; }
.xm-songs b { display: block; font-size: 15px; line-height: 1.25; }
.xm-songs .t span { display: block; font-size: 13px; opacity: .8; }
.xm-songs .acts { display: flex; gap: 6px; }
.xm-play { height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--white); color: var(--bg); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.xm-play.is-on { background: var(--gold, #F6C445); color: #2A1414; }
.xm-yt { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--frame-hi); color: var(--white); }
.xm-note { margin: 14px 0 0; font-size: 13px; opacity: .75; }
.xm-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xm-game { display: grid; gap: 6px; text-align: left; padding: 16px; border: 0; border-radius: 16px; background: var(--frame); color: var(--white); cursor: pointer; font: inherit; }
.xm-game:hover { background: var(--frame-hi); }
.xm-game svg { width: 56px; height: 56px; }
.xm-game b { font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.xm-game span { font-size: 13px; opacity: .85; line-height: 1.35; }
.xm-hud { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-display); font-size: 26px; margin-bottom: 10px; }
.xm-hud small { font-family: var(--f-body); font-size: 13px; opacity: .8; }
.xm-cv { display: block; width: 100%; max-width: 360px; aspect-ratio: 340 / 420; margin: 0 auto; border-radius: 16px; background: rgba(0, 0, 0, .14); touch-action: none; }
.xm-chims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 0 auto; }
.xm-chim { position: relative; aspect-ratio: 1; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .14); cursor: pointer; overflow: hidden; padding: 0; }
.xm-chim .who { position: absolute; left: 14%; right: 14%; bottom: 30%; transform: translateY(110%); transition: transform .16s ease-out; }
.xm-chim .who svg { display: block; width: 100%; }
.xm-chim.up .who { transform: translateY(0); }
.xm-chim.hit .who { transform: translateY(110%) rotate(20deg); transition-duration: .25s; }
.xm-chim .stack { position: absolute; left: 12%; right: 12%; bottom: 0; height: 36%; background: #8E3B2E; border-radius: 4px 4px 0 0; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15); }
.xm-chim .stack::before { content: ""; position: absolute; left: -8%; right: -8%; top: 0; height: 26%; background: #fff; border-radius: 6px; }
.xm-result { text-align: center; padding: 14px 0 4px; }
.xm-result b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 54px; line-height: 1; }
#xm-sleigh { position: absolute; top: 14%; left: 0; z-index: 4; width: min(520px, 90vw); pointer-events: none; animation: xmFly 7s linear both; }
@keyframes xmFly { from { transform: translate(105vw, 4vh); } 50% { transform: translate(40vw, -2vh); } to { transform: translate(-110%, 6vh); } }
#xm-sleigh svg { display: block; width: 100%; height: auto; }
.xm-lights { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 54px; pointer-events: none; }
.xm-lights svg { width: 100%; height: 100%; }
.xm-lights circle { animation: xmBlink 1.2s steps(2, jump-none) infinite; }
@keyframes xmBlink { 50% { opacity: .25; } }
.xm-party { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; text-align: center; }
.xm-party p { margin: 0; font-family: var(--f-display); font-size: clamp(64px, 13vw, 190px); line-height: .95; text-shadow: 0 10px 40px rgba(0, 0, 0, .25); animation: xmPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.xm-party small { display: block; font-family: var(--f-body); font-size: 18px; margin-top: 12px; }
@keyframes xmPop { from { transform: scale(.2); } }
.xm-shake { animation: xmShake .5s ease-in-out 6; }
@keyframes xmShake { 25% { transform: translate(4px, -2px) rotate(.4deg); } 75% { transform: translate(-4px, 2px) rotate(-.4deg); } }
#xm-toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 160; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--white); color: var(--bg); font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); text-align: center; }
@media (max-width: 720px) {
  .xm-games { grid-template-columns: 1fr; }
  .xm-card h2 { font-size: 32px; }
  .xm-songs li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
  .hero--xmas .xm-bar { position: static; transform: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) { #xm-sleigh { animation-duration: 3s; } .xm-shake { animation: none; } }
/* La boule des couleurs se lance et rebondit */
.theme-fab { touch-action: none; cursor: grab; }
.cbar.is-grabbed .theme-fab { cursor: grabbing; transform: scale(1.12); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }
.hero--xmas .xm-bar { position: static; transform: none; width: auto; max-width: 100%; align-self: center; }
.stk { width: min(var(--w, 96px), 19vw) !important; }