/* ================================================================
   SAYVO — style.css
   Direction artistique : minimalisme brutaliste haut de gamme,
   ambiance galerie d'art numérique, contrastes forts, typographie
   massive, effets métalliques subtils, aucune couleur vive.

   Sommaire
   01. Variables et fondations
   02. Utilitaires (sr-only, skip-link, sélection, scrollbar, grain)
   03. Boutons
   04. Loader d'introduction
   05. Barre de progression
   06. Navigation fixe + menu mobile
   07. Hero
   08. Sections génériques
   09. Titres 3D et interludes
   10. Manifeste
   11. Services
   12. Projets (mockups navigateur en pur CSS)
   13. Avant / Après
   14. Méthode
   15. Pourquoi SAYVO
   16. Outils et technologies
   17. Offre
   18. FAQ (accordéon)
   19. Contact + formulaire
   20. Footer
   21. Boutons flottants (retour haut, appel mobile)
   22. Curseur personnalisé
   23. Système de révélation au scroll
   24. Responsive
   25. Mouvement réduit (prefers-reduced-motion)
   ================================================================ */

/* ================================================================
   01. VARIABLES ET FONDATIONS
   ================================================================ */

:root {
  /* Palette officielle */
  --noir-profond: #050505;
  --noir-casse: #0D0D0D;
  --anthracite: #181818;
  --gris: #8E8B84;
  --gris-fonce: #65625C;      /* gris lisible sur fond clair */
  --blanc-casse: #E9E7E2;
  --blanc: #F7F6F2;
  --argent: #B9B9B9;

  /* Couleur fonctionnelle unique (erreurs de formulaire), volontairement désaturée */
  --erreur: #B4574F;

  /* Lignes et bordures */
  --ligne-sombre: rgba(233, 231, 226, 0.12);
  --ligne-claire: rgba(13, 13, 13, 0.16);

  /* Typographies */
  --police-texte: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Mouvements homogènes */
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-forte: cubic-bezier(0.16, 1, 0.3, 1);
  --duree: 0.65s;

  /* Divers */
  --entete-hauteur: 5.25rem;
  --rayon: 2px;
}

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

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--entete-hauteur) + 1rem);
  scrollbar-width: thin;
  scrollbar-color: #2f2f2f var(--noir-profond);
  /* Permet l'animation des hauteurs "auto" (accordéon FAQ) sur navigateurs récents */
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  overflow-x: clip;
  min-height: 100vh;
  background: var(--noir-profond);
  color: var(--blanc-casse);
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Verrouillage du défilement quand le menu mobile est ouvert */
body.no-defilement { overflow: hidden; }

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

a { color: inherit; }

ul, ol { list-style: none; }

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

/* Focus clavier visible partout, adapté aux fonds sombres et clairs */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ================================================================
   02. UTILITAIRES
   ================================================================ */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3000;
  padding: 0.7rem 1.1rem;
  background: var(--blanc);
  color: var(--noir-profond);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--rayon);
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* Sélection de texte personnalisée */
::selection {
  background: var(--argent);
  color: var(--noir-profond);
}

/* Barre de défilement discrète (navigateurs WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--noir-profond); }
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border: 2px solid var(--noir-profond);
}
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Grain très subtil en arrière-plan : SVG embarqué, aucune image externe */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Liens discrets (politique de confidentialité, etc.) */
.lien-discret {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gris);
  transition: text-decoration-color 0.3s var(--ease);
}
.lien-discret:hover { text-decoration-color: currentColor; }

/* ================================================================
   03. BOUTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.9rem;
  font-family: var(--police-texte);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    transform 0.5s var(--ease-forte);
  will-change: transform;
}

/* Bouton plein : clair sur fond sombre, sombre sur fond clair */
.btn--plein {
  background: var(--blanc);
  color: var(--noir-profond);
}
.btn--plein:hover {
  background: var(--argent);
  color: var(--noir-profond);
}
.section--clair .btn--plein {
  background: var(--noir-profond);
  color: var(--blanc);
}
.section--clair .btn--plein:hover { background: var(--anthracite); }

/* Bouton contour */
.btn--contour {
  background: transparent;
  color: var(--blanc-casse);
  border-color: rgba(233, 231, 226, 0.4);
}
.btn--contour:hover {
  border-color: var(--blanc);
  background: rgba(247, 246, 242, 0.06);
}
.section--clair .btn--contour {
  color: var(--noir-casse);
  border-color: rgba(13, 13, 13, 0.4);
}
.section--clair .btn--contour:hover {
  border-color: var(--noir-profond);
  background: rgba(13, 13, 13, 0.05);
}

.btn--petit {
  min-height: 2.6rem;
  padding: 0 1.2rem;
  font-size: 0.72rem;
}

