/* ==========================================================================
   Guillaume Grillo Jewelry Studio — feuille de style principale
   --------------------------------------------------------------------------
   Sommaire
     01. Jetons de design (couleurs, typo, espacements)
     02. Réinitialisation et bases
     03. Utilitaires et primitives (conteneur, titres, boutons, plaques)
     04. Animations d'apparition au scroll
     05. Header, navigation, sélecteur de langue
     06. Hero + animation filaire -> rendu
     07. Section confiance (cartes glassmorphism)
     08. Section process (frise 5 étapes)
     09. Section services (4 offres)
     10. Section portfolio (comparateurs avant/après + galerie + lightbox)
     11. Section à propos
     12. Section contact (formulaire)
     13. Footer
     14. Bandeau cookies
     15. Pages légales
     16. Impression et mouvement réduit
   ========================================================================== */

/* ==========================================================================
   01. JETONS DE DESIGN
   ========================================================================== */

:root {
  /* --- Couleurs ---------------------------------------------------------
     Deux noirs distincts, et ce n'est pas un détail : les 46 visuels du
     portfolio et le hero sont détourés sur du noir pur (0,0,0). Toute
     surface qui les accueille doit donc être en --void, sinon un liseré
     fantôme apparaît autour de chaque image. --noir sert partout ailleurs. */
  --void: #000000;
  --noir: #0a0a0a;
  --noir-2: #111111;
  --noir-3: #161616;

  --or: #c7a66d;          /* accent unique — 8,6:1 sur --noir, conforme AAA   */
  --or-clair: #e2c795;    /* survol                                           */
  --or-fonce: #6b5426;    /* or lisible SUR fond clair (6,2:1 sur --studio)    */

  --blanc: #f5f3ef;       /* texte principal — 18:1 sur --noir                */
  --gris: #a8a49c;        /* texte secondaire — 7,9:1 sur --noir              */
  --gris-2: #78746c;      /* texte tertiaire, à réserver aux gros corps       */

  --studio: #f2efe9;      /* fond des « plaques studio » (visuels sur blanc)  */

  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bd: rgba(255, 255, 255, 0.09);
  --glass-bg-hover: rgba(255, 255, 255, 0.06);

  /* --- Typographie ------------------------------------------------------ */
  --font-titre: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif;
  --font-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.5rem + 4.3vw, 5.15rem);
  --fs-h2: clamp(1.95rem, 1.25rem + 2.7vw, 3.35rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --fs-lead: clamp(1.09rem, 1rem + 0.5vw, 1.35rem);
  --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

  /* --- Rythme ----------------------------------------------------------- */
  --pad-section: clamp(4.5rem, 2.5rem + 7.5vw, 8.5rem);
  --pad-inline: clamp(1.25rem, 0.6rem + 3.2vw, 3rem);
  --max-w: 1280px;
  --max-w-texte: 62ch;

  --radius: 4px;
  --radius-lg: 10px;

  --header-h: 72px;

  /* --- Transitions ------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-rapide: 180ms var(--ease);
  --t-moyen: 380ms var(--ease);
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}

/* ==========================================================================
   02. RÉINITIALISATION ET BASES
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Décale les ancres pour qu'elles ne passent pas sous le header collant. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Verrouillage du défilement quand la lightbox ou le menu mobile est ouvert. */
body.est-verrouille { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Anneau de focus unique et visible partout — jamais supprimé sans remplacement. */
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--or); color: var(--noir); }

/* Lien d'évitement : premier élément focusable, masqué jusqu'au focus clavier. */
.saut-contenu {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: var(--or);
  color: var(--noir);
  font-weight: 600;
  font-size: var(--fs-small);
  border-radius: var(--radius);
  transition: transform var(--t-rapide);
}
.saut-contenu:focus { transform: translate(-50%, 0); }

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

/* ==========================================================================
   03. UTILITAIRES ET PRIMITIVES
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.section {
  padding-block: var(--pad-section);
  position: relative;
}

/* Sections qui accueillent des visuels détourés sur noir pur. */
.section--void { background: var(--void); }

.section__entete {
  max-width: var(--max-w-texte);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section__entete--centre {
  margin-inline: auto;
  text-align: center;
}

/* Surtitre : petite capitale espacée, précédée d'un tiret or. */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-corps);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.25rem;
}
.surtitre::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--or);
  flex: none;
}
.section__entete--centre .surtitre { justify-content: center; }

.titre-section { font-size: var(--fs-h2); }

.chapo {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--gris);
}

/* Filet or dégradé, utilisé comme séparateur discret. */
.filet {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(199, 166, 109, 0.45), transparent);
}

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

.btn {
  --btn-py: 0.95rem;
  --btn-px: 1.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--t-rapide), color var(--t-rapide),
              border-color var(--t-rapide), transform var(--t-rapide);
}
.btn:active { transform: translateY(1px); }

/* Bouton principal : or plein, texte noir — 8,6:1, le plus fort contraste du site. */
.btn--or {
  background: var(--or);
  color: var(--noir);
  font-weight: 600;
}
.btn--or:hover { background: var(--or-clair); }

