/* ============================================================
   sections.css — Styles propres aux sections de la page
   Ordre : 1) En-tête  2) Hero
   (Phase 2+ : services, méthode, configurateur…)
   ============================================================ */

/* ============================ 1. EN-TÊTE ============================ */
.site-header {
  position: sticky;            /* reste visible pendant le défilement */
  top: 0;
  z-index: 100;
  background-color: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* Ombre légère une fois défilé (classe posée par nav.js) */
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-card-ui);
}


/* L'en-tête reste en permanence une barre claire pleine, collée en haut :
   aucun état transparent au-dessus du hero. Liens, logo et burger gardent
   donc toujours leur variante « fond clair ». */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
}

/* --- Navigation --- */
/* En desktop : liste des liens puis le sélecteur FR | EN, sur une ligne */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;              /* cible tactile minimale, même pour « FAQ » */
  min-height: 44px;
  padding-inline: 0.25rem;
  font-weight: 500;
  color: var(--text);
}

.site-nav__link::after {
  /* soulignement animé au survol */
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.site-nav__link:hover { color: var(--accent); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }

/* --- Réglages de l'en-tête : langue FR | EN puis bascule de thème --- */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;   /* même écart avec les liens qu'avant */
}

/* --- Sélecteur de langue FR | EN (en-tête + menu mobile) --- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;                 /* espacement logique : neutre pour la direction */
  padding-inline: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.lang-switch__btn {
  min-width: 44px;              /* cible tactile minimale */
  min-height: 44px;
  padding-inline: 0.375rem;
  border-radius: var(--radius);
  color: var(--text-muted-more);
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.lang-switch__btn:hover { color: var(--accent); }

/* Langue active : bleu pixel + petit soulignement, lisible sur fond clair */
.lang-switch__btn.is-active {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.lang-switch__sep {
  color: var(--border);
  -webkit-user-select: none;
  user-select: none;
}

/* ============================ 2. HERO ============================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;          /* fallback */
  min-height: 100svh;         /* hauteur d'écran dynamique (mobile) */
  /* Le hero remonte sous la barre d'en-tête (72px de hauteur + 1px de
     bordure) et réserve cette hauteur en haut pour le contenu. */
  margin-top: calc(-1 * (var(--header-height) + 1px));
  padding-top: calc(var(--header-height) + 1rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
  background-color: var(--hero-bg);
  color: var(--text-on-night);
  overflow: hidden;
  isolation: isolate;


  /* Géométrie du bandeau de pixels, partagée par les deux canvas
     (le JS lit --cell pour dimensionner les carrés). */
  --cell: 52px;                                          /* côté d'un carré */
  --gap: calc(var(--cell) * 16 / 52);                    /* gouttière = 16/52 du carré */
  --step: calc(var(--cell) + var(--gap));                /* pas de la grille (une colonne) */
  --band-width: calc(var(--cell) * 5 + var(--gap) * 4);  /* bandeau = cinq colonnes */
  /* Décalage du bandeau d'une colonne vers la gauche : la colonne de droite
     est supprimée, une nouvelle colonne apparaît à gauche. (0 = collé au bord
     droit ; mettre 0 pour annuler le décalage.) */
  --band-shift: var(--step);
  --band-bleed: 0px;                                     /* débordement hors écran à droite (2rem sur mobile) */
}

/* Thème sombre : le hero garde son fond nuit, identique à la couleur de page
   du bloc suivant. Une fine ligne marque la séparation entre les deux. */
[data-theme="dark"] .hero {
  border-bottom: 1px solid var(--border-on-night-strong);
}

/* Grille de points interactive : elle couvre tout le hero. Seul le rectangle
   du bandeau est laissé vide (côté JS, js/hero.js) : les points s'arrêtent à
   son bord, puis reprennent de l'autre côté, dans la bande libérée à droite.
   Largeur et hauteur explicites : un canvas est un élément remplacé,
   une dimension « auto » serait prise de son ratio interne. */
.hero__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}

/* Bandeau de pixels : cinq colonnes de carrés arrondis, à droite du hero.
   « --band-shift » le décale d'une colonne vers la gauche par rapport au bord
   droit : la colonne de droite est supprimée, une nouvelle colonne est ajoutée
   à gauche (la bande de gauche récupère la place libérée).
   Dessiné par js/hero.js ; il déborde aussi en haut et en bas du hero. */
.hero__canvas {
  position: absolute;
  top: -3rem;                                      /* débordement haut */
  right: calc(var(--band-shift) - var(--band-bleed));   /* décalage d'une colonne vers la gauche */
  width: var(--band-width);                        /* cinq colonnes */
  /* Hauteur explicite : un canvas est un élément remplacé, « height: auto »
     prendrait le ratio des attributs width/height au lieu de remplir le hero. */
  height: calc(100% + 6rem);                       /* débordement haut + bas */
  pointer-events: none;
  z-index: -1;
}

.hero__inner {
  display: grid;
  width: 100%;
}

/* --- Colonne gauche : logo puis texte --- */
.hero__text {
  width: 100%;
  max-width: 34rem;            /* laisse respirer le bandeau de pixels à droite */
}

/* Logo : icône 2x2 et nom côte à côte */
.hero__brand {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.hero__heading { min-width: 0; }

.hero__title {
  margin-bottom: 0.25rem;
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 500;                                /* Poppins Medium */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-on-night);
}

/* Les deux mots du H1 sont animés séparément par l'intro : ils doivent
   accepter une transformation (un span inline l'ignorerait). */
.hero__title-name,
.hero__title-accent { display: inline-block; }

.hero__title-accent { color: var(--accent-night); }         /* « Pixel » en bleu ciel */

.hero__slogan {
  font-family: var(--font-title);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 300;                                /* Poppins Light */
  line-height: 1.3;
  color: var(--text-muted-light);
}

.hero__subtitle {
  max-width: 38rem;
  margin-bottom: 2rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--text-muted-night);          /* contraste AA sur fond nuit */
}


