/* ── Charte TrimSync, version 1 (15/10/2026) ──
   La base commune à toutes les pages : polices, couleurs, tailles, boutons, champs, logo.
   Le détail et le pourquoi : DESIGN.md. Aucune couleur ni taille écrite en dur ailleurs.

   Deux ambiances, mêmes noms de variables :
   - la vitrine (index.html, salons, pages légales) : sombre, comme SolutIAa, Resend et Linear ;
   - l'outil (tableau de bord, page de réservation) : classe .theme-outil sur <html>, clair par
     défaut et sombre si le téléphone est en mode sombre. Un pro le regarde entre deux clients,
     sous les lampes du salon : il doit se lire d'un coup d'œil, de jour comme de nuit. */

/* Polices : Funnel Display (titres) et Funnel Sans (texte), licence OFL, servies depuis /polices
   (aucun appel à Google Fonts : rien ne part chez Google quand un visiteur ouvre la page). */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/polices/funnel-display.woff2') format('woff2');
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/polices/funnel-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/polices/funnel-sans-italique.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* ── Couleurs de la vitrine : noir à peine bleuté, blanc craie, une touche de lagon ── */
  --nuit: oklch(0.145 0.005 230);     /* fond */
  --nuit-2: oklch(0.185 0.005 230);   /* panneaux posés sur le fond */
  --nuit-3: oklch(0.228 0.006 230);   /* bouton secondaire, survol */
  --craie: oklch(0.97 0.003 230);     /* texte principal */
  --lagon: oklch(0.84 0.10 202);      /* l'accent TrimSync : le S du logo, l'action principale, « fait tout seul » */
  --lagon-fonce: oklch(0.52 0.11 212);/* le même sur fond clair */
  --encre-lagon: oklch(0.21 0.035 215);/* texte posé sur le lagon */

  /* Noms communs aux deux ambiances (les composants n'utilisent que ceux-là) */
  --fond: var(--nuit);
  --surface: var(--nuit-2);
  --surface-2: var(--nuit-3);
  --trait: oklch(0.29 0.006 230);
  --trait-doux: oklch(0.235 0.005 230);
  --texte: var(--craie);
  --texte-2: oklch(0.77 0.006 230);
  --texte-3: oklch(0.63 0.006 230);
  --accent: var(--lagon);
  --sur-accent: var(--encre-lagon);
  --accent-doux: oklch(0.84 0.10 202 / 0.12);
  --accent-texte: var(--lagon);        /* accent lisible comme texte sur le fond */
  --inf-base: var(--lagon);            /* le signe infini du logo : teinte de base, */
  --inf-clair: oklch(0.96 0.04 198);   /* brin du dessus au croisement, */
  --inf-ombre: oklch(0.52 0.10 214);   /* brin du dessous au croisement */
  --ombre: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 32px oklch(0 0 0 / 0.35);

  /* États d'un rendez-vous */
  --ok: oklch(0.80 0.13 158);
  --ok-doux: oklch(0.80 0.13 158 / 0.14);
  --attente: oklch(0.84 0.12 82);
  --attente-doux: oklch(0.84 0.12 82 / 0.14);
  --alerte: oklch(0.72 0.15 25);
  --alerte-doux: oklch(0.72 0.15 25 / 0.14);

  /* ── Typographie ── */
  --police-titre: 'Funnel Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police: 'Funnel Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-legende: 0.8125rem;
  --t-petit: 0.9375rem;
  --t-corps: 1.0625rem;
  --t-chapo: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  --t-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --t-h2: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --t-h1: clamp(2.75rem, 1.5rem + 5.2vw, 5.75rem);

  /* ── Espaces, largeur, rayons ── */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem; --e-9: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --marge: clamp(1rem, 0.4rem + 3vw, 3rem);
  --largeur: 74rem;
  --rayon-petit: 8px;
  --rayon: 12px;
  --rayon-grand: 18px;

  /* ── Mouvement : jamais de vitesse constante ──
     ce qui entre arrive vite puis freine longtemps (--ease-sortie),
     ce qui sort part doucement puis s'échappe, plus court (--ease-depart),
     l'interface pressée dépasse un peu sa cible puis se pose (--ressort) */
  --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-depart: cubic-bezier(0.55, 0, 1, 0.45);
  --ressort: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duree-depart: 180ms;
  --duree-ressort: 300ms;
  --duree-court: 160ms;
  --duree: 240ms;
  --duree-long: 640ms;
}

