/* ============================================================
   WiNet — Système de design de la vitrine
   Concept de marque : « Ticket-Signal ». Ciel #0EA5E9 primaire,
   Mangue #F59E0B accent Mobile Money, Encre profonde.
   Direction : la tombée de la nuit — le moment où une zone WiFi
   s'allume. Héros encre + halo ciel + lueur mangue ; le ticket
   (pointillés, talon) comme motif ; ondes de signal en texture.
   Display Outfit / texte Inter, auto-hébergés (réseaux lents).
   Éditeur : WiNet.
   Ce fichier est partagé par TOUTES les pages du site.
   ============================================================ */

/* -- 1. Polices auto-hébergées ------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/outfit-800.woff2') format('woff2')}

/* -- 2. Jetons ----------------------------------------------- */
:root{
  --ciel:#0EA5E9;
  --ciel-profond:#0369A1;
  --ciel-clair:#E0F2FE;
  --ciel-vif:#38BDF8;
  --encre:#0A1120;
  --encre-70:#33415C;
  --encre-55:#4C5C77;
  --brume:#F4F7FB;
  --mangue:#F59E0B;
  --mangue-fonce:#B45309;
  --mangue-pale:#FFF8EB;
  --foret:#10B981;
  --foret-fonce:#047857;
  --laterite:#DC2626;
  --ligne:#E2E9F2;
  --ligne-forte:#C7D3E2;
  --blanc:#FFFFFF;

  --grad-marque:linear-gradient(135deg,var(--ciel-vif),var(--ciel-profond));
  /* La tombée de la nuit : encre profonde, halo ciel au levant,
     lueur mangue à l'horizon. Partagé par héros, pagehero et CTA. */
  --sombre:
    radial-gradient(56% 44% at 88% 112%, rgba(245,158,11,.17) 0%, rgba(245,158,11,0) 62%),
    radial-gradient(130% 140% at 10% -12%, #0E6396 0%, #0A2E52 46%, #060C1B 100%);
  --sombre-nuit:
    radial-gradient(56% 44% at 88% 112%, rgba(245,158,11,.12) 0%, rgba(245,158,11,0) 60%),
    radial-gradient(120% 135% at 85% -10%, #124E63 0%, #0A1120 55%, #04070F 100%);
  /* Ondes de signal : anneaux concentriques quasi invisibles,
     la signature « Ticket-Signal » sans une seule image. */
  --ondes:repeating-radial-gradient(circle at 8% 118%, transparent 0 52px, rgba(56,189,248,.05) 52px 54px);

  --ombre-sm:0 1px 2px rgba(10,17,32,.05),0 4px 14px rgba(10,17,32,.05);
  --ombre-md:0 14px 40px rgba(10,26,50,.11);
  --ombre-lg:0 30px 70px rgba(10,26,50,.17);
  --ombre-ciel:0 16px 38px rgba(2,132,199,.30);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;

  /* rythme vertical */
  --pad-section:clamp(64px,9vw,112px);
  --pad-section-sm:clamp(46px,6vw,76px);

  /* échelle z sémantique */
  --z-base:1; --z-flottant:10; --z-menu:100; --z-entete:200; --z-tiroir:300; --z-modale:400;

  /* courbes */
  --sortie:cubic-bezier(.16,1,.3,1);
  --doux:cubic-bezier(.2,.7,.2,1);

  --entete-h:70px;
}

/* -- 3. Base ------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete-h) + 16px)}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--encre);background:var(--brume);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Outfit','Inter',sans-serif;line-height:1.06;letter-spacing:-.028em;overflow-wrap:break-word;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--ciel-profond);text-decoration:none}
a:hover{text-decoration:none}
img,svg,video{display:block;max-width:100%}
strong,b{font-weight:700;color:var(--encre)}
::selection{background:var(--ciel);color:#fff}
:focus-visible{outline:3px solid var(--ciel);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(18px,5vw,32px)}
.wrap-etroit{max-width:820px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--encre);padding:10px 16px;border-radius:0 0 10px 0;z-index:var(--z-modale)}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{display:inline-flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ciel-profond)}
.kicker::before{content:"";width:24px;height:3px;border-radius:3px;background:var(--mangue)}
.kicker.clair{color:#7DD3FC}

/* -- 4. Boutons ---------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.005em;
  padding:14px 26px;border-radius:13px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s var(--doux),box-shadow .18s var(--doux),background .18s ease,border-color .18s ease,color .18s ease,filter .18s ease;
  white-space:nowrap;text-align:center;
}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:19px;height:19px;flex:none}
.btn-sm{padding:10px 17px;font-size:14px;border-radius:11px}
.btn-primary{background:var(--mangue);color:#231400;box-shadow:0 12px 26px rgba(245,158,11,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(245,158,11,.42),inset 0 1px 0 rgba(255,255,255,.4);filter:brightness(1.04)}
.btn-ciel{background:linear-gradient(160deg,#22B1F0,#0377BE);color:#fff;box-shadow:var(--ombre-ciel),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-ciel:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost-d{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(4px)}
.btn-ghost-d:hover{background:rgba(255,255,255,.17);border-color:#fff}
.btn-ghost{background:#fff;color:var(--ciel-profond);border-color:var(--ligne-forte)}
.btn-ghost:hover{border-color:var(--ciel);background:#F0F9FF;transform:translateY(-2px)}
.btn-encre{background:var(--encre);color:#fff}
.btn-encre:hover{transform:translateY(-2px);background:#1B2740}
.btn-groupe{display:flex;gap:14px;flex-wrap:wrap}

/* Bouton Google Play de l'en-tete. L'application EST publiee : c'est elle
   qu'on met en avant, la version navigateur devient le repli pour qui n'a
   pas Android. Le triangle « lecture » suffit a identifier le magasin sans
   embarquer le logo officiel, qui est sous licence de marque. */
.btn-play svg{width:16px;height:16px}
/* Sous 1080 px la barre du haut se serre : on garde l'icone, on lache le
   mot. Un bouton qui deborde ne met rien en avant. */
@media (max-width:1080px){ .nav-actions .btn-play{font-size:0;gap:0;padding:14px 16px} }

/* lien fléché */
.lien-fl{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--ciel-profond)}
.lien-fl svg{width:17px;height:17px;transition:transform .18s var(--doux)}
.lien-fl:hover svg{transform:translateX(4px)}

/* -- 5. En-tête & navigation --------------------------------- */
.entete{position:sticky;top:0;z-index:var(--z-entete);background:rgba(244,247,251,.85);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--ligne)}
/* Ruban de marque : le signal ciel qui vire à la mangue Mobile Money. */
.entete::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--ciel-profond),var(--ciel) 34%,#7DD3FC 58%,var(--mangue))}
.entete-nuit{background:rgba(10,17,32,.78);border-bottom-color:rgba(255,255,255,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--entete-h);gap:18px}
.brand-logo{height:30px;width:auto}
.logo-w{width:auto}
.nav-primaire{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:14px}
/* Sélecteur de langue. Deux liens en dur vers la page équivalente, aucun
   JavaScript : chaque page connaît sa jumelle, et un visiteur sans JS doit
   pouvoir changer de langue comme les autres. La langue courante porte
   aria-current, ce que les lecteurs d'écran annoncent. */
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--ligne);border-radius:10px;overflow:hidden;background:#fff}
.lang-switch a{display:block;padding:6px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--encre-55);text-decoration:none;line-height:1.2}
.lang-switch a+a{border-left:1px solid var(--ligne)}
.lang-switch a:hover{background:var(--brume);color:var(--encre)}
.lang-switch a[aria-current]{background:var(--ciel-clair);color:var(--ciel-profond)}
.lang-switch a:focus-visible{outline:2px solid var(--ciel);outline-offset:-2px}
.tiroir-cta .lang-switch{align-self:flex-start;margin-top:4px}

