/* ==================================================================
   NIGHT BOX — feuille de style
   ------------------------------------------------------------------
   Tout part du logo : un anneau magenta → violet → cyan, un lettrage
   lourd, posé sur du noir. Le site rejoue la sensation d'entrer dans
   une tonnelle le soir : il fait sombre, une lampe UV mauve éclaire,
   quelques éléments ressortent.

   Règle directrice : LA LUMIÈRE EST UN ACCENT, JAMAIS LE FOND.
   Le violet sert aux halos, bordures et aplats ; il ne devient jamais
   la couleur de fond, et le site n'est pas « fluo ».

   SOMMAIRE
     1.  Polices
     2.  Jetons de design
     3.  Base
     4.  Utilitaires
     5.  Boutons
     6.  En-tête
     7.  Hero
     8.  Titres de section
     9.  Concept
     10. Cartes de packs
     11. Étapes
     12. Options
     13. Galerie
     14. Appel à l'action
     15. Pied de page
     16. Pages intérieures
     17. Formulaire
     18. Mouvement réduit
   ================================================================== */

/* --- 0. L'attribut hidden l'emporte toujours ----------------------
   Beaucoup de blocs déclarent display:flex ou grid, ce qui écrase la
   règle du navigateur [hidden]{display:none} : l'élément reste visible
   alors que le JavaScript le croit masqué. C'est le seul !important de
   la feuille, et il est nécessaire. */
[hidden] {
  display: none !important;
}

/* --- 1. Polices -------------------------------------------------- */
/* Auto-hébergées : passer par le CDN Google exposerait l'IP des
   visiteurs à un tiers, ce que l’Autorité de protection des données sanctionne. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Jetons de design ----------------------------------------- */
:root {
  /* Fonds : la nuit, du plus profond au plus proche */
  --night: #07060a;
  --night-900: #0b0912;
  --night-800: #120e1c;
  --night-700: #1a1426;

  /* Texte. Contrastes mesurés sur --night. */
  --chalk: #f4f1f8; /* 18:1  */
  --chalk-dim: #a79fb8; /* 8:1   */
  --chalk-faint: #8f86a3; /* 5,9:1 */

  /* Lumières, prélevées sur le logo */
  --uv: #a21cf0; /* le G du logo. 3,8:1 → DÉCORATIF, jamais de texte */
  --uv-bright: #c558ff; /* 6:1 → la version lisible en texte */
  --magenta: #e22cf5; /* haut de l'anneau */
  --cyan: #00c0fb; /* bas de l'anneau */

  --trait: rgba(244, 241, 248, 0.1);
  --trait-fort: rgba(244, 241, 248, 0.16);

  --arc: linear-gradient(100deg, var(--magenta), var(--uv) 45%, var(--cyan));

  /* Angles nets : on est plus proche du flyer que du faire-part. */
  --r-media: 3px;
  --r-carte: 6px;
  --r-bloc: 10px;

  --doux: cubic-bezier(0.22, 1, 0.36, 1);
  --largeur: 88rem;
}

/* --- 3. Base ------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* compense l'en-tête fixe */
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background-color: var(--night);
  color: var(--chalk);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

::selection {
  background-color: var(--uv);
  color: var(--chalk);
}

:focus-visible {
  outline: 2px solid var(--uv-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement, visible seulement au clavier */
.saut {
  position: absolute;
  left: -9999px;
}

.saut:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--chalk);
  color: var(--night);
  font-size: 0.875rem;
}

/* --- 4. Utilitaires ----------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Titres : capitales lourdes, très serrées. Énergie d'affiche. */
.titre {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
}

/* « m² » ne doit jamais passer en capitales. */
.titre--mixte {
  text-transform: none;
}

.chapeau {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--chalk-dim);
  text-wrap: pretty;
}

/* Sur-titre. Deux sections maximum : au-delà, il ne hiérarchise plus rien. */
.surtitre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--uv-bright);
}