/* ================================================================
   04. LOADER D'INTRODUCTION
   Invisible sans JavaScript. En cas de JavaScript actif, il
   s'efface de lui-même en pur CSS : aucun blocage possible.
   ================================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--noir-profond);
}

.js .loader {
  display: flex;
  animation: loader-sortie 0.7s var(--ease-forte) 1.25s forwards;
}

.loader__mot {
  display: flex;
  overflow: hidden;
  font-family: var(--police-titre);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--blanc-casse);
}

.js .loader__mot span {
  display: inline-block;
  transform: translateY(130%);
  animation: montee 0.6s var(--ease-forte) forwards;
}
.js .loader__mot span:nth-child(1) { animation-delay: 0.10s; }
.js .loader__mot span:nth-child(2) { animation-delay: 0.16s; }
.js .loader__mot span:nth-child(3) { animation-delay: 0.22s; }
.js .loader__mot span:nth-child(4) { animation-delay: 0.28s; }
.js .loader__mot span:nth-child(5) { animation-delay: 0.34s; }

@keyframes montee {
  to { transform: translateY(0); }
}

@keyframes loader-sortie {
  to {
    transform: translateY(-101%);
    visibility: hidden;
  }
}

/* ================================================================
   05. BARRE DE PROGRESSION DE LECTURE
   ================================================================ */

.progression {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 950;
  pointer-events: none;
}

.progression__barre {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--argent);
  transform: scaleX(var(--defile, 0));
  transform-origin: left center;
}

/* ================================================================
   06. NAVIGATION FIXE + MENU MOBILE
   ================================================================ */

.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    backdrop-filter 0.45s var(--ease);
}

/* Effet de verre léger, réservé à la navigation, une fois le scroll amorcé */
.entete--scrolled {
  background: rgba(5, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ligne-sombre);
}

@supports not (backdrop-filter: blur(1px)) {
  .entete--scrolled { background: rgba(5, 5, 5, 0.94); }
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--entete-hauteur);
  width: min(1240px, 100% - 3rem);
  margin-inline: auto;
}

.entete__logo {
  position: relative;
  z-index: 5;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--blanc);
  text-decoration: none;
}

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

.nav__liste {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__lien {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blanc-casse);
  text-decoration: none;
}

.nav__lien span { position: relative; }

/* Soulignement qui se déploie au survol */
.nav__lien span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--argent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}

.nav__lien:hover span::after,
.nav__lien:focus-visible span::after { transform: scaleX(1); }

/* Bouton hamburger : deux lignes, masqué sur grand écran */
.burger {
  position: relative;
  z-index: 5;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  padding: 0 10px;
}

.burger__ligne {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--blanc-casse);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.burger--actif .burger__ligne:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.burger--actif .burger__ligne:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* ================================================================
   07. HERO
   ================================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--entete-hauteur) + 2rem) 1.5rem 6rem;
  background: var(--noir-profond);
  overflow: hidden;
  text-align: center;
}

/* Typographie décorative répétée derrière la composition */
.hero__fond {
  position: absolute;
  inset: -3rem 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  user-select: none;
  opacity: 0.07;
}

.hero__fond-ligne {
  font-family: var(--police-titre);
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--gris);
}

.hero__fond-ligne:nth-child(1) { transform: translateX(-4%); }
.hero__fond-ligne:nth-child(2) {
  transform: translateX(-12%);
  animation: derive 26s ease-in-out infinite alternate;
}
.hero__fond-ligne:nth-child(3) { transform: translateX(-7%); }

@keyframes derive {
  to { transform: translateX(-4%); }
}

/* Scène en perspective autour de la bannière */
.hero__scene {
  position: relative;
  z-index: 2;
  perspective: 1200px;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* Apparition cinématographique après le loader */
.js .hero__scene {
  opacity: 0;
  animation: hero-entree 1.4s var(--ease-forte) 1.1s forwards;
}

@keyframes hero-entree {
  from {
    opacity: 0;
    transform: translateY(38px) scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Le cadre pivote doucement selon la souris (variables posées en JavaScript) */
.hero__cadre {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-forte);
  will-change: transform;
}

/* Halo gris très léger, placé en profondeur derrière la bannière */
.hero__halo {
  position: absolute;
  inset: -16%;
  background: radial-gradient(closest-side, rgba(185, 185, 185, 0.16), transparent 72%);
  transform: translateZ(-70px);
  pointer-events: none;
}

.hero__banner {
  width: min(680px, 88vw);
  height: auto;
  transform: translateZ(36px);
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.55));
}

/* Repli si l'image est absente : le mot SAYVO en 3D prend sa place */
.hero__fallback { display: none; }

