/* ==========================================================================
   Composants communs à toutes les pages : barre de lecture, bandeau, header,
   logo, navigation, sélecteurs, boutons, bandeau cookies, footer.
   ========================================================================== */

/* ---------- Barre de lecture ---------- */
.scroll-bar{
  position:fixed;inset-inline:0;top:0;height:2px;z-index:60;pointer-events:none;
  background:var(--iris);transform:scaleX(0);transform-origin:left center;
}
html[dir="rtl"] .scroll-bar{transform-origin:right center}

/* ---------- Bandeau épinglé ---------- */
.announce{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:9px var(--gutter);font-size:.8rem;color:var(--muted);text-align:center;
  border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(192,132,252,.06),transparent);
}
.announce svg{width:14px;height:14px;flex:none;stroke:#C084FC}
.announce strong{color:var(--text);font-weight:600}
.announce a{color:var(--text);border-bottom:1px solid rgba(255,255,255,.25);transition:border-color var(--dur-fast)}
.announce a:hover{border-color:#F472B6}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;padding-top:12px}
.nav{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:60px;padding-inline:18px;border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:background var(--dur) var(--ease-lux),border-color var(--dur) var(--ease-lux),box-shadow var(--dur) var(--ease-lux);
}
header .wrap.nav{max-width:calc(var(--maxw) - 2 * var(--gutter) + 36px);width:calc(100% - 2 * var(--gutter) + 36px);padding-inline:18px}
header.scrolled .nav{
  background:rgba(12,12,16,.62);border-color:var(--line-hi);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);backdrop-filter:blur(var(--glass-blur)) saturate(170%);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.scrolled .nav{background:var(--glass-solid)}
}

.brand{display:inline-flex;align-items:center;color:var(--text);flex:none}
.brand .logo{height:34px;width:auto}
.logo .lg-mark{transform-origin:32px 35px;transition:transform .8s var(--ease-lux)}
.brand:hover .lg-mark{transform:rotate(-8deg) scale(1.04)}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;padding:8px 14px;border-radius:var(--radius-pill);
  font-size:.9rem;color:var(--muted);transition:color var(--dur-fast),background var(--dur-fast);
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;
  background:#F472B6;transform:translateX(-50%);box-shadow:0 0 10px #F472B6;
}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-cta .btn{height:40px;padding-inline:30px 18px;font-size:.86rem}

.menu-btn{
  display:none;width:40px;height:40px;border-radius:50%;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line-hi);
}
.menu-btn svg{width:18px;height:18px}

/* ---------- Sélecteurs langue / devise (construits par i18n.js et currency.js) ---------- */
.lang-switch,.currency-switch{position:relative}
.lang-btn,.currency-btn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;cursor:pointer;
  border-radius:var(--radius-pill);border:1px solid var(--line);background:transparent;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.lang-btn:hover,.currency-btn:hover,.open>.lang-btn,.open>.currency-btn{color:var(--text);border-color:var(--line-hi);background:rgba(255,255,255,.05)}
.lang-btn svg,.currency-btn svg{width:15px;height:15px}
.lang-menu,.currency-menu{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:200px;padding:6px;
  display:grid;gap:2px;border-radius:18px;
  background:rgba(16,16,22,.86);border:1px solid var(--line-hi);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity var(--dur-fast),transform var(--dur) var(--ease-out),visibility 0s linear var(--dur);
}
.open>.lang-menu,.open>.currency-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang-menu button,.currency-menu button{
  text-align:start;padding:10px 12px;border:0;border-radius:12px;background:transparent;cursor:pointer;
  font-size:.88rem;color:var(--muted);transition:background var(--dur-fast),color var(--dur-fast);
}
.lang-menu button:hover,.currency-menu button:hover{background:rgba(255,255,255,.06);color:var(--text)}
.lang-menu button.active,.currency-menu button.active{color:var(--text);background:var(--iris-soft)}

/* ---------- Boutons ----------
   .btn-content = libellé au repos ; .btn-arrive = copie révélée au survol (avec flèche) ;
   .btn-dot = pastille qui grandit jusqu'à remplir le bouton. Voir core/buttons.js. */
