/* ════════════════════════════════════════════════════════
   Reset responsive defensif (toutes pages)
   ════════════════════════════════════════════════════════ */
html,body{overflow-x:hidden;max-width:100vw}
img:not([width]),video:not([width]),iframe:not([width]){max-width:100%;height:auto}

/* ════════════════════════════════════════════════════════
   Header fixed (descend avec le scroll, toujours visible) +
   barre de progression scroll en bas du header.
   La largeur de .hdr::after suit --scroll-progress (0..1)
   gere par theme.js (rAF + scroll passive)
   ════════════════════════════════════════════════════════ */
html{scroll-padding-top:74px}
body{padding-top:66px}
.hdr{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:50 !important;
  background:rgba(10,10,10,0.72) !important;
  backdrop-filter:blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
:root.light .hdr{
  background:rgba(250,247,242,0.82) !important;
  border-bottom-color:rgba(26,26,26,0.10) !important;
}
.hdr::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  width:100%;
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,#F97316,#FB923C);
  box-shadow:0 0 6px rgba(249,115,22,0.45);
  pointer-events:none;
  will-change:transform;
  transition:transform .08s linear;
  z-index:1;
}
@media (prefers-reduced-motion: reduce){
  .hdr::after{transition:none !important}
}

/* ════════════════════════════════════════════════════════
   Theme variables - Light mode overrides
   Palette editoriale : blanc casse + noir profond, accent orange conserve
   ════════════════════════════════════════════════════════ */
:root.light{
  --bg:#FAF7F2;
  --bg-card:#FFFFFF;
  --bg-card-hover:#F2EEE6;
  --bg-1:#FFFFFF;
  --bg-2:#F2EEE6;
  --fg:#1A1A1A;
  --fg-1:#1A1A1A;
  --fg-2:#3A3A3F;
  --fg-3:#6B6B70;
  --bd-soft:rgba(26,26,26,0.06);
  --bd:rgba(26,26,26,0.12);
  --bd-strong:rgba(26,26,26,0.20);
}

/* Header & mobile nav */
:root.light .hdr{background:rgba(250,247,242,0.82);border-bottom-color:rgba(26,26,26,0.08);}
:root.light .nav.open{background:rgba(250,247,242,0.96);}
:root.light .strip-btn{background:rgba(26,26,26,0.025);}
:root.light .chip{background:rgba(26,26,26,0.03);}
:root.light .chip:hover{background:rgba(26,26,26,0.05);}
:root.light .divider .line{background:linear-gradient(90deg,transparent,rgba(26,26,26,0.18),transparent);}

/* Subtle grid overlays */
:root.light body::before{opacity:.04;mix-blend-mode:multiply;}

