/* ── Polices auto-hebergees ───────────────────────────────────────
   Telechargees depuis Google Fonts et servies depuis /landing/fonts/.
   Supprime deux resolutions DNS + handshakes TLS avant le premier pixel,
   et evite de transmettre l'IP des visiteurs a un tiers hors UE.
   unicode-range : le navigateur ne telecharge un fichier que si la page
   contient reellement un caractere de son sous-ensemble. */
@font-face{font-family:'Karla'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/landing/fonts/karla-latin-400-italic.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:'Karla'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/landing/fonts/karla-latin-300-700-normal.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:'Karla'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/landing/fonts/karla-latin-ext-400-italic.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:'Karla'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/landing/fonts/karla-latin-ext-300-700-normal.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:'Newsreader'; font-style:italic; font-weight:600; font-display:swap;
  src:url('/landing/fonts/newsreader-latin-600-italic.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:'Newsreader'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/landing/fonts/newsreader-latin-400-700-normal.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:'Newsreader'; font-style:italic; font-weight:600; font-display:swap;
  src:url('/landing/fonts/newsreader-latin-ext-600-italic.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:'Newsreader'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/landing/fonts/newsreader-latin-ext-400-700-normal.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:'Noto Kufi Arabic'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/landing/fonts/noto-kufi-arabic-arabic-400-700-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}


/* ══════════════════════════════════════════════════════════════════
   EduBayan — landing page
   Direction : « manuscrit moderne ». Lapis + or, filets fins,
   tessellation géométrique, typographie éditoriale.

   Les neutres, rayons et ombres reprennent frontend/lib/core/theme/
   app_theme.dart pour que la page et l'application partagent la même
   grammaire. Seule la teinte primaire diffère : marine côté vitrine
   (couleur du logo), vert côté application.

   Les prix affichés dans #tarifs doivent rester synchronisés avec
   backend/src/database/migrations/1777900800000-SeedSubscriptionPlans.ts
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Lapis — primaire vitrine, extrait du logo */
  --lapis-950:#0E1D38; --lapis-900:#14294D; --lapis-800:#1B3D74;
  --lapis-700:#27497B; --lapis-500:#4A6EA5; --lapis-300:#9FB2CE;
  /* Or — accent, extrait du logo */
  --gold-700:#8A5D0E; --gold-600:#C98A1E; --gold-500:#E2A12E; --gold-300:#E9C87F; --gold-100:#F6E7C4;
  /* --gold-700 : seule teinte doree qui atteint 4.5:1 sur parchemin.
     Reservee au texte ; les filets et losanges gardent --gold-500. */
  /* Vert de l'application — pont visuel vers /login */
  --verd-700:#1B6B3A; --verd-500:#2E8B57; --verd-100:#E7F4EC;
  /* Rôles, repris de AppColors.forRole */
  --role-admin:#1B6B3A; --role-teacher:#1565C0; --role-parent:#6A1B9A;
  /* Neutres chauds */
  --parchment:#FBF7EF; --parchment-2:#F5EFE3; --paper:#FFFFFF;
  --ink:#14202E; --ink-2:#5A6473; --ink-3:#67707F;
  --rule:#E4DCCB; --rule-strong:#D3C7AE;
  /* Chrome sombre de l'application, pour la maquette produit */
  --shell:#1A1D2E; --shell-2:#252A41; --shell-3:#313754;
  /* Ombres — mêmes valeurs que l'application */
  --sh-card:0 6px 16px rgba(15,23,42,.122);
  --sh-lift:0 10px 24px rgba(15,23,42,.122);
  --sh-hero:0 12px 30px rgba(15,23,42,.122);
  --sh-deep:0 30px 60px -20px rgba(8,18,38,.55);
  /* Rayons — mêmes valeurs que l'application */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  /* Rythme */
  --wrap:1280px; --gutter:clamp(20px,5vw,64px);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Karla',ui-sans-serif,'Segoe UI',Roboto,sans-serif;
  --kufi:'Noto Kufi Arabic','Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.015em}

p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px; border-radius:4px}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--lapis-900); color:#fff; padding:12px 20px; border-radius:var(--r-sm);
}
.skip:focus{left:12px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,132px); position:relative; scroll-margin-top:92px}

/* ── Motifs de fond ───────────────────────────────────────────────
   Étoile à huit branches (deux carrés superposés) en tessellation,
   la grammaire géométrique la plus commune de l'ornement islamique. */
.girih__pat{
  position:absolute; inset:-172px 0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23E2A12E' stroke-width='1'%3E%3Crect x='21' y='21' width='42' height='42'/%3E%3Crect x='21' y='21' width='42' height='42' transform='rotate(45 42 42)'/%3E%3C/g%3E%3Cg fill='%23E2A12E'%3E%3Crect x='40' y='-2' width='4' height='4' transform='rotate(45 42 0)'/%3E%3Crect x='40' y='82' width='4' height='4' transform='rotate(45 42 84)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px; opacity:.055;
}
.girih--ink .girih__pat{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%231B3D74' stroke-width='1'%3E%3Crect x='21' y='21' width='42' height='42'/%3E%3Crect x='21' y='21' width='42' height='42' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.032;
}
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── Éléments d'écriture éditoriale ──────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.72rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-700); margin:0 0 22px;
}
.eyebrow--light{color:var(--gold-300)}
.eyebrow .lozenge{width:7px; height:7px; background:var(--gold-500); transform:rotate(45deg); flex:none}
.eyebrow .bar{width:38px; height:2px; background:var(--gold-500); flex:none}
.eyebrow--light .lozenge,.eyebrow--light .bar{background:currentColor}