/* Micro-interaction : un reflet balaie le bouton au survol. */
.btn--or::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
  pointer-events: none;
}
.btn--or:hover::after { transform: translateX(120%); }

.btn--fantome {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(245, 243, 239, 0.28);
}
.btn--fantome:hover {
  border-color: var(--or);
  color: var(--or);
  background: rgba(199, 166, 109, 0.06);
}

.btn--bloc { width: 100%; }

/* Lien texte souligné à l'animation d'entrée. */
.lien-souligne {
  position: relative;
  color: var(--or);
  padding-bottom: 2px;
}
.lien-souligne::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-moyen);
}
.lien-souligne:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Plaque studio ------------------------------------------------------
   Les visuels 3D (fond blanc pur) et les photos de production (fond gris
   clair) sont les seules images claires du site. Plutôt que de subir le
   rectangle blanc sur fond noir, on l'assume comme un objet posé : coins
   arrondis, filet or, et vignetage interne qui adoucit la bordure franche
   sans ternir le produit lui-même. */
.plaque {
  position: relative;
  background: var(--studio);
  border: 1px solid rgba(199, 166, 109, 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plaque::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 clamp(30px, 8vw, 70px) rgba(10, 10, 10, 0.17);
  border-radius: inherit;
}
.plaque img { width: 100%; }

/* --- Verre dépoli -------------------------------------------------------- */
.verre {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
/* Repli pour les navigateurs sans backdrop-filter (Firefox < 103, anciens
   Edge) : on remplace le flou par un fond opaque légèrement éclairci, afin
   que les cartes restent lisibles et détachées du fond. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: var(--noir-3); }
}

/* ==========================================================================
   04. ANIMATIONS D'APPARITION AU SCROLL
   ========================================================================== */

/* L'état initial n'est appliqué que si JS a pris la main (classe .js sur
   <html>). Sans JavaScript, tout reste visible : le contenu ne dépend
   jamais de l'animation pour être accessible. */
.js .apparition {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
  transition-delay: var(--delai, 0ms);
  will-change: opacity, transform;
}
.js .apparition.est-visible {
  opacity: 1;
  transform: none;
}
/* Libère la couche de composition une fois l'animation terminée. */
.js .apparition.est-terminee { will-change: auto; }

/* Décalages d'apparition, par paliers de 80 ms. Sous forme de classes et non
   d'attributs style= : la page ne contient ainsi aucun style en ligne, ce qui
   permet de servir une CSP sans 'unsafe-inline' sur style-src. */
.d1 { --delai: 80ms; }
.d2 { --delai: 160ms; }
.d3 { --delai: 240ms; }
.d4 { --delai: 320ms; }

/* ==========================================================================
   05. HEADER, NAVIGATION, SÉLECTEUR DE LANGUE
   ========================================================================== */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-moyen), border-color var(--t-moyen),
              backdrop-filter var(--t-moyen);
}
/* Au défilement, le header se densifie pour rester lisible sur les visuels. */
.entete.est-detachee {
  background: rgba(10, 10, 10, 0.82);
  border-bottom-color: rgba(199, 166, 109, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete.est-detachee,
  .entete--opaque { background: rgba(10, 10, 10, 0.97); }
}

/* Pages légales : aucun visuel plein écran derrière le header, il doit donc
   rester habillé en permanence. Le script laisse ce modificateur tranquille
   au lieu de retirer l'habillage dès que le défilement revient en haut. */
.entete--opaque {
  background: rgba(10, 10, 10, 0.88);
  border-bottom-color: rgba(199, 166, 109, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.entete__interieur {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
}

/* Le logo source est en noir : on l'inverse en blanc cassé pour le fond noir.
   Dimensionnement par la HAUTEUR : le logo (monogramme + « Jewelry Studio »
   sur deux lignes) est au format 139 x 50, soit un rapport de 2,77:1. Le
   contraindre en largeur comme la version précédente, très étirée, le
   rendrait bien trop haut pour la barre. */
.logo { flex: none; display: block; min-width: 0; }
.logo img {
  height: clamp(38px, 3.6vw, 50px);
  width: auto;
  filter: brightness(0) invert(0.96);
  transition: filter var(--t-rapide);
}
.logo:hover img { filter: brightness(0) invert(0.82) sepia(0.5) saturate(3) hue-rotate(2deg); }

.nav { margin-left: auto; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.9vw, 2.1rem);
}

.nav__lien {
  position: relative;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--gris);
  padding-block: 0.4rem;
  transition: color var(--t-rapide);
  white-space: nowrap;
}
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-moyen);
}
.nav__lien:hover { color: var(--blanc); }
.nav__lien:hover::after { transform: scaleX(1); transform-origin: left; }
/* État actif piloté par l'observateur de section (scroll-spy). */
.nav__lien.est-actif { color: var(--blanc); }
.nav__lien.est-actif::after { transform: scaleX(1); }

.entete__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.entete .btn { --btn-py: 0.7rem; --btn-px: 1.15rem; }