/* Le dégradé de l'anneau appliqué au texte. Un mot, pas plus. */
.arc {
  background-image: var(--arc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Signature graphique : la dérive chromatique magenta / cyan, reprise
   des deux extrémités de l'anneau. Titres majeurs uniquement. */
.chroma {
  text-shadow:
    -0.02em -0.01em 0 rgba(226, 44, 245, 0.42),
    0.02em 0.01em 0 rgba(0, 192, 251, 0.42);
}

/* Le halo de la lampe UV : une tache de lumière dans le noir. */
.halo {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background-image: radial-gradient(
    closest-side,
    rgba(162, 28, 240, 0.55),
    transparent
  );
  filter: blur(40px);
}

.halo--pulse {
  animation: pulse-uv 7s ease-in-out infinite;
}

/* Grain : la texture d'une photo prise dans le noir. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Filet dégradé, repris de l'anneau. */
.filet-arc {
  height: 1px;
  width: 10rem;
  background-image: linear-gradient(
    90deg,
    var(--uv),
    var(--cyan) 70%,
    transparent
  );
}

/* Apparition au défilement. Sans JavaScript, .reveal reste visible :
   c'est le script qui ajoute .reveal--cache au chargement. */
.reveal--cache {
  opacity: 0;
  transform: translateY(16px);
}

.reveal--vu {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--doux),
    transform 0.7s var(--doux);
}

@keyframes pulse-uv {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes monte {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes zoom-hero {
  from {
    transform: scale(1.08);
  }
  to {
    transform: none;
  }
}

/* --- 5. Boutons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.3s var(--doux),
    border-color 0.3s var(--doux),
    box-shadow 0.3s var(--doux),
    transform 0.3s var(--doux);
}

.btn:active {
  transform: scale(0.98);
}

/* Pastille claire : contraste maximal sur le noir, comme le « EVENTS »
   du logo. C'est l'action principale. */
.btn--clair {
  background: var(--chalk);
  color: var(--night);
}

.btn--clair:hover {
  background: #fff;
  box-shadow: 0 0 36px -6px rgba(162, 28, 240, 0.75);
}

/* Aplat UV : la lampe elle-même. Blanc sur violet = 5,3:1. */
.btn--uv {
  background: var(--uv);
  color: #fff;
}

.btn--uv:hover {
  background: var(--uv-bright);
  box-shadow: 0 0 40px -8px rgba(197, 88, 255, 0.9);
}

/* Contour discret, qui s'allume au survol. */
.btn--fantome {
  background: transparent;
  border: 1px solid var(--trait-fort);
  color: var(--chalk);
}

.btn--fantome:hover {
  border-color: rgba(197, 88, 255, 0.7);
  background: rgba(162, 28, 240, 0.1);
  color: #fff;
}

.btn .fleche {
  transition: transform 0.3s var(--doux);
}

.btn:hover .fleche {
  transform: translateX(4px);
}

.btn--large {
  width: 100%;
}

/* --- 6. En-tête ---------------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  /* Au-dessus de la bulle du chatbot (60) : sans cela, elle flotte
     par-dessus le menu mobile et intercepte les clics du coin
     inférieur droit. */
  z-index: 70;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.5s var(--doux),
    border-color 0.5s var(--doux);
}

/* .est-defile est posée par le script au-delà de 24 px de défilement.
   Sans JavaScript, l'en-tête reste opaque (voir plus bas). */
.entete.est-defile {
  background: rgba(7, 6, 10, 0.8);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--trait);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}

.marque {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.5s var(--doux);
}

.marque:hover {
  transform: scale(1.04);
}

.marque img {
  /* 50 px de boîte pour 44 px de tracé : le fichier porte une marge
     transparente qui empêche la pointe du toit de toucher le bord. */
  height: 50px;
  width: auto;
  /* Filet de sécurité : si un conteneur étroit venait à réduire la
     largeur (max-width: 100% de la base), le logo se contenterait de
     rétrécir au lieu d'être écrasé horizontalement. */
  object-fit: contain;
}

.nav {
  display: none;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav a {
  position: relative;
  font-size: 0.875rem;
  color: var(--chalk-dim);
  transition: color 0.3s var(--doux);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--chalk);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.375rem;
  width: 100%;
  height: 1px;
  background-image: var(--arc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--doux);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entete__cta {
  display: none;
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--chalk);
  cursor: pointer;
  transition: background-color 0.3s var(--doux);
}

.burger:hover {
  background: rgba(244, 241, 248, 0.1);
}

/* Ouverture et fermeture du menu.

   On n'anime QUE l'opacité et transform : ce sont les deux seules
   propriétés que le navigateur traite sans recalculer la mise en page.
   Animer la hauteur obligeait à tout remesurer à chaque image, et le
   halo flouté à 40 px était repeint autant de fois — d'où les saccades.

   Le menu appartient à l'en-tête, qui est en position fixe : sa hauteur
   ne déplace donc rien dans la page. L'animer n'apportait rien. */
.menu {
  /* En flux, le menu allongeait l'en-tête : son fond sombre restait
     donc peint sur toute cette hauteur le temps du repli, d'où le bloc
     noir qui traînait. En position absolue, il se détache sous la
     barre et l'en-tête garde toujours sa hauteur de 5 rem. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  border-top: 1px solid var(--trait);
  background: var(--night-900);
  padding: 1.5rem 0;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 0.26s var(--doux),
    transform 0.32s var(--doux);
}

.menu.est-ouvert {
  opacity: 1;
  transform: none;
}

/* Les entrées arrivent en cascade, décalées de 40 ms. Le retard est
   posé sur l'élément par le HTML généré (--rang). */
.menu li,
.menu .btn {
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.3s var(--doux),
    transform 0.3s var(--doux);
  transition-delay: calc(var(--rang, 0) * 40ms);
}

.menu.est-ouvert li,
.menu.est-ouvert .btn {
  opacity: 1;
  transform: none;
}

/* Au repli, tout part ensemble : une cascade inversée traîne. */
.menu:not(.est-ouvert) li,
.menu:not(.est-ouvert) .btn {
  transition-delay: 0s;
}

.menu[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu li,
  .menu .btn {
    transition: none;
  }
}

/* Le hamburger se transforme en croix. Les trois traits de l'icône
   sont pivotés dans le repère du viewBox (24 × 24, centre 12,12) :
   le premier descend de 7 unités puis pivote, le dernier fait
   l'inverse, celui du milieu s'efface. */
.burger svg path {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition:
    transform 0.34s var(--doux),
    opacity 0.18s var(--doux);
}

.burger[aria-expanded="true"] svg path:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.burger[aria-expanded="true"] svg path:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] svg path:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

@media (prefers-reduced-motion: reduce) {
  .burger svg path {
    transition: none;
  }
}

.menu a:not(.btn) {
  display: block;
  padding: 1rem 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  transition: color 0.3s var(--doux);
}

.menu a:not(.btn):hover {
  color: var(--uv-bright);
}

.menu li + li a {
  border-top: 1px solid var(--trait);
}

.menu .btn {
  margin-top: 1.75rem;
  justify-content: center;
}

/* --- 7. Hero ------------------------------------------------------- */
.hero {
  position: relative;
}

.hero__scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 94svh;
  overflow: hidden;
  background: var(--night);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  animation: zoom-hero 2s var(--doux) both;
}

/* Voiles successifs : on écrase la photo pour ne garder que les lumières,
   puis on la baigne d'une teinte UV comme sous une lampe mauve. */
.hero__voile {
  position: absolute;
  inset: 0;
}

.hero__voile--nuit {
  background: linear-gradient(
    to top,
    var(--night),
    rgba(7, 6, 10, 0.7) 50%,
    rgba(7, 6, 10, 0.4)
  );
}

.hero__voile--uv {
  background: radial-gradient(
    120% 80% at 15% 100%,
    rgba(162, 28, 240, 0.42),
    transparent 60%
  );
}

.hero__voile--cyan {
  background: radial-gradient(
    90% 60% at 95% 10%,
    rgba(0, 192, 251, 0.18),
    transparent 55%
  );
}

.hero__contenu {
  position: relative;
  z-index: 2;
  /* padding-block seulement : le retrait latéral vient de .conteneur. */
  padding-block: 8rem 7rem;
}

.hero__titre {
  max-width: 56rem;
  font-size: clamp(2.5rem, 8vw, 5rem);
  animation: monte 0.85s var(--doux) both;
  animation-delay: 80ms;
}

.hero__chapeau {
  max-width: 32rem;
  margin-top: 2rem;
  color: var(--chalk-dim);
  animation: monte 0.85s var(--doux) both;
  animation-delay: 260ms;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
  animation: monte 0.85s var(--doux) both;
  animation-delay: 340ms;
}

/* Aperçu immédiat de la gamme, dès le premier écran. */
.gamme {
  position: relative;
  z-index: 2;
}

