/* ==========================================================================
   Studio Arkimed — feuille de style unique
   Fond ivoire, encre presque noire, accent violet, Fraunces pour les titres,
   Sora pour le texte. Une seule feuille pour toutes les pages : la même
   grammaire visuelle sert l'accueil, les quatre univers, la galerie et le
   formulaire de devis.

   Sommaire
     1-19  socle repris du site précédent (variables, base, composants)
     20    signature typographique de la marque
     21    panneaux d'univers
     22    blocs d'univers
     23    en-tête des pages annexes
     24    galerie en colonnes + filtres
     25    tarifs « à partir de »
     26-29 divers, ajustements et rappels compacts
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  /* Couleurs */
  --ivoire: #fafaf9;
  --craie: #f5f4f2;
  --blanc: #ffffff;
  --encre: #1a1a1a;
  --gris: #5c5c5c;
  --gris-clair: #6f6f6b;
  --filet: #e5e4e1;
  --accent: #9966ff;
  /* Violet assombri pour le petit texte sur fond clair : le violet vif
     n'atteint pas 4.5:1 sur l'ivoire. */
  --accent-texte: #7040d9;
  --accent-doux: #f0e9ff;
  --nuit: #121212;

  /* Typographie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Mise en page */
  --largeur: 1180px;
  --largeur-large: 1400px;
  --largeur-texte: 720px;
  --gouttiere: 24px;
  --rayon: 10px;
  --rayon-lg: 18px;

  /* Hauteur de l'en-tête fixe, utilisée pour les ancres */
  --hauteur-entete: 74px;

  /* Mouvement */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gouttiere: 40px;
  }
}

@media (min-width: 1080px) {
  :root {
    --hauteur-entete: 82px;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Filet de sécurité : un dépassement horizontal ne doit jamais permettre de
     faire défiler la page latéralement. "clip" plutôt que "hidden" : il ne crée
     pas de conteneur de défilement, donc position: sticky reste fonctionnel. */
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--ivoire);
  color: var(--encre);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

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

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background-color: var(--accent);
  color: var(--blanc);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saut-contenu {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 22px;
  border-radius: 999px;
  background-color: var(--encre);
  color: var(--ivoire);
  font-size: 0.875rem;
  transition: top 0.25s var(--ease);
}

.saut-contenu:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--large {
  max-width: var(--largeur-large);
}

.conteneur--texte {
  max-width: var(--largeur-texte);
}

.section {
  padding-block: clamp(72px, 11vw, 130px);
}

.section--compacte {
  padding-block: clamp(48px, 6vw, 72px);
}

.section--craie {
  background-color: var(--craie);
}

.section--nuit {
  background-color: var(--nuit);
  color: var(--ivoire);
}

.section--nuit h2,
.section--nuit h3 {
  color: var(--ivoire);
}

/* Les ancres s'arrêtent sous l'en-tête fixe */
[id] {
  scroll-margin-top: calc(var(--hauteur-entete) + 16px);
}

/* --------------------------------------------------------------------------
   4. Typographie utilitaire
   -------------------------------------------------------------------------- */

.accent {
  color: var(--accent);
}

.italique {
  font-style: italic;
}

.chapo {
  max-width: 58ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--gris);
}

.section--nuit .chapo,
.cta-final .chapo,
.page-404 .chapo {
  color: rgba(250, 250, 249, 0.7);
}

.texte-doux {
  color: var(--gris);
}

.petit {
  font-size: 0.875rem;
}

.mention {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gris-clair);
}

.entete-section {
  max-width: 22ch;
}

.entete-bloc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: clamp(44px, 6vw, 72px);
}

@media (min-width: 900px) {
  .entete-bloc--ligne {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  .entete-bloc--ligne .chapo {
    max-width: 42ch;
  }
}

/* Espacements ponctuels */
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mt-26 { margin-top: 26px; }
.mt-30 { margin-top: 30px; }
.mt-34 { margin-top: 34px; }
.mt-40 { margin-top: 40px; }

.texte-court { max-width: 46ch; }
.texte-long { max-width: 70ch; }
.titre-s { font-size: 1.125rem; }
.titre-m { font-size: 1.25rem; }
.dl-net { margin: 0; }
.aligner-haut { align-items: start; }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn--primaire {
  background-color: var(--encre);
  color: var(--ivoire);
}

.btn--primaire:hover {
  background-color: var(--accent-texte);
}

.btn--secondaire {
  border-color: var(--filet);
  color: var(--encre);
}

.btn--secondaire:hover {
  border-color: var(--encre);
  background-color: var(--blanc);
}

.btn--clair {
  background-color: var(--ivoire);
  color: var(--encre);
}

.btn--clair:hover {
  background-color: var(--blanc);
}

.btn--fantome {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--ivoire);
}

.btn--fantome:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08);
}

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

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 400px) {
  .btn {
    height: auto;
    min-height: 50px;
    padding-block: 12px;
    padding-inline: 22px;
    white-space: normal;
    text-align: center;
  }
}

.lien-souligne {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease);
}

.lien-souligne:hover {
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   6. En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
}

.entete .conteneur {
  max-width: var(--largeur-large);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--hauteur-entete);
}

