@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Layout idea: a shop price list, not an app. Square edges, hairline rules instead of cards,
   flat black, one solid gold from the logo, no shadows, no blur, no motion except the photo slider. */
:root {
  --noir: #0a0a0a;
  --surface: #141414;
  --ligne: #2b2b2b;
  --ligne-forte: #555;
  --texte: #f2f1ed;
  --gris: #a3a29d;
  --or: #cfb47c;
  --police: "Geist", "Segoe UI", system-ui, Arial, sans-serif;
  --marge: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noir); color: var(--texte); font: 400 1.0625rem/1.55 var(--police); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
section[id] { scroll-margin-top: 80px; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.8vw, 5.25rem); line-height: 1; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; }
h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; }
.contenu { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--marge); }
.bloc { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--ligne); }
.entete-bloc { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(32px, 4.5vw, 56px); }
.entete-bloc p { margin: 0; color: var(--gris); font-size: 1.1875rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px; border: 1px solid var(--ligne-forte); background: transparent; color: var(--texte); font: 500 1rem/1.2 var(--police); text-decoration: none; text-align: center; cursor: pointer; }
.btn:hover { border-color: var(--texte); }
.btn-or { border-color: var(--or); background: var(--or); color: #0a0a0a; font-weight: 600; }
.btn-or:hover { border-color: var(--texte); background: var(--texte); }
.btn[disabled] { opacity: .6; cursor: wait; }

/* Navigation */
.haut { position: sticky; top: 0; z-index: 20; background: var(--noir); border-bottom: 1px solid var(--ligne); }
.haut-barre { display: flex; align-items: center; gap: 24px; max-width: 1360px; min-height: 68px; margin-inline: auto; padding: 8px var(--marge); }
.haut img { width: 96px; height: auto; }
.haut nav { display: flex; gap: clamp(16px, 2.4vw, 32px); margin-left: auto; }
.haut nav a { color: var(--gris); text-decoration: none; font-size: 1rem; font-weight: 500; }
.haut nav a:hover { color: var(--texte); }
.haut .btn { min-height: 44px; padding: 8px 20px; }

/* Héros */
.heros { padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px); }
.heros-grille { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.pastille { display: block; margin-bottom: 20px; color: var(--gris); font-size: 1rem; }
.pastille b { color: var(--or); font-weight: 600; }
.accroche { margin: 0 0 22px; color: var(--gris); font-size: 1.1875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.compare { position: relative; overflow: hidden; aspect-ratio: 16 / 8; background: #000; --pos: 50%; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.compare .avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare .barre { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--texte); pointer-events: none; }
.compare .poignee { position: absolute; top: 50%; left: 50%; width: 40px; height: 56px; margin: -28px -20px; display: grid; place-items: center; background: var(--texte); color: #0a0a0a; font-weight: 600; letter-spacing: .08em; }
.compare input:focus-visible ~ .barre .poignee { outline: 3px solid var(--or); outline-offset: 2px; }
.puce { position: absolute; bottom: 0; padding: 7px 12px; background: var(--noir); font-size: .9375rem; font-weight: 500; pointer-events: none; }
.compare .e-avant { left: 0; }
.compare .e-apres { right: 0; }

/* Réalisations: wide shots for whole cars, tall shots for details, captions underneath */
.galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(10px, 1.3vw, 18px); margin: 0; padding: 0; list-style: none; }
.galerie li { background: none; }
.galerie .large { grid-column: span 6; }
.galerie .haute { grid-column: span 3; }
.galerie img { width: 100%; height: auto; background: var(--surface); }
.galerie .large img { aspect-ratio: 3 / 2; }
.galerie .haute img { aspect-ratio: 4 / 5; }
.galerie .puce { position: static; display: block; padding: 10px 0 0; background: none; color: var(--gris); border-top: 0; }

/* Forfaits: three ruled columns, like a printed price list */
.forfaits-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 44px); }
.forfaits-tete .entete-bloc { margin: 0; }
.segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ligne-forte); }
.segment button { min-height: 44px; padding: 8px 18px; border: 0; border-right: 1px solid var(--ligne-forte); background: transparent; color: var(--gris); font: 500 1rem/1.2 var(--police); cursor: pointer; }
.segment button:last-child { border-right: 0; }
.segment button:hover { color: var(--texte); }
.segment button[aria-pressed="true"] { background: var(--texte); color: #0a0a0a; }
.forfaits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ligne-forte); }
.forfait { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 2.4vw, 32px) clamp(18px, 2.2vw, 32px) 8px; border-left: 1px solid var(--ligne); }
.forfait:first-child { border-left: 0; padding-left: 0; }
.forfait:last-child { padding-right: 0; }
.forfait-3 { border-top: 3px solid var(--or); margin-top: -2px; }
.etiquette { margin: 0 0 8px; color: var(--or); font-size: .9375rem; font-weight: 500; }
.forfait .resume { margin: 8px 0 0; color: var(--gris); }
.prix { display: grid; gap: 2px; padding-block: 16px; border-block: 1px solid var(--ligne); }
.prix small { color: var(--gris); font-size: .9375rem; }
.prix strong { font-size: clamp(2.5rem, 3.8vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.forfait h4 { margin: 0 0 8px; color: var(--gris); font-size: .9375rem; font-weight: 500; }
.forfait ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.forfait li { position: relative; padding-left: 18px; line-height: 1.35; }
.forfait li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--or); }
.services { display: grid; gap: 20px; }
.forfait .btn { margin-top: auto; }

/* Demande */
.demande-bloc { background: var(--surface); border: 1px solid var(--ligne); }
.demande { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.etapes { display: grid; gap: 36px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 14px; font-size: 1.1875rem; font-weight: 600; }
legend span { color: var(--gris); font-weight: 400; }
.choix { display: grid; gap: 8px; }
.choix-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix label { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--ligne-forte); background: var(--noir); line-height: 1.25; cursor: pointer; }
.choix label:hover { border-color: var(--texte); }
.choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choix label:has(input:checked) { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.choix label:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }
.choix label:has(input:disabled) { color: var(--gris); cursor: default; border-color: var(--ligne); border-style: dashed; }
.montant { color: var(--or); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.champ { display: grid; gap: 7px; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-size: 1rem; font-weight: 500; }
.champ label span { color: var(--gris); font-weight: 400; }
input[type="text"], input[type="tel"], select, textarea { width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid var(--ligne-forte); background: var(--noir); color: var(--texte); font: 400 1rem/1.4 var(--police); }
textarea { min-height: 112px; resize: vertical; }
select option { background: var(--noir); }
::placeholder { color: #807f7a; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--or); outline-offset: -1px; }
.piege { position: absolute; left: -9999px; }
.resume-offre { position: sticky; top: 92px; display: grid; gap: 18px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--or); background: var(--noir); }
.resume-offre h3 { font-size: 1.1875rem; }
.resume-offre dl { display: grid; gap: 8px; margin: 0; }
.resume-offre dl div { display: flex; justify-content: space-between; gap: 16px; }
.resume-offre dt { color: var(--gris); }
.resume-offre dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.total { padding-top: 16px; border-top: 1px solid var(--ligne); }
.total small { display: block; color: var(--gris); font-size: .9375rem; }
.total strong { display: block; font-size: clamp(2.3rem, 4vw, 3.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total p { margin: 4px 0 0; color: var(--gris); font-size: .9375rem; }
.resume-offre .btn { width: 100%; }
.note { margin: 0; color: var(--gris); font-size: .9375rem; line-height: 1.45; }
.retour { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ligne-forte); }
.retour p { margin: 0; }
[hidden] { display: none !important; }

/* Avis: ruled columns, no boxes */
.avis-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 44px); }
.note-google { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.note-google strong { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.etoiles { color: var(--or); letter-spacing: .1em; }
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-forte); }
.avis li { display: flex; flex-direction: column; gap: 14px; padding: 24px clamp(18px, 2.2vw, 32px) 0; border-left: 1px solid var(--ligne); }
.avis li:first-child { border-left: 0; padding-left: 0; }
.avis blockquote { flex: 1; margin: 0; font-size: 1.1875rem; line-height: 1.45; }
.avis cite { color: var(--gris); font-style: normal; }

/* À savoir */
.savoir { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(24px, 4vw, 64px); }
.savoir h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.savoir ul { margin: 0; padding: 0; list-style: none; }
.savoir li { padding: 16px 0; border-top: 1px solid var(--ligne); font-size: 1.125rem; }
.savoir li:first-child { border-top: 0; padding-top: 0; }

footer { padding-block: 36px; border-top: 1px solid var(--ligne); color: var(--gris); font-size: .9375rem; }
footer .contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
footer img { width: 148px; height: auto; }
footer p { margin: 0; }
footer a { text-decoration: none; color: var(--texte); }
footer a:hover { color: var(--or); }

.barre-mobile { display: none; }

