@import url("assets/fonts/fonts.css");

:root {
  /* Palette relevée sur SON site rendu (emilieharas.com), pas sur une extraction CSS :
     rose vif #F74A87 sur ses boutons et ses titres script, framboise #E63370 au pied de
     page, rose #D75C98 dans le nuage du hero. Le violet #650291 est son logo.
     Les valeurs de texte et de bouton sont assombries pour passer le contraste. */
  --rose: #C81E5B;          /* framboise assombrie : 5,54:1 avec du blanc — porte les CTA */
  --rose-vif: #F74A87;      /* SON rose exact — réservé aux marques et aux filets */
  --rose-deep: #9E1048;     /* 8,01:1 — texte d'appui sur papier */
  --rose-nuage: #D75C98;    /* le rose de son nuage de hero */
  --violet: #650291;        /* son logo : 10,05:1 en texte sur papier rosé */
  --violet-deep: #4A0169;
  --violet-soft: #8E45AE;
  --amber: #A34A16;
  --amber-deep: #85380C;
  --azure: #0B6FA8;
  --azure-soft: #6FB3D8;
  --paper: #FFF6FA;         /* papier très légèrement rosé, comme le fond de son site */
  --paper-warm: #FDEBF3;
  --sand: #F8D9E6;
  --white: #FFFFFF;
  --line: rgba(101, 2, 145, .16);
  --line-strong: rgba(200, 30, 91, .34);
  --shadow: 0 26px 62px rgba(158, 16, 72, .14);
  --shadow-soft: 0 14px 38px rgba(158, 16, 72, .10);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --shell: 1200px;
}

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, .4vw + .94rem, 1.08rem);
  line-height: 1.68;
  color: var(--violet);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -.012em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
h3 { font-size: clamp(1.14rem, 1.3vw, 1.3rem); }
p { margin: 0 0 1.05em; }
a { color: var(--azure); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* La signature d'Émilie : la seconde ligne du titre en italique azur.
   Écho de sa toile, et le marqueur qui la distingue de toute autre direction. */
.h-accent { display: block; font-style: italic; font-weight: 400; color: var(--azure); }

.shell { width: min(var(--shell), 100% - 2.6rem); margin-inline: auto; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 400; padding: 10px 16px; color: var(--white); background: var(--violet); border-radius: 999px; }
.skip:focus { top: 16px; }

/* --- rayons : la trame venue du pentagone de sa toile, tenue très basse --- */
.rays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rays::before {
  content: "";
  position: absolute;
  left: 50%; top: -38%;
  width: 128vmax; height: 128vmax;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(247, 74, 135, .07) 0deg 1.05deg, transparent 1.05deg 7.5deg);
  mask-image: radial-gradient(closest-side, #000 12%, transparent 74%);
}

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 248, 240, .9);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.head { display: flex; align-items: center; gap: 1.6rem; padding: .85rem 0; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--violet); }
.brand img { width: 148px; height: auto; display: block; }
.nav { display: flex; align-items: center; gap: 1.45rem; margin-left: auto; }
.nav a:not(.btn) {
  position: relative; font-size: .82rem; letter-spacing: .055em; text-transform: uppercase;
  color: var(--violet); text-decoration: none;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -7px;
  height: 2px; border-radius: 50%; background: var(--rose-vif);
  transition: left .2s ease, right .2s ease;
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { left: 0; right: 0; }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50% 46% 52% 44%; background: var(--white); color: var(--violet); font-size: 1.2rem; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .72rem 1.55rem;
  font-family: var(--body); font-size: .87rem; font-weight: 600; letter-spacing: .022em;
  color: var(--white); background: var(--rose); border: 0;
  border-radius: 999px 999px 999px 40px;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--rose-deep); transform: translateY(-1px); }
