/* =====================================================================
   HOLLYMOTION · Tokens et composants communs
   Version 2 · 2026-10-02 · règles d'usage : DESIGN.md (même dossier)
   V2 : bleu plus saturé, nuit et lumière du bas, or clair sur les mots en valeur
   et les chiffres (sombre), surtitres sans filet, zoom des boutons, dégradés de section,
   carte à éclat.

   Portée : tout est rattaché à la classe .hm (et à ses modificateurs).
   Aucun sélecteur global : pas de body, pas de *, pas de :root, pas de reset.
   Le même fichier sert aux slides, aux PDF, aux visuels LinkedIn
   et, recopié dans le « socle Elementor », aux blocs du site.

   Modes (à poser sur l'élément qui porte .hm) :
     .hm                 sombre, ardoise (par défaut)
     .hm.hm-clair        pastel clair
     .hm.hm-creme        crème (documents, devis, PDF)
     .hm.hm-sante        santé sombre, pétrole
     .hm.hm-sante.hm-clair  santé claire
   Supports (règlent l'échelle typographique) :
     .hm-web (par défaut) · .hm-slide (1920 × 1080) · .hm-post (1080 de large)
   ===================================================================== */

/* ---------- 1. Couleurs brutes ---------- */
.hm{
  /* famille principale */
  --hm-ardoise:#182056;        /* fond sombre (V2, plus bleu) */
  --hm-faisceau:#4866D6;       /* lumière du projecteur (V2) */
  --hm-nuit:#03050E;           /* noir bleuté : bas des dégradés de section */
  --hm-blanc-casse:#F3EFE7;    /* texte sur sombre */
  --hm-brume:#BEC5D9;          /* texte secondaire sur sombre */
  --hm-champagne:#E8CC8E;      /* nuance douce de l'or (V2 : les mots en valeur passent en or clair) */
  --hm-champagne-filet:#D9B66E;/* surtitres, filets sur sombre */
  --hm-pastel-haut:#E6EBF4;    /* fond clair, haut */
  --hm-pastel-bas:#CDD7E8;     /* fond clair, bas */
  --hm-creme:#F0ECE3;          /* documents */
  --hm-encre:#1C2644;          /* texte sur clair */
  --hm-encre-2:#4E5872;        /* texte secondaire sur clair */
  --hm-or-vieilli:#72541E;     /* mots en valeur et surtitres sur clair */
  --hm-bronze:#8C6A2E;         /* filets décoratifs sur clair (pas de texte) */
  /* or vif : logo et action uniquement (règle « Signal ») */
  --hm-or-clair:#FFD166;       /* HOLLY, boutons */
  --hm-or:#F59E00;             /* MOTION */
  /* santé */
  --hm-petrole:#15333D;
  --hm-petrole-faisceau:#3F7E8A;
  --hm-petrole-haut:#E6EEEE;
  --hm-petrole-bas:#CBDCDD;
  --hm-petrole-accent:#1F5E66;
  --hm-petrole-filet:#2F7A82;   /* filets décoratifs santé clair (pas de texte) */

  /* grain : bruit SVG, aucune image externe */
  --hm-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hm-grain-fort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ---------- 2. Rôles (mode sombre par défaut) ---------- */
  --hm-fond:var(--hm-ardoise);
  --hm-lumiere:radial-gradient(85% 70% at 50% -10%,rgba(72,102,214,.75) 0%,rgba(58,84,190,.35) 40%,transparent 75%);
  --hm-lumiere-bas:radial-gradient(85% 70% at 50% 110%,rgba(72,102,214,.75) 0%,rgba(58,84,190,.35) 40%,transparent 75%);
  --hm-texte:var(--hm-blanc-casse);
  --hm-texte-2:var(--hm-brume);
  --hm-accent:var(--hm-or-clair);
  --hm-filet:var(--hm-champagne-filet);
  --hm-ligne:rgba(220,226,245,.18);
  --hm-halo:0 0 22px rgba(255,209,102,.22);
  --hm-btn-fond:var(--hm-or-clair);
  --hm-btn-texte:var(--hm-ardoise);
  --hm-btn2-bord:rgba(243,239,231,.38);
  --hm-btn2-texte:var(--hm-blanc-casse);
  --hm-verre-fond:linear-gradient(180deg,rgba(120,140,220,.16) 0%,rgba(40,55,110,.10) 100%);
  --hm-verre-bord:rgba(170,185,250,.38);
  --hm-verre-reflet:rgba(200,212,255,.95);
  --hm-verre-ombre:0 0 40px rgba(74,95,168,.25),inset 0 0 32px rgba(120,140,255,.08);
  --hm-logo-a:var(--hm-or-clair);
  --hm-logo-b:var(--hm-or);

  /* ---------- 3. Typographie ---------- */
  --hm-police-titre:"League Spartan","Arial Narrow",sans-serif;
  --hm-police-texte:"Sora",system-ui,sans-serif;
  --hm-police-main:"Caveat","Segoe Print",cursive;   /* annotations manuscrites */
  /* échelle web (par défaut) */
  --hm-t-display:clamp(44px,6vw,80px);
  --hm-t-1:clamp(36px,4.6vw,60px);
  --hm-t-2:clamp(28px,3.4vw,44px);
  --hm-t-3:clamp(21px,2.1vw,27px);
  --hm-t-chiffre:clamp(40px,5vw,64px);
  --hm-t-chapo:clamp(18px,1.6vw,21px);
  --hm-t-texte:16.5px;
  --hm-t-petit:14px;
  --hm-t-surtitre:12px;
  --hm-t-note:clamp(22px,2.2vw,30px);

  /* ---------- 4. Espacements (base 8) ---------- */
  --hm-e-1:4px; --hm-e-2:8px; --hm-e-3:12px; --hm-e-4:16px; --hm-e-5:24px;
  --hm-e-6:32px; --hm-e-7:48px; --hm-e-8:64px; --hm-e-9:96px; --hm-e-10:128px;
  --hm-rayon-btn:14px;
  --hm-rayon-carte:24px;
  --hm-largeur:1160px;          /* contenu web, aligné sur le header du site (--hm-maxw du Customizer) */
  --hm-marge:clamp(20px,5vw,64px);

  font-family:var(--hm-police-texte);
  font-weight:300;
  color:var(--hm-texte);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}

