/* ============================================================
   MOTEUR VISUEL — socle partagé par toutes les pages du site
   Extrait de la page d'accueil le 19/08/2026 pour être chargé une seule
   fois et servi depuis le cache sur toutes les pages suivantes.
   Contient : le verre, les halos, la progression de lecture, la
   typographie de section, les boutons, la barre d'ancres flottante et
   les animations de scroll (révélation, titres découpés, parallaxe).
   Ne contient rien qui appartienne à une page en particulier.
   ============================================================ */

/* base.css pose overflow-x: hidden sur body, ce qui fait de lui un conteneur
   de défilement et casse position: sticky, dont dépend la section épinglée.
   « clip » coupe pareil mais ne crée pas de conteneur de défilement.
   Si le navigateur ne connaît pas clip, le JS renonce à épingler. */
body.mr-body { overflow-x: clip; }
.mr-body {
  --mr-glass-bg: rgba(255, 255, 255, 0.55);
  --mr-glass-bd: rgba(255, 255, 255, 0.75);
  --mr-glass-sh: 0 30px 70px -30px rgba(10, 14, 20, 0.30);
  /* Courbe d'Apple : départ franc, arrivée très amortie. */
  --mr-ease: cubic-bezier(.28, .11, .32, 1);
  --mr-r-card: 28px;
}
/* ============================================================
   Le verre
   Trois couches : le flou du fond, un blanc très dilué, et une
   arête claire en haut. Jamais de bordure franche.
   ============================================================ */
.mr-body .glass {
  position: relative;
  border-radius: var(--mr-r-card);
  background: var(--mr-glass-bg);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--mr-glass-bd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    var(--mr-glass-sh);
  overflow: hidden;
}
.mr-body .glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* ============================================================
   Halos de fond.
   Un verre posé sur un aplat uni n'est plus du verre : il lui faut
   de la matière à flouter derrière. Des dégradés radiaux plutôt
   qu'un filter: blur, bien moins coûteux.
   ============================================================ */
.mr-halo {
  background-image:
    radial-gradient(58% 52% at 10% 14%, rgba(200, 85, 61, 0.20), transparent 72%),
    radial-gradient(54% 48% at 90% 66%, rgba(255, 91, 58, 0.15), transparent 72%),
    radial-gradient(60% 50% at 46% 106%, rgba(240, 190, 120, 0.20), transparent 74%);
}
/* ============================================================
   Progression de lecture
   ============================================================ */
.mr-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 900;
  pointer-events: none;
}
.mr-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
/* ============================================================
   Typographie de section
   ============================================================ */
.mr-eyebrow {
  margin: 0 0 24px;
  color: var(--ink-mute);
}
.mr-eyebrow--light { color: rgba(255, 255, 255, 0.66); }
.mr-sec-head {
  max-width: 820px;
  margin: 0 auto clamp(56px, 8vh, 92px);
  text-align: center;
}
.mr-sec-head--left {
  max-width: none;
  margin-left: 0;
  text-align: left;
}
.mr-sec-title {
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
.mr-sec-title em { font-style: italic; color: var(--accent); }
.mr-sec-intro {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 58ch;
  margin: 24px auto 0;
  text-wrap: pretty;
}
.mr-sec-head--left .mr-sec-intro { margin-left: 0; }
/* ============================================================
   Boutons : pilules pleines, et lien nu à chevron
   ============================================================ */
.mr-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background .35s var(--mr-ease), color .35s var(--mr-ease),
              border-color .35s var(--mr-ease), transform .35s var(--mr-ease);
}
.mr-btn--solid { background: var(--ink); color: #fff; }
.mr-btn--solid:hover { background: var(--accent); }
.mr-btn--ghost {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  border-color: var(--line-strong);
}
.mr-btn--ghost:hover { background: #fff; border-color: var(--ink); }
.mr-btn--plain { padding: 15px 6px; color: var(--accent); }
.mr-btn--plain:hover { color: var(--ink); }
.mr-btn--lg { padding: 18px 32px; font-size: 16px; }
.mr-btn--light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
}
.mr-btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* ============================================================
   Barre d'ancres flottante, en verre.
   Posée en bas de l'écran plutôt que sous la nav du site : c'est le
   geste des barres de contrôle iOS, et ça évite toute collision
   avec l'en-tête existant.
   ============================================================ */
.mr-subnav {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 850;
  transform: translate(-50%, 130%);
  opacity: 0;
  transition: transform .6s var(--mr-ease), opacity .6s var(--mr-ease);
  pointer-events: none;
}
.mr-subnav.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.mr-subnav__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 40px -14px rgba(10, 14, 20, 0.35);
}
.mr-subnav__pill a {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  transition: color .35s var(--mr-ease);
  white-space: nowrap;
}
.mr-subnav__pill a:hover,
.mr-subnav__pill a.is-active { color: var(--ink); }
.mr-subnav__marker {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px -4px rgba(10, 14, 20, 0.22);
  transition: transform .55s var(--mr-ease), width .55s var(--mr-ease), opacity .3s;
  opacity: 0;
}
.mr-subnav__marker.is-set { opacity: 1; }
@media (max-width: 640px) {
.mr-subnav { bottom: 16px; width: calc(100% - 24px); }
.mr-subnav__pill { justify-content: space-between; width: 100%; }
.mr-subnav__pill a { padding: 10px 10px; font-size: 12px; }
}
.mr-blobs { position: absolute; inset: -10% 0; z-index: 0; pointer-events: none; }
.mr-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .5;
  will-change: transform;
}
.mr-blob--a {
  width: 44vw; height: 44vw; left: -10vw; top: 2%;
  background: radial-gradient(circle, rgba(200, 85, 61, .50), transparent 68%);
}
.mr-blob--b {
  width: 38vw; height: 38vw; right: -8vw; top: 30%;
  background: radial-gradient(circle, rgba(255, 91, 58, .38), transparent 68%);
}
.mr-blob--c {
  width: 36vw; height: 36vw; left: 38%; bottom: -8%;
  background: radial-gradient(circle, rgba(240, 190, 120, .45), transparent 68%);
}
/* La bande s'ouvre en pleine largeur à mesure qu'on la remonte.
   On agit par mise à l'échelle et non par largeur : changer la largeur
   forcerait le canvas à se redessiner à chaque image de défilement. */
