/* =====================================================================
   JOCRILAIN — feuille de style unique
   Ordre : variables → reset → base → blocs (dans l'ordre de la page)
   Direction (2026-09-09, maquette de Zakary dans maquettes/maquette-accueil.png) :
   pages en « panneaux » blancs arrondis sur fond gris chaud, typo Inter
   grasse, accents bleu acier, boutons noirs en pilule, carte de stats noire.
   ===================================================================== */

/* --------------------------------------------------------------------
   POLICES — hébergées sur le site (2026-09-18). Google Fonts bloquait le
   rendu (CSS externe + 2 connexions) et retardait le plus gros élément de
   la page à ~9 s au téléphone ; au passage, plus aucune adresse IP de
   visiteur n'est envoyée à Google (Loi 25). Sous-ensemble latin seulement
   (accents français, guillemets, tirets). Inter est variable : un seul
   fichier pour 400 à 700. L'en-tête de chaque page précharge Inter.
   « Inter repli » = Arial recalibrée aux mesures d'Inter : quand la vraie
   police arrive, le texte ne change pas de taille, donc la page ne bouge
   pas (CLS).
   -------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/caveat-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter repli";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}

/* --------------------------------------------------------------------
   VARIABLES
   -------------------------------------------------------------------- */
:root {
  /* Couleurs — maquette : fond gris chaud, panneaux blancs, bleu acier */
  --fond:         #ffffff;  /* fond de page BLANC (demande Zakary 2026-09-09 : fini les « bulles » grises entre les panneaux) */
  --creme:        #ffffff;  /* panneau/carte blanc */
  --creme-2:      #f6f4f0;  /* panneau doux, surfaces secondaires */
  --encre:        #131519;  /* texte principal, quasi-noir */
  --encre-douce:  #585d66;  /* texte secondaire */
  --pin:          #8a5a33;  /* brun pin — rappels chaleureux ponctuels */
  --pin-fonce:    #5f3f24;
  --bleu:         #dcebf6;  /* bleu pâle (pastilles, fonds) */
  --bleu-fonce:   #3e6f9f;  /* bleu acier lisible (eyebrows, accents) */
  --bleu-vif:     #2f66a0;  /* bleu appuyé (barres, flèches rondes) */
  --or:           #c9a24b;
  --or-fonce:     #8f6f2a;

  /* Typo — tout le site est en Inter (décision Zakary 2026-09-08) */
  --inter: "Inter", "Inter repli", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--inter);
  --sans:  var(--inter);
  --cursive: "Caveat", "Bradley Hand", cursive; /* annotations manuscrites */

  /* Rythme */
  --mesure: 62ch;
  --cadre: 1180px;
  --pad-x: clamp(20px, 5vw, 48px);
  --marge-panneau: clamp(8px, 1.2vw, 14px);   /* gouttière entre panneaux */
  --rayon-panneau: clamp(20px, 2.6vw, 30px);
  --rayon: 16px;                               /* cartes internes */
  --rayon-petit: 12px;
  --chevauche-pratique: clamp(44px, 6vw, 72px); /* carte noire à cheval sur la jonction blanc→beige */

  color-scheme: light;
}

/* --------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, picture, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }

/* --------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
/* Ancres (#calculatrice, #faq, #collections…) : le défilement s'arrête avec
   de l'air au-dessus de la section — l'en-tête sticky (~64 px) + une vraie
   respiration, sinon le titre arrive collé sous la barre noire. */
[id] {
  scroll-margin-top: clamp(96px, 12vh, 140px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--fond);
  color: var(--encre);
  font-family: var(--inter);
  font-size: 1.0625rem;          /* 17 px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}

p { max-width: var(--mesure); }

a { color: var(--encre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bleu-fonce); }

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

.cadre {
  max-width: var(--cadre);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* PANNEAUX — chaque grande section est une carte blanche arrondie posée
   sur le fond gris chaud, avec une petite gouttière entre les panneaux. */
/* Depuis le 2026-09-09 (demande Zakary) : les sections vont d'un bord à
   l'autre, sans coins arrondis ni gouttières — seul le header garde sa
   forme de pilule flottante (règle plus bas). */
.panneau {
  background: var(--creme);
  overflow: clip;
}
.panneau--doux { background: #faf8f4; }

/* Lien d'évitement (accessibilité clavier) */
.evitement {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 99;
  background: var(--encre);
  color: var(--creme);
  padding: 10px 18px;
  border-radius: 999px;
}
.evitement:focus-visible { left: 12px; }

/* Boutons — pilules, comme la maquette */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9688rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.bouton--plein {
  background: var(--encre);
  color: #fff;
  border: 1.5px solid var(--encre);
}
.bouton--plein:hover { background: #2b2f36; border-color: #2b2f36; color: #fff; }
.bouton--contour {
  background: var(--creme);
  color: var(--encre);
  border: 1.5px solid rgba(19, 21, 25, 0.16);
}
.bouton--contour:hover { border-color: var(--encre); color: var(--encre); background: var(--creme); }
.bouton--bleu {
  background: var(--bleu-vif);
  color: #fff;
  border: 1.5px solid var(--bleu-vif);
}
.bouton--bleu:hover { background: #275585; border-color: #275585; color: #fff; }
.bouton--grand { padding: 17px 34px; font-size: 1.0625rem; }

/* Eyebrow de section (surtitre bleu, espacé, en capitales) */
.section__surtitre {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
  margin-bottom: 14px;
}
.section__titre {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

/* Annotation manuscrite (maquette : « Des projets bien pensés… ») */
.annotation {
  font-family: var(--cursive);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--encre-douce);
  max-width: 30ch;
}

/* --------------------------------------------------------------------
   BLOC : EN-TÊTE — barre NOIRE flottante et collante (demande Zakary
   2026-09-09 : un header qui se voit et qui reste là au défilement).
   -------------------------------------------------------------------- */
.entete {
  overflow: visible;  /* les sous-menus déroulants doivent dépasser du panneau */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--encre);
  box-shadow: 0 12px 30px -18px rgba(19, 21, 25, 0.45);
}
/* Couches de la glissade des sous-menus (grand écran) : le panneau (z 61)
   glisse DERRIÈRE un masque opaque (::after, z 62) qui refait le fond de la
   barre, et le contenu de la barre (z 63) reste au-dessus du masque.
   ⚠️ Aucun ancêtre du panneau (.entete__rang, .entete__nav, .nav-groupe) ne
   doit être positionné avec z-index, sinon le panneau remonte avec eux. */
@media (min-width: 941px) {
  .entete::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--encre);
    z-index: 62;
    pointer-events: none;
  }
  .marque,
  .entete__nav > a,
  .nav-groupe__titre,
  .entete__cta {
    position: relative;
    z-index: 63;
  }
}
.entete__rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 16px;
}
/* Le logo de Jonathan en version horizontale, monté à partir de ses propres
   éléments (le monogramme au sapin et le mot JOCRILAIN) et détouré de son fond
   crème pour tenir sur la barre noire. Le mot-symbole en Inter a été retiré le
   2026-09-16 : c'est son logo qui porte la marque, plus du texte. */