.h-display{font-size:clamp(2.45rem,4.6vw,3.75rem)}
.h-section{font-size:clamp(2.05rem,4.2vw,3.2rem)}
.h-card{font-size:1.34rem; letter-spacing:-.01em}
.serif-em{font-style:italic; color:var(--gold-500); font-weight:600}

.lede{font-size:clamp(1.06rem,1.55vw,1.22rem); line-height:1.62; color:var(--ink-2); max-width:56ch}
.lede--light{color:var(--lapis-300)}

.rule-gold{height:1px; background:linear-gradient(90deg,var(--gold-500),rgba(226,161,46,0));border:0}
.rule-warm{height:1px; background:var(--rule); border:0}

/* ── Boutons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:var(--r);
  font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, background-color .22s, color .22s, border-color .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold-500); color:var(--lapis-950); box-shadow:0 6px 18px rgba(226,161,46,.32)}
.btn--gold:hover{background:var(--gold-300); box-shadow:0 12px 26px rgba(226,161,46,.4)}
.btn--ghost-light{border-color:rgba(255,255,255,.28); color:#fff}
.btn--ghost-light:hover{border-color:var(--gold-300); color:var(--gold-300); background:rgba(226,161,46,.08)}
.btn--navy{background:var(--lapis-800); color:#fff; box-shadow:var(--sh-card)}
.btn--navy:hover{background:var(--lapis-700); box-shadow:var(--sh-lift)}
.btn--ghost{border-color:var(--rule-strong); color:var(--lapis-800); background:transparent}
.btn--ghost:hover{border-color:var(--lapis-800); background:rgba(27,61,116,.05)}
.btn--sm{min-height:44px; padding:0 20px; font-size:.94rem; border-radius:var(--r-sm)}
.btn .arrow{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arrow{transform:translateX(4px)}

/* ══ En-tête ══════════════════════════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  background:rgba(14,29,56,0); border-bottom:1px solid transparent;
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
}
.nav.is-stuck{background:rgba(14,29,56,.9); border-bottom-color:rgba(226,161,46,.22); backdrop-filter:blur(14px) saturate(140%)}
.nav__in{display:flex; align-items:center; gap:28px; height:80px; transition:height .3s cubic-bezier(.2,.7,.3,1)}
.nav.is-stuck .nav__in{height:66px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; flex:none}
.brand__mark{
  width:42px; height:42px; border-radius:var(--r-sm); flex:none;
  background:var(--parchment); display:grid; place-items:center; padding:5px;
  box-shadow:0 2px 10px rgba(8,18,38,.3);
}
.brand__mark img{width:100%}
.brand__name{font-family:var(--serif); font-size:1.32rem; font-weight:700; color:#fff; letter-spacing:-.02em}
.brand__name span{color:var(--gold-500)}
.nav__links{position:relative; display:flex; align-items:center; gap:4px; margin-inline-start:auto}
.nav__links a{
  padding:9px 15px; border-radius:var(--r-xs); text-decoration:none;
  font-size:.94rem; font-weight:500; color:rgba(255,255,255,.8); transition:color .2s, background-color .2s;
}
.nav__links a:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav__links a.is-current{color:#fff}
/* Indicateur unique qui glisse d'un lien a l'autre, plutot qu'un fond
   par lien : un seul objet en mouvement se lit mieux. */
.nav__ind{
  position:absolute; bottom:1px; inset-inline-start:0; width:0; height:2px; opacity:0;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300)); border-radius:2px; pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), width .4s cubic-bezier(.2,.7,.3,1), opacity .25s;
}
/* Progression de lecture, sur le bord bas de l'en-tete. */
.nav__prog{
  position:absolute; inset:auto 0 0; height:2px; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-700),var(--gold-500) 55%,var(--gold-300));
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.nav.is-stuck .nav__prog{opacity:1}
.nav__cta{display:flex; align-items:center; gap:10px; flex:none}
.nav__burger{
  display:none; width:46px; height:46px; margin-inline-start:auto; flex:none;
  background:transparent; border:1.5px solid rgba(255,255,255,.28); border-radius:var(--r-sm);
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{display:block; width:19px; height:1.5px; background:#fff; transition:transform .25s, opacity .25s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ══ Héros ════════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden; color:#fff;
  padding-block:clamp(128px,15vw,178px) clamp(56px,7vw,84px);
  background:
    radial-gradient(1100px 640px at 78% 6%, rgba(39,73,123,.85), transparent 62%),
    radial-gradient(760px 520px at 6% 96%, rgba(226,161,46,.14), transparent 66%),
    linear-gradient(168deg, var(--lapis-900) 0%, var(--lapis-950) 100%);
}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(36px,4.4vw,64px); align-items:center; position:relative; z-index:2}
.hero h1{color:#fff; margin-bottom:26px; text-wrap:balance}
.hero .lede{margin-bottom:38px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px}
.hero__facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-top:30px; border-top:1px solid rgba(226,161,46,.26)}
.hero__fact dt{font-family:var(--serif); font-size:clamp(1.06rem,1.35vw,1.26rem); font-weight:600; color:var(--gold-300); margin-bottom:5px; line-height:1.15}
.hero__fact dd{margin:0; font-size:.87rem; line-height:1.45; color:var(--lapis-300)}

/* ── Maquette produit, composée en CSS ────────────────────────────
   Reprend les tokens réels de l'application : chrome #1A1D2E,
   fond chaud, accent vert, couleurs de matières de subject_color.dart */