/* ── L'outil : clair par défaut… ── */
.theme-outil {
  color-scheme: light;
  --fond: oklch(0.975 0.003 230);
  --surface: oklch(0.995 0.002 230);
  --surface-2: oklch(0.955 0.004 230);
  --trait: oklch(0.885 0.006 230);
  --trait-doux: oklch(0.925 0.004 230);
  --texte: oklch(0.21 0.008 230);
  --texte-2: oklch(0.43 0.01 230);
  --texte-3: oklch(0.53 0.01 230);
  --accent: var(--lagon-fonce);
  --sur-accent: oklch(0.985 0.004 210);
  --accent-doux: oklch(0.52 0.11 212 / 0.10);
  --accent-texte: var(--lagon-fonce);
  --inf-base: var(--lagon-fonce);
  --inf-clair: oklch(0.68 0.11 204);
  --inf-ombre: oklch(0.30 0.07 225);
  --ombre: 0 1px 2px oklch(0.2 0.01 230 / 0.06), 0 8px 24px oklch(0.2 0.01 230 / 0.06);
  --ok: oklch(0.50 0.12 155);
  --ok-doux: oklch(0.62 0.13 155 / 0.13);
  --attente: oklch(0.52 0.11 70);
  --attente-doux: oklch(0.80 0.13 82 / 0.22);
  --alerte: oklch(0.53 0.17 27);
  --alerte-doux: oklch(0.62 0.17 27 / 0.12);
}
/* … et sombre quand le téléphone est en mode sombre (sauf si la page force le clair : .outil-clair) */
@media (prefers-color-scheme: dark) {
  .theme-outil:not(.outil-clair) {
    color-scheme: dark;
    --fond: var(--nuit);
    --surface: var(--nuit-2);
    --surface-2: var(--nuit-3);
    --trait: oklch(0.29 0.006 230);
    --trait-doux: oklch(0.235 0.005 230);
    --texte: var(--craie);
    --texte-2: oklch(0.77 0.006 230);
    --texte-3: oklch(0.63 0.006 230);
    --accent: var(--lagon);
    --sur-accent: var(--encre-lagon);
    --accent-doux: oklch(0.84 0.10 202 / 0.12);
    --accent-texte: var(--lagon);
    --inf-base: var(--lagon);
    --inf-clair: oklch(0.96 0.04 198);
    --inf-ombre: oklch(0.52 0.10 214);
    --ombre: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 32px oklch(0 0 0 / 0.35);
    --ok: oklch(0.80 0.13 158);
    --ok-doux: oklch(0.80 0.13 158 / 0.14);
    --attente: oklch(0.84 0.12 82);
    --attente-doux: oklch(0.84 0.12 82 / 0.14);
    --alerte: oklch(0.72 0.15 25);
    --alerte-doux: oklch(0.72 0.15 25 / 0.14);
  }
}
/* Sombre forcé (la planche montre les deux côte à côte) */
.outil-sombre {
  color-scheme: dark;
  --fond: var(--nuit);
  --surface: var(--nuit-2);
  --surface-2: var(--nuit-3);
  --trait: oklch(0.29 0.006 230);
  --trait-doux: oklch(0.235 0.005 230);
  --texte: var(--craie);
  --texte-2: oklch(0.77 0.006 230);
  --texte-3: oklch(0.63 0.006 230);
  --accent: var(--lagon);
  --sur-accent: var(--encre-lagon);
  --accent-doux: oklch(0.84 0.10 202 / 0.12);
  --accent-texte: var(--lagon);
  --inf-base: var(--lagon);
  --inf-clair: oklch(0.96 0.04 198);
  --inf-ombre: oklch(0.52 0.10 214);
  --ombre: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 32px oklch(0 0 0 / 0.35);
  --ok: oklch(0.80 0.13 158);
  --ok-doux: oklch(0.80 0.13 158 / 0.14);
  --attente: oklch(0.84 0.12 82);
  --attente-doux: oklch(0.84 0.12 82 / 0.14);
  --alerte: oklch(0.72 0.15 25);
  --alerte-doux: oklch(0.72 0.15 25 / 0.14);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--sur-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, .t1, .t2, .t3 {
  font-family: var(--police-titre);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1, .t1 { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.045em; }
h2, .t2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.04em; }
h3, .t3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
/* Titre en deux temps : l'idée en craie, la suite en gris (pas de dégradé dans le texte) */
.suite { color: var(--texte-3); }
p { margin: 0; text-wrap: pretty; }
.chapo { font-size: var(--t-chapo); color: var(--texte-2); line-height: 1.55; max-width: 38em; }
.legende { font-size: var(--t-legende); color: var(--texte-3); }
a { color: inherit; }

.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }

/* ── Logo : le signe infini, puis « TrimSync » ──
   Posé en ligne par js/marque.js (data-logo) ; sans script, le mot reste écrit. Le signe est un trait d'épaisseur
   constante, d'une seule teinte (--inf-base) ; au croisement, le brin du dessous s'interrompt sous l'autre
   (coupure transparente). --inf-clair, --inf-ombre et --inf-fond ne servent plus au signe (ancien ruban vrillé). */
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--police-titre);
  font-weight: 620;
  font-size: 1.375rem;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.logo .inf { height: 0.64em; width: auto; flex: none; margin-right: 0.3em; overflow: visible; --inf-fond: var(--fond); }
.inf-lisere { fill: var(--inf-fond, var(--fond)); }
/* L'infini se dessine (au chargement, au survol, ou quand une tâche « se fait toute seule ») */
.inf-trace { stroke-dasharray: 100; stroke-dashoffset: 0; }
.a-dessiner .inf-trace { stroke-dashoffset: 100; }
.dessine .inf-trace { transition: stroke-dashoffset 1100ms var(--ease-sortie); stroke-dashoffset: 0; }

/* Le signe seul : il marque ce que TrimSync a fait à la place du pro (TrimSyncLogo.s()) */
.s-mini { display: inline-block; height: 0.72em; width: auto; flex: none; overflow: visible; --inf-fond: var(--surface); }

/* ── Boutons : rectangles aux coins doux, jamais de pilule ── */
.btn {
  --h: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--h);
  padding: 0 1.15em;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duree-court) var(--ease), border-color var(--duree-court) var(--ease), color var(--duree-court) var(--ease), transform var(--duree-court) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn-grand { --h: 3.25rem; font-size: 1rem; padding: 0 1.4em; }
.btn-petit { --h: 2.25rem; font-size: var(--t-legende); padding: 0 0.9em; border-radius: var(--rayon-petit); }
.btn-principal { background: var(--accent); color: var(--sur-accent); }
.btn-clair { background: var(--texte); color: var(--fond); }
.btn-sombre { background: var(--surface-2); color: var(--texte); border-color: var(--trait-doux); }
.btn-contour { background: transparent; color: var(--texte); border-color: var(--trait); }
.btn-lien { background: none; color: var(--texte-2); padding-inline: 0.4em; }
@media (hover: hover) {
  .btn-principal:hover { background: color-mix(in oklch, var(--accent) 88%, var(--texte)); }
  .btn-clair:hover { background: color-mix(in oklch, var(--texte) 88%, var(--fond)); }
  .btn-sombre:hover, .btn-contour:hover { background: var(--surface); border-color: var(--trait); }
  .btn-lien:hover { color: var(--texte); }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ── Champs ── */
.etiquette { display: block; font-size: var(--t-petit); font-weight: 500; color: var(--texte-2); margin-bottom: var(--e-2); }
.champ {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.7em 0.9em;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 1rem; /* 16 px : iOS ne zoome pas sur le champ */
  transition: border-color var(--duree-court) var(--ease), box-shadow var(--duree-court) var(--ease);
}
.champ::placeholder { color: var(--texte-3); }
.champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.champ[aria-invalid="true"] { border-color: var(--alerte); }
.aide { font-size: var(--t-legende); color: var(--texte-3); margin-top: var(--e-2); }
.erreur { font-size: var(--t-legende); color: var(--alerte); margin-top: var(--e-2); }

/* ── Panneau : une surface posée sur le fond, un liseré de lumière en haut (vitrine) ── */
.panneau {
  background: var(--surface);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

/* ── Puce d'état (dans l'outil : confirmé, en attente, annulé) ── */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  border-radius: 6px;
  font-size: var(--t-legende);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.etat::before { content: ''; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.etat-ok { color: var(--ok); background: var(--ok-doux); }
.etat-attente { color: var(--attente); background: var(--attente-doux); }
.etat-alerte { color: var(--alerte); background: var(--alerte-doux); }
.etat-auto { color: var(--accent-texte); background: var(--accent-doux); }

/* ── Apparitions au défilement : une seule fois, et seulement si le script tourne ── */
html.js [data-entree] { opacity: 0; transform: translateY(14px); transition: opacity var(--duree-long) var(--ease-sortie), transform var(--duree-long) var(--ease-sortie); }
html.js [data-entree].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.js [data-entree] { opacity: 1; transform: none; }
}

/* Pour les lecteurs d'écran seulement */
.lecteur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }