:root {
  --ground: #f3f0f1;
  --surface: #eae5e7;
  --card: #ffffff;
  --ink: #1c1719;
  --muted: #56494e;
  --line: #d5cccf;
  --line-soft: #e3dbdd;
  --accent: #7b3b4d;
  --accent-ink: #ffffff;
  --accent-wash: #f0e5e8;

  --display: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --col: 64rem;
  --gap: clamp(3rem, 7vw, 5rem);

  color-scheme: light;
}

/* Page mono-thème : fond clair en toutes circonstances. */

* {
  box-sizing: border-box;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: 1.4rem;
}

section {
  padding-block: var(--gap);
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.3rem, 8vw, 3.6rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.7rem, 4.6vw, 2.35rem);
  line-height: 1.14;
}

h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin: 0;
}

.stack {
  display: flex;
  flex-direction: column;
}
.g-xs { gap: 0.5rem; }
.g-sm { gap: 0.95rem; }
.g-md { gap: 1.7rem; }
.g-lg { gap: 2.8rem; }

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.lede {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 32rem;
}
.muted { color: var(--muted); }
.small { font-size: 0.9rem; line-height: 1.5; }

.center {
  text-align: center;
  align-items: center;
}
.center .lede { margin-inline: auto; }

/* ---------- boutons ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  padding: 1.05rem 1.7rem;
  border-radius: 2px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  align-self: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.cta:hover { opacity: 0.88; transform: translateY(-1px); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Battement du bouton : un halo qui s'élargit et s'efface, le bouton lui-même
   ne bouge pas. Une pulsation qui le fait grossir donne l'effet « bannière
   publicitaire ».
   Il ne démarre qu'après 6 s, le temps de lire le titre et l'accroche : un
   bouton qui clignote pendant qu'on lit détourne au lieu d'appeler. */
@keyframes cta-halo {
  0% { box-shadow: 0 0 0 0 rgba(123, 59, 77, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(123, 59, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 59, 77, 0); }
}

/* Démarre à 4 s, le temps de lire le titre et l'accroche, puis bat en continu.
   Il ne s'arrête PLUS au survol : le curseur passe dessus dès qu'on approche
   pour cliquer, et le halo semblait alors disparaître tout seul.
   `rgba` explicite plutôt que `color-mix`, qui n'est pas interprété par les
   navigateurs un peu anciens et faisait tomber toute l'animation. */
.cta {
  animation: cta-halo 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cta { animation: none; }
}

/* ---------- emplacements ---------- */

.slot {
  border: 1px dashed var(--line);
  background: var(--surface);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.2rem;
  color: var(--muted);
}

.slot b {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.slot span { font-size: 0.84rem; line-height: 1.45; max-width: 22rem; }

/* ---------- hero ---------- */

/* Premier écran : bandeau + hero. `svh` et non `vh`, sinon la barre d'adresse
   mobile fausse la hauteur et le bloc déborde. */
.cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.hero {
  flex: 1;
  /* Le padding n'est plus qu'un minimum de sécurité sur écran court : c'est
     le centrage qui répartit l'espace au-dessus et en dessous. */
  padding-block: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.7rem;
}

.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 34rem; }

.badges { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }

.badge {
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--card);
}

/* ---------- bandeau d'origine ---------- */

.topbar {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  padding: 0.85rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- preuve sociale ---------- */

/* Une LIGNE, pas une carte : posée sous le bouton du hero, elle rassure au
   moment de la décision sans ajouter un bloc de plus à la page. */
.proof {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}

.faces { display: flex; }

.faces img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--ground);
  background: var(--surface);
}

/* Les portraits se chevauchent : la rangée reste compacte et lisible. */
.faces img + img { margin-left: -10px; }

.proof-text {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}

.stars {
  color: var(--accent);
  letter-spacing: 0.06em;
  font-size: 0.88rem;
}

/* ---------- rappel d'action ---------- */

.cta-row {
  display: flex;
  justify-content: center;
  padding-block: clamp(1.6rem, 4vw, 2.4rem);
}

/* ---------- carrousel d'avis ---------- */

.slider { display: flex; flex-direction: column; gap: 1.1rem; }

.track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.2rem;
}

.track::-webkit-scrollbar { display: none; }






.slider-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots { display: flex; gap: 0.4rem; }

.dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}

.dots button[aria-current="true"] { background: var(--accent); }
.dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Flèches AU NIVEAU du carrousel : une à gauche, une à droite, centrées sur
   la hauteur des visuels. Reléguées sous le carrousel, elles obligent à
   descendre les yeux hors de l'image pour naviguer dedans. */
.viewport { position: relative; }

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(28, 23, 25, 0.12);
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.nav.prev { left: -12px; }
.nav.next { right: -12px; }