.hero__cadre--sans-image .hero__banner { display: none; }
.hero__cadre--sans-image .hero__fallback {
  display: inline-block;
  padding: 4rem 1rem;
  font-size: clamp(3.4rem, 15vw, 9.5rem);
  letter-spacing: 0.08em;
}

/* Contenu textuel du hero */
.hero__contenu {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.hero__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.85rem, 4.8vw, 3.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--blanc);
  margin-bottom: 1.5rem;
}

/* Révélation ligne par ligne derrière un masque */
.masque {
  display: block;
  overflow: hidden;
}

.masque__int { display: block; }

.js .masque__int {
  transform: translateY(115%);
  animation: montee 0.9s var(--ease-forte) forwards;
}

.js .hero__titre .masque:nth-child(1) .masque__int { animation-delay: 1.0s; }
.js .hero__titre .masque:nth-child(2) .masque__int { animation-delay: 1.12s; }

.hero__sous {
  max-width: 40rem;
  margin-inline: auto;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--argent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.hero__note {
  margin-top: 2.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Décalages d'apparition propres au hero (après le loader) */
.js .hero__sous.est-visible { transition-delay: 1.3s; }
.js .hero__actions.est-visible { transition-delay: 1.45s; }
.js .hero__note.est-visible { transition-delay: 1.58s; }

/* Indicateur de scroll */
.hero__scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--gris);
}

.hero__scroll-texte {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero__scroll-ligne {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgba(233, 231, 226, 0.18);
  overflow: hidden;
}

.hero__scroll-ligne::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--argent);
  animation: descente 2.1s var(--ease) infinite;
}

@keyframes descente {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(280%); }
}

/* ================================================================
   08. SECTIONS GÉNÉRIQUES
   ================================================================ */

.section {
  position: relative;
  padding-block: clamp(5.5rem, 11vw, 9.5rem);
}

.section--noir {
  background: var(--noir-casse);
  color: var(--blanc-casse);
}

.section--profond {
  background: var(--noir-profond);
  color: var(--blanc-casse);
}

.section--clair {
  background: var(--blanc-casse);
  color: var(--noir-casse);
}

.section__cadre {
  width: min(1160px, 100% - 3rem);
  margin-inline: auto;
}

.section__entete { margin-bottom: clamp(3rem, 6vw, 5rem); }

.section__etiquette {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gris);
}

.section--clair .section__etiquette { color: var(--gris-fonce); }

.section__etiquette::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ================================================================
   09. TITRES 3D ET INTERLUDES
   Réservés aux moments forts : perspective, preserve-3d,
   duplication du texte par pseudo-éléments, ombres multicouches.
   ================================================================ */

