/* Maison Hennebelle : feuille de style de la démo de luxe (joaillier du Vieux-Lille).
   Matières du métier : le blanc des rehauts de gouache (fond principal), le
   papier gris des dessins de joaillerie (sections secondaires), l'obsidienne
   du velours des plateaux (scènes sombres), le rouge de la devanture peinte en
   1972 (unique couleur d'action), le sable de l'or jaune (filets et chiffres).
   Bodoni Moda pour les titres, Instrument Sans pour le texte. Rythme lent :
   grandes marges, photos pleine page, transitions longues. Palette tirée de la
   banque BRNSG (« Bordeaux Obsidienne »), angles droits. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --perle: #F2F1ED;
  --gouache: #E4E1DA;
  --gouache-2: #D7D3CA;
  --blanc: #FAF9F6;
  --encre: #161616;
  --encre-2: #4A4642;
  --cramoisi: #710014;
  --cramoisi-fonce: #57000F;
  --sable: #B38F6F;
  --sable-clair: #D9BC9C;
  --sable-texte: #6E523C;
  --nuit: #0A0A0A;
  --nuit-2: #141312;
  --nuit-3: #23211F;
  --sur-nuit: #EDEBE6;
  --sur-nuit-2: #A8A29A;
  --filet: rgb(22 22 22 / 0.14);
  --filet-fort: rgb(22 22 22 / 0.3);
  --filet-nuit: rgb(237 235 230 / 0.16);

  --font-titre: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --font-texte: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.4vw, 1.38rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.4rem + 2vw, 3.1rem);
  --step-4: clamp(2.3rem, 1.55rem + 3.3vw, 4.4rem);
  --step-5: clamp(2.5rem, 1.35rem + 5vw, 6rem);

  --gouttiere: clamp(20px, 5vw, 72px);
  --largeur: 1360px;
  --rayon: 2px;
  --entete-h: 80px;
  --section-y: clamp(96px, 12vw, 192px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 760px) {
  :root {
    --entete-h: 64px;
    --section-y: clamp(80px, 20vw, 112px);
  }
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 24px);
  scrollbar-color: var(--sable) var(--gouache);
}

body {
  margin: 0;
  background: var(--perle);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

p {
  margin: 0 0 1rem;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

dl,
dd {
  margin: 0;
}

address {
  font-style: normal;
}

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

a {
  color: var(--cramoisi);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.3s, text-decoration-color 0.3s;
}

a:hover {
  color: var(--cramoisi-fonce);
}

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

.scene :focus-visible,
.section--nuit :focus-visible,
.section--appel :focus-visible,
.plein-cadre :focus-visible,
.pied :focus-visible,
.barre-actions :focus-visible,
.entete--sur-scene :focus-visible {
  outline-color: var(--sable-clair);
}

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  top: calc(var(--brnsg-barre, 0px) + 8px);
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--encre);
  color: var(--blanc);
  transform: translateY(-200%);
}

.lien-evitement:focus {
  transform: none;
}

.colonne {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.note {
  font-size: var(--step--1);
  color: var(--encre-2);
  max-width: 70ch;
}

.chapo {
  font-family: var(--font-titre);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--encre-2);
  max-width: 40ch;
}

.sous-titre {
  font-size: var(--step-2);
  margin-bottom: 1.5rem;
}

.lien-seul {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Icônes, boutons, liens                                               */
/* ------------------------------------------------------------------ */

.icone {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0 1.8em;
  border: 1px solid var(--cramoisi);
  border-radius: var(--rayon);
  background: var(--cramoisi);
  color: var(--blanc);
  font: 500 0.95rem/1.2 var(--font-texte);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.bouton:hover {
  background: var(--cramoisi-fonce);
  border-color: var(--cramoisi-fonce);
  color: var(--blanc);
}

.bouton--clair {
  background: var(--sur-nuit);
  border-color: var(--sur-nuit);
  color: var(--nuit);
}

.bouton--clair:hover {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--cramoisi);
}

.bouton--petit {
  min-height: 42px;
  padding: 0 1.25em;
  font-size: 0.86rem;
}

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

.bouton[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.bouton-lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cramoisi);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 2.25rem;
}

.lien-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--encre);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.lien-tel span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
}

.lien-tel:hover {
  color: var(--cramoisi);
}

.lien-tel--clair {
  color: var(--sur-nuit);
}