.entete.est-fixe {
  background-color: rgba(250, 250, 249, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--filet);
}

/* Marque — voir aussi la section 20 */
.marque {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.marque__nom {
  font-size: 1.1875rem;
  color: var(--encre);
  transition: color 0.4s var(--ease);
}

.marque__suite {
  font-size: 0.9375rem;
  color: var(--gris);
  transition: color 0.4s var(--ease);
}

/* Navigation par ancres */
.nav-principale {
  display: none;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1240px) {
  .nav-principale {
    gap: 26px;
  }
}

.nav-principale a {
  position: relative;
  font-size: 0.9375rem;
  color: var(--gris);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.nav-principale a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav-principale a:hover,
.nav-principale a.est-active {
  color: var(--encre);
}

.nav-principale a.est-active::after {
  transform: scaleX(1);
}

.entete__actions {
  display: none;
  align-items: center;
}

.entete__actions .btn {
  height: 44px;
  padding-inline: 22px;
  font-size: 0.9rem;
}

@media (min-width: 1080px) {
  .nav-principale,
  .entete__actions {
    display: flex;
  }
}

/* En-tête posé sur le visuel sombre du hero.
   Neutralisé dès que le menu mobile est ouvert (fond clair). */
body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .marque__nom,
body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .nav-principale a:hover,
body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .nav-principale a.est-active {
  color: var(--ivoire);
}

body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .marque__suite,
body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .nav-principale a {
  color: rgba(250, 250, 249, 0.75);
}

body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .btn--primaire {
  background-color: var(--ivoire);
  color: var(--encre);
}

body:not(.menu-ouvert) .entete--sur-visuel:not(.est-fixe) .bascule-menu {
  color: var(--ivoire);
}

/* Bouton menu mobile */
.bascule-menu {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 999px;
  color: var(--encre);
}

.bascule-menu svg {
  width: 22px;
  height: 22px;
}

.bascule-menu .icone-fermer {
  display: none;
}

.menu-ouvert .bascule-menu .icone-fermer {
  display: block;
}

.menu-ouvert .bascule-menu .icone-ouvrir {
  display: none;
}

@media (min-width: 1080px) {
  .bascule-menu {
    display: none;
  }
}

/* Panneau mobile */
.menu-mobile {
  display: none;
  border-top: 1px solid var(--filet);
  background-color: var(--ivoire);
}

.menu-ouvert .menu-mobile {
  display: block;
}

.menu-ouvert .entete {
  background-color: var(--ivoire);
  border-bottom-color: var(--filet);
}

.menu-mobile__liens {
  padding-block: 12px 26px;
}

.menu-mobile__liens a {
  display: block;
  padding-block: 13px;
  border-bottom: 1px solid var(--filet);
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  transition: color 0.25s var(--ease);
}

.menu-mobile__liens a:hover,
.menu-mobile__liens a.est-active {
  color: var(--accent-texte);
}

.menu-mobile__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 32px;
}

.menu-mobile__tel {
  padding-top: 6px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-block: 140px 64px;
  overflow: hidden;
  background-color: var(--nuit);
  color: var(--ivoire);
  isolation: isolate;
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.72) 0%,
    rgba(18, 18, 18, 0.32) 42%,
    rgba(18, 18, 18, 0.92) 100%
  );
}

.hero__titre {
  max-width: 15ch;
  color: var(--ivoire);
}

.hero__texte {
  max-width: 52ch;
  margin-top: 30px;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: rgba(250, 250, 249, 0.78);
}

.hero__actions {
  margin-top: 38px;
}

.hero__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.875rem;
  color: rgba(250, 250, 249, 0.62);
}

.hero__reperes strong {
  font-weight: 400;
  color: var(--ivoire);
}

/* --------------------------------------------------------------------------
   8. Médias et placeholders
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: var(--craie);
}

.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.media img.est-chargee {
  opacity: 1;
}

.media--plein {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.media__attente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background-color: var(--craie);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 26, 26, 0.045) 0,
    rgba(26, 26, 26, 0.045) 1px,
    transparent 1px,
    transparent 11px
  );
}

.media__attente svg {
  width: 26px;
  height: 26px;
  color: #c9c6c0;
}

.media__attente span {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.media__attente code {
  max-width: 88%;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: rgba(26, 26, 26, 0.05);
  font-size: 0.625rem;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media--sombre .media__attente {
  background-color: var(--nuit);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 11px
  );
}

.media--fond .media__attente svg,
.media--fond .media__attente span,
.media--fond .media__attente code {
  display: none;
}

.media.est-remplie .media__attente {
  opacity: 0;
  pointer-events: none;
}

/* Formats */
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-5-4 { aspect-ratio: 5 / 4; }

/* --------------------------------------------------------------------------
   9. Grilles de contenu
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.duo > *,
.grille > *,
.etapes > *,
.simulateur > *,
.showcase > *,
.options-liste > *,
.equipe > *,
.reassurance > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .duo--texte-large {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .duo--visuel-large {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.collage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
}

.collage__colonne {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
}

.grille {
  display: grid;
  gap: 22px;
}

@media (min-width: 700px) {
  .grille--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grille--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 700px) and (max-width: 899px) {
  .grille--3,
  .grille--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Étapes numérotées */