.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- L'icône-fenêtre de quatre carrés --- */
.hero__visual {
  display: flex;
  flex: none;
  perspective: 900px;          /* profondeur pour l'inclinaison 3D */
}

.hero-icon {
  --sq: clamp(64px, 8vw, 108px);                 /* côté d'un carré */
  --sq-gap: calc(var(--sq) * 24 / 108);          /* gouttière = 24/108 du carré */
  --sq-radius: calc(var(--sq) * 14 / 108);       /* arrondi = 14/108 du carré */
  display: grid;
  grid-template-columns: repeat(2, var(--sq));
  gap: var(--sq-gap);
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;          /* inertie douce de l'inclinaison */
  pointer-events: none;                          /* ne capte pas les clics : les carrés reçoivent directement */
}

/* Un carré de l'icône = un bouton (clavier + tactile) */
.hero-icon__square {
  position: relative;
  display: block;
  width: var(--sq);
  height: var(--sq);
  border-radius: var(--sq-radius);
  transition: scale var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  scale: 1;                                              /* « pop » indépendant du transform GSAP */
  pointer-events: auto;                                  /* reçoit survol et clic malgré le parent incliné */
  cursor: pointer;
}

/* Couleurs de l'icône (haut-gauche et bas-droite clairs, haut-droite bleu,
   bas-gauche ardoise) + lueur douce autour du carré bleu.
   Variables immuables : le hero reste identique dans les deux thèmes. */
.hero-icon__square--tl,
.hero-icon__square--br { background-color: var(--hero-icon-sq-light); }

.hero-icon__square--bl { background-color: var(--hero-icon-sq-muted); }

.hero-icon__square--tr {
  background-color: var(--hero-icon-sq-accent);
  box-shadow: 0 0 28px var(--glow-hero-icon);
}

/* Pop + étiquette au survol, au focus clavier, au toucher et au clic */
.hero-icon__square:hover,
.hero-icon__square:focus-visible,
.hero-icon__square:active,
.hero-icon__square.is-active {
  scale: 1.06;
  z-index: 2;
}

.hero-icon__label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 4px;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--hero-label-text);
  background-color: var(--hero-icon-sq-light);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}

.hero-icon__square:hover .hero-icon__label,
.hero-icon__square:focus-visible .hero-icon__label,
.hero-icon__square:active .hero-icon__label,
.hero-icon__square.is-active .hero-icon__label {
  opacity: 1;
  translate: -50% 0;
}

/* Les étiquettes de la rangée du haut s'affichent au-dessus de l'icône,
   pour ne pas recouvrir les carrés de la rangée du bas */
.hero-icon__square--tl .hero-icon__label,
.hero-icon__square--tr .hero-icon__label {
  top: auto;
  bottom: calc(100% + 10px);
  translate: -50% -4px;
}

.hero-icon__square--tl:hover .hero-icon__label,
.hero-icon__square--tl:focus-visible .hero-icon__label,
.hero-icon__square--tl:active .hero-icon__label,
.hero-icon__square--tl.is-active .hero-icon__label,
.hero-icon__square--tr:hover .hero-icon__label,
.hero-icon__square--tr:focus-visible .hero-icon__label,
.hero-icon__square--tr:active .hero-icon__label,
.hero-icon__square--tr.is-active .hero-icon__label {
  translate: -50% 0;
}