/* --- Sélecteur de langue ------------------------------------------------- */

.langues { position: relative; }

.langues__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 1px solid rgba(245, 243, 239, 0.2);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--t-rapide), border-color var(--t-rapide);
}
.langues__bouton:hover { color: var(--blanc); border-color: var(--or); }
.langues__chevron {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-rapide);
}
.langues__bouton[aria-expanded='true'] .langues__chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.langues__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9.5rem;
  padding: 0.35rem;
  background: var(--noir-3);
  border: 1px solid rgba(199, 166, 109, 0.2);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-rapide), transform var(--t-rapide), visibility var(--t-rapide);
}
.langues__menu.est-ouvert {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.langues__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: none;
  border: 0;
  border-radius: 3px;
  font-size: var(--fs-small);
  color: var(--gris);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-rapide), color var(--t-rapide);
}
.langues__option:hover { background: rgba(199, 166, 109, 0.1); color: var(--blanc); }
.langues__option[aria-current='true'] { color: var(--or); }
.langues__option span:last-child {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  opacity: 0.65;
}

/* --- Menu mobile --------------------------------------------------------- */

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 20px; height: 1.5px;
  background: var(--blanc);
  transition: transform var(--t-moyen), opacity var(--t-rapide);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20.5px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 979px) {
  /* Le bouton de menu ferme la barre à droite ; c'est le groupe d'actions
     (sélecteur de langue) qui est poussé vers lui. */
  .burger { display: block; margin-left: 0.15rem; }
  .entete__actions { margin-left: auto; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    background: rgba(10, 10, 10, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 2.5rem var(--pad-inline) 3rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-moyen), transform var(--t-moyen), visibility var(--t-moyen);
  }
  .nav.est-ouvert { opacity: 1; visibility: visible; transform: none; }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__lien {
    display: block;
    padding-block: 1.15rem;
    font-family: var(--font-titre);
    font-size: 1.6rem;
    color: var(--blanc);
    border-bottom: 1px solid rgba(245, 243, 239, 0.09);
  }
  .nav__lien::after { display: none; }
  .nav__lien.est-actif { color: var(--or); }

  .nav__cta-mobile { margin-top: 2rem; }
  .entete__actions .btn { display: none; }
}

@media (min-width: 980px) {
  .nav__cta-mobile { display: none; }
}

/* ==========================================================================
   06. HERO
   ========================================================================== */

/* Fond en noir pur : le visuel du hero est détouré sur (0,0,0) et doit se
   fondre sans aucune arête visible. Le dégradé de bas de section assure la
   jonction vers --noir pour la suite de la page. */
.hero {
  position: relative;
  background: var(--void);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4.5rem));
  padding-bottom: clamp(3rem, 7vh, 6rem);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--noir));
  pointer-events: none;
}

/* Halo or très diffus derrière le visuel : donne de la profondeur au noir. */
.hero::before {
  content: '';
  position: absolute;
  top: 22%; right: -10%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(199, 166, 109, 0.11), transparent 66%);
  pointer-events: none;
}

.hero__grille {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grille {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

.hero__titre {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
/* Fin du titre en italique or : c'est la chute de la phrase, « l'établi »,
   qui porte le positionnement. L'italique de Playfair Display est bien
   chargée (fonts/playfair-display-latin-italic.woff2) ; sans elle, le
   navigateur pencherait le romain, ce qui se voit immédiatement à cette
   taille sur une Didone à fort contraste. */
.hero__titre .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--or);
}

.hero__sous-titre {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--gris);
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.hero__actions .btn--or { --btn-px: 1.6rem; text-align: left; }

@media (max-width: 479px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* --- Visuel et animation filaire -> rendu -------------------------------- */

.hero__visuel {
  position: relative;
  aspect-ratio: 3 / 2;
}
.hero__visuel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Couche 1 (dessous) : le rendu photoréaliste, chargé en priorité — c'est lui
   le LCP. Couche 2 (dessus) : le filaire, qui se dissout pour le révéler.
   Cet ordre garantit que si le filaire ne charge pas, on voit quand même le
   rendu final : l'animation est un bonus, jamais un prérequis. */
.hero__rendu { z-index: 1; }

.hero__filaire {
  z-index: 2;
  opacity: 1;
}
.hero__visuel.est-lance .hero__filaire {
  animation: filaire-dissout 2100ms var(--ease-out) 350ms forwards;
}
@keyframes filaire-dissout {
  0%   { opacity: 1; transform: scale(1.012); }
  55%  { opacity: 1; transform: scale(1.006); }
  100% { opacity: 0; transform: scale(1); }
}

/* Ligne de scan : balaie le visuel une fois, en phase avec la dissolution.
   Elle matérialise le passage du fichier au rendu. */
.hero__scan {
  position: absolute;
  top: 0; bottom: 0;
  width: 26%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(199, 166, 109, 0.05) 60%,
    rgba(226, 199, 149, 0.55) 88%,
    rgba(255, 244, 225, 0.9) 96%,
    transparent 100%
  );
  mix-blend-mode: screen;
}
.hero__visuel.est-lance .hero__scan {
  animation: scan-balaie 2100ms var(--ease-out) 350ms forwards;
}
@keyframes scan-balaie {
  0%   { transform: translateX(-110%); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(420%); opacity: 0; }
}

/* Indicateur de défilement. */
.hero__scroll {
  display: none;
  position: absolute;
  bottom: 1.75rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-2);
  transition: color var(--t-rapide);
}
.hero__scroll:hover { color: var(--or); }
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--or), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}
@media (min-width: 980px) and (min-height: 720px) {
  .hero__scroll { display: flex; }
}