.mr-open { overflow: hidden; }
.mr-body .reviews-track { align-items: stretch; gap: 20px; }
.mr-body .review-card {
  width: clamp(300px, 27vw, 360px);
  height: auto;
  min-height: 340px;
  padding: 30px 28px;
  gap: 20px;
  background: var(--mr-glass-bg);
  border: 1px solid var(--mr-glass-bd);
  border-radius: var(--mr-r-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    var(--mr-glass-sh);
  transition: transform .6s var(--mr-ease), box-shadow .6s var(--mr-ease);
}
.mr-body .review-card:hover {
  border-color: var(--mr-glass-bd);
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 44px 80px -34px rgba(10, 14, 20, 0.42);
}
/* La couche claire du verre, posée comme sur les autres cartes. */
.mr-body .review-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.mr-body .review-card > * { position: relative; z-index: 1; }
.mr-body .review-card__stars { color: #E8A317; font-size: 14px; letter-spacing: .14em; }
.mr-body .review-card__google { width: 18px; height: 18px; opacity: .85; }
/* Un avis de six mots ne doit pas laisser un trou de 200 px sous lui. */
.mr-body .review-card__body { justify-content: center; gap: 12px; }
.mr-body .review-card__text {
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-dim);
  -webkit-line-clamp: 8;
}
.mr-body .review-card__more {
  font-size: 13px;
  color: var(--accent);
  align-self: flex-start;
}
.mr-body .review-card__footer {
  padding-top: 18px;
  border-top: 1px solid rgba(10, 14, 20, 0.10);
}
.mr-body .review-card__avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);
}
.mr-body .review-card__author { font-size: 14px; letter-spacing: -0.01em; }
.mr-body .review-card__source {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: none;
}
/* ============================================================
   FIN DE PAGE
   Le bloc .final-stage vient d'accueil.css. Seule la barre d'ancres
   demande un mot ici : posée en verre clair, elle disparaîtrait sur
   la photo sombre du studio. Elle bascule donc en verre sombre dès
   qu'elle flotte au-dessus de ce bloc.
   ============================================================ */
