/* ======================================================================
   components.css — Tous les composants UI du site (hors media queries).
   Chargé après tokens.css + base.css, avant responsive.css.
   Ordre suit la structure visuelle : nav → hero → sections → footer → popups.
   ====================================================================== */

/* =====================================================================
   NAVIGATION
   `header nav` = bandeau fixed full-width (background + padding externe).
   `.nav-inner` (S5.11) = wrapper max-width 1400px centré qui évite que
   le logo/les boutons collent aux bords sur grand écran.
   ===================================================================== */
header nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: var(--space-4) var(--space-8); background: linear-gradient(to bottom, rgba(10,10,10,0.98), transparent); }
.nav-inner { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.logo-container { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.logo-img { height: 50px; width: auto; }
.logo-text { display: none; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.1em; color: var(--blanc); line-height: 1.1; }
.logo-text span { color: var(--or); }
.nav-links { display: none; gap: var(--space-12); list-style: none; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* S5.13 — nav mobile compacte : boutons tel + RDV en 44×44 icon-only.
   À ≥ 768 px (responsive.css) les boutons reprennent leur padding texte.
   Le display des SVG est géré par .mobile-only / .desktop-only — on ne
   touche qu'aux dimensions ici pour éviter un conflit de cascade. */
.nav-actions .btn-rdv { padding: 0; width: var(--touch-target); justify-content: center; }
.nav-actions .btn-rdv .nav-icon { width: 22px; height: 22px; }
.nav-links a { color: var(--blanc); text-decoration: none; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; padding: var(--space-2) 0; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--or); transition: width 0.3s ease; }
.nav-links a:hover::after { width: 100%; }

/* Burger mobile (< 1024 px) : bouton hamburger avec 3 barres animées en croix
   à l'ouverture. Caché en ≥ 1024 px (voir responsive.css). */
.burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: var(--touch-target); height: var(--touch-target); padding: 0; background: transparent; border: none; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--blanc); margin: 0 auto; transition: transform 0.3s ease, opacity 0.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile ouvert : fond plein-écran sous la nav, liens empilés verticalement.
   S'active uniquement quand .nav-links a la classe .open. En ≥ 1024 px, la classe
   est toujours absente (burger caché, donc jamais togglé). */
.nav-links.open { display: flex; flex-direction: column; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: rgba(10, 10, 10, 0.98); padding: var(--space-8) var(--space-6); gap: 0; z-index: 999; }
.nav-links.open li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav-links.open li:last-child { border-bottom: none; }
.nav-links.open a { display: block; padding: var(--space-4) 0; font-size: 1.1rem; text-align: center; }
.nav-links.open a::after { display: none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero-video-bg { position: absolute; inset: 0; z-index: 1; }
.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-video-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.88) 100%); z-index: 2; }
.hero-pattern { position: absolute; inset: 0; z-index: 3; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; }

.hero-container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--space-24) var(--space-8) var(--space-8); position: relative; z-index: 10; }
.hero-content { max-width: 100%; text-align: center; margin: 0 auto; }
.hero-tag { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(212, 175, 55, 0.15); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: var(--radius-2); padding: var(--space-2) var(--space-4); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--space-8); animation: fadeInUp 0.8s ease forwards; opacity: 0; }
.hero-tag::before { content: ''; width: 8px; height: 8px; background: var(--or); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: var(--space-6); animation: fadeInUp 0.8s ease 0.2s forwards; opacity: 0; text-align: center; }
.hero h1 .highlight { color: var(--or); position: relative; display: inline-block; }
.hero h1 .highlight::after { content: ''; position: absolute; bottom: 0.05em; left: 0; right: 0; height: 0.12em; background: var(--or); opacity: 0.3; }
.hero p { font-size: 1.15rem; color: var(--gris); max-width: 600px; line-height: 1.7; margin: 0 auto var(--space-6); animation: fadeInUp 0.8s ease 0.4s forwards; opacity: 0; }
.hero-services-tags { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); animation: fadeInUp 0.8s ease 0.45s forwards; opacity: 0; flex-wrap: wrap; justify-content: center; }
.hero-services-tags span { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-2); padding: 0.4rem var(--space-4); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
/* M12 — highlight-tag opacité relevée + texte sombre pour ratio AA ≥ 4.5:1 */
.hero-services-tags span.highlight-tag { background: rgba(212, 175, 55, 0.35); border-color: var(--or); color: var(--noir); font-weight: 700; }
.hero-address { display: inline-flex; align-items: center; gap: 0.8rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-2); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-8); animation: fadeInUp 0.8s ease 0.5s forwards; opacity: 0; }
.hero-address svg { width: 24px; height: 24px; color: var(--or); flex-shrink: 0; }
.hero-address span { font-size: 0.95rem; color: var(--blanc); }
.hero-buttons { display: flex; flex-direction: column; gap: var(--space-6); animation: fadeInUp 0.8s ease 0.6s forwards; opacity: 0; justify-content: center; align-items: center; flex-wrap: wrap; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* =====================================================================
   STATS BAR
   ===================================================================== */
.stats-bar { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: var(--space-8); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.stat { text-align: center; }
.stat-number { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--or); line-height: 1; }
.stat-label { font-size: 0.85rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--space-2); }

/* =====================================================================
   HANDWASH BANNER
   ===================================================================== */
.handwash-banner { padding: var(--space-12) var(--space-6); background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(10,10,10,1) 100%); text-align: center; }
.handwash-content { max-width: 900px; margin: 0 auto; }
.handwash-icon { margin-bottom: var(--space-6); }
.handwash-icon img { height: 80px; width: auto; }
.handwash-content h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-4); }
.handwash-content h2 span { color: var(--or); }
.handwash-content p { color: var(--gris); font-size: 1.1rem; line-height: 1.8; max-width: 700px; margin: 0 auto; }

/* =====================================================================
   PRICING (+ header de section générique)
   ===================================================================== */
.pricing { padding: var(--space-12) var(--space-6); position: relative; }
.section-header { text-align: center; margin-bottom: 5rem; }
.section-tag { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--or); margin-bottom: var(--space-4); }
/* M13 — section-title harmonisé (clamp réduit pour éviter césures forcées) */
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.02em; }

.pricing-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: 400px; margin: 0 auto 5rem; }
.pricing-card { background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.08); padding: var(--space-8); text-align: center; position: relative; overflow: hidden; transition: all 0.4s ease; }
.pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--or), #b8860b); }
.pricing-card:hover { transform: translateY(-10px); border-color: rgba(212, 175, 55, 0.3); }
.pricing-card.popular { border-color: rgba(212, 175, 55, 0.4); background: linear-gradient(145deg, rgba(212, 175, 55, 0.08) 0%, rgba(255,255,255,0.02) 100%); }
.pricing-card.popular::after { content: 'POPULAIRE'; position: absolute; top: 20px; right: -35px; background: var(--or); color: var(--noir); font-size: 0.7rem; font-weight: 700; padding: 0.3rem 2.5rem; transform: rotate(45deg); }
.pricing-card-icon { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.pricing-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 0.02em; margin-bottom: var(--space-2); }
.pricing-card .price { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--or); line-height: 1; }
.pricing-card .price-suffix { font-size: var(--text-sm); color: var(--gris); }
.pricing-card .price-note { font-size: 0.85rem; color: var(--gris); margin-top: var(--space-2); }
.pricing-card .price-details { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); text-align: left; }
.pricing-card .price-line { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pricing-card .price-line span:first-child { color: var(--gris); font-size: 0.85rem; }
.pricing-card .price-line span:last-child { color: var(--or); font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.pricing-card .price-line span:last-child small { font-size: 0.6em; color: var(--gris); font-weight: 400; font-family: 'DM Sans', sans-serif; margin-left: 2px; }
.pricing-card .price-line.pack { background: rgba(212, 175, 55, 0.1); margin: var(--space-2) -var(--space-4); padding: 0.6rem var(--space-4); border: none; }
.pricing-card .price-line.pack span:first-child { color: var(--blanc); font-weight: 600; }
.options-list li span:last-child small { font-size: 0.8em; color: var(--gris); font-weight: 400; }
.pricing-card .price-line.pack span:last-child { font-size: 1.3rem; }

/* Service Valet banner (sous les pricing-cards) */
.service-valet-banner {
    max-width: 1200px;
    margin: var(--space-12) auto 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: var(--space-8);
    text-align: center;
}
.service-valet-banner .svb-row { display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.service-valet-banner .svb-icon { font-size: var(--text-2xl); }
.service-valet-banner .svb-content { text-align: left; }
.service-valet-banner h4 { font-family: 'Bebas Neue', sans-serif; font-size: var(--text-lg); color: var(--or); margin-bottom: var(--space-2); }
.service-valet-banner p { color: var(--blanc); font-size: var(--text-sm); }
.service-valet-banner .svb-price { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--or); }
.service-valet-banner .svb-price small { font-size: 0.9rem; color: var(--gris); }

/* CTA row sous le valet banner (tel: + Calendly côte à côte) */
.pricing-cta-row { text-align: center; margin-top: var(--space-12); display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }

/* =====================================================================
   SERVICES DETAILS
   ===================================================================== */
.services-details { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
.service-block { background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.05); padding: 2.5rem; }
.service-block h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.02em; margin-bottom: var(--space-6); display: flex; align-items: center; gap: 0.8rem; }
.service-block h3 .icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--or), #b8860b); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.service-block h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--or); margin: var(--space-6) 0 var(--space-4); }
.service-block ul { list-style: none; }
.service-block ul li { color: var(--blanc); font-size: 0.95rem; padding: 0.6rem 0; padding-left: 1.8rem; position: relative; border-bottom: 1px solid rgba(255,255,255,0.03); }
.service-block ul li::before { content: '✓'; position: absolute; left: 0; color: var(--or); font-weight: bold; }

