/* ============================================================
   CARROSSERIE MAGLIOLO — Porto-Vecchio
   Palette issue du logo : noir profond, blanc, orange voiture
   ============================================================ */

:root {
  --dark: #0c0e11;
  --dark-2: #14171c;
  --dark-3: #1d2128;
  --light: #f6f7f9;
  --white: #ffffff;
  --grey: #9aa3af;
  --orange: #ff6a00;
  --orange-2: #ff8a2a;
  --red: #e63012;
  --grad: linear-gradient(135deg, #ff8a2a 0%, #ff6a00 45%, #e63012 100%);
  --font-title: "Barlow Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  --container: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--dark-2);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
}

/* height:auto préserve le ratio d'origine quand max-width réduit l'image
   (sinon l'attribut height HTML déforme la photo) */
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Typo ---------- */
h1, h2, h3 { font-family: var(--font-title); line-height: 1.05; text-transform: uppercase; letter-spacing: .5px; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; }
h3 { font-size: 1.5rem; font-weight: 700; }

.accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section { padding: 96px 0; }

.section__kicker {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .95rem;
  color: var(--orange);
  margin-bottom: 10px;
  position: relative;
  padding-left: 42px;
}
.section__kicker::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 30px; height: 3px;
  background: var(--grad);
  border-radius: 2px;
  transform: translateY(-50%);
}

.section__lead { max-width: 700px; color: #4b5563; margin-top: 14px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 1rem;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--lg { padding: 16px 34px; font-size: 1.1rem; }
.btn--block { display: block; text-align: center; width: 100%; }

.btn--primary {
  background: var(--grad);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(230, 60, 20, .35);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(230, 60, 20, .45); }

.btn--ghost { border-color: rgba(255, 255, 255, .5); color: var(--white); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange-2); transform: translateY(-3px); }

.btn--dark { background: var(--dark); color: var(--white); }
.btn--dark:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.3); }

.btn--outline-dark { border-color: var(--dark); color: var(--dark); }
.btn--outline-dark:hover { background: var(--dark); color: var(--white); transform: translateY(-3px); }

/* Sections claires : bouton ghost devient sombre */
.insurance .btn--ghost, .contact .btn--ghost { border-color: rgba(255,255,255,.4); color: var(--white); }

/* ---------- Barre supérieure ---------- */
.topbar {
  background: var(--dark);
  color: var(--grey);
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.topbar a { color: var(--orange-2); text-decoration: none; font-weight: 600; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 14, 17, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: box-shadow .3s ease;
}
.header.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.45); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.header__logo img { height: 38px; width: auto; max-width: 46vw; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  position: relative;
  padding: 4px 0;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--grad);
  transition: width .3s ease;
}
.nav a:not(.btn):hover::after { width: 100%; }
.nav__cta { padding: 10px 22px; font-size: .95rem; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.burger span {
  width: 26px; height: 3px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Héro ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(12,14,17,.96) 0%, rgba(12,14,17,.82) 45%, rgba(12,14,17,.45) 100%),
    url("../assets/atelier-garage-carrosserie-magliolo-porto-vecchio.jpg") center / cover no-repeat;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 85% 20%, rgba(255,106,0,.22), transparent 65%);
}
.hero__content { position: relative; z-index: 2; padding: 120px 24px; }

.hero__kicker {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--orange-2);
  margin-bottom: 14px;
}
.hero__text { max-width: 620px; margin: 22px 0 34px; color: #d3d8df; font-size: 1.08rem; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #cbd2da;
  font-weight: 500;
  font-size: .95rem;
}

.hero__scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 14px;
  z-index: 2;
}
.hero__scroll span {
  position: absolute;
  top: 7px; left: 50%;
  width: 4px; height: 9px;
  margin-left: -2px;
  background: var(--orange);
  border-radius: 2px;
  animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Bandeau chiffres ---------- */
.strip { background: var(--grad); color: var(--white); }
.strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 34px 24px;
}
.strip__item { text-align: center; }
.strip__item strong {
  display: block;
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}
.strip__item span { font-size: .92rem; opacity: .95; }