.lien-tel--clair:hover {
  color: var(--sable-clair);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--encre);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.lien-fleche span {
  background: linear-gradient(var(--cramoisi), var(--cramoisi)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.6s var(--ease);
}

.lien-fleche .icone-fleche {
  color: var(--cramoisi);
  transition: transform 0.6s var(--ease);
}

.lien-fleche:hover {
  color: var(--cramoisi);
}

.lien-fleche:hover .icone-fleche {
  transform: translateX(5px);
}

.lien-fleche--clair {
  color: var(--sur-nuit);
}

.lien-fleche--clair span {
  background-image: linear-gradient(var(--sable-clair), var(--sable-clair));
}

.lien-fleche--clair .icone-fleche,
.lien-fleche--clair:hover {
  color: var(--sable-clair);
}

/* ------------------------------------------------------------------ */
/* En-tête                                                              */
/* ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 50;
  height: var(--entete-h);
  background: rgb(242 241 237 / 0.97);
  border-bottom: 1px solid var(--filet);
  color: var(--encre);
  transition: transform 0.6s var(--ease), background-color 0.5s, border-color 0.5s, color 0.5s;
}

.page-accueil .entete {
  position: fixed;
  left: 0;
  right: 0;
}

.entete--sur-scene {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--sur-nuit);
}

.entete--cachee {
  transform: translateY(calc(-100% - var(--brnsg-barre, 0px)));
}

.entete-grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.logo:hover {
  color: inherit;
}

.logo-poincon {
  width: 17px;
  height: 24px;
  fill: none;
  stroke: var(--sable);
  stroke-width: 1.3;
}

.logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-nom {
  font-family: var(--font-titre);
  font-size: 1.08rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-metier {
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
  white-space: nowrap;
}

.nav-liste {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
  list-style: none;
}

.nav-liste a {
  position: relative;
  color: inherit;
  font-size: 0.93rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding-block: 6px;
}

.nav-liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease);
}

.nav-liste a:hover::after,
.nav-liste a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-liste a[aria-current="page"] {
  color: var(--cramoisi);
}

.entete--sur-scene .nav-liste a[aria-current="page"] {
  color: var(--sable-clair);
}

.nav-mobile-seulement {
  display: none;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.entete-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
}

.entete-tel-numero {
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.entete-statut {
  font-size: 0.74rem;
  opacity: 0.8;
  white-space: nowrap;
}

.entete--sur-scene .entete-rdv {
  background: transparent;
  border-color: rgb(237 235 230 / 0.55);
  color: var(--sur-nuit);
}

.entete--sur-scene .entete-rdv:hover {
  background: var(--sur-nuit);
  color: var(--nuit);
}

.menu-bouton {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: 500 0.9rem/1 var(--font-texte);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.menu-bouton-traits {
  position: relative;
  width: 22px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: transform 0.4s var(--ease);
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits {
  transform: scaleX(0.7);
}

@media (max-width: 1240px) {
  .entete-statut {
    display: none;
  }
}

/* Le menu se replie tôt : le nom de la maison et les quatre liens ne tiennent
   plus côte à côte en dessous de 1120 px. */
@media (max-width: 1120px) {
  .menu-bouton {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: calc(var(--brnsg-barre, 0px) + var(--entete-h)) 0 0 0;
    z-index: 49;
    padding: 40px var(--gouttiere);
    background: var(--perle);
    color: var(--encre);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0s 0.5s;
  }

  .nav--ouverte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  }

  .nav-liste {
    flex-direction: column;
    gap: 6px;
  }

  .nav-liste a {
    display: block;
    font-family: var(--font-titre);
    font-size: var(--step-3);
    letter-spacing: -0.01em;
    padding-block: 10px;
  }

  .nav-liste a::after {
    display: none;
  }

  .nav-mobile-seulement {
    display: block;
    margin-top: 24px;
  }

  .nav-mobile-seulement a {
    font-family: var(--font-texte);
    font-size: 1rem;
    color: var(--cramoisi);
    text-decoration: underline;
  }

  .entete--sur-scene .nav-liste a[aria-current="page"] {
    color: var(--cramoisi);
  }

  body.menu-ouvert .entete {
    background: var(--perle);
    color: var(--encre);
  }
}

@media (max-width: 760px) {
  .entete-grille {
    gap: 12px;
  }

  .entete-rdv {
    display: none;
  }

  .logo-metier {
    display: none;
  }

  .logo-nom {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }

  .logo-nom-1 {
    font-size: 0.56rem;
    letter-spacing: 0.34em;
  }

  .logo-nom-2 {
    font-size: 0.98rem;
    letter-spacing: 0.16em;
  }

  .logo-poincon {
    width: 14px;
    height: 20px;
  }

  .entete-actions {
    gap: 12px;
  }

  .entete-tel-numero {
    font-size: 0.92rem;
  }

  .menu-bouton-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .logo-poincon {
    display: none;
  }

  .logo-nom-2 {
    letter-spacing: 0.1em;
  }
}

/* ------------------------------------------------------------------ */
/* La scène du solitaire (accueil)                                      */
/* ------------------------------------------------------------------ */

.scene {
  position: relative;
  background: var(--fond-scene, var(--nuit));
  color: var(--sur-nuit);
}

.scene-collant {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--brnsg-barre, 0px));
  padding-top: var(--entete-h);
  padding-bottom: 32px;
}

.scene-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}

.scene-texte {
  display: grid;
  align-content: center;
}

.hero-titre {
  font-size: var(--step-5);
  line-height: 1.02;
  max-width: 11ch;
}

.hero-texte {
  margin-top: 1.75rem;
  max-width: 36ch;
  color: var(--sur-nuit-2);
  font-size: var(--step-1);
  line-height: 1.55;
}

.scene-indice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 3rem 0 0;
  color: var(--sur-nuit-2);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}

.scene-indice-trait {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--sable), transparent);
  transform-origin: top;
  animation: indice 2.4s var(--ease) infinite;
}

