/* Tendances Gourmandes d'Alex · V3 « Maison parisienne » : vitrine, rayons, mouvement lent et doré.
   Mouvement : seulement si <html> a la classe « anim » (posée par script.js : JS actif, sans
   prefers-reduced-motion, sans « Réduire les animations »). Sans JS, tout le contenu est visible et immobile. */

@view-transition { navigation: auto; }

:root {
  --noir: #0c0a08;
  --noir-doux: #15110d;
  --or: #c9a24a;
  --or-clair: #f3dc8f;
  --or-fonce: #7d5e1a;           /* petit texte doré sur crème : 5,3:1 */
  --laiton: #b08d57;
  --creme: #f6efe2;
  --brun: #1d1712;
  --creme-doux: #d8ccb4;         /* texte secondaire sur noir */
  --erreur: #ffb0a3;
  --filet: rgba(201, 162, 74, .55);
  --script: 'Parisienne', 'Brush Script MT', cursive;
  --texte: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gouttiere: 1.25rem;
  --large: 74rem;
  --or-metal: linear-gradient(100deg, #8f6d2a 0%, #c9a24a 20%, #f7e3a1 38%, #c9a24a 52%, #8f6d2a 72%, #c9a24a 90%, #8f6d2a 100%);
  --or-metal-clair: linear-gradient(100deg, #6b5017 0%, #8a6a24 22%, #a8832f 42%, #8a6a24 62%, #6b5017 82%, #8a6a24 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--texte);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.creme :focus-visible, .creme a:focus-visible { outline-color: var(--or-fonce); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 300;
  background: var(--or); color: var(--noir); padding: .6rem 1rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }

/* Sections et couleurs */
section, .site-foot { padding: 4.4rem var(--gouttiere); }
.noir { background: var(--noir); color: var(--creme); }
.creme {
  background-color: var(--creme);
  background-image: url("../img/grain-papier.png");
  color: var(--brun);
}

/* Titres : Parisienne, or brillant métallique qui glisse très lentement */
.titre-script {
  font-family: var(--texte);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.6rem, 9vw, 8.6rem);
  line-height: 1.04;
  letter-spacing: .012em;
  color: var(--or);
  /* marge intérieure : les lettres penchées restent dans la zone dorée (background-clip) */
  padding: .06em .1em .14em;
  margin-left: -.06em;
  margin-right: -.06em;
  /* jamais de coupure à l'intérieur d'un mot ni de trait d'union : un mot trop long déborde, il ne se coupe pas */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .titre-script {
    background-image: var(--or-metal);
    background-size: 280% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .creme .titre-script { background-image: var(--or-metal-clair); }
}

.surtitre {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--or);
}
.surtitre--fonce { color: var(--or-fonce); }
.cat {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .86rem;
  line-height: 1.5;
  margin-bottom: .5rem;
  color: inherit;
}
.nom-script {
  font-family: var(--script);
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 400;
}
.chiffre {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .3em;
  color: var(--or);
  margin-bottom: .6rem;
}
.creme .chiffre { color: var(--or-fonce); }

.entete { max-width: 44rem; margin-bottom: 2.7rem; }
.entete .titre-script { margin-top: .6rem; }
.chapeau { margin-top: 1.3rem; font-size: clamp(1.2rem, 2vw, 1.4rem); max-width: 38rem; }
.intro-texte { margin-top: 1.2rem; font-size: 1.2rem; max-width: 36rem; }
.note { margin-top: 2.5rem; }
.note-haute { margin-top: 1.5rem; font-size: 1.1rem; color: var(--creme-doux); max-width: 34rem; }
.lead { max-width: 36rem; color: var(--creme-doux); font-size: clamp(1.2rem, 2vw, 1.4rem); }

/* Liens : soulignés qui se dessinent */
.lien-or {
  font-weight: 600; font-size: .86rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-fonce); text-decoration: none; padding-bottom: .3rem;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 36% 1px;
  transition: background-size .8s var(--ease);
}
.lien-or:hover, .lien-or:focus-visible { background-size: 100% 1px; }
.noir .lien-or { color: var(--or); }

/* Boutons : deux boutons égaux, contour or fin, capitales */
.actions { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 2.2rem; }
.btn {
  --fond: var(--or);
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-width: 15rem; min-height: 3.2rem; padding: .85rem 1.8rem;
  border: 1px solid var(--or);
  font-weight: 600; font-size: .86rem; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  background: linear-gradient(var(--fond), var(--fond)) no-repeat 0 0 / 0% 100%;
  transition: background-size .8s var(--ease), color .6s var(--ease), transform .5s var(--ease);
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; color: var(--noir); }
.btn--primary { background: var(--or); color: var(--noir); }
.btn--primary:hover { background: var(--or-clair); border-color: var(--or-clair); }
.creme .btn { --fond: var(--or-fonce); color: var(--brun); border-color: var(--or-fonce); }
.creme .btn:hover { color: var(--creme); }
.creme .btn--primary { background: var(--or-fonce); color: var(--creme); }
.creme .btn--primary:hover { background: var(--brun); border-color: var(--brun); }
.magnet { will-change: auto; }

/* Navigation : barre fine, logo centré */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 10, 8, .94);
  border-bottom: 1px solid var(--filet);
}
.head__inner {
  display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center;
  gap: .3rem; padding: .7rem var(--gouttiere) .8rem;
}
.brand {
  grid-column: 1; grid-row: 1;
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .45rem;
  min-height: 44px; text-decoration: none; color: var(--or);
}
.brand__nom { font-weight: 600; font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--or); }
.brand__sub { font-family: var(--script); font-size: 1.9rem; line-height: 1; color: var(--or); }
.logo-entete { display: block; width: auto; height: 30px; max-width: 78vw; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: .35rem;
  min-height: 48px; min-width: 48px; padding: 0;
  background: none; border: 0; color: var(--or); cursor: pointer;
}
.nav-toggle__barres, .nav-toggle__barres::before, .nav-toggle__barres::after {
  display: block; width: 22px; height: 1px; background: var(--or); position: relative;
}
.nav-toggle__barres::before, .nav-toggle__barres::after { content: ''; position: absolute; left: 0; }
.nav-toggle__barres::before { top: -6px; }
.nav-toggle__barres::after { top: 6px; }
.nav-toggle__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-nav { grid-column: 1; grid-row: 2; width: 100%; }
.nav-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.2rem;
  font-weight: 600; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
}
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--creme-doux); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .6s var(--ease), color .4s var(--ease);
}
.nav-list a:hover, .nav-list a:focus-visible, .nav-list a[aria-current="page"] { color: var(--or); background-size: 100% 1px; }

/* Menu mobile : replié seulement si le script est actif */
.js .head__inner { grid-template-columns: 3rem 1fr 3rem; }
.js .nav-toggle { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; position: relative; z-index: 70; }
.js .brand { grid-column: 2; grid-row: 1; }
.js .site-nav {
  display: none; position: fixed; inset: 0; z-index: 65;
  background: var(--noir); padding: 6rem 2rem 3rem; overflow-y: auto;
  grid-column: auto; grid-row: auto;
}
.js .site-nav.is-open { display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; }
.js .nav-list { flex-direction: column; align-items: center; gap: 1rem; }
.js .nav-list a { font-size: 1.6rem; letter-spacing: .16em; min-height: 52px; text-transform: uppercase; font-weight: 600; }

/* Mobile : barre du haut quasi pleine (noir à 94 %) et floutée, pour que le contenu qui défile dessous reste
   net et ne se lise pas à travers. Le flou est porté par un pseudo-élément : un backdrop-filter sur l'en-tête
   lui-même casserait le menu plein écran (position fixe). */
@media (max-width: 899.98px) {
  .site-head::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}

/* Premier écran V5 : un produit héros posé (ombre de contact), titre éditorial, poudre dorée en CSS seul */
.vitrine {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 4.7rem); min-height: calc(100svh - 4.7rem);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--noir); color: var(--creme);
}
.vitrine__fond { position: absolute; inset: 0; z-index: 0; }
.vitrine__fond picture, .vitrine__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitrine__fond::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 62% 44%, rgba(12, 10, 8, .15), rgba(12, 10, 8, .92) 80%),
    linear-gradient(180deg, rgba(12, 10, 8, .3), rgba(12, 10, 8, .75));
}
.vitrine__halo {
  position: absolute; z-index: 1; left: 50%; top: 40%; width: 118vmin; height: 118vmin;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(232, 190, 96, .34) 0%, rgba(201, 162, 74, .12) 34%, transparent 64%);
}
/* Hauteur fixe (un écran) : la poudre ne suit pas les changements de hauteur de la section épinglée (aucun CLS). */
.vitrine__poudre { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 1; pointer-events: none; }
.vitrine__poudre i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--or-clair); box-shadow: 0 0 8px rgba(243, 220, 143, .75); opacity: .55;
}
.vitrine__poudre i:nth-child(1) { left: 12%; top: 22%; }
.vitrine__poudre i:nth-child(2) { left: 30%; top: 70%; width: 3px; height: 3px; }
.vitrine__poudre i:nth-child(3) { left: 46%; top: 14%; width: 3px; height: 3px; }
.vitrine__poudre i:nth-child(4) { left: 58%; top: 84%; }
.vitrine__poudre i:nth-child(5) { left: 84%; top: 30%; width: 3px; height: 3px; }
.vitrine__poudre i:nth-child(6) { left: 90%; top: 66%; }
.vitrine__poudre i:nth-child(7) { left: 22%; top: 50%; width: 2px; height: 2px; }
.vitrine__poudre i:nth-child(8) { left: 70%; top: 8%; width: 2px; height: 2px; }
.anim .vitrine__poudre i { animation: poudre 16s ease-in-out infinite alternate; }
.anim .vitrine__poudre i:nth-child(even) { animation-duration: 21s; animation-delay: -6s; }
@keyframes poudre {
  from { transform: translate3d(0, 0, 0); opacity: .25; }
  to { transform: translate3d(10px, -18px, 0); opacity: .9; }
}