.btn-ghost {
  min-height: 44px; padding: 0 2px; color: var(--azure); background: none;
  border: 0; border-bottom: 1px solid var(--azure); border-radius: 0;
}
.btn-ghost:hover { background: none; color: var(--violet); border-color: var(--violet); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.35rem; margin: 1.5rem 0 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--rose-deep);
}
.eyebrow::before { content: ""; width: 36px; height: 8px; border-top: 2px solid var(--rose-vif); border-radius: 50%; transform: rotate(-3deg); }

.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.45rem 0 0; padding: 0; list-style: none; }
.chips li {
  padding: .45rem 1rem; font-size: .78rem; color: var(--violet);
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 253, 249, .72);
}

/* --- hero --- */
.hero { position: relative; padding: clamp(3rem, 6vw, 5.4rem) 0 clamp(3.4rem, 7vw, 6rem); overflow: hidden; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy { position: relative; }
.hero-copy .lede { font-size: clamp(1.04rem, .5vw + .96rem, 1.18rem); color: var(--violet-soft); max-width: 34rem; }

/* Le portrait dans une forme spiralée asymétrique, cerclée d'un arc azur :
   l'écho de sa toile sans en reproduire le pentagone. */
.portrait { position: relative; }
.portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border-radius: 54% 46% 48% 52% / 40% 44% 56% 60%;
  box-shadow: var(--shadow);
}
.portrait::before {
  content: ""; position: absolute; inset: -4.5% -3.5% -3.5% -4.5%;
  border: 1px solid rgba(247, 74, 135, .5);
  border-radius: 52% 48% 46% 54% / 44% 40% 60% 56%;
  transform: rotate(-5deg);
}
.portrait::after {
  content: ""; position: absolute; inset: -9% -8% -8% -9%;
  border: 1px solid rgba(101, 2, 145, .28);
  border-radius: 50% 50% 44% 56% / 46% 42% 58% 54%;
  transform: rotate(6deg);
}
.portrait figcaption { margin-top: .85rem; font-size: .76rem; color: var(--violet-soft); }

/* --- sections --- */
.section { position: relative; padding: clamp(3rem, 6vw, 5.2rem) 0; }
.section--warm { background: var(--paper-warm); }
.section--violet {
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(111, 179, 216, .16), transparent 62%),
    linear-gradient(168deg, var(--rose) 0%, var(--violet) 62%, var(--violet-deep) 100%);
  color: var(--paper);
}
.section--violet h2, .section--violet h3 { color: var(--white); }
.section--violet .eyebrow { color: var(--azure-soft); }
.section--violet .eyebrow::before { border-top-color: var(--azure-soft); }
.section--violet .h-accent, .cta-band .h-accent { color: var(--azure-soft); }
.section--violet p { color: rgba(253, 248, 240, .84); }
.section-head { max-width: 44rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.section-head:has(> .eyebrow:last-child) { margin-bottom: 1.1rem; }
.section-head > .eyebrow:last-child { margin-bottom: 0; }

.arc { display: block; width: 100%; height: 42px; color: var(--azure); }

.band {
  position: relative; overflow: hidden;
  height: clamp(230px, 34vw, 420px);
}
.band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.band figcaption {
  position: absolute; inset: auto 0 0 0; margin: 0;
  padding: .5rem clamp(1.3rem, 4vw, 3rem);
  font-size: .72rem; color: var(--paper);
  background: linear-gradient(transparent, rgba(74, 1, 105, .72));
}

.grid { display: grid; gap: 1.35rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.card {
  position: relative; overflow: hidden; padding: clamp(1.4rem, 2vw, 1.9rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 26px 26px 26px 6px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card--photo { padding: 0; display: flex; flex-direction: column; }
.card--photo img {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: 50% 30%;
}
.card--photo .card__body { padding: clamp(1.2rem, 1.8vw, 1.6rem); }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .95rem; color: var(--violet-soft); margin-bottom: .7rem; }
.card .price { display: block; font-family: var(--display); font-size: 1.22rem; color: var(--rose); margin-bottom: .3rem; }
.card a { font-size: .86rem; font-weight: 600; }

.steps { counter-reset: s; display: grid; gap: 1.2rem; padding: 0; margin: 0; list-style: none; }
.steps li { position: relative; padding-left: 3.3rem; }
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -.15rem;
  width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.05rem; color: var(--rose);
  border: 1px solid rgba(200, 30, 91, .4); border-radius: 50% 46% 52% 44%;
}
.steps strong { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }

.limits { padding: 0; margin: 0; list-style: none; display: grid; gap: .6rem; }
.limits li { padding-left: 1.5rem; position: relative; font-size: .95rem; }
.limits li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; border: 1px solid var(--azure); border-radius: 50%; }

details { border-bottom: 1px solid var(--line); padding: 1.05rem 0; }
details summary { cursor: pointer; font-family: var(--display); font-size: 1.08rem; font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; color: var(--rose); font-family: var(--body); }
details[open] summary::after { content: "–"; }
details p { margin: .75rem 0 0; font-size: .96rem; color: var(--violet-soft); }

.cta-band {
  position: relative; overflow: hidden; padding: clamp(3.2rem, 6vw, 5rem) 0;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(247, 74, 135, .18), transparent 60%),
    linear-gradient(150deg, var(--rose-deep) 0%, var(--violet) 58%, var(--violet-deep) 100%);
  color: var(--paper); text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(253, 248, 240, .84); max-width: 38rem; margin-inline: auto; }