/* ==========================================================================
   07. SECTION CONFIANCE
   ========================================================================== */

.confiance__grille {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
}

.carte-atout {
  position: relative;
  padding: clamp(1.75rem, 2.4vw, 2.35rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-moyen), background var(--t-moyen), transform var(--t-moyen);
}
.carte-atout:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(199, 166, 109, 0.36);
  transform: translateY(-4px);
}
/* Liseré or qui s'allume sur le bord supérieur au survol. */
.carte-atout::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: 0;
  transition: opacity var(--t-moyen);
}
.carte-atout:hover::before { opacity: 1; }

.carte-atout__num {
  font-family: var(--font-titre);
  font-size: 0.95rem;
  color: var(--or);
  letter-spacing: 0.1em;
  margin-bottom: 1.1rem;
}
.carte-atout__titre {
  font-size: var(--fs-h3);
  margin-bottom: 0.75rem;
}
.carte-atout__texte {
  color: var(--gris);
  font-size: 0.97rem;
  line-height: 1.62;
}

/* ==========================================================================
   08. SECTION PROCESS — frise 5 étapes
   ========================================================================== */

.process__frise {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  counter-reset: etape;
}
@media (min-width: 760px) {
  .process__frise { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  /* 5 colonnes : la frise se lit d'un seul regard, comme une chaîne. */
  .process__frise { grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 1.5vw, 1.5rem); }
}

.etape {
  position: relative;
  padding-top: 2.6rem;
}
/* Le trait horizontal qui relie les étapes entre elles. */
.etape::before {
  content: '';
  position: absolute;
  top: 11px; left: 0; right: 0;
  height: 1px;
  background: rgba(199, 166, 109, 0.24);
}
.etape:last-child::before { right: 50%; }
.etape:first-child::before { left: 0; }
@media (max-width: 1079px) {
  .etape::before { display: none; }
  .etape { padding-top: 0; padding-left: 3.25rem; }
}

.etape__pastille {
  position: absolute;
  top: 0; left: 0;
  width: 23px; height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--noir);
  border: 1px solid var(--or);
  color: var(--or);
  font-family: var(--font-titre);
  font-size: 0.72rem;
  line-height: 1;
  z-index: 1;
}
@media (max-width: 1079px) {
  .etape__pastille { top: 3px; width: 30px; height: 30px; font-size: 0.85rem; }
}

.etape__titre {
  font-size: 1.12rem;
  line-height: 1.28;
  margin-bottom: 0.6rem;
}
.etape__texte {
  color: var(--gris);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ==========================================================================
   09. SECTION SERVICES
   ========================================================================== */

/* Colonnes explicites plutôt qu'auto-fit : les quatre offres forment une
   séquence numérotée 01 -> 04 qui doit se lire d'un seul tenant. En auto-fit,
   la largeur disponible donnait trois colonnes et laissait la quatrième carte
   seule sur une ligne, ce qui casse la lecture de la chaîne de production. */
.services__grille {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .services__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .services__grille { grid-template-columns: repeat(4, 1fr); }
}

.service {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-moyen), background var(--t-moyen), transform var(--t-moyen);
}
.service:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(199, 166, 109, 0.36);
  transform: translateY(-4px);
}

/* La plaque studio occupe le haut de la carte, à bords francs sur trois côtés.
   Cadre CARRÉ, comme les fichiers sources : un cadre 4/3 obligeait object-fit
   à rogner le haut et le bas, et comme les quatre photos n'ont ni la même
   ombre portée ni exactement le même cadrage, les bagues paraissaient flotter
   à des hauteurs différentes d'une carte à l'autre. En 1:1, aucun rognage :
   chaque visuel est montré tel qu'il a été photographié. */
.service__visuel {
  border: 0;
  border-bottom: 1px solid rgba(199, 166, 109, 0.22);
  border-radius: 0;
  aspect-ratio: 1;
}
.service__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.service:hover .service__visuel img { transform: scale(1.04); }

.service__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 2vw, 1.9rem);
}

.service__entete {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
}
.service__num {
  font-family: var(--font-titre);
  font-size: 0.95rem;
  color: var(--or);
  letter-spacing: 0.08em;
  flex: none;
}
.service__titre { font-size: var(--fs-h3); }

.service__sous-titre {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-2);
  margin-bottom: 1.1rem;
}

.service__desc {
  color: var(--gris);
  font-size: 0.94rem;
  line-height: 1.62;
  margin-bottom: 1.1rem;
}

