/* ============================================
   Inter — hébergée par nous, plus par Google
   ============================================
   POURQUOI CES FICHIERS SONT DANS LE DÉPÔT

   Les trois pages chargeaient Inter depuis fonts.googleapis.com, avec deux
   `preconnect` en prime. Concrètement : l'adresse IP de CHAQUE visiteur était
   transmise à Google dès l'ouverture de la page, avant le moindre clic, sans
   consentement et sans que ce soit nécessaire au service. C'est ce que le
   tribunal de Munich a jugé contraire au RGPD en janvier 2022 (LG München I,
   3 O 17493/20), et l'analyse de la CNIL est la même.

   Et le comble : sur iPhone, iPad et Mac, Inter n'était JAMAIS affichée. La
   pile de polices prend `-apple-system` en premier, donc SF. Ces appareils
   payaient le coût en vie privée d'une police qu'ils ne voyaient pas.

   Les fichiers sont désormais servis depuis notre propre domaine. Rien ne part
   plus vers Google, la CSP a pu se resserrer, et la typographie ne change nulle
   part : ce sont exactement les mêmes fichiers, récupérés depuis Google Fonts.

   CE QU'IL FAUT SAVOIR AVANT D'Y TOUCHER

   · Licence SIL Open Font 1.1 — l'auto-hébergement est expressément autorisé,
     à condition de conserver fonts/OFL.txt. Ne le supprimez pas.
   · Ce sont des polices VARIABLES : un seul fichier couvre tous les poids de
     300 à 700. Inutile d'ajouter des fichiers par graisse.
   · Les `unicode-range` ne sont pas décoratifs : ils sont recopiés tels quels
     depuis Google. Grâce à eux, un visiteur français ne télécharge que le
     sous-ensemble `latin` (48 Ko) ; `latin-ext` (85 Ko) n'est cherché que si un
     caractère d'Europe centrale apparaît réellement à l'écran.
   · `font-display: swap` : le texte s'affiche immédiatement dans la police
     système, puis bascule. Jamais de texte invisible pendant le chargement.
   · Si vous remplacez un fichier, RENOMMEZ-LE : /fonts/* est mis en cache un an
     dans _headers, un même nom servirait l'ancienne version pendant des mois.
   ============================================ */
/* ⚠️ L'ORDRE DE CES DEUX BLOCS EST SIGNIFIANT — latin-ext D'ABORD, latin ENSUITE.

   Les deux plages se RECOUVRENT : `œ` (U+0153) est couvert par les deux. Quand
   deux @font-face de même famille couvrent un même caractère, le navigateur
   retient la DERNIÈRE déclarée. Google les sert dans cet ordre exactement pour
   cette raison, et je les avais inversés.

   Le prix de l'inversion, mesuré : une seule occurrence de « maîtrise d'œuvre »
   sur la page d'accueil suffisait à faire télécharger latin-ext — 85 Ko, à
   chaque visiteur, pour une ligature. Remis dans cet ordre, la page d'accueil
   ne charge plus que latin (48 Ko).

   Si vous ajoutez un sous-ensemble, mettez-le AVANT latin. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-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;
}

/* ============================================
   ALBA STUDIO — Landing
   Design tokens
   ============================================ */

