/* Playfair Display, sous-ensemble latin, servi depuis le site.
   Avant : deux liens vers fonts.googleapis.com / fonts.gstatic.com bloquaient
   le rendu (660 a 750 ms releves par Lighthouse) pour une resolution DNS, un
   handshake TLS, puis la feuille de style, puis seulement le fichier woff2.
   Ici le woff2 est prechargé en meme temps que cette feuille : un seul
   aller-retour, sur le domaine du site. Licence SIL OFL 1.1. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   PRO MOSAÏQUE — feuille de style unique
   Mobile-first. Fond sombre, un seul accent doré par écran.
   ============================================================ */

:root {
  --bg: #1E0D12;
  --surface: #31171C;
  --text: #EDE4DC;
  --muted: #B49A9E;
  --gold: #C9A227;
  --framboise: #AA024F; /* réservé au logo */
  --whatsapp: #25D366;

  --gold-contrast: #1a1208;       /* texte posé sur l'accent doré */
  --border: rgba(237, 228, 220, 0.3);      /* contours interactifs */
  --border-soft: rgba(237, 228, 220, 0.1); /* séparateurs discrets */

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.55);

  --radius: 10px;
  --container: 1120px;
}

/* Thème clair : pages pose, magasins, contact, produits (class="light" sur body).
   La navbar et le footer restent sombres, en couleurs figées plus bas. */
body.light {
  --bg: #F7F3EF;
  --surface: #FFFFFF;
  --text: #2A1418;
  --muted: #6B5257;
  --gold: #9A7B18;
  --gold-contrast: #FFF9EA;
  --border: rgba(42, 20, 24, 0.3);
  --border-soft: rgba(42, 20, 24, 0.12);
  --shadow-1: 0 8px 24px rgba(42, 20, 24, 0.12);
  --shadow-2: 0 16px 48px rgba(42, 20, 24, 0.18);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; display: block; }

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

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.9rem, 6.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { color: var(--text); }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 56px 0; }

.section-head { margin-bottom: 28px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { color: var(--muted); max-width: 42ch; }

/* ---------- Boutons ---------- */

/* Verre translucide : fond sombre flouté, capsule, texte clair.
   Couleurs figées, identiques en page claire comme en page sombre. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  background: rgba(30, 13, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #EDE4DC;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Principal : anneau en dégradé aux couleurs du logo, dessiné en pseudo-élément
   masqué pour laisser le centre translucide */
.btn-gold::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #AA024F, #8E1D21, #601E22, #371C21);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: filter 0.15s ease;
}

.btn-gold:hover::before { filter: brightness(1.45) saturate(1.1); }

/* Secondaire : même verre, contour uni pour la hiérarchie */
.btn-ghost { border-color: #6B2020; }
.btn-ghost:hover { border-color: #9A3838; }

.btn svg { flex: none; }

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

/* ---------- Header ---------- */

/* Navbar : capsule flottante centrée, sombre sur toutes les pages (couleurs figées).
   Fixe au scroll, décollée du haut, elle passe par-dessus le contenu. */
.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: rgba(30, 13, 18, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #EDE4DC;
  transition: transform 0.35s ease;
}

/* Masquée en scrollant vers le bas, réapparaît en remontant (voir main.js) */
.site-header.nav-up { transform: translate(-50%, calc(-100% - 24px)); }

/* Mobile : la capsule s'étale sur toute la largeur, logo à gauche,
   bouton menu à droite (hauteur et verre inchangés) */
@media (max-width: 767px) {
  .site-header {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
  }

  .site-header .container {
    width: 100%;
    justify-content: space-between;
  }

  .site-header.nav-up { transform: translateY(calc(-100% - 24px)); }
}

/* Même contour dégradé que les boutons, dessiné en anneau masqué */
.site-header::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #AA024F, #8E1D21, #601E22, #371C21);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.site-header .container {
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
}

/* La navbar fixe ne réserve plus de place dans le flux :
   on dégage le haut des pages qui ne commencent pas par le hero plein écran */
main > :first-child:not(.hero-pose) { padding-top: 128px; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.brand img { width: 40px; height: 40px; }

/* Nom de la marque dans la navbar : mobile uniquement, dans le style
   de la signature du hero */
.brand-name { display: none; }

@media (max-width: 767px) {
  .brand-name {
    display: inline;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #EDE4DC;
  }
}

.nav-toggle {
  background: none;
  border: none;
  color: #EDE4DC;
  padding: 8px;
  cursor: pointer;
  display: block;
}

.site-nav {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 24px), 340px);
  background: rgba(30, 13, 18, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(237, 228, 220, 0.15);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.site-nav.open { display: block; }

.site-nav a {
  display: block;
  padding: 14px 20px;
  border-top: 1px solid rgba(237, 228, 220, 0.06);
  color: #B49A9E;
  font-weight: 500;
}

.site-nav a:first-child { border-top: none; }

.site-nav a:hover, .site-nav a[aria-current="page"] { color: #EDE4DC; }

/* Numéro dans la navbar : desktop uniquement */
.nav-tel { display: none; }

@media (min-width: 860px) {
  .nav-tel {
    display: inline-flex;
    align-items: center;
    padding: 8px 4px 8px 16px;
    margin-left: 6px;
    border-left: 1px solid rgba(237, 228, 220, 0.18);
    color: #EDE4DC;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .nav-tel:hover { color: #C9A227; }
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    transform: none;
    width: auto;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 4px;
  }
  .site-nav a {
    border: none;
    padding: 8px 14px;
    border-radius: 999px;
  }
  .site-nav a[aria-current="page"] { color: #C9A227; }
}

/* ---------- Hero + Pose : scène épinglée (GSAP ScrollTrigger) ---------- */

/* La scene du hero est epinglee par GSAP sur 520 % de hauteur d'ecran.
   GSAP arrive du CDN apres le premier affichage : son epinglage inserait
   alors un espaceur de 520 svh d'un coup et poussait toute la page vers le
   bas — c'etait le CLS de 0,2 releve par Lighthouse sur l'accueil, et le
   seul defaut de performance qui restait. La hauteur est donc reservee ici,
   des le premier rendu, et home.js epingle sans espaceur (pinSpacing: false).
   Le fond est repris sur la section : sans lui, les 520 svh reserves
   apparaissent en clair le temps que GSAP arrive. */
.hero-pose {
  height: 620vh;
  height: 620svh;
  background: #1E0D12;
}

/* Sans GSAP (echec de chargement ou mouvement reduit), rien n'est epingle :
   la section reprend la hauteur de son contenu. */
body.no-anim .hero-pose {
  height: auto;
}

.hp-stage {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  background: #1E0D12;
}

/* L'image unique de la scène : ancrée en haut à droite pour que GSAP
   puisse la ranger en vignette puis la faire sortir par le haut.
   À l'état initial : plein cadre, sans ombre ni voile. */
.hp-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hp-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fondu sombre du bas, sous le texte : s'efface au scroll avec le contenu du hero */
.hp-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(30, 13, 18, 0) 45%, rgba(30, 13, 18, 0.82) 100%);
}

/* Texte du hero : centré horizontalement, posé au tiers inférieur */
.hp-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 clamp(24px, 6vw, 96px) clamp(110px, 22vh, 240px);
}

/* Apparition au chargement : sur-titre puis titre se révèlent lettre par
   lettre, de gauche à droite (découpage en spans par main.js) */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes char-in {
  to { opacity: 1; }
}

.hp-hero-content .word { display: inline-block; white-space: nowrap; }

.hp-hero-content .char {
  opacity: 0;
  animation: char-in 0.45s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero-content .char { animation: none; opacity: 1; }
}

/* Indicateur de scroll : fine flèche centrée en bas du hero,
   ondulation douce en boucle, fondu de sortie au premier scroll */
.hp-scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 5vh, 48px);
  z-index: 3;
  display: flex;
  justify-content: center;
  color: #EDE4DC;
  /* fill "backwards" : après l'entrée, l'opacité redevient pilotable par GSAP */
  animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hp-scroll-hint svg { animation: hint-bob 2.2s ease-in-out infinite; }