.vitrine__grille {
  position: relative; z-index: 2; width: 100%; margin: 0 auto;
  display: grid; gap: 1.6rem; align-items: center;
  padding: 4.2rem var(--gouttiere) 2.4rem;
}
.vitrine__titre { text-align: center; }
.vitrine__titre .surtitre { color: var(--or); }
.vitrine .titre-script { font-size: clamp(3.8rem, 13vw, 7rem); max-width: 11ch; margin: .6rem auto 1rem; }
.vitrine__sous { max-width: 31rem; margin: 0 auto; font-size: clamp(1.15rem, 2.4vw, 1.3rem); color: var(--creme-doux); }
.vitrine__produit { position: relative; isolation: isolate; order: -1; justify-self: center; width: min(72vw, 340px); margin: 0; }
.vitrine__produit img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .55));
}
.vitrine__ombre {
  position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -1%; height: 12%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(5px);
}
.vitrine__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: 1.6rem;
}
@media (min-width: 900px) {
  .vitrine__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem 3.5rem;
    max-width: var(--large); padding: 6rem 3rem 4rem;
  }
  .vitrine__titre { text-align: left; }
  .vitrine .titre-script { font-size: clamp(4.8rem, 6.3vw, 8.2rem); max-width: none; margin: .6rem 0 1.4rem; }
  .vitrine__sous { margin: 0; }
  .vitrine__actions { justify-content: flex-start; }
  .vitrine__produit { order: 0; justify-self: end; width: min(40vw, 600px); }
}

/* Bandeau de faits */
.bandeau {
  margin: 0; padding: 1.1rem var(--gouttiere);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem;
  font-weight: 600; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--or); background: var(--noir);
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  text-align: center;
}
.bandeau .sep { color: var(--creme-doux); }

/* Rayons d'une maison : un décor IA, un titre script, des cartes bijou */
.decore { position: relative; isolation: isolate; overflow: hidden; }
.decor { position: absolute; inset: 0; z-index: -1; }
.decor img { width: 100%; height: 100%; object-fit: cover; }
.decor::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 8, .84), rgba(12, 10, 8, .62) 45%, rgba(12, 10, 8, .9));
}
.rayon { padding: 5.6rem var(--gouttiere); background: var(--noir); }
.rayon .titre-script { font-size: clamp(3.6rem, 9vw, 8.6rem); }
.rayon__grille { display: grid; gap: 2.4rem; }
.rayon__entete { max-width: 36rem; }
.rayon__chapeau { margin-top: 1.1rem; font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--creme-doux); }
.rayon__lien { margin-top: 1.6rem; }

.bijoux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.bijou {
  position: relative; text-align: center;
  padding: 1.2rem .9rem 1.5rem;
  border: 1px solid var(--or);
  background: rgba(12, 10, 8, .62);
}
.bijou::before {
  content: ''; position: absolute; inset: .32rem;
  border: 1px solid rgba(201, 162, 74, .38); pointer-events: none;
}
.bijou__cadre { position: relative; }
.bijou__image, .bijou > img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .6));
}
.bijou .nom-script { margin-top: .9rem; font-size: clamp(2rem, 2.8vw, 2.5rem); color: var(--or); }
.bijou p { margin-top: .25rem; font-size: 1.1rem; color: var(--creme-doux); }
.bijou--texte .bijou__cadre { min-height: 9rem; display: flex; align-items: center; justify-content: center; }
.losange-or { display: block; width: .95rem; height: .95rem; background: var(--or); transform: rotate(45deg); }
.creme .bijou { background: var(--noir); }

/* Rayon en décalé, sur grand écran : titre à droite, cartes à gauche */
.rayon--decale .rayon__entete { order: 2; }

/* Savoir-faire, trois temps */
.temps { display: grid; gap: 2.4rem; }
.temps li { border-top: 1px solid var(--or-fonce); padding-top: 1.4rem; }
.temps p { margin-top: .5rem; max-width: 26rem; font-size: 1.15rem; }
.noir .temps li { border-top-color: var(--filet); }

/* Alexandre : bloc discret */
.signe { display: grid; gap: 2rem; align-items: center; padding-top: 3.6rem; padding-bottom: 3.6rem; }
.signe__photo { max-width: 13rem; justify-self: center; }
.signe__photo img {
  width: 100%; height: auto;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--or); padding: .4rem; background: var(--noir);
}
.signe__texte { max-width: 34rem; }
.citation {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35;
  padding-left: 1rem; border-left: 1px solid var(--or); margin-bottom: .9rem;
}
p.signature {
  font-family: var(--script); font-size: clamp(3.6rem, 10vw, 5.2rem); line-height: 1;
  color: var(--or); margin-top: 1rem;
}
.fondateur {
  font-weight: 600; font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--creme-doux); margin-top: .5rem;
}

/* Événements */
.pastilles { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.4rem; }
.pastilles li {
  border: 1px solid var(--or-fonce); padding: .5rem 1rem;
  font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brun);
}
.noir .pastilles li { border-color: var(--or); color: var(--creme); }

.formules { display: grid; gap: 2.2rem; }
.formules > div { border-left: 1px solid var(--or-fonce); padding-left: 1.2rem; }
.formules dt { color: var(--or-fonce); font-size: clamp(2.2rem, 4vw, 2.8rem); line-height: 1.1; }
.formules dd { margin-top: .2rem; font-size: 1.15rem; }

.stand { display: grid; gap: 2.4rem; align-items: center; margin-top: 4rem; }
.stand__photo { margin: 0; }
.stand__photo img { width: 100%; height: auto; border: 1px solid var(--or-fonce); padding: .4rem; background: var(--creme); }
.stand__texte p:not(.surtitre) { margin-top: .6rem; max-width: 30rem; font-size: 1.15rem; }
.stand__texte .titre-script { font-size: clamp(2.8rem, 5.5vw, 4.4rem); margin-top: .5rem; }

/* Photos d'ambiance : étalonnage chaud et doré, révélées au masque */
.photo-chaude { filter: sepia(.25) saturate(1.15) contrast(1.08) brightness(.95); }

/* La maison */
.maison { display: grid; gap: 3rem; }
.maison__texte article { border-top: 1px solid var(--filet); padding-top: 1.2rem; margin-bottom: 2.4rem; }
.maison__texte p { max-width: 30rem; font-size: 1.15rem; }
.maison__photos { display: grid; gap: 1.4rem; }
.maison__photos figure { margin: 0; }
.maison__photos img { width: 100%; height: auto; border: 1px solid var(--filet); padding: .35rem; background: var(--noir); }
.octobre {
  margin-top: 3.6rem; display: grid; gap: 1.6rem; align-items: center;
  border-top: 1px solid var(--filet); padding-top: 2.6rem;
}
.octobre img { width: min(260px, 70%); height: auto; justify-self: center; }
.octobre p { margin-top: .3rem; max-width: 30rem; font-size: 1.15rem; }

/* Délais (commander) */
.delais { display: grid; gap: 2.6rem; }
.delais li { border-top: 1px solid var(--or-fonce); padding-top: 1.2rem; }
.delais__valeur { font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; color: var(--or-fonce); margin-bottom: .5rem; }
.delais p:not(.delais__valeur) { margin-top: .4rem; max-width: 28rem; font-size: 1.15rem; }

/* Listes à coches */
.liste-texte { display: grid; gap: .7rem; font-size: 1.2rem; border-left: 1px solid var(--or-fonce); padding-left: 1.2rem; max-width: 36rem; }
.ticks { display: grid; gap: .9rem; max-width: 40rem; }
.ticks li { position: relative; padding-left: 1.7rem; font-size: 1.2rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .72em; width: .75rem; height: 1px; background: var(--or); }
.ticks--creme li::before { background: var(--or-fonce); }

