/* =============================================================================
   YIMMO — Site vitrine · Système de design web (port fidèle de theme.dart / DESIGN.md v4)
   Épuré · spacieux · premium · "Dakar sunset". Zéro dépendance réseau.
   Bleu Océan = ACTION · Orange Sunset = VALEUR (accent ponctuel, jamais grand aplat).
   ============================================================================= */

/* ---------- Reset minimal ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus:not(:focus-visible){outline:0}

/* ============================ TOKENS (YColors / YSpace / YRadius / YShadows) ============================ */
:root{
  /* Couleurs — hex exacts du brand board */
  --ocean:#0D47A1; --ocean-deep:#082B66; --ocean-soft:#E8EEF9;
  --sunset:#FF9A00; --sunset-deep:#D96C00; --sunset-soft:#FFF1DC;
  --sunset-onblue:#FFCE87;   /* tint clair de sunset — accent de valeur AA sur fonds océan */
  --eyebrow-ink:#9A4E00;     /* sur-titre sur fond clair : AA (>=4.5:1 sur off-white), non-orange criard */
  --btn-sec-hover:#DCE6F7;   /* hover bouton secondaire (tint océan) */
  --sand:#E9B96B; --sand-soft:#FBF0DF; --sand-ink:#A16B24;
  --off-white:#F5F7FA; --white:#FFFFFF; --ink:#212121; --muted:#66707F;
  --coral:#E5484D; --coral-soft:#FDECEC; --ok:#1E8E5A; --ok-soft:#E3F4EB;
  --line:#E4E9F0; --night:#061E47; --cream:#FBF0DF;

  --bg:var(--off-white); --surface:var(--white); --text:var(--ink);
  --action:var(--ocean); --value:var(--sunset);

  /* Espacements — grille 8px */
  --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-14:14px;
  --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-80:80px; --sp-96:96px;
  --sp-screen:24px; --maxw:1160px; --maxw-narrow:760px;

  /* Rayons */
  --r-chip:12px; --r-input:14px; --r-tile:20px; --r-media:20px; --r-card:26px;
  --r-sheet:24px; --r-pill-btn:28px; --r-pill-chip:22px; --r-nav:34px; --r-full:999px;

  /* Hauteurs canoniques du kit */
  --h-btn:56px; --h-chip:44px; --h-search:56px; --h-nav:68px; --h-icon-btn:42px; --h-tag:26px;

  /* Ombres — rgb(27,43,75) */
  --sh-soft:0 4px 16px rgba(27,43,75,.06);
  --sh-nav:0 8px 24px rgba(27,43,75,.10);
  --sh-sticky:0 -6px 20px rgba(27,43,75,.08);
  --sh-hover:0 12px 32px rgba(27,43,75,.12);
  --glow-ocean:0 8px 20px rgba(13,71,161,.25);
  --glow-sunset:0 8px 20px rgba(217,108,0,.25);

  /* Dégradés signature */
  --grad-hero:linear-gradient(180deg,#082B66 0%,#0D47A1 60%,#123A82 100%);
  --scrim-featured:linear-gradient(to bottom,rgba(6,30,71,0) 42%,rgba(6,30,71,.92) 100%);

  /* Accessibilité / interaction */
  --focus-ring:0 0 0 3px rgba(13,71,161,.42);
  --focus-ring-onblue:0 0 0 3px rgba(255,255,255,.8);
  --disabled-opacity:.45;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1); --dur-press:90ms; --dur-ui:150ms; --dur-nav:200ms; --dur-reveal:560ms;

  /* Typo */
  --font-title:'Akt',ui-sans-serif,'Segoe UI',system-ui,sans-serif;
  --font-body:'FinlandicaHeadline',ui-sans-serif,'Segoe UI',system-ui,sans-serif;
  --fs-display:1.875rem; --fs-title:1.3125rem; --fs-section:1rem; --fs-item:.9375rem;
  --fs-body:.96875rem; --fs-caption:.8125rem; --fs-price:1.25rem; --fs-button:.96875rem;
  --fs-pill:.78125rem; --fs-stat:1.0625rem; --fs-wordmark:1.6rem;
  --fs-hero:clamp(2.1rem,1.15rem + 4vw,3.5rem);
  --fs-h2:clamp(1.6rem,1.1rem + 1.9vw,2.35rem);
  --fs-lead:clamp(1.02rem,.95rem + .4vw,1.18rem);
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;font-weight:500;
  color:var(--ink);background:var(--off-white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(13,71,161,.16)}

/* ---------- Rôles typographiques ---------- */
.t-display{font-family:var(--font-title);font-size:var(--fs-display);font-weight:600;line-height:1.18;letter-spacing:-.8px;color:var(--ink)}
.t-title{font-family:var(--font-title);font-size:var(--fs-title);font-weight:600;line-height:1.25;letter-spacing:-.4px;color:var(--ink)}
.t-section{font-family:var(--font-title);font-size:var(--fs-section);font-weight:600;line-height:1.3;color:var(--ink)}
.t-item{font-family:var(--font-title);font-size:var(--fs-item);font-weight:500;line-height:1.3;color:var(--ink)}
.t-body{font-family:var(--font-body);font-weight:500;line-height:1.5;color:var(--ink)}
.t-muted{color:var(--muted)}
.t-caption{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:600;line-height:1.35;color:var(--muted)}
.t-price{font-family:var(--font-title);font-size:var(--fs-price);font-weight:700;letter-spacing:-.4px;color:var(--ink)}
.t-figure{font-family:var(--font-title);font-weight:700;letter-spacing:-.4px;color:var(--ocean);font-variant-numeric:tabular-nums}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted)}

/* Sur-titre / eyebrow (accroche wolof, kicker de section) */
.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--eyebrow-ink);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow--onblue{color:var(--sunset-onblue)}
.eyebrow .fr{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:none}
.eyebrow--onblue .fr{color:rgba(255,255,255,.86)}

/* ============================ WORDMARK ============================ */
/* Akt bold italic (cohérent avec YWordmark de l'app), i sans point + pastille sunset. */
.wordmark{
  font-family:var(--font-title);font-weight:700;font-style:italic;font-size:var(--fs-wordmark);
  line-height:1;letter-spacing:-1px;color:var(--ocean);white-space:nowrap;display:inline-flex;align-items:baseline;
}
.wordmark--onblue{color:var(--cream)}
.wordmark .i{position:relative;font-style:italic}
.wordmark .i .dot{
  position:absolute;top:-.02em;left:50%;transform:translateX(-42%);
  width:.17em;height:.17em;border-radius:999px;background:var(--sunset);
}

/* Vrai logo Yimmo (détouré, crème) : pastille océan sur fond clair, crème direct sur fond sombre. */
.logo-chip{display:inline-flex;align-items:center;background:var(--ocean);border-radius:12px;padding:8px 13px;box-shadow:var(--glow-ocean)}
.logo-chip img{height:22px;width:auto;display:block}
.logo-img{height:28px;width:auto;display:block}

/* ============================ LAYOUT ============================ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-24)}
.section{padding-block:clamp(56px,7vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.section--soft{background:linear-gradient(180deg,var(--white),var(--off-white))}
.section--white{background:var(--white)}
.section-head{max-width:var(--maxw-narrow);margin-bottom:var(--sp-40)}
.section-head--center{margin-inline:auto;text-align:center}
h2.h2{font-family:var(--font-title);font-size:var(--fs-h2);font-weight:600;line-height:1.14;letter-spacing:-1px;color:var(--ink);margin-top:10px}
.section--dark h2.h2,.section--dark .lead{color:var(--white)}
.section--dark .lead{color:rgba(255,255,255,.82)}
.stack-8>*+*{margin-top:8px}.stack-12>*+*{margin-top:12px}.stack-16>*+*{margin-top:16px}
.stack-24>*+*{margin-top:24px}

/* WaveAccent (filet de respiration sous un titre) */
.wave{width:64px;height:12px;margin-top:16px}
.wave path{stroke:var(--sand);stroke-width:2.4;stroke-linecap:round;fill:none}
.section-head--center .wave{margin-inline:auto}

