/* MAA Gestion — site vitrine
   Palette et typographie reprises telles quelles du logiciel (voir
   GestionApp/Theme/Colors.xaml et Theme/Fonts.xaml) : papier ivoire + encre
   pin ("Atelier"), Fraunces pour les titres. Un seul thème (clair, chaleureux)
   — c'est le vrai visuel du produit, pas une palette générique.
   Palette « vive » depuis le 2026-09-26 (demandé explicitement : « plus de
   couleurs vives, plus joyeux, moderne mais professionnel ») : sarcelle, or,
   terre cuite, brique et prune plus franches, mêmes valeurs que le logiciel. */

/* Police Fraunces hébergée sur ce site (fonts/, licence SIL OFL 1.1 : voir
   fonts/OFL.txt) plutôt que chez Google Fonts : aucune requête vers un tiers
   (adresse IP du visiteur), et la politique CSP peut s'en tenir à 'self'.
   Fichier variable (axes opsz 9–144 et wght 100–900) : un seul fichier par
   jeu de caractères couvre les graisses 500, 700 et 900 utilisées. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-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: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --accent: #1F4D3A;
  --accent-dark: #153729;
  --accent-soft: #DFEEE3;
  --teal: #1E8577;
  --gold: #D9A441;
  --gold-ink: #7E5A08;
  --terracotta: #D9771B;
  --brick: #C2402D;
  --plum: #8A4A8F;

  --surface: #F8F4E8;
  --surface-alt: #F2ECDC;
  --card: #FFFDF8;
  --border: #E6DCC3;
  --text: #2B2417;
  --text-soft: #5C5748;
  --text-faint: #8A8371;

  --shadow-sm: 0 1px 2px rgba(43, 36, 23, 0.06);
  --shadow-md: 0 8px 24px rgba(21, 55, 41, 0.10);
  --shadow-lg: 0 18px 48px rgba(21, 55, 41, 0.16);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --max: 1120px;
  --max-narrow: 760px;

  /* Mouvement — seul endroit où se règlent durées et courbes (2026-11-12,
     demandé explicitement : animations d'interface « légères et
     professionnelles »). Aucune courbe à rebond : tout s'arrête net.
     Une sortie dure ~20 % de moins que l'entrée correspondante. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* entrées, réponses à un geste */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* déplacement à l'écran */
  --dur-press: 120ms;      /* bouton enfoncé */
  --dur-fast: 150ms;       /* survol, couleurs, bordures */
  --dur-menu-in: 200ms;    /* menu déroulant : ouverture */
  --dur-menu-out: 160ms;   /* menu déroulant : fermeture (-20 %) */
  --dur-icon: 200ms;       /* échange d'icônes (hamburger ↔ fermer) */
  --dur-state: 240ms;      /* changement d'état d'un bloc (attente → clé prête) */
  --dur-reveal: 420ms;     /* apparition au défilement */
  --dur-move: 320ms;       /* pastille de navigation d'une page à l'autre */
  --dur-page: 200ms;       /* fondu enchaîné entre deux pages */
  --dur-pulse: 520ms;      /* petite pulsation de confirmation */
  --stagger: 30ms;         /* décalage entre éléments d'une liste */
  --reveal-shift: 12px;    /* distance parcourue par une apparition */
  --pulse-ring: color-mix(in srgb, var(--teal) 35%, transparent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

h1, h2, h3, h4 {
  font-family: "Fraunces", Constantia, Georgia, "Times New Roman", serif;
  color: var(--accent-dark);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 12px;
}

h1 { font-weight: 900; }
h2 { font-weight: 700; }
h3, h4 { font-weight: 600; }

p { margin: 0 0 14px; }

a { color: var(--accent); text-decoration: none; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
a:hover { color: var(--teal); }

img, svg { max-width: 100%; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--accent-dark));
  color: #F8F4E8;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--accent-dark);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--accent); background: var(--card); color: var(--accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  padding: 10px 16px;
}
.btn-ghost:hover { color: var(--accent-dark); }

/* Enfoncé : le bouton se tasse légèrement (0,97), réponse immédiate au doigt.
   Après les variantes pour l'emporter sur le « lève de 1 px » du survol. */
.btn:active:not(:disabled) { transform: scale(0.97); transition-duration: var(--dur-press); }

.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn { max-width: 100%; }