/* Fallback sans GSAP : masqué en descendant, réaffiché en haut (voir main.js).
   Avec GSAP, l'opacité inline posée par le scrub prime sur cette classe. */
.hp-scroll-hint.gone { opacity: 0; }

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--bob-amp, 9px)); }
}

/* Mobile : flèche dorée, posée plus bas pour rester à distance du bouton devis */
@media (max-width: 767px) {
  .hp-scroll-hint {
    color: #C9A227;
    /* Au-dessus de la zone de la barre Appeler/WhatsApp (~64px, z-index 70)
       et de l'encoche, pour rester visible même sur écrans courts —
       marge incluant le point bas du rebond (--bob-amp) */
    bottom: 96px;
    bottom: calc(max(96px, 12vh) + env(safe-area-inset-bottom, 0px));
    bottom: calc(max(96px, 12svh) + env(safe-area-inset-bottom, 0px));
  }
  /* Pastille en verre translucide à contour doré, comme les boutons du site ;
     flèche agrandie au trait épaissi, rebond amplifié pour rester lisible
     sur la piscine */
  .hp-scroll-hint svg {
    --bob-amp: 16px;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 39, 0.9);
    background: rgba(30, 13, 18, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-1);
    stroke-width: 2.5;
    animation-duration: 2.6s;
  }
}

/* Écrans courts : pastille compacte et rebond réduit, pour garder de l'air
   entre le bouton devis au-dessus et la barre Appeler/WhatsApp en dessous */
@media (max-width: 767px) and (max-height: 700px) {
  .hp-scroll-hint {
    bottom: 92px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .hp-scroll-hint svg {
    --bob-amp: 12px;
    width: 42px;
    height: 42px;
    padding: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-scroll-hint,
  .hp-scroll-hint svg { animation: none; }
}

.hero-kicker {
  color: #EDE4DC;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 14px;
}

.hp-hero-content h1 {
  color: #EDE4DC;
  max-width: 21ch;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
}

/* Marque discrète en bas à gauche du hero, mêmes marges que le texte */
.hp-brand {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: clamp(48px, 9vh, 96px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #EDE4DC;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  font-weight: 600;
}

.hp-brand img { width: 28px; height: 28px; }

/* Sur mobile, le bloc texte occupe toute la largeur : la marque disparaît */
@media (max-width: 719px) {
  .hp-brand { display: none; }
}

/* Bouton devis du hero : mobile uniquement */
.hero-cta { display: none; }

/* Mobile : cadrage sur la villa et la piscine, titre compact (3 lignes max),
   bloc texte remonté à ~40 % de la hauteur depuis le bas */
@media (max-width: 767px) {
  /* Image verticale hero-mobile : cadre agrandi de 18 % ancré en haut,
     pour que le bord bas s'arrête sur l'eau, avant la margelle en pierre */
  .hp-bg img {
    height: 118%;
    object-position: 50% 0;
  }
  .hero-cta {
    display: inline-flex;
    margin-top: 22px;
  }
  .hp-hero-content {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24vh;
    padding-bottom: 24svh;
  }
  .hp-hero-content h1 { font-size: 1.8rem; margin-bottom: 20px; }
  .hero-kicker { font-size: 12px; letter-spacing: 0.14em; }
  /* Fondu réduit, calé sur le bloc de texte descendu (45 % à 76 % de la
     hauteur) : la villa et les palmiers restent en pleine lumière au-dessus */
  .hp-grad {
    background: linear-gradient(180deg,
      rgba(30, 13, 18, 0) 33%,
      rgba(30, 13, 18, 0.45) 44%,
      rgba(30, 13, 18, 0.45) 77%,
      rgba(30, 13, 18, 0) 89%);
  }
}

/* ---------- Texte de la révélation : derrière l'image, dans la même scène ---------- */

.ip-text {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 8vw, 140px);
}

/* Trois lignes forcées : chaque phrase reste sur sa ligne */
.ip-text p {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3.3vw, 2.8rem);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: #EDE4DC;
  margin-bottom: 0.5em;
}

.ip-text p:last-child { margin-bottom: 0; }

/* Mots éteints au départ, GSAP les amène au blanc plein au fil du scroll */
.ip-text .w { color: rgba(237, 228, 220, 0.22); }

/* Mobile : le texte occupe la largeur disponible ; le centrage vertical
   du bloc image + texte est calculé par home.js */
@media (max-width: 767px) {
  .ip-text { padding: 0 20px; }
  .ip-text p { font-size: 4.5vw; }
}

/* Sans animation (JS absent, GSAP non chargé ou motion réduite) :
   hero statique, pas de texte de révélation */
body.no-anim .ip-text { display: none; }

/* ---------- Placeholders images ---------- */

.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, #3a1d24 0%, #2a1218 55%, #210e14 100%);
  box-shadow: var(--shadow-1);
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 0.8rem;
  color: #B49A9E; /* les placeholders restent sombres, même en page claire */
  letter-spacing: 0.04em;
}