.etapes {
  display: grid;
  gap: 1px;
  border-radius: var(--rayon);
  overflow: hidden;
  background-color: var(--filet);
}

@media (min-width: 700px) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.etape {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px 36px;
  background-color: var(--craie);
}

.etape__numero {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--accent);
}

.etape p {
  font-size: 0.9375rem;
  color: var(--gris);
}

/* Listes */
.liste-check {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.liste-check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.liste-check svg {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  flex: none;
  color: var(--accent-texte);
}

.section--nuit .liste-check li {
  color: rgba(250, 250, 249, 0.75);
}

.section--nuit .liste-check svg {
  color: #c4a6ff;
}

/* Étiquettes */
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.etiquette {
  padding: 8px 16px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--gris);
}

.section--nuit .etiquette,
.hero .etiquette,
.cta-final .etiquette {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(250, 250, 249, 0.75);
}

/* Bande de réassurance compacte */
.reassurance {
  display: grid;
  gap: 26px;
}

@media (min-width: 700px) {
  .reassurance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
}

@media (min-width: 1000px) {
  .reassurance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.preuve {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preuve svg {
  width: 24px;
  height: 24px;
  color: var(--accent-texte);
}

.preuve h3 {
  font-size: 1.125rem;
}

.preuve p {
  font-size: 0.9375rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   10. Galerie showcase
   -------------------------------------------------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 700px) {
  .showcase {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 1100px) {
  .showcase {
    gap: 28px;
  }
}

.showcase__item {
  margin: 0;
  grid-column: span 1;
}

/* Sur mobile, les grands formats prennent toute la largeur : la mosaïque
   garde son rythme au lieu d'aligner neuf vignettes identiques. */
@media (max-width: 699px) {
  .showcase__item--large {
    grid-column: span 2;
  }
}

@media (min-width: 700px) {
  .showcase__item {
    grid-column: span 6;
  }

  /* Rythme éditorial : largeurs et décalages alternés */
  .showcase__item--large { grid-column: span 7; }
  .showcase__item--moyen { grid-column: span 5; }
  .showcase__item--tiers { grid-column: span 4; }
  .showcase__item--demi { grid-column: span 6; }
  .showcase__item--decale { margin-top: clamp(24px, 5vw, 72px); }
}

.showcase__bouton {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

/* Le cadre porte le masque révélé par GSAP ; l'image bouge à l'intérieur */
.showcase__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: var(--craie);
  /* Safari iOS ne rogne pas un conteneur arrondi dont l'enfant est transformé :
     la photo agrandie déborde alors latéralement. Forcer une couche de
     composition rétablit le rognage. */
  isolation: isolate;
  transform: translateZ(0);
}

.showcase__cadre .media {
  position: absolute;
  inset: -6% 0;
  height: 112%;
  border-radius: 0;
  will-change: transform;
}

.showcase__voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(
    0deg,
    rgba(18, 18, 18, 0.62) 0%,
    rgba(18, 18, 18, 0) 55%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.showcase__bouton:hover .showcase__voile,
.showcase__bouton:focus-visible .showcase__voile {
  opacity: 1;
}

.showcase__loupe {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: rgba(250, 250, 249, 0.92);
  color: var(--encre);
  transform: scale(0.85);
  transition: transform 0.45s var(--ease);
}

.showcase__bouton:hover .showcase__loupe {
  transform: scale(1);
}

.showcase__loupe svg {
  width: 16px;
  height: 16px;
}

.showcase__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 14px;
}

.showcase__titre {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.showcase__categorie {
  flex: none;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gris-clair);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background-color: rgba(18, 18, 18, 0.97);
  color: var(--ivoire);
}

.lightbox.est-ouverte {
  display: flex;
}

.lightbox__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 0.8125rem;
  color: rgba(250, 250, 249, 0.6);
}

.lightbox__fermer,
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  color: var(--ivoire);
  transition: background-color 0.3s var(--ease);
}

.lightbox__fermer:hover,
.lightbox__nav:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox__fermer svg,
.lightbox__nav svg {
  width: 22px;
  height: 22px;
}

.lightbox__scene {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 28px;
  min-height: 0;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lightbox__nav--prec { left: 8px; }
.lightbox__nav--suiv { right: 8px; }

@media (min-width: 768px) {
  .lightbox__scene {
    padding-inline: 76px;
  }

  .lightbox__nav--prec { left: 20px; }
  .lightbox__nav--suiv { right: 20px; }
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  margin: 0;
  min-height: 0;
}

.lightbox__cadre {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  border-radius: var(--rayon);
  overflow: hidden;
}

.lightbox__cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox figcaption {
  font-size: 0.9375rem;
  color: rgba(250, 250, 249, 0.7);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Offre et simulateur
   -------------------------------------------------------------------------- */

.simulateur {
  display: grid;
  gap: 26px;
}

@media (min-width: 1000px) {
  .simulateur {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 40px;
    align-items: start;
  }
}

.simulateur__reglages {
  padding: 30px 28px 34px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  background-color: var(--blanc);
}

@media (min-width: 700px) {
  .simulateur__reglages {
    padding: 38px 36px 42px;
  }
}

.champ + .champ {
  margin-top: 32px;
}

.champ-groupe {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.champ__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}

.champ__label {
  font-size: 0.875rem;
  color: var(--gris);
}

.champ__valeur {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.choix-formules {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.choix {
  display: block;
  padding: 15px 18px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.choix:hover {
  border-color: #c9c6c0;
}

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

.choix__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.choix__nom {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
}

.choix__prix {
  font-size: 0.9375rem;
  color: var(--accent-texte);
}

.choix__detail {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--gris);
}

.choix:has(input:checked) {
  border-color: var(--accent-texte);
  background-color: var(--accent-texte);
  color: var(--blanc);
}

.choix:has(input:checked) .choix__prix,
.choix:has(input:checked) .choix__detail {
  color: rgba(255, 255, 255, 0.88);
}

.choix:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

input[type="range"] {
  width: 100%;
  margin-top: 16px;
  accent-color: var(--accent-texte);
  cursor: pointer;
}

.champ__bornes {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--gris-clair);
}

.compteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 12px;
}

.compteur__boutons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.compteur__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  transition: border-color 0.3s var(--ease);
}

.compteur__btn:hover:not(:disabled) {
  border-color: var(--encre);
}

.compteur__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.compteur__btn svg {
  width: 16px;
  height: 16px;
}

.compteur__valeur {
  min-width: 40px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-align: center;
}

.options-cases {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.case {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.case:hover {
  border-color: #c9c6c0;
}

.case:has(input:checked) {
  border-color: rgba(153, 102, 255, 0.5);
  background-color: var(--accent-doux);
}

.case input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-texte);
  flex: none;
}

.champ--separe {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--filet);
}

/* Résultat */
.simulateur__resultat {
  padding: 30px 28px 34px;
  border-radius: var(--rayon-lg);
  background-color: var(--nuit);
  color: var(--ivoire);
}

@media (min-width: 700px) {
  .simulateur__resultat {
    padding: 38px 36px 42px;
  }
}

@media (min-width: 1000px) {
  .simulateur__resultat {
    position: sticky;
    top: calc(var(--hauteur-entete) + 24px);
  }
}

.resultat__titre {
  font-size: 0.875rem;
  color: rgba(250, 250, 249, 0.58);
}

.resultat__lignes {
  margin: 24px 0 0;
}

.encart-tarif__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 9px;
  font-size: 0.9375rem;
}