/* ---------- 5. Modes ---------- */
.hm.hm-clair{
  --hm-fond:linear-gradient(180deg,var(--hm-pastel-haut) 0%,var(--hm-pastel-bas) 100%);
  --hm-lumiere:radial-gradient(80% 60% at 50% -10%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.4) 40%,transparent 75%);
  --hm-texte:var(--hm-encre); --hm-texte-2:var(--hm-encre-2);
  --hm-accent:var(--hm-or-vieilli); --hm-filet:var(--hm-or-vieilli);
  --hm-ligne:rgba(28,38,68,.14); --hm-halo:none;
  --hm-btn-fond:var(--hm-encre); --hm-btn-texte:var(--hm-or-clair);
  --hm-btn2-bord:rgba(28,38,68,.3); --hm-btn2-texte:var(--hm-encre);
  --hm-verre-fond:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.5) 100%);
  --hm-verre-bord:rgba(255,255,255,.95); --hm-verre-reflet:#FFFFFF;
  --hm-verre-ombre:0 14px 36px rgba(28,38,68,.10);
  --hm-logo-a:var(--hm-encre); --hm-logo-b:var(--hm-or);
}
.hm.hm-creme{
  --hm-fond:var(--hm-creme); --hm-lumiere:none;
  --hm-texte:var(--hm-encre); --hm-texte-2:var(--hm-encre-2);
  --hm-accent:var(--hm-or-vieilli); --hm-filet:var(--hm-or-vieilli);
  --hm-ligne:#D3CDBF; --hm-halo:none;
  --hm-btn-fond:var(--hm-encre); --hm-btn-texte:var(--hm-or-clair);
  --hm-btn2-bord:rgba(28,38,68,.3); --hm-btn2-texte:var(--hm-encre);
  --hm-verre-fond:rgba(255,255,255,.6); --hm-verre-bord:#E4DED0; --hm-verre-reflet:#FFFFFF;
  --hm-verre-ombre:0 10px 28px rgba(28,38,68,.07);
  --hm-logo-a:var(--hm-encre); --hm-logo-b:var(--hm-or);
}
.hm.hm-sante{
  --hm-fond:var(--hm-petrole);
  --hm-lumiere:radial-gradient(85% 70% at 50% -10%,rgba(63,126,138,.55) 0%,rgba(52,105,118,.28) 40%,transparent 75%);
  --hm-texte:#F1EEE6; --hm-texte-2:#C9D6D1;
  --hm-ligne:rgba(220,238,242,.18);
  --hm-btn-texte:var(--hm-petrole);
  --hm-verre-fond:linear-gradient(180deg,rgba(120,200,210,.14) 0%,rgba(30,80,90,.10) 100%);
  --hm-verre-bord:rgba(160,220,225,.34); --hm-verre-reflet:rgba(200,245,245,.9);
  --hm-verre-ombre:0 0 40px rgba(63,126,138,.22),inset 0 0 32px rgba(120,200,210,.07);
}
.hm.hm-sante.hm-clair{
  --hm-fond:linear-gradient(180deg,var(--hm-petrole-haut) 0%,var(--hm-petrole-bas) 100%);
  --hm-lumiere:radial-gradient(80% 60% at 50% -10%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.4) 40%,transparent 75%);
  --hm-texte:var(--hm-petrole); --hm-texte-2:#4E5F5E;
  --hm-accent:var(--hm-petrole-accent); --hm-filet:var(--hm-petrole-accent);
  --hm-ligne:rgba(21,51,61,.14);
  --hm-btn-fond:var(--hm-petrole); --hm-btn-texte:var(--hm-or-clair);
  --hm-btn2-bord:rgba(21,51,61,.3); --hm-btn2-texte:var(--hm-petrole);
  --hm-verre-fond:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.5) 100%);
  --hm-verre-bord:rgba(255,255,255,.95); --hm-verre-reflet:#FFFFFF;
  --hm-verre-ombre:0 14px 36px rgba(21,51,61,.10);
  --hm-logo-a:var(--hm-petrole); --hm-logo-b:var(--hm-or);
}

