/* ==========================================================================
   Calcul Heures & Dates — design system
   Direction : outil de productivité clair et précis. Papier légèrement cassé, encre anthracite,
   un seul accent bleu MTiMo réservé aux actions, aux états sélectionnés et aux zones de résultat.
   Seuls les calculateurs sont des cartes ; le reste est posé sur le papier.

   Mise en page
   ┌ en-tête : logo ······························ [Heures ▾] [Dates ▾] ┐
   │ accueil : titre + phrase  /  [calculateur] [calculateur]            │
   │ outil   : [carte outil + contenu + FAQ ............] [index latéral]│
   └ pied : marque · Heures · Dates · Le site ──────────────────────────┘
   ========================================================================== */

/* Polices auto-hébergées (licence OFL dans assets/fonts) ; sous-ensemble latin, qui couvre le français.
   shortcut: pas de latin-ext (ő, ł…), à ajouter si le site sert d'autres langues. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/fraunces-latin-400.woff2") format("woff2");
}

/* --- Primitives --- */
:root {
  /* Neutres froids et bleu de la charte MTiMo (mtimo.fr). */
  --papier-50: #fafafc;
  --blanc: #ffffff;
  --gris-100: #f0f0f4;
  --gris-200: #e3e3ea;
  --gris-400: #8c8c98;
  --gris-600: #5c5c68;
  --anthracite: #101014;
  --bleu-50: #eef1ff;
  --bleu-100: #dfe5ff;
  --bleu-600: #3d5cff;
  --bleu-700: #2f46c8;
  --rouge-50: #fdecea;
  --rouge-700: #b42318;
  --ambre-50: #fff3d6;
  --ambre-800: #7a4f00;

  /* --- Sémantique --- */
  --fond: var(--papier-50);
  --surface: var(--blanc);
  --surface-2: var(--gris-100);
  --texte: var(--anthracite);
  --texte-2: var(--gris-600);
  --filet: var(--gris-200);
  --filet-fort: var(--gris-400);
  --accent: var(--bleu-600);
  --accent-fort: var(--bleu-700);
  --accent-doux: var(--bleu-50);
  --accent-doux-2: var(--bleu-100);
  --marque: var(--bleu-600);
  --sur-accent: var(--blanc);
  --erreur: var(--rouge-700);
  --erreur-fond: var(--rouge-50);
  --attention: var(--ambre-800);
  --attention-fond: var(--ambre-50);
  --anneau: color-mix(in srgb, var(--accent) 32%, transparent);
  --ombre-carte: 0 1px 2px rgb(16 16 20 / 5%), 0 4px 16px rgb(16 16 20 / 4%);
  --ombre-flottant: 0 16px 40px rgb(16 16 20 / 12%), 0 2px 6px rgb(16 16 20 / 6%);

  /* --- Typographie --- */
  --police: "Geist", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --police-marque: "Fraunces", Georgia, serif;
  --t-13: .8125rem;
  --t-15: .9375rem;
  --t-17: 1.0625rem;
  --t-19: 1.1875rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;
  --t-h1: clamp(2rem, 4.2vw, 2.75rem);
  --t-resultat: clamp(2.5rem, 6vw, 3.5rem);

  /* --- Espace (pas de 4 px), rayons, durées --- */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --r-champ: 10px;
  --r-carte: 16px;
  --duree: .15s;
  --gouttiere-g: max(16px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(16px, env(safe-area-inset-right, 0px));
  --largeur: 72rem;

  /* --- Composants --- */
  --champ-h: 52px;
  --champ-fond: #fdfdfe;
  --resultat-fond: var(--accent-doux);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0a0a0c; --surface: #141418; --surface-2: #1e1e24;
    --texte: #f5f5f8; --texte-2: #a2a2ac; --filet: #26262d; --filet-fort: #5c5c68;
    --accent: #8aa0ff; --accent-fort: #b0c0ff; --accent-doux: #151a33; --accent-doux-2: #1d2448; --sur-accent: #0a0f2e;
    --erreur: #ff8f84; --erreur-fond: #3a1714; --attention: #f2c25b; --attention-fond: #33270c;
    --ombre-carte: none; --ombre-flottant: 0 16px 40px rgb(0 0 0 / 45%);
    --champ-fond: #101014;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0a0a0c; --surface: #141418; --surface-2: #1e1e24;
  --texte: #f5f5f8; --texte-2: #a2a2ac; --filet: #26262d; --filet-fort: #5c5c68;
  --accent: #8aa0ff; --accent-fort: #b0c0ff; --accent-doux: #151a33; --accent-doux-2: #1d2448; --sur-accent: #0a0f2e;
  --erreur: #ff8f84; --erreur-fond: #3a1714; --attention: #f2c25b; --attention-fond: #33270c;
  --ombre-carte: none; --ombre-flottant: 0 16px 40px rgb(0 0 0 / 45%);
  --champ-fond: #101014;
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e-5); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 var(--t-17)/1.65 var(--police);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-fort); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--texte); text-wrap: balance; font-weight: 650; letter-spacing: -.02em; }
h1 { font-size: var(--t-h1); line-height: 1.08; margin: 0; letter-spacing: -.03em; }
h2 { font-size: var(--t-28); line-height: 1.2; margin: var(--e-8) 0 var(--e-4); }
h3 { font-size: var(--t-19); line-height: 1.35; margin: var(--e-6) 0 var(--e-2); letter-spacing: -.01em; }
p, li { max-width: 66ch; }
p { margin: 0 0 var(--e-4); }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
li + li { margin-top: var(--e-2); }
li::marker { color: var(--texte-2); }
strong { font-weight: 650; }
code { font: 500 .9em/1 var(--police); background: var(--surface-2); padding: .15em .4em; border-radius: 5px; }
small { font-size: var(--t-15); color: var(--texte-2); }
sup { line-height: 0; }
.chiffres, table, input, .grand, .stats dd { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: var(--gouttiere-g); top: var(--e-2); z-index: 50; padding: var(--e-2) var(--e-4); background: var(--surface); border-radius: var(--r-champ); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */
.entete { position: relative; z-index: 20; background: var(--fond); border-bottom: 1px solid var(--filet); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--texte); text-decoration: none; }
.logo:hover { color: var(--texte); }
.logo-icone { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; background: #0a0a0c; color: var(--marque); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.logo-texte { display: flex; flex-direction: column; gap: .3rem; }
.logo-nom { font: 400 1.4rem/1 var(--police-marque); letter-spacing: -.02em; }
.logo-nom b { font-weight: inherit; color: var(--marque); }
.logo-sous { font-size: .64rem; font-weight: 650; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); }
.pied .logo { color: var(--texte); }