/* FAQ */
.faq { max-width: 46rem; border-top: 1px solid var(--or-fonce); }
.faq details { border-bottom: 1px solid var(--or-fonce); padding: 1.1rem 0; }
.noir .faq { border-top-color: var(--filet); }
.noir .faq details { border-bottom-color: var(--filet); }
.faq summary {
  cursor: pointer; list-style: none; min-height: 44px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.25; color: var(--brun);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.noir .faq summary { color: var(--creme); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.7rem; color: var(--or-fonce); }
.noir .faq summary::after { color: var(--or); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: .7rem; max-width: 36rem; font-size: 1.15rem; }
.noir .faq details p { color: var(--creme-doux); }

/* Clôture de l'accueil */
.fin-accueil { display: grid; gap: 0; position: relative; }
.fin-accueil .actions { margin-top: 1rem; }

/* Pages intérieures : premier écran sobre */
.hero { padding: 9rem var(--gouttiere) 5rem; }
.hero__texte { max-width: 44rem; }
.hero .titre-script { font-size: clamp(3.4rem, 9vw, 7.4rem); margin: .8rem 0 1.4rem; }
.hero .actions { margin-top: 2rem; }
.hero .surtitre { color: var(--or); }

/* Formulaire (généré par le site : form.form) */
.form-zone .chapeau { margin-bottom: 0; }
.form { max-width: 48rem; }
.form__legend { font-size: 1.05rem; color: var(--creme-doux); margin-bottom: 1.5rem; }
.form__legend .req { color: var(--erreur); }
.form__summary { border: 1px solid var(--erreur); color: var(--erreur); padding: .8rem 1rem; margin-bottom: 1.5rem; }
.form__grid { display: grid; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or);
}
.field input, .field select, .field textarea {
  font-family: var(--texte); font-size: 1.15rem; color: var(--creme);
  background: rgba(246, 239, 226, .04); border: 1px solid var(--laiton); border-radius: 0;
  min-height: 48px; padding: .7rem .9rem; width: 100%;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--or); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--or); outline-offset: 2px; border-color: var(--or-clair);
  background: rgba(246, 239, 226, .08);
}
.field select option { background: var(--noir); color: var(--creme); }
.field input::placeholder, .field textarea::placeholder { color: var(--creme-doux); opacity: .7; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border: 2px solid var(--erreur);
}
.field__hint { font-size: 1rem; color: var(--creme-doux); }
.field__error { color: var(--erreur); font-size: 1rem; font-weight: 600; }
.req { color: var(--erreur); }
.field--check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .4rem .8rem; align-items: start; }
.field--check input {
  width: 24px; height: 24px; min-height: 24px; margin: .15rem 0 0; padding: 0; accent-color: var(--or);
}
.field--check label {
  font-family: var(--texte); font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--creme);
}
.field--check .field__error { grid-column: 1 / -1; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { margin-top: 1.5rem; width: 100%; max-width: 20rem; cursor: pointer; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status { margin-top: 1rem; min-height: 1.5rem; color: var(--creme-doux); }
.form__status.is-ok { color: var(--or); }
.form__status.is-error { color: var(--erreur); }

/* Pages légales et 404 */
.page-hero { background: var(--noir); color: var(--creme); padding-top: 4rem; padding-bottom: 3rem; }
.page-hero--legal { position: relative; padding-top: 8rem; padding-bottom: 4.5rem; }
.page-hero--legal::after {
  content: ''; position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or) 22%, var(--or-clair) 50%, var(--or) 78%, transparent);
}
.page-hero--legal .wrap { max-width: var(--large); }
.page-hero--legal h1 { font-family: var(--script); font-size: clamp(3.4rem, 9vw, 6.2rem); line-height: 1.05; font-weight: 400; color: var(--or); }
.page-hero--legal p { color: var(--creme-doux); margin-top: 1rem; max-width: 40rem; font-size: 1.2rem; }
.legal { background: var(--creme); color: var(--brun); padding-top: 3.6rem; padding-bottom: 4.8rem; }
.legal .prose { max-width: 70ch; }
.prose h2 {
  font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-size: 1rem; color: var(--or-fonce); margin: 3rem 0 .9rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(125, 94, 26, .4);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: .9rem; font-size: 1.2rem; line-height: 1.65; }
.prose a { color: var(--or-fonce); text-underline-offset: .25em; }
.prose strong { font-weight: 600; }
.prose .ticks { margin-top: .6rem; }

/* Progression de lecture : fil d'or en haut (créé par script.js) */
.progres {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--laiton), var(--or-clair));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* Pied de page */
.site-foot { background: var(--noir); padding-top: 4.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--filet); }
.foot__grille { display: grid; gap: 2.4rem; }
.foot__nom { font-family: var(--script); font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1.1; color: var(--or); }
.foot__desc { margin-top: .4rem; color: var(--creme-doux); max-width: 22rem; }
.foot__titre { font-weight: 600; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--or); margin-bottom: .8rem; }
.foot__liste { display: grid; gap: .3rem; }
.foot__liste a { text-decoration: none; color: var(--creme-doux); display: inline-flex; min-height: 36px; align-items: center; }
.foot__liste a:hover { color: var(--or); }
.foot__bas {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--filet);
  display: grid; gap: 1.2rem; justify-items: start;
}
.foot__signature { display: flex; align-items: center; gap: .75rem; font-family: var(--script); font-size: 2rem; line-height: 1.1; color: var(--or); }
.foot__signature a { text-decoration: none; color: inherit; }
.foot__signature a:hover { color: var(--or-clair); }
.losange { flex: 0 0 auto; }
.foot__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot__legal a {
  font-weight: 600; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--creme-doux); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center;
}
.foot__legal a:hover { color: var(--or); }
.mk-motion {
  min-height: 44px; padding: .5rem 1.1rem; cursor: pointer;
  background: none; border: 1px solid var(--filet); color: var(--creme-doux);
  font-weight: 600; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
}
.mk-motion:hover { color: var(--or); border-color: var(--or); }
.mk-motion[aria-pressed="true"] { color: var(--or); border-color: var(--or); }
html:not(.js) .mk-motion { display: none; }

/* Apparitions et masques : seulement si le mouvement est permis (classe « anim ») */
/* Apparitions : pilotées par GSAP (effets/main.js) ; sans JS, tout est visible */

/* Typographie cinétique : lettres révélées une à une (texte lu en entier par aria-label) */
.decoupe .mot { white-space: nowrap; }
.decoupe .lettre, .geant__titre .lettre { display: inline-block; }


/* Desktop : parallaxe, vitrine en profondeur, navigation sur une ligne */
@media (min-width: 600px) {
  .bijoux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bijoux--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bijoux--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem 3rem; }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .stand, .signe { gap: 3rem; }
}

@media (min-width: 900px) {
  section, .site-foot { padding: 6rem 3rem; }
  .rayon { padding: 6.4rem 3rem; }

  .head__inner, .js .head__inner { grid-template-columns: 1fr auto 1fr; column-gap: 3.5rem; padding: .95rem 3rem; }
  .nav-toggle, .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav {
    display: contents; position: static; width: auto; background: none; padding: 0; overflow: visible;
  }
  .nav-list, .js .nav-list { flex-direction: row; align-items: center; justify-content: center; gap: 0 2.4rem; }
  .js .nav-list a { font-size: .74rem; letter-spacing: .22em; min-height: 44px; }
  .nav-list--gauche { grid-column: 1; grid-row: 1; justify-self: end; }
  .nav-list--droite { grid-column: 3; grid-row: 1; justify-self: start; }
  .brand, .js .brand { grid-column: 2; grid-row: 1; flex-wrap: nowrap; white-space: nowrap; justify-self: center; }
  .brand__nom { font-size: .84rem; }
  .brand__sub { font-size: 2.3rem; }
  .logo-entete { height: 40px; }


  .rayon__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
  .rayon__entete { position: sticky; top: 7rem; }
  .rayon--decale .rayon__grille { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .rayon--decale .rayon__entete { order: 2; position: sticky; top: 7rem; }
  .rayon .bijoux { gap: 1.8rem; }
  .rayon .bijou:nth-child(3n + 2) { margin-top: 3.2rem; }
  .rayon--decale .bijou:nth-child(3n + 2) { margin-top: 0; }
  .rayon--decale .bijou:nth-child(3n + 1) { margin-top: 3.2rem; }

  .temps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .temps li:nth-child(2) { margin-top: 5rem; }
  .temps li:nth-child(3) { margin-top: 2.5rem; }

  .signe { grid-template-columns: 3fr 7fr; gap: 6rem; }
  .signe__photo { max-width: none; justify-self: start; }
  .citation { max-width: 26ch; }

  .formules { margin-left: 22%; }
  .stand { grid-template-columns: 6fr 5fr; gap: 6rem; }
  .stand__texte { padding-top: 2rem; }

  .maison { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: start; }
  .maison__texte article.decale { margin-left: 3rem; }
  .maison__photos { gap: 2.2rem; }
  .maison__photos .photo-b { margin-left: 18%; width: 82%; }
  .octobre { grid-template-columns: 4fr 6fr; gap: 4rem; }
  .octobre img { width: 100%; max-width: 360px; justify-self: start; }

  .delais { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .delais li:nth-child(2) { margin-top: 4rem; }

  .faq { margin-left: 22%; }
  .ticks { margin-left: 8%; }
  /* Formulaire et note alignés sur le bord du titre (plus de retrait de 8 % sur ordinateur) */
  .form-zone .form, .form-zone .note { margin-left: 0; }
  .creme .actions, .noir .actions { margin-left: 8%; }
  .hero .actions { margin-left: 0; }

  .fin-accueil .entete, .fin-accueil .actions, .fin-accueil .note { margin-left: 8%; }

  .foot__grille { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
  .foot__bas { grid-template-columns: 1fr auto; justify-items: stretch; align-items: center; }
  .foot__signature { grid-column: 1; }
  .foot__legal { grid-column: 1; }
}

/* Mouvement réduit : rien ne bouge, tout reste lisible et atteignable */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
  .anim .reveal, .anim .masque, .anim .bijou > img { transition: none; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation: none !important;
  transition-duration: .001ms !important;
}
.reduce-motion { scroll-behavior: auto; }

/* Fondu lent entre les pages (600 ms) */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .6s;
  animation-timing-function: var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .001s; }
}
.reduce-motion ::view-transition-old(root), .reduce-motion ::view-transition-new(root) { animation-duration: .001s; }

/* Écran de chargement doré « en écrin » (effets/chargement.js) : visible seulement si JS et mouvement permis */
.ecran-chargement {
  position: fixed; inset: 0; z-index: 210;
  display: none; align-items: center; justify-content: center;
  color: var(--or);
}
@media (prefers-reduced-motion: no-preference) {
  .js:not(.reduce-motion) .ecran-chargement { display: flex; }
}
.ecran-chargement .volet { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--noir); }
.ecran-chargement .volet--g { left: 0; border-right: 1px solid var(--filet); }
.ecran-chargement .volet--d { right: 0; border-left: 1px solid var(--filet); }
.ecran-chargement__centre {
  position: relative; z-index: 1; width: min(84vw, 34rem);
  display: grid; justify-items: center; gap: 1.5rem;
}
.ecran-chargement__logo { width: 100%; height: auto; }
.ecran-chargement__filet { width: 100%; height: 1px; background: var(--filet); overflow: hidden; }
.ecran-chargement__filet span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--laiton), var(--or-clair));
}
.ecran-chargement__pour {
  font-family: var(--texte); font-style: italic; font-size: 1.6rem; line-height: 1;
  letter-spacing: .04em; color: var(--or-clair); font-variant-numeric: tabular-nums;
}
.ecran-chargement__passer {
  position: absolute; z-index: 2; right: 1.25rem; bottom: 2rem; min-height: 44px; min-width: 44px; padding: .6rem .9rem;
  background: none; border: 0; color: var(--creme-doux); cursor: pointer;
  font-weight: 600; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
}
.ecran-chargement__passer:hover { color: var(--or); }

