/* ═══════════════════════════════════════════════════════════
   HORIZON Car Detail — style.css
   Charte : #ABD9F3 | #35A0F3 | #1A1F2C | #000 | #FFF
   Typos  : Michroma (titres) | Cinzel (textes)

   MOBILE-FIRST : chaque règle de base vise d'abord un téléphone. Les deux
   points d'étape ci-dessous ajoutent ou agrandissent au fur et à mesure que
   l'écran grandit — ils ne retirent jamais rien pour un petit écran.
     @media (min-width: 768px)  → tablette et plus
     @media (min-width: 1024px) → ordinateur

   Classes utilitaires réutilisées partout :
     .container .grid .center .eyebrow .title .divider .btn .ghost
     .note .hint .row .opt .fade/.in .sr-only
   Le reste du style passe par les balises (header, figure, ul, label…)
═══════════════════════════════════════════════════════════ */

/* ──────────────────── RESET & BASE ──────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-light : #ABD9F3;
  --blue-main  : #35A0F3;
  --dark       : #1A1F2C;
  --black      : #000000;
  --white      : #FFFFFF;
  --grey       : #9AA0AD;
  --surface    : #111520;
  --surface-2  : #161B27;
  --grad       : linear-gradient(135deg, #ABD9F3 0%, #35A0F3 100%);
  --radius     : 12px;
  --transition : 0.35s cubic-bezier(0.4,0,0.2,1);
  --ls         : 0.19em;
  /* Le rembourrage latéral des sections : plus étroit sur téléphone, il
     s'élargit avec l'écran. Une seule variable pour tout le site. */
  --gutter     : 1.15rem;
}
@media (min-width: 560px)  { :root { --gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2rem; } }

/* ──────────────────── LE SIGNE € ────────────────────
   Le € est écrit en Idiqlat. La police est demandée dans le <head> par un
   lien Google Fonts volontairement restreint à ce seul caractère
   (« text=%E2%82%AC ») : Google renvoie alors un @font-face dont
   l'unicode-range vaut U+20AC. La famille « Idiqlat » ne PEUT donc
   s'appliquer qu'à l'euro. C'est ce qui permet de la placer en tête de
   toutes les piles de polices ci-dessous sans rien changer d'autre :
   chaque lettre continue de sortir en Michroma ou en Cinzel.

   ⚠ Ne remplacez pas ce lien par le lien Idiqlat complet : privé de
   « text= », la police couvrirait tout l'alphabet et remplacerait Michroma
   partout où son nom apparaît.

   « EuroSecours » est le filet : si Google Fonts n'est pas joignable — poste
   hors ligne, requête bloquée — l'euro est repris d'une police déjà
   installée sur la machine plutôt que de disparaître.

   Pour rendre le € à Michroma, retirez « 'Idiqlat', 'EuroSecours', » des
   font-family ci-dessous.                                                  */
@font-face {
  font-family: 'EuroSecours';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Helvetica'),
       local('Arial'), local('Liberation Sans'), local('DejaVu Sans'), local('Roboto');
  unicode-range: U+20AC;
}

html { scroll-behavior: smooth; font-size: 16px; }
/* Une section ciblée par un lien d'ancre (#rdv…) ne se colle pas sous la
   barre de navigation fixe : l'ancre virtuelle réserve sa hauteur. */
:target { scroll-margin-top: 4.5rem; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Idiqlat', 'EuroSecours', 'Cinzel', Georgia, serif;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* Visible seulement des lecteurs d'écran : porte le texte SEO du logo (h1)
   sans dupliquer visuellement l'image. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; }
.center { text-align: center; }

/* Toutes les typos en Michroma capitales partagent ces trois règles. */
.eyebrow, .title, .btn, .ghost, .nav ul a,
.step h3, .total span:first-child,
 form label:not(.choice) > span, .footer .coords, .hero h1 {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}

.eyebrow {
  font-size: 0.68rem;
  color: var(--blue-main);
  margin-bottom: 0.75rem;
}
.title {
  font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.2;
  color: var(--white);
}
.divider {
  width: 60px;
  height: 2px;
  background: var(--grad);
  margin: 1.5rem 0 2rem;
  border-radius: 2px;
}
@media (min-width: 768px) { .divider { margin: 1.5rem 0 2.5rem; } }
.center .divider { margin-left: auto; margin-right: auto; }

.note { margin-top: 1rem; color: var(--grey); font-size: 0.82rem; }
.hint { grid-column: 1 / -1; margin: 0; color: var(--grey); font-size: 0.85rem; }

/* ──────────────────── BOUTONS ────────────────────
   44px de hauteur minimum : la taille de cible tactile recommandée. */
.btn, .ghost {
  display: inline-block;
  min-height: 44px;
  padding: 0.9rem 1.9rem;
  font-size: 0.72rem;
  border-radius: 50px;
  cursor: pointer;
}
@media (min-width: 768px) { .btn, .ghost { padding: 0.85rem 2.2rem; } }
.btn {
  background: var(--grad);
  color: var(--white);
  border: none;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(53,160,243,0.4); }
.btn:hover::after { opacity: 1; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.ghost {
  background: transparent;
  color: var(--blue-light);
  border: 1.5px solid var(--blue-main);
  transition: all var(--transition);
}
.ghost:hover {
  background: var(--grad);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(53,160,243,0.3);
}

/* ──────────────────── NAVBAR ────────────────────
   Logo | menu | téléphone + « Prendre rendez-vous ».
   Le bouton de rendez-vous est l'action principale du site : il reste
   visible à toutes les tailles, à côté du burger sur téléphone (en
   version courte « RDV »), et porte un halo qui le distingue du menu.
   Sur l'accueil, la barre est transparente au-dessus de la vidéo ; sur
   les autres pages (body.page-interne), elle est opaque d'emblée. */
.nav {
  position: fixed;
  top: var(--avis-h, 0px); left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  transition: background var(--transition), backdrop-filter var(--transition), padding var(--transition);
}
.nav.scrolled, .page-interne .nav {
  background: rgba(10, 12, 20, 0.92);
  backdrop-filter: blur(12px);
  padding: 0.75rem var(--gutter);
  border-bottom: 1px solid rgba(53,160,243,0.12);
}

.logo { display: flex; align-items: center; flex-wrap: wrap; }
.nav .logo { width: 6.4rem; position: relative; z-index: 1001; flex-shrink: 0; }

.nav ul { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  position: relative;
  z-index: 1001;   /* au-dessus du menu déplié sur téléphone */
}

/* Le téléphone : une icône ronde, le numéro en clair sur grand écran. */
.nav-tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--blue-light);
  font-family: 'Michroma', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-tel svg {
  width: 38px; height: 38px;
  padding: 9px;
  border: 1px solid rgba(53,160,243,0.35);
  border-radius: 50%;
  transition: border-color var(--transition), background var(--transition);
}
.nav-tel span { display: none; }
.nav-tel:hover { color: var(--white); }
.nav-tel:hover svg { border-color: var(--blue-main); background: rgba(53,160,243,0.1); }

/* Le bouton de rendez-vous */
.nav-rdv {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.6rem 1.1rem;
  font-size: 0.62rem;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(53,160,243,0.55), 0 6px 22px rgba(53,160,243,0.35);
  animation: halo-rdv 2.8s ease-out infinite;
}
.nav-rdv svg { width: 17px; height: 17px; flex-shrink: 0; position: relative; z-index: 1; }
.nav-rdv span { position: relative; z-index: 1; }
.nav-rdv-long { display: none; }
.nav-rdv[aria-current="page"] { animation: none; }
@keyframes halo-rdv {
  0%   { box-shadow: 0 0 0 0 rgba(53,160,243,0.55), 0 6px 22px rgba(53,160,243,0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(53,160,243,0), 0 6px 22px rgba(53,160,243,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(53,160,243,0), 0 6px 22px rgba(53,160,243,0.35); }
}
@media (prefers-reduced-motion: reduce) { .nav-rdv { animation: none; } }

.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -10px;
}
.burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--white);
  transition: all var(--transition);
}
.nav.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.menu-open .burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav.menu-open ul {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.97);
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  z-index: 999;
}
.nav.menu-open ul a { font-size: 0.95rem; }
.nav .menu-tel a { color: var(--blue-light); }

@media (min-width: 480px) {
  .nav-tel { display: inline-flex; }
}
@media (min-width: 768px) {
  .nav { padding: 1.1rem 2.5rem; }
  .nav.scrolled, .page-interne .nav { padding: 0.8rem 2.5rem; }
  .nav .logo { width: 8.4rem; }
  .nav ul { display: flex; gap: 1.75rem; margin-left: auto; margin-right: 1rem; }
  .nav .menu-tel { display: none; }
  .nav-rdv { font-size: 0.64rem; padding: 0.75rem 1.4rem; min-height: 44px; }
  .burger { display: none; }
}
@media (min-width: 1024px) {
  .nav-rdv-court { display: none; }
  .nav-rdv-long { display: inline; }
}
@media (min-width: 1200px) {
  .nav .logo { width: 9.2rem; }
  .nav ul { gap: 2.5rem; margin-right: 1.5rem; }
  .nav-tel span { display: inline; }
  .nav-rdv { font-size: 0.68rem; padding: 0.85rem 1.7rem; }
}

.nav ul a {
  font-size: 0.65rem;
  color: var(--grey);
  transition: color var(--transition);
  position: relative;
}
.nav ul a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--grad);
  transition: width var(--transition);
}
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--white); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { width: 100%; }

/* Pages intérieures : la première section passe sous la barre fixe. */
.page-interne main > section:first-child { padding-top: calc(7.5rem + var(--avis-h, 0px)); }
@media (min-width: 1024px) { .page-interne main > section:first-child { padding-top: calc(10rem + var(--avis-h, 0px)); } }


/* ──────────────────── HERO ──────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* ::before = dégradé de secours sous la vidéo, ::after = voile sombre */
.hero::before, .hero::after { content: ''; position: absolute; inset: 0; }
.hero::before { background: linear-gradient(135deg, #0a0e18 0%, #1a1f2c 40%, #0d1520 100%); }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.75) 0%,
    rgba(26,31,44,0.6) 50%,
    rgba(0,0,0,0.8) 100%
  );
}

.hero > div { position: relative; z-index: 2; text-align: center; padding: 0 1.25rem; }
.hero .eyebrow { color: var(--blue-light); margin-bottom: 1.25rem; font-size: 0.62rem; }
.hero h1 {
  font-size: clamp(2.6rem, 15vw, 5rem);
  line-height: 1;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.hero h1 + p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin: 0 auto 0.5rem;
  max-width: 500px;
}
.hero-sub {
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--grey);
  max-width: 460px;
  margin: 0 auto 2.25rem;
  text-transform: none;
  letter-spacing: normal;
}
.hero .btn { font-size: 0.74rem; padding: 1rem 2.4rem; }

@media (min-width: 768px) {
  .hero .eyebrow { font-size: 0.7rem; margin-bottom: 1.5rem; }
  .hero h1 { font-size: clamp(3.5rem, 12vw, 9rem); }
  .hero h1 + p { font-size: clamp(0.9rem, 1.5vw, 1.1rem); margin-bottom: 0.75rem; }
  .hero-sub { font-size: 0.8rem; margin-bottom: 3rem; }
  .hero .btn { font-size: 0.78rem; padding: 1rem 2.8rem; }
}

.scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) { .scroll { bottom: 2.5rem; } }
.scroll span {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--blue-main));
  animation: pulse 2s ease-in-out infinite;
}
@media (min-width: 768px) { .scroll span { height: 60px; } }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* ──────────────────── À PROPOS ──────────────────── */
.about, .photos { background: var(--dark); padding: 4.5rem 0 1.5rem 0; }
.gallery, .rdv { background: var(--black); padding: 4.5rem 0; }
.gallery { overflow: hidden; }

@media (min-width: 1024px) {
  .about, .photos { padding: 8rem 0 2rem 0; }
  .gallery, .rdv { padding: 8rem 0; }
}

/* Titre en haut, puis photo portrait | texte, puis les certifications
   sur toute la largeur. */
.about .grid { grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.about figure { position: relative; max-width: 420px; margin: 0 auto; }
.about figure img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: 60% 50%;
  border-radius: var(--radius);
  filter: grayscale(20%);
  background: var(--surface);
}
@media (min-width: 1024px) {
  .about .grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .about figure { max-width: none; margin: 0; }
}

.badge {
  position: absolute;
  bottom: -1rem;
  right: -0.75rem;
  background: var(--grad);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(53,160,243,0.35);
}
@media (min-width: 768px) {
  .badge { bottom: -1.5rem; right: -1.5rem; padding: 1.5rem; }
}
.badge span, .stats span:first-child { display: block; }
.badge span:first-child {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 1.7rem;
  color: var(--white);
  line-height: 1;
}
@media (min-width: 768px) { .badge span:first-child { font-size: 2rem; } }
.badge span:last-child, .stats span:last-child {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}
@media (min-width: 768px) { .badge span:last-child, .stats span:last-child { font-size: 0.65rem; } }
.badge span:last-child { color: rgba(255,255,255,0.85); margin-top: 0.25rem; }

.about .grid > div > p {
  color: var(--grey);
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
  line-height: 1.8;
}
.zone-desserte { color: var(--grey); font-size: 0.85rem; font-style: italic; }
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 768px) { .stats { gap: 2.5rem; margin-top: 2.5rem; padding-top: 2.5rem; } }
.stats span:first-child {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 1.6rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.3rem;
}
@media (min-width: 768px) { .stats span:first-child { font-size: 1.8rem; } }
.stats span:last-child { color: var(--grey); text-transform: uppercase; }

/* ──────────────────── CERTIFICATS ────────────────────
   Les deux diplômes. Empilés sur téléphone (illisibles côte à côte sur un
   petit écran), côte à côte à partir de 768px. Chaque cadre reçoit
   d'index.php les proportions RÉELLES de son image dans --ratio : il
   épouse donc exactement la photo, sans bande ni rognage. */
.certificats-titre {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 0.6rem;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--grey);
}

.certificats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .certificats-titre { margin-top: 4rem; margin-bottom: 1.1rem; }
  .certificats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
.certificat {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.certificat-vue {
  display: block;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--surface-2);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.certificat-vue img { width: 100%; height: 100%; object-fit: cover; }
.certificat:hover .certificat-vue {
  transform: translateY(-4px);
  border-color: rgba(53,160,243,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.certificat:focus-visible { outline: none; }
.certificat:focus-visible .certificat-vue { outline: 2px solid var(--blue-main); outline-offset: 3px; }

.certificat-nom {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--grey);
  transition: color var(--transition);
}
.certificat:hover .certificat-nom { color: var(--white); }

/* ──────────────────── AVANT / APRÈS ────────────────────
   La bande défile toute seule (scroll-snap) : plus de flèches, de points
   ni de code de glissement. Le comparateur tient dans une variable CSS,
   --pos, que le curseur de chaque figure déplace. */
.slider {
  display: flex;
  gap: 1.1rem;
  margin-top: 2.5rem;
  padding: 0 var(--gutter) 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,160,243,0.5) transparent;
}
@media (min-width: 768px) {
  .slider { gap: 1.5rem; margin-top: 3rem; padding: 0 max(2rem, calc(50vw - 540px)) 1.5rem; }
}

.ba {
  --pos: 50%;
  position: relative;
  flex: 0 0 280px;
  max-width: 84vw;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  scroll-snap-align: center;
}
.ba img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--surface-2);
}
@media (min-width: 768px) {
  .ba { flex: 0 0 380px; max-width: 88vw; }
  .ba img { height: 340px; }
}
@media (min-width: 1024px) {
  .ba { flex: 0 0 480px; }
}

/* La photo « avant » recouvre l'autre, découpée à la position du curseur. */
.ba-avant {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Le trait de séparation, avec sa pastille au centre. */
.ba-trait {
  position: absolute;
  top: 0;
  bottom: 3.4rem;
  left: var(--pos);
  width: 2px;
  background: var(--grad);
  pointer-events: none;
}
.ba-trait::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 4px 16px rgba(53,160,243,0.5);
}

/* Le curseur recouvre la photo sans se voir : on glisse, on touche, on
   clique, et les flèches du clavier fonctionnent aussi. */
.ba input {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(100% - 3.4rem);
  margin: 0;
  opacity: 0;
  cursor: col-resize;
  touch-action: pan-y;
}
.ba:has(input:focus-visible) { outline: 2px solid var(--blue-main); outline-offset: 2px; }

.ba figcaption {
  padding: 0.9rem 1.1rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--grey);
  text-align: center;
  text-transform: uppercase;
}

/* ──────────────────── GALERIE PHOTO ──────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 3rem; }
}
.photo-grid a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition), opacity var(--transition);
}
.photo-grid a { position: relative; }
.photo-grid a:hover img { transform: scale(1.04); opacity: 0.88; }
.photo-grid a:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 3px; }

/* Le nom du véhicule, marque comprise, révélé au survol. Il monte depuis
   le bas sur un voile sombre : le texte reste lisible quelle que soit la
   photo. Le voile est dans le dégradé, pas dans un bloc opaque, pour ne
   pas masquer la voiture. */
.photo-nom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 0.6rem 0.6rem;
  font-size: 0.66rem;
  line-height: 1.4;
  text-align: center;
  color: var(--white);
  background: linear-gradient(to top, rgba(0,0,0,0.88) 35%, transparent);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
@media (min-width: 768px) { .photo-nom { padding: 2.5rem 1rem 1rem; font-size: 0.74rem; } }
.photo-grid a:hover .photo-nom,
.photo-grid a:focus-visible .photo-nom {
  opacity: 1;
  transform: none;
}
/* Sans survol possible (écrans tactiles), le nom reste affiché. */
@media (hover: none) {
  .photo-nom { opacity: 1; transform: none; }
}
/* Indispensable : « display: block » ci-dessus l'emporterait sinon sur le
   display:none que l'attribut hidden applique aux photos filtrées. */
.photo-grid a[hidden] { display: none; }

/* ──────────────────── FILTRE PAR MARQUE ────────────────────
   Une case à cocher par marque présente dans images/galerie, portant le
   logo déposé dans images/marques. Éteinte, la pastille est en gris et en
   retrait ; cochée, elle retrouve ses couleurs et son cerclage bleu.

   Le fond clair de la pastille n'est pas décoratif : les logos de marques
   sont dessinés pour le papier blanc et la plupart disparaîtraient sur le
   fond sombre du site. */
.filtre-marques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px) { .filtre-marques { gap: 0.75rem; margin-top: 2.5rem; } }

.marque-tout {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 0.56rem;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  border-radius: 50px;
  border: 1.5px solid rgba(53,160,243,0.35);
  background: transparent;
  color: var(--grey);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
@media (min-width: 768px) { .marque-tout { padding: 0.75rem 1.4rem; } }
.marque-tout:hover { color: var(--white); border-color: var(--blue-main); }
.marque-tout.is-actif {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
}
.marque-tout:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 2px; }

.marque-case { display: block; position: relative; cursor: pointer; }
.marque-case input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.marque-pastille {
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 46px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--white);
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--transition), filter var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
@media (min-width: 768px) { .marque-pastille { min-width: 78px; height: 56px; padding: 0.5rem 0.9rem; } }
.marque-case:hover .marque-pastille { opacity: 0.85; filter: grayscale(0.25); }
.marque-case input:checked + .marque-pastille {
  opacity: 1;
  filter: none;
  border-color: var(--blue-main);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(53,160,243,0.28);
}
.marque-case input:focus-visible + .marque-pastille {
  outline: 2px solid var(--blue-main);
  outline-offset: 2px;
}

.marque-pastille img { max-width: 100%; max-height: 30px; object-fit: contain; }
@media (min-width: 768px) { .marque-pastille img { max-height: 38px; } }
.marque-texte {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  white-space: nowrap;
}

/* ──────────────────── BANDEAU DES MARQUES ────────────────────
   Une bande de logos qui glisse sans fin. Le principe tient en deux
   lignes : index.php écrit la série DEUX fois, et l'animation déplace la
   piste d'exactement sa moitié. Au moment où elle repart à zéro, la
   seconde série occupe déjà la place de la première — l'œil ne voit
   aucun raccord.

   L'écart entre deux logos est une marge, jamais un « gap » : une marge
   appartient à la largeur de chaque série, alors qu'un gap s'intercale
   aussi entre les deux séries et décalerait la boucle d'un cran.

   La durée arrive d'index.php dans --duree, proportionnelle au nombre de
   logos : la bande garde la même vitesse qu'il y en ait trois ou trente. */
.bandeau { background: var(--dark); padding: 1rem 0 3.5rem 0; }
@media (min-width: 768px) { .bandeau { padding: 5rem 0; } }
@media (min-width: 1024px) { .bandeau { padding: 1rem 0 7rem 0; } }