.btn{
  --tx:0px;--ty:0px;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  height:52px;padding-inline:40px 26px;border-radius:var(--radius-pill);border:1px solid transparent;
  font-size:.95rem;font-weight:560;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  transform:translate(var(--tx),var(--ty));
  transition:transform .6s var(--ease-out),box-shadow var(--dur) var(--ease-lux),color var(--dur) var(--ease-lux);
}
.btn:disabled{opacity:.6;cursor:progress}
.btn-content,.btn-arrive{display:inline-flex;align-items:center;gap:.5em;transition:transform .55s var(--ease-lux),opacity .35s var(--ease-lux)}
.btn-arrive{position:absolute;inset:0;justify-content:center;padding-inline:inherit;transform:translateY(105%);opacity:0;color:#fff}
.btn-dot{
  position:absolute;inset-inline-start:20px;top:50%;width:6px;height:6px;border-radius:50%;z-index:-1;
  background:var(--iris);transform:translate(-50%,-50%) scale(1);
  transition:transform .7s var(--ease-lux);
}
html[dir="rtl"] .btn-dot{transform:translate(50%,-50%) scale(1)}
.btn .arrow{display:inline-block;transition:transform var(--dur) var(--ease-lux)}
html[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
@media (hover:hover){
  .btn:hover .btn-content{transform:translateY(-105%);opacity:0}
  .btn:hover .btn-arrive{transform:none;opacity:1}
  .btn:hover .btn-dot{transform:translate(-50%,-50%) scale(90)}
  html[dir="rtl"] .btn:hover .btn-dot{transform:translate(50%,-50%) scale(90)}
}
.btn:focus-visible{outline-offset:4px}

.btn-primary{background:#F5F5F7;color:#0B0B10;box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 18px 40px -18px rgba(192,132,252,.7)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 22px 60px -16px rgba(236,72,153,.75)}
.btn-ghost{
  background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line-hi);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn-block{width:100%}
.btn-sm{height:40px;padding-inline:30px 18px;font-size:.86rem}

/* ---------- En-têtes de section ---------- */
.sec-head{max-width:760px;margin-bottom:clamp(44px,6vw,72px)}
.sec-head h2{margin-bottom:18px}

/* ---------- Bandeau d'appel à l'action ---------- */
.cta-band{display:grid;justify-items:center;gap:22px;padding:clamp(56px,9vw,110px) clamp(24px,5vw,60px);text-align:center;overflow:hidden}
.cta-band::after{background:radial-gradient(600px circle at var(--mx) var(--my),rgba(244,114,182,.16),transparent 60%)}
.cta-band h2{font-size:var(--fs-display)}
.cta-band p,.cta-band .lead{max-width:52ch;margin-inline:auto;color:var(--muted);font-size:var(--fs-lead)}

/* ---------- Carrousel (indice + points) ---------- */
.carousel-hint{display:none;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:.8rem;color:var(--dim)}
.carousel-hint svg{width:16px;height:16px;stroke:currentColor}
.carousel-dots{display:none;justify-content:center;gap:8px;margin-top:12px}
.carousel-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;transition:width var(--dur) var(--ease-lux),background var(--dur)}
.carousel-dots button[aria-current="true"]{width:22px;background:var(--iris)}
@media (max-width:900px){.carousel-hint,.carousel-dots{display:flex}}

/* ---------- Formulaire : échec d'envoi ---------- */
.form-fail{margin-top:18px;padding:20px;border-radius:var(--radius)}
.form-fail p{margin-bottom:14px;color:var(--text)}
.form-fail-links{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Bandeau cookies ---------- */
.cookie-bar{
  position:fixed;inset-inline-start:16px;bottom:16px;z-index:70;max-width:420px;padding:20px;border-radius:22px;
  /* opaque : sans flou d'arrière-plan, le verre laissait voir les boutons de la page à travers le bandeau */
  background:rgba(14,14,20,.97);
  font-size:.86rem;color:var(--muted);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity var(--dur),transform var(--dur) var(--ease-out),visibility 0s linear var(--dur);
}
.cookie-bar.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cookie-bar a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cookie-bar .row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.cookie-bar button{
  flex:1;height:40px;padding:0 16px;border-radius:var(--radius-pill);cursor:pointer;font-size:.84rem;font-weight:560;
  border:1px solid var(--line-hi);background:rgba(255,255,255,.04);color:var(--text);
}
.cookie-bar button.accept{background:#F5F5F7;color:#0B0B10;border-color:transparent}
/* petit écran : le bandeau prend toute la largeur et la bulle de l'assistante cachait « Essentiels uniquement » ;
   on masque la bulle tant que le bandeau est affiché */
@media (max-width:540px){
  body:has(.cookie-bar.show) .asst-launch{opacity:0;visibility:hidden;pointer-events:none}
}

/* ---------- Footer ---------- */
footer{padding-top:clamp(80px,10vw,140px);border-top:1px solid var(--line);margin-top:var(--section)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.foot-col h4{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.foot-col a{color:var(--muted);width:fit-content;transition:color var(--dur-fast)}
.foot-col a:hover{color:var(--text)}
.foot-col .logo{height:38px;width:auto;align-self:flex-start;margin-bottom:6px;color:var(--text)}
.foot-tagline{max-width:34ch;color:var(--dim)}
.foot-giant{
  display:block;margin-top:clamp(60px,8vw,110px);
  font-size:clamp(5rem,24vw,22rem);font-weight:700;line-height:.8;letter-spacing:-.07em;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;
}
.foot-bar,.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 22px;padding-block:22px;font-size:.8rem;color:var(--dim);border-top:1px solid var(--line)}
.foot-legal{justify-content:flex-start;padding-top:0;border:0}
.foot-legal a,.foot-bar a{color:var(--dim);transition:color var(--dur-fast)}
.foot-legal a:hover,.foot-bar a:hover{color:var(--text)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .menu-btn{display:grid}
  .nav-cta>.btn{display:none}
  .nav-links{
    position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;
    padding:96px var(--gutter) 40px;background:rgba(5,5,7,.94);
    -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
    opacity:0;visibility:hidden;transition:opacity var(--dur),visibility 0s linear var(--dur);
  }
  .nav-links.open{opacity:1;visibility:visible;transition-delay:0s}
  .nav-links a{font-size:clamp(2rem,9vw,3rem);font-weight:600;letter-spacing:-.03em;color:var(--text);padding:6px 0;border-radius:0;background:none!important}
  .nav-links a[aria-current="page"]::after{left:auto;inset-inline-end:-16px;top:50%;bottom:auto}
  body.menu-open{overflow:hidden}
  /* un backdrop-filter sur un parent enfermerait le menu plein écran (position:fixed) dans la pilule */
  body.menu-open header .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-color:transparent;box-shadow:none}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:520px){
  .lang-btn span,.currency-btn span{display:none}
  .lang-btn,.currency-btn{width:40px;padding:0;justify-content:center}
  header .wrap.nav{padding-inline:12px}
  .brand .logo{height:30px}
}

/* le libellé « العربية » du menu des langues : police système, pour ne pas télécharger
   la police arabe (≈ 33 Ko) quand le site est affiché dans une autre langue */
html:not([lang="ar"]) [data-lang-opt="ar"]{font-family:system-ui,-apple-system,sans-serif}