/* ===== Bloc Elise (index.html) - background hardcode en dark : on flip TOUT en clair ===== */
:root.light .elise{
  background:linear-gradient(135deg,#FFFFFF,#F2EEE6) !important;
  border-color:rgba(249,115,22,0.28) !important;
}
:root.light .elise::before{background:linear-gradient(90deg,transparent,#F97316,transparent) !important;opacity:.7;}
:root.light .elise::after{background:radial-gradient(closest-side,rgba(249,115,22,0.10),transparent 70%) !important;}
:root.light .elise h3{color:#1A1A1A !important;}
:root.light .elise p{color:#3A3A3F !important;}
:root.light .elise-label{color:#C2410C !important;}

/* Bloc cards index */
:root.light .card{background:linear-gradient(180deg,rgba(255,255,255,1),rgba(242,238,230,0.6)) !important;}
:root.light .card.card-primary{background:linear-gradient(180deg,rgba(249,115,22,0.08),rgba(255,255,255,0.6)) !important;}
:root.light .card.card-orange{background:linear-gradient(180deg,rgba(249,115,22,0.08),rgba(255,255,255,0.6)) !important;}
:root.light .card.card-green{background:linear-gradient(180deg,rgba(16,185,129,0.06),rgba(255,255,255,0.6)) !important;}
:root.light .card-title{color:var(--fg) !important;}
:root.light .card-sub{color:var(--fg-2) !important;}

/* Menu burger mobile : fond clair, texte sombre */
:root.light .mobile-menu{background:rgba(250,247,242,0.96) !important;}
:root.light .mobile-menu a:not(.in-pulse){color:var(--fg);}
:root.light .mobile-menu a:not(.in-pulse):hover{color:var(--orange);}
:root.light .mobile-menu .mclose{color:var(--fg);}

/* Modal CV-manquant (mon-parcours) - flip en clair */
:root.light .cv-miss-overlay{background:rgba(26,26,26,0.5) !important;}
:root.light .cv-miss .card{color:var(--fg) !important;background:#FFFFFF !important;}
:root.light .cv-miss h4{color:var(--fg) !important;}
:root.light .cv-miss p{color:var(--fg-2) !important;}
:root.light .cv-miss .x{color:var(--fg-2) !important;}

/* Modal Asia Food (mon-parcours) */
:root.light .af-modal-overlay{background:rgba(26,26,26,0.55) !important;}
:root.light .af-modal{background:#FFFFFF !important;color:var(--fg) !important;}
:root.light .af-title{color:var(--fg) !important;}
:root.light .af-subtitle, :root.light .af-version-text{color:var(--fg-2) !important;}
:root.light .af-version-status{color:var(--fg-3) !important;}
:root.light .af-version{background:#F2EEE6 !important;}
:root.light .af-close{color:var(--fg-2) !important;}

/* Modal video (Elise) - reste en sombre car player video */
/* On force juste un meilleur contraste de fond */

/* Templates */
:root.light .templates-shell{background:rgba(26,26,26,0.025);}
:root.light .card-media{background:linear-gradient(135deg,#F2EEE6,#FFFFFF) !important;border-bottom-color:rgba(26,26,26,0.08) !important;}

/* Footer */
:root.light footer{background:transparent;}
:root.light .ft-nav, :root.light .foot-l, :root.light .ft-row{color:var(--fg-3) !important;}

/* Hub cards contact */
:root.light .hub-card{background:#FFFFFF !important;}
:root.light .hub-title{color:var(--fg) !important;}
:root.light .hub-desc{color:var(--fg-2) !important;}

/* Feat cards mission-freelance */
:root.light .feat-card,:root.light .price-card,:root.light .proj-card,:root.light .real-card,:root.light .diff-item,:root.light .guarantees,:root.light details.faq-item,:root.light .bridge-card,:root.light .profile-card,:root.light .action-btn,:root.light .feat-title,:root.light .price-card-title,:root.light .proj-title,:root.light .real-title,:root.light .diff-title{color:var(--fg)}
:root.light .feat-card,:root.light .price-card,:root.light .proj-card,:root.light .real-card,:root.light .diff-item,:root.light .bridge-card,:root.light details.faq-item,:root.light .action-btn{background:#FFFFFF !important;}
:root.light .feat-desc,:root.light .price-card-desc,:root.light .proj-desc,:root.light .real-desc,:root.light .diff-desc,:root.light .bridge-desc{color:var(--fg-2) !important;}
:root.light .guar-text{color:var(--fg) !important;}
:root.light .guarantees{background:#FFFFFF !important;}
:root.light details.faq-item summary{color:var(--fg) !important;}
:root.light details.faq-item .faq-body{color:var(--fg-2) !important;}
:root.light details.faq-item[open]{background:rgba(249,115,22,0.04) !important;}
:root.light .profile-card{background:linear-gradient(180deg,#FFFFFF,rgba(242,238,230,0.6)) !important;}
:root.light .profile-list dd{color:var(--fg) !important;}

/* Quote section index */
:root.light .quote h2{color:var(--fg) !important;}
:root.light .quote p{color:var(--fg-2) !important;}

/* Stats */
:root.light .num{color:var(--fg) !important;}

/* Pages legales */
:root.light .info-block{background:#FFFFFF !important;}
:root.light p,:root.light li{color:var(--fg-2) !important;}
:root.light h1,:root.light h2,:root.light h3{color:var(--fg);}
:root.light p strong,:root.light li strong{color:var(--fg) !important;}

/* 404 + offline */
:root.light .gcard{background:#FFFFFF !important;}
:root.light .gtitle{color:var(--fg) !important;}
:root.light .gdesc{color:var(--fg-2) !important;}
:root.light .glow::before{background:radial-gradient(closest-side,rgba(249,115,22,0.18),transparent 70%) !important;}

/* Form fields & cards in contact / templates / freelance / recruteur */
:root.light input,
:root.light textarea,
:root.light select{
  background:#F2EEE6 !important;
  color:var(--fg) !important;
  border-color:var(--bd) !important;
}
:root.light input::placeholder,
:root.light textarea::placeholder{color:var(--fg-3) !important;}
:root.light .check-box,:root.light .rgpd{background:#F2EEE6 !important;}
:root.light .check-box span,:root.light .consent-row span{color:var(--fg) !important;}
:root.light .rgpd p{color:var(--fg-2) !important;}
:root.light .field input:focus,:root.light .field textarea:focus,:root.light .field select:focus{background:rgba(249,115,22,0.04) !important;border-color:rgba(249,115,22,0.55) !important;}
:root.light .submit-btn{color:#fff !important;}

/* Field labels and small text */
:root.light .field label,:root.light .field .field-label-text,:root.light .field .opt{color:var(--fg-2) !important;}
:root.light .form-hint{color:var(--fg-3) !important;}

/* Tags / chips templates */
:root.light .tag{background:rgba(26,26,26,0.04) !important;color:var(--fg-2) !important;}

/* Toast / popup tpl */
:root.light .tpl-modal-card{background:#FFFFFF !important;color:var(--fg) !important;}
:root.light .tpl-option{background:rgba(26,26,26,0.025) !important;}
:root.light .tpl-option-bullets li{color:var(--fg-2) !important;}
:root.light .tpl-trans{background:rgba(26,26,26,0.025) !important;color:var(--fg-2) !important;}

/* Selection */
:root.light ::selection{background:var(--orange);color:#FFFFFF;}

/* Skip link reste lisible */
:root.light .skip-link{color:#FFFFFF !important;}

/* CV print page reste neutre - rien a flip car deja claire */

/* Smooth transition on theme switch */
html, body,
.hdr, .nav.open,
.proj, .chip, .strip-btn,
.glass-card, .card,
input, textarea, select, button{
  transition: background-color .25s var(--ease,ease), color .25s var(--ease,ease), border-color .25s var(--ease,ease);
}

/* ════════════════════════════════════════════════════════
   Theme toggle button (injected in .hdr .nav)
   ════════════════════════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:auto;
  min-width:44px;
  min-height:44px;
  padding:4px 10px;
  margin-left:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--bd-soft);
  border-radius:14px;
  color:var(--fg-2);
  cursor:pointer;
  transition: background .25s var(--ease,ease), color .25s var(--ease,ease), border-color .25s var(--ease,ease), transform .25s var(--ease,ease), box-shadow .25s var(--ease,ease);
}
.theme-toggle-label{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  line-height:1;
  color:inherit;
  pointer-events:none;
  user-select:none;
  margin-top:2px;
}
.theme-toggle:hover{
  background:rgba(249,115,22,0.08);
  color:var(--orange);
  border-color:rgba(249,115,22,0.30);
  transform:translateY(-1px);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
.theme-toggle svg{
  width:18px;
  height:18px;
  display:block;
  pointer-events:none;
}
:root.light .theme-toggle{background:rgba(0,0,0,0.03);}
:root.light .theme-toggle:hover{background:rgba(249,115,22,0.10);}

/* Two icons, one shown per theme */
.theme-toggle .icon-bulb-on{display:none;}
.theme-toggle .icon-bulb-off{display:block;}
:root.light .theme-toggle .icon-bulb-on{display:block;}
:root.light .theme-toggle .icon-bulb-off{display:none;}

/* ════════════════════════════════════════════════════════
   La lumiere : petit bouton circulaire flottant juste au-dessus
   de la tete du logo (le grand cercle a gauche).
   Position calculee depuis le bord gauche du header :
   padding-left du .hdr + offset de la tete (cx=22 / viewBox=100, logo=26px)
   = 32 + (26 * 0.22) ≈ 38px sur desktop
   ════════════════════════════════════════════════════════ */
.hdr > .theme-toggle{
  position:absolute;
  top:50%;
  left:48%;
  transform:translate(-50%,-50%);
  width:auto;height:auto;
  min-width:0;min-height:0;
  padding:0;margin:0;
  border:0;
  background:transparent;
  border-radius:6px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  color:var(--orange);
  z-index:51;
  cursor:pointer;
  transition:transform .25s ease;
}
.hdr > .theme-toggle svg{
  width:20px;height:20px;margin:0;
  filter:drop-shadow(0 0 5px var(--orange));
  transition:filter .3s ease;
}
.hdr > .theme-toggle .theme-toggle-label{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;letter-spacing:0.8px;text-transform:uppercase;
  line-height:1;margin:0;color:var(--fg-3);
  pointer-events:none;user-select:none;
}
.hdr > .theme-toggle:hover{
  transform:translate(-50%,-50%) translateY(-1px);
}
.hdr > .theme-toggle:hover svg{
  filter:drop-shadow(0 0 8px var(--orange));
}
.hdr > .theme-toggle:hover .theme-toggle-label{color:var(--orange)}
.hdr > .theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
:root.light .hdr > .theme-toggle{background:transparent}

/* Mobile : ne touche pas a la version mobile (le toggle reste cache, le mobile-menu a son propre toggle) */
@media (max-width:768px){
  .hdr > .theme-toggle{display:none}
}

/* Toggle injected in the mobile-menu overlay (visible when burger is open) */
.theme-toggle-mobile{
  min-width:64px;
  min-height:64px;
  width:auto;
  padding:10px 16px;
  margin:8px 0 0;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(250,250,250,0.85);
  border-radius:18px;
  gap:4px;
}
.theme-toggle-mobile:hover{
  background:rgba(249,115,22,0.12);
  color:var(--orange);
  border-color:rgba(249,115,22,0.40);
}
.theme-toggle-mobile svg{width:22px;height:22px;}
.theme-toggle-mobile .theme-toggle-label{font-size:11px;letter-spacing:1.6px;margin-top:4px}
:root.light .theme-toggle-mobile{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.12);
  color:#0A0A0A;
}
:root.light .theme-toggle-mobile:hover{
  background:rgba(249,115,22,0.10);
  color:var(--orange);
  border-color:rgba(249,115,22,0.40);
}

/* ===== UNIFIED FOOTER (toutes les pages) =====
   charge apres les <style> inline donc override sans !important
   Reference : la page index.html (portfolio) */
footer{
  display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:32px;
  border-top:1px solid var(--bd-soft);
  max-width:980px;margin:36px auto 0;
  text-align:center;
}
.ft-nav{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;line-height:1;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--fg-3)}
.ft-nav a{color:var(--fg-3);text-decoration:none;transition:color .2s ease}
.ft-nav a:hover{color:var(--orange)}
.ft-nav a[aria-current="page"]{color:var(--orange)}
.ft-nav a.in-pulse:hover{color:#fff}

footer .in-pulse{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;
  color:#0A66C2;background:#fff;border:1px solid #0A66C2;
  line-height:1;vertical-align:middle;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
footer .in-pulse svg{width:13px;height:13px;fill:currentColor}
footer .in-pulse:hover,footer .in-pulse:focus-visible{color:#fff;background:#0A66C2;transform:translateY(-1px)}
footer .in-pulse::after{
  content:"";position:absolute;inset:-1px;border-radius:7px;
  border:1px solid #0A66C2;pointer-events:none;
  animation:in-ping-ft 2s ease infinite;
}
@keyframes in-ping-ft{0%{opacity:.75;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion:reduce){footer .in-pulse::after{animation:none;display:none}}
.ft-sign{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--fg-3);
  text-align:center;line-height:1.6;max-width:760px;
}
.ft-legal{
  display:flex;gap:18px;flex-wrap:wrap;
  justify-content:center;align-items:center;
  font-family:"Inter",system-ui,-apple-system,Arial,sans-serif;
  font-size:12px;color:var(--fg-3);text-align:center;
}
.ft-legal a, .ft-legal button{color:var(--fg-3);transition:color .25s ease,border-color .25s ease;text-decoration:none}
.ft-legal a, .ft-legal button{text-transform:lowercase}
.ft-legal .share-btn{color:var(--fg) !important;border-bottom:1px dotted rgba(255,255,255,0.32)}
.ft-legal .bug-link{border-bottom:0}
.ft-legal .share-btn{background:none;border-top:0;border-left:0;border-right:0;font:inherit;cursor:pointer;padding:0 0 1px}
.ft-legal a:hover, .ft-legal button:hover{color:var(--orange);border-bottom-color:var(--orange)}
.ft-legal .share-btn:hover{color:var(--orange) !important}

:root.light .ft-sign,:root.light .ft-legal,:root.light .ft-legal a,:root.light .ft-legal button{color:var(--fg-3) !important}
:root.light .ft-legal .share-btn{color:var(--fg) !important;border-bottom-color:rgba(0,0,0,0.32) !important}
:root.light .ft-legal .bug-link{border-bottom-color:rgba(0,0,0,0.16) !important}
:root.light .ft-legal a:hover,:root.light .ft-legal button:hover{color:var(--orange) !important;border-bottom-color:var(--orange) !important}
:root.light .ft-legal .share-btn:hover{color:var(--orange) !important}