.gamme__liste {
  display: grid;
  margin-top: -3rem;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-bloc);
  background: rgba(18, 14, 28, 0.9);
  backdrop-filter: blur(16px);
  animation: monte 0.85s var(--doux) both;
  animation-delay: 440ms;
}

.gamme__item + .gamme__item {
  border-top: 1px solid var(--trait);
}

.gamme__lien {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  transition: background-color 0.3s var(--doux);
}

.gamme__lien:hover {
  background: rgba(162, 28, 240, 0.1);
}

.gamme__lien::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background-image: var(--arc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--doux);
}

.gamme__lien:hover::after {
  transform: scaleX(1);
}

.gamme__taille {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.gamme__format {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--chalk-faint);
}

.gamme__lien svg {
  flex-shrink: 0;
  color: var(--chalk-faint);
  transition:
    transform 0.3s var(--doux),
    color 0.3s var(--doux);
}

.gamme__lien:hover svg {
  transform: translateX(4px);
  color: var(--uv-bright);
}

/* --- 8. Titres de section ------------------------------------------ */
.section {
  position: relative;
  padding: 5rem 0;
}

.section--sombre {
  background: var(--night-900);
  border-block: 1px solid var(--trait);
}

.section--lampe {
  overflow: hidden;
  border-block: 1px solid var(--trait);
}

.section__titre {
  font-size: clamp(2.125rem, 5vw, 3.5rem);
}

.section__intro {
  max-width: 40rem;
}

.section__intro .chapeau {
  margin-top: 1.5rem;
}

/* --- 9. Concept ---------------------------------------------------- */
.concept__grille {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.concept__visuel {
  position: relative;
  /* Le portrait 4/5 faisait une photo plus haute que le texte qu'elle
     accompagne. En paysage, elle illustre sans écraser. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-media);
  background: var(--night-800);
}

.concept__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La lumière mauve prend le dessus sur la photo. */
.concept__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    200deg,
    rgba(162, 28, 240, 0.28),
    transparent 55%,
    rgba(7, 6, 10, 0.55)
  );
}

.reperes {
  display: grid;
  gap: 1px;
  margin-top: 5rem;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--trait);
}

.repere {
  position: relative;
  padding: 2rem;
  background: var(--night-800);
  transition: background-color 0.5s var(--doux);
}

.repere:hover {
  background: var(--night-700);
}

.repere::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background-image: var(--arc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--doux);
}

.repere:hover::before {
  transform: scaleX(1);
}

.repere svg {
  color: var(--uv-bright);
}

.repere h3 {
  margin-top: 1.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.repere p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

/* --- 10. Cartes de packs -------------------------------------------- */
.packs__grille {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--night-800);
  transition:
    transform 0.5s var(--doux),
    border-color 0.5s var(--doux),
    box-shadow 0.5s var(--doux);
}

.pack--phare {
  border-color: rgba(162, 28, 240, 0.45);
}

.pack:hover,
.pack:focus-within {
  transform: translateY(-6px);
  border-color: rgba(162, 28, 240, 0.6);
  box-shadow: 0 30px 70px -40px rgba(162, 28, 240, 0.85);
}

/* Halo qui s'allume au survol, comme une lampe qu'on approche. */
.pack__halo {
  top: -4rem;
  left: 50%;
  width: 16rem;
  height: 16rem;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.7s var(--doux);
}

.pack:hover .pack__halo {
  opacity: 0.6;
}

.pack__visuel {
  position: relative;
  /* Format large sur téléphone : en 4/5 les photos mangeaient tout
     l'écran et il fallait défiler longuement pour comparer. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--night-700);
}

.pack__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition:
    transform 0.7s var(--doux),
    opacity 0.7s var(--doux);
}

.pack:hover .pack__visuel img {
  transform: scale(1.045);
  opacity: 1;
}

.pack__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--night), rgba(7, 6, 10, 0.25) 60%, transparent),
    radial-gradient(
      80% 60% at 50% 110%,
      rgba(162, 28, 240, 0.4),
      transparent 65%
    );
}

.pack__etiquette {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(197, 88, 255, 0.5);
  border-radius: 999px;
  background: rgba(7, 6, 10, 0.7);
  backdrop-filter: blur(4px);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uv-bright);
}

.pack__pied-visuel {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.pack__taille {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: -0.035em;
}

.pack__rond {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--chalk);
  color: var(--night);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.5s var(--doux),
    transform 0.5s var(--doux);
}

.pack:hover .pack__rond {
  opacity: 1;
  transform: none;
}

.pack__corps {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem 1.25rem 1.5rem;
}

/* Indicateur de gamme : trois segments remplis selon le format.
   C'est ce qui rend la progression petit → moyen → grand immédiate. */
.jauge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.jauge span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(244, 241, 248, 0.15);
}

.jauge span.est-plein {
  background-image: var(--arc);
}

.pack__format {
  margin-top: 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uv-bright);
}

.pack__nom {
  margin-top: 0.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
}

/* Le lien ne porte que le nom du pack — c'est lui qui est annoncé aux
   lecteurs d'écran — mais toute la carte reste cliquable. */
.pack__nom a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pack__accroche {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.pack__inclus {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.pack__inclus li {
  display: flex;
  gap: 0.75rem;
}

.pack__inclus li + li {
  margin-top: 0.625rem;
}

.pack__inclus li::before {
  content: "";
  flex-shrink: 0;
  width: 0.75rem;
  height: 1px;
  margin-top: 0.625rem;
  background: linear-gradient(90deg, var(--uv), var(--cyan));
}

.pack__voir {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.3s var(--doux);
}

.pack:hover .pack__voir {
  color: var(--uv-bright);
}

/* Repère de progression au-dessus de la grille */
.progression {
  display: none;
  width: 18rem;
}

.progression__barres {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progression__barres span {
  height: 4px;
  border-radius: 999px;
}

.progression__barres span:nth-child(1) {
  flex: 1;
  background: rgba(244, 241, 248, 0.15);
}

.progression__barres span:nth-child(2) {
  flex: 2;
  background: rgba(162, 28, 240, 0.6);
}

.progression__barres span:nth-child(3) {
  flex: 3;
  background: linear-gradient(90deg, var(--uv), var(--cyan));
}

.progression__legende {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.packs__aide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
  text-align: center;
}

.packs__aide p {
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

/* --- 11. Étapes ------------------------------------------------------ */
.etapes {
  position: relative;
  display: grid;
  gap: 3rem;
  margin-top: 4rem;
}

.etape__puce {
  display: none;
  width: 7px;
  height: 7px;
  margin-bottom: 2rem;
  border-radius: 999px;
  background: var(--uv-bright);
  box-shadow:
    0 0 0 6px var(--night),
    0 0 16px 2px rgba(197, 88, 255, 0.8);
}

.etape__numero {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--uv-bright);
}

.etape h3 {
  margin-top: 1rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.etape p {
  max-width: 20rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.etapes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--trait);
}

/* --- 12. Options ------------------------------------------------------ */
.options__grille {
  display: grid;
  gap: 3.5rem;
}

.options__visuel {
  position: relative;
  display: none;
  aspect-ratio: 3 / 2;
  margin-top: 3rem;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-media);
}

.options__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.options__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(162, 28, 240, 0.3), transparent 60%);
}