.ph-43 { aspect-ratio: 4 / 3; }
.ph-34 { aspect-ratio: 3 / 4; } /* portrait, grilles de réalisations */

/* Tuile avec vraie photo : l'image remplit le cadre, la légende se pose dessus */
.ph picture, .ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ph img { object-fit: cover; }

/* Légende en pastille, en bas à gauche de l'image */
.ph.has-img::after {
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(30, 13, 18, 0.9);
  color: #EDE4DC;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 13, 18, 0.95);
}

.lightbox[hidden] { display: none; }

.lightbox figure {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.lightbox figcaption {
  color: #EDE4DC;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

/* Bouton doré vers la page réalisations (lightbox de l'accueil) */
.lightbox .lb-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 28px;
  border-radius: 999px;
  background: #C9A227;
  color: #1a1208;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lightbox .lb-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

.lightbox button {
  position: absolute;
  background: rgba(30, 13, 18, 0.7);
  border: 1px solid rgba(237, 228, 220, 0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox button:hover { border-color: #FFFFFF; }

.lightbox .lb-close { top: 16px; right: 16px; }
.lightbox .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.ph-sq { aspect-ratio: 1 / 1; }
.ph-wide { aspect-ratio: 16 / 7; }

.ph.v2 { background: linear-gradient(145deg, #43242c 0%, #2c1319 60%, #200d13 100%); }
.ph.v3 { background: linear-gradient(160deg, #35202a 0%, #261016 55%, #1d0c11 100%); }

/* ---------- Grilles ---------- */

.grid {
  display: grid;
  gap: 16px;
}

.grid-realisations { grid-template-columns: 1fr; }

@media (min-width: 600px) { .grid-realisations { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid-realisations { grid-template-columns: 1fr 1fr 1fr; } }

/* Autant de colonnes que de matieres reellement presentes : fige a 4, la
   grille laissait une colonne vide depuis le retrait de la ceramique. */
.grid-matieres { grid-template-columns: 1fr 1fr; }

@media (min-width: 900px) {
  .grid-matieres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---------- Cartes ---------- */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.card .ph { border-radius: 0; box-shadow: none; }

.card-body { padding: 16px; }

.card-body h3 { margin-bottom: 6px; }

.card-body p { color: var(--muted); font-size: 0.92rem; }

.card-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Filtres (chips) ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-contrast);
  font-weight: 600;
}

/* Nombre de chantiers dans chaque filtre */
.chip-n {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  margin-left: 3px;
}

/* ---------- Bouton WhatsApp flottant ---------- */

/* Même verre et même anneau dégradé que les boutons. Fermé : pastille ronde
   avec l'icône seule ; au survol (ou .wa-open sur mobile) il s'élargit et
   révèle son libellé. */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  height: 58px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: rgba(30, 13, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #EDE4DC;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s ease, box-shadow 0.15s ease;
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #AA024F, #8E1D21, #601E22, #371C21);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: filter 0.15s ease;
}

.whatsapp-float:hover::before { filter: brightness(1.45) saturate(1.1); }

.whatsapp-float svg { width: 26px; height: 26px; fill: currentColor; flex: none; }

.wa-label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
  transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.25s ease;
}

.whatsapp-float:hover .wa-label,
.whatsapp-float.wa-open .wa-label {
  max-width: 200px;
  margin-left: 10px;
  opacity: 1;
}


/* ---------- Lueur dorée animée : boutons de contact ---------- */

@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Boutons de contact : contour framboise comme le reste du site, avec une
   lueur dorée #C9A227 qui parcourt lentement la bordure (boutons de
   navigation non concernés) */
.btn.btn-glow,
.mobile-bar a.btn-glow {
  position: relative;
}

.btn-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--glow-angle),
    #AA024F,
    #8E1D21 22%,
    #601E22 42%,
    #C9A227 50%,
    #601E22 58%,
    #371C21 78%,
    #AA024F);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: glow-spin 8s linear infinite;
}

@keyframes glow-spin {
  to { --glow-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-glow::before { animation: none; }
}

/* ---------- Barre d'action mobile : Appeler / WhatsApp ---------- */

.mobile-bar { display: none; }

@media (max-width: 767px) {
  /* La barre remplace le bouton flottant */
  .whatsapp-float { display: none; }

  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    background: rgba(30, 13, 18, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(237, 228, 220, 0.12);
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    transition: opacity 0.35s ease;
  }

  /* Sur l'accueil, la barre reste masquée tant que le hero est visible */
  .mobile-bar.mbar-off {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    border-radius: 999px;
    border: 2px solid transparent;
    background: rgba(30, 13, 18, 0.55);
    color: #EDE4DC;
    font-weight: 600;
    font-size: 0.95rem;
  }
}

/* ---------- Sections spécifiques ---------- */

/* Clôture : texte centré, halo doré derrière le bloc. Hauteur contenue
   pour ne pas creuser de vide après la section magasins */
.cta-final {
  position: relative;
  min-height: 62vh;
  min-height: 62svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #1E0D12;
  overflow: hidden;
  padding: 56px 0;
}

/* La section magasins se referme au plus près de la clôture */
.magasins-reveal { padding-bottom: 16px; }

.cta-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 90vw);
  height: 540px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.13) 0%, rgba(201, 162, 39, 0) 70%);
  pointer-events: none;
}

.cta-final .container { position: relative; }

.cta-final h2 { margin-bottom: 14px; }

.cta-final p {
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 28px;
}

.cta-final .btn-row { justify-content: center; }

.cta-final .cta-note {
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.85;
  margin: 20px auto 0;
}

/* Apparition au scroll, comme les sections précédentes */
.cta-reveal.prep h2,
.cta-reveal.prep p,
.cta-reveal.prep .btn-row {
  opacity: 0;
  transform: translateY(24px);
}

.cta-reveal.prep.in h2,
.cta-reveal.prep.in p,
.cta-reveal.prep.in .btn-row {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-reveal.prep.in p { transition-delay: 0.15s; }
.cta-reveal.prep.in .btn-row { transition-delay: 0.27s; }

/* Magasins */

.store-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.store-card .map {
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border: none;
  width: 100%;
}

.store-body { padding: 20px; }

.store-body h3 { margin-bottom: 8px; }

.store-body address {
  font-style: normal;
  color: var(--muted);
  margin-bottom: 10px;
}

.store-body .hours {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 14px;
}

.store-body .hours strong { color: var(--text); font-weight: 600; }

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

.store-links a {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
}

.grid-stores { grid-template-columns: 1fr; }

@media (min-width: 780px) { .grid-stores { grid-template-columns: 1fr 1fr; } }

/* Fiche produit */

.fiche {
  display: grid;
  gap: 28px;
  padding: 40px 0 56px;
}

@media (min-width: 860px) {
  .fiche { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

.fiche .ph-sq { box-shadow: var(--shadow-2); }

.fiche h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: 8px; }

.fiche .famille {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  margin-bottom: 16px;
  display: block;
}

.fiche .desc { color: var(--muted); margin-bottom: 24px; }

.specs { list-style: none; margin-bottom: 28px; }

.specs li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.95rem;
}

.specs li span:first-child { color: var(--muted); }

.prix-note {
  background: var(--surface);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 24px;
}

/* Étapes (page pose) */

.steps { display: grid; gap: 16px; counter-reset: step; }

@media (min-width: 780px) { .steps { grid-template-columns: 1fr 1fr; } }

.step {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-1);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 10px;
}

.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* Contact */

.contact-primary {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 720px) { .contact-primary { grid-template-columns: 1fr 1fr; } }

.contact-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-1);
}