@keyframes indice {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.scene-notes {
  list-style: none;
  margin-top: 3.5rem;
  display: grid;
  gap: 40px;
}

.scene-note {
  max-width: 34ch;
  padding-top: 20px;
  border-top: 1px solid var(--filet-nuit);
}

.scene-note-titre {
  font-size: var(--step-3);
  margin-bottom: 1rem;
}

.scene-note p {
  color: var(--sur-nuit-2);
}

.scene-note--fin .scene-note-titre {
  font-size: var(--step-2);
}

.scene-prix {
  font-family: var(--font-titre);
  font-size: var(--step-4);
  line-height: 1;
  margin: 0.4rem 0 1rem;
  color: var(--sable-clair) !important;
}

.scene-visuel {
  position: relative;
}

.scene-cadre {
  position: relative;
  width: min(100%, calc(100svh - var(--brnsg-barre, 0px) - var(--entete-h) - 48px));
  aspect-ratio: 1;
  margin-inline: auto;
  /* Fondu doux vers le fond de la page sur les bords du cadre (canvas et affiche).
     La bague ne dépasse pas 85 % du demi-côté : elle reste entière. */
  -webkit-mask-image: radial-gradient(closest-side, #000 87%, rgb(0 0 0 / 0.55) 94%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 87%, rgb(0 0 0 / 0.55) 94%, transparent 100%);
}

.scene-affiche,
.scene-affiche img,
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-canvas {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.scene--prete .scene-canvas {
  opacity: 1;
}

.scene-curseur {
  display: grid;
  gap: 8px;
  width: min(100%, 420px);
  margin: 24px auto 0;
  color: var(--sur-nuit-2);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.scene-curseur input {
  width: 100%;
  accent-color: var(--sable);
}

.scene-progression {
  display: none;
}

/* Défilement : la scène s'étire, la bague reste à l'écran et tourne. */
@media (min-height: 520px) {
  .js-motion .scene {
    height: 420svh;
  }

  .js-motion .scene-collant {
    position: sticky;
    top: var(--brnsg-barre, 0px);
    height: calc(100svh - var(--brnsg-barre, 0px));
    min-height: 0;
    overflow: hidden;
  }

  .js-motion .scene-texte > * {
    grid-area: 1 / 1;
  }

  .js-motion .scene-notes {
    margin-top: 0;
    align-self: center;
    pointer-events: none;
  }

  /* Les détails restent lisibles par les lecteurs d'écran : seule l'opacité
     change, et seul le détail affiché reçoit les clics. */
  .js-motion .scene-note {
    grid-area: 1 / 1;
    opacity: 0;
  }

  .js-motion .scene-note--active {
    pointer-events: auto;
  }

  .js-motion .scene-intro--masquee {
    pointer-events: none;
  }

  .js-motion .scene-progression {
    display: block;
    position: absolute;
    right: var(--gouttiere);
    top: 50%;
    width: 1px;
    height: 34vh;
    transform: translateY(-50%);
    background: var(--filet-nuit);
  }

  .js-motion .scene-progression span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--sable);
    transform: scaleY(0);
    transform-origin: top;
  }
}

@media (max-width: 960px) {
  .scene-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .scene-visuel {
    order: -1;
  }

  .scene-cadre {
    width: min(100%, 46svh);
  }

  .scene-collant {
    align-items: flex-start;
    padding-top: calc(var(--entete-h) + 8px);
  }

  .hero-titre {
    font-size: clamp(2rem, 8.2vw, 3.6rem);
    max-width: 14ch;
  }

  .hero-texte {
    margin-top: 1rem;
    font-size: var(--step-0);
  }

  .scene-texte .actions {
    margin-top: 1.25rem;
  }

  .scene-indice {
    display: none;
  }

  .scene-note-titre {
    font-size: var(--step-2);
    margin-bottom: 0.5rem;
  }

  .scene-prix {
    font-size: var(--step-3);
  }

  .js-motion .scene {
    height: 380svh;
  }

  .js-motion .scene-progression {
    display: none;
  }
}

@media (max-width: 960px) and (max-height: 720px) {
  .scene-cadre {
    width: min(100%, 38svh);
  }

  .hero-texte {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section--serre {
  padding-block: clamp(56px, 7vw, 96px);
}

.section--gouache {
  background: var(--gouache);
}

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

.section--nuit .chapo,
.section--nuit p,
.section--nuit dd {
  color: var(--sur-nuit-2);
}

.section--nuit a {
  color: var(--sable-clair);
}

.section-tete {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 24px 48px;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.section-tete .chapo {
  margin: 0;
}

.titre-section {
  font-size: var(--step-4);
  max-width: 16ch;
}

.duo-texte .titre-section,
.dessin-texte .titre-section,
.formulaire-intro .titre-section,
.acces-texte .titre-section,
.garanties-intro .titre-section,
.faq-intro .titre-section,
.histoire-intro .titre-section {
  margin-bottom: 2rem;
}

@media (max-width: 860px) {
  .section-tete {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Photo pleine page, texte posé dessus. */
.plein-cadre {
  position: relative;
  display: grid;
  align-items: end;
  min-height: calc(100svh - var(--brnsg-barre, 0px));
  overflow: hidden;
  background: var(--nuit);
  color: var(--sur-nuit);
}

.plein-cadre-image {
  position: absolute;
  inset: 0;
}

.plein-cadre-image picture,
.plein-cadre-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plein-cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 10 9 / 0) 35%, rgb(10 10 9 / 0.82) 100%);
  pointer-events: none;
}

.plein-cadre--gauche {
  align-items: center;
}

.plein-cadre--droite::after {
  background:
    linear-gradient(270deg, rgb(10 10 9 / 0.88) 0%, rgb(10 10 9 / 0.55) 34%, rgb(10 10 9 / 0) 62%),
    linear-gradient(180deg, rgb(10 10 9 / 0) 55%, rgb(10 10 9 / 0.6) 100%);
}

.plein-cadre--droite .plein-cadre-texte {
  display: grid;
  justify-items: end;
}

.plein-cadre--droite .plein-cadre-texte > * {
  width: min(100%, 31rem);
}

.plein-cadre--gauche::after {
  background: linear-gradient(90deg, rgb(10 10 9 / 0.86) 0%, rgb(10 10 9 / 0.5) 38%, rgb(10 10 9 / 0) 64%);
}

.plein-cadre-texte {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 9vw, 140px);
}

.plein-cadre-texte .titre-section {
  margin-bottom: 1.5rem;
}

.plein-cadre-texte p {
  max-width: 44ch;
  color: rgb(237 235 230 / 0.86);
}

@media (max-width: 760px) {
  .plein-cadre {
    min-height: 88svh;
  }

  .plein-cadre--gauche {
    align-items: end;
  }

  .plein-cadre--gauche::after,
  .plein-cadre--droite::after,
  .plein-cadre::after {
    background: linear-gradient(180deg, rgb(10 10 9 / 0) 25%, rgb(10 10 9 / 0.88) 78%);
  }

  .plein-cadre--droite .plein-cadre-texte {
    justify-items: start;
  }

  .plein-cadre--gauche .plein-cadre-image img {
    object-position: 78% 50%;
  }

  .plein-cadre-image img {
    object-position: 38% 50%;
  }
}

/* Duo : texte et photo côte à côte. */
.duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}

.duo-texte {
  grid-column: 1 / span 5;
  grid-row: 1;
}

.duo-image {
  grid-column: 7 / span 6;
  grid-row: 1;
}

.duo--inverse .duo-texte {
  grid-column: 8 / span 5;
  grid-row: 1;
}

.duo--inverse .duo-image {
  grid-column: 1 / span 6;
  grid-row: 1;
}

.duo--etroit {
  align-items: start;
}

.duo--etroit .duo-texte + .duo-texte {
  grid-column: 7 / span 6;
}

.duo-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.duo-image--haute img {
  aspect-ratio: 4 / 5;
}

.duo-texte > p {
  max-width: 48ch;
}

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

  .duo-texte,
  .duo-image,
  .duo--inverse .duo-texte,
  .duo--inverse .duo-image,
  .duo--etroit .duo-texte + .duo-texte {
    grid-column: auto;
    grid-row: auto;
  }

  .duo-image {
    order: 2;
  }
}

/* Faits en deux colonnes, filets fins. */
.faits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 2.5rem;
}