.option {
  position: relative;
  border-bottom: 1px solid var(--trait);
}

.options__liste {
  border-top: 1px solid var(--trait);
}

.option::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background-image: linear-gradient(
    to bottom,
    var(--magenta),
    var(--uv),
    var(--cyan)
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--doux);
}

.option:hover::before {
  transform: scaleY(1);
}

.option__contenu {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  transition: padding-left 0.5s var(--doux);
}

.option:hover .option__contenu {
  padding-left: 1rem;
}

.option svg {
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--uv-bright);
  transition: color 0.3s var(--doux);
}

.option:hover svg {
  color: var(--chalk);
}

.option h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.option p {
  max-width: 24rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

/* --- 13. Galerie ------------------------------------------------------ */
/* Galerie d'inspiration. Ce sont des images d'ambiance : elles doivent
   se parcourir d'un regard, pas se dérouler sur des milliers de pixels.
   Deux colonnes carrées sur téléphone, mosaïque compacte au-delà. */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 3rem;
}

.galerie figure {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-media);
  background: var(--night-800);
}

.galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition:
    transform 0.9s var(--doux),
    opacity 0.9s var(--doux);
}

.galerie figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 6, 10, 0.15),
    rgba(7, 6, 10, 0.55)
  );
  transition: opacity 0.5s var(--doux);
}

.galerie figure:hover img {
  transform: scale(1.04);
  opacity: 1;
}

.galerie figure:hover::after {
  opacity: 0.6;
}

.galerie__pied {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 4rem;
  text-align: center;
}

.galerie__pied .chapeau {
  max-width: 28rem;
}

/* --- 14. Appel à l'action --------------------------------------------- */
.appel {
  padding-bottom: 5rem;
}

.appel__bloc {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-bloc);
  background: var(--night-900);
  text-align: center;
}

.appel__bloc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.appel__voile {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    100% 120% at 50% 120%,
    rgba(162, 28, 240, 0.45),
    rgba(7, 6, 10, 0.9) 65%
  );
}

.appel__contenu {
  position: relative;
  z-index: 2;
  max-width: 42rem;
  margin-inline: auto;
}

.appel__titre {
  font-size: clamp(2.125rem, 5vw, 3.75rem);
}

.appel__contenu p {
  max-width: 32rem;
  margin: 1.5rem auto 0;
  color: var(--chalk-dim);
}

.appel__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* --- 15. Pied de page -------------------------------------------------- */
.pied {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--trait);
  background: var(--night-900);
  /* Moins d'air en bas qu'en haut : sous la signature, il n'y a plus
     rien à séparer. */
  padding: 4rem 0 1.75rem;
}

.pied__grille {
  display: grid;
  gap: 3rem;
}

.pied__intro {
  max-width: 24rem;
}

.pied__intro .marque img {
  height: 82px;
}

.pied__intro p {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

/* Le slogan doit passer après la règle ci-dessus, sinon il en hérite
   la taille et la couleur estompée. Pas de dégradé .arc ici : il est
   réservé à un mot isolé, pas à une ligne entière. */
.pied__intro .pied__slogan {
  margin-top: 1.5rem;
  color: var(--chalk);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.pied__intro .btn {
  margin-top: 1.75rem;
}

.pied h2 {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.pied nav ul {
  margin-top: 1.25rem;
}

.pied nav li + li {
  margin-top: 0.75rem;
}

.pied nav a {
  font-size: 0.875rem;
  color: var(--chalk-dim);
  transition: color 0.3s var(--doux);
}

.pied nav a:hover {
  color: var(--chalk);
}

.pied__coordonnees {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}

/* Les deux liens côte à côte, comme les autres blocs du pied. */
.pied__coordonnees-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.pied__bas {
  /* Même écart que les autres séparations du pied de page : il était
     une fois et demie plus grand, ce qui creusait un trou sous les
     coordonnées. */
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}

.pied__mentions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

/* --- 16. Pages intérieures --------------------------------------------- */
.entete-page {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--trait);
  background: var(--night-900);
  padding: 8rem 0 4rem;
}

.entete-page__titre {
  max-width: 48rem;
  font-size: clamp(2.375rem, 6vw, 4rem);
}

.entete-page .chapeau {
  max-width: 36rem;
  margin-top: 1.5rem;
}

.fil {
  margin-bottom: 2rem;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.fil a {
  transition: color 0.3s var(--doux);
}

.fil a:hover {
  color: var(--chalk);
}

.fil [aria-current="page"] {
  color: var(--chalk);
}

.fil__sep {
  color: rgba(244, 241, 248, 0.3);
}

/* Page de détail d'un pack */
.detail__banniere {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-bloc);
  background: var(--night-800);
}

.detail__banniere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__grille {
  display: grid;
  gap: 3.5rem;
}

.detail__position {
  padding: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--night-800);
}

.detail__position p {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.detail__position .jauge {
  margin-top: 1rem;
}

.detail__legende {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.detail h2 {
  margin-top: 3.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.detail__inclus {
  margin-top: 2rem;
  border-top: 1px solid var(--trait);
}

.detail__inclus li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--trait);
  color: var(--chalk-dim);
}

.detail__inclus svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--uv-bright);
}

