/* =========================================================
   ENTRETIEN EXOTIQUE — feuille de style principale
   Palette: noir profond + or métallique (assortie au logo)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --black:        #0a0a09;
  --black-soft:   #121110;
  --card:         #17150f;
  --card-line:    rgba(201,162,39,0.16);
  --gold:         #c9a227;
  --gold-light:   #e9cf7a;
  --gold-dim:     #7a662b;
  --ivory:        #ece5d3;
  --ivory-dim:    #d6d0c1;
  --muted:        #a89f89;
  --danger:       #b5533f;
  --success:      #6f9a5c;

  --serif: 'Playfair Display', 'Georgia', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ivory);
  margin: 0 0 .5em;
  letter-spacing: .01em;
}

p{ margin: 0 0 1em; color: var(--ivory-dim); }

/* Paragraphes de texte long ("bloc rectangulaire" façon traitement de
   texte) : lignes justifiées des deux côtés, sauf la dernière ligne
   de chaque paragraphe, qui reste alignée à gauche pour éviter un
   étirement disgracieux. */
.prose p, p.prose{
  text-align: justify;
  text-align-last: left;
}

.eyebrow{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .72rem;
  color: var(--gold);
  font-weight: 500;
  display:inline-block;
  margin-bottom: 1.1em;
}

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

.hairline{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold-light) 50%, var(--gold) 85%, transparent);
  opacity:.55;
  border:none;
  margin: 0;
}

.hairline-static{
  height:1px;
  width:100%;
  background: var(--card-line);
  border:none;
}

/* -------------------- Skip link / focus -------------------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--gold); color:#0a0a09; padding:10px 18px; z-index:999;
  font-family: var(--sans); font-weight:600;
}
.skip-link:focus{ left: 16px; top:16px; }

:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* -------------------- Header / Nav -------------------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(10,10,9,0.86);
  backdrop-filter: blur(10px);
}
/* Sur mobile, le flou du header peut visuellement "contaminer" le
   panneau du menu (bug connu de rendu sur certains navigateurs),
   même si ce panneau a son propre fond opaque. On désactive donc
   le flou pendant que le menu est ouvert. */
.site-header.menu-open{
  background: #020202;
  backdrop-filter: none;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 28px 32px 28px 0px;
  max-width: var(--container);
  margin:0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{ height: 112px; width:auto; }
.brand-text{
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing:.14em;
  color: var(--ivory);
  text-transform: uppercase;
}
.brand-text span{ color: var(--gold); }

.nav-links{
  display:flex;
  align-items:center;
  gap: 26px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ivory-dim);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--gold-light); }
.nav-links a[aria-current="page"]::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--gold);
}
/* Le lien "Entretien Exclusif" dans la liste n'apparaît que dans le menu mobile
   (le bouton .nav-cta ci-dessous le remplace en version bureau) — sinon il
   apparaissait deux fois dans l'entête. */
.nav-cta-mobile{ display:none; }

.nav-cta{
  background: linear-gradient(120deg, var(--gold-dim), var(--gold) 40%, var(--gold-light) 55%, var(--gold) 70%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  padding: 9px 20px;
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing:.16em;
  color: #0a0a09;
  font-weight: 500;
  transition: background-position .3s ease;
  white-space: nowrap;
}
.nav-cta:hover{ background-position: 100% 0%; }

.lang-switch-li{
  display:flex; align-items:center;
  font-size:.72rem;
  letter-spacing:.1em;
  color: var(--gold);
}
.lang-switch-li a{ font-size:inherit !important; text-transform:none !important; letter-spacing:inherit !important; color: var(--gold); }
.lang-switch-li a:hover{ color: var(--gold-light); }
.lang-switch-li .current{ color: var(--gold); font-weight: 600; }
.lang-switch-li .sep{ margin: 0 4px; color: var(--gold-dim); }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width: 32px; height: 22px; position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background: var(--gold-light);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 15px 32px;
  font-family: var(--sans);
  font-size:.82rem;
  text-transform: uppercase;
  letter-spacing:.18em;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all .3s ease;
}
.btn-primary, .btn-ghost{
  background: linear-gradient(120deg, var(--gold-dim), var(--gold) 40%, var(--gold-light) 55%, var(--gold) 70%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  color:#0a0a09;
  font-weight: 500;
  border-color: transparent;
}
.btn-primary:hover, .btn-ghost:hover{ background-position: 100% 0%; }

/* -------------------- Hero -------------------- */
.hero{
  position: relative;
  padding: 120px 32px 100px;
  text-align:center;
  overflow:hidden;
  background: var(--black);
}
.hero.hero-photo{
  background-color: #020202;
  background-image: url('../images/hero-bg-maserati.jpg');
  background-position: center 66%;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 120px;
}
.hero.hero-photo::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(60% 85% at center 42%, rgba(2,2,2,0.55) 0%, rgba(2,2,2,0.2) 45%, transparent 72%);
  pointer-events:none;
  z-index:1;
}
.hero.hero-photo::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, transparent 78%, #020202 100%);
  pointer-events:none;
  z-index:1;
}