@media (max-width: 1020px) {
  .haut nav { display: none; }
  .heros-grille { grid-template-columns: minmax(0, 1fr); }
  .compare { aspect-ratio: 4 / 3; }
  .demande, .savoir { grid-template-columns: minmax(0, 1fr); }
  .forfaits { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .forfait, .forfait:first-child, .forfait:last-child { padding: 28px 0 36px; border-left: 0; border-top: 1px solid var(--ligne-forte); }
  .forfait-3 { border-top: 3px solid var(--or); margin-top: 0; }
  .forfait .btn { margin-top: 0; }
  .resume-offre { position: static; }
  .avis { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .avis li, .avis li:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid var(--ligne); }
  .galerie .haute { grid-column: span 6; }
  .galerie .large { grid-column: span 12; }
}
@media (min-width: 681px) and (max-width: 1020px) {
  .galerie .large { grid-column: span 6; }
  .galerie .haute { grid-column: span 3; }
}
@media (max-width: 680px) {
  body { padding-bottom: 60px; }
  .barre-mobile { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: 2fr 1fr; background: var(--noir); border-top: 1px solid var(--ligne-forte); }
  .barre-mobile .btn { min-height: 60px; border: 0; }
  .haut .btn { display: none; }
  .choix-3, .choix-2, .champs { grid-template-columns: minmax(0, 1fr); }
  .segment { display: flex; width: 100%; }
  .segment button { flex: 1 1 auto; padding-inline: 10px; }
  .compare { aspect-ratio: 1 / 1; }
  .puce { font-size: .875rem; }
  .galerie { row-gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Langue, FAQ, pages simples */
.langue { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; color: var(--gris); font-weight: 600; text-decoration: none; }
.langue:hover { color: var(--texte); }
.haut-barre .langue { margin-left: 8px; }
@media (max-width: 1020px) { .haut-barre .langue { margin-left: auto; } }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: 0; }
.faq div { padding: 22px 0; border-top: 1px solid var(--ligne); }
.faq dt { margin-bottom: 8px; font-size: 1.1875rem; font-weight: 600; }
.faq dd { margin: 0; color: var(--gris); }
.a-completer { display: inline-block; padding: 2px 8px; border: 1px dashed var(--or); color: var(--or); font-weight: 500; }
.note a { color: var(--texte); }
.page-simple { padding-block: clamp(48px, 7vw, 96px); }
.page-simple .contenu { max-width: 820px; }
.page-simple h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 20px; }
.page-simple h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--texte); margin: 40px 0 10px; }
.page-simple p, .page-simple li { color: var(--gris); }
.page-simple ul { padding-left: 1.2em; }
.page-simple .actions { margin-top: 28px; }
.page-simple strong { color: var(--texte); font-weight: 500; }
@media (max-width: 680px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* Engagements, parcours, témoin près du formulaire, appel final */
.atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ligne); }
.atouts li { display: grid; gap: 4px; padding: 20px clamp(14px, 1.8vw, 24px); border-left: 1px solid var(--ligne); }
.atouts li:first-child { border-left: 0; padding-left: 0; }
.atouts strong { font-weight: 600; }
.atouts span { color: var(--gris); font-size: .9375rem; line-height: 1.4; }
.parcours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-forte); }
.parcours li { display: grid; align-content: start; gap: 10px; padding: 24px clamp(18px, 2.2vw, 32px) 0; border-left: 1px solid var(--ligne); }
.parcours li:first-child { border-left: 0; padding-left: 0; }
.parcours .num { color: var(--or); font-size: clamp(2.4rem, 4vw, 3.25rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.parcours p { margin: 0; color: var(--gris); }
.temoin { display: grid; gap: 6px; margin: 0; padding-top: 16px; border-top: 1px solid var(--ligne); }
.temoin blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.temoin figcaption { color: var(--gris); font-size: .9375rem; }
.appel-final { background: var(--surface); }
.appel-final .contenu { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; }
.appel-final h2 { max-width: 18ch; }
.appel-final p { margin: 12px 0 0; color: var(--gris); font-size: 1.1875rem; }
@media (max-width: 1020px) {
  .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atouts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .atouts li:nth-child(n+3) { border-top: 1px solid var(--ligne); }
  .parcours { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .parcours li, .parcours li:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid var(--ligne); }
}
@media (max-width: 520px) {
  .atouts { grid-template-columns: minmax(0, 1fr); }
  .atouts li, .atouts li:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--ligne); }
  .atouts li:first-child { border-top: 0; }
}

/* Menu: liens sur ordinateur, bouton Menu sur tablette et téléphone */
.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ligne-forte); font-weight: 500; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary { background: var(--texte); color: #0a0a0a; border-color: var(--texte); }
.menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.haut .menu nav { position: absolute; right: 0; top: calc(100% + 9px); display: grid; min-width: 260px; margin: 0; background: var(--noir); border: 1px solid var(--ligne-forte); }
.haut .menu nav a { padding: 15px 18px; border-top: 1px solid var(--ligne); color: var(--texte); font-size: 1.0625rem; }
.haut .menu nav a:first-child { border-top: 0; }
.haut .menu nav a:hover { background: var(--surface); }
.haut .menu nav a[href^="tel"] { color: var(--or); }
@media (max-width: 1020px) {
  .menu { display: block; }
}
@media (max-width: 1180px) and (min-width: 1021px) {
  .haut .nav-principale { gap: 18px; }
  .haut .nav-principale a { font-size: .9375rem; }
}

/* Mouvement: entrée du héros, apparition au défilement, bande de services, survols */
@media (prefers-reduced-motion: no-preference) {
  .entree { animation: entree .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
  @keyframes entree { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  .atouts li { animation: entree .7s cubic-bezier(.2, .7, .2, 1) both; }
  .atouts li:nth-child(1) { animation-delay: .55s; }
  .atouts li:nth-child(2) { animation-delay: .63s; }
  .atouts li:nth-child(3) { animation-delay: .71s; }
  .atouts li:nth-child(4) { animation-delay: .79s; }

  @supports (animation-timeline: view()) {
    .entete-bloc, .galerie li, .forfait, .parcours li, .avis li, .faq > div, .savoir li, .appel-final .contenu > * {
      animation: apparait linear both; animation-timeline: view(); animation-range: entry 5% entry 55%;
    }
    @keyframes apparait { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
    .galerie li:nth-child(even), .forfait:nth-child(2), .parcours li:nth-child(2), .avis li:nth-child(2) { animation-range: entry 12% entry 62%; }
    .forfait:nth-child(3), .parcours li:nth-child(3), .avis li:nth-child(3) { animation-range: entry 19% entry 69%; }
  }

  .defile-piste { animation: defile 38s linear infinite; }
  .defile:hover .defile-piste { animation-play-state: paused; }
  @keyframes defile { to { transform: translateX(-50%); } }

  .btn { transition: background-color .2s, color .2s, border-color .2s; }
  .haut-barre, .haut img { transition: min-height .25s, width .25s; }
  .galerie img { transition: filter .35s; }
  .galerie li:hover img { filter: brightness(1.12) contrast(1.05); }
  .galerie .puce { transition: color .25s; }
  .forfait li::before { transition: width .3s; }
  .forfait:hover li::before { width: 14px; }
  .prix strong.change, .total strong.change { animation: flash .5s ease-out; }
  @keyframes flash { from { color: var(--or); } to { color: var(--texte); } }
}

.defile { overflow: hidden; border-block: 1px solid var(--ligne); background: var(--noir); }
.defile-piste { display: flex; width: max-content; }
.defile-groupe { display: flex; margin: 0; padding: 0; list-style: none; }
.defile-groupe li { display: flex; align-items: center; gap: 28px; padding: 18px 0 18px 28px; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.defile-groupe li::after { content: ""; width: 10px; height: 10px; background: var(--or); }
.galerie li { position: relative; }
.galerie li::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.galerie li:hover::after { transform: scaleX(1); }
.galerie li:hover .puce { color: var(--texte); }
.haut.compact .haut-barre { min-height: 56px; }
.haut.compact img { width: 82px; }
@media (prefers-reduced-motion: reduce) {
  .galerie li::after { transition: none; }
}

/* Chiffre clé du héros */
.chiffre { display: grid; gap: 4px; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ligne); }
.chiffre strong { color: var(--or); font-size: clamp(3.75rem, 7vw, 6rem); font-weight: 600; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chiffre span { color: var(--texte); font-size: 1.125rem; font-weight: 500; }

/* Symétrie: colonnes de largeur égale, séparées par un filet centré dans l'espace entre elles */
:root { --g: clamp(28px, 3.6vw, 56px); }
.forfaits, .avis, .parcours, .atouts { column-gap: var(--g); }
.forfait, .forfait:first-child, .forfait:last-child,
.avis li, .avis li:first-child,
.parcours li, .parcours li:first-child,
.atouts li, .atouts li:first-child { position: relative; padding-left: 0; padding-right: 0; border-left: 0; }
.forfait + .forfait::before, .avis li + li::before, .parcours li + li::before, .atouts li + li::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px; background: var(--ligne);
}
.forfait { padding-bottom: 8px; }
.atouts li { padding-block: 22px; }
.atouts li, .parcours li { text-align: left; }

/* Mises en page à deux parties égales */
.heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); }
.savoir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); }
.faq { column-gap: var(--g); }
.demande { column-gap: var(--g); }
.galerie { column-gap: clamp(12px, 1.4vw, 20px); row-gap: 28px; }