.service__materiaux {
  font-size: 0.83rem;
  color: var(--or);
  line-height: 1.55;
  margin-bottom: 1.1rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(199, 166, 109, 0.4);
}

/* Le pied de carte est poussé en bas pour aligner les prix entre les cartes.
   Empilé plutôt que réparti sur une ligne : les libellés de livraison sont
   devenus des phrases complètes (« Livraison : sous 2 semaines après création
   du fichier 3D »), qui se seraient repliées de façon désordonnée face au
   prix dans une disposition en deux colonnes. */
.service__pied {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(245, 243, 239, 0.09);
  display: grid;
  gap: 0.3rem;
}
.service__prix {
  font-family: var(--font-titre);
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--or);
}
/* Précision tarifaire secondaire, en retrait sous le prix. */
.service__prix-note {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gris);
}
.service__delai {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--gris-2);
}

/* --- Encart de mise en avant --------------------------------------------- */

.encart {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.9rem, 3.5vw, 3.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(199, 166, 109, 0.28);
  background:
    linear-gradient(135deg, rgba(199, 166, 109, 0.1), rgba(199, 166, 109, 0.02) 55%),
    var(--noir-2);
  text-align: center;
}
.encart__titre {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  color: var(--or);
  margin-bottom: 0.85rem;
}
.encart__texte {
  color: var(--blanc);
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 58ch;
  margin-inline: auto;
}

/* ==========================================================================
   10. SECTION PORTFOLIO
   ========================================================================== */

.portfolio__paires {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
@media (min-width: 1080px) {
  .portfolio__paires { grid-template-columns: repeat(3, 1fr); }
}

/* Séparateur entre les comparateurs avant/après et la galerie libre. */
.separateur-galerie { margin-block: clamp(3rem, 6vw, 5rem); }

/* L'introduction de la galerie n'est pas bornée à la largeur de lecture :
   elle sert de légende à une mosaïque pleine largeur. */
.galerie__intro { max-width: none; }
.galerie__intro .chapo { margin-top: 0; }

.paire__legende {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gris);
}
.paire__legende strong {
  display: block;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--blanc);
  margin-bottom: 0.15rem;
}

/* --- Comparateur avant / après -------------------------------------------
   Un <input type="range"> transparent est superposé au visuel : il apporte
   gratuitement le clavier, le tactile et la sémantique ARIA, là où un
   glisser-déposer maison devrait tout réimplémenter. Le curseur visible est
   un simple div décoratif piloté par la variable --pos. */
.comparateur {
  position: relative;
  aspect-ratio: 1;
  touch-action: pan-y;
  isolation: isolate;
  --pos: 50%;
}
.comparateur img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* L'image « avant » est découpée à la position du curseur. Si clip-path
   n'est pas supporté, elle recouvre simplement l'après : dégradation propre. */
.comparateur__avant {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.comparateur__etiquette {
  position: absolute;
  bottom: 0.75rem;
  z-index: 4;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  background: rgba(10, 10, 10, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  pointer-events: none;
  transition: opacity var(--t-rapide);
}
.comparateur__etiquette--avant { left: 0.75rem; }
.comparateur__etiquette--apres { right: 0.75rem; }

/* Poignée : la barre or masque la jonction entre les deux visuels, dont les
   fonds studio ne sont pas rigoureusement identiques (blanc pur côté 3D,
   gris très clair côté bijou fini). */
.comparateur__poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--or);
  box-shadow: 0 0 14px rgba(199, 166, 109, 0.65);
  pointer-events: none;
}
.comparateur__poignee::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.72);
  border: 1.5px solid var(--or);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Deux chevrons dessinés en CSS au centre de la poignée. */
.comparateur__poignee::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 9px;
  transform: translate(-50%, -50%);
  z-index: 1;
  background:
    linear-gradient(45deg, transparent 48%, var(--or) 48% 60%, transparent 60%) left / 50% 100% no-repeat,
    linear-gradient(-45deg, transparent 48%, var(--or) 48% 60%, transparent 60%) right / 50% 100% no-repeat;
}

.comparateur__champ {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* Le pouce natif est élargi pour offrir une cible tactile confortable
   (44 px, seuil WCAG) tout en restant invisible. */
.comparateur__champ::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px; height: 46px;
  cursor: ew-resize;
}
.comparateur__champ::-moz-range-thumb {
  width: 46px; height: 46px;
  border: 0;
  cursor: ew-resize;
}
.comparateur__champ:focus-visible { outline-offset: -3px; }

.comparateur__aide {
  position: absolute;
  top: 0.75rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--t-moyen);
}
/* L'invite disparaît dès la première manipulation. */
.comparateur.est-manipule .comparateur__aide { opacity: 0; }