:root {
  /* Palette — Studio (default) */
  --bg: #0E1729;
  --bg-2: #131D34;
  --bg-3: #1A2540;
  --surface: #F2F4F8;
  --surface-2: #E9ECF2;
  --ink: #0B1224;
  --ink-2: #2A3553;
  --muted: #5D6880;
  --muted-2: #4C5670;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --line-dark: rgba(15, 24, 48, 0.10);

  /* Text on dark (--bg) surfaces — flips in light/crème modes */
  --on-bg: #E9ECF2;
  --on-bg-rgb: 233, 236, 242;
  /* Text on accent surfaces (buttons, chips) */
  --accent-contrast: #0E0F13;

  --accent: #C9A86A;       /* or */
  --accent-2: #E2C58A;
  --accent-soft: rgba(201, 168, 106, 0.12);
  --accent-line: rgba(201, 168, 106, 0.32);

  --terracotta: #C97E5C;
  --sapin: #2F4A3A;

  /* Type */
  /* Typographie Apple, sans enfreindre sa licence.
     SF Pro ne peut PAS etre servie depuis un site : sa licence la reserve au
     developpement d'applications pour les plateformes Apple. On passe donc par
     la pile systeme — `-apple-system` resout vers SF Pro sur Mac, iPhone et
     iPad, ou elle est deja installee. Rien n'est telechargé, rien n'est
     distribue, et c'est plus rapide qu'une police web.
     Ailleurs (Windows, Android), Inter prend le relais : c'est la police libre
     la plus proche de SF, et elle n'est chargee que si la pile systeme n'a rien
     trouve — un navigateur ne telecharge que les polices qu'il utilise. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Correction de taille des titres.
     Cormorant Garamond avait une hauteur d'x d'environ 0,42 em ; SF et Inter
     sont a 0,52. A taille de fonte egale, les memes titres paraissent donc pres
     de 20 % plus gros et occupent plus de place. Ce facteur les ramene a leur
     encombrement d'avant.
     C'EST LE SEUL CHIFFRE A TOUCHER si les titres paraissent trop grands ou
     trop petits : il s'applique aux dix tailles de titre de la page. */
  --echelle-titres: 0.80;

  /* Spacing scale */
  --section-y: 120px;
  --container: 1240px;
  --container-wide: 1480px;
  --gutter: 32px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-soft: 0 1px 2px rgba(11, 18, 36, 0.04), 0 8px 24px rgba(11, 18, 36, 0.06);
  --shadow-card: 0 1px 2px rgba(11, 18, 36, 0.06), 0 24px 60px -20px rgba(11, 18, 36, 0.18);
  --shadow-deep: 0 30px 80px -30px rgba(0,0,0,0.55);
}

/* Density tweak */
[data-density="dense"] {
  --section-y: 88px;
}
[data-density="airy"] {
  --section-y: 160px;
}

/* Theme: light — full flip, overrides palettes (higher specificity, after palettes) */

/* Palette swap */
[data-palette="sapin"] {
  --bg: #1A2A22;
  --bg-2: #213328;
  --bg-3: #2A4032;
  --accent: #D9C28E;
  --accent-2: #E8D4A6;
  --accent-soft: rgba(217, 194, 142, 0.12);
  --accent-line: rgba(217, 194, 142, 0.32);
}
[data-palette="terracotta"] {
  --bg: #2A1A14;
  --bg-2: #361F18;
  --bg-3: #44261C;
  --accent: #E0A789;
  --accent-2: #EBBFA6;
  --accent-soft: rgba(224, 167, 137, 0.12);
  --accent-line: rgba(224, 167, 137, 0.32);
}
[data-palette="creme"] {
  --bg: #E6E8ED;
  --bg-2: #DBDEE5;
  --bg-3: #CACED8;
  --accent: #8F6E33;
  --accent-2: #75591F;
  --accent-soft: rgba(143, 110, 51, 0.10);
  --accent-line: rgba(143, 110, 51, 0.35);
  --accent-contrast: #F3F4F6;
  --on-bg: #131C33;
  --on-bg-rgb: 19, 28, 51;
  --line: rgba(11, 18, 36, 0.08);
  --line-strong: rgba(11, 18, 36, 0.2);
}

/* Thème clair — celui qu'on sert désormais.
   Blanc et gris de l'application, en alternance : c'est le rythme d'Apple, deux
   valeurs très proches qui séparent les sections sans jamais les colorer.
   Le bleu nuit ne disparaît pas, il redevient ce qu'il aurait dû rester : une
   touche. Il survit dans le texte (--ink), les maquettes d'application, les
   cadres d'appareil et le liseré du haut. */
body[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-2: #F2F4F8;
  --bg-3: #E9ECF2;
  --accent: #96712F;
  --accent-2: #7C5D26;
  --accent-soft: rgba(150, 113, 47, 0.10);
  --accent-line: rgba(150, 113, 47, 0.35);
  --accent-contrast: #F3F4F6;
  --on-bg: #131C33;
  --on-bg-rgb: 19, 28, 51;
  --line: rgba(11, 18, 36, 0.08);
  --line-strong: rgba(11, 18, 36, 0.2);
}