.detail__notes {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.detail__notes li {
  display: flex;
  gap: 0.75rem;
}

.detail__notes li + li {
  margin-top: 0.75rem;
}

.detail__notes li::before {
  content: "";
  flex-shrink: 0;
  width: 0.75rem;
  height: 1px;
  margin-top: 0.625rem;
  background: linear-gradient(90deg, var(--uv), var(--cyan));
}

.encadre {
  padding: 2rem;
  border-radius: var(--r-carte);
  background: var(--night-800);
}

.encadre h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.encadre ul {
  margin-top: 1.25rem;
}

.encadre li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.encadre li + li {
  margin-top: 0.75rem;
}

.encadre li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--uv);
}

/* Prix de la formule, sur la page de pack uniquement. Les cartes de
   l'accueil et de la liste restent sans tarif : on présente l'offre,
   pas une grille. Il est affiché ici parce que Google l'annonce dans
   ses résultats — le balisage doit avoir un équivalent visible. */
.detail__prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
}

.detail__prix strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--chalk);
}

.detail__prix span {
  font-size: 0.8125rem;
  color: var(--chalk-faint);
}

.detail__prix-note {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

.encadre__suite {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}

.encadre__suite p {
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.encadre__suite .btn {
  margin-top: 1.5rem;
}

.encadre__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
  transition: color 0.3s var(--doux);
}

.encadre__lien:hover {
  color: var(--chalk);
}

/* Page 404 */
.introuvable {
  display: flex;
  align-items: center;
  min-height: 70svh;
  padding: 8rem 0;
  text-align: center;
}

.introuvable .chapeau {
  max-width: 28rem;
  margin: 1.5rem auto 0;
}

.introuvable__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* --- 17. Formulaire ---------------------------------------------------- */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.champs {
  display: grid;
  gap: 1.5rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.champ__intitule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.champ__requis {
  color: var(--uv-bright);
}

.champ__aide {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--chalk-dim);
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--night-800);
  color: var(--chalk);
  font-family: inherit;
  font-size: 0.875rem;
  transition:
    border-color 0.3s var(--doux),
    box-shadow 0.3s var(--doux);
}

.formulaire textarea {
  border-radius: var(--r-carte);
  resize: vertical;
  min-height: 9rem;
}

.formulaire input::placeholder,
.formulaire textarea::placeholder {
  color: var(--chalk-faint);
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  border-color: rgba(197, 88, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(162, 28, 240, 0.18);
  outline: none;
}

/* Le chevron natif est masqué : on dessine le nôtre pour rester cohérent. */
.champ--liste {
  position: relative;
}

.formulaire select {
  appearance: none;
  padding-right: 3rem;
}

.champ--liste svg {
  position: absolute;
  right: 1.25rem;
  bottom: 1.125rem;
  pointer-events: none;
  color: var(--chalk-faint);
}

/* Piège à robots : invisible pour les humains, rempli par les bots. */
.piege {
  position: absolute;
  left: -9999px;
}

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}

.formulaire__mention {
  font-size: 0.75rem;
  color: var(--chalk-dim);
}

.message {
  font-size: 0.875rem;
}

.message--erreur {
  color: var(--magenta);
}

.confirmation {
  padding: 2.5rem;
  border: 1px solid rgba(162, 28, 240, 0.4);
  border-radius: var(--r-carte);
  background: var(--night-800);
  text-align: center;
}

.confirmation {
  max-width: 44rem;
  margin-inline: auto;
}

.confirmation__titre {
  margin-top: 1.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* --- Récapitulatif de la demande envoyée -------------------------- */
.recap {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
  text-align: left;
}

.confirmation .recap h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.recap__lignes {
  margin: 1.5rem 0 0;
}

.recap__lignes > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--trait);
}

.recap__lignes dt {
  flex: none;
  width: 8rem;
  font-size: 0.875rem;
  color: var(--chalk-faint);
}

.recap__lignes dd {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--chalk);
}

.recap__note {
  color: var(--chalk-dim);
  font-size: 0.8125rem;
}

.recap__options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recap__options li + li {
  margin-top: 0.375rem;
}

.confirmation .recap__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin: 1.5rem 0 0;
}

.confirmation .recap__total span {
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.recap__total strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--chalk);
}

.confirmation .recap__mention {
  max-width: none;
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

.confirmation__rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-inline: auto;
  border-radius: 999px;
  background: var(--uv);
  color: #fff;
  box-shadow: 0 0 30px -4px rgba(162, 28, 240, 0.9);
}

