/* ─── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── UNITÉS D'ACCESSIBILITÉ (2026-08-15) ────────────────────────────────
   Ce fichier utilisait déjà largement rem (voir --r/--r-lg, .timer, main…,
   hérité de la migration depuis l'app source) — repasse complète pour les
   px restants : font-size, espacement, dimensions d'éléments d'IHM
   (interrupteur .switch/.slider, sélecteur de couleur, panneaux `<details>`)
   et plancher `font-size` à 0.75rem (12px, même valeur que Décide-moi ! —
   voir `www/apps/decide-moi/CLAUDE.md` § Accessibilité, TicTic ne cible pas
   non plus un public enfant contrairement à Daídalos). 1rem suit la taille
   de police racine du navigateur/OS, que les réglages d'accessibilité
   ("taille du texte") peuvent faire varier sans zoom de page complet.
   Restent volontairement en px (pas une question d'échelle de texte) :
   épaisseurs de bordure/outline (1-3px), dimensions de l'ascenseur thémé
   (widget OS), points de rupture des media queries. Voir `CLAUDE.md` racine
   § Accessibilité pour la portée site-wide. */

/* ─── VARIABLES PAR DÉFAUT (remplacées dynamiquement par theme-switcher.js,
     posées avant paint par le script anti-FOUC de index.html — ce bloc n'est
     qu'un filet de sécurité si le JS n'a pas encore tourné) ─────────────── */
:root {
  --bg:         #1a1a2e;
  --bg2:        #242440;
  --surface:    #242440;
  --text:       #e0e0e0;
  --text2:      rgba(255,255,255,0.86);
  --text3:      rgba(255,255,255,0.35);
  --accent:     #5b8dee;
  --accent2:    #A8C8FF;
  --accent-bg:  rgba(91,141,238,0.15);
  --border:     rgba(255,255,255,0.15);
  --border2:    rgba(255,255,255,0.28);
  --shadow:     rgba(0,0,0,0.35);
  --shadow2:    rgba(0,0,0,0.20);
  --font-display: system-ui, sans-serif;
  --font-body:    system-ui, sans-serif;
  --font-mono:    system-ui, sans-serif;
  --r:    0.5rem;
  --r-lg: 1.25rem;
  --success:        #7ee8a2;
  --success-bg:     rgba(60,180,100,0.18);
  --success-border: rgba(60,180,100,0.4);
  --bg-image:       none;

  /* Ascenseur thémé — scrollbar-color est une propriété héritée : une seule
     déclaration ici couvre le scroll de page ET tout panel interne sans
     règle plus spécifique, voir docs/scrollbar-theme-spec.md. Thumb dérivé
     de --border2 (déjà la variable utilisée par #choices-list de
     Décide-moi !) MAIS renforcé en opacité via color-mix() : --border2 est
     conçue comme un liseré translucide (alpha ~0.2-0.3 dans tous les
     thèmes, cf. tictic-theme-data.js) — bien pour une bordure de carte,
     quasi invisible comme thumb d'ascenseur (retour utilisateur du
     2026-08-06 : "l'ascenseur est invisible" sur TicTic). --text étant
     toujours opaque, le mélange garantit un thumb visible sans changer
     --border2 elle-même (qui reste correcte pour son usage d'origine). */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border2) 35%, var(--text) 65%) transparent;
}

/* Fallback WebKit/Blink historique (::-webkit-scrollbar* n'est pas hérité
   nativement comme scrollbar-color — sélecteur universel pour le même effet
   pratique sur tout élément qui scrolle, sans cibler chaque id) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border2) 35%, var(--text) 65%);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent2, var(--border2));
}

/* ─── SKIP LINK (évitement clavier) ────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--r) var(--r);
  font-size: 0.8125rem;
  font-weight: 600;
  z-index: 999;
  text-decoration: none;
  transition: top .15s;
}

.skip-link:focus-visible {
  top: 0;
}

/* ─── BODY ──────────────────────────────────────────────────────────────── */
/* display:flex + flex-direction:column, SANS centrage ici : header.js/footer.js
   s'insèrent comme enfants directs de <body> (header en premier, sticky ;
   footer en dernier) — centrer le body lui-même regrouperait header+main+footer
   au milieu de la page au lieu d'ancrer le header en haut et le footer en bas.
   Le centrage du contenu du minuteur vit sur <main> (flex:1), pas ici. */
