/* Feuille commune des pages publiques : site vitrine, téléchargement, devis.
   Une seule source pour les jetons du système de design et pour la couche
   d'effets. Dupliquer ces valeurs dans chaque page, c'est garantir qu'elles
   divergeront à la première retouche. */

/* ── Jetons ────────────────────────────────────────────────────────────────
   Valeurs livrées par le designer (thème clair). */
:root {
  --fond: #F4F6F8;
  --surface: #FFFFFF;
  --surface-2: #EDF0F3;
  --bordure: #D7DDE3;
  --bordure-app: #8C96A0;      /* focus, survol — 3,01:1 sur blanc */
  --texte: #14181C;
  --texte-2: #5A6673;
  --accent: #2563EB;
  --accent-app: #1D4ED8;
  --accent-doux: #EFF6FF;
  --accent-vif: #60A5FA;       /* variante lumineuse, sur fond sombre */
  --succes: #16A34A;
  --attente: #B45309;
  --alerte: #DC2626;
  --neutre: #4A5560;

  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px; --esp-5: 20px;
  --esp-6: 24px; --esp-7: 32px; --esp-8: 40px; --esp-9: 56px; --esp-10: 72px;

  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-plein: 999px;

  --ombre-1: 0 1px 2px rgba(16,24,32,.06);
  --ombre-2: 0 4px 12px rgba(16,24,32,.10);
  /* Une troisième ombre, RÉSERVÉE aux pages publiques : elles s'affichent sur
     le matériel du visiteur, pas sur les caisses. La contrainte de sobriété
     visait les postes des commerçants. */
  --ombre-3: 0 18px 40px -18px rgba(16,24,32,.28);

  --police: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sortie: cubic-bezier(.16, .84, .28, 1);   /* départ vif, arrivée posée */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--police);
  background: var(--fond); color: var(--texte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-app); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-1); }
img, svg { max-width: 100%; }

/* ── Barre de navigation en verre ──────────────────────────────────────────
   Transparente en haut de page, elle se densifie dès qu'on défile : le contenu
   qui passe dessous reste deviné sans jamais gêner la lecture du menu.
   Repli propre : sans backdrop-filter, on retombe sur un fond opaque. */
.nav-verre {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--sortie), border-color .3s var(--sortie), box-shadow .3s var(--sortie);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav-verre {
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}
.nav-verre.dense {
  background: rgba(255,255,255,.88);
  border-bottom-color: var(--bordure);
  box-shadow: var(--ombre-1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav-verre.dense { background: rgba(255,255,255,.72); }
}

/* ── Apparition au défilement ──────────────────────────────────────────────
   Le contenu est VISIBLE par défaut. C'est le script qui, s'il s'exécute,
   pose « .anim-prete » et autorise l'effet. Une animation qui échoue ne doit
   jamais laisser une section invisible. */
.anim-prete .reveal { opacity: 0; transform: translateY(22px); }
.anim-prete .reveal.vu {
  opacity: 1; transform: none;
  transition: opacity .7s var(--sortie), transform .7s var(--sortie);
}
/* Décalage en cascade pour les éléments d'une même rangée */
.anim-prete .reveal.vu:nth-child(2) { transition-delay: .08s; }
.anim-prete .reveal.vu:nth-child(3) { transition-delay: .16s; }
.anim-prete .reveal.vu:nth-child(4) { transition-delay: .24s; }

/* ── Relief au survol ─────────────────────────────────────────────────────── */
.leve { transition: transform .28s var(--sortie), box-shadow .28s var(--sortie), border-color .28s var(--sortie); }
.leve:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); border-color: var(--bordure-app); }

/* ── Carte en verre, sur fond sombre ou imagé ─────────────────────────────── */
.verre {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-4);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .verre { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* ── Lueur d'accent, discrète, derrière un visuel produit ─────────────────── */
.lueur { position: relative; }
.lueur::before {
  content: ''; position: absolute; inset: -12% -6% 8%;
  background: radial-gradient(60% 50% at 50% 45%, rgba(96,165,250,.22), transparent 70%);
  filter: blur(28px); z-index: -1; pointer-events: none;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 46px; padding: 0 var(--esp-6);
  border: 1px solid transparent; border-radius: var(--r-2);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--sortie), transform .12s var(--sortie), box-shadow .2s var(--sortie);
}
.b-plein { background: var(--accent); color: #fff; }
.b-plein:hover { background: var(--accent-app); color: #fff; box-shadow: var(--ombre-2); }
.b-plein:active { transform: translateY(1px); }
.b-clair { background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.b-clair:hover { border-color: var(--bordure-app); box-shadow: var(--ombre-1); }

/* ── Respect du réglage système ────────────────────────────────────────────
   Un visiteur sensible au mouvement voit la page complète, sans un seul
   déplacement. Ce n'est pas une option, c'est un réglage de son appareil. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .anim-prete .reveal { opacity: 1 !important; transform: none !important; }
  .leve:hover { transform: none; }
}