.encart-tarif__ligne dt {
  color: rgba(250, 250, 249, 0.62);
}

.encart-tarif__ligne dd {
  margin: 0;
}

.resultat__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.resultat__total-valeur {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: #c4a6ff;
}

.repartition {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 560px) {
  .repartition {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.repartition__bloc {
  padding: 18px 20px;
  border-radius: var(--rayon);
  background-color: rgba(255, 255, 255, 0.06);
}

.repartition__bloc--accent {
  background-color: rgba(153, 102, 255, 0.18);
}

.repartition__label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.58);
}

.repartition__bloc--accent .repartition__label {
  color: #c4a6ff;
}

.repartition__valeur {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.projection {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  color: rgba(250, 250, 249, 0.72);
}

.projection strong {
  font-weight: 400;
  color: var(--ivoire);
}

.avertissement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(250, 250, 249, 0.55);
}

.avertissement svg {
  width: 15px;
  height: 15px;
  margin-top: 4px;
  flex: none;
}

.simulateur__resultat .btn {
  margin-top: 24px;
}

/* Options complémentaires, en ligne sous le simulateur */
.options-liste {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  border-radius: var(--rayon);
  overflow: hidden;
  background-color: var(--filet);
}

@media (min-width: 700px) {
  .options-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .options-liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 28px;
  background-color: var(--craie);
}

.option h3 {
  font-size: 1.0625rem;
}

.option__prix {
  font-size: 0.9375rem;
  color: var(--accent-texte);
}

.option p {
  font-size: 0.875rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   12. Équipe
   -------------------------------------------------------------------------- */

/* Traitement éditorial : de grands portraits, aucun cadre, aucune pastille.
   La typographie porte la hiérarchie, comme dans la galerie. */

.equipe {
  display: grid;
  gap: 56px;
}

@media (min-width: 760px) {
  .equipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 72px);
  }
}

.membre {
  margin: 0;
}

/* Second portrait décalé : le même rythme que la mosaïque */
@media (min-width: 760px) {
  .membre:nth-child(even) {
    margin-top: clamp(24px, 4vw, 64px);
  }
}

.membre__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: rgba(255, 255, 255, 0.05);
  /* Même correctif que .showcase__cadre pour Safari iOS */
  isolation: isolate;
  transform: translateZ(0);
}

.membre__cadre .media {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-color: transparent;
}

.membre__cadre img {
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}

.membre:hover .membre__cadre img.est-chargee {
  transform: scale(1.03);
}

.membre__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.membre__nom {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ivoire);
}

.membre__role {
  flex: none;
  font-size: 0.8125rem;
  color: #c4a6ff;
}

