/* ============================================================
   SCORE AO — REFONTE VISUELLE DU 12/10/2026 : encre, cuivre, crème
   Maquette validée par Maureen (« Accueil Score AO »), appliquée à
   tout le site.

   Cette feuille se charge EN DERNIER sur toutes les pages. Elle porte
   ce que la maquette fixe pour l'ensemble du site : les polices, les
   titres, les boutons, la barre de navigation et le pied de page.
   Les couleurs des anciennes feuilles (site.css, cm.css) ont été
   repeintes par `AO SCAN - TRAVAIL/site/theme-v2.mjs` ; ce fichier
   n'a donc pas à les combattre une par une.

   La page d'accueil a en plus sa propre feuille, `accueil.css`.
============================================================ */

:root{
  --v2-ink:#0e0c0b; --v2-ink-2:#141110; --v2-ink-3:#1a1512; --v2-cream:#efe8dd; --v2-paper:#fbf8f2;
  --v2-copper:#c88a5e; --v2-copper-hi:#e3b48c; --v2-copper-dim:rgba(200,138,94,.55);
  --v2-light:#ece9e3; --v2-light-2:#cfc9c0; --v2-light-dim:#8c847b;
  --v2-dark:#1b1613; --v2-dark-2:#4a423a; --v2-dark-dim:#6d645b;
  --v2-hair:rgba(236,233,227,.14); --v2-hair-dark:rgba(27,22,19,.16);
  --v2-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --v2-mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --v2-navh:62px;
}

/* ── Typographie ───────────────────────────────────────────────────── */
body{font-family:var(--v2-sans);font-feature-settings:normal;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif,.section-title{font-family:var(--v2-sans);text-wrap:balance}
h1{font-weight:800;letter-spacing:-.025em;line-height:1.04}
h2,.section-title{font-weight:800;letter-spacing:-.022em;line-height:1.08}
h3{font-weight:650;letter-spacing:-.01em}
h1 em,h2 em,h1 i,h2 i{font-style:normal;color:var(--v2-copper)}
.eyebrow,.kicker,.cm-eyebrow,.cm-kicker,.section-kicker{font-family:var(--v2-mono);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px}
::selection{background:var(--v2-copper);color:#1a120c}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--v2-copper);outline-offset:3px;border-radius:6px}

/* ── Boutons : le cuivre plat de la maquette, avec son reflet ─────── */
.btn{font-family:var(--v2-sans)}
.btn-or,.cm-page .btn-or{
  background:var(--v2-copper);color:#1a120c;font-weight:600;border-radius:9px;
  box-shadow:none;position:relative;overflow:hidden;border:0;
}
.btn-or::after,.cm-page .btn-or::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-or:hover,.cm-page .btn-or:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:none}
.btn-or:hover::after,.cm-page .btn-or:hover::after{transform:translateX(120%)}
.btn-primary{background:var(--v2-dark);color:var(--v2-light);border-radius:9px}
.btn-primary:hover{background:#2a221d}
.btn-ghost{border-radius:9px}
.cm-page .btn-ghost{background:transparent;color:var(--v2-light);border:1px solid var(--v2-hair)}
.cm-page .btn-ghost:hover{border-color:var(--v2-copper);background:transparent}

/* Le bouton de base, pour les pages qui ne chargent pas site.css
   (l'accueil, les pages légales) : la barre doit y être la même. */
.v2nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:500;line-height:1.2;cursor:pointer;position:relative;white-space:nowrap;font-family:var(--v2-sans)}
.v2nav .btn-or{color:#1a120c}

/* ── Barre de navigation ───────────────────────────────────────────── */
.progress-v2{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;width:0;z-index:70;background:linear-gradient(90deg,var(--v2-copper),var(--v2-copper-hi));pointer-events:none}
.nav.v2nav,.cm-page .nav.v2nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;padding:0 24px;
  background:linear-gradient(180deg,rgba(14,12,11,.95),rgba(14,12,11,.82));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--v2-hair);box-shadow:none;
}
.nav.v2nav.scrolled{background:rgba(14,12,11,.94);box-shadow:none;border-bottom-color:var(--v2-hair)}
.v2nav .nav-inner{max-width:1180px;margin:0 auto;height:var(--v2-navh);display:flex;align-items:center;gap:24px;flex-wrap:nowrap;justify-content:flex-start}
.v2nav .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em;font-size:18px;color:var(--v2-light);text-decoration:none;flex:none}
.v2nav .brand b,.site-footer .brand b{color:var(--v2-copper);font-weight:800;font-family:var(--v2-sans);font-size:inherit;letter-spacing:inherit}
.mark{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--v2-copper);display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.mark::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--v2-copper);position:relative;z-index:1}
.mark::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(227,180,140,.55),transparent 28%);animation:v2spin 3.2s linear infinite}
.v2nav .seg{color:var(--v2-light-dim);font-size:11px;letter-spacing:.18em;font-family:var(--v2-mono);text-transform:uppercase;border-left:1px solid var(--v2-hair);padding-left:22px;white-space:nowrap}
.v2nav .nav-links{display:flex;align-items:center;gap:20px;margin-left:auto;flex-wrap:nowrap}
.v2nav .nav-links a,.cm-page .v2nav .nav-links a{color:var(--v2-light-dim);font-size:14px;font-weight:500;padding:0;border-radius:0;background:none;position:relative;white-space:nowrap;text-decoration:none}
.v2nav .nav-links a::after,.cm-page .v2nav .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--v2-copper);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.v2nav .nav-links a:hover,.v2nav .nav-links a[aria-current="page"]{color:var(--v2-light);background:none}
.v2nav .nav-links a:hover::after,.v2nav .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.v2nav .nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.v2nav .nav-cta .btn{font-size:14px;padding:10px 15px;border-radius:9px}
.v2nav .nav-cta .btn-ghost{background:transparent;color:var(--v2-light);border:1px solid var(--v2-hair)}
.v2nav .nav-cta .btn-ghost:hover{border-color:var(--v2-copper);background:transparent}
.v2nav .nav-burger{display:none;width:40px;height:40px;padding:0;border-radius:9px;background:transparent;border:1px solid var(--v2-hair);color:var(--v2-light);align-items:center;justify-content:center}
.v2nav .nav-burger svg{width:18px;height:18px;stroke:var(--v2-light);fill:none;stroke-width:1.8;stroke-linecap:round}
@media(max-width:1180px){.v2nav .seg{display:none}}
@media(max-width:1100px){
  .v2nav .nav-inner{position:relative}
  .v2nav .nav-links,.cm-page .v2nav .nav-links{
    display:none;position:absolute;top:100%;left:-24px;right:-24px;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 16px;
    background:rgba(14,12,11,.98);border-top:1px solid var(--v2-hair);border-bottom:1px solid var(--v2-hair);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9);max-height:calc(100vh - var(--v2-navh));overflow-y:auto;
  }
  .v2nav .nav-links.open{display:flex}
  .v2nav .nav-links a{padding:13px 2px;border-bottom:1px solid var(--v2-hair);font-size:15px}
  .v2nav .nav-links a::after{display:none}
  .v2nav .nav-cta{margin-left:auto}
  .v2nav .nav-burger{display:inline-flex}
}
@media(max-width:560px){
  .nav.v2nav{padding:0 16px}
  .v2nav .nav-links,.cm-page .v2nav .nav-links{left:-16px;right:-16px;padding-inline:16px}
  .v2nav .nav-cta .btn-ghost{display:none}
  .v2nav .nav-cta .btn-or{padding:9px 12px;font-size:13px}
  .v2nav .nav-inner{gap:12px}
}

