/* théa.fr — fondation partagée (tokens, reset, curseur)
   Généré depuis les <style> inline. Aucune étape de build. */

:root{
  --dark:#46585c;--light:#c7d4ba;--accent:#c7d4ba;--text-on-dark:#c7d4ba;
  --text-muted:rgba(199,212,186,0.4);--rule:rgba(199,212,186,0.18);--rule-strong:#c7d4ba;
  --nav-avail-bg:var(--light);--nav-avail-color:var(--dark);
  --cursor-color:#c7d4ba;--cursor-hover:#d9b4be;
  --glass:rgba(70,88,92,0.62);--glass-border:rgba(199,212,186,0.22);
}
body.day{
  --dark:#f5f0ee;--light:#d9b4be;--accent:#1a1a1a;--text-on-dark:#1a1a1a;
  --text-muted:rgba(26,26,26,0.35);--rule:rgba(26,26,26,0.12);--rule-strong:#1a1a1a;
  --nav-avail-bg:#d9b4be;--nav-avail-color:#f5f0ee;
  --cursor-color:#d9b4be;--cursor-hover:#c7d4ba;
  --glass:rgba(245,240,238,0.66);--glass-border:rgba(26,26,26,0.12);
}
html[data-day] body,html[data-day] nav{
  --dark:#f5f0ee;--light:#d9b4be;--accent:#1a1a1a;--text-on-dark:#1a1a1a;
  --text-muted:rgba(26,26,26,0.35);--rule:rgba(26,26,26,0.12);--rule-strong:#1a1a1a;
  --nav-avail-bg:#d9b4be;--nav-avail-color:#f5f0ee;
  --glass:rgba(245,240,238,0.66);--glass-border:rgba(26,26,26,0.12);
}
body,nav,footer{transition:background-color 0.35s ease,color 0.35s ease,border-color 0.35s ease;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* scroll-padding-top : la nav est fixe, donc toute cible d'ancre
   (#work, #about, #contact) et tout scrollIntoView atterrissait
   sous la barre. 80px = 48 de hauteur + 12 de décrochage + marge. */
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--dark);color:var(--text-on-dark);-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}a:hover{color:var(--text-muted);}
img{display:block;width:100%;height:100%;object-fit:cover;}

/* Cursor */
@media(hover:hover){*{cursor:none!important;}}
@media(hover:none){#custom-cursor,#hover-cursor{display:none!important;}}
#custom-cursor{position:fixed;width:32px;height:32px;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform,left,top;}
#custom-cursor svg,[data-arrow] svg{transition:fill 0.35s ease;}

/* ── Cursor pulse on hover ── */
#hover-cursor{position:fixed;width:40px;height:40px;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);mix-blend-mode:difference;background:var(--cursor-hover);opacity:0;transition:opacity 0.18s,background 0.35s;will-change:transform,left,top;}
#hover-cursor.active{opacity:1;animation:cursor-pulse 0.9s ease-in-out infinite;}
@keyframes cursor-pulse{0%,100%{width:38px;height:38px;}50%{width:52px;height:52px;}}

/* ── NAV — identique sur toutes les pages ─────────────────
   Grille 3 colonnes : liens | logo centré | actions.
   Existait en double, avec deux structures différentes
   (grid ici, flex sur project.html) et des liens qui ne
   pointaient pas au même endroit. Une seule version. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--dark);border-bottom:1px solid var(--rule-strong);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;padding:0 40px;}
.nav-left{display:flex;gap:28px;}
nav a{font-size:13px;letter-spacing:-0.3px;color:var(--text-muted);transition:color 0.2s;}
nav a:hover{color:var(--text-on-dark);}
.nav-logo{font-size:16px;letter-spacing:-0.8px;font-weight:400;color:var(--text-on-dark);text-align:center;}
.nav-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.nav-avail{font-size:11px;letter-spacing:0.2px;color:var(--nav-avail-color);background:var(--nav-avail-bg);padding:4px 12px;border-radius:99px;}
.mode-toggle{font-size:11px;color:var(--text-on-dark);background:transparent;border:1px solid var(--rule-strong);padding:4px 12px;border-radius:99px;transition:background 0.2s,color 0.2s,border-color 0.2s;}
.mode-toggle:hover{background:var(--light);color:var(--dark);border-color:var(--light);}
.nav-toggle{display:none;background:none;border:none;flex-direction:column;gap:5px;padding:4px;width:32px;height:32px;align-items:center;justify-content:center;}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text-on-dark);border-radius:2px;}

@media(max-width:700px){
  nav{grid-template-columns:1fr auto auto;padding:0 20px;height:48px;gap:10px;}
  .nav-logo{text-align:left;}
  .nav-left{display:none;}
  .nav-avail{display:none;}
  .nav-right{gap:8px;}
  .mode-toggle{font-size:10px;padding:3px 10px;}
  .nav-toggle{display:flex;position:static;width:28px;height:28px;align-items:center;justify-content:center;padding:0;flex-shrink:0;}
  .nav-toggle span{width:16px;height:1.5px;}
  nav.open .nav-left{display:flex;flex-direction:column;position:fixed;top:48px;left:0;right:0;background:var(--dark);border-bottom:1px solid var(--rule-strong);padding:28px 24px 32px;gap:22px;z-index:99;}
  nav.open .nav-left a{font-size:20px;letter-spacing:-0.8px;color:var(--text-on-dark);}
}

/* ── Nav flottante ────────────────────────────────────────
   Collée en haut à l'arrivée, puis « décrochée » au scroll :
   elle rétrécit sur les côtés, s'arrondit et passe en verre
   dépoli. #main-nav (et non nav) pour passer devant les
   règles de index.css / project.css, chargées après.
   Seules des propriétés animables changent (top, left, right,
   border-radius) : pas de saut au décrochage. */
#main-nav{
  margin-inline:0;
  /* état de départ du flou : sans ça il n'y a rien à interpoler
     et le verre apparaît d'un coup au décrochage. */
  -webkit-backdrop-filter:blur(0px) saturate(100%);
  backdrop-filter:blur(0px) saturate(100%);
  /* easeOutQuint : départ franc, arrivée très amortie. */
  transition:top .5s cubic-bezier(.22,1,.36,1),
             margin .5s cubic-bezier(.22,1,.36,1),
             border-radius .5s cubic-bezier(.22,1,.36,1),
             backdrop-filter .4s ease,
             -webkit-backdrop-filter .4s ease,
             box-shadow .4s ease,
             background-color .35s ease,
             border-color .35s ease;
}
#main-nav.floating{
  top:12px;
  /* 16 px de marge, puis centrage une fois passé 1160 px.
     margin s'anime, contrairement à une largeur en auto. */
  margin-inline:max(16px, calc((100% - 1160px) / 2));
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 10px 34px rgba(0,0,0,.16);
}