/* Fond piloté entièrement par --bg-image (chaque thème définit sa propre
   composition dans tictic-theme-data.js, ou 'none' s'il n'a pas d'image) —
   aucune règle par thème ici, voir www/apps/tictic/CLAUDE.md § Thèmes.
   background-color reste le filet de sécurité si --bg-image est 'none' ou
   si l'image ne couvre pas tout le viewport. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: var(--bg-image);
  /* Décalée vers le bas de la hauteur du header (--header-height, posée par
     header.js) : sans ça, avec background-attachment:fixed, le centrage
     "center" se fait sur tout le viewport y compris la bande couverte par le
     header sticky — le haut de l'image (souvent la partie la plus lisible,
     ex. les cornes de assets/bg-metal.webp) se retrouvait caché dessous. */
  background-position: center top var(--header-height, 3.5rem);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* `overflow-x: hidden` + `max-width: 100%` : filet de sécurité anti-
   débordement horizontal (mobile) — scopé à `main`, PAS à `html`/`body` :
   #site-header (header.js) est un enfant direct de `body` en
   `position: sticky`, or poser `overflow-x` à autre chose que `visible`
   sur un ancêtre force `overflow-y` à passer implicitement à `auto`
   (interaction overflow-x/overflow-y de la spec CSS) — `body` devient
   alors son propre conteneur de scroll et le sticky du header, calculé
   par rapport au viewport, cesse de fonctionner (régression réelle du
   2026-08-06, header plus fixe au scroll — voir CLAUDE.md § Bugs résolus).
   `main` n'est pas un ancêtre du header (sibling direct sous `body`), donc
   sans risque ici. Ne remplace pas le fix à la source (largeur intrinsèque
   de `.time` contrainte plus bas) : ceinture ET bretelles. */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  max-width: 100%;
  padding: 2rem;
  overflow-x: hidden;
}