.marque {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.marque__logo {
  width: auto;
  height: 40px;
  flex: none;
}
/* En mobile, le logo doit laisser la place au bouton d'appel et au hamburger
   sur une seule rangée : à 40 px de haut il fait 180 px de large et la barre
   se dédoublait sous 400 px. */
@media (max-width: 940px) {
  .marque__logo { height: 32px; }
}
/* Sous 380 px il ne reste plus la place pour le mot à côté du bouton d'appel
   et du hamburger : on n'affiche que le monogramme (voir le <picture> du
   gabarit), qui ne fait que 20 px de large. */
@media (max-width: 380px) {
  .marque__logo {
    height: 34px;
    /* ceinture et bretelles : si jamais le <picture> servait quand même le
       verrou horizontal, il se contente de la place disponible au lieu de
       pousser le bouton d'appel sur une deuxième rangée. */
    max-width: 34vw;
    object-fit: contain;
    object-position: left center;
  }
}
.entete__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 0.9063rem;
}
.entete__nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 500;
  padding-block: 4px;
}
.entete__nav a:hover { color: #fff; }
.entete__nav a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid #7aa7d4;
}
.entete__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bleu-vif);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 11px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.entete__cta:hover { background: #275585; color: #fff; }

/* Groupes du menu (Cuisine, Sur mesure) : déroulant au survol/focus sur
   grand écran, cliquable (JS pose .est-ouvert), tout à plat dans le
   panneau mobile. */
/* Le groupe reste en position statique : son menu absolu s'ancre donc sur
   .entete (sticky = bloc conteneur) → top: 100% le colle EXACTEMENT au bas
   de la barre, même couleur, comme s'il en sortait. L'alignement horizontal
   vient de la position statique (left/right auto = sous son bouton). */
.nav-groupe { position: static; }
.nav-groupe__titre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  font-size: inherit;
  padding: 4px 0;
  cursor: pointer;
}
.nav-groupe__titre:hover,
.nav-groupe.est-ouvert .nav-groupe__titre,
.nav-groupe.est-active .nav-groupe__titre { color: #fff; }
.nav-groupe.est-active .nav-groupe__titre { font-weight: 700; border-bottom: 2px solid #7aa7d4; }
.nav-groupe__titre svg { transition: transform 200ms ease; }
.nav-groupe.est-ouvert .nav-groupe__titre svg { transform: rotate(180deg); }
.nav-groupe__menu {
  position: absolute;
  /* Chevauche la barre de 3 px (cachés derrière le masque z-62) : sans ça,
     l'arrondi sous-pixel de la couche GPU laisse un fil blanc entre la
     barre et le panneau pendant la glissade. */
  top: calc(100% - 3px);
  min-width: 230px;
  background: var(--encre);
  border-radius: 0 0 16px 16px;
  padding: 11px 10px 14px;
  box-shadow: 0 26px 44px -20px rgba(10, 12, 16, 0.6);
  z-index: 60;
  /* Les états sont binaires (affiché/caché) : TOUTE l'animation est pilotée
     en JS par la Web Animations API (main.js) — une GLISSADE par transform
     (composited GPU, aucune mise en page par image = zéro lag), le panneau
     descend de derrière la barre (le rang opaque z-62 le recouvre). */
  display: none;
}
/* Un seul modèle d'ouverture : le CLIC (classe posée par main.js).
   Sans JS (html sans .js), le survol/focus reste le repli, sans animation. */
.nav-groupe.est-ouvert .nav-groupe__menu,
html:not(.js) .nav-groupe:hover .nav-groupe__menu,
html:not(.js) .nav-groupe:focus-within .nav-groupe__menu {
  display: block;
  z-index: 61;  /* le panneau entrant recouvre celui qui se replie */
}
.entete__nav .nav-groupe__menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.entete__nav .nav-groupe__menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.entete__nav .nav-groupe__menu a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  border-bottom: none;
  background: rgba(122, 167, 212, 0.16);
}

/* Bouton hamburger (mobile seulement, avec JS) */
.entete__menu {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 11px;  /* 22 px d'icône + 2×11 = cible 44 px */
  border-radius: 10px;
}
.entete__menu:hover { background: rgba(255, 255, 255, 0.1); }
/* Le hamburger devient une croix quand le menu est ouvert (il restait un
   hamburger, audit mobile du 18 sept.). Trois traits, pivot au centre. */
.menu-trait {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}
.entete__menu[aria-expanded="true"] .menu-trait--1 { transform: translateY(5px) rotate(45deg); }
.entete__menu[aria-expanded="true"] .menu-trait--2 { opacity: 0; }
.entete__menu[aria-expanded="true"] .menu-trait--3 { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-trait { transition: none; } }

@media (max-width: 940px) {
  .js .entete__nav { display: none; }
  .js .entete__menu { display: inline-flex; }
  .js .entete.est-ouverte .entete__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    order: 5;
    gap: 0;
    padding: 6px 0 14px;
  }
  .js .entete.est-ouverte .entete__nav > a,
  .js .entete.est-ouverte .nav-groupe__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    border-radius: 0;
  }
  .js .entete.est-ouverte .nav-groupe__menu a {
    display: block;
    padding: 11px 4px 11px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.66);
    border-radius: 0;
  }
  .js .entete.est-ouverte .entete__nav a[aria-current="page"] { border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: none; color: #7aa7d4; }
  .js .entete.est-ouverte .nav-groupe { position: static; width: 100%; }
  /* Sous-sections repliables, même principe que sur grand écran :
     la rangée-titre avec chevron ouvre/ferme sa liste indentée. */
  .js .entete.est-ouverte .nav-groupe__menu {
    display: none;
    position: static;
    transform: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
  }
  .js .entete.est-ouverte .nav-groupe.est-ouvert .nav-groupe__menu { display: block; }
  .entete__cta { padding: 9px 16px; font-size: 0.875rem; }
  .entete__cta span { display: none; }  /* la flèche déborde sur 390 px */
  .entete__rang { gap: 12px; }
}

/* --------------------------------------------------------------------
   BLOC : HERO — filigrane « J », texte à gauche, grande photo arrondie
   à droite avec carte « +250 projets » qui chevauche.
   -------------------------------------------------------------------- */
.hero { padding-block: clamp(36px, 6vw, 72px); position: relative; }
.hero .cadre { position: relative; }
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  position: relative;
}
.hero__surtitre {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
  margin-bottom: 18px;
}
.hero__titre {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  margin-bottom: 20px;
}
.hero__texte {
  color: var(--encre-douce);
  font-size: 1.0938rem;
  margin-bottom: 28px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.hero__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 0;
  list-style: none;
  color: var(--encre-douce);
  font-size: 0.875rem;
}
.hero__preuves li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__preuves svg { flex: none; width: 20px; height: 20px; stroke: var(--encre); }

.hero__figure { margin: 0; position: relative; }
.hero__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: clamp(16px, 2vw, 22px);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(19, 21, 25, 0.35);
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 1100ms ease;
}
/* Tant que le fondu n'a pas démarré, seule la première photo est visible.
   Une fois lancé (classe .est-anime posée par main.js), c'est .est-visible
   qui décide — déclarée en dernier pour gagner à spécificité égale.
   ⚠️ Pas sous `.js` : la classe .js est maintenant posée dès le <head>, la
   photo principale serait restée invisible jusqu'à l'arrivée de main.js. */
.hero__photo img:first-child { opacity: 1; }
.hero__photo.est-anime img:first-child { opacity: 0; }
.hero__photo.est-anime img.est-visible { opacity: 1; }

/* Carte « +250 projets réalisés » qui chevauche la photo */
.hero__projets {
  position: absolute;
  left: clamp(-26px, -1.5vw, -12px);
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--creme);
  border-radius: 16px;
  padding: 14px 22px 14px 14px;
  box-shadow: 0 20px 44px -16px rgba(19, 21, 25, 0.45);
}
.hero__avatars { display: flex; }
.hero__avatars img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--creme);
}
.hero__avatars img + img { margin-left: -11px; }
.hero__projets p {
  margin: 0;
  font-size: 0.9063rem;
  line-height: 1.4;
  color: var(--encre-douce);
}
.hero__projets strong { color: var(--encre); font-weight: 700; }