/* ============================ 3. SERVICES ============================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* 6 cartes : la grille passe à 3 colonnes (3 × 2) dès 56rem (≈896px),
   2 colonnes en dessous de 1 tablette, 1 colonne sur mobile. */

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* Micro-interaction au survol (desktop) et à l'appui (tactile) */
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--sky);
  box-shadow: var(--shadow-soft);
}

.service-card:active { transform: translateY(-2px); }

/* Titre de carte en h2 sur services.html (H1 → H2, pas de saut de niveau)
   avec la même taille que le h3 utilisé sur l'accueil. */
.service-card__title {
  font-size: 1.125rem;
  font-weight: 500;
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.5rem;
  color: var(--accent);
  background-color: var(--accent-subtle);
  border-radius: var(--radius);
  transition: scale var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out);
}

.service-card:hover .service-card__icon {
  scale: 1.08;
  rotate: -4deg;
}

.service-card p { color: var(--text-muted); }

/* Intitulé court d'une liste de points inclus (« Inclus ») */
.service-card__label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted-more);
}

/* Les 4 points inclus : puce de validation en bleu pixel */
.service-card__list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.service-card__list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.5rem;
}

.service-card__list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 500;
}

/* Cible idéale : collée en bas de carte, séparée d'un filet */
.service-card__ideal {
  margin-top: auto;      /* aligne le bloc final sur toutes les cartes */
  padding-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.service-card__ideal strong {
  font-weight: 500;
  color: var(--text);
}

.service-card__cta {
  margin-top: 1rem;      /* juste sous « Idéal pour » */
  align-self: flex-start;
}

.service-card__details {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.service-card__details[open] {
  padding-top: 0.85rem;
}

.service-card__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.8rem 0 0;
  font-weight: 500;
  color: var(--accent);
  list-style: none;
}

.service-card__details-toggle::-webkit-details-marker {
  display: none;
}

.service-card__details-toggle::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  /* line-height 1 : le glyphe « + » reste optiquement centré dans le cercle
     (hériter du 1.6 du body déborde de la pastille et décale le signe). */
  line-height: 1;
  /* Léger rattrapage optique : le glyphe de la police Inter est dessiné
     1,5 px sous le centre géométrique. border-box + height fixe ⇒ un
     padding-bottom de 3 px remonte le contenu de 1,5 px. */
  padding-bottom: 3px;
  font-size: 1rem;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Ouvert : la pastille passe en aplat de texte, le signe en couleur de fond
   (lisible dans les deux thèmes). */
.service-card__details[open] .service-card__details-toggle::after {
  transform: rotate(45deg);
  color: var(--bg);
  background-color: var(--text);
}

.service-card__details-body {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.2rem;
}

.service-card__list--detail {
  gap: 0.5rem;
  padding-bottom: 0.25rem;
}

.services__more {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
}

.services__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  /* Bouton bleu : mêmes jetons que le bouton principal, donc bleu
     #2563EB sur texte blanc dans les deux thèmes (5,1:1). */
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-bg);
  border-radius: 999px;
  box-shadow: 0 6px 18px var(--accent-shadow);
}

.services__more-link:hover {
  color: var(--btn-primary-text);
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 8px 22px var(--accent-shadow-hover);
}

.services__more-copy {
  max-width: 38rem;
  color: var(--text-muted-more);
}

/* ---------- Bandeau « Toujours inclus » ---------- */
.services__always {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--surface-ice);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.services__always-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.services__always-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services__always-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.services__always-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 500;
}

/* Ligne de réassurance sous le bandeau */
.services__reassurance {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  font-size: 0.9375rem;
  color: var(--text-muted-more);
  text-align: center;
}

.services-page-hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.services-page__lead {
  max-width: 50rem;
  margin-inline: auto;
}

.services-page__lead p {
  max-width: 42rem;
  color: var(--text-muted);
}

.services-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
}

/* Les 4 cartes de la page « Services complémentaires » : dès que la grille
   passe à 3 colonnes, la 4e carte se retrouve seule sur sa ligne. On la
   replace sur la colonne du milieu pour garder la grille équilibrée
   (en 1 ou 2 colonnes, la carte se place normalement, sans orpheline). */
@media (min-width: 56rem) {
  .services-page__catalog .services__grid > :nth-child(4) {
    grid-column: 2;
  }
}

.services-page__catalog {
  position: relative;
  overflow: hidden;
}

