/* =========================================================
   HOOLALA.TM — SYSTÈME DE DESIGN COMMUN (pages refaites)
   Blanc dominant · mode sombre automatique · préfixe hd-
   Chaque page garde ensuite son propre design (préfixe de page).
   ========================================================= */
:root{
  --hd-bg:#ffffff;
  --hd-bg-2:#f6f6f4;
  --hd-fg:#0a0a0a;
  --hd-fg-2:#5f5f5f;
  --hd-line:rgba(10,10,10,.12);
  --hd-line-2:rgba(10,10,10,.85);
  --hd-glass:rgba(255,255,255,.72);
  --hd-glass-line:rgba(10,10,10,.08);
  --hd-shadow:0 24px 60px rgba(10,10,10,.12);
  --hd-shadow-s:0 10px 30px rgba(10,10,10,.08);
  --hd-sans:"Inter Tight",system-ui,-apple-system,sans-serif;
  --hd-serif:"Instrument Serif",Georgia,serif;
  --hd-pad:clamp(16px,3.2vw,48px);
  --hd-max:1600px;
  --hd-ease:cubic-bezier(.16,1,.3,1);
  --hd-hdr:var(--hdr-height,68px);
}
@media (prefers-color-scheme:dark){
  :root{
    --hd-bg:#0a0a0a; --hd-bg-2:#121212;
    --hd-fg:#f5f5f3; --hd-fg-2:#a3a3a3;
    --hd-line:rgba(245,245,243,.12); --hd-line-2:rgba(245,245,243,.85);
    --hd-glass:rgba(10,10,10,.6); --hd-glass-line:rgba(245,245,243,.1);
    --hd-shadow:0 30px 70px rgba(0,0,0,.6); --hd-shadow-s:0 10px 30px rgba(0,0,0,.4);
  }
}

/* mobile.css met overflow-x:hidden sur html ET body : body devient alors un conteneur
   de défilement et position:sticky ne fonctionne plus. clip garde l'absence de
   défilement horizontal sans créer de conteneur (les verrouillages inline restent prioritaires). */
html,body{overflow-x:clip}

.hd-page,.hd-page *{box-sizing:border-box}
.hd-page{background:var(--hd-bg);color:var(--hd-fg);font:400 16px/1.5 var(--hd-sans);-webkit-font-smoothing:antialiased;overflow:clip}
.hd-page img{display:block;max-width:100%}
.hd-page a{color:inherit;text-decoration:none}
.hd-page button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.hd-page :focus-visible{outline:2px solid var(--hd-fg);outline-offset:3px}
.hd-wrap{width:min(var(--hd-max),100% - var(--hd-pad)*2);margin-inline:auto}
.hd-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.hd-it{font-family:var(--hd-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.hd-muted{color:var(--hd-fg-2)}

/* Étiquette de section : (01) Titre ———— info */
.hd-kick{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;margin-bottom:clamp(28px,4vw,52px);border-bottom:1px solid var(--hd-line-2);font:500 12px/1.3 var(--hd-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--hd-fg-2)}

/* Pilules */
.hd-pill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;background:var(--hd-fg);color:var(--hd-bg) !important;font:600 14px/1 var(--hd-sans);white-space:nowrap;transition:transform .25s var(--hd-ease),opacity .25s,background .25s,color .25s}
.hd-pill:hover{transform:translateY(-1px);opacity:.9}
.hd-pill-ic{display:grid;place-items:center;width:28px;height:28px;margin-right:-10px;border-radius:50%;background:var(--hd-bg);color:var(--hd-fg)}
.hd-pill--o{background:transparent;color:var(--hd-fg) !important;border:1px solid var(--hd-line-2)}
.hd-pill--o:hover{background:var(--hd-fg);color:var(--hd-bg) !important;opacity:1}

/* Révélation mot par mot (JS : hoolala-design.js) */
.hd-split .hd-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hd-split .hd-w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--hd-ease);transition-delay:calc(var(--i) * 55ms)}
.hd-split.is-in .hd-w>span{transform:none}

/* Apparition au défilement */
.hd-rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--hd-ease),transform 1s var(--hd-ease)}
.hd-rv.is-in{opacity:1;transform:none}

/* Curseur personnalisé (souris uniquement) */
.hd-cursor{position:fixed;left:0;top:0;z-index:9500;display:grid;place-items:center;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:width .35s var(--hd-ease),height .35s var(--hd-ease),margin .35s var(--hd-ease),opacity .3s}
.hd-cursor span{font:600 11px var(--hd-sans);letter-spacing:.06em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.hd-cursor.is-big{width:84px;height:84px;margin:-42px 0 0 -42px}
.hd-cursor.is-big span{opacity:1}
.hd-cursor.is-ready{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hd-page *,.hd-page *::before,.hd-page *::after{animation:none !important;transition:none !important}
  .hd-split .hd-w>span,.hd-rv{transform:none;opacity:1}
}

/* Plus de rond « Voir » qui suit la souris, sur tout le site. */
.hd-cursor,[data-hd-cursor],.hp4-cursor{display:none !important}