/* ============================ BOUTONS ============================ */
.y-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--h-btn);padding:0 28px;border:0;cursor:pointer;border-radius:var(--r-pill-btn);
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-button);letter-spacing:.1px;
  transition:transform var(--dur-press) var(--ease),box-shadow var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease),opacity var(--dur-ui);
  white-space:nowrap;
}
.y-btn .ic{width:20px;height:20px;flex:0 0 auto}
.y-btn:active{transform:scale(.985)}
.y-btn:focus-visible{outline:0}
.y-btn--primary{background:var(--ocean);color:#fff;box-shadow:var(--glow-ocean)}
.y-btn--primary:hover{box-shadow:var(--sh-hover),var(--glow-ocean)}
.y-btn--primary:focus-visible{box-shadow:var(--focus-ring),var(--glow-ocean)}
.y-btn--secondary{background:var(--ocean-soft);color:var(--ocean)}
.y-btn--secondary:hover{background:var(--btn-sec-hover)}
.y-btn--secondary:focus-visible{box-shadow:var(--focus-ring)}
.y-btn--pay{background:var(--sunset-deep);color:#fff;box-shadow:var(--glow-sunset)}
.y-btn--pay:focus-visible{box-shadow:var(--focus-ring),var(--glow-sunset)}
.y-btn--ghost{background:transparent;color:var(--ocean);height:auto;padding:6px 4px;border-radius:8px}
.y-btn--ghost:hover{color:var(--ocean-deep)}
.y-btn--ghost:focus-visible{box-shadow:var(--focus-ring)}
.y-btn--onblue{background:#fff;color:var(--ocean)}
.y-btn--onblue:focus-visible{box-shadow:var(--focus-ring-onblue)}
.y-btn--outline-blue{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.y-btn--outline-blue:hover{background:rgba(255,255,255,.08)}
.y-btn--outline-blue:focus-visible{box-shadow:var(--focus-ring-onblue)}
.y-btn--block{width:100%}
.y-btn[disabled]{opacity:var(--disabled-opacity);box-shadow:none;cursor:default}
.linkarrow{display:inline-flex;align-items:center;gap:6px;color:var(--ocean);font-weight:700;font-size:var(--fs-button)}
.linkarrow .ic{width:18px;height:18px;transition:transform var(--dur-ui) var(--ease)}
.linkarrow:hover .ic{transform:translateX(3px)}
.linkarrow:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:8px}

/* ============================ CHIPS / TAGS ============================ */
.y-chip{
  display:inline-flex;align-items:center;gap:6px;height:var(--h-chip);padding:0 18px;border:0;cursor:default;
  border-radius:var(--r-pill-chip);background:var(--white);color:var(--ink);box-shadow:var(--sh-soft);
  font-family:var(--font-title);font-weight:500;font-size:14px;line-height:1;
}
.y-chip .ic{width:16px;height:16px;color:var(--ok)}
.y-chip.is-selected{background:var(--ocean);color:#fff;font-weight:600;box-shadow:var(--glow-ocean)}
.y-chip.is-selected .ic{color:#fff}
.y-tag{
  display:inline-flex;align-items:center;gap:5px;height:var(--h-tag);padding:0 12px;border-radius:13px;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-pill);line-height:1;white-space:nowrap;
}
.y-tag .ic{width:13px;height:13px}
.y-tag--ok{background:var(--ok-soft);color:var(--ok)}
.y-tag--ocean{background:var(--ocean-soft);color:var(--ocean)}
.y-tag--sand{background:var(--sand-soft);color:var(--sand-ink)}
.y-tag--coral{background:var(--coral-soft);color:var(--coral)}
.y-tag--neutral{background:var(--white);color:var(--muted);box-shadow:var(--sh-soft)}
.y-tag--onmedia{background:rgba(6,30,71,.42);color:#fff;backdrop-filter:blur(2px)}

/* ============================ HEADER ============================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,247,250,.82);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:box-shadow var(--dur-ui),border-color var(--dur-ui)}
.site-header.is-stuck{box-shadow:var(--sh-nav);border-color:var(--line)}
.site-header__inner{display:flex;align-items:center;gap:20px;height:72px}
.site-header__nav{display:flex;align-items:center;gap:28px;margin-left:12px}
.site-header__nav a{font-family:var(--font-body);font-weight:600;font-size:.94rem;color:var(--muted);transition:color var(--dur-ui)}
.site-header__nav a:hover{color:var(--ink)}
.site-header__nav a:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:8px}
.site-header__cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.site-header__cta .y-btn{height:44px;padding:0 20px;font-size:.9rem}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:10px}
.nav-toggle{display:none}
.mobile-nav{display:none}

/* ============================ HERO ============================ */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;background:var(--grad-hero)}
.hero__scene{position:absolute;inset:0;z-index:-2}
.hero__scene img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(6,30,71,.38) 0%,rgba(6,30,71,.24) 34%,rgba(6,30,71,.62) 100%),
  radial-gradient(120% 90% at 15% 30%,rgba(6,30,71,.55) 0%,rgba(6,30,71,0) 60%)}
.hero__inner{padding-block:clamp(72px,11vw,132px);max-width:760px}
.hero__title{font-family:var(--font-title);font-weight:600;font-size:var(--fs-hero);line-height:1.06;letter-spacing:-1.4px;color:#fff;margin-top:18px}
.hero__title .hl{color:var(--sunset-onblue)}
.hero__sub{font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.9);margin-top:20px;max-width:600px}
.hero__example{margin-top:22px;color:rgba(255,255,255,.95)}
.hero__actions{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hero__reassure{margin-top:16px;font-size:.9rem;color:#fff;display:flex;align-items:center;gap:8px;text-shadow:0 1px 6px rgba(6,30,71,.45)}
.hero__reassure .ic{color:var(--sunset-onblue)}
.hero__proof{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.proof-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.83rem;font-weight:600;backdrop-filter:blur(3px)}
.proof-chip .ic{width:15px;height:15px;color:var(--sunset-onblue)}

/* Champ "décris ton besoin" (YSearchBar) */
.demandbar{display:flex;gap:10px;margin-top:26px;max-width:560px}
.demandbar__field{flex:1;display:flex;align-items:center;gap:10px;height:var(--h-search);padding:0 18px;border-radius:var(--r-input);background:#fff;box-shadow:var(--sh-nav)}
.demandbar__field:focus-within{box-shadow:var(--sh-nav),var(--focus-ring)}
.demandbar__field .ic{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.demandbar__field input{flex:1;border:0;background:none;outline:0;color:var(--ink);font-weight:500;font-size:.95rem;min-width:0}
.demandbar__field input::placeholder{color:var(--muted)}
.demandbar .y-btn{flex:0 0 auto}

/* ============================ CARTES ============================ */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.y-card{position:relative;background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:var(--sp-24);overflow:hidden}
.y-card--pad-lg{padding:var(--sp-32)}
.y-card__ic{width:46px;height:46px;border-radius:14px;background:var(--ocean-soft);display:grid;place-items:center;margin-bottom:16px}
.y-card__ic .ic{width:24px;height:24px;color:var(--ocean)}
.y-card__ic--value{background:var(--sunset-soft)}
.y-card__ic--value .ic{color:var(--sunset-deep)}
/* Motif de carte : quart de cercle oceanSoft (brand board). Pas de pastille orange
   décorative ici — l'orange reste réservé à la valeur (DESIGN.md §7). */
.y-card--motif::before{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:var(--ocean-soft);border-radius:0 0 0 60px;z-index:0}
.y-card--motif>*{position:relative;z-index:2}

/* Étapes numérotées */
.step__num{font-family:var(--font-title);font-weight:700;font-size:1.9rem;letter-spacing:-1px;color:var(--ocean);line-height:1}
.step__num .u{color:var(--sunset)}

/* Stat tiles */
.y-statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.y-stat{background:var(--white);border-radius:var(--r-tile);box-shadow:var(--sh-soft);padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.y-stat .ic{width:20px;height:20px;color:var(--ocean)}
.y-stat .value{font-family:var(--font-title);font-weight:600;font-size:var(--fs-stat);color:var(--ink)}
.y-stat .label{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--muted)}

/* ============================ SHOWCASE PRODUIT (featured cards) ============================ */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.y-featured{position:relative;height:clamp(240px,26vw,320px);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-soft);display:block;color:#fff}
.y-featured .scene{position:absolute;inset:0}
.y-featured .scene img,.y-featured .scene svg{width:100%;height:100%;object-fit:cover}
.y-featured::after{content:"";position:absolute;inset:0;background:var(--scrim-featured)}
.y-featured__top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;z-index:2}
.y-featured__foot{position:absolute;left:16px;right:16px;bottom:15px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.y-featured__foot .ttl{font-family:var(--font-title);font-weight:600;font-size:1rem;color:#fff}
.y-featured__foot .specs{display:flex;gap:14px;margin-top:6px;color:rgba(255,255,255,.82);font-size:.78rem}
.y-featured__foot .specs span{display:inline-flex;align-items:center;gap:4px}
.y-featured__foot .specs .ic{width:14px;height:14px}
.y-featured__foot .price{font-family:var(--font-title);font-weight:700;font-size:1.05rem;letter-spacing:-.4px;white-space:nowrap}
.y-featured__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:2;box-shadow:var(--sh-soft)}
.y-featured__play .ic{width:26px;height:26px;color:var(--ocean);margin-left:3px}

/* ============================ DOUBLE AUDIENCE (lanes) ============================ */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lane{border-radius:var(--r-card);padding:clamp(24px,3vw,40px);box-shadow:var(--sh-soft);position:relative;overflow:hidden;display:flex;flex-direction:column}
.lane--locataire{background:var(--white)}
.lane--offreur{background:linear-gradient(180deg,#FFF7EA,var(--sunset-soft))}
.lane__eyebrow{margin-bottom:14px}
.lane h3{font-family:var(--font-title);font-weight:600;font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);line-height:1.16;letter-spacing:-.6px;color:var(--ink)}
.lane p.desc{margin-top:14px;color:var(--muted);line-height:1.55}
.lane ul{margin-top:22px;display:flex;flex-direction:column;gap:13px;flex:1}
.lane ul li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.lane ul li .ic{width:20px;height:20px;flex:0 0 auto;color:var(--ok);margin-top:1px}
/* Coches = signal positif (vert), identique des deux côtés ; la chaleur du couloir
   offreur vient de son fond sunsetSoft, pas de coches orange (cohérence sémantique). */
.lane__cta{margin-top:26px}
.lane__note{margin-top:12px;font-size:.82rem;color:var(--muted)}
.lane__note--recharge{margin-top:8px}
.lane__note--recharge a{color:var(--sunset-deep);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.lane__note--recharge a:hover{color:var(--ocean)}
.price-badge{display:inline-flex;align-items:baseline;gap:8px;margin-top:4px}
.price-badge .amount{font-family:var(--font-title);font-weight:700;font-size:1.5rem;color:var(--ocean);letter-spacing:-.5px}
.price-badge .ttc{font-size:.78rem;color:var(--muted);font-weight:600}

/* ============================ CONFIANCE (liste ordonnée + sceau) ============================ */
.trust-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trust-item{display:flex;gap:16px;align-items:flex-start;background:var(--white);border-radius:var(--r-tile);box-shadow:var(--sh-soft);padding:20px}
.trust-item .n{font-family:var(--font-title);font-weight:700;font-size:1.15rem;color:var(--ocean);line-height:1;flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--ocean-soft);display:grid;place-items:center}
.trust-item p{font-size:.95rem;line-height:1.45}
.trust-item strong{font-family:var(--font-title);font-weight:600}
.seal{margin-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--ocean-deep);color:#fff;border-radius:var(--r-card);padding:24px 28px;position:relative;overflow:hidden}
.seal__badge{flex:0 0 auto;width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.seal__badge .ic{width:30px;height:30px;color:var(--sunset-onblue)}
.seal__body{flex:1;min-width:240px}
.seal__body .k{font-family:var(--font-title);font-weight:600;font-size:1.02rem}
.seal__body .v{font-size:.86rem;color:rgba(255,255,255,.78);margin-top:4px;line-height:1.5}
.seal__body .v b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* ============================ COMPARATIF (WhatsApp vs Yimmo) ============================ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare__col{border-radius:var(--r-card);padding:26px;box-shadow:var(--sh-soft)}
.compare__col--them{background:var(--white)}
.compare__col--us{background:linear-gradient(180deg,#F4F8FF,var(--ocean-soft))}
.compare__col h3{font-family:var(--font-title);font-weight:600;font-size:1.12rem;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.compare-them-h .ic{color:var(--muted)}
.compare__col ul{display:flex;flex-direction:column;gap:12px}
.compare__col li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;line-height:1.4}
.compare__col li .ic{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.compare__col--them li .ic{color:var(--coral)}
.compare__col--us li .ic{color:var(--ok)}

/* ============================ FAQ ============================ */
.faq{max-width:var(--maxw-narrow);margin-inline:auto}
.faq details{background:var(--white);border-radius:var(--r-tile);box-shadow:var(--sh-soft);padding:4px 22px;margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--font-title);font-weight:600;font-size:1.02rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:22px;height:22px;flex:0 0 auto;color:var(--ocean);transition:transform var(--dur-ui) var(--ease)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .answer{padding:0 0 22px;color:var(--muted);line-height:1.6;font-size:.96rem;max-width:62ch}
.faq .answer strong{color:var(--ink);font-weight:600}

/* ============================ CTA FINAL ============================ */
.cta-final{position:relative;isolation:isolate;color:#fff;overflow:hidden;background:var(--grad-hero);border-radius:0}
.cta-final__scene{position:absolute;inset:0;z-index:-2;opacity:.9}
.cta-final__scene img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.cta-final__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,30,71,.55),rgba(6,30,71,.8))}
.cta-final .wrap{text-align:center;padding-block:clamp(64px,9vw,120px)}
.cta-final h2{font-family:var(--font-title);font-weight:600;font-size:var(--fs-h2);letter-spacing:-1px;line-height:1.1;color:#fff}
.cta-final p{max-width:560px;margin:18px auto 0;color:rgba(255,255,255,.9);font-size:var(--fs-lead)}
.cta-final__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.cta-final__proof{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:.85rem;color:rgba(255,255,255,.8)}
.cta-final__proof span{display:inline-flex;align-items:center;gap:7px}
.cta-final__proof .ic{width:15px;height:15px;color:var(--sunset-onblue)}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--ocean-deep);color:rgba(255,255,255,.72);padding-block:56px 64px;font-size:.9rem}
.site-footer a{color:rgba(255,255,255,.72);transition:color var(--dur-ui)}
.site-footer a:hover{color:#fff}
.site-footer a:focus-visible{outline:0;box-shadow:var(--focus-ring-onblue);border-radius:6px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px}
.footer-brand .wordmark{font-size:1.7rem;margin-bottom:14px}
.footer-brand p{max-width:34ch;line-height:1.6}
.footer-col h3{font-family:var(--font-title);font-weight:600;color:#fff;font-size:.94rem;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.footer-legal .reg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.82rem;line-height:1.6}
.footer-legal .reg b{color:rgba(255,255,255,.9);font-weight:600;font-variant-numeric:tabular-nums}
.footer-disclaimer{margin-top:16px;font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.55);max-width:80ch}

/* ============================ REVEAL / MOTION ============================ */
/* Progressive enhancement : le contenu est visible par défaut (no-JS / crawlers).
   L'animation ne s'active QUE si <html class="js"> (posé par le script inline du head). */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js [data-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.js [data-stagger].is-in>*{opacity:1;transform:none}
/* Filet de sécurité : si main.js ne signale pas "prêt" (échec de chargement sur 4G
   instable), tout le contenu masqué est ré-affiché — jamais de page vide. */
.no-reveal .reveal,.no-reveal [data-stagger]>*{opacity:1!important;transform:none!important}

/* ============================ SKIP LINK / A11Y ============================ */
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ocean);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;transition:top var(--dur-ui)}
.skip-link:focus{top:16px}
.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}

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.showcase{grid-template-columns:1fr}
  .lanes,.compare,.trust-list,.footer-grid{grid-template-columns:1fr}
  .footer-grid{gap:28px}
}
/* Header : bascule vers le hamburger AVANT tout débordement (iPad portrait 768) */
@media (max-width:900px){
  .site-header__nav{display:none}
  .site-header__cta .y-btn{display:none}
  .nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ocean-soft);border:0;cursor:pointer;margin-left:auto}
  .nav-toggle .ic{width:22px;height:22px;color:var(--ocean)}
  .site-header__cta{margin-left:auto}
  .mobile-nav{flex-direction:column;gap:4px;padding:8px 0 16px}
  .mobile-nav.is-open{display:flex}
  .mobile-nav a{padding:12px 8px;font-weight:600;color:var(--ink);border-radius:10px}
  .mobile-nav a:hover{background:var(--ocean-soft)}
}
@media (max-width:760px){
  .grid-2,.grid-4{grid-template-columns:1fr}
  .y-statrow{grid-template-columns:repeat(2,1fr)}
  .hero__actions .y-btn{width:100%}
  .demandbar{flex-direction:column}
  .demandbar .y-btn{width:100%}
}
@media (max-width:480px){
  .seal{padding:20px}
  .seal__body{min-width:0}
}
@media (max-width:400px){
  .site-header__cta .y-btn--primary{display:none}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js [data-stagger]>*{opacity:1!important;transform:none!important}
}

/* =============================================================================
   v2 — Site vivant : stats, bento, comparateur 3 colonnes, rail quartiers,
   téléchargement (mockup + badges + QR), teaser journal, micro-animations.
   ============================================================================= */

/* ---------- Bande de chiffres (faits produit honnêtes, count-up) ---------- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.statband__item{background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:26px 20px;text-align:center;position:relative;overflow:hidden}
.statband__num{font-family:var(--font-title);font-weight:700;font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem);letter-spacing:-1px;color:var(--ocean);line-height:1;font-variant-numeric:tabular-nums}
.statband__num .u{color:var(--sunset)}
.statband__label{margin-top:10px;font-size:.9rem;color:var(--muted);line-height:1.4}

/* ---------- Bento « Pourquoi Yimmo » ---------- */
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:1fr;gap:20px}
.bento__card{border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:260px}
.bento__card h3{font-family:var(--font-title);font-weight:600;font-size:1.18rem;letter-spacing:-.3px;line-height:1.2}
.bento__card p{margin-top:10px;line-height:1.5;font-size:.95rem}
.bento__card--dark{background:linear-gradient(155deg,var(--ocean),var(--ocean-deep));color:#fff}
.bento__card--dark p{color:rgba(255,255,255,.82)}
.bento__ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.12);display:grid;place-items:center;margin-bottom:16px}
.bento__ic .ic{width:24px;height:24px;color:#fff}
.bento__spacer{flex:1}
/* pseudo-toggle « activé » (décor, écho au Game Mode de l'inspi) */
.toggle-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:var(--r-full);padding:7px 8px 7px 14px;font-size:.85rem;font-weight:600;color:#fff;align-self:flex-start}
.toggle-pill .sw{width:38px;height:22px;border-radius:999px;background:var(--sunset);position:relative;flex:0 0 auto}
.toggle-pill .sw::after{content:"";position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:999px;background:#fff}
.bento__card--media{color:#fff;padding:0;min-height:260px}
.bento__card--media .scene{position:absolute;inset:0}
.bento__card--media .scene img,.bento__card--media .scene svg{width:100%;height:100%;object-fit:cover}
.bento__card--media::after{content:"";position:absolute;inset:0;background:var(--scrim-featured)}
.bento__card--media .label{position:absolute;top:16px;left:16px;z-index:2}
.bento__card--media .cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.bento__card--media .cap h3{color:#fff}
.bento__card--media .cap p{color:rgba(255,255,255,.85)}
.bento__card--score{background:var(--white)}
.scorebars{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.scorebar{display:flex;align-items:center;gap:12px}
.scorebar .k{width:64px;font-family:var(--font-title);font-weight:600;font-size:.9rem;color:var(--ink)}
.scorebar .dots{flex:1;display:flex;gap:5px}
.scorebar .dots i{flex:1;height:8px;border-radius:999px;background:var(--ocean-soft)}
.scorebar .dots i.on{background:var(--ocean)}
.scorebar.colle .dots i.on{background:var(--ocean)}
.scorebar .v{font-family:var(--font-title);font-weight:700;font-size:.9rem;color:var(--ocean);font-variant-numeric:tabular-nums;width:34px;text-align:right}

/* ---------- Comparateur 3 colonnes ---------- */
.ctable{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.ccol{border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:26px 24px;background:var(--white);display:flex;flex-direction:column}
.ccol--yimmo{background:linear-gradient(180deg,#F4F8FF,var(--ocean-soft));box-shadow:var(--sh-hover);position:relative}
.ccol--yimmo::before{content:"Recommandé";position:absolute;top:-11px;left:24px;background:var(--sunset-deep);color:#fff;font-family:var(--font-body);font-weight:700;font-size:.7rem;letter-spacing:.04em;padding:4px 12px;border-radius:999px}
.ccol__h{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-height:34px}
.ccol__h .name{font-family:var(--font-title);font-weight:600;font-size:1.08rem}
.ccol__sub{font-size:.82rem;color:var(--muted);margin-bottom:16px}
.ccol ul{display:flex;flex-direction:column;gap:12px;flex:1}
.ccol li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.4}
.ccol li .ic{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.ccol li.no{color:var(--muted)}
.ccol li.no .ic{color:var(--coral)}
.ccol li.yes .ic{color:var(--ok)}
.ccol li.meh .ic{color:var(--sand-ink)}

/* ---------- Rail de quartiers (marquee) ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:12px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.q-chip{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:var(--r-full);background:var(--white);box-shadow:var(--sh-soft);font-family:var(--font-title);font-weight:500;font-size:.96rem;white-space:nowrap;color:var(--ink)}
.q-chip .pin{width:9px;height:9px;border-radius:999px;background:var(--sunset);flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Téléchargement de l'app ---------- */
.download{background:linear-gradient(180deg,var(--white),var(--off-white))}
.download__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.download__actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.store-badge{display:inline-flex;align-items:center;gap:11px;height:56px;padding:0 20px;border-radius:14px;background:var(--ocean-deep);color:#fff;transition:transform var(--dur-press) var(--ease),box-shadow var(--dur-ui)}
.store-badge:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.store-badge:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.store-badge svg{width:26px;height:26px;flex:0 0 auto}
.store-badge .lbl{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store-badge .lbl small{font-size:.66rem;opacity:.8;font-weight:600}
.store-badge .lbl b{font-family:var(--font-title);font-weight:600;font-size:1rem}
.qr-card{display:flex;align-items:center;gap:16px;background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:14px 18px 14px 14px;margin-top:20px;max-width:340px}
.qr-card img{width:92px;height:92px;flex:0 0 auto}
.qr-card .qr-txt{font-size:.86rem;color:var(--muted);line-height:1.45}
.qr-card .qr-txt b{color:var(--ink);font-family:var(--font-title);font-weight:600;display:block;font-size:.98rem;margin-bottom:3px}
.download__note{margin-top:16px;font-size:.82rem;color:var(--muted)}

/* Mockup téléphone */
.phone-wrap{display:flex;justify-content:center}
.phone{width:clamp(240px,26vw,290px);aspect-ratio:9/19;border-radius:40px;background:#0b1b3a;padding:9px;box-shadow:var(--sh-hover);position:relative;animation:floaty 6s var(--ease) infinite}
.phone__notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:92px;height:22px;border-radius:12px;background:#0b1b3a;z-index:4}
.phone__screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--off-white);display:flex;flex-direction:column;position:relative}
.appui{padding:26px 14px 14px;display:flex;flex-direction:column;gap:12px;height:100%}
.appui__greet{display:flex;align-items:center;gap:9px}
.appui__greet .av{width:32px;height:32px;border-radius:999px;background:var(--sand-soft);display:grid;place-items:center;font-size:15px}
.appui__greet .t{font-family:var(--font-title);font-weight:600;font-size:.92rem}
.appui__search{height:40px;border-radius:12px;background:var(--white);box-shadow:var(--sh-soft);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-size:.78rem}
.appui__search .ic{width:15px;height:15px}
.appui__feat{border-radius:14px;overflow:hidden;position:relative;flex:1;min-height:120px}
.appui__feat .scene{position:absolute;inset:0}
.appui__feat .scene img,.appui__feat .scene svg{width:100%;height:100%;object-fit:cover}
.appui__feat::after{content:"";position:absolute;inset:0;background:var(--scrim-featured)}
.appui__feat .top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:2}
.appui__feat .bot{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;color:#fff}
.appui__feat .bot .ti{font-family:var(--font-title);font-weight:600;font-size:.82rem}
.appui__feat .bot .pr{font-family:var(--font-title);font-weight:700;font-size:.86rem}
.appui__row{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:12px;box-shadow:var(--sh-soft);padding:9px 11px}
.appui__row .thumb{width:38px;height:38px;border-radius:9px;overflow:hidden;flex:0 0 auto;position:relative}
.appui__row .thumb .scene{position:absolute;inset:0}
.appui__row .meta{flex:1;min-width:0}
.appui__row .meta .n{font-family:var(--font-title);font-weight:600;font-size:.76rem;color:var(--ink)}
.appui__row .meta .s{font-size:.68rem;color:var(--muted)}
.appui__nav{height:44px;border-radius:16px;background:var(--white);box-shadow:var(--sh-nav);display:flex;align-items:center;justify-content:space-around;margin-top:2px}
.appui__nav i{width:18px;height:18px;border-radius:5px;background:var(--ocean-soft)}
.appui__nav i.act{background:var(--ocean);position:relative}
.appui__nav i.act::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:4px;height:4px;border-radius:999px;background:var(--sunset)}

/* ---------- Micro-animations ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowpulse{0%,100%{opacity:.5}50%{opacity:.8}}
.hero__glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 40% at var(--gx,42%) 58%,rgba(255,154,0,.28),transparent 70%);animation:glowpulse 7s var(--ease) infinite;pointer-events:none}
.tw-caret{display:inline-block;width:2px;height:1em;background:var(--ocean);margin-left:1px;vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.arrow-ne{display:inline-block;transition:transform var(--dur-ui) var(--ease)}
.y-btn:hover .arrow-ne,a:hover>.arrow-ne{transform:translate(2px,-2px)}

.desktop-only{display:block}
@media (max-width:860px){
  .statband{grid-template-columns:repeat(2,1fr)}
  .bento,.ctable{grid-template-columns:1fr}
  .download__grid{grid-template-columns:1fr;gap:28px}
  .phone-wrap{order:-1}
  .desktop-only{display:none}
}

/* Reduced-motion : coupe marquee, float, glow, caret */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .phone{animation:none}
  .hero__glow{animation:none;opacity:.55}
  .tw-caret{animation:none}
}

/* Pulse au scroll vers la section téléchargement (feedback du champ hero sur desktop) */
.pulse-once{animation:pulseonce 1.3s var(--ease)}
@keyframes pulseonce{0%{box-shadow:inset 0 0 0 0 rgba(13,71,161,0)}28%{box-shadow:inset 0 0 0 4px rgba(13,71,161,.14)}100%{box-shadow:inset 0 0 0 0 rgba(13,71,161,0)}}
@media (prefers-reduced-motion:reduce){.pulse-once{animation:none}}

/* Fix : contraindre les icônes des listes de la section téléchargement */
.download__grid ul li .ic{width:20px;height:20px;flex:0 0 auto;margin-top:1px}

/* Polish mockup : lignes de résultat en colonne, pied du featured aligné */
.appui__row .meta{display:flex;flex-direction:column;gap:1px}
.appui__row .meta .s{margin-top:1px}
.appui__feat .bot{display:flex;align-items:baseline;justify-content:space-between;gap:8px}

/* =============================================================================
   v3 — Vrais écrans d'app (mockups device), aperçu double, layouts + originaux
   ============================================================================= */

/* Cadre device (iPhone) tenant une VRAIE capture d'écran de l'app */
.device{position:relative;width:var(--dw,248px);flex:0 0 auto;border-radius:38px;background:#0a1a38;padding:9px;box-shadow:0 26px 60px rgba(6,30,71,.28),0 8px 20px rgba(6,30,71,.16)}
.device img{width:100%;height:auto;display:block;border-radius:30px}
.device--float{animation:floaty 6s var(--ease) infinite}
.device--tilt{transform:rotate(-5deg)}
.device--tilt-r{transform:rotate(5deg)}
@media (prefers-reduced-motion:reduce){.device--float{animation:none}}

/* Aperçu double : côté locataire / côté offreur, vraies interfaces */
.dual-preview{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.preview-card{display:flex;gap:26px;align-items:center;border-radius:var(--r-card);padding:30px;box-shadow:var(--sh-soft);overflow:hidden;position:relative}
.preview-card--tenant{background:linear-gradient(160deg,#fff,var(--ocean-soft))}
.preview-card--offreur{background:linear-gradient(160deg,#FFF8EE,var(--sunset-soft));flex-direction:row-reverse}
.preview-card figcaption{flex:1;min-width:0}
.preview-card figcaption .eyebrow{margin-bottom:10px}
.preview-card figcaption h3{font-family:var(--font-title);font-weight:600;font-size:1.3rem;letter-spacing:-.4px;line-height:1.15;color:var(--ink)}
.preview-card figcaption p{margin-top:12px;color:var(--muted);line-height:1.55;font-size:.95rem}
.preview-card .device{--dw:186px}
.preview-caption-note{text-align:center;margin-top:18px;font-size:.82rem;color:var(--muted)}

/* Bande de stats — panneau océan sombre, grands chiffres crème */
.statband-panel{background:linear-gradient(135deg,#0C3576 0%,var(--night) 100%);border-radius:var(--r-card);padding:clamp(30px,4vw,48px);position:relative;overflow:hidden}
.statband-panel .geo{position:absolute;right:0;top:0;width:220px;opacity:.5;pointer-events:none}
.statband-dark{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.statband-dark .item{text-align:left;padding-left:18px;border-left:2px solid rgba(255,255,255,.16)}
.statband-dark .num{font-family:var(--font-title);font-weight:700;font-size:clamp(2.6rem,1.5rem + 3.2vw,3.8rem);letter-spacing:-1.5px;color:#fff;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.statband-dark .num .u{color:var(--sunset)}
.statband-dark .lbl{margin-top:12px;font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.4}

/* Logos de paiement (offreur) */
.paylogos{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.paylogos .lead-txt{font-size:.82rem;color:var(--muted)}
.paylogos img{height:26px;width:auto;display:block;border-radius:6px}

/* Steps « comment ça marche » : connecteur + gros numéros */
.steps-flow{position:relative}
.steps-flow .connector{display:none}

/* Journal : première carte en vedette (asymétrie) */
.journal-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
.journal-grid .article-card--feat{grid-row:span 2}
.journal-grid .article-card--feat .article-card__media{aspect-ratio:16/9}
.journal-grid .article-card--feat .article-card__body h2{font-size:1.5rem}

@media (max-width:900px){
  .dual-preview{grid-template-columns:1fr}
  .preview-card,.preview-card--offreur{flex-direction:column;text-align:center}
  .preview-card figcaption .eyebrow{justify-content:center}
  .statband-dark{grid-template-columns:repeat(2,1fr);gap:22px}
  .journal-grid{grid-template-columns:1fr}
  .journal-grid .article-card--feat{grid-row:auto}
}

/* =============================================================================
   v4 — Panneau téléchargement (device peek), barres numérotées, corrections
   ============================================================================= */
.download{background:var(--off-white)}
.dl-panel{position:relative;overflow:hidden;border-radius:var(--r-card);background:linear-gradient(140deg,#0F4EA8 0%,var(--ocean-deep) 60%,var(--night) 100%);color:#fff;display:grid;grid-template-columns:1.02fr .98fr;gap:24px;padding:clamp(32px,4vw,60px);min-height:560px;align-items:center}
.dl-panel__glow{position:absolute;right:-8%;top:-28%;width:62%;height:130%;background:radial-gradient(circle,rgba(255,154,0,.24),transparent 60%);pointer-events:none;z-index:0}
.dl-panel__copy{position:relative;z-index:2;max-width:470px}
.dl-panel__copy h2{font-family:var(--font-title);font-weight:600;font-size:var(--fs-h2);letter-spacing:-1px;line-height:1.1;color:#fff;margin-top:12px}
.dl-lead{color:rgba(255,255,255,.86);font-size:var(--fs-lead);line-height:1.55;margin-top:16px}
.dl-checks{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.dl-checks li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:#fff}
.dl-checks .ic{width:20px;height:20px;flex:0 0 auto;color:#8BE3B4;margin-top:1px}
.store-badge--light{background:#fff;color:var(--ocean-deep)}
.store-badge--light:hover{background:#fff;transform:translateY(-2px)}
.store-badge--light .lbl small{opacity:.62}
.dl-note{margin-top:16px;font-size:.82rem;color:rgba(255,255,255,.7)}
.dl-panel__devices{position:relative;align-self:stretch;min-height:460px;z-index:1}
.dl-panel__devices .device{position:absolute;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.dl-panel__devices .device--a{left:4%;bottom:-64px;z-index:2}
.dl-panel__devices .device--b{right:0;bottom:-30px;z-index:1}
@media (max-width:860px){
  .dl-panel{grid-template-columns:1fr;min-height:auto}
  .dl-panel__devices{min-height:340px;margin-top:8px;overflow:hidden}
  .dl-panel__devices .device--a{left:50%;transform:translateX(-58%) rotate(-5deg)}
  .dl-panel__devices .device--b{display:none}
}

/* Barres numérotées « comment ça marche » (inspiration éditoriale) */
.flowbars{display:flex;flex-direction:column;gap:16px}
.flowbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;border-radius:var(--r-card);padding:26px 30px;box-shadow:var(--sh-soft);transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui)}
.flowbar:hover{transform:translateX(6px);box-shadow:var(--sh-hover)}
.flowbar--1{background:linear-gradient(100deg,var(--ocean-soft),#EEF4FE)}
.flowbar--2{background:linear-gradient(100deg,var(--sunset-soft),#FFF7EA)}
.flowbar--3{background:linear-gradient(100deg,var(--ok-soft),#EAF7F0)}
.flowbar__n{font-family:var(--font-title);font-weight:700;font-size:clamp(2rem,1.3rem + 2vw,2.8rem);letter-spacing:-1.5px;line-height:1;font-variant-numeric:tabular-nums}
.flowbar--1 .flowbar__n{color:var(--ocean)}
.flowbar--2 .flowbar__n{color:var(--sunset-deep)}
.flowbar--3 .flowbar__n{color:var(--ok)}
.flowbar__body h3{font-family:var(--font-title);font-weight:600;font-size:1.2rem;letter-spacing:-.3px;color:var(--ink)}
.flowbar__body p{margin-top:6px;color:#3a424f;line-height:1.5;font-size:.96rem;max-width:64ch}
.flowbar__arrow{width:44px;height:44px;border-radius:999px;background:var(--white);display:grid;place-items:center;flex:0 0 auto;box-shadow:var(--sh-soft)}
.flowbar__arrow .ic{width:20px;height:20px;color:var(--ink)}
.flowbar:hover .flowbar__arrow .ic{transform:translate(2px,-2px)}
@media (max-width:600px){
  .flowbar{grid-template-columns:auto 1fr;gap:16px;padding:22px}
  .flowbar__arrow{display:none}
}

/* =============================================================================
   v5 — Hero asymétrique (cluster de téléphones), preuve bento alterné, lanes device
   ============================================================================= */
/* Hero : grille 2 colonnes, cluster à droite */
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center;padding-block:clamp(60px,8vw,110px)}
.hero__left{max-width:600px;position:relative;z-index:2}
.hero__right{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}
.hero__cluster{position:relative;width:100%;height:500px;max-width:460px}
.hero__cluster .device{position:absolute;box-shadow:0 34px 80px rgba(0,0,0,.45);outline:1px solid rgba(255,255,255,.06)}
.hero__cluster .device--main{--dw:236px;left:4%;top:14px;z-index:2;transform:rotate(-4deg)}
.hero__cluster .device--back{--dw:206px;right:0;top:96px;z-index:1;transform:rotate(6deg)}
.float-chip{position:absolute;z-index:3;background:rgba(255,255,255,.97);border-radius:14px;box-shadow:0 16px 36px rgba(6,30,71,.28);padding:11px 15px;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:.83rem;color:var(--ink);white-space:nowrap}
.float-chip .dot{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.float-chip .sub{font-weight:600;color:var(--muted);font-size:.76rem}
.float-chip--score{top:6%;right:2%}
.float-chip--score .dot{background:var(--ocean)}
.float-chip--dispo{bottom:8%;left:-2%}
.float-chip--dispo .dot{background:var(--ok)}
.float-chip--anim{animation:floaty 7s var(--ease) infinite}
.float-chip--anim.d2{animation-delay:1.6s}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__right{display:none}
}

/* Preuve : bento alterné sombre/clair avec flèche ↗ (inspi WizardZ) */
.proof-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pb-card{position:relative;border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-soft);min-height:200px;display:flex;flex-direction:column;overflow:hidden;transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui)}
.pb-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.pb-card__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:auto}
.pb-card__ic .ic{width:25px;height:25px}
.pb-card h3{font-family:var(--font-title);font-weight:600;font-size:1.18rem;letter-spacing:-.3px;margin-top:22px}
.pb-card p{margin-top:8px;line-height:1.5;font-size:.94rem}
.pb-card__arrow{position:absolute;top:26px;right:26px;width:38px;height:38px;border-radius:999px;display:grid;place-items:center}
.pb-card__arrow .ic{width:18px;height:18px}
.pb-card--dark{background:linear-gradient(150deg,var(--ocean),var(--ocean-deep));color:#fff}
.pb-card--dark .pb-card__ic{background:rgba(255,255,255,.12)}
.pb-card--dark .pb-card__ic .ic{color:#fff}
.pb-card--dark p{color:rgba(255,255,255,.82)}
.pb-card--dark .pb-card__arrow{background:rgba(255,255,255,.14)}
.pb-card--dark .pb-card__arrow .ic{color:#fff}
.pb-card--light{background:var(--white)}
.pb-card--light .pb-card__ic{background:var(--ocean-soft)}
.pb-card--light .pb-card__ic .ic{color:var(--ocean)}
.pb-card--light p{color:var(--muted)}
.pb-card--light .pb-card__arrow{background:var(--off-white)}
.pb-card--light .pb-card__arrow .ic{color:var(--ink)}
.pb-card--warm{background:linear-gradient(150deg,#FFF7EA,var(--sunset-soft))}
.pb-card--warm .pb-card__ic{background:#fff}
.pb-card--warm .pb-card__ic .ic{color:var(--sunset-deep)}
.pb-card--warm p{color:var(--sand-ink)}
.pb-card--warm .pb-card__arrow{background:#fff}
.pb-card--warm .pb-card__arrow .ic{color:var(--sunset-deep)}
@media (max-width:720px){.proof-bento{grid-template-columns:1fr}}

/* Lanes double-audience avec vrai téléphone intégré */
.lane__device{margin:22px auto 0;width:min(200px,70%)}
.lane__device .device{--dw:100%;width:100%}

/* Comparateur : matrice alignée, colonne Yimmo mise en avant */
.cmatrix-wrap{overflow-x:auto;border-radius:var(--r-card);box-shadow:var(--sh-soft);background:var(--white);border:1px solid var(--line)}
.cmatrix{width:100%;border-collapse:collapse;min-width:720px}
.cmatrix th,.cmatrix td{padding:18px 24px;text-align:left;vertical-align:middle}
.cmatrix thead .cm-opt{font-family:var(--font-title);font-weight:600;font-size:1.04rem;color:var(--ink);line-height:1.2}
.cmatrix thead .cm-opt span{display:block;font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--muted);margin-top:5px}
.cm-crit{font-family:var(--font-title);font-weight:600;font-size:.94rem;color:var(--ink);width:24%}
.cmatrix tbody tr+tr th,.cmatrix tbody tr+tr td,.cmatrix thead th{border-bottom:1px solid var(--line)}
.cmatrix tbody tr:last-child th,.cmatrix tbody tr:last-child td{border-bottom:0}
.cm{font-size:.92rem;color:#48505c;line-height:1.4}
.cm .ic{width:18px;height:18px;flex:0 0 auto;margin-right:9px;vertical-align:-4px}
.cm.no .ic{color:var(--coral)}
.cm.meh .ic{color:var(--sand-ink)}
.cm.yes .ic{color:var(--ok)}
/* Colonne Yimmo en avant */
.cm-opt--yimmo{background:linear-gradient(180deg,#EDF3FD,var(--ocean-soft));border-radius:16px 16px 0 0}
.cm-opt--yimmo .logo-chip{margin-bottom:6px}
.cm-opt--yimmo span{color:var(--ocean)!important;font-weight:600!important}
.cm.yimmo{background:var(--ocean-soft);color:var(--ink);font-weight:600}
.cmatrix tbody tr:last-child .cm.yimmo{border-radius:0 0 16px 16px}
.cmatrix thead .cm-opt--yimmo,.cm.yimmo{box-shadow:inset 2px 0 0 rgba(13,71,161,.14),inset -2px 0 0 rgba(13,71,161,.14)}
.cmatrix thead tr th.cm-opt--yimmo{box-shadow:inset 2px 2px 0 rgba(13,71,161,.14),inset -2px 0 0 rgba(13,71,161,.14)}
@media (max-width:560px){.cmatrix th,.cmatrix td{padding:14px 16px}}

/* Confiance : grille de cartes-preuves (numérotées, icône colorée) */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.trust-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px;display:flex;gap:16px;align-items:flex-start;overflow:hidden;transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui),border-color var(--dur-ui)}
.trust-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:transparent}
.trust-card__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
.trust-card__ic .ic{width:24px;height:24px}
.trust-card__body{min-width:0}
.trust-card__body strong{display:block;font-family:var(--font-title);font-weight:600;font-size:1.02rem;letter-spacing:-.2px;color:var(--ink);line-height:1.25}
.trust-card__body p{margin-top:6px;color:var(--muted);font-size:.92rem;line-height:1.5}
.trust-card__n{position:absolute;top:16px;right:20px;font-family:var(--font-title);font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--line);font-variant-numeric:tabular-nums}
.trust-card--ocean .trust-card__ic{background:var(--ocean-soft)}.trust-card--ocean .trust-card__ic .ic{color:var(--ocean)}
.trust-card--sunset .trust-card__ic{background:var(--sunset-soft)}.trust-card--sunset .trust-card__ic .ic{color:var(--sunset-deep)}
.trust-card--ok .trust-card__ic{background:var(--ok-soft)}.trust-card--ok .trust-card__ic .ic{color:var(--ok)}
.trust-card--soon{border-style:dashed}
.trust-card--soon .trust-card__body strong::after{content:"Bientôt";display:inline-block;margin-left:8px;font-family:var(--font-body);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sand-ink);background:var(--sand-soft);padding:2px 8px;border-radius:999px;vertical-align:middle}
@media (max-width:720px){.trust-grid{grid-template-columns:1fr}}

/* Bento asymétrique (override) : carte sombre haute + média large + 2 petites */
.bento{grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:auto auto}
.bento__card--dark{grid-column:1;grid-row:1 / span 2}
.bento__card--media{grid-column:2 / span 2;grid-row:1;min-height:230px}
.bento__card--score{grid-column:2;grid-row:2}
.bento__card--chat{grid-column:3;grid-row:2}
.bento__card--chat{background:linear-gradient(165deg,#fff,var(--ocean-soft));display:flex;flex-direction:column}
.bento__card--chat h3{font-family:var(--font-title);font-weight:600;font-size:1.1rem;letter-spacing:-.3px;color:var(--ink)}
.bento__card--chat p{margin-top:6px;color:var(--muted);font-size:.88rem;line-height:1.45}
.chatmini{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:18px}
.bub{max-width:82%;padding:9px 13px;border-radius:15px;font-size:.8rem;line-height:1.35;box-shadow:var(--sh-soft)}
.bub--in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.bub--out{align-self:flex-end;background:var(--ocean);color:#fff;border-bottom-right-radius:5px}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bento__card--dark{grid-column:1 / -1;grid-row:auto}
  .bento__card--media{grid-column:1 / -1;grid-row:auto}
  .bento__card--score{grid-column:auto;grid-row:auto}
  .bento__card--chat{grid-column:auto;grid-row:auto}
}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento__card{grid-column:1 !important}}

/* =============================================================================
   v8 — Barre de statut device (safe-area), journal à la une, QR, correctifs copy
   ============================================================================= */
/* Barre de statut en haut de chaque device (raccord #F5F7FA = fond app) */
.device__bar{position:relative;height:26px;background:#F5F7FA;border-radius:28px 28px 0 0;flex:0 0 auto;z-index:1}
.device__bar::before{content:"20:47";position:absolute;left:24px;top:50%;transform:translateY(-50%);font-family:var(--font-body);font-weight:700;font-size:.6rem;letter-spacing:.02em;color:#3a424f}
.device__bar::after{content:"";position:absolute;right:22px;top:50%;transform:translateY(-50%);width:20px;height:10px;border:1.4px solid #3a424f;border-radius:2.5px;opacity:.85;box-shadow:1.6px 0 0 #3a424f;background:linear-gradient(90deg,#3a424f 62%,transparent 62%);background-clip:content-box;padding:1px}
.device{display:flex;flex-direction:column}
.device img{border-radius:0 0 28px 28px}
.hero__cluster .device__bar,.dl-panel__devices .device__bar{height:24px}

/* Journal : la carte "à la une" remplit sa hauteur (fini le vide blanc) */
.article-card--feat{display:flex;flex-direction:column}
.article-card--feat .article-card__media{aspect-ratio:auto;flex:1 1 auto;min-height:300px;display:block;position:relative;overflow:hidden}
.article-card--feat .article-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-card--feat .article-card__body{flex:0 0 auto}

/* 4e tuile bento (contact direct) : icône océan sur fond clair */
.bento__card--chat .bento__ic{width:48px;height:48px;border-radius:14px;background:var(--ocean-soft);display:grid;place-items:center;margin-bottom:16px}
.bento__card--chat .bento__ic .ic{width:24px;height:24px;color:var(--ocean)}

/* QR : tuile plus nette dans la carte */
.qr-card img{border-radius:10px;background:#fff}

/* =============================================================================
   v9 — Élévation "premium landing" (Abinar) : orbite hero, widget flottant, watermark
   ============================================================================= */
/* Hero : anneaux d'orbite derrière le cluster */
.hero__orbit{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none}
.hero__orbit span{position:absolute;border-radius:50%}
.hero__orbit .o1{width:min(440px,92%);aspect-ratio:1;border:1.6px solid rgba(255,255,255,.20)}
.hero__orbit .o2{width:min(330px,68%);aspect-ratio:1;border:1.6px dashed rgba(255,206,135,.42)}
.hero__orbit .o-dot{width:14px;height:14px;border-radius:50%;background:var(--sunset);box-shadow:0 0 0 6px rgba(255,154,0,.18);top:12%;right:14%}
.hero__cluster{z-index:1}

/* Widget flottant "match" (façon carte Statistics d'Abinar) — illustration UI */
.hero__widget{position:absolute;z-index:3;top:4%;left:-5%;background:rgba(255,255,255,.98);border-radius:16px;box-shadow:0 22px 48px rgba(6,30,71,.34);padding:13px 15px;width:186px;backdrop-filter:blur(4px)}
.hero__widget .wh{display:flex;align-items:center;justify-content:space-between;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hero__widget .wh b{color:var(--ok);font-size:.66rem}
.hero__widget .wbars{display:flex;align-items:flex-end;gap:5px;height:36px;margin-top:10px}
.hero__widget .wbars i{flex:1;background:var(--ocean-soft);border-radius:3px;height:40%}
.hero__widget .wbars i:nth-child(2){height:64%}
.hero__widget .wbars i:nth-child(3){height:100%;background:var(--ocean)}
.hero__widget .wbars i:nth-child(4){height:52%}
.hero__widget .wbars i:nth-child(5){height:82%;background:var(--ocean)}
.hero__widget .wbars i:nth-child(6){height:46%}
.hero__widget .wfoot{display:flex;align-items:center;gap:7px;margin-top:11px;font-family:var(--font-title);font-weight:600;font-size:.82rem;color:var(--ink)}
.hero__widget .wfoot .pin{width:9px;height:9px;border-radius:50%;background:var(--ocean)}
@media (max-width:900px){.hero__orbit,.hero__widget{display:none}}

/* Panneau téléchargement : watermark géant du wordmark (signature Abinar) */
.dl-panel__wm{position:absolute;left:-1%;bottom:-16%;font-family:var(--font-title);font-weight:700;font-style:italic;font-size:clamp(180px,26vw,360px);line-height:.8;letter-spacing:-8px;color:rgba(255,255,255,.09);pointer-events:none;user-select:none;z-index:0;white-space:nowrap}
.dl-panel__copy,.dl-panel__devices{position:relative;z-index:2}

/* =============================================================================
   v10 — Premium fini : arrow-circles, pastilles recherche, cartes quartiers, showcase 3 étapes
   ============================================================================= */
/* Bouton flèche-dans-un-cercle (Velocity/SkyWings) */
.arrow-circle{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:999px;background:var(--ocean);color:#fff;flex:0 0 auto;transition:transform var(--dur-ui) var(--ease),background var(--dur-ui)}
.arrow-circle .ic{width:20px;height:20px}
.arrow-circle:hover{transform:translateY(-2px);background:var(--ocean-deep)}
.arrow-circle--ghost{background:var(--white);color:var(--ink);box-shadow:var(--sh-soft)}
.arrow-circle--ghost:hover{background:var(--off-white)}

/* Pastilles "recherches populaires" */
.popsearch{background:var(--white)}
.popsearch .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}
.popsearch__lbl{font-family:var(--font-body);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.searchchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.searchchip{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--off-white);border:1px solid var(--line);font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--ink);transition:transform var(--dur-ui) var(--ease),border-color var(--dur-ui),color var(--dur-ui),background var(--dur-ui)}
.searchchip:hover{border-color:var(--ocean);color:var(--ocean);background:var(--white);transform:translateY(-2px)}
.searchchip .ic{width:15px;height:15px;color:var(--sunset-deep)}

/* Cartes-scènes quartiers (destinations SkyWings/Velocity) */
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:34px}
.qcard{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:5/6;box-shadow:var(--sh-soft);display:block;transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui)}
.qcard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.qcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qcard__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,30,71,.9) 4%,rgba(6,30,71,.15) 46%,transparent 72%)}
.qcard__label{position:absolute;top:15px;left:15px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.93);border-radius:999px;padding:7px 13px;font-family:var(--font-body);font-weight:700;font-size:.78rem;color:var(--ink);backdrop-filter:blur(3px)}
.qcard__label .pin{width:7px;height:7px;border-radius:50%;background:var(--sunset)}
.qcard__foot{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.qcard__foot h3{font-family:var(--font-title);font-weight:600;font-size:1.22rem;letter-spacing:-.3px;color:#fff;line-height:1.1}
.qcard__foot .cap{margin-top:3px;font-size:.82rem;color:rgba(255,255,255,.82)}
@media (max-width:820px){.qcards{grid-template-columns:1fr 1fr}.qcard:last-child{display:none}}
@media (max-width:520px){.qcards{grid-template-columns:1fr}.qcard{aspect-ratio:16/10}.qcard:last-child{display:block}}

/* Showcase "3 étapes" plein-cadre (pièce maîtresse Abinar) */
.showcase{position:relative;overflow:hidden;border-radius:var(--r-card);background:linear-gradient(135deg,var(--ocean) 0%,var(--ocean-deep) 52%,var(--night) 100%);color:#fff;padding:clamp(34px,4.2vw,60px);display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;min-height:540px}
.showcase__wm{position:absolute;right:-3%;top:-22%;font-family:var(--font-title);font-weight:700;font-style:italic;font-size:clamp(190px,26vw,400px);line-height:.8;letter-spacing:-8px;color:rgba(255,255,255,.06);pointer-events:none;user-select:none;z-index:0;white-space:nowrap}
.showcase__glow{position:absolute;left:8%;bottom:-30%;width:55%;height:80%;background:radial-gradient(circle,rgba(255,154,0,.16),transparent 62%);pointer-events:none;z-index:0}
.showcase__phone{position:relative;z-index:2;display:flex;justify-content:center}
.showcase__phone .device{--dw:248px;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.showcase__steps{position:relative;z-index:2;max-width:520px}
.showcase__steps h2{font-family:var(--font-title);font-weight:600;font-size:var(--fs-h2);letter-spacing:-1px;line-height:1.12;color:#fff;margin-top:12px}
.showcase__steps .lead{color:rgba(255,255,255,.82);margin-top:14px;margin-bottom:8px}
.showcase-step{display:flex;gap:18px;align-items:flex-start;padding:20px 0}
.showcase-step+.showcase-step{border-top:1px solid rgba(255,255,255,.13)}
.showcase-step__n{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:0 0 auto}
.showcase-step__n .ic{width:23px;height:23px;color:var(--sunset-onblue)}
.showcase-step__n .num{position:absolute;font-family:var(--font-title);font-weight:700}
.showcase-step__body h3{font-family:var(--font-title);font-weight:600;font-size:1.14rem;letter-spacing:-.2px;color:#fff}
.showcase-step__body p{margin-top:5px;color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.5}
.showcase-step__body p b{color:#fff}
@media (max-width:840px){.showcase{grid-template-columns:1fr;min-height:auto;gap:28px}.showcase__phone{order:2}}

/* =============================================================================
   v13 — Hero CTA (remplace la fausse recherche) + pastilles recadrées
   ============================================================================= */
.hero__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.hero__watch{display:inline-flex;align-items:center;gap:13px;color:#fff;font-family:var(--font-title);font-weight:600;font-size:1rem}
.hero__watch-ic{width:48px;height:48px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;flex:0 0 auto;transition:background var(--dur-ui)}
.hero__watch-ic .ic{width:16px;height:16px;color:#fff;margin-left:2px}
.hero__watch:hover .hero__watch-ic{background:rgba(255,255,255,.24)}
/* Pastilles flottantes : jutent hors des coins (ne couvrent plus le contenu de l'écran) */
.float-chip--score{top:4%;right:-4%}
.float-chip--dispo{top:auto;bottom:9%;left:-5%}

/* Zones couvertes : grille de pastilles (remplace les cartes-scènes répétitives) */
.zones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:880px;margin:0 auto}
.zone{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-family:var(--font-title);font-weight:600;font-size:1rem;color:var(--ink);box-shadow:var(--sh-soft);transition:transform var(--dur-ui) var(--ease),border-color var(--dur-ui),color var(--dur-ui)}
.zone:hover{transform:translateY(-2px);border-color:var(--ocean);color:var(--ocean)}
.zone .pin{width:8px;height:8px;border-radius:50%;background:var(--sunset);flex:0 0 auto}
.zone--more{background:var(--ocean-soft);border-color:transparent;color:var(--ocean)}
a.zone{text-decoration:none;cursor:pointer}

/* QR : cadre compact ajusté au contenu (fini le grand vide blanc) */
.dl-panel .qr-card{display:inline-flex;align-items:center;gap:18px;width:auto;max-width:none;padding:18px 24px 18px 18px;border-radius:18px}
.dl-panel .qr-card img{width:110px;height:110px;border-radius:12px}
.dl-panel .qr-card .qr-txt{max-width:172px}

/* Journal : cartes éditoriales avec photo de cover + chip catégorie en overlay */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jcard{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-soft);display:flex;flex-direction:column;transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui)}
.jcard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.jcard a.jcard__inner{display:flex;flex-direction:column;flex:1;color:inherit}
.jcard .article-card__media img{transition:transform .6s var(--ease)}
.jcard:hover .article-card__media img{transform:scale(1.04)}
.jcard__tag{position:absolute;top:14px;left:14px;z-index:1;display:inline-flex;align-items:center;height:var(--h-tag);padding:0 12px;border-radius:999px;color:#fff;font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 2px 12px rgba(6,30,71,.28)}
.jcard--prix .jcard__tag{background:linear-gradient(135deg,var(--ocean),var(--ocean-deep))}
.jcard--conf .jcard__tag{background:linear-gradient(135deg,var(--sunset),var(--sunset-deep))}
.jcard--quart .jcard__tag{background:linear-gradient(135deg,var(--ok),#0E5F3C)}
.jcard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.jcard__body h3{font-family:var(--font-title);font-weight:600;font-size:1.16rem;letter-spacing:-.3px;line-height:1.25;color:var(--ink)}
.jcard__body p{margin-top:10px;color:var(--muted);line-height:1.5;font-size:.94rem;flex:1}
.jcard__link{margin-top:18px;color:var(--ocean);font-family:var(--font-title);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.jcard__link .ic{width:18px;height:18px}
.jcard:hover .jcard__link .ic{transform:translateX(3px)}
@media (max-width:820px){.jgrid{grid-template-columns:1fr}}

/* Signature SmartDev — bande plate : texte à gauche, bouton aéré à droite */
.footer-sig{display:flex;align-items:center;justify-content:space-between;gap:22px 44px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding:32px 2px 6px;margin:16px 0 0}
.footer-sig__main{display:flex;gap:18px;align-items:flex-start;flex:1 1 520px;min-width:0}
.footer-sig__icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:0 0 auto}
.footer-sig__icon .ic{width:25px;height:25px;color:var(--cream)}
.footer-sig__body{flex:1 1 auto;min-width:0}
.footer-sig__title{font-family:var(--font-title);font-weight:700;font-size:1.1rem;color:#fff;letter-spacing:-.2px}
.footer-sig__title span{font-weight:600;color:rgba(255,255,255,.66)}
.footer-sig__txt{margin-top:9px;color:rgba(255,255,255,.64);font-size:.92rem;line-height:1.55;max-width:640px}
.footer-sig__legal{margin-top:12px;font-size:.8rem;color:rgba(255,255,255,.56);line-height:1.5;max-width:720px}
.footer-sig__legal b{color:rgba(255,255,255,.72);font-weight:700}
.footer-sig__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;font-family:var(--font-title);font-weight:600;font-size:.9rem;white-space:nowrap;transition:background var(--dur-ui) var(--ease),border-color var(--dur-ui)}
.footer-sig__btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.footer-sig__btn .ic{width:15px;height:15px}
@media (max-width:640px){.footer-sig{align-items:flex-start;gap:18px}.footer-sig__main{flex-basis:100%}}

/* Comparateur : aère la colonne Yimmo (moins entassé) */
.cmatrix thead th.cm-opt--yimmo{padding:24px 30px 22px}
.cmatrix td.cm.yimmo{padding:22px 30px}
.cm-opt--yimmo .logo-chip{margin-bottom:10px}

/* Comparateur : colonne Yimmo insérée avec marge (ne touche plus les bords) */
.cmatrix-wrap{padding:14px 16px}
.cmatrix thead th.cm-opt--yimmo{border-radius:16px 16px 0 0}
.cmatrix tbody tr:last-child td.cm.yimmo{border-radius:0 0 16px 16px}

/* Hero : tags de preuve flottant autour des captures (remplacent Colle/Dispo) */
.hero__tag{position:absolute;z-index:3;background:rgba(255,255,255,.97);border-radius:999px;box-shadow:0 16px 36px rgba(6,30,71,.28);padding:10px 15px;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:.82rem;color:var(--ink);white-space:nowrap;animation:floaty 8s var(--ease) infinite}
.hero__tag .ic{width:16px;height:16px;flex:0 0 auto}
.hero__tag--1{top:-1%;left:-6%}.hero__tag--1 .ic{color:var(--ocean)}
.hero__tag--2{top:7%;right:-5%;animation-delay:1s}.hero__tag--2 .ic{color:var(--sunset-deep)}
.hero__tag--3{bottom:13%;right:-7%;animation-delay:2s}.hero__tag--3 .ic{color:var(--ok)}
.hero__tag--4{bottom:1%;left:-4%;animation-delay:1.5s}.hero__tag--4 .ic{color:var(--coral)}

/* =============================================================================
   v16 — Correctifs mobile/tablette : download phone contenu, footer signature
   ============================================================================= */
/* Download : téléphone entièrement visible en mobile/tablette (fini la coupe) */
@media (max-width:860px){
  .dl-panel__devices{min-height:auto;overflow:visible;display:flex;justify-content:center;margin-top:22px}
  .dl-panel__devices .device--a{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:rotate(-3deg);--dw:214px}
  .dl-panel__devices .device--b{display:none}
}
/* Footer signature : bouton à droite + espacé en mobile */
@media (max-width:640px){
  .footer-sig{flex-direction:column;gap:18px;align-items:stretch;padding-bottom:10px}
  .footer-sig__btn{align-self:flex-end;margin-top:2px;margin-bottom:12px}
}

/* Footer signature mobile : bouton content-width, aligné à droite + espacé (correctif) */
@media (max-width:640px){
  .footer-sig{align-items:flex-start}
  .footer-sig__main{width:100%}
  .footer-sig__btn{align-self:flex-end;margin-left:auto;margin-bottom:16px;width:auto}
}

/* Footer signature mobile : bouton à droite (align-items sur le conteneur) — correctif final */
@media (max-width:640px){
  .footer-sig{flex-direction:column;align-items:flex-end;gap:18px}
  .footer-sig__main{width:100%}
  .footer-sig__btn{margin-bottom:16px;align-self:flex-end}
}

/* Halos : plein-cadre, fondu doux (fini le seam/rectangle à bord net) */
.dl-panel__glow{top:0;right:0;bottom:0;left:0;width:auto;height:auto;background:radial-gradient(52% 40% at 86% 16%,rgba(255,154,0,.15),transparent 64%)}
.showcase__glow{top:0;right:0;bottom:0;left:0;width:auto;height:auto;background:radial-gradient(50% 42% at 15% 86%,rgba(255,154,0,.13),transparent 62%)}