.confirmation h2 {
  margin-top: 1.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.confirmation p {
  max-width: 24rem;
  margin: 0.75rem auto 0;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.contact__grille {
  display: grid;
  gap: 3.5rem;
}

.rappel {
  margin-top: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
}

.rappel > p {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.rappel ul {
  margin-top: 1.25rem;
}

.rappel li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.rappel li + li {
  margin-top: 0.75rem;
}

.rappel span:last-child {
  color: var(--chalk-dim);
}

.suite li + li {
  margin-top: 1.5rem;
}

.suite strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

.suite p {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

/* --- 18. Mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================================
   19. RESPONSIVE
   La feuille est écrite mobile d'abord : ci-dessous, uniquement ce qui
   change quand l'écran s'élargit.
   ================================================================== */

/* --- À partir de 640 px (grand téléphone / petite tablette) --------- */
@media (min-width: 640px) {
  .conteneur {
    padding-inline: 2rem;
  }

  .section {
    padding: 7rem 0;
  }

  .entete__cta {
    display: inline-flex;
  }

  .hero__actions,
  .appel__actions,
  .introuvable__actions {
    flex-direction: row;
    gap: 1rem;
  }

  .appel__actions,
  .introuvable__actions {
    justify-content: center;
  }

  .gamme__liste {
    grid-template-columns: repeat(2, 1fr);
  }

  .gamme__item + .gamme__item {
    border-top: 0;
    border-left: 1px solid var(--trait);
  }

  .gamme__lien {
    padding: 1.5rem 1.75rem;
  }

  .packs__grille,
  .reperes,
  .champs {
    grid-template-columns: repeat(2, 1fr);
  }

  .pack__visuel {
    aspect-ratio: 4 / 5;
  }

  .galerie {
    gap: 1.25rem;
  }

  .appel__bloc {
    padding: 7rem 3.5rem;
  }

  .btn--large {
    width: auto;
  }

  .pied__mentions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- À partir de 768 px (tablette) ---------------------------------- */
@media (min-width: 768px) {
  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
  }

  /* Les trois étapes s'alignent, reliées par un filet dégradé. */
  .etapes {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 5rem;
  }

  .etapes::before {
    content: "";
    position: absolute;
    inset: 0.75rem 0 auto 0;
    height: 1px;
    background-image: linear-gradient(
      90deg,
      var(--magenta),
      var(--uv),
      transparent
    );
  }

  .etape__puce {
    display: block;
  }

  /* Mosaïque en trois bandes de hauteur fixe : la section entière tient
     en une hauteur d'écran au lieu de trois. Les rangées calibrées
     donnent une composition nette, sans décalages hasardeux. */
  .galerie {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 10rem;
    gap: 1rem;
  }

  .galerie figure {
    aspect-ratio: auto;
  }

  .galerie figure:nth-child(1) {
    grid-column: span 3;
    grid-row: span 2;
  }

  .galerie figure:nth-child(2),
  .galerie figure:nth-child(3) {
    grid-column: span 3;
  }

  .galerie figure:nth-child(4),
  .galerie figure:nth-child(5),
  .galerie figure:nth-child(6) {
    grid-column: span 2;
  }

  .detail__banniere {
    aspect-ratio: 3 / 2;
  }
}

/* --- À partir de 1024 px (ordinateur) -------------------------------- */
@media (min-width: 1024px) {
  .section {
    padding: 9rem 0;
  }

  .nav {
    display: block;
  }

  .burger {
    display: none;
  }

  .menu {
    display: none;
  }

  .hero__contenu {
    padding-block: 8rem;
  }

  .concept__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }

  .concept__texte {
    grid-column: span 5;
  }

  .concept__visuel {
    grid-column: 7 / span 6;
  }

  .reperes {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 7rem;
  }

  .repere {
    padding: 2.25rem;
  }

  .packs__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 5rem;
  }

  .gamme__liste {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Quatre formules dans une grille de trois : la dernière se
     retrouvait seule sur sa ligne, étirée en hauteur. Elle prend
     désormais toute la largeur, à l'horizontale — ce qui met en avant
     le format le plus complet au lieu de le reléguer. */
  .packs__grille > :nth-child(4) {
    grid-column: 1 / -1;
  }

  .packs__grille > :nth-child(4) .pack {
    flex-direction: row;
    align-items: stretch;
  }

  .packs__grille > :nth-child(4) .pack__visuel {
    flex: 0 0 42%;
    aspect-ratio: auto;
  }

  .packs__grille > :nth-child(4) .pack__corps {
    justify-content: center;
    padding: 2.25rem 2.5rem;
  }

  /* Le contenu tient sur deux colonnes, la carte reste compacte. */
  .packs__grille > :nth-child(4) .pack__inclus {
    columns: 2;
    column-gap: 2rem;
  }

  .packs__grille > :nth-child(4) .pack__inclus li {
    break-inside: avoid;
  }

  .packs__entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
  }

  .progression {
    display: block;
  }

  .options__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }

  .options__texte {
    grid-column: span 5;
  }

  .options__liste {
    grid-column: 7 / span 6;
  }

  .options__visuel {
    display: block;
  }

  .galerie__entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .galerie__entete .chapeau {
    max-width: 24rem;
    text-align: right;
  }

  .galerie {
    grid-auto-rows: 11.5rem;
    margin-top: 4rem;
  }

  .detail__grille,
  .contact__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }

  .detail__principal,
  .contact__principal {
    grid-column: span 7;
  }

  .detail__aside,
  .contact__aside {
    grid-column: 9 / span 4;
  }

  .detail__banniere {
    aspect-ratio: 2 / 1;
  }

  .detail__entete {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 2.5rem;
  }

  .detail__entete-texte {
    grid-column: span 7;
  }

  .detail__position {
    grid-column: 9 / span 4;
  }

  .entete-page {
    padding: 10rem 0 6rem;
  }

  .pied {
    padding: 5rem 0 2rem;
  }
}

/* ==================================================================
   20. PAGES LÉGALES
   Un texte long, lisible, sur une colonne étroite.
   ================================================================== */
.legal {
  max-width: 46rem;
}

.legal h2 {
  margin-top: 3rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.legal h3 {
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 600;
}

.legal p,
.legal li {
  margin-top: 0.75rem;
  color: var(--chalk-dim);
  line-height: 1.75;
}

.legal ul {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li {
  margin-top: 0.375rem;
}

.legal a {
  color: var(--uv-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal dl {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.75rem 1.5rem;
}

.legal dt {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.legal dd {
  margin: 0;
  color: var(--chalk-dim);
}

/* Repère d'information légale manquante : impossible à rater. */
.a-completer {
  padding: 0.125rem 0.5rem;
  border: 1px dashed var(--magenta);
  border-radius: 3px;
  color: var(--magenta);
  font-style: normal;
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .legal dl {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }

  .legal dt {
    text-align: right;
  }
}

/* Liens légaux du pied de page */
.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* Signature du concepteur, en toute fin de page. */
.pied__signature {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  font-size: 0.75rem;
  text-align: center;
  color: var(--chalk-faint);
}

.pied__signature a {
  color: var(--chalk-dim);
  transition: color 0.3s var(--doux);
}

.pied__signature a:hover {
  color: var(--uv-bright);
}

.pied__legal a {
  color: var(--chalk-faint);
  transition: color 0.3s var(--doux);
}

.pied__legal a:hover {
  color: var(--chalk);
}

/* Zones desservies — n'apparaît que si elles sont renseignées */
.pied__zones {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}

.pied__zones p {
  margin-top: 0.75rem;
  max-width: 44rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.pied__coordonnees address {
  font-style: normal;
}

/* Réseaux et messagerie — mêmes jetons que le reste : filet à 10 %,
   texte estompé, violet UV réservé au survol. */
.pied__reseaux {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}

.pied__reseaux ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}

.reseau {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--chalk-dim);
  text-decoration: none;
  background: rgba(244, 241, 248, 0.02);
  transition:
    color 0.3s var(--doux),
    border-color 0.3s var(--doux),
    background 0.3s var(--doux);
}

.reseau:hover {
  color: var(--chalk);
  border-color: var(--uv-bright);
  background: rgba(162, 28, 240, 0.12);
}

.reseau svg {
  flex: none;
  color: var(--uv-bright);
}

/* Contact direct, sous l'estimation et sous « ce qui se passe ensuite ». */
.contact-direct {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-bloc);
  background: rgba(244, 241, 248, 0.02);
}

.contact-direct__intro {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.contact-direct .btn svg {
  flex: none;
}

.contact-direct__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-direct__reseaux .reseau {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------
   Questions fréquentes
   Balises <details> natives : l'ouverture fonctionne sans JavaScript.
   ------------------------------------------------------------------ */
.faq {
  max-width: 46rem;
  margin: 3rem auto 0;
  border-top: 1px solid var(--trait);
}

.faq__item {
  border-bottom: 1px solid var(--trait);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0;
  cursor: pointer;
  list-style: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--chalk);
  transition: color 0.3s var(--doux);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--uv-bright);
}

.faq__signe {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--chalk-dim);
  transition:
    transform 0.3s var(--doux),
    border-color 0.3s var(--doux),
    color 0.3s var(--doux);
}

.faq__item[open] .faq__signe {
  transform: rotate(180deg);
  border-color: var(--uv-bright);
  color: var(--uv-bright);
}

.faq__item p {
  max-width: 40rem;
  margin: 0;
  padding: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--chalk-dim);
}

.faq__pied {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--chalk-faint);
}