.faits div {
  padding-block: 18px;
  border-top: 1px solid var(--filet);
}

.faits dt,
.choix-legende,
.galerie-prix,
.etape-detail,
.prix-liste dt,
.horaires-liste span:first-child,
.acces-liste dt,
.pied-titre {
  font-family: var(--font-texte);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.faits dt {
  color: var(--sable-texte);
  margin-bottom: 6px;
}

.faits dd {
  font-family: var(--font-titre);
  font-size: var(--step-1);
  line-height: 1.3;
}

@media (max-width: 420px) {
  .faits {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tête des pages intérieures. */
.page-tete {
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: var(--section-y);
}

.page-tete-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: clamp(32px, 4vw, 64px);
}

.page-tete-texte {
  grid-column: 1 / span 6;
  padding-bottom: clamp(0px, 3vw, 48px);
}

.page-tete-image {
  grid-column: 7 / span 6;
}

.page-tete-image img {
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--entete-h) - var(--brnsg-barre, 0px) - 80px);
  object-fit: cover;
}

.page-titre {
  font-size: var(--step-5);
  max-width: 12ch;
}

.page-chapo {
  margin-top: 1.75rem;
  max-width: 38ch;
  font-family: var(--font-titre);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--encre-2);
}

.page-tete--simple .page-titre {
  max-width: 18ch;
}

.page-tete--simple {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.code-erreur {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sable-texte);
}

.page-tete--404 {
  min-height: 60svh;
}

@media (max-width: 860px) {
  .page-tete-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-tete-texte,
  .page-tete-image {
    grid-column: auto;
  }

  .page-tete-image img {
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------------ */
/* Galerie des créations (accueil)                                      */
/* ------------------------------------------------------------------ */

.galerie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(16px, 2.4vw, 40px);
  list-style: none;
}

.galerie-piece--haute {
  grid-column: 1 / span 5;
  grid-row: 1;
}

.galerie-piece--decalee {
  grid-column: 7 / span 4;
  grid-row: 1;
  margin-top: 22%;
}

.galerie-piece--large {
  grid-column: 1 / span 7;
  grid-row: 2;
  margin-top: 4%;
}

.galerie-piece--petite {
  grid-column: 9 / span 4;
  grid-row: 2;
  margin-top: -18%;
}

.galerie-lien {
  display: block;
  color: inherit;
  text-decoration: none;
}

.galerie-image {
  display: block;
  overflow: hidden;
  background: var(--gouache-2);
}

.galerie-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.galerie-piece--large .galerie-image img {
  aspect-ratio: 16 / 10;
}

.galerie-lien:hover .galerie-image img {
  transform: scale(1.04);
}

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

.galerie-nom {
  font-family: var(--font-titre);
  font-size: var(--step-1);
}

.galerie-prix {
  color: var(--sable-texte);
}

@media (max-width: 760px) {
  .galerie {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .galerie-piece--haute,
  .galerie-piece--decalee,
  .galerie-piece--petite,
  .galerie-piece--large {
    grid-row: auto;
    margin-top: 0;
  }

  .galerie-piece--haute {
    grid-column: 1 / span 6;
  }

  .galerie-piece--decalee {
    grid-column: 2 / span 5;
  }

  .galerie-piece--petite {
    grid-column: 1 / span 5;
  }

  .galerie-piece--large {
    grid-column: 1 / span 6;
  }
}

/* ------------------------------------------------------------------ */
/* Dessin à la gouache, étapes                                          */
/* ------------------------------------------------------------------ */

.dessin-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.dessin-images {
  grid-column: 1 / span 6;
  position: relative;
  padding-bottom: 22%;
}

.dessin-image--1 {
  width: 82%;
}

.dessin-image--1 img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.dessin-image--2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  border: 10px solid var(--perle);
}

.dessin-image--2 img {
  aspect-ratio: 1;
  object-fit: cover;
}

.dessin-texte {
  grid-column: 8 / span 5;
  padding-top: 4%;
}

.prix-ligne {
  margin-top: 2rem;
  font-family: var(--font-titre);
  font-size: var(--step-1);
}

@media (max-width: 860px) {
  .dessin-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .dessin-images,
  .dessin-texte {
    grid-column: auto;
  }
}

.etapes {
  list-style: none;
  counter-reset: etape;
  margin-top: 2.5rem;
}

.etape {
  position: relative;
  counter-increment: etape;
  padding: 22px 0 22px 56px;
  border-top: 1px solid var(--filet);
}

.etape::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--sable);
}

