/* ==========================================================================
   static/css/global.css — Styles globaux : reset doux, typo, couleurs, thèmes,
   layout de base (.page), utilitaires. NE MODIFIE PAS header/footer.
   ========================================================================== */

/* ===== Reset doux / base ================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ===== Couleurs & thèmes (valeurs par défaut) ============================ */
:root{
  /* Palette générique (peut être reprise par tout le site) */
  --bg: #0f0f12;            /* fond “noir jamais pur” */
  --fg: #e9e7e1;            /* texte principal */
  --muted: #b8b3a7;         /* texte atténué */
  --acc: #b39c6a;           /* accent doré patiné */
  --line: #2a2a2f;          /* bordures discrètes */

  /* Layout global contenu */
  --page-x: clamp(16px, 4vw, 28px); /* padding horizontal page */
  --page-y: clamp(16px, 3vw, 26px); /* padding vertical page */
  --wrap: 1080px;                   /* largeur max des blocs “wrap” */
  --radius: 18px;                   /* rayon global pour panneaux */

  /* Typo */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: Georgia, "EB Garamond", "Times New Roman", serif;

  /* Lisibilité / focus */
  --focus: color-mix(in oklab, var(--acc) 30%, transparent);

  /* Sécurité mobile (iPhone bords) */
  --safe: env(safe-area-inset-bottom, 0px);
}

/* Thème clair (activé par SitePrefs via data-theme="light") */
:root[data-theme="light"]{
  --bg: #f8f7f4;
  --fg: #1a1a1a;
  --muted: #555;
  --acc: #6b5b2e;
  --line: #e6e3db;
}

/* Thème contraste (ex. data-theme="contrast") */
:root[data-theme="contrast"]{
  --bg: #000;
  --fg: #fff;
  --muted: #e0dfdf;
  --acc: #ffd75a;
  --line: #666;
}

/* Couleurs document + rendu formulaires natifs adaptés */
:root { color-scheme: light dark; }
html, body { background: var(--bg); color: var(--fg); }

/* ===== Typographie ======================================================= */
body{
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4{
  font-family: var(--font-serif);
  line-height: 1.25;
  margin: 0 0 .6rem;
}
h1{ font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem); }
h2{ font-size: clamp(1.25rem, 1.4vw + 1rem, 1.8rem); }
h3{ font-size: clamp(1.05rem, .8vw + 1rem, 1.4rem); }

p, ul, ol, blockquote{ margin: .8rem 0; }
ul, ol{ padding-left: 1.2rem; }

a{
  color: var(--acc);
  text-underline-offset: 3px;
}
a:hover{ text-decoration: underline; }

/* Focus visibles (a11y) */
:where(a, button, input, select, textarea):focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Texte atténué / utilitaires */
.muted{ color: var(--muted); }
.text-center{ text-align: center; }

/* ===== Layout de page (contenu principal) ================================ */
/* IMPORTANT : envelopper chaque page par <main class="page" id="top">…</main> */
.page{
  padding: var(--page-y) var(--page-x);
  /* Espace bas pour éviter toute recouvrement fortuit (mobile, modals, etc.) */
  padding-bottom: calc(var(--page-y) + max(12px, var(--safe)));
  /* Longueur mini pour pousser le footer collant en bas si contenu court */
  min-height: 60svh;
}

/* Le décalage horizontal pour la sidebar desktop est géré dans header.css.
   Ici on ne met PAS de padding-left desktop pour ne pas écraser le header.
   (En mobile, la sidebar est masquée par header.css, donc simple padding suffit) */

/* Conteneur de largeur contrôlée (pour les sections) */
.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
}

/* Sections verticales régulières (utilise .section si besoin) */
.section{ padding: clamp(12px, 2.6vw, 22px) 0; }
.section + .section{ border-top: 1px solid var(--line); }

/* Panneaux génériques (pour cartes/encarts) — optionnels et sobres */
.panel{
  background: color-mix(in oklab, var(--bg) 85%, white 15%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 22px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* Boutons basiques (ne touche PAS aux .btn-ghost du header) */
.btn{ 
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.55rem .9rem; border-radius:12px;
  border:1px solid var(--line); background: transparent; color: var(--fg);
  text-decoration:none; font-weight:700; cursor:pointer;
}
.btn:hover{ border-color: var(--acc); color: var(--acc); }
.btn.primary{
  color:#fff;
  border-color: color-mix(in oklab, var(--acc) 60%, var(--line));
  background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 92%, white) 0%, var(--acc) 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn.outline{
  background: transparent;
  border-color: var(--line);
}

/* Champs de formulaire sobres (globaux) */
.input, .select, .textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, white 8%);
  color: var(--fg);
  padding: .65rem .8rem;
}

/* Petites règles pour tableaux / images en contenu */
.table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.table th, .table td{
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--line);
}
.figure{ margin: 1rem 0; }
.figure figcaption{ color: var(--muted); font-size: .92rem; }

/* ===== Responsif global ================================================== */
@media (min-width: 1200px){
  /* Légère hausse de la lisibilité sur très grands écrans */
  :root{ --page-x: 36px; }
  body{ font-size: 17px; }
}
@media (max-width: 480px){
  /* Micro-ajustements téléphones */
  body{ font-size: 15.5px; }
}

/* ===== Sécurité “motion-safe” =========================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ===== Classes d’ancrage / utilitaires divers =========================== */
#top{ scroll-margin-top: 20px; } /* pour les retours haut de page */
.hr{ height:1px; background: var(--line); border:0; margin: 1rem 0; }

/* ===== Helpers de grilles légères (optionnels) =========================== */
.grid{
  display: grid; gap: clamp(12px, 2vw, 18px);
}
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px){ .grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; } }

/* ===== Liens “action discrets” ========================================== */
.link-ghost{
  color: inherit; opacity: .8; text-decoration: underline dotted 1px;
  text-underline-offset: 3px;
}
.link-ghost:hover{ opacity: 1; color: var(--acc); text-decoration: underline; }