@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 14px 22px; font-size: 15.5px; }
  .form-actions .btn { width: 100%; }
}

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

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 244, 232, 0.88);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: inherit; }
.brand-badge { flex-shrink: 0; }
.brand-word {
  font-family: "Fraunces", Constantia, Georgia, serif;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
}
.brand-word b { font-weight: 900; color: var(--accent-dark); }
.brand-word span { font-weight: 500; color: var(--accent-dark); }

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
nav.main-nav a.nav-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
nav.main-nav a.nav-link:hover { color: var(--accent-dark); background: var(--surface-alt); }
nav.main-nav a.nav-link.is-active { color: var(--accent-dark); background: var(--accent-soft); }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Pastille de la page active, ajoutée par script.js (bureau seulement).
   D'une page à l'autre, elle glisse de l'ancien lien vers le nouveau grâce
   aux View Transitions (voir « Mouvement » en fin de fichier) ; sans
   JavaScript, le fond de .is-active ci-dessus reste en place. */
.nav-indicator { display: none; }
@media (min-width: 961px) {
  nav.main-nav { position: relative; }
  nav.main-nav a.nav-link { position: relative; z-index: 1; }
  .nav-indicator {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 999px;
    background: var(--accent-soft);
    pointer-events: none;
  }
  nav.main-nav.has-indicator a.nav-link.is-active { background: transparent; }
}

.nav-toggle {
  display: none;
  position: relative;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.nav-toggle svg { width: 20px; height: 20px; }
/* Hamburger ↔ croix : fondu enchaîné avec un léger changement d'échelle et
   un flou, pour que l'échange se lise comme une seule icône qui se
   transforme. L'icône « croix » est ajoutée par script.js. */
.nav-toggle .icon-burger,
.nav-toggle .icon-close {
  transition: opacity var(--dur-icon) var(--ease-out), transform var(--dur-icon) var(--ease-out), filter var(--dur-icon) var(--ease-out);
}
.nav-toggle .icon-close {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  opacity: 0;
  transform: scale(0.6);
  filter: blur(2px);
}
.nav-toggle[aria-expanded="true"] .icon-burger { opacity: 0; transform: scale(0.6); filter: blur(2px); }
.nav-toggle[aria-expanded="true"] .icon-close { opacity: 1; transform: none; filter: none; }

@media (max-width: 960px) {
  /* Menu déroulant : il part du bouton qui l'ouvre (transform-origin réglé
     par script.js sous le hamburger), grandit de 0,95 à 1 en 200 ms et y
     retourne en 160 ms. visibility (et non display) garde la transition
     possible tout en retirant les liens fermés du parcours au clavier. */
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 16px;
    gap: 2px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: var(--menu-origin-x, calc(100% - 44px)) 0;
    pointer-events: none;
    transition:
      opacity var(--dur-menu-out) var(--ease-out),
      transform var(--dur-menu-out) var(--ease-out),
      visibility 0s linear var(--dur-menu-out);
  }
  nav.main-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      opacity var(--dur-menu-in) var(--ease-out),
      transform var(--dur-menu-in) var(--ease-out),
      visibility 0s;
  }
  nav.main-nav a.nav-link { padding: 12px 14px; }
  /* Les liens arrivent l'un après l'autre (30 ms d'écart) à l'ouverture ;
     à la fermeture ils partent ensemble avec le panneau. */
  nav.main-nav a.nav-link {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur-menu-out) var(--ease-out), transform var(--dur-menu-out) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  nav.main-nav.is-open a.nav-link {
    opacity: 1;
    transform: none;
    transition-duration: var(--dur-menu-in), var(--dur-menu-in), var(--dur-fast), var(--dur-fast);
    transition-delay: calc(var(--i, 0) * var(--stagger)), calc(var(--i, 0) * var(--stagger)), 0s, 0s;
  }
  nav.main-nav a.nav-link:nth-child(2) { --i: 1; }
  nav.main-nav a.nav-link:nth-child(3) { --i: 2; }
  nav.main-nav a.nav-link:nth-child(4) { --i: 3; }
  nav.main-nav a.nav-link:nth-child(5) { --i: 4; }
  nav.main-nav a.nav-link:nth-child(6) { --i: 5; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-primary { padding: 10px 18px; font-size: 14px; }
}

@media (max-width: 480px) {
  /* La pastille "Télécharger" de l'en-tête + le bouton hamburger ne
     tiennent plus à côté du logo sous ~480px (bogue réel trouvé en testant
     au format mobile : le bouton débordait hors de l'écran et interceptait
     les clics destinés au hamburger). Le lien "Téléchargement" reste
     accessible dans le menu hamburger lui-même, donc rien n'est perdu. */
  .header-actions .btn-primary { display: none; }
}