.mock{
  position:relative; transform-style:preserve-3d; will-change:transform;
  transform:perspective(1500px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(-1.1deg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.mock__frame{
  position:absolute; inset:20px -20px -20px 20px; border:1px solid rgba(226,161,46,.42);
  border-radius:var(--r-xl); pointer-events:none;
}
.mock__win{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--paper); box-shadow:var(--sh-deep);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.mock:hover .mock__win{transform:translateY(-5px)}
/* Reflet lent qui traverse la fenetre : le seul signe que la maquette
   n'est pas une image morte. Un cycle de 13 s, sweep de 2,3 s. */
.mock__win::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(102deg,transparent 44%,rgba(255,255,255,.05) 47%,rgba(255,255,255,.3) 49.5%,rgba(255,255,255,.05) 52%,transparent 55%);
  transform:translateX(-125%);
  animation:sheen 13s cubic-bezier(.42,0,.58,1) 2.2s infinite;
}
/* Jauge de presence : se remplit jusqu'a 94 %, tient, puis repart. */
.mock__meter{display:block; height:3px; margin-top:9px; border-radius:2px; background:#E7ECF2; overflow:hidden}
.mock__meter em{
  display:block; height:100%; width:94%; border-radius:2px; margin:0;
  background:linear-gradient(90deg,var(--verd-700),var(--verd-500));
  transform-origin:0 50%; animation:meter 13s cubic-bezier(.2,.7,.3,1) infinite;
}
.mock__tile i.is-live{display:inline-block; animation:badge-in 13s ease-out infinite}
.mock__bar{display:flex; align-items:center; gap:9px; padding:11px 16px; background:var(--shell); border-bottom:1px solid rgba(255,255,255,.07)}
.mock__dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.2)}
.mock__url{
  margin-inline-start:8px; flex:1; font-size:.68rem; color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.06); border-radius:999px; padding:4px 12px; letter-spacing:.02em;
}
.mock__body{display:grid; grid-template-columns:152px minmax(0,1fr); min-height:392px}
.mock__side{background:var(--shell); padding:16px 12px; display:flex; flex-direction:column; gap:3px}
.mock__logo{display:flex; align-items:center; gap:9px; padding:4px 6px 16px}
.mock__logo i{width:26px; height:26px; border-radius:7px; background:var(--verd-700); display:block; flex:none; position:relative}
.mock__logo i::after{content:''; position:absolute; inset:7px; border:1.5px solid rgba(255,255,255,.85); border-radius:2px}
.mock__logo b{font-family:var(--serif); font-size:.82rem; color:#fff; font-weight:700; letter-spacing:.02em}
.mock__nav{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; font-size:.72rem; color:rgba(255,255,255,.55)}
.mock__nav u{width:6px; height:6px; border-radius:2px; background:currentColor; flex:none; opacity:.75; text-decoration:none}
.mock__nav.is-on{background:var(--verd-700); color:#fff; font-weight:700}
.mock__nav.is-on u{opacity:1; background:var(--gold-300)}
.mock__main{background:#F7F8F3; padding:18px 20px 22px}
.mock__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
.mock__head h4{font-size:1rem; color:var(--ink)}
.mock__head em{font-style:normal; font-size:.68rem; color:var(--ink-3)}
.mock__tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:16px}
.mock__tile{background:#FCFDFE; border:1px solid #E2E8F0; border-radius:14px; padding:11px 12px; box-shadow:0 4px 12px rgba(15,23,42,.06)}
.mock__tile s{display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); text-decoration:none; margin-bottom:5px}
.mock__tile b{font-family:var(--serif); font-size:1.32rem; font-weight:700; color:var(--ink); line-height:1}
.mock__tile i{font-style:normal; font-size:.62rem; font-weight:700; margin-inline-start:6px}
.mock__grid{background:#FCFDFE; border:1px solid #E2E8F0; border-radius:14px; padding:11px; box-shadow:0 4px 12px rgba(15,23,42,.06)}
.mock__days{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:7px}
.mock__days span{font-size:.57rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); text-align:center}
.mock__slots{display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:29px; gap:6px}
.mock__slot{border-radius:7px; font-size:.55rem; font-weight:700; display:grid; place-items:center; padding:0 3px; text-align:center; line-height:1.15}
.mock__slot--void{background:repeating-linear-gradient(135deg,#F1F5F9 0 5px,transparent 5px 10px); border-radius:7px}

/* ── Bandeau de confiance ────────────────────────────────────────── */
.trust{position:relative; background:var(--lapis-950); border-top:1px solid rgba(226,161,46,.2); padding-block:26px; overflow:hidden}
.trust ul{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px}
.trust li{display:flex; align-items:center; gap:11px; font-size:.86rem; color:var(--lapis-300); letter-spacing:.01em}
.trust li::before{content:''; width:6px; height:6px; background:var(--gold-500); transform:rotate(45deg); flex:none}

/* ══ Rôles ════════════════════════════════════════════════════════ */
.roles{background:var(--parchment)}
.sec-head{max-width:64ch; margin-bottom:clamp(44px,5vw,64px)}
.sec-head h2{margin-bottom:20px; text-wrap:balance}
.roles__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.role{
  position:relative; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:26px 24px 28px; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.role::before{content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--accent)}
.role:hover{transform:translateY(-5px); box-shadow:var(--sh-lift); border-color:var(--rule-strong)}
.role__n{font-family:var(--serif); font-size:.8rem; font-weight:700; color:var(--accent); letter-spacing:.12em; display:block; margin-bottom:16px}
.role h3{margin-bottom:11px}
.role p{font-size:.95rem; color:var(--ink-2); line-height:1.55; margin-bottom:18px}
.role ul{display:flex; flex-direction:column; gap:7px}
.role li{font-size:.87rem; color:var(--ink-2); padding-inline-start:17px; position:relative}
.role li::before{content:''; position:absolute; inset-inline-start:0; top:.55em; width:5px; height:5px; background:var(--accent); transform:rotate(45deg)}

/* ══ Fonctionnalités — liste éditoriale, pas une grille de cartes ══ */
.features{background:var(--parchment-2); border-block:1px solid var(--rule); overflow:hidden}
.feat__list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(36px,5vw,72px)}
.feat{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; padding:26px 0; border-top:1px solid var(--rule)}
.feat__n{font-family:var(--serif); font-size:.86rem; font-weight:600; color:var(--gold-700); padding-top:5px; font-variant-numeric:tabular-nums}
.feat h3{font-size:1.14rem; margin-bottom:7px; letter-spacing:-.005em}
.feat p{font-size:.94rem; color:var(--ink-2); line-height:1.55}

/* ══ Bilingue ═════════════════════════════════════════════════════ */
.bilingual{position:relative; overflow:hidden; color:#fff; background:linear-gradient(168deg,var(--lapis-900),var(--lapis-950))}
.bilingual .wrap{position:relative; z-index:2}
.bilingual__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(36px,5vw,68px); align-items:center}
.bilingual h2{color:#fff; margin-bottom:20px}
.bilingual .lede{margin-bottom:28px}
.bi__points{display:flex; flex-direction:column; gap:13px}
.bi__points li{display:flex; gap:13px; font-size:.96rem; color:rgba(255,255,255,.88); line-height:1.5}
.bi__points li::before{content:''; width:7px; height:7px; margin-top:.5em; background:var(--gold-500); transform:rotate(45deg); flex:none}

.mirror{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.pane{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:18px; backdrop-filter:blur(4px);
}
.pane__tag{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-300); margin-bottom:15px; padding-bottom:11px; border-bottom:1px solid rgba(226,161,46,.24);
}
.pane__tag b{font-weight:700; letter-spacing:0; text-transform:none; font-size:.82rem; color:#fff}
.pane--ar{direction:rtl; text-align:right}
.pane--ar .pane__tag b{font-family:var(--kufi); font-size:.78rem}
.pane__nav{display:flex; flex-direction:column; gap:4px}
.pane__nav li{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  font-size:.85rem; color:rgba(255,255,255,.7);
}
.pane--ar .pane__nav li{font-family:var(--kufi); font-size:.8rem}
.pane__nav li::before{content:''; width:6px; height:6px; border-radius:2px; background:currentColor; opacity:.6; flex:none}
.pane__nav li.is-on{background:rgba(27,107,58,.85); color:#fff; font-weight:700}
.pane__nav li.is-on::before{background:var(--gold-300); opacity:1}
.pane__foot{margin-top:15px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1); font-size:.7rem; color:var(--lapis-300); display:flex; justify-content:space-between; gap:8px}
.pane--ar .pane__foot{font-family:var(--kufi); font-size:.66rem}

/* ══ Sécurité ═════════════════════════════════════════════════════ */
.security{background:var(--parchment)}
.sec__grid{display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); gap:clamp(36px,5vw,72px)}
.sec__list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 28px}
.sec__list li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:15px 0; border-bottom:1px solid var(--rule)}
.sec__list .lz{width:9px; height:9px; margin-top:.42em; background:var(--verd-700); transform:rotate(45deg); flex:none}
.sec__list b{display:block; font-size:.97rem; font-weight:700; color:var(--ink); margin-bottom:3px}
.sec__list span{font-size:.86rem; color:var(--ink-2); line-height:1.5}

/* ══ Tarifs ═══════════════════════════════════════════════════════ */
.pricing{background:var(--parchment-2); border-block:1px solid var(--rule)}
.pricing .sec-head{margin-inline:auto; text-align:center; max-width:60ch}
.pricing .eyebrow{justify-content:center}
.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch}
.plan{
  position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--rule); border-radius:var(--r-lg); padding:28px 24px 26px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.plan:hover{transform:translateY(-5px); box-shadow:var(--sh-lift)}
.plan__name{font-family:var(--serif); font-size:1.24rem; font-weight:700; margin-bottom:5px}
.plan__for{font-size:.83rem; color:var(--ink-3); margin-bottom:20px; min-height:4.2em; line-height:1.4}
.plan__price{display:flex; align-items:baseline; gap:5px; margin-bottom:4px}
.plan__price b{font-family:var(--serif); font-size:2.5rem; font-weight:700; line-height:1; letter-spacing:-.03em}
.plan__price s{text-decoration:none; font-size:.9rem; color:var(--ink-2)}
.plan__cad{font-size:.76rem; color:var(--ink-3); margin-bottom:22px}
.plan__cap{
  display:flex; align-items:baseline; gap:8px; padding:14px 0 18px; margin-bottom:18px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.plan__cap b{font-family:var(--serif); font-size:1.5rem; font-weight:700; line-height:1}
.plan__cap span{font-size:.83rem; color:var(--ink-2)}
.plan__inc{font-size:.86rem; color:var(--ink-2); line-height:1.5; margin-bottom:22px; flex:1}
.plan .btn{width:100%}
.plan--star{
  background:linear-gradient(165deg,var(--lapis-900),var(--lapis-950));
  border-color:var(--gold-500); color:#fff; position:relative;
  box-shadow:var(--sh-hero);
}
.plan--star .plan__for,.plan--star .plan__cad{color:var(--lapis-300)}
.plan--star .plan__price s,.plan--star .plan__cap span,.plan--star .plan__inc{color:rgba(255,255,255,.8)}
.plan--star .plan__cap{border-color:rgba(226,161,46,.3)}
.plan--star .plan__price b,.plan--star .plan__cap b{color:var(--gold-300)}
.plan__flag{
  position:absolute; top:-11px; inset-inline-start:24px; background:var(--gold-500); color:var(--lapis-950);
  font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 13px; border-radius:999px;
}
.pricing__note{
  margin-top:34px; text-align:center; font-size:.87rem; color:var(--ink-2);
  max-width:70ch; margin-inline:auto; line-height:1.6;
}

/* ══ FAQ ══════════════════════════════════════════════════════════ */
.faq{background:var(--parchment)}
.faq__grid{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(32px,5vw,72px)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex; align-items:flex-start; gap:16px; padding:22px 0; cursor:pointer;
  font-family:var(--serif); font-size:1.11rem; font-weight:600; color:var(--ink); list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; margin-inline-start:auto; margin-top:.42em; flex:none;
  width:9px; height:9px; border-inline-end:1.5px solid var(--gold-600); border-block-end:1.5px solid var(--gold-600);
  transform:rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary .lz{width:7px; height:7px; margin-top:.62em; background:var(--gold-500); transform:rotate(45deg); flex:none}
.faq__a{padding:0 0 24px 23px; font-size:.96rem; color:var(--ink-2); line-height:1.62; max-width:74ch}

/* ══ Demande de démonstration ═════════════════════════════════════ */
.demo{position:relative; overflow:hidden; color:#fff; background:linear-gradient(168deg,var(--lapis-800),var(--lapis-950)); scroll-margin-top:96px}
.demo .wrap{position:relative; z-index:2}
.demo__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(36px,5vw,72px); align-items:start}
.demo h2{color:#fff; margin-bottom:20px; text-wrap:balance}
.demo .lede{margin-bottom:28px}
.demo__points{display:flex; flex-direction:column; gap:12px; margin-bottom:28px}
.demo__points li{display:flex; gap:13px; font-size:.95rem; color:rgba(255,255,255,.86); line-height:1.5}
.demo__points li::before{content:''; width:7px; height:7px; margin-top:.5em; background:var(--gold-500); transform:rotate(45deg); flex:none}
.demo__alt{font-size:.9rem; color:var(--lapis-300)}
.demo__alt a{color:var(--gold-300); font-weight:700}

.card-form{
  background:var(--parchment); color:var(--ink);
  border:1px solid rgba(226,161,46,.3); border-radius:var(--r-xl);
  padding:clamp(22px,3vw,32px); box-shadow:var(--sh-deep);
}
.card-form__head{margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--rule)}
.card-form__head h3{font-size:1.42rem; margin-bottom:6px}
.card-form__head p{font-size:.9rem; color:var(--ink-2)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field--wide{grid-column:1 / -1}
.field label{font-size:.82rem; font-weight:700; color:var(--ink); letter-spacing:.01em}
.field label .opt{font-weight:400; color:var(--ink-3); letter-spacing:0}
.field input,.field textarea{
  font-family:var(--sans); font-size:.98rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-strong); border-radius:var(--r);
  padding:13px 14px; min-height:50px; width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{min-height:104px; resize:vertical; line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--lapis-800); box-shadow:0 0 0 3px rgba(27,61,116,.14);
}
.field input:user-invalid{border-color:var(--role-parent)}
/* Piège à robots : invisible à l'écran et retiré du parcours clavier et
   du fil d'accessibilité, mais présent dans le DOM pour les robots. */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Sans JavaScript, la soumission ne peut pas partir : le formulaire n'a ni
   action ni method et l'envoi passe par fetch. On le masque plutôt que de
   laisser l'utilisateur remplir six champs pour rien. */
html:not(.js) #demo-form{display:none}
.nojs-fallback{display:none}
html:not(.js) .nojs-fallback{display:block}
.nojs-fallback p{font-size:.95rem; color:var(--ink-2); line-height:1.6; margin-bottom:18px}

.form__foot{margin-top:22px; padding-top:20px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:14px}
.form__legal{font-size:.79rem; color:var(--ink-2); line-height:1.5}
.form__legal a{color:var(--lapis-800); font-weight:700}
.form__submit{width:100%}
.form__status{font-size:.9rem; line-height:1.5; border-radius:var(--r); padding:13px 15px; display:none}
.form__status.is-shown{display:block}
.form__status--err{background:#FDECEC; border:1px solid rgba(198,40,40,.2); color:#8E1F1F}
.form__status--warn{background:var(--gold-100); border:1px solid rgba(226,161,46,.35); color:#7A4F0B}
.form__status--err a,.form__status--warn a{color:inherit; font-weight:700}

.form__done{text-align:center; padding:22px 6px 8px}
.form__done .seal{
  width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
  background:var(--verd-100); border:1px solid rgba(27,107,58,.28);
  display:grid; place-items:center; color:var(--verd-700); font-size:26px; line-height:1;
}
.form__done h3{font-size:1.42rem; margin-bottom:10px}
.form__done p{font-size:.95rem; color:var(--ink-2); line-height:1.6; max-width:44ch; margin-inline:auto}

/* ══ Pied de page ═════════════════════════════════════════════════ */
.foot{background:var(--lapis-950); color:var(--lapis-300); padding-block:56px 30px; border-top:1px solid rgba(226,161,46,.18)}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:36px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot p{font-size:.9rem; line-height:1.6; max-width:44ch; margin-top:16px}
.foot h4{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-300); margin-bottom:16px; font-family:var(--sans)}
.foot li+li{margin-top:9px}
.foot a{font-size:.9rem; text-decoration:none; overflow-wrap:anywhere; color:var(--lapis-300); transition:color .2s}
.foot a:hover{color:var(--gold-300)}
.foot__end{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; padding-top:22px; font-size:.8rem; color:#8496B4}

/* ══ Réactivité ═══════════════════════════════════════════════════
   Mêmes points de rupture que AppResponsive (frontend/lib/core/widgets/app_ui.dart) */
@media (max-width:1099px){
  .hero__grid,.bilingual__grid,.sec__grid,.faq__grid,.demo__grid{grid-template-columns:minmax(0,1fr)}
  .hero__grid{gap:52px}
  .roles__grid,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav__burger{display:flex}
  .mock{transform:none}
  .mock__frame{inset:16px -16px -16px 16px}
  .nav__links{display:none}
}
@media (max-width:860px){
  .nav__cta .btn--ghost-light{display:none}
  .nav__cta{margin-inline-start:0}
  .nav__in{gap:14px}
}
@media (max-width:699px){
  body{font-size:16px}
  .roles__grid,.plans,.feat__list,.sec__list,.foot__grid{grid-template-columns:minmax(0,1fr)}
  .foot__grid{gap:30px}
  .hero__facts{grid-template-columns:minmax(0,1fr); gap:18px}
  .mock__body{grid-template-columns:96px minmax(0,1fr)}
  .mock__main{padding:14px 13px 16px}
  .mock__slots,.mock__days{gap:4px}
  .mock__slot{font-size:.5rem}
  .mock__logo b,.mock__nav{font-size:.63rem}
  .mock__tiles{grid-template-columns:1fr 1fr}
  .mock__tiles .mock__tile:last-child{display:none}
  .mirror{grid-template-columns:minmax(0,1fr)}
  .hero__actions .btn{width:100%}
  .fields{grid-template-columns:minmax(0,1fr)}
  .demo__grid{grid-template-columns:minmax(0,1fr)}
  .feat{padding:20px 0}
  .plan--star{order:-1}
}

/* ── Nav mobile déroulante ───────────────────────────────────────── */
@media (max-width:1099px){
  .nav__links.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; inset:100% 0 auto; padding:14px var(--gutter) 22px;
    background:rgba(14,29,56,.98); border-bottom:1px solid rgba(226,161,46,.22);
    backdrop-filter:blur(14px);
  }
  .nav__links.is-open a{padding:13px 4px; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.07)}
}

/* ══ Raccords entre sections ══════════════════════════════════════
   Les passages sombre/clair etaient des aretes nettes. Une bande de
   raccord porte trois couches : la rampe de couleur, un filet d'or qui
   s'efface aux extremites, et un losange de rupture de chapitre. Elle
   remplace l'arete par une transition voulue. */
.seam{position:relative; height:clamp(52px,6.5vw,92px); z-index:1}
.seam::before{content:''; position:absolute; inset:0}
.seam::after{
  content:''; position:absolute; inset-inline:0; height:1px;
  background:linear-gradient(90deg,rgba(226,161,46,0),rgba(226,161,46,.5) 24%,rgba(226,161,46,.5) 76%,rgba(226,161,46,0));
}
.seam__mark{
  position:absolute; inset-inline-start:50%; width:9px; height:9px; margin-inline-start:-4.5px;
  background:var(--gold-500); transform:rotate(45deg);
}
/* Sombre vers clair. */
.seam--down{background:var(--parchment)}
.seam--down::before{
  background:
    radial-gradient(62% 118% at 50% 0%,rgba(226,161,46,.16),rgba(226,161,46,0) 72%),
    linear-gradient(180deg,var(--lapis-950),rgba(14,29,56,.6) 30%,rgba(14,29,56,.17) 62%,rgba(14,29,56,0));
}
.seam--down::after{top:0}
.seam--down .seam__mark{top:-4.5px}
/* Clair vers sombre. `--seam-dark` doit reprendre la teinte haute de la
   section suivante (lapis-900 par defaut, lapis-800 devant #demo). */
.seam--up{background:var(--seam-dark,var(--lapis-900))}
.seam--up::before{
  background:
    radial-gradient(62% 118% at 50% 100%,rgba(226,161,46,.15),rgba(226,161,46,0) 72%),
    linear-gradient(180deg,var(--parchment-2),rgba(245,239,227,.58) 30%,rgba(245,239,227,.15) 64%,rgba(245,239,227,0));
}
.seam--up::after{bottom:0}
.seam--up .seam__mark{bottom:-4.5px}

/* ══ Fond savant ══════════════════════════════════════════════════
   Registre lettre plutot que scolaire : un astrolabe et un folio ouvert,
   traces au filet, plutot que des crayons ou des toques. Purement
   decoratif, hors du fil d'accessibilite, sous le contenu. */
.astro{
  position:absolute; z-index:1; pointer-events:none;
  inset-block-start:-9%; inset-inline-end:-15%;
  width:min(78vw,780px); aspect-ratio:1; color:var(--gold-500); opacity:.09;
}
.astro g{transform-origin:50% 50%}
.astro__spin{animation:orbit 210s linear infinite}
.astro__spin--rev{animation:orbit 300s linear infinite reverse}
.astro__alidade{animation:orbit 140s linear infinite}

.folio{
  position:absolute; z-index:1; pointer-events:none;
  inset-block-end:8%; inset-inline-start:-9%;
  width:min(60vw,700px); color:var(--gold-300); opacity:.085;
}

/* ══ Halo au curseur sur les cartes ═══════════════════════════════
   z-index:-1 place le halo au-dessus du fond de la carte mais sous son
   texte : la lisibilite ne bouge pas d'un iota. */
.role::after,.plan::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(226,161,46,.17),rgba(226,161,46,0) 68%);
  opacity:0; transition:opacity .3s;
}
.role.is-lit::after,.plan.is-lit::after{opacity:1}
.plan--star::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(233,200,127,.15),rgba(233,200,127,0) 68%)}