/* ============================================
   Reset
   ============================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.btn:hover, .brand:hover, .nav-links a:hover, .foot-col a:hover { color: inherit; }
.nav-links a:hover { color: var(--on-bg); }
.foot-col a:hover { color: var(--accent); }
/* Aucun defilement horizontal, jamais.
   La page en presentait sur iPhone : le contenu partait a droite et se coupait a
   gauche. Mesure en Chromium a 360, 390 et 430 px, le debordement n'etait que de
   1 a 7 px — beaucoup moins que ce que montrait l'appareil. Faute de pouvoir
   reproduire Safari iOS depuis ici, on traite la cause connue ET on rend le
   symptome impossible.

   `clip` et non `hidden` : `hidden` cree un conteneur de defilement, ce qui
   casse `position: sticky` — utilise a six endroits dans ce projet, dont la
   barre du carrousel et la carte tarifaire. `clip` rogne sans creer ce
   conteneur. Les navigateurs qui ne le connaissent pas ignorent la declaration :
   ils retrouvent le comportement d'avant, rien n'est casse. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* Lisible par les lecteurs d'écran et les moteurs, invisible à l'œil.
   Sert au <h1> de la page tarifs : son titre principal est un <h2>, parce que le
   composant est partagé avec l'accueil où ce niveau est le bon. Une page sans
   <h1> perd un repère que les moteurs utilisent. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Selection + scrollbar in brand colors */
::selection {
  background: var(--accent);
  color: #0E0F13;
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0A0F1E; }
::-webkit-scrollbar-thumb {
  background: #2A3553;
  border-radius: 6px;
  border: 3px solid #0A0F1E;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Keyboard focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================
   Type
   ============================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.display {
  font-family: var(--font-display);
  /* 600 et non 500 : a taille de titre, SF et Inter paraissent plus legeres
     qu'un serif de meme graisse nominale. */
  font-weight: 600;
  /* Apple resserre ses grands titres d'environ 2,5 %. Au-dela (-0,04em), les
     lettres se touchent des que la taille depasse 70 px. */
  letter-spacing: -0.025em;
  /* 1,02 convenait a un serif a petite hauteur d'x ; une grotesque a besoin
     d'un peu plus d'air sous peine de voir les jambages se toucher. */
  line-height: 1.06;
}
/* L'emphase ne peut plus reposer sur l'italique : l'italique de SF est un
   oblique discret, sans le contraste qu'avait celui de Cormorant. On la porte
   par la couleur d'accent et par un contraste de graisse — c'est d'ailleurs le
   procede d'Apple sur ses propres pages. */
.display em {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}

/* ============================================
   Layout
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  position: relative;
}

.section {
  padding: var(--section-y) 0;
}

.section-dark {
  background: var(--bg);
  color: var(--on-bg);
}

.section-cream {
  background: var(--surface);
  color: var(--ink);
}

.section-cream-2 {
  background: var(--surface-2);
  color: var(--ink);
}

/* Custom cursor — no mix-blend-mode (GPU blending over the whole page is expensive) */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C9A86A;
  transition: width .2s ease, height .2s ease, background .2s;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(201, 168, 106, 0.55);
  border-radius: 50%;
  transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s;
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  background: rgba(201, 168, 106, 0.15);
  border-color: rgba(201, 168, 106, 0.8);
}
.cursor-dot.hover { width: 4px; height: 4px; }

@media (max-width: 900px), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================
   Reveal animation
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Fondu sortant : quand on remonte, la sortie est rapide et sans délai échelonné */
.reveal:not(.in) {
  transition-duration: .45s, .45s;
  transition-delay: 0ms;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px rgba(201, 168, 106, 0.6);
}
.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}
/* Bouton inverse : il prend toujours le contraire du fond de sa section.
   `color: #0E1729` etait ecrit en dur — en theme clair, --on-bg devient sombre
   et le texte sombre disparaissait sur un bouton sombre. En le liant a --bg,
   l'inversion tient dans les deux themes. */
.btn-cream {
  background: var(--on-bg);
  color: var(--bg);
  border-color: var(--on-bg);
}
.btn-cream:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }

.btn-arrow {
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ============================================
   Nav
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--on-bg);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  /* La marque ne rétrécit pas et ne se coupe pas. Sans cela, dès que la barre
     se resserre, flexbox la comprime et « ALBA Studio » passe sur deux lignes —
     c'est arrivé en ajoutant le lien de connexion. */
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.brand-mark img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  display: block;
}
.nav-links {
  display: flex; gap: 28px;
  font-size: 13px;
  color: rgba(var(--on-bg-rgb), 0.75);
}
.nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.nav-links a:hover { color: var(--on-bg); }
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }

@media (max-width: 820px) {
  .nav-links { display: none; }
}

/* Burger (mobile only) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  padding: 0 10px;
  transition: border-color .25s;
}
.nav-burger span {
  display: block;
  height: 1.5px;
  background: var(--on-bg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
/* Lien « Se connecter » de la barre.
   Volontairement discret : il emprunte exactement la grammaire de .nav-links a
   — meme taille, meme couleur, meme soulignement dore au survol — pour ne pas
   entrer en concurrence avec le bouton d'essai, qui reste l'action principale. */
/* ============================================
   Bascule de langue (barre de navigation)
   ============================================

   Ce bloc vivait dans notifications.css. Conséquence : la page tarifs, qui ne
   charge que styles.css et sections.css, affichait deux boutons nus au lieu de
   la pastille — l'accueil, lui, était correct, parce qu'il charge quatorze
   feuilles dont celle-là.

   C'est le piège des feuilles de style découpées par section : un composant de
   la BARRE n'a rien à faire dans celle des notifications, et l'erreur ne se
   voit que sur les pages qui n'ont pas la chance de tout charger. Il est
   désormais avec le reste de la barre, dans la seule feuille que toutes les
   pages chargent. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(var(--on-bg-rgb), 0.5);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
}
.lang-toggle button {
  border: 0;
  background: transparent;
  color: rgba(var(--on-bg-rgb), 0.55);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.lang-toggle button:hover { color: var(--on-bg); }
.lang-toggle button.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.nav-login {
  position: relative;
  padding: 4px 0;
  font-size: 13px;
  color: rgba(var(--on-bg-rgb), 0.75);
  transition: color .2s;
  white-space: nowrap;
}
.nav-login:hover { color: var(--on-bg); }
.nav-login::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .3s ease;
}
.nav-login:hover::after { width: 100%; }

@media (max-width: 820px) {
  .nav-burger { display: flex; }
  #nav-cta { display: none; }
}

/* « Se connecter » disparaît de la barre bien avant le seuil du menu mobile.
   Mesure : la barre complète réclame 1146 px de contenu, dont 100 px pour ce
   lien et sa gouttière. En deçà, flexbox comprime la marque et « ALBA Studio »
   se coupe en deux. Le lien reste atteignable — il est repris dans le menu
   déroulant, et il y a un « Se connecter » dans le pied de page. */
@media (max-width: 1200px) {
  .nav-login { display: none; }
}

/* Au-dessus du seuil, la barre porte un élément de plus et doit tenir sur UNE
   ligne : sans cela un libellé se coupe en plein milieu (« La / plateforme »).
   La règle est volontairement bornée à cette plage — en dessous, le lien de
   connexion a disparu et la barre se comporte exactement comme avant son ajout. */
@media (min-width: 1201px) {
  .nav-links a { white-space: nowrap; }
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* Clair comme le reste de la page. Il etait le dernier voile sombre.
     Son texte redevient donc dependant du theme : il avait ete fige en clair
     tant que ce fond l'etait, ce qui n'a plus lieu d'etre. */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  /* Le voile couvre TOUT l'écran, barre comprise : sans réserve en haut, le
     premier lien venait se coller sous le logo. `justify-content: center`
     centrait bien le bloc, mais dans une hauteur qui incluait la barre.
     On réserve sa hauteur, et on autorise le défilement : six liens, un lien
     de connexion et un bouton ne tiennent pas sur un petit téléphone. */
  padding: 104px 20px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mobile-menu-links a {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-bg);
  padding: 8px 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), color .25s;
}
.mobile-menu.open .mobile-menu-links a {
  opacity: 1;
  transform: translateY(0);
}

/* « Se connecter » dans le menu mobile.
   Sous 820 px, la barre masque le lien : sans cette reprise il deviendrait
   inatteignable au telephone. Meme sobriete que dans la barre — un lien, pas un
   second bouton qui concurrencerait l'essai gratuit. */
