/* ==========================================================================
   Renov’auto+ · habillage « lustrage » : atelier de carrosserie.
   Anthracite, gris acier, blanc d'atelier, un seul accent : l'orange de
   signalisation. Unbounded (large, technique) pour les titres, Space Grotesk
   pour le texte. Les sections claires redéfinissent leurs tokens localement.
   ========================================================================== */
:root {
  --fond: #15181b;
  --surface: #1d2226;
  --texte: #eef1f3;
  --texte-doux: #a9b3bb;
  --accent: #ff6a1a;
  --accent-texte: #14171a;
  --ouverture-fond: #15181b;
  --ouverture-texte: #f3f5f6;
  --pied-fond: #0e1012;
  --pied-texte: #eef1f3;
  --titre: "Unbounded", "Arial Black", sans-serif;
  --corps: "Space Grotesk", system-ui, sans-serif;
  --carte-filet: rgb(238 241 243 / .14);
  --rayon: 4px;
  --bouton-rayon: 4px;
  /* La peinture du panneau (lue par signature.js) */
  --lustre-base: #1c242b;
  --lustre-clair: #7f93a3;
  --lustre-neon: #f6faff;
  --nav-fond: #0e1012;
  --nav-texte: #eef1f3;
  --nav-bord: rgb(238 241 243 / .14);
  --nav-actif: rgb(238 241 243 / .12);
  --filigrane-fond: #1d2226;
  --filigrane-texte: #eef1f3;
  --filigrane-bord: rgb(238 241 243 / .32);
  --filigrane-point: #ff6a1a;
  --assistant-fond: #ff6a1a;
  --assistant-texte: #14171a;
  --assistant-panneau: #1d2226;
  --assistant-panneau-texte: #eef1f3;
  --assistant-bord: rgb(238 241 243 / .18);
  --assistant-bulle: #2a3237;
}
html { background: #15181b; }
em { font-style: normal; color: var(--accent); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.section h2 { font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); }

/* Sections claires : le « blanc d'atelier » */
.maison, .atouts {
  --fond: #eceff1; --surface: #ffffff; --texte: #14171a; --texte-doux: #46515a;
  --accent-fort: #a93a04; --carte-filet: rgb(20 23 26 / .16);
  background: var(--fond); color: var(--texte);
}
.maison em, .atouts em { color: var(--accent-fort); }

/* Détails techniques : petit repère carré devant les surtitres, chasse resserrée */
.surtitre { display: flex; align-items: center; gap: .7rem; font-size: .74rem; letter-spacing: .22em; }
.surtitre::before { content: ""; width: .55rem; height: .55rem; background: var(--accent); flex: none; }
.maison .surtitre::before, .atouts .surtitre::before { background: var(--accent-fort); }

.bouton { border-radius: 4px; font-weight: 700; letter-spacing: .02em; transition: background .25s, transform .25s; }
.bouton:hover { background: #ff8444; }
.lien-fleche { border-bottom-width: 2px; border-color: var(--accent); }

/* ---- Premier écran : un panneau de carrosserie (le shader), une règle graduée ---- */
.ouverture { --longueur: 250svh; }
.ouverture h1 { font-size: clamp(1.9rem, .9rem + 3.9vw, 4.1rem); line-height: 1.08; }
.ouverture__intro { max-width: 30rem; }
.ouverture .scene__collant::after {
  content: ""; position: absolute; z-index: 3; left: var(--marge); right: var(--marge); bottom: 1.1rem; height: 12px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(238 241 243 / .5) 0 1px, transparent 1px 16px);
  -webkit-mask: linear-gradient(90deg, #000, transparent 70%); mask: linear-gradient(90deg, #000, transparent 70%);
  opacity: clamp(0, calc((.2 - var(--p, 0)) * 6), 1);
}
.repli-webgl { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- L'atelier ---- */
.pilier { border-top: 2px solid var(--texte); padding-top: 1.3rem; }
.pilier::before { font: 500 1.7rem/1 var(--titre); letter-spacing: 0; color: var(--accent-fort); margin-bottom: 1.2rem; }
.pilier h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }

/* ---- Prestations ---- */
.offre { background: var(--surface); }
.carte-resto__onglets { gap: 0; border-bottom: 1px solid var(--carte-filet); margin-bottom: 1.8rem; }
.carte-resto__onglets [role="tab"] {
  border: 0; border-radius: 0; min-height: 52px; padding: 0 1.4rem; font: 600 .82rem/1 var(--corps);
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.carte-resto__onglets [role="tab"]:hover { color: var(--texte); }
.carte-resto__onglets [role="tab"][aria-selected="true"] { background: transparent; color: var(--texte); border-bottom-color: var(--accent); }
.carte-resto__liste strong { font: 500 1.02rem/1.35 var(--titre); letter-spacing: -.01em; }
.carte-resto__liste li { position: relative; padding-left: 1.3rem; }
.carte-resto__liste li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: .5rem; height: .5rem; background: var(--accent); }
.exemple { color: var(--texte-doux); }

/* ---- Atouts ---- */
.atout { border: 1px solid var(--carte-filet); border-top: 3px solid var(--accent-fort); box-shadow: 0 1px 0 rgb(20 23 26 / .04); }
.atout strong { font: 500 1.1rem/1.3 var(--titre); letter-spacing: -.01em; }

/* ---- Venir ---- */
.infos h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); }
.horaires th { font-weight: 600; letter-spacing: .04em; }
.carte-google { filter: grayscale(1) invert(.9) contrast(.85) brightness(.95); border: 1px solid var(--carte-filet); }
.pied__nom { font: 600 1.2rem/1 var(--titre); }
.pied { border-top: 3px solid var(--accent); }

@media (max-width: 760px) {
  /* Image de repli (sans WebGL) : le texte est en bas au téléphone, on y assombrit le décor */
  .ouverture__decor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 16 18 / .94) 0, rgb(14 16 18 / .9) 60%, transparent 100%); }
  .ouverture h1 { font-size: clamp(1.7rem, 1.2rem + 3.4vw, 2.2rem); }
  /* Quatre onglets ne tiennent pas sur une ligne à 375 px : deux par ligne */
  .carte-resto__onglets { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0; }
  .carte-resto__onglets [role="tab"] { padding: 0 .6rem; border-bottom: 1px solid var(--carte-filet); margin-bottom: 0; text-align: left; }
  .carte-resto__onglets [role="tab"][aria-selected="true"] { border-bottom: 3px solid var(--accent); }
}

/* Contournement : base.css pose ces deux couleurs avec color-mix(), que contraste.mjs lit
   comme du 0-255 (faux échec à 1,2:1). Couleurs pleines, même rendu. */
.ouverture__intro { color: #d6dce0; }
.pied { color: #c2c9ce; }

/* Contournement : l'iframe Google Maps du gabarit (loading="lazy") se charge dès que la section
   est à moins de ~4000 px de l'écran, soit sur tout le premier écran en 1280 px (650 Ko).
   content-visibility la garde au repos tant que la section n'approche pas. */
.infos { content-visibility: auto; contain-intrinsic-size: auto 22rem; }
@media (max-width: 760px) { .infos { contain-intrinsic-size: auto 44rem; } }