/* Nanilex — fondations.
 *
 * Rapatrié du projet de design, à une différence près : là-bas le thème se
 * choisit dans un sélecteur, ici il n'y a personne pour le choisir. Le site
 * suit donc la préférence du système d'exploitation, et `data-theme` reste
 * disponible pour forcer l'un ou l'autre.
 *
 * Palette : papier chaud et bordeaux d'encre. Newsreader pour les titres et
 * la parole de l'assistant, IBM Plex Sans pour l'interface, IBM Plex Mono
 * pour les repères numérotés. Les chiffres tabulaires ne sont pas une
 * coquetterie : dates, quantièmes et montants s'alignent en colonne, et un
 * délai de procédure se lit mieux qu'il ne se devine.
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* — Familles — */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --font-sans: 'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --numeric-tabular: tabular-nums;

  /* — Surfaces, clair — */
  --bg-base: #f4f2ed; --bg-elevated: #fdfdfc; --bg-overlay: #ffffff;
  --bg-subtle: #f0ede6; --bg-muted: #e3dfd6;
  --nav-bg: #eae6dd;
  --text-primary: #1a1a18; --text-secondary: #6b6862; --text-tertiary: #918d85;
  --text-inverted: #ffffff; --text-on-accent: #ffffff;
  --border-default: rgba(0, 0, 0, .10); --border-subtle: rgba(0, 0, 0, .06); --border-strong: rgba(0, 0, 0, .15);
  --accent-primary: #7a1f2b; --accent-primary-hover: #8f2634; --accent-primary-active: #641821;
  --accent-primary-fill: #7a1f2b; --accent-primary-subtle: rgba(122, 31, 43, .10);
  --accent-secondary: #4a5568; --accent-secondary-subtle: rgba(74, 85, 104, .10);
  --accent-success: #22c55e; --accent-warning: #a8421c; --accent-error: #ef4444; --accent-info: #06b6d4;

  /* — Grille — */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);

  --logo: url('assets/logo-horizontal.svg');
}

/* — Sombre : le même papier, retourné ; bordeaux relevé pour tenir le contraste — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --bg-base: #14120f; --bg-elevated: #1c1a16; --bg-overlay: #231f1a;
    --bg-subtle: #23201b; --bg-muted: #2c2823;
    --nav-bg: #0e0c0a;
    --text-primary: #f5f1e8; --text-secondary: #b3aca0; --text-tertiary: #8a8378;
    --text-inverted: #14120f; --text-on-accent: #ffffff;
    --border-default: rgba(245, 241, 232, .11); --border-subtle: rgba(245, 241, 232, .07); --border-strong: rgba(245, 241, 232, .18);
    --accent-primary: #c8535e; --accent-primary-hover: #d76a74; --accent-primary-active: #b4454f;
    --accent-primary-fill: #8f2634; --accent-primary-subtle: rgba(200, 83, 94, .14);
    --accent-secondary: #93a3bd; --accent-secondary-subtle: rgba(147, 163, 189, .14);
    --accent-success: #4ade80; --accent-warning: #e07a45; --accent-error: #f87171; --accent-info: #4dc9e0;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .6), 0 2px 4px -1px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .65), 0 4px 6px -2px rgba(0, 0, 0, .45);
    --logo: url('assets/logo-horizontal-inverse.svg');
  }
}

:root[data-theme="sombre"] {
  --bg-base: #14120f; --bg-elevated: #1c1a16; --bg-overlay: #231f1a;
  --bg-subtle: #23201b; --bg-muted: #2c2823;
  --nav-bg: #0e0c0a;
  --text-primary: #f5f1e8; --text-secondary: #b3aca0; --text-tertiary: #8a8378;
  --text-inverted: #14120f; --text-on-accent: #ffffff;
  --border-default: rgba(245, 241, 232, .11); --border-subtle: rgba(245, 241, 232, .07); --border-strong: rgba(245, 241, 232, .18);
  --accent-primary: #c8535e; --accent-primary-hover: #d76a74; --accent-primary-active: #b4454f;
  --accent-primary-fill: #8f2634; --accent-primary-subtle: rgba(200, 83, 94, .14);
  --accent-secondary: #93a3bd; --accent-secondary-subtle: rgba(147, 163, 189, .14);
  --accent-success: #4ade80; --accent-warning: #e07a45; --accent-error: #f87171; --accent-info: #4dc9e0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .6), 0 2px 4px -1px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .65), 0 4px 6px -2px rgba(0, 0, 0, .45);
  --logo: url('assets/logo-horizontal-inverse.svg');
}

/* ── Base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-primary-hover); }

img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 2px; }

/* Dates, quantièmes, articles, montants : alignés en colonne. */
.tnum, time { font-variant-numeric: var(--numeric-tabular); font-feature-settings: "tnum" 1; }
.mono, code, kbd, samp, pre { font-family: var(--font-mono); font-variant-numeric: var(--numeric-tabular); }

/* ── Ossature ─────────────────────────────────────────────────────────── */

.enveloppe { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-primary); display: block; flex: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em; text-wrap: pretty; }
h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
.serif { font-family: var(--font-serif); }

