/* Thème blanc 2.0 — 1) couleurs de l'ancien thème éclaircies (généré) ; 2) réglages faits main (plus bas) */
/* — style.css — */
.btn--outline { background: rgba(0, 0, 0, 0.024); }
.ambient { background: radial-gradient(60vmax 45vmax at 88% -12%, rgba(0, 0, 0, 0.099), transparent 60%),
    radial-gradient(50vmax 40vmax at -12% 38%, rgba(0, 0, 0, 0.068), transparent 60%),
    radial-gradient(45vmax 35vmax at 60% 115%, rgba(182, 144, 84, 0.1), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #ffffff 100%); }
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(0, 0, 0, 0.158), transparent 62%); }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(0, 0, 0, 0.135), transparent 62%); }
.nav.is-scrolled { background: #ffffff; }
.mobile-menu { background: radial-gradient(120% 70% at 100% 0%, rgba(0, 0, 0, 0.099), transparent 60%), #ffffff; }
.footer { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 40%); }
@media (max-width: 640px) {
.mobile-bar { background: #ffffff; }
}
.vtc-indispo { background: rgba(255, 255, 255, 0.9); }
.vtc-indispo__boite { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.22); }
.vtc-indispo__x:hover, .vtc-indispo__x:focus-visible { background: rgba(0, 0, 0, 0.048); }
.annonce__x:hover, .annonce__x:focus-visible { background: rgba(0, 0, 0, 0.06); }
.btn--gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.054), 0 12px 32px -14px rgba(182, 144, 84, 0.8); }
.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.054), 0 18px 44px -12px rgba(182, 144, 84, 0.9); }
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(182, 144, 84, 0.14), 0 18px 40px -24px rgba(0, 0, 0, 0.22); }
.footer { background: radial-gradient(60% 120% at 50% 0%, rgba(182, 144, 84, 0.07), transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 40%); }
.footer__legal { border-top-color: rgba(0, 0, 0, 0.06); }
/* — hero.css — */
.hero__halo { background: radial-gradient(50% 50% at 62% 50%, rgba(0, 0, 0, 0.108), rgba(182, 144, 84, 0.08) 45%, transparent 72%); }
.hero__bg::after { background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(180deg, transparent 78%, var(--bg)); }
.road .lane { stroke: rgba(11, 11, 12, 0.55); }
.road .head { stroke: #0b0b0c; }
.road .gold { stroke: #816537; }
.road .blue { stroke: #0b0b0c; }
.road .tail { stroke: #816537; }
.emblem__glow { background: radial-gradient(circle, rgba(0, 0, 0, 0.171), rgba(182, 144, 84, 0.14) 42%, transparent 68%); }
.emblem__orbit { border: 1px dashed rgba(0, 0, 0, 0.14); }
.glass { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.glass__icon { color: #0b0b0c; }
.stats { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); }
.stat:hover { background: rgba(0, 0, 0, 0.016); }
.marquee__band--alt { background: linear-gradient(90deg, #ffffff, #ffffff 50%, #ffffff); border-top: 1px solid rgba(0, 0, 0, 0.175); border-bottom: 1px solid rgba(0, 0, 0, 0.175); }
.marquee__item { color: #0b0b0c; }
.hero__proof { border: 1px solid rgba(0, 0, 0, 0.14); background: linear-gradient(120deg, rgba(0, 0, 0, 0.054), rgba(255, 255, 255, 0.9)); }
.hero__proof:hover { border-color: rgba(0, 0, 0, 0.3); }
.hero__proof-ico { background: linear-gradient(135deg, #0b0b0c, #0b0b0c); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.12); }
/* — sections.css — */
.feature__bg::after { background-image: linear-gradient(rgba(0, 0, 0, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.024) 1px, transparent 1px); }
.mock { background: linear-gradient(180deg, #ffffff, #ffffff); border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mock__ico { color: #0b0b0c; }
.mock__field { background: rgba(0, 0, 0, 0.032); border: 1px solid rgba(0, 0, 0, 0.06); }
.radar { background: radial-gradient(circle, #ffffff 0%, #ffffff 72%); border: 1px solid rgba(0, 0, 0, 0.2); }
.radar::before { background: repeating-radial-gradient(circle, transparent 0 17px, rgba(0, 0, 0, 0.09) 17px 18px), linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.09) 0 calc(50% + 0.5px), transparent 0), linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.09) 0 calc(50% + 0.5px), transparent 0); }
.radar__sweep { background: conic-gradient(from 0deg, rgba(0, 0, 0, 0.248), rgba(0, 0, 0, 0.04) 70deg, transparent 360deg); }
.radar__label { color: #3a3a3f; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.22); }
.checklist li { background: rgba(0, 0, 0, 0.028); }
.checklist .box svg { stroke: #0b0b0c; }
.phone { background: linear-gradient(150deg, #6a532e, #ffffff 50%, #ffffff); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 60px 100px -40px rgba(0, 0, 0, 0.22); }
.phone__screen { background: linear-gradient(180deg, #ffffff, #ffffff); }
.phone__island { background: #ffffff; }
.minimap { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); }
.minimap .route-bg { stroke: rgba(11, 11, 12, 0.6); }
.booking__car { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); }
.trip { background: rgba(0, 0, 0, 0.028); }
.chips span { border: 1px solid rgba(0, 0, 0, 0.09); }
.chips span:hover { color: #0b0b0c; background: rgba(0, 0, 0, 0.09); }
.driver__av { background: rgba(255, 255, 255, 0.9); }
.timeline::before, .timeline::after { background: rgba(0, 0, 0, 0.06); }
.timeline li { background: rgba(0, 0, 0, 0.028); }
.timeline li::before { background: #ffffff; }
.shot { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.072); }
.shot::after { background: linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, 0.9)); }
.shot__tag { color: #0b0b0c; }
.ref__photo { box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.22); }
.ref__photo::before { background: linear-gradient(200deg, rgba(0, 0, 0, 0.081), transparent 45%), linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.9)); }
.ref__badge { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.126); }
.ref__card { background: linear-gradient(170deg, #ffffff, #ffffff); }
.ref__card::before { background: linear-gradient(180deg, #fcd116 0 50%, #0b0b0c 50% 75%, #ce1126 75% 100%); }
.reviews-band { background: radial-gradient(120% 140% at 0% 0%, rgba(182, 144, 84, 0.16), transparent 55%), linear-gradient(170deg, #ffffff, #ffffff); }
.manifesto__text em:nth-of-type(1) { color: #0b0b0c; }
.manifesto__text em:nth-of-type(2) { color: #0b0b0c; }
.step { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--accent), 0.22), transparent 60%), linear-gradient(170deg, #ffffff, #ffffff); }
.step__icon { color: #0b0b0c; }
.perk { background: linear-gradient(170deg, #ffffff, #ffffff); }
.perk__icon { color: #0b0b0c; }
.cta__card { background: radial-gradient(90% 120% at 50% 0%, #ffffff 0%, #ffffff 55%, #ffffff 100%) padding-box,
    linear-gradient(110deg, rgba(0, 0, 0, 0.06) 15%, #0b0b0c 35%, #0b0b0c 45%, #ddcbaf 52%, #b69054 60%, rgba(0, 0, 0, 0.06) 80%) border-box; }
.resa-rapide { background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.22); }
.resa-rapide label { border: 1px solid rgba(0, 0, 0, 0.09); background: rgba(0, 0, 0, 0.032); }
.resa-rapide input::placeholder { color: rgba(11, 11, 12, 0.55); }
.perk { background: radial-gradient(120% 90% at 0% 0%, rgba(var(--accent, 212, 169, 79), 0.12), transparent 55%), linear-gradient(170deg, #ffffff, #ffffff); border-color: rgba(0, 0, 0, 0.063); }
.stats { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px -40px rgba(0, 0, 0, 0.22); }
.faq__item { border: 1px solid rgba(0, 0, 0, 0.063); background: linear-gradient(170deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); }
.faq__item.is-open { background: linear-gradient(170deg, rgba(182, 144, 84, 0.08), rgba(255, 255, 255, 0.9)); }
.presta__item { background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); }
.presta__item--vtc:hover { border-color: rgba(0, 0, 0, 0.275); }
.presta__item--vtc > .icon { color: #0b0b0c; background: rgba(0, 0, 0, 0.063); border-color: rgba(0, 0, 0, 0.15); }
.presta__zones a { border-bottom: 1px solid rgba(0, 0, 0, 0.135); }
.urgence { border: 1px solid rgba(0, 0, 0, 0.09); background: linear-gradient(120deg, rgba(182, 144, 84, 0.16), rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0.9) 62%, rgba(0, 0, 0, 0.09)); }
.urgence__gyro i:nth-child(2) { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.225), transparent); }
/* — page.css — */
.lp-hero__photo::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.9) 100%); }
.lp-card { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--accent, 79, 107, 255), 0.18), transparent 60%), linear-gradient(170deg, #ffffff, #ffffff); }
.lp-card .ico { color: #0b0b0c; }
.lp-steps li { background: rgba(0, 0, 0, 0.024); }
.lp-photo { border: 1px solid rgba(0, 0, 0, 0.072); }
.lp-box { background: linear-gradient(170deg, #ffffff, #ffffff); }
.lp-cta { background: radial-gradient(120% 140% at 0% 0%, rgba(0, 0, 0, 0.09), transparent 55%), linear-gradient(170deg, #ffffff, #ffffff); }
@media (max-width: 1020px) {
.lp-hero__photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #ffffff 60%, var(--bg)); }
}
.ref-galerie figure { border: 1px solid rgba(0, 0, 0, 0.072); }
.ref-galerie figcaption { background: linear-gradient(transparent, #ffffff); }
/* — devis.css — */
.form-card { background: linear-gradient(180deg, #ffffff, #ffffff); box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.22); }
.form-card__progress { background: rgba(0, 0, 0, 0.06); }
.opt__card { background: rgba(0, 0, 0, 0.02); }
.opt__check svg { stroke: #0b0b0c; }
.input { background: rgba(0, 0, 0, 0.024); }
.input:hover { border-color: rgba(0, 0, 0, 0.14); }
.field__error { color: #b80006; }
.step-error { color: #b80005; }
.check__box { border: 1.5px solid rgba(0, 0, 0, 0.14); }
.check__box svg { stroke: #0b0b0c; }
.btn.is-loading::before { border: 2px solid rgba(0, 0, 0, 0.08); border-top-color: rgba(0, 0, 0, 0.14); }
.opt-lien { background: linear-gradient(135deg, rgba(182, 144, 84, 0.12), rgba(0, 0, 0, 0.016)); color: var(--text, #0b0b0c); }
.opt-lien small { color: var(--muted, #6e6e73); }
/* — avis.css — */
.rv-hero__photo::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(255, 255, 255, 0.9) 28%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(180deg, transparent 60%, var(--bg)); }
.stars .off { color: rgba(11, 11, 12, 0.55); }
.rv-summary { background: #ffffff; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.22); }
.rv-bar i { background: rgba(0, 0, 0, 0.056); }
.rv-card { background: linear-gradient(170deg, #ffffff, #ffffff); }
.rv-card__av { color: #0b0b0c; }
.rv-skeleton { background: linear-gradient(100deg, rgba(0, 0, 0, 0.024) 30%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.024) 70%); }
.rv-note { background: rgba(0, 0, 0, 0.016); }
.rv-form-aside figure { border: 1px solid rgba(0, 0, 0, 0.072); }
.rv-form-aside figure::after { background: linear-gradient(180deg, transparent 50%, rgba(255, 255, 255, 0.9)); }
.star-pick label { color: rgba(11, 11, 12, 0.55); }
.field.is-invalid .star-pick label { color: rgba(129, 101, 55, 0.9); }
@media (max-width: 1020px) {
.rv-hero__photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9) 60%, var(--bg)); }
}
/* — recrutement.css — */
.board { background: linear-gradient(180deg, #ffffff, #ffffff); border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.22); }
.board::before { background: linear-gradient(135deg, rgba(0, 0, 0, 0.315), transparent 40%, transparent 60%, rgba(182, 144, 84, 0.7)); }
.board__item { background: rgba(0, 0, 0, 0.032); border: 1px solid rgba(0, 0, 0, 0.06); }
.board__ico { color: #0b0b0c; }
.job { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--accent), 0.18), transparent 60%), linear-gradient(170deg, #ffffff, #ffffff); }
.job__ico { color: #0b0b0c; }
.job__tags span { background: rgba(0, 0, 0, 0.056); border: 1px solid rgba(0, 0, 0, 0.072); }
.steps4 .dot { background: #ffffff; color: #0b0b0c; }
.apply__photo { border: 1px solid rgba(0, 0, 0, 0.072); }
.apply__photo::after { background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.9)); }
.apply-card { background: linear-gradient(180deg, #ffffff, #ffffff); box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.22); }
select.input option { background: #ffffff; }
.apply-done .ok circle { stroke: url(#3a3a3f-gold); }
.apply-done .ok path { stroke: url(#3a3a3f-gold); }
/* — merci.css — */
.summary { background: linear-gradient(170deg, #ffffff, #ffffff); }
.summary__ref { background: rgba(255, 255, 255, 0.9); }
.next li { background: linear-gradient(170deg, #ffffff, #ffffff); }
/* — legal.css — */
.legal dl { background: rgba(0, 0, 0, 0.016); }
/* — pro.css — */
.ambient { background: linear-gradient(180deg, #ffffff 0%, var(--bg) 38%) !important; }
.btn--outline:hover { border-color: rgba(0, 0, 0, 0.14); background: rgba(0, 0, 0, 0.032); }
.nav { background: #ffffff; }
.nav.is-scrolled { background: #ffffff; }
.nav__links > a:hover, .nav__drop-btn:hover, .nav__drop.is-open .nav__drop-btn { background: rgba(0, 0, 0, 0.04); }
.nav__panel { background: #ffffff; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.22); }
.nav__col a:hover, .nav__col a[aria-current="page"] { background: rgba(0, 0, 0, 0.048); }
.nav__tel:hover { color: #0b0b0c; }
.mobile-menu { background: #ffffff; }
.mm__groupe a[aria-current="page"], .mm__lien[aria-current="page"] { color: #0b0b0c; background: rgba(0, 0, 0, 0.04); }
.lp-hero__photo::after { background: linear-gradient(90deg, var(--bg) 30%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0.9)) !important; }
.footer { background: #ffffff !important; }
.footer ul a:hover { color: #0b0b0c; }
.footer__zones a:hover { color: #0b0b0c; }
.mobile-bar { background: #ffffff !important; }
.ac-item:hover { background: rgba(0, 0, 0, 0.024); }
.ac-secteurs p a:hover { border-color: rgba(0, 0, 0, 0.14); }
::selection { color: #0b0b0c; }
.ac-hero::before { background-image: linear-gradient(rgba(0, 0, 0, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.028) 1px, transparent 1px); }
.ac-hero__photo { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.22); }
.ac-hero__photo::after { background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.9)); }
.ac-hero__dispo { background: rgba(255, 255, 255, 0.9); }
.tf-hero { background: radial-gradient(60% 120% at 100% 0%, rgba(0, 0, 0, 0.04), transparent 60%); }
.tf-carte__badge { color: #0b0b0c; }
.tf-majorations li em.tf-baisse { color: #1f9962; }
.tf-tableau tbody tr:hover { background: rgba(0, 0, 0, 0.016); }
.onde { background: radial-gradient(circle, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 60%); }
.btn::before { background: linear-gradient(110deg, transparent 30%, rgba(0, 0, 0, 0.06) 50%, transparent 70%); }
.ac-etapes li:hover, .tf-carte:hover, .lp-card:hover, .ac-moyen:hover { box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(217, 197, 166, 0.08) !important; }
.ac-etapes li:hover span { color: #816537; }
.ac-points li:hover { background: #ffffff; }
.ac-secteurs p a:hover { background: rgba(0, 0, 0, 0.04); }
.tf-carte--vedette { background: linear-gradient(#ffffff, #ffffff) padding-box, conic-gradient(from var(--angle), rgba(172, 134, 74, 0.12), rgba(172, 134, 74, 0.95), rgba(217, 197, 166, 0.45), rgba(172, 134, 74, 0.12)) border-box !important; }
.ac-hero__visuel::before { background: radial-gradient(60% 60% at 30% 70%, rgba(172, 134, 74, 0.22), transparent 70%), radial-gradient(60% 60% at 80% 20%, rgba(0, 0, 0, 0.09), transparent 70%); }
.h1 em, .h2 em, .h1 em .sw__in, .h2 em .sw__in { color: #806437 !important; }
.onde { background: radial-gradient(circle, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 60%) !important; }

/* =========================================================
   BDA — THÈME BLANC (version 2.0)
   Blanc, noir, rouge sécurité. Inspiration : grandes marques
   (titres massifs, beaucoup d'air, sections gris très clair,
   tuiles arrondies, boutons en pastille, animations douces).
   Chargé après pro.css. La version bleu nuit (1.0) est
   conservée dans le dépôt (tag git v1.0).
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-2: #f7f3ec;
  --surface: #ffffff;
  --surface-2: #f7f3ec;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --text: #0b0b0c;
  --noir: #0b0b0c;
  --muted: #4a4a4f;
  --muted-2: #86868b;
  --steel: #0b0b0c;
  --rouge: #ac864a;
  --rouge-fonce: #90703e;
  --gold: var(--rouge);
  --gold-light: #ceb48c;
  --gold-soft: rgba(172, 134, 74, 0.08);
  --gold-grad: var(--rouge);
  --gold-grad-text: var(--noir);
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -14px rgba(0, 0, 0, 0.14);
  --ombre-forte: 0 2px 6px rgba(0, 0, 0, 0.05), 0 30px 60px -24px rgba(0, 0, 0, 0.28);
  --r-tuile: 28px;
}
html { background: #fff; color-scheme: light; }
body { background: #fff !important; color: var(--muted); }
.ambient, .grain, #sky, .ac-hero::before, .ac-hero__visuel::before, .footer::after { display: none !important; }
::selection { background: var(--noir); color: #fff; }

/* Transition douce entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.25s ease both vt-sort; }
::view-transition-new(root) { animation: 0.45s var(--ease) both vt-entre; }
@keyframes vt-sort { to { opacity: 0; } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Typographie ---------- */
.h1, .h2, .h3, h1, h2, h3, h4, strong, b { color: var(--text); }
.h1 { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.75rem); font-weight: 800; letter-spacing: -0.045em !important; line-height: 1.02; }
.h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em !important; line-height: 1.05; }
.h1 em, .h2 em, .h3 em, .h1 em .sw__in, .h2 em .sw__in, .h3 em .sw__in { color: inherit !important; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; }
.kicker { color: var(--rouge) !important; font-size: 12.5px; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; }
.kicker::before, .kicker--center::after { display: none !important; }
a { color: inherit; }

/* ---------- Boutons : pastilles ---------- */
.btn { border-radius: 999px !important; padding: 14px 26px; font-size: 15px !important; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important; }
.btn--gold { background: var(--or-degrade, var(--rouge)) !important; color: #0b0b0c !important; }
.btn--gold:hover { background: var(--rouge-fonce) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 30px -14px rgba(172, 134, 74, 0.7) !important; }
.btn--outline { background: transparent !important; color: var(--noir) !important; border: 1px solid var(--line-strong) !important; }
.btn--outline:hover { background: var(--noir) !important; border-color: var(--noir) !important; color: #fff !important; }
.btn--outline:hover .icon { color: #fff !important; }
.btn--outline .icon { color: var(--rouge); transition: color 0.3s; }
.btn:active { transform: scale(0.97) !important; }
.btn .icon--arrow { transition: transform 0.35s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.link-arrow { color: var(--noir) !important; }
.onde { background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%) !important; }
.btn--outline .onde, .ac-moyen .onde, .tf-carte .onde, .faq__q .onde, .tuile .onde { background: radial-gradient(circle, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 60%) !important; }

/* ---------- Barre du haut ---------- */
.nav, .nav.is-scrolled { background: rgba(255, 255, 255, 0.78) !important; border-bottom: 1px solid transparent !important; backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); transition: border-color 0.3s, background-color 0.3s; }
.nav.is-scrolled { border-bottom-color: var(--line) !important; background: rgba(255, 255, 255, 0.86) !important; }
.brand__name { color: var(--noir); }
.brand__tag { color: var(--muted-2) !important; }
.nav__links > a, .nav__drop-btn { color: #1d1d1f !important; font-weight: 600; }
.nav__links > a:hover, .nav__drop-btn:hover, .nav__drop.is-open .nav__drop-btn { background: rgba(0, 0, 0, 0.04) !important; color: var(--noir) !important; }
.nav__links > a::before { background: var(--noir) !important; }
.nav__links > a[aria-current="page"], .nav__drop.is-current .nav__drop-btn { box-shadow: inset 0 -2px 0 var(--noir) !important; }
.nav__panel { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid var(--line) !important; box-shadow: var(--ombre-forte) !important; border-radius: 18px !important; backdrop-filter: blur(20px); }
.nav__col a, .nav__col a b { color: var(--noir) !important; }
.nav__col a small, .nav__col--simple a { color: var(--muted-2) !important; }
.nav__col a:hover, .nav__col a[aria-current="page"] { background: var(--bg-2) !important; }
.nav__col-titre { color: var(--muted-2) !important; }
.nav__tel { color: var(--noir) !important; }
.nav__tel .icon { color: var(--rouge) !important; }
@media (max-width: 1280px) { .nav__tel { border-color: var(--line-strong) !important; border-radius: 999px !important; } }
.nav__client { color: var(--noir) !important; border-color: var(--line-strong) !important; border-radius: 999px !important; }
.nav__client:hover { background: var(--bg-2) !important; }
.burger { border-color: var(--line-strong) !important; border-radius: 999px !important; }
.burger span { background: var(--noir) !important; }
.mobile-menu { background: #fff !important; }
.mm__lien, .mm__groupe summary { color: var(--noir) !important; border-color: var(--line) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.mm__groupe a { color: var(--muted) !important; }
.mm__groupe > div { border-color: var(--line) !important; }
.mm__groupe a[aria-current="page"], .mm__lien[aria-current="page"] { color: var(--noir) !important; background: var(--bg-2) !important; }
.menu-open .mobile-menu .mm > * { animation: monte-doux 0.5s var(--ease) both; }
.menu-open .mobile-menu .mm > :nth-child(2) { animation-delay: 0.04s; }
.menu-open .mobile-menu .mm > :nth-child(3) { animation-delay: 0.08s; }
.menu-open .mobile-menu .mm > :nth-child(4) { animation-delay: 0.12s; }
.menu-open .mobile-menu .mm > :nth-child(5) { animation-delay: 0.16s; }
.menu-open .mobile-menu .mm > :nth-child(n + 6) { animation-delay: 0.2s; }
.mobile-bar { background: rgba(255, 255, 255, 0.92) !important; border-top: 1px solid var(--line) !important; backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px); }
.progression { background: var(--rouge) !important; height: 2px; }

/* =========================================================
   ACCUEIL
   ========================================================= */
.ac-hero { background: #fff; border-bottom: 0 !important; padding-bottom: clamp(30px, 5vw, 60px); }
.ac-hero::after { content: ""; position: absolute; z-index: 0; right: -10%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(172, 134, 74, 0.07), rgba(172, 134, 74, 0)); pointer-events: none; }
.ac-hero__grille { position: relative; z-index: 1; }
.ac-hero__texte { gap: 26px; }
.ac-hero .h1 { max-width: 700px; }
.ac-hero__texte .lead { max-width: 520px; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--muted); }
.ac-hero__note { display: none !important; }
.ac-hero__badge { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid var(--line) !important; box-shadow: var(--ombre-forte) !important; border-radius: 18px !important; backdrop-filter: blur(14px); }
.ac-hero__badge b { color: var(--noir) !important; }
.tel__cadre { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2), inset 0 0 0 4px #08090c, 0 70px 100px -50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35) !important; }
.msg--moi { background: #ac864a !important; }
.tel__lu { filter: brightness(2); }
.tel__tete svg, .tel__saisie svg { stroke: #d3bc97 !important; }

/* Arrivée de l'en-tête */
.ac-hero__texte > * { animation: monte-doux 1s var(--ease) both !important; }
.ac-hero__texte > :nth-child(1) { animation-delay: 0.05s !important; }
.ac-hero__texte > :nth-child(2) { animation-delay: 0.12s !important; }
.ac-hero__texte > :nth-child(3) { animation-delay: 0.3s !important; }
.ac-hero__texte > :nth-child(4) { animation-delay: 0.42s !important; }
.ac-hero .h1.decoupe { animation: none !important; }
.ac-hero__visuel { animation: tel-arrive 1.4s 0.2s var(--ease) both !important; }
.ac-hero__badge { animation: monte-doux 1s 0.9s var(--ease) both !important; }
@keyframes monte-doux { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tel-arrive { from { opacity: 0; transform: translateY(80px) scale(0.94); } to { opacity: 1; transform: none; } }
/* Titre mot par mot */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mot > span { display: inline-block; animation: mot-monte 1s var(--ease) both; animation-delay: calc(0.12s + var(--m) * 0.055s); }
.mot.sans-anim > span { animation: none; }
@keyframes mot-monte { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Garanties : une ligne sobre */
.ac-garanties { background: #fff !important; border: 0 !important; }
.ac-garanties .container { border-block: 1px solid var(--line); }
.ac-garanties__liste li { align-items: center !important; padding: 22px 20px !important; border-color: var(--line) !important; gap: 12px !important; }
.ac-garanties__liste .icon { color: var(--rouge) !important; margin: 0 !important; }
.ac-garanties__liste b { font-size: 15px !important; color: var(--noir) !important; }
.ac-garanties__liste span { display: none !important; }

/* Titres centrés */
.ac-centre { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.ac-centre .h2 { max-width: 900px; }

/* Sélecteur Sécurité / VTC (façon interrupteur) */
.segment { position: relative; display: inline-flex; margin-top: 12px; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); isolation: isolate; }
.segment button { position: relative; z-index: 1; padding: 11px 22px; border: 0; border-radius: 999px; background: none; font: 600 15px var(--font-body); color: var(--muted); cursor: pointer; transition: color 0.35s var(--ease); white-space: nowrap; }
.segment button[aria-selected="true"] { color: #fff; }
.segment__fond { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: var(--sw, 50%); transform: translateX(var(--sx, 0)); border-radius: 999px; background: var(--noir); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45); transition: transform 0.5s var(--ease), width 0.5s var(--ease); }
.segment:has(button[data-onglet="vtc"].est-masque) { display: none; }

/* Tuiles de services */
.ac-offre { background: var(--bg-2); }
.tuiles { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(230px, auto); gap: 18px; }
.tuiles[hidden] { display: none; }
.tuiles.entre .tuile { animation: monte-doux 0.7s var(--ease) both; animation-delay: calc(var(--t, 0) * 0.06s); }
.tuile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: var(--r-tuile); background: #fff; color: var(--noir); isolation: isolate; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.tuile:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }
.tuile--haute { grid-row: span 2; }
.tuile--large { grid-column: span 2; }
.tuile__ico { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--bg-2); fill: none; stroke: var(--noir); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease), background-color 0.4s, stroke 0.4s; }
.tuile:hover .tuile__ico { transform: scale(1.08) rotate(-4deg); background: var(--rouge); stroke: #fff; }
.tuile__txt { display: grid; gap: 6px; margin-top: auto; }
.tuile__txt b { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: inherit; }
.tuile__txt span { font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.tuile__lien { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--rouge); }
.tuile__lien .icon { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.tuile:hover .tuile__lien .icon { transform: translateX(5px); }
.tuile--noire { background: var(--noir); color: #fff; }
.tuile--noire .tuile__txt b { color: #fff; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); }
.tuile--noire .tuile__txt span { color: #a1a1a6; font-size: 17px; }
.tuile--noire .tuile__ico { background: rgba(255, 255, 255, 0.1); stroke: #fff; }
.tuile--noire .tuile__lien { color: #d3bc97; }
.tuile__embleme { position: absolute; z-index: -1; right: -12%; top: -6%; width: 78%; max-width: 420px; opacity: 0.16; filter: grayscale(1) brightness(2.2); transform: rotate(-8deg); transition: transform 1.2s var(--ease), opacity 0.6s; }
.tuile--noire:hover .tuile__embleme { transform: rotate(-4deg) scale(1.06); opacity: 0.24; }
@media (max-width: 1020px) { .tuiles { grid-template-columns: 1fr 1fr; } .tuile--haute { grid-column: span 2; grid-row: auto; min-height: 320px; } .tuile--large { grid-column: span 2; } }
@media (max-width: 600px) { .tuiles { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; } .tuile, .tuile--haute, .tuile--large { grid-column: auto; min-height: 0; padding: 24px; } .tuile--haute { min-height: 300px; } .segment button { padding: 10px 16px; font-size: 14px; } }

/* Bandeau tarifs : noir */
.ac-tarifs { background: var(--noir) !important; border: 0 !important; }
.ac-tarifs__bande { padding-block: 34px !important; }
.ac-tarifs__titre { color: #d3bc97 !important; letter-spacing: 0.08em !important; }
.ac-tarifs li span { color: #a1a1a6 !important; }
.ac-tarifs li b { color: #fff !important; font-size: 22px !important; letter-spacing: -0.02em; }
.ac-tarifs li small { color: #a1a1a6 !important; }
.ac-tarifs .btn--outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.ac-tarifs .btn--outline:hover { background: #fff !important; color: var(--noir) !important; }
.ac-tarifs .btn--outline:hover .icon { color: var(--noir) !important; }

/* Manifeste : les mots s'éclairent au fil du scroll */
.ac-manifeste { background: #fff; }
.ac-manifeste .container { display: grid; gap: 22px; }
.manifeste { max-width: 1100px; font-family: var(--font-display); font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; color: var(--noir); }
.manifeste .mm-mot { color: #d9d0c1; transition: color 0.45s var(--ease); }
.manifeste .mm-mot.on { color: var(--noir); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 52px); }
.chiffres li { display: grid; gap: 6px; padding: 26px 24px; border-radius: 24px; background: var(--bg-2); }
.chiffres b { display: flex; align-items: baseline; font-family: var(--font-display); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--noir); font-variant-numeric: tabular-nums; }
.chiffres b small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 3px; color: var(--rouge); }
.chiffres li > span { font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .chiffres { grid-template-columns: 1fr 1fr; } }

/* Méthode : ligne qui se remplit */
.ac-methode { background: var(--bg-2); }
.ac-methode__cta { display: flex; justify-content: center; margin-top: 34px; }
.ac-methode .etape__ico { width: 26px; height: 26px; fill: none; stroke: var(--rouge); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Engagements, sous la phrase « Votre confiance, notre priorité » */
.ac-engagements { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.ac-engagements li { display: grid; gap: 6px; align-content: start; padding: 26px 22px 6px 0; }
.ac-engagements li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.ac-engagements .icon { width: 24px; height: 24px; color: var(--rouge); margin-bottom: 6px; }
.ac-engagements b { font: 700 17px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--noir); }
.ac-engagements span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 900px) {
  .ac-engagements { grid-template-columns: 1fr 1fr; }
  .ac-engagements li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ac-engagements li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; }
}
@media (max-width: 520px) {
  .ac-engagements { grid-template-columns: 1fr; }
  .ac-engagements li, .ac-engagements li + li { padding: 20px 0 4px; border-left: 0; }
  .ac-engagements li + li { border-top: 1px solid var(--line); margin-top: 14px; }
}
.ac-etapes { position: relative; gap: 18px !important; }
.ac-etapes[data-ligne]::before, .ac-etapes[data-ligne]::after { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.08); }
.ac-etapes[data-ligne]::after { background: var(--rouge); transform-origin: left; transform: scaleX(var(--p, 0)); }
.ac-etapes li { margin-top: 26px; padding: 28px 24px !important; background: #fff !important; border: 0 !important; border-radius: 24px !important; gap: 10px !important; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease) !important; position: relative; }
.ac-etapes li::before { content: ""; position: absolute; left: 24px; top: -33px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, 0.15); transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--ease); }
.ac-etapes li.on::before { background: var(--rouge); border-color: var(--rouge); transform: scale(1.15); }
.ac-etapes li:hover { transform: translateY(-4px) !important; box-shadow: var(--ombre) !important; }
.ac-etapes span { color: var(--rouge) !important; font-size: 14px !important; }
.ac-etapes b { font-size: 20px !important; letter-spacing: -0.02em; }
.ac-etapes p { color: var(--muted) !important; font-size: 15px !important; }
@media (max-width: 1020px) { .ac-etapes[data-ligne]::before, .ac-etapes[data-ligne]::after, .ac-etapes li::before { display: none; } .ac-etapes li { margin-top: 0; } }

/* Référence */
.ac-reference { background: #fff; }
.ac-ref__photo { border: 0 !important; border-radius: 32px !important; aspect-ratio: 4 / 4.2 !important; box-shadow: var(--ombre-forte); }
.ac-ref__photo img { transform: scale(var(--z, 1.18)); transform-origin: 50% 40%; will-change: transform; }
.ac-ref__texte .lead { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.ac-ref__note { color: var(--noir) !important; }

/* FAQ */
#faq { background: var(--bg-2); }
.faq__item { background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.faq__item.is-open { border: 0 !important; box-shadow: var(--ombre) !important; }
.faq__q { color: var(--noir) !important; font-weight: 700 !important; }
.faq__a p { color: var(--muted) !important; }
.faq__plus { border-color: var(--line-strong) !important; color: var(--noir) !important; }
.faq__item.is-open .faq__plus { background: var(--noir); border-color: var(--noir) !important; color: #fff !important; }
.faq-intro .lead a { color: var(--noir); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Contact : grande carte noire */
.ac-contact { background: var(--bg-2); padding-top: 0 !important; }
#faq + .ac-contact { padding-top: 0 !important; }
.ac-contact__carte { position: relative; overflow: hidden; background: var(--noir) !important; border: 0 !important; border-radius: 36px !important; padding: clamp(32px, 5vw, 64px) !important; isolation: isolate; }
.ac-contact__carte::before { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(172, 134, 74, 0.35), rgba(172, 134, 74, 0)); animation: lueur 9s ease-in-out infinite alternate; }
@keyframes lueur { to { transform: translate(18%, -12%) scale(1.15); } }
.ac-contact__carte .h2 { color: #fff !important; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem); }
.ac-contact__carte .lead { color: #a1a1a6 !important; }
.ac-moyen { border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.04); border-radius: 16px !important; transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease) !important; }
.ac-moyen:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.25) !important; transform: translateX(4px) !important; }
.ac-moyen b { color: #fff !important; }
.ac-moyen small { color: #a1a1a6 !important; }
.ac-moyen .icon { color: #d3bc97 !important; }

/* =========================================================
   APPARITIONS AU SCROLL
   ========================================================= */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.65s var(--ease); transition-delay: var(--rd, 0s); }
.rv.vu { opacity: 1; transform: none; filter: none; }
.cascade { transform: translateY(16px) !important; transition: opacity 0.55s var(--ease), transform 0.65s var(--ease), background-color 0.3s, border-color 0.3s, box-shadow 0.5s var(--ease) !important; transition-delay: calc(var(--c, 0) * 60ms), calc(var(--c, 0) * 60ms), 0s, 0s, 0s !important; }
.cascade.is-in { transform: none !important; filter: none; }
.cascade.is-in:hover { transition-delay: 0s !important; }
.ac-etapes li.cascade.is-in:hover, .tf-carte.cascade.is-in:hover, .lp-card.cascade.is-in:hover { transform: translateY(-4px) !important; }
@media (prefers-reduced-motion: reduce) {
  .rv, .cascade { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .mot > span, .ac-hero__texte > *, .ac-hero__visuel, .ac-hero__badge, .tuiles.entre .tuile, .ac-contact__carte::before { animation: none !important; }
  .manifeste .mm-mot { color: var(--noir); }
}

/* =========================================================
   PAGES INTÉRIEURES
   ========================================================= */
.lp-hero { background: #fff; }
.lp-hero__photo img { filter: none !important; animation: photo-recule 2.4s var(--ease) both; }
@keyframes photo-recule { from { transform: scale(1.12); } to { transform: none; } }
.lp-hero__photo::after, .lp-hero__photo::before { background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.1) 80%) !important; }
.lp-hero .container > *, .tf-hero .container > *, .rv-hero .container > * { animation: monte-doux 1s var(--ease) both; }
.lp-hero .container > :nth-child(2), .tf-hero .container > :nth-child(2) { animation-delay: 0.06s; }
.lp-hero .container > :nth-child(3), .tf-hero .container > :nth-child(3) { animation-delay: 0.12s; }
.lp-hero .container > :nth-child(4), .tf-hero .container > :nth-child(4) { animation-delay: 0.22s; }
.lp-hero .container > :nth-child(5), .tf-hero .container > :nth-child(5) { animation-delay: 0.3s; }
.lp-hero .container > :nth-child(n + 6), .tf-hero .container > :nth-child(n + 6) { animation-delay: 0.38s; }
.lp-crumbs, .lp-crumbs span { color: var(--muted-2) !important; }
.lp-crumbs a { color: var(--noir) !important; }
.hero__trust li { color: var(--muted) !important; }
.hero__trust .tick { border-color: transparent !important; color: #fff !important; background: var(--noir) !important; }
.lp-main { background: #fff; }
.lp-article p, .lp-article li { color: var(--muted); }
.lp-article a { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.lp-article h2, .lp-article h3 { letter-spacing: -0.03em; }
.lp-card, .lp-box, .lp-cta, .ref__card, .cta__card { background: var(--bg-2) !important; border: 0 !important; border-radius: 24px !important; box-shadow: none !important; }
.lp-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.3s !important; }
.lp-card:hover { background: #fff !important; box-shadow: var(--ombre-forte) !important; }
.lp-card .ico, .perk__icon, .step__icon, .lp-list .icon { color: var(--noir) !important; background: #fff !important; border: 0 !important; border-radius: 14px !important; }
.lp-card:hover .ico { background: var(--rouge) !important; color: #0b0b0c !important; }
.lp-card h3, .lp-box h2, .lp-cta .h3, .lp-cta h2 { color: var(--noir) !important; }
.lp-card p, .lp-box p { color: var(--muted) !important; }
.lp-cta { background: var(--noir) !important; }
.lp-cta .h3, .lp-cta h2, .lp-cta b, .lp-cta strong { color: #fff !important; }
.lp-cta p { color: #a1a1a6 !important; }
.lp-cta .btn--outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.lp-cta .btn--outline:hover { background: #fff !important; color: var(--noir) !important; }
.lp-aside .lp-box:first-child { background: var(--noir) !important; }
.lp-aside .lp-box:first-child h2, .lp-aside .lp-box:first-child b, .lp-aside .lp-box:first-child strong { color: #fff !important; }
.lp-aside .lp-box:first-child p, .lp-aside .lp-box:first-child li { color: #a1a1a6 !important; }
.lp-aside .lp-box:first-child .kicker { color: #d3bc97 !important; }
.lp-aside .lp-box:first-child .btn--outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.lp-box ul a { color: var(--noir) !important; border-color: var(--line) !important; }
.lp-box ul a .icon { color: var(--rouge) !important; }
.lp-box ul a[aria-current="page"] { color: var(--rouge) !important; }
.lp-zones span { background: #fff !important; border-color: var(--line) !important; color: var(--noir) !important; }
.lp-steps li { color: var(--muted) !important; }
.lp-steps li b { color: var(--noir) !important; }
.lp-steps li { background: var(--bg-2) !important; border: 0 !important; border-radius: 20px !important; }
.lp-steps li::before { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--rouge) !important; -webkit-text-fill-color: var(--rouge) !important; font-family: var(--font-display) !important; font-style: normal !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -0.02em; top: 19px !important; }
.lp-photo { border-radius: 28px !important; overflow: hidden; }
.ref-galerie figcaption { background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important; }
.ref__photo::before { display: none !important; }
.ref__badge { background: rgba(255, 255, 255, 0.92) !important; color: var(--noir) !important; border-color: var(--line) !important; }
.page-fermee { background: #fff; }

/* ---------- Tarifs ---------- */
.tf-hero { background: #fff !important; border: 0 !important; }
.tf-carte { background: var(--bg-2) !important; border: 0 !important; border-radius: 26px !important; }
.tf-carte:hover { background: #fff !important; box-shadow: var(--ombre-forte) !important; }
.tf-carte--vedette { background: var(--noir) !important; border: 0 !important; }
.tf-carte.tf-carte--vedette h3, .tf-carte.tf-carte--vedette .tf-prix b, .tf-carte.tf-carte--vedette b { color: #fff !important; }
.tf-carte.tf-carte--vedette .tf-carte__desc, .tf-carte.tf-carte--vedette ul, .tf-carte.tf-carte--vedette li, .tf-carte--vedette .tf-prix small, .tf-carte--vedette .tf-prix span { color: #a1a1a6 !important; }
.tf-carte--vedette .tf-prix { border-color: rgba(255, 255, 255, 0.12) !important; }
.tf-carte--vedette:hover { background: var(--noir) !important; }
.tf-carte h3, .tf-prix b, .tf-lignes b { color: var(--noir) !important; }
.tf-carte__desc, .tf-carte ul { color: var(--muted) !important; }
.tf-carte ul li::before { background: var(--rouge) !important; }
.tf-prix, .tf-lignes, .tf-lignes p { border-color: var(--line) !important; }
.tf-majorations { background: var(--bg-2); border: 0 !important; border-radius: 20px !important; }
.tf-majorations li em { color: var(--rouge) !important; }
.tf-tableau { background: #fff; border-color: var(--line) !important; border-radius: 24px !important; }
.tf-tableau th { background: var(--bg-2) !important; color: var(--muted-2) !important; border-color: var(--line) !important; }
.tf-tableau td { border-color: var(--line) !important; color: var(--muted) !important; }
.tf-tableau td:not(:first-child), .tf-tableau td b { color: var(--noir) !important; }
.tf-tableau tbody tr { transition: background-color 0.2s; }
.tf-tableau tbody tr:hover { background: var(--bg-2) !important; }
.tf-estim { background: var(--bg-2) !important; border: 0 !important; border-radius: 36px !important; }
.tf-calc { background: #fff !important; border: 0 !important; border-radius: 24px !important; box-shadow: var(--ombre); }
.tf-champ span { color: var(--muted) !important; }
.tf-champ select, .tf-champ input { background: #fff !important; color: var(--noir) !important; border-color: var(--line-strong) !important; border-radius: 12px !important; }
.tf-champ select:focus, .tf-champ input:focus { border-color: var(--noir) !important; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06); }
.tf-resultat { border-color: var(--line) !important; }
.tf-resultat b { color: var(--noir) !important; }
.tf-mention a { color: var(--noir) !important; }

/* ---------- Pied de page ---------- */
.footer { background: var(--bg-2) !important; border-top: 0 !important; }
.footer h4 { color: var(--noir) !important; letter-spacing: 0.04em !important; }
.footer ul a, .footer__about p, .footer__contact li, .footer__contact a { color: var(--muted) !important; }
.footer ul a { transition: color 0.2s; }
.footer ul a:hover, .footer__contact a:hover { color: var(--noir) !important; }
.footer__contact .icon { color: var(--rouge) !important; }
.footer__zones, .footer__zones a, .footer__legal, .footer__legal p { color: var(--muted-2) !important; }
.footer__zones a:hover { color: var(--noir) !important; }
.footer__legal { border-color: var(--line) !important; }
.footer__legal a { color: var(--noir) !important; }

/* ---------- Devis, avis, recrutement, merci, mentions ---------- */
.form-card, .rv-summary, .apply-card, .board, .summary, .next li, .quote__urgent, .legal table, .legal section {
  background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--ombre) !important;
}
.form-card { border-radius: 28px !important; }
.form-card__head { background: var(--bg-2) !important; border-color: var(--line) !important; }
.opt__card { background: #fff !important; border-color: var(--line-strong) !important; border-radius: 16px !important; transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease) !important; }
.opt__card:hover { transform: translateY(-2px); }
.opt input:checked + .opt__card { border-color: var(--noir) !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--noir) !important; }
.opt__card b, .opt__card strong { color: var(--noir) !important; }
.input, input.input, textarea.input, select.input { background: #fff !important; color: var(--noir) !important; border-color: var(--line-strong) !important; border-radius: 12px !important; }
.input:focus { border-color: var(--noir) !important; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06) !important; }
select.input option { background: #fff !important; color: var(--noir); }
.stepper button { color: var(--muted) !important; }
.stepper button i { background: var(--bg-2) !important; border-color: var(--line) !important; color: var(--muted) !important; }
.stepper button.is-current i, .stepper button.is-done i { background: var(--noir) !important; color: #fff !important; border-color: var(--noir) !important; }
.rv-summary p, .job p, .summary p { color: var(--muted) !important; }
.rv-hero__photo::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0.2) 75%) !important; }
.rv-form-aside figure::after, .apply__photo::after { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45)) !important; }
.board { background: #fff !important; }
.board__item { background: var(--bg-2) !important; border-color: transparent !important; }
.board__ico, .job__ico, .steps4 li::before { background: var(--bg-2) !important; color: var(--noir) !important; border: 0 !important; }
.steps4 .dot { background: var(--noir) !important; color: #fff !important; }
.job { background: var(--bg-2) !important; border: 0 !important; border-radius: 22px !important; }
.summary { border-radius: 24px !important; }
.next li { border-radius: 18px !important; }

/* ---------- Assistant du site : version claire ---------- */
.as-lanceur { border: 0 !important; box-shadow: 0 16px 34px -14px rgba(172, 134, 74, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.2) !important; }
.as-lanceur.is-ouvert { background: var(--noir) !important; }
.as-panneau { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 26px !important; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.4) !important; }
.as-tete { background: rgba(255, 255, 255, 0.95) !important; border-color: var(--line) !important; }
.as-tete b { color: var(--noir) !important; }
.as-tete small { color: var(--muted-2) !important; }
.as-panneau.is-equipe .as-tete small { color: var(--rouge) !important; }
.as-tete__fermer { background: var(--bg-2) !important; color: var(--noir) !important; border-radius: 999px !important; }
.as-tete__fermer:hover { background: #ebe4d8 !important; }
.as-fil { background: #fff; }
.as-msg { border-radius: 20px !important; }
.as-msg--robot { background: var(--bg-2) !important; color: var(--noir) !important; border-bottom-left-radius: 6px !important; }
.as-msg--equipe { background: #fff !important; color: var(--noir) !important; border: 1px solid rgba(172, 134, 74, 0.35) !important; }
.as-msg small { color: var(--rouge) !important; }
.as-msg--visiteur { background: var(--noir) !important; color: #fff !important; border-bottom-right-radius: 6px !important; }
.as-msg--saisie span { background: #a1a1a6 !important; }
.as-puce { color: var(--noir) !important; border-color: var(--line-strong) !important; background: #fff !important; }
.as-puce:hover { background: var(--noir) !important; color: #fff !important; border-color: var(--noir) !important; }
.as-puce--conseiller { color: var(--rouge) !important; border-color: rgba(172, 134, 74, 0.4) !important; }
.as-puce--conseiller:hover { background: var(--rouge) !important; color: #0b0b0c !important; border-color: var(--rouge) !important; }
.as-carte, .as-form { background: var(--bg-2) !important; border: 0 !important; border-radius: 18px !important; }
.as-carte p, .as-form b { color: var(--noir) !important; }
.as-form small { color: var(--muted) !important; }
.as-input, .as-champ { background: #fff !important; color: var(--noir) !important; border-color: var(--line-strong) !important; }
.as-input:focus, .as-champ:focus { border-color: var(--noir) !important; }
.as-champ { border-radius: 999px !important; padding-inline: 18px !important; }
.as-envoyer { border-radius: 999px !important; }
.as-btn { border-radius: 999px !important; }
.as-saisie, .as-pied { background: #fff !important; border-color: var(--line) !important; }
.as-pied a, .as-pied button { color: var(--muted-2) !important; }
.as-pied a:hover, .as-pied button:hover { color: var(--noir) !important; }
.as-teaser { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid var(--line) !important; box-shadow: var(--ombre-forte) !important; border-radius: 20px !important; backdrop-filter: blur(14px); }
.as-teaser b { color: var(--noir) !important; }
.as-teaser p { color: var(--muted) !important; }
.as-teaser__x { color: var(--muted-2) !important; }
.wa { background: #fff !important; color: var(--noir) !important; border: 1px solid var(--line) !important; }

/* Listes de points (« Ce que comprend le prix »…) : cartes séparées */
.ac-points { background: transparent !important; border: 0 !important; gap: 14px !important; border-radius: 0 !important; overflow: visible !important; }
.ac-points li { background: var(--bg-2) !important; border-radius: 22px; padding: 26px !important; transition: background-color 0.3s, box-shadow 0.5s var(--ease), transform 0.5s var(--ease) !important; }
.ac-points li:hover { background: #fff !important; box-shadow: var(--ombre-forte); transform: translateY(-4px) !important; }
.ac-points b { font-size: 17px; letter-spacing: -0.02em; }
.ac-points span { color: var(--muted) !important; }

/* Page Avis */
.rv-hero__photo img { filter: none !important; }
.rv-hero__photo::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.92) 22%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, transparent 70%, #fff) !important; }
.rv-summary { background: rgba(255, 255, 255, 0.94) !important; border: 0 !important; border-radius: 26px !important; box-shadow: var(--ombre-forte) !important; backdrop-filter: blur(14px); }
.rv-summary__avg { background: none !important; color: var(--noir) !important; -webkit-text-fill-color: var(--noir); font-weight: 800 !important; letter-spacing: -0.04em; }
.stars .off { color: rgba(0, 0, 0, 0.12) !important; }
.rv-card { background: var(--bg-2) !important; border: 0 !important; border-radius: 24px !important; }
.rv-card:hover { background: #fff !important; box-shadow: var(--ombre-forte); }
.rv-card p, .rv-card__txt { color: var(--muted) !important; }
.rv-card b, .rv-card__nom { color: var(--noir) !important; }
.rv-card__tag { color: var(--rouge) !important; background: rgba(172, 134, 74, 0.07) !important; border-color: transparent !important; }
.rv-note { background: var(--bg-2) !important; border: 0 !important; border-radius: 18px !important; }
.rv-empty { background: var(--bg-2) !important; border: 0 !important; }
@media (max-width: 900px) { .rv-hero__photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.95) 60%, #fff) !important; } }

/* Références : légendes sur photo en blanc, titres aérés */
.ref__caption, .ref__caption b, .ref__caption span, .ref-galerie figcaption { color: #fff !important; }
.ref__caption { background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)) !important; }
.lp-main section > .h2 + .lp-cards, .lp-main section > .h2 + .ref-galerie, .lp-main section > .h2 + .lp-list, .lp-article .h2 + .lp-cards { margin-top: clamp(22px, 3vw, 36px); }

/* En-têtes de page : apparition au chargement (sans attendre le scroll) */
.jobs-hero [data-reveal], .lp-hero [data-reveal], .rv-hero [data-reveal], .tf-hero [data-reveal], .hero [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; animation: monte-doux 1s var(--ease) both; animation-delay: var(--d, 0ms); }
.jobs-hero [data-reveal="fade"], .lp-hero [data-reveal="fade"], .rv-hero [data-reveal="fade"] { animation-name: apparait; }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jobs-hero [data-reveal], .lp-hero [data-reveal], .rv-hero [data-reveal], .tf-hero [data-reveal], .hero [data-reveal] { animation: none !important; } }
.board { box-shadow: var(--ombre-forte) !important; border: 0 !important; border-radius: 26px !important; }
.rv-hero__photo { overflow: hidden; }

/* =========================================================
   VERSION 2.1 — en-tête centré, menus plein écran, assistant
   mis en avant, effets supplémentaires
   ========================================================= */
html { scroll-behavior: smooth; }
:root { --nav-h: 72px; }

/* ---------- En-tête : écusson seul, nom au centre ---------- */
.nav { height: var(--nav-h) !important; transition: height 0.45s var(--ease), background-color 0.3s, border-color 0.3s, box-shadow 0.4s !important; }
.nav.is-compact { height: 60px !important; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.35); }
.nav__inner { position: relative; width: min(1360px, 100% - 2 * var(--gutter)) !important; height: 100%; gap: 4px !important; }
.brand { flex: none; gap: 0 !important; }
.brand__mark { width: 54px !important; height: auto !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); transition: transform 0.7s var(--ease), width 0.45s var(--ease) !important; }
.nav.is-compact .brand__mark { width: 46px !important; }
.brand:hover .brand__mark { transform: rotate(-7deg) scale(1.07) !important; }
.brand__text { display: none !important; }
.nav__links { margin-left: 0; }
.nav .brand, .footer .brand { display: none !important; } /* plus de personnage : le nom BDA suffit (en-tête au centre, grand logo en bas) */
.nav__links--d { margin-left: auto; margin-right: 6px; }
.nav__marque {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--noir); white-space: nowrap; padding-left: 0.3em; transition: letter-spacing 0.6s var(--ease), color 0.3s;
  animation: marque-arrive 1.2s 0.1s var(--ease) both;
}
.nav__marque span { color: var(--rouge); }
.nav__marque:hover { letter-spacing: 0.38em; }
@keyframes marque-arrive { from { opacity: 0; letter-spacing: 0.7em; filter: blur(6px); } to { opacity: 1; filter: none; } }
.nav__actions { margin-left: 0 !important; }
.nav__actions .btn--gold { display: none !important; }
@media (max-width: 1500px) { .nav__tel span { display: none; } .nav__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line-strong) !important; border-radius: 999px !important; } }
@media (max-width: 1320px) { .nav__marque { font-size: 14px; letter-spacing: 0.22em; } .nav__links > a, .nav__drop-btn { padding: 10px 10px !important; font-size: 13px !important; } }
@media (max-width: 1180px) { .nav__marque { font-size: 15px; letter-spacing: 0.26em; } .nav__links--d { display: none !important; } }
@media (max-width: 640px) { .nav__marque { font-size: 13px; letter-spacing: 0.2em; } .brand__mark { width: 46px !important; } }
@media (max-width: 380px) { .nav__marque { font-size: 12px; letter-spacing: 0.14em; } }
/* Pages à en-tête simplifié (devis, merci) : les actions à droite */
.nav__marque + .nav__actions { margin-left: auto !important; }
/* Version anglaise : le nom reste à côté du logo (menu plus long) */
.nav__marque.nav__marque--gauche { position: static; transform: none; margin-left: 0; font-size: 14px; }

/* ---------- Survol du menu : le reste du site s'assombrit ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 58; pointer-events: none;
  background: rgba(10, 10, 12, 0.32); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s 0.45s;
}
@media (hover: hover) and (pointer: fine) {
  body:has(.nav__links:hover)::after, body:has(.nav__drop.is-open)::after { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease), visibility 0s; }
  body:has(.nav__links:hover) .nav, body:has(.nav__drop.is-open) .nav { background: #fff !important; border-bottom-color: transparent !important; }
}

/* ---------- Menus déroulants plein écran (façon grandes marques) ---------- */
@media (min-width: 1181px) {
  .nav__drop { position: static !important; }
  .nav__panel, .nav__panel--large {
    position: fixed !important; left: 0 !important; right: 0 !important; top: 100% !important; transform: none !important;
    min-width: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 0 32px 32px !important;
    background: #fff !important; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.3) !important;
    padding: 34px max(var(--gutter), calc((100vw - 1180px) / 2)) 44px !important;
    animation: menu-descend 0.55s var(--ease) both !important; backdrop-filter: none !important;
  }
  .nav__panel::before { top: -20px !important; height: 20px !important; }
  .nav__panel--large { grid-template-columns: 1.3fr 1fr 1fr !important; gap: 40px !important; }
  .nav__panel:not(.nav__panel--large) .nav__col { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; }
  .nav__col { gap: 4px !important; }
  .nav__col > * { animation: monte-doux 0.6s var(--ease) both; }
  .nav__col > :nth-child(2) { animation-delay: 0.03s; } .nav__col > :nth-child(3) { animation-delay: 0.06s; } .nav__col > :nth-child(4) { animation-delay: 0.09s; }
  .nav__col > :nth-child(5) { animation-delay: 0.12s; } .nav__col > :nth-child(n + 6) { animation-delay: 0.15s; }
  .nav__col a { border-radius: 14px !important; padding: 10px 14px !important; }
  .nav__col a b { font-family: var(--font-display) !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -0.025em !important; }
  .nav__col a small { font-size: 13.5px !important; }
  .nav__col--simple a { font-size: 15px !important; color: var(--muted) !important; padding: 7px 14px !important; }
  .nav__col--simple a:hover { color: var(--noir) !important; }
  .nav__col a:hover { padding-left: 20px !important; }
  .nav__col-titre { padding: 0 14px 8px !important; color: var(--rouge) !important; letter-spacing: 0.12em !important; }
}
@keyframes menu-descend { from { opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 32px 32px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0 0 32px 32px); } }

/* ---------- Pastille « Assistant en ligne » de l'en-tête ---------- */
.ac-pilule { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--noir); transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.ac-pilule i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.ac-pilule i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; animation: pulsation 2s ease-out infinite; }
@keyframes pulsation { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.ac-pilule .icon { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--noir); color: #fff; transition: transform 0.4s var(--ease), background-color 0.3s; }
.ac-pilule:hover { background: #fff; border-color: var(--line-strong); transform: translateY(-1px); }
.ac-pilule:hover .icon { transform: translateX(3px); background: var(--rouge); }

/* ---------- En-tête de l'accueil : lueurs qui dérivent ---------- */
.ac-hero::after { animation: derive 18s ease-in-out infinite alternate; }
.ac-hero::before { content: "" !important; display: block !important; position: absolute; z-index: 0; inset: auto auto -30% -15%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.045), rgba(0, 0, 0, 0)) !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; animation: derive 22s ease-in-out infinite alternate-reverse; pointer-events: none; }
@keyframes derive { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 10%) scale(1.15); } }
.ac-hero__texte, .tel { will-change: transform; }

/* ---------- Section assistant ---------- */
.ac-ia { position: relative; overflow: hidden; background: var(--noir); color: #a1a1a6; isolation: isolate; }
.ac-ia::before { content: ""; position: absolute; z-index: -1; right: -15%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(172, 134, 74, 0.32), rgba(172, 134, 74, 0)); animation: derive 14s ease-in-out infinite alternate; }
.ac-ia::after { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -50%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)); animation: derive 17s ease-in-out infinite alternate-reverse; }
.ac-ia__grille { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.ac-ia__texte { display: grid; gap: 22px; justify-items: start; }
.ac-ia .kicker { color: #d3bc97 !important; }
.ac-ia .h2 { color: #fff !important; }
.ac-ia .lead { color: #a1a1a6 !important; max-width: 520px; }
.ia-champ { position: relative; width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 999px; background: #fff; isolation: isolate; margin-top: 6px; }
.ia-champ__anneau { position: absolute; z-index: -2; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--angle, 0deg), rgba(172, 134, 74, 0), #ac864a, #dccaad, rgba(172, 134, 74, 0) 40%); animation: anneau 4s linear infinite; filter: blur(0.5px); }
.ia-champ__anneau::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: inherit; filter: blur(14px); opacity: 0.55; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes anneau { to { --angle: 360deg; } }
.ia-champ::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; }
.ia-champ__ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--rouge); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ia-champ input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font: 500 17px var(--font-body); color: var(--noir); }
.ia-champ input::placeholder { color: #86868b; }
.ia-champ button { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--noir); color: #fff; cursor: pointer; transition: background-color 0.3s, transform 0.4s var(--ease); }
.ia-champ button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ia-champ button:hover { background: var(--rouge); transform: scale(1.06) rotate(-8deg); }
.ia-champ:focus-within .ia-champ__anneau { animation-duration: 1.6s; }
.ia-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-puces button { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: #f7f3ec; font: 500 14px var(--font-body); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease), color 0.3s; }
.ia-puces button:hover { background: #fff; color: var(--noir); border-color: #fff; transform: translateY(-2px); }

/* Fenêtre de démonstration */
.ac-ia__demo { display: grid; justify-items: center; perspective: 1400px; }
.ia-fenetre { width: min(420px, 100%); border-radius: 28px; background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; transform: rotateY(-10deg) rotateX(4deg); transform-style: preserve-3d; transition: transform 1.2s var(--ease); animation: flotte-doux 8s ease-in-out infinite; }
.ac-ia__demo:hover .ia-fenetre { transform: none; }
@keyframes flotte-doux { 50% { translate: 0 -10px; } }
.ia-fenetre__tete { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ia-fenetre__tete img { width: 40px; height: auto; }
.ia-fenetre__tete b { display: block; color: var(--noir); font-size: 15px; }
.ia-fenetre__tete small { display: flex; align-items: center; gap: 6px; color: #86868b; font-size: 12.5px; }
.ia-fenetre__tete small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.ia-fenetre__fil { display: flex; flex-direction: column; gap: 8px; height: 330px; padding: 18px 16px; overflow: hidden; justify-content: flex-end; }
.ia-bulle { max-width: 84%; margin: 0; padding: 10px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.45; animation: bulle-arrive 0.45s var(--ease) both; }
.ia-bulle b { color: inherit; }
.ia-bulle--moi { align-self: flex-end; background: var(--noir); color: #fff; border-bottom-right-radius: 6px; min-height: 1.45em; }
.ia-bulle--robot { align-self: flex-start; background: var(--bg-2); color: var(--noir); border-bottom-left-radius: 6px; }
.ia-bulle--saisie { display: flex; gap: 4px; padding: 13px 15px; }
.ia-bulle--saisie span { width: 7px; height: 7px; border-radius: 50%; background: #a1a1a6; animation: saisie 1.2s ease-in-out infinite; }
.ia-bulle--saisie span:nth-child(2) { animation-delay: 0.15s; } .ia-bulle--saisie span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bulle-arrive { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.ia-fenetre__fil.is-anime .ia-bulle { display: none; }
.ia-fenetre__fil.is-anime .ia-bulle.on { display: block; }
.ia-fenetre__fil.is-anime .ia-bulle--saisie.on { display: flex; }
.ia-fenetre__fil.is-fin .ia-bulle { opacity: 0; transition: opacity 0.6s; }
.ia-bulle--moi.ecrit::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #fff; animation: curseur 0.9s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.ia-fenetre__pied { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 16px; padding: 12px 16px; border-radius: 999px; background: var(--bg-2); color: #86868b; font-size: 14px; }
.ia-fenetre__pied i { width: 30px; height: 30px; border-radius: 50%; background: var(--noir); }
@media (max-width: 900px) { .ac-ia__grille { grid-template-columns: 1fr; } .ia-fenetre { transform: none; } .ia-fenetre__fil { height: 290px; } }
@media (max-width: 560px) { .ia-champ input { font-size: 16px; } .ac-ia__demo { display: none; } }

/* ---------- Titres de section : les mots montent un par un ---------- */
.h2.mots .mot > span, .manifeste.mots .mot > span { animation: none; transform: translateY(105%); opacity: 0; transition: transform 0.95s var(--ease), opacity 0.95s var(--ease); transition-delay: calc(var(--m) * 0.045s); }
.h2.mots.vu .mot > span, .manifeste.mots.vu .mot > span { transform: none; opacity: 1; }

/* ---------- Tuiles : arrivée avec léger zoom ---------- */
.rv.rv--zoom { transform: translateY(40px) scale(0.94); }
.rv.rv--zoom.vu { transform: none; }
.tuile.rv.vu:hover { transform: translateY(-6px); transition-delay: 0s !important; }
.tuile { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), opacity 1s var(--ease), filter 1s var(--ease) !important; }

/* ---------- Photo de référence : voile qui se lève ---------- */
.ac-ref__photo { clip-path: inset(0 0 0 0 round 32px); }
.ac-ref__photo.rv { clip-path: inset(18% 8% 18% 8% round 32px); opacity: 1 !important; filter: none !important; transform: none !important; transition: clip-path 1.4s var(--ease) !important; }
.ac-ref__photo.rv.vu { clip-path: inset(0 0 0 0 round 32px); }

/* ---------- Pied de page : grand nom de marque ---------- */
.footer { overflow: hidden; }
.footer .container::after {
  content: "BDA"; display: block; margin: clamp(30px, 5vw, 60px) 0 calc(-0.2em); text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 12.5vw, 13rem); letter-spacing: -0.06em; line-height: 0.9;
  background: linear-gradient(180deg, #0b0b0c 0%, rgba(11, 11, 12, 0.85) 45%, rgba(11, 11, 12, 0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Divers ---------- */
.tuile__embleme { width: 66% !important; right: -6% !important; top: 4% !important; opacity: 0.2 !important; filter: grayscale(1) brightness(1.6) !important; }
@media (prefers-reduced-motion: reduce) {
  .nav__marque, .ac-hero::after, .ac-hero::before, .ac-ia::before, .ac-ia::after, .ia-champ__anneau, .ia-fenetre, .ac-pilule i::after { animation: none !important; }
  .h2.mots .mot > span, .manifeste.mots .mot > span { transform: none; opacity: 1; transition: none; }
  .ac-ref__photo.rv { clip-path: inset(0 0 0 0 round 32px); }
}
@media (max-width: 1180px) { .nav__actions { margin-left: auto !important; } }

/* =========================================================
   VERSION 2.2 — nom sur deux lignes, accueil resserré,
   nouveaux effets (soulignement, reflet, bandeau de mots,
   section qui s'élargit, repère de survol du menu)
   ========================================================= */

/* ---------- Nom au centre : « BDA » + « SECURITY GROUP » ---------- */
.nav__marque { display: grid !important; justify-items: center; gap: 4px; line-height: 1; padding-left: 0 !important; letter-spacing: 0 !important; }
.nav__marque b { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--noir); transition: letter-spacing 0.6s var(--ease), margin 0.6s var(--ease); }
.nav__marque b span { color: var(--rouge); }
.nav__marque small { font-family: var(--font-body); font-weight: 600; font-size: 9.5px; letter-spacing: 0.46em; margin-right: -0.46em; text-transform: uppercase; color: #86868b; animation: marque-sous 1.2s 0.5s var(--ease) both; }
@keyframes marque-sous { from { opacity: 0; transform: translateY(-6px); letter-spacing: 0.9em; } to { opacity: 1; transform: none; } }
.nav__marque:hover { letter-spacing: 0 !important; }
.nav__marque:hover b { letter-spacing: 0.36em; margin-right: -0.36em; }
.nav.is-compact .nav__marque small { opacity: 0.85; }
@media (max-width: 1320px) { .nav__marque b { font-size: 14px; letter-spacing: 0.24em; margin-right: -0.24em; } .nav__marque small { font-size: 8.5px; letter-spacing: 0.36em; margin-right: -0.36em; } }
@media (max-width: 640px) { .nav__marque b { font-size: 13px; letter-spacing: 0.2em; margin-right: -0.2em; } .nav__marque small { font-size: 7.5px; letter-spacing: 0.3em; margin-right: -0.3em; } }
@media (max-width: 380px) { .nav__marque b { font-size: 11.5px; letter-spacing: 0.14em; } .nav__marque small { letter-spacing: 0.22em; } }
.nav__marque--gauche { justify-items: start; }
/* Place libérée à droite : téléphone et espace client en icônes */
.nav__tel span, .nav__client span { display: none !important; }
.nav__tel { width: 44px; height: 44px; justify-content: center; padding: 0 !important; border: 1px solid var(--line-strong) !important; border-radius: 999px !important; }
.nav__client { width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center; }
.nav__tel, .nav__client { transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease) !important; }
.nav__tel:hover, .nav__client:hover { background: var(--noir) !important; border-color: var(--noir) !important; color: #fff !important; transform: translateY(-1px); text-decoration: none !important; }
.nav__tel:hover .icon, .nav__client:hover .icon { color: #fff !important; }

/* ---------- Repère qui glisse sous le lien survolé ---------- */
.nav__survol { position: absolute; z-index: 0; left: 0; top: 0; height: 38px; border-radius: 999px; background: rgba(0, 0, 0, 0.055); opacity: 0; pointer-events: none; transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s; }
.nav__survol.on { opacity: 1; }
.nav__links > a, .nav__drop-btn { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .nav__links > a:hover, .nav__drop-btn:hover, .nav__drop.is-open .nav__drop-btn { background: transparent !important; } }

/* ---------- Accueil : en-tête resserré ---------- */
.ac-hero { padding-top: calc(var(--nav-h) + clamp(18px, 3.2vw, 44px)) !important; padding-bottom: clamp(24px, 3.5vw, 48px) !important; }
.ac-hero__grille { align-items: center; }
.ac-hero__texte { gap: 22px !important; }
.ac-hero .h1 { font-size: clamp(2.5rem, 1.4rem + 3.7vw, 4.6rem); }
@media (min-width: 1021px) {
  .tel__cadre { width: 300px !important; height: 612px !important; }
  .ac-hero__visuel { padding-bottom: 24px !important; }
}
@media (min-width: 1700px) { .ac-hero__grille { grid-template-columns: 1.15fr 0.85fr; } }

/* « 24h/24. » : souligné rouge qui se dessine */
.ac-hero .h1 em {
  font-style: normal; background: linear-gradient(var(--rouge), var(--rouge)) no-repeat 0 94% / 0% 0.085em;
  animation: souligne 1.1s 1.15s var(--ease) forwards; padding-bottom: 0.02em;
}
@keyframes souligne { to { background-size: 100% 0.085em; } }

/* Badge CNAPS qui flotte doucement */
.ac-hero__badge { animation: monte-doux 1s 0.9s var(--ease) both, flotte-badge 7s 2s ease-in-out infinite !important; }
@keyframes flotte-badge { 50% { translate: 0 -8px; } }

/* ---------- Boutons rouges : reflet qui passe de temps en temps ---------- */
.btn.btn--gold::after {
  content: "" !important; display: block !important; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-12deg); animation: reflet 6s 2.5s ease-in-out infinite !important; pointer-events: none;
}
@keyframes reflet { 0%, 72% { transform: translateX(-160%) skewX(-12deg); } 88%, 100% { transform: translateX(330%) skewX(-12deg); } }

/* ---------- Bandeau de mots qui défile avec le scroll ---------- */
.defile { overflow: hidden; padding: clamp(40px, 6vw, 80px) 0; background: #fff; display: grid; gap: 6px; }
.defile__ligne { display: flex; width: max-content; margin: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.4rem + 5vw, 7rem); letter-spacing: -0.045em; line-height: 1.05; color: transparent; -webkit-text-stroke: 1.5px #c7c7cc; will-change: transform; transform: translate3d(var(--dx, 0px), 0, 0); }
.defile__ligne span { padding-right: 0.35em; }
.defile__ligne--plein { color: var(--noir); -webkit-text-stroke: 0; }

/* ---------- Section assistant : s'élargit en arrivant à l'écran ---------- */
.ac-ia { clip-path: inset(0 var(--ix, 0px) round var(--ir, 0px)); }

/* ---------- Tuiles de services : reflet au survol ---------- */
.tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0) 66%); transform: translateX(-100%); transition: transform 0.9s var(--ease); pointer-events: none; }
.tuile:not(.tuile--noire)::after { z-index: 0; }
.tuile--noire::after { background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.09) 48%, rgba(255, 255, 255, 0) 66%); }
.tuile:hover::after { transform: translateX(100%); }
.tuile > * { position: relative; z-index: 1; }
.tuile > .tuile__embleme { position: absolute; z-index: -1; }

/* ---------- Chiffres : léger rebond à l'arrivée ---------- */
.chiffres li { transition: transform 0.5s var(--ease), background-color 0.3s !important; }
.chiffres li:hover { transform: translateY(-4px); background: #efe9df; }

@media (prefers-reduced-motion: reduce) {
  .ac-hero .h1 em { animation: none; background-size: 100% 0.085em; }
  .btn.btn--gold::after, .ac-hero__badge, .nav__marque small { animation: none !important; }
  .defile__ligne { transform: none; }
  .ac-ia { clip-path: none; }
}

/* =========================================================
   VERSION 2.3 — effets « haut de gamme »
   rideau d'ouverture, notifications, cartes empilées,
   grand nom du pied de page, retour en haut, finitions
   ========================================================= */

/* ---------- Rideau d'ouverture (1re visite de la session) ---------- */
.rideau { display: none; }
html.intro .rideau {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--noir);
  animation: rideau-monte 0.9s 1.55s cubic-bezier(0.76, 0, 0.24, 1) forwards; pointer-events: none;
}
.rideau__centre { display: grid; justify-items: center; gap: 22px; }
.rideau__centre img { width: 120px; height: auto; animation: rideau-logo 1s 0.05s var(--ease) both; filter: drop-shadow(0 20px 40px rgba(172, 134, 74, 0.35)); }
.rideau__centre p { margin: 0; display: grid; justify-items: center; gap: 8px; overflow: hidden; }
.rideau__centre b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.34em; margin-right: -0.34em; color: #fff; animation: rideau-texte 1s 0.3s var(--ease) both; }
.rideau__centre b span { color: var(--rouge); }
.rideau__centre small { font-size: 11px; font-weight: 600; letter-spacing: 0.5em; margin-right: -0.5em; text-transform: uppercase; color: #86868b; animation: rideau-texte 1s 0.45s var(--ease) both; }
.rideau__barre { width: 160px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; }
.rideau__barre::after { content: ""; position: absolute; inset: 0; background: var(--rouge); transform-origin: left; animation: rideau-barre 1.3s 0.2s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes rideau-logo { from { opacity: 0; transform: scale(0.6) rotate(-10deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rideau-texte { from { opacity: 0; transform: translateY(100%); letter-spacing: 0.8em; } to { opacity: 1; transform: none; } }
@keyframes rideau-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rideau-monte { to { transform: translateY(-100%); visibility: hidden; } }
/* Pendant le rideau, l'arrivée de l'accueil est décalée */
html.intro .ac-hero__texte > :nth-child(1) { animation-delay: 1.75s !important; }
html.intro .ac-hero__texte > :nth-child(2) { animation-delay: 1.85s !important; }
html.intro .ac-hero__texte > :nth-child(3) { animation-delay: 2.1s !important; }
html.intro .ac-hero__texte > :nth-child(4) { animation-delay: 2.2s !important; }
html.intro .ac-hero .mot > span { animation-delay: calc(1.85s + var(--m) * 0.055s); }
html.intro .ac-hero__visuel { animation-delay: 1.9s !important; }
html.intro .ac-hero__badge { animation-delay: 2.6s, 4s !important; }
html.intro .ac-hero .h1 em { animation-delay: 2.9s; }
html.intro .nav__marque, html.intro .nav__marque small { animation-delay: 1.7s; }
html.intro .notif--1 { animation-delay: 3s, 4s !important; }
html.intro .notif--2 { animation-delay: 3.6s, 4.6s !important; }

/* ---------- Notifications autour du téléphone ---------- */
.notif {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); white-space: nowrap;
}
.notif b { display: block; font-size: 14px; color: var(--noir); }
.notif small { display: block; font-size: 12px; color: #86868b; }
.notif__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--noir); }
.notif__ico svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notif__ico--ok { background: #22c55e; }
.notif--1 { left: -6%; top: 26%; animation: notif-arrive 0.9s 1.4s var(--ease) both, flotte-badge 6s 2.5s ease-in-out infinite; }
.notif--2 { right: -8%; top: 58%; animation: notif-arrive 0.9s 2s var(--ease) both, flotte-badge 7s 3s ease-in-out infinite; }
@keyframes notif-arrive { from { opacity: 0; transform: translateY(18px) scale(0.85); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 1020px) { .notif { display: none; } }
.ac-hero--logo .notif { display: none; }

/* ---------- Pastille : texte qui change (flip) ---------- */
.ac-pilule__txt { display: inline-block; transition: transform 0.45s var(--ease), opacity 0.35s; }
.ac-pilule__txt.sort { transform: translateY(-110%); opacity: 0; }
.ac-pilule__txt.entre { transform: translateY(110%); opacity: 0; transition: none; }
.ac-pilule { overflow: hidden; }

/* ---------- Étapes : cartes qui s'empilent au scroll (ordinateur) ---------- */
.ac-etapes--cartes .etape__ico { display: none; }
@media (min-width: 1021px) {
  .ac-etapes.ac-etapes--cartes { display: block !important; max-width: 1100px; margin: 0 auto; }
  .ac-etapes--cartes::before, .ac-etapes--cartes::after, .ac-etapes--cartes li::before { display: none !important; }
  .ac-etapes--cartes li {
    position: sticky !important; top: calc(var(--nav-h) + 36px + var(--k, 0) * 22px); margin: 0 0 34px !important;
    display: grid !important; grid-template-columns: 220px 1fr auto; align-items: center; gap: 30px !important;
    min-height: 250px; padding: 40px 54px !important; border-radius: 32px !important; background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 -18px 50px -30px rgba(0, 0, 0, 0.25) !important; transform-origin: 50% 0;
    transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), box-shadow 0.4s !important;
  }
  .ac-etapes--cartes li:nth-child(1) { --k: 0; } .ac-etapes--cartes li:nth-child(2) { --k: 1; }
  .ac-etapes--cartes li:nth-child(3) { --k: 2; } .ac-etapes--cartes li:nth-child(4) { --k: 3; background: var(--noir) !important; }
  .ac-etapes--cartes li > span { font-family: var(--font-display) !important; font-weight: 800; font-size: 150px !important; line-height: 0.8; letter-spacing: -0.06em !important; color: transparent !important; -webkit-text-stroke: 2px var(--rouge); }
  .ac-etapes--cartes li b { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem) !important; letter-spacing: -0.04em !important; line-height: 1.05; }
  .ac-etapes--cartes li p { font-size: 19px !important; margin-top: 10px; }
  .ac-etapes--cartes li:nth-child(4) b { color: #fff !important; }
  .ac-etapes--cartes li:nth-child(4) p { color: #a1a1a6 !important; }
  .ac-etapes--cartes .etape__ico { display: block; width: 96px; height: 96px; padding: 26px; border-radius: 28px; background: var(--bg-2); fill: none; stroke: var(--noir); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ac-etapes--cartes li:nth-child(4) .etape__ico { background: var(--rouge); stroke: #fff; }
  .ac-etapes--cartes li:hover { transform: none !important; }
  .ac-etapes--cartes li.cascade { transform: none !important; }
}

/* ---------- Petits titres : le texte se resserre, un trait rouge se dessine ---------- */
.kicker.rv { letter-spacing: 0.3em !important; transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease), letter-spacing 1.2s var(--ease) !important; }
.kicker.rv.vu { letter-spacing: 0.08em !important; }
.kicker.rv::before { content: "" !important; display: inline-block !important; width: 0 !important; height: 2px !important; margin-right: 0; vertical-align: middle; background: var(--rouge) !important; transition: width 0.9s 0.3s var(--ease), margin 0.9s 0.3s var(--ease); }
.kicker.rv.vu::before { width: 22px !important; margin-right: 10px; }

/* ---------- Grand nom du pied de page : lettres qui montent ---------- */
.footer.a-marque .container::after { display: none !important; }
.pied-marque { display: flex; justify-content: center; overflow: hidden; margin: clamp(30px, 5vw, 60px) 0 -0.2em; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 12.5vw, 13rem); letter-spacing: -0.06em; line-height: 0.95; white-space: nowrap; user-select: none; }
.pied-marque span { display: inline-block; background: linear-gradient(180deg, #0b0b0c 0%, rgba(11, 11, 12, 0.85) 45%, rgba(11, 11, 12, 0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(100%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--l) * 0.045s); }
.pied-marque span.rouge { background: linear-gradient(180deg, #ac864a 0%, rgba(172, 134, 74, 0.8) 45%, rgba(172, 134, 74, 0) 100%); -webkit-background-clip: text; background-clip: text; }
.pied-marque.vu span { transform: none; }
.pied-marque .espace { width: 0.28em; }

/* ---------- Bouton « retour en haut » avec anneau de progression ---------- */
.haut-page { position: fixed; left: 24px; bottom: 24px; z-index: 85; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity 0.4s, transform 0.5s var(--ease), background-color 0.3s; }
.haut-page.on { opacity: 1; transform: none; pointer-events: auto; }
.haut-page:hover { background: var(--noir); }
.haut-page:hover .haut-page__fleche { stroke: #fff; }
.haut-page svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.haut-page__anneau { fill: none; stroke: var(--rouge); stroke-width: 2.5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.haut-page__fleche { position: relative !important; inset: auto !important; width: 20px !important; height: 20px !important; fill: none; stroke: var(--noir); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
@media (max-width: 640px) { .haut-page { display: none; } }

/* ---------- Photos des pages intérieures : voile qui se lève + zoom ---------- */
.lp-photo.rv { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: inset(14% 6% 14% 6% round 28px); transition: clip-path 1.4s var(--ease) !important; }
.lp-photo.rv.vu { clip-path: inset(0 round 28px); }
.lp-photo.rv img { transform: scale(1.18); transition: transform 2s var(--ease); }
.lp-photo.rv.vu img { transform: none; }

/* ---------- Liens du pied de page : trait qui se dessine ---------- */
.footer ul a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; padding-bottom: 2px; transition: background-size 0.45s var(--ease), color 0.2s !important; }
.footer ul a:hover { background-size: 100% 1px; }

/* ---------- Tarifs : séparations qui se dessinent, prix qui ressortent ---------- */
.ac-tarifs li { position: relative; padding-left: 22px; }
.ac-tarifs li::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: rgba(255, 255, 255, 0.18); transform: scaleY(0); transform-origin: top; transition: transform 1s 0.3s var(--ease); }
.ac-tarifs li.is-in::before { transform: none; }
.ac-tarifs li b { transition: color 0.3s; }
.ac-tarifs li:hover b { color: #d3bc97 !important; }

@media (prefers-reduced-motion: reduce) {
  html.intro .rideau { display: none; }
  .notif { animation: none !important; }
  .pied-marque span { transform: none; transition: none; }
  .lp-photo.rv { clip-path: none; } .lp-photo.rv img { transform: none; }
}
.rideau__centre b { text-transform: uppercase; }

/* =========================================================
   VERSION 2.4 — premier écran plein, icônes qui se dessinent,
   reflets et finitions supplémentaires
   ========================================================= */

/* ---------- Accueil : le premier écran remplit exactement la fenêtre
   (en-tête + bande des garanties), quel que soit le navigateur ---------- */
@media (min-width: 1021px) and (min-height: 620px) {
  .ac-hero { min-height: calc(100svh - var(--garanties-h, 70px)); display: grid; align-content: center; box-sizing: border-box; }
}

/* ---------- Icônes qui se dessinent à leur apparition ---------- */
.tuile__ico, .ac-garanties__liste .icon, .etape__ico, .ac-moyen .icon {
  stroke-dasharray: 140; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s 0.35s var(--ease), transform 0.5s var(--ease), background-color 0.4s, stroke 0.4s !important;
}
.tuile.rv:not(.vu) .tuile__ico, .ac-etapes li.cascade:not(.is-in) .etape__ico, .ac-contact__moyens > .cascade:not(.is-in) .icon { stroke-dashoffset: 140; }

/* ---------- Garanties : survol ---------- */
.ac-garanties__liste li { transition: background-color 0.35s, opacity 0.9s var(--ease), transform 1s var(--ease), filter 0.9s var(--ease) !important; border-radius: 14px; }
.ac-garanties__liste li:hover { background: var(--bg-2); }
.ac-garanties__liste li:hover .icon { transform: scale(1.15) rotate(-6deg); }

/* ---------- Chiffres : trait rouge qui se remplit ---------- */
.chiffres li { position: relative; overflow: hidden; }
.chiffres li::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 18px; height: 3px; border-radius: 3px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform 1.8s 0.5s var(--ease); }
.chiffres li.vu::after { transform: scaleX(1); }
.chiffres li { padding-bottom: 36px !important; }

/* ---------- « SÉCURITÉ » du haut : reflet lumineux de temps en temps ---------- */
.nav__marque b span {
  background: linear-gradient(100deg, #ac864a 0%, #ac864a 42%, #e1d1b8 50%, #ac864a 58%, #ac864a 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: brille 6s 2.5s ease-in-out infinite;
}
@keyframes brille { 0%, 70% { background-position: 100% 0; } 90%, 100% { background-position: 0% 0; } }

/* ---------- Bouton principal de l'accueil : flèche qui invite au clic ---------- */
.ac-hero .btn--gold .icon--arrow { animation: pousse 3.2s 3s ease-in-out infinite; }
@keyframes pousse { 0%, 80%, 100% { transform: none; } 88% { transform: translateX(6px); } 94% { transform: translateX(1px); } }

/* ---------- Carte contact : liseré lumineux qui fait le tour ---------- */
.ac-contact__carte::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--angle, 0deg), rgba(172, 134, 74, 0) 0%, rgba(211, 188, 151, 0.95) 8%, rgba(172, 134, 74, 0) 22%, rgba(172, 134, 74, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: anneau 7s linear infinite;
}
.ac-contact__carte > * { position: relative; z-index: 1; }

/* ---------- FAQ : la question ouverte s'élargit légèrement ---------- */
.faq__item { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), opacity 0.9s var(--ease), filter 0.9s var(--ease) !important; }
.faq__item.is-open { transform: scale(1.015); }
.faq__item:not(.is-open):hover { transform: translateX(6px); }

/* ---------- Bande des tarifs : les prix s'allument au passage ---------- */
.ac-tarifs li.is-in b { animation: allume 1.4s 0.6s var(--ease) both; }
@keyframes allume { 0% { text-shadow: 0 0 0 rgba(211, 188, 151, 0); } 40% { text-shadow: 0 0 22px rgba(211, 188, 151, 0.65); } 100% { text-shadow: 0 0 0 rgba(211, 188, 151, 0); } }

/* ---------- Référence : la photo glisse doucement dans son cadre ---------- */
.ac-ref__photo img { transition: transform 0.2s linear; }

/* ---------- Pied de page : l'écusson tourne au survol ---------- */
.footer .brand__mark { transition: transform 0.8s var(--ease) !important; }
.footer .brand:hover .brand__mark { transform: rotate(-12deg) scale(1.1) !important; }

@media (prefers-reduced-motion: reduce) {
  .tuile__ico, .ac-garanties__liste .icon, .etape__ico, .ac-moyen .icon { stroke-dashoffset: 0 !important; transition: none !important; }
  .nav__marque b span, .ac-hero .btn--gold .icon--arrow, .ac-contact__carte::after, .ac-tarifs li.is-in b { animation: none !important; }
  .chiffres li::after { transform: scaleX(1); transition: none; }
}

/* Bande des garanties (bas du 1er écran) : apparaît au chargement, sans attendre le scroll */
.ac-garanties__liste li.cascade { opacity: 1 !important; transform: none !important; filter: none !important; animation: monte-doux 0.9s calc(0.7s + var(--c, 0) * 0.09s) var(--ease) both; }
.ac-garanties__liste .icon { animation: dessine 1.6s calc(1s + var(--c, 0) * 0.12s) var(--ease) both; }
.ac-garanties__liste li { --c: 0; }
.ac-garanties__liste li:nth-child(2) { --c: 1; } .ac-garanties__liste li:nth-child(3) { --c: 2; } .ac-garanties__liste li:nth-child(4) { --c: 3; }
@keyframes dessine { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ac-garanties__liste li.cascade, .ac-garanties__liste .icon { animation: none !important; } }

/* =========================================================
   VERSION 2.5 — menus déroulants faciles à utiliser,
   encore plus d'animations
   ========================================================= */

/* ---------- Menus : on peut descendre dans le panneau sans qu'il se ferme ----------
   - le bouton occupe toute la hauteur de la barre (plus de « trou » entre bouton et panneau)
   - fermeture avec un petit délai (si la souris sort une fraction de seconde) */
@media (min-width: 1181px) {
  .nav__links { align-self: stretch; }
  .nav__drop { align-self: stretch; display: flex !important; align-items: center; }
  .nav__panel, .nav__panel--large {
    display: grid !important; visibility: hidden; opacity: 0; pointer-events: none;
    clip-path: inset(0 0 100% 0 round 0 0 32px 32px); animation: none !important;
    transition: clip-path 0.45s var(--ease) 0.16s, opacity 0.3s 0.16s, visibility 0s 0.62s;
  }
  .nav__panel::before { display: none !important; }
  .nav__drop:hover .nav__panel, .nav__drop.is-open .nav__panel{
    visibility: visible; opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0 round 0 0 32px 32px);
    transition: clip-path 0.55s var(--ease), opacity 0.25s, visibility 0s;
  }
  /* Liens du panneau : arrivent un par un à l'ouverture */
  .nav__col > * { animation: none !important; opacity: 0; transform: translateY(12px); transition: opacity 0.35s, transform 0.5s var(--ease), background-color 0.15s, padding-left 0.2s var(--ease) !important; }
  .nav__drop:hover .nav__col > *, .nav__drop.is-open .nav__col > *{ opacity: 1; transform: none; }
  .nav__drop:hover .nav__col > :nth-child(1), .nav__drop.is-open .nav__col > :nth-child(1) { transition-delay: 0.08s, 0.08s, 0s, 0s !important; }
  .nav__drop:hover .nav__col > :nth-child(2), .nav__drop.is-open .nav__col > :nth-child(2) { transition-delay: 0.12s, 0.12s, 0s, 0s !important; }
  .nav__drop:hover .nav__col > :nth-child(3), .nav__drop.is-open .nav__col > :nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s !important; }
  .nav__drop:hover .nav__col > :nth-child(4), .nav__drop.is-open .nav__col > :nth-child(4) { transition-delay: 0.2s, 0.2s, 0s, 0s !important; }
  .nav__drop:hover .nav__col > :nth-child(5), .nav__drop.is-open .nav__col > :nth-child(5) { transition-delay: 0.24s, 0.24s, 0s, 0s !important; }
  .nav__drop:hover .nav__col > :nth-child(6), .nav__drop.is-open .nav__col > :nth-child(6) { transition-delay: 0.28s, 0.28s, 0s, 0s !important; }
  .nav__drop:hover .nav__col > :nth-child(n + 7), .nav__drop.is-open .nav__col > :nth-child(n + 7) { transition-delay: 0.32s, 0.32s, 0s, 0s !important; }
  .nav__drop:hover .nav__chev, .nav__drop.is-open .nav__chev { transform: rotate(180deg); }
}

/* ---------- Indicateur « faire défiler » en bas du premier écran ---------- */
.ac-defiler { display: none; }
@media (min-width: 1021px) and (min-height: 620px) {
  .ac-defiler { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: #86868b; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; transition: opacity 0.4s, color 0.3s; animation: apparait 1s 2s both; }
  .ac-defiler span { position: relative; width: 24px; height: 38px; border: 1.5px solid #c7c7cc; border-radius: 14px; }
  .ac-defiler span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--rouge); animation: molette 1.8s ease-in-out infinite; }
  .ac-defiler:hover { color: var(--noir); }
  .ac-defiler.cache { opacity: 0; pointer-events: none; }
}
@keyframes molette { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Téléphone : reflet qui balaie l'écran ---------- */
.tel__ecran::before { content: ""; position: absolute; z-index: 5; inset: -20% -60%; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 58%); transform: translateX(-60%); animation: reflet-ecran 7s 3s ease-in-out infinite; }
@keyframes reflet-ecran { 0%, 75% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }

/* ---------- Boutons à contour : le fond noir se remplit depuis la gauche ---------- */
.btn--outline {
  background-image: linear-gradient(var(--noir), var(--noir)) !important; background-repeat: no-repeat !important;
  background-size: 0% 100% !important; background-position: left center !important; background-color: transparent !important;
  transition: background-size 0.5s var(--ease), color 0.3s, border-color 0.3s, transform 0.3s var(--ease) !important;
}
.btn--outline:hover { background-image: linear-gradient(var(--noir), var(--noir)) !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 100% 100% !important; background-color: transparent !important; }
.ac-tarifs .btn--outline, .lp-cta .btn--outline, .lp-aside .lp-box:first-child .btn--outline { background-image: linear-gradient(#fff, #fff) !important; }
.ac-tarifs .btn--outline:hover, .lp-cta .btn--outline:hover { color: var(--noir) !important; }

/* ---------- Bouton de l'assistant : onde qui attire l'œil ---------- */
.as-lanceur:not(.is-ouvert)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--rouge); animation: onde-lanceur 3.2s 4s ease-out infinite; }
@keyframes onde-lanceur { 0% { transform: scale(1); opacity: 0.55; } 60%, 100% { transform: scale(1.35, 1.6); opacity: 0; } }
.as-lanceur { isolation: isolate; }

/* ---------- Grand nom du pied de page : les lettres ondulent au survol ---------- */
.pied-marque:hover span { animation: vague 0.9s var(--ease); animation-delay: calc(var(--l) * 0.04s); }
@keyframes vague { 40% { transform: translateY(-14%); } }

/* ---------- Petits titres : effet « décodage » (géré en JS) ---------- */
.kicker.decode { font-variant-numeric: tabular-nums; }

/* ---------- Tuiles et photo : profondeur au scroll (translate, sans gêner les autres effets) ---------- */
.tuile, .ac-ref__photo { will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  .ac-defiler span::after, .tel__ecran::before, .as-lanceur::before { animation: none !important; }
  .pied-marque:hover span { animation: none; }
}

/* =========================================================
   VERSION 2.6 — radar, trame de points, particules,
   liserés animés, balayages lumineux
   ========================================================= */

/* ---------- Premier écran : trame de points discrète autour du téléphone ---------- */
.ac-hero {
  background:
    radial-gradient(ellipse 55% 70% at 74% 46%, rgba(255, 255, 255, 0) 0%, #fff 78%),
    radial-gradient(rgba(0, 0, 0, 0.085) 1px, transparent 1.6px) 0 0 / 24px 24px,
    #fff !important;
}

/* ---------- Radar de sécurité qui tourne derrière le téléphone ---------- */
.ac-hero__visuel::before {
  content: "" !important; display: block !important; position: absolute; z-index: -1; left: 50%; top: 47%;
  right: auto !important; bottom: auto !important; width: min(640px, 120%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; filter: none !important; opacity: 1 !important;
  background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0 63px, rgba(0, 0, 0, 0.07) 64px 65px) !important;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.ac-hero__visuel::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 47%; width: min(640px, 120%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  translate: -50% -50%; background: conic-gradient(from 0deg, rgba(172, 134, 74, 0.22), rgba(172, 134, 74, 0) 22%, rgba(172, 134, 74, 0) 100%);
  -webkit-mask: radial-gradient(closest-side, #000 50%, transparent 100%); mask: radial-gradient(closest-side, #000 50%, transparent 100%);
  animation: radar 6s linear infinite;
}
@keyframes radar { to { rotate: 360deg; } }
.ac-hero--logo .ac-hero__visuel::after, .ac-hero--logo .ac-hero__visuel::before { display: none !important; }
@media (max-width: 1020px) { .ac-hero__visuel::before, .ac-hero__visuel::after { width: 110%; } }

/* ---------- Particules qui montent dans les sections noires ---------- */
.poussiere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.poussiere i { position: absolute; bottom: -10px; width: var(--t, 3px); height: var(--t, 3px); border-radius: 50%; background: rgba(211, 188, 151, 0.7); box-shadow: 0 0 8px rgba(211, 188, 151, 0.6); opacity: 0; animation: monte-particule var(--d, 9s) linear var(--r, 0s) infinite; }
.poussiere i:nth-child(3n) { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 6px rgba(255, 255, 255, 0.4); }
@keyframes monte-particule { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 0.8; } 100% { transform: translate(var(--x, 20px), -620px); opacity: 0; } }
.ac-ia__grille { position: relative; z-index: 1; }
.ac-contact__carte > .poussiere { position: absolute; z-index: 0; }

/* ---------- Tuiles : liseré rouge qui tourne au survol ---------- */
.tuile { border: 1.5px solid transparent !important; }
.tuile:not(.tuile--noire):hover {
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--angle, 0deg), rgba(172, 134, 74, 0) 0%, #ac864a 12%, rgba(172, 134, 74, 0) 30%, rgba(172, 134, 74, 0) 100%) border-box !important;
  animation: anneau 2.6s linear infinite;
}
.tuile--noire:hover {
  background: linear-gradient(#0b0b0c, #0b0b0c) padding-box, conic-gradient(from var(--angle, 0deg), rgba(211, 188, 151, 0) 0%, #d3bc97 12%, rgba(211, 188, 151, 0) 30%, rgba(211, 188, 151, 0) 100%) border-box !important;
  animation: anneau 2.6s linear infinite;
}

/* ---------- Bande noire des tarifs : balayage lumineux ---------- */
.ac-tarifs { position: relative; overflow: hidden; }
.ac-tarifs::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(-100%); animation: balaye 8s 2s ease-in-out infinite; }
@keyframes balaye { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- Étapes : le grand numéro se remplit de rouge au survol ---------- */
@media (min-width: 1021px) {
  .ac-etapes--cartes li > span { background: linear-gradient(0deg, var(--rouge) 50%, transparent 50%) 0 0 / 100% 200%; -webkit-background-clip: text; background-clip: text; transition: background-position 0.7s var(--ease); }
  .ac-etapes--cartes li:hover > span { background-position: 0 100%; }
}

/* ---------- FAQ : la réponse glisse à l'ouverture ---------- */
.faq__item.is-open .faq__a p { animation: monte-doux 0.6s 0.1s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .ac-hero__visuel::after, .poussiere, .ac-tarifs::after, .tuile:hover, .faq__item.is-open .faq__a p { animation: none !important; }
  .poussiere { display: none; }
}
.ac-hero__visuel::before { left: 50% !important; top: 47% !important; }

/* =========================================================
   VERSION 2.7 — hero B2B, bande des secteurs, « Être rappelé »,
   variante « nuit » (aperçu : ?hero=nuit)
   ========================================================= */

/* ---------- Hero : sur-titre ---------- */
.ac-hero__sur { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; color: #6e6e73; }
.ac-hero__sur span { position: relative; overflow: hidden; padding: 6px 12px; border-radius: 999px; background: var(--noir); color: #fff; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.ac-hero__sur span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); animation: reflet-pastille 5s 2s ease-in-out infinite; }
@keyframes reflet-pastille { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ac-hero .h1 { font-size: clamp(2.4rem, 1.3rem + 3.5vw, 4.4rem) !important; max-width: 720px; }
.ac-hero__texte .lead { max-width: 580px !important; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem) !important; }
.ac-hero__texte > :nth-child(5) { animation-delay: 0.55s !important; }

/* ---------- Hero : preuves de confiance ---------- */
.ac-preuves { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); padding-top: 18px; }
.ac-preuves li { display: flex; align-items: center; gap: 10px; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--line); }
.ac-preuves li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ac-preuves .icon { width: 22px; height: 22px; flex: none; color: var(--rouge); stroke-dasharray: 140; animation: dessine 1.6s var(--ease) both; }
.ac-preuves li:nth-child(1) .icon { animation-delay: 1s; } .ac-preuves li:nth-child(2) .icon { animation-delay: 1.15s; } .ac-preuves li:nth-child(3) .icon { animation-delay: 1.3s; }
.ac-preuves b { display: block; font-size: 14px; color: var(--noir); line-height: 1.2; }
.ac-preuves small { display: block; font-size: 12px; color: #86868b; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ac-preuves { display: grid; gap: 12px; } .ac-preuves li { border-right: 0; margin: 0; padding: 0; } }

/* ---------- Bouton « Être rappelé » : le combiné sonne de temps en temps ---------- */
[data-rappel] .icon { transform-origin: 50% 60%; animation: sonne 4.5s 3.5s ease-in-out infinite; }
@keyframes sonne { 0%, 82%, 100% { transform: none; } 85% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 91% { transform: rotate(-9deg); } 94% { transform: rotate(6deg); } }
button.btn { cursor: pointer; font-family: var(--font-body); }

/* ---------- Bande des secteurs (sous le hero) ---------- */
.ac-secteurs-bande .ac-garanties__liste { grid-template-columns: repeat(6, 1fr) !important; }
.ac-secteurs-bande .ac-garanties__liste li { padding: 0 !important; }
.ac-secteurs-bande .ac-garanties__liste li:nth-child(5) { --c: 4; } .ac-secteurs-bande .ac-garanties__liste li:nth-child(6) { --c: 5; }
.ac-secteurs-bande a { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 20px 16px; border-radius: 14px; color: var(--noir); transition: background-color 0.3s; }
.ac-secteurs-bande a::after { content: "→"; margin-left: auto; color: var(--rouge); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.4s var(--ease); }
.ac-secteurs-bande a:hover { background: var(--bg-2); }
.ac-secteurs-bande a:hover::after { opacity: 1; transform: none; }
.ac-secteurs-bande a:hover .icon { transform: scale(1.15) rotate(-6deg); }
@media (max-width: 1020px) { .ac-secteurs-bande .ac-garanties__liste { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px) { .ac-secteurs-bande .ac-garanties__liste { grid-template-columns: 1fr 1fr !important; } .ac-secteurs-bande a { padding: 14px 10px; } }

/* ---------- Fenêtre « Être rappelé » ---------- */
dialog.rappel { width: min(500px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: 30px; background: #fff; color: var(--muted); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.5); overflow: auto; }
dialog.rappel[open] { animation: rappel-ouvre 0.5s var(--ease) both; }
dialog.rappel.se-ferme { animation: rappel-ferme 0.22s ease both; }
dialog.rappel::backdrop { background: rgba(10, 10, 12, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: apparait 0.3s both; }
@keyframes rappel-ouvre { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes rappel-ferme { to { opacity: 0; transform: translateY(12px) scale(0.97); } }
.rappel__form, .rappel__merci { position: relative; display: grid; gap: 14px; padding: 34px 32px 28px; }
.rappel__merci { justify-items: center; text-align: center; padding: 44px 32px 36px; }
.rappel__x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--noir); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 0.2s, transform 0.3s var(--ease); }
.rappel__x:hover { background: #ebe4d8; transform: rotate(90deg); }
.rappel__titre { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--noir); line-height: 1.1; }
.rappel__texte { margin: -4px 0 4px; font-size: 15px; }
.rappel__texte a { color: var(--noir); font-weight: 700; }
.rappel__champ { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--noir); }
.rappel__champ input, .rappel__champ select { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; font: 500 16px var(--font-body); color: var(--noir); transition: border-color 0.2s, box-shadow 0.2s; }
.rappel__champ input:focus, .rappel__champ select:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06); }
.rappel__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rappel__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rappel__erreur { margin: 0; padding: 10px 14px; border-radius: 12px; background: #f8f5f1; color: #90703e; font-size: 14px; }
.rappel__envoyer { width: 100%; justify-content: center; margin-top: 4px; }
.rappel__envoyer:disabled { opacity: 0.6; cursor: wait; }
.rappel__mention { margin: 0; font-size: 12px; color: #86868b; text-align: center; }
.rappel__mention a { color: inherit; text-decoration: underline; }
.rappel__coche { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #22c55e; animation: pop 0.6s var(--ease) both; }
.rappel__coche svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; animation: dessine-coche 0.6s 0.3s ease both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); } to { transform: none; opacity: 1; } }
@keyframes dessine-coche { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@media (max-width: 480px) { .rappel__ligne { grid-template-columns: 1fr; } .rappel__form { padding: 30px 20px 22px; } }
html.rappel-ouvert { overflow: hidden; }

/* =========================================================
   VARIANTE « NUIT » — photo de Paris la nuit, voile sombre
   ========================================================= */
.ac-hero--nuit { background: #050608 !important; }
.ac-hero--nuit::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0; width: auto !important; aspect-ratio: auto !important; border-radius: 0 !important;
  background: url("https://images.unsplash.com/photo-1596889465414-fdc945153c81?auto=format&fit=crop&w=2200&q=70") center 62% / cover no-repeat !important;
  opacity: 0.62 !important; -webkit-mask: none !important; mask: none !important; animation: ken-burns 34s ease-in-out infinite alternate !important; pointer-events: none;
}
.ac-hero--nuit::after {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0; width: auto !important; aspect-ratio: auto !important; border-radius: 0 !important; animation: none !important; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.78) 42%, rgba(5, 6, 8, 0.38) 75%, rgba(5, 6, 8, 0.55) 100%), linear-gradient(180deg, rgba(5, 6, 8, 0.25) 0%, rgba(5, 6, 8, 0) 35%, rgba(5, 6, 8, 0.9) 100%) !important;
}
@keyframes ken-burns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
.ac-hero--nuit .ac-hero__grille { position: relative; z-index: 1; }
.ac-hero--nuit .h1, .ac-hero--nuit .h1 em, .ac-hero--nuit .ac-preuves b { color: #fff !important; }
.ac-hero--nuit .lead { color: #c7c7cc !important; }
.ac-hero--nuit .ac-hero__sur { color: #a1a1a6; }
.ac-hero--nuit .ac-hero__sur span { background: var(--rouge); }
.ac-hero--nuit .ac-preuves { border-top-color: rgba(255, 255, 255, 0.14); }
.ac-hero--nuit .ac-preuves li { border-right-color: rgba(255, 255, 255, 0.14); }
.ac-hero--nuit .ac-preuves small { color: #8e8e93; }
.ac-hero--nuit .ac-preuves .icon { color: #d3bc97; }
.ac-hero--nuit .btn--outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.35) !important; background-image: linear-gradient(#fff, #fff) !important; }
.ac-hero--nuit .btn--outline:hover { color: var(--noir) !important; background-image: linear-gradient(#fff, #fff) !important; }
.ac-hero--nuit .btn--outline:hover .icon { color: var(--rouge) !important; }
.ac-hero--nuit .ac-hero__visuel::before { background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 63px, rgba(255, 255, 255, 0.08) 64px 65px) !important; }
.ac-hero--nuit .ac-hero__visuel::after { background: conic-gradient(from 0deg, rgba(206, 180, 140, 0.35), rgba(172, 134, 74, 0) 22%, rgba(172, 134, 74, 0) 100%); }
.ac-hero--nuit .tel__cadre { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25), inset 0 0 0 4px #08090c, 0 70px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 80px -10px rgba(172, 134, 74, 0.35) !important; }
.ac-hero--nuit .ac-defiler { color: #8e8e93; }
.ac-hero--nuit .ac-defiler span { border-color: rgba(255, 255, 255, 0.35); }
.ac-hero--nuit + .ac-garanties .container { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .ac-hero__sur span::after, [data-rappel] .icon, .ac-hero--nuit::before, .ac-preuves .icon { animation: none !important; }
}

/* ---------- Ajustements v2.7 ---------- */
dialog.rappel { margin: auto; }
.rappel__form[hidden], .rappel__merci[hidden] { display: none !important; }
.ac-hero .h1 { font-size: clamp(2.3rem, 1.15rem + 3vw, 3.9rem) !important; max-width: 640px; }
.ac-preuves { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.ac-preuves li { border-right: 0 !important; margin-right: 0 !important; padding-right: 0 !important; }
.ac-preuves b { font-size: 13.5px; }
.ac-preuves small { font-size: 11.5px; }

/* Variante nuit : barre du haut sombre et transparente tant qu'on est en haut de page */
body:has(.ac-hero--nuit):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) {
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0.25)) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body:has(.ac-hero--nuit):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) :is(.nav__links > a, .nav__drop-btn, .nav__marque b) { color: #fff !important; }
body:has(.ac-hero--nuit):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) .nav__marque small { color: #a1a1a6; }
body:has(.ac-hero--nuit):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) :is(.nav__tel, .nav__client, .burger) { border-color: rgba(255, 255, 255, 0.3) !important; color: #fff !important; }
body:has(.ac-hero--nuit):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) .nav__client .icon { color: #fff !important; }
body:has(.ac-hero--nuit):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) .burger span { background: #fff !important; }
body:has(.ac-hero--nuit) .nav__survol { background: rgba(255, 255, 255, 0.12); }
body:has(.ac-hero--nuit) .nav.is-compact .nav__survol, body:has(.ac-hero--nuit):has(.nav__links:hover) .nav__survol { background: rgba(0, 0, 0, 0.055); }

/* =========================================================
   VERSION 2.8 — hero « nuit » épuré pour tous
   Une seule colonne de texte, la photo comme unique visuel
   ========================================================= */
.ac-hero--epure .ac-hero__grille { grid-template-columns: 1fr !important; }
.ac-hero--epure .ac-hero__texte { max-width: 660px; gap: 24px !important; }
.ac-hero--epure .h1 { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.6rem) !important; max-width: 660px; }
.ac-hero--epure .lead { max-width: 520px !important; }
/* Photo : l'Arc de Triomphe se place à droite, le texte reste sur une zone sombre */
.ac-hero--nuit::before { background-position: left 62% !important; opacity: 0.7 !important; }
.ac-hero--nuit::after {
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.82) 34%, rgba(5, 6, 8, 0.35) 64%, rgba(5, 6, 8, 0.2) 100%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.35) 0%, rgba(5, 6, 8, 0) 30%, rgba(5, 6, 8, 0) 70%, rgba(5, 6, 8, 0.85) 100%) !important;
}
/* Fine ligne rouge qui balaie le bas de l'écran, comme un scanner */
.ac-hero--epure .ac-hero__grille::after { content: ""; position: absolute; left: 0; bottom: -24px; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #ceb48c, transparent); animation: scanne 5s 2s ease-in-out infinite; opacity: 0; }
@keyframes scanne { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(min(560px, 70vw)); opacity: 0; } }
/* Preuves : une ligne légère, sans sous-titres */
.ac-hero--epure .ac-preuves { gap: 10px 28px; padding-top: 20px; }
.ac-hero--epure .ac-preuves li { gap: 8px; }
.ac-hero--epure .ac-preuves b { font-size: 14px; font-weight: 600; color: #e5e5ea !important; }
.ac-hero--epure .ac-preuves .icon { width: 18px; height: 18px; }
/* Mobile : photo plus sombre, texte sur toute la largeur */
@media (max-width: 1020px) {
  .ac-hero--nuit::before { background-position: 58% 62% !important; opacity: 0.5 !important; }
  .ac-hero--nuit::after { background: linear-gradient(180deg, rgba(5, 6, 8, 0.7), rgba(5, 6, 8, 0.85) 60%, rgba(5, 6, 8, 0.95)) !important; }
  .ac-hero--epure { padding-bottom: 56px !important; }
}
@media (prefers-reduced-motion: reduce) { .ac-hero--epure .ac-hero__grille::after { animation: none; display: none; } }

/* =========================================================
   VERSION 2.9 — « luxe » : en-têtes sombres sur toutes les pages
   de service, grain cinéma, reflet argenté, cartes et étapes
   redessinées pour des textes courts
   ========================================================= */

/* ---------- Grain cinéma (sections sombres) ---------- */
.ac-hero--nuit .ac-hero__grille::before, .lp-hero::after, .ac-ia > .container::before, .ac-contact__carte .poussiere::after {
  content: ""; position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
.ac-hero--nuit { isolation: isolate; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.ac-hero--nuit .ac-hero__grille::before { position: absolute; inset: -60vh -50vw; z-index: -1; }
.ac-ia > .container { position: relative; }
.ac-ia > .container::before { inset: -40% -60%; }

/* ---------- Reflet argenté sur le mot clé des titres sombres ---------- */
.ac-hero--nuit .h1 em, .lp-hero .h1 em {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #9a9aa0 50%, #ffffff 60%, #ffffff 100%) 100% 0 / 250% 100% no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  animation: argent 7s 2s ease-in-out infinite !important;
}
@keyframes argent { 0%, 65% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

/* =========================================================
   EN-TÊTES DES PAGES DE SERVICE : nuit, photo plein cadre
   ========================================================= */
.lp-hero { background: #050608 !important; isolation: isolate; min-height: min(78svh, 820px) !important; }
.lp-hero__photo { inset: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
.lp-hero__photo img { filter: saturate(0.85) brightness(0.62) !important; animation: photo-recule 2.6s var(--ease) both, ken-burns 30s 2.6s ease-in-out infinite alternate !important; }
.lp-hero__photo::before { display: none !important; }
.lp-hero__photo::after {
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.82) 38%, rgba(5, 6, 8, 0.3) 72%, rgba(5, 6, 8, 0.15) 100%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.4) 0%, rgba(5, 6, 8, 0) 30%, rgba(5, 6, 8, 0) 65%, rgba(5, 6, 8, 0.9) 100%) !important;
}
.lp-hero::after { z-index: 1; }
.lp-hero .container { position: relative; z-index: 2; }
.lp-hero .h1, .lp-hero .h1 em { color: #fff !important; }
.lp-hero .lead { color: #c7c7cc !important; }
.lp-hero .kicker { color: #d3bc97 !important; }
.lp-crumbs, .lp-crumbs span { color: #8e8e93 !important; }
.lp-crumbs a { color: #e5e5ea !important; }
.lp-hero .hero__trust li { color: #e5e5ea !important; }
.lp-hero .hero__trust .tick { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
.lp-hero .btn--outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.35) !important; background-image: linear-gradient(#fff, #fff) !important; }
.lp-hero .btn--outline:hover { color: var(--noir) !important; }
.lp-hero .btn--outline:hover .icon { color: var(--rouge) !important; }
/* Ligne rouge qui balaie le bas de l'en-tête */
.lp-hero__copy { position: relative; }
.lp-hero__copy::after { content: ""; position: absolute; left: 0; bottom: -28px; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #ceb48c, transparent); opacity: 0; animation: scanne 5s 2.5s ease-in-out infinite; }
@media (max-width: 900px) {
  .lp-hero__photo::after { background: linear-gradient(180deg, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0.88) 60%, rgba(5, 6, 8, 0.97)) !important; }
  .lp-hero__copy::after { left: 50%; margin-left: -60px; }
}

/* Barre du haut sombre et transparente en haut des pages à en-tête sombre */
body:has(.lp-hero):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) {
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0.25)) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body:has(.lp-hero):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) :is(.nav__links > a, .nav__drop-btn, .nav__marque b) { color: #fff !important; }
body:has(.lp-hero):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) .nav__marque small { color: #a1a1a6; }
body:has(.lp-hero):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) :is(.nav__tel, .nav__client, .burger) { border-color: rgba(255, 255, 255, 0.3) !important; color: #fff !important; }
body:has(.lp-hero):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) .nav__client .icon { color: #fff !important; }
body:has(.lp-hero):not(:has(.nav__links:hover)):not(:has(.nav__drop.is-open)) .nav:not(.is-compact) .burger span { background: #fff !important; }
body:has(.lp-hero):not(:has(.nav__links:hover)) .nav:not(.is-compact) .nav__links > a[aria-current="page"], body:has(.lp-hero):not(:has(.nav__links:hover)) .nav:not(.is-compact) .nav__drop.is-current .nav__drop-btn { box-shadow: inset 0 -2px 0 #fff !important; }
body:has(.lp-hero) .nav:not(.is-compact) .nav__survol { background: rgba(255, 255, 255, 0.12); }

/* =========================================================
   CONTENU DES PAGES : sobre, aéré, pensé pour des textes courts
   ========================================================= */
.lp-article > section { padding-bottom: clamp(40px, 5vw, 64px); }
.lp-article > section > p:not(.kicker) { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 680px; }

/* Cartes : le noir monte depuis le bas au survol */
.lp-card { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-2) !important; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease) !important; }
.lp-card::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; background: var(--noir); transform: translateY(101%); transition: transform 0.65s var(--ease); }
.lp-card:hover { transform: translateY(-6px) !important; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5) !important; background: var(--bg-2) !important; }
.lp-card:hover::before { transform: none; }
.lp-card h3, .lp-card p, .lp-card .link-arrow { transition: color 0.4s; }
.lp-card:hover h3, .lp-card:hover .link-arrow { color: #fff !important; }
.lp-card:hover p { color: #a1a1a6 !important; }
.lp-card:hover .ico { background: var(--rouge) !important; color: #0b0b0c !important; }
.lp-card .ico { transition: background-color 0.4s, color 0.4s, transform 0.6s var(--ease) !important; }
.lp-card:hover .ico { transform: rotate(-8deg) scale(1.08); }
.lp-card h3 { font-size: 19px !important; letter-spacing: -0.02em; }

/* Listes : pastilles en grille */
.lp-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px !important; }
.lp-list li { align-items: center !important; gap: 12px !important; padding: 16px 18px !important; border-radius: 16px; background: var(--bg-2); border: 0 !important; transition: background-color 0.3s, transform 0.4s var(--ease); }
.lp-list li:hover { background: #efe9df; transform: translateX(4px); }
.lp-list li > div { font-weight: 600; color: var(--noir); font-size: 15.5px; }
.lp-list li .icon { color: var(--rouge) !important; background: #fff !important; width: 30px !important; height: 30px !important; padding: 7px; border-radius: 50%; flex: none; }

/* Étapes : grands numéros, ligne qui se dessine */
.lp-steps { counter-reset: etape; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 !important; }
.lp-steps li { position: relative; padding: 26px 22px 8px 0 !important; background: none !important; border-radius: 0 !important; min-height: 0; }
.lp-steps li::before { position: static !important; display: block; margin-bottom: 12px; font-size: 44px !important; line-height: 1 !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 1.5px var(--rouge); background: none !important; }
.lp-steps li::after { content: ""; position: absolute; left: 0; right: 22px; top: 0; height: 2px; background: var(--noir); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 0.15s + 0.2s); }
.lp-steps li.is-in::after { transform: none; }
.lp-steps li b { font-size: 18px !important; letter-spacing: -0.02em; line-height: 1.25; display: block; }
.lp-steps li:nth-child(1) { --i: 0; } .lp-steps li:nth-child(2) { --i: 1; } .lp-steps li:nth-child(3) { --i: 2; } .lp-steps li:nth-child(4) { --i: 3; }

/* Photos : zoom très lent au survol */
.lp-photo img { transition: transform 1.6s var(--ease) !important; }
.lp-photo:hover img { transform: scale(1.05) !important; }

@media (prefers-reduced-motion: reduce) {
  .ac-hero--nuit .ac-hero__grille::before, .lp-hero::after, .ac-ia > .container::before, .ac-contact__carte .poussiere::after, .ac-hero--nuit .h1 em, .lp-hero .h1 em, .lp-hero__photo img, .lp-hero__copy::after { animation: none !important; }
  .lp-steps li::after { transform: none; transition: none; }
}

/* Accueil : le titre est découpé mot par mot → le reflet argenté s'applique à chaque mot, le souligné rouge reste sur « 24h/24. » */
.ac-hero--nuit .h1 em { background: linear-gradient(var(--rouge), var(--rouge)) no-repeat 0 94% / 0% 0.085em !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; animation: souligne 1.1s 1.15s var(--ease) forwards !important; }
.ac-hero--nuit .h1 em .mot > span {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #9a9aa0 50%, #ffffff 60%, #ffffff 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mot-monte 1s var(--ease) both, argent 7s 2.5s ease-in-out infinite; animation-delay: calc(0.12s + var(--m) * 0.055s), 2.5s;
}
@media (prefers-reduced-motion: reduce) { .ac-hero--nuit .h1 em .mot > span { animation: none; } .ac-hero--nuit .h1 em { animation: none !important; background-size: 100% 0.085em !important; } }

/* =========================================================
   THÈME OR — logo « BDA Security Group » (04/10/2026)
   Noir, blanc ivoire et doré du logo. Le rouge ne sert plus
   qu'aux messages d'erreur.
   ========================================================= */
:root {
  --or: #b8955f;
  --or-clair: #dcc391;
  --or-fonce: #8a6935;
  --or-degrade: linear-gradient(135deg, #e0c995 0%, #bf9c64 50%, #a07d47 100%);
  --rouge: #b08d57;
  --rouge-fonce: #96743f;
  --gold-light: #dcc391;
  --gold-soft: rgba(184, 149, 95, 0.12);
}

/* Nom du haut : « BDA » + « SECURITY GROUP », lettres du logo */
.nav__marque { gap: 7px !important; }
.nav__marque b, .nav__marque small { display: block; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; margin: 0 !important; padding: 0; animation: none !important; transition: none !important; }
.nav__marque b { width: 96px; aspect-ratio: 798 / 216; color: var(--noir); background: currentColor; -webkit-mask: url(../img/marque-bda.png?v=1) center / contain no-repeat; mask: url(../img/marque-bda.png?v=1) center / contain no-repeat; }
.nav__marque small { width: 169px; aspect-ratio: 1402 / 74; opacity: 1 !important; background: linear-gradient(90deg, #b39a70 0%, #c4a472 40%, #dcbd84 68%, #b29a71 100%); -webkit-mask: url(../img/marque-sg.png?v=1) center / contain no-repeat; mask: url(../img/marque-sg.png?v=1) center / contain no-repeat; }
.nav__marque:hover b, .nav__marque:hover small { letter-spacing: 0 !important; margin: 0 !important; }
.nav__marque b span { display: none; }
@media (max-width: 1320px) { .nav__marque b { width: 84px; } .nav__marque small { width: 148px; } }
@media (max-width: 640px) { .nav__marque { gap: 5px !important; } .nav__marque b { width: 70px; } .nav__marque small { width: 124px; } }
@media (max-width: 380px) { .nav__marque b { width: 62px; } .nav__marque small { width: 108px; } }

/* Boutons principaux : doré du logo, texte noir */
.btn--gold { background: var(--or-degrade) !important; color: #0b0b0c !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px -14px rgba(160, 125, 71, 0.75) !important; }
.btn--gold .icon { color: #0b0b0c !important; }
.btn--gold:hover { background: linear-gradient(135deg, #ead7a9 0%, #c9a771 50%, #a8844d 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 34px -14px rgba(160, 125, 71, 0.85) !important; }
.ac-hero--nuit .ac-hero__sur span { background: var(--or-degrade); color: #0b0b0c; }
.lp-card:hover .ico, .as-puce--conseiller:hover { color: #0b0b0c !important; }
.tuile:hover .tuile__ico { stroke: #0b0b0c; }

/* Textes dorés sur fond blanc : un ton plus soutenu pour rester lisibles */
.kicker, .tuile__lien, .lp-box ul a[aria-current="page"], .rv-card__tag, .as-msg small, .tf-majorations li em, .as-panneau.is-equipe .as-tete small { color: var(--or-fonce) !important; }
::selection { background: var(--or); color: #0b0b0c; }

/* Grand nom du pied de page : « BDA / SECURITY GROUP » avec les lettres du logo */
.pied-marque.pied-marque--logo { display: grid; justify-items: center; gap: clamp(12px, 1.8vw, 26px); margin: clamp(46px, 7vw, 96px) 0 clamp(26px, 4vw, 54px); font-size: 0; line-height: 0; overflow: hidden; }
.pied-marque--logo i { display: block; opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.pied-marque--logo.vu i { opacity: 1; transform: none; }
.pied-marque--logo .pied-marque__sg { transition-delay: 0.25s; }
.pied-marque__bda { width: min(52vw, 560px); aspect-ratio: 798 / 216; background: linear-gradient(180deg, #0b0b0c 0%, #0b0b0c 55%, rgba(11, 11, 12, 0.6) 100%); -webkit-mask: url(../img/marque-bda.png?v=1) center / contain no-repeat; mask: url(../img/marque-bda.png?v=1) center / contain no-repeat; }
.pied-marque__sg { width: min(91vw, 984px); aspect-ratio: 1402 / 74; background: linear-gradient(90deg, #b39a70 0%, #c4a472 40%, #dcbd84 68%, #b29a71 100%); -webkit-mask: url(../img/marque-sg.png?v=1) center / contain no-repeat; mask: url(../img/marque-sg.png?v=1) center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .pied-marque--logo i { opacity: 1; transform: none; transition: none; } }

/* Cartes des pages de services : la dernière carte seule prend toute la largeur (pas de trou) */
@media (min-width: 700px) { .lp-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Accueil, « Nos services » : cartes sur deux colonnes, sans grand bloc noir */
@media (min-width: 601px) { #services .tuiles { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(210px, auto); } }

/* =========================================================
   ACCUEIL — VIDÉO DE FOND (Paris de nuit), à la place de la photo
   Étalonnage léger à l'affichage (noirs plus profonds, doré plus riche),
   voile sombre pour la lisibilité, grain cinéma existant par-dessus.
   ========================================================= */
.ac-hero--video::before { display: none !important; animation: none !important; }
.ac-fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #050608 url("../video/bda-fond-paris-poster.jpg?v=1") center / cover no-repeat; filter: contrast(1.12) brightness(0.97) saturate(1.12) sepia(0.06); }
.ac-fond__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.ac-fond__video.is-on { opacity: 1; }
.ac-hero--video::after {
  background: linear-gradient(90deg, rgba(5, 6, 8, 0.86) 0%, rgba(5, 6, 8, 0.62) 42%, rgba(5, 6, 8, 0.26) 78%, rgba(5, 6, 8, 0.36) 100%),
              linear-gradient(180deg, rgba(5, 6, 8, 0.32) 0%, rgba(5, 6, 8, 0) 30%, rgba(5, 6, 8, 0) 62%, rgba(5, 6, 8, 0.86) 100%) !important;
}
@media (max-width: 767px), (orientation: portrait) {
  .ac-fond { background-image: url("../video/bda-fond-paris-mobile-poster.jpg?v=1"); }
  /* Téléphone : voile plus dense derrière le texte (les noms de quartiers de la vidéo restent discrets) */
  .ac-hero--video::after { background: linear-gradient(0deg, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.86) 45%, rgba(5, 6, 8, 0.8) 70%, rgba(5, 6, 8, 0.62) 100%) !important; }
  .ac-fond__video, .ac-fond { filter: blur(2.5px) contrast(1.12) brightness(0.97) saturate(1.12) sepia(0.06); transform: scale(1.04); }
}
.ac-hero--video .lead, .ac-hero--video .ac-hero__sur, .ac-hero--video .ac-preuves b { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }

/* ---------- Bouton « Se connecter » : choix espace client / espace équipe ---------- */
.nav__actions { position: relative; }
.cx-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: 240px; padding: 10px;
  border-radius: 20px; background: linear-gradient(180deg, #17150f, #0b0b0c); border: 1px solid rgba(220, 195, 145, 0.24);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1), visibility 0s 0.35s;
}
.cx-pop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1), visibility 0s; }
.cx-pop::before { content: ''; position: absolute; top: -6px; right: 16px; width: 12px; height: 12px; background: #17150f; border-left: 1px solid rgba(220, 195, 145, 0.24); border-top: 1px solid rgba(220, 195, 145, 0.24); transform: rotate(45deg); }
.cx-pop__titre { margin: 4px 10px 8px; font: 700 10.5px/1 'Inter', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #c9a66b; }
.cx-pop__choix { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; color: #f3eee5 !important; text-decoration: none !important; transition: background-color 0.2s; }
.cx-pop__choix + .cx-pop__choix { margin-top: 2px; }
.cx-pop__choix:hover, .cx-pop__choix:focus-visible { background: rgba(201, 166, 107, 0.12); outline: none; }
.cx-pop__ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #ecd8a8, #c9a66b 48%, #9c7943); color: #17130c; }
.cx-pop__ic svg, .cx-pop__fl { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-pop__txt { flex: 1; min-width: 0; }
.cx-pop__txt b { display: block; font: 700 15px/1.3 'Manrope', sans-serif; color: #f3eee5 !important; }
.cx-pop__txt small { display: block; margin-top: 2px; color: #a7a196 !important; font-size: 12.5px; line-height: 1.35; }
.cx-pop__fl { width: 16px; height: 16px; color: #c9a66b; transition: transform 0.2s; }
.cx-pop__choix:hover .cx-pop__fl { transform: translateX(3px); }
.nav__client[aria-expanded="true"] { background: var(--noir) !important; border-color: var(--noir) !important; color: #fff !important; }
.nav__client[aria-expanded="true"] .icon { color: #fff !important; }
.mm__lien small { margin-left: auto; padding-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted, #8a8580); }
@media (prefers-reduced-motion: reduce) { .cx-pop { transition: none; } }

/* Monogramme BDA (fenêtres de l'assistant), à la place de l'ancien personnage */
.bda-mono {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a261e, #0b0b0c 70%); border: 1px solid rgba(201, 166, 107, 0.55);
  font: 800 10.5px/1 var(--font-display, 'Manrope', sans-serif); letter-spacing: 0.14em; padding-left: 0.14em;
  color: #e3c98f; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   Page Entreprises (entreprises.html) : sobre, 3 blocs + formulaire
   ========================================================= */
.ent-sites { background: var(--bg-2); }
.ent-tuiles { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: minmax(190px, auto) !important; margin-top: 8px; }
@media (max-width: 1020px) { .ent-tuiles { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .ent-tuiles { grid-template-columns: 1fr !important; } }
.ent-offre { background: #fff; }
.ent-offre .ac-engagements { margin-top: 10px; }
.ent-demande { background: var(--bg-2); }
.ent-demande__grille { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.ent-demande__texte .lead { margin-top: 14px; max-width: 30ch; }
.ent-contact { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ent-contact li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ent-contact .icon { width: 20px; height: 20px; color: var(--rouge); }
.ent-contact a { color: var(--noir); text-decoration: none; }
.ent-contact a:hover { text-decoration: underline; }
.ent-carte { background: #fff; border-radius: 28px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--ombre-forte, 0 30px 60px -30px rgba(0, 0, 0, 0.25)); }
.ent-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ent-form__large { grid-column: 1 / -1; }
.ent-form .rappel__champ small { font-weight: 500; color: #86868b; }
.ent-form textarea { width: 100%; min-height: 96px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; font: 500 16px/1.45 var(--font-body); color: var(--noir); resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; }
.ent-form textarea:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06); }
.ent-form .btn { justify-content: center; height: 54px; }
.ent-merci { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px 0; }
.ent-merci[hidden] { display: none; }
.ent-merci p { color: var(--muted); max-width: 34ch; }
@media (max-width: 900px) { .ent-demande__grille { grid-template-columns: 1fr; } .ent-demande__texte .lead { max-width: none; } }
@media (max-width: 520px) { .ent-form { grid-template-columns: 1fr; } }

/* Accueil : ligne « Vous êtes une entreprise ? » */
.ac-pro { background: var(--noir); color: #f3eee5; }
.ac-pro__ligne { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding-block: 30px; }
.ac-pro__ligne p { margin: 0; font: 700 clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem)/1.25 var(--font-display); letter-spacing: -0.02em; color: #f3eee5; }
.ac-pro__ligne p span { color: #d9bd85; }

/* En-tête : même espace à gauche et à droite du logo (les deux menus n'ont pas la même largeur) */
@media (min-width: 1181px) {
  .nav__inner:has(.nav__links--d) .nav__marque:not(.nav__marque--gauche) { position: static; transform: none; margin-left: auto !important; margin-right: auto !important; }
  .nav__inner:has(.nav__links--d) .nav__links--d { margin-left: 0 !important; }
  .nav__inner:has(.nav__links--d) .nav__links:not(.nav__links--d) { margin-right: 0 !important; }
}

/* Téléphone et tablette : pas de photo derrière le titre des pages, fond noir et lueur dorée seulement */
@media (max-width: 900px) {
  .lp-hero__photo img, .rv-hero__photo img { display: none !important; }
  .lp-hero__photo { background: radial-gradient(120% 70% at 50% 0%, rgba(176, 141, 87, 0.16), transparent 60%), #0b0b0c !important; }
}