/* --- Galerie libre (46 pièces) -------------------------------------------
   Grille régulière carrée : toutes les sources sont au format 1:1, une
   mosaïque façon planche-contact met en valeur la variété des styles sans
   introduire de hiérarchie ni de catégorie. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr));
  gap: clamp(0.5rem, 1vw, 0.85rem);
}
/* 175px comme minimum donne six colonnes sur grand écran. Avec 46 pièces,
   la dernière ligne en compte quatre : nettement plus équilibré que la pièce
   isolée qu'entraînait un minimum de 200px (cinq colonnes). */
@media (min-width: 640px) {
  .galerie { grid-template-columns: repeat(auto-fill, minmax(min(175px, 30%), 1fr)); }
}

.galerie__item {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(245, 243, 239, 0.08);
  border-radius: var(--radius);
  background: var(--void);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--t-moyen), transform var(--t-moyen);
}
.galerie__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out), opacity var(--t-moyen);
}
.galerie__item:hover {
  border-color: rgba(199, 166, 109, 0.55);
  transform: translateY(-3px);
  z-index: 1;
}
.galerie__item:hover img { transform: scale(1.07); }

/* Nom de la pièce révélé au survol, sur un voile dégradé. */
.galerie__nom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.25rem 0.7rem 0.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), transparent);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--blanc);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-moyen), transform var(--t-moyen);
  pointer-events: none;
}
.galerie__item:hover .galerie__nom,
.galerie__item:focus-visible .galerie__nom {
  opacity: 1;
  transform: none;
}

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

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(0, 0, 0, 0.97);
  opacity: 0;
  transition: opacity var(--t-moyen);
}
.lightbox.est-ouverte { opacity: 1; }

/* Indispensable : la règle `display: grid` ci-dessus est plus spécifique que
   le `[hidden] { display: none }` de la feuille par défaut du navigateur.
   Sans cette ligne, l'attribut hidden n'aurait aucun effet.

   Le masquage repose sur ce seul attribut, volontairement : une déclaration
   `visibility: hidden` rendrait le bouton de fermeture non focusable au moment
   de l'ouverture, et le focus programmatique serait silencieusement ignoré.
   `opacity: 0`, lui, n'empêche pas le focus — d'où le choix de l'opacité seule
   pour le fondu. */
.lightbox[hidden] { display: none; }
.cookies[hidden] { display: none; }

.lightbox__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad-inline);
}
.lightbox__compteur {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  color: var(--gris-2);
  font-variant-numeric: tabular-nums;
}

.lightbox__scene {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(0.5rem, 4vw, 4.5rem);
  min-height: 0;
}
/* `display: contents` fait de l'<img> l'élément de grille direct : sans cela,
   c'est le <picture> qui occupe la cellule et le max-height de l'image se
   calculerait par rapport à lui, pas par rapport à la scène. */
.lightbox__scene picture { display: contents; }

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.lightbox__image.est-chargee { opacity: 1; }

.lightbox__pied {
  padding: 1rem var(--pad-inline) 1.75rem;
  text-align: center;
  font-family: var(--font-titre);
  font-size: 1.05rem;
  color: var(--blanc);
  min-height: 3.5rem;
}

.lightbox__bouton {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(245, 243, 239, 0.18);
  border-radius: 50%;
  color: var(--blanc);
  cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide);
}
.lightbox__bouton:hover {
  background: rgba(199, 166, 109, 0.16);
  border-color: var(--or);
  color: var(--or);
}
.lightbox__bouton svg { width: 18px; height: 18px; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.lightbox__nav--prec { left: clamp(0.35rem, 1.5vw, 1.25rem); }
.lightbox__nav--suiv { right: clamp(0.35rem, 1.5vw, 1.25rem); }

/* ==========================================================================
   11. SECTION À PROPOS
   ========================================================================== */

.apropos__grille {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .apropos__grille { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
}

.apropos__portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.apropos__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Voile chaud très léger : rattache la photo à la palette or de la page. */
.apropos__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.55), transparent 45%),
              linear-gradient(120deg, rgba(199, 166, 109, 0.1), transparent 60%);
  pointer-events: none;
}

.apropos__texte > p + p { margin-top: 1.15rem; }
.apropos__texte p { color: var(--gris); }
/* La première phrase porte l'accroche : on la traite en exergue. */
.apropos__texte .exergue {
  font-family: var(--font-titre);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.32;
  color: var(--blanc);
  margin-bottom: 1.5rem;
}

.apropos__signature {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(199, 166, 109, 0.28);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--or);
  line-height: 1.6;
}

/* ==========================================================================
   12. SECTION CONTACT
   ========================================================================== */

.contact__grille {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contact__grille { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
}

.contact__encart {
  margin-bottom: 2rem;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--or);
  background: linear-gradient(90deg, rgba(199, 166, 109, 0.1), transparent);
  font-family: var(--font-titre);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--blanc);
}

/* --- Formulaire ---------------------------------------------------------- */

.formulaire { display: grid; gap: 1.15rem; }

.champs-duo {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 560px) {
  .champs-duo { grid-template-columns: 1fr 1fr; }
}

.champ { display: grid; gap: 0.45rem; }

.champ__label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--gris);
}
.champ__label .facultatif {
  font-size: 0.72rem;
  color: var(--gris-2);
  letter-spacing: 0.04em;
}
.champ__label .requis { color: var(--or); }