/* Même rythme vertical pour chaque section */
.bloc { padding-block: clamp(72px, 9vw, 120px); }
.entete-bloc { margin-bottom: clamp(36px, 4.5vw, 56px); }
.forfaits-tete, .avis-tete { margin-bottom: clamp(36px, 4.5vw, 56px); }
.forfaits-tete .entete-bloc, .avis-tete .entete-bloc { margin-bottom: 0; }

@media (max-width: 1020px) {
  .heros-grille, .savoir { grid-template-columns: minmax(0, 1fr); }
  .forfait + .forfait::before, .avis li + li::before, .parcours li + li::before { display: none; }
  .atouts li + li::before { display: none; }
  .atouts li:nth-child(even)::before { display: block; }
  .atouts li:nth-child(n+3) { border-top: 1px solid var(--ligne); }
}
@media (max-width: 520px) {
  .atouts li:nth-child(even)::before { display: none; }
  .atouts li + li { border-top: 1px solid var(--ligne); }
  .atouts li { padding-block: 14px; }
}


/* Vidéo en arrière-plan du haut de page */
.heros { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(84px, 11vw, 168px); }
.heros-fond { position: absolute; inset: 0; z-index: -1; background: #000 url("video-affiche-bureau.webp") center / cover no-repeat; }
.heros-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.heros-fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, .18) 40%, rgba(10, 10, 10, .55) 82%, var(--noir) 100%),
    linear-gradient(to right, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, .1) 55%, rgba(10, 10, 10, .4) 100%);
}
.heros .accroche { color: #e2e1dc; }
.heros .pastille { color: #d6d5cf; }
.heros .chiffre { border-bottom-color: rgba(255, 255, 255, .22); }
.heros .chiffre span { text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.heros h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.heros .heros-grille { margin-bottom: 0; }
.heros .btn:not(.btn-or) { background: rgba(10, 10, 10, .55); }
.heros-suite { padding-block: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px); }
@media (max-width: 760px) {
  .heros { padding-block: 64px 72px; }
  .heros-fond { background-image: url("video-affiche-mobile.webp"); }
  .heros-fond::after {
    background: linear-gradient(to bottom, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, .45) 45%, rgba(10, 10, 10, .75) 85%, var(--noir) 100%);
  }
}

/* Vidéo complète: texte à gauche, la vidéo verticale entière à droite sur un fond flouté */
.heros-suite { padding-top: 0; }
@media (min-width: 1021px) {
  .heros { min-height: min(56.25vw, 860px); display: flex; align-items: center; }
  .heros > .contenu { width: 100%; }
  .heros .heros-grille { grid-template-columns: minmax(0, 1fr); max-width: 50%; row-gap: 0; align-items: start; }
  .heros h1 { font-size: clamp(2.5rem, 4.4vw, 4.4rem); margin-bottom: 26px; }
  .heros .chiffre strong { font-size: clamp(3.25rem, 5.2vw, 5rem); }
  .heros-video { object-position: center; }
  .heros-fond::after {
    background:
      linear-gradient(to bottom, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0) 80%, var(--noir) 100%),
      linear-gradient(to right, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .55) 40%, rgba(10, 10, 10, 0) 58%);
  }
}
@media (max-width: 1020px) {
  .heros { padding-block: 72px 80px; }
  .heros-fond { background-image: url("video-affiche-mobile.webp"); }
  .heros-fond::after {
    background: linear-gradient(to bottom, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, .45) 45%, rgba(10, 10, 10, .75) 85%, var(--noir) 100%);
  }
}

/* Bouton pause / lecture de la vidéo */
.video-controle { position: absolute; right: var(--marge); bottom: 24px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .45); background: rgba(10, 10, 10, .55); cursor: pointer; }
.video-controle::before { content: ""; width: 12px; height: 14px; border-left: 4px solid var(--texte); border-right: 4px solid var(--texte); }
.video-controle.en-pause::before { width: 0; height: 0; border-right: 0; border-left: 13px solid var(--texte); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.video-controle:hover { border-color: var(--texte); }

/* Inspiré de la structure de down2detail.ca: histoire avec photo, marques, chiffres, photos des forfaits */
.pourquoi-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); align-items: center; }
.pourquoi-photo { margin: 0; }
.pourquoi-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; max-height: 640px; }
.pourquoi-texte { display: grid; gap: 18px; }
.pourquoi-texte .etiquette { margin: 0; }
.pourquoi-texte p { margin: 0; color: var(--gris); font-size: 1.125rem; }
.pourquoi-texte .actions { margin-top: 8px; }

.chiffres-bande { border-block: 1px solid var(--ligne); background: var(--surface); }
.chiffres-bande ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); margin: 0; padding: 0; list-style: none; }
.chiffres-bande li { position: relative; display: grid; gap: 6px; padding-block: clamp(32px, 4vw, 52px); text-align: center; }
.chiffres-bande li + li::before { content: ""; position: absolute; top: 28%; bottom: 28%; left: calc(var(--g) / -2); width: 1px; background: var(--ligne); }
.chiffres-bande strong { color: var(--or); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chiffres-bande span { color: var(--gris); }

.forfait-photo { margin: 0; }
.forfait-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.auteur { display: flex; align-items: center; gap: 12px; }
.initiale { width: 38px; height: 38px; display: grid; place-items: center; flex: none; background: var(--or); color: #0a0a0a; font-weight: 600; }

.appel-final .contenu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); row-gap: 24px; align-items: center; }
.appel-final .contenu > div:first-child { grid-column: 1; }
.appel-final .contenu > .actions { grid-column: 1; align-self: start; }
.appel-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.appel-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

@media (max-width: 1020px) {
  .pourquoi-grille, .appel-final .contenu { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pourquoi-photo img { aspect-ratio: 3 / 2; }
  .appel-photo { grid-column: 1; grid-row: auto; }
  .chiffres-bande ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres-bande li:nth-child(3)::before { display: none; }
  .chiffres-bande li:nth-child(n+3) { border-top: 1px solid var(--ligne); }
}

/* ===== Style inspiré d'agenceip.com : titres condensés géants, noir pur, bande dorée, étapes numérotées ===== */
@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --noir: #050505; --surface: #101010; --police: "Hanken Grotesk", "Segoe UI", system-ui, Arial, sans-serif; --titre: "Big Shoulders", "Arial Narrow", Impact, sans-serif; }
body { background: var(--noir); }
h1, h2, h3, .chiffre strong, .prix strong, .total strong, .parcours .num, .chiffres-bande strong, .note-google strong, .defile-groupe li, .manifeste p {
  font-family: var(--titre); text-transform: uppercase; font-weight: 800; letter-spacing: .005em;
}
h1 { font-size: clamp(3.2rem, 7.6vw, 7.25rem); line-height: .9; }
.heros h1 { font-size: clamp(3rem, 6.4vw, 6.25rem); }
h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .92; }
h3 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1; }
.entete-bloc h2 .accent, .manifeste span, .accent { color: var(--or); }
.etiquette, .forfait h4, .prix small, .total small, legend span, .pastille, .chiffre span, .atouts strong, .temoin figcaption {
  letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem;
}
.atouts strong { font-size: .9375rem; }
.chiffre strong { font-size: clamp(4.5rem, 8vw, 7.5rem); line-height: .85; }
.prix strong { font-size: clamp(3.4rem, 5vw, 4.5rem); line-height: .9; }
.total strong { font-size: clamp(3rem, 5vw, 4rem); }
.btn { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .875rem; }
.haut nav a { text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; font-weight: 600; }
.defile-groupe li { font-size: clamp(1.6rem, 3vw, 2.4rem); padding-block: 14px; }

/* Étapes « ÉTAPE 01 » */
.parcours .num { display: grid; gap: 4px; font-size: clamp(3.4rem, 6vw, 5rem); line-height: .85; }
.parcours .num small { font-family: var(--police); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--gris); }

/* Phrase manifeste */
.manifeste { padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--ligne); }
.manifeste p { margin: 0; max-width: 18ch; font-size: clamp(3rem, 8vw, 7.5rem); line-height: .9; }