@media (max-width: 860px) {
  .hero__grille { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hero__figure { max-width: 520px; }
  /* HERO TÉLÉPHONE « carrousel photo » (proposition A, choisie par Parker
     le 19 sept. parmi trois) : titre → intro → bouton, puis les photos de
     Jonathan côte à côte dans un rail qu'on glisse au doigt, la suivante
     dépasse pour inviter au geste ; « +2 000 projets » et les preuves
     dessous. Le fondu enchaîné du bureau est neutralisé ici (toutes les
     photos visibles). `display: contents` fait des enfants du bloc de texte
     des cellules de la grille pour les intercaler avec la figure. */
  .hero { padding-block: 22px 30px; }
  .hero__grille > div { display: contents; }
  .hero__titre { order: 1; font-size: clamp(1.75rem, 7.6vw, 2.2rem); margin-bottom: 12px; }
  .hero__texte { order: 2; font-size: 1rem; margin-bottom: 18px; }
  .hero__actions { order: 3; margin-bottom: 20px; }
  .hero__actions .bouton { width: 100%; justify-content: center; }
  .hero__figure { order: 4; max-width: none; margin: 0 calc(-1 * var(--pad-x)) 20px; }
  .hero__preuves { order: 5; flex-direction: column; gap: 8px; }
  .hero__photo {
    aspect-ratio: auto;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero__photo::-webkit-scrollbar { display: none; }
  .hero__photo img,
  .js .hero__photo img,
  .hero__photo.est-anime img {
    position: static;
    flex: 0 0 66%;
    width: 66%;
    min-width: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    opacity: 1 !important;  /* le fondu du bureau (.est-anime img:first-child) est plus spécifique */
    border-radius: 18px;
    scroll-snap-align: start;
    transition: none;
  }
  /* « +2 000 projets » : sous le rail, sur sa propre ligne (posé sur la
     photo, il débordait de la première). */
  .hero__projets {
    position: static;
    margin: 14px var(--pad-x) 0;
    padding: 0;
    gap: 10px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .hero__avatars img { width: 28px; height: 28px; border-width: 2px; }
  .hero__avatars img + img { margin-left: -9px; }
  .hero__projets p { font-size: 0.8125rem; line-height: 1.35; }
}

/* --------------------------------------------------------------------
   BLOC : COLLECTIONS (cartes de navigation, pages intérieures)
   -------------------------------------------------------------------- */
.collections { padding-block: clamp(48px, 7vw, 88px); }
.collections__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
.carte {
  display: block;
  text-decoration: none;
  color: var(--encre);
  border-radius: var(--rayon);
}
.carte__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
  margin-bottom: 14px;
}
.carte__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.carte:hover .carte__photo img { transform: scale(1.04); }
.carte__titre {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.carte:hover .carte__titre { color: var(--bleu-fonce); }
.carte__ligne {
  color: var(--encre-douce);
  font-size: 0.9375rem;
  margin: 0;
}
@media (max-width: 980px) {
  .collections__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Points du slider mobile (invisibles sur grand écran). Le point actif
   s'étire et se remplit de gauche à droite (--avancement 0→1, posé par
   main.js) pour annoncer le passage à la carte suivante — même mécanique
   que le carrousel d'ublo.ai. */
.collections__points { display: none; }
.carte--clone { display: none; }  /* les clones de la boucle n'existent qu'en slider */
@media (max-width: 700px) {
  .collections__grille {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
  }
  .collections__grille::-webkit-scrollbar { display: none; }
  .collections__grille { cursor: grab; }
  .collections__grille:active { cursor: grabbing; }
  .collections__grille img { -webkit-user-drag: none; user-select: none; }
  .collections__grille .carte {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .collections__grille .carte--clone { display: block; }
  .collections__points {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }
  .collections__points button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(19, 21, 25, 0.22);
    cursor: pointer;
    position: relative;
    /* Zone tactile élargie à 28 px sans grossir le point (Lighthouse). */
    box-sizing: content-box;
    border: 10px solid transparent;
    background-clip: padding-box;
    overflow: hidden;
    transition: width 300ms ease;
  }
  .collections__points button.est-actif {
    width: 36px;
    background-color: rgba(19, 21, 25, 0.16);  /* pas le raccourci `background` : il remettait background-clip à border-box et le gris débordait sur toute la zone tactile */
  }
  .collections__points button.est-actif::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--encre);
    transform-origin: left;
    transform: scaleX(var(--avancement, 0));
  }
}

/* --------------------------------------------------------------------
   BLOC : CALCULEZ VOTRE PRIX (panneau doux, carte blanche au centre)
   -------------------------------------------------------------------- */
.calculer { padding-block: clamp(48px, 7vw, 88px); }
.calculer__sous-texte {
  color: var(--encre-douce);
  margin: -10px 0 30px;
  max-width: 60ch;
}
.calculer__note {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.calculer__note .annotation { text-align: right; }
.calculer__note svg { stroke: var(--encre-douce); flex: none; }

/* --------------------------------------------------------------------
   BLOC : POURQUOI LE PIN — photo à gauche avec badge, texte + encart bleu
   -------------------------------------------------------------------- */
.pin { padding-block: clamp(48px, 7vw, 88px); }
.pin__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.pin__photo { position: relative; margin: 0; }
.pin__photo img {
  border-radius: clamp(16px, 2vw, 22px);
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
}
.pin__texte { color: var(--encre-douce); margin-bottom: 18px; }
.pin__texte strong { color: var(--encre); }
.pin__citation {
  border-left: 3px solid var(--bleu);
  padding-left: 20px;
  margin-top: 22px;
  color: var(--encre-douce);
  font-style: italic;
}

/* Encart d'information bleu pâle avec icône (maquette : sapin) */
.infobox {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bleu);
  border-radius: var(--rayon);
  padding: 20px 22px;
  margin-block: 22px;
  max-width: 560px;
}
.infobox svg { width: 30px; height: 30px; flex: none; margin-top: 2px; }
.infobox strong { display: block; color: var(--encre); margin-bottom: 4px; }
.infobox p { margin: 0; color: var(--encre-douce); font-size: 0.9375rem; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--encre);
}
.lien-fleche:hover { color: var(--bleu-fonce); }

@media (max-width: 860px) {
  .pin__grille { grid-template-columns: minmax(0, 1fr); }
  .pin__photo { order: 2; max-width: 520px; }
}

/* --------------------------------------------------------------------
   BLOC : RÉALISATIONS ACCUEIL — glissoire de cartes + carte de stats noire
   -------------------------------------------------------------------- */
.realisations-accueil { padding-block: clamp(48px, 7vw, 88px) clamp(20px, 3vw, 36px); }
.entete-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.entete-section .section__titre { margin-bottom: 0; }

.defile { position: relative; }
.defile__piste {
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.defile__piste::-webkit-scrollbar { display: none; }
.diapo-carte {
  position: relative;
  flex: 0 0 auto;
  width: min(250px, 66vw);
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  overflow: hidden;
  scroll-snap-align: start;
  background: #101216;
}
.diapo-carte img,
.diapo-carte video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diapo-carte video:fullscreen { object-fit: contain; }
.diapo-carte video:-webkit-full-screen { object-fit: contain; }
.diapo-carte__nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  padding: 34px 14px 12px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(to top, rgba(10, 12, 16, 0.72), rgba(10, 12, 16, 0));
}
.diapo-carte__lecture {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 12px 28px -12px rgba(10, 12, 16, 0.6);
  transition: transform 160ms ease;
}
.diapo-carte__lecture:hover { transform: scale(1.06); }
.diapo-carte__lecture::after {
  content: "";
  border-left: 15px solid var(--encre);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.diapo-carte__duree {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(10, 12, 16, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
}
.diapo-carte--video.est-lancee .diapo-carte__lecture,
.diapo-carte--video.est-lancee .diapo-carte__duree,
.diapo-carte--video.est-lancee .diapo-carte__nom { display: none; }
.defile__fleches button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 12px 26px -12px rgba(10, 12, 16, 0.4);
}
.defile__fleches button[hidden] { display: none; }
.defile__fleches [data-defile-prec] { left: -8px; }
.defile__fleches [data-defile-suiv] { right: -8px; }
.defile__fleches button,
.vitrine__fleches button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(19, 21, 25, 0.16);
  background: var(--creme);
  color: var(--encre);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.defile__fleches button:hover,
.vitrine__fleches button:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); color: #fff; }

/* MUR — deux rangées de photos et vidéos qui défilent en sens opposés
   (même mécanique que le défilé de logos de duplexweb.ca).
   ⚠️ La rangée contient son contenu EN DOUBLE (cloné par js/main.js) et
   l'animation va à −50 % : la seconde copie prend exactement la place de
   la première, le raccord est invisible. AUCUN `gap` sur .bande — l'écart
   est porté par les tuiles (margin), sinon la moitié tombe une
   demi-gouttière trop court et un trou apparaît à chaque tour. */
