/* ==========================================================
   TRANSPORT BERTHET — styles complémentaires (chargés après main.css)
   ========================================================== */

/* 1) Orange accessible (contraste AA du texte blanc sur les boutons) */
:root{ --accent:#c9480e; --accent2:#a63c0b; }

/* 2) Icônes SVG (remplacent les caractères symboles) */
.btn svg{ width:18px; height:18px; flex:none }
.tel-link{ display:inline-flex; align-items:center; gap:7px }
.tel-link svg{ width:18px; height:18px; color:var(--accent) }
.tel-link span{ color:var(--ink); margin:0 }

.hero-badges{ list-style:none; padding:0 }
.hero-badges li{ display:inline-flex; align-items:center; gap:9px }
.hero-badges li svg{ width:19px; height:19px; color:var(--accent); flex:none }

.benefit-icon{ font-size:0 }
.benefit-icon svg{ width:30px; height:30px; color:var(--accent) }

.service-arrow{ line-height:0 }
.service-arrow svg{ width:22px; height:22px }

.contact-coords{ list-style:none; padding:0 }
.contact-coords li{ display:flex; align-items:flex-start; gap:11px }
.contact-coords li svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:3px }
.contact-coords a,.contact-coords span{ color:#e5e9ed; font-weight:600 }
.contact-coords a:hover{ color:#fff }

.field .req{ color:var(--accent) }

/* 3) Finitions : on calme les effets « template » (survols qui sautent) */
.sec-eyebrow{ letter-spacing:.04em }
.hero-kicker{ letter-spacing:.05em }
.service-card:hover{ transform:none; box-shadow:0 8px 26px rgba(15,25,35,.08) }
.btn--primary:hover{ transform:none }
.zones-more{ margin-top:18px }
.zones-more a{ font-weight:700; border-bottom:2px solid var(--accent); padding-bottom:2px }

/* 4) Fil d'Ariane */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.85rem; margin-bottom:18px; color:var(--muted) }
.breadcrumb a{ color:var(--ink) }
.breadcrumb a:hover{ color:var(--accent) }
.breadcrumb span[aria-hidden]{ opacity:.55 }

/* 5) Pages internes (page.php) */
.page-hero{ background:var(--panel); color:#fff; padding-block:clamp(60px,9vw,104px) }
.page-hero .h1{ color:#fff; max-width:20ch }
.page-hero .sec-eyebrow{ color:#ff9a62 }
.page-hero .breadcrumb{ color:#aeb8c3 }
.page-hero .breadcrumb a{ color:#dce2e8 }
.page-hero .breadcrumb a:hover{ color:#fff }
.page-intro{ max-width:64ch; margin-top:16px; color:#cfd6dd; font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.6 }
.page-hero .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }

.wrap.narrow{ max-width:840px }
.content-block{ margin-bottom:34px }
.content-block .h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:10px }
.content-block p{ color:var(--muted) }
.content-block .lead{ color:#4b5560 }

.founder-box{ padding:clamp(20px,3vw,28px); border-left:4px solid var(--accent); border-radius:var(--radius); background:var(--paper) }
.founder-box p{ margin:0; color:var(--ink) }
.zones-groups{ display:grid; gap:26px }
.zones-group h3{ font-size:1.02rem; margin-bottom:12px }

/* ---------- Carte de France (page Zones d'intervention) ---------- */
.map-section{ padding-block:clamp(50px,7vw,90px) }
.map-wrap{ max-width:640px; margin:0 auto }
.fr-map{ width:100%; height:auto; display:block; overflow:visible }
.fr-map-outline{ fill:var(--panel2); stroke:rgba(255,255,255,.18); stroke-width:1.5 }
.fr-map-point{ cursor:pointer }
.fr-map-dot{ r:5.5px; fill:var(--accent); stroke:var(--panel); stroke-width:2; transition:r .18s ease }
.fr-map-point:hover .fr-map-dot,
.fr-map-point:focus-visible .fr-map-dot{ r:9px }
.fr-map-point.is-hq .fr-map-dot{ r:8px; fill:#fff }
.fr-map-point.is-hq:hover .fr-map-dot,
.fr-map-point.is-hq:focus-visible .fr-map-dot{ r:12px }
.fr-map-pulse{ fill:var(--accent); opacity:.22; pointer-events:none }
.fr-map-point text{ fill:#c7d0d9; font-size:13.5px; font-weight:600; font-family:var(--font); transition:fill .18s ease, font-size .18s ease }
.fr-map-point:hover text,
.fr-map-point:focus-visible text{ fill:#fff; font-size:15px }
.fr-map-point.is-hq text{ fill:#fff; font-size:15px; font-weight:700 }
.fr-map-point.is-hq:hover text{ font-size:16.5px }
.fr-map-point:focus-visible{ outline:none }
@media(max-width:600px){ .fr-map-point text{ font-size:11.5px } .fr-map-point.is-hq text{ font-size:13px } }
.footer-logo{ width:auto; max-width:200px; height:auto; margin-bottom:14px }
.page-cta{ margin-top:14px; padding:clamp(26px,4vw,38px); border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); text-align:center }
.page-cta p{ color:var(--muted); margin:10px auto 20px; max-width:54ch }

/* 6) Pages légales */
.legal .content-block{ margin-bottom:26px }
.legal .content-block p{ color:#4b5560 }
.legal ul{ margin:12px 0 0 18px; color:#4b5560 }
.legal li{ margin-bottom:7px }
.legal a{ color:var(--accent); text-decoration:underline }

/* ---------- Notre véhicule ---------- */
.vehicle-layout{ display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center }
.vehicle-layout .lead{ margin-top:14px }
.vehicle-layout .btn{ margin-top:22px }
.btn--ghost-dark{ border:1px solid var(--line); color:var(--ink); background:transparent }
.btn--ghost-dark:hover{ border-color:var(--accent); color:var(--accent) }
.vehicle-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.vehicle-stats>div{ border:1px solid var(--line); border-radius:var(--radius); padding:24px 12px; text-align:center; background:var(--paper) }
.vehicle-stats strong{ display:block; font-size:1.5rem; color:var(--accent); margin-bottom:6px }
.vehicle-stats span{ color:var(--muted); font-size:.82rem }
@media(max-width:760px){ .vehicle-layout{ grid-template-columns:1fr; gap:26px } .vehicle-stats{ grid-template-columns:repeat(3,1fr) } }

/* ---------- Avis client ---------- */
.testimonial-card{ margin:36px auto 0; padding:clamp(28px,4vw,44px); border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); text-align:center }
.testimonial-stars{ color:var(--accent); font-size:1.3rem; letter-spacing:.1em }
.testimonial-card p{ font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; color:var(--ink); margin:18px auto 0; max-width:62ch }
.testimonial-card footer{ margin-top:18px; font-weight:700; color:var(--muted) }
.proof-item--link{ cursor:pointer; transition:.15s ease }
.proof-item--link:hover{ transform:translateY(-3px) }

/* ---------- WhatsApp ---------- */
.whatsapp-link{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#25D366; color:#fff; flex:none }
.whatsapp-link svg{ width:20px; height:20px }
.whatsapp-fab{ position:fixed; z-index:90; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.25) }
.whatsapp-fab svg{ width:28px; height:28px }
@media(max-width:760px){ .whatsapp-fab{ right:16px; bottom:82px; width:50px; height:50px } .whatsapp-fab svg{ width:25px; height:25px } }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:6px 22px }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:14px }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-icon{ flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); position:relative }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; left:50%; top:50%; background:var(--ink); transform:translate(-50%,-50%) }
.faq-icon::before{ width:10px; height:2px }
.faq-icon::after{ width:2px; height:10px; transition:.15s ease }
.faq-item[open] .faq-icon::after{ height:0 }
.faq-answer{ padding:0 0 20px; color:var(--muted); line-height:1.6 }
.faq-more{ text-align:center; margin-top:22px }
.faq-more a{ font-weight:700; color:var(--accent) }