/* =====================================================================
   OPTIONS
   ===================================================================== */
.options-section { margin-top: var(--space-16); }
.options-section h3 { font-family: 'Bebas Neue', sans-serif; font-size: var(--text-xl); text-align: center; margin-bottom: var(--space-8); }
.options-section h3 span { color: var(--or); }
.options-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: 1200px; margin: 0 auto; }
.options-block { background: linear-gradient(145deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%); border: 1px solid rgba(255,255,255,0.05); padding: var(--space-8); }
.options-block h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; margin-bottom: var(--space-6); color: var(--or); }
.options-list { list-style: none; }
.options-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.options-list li span:first-child { color: var(--blanc); font-size: 0.95rem; }
.options-list li span:last-child { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--or); white-space: nowrap; margin-left: var(--space-4); }

/* Lien "Sur devis" dans options/detailing (extrait d'inline style) */
/* `.devis-link-inline` + `.gallery-item` peuvent être rendus en <button>
   (S5.9 / S5.2) — reset des styles natifs pour cohérence visuelle avec l'<a>. */
.devis-link-inline { color: var(--or); text-decoration: none; cursor: pointer; background: transparent; border: 0; padding: 0; font: inherit; }
.devis-link-inline:hover { text-decoration: underline; }

/* =====================================================================
   DETAILING
   ===================================================================== */
.detailing { padding: var(--space-12) var(--space-6); background: linear-gradient(180deg, var(--noir) 0%, rgba(212, 175, 55, 0.08) 50%, var(--noir) 100%); position: relative; overflow: hidden; }
.detailing-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%); }
.detailing-content { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; }
.detailing-header { text-align: center; margin-bottom: var(--space-16); }
.detailing-header .section-title { margin-bottom: var(--space-4); }
.detailing-header p { color: var(--gris); font-size: 1.1rem; max-width: 700px; margin: 0 auto; line-height: 1.7; }
.detailing-video { max-width: 900px; margin: 0 auto var(--space-16); border-radius: var(--radius-3); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid rgba(212, 175, 55, 0.3); position: relative; }
.detailing-video video { width: 100%; height: auto; display: block; }

/* Bouton pause/lecture vidéo (S5.4). Aligné coin bas-droit, touch-target 44px.
   aria-pressed="true" = vidéo en pause (afficher ▶), false = en lecture (afficher ⏸). */