.etape-titre {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.etape p {
  margin-bottom: 0.4rem;
  max-width: 46ch;
}

.etape-detail {
  color: var(--sable-texte);
}

.etapes--ligne {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 0;
}

.etapes--ligne .etape {
  padding: 64px 0 0;
}

.etapes--ligne .etape::before {
  top: 20px;
}

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

@media (max-width: 560px) {
  .etapes--ligne {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .etapes--ligne .etape {
    padding: 22px 0 22px 56px;
  }

  .etapes--ligne .etape::before {
    top: 18px;
  }
}

/* ------------------------------------------------------------------ */
/* Avis                                                                 */
/* ------------------------------------------------------------------ */

.avis-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.avis-note {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
}

.avis-note-chiffre {
  font-family: var(--font-titre);
  font-size: var(--step-5);
  line-height: 0.9;
  color: var(--cramoisi);
}

.avis-note-texte {
  max-width: 16ch;
  color: var(--encre-2);
  line-height: 1.4;
}

.avis-liste {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px);
  list-style: none;
}

.avis-carte {
  grid-column: span 5;
  padding-top: 24px;
  border-top: 1px solid var(--filet-fort);
}

/* Deux grands extraits en quinconce, les autres plus petits à côté. */
.avis-carte:nth-child(1) {
  grid-column: 1 / span 7;
  grid-row: span 2;
}

.avis-carte:nth-child(2),
.avis-carte:nth-child(3) {
  grid-column: 8 / span 5;
}

.avis-carte:nth-child(4),
.avis-carte:nth-child(6) {
  grid-column: 1 / span 5;
}

.avis-carte:nth-child(5) {
  grid-column: 6 / span 7;
  grid-row: span 2;
}

.avis-texte {
  margin: 0;
}

.avis-texte p {
  font-family: var(--font-titre);
  font-size: var(--step-1);
  line-height: 1.45;
}

.avis-carte:nth-child(1) .avis-texte p,
.avis-carte:nth-child(5) .avis-texte p {
  font-size: var(--step-2);
  line-height: 1.35;
}

.avis-auteur {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 1.25rem 0 0;
  font-size: var(--step--1);
  color: var(--encre-2);
}

.avis-nom {
  font-weight: 600;
  color: var(--encre);
}

@media (max-width: 860px) {
  .avis-carte,
  .avis-carte:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Équipe                                                               */
/* ------------------------------------------------------------------ */

.portraits {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 48px) clamp(16px, 2.4vw, 40px);
  list-style: none;
  align-items: start;
}

.portrait--1 {
  grid-column: 1 / span 5;
}

.portrait--2 {
  grid-column: 7 / span 3;
  margin-top: 28%;
}

.portrait--3 {
  grid-column: 10 / span 3;
  margin-top: 8%;
}

.portrait-image {
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--gouache-2);
}

.portrait-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait-nom {
  font-size: var(--step-2);
}

