:root {
  --encre: #131518;
  --encre-2: #5d6168;
  --fond: #ffffff;
  --doux: #f5f5f7;
  --trait: #e2e3e6;
  --trait-fort: #d6d7db;
  --noir: #0b0b0c;
  --bleu: #1a6fb5;
  --vert: #1f9d57;
  --irise: linear-gradient(90deg, #3fe0c5, #8be28a, #f3e56b, #ff9fc6, #b39cff, #58c4ff);

  --texte: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --titres: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 18px;
  --rayon-photo: 28px;
  --entete-h: 64px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, address, table { margin: 0; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 0.2em; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2.5rem, 46rem); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  padding: 0.6rem 1rem; border-radius: 8px;
  background: var(--encre); color: #fff; font-weight: 600;
}
.evitement:focus { top: 0.75rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.7rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--noir { background: var(--encre); color: #fff; }
.btn--noir:hover { background: #34383e; }
.btn--contour { border-color: #c9cbd0; background: #fff; color: var(--encre); }
.btn--contour:hover { border-color: var(--encre); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.bandeau {
  padding: 0.6rem 1.25rem;
  background: var(--encre); color: #fff;
  font-weight: 500; font-size: 0.95rem; text-align: center;
}

.entete {
  position: relative; z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--trait);
}
.entete__in { display: flex; align-items: center; gap: 2rem; min-height: var(--entete-h); }

.marque {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
  font-family: var(--titres); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; white-space: nowrap;
}
.marque svg { width: 34px; height: 34px; flex: none; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.5rem; }
.nav a {
  display: block; padding: 0.4rem 0;
  color: var(--encre-2); text-decoration: none; font-weight: 500; font-size: 0.95rem;
}
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--encre); }

.entete__tel { min-height: 40px; padding: 0.4rem 1.1rem; font-size: 0.95rem; white-space: nowrap; }

.menu-btn {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--doux); color: var(--encre);
  cursor: pointer;
}
.menu-btn__barres,
.menu-btn__barres::before,
.menu-btn__barres::after {
  display: block; width: 18px; height: 2px; margin-inline: auto;
  border-radius: 2px; background: currentColor;
}
.menu-btn__barres { position: relative; }
.menu-btn__barres::before,
.menu-btn__barres::after { content: ""; position: absolute; left: 0; }
.menu-btn__barres::before { top: -6px; }
.menu-btn__barres::after { top: 6px; }

@media (max-width: 1160px) {
  .menu-btn { display: block; }
  .entete__tel { display: none; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 0.25rem 1.25rem 0.75rem;
    background: #fff; border-bottom: 1px solid var(--trait);
  }
  .nav.est-ouvert { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--trait); color: var(--encre); font-size: 1.1rem; }
  .nav li:last-child a { border-bottom: 0; }
  .nav a[aria-current="page"] { box-shadow: none; font-weight: 700; }
}

.accueil { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.accueil__texte { display: grid; justify-items: center; text-align: center; }

.accueil h1,
.page-tete h1,
.introuvable h1 { font-size: clamp(2.25rem, 5.6vw, 4rem); line-height: 1.06; letter-spacing: -0.035em; }
.accueil h1 { max-width: 26ch; }
@media (max-width: 480px) {
  .accueil h1,
  .page-tete h1,
  .introuvable h1 { font-size: 1.9rem; }
}

.accroche {
  max-width: 46ch; margin-top: 1.5rem;
  font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--encre-2);
}
.accueil .actions,
.accueil .atouts { justify-content: center; }

.statut {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.5rem; padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border: 1px solid var(--trait); border-radius: 999px;
  font-weight: 500; font-size: 0.9rem;
}
.statut__point { width: 9px; height: 9px; border-radius: 50%; background: #d98a1f; }
.statut.est-ouvert .statut__point { background: var(--vert); box-shadow: 0 0 0 4px rgba(31, 157, 87, 0.18); }

.atouts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  margin-top: 1.5rem; color: var(--encre-2); font-size: 0.95rem;
}
.atouts li { display: inline-flex; align-items: center; gap: 0.4rem; }
.atouts svg { width: 17px; height: 17px; flex: none; color: var(--encre); }

.photo { overflow: hidden; border-radius: var(--rayon-photo); background: var(--doux); }
.photo img,
.photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo picture { display: contents; }

.accueil__photo { margin-top: clamp(2.5rem, 6vw, 4rem); aspect-ratio: 4 / 5; }
.accueil__photo img { object-position: 50% 34%; }
@media (min-width: 640px) {
  .accueil__photo { aspect-ratio: 4 / 3; }
}
@media (min-width: 1000px) {
  .accueil__photo { aspect-ratio: 16 / 9; }
}

.reperes { margin-top: 1rem; }
.reperes li { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--trait); }
.reperes svg { width: 22px; height: 22px; flex: none; color: var(--encre-2); }
.reperes strong { display: block; font-weight: 600; }
.reperes span { display: block; color: var(--encre-2); font-size: 0.95rem; }
@media (min-width: 800px) {
  .reperes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; }
  .reperes li { padding: 1rem 1.75rem; border-bottom: 0; border-left: 1px solid var(--trait); }
  .reperes li:first-child { padding-left: 0; border-left: 0; }
}