/* Bande dorée pleine largeur (comme la bande couleur d'agenceip) */
.chiffres-bande { background: var(--or); border: 0; }
.chiffres-bande strong { color: #050505; font-size: clamp(3.6rem, 7vw, 6.5rem); line-height: .85; }
.chiffres-bande span { color: #050505; opacity: .78; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; font-weight: 700; }
.chiffres-bande li + li::before { background: rgba(5, 5, 5, .22); }
.chiffres-bande li:nth-child(n+3) { border-top-color: rgba(5, 5, 5, .22); }

/* Galerie avant / après */
.ap-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 18px); margin: 0; padding: 0; list-style: none; }
.ap-grille.replie li:nth-child(n+9) { display: none; }
.ap-lien { display: block; position: relative; overflow: hidden; background: var(--surface); }
.ap-lien img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: filter .3s; }
.ap-lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.ap-lien:hover::after, .ap-lien:focus-visible::after { transform: scaleX(1); }
.ap-lien:hover img { filter: brightness(1.08); }
.ap-actions { display: flex; justify-content: center; margin-top: 28px; }
.ap-actions [hidden] { display: none; }
.ap-boite { padding: 0; border: 1px solid var(--ligne-forte); background: var(--noir); max-width: min(92vw, 720px); max-height: 94vh; }
.ap-boite::backdrop { background: rgba(0, 0, 0, .86); }
.ap-boite img { display: block; width: 100%; height: auto; max-height: calc(94vh - 70px); object-fit: contain; }
.ap-boite .btn { width: 100%; border: 0; border-top: 1px solid var(--ligne-forte); }
@media (max-width: 1020px) { .ap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Anneau 3D avant / après ===== */
.ap-section { overflow: hidden; }
.ap-mise { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--g); align-items: center; }
.ap-texte { display: grid; gap: 18px; position: relative; z-index: 2; }
.ap-texte p { margin: 0; color: var(--gris); font-size: 1.125rem; max-width: 34ch; }
.ap-aide { color: var(--or) !important; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem !important; font-weight: 600; }
.anneau { --w: clamp(84px, 7.6vw, 116px); --r: calc(var(--w) * 3.55); position: relative; height: calc(var(--w) * 3.1); perspective: 1500px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; }
.anneau:active { cursor: grabbing; }
.anneau-rotor { position: absolute; left: 50%; top: 50%; width: var(--w); height: calc(var(--w) * 1.25); margin: calc(var(--w) * -0.625) 0 0 calc(var(--w) / -2); padding: 0; list-style: none; transform-style: preserve-3d; transform: rotateX(-7deg); }
.anneau-rotor li { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); }
.anneau-rotor a { display: block; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .14); background: var(--surface); -webkit-user-drag: none; }
.anneau-rotor img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: filter .3s; }
.anneau-rotor a:hover img, .anneau-rotor a:focus-visible img { filter: brightness(1.15); }
.anneau-rotor a:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
@media (max-width: 1020px) {
  .ap-mise { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .anneau { --w: clamp(72px, 19vw, 104px); height: calc(var(--w) * 3.4); }
}

/* ===== Plis : forfaits et FAQ ===== */
.inclus { border-top: 1px solid var(--ligne); }
.inclus summary, .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 600; }
.inclus summary { text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: var(--texte); }
.inclus summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.inclus summary::after, .faq summary::after { content: "+"; color: var(--or); font-size: 1.5rem; line-height: 1; transition: transform .25s; }
.inclus[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.inclus .services { padding-bottom: 10px; }
.faq details { border-top: 1px solid var(--ligne); }
.faq summary { font-size: 1.1875rem; }
.faq details p { margin: 0 0 20px; color: var(--gris); max-width: 60ch; }

/* ===== Mouvement en plus ===== */
.progression { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 3px; background: var(--or); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.mot { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .mot { animation: mot .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.1s + var(--k) * 55ms); }
  @keyframes mot { from { opacity: 0; transform: translateY(.45em) rotate(2deg); } to { opacity: 1; transform: none; } }
  .heros h1.entree { animation: none; }
  .forfait-photo { overflow: hidden; }
  .forfait-photo img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .forfait:hover .forfait-photo img { transform: scale(1.06); }
  @supports (animation-timeline: view()) {
    h2 { animation: titre linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    @keyframes titre { from { clip-path: inset(0 0 100% 0); transform: translateY(30px); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
    .manifeste p { animation: titre linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}

/* Anneau plus penché et plus vivant, boutons sur une ligne */
.anneau { --w: clamp(92px, 8.6vw, 132px); --r: calc(var(--w) * 3.55); height: calc(var(--w) * 3.9); perspective: 1300px; }
.anneau-rotor { transform: rotateZ(-11deg) rotateX(-16deg); }
.anneau-rotor a { transition: transform .3s; }
.anneau-rotor a:hover { transform: scale(1.08); }
.ap-texte .btn { white-space: nowrap; }
.ap-aide { white-space: nowrap; }
@media (max-width: 1020px) { .anneau { --w: clamp(76px, 20vw, 108px); height: calc(var(--w) * 4.1); } }

/* Clic sur une photo de l'anneau : éclat doré puis ouverture en grand */
.anneau-rotor li { will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  .anneau-rotor li.choisie a { animation: eclat .55s cubic-bezier(.2, .9, .3, 1.3); }
  @keyframes eclat {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(207, 180, 124, 0); }
    45% { transform: scale(1.45); box-shadow: 0 0 0 4px var(--or), 0 0 60px 10px rgba(207, 180, 124, .55); }
    100% { transform: scale(1.15); box-shadow: 0 0 0 2px var(--or), 0 0 30px 4px rgba(207, 180, 124, .3); }
  }
  .ap-boite[open] { animation: boite-entre .5s cubic-bezier(.2, .9, .25, 1.15); }
  .ap-boite[open]::backdrop { animation: voile .4s ease-out; }
  .ap-boite[open] img { animation: photo-entre .7s cubic-bezier(.2, .8, .2, 1); }
  .ap-boite.sort { animation: boite-sort .28s ease-in forwards; }
  @keyframes boite-entre { from { opacity: 0; transform: scale(.55) rotate(-6deg) translateY(40px); } to { opacity: 1; transform: none; } }
  @keyframes boite-sort { to { opacity: 0; transform: scale(.8) rotate(3deg); } }
  @keyframes photo-entre { from { clip-path: inset(50% 0 50% 0); filter: brightness(2); } to { clip-path: inset(0); filter: none; } }
  @keyframes voile { from { background: rgba(0, 0, 0, 0); } }
}

/* Forfaits : photos au même niveau, trait doré du forfait 3 sans décaler la colonne */
.forfait-photo img { aspect-ratio: 3 / 2; object-position: center; }
.forfait-3 { border-top: 0; margin-top: 0; }
.forfait-3::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--or); }
@media (max-width: 1020px) { .forfait-3 { border-top: 1px solid var(--ligne-forte); } }

/* Anneau en entier : texte au-dessus, anneau sur toute la largeur, rien de coupé */
.ap-section { overflow: visible; }
.ap-mise { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.ap-texte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); align-items: end; }
.ap-texte h2 { grid-row: 1 / span 3; align-self: end; }
.ap-texte p, .ap-texte .actions, .ap-texte .ap-aide { grid-column: 2; }
.anneau { width: 100%; overflow: visible; }
@media (max-width: 1020px) {
  .ap-texte { grid-template-columns: minmax(0, 1fr); }
  .ap-texte h2, .ap-texte p, .ap-texte .actions, .ap-texte .ap-aide { grid-column: 1; grid-row: auto; }
}

/* Logo au centre de l'anneau : les photos de devant passent devant, celles de derrière passent derrière */
.anneau-rotor li.anneau-logo { inset: auto; left: 50%; top: 50%; width: calc(var(--w) * 3); height: calc(var(--w) * 3 * 0.52); margin: calc(var(--w) * -0.78) 0 0 calc(var(--w) * -1.5); transform: none; opacity: 1; pointer-events: none; }
.anneau-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 28px rgba(207, 180, 124, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .anneau-logo img { animation: logo-pulse 3.2s ease-in-out infinite; }
  @keyframes logo-pulse { 0%, 100% { filter: drop-shadow(0 0 18px rgba(207, 180, 124, .25)); } 50% { filter: drop-shadow(0 0 42px rgba(207, 180, 124, .6)); } }
}

/* Logo central plus vivant : reflet qui balaie le logo, saut quand on choisit une photo */
.anneau-rotor li.anneau-logo { transform-style: preserve-3d; }
.anneau-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 225, .95) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url("logo-complet.png") center / contain no-repeat; mask: url("logo-complet.png") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .anneau-logo::after { animation: reflet 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
  @keyframes reflet { 0%, 35% { background-position: 160% 0; } 75%, 100% { background-position: -60% 0; } }
  .anneau-logo.saute img { animation: saute .7s cubic-bezier(.2, .9, .3, 1.4), logo-pulse 3.2s ease-in-out infinite; }
  @keyframes saute { 0% { transform: scale(1); } 40% { transform: scale(1.28) rotate(-4deg); } 100% { transform: scale(1); } }
}

/* Contours dorés des photos, logo central à la bonne taille et proportions */
.anneau-rotor a { border: 2px solid var(--or); box-shadow: 0 0 0 1px rgba(5, 5, 5, .9), 0 10px 30px rgba(0, 0, 0, .55); }
.anneau-rotor a:hover, .anneau-rotor a:focus-visible { border-color: #f1dfb3; }
.anneau-rotor li.anneau-logo { width: calc(var(--w) * 2.3); height: calc(var(--w) * 2.3 * 0.4545); margin: calc(var(--w) * -0.5227) 0 0 calc(var(--w) * -1.15); }
.anneau-logo img { width: 100%; height: 100%; object-fit: contain; }
.anneau-logo::after { -webkit-mask-image: url("logo.png"); mask-image: url("logo.png"); }

/* Nouveau clic : la photo s'envole de l'anneau et grandit en plein écran, puis y retourne */
.ap-boite img { width: min(92vw, 620px, calc((94vh - 70px) * .8)); height: auto; aspect-ratio: 4 / 5; }
.ap-boite.vol { background: transparent; border-color: transparent; overflow: visible; animation: none !important; }
.ap-boite.vol img { animation: none !important; border: 2px solid var(--or); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); will-change: transform; }
.ap-boite.vol::backdrop { background: rgba(5, 5, 5, .88); }
.ap-boite.vol .btn { background: var(--noir); border: 1px solid var(--ligne-forte); margin-top: 10px; }
.anneau-rotor li.envolee a { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ap-boite.vol .btn { animation: bouton-arrive .35s .5s both; }
  .ap-boite.retour .btn { opacity: 0; transition: opacity .15s; }
  .ap-boite.retour::backdrop { animation: voile-part .5s ease-in forwards; }
  @keyframes bouton-arrive { from { opacity: 0; transform: translateY(12px); } }
  @keyframes voile-part { to { background: rgba(5, 5, 5, 0); } }
}

/* Contour des avant / après : argent, comme le Z du logo, au lieu du doré */
.anneau-rotor a { border: 2px solid #d4d6d9; box-shadow: 0 0 0 1px rgba(5, 5, 5, .9), 0 10px 30px rgba(0, 0, 0, .55); }
.anneau-rotor a:hover, .anneau-rotor a:focus-visible { border-color: #ffffff; }
.ap-boite.vol img { border-color: #d4d6d9; }

/* Photos avant / après : coins arrondis et contour plus fin */
.anneau-rotor a { border-width: 1px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.anneau-rotor img { border-radius: 11px; }
.ap-boite.vol img { border-width: 1px; border-radius: 16px; }

/* Menu qui suit le défilement */
.haut .nav-principale a { position: relative; padding-block: 6px; transition: color .25s; }
.haut .nav-principale a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.haut .nav-principale a.actif { color: var(--texte); }
.haut .nav-principale a.actif::after { transform: scaleX(1); }
.haut .menu nav a.actif { color: var(--or); background: var(--surface); }

/* ===== Forfaits refaits : en-tête centré, 3 cartes identiques alignées ligne par ligne ===== */
.offres-tete { display: grid; justify-items: center; gap: 16px; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.offres-tete p { margin: 0; color: var(--gris); font-size: 1.125rem; }
.offres-tete .segment { margin-top: 8px; }
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); column-gap: var(--g); }
.offre { position: relative; display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 0 0 4px; border-top: 1px solid var(--ligne-forte); }
.offre-vedette { border-top-color: var(--or); }
.offre-vedette::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--or); }
.offre + .offre::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px; background: var(--ligne); }
.offre-photo { position: relative; margin: 24px 0 22px; overflow: hidden; }
.offre-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.offre-badge { position: absolute; top: 12px; left: 12px; padding: 6px 10px; background: var(--or); color: #050505; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.offre-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.offre-num { font-family: var(--titre); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--or); }
.offre-duree { color: var(--gris); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.offre h3 { margin: 8px 0 6px; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: .95; }
.offre-resume { margin: 0; color: var(--gris); }
.offre-prix { display: grid; gap: 4px; margin-top: 22px; padding-block: 18px; border-block: 1px solid var(--ligne); }
.offre-prix small { color: var(--gris); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.offre-prix strong { font-family: var(--titre); font-weight: 800; font-size: clamp(3.4rem, 5vw, 4.5rem); line-height: .9; font-variant-numeric: tabular-nums; }
.offre-points { display: grid; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.offre-points li { position: relative; padding-left: 26px; line-height: 1.35; }
.offre-points li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 8px; border-left: 2px solid var(--or); border-bottom: 2px solid var(--or); transform: rotate(-45deg); }
.offre .inclus { align-self: start; }
.offre .btn { align-self: end; margin-top: 18px; width: 100%; }
.offre .services { display: grid; gap: 18px; padding-bottom: 12px; }
.offre .services h4 { margin: 0 0 8px; color: var(--gris); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.offre .services ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.offre .services li { position: relative; padding-left: 18px; color: var(--gris); }
.offre .services li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--or); }
@media (prefers-reduced-motion: no-preference) {
  .offre-photo img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .offre:hover .offre-photo img { transform: scale(1.06); }
  @supports (animation-timeline: view()) {
    .offre { animation: apparait linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
  }
}
@media (max-width: 1020px) {
  .offres { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 40px; }
  .offre { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
  .offre + .offre::before { display: none; }
}

/* Phrase sous l'anneau */
.anneau-legende { margin: 4px auto 0; text-align: center; color: var(--gris); font-size: 1.0625rem; letter-spacing: .02em; }
.anneau-legende::before, .anneau-legende::after { content: ""; display: inline-block; width: 36px; height: 1px; margin: 0 14px; vertical-align: middle; background: var(--or); }

/* Pointeur discret : mini logo ZK pour se déplacer, main habituelle sur ce qui se clique */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("curseur-zk.png") 1 1, auto; }
  a, button, summary, label, select, [role="button"], .btn, .langue, .haut nav a, .menu summary, .inclus summary, .faq summary, .segment button, .choix label, .ap-lien, .video-controle { cursor: pointer; }
  .anneau { cursor: grab; }
  .anneau:active { cursor: grabbing; }
  input[type="text"], input[type="tel"], textarea { cursor: text; }
}

/* ===== Forfaits en carrousel sur téléphone et tablette : on glisse au lieu de défiler ===== */
@media (max-width: 1020px) {
  .offres {
    display: flex; align-items: flex-start; gap: 16px;
    margin-inline: calc(var(--marge) * -1); padding: 4px var(--marge) 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .offres::-webkit-scrollbar { display: none; }
  .offre { flex: 0 0 min(86%, 440px); scroll-snap-align: start; scroll-snap-stop: always; animation: none !important; }
  .offre-photo { margin-top: 18px; }
}

/* Carrousel des forfaits : navigation et indice de glissement */
.offres-nav, .offres-glisser { display: none; }
@media (max-width: 1020px) {
  .offres-glisser { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; color: var(--texte); font-size: .875rem; font-weight: 600; text-align: left; }
  .offres-main { display: inline-grid; place-items: center; flex: none; width: 34px; height: 22px; color: var(--or); }
  .offres-main svg { width: 32px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .offres-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
  .offres-points { display: flex; align-items: center; gap: 8px; }
  .offres-points button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--ligne-forte); border-radius: 50%; background: transparent; cursor: pointer; transition: width .25s, background .25s, border-color .25s; }
  .offres-points button[aria-current="true"] { width: 28px; border-radius: 5px; background: var(--or); border-color: var(--or); }
  .offres-fleche { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--or); border-radius: 50%; background: transparent; color: var(--or); cursor: pointer; transition: opacity .2s, background .2s, color .2s; }
  .offres-fleche:active { background: var(--or); color: #050505; }
  .offres-fleche:disabled { opacity: .3; border-color: var(--ligne-forte); color: var(--gris); }
  .offres-fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .offres-compteur { min-width: 3em; color: var(--gris); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
}
@media (max-width: 1020px) and (prefers-reduced-motion: no-preference) {
  .offres-main svg { animation: va-vient 1.6s ease-in-out infinite; }
  .offres-glisser.compris .offres-main svg { animation: none; }
  .offres-invite .offre { animation: invite 1.9s cubic-bezier(.45, 0, .2, 1) both !important; }
  @keyframes va-vient { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
  @keyframes invite { 0% { transform: none; } 30% { transform: translateX(-34%); } 55% { transform: translateX(-34%); } 100% { transform: none; } }
}

/* ===== Carrousel des forfaits, finition style Apple (téléphone et tablette) ===== */
@media (max-width: 1020px) {
  .offres { gap: 14px; padding-block: 6px 14px; }
  .offre {
    flex-basis: min(84%, 420px);
    padding: 0 20px 20px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px;
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
    overflow: hidden; isolation: isolate;
    transform: scale(.94); opacity: .5;
    transition: transform .5s cubic-bezier(.25, .1, .25, 1), opacity .5s ease, border-color .5s ease;
  }
  .offre.est-active { transform: none; opacity: 1; }
  .offre-vedette { border-color: rgba(207, 180, 124, .45); }
  .offre-vedette::after, .offre + .offre::before { display: none; }
  .offre-photo { margin: 0 -20px 18px; border-radius: 0; }
  .offre-photo img { aspect-ratio: 16 / 10; }
  .offre-badge { top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; font-size: .6875rem; background: rgba(207, 180, 124, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .offre-num { font-size: 2.2rem; }
  .offre-prix { margin-top: 16px; padding-block: 14px; border-color: rgba(255, 255, 255, .08); }
  .offre .inclus { border-top-color: rgba(255, 255, 255, .08); }
  .offre .btn { min-height: 50px; border-radius: 999px; }

  /* Indice discret, comme une légende Apple */
  .offres-glisser { gap: 8px; margin-bottom: 16px; color: var(--gris); font-size: .8125rem; font-weight: 500; letter-spacing: .01em; transition: opacity .6s ease; }
  .offres-glisser.compris { opacity: .45; }
  .offres-main { width: 28px; color: var(--texte); }

  /* Contrôles : pastille de points en verre dépoli et boutons ronds */
  .offres-nav { gap: 10px; margin-top: 18px; }
  .offres-points { gap: 9px; padding: 13px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
  .offres-points button { width: 8px; height: 8px; border: 0; background: rgba(255, 255, 255, .38); transition: width .4s cubic-bezier(.25, .1, .25, 1), background .4s; }
  .offres-points button[aria-current="true"] { width: 26px; border-radius: 4px; background: #f5f5f7; }
  .offres-fleche { width: 36px; height: 36px; border: 0; background: rgba(255, 255, 255, .1); color: #f5f5f7; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background .2s, opacity .3s, transform .2s; }
  .offres-fleche:active { background: rgba(255, 255, 255, .22); color: #f5f5f7; transform: scale(.92); }
  .offres-fleche:disabled { opacity: .35; color: #f5f5f7; }
  .offres-fleche svg { width: 16px; height: 16px; stroke-width: 2.4; }
  .offres-compteur { display: none; }
}
@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .offre { transform: none; transition: none; }
}
@media (max-width: 1020px) {
  /* Sélecteur de véhicule en contrôle segmenté arrondi */
  .offres-tete .segment { flex-wrap: nowrap; gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .09); }
  .offres-tete .segment button { min-height: 38px; border: 0; border-radius: 999px; font-size: .875rem; transition: background .3s, color .3s; }
  .offres-tete .segment button[aria-pressed="true"] { background: #f5f5f7; color: #0a0a0a; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
  .offres-glisser { justify-content: center; text-align: center; }
}

/* =====================================================================
   Finition style Apple pour tout le site : tuiles arrondies, verre dépoli,
   boutons en pastille, sections séparées par l'espace plutôt que par des lignes.
   ===================================================================== */
:root {
  --noir: #000;
  --texte: #f5f5f7;
  --gris: #a1a1a6;
  --ligne: rgba(255, 255, 255, .08);
  --ligne-forte: rgba(255, 255, 255, .16);
  --tuile: #161618;
  --tuile-haut: #1c1c1e;
  --rayon: 24px;
  --rayon-petit: 14px;
  --douceur: cubic-bezier(.25, .1, .25, 1);
}
body { background: #000; }

/* Sections : de l'espace, pas de filets */
.bloc, .manifeste, footer { border-top: 0; }
.defile { border-block: 0; background: transparent; }

/* En-tête en verre dépoli */
.haut { background: rgba(0, 0, 0, .72); border-bottom: 1px solid var(--ligne); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.haut nav a { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 500; }
.haut .nav-principale a::after { height: 2px; border-radius: 2px; }
.menu summary { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.menu[open] summary { background: #f5f5f7; color: #000; }
.haut .menu nav { overflow: hidden; border: 1px solid var(--ligne); border-radius: 18px; background: rgba(28, 28, 30, .86); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
.haut .menu nav a { border-top-color: var(--ligne); }
.haut .menu nav a:hover, .haut .menu nav a.actif { background: rgba(255, 255, 255, .06); }

/* Boutons en pastille */
.btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--douceur); }
.btn:not(.btn-or) { border-color: transparent; background: rgba(255, 255, 255, .1); }
.btn:not(.btn-or):hover { border-color: transparent; background: rgba(255, 255, 255, .18); }
.btn-or:hover { background: #dcc493; border-color: #dcc493; }
.btn:active { transform: scale(.97); }
.video-controle { border-radius: 50%; border-color: rgba(255, 255, 255, .25); background: rgba(30, 30, 30, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Contrôle segmenté arrondi partout */
.segment { flex-wrap: nowrap; gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .09); }
.segment button { min-height: 40px; border: 0; border-radius: 999px; transition: background .3s var(--douceur), color .3s; }
.segment button[aria-pressed="true"] { background: #f5f5f7; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* Engagements sous la vidéo : quatre tuiles */
.atouts { gap: 12px; border-bottom: 0; }
.atouts li, .atouts li:first-child { padding: 22px 22px !important; border: 0 !important; border-radius: 20px; background: var(--tuile); }
.atouts li::before, .atouts li + li::before { display: none !important; }

/* Forfaits : cartes arrondies sur toutes les tailles d'écran */
.offre { padding: 0 24px 24px; border: 1px solid var(--ligne); border-radius: 26px; background: linear-gradient(180deg, var(--tuile-haut) 0%, #111 100%); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); overflow: hidden; isolation: isolate; }
.offre-vedette { border-color: rgba(207, 180, 124, .45); }
.offre-vedette::after, .offre + .offre::before { display: none; }
.offre-photo { margin: 0 -24px 20px; }
.offre-badge { top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; font-size: .6875rem; }
.offre-prix { border-color: var(--ligne); }
.offre .inclus { border-top-color: var(--ligne); }
.offres { column-gap: 20px; }

/* Bande de chiffres : un panneau doré arrondi */
.chiffres-bande { background: transparent; padding-block: clamp(8px, 2vw, 24px); }
.chiffres-bande ul { padding-inline: clamp(12px, 3vw, 40px); border-radius: 32px; background: linear-gradient(135deg, #d8bf88 0%, #c9ad72 100%); }

/* Étapes : trois tuiles */
.parcours { gap: 16px; border-top: 0; }
.parcours li, .parcours li:first-child { padding: clamp(24px, 2.6vw, 34px) !important; border: 0 !important; border-radius: var(--rayon); background: var(--tuile); }
.parcours li::before, .parcours li + li::before { display: none !important; }

/* Formulaire de demande */
.choix label { border-color: var(--ligne-forte); border-radius: var(--rayon-petit); background: var(--tuile); transition: border-color .2s, box-shadow .2s, background .2s; }
.choix label:hover { border-color: rgba(255, 255, 255, .32); }
.choix label:has(input:checked) { border-color: var(--or); background: rgba(207, 180, 124, .08); }
input[type="text"], input[type="tel"], select, textarea { border-color: var(--ligne-forte); border-radius: var(--rayon-petit); background: var(--tuile); transition: border-color .2s, box-shadow .2s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--or); box-shadow: 0 0 0 4px rgba(207, 180, 124, .22); }
.resume-offre { border: 1px solid rgba(207, 180, 124, .35); border-radius: 28px; background: linear-gradient(180deg, var(--tuile-haut) 0%, #111 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.total { border-top-color: var(--ligne); }
.retour { border-radius: var(--rayon-petit); border-color: var(--ligne-forte); background: var(--tuile); }
.temoin { border-top-color: var(--ligne); }

/* Avis : cartes */
.avis { gap: 16px; border-top: 0; }
.avis li, .avis li:first-child { padding: clamp(24px, 2.6vw, 32px) !important; border: 0 !important; border-radius: var(--rayon); background: var(--tuile); }
.avis li::before, .avis li + li::before { display: none !important; }

/* Questions : liste groupée comme les Réglages d'iOS */
.faq { gap: 12px var(--g); align-items: start; }
.faq details { padding: 0 22px; border: 0; border-radius: 18px; background: var(--tuile); transition: background .25s; }
.faq details[open] { background: var(--tuile-haut); }
.faq summary { padding-block: 20px; }
.faq details p { margin-bottom: 22px; }

/* Appel final : un grand panneau arrondi */
.appel-final { background: transparent; }
.appel-final .contenu { width: calc(100% - 2 * var(--marge)); max-width: calc(1360px - 2 * var(--marge)); padding: clamp(28px, 4.5vw, 64px); border-radius: 36px; background: linear-gradient(180deg, var(--tuile-haut) 0%, #0e0e0f 100%); border: 1px solid var(--ligne); }
.appel-photo { overflow: hidden; border-radius: var(--rayon); }

/* Photo agrandie de l'anneau */
.ap-boite img { border-radius: 20px; }

/* Barre du bas sur téléphone : flottante, en verre dépoli */
@media (max-width: 1020px) {
  .barre-mobile { inset: auto 12px max(12px, env(safe-area-inset-bottom)); gap: 8px; padding: 6px; border: 1px solid var(--ligne); border-radius: 999px; background: rgba(28, 28, 30, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); }
  .barre-mobile .btn { min-height: 50px; border-radius: 999px; }
  .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atouts li + li, .atouts li:nth-child(n+3) { border-top: 0 !important; }
  .parcours, .avis { gap: 12px; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .chiffres-bande ul { border-radius: 28px; }
  .chiffres-bande li:nth-child(n+3) { border-top: 1px solid rgba(5, 5, 5, .16); }
}
@media (max-width: 560px) {
  .atouts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .atouts li, .atouts li:first-child { padding: 16px 18px !important; border-radius: 18px; }
  .appel-final .contenu { border-radius: 28px; }
}

/* ===== Coins droits partout, sauf dans le carrousel des forfaits et l'anneau avant / après ===== */
.btn, .menu summary, .haut .menu nav, .video-controle, .segment, .segment button,
.atouts li, .chiffres-bande ul, .parcours li, .choix label,
input[type="text"], input[type="tel"], select, textarea,
.resume-offre, .retour, .avis li, .faq details, .appel-final .contenu, .appel-photo, .ap-boite img,
.barre-mobile, .barre-mobile .btn, .haut .nav-principale a::after { border-radius: 0 !important; }
/* Dans le carrousel des forfaits, on garde les formes arrondies */
.offre { border-radius: 26px !important; }
.offre .btn { border-radius: 999px !important; }
.offre-badge { border-radius: 999px !important; }
.offres-points { border-radius: 999px !important; }
.offres-points button { border-radius: 50% !important; }
.offres-points button[aria-current="true"] { border-radius: 4px !important; }
.offres-fleche { border-radius: 50% !important; }
/* Barre du bas sur téléphone : collée au bas de l'écran, sans arrondi */
@media (max-width: 1020px) {
  .barre-mobile { inset: auto 0 0; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); border-inline: 0; border-bottom: 0; }
}

/* ===== Concept 4 : ticket de lavage ===== */
.resume-offre.ticket { gap: 14px; padding: 26px clamp(20px, 2.2vw, 28px) 30px; border: 0; background: #f2eee5; color: #141414; box-shadow: none;
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 97%, #000) 50% 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 97%, #000) 50% 100% / 18px 51% repeat-x;
  mask: radial-gradient(circle 7px at 50% 0, transparent 97%, #000) 50% 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 97%, #000) 50% 100% / 18px 51% repeat-x; }
.ticket .ticket-tete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed rgba(0, 0, 0, .3); font: 600 .75rem/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #4a4a4a; }
.ticket h3 { color: #141414; }
.ticket dl { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .875rem; }
.ticket dl div { padding-bottom: 6px; border-bottom: 1px dotted rgba(0, 0, 0, .18); }
.ticket dt { color: #555; }
.ticket dd { color: #141414; }
.ticket .total { border-top: 1px dashed rgba(0, 0, 0, .3); }
.ticket .total small, .ticket .total p { color: #555; }
.ticket .total strong { color: #141414; }
.ticket .note { color: #555; }
.ticket .note a { color: #141414; }
.ticket .retour { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .15); }
.ticket .retour .btn:not(.btn-or) { background: rgba(0, 0, 0, .08); color: #141414; }
.ticket .temoin { border-top: 1px dashed rgba(0, 0, 0, .3); }
.ticket .temoin blockquote { color: #141414; }
.ticket .temoin figcaption { color: #555; }
.ticket::after { content: ""; display: block; height: 34px; margin-top: 4px; background: repeating-linear-gradient(90deg, #141414 0 2px, transparent 2px 4px, #141414 4px 5px, transparent 5px 8px, #141414 8px 11px, transparent 11px 13px); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .ticket.deroule { animation: deroule .7s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes deroule { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } to { clip-path: inset(0 0 0 0); transform: none; } }
}

/* ===== Comparateur des forfaits ===== */
.comparer-action { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }
.comparer { width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--ligne-forte); background: #0d0d0e; color: var(--texte); }
.comparer::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.comparer-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 2.5vw, 28px); border-bottom: 1px solid var(--ligne); background: #0d0d0e; }
.comparer-tete h3 { margin: 0; font-family: var(--titre); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: uppercase; line-height: 1; }
.comparer-tete .btn { min-height: 40px; padding: 8px 16px; }
.comparer-defile { overflow-x: auto; padding: 0 clamp(8px, 2vw, 28px); }
.comparer table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.comparer th, .comparer td { padding: 12px 10px; border-bottom: 1px solid var(--ligne); text-align: center; vertical-align: middle; }
.comparer tbody th, .comparer tfoot th { text-align: left; font-weight: 500; color: var(--texte); }
.comparer thead th { padding-top: 22px; font-family: var(--titre); font-weight: 800; font-size: 1.25rem; line-height: 1; text-transform: uppercase; vertical-align: bottom; }
.comparer thead th span { display: block; margin-bottom: 6px; color: var(--or); font-size: 1.6rem; }
.comparer thead th.vedette { color: var(--or); }
.comparer tr.groupe th { padding-top: 22px; color: var(--gris); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: left; border-bottom-color: var(--ligne-forte); }
.comparer .oui { color: var(--or); font-size: 1.25rem; font-weight: 700; }
.comparer .non { color: #555; }
.comparer .texte { color: var(--gris); font-size: .875rem; }
.comparer tfoot strong { font-family: var(--titre); font-weight: 800; font-size: 1.9rem; }
.comparer tfoot .btn { min-height: 42px; width: 100%; padding: 8px 10px; }
.comparer tfoot tr:last-child td { border-bottom: 0; padding-bottom: 18px; }
.comparer-note { margin: 0; padding: 0 clamp(16px, 2.5vw, 28px) 20px; color: var(--gris); font-size: .8125rem; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Carte des secteurs ===== */
.carte-secteurs { display: grid; gap: 12px; margin-top: 10px; }
.carte-secteurs svg { display: block; width: 100%; max-width: 720px; height: auto; border: 1px solid var(--ligne-forte); background: #0a0d10; }
/* Carte noir et or : tous les secteurs dans la même teinte, seul le secteur choisi s éclaire en or */
.carte-secteurs { --z0: #2e2a22; --z1: #2e2a22; --z2: #2e2a22; --z3: #2e2a22; --z4: #2e2a22; --z5: #2e2a22; }
.carte-secteurs .eau { fill: #0a0d10; fill-rule: evenodd; stroke: #23272c; stroke-width: .6; stroke-linejoin: round; }
.carte-secteurs .zone { cursor: pointer; }
.carte-secteurs .zone path, .carte-secteurs .zone rect { stroke: #050505; stroke-width: 2; stroke-linejoin: round; transition: filter .2s, stroke .2s; }
.carte-secteurs .zone[data-zone="0"] path { fill: var(--z0); }
.carte-secteurs .zone[data-zone="1"] path { fill: var(--z1); }
.carte-secteurs .zone[data-zone="2"] path { fill: var(--z2); }
.carte-secteurs .zone[data-zone="3"] path { fill: var(--z3); }
.carte-secteurs .zone[data-zone="4"] path { fill: var(--z4); }
.carte-secteurs .zone.autre path, .carte-secteurs .zone.autre rect { fill: var(--z5); }
.carte-secteurs .zone:hover { filter: brightness(1.25); }
.carte-secteurs .zone.choisie { filter: none; }
.carte-secteurs .zone.choisie path, .carte-secteurs .zone.choisie rect { fill: #7a6743 !important; stroke: var(--or); stroke-width: 2.2; }
.carte-secteurs .limite-mtl { fill: none; stroke: #050505; stroke-width: 2.5; pointer-events: none; }
.carte-secteurs .parc { fill: rgba(255, 255, 255, .07); pointer-events: none; }
.carte-secteurs text { fill: #f5f5f7; font: 700 15px var(--police); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(5, 5, 5, .55); stroke-width: 3px; stroke-linejoin: round; }
.carte-secteurs text.prix { fill: #f0dca8; font-size: 13px; font-weight: 700; }
.carte-secteurs text.petit { font-size: 11.5px; }
.carte-secteurs .zone.autre text { fill: var(--gris); }
.carte-secteurs text.legende { fill: #56606a; font-size: 12px; font-style: italic; font-weight: 500; letter-spacing: .04em; stroke: none; }
.carte-secteurs text.ville { fill: #d8d8dc; font-size: 10.5px; font-weight: 500; text-anchor: start; }
.carte-secteurs .ville-point { fill: #f5f5f7; stroke: #050505; stroke-width: 1; pointer-events: none; }
.carte-secteurs .repere-zk circle { fill: var(--or); stroke: #050505; stroke-width: 2; }
.carte-secteurs .repere-zk text { fill: #050505; font: 800 12px var(--titre); stroke: none; }
.carte-source { margin: -6px 0 0; font-size: .6875rem; color: var(--gris); }
.carte-source a { color: inherit; }
/* Légende : une barre d or (même teinte que sur la carte), le secteur, puis le prix */
.carte-boutons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.carte-boutons button { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ligne); border-left: 4px solid var(--z5); background: var(--tuile); color: var(--gris); font: 500 .8125rem/1.25 var(--police); text-align: left; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.carte-boutons button[data-zone="0"] { border-left-color: var(--z0); }
.carte-boutons button[data-zone="1"] { border-left-color: var(--z1); }
.carte-boutons button[data-zone="2"] { border-left-color: var(--z2); }
.carte-boutons button[data-zone="3"] { border-left-color: var(--z3); }
.carte-boutons button[data-zone="4"] { border-left-color: var(--z4); }
.carte-boutons button[data-zone="5"] { border-left-color: var(--z5); }
.carte-boutons button:hover { color: var(--texte); background: #1c1c1f; }
.carte-boutons button[aria-pressed="true"] { color: var(--texte); background: rgba(207, 180, 124, .1); border-color: rgba(207, 180, 124, .5); border-left-color: var(--or); }
@media (max-width: 560px) {
  .carte-secteurs text { font-size: 19px; }
  .carte-secteurs text.prix { font-size: 17px; }
  .carte-secteurs text.petit { font-size: 14px; }
  .carte-secteurs text.ville, .carte-secteurs text.legende { font-size: 14px; }
  .carte-secteurs { margin-top: 8px; }
  .carte-boutons { grid-template-columns: 1fr 1fr; gap: 4px; }
  .carte-boutons button { min-height: 34px; padding: 5px 8px; font-size: .75rem; }
  .carte-secteurs .ville-g.mineure { display: none; }
  .carte-secteurs text.legende { font-size: 15px; }
}

/* ===== Option cadeau et bon cadeau ===== */
.case-cadeau { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 14px 16px; border: 1px dashed rgba(207, 180, 124, .55); background: rgba(207, 180, 124, .05); cursor: pointer; }
.case-cadeau input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--or); flex: none; }
.case-cadeau span { color: var(--gris); font-size: .9375rem; }
.case-cadeau b { display: block; color: var(--texte); font-size: 1rem; }
.case-cadeau:has(input:checked) { border-style: solid; border-color: var(--or); background: rgba(207, 180, 124, .1); }
#champ-destinataire { margin-top: 12px; }
#champ-destinataire[hidden] { display: none; }
.ticket-cadeau { display: grid; gap: 4px; padding: 12px 14px; border: 2px dashed #b9973f; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ticket-cadeau[hidden] { display: none; }
.ticket-cadeau p { margin: 0; color: #141414; font-size: .9375rem; }
.ticket-cadeau .ticket-validite { margin-top: 4px; color: #666; font-size: .75rem; font-family: var(--police); }
.ticket-cadeau .ticket-imprimer { justify-self: start; min-height: 38px; margin-top: 8px; padding: 6px 14px; background: rgba(0, 0, 0, .08) !important; color: #141414; font-size: .8125rem; }
.ticket.cadeau h3 { color: #8a6d28; }
@media print {
  html.impression-bon body * { visibility: hidden !important; }
  html.impression-bon .resume-offre, html.impression-bon .resume-offre * { visibility: visible !important; }
  html.impression-bon .resume-offre { position: absolute; left: 0; top: 0; width: 100%; -webkit-mask: none; mask: none; }
  html.impression-bon .resume-offre .btn, html.impression-bon .resume-offre .note, html.impression-bon .resume-offre .temoin, html.impression-bon .resume-offre .retour { display: none !important; }
  html.impression-bon .barre-mobile, html.impression-bon .haut { display: none !important; }
}

/* ===== Page Merci : rappel ===== */
.rappel { display: grid; gap: 12px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ligne-forte); background: var(--tuile); max-width: 720px; }
.rappel h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.rappel p { margin: 0; color: var(--gris); }
.rappel .rappel-date { color: var(--texte); font-size: .9375rem; }
.rappel .rappel-date::first-letter { text-transform: uppercase; }
@media (max-width: 560px) {
  .comparer table { min-width: 0; font-size: .78rem; table-layout: fixed; }
  .comparer th, .comparer td { padding: 9px 4px; }
  .comparer tbody th, .comparer tfoot th { width: 34%; }
  .comparer thead th { font-size: .82rem; }
  .comparer thead th span { font-size: 1.15rem; }
  .comparer .texte { font-size: .72rem; }
  .comparer tfoot strong { font-size: 1.3rem; }
  .comparer tfoot .btn { min-height: 38px; padding: 6px 4px; font-size: .75rem; }
}

/* ===== Téléphone : page compacte, le moins de défilement possible ===== */
@media (max-width: 620px) {
  .bloc { padding-top: 44px !important; padding-bottom: 44px !important; }
  .entete-bloc { margin-bottom: 18px !important; }
  .entete-bloc h2, .offres-tete h2, .avis-tete h2 { font-size: 2rem !important; }
  .entete-bloc p, .offres-tete p { font-size: .9375rem; margin-top: 8px; }
  .manifeste { padding-top: 36px !important; padding-bottom: 36px !important; }
  .manifeste p { font-size: 1.35rem !important; line-height: 1.25 !important; }

  /* Atouts : grille 2 x 2 */
  .atouts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .atouts li { padding: 12px !important; min-height: 0 !important; }
  .atouts li * { font-size: .75rem !important; line-height: 1.3 !important; }
  .atouts li > :first-child, .atouts li strong, .atouts li h3 { font-size: .8125rem !important; margin-bottom: 4px !important; }

  /* Forfaits */
  .offres-tete { margin-bottom: 12px !important; }
  .offres-tete .segment { margin-top: 12px !important; }
  .offre-photo { max-height: 120px; overflow: hidden; }
  .offre-photo img { height: 120px !important; object-fit: cover; }
  .offre-prix { padding-top: 6px !important; padding-bottom: 6px !important; }
  .offre-points li { padding-top: 3px !important; padding-bottom: 3px !important; font-size: .875rem; }

  /* Chiffres : 2 x 2 */
  .chiffres-bande { padding-top: 24px !important; padding-bottom: 24px !important; }
  .chiffres-bande ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 8px !important; }
  .chiffres-bande li { padding: 10px 8px !important; min-height: 0 !important; }
  .chiffres-bande li strong, .chiffres-bande li b, .chiffres-bande li > :first-child { font-size: 2rem !important; line-height: 1 !important; }

  /* Comment ça marche : étapes compactes */
  .parcours { gap: 8px !important; }
  .parcours li { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; padding: 14px !important; min-height: 0 !important; }
  .parcours li .num { grid-row: span 2; margin: 0 !important; font-size: 1.9rem !important; line-height: 1 !important; }
  .parcours li .num small { font-size: .55rem !important; }
  .parcours li h3 { margin: 0 0 4px !important; font-size: 1.05rem !important; }
  .parcours li p { margin: 0 !important; font-size: .875rem !important; }

  /* Formulaire */
  .demande-bloc .entete-bloc p { font-size: .875rem; }
  form.demande fieldset { margin-bottom: 18px !important; padding-top: 0 !important; }
  form.demande .choix { gap: 6px !important; }
  form.demande .choix label { padding: 10px 12px !important; min-height: 0 !important; font-size: .875rem; }
  form.demande .choix-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
  form.demande .choix-3 label { justify-content: center; text-align: center; padding: 10px 6px !important; font-size: .8125rem; }
  .case-cadeau { padding: 10px 12px; }
  .case-cadeau span { font-size: .8125rem; }
  .champs { gap: 12px !important; }
  .champ textarea { min-height: 84px !important; height: 84px; }
  .resume-offre .temoin { display: none !important; }
  .resume-offre .note { font-size: .75rem !important; }

  /* Avis : on glisse de côté au lieu de défiler */
  ul.avis { display: flex !important; gap: 10px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px !important; padding-right: 16px !important; }
  ul.avis::-webkit-scrollbar { display: none; }
  ul.avis li { flex: 0 0 82%; scroll-snap-align: start; padding: 16px !important; opacity: 1 !important; transform: none !important; }
  .avis-tete { margin-bottom: 14px !important; }

  /* Questions */
  .faq details summary { padding: 13px 14px !important; font-size: .9375rem !important; }

  /* Appel final et pied de page */
  .appel-photo { display: none !important; }
  .appel-final h2 { font-size: 2.1rem !important; }
  footer { padding-top: 24px !important; padding-bottom: 80px !important; }
}

/* ===== Options des forfaits : intérieur ou extérieur seulement, abonnement ===== */
.offres-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 980px; margin: 18px auto 0; }
.offres-options p { margin: 0; padding: 14px 16px; border: 1px solid var(--ligne); border-left: 3px solid var(--or); background: var(--tuile); color: var(--gris); font-size: .9375rem; }
.offres-options strong { display: block; margin-bottom: 2px; color: var(--texte); }
@media (max-width: 620px) { .offres-options { grid-template-columns: 1fr; gap: 6px; } .offres-options p { padding: 10px 12px; font-size: .8125rem; } }

/* ===== Page Merci : avant notre arrivée, avis Google ===== */
.preparer, .avis-google { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 56px); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ligne-forte); background: var(--tuile); max-width: 720px; }
.preparer h2, .avis-google h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.avis-google p { margin: 0; color: var(--gris); }
.avis-google { border-color: rgba(207, 180, 124, .45); }
.preparer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.preparer li { position: relative; padding-left: 28px; color: var(--gris); }
.preparer li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--or); font-weight: 700; }
.preparer li strong { color: var(--texte); font-weight: 600; }

/* ===== Téléphone : lisibilité et zones tactiles ===== */
@media (max-width: 620px) {
  .atouts li * { font-size: .8125rem !important; }
  .atouts li > :first-child, .atouts li strong, .atouts li h3 { font-size: .875rem !important; }
  .parcours li .num small { font-size: .625rem !important; }
  .carte-boutons button { font-size: .78rem; }
  .offres-fleche { width: 44px !important; height: 44px !important; }
}
/* Points du carrousel : petits à l'œil, mais faciles à toucher */
.offres-points button { position: relative; }
.offres-points button::after { content: ""; position: absolute; inset: -16px -6px; }