.contact-card h3 { margin-bottom: 8px; }
.contact-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }

.form-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

form .field { margin-bottom: 16px; }

form label {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 6px;
}

form input, form select, form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

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

/* ---------- Footer ---------- */

/* Le footer reste sombre sur toutes les pages : couleurs figées, pas de variables */
.site-footer {
  background: #170a0e;
  border-top: 1px solid rgba(237, 228, 220, 0.08);
  padding: 48px 0 90px; /* espace pour le bouton WhatsApp */
  margin-top: 0;
  color: #EDE4DC;
}

.footer-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer .brand { margin-bottom: 14px; }

.site-footer p, .site-footer a, .site-footer li {
  color: #B49A9E;
  font-size: 0.92rem;
}

.site-footer h3 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #EDE4DC;
  margin-bottom: 14px;
}

.site-footer ul { list-style: none; }

.site-footer li { margin-bottom: 8px; }

.site-footer a:hover { color: #EDE4DC; }

/* Mention pose nationale, avec le drapeau algérien */
.footer-dz {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.footer-dz svg {
  flex: none;
  border-radius: 2px;
}

.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(237, 228, 220, 0.06);
  font-size: 0.82rem;
  color: var(--muted);
}

/* En mobile, la barre Appeler / WhatsApp ne doit pas recouvrir le footer */
@media (max-width: 767px) {
  .site-footer { padding-bottom: 130px; }
}

/* ---------- Réalisations : carrousel coverflow 3D ---------- */

.real-coverflow {
  background: #1E0D12;
}

.real-coverflow .section-head { position: relative; z-index: 2; }

/* Titre en étiquette de section, dans l'esprit du sur-titre du hero */
.rc-head { text-align: center; margin-bottom: 10px; }

.rc-head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #C9A227;
  margin-bottom: 0;
}

.rc-label-line {
  display: block;
  flex: none;
  width: clamp(36px, 8vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0), #C9A227);
}

.rc-head h2 .rc-label-line:last-child {
  background: linear-gradient(90deg, #C9A227, rgba(201, 162, 39, 0));
}

.rc-head p {
  color: #B49A9E;
  font-size: 0.9rem;
  max-width: none;
  margin: 10px auto 0;
}

/* Bande horizontale de cartes portrait : glisse de droite à gauche,
   pilotée par la progression du scroll dans la zone sticky (main.js) */
/* Six chantiers, tous visibles d'un coup. Le nombre de colonnes est fixe
   par palier et jamais « auto-fit » : 6 se divise par 1, 2 et 3, donc aucune
   rangee incomplete, aucune colonne vide — quel que soit l'ecran. */
.rb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 16px;
}

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