.cta-band .btn { background: var(--rose-vif); color: #3A0020; }
.cta-band .actions { justify-content: center; }

footer { padding: clamp(2.4rem, 4vw, 3.4rem) 0 2rem; background: var(--violet-deep); color: rgba(253, 248, 240, .78); font-size: .9rem; }
footer a { color: var(--azure-soft); }
footer h3 { color: var(--white); font-size: 1rem; }
.foot-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid ul { padding: 0; margin: 0; list-style: none; display: grid; gap: .45rem; }
.foot-note { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(253, 248, 240, .16); font-size: .82rem; }

.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.2rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .portrait { order: -1; max-width: 26rem; }
  .nav { position: fixed; inset: 64px 0 auto; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.4rem 1.3rem 1.8rem; background: var(--paper); border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .24s ease; }
  .nav[data-open="true"] { transform: none; }
  .burger { display: block; margin-left: auto; }
}

@media print {
  header, .rays, .burger { display: none; }
  body { background: #fff; color: #000; }
}

/* --- galerie d'ambiance ---------------------------------------------------
   Une bande de trois images par page, en rectangles doux : la forme organique
   du .portrait reste RÉSERVÉE au portrait de hero, sinon elle perd sa valeur
   de signature. La légende est unique sous la bande, pas sous chaque image :
   trois fois la même mention de génération IA, ça devient du bruit. */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.3rem); }
.galerie figure { margin: 0; }
.galerie img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 38%;
  border-radius: 22px 22px 22px 5px;
  box-shadow: var(--shadow-soft);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.galerie figure:hover img { transform: translateY(-5px); box-shadow: var(--shadow); }
.galerie-credit { margin: 1rem 0 0; font-size: .76rem; color: var(--violet-soft); }
.section--violet .galerie-credit { color: var(--azure-soft); }
@media (prefers-reduced-motion: reduce) { .galerie img { transition: none; } .galerie figure:hover img { transform: none; } }
@media (max-width: 760px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galerie figure:nth-child(3) { display: none; } }

/* Colonne image à gauche une section sur deux : sans alternance, une page de
   huit sections devient un escalier et l'œil décroche. */
.hero-grid--flip > :first-child { order: 2; }
.hero-grid--flip > :last-child  { order: 1; }
@media (max-width: 900px) {
  .hero-grid--flip > :first-child { order: 0; }
  .hero-grid--flip > :last-child  { order: 0; }
}

/* La forme organique cerclée est la SIGNATURE du portrait de hero. Répétée huit
   fois sur une page elle devient un tic et ne signe plus rien. Les images de
   section reprennent donc le rectangle adouci de la galerie, sans ornement. */