.video-toggle { position: absolute; bottom: var(--space-4); right: var(--space-4); width: var(--touch-target); height: var(--touch-target); border-radius: 50%; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--blanc); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s ease; z-index: 15; }
.video-toggle:hover { background: rgba(0, 0, 0, 0.85); }
.video-toggle .video-icon { width: 20px; height: 20px; fill: currentColor; }
.video-toggle[aria-pressed="false"] .video-icon-play { display: none; }
.video-toggle[aria-pressed="true"] .video-icon-pause { display: none; }
.video-toggle-hero { z-index: 15; }
.detailing-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.detailing-card { background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(212, 175, 55, 0.2); padding: 2.5rem; position: relative; overflow: hidden; transition: all 0.4s ease; }
.detailing-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--or), #b8860b); transform: scaleY(0); transition: transform 0.4s ease; transform-origin: top; }
.detailing-card:hover { border-color: rgba(212, 175, 55, 0.5); background: linear-gradient(145deg, rgba(212, 175, 55, 0.08) 0%, rgba(255,255,255,0.02) 100%); }
.detailing-card:hover::before { transform: scaleY(1); }
.detailing-card-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.detailing-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--or), #b8860b); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); }
.detailing-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.02em; }
.detailing-card p { color: var(--gris); line-height: 1.7; margin-bottom: var(--space-6); font-size: 0.95rem; }
.detailing-features { list-style: none; }
.detailing-features li { display: flex; align-items: center; gap: 0.8rem; padding: var(--space-2) 0; color: var(--blanc); font-size: 0.9rem; }
.detailing-features li::before { content: '✓'; color: var(--or); font-weight: bold; }
.detailing-card .price { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); font-family: 'Bebas Neue', sans-serif; font-size: var(--text-lg); color: var(--or); }
.detailing-cta { text-align: center; margin-top: var(--space-16); }
.detailing-cta p { color: var(--gris); margin-bottom: var(--space-6); font-size: var(--text-sm); }

/* =====================================================================
   DEVIS FORM
   ===================================================================== */
.devis-form { max-width: 500px; margin: 0 auto; background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(212, 175, 55, 0.3); padding: var(--space-8); }
.devis-form h4 { font-family: 'Bebas Neue', sans-serif; font-size: var(--text-lg); text-align: center; margin-bottom: var(--space-6); color: var(--or); }
.devis-form .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.devis-form .form-group { margin-bottom: var(--space-4); }
.devis-form .form-group.full { grid-column: 1 / -1; }
.devis-form label { display: block; font-size: 0.85rem; color: var(--gris); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; }
.devis-form input, .devis-form textarea { width: 100%; padding: 0.8rem var(--space-4); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--blanc); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; transition: border-color 0.3s ease; }
.devis-form input:focus, .devis-form textarea:focus { outline: none; border-color: var(--or); }
/* Restaure un focus ring clavier visible (l'override plus spécifique ci-dessus
   écrasait le global *:focus-visible de base.css). H9 / WCAG 2.4.7. */
.devis-form input:focus-visible, .devis-form textarea:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-color: var(--or); }
.devis-form input::placeholder, .devis-form textarea::placeholder { color: rgba(255,255,255,0.3); }
.devis-form textarea { resize: vertical; min-height: 80px; }
/* Bouton submit du form devis : mêmes codes visuels que btn-primary
   (radius 8px, easing modern, hover or→or-sombre, active scale) */
.devis-form button { width: 100%; background: var(--or); color: var(--noir); padding: var(--space-4); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: var(--radius-2); cursor: pointer; transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.devis-form button:hover { background: var(--or-sombre); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3); }
.devis-form button:active { transform: scale(0.97); }

