/* ═══════════════════════════════════════════════════════════════════════════
   L'ÉCRAN D'ACCUEIL — feuille de `views/public/accueil.php` (piste « Épuré »,
   validée par Paul le 07/09/2026).

   Paul : « comme une appli mobile, sans scroll » (25/08) + « la MÊME vue sur
   desktop que sur mobile » (07/09). Une colonne mobile CENTRÉE, avec le fond
   hors-colonne `--hors-app` autour sur grand écran — exactement comme les
   coquilles `base`/`module` de l'application.

   ⚠️ CHARGÉE SEULEMENT SUR L'ACCUEIL (`$ecran`). Aucun nom partagé avec vitrine.css
   (préfixe `e-`). ⚠️ AUCUNE COULEUR EN DUR : tout vient des jetons du design system
   (`--brand`, `--accent`, `--ink`, `--hors-app`… d'app.css). L'ancienne landing
   peignait un CTA indigo codé en dur, hors charte — c'est réglé.

   ⚠️ POPUP DE CONNEXION EN CSS PUR (case `#e-cnx` + `~`) : CSP `script-src 'self'`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA FONTE, AUTO-HÉBERGÉE (pas de lien Google Fonts : CSP `default-src 'self'`) ── */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/instrument-sans-400-700-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;
}

/* ── LA COQUE : un écran, pas une page ; la colonne mobile centrée ──────────
   `100dvh` (pas `vh` : la barre d'URL mobile). On borne aussi `html` (sinon une
   barre de défilement clignote au chargement, Paul 26/08). Fond = `--hors-app`
   (le hors-colonne), la colonne `.e-app` par-dessus. */