.mobile-menu-login {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 15px;
  color: rgba(var(--on-bg-rgb), 0.7);
  transition: color .2s;
}
.mobile-menu-login:hover { color: var(--accent); }
.mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: .06s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: .12s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: .18s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: .24s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5) { transition-delay: .3s; }
.mobile-menu.open .mobile-menu-links a:nth-child(6) { transition-delay: .36s; }
.mobile-menu-links a:hover { color: var(--accent); }
.mobile-menu-cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s .42s, transform .5s .42s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu.open .mobile-menu-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Decorative bits
   ============================================ */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--on-bg-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--on-bg-rgb), 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
}

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* utility */
.row { display: flex; align-items: center; gap: 16px; }
.col { display: flex; flex-direction: column; }
.center { text-align: center; }

/* ============================================
   Liseret français — touches tricolores discrètes
   ============================================ */
.liseret-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 300;
  background: linear-gradient(90deg,
    #2B4C9B 0 33.4%,
    #DCDFE5 33.4% 66.7%,
    #C74A4A 66.7% 100%);
  opacity: 0.9;
  pointer-events: none;
}
.fr-flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  vertical-align: -1px;
  background: linear-gradient(90deg,
    #2B4C9B 0 33.4%,
    #DCDFE5 33.4% 66.7%,
    #C74A4A 66.7% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.liseret-under {
  display: block;
  width: 44px;
  height: 2px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg,
    #2B4C9B 0 33.4%,
    #DCDFE5 33.4% 66.7%,
    #C74A4A 66.7% 100%);
  opacity: 0.75;
}


/* ============================================
   MOBILE EXPERIENCE — global overrides
   ============================================ */
@media (max-width: 720px) {
  :root {
    --section-y: 72px;
    --gutter: 20px;
  }
  [data-density="airy"] { --section-y: 92px; }
  [data-density="dense"] { --section-y: 60px; }

  /* Hero */
  .hero { padding-top: 108px; }
  .hero h1 { font-size: calc(clamp(38px, 11vw, 52px) * var(--echelle-titres)); }
  .hero-sub { font-size: 15px; padding: 0 8px; }
  .hero-actions { flex-direction: column; width: 100%; padding: 0 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-essai-note { font-size: 12.5px; padding: 0 12px; }
  .hero-mockup-wrap { margin-top: 48px; }

  /* Section headers */
  .s-head { margin-bottom: 40px; }
  .s-head p { font-size: 15px; }

  /* Buttons: full-width comfort in CTA groups */
  .final-cta .actions { flex-direction: column; width: 100%; padding: 0 12px; }
  .final-cta .actions .btn { width: 100%; justify-content: center; }

  /* Marquee logos */
  .mq-item { font-size: 20px; margin-right: 40px; gap: 18px; }
  .mq-item.mono { font-size: 11px; }
  .logos-eyebrow { font-size: 20px; padding: 0 16px; }

  /* Grain off on mobile (perf) */
  .grain { display: none; }
}

/* Touch devices: disable hover-dependent niceties */
@media (pointer: coarse) {
  .grain { animation: none; opacity: 0.03; }
}


/* ============ Badges App Store / Google Play ============ */
.store-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 11px; padding: 8px 15px 8px 13px;
  text-decoration: none; transition: border-color .25s, background .25s, transform .25s;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge i {
  font-style: normal; font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65;
}
.store-badge b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.store-badges.light .store-badge {
  border: 1px solid rgba(11, 18, 36, 0.16); background: rgba(255, 255, 255, 0.7); color: var(--ink);
}
.store-badges.light .store-badge:hover { border-color: var(--accent); background: #fff; }
.store-badges.dark .store-badge {
  border: 1px solid rgba(var(--on-bg-rgb), 0.2); background: rgba(var(--on-bg-rgb), 0.05); color: var(--on-bg);
}
.store-badges.dark .store-badge:hover { border-color: var(--accent); background: rgba(var(--on-bg-rgb), 0.1); }
.store-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 44ch;
}
.store-badges.dark .store-note { color: rgba(var(--on-bg-rgb), 0.72); }
.store-badges.light .store-note { color: rgba(11, 18, 36, 0.62); }
.foot-apps { margin-top: 26px; }
.foot-apps h5 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(var(--on-bg-rgb), 0.5); margin: 0;
}
.foot-apps .store-badges { margin-top: 12px; }
@media (max-width: 560px) { .store-badge { padding: 7px 13px 7px 11px; } .store-badge b { font-size: 12.5px; } }