.titre-3d {
  position: relative;
  display: inline-block;
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.05;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx3d, 10deg));
  will-change: transform;
  /* Reflet métallique subtil */
  background: linear-gradient(180deg, var(--blanc) 0%, #d4d2cc 42%, var(--gris) 55%, #e2dfd9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Couches de profondeur dupliquées derrière le texte */
.titre-3d::before,
.titre-3d::after {
  content: attr(data-texte);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  pointer-events: none;
}

.titre-3d::before {
  color: #2c2c2c;
  transform: translateZ(-26px) translateY(0.045em);
  text-shadow:
    0 1px 0 #262626,
    0 2px 0 #222222,
    0 3px 0 #1e1e1e,
    0 4px 0 #1a1a1a,
    0 6px 14px rgba(0, 0, 0, 0.6);
}

.titre-3d::after {
  color: #141414;
  transform: translateZ(-52px) translateY(0.09em);
  filter: blur(1px);
  opacity: 0.9;
}

/* Variante pour fond clair */
.titre-3d--clair {
  background: linear-gradient(180deg, var(--anthracite) 0%, var(--noir-profond) 48%, #3a3a3a 60%, var(--noir-casse) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.titre-3d--clair::before {
  color: #c7c4bd;
  text-shadow:
    0 1px 0 #cdcac3,
    0 2px 0 #d3d0c9,
    0 3px 0 #d9d6cf,
    0 6px 16px rgba(13, 13, 13, 0.18);
}

.titre-3d--clair::after {
  color: #dcd9d2;
  opacity: 1;
}

/* Bandes typographiques entre les sections */
.interlude {
  overflow: hidden;
  padding-block: clamp(3rem, 8vh, 5.5rem);
  perspective: 900px;
  text-align: center;
  user-select: none;
}

.interlude--noir { background: var(--noir-casse); }
.interlude--clair { background: var(--blanc-casse); }

.interlude__mot {
  font-size: clamp(3rem, 12vw, 9.5rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ================================================================
   10. MANIFESTE
   ================================================================ */

.manifeste__texte {
  max-width: 26ch;
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--gris);
}

/* Mots enveloppés par JavaScript pour la révélation progressive */
.manifeste__texte .mot {
  display: inline-block;
  transition: color 0.5s var(--ease);
}

.manifeste__texte .mot.est-actif { color: var(--blanc); }

.manifeste__cle {
  font-weight: 700;
  color: inherit;
}

.manifeste__cle.est-actif,
.mot.est-actif .manifeste__cle,
.manifeste__cle .mot.est-actif {
  color: var(--blanc);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--argent);
}

/* Sans JavaScript, les mots clés restent lisibles et distincts */
.no-js .manifeste__cle { color: var(--blanc-casse); }

.manifeste__phrase {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--argent);
}

.manifeste__phrase::before {
  content: "";
  flex: none;
  width: 3rem;
  height: 1px;
  background: var(--argent);
}

/* ================================================================
   11. SERVICES
   ================================================================ */

/* Le fond de la section change subtilement selon le service survolé */
.services { transition: background-color 0.7s var(--ease); }

.services:has(.service:nth-child(1):hover) { background: #EAE8E1; }
.services:has(.service:nth-child(2):hover) { background: #E7E5DE; }
.services:has(.service:nth-child(3):hover) { background: #EBE8E0; }
.services:has(.service:nth-child(4):hover) { background: #E6E4DF; }
.services:has(.service:nth-child(5):hover) { background: #EAE7DF; }
.services:has(.service:nth-child(6):hover) { background: #E8E5E0; }

.services__liste { border-top: 1px solid var(--ligne-claire); }

.service {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
  padding-block: 2.1rem;
  border-bottom: 1px solid var(--ligne-claire);
}

.service__num {
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gris-fonce);
  transition: transform 0.45s var(--ease), color 0.45s var(--ease);
}

.service__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.45s var(--ease);
}

.service__texte {
  max-width: 46rem;
  margin-top: 0.5rem;
  color: #454440;
}

/* Ligne argentée révélée au survol, par-dessus la bordure de base */
.service__ligne {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--noir-casse);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}

.service:hover .service__num,
.service:focus-within .service__num {
  transform: translateX(8px);
  color: var(--noir-casse);
}

.service:hover .service__titre,
.service:focus-within .service__titre { transform: translateX(12px); }

.service:hover .service__ligne,
.service:focus-within .service__ligne { transform: scaleX(1); }

/* ================================================================
   12. PROJETS — MOCKUPS NAVIGATEUR EN PUR CSS
   ================================================================ */

.projets__note {
  max-width: 34rem;
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--gris);
}

.projet {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.projet + .projet { border-top: 1px solid var(--ligne-sombre); }

.projet--inverse .projet__visuel { order: 2; }
.projet--inverse .projet__infos { order: 1; }

/* Perspective pour la rotation légère au scroll */
.projet__visuel { perspective: 1400px; }

.navigateur {
  background: var(--anthracite);
  border: 1px solid #262626;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  transition: transform 0.6s var(--ease-forte), box-shadow 0.6s var(--ease);
}

.projet__visuel:hover .navigateur {
  transform: translateY(-6px);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.55);
}

.navigateur__barre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #242424;
}

.navigateur__point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3a3a;
}

.navigateur__url {
  margin-left: 0.8rem;
  padding: 0.25rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--gris);
  background: #101010;
  border: 1px solid #242424;
  border-radius: 3px;
}

/* L'écran est un conteneur : les mini-sites se dimensionnent en cqi */
.navigateur__ecran {
  position: relative;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  container-type: inline-size;
}

.demo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4.5cqi 5cqi;
  font-size: 2.5cqi;
  line-height: 1.45;
}

.demo__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3cqi;
}

.demo__logo {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 2.9cqi;
  letter-spacing: 0.14em;
}

.demo__menu {
  display: flex;
  gap: 3.5cqi;
  font-size: 2.1cqi;
  opacity: 0.65;
}

.demo__hero { padding-block: 2.5cqi 3.5cqi; }

.demo__sur {
  font-size: 1.9cqi;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1.6cqi;
}

.demo__titre {
  font-family: var(--police-titre);
  font-size: 6.2cqi;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 3cqi;
}