.portrait-role {
  margin: 6px 0 12px;
  color: var(--sable-texte);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portrait p:last-child {
  max-width: 40ch;
  color: var(--encre-2);
}

@media (max-width: 860px) {
  .portraits {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .portrait--1 {
    grid-column: 1 / span 6;
  }

  .portrait--2 {
    grid-column: 1 / span 5;
    margin-top: 0;
  }

  .portrait--3 {
    grid-column: 2 / span 5;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Poinçons et garanties                                                */
/* ------------------------------------------------------------------ */

.garanties-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.garanties-intro {
  grid-column: 1 / span 5;
}

.garanties-intro > p {
  max-width: 42ch;
}

.garanties-image {
  margin-top: 2.5rem;
}

.garanties-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.garanties {
  grid-column: 7 / span 6;
}

.garanties div {
  padding-block: 26px;
  border-top: 1px solid var(--filet-nuit);
}

.garanties dt {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  color: var(--sable-clair);
  margin-bottom: 10px;
}

.garanties dd {
  max-width: 52ch;
}

@media (max-width: 860px) {
  .garanties-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .garanties-intro,
  .garanties {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Horaires, accès, appel                                               */
/* ------------------------------------------------------------------ */

.acces-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.acces-texte {
  grid-column: 1 / span 5;
}

.acces-image {
  grid-column: 7 / span 6;
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 32px);
}

.acces-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .acces-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .acces-texte,
  .acces-image {
    grid-column: auto;
    position: static;
  }

  .acces-image img {
    aspect-ratio: 3 / 2;
  }
}

.horaires-etat {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

[data-brnsg-horaires] {
  font: inherit;
}

[data-brnsg-horaires][data-etat]::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.45em;
  vertical-align: 0.14em;
  border: 1px solid var(--sable);
  border-radius: 50%;
}

[data-brnsg-horaires][data-etat="ouvert"]::before {
  background: var(--sable);
}

.horaires-liste {
  list-style: none;
  margin-bottom: 1rem;
}

.horaires-liste li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
  border-top: 1px solid var(--filet);
}

.horaires-liste li span:last-child {
  text-align: right;
}

.horaires-liste span:first-child {
  padding-top: 3px;
  color: var(--encre-2);
}

.acces {
  margin-top: 3rem;
}

.acces-adresse {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.acces-tel a {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--encre);
}

.acces-liste {
  margin-top: 1.75rem;
}

.acces-liste div {
  padding-block: 16px;
  border-top: 1px solid var(--filet);
}

.acces-liste dt {
  color: var(--sable-texte);
  margin-bottom: 4px;
}

.section--appel {
  background: var(--cramoisi);
  color: var(--blanc);
  padding-block: clamp(80px, 9vw, 140px);
}

.section--appel p {
  max-width: 44ch;
  color: rgb(250 249 246 / 0.88);
}

.section--appel .bouton--clair {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--cramoisi);
}

.section--appel .bouton--clair:hover {
  background: var(--sable-clair);
  border-color: var(--sable-clair);
  color: var(--cramoisi-fonce);
}

.section--appel .lien-tel--clair {
  color: var(--blanc);
}

.appel-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 32px 64px;
}

.appel-grille .titre-section {
  margin-bottom: 1.5rem;
}

.appel-grille .actions {
  margin-top: 0;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .appel-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .appel-grille .actions {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------------ */
/* Fiançailles : configurateur, prix, critères, taille                  */
/* ------------------------------------------------------------------ */

.comtesse-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(64px, 8vw, 120px);
}

.comtesse-visuel {
  grid-column: 1 / span 6;
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 24px);
  background: var(--nuit);
}

.comtesse-visuel img {
  aspect-ratio: 1;
  object-fit: cover;
}

.comtesse-texte {
  grid-column: 8 / span 5;
}

@media (max-width: 860px) {
  .comtesse-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .comtesse-visuel,
  .comtesse-texte {
    grid-column: auto;
    position: static;
  }
}

.configurateur {
  margin-top: 2.5rem;
  border-top: 1px solid var(--filet-fort);
}

.choix {
  margin: 0;
  padding: 24px 0 0;
  border: 0;
}

.choix + .choix {
  margin-top: 20px;
}

.choix-legende {
  padding: 0;
  margin-bottom: 12px;
  color: var(--sable-texte);
}

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

.choix-options--diamants {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.option {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}

.option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option-libelle {
  font-weight: 500;
  line-height: 1.25;
}

.option-aide {
  font-size: 0.78rem;
  color: var(--encre-2);
}

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

.option:has(input:checked) {
  border-color: var(--cramoisi);
  box-shadow: inset 0 0 0 1px var(--cramoisi);
}

.option:has(input:checked) .option-libelle {
  color: var(--cramoisi);
}

.option:has(input:focus-visible) {
  outline: 2px solid var(--cramoisi);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .choix-options--diamants {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.configurateur-resultat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  margin-top: 28px;
  padding: 28px 28px 32px;
  background: var(--blanc);
  border: 1px solid var(--filet);
}

.configurateur-resultat > * {
  grid-column: 1 / -1;
}

.configurateur-resultat > .configurateur-prix {
  grid-column: 1;
  grid-row: 1;
}

.configurateur-resultat > .configurateur-pierre {
  grid-column: 2;
  grid-row: 1;
}

.configurateur-resultat > .bouton {
  justify-self: start;
}

.configurateur-pierre {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
}

.configurateur-pierre-disque {
  display: block;
  width: calc(var(--diametre, 5.1) * 12px);
  height: calc(var(--diametre, 5.1) * 12px);
  border-radius: 50%;
  border: 1px solid var(--sable);
  background:
    conic-gradient(from 22deg, rgb(255 255 255 / 0.9), rgb(205 203 199 / 0.6), rgb(255 255 255 / 0.95), rgb(190 188 184 / 0.55), rgb(255 255 255 / 0.9), rgb(210 208 204 / 0.6), rgb(255 255 255 / 0.9));
  transition: width 0.7s var(--ease), height 0.7s var(--ease);
}

.configurateur-prix {
  font-family: var(--font-titre);
  font-size: var(--step-4);
  line-height: 1;
  margin: 0;
}

.configurateur-detail {
  max-width: 44ch;
  margin-top: 1rem;
}

.configurateur-delai {
  font-size: var(--step--1);
  color: var(--encre-2);
  margin-bottom: 1.5rem;
}

.tableau-enveloppe {
  overflow-x: auto;
  border-top: 1px solid var(--filet-fort);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tableau th,
.tableau td {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}

.tableau thead th {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sable-texte);
}

.tableau tbody th {
  font-weight: 500;
}

.tableau--prix td:nth-child(n + 3),
.tableau--prix thead th:nth-child(n + 3),
.tableau--tarifs td:nth-child(2),
.tableau--tarifs thead th:nth-child(2) {
  text-align: right;
}

.tableau--prix td:nth-child(n + 3) {
  font-family: var(--font-titre);
  font-size: var(--step-1);
}

.tableau--tarifs td:nth-child(2) {
  font-family: var(--font-titre);
  font-size: var(--step-1);
  white-space: nowrap;
}

.tableau--tarifs td:nth-child(3) {
  color: var(--encre-2);
  white-space: nowrap;
  padding-left: 24px;
}

.tableau-enveloppe + .note {
  margin-top: 1.25rem;
}

@media (max-width: 560px) {
  .tableau th,
  .tableau td {
    padding-right: 8px;
  }

  .tableau--tarifs td:nth-child(3) {
    padding-left: 8px;
  }
}

.criteres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-bottom: 1.5rem;
}

.criteres div {
  padding-block: 18px;
  border-top: 1px solid var(--filet);
}

.criteres dt {
  font-family: var(--font-titre);
  font-size: var(--step-1);
  margin-bottom: 6px;
}

.criteres dd {
  color: var(--encre-2);
  font-size: 0.95rem;
}

@media (max-width: 560px) {
  .criteres {
    grid-template-columns: minmax(0, 1fr);
  }
}

.taille-outil {
  margin: 2rem 0;
  padding: 24px;
  background: var(--blanc);
  border: 1px solid var(--filet);
}

.taille-libelle {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
}

.taille-saisie {
  display: flex;
  align-items: center;
  gap: 10px;
}

.taille-saisie input {
  width: 9ch;
}

.taille-resultat {
  min-height: 1.6em;
  margin: 12px 0 0;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.25;
}

/* ------------------------------------------------------------------ */
/* Créations, atelier, maison                                           */
/* ------------------------------------------------------------------ */

.prix-liste {
  margin-top: 2rem;
  border-top: 1px solid var(--filet-fort);
}

.prix-liste div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
  border-bottom: 1px solid var(--filet);
}

.prix-liste dt {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.prix-liste dd {
  flex: none;
  font-family: var(--font-titre);
  font-size: var(--step-1);
  white-space: nowrap;
}

.piece-nom {
  margin-top: 2rem;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  color: var(--sur-nuit) !important;
}

.piece-prix {
  font-family: var(--font-titre);
  font-size: var(--step-3);
  color: var(--sable-clair) !important;
}

.fabrication {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  list-style: none;
  counter-reset: fab;
}

.fabrication-etape {
  counter-increment: fab;
}

.fabrication-image {
  overflow: hidden;
  margin-bottom: 20px;
}

.fabrication-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.fabrication-titre {
  font-size: var(--step-2);
  margin-bottom: 0.6rem;
}

.fabrication-titre::before {
  content: counter(fab) ". ";
  color: var(--sable);
}

.fabrication-etape p {
  color: var(--encre-2);
}

.fabrication-etape--texte {
  align-self: center;
  padding: 32px 0;
  border-block: 1px solid var(--filet-fort);
}

@media (max-width: 960px) {
  .fabrication {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fabrication {
    grid-template-columns: minmax(0, 1fr);
  }
}

.liste-filets {
  list-style: none;
  border-top: 1px solid var(--filet-fort);
}

.liste-filets li {
  padding-block: 16px;
  border-bottom: 1px solid var(--filet);
  max-width: 52ch;
}

.section--nuit .liste-filets {
  border-top-color: var(--filet-nuit);
}

.section--nuit .liste-filets li {
  border-bottom-color: var(--filet-nuit);
  color: var(--sur-nuit-2);
}

.histoire-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.histoire-intro {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 32px);
}

.histoire-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.histoire {
  grid-column: 7 / span 6;
  list-style: none;
}

.histoire li {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid var(--filet);
}

.histoire-annee {
  margin: 0;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--sable-texte);
}

@media (max-width: 860px) {
  .histoire-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .histoire-intro,
  .histoire {
    grid-column: auto;
    position: static;
  }

  .histoire li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* FAQ */
.faq-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.faq-intro {
  grid-column: 1 / span 4;
}

.faq {
  grid-column: 6 / span 7;
  border-top: 1px solid var(--filet-fort);
}

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

.faq-question {
  position: relative;
  display: block;
  padding: 22px 48px 22px 0;
  font-family: var(--font-titre);
  font-size: var(--step-1);
  cursor: pointer;
  list-style: none;
}

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

.faq-signe {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
}

.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--cramoisi);
  transition: transform 0.5s var(--ease);
}