.services-page__catalog::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  width: min(34rem, 90vw);
  height: min(34rem, 90vw);
  background: radial-gradient(circle, var(--accent-night-subtle), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.services-page__catalog .container,
.services-page__closing .container {
  position: relative;
}

.services-page__closing-copy {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  text-align: center;
  color: var(--text-on-night-soft);
}

.services-page__closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* ==================== 4. POURQUOI (piliers de marque) ==================== */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.pillar {
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: var(--surface-night-subtle);
  border: 1px solid var(--border-on-night);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.pillar:hover {
  border-color: var(--border-on-night-accent);
  background-color: var(--surface-on-night-hover-soft);
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--accent-night);
  background-color: var(--accent-night-subtle);
  border-radius: var(--radius);
}

.pillar h3 {
  margin-bottom: 0.5rem;
  color: var(--text-on-night);
}

.pillar p { color: var(--text-on-night-soft); }

/* ============================ 5. MÉTHODE (timeline) ============================ */
.timeline {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
}

/* Rail vertical (piste claire + progression bleue animée au défilement) */
.timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.3rem;               /* axe mobile : aligné sur le centre du marqueur */
  width: 2px;
  background-color: var(--border);
  border-radius: 2px;
}

.timeline__progress {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--accent);
  border-radius: 2px;
  transform-origin: top;      /* rempli de haut en bas (scaleY via GSAP) */
}

.timeline__list {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  list-style: none;
}

.timeline__item {
  position: relative;
  padding-left: 4.25rem;      /* espace réservé au marqueur (mobile) */
}

.timeline__marker {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--text-on-night);
  background-color: var(--night);
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--border);
}

/* Thème sombre : le marqueur nuit se confondrait avec la page ; on l'éclaircit
   d'un cran (carte) tout en gardant l'anneau de séparation. */
[data-theme="dark"] .timeline__marker {
  background-color: var(--surface);
  border-color: var(--bg);
}

.timeline__card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.timeline__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.timeline__card h3 { margin-bottom: 0.5rem; }
.timeline__card p { color: var(--text-muted); }

/* Grandes largeurs : timeline centrée, cartes alternées de part et d'autre */
@media (min-width: 900px) {
  .timeline__rail { left: 50%; transform: translateX(-50%); }

  .timeline__item {
    display: grid;
    grid-template-columns: 1fr 3.5rem 1fr;
    align-items: start;
    padding-left: 0;
  }

  .timeline__marker {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .timeline__card { grid-row: 1; }

  .timeline__item:nth-of-type(odd) .timeline__card {
    grid-column: 1;
    text-align: right;
  }

  .timeline__item:nth-of-type(even) .timeline__card { grid-column: 3; }
}

/* ============ 6. CONFIGURATEUR DE PROJET ET DEMANDE DE DEVIS ============ */
/* Aucun prix n'est affiché : chaque demande est chiffrée sur mesure. */
.configurator {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

/* Colonne des étapes de configuration */
.configurator__fields {
  display: grid;
  gap: 1.25rem;
}

/* Une étape = une carte blanche : titre numéroté + contrôles */
.configurator__card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.configurator__group {
  display: grid;
  gap: 0.875rem;
  border: 0;
}

.configurator__legend {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--text);
}

.configurator__step {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  background-color: var(--surface-ice);
  border-radius: 999px;
}

.configurator__hint {
  font-size: 0.875rem;
  color: var(--text-muted-more);
}

/* Choix du projet : grandes cartes cliquables (radios) */
.choix-produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}

.choix-produit { position: relative; display: flex; }

/* Input natif invisible, conservé accessible (focus + tactile) */
.choix-produit input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choix-produit__face {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  width: 100%;
  padding: 1rem;
  color: var(--accent);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.choix-produit__titre {
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--text);
}

.choix-produit__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.choix-produit:hover .choix-produit__face { border-color: var(--sky); }

.choix-produit input:checked + .choix-produit__face {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-halo);
}

.choix-produit input:focus-visible + .choix-produit__face {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Champs simples : listes déroulantes et zone de texte */
.field { display: grid; gap: 0.4rem; }

.field__label { font-weight: 500; color: var(--text); }

.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out);
}

.field select:hover,
.field textarea:hover { border-color: var(--sky); }

.field textarea {
  min-height: 9rem;            /* zone de description confortable */
  resize: vertical;
}

.field textarea::placeholder { color: var(--text-muted-more); }

.field__aide { font-size: 0.875rem; color: var(--text-muted-more); }

/* Puces de choix (radios / cases stylisées) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Groupes de fonctionnalités masqués (autre type de projet choisi) */
.chips[hidden] { display: none; }

