/* ==========================================================================
   OUSTARSH — Design system 2026 · « ENCRE & PIERRE »
   Socle commun : vitrine, bilan, espace client, démo coach, manager.
   Principe : noir encre chaud, papier crème, accents minéraux désaturés,
   filets fins plutôt qu'ombres colorées, angles nets plutôt qu'arrondis mous.
   ========================================================================== */

:root{
  /* ---- Encre : noir chaud, progression lisible ---- */
  --ink-900:#0A0A09;
  --ink-850:#0E0D0C;
  --ink-800:#131211;
  --ink-700:#191816;
  --ink-600:#201E1B;
  --ink-500:#2A2723;
  --ink-400:#38342E;

  /* ---- Papier : sections claires (jamais blanc pur) ---- */
  --paper-100:#F4F1EA;
  --paper-200:#EAE5DB;
  --paper-300:#D9D2C4;
  --paper-ink:#16150F;
  --paper-tx:#4A463D;

  /* ---- Encre typographique ---- */
  --tx-hi:#F6F3ED;
  --tx:#CBC4B8;
  --tx-mut:#8B847A;
  --tx-faint:#5D574E;

  /* ---- Filets ---- */
  --rule:rgba(246,243,237,.10);
  --rule-str:rgba(246,243,237,.20);
  --rule-ink:rgba(22,21,15,.14);

  /* ---- Accents minéraux (désaturés, 1 dominante + 2 accents) ---- */
  --jade:#3E9E86;        /* action — vert minéral */
  --jade-lift:#63BEA5;
  --jade-deep:#2A6355;
  --jade-on:#05100D;
  --jade-veil:rgba(62,158,134,.10);
  --jade-line:rgba(62,158,134,.32);

  --brass:#B08D55;       /* preuve — laiton */
  --brass-lift:#D0AE78;
  --brass-deep:#6E5730;
  --brass-veil:rgba(176,141,85,.10);
  --brass-line:rgba(176,141,85,.32);

  --clay:#B4667B;        /* univers femmes — argile rosée */
  --clay-lift:#D08B9D;
  --clay-deep:#8A4256;
  --clay-on:#FFF7F9;
  --clay-veil:rgba(180,102,123,.10);
  --clay-line:rgba(180,102,123,.32);

  --signal:#C25A3E;      /* alerte */
  --good:#5E9B77;        /* validé */
  --wa:#1FA855;          /* WhatsApp assagi */

  /* ---- Typographie ---- */
  --f-dis:'Archivo Expanded','Archivo',system-ui,sans-serif;
  --f-ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-ed:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-mo:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --t-3xs:.64rem;
  --t-2xs:.7rem;
  --t-xs:.78rem;
  --t-sm:.875rem;
  --t-md:1rem;
  --t-lg:1.075rem;
  --t-xl:clamp(1.2rem,1.7vw,1.4rem);
  --t-2xl:clamp(1.5rem,2.6vw,2rem);
  --t-3xl:clamp(1.95rem,4.2vw,3rem);
  --t-4xl:clamp(2.5rem,6.5vw,4.5rem);
  --t-5xl:clamp(3.2rem,10vw,8rem);

  /* ---- Rythme & formes ---- */
  --gut:clamp(1.25rem,5.5vw,5.5rem);
  --r-xs:2px;
  --r-sm:3px;
  --r-md:6px;
  --r-lg:10px;

  --lift:0 26px 64px -34px rgba(0,0,0,.9);
  --lift-sm:0 14px 30px -20px rgba(0,0,0,.85);
  --ease:cubic-bezier(.22,.68,.24,1);
  --dur:.34s;

  /* ==== Alias de compatibilité (anciens noms → nouvelle charte) ==== */
  --bg:var(--ink-900);
  --bg2:var(--ink-850);
  --bg-secondary:var(--ink-850);
  --panel:var(--ink-700);
  --panel2:var(--ink-600);
  --panel-light:var(--ink-600);
  --surface:var(--ink-700);
  --surface2:var(--ink-600);
  --surface3:var(--ink-500);
  --border:var(--rule);
  --line:var(--rule);

  --white:#FFFFFF;
  --white-soft:var(--paper-100);
  --white-ink:var(--paper-ink);
  --text:var(--tx-hi);
  --text-primary:var(--tx-hi);
  --text-heading:var(--tx-hi);
  --text-body:var(--tx);
  --text-muted:var(--tx-mut);
  --ink:var(--tx-hi);
  --muted:var(--tx-mut);
  --muted-txt:var(--tx-mut);

  --homme:var(--jade);
  --homme-light:var(--jade-lift);
  --homme-dark:var(--jade-deep);
  --homme-soft:var(--jade-veil);
  --homme-on:var(--jade-on);
  --femme:var(--clay);
  --femme-light:var(--clay-lift);
  --femme-dark:var(--clay-deep);
  --femme-soft:var(--clay-veil);
  --femme-on:var(--clay-on);
  --teal:var(--jade);
  --teal-light:var(--jade-lift);
  --teal-dark:var(--jade-deep);
  --teal-hover:var(--jade-lift);
  --teal-soft:var(--jade-veil);
  --teal-on:var(--jade-on);
  --ember:var(--jade);
  --ember2:var(--jade-lift);
  --ember-soft:var(--jade-veil);
  --ember-dim:var(--jade-veil);
  --accent:var(--jade);
  --accent2:var(--jade-lift);
  --accent-soft:var(--jade-veil);
  --accent-on:var(--jade-on);
  --gold:var(--brass);
  --gold-dark:var(--brass-deep);
  --gold-soft:var(--brass-veil);
  --rose:var(--clay);
  --rose2:var(--clay-lift);
  --rose-soft:var(--clay-veil);
  --rose-women:var(--clay);
  --rose-women-light:var(--clay-lift);
  --rose-women-soft:var(--clay-veil);
  --ok:var(--good);
  --success:var(--good);
  --green:var(--good);
  --red:var(--signal);
  --orange:var(--brass);
  --blue:#6E93A8;
  --warn:var(--brass);
  --whatsapp:var(--wa);

  --shadow:var(--lift);
  --glow-h:var(--lift-sm);
  --glow-f:var(--lift-sm);
  --glow-teal:var(--lift-sm);
  --glow-ember:var(--lift-sm);
  --glow:rgba(0,0,0,.5);
  --focus-ring:0 0 0 2px var(--ink-900),0 0 0 4px var(--jade-lift);

  /* Échelle numérique équivalente — utilisée par le manager, qui raisonne
     en niveaux (100 = plus clair … 500 = plus effacé) plutôt qu'en noms. */
  --tx-100:var(--tx-hi);
  --tx-200:var(--tx);
  --tx-400:var(--tx-mut);
  --tx-500:var(--tx-faint);
  --hair:var(--rule);
  --hair-2:var(--rule-str);
  --ink-750:#161513;

  --fx:var(--f-dis);
  --fs:var(--f-ui);
  --fm:var(--f-mo);
  --font-d:var(--f-dis);
  --font-b:var(--f-ui);
  --font-m:var(--f-mo);
  --r:var(--r-md);
  --radius:var(--r-md);
  --tr:var(--dur) var(--ease);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;color-scheme:dark}