.demo__btn {
  display: inline-block;
  padding: 1.7cqi 3.6cqi;
  font-size: 2cqi;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.demo__pied {
  margin-top: auto;
  padding-top: 2.5cqi;
  font-size: 1.9cqi;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* --- Démo 1 : Atelier Morel (sombre, robuste, architectural) --- */

.demo--morel {
  background: linear-gradient(160deg, #0a0a0a 0%, #151515 100%);
  color: var(--blanc-casse);
}

.demo--morel .demo__galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqi;
}

.demo--morel .demo__bloc {
  aspect-ratio: 4 / 3;
  border: 1px solid #262626;
}

/* Textures évoquant ardoise, tuile et zinc, en simples dégradés */
.demo__bloc--a {
  background: repeating-linear-gradient(115deg, #1c1c1c 0 6px, #232323 6px 12px);
}
.demo__bloc--b {
  background: repeating-linear-gradient(90deg, #202020 0 10px, #181818 10px 20px);
}
.demo__bloc--c {
  background: linear-gradient(150deg, #2b2b2b 0%, #1a1a1a 55%, #303030 100%);
}

/* --- Démo 2 : Maison Alba (éditorial, chaleureux, élégant) --- */

.demo--alba {
  background: #EDE9E0;
  color: #171511;
}

.demo--alba .demo__logo,
.demo--alba .demo__titre {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}

.demo--alba .demo__btn { border-color: #171511; }

.demo--alba .demo__carte {
  display: flex;
  flex-direction: column;
  gap: 1.8cqi;
  padding-top: 1cqi;
  border-top: 1px solid rgba(23, 21, 17, 0.25);
}

.demo__plat {
  display: flex;
  align-items: baseline;
  gap: 1.6cqi;
  font-size: 2.3cqi;
}

.demo__points {
  flex: 1;
  border-bottom: 1px dotted rgba(23, 21, 17, 0.4);
  transform: translateY(-0.5cqi);
}

/* --- Démo 3 : Garage Horizon (technique, minimaliste, dynamique) --- */

.demo--horizon {
  background: #101010;
  color: var(--blanc-casse);
}

.demo--horizon .demo__btn {
  background: var(--blanc-casse);
  color: #101010;
  border-color: var(--blanc-casse);
}

.demo--horizon .demo__prestas {
  display: flex;
  flex-direction: column;
}

.demo__presta {
  display: flex;
  align-items: center;
  gap: 3cqi;
  padding-block: 1.9cqi;
  font-size: 2.4cqi;
  border-top: 1px solid #232323;
}

.demo__presta span {
  font-family: var(--police-titre);
  font-size: 2cqi;
  color: var(--gris);
}

/* Bande cinétique en bas de l'écran, mise en pause si mouvement réduit */
.demo__bande {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.8cqi;
  background: repeating-linear-gradient(115deg, var(--argent) 0 3px, transparent 3px 14px);
  opacity: 0.35;
  animation: bande-defile 3.2s linear infinite;
}

@keyframes bande-defile {
  to { background-position: 56px 0; }
}

/* --- Informations projet --- */

.projet__infos { position: relative; }

/* Grand numéro éditorial en filigrane derrière le nom */
.projet__num {
  position: absolute;
  top: -2.4rem;
  left: -0.4rem;
  font-family: var(--police-titre);
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 231, 226, 0.16);
  pointer-events: none;
  user-select: none;
}

.projet__nom {
  position: relative;
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.projet__secteur {
  margin-top: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris);
}

.projet__texte {
  margin-top: 1.3rem;
  max-width: 34rem;
  color: var(--argent);
}

.projet__objectif {
  margin-top: 1.4rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--argent);
  color: var(--blanc-casse);
}

.projet__objectif-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gris);
}

.projet__lien { margin-top: 1.9rem; }

/* ================================================================
   13. AVANT / APRÈS
   ================================================================ */

.comparatif__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.comparatif__col {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--ligne-claire);
}

.comparatif__col--apres {
  background: var(--noir-casse);
  color: var(--blanc-casse);
  border-color: var(--noir-casse);
}

.comparatif__titre {
  margin-bottom: 1.4rem;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.comparatif__col--avant .comparatif__titre { color: var(--gris-fonce); }

.comparatif__liste li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.7rem;
  border-top: 1px solid var(--ligne-claire);
}

.comparatif__col--apres .comparatif__liste li { border-top-color: var(--ligne-sombre); }

.comparatif__liste li::before {
  position: absolute;
  left: 0;
  font-family: var(--police-titre);
}

.comparatif__col--avant .comparatif__liste li { color: #55534E; }
.comparatif__col--avant .comparatif__liste li::before {
  content: "—";
  color: var(--gris);
}

.comparatif__col--apres .comparatif__liste li::before {
  content: "→";
  color: var(--argent);
}

.comparatif__phrase {
  max-width: 34ch;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

/* ================================================================
   14. MÉTHODE
   ================================================================ */

.methode__flux { position: relative; }

/* Ligne verticale reliant les étapes, avec progression au scroll */
.methode__ligne {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: calc(2.75rem - 0.5px);
  width: 1px;
  background: #262626;
}

.methode__ligne-progression {
  position: absolute;
  inset: 0;
  background: var(--argent);
  transform: scaleY(var(--avancement, 0));
  transform-origin: top center;
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 2rem;
  padding-block: 2.2rem;
}

/* Le numéro repose sur la ligne, avec le fond de section en réserve */
.etape__num {
  justify-self: start;
  padding: 0.35rem 0.55rem;
  background: var(--noir-casse);
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--argent);
}

.etape__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 500;
}

.etape__texte {
  max-width: 42rem;
  margin-top: 0.5rem;
  color: var(--gris);
}

/* ================================================================
   15. POURQUOI SAYVO
   ================================================================ */

.pourquoi__grille {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.pourquoi__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

.pourquoi__liste li {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.6rem;
  border-top: 1px solid var(--ligne-claire);
  font-weight: 500;
}

.pourquoi__liste li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gris-fonce);
}