.membre p {
  max-width: 44ch;
  margin-top: 18px;
  font-size: 0.9375rem;
  color: rgba(250, 250, 249, 0.7);
}

/* Compétences en une ligne discrète, séparées par des points médians.
   Le sélecteur reprend le p pour passer devant la règle « .membre p ». */
.membre p.membre__savoir {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: rgba(250, 250, 249, 0.55);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--filet);
}

.faq details {
  border-bottom: 1px solid var(--filet);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease);
}

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

.faq summary:hover {
  color: var(--accent-texte);
}

.faq summary span {
  max-width: 46ch;
}

.faq summary svg {
  width: 16px;
  height: 16px;
  margin-top: 6px;
  flex: none;
  color: var(--gris);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary svg {
  transform: rotate(45deg);
}

.faq__reponse {
  max-width: 64ch;
  padding-bottom: 24px;
  font-size: 0.9375rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   14. Formulaire de devis
   -------------------------------------------------------------------------- */

.devis {
  background-color: var(--craie);
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.formulaire__grille {
  display: grid;
  gap: 20px;
}

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

.champ-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  color: var(--gris);
}

.champ-form label span {
  color: var(--gris-clair);
}

.champ-form input,
.champ-form select,
.champ-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background-color: var(--blanc);
  font-size: 0.9375rem;
  transition: border-color 0.3s var(--ease);
}

.champ-form textarea {
  resize: vertical;
  min-height: 140px;
}

.champ-form input:focus,
.champ-form select:focus,
.champ-form textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.champ-form input::placeholder,
.champ-form textarea::placeholder {
  color: var(--gris-clair);
}

.champ-form[data-erreur="true"] input,
.champ-form[data-erreur="true"] select,
.champ-form[data-erreur="true"] textarea {
  border-color: #b42318;
}

.erreur {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: #b42318;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gris);
  cursor: pointer;
}

.consentement input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--accent-texte);
}

.formulaire__pied {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
}

@media (min-width: 640px) {
  .formulaire__pied {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.formulaire__pied .mention {
  max-width: 34ch;
}

.confirmation {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(153, 102, 255, 0.35);
  border-radius: var(--rayon);
  background-color: var(--accent-doux);
  font-size: 0.9375rem;
  color: #4b2ea0;
}

.confirmation.est-visible {
  display: flex;
}

.confirmation svg {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  flex: none;
}

.chargement {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(250, 250, 249, 0.35);
  border-top-color: var(--ivoire);
  border-radius: 999px;
  animation: tourne 0.7s linear infinite;
}

.est-en-cours .chargement {
  display: block;
}

.est-en-cours .btn__texte-defaut,
.est-en-cours .btn svg:not(.chargement) {
  display: none;
}

@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

/* Colonne d'informations à côté du formulaire */
.carte-contact {
  padding: 30px 28px 32px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  background-color: var(--blanc);
}

.carte-contact__liste {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 26px;
}

.carte-contact__liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
}

.carte-contact__liste svg {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  flex: none;
  color: var(--accent-texte);
}

.carte-contact__liste p {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--gris-clair);
}

.bloc-separe {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
}

@media (min-width: 1000px) {
  .colonne-collante {
    position: sticky;
    top: calc(var(--hauteur-entete) + 24px);
  }
}

/* --------------------------------------------------------------------------
   15. Pages de texte (mentions légales, confidentialité)
   -------------------------------------------------------------------------- */

.entete-page {
  padding-block: calc(var(--hauteur-entete) + 60px) 48px;
  background-color: var(--nuit);
  color: var(--ivoire);
}

.entete-page h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--ivoire);
}

.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.8125rem;
  color: rgba(250, 250, 249, 0.58);
}

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

.fil span[aria-current] {
  color: rgba(250, 250, 249, 0.85);
}

.texte-legal h2 {
  margin-top: 56px;
  margin-bottom: 14px;
  font-size: 1.5rem;
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal p,
.texte-legal ul {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.texte-legal li {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
}

.texte-legal li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: var(--accent);
}

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

.texte-legal strong {
  font-weight: 500;
  color: var(--encre);
}

.a-completer {
  padding: 2px 8px;
  border-radius: 5px;
  background-color: var(--accent-doux);
  font-size: 0.8125rem;
  color: #4b2ea0;
}

.encadre {
  padding: 18px 22px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background-color: var(--craie);
  font-size: 0.9375rem;
  color: var(--encre);
}

.recit p {
  margin-top: 20px;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   16. Appel final et pied de page
   -------------------------------------------------------------------------- */

.cta-final {
  position: relative;
  padding-block: clamp(80px, 10vw, 120px);
  overflow: hidden;
  background-color: var(--nuit);
  color: var(--ivoire);
  text-align: center;
  isolation: isolate;
}

.cta-final .media--plein {
  z-index: -2;
}

.cta-final__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(18, 18, 18, 0.82);
}

.cta-final h2 {
  max-width: 20ch;
  margin-inline: auto;
  color: var(--ivoire);
}

.cta-final .chapo {
  margin-inline: auto;
  margin-top: 26px;
}

.cta-final .groupe-btn {
  justify-content: center;
  margin-top: 36px;
}

.cta-final__tel {
  margin-top: 28px;
  font-size: 0.875rem;
  color: rgba(250, 250, 249, 0.55);
}

.cta-final__tel a {
  color: rgba(250, 250, 249, 0.8);
}

.pied {
  padding-block: 64px 40px;
  background-color: var(--nuit);
  color: var(--ivoire);
}

.pied__grille {
  display: grid;
  gap: 40px;
}

@media (min-width: 700px) {
  .pied__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .pied__grille {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
  }
}

.pied .marque__nom {
  color: var(--ivoire);
}

.pied .marque__suite {
  color: rgba(250, 250, 249, 0.6);
}

.pied__intro {
  max-width: 34ch;
  margin-top: 20px;
  font-size: 0.9375rem;
  color: rgba(250, 250, 249, 0.62);
}

.pied__slogan {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: rgba(250, 250, 249, 0.9);
}

.pied h2 {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(250, 250, 249, 0.55);
}

.pied__liens {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  font-size: 0.9375rem;
}

.pied__liens a,
.pied__liens li {
  color: rgba(250, 250, 249, 0.75);
  transition: color 0.3s var(--ease);
}

.pied__liens a:hover {
  color: var(--ivoire);
}

.pied__liens a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.pied__liens svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.pied__note {
  max-width: 28ch;
  margin-top: 16px;
  font-size: 0.8125rem;
  color: rgba(250, 250, 249, 0.55);
}

.pied__bas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: rgba(250, 250, 249, 0.55);
}