.chip { position: relative; display: inline-flex; }

/* Input natif rendu invisible mais conservé accessible (focus + tactile) */
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip__face {
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* cible tactile >= 44px */
  padding: 0.55rem 1.1rem;
  font-weight: 500;
  color: var(--text);
  background-color: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: 999px;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.chip:hover .chip__face { border-color: var(--sky); }

/* Puce cochée : tons inversés (texte = fond de page, fond = texte) —
   blanc sur nuit en thème clair, nuit sur blanc en thème sombre. */
.chip input:checked + .chip__face {
  color: var(--bg);
  background-color: var(--text);
  border-color: var(--text);
}

.chip input:focus-visible + .chip__face {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Récapitulatif de la demande (fond nuit, aucun prix affiché) */
.configurator__summary {
  position: sticky;            /* reste visible pendant la configuration */
  top: calc(var(--header-height) + 1rem);
  display: grid;
  gap: 0.875rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--text-on-night);
  background-color: var(--bg-night);
  border: 1px solid var(--border-on-night);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.configurator__badge {
  justify-self: start;
  padding: 0.3rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-night);
  background-color: var(--accent-night-pill);
  border-radius: 999px;
}

.configurator__summary h2 {
  font-size: 1.125rem;
  color: var(--text-on-night);
}

.recap {
  display: grid;
  gap: 0.625rem;
  margin: 0;
}

.recap__ligne {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-on-night);
}

.recap__ligne:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.recap dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted-night);
}

.recap dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-on-night);
}

.configurator__note {
  font-size: 0.875rem;
  color: var(--text-muted-night);
}

/* Actions du brief : envoi WhatsApp (lien), puis alternative formulaire */
.configurator__actions {
  display: grid;
  gap: 0.75rem;
}

.configurator__cta {
  justify-self: stretch;
  margin-top: 0.25rem;
}

/* ---------- Modale : choix du moyen de contact ---------- */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--container-pad);
  overflow-y: auto;
  background-color: var(--overlay);
  animation: quote-fade var(--dur) var(--ease-out);
}

.quote-modal[hidden] { display: none; }

.quote-modal__dialog {
  position: relative;
  width: min(34rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background-color: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  animation: quote-in var(--dur) var(--ease-out);
}

.quote-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 44px;                 /* cible tactile >= 44px */
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted-more);
  border-radius: var(--radius);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.quote-modal__close:hover {
  color: var(--text);
  background-color: var(--surface-hover);
}

.quote-modal__title {
  margin-bottom: 0.5rem;
  padding-right: 2.5rem;       /* place pour le bouton fermer */
  font-size: clamp(1.125rem, 3vw, 1.375rem);
}

.quote-modal__desc {
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.quote-modal__choices {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

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

.quote-choice {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 64px;            /* cible tactile confortable */
  padding: 0.875rem 1.125rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.quote-choice:hover {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.quote-choice__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--accent);
  background-color: var(--accent-subtle);
  border-radius: 50%;
}

.quote-choice--whatsapp .quote-choice__icon {
  color: var(--whatsapp);
  background-color: var(--whatsapp-subtle);
}

.quote-choice__text {
  display: grid;
  gap: 0.15rem;
}

.quote-choice__titre {
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--text);
}

.quote-choice__desc {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.quote-modal__apercu-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.quote-modal__apercu-nom { font-size: 1rem; }

.quote-modal__message {
  max-height: 32vh;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  font-family: var(--font-text);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.quote-modal__status {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--accent);
}

@keyframes quote-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes quote-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== 7. RÉALISATIONS ==================== */
.realisations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.realisation-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.realisation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.realisation-card__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 120px;
  padding: 1.25rem;
  color: var(--accent-night);
  background: var(--cover-gradient), var(--hero-bg);
}

.realisation-card__tag {
  padding: 0.25rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--night);
  background-color: var(--ice);
  border-radius: 999px;
}

/* Marque « Exemple » : obligation du spec, bien visible */
.badge-demo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--night);
  background-color: var(--accent-night);
  border-radius: 999px;
}

.realisation-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.625rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.realisation-card__body p { color: var(--text-muted); }

/* Lien « Personnaliser » : mène au configurateur de la page Estimation
   avec le type de projet correspondant présélectionné */
.realisation-card__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;             /* cible tactile >= 44px */
  margin-top: auto;
  padding: 0.5rem 0;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.realisation-card__toggle::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform var(--dur) var(--ease-out);
}

.realisation-card__toggle:hover { color: var(--text); }