/* ---------- 6. Supports : échelles fixes ---------- */
.hm.hm-slide,.hm .hm-slide{
  --hm-t-display:132px; --hm-t-1:96px; --hm-t-2:68px; --hm-t-3:40px; --hm-t-chiffre:96px;
  --hm-t-chapo:30px; --hm-t-texte:24px; --hm-t-petit:18px; --hm-t-surtitre:16px; --hm-t-note:50px;
}
.hm.hm-post,.hm .hm-post{
  --hm-t-display:128px; --hm-t-1:92px; --hm-t-2:66px; --hm-t-3:42px; --hm-t-chiffre:120px;
  --hm-t-chapo:36px; --hm-t-texte:30px; --hm-t-petit:24px; --hm-t-surtitre:22px; --hm-t-note:58px;
}

/* ---------- 7. Surface : fond + projecteur + grain ---------- */
.hm .hm-surface,.hm.hm-surface{
  background:var(--hm-grain),var(--hm-lumiere),var(--hm-fond);
  color:var(--hm-texte);
}

/* ---------- 7 bis. Dégradés de section (site, mode sombre) ----------
   Sections en alternance : -haut (lumière en haut, nuit en bas) puis -bas (nuit en haut, lumière en bas).
   Aux jonctions, la nuit rejoint la nuit et la lumière la lumière. Le chevauchement d'un pixel
   et les dégradés étendus d'un pixel masquent les fentes dues aux hauteurs fractionnaires. */
.hm.hm-degrade-haut,.hm.hm-degrade-bas{position:relative;color:var(--hm-texte);
  background-size:auto,100% calc(100% + 2px),100% calc(100% + 2px);background-position:0 0,50% 50%,50% 50%}
.hm.hm-degrade-haut{background-color:var(--hm-fond);
  background-image:var(--hm-grain),var(--hm-lumiere),linear-gradient(180deg,transparent 35%,var(--hm-nuit) 100%)}
.hm.hm-degrade-bas{background-color:var(--hm-nuit);
  background-image:var(--hm-grain),var(--hm-lumiere-bas),linear-gradient(180deg,var(--hm-nuit) 0%,var(--hm-fond) 65%)}
.hm.hm-degrade-haut + .hm.hm-degrade-bas,.hm.hm-degrade-bas + .hm.hm-degrade-haut{margin-top:-1px}