/* Pied : le lien vers les pages intérieures de la vitrine reste clair au clavier */
.vitrine__actions .btn:focus-visible { outline-offset: 5px; }

/* Relecture Opus : boutons lisibles sur la poudre dorée du premier écran */
.vitrine__actions .btn { background: rgba(11, 10, 9, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Relecture Opus (Lighthouse mobile) : la poudre dorée est un décor, inutile de la charger sur mobile (LCP, décalage) */

/* ===== Pages intérieures V3 : compositions plein écran, comme l'accueil ===== */

/* Premier écran plein cadre : photo chaude, titre script, texte en bas */
.plein {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92vh, 58rem); min-height: min(92svh, 58rem);
  display: flex; align-items: flex-end;
  background: var(--noir); color: var(--creme);
}
.plein__fond { position: absolute; inset: 0; z-index: -1; }
.plein__fond picture, .plein__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plein__fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 8, .3) 0%, rgba(12, 10, 8, .6) 42%, rgba(12, 10, 8, .96) 100%);
}
.plein__texte { position: relative; width: 100%; max-width: var(--large); margin: 0 auto; padding: 9rem var(--gouttiere) 4.5rem; }
/* Taille calée pour que « Île-de-France » (mot-signature insécable) tienne avec 16 px de marge à droite, de 320 à 899 px */
.plein__texte .titre-script { font-size: clamp(2.2rem, calc(14.5vw - .6rem), 6.2rem); margin: .6rem 0 1.1rem; max-width: none; }
.plein__texte .lead { max-width: 30rem; font-size: clamp(1.25rem, 2.4vw, 1.5rem); color: var(--creme); }
.plein__texte .note-haute { margin-top: .8rem; }
.plein__texte .actions { margin-top: 2rem; }
.plein__texte .pastilles { margin-top: 2rem; }
.pastilles a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none;
}
.pastilles a:hover, .pastilles a:focus-visible { color: var(--or-clair); }
.pastilles li:hover { border-color: var(--or); }

/* Scènes plein cadre : image révélée au masque, texte en surimpression */
.scene {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(86vh, 52rem); display: flex; align-items: flex-end;
  background: var(--noir); color: var(--creme);
}
.scene__img { position: absolute; inset: 0; z-index: -1; }
.scene__img picture, .scene__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 8, .15) 0%, rgba(12, 10, 8, .6) 48%, rgba(12, 10, 8, .96) 100%);
}
.scene__texte {
  position: relative; width: 100%; max-width: var(--large); margin: 0 auto;
  display: grid; justify-items: start;
  padding: 8rem var(--gouttiere) 4.5rem;
}
.scene__texte .titre-script { font-size: clamp(3.4rem, 9vw, 6.8rem); margin: .5rem 0 1rem; }
.scene__texte p:not(.surtitre) { max-width: 28rem; font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--creme); }

/* Bandes : photo en portrait (masque) et texte à côté */
.bande { display: grid; gap: 2.6rem; align-items: center; }
.bande__photo { margin: 0; }
.bande__photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1px solid var(--or-fonce); padding: .4rem; background: var(--noir);
}
.bande-noire .bande__photo img { border-color: var(--filet); }
.bande__texte p:not(.surtitre) { margin-top: .6rem; max-width: 30rem; font-size: 1.2rem; }
.bande__texte .titre-script { font-size: clamp(3.2rem, 7vw, 5.6rem); margin-top: .5rem; }
.bande__texte .ticks { margin-top: 1.8rem; }
.noir .bande__texte p:not(.surtitre) { color: var(--creme-doux); }