/* ══ Titre du heros, revele ligne par ligne ═══════════════════════
   Chaque ligne est sa propre fenetre : le texte monte derriere son
   propre bord haut. Le rembourrage compense les jambages (le « j » de
   « jour ») que `overflow:hidden` couperait sinon. */
.h-reveal .ln{display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em}
.hero .serif-em{position:relative}
.hero .serif-em::after{
  content:''; position:absolute; inset-inline:0; bottom:-.06em; height:2px;
  background:linear-gradient(90deg,var(--gold-500),rgba(226,161,46,0));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ══ Mouvement ════════════════════════════════════════════════════
   Le contenu est visible par défaut. Les révélations ne s'activent
   que si JavaScript a posé la classe `js` sur <html>. */
@keyframes rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
.js .reveal{opacity:0}
.js .reveal.is-in{animation:rise .82s cubic-bezier(.2,.7,.3,1) forwards}
.js .hero .reveal{animation:rise .95s cubic-bezier(.2,.7,.3,1) forwards}
.js .hero .reveal:nth-child(1){animation-delay:.05s}
.js .hero .reveal:nth-child(2){animation-delay:.14s}
.js .hero .reveal:nth-child(3){animation-delay:.23s}
.js .hero .reveal:nth-child(4){animation-delay:.32s}
.js .hero .reveal:nth-child(5){animation-delay:.41s}
.js .hero__visual{animation:rise 1.1s cubic-bezier(.2,.7,.3,1) .3s forwards; opacity:0}

@keyframes ln-up{from{transform:translateY(112%)}to{transform:none}}
.js .h-reveal .ln>span{display:block; transform:translateY(112%); animation:ln-up .95s cubic-bezier(.16,.84,.24,1) forwards}
.js .h-reveal .ln:nth-child(1)>span{animation-delay:.14s}
.js .h-reveal .ln:nth-child(2)>span{animation-delay:.28s}
.js .h-reveal .ln:nth-child(3)>span{animation-delay:.42s}
@keyframes underline{to{transform:scaleX(1)}}
.js .hero .serif-em::after{animation:underline .7s cubic-bezier(.2,.7,.3,1) 1.2s forwards}

@keyframes sheen{0%{transform:translateX(-125%)}18%,100%{transform:translateX(125%)}}
@keyframes meter{0%{transform:scaleX(0)}16%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes badge-in{0%,5%{opacity:0; transform:translateY(4px)}13%,100%{opacity:1; transform:none}}
@keyframes orbit{to{transform:rotate(360deg)}}

/* Parallaxe du motif, pilotee par la position de defilement plutot que
   par le temps : aucun script, aucun travail hors ecran, et l'effet
   disparait purement et simplement la ou `animation-timeline` manque. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Deux pieges ici, tous deux verifies dans un navigateur :
       - la forme raccourcie `animation` remet `animation-duration` a 0s,
         alors qu'une animation de defilement exige la valeur initiale
         `auto` ; d'ou les proprietes detaillees ;
       - `view()` mesure le sujet dans le plus proche conteneur de
         defilement ancetre. Les sections portent `overflow:hidden`, donc
         chacune en est un, sans debordement : la progression restait
         figee a 50 %. `scroll(root)` designe explicitement le document. */
    .girih__pat{
      animation-name:girih-drift; animation-timing-function:linear;
      animation-fill-mode:both; animation-timeline:scroll(root);
    }
  }
}
@keyframes girih-drift{from{transform:translate3d(0,-150px,0)}to{transform:translate3d(0,150px,0)}}