.nav { display: flex; gap: var(--e-1); }
.entete-actions { display: flex; align-items: center; gap: var(--e-1); }
.theme-bascule {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  border: 0; border-radius: var(--r-champ); background: none; color: var(--texte-2); cursor: pointer;
  transition: background-color var(--duree), color var(--duree);
}
.theme-bascule:hover { background: var(--surface-2); color: var(--texte); }
.theme-bascule .i-soleil { display: none; }
:root[data-theme="dark"] .theme-bascule .i-soleil { display: block; }
:root[data-theme="dark"] .theme-bascule .i-lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-bascule .i-soleil { display: block; }
  :root:not([data-theme="light"]) .theme-bascule .i-lune { display: none; }
}
.nav-cat { position: static; }
.nav-cat > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .85rem;
  border-radius: var(--r-champ); font-weight: 550; font-size: var(--t-15); color: var(--texte);
  transition: background-color var(--duree), color var(--duree);
}
.nav-cat > summary::-webkit-details-marker { display: none; }
.nav-cat > summary svg { color: var(--texte-2); transition: transform var(--duree); }
.nav-cat > summary:hover { background: var(--surface-2); }
.nav-cat[open] > summary { background: var(--accent-doux); color: var(--accent-fort); }
.nav-cat[open] > summary svg { transform: rotate(180deg); color: currentColor; }
.nav-cat.actif > summary { color: var(--accent-fort); }
.nav-panneau {
  position: absolute; top: calc(100% + 6px); right: var(--gouttiere-d); width: min(34rem, calc(100vw - 32px));
  padding: var(--e-3); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-flottant);
  animation: panneau .16s ease-out;
}
@keyframes panneau { from { opacity: 0; transform: translateY(-4px); } }
.nav-panneau ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
.nav-panneau li { margin: 0; max-width: none; }
.nav-panneau a { display: block; height: 100%; padding: .7rem .85rem; border-radius: var(--r-champ); color: var(--texte); text-decoration: none; }
.nav-panneau a strong { display: block; font-weight: 600; font-size: var(--t-15); }
.nav-panneau a span { display: block; font-size: var(--t-13); line-height: 1.4; color: var(--texte-2); margin-top: .15rem; }
.nav-panneau a:hover { background: var(--surface-2); }
.nav-panneau a[aria-current="page"] { background: var(--accent-doux); }
.nav-panneau a[aria-current="page"] strong { color: var(--accent-fort); }
@media (max-width: 40rem) {
  .nav-panneau { left: var(--gouttiere-g); right: var(--gouttiere-d); width: auto; max-height: calc(100dvh - 90px); overflow-y: auto; }
  .nav-panneau ul { grid-template-columns: 1fr; }
  .nav-panneau a { padding: .8rem .85rem; }
  .nav-cat > summary { padding: 0 .55rem; }
  .entete-actions, .nav { gap: 0; }
  .theme-bascule { width: 40px; }
  .logo { gap: .5rem; }
  .logo-icone { width: 32px; height: 32px; }
  .logo-nom { font-size: 1.2rem; }
  .entete-ligne { gap: var(--e-2); }
}
/* Très petits écrans : l'icône du logo cède la place au menu et à la bascule de thème. */
@media (max-width: 26rem) {
  .entete .logo-icone { display: none; }
  .logo-nom { font-size: 1.1rem; }
  .logo-sous { font-size: .58rem; letter-spacing: .12em; }
}
/* Écrans de 320 à 360 px : on resserre le menu pour que l'en-tête tienne sans défilement horizontal. */
@media (max-width: 22.5rem) {
  .entete-ligne { gap: .375rem; }
  .nav-cat > summary { padding: 0 .3rem; gap: .25rem; }
  .theme-bascule { width: 36px; }
  .logo-nom { font-size: 1.02rem; }
}