.page-tete { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.page-tete h1 { max-width: 18ch; }
.page-tete .accroche { max-width: 56ch; }

.fil { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; color: var(--encre-2); font-size: 0.9rem; }
.fil a { color: var(--encre); }

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--doux { background: var(--doux); }

.titre { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; }
.intro { max-width: 52ch; margin-top: 1rem; font-size: 1.15rem; line-height: 1.5; color: var(--encre-2); }

.tete { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .tete { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
  .tete .intro { margin-top: 0; }
}

.prestations { margin-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--trait); }
.prestation {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--trait);
}
.prestation h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -0.025em; }
.prestation h3 a { text-decoration: none; }
.prestation h3 a::after { content: ""; position: absolute; inset: 0; }
.prestation h3 a:focus-visible { outline: none; }
.prestation h3 a:focus-visible::after { outline: 3px solid var(--bleu); outline-offset: 4px; border-radius: 8px; }
.prestation__marques { max-width: 38ch; margin-top: 0.4rem; color: var(--encre-2); font-size: 0.98rem; }

.prestation__pannes { grid-column: 1 / -1; grid-row: 2; display: grid; gap: 0.3rem 1.5rem; font-size: 0.98rem; }
.prestation__pannes li { position: relative; padding-left: 1.1rem; }
.prestation__pannes li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--encre);
}

.prestation__fleche {
  grid-column: 2; grid-row: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--trait-fort); border-radius: 50%;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.prestation__fleche svg { width: 18px; height: 18px; }
.prestation:hover .prestation__fleche { background: var(--encre); border-color: var(--encre); color: #fff; }

@media (min-width: 900px) {
  .prestation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; padding: 2.25rem 0; }
  .prestation__pannes { grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1fr; align-content: start; padding-top: 0.4rem; }
  .prestation__fleche { grid-column: 3; }
}

.pannes { margin-top: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--trait-fort); }
.pannes li { padding: 1.5rem 0; border-top: 1px solid var(--trait-fort); }
.pannes h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.pannes p { max-width: 46ch; margin-top: 0.35rem; color: var(--encre-2); }
@media (min-width: 800px) {
  .pannes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
}

.marques { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.marques li {
  padding: 0.45rem 1rem; border: 1px solid var(--trait-fort); border-radius: 999px;
  font-weight: 500; font-size: 0.95rem;
}

.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.duo__photo { aspect-ratio: 1 / 1; }
.duo__photo--haute { aspect-ratio: 4 / 5; }
.duo__photo--boutique img { object-position: 50% 30%; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
}

.liens { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait-fort); }
.liens h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.liens ul { margin-top: 0.6rem; }
.liens li + li { margin-top: 0.35rem; }

.etapes { margin-top: 2rem; counter-reset: etape; border-bottom: 1px solid var(--trait-fort); }
.etapes li {
  counter-increment: etape;
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 0 1rem;
  padding: 1.4rem 0; border-top: 1px solid var(--trait-fort);
}
.etapes li::before {
  content: counter(etape);
  font-family: var(--titres); font-size: 1.9rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em;
}
.etapes h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.etapes p { grid-column: 2; margin-top: 0.3rem; color: var(--encre-2); }