/* S5.6 — états a11y du form : marqueur required, erreurs inline, input invalide */
.form-required { color: var(--or); font-weight: 700; margin-left: 0.15em; }
.devis-form .form-error { display: block; color: #ff8080; font-size: 0.85rem; margin-top: 0.4rem; min-height: 0; }
.devis-form .form-error:not(:empty) { margin-top: 0.4rem; }
.devis-form input[aria-invalid="true"],
.devis-form textarea[aria-invalid="true"] { border-color: #ff8080; }

/* S5.8 — UI submission : spinner sur bouton + zone status success/error */
.form-status { margin-top: var(--space-4); font-size: 0.9rem; text-align: center; min-height: 0; }
.form-status.is-success { color: #7ee787; }
.form-status.is-error { color: #ff8080; }
.devis-submit[aria-busy="true"] { opacity: 0.65; cursor: wait; }
.devis-submit[aria-busy="true"]::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 0.5rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: middle; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Devis-form dans popup contact : pas de bordure (popup en a déjà une) */
.contact-popup .devis-form { border: none; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery { padding: var(--space-12) var(--space-6); background: var(--noir); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 1400px; margin: 0 auto; }
.gallery-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; display: block; width: 100%; border: 0; padding: 0; background: transparent; font: inherit; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.3s ease; }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item .zoom-icon { position: absolute; bottom: var(--space-4); right: var(--space-4); width: 40px; height: 40px; background: var(--or); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; z-index: 10; }
.gallery-item:hover .zoom-icon { opacity: 1; }
.gallery-item .zoom-icon svg { width: 20px; height: 20px; color: var(--noir); }

/* =====================================================================
   LIGHTBOX (touch targets ≥ 44×44 appliqués sur close/nav)
   ===================================================================== */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; align-items: center; justify-content: center; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; }
.lightbox-close { position: absolute; top: var(--space-8); right: var(--space-8); width: var(--touch-target); height: var(--touch-target); background: var(--or); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); color: var(--noir); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--touch-target); height: var(--touch-target); background: var(--or); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); color: var(--noir); }
.lightbox-prev { left: var(--space-8); }
.lightbox-next { right: var(--space-8); }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonials { padding: var(--space-12) var(--space-6); background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, var(--noir) 100%); }
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: 1400px; margin: 0 auto; }
.testimonial-card { background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.08); padding: var(--space-8); position: relative; }
.testimonial-card::before { content: '"'; position: absolute; top: var(--space-4); left: var(--space-6); font-family: 'Bebas Neue', sans-serif; font-size: 5rem; color: var(--or); opacity: 0.2; line-height: 1; }
.testimonial-stars { color: var(--or); font-size: 1.2rem; margin-bottom: var(--space-4); }
.testimonial-text { color: var(--gris); font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--space-6); font-style: italic; position: relative; z-index: 1; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-4); }
.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--or); }
.testimonial-info h5 { font-size: var(--text-sm); margin-bottom: 0.2rem; }
.testimonial-info span { font-size: 0.8rem; color: var(--gris); }

/* =====================================================================
   PROCESS
   ===================================================================== */
.process { padding: var(--space-12) var(--space-6); }
.process-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 1200px; margin: 0 auto; position: relative; }
.process-grid::before { content: ''; position: absolute; top: 50px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--or), transparent); opacity: 0.3; display: none; }
.process-step { text-align: center; padding: var(--space-8); }
.step-number { width: 80px; height: 80px; margin: 0 auto var(--space-8); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: var(--text-xl); background: var(--noir); border: 2px solid var(--or); border-radius: var(--radius-2); position: relative; z-index: 10; transition: all 0.3s ease; }
.process-step:hover .step-number { background: var(--or); color: var(--noir); transform: scale(1.1); }
.process-step h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.process-step p { color: var(--gris); font-size: 0.9rem; }

/* =====================================================================
   FEATURES
   ===================================================================== */
.features { padding: var(--space-12) var(--space-6); background: linear-gradient(180deg, rgba(212, 175, 55, 0.03) 0%, var(--noir) 100%); }
.features-content { display: grid; grid-template-columns: 1fr; gap: var(--space-24); max-width: 1200px; margin: 0 auto; align-items: center; }
.features-text h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: var(--space-8); }
.features-text h2 span { color: var(--or); }
.feature-list { list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.feature-check { width: 24px; height: 24px; background: linear-gradient(135deg, var(--or), #b8860b); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.2rem; }
.feature-check svg { width: 14px; height: 14px; }
.feature-content h5 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.feature-content p { color: var(--gris); font-size: 0.9rem; }
.features-visual { position: relative; height: 450px; display: none; align-items: center; justify-content: center; }
.features-visual img { width: 100%; max-width: 450px; height: auto; position: relative; z-index: 10; border: 2px solid rgba(212, 175, 55, 0.3); filter: drop-shadow(0 20px 40px rgba(212, 175, 55, 0.2)); object-fit: cover; }
.visual-ring { position: absolute; border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 50%; animation: ringPulse 4s ease-in-out infinite; }
.visual-ring:nth-child(1) { width: 280px; height: 280px; animation-delay: 0s; }
.visual-ring:nth-child(2) { width: 380px; height: 380px; animation-delay: 1s; }
.visual-ring:nth-child(3) { width: 480px; height: 480px; animation-delay: 2s; }
@keyframes ringPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } }

/* =====================================================================
   LOCATION
   ===================================================================== */
.location { padding: var(--space-12) var(--space-6); background: linear-gradient(180deg, var(--noir) 0%, rgba(212, 175, 55, 0.05) 100%); }
.location-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--space-16); align-items: center; }
.location-info h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: var(--space-8); }
.location-info h2 span { color: var(--or); }
.location-address { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: var(--space-8); margin-bottom: var(--space-8); }
.location-address h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--or); margin-bottom: var(--space-4); letter-spacing: 0.05em; }
.location-address p { color: var(--blanc); font-size: 1.1rem; line-height: 1.6; }
.location-address .city { color: var(--gris); font-size: 0.95rem; margin-top: var(--space-2); }
.location-hours { margin-top: var(--space-6); }
.location-hours h5 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--or); margin-bottom: var(--space-4); }
.location-hours p { color: var(--gris); font-size: 0.95rem; line-height: 1.8; }
.location-map { background: rgba(255,255,255,0.02); border: 1px solid rgba(212, 175, 55, 0.2); height: 350px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.location-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(100%) contrast(1.1); }
.location-map::after { content: ''; position: absolute; inset: 0; background: rgba(212, 175, 55, 0.05); pointer-events: none; }