/* ---------- 8. Texte ---------- */
.hm .hm-surtitre{display:flex;align-items:center;gap:.9em;margin:0;
  font-family:var(--hm-police-texte);font-weight:400;font-size:var(--hm-t-surtitre);line-height:1.3;
  letter-spacing:.22em;text-transform:uppercase;color:var(--hm-filet)}
.hm .hm-surtitre.hm-centre{justify-content:center}

.hm .hm-display,.hm .hm-titre-1,.hm .hm-titre-2,.hm .hm-titre-3{
  margin:0;font-family:var(--hm-police-titre);font-weight:200;color:var(--hm-texte);
  letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.hm .hm-display{font-size:var(--hm-t-display);line-height:1}
.hm .hm-titre-1{font-size:var(--hm-t-1)}
.hm .hm-titre-2{font-size:var(--hm-t-2);line-height:1.08}
.hm .hm-titre-3{font-size:var(--hm-t-3);font-weight:300;letter-spacing:-.01em;line-height:1.18}
/* le mot en valeur : <b> dans un titre */
.hm .hm-display b,.hm .hm-titre-1 b,.hm .hm-titre-2 b,.hm .hm-titre-3 b{
  font-weight:500;color:var(--hm-accent);text-shadow:var(--hm-halo)}

.hm .hm-chapo{margin:0;font-size:var(--hm-t-chapo);line-height:1.5;font-weight:300;color:var(--hm-texte-2);max-width:38em}
.hm .hm-texte{margin:0;font-size:var(--hm-t-texte);line-height:1.65;font-weight:300;color:var(--hm-texte-2);max-width:38em}
.hm .hm-texte strong,.hm .hm-chapo strong{font-weight:500;color:var(--hm-texte)}
.hm .hm-petit{margin:0;font-size:var(--hm-t-petit);line-height:1.5;font-weight:400;color:var(--hm-texte-2)}

/* chiffres : fins, champagne, jamais géants */
.hm .hm-chiffre{display:block;font-family:var(--hm-police-titre);font-weight:200;font-size:var(--hm-t-chiffre);
  line-height:1;letter-spacing:-.02em;color:var(--hm-accent);font-variant-numeric:tabular-nums}
.hm .hm-legende{display:block;margin-top:.6em;font-size:var(--hm-t-petit);line-height:1.4;color:var(--hm-texte-2)}

/* ---------- 9. Boutons ---------- */
.hm .hm-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--hm-police-texte);font-weight:500;
  font-size:var(--hm-t-petit);line-height:1;padding:1em 1.6em;border-radius:var(--hm-rayon-btn);
  background:var(--hm-btn-fond);color:var(--hm-btn-texte);border:1px solid transparent;text-decoration:none;
  transition:transform .3s ease,filter .3s ease}
.hm .hm-btn:hover{transform:scale(1.05);filter:brightness(1.05);color:var(--hm-btn-texte)}
.hm .hm-btn.hm-btn-2{background:transparent;color:var(--hm-btn2-texte);border-color:var(--hm-btn2-bord)}
.hm .hm-btn.hm-btn-2:hover{color:var(--hm-btn2-texte)}
.hm .hm-actions{display:flex;flex-wrap:wrap;gap:var(--hm-e-4)}

/* ---------- 10. Carte en verre liquide ---------- */
.hm .hm-carte{position:relative;overflow:hidden;border-radius:var(--hm-rayon-carte);
  padding:var(--hm-e-6);background:var(--hm-grain-fort),var(--hm-verre-fond);
  border:1px solid var(--hm-verre-bord);box-shadow:var(--hm-verre-ombre);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* reflets lumineux au centre des bords haut et bas */
.hm .hm-carte::before,.hm .hm-carte::after{content:"";position:absolute;left:22%;right:22%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hm-verre-reflet),transparent);
  box-shadow:0 0 14px 2px var(--hm-verre-reflet)}
.hm .hm-carte::before{top:0;opacity:.7}
.hm .hm-carte::after{bottom:0}
.hm.hm-clair .hm-carte::after,.hm.hm-creme .hm-carte::after{opacity:0}
.hm .hm-carte > *{position:relative}