.nav:hover { border-color: var(--accent); color: var(--accent); }
.nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sur petit écran le carrousel touche les bords : les flèches rentrent
   dans l'image plutôt que de déborder hors de la page. */
@media (max-width: 620px) {
  .nav { width: 38px; height: 38px; }
  .nav.prev { left: 6px; }
  .nav.next { right: 6px; }
}

/* ---------- galerie ---------- */

/* Le carrousel des résultats réutilise .slider / .track / .dots des avis.
   Seule la largeur des slides change : une photo se lit plus petite qu'un
   verbatim, on en montre donc plusieurs à la fois dès qu'il y a la place. */
.track-photos { gap: 0.9rem; }

.track-photos > .shot {
  flex: 0 0 78%;
  /* `start` et non `center` : le défilement automatique se cale sur
     `index * largeur`. Avec un centrage, le navigateur reposait la slide à une
     autre position, le code en déduisait un autre index, et le carrousel
     oscillait entre deux vues sans jamais avancer. */
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .track-photos > .shot { flex-basis: calc(50% - 0.45rem); }
}

@media (min-width: 960px) {
  .track-photos > .shot { flex-basis: calc(33.333% - 0.6rem); }
}

/* La forme est portée par la CASE, pas par l'image : c'est la case qui est
   l'élément de flex, donc c'est elle que le conteneur étire. Et `contain`
   plutôt que `cover` : les visuels sont des montages signés avec le logo au
   centre, le moindre recadrage les coupe en deux. */
.shot {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}

/* Les visuels ne s'ouvrent pas, ne se glissent pas et n'ont pas de menu
   contextuel. Ça n'empêche pas quelqu'un de déterminé de récupérer le fichier
   servi par le serveur, mais ça ferme tous les gestes ordinaires. */
.shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Au-delà d'une dizaine de vignettes, des points deviennent illisibles :
   on les masque et on garde les flèches et le glissement au doigt. */
.dots.dots-many { display: none; }

/* ---------- schéma peau ---------- */

.skin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.skin article {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.swatch { width: 100%; height: 74px; border-radius: 2px; display: block; }

.arrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.arrow i { flex: 1; height: 1px; background: var(--line); display: block; }

.verdict {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--accent);
}

/* ---------- inclus ---------- */

.kit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
}

.kit article {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kit svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.4; }
.kit p { font-size: 0.92rem; color: var(--muted); line-height: 1.5; }

/* ---------- cicatrisation ---------- */

.heal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
  background: var(--card);
}

@media (min-width: 520px) and (max-width: 899px) {
  .heal { grid-template-columns: 1fr 1fr; }

  /* cinq étapes sur deux colonnes : la dernière occupe toute la largeur */
  .heal article:last-child {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
  }

  .heal article:last-child .bar { width: 60%; }
}

@media (min-width: 900px) {
  .heal { grid-template-columns: repeat(5, 1fr); }
}

.heal article {
  padding: 1.15rem 1.1rem 1.3rem;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.heal article:last-child { border-right: 0; }

.heal .bar { height: 8px; border-radius: 999px; }

.heal .day {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.heal p { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* ---------- prix ---------- */

.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  gap: 1.6rem;
}

@media (min-width: 720px) {
  .price-card { grid-template-columns: auto 1fr; gap: 3rem; align-items: center; }
}

.price-card .amount {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  line-height: 1;
  white-space: nowrap;
}

.price-card .amount small {
  display: block;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}

ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

ul.ticks li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.4rem;
  align-items: baseline;
  font-size: 0.95rem;
}

ul.ticks li::before {
  content: "";
  width: 11px;
  height: 1px;
  background: var(--accent);
  transform: translateY(-4px);
}

/* ---------- filtre ---------- */

.filter { display: grid; gap: 1rem; }

@media (min-width: 660px) {
  .filter { grid-template-columns: 1fr 1fr; }
}

.filter > div {
  padding: 1.4rem;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.filter .yes { background: var(--accent-wash); }
.filter .no { background: var(--surface); }

.filter h3 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }

.filter .yes h3 { color: var(--accent); }
.filter .no h3 { color: var(--muted); }

.filter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.93rem; }

/* ---------- faq ---------- */

details { border-bottom: 1px solid var(--line-soft); padding-block: 0.95rem; }

details summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--accent); }
details[open] summary::after { content: "–"; }
details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
details p { margin-top: 0.6rem; color: var(--muted); font-size: 0.93rem; }

/* ---------- clôture ---------- */

.closing { background: var(--surface); border-top: 1px solid var(--line); }

/* ---------- mentions ---------- */

/* Mention légale de bas de page : présente et lisible, mais volontairement
   discrète. Elle informe, elle ne participe pas à la vente. */
footer {
  padding-block: 2.2rem 3rem;
  border-top: 1px solid var(--line-soft);
}

.legal {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* ---------- apparition ---------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.in { opacity: 1; transform: none; }

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