/* ─── TOKENS ─────────────────────────────────────── */
:root {
  --rouge:   #D23F2F;
  --rouge-h: #B8321E;
  --noir:    #1C1C1C;
  --gris:    #6B6B6B;
  --gris-l:  #767676;
  --beige:   #F7F4EF;
  --blanc:   #FFFFFF;
  --vert:    #2E7D52;
  --bordure: #E5E0D8;
}

/* ─── RESET ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--blanc); color: var(--noir); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── NAV ─────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6vw;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; color: var(--noir); }
.logo-mark { width: 32px; height: 32px; background: var(--rouge); color: var(--blanc); font-family: 'Inter', sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 2rem; }
.nav-menu a { font-size: .88rem; font-weight: 500; color: var(--gris); letter-spacing: .01em; transition: color .15s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--noir); }
.nav-menu a.active { border-bottom: 2px solid var(--rouge); padding-bottom: 2px; }
.nav-contact { background: var(--rouge) !important; color: var(--blanc) !important; padding: .5em 1.2em !important; border-radius: 4px !important; font-weight: 600 !important; border-bottom: none !important; transition: background .15s !important; }
.nav-contact:hover { background: var(--rouge-h) !important; }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--noir); }

/* ─── BOUTONS ─────────────────────────────────────── */
.btn-primary { background: var(--rouge); color: var(--blanc); padding: .8em 1.8em; border-radius: 4px; font-weight: 600; font-size: .9rem; transition: background .15s, transform .15s; display: inline-block; border: none; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: var(--rouge-h); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--noir); border: 1.5px solid var(--bordure); padding: .8em 1.8em; border-radius: 4px; font-weight: 500; font-size: .9rem; transition: border-color .15s; display: inline-block; cursor: pointer; font-family: inherit; }
.btn-secondary:hover { border-color: var(--noir); }

/* ─── UTILITAIRES ─────────────────────────────────── */
.section-eyebrow { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--rouge); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.section-eyebrow::before { content:''; display:block; width:20px; height:2px; background:var(--rouge); }
.section-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 1rem; }

/* ─── PAGE HERO INTÉRIEURE ─────────────────────────── */
.page-hero { background: var(--noir); padding: 4rem 6vw 3.5rem; border-bottom: 3px solid var(--rouge); }
.page-hero .eyebrow { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--rouge); margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.page-hero .eyebrow::before { content:''; display:block; width:20px; height:2px; background:var(--rouge); }
.page-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: var(--blanc); line-height: 1.1; margin-bottom: .8rem; }
.page-hero p { color: #888; font-size: .95rem; max-width: 580px; line-height: 1.7; }

/* ─── FOOTER ─────────────────────────────────────── */
footer { background: #111; border-top: 1px solid #222; padding: 3.5rem 6vw 2rem; color: #666; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid #222; margin-bottom: 1.5rem; }
.footer-brand .fname { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; color: var(--blanc); margin-bottom: .6rem; }
.footer-brand p { font-size: .83rem; line-height: 1.7; max-width: 300px; }
.footer-siret { margin-top: 1rem; font-size: .72rem; color: #444; }
.footer-col h4 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #888; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-col ul a { font-size: .82rem; color: #666; transition: color .15s; }
.footer-col ul a:hover { color: var(--blanc); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .75rem; color: #444; }
.loi-badge { border: 1px solid #2a2a2a; padding: .25em .7em; border-radius: 3px; font-size: .7rem; color: #555; letter-spacing: .05em; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .nav-menu { display: none; }
  .nav-menu.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--blanc); border-bottom: 1px solid var(--bordure); padding: 1.5rem 6vw; gap: 1rem; z-index: 99; }
  .burger { display: flex; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
}

/*  Accessibilite, ajoute le 11/08/2026 : un contour net quand on navigue au
 *  clavier. Sans lui, une personne qui n'utilise pas la souris ne sait pas ou
 *  elle se trouve. On n'enleve JAMAIS un contour sans le remplacer.
 *  :focus-visible ne se declenche pas a la souris : aucun effet visuel indesirable.  */
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; border-radius: 3px; }
/*  Sur les fonds noirs, le rouge ne se voit pas : contour blanc.  */
.videos :focus-visible, .cta-final :focus-visible, footer :focus-visible,
nav :focus-visible, .legal-bloc :focus-visible { outline-color: #FFFFFF; }