.section--noir { position: relative; background: var(--noir); color: #fff; }
.section--noir::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 4px; background: var(--irise);
}
.section--noir .intro { color: #b9bcc2; }
.section--noir .photo { background: #1b1c1f; }
.section--noir :focus-visible { outline-color: #8ccbff; }

.points { margin-top: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.points li { padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.points h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.015em; }
.points p { margin-top: 0.3rem; color: #b9bcc2; }

.duo__photo--video { aspect-ratio: 9 / 16; width: 100%; max-width: 330px; justify-self: center; }

.grille { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 700px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .grille { grid-template-columns: repeat(3, 1fr); }
}

.annonce {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.5rem; border: 1px solid var(--trait); border-radius: var(--rayon);
}
.annonce__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--encre-2); }
.annonce h3 { font-size: 1.15rem; line-height: 1.25; }
.annonce p { color: var(--encre-2); }

.etiquette {
  padding: 0.15rem 0.6rem; border: 1px solid var(--encre); border-radius: 999px;
  color: var(--encre); font-weight: 600; font-size: 0.78rem;
}
.etiquette--promo { background: var(--encre); color: #fff; }

.faq-zone { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .faq-zone { grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
  .faq-zone__tete { position: sticky; top: 2rem; }
}

.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--titres); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; padding-bottom: 1.4rem; color: var(--encre-2); }
.faq details a { color: var(--encre); }

.contact { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 900px) {
  .contact { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; }
}

.contact address {
  font-family: var(--titres); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.025em;
}
.note { margin-top: 0.75rem; color: var(--encre-2); }

.telephones { margin-top: 2rem; border-top: 1px solid var(--trait-fort); }
.telephones li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--trait-fort);
}
.telephones span { color: var(--encre-2); }
.telephones a {
  font-family: var(--titres); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.telephones a:hover { text-decoration: underline; }

.carte { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--rayon-photo); background: #fff; }
.carte h3 { margin-bottom: 1rem; font-size: 1.3rem; letter-spacing: -0.02em; }

.horaires { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horaires th, .horaires td { padding: 0.7rem 0; border-bottom: 1px solid var(--trait); }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: 0; }
.horaires th { text-align: left; font-weight: 400; color: var(--encre-2); }
.horaires td { text-align: right; }
.horaires tr.est-aujourdhui th,
.horaires tr.est-aujourdhui td { font-weight: 600; color: var(--encre); }
.horaires tr.est-aujourdhui th::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 0.6rem;
  border-radius: 50%; background: var(--encre); vertical-align: 0.08em;
}

.plan {
  display: grid; justify-items: center; gap: 0.8rem;
  margin-top: 2rem; padding: 2.5rem 1.5rem;
  border-radius: var(--rayon-photo); background: #fff; text-align: center;
}
.plan__icone { width: 32px; height: 32px; }
.plan__note { color: var(--encre-2); font-size: 0.85rem; }
.plan.est-charge { padding: 0; overflow: hidden; }
.plan iframe { display: block; width: 100%; height: 400px; border: 0; }

.pied { border-top: 1px solid var(--trait); color: var(--encre-2); font-size: 0.95rem; }
.pied a { color: var(--encre); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied .marque { margin-bottom: 0.75rem; }
.pied p + p { margin-top: 0.75rem; }
.pied li + li { margin-top: 0.4rem; }
.pied__titre { margin-bottom: 0.75rem; color: var(--encre); font-weight: 600; }
.pied__in { display: grid; gap: 2rem; padding-block: 3.5rem 2.5rem; }
@media (min-width: 640px) {
  .pied__in { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .pied__in { grid-template-columns: 1.4fr 1.1fr 1fr 0.9fr; }
}
.pied__bas { padding-block: 1.25rem; font-size: 0.85rem; }
.pied__in + .pied__bas { border-top: 1px solid var(--trait); }

.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--trait);
}
@media (max-width: 767px) {
  .avec-barre { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .barre-mobile { display: none; }
}

.introuvable { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; }
.introuvable .conteneur { display: grid; justify-items: center; }
.introuvable__code {
  margin-bottom: 1.5rem; padding: 0.35rem 0.9rem;
  border: 1px solid var(--trait); border-radius: 999px;
  color: var(--encre-2); font-weight: 500; font-size: 0.9rem;
}
.introuvable .actions { justify-content: center; }

.raccourcis { width: min(100%, 34rem); margin-top: 3.5rem; border-top: 1px solid var(--trait); text-align: left; }
.raccourcis a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--trait);
  text-decoration: none;
  font-family: var(--titres); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
}
.raccourcis svg { width: 18px; height: 18px; flex: none; color: var(--encre-2); }
.raccourcis a:hover svg { color: var(--encre); }