.bandeau-cadre {
  margin-top: 2.5rem;
  overflow: hidden;
  /* Les deux bords s'effacent en fondu : la bande n'a ni début ni fin. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
@media (min-width: 768px) { .bandeau-cadre { margin-top: 3rem; } }

.bandeau-piste {
  display: flex;
  width: max-content;
  animation: defile-marques var(--duree, 60s) linear infinite;
}
/* Au survol, la bande s'arrête : on peut lire un logo au passage. */
.bandeau-cadre:hover .bandeau-piste { animation-play-state: paused; }

@keyframes defile-marques {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Ni cadre ni fond : les logos posent à même la section. Ce qui aligne la
   rangée, c'est leur HAUTEUR commune — la largeur, elle, suit les
   proportions de chaque logo. Tous sont centrés sur la même ligne.

   index.php écrit les attributs width et height de chaque image : le
   navigateur connaît donc les proportions avant le téléchargement et
   réserve la bonne place. Sans cela, la piste s'élargirait au fur et à
   mesure des arrivées et la bande sauterait pendant le défilé. */
.marque {
  flex: none;
  height: 42px;
  margin-right: 2.25rem;
  display: flex;
  align-items: center;
}
.marque img {
  height: 100%;
  width: auto;
  /* Garde-fou pour un futur logo démesurément large : aucun des logos
     actuels ne l'atteint, sinon il serait rétréci et perdrait la ligne. */
  max-width: 360px;
  object-fit: contain;
}
@media (min-width: 768px) { .marque { height: 52px; margin-right: 3rem; } }
@media (min-width: 1024px) { .marque { height: 60px; margin-right: 3.5rem; } }

/* Mouvement réduit demandé par le système : la bande s'immobilise et
   redevient une simple rangée que l'on fait défiler à la main. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-piste { animation: none; }
  .bandeau-cadre { overflow-x: auto; }
}


/* ──────────────────── FORMULAIRES (RDV + CONTACT) ────────────────────
   Les champs visent 16px minimum (via rem) : sous ce seuil, Safari iOS
   zoome automatiquement sur le champ au moment de la saisie. */
form label:not(.choice) { display: block; margin-bottom: 1.1rem; }
form label:not(.choice) > span {
  display: block;
  font-size: 0.58rem;
  color: var(--grey);
  margin-bottom: 0.5rem;
}

form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
form select,
form textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  color: var(--white);
  font-family: 'Idiqlat', 'EuroSecours', 'Cinzel', serif;
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
}
@media (min-width: 768px) {
  form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  form select, form textarea { font-size: 0.88rem; }
}
form input:focus, form select:focus, form textarea:focus
  { border-color: var(--blue-main); box-shadow: 0 0 0 3px rgba(53,160,243,0.12); }
form ::placeholder { color: rgba(255,255,255,0.25); }
form textarea { resize: vertical; min-height: 110px; }
form button.btn { width: 100%; text-align: center; }
option { background: var(--dark); }

/* Menus déroulants. Aucune flèche : le style d'origine n'en affichait pas,
   la règle qui la dessinait étant écrasée par celle des champs. Pour en
   ajouter une, poser ici un background-image après la règle des champs. */
form select { cursor: pointer; }
form select:disabled { cursor: not-allowed; opacity: 0.55; }

.row { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 640px) { .row { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.opt { color: var(--grey); text-transform: none; letter-spacing: 0; }

/* ──────────────────── PRISE DE RENDEZ-VOUS ──────────────────── */
.intro {
  max-width: 600px;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--grey);
  font-size: 0.88rem;
  line-height: 1.8;
}
@media (min-width: 768px) { .intro { margin-bottom: 3rem; font-size: 0.95rem; } }

.feedback {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
}
.feedback.ok {
  background: rgba(53,160,243,0.1);
  border: 1px solid rgba(53,160,243,0.3);
  color: var(--blue-light);
}
.feedback.err {
  background: rgba(243,99,53,0.08);
  border: 1px solid rgba(243,99,53,0.35);
  color: #f8b79a;
}

/* ─── Barre de progression de l'assistant ─── */
.wizard-progress {
  max-width: 760px;
  margin: 0 auto 0.6rem;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.wizard-progress-bar {
  height: 100%;
  width: 16.66%;
  background: var(--grad);
  border-radius: 4px;
  transition: width var(--transition);
}
.wizard-step-label {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
}

.rdv form { max-width: 760px; margin: 0 auto; }
.trap { position: absolute; left: -9999px; }

/* Une seule étape visible à la fois : c'est ce qui fait l'assistant. */
.step { display: none; }
.step.is-active { display: block; }

.step {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.1rem;
}
@media (min-width: 768px) { .step { padding: 2rem 2.25rem; margin-bottom: 1.25rem; } }
.step h3 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.76rem;
  color: var(--white);
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .step h3 { gap: 0.9rem; font-size: 0.8rem; margin-bottom: 1.5rem; } }
.step h3 span {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: var(--white);
  border-radius: 50%;
}
@media (min-width: 768px) { .step h3 span { width: 28px; height: 28px; } }
.step h3 + .note { margin: -0.6rem 0 1.1rem; }

/* Navigation Précédent / Continuer, au pied de chaque étape. */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.step-nav .btn, .step-nav .ghost { flex: 1; min-width: 0; padding-left: 0.9rem; padding-right: 0.9rem; }
@media (min-width: 400px) { .step-nav .btn, .step-nav .ghost { padding-left: 1.9rem; padding-right: 1.9rem; } }
@media (min-width: 560px) { .step-nav .btn, .step-nav .ghost { flex: none; } }
.step-services .step-nav .btn { margin-left: auto; }

/* L'étape des prestations s'élargit jusqu'à la largeur du site pour
   accueillir les cartes sur plusieurs colonnes ; en dessous, elle reprend
   simplement la largeur disponible. */
.step-services {
  width: min(1136px, 100vw - 2.3rem);
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 560px) { .step-services { width: min(1136px, 100vw - 3rem); } }
@media (min-width: 1024px) { .step-services { width: min(1136px, 100vw - 4rem); } }

/* Prestations : une carte à cocher par service (icône, titre, filet,
   descriptif, quatre points, prix). Un clic n'importe où coche la carte. */
.choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .choices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .choices { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } }

.choice { display: block; position: relative; cursor: pointer; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-card {
  position: relative;   /* repère des bulles « i » du pied de carte */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
@media (min-width: 768px) { .choice-card { padding: 1.75rem; } }
.choice:hover .choice-card {
  transform: translateY(-4px);
  border-color: rgba(53,160,243,0.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

/* Icône (à gauche) et pastille de sélection (à droite) */
.choice-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.1rem;
}
.choice-icon { display: block; color: var(--blue-main); }
.choice-icon svg { width: 44px; height: 44px; }
@media (min-width: 768px) { .choice-icon svg { width: 48px; height: 48px; } }
.choice-mark {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  line-height: 1;
  color: transparent;
  transition: all var(--transition);
}
.choice-mark::after { content: '✓'; }

.choice-name {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.choice-line {
  display: block;
  width: 40px; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  margin-bottom: 1rem;
}
.choice-desc {
  display: block;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--grey);
  margin-bottom: 1.1rem;
}

/* Les quatre points de la prestation */
.choice-points { display: block; width: 100%; flex: 1; margin-bottom: 1.4rem; }
.choice-points span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.choice-points span::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad);
}

/* Pied de carte : le prix repris de SERVICES et, quand config.php donne des
   conditions pour la prestation, la bulle « i » qui les détaille au survol. */
.choice-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}
.choice em {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-size: 0.68rem;
  font-style: normal;
  color: var(--grey);
  white-space: nowrap;
  transition: color var(--transition);
}

/* La pastille « i ». Le z-index la place devant la case à cocher invisible
   qui recouvre toute la carte : sans lui, le survol ne l'atteindrait jamais.
   Sa zone cliquable dépasse largement sa taille visuelle (::before) pour
   rester facile à toucher du doigt sans agrandir la pastille elle-même. */
.choice-info {
  position: relative;
  z-index: 3;
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(53,160,243,0.45);
  background: rgba(53,160,243,0.1);
  color: var(--blue-main);
  display: grid;
  place-items: center;
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 0.56rem;
  line-height: 1;
  cursor: help;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.choice-info::before {
  content: '';
  position: absolute;
  inset: -13px;
}
.choice-info:hover,
.choice-info:focus-visible,
.choice-info.is-open {
  background: var(--blue-main);
  border-color: var(--blue-main);
  color: var(--white);
  outline: none;
}

/* Le détail des tarifs, ouvert au-dessus de la pastille */
.choice-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  right: -8px;
  z-index: 6;
  width: max-content;
  max-width: calc(100vw - 4.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.95rem 1.05rem;
  background: #0B0E16;
  border: 1px solid rgba(53,160,243,0.3);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  text-align: left;
  letter-spacing: normal;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
@media (min-width: 768px) { .choice-tip { max-width: 270px; } }
.choice-info:hover .choice-tip,
.choice-info:focus-visible .choice-tip,
.choice-info.is-open .choice-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.choice-tip::after {          /* la pointe, sous la bulle */
  content: '';
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: rgba(53,160,243,0.3);
}
.choice-tip strong {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.56rem;
  line-height: 1.6;
  color: var(--blue-light);
}
.choice-tip .tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.choice-tip .tip-row:last-of-type { padding-bottom: 0; border-bottom: none; }
.choice-tip .tip-row b {
  flex: none;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
}
.choice-tip .tip-note {
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--grey);
}

/* Prestation retenue */
.choice input:checked + .choice-card {
  border-color: var(--blue-main);
  background: linear-gradient(150deg, #1a1f2c 0%, #111c30 100%);
  box-shadow: 0 8px 40px rgba(53,160,243,0.1);
}
.choice input:checked + .choice-card .choice-mark {
  border-color: transparent;
  background: var(--grad);
  color: var(--white);
}
.choice input:checked + .choice-card .choice-icon { color: var(--blue-light); }
.choice input:checked + .choice-card em { color: var(--blue-light); }
.choice input:focus-visible + .choice-card { outline: 2px solid var(--blue-main); outline-offset: 2px; }

/* Total des prestations sélectionnées */
.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.total span:first-child { font-size: 0.7rem; color: var(--grey); }
.total span:last-child {
  font-size: 1.25rem;
  color: var(--white);
  white-space: nowrap;
}
@media (min-width: 768px) { .total span:last-child { font-size: 1.35rem; } }
.total + p {
  margin: 0.5rem 0 0;
  font-style: italic;
  font-size: 0.76rem;
  color: var(--grey);
  line-height: 1.6;
}

/* ──────────────────── VOTRE VÉHICULE : CARROSSERIE & SIÈGES ────────────────────
   N'apparaissent que si une prestation cochée en a besoin (voir booking.js,
   majBlocsVehicule) : pas de champ inutile pour qui ne fait que l'extérieur. */
.carrosserie-bloc, .sieges-bloc { display: none; margin-top: 1.4rem; }
.carrosserie-bloc.is-visible, .sieges-bloc.is-visible { display: block; }

.champ-titre {
  display: block;
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-size: 0.58rem;
  color: var(--grey);
  margin-bottom: 0.75rem;
}

.carrosserie-choix { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 560px) { .carrosserie-choix { grid-template-columns: repeat(3, 1fr); } }

.carro-case { display: block; position: relative; cursor: pointer; }
.carro-case input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.carro-case span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--surface-2);
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  text-align: center;
  transition: all var(--transition);
}
.carro-case input:checked + span {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
}
.carro-case input:focus-visible + span { outline: 2px solid var(--blue-main); outline-offset: 2px; }

/* Le compteur de sièges : gros boutons +/- pour un usage au doigt. */
.stepper {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
}
.stepper button {
  width: 48px; height: 48px;
  background: var(--surface-2);
  color: var(--white);
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--transition);
}
.stepper button:hover { background: rgba(53,160,243,0.15); }
.stepper input {
  width: 3.2rem;
  text-align: center;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  background: var(--surface);
  color: var(--white);
  font-size: 1rem;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ──────────────────── CALENDRIER (jour) ──────────────────── */
.calendar {
  max-width: 420px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 1rem 0.75rem;
}
@media (min-width: 768px) { .calendar { padding: 1.25rem; } }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
@media (min-width: 768px) { .cal-head { margin-bottom: 1.25rem; } }
.cal-head strong {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--white);
}
.cal-head button {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--grey);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
}
@media (min-width: 768px) { .cal-head button { width: 32px; height: 32px; } }
.cal-head button:hover:not(:disabled) { border-color: var(--blue-main); color: var(--blue-main); }
.cal-head button:disabled { opacity: 0.25; cursor: not-allowed; }

.cal-dows, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
@media (min-width: 768px) { .cal-dows, .cal-grid { gap: 5px; } }
.cal-dows {
  margin-bottom: 0.6rem;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
}
.cal-grid button {
  aspect-ratio: 1 / 1;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
  font-family: 'Idiqlat', 'EuroSecours', 'Cinzel', serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.cal-grid button:hover:not(:disabled) { border-color: var(--blue-main); color: var(--white); }
.cal-grid button:disabled {
  background: transparent;
  color: rgba(255,255,255,0.18);
  cursor: not-allowed;
}
/* Aujourd'hui : un simple liseré ; le jour retenu : le dégradé de la charte */
.cal-grid button.is-today { box-shadow: inset 0 0 0 1px rgba(53,160,243,0.4); }
.cal-grid button.is-selected {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
}
.cal-grid button:focus-visible,
.slot:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 2px; }