/* Boutons sous location-address (extrait d'inline style) */
.location-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); align-items: center; }

/* =====================================================================
   CTA (bloc final « Prêt à faire briller votre voiture ? »)
   ===================================================================== */
.cta { padding: var(--space-12) var(--space-6); text-align: center; position: relative; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, var(--noir) 100%); }
.cta-car { position: absolute; bottom: -60px; right: -120px; opacity: 0.08; width: 650px; }
.cta-content { position: relative; z-index: 10; max-width: 700px; margin: 0 auto; }
.cta h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 6vw, 5rem); margin-bottom: var(--space-6); }
.cta p { font-size: 1.25rem; color: rgba(255,255,255,0.7); margin-bottom: var(--space-12); }

/* =====================================================================
   FAQ (accordéon)
   ===================================================================== */
.faq { padding: var(--space-24) 5%; background: var(--noir); }
.faq-grid { max-width: 900px; margin: 0 auto; }
.faq-item { margin-bottom: var(--space-2); border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.faq-question { width: 100%; padding: 1.2rem var(--space-6); background: rgba(255,255,255,0.03); border: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; }
.faq-question:hover { background: rgba(212, 175, 55, 0.1); }
.faq-question h3 { font-family: 'DM Sans', sans-serif; font-size: var(--text-sm); color: var(--blanc); font-weight: 600; margin: 0; flex: 1; padding-right: var(--space-4); }
.faq-question .faq-icon { width: 24px; height: 24px; border: 2px solid var(--or); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.faq-question .faq-icon::before { content: '+'; color: var(--or); font-size: 1.2rem; font-weight: 300; line-height: 1; }
.faq-item.active .faq-question { background: rgba(212, 175, 55, 0.15); }
.faq-item.active .faq-question h3 { color: var(--or); }
.faq-item.active .faq-question .faq-icon { background: var(--or); transform: rotate(45deg); }
.faq-item.active .faq-question .faq-icon::before { color: var(--noir); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-answer p { padding: 0 var(--space-6); color: var(--gris); line-height: 1.8; font-size: 0.95rem; margin: 0; }
.faq-item.active .faq-answer { max-height: 300px; }
.faq-item.active .faq-answer p { padding: 1.2rem var(--space-6); }
.faq-answer a { color: var(--or); text-decoration: none; }
.faq-answer a:hover { text-decoration: underline; }

/* =====================================================================
   SEO CONTENT (section fin de page, riche en keywords locaux)
   ===================================================================== */
.seo-content { padding: 5rem 5%; background: linear-gradient(180deg, rgba(20,20,20,1) 0%, var(--noir) 100%); }
.seo-content-inner { max-width: 900px; margin: 0 auto; }
.seo-content h2 { font-family: 'Bebas Neue', sans-serif; font-size: var(--text-xl); color: var(--or); margin-bottom: var(--space-6); }
.seo-content h3 { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; color: var(--blanc); margin: var(--space-8) 0 var(--space-4); font-weight: 600; }
.seo-content p { color: var(--gris); line-height: 1.8; margin-bottom: var(--space-4); font-size: 0.95rem; }
.seo-content ul { color: var(--gris); line-height: 1.8; margin: var(--space-4) 0 var(--space-4) var(--space-6); }
.seo-content li { margin-bottom: var(--space-2); }
.seo-content strong { color: var(--blanc); }
.seo-content a { color: var(--or); text-decoration: none; font-weight: 600; }
.seo-content a:hover { text-decoration: underline; }

/* =====================================================================
   FOOTER (inclut les ajouts Sprint 4A : legal-nav, legal-note)
   ===================================================================== */
footer { padding: var(--space-12) var(--space-6); border-top: 1px solid rgba(255,255,255,0.05); }
.footer-content { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: 1200px; margin: 0 auto; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); text-decoration: none; }
.footer-brand .footer-logo img { height: 40px; }
.footer-brand .footer-logo span { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--blanc); }
.footer-brand .footer-logo span em { color: var(--or); font-style: normal; }
.footer-brand p { color: var(--gris); font-size: 0.9rem; line-height: 1.7; }
.footer-col h5 { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 0.05em; margin-bottom: var(--space-6); color: var(--or); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.8rem; }
.footer-col a { color: var(--gris); text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--or); }