/* ==========================================================================
   Mise en page
   ========================================================================== */
.page { padding-top: var(--e-6); padding-bottom: var(--e-8); }
.page-outil { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--e-8); align-items: start; }
.page-outil > main, .page-simple > main { min-width: 0; }
.page-simple > main { max-width: 46rem; }
@media (max-width: 64rem) { .page-outil { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.fil { font-size: var(--t-15); color: var(--texte-2); margin-bottom: var(--e-4); }
.fil-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-4); }
.fil-ligne .fil { margin: 0; }
.partager {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .85rem;
  border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--surface); color: var(--texte);
  font: 550 var(--t-15)/1 var(--police); cursor: pointer; transition: background-color var(--duree), border-color var(--duree);
}
.partager:hover { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-fort); }
.partager svg { color: var(--accent); }
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: var(--accent); text-decoration: underline; }
.fil span[aria-hidden] { margin: 0 .35rem; }
.autres-annees { margin: var(--e-5) 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-champ); background: var(--surface-2); font-weight: 550; }
.autres-annees a { color: var(--accent-fort); }
.chapeau { font-size: var(--t-19); line-height: 1.55; color: var(--texte-2); margin: var(--e-4) 0 var(--e-6); max-width: 54ch; }

/* Accueil */
.intro { padding: var(--e-5) 0 var(--e-6); max-width: 44rem; }
.intro .chapeau { margin-bottom: 0; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); align-items: stretch; }
.duo > .outil { display: flex; flex-direction: column; }
.duo > .outil > .resultat { margin-top: auto; }
.duo > .outil > form { margin-bottom: var(--e-5); }
@media (max-width: 56rem) { .duo { grid-template-columns: minmax(0, 1fr); } }
.lecture { max-width: 46rem; }

/* ==========================================================================
   Calculateur (carte)
   ========================================================================== */
.outil {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte); padding: var(--e-5); margin: 0 0 var(--e-6); overflow: hidden;
}
.duo > .outil { margin: 0; }
.outil > h2, .outil-titre { display: flex; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-5); font-size: var(--t-19); letter-spacing: -.015em; }
.outil-titre svg { flex: none; color: var(--accent); }
.outil-titre-texte { display: flex; flex-direction: column; }
.outil-titre small { font-weight: 400; font-size: var(--t-15); letter-spacing: 0; }