/* Pour qui : mots géants en script, filets dorés */
.grands-mots { margin-top: 2.6rem; border-top: 1px solid var(--filet); }
.grands-mots li {
  font-family: var(--script); font-size: clamp(3.2rem, 6.6vw, 6.2rem); line-height: 1.2;
  color: var(--or); padding: .1rem 0 .2rem; border-bottom: 1px solid var(--filet);
  /* « Anniversaires » reste sur une seule ligne, sans coupure de mot */
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.grands-mots li:nth-child(even) { text-align: right; }

/* Pictogrammes au trait or, pour les rayons sans photo détourée */
.pictogramme {
  display: block; width: 5.4rem; height: 5.4rem; margin: 0 auto;
  fill: none; stroke: var(--or); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.bijou--texte .bijou__cadre { min-height: 9.5rem; }
.bijou--texte .nom-script { margin-top: .4rem; }

.ticks--grand li { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* Cookie croqué (404) : une bouchée faite par un masque, trois cercles qui se recoupent */
.croque-page { min-height: min(86vh, 48rem); display: flex; align-items: center; }
.croque { display: grid; gap: 2.8rem; align-items: center; padding-top: 4rem; padding-bottom: 4rem; }
.croque__cookie {
  position: relative; width: min(72vw, 20rem); margin: 0 auto;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .62));
}
.croque__cookie img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  -webkit-mask-image:
    radial-gradient(circle 2.9rem at 80% 16%, transparent 2.85rem, #000 2.9rem),
    radial-gradient(circle 2.4rem at 92% 32%, transparent 2.35rem, #000 2.4rem),
    radial-gradient(circle 2rem at 68% 6%, transparent 1.95rem, #000 2rem);
          mask-image:
    radial-gradient(circle 2.9rem at 80% 16%, transparent 2.85rem, #000 2.9rem),
    radial-gradient(circle 2.4rem at 92% 32%, transparent 2.35rem, #000 2.4rem),
    radial-gradient(circle 2rem at 68% 6%, transparent 1.95rem, #000 2rem);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.croque__miette {
  position: absolute; width: .55rem; height: .45rem; background: #4a2f1b; border-radius: 40% 60% 50% 50%;
}
.croque__miette--1 { top: 9%; right: -.2rem; }
.croque__miette--2 { top: 27%; right: 1.4rem; width: .35rem; height: .3rem; background: #6b4526; }
.croque__miette--3 { top: 3%; left: 62%; width: .3rem; height: .3rem; background: #6b4526; }
.anim .croque__cookie { animation: flotte 9s ease-in-out infinite alternate; }
.croque__texte .titre-script { font-size: clamp(3.4rem, 10vw, 6.8rem); margin: .4rem 0 1rem; }
.croque__texte .lead { max-width: 28rem; color: var(--creme-doux); }
.croque__liens { flex-wrap: wrap; }
.croque__liens li { display: contents; }

/* Formulaire : noir et or, champs lisibles, focus visible */
/* Mobile : le mot-signature « formulaire » (italique, empattement en swash) gardait ~8 px du bord ; retrait de 16 px minimum */
@media (max-width: 899.98px) {
  .page-commander #t-composer { margin-left: 0; padding-left: .12em; }
}
.form-zone .form { color: var(--creme); }
.form-zone .form__legend { color: var(--creme-doux); }
.form-zone .field__hint { color: var(--creme-doux); }

@media (min-width: 600px) {
  .grands-mots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .grands-mots li:nth-child(even) { text-align: right; }
}

@media (min-width: 900px) {
  .plein__texte { padding: 0 3rem 6rem; }
  .plein { align-items: flex-end; }
  .plein__texte .titre-script { font-size: clamp(5.4rem, 9vw, 9.4rem); max-width: none; }

  .scene { align-items: center; }
  .scene__img::after { background: linear-gradient(90deg, rgba(12, 10, 8, .94) 0%, rgba(12, 10, 8, .55) 50%, rgba(12, 10, 8, .08) 100%); }
  .scene--droite .scene__img::after { background: linear-gradient(270deg, rgba(12, 10, 8, .94) 0%, rgba(12, 10, 8, .55) 50%, rgba(12, 10, 8, .08) 100%); }
  /* Barnum : voile plus dense sous le texte à droite, la photo reste visible à gauche */
  .page-bar-a-cookies-mariage .scene--droite .scene__img::after { background: linear-gradient(270deg, rgba(12, 10, 8, .97) 0%, rgba(12, 10, 8, .9) 44%, rgba(12, 10, 8, .6) 66%, rgba(12, 10, 8, .18) 100%); }
  .scene__texte { padding: 7rem 3rem; }
  .scene__texte .titre-script { font-size: clamp(5rem, 8.5vw, 7.8rem); }
  .scene--droite .scene__texte { justify-items: end; text-align: right; }

  .bande { grid-template-columns: 5fr 6fr; gap: 6rem; }
  .bande--inverse .bande__photo { order: 2; }
  .bande-noire .bande__photo img { aspect-ratio: 4 / 3; }

  .croque { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .croque__cookie { width: min(32vw, 27rem); margin: 0; }
  .croque__texte { max-width: 36rem; }
  /* Les trois boutons passent à la ligne au lieu de dépasser le bord de la page */
  .croque__liens { flex-wrap: wrap; }
}

@media (max-width: 899.98px) {
  .scene__img::after { background: linear-gradient(180deg, rgba(12, 10, 8, .2) 0%, rgba(12, 10, 8, .62) 50%, rgba(12, 10, 8, .97) 100%); }
  .scene--droite .scene__texte { justify-items: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .anim .croque__cookie { animation: none; }
}
/* Relecture Opus : raccourcis de rayons lisibles sur le fond noir de l'en-tête de la collection (contraste AA) */
.page-collection .pastilles a { color: var(--creme, #f3ead8); }
.page-collection .pastilles a:hover, .page-collection .pastilles a:focus-visible { color: var(--or-clair, #f1d77a); }
/* En-tête de la collection : voile plus dense sous le surtitre, le texte et les rayons (photo chargée) */
.page-collection .plein__fond::after { background: linear-gradient(180deg, rgba(12, 10, 8, .55) 0%, rgba(12, 10, 8, .8) 40%, rgba(12, 10, 8, .92) 68%, rgba(12, 10, 8, .97) 100%); }
.page-collection .pastilles li { background: rgba(12, 10, 8, .72); }

/* ===== V4 · Guides, réalisations, liens et configurateur (contrat V4) =====
   Chaque bloc porte ses couleurs : il reste lisible sur le noir comme sur le crème. */

/* Guides : feuille crème, colonne de lecture de 68 caractères maximum */
.article {
  background: var(--creme); color: var(--brun);
  padding: 4.5rem var(--gouttiere) 5.5rem;
}
.article__tete, .sommaire, .article__corps { max-width: 68ch; margin-left: auto; margin-right: auto; }
.article__tete { margin-bottom: 2.6rem; }
.article__tete .surtitre { color: var(--or-fonce); } /* or sombre sur crème : 5,3:1 */
.article .titre-script {
  font-size: clamp(3.1rem, 8vw, 5.4rem); color: var(--or-fonce); margin: .5rem 0 1.1rem;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .article .titre-script {
    background-image: var(--or-metal-clair); background-size: 280% 100%; background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
.article__chapo {
  margin-top: 1.2rem; font-size: clamp(1.25rem, 2.2vw, 1.45rem); line-height: 1.55; color: var(--brun);
}
.article__meta {
  margin-top: 1.4rem; font-weight: 600; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  line-height: 1.5; color: var(--or-fonce);
}

/* Sommaire : sobre, filet d'or à gauche, numéros en petites capitales */
.sommaire {
  margin-bottom: 3rem; padding: .2rem 0 .2rem 1.3rem; border-left: 1px solid var(--or-fonce);
}
.sommaire ol { counter-reset: sommaire; }
.sommaire li {
  counter-increment: sommaire; font-size: 1.1rem; line-height: 1.4; padding: .2rem 0;
}
.sommaire li::before {
  content: counter(sommaire, decimal-leading-zero); display: inline-block; min-width: 2.2em; margin-right: .5rem;
  font-weight: 600; font-size: .78rem; letter-spacing: .12em; color: var(--or-fonce);
}
.sommaire a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--brun); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .6s var(--ease), color .4s var(--ease);
}
.sommaire a:hover, .sommaire a:focus-visible { color: var(--or-fonce); background-size: 100% 1px; }

/* Corps de guide : intertitres en script, texte à l'aise */
.article .article__corps h2 {
  font-family: var(--texte); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--or-fonce);
  margin: 3.4rem 0 1.1rem; padding-top: 0; border-top: 0;
}
.article .article__corps h2:first-child { margin-top: 0; }
.article .article__corps h3 {
  font-weight: 600; font-size: .95rem; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brun); margin: 2.2rem 0 .7rem;
}
.article .article__corps p { font-size: 1.2rem; line-height: 1.7; margin-bottom: 1.1rem; color: var(--brun); }
.article .article__corps a { color: var(--or-fonce); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.article .article__corps a:hover { text-decoration-thickness: 2px; }
.article .article__corps ul { margin: .4rem 0 1.4rem; }
.article .article__corps ul li {
  position: relative; padding-left: 1.6rem; font-size: 1.2rem; line-height: 1.6;
}
.article .article__corps ul li + li { margin-top: .6rem; }
.article .article__corps ul li::before {
  content: ''; position: absolute; left: 0; top: .72em; width: .75rem; height: 1px; background: var(--or-fonce);
}
.article .article__corps ol { margin: .4rem 0 1.4rem; padding-left: 1.7rem; list-style: decimal; }
.article .article__corps ol li { font-size: 1.2rem; line-height: 1.6; padding-left: .3rem; }
.article .article__corps ol li + li { margin-top: .6rem; }
.article .article__corps ol li::marker { color: var(--or-fonce); font-weight: 600; }

/* Encart : une note à part, sur fond crème plus sombre */
.article .encart {
  margin: 2.6rem 0; padding: 1.6rem 1.8rem; border: 1px solid var(--or-fonce); border-left-width: 3px;
  background: #ebdfc5; color: var(--brun);
}
.article .encart > :first-child { margin-top: 0; }
.article .encart > :last-child { margin-bottom: 0; }
.article .encart p { font-size: 1.1rem; }
.article .encart h3 { margin-top: 0; }

/* Zones : liste de villes ou de secteurs, en étiquettes fines */
.zones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 2rem; }
.zones li {
  padding: .45rem .9rem; border: 1px solid var(--filet); color: inherit;
  font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
.article .zones li { border-color: var(--or-fonce); color: var(--brun); }

/* Réalisations : carte sombre, photo en 4/3, faits en liste */
.cas {
  display: grid; margin: 0 0 2.8rem; background: var(--noir-doux); color: var(--creme);
  border: 1px solid var(--filet);
}
.cas__image { margin: 0; }
.cas__image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cas__texte { padding: 1.8rem 1.4rem 2.2rem; }
.cas__lieu {
  font-weight: 600; font-size: .76rem; line-height: 1.5; letter-spacing: .26em; text-transform: uppercase; color: var(--or);
}
.cas h2 {
  font-family: var(--texte); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 3.6rem); line-height: 1.1;
  color: var(--or-clair); margin: .5rem 0 .9rem;
}
.cas__texte > p:not(.cas__lieu) { font-size: 1.15rem; line-height: 1.65; color: var(--creme-doux); max-width: 46ch; }
.cas__faits { display: grid; gap: 1rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--filet); }
.cas__faits dt {
  font-weight: 600; font-size: .75rem; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; color: var(--or);
}
.cas__faits dd { margin-top: .2rem; font-size: 1.1rem; line-height: 1.5; color: var(--creme); }

/* Cartes de liens : filet d'or, survol qui se dessine */
.liens-cartes { display: grid; gap: 1.4rem; margin: 2.4rem 0 0; }
.liens-cartes > li { display: flex; min-width: 0; }
.lien-carte {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: .55rem; padding: 2.2rem 1.8rem 2rem;
  text-decoration: none; color: var(--creme);
  background: linear-gradient(180deg, #1c1713 0%, var(--noir-doux) 100%);
  border: 1px solid var(--filet);
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.lien-carte::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or) 22%, var(--or-clair) 50%, var(--or) 78%, transparent);
  transform: scaleX(.3); transition: transform 1s var(--ease);
}
.lien-carte::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 162, 74, .16), transparent 70%);
  transition: opacity .8s var(--ease);
}
.lien-carte:hover, .lien-carte:focus-visible { border-color: var(--or); box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .9); }
.lien-carte:hover::before, .lien-carte:focus-visible::before { transform: scaleX(1); }
.lien-carte:hover::after, .lien-carte:focus-visible::after { opacity: 1; }
.lien-carte:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.anim .lien-carte:hover, .anim .lien-carte:focus-visible { transform: translate3d(0, -3px, 0); }
.lien-carte__surtitre {
  font-weight: 600; font-size: .75rem; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--or);
}
.lien-carte__titre {
  font-family: var(--script); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1.1; color: var(--or-clair);
}
.lien-carte__texte { font-size: 1.1rem; line-height: 1.55; color: var(--creme-doux); }

/* Configurateur (slot de formulaire) : fieldset dans la grille du formulaire, sur fond noir */
.config {
  grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; color: var(--creme);
}
.config__titre {
  display: block; width: 100%; padding: 2rem 0 0; margin: 0 0 .8rem;
  border-top: 1px solid var(--filet);
  font-family: var(--script); font-weight: 400; font-size: clamp(2.8rem, 6vw, 3.6rem); line-height: 1.1; color: var(--or);
}
.config__aide { font-size: 1.05rem; line-height: 1.6; color: var(--creme-doux); max-width: 46ch; margin-bottom: .4rem; }
.config__groupe { margin-top: 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(201, 162, 74, .2); }
.config__famille {
  font-weight: 600; font-size: .78rem; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase;
  color: var(--or); margin-bottom: .4rem;
}
.config__ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .4rem 0; border-bottom: 1px solid rgba(246, 239, 226, .08);
}
.config__ligne:last-child { border-bottom: 0; }
.config__ligne label {
  min-width: 0; font-size: 1.25rem; line-height: 1.25; color: var(--creme); cursor: pointer;
}
.config__compteur { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.config__pas {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  font-family: var(--texte); font-size: 1.5rem; line-height: 1;
  color: var(--or-clair); background: transparent; border: 1px solid var(--or); cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), opacity .4s var(--ease);
}
.config__pas:hover:not(:disabled) { background: var(--or); color: var(--noir); }
.config__pas:disabled { opacity: .35; cursor: not-allowed; }
.config__ligne input[type="number"] {
  width: 4.4rem; min-height: 44px; margin: 0; padding: .3rem .3rem;
  font-family: var(--texte); font-size: 1.15rem; font-weight: 600; line-height: 1; text-align: center;
  color: var(--creme); background: rgba(246, 239, 226, .04);
  border: 1px solid var(--laiton); border-radius: 0; -moz-appearance: textfield; appearance: textfield;
}
.config__ligne input[type="number"]::-webkit-outer-spin-button,
.config__ligne input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.config__ligne input[type="number"]::placeholder { color: var(--creme-doux); opacity: .75; }
.config__ligne input[type="number"]:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-color: var(--or-clair); }

/* Choix uniques (boutons radio sous forme de pastilles) */
.config__choix { position: relative; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.config__choix input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0;
}
.config__choix label {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem;
  font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: .06em; color: var(--creme);
  border: 1px solid var(--laiton); cursor: pointer;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.config__choix label:hover { border-color: var(--or); }
.config__choix input:checked + label { background: var(--or); border-color: var(--or); color: var(--noir); }
.config__choix input:focus-visible + label { outline: 2px solid var(--or-clair); outline-offset: 3px; }

/* Case à cocher du formulaire d'avis (dans un groupe du configurateur) */
.config .field--check { margin-top: .4rem; }

/* Récapitulatif : visible dès qu'une quantité est saisie */
.config__recap {
  margin-top: 1.6rem; padding: .9rem 1.1rem; border-left: 2px solid var(--or);
  background: rgba(246, 239, 226, .05); color: var(--or-clair); font-size: 1.1rem; line-height: 1.5;
}

/* Largeur : deux colonnes de liens et de réalisations dès 600 px, trois dès 900 px */
@media (min-width: 600px) {
  .liens-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cas__faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
}
@media (min-width: 900px) {
  .article { padding: 7rem 3rem 8rem; }
  .article .article__corps ol { padding-left: 1.9rem; }
  .liens-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
  .cas { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .cas__texte { align-self: center; padding: 3.2rem 3.4rem; }
  .cas--inverse .cas__image { order: 2; }
}

/* V4 · Prochains rendez-vous (contenu.json, modifiable avec tools/editeur.html) */
.rendez-vous { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.rendez-vous__item { display: grid; gap: .25rem; padding: 1.1rem 1.25rem; background: var(--noir); color: var(--creme); }
.rendez-vous__date { font-family: var(--script); font-size: 1.8rem; color: var(--or); line-height: 1.1; }
.rendez-vous__lieu { font-weight: 600; letter-spacing: .04em; }
.rendez-vous__horaires, .rendez-vous__detail { color: var(--creme-doux); }
.rendez-vous__horaires:empty, .rendez-vous__detail:empty { display: none; }
@media (min-width: 48rem) { .rendez-vous__item { grid-template-columns: 14rem 1fr; column-gap: 2rem; } .rendez-vous__date { grid-row: span 3; } }

/* ===== V5 : finitions. Grille éditoriale des rayons, pictos dorés, mot-signature, survol ===== */
/* Rayons : un produit vedette en grand (2 colonnes × 2 rangées), les autres plus petits */
.bijoux--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.bijoux--editorial > .bijou:first-child { grid-column: 1 / -1; }
.bijoux--editorial .bijou__image { transition: transform 1.2s var(--ease); }
@media (min-width: 900px) {
  .bijoux--editorial { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
  .bijoux--editorial > .bijou:first-child { grid-column: span 2; grid-row: span 2; }
  .bijoux--n3 > .bijou:nth-child(n + 2) { grid-row: span 2; }
  .bijoux--n4 > .bijou:nth-child(2) { grid-row: span 2; }
  .bijoux--editorial > .bijou:first-child .bijou__image { width: 100%; }
  .bijoux--editorial > .bijou--texte:first-child .bijou__cadre { min-height: 17rem; }
}

/* Pictos dorés (cartes sans photo) */
.bijou__picto { display: block; width: 6.5rem; height: 6.5rem; margin: 0 auto; }
.bijoux--editorial > .bijou--texte:first-child .bijou__picto { width: 11rem; height: 11rem; }
.bijou--texte .bijou__cadre { min-height: 8rem; }

/* Survol : zoom doux, rotation légère, filet or qui se dessine (souris fine, mouvement permis) */
@media (hover: hover) and (pointer: fine) {
  .anim .bijou::after {
    content: ''; position: absolute; left: 1.2rem; right: 1.2rem; bottom: .55rem; height: 1px;
    background: var(--or); transform: scaleX(0); transform-origin: left center;
    transition: transform .9s var(--ease); pointer-events: none;
  }
  .anim .bijou:hover::after, .anim .bijou:focus-within::after { transform: scaleX(1); }
  .anim .bijou:hover .bijou__image, .anim .bijou:focus-within .bijou__image { transform: scale(1.04) rotate(-2deg); }
}

/* Mot-signature : Parisienne or, à l'intérieur des titres en Cormorant italique */
h1 .signature, h2 .signature {
  font-family: var(--script); font-style: normal; font-weight: 400;
  font-size: 1.18em; line-height: 1; letter-spacing: 0; white-space: nowrap;
  padding-right: .04em;
  /* or plein (et non dégradé clippé) : le mot dépasse la boîte du titre sans être coupé */
  background: none; color: var(--or); -webkit-text-fill-color: var(--or);
}
.creme h2 .signature, .creme h1 .signature, .article h1 .signature, .article h2 .signature, .legal h1 .signature, .legal h2 .signature { color: var(--or-fonce); -webkit-text-fill-color: var(--or-fonce); }

/* Rayons en grille éditoriale : liste pleine largeur (photos plus grandes), prénoms sans coupure de mot */
.nom-script { overflow-wrap: normal; word-break: normal; }
.bijoux--editorial .nom-script { font-size: clamp(1.9rem, 2.4vw, 2.3rem); }
@media (min-width: 900px) {
  .rayon__grille:has(> .bijoux--editorial) { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .rayon__grille:has(> .bijoux--editorial) .rayon__entete { position: static; order: 0; max-width: 40rem; }
  .rayon--decale .rayon__grille:has(> .bijoux--editorial) .rayon__entete { order: 0; }
}
.bijoux--editorial > .bijou { display: flex; flex-direction: column; justify-content: center; }

/* ===== V6 · Héros « cookie qui se casse », typographie géante, effets image, défilement Lenis ===== */

/* Défilement amorti : Lenis gère le défilement, pas le CSS */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Séquence du héros : canvas posé sur la photo fixe (qui reste le premier rendu) */
.fx-sequence {
  opacity: 0; transition: opacity .6s var(--ease);
  mix-blend-mode: screen; pointer-events: none;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .5));
}
.fx-sequence.is-pret { opacity: 1; }
/* Bords fondus : le cadre 16:9 de la vidéo disparaît dans le fond ; le texte du héros reste au-dessus. */
.fx-sequence {
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 62%, transparent 100%);
}
.vitrine__titre { position: relative; z-index: 3; }

/* Effets image (OGL) : le canvas apparaît quand la première image est dessinée */
.stand__photo, .geant__vapeur { position: relative; }
.fx-canvas { opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.fx-canvas.is-pret { opacity: 1; }
.fx-canvas.photo-chaude { filter: sepia(.25) saturate(1.15) contrast(1.08) brightness(.95); }

/* Typographie géante : « Fait maison » sur toute la largeur, en Cormorant italique, or métallique */
.geant { padding: 6.5rem var(--gouttiere) 5.5rem; text-align: center; overflow: hidden; }
.geant__tete { max-width: 64rem; margin: 0 auto; }
.geant__titre {
  font-family: var(--texte); font-style: italic; font-weight: 400; text-transform: uppercase;
  font-size: clamp(6rem, 12.4vw, 19rem); line-height: .92; letter-spacing: .01em;   /* tient dans 1440 px avec la marge */
  white-space: nowrap; color: var(--or);
  padding: .04em .06em .12em; margin: .3rem 0 0;
}
.geant__phrase { margin-top: 1.6rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--creme-doux); }
.geant__vapeur { margin: 3.6rem auto 0; max-width: 62rem; }
.geant__vapeur img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--filet); padding: .4rem; background: var(--noir);
}

@media (max-width: 719.98px) {
  .geant { padding: 5rem var(--gouttiere) 4.5rem; }
  .geant__titre { font-size: clamp(5.2rem, 22vw, 9.5rem); line-height: .9; white-space: normal; }
  .geant__vapeur img { aspect-ratio: 4 / 3; }
}

/* Titres découpés (SplitText) : l'or métallique est porté par chaque lettre. Le fond du titre ne traverse
   pas les lettres déplacées par les animations, il n'est donc plus utilisé sur ces titres. */
.titre-script.decoupe, .geant__titre { color: var(--or); -webkit-text-fill-color: var(--or); }
.creme .titre-script.decoupe { color: var(--or-fonce); -webkit-text-fill-color: var(--or-fonce); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .titre-script.decoupe, .geant__titre { background-image: none; }
  .decoupe .lettre, .geant__titre .lettre {
    background-image: var(--or-metal); background-size: 100% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .creme .decoupe .lettre, .creme .geant__titre .lettre { background-image: var(--or-metal-clair); }
}

@media (min-width: 900px) {
  .geant { padding-left: 3rem; padding-right: 3rem; }
}

/* Film de présentation (chargé au clic) */
.film { padding-block: clamp(4rem, 9vw, 8rem); }
.film__cadre { position: relative; width: min(1100px, 92vw); margin: 2.5rem auto 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px var(--filet), 0 40px 90px rgba(0, 0, 0, .55); }
.film__cadre img, .film__cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__lire { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(14px, 3vw, 32px); gap: 1rem; width: 100%; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(12, 10, 8, 0) 55%, rgba(12, 10, 8, .55)); color: var(--or); font: italic 1.4rem var(--texte); }
.film__lire svg { width: 64px; height: 64px; padding: 19px 17px 19px 22px; border-radius: 50%; background: var(--noir); color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 16px 40px rgba(0, 0, 0, .45);
  transition: transform .35s var(--ease); }
.film__lire span { color: var(--creme); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.film__lire:hover svg, .film__lire:focus-visible svg { transform: scale(1.08); }
.film__lire:focus-visible { outline: 2px solid var(--or-clair); outline-offset: -6px; }
.film__legende { text-align: center; margin-top: 1.2rem; color: var(--creme-doux); letter-spacing: .08em; font-size: .95rem; }

.foot__bas .mk-sign { margin-inline: auto 0; }

/* ===== Finitions luxe (23/10) : écran de chargement épuré (sans pourcentage) ===== */
.ecran-chargement__pour { visibility: hidden; }

/* Très petits écrans (320 px) : logo, mots en script et surtitres tiennent dans la largeur. */
@media (max-width: 360px) {
  .logo-entete { max-width: calc(100vw - 96px); height: auto; }
  .titre-script .signature { font-size: .8em; }
  .vitrine__titre .surtitre { letter-spacing: .14em; }
  .cas__image { max-width: 100%; }
  .cas > * { min-width: 0; }
}

/* Fluidité mobile : pas de flou animé ni de flou d'arrière-plan sous 900 px (coûteux sur téléphone, invisible à 94 % d'opacité). */
@media (max-width: 899.98px) {
  .masque:not(.is-in), .masque:not(.is-in) > picture { filter: none !important; }
  .site-head, .site-head::before, .entete, .vitrine__actions .btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Pas de saut de l'en-tête au chargement : sur mobile, le menu reste replié avant même que le script ne pose
   html.js (sinon il s'affiche 88 px en dessous puis disparaît : décalage de mise en page). Sans JavaScript,
   le bloc <noscript> de l'en-tête le réaffiche. */
@media (max-width: 899.98px) {
  html:not(.js) .site-nav { display: none; }
}

/* ===== Entrée « écrin crème » (24/10, piste B choisie par Kentin) ===== */
/* Marbre clair façon grande pâtisserie parisienne, titre en Cormorant (romain + italique), le cookie dans un écrin rond. */
.ecrin {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 4.7rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 7vw, 8rem);
  background: radial-gradient(ellipse 50% 60% at 72% 52%, #fffaf0, var(--creme) 70%);
  color: var(--brun);
}
.ecrin__fond { position: absolute; inset: 0; z-index: -1; opacity: .18; mix-blend-mode: multiply; }
.ecrin__fond img { width: 100%; height: 100%; object-fit: cover; }
.ecrin__grille { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4rem; width: 100%; max-width: 74rem; margin: 0 auto; }
.ecrin__sur { font-weight: 600; font-size: .8rem; letter-spacing: .42em; text-transform: uppercase; color: var(--or-fonce); }
.ecrin__titre { font-family: var(--texte); font-weight: 400; font-size: clamp(3rem, 6.4vw, 6rem); line-height: 1.02; letter-spacing: -.01em; color: var(--brun); margin: 1.6rem 0 1.8rem; }
.ecrin__titre em { display: block; font-style: italic; color: #8f6d2a; }
.ecrin__intro { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.6; color: #5b4a38; max-width: 25em; }
.ecrin__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.ecrin .btn.ecrin__btn { --fond: var(--brun); color: var(--brun); border-color: rgba(29, 23, 18, .45); }
.ecrin .btn.ecrin__btn:hover, .ecrin .btn.ecrin__btn:focus-visible { color: var(--creme); }
.ecrin .btn.ecrin__btn--plein { background-color: var(--brun); color: var(--creme); border-color: var(--brun); --fond: #3a2c20; }
.ecrin__produit { position: relative; justify-self: center; width: min(36vw, 560px); aspect-ratio: 1; margin: 0; }
.ecrin__produit::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(143, 109, 42, .45);
  box-shadow: 0 0 0 18px rgba(246, 239, 226, .6), 0 0 0 19px rgba(143, 109, 42, .25);
}
.ecrin__produit img { position: absolute; inset: 12%; width: 76%; height: auto; filter: drop-shadow(0 40px 40px rgba(60, 40, 20, .35)) !important; }
.ecrin__mention { position: absolute; left: clamp(1.25rem, 7vw, 8rem); bottom: 2rem; font-weight: 600; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or-fonce); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .ecrin__texte > *, html:not(.reduce-motion) .ecrin__produit { animation: ecrin-entree 1.8s cubic-bezier(.22, .61, .36, 1) both; }
  html:not(.reduce-motion) .ecrin__texte > :nth-child(2) { animation-delay: .12s; }
  html:not(.reduce-motion) .ecrin__texte > :nth-child(3) { animation-delay: .24s; }
  html:not(.reduce-motion) .ecrin__texte > :nth-child(4) { animation-delay: .36s; }
  html:not(.reduce-motion) .ecrin__produit { animation-delay: .2s; animation-duration: 2.2s; }
}
@keyframes ecrin-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 899.98px) {
  .ecrin { justify-content: flex-start; padding-top: 2.5rem; padding-bottom: 4.5rem; }
  .ecrin__grille { grid-template-columns: 1fr; gap: 2rem; }
  .ecrin__produit { width: min(76vw, 420px); order: -1; }
  .ecrin__titre { margin: 1.1rem 0 1.2rem; }
  .ecrin__mention { bottom: 1.4rem; }
}

/* ===== Le cookie qui se casse, en plein écran (section épinglée, effets/cookie.js) ===== */
.cassure { position: relative; height: 100svh; padding: 0 !important; overflow: hidden; background: #120c06; }
.cassure__produit { position: absolute; inset: 0; margin: 0; }
.cassure__produit picture, .cassure__produit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cassure .fx-sequence { mix-blend-mode: normal !important; -webkit-mask-image: none !important; mask-image: none !important; }
.cassure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 45% 40% at 0% 100%, rgba(12, 10, 8, .8), transparent 70%); }
.cassure__legende { position: absolute; z-index: 2; left: clamp(1.25rem, 7vw, 8rem); bottom: clamp(2rem, 7vh, 4.5rem); }
.cassure__nom { font-family: var(--texte); font-style: italic; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.1; color: var(--creme); margin: .5rem 0 .9rem; }

/* Accueil : la collection en un coup d'œil (5 cartes vers les rayons de la page Collection) */
.gamme__cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gamme__carte {
  display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1.1rem 1.3rem; text-decoration: none; color: var(--brun);
  border: 1px solid rgba(125, 94, 26, .28); background: rgba(255, 255, 255, .35);
  transition: border-color .6s var(--ease), background-color .6s var(--ease);
}
.gamme__carte:hover, .gamme__carte:focus-visible { border-color: var(--or-fonce); background: rgba(255, 255, 255, .6); }
.gamme__image { display: block; aspect-ratio: 1; margin-bottom: 1rem; overflow: hidden; }
.gamme__image img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s var(--ease); }
.gamme__carte:hover .gamme__image img { transform: scale(1.04); }
.gamme__nom { font-family: var(--script); font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--or-fonce); }
.gamme__ligne { margin-top: .45rem; font-size: 1.08rem; line-height: 1.4; flex: 1; }
.gamme__voir { margin-top: .9rem; font-size: .8rem; letter-spacing: .14em; white-space: nowrap; text-transform: uppercase; color: var(--or-fonce); }
.gamme__voir::after { content: " →"; }
.gamme__cartes li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gamme__cartes li:last-child:nth-child(odd) .gamme__image { width: 100%; max-width: 9rem; align-self: center; }
@media (max-width: 599.98px) { .gamme__carte { padding: .9rem .9rem 1.1rem; } .gamme__voir { font-size: .72rem; letter-spacing: .1em; } }
@media (max-width: 379.98px) { .gamme__cartes { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .gamme__cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .gamme__image { aspect-ratio: 16 / 10; }
  .gamme__carte { padding: 1rem 1.2rem 1.2rem; }
  .gamme__cartes li:last-child:nth-child(odd) { grid-column: auto; }
  .gamme__cartes li:last-child:nth-child(odd) .gamme__image { max-width: none; align-self: stretch; }
}
/* Un mot d'Alexandre, suivi du savoir-faire en trois temps sur toute la largeur */
.signe__temps { grid-column: 1 / -1; margin-top: 1rem; }

/* Contact WhatsApp toujours à portée */
.wa-flottant {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1.1rem 0 .95rem; border-radius: 999px;
  background: rgba(12, 10, 8, .9); color: var(--or-clair); border: 1px solid var(--filet); text-decoration: none;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.wa-flottant:hover, .wa-flottant:focus-visible { background: var(--or); color: var(--noir); border-color: var(--or); }
.wa-flottant__glyphe { flex: none; }
@media (max-width: 599.98px) { .wa-flottant { width: 52px; height: 52px; padding: 0; justify-content: center; } .wa-flottant__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media print { .wa-flottant { display: none; } }

/* Signature « Site signé My Kutenova » : badge du bas de page, commun à tous les sites My Kutenova.
   Kuto garde toujours le bleu de la marque ; le reste prend les couleurs du site grâce à trois variables :
   --mk-accent : couleur du site au survol (Min-K : or) ;
   --mk-strong : couleur du nom « My Kutenova » (par défaut, celle du texte) ;
   --mk-line   : couleur du contour (par défaut, le texte à 15 %). */
.mk-sign {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  border: 1px solid var(--mk-line, color-mix(in srgb, currentColor 15%, transparent));
  border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.85rem; line-height: 1.2;
  transition: border-color 0.25s, transform 0.25s, background-color 0.25s;
}
.mk-sign:hover, .mk-sign:focus-visible {
  border-color: var(--mk-accent, #2457ff);
  background-color: color-mix(in srgb, var(--mk-accent, #2457ff) 8%, transparent);
  transform: translateY(-1px);
}
.mk-sign b { color: var(--mk-strong, currentColor); font-weight: 700; }
.mk-sign__kuto { width: 26px; height: 26px; flex: none; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mk-sign:hover .mk-sign__kuto, .mk-sign:focus-visible .mk-sign__kuto { transform: rotate(-8deg) scale(1.08); }
.mk-eye { transform-box: fill-box; transform-origin: center; }
.mk-sign:hover .mk-eye, .mk-sign:focus-visible .mk-eye { animation: mk-blink 0.9s ease-in-out 1; }
@keyframes mk-blink { 0%, 40%, 100% { transform: scaleY(1); } 50%, 60% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) {
  .mk-sign, .mk-sign__kuto { transition: none; }
  .mk-sign:hover, .mk-sign:focus-visible, .mk-sign:hover .mk-sign__kuto, .mk-sign:focus-visible .mk-sign__kuto { transform: none; }
  .mk-sign:hover .mk-eye, .mk-sign:focus-visible .mk-eye { animation: none; }
}

.mk-sign { --mk-accent: #c9a24a; }

/* Finitions « luxe » communes aux trois sites (décision de Kentin du 23/10 : sobre et lent, fondus doux,
   étalonnage cinéma, liens qui se soulignent, reflets lents sur les boutons, images qui respirent, curseur discret).
   Chaque site règle ses couleurs avec --lx-accent ; tout est coupé en mouvement réduit. */

/* Étalonnage cinéma des photos (les scènes WebGL et le héros gardent leur propre rendu). */
body.site-tga main img:not([src$=".svg"]) { filter: contrast(1.04) saturate(1.05) sepia(.07); }
body.site-haxler main img:not([src$=".svg"]) { filter: contrast(1.05) saturate(.93); }
body.site-novahr main img:not([src$=".svg"]) { filter: contrast(1.05) saturate(.94) sepia(.06); }
main [data-fx] img, main .vitrine img, main .scene img, main .accueil img, main .film__cadre img,
main .portes img, main .teaser-fond img { filter: none !important; }

/* Grain très fin, fixe (une seule couche, sans animation). */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

body.site-tga { --lx-accent: #c9a24a; --lx-reflet: rgba(255, 236, 190, .55); }
body.site-haxler { --lx-accent: #e9ecef; --lx-reflet: rgba(255, 255, 255, .5); }
body.site-novahr { --lx-accent: #d4b47e; --lx-reflet: rgba(255, 236, 200, .5); }

/* Liens de navigation et du pied de page : un fin trait qui se trace au survol. */
.site-tga .nav a, .site-tga .foot__liste a, .site-tga .foot__legal a,
.site-novahr .nav a, .site-novahr .pied a:not(.mk-sign), .site-novahr .lien {
  text-decoration: none;
  background-image: linear-gradient(var(--lx-accent), var(--lx-accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .9s cubic-bezier(.22, .61, .36, 1), color .6s;
}
.site-tga .nav a:hover, .site-tga .nav a:focus-visible, .site-tga .foot__liste a:hover, .site-tga .foot__legal a:hover,
.site-novahr .nav a:hover, .site-novahr .nav a:focus-visible, .site-novahr .pied a:not(.mk-sign):hover, .site-novahr .lien:hover {
  background-size: 100% 1px;
}
.site-novahr .nav a { border-bottom-color: transparent !important; }
.site-haxler .lien-souligne { transition-duration: .9s !important; }

/* Boutons : un reflet qui glisse lentement au survol. */
.btn, .bouton { position: relative; overflow: hidden; isolation: isolate; }
.btn::before, .bouton::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, var(--lx-reflet), transparent);
  transform: translateX(0) skewX(-18deg); opacity: 0;
}
.btn:hover::before, .btn:focus-visible::before, .bouton:hover::before, .bouton:focus-visible::before {
  animation: lx-reflet 1.6s cubic-bezier(.22, .61, .36, 1) 1;
}
@keyframes lx-reflet { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }

/* Images qui respirent : zoom très lent au survol (la classe est posée par luxe.js sur les photos cadrées). */
.lx-respire { transition: scale 2.4s cubic-bezier(.22, .61, .36, 1); }
.lx-cadre:hover .lx-respire { scale: 1.045; }

/* Curseur discret (ordinateur) : un point qui suit, un anneau qui s'ouvre sur les éléments cliquables. */
.lx-curseur { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; }
.lx-curseur__point, .lx-curseur__anneau { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.lx-curseur__point { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--lx-accent); }
.lx-curseur__anneau { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--lx-accent); opacity: .45;
  transition: width .6s cubic-bezier(.22, .61, .36, 1), height .6s cubic-bezier(.22, .61, .36, 1), margin .6s cubic-bezier(.22, .61, .36, 1), opacity .6s; }
.lx-curseur--lien .lx-curseur__anneau { width: 58px; height: 58px; margin: -29px 0 0 -29px; opacity: .8; }
.lx-curseur--cache .lx-curseur__point, .lx-curseur--cache .lx-curseur__anneau { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover::before, .bouton:hover::before { animation: none; }
  .lx-respire, .lx-cadre:hover .lx-respire { transition: none; scale: none; }
}
html.reduce-motion .btn:hover::before, html.reduce-motion .bouton:hover::before { animation: none; }
html.reduce-motion .lx-cadre:hover .lx-respire { scale: none; }
html.reduce-motion .lx-curseur { display: none; }
@media (pointer: coarse) { .lx-curseur { display: none; } }