body{
  background:var(--ink-900);
  color:var(--tx);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--jade);color:var(--jade-on)}
:focus-visible{outline:2px solid var(--jade-lift);outline-offset:3px;border-radius:var(--r-xs)}

/* Texture papier — très discrète, jamais un « effet » */
.grain{
  pointer-events:none;position:fixed;inset:0;z-index:-1;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Typographie éditoriale
   -------------------------------------------------------------------------- */
.dis{font-family:var(--f-dis);font-weight:700;letter-spacing:-.022em;line-height:.94;text-transform:uppercase}
.ed{font-family:var(--f-ed);font-weight:400;letter-spacing:-.012em;line-height:1.12}
.mo{font-family:var(--f-mo);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-2xs)}

/* Étiquette de section : filet + mot, plus de pastille colorée */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--f-mo);font-weight:500;font-size:var(--t-2xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mut);
  margin-bottom:1.5rem;
}
.eyebrow::before{content:'';width:2.25rem;height:1px;background:var(--brass);flex:none;opacity:.85}
.eyebrow.on-paper{color:var(--paper-tx)}
.eyebrow.on-paper::before{background:var(--brass-deep)}
.eyebrow.f::before{background:var(--clay-deep)}

/* --------------------------------------------------------------------------
   Boutons — pleins mats, pas de dégradé ni de halo néon
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-ui);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.01em;padding:1rem 1.6rem;border-radius:var(--r-sm);
  border:1px solid transparent;position:relative;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{opacity:.4;pointer-events:none}
.btn-lg{padding:1.15rem 2rem;font-size:var(--t-md)}
.btn-sm{padding:.6rem 1rem;font-size:var(--t-xs)}

.btn-primary{background:var(--jade);color:var(--jade-on);font-weight:700}
.btn-primary:hover{background:var(--jade-lift)}
.btn-primary:active{background:var(--jade-deep);color:#EAF7F3}

.btn-secondary,.btn-outline{
  background:transparent;border-color:var(--rule-str);color:var(--tx-hi)
}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--tx-hi);background:rgba(246,243,237,.05)}

.btn-ghost,.btn.ghost{background:transparent;border-color:var(--rule);color:var(--tx)}
.btn-ghost:hover,.btn.ghost:hover{border-color:var(--jade);color:var(--jade-lift)}

.btn-f,.btn-femme{background:var(--clay-deep);color:var(--clay-on);font-weight:700}
.btn-f:hover,.btn-femme:hover{background:var(--clay)}

.btn-wa,.btn.wa{background:var(--wa);color:#FFF;font-weight:700}
.btn-wa:hover,.btn.wa:hover{background:#25C165}

/* Lien-flèche : remplace les « → » collés au texte */
.lnk-go{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mo);font-weight:500;font-size:var(--t-2xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--jade-lift);
}
.lnk-go::after{
  content:'';width:1.5rem;height:1px;background:currentColor;
  transition:width var(--dur) var(--ease)
}
.lnk-go:hover::after{width:2.5rem}