/* Sans backdrop-filter, le fond translucide rendrait le texte
   illisible : on repasse en opaque. */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  #main-nav.floating{background:var(--dark);}
}

/* Menu mobile ouvert : les overlays de index.css / project.css
   sont ancrés au bord haut (top:48px / top:36px). On re-colle
   donc la nav pendant l'ouverture pour ne pas casser ce calcul. */
/* Pendant l'ouverture du menu, pas d'animation : la barre se
   recolle instantanément pour que l'overlay reste d'aplomb. */
#main-nav.open{transition:none;}
#main-nav.floating.open{
  top:0; margin-inline:0;
  border-radius:0;
  background:var(--dark);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
  border-color:transparent;
  border-bottom:1px solid var(--rule-strong);
}

@media(prefers-reduced-motion:reduce){
  #main-nav{transition:background-color .35s ease,border-color .35s ease;}
}

/* ── Bandeau cookies ──────────────────────────────────────
   Vivait uniquement dans index.css : project.html et 404.html
   affichaient le même balisage sans aucun style. Ici pour les
   trois pages, en verre dépoli comme la nav. */
#consent-banner{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9000;
  width:calc(100% - 80px);max-width:520px;
  padding:20px 22px;
  border:1px solid var(--glass-border);
  border-radius:16px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 12px 44px rgba(0,0,0,.22);
  font-family:'Inter',system-ui,sans-serif;
}
.consent-title{font-size:13px;font-weight:500;color:var(--text-on-dark);margin-bottom:6px;letter-spacing:-0.2px;}
.consent-text{font-size:12px;color:var(--text-muted);line-height:1.55;margin-bottom:16px;}
.consent-btns{display:flex;gap:8px;flex-wrap:wrap;}
.consent-btn{font-family:inherit;font-size:12px;padding:7px 16px;border-radius:99px;border:1px solid var(--rule-strong);background:transparent;color:var(--text-on-dark);transition:background 0.2s,color 0.2s;}
.consent-btn:hover{background:var(--rule);}
.consent-btn.accept{background:var(--light);color:var(--dark);border-color:var(--light);font-weight:500;}

@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  #consent-banner{background:var(--dark);}
}

@media(max-width:700px){
  #consent-banner{width:calc(100% - 20px);bottom:10px;padding:16px;}
  .consent-btns{flex-direction:column;}
  .consent-btn{text-align:center;}
}