@media print{
  .js .reveal,.js .hero__visual{opacity:1 !important; animation:none !important}
  .js .h-reveal .ln>span{transform:none !important; animation:none !important}
  .astro,.folio,.seam,.mock__win::after,.nav__ind,.nav__prog{display:none !important}
  .nav{position:static}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important}
  .js .reveal,.js .hero__visual{opacity:1 !important; animation:none !important}
  .btn:hover,.role:hover,.plan:hover{transform:none}
  .mock{transform:rotate(-1.1deg) !important}
  .mock:hover .mock__win{transform:none}
  /* Les boucles infinies ne doivent pas seulement etre raccourcies :
     a une duree quasi nulle elles clignoteraient. On les supprime, et on
     fige chaque element sur son etat d'arrivee. */
  .astro__spin,.astro__spin--rev,.astro__alidade,.mock__win::after,.mock__tile i.is-live{animation:none !important}
  .mock__win::after{display:none}
  .mock__meter em{animation:none !important; transform:none}
  .js .h-reveal .ln>span{transform:none !important; animation:none !important}
  .js .hero .serif-em::after{animation:none !important; transform:scaleX(1)}
  .girih__pat{animation:none !important; transform:none !important}
}


/* ══════════════════════════════════════════════════════════════════
   Pages internes (mentions legales, confidentialite, solutions,
   fonctionnalites, blog). La page d'accueil ouvre sur un hero sombre
   qui laisse la barre de navigation transparente ; les pages internes
   demarrent sur parchemin et ont donc besoin d'une barre opaque.
   ══════════════════════════════════════════════════════════════════ */