.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--e-4); align-items: end; }
.champs + .champs, .champs + .ligne-options { margin-top: var(--e-4); }
.champ { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
.champ-large > input[type="month"], .champ-large > select { max-width: 18rem; }
.champ > label, .etiquette, .segment legend { font-size: var(--t-15); font-weight: 550; color: var(--texte); line-height: 1.3; }
.etiquette { display: block; margin-bottom: .4rem; }
.aide { font-size: var(--t-13); color: var(--texte-2); line-height: 1.4; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type="time"], input[type="date"], input[type="month"], input[type="datetime-local"],
input[type="number"], input[type="text"], select, textarea {
  width: 100%; min-height: var(--champ-h); padding: .6rem .85rem;
  font-size: var(--t-17); font-weight: 500; color: var(--texte);
  background: var(--champ-fond); border: 1px solid var(--filet-fort); border-radius: var(--r-champ);
  transition: border-color var(--duree), box-shadow var(--duree), background-color var(--duree);
}
input::placeholder, textarea::placeholder { color: var(--texte-2); opacity: .8; font-weight: 400; }
input:hover, select:hover, textarea:hover { border-color: var(--texte-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--anneau);
}
[aria-invalid="true"] { border-color: var(--erreur) !important; }
[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--erreur) 25%, transparent) !important; }
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
select { appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2358625d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; }
textarea { min-height: 11rem; resize: vertical; line-height: 1.7; }

/* Contrôle segmenté (choix exclusif) */
.segment { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.segment legend { padding: 0; margin: 0 0 .4rem; float: left; width: 100%; }
.segment-options { clear: both; margin: 0; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; background: var(--surface-2); border-radius: 12px; min-height: var(--champ-h); }
.segment-options label { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 9px; font-size: var(--t-15); font-weight: 550; color: var(--texte-2); cursor: pointer; white-space: nowrap; transition: background-color var(--duree), color var(--duree), box-shadow var(--duree); }
.segment-options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment-options label:hover { color: var(--texte); }
.segment-options label:has(input:checked) { background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 0 0 1px var(--filet); }
.segment-options label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--anneau), 0 0 0 1px var(--accent); }

/* Cases à cocher et options */
.ligne-options { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.case { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; font-size: var(--t-15); font-weight: 500; }
.case input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* Boutons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-5); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.1rem; border-radius: var(--r-champ);
  font-size: var(--t-15); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--sur-accent); background: var(--accent); border: 1px solid var(--accent);
  transition: background-color var(--duree), border-color var(--duree), color var(--duree), transform .1s;
}
.btn:hover { background: var(--accent-fort); border-color: var(--accent-fort); color: var(--sur-accent); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }
.btn-sec { background: var(--surface); color: var(--texte); border-color: var(--filet-fort); }
.btn-sec:hover { background: var(--surface-2); color: var(--texte); border-color: var(--texte-2); }
.btn-lien { min-height: 44px; padding: 0 .5rem; background: none; border: 0; border-radius: var(--r-champ); color: var(--texte-2); font-size: var(--t-15); font-weight: 500; cursor: pointer; }
.btn-lien:hover { color: var(--erreur); background: var(--erreur-fond); }
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.puces .btn { min-height: 38px; padding: 0 .85rem; border-radius: 999px; font-weight: 550; }
.puces .btn[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-fort); }
.reglages { margin-top: var(--e-4); }
.sous-outil { margin: calc(-1 * var(--e-4)) 0 var(--e-6); }

/* Zone de résultat */
.resultat {
  margin: var(--e-5) calc(-1 * var(--e-5)) calc(-1 * var(--e-5));
  padding: var(--e-5);
  background: var(--resultat-fond);
  border-top: 1px solid var(--accent-doux-2);
}
.resultat:empty { display: none; }
.resultat-titre { margin: 0 0 .15rem; font-size: var(--t-15); font-weight: 550; color: var(--texte-2); }
.grand { font-size: var(--t-resultat); font-weight: 650; line-height: 1.05; letter-spacing: -.035em; color: var(--texte); animation: maj .2s ease-out; }
.grand .u { font-size: .46em; font-weight: 500; letter-spacing: 0; color: var(--texte-2); margin: 0 .16em 0 .1em; }
.grand-moyen { font-size: clamp(1.6rem, 4vw, 2.1rem); }
@keyframes maj { from { opacity: .6; } }
.detail { margin: var(--e-3) 0 0; font-size: var(--t-15); color: var(--texte-2); max-width: 60ch; }
.resultat .stats { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--accent-doux-2); }