@media (min-width: 700px) {
  .pied__bas {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.pied__legal a:hover {
  color: rgba(250, 250, 249, 0.9);
}

/* --------------------------------------------------------------------------
   17. Bouton de devis flottant (mobile)
   -------------------------------------------------------------------------- */

.cta-flottant {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 0 20px max(16px, env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.cta-flottant.est-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Deux actions cote a cote : le devis structure, WhatsApp pour aller vite */
.cta-flottant__groupe {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.cta-flottant a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  border-radius: 999px;
  font-size: 0.9375rem;
  box-shadow: 0 10px 30px rgba(18, 18, 18, 0.3);
}

.cta-flottant__devis {
  min-width: 0;
  padding-inline: 26px;
  background-color: var(--encre);
  color: var(--ivoire);
}

.cta-flottant__devis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cta-flottant__wa {
  width: 50px;
  flex: none;
  border: 1px solid var(--filet);
  background-color: var(--blanc);
  color: var(--encre);
}

.cta-flottant svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.cta-flottant__wa svg {
  width: 21px;
  height: 21px;
}

@media (min-width: 1080px) {
  .cta-flottant {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   18. Animations
   -------------------------------------------------------------------------- */

/* La classe "anim-js" est posée par un script inline dès le <head> : les blocs
   animés partent invisibles sans provoquer de clignotement. Elle est retirée
   dès que GSAP a pris le relais — ou si GSAP ne se charge pas. Sans
   JavaScript, rien n'est masqué. */
.anim-js [data-anim],
.anim-js [data-anim-hero-item],
.anim-js [data-anim-groupe] > * {
  opacity: 0;
}

.anim-js .showcase__cadre,
.anim-js .membre__cadre {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .anim-js .showcase__cadre,
  .anim-js .membre__cadre {
    clip-path: none;
  }

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

/* --------------------------------------------------------------------------
   19. Page 404
   -------------------------------------------------------------------------- */

.page-404 {
  display: flex;
  align-items: center;
  min-height: 78svh;
  padding-block: 150px 90px;
  background-color: var(--nuit);
  color: var(--ivoire);
}

.page-404 h1 {
  max-width: 16ch;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  color: var(--ivoire);
}

.page-404__plan {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9375rem;
  color: rgba(250, 250, 249, 0.7);
}

/* --------------------------------------------------------------------------
   20. Signature de marque
   -------------------------------------------------------------------------- */

/* « Studio » recule, « Arkimed » porte le nom. Le contraste de corps et de
   couleur suffit : aucun logo n'est nécessaire. */

.marque--grande {
  gap: 12px;
}

.marque--grande .marque__nom {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.035em;
}

.marque--grande .marque__suite {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
}

/* --------------------------------------------------------------------------
   21. Panneaux d'univers — accueil
   -------------------------------------------------------------------------- */

/* Le visiteur choisit son univers dès le premier écran. Pas de photo unique
   en plein cadre : ce sont les quatre entrées qui font l'image. */

.hero--accueil {
  justify-content: flex-end;
  gap: clamp(34px, 5vw, 54px);
  padding-block: calc(var(--hauteur-entete) + 40px) clamp(40px, 5vw, 60px);
  background-color: var(--nuit);
}

.hero--accueil .hero__titre {
  max-width: 13ch;
}

.univers-panneaux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 900px) {
  .univers-panneaux {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

.panneau {
  position: relative;
  display: block;
  height: clamp(186px, 26vh, 240px);
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: rgba(255, 255, 255, 0.04);
  /* Même correctif Safari iOS que la galerie : sans couche de composition,
     un enfant transformé déborde du cadre arrondi. */
  isolation: isolate;
  transform: translateZ(0);
}

@media (min-width: 900px) {
  .panneau {
    height: clamp(300px, 40vh, 430px);
  }
}

.panneau .media {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-color: transparent;
}

.panneau .media img {
  transition: transform 1s var(--ease), opacity 0.6s var(--ease);
}

.panneau:hover .media img.est-chargee,
.panneau:focus-visible .media img.est-chargee {
  transform: scale(1.06);
}

.panneau__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.46) 0%,
    rgba(18, 18, 18, 0.04) 36%,
    rgba(18, 18, 18, 0.9) 100%
  );
}

.panneau__contenu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 15px 16px 17px;
}

@media (min-width: 900px) {
  .panneau__contenu {
    padding: 20px 22px 22px;
  }
}

.panneau__numero {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: rgba(250, 250, 249, 0.6);
}

.panneau__nom {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ivoire);
}

.panneau__mot {
  display: block;
  margin-top: 7px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(250, 250, 249, 0.72);
}

.panneau__fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ivoire);
}

.panneau__fleche svg {
  width: 15px;
  height: 15px;
  transition: transform 0.4s var(--ease);
}

.panneau:hover .panneau__fleche svg {
  transform: translateX(5px);
}

/* Sous 900 px la flèche n'apporte rien : le panneau entier est cliquable */
@media (max-width: 899px) {
  .panneau__fleche {
    display: none;
  }

  .panneau__mot {
    margin-top: 5px;
  }
}

/* --------------------------------------------------------------------------
   22. Rangées d'univers — accueil
   -------------------------------------------------------------------------- */

/* Chaque univers a droit au même espace : même gabarit, même structure,
   seul le côté du visuel alterne. */

.univers-rangee + .univers-rangee {
  margin-top: clamp(64px, 9vw, 116px);
}

@media (min-width: 900px) {
  .univers-rangee:nth-child(even) .univers-rangee__media {
    order: -1;
  }
}

.univers-rangee__numero {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--accent-texte);
}