.realisation-card__toggle:hover::after { transform: translateX(3px); }

.realisations__note {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.875rem;
  text-align: center;
  color: var(--text-muted);      /* --text-muted-more sur --bg-alt = 3,9:1 (< 4,5:1) ; --text-muted = 6:1 */
}

/* ============ 7b. DÉTAILS DU PROJET (page Estimation) ============ */
.realisation-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.realisation-detail {
  position: relative;           /* ancre le badge « Exemple » */
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Bloc visé par l'ancre d'un exemple (#real-1…) */
.realisation-detail:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-halo-strong), var(--shadow-card);
}

.realisation-detail__tag {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  background-color: var(--surface-ice);
  border-radius: 999px;
}

.realisation-detail h3 { margin-bottom: 0.5rem; }

.realisation-detail p { color: var(--text-muted); }

.realisation-detail ul {
  margin-top: 0.75rem;
  padding-left: 1.1rem;
  color: var(--text-muted);
  list-style: square;
}

.realisation-detail li { margin-bottom: 0.25rem; }

.realisation-details__back {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* ==================== 8. À PROPOS ==================== */
.about__intro {
  max-width: 42rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--text-muted);
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: 64rem;
  margin-inline: auto;
}

.founder-card {
  display: flex;
  flex-wrap: wrap;              /* sur petit écran, la biographie passe sous les initiales */
  gap: 1.25rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.founder-card__body {
  flex: 1 1 14rem;              /* 14rem minimum avant de passer à la ligne */
  min-width: 0;
}

/* Photo de démonstration : les initiales dans un carré */
.founder-card__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ice);
  background-color: var(--night);
  border-radius: var(--radius);
}

.founder-card__body h3 { margin-bottom: 0.25rem; }

.founder-card__role {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--accent);
}

.founder-card__body p:last-child {
  max-width: 62ch;              /* longueur de ligne confortable */
  color: var(--text-muted);
}

/* ============================ 9. FAQ (accordéon) ============================ */
.faq__list {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin-inline: auto;
}

.faq__item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.faq__item.is-open {
  border-color: var(--sky);
  box-shadow: var(--shadow-card);
}

.faq__heading { font-size: inherit; font-weight: inherit; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 60px;              /* cible tactile confortable */
  padding: 1rem 1.25rem;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease-out);
}

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

/* Icône + / – */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out);
}

.faq__icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq__icon::after { top: 0; left: 6px; width: 2px; height: 14px; }

.faq__question[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }

.faq__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
}

.faq__answer[hidden] { display: none; }

.faq__answer:not([hidden]) { animation: faq-in var(--dur) var(--ease-out); }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================ 10. CONTACT ============================ */
.contact__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* --- Comment ça se passe : 3 étapes avant le formulaire --- */
.contact__process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.contact__process-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background-color: var(--surface-night-subtle);
  border: 1px solid var(--border-on-night);
}

.contact__process-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--accent-night);
  color: var(--night);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
}

.contact__process-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-on-night);
}

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

.contact__form {
  display: grid;
  gap: 1.25rem;
}

.form-field {
  display: grid;
  gap: 0.4rem;
}

.form-field label { font-weight: 500; color: var(--text-on-night-soft); }

.form-field__required { color: var(--accent-night); }
.form-field__optional { font-weight: 400; font-size: 0.875rem; color: var(--text-muted-night); }

/* Sur les cartes claires du brief (fond blanc), --slate-light ne donne que
   2,56:1 (échec AA). On repasse sur --slate (4,8:1) uniquement à cet endroit :
   le formulaire de contact reste sur --slate-light, valide sur fond nuit. */
.configurator__legend .form-field__optional { color: var(--text-muted-more); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--text-on-night);
  background-color: var(--surface-night-subtle);
  border: 1px solid var(--border-on-night-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out);
}

.form-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--slate-light); }

.form-field select option {
  /* Jetons sémantiques : mêmes couleurs que --night / --white en thème clair,
     et liste déroulante sombre en thème sombre (pas de blanc résiduel). */
  color: var(--text);
  background-color: var(--surface);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--border-hover); }

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--error-on-night);
}

.form__error {
  font-size: 0.875rem;
  color: var(--error-on-night);
}

.form__error[hidden] { display: none; }

.contact__form-note {
  max-width: 46ch;
  font-size: 0.875rem;
  color: var(--text-muted-night);
}

/* Coordonnées directes */
.contact__infos {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: var(--surface-night-subtle);
  border: 1px solid var(--border-on-night);
  border-radius: var(--radius-lg);
}

.contact__infos h3 { color: var(--text-on-night); }