.pourquoi__texte {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-left: 1px solid var(--noir-casse);
  font-size: 1.05rem;
  color: #33322E;
}

/* Grand texte décoratif */
.pourquoi__deco {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 4vw;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.pourquoi__deco span {
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(13, 13, 13, 0.55);
  white-space: nowrap;
}

/* ================================================================
   16. OUTILS ET TECHNOLOGIES
   ================================================================ */

.outils__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ligne-sombre);
}

.outil {
  padding: 1.35rem 1rem 1.35rem 0;
  border-bottom: 1px solid var(--ligne-sombre);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--argent);
  transition: color 0.35s var(--ease), padding-left 0.35s var(--ease);
}

.outil:hover {
  color: var(--blanc);
  padding-left: 0.5rem;
}

.outils__note {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--gris);
}

/* Bande de texte animée, décorative */
.outils__bande {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-block: 1.1rem;
  border-block: 1px solid var(--ligne-sombre);
  overflow: hidden;
}

.outils__bande-piste {
  display: flex;
  width: max-content;
  animation: bande-texte 32s linear infinite;
}

.outils__bande-texte {
  white-space: nowrap;
  font-family: var(--police-titre);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gris);
}

@keyframes bande-texte {
  to { transform: translateX(-50%); }
}

/* ================================================================
   17. OFFRE
   ================================================================ */

.offre__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2.5rem;
}

.offre__liste li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.6rem;
  border-top: 1px solid var(--ligne-claire);
  font-weight: 500;
}

.offre__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 0.65rem;
  height: 1px;
  background: var(--noir-casse);
}

.offre__cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.offre__phrase {
  max-width: 30ch;
  margin: 0 auto 2rem;
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.35;
}

.offre__note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--gris-fonce);
}

/* ================================================================
   18. FAQ — ACCORDÉON
   Basé sur details/summary : accessible au clavier et fonctionnel
   sans JavaScript. L'ouverture est animée en pur CSS sur les
   navigateurs récents (::details-content), instantanée ailleurs.
   ================================================================ */

.faq__liste {
  max-width: 52rem;
  border-top: 1px solid var(--ligne-sombre);
}

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

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--police-titre);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  transition: color 0.3s var(--ease);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }

.faq__question:hover { color: var(--blanc); }

/* Icône plus / moins dessinée en CSS */
.faq__icone {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq__icone::before,
.faq__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--argent);
  transition: transform 0.4s var(--ease);
}

.faq__icone::after { transform: rotate(90deg); }

.faq__item[open] .faq__icone::after { transform: rotate(0deg); }
.faq__item[open] .faq__question { color: var(--blanc); }

/* Animation d'ouverture (navigateurs prenant en charge ::details-content) */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
}

.faq__item[open]::details-content { block-size: auto; }

.faq__reponse-int {
  max-width: 44rem;
  padding-bottom: 1.7rem;
  color: var(--argent);
}

/* ================================================================
   19. CONTACT + FORMULAIRE
   ================================================================ */

.contact__entete {
  perspective: 1000px;
  text-align: center;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.contact__entete .section__etiquette { justify-content: center; }

.contact__titre {
  max-width: 14ch;
  margin-inline: auto;
  font-size: clamp(2.1rem, 6.5vw, 5.2rem);
  letter-spacing: 0.01em;
}

.contact__intro {
  max-width: 36rem;
  margin: 1.8rem auto 0;
  color: var(--argent);
}

.contact__grille {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact__coordonnees { border-top: 1px solid var(--ligne-sombre); }

.contact__ligne {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--ligne-sombre);
}

.contact__ligne dt {
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gris);
}

.contact__ligne dd {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  line-height: 1.5;
}

.contact__lien {
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 231, 226, 0.25);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.contact__lien:hover {
  color: var(--blanc);
  border-color: var(--blanc);
}