.nav--solid{
  position:sticky; background:var(--lapis-950);
  border-bottom-color:rgba(226,161,46,.22);
}
.nav--solid .nav__in{height:72px}

/* Fil d'Ariane — double le BreadcrumbList JSON-LD pour le lecteur humain. */
.crumb{
  font-size:.82rem; color:var(--ink-3); margin-bottom:26px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.crumb a{color:var(--lapis-800); text-decoration:none; font-weight:500}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px}
.crumb span[aria-hidden]{color:var(--rule-strong)}

.legal{background:var(--parchment)}
.legal .h-section{max-width:18ch; margin-bottom:38px}
.legal .lede{max-width:60ch; margin-bottom:40px}

/* Colonne de lecture : 68ch, la largeur au-dela de laquelle l'oeil
   perd la ligne suivante en revenant a la marge. */
.prose{max-width:68ch}
.prose h2{
  font-size:clamp(1.3rem,2.1vw,1.62rem); margin:44px 0 14px;
  padding-top:20px; border-top:1px solid var(--rule);
}
.prose h2:first-child{margin-top:0; padding-top:0; border-top:0}
.prose p{margin-bottom:16px; color:var(--ink-2); line-height:1.68}
.prose p b{color:var(--ink); font-weight:700}
.prose a{color:var(--lapis-800); font-weight:600; text-underline-offset:3px}