.contact__infos-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  color: var(--text-on-night-soft);
}

.contact__infos-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted-night);
}

.contact__infos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* cible tactile */
  color: var(--accent-night);
}

.contact__infos a:hover { color: var(--text-on-night); }

/* Renvoi vers le configurateur : les deux chemins sont complémentaires */
.contact__infos-note {
  padding-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted-night);
  border-top: 1px solid var(--border-on-night);
}

.contact__infos-note a { color: var(--accent-night); }
.contact__infos-note a:hover { color: var(--text-on-night); }

/* ============================ 11. PIED DE PAGE ============================ */
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  color: var(--footer-text);
  background-color: var(--footer-bg);
  border-top: 1px solid var(--border-on-night);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.site-footer__brand p { margin-top: 0.75rem; color: var(--footer-text); }

/* Logo inverse (blanc) obligatoire sur fond nuit — règle du logo.
   height 40px → largeur ≈ 121px : ≥ 120px, le slogan reste affiché. */
.site-footer__brand .logo-svg { height: 40px; width: auto; }

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;              /* cible tactile, même pour « FAQ » */
  min-height: 44px;
  font-weight: 500;
  color: var(--footer-text);
}

.site-footer__nav a:hover { color: var(--accent-night); }

.site-footer__bottom {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-on-night);
  font-size: 0.875rem;
  color: var(--text-muted-night);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.site-footer__privacy {
  color: var(--footer-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__privacy:hover { color: var(--accent-night); }

/* ============================ INTRO (accueil) ============================ */
/* Le voile nuit et le verrouillage n'existent que si js/intro-init.js a
   posé .is-intro sur <html> : jamais sans JavaScript, jamais en mouvement
   réduit, jamais sur les autres pages. Les carrés animés sont ceux du hero
   (#hero-icon-motion) : aucun logo dupliqué. */
html.is-intro,
html.is-intro body {
  overflow: hidden;
}

/* Réserve la largeur de la barre de défilement qui réapparaîtra au
   déverrouillage : le contenu a ainsi déjà sa largeur finale. Sans cela,
   l'icône et le logo se décalent d'environ 7,5 px au moment où la barre
   réapparaît (glitch d'une image). La mesure est posée par js/intro.js.
   Le voile (100vw) couvre la zone de padding ; le fond nuit du <html>
   sert de repli. */
html.is-intro {
  background-color: var(--night);
}

html.is-intro body {
  padding-right: var(--scrollbar-width, 0px);
  /* Même nuit que le voile : si 100dvh est un instant plus court que la
     zone visible (barre d'adresse mobile au chargement), la bande découverte
     reste nuit au lieu de laisser apparaître le fond clair du site. */
  background-color: var(--night);
}

/* Tout le contenu du hero est masqué en opacité (jamais display:none),
   le texte reste dans le DOM pour le SEO. L'icône reste visible au-dessus
   du voile : c'est elle qui joue l'intro. */
html.is-intro .site-header,
html.is-intro .skip-link,
html.is-intro .hero__heading,
html.is-intro .hero__subtitle,
html.is-intro .hero__actions,
html.is-intro .hero__dots,
html.is-intro .hero__canvas {
  opacity: 0;
}

/* Le hero laisse sortir les carrés vers les coins de l'écran. isolation:auto
   permet à l'icône (z-index 1200) de passer au-dessus du voile (z-index 1000),
   lui aussi dans le flux racine. */
html.is-intro .hero {
  overflow: visible;
  isolation: auto;
}

html.is-intro .hero__visual {
  position: relative;
  z-index: 1200;
  opacity: 0;                     /* révélé après placement aux coins, sans
                                     changer la visibilité du sous-arbre */
}

html.is-intro.is-intro-ready .hero__visual {
  opacity: 1;
}

html.is-intro .hero-icon,
html.is-intro .hero-icon__square {
  pointer-events: none;           /* pas de survol pendant l'intro */
}

html.is-intro.is-intro-ready .hero-icon__square {
  pointer-events: auto;           /* réactive le survol une fois l'intro terminée */
}

html.is-intro .hero-icon__label {
  opacity: 0 !important;
}

.intro-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  width: 100vw;                     /* couvre toute la fenêtre, padding compris */
  height: 100%;
  height: 100dvh;
  background-color: var(--night);   /* même nuit que le hero : fondu invisible */
  z-index: 1000;
}

html.is-intro .intro-overlay {
  display: block;
}

/* Lueur du carré bleu pendant la phase « allumage » (animée en opacité) */
.intro-glow {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--sky) 80%, transparent) 0%,
    color-mix(in srgb, var(--sky) 30%, transparent) 38%,
    transparent 70%
  );
  opacity: 0;
}