.mur {
  --tuile: clamp(150px, 16vw, 240px);
  margin-block: clamp(22px, 3vw, 34px);
  /* Le mur s'aligne sur la colonne de texte et FOND sur les côtés
     (demande Zakary) au lieu de couper net au bord de l'écran. */
  max-width: var(--cadre);
  margin-inline: auto;
  position: relative;
}
/* Fondu des bords par DEUX VOILES posés par-dessus (dégradé du fond vers le
   transparent) et non par mask-image : un masque sur l'ancêtre d'une <video>
   fait passer Safari par un rendu logiciel de la vidéo — image molle dans le
   lecteur (retour Parker, 2026-09-14). Les voiles laissent passer les clics. */
.mur::before,
.mur::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(28px, 4vw, 56px);
  pointer-events: none;
  z-index: 2;
}
.mur::before { left: 0; background: linear-gradient(to right, var(--fond), transparent); }
.mur::after { right: 0; background: linear-gradient(to left, var(--fond), transparent); }
.mur__rang { overflow: hidden; }
.mur__rang + .mur__rang { margin-top: 12px; }
.bande {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: bande-defile 70s linear infinite;
  animation-play-state: paused;
}
/* Deux vitesses légèrement différentes, sinon les rangées se croisent
   toujours au même endroit et l'œil y voit un motif. */
.bande--inverse {
  animation-direction: reverse;
  animation-duration: 62s;
}
/* Ne tourne que quand la section est à l'écran (classe posée par le JS). */
.bande.est-eveillee { animation-play-state: running; }
/* On ne regarde pas une vidéo qui glisse sous le curseur. */
.bande:hover,
.bande.est-eveillee.est-arretee { animation-play-state: paused; }
@keyframes bande-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bande { animation: none !important; }
  .mur__rang { overflow-x: auto; }
}
.tuile {
  flex: 0 0 auto;
  height: var(--tuile);
  margin-right: 12px;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--creme-2);
}
.tuile--carre { aspect-ratio: 1 / 1; }
.tuile--large { aspect-ratio: 16 / 9; }
.tuile img,
.tuile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* Vidéo verticale livrée avec bandes noires incrustées dans un cadre 16:9 :
   zoomée pour que la bande utile (9:16) remplisse la tuile carrée. */
.tuile--zoom video { transform: scale(1.78); }
/* ⚠️ EN PLEIN ÉCRAN, LE RECADRAGE DE LA TUILE NE DOIT PAS SUIVRE. `cover`
   et le zoom s'appliquaient encore : une vidéo verticale se faisait couper
   en tranche horizontale (retour de Zakary). */
.tuile video:fullscreen {
  object-fit: contain;
  transform: none;
}
.tuile video:-webkit-full-screen {
  object-fit: contain;
  transform: none;
}

/* Tuiles vidéo : les contrôles natifs (▶ 0:00, barre, volume) s'affichaient
   en permanence par-dessus l'affiche et faisaient « lecteur brut »
   (audit mobile, 18 sept.). main.js retire `controls`, pose un gros bouton
   rond et un léger voile ; les contrôles reviennent une fois la lecture
   lancée, et le bouton revient à la fin de la vidéo. Sans JS : contrôles
   natifs, comme avant. */
.tuile--video { position: relative; }
.tuile--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(10, 12, 16, 0.28), rgba(10, 12, 16, 0.08) 70%);
  transition: opacity 200ms ease;
}
.tuile__lecture {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(10, 12, 16, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 180ms ease, background-color 180ms ease;
}
/* La zone tactile couvre toute la tuile : on touche la vidéo, elle part. */
.tuile__lecture::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--tuile));
}
.tuile__lecture::after {
  content: "";
  border-left: 15px solid var(--encre);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.tuile--video:hover .tuile__lecture { transform: scale(1.07); background: #fff; }
.tuile__lecture:active { transform: scale(0.96); }
.tuile--video.est-lancee::after,
.tuile--video.est-lancee .tuile__lecture { opacity: 0; visibility: hidden; }

/* Bouton sous le mur (« Voir toutes les réalisations ») */
.mur-action { text-align: center; margin-top: clamp(20px, 3vw, 32px); }

/* Carte de stats noire (garantie, livraison, délais, dépôt) */
.pratique {
  background: #131519;
  color: #fff;
  border-radius: clamp(16px, 2vw, 24px);
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 44px);
}
/* La carte noire conclut la zone réalisations : pas de padding haut (le
   bouton « Voir toutes… » est juste au-dessus). Elle CHEVAUCHE la jonction
   blanc→beige (moitié sur chaque fond) pour que la coupure de couleur passe
   derrière elle au lieu de casser net sous la carte. */
.pratique-bande { padding-block: 0; overflow: visible; }
/* Scopé à la bande : meubles-monaco a une .pratique hors bande qui ne doit
   pas hériter de la marge négative. Le chevauchement vise la MOITIÉ de la
   carte : main.js pose la valeur mesurée sur <html>, le clamp est le repli
   sans JS. */
.pratique-bande .pratique {
  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--chevauche-pratique));
}
/* La section qui suit la bande fait de la place au bas de la carte :
   respiration généreuse + la hauteur du chevauchement. Depuis le 17 sept.
   c'est la section contact qui suit, plus la FAQ, d'où le sélecteur sur le
   cadre plutôt que sur .faq. */
.pratique-bande + .panneau > .cadre {
  padding-top: calc(clamp(56px, 7vw, 96px) + var(--chevauche-pratique));
}
.pratique__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.pratique__grille > div {
  text-align: center;
  padding-inline: clamp(4px, 1vw, 18px);
}
.pratique__grille > div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.pratique svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  margin: 0 auto 10px;
  display: block;
}
/* Sélecteurs doublés (.pratique .x) : sur les pages intérieures,
   « .page-section p » (gris) gagnerait sinon sur ces <p> de la carte noire. */
.pratique .pratique__chiffre {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.pratique .pratique__ligne {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  margin: 0 auto;
  max-width: 24ch;
}
@media (max-width: 820px) {
  .pratique__grille { grid-template-columns: minmax(0, 1fr); }
  .pratique__grille > div + div { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; }
}

/* --------------------------------------------------------------------
   BLOC : PIED DE PAGE — panneau blanc
   -------------------------------------------------------------------- */
.pied {
  background: var(--creme);
  padding-block: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 40px);
  font-size: 0.9375rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 56px);
}
.pied h2,
.pied .pied__titre {  /* titres du pied sans balise Hn (audit SEO 19 sept.) : la hiérarchie de chaque page ne parle que de son sujet */
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 12px;
}
.pied p { color: var(--encre-douce); }
.pied ul { list-style: none; padding: 0; }
.pied li { margin-bottom: 12px; color: var(--encre-douce); }
.pied li strong { color: var(--encre); font-weight: 600; }
.pied__logo {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin-bottom: 16px;
}
.pied__mention {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid rgba(19, 21, 25, 0.1);
  color: var(--encre-douce);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}
.pied__mention p { margin: 0; }
@media (max-width: 820px) {
  .pied__grille { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------
   PAGES INTÉRIEURES — en-tête de page
   -------------------------------------------------------------------- */
.page-entete { padding-block: clamp(44px, 6vw, 72px) clamp(20px, 3vw, 36px); }
.page-entete .section__titre { font-size: clamp(2rem, 4.2vw, 2.9rem); margin-bottom: 0; }
.page-entete__intro {
  color: var(--encre-douce);
  font-size: 1.0938rem;
  margin-top: 16px;
}
.page-entete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-section { padding-block: clamp(24px, 3vw, 40px); }
.page-section--fin { padding-bottom: clamp(56px, 8vw, 96px); }
.page-section h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 18px;
}
.page-section h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.page-section p { color: var(--encre-douce); margin-bottom: 14px; }
.page-section ul { color: var(--encre-douce); list-style: none; padding-left: 0; }
.page-section li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
/* Listes NUMÉROTÉES (étapes du processus, sur-mesure) : le chiffre natif
   « 1. » sortait dans la marge ET la coche ronde des listes à puces
   s'ajoutait par-dessus (audit mobile, 18 sept.). La pastille porte
   maintenant le numéro, au même endroit que la coche. */
.page-section ol { color: var(--encre-douce); list-style: none; padding-left: 0; counter-reset: etape; }
.page-section ol > li { counter-increment: etape; }
.page-section ol > li::before {
  content: counter(etape);
  background: var(--bleu);
  color: var(--bleu-fonce);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
/* Surtitres et titres de section posés dans un .page-section (Contact, Où
   on livre, Le processus) : `.page-section p` les passait en GRIS et
   `.page-section h2` les rapetissait, alors que partout ailleurs le
   surtitre est bleu (audit mobile, 18 sept.). */
.page-section .section__surtitre { color: var(--bleu-fonce); margin-bottom: 14px; }
.page-entete__intro + .page-entete__intro { margin-top: 10px; }
.page-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bleu) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 14 14"><path d="M2.5 7.5l3 3 6-6" fill="none" stroke="%232f66a0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 11px no-repeat;
}
.encart--pastel li::before { background-color: #fff; }

/* L'interrupteur entre collections (Champêtre ↔ Monaco) */
.interrupteur {
  display: inline-flex;
  gap: 6px;
  margin-top: 22px;
  padding: 5px;
  background: var(--creme-2);
  border-radius: 999px;
}
.interrupteur a {
  padding: 9px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--encre-douce);
}
.interrupteur a:hover { color: var(--encre); }
.interrupteur a[aria-current="page"] {
  background: var(--encre);
  color: #fff;
}