.faq__pied a {
  color: var(--uv-bright);
}

@media (max-width: 34rem) {
  .faq__item summary {
    gap: 1rem;
    font-size: 1rem;
  }
}

/* ==================================================================
   21. CONFIGURATEUR DE DEMANDE (page contact)
   Reprend strictement les jetons existants : fonds nuit, filets à 10 %,
   violet UV en accent. Rien de nouveau côté couleurs ou typographie.
   ================================================================== */

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

/* --- Formulaire par étapes ---------------------------------------- */
/* Sans JavaScript, .fil-etapes et .nav-etapes restent masqués par leur
   attribut hidden, et les trois sections s'affichent à la suite. */

.fil-etapes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.fil-etapes li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  color: var(--chalk-faint);
  font-size: 0.8125rem;
  transition:
    color 0.3s var(--doux),
    border-color 0.3s var(--doux),
    background 0.3s var(--doux);
}

.fil-etapes__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.fil-etapes__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fil-etapes .est-faite {
  color: var(--chalk-dim);
  border-color: rgba(197, 88, 255, 0.35);
}

.fil-etapes .est-courante {
  color: var(--chalk);
  border-color: var(--uv-bright);
  background: rgba(162, 28, 240, 0.12);
}

@media (max-width: 34rem) {
  .fil-etapes__nom {
    display: none;
  }

  .fil-etapes li {
    flex: none;
    justify-content: center;
  }
}

.etape-form {
  animation: apparition-etape 0.4s var(--doux) both;
}

@keyframes apparition-etape {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

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

.nav-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}

.nav-etapes .btn {
  flex: 1;
  min-width: 10rem;
  justify-content: center;
}

/* --- Bascule entre les deux formulaires --------------------------- */
.bascule {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0.375rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--night-800);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.bascule input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bascule label {
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--chalk-dim);
  cursor: pointer;
  transition:
    background-color 0.3s var(--doux),
    color 0.3s var(--doux);
}

.bascule label:hover {
  color: var(--chalk);
}

.bascule input:checked + label {
  background: var(--chalk);
  color: var(--night);
}

.bascule input:focus-visible + label {
  outline: 2px solid var(--uv-bright);
  outline-offset: 2px;
}

/* Le basculement repose sur :has() — donc sans JavaScript. */
.contact-zone:has(#mode-demande:checked) .form-question,
.contact-zone:has(#mode-question:checked) .form-demande {
  display: none;
}

/* --- Titres de bloc dans le formulaire ---------------------------- */
.bloc__titre {
  margin-top: 2.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.formulaire > .contact__grille .bloc__titre:first-child,
.contact__principal > .bloc__titre:first-child {
  margin-top: 0;
}

.bloc__aide {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

/* Retour sous le champ commune */
.champ__retour {
  min-height: 1.125rem;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

.champ__retour.est-ok {
  color: var(--uv-bright);
}

.champ__retour.est-inconnu {
  color: var(--magenta);
}

/* --- Choix du pack ------------------------------------------------- */
.choix-packs {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.choix-pack {
  position: relative;
  display: block;
  cursor: pointer;
}

.choix-pack input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choix-pack__corps {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--night-800);
  transition:
    border-color 0.3s var(--doux),
    background-color 0.3s var(--doux),
    box-shadow 0.3s var(--doux);
}

.choix-pack:hover .choix-pack__corps {
  border-color: var(--trait-fort);
}

.choix-pack input:checked + .choix-pack__corps {
  border-color: rgba(162, 28, 240, 0.7);
  background: var(--night-700);
  box-shadow: 0 0 30px -14px rgba(162, 28, 240, 0.9);
}

.choix-pack input:focus-visible + .choix-pack__corps {
  outline: 2px solid var(--uv-bright);
  outline-offset: 2px;
}

.choix-pack__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.choix-pack__nom {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.choix-pack__prix {
  flex-shrink: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--uv-bright);
}

.choix-pack__format {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.choix-pack__accroche {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.choix-pack__inclus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.choix-pack__inclus span {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--chalk-dim);
}

/* --- Options ------------------------------------------------------- */
.choix-options {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.choix-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--night-800);
  cursor: pointer;
  transition:
    border-color 0.3s var(--doux),
    background-color 0.3s var(--doux);
}

.choix-option:hover {
  border-color: var(--trait-fort);
}

.choix-option:has(input:checked) {
  border-color: rgba(162, 28, 240, 0.6);
  background: var(--night-700);
}

.choix-option:has(input:focus-visible) {
  outline: 2px solid var(--uv-bright);
  outline-offset: 2px;
}

.choix-option input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--uv);
  cursor: pointer;
}

.choix-option__corps {
  flex: 1;
  min-width: 0;
}

.choix-option__nom {
  display: block;
  font-size: 0.875rem;
}

.choix-option__detail {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

/* Option rendue indisponible par une autre (DJ et sono). */
.choix-option.est-bloquee {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Option déjà comprise dans la formule : visible mais pas à vendre. */
.choix-option.est-incluse {
  opacity: 0.55;
  cursor: default;
}

.choix-option.est-incluse .choix-option__prix {
  color: var(--chalk-faint);
  font-weight: 400;
}

/* --- Quantité, sous l'option correspondante -----------------------
   Sur ordinateur : intitulé à gauche, compteur à droite, note dessous.
   Sur téléphone : tout empilé, le compteur passe la largeur. */
.quantite {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: -0.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--uv-bright);
  border-top: 0;
  border-radius: 0 0 var(--r-carte) var(--r-carte);
  background: rgba(162, 28, 240, 0.08);
}

.quantite__intitule {
  font-size: 0.875rem;
  color: var(--chalk);
}

.quantite__champ {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--trait);
  border-radius: var(--r-media);
  background: var(--night-900);
  overflow: hidden;
}

.quantite__pas {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: var(--chalk-dim);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.2s var(--doux),
    background-color 0.2s var(--doux);
}

.quantite__pas:hover {
  color: var(--chalk);
  background: rgba(244, 241, 248, 0.06);
}

.quantite__champ input {
  width: 3.5rem;
  padding: 0.5rem 0;
  border: 0;
  border-inline: 1px solid var(--trait);
  background: none;
  color: var(--chalk);
  font: inherit;
  font-size: 0.9375rem;
  text-align: center;
  -moz-appearance: textfield;
}

.quantite__champ input::-webkit-outer-spin-button,
.quantite__champ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantite__note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

@media (max-width: 30rem) {
  .quantite {
    grid-template-columns: 1fr;
  }

  .quantite__champ {
    justify-content: space-between;
  }

  .quantite__champ input {
    flex: 1;
  }
}

.choix-option__prix {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--uv-bright);
}

/* --- Bloc d'estimation --------------------------------------------- */
.estimation {
  padding: 1.75rem;
  border: 1px solid rgba(162, 28, 240, 0.35);
  border-radius: var(--r-carte);
  background: var(--night-800);
}

.estimation h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.estimation__lignes {
  margin-top: 1.25rem;
}

.estimation__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.estimation__ligne span:last-child {
  flex-shrink: 0;
  font-weight: 600;
}

.estimation__ligne--option {
  color: var(--chalk-dim);
}

.estimation__ligne--offert span:last-child {
  color: var(--uv-bright);
}

.estimation__groupe {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--trait);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.estimation__vide {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.estimation__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait-fort);
}