/* Enveloppe d'intro : seule porteuse du voyage (phase C). L'inclinaison
   et les étiquettes restent sur .hero-icon, à l'intérieur. */
.hero-icon-motion {
  display: block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;   /* conserve la perspective 3D de .hero__visual */
  pointer-events: none;           /* sinon, incliné, ce plan cache les carrés du fond
                                     au test de survol : ils devenaient non cliquables */
}


/* ============================ RESPONSIVE ============================ */

/* Tablette et au-dessus : texte à gauche, bandeau de pixels à droite */
@media (min-width: 900px) {
  /* Le texte ne passe pas sous le bandeau de pixels */
  .hero__text { max-width: min(34rem, 50vw); }

  /* Contact : formulaire à gauche, coordonnées à droite */
  .contact__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  /* Configurateur : étapes à gauche, récapitulatif collant à droite */
  .configurator {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  }

  .services-page__lead {
    display: grid;
    gap: 0.5rem;
  }
}

/* Mobile : burger + menu plein écran */
@media (max-width: 899.98px) {
  .burger { display: inline-flex; }

  /* Bandeau de pixels : carrés plus petits, en retrait, derrière le texte.
     Comme avant, il déborde de 2rem hors du bord droit, puis est décalé
     d'une colonne vers la gauche comme sur grand écran. */
  .hero {
    --cell: 30px;
    --band-bleed: 2rem;
  }

  .hero__canvas { opacity: 0.5; }

  /* Points : s'arrêtent au bord du bandeau, un peu plus discrets sur mobile */
  .hero__dots { opacity: 0.7; }

  .hero__text { max-width: 100%; }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;   /* sous l'en-tête, plein écran */
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem var(--container-pad);
    background-color: var(--night);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility 0s linear var(--dur);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .site-nav__link {
    min-height: 56px;
    padding: 0.75rem 0.5rem;
    font-family: var(--font-title);
    font-size: 1.375rem;
    color: var(--text-on-night);
    border-bottom: 1px solid var(--border-on-night);
  }

  .site-nav__link::after { display: none; }
  .site-nav__link:hover { color: var(--accent-night); }

  /* Réglages sur fond nuit : langue et bascule de thème, alignées à gauche */
  .site-nav__actions {
    align-self: flex-start;
    margin-inline-start: 0;
    gap: 0.5rem;
  }

  .lang-switch { font-size: 1rem; }

  .lang-switch__btn { color: var(--text-muted-night); }
  .lang-switch__btn:hover { color: var(--text-on-night); }
  .lang-switch__btn.is-active { color: var(--accent-night); }

  .lang-switch__sep { color: var(--border-on-night-strong); }

  /* Le panneau mobile est toujours nuit : la bascule passe en tons clairs
     (sinon l'icône « nuit » disparaîtrait sur le fond nuit en thème clair) */
  .theme-toggle { color: var(--text-on-night); }
  .theme-toggle:hover { background-color: var(--surface-on-night-hover); }

  /* Verrouillage du défilement derrière le menu ouvert */
  body.nav-open { overflow: hidden; }

  .services-page__actions,
  .services-page__closing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .services__more-link,
  .services-page__actions .btn,
  .services-page__closing-actions .btn {
    width: 100%;
  }
}

/* Verrouillage du défilement derrière la modale de devis */
body.quote-open { overflow: hidden; }

/* ==================== MOUVEMENT RÉDUIT ==================== */
@media (prefers-reduced-motion: reduce) {
  /* Icône statique, canvas d'arrière-plan non animé (js/hero.js dessine
     une seule image fixe puis s'arrête) */
  .hero-icon,
  .hero-icon__square,
  .hero-icon__label {
    transition: none !important;
  }

  /* Modale de devis : apparition immédiate, sans déplacement */
  .quote-modal,
  .quote-modal__dialog {
    animation: none;
    transition: none;
  }

  .quote-choice:hover { transform: none; }
}

/* ==================== BOUTON WHATSAPP FLOTTANT ==================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--whatsapp-light) 0%, var(--whatsapp) 100%);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 24px var(--whatsapp-glow), 0 2px 8px var(--border-subtle);
  transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.whatsapp-float svg {
  width: 30px;
  height: 30px;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: var(--night);
  transform: scale(1.08);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none !important; }
}
@media (min-width: 900px) {
  .whatsapp-float { bottom: 32px; right: 32px; width: 64px; height: 64px; font-size: 26px; }
}