.faq-signe::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-signe::after {
  transform: rotate(0deg);
}

.faq-reponse {
  padding-bottom: 22px;
  color: var(--encre-2);
  max-width: 60ch;
}

@media (max-width: 860px) {
  .faq-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-intro,
  .faq {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                          */
/* ------------------------------------------------------------------ */

.formulaire-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.formulaire-intro {
  grid-column: 1 / span 5;
}

.formulaire-intro > p {
  max-width: 44ch;
}

.formulaire-intro .horaires {
  margin-top: 2.5rem;
}

.formulaire-carte {
  grid-column: 7 / span 6;
  padding: clamp(24px, 3vw, 48px);
  background: var(--blanc);
  border: 1px solid var(--filet);
}

@media (max-width: 860px) {
  .formulaire-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .formulaire-intro,
  .formulaire-carte {
    grid-column: auto;
  }
}

.suite {
  list-style: none;
  margin-top: 2rem;
  counter-reset: suite;
}

.suite li {
  position: relative;
  counter-increment: suite;
  padding: 18px 0 18px 48px;
  border-top: 1px solid var(--filet);
}

.suite li::before {
  content: counter(suite);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--font-titre);
  font-size: var(--step-1);
  color: var(--sable);
}

.suite-titre {
  margin-bottom: 2px;
  font-weight: 600;
}

.suite li p:last-child {
  margin: 0;
  color: var(--encre-2);
}

.champ {
  margin-bottom: 20px;
}

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

@media (max-width: 560px) {
  .champ-rangee {
    grid-template-columns: minmax(0, 1fr);
  }
}

.champ label,
.consentement {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  font-weight: 500;
}

.champ-optionnel {
  font-weight: 400;
  color: var(--encre-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--perle);
  color: var(--encre);
  font: inherit;
  transition: border-color 0.3s, background-color 0.3s;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--encre-2);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cramoisi);
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--cramoisi);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--cramoisi);
}