.page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; }
.page h2 { margin-top: 2.5rem; font-size: 1.35rem; letter-spacing: -0.02em; }
.page p, .page ul { margin-top: 0.8rem; color: var(--encre-2); }
.page ul { padding-left: 1.2rem; list-style: disc; }
.page a { color: var(--encre); }

.formulaire { display: grid; gap: 1.4rem; }
.formulaire__duo { display: grid; gap: 1.4rem; }
@media (min-width: 640px) {
  .formulaire__duo { grid-template-columns: 1fr 1fr; align-items: start; }
}
.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.formulaire__note { color: var(--encre-2); font-size: 0.9rem; }
.formulaire__note a { color: var(--encre); }

.champ { min-width: 0; margin: 0; padding: 0; border: 0; }
.champ label,
.champ legend { display: block; margin-bottom: 0.45rem; padding: 0; font-weight: 600; }
.champ label small { color: var(--encre-2); font-weight: 400; font-size: 0.9em; }

.champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.champ select,
.champ textarea {
  display: block; width: 100%; min-height: 48px; padding: 0.65rem 0.85rem;
  border: 1px solid #b9bcc2; border-radius: 12px;
  background-color: #fff; color: var(--encre); font: inherit;
}
.champ textarea { resize: vertical; line-height: 1.5; }
.champ select {
  -webkit-appearance: none; appearance: none; padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.champ ::placeholder { color: #8a8d93; opacity: 1; }

.champ input[type="file"] { display: block; max-width: 100%; font: inherit; font-size: 0.95rem; color: var(--encre-2); }
.champ input[type="file"]::file-selector-button {
  min-height: 42px; margin-right: 0.9rem; padding: 0.4rem 1.1rem;
  border: 1px solid #c9cbd0; border-radius: 999px; background: #fff; color: var(--encre);
  font: inherit; font-weight: 600; cursor: pointer;
}

.champ__aide { margin-top: 0.4rem; color: var(--encre-2); font-size: 0.9rem; }
.champ__erreur { margin-top: 0.4rem; color: #b3261e; font-weight: 600; font-size: 0.92rem; }
.champ--erreur input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.champ--erreur select,
.champ--erreur textarea { border-color: #b3261e; }

.choix { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choix label { position: relative; margin: 0; font-weight: 500; cursor: pointer; }
.choix input { position: absolute; opacity: 0; }
.choix span { display: block; padding: 0.55rem 1.2rem; border: 1px solid #b9bcc2; border-radius: 999px; background: #fff; }
.choix input:checked + span { border-color: var(--encre); background: var(--encre); color: #fff; }
.choix input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }

.case { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; padding: 1rem 1.1rem; border-radius: var(--rayon); background: var(--doux); cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--encre); }
.case span { color: var(--encre-2); }
.case strong { display: block; color: var(--encre); font-weight: 600; }

.avis { margin-bottom: 1.5rem; padding: 0.85rem 1.1rem; border-radius: 12px; font-weight: 500; }
.avis--ok { background: #e7f6ee; color: #0e5c33; }
.avis--erreur { background: #fdecea; color: #8a1c13; }
.avis a { color: inherit; }

.vide { padding: 2.25rem 1.5rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); color: var(--encre-2); text-align: center; }
.vide a { color: var(--encre); }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reserve { position: absolute; width: 0; height: 0; overflow: hidden; }

.page-tete--courte { padding-bottom: clamp(2rem, 5vw, 3rem); }
.page-tete--courte h1 { max-width: 22ch; }

.devis { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px) {
  .devis { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; }
}
.devis .carte h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.devis .carte h2 + p { margin-top: 0.4rem; color: var(--encre-2); }
.devis__cote { display: grid; gap: 1.5rem; }
.devis__cote .actions { margin-top: 1.25rem; }
.devis__cote .btn { width: 100%; }
.devis__rappel { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); color: var(--encre-2); font-size: 0.95rem; }
.devis__rappel strong { display: block; color: var(--encre); }

.formulaire__partie { margin: 0.6rem 0 -0.4rem; padding-top: 1.4rem; border-top: 1px solid var(--trait); font-size: 1.15rem; letter-spacing: -0.015em; }
.formulaire__partie:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.reservation { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding: 1rem 1.2rem; border-radius: var(--rayon); background: var(--encre); color: #fff; }
.reservation span { color: #c9cbd0; font-size: 0.9rem; }
.reservation strong { display: block; font-family: var(--titres); font-size: 1.2rem; letter-spacing: -0.015em; }
.reservation b { font-family: var(--titres); font-size: 1.3rem; white-space: nowrap; }

.btn[disabled] { opacity: 0.55; cursor: default; }
.btn--whatsapp { background: #1f9d57; color: #fff; }
.btn--whatsapp:hover { background: #17834a; }

.produits { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .produits { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .produits { grid-template-columns: repeat(3, 1fr); }
}

.produit { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 1.4rem; border-radius: var(--rayon-photo); background: #fff; }
.produit__photo { aspect-ratio: 1 / 1; background: #ececef; }
.produit__photo img { width: 100%; height: 100%; object-fit: cover; }
.produit__photo--vide { display: grid; place-items: center; }
.produit__photo--vide svg { width: 72px; height: 72px; color: #c3c5ca; }
.produit h2 { padding: 1.2rem 1.4rem 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.produit__details { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.7rem 1.4rem 0; }
.produit__details li { padding: 0.15rem 0.65rem; border: 1px solid var(--trait-fort); border-radius: 999px; font-size: 0.85rem; font-weight: 500; }
.produit__texte { padding: 0.7rem 1.4rem 0; color: var(--encre-2); font-size: 0.95rem; }
.produit__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1.3rem 1.4rem 0; }
.produit__prix { font-family: var(--titres); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.03em; white-space: nowrap; }
.produit__bas .btn { min-height: 44px; padding: 0.5rem 1.3rem; }
.produit__reserve { padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--doux); color: var(--encre-2); font-weight: 600; font-size: 0.95rem; }
.produit--reserve .produit__photo img { opacity: 0.5; }

@media (min-width: 800px) {
  .etapes--ligne { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; border-bottom: 0; }
  .etapes--ligne li { grid-template-columns: 1fr; gap: 0.6rem; }
  .etapes--ligne p { grid-column: 1; }
}

.envoyee__reference {
  margin-bottom: 1.5rem; padding: 0.35rem 0.9rem;
  border: 1px solid var(--trait); border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}

.etoiles { display: inline-flex; gap: 2px; vertical-align: -0.15em; }
.etoiles svg { width: 18px; height: 18px; fill: #d6d7db; }
.etoiles svg.est-pleine { fill: var(--encre); }
.section--noir .etoiles svg.est-pleine { fill: #fff; }

.note-accueil {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem;
  margin-top: 1.25rem; color: var(--encre-2); font-size: 0.95rem; text-decoration: none;
}
.note-accueil strong { color: var(--encre); font-weight: 600; }
.note-accueil:hover span:last-child { text-decoration: underline; }

.avis-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.avis-resume strong { color: var(--encre); font-weight: 600; }
.avis-resume .etoiles svg { width: 22px; height: 22px; }

.avis-liste { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 760px) {
  .avis-liste { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .avis-liste--trois { grid-template-columns: repeat(3, 1fr); }
}
.avis-carte { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; }
.avis-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--encre-2); font-size: 0.85rem; }
.avis-carte__texte { overflow-wrap: anywhere; }
.avis-carte__auteur { margin-top: auto; color: var(--encre-2); font-size: 0.9rem; }
.avis-carte__auteur strong { color: var(--encre); font-weight: 600; }
.avis-carte__verifie { padding: 0.1rem 0.55rem; border: 1px solid var(--encre); border-radius: 999px; color: var(--encre); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.avis-carte__reponse { padding: 0.9rem 1.1rem; border-radius: 12px; background: var(--doux); font-size: 0.95rem; }
.avis-carte__reponse p + p { margin-top: 0.25rem; color: var(--encre-2); }
.section--doux .avis-carte { border-color: transparent; }
.section--doux .avis-carte__reponse { background: var(--doux); }

.avis-bilan { display: grid; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--rayon-photo); background: #fff; }
@media (min-width: 860px) {
  .avis-bilan { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.avis-bilan__chiffre { font-family: var(--titres); font-weight: 600; font-size: clamp(3rem, 7vw, 4.25rem); line-height: 1; letter-spacing: -0.04em; }
.avis-bilan__chiffre span { color: var(--encre-2); font-size: 1.25rem; letter-spacing: 0; }
.avis-bilan__note .etoiles { margin-top: 0.6rem; }
.avis-bilan__note .etoiles svg { width: 24px; height: 24px; }
.avis-bilan__nombre { margin-top: 0.4rem; color: var(--encre-2); font-size: 0.95rem; }
.avis-barres { display: grid; gap: 0.45rem; font-size: 0.9rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.avis-barres li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 2rem; gap: 0.75rem; align-items: center; }
.avis-barres li span:last-child { text-align: right; }
.avis-barres__piste { height: 8px; border-radius: 4px; background: var(--doux); overflow: hidden; }
.avis-barres__part { display: block; height: 100%; border-radius: 4px; background: var(--encre); }
.avis-barres__part--0 { width: 0%; }
.avis-barres__part--1 { width: 10%; }
.avis-barres__part--2 { width: 20%; }
.avis-barres__part--3 { width: 30%; }
.avis-barres__part--4 { width: 40%; }
.avis-barres__part--5 { width: 50%; }
.avis-barres__part--6 { width: 60%; }
.avis-barres__part--7 { width: 70%; }
.avis-barres__part--8 { width: 80%; }
.avis-barres__part--9 { width: 90%; }
.avis-barres__part--10 { width: 100%; }

.regles-avis ul,
.regles { margin-top: 1.25rem; }
.regles-avis li,
.regles li { position: relative; padding: 0.7rem 0 0.7rem 1.4rem; border-top: 1px solid var(--trait); color: var(--encre-2); }
.regles-avis li:first-child,
.regles li:first-child { border-top: 0; }
.regles-avis li::before,
.regles li::before { content: ""; position: absolute; left: 0.2rem; top: 1.25em; width: 6px; height: 6px; border-radius: 50%; background: var(--encre); }
.regles-avis a { color: var(--encre); }
.regles li { font-size: 0.95rem; }

.note-choix { display: inline-flex; flex-direction: row-reverse; gap: 0.2rem; }
.note-choix input { position: absolute; opacity: 0; }
.note-choix label { margin: 0; padding: 0.15rem; border-radius: 8px; cursor: pointer; }
.note-choix svg { width: 42px; height: 42px; fill: #d6d7db; transition: fill 0.1s; }
.note-choix input:checked ~ label svg,
.note-choix label:hover svg,
.note-choix label:hover ~ label svg { fill: var(--encre); }
.note-choix input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 2px; }
.champ--erreur .note-choix svg { fill: #f1b8b2; }

.avis-merci h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.avis-merci h2 + p { margin-top: 0.5rem; color: var(--encre-2); }
.avis-merci__google { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.avis-merci__google textarea { display: block; width: 100%; margin-top: 1rem; padding: 0.75rem 0.9rem; border: 1px solid #b9bcc2; border-radius: 12px; background: var(--doux); color: var(--encre); font: inherit; resize: vertical; }
.avis-merci .actions { margin-top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .prestation__fleche, .faq summary::after { transition: none; }
}