/* ---------- Héro ---------- */

.hero {
  padding: 72px 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { font-size: 46px; margin-bottom: 16px; }
.hero-lede { font-size: 18px; color: var(--text-soft); max-width: 480px; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-trust { font-size: 13.5px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--teal); }

.hero-art { position: relative; }

@media (max-width: 900px) {
  .hero { padding: 44px 0 16px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 34px; }
  .hero-lede { max-width: none; }
  .hero-art { order: -1; width: 100%; max-width: 420px; margin: 0 auto; }
}

/* Les éléments de grille ont min-width: auto par défaut — sans ce 0, le
   contenu non sécable (chiffres en nowrap de l'illustration, adresse
   courriel) élargissait toute la colonne au-delà de l'écran sur mobile. */
.hero-grid > *, .contact-grid > *, .included-grid > * { min-width: 0; }

/* ---------- Illustration tableau de bord (décorative, stylisée) ---------- */

.mock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  transform: rotate(-1.2deg);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.mock-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mock-stat {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.mock-stat .k { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.mock-stat .v { font-family: "Fraunces", serif; font-weight: 700; font-size: 19px; color: var(--accent-dark); margin-top: 2px; }
.mock-chart {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 14px 14px 10px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 96px;
}
.mock-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--teal), var(--accent)); opacity: 0.85; }
.mock-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mock-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-soft); }
.mock-row .chip { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.mock-row .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.mock-row .bar span { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.mock-badge {
  position: absolute;
  bottom: -16px;
  right: -14px;
  background: var(--accent-dark);
  color: #F8F4E8;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: rotate(1.5deg);
}
.mock-badge svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

/* Doit rester APRÈS les règles .mock-* ci-dessus (même spécificité : c'est
   l'ordre dans le fichier qui départage). */
@media (max-width: 420px) {
  .mock { padding: 14px; }
  .mock-grid { gap: 6px; }
  .mock-stat { padding: 10px 8px; }
  .mock-stat .k { font-size: 10px; }
  .mock-stat .v { font-size: clamp(12px, 3.6vw, 15px); white-space: nowrap; }
}

/* ---------- Sections génériques ---------- */

section { padding: 64px 0; }
section[id] { scroll-margin-top: 40px; }
.section-head { max-width: var(--max-narrow); margin: 0 0 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 30px; }
.section-head p { color: var(--text-soft); font-size: 16px; margin: 0; }

.alt-bg { background: var(--surface-alt); }

/* ---------- Piliers / valeurs ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pillar { padding: 4px; }
.pillar-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.pillar-icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 18px; margin-bottom: 8px; }
.pillar p { color: var(--text-soft); font-size: 14.5px; margin: 0; }

@media (max-width: 800px) {
  .pillars { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Grille de fonctionnalités ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #D8CBA8; }
.feature-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.feature-icon svg { width: 19px; height: 19px; color: #fff; }
.feature-card h3 { font-size: 16px; margin-bottom: 6px; }
.feature-card p { font-size: 13.8px; color: var(--text-soft); margin: 0; }

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

/* Teintes d'icônes — la même famille d'encres "Atelier" que le logiciel */
.ic-accent { background: linear-gradient(135deg, var(--teal), var(--accent-dark)); }
.ic-gold { background: linear-gradient(135deg, #E4B65B, var(--gold-ink)); }
.ic-terracotta { background: linear-gradient(135deg, #D97C3F, var(--terracotta)); }
.ic-plum { background: linear-gradient(135deg, #96628A, var(--plum)); }
.ic-brick { background: linear-gradient(135deg, #B85446, var(--brick)); }
.ic-teal { background: linear-gradient(135deg, #3C8A7E, var(--teal)); }

/* ---------- Étapes ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: step;
}
.step { position: relative; padding-left: 4px; }
.step-num {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 15px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--text-soft); margin: 0; }

@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Bandeau CTA ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--accent-dark), var(--teal));
  border-radius: var(--radius-lg);
  padding: 52px 40px;
  color: #F8F4E8;
  text-align: center;
}
.cta-band h2 { color: #F8F4E8; font-size: 28px; }
.cta-band p { color: #DCE9E1; max-width: 480px; margin: 0 auto 26px; }
.cta-band .hero-ctas { justify-content: center; }
.cta-band .btn-secondary { border-color: rgba(248,244,232,0.4); color: #F8F4E8; }
.cta-band .btn-secondary:hover { background: rgba(248,244,232,0.12); border-color: #F8F4E8; }

@media (max-width: 600px) { .cta-band { padding: 40px 22px; } }

/* ---------- Pied de page ---------- */

footer { border-top: 1px solid var(--border); background: var(--surface-alt); }
.footer-top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand p { color: var(--text-soft); font-size: 13.5px; max-width: 260px; margin-top: 12px; }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--text-soft); font-size: 14px; margin-bottom: 9px; }
.footer-col a:hover { color: var(--accent-dark); }
.footer-bottom {
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 24px;
  font-size: 12.5px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 780px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- Pages légales ---------- */

main.legal { max-width: var(--max-narrow); margin: 0 auto; padding: 48px 24px 72px; }
.legal h1 { font-size: 30px; margin-bottom: 4px; }
.legal .updated { color: var(--text-soft); font-size: 13px; margin-bottom: 32px; }
.legal h2 { font-size: 18px; margin-top: 32px; }
.legal p, .legal li { font-size: 14.5px; color: var(--text); }
.legal ul { padding-left: 22px; }
.legal h3 { font-size: 15.5px; margin-top: 20px; margin-bottom: 6px; }
.legal .lede { font-size: 15.5px; color: var(--text-soft); }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0 8px; }
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.legal-table th { color: var(--text-faint); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 600px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .legal-table td { border: 0; padding: 2px 0; }
  .legal-table td:first-child { font-weight: 600; }
}
.info-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 16px 0;
}
.info-box h3 { margin-top: 0; }
.info-box p:last-child, .info-box ul:last-child { margin-bottom: 0; }
.code-line {
  display: block;
  font-family: Consolas, "Cascadia Mono", Menlo, monospace;
  font-size: 13px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  color: var(--text);
}
.hash-value { overflow-wrap: anywhere; white-space: normal; }
.footer-legal-id { color: var(--text-faint); }

.placeholder {
  background: #FDF3E0;
  border: 1px dashed var(--terracotta);
  color: #8C4712;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 24px;
}

/* ---------- Page Téléchargement ---------- */

.download-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.download-card .os-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-alt);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.download-card .version {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 14px;
}
.download-card .filesize { color: var(--text-faint); }

.req-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.req-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: top;
}
.req-table td:first-child { color: var(--text-faint); width: 40%; font-weight: 600; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 12px;
  align-items: flex-start;
}
.checklist svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }

/* ---------- Page Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
}
.contact-card h3 { font-size: 15px; margin-bottom: 4px; }
.contact-card .big-link { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.contact-card + .contact-card { margin-top: 16px; }

/* ---------- Page Tarifs ---------- */

.price-factors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.factor {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
}
.factor h3 { font-size: 18px; margin-bottom: 8px; }
.factor p { color: var(--text-soft); font-size: 14.5px; margin: 0; }
@media (max-width: 700px) { .price-factors { grid-template-columns: 1fr; } }

.included-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) { .included-grid { grid-template-columns: 1fr; gap: 24px; } }

.note-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.note-card h3 { font-size: 16px; margin-bottom: 8px; }
.note-card p { font-size: 14px; color: var(--text-soft); margin: 0; }

.quote-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-form legend, .field label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 10px;
  padding: 0;
}
.field label { display: block; margin-bottom: 6px; }
.optional { font-weight: 500; color: var(--text-faint); }

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 560px) { .check-grid { grid-template-columns: 1fr; } }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
.check:hover { border-color: #D1C29C; }
.check input { accent-color: var(--accent); margin: 2px 0 0; width: 16px; height: 16px; flex-shrink: 0; }
.check b { display: block; font-size: 14px; color: var(--text); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }

.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field input, .field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 77, 58, 0.15);
}

.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.form-hint { font-size: 13px; color: var(--text-faint); margin: 0; }
@media (max-width: 480px) { .quote-form { padding: 20px; } }

.btn:focus-visible, .nav-link:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:hover, .feature-card:hover { transform: none; }
}

.badge-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.badge-list span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ---------- Achat en ligne (Tarifs), Merci, Bienvenue ---------- */

[hidden] { display: none !important; }

.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.plan-head h3 { font-size: 22px; margin-bottom: 4px; }
.plan-head p { font-size: 14px; color: var(--text-soft); margin: 0; max-width: 360px; }
.plan-price { text-align: right; }
.plan-price .amount {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 28px;
  color: var(--accent-dark);
  line-height: 1.1;
}
.plan-price .per { display: block; font-size: 13px; color: var(--text-faint); margin-top: 2px; }
@media (max-width: 480px) { .plan-price { text-align: left; } }

.segmented {
  display: inline-flex;
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  max-width: 100%;
}
.segmented label {
  position: relative;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.segmented label:has(input:checked) { background: var(--accent); color: #fff; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }

.field input[type="number"] { max-width: 160px; }
.field .field-hint { font-size: 12.5px; color: var(--text-faint); margin: 6px 0 0; }

.tax-note { font-size: 13px; color: var(--text-soft); margin: 0; }

.form-error {
  background: #FBE9E5;
  border: 1px solid #E8B4A9;
  border-left: 4px solid var(--brick);
  color: #7A2316;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  margin: 0;
}
.form-success {
  background: var(--accent-soft);
  border: 1px solid #B9D8C3;
  border-left: 4px solid var(--teal);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  margin: 0;
}

.soon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 26px;
  text-align: center;
}
.soon-card h3 { font-size: 20px; margin-bottom: 8px; }
.soon-card p { color: var(--text-soft); font-size: 14.5px; margin: 0 auto 16px; max-width: 480px; }

.status-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px;
}
@media (max-width: 480px) { .status-card { padding: 22px; } }
.status-card h2 { font-size: 24px; margin-bottom: 8px; }
.status-card > p { color: var(--text-soft); }

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.license-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-alt);
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 8px 0 6px;
}
.license-box code {
  flex: 1 1 220px;
  min-width: 0;
  font-family: Consolas, "Cascadia Mono", Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-dark);
  overflow-wrap: anywhere;
}
.btn-sm { padding: 8px 16px; font-size: 13.5px; }

