/* ==========================================================================
   بوعشرية فيزياء — SOCLE COMMUN
   Jetons de design, base typographique, barre de navigation, boutons,
   pied de page, boutons flottants. Chargé par toutes les pages publiques.
   Direction : « ورق مليمتري » — papier millimétré + courbe de progression.
   N'écrase pas assets/style.css, encore utilisé par les tableaux de bord.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Encre & papier */
  --ink:        #0B2B2E;
  --ink-2:      #274E4C;
  --ink-3:      #5C807D;
  --paper:      #F2F6F5;
  --surface:    #FFFFFF;
  --surface-2:  #E9F1EF;
  --line:       #D5E4E1;
  --grid-fine:  rgba(11,43,46,.040);
  --grid-bold:  rgba(11,43,46,.075);

  /* Marque */
  --brand:        #0B7A75;   /* turquoise approfondi : contraste AA sur blanc */
  --brand-bright: #3AAFAA;   /* turquoise d'origine : accents & fonds sombres */
  --brand-soft:   #E1F2F0;
  --brand-rgb:    11,122,117;

  /* Le vert ne sert plus qu'à la validation / réussite */
  --green:      #5E9422;
  --green-brt:  #7CB83A;
  --green-soft: #EDF6E2;
  --amber:      #C97B0E;
  --danger:     #C63636;

  --white: #ffffff;

  /* Formes */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-pill: 999px;

  --sh-s: 0 1px 2px rgba(11,43,46,.05), 0 4px 14px rgba(11,43,46,.05);
  --sh-m: 0 2px 6px rgba(11,43,46,.06), 0 14px 40px rgba(11,43,46,.09);
  --sh-brand: 0 10px 34px rgba(var(--brand-rgb),.22);

  /* Typographie */
  --font-display: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
  --font-body:    'Cairo', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --fs-h1:   clamp(1.85rem, 1.05rem + 3.4vw, 3.5rem);
  --fs-h2:   clamp(1.45rem, 1.05rem + 1.9vw, 2.35rem);
  --fs-h3:   clamp(1.02rem, .97rem + .35vw, 1.22rem);
  --fs-body: clamp(.95rem, .91rem + .22vw, 1.05rem);
  --fs-sm:   clamp(.82rem, .8rem + .12vw, .9rem);

  --gap-section: clamp(58px, 3.6vw + 34px, 108px);
  --nav-h: 68px;

  --ease: cubic-bezier(.4,0,.2,1);

  /* Alias hérités : certains scripts de assets/main.js les référencent. */
  --bg-1: var(--green-soft);
  --success-dark: var(--green);
  --turquoise: var(--brand);
  --turquoise-dark: var(--brand);
}

[data-theme="dark"]{
  --ink:        #E7F2F0;
  --ink-2:      #B6CFCC;
  --ink-3:      #85A6A3;
  --paper:      #061719;
  --surface:    #0C2427;
  --surface-2:  #113034;
  --line:       #1C4145;
  --grid-fine:  rgba(58,175,170,.055);
  --grid-bold:  rgba(58,175,170,.10);

  --brand:        #47C0BA;
  --brand-bright: #6EDBD5;
  --brand-soft:   #0E3634;
  --brand-rgb:    71,192,186;

  --green:      #96D453;
  --green-brt:  #A9E066;
  --green-soft: #163018;
  --amber:      #E2A93E;

  --sh-s: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.28);
  --sh-m: 0 2px 6px rgba(0,0,0,.42), 0 16px 44px rgba(0,0,0,.4);
  --sh-brand: 0 10px 34px rgba(0,0,0,.5);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  direction:rtl;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Le papier millimétré : deux trames superposées, comme une vraie feuille. */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
/* Halo diffus derrière le haut de page */
body::after{
  content:"";
  position:fixed; inset-block-start:-25vh; inset-inline:0;
  height:80vh; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(var(--brand-rgb),.13), transparent 70%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.3;
  margin:0;
  letter-spacing:-.01em;
}
p{ margin:0; }

.container{ width:100%; max-width:1160px; margin-inline:auto; padding-inline:20px; }

/* Focus visible : anneau net, jamais supprimé */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:fixed; inset-inline-start:16px; top:-70px;
  z-index:300;
  background:var(--brand); color:var(--white);
  padding:10px 18px; border-radius:var(--r-s);
  font-weight:600; transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Barre de progression + navigation ---------- */
.scroll-progress{
  position:fixed; inset-block-start:0; inset-inline:0;
  height:3px; z-index:120;
  transform-origin:right center;   /* RTL : progresse depuis la droite */
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--green-brt), var(--brand-bright));
}