.portrait--calme img {
  aspect-ratio: 4 / 5;
  border-radius: 26px 26px 26px 6px;
  box-shadow: var(--shadow-soft);
}
/* Les deux cercles décoratifs du .portrait sont la signature du SEUL portrait de
   hero. Sur une image de section, le filet décalé se dessinait PAR-DESSUS la
   photo : un cadre rose qui traversait le visage, sur chaque page. Supprimé —
   l'image de section est un rectangle adouci, rien de plus. */
.portrait--calme::before,
.portrait--calme::after { display: none; }

/* --- schémas de curothérapie -----------------------------------------------
   Les quatre schémas envoyés par Émilie sont des dessins annotés, pas des
   photos : les recadrer en 4/5 avec object-fit:cover couperait les légendes,
   qui sont tout le contenu. Ils sont donc posés ENTIERS (contain) sur un
   panneau crème, à la façon de la signature de la galerie d'accueil. Le
   panneau garde le 4/5 des autres images de section pour que la colonne ne
   saute pas d'une section à l'autre. */
.portrait--schema::before,
.portrait--schema::after { display: none; }
.portrait--schema .schema__panneau {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: clamp(.9rem, 2.4vw, 1.9rem);
  background: #fdf8f0;
  border-radius: 26px 26px 26px 6px;
  box-shadow: inset 0 0 0 1px rgba(101, 2, 145, .14), var(--shadow-soft);
}
.portrait--schema img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.portrait--schema figcaption { text-align: center; }
.section--violet .portrait--schema figcaption { color: var(--azure-soft); }
@media (max-width: 760px) {
  /* Sur un écran étroit, le 4/5 réduit le schéma jusqu'à rendre ses légendes
     illisibles : on rend la hauteur au dessin et on reprend la marge intérieure. */
  .portrait--schema .schema__panneau { aspect-ratio: auto; padding: .5rem; }
  .portrait--schema img { max-height: none; }
}

/* Une page imprimée ne doit pas porter le lien d'évitement : il est hors écran
   par position fixe, ce que l'impression aplatit. */
@media print { .skip { display: none; } }

/* --- débord jusqu'au bord de l'écran ---------------------------------------
   Le texte reste dans la colonne de lecture, l'image sort du conteneur et va
   toucher le bord de la fenêtre du côté où elle se trouve. La gouttière se
   calcule depuis la règle de .shell, pas en dur : si --shell change, le débord
   suit. `overflow-x: clip` sur les sections absorbe l'écart de largeur dû à la
   barre de défilement (100vw la compte, le contenu non) — sans lui, une barre
   horizontale apparaît sur toute la page.
   Le portrait de hero ne déborde PAS : sa forme organique cerclée est la
   signature de la page, la couper en deux la détruit. */
@media (min-width: 901px) {
  .section { overflow-x: clip; }

  .hero-grid > .portrait--calme {
    --gouttiere: calc((100vw - min(var(--shell), 100vw - 2.6rem)) / 2);
    margin-right: calc(var(--gouttiere) * -1);
  }
  .hero-grid--flip > .portrait--calme {
    margin-right: 0;
    margin-left: calc(var(--gouttiere) * -1);
  }
  .hero-grid > .portrait--calme img {
    border-radius: 26px 0 0 26px;      /* l'arrondi ne sert que du côté visible */
    max-height: 80vh;                  /* sinon l'image devient une tour sur un grand écran */
  }
  .hero-grid--flip > .portrait--calme img { border-radius: 0 26px 26px 0; }


  /* la galerie prend toute la largeur de la fenêtre, des deux côtés */
  .galerie {
    --gouttiere: calc((100vw - min(var(--shell), 100vw - 2.6rem)) / 2);
    margin-inline: calc(var(--gouttiere) * -1);
    gap: clamp(.5rem, 1vw, .9rem);
  }
  .galerie img { border-radius: 0; aspect-ratio: 3 / 4; }
  .galerie figure:first-child img { border-radius: 22px 0 0 22px; }
.galerie figure:last-child img  { border-radius: 0 22px 22px 0; }
}