@media (min-width: 960px) {
  .rb-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.rb-card {
  display: flex;
  flex-direction: column;
}

.rb-img {
  position: relative;
  aspect-ratio: 27 / 40;
  border-radius: 18px;
  overflow: hidden;
  background: #31171C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rb-card:hover .rb-img { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.rb-img picture,
.rb-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rb-img img { object-fit: cover; }

.rb-title {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #EDE4DC;
}

.rb-line {
  display: block;
  width: 34px;
  height: 2px;
  background: #C9A227;
  margin-top: 8px;
}



/* ---------- Apparition au scroll : section matières ---------- */

/* L'état masqué n'est posé que par JS (classe .prep) : sans JS ou en
   prefers-reduced-motion, la section reste simplement visible */
.matieres-reveal.prep .section-head,
.matieres-reveal.prep .card {
  opacity: 0;
  transform: translateY(24px);
}

/* La transition n'existe que sur l'état révélé : la pose de l'état
   masqué est instantanée, seule l'apparition est animée */
.matieres-reveal.prep.in .section-head,
.matieres-reveal.prep.in .card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le titre part en premier, puis les cartes en cascade */
.matieres-reveal.prep.in .card:nth-child(1) { transition-delay: 0.15s; }
.matieres-reveal.prep.in .card:nth-child(2) { transition-delay: 0.27s; }
.matieres-reveal.prep.in .card:nth-child(3) { transition-delay: 0.39s; }
.matieres-reveal.prep.in .card:nth-child(4) { transition-delay: 0.51s; }

/* Les boutons sous les grilles matières et magasins ferment la cascade */
.matieres-reveal.prep .mt-24,
.magasins-reveal.prep .mt-24 {
  opacity: 0;
  transform: translateY(24px);
}

.matieres-reveal.prep.in .mt-24,
.magasins-reveal.prep.in .mt-24 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.63s;
}

/* Section réalisations : étiquette, grille et bouton se révèlent en
   cascade à l'entrée de la section */
.real-coverflow.prep .rc-head,
.real-coverflow.prep .rb-grid,
.real-coverflow.prep .mt-24 {
  opacity: 0;
  transform: translateY(24px);
}

.real-coverflow.prep.in .rc-head,
.real-coverflow.prep.in .rb-grid,
.real-coverflow.prep.in .mt-24 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.real-coverflow.prep.in .rb-grid { transition-delay: 0.15s; }
.real-coverflow.prep.in .mt-24 { transition-delay: 0.3s; }

/* Sous-titre matières sur une seule ligne */
.matieres-reveal .section-head p { max-width: none; }

/* Mobile : section matières entièrement centrée */
@media (max-width: 767px) {
  .matieres-reveal .section-head { text-align: center; }
  .matieres-reveal .section-head p { margin-left: auto; margin-right: auto; }
  .matieres-reveal .card-body { text-align: center; }
}

/* ---------- Section magasins : quatre cartes, apparition identique ---------- */

.grid-magasins { grid-template-columns: 1fr 1fr; }

@media (min-width: 900px) { .grid-magasins { grid-template-columns: repeat(4, 1fr); } }

/* Mobile : une carte magasin par ligne, pleine largeur
   (les boutons Appeler / Itinéraire gardent leur moitié chacun) */
@media (max-width: 767px) {
  .grid-magasins { grid-template-columns: 1fr; }
}

/* Photo paysage en tête de carte (les coins sont arrondis par la carte,
   comme pour les cartes de matières) */
.m-photo { aspect-ratio: 3 / 4; } /* idem : ratio portrait des fichiers magasins */

/* Carte magasin cliquable en entier. Elle contient déjà des liens (Appeler,
   Itinéraire), donc pas question de l'envelopper dans un <a> : on étire le
   lien du titre sur toute la carte avec un pseudo-élément, et on repasse les
   vrais boutons au-dessus pour qu'ils gardent la main. */
.magasin-card { position: relative; }

.magasin-lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.magasin-card .m-tel,
.magasin-card .m-actions {
  position: relative;
  z-index: 2;
}

.magasin-lien:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.magasin-card address {
  font-style: normal;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 6px 0 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.magasin-card address svg {
  flex: none;
  margin-top: 3px;
  color: #C9A227;
}

.magasin-card p strong { color: var(--text); font-weight: 600; }

/* Cartes alignées : le bas de carte (boutons) est poussé à la même
   hauteur quelle que soit la longueur de l'adresse */
.magasin-card { display: flex; flex-direction: column; }

.magasin-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
}

.magasin-card .m-tel { margin-top: 10px; }

.magasin-card .m-tel a {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
}

.magasin-card .m-tel a:hover { color: var(--text); }

.m-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
}

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  border-radius: 999px;
  border: 2px solid #6B2020;
  background: rgba(30, 13, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #EDE4DC;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.m-btn:hover { border-color: #9A3838; transform: translateY(-1px); }

.m-btn svg { flex: none; }

@media (max-width: 767px) {
  /* Le numéro en texte disparaît, le bouton Appeler suffit */
  .magasin-card .m-tel { display: none; }
  /* Titre de section centré, contenu des cartes toujours à gauche */
  .magasins-reveal .section-head { text-align: center; }
}

.magasins-reveal.prep .section-head,
.magasins-reveal.prep .card {
  opacity: 0;
  transform: translateY(24px);
}

.magasins-reveal.prep.in .section-head,
.magasins-reveal.prep.in .card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.magasins-reveal.prep.in .card:nth-child(1) { transition-delay: 0.15s; }
.magasins-reveal.prep.in .card:nth-child(2) { transition-delay: 0.27s; }
.magasins-reveal.prep.in .card:nth-child(3) { transition-delay: 0.39s; }
.magasins-reveal.prep.in .card:nth-child(4) { transition-delay: 0.51s; }

/* ---------- Section pose : deux colonnes, apparition identique ---------- */

.pose-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 860px) {
  .pose-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}

.pose-text h2 { margin-bottom: 14px; }

.pose-text p {
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 24px;
}

.pose-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.pose-reveal.prep .pose-col {
  opacity: 0;
  transform: translateY(24px);
}

.pose-reveal.prep.in .pose-col {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pose-reveal.prep.in .pose-col:nth-child(2) { transition-delay: 0.15s; }

/* Mobile : texte de la section pose centré (l'image ne change pas) */
@media (max-width: 767px) {
  .pose-text { text-align: center; }
  .pose-text p { margin-left: auto; margin-right: auto; }
}

/* ---------- Page provisoire ---------- */

.page-wip {
  min-height: 55vh;
  display: flex;
  align-items: center;
}

.page-wip h1 { margin-bottom: 14px; }

.page-wip .wip-note {
  max-width: 48ch;
  margin: 0 auto 26px;
}

.page-wip .btn-row { justify-content: center; }

/* ============================================================
   Catalogue produits (produits.html)
   Barre de filtres, grille de vignettes 400, visionneuse 1200.
   ============================================================ */

/* ---------- Barre de filtres ----------
   Capsule collante sous la navbar (fixe a 16 px, haute de 56). En dessous de
   768 px elle se reduit a un bouton « Filtrer » qui ouvre un panneau plein
   ecran ; les pastilles actives, elles, restent visibles dans la barre. */

.cat-bar {
  position: sticky;
  top: 80px;
  z-index: 40; /* sous la navbar (50), au-dessus de la grille */
  margin-bottom: 22px;
}

/* La barre collante ouvre son propre contexte d'empilement : le panneau plein
   ecran ne peut pas en sortir. On souleve donc la barre entiere tant qu'il est
   ouvert, au-dessus de la navbar (50) et de la barre Appeler/WhatsApp (70). */
.cat-bar.sheet-open { z-index: 95; }

.cat-bar-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(49, 23, 28, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-1);
}

.cat-menus { display: flex; gap: 8px; }

.cat-menus-in { display: flex; gap: 8px; }

/* Bouton d'un menu */
.cat-menu { position: relative; }

.cat-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cat-menu-btn:hover { border-color: var(--text); }