/* ---------- Présentation ---------- */
.about { background: var(--light); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.about__media { position: relative; }
.about__media > img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__media-card {
  position: absolute;
  right: -34px; bottom: -34px;
  width: 46%;
  border: 6px solid var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about__media-card img { aspect-ratio: 1; object-fit: cover; }

.about__body h2 { margin-bottom: 20px; }
.about__body p { margin-bottom: 16px; color: #3b4350; }

.checklist { list-style: none; margin: 10px 0 28px; }
.checklist li {
  padding-left: 34px;
  position: relative;
  margin-bottom: 12px;
  font-weight: 500;
}
.checklist li::before {
  content: "✔";
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  background: var(--grad);
  color: var(--white);
  border-radius: 50%;
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Vidéo ---------- */
.video { background: var(--dark); color: var(--white); position: relative; overflow: hidden; }
.video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 380px at 15% 10%, rgba(255,106,0,.14), transparent 60%);
}
.video__inner { position: relative; text-align: center; }
.video__inner .section__kicker { padding-left: 0; }
.video__inner .section__kicker::before { display: none; }
.video__intro { max-width: 720px; margin: 18px auto 40px; color: #c8cfd8; }

.video__frame {
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
}
.video__frame iframe, .video__frame video {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.video__placeholder { position: absolute; inset: 0; }
.video__placeholder img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.video__play {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--white);
  padding-left: 6px;
  box-shadow: 0 0 0 0 rgba(255,106,0,.5);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,106,0,.45); }
  70% { box-shadow: 0 0 0 26px rgba(255,106,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,0,0); }
}
.video__overlay p { font-weight: 600; letter-spacing: .5px; color: #e8ebef; }
.video__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }

/* Bouton play central : visible quand la vidéo est à l'arrêt.
   Cercle sombre semi-transparent + liseré blanc : lisible quelle que soit
   l'image de fond. 88 px = confortable au doigt (48 px minimum recommandé). */
.video__playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.92);
  background: rgba(10,12,15,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;            /* recentre optiquement le triangle */
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  transition: opacity .3s ease, visibility .3s, transform .3s ease, background .2s ease;
}
.video__playbtn svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.video__playbtn:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(230,60,20,.85); }
.video__playbtn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
  background: rgba(230,60,20,.85);
}
.video__frame.is-playing .video__playbtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Prestations ---------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 52px;
}
.card {
  background: var(--white);
  border: 1px solid #e6e9ee;
  border-radius: var(--radius);
  padding: 36px 32px;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }

.card__icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: rgba(255,106,0,.1);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.card__icon svg { width: 38px; height: 38px; }

