/* ═══════════════════════════════════════════════════════
   PHIOTIS — site-common.css
   Shared CSS: reset, vars, nav, footer, light theme,
   burger, mobile nav, skip-link, theme-toggle, responsive
   Extracted S2 (D29) — élimine ~2-3KB de duplication/page
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Vars (dark) ── */
:root{--bg0:#12161F;--bg1:#181D28;--bg2:#1E2535;--bg3:#242C40;--border:#2A3450;--border2:#344060;--txt0:#EDE8DF;--txt1:#A8A096;--txt2:#8490A4;--gold:#C9A84C;--gold2:#E2C97E;--gold3:#8B6B2A;--gold-lt:rgba(201,168,76,.08);--green:#4AAF85;--red:#C96B6B;--amber:#C99A4A;--blue:#6B93C9}

/* ── Vars (light) ── */
html[data-theme="light"]{--bg0:#F5F2EC;--bg1:#EDE8DF;--bg2:#E6E1D8;--bg3:#DDD8CF;--border:#C9C2B5;--border2:#B8B0A4;--txt0:#1E2535;--txt1:#5E6478;--txt2:#8490A4;--gold:#8B6B2A;--gold2:#6B4E1A;--gold3:#C9A84C;--gold-lt:rgba(139,107,42,.08);--green:#2E8B67;--red:#B85555;--amber:#A07830;--blue:#4A6F9E}

/* ── Body base ── */
body{font-family:'DM Sans',sans-serif;background:var(--bg0);color:var(--txt0);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold2)}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;background:rgba(18,22,31,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(42,52,80,.5);transition:all .3s}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;text-decoration:none}
.nav-logo .phi{color:var(--gold);font-style:italic;font-size:30px}
.nav-logo .hios{color:var(--txt0)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-link{font-size:13px;color:var(--txt1);transition:color .2s;font-weight:500;text-decoration:none}
.nav-link:hover{color:var(--txt0)}
.nav-lang{font-size:12px;color:var(--txt2);font-weight:600;letter-spacing:.5px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;cursor:default;user-select:none;white-space:nowrap}
.nav-cta{padding:9px 22px;background:var(--gold);color:var(--bg0);border-radius:8px;font-size:13px;font-weight:700;transition:all .2s;text-decoration:none}
.nav-cta:hover{background:var(--gold2);color:var(--bg0)}
html[data-theme="light"] .nav{background:rgba(245,242,236,.95)!important;border-bottom-color:rgba(201,194,181,.5)!important}
html[data-theme="light"] .nav-cta{color:#F5F2EC!important}

/* ── Burger mobile ── */
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;border:none;background:transparent;padding:4px;border-radius:5px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--txt1);border-radius:2px;transition:all .3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Nav mobile ── */
.nav-mob{display:none;flex-direction:column;gap:0;background:var(--bg1);border-bottom:1px solid var(--border);padding:8px 0;position:fixed;top:0;left:0;right:0;z-index:99;padding-top:56px;max-height:100vh;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.nav-mob.open{display:flex}
.nav-mob-link{padding:14px 20px;font-size:15px;color:var(--txt1);font-weight:500;border-bottom:1px solid var(--border);text-decoration:none;min-height:44px;display:flex;align-items:center}
.nav-mob-link:hover,.nav-mob-link:active{color:var(--txt0);background:rgba(237,232,223,.05)}
.nav-mob-link.active{color:var(--gold)}
.nav-mob-cta{margin:10px 16px 14px;padding:14px;background:var(--gold);color:var(--bg0);border-radius:8px;font-size:15px;font-weight:700;text-align:center;text-decoration:none;min-height:48px;display:flex;align-items:center;justify-content:center}

/* ── Footer ── */
.footer{padding:48px 24px calc(48px + env(safe-area-inset-bottom,0px));background:var(--bg1);border-top:1px solid var(--border);text-align:center}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;margin-bottom:12px}
.footer-logo .phi{color:var(--gold);font-style:italic}
.footer-links{display:flex;gap:24px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.footer-link{font-size:12px;color:var(--txt2);transition:color .2s;text-decoration:none}
.footer-link:hover{color:var(--txt0)}
.footer-copy{font-size:12px;color:var(--txt2)}
.footer-made{font-size:12px;color:var(--txt2);margin-top:8px}
html[data-theme="light"] .footer,html[data-theme="light"] .footer-section{background:var(--bg1)!important}

/* ── Theme toggle ── */
.theme-toggle{width:36px;height:36px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--txt1);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.theme-toggle:hover{border-color:rgba(201,168,76,.35);color:var(--gold);background:var(--gold-lt)}

/* ── Skip link (a11y) ── */
.skip-link{position:absolute;top:-100%;left:16px;padding:8px 16px;background:#C9A84C;color:#12161F;border-radius:6px;font-size:14px;font-weight:600;z-index:999;text-decoration:none;transition:top .2s}
.skip-link:focus{top:8px}

/* ── Common page layout ── */
.page{padding:120px 24px 40px;max-width:960px;margin:0 auto}
.page-tag{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-weight:700;margin-bottom:12px;font-family:'DM Mono',monospace}
.page-title{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:300;margin-bottom:12px;line-height:1.2}
.page-sub{font-size:15px;color:var(--txt1);line-height:1.7;margin-bottom:48px;max-width:560px}

/* ── Buttons ── */
.btn-primary{display:inline-block;padding:14px 32px;background:var(--gold);color:var(--bg0);border-radius:10px;font-size:15px;font-weight:700;transition:all .2s;border:none;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center}
.btn-primary:hover{background:var(--gold2);color:var(--bg0);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,.25)}
.btn-secondary{display:inline-block;padding:14px 32px;background:transparent;color:var(--txt0);border-radius:10px;font-size:15px;font-weight:500;border:1.5px solid var(--border2);transition:all .2s;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center}
.btn-secondary:hover{border-color:rgba(201,168,76,.3);color:var(--gold)}

/* ── Section helpers ── */
.section-tag{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-weight:700;margin-bottom:12px;font-family:'DM Mono',monospace}
.section-title{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300;line-height:1.2;margin-bottom:16px}
.section-sub{font-size:15px;color:var(--txt1);line-height:1.7;max-width:560px;margin-bottom:48px}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* R2/S1: Tablette — 1024px */
@media(max-width:1024px){
  .nav{padding:14px 20px}
  .nav-links{gap:16px}
  .nav-lang{display:none}
  .nav-cta{padding:8px 16px;font-size:12px}
  .page{padding:110px 20px 40px}
  .page-title{font-size:34px}
  .section-title{font-size:32px}
}

/* R3: Mobile — 768px */
@media(max-width:768px){
  .nav{padding:12px 16px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .page-title{font-size:28px}
  .section-title{font-size:26px}
  .footer-links{flex-direction:column;gap:12px;align-items:center}
  /* iOS zoom fix — all site form inputs ≥ 16px */
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],textarea,select{font-size:16px!important}
  /* Tables — horizontal scroll on mobile */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
  table{min-width:auto}
  /* Touch targets — CTA buttons */
  .btn-primary,.btn-secondary{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
}

/* Très petit écran — 480px */
@media(max-width:480px){
  .page{padding:90px 14px 32px}
  .page-title{font-size:24px}
  .btn-primary,.btn-secondary{padding:12px 24px;font-size:14px;width:100%;text-align:center}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .btn-primary:hover,.btn-secondary:hover{transform:none;box-shadow:none}
  .nav-burger span{transition:none}
}