/* ── Pied de page ──────────────────────────────────────────────────── */
.site-footer.v2foot,.cm-page .site-footer.v2foot{background:var(--v2-ink);color:var(--v2-light-dim);border-top:1px solid var(--v2-hair);padding:0}
.v2foot .fgrid{max-width:1180px;margin:0 auto;padding:56px 24px 30px;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
.v2foot .fgrid>*{min-width:0}
.v2foot h5{margin:0 0 12px;font-family:var(--v2-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-light);font-weight:500}
.v2foot a,.cm-page .v2foot a{display:block;color:var(--v2-light-dim);font-size:13.5px;padding:3px 0;margin:0;text-decoration:none}
.v2foot a:hover,.cm-page .v2foot a:hover{color:var(--v2-light)}
.v2foot a.brand,.cm-page .v2foot a.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;color:var(--v2-light);padding:0}
.cm-page .v2foot h5{color:var(--v2-light)}
.v2foot p{font-size:13.5px;margin:12px 0 0;max-width:36ch;line-height:1.6;color:var(--v2-light-dim)}
.v2foot .tel{display:block;font-size:13.5px;padding:3px 0}
.v2foot .legal{max-width:1180px;margin:0 auto;border-top:1px solid var(--v2-hair);padding:20px 24px 28px;font-size:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:880px){.v2foot .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.v2foot .fgrid{grid-template-columns:1fr;padding-inline:16px}.v2foot .legal{padding-inline:16px}.v2foot a{padding:7px 0}}

/* ── Pages en clair (site.css) : le crème de la maquette ───────────── */
body:not(.cm-page):not(.v2-accueil){background:var(--v2-cream);color:var(--v2-dark)}
body:not(.cm-page):not(.v2-accueil) h1,body:not(.cm-page):not(.v2-accueil) h2{color:var(--v2-dark)}
/* Le halo des en-têtes (site.css, « atmosphère du hero ») était pensé pour
   l'or sur fond blanc ; repeint en cuivre sur crème, il faisait une tache
   grise sous la barre. Les sections crème de la maquette sont unies. */
body:not(.cm-page) header.section::before{background:none}
/* Sur fond crème, la barre reste franchement encre : le dégradé
   transparent de la maquette est fait pour un fond sombre. */
body:not(.cm-page):not(.v2-accueil) .nav.v2nav{background:rgba(14,12,11,.97)}

/* ── Pages sombres : l'encre de la maquette, sans le quadrillage ──── */
body.cm-page{background:var(--v2-ink);color:var(--v2-light-2)}
.cm-page h1,.cm-page h2,.cm-page h3,.cm-page h4{color:var(--v2-light)}
.cm-page::after{opacity:.28}

/* Un fil de crème : une section sur deux, sur les pages sombres, passe en
   clair, comme l'alternance encre / crème de la maquette. Posé par la
   classe `.v2-creme`, jamais deviné. */
.cm-page .v2-creme{background:var(--v2-cream);color:var(--v2-dark)}
.cm-page .v2-creme h2,.cm-page .v2-creme h3{color:var(--v2-dark)}

@keyframes v2spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mark::after{animation:none}.btn-or::after{transition:none}}