/* ── En-tête ──────────────────────────────────────────────────────────── */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.entete__barre { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }
.entete__logo { display: block; flex: none; width: 104px; height: 32px; background: var(--logo) center left / contain no-repeat; text-indent: -9999px; overflow: hidden; }
.entete__nav { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: 14px; }
.entete__nav a { color: var(--text-secondary); text-decoration: none; }
.entete__nav a:hover { color: var(--text-primary); }
.entete__nav a[aria-current="page"] { color: var(--text-primary); font-weight: 500; }
.entete__actions { display: flex; gap: 10px; align-items: center; flex: none; }
.entete__lien { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 0 6px; }
.entete__lien:hover { color: var(--text-primary); }
/* ── Le sélecteur de thème ────────────────────────────────────────────────
 *
 * Il vivait dans l'entête, en une seule pastille à deux positions. Deux
 * défauts, et le second est le pire : elle prenait la place d'un élément de
 * navigation sur une barre déjà serrée, et surtout elle ne savait pas dire
 * « suis mon appareil ». Le visiteur qui l'effleurait une fois se retrouvait
 * enfermé dans un choix qu'il n'avait pas voulu.
 *
 * Trois segments, donc, et au pied de page — là où se rangent les réglages
 * qu'on cherche quand on en a besoin, pas ceux qu'on heurte en passant.
 */
.bascule-theme {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.bascule-theme button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1;
}

.bascule-theme button:hover { color: var(--text-primary); }

/* L'état coché se lit à la pastille pleine, pas à une nuance de gris : sur un
   écran mal calibré, deux gris proches ne se distinguent pas. */
.bascule-theme button[aria-checked='true'] {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.bascule-theme button:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Sous 860 px, la navigation passe sous le logo plutôt que de disparaître :
   masquée, elle emportait avec elle le seul lien vers les tarifs, et un
   visiteur de téléphone n'avait plus de page de prix. Elle défile
   latéralement, sans menu à déplier — trois liens ne valent pas un script. */
@media (max-width: 860px) {
  .entete__barre { flex-wrap: wrap; gap: 10px 14px; }
  .entete__actions { margin-left: auto; }
  .entete__nav {
    order: 3; width: 100%; margin-left: 0;
    gap: 18px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .entete__nav::-webkit-scrollbar { display: none; }
  .entete__nav a { white-space: nowrap; }
}

@media (max-width: 420px) {
  .entete__lien { display: none; }
}

/* ── Boutons ──────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 24px;
  border-radius: var(--radius-md);
  font-size: 15.5px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.bouton--plein { background: var(--accent-primary-fill); color: var(--text-on-accent); box-shadow: var(--shadow-sm); }
.bouton--plein:hover { background: var(--accent-primary-hover); color: var(--text-on-accent); }
.bouton--contour { border-color: var(--border-strong); color: var(--text-primary); background: transparent; }
.bouton--contour:hover { background: var(--bg-subtle); color: var(--text-primary); }
.bouton--petit { height: 36px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.bouton--grand { height: 50px; padding: 0 28px; font-size: 16px; }
.bouton--large { width: 100%; }

/* ── Cartes et grilles ────────────────────────────────────────────────── */

.carte {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
}
.grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--large { gap: clamp(28px, 3.4vw, 48px); }

/* L'en-tête est collant : sans cette marge, un lien d'ancre dépose le
   visiteur avec le titre de la section caché dessous. */
[id] { scroll-margin-top: 78px; }

.section { border-top: 1px solid var(--border-subtle); }
.section--creuse { background: var(--bg-subtle); }
.section--appel { background: var(--nav-bg); }
.section__corps { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }

/* ── Pied ─────────────────────────────────────────────────────────────── */

.pied { border-top: 1px solid var(--border-default); background: var(--bg-base); }
.pied__corps { padding: 36px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.pied__logo { display: block; width: 72px; height: 22px; background: var(--logo) center left / contain no-repeat; opacity: .85; text-indent: -9999px; overflow: hidden; }
.pied__nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; }
.pied__nav a { color: var(--text-secondary); text-decoration: none; }
.pied__nav a:hover { color: var(--text-primary); }
.pied__mention { font-size: 12.5px; color: var(--text-tertiary); }

/* ── Mouvement ────────────────────────────────────────────────────────── */

@keyframes rev { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes revx { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .15; } }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes thread { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 440px)); } }

.rev { animation: rev .7s both; }
.revx { animation: revx .5s both; }

/* Une animation au défilement n'a de sens que si on l'a vue commencer. Mais
   du contenu masqué en attendant un script est un pari : si le script ne
   charge pas, ou si l'observateur d'intersection rend son verdict après coup
   sur un défilement rapide, la page reste blanche. Un site vitrine qui
   n'affiche rien ne vend rien.

   Le masquage est donc conditionné à `html.avec-reveal`, classe que le script
   pose lui-même au démarrage, et qu'il retire au bout de quelques secondes
   quoi qu'il arrive. Sans script : tout est visible d'emblée. */
.avec-reveal .au-defilement { opacity: 0; }
.au-defilement.vu { animation: rev .7s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .avec-reveal .au-defilement { opacity: 1; }
}