.next-steps { list-style: none; counter-reset: etape; padding: 0; margin: 18px 0 0; }
.next-steps li {
  counter-increment: etape;
  position: relative;
  padding-left: 46px;
  margin-bottom: 16px;
  font-size: 14.5px;
  color: var(--text);
  min-height: 32px;
}
.next-steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: "Fraunces", serif;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-steps b { color: var(--accent-dark); }

/* ---------- Mouvement (2026-11-12) ----------
   Durées et courbes : jetons --dur-* / --ease-* dans :root. Tout ce bloc est
   annulé par « prefers-reduced-motion: reduce » (fin de fichier). */

/* Apparition au défilement. Ce n'est PAS le CSS qui cache le contenu :
   script.js pose .reveal-pending uniquement sur les éléments encore sous la
   ligne de flottaison. Sans JavaScript, rien n'est jamais masqué. */
.reveal-pending { opacity: 0; transform: translateY(var(--reveal-shift)); }
.reveal-in {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
@media print { .reveal-pending { opacity: 1; transform: none; } }

/* Changement d'état d'un bloc (pages Merci et Bienvenue : attente → clé
   prête, formulaire → terminé ; message d'erreur qui apparaît ; numéro de
   version reçu). Ces blocs passent de [hidden] à visible : l'animation
   rejoue à chaque fois, sans JavaScript de plus. */
@keyframes state-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.status-card > [id^="etat-"],
.status-card > form,
.form-error,
.version.is-updated {
  animation: state-in var(--dur-state) var(--ease-out);
}

/* Petite pulsation de confirmation : clé de licence affichée, mot de passe
   enregistré, texte copié, courriel de soumission préparé. Une seule fois,
   sans rebond. */
@keyframes pulse-ok {
  0% { box-shadow: 0 0 0 0 var(--pulse-ring); transform: scale(1); }
  35% { transform: scale(1.02); }
  100% { box-shadow: 0 0 0 12px transparent; transform: scale(1); }
}
#etat-pret:not([hidden]) .license-box,
#etat-fini:not([hidden]) .form-success {
  animation: pulse-ok var(--dur-pulse) var(--ease-out) var(--dur-state) both;
}
.pulse-ok { animation: pulse-ok var(--dur-pulse) var(--ease-out); }

/* Navigation d'une page à l'autre (amélioration progressive : navigateurs
   compatibles seulement, les autres changent de page comme avant). La page
   fait un fondu enchaîné court et la pastille du lien actif glisse vers le
   nouveau lien, en s'étirant un peu (12 %) dans le sens du mouvement. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
  .nav-indicator { view-transition-name: nav-indicator; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease-out);
}
::view-transition-group(nav-indicator) {
  animation-duration: var(--dur-move);
  animation-timing-function: var(--ease-in-out);
}
::view-transition-image-pair(nav-indicator) {
  animation: nav-stretch var(--dur-move) var(--ease-in-out);
}
@keyframes nav-stretch {
  50% { transform: scaleX(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; transform: none; }
  .btn:active:not(:disabled), .nav-toggle:active { transform: none; }
}