/* Chiffres secondaires (rangée de « stat tiles » sans cartes) */
.stats, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--e-4) var(--e-5); margin: var(--e-4) 0 0; }
.stats > div, .kpis > div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.stats dt, .kpis dt { font-size: var(--t-13); color: var(--texte-2); line-height: 1.35; }
.stats dd, .kpis dd { margin: .15rem 0 0; font-size: var(--t-22); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.resultat > .kpis:first-child { margin-top: 0; }
@media (max-width: 40rem) {
  .stats, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats:not(:has(> div:nth-child(4))):has(> div:nth-child(3)), .kpis:not(:has(> div:nth-child(4))):has(> div:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kpis.compteur { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.kpis.compteur dd { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.04em; }

/* Messages */
.erreur, .attention {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .75rem .9rem; border-radius: var(--r-champ);
  font-size: var(--t-15); font-weight: 500; line-height: 1.45;
}
.erreur { background: var(--erreur-fond); color: var(--erreur); }
.attention { background: var(--attention-fond); color: var(--attention); margin-top: var(--e-3); }
.erreur::before, .attention::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  font-size: .75rem; font-weight: 700; color: var(--surface); background: currentColor;
}
.erreur::before { background: var(--erreur); }
.attention::before { background: var(--attention); }

/* ==========================================================================
   Fiche d'heures (heures travaillées)
   ========================================================================== */
.plages { display: grid; border-top: 1px solid var(--filet); }
.plage {
  display: grid; grid-template-columns: minmax(6.5rem, 1.25fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(5.5rem, .8fr) 4.75rem 44px;
  gap: var(--e-3); align-items: end; padding: var(--e-3) 0; border-bottom: 1px solid var(--filet);
}
.plage .duree { font-size: var(--t-19); font-weight: 650; line-height: var(--champ-h); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plage .duree.alerte { color: var(--attention); }
.plage .suppr { width: 44px; height: var(--champ-h); display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: var(--r-champ); color: var(--texte-2); cursor: pointer; transition: background-color var(--duree), color var(--duree); }
.plage .suppr:hover { color: var(--erreur); background: var(--erreur-fond); }
@media (min-width: 40.01rem) {
  .plage + .plage .champ > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 40rem) {
  /* jour + corbeille / début + fin / pause + durée */
  .plage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: var(--e-3); padding: var(--e-4) 0; }
  .plage > :nth-child(1) { grid-column: 1 / 3; }
  .plage > :nth-child(2) { grid-column: 1; }
  .plage > :nth-child(3) { grid-column: 2 / 4; }
  .plage > :nth-child(4) { grid-column: 1; }
  .plage > .duree { grid-column: 2 / 4; }
  .plage > .suppr { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ==========================================================================
   Contenu éditorial
   ========================================================================== */
.lecture h2:first-child, main > h2:first-child { margin-top: 0; }
.formule { padding: var(--e-4) var(--e-5); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-champ); font-weight: 600; max-width: 46rem; }

.table-defile { overflow-x: auto; margin: var(--e-4) 0 var(--e-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-15); }
caption { text-align: left; font-weight: 600; font-size: var(--t-17); padding-bottom: var(--e-3); }
th, td { text-align: left; padding: .65rem 1rem .65rem 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th { font-size: var(--t-13); font-weight: 600; color: var(--texte-2); border-bottom-color: var(--filet-fort); }
tbody th { font-weight: 600; }
tfoot th, tfoot td { font-weight: 650; border-top: 1px solid var(--filet-fort); border-bottom: 0; }
tr.am td { color: var(--texte-2); }
.table-defile td:first-child { white-space: nowrap; }
.grille-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 var(--e-5); margin: var(--e-4) 0; }

details.repli { margin: var(--e-4) 0; border: 1px solid var(--filet); border-radius: var(--r-champ); background: var(--surface); }
details.repli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 52px; padding: 0 var(--e-4); font-weight: 600; font-size: var(--t-15); }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid var(--texte-2); border-bottom: 1.6px solid var(--texte-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--duree); }
details.repli[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.repli > .table-defile { margin: 0; padding: 0 var(--e-4) var(--e-3); }

/* FAQ : questions et réponses visibles */
.faq-liste { display: grid; gap: 0; max-width: 46rem; border-top: 1px solid var(--filet); }
.faq { padding: var(--e-5) 0; border-bottom: 1px solid var(--filet); }
.faq h3 { margin: 0 0 var(--e-2); font-size: var(--t-17); font-weight: 650; }
.faq p { margin: 0; color: var(--texte); }

/* ==========================================================================
   Listes d'outils (accueil et index latéral)
   ========================================================================== */
.outils-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); margin-top: var(--e-5); }
@media (max-width: 46rem) { .outils-groupes { grid-template-columns: minmax(0, 1fr); } }
.groupe-titre { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--e-3); font-size: var(--t-19); }
.groupe-titre svg { color: var(--accent); flex: none; }
.groupe-titre span { font-size: var(--t-15); font-weight: 450; color: var(--texte-2); letter-spacing: 0; }
.outils-liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); overflow: hidden; }
.outils-liste li { margin: 0; max-width: none; border-top: 1px solid var(--filet); }
.outils-liste li:first-child { border-top: 0; }
.outils-liste a { display: block; padding: .95rem 1.15rem; color: var(--texte); text-decoration: none; transition: background-color var(--duree); }
.outils-liste a strong { display: block; font-weight: 600; }
.outils-liste a span { display: block; margin-top: .1rem; font-size: var(--t-15); line-height: 1.45; color: var(--texte-2); }
.outils-liste a:hover { background: var(--accent-doux); }
.outils-liste a:hover strong { color: var(--accent-fort); }