.nav-item{position:relative}
.nav-lien,.nav-btn{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:'Inter',sans-serif;
  font-weight:600;font-size:14.5px;color:var(--encre-70);background:none;border:0;cursor:pointer;
  padding:9px 13px;border-radius:11px;transition:color .16s ease,background .16s ease;
}
.nav-lien:hover,.nav-btn:hover{color:var(--encre);background:rgba(10,17,32,.05)}
.nav-lien[aria-current="page"]{color:var(--ciel-profond);background:var(--ciel-clair)}
.nav-btn .chev{width:14px;height:14px;transition:transform .2s var(--doux);opacity:.7}
.nav-btn[aria-expanded="true"]{color:var(--encre);background:rgba(10,17,32,.05)}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* méga-menu (bureau) */
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-8px);
  width:min(680px,calc(100vw - 40px));background:#fff;border:1px solid var(--ligne);
  border-radius:var(--r-lg);box-shadow:var(--ombre-lg);padding:14px;z-index:var(--z-menu);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .24s var(--sortie),visibility .2s;
}
.nav-item.ouvert .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega-grille{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-lien{display:flex;gap:12px;padding:12px 13px;border-radius:14px;transition:background .16s ease}
.mega-lien:hover{background:var(--brume)}
.mega-lien .ic{width:38px;height:38px;flex:none;border-radius:11px;background:linear-gradient(150deg,#EAF7FE,#D3EDFC);color:var(--ciel-profond);display:flex;align-items:center;justify-content:center}
.mega-lien .ic svg{width:20px;height:20px}
.mega-lien.mangue .ic{background:linear-gradient(150deg,#FEF6E0,#FDEAB8);color:var(--mangue-fonce)}
.mega-lien>span:last-child{min-width:0}
.mega-lien b{display:block;font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:700;color:var(--encre);letter-spacing:-.01em}
.mega-lien b+span{display:block;font-size:12.8px;color:var(--encre-55);line-height:1.45;margin-top:3px}
.mega-pied{margin-top:10px;padding:13px 14px;border-radius:14px;background:var(--brume);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mega-pied p{font-size:13px;color:var(--encre-55);margin:0}
.mega-pied b{font-family:'Outfit',sans-serif;color:var(--encre);display:block;font-size:14px}

/* bouton hamburger */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--ligne);border-radius:12px;cursor:pointer;color:var(--encre)}
.burger svg{width:22px;height:22px}

/* tiroir mobile */
.tiroir{position:fixed;inset:0;z-index:var(--z-tiroir);background:var(--brume);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .24s ease,transform .3s var(--sortie),visibility .24s}
.tiroir.ouvert{opacity:1;visibility:visible;transform:none}
.tiroir-haut{display:flex;align-items:center;justify-content:space-between;height:var(--entete-h);padding:0 clamp(18px,5vw,32px);border-bottom:1px solid var(--ligne);background:#fff;flex:none}
.tiroir-corps{flex:1;overflow-y:auto;padding:14px clamp(18px,5vw,32px) 28px;overscroll-behavior:contain}
.tiroir-grp{border-bottom:1px solid var(--ligne)}
.tiroir-grp>summary{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;font-family:'Outfit',sans-serif;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none}
.tiroir-grp>summary::-webkit-details-marker{display:none}
.tiroir-grp>summary .chev{width:18px;height:18px;color:var(--encre-55);transition:transform .2s var(--doux)}
.tiroir-grp[open]>summary .chev{transform:rotate(180deg)}
.tiroir-sous{padding:0 0 14px 2px;display:flex;flex-direction:column;gap:2px}
.tiroir-sous a{padding:11px 12px;border-radius:12px;color:var(--encre-70);font-size:15px;font-weight:500}
.tiroir-sous a:hover,.tiroir-sous a[aria-current="page"]{background:#fff;color:var(--ciel-profond)}
.tiroir-simple{display:block;padding:16px 2px;border-bottom:1px solid var(--ligne);font-family:'Outfit',sans-serif;font-weight:700;font-size:16.5px;color:var(--encre)}
.tiroir-cta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.tiroir-contact{margin-top:24px;padding-top:20px;border-top:1px solid var(--ligne);font-size:14px;color:var(--encre-55);display:flex;flex-direction:column;gap:8px}
.tiroir-contact a{color:var(--encre-70);font-weight:600}
body.fige{overflow:hidden}

@media(max-width:1000px){
  .nav-primaire,.nav-actions{display:none}
  .burger{display:inline-flex}
}
@media(min-width:1001px){.tiroir{display:none}}

/* -- 6. Fil d'Ariane ----------------------------------------- */
.ariane{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--encre-55)}
.ariane a{color:var(--encre-55);font-weight:500}
.ariane a:hover{color:var(--ciel-profond)}
.ariane .sep{opacity:.5}
.ariane [aria-current]{color:var(--encre);font-weight:600}
.ariane.clair,.ariane.clair a{color:rgba(255,255,255,.76)}
.ariane.clair a:hover{color:#fff}
.ariane.clair [aria-current]{color:#fff}

/* -- 7. Héros ------------------------------------------------ */
.hero{position:relative;background:var(--sombre);color:#fff;overflow:hidden;padding:clamp(56px,8.5vw,108px) 0 clamp(70px,9.5vw,124px)}
.hero h1,.hero h2{color:#fff}
.signal-field{position:absolute;inset:0;z-index:var(--z-base);pointer-events:none;opacity:.55}
.signal-field .arc{fill:none;stroke:#7DD3FC;stroke-linecap:round;opacity:.15}
.hero .wrap{position:relative;z-index:2}
.hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-grille>*{min-width:0}
.hero h1{font-weight:800;font-size:clamp(2.05rem,6.2vw,4.55rem);letter-spacing:-.034em}
.hero h1 .em{color:#7DD3FC;position:relative;white-space:nowrap}
.hero h1 .em::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.15em;background:var(--mangue);border-radius:4px;opacity:.95}
.hero-copy .pill{margin-bottom:24px}
.hero-sub{margin-top:22px;font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.6;color:rgba(255,255,255,.90);max-width:38ch}
.hero .btn-groupe{margin-top:34px}
.hero-trust{display:flex;gap:16px 26px;flex-wrap:wrap;margin-top:32px;padding-top:26px;border-top:1px dashed rgba(255,255,255,.22)}
.hero-trust .t{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.9);font-weight:500}
.hero-trust .t svg{width:18px;height:18px;flex:none;color:#7DD3FC}
.hero-visual{position:relative;justify-self:center}
.hero-visual .phone{transform:rotate(2deg)}
@media(max-width:900px){
  .hero-grille{grid-template-columns:1fr;text-align:center}
  .hero-sub{max-width:48ch;margin-left:auto;margin-right:auto}
  .hero .btn-groupe,.hero-trust{justify-content:center}
  .hero-visual .float-note{left:auto;right:-6px}
}
@media(max-width:480px){
  .hero-trust{flex-direction:column;align-items:center;gap:11px}
  .hero-visual .float-note{right:auto;left:50%;transform:translateX(-50%) rotate(-3deg);bottom:-14px}
}

/* Sur fond nuit, tout ce qui hérite d'une couleur d'encre disparaît :
   les liens des textes de héros passent en ciel clair (le fil d'Ariane
   garde son propre traitement), les <b>/<strong> repassent en blanc. */
.hero-sub a,.pagehero .intro a{color:#7DD3FC;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hero-sub a:hover,.pagehero .intro a:hover{color:#BAE6FD}
.hero strong,.hero b,.pagehero strong,.pagehero b{color:#fff}
/* …sauf dans les maquettes posées dans un héros, qui restent sur fond clair. */
.phone-screen strong,.phone-screen b,.portail strong,.portail b,.float-note b{color:var(--encre)}

/* héros de page intérieure */
.pagehero{position:relative;background:var(--sombre);color:#fff;overflow:hidden;padding:clamp(32px,4vw,44px) 0 clamp(52px,7vw,86px)}
.pagehero.nuit{background:var(--sombre-nuit)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{font-weight:800;font-size:clamp(1.9rem,5.6vw,3.7rem);color:#fff;letter-spacing:-.033em;margin-top:22px;max-width:20ch}
.pagehero .intro{margin-top:18px;font-size:clamp(1.02rem,1.6vw,1.21rem);line-height:1.62;color:rgba(255,255,255,.88);max-width:56ch}
.pagehero .btn-groupe{margin-top:30px}
.pagehero-meta{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:28px;padding-top:22px;border-top:1px dashed rgba(255,255,255,.22);font-size:13.5px;color:rgba(255,255,255,.88)}
.pagehero-meta .m{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.pagehero-meta svg{width:17px;height:17px;color:#7DD3FC;flex:none}

/* -- 8. Sections & titres ------------------------------------ */
section.block{padding:var(--pad-section) 0}
section.block-sm{padding:var(--pad-section-sm) 0}
.fond-blanc{background:#fff;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.fond-encre{background:var(--encre);background-image:var(--ondes);color:#C4CFDF}
.fond-encre h2,.fond-encre h3,.fond-encre h4{color:#fff}
/* Sur fond sombre, tout ce qui porte une couleur d'encre en clair doit être
   ré-éclairci ici : sinon un .head p ou un <b> hérité rend du texte sombre sur
   fond sombre, illisible mais silencieux. */
.fond-encre p,.fond-encre li,.fond-encre .head p,.fond-encre .split p{color:#C4CFDF}
.fond-encre strong,.fond-encre b{color:#fff}
.fond-encre .kicker{color:#7DD3FC}
.fond-encre a:not(.btn){color:#7DD3FC}
.fond-encre .lien-fl{color:#7DD3FC}
.head{max-width:680px;margin-bottom:clamp(36px,5vw,58px)}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-weight:800;font-size:clamp(1.6rem,4.6vw,2.9rem)}
.head .kicker+h2{margin-top:14px}
.head p{margin-top:16px;font-size:clamp(1rem,1.4vw,1.16rem);color:var(--encre-55);line-height:1.68}
.head.center .kicker{justify-content:center}
h3.sous-titre{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:800;margin-bottom:14px}

/* -- 9. Grilles de cartes ------------------------------------ */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.features>*{min-width:0}
.feat{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--ombre-sm);transition:transform .2s var(--doux),box-shadow .2s var(--doux),border-color .2s ease;overflow:hidden}
.feat:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(3,64,110,.13);border-color:#BFE3F8}
.feat .ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(150deg,#EAF7FE,#CFEBFB);border:1px solid #D8EFFC;color:var(--ciel-profond);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:transform .24s var(--sortie)}
.feat:hover .ic{transform:rotate(-5deg) scale(1.05)}
.feat .ic svg{width:26px;height:26px}
.feat.momo .ic{background:linear-gradient(150deg,#FEF6E0,#FCEBBC);border-color:#FBE4A8;color:var(--mangue-fonce)}
.feat.foret .ic{background:linear-gradient(150deg,#E4FBEF,#C8F5DC);border-color:#BDEED2;color:var(--foret-fonce)}
.feat h3{font-size:1.18rem;font-weight:700;margin-bottom:8px}
.feat p{color:var(--encre-55);font-size:15px;line-height:1.62}
.feat .lien-fl{margin-top:16px}

/* Écosystème (accueil) : quatre cartes en 2×2, pas en 3+1 orpheline. */
#ecosysteme .features{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){#ecosysteme .features{grid-template-columns:1fr}}

/* cartes de navigation (hubs de section) */
.cartes-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
/* Quatre cartes : 2×2 plutôt qu'une rangée de 3 + une orpheline. */
.cartes-nav.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.cartes-nav.duo{grid-template-columns:1fr}}
.carte-nav{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--ombre-sm);transition:transform .2s var(--doux),box-shadow .2s var(--doux),border-color .2s ease}
.carte-nav:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(3,64,110,.13);border-color:#BFE3F8}
.carte-nav .ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#EAF7FE,#CFEBFB);border:1px solid #D8EFFC;color:var(--ciel-profond);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:transform .24s var(--sortie)}
.carte-nav:hover .ic{transform:rotate(-5deg) scale(1.05)}
.carte-nav .ic svg{width:23px;height:23px}
.carte-nav h3{font-size:1.12rem;font-weight:700;color:var(--encre);margin-bottom:7px}
.carte-nav p{font-size:14.5px;color:var(--encre-55);line-height:1.58;flex:1}
.carte-nav .fl{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;color:var(--ciel-profond)}
.carte-nav .fl svg{width:16px;height:16px;transition:transform .18s var(--doux)}
.carte-nav:hover .fl svg{transform:translateX(4px)}

/* -- 10. Sections en deux colonnes --------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.split.large-gauche{grid-template-columns:1.15fr .85fr}
.split.large-droite{grid-template-columns:.85fr 1.15fr}
.split>*{min-width:0}
.split h2{font-weight:800;font-size:clamp(1.5rem,3.8vw,2.4rem);margin-bottom:16px}
.split p{color:var(--encre-55);font-size:1.02rem;line-height:1.68}
.split p+p{margin-top:14px}
@media(max-width:860px){.split,.split.large-gauche,.split.large-droite{grid-template-columns:1fr;gap:30px}.split .visuel{order:-1}}

/* liste à coches */
.coches{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:22px}
.coches li{position:relative;padding-left:34px;font-size:15.5px;color:var(--encre-70);line-height:1.58}
.coches li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;
  background:var(--ciel-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.coches.mangue li::before{background-color:#FEF3C7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.coches.clair li{color:rgba(255,255,255,.9)}
.coches.clair li::before{background-color:rgba(255,255,255,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* liste croix (ce que WiNet ne fait pas) */
.croix{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:22px}
.croix li{position:relative;padding-left:34px;font-size:15.5px;color:var(--encre-55);line-height:1.58}
.croix li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:#FEE2E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* -- 11. Parcours numéroté ----------------------------------- */
.journey{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.journey>*{min-width:0}
.journey::before{content:"";position:absolute;top:27px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--ciel) 0 10px,transparent 10px 20px);opacity:.5;z-index:0}
.step{position:relative;z-index:1;text-align:center;padding:0 8px}
.step .num{width:56px;height:56px;margin:0 auto 20px;border-radius:18px;background:var(--grad-marque);color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:var(--ombre-ciel)}
.step h3{font-size:1.12rem;font-weight:700;margin-bottom:8px}
.step p{color:var(--encre-55);font-size:14.5px;max-width:32ch;margin:0 auto}
@media(max-width:760px){.journey{grid-template-columns:1fr;gap:32px}.journey::before{display:none}}

/* étapes verticales (guides) */
.etapes{list-style:none;counter-reset:et;display:flex;flex-direction:column;gap:0}
.etapes>li{counter-increment:et;position:relative;padding:0 0 34px 62px}
.etapes>li::before{
  content:counter(et);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:13px;
  background:var(--grad-marque);color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(2,132,199,.26);
}
.etapes>li::after{content:"";position:absolute;left:19px;top:46px;bottom:8px;width:0;border-left:2px dashed var(--ligne-forte)}
.etapes>li:last-child{padding-bottom:0}
.etapes>li:last-child::after{display:none}
.etapes h3{font-size:1.12rem;font-weight:700;margin-bottom:8px;padding-top:8px}
.etapes p{color:var(--encre-55);font-size:15.5px;line-height:1.66;max-width:68ch}
.etapes p+p{margin-top:10px}
@media(max-width:520px){.etapes>li{padding-left:52px}.etapes>li::before{width:34px;height:34px;font-size:15px;border-radius:11px}.etapes>li::after{left:16px;top:40px}}

/* -- 12. Bandes accentuées ----------------------------------- */
/* La bande Mobile Money est un voucher : bordure en pointillés,
   talon des faits détaché comme la souche d'un ticket. */
.momo-band{background:linear-gradient(120deg,#FFFBEB,#FEF0C7);border:2px dashed #EFC56D;border-radius:var(--r-xl);padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,40px);align-items:center}
.momo-band>*{min-width:0}
.momo-band .kicker{color:var(--mangue-fonce)}
.momo-band .kicker::before{background:var(--mangue-fonce)}
.momo-band h2{font-weight:800;font-size:clamp(1.5rem,4.2vw,2.45rem);margin:14px 0 12px;color:#3B2200}
.momo-band p{color:#7C4A03;font-size:1.02rem;max-width:46ch;line-height:1.66}
.momo-facts{display:flex;flex-direction:column;gap:13px}
.fact{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.8);border:1px solid #F3D98B;border-radius:16px;padding:15px 18px;box-shadow:0 6px 18px rgba(180,83,9,.07)}
.fact .n{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;color:var(--mangue-fonce);flex:none;line-height:1.1}
.fact .l{font-size:13.5px;color:#7C4A03;font-weight:500;line-height:1.5}
@media(min-width:801px){.momo-facts{border-left:2px dashed #EFC56D;padding-left:clamp(22px,3vw,36px)}}
@media(max-width:800px){.momo-band{grid-template-columns:1fr;gap:24px}}

/* bande d'appel sombre */
.cta-app{position:relative;background:var(--sombre);color:#fff;border-radius:var(--r-xl);overflow:hidden;padding:clamp(38px,6vw,68px) clamp(24px,5vw,58px);text-align:center;box-shadow:var(--ombre-lg),inset 0 0 0 1px rgba(255,255,255,.07)}
.cta-app .signal-field{opacity:.45}
.cta-app-in{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cta-app .logo-w{height:34px;margin:0 auto 24px}
.cta-app h2{font-weight:800;font-size:clamp(1.55rem,4.6vw,2.7rem);color:#fff}
.cta-app p{margin:16px auto 28px;color:rgba(255,255,255,.9);font-size:1.06rem;max-width:48ch;line-height:1.65}
.cta-app .btn-groupe{justify-content:center}
.soon{margin-top:18px;font-size:13px;color:rgba(255,255,255,.72)}

/* -- 13. Chips & bandeau compat ------------------------------ */
.strip{background:#fff;border-bottom:1px solid var(--ligne)}
.strip .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding-top:22px;padding-bottom:22px}
.strip .lbl{font-size:12.5px;font-weight:600;color:var(--encre-55);letter-spacing:.04em}
.chip{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;color:var(--encre);background:var(--brume);border:1px solid var(--ligne);padding:8px 15px;border-radius:999px;transition:border-color .16s ease,box-shadow .16s ease}
.chip:hover{border-color:var(--ligne-forte);box-shadow:var(--ombre-sm)}
.chip .k{width:9px;height:9px;border-radius:3px;flex:none}
.chip .k.momo{background:var(--mangue)}
.chip .k.orange{background:#FF6A00}
.chip .k.mtk{background:var(--ciel)}
.chip .k.foret{background:var(--foret)}
.badge{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12px;letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:var(--ciel-clair);color:var(--ciel-profond)}
.badge.mangue{background:#FEF3C7;color:var(--mangue-fonce)}
.badge.foret{background:#DCFCE7;color:var(--foret-fonce)}
.badge.sombre{background:rgba(255,255,255,.14);color:#fff}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);color:#fff;font-weight:600;font-size:13px;padding:7px 15px;border-radius:999px;max-width:100%;backdrop-filter:blur(4px)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--mangue);box-shadow:0 0 0 4px rgba(245,158,11,.26);flex:none}

/* -- 14. Tableaux -------------------------------------------- */
.tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ligne);border-radius:var(--r-md);background:#fff;box-shadow:var(--ombre-sm)}
table.tbl{width:100%;border-collapse:collapse;font-size:14.8px;min-width:520px}
table.tbl th,table.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
table.tbl thead th{font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--encre-55);background:var(--brume)}
table.tbl tbody tr{transition:background .14s ease}
table.tbl tbody tr:hover{background:#F7FBFE}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td strong{font-weight:600}
table.tbl .num{font-family:'Outfit',sans-serif;font-weight:700;white-space:nowrap}

/* -- 15. Tarifs ---------------------------------------------- */
.prix-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;align-items:stretch}
.prix{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:30px 26px;position:relative;box-shadow:var(--ombre-sm)}
.prix.vedette{border-color:var(--ciel);box-shadow:0 20px 50px rgba(2,132,199,.16)}
.prix .etiquette{position:absolute;top:-12px;left:26px;background:var(--ciel);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.prix h3{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.prix .desc{font-size:14px;color:var(--encre-55);min-height:42px}
.prix .montant{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(2rem,5vw,2.7rem);letter-spacing:-.03em;margin:18px 0 4px;line-height:1}
.prix .montant small{font-size:.42em;font-weight:700;color:var(--encre-55);letter-spacing:0}
.prix .sous{font-size:13.5px;color:var(--encre-55);margin-bottom:20px}
.prix .coches{margin-top:0;flex:1}
.prix .coches li{font-size:14.5px}
.prix .btn{margin-top:24px;width:100%}

/* -- 16. FAQ ------------------------------------------------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:2px 22px;box-shadow:var(--ombre-sm);transition:border-color .16s ease,box-shadow .16s ease}
.faq details[open]{border-color:#7DD3FC;box-shadow:0 14px 34px rgba(3,64,110,.10)}
.faq summary{padding:18px 0;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.05rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:26px;height:26px;border-radius:8px;background:var(--ciel-clair);color:var(--ciel-profond);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .22s var(--doux),background .2s ease}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--ciel);color:#fff}
.faq details>*:not(summary){padding-bottom:20px}
.faq p{color:var(--encre-55);font-size:15px;line-height:1.68;max-width:68ch}
.faq p+p{padding-bottom:0;margin-bottom:14px}

/* -- 17. Encarts & citations --------------------------------- */
.encart{border:1px solid var(--ligne);background:#fff;border-radius:var(--r-md);padding:22px 24px;display:flex;gap:16px;box-shadow:var(--ombre-sm)}
.encart .ic{width:38px;height:38px;flex:none;border-radius:12px;background:linear-gradient(150deg,#EAF7FE,#D3EDFC);color:var(--ciel-profond);display:flex;align-items:center;justify-content:center}
.encart .ic svg{width:20px;height:20px}
.encart h4{font-size:1rem;font-weight:700;margin-bottom:6px}
.encart p{font-size:14.6px;color:var(--encre-55);line-height:1.62}
.encart.attention{background:var(--mangue-pale);border-color:#F3DFA8}
.encart.attention .ic{background:linear-gradient(150deg,#FEF6E0,#FCEBBC);color:var(--mangue-fonce)}
.encart.attention h4{color:#3B2200}
.encart.attention p{color:#7C4A03}
.encart.succes{background:#F1FDF6;border-color:#BCEECF}
.encart.succes .ic{background:linear-gradient(150deg,#E4FBEF,#C8F5DC);color:var(--foret-fonce)}

.citation{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:clamp(26px,4vw,38px);box-shadow:var(--ombre-sm)}
.citation blockquote{font-family:'Outfit',sans-serif;font-size:clamp(1.1rem,2.4vw,1.42rem);font-weight:600;line-height:1.45;letter-spacing:-.015em;color:var(--encre)}
.citation blockquote::before{content:"«\00a0"}
.citation blockquote::after{content:"\00a0»"}
.citation figcaption{margin-top:18px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--encre-55)}
.citation .av{width:42px;height:42px;border-radius:50%;background:var(--grad-marque);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;flex:none}
.citation figcaption b{display:block;color:var(--encre);font-size:14.5px}

/* -- 18. Prose (guides, pages légales) ----------------------- */
.prose{max-width:72ch;font-size:16.2px;line-height:1.75;color:var(--encre-70)}
.prose>*+*{margin-top:18px}
.prose h2{font-size:clamp(1.35rem,3vw,1.85rem);font-weight:800;margin-top:46px;color:var(--encre);scroll-margin-top:calc(var(--entete-h) + 20px)}
.prose h3{font-size:clamp(1.1rem,2.2vw,1.3rem);font-weight:700;margin-top:32px;color:var(--encre);scroll-margin-top:calc(var(--entete-h) + 20px)}
.prose h2+p,.prose h3+p{margin-top:12px}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose li{padding-left:4px}
.prose li::marker{color:var(--ciel)}
.prose a{color:var(--ciel-profond);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--ciel)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--ciel-clair);color:var(--ciel-profond);padding:2px 6px;border-radius:6px}
.prose hr{border:0;border-top:1px dashed var(--ligne-forte);margin:38px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:11px 14px;border:1px solid var(--ligne);text-align:left}
.prose th{background:var(--brume);font-weight:700;color:var(--encre)}
.prose .maj{font-size:14px;color:var(--encre-55)}

/* mise en page doc : sommaire + contenu */
.doc{display:grid;grid-template-columns:236px 1fr;gap:clamp(30px,5vw,60px);align-items:start}
.doc>*{min-width:0}
.toc{position:sticky;top:calc(var(--entete-h) + 24px)}
.toc h4{font-family:'Outfit',sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--encre-55);margin-bottom:14px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--ligne);padding-left:0}
.toc a{display:block;padding:7px 14px;font-size:14px;color:var(--encre-55);line-height:1.4;margin-left:-1px;border-left:2px solid transparent}
.toc a:hover{color:var(--encre)}
.toc a.actif{color:var(--ciel-profond);font-weight:600;border-left-color:var(--ciel)}
@media(max-width:900px){
  .doc{grid-template-columns:1fr}
  .toc{position:static;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-md);padding:18px 20px}
  .toc ol{border-left:0;flex-direction:row;flex-wrap:wrap;gap:6px 10px}
  .toc a{padding:6px 12px;border:1px solid var(--ligne);border-radius:999px;margin-left:0}
  .toc a.actif{border-color:var(--ciel);background:var(--ciel-clair)}
}

/* -- 19. Contact --------------------------------------------- */
.contact-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.contact-carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--ombre-sm)}
.contact-carte .ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#EAF7FE,#CFEBFB);border:1px solid #D8EFFC;color:var(--ciel-profond);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.contact-carte .ic svg{width:23px;height:23px}
.contact-carte.momo .ic{background:linear-gradient(150deg,#FEF6E0,#FCEBBC);border-color:#FBE4A8;color:var(--mangue-fonce)}
.contact-carte.foret .ic{background:linear-gradient(150deg,#E4FBEF,#C8F5DC);border-color:#BDEED2;color:var(--foret-fonce)}
.contact-carte h3{font-size:1.08rem;font-weight:700;margin-bottom:7px}
.contact-carte p{font-size:14.5px;color:var(--encre-55);line-height:1.62;margin-bottom:14px}
.contact-carte .val{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.02rem;color:var(--ciel-profond);word-break:break-word}
.contact-carte .val+.val{margin-top:6px}

/* -- 20. Suite d'écrans / maquette téléphone ----------------- */
.phone{position:relative;width:min(300px,78vw);aspect-ratio:300/610;background:#0A1120;border-radius:44px;padding:12px;box-shadow:0 46px 90px rgba(3,20,42,.55),0 0 0 2px rgba(255,255,255,.07) inset}
/* Les maquettes fixent leur propre couleur de texte : posées dans un héros
   sombre, elles hériteraient sinon du blanc et deviendraient illisibles. */
.phone-screen{position:relative;height:100%;width:100%;background:var(--brume);color:var(--encre);border-radius:34px;overflow:hidden;display:flex;flex-direction:column}
.ph-top{background:var(--grad-marque);color:#fff;padding:20px 18px 22px}
.ph-hi{font-size:12.5px;opacity:.9;font-weight:500}
.ph-solde-l{font-size:12px;opacity:.85;margin-top:14px;display:flex;align-items:center;gap:6px}
.ph-solde{font-family:'Outfit',sans-serif;font-weight:800;font-size:31px;letter-spacing:-.02em;margin-top:2px}
.ph-solde small{font-size:15px;font-weight:600;opacity:.85}
.ph-withdraw{margin-top:14px;background:#fff;color:var(--ciel-profond);font-weight:700;font-size:13px;text-align:center;padding:11px;border-radius:12px}
.ph-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.ph-card{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:13px 14px;box-shadow:var(--ombre-sm)}
.ph-zrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-zname{font-weight:700;font-size:13.5px;font-family:'Outfit',sans-serif}
.ph-online{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--foret-fonce);background:#DCFCE7;padding:3px 9px;border-radius:999px;white-space:nowrap}
.ph-online .d{width:6px;height:6px;border-radius:50%;background:var(--foret)}
.ph-meta{font-size:11.5px;color:var(--encre-55);margin-top:6px}
.ph-bars{display:flex;align-items:flex-end;gap:6px;height:44px;margin-top:12px}
.ph-bars span{flex:1;background:var(--ciel-clair);border-radius:4px 4px 0 0}
.ph-bars span.hot{background:var(--ciel)}
.ph-sale{display:flex;align-items:center;gap:10px}
.ph-sale .ic{width:34px;height:34px;border-radius:10px;background:#FEF3C7;color:var(--mangue-fonce);display:flex;align-items:center;justify-content:center;flex:none}
.ph-sale .ic svg{width:18px;height:18px}
.ph-sale .tt{font-weight:700;font-size:12.5px}
.ph-sale .ss{font-size:11px;color:var(--encre-55)}
.ph-sale .amt{margin-left:auto;font-weight:800;font-family:'Outfit',sans-serif;font-size:13px;color:var(--foret-fonce)}
.float-note{position:absolute;left:-26px;bottom:64px;background:#fff;color:var(--encre);border-radius:14px;padding:11px 14px;box-shadow:var(--ombre-md);display:flex;align-items:center;gap:10px;transform:rotate(-3deg)}
.float-note .ic{width:30px;height:30px;border-radius:9px;background:var(--foret);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.float-note .ic svg{width:16px;height:16px}
.float-note b{font-family:'Outfit',sans-serif;font-size:12.5px}
.float-note span{display:block;font-size:10.5px;color:var(--encre-55)}

/* maquette « portail captif » */
.portail{width:min(420px,100%);background:#fff;color:var(--encre);border:1px solid var(--ligne);border-radius:var(--r-lg);box-shadow:var(--ombre-md);overflow:hidden}
.portail-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--brume);border-bottom:1px solid var(--ligne)}
.portail-bar .pt{width:9px;height:9px;border-radius:50%;background:var(--ligne-forte)}
.portail-bar .url{margin-left:8px;font-size:11.5px;color:var(--encre-55);background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:4px 12px}
.portail-in{padding:24px 22px 26px}
.portail-in h4{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:800;margin-bottom:4px}
.portail-in .sub{font-size:12.8px;color:var(--encre-55);margin-bottom:18px}
.forfait{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ligne);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.forfait.actif{border-color:var(--ciel);background:#F0F9FF}
.forfait .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--ligne-forte);flex:none}
.forfait.actif .rd{border-color:var(--ciel);box-shadow:inset 0 0 0 4px #fff;background:var(--ciel)}
.forfait .nm{font-weight:700;font-size:14px;font-family:'Outfit',sans-serif}
.forfait .dt{font-size:11.5px;color:var(--encre-55)}
.forfait .pr{margin-left:auto;font-family:'Outfit',sans-serif;font-weight:800;font-size:15px;white-space:nowrap}
.portail-btn{margin-top:14px;background:var(--mangue);color:#231400;font-weight:700;font-size:14px;text-align:center;padding:13px;border-radius:13px}

/* -- 21. Pied de page ---------------------------------------- */
.pied{background:#070D1B;background-image:var(--ondes);color:#C4CFDF;padding:clamp(46px,7vw,72px) 0 32px}
.pied a{color:#8FA3BD}
.pied a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:32px 28px;padding-bottom:34px;border-bottom:1px dashed rgba(255,255,255,.14)}
.foot-top>*{min-width:0}
.foot-brand .logo-w{height:30px;margin-bottom:16px}
.foot-brand p{font-size:14px;color:#8FA3BD;max-width:36ch;line-height:1.6}
.foot-mere{margin-top:18px;font-size:13.5px;color:#8FA3BD;line-height:1.6}
.foot-mere b{color:#DCE5F0;font-family:'Outfit',sans-serif;font-weight:700}
.foot-contact{margin-top:16px;display:flex;flex-direction:column;gap:7px;font-size:14px}
.foot-contact a{display:inline-flex;align-items:center;gap:9px;color:#C4CFDF;font-weight:500}
/* L'email n'est plus un lien : il reste écrit, au même rang visuel. */
.foot-contact span{display:inline-flex;align-items:center;gap:9px;color:#8FA3BD;font-weight:500}
.foot-contact svg{width:16px;height:16px;color:var(--ciel-vif);flex:none}
.foot-col h4{font-family:'Outfit',sans-serif;color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.foot-col a{display:block;font-size:14.5px;padding:5px 0}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:13px;color:#64748B}
.foot-bottom .made{display:inline-flex;align-items:center;gap:8px}
.foot-bottom .made .globe{width:16px;height:16px;display:inline-flex;color:var(--ciel-vif);flex:none}
.foot-bottom .made .globe svg{width:100%;height:100%}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:1080px){.foot-top{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media(max-width:720px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.foot-top{grid-template-columns:1fr}.foot-bottom{justify-content:center;text-align:center}}

/* -- 22. Motion ---------------------------------------------- */
/* Les révélations partent du contenu VISIBLE : si JS ou l'animation
   ne tourne pas, la page reste lisible. */
.reveal{opacity:0;transform:translateY(16px);animation:rise .72s var(--sortie) forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.28s}.d5{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
.pulse .arc{animation:sig 3.8s ease-out infinite}
.pulse .arc:nth-child(2){animation-delay:.55s}
.pulse .arc:nth-child(3){animation-delay:1.1s}
.pulse .arc:nth-child(4){animation-delay:1.65s}
@keyframes sig{0%{opacity:0}20%{opacity:.26}100%{opacity:0}}

/* -- 23. Adaptations d'écran --------------------------------- */
@media(max-width:640px){
  :root{--entete-h:62px}
  .brand-logo{height:26px}
  .btn{padding:13px 20px}
  .btn-groupe .btn{width:100%}
  .strip .wrap{gap:10px 14px}
  .chip{font-size:12.5px;padding:7px 13px}
  .feat{padding:24px 22px}
  .encart{flex-direction:column;gap:12px}
}
@media(max-width:380px){
  .wrap{padding:0 15px}
  .phone{width:min(252px,84vw)}
  .prose{font-size:15.6px}
}
/* très grands écrans : la colonne respire sans s'étirer */
@media(min-width:1500px){
  .wrap{max-width:1240px}
  :root{--pad-section:clamp(80px,7vw,128px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* -- 24. Applications : cartes de téléchargement -------------
   Trois états assumés côté rédaction : disponible / bientôt /
   en préparation. L'état est porté par un .badge, jamais par un
   faux logo de store. */
.dl-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:18px;align-items:stretch}
.dl-grille>*{min-width:0}
.dl{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--ombre-sm);transition:transform .2s var(--doux),box-shadow .2s var(--doux),border-color .2s ease}
.dl:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(3,64,110,.13);border-color:#BFE3F8}
.dl .ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#EAF7FE,#CFEBFB);border:1px solid #D8EFFC;color:var(--ciel-profond);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dl .ic svg{width:24px;height:24px}
.dl-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dl h3{font-size:1.12rem;font-weight:700}
.dl p{font-size:14.5px;color:var(--encre-55);line-height:1.62}
.dl p+p{margin-top:10px}
.dl .corps{flex:1}
.dl .btn{margin-top:20px;width:100%}
.dl .note{margin-top:12px;font-size:12.8px;color:var(--encre-55);line-height:1.55}
/* à venir : la carte se retire visuellement d'un cran, sans disparaître */
.dl.attente{background:var(--brume);box-shadow:none}
.dl.attente .ic{background:#E4EAF2;border-color:#D8E0EB;color:var(--encre-55)}
.dl.prete{border-color:#9EE6BC}
.dl.prete .ic{background:linear-gradient(150deg,#E4FBEF,#C8F5DC);border-color:#BDEED2;color:var(--foret-fonce)}
@media(max-width:640px){.dl{padding:22px 20px}}

/* -- 25. Vidéo & écrans réels --------------------------------
   Le spot est auto-hébergé (préchargement nul, affiche légère) :
   rien ne se télécharge tant qu'on n'appuie pas sur lecture. */
.video-cadre{max-width:860px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ombre-lg);border:1px solid rgba(255,255,255,.08);background:#04070F}
.video-cadre video{width:100%;height:auto;display:block}
.ecrans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:20px;justify-items:center}
.ecrans figure{margin:0;max-width:270px;min-width:0}
.ecrans img{border-radius:24px;border:1px solid var(--ligne);box-shadow:var(--ombre-md);width:100%;height:auto;background:#fff}
.ecrans figcaption{margin-top:10px;text-align:center;font-size:13.5px;color:var(--encre-55);line-height:1.5}

/* -- 26. Impression (pages légales) -------------------------- */
@media print{
  .entete,.tiroir,.pied,.cta-app,.burger,.toc{display:none!important}
  body{background:#fff;color:#000}
  .pagehero{background:#fff!important;color:#000;padding:0 0 20px}
  .pagehero h1,.pagehero .intro{color:#000}
  .prose{max-width:none;font-size:11pt}
  a{color:#000;text-decoration:underline}
}


/* ============================================================
   MOUVEMENT AU DÉFILEMENT — en CSS pur, sans une ligne de JavaScript.
   `animation-timeline: view()` lie l'animation à l'entrée de l'élément
   dans la fenêtre : le navigateur s'en charge sur le fil d'affichage,
   donc ça ne saccade pas sur un téléphone d'entrée de gamme, et rien
   n'est téléchargé pour l'obtenir.
   Les navigateurs qui ne connaissent pas la propriété ignorent tout le
   bloc : le contenu reste simplement visible et fixe. C'est la bonne
   dégradation — jamais l'inverse, un site dont le texte reste invisible
   faute de JavaScript est un site cassé.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feat,
    .carte-nav,
    .prix,
    .dl,
    .encart,
    .citation,
    .etapes > li,
    .momo-band,
    .cta-app,
    .tableau-scroll {
      animation: monte-vue linear both;
      animation-timeline: view();
      /* L'animation se joue pendant que l'élément traverse le bas de
         l'écran, et se termine avant qu'il n'atteigne le centre : on lit
         un élément déjà stable, jamais un élément qui bouge encore. */
      animation-range: entry 0% cover 22%;
    }
    @keyframes monte-vue {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* PROFONDEUR AU SURVOL sur les visuels de preuve : la maquette du portail
   et l'affiche du spot réagissent comme les cartes, sinon elles passent
   pour des images décoratives et non pour le produit. */
.portail,
.video-cadre {
  transition: transform .25s var(--doux), box-shadow .25s var(--doux);
}
.portail:hover,
.video-cadre:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg);
}