/* --- Formulaire --- */

.form__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.6rem;
}

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

.champ--large { grid-column: 1 / -1; }

.champ__label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--blanc-casse);
}

.champ__requis { color: var(--argent); }

.champ__saisie {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--blanc);
  background: #101010;
  border: 1px solid #2c2c2c;
  border-radius: var(--rayon);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.champ__saisie::placeholder { color: #5b5952; }

.champ__saisie:focus {
  outline: none;
  border-color: var(--argent);
  box-shadow: 0 0 0 1px var(--argent);
}

.champ__saisie--texte {
  min-height: 9rem;
  resize: vertical;
}

/* Flèche du menu déroulant dessinée en SVG embarqué */
.champ__saisie--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9B9B9' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
}

/* États d'erreur (classe posée par script.js) */
.champ--erreur .champ__saisie {
  border-color: var(--erreur);
  box-shadow: none;
}

.champ__erreur {
  font-size: 0.8rem;
  color: var(--erreur);
}

.champ__erreur:empty { display: none; }

/* Case de consentement */
.champ--case {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.champ__case {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--argent);
  cursor: pointer;
}

.champ__label--case {
  flex: 1;
  min-width: 14rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--argent);
}

.champ--case .champ__erreur { flex-basis: 100%; }

/* Honeypot anti-spam : retiré visuellement, hors tabulation */
.champ-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__statut {
  min-height: 1.4em;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--erreur);
}

.form__envoyer {
  margin-top: 0.6rem;
  min-width: 15rem;
}

.form__mention {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--gris);
}

/* ================================================================
   20. FOOTER
   ================================================================ */

.pied {
  background: var(--noir-profond);
  border-top: 1px solid var(--ligne-sombre);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  color: var(--blanc-casse);
}

.pied__cadre {
  width: min(1160px, 100% - 3rem);
  margin-inline: auto;
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
}

.pied__logo {
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.pied__baseline {
  margin-top: 0.6rem;
  color: var(--argent);
}

.pied__lieu {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--gris);
}

.pied__col-titre {
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gris);
}