.index { position: sticky; top: var(--e-5); font-size: var(--t-15); }
.index-groupe + .index-groupe { margin-top: var(--e-6); }
.index-titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--e-2); font-size: var(--t-15); font-weight: 650; letter-spacing: -.01em; }
.index-titre svg { color: var(--accent); }
.index ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--filet); }
.index li { margin: 0; max-width: none; }
.index a { display: block; padding: .45rem 0 .45rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--texte-2); text-decoration: none; line-height: 1.35; transition: color var(--duree), border-color var(--duree); }
.index a:hover { color: var(--texte); border-left-color: var(--filet-fort); }
.index a[aria-current="page"] { color: var(--accent-fort); font-weight: 600; border-left-color: var(--accent); }
@media (max-width: 64rem) {
  .index { position: static; margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--filet); display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e-5); }
  .index-groupe + .index-groupe { margin-top: 0; }
  .index a { padding: .6rem 0 .6rem .9rem; }
}

.maj { margin-top: var(--e-7); font-size: var(--t-13); color: var(--texte-2); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied { border-top: 1px solid var(--filet); background: var(--surface); font-size: var(--t-15); color: var(--texte-2); }
.pied-grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--e-6); padding-top: var(--e-7); padding-bottom: var(--e-6); }
.pied-marque p { margin: var(--e-3) 0 0; max-width: 32ch; }
.pied h2 { margin: 0 0 var(--e-3); font-size: var(--t-15); font-weight: 650; letter-spacing: -.01em; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: 0 0 .35rem; }
.pied a { color: var(--texte-2); text-decoration: none; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.pied-bas { padding-top: var(--e-4); padding-bottom: var(--e-5); border-top: 1px solid var(--filet); font-size: var(--t-13); }
@media (max-width: 52rem) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-marque { grid-column: 1 / -1; } }

@media (max-width: 40rem) {
  .page { padding-top: var(--e-5); }
  .outil { padding: var(--e-4); border-radius: 14px; }
  .resultat { margin: var(--e-4) calc(-1 * var(--e-4)) calc(-1 * var(--e-4)); padding: var(--e-4); }
  .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .champs > .champ:only-child, .champs > .segment, .champs > .champ:has(+ .segment) { grid-column: 1 / -1; }
  input[type="date"], input[type="month"], input[type="datetime-local"], input[type="time"] { padding-inline: .7rem; font-size: 1rem; }
  .reglages { grid-template-columns: minmax(0, 12rem); }
  .chapeau { font-size: var(--t-17); }
  h2 { font-size: var(--t-22); margin-top: var(--e-7); }
  .segment-options { display: grid; }
  th, td { padding-right: .6rem; }
}