/* Signature demandée à la place du portrait refusé dans la galerie d'accueil. */
.galerie figure.galerie__signature {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 3rem);
  background: #fdf8f0;
  box-shadow: inset 0 0 0 2px rgba(101, 2, 145, .18), var(--shadow-soft);
}
.galerie figure.galerie__signature img {
  width: min(100%, 23rem);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.galerie figure.galerie__signature:hover img { transform: none; box-shadow: none; }
@media (min-width: 1100px) {
  .galerie figure.galerie__signature { aspect-ratio: 3 / 4; }
}

/* --- avis Google -----------------------------------------------------------
   Note et nombre RELEVÉS sur sa fiche le 2026-09-13 : 4,9 sur 17 avis,
   Emilie Haras, 12 rue du Stade, 67970 Oermingen (cid 11586640911128154892).
   Le bloc renvoie vers la fiche au lieu de recopier les avis : ils portent
   très majoritairement sur des effets de santé liés à la curothérapie, ce que
   la page Témoignages s'interdit explicitement de publier. */
.avis-google {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem .95rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow-soft);
  text-decoration: none; color: var(--violet);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.avis-google:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.avis-google__note { font-family: var(--display); font-size: 1.16rem; line-height: 1; color: var(--rose); }
.avis-google__etoiles { color: var(--amber); letter-spacing: .06em; font-size: .92rem; }
.avis-google__texte { font-size: .82rem; font-weight: 600; color: var(--violet-soft); }
.avis-google:hover .avis-google__texte { color: var(--rose); }

.section--violet .avis-google,
footer .avis-google { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: var(--paper); }
.section--violet .avis-google__note, footer .avis-google__note { color: var(--white); }
.section--violet .avis-google__texte, footer .avis-google__texte { color: var(--azure-soft); }
.section--violet .avis-google:hover .avis-google__texte, footer .avis-google:hover .avis-google__texte { color: var(--white); }

.foot-avis { padding-top: 1.4rem; padding-bottom: .2rem; }

/* la version large, pour la page Témoignages */
.avis-bloc { display: grid; gap: 1.1rem; justify-items: start; }
.avis-bloc .avis-google { padding: .85rem 1.3rem; }
.avis-bloc .avis-google__note { font-size: 1.7rem; }
.avis-bloc .avis-google__etoiles { font-size: 1.1rem; }
.avis-bloc .avis-google__texte { font-size: .92rem; }

@media (prefers-reduced-motion: reduce) { .avis-google { transition: none; } .avis-google:hover { transform: none; } }

/* --- mur d'avis ------------------------------------------------------------
   Le modèle vient du site d'Anne-Laure Charton : bloc de preuve, citation
   d'ouverture, puis des cartes groupées sous des QUESTIONS MIROIR — la question
   que se pose la personne avant d'écrire, et les avis qui y répondent. La forme
   est reprise, la couleur est celle d'Émilie. */
.avis-preuve {
  display: inline-flex; align-items: center; gap: 1.1rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; padding: .9rem 1.5rem;
  box-shadow: var(--shadow-soft); text-decoration: none; color: inherit;
}
.avis-preuve:hover { box-shadow: var(--shadow); }
.avis-preuve__score { display: flex; flex-direction: column; align-items: center; padding-right: 1.1rem; border-right: 1px solid var(--line); }
.avis-preuve__num { font-family: var(--display); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--violet); }
.avis-preuve__etoiles { color: var(--amber); letter-spacing: 2px; font-size: .84rem; margin-top: .25rem; }
.avis-preuve__txt strong { display: block; color: var(--violet); font-size: 1rem; }
.avis-preuve__src { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--violet-soft); margin-top: .15rem; }
.avis-g { width: 15px; height: 15px; flex-shrink: 0; }

.avis-ouverture {
  position: relative; max-width: 44rem; margin: 2.6rem 0 0;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.24rem, 2.6vw, 1.7rem); line-height: 1.44; color: var(--violet);
}
.avis-ouverture cite { display: block; font-family: var(--body); font-style: normal; font-size: .84rem; font-weight: 600; color: var(--rose); margin-top: .9rem; }