.univers-rangee h3 {
  margin-top: 12px;
  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.univers-rangee__texte {
  max-width: 46ch;
  margin-top: 20px;
  color: var(--gris);
}

.univers-rangee .etiquettes {
  margin-top: 24px;
}

.univers-rangee__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 30px;
}

.univers-rangee__prix {
  font-size: 0.875rem;
  color: var(--gris);
}

.univers-rangee__prix strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   23. En-tête des pages d'univers
   -------------------------------------------------------------------------- */

.entete-univers {
  padding-block: calc(var(--hauteur-entete) + 52px) clamp(52px, 7vw, 84px);
  background-color: var(--nuit);
  color: var(--ivoire);
}

.entete-univers h1 {
  max-width: 14ch;
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  color: var(--ivoire);
}

.entete-univers__grille {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .entete-univers__grille {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }
}

.entete-univers__grille > * {
  min-width: 0;
}

.entete-univers .chapo {
  margin-top: 26px;
}

.entete-univers .groupe-btn {
  margin-top: 34px;
}

.entete-univers__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.875rem;
  color: rgba(250, 250, 249, 0.62);
}

.entete-univers__reperes strong {
  font-weight: 400;
  color: var(--ivoire);
}

/* --------------------------------------------------------------------------
   24. Galerie en colonnes et filtres
   -------------------------------------------------------------------------- */

/* La mosaïque éditoriale de l'accueil suit une composition fixe (section 10).
   Ici le nombre de photos varie avec le filtre : des colonnes s'adaptent sans
   laisser de trous, et chaque cadre garde le format natif de la photo. */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filtre {
  padding: 9px 18px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--gris);
  white-space: nowrap;
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.filtre:hover {
  border-color: var(--encre);
  color: var(--encre);
}

.filtre.est-active {
  border-color: var(--encre);
  background-color: var(--encre);
  color: var(--ivoire);
}

.filtre__compte {
  margin-left: 7px;
  font-size: 0.75rem;
  color: var(--gris-clair);
}

.filtre.est-active .filtre__compte {
  color: rgba(250, 250, 249, 0.6);
}

/* Deux colonnes dès le mobile : c'est le rythme d'une galerie, et cela
   divise par deux la hauteur de la section sur un téléphone. */
.mosaique {
  columns: 2;
  column-gap: 12px;
}

@media (min-width: 620px) {
  .mosaique {
    column-gap: 20px;
  }
}

@media (min-width: 1000px) {
  .mosaique {
    columns: 3;
    column-gap: 26px;
  }
}

.mosaique__item {
  break-inside: avoid;
  margin: 0 0 12px;
}

@media (min-width: 620px) {
  .mosaique__item {
    margin-bottom: 20px;
  }
}

@media (min-width: 1000px) {
  .mosaique__item {
    margin-bottom: 26px;
  }
}

.mosaique__vide {
  padding-block: 60px;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   25. Tarifs « à partir de »
   -------------------------------------------------------------------------- */

.carte-prix {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 30px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  background-color: var(--blanc);
}

.carte-prix h3 {
  font-size: 1.375rem;
}

.carte-prix__montant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}