/* --------------------------------------------------------------------
   TABLES DE PRIX
   -------------------------------------------------------------------- */
.tableau-defile {
  overflow-x: auto;
  margin-block: 10px 26px;
  border: 1px solid rgba(19, 21, 25, 0.1);
  border-radius: var(--rayon);
  background: var(--creme);
}
.tableau-prix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 640px;
}
.tableau-prix caption {
  text-align: left;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 16px 18px 12px;
  color: var(--encre);
}
.tableau-prix th {
  text-align: left;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 10px 18px;
  border-bottom: 2px solid rgba(19, 21, 25, 0.14);
  background: var(--creme-2);
}
.tableau-prix td {
  padding: 11px 18px;
  border-bottom: 1px solid rgba(19, 21, 25, 0.07);
  vertical-align: top;
  color: var(--encre-douce);
}
.tableau-prix tbody th {
  color: var(--encre);
  font-weight: 700;
  border-top: 1px solid rgba(19, 21, 25, 0.1);
}
.tableau-prix td small { display: block; font-weight: 400; color: var(--encre-douce); }
.tableau-prix tbody tr:last-child td { border-bottom: 0; }
.tableau-prix tbody tr:nth-child(even) td { background: rgba(220, 235, 246, 0.28); }
.tableau-prix td:first-child { font-weight: 600; color: var(--encre); white-space: nowrap; }
.tableau-prix .prix {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.tableau-prix th.prix { text-align: right; }
.tableau-note {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: -14px;
  margin-bottom: 26px;
}
/* Au téléphone, un tableau à plusieurs finitions (îlots : 4 colonnes de
   prix, 640 px de large) ne montrait QUE les noms des caissons, les prix
   étaient cachés derrière un défilement de côté que personne ne fait
   (audit mobile, 18 sept.). main.js pose un sélecteur de finition (même
   pilule que l'interrupteur Champêtre/Monaco) et le tableau n'affiche plus
   que « Modèle | prix de la finition choisie ». Sans JS : tableau complet
   qui défile, comme avant. Au-delà de 700 px : rien ne change. */
.finitions { display: none; }
.entete-court { display: none; }
@media (max-width: 700px) {
  .finitions {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-top: 18px;
    background: var(--creme-2);
    border-radius: 999px;
  }
  .finitions button {
    flex: 1 1 auto;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--encre-douce);
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease;
  }
  .finitions button[aria-pressed="true"] {
    background: var(--encre);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(19, 21, 25, 0.6);
  }
  .finitions__detail {
    font-size: 0.8125rem;
    color: var(--encre-douce);
    text-align: center;
    margin: 10px 0 0;
    min-height: 1.4em;
  }
  .tableau-defile.a-finitions { overflow-x: visible; margin-top: 14px; }
  .a-finitions .tableau-prix { min-width: 0; }
  .a-finitions .tableau-prix caption { font-size: 1rem; padding: 14px 16px 10px; }
  .a-finitions .tableau-prix th,
  .a-finitions .tableau-prix td { padding-inline: 16px; }
  .a-finitions .tableau-prix td:first-child { white-space: normal; }
  .a-finitions .entete-long { display: none; }
  .a-finitions .entete-court { display: inline; }
  .a-finitions .tableau-prix .prix { display: none; }
  .a-finitions[data-col="2"] .prix:nth-child(2),
  .a-finitions[data-col="3"] .prix:nth-child(3),
  .a-finitions[data-col="4"] .prix:nth-child(4),
  .a-finitions[data-col="5"] .prix:nth-child(5) { display: table-cell; }
  .a-finitions .tableau-prix td.prix {
    color: var(--encre);
    font-weight: 700;
    font-size: 1rem;
  }
  /* Le prix qui change se fond au lieu de sauter. */
  .a-finitions.vient-de-changer td.prix { animation: prix-fondu 260ms ease; }
}
@keyframes prix-fondu {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------
   ENCARTS (notes, pentures, avis) — cartes douces arrondies
   -------------------------------------------------------------------- */
.encart {
  background: var(--creme-2);
  border: 1px solid rgba(19, 21, 25, 0.06);
  border-radius: var(--rayon);
  padding: clamp(24px, 3vw, 34px);
  margin-block: 26px;
}
.encart--pastel { background: var(--bleu); border-color: transparent; }
.encart h3 { font-size: 1.25rem; margin-bottom: 10px; }
.encart p { margin-bottom: 8px; }
.encart p:last-child { margin-bottom: 0; }
.encart .bouton { margin-top: 14px; }
.encart a { color: var(--bleu-fonce); text-decoration: none; font-weight: 500; }
.encart a:hover { text-decoration: underline; }
.encart--pastel a { color: var(--bleu-vif); }

/* --------------------------------------------------------------------
   GALERIE (réalisations)
   -------------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-block: 26px;
}
.galerie figure { margin: 0; }
.galerie img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}
.galerie figcaption {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 8px;
}
.galerie figcaption a { color: inherit; text-decoration: none; }
.galerie figcaption a:hover { color: var(--bleu-fonce); text-decoration: underline; }
.galerie--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 820px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Une photo seule (tiroirs texturés) prend toute la largeur au lieu d'une
     demi-colonne à côté d'un vide. */
  .galerie:has(> figure:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
/* Au téléphone, la galerie empilait les photos une sous l'autre, ~440 px
   chacune : 3 500 px de défilement sur Cuisines (audit mobile, 18 sept.).
   Elle devient un CARROUSEL au doigt qui touche les bords de l'écran, la
   photo suivante dépasse à droite pour inviter au geste, et main.js ajoute
   dessous un compteur « 3 / 9 » et une réglette qui suit le doigt. Les
   galeries de deux photos restent une grille de deux colonnes. */
.galerie-suivi { display: none; }
@media (max-width: 700px) {
  .galerie:not(.galerie--deux):has(> figure:nth-child(3)) {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
    margin-bottom: 0;
  }
  .galerie:not(.galerie--deux):has(> figure:nth-child(3))::-webkit-scrollbar { display: none; }
  .galerie:not(.galerie--deux):has(> figure:nth-child(3)) figure {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  .galerie:not(.galerie--deux):has(> figure:nth-child(3)) figcaption {
    padding-right: 8px;
    line-height: 1.4;
  }
  .galerie-suivi {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 26px;
  }
  .galerie-suivi__compte {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--encre);
    min-width: 3.2em;
  }
  .galerie-suivi__compte span { color: var(--encre-douce); font-weight: 500; }
  .galerie-suivi__piste {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(19, 21, 25, 0.1);
    overflow: hidden;
  }
  .galerie-suivi__pouce {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--pouce, 20%);
    border-radius: inherit;
    background: var(--encre);
    transform: translateX(var(--avance, 0%));
    will-change: transform;
  }
}

/* --------------------------------------------------------------------
   FAQ (details/summary — fonctionne sans JS)
   En-tête centré : pastille bleu pâle, titre, ligne d'intro ; questions en
   cartes arrondies, chevron rond à droite (demande Zakary 2026-09-08).
   -------------------------------------------------------------------- */
.faq { text-align: center; }
.faq__pastille {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
  background: var(--bleu);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 18px;
}
.faq h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  max-width: 26ch;
  margin-inline: auto;
}
.faq__intro { max-width: 52ch; margin: 12px auto 0; color: var(--encre-douce); }
.faq details {
  text-align: left;
  background: var(--creme);
  border: 1px solid rgba(19, 21, 25, 0.1);
  border-radius: 14px;
  box-shadow: 0 14px 30px -24px rgba(19, 21, 25, 0.3);
  padding-inline: clamp(18px, 3vw, 28px);
  max-width: 880px;
  margin-inline: auto;
}
.faq details + details { margin-top: 14px; }
.faq h2 + details,
.faq__intro + details { margin-top: clamp(28px, 4vw, 44px); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bleu) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M3 5l4 4 4-4" fill="none" stroke="%232f66a0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 14px no-repeat;
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--bleu-fonce); }
.faq details p { padding: 0 0 18px; color: var(--encre-douce); }