.cat-menu-btn[aria-expanded="true"] {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.12);
}

.cat-chev { flex: none; opacity: 0.6; transition: transform 0.15s ease; }
.cat-menu-btn[aria-expanded="true"] .cat-chev { transform: rotate(180deg); }

/* Compteur de selections, sur le bouton du menu et sur « Filtrer » */
.cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* display: inline-flex l'emporterait sur la regle [hidden] du navigateur */
.cat-badge[hidden] { display: none; }

/* Panneau deroulant */
.cat-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  min-width: 232px;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2);
}

.cat-panel[hidden] { display: none; }

.cat-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.cat-opt:hover { background: rgba(237, 228, 220, 0.07); }

/* Valeur sans resultat compte tenu des autres filtres actifs */
.cat-opt[disabled] {
  opacity: 0.34;
  cursor: not-allowed;
}

.cat-opt[disabled]:hover { background: transparent; }

.cat-check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  position: relative;
}

.cat-opt[aria-pressed="true"] .cat-check {
  background: var(--gold);
  border-color: var(--gold);
}

.cat-opt[aria-pressed="true"] .cat-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--gold-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cat-opt-l { flex: 1; }

.cat-n {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Pastille de couleur, dans les lignes du menu Couleur */
.cat-dot {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sw);
  /* Anneau clair : sans lui, la pastille noire disparait dans la surface. */
  box-shadow: inset 0 0 0 1px rgba(237, 228, 220, 0.35);
}

.cat-clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

/* display: block l'emporterait sur la regle [hidden] du navigateur */
.cat-clear[hidden] { display: none; }

/* Pastilles des filtres actifs */
.cat-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.cat-pills:empty { display: none; }

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 11px;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.16);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: var(--text);
  font-size: 0.8rem;
  white-space: nowrap;
}

.cat-pill .cat-dot { width: 11px; height: 11px; }

.cat-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: rgba(237, 228, 220, 0.14);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.cat-pill-x:hover { background: var(--gold); color: var(--gold-contrast); }

.cat-reset {
  flex: none;
  margin-left: auto;
  border: 0;
  background: none;
  padding: 4px 8px;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.cat-reset[hidden] { display: none; }

/* Bouton « Filtrer » et chrome du panneau plein ecran : mobile uniquement */
.cat-filtrer,
.cat-sheet-head,
.cat-sheet-foot { display: none; }

.cat-menu-btn:focus-visible,
.cat-opt:focus-visible,
.cat-clear:focus-visible,
.cat-pill-x:focus-visible,
.cat-reset:focus-visible,
.cat-filtrer:focus-visible,
.cat-sheet-ok:focus-visible,
.cat-tile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Mobile : panneau plein ecran ---------- */

@media (max-width: 767px) {
  .cat-bar { top: 76px; }

  .cat-bar-in {
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 8px;
    /* Un backdrop-filter ferait de la barre le bloc conteneur des
       descendants en position fixed : le panneau plein ecran resterait
       enferme dedans. Fond opaque a la place. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }

  .cat-filtrer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
  }

  /* Les pastilles passent sous le bouton, sur toute la largeur */
  .cat-pills { flex-basis: 100%; order: 3; }
  .cat-pills:not(:empty) { padding: 2px 2px 0; }
  .cat-reset-bar { margin-left: 0; order: 2; }

  .cat-menus {
    position: fixed;
    inset: 0;
    z-index: 90; /* au-dessus de la barre Appeler/WhatsApp (70) */
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }

  .cat-menus.is-open { transform: none; visibility: visible; }

  .cat-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-serif);
    font-size: 1.1rem;
  }

  .cat-sheet-x {
    border: 0;
    background: none;
    color: var(--text);
    font-size: 1.8rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
  }

  .cat-menus-in {
    flex: 1;
    display: block;
    overflow-y: auto;
    padding: 4px 20px 20px;
  }

  /* Chaque menu devient une section depliable, empilee */
  .cat-menu { border-bottom: 1px solid var(--border-soft); }

  .cat-menu-btn {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    padding: 15px 2px;
    font-size: 1rem;
  }

  .cat-menu-btn[aria-expanded="true"] { background: transparent; }
  .cat-menu-btn .cat-chev { margin-left: auto; }
  .cat-menu-btn .cat-badge { margin-left: 8px; }

  .cat-panel {
    position: static;
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 0 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .cat-opt { padding: 11px 2px; font-size: 0.95rem; }
  .cat-clear { padding-left: 2px; }

  .cat-sheet-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
  }

  .cat-sheet-foot .cat-reset { margin-left: 0; }

  .cat-sheet-ok {
    flex: 1;
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--gold-contrast);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }
}

/* ---------- Compteur de résultats ---------- */