.card h3 { margin-bottom: 12px; }
.card > p { color: #4b5563; margin-bottom: 18px; }
.card ul { list-style: none; margin-bottom: 18px; }
.card ul li {
  padding: 7px 0 7px 26px;
  position: relative;
  border-bottom: 1px dashed #e6e9ee;
  font-size: .95rem;
}
.card ul li:last-child { border-bottom: 0; }
.card ul li::before {
  content: "›";
  position: absolute;
  left: 6px;
  color: var(--orange);
  font-weight: 800;
}
.card__note {
  background: var(--light);
  border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  font-size: .92rem;
  color: #3b4350;
}

.card--featured { border: 2px solid transparent; background:
  linear-gradient(var(--white), var(--white)) padding-box,
  var(--grad) border-box; }
.card__badge {
  position: absolute;
  top: 18px; right: -38px;
  background: var(--grad);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .8rem;
  padding: 6px 44px;
  transform: rotate(35deg);
}

/* ---------- Assurances ---------- */
.insurance { background: var(--dark); color: var(--white); position: relative; overflow: hidden; }
.insurance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 90% 90%, rgba(255,106,0,.12), transparent 60%);
}
.insurance__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
.insurance__body > p { color: #c8cfd8; margin-bottom: 26px; }
.insurance__body h2 { margin-bottom: 18px; }

.steps { list-style: none; display: grid; gap: 18px; }
.steps li { display: flex; gap: 18px; align-items: flex-start; }
.steps li > span {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.25rem;
}
.steps li div { color: #c8cfd8; font-size: .96rem; }
.steps li strong { color: var(--white); font-size: 1.05rem; }

.insurance__panel {
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
}
.insurance__panel h3 { margin-bottom: 18px; }
.insurance__logos { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pill {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1px;
  background: var(--white);
  color: var(--dark);
  padding: 10px 22px;
  border-radius: 8px;
}
.insurance__panel p { color: #c8cfd8; font-size: .95rem; }
.insurance__panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 22px 0; }
.insurance__cta-text { margin-bottom: 18px; }
.insurance__panel .btn { margin-bottom: 12px; }

/* ---------- Points forts ---------- */
.strengths { background: var(--light); }
.strengths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.strength {
  background: var(--white);
  border: 1px solid #e6e9ee;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.strength:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.strength span {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,106,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

/* ---------- Bandeau CTA ---------- */
.cta-band { background: var(--grad); color: var(--white); padding: 78px 0; }
.cta-band__inner { text-align: center; max-width: 850px; }
.cta-band p { margin: 18px auto 32px; font-size: 1.08rem; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn--outline-dark { border-color: var(--white); color: var(--white); }
.cta-band .btn--outline-dark:hover { background: var(--white); color: var(--red); }

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: start;
}
.contact__info h2 { margin-bottom: 16px; }
.contact__info > p { color: #4b5563; margin-bottom: 28px; }

.contact__details { list-style: none; display: grid; gap: 18px; margin-bottom: 30px; }
.contact__details li { display: flex; gap: 16px; align-items: flex-start; }
.contact__ico {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,106,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.contact__details a { color: var(--orange); font-weight: 600; text-decoration: none; }
.contact__details a:hover { text-decoration: underline; }

.contact__map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 280px;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; }
.contact__itineraire { margin-top: 18px; }

.contact__form-wrap {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.contact__form-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: var(--grad);
}
.contact__form-wrap h3 { margin-bottom: 24px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { margin-bottom: 16px; }
.form__field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .4px;
  margin-bottom: 6px;
  color: #c8cfd8;
}
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form__field select { appearance: none; }
/* Les options étaient en sombre : sur le fond gris foncé du champ, l'option
   affichée (« Choisir… », désactivée) devenait illisible. On les met en blanc
   sur le même fond que le champ, lisible aussi bien fermé qu'ouvert. */
.form__field select option { color: var(--white); background-color: var(--dark-3); }
.form__field input::placeholder, .form__field textarea::placeholder { color: #6b7280; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,106,0,.2);
}
.form__field textarea { resize: vertical; }
.form__note { margin-top: 14px; font-size: .8rem; color: #8b95a1; text-align: center; }

/* ---------- Pied de page ---------- */
.footer { background: var(--dark); color: var(--grey); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 64px 24px 48px;
}
.footer__brand img { height: 88px; width: auto; border-radius: 8px; margin-bottom: 18px; }
.footer__brand p { font-size: .92rem; }

.footer__col h4 {
  font-family: var(--font-title);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.footer__col a, .footer__col span {
  display: block;
  color: var(--grey);
  text-decoration: none;
  font-size: .92rem;
  margin-bottom: 10px;
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--orange-2); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size: .82rem; }
.footer__bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Avis clients ---------- */
.reviews { background: var(--light); }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.review-card {
  background: var(--white);
  border: 1px solid #e6e9ee;
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.review-card__stars { color: #fbbc05; font-size: 1.15rem; letter-spacing: 2px; }
.review-card__badge { width: 20px; height: 20px; }
.review-card__text { color: #3b4350; font-size: .95rem; line-height: 1.6; flex: 1; }
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-weight: 600;
  color: var(--dark-2);
}
.review-card__author span {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
}
@media (max-width: 1024px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ---------- Bouton d'appel flottant (mobile) ---------- */
.fab {
  position: fixed;
  right: 22px; bottom: 92px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(230,60,20,.5);
  z-index: 90;
  animation: pulse 2.2s infinite;
}

/* ---------- Bouton WhatsApp flottant (toutes tailles d'écran) ---------- */
.wafab {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(37,211,102,.5);
  z-index: 91;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wafab:hover { transform: scale(1.06); box-shadow: 0 18px 40px rgba(37,211,102,.6); }
.wafab__icon { width: 34px; height: 34px; fill: #fff; }
.wafab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5);
  animation: pulse 2.4s infinite;
}
.wafab__tip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--dark);
  color: var(--white);
  font-size: .85rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wafab__tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left-color: var(--dark);
}
.wafab:hover .wafab__tip,
.wafab:focus-visible .wafab__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 768px) {
  .wafab__tip { display: none; }
}

/* ---------- Animations d'apparition ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }
.delay-4 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: 1fr; }
  .strengths__grid { grid-template-columns: repeat(2, 1fr); }
  .insurance__grid, .contact__grid, .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__media { max-width: 480px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 992px) {
  .burger { display: flex; }
  .nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--dark-2);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    padding: 40px 34px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
    z-index: 99;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav a:not(.btn) { font-size: 1.3rem; }
}

@media (max-width: 768px) {
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar span:first-child { display: none; }

  .hero { min-height: auto; }
  .hero__content { padding: 90px 24px 110px; }
  .hero__badges { gap: 8px 18px; font-size: .88rem; }

  .strip__inner { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .strengths__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .about__media-card { right: -10px; bottom: -24px; }
  .section { padding: 72px 0; }
  .fab { display: flex; }
  .footer__inner { grid-template-columns: 1fr; padding-top: 48px; }
  .footer__bottom .container { justify-content: center; text-align: center; }
}

/* ============================================================
   PAGES INTÉRIEURES (prestations, galerie, conseils, contact)
   ============================================================ */

/* ---------- Menu déroulant Prestations ---------- */
.nav__item { position: relative; }
.nav__item > a:not(.btn) { display: inline-block; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 10px;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow: var(--shadow);
  z-index: 110;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown,
.nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 14px !important;
  border-radius: 8px;
  font-size: .95rem !important;
  letter-spacing: 1px !important;
}
.dropdown a::after { display: none !important; }
.dropdown a:hover { background: rgba(255,106,0,.12); color: var(--orange-2) !important; }

/* Sur mobile, le menu est un panneau étroit : le sous-menu ne doit plus être
   positionné en absolu (il débordait du bandeau noir sur la photo de fond).
   Il s'insère dans le flux, en retrait, et reste donc dans le panneau.
   Ce bloc doit rester APRÈS les règles ci-dessus pour les emporter. */
@media (max-width: 992px) {
  .nav__item { width: 100%; }
  .dropdown {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding: 0 0 0 16px;
    background: transparent;
    border: 0;
    border-left: 2px solid rgba(255,106,0,.5);
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__item:hover .dropdown,
  .nav__item:focus-within .dropdown { transform: none; }
  .nav__item.is-open .dropdown { display: block; transform: none; }
  .dropdown a {
    padding: 9px 0 !important;
    font-size: 1rem !important;
    white-space: normal;
  }
  .dropdown a:hover { background: transparent; }
}

/* ---------- Petit héro de page intérieure ---------- */
.page-hero {
  background: var(--dark);
  color: var(--white);
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 300px at 85% 0%, rgba(255,106,0,.18), transparent 60%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); max-width: 900px; }
.page-hero__lead { max-width: 760px; margin-top: 16px; color: #c8cfd8; font-size: 1.05rem; }
.page-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.breadcrumb {
  font-size: .85rem;
  color: var(--grey);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--orange-2); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Corps de page prestation / article ---------- */
.page-body { padding: 72px 0; }
.page-body__grid {
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 56px;
  align-items: start;
}

.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 38px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin: 26px 0 10px; }
.prose p { margin-bottom: 14px; color: #3b4350; }
.prose ul { margin: 0 0 18px 4px; list-style: none; }
.prose ul li {
  padding: 6px 0 6px 26px;
  position: relative;
  color: #3b4350;
}
.prose ul li::before {
  content: "›";
  position: absolute;
  left: 6px;
  color: var(--orange);
  font-weight: 800;
}
.prose a { color: var(--orange); font-weight: 600; }
.prose img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 24px 0;
}
.prose figure { margin: 24px 0; }
.prose figure img { margin: 0; }
.prose figcaption { font-size: .85rem; color: var(--grey); margin-top: 8px; }
.prose blockquote {
  border-left: 4px solid var(--orange);
  background: var(--light);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-style: italic;
  color: #3b4350;
}

/* ---------- Panneau latéral (contact rapide) ---------- */
.sidebar { position: sticky; top: 110px; display: grid; gap: 24px; }
.sidebar__card {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.sidebar__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--grad);
}
.sidebar__card h2, .sidebar__card h3 { font-size: 1.35rem; margin-bottom: 14px; }
.sidebar__card p { color: #c8cfd8; font-size: .93rem; margin-bottom: 16px; }
.sidebar__card .btn { margin-bottom: 10px; }
.sidebar__card--light {
  background: var(--light);
  color: var(--dark-2);
  box-shadow: none;
  border: 1px solid #e6e9ee;
}
.sidebar__card--light p { color: #4b5563; }
.sidebar__links { list-style: none; }
.sidebar__links li { border-bottom: 1px dashed #d8dde4; }
.sidebar__links li:last-child { border-bottom: 0; }
.sidebar__links a {
  display: block;
  padding: 10px 2px;
  color: var(--dark-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
  transition: color .2s ease, padding-left .2s ease;
}
.sidebar__links a:hover { color: var(--orange); padding-left: 8px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; margin: 18px 0; }
.faq details {
  background: var(--light);
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 18px;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 1.4rem;
  font-weight: 700;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 18px 16px; color: #3b4350; font-size: .95rem; }

/* ---------- Galerie ---------- */
.gallery-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 34px 0 30px;
}
.gallery-filters button {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid #d8dde4;
  background: var(--white);
  color: var(--dark-2);
  cursor: pointer;
  transition: all .25s ease;
}
.gallery-filters button:hover { border-color: var(--orange); color: var(--orange); }
.gallery-filters button.is-active {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
}

.gallery-cat { margin-bottom: 54px; }
.gallery-cat.is-hidden { display: none; }
.gallery-cat h2 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,106,0,.35);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-grid figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--dark-3);
}
.gallery-grid figure.is-hidden { display: none; }
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-grid figure:hover img { transform: scale(1.06); }
.gallery-grid figcaption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: var(--white);
  font-size: .85rem;
  font-weight: 500;
  padding: 26px 16px 12px;
}

/* ---------- Cartes d'articles ---------- */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 44px;
}
.article-card {
  background: var(--white);
  border: 1px solid #e6e9ee;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.article-card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark-3); }
.article-card__img img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.article-card__cat {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: .8rem;
  color: var(--orange);
  margin-bottom: 8px;
}
.article-card h2, .article-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.article-card h2 a, .article-card h3 a { color: var(--dark-2); text-decoration: none; }
.article-card h2 a:hover, .article-card h3 a:hover { color: var(--orange); }
.article-card p { font-size: .92rem; color: #4b5563; flex: 1; }
.article-card__more {
  margin-top: 14px;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  color: var(--orange);
  text-decoration: none;
}
.article-card__more:hover { text-decoration: underline; }

.article-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--grey);
  font-size: .88rem;
  margin-top: 14px;
}
.article-meta .pill--cat {
  background: rgba(255,106,0,.14);
  color: var(--orange-2);
  font-size: .8rem;
  padding: 5px 14px;
}

/* ---------- Formulaire : envoi de photos ---------- */
.form__file {
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: #c8cfd8;
  font-size: .9rem;
  transition: border-color .25s ease;
}
.form__file:hover { border-color: var(--orange); }
.form__file input { border: 0 !important; background: transparent !important; padding: 8px 0 0 !important; color: #c8cfd8 !important; }

/* ---------- Bandeau prestations liées ---------- */
.related {
  background: var(--light);
  padding: 64px 0;
}
.related h2 { margin-bottom: 8px; }
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.related__grid a {
  background: var(--white);
  border: 1px solid #e6e9ee;
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--dark-2);
  font-weight: 600;
  font-size: .95rem;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.related__grid a:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.1); color: var(--orange); }
.related__grid a span { display: block; color: var(--orange); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }

@media (max-width: 1024px) {
  .page-body__grid { grid-template-columns: 1fr; gap: 44px; }
  .sidebar { position: static; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 16px;
    min-width: 0;
    display: none;
  }
  .nav__item.is-open .dropdown { display: block; }
  .dropdown a { padding: 8px 0 !important; font-size: 1.05rem !important; }
}

@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCUEIL — carrousel d'articles & défilé de photos
   ============================================================ */

/* ---------- Carrousel d'articles ---------- */
.carousel { position: relative; margin-top: 36px; }
.carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 18px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track .article-card {
  flex: 0 0 330px;
  scroll-snap-align: start;
}
.carousel__btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--grad);
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 10px 24px rgba(230,60,20,.4);
  transition: transform .2s ease;
}
.carousel__btn:hover { transform: translateY(-50%) scale(1.08); }
.carousel__btn--prev { left: -14px; }
.carousel__btn--next { right: -14px; }
@media (max-width: 768px) {
  .carousel__track .article-card { flex-basis: 82%; }
  .carousel__btn--prev { left: 4px; }
  .carousel__btn--next { right: 4px; }
}

/* ---------- Défilé de photos (marquee) ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  margin-top: 40px;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }

.marquee__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marqueeScroll 55s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track a {
  display: block;
  flex: 0 0 auto;
}
.marquee__track img {
  height: 215px;
  width: auto;
  max-width: 340px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  transition: transform .3s ease;
}
.marquee__track a:hover img { transform: scale(1.04); }
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .marquee__track img { height: 150px; max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}