.champ input[type='text'],
.champ input[type='email'],
.champ input[type='tel'],
.champ textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(245, 243, 239, 0.16);
  border-radius: var(--radius);
  color: var(--blanc);
  font-size: 0.97rem;
  transition: border-color var(--t-rapide), background var(--t-rapide);
}
.champ textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }

.champ input::placeholder,
.champ textarea::placeholder { color: var(--gris-2); }

.champ input:hover,
.champ textarea:hover { border-color: rgba(245, 243, 239, 0.3); }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--or);
  background: rgba(199, 166, 109, 0.05);
  box-shadow: 0 0 0 3px rgba(199, 166, 109, 0.14);
}
/* Champ en erreur : la couleur n'est jamais le seul signal, un message
   texte est systématiquement affiché sous le champ. */
.champ.est-invalide input,
.champ.est-invalide textarea { border-color: #d98b7a; }

.champ__erreur {
  font-size: 0.8rem;
  color: #e5a091;
  min-height: 0;
}
.champ__erreur:empty { display: none; }

/* --- Champ fichier personnalisé ------------------------------------------ */

.champ-fichier input[type='file'] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.champ-fichier__zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(245, 243, 239, 0.22);
  border-radius: var(--radius);
  transition: border-color var(--t-rapide), background var(--t-rapide);
}
.champ-fichier__zone:hover,
.champ-fichier input[type='file']:focus-visible + .champ-fichier__zone {
  border-color: var(--or);
  background: rgba(199, 166, 109, 0.05);
}
.champ-fichier__zone.est-survolee {
  border-color: var(--or);
  border-style: solid;
  background: rgba(199, 166, 109, 0.09);
}
.champ-fichier__declencheur {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(245, 243, 239, 0.28);
  border-radius: 3px;
  background: none;
  font-size: 0.82rem;
  color: var(--blanc);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-rapide), color var(--t-rapide);
}
.champ-fichier__declencheur:hover { border-color: var(--or); color: var(--or); }
.champ-fichier__nom {
  flex: 1;
  min-width: 8rem;
  font-size: 0.85rem;
  color: var(--gris-2);
  word-break: break-all;
}
.champ-fichier__nom.est-rempli { color: var(--blanc); }
.champ-fichier__retirer {
  background: none;
  border: 0;
  color: var(--gris);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  transition: color var(--t-rapide);
}
.champ-fichier__retirer:hover { color: var(--or); }
.champ__aide {
  font-size: 0.76rem;
  color: var(--gris-2);
}

/* Barre de progression de l'envoi — un fichier de 100 Mo prend du temps,
   l'utilisateur doit voir qu'il se passe quelque chose. */
.formulaire__progression {
  height: 2px;
  background: rgba(245, 243, 239, 0.12);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}
.formulaire.est-en-envoi .formulaire__progression { display: block; }
.formulaire__progression i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--or);
  transition: width 220ms linear;
}

/* --- Consentement -------------------------------------------------------- */

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--gris);
}
.consentement input[type='checkbox'] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--or);
  cursor: pointer;
}
.consentement a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }

/* --- Retour d'envoi ------------------------------------------------------ */

.formulaire__retour {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.55;
  display: none;
}
.formulaire__retour.est-visible { display: block; }
.formulaire__retour--succes {
  background: rgba(199, 166, 109, 0.12);
  border: 1px solid rgba(199, 166, 109, 0.45);
  color: var(--blanc);
}
.formulaire__retour--erreur {
  background: rgba(217, 139, 122, 0.1);
  border: 1px solid rgba(217, 139, 122, 0.45);
  color: #f0c4ba;
}

.formulaire button[type='submit'][disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* Pot de miel : invisible pour l'humain, atteignable par les robots.
   Volontairement pas display:none, que certains bots détectent. */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Coordonnées et QR ---------------------------------------------------- */

.coordonnees {
  padding: clamp(1.5rem, 2.5vw, 2.15rem);
  border-radius: var(--radius-lg);
}
.coordonnees__liste { display: grid; gap: 1.05rem; }
.coordonnees__ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.94rem;
}
.coordonnees__ligne svg {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 0.24rem;
  color: var(--or);
}
.coordonnees__ligne a { transition: color var(--t-rapide); }
.coordonnees__ligne a:hover { color: var(--or); }

.coordonnees__livraison {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 243, 239, 0.1);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gris-2);
}

.qr {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 243, 239, 0.1);
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.qr img {
  width: 104px; height: 104px;
  flex: none;
  border-radius: var(--radius);
  background: var(--studio);
}
.qr figcaption {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gris);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.pied {
  border-top: 1px solid rgba(245, 243, 239, 0.1);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  background: var(--void);
}