.avis-question {
  font-family: var(--display); font-style: italic;
  font-size: 1.18rem; color: var(--rose-deep); margin: 2.6rem 0 1.2rem; line-height: 1.4;
}
/* grille plutôt que colonnes CSS : avec deux avis sous une question, `columns: 3`
   laissait une colonne vide à droite. auto-fit remplit la ligne, la largeur
   maximale empêche un avis court de s'étaler sur toute la page. */
.avis-mur {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem; max-width: 64rem;
}
.avis-carte {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.3rem 1.25rem; margin: 0 0 1.1rem;
  box-shadow: var(--shadow-soft);
}
.avis-carte__tete { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.avis-carte__av {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  border-radius: 50%; background: var(--sand); color: var(--rose-deep);
  font-size: .78rem; font-weight: 700;
}
.avis-carte__id { display: flex; flex-direction: column; line-height: 1.25; }
.avis-carte__nom { font-weight: 600; font-size: .88rem; color: var(--violet); }
.avis-carte__src { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--violet-soft); }
.avis-carte__et { margin-left: auto; color: var(--amber); font-size: .78rem; letter-spacing: 1px; }
.avis-carte blockquote { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--violet-soft); }
.avis-carte__date { display: block; margin-top: .7rem; font-size: .72rem; color: var(--violet-soft); }
.avis-note { margin-top: 1.6rem; font-size: .8rem; color: var(--violet-soft); }

@media (max-width: 980px) { .avis-mur { columns: 2; } }
@media (max-width: 620px) { .avis-mur { columns: 1; } .avis-preuve { flex-wrap: wrap; } }

/* --- en-tête et pied des pages d'atterrissage ------------------------------
   Un visiteur venu d'une annonce n'a qu'une chose à faire. Pas de menu, donc
   pas d'échappatoire : le logo ne sort plus de la page, et les seules sorties
   sont l'appel à l'action, le téléphone et les mentions légales. */
.head--lp { justify-content: space-between; }
.head--lp .brand { pointer-events: none; }
.foot-grid--lp { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* --- formulaire de demande -------------------------------------------------
   Étape de conversion du tunnel. Les trois durées sont des boutons radio et non
   une liste déroulante : le choix doit être visible sans clic, c'est lui qui
   porte le prix. */
.demande { display: grid; gap: 1.15rem; max-width: 34rem; margin-top: 1.6rem; }
.demande fieldset { margin: 0; padding: 0; border: 0; }
.demande legend, .demande label { display: block; font-size: .84rem; font-weight: 600; color: var(--violet); margin-bottom: .45rem; }
.demande input[type="text"], .demande input[type="email"], .demande input[type="tel"], .demande textarea {
  width: 100%; padding: .72rem .9rem; font: inherit; font-size: .95rem; color: var(--violet);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 14px;
}
.demande textarea { min-height: 7.5rem; resize: vertical; }
.demande input:focus-visible, .demande textarea:focus-visible, .demande input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--rose); outline-offset: 2px;
}
.durees { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.duree { position: relative; }
.duree input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.duree span {
  display: block; padding: .8rem .9rem; text-align: left;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.duree strong { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--rose); }
.duree em { display: block; font-style: normal; font-size: .8rem; color: var(--violet-soft); margin-top: .15rem; }
.duree input:checked + span { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(200,30,91,.18); }
.demande__note { font-size: .8rem; color: var(--violet-soft); margin: 0; }
.demande button { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .duree span { transition: none; } }

/* --- déroulant « Services » -------------------------------------------------
   <details>/<summary> natif : ouverture sans JavaScript, fermeture au clavier,
   annoncé correctement par un lecteur d'écran sans ARIA à maintenir.
   Le menu ne montrait qu'un service sur huit ; les sept autres n'étaient
   joignables que par le pied de page. */
.nav-services { position: relative; }
.nav-services > summary {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem 0; cursor: pointer; list-style: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet);
}
.nav-services > summary::-webkit-details-marker { display: none; }
.nav-services > summary::after {
  content: ""; width: .42rem; height: .42rem; margin-top: -.18rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.nav-services[open] > summary::after { transform: rotate(-135deg); margin-top: .1rem; }
.nav-services > summary:hover, .nav-services[open] > summary { color: var(--rose); }
.nav-services > summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.nav-services__liste {
  position: absolute; z-index: 300; top: calc(100% + .7rem); left: -1rem;
  display: grid; gap: .1rem; min-width: 15rem; padding: .6rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px; box-shadow: var(--shadow);
}
/* `.nav a` pose les capitales du menu ; il faut la même spécificité pour les
   retirer dans le déroulant, sinon les huit services s'affichent en capitales. */
.nav .nav-services__liste a {
  padding: .5rem .7rem; border-radius: 11px;
  font-size: .88rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--violet); text-decoration: none;
}
.nav .nav-services__liste a:hover { background: var(--paper-warm); color: var(--rose); }
.nav .nav-services__liste a[aria-current="page"] { color: var(--rose); background: var(--paper-warm); }

