/* ==========================================================================
   FChat Business — feuille de style du site (facileapp.org/fchat)
   FacileApp, département logiciels du Groupe ELAKO SARL.

   Même grammaire visuelle que facileapp.org/sfav — mêmes polices (Sora pour
   les titres, Inter pour le texte), même barre de navigation, même tiroir
   mobile — mais l'identité de FChat : le rouge #E4322B du logo remplace le
   bleu, et le vert WhatsApp signale ce qui touche au canal WhatsApp.

   SOMBRE PAR DÉFAUT. Les jetons de `:root` sont ceux du mode sombre ;
   `[data-theme="light"]` les remplace. C'est l'inverse de l'usage courant, et
   c'est voulu : l'application elle-même s'ouvre en sombre, le site doit lui
   ressembler dès la première seconde.
   ========================================================================== */

:root{
  --brand:#E4322B;
  --brand-600:#C42822;
  --brand-300:#ff6b62;
  --wa:#25D366;
  --gold:#F59E0B;

  --ink:#e9edf5;
  --muted:#98a2b8;
  --line:#26304a;
  --bg:#0a0e19;
  --bg-soft:#0e131f;
  --bg-soft2:#131a2b;
  --card:#131926;
  --card-2:#1a2233;
  --heading:#f3f6fb;

  --radius:18px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,.6);
  --grad:linear-gradient(120deg,#7f1d1a 0%,#c42822 45%,#E4322B 100%);
  --page-pad:clamp(18px,4.5vw,80px);
}

[data-theme="light"]{
  --ink:#141a26;
  --muted:#5b6478;
  --line:#e7eaf2;
  --bg:#ffffff;
  --bg-soft:#f7f8fc;
  --bg-soft2:#eef1f8;
  --card:#ffffff;
  --card-2:#ffffff;
  --heading:#141a26;
  --shadow:0 18px 40px -18px rgba(15,20,35,.22);
  --shadow-sm:0 8px 24px -12px rgba(15,20,35,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Sora',system-ui,sans-serif;color:var(--heading);line-height:1.22;margin:0 0 .5em}
p{margin:0 0 1em}
.container{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--page-pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------------------------------------------------------------- en-tête */
header{position:fixed;inset:0 0 auto 0;z-index:60;transition:.3s;padding:14px 0}
header.scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 8px 30px -18px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:800;font-size:1.22rem;letter-spacing:-.02em;color:#fff}
.brand img{width:34px;height:34px;border-radius:9px}
.brand .b2{color:var(--brand-300);font-weight:600;font-size:.78em;letter-spacing:.02em}
header.scrolled .brand{color:var(--heading)}
.nav-links{display:flex;gap:22px;margin-left:auto;font-weight:500;font-size:.95rem}
.nav-links a{color:#fff;opacity:.92;transition:.2s;white-space:nowrap}
.nav-links a:hover{opacity:1;color:var(--brand-300)}
header.scrolled .nav-links a{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.theme-toggle{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1.05rem;display:grid;place-items:center;transition:.2s}
.theme-toggle:hover{background:rgba(255,255,255,.2)}
header.scrolled .theme-toggle{color:var(--heading);border-color:var(--line);background:var(--bg-soft)}
.burger{display:none;font-size:1.8rem;color:#fff;background:none;border:none;cursor:pointer;line-height:1;padding:4px 6px}
header.scrolled .burger{color:var(--heading)}

/* ---------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:13px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 12px 26px -14px rgba(228,50,43,.9)}
.btn-brand:hover{background:var(--brand-600)}
.btn-wa{background:var(--wa);color:#06281a;box-shadow:0 12px 26px -14px rgba(37,211,102,.8)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
header.scrolled .btn-ghost{color:var(--heading);border-color:var(--line);background:var(--bg-soft)}
.btn-outline{background:transparent;color:var(--heading);border-color:var(--line)}
.btn-outline:hover{background:var(--bg-soft2)}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-block{width:100%}

/* ------------------------------------------------------------------- héros */
.hero{position:relative;padding:150px 0 92px;background:var(--grad);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -55% -10%;height:70%;background:radial-gradient(60% 100% at 50% 0,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:7px 15px;border-radius:999px;font-size:.82rem;font-weight:600;margin-bottom:20px}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:#ffd7d4}
.hero p.lead{font-size:clamp(1rem,1.6vw,1.16rem);opacity:.95;max-width:37em;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:34px}
.hero-note{font-size:.86rem;opacity:.85}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;position:relative;z-index:2}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:15px;padding:16px 14px;text-align:center;backdrop-filter:blur(6px)}
.stat b{display:block;font-family:'Sora';font-size:1.5rem;font-weight:800;line-height:1.1}
.stat span{font-size:.79rem;opacity:.9}
.hero-mock{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:22px;padding:22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.hero-mock h4{color:#fff;font-size:.95rem;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.mockline{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.1);margin-bottom:9px;font-size:.87rem}
.mockline i{font-size:1.05rem;flex:0 0 auto}
.mockline b{font-weight:600}
.mockline .r{margin-left:auto;font-size:.78rem;opacity:.85}

/* ---------------------------------------------------------------- sections */
section{padding:86px 0}
.sec-soft{background:var(--bg-soft)}
.sec-head{max-width:760px;margin:0 auto 50px;text-align:center}
.sec-head .kicker{color:var(--brand);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;display:block}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.sec-head p{color:var(--muted);font-size:1.03rem;margin:0}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 42%,var(--line))}
.card .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;margin-bottom:15px;background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand)}
.card .ico.wa{background:color-mix(in srgb,var(--wa) 16%,transparent);color:var(--wa)}
.card .ico.gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.93rem;margin:0}

/* liste exhaustive des fonctionnalités */
.feat-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 20px;box-shadow:var(--shadow-sm)}
.feat-block h3{display:flex;align-items:center;gap:11px;font-size:1.05rem;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.feat-block h3 i{color:var(--brand);font-size:1.2rem}
.feat-block ul{list-style:none;margin:0;padding:0;columns:1}
.feat-block li{position:relative;padding-left:24px;margin-bottom:9px;font-size:.9rem;color:var(--ink)}
.feat-block li::before{content:"\F26E";font-family:"bootstrap-icons";position:absolute;left:0;top:1px;color:var(--brand);font-size:.82rem}
.feat-block li b{font-weight:600}

/* Cartes de plateforme. Colonne flex avec l'action collée en bas : les quatre
   boutons s'alignent sur une même ligne quel que soit le texte au-dessus.
   Sans cela, Windows et Android portaient un bouton pendant que macOS et iOS
   n'avaient qu'une pastille — quatre cartes de quatre hauteurs, et un rang
   qui donnait l'impression d'un gabarit raté. */
.plat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .22s;display:flex;flex-direction:column}
.plat-card:hover{transform:translateY(-5px)}
.plat-card i.plat-ico{font-size:2.2rem;color:var(--brand);display:block;margin-bottom:12px}
.plat-card h4{font-size:1rem;margin-bottom:5px}
.plat-card p{color:var(--muted);font-size:.85rem;margin:0 0 14px}
.plat-card .plat-act{margin-top:auto}
.plat-card .badge-soon{margin-bottom:10px}

.badge-soon{display:inline-block;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);border-radius:999px;padding:3px 11px;font-size:.74rem;font-weight:700}