/* -------------------- Full-bleed feature band (photo background) -------------------- */
.feature-band{
  position: relative;
  padding: 120px 32px;
  text-align:center;
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  isolation: isolate;
}
.feature-band::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--black) 0%, var(--black) 10%, rgba(10,10,9,0.7) 22%, rgba(10,10,9,0.35) 38%, rgba(10,10,9,0.5) 55%, rgba(10,10,9,0.9) 80%, var(--black) 92%, var(--black) 100%);
  z-index:-1;
}
.feature-band .section-head{ margin-left:auto; margin-right:auto; }
.feature-band p{ margin: 0 auto 32px; font-size: 1.08rem; }
.feature-exclusif{ background-image: url('../images/exclusif-bg-ferrari.png'); }
.feature-exclusif-page{ background-image: url('../images/exclusif-bg-lamborghini.jpg'); }

/* -------------------- Page d'accueil : fond uni #020202 -------------------- */
/* S'applique à toutes les sections du <main> de l'accueil (sauf le hero
   Maserati et la bande photo "Entretien Exclusif", gérés séparément),
   footer exclu puisqu'il est hors de <main>. */
body.page-home .hero .hero-inner{ max-width: none; }
body.page-home main > section:not(.hero):not(.feature-band){
  background: #020202 !important;
}
/* La photo Ferrari est remise, entière (pas de recadrage sur les roues),
   sur un fond plat identique aux sections voisines pour un contour
   invisible. Aucun dégradé par-dessus. */
