:root{
    --bg:#F2F8F6;
    --surface:#FFFFFF;
    --surface2:#F2F8F6;
    --text:#12241F;
    --text-soft:#4B615C;
    --heading:#0E3B39;
    --teal-mid:#146B62;
    --accent:#2FBFA8;
    --gold:#CE9A3E;
    --alert:#C6493F;
    --line:rgba(14,59,57,0.12);
    --btn-bg:#0E3B39;
    --btn-text:#FFFFFF;
    --chip-bg:#F2F8F6;
    --font-display:'Cairo', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
  }
  html[data-theme="dark"]{
    --bg:#0B1D1B;
    --surface:#12302C;
    --surface2:#0E2523;
    --text:#EAF6F3;
    --text-soft:#93BDB5;
    --heading:#6FE0C9;
    --teal-mid:#59D4BC;
    --accent:#33D4B8;
    --gold:#E8C27E;
    --alert:#E2685D;
    --line:rgba(255,255,255,0.12);
    --btn-bg:#15413C;
    --btn-text:#FFFFFF;
    --chip-bg:#0E2523;
  }
  html[data-lang="hi"]{ --font-display:'Noto Sans Devanagari', sans-serif; --font-body:'Noto Sans Devanagari', sans-serif; }
  html[data-lang="bn"]{ --font-display:'Noto Sans Bengali', sans-serif; --font-body:'Noto Sans Bengali', sans-serif; }
  html[data-lang="ar"]{ --font-display:'Cairo', sans-serif; --font-body:'Cairo', sans-serif; }
  html[data-lang="en"]{ --font-display:'Cairo', sans-serif; --font-body:'IBM Plex Sans', sans-serif; }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--font-body); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .25s ease, color .25s ease;}
  h1,h2,h3{font-family:var(--font-display);}
  a{text-decoration:none; color:inherit;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}

  .texture{
    position:absolute; inset:0; opacity:0.05; pointer-events:none;
    background-image:
      radial-gradient(circle at 20% 20%, var(--heading) 1.5px, transparent 1.5px),
      radial-gradient(circle at 60% 60%, var(--heading) 1.5px, transparent 1.5px);
    background-size:46px 46px, 46px 46px;
    background-position:0 0, 23px 23px;
  }

  /* logo swap */
  /* flex:0 0 auto — sans lui, l'image se fait ecraser en largeur dans la barre
     flexible pendant que height reste fixe : logo etire en hauteur, reduit en
     largeur, voire invisible quand les libelles de langue allongent la ligne
     (constate sur iPhone, 09/10). Le logo du pied de page avait deja la parade. */
  .logo{height:34px; width:auto; flex:0 0 auto; object-fit:contain;}
  .logo-dark{display:none;}
  html[data-theme="dark"] .logo-light{display:none;}
  html[data-theme="dark"] .logo-dark{display:block;}
  .logo-foot{height:30px; width:auto; max-width:160px; object-fit:contain; align-self:flex-start; opacity:.9;}
  .soon{display:inline-block; font-size:11px; font-weight:700; color:var(--gold); border:1px solid var(--gold); padding:3px 10px; border-radius:100px; margin-inline-start:10px; vertical-align:middle;}

  /* NAV */
  header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  nav{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1180px; margin:0 auto; gap:16px;}
  .navlinks{display:flex; gap:26px; font-size:14px; font-weight:500; color:var(--text-soft); flex:1; justify-content:center;}
  .navlinks a:hover{color:var(--heading);}
  .nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .nav-cta{background:var(--btn-bg); color:var(--btn-text); padding:9px 18px; border-radius:100px; font-size:13.5px; font-weight:600; white-space:nowrap;}
  .lang-switch{display:flex; gap:4px; background:var(--surface2); border:1px solid var(--line); border-radius:100px; padding:3px;}
  .lang-switch button{color:var(--text-soft); font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:100px; transition:background .15s ease, color .15s ease;}
  .lang-switch button.active{background:var(--btn-bg); color:var(--btn-text);}
  .theme-toggle{width:34px; height:34px; border-radius:50%; background:var(--surface2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--heading); flex-shrink:0;}
  .theme-toggle svg{width:17px; height:17px;}
  .theme-toggle .moon{display:none;}
  html[data-theme="dark"] .theme-toggle .sun{display:none;}
  html[data-theme="dark"] .theme-toggle .moon{display:block;}
  @media (max-width:940px){ .navlinks{display:none;} }

  /* HERO */
  .hero{position:relative; overflow:hidden; padding:76px 0 56px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); padding:7px 14px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--teal-mid); margin-bottom:22px;}
  .eyebrow svg{width:14px; height:14px; flex-shrink:0;}
  .hero-copy{position:relative;}
  .h1-halo{position:absolute; width:440px; height:280px; top:-70px; inset-inline-start:-90px; border-radius:50%;
    background:
      radial-gradient(ellipse at 40% 40%, rgba(47,191,168,0.38), transparent 60%),
      radial-gradient(ellipse at 72% 62%, rgba(206,154,62,0.24), transparent 55%);
    filter:blur(46px); z-index:0; pointer-events:none;
    animation:halo-pulse 9s ease-in-out infinite;}
  html[data-theme="dark"] .h1-halo{
    background:
      radial-gradient(ellipse at 40% 40%, rgba(51,212,184,0.30), transparent 60%),
      radial-gradient(ellipse at 72% 62%, rgba(232,194,126,0.18), transparent 55%);}
  .hero-copy > *{position:relative; z-index:1;}
  /* .hero-copy > * remettait le halo en position:relative — meme specificite que
     .h1-halo mais declaree APRES, donc elle gagnait. Le halo decoratif restait donc
     dans le flux avec ses 280px de hauteur : espacement genereux en colonne haute,
     bande vide sous l'en-tete en mobile. Cette regle, plus specifique, rend au halo
     le positionnement absolu que ses inset negatifs supposent. (Diagnostic Avalon,
     confirme dans la cascade, 09/10/2026.) */
  .hero-copy > .h1-halo{position:absolute; z-index:0;}
  .hero h1{font-size:46px; line-height:1.12; letter-spacing:-0.02em; color:var(--heading); font-weight:800; margin-bottom:22px;}
  .hero h1 .hl{color:var(--accent); text-shadow:0 0 26px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 25%, transparent);}
  .hero p{font-size:17px; line-height:1.65; color:var(--text-soft); max-width:480px; margin-bottom:34px;}
  .store-row{display:flex; gap:14px; flex-wrap:wrap;}
  .store-btn{display:flex; align-items:center; gap:10px; background:var(--btn-bg); color:var(--btn-text); padding:12px 20px; border-radius:14px; font-size:13.5px; transition:transform .2s ease; box-shadow:0 8px 20px rgba(14,59,57,0.18);}
  .store-btn:hover{transform:translateY(-2px);}
  .store-btn svg{width:19px; height:19px; flex-shrink:0;}
  .store-btn small{display:block; font-size:9.5px; opacity:.75; font-weight:400;}
  .store-btn b{font-size:13.5px; font-weight:600;}
  .store-btn.ghost{background:var(--surface); color:var(--heading); border:1px solid var(--line); box-shadow:none;}

  /* halo + phone slider */
  .hero-visual{position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; height:660px;}
  .halo{position:absolute; width:520px; height:520px; border-radius:50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(47,191,168,0.5), transparent 60%),
      radial-gradient(circle at 65% 70%, rgba(206,154,62,0.32), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(14,59,57,0.22), transparent 70%);
    filter:blur(38px); animation:halo-pulse 8s ease-in-out infinite;}
  @keyframes halo-pulse{ 0%,100%{transform:scale(1) rotate(0deg);} 50%{transform:scale(1.08) rotate(8deg);} }
  .halo-ring{position:absolute; width:430px; height:430px; border-radius:50%; border:1px solid var(--line);}
  .halo-ring.r2{width:500px; height:500px; border-color:rgba(206,154,62,0.22);}
  .phone{position:relative; z-index:3; width:224px; border-radius:34px; padding:9px; background:linear-gradient(160deg,#173F3C,#0B2C2A); box-shadow:0 30px 60px -18px rgba(11,44,42,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;}
  .phone-notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:74px; height:18px; background:#0B2C2A; border-radius:0 0 14px 14px; z-index:4;}
  .slider{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:480/1042;}
  .slider img{position:absolute; inset:0; width:100%; opacity:0; transition:opacity .6s ease;}
  .slider img.active{opacity:1;}
  .slider-dots{display:flex; gap:8px; margin-top:22px; z-index:5;}
  .slider-dots button{width:8px; height:8px; border-radius:50%; background:var(--line); transition:all .25s ease;}
  .slider-dots button.active{background:var(--accent); width:22px; border-radius:100px;}
  .float-card{position:absolute; background:var(--surface); border-radius:16px; padding:11px 15px; box-shadow:0 14px 30px rgba(14,59,57,0.18); display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--heading); z-index:5;}
  .float-card.fc1{ top:64px; inset-inline-start:-10px; }
  .float-card.fc2{ bottom:96px; inset-inline-end:-14px; }
  /* Mobile : .hero-visual occupe presque toute la largeur, les debords negatifs
     sortaient du viewport et rognaient les cartes (constate sur iPhone, 09/10). */
  @media (max-width:640px){
    .float-card.fc1{ inset-inline-start:4px; }
    .float-card.fc2{ inset-inline-end:4px; }
  }
  .float-card .ic{width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  @media (max-width:940px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero h1{font-size:34px;}
    .hero p{margin-left:auto; margin-right:auto;}
    .store-row{justify-content:center;}
    .hero-visual{height:520px; margin-top:16px;}
    .phone{width:184px;}
  }

  .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface);}
  .trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:38px; padding:24px 32px; max-width:1180px; margin:0 auto;}
  .trust-item{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--heading);}
  .trust-item svg{width:18px; height:18px; color:var(--accent); flex-shrink:0;}

  .feature{padding:96px 0;}
  .feature:nth-of-type(even){background:var(--surface);}
  .feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; max-width:1180px; margin:0 auto; padding:0 32px;}
  .tag{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
  .feature h2{font-size:29px; color:var(--heading); line-height:1.25; margin-bottom:18px;}
  .feature p{font-size:15.5px; line-height:1.75; color:var(--text-soft); margin-bottom:26px; max-width:440px;}
  .chip-row{display:flex; flex-wrap:wrap; gap:10px;}
  .chip{display:flex; align-items:center; gap:7px; background:var(--chip-bg); border:1px solid var(--line); padding:8px 14px; border-radius:100px; font-size:12px; font-weight:600; color:var(--heading);}
  .chip.crit{color:var(--alert); border-color:var(--alert);}
  .chip.gold{color:var(--gold); border-color:var(--gold);}
  .shot-frame{position:relative; display:flex; justify-content:center;}
  .shot-frame .glow{position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(47,191,168,0.28), transparent 65%); filter:blur(30px); z-index:0;}
  .shot-phone{position:relative; z-index:1; width:214px; border-radius:30px; padding:8px; background:linear-gradient(160deg,#173F3C,#0B2C2A); box-shadow:0 24px 50px -16px rgba(11,44,42,0.4);}
  .shot-phone img{border-radius:23px; width:100%;}
  .icon3d{width:60px; height:60px; border-radius:17px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 14px 26px -8px rgba(14,59,57,0.35), inset 0 1px 1px rgba(255,255,255,0.4);}
  .icon3d svg{width:28px; height:28px;}
  .icon-teal{background:linear-gradient(150deg,#3ED8BE,#0E6E63);}
  .icon-gold{background:linear-gradient(150deg,#F0C878,#B9822C);}
  .icon-navy{background:linear-gradient(150deg,#1E5C57,#0B2C2A);}
  @media (max-width:900px){
    .feature-grid{grid-template-columns:1fr; text-align:center;}
    .feature p{margin-left:auto; margin-right:auto;}
    .chip-row{justify-content:center;}
    .feature{padding:64px 0;}
  }

  /* PHOTO SLOTS — zones prévues pour vraies photos GCC */
  .photos{padding:96px 0; background:var(--surface);}
  .photos-head{max-width:1180px; margin:0 auto 44px; padding:0 32px; text-align:center;}
  .photos-head h2{font-size:29px; color:var(--heading); margin-bottom:12px;}
  .photos-head p{font-size:15px; color:var(--text-soft); max-width:560px; margin:0 auto;}
  .photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1180px; margin:0 auto; padding:0 32px;}
  .photo-card{position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden; margin:0; box-shadow:0 18px 40px -14px rgba(11,44,42,0.35); transform:translateZ(0);}
  .photo-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .photo-card:hover img{transform:scale(1.04);}
  .photo-card figcaption{position:absolute; bottom:0; inset-inline:0; padding:40px 18px 16px; color:#fff; font-weight:600; font-size:14px; background:linear-gradient(transparent, rgba(11,29,27,0.78)); text-align:start;}
  @media (max-width:900px){ .photo-grid{grid-template-columns:1fr;} .photo-card{aspect-ratio:4/5; max-width:420px; margin:0 auto;} }

  .premium{background:linear-gradient(165deg, #0E3B39, #0A2B29 70%); padding:96px 0; position:relative; overflow:hidden; color:#fff;}
  .premium .halo{background: radial-gradient(circle at 30% 30%, rgba(206,154,62,0.45), transparent 60%), radial-gradient(circle at 70% 70%, rgba(47,191,168,0.35), transparent 60%); top:-100px; inset-inline-end:-140px; width:600px; height:600px; animation:none;}
  .premium-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}
  .premium h2{font-size:31px; margin-bottom:16px;}
  .premium-grid > div:first-child p{color:rgba(255,255,255,0.72); font-size:15.5px; line-height:1.75; margin-bottom:30px; max-width:440px;}
  .plans{display:flex; gap:16px; flex-wrap:wrap;}
  .plan{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:18px; padding:20px; flex:1; min-width:140px;}
  .plan.pop{border-color:#CE9A3E; background:rgba(206,154,62,0.14);}
  .plan .badge{font-size:10px; font-weight:700; color:#E8C27E; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; display:block;}
  .plan .price{font-size:24px; font-weight:800; font-family:var(--font-display);}
  .plan .per{font-size:11.5px; color:rgba(255,255,255,0.55);}
  @media (max-width:900px){ .premium-grid{grid-template-columns:1fr; text-align:center;} .plans{justify-content:center;} .premium-grid > div:first-child p{margin-left:auto; margin-right:auto;} }

  footer{padding:44px 0 32px; background:var(--bg);}
  .foot-inner{max-width:1180px; margin:0 auto; padding:26px 32px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
  .foot-row{width:100%;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .foot-note{font-size:12px; color:var(--text-soft); max-width:560px;}
  .foot-links{display:flex; gap:20px; font-size:12px; color:var(--text-soft);}
  /* ── Barre d'installation, mobile uniquement ────────────────────────────
     Remplace le bouton de l'en-tete (demande Nabil, 09/10/2026).
     Proprietes logiques partout : l'arabe suit sans regle supplementaire.
     min-width:0 sur le texte — sans lui il ecrase ses voisins dans la ligne
     flexible, c'est exactement ce qui rendait le logo invisible ce matin. */
  .app-bar{display:none;}
  @media (max-width:940px){
    .app-bar{position:fixed; inset-inline:0; bottom:0; z-index:60;
      display:flex; align-items:center; gap:10px;
      padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
      background:var(--surface); border-top:1px solid var(--line);
      box-shadow:0 -8px 28px rgba(14,59,57,0.14);}
    .app-bar[hidden]{display:none;}
    .app-bar .ab-ic{flex:0 0 auto; width:34px; height:34px; border-radius:9px;
      background:var(--btn-bg); color:var(--btn-text);
      display:flex; align-items:center; justify-content:center;}
    .app-bar .ab-ic svg{width:18px; height:18px;}
    .app-bar .ab-tx{flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600;
      color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .app-bar .ab-go{flex:0 0 auto; background:var(--btn-bg); color:var(--btn-text);
      padding:8px 16px; border-radius:100px; font-size:13px; font-weight:600; white-space:nowrap;}
    .app-bar .ab-x{flex:0 0 auto; background:none; border:0; color:var(--text-soft);
      font-size:21px; line-height:1; padding:2px 6px; cursor:pointer;}
    body{padding-bottom:74px;}
  }

/* classes issues des attributs style= retirés le 2026-10-22 */
.ic.ic-emerald{background:linear-gradient(150deg,#3ED8BE,#0E6E63)}
.ic.ic-gold{background:linear-gradient(150deg,#F0C878,#B9822C)}
.chip.chip-gold{color:#B4791F;border-color:#B4791F}
.glow.glow-gold{background:radial-gradient(circle,rgba(206,154,62,.28),transparent 65%)}
.tag.tag-premium{color:#E8C27E}
.badge.badge-muted{color:rgba(255,255,255,.5)}