html:has(> body.vitrine.ecran){height:100%; overflow:hidden}
body.vitrine.ecran{
  height:100dvh; min-height:560px; overflow:hidden; margin:0;
  display:flex; flex-direction:column;
  /* ⚠️ LE FOND DE PAGE = LE MÊME CIEL QUE LA COLONNE (Paul, 07/09 : « sur desktop,
     le fond animé et dans le même thème que le mobile »). Plus de lavande plate
     `--hors-app` : le hors-colonne devient le ciel « hub à l'horizon », et des
     nuages (`.e-ciel-page`) y dérivent. Sur mobile la colonne couvre tout. */
  background:
    radial-gradient(110% 40% at 50% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 62%),
    linear-gradient(180deg, #c8d5f8 0%, #e2e4f6 34%, var(--bg) 72%);
  font-family:'Instrument Sans', system-ui, -apple-system, sans-serif;
  color:var(--ink);
}
/* Pas d'en-tête `.v-entete` sur l'accueil : la colonne porte le sien (vitrine.php
   ne le rend que hors `$ecran`, pour les mentions légales). */
body.ecran main{
  flex:1 1 auto; min-height:0; display:flex; justify-content:center; align-items:stretch;
}

/* LA COLONNE — mobile partout, centrée, bornée à 460 px sur grand écran. */
.e-app{
  position:relative; z-index:1; width:min(100%, 460px); height:100%; overflow:hidden;
  display:flex; flex-direction:column;
  background:
    radial-gradient(92% 38% at 50% 2%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 64%),
    linear-gradient(180deg, #c8d5f8 0%, #e2e4f6 32%, var(--bg) 58%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 30px 80px -40px rgba(43,42,61,.55);
}
/* ⚠️ SUR DESKTOP, LA COLONNE EST UNE CARTE ARRONDIE EN HAUT SEULEMENT (Paul, 07/09 :
   « fais l'arrondi dans l'autre sens pour avoir le bord long en bas de l'écran »).
   La carte s'ancre en bas (bord franc, pleine largeur, à ras l'écran) et s'arrondit
   en haut ; le CTA reprend l'arrondi sur ses coins HAUTS, bord long en bas. Sur
   mobile (≤460 px, plein écran), tout est à bord franc — comme une appli. */
@media (min-width:461px){
  .e-app{border-radius:26px 26px 0 0}
  /* ⚠️ `.e-app .e-cta` (0,2,0) pour battre la règle de base `.e-cta{border-radius:0}`
     déclarée PLUS BAS : l'arrondi va sur les coins HAUTS du CTA, bord long en bas. */
  .e-app .e-cta{border-radius:22px 22px 0 0}
}
/* Le contenu passe AU-DESSUS du ciel. */
.e-top, .e-hero, .e-foot{position:relative; z-index:1}

/* ── LE CIEL DE PAGE — nuages qui dérivent DERRIÈRE la colonne, sur toute la
   fenêtre (Paul, 07/09). Surtout visibles sur desktop, autour de la carte ; sur
   mobile la colonne les couvre. `position:fixed` → hors flux, aucun défilement. */
.e-ciel-page{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.e-ciel-page i{position:absolute; display:block; border-radius:200px;
  background:radial-gradient(closest-side, #fff, rgba(255,255,255,.58) 56%, rgba(255,255,255,0));
  filter:blur(3px) drop-shadow(0 8px 20px rgba(120,130,200,.18)); will-change:transform}
.e-ciel-page .p1{width:280px; height:80px; top:9%;  left:3%}
.e-ciel-page .p2{width:200px; height:60px; top:24%; left:68%}
.e-ciel-page .p3{width:250px; height:72px; top:50%; left:9%}
.e-ciel-page .p4{width:180px; height:54px; top:66%; left:76%}
.e-ciel-page .p5{width:220px; height:64px; top:38%; left:42%}
@media (prefers-reduced-motion:no-preference){
  .e-ciel-page i{animation-name:e-defile-page; animation-timing-function:linear; animation-iteration-count:infinite}
  .e-ciel-page .p1{animation-duration:72s;  animation-delay:-6s}
  .e-ciel-page .p2{animation-duration:94s;  animation-delay:-42s}
  .e-ciel-page .p3{animation-duration:82s;  animation-delay:-23s}
  .e-ciel-page .p4{animation-duration:106s; animation-delay:-71s}
  .e-ciel-page .p5{animation-duration:88s;  animation-delay:-55s}
}
@keyframes e-defile-page{from{transform:translateX(-340px)} to{transform:translateX(112vw)}}

/* ── LE CIEL : nuages soufflés qui dérivent (esprit splash « hub à l'horizon »).
   Décor pur, derrière le contenu, moitié haute. Coupé en mouvement réduit — et
   alors le ciel reste (dégradé), simplement immobile : jamais de blanc. */
.e-ciel{position:absolute; inset:0 0 auto; height:62%; z-index:0; pointer-events:none; overflow:hidden}
.e-ciel i{
  position:absolute; display:block; border-radius:100px;
  background:radial-gradient(closest-side, #fff, rgba(255,255,255,.66) 56%, rgba(255,255,255,0));
  filter:blur(2px) drop-shadow(0 5px 12px rgba(120,130,200,.22)); will-change:transform;
}
/* ⚠️ TOUS dans la BANDE DE CIEL VISIBLE (haut ~2–17 %, derrière le header + le
   début du titre). Plus bas, la vidéo opaque les masquerait — c'est pourquoi on
   n'en voyait aucun défiler. */
.e-ciel .c1{width:150px; height:46px; top:3%;  left:6%}
.e-ciel .c2{width:104px; height:34px; top:8%;  left:52%}
.e-ciel .c3{width:132px; height:40px; top:12%; left:24%}
.e-ciel .c4{width:86px;  height:30px; top:17%; left:70%}
@media (prefers-reduced-motion:no-preference){
  .e-ciel i{animation-name:e-defile; animation-timing-function:linear; animation-iteration-count:infinite}
  .e-ciel .c1{animation-duration:40s; animation-delay:-3s}
  .e-ciel .c2{animation-duration:55s; animation-delay:-33s}
  .e-ciel .c3{animation-duration:46s; animation-delay:-19s}
  .e-ciel .c4{animation-duration:62s; animation-delay:-50s}
}
/* Les nuages TRAVERSENT le ciel (Paul, 07/09 : « les nuages qui défilent ») : de
   hors-champ gauche à hors-champ droite, en boucle, décalés pour peupler la bande.
   `linear` = dérive régulière comme de vrais nuages. Sans animation (mouvement
   réduit), `translateX(0)` les laisse à leur `left` — visibles, jamais de ciel vide. */
@keyframes e-defile{from{transform:translateX(-230px)} to{transform:translateX(500px)}}

/* ── EN-TÊTE : logo + bouton Connexion ───────────────────────────────────────
   ⚠️ PAS DE BARRE (Paul, 07/09 : « la barre blanche du header est-elle la plus
   pertinente ? »). Le trait du bas a été retiré : le logo + Connexion posent
   DIRECTEMENT sur le ciel, sans bandeau qui les sépare — plus immersif, et le
   ciel animé passe derrière eux. */
.e-top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
}
.e-brand{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:800; letter-spacing:-.02em; font-size:19px; color:var(--ink);
  min-height:var(--tap,44px);
}
.e-brand svg, .e-brand img{width:30px; height:30px; display:block; border-radius:8px}
.e-cnx{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  min-height:var(--tap,44px); padding:0 16px; border-radius:12px;
  font-size:14px; font-weight:600; color:var(--brand-ink);
  background:var(--brand-weak); border:1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  transition:border-color .15s, background .15s;
}
.e-cnx svg{width:16px; height:16px}
.e-cnx:hover{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 14%, var(--card))}

/* ── HÉROS : titre → vidéo (aérée) → 2 KPI centrés — centré verticalement ──── */
.e-hero{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:18px; padding:12px 22px;
}
/* ⚠️ SUR ÉCRAN COURT (petits portables), on resserre l'espacement du héros pour que
   tout tienne SANS défilement (B3) — le titre plus gros + le CTA plus gros coûtent
   quelques pixels. Les grands écrans gardent l'aération de 18 px. */
@media (max-height:790px){
  .e-hero{gap:12px; padding-top:6px; padding-bottom:6px}
  .e-h1{font-size:clamp(27px, 8.4vw, 36px); line-height:1.05}
  /* ⚠️ La vidéo est le poste le plus lourd et « regonfle » dès qu'on libère de la
     place (flex) : on la PLAFONNE sur écran court pour que le reste tienne sans
     défilement (B3). */
  .e-video{max-height:170px}
}
/* ⚠️ TITRE EN DEUX TEMPS (Paul, 07/09) : « Gérer son immobilier locatif, » aligné
   à GAUCHE, puis « simplement. » seul sur sa ligne, poussé à DROITE. Le `em` passe
   en bloc `width:fit-content; margin-left:auto` : il se cale à droite et son
   soulignement d'accent (::after) reste sous LE SEUL mot. */
.e-h1{
  margin:0; width:100%; max-width:372px; font-weight:800; letter-spacing:-.028em; line-height:1.08;
  font-size:clamp(31px, 9.8vw, 42px); color:var(--ink); text-align:left;
}
.e-h1 em{font-style:normal; color:var(--brand); position:relative; white-space:nowrap;
  display:block; width:fit-content; margin-left:auto}
.e-h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.1em; border-radius:999px;
  background:color-mix(in srgb, var(--brand) 42%, transparent);
}
/* LA VIDÉO — carte 16/10, claire, aérée (Paul 07/09). Quand la vidéo existe elle
   la remplit ; sinon, un aperçu clair avec le bouton de lecture. */
.e-video{
  position:relative; width:100%; max-width:372px; aspect-ratio:16/10; border-radius:18px;
  overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(160deg, var(--brand-weak), var(--card));
  box-shadow:0 18px 40px -24px rgba(43,42,61,.5);
}
.e-lecteur{position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; object-fit:cover}
div.e-lecteur{background:linear-gradient(160deg, var(--brand-weak), #eef0fb)}
.e-lire{
  position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; line-height:0;
  background:var(--card); box-shadow:0 8px 22px -10px rgba(43,42,61,.5);
}
.e-lire::before{
  content:""; border-style:solid; border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent var(--brand); margin-left:3px;
}
.e-kpis{display:flex; gap:14px; width:100%; max-width:372px}
.e-kpi{
  flex:1; padding:16px 12px; border-radius:16px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 10px 24px -16px rgba(43,42,61,.35);
  display:grid; align-content:center; justify-items:center; text-align:center; gap:5px;
}
.e-kpi b{
  display:block; font-size:31px; font-weight:800; line-height:1; letter-spacing:-.03em;
  color:var(--brand); font-variant-numeric:tabular-nums;
}
/* ⚠️ COULEURS KPI (Paul, 07/09) : le CHIFFRE en bleu Gestineo (« 0 € », « 0,3 % ») ;
   « dès » et les libellés (« pour 1 bien », « des loyers ») en NOIR (--ink). */
.e-kpi b i{font-style:normal; font-weight:600; color:var(--ink); font-size:.46em; letter-spacing:0}
/* ⚠️ « GRATUIT » remplace « 0 € » (Paul, 07/09) — SEPT lettres là où il y avait trois
   signes. Mesuré à 320 px SANS cette règle : le mot fait 128,3 px pour 130,3 px
   disponibles — il tenait par 2 px, c'est-à-dire qu'une fonte de secours plus large
   le faisait déborder. On DESCEND la taille pour ce mot-là seulement (les chiffres
   du second KPI gardent leurs 31 px) : 26 px → 107 px de texte, du jeu partout. */
.e-kpi b.e-gr{font-size:26px; letter-spacing:-.02em}
.e-kpi span{display:block; font-size:14px; color:var(--ink); line-height:1.3}

/* ── LES FONCTIONNALITÉS, DIRECTEMENT DANS LE HÉROS (modifs58, Paul 07/09 : « le
   même rendu que sur marketplace directement sur la landing, sans le lien »).
   C'est le VRAI bloc `.feats` de /marketplace, peint par v1.css (namespacé
   `.v1c .mkt`, déjà chargé par la coquille vitrine) : aperçu IDENTIQUE, réutilisé
   et non recopié. Ici on neutralise SEULEMENT le layout conteneur de .v1c/.mkt
   (`.v1c` plein écran flex ; `.mkt` borné à 440 px avec un fond), et on aligne la
   largeur sur celle de la vidéo/KPI. Replié au repos → aucun défilement (B3). */
.e-fonc-mkt.v1c{min-height:0; display:block; background:transparent; width:100%; max-width:372px}
.e-fonc-mkt .mkt{min-height:0; display:block; background:transparent; max-width:none; width:auto; margin:0; padding:0}
/* ⚠️ LE CADRE DU BLOC. v1.css l'attache à `details.feats` ; on a abandonné `<details>`
   (le dépliage inline « adaptait » la hauteur de la landing → piège B3), donc on le
   réapplique à `.feats` (un `<div>`). Mêmes valeurs qu'à v1.css l.650 (fond blanc
   translucide, bord indigo ténu, rayon 12) + le padding 6/10 de l'ancien `summary`. */
.e-fonc-mkt .feats{background:rgba(255,255,255,.5); border:1px solid rgba(95,111,201,.16); border-radius:12px; padding:6px 10px}
/* Le déclencheur « Voir toutes les fonctionnalités » est un `<label for="e-fonc">` :
   cliquable et focalisable au clavier ; il ouvre le popup (aucun script, CSP). */
.e-fonc-mkt .more{cursor:pointer}
.e-fonc-mkt .more:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
/* ⚠️ POLICE DES FONCTIONNALITÉS AGRANDIE SUR LA LANDING (Paul, 07/09), comme dans la
   feuille. Chaîne (0,5,0) pour battre `.v1c .mkt .f3 .fi` (0,4,0) de v1.css ; scopé
   `.e-hero` pour ne toucher QUE le héros (la feuille garde sa propre échelle). */
.e-hero .e-fonc-mkt .feats{padding:6px 8px}
.e-hero .e-fonc-mkt .feats .f3 .fi{font-size:13px; gap:6px}
.e-hero .e-fonc-mkt .feats .f3 .fi svg{width:17px; height:17px}
.e-hero .e-fonc-mkt .feats .more{font-size:12px}
.e-hero .e-fonc-mkt .feats .more svg{width:13px; height:13px}

/* ── LE BAS : badges identiques + CTA en BARRE BASSE pleine largeur ────────── */
.e-foot{flex:0 0 auto; display:flex; flex-direction:column}
.e-badges{display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 16px 12px}
/* ⚠️ BOÎTES IDENTIQUES (Paul 07/09) : même gabarit, artwork officiel `contain`. */
/* ⚠️ MÊME HAUTEUR VISIBLE, CENTRÉS (Paul 07/09). On dimensionne chaque artwork par
   sa HAUTEUR (width:auto = ratio naturel), pas par object-fit dans une boîte — le
   PNG officiel Google Play porte ~11,6 % de marge transparente en haut ET en bas
   (contenu sur 192 px de 250), le badge Apple remplit la sienne. Apple à 40 px, le
   PNG Google à 52 px → leurs VISUELS font tous deux ~40 px, centrés sur la même
   ligne. La barre reste à 40 px (les boîtes `.e-badge`), l'excédent transparent du
   PNG déborde sans rien pousser. La marge Google (clear space de sa charte) est
   conservée, proportionnelle. */
.e-badge{width:132px; height:40px; display:flex; align-items:center; justify-content:center; overflow:visible}
.e-badge svg{height:40px; width:auto; display:block}
.e-badge img{height:52px; width:auto; display:block}
html.natif .e-badges{display:none}   /* retirés du paquet natif (natif.js) */
/* LE CTA — barre basse, pleine largeur, collée en bas, sans arrondi (Paul 07/09). */
.e-cta{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:60px; padding:0 20px; border:0; border-radius:0; text-decoration:none;
  font-size:22px; font-weight:800; letter-spacing:-.02em; color:#fff;
  background:linear-gradient(160deg, var(--brand), var(--brand-dark));
  box-shadow:0 -8px 24px -16px rgba(43,42,61,.6);
  transition:filter .15s, transform .12s;
}
.e-cta:hover{filter:brightness(1.05)}
.e-cta:active{transform:translateY(1px)}
.e-cta:focus-visible{outline:2px solid var(--brand); outline-offset:-4px}
/* ⚠️ « 3 mois offerts » MIS EN AVANT (Paul, 07/09 : « insiste plus sur le 3 mois
   offert », desktop ET mobile) : pastille BLANCHE PLEINE à texte bleu Gestineo,
   grasse, avec une petite ombre → elle ressort nettement sur la barre bleue,
   au lieu de la pastille translucide discrète d'avant. */
.e-puce{
  display:inline-flex; align-items:center; height:35px; padding:0 16px; border-radius:999px;
  font-size:15.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
  background:#fff; color:var(--brand-ink); box-shadow:0 4px 12px -4px rgba(43,42,61,.45);
}

/* ── LE POPUP DE CONNEXION — CSS pur (case `#e-cnx`) ────────────────────────── */
.e-case{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.e-modal{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .22s;
}
.e-modal-bg{position:absolute; inset:0; background:color-mix(in srgb, var(--ink) 48%, transparent);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); cursor:pointer}
/* Bascule du popup de connexion (case `#e-cnx`, CSS pur, zéro script). */
#e-cnx:checked ~ .e-app .e-modal-cnx{opacity:1; visibility:visible}
.e-card{
  position:relative; width:100%; max-width:360px; background:var(--card);
  border:1px solid var(--line); border-radius:20px; padding:20px;
  box-shadow:0 30px 70px -30px rgba(43,42,61,.7);
  transform:translateY(10px) scale(.97); transition:transform .22s;
}
#e-cnx:checked ~ .e-app .e-modal-cnx .e-card{transform:none}
.e-card-tete{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.e-card-tete b{font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.e-x{width:32px; height:32px; border-radius:50%; background:var(--neutral-weak); color:var(--muted);
  cursor:pointer; display:grid; place-items:center; font-size:20px; line-height:1}
.e-x:hover{color:var(--ink)}
/* Formulaire : deux champs empilés + flèche « › » à droite, sur toute la hauteur. */
.e-form{display:flex; align-items:stretch; gap:10px}
.e-fields{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px}
.e-inp{
  width:100%; height:46px; padding:0 14px; border-radius:12px;
  background:var(--neutral-weak); border:1px solid var(--line); color:var(--ink); font-size:15px;
  font-family:inherit;
}
.e-inp::placeholder{color:var(--muted)}
.e-inp:focus{outline:none; border-color:var(--brand); background:var(--card)}
.e-arrow{
  flex:none; width:52px; border:0; border-radius:12px; background:var(--brand); color:#fff;
  cursor:pointer; display:grid; place-items:center; box-shadow:0 8px 20px -10px var(--brand);
}
.e-arrow svg{width:22px; height:22px}
.e-arrow:hover{background:var(--brand-dark)}
.e-ou{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:16px 0}
.e-ou::before, .e-ou::after{content:""; flex:1; height:1px; background:var(--line)}
.e-social{display:flex; flex-direction:column; gap:10px}
.e-sbtn{
  width:100%; min-height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.e-sbtn svg{width:20px; height:20px; flex:none}
.e-sbtn.apple{background:#111017; color:#fff; border:0}
.e-sbtn.apple:hover{background:#000}
.e-sbtn.google{background:var(--card); color:#3c4043; border:1px solid #dadce0}
.e-sbtn.google:hover{background:#f7f8fa}
.e-liens{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px}
.e-liens a{color:var(--brand-ink); font-size:13px; text-decoration:none; min-height:var(--tap,44px);
  display:inline-flex; align-items:center}
.e-liens a:hover{text-decoration:underline}
/* Mode démonstration (local uniquement — jamais en production). */
.e-demo{font-size:12.5px; color:var(--muted); background:var(--neutral-weak); border-radius:10px;
  padding:8px 10px; margin-bottom:10px; line-height:1.35}
.e-demo-roles{display:grid; gap:8px; margin-bottom:6px}
.e-sign{width:100%; min-height:44px; border:0; border-radius:12px; background:var(--brand); color:#fff;
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer}
.e-sign:hover{background:var(--brand-dark)}

/* ── LE POPUP « TOUT CE QUI EST INCLUS » — même mécanique CSS pure (case `#e-fonc`) ──
   Il réutilise `.e-modal` / `.e-modal-bg` / `.e-card` / `.e-card-tete` / `.e-x` du popup
   de connexion. Son contenu est le bloc marketplace `.v1c .mkt` : les neutralisations
   `.e-fonc-mkt` ci-dessus s'y appliquent telles quelles. La liste DÉFILE dans la carte
   (un popup n'est pas soumis au B3 de la landing) ; en-tête et CTA restent fixes. */
#e-fonc:checked ~ .e-app .e-modal-fonc{opacity:1; visibility:visible}
#e-fonc:checked ~ .e-app .e-modal-fonc .e-card{transform:none}
/* ⚠️ FEUILLE DU BAS (Paul, 07/09) : le popup arrive PAR LE DESSOUS et fait toute la
   largeur de la colonne mobile — pas une carte centrée. L'overlay colle la carte en bas ;
   la carte prend 100 % de large, coins arrondis EN HAUT seulement, et glisse depuis
   translateY(100%) → 0 quand la case est cochée (la transition transform de .e-card fait
   le reste). Le clic sur le fond assombri (au-dessus de la feuille) referme. */
.e-modal-fonc{align-items:flex-end; justify-content:center; padding:0}
.e-card-fonc{width:100%; max-width:none; max-height:88%; padding:16px 14px 0; border:0;
  display:flex; flex-direction:column; border-radius:22px 22px 0 0; transform:translateY(100%)}
/* La poignée de préhension : signe d'une feuille qui monte du bas. */
.e-card-fonc::before{content:""; flex:0 0 auto; align-self:center; width:38px; height:4px;
  border-radius:99px; background:var(--line); margin-bottom:12px}
.e-card-fonc .e-card-tete{margin-bottom:12px}
/* La zone qui défile si la liste dépasse (min-height:0 → un enfant flex peut rétrécir). */
/* Scrollbar masquée : sur écran court la liste défile, et une barre visible amputerait
   ~15px de largeur → le contenu paraîtrait plus étroit que l'en-tête (Paul, 07/09). */
.e-card-fonc .e-fonc-mkt{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none}
.e-card-fonc .e-fonc-mkt::-webkit-scrollbar{display:none}
/* ⚠️ DANS LA FEUILLE, PAS DE CADRE INTERNE (Paul, 07/09) : le bloc marketplace perd son
   fond / sa bordure / son rayon / son padding — le contenu s'aligne à même la feuille.
   Le trait pointillé entre les 3 phares et le détail reste : c'est un séparateur, pas un cadre. */
.e-card-fonc .feats{border:0; background:transparent; padding:0; border-radius:0}
/* ⚠️ DÉTAIL EN 2 COLONNES ASYMÉTRIQUES (Paul, 07/09 : « garder 2 colonnes, une colonne plus
   étroite avec les bullets courts »). Remplissage EN COLONNE (5 lignes) : les 5 intitulés
   LONGS (rangés en tête dans le HTML) tiennent la colonne GAUCHE large, les 5 COURTS la
   colonne DROITE étroite. Colonnes en `max-content` + `space-between` → chaque puce sur une
   ligne, sans débordement (mesuré : 185px + 148px < 347px de contenu). */
.e-card-fonc .feats .fall{border-top:1px dashed #d7d5ea; margin-top:6px; padding-top:8px;
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,auto); grid-template-columns:max-content max-content;
  justify-content:space-between; row-gap:3px}
.e-card-fonc .feats .fall .fi{white-space:nowrap}
/* ⚠️ TEXTE AGRANDI DANS LA FEUILLE (Paul, 07/09) : la feuille a la place → on lit mieux.
   Scopé `.e-card-fonc` : le héros et /marketplace gardent leur échelle serrée.
   ⚠️ Chaîne à 5 classes (0,5,0) : v1.css pose `.v1c .mkt .f3 .fi` (0,4,0) — il faut le battre. */
.e-card-fonc .mkt .feats .f3 .fi{font-size:13px}
.e-card-fonc .mkt .feats .f3 .fi svg{width:17px; height:17px}
.e-card-fonc .mkt .feats .fall .fi{font-size:12px}
.e-card-fonc .mkt .feats .fall .fi svg{width:13px; height:13px}
/* « TYPE DE BIENS GÉRABLES » : une section (titre + puces), pas une ligne de liste (Paul,
   07/09). Puces aux jetons de marque. MÊME affichage à porter sur /marketplace une fois validé. */
.e-biens{margin-top:12px; padding-top:10px; border-top:1px dashed #d7d5ea}
.e-biens-t{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink)}
.e-biens-l{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.e-biens-l li{display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  background:var(--brand-weak); color:var(--brand-ink); font-size:12.5px; font-weight:600}
/* ⚠️ Le CTA se comporte comme la BARRE BASSE de la landing (Paul, 07/09) : pleine largeur,
   collé aux bords bas de la feuille (marges négatives annulant le padding de la carte),
   sans arrondi, même hauteur (60) → il occupe toute la partie basse. */
/* ⚠️ Le CTA du popup reprend l'ARRONDI du CTA de la landing (Paul, 07/09) : on ne force
   plus border-radius:0 ici → il hérite de `.e-app .e-cta` (coins hauts arrondis 22px sur
   desktop, plat sur mobile), identique à la barre du bas. Il reste pleine largeur. */
.e-app .e-modal-fonc .e-cta{flex:0 0 auto; width:auto; min-height:60px; margin:14px -14px 0}

/* ── SPLASH WEB « Le hub à l'horizon » (Paul, 01/09) — INCHANGÉ ─────────────
   L'overlay `.v1c.splash-web` ride sur v1.css ; ici on gère sa vie de PAGE : plein
   écran au-dessus de tout, puis effacement EN CSS après l'animation (aucun script). */
.splash-web{position:fixed; inset:0; z-index:9999; animation:splash-out .55s ease 3.2s forwards}
@keyframes splash-out{to{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .splash-web{display:none} }
.v1c.splash-web .orb{top:auto; left:auto; right:auto; bottom:auto}
.v1c.splash-web .orb.i1{top:calc(50% - 88px); left:calc(50% - 100px)}
.v1c.splash-web .orb.i2{top:calc(50% - 88px); right:calc(50% - 100px)}
.v1c.splash-web .orb.i3{top:calc(50% - 14px); left:calc(50% - 126px)}
.v1c.splash-web .orb.i4{top:calc(50% - 14px); right:calc(50% - 126px)}
.v1c.splash-web .bar{position:relative; bottom:auto; margin:15px auto 2px; width:150px}
.v1c.splash-web .scene .c1{left:14%}
.v1c.splash-web .scene .c2{left:58%}
.v1c.splash-web .scene .c3{left:32%}
/* Le sprite de définitions ne se voit pas mais prend sa place par défaut : on le borne. */
svg.magasins-defs{position:absolute; width:0; height:0; overflow:hidden}

/* ── LA CHORÉGRAPHIE — entrées sobres, jamais cachées au repos ──────────────
   Les entrées partent d'`opacity:0` DANS la keyframe : sans animation (mouvement
   réduit), tout est simplement visible. */
/* ⚠️ FONDU SEUL, AUCUN `transform`. Un translateY d'entrée agrandit la ZONE DE
   DÉFILEMENT pendant l'animation (même si la mise en page ne bouge pas) : c'est
   le « scrollbar qui apparaît puis disparaît » déjà corrigé ici le 27/08. Sur un
   écran B3 dont le dernier étage (le CTA) est collé en bas, le moindre décalage
   vers le bas déborde. Le mouvement vient des nuages, pas des entrées. */
@keyframes e-monte{from{opacity:0} to{opacity:1}}
@keyframes e-pop{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .e-top{animation:e-monte .5s cubic-bezier(.2,.8,.25,1) both; animation-delay:.05s}
  .e-h1{animation:e-monte .6s cubic-bezier(.2,.8,.25,1) both; animation-delay:.15s}
  .e-video{animation:e-pop .6s cubic-bezier(.2,.8,.25,1) both; animation-delay:.3s}
  .e-kpi{animation:e-pop .5s cubic-bezier(.2,.8,.25,1) both}
  .e-kpi:nth-child(1){animation-delay:.42s} .e-kpi:nth-child(2){animation-delay:.5s}
  .e-fonc-mkt{animation:e-monte .5s cubic-bezier(.2,.8,.25,1) both; animation-delay:.54s}
  .e-foot{animation:e-monte .6s cubic-bezier(.2,.8,.25,1) both; animation-delay:.58s}
}