.navbar{
  position:fixed; inset-block-start:0; inset-inline:0;
  z-index:110;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.navbar.is-scrolled{
  border-block-end-color:var(--line);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow:var(--sh-s);
}
.nav-inner{
  width:100%; max-width:1160px; margin-inline:auto; padding-inline:20px;
  display:flex; align-items:center; gap:16px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:42px; width:auto; }

.nav-inner > nav{ flex:1; display:flex; justify-content:center; }
.nav-links{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  display:block;
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600;
  color:var(--ink-2);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--brand); background:var(--brand-soft); }
.nav-links a.active{ color:var(--brand); background:var(--brand-soft); }

.nav-actions{ display:flex; align-items:center; gap:8px; margin-inline-start:14px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-pill);
  color:var(--ink-2); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{ color:var(--brand); border-color:var(--brand); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:19px; height:19px; }

/* L'icône affichée dépend du thème */
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.burger{ display:none; }

/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:var(--fs-sm); font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--brand); color:var(--white); box-shadow:var(--sh-brand); }
.btn-primary:hover{ background:color-mix(in srgb, var(--brand) 86%, #000); }
[data-theme="dark"] .btn-primary{ color:#04211F; }

.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--brand); color:var(--brand); }

.btn-ghost{ background:transparent; color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ color:var(--brand); border-color:var(--brand); }

.btn-lg{ padding:15px 30px; font-size:1rem; }

/* ---------- 14. Pied de page ---------- */
.site-footer{
  background:var(--surface);
  border-block-start:1px solid var(--line);
  margin-block-start:var(--gap-section);
  padding-block-start:clamp(38px,4vw,58px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1.1fr .8fr;
  gap:clamp(26px,3vw,46px);
  padding-block-end:36px;
}
.footer-col h4{
  font-size:.95rem; margin-block-end:16px;
  color:var(--ink);
}
.footer-col > p{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.8; }
.footer-logo{ height:46px; width:auto; margin-block-end:14px; }
.footer-link{
  display:flex; align-items:center; gap:10px;
  padding-block:7px;
  font-size:var(--fs-sm); color:var(--ink-3);
  transition:color .2s var(--ease);
}
.footer-link:hover{ color:var(--brand); }
.footer-link svg{ width:17px; height:17px; flex-shrink:0; color:var(--brand); }
.footer-bottom{
  border-block-start:1px solid var(--line);
  padding-block:18px;
  text-align:center;
  font-size:.82rem; color:var(--ink-3);
}

/* ---------- 15. Boutons flottants ---------- */
.fab{
  position:fixed;
  inset-block-end:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:none; cursor:pointer;
  box-shadow:var(--sh-m);
  transition:transform .22s var(--ease), opacity .22s var(--ease), visibility .22s;
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab svg{ width:24px; height:24px; }

.fab-whatsapp{ inset-inline-start:22px; background:#25D366; color:#fff; }
.fab-top{
  inset-inline-end:22px;
  background:var(--surface); color:var(--brand);
  border:1px solid var(--line);
  opacity:0; visibility:hidden;
}
.fab-top.is-visible{ opacity:1; visibility:visible; }


/* ---------- 16. Responsive du socle ---------- */
@media (max-width:1024px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }
}

@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-col:first-child{ grid-column:1 / -1; }
}

@media (max-width:640px){
  :root{ --nav-h:60px; }
  .brand img{ height:36px; }
  .nav-actions .btn{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .fab{ width:48px; height:48px; inset-block-end:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fab-whatsapp{ inset-inline-start:16px; }
  .fab-top{ inset-inline-end:16px; }
}

/* ---------- 17. Révélation au défilement ---------- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }

/* ---------- 18. Menu mobile ---------- */
.nav-drawer{
  position:fixed; inset-block-start:var(--nav-h); inset-inline:0; inset-block-end:0;
  z-index:105;
  background:var(--paper);
  padding:26px 20px 40px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  overflow-y:auto;
}
.nav-drawer.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.nav-drawer a:not(.btn){
  padding:15px 8px;
  border-block-end:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
}
.nav-drawer a:not(.btn):hover{ color:var(--brand); }
.nav-drawer-actions{ display:grid; gap:10px; margin-block-start:22px; }
body.is-locked{ overflow:hidden; }

/* ---------- 19. Préférences système & impression ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .plot-curve{ stroke-dashoffset:0; }
}

@media print{
  .navbar,.nav-drawer,.fab,.scroll-progress,.skip-link{ display:none !important; }
  body::before,body::after{ display:none; }
  .card,.testimonial,.faq-item{ break-inside:avoid; }
}