.pied__lien {
  display: block;
  width: fit-content;
  padding-block: 0.28rem;
  font-size: 0.94rem;
  color: var(--argent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pied__lien:hover {
  color: var(--blanc);
  border-bottom-color: var(--blanc);
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--ligne-sombre);
  font-size: 0.82rem;
  color: var(--gris);
}

/* ================================================================
   21. BOUTONS FLOTTANTS
   ================================================================ */

/* Retour en haut : affiché par JavaScript après un certain scroll */
.retour-haut { display: none; }

.js .retour-haut {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(13, 13, 13, 0.9);
  color: var(--blanc-casse);
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  text-decoration: none;
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s var(--ease);
}

.js .retour-haut.est-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.js .retour-haut:hover { border-color: var(--argent); }

/* Bouton d'appel, visible uniquement sur téléphone */
.flottant {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 800;
  display: none;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  background: var(--blanc);
  color: var(--noir-profond);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rayon);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ================================================================
   22. CURSEUR PERSONNALISÉ (desktop, décoratif)
   ================================================================ */

.curseur,
.curseur-point { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .curseur,
  .js .curseur-point {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2100;
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: difference;
  }

  .js .curseur {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(247, 246, 242, 0.75);
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s var(--ease);
  }

  .js .curseur.est-grand {
    width: 56px;
    height: 56px;
  }

  .js .curseur-point {
    width: 5px;
    height: 5px;
    background: var(--blanc);
    transform: translate(-50%, -50%);
  }

  /* Le curseur natif s'efface au profit du curseur personnalisé */
  .js body,
  .js a,
  .js button,
  .js summary,
  .js input,
  .js textarea,
  .js select,
  .js label { cursor: none; }
}

/* ================================================================
   23. SYSTÈME DE RÉVÉLATION AU SCROLL
   Les éléments [data-reveal] sont masqués uniquement quand
   JavaScript est présent, puis révélés par IntersectionObserver.
   ================================================================ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease);
}

.js [data-reveal="gauche"] { transform: translateX(-48px); }
.js [data-reveal="droite"] { transform: translateX(48px); }

.js [data-reveal].est-visible {
  opacity: 1;
  transform: none;
}

/* Décalages en cascade pour les listes */
.js .service:nth-child(2) { transition-delay: 0.06s; }
.js .service:nth-child(3) { transition-delay: 0.12s; }
.js .service:nth-child(4) { transition-delay: 0.18s; }
.js .service:nth-child(5) { transition-delay: 0.24s; }
.js .service:nth-child(6) { transition-delay: 0.30s; }

.js .pourquoi__liste li:nth-child(even) { transition-delay: 0.08s; }
.js .offre__liste li:nth-child(3n + 2) { transition-delay: 0.06s; }
.js .offre__liste li:nth-child(3n) { transition-delay: 0.12s; }

/* Les visuels de projet remplacent la translation par un
   dévoilement en masque avec bascule de perspective */
.js .projet__visuel[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.js .projet__visuel[data-reveal] .navigateur {
  opacity: 0;
  transform: rotateX(7deg) translateY(44px);
  clip-path: inset(0 0 16% 0);
  transition:
    opacity 0.9s var(--ease-forte),
    transform 0.9s var(--ease-forte),
    clip-path 0.9s var(--ease-forte);
}

.js .projet__visuel[data-reveal].est-visible .navigateur {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* ================================================================
   24. RESPONSIVE
   Largeurs vérifiées : 320, 375, 430, 768, 1024, 1440, 1920 px.
   ================================================================ */

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

@media (max-width: 899px) {
  /* --- Menu mobile plein écran --- */
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 2.8rem;
    background: rgba(5, 5, 5, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
  }

  .nav--ouvert {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s var(--ease);
  }

  .nav__liste {
    flex-direction: column;
    gap: 1.4rem;
    text-align: center;
  }

  .nav__lien {
    font-family: var(--police-titre);
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }

  .nav--ouvert .nav__lien {
    opacity: 1;
    transform: none;
  }

  .nav--ouvert li:nth-child(1) .nav__lien { transition-delay: 0.08s; }
  .nav--ouvert li:nth-child(2) .nav__lien { transition-delay: 0.14s; }
  .nav--ouvert li:nth-child(3) .nav__lien { transition-delay: 0.20s; }
  .nav--ouvert li:nth-child(4) .nav__lien { transition-delay: 0.26s; }
  .nav--ouvert li:nth-child(5) .nav__lien { transition-delay: 0.32s; }

  .nav__cta {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s var(--ease) 0.4s, transform 0.5s var(--ease) 0.4s,
      background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  }

  .nav--ouvert .nav__cta {
    opacity: 1;
    transform: none;
    min-height: 3.25rem;
    padding: 0 2rem;
    font-size: 0.82rem;
  }

  /* --- Grilles empilées --- */
  .projet,
  .projet--inverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .projet--inverse .projet__visuel { order: 0; }
  .projet--inverse .projet__infos { order: 0; }

  .comparatif__grille,
  .pourquoi__grille,
  .contact__grille { grid-template-columns: 1fr; }

  .pourquoi__texte {
    border-left: none;
    border-top: 1px solid var(--noir-casse);
    padding-inline: 0;
  }

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

  /* Effets 3D atténués sur écrans tactiles */
  .titre-3d { --rx3d: 0deg; }
  .titre-3d::before { transform: translateZ(-14px) translateY(0.04em); }
  .titre-3d::after { transform: translateZ(-28px) translateY(0.08em); }
}

@media (max-width: 640px) {
  .section__cadre,
  .pied__cadre,
  .entete__inner { width: min(1160px, 100% - 2.2rem); }

  .form__grille { grid-template-columns: 1fr; }
  .offre__liste { grid-template-columns: 1fr; }
  .pourquoi__liste { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; gap: 2rem; }

  .hero { padding-inline: 1.1rem; }
  .hero__banner { width: min(680px, 92vw); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .service { grid-template-columns: 3.4rem 1fr; gap: 1rem 1.2rem; }
  .etape { grid-template-columns: 4rem 1fr; gap: 1.2rem; }
  .methode__ligne { left: calc(2rem - 0.5px); }

  .projet__num { top: -1.8rem; }

  .form__envoyer { width: 100%; }

  /* Bouton d'appel flottant */
  .flottant { display: inline-flex; }
  .js .retour-haut { bottom: 1.2rem; }
}

@media (max-width: 380px) {
  .btn { padding: 0 1.3rem; }
  .entete__logo { letter-spacing: 0.22em; }
  .navigateur__url { display: none; }
}

@media (min-width: 1600px) {
  .hero__banner { width: min(760px, 88vw); }
}

/* ================================================================
   25. MOUVEMENT RÉDUIT
   Toutes les animations sont désactivées ou réduites.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .loader { display: none !important; }

  .js .hero__scene {
    opacity: 1;
    animation: none;
  }

  .js .masque__int {
    transform: none;
    animation: none;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .projet__visuel[data-reveal] .navigateur {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero__fond-ligne:nth-child(2),
  .hero__scroll-ligne::after,
  .outils__bande-piste,
  .demo__bande { animation: none; }

  .hero__cadre { transform: none; }
  .titre-3d { transform: none; }
}