/* carte à éclat : liseré fin, trait de lumière en haut, éclat (flare) au centre du bord bas (mode sombre) */
.hm .hm-carte.hm-carte-eclat{border-color:color-mix(in srgb,var(--hm-verre-reflet) 45%,transparent);
  box-shadow:0 0 40px color-mix(in srgb,var(--hm-faisceau) 28%,transparent);
  background:var(--hm-grain),
    radial-gradient(38% 12% at 50% 100%,color-mix(in srgb,var(--hm-verre-reflet) 55%,transparent) 0%,transparent 100%),
    radial-gradient(70% 22% at 50% 100%,color-mix(in srgb,var(--hm-faisceau) 85%,transparent) 0%,transparent 100%),
    radial-gradient(100% 24% at 50% 74%,color-mix(in srgb,var(--hm-faisceau) 26%,transparent) 0%,transparent 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--hm-faisceau) 46%,var(--hm-ardoise)) 0%,color-mix(in srgb,var(--hm-faisceau) 22%,var(--hm-ardoise)) 55%,color-mix(in srgb,var(--hm-faisceau) 40%,var(--hm-ardoise)) 100%)}
.hm .hm-carte.hm-carte-eclat::before{left:34%;right:34%;opacity:1;box-shadow:0 0 10px 1px var(--hm-verre-reflet)}
.hm .hm-carte.hm-carte-eclat::after{left:30%;right:30%;height:2px;opacity:1;
  background:linear-gradient(90deg,transparent,var(--hm-verre-reflet) 30%,var(--hm-blanc-casse) 50%,var(--hm-verre-reflet) 70%,transparent);
  box-shadow:0 0 10px 2px var(--hm-verre-reflet),0 -3px 24px 8px color-mix(in srgb,var(--hm-faisceau) 90%,transparent)}

/* ---------- 11. Listes numérotées 01 02 03 ---------- */
.hm .hm-liste-num{list-style:none;margin:0;padding:0;display:grid;gap:var(--hm-e-5)}
.hm .hm-liste-num li{display:grid;grid-template-columns:3.2em 1fr;gap:var(--hm-e-4);align-items:baseline;
  padding-top:var(--hm-e-4);border-top:1px solid var(--hm-ligne);margin:0;
  font-size:var(--hm-t-texte);line-height:1.5;color:var(--hm-texte-2)}
.hm .hm-liste-num li:first-child{border-top:0;padding-top:0}
.hm .hm-liste-num li b{font-family:var(--hm-police-titre);font-weight:200;font-size:1.8em;line-height:1;color:var(--hm-accent)}
.hm .hm-liste-num li strong{display:block;font-weight:500;color:var(--hm-texte)}

/* ---------- 12. Logo et filets ---------- */
.hm .hm-logo{display:block;height:var(--hm-logo-h,24px);width:auto;flex:none}
.hm .hm-logo .a{fill:var(--hm-logo-a)}
.hm .hm-logo .b{fill:var(--hm-logo-b)}
.hm .hm-filet{border:0;height:1px;background:var(--hm-ligne);margin:0}

/* ---------- 13. Annotation manuscrite (une par composition) ----------
   <span class="hm-note"><span>20 minutes,<br>sans engagement</span><svg><use href="#hm-fl-courbe"/></svg></span>
   Flèches : 01_IDENTITE/fleches/ (extrait HTML à coller une fois). Position : à placer par le document. */
.hm .hm-note{display:inline-flex;align-items:center;gap:.3em;color:var(--hm-accent);
  font-family:var(--hm-police-main);font-weight:600;font-size:var(--hm-t-note);line-height:1.05;letter-spacing:0}
.hm .hm-note > span{display:block;transform:rotate(-4deg);transform-origin:left bottom}
.hm .hm-note svg{flex:none;width:2.2em;height:2.2em;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hm .hm-note.hm-note-miroir svg{transform:scaleX(-1)}
.hm .hm-note.hm-note-colonne{flex-direction:column;align-items:flex-start}
/* Sur mobile, quand l'annotation passe sous ce qu'elle désigne : la flèche « droite » pointe vers le haut */
@media (max-width:640px){
  .hm .hm-note.hm-note-mobile-haut{flex-direction:column;align-items:flex-start}
  .hm .hm-note.hm-note-mobile-haut svg{transform:rotate(-90deg);margin-left:.2em}
}