/* Bouton d'une plateforme pas encore livrée. Il a la MÊME forme que les
   autres — c'est ce qui rend le rang cohérent — mais son apparence dit
   qu'il n'emmène nulle part, et il l'explique quand on y touche. */
.btn-soon{background:var(--bg-soft2);color:var(--muted);border-color:var(--line);cursor:default;box-shadow:none}
.btn-soon:hover{transform:none;background:var(--bg-soft2)}

/* Cartes de la page de téléchargement : même principe que les cartes de
   plateforme — le bouton et sa note sont collés en bas, donc les quatre
   boutons tombent sur la même ligne quelle que soit la longueur du texte. */
.dl-card{display:flex;flex-direction:column}
.dl-card h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dl-card p{margin-bottom:18px}
.dl-card .dl-act{margin-top:auto}
.dl-card .dl-note{margin:12px 0 0;font-size:.84rem;text-align:center;color:var(--muted)}

/* Message court, en bas d'écran, quand un bouton n'a rien à donner. */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:120;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:14px;padding:14px 18px;
  box-shadow:var(--shadow);font-size:.92rem;max-width:min(92vw,460px);
  display:flex;align-items:flex-start;gap:11px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{color:var(--gold);font-size:1.1rem;flex:0 0 auto;margin-top:2px}