.legal__list{margin:0 0 22px; display:grid; gap:12px}
.legal__list li{
  position:relative; padding-inline-start:23px;
  color:var(--ink-2); line-height:1.62;
}
.legal__list li::before{
  content:''; position:absolute; inset-inline-start:0; top:.62em;
  width:7px; height:7px; background:var(--gold-500); transform:rotate(45deg);
}
.legal__list li b{color:var(--ink)}

/* Le tableau deborde sur mobile : il defile dans son propre conteneur
   plutot que d'imposer un defilement horizontal a toute la page. */
.legal__table{
  display:block; overflow-x:auto; width:100%; margin:0 0 26px;
  border-collapse:collapse; font-size:.9rem;
}
.legal__table th,.legal__table td{
  text-align:start; vertical-align:top; padding:12px 16px;
  border-bottom:1px solid var(--rule); min-width:150px;
}
.legal__table thead th{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lapis-800);
  border-bottom:1px solid var(--rule-strong); white-space:nowrap;
}
.legal__table td{color:var(--ink-2); line-height:1.55}

.legal__meta{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:.85rem; color:var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════
   Bandeau de consentement (mesure d'audience)
   Ancre en bas d'ecran plutot qu'en surimpression plein cadre : la
   page reste lisible et le refus n'est pas une condition d'acces.
   Le bouton Refuser a exactement le meme poids visuel qu'Accepter.
   ══════════════════════════════════════════════════════════════════ */
.consent{
  position:fixed; z-index:150; inset:auto 0 0;
  margin:0 auto; max-width:calc(var(--wrap) - 2 * var(--gutter));
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px;
  justify-content:space-between;
  padding:18px 24px; margin-bottom:16px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:var(--r);
  box-shadow:var(--sh-deep);
  animation:consent-in .38s cubic-bezier(.16,.84,.24,1) both;
}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
@keyframes consent-in{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}

.consent__txt{
  flex:1 1 340px; font-size:.9rem; line-height:1.58; color:var(--ink-2);
  max-width:76ch; margin:0;
}
.consent__txt a{color:var(--lapis-800); font-weight:700; text-underline-offset:3px}
.consent__act{display:flex; gap:10px; flex:none}

@media (max-width:640px){
  .consent{margin-inline:12px; margin-bottom:12px; padding:16px}
  .consent__act{width:100%}
  .consent__act .btn{flex:1}
}

/* Lien de reouverture du bandeau, en pied de page. */
.foot__prefs{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.8rem; color:#8496B4;
  text-decoration:underline; text-underline-offset:3px;
}
.foot__prefs:hover{color:var(--gold-300)}

/* ══════════════════════════════════════════════════════════════════
   Maillage interne et appel a l'action des pages internes
   Le bloc « Aller plus loin » n'est pas decoratif : il distribue
   l'autorite vers les pages profondes, qui n'ont pas de lien depuis
   la page d'accueil. Chaque page en porte au moins trois.
   ══════════════════════════════════════════════════════════════════ */
.related{
  display:grid; gap:12px; margin:0 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.related li{padding:0}
.related a{
  display:flex; flex-direction:column; gap:5px; height:100%;
  padding:16px 18px; text-decoration:none;
  background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--r-sm); box-shadow:var(--sh-card);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
}
.related a:hover{
  transform:translateY(-2px); border-color:var(--gold-500); box-shadow:var(--sh-lift);
}
.related b{font-family:var(--serif); font-size:1.06rem; font-weight:600; color:var(--ink)}
.related span{font-size:.85rem; line-height:1.5; color:var(--ink-3)}

/* Bandeau de conversion en fin de page interne, sur le fond sombre
   de la page d'accueil pour marquer la rupture avec le corps de texte. */
.pagecta{background:var(--lapis-900); color:#fff; overflow:hidden}
.pagecta__in{position:relative; z-index:2; max-width:52ch; margin-inline:0}
.pagecta .h-section{color:#fff; margin-bottom:18px}
.pagecta .lede{margin-bottom:30px}
.pagecta__act{display:flex; flex-wrap:wrap; gap:12px}

/* Les titres de fonctionnalites pointent desormais vers leur page dediee.
   Le soulignement n'apparait qu'au survol pour ne pas alourdir la grille. */
.feat h3 a{
  text-decoration:none; text-underline-offset:4px;
  text-decoration-color:var(--gold-500);
}
.feat h3 a:hover{text-decoration:underline}