@media (max-width: 900px) {
  /* dans le menu burger le déroulant se déplie sur place : pas de flottant */
  .nav-services__liste {
    position: static; min-width: 0; margin-top: .4rem; padding: .3rem 0 .3rem .8rem;
    background: transparent; border: 0; border-left: 1px solid var(--line);
    border-radius: 0; box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) { .nav-services > summary::after { transition: none; } }

/* --- la roue tourne ---------------------------------------------------------
   Les rayons viennent du pentagone de sa toile ; ils étaient figés. Une rotation
   TRÈS lente (180 s le tour) donne de la vie sans jamais attirer l'œil : à cette
   vitesse le mouvement se sent plus qu'il ne se voit, et rien ne bouge assez vite
   pour gêner la lecture du titre posé dessus.

   `will-change` n'est PAS posé : sur un élément de 128vmax il ferait basculer une
   surface énorme sur le GPU en permanence, pour une animation qu'on veut discrète.
   La rotation seule reste composite et ne relayoute rien.

   Deux garde-fous, non négociables :
   · `prefers-reduced-motion: reduce` arrête tout — véto accessibilité.
   · l'élément reste `pointer-events: none` : rien d'interactif ne tourne. */
@keyframes roue-lente {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
.rays::before {
  transform-origin: 50% 50%;
  animation: roue-lente 180s linear infinite;
}
/* Le second bandeau tourne dans l'autre sens et un peu plus lentement : deux
   roues identiques qui tournent pareil donnent une impression de boucle mécanique. */
.cta-band .rays::before { animation-duration: 240s; animation-direction: reverse; }

/* Profondeur du portrait de hero, sans JavaScript : l'ombre s'écarte et l'image
   se soulève d'un cheveu au survol. Discret, et sans effet sur mobile où il n'y a
   pas de survol. */
@media (hover: hover) and (min-width: 901px) {
  .hero .portrait img {
    transition: transform .9s cubic-bezier(.16,1,.3,1), box-shadow .9s ease;
  }
  .hero .portrait:hover img {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 40px 80px rgba(158, 16, 72, .20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rays::before, .cta-band .rays::before { animation: none; }
  .hero .portrait img { transition: none; }
  .hero .portrait:hover img { transform: none; box-shadow: var(--shadow); }
}

/* --- cartes qui se retournent -----------------------------------------------
   Motif repris du site de Pascal Panafieu (`pp-flip`), adapté à sa palette.
   Trois garde-fous à ne pas défaire :
   · le retournement répond au SURVOL et au CLAVIER — un `<article tabindex="0">`
     avec `:focus-visible`, sinon le dos est inatteignable sans souris ;
   · sur tactile il n'y a PAS de retournement : les deux faces s'empilent et tout
     se lit d'un coup. Une carte qui ne s'ouvre qu'au survol est un contenu
     invisible sur téléphone, c'est-à-dire pour la majorité de ses visiteuses ;
   · `prefers-reduced-motion` coupe la transition. */
.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; }
.flip { perspective: 1200px; min-height: 14.5rem; display: block; }
.flip__inner {
  position: relative; display: block; width: 100%; min-height: 14.5rem;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,.2,.2,1);
}
.flip:hover .flip__inner, .flip:focus-visible .flip__inner { transform: rotateY(180deg); }
.flip:focus-visible { outline: 2px solid var(--rose); outline-offset: 5px; border-radius: 26px 26px 26px 6px; }
.flip__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.7rem 1.5rem;
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: 26px 26px 26px 6px;
}
.flip__front h3 { margin: 0; font-size: 1.22rem; line-height: 1.24; color: var(--violet); }
.flip__hint {
  margin: .85rem 0 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose); font-weight: 600;
}
.flip__hint::after { content: " →"; }
.flip__back { transform: rotateY(180deg); background: var(--paper-warm); }
.flip__back ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.flip__back li { position: relative; padding-left: 1rem; font-size: .92rem; line-height: 1.48; color: var(--violet); }
.flip__back li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose-vif);
}

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