body.page-home .feature-band{
  background-color: #020202;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
body.page-home .feature-band::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(55% 65% at center 48%, rgba(2,2,2,0.6) 0%, rgba(2,2,2,0.25) 45%, transparent 72%),
    linear-gradient(180deg, transparent 0%, transparent 78%, #020202 100%);
  z-index:-1;
  pointer-events:none;
}

.hero-inner{ max-width: 780px; margin:0 auto; position:relative; z-index:2; }

.hero-logo{ width:min(560px, 88vw); margin: 0 auto 8px; }
.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.15;
  margin-bottom: 32px;
}
.hero .lede{
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 2.4em;
  color: var(--ivory-dim);
}
.hero-ctas{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.hero-ctas .btn{ min-width: 244px; justify-content:center; }

/* Titre + sous-titre du hero forcés sur une seule ligne chacun, à partir
   d'une largeur d'écran suffisante pour rester lisibles. Sous 900px, le
   texte revient à son retour à la ligne normal (la phrase du sous-titre
   est trop longue pour rester lisible sur une seule ligne en mobile). */
@media (min-width: 900px){
  h1.nowrap-line{ white-space:nowrap; font-size: min(2.6rem, 3.6vw); }
  p.nowrap-line{ white-space:nowrap; font-size: min(0.95rem, 1.35vw); }
}

/* -------------------- Sections -------------------- */
section{ padding: 96px 0; }
.section-head{ margin: 0 0 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
/* Bloc de titre sans limite de largeur, pour les titres d'une seule ligne. */
.section-head.wide{ max-width: none; }
/* Titres gardés sur une seule ligne dès les écrans moyens : la taille suit
   la largeur de l'écran, donc la phrase ne déborde jamais du conteneur.
   Sous 760px (mobile), le titre reprend son retour à la ligne normal. */
@media (min-width: 761px){
  h2.headline-one-line,
  .section-head h2.headline-one-line{
    white-space: nowrap;
    font-size: min(2.3rem, 3.2vw);
  }
}

.alt-bg{ background: var(--black); }

/* Page Contact : titre du hero pleine largeur, fond uni #020202, et
   titres des encadrés de coordonnées en or (même teinte que les
   sur-titres "eyebrow" utilisés dans "Nos services" sur l'accueil). */
body.page-services .hero .hero-inner{ max-width: none; }
body.page-services .hero .lede{ max-width: none; }
body.page-rendezvous .hero .hero-inner{ max-width: none; }
body.page-rendezvous .hero .lede{ max-width: none; }
body.page-contact .hero .hero-inner{ max-width: none; }
body.page-contact .hero .lede{ max-width: none; }
body.page-services main > section{
  background: #020202 !important;
}
body.page-rendezvous main > section{
  background: #020202 !important;
}
body.page-histoire main > section{
  background: #020202 !important;
}
body.page-exclusif main > section:not(.feature-band){
  background: #020202 !important;
}
body.page-exclusif .feature-band{
  background-color: #020202;
}
body.page-exclusif .feature-band::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, transparent 78%, #020202 100%);
  z-index:-1;
}
body.page-contact main > section{
  background: #020202 !important;
}
body.page-contact .info-list h4{ color: var(--gold); }
/* Formulaire + coordonnées centrés, alignés verticalement au centre
   l'un par rapport à l'autre (la carte GPS ayant été retirée, la
   colonne "coordonnées" est plus courte que le formulaire). */
body.page-contact .grid.grid-2{ align-items: center !important; }
body.page-contact .grid.grid-2 > div{ text-align: center; }
body.page-contact .field{ text-align: left; }
body.page-contact form{ max-width: 460px; margin: 0 auto; }
body.page-contact .info-list{ width: fit-content; text-align:left; margin: 0 auto; }
body.page-contact .info-list-row{ width: fit-content; margin: 0 auto; }
body.page-apropos .hero .hero-inner{ max-width: none; }
body.page-apropos .hero h1{ font-size: min(2.3rem, 3.2vw); }
body.page-apropos .hero .lede{ max-width: none; }
body.page-apropos main > section{
  background: #020202 !important;
}

/* -------------------- Cards / grids -------------------- */
.grid{ display:grid; gap: 28px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-5{ grid-template-columns: repeat(5, 1fr); gap: 20px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

.card{
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 34px 30px;
  position: relative;
  transition: border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color: var(--gold-dim); transform: translateY(-3px); }
.card .num{
  font-family: var(--serif);
  color: var(--gold-dim);
  font-size: .82rem;
  letter-spacing: .1em;
  margin-bottom: 14px;
  display:block;
}
.card h3{ font-size: 1.15rem; margin-bottom:.5em; }
.card p{ font-size: .93rem; margin-bottom: 0; text-align: justify; text-align-last: left; }
.grid-4 .card{ padding: 30px 24px; }
.grid-4 .card h3{ font-size: 1.05rem; }
.grid-4 .card p{ font-size: .89rem; }

/* Service card with price */
.service-card{
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 36px 32px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.service-card .btn{ margin-top: auto; width: 100%; justify-content: center; }

/* Détails repliables ("voir le détail") pour les forfaits combinés,
   afin que la carte garde une hauteur comparable aux autres par défaut.
   Le résumé (summary) reprend exactement le style des autres points
   de la liste, pour une continuité visuelle parfaite. */
.pkg-detail summary{
  cursor: pointer;
  font-size: .88rem; color: var(--gold);
  padding-left: 20px; position:relative;
  list-style: none;
}
.pkg-detail summary::-webkit-details-marker{ display:none; }
.pkg-detail summary::before{
  content:'+ ';
  position:absolute; left:0; top:0;
  color: var(--gold);
}
.pkg-detail[open] summary::before{
  content:'– ';
}
.pkg-detail summary:hover{ color: var(--gold-light); }
.pkg-detail summary:hover::before{ color: var(--gold-light); }
.pkg-detail ul{ margin-top: 9px; padding-left: 20px; }
.service-card.featured{
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,162,39,0.07), var(--card) 40%);
}
.service-card .tag{
  align-self:flex-start;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#0a0a09;
  background: var(--gold);
  padding: 4px 10px;
}
.service-card h3{ font-size:1.3rem; margin-bottom:0; }
.grid-5 .service-card{ padding: 28px 22px; }
.grid-5 .service-card h3{ font-size: 1.05rem; }
.grid-5 .service-card .price{ font-size: 1.3rem; }

/* Cartes de forfaits à largeur fixe (même largeur que le carrousel),
   qui passent à la ligne au besoin plutôt que de s'écraser sur une
   seule rangée. */
.service-cards-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 24px;
}
.service-cards-wrap .service-card{
  flex: 0 0 280px;
  padding: 28px 22px;
}
.service-cards-wrap .service-card h3{ font-size: 1.05rem; }
.service-cards-wrap .service-card .price{ font-size: 1.3rem; }
@media (max-width: 640px){
  .service-cards-wrap .service-card{ flex: 0 0 100%; max-width: 340px; }
}

/* -------------------- Carrousel de forfaits (coverflow, infini) -------------------- */
.carousel{ position:relative; display:flex; align-items:center; gap:14px; }
.carousel-track{
  position:relative;
  flex:1;
  height: 560px;
  overflow: hidden;
}
.carousel-track .service-card{
  position:absolute;
  top:50%; left:50%;
  width:280px;
  padding: 30px 26px;
  transition: transform .45s cubic-bezier(.22,.68,.36,1), opacity .45s ease;
  cursor: pointer;
}
.carousel-track .service-card.is-center{ cursor:default; }
.carousel-arrow{
  flex: none;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--card-line);
  background: var(--card);
  color: var(--ivory);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .2s ease, color .2s ease;
  z-index: 5;
}
.carousel-arrow:hover{ border-color: var(--gold); color: var(--gold-light); }
@media (max-width: 640px){
  .carousel-track{ height: 620px; }
  .carousel-track .service-card{ width: 240px; }
}
.service-card .price{
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.6rem;
}
.service-card .price small{ font-family: var(--sans); font-size:.6em; color: var(--muted); }
.service-card ul{ list-style:none; margin: 6px 0 10px; padding:0; display:flex; flex-direction:column; gap:9px; }
.service-card ul li{
  font-size:.88rem; color: var(--ivory-dim);
  padding-left: 20px; position:relative;
}
.service-card ul li::before{
  content:'—';
  position:absolute; left:0; top:0;
  color: var(--gold-dim);
}