.mr-subnav.is-dark .mr-subnav__pill {
  background: rgba(20, 16, 14, 0.52);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 18px 40px -14px rgba(0, 0, 0, 0.55);
}
.mr-subnav.is-dark .mr-subnav__pill a { color: rgba(244, 241, 236, 0.68); }
.mr-subnav.is-dark .mr-subnav__pill a:hover,
.mr-subnav.is-dark .mr-subnav__pill a.is-active { color: #0A0E14; }
.mr-subnav.is-dark .mr-subnav__marker { background: rgba(244, 241, 236, 0.94); }
@media (prefers-reduced-motion: reduce) {
.mr-subnav { transition: none; }
}

/* ============================================================
   La dalle de verre réfractant
   Une scène sombre, un mot gravé dedans, et une dalle qui le déforme
   réellement au passage (WebGL, voir moteur.js). Le mot et sa légende
   se donnent en HTML : data-mot et data-legende sur le canvas.
   Montée ici depuis accueil.css le 19/08/2026 : chaque page peut
   désormais graver le sien.
   ============================================================ */
.mr-figures__stage {
  position: relative;
  height: min(56vh, 480px);
  min-height: 320px;
  background: #0A0E14;
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  transform: scale(.9);
  transform-origin: center center;
  will-change: transform;
}
.mr-figures__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mr-figures__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.mr-figures__hint {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* Les chiffres posés sous la dalle. Montés depuis accueil.css le
   19/08/2026 : le stage de la dalle vivait déjà ici, sa grille non, et la
   page ville laissait donc la dalle seule au milieu de la page. */
.mr-figures__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1240px;
  margin: clamp(50px, 8vh, 80px) auto 0;
}
@media (max-width: 900px) {
.mr-figures__grid { grid-template-columns: 1fr; max-width: 560px; }
}
.mr-fig {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.mr-fig__v {
  position: relative; z-index: 1;
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: clamp(46px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.mr-fig__u {
  position: relative; z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mr-fig__d {
  position: relative; z-index: 1;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 6px 0 0;
}

/* Montées d'accueil.css le 19/08/2026 : elles y étaient restées alors que
   sept pages du site portent des [data-rv] et des [data-split]. Le JS y
   posait bien la classe .is-in, mais aucune règle ne s'y rattachait :
   ces pages étaient balisées pour s'animer sans jamais s'animer. */
/* ============================================================
   Animations de scroll
   Apple anime en fondu et en échelle, pas en glissement franc :
   l'élément semble se poser, pas arriver.
   ============================================================ */
[data-rv] {
  opacity: 0;
  transform: translateY(16px) scale(.986);
  transition:
    opacity .95s var(--mr-ease),
    transform .95s var(--mr-ease);
}
[data-rv].is-in { opacity: 1; transform: none; }
[data-split] .mr-word { display: inline-block; overflow: hidden; vertical-align: top; }
[data-split] .mr-word > i,
[data-split] .mr-word > em,
[data-split] .mr-word > strong {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 1s var(--mr-ease);
}
/* Le mot ordinaire suit le titre ; l'emphase garde la sienne, sans quoi ce
   sélecteur, plus spécifique que les .titre em du site, l'écraserait. */
[data-split] .mr-word > i      { font-style: inherit; }
[data-split] .mr-word > em     { font-style: italic; }
[data-split] .mr-word > strong { font-weight: 600; }
[data-split].is-in .mr-word > i,
[data-split].is-in .mr-word > em,
[data-split].is-in .mr-word > strong { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
[data-rv] { opacity: 1; transform: none; transition: none; }
[data-split] .mr-word > i,
[data-split] .mr-word > em,
[data-split] .mr-word > strong { transform: none; transition: none; }

}

/* ============================================================
   COMPOSANTS DE MARQUE, partagés par plusieurs pages
   Montés depuis accueil.css le 19/08/2026, quand la page ville a
   demandé la même grammaire que l'accueil. Ce sont des composants,
   pas des morceaux de page : hero en photo pleine largeur, bandeau
   défilant, cartes d'avis Google et leur carrousel, scène finale
   sombre, galerie épinglée à défilement horizontal, accordéon des
   questions. Ils vivent avant les CSS de page dans la cascade, donc
   chaque page peut encore les ajuster chez elle.
   ============================================================ */
.reviews-carousel {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reviews-track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
.reviews-track[data-reviews-cloned="true"] {
  animation: reviews-scroll calc(var(--reviews-count, 5) * 6s) linear infinite;
}
.reviews-carousel:hover .reviews-track,
.reviews-carousel:focus-within .reviews-track,
.reviews-carousel[data-paused="true"] .reviews-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.reviews-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
  }
.reviews-carousel {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.review-card {
  flex: 0 0 auto;
  width: 340px;
  height: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.review-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(10, 14, 20, 0.15);
}
.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-card__stars {
  color: #F5B50A;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.review-card__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.review-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.review-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.review-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}
.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-card__author {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.3;
}
.review-card__source {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-card__more {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .2s ease;
}
.review-card__more:hover,
.review-card__more:focus-visible {
  opacity: .75;
  outline: none;
  text-decoration: underline;
}
.review-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: 85vh;
  padding: 36px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px -20px rgba(10, 14, 20, 0.4);
  color: var(--ink);
  overflow: auto;
}
.review-modal::backdrop {
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(4px);
}
.review-modal[open] {
  animation: review-modal-in .25s ease-out;
}
.review-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.review-modal__close:hover,
.review-modal__close:focus-visible {
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
}
.review-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-right: 36px;
}
.review-modal__stars {
  color: #F5B50A;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}
.review-modal__text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-line;
}
.review-modal__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.review-modal__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 17px;
}
.review-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-modal__author {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.review-modal__source {
  font-size: 10.5px;
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
.review-card {
    width: 280px;
    height: 360px;
  }
}
.home-faq {
  border-top: 1px solid var(--line);
}
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
.faq-grid__sticky {
  position: sticky;
  top: 120px;
}
.faq-grid__title {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.faq-grid__title em {
  font-style: italic;
  color: var(--accent);
}
.faq-grid__intro {
  margin-top: 24px;
  color: var(--ink-dim);
  max-width: 360px;
  font-size: 15px;
  line-height: 1.55;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item__btn {
  width: 100%;
  padding: 26px 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  text-align: left;
  font-size: clamp(17px, 1.6vw, 21px);
  font-family: 'Instrument Serif', serif;
  letter-spacing: -.01em;
  cursor: pointer;
}
.faq-item__plus svg path:nth-child(2) {
  transform-origin: center;
  transition: transform .35s var(--ease-out);
}
.faq-item.is-open .faq-item__plus svg path:nth-child(2) {
  transform: rotate(90deg);
}
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out);
}
.faq-item.is-open .faq-item__body {
  max-height: 320px;
}
.faq-item__answer {
  margin: 0;
  padding: 0 0 26px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}
@media (max-width: 880px) {
.faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
.faq-grid__sticky { position: static; }
}
/* ============================================
   APPEL FINAL (.home-cta)
   Deplace d'accueil.css vers le socle le 19/08/2026 : la page ville
   emploie la meme section et ne charge plus accueil.css, elle affichait
   donc un titre nu de 24 px et des boutons empiles. Charge avant les CSS
   de page, comme le reste du socle.
   ============================================ */
.home-cta {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.home-cta__orb {
  width: 700px;
  height: 700px;
  background: var(--accent);
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .12;
}
.home-cta__inner {
  position: relative;
  text-align: center;
}
.home-cta__title {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.home-cta__title em {
  font-style: italic;
  color: var(--accent);
}
.home-cta__sub {
  margin: 30px auto 0;
  color: var(--ink-dim);
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 560px;
}
.home-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Les deux animations ci-dessous sont appelees plus haut dans ce meme
   fichier (carrousel d'avis, entree de la modale). Elles vivaient dans
   accueil.css : sur toute page sans accueil.css, le carrousel restait
   fige. Deplacees ici le 19/08/2026. */
@keyframes reviews-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes review-modal-in {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: none; }
}

.final-stage {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
  background-image: url('../img/contenu/studio-creatif-desktop.jpg');
  background-size: cover;
  background-position: center 92%;
  background-repeat: no-repeat;
  color: #F4F1EC;
}
@supports (background-image: image-set(url('../img/contenu/studio-creatif-desktop.webp') type('image/webp'))) {
.final-stage {
    background-image: image-set(
      url('../img/contenu/studio-creatif-desktop.webp') type('image/webp'),
      url('../img/contenu/studio-creatif-desktop.jpg') type('image/jpeg')
    );
  }
}
@media (max-width: 767px) {
.final-stage {
    background-image: url('../img/contenu/studio-creatif-mobile.jpg');
    background-position: center 60%;
  }
}
@media (max-width: 767px) {
@supports (background-image: image-set(url('../img/contenu/studio-creatif-mobile.webp') type('image/webp'))) {
.final-stage {
      background-image: image-set(
        url('../img/contenu/studio-creatif-mobile.webp') type('image/webp'),
        url('../img/contenu/studio-creatif-mobile.jpg') type('image/jpeg')
      );
    }
}
}
.final-stage__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 14, 20, .55) 0%,
      rgba(10, 14, 20, .45) 45%,
      rgba(10, 14, 20, .25) 65%,
      rgba(10, 14, 20, .4) 100%
    );
  pointer-events: none;
}
.final-stage__content {
  position: relative;
  z-index: 2;
}
.final-stage .home-faq,
.final-stage .home-cta {
  background: transparent;
}
.final-stage .eyebrow,
.final-stage .faq-grid__title,
.final-stage .faq-grid__intro,
.final-stage .faq-item__btn,
.final-stage .faq-item__answer,
.final-stage .home-cta__title,
.final-stage .home-cta__sub {
  color: #F4F1EC;
}
.final-stage .faq-grid__intro,
.final-stage .faq-item__answer,
.final-stage .home-cta__sub {
  color: rgba(244, 241, 236, .78);
}
.final-stage .faq-item {
  border-color: rgba(244, 241, 236, .18);
}
.final-stage .faq-item__plus,
.final-stage .faq-item__plus svg {
  color: rgba(244, 241, 236, .85);
}
.final-stage .home-cta__orb { display: none; }
.final-stage .btn-ghost {
  color: #F4F1EC;
  border-color: rgba(244, 241, 236, .35);
}
.final-stage .btn-ghost:hover {
  border-color: rgba(244, 241, 236, .7);
  background: rgba(244, 241, 236, .08);
}
.hero-rs {
  margin: 0;
  padding: 0;
}
.hero-rs__card {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  min-height: 100vh;
  isolation: isolate;
}
.hero-rs__bg,
.hero-rs__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.hero-rs__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(10, 14, 20, .65) 0%,
      rgba(10, 14, 20, .35) 40%,
      rgba(10, 14, 20, 0) 65%
    ),
    linear-gradient(
      to bottom,
      rgba(10, 14, 20, 0) 50%,
      rgba(10, 14, 20, .45) 100%
    );
  pointer-events: none;
}
.hero-rs__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Espace top : header fixe (~80px) + respiration */
  padding: 160px clamp(32px, 6vw, 96px) 50px;
  color: #F4F1EC;
}
.hero-rs__top { flex-shrink: 0; }
.hero-rs__bottom { margin-top: auto; flex-shrink: 0; }
.hero-rs__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 236, .25);
  background: rgba(10, 14, 20, .25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  letter-spacing: .1em;
  color: #F4F1EC;
}
.hero-rs__chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.hero-rs__main {
  margin-top: 32px;
  max-width: 720px;
}
.hero-rs__title {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(44px, 5vw, 84px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #F4F1EC;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero-rs__title em {
  font-style: italic;
  color: #F4F1EC;
  position: relative;
}
.hero-rs__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .08em;
  height: .12em;
  background: var(--accent);
  opacity: .55;
}
.hero-rs__intro {
  margin: 26px 0 0;
  max-width: 480px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(244, 241, 236, .9);
  text-wrap: pretty;
  text-shadow: 0 1px 20px rgba(0, 0, 0, .25);
}
.hero-rs__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.hero-rs__stats {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}
.hero-rs__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-rs__stat-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, .7);
}
.hero-rs__stat-v {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #F4F1EC;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
.hero-rs__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10, 14, 20, .35);
  border: 1px solid rgba(244, 241, 236, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F4F1EC;
  font-size: 12px;
}
.hero-rs__trust-stars {
  color: var(--accent);
  letter-spacing: 1px;
  font-size: 14px;
}
.hero-rs__trust-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
}
@media (max-width: 980px) {
.hero-rs__card { min-height: 100vh; border-radius: 0; }
.hero-rs__content { padding: 100px 22px 36px; min-height: 100vh; }
.hero-rs__veil {
    background:
      linear-gradient(
        to right,
        rgba(10, 14, 20, .7) 0%,
        rgba(10, 14, 20, .5) 60%,
        rgba(10, 14, 20, .3) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(10, 14, 20, 0) 30%,
        rgba(10, 14, 20, .6) 100%
      );
  }
.hero-rs__bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-rs__trust { font-size: 11px; }
}
@media (max-width: 560px) {
.hero-rs__title { font-size: clamp(40px, 10.5vw, 64px); }
.hero-rs__intro { font-size: 15px; }
.hero-rs__stats { gap: 24px; }
.hero-rs__stat-v { font-size: 26px; }
}
@media (max-width: 700px) {
.hero-rs__content {
    padding-top: 50vh;
    padding-bottom: 28px;
    justify-content: flex-start;
  }
.hero-rs__bottom { margin-top: auto; }
.hero-rs__veil {
    background: linear-gradient(
      to bottom,
      rgba(10, 14, 20, 0) 30%,
      rgba(10, 14, 20, .25) 50%,
      rgba(10, 14, 20, .55) 78%,
      rgba(10, 14, 20, .7) 100%
    );
  }
.hero-rs__top { margin-bottom: 12px; }
.hero-rs__stats {
    width: 100%;
    gap: 18px 22px;
  }
}
.mr-pin { position: relative; }
.mr-pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.mr-pin__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mr-pin__head b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mr-rail {
  display: flex;
  gap: 20px;
  padding: 0 40px;
  will-change: transform;
}
.mr-rail__item {
  flex: 0 0 clamp(280px, 34vw, 460px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mr-rail__visual {
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(10, 14, 20, 0.42);
  transition: transform .6s var(--mr-ease), box-shadow .6s var(--mr-ease);
}
.mr-rail__item:hover .mr-rail__visual {
  transform: translateY(-6px);
  box-shadow: 0 44px 80px -34px rgba(10, 14, 20, 0.50);
}
.mr-rail__visual .project-visual { border-radius: 22px; }
.mr-rail__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mr-rail__cat {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.mr-rail__title {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.mr-rail__cta {
  flex: none;
  font-size: 13px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .45s var(--mr-ease);
}
.mr-rail__item:hover .mr-rail__cta { transform: translateX(4px); }
.mr-rail__end {
  flex: 0 0 clamp(240px, 26vw, 330px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 34px;
  border-radius: 22px;
  border: 1px dashed var(--line-strong);
  text-align: left;
}
.mr-rail__end h3 {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
}
.mr-rail__end p { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); margin: 0; }
.mr-rail__end .mr-btn { align-self: flex-start; }
@media (max-width: 860px) {
.mr-pin { height: auto !important; }
.mr-pin__stage {
    position: static;
    height: auto;
    padding-bottom: 20px;
  }
.mr-pin__head { padding: 0 22px 20px; }
.mr-rail {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 22px 78px;
    -webkit-overflow-scrolling: touch;
  }
.mr-rail__item, .mr-rail__end { scroll-snap-align: start; flex-basis: 78vw; }
}
.mr-reviews {
  position: relative;
  isolation: isolate;
  padding: clamp(90px, 13vh, 150px) 0 clamp(70px, 10vh, 110px);
  background-color: var(--bg-2);
  background-image: url('../img/contenu/reviews-bg.jpg');
  background-size: cover;
  background-position: center center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@supports (background-image: image-set(url('../img/contenu/reviews-bg.webp') type('image/webp'))) {
.mr-reviews {
    background-image: image-set(
      url('../img/contenu/reviews-bg.webp') type('image/webp'),
      url('../img/contenu/reviews-bg.jpg') type('image/jpeg')
    );
  }
}
.mr-reviews__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Assez opaque pour que les avis se lisent, assez transparent pour que
     la texture reste visible : sans elle, le verre n'a rien à flouter. */
  background:
    linear-gradient(180deg, rgba(244, 241, 236, 0.86) 0%, rgba(244, 241, 236, 0.58) 44%, rgba(244, 241, 236, 0.84) 100%);
  pointer-events: none;
}
.mr-reviews__head { text-align: center; margin-bottom: clamp(38px, 5vh, 56px); }
.mr-score {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 18px 30px;
  margin-top: 30px;
  border-radius: 999px;
  text-align: left;
}
.mr-score__note {
  position: relative; z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mr-score__v {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.mr-score__stars {
  color: #E8A317;
  font-size: 15px;
  letter-spacing: .12em;
  line-height: 1;
}
.mr-score__sep {
  position: relative; z-index: 1;
  width: 1px;
  align-self: stretch;
  background: var(--line-strong);
}
.mr-score__meta {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mr-score__count {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.mr-score__src {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 32ch;
}
.mr-score__src a {
  color: var(--accent);
  transition: color .3s var(--mr-ease);
}
.mr-score__src a:hover { color: var(--ink); }
@media (max-width: 600px) {
.mr-score {
    flex-direction: column;
    gap: 16px;
    border-radius: var(--mr-r-card);
    padding: 24px 28px;
    text-align: center;
  }
.mr-score__sep { width: 60%; height: 1px; align-self: center; }
.mr-score__meta { align-items: center; }
.mr-score__src { max-width: none; }
}
.mr-carousel { padding: 14px 0 6px; }
.mr-reviews__foot {
  text-align: center;
  margin: clamp(30px, 4vh, 44px) 0 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mr-reviews__foot a { color: var(--ink-dim); transition: color .3s var(--mr-ease); }
.mr-reviews__foot a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.mr-rail { transform: none !important; }
}