.pied__haut {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 760px) {
  .pied__haut { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

.pied__logo img {
  height: 58px;
  width: auto;
  filter: brightness(0) invert(0.96);
  margin-bottom: 1.15rem;
}
.pied__baseline {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gris);
  max-width: 34ch;
}

.pied__titre {
  font-family: var(--font-corps);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.15rem;
}

.pied__liste { display: grid; gap: 0.65rem; }
/* Le bouton « Gérer les cookies » doit se fondre parmi les liens : sans cette
   remise à zéro, il conserve l'habillage natif du navigateur (fond gris clair,
   bordure en relief), incongru sur un footer noir. */
.pied__liste a,
.pied__liste span,
.pied__liste button {
  font-size: 0.87rem;
  color: var(--gris);
  transition: color var(--t-rapide);
}
.pied__liste button {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.pied__liste a:hover,
.pied__liste button:hover { color: var(--or); }

.pied__bas {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 243, 239, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.79rem;
  color: var(--gris-2);
}

/* Sélecteur de langue secondaire, en texte simple. */
.pied__langues {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pied__langues button {
  background: none;
  border: 0;
  padding: 0.25rem 0.4rem;
  font-size: 0.79rem;
  letter-spacing: 0.1em;
  color: var(--gris-2);
  cursor: pointer;
  transition: color var(--t-rapide);
}
.pied__langues button:hover { color: var(--blanc); }
.pied__langues button[aria-current='true'] { color: var(--or); }
.pied__langues i { color: rgba(245, 243, 239, 0.2); font-style: normal; }

/* ==========================================================================
   14. BANDEAU COOKIES
   ========================================================================== */

.cookies {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  transform: translate(-50%, calc(100% + 2rem));
  z-index: 150;
  width: min(680px, calc(100vw - 2 * clamp(0.75rem, 3vw, 1.5rem)));
  padding: clamp(1.15rem, 2vw, 1.6rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(199, 166, 109, 0.3);
  background: rgba(17, 17, 17, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7);
  transition: transform 520ms var(--ease-out);
}
.cookies.est-visible { transform: translate(-50%, 0); }

.cookies__titre {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.cookies__texte {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gris);
  margin-bottom: 1.15rem;
}
.cookies__texte a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.cookies__actions .btn { --btn-py: 0.65rem; --btn-px: 1.35rem; flex: 1 1 auto; }

/* ==========================================================================
   15. PAGES LÉGALES
   ========================================================================== */

.page-legale {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: var(--pad-section);
  min-height: 70vh;
}
.page-legale__contenu { max-width: 68ch; }
.page-legale__titre {
  font-size: var(--fs-h2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bloc-legal { margin-bottom: 2rem; }
.bloc-legal__label {
  font-family: var(--font-corps);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.5rem;
}
.bloc-legal__valeur {
  color: var(--gris);
  line-height: 1.7;
}
.bloc-legal__valeur a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.bloc-legal__valeur a:hover { color: var(--or); }

.bloc-legal__action { margin-top: 1.25rem; }

/* Encadré signalant que le contenu doit encore être validé juridiquement. */
.avis-validation {
  margin-top: 2.5rem;
  padding: 1.15rem 1.35rem;
  border: 1px dashed rgba(199, 166, 109, 0.45);
  border-radius: var(--radius);
  background: rgba(199, 166, 109, 0.05);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--or);
}

.retour-accueil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: var(--gris);
  transition: color var(--t-rapide);
}
.retour-accueil:hover { color: var(--or); }

/* ==========================================================================
   16. CIBLES TACTILES, MOUVEMENT RÉDUIT ET IMPRESSION
   ========================================================================== */

/* Sur écran tactile uniquement, les commandes réellement « tapées » sont
   portées à 44 px. Le seuil WCAG AA (2.5.8) est de 24 px et était déjà
   respecté ; il s'agit ici de confort de visée au pouce, sans alourdir la
   mise en page au pointeur fin. Les liens en ligne dans un paragraphe sont
   exclus, comme le prévoit l'exception du critère. */
@media (pointer: coarse) {
  .champ-fichier__declencheur { min-height: 44px; }
  .champ-fichier__retirer { min-width: 44px; min-height: 44px; }
  .pied__langues button { min-width: 40px; min-height: 40px; }
  .pied__liste button { min-height: 40px; }
}

/* ==========================================================================
   MOUVEMENT RÉDUIT ET IMPRESSION
   ========================================================================== */

/* Respect strict de la préférence système : plus aucune animation ni
   transition, et les éléments à révéler sont affichés d'emblée. Le filaire
   du hero est masqué pour laisser directement le rendu final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .apparition { opacity: 1; transform: none; }
  .hero__filaire, .hero__scan { display: none; }
  .hero__scroll i { animation: none; opacity: 0.6; }
}

@media print {
  .entete, .cookies, .lightbox, .hero__scan, .hero__filaire,
  .hero__scroll, .burger, .langues, .formulaire { display: none !important; }

  body { background: #fff; color: #000; }
  .section, .hero, .pied { background: #fff !important; padding-block: 1.5rem; }
  h1, h2, h3 { color: #000; }
  p, .chapo, li { color: #222; }
  a { color: #000; text-decoration: underline; }
  .galerie { grid-template-columns: repeat(6, 1fr); }
}