/* -------------------- Stats strip -------------------- */
.stats{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 30px;
  padding: 44px 0;
  border-top: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
}
.stat{ text-align:center; flex:1; min-width:140px; }
.stat .n{ font-family: var(--serif); font-size:2rem; color: var(--gold-light); }
.stat .l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color: var(--muted); }

/* -------------------- Forms -------------------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom: 20px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color: var(--gold);
}
.field input, .field select, .field textarea{
  background: var(--black-soft);
  border: 1px solid var(--card-line);
  color: var(--ivory);
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: .95rem;
  border-radius: var(--radius);
  transition: border-color .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--gold);
  outline: none;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field-note{ font-size:.78rem; color: var(--muted); }

/* honeypot */
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

.form-msg{
  padding: 16px 18px;
  border: 1px solid var(--card-line);
  font-size:.9rem;
  margin-bottom: 22px;
  display:none;
}
.form-msg.show{ display:block; }
.form-msg.success{ border-color: var(--success); color:#bfe0ae; }
.form-msg.error{ border-color: var(--danger); color:#f0c3b8; }

/* -------------------- Square Appointments embed -------------------- */
.square-embed-frame{
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(201,162,39,0.06);
}
#calendrier, #calendar{
  scroll-margin-top: 100px;
}
.square-embed-frame iframe{ width:100%; display:block; border:none; min-height: 800px; }

/* -------------------- Calendar (legacy — kept for reference/reuse) -------------------- */
.booking-wrap{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items:flex-start;
}
.calendar-card{
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 28px;
}
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}
.cal-head h3{ margin:0; font-size:1.1rem; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  background:none; border:1px solid var(--card-line); color: var(--gold-light);
  width: 34px; height:34px; cursor:pointer; font-size: 1rem;
  transition: border-color .2s ease;
}
.cal-nav button:hover:not(:disabled){ border-color: var(--gold); }
.cal-nav button:disabled{ opacity:.3; cursor:not-allowed; }

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-dow{
  text-align:center; font-size:.65rem; text-transform:uppercase;
  letter-spacing:.1em; color: var(--muted); padding-bottom:6px;
}
.cal-day{
  aspect-ratio: 1;
  display:flex; align-items:center; justify-content:center;
  font-size:.86rem;
  border: 1px solid transparent;
  color: var(--ivory-dim);
  cursor:pointer;
  background: var(--black-soft);
  position: relative;
  transition: all .2s ease;
}
.cal-day:hover:not(.is-disabled){ border-color: var(--gold-dim); color: var(--ivory); }
.cal-day.is-empty{ background:transparent; cursor:default; }
.cal-day.is-disabled{ color:#403c31; cursor:not-allowed; background:transparent; }
.cal-day.is-full{ color:#5a5240; text-decoration: line-through; cursor:not-allowed; }
.cal-day.is-selected{ background: var(--gold); color:#0a0a09; border-color: var(--gold); font-weight:600; }
.cal-day.has-slots::after{
  content:'';
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background: var(--gold-dim);
}
.cal-day.is-selected.has-slots::after{ background:#0a0a09; }

.legend{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:.72rem; color: var(--muted); }
.legend-dot{ width:9px; height:9px; }
.legend-dot.avail{ background: var(--black-soft); border:1px solid var(--card-line); }
.legend-dot.full{ background:transparent; border:1px solid #403c31; }
.legend-dot.sel{ background: var(--gold); }

.slots-card{
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 28px;
}
.slots-card h3{ font-size:1.1rem; }
.slots-date{ color: var(--gold-light); font-family: var(--serif); font-size:1.4rem; margin-bottom: 18px; }
.slots-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 8px; }
.slot-btn{
  padding: 12px 10px;
  text-align:center;
  border: 1px solid var(--card-line);
  background: var(--black-soft);
  color: var(--ivory-dim);
  font-size:.9rem;
  cursor:pointer;
  transition: all .2s ease;
}
.slot-btn:hover:not(:disabled){ border-color: var(--gold); color: var(--ivory); }
.slot-btn.is-taken{ opacity:.35; text-decoration: line-through; cursor:not-allowed; }
.slot-btn.is-selected{ background: var(--gold); color:#0a0a09; border-color: var(--gold); font-weight:500; }
.slots-empty{ color: var(--muted); font-size:.9rem; padding: 20px 0; text-align:center; }

.selected-summary{
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--card-line);
  font-size:.9rem; color: var(--ivory-dim);
}
.selected-summary strong{ color: var(--gold-light); font-weight:500; }

/* -------------------- Info blocks (contact / about) -------------------- */
.info-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.info-list li{ display:flex; gap:16px; align-items:center; }
/* Variante en ligne : les items s'alignent horizontalement plutôt
   qu'empilés (utilisée en haut de la page Contact). */
.info-list-row{
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
@media (max-width: 640px){
  /* Sur mobile, les 3 coordonnées se centraient individuellement selon
     leur propre largeur de texte, causant un désalignement entre elles.
     On les empile plutôt en colonne, alignées entre elles. */
  .info-list-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
}
.info-list .ic{
  width:38px; height:38px; flex:none;
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-light);
}
.info-list h4{ font-size:.95rem; margin-bottom:.2em; }
.info-list p{ font-size:.88rem; margin-bottom:0; }

.map-frame{
  border: 1px solid var(--card-line);
  filter: grayscale(1) invert(0.92) contrast(0.9);
  width:100%; height: 320px;
}

.quote-block{
  border-left: 2px solid var(--gold);
  padding-left: 26px;
  margin: 40px 0;
}
.quote-block p{ font-family: var(--serif); font-style: italic; font-size:1.15rem; color: var(--ivory); }
.quote-block cite{ font-size:.78rem; color: var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.values-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; }
.values-grid .card{ text-align:center; }
.values-grid .card p{ text-align:center; text-align-last:auto; }

/* -------------------- Footer -------------------- */
footer{
  border-top: 1px solid var(--card-line);
  padding: 56px 0 30px;
  background: var(--black-soft);
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand img{ height:56px; margin-bottom: 14px; }
.footer-brand img.footer-logo-lg{ height:96px; }
.footer-brand p{ font-size:.85rem; max-width:280px; }
.footer-col h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color: var(--gold);
  margin-bottom: 16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.86rem; color: var(--ivory-dim); transition: color .2s ease; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.75rem; color: var(--muted);
}

/* -------------------- Utility -------------------- */
.mt-0{ margin-top:0; }
.center{ text-align:center; }

/* -------------------- Photo showcases (travaux réalisés) -------------------- */
.photo-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.photo-frame{
  position:relative;
  overflow:hidden;
  border: 1px solid var(--card-line);
  aspect-ratio: 4 / 3;
  background: var(--card);
}
.photo-frame.tall{ aspect-ratio: 3 / 4; }
.photo-frame img{
  width:100%; height:100%;
  object-fit: cover;
  transition: transform .6s ease;
  filter: saturate(1.02) contrast(1.02);
}
.photo-frame:hover img{ transform: scale(1.06); }
.photo-frame .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.photo-showcase-single{
  border: 1px solid var(--card-line);
  overflow:hidden;
  aspect-ratio: 16/10;
}
.photo-showcase-single img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 720px){
  .photo-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
  /* Boutons du hero : pleine largeur et empilés, pour une taille
     toujours identique peu importe la longueur du texte. */
  .hero-ctas{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn{
    width: 100%;
    min-width: 0;
  }

  /* Photos de fond pleine largeur : en "cover", ces photos très
     larges se retrouvaient trop zoomées/coupées sur un écran étroit.
     En "contain", la voiture reste entière, centrée sur le fond noir
     (qui est déjà la couleur de la page, donc ça reste invisible). */
  /* Normalisation des espaces entre sections : les styles en ligne
     (pensés pour le bureau) donnaient des espaces très inégaux sur
     mobile. On uniformise ici, tout en gardant l'espace nécessaire
     en haut des sections photo pour que le contenu tombe sous l'image. */
  .hero{
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
  .hero.hero-photo{
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 60vh;
    padding-top: 54vw !important;
    padding-bottom: 48px !important;
  }
  .feature-band{
    background-color: var(--black);
    background-size: contain;
    background-position: center top;
    min-height: 50vh;
    padding-top: 54vw !important;
    padding-bottom: 48px !important;
  }
  body.page-home .feature-band{
    background-position: center top !important;
  }
  /* Le dégradé du dessus était calibré en % pour le mode "cover" du
     bureau : ses bandes noires tombaient à des points qui ne
     correspondaient plus à la photo une fois celle-ci en "contain",
     ce qui la coupait visuellement. Sur mobile, on utilise plutôt un
     voile uniforme, doux, qui fonctionne peu importe la taille réelle
     de l'image affichée. */
  .feature-band::before{
    background: linear-gradient(180deg,
      var(--black) 0%,
      rgba(10,10,9,0.45) 18%,
      rgba(10,10,9,0.45) 82%,
      var(--black) 100%);
  }
}

/* -------------------- Responsive -------------------- */

@media (max-width: 900px){
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-5{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .booking-wrap{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 880px){
  .nav-links{
    position: fixed; inset: 84px 0 0 0;
    background: #020202 !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    z-index: 200;
    flex-direction: column;
    align-items:flex-start;
    padding: 30px 32px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform .3s ease;
    border-top: 1px solid var(--card-line);
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-toggle{ display:block; }
  .nav-cta{ display:none; }
  .nav-links .nav-cta-mobile{
    display:inline-block;
    background: linear-gradient(120deg, var(--gold-dim), var(--gold) 40%, var(--gold-light) 55%, var(--gold) 70%);
    color:#0a0a09;
    font-weight:500;
    padding:9px 20px;
  }
  .lang-switch-li{
    font-size:.8rem;
    margin-top: 4px;
  }
  .brand img{ height: 60px; }
}

@media (max-width: 720px){
  .grid-4, .grid-3, .grid-2, .grid-5{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .stats{ justify-content:flex-start; }
  section{ padding: 64px 0; }
  .hero{ padding: 90px 20px 70px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html{ scroll-behavior:auto; }
}