/* Calendrier annuel : 3 mois par ligne sur grand écran, 2 sur tablette, 1 sur mobile. */
.calendrier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); margin-top: var(--e-4); }
.cal-mois { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--t-13); font-variant-numeric: tabular-nums; table-layout: fixed; }
.cal-mois caption { text-align: left; font-weight: 650; font-size: var(--t-15); padding-bottom: var(--e-2); color: var(--texte); }
.cal-mois th, .cal-mois td { padding: .3rem 0; border: 0; text-align: center; vertical-align: middle; }
.cal-mois thead th { font-weight: 600; color: var(--texte-2); }
.cal-mois abbr { text-decoration: none; }
.cal-mois tbody th { font-weight: 600; color: var(--accent-fort); background: var(--accent-doux); }
.cal-mois td.we { color: var(--texte-2); }
.cal-mois td.ferie { color: var(--sur-accent); background: var(--accent); font-weight: 650; border-radius: 6px; }
.cal-mois td.auj { outline: 2px solid var(--texte); outline-offset: -2px; border-radius: 6px; font-weight: 700; }
.cal-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: var(--e-4) 0 0; font-size: var(--t-13); color: var(--texte-2); }
.cal-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-left: .6rem; }
.cal-pastille:first-child { margin-left: 0; }
.cal-pastille.ferie { background: var(--accent); }
.cal-pastille.we { background: var(--surface-2); border: 1px solid var(--filet-fort); }
.cal-pastille.auj { outline: 2px solid var(--texte); outline-offset: -2px; }
@media (max-width: 56rem) { .calendrier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .calendrier { grid-template-columns: minmax(0, 1fr); } }

/* Éléments propres à l'impression */
.impression-entete, .impression-seule { display: none; }

@media print {
  /* Toujours imprimé en clair, quel que soit le thème choisi à l'écran. */
  :root:root:root { --fond: #fff; --surface: #fff; --surface-2: #f2f2f5; --texte: #000; --texte-2: #444; --filet: #ccc; --filet-fort: #999; --accent: #2f46c8; --accent-fort: #2f46c8; --accent-doux: #fff; --resultat-fond: #fff; color-scheme: light; }
  .entete, .index, .pied, .outils-groupes, .fil, .fil-ligne, .actions, .faq-liste, .suppr, .evitement, .maj, .partager { display: none !important; }
  body { background: #fff; color: #000; }
  .impression-entete { display: block; margin: 0 0 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid #ccc; font-size: 10pt; color: #444; }
  .impression-seule { display: block; }
  .plages, .reglages { display: none; }
  .impression-seule table { width: 100%; margin: 0; }
  .impression-seule tfoot th, .impression-seule tfoot td { font-weight: 700; border-top: 2px solid #000; }
  .page-outil { display: block; }
  .outil { border: 0; box-shadow: none; padding: 0; overflow: visible; break-inside: avoid; }
  /* Pages dont l'impression est un document (relevé d'heures) : seul l'outil est imprimé, sans l'article. */
  .imprime-outil > :not(h1):not(.outil), .imprime-outil .outil > h2, .imprime-outil .outil > form, .cal-legende { display: none !important; }
  .imprime-outil:has(.calendrier) > h1 { display: none; }
  .cal-titre { margin: 0 0 .5rem; font-size: 14pt; font-weight: 700; color: #000; }
  .outil:has(.calendrier) { break-inside: auto; }
  .calendrier { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12pt 18pt; margin: 0; }
  .cal-mois { font-size: 8pt; }
  .cal-mois caption { font-size: 9.5pt; padding-bottom: 2pt; }
  .cal-mois th, .cal-mois td { padding: 1.5pt 0; }
  .cal-mois tbody th { background: #eef1ff; color: #2f46c8; }
  .cal-mois td.ferie { background: #2f46c8; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cal-mois td.auj { outline: 0; font-weight: inherit; }
  .resultat { margin: 1rem 0 0; background: none; border: 0; padding: 0; }
}