/* --------------------------------------------------------------------
   CALCULATRICE DE PRIX PAR ÉTAPES
   Le conteneur [data-calculatrice] est rempli par js/calculatrice.js.
   Sans JS il reste vide : les listes de prix repliées restent la référence.
   -------------------------------------------------------------------- */
.centre { text-align: center; }
.centre .section__titre,
.centre p { margin-inline: auto; }
.calc {
  background: var(--creme);
  border: 1px solid rgba(19, 21, 25, 0.08);
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(24px, 4vw, 48px);
  max-width: 880px;
  margin-inline: auto;
  position: relative;
  text-align: left;
  box-shadow: 0 22px 50px -32px rgba(19, 21, 25, 0.35);
}
.calc__etape--entre { opacity: 0; transform: translateY(10px); }
.calc__etape--posee {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}
.calc h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-bottom: 8px;
  outline: none;
}
.calc__sous-titre {
  color: var(--encre-douce);
  font-size: 0.9375rem;
  margin-bottom: 18px;
}
.calc__progres {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.calc__progres-texte {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
  white-space: nowrap;
}
.calc__progres-barre {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(19, 21, 25, 0.08);
  overflow: hidden;
}
.calc__progres-barre span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--bleu-vif);
  transition: width 320ms ease;
}

/* Cartes de catégories et de familles.
   ⚠️ Flex centré, PAS une grille : avec 5 ou 9 cartes, une grille laisse un
   orphelin collé à gauche sur la dernière rangée (retour de Zakary) — en
   flex, la rangée incomplète se centre et a l'air voulue. */
.calc__cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block: 22px 26px;
}
.calc__carte { flex: 0 1 180px; }
.calc__carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 12px;
  background: var(--creme);
  border: 1.5px solid rgba(19, 21, 25, 0.12);
  border-radius: var(--rayon);
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--encre);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.calc__carte:hover {
  transform: translateY(-2px);
  border-color: var(--bleu-fonce);
  box-shadow: 0 14px 30px -20px rgba(19, 21, 25, 0.3);
}
.calc__carte img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--rayon) - 6px);
  background: var(--creme-2);
}
.calc__carte.est-choisie {
  border-color: var(--bleu-vif);
  border-width: 2px;
  background: rgba(220, 235, 246, 0.35);
}

/* Sélecteur de produit */
.calc__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--encre-douce);
  margin-block: 14px 8px;
}
/* Liste de produits : un vrai panneau défilant, pas un menu déroulant natif. */
.calc__liste {
  max-width: 620px;
  margin: 18px auto 26px;
  max-height: 380px;
  overflow-y: auto;
  border: 1.5px solid rgba(19, 21, 25, 0.14);
  border-radius: var(--rayon-petit);
  text-align: left;
  scrollbar-width: thin;
}
.calc__groupe-titre {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--creme-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 10px 16px;
  border-bottom: 1px solid rgba(19, 21, 25, 0.1);
}
.calc__produit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid rgba(19, 21, 25, 0.07);
  background: var(--creme);
  color: var(--encre);
  cursor: pointer;
  text-align: left;
  transition: background-color 140ms ease;
}
.calc__produit:last-child { border-bottom: none; }
/* Le survol doit CRIER « cliquable » (retour Zakary 2026-09-13) : fond bleu
   franc + flèche qui surgit au bout du nom. La flèche est toujours dans le
   flux (opacité 0) pour ne rien faire bouger. */
.calc__produit .calc__nom::after {
  content: "→";
  display: inline-block;
  margin-left: 8px;
  color: var(--bleu-vif);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.calc__produit:hover,
.calc__produit:focus-visible {
  background: var(--bleu);
}
.calc__produit:hover .calc__nom::after,
.calc__produit:focus-visible .calc__nom::after {
  opacity: 1;
  transform: none;
}
.calc__produit.est-choisi {
  background: rgba(220, 235, 246, 0.45);
  font-weight: 600;
}
.calc__dim {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--encre-douce);
  margin-top: 2px;
}
.calc__produit .depuis {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bleu-fonce);
  font-size: 0.9375rem;
}

/* Choix de finition (cartes radio) */
.calc__choix-groupe {
  display: grid;
  gap: 10px;
  margin-block: 18px;
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}
.calc__choix--case {
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}
.calc__choix {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid rgba(19, 21, 25, 0.12);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.calc__choix:hover { border-color: var(--bleu-fonce); }
.calc__choix.est-choisie {
  border-color: var(--bleu-vif);
  background: rgba(220, 235, 246, 0.35);
}
.calc__choix input { accent-color: var(--bleu-vif); width: 18px; height: 18px; flex: none; }
.calc__choix span { flex: 1; font-weight: 500; }
.calc__choix strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bleu-fonce);
}
.calc__choix--case { margin-bottom: 8px; }

/* Extras (compteurs) */
.calc__extras {
  display: grid;
  gap: 12px;
  margin-block: 18px 26px;
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}
.calc__extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(19, 21, 25, 0.1);
  border-radius: var(--rayon-petit);
}
.calc__extra > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.calc__extra span { font-weight: 500; }
.calc__extra small { color: var(--encre-douce); }
.calc__extra--choix { gap: 16px; }
.calc__extra--choix .calc__extra-choix { margin-top: 0; flex: none; }
.calc__extra-choix {
  margin-top: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid rgba(19, 21, 25, 0.18);
  border-radius: 10px;
  background: var(--creme);
  color: var(--encre);
  cursor: pointer;
}
.calc__extra-choix:focus-visible { border-color: var(--bleu-fonce); background: #fff; outline: none; }
.calc__quantite { display: flex; align-items: center; gap: 6px; flex: none; }
.calc__quantite button {
  width: 44px;   /* cible tactile ≥ 44 px (audit technique) */
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(19, 21, 25, 0.18);
  background: var(--creme);
  color: var(--encre);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.calc__quantite button:hover { border-color: var(--bleu-vif); background: var(--bleu-vif); color: #fff; }
.calc__quantite input {
  width: 56px;
  text-align: center;
  padding: 8px 4px;
  border: 1.5px solid rgba(19, 21, 25, 0.18);
  border-radius: 10px;
  background: var(--creme);
  font-variant-numeric: tabular-nums;
}

/* Résultat */
.calc__total {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  color: var(--encre);
  margin-block: 6px 14px;
  font-variant-numeric: tabular-nums;
}
.calc__detail {
  list-style: none;
  padding: 0;
  margin: 0 auto 16px;
  max-width: 560px;
  text-align: left;
  border-top: 1px solid rgba(19, 21, 25, 0.1);
}
.calc__detail li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(19, 21, 25, 0.08);
  color: var(--encre-douce);
  font-size: 0.9375rem;
}
.calc__detail strong { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre); }
.calc__mention { font-size: 0.875rem; color: var(--encre-douce); margin-bottom: 20px; }
.calc__recommencer {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--encre-douce);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 0;
  font-size: 0.9375rem;
}
.calc__recommencer:hover { color: var(--encre); }