.carte-prix__valeur {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.carte-prix__unite {
  font-size: 0.8125rem;
  color: var(--gris-clair);
}

.carte-prix p {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.carte-prix .liste-check {
  margin-top: 22px;
}

.carte-prix__pied {
  margin-top: auto;
  padding-top: 26px;
}

/* --------------------------------------------------------------------------
   26. Divers
   -------------------------------------------------------------------------- */

/* Sur fond sombre, le gris des mentions tombe a 3,7:1 : il faut un gris
   clair, pas le gris foncé prévu pour les fonds clairs. */
.section--nuit .mention,
.cta-final .mention,
.page-404 .mention {
  color: rgba(250, 250, 249, 0.58);
}

/* Bandeau de zone d'intervention */
.zone-bande {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.zone-bande__lieu {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  letter-spacing: -0.02em;
}

.zone-bande__point {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--accent);
}

/* Passerelle vers les autres univers, en bas de chaque page d'univers */
.autres-univers {
  display: grid;
  gap: 1px;
  border-radius: var(--rayon);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.14);
}

@media (min-width: 700px) {
  .autres-univers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.autre-univers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 24px;
  background-color: var(--nuit);
  transition: background-color 0.3s var(--ease);
}

.autre-univers:hover {
  background-color: #191919;
}

.autre-univers__nom {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--ivoire);
}

.autre-univers svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: rgba(250, 250, 249, 0.5);
  transition: transform 0.35s var(--ease);
}

.autre-univers:hover svg {
  transform: translateX(5px);
}

/* Les panneaux d'accueil se révèlent comme les photos de la galerie */
.anim-js .panneau {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  .anim-js .panneau {
    clip-path: none;
  }
}

/* Déroulé en cinq temps : cinq colonnes seulement quand la place le permet */
@media (min-width: 1100px) {
  .etapes--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .etapes--5 .etape {
    padding: 28px 24px 32px;
  }

  .etapes--5 .etape__numero {
    font-size: 2rem;
  }
}

/* Encart de citation : la promesse d'un univers, posée seule */
.promesse {
  max-width: 24ch;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section--nuit .promesse,
.entete-univers .promesse {
  border-left-color: #c4a6ff;
  color: var(--ivoire);
}

/* --------------------------------------------------------------------------
   27. Ajustements de la page unique
   -------------------------------------------------------------------------- */

/* Sur mobile, les repères du hero doivent laisser voir les panneaux :
   c'est eux qui portent la promesse, pas cette ligne. */
@media (max-width: 699px) {
  .hero--accueil .hero__reperes {
    gap: 6px 18px;
    margin-top: 28px;
    padding-top: 18px;
    font-size: 0.8125rem;
  }
}

/* Chaque univers est une ancre de la page : le bloc porte donc tout ce qu'une
   page dédiée aurait contenu, en plus resserré. */
.univers-rangee__promesse {
  max-width: 40ch;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--accent-texte);
}

.univers-rangee .liste-check {
  margin-top: 24px;
}

.univers-rangee__prix > span {
  color: var(--gris-clair);
}

/* Le bouton « voir plus » de la galerie */
.galerie-plus {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.galerie-plus[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   28. Correctif général
   -------------------------------------------------------------------------- */

/* « display: inline-flex » de .btn l'emporte sur la règle [hidden] du
   navigateur : sans ceci, un bouton masqué par script resterait visible. */
.btn[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   29. Rappels compacts
   -------------------------------------------------------------------------- */

/* Les engagements du studio, en une ligne sous le déroulé. Ils tenaient
   auparavant une section entière qui redisait les cinq étapes. */
.reassurance-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem;
  color: var(--gris);
}

.reassurance-ligne li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.reassurance-ligne svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent-texte);
}

/* Rappel des points de départ, en tête de la section Tarifs : une ligne par
   univers plutôt que quatre cartes, puisque chaque bloc d'univers affiche
   déjà son prix plus haut. */
.tarifs-resume {
  border-top: 1px solid var(--filet);
}

.tarifs-resume__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 17px;
  border-bottom: 1px solid var(--filet);
  transition: color 0.3s var(--ease);
}

a.tarifs-resume__ligne:hover {
  color: var(--accent-texte);
}

.tarifs-resume__nom {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
}

.tarifs-resume__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.tarifs-resume__valeur {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.tarifs-resume__unite {
  font-size: 0.8125rem;
  color: var(--gris-clair);
}

/* --------------------------------------------------------------------------
   30. Configurateur
   -------------------------------------------------------------------------- */

/* Les blocs du configurateur sont posés par le script dans des conteneurs :
   ils ne sont plus des frères directs, et la règle « .champ + .champ » ne les
   espace donc plus. On rythme ici la colonne de réglages elle-même. */
.simulateur__reglages > * + * {
  margin-top: 32px;
}

/* Un conteneur vide (le compteur n'existe que pour Sport & outdoor) ne doit
   pas creuser un blanc supplémentaire. */
.simulateur__reglages > *:empty {
  display: none;
}

/* La répartition apporte déjà sa propre marge, via .champ--separe */
.simulateur__reglages > [data-config-repartition] {
  margin-top: 0;
}

/* Le choix de l'univers ouvre le configurateur : on l'écarte du reste */
[data-config-univers] {
  margin-top: 14px;
}