/* --------------------------------------------------------------------------
   Iconographie maison — une seule famille, grille 24, trait 1.75, bouts ronds.
   Usage : <i class="i i-check"></i> ou --i sur un ::before.
   Le masque prend currentColor : jamais d'emoji, jamais de glyphe système.
   -------------------------------------------------------------------------- */
.i{
  display:inline-block;width:1em;height:1em;flex:none;
  background-color:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;
          mask:var(--i) center/contain no-repeat;
}
.i-lg{width:1.5em;height:1.5em}

.i-check   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5 5L20 6.6'/%3E%3C/svg%3E")}
.i-cross   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.i-plus    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-minus   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.i-arrow   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13.5 6.5L20 12l-6.5 5.5'/%3E%3C/svg%3E")}
.i-pin     {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2c4.4-4.6 6.6-8.1 6.6-10.7A6.6 6.6 0 0 0 5.4 10.5c0 2.6 2.2 6.1 6.6 10.7z'/%3E%3Ccircle cx='12' cy='10.2' r='2.3'/%3E%3C/svg%3E")}
.i-clock   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.4V12l3.4 2.1'/%3E%3C/svg%3E")}
.i-plate   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 11.4h17.2A8.6 8.6 0 0 1 3.4 11.4z'/%3E%3Cpath d='M8.2 7.6c0-1.9 1.7-3.2 3.8-3.2s3.8 1.3 3.8 3.2'/%3E%3C/svg%3E")}
.i-dumbbell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5v5M6.5 7v10M17.5 7v10M21 9.5v5M6.5 12h11'/%3E%3C/svg%3E")}
.i-chat    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.4a2 2 0 0 1-2 2H8.2L4 20.6V5.6a2 2 0 0 1 2-2h12.5a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 8.6h8M8 12h5'/%3E%3C/svg%3E")}
.i-chart   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 19.5h17'/%3E%3Cpath d='M6.5 19.5v-5M11 19.5V8M15.5 19.5v-8M20 19.5V4.5'/%3E%3C/svg%3E")}
.i-doc     {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8L19 8.5v12H6z'/%3E%3Cpath d='M13.6 3.6V9h5.2M9 12.5h6M9 16h4'/%3E%3C/svg%3E")}
.i-user    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.7'/%3E%3Cpath d='M4.8 20.2c.6-3.7 3.5-5.9 7.2-5.9s6.6 2.2 7.2 5.9'/%3E%3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5.2' width='16.4' height='15' rx='1.6'/%3E%3Cpath d='M3.8 10h16.4M8.5 3.2v4M15.5 3.2v4'/%3E%3C/svg%3E")}
.i-shield  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l7.4 2.9v5.8c0 4.6-3 7.7-7.4 9.1-4.4-1.4-7.4-4.5-7.4-9.1V6.3z'/%3E%3C/svg%3E")}
.i-lock    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='10' rx='1.6'/%3E%3Cpath d='M8.2 10.2V7.6a3.8 3.8 0 0 1 7.6 0v2.6'/%3E%3C/svg%3E")}
.i-mail    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.4' width='18' height='13.2' rx='1.6'/%3E%3Cpath d='M3.6 6.6L12 13l8.4-6.4'/%3E%3C/svg%3E")}
.i-globe   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.4 12h17.2M12 3.4c2.4 2.4 3.6 5.3 3.6 8.6S14.4 18.2 12 20.6C9.6 18.2 8.4 15.3 8.4 12S9.6 5.8 12 3.4z'/%3E%3C/svg%3E")}
.i-gear    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v2.6M12 18.6v2.6M4.5 12H2M22 12h-2.5M6.7 6.7L4.9 4.9M19.1 19.1l-1.8-1.8M17.3 6.7l1.8-1.8M4.9 19.1l1.8-1.8'/%3E%3C/svg%3E")}
.i-search  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.6'/%3E%3Cpath d='M15.6 15.6L20.4 20.4'/%3E%3C/svg%3E")}
.i-signal  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 16.2a6 6 0 0 0 0-8.4M4.9 4.9a10 10 0 0 0 0 14.2M19.1 19.1a10 10 0 0 0 0-14.2'/%3E%3C/svg%3E")}
.i-euro    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.6 5.6a7.2 7.2 0 1 0 0 12.8'/%3E%3Cpath d='M4.8 10h8.4M4.8 14h8.4'/%3E%3C/svg%3E")}
.i-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v11M7.4 10.2L12 14.8l4.6-4.6M4.6 19.6h14.8'/%3E%3C/svg%3E")}
.i-male    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='14' r='5.6'/%3E%3Cpath d='M14.4 9.6l5.2-5.2M15 4.4h4.6V9'/%3E%3C/svg%3E")}
.i-female  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.8' r='5.4'/%3E%3Cpath d='M12 14.2v6.6M9.2 18h5.6'/%3E%3C/svg%3E")}
.i-menu    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E")}
.i-quote   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.8 5.4c-3 1.5-4.8 4.2-4.8 7.6v5.6h5.8v-6H7.4c0-2 1-3.4 3-4.4zm9 0c-3 1.5-4.8 4.2-4.8 7.6v5.6h5.8v-6h-3.4c0-2 1-3.4 3-4.4z'/%3E%3C/svg%3E")}

/* Suite de la famille — objectifs, niveaux, lieux, formules (bilan / manager) */
.i-flame   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3 3.4 5.2 6 5.2 9.1a5.2 5.2 0 0 1-10.4 0c0-3.1 2.2-5.7 5.2-9.1z'/%3E%3Cpath d='M12 13.4v4.4'/%3E%3C/svg%3E")}
.i-scale   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v15.6M8.4 19.8h7.2M4.4 8.4h15.2'/%3E%3Cpath d='M7.2 8.4L4.4 14h5.6zM16.8 8.4L14 14h5.6z'/%3E%3C/svg%3E")}
.i-gem     {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l7.4 5.4L12 20.4 4.6 9z'/%3E%3Cpath d='M4.6 9h14.8M9.2 9L12 20.4 14.8 9 12 3.6z'/%3E%3C/svg%3E")}
.i-plates  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.8'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 4.2v2.4M12 17.4v2.4M4.2 12h2.4M17.4 12h2.4'/%3E%3C/svg%3E")}
.i-trophy  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4.4h8v4.4a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 5.8H5.4v1.4A2.6 2.6 0 0 0 8 9.8M16 5.8h2.6v1.4A2.6 2.6 0 0 1 16 9.8'/%3E%3Cpath d='M12 12.8v3.6M8.6 19.6h6.8'/%3E%3C/svg%3E")}
.i-leaf    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.6 4.4c0 8.2-4.6 13-11.2 13-1.2 0-2.3-.2-3.3-.6.6-7.5 5.5-12.4 14.5-12.4z'/%3E%3Cpath d='M5.1 19.6c1.5-5.2 5.2-8.7 10.1-10.3'/%3E%3C/svg%3E")}
.i-bolt    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.2L6 13.6h4.6l-.6 7.2L18 10h-4.8z'/%3E%3C/svg%3E")}
.i-layers  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l8.4 4.3L12 12.2 3.6 7.9z'/%3E%3Cpath d='M3.6 12.2L12 16.5l8.4-4.3M3.6 16.1L12 20.4l8.4-4.3'/%3E%3C/svg%3E")}
.i-building{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 20.4V4.6h12.8v15.8'/%3E%3Cpath d='M3.8 20.4h16.4M8.8 8.2h2M13.2 8.2h2M8.8 11.8h2M13.2 11.8h2M10.2 20.4v-4.2h3.6v4.2'/%3E%3C/svg%3E")}
.i-home    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4L12 4l8 6.4v9.2H4z'/%3E%3Cpath d='M9.6 19.6v-5.4h4.8v5.4'/%3E%3C/svg%3E")}
.i-swap    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 9.2h12.2l-3-3M19.6 14.8H7.4l3 3'/%3E%3C/svg%3E")}
.i-box     {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l8.4 4.2v8.4L12 20.4 3.6 16.2V7.8z'/%3E%3Cpath d='M3.6 7.8L12 12l8.4-4.2M12 12v8.4'/%3E%3C/svg%3E")}
.i-crown   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.2l3.7 3.4L12 5.4l4.7 6.2 3.7-3.4-1.7 10.4H5.3z'/%3E%3C/svg%3E")}
.i-help    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.6 2.3c-.8.4-1.2 1-1.2 1.9M12 16.6v.6'/%3E%3C/svg%3E")}
.i-target  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='12' cy='12' r='.8'/%3E%3C/svg%3E")}
.i-heart   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c-1.6-1.2-8-5.2-8-10a4.4 4.4 0 0 1 8-2.4A4.4 4.4 0 0 1 20 10c0 4.8-6.4 8.8-8 10z'/%3E%3C/svg%3E")}
.i-moon    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.6A8.6 8.6 0 0 1 9.4 4a8.6 8.6 0 1 0 10.6 10.6z'/%3E%3C/svg%3E")}

/* Actions du manager */
.i-phone   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 4.4H5.6A1.6 1.6 0 0 0 4 6.2c.4 6.6 5.6 11.8 12.2 12.2a1.6 1.6 0 0 0 1.8-1.6v-2.6l-3.4-1.2-1.6 1.8a12 12 0 0 1-4.4-4.4l1.8-1.6z'/%3E%3C/svg%3E")}
.i-pencil  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.4 4.2l3.4 3.4L8.4 19H5v-3.4z'/%3E%3Cpath d='M14.2 6.4l3.4 3.4'/%3E%3C/svg%3E")}
.i-trash   {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.4h14.8M9.4 7.4V5.2h5.2v2.2M6.4 7.4l1 12.2h9.2l1-12.2'/%3E%3Cpath d='M10.4 11v5.2M13.6 11v5.2'/%3E%3C/svg%3E")}
.i-copy    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.6' y='8.6' width='11' height='11' rx='1.5'/%3E%3Cpath d='M15.4 5.4v-.9H4.4v11h.9'/%3E%3C/svg%3E")}
.i-refresh {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.6 11.2A7.8 7.8 0 0 0 6.4 7.2L4.4 9.2'/%3E%3Cpath d='M4.4 12.8a7.8 7.8 0 0 0 13.2 4l2-2'/%3E%3Cpath d='M4.4 5.4v3.8h3.8M19.6 18.6v-3.8h-3.8'/%3E%3C/svg%3E")}
.i-folder  {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 6.6a1.6 1.6 0 0 1 1.6-1.6h3.6l1.8 2.4h8.2a1.6 1.6 0 0 1 1.6 1.6v9.4a1.6 1.6 0 0 1-1.6 1.6H5.2a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3C/svg%3E")}
.i-send    {--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 3.6L10 13.4M20.4 3.6l-6.6 16.8-3.8-7-7-3.8z'/%3E%3C/svg%3E")}

/* --------------------------------------------------------------------------
   Filets & séparateurs éditoriaux
   -------------------------------------------------------------------------- */
.hr{height:1px;background:var(--rule);border:0}
.hr-brass{height:1px;background:var(--brass);opacity:.55;border:0}

/* --------------------------------------------------------------------------
   Apparition — translation courte, jamais de « pop » élastique
   -------------------------------------------------------------------------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   THÈME CLAIR + DÉGRADÉS  ·  html[data-theme="clair"]
   --------------------------------------------------------------------------
   Tout le site est aliasé sur une poignée de variables de base : il suffit de
   les redéfinir ici pour basculer en clair, sans toucher à un seul composant.
   Le dégradé se change avec l'attribut data-grad sur <html>.
   ========================================================================== */
html[data-theme="clair"]{
  color-scheme:light;

  /* Fonds : du blanc pur vers des gris très clairs (jamais de gris sale) */
  --ink-900:#FFFFFF;
  --ink-850:#FBFBFC;
  --ink-800:#F6F7F9;
  --ink-750:#F2F3F6;
  --ink-700:#EEF0F3;
  --ink-600:#E6E9ED;
  --ink-500:#DBDFE5;
  --ink-400:#C8CDD5;

  /* Sections « papier » : un cran plus marqué pour rester distinctes du blanc */
  --paper-100:#F4F6F8;
  --paper-200:#EAEDF1;
  --paper-300:#DCE1E7;
  --paper-ink:#0B1220;
  --paper-tx:#3E4653;

  /* Texte : noir franc pour les titres, gris lisibles en dessous */
  --tx-hi:#0B1220;
  --tx:#333B48;
  --tx-mut:#697280;
  --tx-faint:#98A0AC;

  /* Filets : sombres sur clair, l'inverse du thème nuit */
  --rule:rgba(11,18,32,.10);
  --rule-str:rgba(11,18,32,.20);
  --rule-ink:rgba(11,18,32,.12);

  /* Ombres : douces et bleutées. Une ombre noire sur blanc fait sale. */
  --lift:0 24px 56px -34px rgba(11,18,32,.30);
  --lift-sm:0 12px 26px -18px rgba(11,18,32,.22);
  --glow:rgba(11,18,32,.18);
  --focus-ring:0 0 0 2px var(--ink-900),0 0 0 4px var(--grad-b);

  /* Univers femmes : violet, choisi pour s'accorder au dégradé sans jurer */
  --clay:#7E22CE;
  --clay-lift:#A855F7;
  --clay-deep:#4C1D95;
  --clay-on:#FFFFFF;
  --clay-veil:rgba(126,34,206,.08);
  --clay-line:rgba(126,34,206,.28);

  --brass:#A9761F;
  --brass-lift:#C9932F;
  --brass-deep:#6B4A12;
  --brass-veil:rgba(169,118,31,.08);
  --brass-line:rgba(169,118,31,.28);

  --signal:#C62828;
  --good:#0F8A5F;
  --wa:#107C67;
  --blue:#1D6FA5;
}

/* ---- Dégradés disponibles ------------------------------------------------
   --grad-a = début, --grad-b = fin, --grad = le dégradé prêt à l'emploi.
   --jade* est recalé sur le dégradé : tous les alias existants (--teal,
   --accent, --ember, --homme…) suivent automatiquement.                    */
html[data-theme="clair"]{
  --grad-a:#0B2A45;
  --grad-b:#22C3D6;
}
html[data-theme="clair"][data-grad="indigo"]     { --grad-a:#3B24C8; --grad-b:#E0338C }
html[data-theme="clair"][data-grad="rougeviolet"]{ --grad-a:#D6173A; --grad-b:#6D28D9 }
html[data-theme="clair"][data-grad="cuivre"]     { --grad-a:#9A5B22; --grad-b:#C79A4B }
html[data-theme="clair"][data-grad="emeraude"]   { --grad-a:#0A5A46; --grad-b:#B8912F }
html[data-theme="clair"][data-grad="lime"]       { --grad-a:#0E9AA0; --grad-b:#7FB800 }

html[data-theme="clair"]{
  --grad:linear-gradient(100deg,var(--grad-a) 0%,var(--grad-b) 100%);
  --jade:var(--grad-a);
  --jade-lift:var(--grad-b);
  --jade-deep:var(--grad-a);
  --jade-on:#FFFFFF;
  --jade-veil:color-mix(in srgb,var(--grad-b) 10%,transparent);
  --jade-line:color-mix(in srgb,var(--grad-b) 34%,transparent);
}

/* Repli pour les navigateurs sans color-mix() : teintes fixes plutôt que rien */
@supports not (color:color-mix(in srgb,red,blue)){
  html[data-theme="clair"]{
    --jade-veil:rgba(34,195,214,.10);
    --jade-line:rgba(34,195,214,.34);
  }
}

/* ---- Application du dégradé ---------------------------------------------
   Uniquement sur les gros caractères. Un dégradé sur un paragraphe devient
   illisible : c'est une contrainte de lisibilité, pas un choix de style.    */
html[data-theme="clair"] .grad,
html[data-theme="clair"] .em,
html[data-theme="clair"] .fig-lead b,
html[data-theme="clair"] .fig-list b,
html[data-theme="clair"] .pc-amt,
html[data-theme="clair"] .hero-title .em{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* Le « was » (prix barré) vit dans .pc-amt : il doit rester gris, pas dégradé */
html[data-theme="clair"] .pc-amt .was{
  background:none;color:var(--tx-faint);-webkit-text-fill-color:var(--tx-faint)
}

/* Boutons et pastilles pleins */
html[data-theme="clair"] .btn-primary,
html[data-theme="clair"] .nav-cta,
html[data-theme="clair"] .btn-next,
html[data-theme="clair"] .pc.feat .pc-cta,
html[data-theme="clair"] .grad-bg{
  background:var(--grad);border-color:transparent;color:#FFFFFF
}
html[data-theme="clair"] .btn-primary:hover,
html[data-theme="clair"] .nav-cta:hover,
html[data-theme="clair"] .btn-next:hover{filter:brightness(1.08) saturate(1.05)}
/* Le dégradé de fond de la barre de boutons du bilan doit finir en blanc */
html[data-theme="clair"] .nav-btns{background:linear-gradient(transparent,#FFFFFF 38%)}

/* Photos : en noir et blanc sur fond clair, sinon leur éclairage vert-bleu
   se bat avec le dégradé. Retour en couleur au survol. */
html[data-theme="clair"] .obj img,
html[data-theme="clair"] .hero-bg img,
html[data-theme="clair"] .cta-bg img{filter:grayscale(1) contrast(1.06)}
html[data-theme="clair"] .obj:hover img{filter:grayscale(.55) contrast(1.08)}

/* Hero et CTA : les voiles d'origine mélangent var(--ink-900) avec du noir
   codé en dur. En clair ça donnerait un dégradé blanc vers noir. On les
   réécrit en blanc : la photo reste visible à droite, le texte noir tient
   à gauche — la composition validée en maquette. */
/* La photo garde de vrais noirs : sans ça la page entière paraît délavée
   et plus rien ne ressort. */
html[data-theme="clair"] .hero-bg img{filter:grayscale(1) contrast(1.12) brightness(.92)}
html[data-theme="clair"] .hero-bg::before{
  background:linear-gradient(102deg,#FFFFFF 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.28) 100%)
}
html[data-theme="clair"] .hero-bg::after{
  background:linear-gradient(to top,#FFFFFF 0%,rgba(255,255,255,.55) 26%,transparent 52%)
}

/* Barre de menu : fond blanc dès le départ. Transparente, elle laissait les
   liens gris foncé passer sur la partie sombre de la photo, donc illisibles. */
html[data-theme="clair"] .nav{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom-color:var(--rule)
}
html[data-theme="clair"] .nav.scrolled{background:#FFFFFF}
html[data-theme="clair"] .nav-links a{color:#3A4250;font-weight:600}
html[data-theme="clair"] .nav-links a:hover{color:var(--grad-a)}
html[data-theme="clair"] .brand{color:var(--tx-hi)}
html[data-theme="clair"] .brand span{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent
}

/* Titre du hero : nettement plus grand, c'est lui qui doit porter la page. */
html[data-theme="clair"] .hero-title{
  font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.06;max-width:26ch
}
html[data-theme="clair"] .hero-slogan{color:var(--grad-a);font-weight:600}
html[data-theme="clair"] .cta-bg img{filter:grayscale(1) contrast(1.05) brightness(1)}
html[data-theme="clair"] .cta-bg::after{
  background:linear-gradient(94deg,#FFFFFF 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.22) 100%)
}

/* Le mot de fond géant était en doré. En contour trop marqué il fait du bruit
   derrière le titre : on le laisse très discret. */
html[data-theme="clair"] .hero-mark{color:transparent;-webkit-text-stroke:1px rgba(11,18,32,.09)}

/* .cta h2 .em et .hero-brand span forcent une couleur unie plus spécifique
   que la règle de dégradé : on les remet explicitement en dégradé. */
html[data-theme="clair"] .cta h2 .em{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent
}
html[data-theme="clair"] .hero-scroll{color:var(--tx-mut)}

/* Légendes posées sur une photo assombrie (vignettes, scène méthode, encart
   résultats). Le voile sombre reste — c'est ce qui rend ces blocs percutants
   sur une page blanche — donc le texte doit rester blanc, pas suivre --tx-hi
   qui vient de passer au noir. */
html[data-theme="clair"] .obj-c h3,
html[data-theme="clair"] .obj-k,
html[data-theme="clair"] .scene-cap b,
html[data-theme="clair"] .scene-cap span,
html[data-theme="clair"] .method-badge b,
html[data-theme="clair"] .method-badge span{color:#FFFFFF}
html[data-theme="clair"] .obj-c p,
html[data-theme="clair"] .scene-cap span,
html[data-theme="clair"] .method-badge span{color:rgba(255,255,255,.78)}

/* Ces photos-là gardent leur voile : on ne les blanchit pas comme le hero. */
html[data-theme="clair"] .scene-photo img,
html[data-theme="clair"] .method-visual img{filter:grayscale(1) contrast(1.06) brightness(.78)}