@media (hover: none) {
  /* Pas de survol : on empile les deux faces, rien n'est caché. */
  .flip { perspective: none; min-height: 0; }
  .flip__inner { transform: none !important; min-height: 0; }
  .flip__face { position: static; inset: auto; backface-visibility: visible; }
  .flip__front { border-bottom: 0; border-radius: 26px 26px 0 0; padding-bottom: .9rem; }
  .flip__back { transform: none; border-top: 0; border-radius: 0 0 26px 6px; padding-top: .9rem; margin-bottom: .4rem; }
  .flip__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .flip__inner { transition: none; } }

/* --- le paragraphe qui suit une grille --------------------------------------
   Il touchait les cartes au-dessus ET celles en dessous, et restait collé à
   gauche sous une grille pleine largeur : `.prose` plafonne à 42rem sans marge
   ni centrage. Sous une grille, il lui faut sa respiration et son axe. */
/* Règle de VOISINAGE, pas de classe posée à la main : tout paragraphe qui suit
   OU précède une grille prend sa respiration et son axe. Corrigé une fois ici,
   le défaut ne peut plus réapparaître sur une page future — il y en avait cinq
   sur quatre pages, tous nés du même oubli. */
.grid + .prose, .flip-grid + .prose, .grid + .limits, .flip-grid + .limits,
.prose--apres-grille {
  margin: 3.2rem auto;
  max-width: 46rem;
}
.prose + .grid, .prose + .flip-grid, .limits + .grid, .limits + .flip-grid { margin-top: 2.6rem; }
@media (max-width: 900px) {
  .grid + .prose, .flip-grid + .prose, .grid + .limits, .flip-grid + .limits,
  .prose--apres-grille { margin: 2.4rem auto; }
  .prose + .grid, .prose + .flip-grid, .limits + .grid, .limits + .flip-grid { margin-top: 2rem; }
}

/* --- le mur d'avis : tête centrée -------------------------------------------
   Le bloc de preuve et la question étaient calés à gauche sous une grille de
   trois cartes pleine largeur : le badge flottait tout seul dans le vide.
   Sous une grille centrée, la tête se centre aussi. */
/* `.avis-mur` plafonne à 64rem alors que la coquille fait 1158px : la tête
   était centrée sur une largeur DIFFÉRENTE de celle des cartes, donc décalée
   à l'œil même en étant « centrée ». On centre la grille elle-même, et on
   contraint la tête à la MÊME largeur — c'est l'axe commun qui compte, pas le
   centrage de chacun dans son coin. */
.avis-mur { margin-left: auto; margin-right: auto; }
.avis-mur-tete { text-align: center; max-width: 64rem; margin: 0 auto; }
.avis-mur-tete .section-head { margin-left: auto; margin-right: auto; }
.avis-mur-tete .avis-preuve { margin-top: 1.4rem; }
.avis-mur-tete .avis-question { margin: 1.5rem auto 0; }