/* ──────────────────── CRÉNEAUX (heure) ──────────────────── */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 0.5rem;
  max-width: 520px;
}
@media (min-width: 768px) { .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.6rem; } }
.slot {
  min-height: 44px;
  padding: 0.65rem 0.4rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.8);
  font-family: 'Idiqlat', 'EuroSecours', 'Cinzel', serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.slot:hover { border-color: var(--blue-main); color: var(--white); }
.slot.is-selected {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
}

/* Rappel du rendez-vous retenu, sous les créneaux */
.recap {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--blue-light);
}
.submit { text-align: center; padding-top: 0.5rem; }

/* ──────────────────── PHOTOS DU VÉHICULE ──────────────────── */
.photos-zone { margin-top: 0.25rem; }
.photos-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius);
  color: var(--grey);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.photos-drop:hover { border-color: var(--blue-main); color: var(--white); background: rgba(53,160,243,0.05); }
.photos-drop svg { width: 34px; height: 34px; color: var(--blue-main); }
.photos-drop span:nth-child(2) {
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--white);
}
.photos-hint { font-size: 0.7rem; color: var(--grey); }
.photos-drop.is-complet { opacity: 0.45; pointer-events: none; }

.photos-apercu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1rem;
}
.photos-apercu:empty { margin-top: 0; }
.photos-apercu figure {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.photos-apercu img { width: 100%; height: 100%; object-fit: cover; }
.photos-apercu button {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: var(--white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* ──────────────────── L'ÉQUIPE (a-propos.php) ────────────────────
   Une fiche par personne : photo | texte, puis ses prestations. La
   seconde fiche inverse les colonnes sur ordinateur pour alterner. */
.personne { padding: 1rem 0 3.5rem; }
.personne + .personne { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 4.5rem; }
@media (min-width: 1024px) {
  .personne { padding-bottom: 5rem; }
  .personne + .personne { padding-top: 6rem; }
  .personne-inverse .grid > figure { order: 2; }
}
.personne .title { font-size: clamp(1.4rem, 5vw, 2.3rem); }

/* Cadre affiché tant que la photo de Romain n'est pas déposée. */
.photo-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  background: radial-gradient(circle at 30% 20%, rgba(53,160,243,0.25), transparent 60%), var(--surface);
  border: 1px solid rgba(53,160,243,0.2);
  font-family: 'Michroma', sans-serif;
  font-size: 5rem;
  color: rgba(171,217,243,0.5);
}

.prestations-titre {
  font-family: 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--blue-main);
  text-align: center;
  margin: 3.5rem 0 1.5rem;
}
.prestations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
@media (min-width: 560px)  { .prestations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .prestations { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .prestations-detail { grid-template-columns: repeat(4, 1fr); } }

.prestations li {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.35rem 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}
.prestations li:hover { border-color: rgba(53,160,243,0.4); transform: translateY(-2px); }
.prestations svg { width: 2.4rem; height: 2.4rem; color: var(--blue-main); }
.prestation-nom { font-size: 0.85rem; color: var(--white); }
.prestation-prix { font-size: 0.78rem; color: var(--blue-light); white-space: nowrap; }

/* Prestations de Romain : cartes verticales avec une description. */
.prestations-detail li {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.6rem;
  padding: 1.5rem 1.35rem;
}
.prestations-detail svg { width: 2.8rem; height: 2.8rem; }
.prestations-detail .prestation-nom {
  font-family: 'Michroma', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.prestation-desc { font-size: 0.82rem; color: var(--grey); line-height: 1.65; }
.prestations-detail .prestation-prix { margin-top: auto; font-style: italic; }

/* ──────────────────── SAVOIR-FAIRE (accueil) ──────────────────── */
.expertises { background: var(--dark); padding: 4.5rem 0; }
@media (min-width: 1024px) { .expertises { padding: 8rem 0; } }
.expertises-grille { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .expertises-grille { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.expertise {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 1.6rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
@media (min-width: 1024px) { .expertise { padding: 2.75rem 2.5rem; } }
.expertise:hover {
  border-color: rgba(53,160,243,0.45);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.expertise-qui, .expertise-titre, .expertise-lien {
  font-family: 'Michroma', sans-serif;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.expertise-qui { font-size: 0.65rem; color: var(--blue-main); }
.expertise-titre { font-size: clamp(1rem, 3.5vw, 1.35rem); line-height: 1.3; }
.expertise-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.expertise-liste span {
  font-size: 0.75rem;
  color: var(--grey);
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
}
.expertise-lien { margin-top: auto; font-size: 0.62rem; color: var(--blue-light); }
.expertise-lien::after { content: ' →'; transition: margin var(--transition); }
.expertise:hover .expertise-lien::after { margin-left: 0.4rem; }

/* ──────────────────── APPEL À RÉSERVER ──────────────────── */
.cta {
  padding: 4.5rem 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(53,160,243,0.18), transparent 65%),
    var(--black);
  border-top: 1px solid rgba(53,160,243,0.12);
}
@media (min-width: 1024px) { .cta { padding: 7rem 0; } }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Rappel « sur devis » sous l'assistant de réservation. */
.devis-romain { background: var(--black); padding: 0 0 4.5rem; text-align: center; }
.devis-romain .container {
  max-width: 760px;
  padding: 1.75rem var(--gutter);
  border: 1px solid rgba(53,160,243,0.2);
  border-radius: var(--radius);
}
.devis-romain p:last-child { color: var(--grey); font-size: 0.88rem; }
.devis-romain a { color: var(--blue-light); }
.devis-romain a:hover { color: var(--white); }

/* ──────────────────── FOOTER ──────────────────── */
.footer { background: var(--black); border-top: 1px solid rgba(255,255,255,0.04); }
.footer > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem var(--gutter);
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .footer > .container { flex-direction: row; justify-content: space-between; padding: 3rem 2rem; gap: 2rem; text-align: left; }
}
.footer .logo { width: 7.4rem; justify-content: center; }
@media (min-width: 768px) { .footer .logo { width: 8.2rem; justify-content: flex-start; } }
.footer .coords {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.6rem;
  color: var(--grey);
}
@media (min-width: 768px) { .footer .coords { flex-direction: row; gap: 2rem; flex-wrap: wrap; justify-content: center; } }
.footer .coords a { transition: color var(--transition); }
.footer .coords a:hover { color: var(--blue-main); }

.social { display: flex; gap: 1rem; }
.social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  transition: all var(--transition);
}
.social svg { width: 18px; height: 18px; }
.social a:hover { border-color: var(--blue-main); color: var(--blue-main); transform: translateY(-2px); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  padding: 0 var(--gutter) 1.75rem;
}
.footer-nav a {
  font-family: 'Michroma', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.58rem;
  color: var(--grey);
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--blue-main); }

.bottom {
  text-align: center;
  padding: 1.1rem var(--gutter);
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 768px) { .bottom { flex-direction: row; gap: 2rem; padding: 1.25rem 2rem; } }
.bottom p { font-size: 0.68rem; color: rgba(255,255,255,0.25); letter-spacing: 0.05em; }

/* ──────────────────── ANIMATIONS AU SCROLL ──────────────────── */
.fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade.in { opacity: 1; transform: none; }

/* Aucune animation d'apparition ni de survol pour qui la refuse. */
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ──────────────────── NOTE GOOGLE ────────────────────
   Bandeau fixe tout en haut, au-dessus de la barre de navigation (body.avec-avis
   décale celle-ci de sa hauteur via --avis-h). Rendu par includes/entete.php
   uniquement si la note est renseignée dans prise_rdv/config.php. */
.avec-avis { --avis-h: 2rem; }

.avis-google {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  height: var(--avis-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 var(--gutter);
  background: #07090f;
  border-bottom: 1px solid rgba(53,160,243,0.15);
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
}
.avis-google:hover { background: #0c1019; }
.avis-google:focus-visible { outline: 2px solid var(--blue-main); outline-offset: -2px; }
.avis-g { width: 14px; height: 14px; flex-shrink: 0; }
.avis-etoiles {
  --note: 100%;
  position: relative;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #FBBC05 var(--note), rgba(255,255,255,0.25) var(--note));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.avis-sur, .avis-nb { color: var(--grey); }
@media (max-width: 380px) { .avis-nb { display: none; } }


/* ──────────────────── MENU DÉROULANT « PRESTATIONS » ────────────────────
   Dans la barre de navigation (includes/entete.php). Sur ordinateur il
   s'ouvre au survol, au clavier (focus) ou au clic ; sur téléphone il se
   replie dans le menu plein écran et s'ouvre au toucher (js/main.js). */
.a-sous-menu { position: relative; }
.sous-menu-bouton {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Idiqlat', 'EuroSecours', 'Michroma', sans-serif;
  font-size: 0.72rem;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--grey);
  transition: color var(--transition);
}
.sous-menu-bouton::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}
.a-sous-menu.is-open .sous-menu-bouton::after { transform: translateY(1px) rotate(-135deg); }
.sous-menu-bouton:hover, .sous-menu-bouton[aria-current],
.a-sous-menu.is-open .sous-menu-bouton { color: var(--white); }
.sous-menu-bouton:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 4px; }

.sous-menu { display: none; flex-direction: column; }
.a-sous-menu.is-open .sous-menu { display: flex; }
.sous-menu-titre {
  font-family: 'Michroma', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-main);
  padding: 0.9rem 0 0.4rem;
}
.sous-menu-titre:first-child { padding-top: 0; }
.nav ul .sous-menu a { padding: 0.4rem 0; font-size: 0.66rem; letter-spacing: 0.1em; white-space: nowrap; }
.nav ul .sous-menu a::after { display: none; }

/* Téléphone : dans le menu plein écran, sous le bouton, centré. */
.nav.menu-open ul { overflow-y: auto; padding: 7rem 0 3rem; justify-content: safe center; }
.nav.menu-open .sous-menu { align-items: center; text-align: center; margin-top: 1.25rem; gap: 0.1rem; }
.nav.menu-open .sous-menu a { font-size: 0.72rem; }
.nav.menu-open .sous-menu-bouton { font-size: 0.95rem; }

/* Méga-menu : sur ordinateur, le panneau occupe toute la largeur de la page,
   juste sous la barre. Le panneau se cale sur la barre (le <li> n'est donc
   pas « relative »), et un pont invisible évite qu'il se ferme quand la
   souris descend du bouton vers lui. */
.sous-menu-cadre { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sous-menu-col { display: flex; flex-direction: column; align-items: center; }
.sous-menu-liens { display: flex; flex-direction: column; align-items: center; }

@media (min-width: 768px) {
  .a-sous-menu { position: static; }
  .a-sous-menu:hover .sous-menu,
  .a-sous-menu:focus-within .sous-menu,
  .a-sous-menu.is-open .sous-menu { display: block; }
  .sous-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 2.25rem var(--gutter) 2.75rem;
    background: rgba(10, 12, 20, 0.985);
    border: none;
    border-bottom: 1px solid rgba(53,160,243,0.3);
    border-radius: 0;
    box-shadow: 0 28px 50px rgba(0,0,0,0.5);
  }
  .sous-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -2.5rem; height: 2.5rem; }
  .sous-menu-cadre {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: start;
  }
  .sous-menu-col { align-items: stretch; }
  .sous-menu-liens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.15rem 1.5rem; align-items: stretch; }
  .sous-menu-col-large .sous-menu-liens { grid-template-columns: repeat(3, 1fr); }
  .sous-menu-titre {
    padding: 0 0 1rem; margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.6rem;
  }
  .nav ul .sous-menu a {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.8rem 0.9rem; border-radius: 10px;
    font-size: 0.7rem; letter-spacing: 0.1em; white-space: normal;
    transition: background var(--transition), color var(--transition);
  }
  .nav ul .sous-menu a:hover, .nav ul .sous-menu a[aria-current="page"] { background: rgba(53,160,243,0.1); color: var(--white); }
  .sous-menu a small {
    font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.04em;
    text-transform: none; color: var(--blue-light);
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .sous-menu-col-large .sous-menu-liens { grid-template-columns: repeat(2, 1fr); }
  .sous-menu-cadre { grid-template-columns: 1.6fr 1fr; gap: 2rem; }
}
.nav.menu-open .sous-menu a small { display: none; }


/* ──────────────────── PAGES PRESTATION ────────────────────
   Modèle includes/modele-prestation.php : fil d'Ariane, texte + fiche tarif,
   questions fréquentes, autres prestations, et la barre de réservation fixe
   en bas de page. */
.prestation { background: var(--dark); padding-bottom: 4rem; }
.fil-ariane {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.72rem; color: var(--grey);
  margin-bottom: 2rem;
}
.fil-ariane a { color: var(--blue-light); }
.fil-ariane a:hover { color: var(--white); }
.fil-ariane [aria-current] { color: var(--white); }

.presta-intro {
  max-width: 46rem; margin: 0 auto 3rem; text-align: center;
  color: rgba(255,255,255,0.78); font-size: 0.98rem; line-height: 1.85;
}
.presta-h2 {
  font-family: 'Michroma', sans-serif;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
  margin: 2.5rem 0 1rem;
}
.presta-h2.center { margin-top: 4rem; }

.presta-grille { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .presta-grille { grid-template-columns: 1.6fr 1fr; gap: 4rem; } }
.presta-texte p { color: rgba(255,255,255,0.78); line-height: 1.85; margin-bottom: 1.1rem; }
.presta-texte .presta-h2:first-of-type { margin-top: 2rem; }
.presta-points { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.presta-points li { position: relative; padding-left: 1.6rem; color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.presta-points li::before {
  content: ''; position: absolute; left: 0; top: 0.4em;
  width: 0.65rem; height: 0.35rem;
  border-left: 2px solid var(--blue-main); border-bottom: 2px solid var(--blue-main);
  transform: rotate(-45deg);
}

.presta-fiche {
  background: var(--surface);
  border: 1px solid rgba(53,160,243,0.2);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  text-align: center;
}
@media (min-width: 900px) { .presta-fiche { position: sticky; top: calc(7rem + var(--avis-h, 0px)); } }
.presta-fiche svg { width: 3.2rem; height: 3.2rem; color: var(--blue-main); margin-bottom: 1rem; }
.presta-prix { font-family: 'Idiqlat', 'Michroma', sans-serif; font-size: 1.5rem; color: var(--white); margin-bottom: 0.4rem; }
.presta-duree { color: var(--grey); font-size: 0.8rem; margin-bottom: 1.25rem; }
.presta-tarifs { text-align: left; margin-bottom: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
.presta-tarifs div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.8rem; }
.presta-tarifs dt { color: var(--grey); }
.presta-tarifs dd { color: var(--blue-light); white-space: nowrap; }
.presta-fiche .note { margin: 0 0 1.25rem; text-align: left; }
.presta-fiche .btn { display: inline-block; }

/* La page « pose » : une grande carte par prestation. */
.pose-liste { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .pose-liste { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.presta-bloc {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  scroll-margin-top: calc(7rem + var(--avis-h, 0px));
}
.presta-bloc svg { width: 3rem; height: 3rem; color: var(--blue-main); }
.presta-bloc .presta-h2 { margin-top: 0; }
.presta-bloc p { color: rgba(255,255,255,0.78); font-size: 0.9rem; line-height: 1.8; margin-bottom: 0.8rem; }
.presta-devis { margin-top: 2rem; color: var(--grey); font-size: 0.9rem; }
.presta-devis a { color: var(--blue-light); }
.presta-devis a:hover { color: var(--white); }

.faq { max-width: 46rem; margin: 0 auto; display: grid; gap: 0.6rem; }
.faq details { background: var(--surface); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: 0.2rem 1.25rem; }
.faq summary { cursor: pointer; padding: 0.9rem 0; color: var(--white); font-size: 0.92rem; }
.faq summary:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 2px; }
.faq details p { color: rgba(255,255,255,0.75); line-height: 1.8; font-size: 0.88rem; padding-bottom: 1rem; }

.autres-presta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.autres-presta a {
  display: inline-block; padding: 0.6rem 1.1rem;
  border: 1px solid rgba(53,160,243,0.3); border-radius: 999px;
  font-size: 0.78rem; color: var(--blue-light);
  transition: all var(--transition);
}
.autres-presta a:hover { background: rgba(53,160,243,0.12); color: var(--white); }

/* ── Barre de réservation fixe, en bas de chaque page prestation ── */
.barre-rdv {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 12, 20, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(53,160,243,0.25);
}
.barre-rdv-texte { display: none; flex-direction: column; gap: 0.15rem; text-align: right; }
.barre-rdv-texte strong { font-size: 0.85rem; font-weight: 600; color: var(--white); }
.barre-rdv-texte span { font-size: 0.74rem; color: var(--blue-light); }
.barre-rdv .btn { flex: 1; max-width: 26rem; text-align: center; font-size: 0.64rem; padding: 0.9rem 0.75rem; }
@media (min-width: 640px) {
  .barre-rdv-texte { display: flex; }
  .barre-rdv .btn { flex: none; max-width: none; font-size: 0.7rem; padding: 0.9rem 2rem; }
}
/* Le pied de page ne passe pas sous la barre. */
.avec-barre-rdv .footer { padding-bottom: 4.5rem; }

/* Les prestations de la page À propos mènent à leur page : tout le bloc est cliquable. */
.prestations li { position: relative; }
.prestation-lien::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.prestation-lien:focus-visible { outline: none; }
.prestation-lien:focus-visible::after { outline: 2px solid var(--blue-main); outline-offset: 2px; }

/* Le menu compte un lien de plus : sur tablette, il reste sur une ligne. */
.nav ul a, .sous-menu-bouton { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1099px) {
  .nav ul { gap: 1.1rem; margin-right: 0.5rem; }
  .nav ul > li > a, .sous-menu-bouton { font-size: 0.62rem; letter-spacing: 0.14em; }
}

/* Menu mobile ouvert : sans flou, le panneau plein écran se cale sur l'écran
   et non sur la barre (un backdrop-filter enferme les éléments « fixed »). */
.nav.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.menu-open .a-sous-menu { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.nav.menu-open .sous-menu { max-width: 18rem; }
.nav.menu-open .sous-menu a { white-space: normal; padding: 0.45rem 0; }


/* ──────────────────── AVANT / APRÈS D'UNE PAGE PRESTATION ──────────────────── */
.presta-ba { flex: none; display: block; max-width: 44rem; margin: 0 auto; }
.presta-ba img { height: 300px; }
@media (min-width: 768px) { .presta-ba img { height: 460px; } }
.presta-ba-vide {
  max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.5rem; text-align: center;
  border: 2px dashed rgba(53,160,243,0.35); border-radius: var(--radius);
  color: var(--grey); font-size: 0.85rem; line-height: 1.8;
}
.presta-ba-vide p:first-child { color: var(--blue-light); margin-bottom: 0.4rem; }
.presta-ba-vide code { color: var(--white); font-size: 0.78rem; }
.presta-contact { display: grid; gap: 0.35rem; margin: 0 0 1.25rem; font-size: 0.85rem; }
.presta-contact a { color: var(--blue-light); word-break: break-word; }
.presta-contact a:hover { color: var(--white); }

/* ──────────────────── FAQ EN CONVERSATION (façon messagerie Instagram) ────────────────────
   Les questions du visiteur sont à droite, en bulles dégradées ; les réponses
   de l'atelier à gauche, en bulles grises avec sa photo de profil. */
.dm {
  max-width: 40rem; margin: 0 auto;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px; overflow: hidden;
}
.dm-entete {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dm-entete strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.dm-entete span { font-size: 0.74rem; color: var(--grey); }
.dm-avatar {
  flex: none; display: block; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: var(--surface-2);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #c13584;
}
.dm-avatar-petit { width: 28px; height: 28px; box-shadow: none; align-self: flex-end; }
.dm-initiale {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #0b0e14; font-weight: 700; font-size: 1.1rem;
}
.dm-avatar-petit.dm-initiale { font-size: 0.8rem; }

.dm-fil { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1rem 1.5rem; }
.dm-msg { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 86%; }
.dm-msg p {
  margin: 0; padding: 0.65rem 1rem;
  font-size: 0.9rem; line-height: 1.5; letter-spacing: 0.01em;
  border-radius: 20px;
  overflow-wrap: anywhere;
}
.dm-msg-pro { align-self: flex-start; }
.dm-msg-pro p { background: #262626; color: #f3f3f3; border-bottom-left-radius: 6px; }
.dm-msg-client { align-self: flex-end; margin-top: 0.8rem; }
.dm-msg-client p {
  background: linear-gradient(135deg, #1f6fd6 0%, #5b4fe0 100%);
  color: #fff; border-bottom-right-radius: 6px;
}
.dm-msg-client:first-child { margin-top: 0; }

.dm-saisie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 1rem 1rem; padding: 0.7rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  color: var(--grey); font-size: 0.85rem;
  transition: border-color var(--transition), color var(--transition);
}
.dm-saisie svg { width: 20px; height: 20px; flex: none; }
.dm-saisie:hover { border-color: var(--blue-main); color: var(--white); }
.dm-saisie:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 2px; }

.dm-msg.fade { transform: translateY(10px); }
.dm-msg.fade.in { transform: none; }


/* ═══════════════════════════════════════════════════════════════════════
   STYLE « FÉROCE »
   Inspiré de ferocegraphics.com : un header à deux niveaux (fine bande
   d'avis et de liens, puis navigation en pastilles), des titres en italique
   capitales, des boutons en pastilles, des surfaces sombres et sobres.
   Le contenu, les fonctions et la charte HORIZON (bleu #35A0F3, logo,
   Michroma / Cinzel) ne changent pas.

   Ce bloc est placé en DERNIER : le supprimer ramène le style précédent.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --radius : 6px;
  --encre  : #04070d;
  --barre  : #111317;
  --bande  : #25282e;
}

/* ──────────────────── BOUTONS EN PASTILLES ──────────────────── */
.btn {
  background: var(--blue-main);
  color: var(--encre);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn::after { display: none; }
.btn:hover { background: var(--blue-light); transform: translateY(-1px); box-shadow: none; }
.ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ghost:hover { background: var(--white); color: var(--barre); box-shadow: none; transform: none; }

/* ──────────────────── TITRES ET ÉTIQUETTES ──────────────────── */
.title, .presta-h2, .step h3 { font-style: italic; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--blue-main);
  color: var(--encre);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.hero .eyebrow { color: var(--encre); }
.divider { width: 3.5rem; height: 3px; background: var(--blue-main); border-radius: 2px; }

/* ──────────────────── BANDE DU HAUT : AVIS + LIENS ──────────────────── */
.avec-avis { --avis-h: 2.4rem; }
.bandeau-haut {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  height: var(--avis-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  background: var(--bande);
  color: var(--white);
}
.avis-google {
  position: static;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;
  justify-content: flex-start;
  color: var(--white);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.avis-google:hover { background: none; color: var(--blue-light); }
.avis-google strong { color: var(--white); font-weight: 700; }
.avis-g { background: none; padding: 0; }
.avis-etoiles { background: linear-gradient(90deg, var(--blue-main) var(--note), rgba(255,255,255,0.25) var(--note)); -webkit-background-clip: text; background-clip: text; }
.avis-sur, .avis-nb { color: rgba(255,255,255,0.7); }
.bandeau-liens { display: none; gap: 2rem; }
.bandeau-liens a { font-size: 0.78rem; color: var(--white); letter-spacing: 0.03em; transition: color 0.2s ease; }
.bandeau-liens a:hover { color: var(--blue-light); }
@media (min-width: 768px) { .bandeau-liens { display: flex; } }

/* ──────────────────── NAVIGATION EN PASTILLES ──────────────────── */
.nav,
.nav.scrolled,
.page-interne .nav {
  background: var(--barre);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding: 0.7rem var(--gutter);
}
@media (min-width: 768px) {
  .nav, .nav.scrolled, .page-interne .nav { padding: 0.7rem 2.5rem; }
}
.nav ul a, .sous-menu-bouton {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav ul a::after { display: none; }
.nav ul > li > a:hover, .sous-menu-bouton:hover, .a-sous-menu.is-open .sous-menu-bouton {
  background: var(--white);
  color: var(--barre);
}
.nav ul > li > a[aria-current="page"], .sous-menu-bouton[aria-current] {
  background: var(--blue-main);
  border-color: var(--blue-main);
  color: var(--encre);
}
@media (min-width: 768px) { .nav ul { gap: 0.6rem; margin-right: 1rem; } }
@media (min-width: 768px) and (max-width: 1099px) {
  .nav ul { gap: 0.35rem; }
  .nav ul > li > a, .sous-menu-bouton { padding: 0.5rem 0.7rem; font-size: 0.6rem; }
}

.nav-tel svg { border: 1px solid rgba(255,255,255,0.85); background: transparent; }
.nav-tel:hover svg { background: var(--white); color: var(--barre); border-color: var(--white); }
.nav-rdv { animation: none; box-shadow: none; }
.burger { border: 1px solid rgba(255,255,255,0.85); border-radius: 999px; padding: 0.8rem 0.75rem; margin: 0; }

/* Menu plein écran du téléphone : des pastilles empilées. */
.nav.menu-open ul { background: #0c0e12; gap: 0.7rem; }
.nav.menu-open ul > li > a, .nav.menu-open .sous-menu-bouton { min-width: 15rem; justify-content: center; font-size: 0.85rem; }

/* Méga-menu : un panneau sombre sur toute la largeur, des pastilles dedans. */
@media (min-width: 768px) {
  .sous-menu {
    background: var(--barre);
    border-bottom: 0;
    box-shadow: 0 24px 40px rgba(0,0,0,0.45);
    padding: 2rem var(--gutter) 2.5rem;
  }
  .sous-menu-titre {
    align-self: flex-start;
    color: var(--white);
    font-style: italic;
    font-size: 0.78rem;
    padding: 0 0 0.6rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--blue-main);
  }
  .sous-menu-liens { gap: 0.6rem 0.8rem; }
  .nav ul .sous-menu a {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-size: 0.66rem;
  }
  .nav ul .sous-menu a:hover, .nav ul .sous-menu a[aria-current="page"] {
    background: var(--white); color: var(--barre); border-color: var(--white);
    transform: none; box-shadow: none;
  }
  .nav ul .sous-menu a small { text-align: right; white-space: nowrap; }
  .nav ul .sous-menu a:hover small, .nav ul .sous-menu a[aria-current="page"] small { color: #4a5568; }
}

/* ──────────────────── BARRE DE RÉSERVATION ET DIVERS ──────────────────── */
.barre-rdv {
  background: var(--barre);
  backdrop-filter: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer { border-top: 0; background: var(--barre); }


/* ═══════════════════════════════════════════════════════════════════════
   RENDEZ-VOUS — pensé d'abord pour le téléphone
   Étape « Votre prestation » : deux thèmes en onglets, chaque thème en
   lignes de cartes (organisation dans $THEMES_RDV, prise_rdv/config.php).
     < 560 px  : une liste de lignes compactes (icône, nom, prix, case)
     ≥ 560 px  : des cartes en colonnes, sans le détail
     ≥ 1024 px : des cartes complètes (descriptif et points)
   ═══════════════════════════════════════════════════════════════════════ */
.themes-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.theme-onglet {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  font: inherit; text-align: left; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-onglet:hover { border-color: var(--blue-main); }
.theme-onglet:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 2px; }
.theme-num {
  font-family: 'Michroma', sans-serif; font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-main);
}
.theme-nom { font-size: 0.82rem; line-height: 1.25; padding-right: 1.4rem; }
.theme-onglet.is-actif { background: var(--blue-main); border-color: var(--blue-main); }
.theme-onglet.is-actif .theme-num, .theme-onglet.is-actif .theme-nom { color: var(--encre); font-weight: 600; }
.theme-compte {
  position: absolute; top: 0.45rem; right: 0.5rem;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  display: grid; place-items: center;
  background: var(--white); color: var(--encre);
  font-size: 0.7rem; font-weight: 700; line-height: 1;
}
.theme-compte[hidden] { display: none; }
.theme-panneau[hidden] { display: none; }
@media (min-width: 768px) { .theme-onglet { flex-direction: row; align-items: baseline; gap: 0.8rem; padding: 0.9rem 1.2rem; } }

.choices-ligne { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }

/* Téléphone : une ligne par prestation. */
@media (max-width: 559.98px) {
  .choice-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icone nom case" "icone prix case";
    align-items: center;
    column-gap: 0.85rem; row-gap: 0.1rem;
    height: auto;
    padding: 0.8rem 0.95rem;
  }
  .choice-top { display: contents; }
  .choice-icon { grid-area: icone; }
  .choice-icon svg { width: 34px; height: 34px; }
  .choice-mark { grid-area: case; }
  .choice-name { grid-area: nom; margin: 0; font-size: 0.7rem; line-height: 1.45; }
  .choice-foot { grid-area: prix; }
  .choice-line, .choice-desc, .choice-points { display: none; }
  .choice:hover .choice-card { transform: none; }
}

/* Tablette : des cartes en colonnes, sans le détail. */
@media (min-width: 560px) {
  .choices-ligne { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
  .choice-desc, .choice-points { display: none; }
  .choice-card { padding: 1.1rem 1.1rem 1.2rem; }
}

/* Ordinateur : les cartes complètes. */
@media (min-width: 1024px) {
  .choices-ligne { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
  .choice-desc { display: block; }
  .choice-points { display: block; }
  .choice-card { padding: 1.5rem; }
}

/* Barre fixe du bas, téléphone seulement. */
.rdv-barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.4rem var(--gutter) calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: var(--barre);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.rdv-barre-mobile[hidden] { display: none; }
.rdv-barre-mobile p { margin: 0; font-size: 0.7rem; line-height: 1.25; color: var(--white); }
.rdv-barre-mobile .btn { flex: none; padding: 0.5rem 0.9rem; font-size: 0.58rem; line-height: 1.2; letter-spacing: 0.1em; min-height: 36px; }
@media (min-width: 768px) { .rdv-barre-mobile { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   BORDS MOINS ARRONDIS
   Tout est ramené à 4 px : fini les pastilles et les cartes bombées. Seules
   les photos de profil de la FAQ restent rondes.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --radius: 3px; }
*, *::before, *::after { border-radius: 4px !important; }
.dm-avatar { border-radius: 50% !important; }

/* Accueil : « Detailing Premium — Troyes & environs » en simple texte, sans surbrillance bleue. */
.hero .eyebrow { background: none; padding: 0; color: var(--blue-light); }

/* « Réservation gratuite et sans engagement » (accueil, galerie) et les lignes « Nettoyage · Polissage · Rénovation » / « Covering · Protection · Vitrage » (À propos) : texte simple, sans surbrillance bleue. */
.cta .eyebrow, .personne .eyebrow { background: none; padding: 0; color: var(--blue-main); }


/* ──────────────────── TARIFS DÉTAILLÉS (pages vitres teintées et PPF) ──────────────────── */
.tarif-groupe { margin-bottom: 1.5rem; }
.tarif-titre {
  font-family: 'Michroma', sans-serif; font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-light); margin: 0 0 0.6rem;
}
.tarif-tableau { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tarif-tableau th, .tarif-tableau td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left; font-weight: 400;
}
.tarif-tableau thead th {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey); background: var(--surface);
}
.tarif-tableau tbody th { color: rgba(255,255,255,0.88); }
.tarif-tableau td { color: var(--blue-light); white-space: nowrap; text-align: right; }
.tarif-tableau thead th:not(:first-child) { text-align: right; }
.tarif-tableau tbody tr:hover { background: rgba(53,160,243,0.07); }


/* ──────────────────── BANDE « AVIS CLIENTS » (fiche Google) ──────────────────── */
.avis-bande { background: var(--dark); padding: 4rem 0; }
.avis-bande[hidden] { display: none; }
.avis-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 2rem; }
.avis-entete .title { margin: 0; }
.avis-resume { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--white); }
.avis-resume:hover .avis-note { color: var(--blue-light); }
.avis-note { font-family: 'Michroma', sans-serif; font-size: 2.2rem; line-height: 1; color: var(--white); transition: color 0.2s ease; }
.avis-resume-detail { display: flex; flex-direction: column; gap: 0.2rem; }
.avis-etoiles { color: var(--blue-main); letter-spacing: 0.12em; font-size: 0.95rem; line-height: 1; margin: 0; }
.avis-total { font-size: 0.78rem; color: var(--grey); }

.avis-piste {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: rgba(53,160,243,0.5) transparent;
}
.avis-piste:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 4px; }
.avis-carte {
  flex: 0 0 min(320px, 84vw); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
}
.avis-carte-tete { display: flex; align-items: center; gap: 0.75rem; }
.avis-photo { flex: none; width: 36px; height: 36px; object-fit: cover; background: var(--surface-2); border-radius: 50% !important; }
.avis-initiale { display: grid; place-items: center; background: var(--grad); color: var(--encre); font-weight: 700; }
.avis-qui { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.avis-qui strong { font-size: 0.85rem; color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avis-qui span { font-size: 0.72rem; color: var(--grey); }
.avis-texte {
  margin: 0; font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.82);
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.avis-voir { margin-top: auto; font-size: 0.74rem; color: var(--blue-light); }
.avis-voir:hover { color: var(--white); text-decoration: underline; }
.avis-source { margin: 1rem 0 0; font-size: 0.72rem; color: var(--grey); }


/* ──────────────────── NOS SAVOIR-FAIRE : cartes photo (façon Féroce) ──────────────────── */
.domaines {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) { .domaines { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; } }

.domaine-carte {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 3 / 4; background: var(--surface);
  color: var(--white);
}
@media (min-width: 768px) { .domaine-carte { aspect-ratio: 4 / 5; } }

.domaine-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.domaine-carte:hover .domaine-img, .domaine-carte:focus-visible .domaine-img { transform: scale(1.06); }

.domaine-voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(4,7,13,0.82) 0%, rgba(4,7,13,0.25) 55%, rgba(4,7,13,0.4) 100%);
  transition: background 0.3s ease;
}
.domaine-carte:hover .domaine-voile, .domaine-carte:focus-visible .domaine-voile { background: rgba(4,7,13,0.66); }

/* Le titre à la verticale, en bas à gauche. */
.domaine-titre-vertical {
  position: absolute; left: 1rem; bottom: 1.1rem;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Michroma', sans-serif; font-style: italic;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) { .domaine-titre-vertical { left: 1.3rem; bottom: 1.4rem; font-size: 0.9rem; } }

/* Au survol : le titre en grand et « Découvrir ». */
.domaine-survol {
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.domaine-titre {
  font-family: 'Michroma', sans-serif; font-style: italic;
  font-size: clamp(0.95rem, 2.1vw, 1.5rem); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.domaine-cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.domaine-cta svg { flex: none; }

.domaine-carte:hover .domaine-survol, .domaine-carte:focus-visible .domaine-survol { opacity: 1; transform: none; }
.domaine-carte:hover .domaine-titre-vertical, .domaine-carte:focus-visible .domaine-titre-vertical { opacity: 0; }
.domaine-carte:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 3px; }

/* Écran tactile : pas de survol, le titre et « Découvrir » restent affichés. */
@media (hover: none) {
  .domaine-survol { opacity: 1; transform: none; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; gap: 0.6rem; }
  .domaine-titre-vertical { display: none; }
  .domaine-titre { font-size: 0.8rem; }
}


/* ──────────────────── SAVOIR-FAIRE EN « CLASSEUR » (ordinateur et tablette avec souris) ────────────────────
   Tous les domaines sur une seule ligne, repliés en bandes étroites ; la bande survolée
   (ou active au clavier) se déplie : la photo s'agrandit, le titre aussi.
   Téléphone et écrans tactiles : on garde la grille de cartes ci-dessus. */
@media (min-width: 768px) and (hover: hover) {
  .domaines {
    display: flex; gap: 0.5rem;
    height: clamp(420px, 64vh, 600px);
  }
  .domaine-carte {
    flex: 1 1 0; min-width: 0;
    aspect-ratio: auto;
    transition: flex-grow 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, transform 0.6s ease;
  }
  .domaine-carte:hover, .domaine-carte:focus-visible { flex-grow: 7; }

  /* La photo : plus grande une fois la bande dépliée. */
  .domaine-carte:hover .domaine-img, .domaine-carte:focus-visible .domaine-img { transform: scale(1.12); }

  /* Replié : le titre à la verticale, en bas de la bande. */
  .domaine-titre-vertical { left: 50%; bottom: 1.4rem; margin-left: -0.55rem; font-size: 0.8rem; white-space: nowrap; }

  /* Déplié : le titre en grand, sur une ligne, et « Découvrir ». */
  .domaine-survol { left: 1.6rem; right: 1.6rem; bottom: 1.6rem; gap: 1rem; }
  .domaine-titre { font-size: clamp(1.05rem, 2.1vw, 1.7rem); white-space: nowrap; }
  .domaine-cta { white-space: nowrap; font-size: 0.8rem; }
  .domaine-carte:hover .domaine-survol, .domaine-carte:focus-visible .domaine-survol { transition-delay: 0.2s; }
}

/* ──────────────────── SAVOIR-FAIRE : des titres à la taille de leur bande ────────────────────
   Chaque carte devient un « conteneur » : le titre déplié se règle sur la largeur de SA bande
   (unités cqw), il tient donc à toute largeur d'écran, sur une ou deux lignes, sans déborder. */
.domaine-carte { container-type: inline-size; }
.domaine-titre-vertical { font-size: 0.66rem; letter-spacing: 0.14em; }
@media (min-width: 1200px) { .domaine-titre-vertical { font-size: 0.72rem; } }
.domaine-titre {
  font-size: clamp(0.75rem, 4.6cqw, 1.45rem);
  line-height: 1.25; letter-spacing: 0.06em;
  white-space: normal; text-wrap: balance; overflow-wrap: anywhere;
}
.domaine-cta { font-size: 0.68rem; letter-spacing: 0.14em; }


.nav.menu-open .sous-menu { gap: 0.35rem; }

/* ──────────────────── VIDÉO D'UNE PRESTATION (remplace l'avant / après) ──────────────────── */
.presta-video { margin: 0 auto; max-width: 44rem; background: #000; }
.presta-video video { display: block; width: 100%; max-height: 80vh; background: #000; }

/* ──────────────────── NOS PROFESSIONNELS : une fiche par professionnel (selon le croquis) ────────────────────
   Gauche : la photo, son petit carré d'information en bas à droite, puis les diplômes en petites cases.
   Un trait vertical. Droite : le titre puis le texte. Celle de Romain est le miroir.
     < 900 px : tout s'empile (photo, texte, diplômes) ;  ≥ 900 px : deux colonnes. */
.pro-page { padding-bottom: 3rem; }

.pro-ligne { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding: 2.75rem 0; align-items: start; }
.pro-ligne + .pro-ligne { border-top: 1px solid rgba(255,255,255,0.1); }

/* Colonne photo : sur téléphone, ses deux éléments se rangent dans l'ordre photo, texte, diplômes. */
.pro-colphoto { display: contents; }
.pro-l-photo { order: 1; }
.pro-l-texte { order: 2; }
.pro-l-diplomes { order: 3; }

.pro-l-photo { position: relative; margin: 0; width: 100%; max-width: 17rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.pro-l-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pro-l-photo .photo-attente { aspect-ratio: auto; height: 100%; font-size: 4rem; border: 0; }

/* Le petit carré d'information, en bas à droite de la photo. */
.pro-l-info {
  position: absolute; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem; max-width: 55%;
  background: var(--blue-main); color: var(--encre);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35;
}
.pro-l-info b { font-family: 'Michroma', sans-serif; font-weight: 400; font-size: 1.25rem; letter-spacing: 0; line-height: 1.1; }

/* Les diplômes : de petites cases sous la photo. */
.pro-l-diplomes { min-width: 0; width: 100%; }
.pro-l-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.pro-l-cases .certificat { gap: 0.4rem; }
.pro-l-cases .certificat-nom { font-size: 0.64rem; line-height: 1.4; }
.pro-l-vide { margin: 0; padding: 1rem; border: 1px dashed rgba(255,255,255,0.18); font-size: 0.78rem; color: var(--grey); text-align: center; }

/* Colonne texte : le titre, puis les paragraphes. */
.pro-l-texte { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.pro-l-texte .eyebrow { background: none; padding: 0; margin: 0; color: var(--blue-main); font-size: 0.6rem; }
.pro-l-nom {
  margin: 0 0 0.9rem; padding-bottom: 0.9rem; position: relative;
  font-family: 'Michroma', sans-serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 4.4vw, 2.5rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white);
}
.pro-l-nom::after { content: ''; position: absolute; left: 0; bottom: 0; width: 4rem; height: 3px; background: var(--blue-main); }
.pro-l-texte > p:not(.eyebrow) { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.9; color: rgba(255,255,255,0.8); max-width: 44rem; }
.pro-l-texte .zone-desserte { font-size: 0.8rem; }

/* Les autres chiffres du bilan, en ligne sous le texte. */
.pro-l-bilan { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 2.2rem; }
.pro-l-bilan li { display: flex; flex-direction: column; gap: 0.15rem; }
.pro-l-bilan strong { font-family: 'Michroma', sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1.1; color: var(--blue-light); }
.pro-l-bilan span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.pro-l-texte .btn { margin-top: 0.6rem; }

@media (min-width: 900px) {
  .pro-ligne { grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); gap: 0; }

  /* La colonne photo : photo puis diplômes, empilés. */
  .pro-colphoto { display: flex; flex-direction: column; gap: 1rem; padding-right: 3rem; }
  .pro-l-photo, .pro-l-diplomes { order: 0; max-width: none; }

  /* Le trait vertical entre les deux colonnes. */
  .pro-l-texte { order: 0; padding-left: 3rem; border-left: 1px solid rgba(255,255,255,0.18); align-self: stretch; }

  /* Romain : le miroir — texte à gauche, colonne photo à droite, trait de l'autre côté. */
  .pro-ligne-inverse { grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); }
  .pro-ligne-inverse .pro-colphoto { order: 2; padding-right: 0; padding-left: 3rem; }
  .pro-ligne-inverse .pro-l-texte { order: 1; padding-left: 0; padding-right: 3rem; border-left: 0; border-right: 1px solid rgba(255,255,255,0.18); }
}

/* Le bilan (100 % satisfaction client, Pro…) : sous la photo, au-dessus des diplômes. */
.pro-colphoto .pro-l-bilan {
  order: 2; width: 100%; max-width: 17rem; margin: 0; padding: 0.9rem 0;
  border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; gap: 0.9rem 2rem;
}
.pro-colphoto ~ .pro-l-texte, .pro-l-texte { order: 3; }
.pro-l-diplomes { order: 4; }
@media (min-width: 900px) {
  .pro-colphoto .pro-l-bilan { order: 0; max-width: none; }
  .pro-l-texte, .pro-l-diplomes { order: 0; }
  .pro-ligne-inverse .pro-l-texte { order: 1; }
}

/* ──────────────────── MENU « PRESTATIONS » SUR TÉLÉPHONE : une liste lisible ────────────────────
   Dans le menu plein écran : un panneau à pleine largeur, des lignes de même gabarit (nom à gauche,
   prix à droite), des titres de groupe bien marqués, de vraies zones de toucher (≈ 46 px). */
.nav.menu-open .a-sous-menu { width: 100%; max-width: 22rem; }
.nav.menu-open .sous-menu {
  width: 100%; max-width: 22rem; margin-top: 0.6rem; padding: 0.9rem 1rem 0.4rem;
  align-items: stretch; text-align: left; gap: 0;
  background: #0f1218; border: 1px solid rgba(255,255,255,0.14);
}
.nav.menu-open .sous-menu-cadre { align-items: stretch; gap: 0.6rem; }
.nav.menu-open .sous-menu-col, .nav.menu-open .sous-menu-liens { align-items: stretch; width: 100%; }

.nav.menu-open .sous-menu-titre {
  align-self: flex-start; margin: 0.3rem 0 0.35rem; padding: 0 0 0.5rem;
  font-size: 0.62rem; font-style: italic; line-height: 1.5; letter-spacing: 0.12em; text-align: left;
  color: var(--white); border-bottom: 2px solid var(--blue-main);
}
.nav.menu-open .sous-menu a {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.8rem;
  width: 100%; min-height: 2.9rem; margin: 0; padding: 0.55rem 0.2rem;
  border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 0; background: none;
  font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.4; text-align: left; white-space: normal; color: var(--white);
}
.nav.menu-open .sous-menu a:last-child { border-bottom: 0; }
.nav.menu-open .sous-menu a:active, .nav.menu-open .sous-menu a[aria-current="page"] { background: rgba(53,160,243,0.14); }
.nav.menu-open .sous-menu a small {
  display: inline; flex: none; text-align: right; white-space: nowrap;
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.02em; text-transform: none; color: var(--blue-light);
}

/* Menu ouvert : l'en-tête (logo, RDV, croix) a son propre fond, le texte ne passe plus derrière. */
.nav.menu-open::after { content: ''; position: absolute; inset: 0; z-index: 1000; background: #0c0e12; border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav.menu-open .nav-actions { position: relative; z-index: 1002; }

/* ──────────────────── PAGE PRESTATION : la photo du savoir-faire en fond, avec le prix et le bouton ──────────────────── */
.presta-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(24rem, 60vh, 34rem);
  padding-bottom: 2.25rem; background: var(--surface); color: var(--white);
}
.presta-hero-sans { background: var(--dark); }
.presta-hero-img, .presta-hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.presta-hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(4,7,13,0.92) 0%, rgba(4,7,13,0.62) 45%, rgba(4,7,13,0.72) 100%);
}
.presta-hero-contenu { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.presta-hero .fil-ariane { margin-bottom: 0.6rem; }
.presta-hero .eyebrow { background: none; padding: 0; margin: 0; color: var(--blue-light); }
.presta-hero .title { margin: 0; font-size: clamp(1.6rem, 5vw, 3rem); text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.presta-hero .presta-intro { margin: 0; max-width: 42rem; text-align: left; color: rgba(255,255,255,0.88); font-size: 0.95rem; line-height: 1.8; }

/* Le prix et le bouton, dans l'espace photo. */
.presta-offre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  margin-top: 0.8rem; padding: 1rem 1.25rem;
  background: rgba(10,12,20,0.78); border-left: 3px solid var(--blue-main);
}
.presta-offre-prix { display: flex; flex-direction: column; gap: 0.25rem; }
.presta-offre .presta-prix { margin: 0; font-family: 'Idiqlat', 'Michroma', sans-serif; font-size: clamp(1.3rem, 3.2vw, 1.9rem); line-height: 1.15; color: var(--white); }
.presta-offre .presta-duree { margin: 0; font-size: 0.78rem; color: var(--blue-light); }
@media (max-width: 599.98px) {
  .presta-offre { width: 100%; flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .presta-offre .btn { text-align: center; }
}

/* Sous l'en-tête : la description (et son bloc de détails s'il y en a un). */
.prestation { padding-top: 3rem; }
.presta-grille-seule { grid-template-columns: 1fr !important; max-width: 52rem; }
.barre-rdv { transition: transform 0.3s ease; }
.barre-rdv.is-cachee { transform: translateY(110%); }

/* ──────────────────── RENDEZ-VOUS : étape 1, les deux thèmes en grand ──────────────────── */
.step-themes { width: min(1136px, 100vw - 2.3rem); margin-left: 50%; transform: translateX(-50%); }
@media (min-width: 560px) { .step-themes { width: min(1136px, 100vw - 3rem); } }
@media (min-width: 1024px) { .step-themes { width: min(1136px, 100vw - 4rem); } }

.themes-grands { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 700px) { .themes-grands { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.theme-grand {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; width: 100%; min-height: 15rem; padding: 0;
  background: var(--surface); border: 0; color: var(--white); font: inherit; text-align: left; cursor: pointer;
}
@media (min-width: 700px) { .theme-grand { min-height: 24rem; } }
.theme-grand-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.theme-grand:hover .theme-grand-img, .theme-grand:focus-visible .theme-grand-img { transform: scale(1.06); }
.theme-grand-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,7,13,0.92) 0%, rgba(4,7,13,0.35) 60%, rgba(4,7,13,0.5) 100%); }
.theme-grand-contenu { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; padding: 1.4rem; }
.theme-grand-num { font-family: 'Michroma', sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-light); }
.theme-grand-titre { font-family: 'Michroma', sans-serif; font-style: italic; font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.theme-grand-liste { font-size: 0.78rem; line-height: 1.7; color: rgba(255,255,255,0.82); }
.theme-grand-cta { margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); }
.theme-grand:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 3px; }

/* ──────────────────── RENDEZ-VOUS : « Je préfère être contacté par… » ──────────────────── */
.contact-pref { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.contact-pref legend { padding: 0; margin-bottom: 0.7rem; font-family: 'Michroma', sans-serif; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.contact-choix {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0.85rem 1rem;
  background: var(--surface-2); border: 1px solid rgba(255,255,255,0.16); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-choix input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--blue-main); }
.contact-pref .contact-choix > span { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.02em; text-transform: none; color: var(--white); }
.contact-choix:hover { border-color: var(--blue-main); }
.contact-choix:has(input:checked) { border-color: var(--blue-main); background: rgba(53,160,243,0.14); }
.contact-choix:has(input:focus-visible) { outline: 2px solid var(--blue-main); outline-offset: 2px; }

/* ──────────────────── GALERIE : prestation au survol, filtre par prestation, vidéos ──────────────────── */
.photo-prestation {
  display: block; margin-bottom: 0.2rem;
  font-family: 'Michroma', sans-serif; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-light);
}
.photo-sans-vignette { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); }
.photo-lecture {
  position: absolute; top: 50%; left: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem;
  background: rgba(4,7,13,0.72); border: 2px solid var(--white); pointer-events: none;
}
.photo-lecture::after { content: ''; position: absolute; top: 50%; left: 50%; margin: -0.55rem 0 0 -0.3rem; border-left: 0.95rem solid var(--white); border-top: 0.55rem solid transparent; border-bottom: 0.55rem solid transparent; }

.filtre-prestations { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.prestation-tout, .prestation-case span {
  display: inline-block; padding: 0.55rem 1rem; cursor: pointer;
  background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.35);
  font: inherit; font-size: 0.74rem; letter-spacing: 0.06em; line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.prestation-case { position: relative; display: block; }
.prestation-case input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.prestation-tout:hover, .prestation-case:hover span { border-color: var(--blue-main); }
.prestation-tout.is-actif, .prestation-case input:checked + span { background: var(--blue-main); border-color: var(--blue-main); color: var(--encre); }
.prestation-case input:focus-visible + span, .prestation-tout:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.lecteur { width: min(92vw, 1100px); padding: 0; border: 0; background: #000; color: #fff; }
.lecteur::backdrop { background: rgba(0,0,0,0.85); }
.lecteur video { display: block; width: 100%; max-height: 84vh; background: #000; }
.lecteur-fermer { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2; width: 2.4rem; height: 2.4rem; background: rgba(4,7,13,0.8); color: #fff; border: 1px solid rgba(255,255,255,0.5); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* ──────────────────── ACCUEIL : savoir-faire sans voile plus sombre au survol ──────────────────── */
.domaine-carte:hover .domaine-voile, .domaine-carte:focus-visible .domaine-voile {
  background: linear-gradient(to top, rgba(4,7,13,0.82) 0%, rgba(4,7,13,0.25) 55%, rgba(4,7,13,0.4) 100%);
}

/* ──────────────────── ACCUEIL : NOS PROFESSIONNELS ──────────────────── */
.pros-accueil, .ba-accueil { background: var(--dark); padding: 4.5rem 0; }
.pros-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; max-width: 60rem; margin: 2.5rem auto 0; }
@media (min-width: 768px) { .pros-cartes { gap: 1.5rem; margin-top: 3rem; } }
.pro-carte { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; background: var(--surface); color: var(--white); }
.pro-carte-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.pro-carte:hover .pro-carte-img, .pro-carte:focus-visible .pro-carte-img { transform: scale(1.05); }
.pro-carte .photo-attente { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; height: 100%; border: 0; font-size: 4.5rem; }
.pro-carte-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,7,13,0.88) 0%, rgba(4,7,13,0) 58%); }
.pro-carte-texte { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.pro-carte-nom { font-family: 'Michroma', sans-serif; font-style: italic; font-size: clamp(1.1rem, 3.6vw, 1.9rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.pro-carte-role { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); }
.pro-carte .domaine-cta { margin-top: 0.4rem; }
.pro-carte:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 3px; }

/* ──────────────────── ACCUEIL : LA GALERIE QUI DÉFILE, LENTEMENT ──────────────────── */
.defile-galerie { background: #0e1116; padding: 4.5rem 0 3.5rem; }
.defile-bande {
  overflow: hidden; margin-top: 2.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.defile-piste { display: flex; width: max-content; animation: defile-lent var(--duree, 90s) linear infinite; }
.defile-bande:hover .defile-piste { animation-play-state: paused; }
.defile-photo { flex: none; display: block; margin-right: 1rem; height: clamp(11rem, 26vw, 17rem); aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.defile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.defile-photo:hover img { transform: scale(1.05); }
.defile-lien { margin-top: 2rem; }
@keyframes defile-lent { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .defile-piste { animation: none; }
  .defile-bande { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ──────────────────── ACCUEIL : 5 AVANT / APRÈS, EN GRILLE ORGANISÉE ──────────────────── */
.ba-grille { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.ba-grille .ba { flex: none; max-width: none; width: 100%; scroll-snap-align: none; }
.ba-grille .ba img { height: clamp(14rem, 62vw, 19rem); }
.ba-grille figcaption a { color: inherit; }
.ba-grille figcaption a:hover { color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) {
  .ba-grille { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
  .ba-grille .ba { grid-column: span 3; }
  .ba-grille .ba img { height: clamp(14rem, 24vw, 20rem); }
  .ba-n1 .ba { grid-column: 2 / span 4; }
  .ba-n3 .ba { grid-column: span 2; }
  .ba-n5 .ba:nth-child(-n+3) { grid-column: span 2; }
  .ba-n5 .ba:nth-child(n+4) { grid-column: span 3; }
}

/* ──────────────────── PAGE PRESTATION : une ou plusieurs paires avant / après ──────────────────── */
.presta-ba-grille { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 44rem; margin: 0 auto; }
.presta-ba-grille .presta-ba { max-width: none; margin: 0; }
@media (min-width: 800px) { .presta-ba-grille.presta-ba-plusieurs { grid-template-columns: 1fr 1fr; max-width: none; } }

/* Navigation d'étape : « Précédent » garde sa largeur, « Continuer » prend toute la place restante. */
.step-nav .ghost { flex: 0 0 auto; }
.step-nav .btn { flex: 1 1 auto; margin-left: 0; text-align: center; justify-content: center; }
.step-nav .btn:only-child { flex: 1 1 auto; }

/* « Je préfère être contacté par… » : le style générique des champs (form label) l'écrasait. */
form .contact-pref { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0 0 1.4rem; }
@media (min-width: 560px) { form .contact-pref { grid-template-columns: 1fr 1fr; } }
form .contact-pref legend { grid-column: 1 / -1; margin-bottom: 0.2rem; }
form .contact-pref label.contact-choix {
  display: flex; align-items: center; gap: 0.8rem; margin: 0; padding: 1rem 1.1rem; position: relative;
  background: var(--surface-2); border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
form .contact-pref .contact-choix input { appearance: none; -webkit-appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin: 0; border: 2px solid rgba(255,255,255,0.5); border-radius: 50% !important; background: transparent; display: grid; place-content: center; transition: border-color .15s ease; }
form .contact-pref .contact-choix input::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50% !important; background: var(--blue-main); transform: scale(0); transition: transform .15s ease; }
form .contact-pref .contact-choix input:checked { border-color: var(--blue-main); }
form .contact-pref .contact-choix input:checked::before { transform: scale(1); }
form .contact-pref label.contact-choix > span { display: block; margin: 0; font: 0.9rem/1.35 'Cinzel', serif; letter-spacing: 0.02em; text-transform: none; color: var(--white); }
form .contact-pref label.contact-choix:hover { border-color: var(--blue-main); transform: translateY(-1px); }
form .contact-pref label.contact-choix:has(input:checked) { border-color: var(--blue-main); background: rgba(53,160,243,0.16); box-shadow: 0 0 0 1px var(--blue-main) inset; }
form .contact-pref label.contact-choix:has(input:focus-visible) { outline: 2px solid var(--white); outline-offset: 2px; }