/* ═══════════════════════════════════════════════════════════
   IAForma — Système de design partagé
   Chargé une seule fois dans le <head> (le router ne le touche pas).
   Les couleurs historiques (orange / or / espresso / crème) sont conservées.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Couleurs de marque */
  --orange:#E8600A; --orange-deep:#C24D05; --orange-soft:#FFF0E6;
  --gold:#F5A623;   --gold-soft:#FEF3E2;
  --dark:#1A0F00;   --night:#120A02; --cocoa:#2A1A08; --cocoa-2:#35200C;
  --cream:#FFF8F0;  --surface:#FFF3E6; --paper:#FFFDFA;
  --text-main:#1A0F00; --text-muted:#6B4C2A; --text-soft:#9A7B5B;
  --border:rgba(232,96,10,.16); --border-strong:rgba(232,96,10,.32);
  --green:#16a34a; --red:#ef4444; --violet:#7c3aed; --bronze:#b45309;

  /* Typographie */
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Rayons : 3 niveaux seulement */
  --r-sm:8px; --r-md:14px; --r-lg:22px;

  /* Ombres teintées marron (jamais gris pur) */
  --sh-1:0 1px 2px rgba(60,28,0,.06),0 2px 8px rgba(60,28,0,.05);
  --sh-2:0 6px 20px rgba(60,28,0,.10),0 2px 6px rgba(60,28,0,.06);
  --sh-3:0 18px 48px rgba(60,28,0,.18),0 4px 12px rgba(60,28,0,.08);
  --glow:0 0 0 1px rgba(232,96,10,.35),0 10px 40px rgba(232,96,10,.28);

  /* Mouvement */
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.16s; --t-med:.32s; --t-slow:.7s;

  /* Motif « pagne » : bande tissée, élément signature de la marque */
  --pagne:repeating-linear-gradient(90deg,
      var(--orange) 0 10px, var(--dark) 10px 14px,
      var(--gold) 14px 24px, var(--dark) 24px 28px);
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-main);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.12;}
button,input,select,textarea{font-family:inherit;}
::selection{background:var(--orange);color:#fff;}

/* Focus clavier toujours visible */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}

/* Barres de défilement discrètes */
*{scrollbar-width:thin;scrollbar-color:rgba(232,96,10,.35) transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(232,96,10,.3);border-radius:8px;}

/* ───────── Bande « pagne » ───────── */
.pagne{height:6px;background:var(--pagne);background-size:28px 6px;}
.pagne.thick{height:10px;background-size:28px 10px;}
.pagne.move{animation:pagne-slide 2.4s linear infinite;}
@keyframes pagne-slide{to{background-position:28px 0;}}

/* ───────── Boutons : retour tactile ───────── */
.btn-fx{position:relative;overflow:hidden;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),
             background var(--t-med),border-color var(--t-med),opacity var(--t-med);
  -webkit-tap-highlight-color:transparent;}
.btn-fx:active{transform:scale(.97);}
.btn-fx .rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);
  transform:scale(0);animation:rip .6s var(--ease) forwards;}
@keyframes rip{to{transform:scale(1);opacity:0;}}

/* ───────── Squelettes de chargement ───────── */
.skeleton{position:relative;overflow:hidden;background:rgba(232,96,10,.09);border-radius:var(--r-sm);color:transparent !important;}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-100%);animation:shimmer 1.3s infinite;}
.dark .skeleton,.skeleton.on-dark{background:rgba(255,255,255,.07);}
.dark .skeleton::after,.skeleton.on-dark::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.10) 50%,transparent 80%);}
@keyframes shimmer{to{transform:translateX(100%);}}

/* ───────── Apparition ciblée (utilisée avec parcimonie) ───────── */
[data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0s);}
[data-rv].in{opacity:1;transform:none;}

/* ───────── Animations utilitaires ───────── */
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes pop{0%{transform:scale(.8);opacity:0;}70%{transform:scale(1.04);}100%{transform:scale(1);opacity:1;}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.8);}}
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* Transition de page (déclenchée par router.js) */
.router-fade{opacity:0;transition:opacity .18s ease;}
.router-fade-in{animation:rise .38s var(--ease);}

/* Mouvement réduit : on coupe tout ce qui bouge */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  [data-rv]{opacity:1;transform:none;}
}

/* ═══ Confort mobile (majorité des visiteurs) ═══ */
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
body{min-height:100vh;min-height:100dvh;overflow-wrap:anywhere;}
img,svg,video{max-width:100%;}
@media (max-width:768px){
  /* 16px minimum : empêche le zoom automatique d'iOS dans les champs */
  input,select,textarea{font-size:16px !important;}
  /* zones tactiles d'au moins 44px */
  .btn-fx,.btn-back,.btn-copy,.btn-sm,.btn-upg,.pwd-eye,.broadcast-close,.btn-close-modal,.logo,.nav a,footer a{min-height:44px;}
  .pwd-eye{min-width:44px;}
  .logo,.btn-back,.nav a{display:inline-flex;align-items:center;}
  footer a,.footer-links a,.card a{display:inline-flex;align-items:center;padding:0 8px;min-height:44px;}
  .footer-links{gap:4px 8px !important;justify-content:center;}
  .broadcast-close,.btn-close-modal{min-width:44px;}
  button,a{touch-action:manipulation;}
  /* le survol n'existe pas au doigt : pas d'effet collant */
  .stat-card:hover,.card:hover,.module-card:hover,.upg-item:hover{transform:none;}
}
@supports (padding:max(0px)){
  .nav{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
}