/* Boutons d'étape */
.calc__boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.calc__boutons [data-suiv] {
  background: var(--bleu-vif);
  border-color: var(--bleu-vif);
}
.calc__boutons [data-suiv]:hover { background: #275585; border-color: #275585; }
.calc__mention { margin-inline: auto; max-width: 48ch; }
.calc__boutons [data-suiv][disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Liste de prix repliée sous la calculatrice */

@media (max-width: 760px) {
  .calc__carte { flex-basis: calc(50% - 7px); }
}
@media (max-width: 420px) {
  .calc__extra { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------
   VITRINE — glissoire horizontale photos + vidéos Facebook
   Défilement natif (scroll-snap) : fonctionne sans JS ; les flèches et le
   chargement des vidéos au clic sont des bonus JS.
   -------------------------------------------------------------------- */
.vitrine { position: relative; }
.vitrine__piste {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
.vitrine__piste::-webkit-scrollbar { height: 8px; }
.vitrine__piste::-webkit-scrollbar-thumb {
  background: rgba(19, 21, 25, 0.2);
  border-radius: 99px;
}
.diapo {
  flex: 0 0 auto;
  width: min(320px, 78vw);
  scroll-snap-align: start;
}
.diapo figure { margin: 0; }
.diapo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}
.diapo figcaption {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 8px;
}
/* Vidéos AUTO-HÉBERGÉES (les vidéos Facebook du client, servies par nous) :
   lecteur natif du navigateur, poster affiché tant qu'on ne clique pas
   (preload="none" — rien ne charge avant). Elles sont en 16:9 : diapositive
   « cinéma » plus large dans la glissoire, jamais recadrées. */
.diapo--video { width: min(700px, 92vw); }
.diapo video,
.galerie video {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* `cover` mange les bandes noires incrustées des fichiers letterboxés —
     sans lui, l'aperçu flottait minuscule au milieu du noir. Le plein écran
     revient à `contain` (règle :fullscreen plus bas). */
  object-fit: cover;
  border-radius: var(--rayon);
  background: #000;
  display: block;
}
.galerie video:fullscreen { object-fit: contain; }
.galerie video:-webkit-full-screen { object-fit: contain; }
/* Contenu vertical livré avec bandes noires incrustées dans un cadre 16:9 :
   un recadrage 9:16 en `cover` fait disparaître les bandes exactement. */
.diapo--video.diapo--verticale { width: min(300px, 78vw); }
video.video-verticale {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.vitrine__fleches {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.vitrine__source {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 10px;
}

/* --------------------------------------------------------------------
   PASTILLES DE COULEURS (page couleurs)
   -------------------------------------------------------------------- */
.teintes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
  margin-block: 20px 30px;
}
.teintes li { margin: 0; padding-left: 0; }
.teintes li::before { content: none; }   /* pas de coche bleue sur un nuancier */
.teintes .teinte__pastille {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 74px;
  border-radius: var(--rayon-petit);
  border: 1px solid rgba(19, 21, 25, 0.16);
  margin-bottom: 8px;
}
/* Une teinture est translucide : le grain du pin doit rester visible à
   travers la couleur (retour de Jonathan, 15 sept. : « vos couleurs
   affichées sont trop opaques comme une peinture »). La pastille EST une
   planche de pin (une des siennes, photographiée), sur laquelle la couleur
   est posée en voile translucide : le grain et les nœuds traversent même
   les teintes foncées, ce qu'un fondu en multiply ne donnait pas. */
.teintes .teinte__pastille {
  background-image: url("../assets/img/texture-pin-420.webp");
  background-size: cover;
  background-position: center;
}
.teintes .teinte__pastille::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: inherit;   /* la teinte, posée en style en ligne */
  opacity: 0.82;
}
.echantillons { margin: 26px 0 18px; }
.echantillons img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}
.echantillons figcaption {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 10px;
}
.teintes .teinte__nom { font-weight: 600; color: var(--encre); font-size: 0.9375rem; }

/* =====================================================================
   BLOC : QUINCAILLERIE (page Portes, tiroirs et quincaillerie)
   Les photos du fournisseur ne sont pas cadrées pareil : on ne recadre
   rien (contrairement à .galerie), sinon les numéros de modèle sautent.
   ===================================================================== */
.quinc-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-block: 26px;
}
.quinc-photos figure { margin: 0; }
.quinc-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--creme-2);
  padding: 10px;
  border-radius: var(--rayon);
}
.quinc-photos figcaption {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 10px;
}

/* =====================================================================
   BLOC : RÉALISATIONS — pastilles de filtre + mosaïque
   La barre de filtres est un bonus JS : cachée sans lui, toutes les
   photos s'affichent. La mosaïque en colonnes garde les proportions
   naturelles des photos (fini le recadrage 4:5 uniforme). */
.filtres {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
}
html.js .filtres { display: flex; }
.filtre {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid #dcd9d2;
  background: transparent;
  color: var(--encre-douce);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filtre:hover { border-color: var(--encre); color: var(--encre); }
.filtre.actif {
  background: var(--encre);
  border-color: var(--encre);
  color: #fff;
}
.mosaique {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 24px);
  margin-block: clamp(22px, 3vw, 34px) 10px;
}
.mosaique figure { margin: 0; }
.mosaique img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--rayon);
  background: var(--creme-2);
}
@media (max-width: 820px) {
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mosaique figcaption {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 8px;
}
.mosaique__cat {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
  margin-bottom: 2px;
}
.mosaique figcaption a { color: inherit; text-decoration: none; }
.mosaique figcaption a:hover { color: var(--bleu-fonce); text-decoration: underline; }
.mosaique figure.cache { display: none; }
/* Au téléphone, 60 projets en UNE colonne faisaient 34 000 px, une
   quarantaine d'écrans (audit mobile, 18 sept.) : la mosaïque garde deux
   colonnes jusqu'au plus petit écran, et les sept filtres, qui prenaient
   trois lignes, tiennent sur un seul rang qui glisse au doigt, collé aux
   bords de l'écran comme les galeries. */
@media (max-width: 560px) {
  .mosaique { gap: 20px 12px; }
  .mosaique img { border-radius: 14px; }
  .mosaique figcaption { font-size: 0.8125rem; line-height: 1.35; margin-top: 7px; }
  .filtres {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
  }
  .filtres::-webkit-scrollbar { display: none; }
  .filtre { flex: none; padding: 9px 18px; font-size: 0.875rem; }
}

/* =====================================================================
   BLOC : CONTACT (accueil) — formulaire empilé à gauche, grande photo
   arrondie à droite avec carte « nos réalisations » incrustée
   (référence : maquette « We'd love to help » fournie par Zakary). */
.contact__duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.contact__duo .section__titre { margin-bottom: 10px; }
.contact__texte {
  color: var(--encre-douce);
  max-width: 46ch;
  margin-bottom: 28px;
}
.formulaire__rang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
@media (max-width: 560px) {
  .formulaire__rang { grid-template-columns: minmax(0, 1fr); }
}
.champ { max-width: none; margin: 0 0 16px; }
.champ label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.champ input,
.champ select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid transparent;
  border-radius: var(--rayon-petit);
  background: var(--creme-2);
  color: var(--encre);
}
.champ textarea {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--rayon-petit);
  background: var(--creme-2);
  color: var(--encre);
  resize: vertical;
}
.champ textarea:focus-visible {
  border-color: var(--bleu-fonce);
  background: #fff;
  outline: none;
}
.champ__optionnel { font-weight: 400; color: var(--encre-douce); }
.champ input::placeholder,
.champ textarea::placeholder { color: #9aa0a8; }
.champ select:invalid { color: #6b7079; }
.champ input:focus-visible,
.champ select:focus-visible {
  border-color: var(--bleu-fonce);
  background: #fff;
  outline: none;
}
/* Widget Turnstile (case anti-robot) : réservé sa hauteur pour éviter un saut
   de mise en page quand l'iframe de Cloudflare se charge. */
.formulaire__captcha { margin: 20px 0 0; min-height: 65px; }
.formulaire__envoi { max-width: none; margin: 20px 0 0; }
.formulaire__envoi .bouton {
  width: 100%;
  height: 52px;
  justify-content: center;
  padding-block: 0;
}
.formulaire__note {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 12px;
  text-align: center;
  max-width: none;
}
/* Formulaire branché (2026-09-19) : piège à robots, mention Loi 25,
   erreur, remerciement. */
.champ-piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulaire { position: relative; }
.formulaire__mention {
  font-size: 0.8125rem;
  color: var(--encre-douce);
  text-align: center;
  margin: 10px 0 0;
  max-width: none;
}
.formulaire__note.est-erreur {
  color: #9b2c2c;
  background: #fdf0ef;
  border-radius: 12px;
  padding: 12px 14px;
}
.formulaire__note a { color: inherit; font-weight: 600; }
.formulaire.est-en-cours button[type="submit"] { opacity: 0.7; cursor: progress; }
.formulaire__merci {
  background: var(--bleu);
  border-radius: var(--rayon);
  padding: clamp(22px, 3vw, 32px);
  outline: none;
}
.formulaire__merci-titre {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--encre);
  margin: 0 0 8px;
}
.formulaire__merci p { color: var(--encre); margin-bottom: 0; }
.formulaire__merci a { color: var(--bleu-fonce); font-weight: 600; }

.contact__photo {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  min-height: 420px;
}
.contact__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 820px) {
  .contact__duo { grid-template-columns: minmax(0, 1fr); }
  /* Au téléphone, la photo passait SOUS le bouton Envoyer, seule, sans
     rôle, la même cuisine grise sur les 10 pages : 320 px de plus à défiler
     (audit mobile, 18 sept.). Elle reste au bureau, à côté du formulaire. */
  .contact__photo { display: none; }
}