/* L'attribut hidden doit l'emporter sur le display de la règle ci-dessus,
   sinon la ligne « Total estimé — » reste visible avant tout choix. */
.estimation__total[hidden] {
  display: none;
}

.estimation__total span {
  font-size: 0.875rem;
  color: var(--chalk-dim);
}

.estimation__total strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}

.estimation__mention {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--chalk-faint);
}

.estimation .btn {
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .choix-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  /* Le récapitulatif suit le défilement : le visiteur voit le prix
     évoluer pendant qu'il coche les options. */
  .form-demande .contact__aside {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
}

/* ==================================================================
   22. ASSISTANT
   Bulle flottante et panneau de conversation. Mêmes jetons que le
   reste : fond nuit, filets à 10 %, violet UV en accent.
   ================================================================== */

/* Menu mobile ouvert : la bulle et le panneau s'effacent. Un chatbot
   flottant par-dessus un menu plein écran n'a pas de sens. */
body:has(#menu-mobile:not([hidden])) .assistant__bulle,
body:has(#menu-mobile:not([hidden])) .assistant {
  display: none !important;
}

.assistant__bulle {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--uv-bright);
  border-radius: 999px;
  background: var(--uv);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(162, 28, 240, 0.8);
  transition:
    transform 0.3s var(--doux),
    background-color 0.3s var(--doux);
}

.assistant__bulle:hover {
  transform: scale(1.06);
}

.assistant__bulle.est-ouvert {
  background: var(--night-700);
  border-color: var(--trait);
}

.assistant {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2.5rem));
  max-height: min(32rem, calc(100vh - 8rem));
  border: 1px solid var(--trait);
  border-radius: var(--r-bloc);
  background: var(--night-900);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.assistant__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--trait);
  background: var(--night-800);
}

.assistant__tete h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--chalk);
}

.assistant__tete p {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--chalk-faint);
}

.assistant__fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: none;
  color: var(--chalk-dim);
  cursor: pointer;
  transition:
    color 0.3s var(--doux),
    border-color 0.3s var(--doux);
}

.assistant__fermer:hover {
  color: var(--chalk);
  border-color: var(--uv-bright);
}

.assistant__fil {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assistant__bulle-texte {
  max-width: 85%;
  padding: 0.75rem 0.9375rem;
  border-radius: var(--r-carte);
  font-size: 0.875rem;
  line-height: 1.6;
  animation: assistant-entree 0.3s var(--doux) both;
}

.assistant__bulle-texte--assistant {
  align-self: flex-start;
  border: 1px solid var(--trait);
  background: var(--night-800);
  color: var(--chalk-dim);
}

.assistant__bulle-texte--visiteur {
  align-self: flex-end;
  background: rgba(162, 28, 240, 0.18);
  border: 1px solid rgba(197, 88, 255, 0.35);
  color: var(--chalk);
}

@keyframes assistant-entree {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
}

.assistant__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.assistant__liens a {
  font-size: 0.8125rem;
  color: var(--uv-bright);
}

.assistant__saisie {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem 0.5rem;
  border-top: 1px solid var(--trait);
}

/* Mention obligatoire : le visiteur doit savoir qu'il parle à une
   machine, et comment joindre un humain. */
.assistant__mention {
  padding: 0 1.25rem 1.125rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--chalk-faint);
}

.assistant__mention a {
  color: var(--uv-bright);
}

.assistant__saisie input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-media);
  background: var(--night-800);
  color: var(--chalk);
  font: inherit;
  font-size: 0.875rem;
}

.assistant__saisie input:focus-visible {
  outline: 2px solid var(--uv-bright);
  outline-offset: 1px;
}

.assistant__saisie button {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  border: 0;
  border-radius: var(--r-media);
  background: var(--uv);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 30rem) {
  .assistant {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 5rem;
    width: auto;
  }

  .assistant__bulle {
    right: 1rem;
    bottom: 1rem;
  }
}

/* Attente de la réponse : trois points qui respirent. */
.assistant__patiente {
  display: flex;
  gap: 0.3125rem;
  align-items: center;
  padding: 0.9375rem;
}

.assistant__patiente span {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--uv-bright);
  animation: assistant-point 1.2s infinite ease-in-out;
}

.assistant__patiente span:nth-child(2) {
  animation-delay: 0.15s;
}

.assistant__patiente span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes assistant-point {
  0%, 60%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-0.1875rem);
  }
}

.assistant__saisie input:disabled {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .assistant__patiente span {
    animation: none;
    opacity: 0.6;
  }
}