/* tarifs */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.price{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 26px;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;height:100%}
.price.hot{border-color:var(--brand);box-shadow:0 26px 60px -30px rgba(228,50,43,.6)}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:.74rem;font-weight:700;padding:5px 15px;border-radius:999px;white-space:nowrap}
.price h3{font-size:1.12rem;margin-bottom:4px}
.price .sub{color:var(--muted);font-size:.87rem;margin-bottom:18px}
.price .amount{font-family:'Sora';font-size:2.5rem;font-weight:800;line-height:1;color:var(--heading)}
.price .amount small{font-size:.9rem;font-weight:500;color:var(--muted)}
.price .per{color:var(--muted);font-size:.84rem;margin:6px 0 20px}
.price ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.price li{position:relative;padding-left:25px;margin-bottom:10px;font-size:.9rem}
.price li::before{content:"\F26E";font-family:"bootstrap-icons";position:absolute;left:0;top:1px;color:var(--wa);font-size:.84rem}
.price li.off{color:var(--muted)}
.price li.off::before{content:"\F62A";color:var(--muted)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
table.cmp th,table.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
table.cmp th{font-family:'Sora';font-weight:700;color:var(--heading);background:var(--bg-soft2)}
table.cmp td.c{text-align:center}
table.cmp tr:last-child td{border-bottom:none}
.yes{color:var(--wa)}.no{color:var(--muted)}

/* étapes */
.steps{counter-reset:s;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:26px;width:36px;height:36px;border-radius:11px;background:var(--brand);color:#fff;font-family:'Sora';font-weight:800;display:grid;place-items:center;box-shadow:0 10px 22px -12px rgba(228,50,43,.9)}
.step h4{margin:14px 0 7px;font-size:1.02rem}
.step p{color:var(--muted);font-size:.9rem;margin:0}

/* bandeau final */
.cta-band{background:var(--grad);color:#fff;border-radius:26px;padding:52px 40px;text-align:center;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:12px}
.cta-band p{opacity:.94;max-width:46em;margin:0 auto 26px}
.cta-band .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;box-shadow:var(--shadow-sm)}
.contact-card i{font-size:1.7rem;color:var(--brand);margin-bottom:12px;display:block}
.contact-card h4{font-size:1rem;margin-bottom:6px}
.contact-card p,.contact-card a{color:var(--muted);font-size:.92rem;margin:0}
.contact-card a:hover{color:var(--brand)}

/* pied de page */
footer.site{background:#080b14;color:#c7cede;padding:64px 0 28px;margin-top:0}
[data-theme="light"] footer.site{background:#0d1220}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:38px}
footer.site h5{color:#fff;font-size:.98rem;margin-bottom:15px}
footer.site a{color:#c7cede;font-size:.9rem;display:block;margin-bottom:9px;transition:color .2s}
footer.site a:hover{color:var(--brand-300)}
footer.site p{font-size:.9rem;color:#98a2b8}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:14px}
.foot-brand img{width:36px;height:36px;border-radius:10px}
/* Réseaux sociaux du pied de page.
   Le sélecteur est volontairement PLUS SPÉCIFIQUE que `footer.site a` :
   celui-ci impose `display:block` et une marge basse à tous les liens du pied,
   et l'emportait ici — les icônes n'étaient donc pas centrées dans leur carré
   et traînaient un décalage sous chacune. Un bouton rond dont l'icône n'est
   pas au centre se voit immédiatement, même sans savoir pourquoi. */
.socials{display:flex;gap:11px;margin-top:16px}
footer.site .socials a{
  width:40px;height:40px;flex:0 0 40px;margin:0;padding:0;
  border-radius:12px;background:rgba(255,255,255,.09);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.06rem;line-height:1;transition:background .2s,color .2s,transform .2s;
}
footer.site .socials a i{display:block;line-height:1}
footer.site .socials a:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;text-align:center;font-size:.85rem;color:#98a2b8}

/* bouton flottant WhatsApp */
.fab{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;font-size:1.6rem;z-index:70;box-shadow:0 14px 30px -12px rgba(37,211,102,.9);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* apparition au défilement */
.reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .fab{animation:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------- tiroir mobile (type SFAV) */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s;z-index:90}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer-x{position:fixed;top:10px;right:calc(min(85vw,365px) + 8px);background:none;border:none;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;padding:4px;z-index:96}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(85vw,365px);background:var(--card);z-index:95;transform:translateX(100%);transition:transform .3s ease;box-shadow:-6px 0 30px rgba(0,0,0,.45);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-top{background:var(--brand);color:#fff;display:flex;align-items:center;gap:12px;padding:18px 20px;font-family:'Sora';font-weight:700;font-size:1.06rem;flex:0 0 auto}
.drawer-top i{font-size:1.6rem}
.drawer-scroll{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.drawer-section{padding:6px 0;border-bottom:7px solid var(--bg-soft2)}
.drawer-section:last-child{border-bottom:none}
.drawer-section h5{font-family:'Sora';font-size:1.02rem;color:var(--brand);font-weight:700;padding:14px 20px 6px;margin:0}
.drawer-links{display:flex;flex-direction:column}
.drawer-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;color:var(--ink);font-size:.96rem;font-weight:500;transition:background .15s}
.drawer-links a:hover{background:var(--bg-soft2)}
.drawer-links a i{color:var(--muted);font-size:.92rem}
.drawer-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 20px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:.96rem;font-weight:600;color:var(--ink)}
.drawer-theme .lbl{display:flex;align-items:center;gap:12px}
.drawer-theme .lbl i{color:var(--brand);font-size:1.05rem}
.drawer-theme .sw{font-size:1.7rem;line-height:1;color:var(--brand)}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-mock{max-width:520px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:900px){
  .nav-links,.desktop-only{display:none}
  .burger{display:block}
  /* Sur mobile, c'est `.nav-links` qui portait le `margin-left:auto` poussant
     tout à droite — et il est masqué. La bascule de thème et le menu se
     retrouvaient donc collés au logo, à GAUCHE. On rend la poussée au groupe
     qui reste visible. */
  .nav{gap:12px}
  .nav-cta{margin-left:auto}
  .g3,.price-grid,.steps,.contact-grid{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  section{padding:64px 0}
  .hero{padding:126px 0 72px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta-band{padding:40px 24px}
}
@media (max-width:560px){
  .g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-cta .btn{width:100%}
}