/* Interface inspiree de makette_gpt1. Tous les fonds sont dessines en CSS. */
:root {
  --sidebar:224px; --topbar:78px; --contentPad:30px; --radius:20px;
  --bg:#f3f9ff; --bg2:#f8fbff; --text:#081638; --muted:#586e95;
  --line:#e0eaf7; --shadow:0 5px 18px rgba(41,88,147,.055);
  --stage:#fff; --stageInk:var(--text); --stageMuted:var(--muted);
  --stageLine:var(--line); --stageFill:var(--surface3);
  --stageFillHover:var(--accentSoft); --stageTrack:var(--track);
}
[data-accent="blue"] {--accent:#0065ed;--accent2:#227dff;--accentSoft:#e8f2ff;--accentTint:#f6faff;--accentLine:#d1e3fc;--accentLine2:#589cff;--accentRing:rgba(0,101,237,.16)}
[data-theme="dark"] {
  --bg:#0c1626;--bg2:#101e32;--text:#edf3ff;--muted:#adbed8;
  --line:#293d59;--stage:var(--surface);--shadow:0 5px 20px rgba(0,0,0,.15);
}
[data-theme="dark"][data-accent="blue"] {--accent:#83b8ff;--accent2:#a8ceff;--accentSoft:#193454;--accentTint:#13263d;--accentLine:#315479;--accentLine2:#74aaf1;--onAccent:#0a1526}
body {background:linear-gradient(145deg,var(--bg2),var(--bg));}
.topbar {background:var(--surface);color:var(--text);border-bottom:1px solid var(--line);box-shadow:none;gap:30px;padding:0 28px;}
.brand {gap:12px}.brand strong {font-size:22px;letter-spacing:-.045em}
.logo {width:42px;height:42px;background:linear-gradient(155deg,#81d4ff,#087aff 55%,#0053ee);box-shadow:none;flex-shrink:0}
.logo:before {width:22px;height:22px;left:8px;top:11px;border:3px solid white;border-radius:50%;background:transparent}
.logo:after {width:3px;height:10px;left:20px;top:14px;background:white;border-radius:2px;box-shadow:0 -8px 0 -0.2px white}
.topnav {justify-content:center;gap:24px;color:var(--muted);font-size:13px;white-space:nowrap}
.topnav a {padding-block:27px;transition:color .15s}.topnav a:hover {color:var(--accent)}
.topnav .pro-link {display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:750}
.premium-icon {color:#b77a06;flex-shrink:0}
[data-theme="dark"] .premium-icon {color:#ffd16b}
.btn-login {display:inline-flex;align-items:center;min-height:42px;border-radius:99px;padding:10px 20px;background:var(--accent);white-space:nowrap}
.lang {border:1px solid var(--line);border-radius:99px;padding:10px 13px;white-space:nowrap}
.mobile-menu-btn {color:var(--text)}
.theme-btn {color:var(--text);border-color:var(--line);background:var(--surface3)}
.sidebar {padding:24px 14px;gap:28px}.side-nav {gap:5px}
.side-link {font-size:13px;min-height:46px;padding:11px 12px;color:var(--muted);border-radius:12px}
.side-link .ico {color:var(--accent)}.side-link.active {font-weight:750;box-shadow:inset 3px 0 var(--accent);outline:0}
.side-cta {text-align:left;padding:18px}.side-cta p {font-size:12px;line-height:1.6}.side-cta strong {font-size:14px}.side-cta .btn {border-radius:99px;min-height:40px}
.content {width:100%;max-width:1720px;margin-inline:auto;padding:var(--contentPad)}
.page-head {position:relative;justify-content:center;text-align:center;margin:8px 0 28px;min-height:90px;padding-inline:100px}
.title-wrap {justify-content:center}.page-head .title-icon {display:none}
h1 {font-size:clamp(30px,3.2vw,46px);letter-spacing:-.045em;margin-bottom:10px}
.subtitle {font-size:15px;line-height:1.6}.page-head .fs-btn {position:absolute;inset-inline-end:0;top:16px}
.card.pad {padding:24px}.section-title {margin-bottom:20px}.section-title h2 {font-size:19px;letter-spacing:-.025em}
.grid-main-side {grid-template-columns:minmax(0,1fr) 360px;gap:22px}.stack {gap:22px;align-content:start}
/* Les contenus imbriques doivent pouvoir retrecir dans leur colonne. */
.grid-main-side>*,.grid-2>*,.grid-3>*,.metric-grid>*,.form-grid>*,.price-choice>*,.checkout>*,.quick-grid>*,.stack>*,.section-title>*,.list-row>* {min-width:0}
.grid-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3 {grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr))}
.card,.section-title,.stage-head,.book,.tab,.metric,.quick,.list-row {overflow-wrap:anywhere}
.section-title {flex-wrap:wrap}
.section-title h2 {flex:1 1 160px}
.section-title .badge {flex-shrink:0}
.quick-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr))}
.quick-grid>.quick:last-child {grid-column:auto}
.step-builder {container-type:inline-size}
@container (max-width:760px) {
  .step-fields {grid-template-columns:minmax(0,1fr)}
  .step-time {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (max-width:450px) {
  .builder-head {grid-template-columns:minmax(0,1fr)}
  .cover-drop {height:132px}
}
.section-title .inline-form,.section-title .icon-btn {flex-shrink:0}
.checkout {grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
.price-choice {grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.reading-columns {grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* La taille d'un chrono depend de sa carte, pas de la largeur de l'ecran. */
[data-multi]>.multi-main>.grid-2 {grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.multi-timer {container-type:inline-size;min-width:0}
.multi-timer .section-title h2 {margin:0}
.multi-timer .timer,.is-fullscreen .multi-timer .timer {font-size:clamp(24px,16cqw,80px);letter-spacing:-.025em;white-space:nowrap}
.multi-timer .timer-labels {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:9px}
.multi-timer .btn-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.multi-timer .btn-row .btn {min-width:0;padding-inline:8px;font-size:12px}
.multi-summary {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.multi-summary .quick {min-width:0;padding:12px 6px}
.multi-summary [data-multi-total] {font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.multi-add-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.6fr) auto;gap:12px}
.multi-add-fields .input {min-width:0}
.stage-duo {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.stage .stage-duo .timer,.is-fullscreen .stage .stage-duo .timer {font-size:clamp(26px,6.4cqw,100px)}
.form-field label {font-size:12px}.input {border-radius:12px;height:46px;min-width:0;width:100%}
.btn {border-radius:99px;min-height:44px}.badge {font-size:11px;padding:6px 10px}
.guest-banner {background:var(--surface);padding:12px 18px;box-shadow:none;gap:12px;margin-bottom:22px}
.guest-banner .guest-ico {width:38px;height:38px;font-size:20px}.guest-banner strong {font-size:13px}.guest-banner p {font-size:12px}
.stage {margin:0 0 24px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--stage);box-shadow:var(--shadow);min-width:0;container-type:inline-size;}
.stage .timer {font-size:clamp(46px,13cqw,132px);letter-spacing:-.055em;line-height:1.15;margin:24px auto 0;font-weight:750}
.stage .timer.is-long {font-size:clamp(28px,14cqw,150px);letter-spacing:-.05em}
.stage .timer-labels {gap:0;justify-content:space-evenly;font-size:12px;font-weight:500;letter-spacing:0;margin:10px auto 0;max-width:650px}
.stage-state {border-radius:99px;font-size:11px;color:var(--stageMuted)}.stage-clock {font-size:12px}.stage-clock:before {content:""}
.controls {max-width:720px;gap:12px;margin-top:28px}.controls .btn {border-radius:99px;min-height:52px;font-weight:650}
.controls .btn.is-primary {background:#00bc83;color:#052e24;border-color:transparent;box-shadow:0 5px 14px rgba(0,188,131,.15)}
.controls .btn.is-primary:hover:not(:disabled) {background:#19d499}
.stopwatch-workspace {display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:22px;margin-bottom:22px;align-items:stretch}
.stopwatch-workspace .stage {margin:0;padding:28px 24px}
.stopwatch-workspace .stage .timer {margin-top:34px}
.laps-card {min-width:0}.laps-card .list {max-height:340px;overflow-y:auto;gap:10px}
.laps-card .list-row {border:1px solid var(--line);border-radius:12px;padding:15px 12px;gap:8px}
.laps-card .list-row strong,.laps-card .list-row .right {font-size:13px;font-variant-numeric:tabular-nums}
.empty-state {padding:28px 15px;font-size:13px;line-height:1.7;background:var(--bg2);border-style:solid}
.list-row strong,.list-row .right {font-size:12px}.list-row small {font-size:11px}
.tool-shortcuts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}
.tool-shortcut {position:relative;display:grid;padding:22px;gap:6px;transition:border-color .15s,transform .15s}
.tool-shortcut:hover {border-color:var(--accent);transform:translateY(-2px)}
.shortcut-icon {display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accentSoft);color:var(--accent);font-size:30px;margin-bottom:8px}
.tool-shortcut strong {font-size:18px;letter-spacing:-.025em}.tool-shortcut small {color:var(--muted);font-size:12px;padding-inline-end:25px;line-height:1.5}
.shortcut-arrow {position:absolute;inset-inline-end:20px;bottom:24px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accentSoft);color:var(--accent);font-size:22px}
[dir="rtl"] .shortcut-arrow {transform:scaleX(-1)}
/* Le Pomodoro conserve ses reglages et ses etats dans un cadran rouge. */
[data-pomodoro] .tool-main {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
[data-pomodoro] .tool-main>.stage {--stageInk:#fff;--stageMuted:#f5d7d5;--stageLine:#ffffff40;--stageFill:#ffffff12;--stageFillHover:#ffffff24;--stageTrack:#ffffff25;background:linear-gradient(140deg,#a63834,#581b1b 60%,#300e12);margin:0;align-self:start;min-height:460px;padding:28px}
[data-pomodoro] .stage .timer {font-size:clamp(60px,23cqw,118px);font-weight:550}
[data-pomodoro] .stage .timer:after {content:"🍅";display:block;font-size:52px;line-height:1.2;letter-spacing:0;margin:8px auto}
[data-pomodoro] .tool-body {grid-template-columns:minmax(0,1fr);align-content:start}
[data-pomodoro] .stage-head>strong {font-size:18px}
.cooking-page .stage {--stageInk:var(--text);--stageMuted:var(--muted);background:linear-gradient(135deg,var(--warm1),var(--surface));}
.cooking-page .recipe {border-radius:16px}.cooking-page .recipe strong {font-size:13px}.cooking-page .recipe small {font-size:11px}
.stage .cd-display.is-warning {color:#ae6100}.stage .cd-display.is-final,.stage .cd-display.is-overtime {color:#c82e3e}
[data-theme="dark"] .stage .cd-display.is-warning {color:#ffbe63}
[data-theme="dark"] .stage .cd-display.is-final,[data-theme="dark"] .stage .cd-display.is-overtime {color:#ff8f8f}
.benefits {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:30px 0 8px;margin-top:30px;border-top:1px solid var(--line)}
.benefits>div {display:flex;align-items:center;gap:14px}.benefits>div+div {border-left:1px solid var(--line);padding-left:22px}
.benefit-icon {color:var(--accent);font-size:35px;flex-shrink:0}.benefits strong {font-size:14px}.benefits p {font-size:12px;color:var(--muted);line-height:1.5;margin:5px 0 0}
a:focus-visible,button:focus-visible {outline:3px solid var(--accent);outline-offset:4px}
#chrono-session {scroll-margin-top:100px}
.is-fullscreen .stopwatch-workspace {grid-template-columns:1fr;width:100%}.is-fullscreen .laps-card,.is-fullscreen .tool-shortcuts {display:none}
.is-fullscreen .stage {margin-inline:0;width:100%}.is-fullscreen .stage .timer.is-long {font-size:clamp(28px,11cqw,190px)}
[data-pomodoro].is-fullscreen .tool-main {display:block}
@media(max-width:1300px) {
  :root {--sidebar:205px;--contentPad:22px}
  .topbar {gap:20px;padding-inline:22px}.topnav {gap:16px}.brand strong {font-size:19px}
  .side-link {justify-content:flex-start}.side-link span:not(.ico) {display:inline}.side-cta {display:block}
  .stopwatch-workspace {grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)}
}
@media(max-width:1100px) {
  .topnav {display:none}.top-actions {margin-left:auto}
  .stopwatch-workspace {grid-template-columns:1fr}.laps-card .list {max-height:260px}
  [data-pomodoro] .tool-main {grid-template-columns:1fr}.grid-main-side {grid-template-columns:1fr}
  .checkout {grid-template-columns:1fr}
  .grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px) {
  :root {--topbar:70px;--contentPad:20px}
  .app-shell {grid-template-columns:1fr}.sidebar {width:260px}.mobile-menu-btn {display:block}
  .page-head {padding-inline:48px}.page-head .fs-btn {padding:10px}.page-head .fs-btn [data-fullscreen-label] {display:none}
  .benefits {gap:14px}.benefits>div {gap:8px}.benefits>div+div {padding-left:14px}.benefit-icon {font-size:28px}
  .grid-3 {grid-template-columns:1fr}
}
@media(max-width:700px) {
  .stage-duo {grid-template-columns:1fr}
  .stage .stage-duo .timer,.is-fullscreen .stage .stage-duo .timer {font-size:clamp(26px,13cqw,100px)}
  .multi-add-fields {grid-template-columns:1fr}
}
@media(max-width:600px) {
  :root {--topbar:64px;--contentPad:14px;--radius:18px}
  .topbar {height:var(--topbar);padding-inline:14px;gap:10px}.brand {gap:8px;margin:0}.brand strong {font-size:17px}.logo {width:38px;height:38px}.logo:before {left:6px;top:9px}.logo:after {left:18px;top:12px}
  .top-actions {gap:6px}.top-actions .btn-login {display:none}
  .page-head {margin:12px 0 22px;padding:0 35px;min-height:90px}.page-head h1 {font-size:30px}.subtitle {font-size:13px}
  .guest-banner {grid-template-columns:1fr;padding:14px;gap:10px}.guest-banner .guest-ico {display:none}.guest-actions .btn {flex:1}
  .stage,.stopwatch-workspace .stage {padding:20px 16px}.stage .timer-labels {font-size:10px}.stage .timer.is-long {font-size:14cqw}
  .card.pad {padding:18px}.section-title h2 {font-size:18px}.stopwatch-workspace {gap:16px}
  .controls {gap:10px}.controls .btn {min-height:48px;font-size:12px;padding:10px}
  .tool-shortcuts {gap:9px}.tool-shortcut {padding:14px 8px;justify-items:center;text-align:center;gap:5px}.shortcut-icon {width:42px;height:42px;font-size:25px;margin-bottom:5px}
  .tool-shortcut strong {font-size:12px}.tool-shortcut small,.shortcut-arrow {display:none}
  [data-pomodoro] .tool-main {gap:16px}[data-pomodoro] .tool-main>.stage {min-height:0;padding:24px 20px}
  .benefits {grid-template-columns:1fr;gap:18px;margin-top:24px;padding:24px 8px}.benefits>div+div {border:0;padding:0}.benefits>div {gap:14px}
  .mobile-bottom {height:64px;box-shadow:0 -4px 20px rgba(41,88,147,.04)}
  .grid-main-side {display:grid;grid-template-columns:minmax(0,1fr)}
  .grid-main-side aside {margin-top:0}
  .multi-summary>.quick:last-child {grid-column:auto}
}
@media(prefers-reduced-motion:reduce) {.tool-shortcut,.topnav a {transition:none}.tool-shortcut:hover {transform:none}}

/* Pied de page du site : outils, guides, informations. Dans la colonne de
   contenu, sous les arguments, sur toutes les pages du gabarit principal. */
.site-footer {margin-top:34px;padding:30px 0 12px;border-top:1px solid var(--line);color:var(--text)}
.site-footer-cols {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site-footer h2 {margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.site-footer ul {list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a {color:var(--text);font-size:15px;font-weight:600;text-decoration:none}
.site-footer a:hover, .site-footer a:focus-visible {color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.site-footer-base {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:700px) {
  .site-footer-cols {grid-template-columns:1fr 1fr}
  .site-footer-cols > nav:last-child {grid-column:1 / -1}
  .site-footer {padding-bottom:96px}
}

/* Outils : l'historique recent dans une colonne droite qui reste visible au
   defilement. Sous 1200px, elle passe sous l'outil ; en plein ecran, elle
   disparait pour laisser tout l'espace au cadran. */
.tool-layout {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.tool-main {min-width:0;container-type:inline-size}
.tool-body {display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start}
.tool-recent {position:sticky;top:calc(var(--topbar) + 18px);display:grid;gap:22px;align-content:start;min-width:0;max-height:calc(100vh - var(--topbar) - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-inline:4px;margin-inline:-4px}
.tool-main .tool-shortcuts {grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@container (max-width:860px) {.stopwatch-workspace {grid-template-columns:minmax(0,1fr)}}
@media(max-width:1600px) {[data-pomodoro] .tool-main {grid-template-columns:minmax(0,1fr)}}
.is-fullscreen .tool-layout {display:block}.is-fullscreen .tool-recent {display:none}
@media(max-width:1200px) {
  .tool-layout {grid-template-columns:minmax(0,1fr)}
  .tool-recent {position:static;max-height:none;overflow:visible;padding-inline:0;margin-inline:0}
}

/* Une meme famille d'icones pour les cartes, titres et descriptions. */
.tool-icon {display:grid;place-items:center;flex:0 0 auto;width:64px;height:64px;border-radius:18px;background:var(--blueSoft);color:var(--accent);border:1px solid var(--line)}
.tool-icon .tool-svg {display:block;width:34px;height:34px}
.tool-icon--countdown,.tool-icon--cooking {background:var(--orangeSoft);color:var(--orange)}
.tool-icon--multi-timer {background:var(--accentSoft);color:var(--accent)}
.tool-icon--duel,.tool-icon--reading {background:var(--blueSoft);color:var(--blue)}
.tool-icon--breathing,.tool-icon--sport,.tool-icon--race {background:var(--greenSoft);color:var(--green)}
.tool-icon--pomodoro {background:var(--redSoft);color:var(--red)}
.fs-page>.page-head {direction:ltr;justify-content:space-between;text-align:left;padding:0;gap:24px}
.fs-page>.page-head .title-wrap {display:flex;align-items:center;justify-content:flex-start;gap:18px;min-width:0;flex:1}
.fs-page>.page-head .title-icon {display:grid;width:64px;height:64px}
.fs-page>.page-head .title-wrap>div:last-child {min-width:0;text-align:left;overflow-wrap:anywhere}
[dir="rtl"] .fs-page>.page-head .title-wrap>div:last-child {direction:rtl}
.fs-page>.page-head h1 {margin:0 0 8px}
.fs-page>.page-head .fs-btn {position:static;align-self:center;margin:0}
.tool-description {display:flex;align-items:flex-start;gap:20px;padding:26px;margin-top:26px;min-width:0}
.tool-description>div {min-width:0}
.tool-description h2 {font-size:20px;line-height:1.3;margin:0 0 8px}
.tool-description p {font-size:16px;line-height:1.75;color:var(--muted);margin:0;max-width:85ch;overflow-wrap:anywhere}
.fs-page:fullscreen .tool-description,.is-fullscreen .tool-description,
.home-tool-directory:fullscreen,.is-fullscreen .home-tool-directory {display:none}
@media(max-width:600px) {
  .fs-page>.page-head {gap:12px;margin-bottom:24px}
  .fs-page>.page-head .title-wrap {gap:12px;align-items:flex-start}
  .fs-page>.page-head .title-icon {width:46px;height:46px;border-radius:13px}
  .fs-page>.page-head .title-icon .tool-svg {width:27px;height:27px}
  .fs-page>.page-head h1 {font-size:26px}
  .fs-page>.page-head .fs-btn {align-self:flex-start;min-width:40px;padding-inline:8px}
  .tool-description {padding:20px;gap:14px;flex-direction:column}
  .tool-description .tool-icon {width:48px;height:48px;border-radius:14px}
  .tool-description .tool-svg {width:28px;height:28px}
}