/* Bloc contact du footer (S5.7) : <address> en place de <ul> pour semantique */
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 0.8rem; }
.footer-contact a { color: var(--gris); text-decoration: none; font-size: 0.9rem; line-height: 1.5; transition: color 0.3s ease; }
.footer-contact a:hover { color: var(--or); }
.footer-bottom { max-width: 1200px; margin: var(--space-12) auto 0; padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: var(--space-4); justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--gris); text-align: center; }
.social-links { display: flex; gap: var(--space-4); }
.social-links a { width: 45px; height: 45px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: var(--blanc); text-decoration: none; transition: all 0.3s ease; }
.social-links a:hover { border-color: var(--or); color: var(--or); background: rgba(212, 175, 55, 0.1); }
.social-links a svg { width: 22px; height: 22px; }

/* Ligne des liens légaux au-dessus du copyright */
.footer-legal-nav { display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); font-size: 0.85rem; }
.footer-legal-nav a { color: var(--or); text-decoration: none; }
.footer-legal-nav a:hover { text-decoration: underline; }
/* Note franchise TVA (art. 293 B) sous le copyright */
.footer-legal-note { color: var(--gris); font-size: 0.75rem; margin-top: var(--space-2); }

/* =====================================================================
   POPUPS (Calendly + Contact) — touch targets ≥ 44×44 appliqués
   ===================================================================== */
.calendly-popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; align-items: center; justify-content: center; padding: var(--space-4); }
.calendly-popup.active { display: flex; }
.calendly-popup-content { background: var(--blanc); width: 100%; max-width: 700px; height: 90vh; max-height: 700px; position: relative; border-radius: var(--radius-2); overflow: hidden; }
/* ✕ placé en sibling de popup-content (pas enfant) → hors rect de l'iframe,
   donc aucun click-through possible. Positionné absolute par rapport à
   .calendly-popup (fixed full-screen). */
.calendly-popup-close { position: absolute; top: var(--space-4); right: var(--space-4); width: var(--touch-target); height: var(--touch-target); background: var(--noir); border: 2px solid var(--or); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--blanc); z-index: 10; border-radius: 50%; }
.calendly-popup-close:hover { background: var(--or); color: var(--noir); }
.calendly-popup iframe { width: 100%; height: 100%; border: none; }

/* Consent prompt Calendly (injecté si l'utilisateur ouvre le popup sans
   consentement tarteaucitron). Classes pour rester compatibles CSP
   `style-src 'self'` — plus d'inline styles injectés via innerHTML. */
.calendly-consent-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--space-8); text-align: center; background: #141414; color: var(--blanc); }
.calendly-consent-lead { max-width: 420px; margin-bottom: 1.25rem; line-height: 1.5; }
.calendly-consent-btn { background: var(--or); color: var(--noir); border: none; padding: 0.8rem var(--space-6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-1); cursor: pointer; }
.calendly-consent-phone { margin-top: var(--space-4); font-size: 0.85rem; color: var(--gris); }
.calendly-consent-phone a { color: var(--or); }

.contact-popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; align-items: center; justify-content: center; padding: var(--space-8); }
.contact-popup.active { display: flex; }
.contact-popup-content { background: var(--noir); border: 1px solid rgba(212, 175, 55, 0.3); max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.contact-popup-close { position: absolute; top: var(--space-4); right: var(--space-4); width: var(--touch-target); height: var(--touch-target); background: var(--or); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--noir); z-index: 10; }
.contact-popup-close:hover { background: var(--blanc); }
.devis-link { color: var(--or); text-decoration: none; cursor: pointer; transition: all 0.3s ease; }
.devis-link:hover { color: var(--blanc); text-decoration: underline; }