.select-enveloppe {
  position: relative;
}

.select-enveloppe::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select {
  appearance: none;
  padding-right: 40px;
}

.champ-aide {
  margin: -2px 0 8px;
  font-size: 0.84rem;
  color: var(--encre-2);
}

.champ-erreur {
  margin: 6px 0 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--cramoisi);
}

.formulaire-erreur:empty {
  display: none;
}

.formulaire-erreur {
  margin-top: 12px;
}

.champ-piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consentement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin: 8px 0 20px;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--encre-2);
}

.consentement input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--cramoisi);
}

.selection-jointe {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-left: 2px solid var(--sable);
  background: var(--perle);
}

.selection-jointe-titre {
  margin-bottom: 4px;
  font-weight: 600;
}

.selection-jointe-texte {
  margin: 0;
  color: var(--encre-2);
}

.formulaire-succes {
  padding: 8px 0;
}

.formulaire-succes:focus {
  outline: none;
}

.formulaire-succes-titre {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/* Pages légales                                                        */
/* ------------------------------------------------------------------ */

.texte-legal {
  max-width: 760px;
}

.texte-legal h2 {
  font-size: var(--step-2);
  margin: 2.5rem 0 0.75rem;
}

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

/* ------------------------------------------------------------------ */
/* Pied de page                                                         */
/* ------------------------------------------------------------------ */

.pied {
  background: var(--nuit-2);
  color: var(--sur-nuit-2);
  padding-top: clamp(72px, 8vw, 120px);
  font-size: 0.94rem;
}

.pied a {
  color: var(--sur-nuit);
}

.pied a:hover {
  color: var(--sable-clair);
}

.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
}

.logo--pied {
  color: var(--sur-nuit);
  margin-bottom: 24px;
}

.logo--pied .logo-metier {
  display: block;
}

.pied-adresse {
  margin-bottom: 10px;
  color: var(--sur-nuit);
}

.pied-tel a {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pied-titre {
  margin-bottom: 14px;
  color: var(--sable-clair);
}

.pied-horaires,
.pied-liens {
  list-style: none;
}

.pied-horaires li {
  display: grid;
  gap: 2px;
  padding-block: 8px;
  border-bottom: 1px solid var(--filet-nuit);
}

.pied-horaires li span:last-child {
  color: var(--sur-nuit);
}

.pied-statut {
  margin-top: 14px;
  color: var(--sur-nuit);
}

.pied-liens li {
  margin-bottom: 8px;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(56px, 6vw, 88px);
  padding-block: 28px 32px;
  border-top: 1px solid var(--filet-nuit);
  font-size: 0.84rem;
}

.pied-legal p {
  margin: 0;
}

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

@media (max-width: 560px) {
  .pied-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Barre d'actions mobile : appeler, prendre rendez-vous. */
.barre-actions {
  display: none;
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--brnsg-onglet, 0px));
  }

  .barre-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--brnsg-onglet, 0px);
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--nuit);
    border-top: 1px solid var(--filet-nuit);
    transition: transform 0.5s var(--ease);
  }

  .barre-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--rayon);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .barre-actions-tel {
    border: 1px solid rgb(237 235 230 / 0.4);
    color: var(--sur-nuit);
  }

  .barre-actions-rdv {
    background: var(--cramoisi);
    color: var(--blanc);
  }

  .barre-actions-tel:hover {
    color: var(--sable-clair);
  }

  .barre-actions-rdv:hover {
    color: var(--blanc);
    background: var(--cramoisi-fonce);
  }

  body.menu-ouvert .barre-actions {
    transform: translateY(110%);
  }
}

/* ------------------------------------------------------------------ */
/* Mouvement (motion.js) : états de départ, posés seulement avec js-motion */
/* ------------------------------------------------------------------ */

.js-motion [data-titre-anime] {
  visibility: hidden;
}

/* Même liste que REVELES dans motion.js. */
.js-motion :is(.chapo, .page-chapo, .page-tete .actions, .duo-texte > p, .faits > div, .etape, .avis-carte, .avis-note,
  .portrait, .garanties > div, .garanties-intro > p, .horaires, .acces, .prix-liste > div, .tableau-enveloppe,
  .criteres > div, .histoire li, .faq-item, .faq-intro > p, .formulaire-carte, .formulaire-intro > p, .suite li,
  .liste-filets li, .fabrication-etape, .galerie-piece, .configurateur, .taille-outil, .prix-ligne, .lien-seul,
  .appel-grille p, .appel-grille .actions, .piece-nom, .piece-prix, .texte-legal, .dessin-texte .actions) {
  opacity: 0;
}

.js-motion .scene :is(.hero-texte, .scene-texte .actions, .scene-indice) {
  opacity: 0;
}

.ligne-titre {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

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

  .scene-indice-trait {
    animation: none;
  }
}