/* ─── TIMER CARD ────────────────────────────────────────────────────────── */
.timer {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
  padding: 2rem 2.5rem;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.time {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  /* clamp() plutôt qu'un 8rem fixe : à 8rem, "05:00" (monospace, tabular-nums)
     dépasse à lui seul ~410px de large — plus que la largeur d'un iPhone
     standard (375–414px), AVANT même le padding de .timer. C'était la cause
     racine du débordement horizontal mobile (voir § Bugs résolus,
     www/apps/tictic/CLAUDE.md) : .timer (inline-flex, largeur intrinsèque)
     grandissait au-delà du viewport, élargissant toute la page. */
  font-size: clamp(3.25rem, 16vw, 8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text);
  transition: opacity 0.3s;
}

.time.done {
  opacity: 0.4;
}

.actions {
  display: flex;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 3.5rem;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.btn:hover {
  background: var(--accent-bg);
}

.btn:active {
  background: var(--border2);
}

.btn:focus-visible,
.preset-btn:focus-visible,
summary:focus-visible,
.apply-btn:focus-visible,
.share-btn:focus-visible,
.field input:focus-visible,
.switch input:focus-visible + .slider {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ─── PRESETS ───────────────────────────────────────────────────────────── */
/* Repliable comme le panneau réglages — voir "details"/"summary" ci-dessous,
   règles génériques partagées par les deux <details> de la page. Ouvert par
   défaut (contrairement aux réglages) : ce sont des raccourcis de premier
   niveau, pas un panneau avancé secondaire. */
.presets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.preset-btn {
  padding: 0.6rem 0.4rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.preset-btn:hover {
  background: var(--accent-bg);
  border-color: var(--border2);
}

.preset-btn:active {
  background: var(--border2);
}

@media (max-width: 600px) {
  main {
    padding: 1.25rem 1rem;
    gap: 1.5rem;
  }

  .timer {
    padding: 1.5rem 1.25rem;
  }

  .presets-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 380px) {
  .presets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .warning-group-body {
    grid-template-columns: 1fr;
  }

  /* "Appliquer et lancer" (libellé le plus long des deux boutons) devient
     trop à l'étroit côte à côte avec "Appliquer" sur un très petit écran —
     empilés plutôt que compressés/tronqués. */
  .btn-row {
    flex-direction: column;
  }
}

/* ─── SETTINGS PANEL ────────────────────────────────────────────────────── */
details {
  width: min(30rem, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

summary {
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.15s;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '▶';
  font-size: 0.75rem;
  transition: transform 0.2s;
}

details[open] summary::before {
  transform: rotate(90deg);
}

summary:hover {
  color: var(--text);
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.field label {
  font-size: 0.75rem;
  color: var(--text2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input[type="number"],
.field input[type="color"],
.field input[type="range"] {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  width: 100%;
}

.field.toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.switch {
  position: relative;
  width: 2.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 0.6875rem;
  cursor: pointer;
  transition: background 0.2s;
}

.slider::before {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: 0.1875rem;
  top: 0.1875rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.switch input:checked + .slider {
  background: var(--accent);
}

.switch input:checked + .slider::before {
  transform: translateX(1rem);
}

.apply-btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--accent-bg);
  color: var(--accent2);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.apply-btn:hover {
  background: var(--border2);
}

/* "Appliquer et lancer" — même palette que .apply-btn (déjà vérifiée par
   Lighthouse sur les 9 thèmes, voir CLAUDE.md § Vérifications réelles
   effectuées) : pas de nouvelle couleur risquant un échec de contraste,
   juste une bordure plus marquée + texte en gras pour signaler que c'est
   désormais l'action par défaut (déclenchée par Entrée depuis n'importe
   quel champ du panneau, voir tictic.js). */
.apply-btn--primary {
  border-width: 2px;
  border-color: var(--accent2);
  font-weight: 700;
}

/* Les 2 boutons "Appliquer"/"Appliquer et lancer" côte à côte, le conteneur
   prend la place d'un item de grille pleine largeur (comme le faisait
   .apply-btn seul auparavant). */
.btn-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
}

.btn-row .apply-btn {
  flex: 1;
}

/* Bouton "Partager" — désormais un sibling direct de .timer (voir
   index.html), pas un enfant de .settings-grid : centré par main
   (align-items:center), pas de grid-column ni de largeur imposée ici. */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.share-btn:hover {
  background: var(--accent-bg);
  color: var(--text);
}

.share-btn.copied {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}

/* ─── WARNING COLOR PREVIEW ─────────────────────────────────────────────── */
.color-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-row input[type="color"] {
  width: 2.2rem;
  height: 2rem;
  padding: 0.125rem;
  cursor: pointer;
  flex-shrink: 0;
}

.color-row input[type="text"] {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

/* ─── ALERT GROUP (cadre activable) ─────────────────────────────────────── */
.warning-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.warning-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.warning-group-header label:first-child {
  font-size: 0.75rem;
  color: var(--text2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.warning-group-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  transition: opacity 0.15s;
}

/* Champs grisés mais toujours visibles quand le cadre est désactivé — l'état
   `disabled` posé en JS (tictic.js) empêche déjà toute interaction, cette
   opacité n'est qu'un signal visuel supplémentaire. */
.warning-group.disabled .warning-group-body {
  opacity: 0.45;
}

/* ─── PUB (optionnelle) ─────────────────────────────────────────────────
   Voir docs/ads-integration-spec.md + CLAUDE.md § Pub. house.js pose lui-même
   le style de sa carte (.house-ad-card, injecté par ce script) — ce bloc ne
   fait que réserver/centrer l'emplacement, même largeur que .details pour
   rester visuellement cohérent avec les autres panneaux plutôt que de créer
   un encart qui détonne. window.ads réserve déjà une hauteur minimale sur
   #ad-slot-banner lui-même (anti-CLS, posée en JS) — pas besoin de la
   dupliquer ici. */
.ad-slot-wrap {
  width: min(30rem, 100%);
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

@media (max-width: 600px) {
  .ad-slot-wrap {
    padding: 0 1rem 1.5rem;
  }
}

/* house.js atténue sa tagline par opacity:0.75 (--text sur --bg2) — sur le
   thème Zen (le seul dont --text n'a pas une marge de contraste généreuse
   contre --bg2), cette dilution repassait sous 4.5:1 (4.34:1 mesuré, audit
   Lighthouse 2026-08-12, voir CLAUDE.md § Accessibilité). Neutralisée ici
   plutôt que de recolorer tout le thème Zen pour un seul élément dilué :
   --text vaut déjà 8.13:1 contre --bg2 en pleine opacité. house.js lui-même
   non modifié (composant partagé), #ad-slot-banner (ID réel du conteneur)
   suffit à gagner en spécificité sur sa règle .house-ad-card-tagline. */
#ad-slot-banner .house-ad-card-tagline {
  opacity: 1;
}