.cat-count {
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.cat-count strong {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.cat-empty {
  color: var(--muted);
  padding: 40px 0;
  text-align: center;
}

.cat-empty a { color: var(--gold); text-decoration: underline; }

/* ---------- Grille des vignettes ---------- */

.grid-catalogue {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .grid-catalogue { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

.cat-tile {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.cat-tile.is-off { display: none; }

.cat-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Les photos sont prises sur fond blanc : on garde ce blanc, sinon la
     vignette clignote en sombre avant de charger. */
  background: #FFFFFF;
}

.cat-tile figcaption { padding: 10px 12px 12px; }

.cat-tile figcaption b {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-tile figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Visionneuse ---------- */

.cat-lb {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.cat-lb::backdrop { background: rgba(30, 13, 18, 0.95); }

.cat-lb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  padding: 56px 20px 24px;
}

.cat-lb-slot img {
  max-width: min(1000px, 88vw);
  max-height: 62vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  background: #FFFFFF; /* meme fond blanc que les vignettes, pas de flash sombre */
}

.cat-lb-cap {
  color: #EDE4DC;
  text-align: center;
  max-width: min(1000px, 88vw);
}

.cat-lb-cap b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.cat-lb-cap span {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  color: rgba(237, 228, 220, 0.82);
}

.cat-lb-cap em {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(237, 228, 220, 0.55);
}

.cat-lb-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 28px;
  border-radius: 999px;
  background: #C9A227;
  color: #1a1208;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cat-lb-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

.cat-lb-x,
.cat-lb-nav {
  position: fixed;
  background: rgba(30, 13, 18, 0.7);
  border: 1px solid rgba(237, 228, 220, 0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-lb-x:hover,
.cat-lb-nav:hover { border-color: #FFFFFF; }

.cat-lb-x { top: 16px; right: 16px; }
.cat-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.cat-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

.cat-lb-n {
  position: fixed;
  top: 26px;
  left: 20px;
  color: rgba(237, 228, 220, 0.6);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .cat-lb-nav { display: none; } /* on navigue au doigt */
  .cat-lb-slot img { max-height: 55vh; }
}

/* ---------- Page pose ---------- */

/* Les cinq engagements : cartes de texte, sans survol qui les fasse bouger */
.grid-atouts { grid-template-columns: 1fr; }

@media (min-width: 600px) { .grid-atouts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid-atouts { grid-template-columns: repeat(3, 1fr); } }

.grid-atouts .card:hover { transform: none; box-shadow: var(--shadow-1); }

.pose-ab-titre {
  font-size: 1rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* Avant / après : les deux vues restent cote a cote, meme sur petit ecran,
   sinon la comparaison n'a plus de sens */
.grid-realisations.pose-ab {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

/* ---------- Page magasins ---------- */

/* Un magasin par bloc, pleine largeur : photo, informations, plan.
   Les quatre blocs sont des .card, ce qui leur donne la cascade
   d'apparition de .magasins-reveal (delais nth-child 1 a 4). */
.magasins-liste { display: grid; gap: 24px; }

.magasin-bloc {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* Un bloc pleine largeur ne se souleve pas au survol : ce n'est pas un lien */
.magasin-bloc:hover { transform: none; box-shadow: var(--shadow-1); }

.magasin-bloc .ph { border-radius: 0; box-shadow: none; }

/* Cadre PORTRAIT 3/4 : les devantures sont hautes et etroites (enseigne en
   haut, vitrine et entree en dessous). En paysage, aucun cadrage ne montrait
   autre chose que l'enseigne. Le ratio doit rester celui des fichiers de
   images/magasins/, sinon object-fit: cover rogne. */
.magasin-photo { aspect-ratio: 3 / 4; }
.magasin-carte { aspect-ratio: 16 / 10; }

@media (min-width: 900px) {
  /* La photo de devanture prend la colonne la plus large : c'est elle qui
     permet de reconnaitre le magasin depuis la rue. */
  .magasin-bloc { grid-template-columns: 1.05fr 1.3fr 1.15fr; }
  /* La photo impose son ratio 4/3 et donne la hauteur de la ligne ; le plan
     et le texte s'y etirent. Le ratio du cadre doit rester celui des fichiers
     de images/magasins/, sinon object-fit: cover rogne les cotes. */
  .magasin-photo { aspect-ratio: 3 / 4; }
  .magasin-carte { aspect-ratio: auto; min-height: 290px; }
}

.magasin-carte iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* Aperçu maison, affiché tant que l'utilisateur n'a pas demandé le plan.
   Aucune ressource tierce n'est chargée à ce stade. */
.carte-apercu {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: var(--gold);
  background-color: var(--bg);
  /* trame de plan, dessinée en CSS : ni image ni requête */
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center;
}

.carte-adresse {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 28ch;
  margin-bottom: 2px;
}

.carte-note {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.75;
}

.magasin-infos {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.magasin-infos h2 { font-size: 1.35rem; }

.magasin-infos address {
  font-style: normal;
  color: var(--muted);
  font-size: 0.95rem;
}

.magasin-infos .hours {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
}

.magasin-infos .hours strong { color: var(--text); font-weight: 600; }

.magasin-tel {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Le bouton se cale en bas, aligne d'un bloc a l'autre */
.magasin-infos .m-btn { margin-top: auto; }

/* ---------- Page contact ---------- */

/* Les deux voies principales : deux grands blocs cliquables en entier */
.contact-voies {
  display: grid;
  gap: 14px;
  margin-bottom: 8px;
}

@media (min-width: 720px) { .contact-voies { grid-template-columns: 1fr 1fr; } }

.contact-voie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 26px 26px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.contact-voie:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--gold);
}

.voie-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}

.voie-wa .voie-icone { background: rgba(37, 211, 102, 0.14); color: var(--whatsapp); }

.voie-titre {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.voie-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.voie-wa .voie-num { color: var(--whatsapp); }

.voie-note { color: var(--muted); font-size: 0.9rem; }

/* Formulaire et colonne magasins */
.contact-grid { display: grid; gap: 20px; }

@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.35fr 1fr; } }

.contact-bloc { padding: 26px; }
.contact-bloc:hover { transform: none; box-shadow: var(--shadow-1); }
.contact-bloc h2 { font-size: 1.3rem; margin-bottom: 8px; }

.field-opt { color: var(--muted); font-weight: 400; }

.field-aide {
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 6px;
}

/* Le sélecteur de fichier natif, remis dans la charte */
form input[type="file"] {
  padding: 10px 12px;
  font-size: 0.92rem;
}

form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

form input[type="file"]::file-selector-button:hover { border-color: var(--gold); }

.form-note-bas { margin: 14px 0 0; }

.magasins-courts {
  list-style: none;
  margin-bottom: 18px;
}

.magasins-courts li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.magasins-courts li:last-child { border-bottom: 0; }
.magasins-courts strong { font-weight: 600; }
.magasins-courts span { color: var(--muted); font-size: 0.88rem; }
.magasins-courts a { color: var(--gold); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.contact-sep {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 24px 0 18px;
}

.contact-mail-note { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }

.contact-mail {
  color: var(--gold);
  font-weight: 600;
  word-break: break-all;
}

/* ---------- Utilitaires ---------- */

.mt-24 { margin-top: 24px; }
.center { text-align: center; }
.hidden { display: none !important; }

/* Titre destiné aux lecteurs d'écran et au plan de la page, pas à l'œil :
   il évite les sauts de niveau (h1 puis h3) là où un titre visible ferait
   doublon avec le chapô juste au-dessus. */
/* Un mot ne se coupe jamais en fin de ligne. Le navigateur a le droit de
   passer a la ligne apres un trait d'union existant : « sous-traitance »
   devenait « sous- / traitance », ce qui se lit mal et fait amateur.
   Le trait d'union insecable (U+2011) aurait suffi en theorie, mais Playfair
   Display ne contient pas ce glyphe : dans un titre, le navigateur serait
   alle le chercher dans Georgia et le trait aurait change d'epaisseur.
   D'ou cette classe, qui ne depend d'aucune police. */
.nb { white-space: nowrap; }

.sr-only {
  position: absolute;
  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;
}


/* ---------- Repères (accueil) ---------- */

/* Quatre faits chiffrés, sans carte ni cadre : une simple bande, séparée par
   des filets. Le chiffre porte la police serif du site, le libellé reste
   discret. Deux colonnes sur mobile, quatre dès 760 px. */
.reperes {
  list-style: none;
  margin: 0;
  padding: 28px 0;
  display: grid;
  /* Trois reperes : une colonne, ou trois. Jamais deux, qui laisseraient le
     troisieme seul sur sa rangee. A revoir si le nombre change. */
  grid-template-columns: 1fr;
  gap: 24px 18px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}

.reperes li { display: flex; flex-direction: column; gap: 6px; }

.reperes b {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Chaque repere tient en deux lignes, et c'est NOUS qui decidons ou elles
   se coupent : une ligne = une unite de sens, pas ce que la largeur du
   navigateur laisse tomber. Sans ca on lisait « modeles en rayon, a /
   toucher avant de choisir », coupe au milieu d'un groupe, et les trois
   cases n'avaient plus la meme allure.
   Mesure faite avant d'ecrire : la plus longue ligne fait 201 px pour une
   colonne de 310 px au plus etroit, donc aucune ne se recoupe.
   text-wrap: balance est le filet si le texte change un jour. */
.reperes .rep-l {
  display: block;
  text-wrap: balance;
}

/* Le « + » de « +300 » ne doit pas compter dans le centrage. Mesure a
   l'appui : la case, le bloc et le texte etaient tous centres sur 265,7 px,
   mais « 300 » seul l'etait sur 278,4 — le « + » (25,3 px) tirait l'ensemble
   de 12,7 px vers la gauche, et le texte dessous paraissait decale.
   Il est donc pose hors du flux, a gauche des chiffres : il ne prend plus
   aucune largeur, et ce sont les chiffres qui sont centres. Il est aussi
   reduit, parce qu'un prefixe ne se lit pas comme un chiffre. */
.reperes .rep-num {
  position: relative;
  /* .reperes span plus bas vise les legendes : sans ces remises a zero, les
     chiffres heritaient de 0,86rem en gris au lieu de 2,3rem en or. */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  max-width: none;
  margin: 0;
}

.reperes .rep-plus {
  position: absolute;
  right: 100%;
  /* cale sur le milieu des chiffres : pose en haut il se lisait comme un
     appel de note, pas comme « plus de » */
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.04em;
  font-size: 0.58em;
  font-weight: 600;
  color: inherit;          /* sinon il prend le gris des legendes */
  letter-spacing: 0;
  max-width: none;
  margin: 0;
}

.reperes span {
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: 0.02em;
  /* 22ch (163 px) etait trop etroit : la ligne la plus longue en fait 201,
     elle se recoupait donc a l'interieur de sa propre ligne et le decoupage
     en unites de sens ne servait a rien. 30ch laisse passer les six lignes
     en restant bien en deca de la colonne la plus etroite (265 px). */
  max-width: 30ch;
  margin: 0 auto;
}

@media (min-width: 680px) {
  .reperes { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* filets verticaux entre les colonnes, jamais avant la premiere */
  .reperes li + li { border-left: 1px solid var(--border-soft); }
}


/* ---------- Dernière rangée incomplète ---------- */

/* Cinq cartes dans une grille de trois colonnes : la seconde rangée n'en porte
   que deux et laissait une colonne vide a droite. On passe sur six colonnes,
   chaque carte en occupe deux, et la rangee incomplete est recentree.
   Le :nth-last-child(2) limite la regle au cas « exactement cinq cartes » :
   si le nombre change, la grille reprend son comportement normal. */
@media (min-width: 960px) {
  .grid-atouts,
  .grid-realisations.pose-chantiers { grid-template-columns: repeat(6, 1fr); }

  .grid-atouts > *,
  .grid-realisations.pose-chantiers > * { grid-column: span 2; }

  .grid-atouts > *:nth-child(4):nth-last-child(2),
  .grid-realisations.pose-chantiers > *:nth-child(4):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
}


/* ---------- Page pose : les arguments en alternance ---------- */

/* Cinq cartes de texte cote a cote ne se lisaient pas. Chaque argument porte
   desormais une photo de chantier qui le prouve, et le cote de l'image change
   a chaque rangee : l'oeil repart de l'autre bord et la lecture reprend. */
/* Apparition au scroll, bloc par bloc. Les rangees de la page pose font
   presque un ecran de haut chacune : les reveler d'un coup, comme les
   sections de l'accueil, n'aurait rien montre — on serait arrive dessus
   une fois l'animation deja finie. Chaque bloc a donc son observateur
   (voir main.js), et ses colonnes montent l'une apres l'autre : l'image,
   puis le texte, quel que soit le cote ou le zig-zag les place.
   La classe .prep n'est posee que par main.js : sans JavaScript, ou en
   mouvement reduit, rien n'est masque. */
.reveal-up.prep > * {
  opacity: 0;
  transform: translateY(22px);
}

.reveal-up.prep.in > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.prep.in > :nth-child(2) { transition-delay: 0.14s; }
.reveal-up.prep.in > :nth-child(3) { transition-delay: 0.28s; }

.pose-args { display: grid; gap: 56px; }

.pose-arg {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

.pose-arg-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  background: var(--surface);
}

.pose-arg-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pose-arg-texte .card-tag { margin-bottom: 12px; display: inline-block; }
.pose-arg-texte h3 { margin: 0 0 10px; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.pose-arg-texte p { margin: 0; max-width: 46ch; }
.pose-arg-texte .btn { margin-top: 20px; }

@media (min-width: 860px) {
  .pose-args { gap: 72px; }
  .pose-arg { grid-template-columns: 1fr 1fr; gap: 48px; }
  /* une rangee sur deux : l'image passe a droite, le texte a gauche */
  .pose-arg:nth-child(even) .pose-arg-media { order: 2; }
  .pose-arg:nth-child(even) .pose-arg-texte { order: 1; }
}