/* Où on livre (accueil) : les villes étaient un pavé de 11 lignes au
   téléphone ; mêmes villes, rangées par région, en pastilles. */
.page-section .zones { margin: 18px 0 22px; display: grid; gap: 14px; }
.page-section .zones li {
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.page-section .zones li::before { content: none; }
.zones span {
  font-size: 0.875rem;
  color: var(--encre);
  background: var(--creme-2);
  border-radius: 999px;
  padding: 6px 13px;
}
.zones .zones__region {
  flex-basis: 100%;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* Au téléphone, les pastilles restaient trop hautes (~620 px, retour Parker
   19 sept.) : les villes deviennent une ligne de texte séparée par des
   points médians sous le nom de la région. Mêmes villes, ~3× moins haut. */
@media (max-width: 700px) {
  .page-section .zones { gap: 12px; margin: 14px 0 18px; }
  .page-section .zones li { gap: 2px 0; display: block; line-height: 1.5; }
  .zones span {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.9375rem;
    color: var(--encre);
    white-space: nowrap;  /* « Sainte-Agathe-des-Monts » ne se coupe plus au trait d'union */
  }
  .zones .zones__region { display: block; margin-bottom: 2px; font-size: 0.7188rem; }
  /* Le point est accroché à la ville qui le PRÉCÈDE (nowrap) : les retours à
     la ligne tombent après lui, jamais une ligne qui commence par « · ». */
  .zones span:not(.zones__region):not(:last-child)::after {
    content: "·";
    margin-left: 0.4em;
    color: var(--encre-douce);
  }
}

/* =====================================================================
   FICHE PRODUIT (pages cuisine : armoires, îlots, comptoirs, portes et
   tiroirs) — même gabarit, contenu propre à chaque page (19 sept., Parker :
   « chaque page a du contenu, pas juste des photos »). Peu de texte : des
   cartes, des prix, des étapes. Tout le contenu vient du client.
   ===================================================================== */
.fiche { padding-block: clamp(40px, 6vw, 72px) 0; }
.fiche .section__titre { max-width: 26ch; }
.fiche__intro { color: var(--encre-douce); max-width: 60ch; margin: -10px 0 28px; }
.fiche h3 { color: var(--encre); }
.insecable { white-space: nowrap; }

/* 3 atouts : icône ronde, titre, une ligne */
.page-section .atouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
}
.page-section .atouts li {
  padding: 24px 22px 22px;
  margin: 0;
  background: var(--creme-2);
  border-radius: var(--rayon);
}
.page-section .atouts li::before { content: none; }
.atouts__icone {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.atouts__icone svg { width: 22px; height: 22px; stroke: var(--bleu-fonce); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-section .atouts h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.page-section .atouts p { font-size: 0.9375rem; margin: 0; }

/* Liste de prix à points de conduite */
.page-section .prix-liste { max-width: 680px; margin: 0; }
.page-section .prix-liste li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  margin: 0;
  border-bottom: 1px dashed rgba(19, 21, 25, 0.16);
  color: var(--encre);
}
.page-section .prix-liste li::before { content: none; }
.prix-liste__nom { flex: 1; }
.prix-liste__prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-section .prix-note { font-size: 0.875rem; margin-top: 14px; max-width: 680px; }

/* Étapes numérotées */
.page-section .etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
  counter-reset: etape;
}
.page-section .etapes > li {
  padding: 0;
  margin: 0;
  counter-increment: etape;
}
.page-section .etapes > li::before {
  content: counter(etape);
  position: static;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--encre);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 14px;
}
.page-section .etapes h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.page-section .etapes p { font-size: 0.9375rem; margin: 0; }
.page-section .etapes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 820px) {
  .page-section .atouts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page-section .atouts li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 18px;
  }
  .atouts__icone { grid-row: span 2; margin: 0; }
  .page-section .etapes,
  .page-section .etapes--3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Au téléphone : une ligne de temps verticale. */
  .page-section .etapes > li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 22px;
    position: relative;
  }
  .page-section .etapes > li::before { grid-row: span 2; margin: 0; }
  .page-section .etapes > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 4px;
    width: 2px;
    background: rgba(19, 21, 25, 0.12);
  }
}

/* =====================================================================
   FINITIONS MOBILES (audit du 18 sept., trois relectures indépendantes)
   ===================================================================== */

/* Titre de section posé dans un .page-section (Contact, Où on livre) :
   `.page-section h2` le rapetissait à ~22 px, les autres titres de section
   font ~29 px au téléphone. Même gabarit partout. */
.page-section .section__titre { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.contact__duo .section__titre { margin-bottom: 10px; }

@media (max-width: 820px) {
  /* Carte noire « En pratique » : trois blocs centrés empilés, ~510 px pour
     trois chiffres. En rangées icône | chiffre + ligne : ~280 px. */
  .pratique { padding: 8px 22px; }
  .pratique__grille { gap: 0; }
  .pratique__grille > div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    text-align: left;
    padding: 18px 0;
  }
  .pratique__grille > div + div { padding-top: 18px; }
  .pratique svg { grid-row: span 2; width: 24px; height: 24px; margin: 0; }
  .pratique .pratique__chiffre { font-size: 1.375rem; margin: 0; line-height: 1.2; }
  .pratique .pratique__ligne { margin: 2px 0 0; max-width: none; font-size: 0.8125rem; }

}

/* Tuiles de la calculatrice : dans une rangée, une tuile au libellé long
   (« Salon (TV, tables, banc, coffre) ») étirait sa voisine et laissait un
   vide sous le libellé court. Le libellé se centre dans l'espace restant. */
.calc__carte > span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
@media (max-width: 560px) {
  .calc__carte { font-size: 0.875rem; }
}

/* Zones tactiles (Lighthouse / WCAG 2.2, 24 px minimum) : les liens de
   légende de la mosaïque faisaient 16 px de haut, les points du carrousel
   des collections 28 px. */
.mosaique figcaption a { display: inline-block; padding-block: 4px; }
@media (max-width: 700px) {
  .collections__points { gap: 0; }
  .collections__points button { border-width: 14px; }  /* uniforme : une bordure asymétrique rendait les points carrés */
}

@media (max-width: 560px) {
  /* Boutons de l'en-tête des pages intérieures : deux largeurs différentes
     empilées (193 et 202 px), bords droits jamais alignés. Pleine largeur,
     comme « Envoyer ». */
  .page-entete__actions { flex-direction: column; }
  .page-entete__actions .bouton { width: 100%; justify-content: center; }
}

/* En-tête : le bouton d'appel reste collé au hamburger (sous 380 px, le
   logo réduit au monogramme laissait « Nous joindre » flotter au centre),
   et le doré du logo, sombre sur la barre noire, est éclairci. */
.entete__cta { margin-left: auto; }
.entete .marque__logo { filter: brightness(1.35) saturate(1.05); }