/* ==========================================================================
   MOUNAÏCHA FABRICS : feuille de style
   Une maison d'étoffes vue de nuit : le décor est sombre et mat, l'or ne sert
   qu'aux filets, et la seule couleur du site vient des tissus photographiés.
   ========================================================================== */

/* ---------------------------------------------------------------- jetons */
:root {
  --creme:    #F7F2E9;   /* le papier */
  --creme-2:  #F1E9DC;   /* une surface posée dessus */
  --creme-3:  #E8DCCB;   /* le creux, le survol */
  --creme-4:  #DCCDB7;
  --encre:    #191310;   /* le texte */
  --encre-2:  #574B42;   /* le texte secondaire */
  --encre-3:  #6E6156;   /* les libellés */
  --or:       #8A5E13;   /* l'accent, repris du sceau */
  --or-vif:   #6F4A0C;
  --vin:      #7E2433;   /* le bordeaux du logo, pour les boutons */
  --vin-vif:  #641B28;
  --filet:    rgba(138, 94, 19, .30);
  --filet-2:  rgba(25, 19, 16, .13);

  --display: "Prata", "Times New Roman", serif;
  --plume:   "Cormorant Garamond", Georgia, serif;
  --texte:   "Jost", "Avenir Next", "Segoe UI", sans-serif;

  --entete-h: 62px;
  --les-gap: 1.2rem;
  --page:    clamp(1.25rem, 5vw, 5.5rem);
  --rythme:  clamp(4.5rem, 11vw, 11rem);
  --lent:    760ms cubic-bezier(.16, 1, .3, 1);   /* révélations au défilé */
  --moyen:   260ms cubic-bezier(.23, 1, .32, 1);  /* ouvertures, survols   */
  --sortie:  170ms cubic-bezier(.23, 1, .32, 1);  /* toujours plus vif     */
  --vif:     150ms cubic-bezier(.23, 1, .32, 1);  /* pressions, couleurs   */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 300 clamp(.95rem, .35vw + .88rem, 1.06rem)/1.75 var(--texte);
  letter-spacing: .012em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Le grain : sans lui le noir est plastique. Posé une seule fois, non capté
   par la souris, et retiré si l'utilisateur préfère moins d'effets. */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }

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

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

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

::selection { background: var(--vin); color: var(--creme); }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--or); color: var(--creme);
  padding: .8rem 1.4rem; font: 500 .8rem var(--texte);
  letter-spacing: .16em; text-transform: uppercase;
}
.saut-contenu:focus { left: var(--page); top: 1rem; z-index: 200; }

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

/* ------------------------------------------------------------ typographie */
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.06; }

.titre {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.2vw, 5.4rem);
  letter-spacing: -.012em;
}
.titre-moyen {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  line-height: 1.12;
}

.plume {
  font-family: var(--plume);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  line-height: 1.42; letter-spacing: .005em;
  color: var(--encre);
}

.prose { max-width: 34em; color: var(--encre-2); }
.prose p { margin: 0 0 1.15em; }
.prose p:last-child { margin-bottom: 0; }

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

/* ------------------------------------------------------------------ liens */
.lien {
  display: inline-flex; align-items: center; gap: .7rem;
  padding-bottom: .3rem;
  font: 400 .74rem/1 var(--texte);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--encre);
  border-bottom: 1px solid var(--filet);
  transition: color var(--vif), border-color var(--vif);
}
.lien svg { transition: transform var(--moyen); }
.lien:hover { color: var(--or-vif); border-color: var(--or); }
.lien:hover svg { transform: translateX(5px); }

/* Le bouton est une pastille ; la flèche vit dans son propre disque, calé sur
   le padding intérieur droit : elle bouge, le bouton s'enfonce. */
.bouton {
  --fond: var(--vin);
  --encre-bouton: var(--creme);
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 52px; padding: .7rem .8rem .7rem 1.7rem;
  font: 400 .72rem/1 var(--texte);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--encre-bouton); background: var(--fond);
  border: 1px solid var(--fond); border-radius: 999px;
  cursor: pointer;
  transition: background var(--moyen), color var(--moyen),
              border-color var(--moyen), transform var(--moyen);
}
.bouton__disque {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(247, 242, 233, .20);
  transition: transform var(--moyen), background var(--moyen);
}
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: var(--vin-vif); border-color: var(--vin-vif); }
  .bouton:hover .bouton__disque { transform: translate(3px, -1px) scale(1.06); }
}
.bouton:active { transform: scale(.98); }

.bouton-fantome {
  --fond: transparent;
  --encre-bouton: var(--encre);
  border-color: var(--filet);
  padding-inline: 1.7rem;
}
.bouton-fantome .bouton__disque { background: rgba(25, 19, 16, .07); }
.bouton-fantome:hover {
  color: var(--or-vif); background: rgba(138, 94, 19, .08); border-color: var(--or);
}

/* Le double cadre : un plateau mat, puis la pièce posée dedans. Rien d'important
   ne touche jamais directement le fond. */
.plateau {
  padding: clamp(6px, .7vw, 11px);
  background: rgba(25, 19, 16, .035);
  border: 1px solid var(--filet-2);
  border-radius: 3px;
}
.plateau > * { border-radius: 1px; }

/* ------------------------------------------------------------ mise en page */
.enveloppe { padding-inline: var(--page); }
.section   { padding-block: var(--rythme); }
.large     { max-width: 1680px; margin-inline: auto; }
.etroit    { max-width: 1180px; margin-inline: auto; }

.filet-h { height: 1px; background: var(--filet); border: 0; margin: 0; }

/* --------------------------------------------------------------- en-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: var(--entete-h);
  padding-inline: var(--page);
  transition: background var(--moyen), backdrop-filter var(--moyen),
              border-color var(--moyen);
  border-bottom: 1px solid transparent;
}
.entete.posee {
  background: rgba(247, 242, 233, .90);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--filet);
}

.entete__marque img { width: clamp(132px, 15vw, 188px); }

.entete__nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.entete__nav a {
  position: relative;
  font: 400 .7rem/1 var(--texte);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--encre-2);
  transition: color var(--vif);
}
.entete__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 1px; background: var(--or);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--moyen);
}
.entete__nav a:hover, .entete__nav a[aria-current="page"] { color: var(--encre); }
.entete__nav a:hover::after, .entete__nav a[aria-current="page"]::after { transform: scaleX(1); }

.entete__wa {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .62rem 1.15rem;
  border: 1px solid var(--filet); border-radius: 1px;
  font: 400 .68rem/1 var(--texte);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--or);
  transition: border-color var(--vif), background var(--vif), color var(--vif);
}
.entete__wa:hover { border-color: var(--or); background: rgba(138,94,19,.1); color: var(--or-vif); }

.nav-wa { display: none; }

.burger {
  display: none; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.burger span {
  display: block; width: 24px; height: 1px; margin: 6px auto;
  background: var(--encre); transition: transform var(--moyen), opacity var(--vif);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .entete__nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center;
    gap: 2.2rem;
    background: rgba(247,242,233,.985);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--moyen), visibility var(--moyen);
  }
  .entete__nav.ouverte { opacity: 1; visibility: visible; }
  .entete__nav a {
    font-size: .95rem; letter-spacing: .3em;
    opacity: 0; transform: translateY(30px);
    transition: opacity var(--moyen), transform var(--moyen);
  }
  .entete__nav.ouverte a { opacity: 1; transform: none; }
  .entete__nav.ouverte a:nth-child(1) { transition-delay:  60ms; }
  .entete__nav.ouverte a:nth-child(2) { transition-delay: 110ms; }
  .entete__nav.ouverte a:nth-child(3) { transition-delay: 160ms; }
  .entete__nav.ouverte a:nth-child(4) { transition-delay: 210ms; }
  .entete__nav.ouverte a:nth-child(5) { transition-delay: 260ms; }

  /* L'appel principal ne doit pas disparaître avec la barre : il reprend sa
     place au bas du menu déployé. */
  .nav-wa {
    display: inline-flex; align-items: center; gap: .6rem;
    margin-top: 1.4rem; padding: .95rem 1.8rem;
    background: var(--or); color: var(--creme) !important;
    border-radius: 999px;
    font-size: .72rem !important; letter-spacing: .2em !important;
  }
  .nav-wa::after { display: none; }
  .entete__wa { display: none; }
}

@media (min-width: 901px) { :root { --entete-h: 78px; } }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid; align-items: center;
  padding: clamp(6.5rem, 13vh, 10rem) var(--page) clamp(5rem, 11vh, 8rem);
  overflow: hidden;
}

/* Des lés d'étoffe qui défilent lentement derrière le titre, assourdis : ils
   donnent la profondeur sans jamais concurrencer le texte. Chaque colonne
   contient six étoffes, écrites deux fois : c'est le doublon qui rend la
   boucle invisible. */
.hero__les {
  position: absolute; inset: -8% 0 -8% auto;
  right: 0; width: min(54vw, 840px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--les-gap);
  opacity: .82;
  mask-image: linear-gradient(to right, transparent, #000 46%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 46%, #000 100%);
}
.hero__colonne {
  display: grid; gap: var(--les-gap); align-content: start;
  will-change: transform;
}
.hero__colonne img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: saturate(.98) brightness(1.01);
}
.hero__colonne--a { animation: derive 74s linear infinite; }
.hero__colonne--b { animation: derive 96s linear infinite reverse; margin-top: -9%; }
.hero__colonne--c { animation: derive 84s linear infinite; margin-top: -3%; }
.hero__colonne--d { animation: derive 108s linear infinite reverse; margin-top: -14%; }

/* La quatrième colonne n'apparaît que si l'écran est assez large pour qu'elle
   reste un lé, et non une vignette. */
.hero__colonne--d { display: none; }
@media (min-width: 1280px) {
  .hero__les { grid-template-columns: repeat(4, 1fr); width: min(58vw, 1000px); }
  .hero__colonne--d { display: grid; }
}

/* La moitié du bloc vaut (n/2 images + (n-1)/2 gouttières) : il manque une
   demi-gouttière pour que le raccord tombe juste. */
@keyframes derive { to { transform: translateY(calc(-50% - var(--les-gap) / 2)); } }

.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(112% 84% at 2% 45%, rgba(247,242,233,1) 34%, rgba(247,242,233,.72) 62%, transparent 86%),
    linear-gradient(to top, var(--creme) 2%, transparent 40%);
}

.hero__mot { position: relative; z-index: 2; max-width: min(46rem, 92%); }
.hero__sceau { width: clamp(64px, 8vw, 92px); margin-bottom: 1.9rem; opacity: .95; }
.hero__titre {
  font-family: var(--display);
  font-size: clamp(2.75rem, 7.4vw, 6.4rem);
  line-height: .98; letter-spacing: -.022em;
  margin: 0 0 1.5rem;
}
.hero__titre em { font-style: normal; color: var(--or); }
.hero__sous {
  max-width: 30em; margin: 0 0 2.6rem;
  color: var(--encre-2); font-size: 1.02rem; line-height: 1.8;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

@media (max-width: 860px) {
  .hero__les { width: 100%; opacity: .34; mask-image: linear-gradient(to bottom, transparent, #000 60%); }
  .hero { min-height: auto; }
}

/* ------------------------------------------------------------ révélations */
/* Ce qui est déjà à l'écran au chargement ne doit rien attendre : il monte
   tout seul, en cascade, sans observateur ni JavaScript. */
@keyframes monter {
  from { opacity: 0; transform: translateY(26px); filter: blur(7px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
.leve {
  animation: monter var(--lent) both;
  animation-delay: var(--retard, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .leve { animation: none; }
}

.reveler { opacity: 0; transform: translateY(28px); filter: blur(7px); }
.reveler.vu {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--lent), transform var(--lent), filter var(--lent);
  transition-delay: var(--retard, 0ms);
}
.no-js .reveler { opacity: 1; transform: none; }

/* --------------------------------------------------------- chiffres/maison */
/* Les filets viennent d'un contour, pas d'un fond qui transparaît dans les
   interstices : sinon la case vide d'une rangée incomplète reste allumée. */
.trois {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.trois > div {
  outline: 1px solid var(--filet);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem);
}
.trois dt {
  font: 400 .66rem/1 var(--texte);
  letter-spacing: .28em; text-transform: uppercase; color: var(--or);
  margin-bottom: 1rem;
}
.trois dd {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.14;
}
.trois p { margin: .8rem 0 0; font-size: .88rem; color: var(--encre-3); line-height: 1.65; }

/* ------------------------------------------------ mur d'étoffes (accueil) */
.mur {
  display: grid; gap: clamp(.5rem, 1vw, .95rem);
  grid-template-columns: repeat(12, 1fr);
}
.mur .piece { grid-column: span 3; }
.mur .piece:nth-child(1)  { grid-column: span 4; grid-row: span 2; }
.mur .piece:nth-child(6)  { grid-column: span 4; }
.mur .piece:nth-child(11) { grid-column: span 5; }
@media (max-width: 1100px) { .mur .piece { grid-column: span 4; } .mur .piece:nth-child(1) { grid-column: span 8; } }
@media (max-width: 720px)  { .mur { grid-template-columns: repeat(4, 1fr); } .mur .piece, .mur .piece:nth-child(n) { grid-column: span 2; grid-row: auto; } }

/* --------------------------------------------------------------- la pièce */
.piece {
  position: relative; display: block;
  background: var(--creme-2);
  border: 1px solid transparent;
  overflow: hidden; cursor: pointer;
  text-align: left; width: 100%; padding: 0; color: inherit;
  font: inherit;
  transition: border-color var(--moyen), transform var(--moyen);
}
.piece__vue { display: block; position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--creme-3); }
.piece.haute .piece__vue { aspect-ratio: 4/8.15; }
.piece__vue img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1), filter var(--moyen);
  filter: saturate(.96) brightness(.94);
}
@media (hover: hover) and (pointer: fine) {
  .piece:hover { border-color: var(--filet); transform: translateY(-4px); }
  .piece:hover .piece__vue img { transform: scale(1.055); filter: saturate(1.05) brightness(1.02); }
}
.piece:focus-visible { border-color: var(--filet); }
.piece:focus-visible .piece__vue img { transform: scale(1.055); filter: saturate(1.05) brightness(1.02); }
/* La carte s'enfonce sous le doigt : c'est le seul retour tactile qu'on a. */
.piece:active { transform: scale(.985); }

.piece__voile {
  display: block;
  position: absolute; inset: auto 0 0; padding: 3.4rem .95rem .95rem;
  background: linear-gradient(to top, rgba(247,242,233,.97) 14%, rgba(247,242,233,.78) 54%, transparent);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--moyen), transform var(--moyen);
}
.piece:hover .piece__voile,
.piece:focus-visible .piece__voile { opacity: 1; transform: none; }
@media (hover: none) { .piece__voile { opacity: 1; transform: none; } }

.piece__nom {
  display: block;
  font-family: var(--display); font-size: .96rem; line-height: 1.28;
  margin: 0 0 .35rem;
}
.piece__ligne {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .8rem;
  font-size: .74rem; letter-spacing: .1em; color: var(--encre-2);
}
.piece__prix { color: var(--or); font-variant-numeric: tabular-nums; }
.piece__ref  { color: var(--encre-3); font-size: .66rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }

.epingle {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  display: inline-block; padding: .3rem .6rem;
  background: rgba(247,242,233,.86); backdrop-filter: blur(6px);
  border: 1px solid var(--filet);
  font: 400 .58rem/1 var(--texte);
  letter-spacing: .18em; text-transform: uppercase; color: var(--or-vif);
}

/* L'avis de la maison : les pièces uniques ne se voient qu'en boutique.
   Un encadré à filet d'or, assez présent pour être lu, assez sobre pour ne
   pas concurrencer les étoffes. */
.avis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.2rem, 3vw, 2.2rem);
  background: linear-gradient(100deg, rgba(138,94,19,.09), rgba(138,94,19,.02));
  border: 1px solid var(--filet);
  border-radius: 2px;
}
.avis__sceau { flex: none; width: 46px; opacity: .9; }
.avis__mot { flex: 1 1 320px; margin: 0; color: var(--encre); font-size: .98rem; line-height: 1.7; }
.avis__mot b { color: var(--or-vif); font-weight: 400; }
.avis .bouton { flex: none; }
@media (max-width: 560px) { .avis .bouton { width: 100%; } }

/* ------------------------------------------------------------- la boutique */
.boutique-tete { padding-top: clamp(8rem, 16vh, 11.5rem); }

.filtres {
  position: sticky; top: var(--entete-h); z-index: 30;
  margin-block: 2.4rem 0;
  padding-block: 1rem;
  background: rgba(247,242,233,.94);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--filet);
  transition: transform var(--moyen), opacity var(--sortie);
}
/* Le tamis mange un bon tiers d'un écran de téléphone. Il s'efface dès qu'on
   descend vers les étoffes, et revient au premier geste vers le haut. Comme
   c'est une transformation, la galerie ne bouge pas d'un pixel. */
.filtres--repli {
  transform: translateY(calc(-100% - var(--entete-h)));
  opacity: 0;
  pointer-events: none;
}
.filtres__rangee {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.5rem;
}
.filtres__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.filtres__etiquette {
  margin-right: .5rem;
  font: 400 .62rem/1 var(--texte);
  letter-spacing: .26em; text-transform: uppercase; color: var(--encre-3);
}
.jeton {
  min-height: 34px; padding: .42rem .85rem;
  background: transparent; border: 1px solid var(--filet-2); border-radius: 999px;
  font: 400 .7rem/1 var(--texte); letter-spacing: .08em;
  color: var(--encre-2); cursor: pointer; white-space: nowrap;
  transition: color var(--vif), border-color var(--vif), background var(--vif);
}
.jeton { transition: color var(--vif), border-color var(--vif), background var(--vif), transform var(--vif); }
@media (hover: hover) and (pointer: fine) {
  .jeton:hover { color: var(--encre); border-color: var(--filet); }
}
.jeton:active { transform: scale(.96); }
.jeton[aria-pressed="true"] {
  color: var(--creme); background: var(--vin); border-color: var(--vin); font-weight: 400;
}

/* Le champ de recherche est une simple ligne : l'icône et la saisie sont
   posées côte à côte, sans positionnement absolu à recaler. */
.recherche {
  display: flex; align-items: center; gap: .55rem;
  flex: none; width: 100%; max-width: 310px;
  padding-inline: .1rem;
  border-bottom: 1px solid var(--filet-2);
  transition: border-color var(--vif);
}
.recherche:focus-within { border-bottom-color: var(--or); }
.recherche svg { flex: none; color: var(--encre-3); }
.recherche input {
  flex: 1 1 auto; min-width: 0; min-height: 42px;
  padding: .4rem 0;
  background: transparent; color: var(--encre);
  border: 0;
  /* 16 px minimum : en dessous, iOS zoome tout seul à la mise au point. */
  font: 300 1rem var(--texte);
}
.recherche input::placeholder { color: var(--encre-3); }
.recherche input:focus { outline: 0; }
.recherche input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.filtres__bilan {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: .9rem;
  font: 400 .68rem/1 var(--texte);
  letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3);
}
.filtres__bilan b { color: var(--or); font-weight: 400; }
.raz {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--encre-2);
  border-bottom: 1px solid var(--filet); padding-bottom: 2px;
}
.raz:hover { color: var(--or-vif); }

.tri {
  min-height: 34px; padding: .35rem 1.6rem .35rem .55rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C69B54' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .35rem center;
  color: var(--encre-2); border: 0; border-bottom: 1px solid var(--filet-2);
  font: 400 .68rem/1 var(--texte); letter-spacing: .14em;
  cursor: pointer; appearance: none; text-transform: uppercase;
}
.tri:focus { outline: 0; border-bottom-color: var(--or); }
.tri option { background: var(--creme-2); color: var(--encre); }

/* Sur petit écran, quatre rangées de jetons repoussaient les étoffes hors de
   l'écran. Chaque groupe devient un ruban qu'on fait glisser du doigt. La
   barre reste collante : c'est le repli au défilement qui lui reprend la
   hauteur, sans obliger à remonter toute la galerie pour trier. */
@media (max-width: 900px) {
  .filtres { padding-block: 1.1rem; }
  .filtres__rangee { flex-direction: column; align-items: stretch; gap: .75rem; }
  .filtres__groupe {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .2rem;
    /* Le dégradé de droite dit qu'il reste des jetons au-delà du bord. */
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .filtres__groupe::-webkit-scrollbar { display: none; }
  .filtres__etiquette { position: sticky; left: 0; z-index: 1; }
  .recherche { max-width: none; }
  .filtres__bilan { margin-top: 1.1rem; }
  .filtres__bilan > span:last-child { margin-left: 0 !important; }
}

.galerie {
  display: grid; gap: clamp(.55rem, 1.1vw, 1.05rem);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
@media (max-width: 560px) { .galerie { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }

.vide {
  padding: clamp(3rem, 9vw, 6rem) 0; text-align: center; color: var(--encre-3);
}
.vide p { margin: 0 0 1.6rem; }

.encore { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 4rem); }

/* ------------------------------------------------------------- la fiche */
.fiche {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(0px, 3vw, 3rem);
  background: rgba(25, 19, 16, .58);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--sortie), visibility var(--sortie);
}
.fiche.ouverte {
  opacity: 1; visibility: visible;
  transition: opacity var(--moyen), visibility var(--moyen);
}

.fiche__boite {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  width: min(1240px, 100%); max-height: min(94svh, 900px);
  background: var(--creme-2);
  border: 1px solid var(--filet);
  overflow: hidden;
  transform: scale(.97) translateY(12px);
  transition: transform var(--sortie);
}
.fiche.ouverte .fiche__boite { transform: none; transition: transform var(--moyen); }

.fiche__vue {
  position: relative; background: var(--creme-3); overflow: hidden;
  min-height: 320px;
}
.fiche__vue img { width: 100%; height: 100%; object-fit: cover; }

.fiche__detail {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  overflow-y: auto;
}
.fiche__ref {
  font: 400 .64rem/1 var(--texte);
  letter-spacing: .3em; text-transform: uppercase; color: var(--or);
}
.fiche__nom { font-family: var(--display); font-size: clamp(1.6rem, 2.7vw, 2.5rem); line-height: 1.1; }

.fiche__attributs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; border-block: 1px solid var(--filet-2); }
.fiche__attributs div { padding: .85rem .1rem; }
.fiche__attributs dt {
  font: 400 .58rem/1 var(--texte);
  letter-spacing: .24em; text-transform: uppercase; color: var(--encre-3);
  margin-bottom: .45rem;
}
.fiche__attributs dd { margin: 0; font-size: .88rem; color: var(--encre); }

.metrage { display: grid; gap: .55rem; }
.metrage__choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.coupe {
  flex: 1 1 140px; min-height: 62px; padding: .7rem 1rem; text-align: left;
  background: transparent; border: 1px solid var(--filet-2); border-radius: 1px;
  color: var(--encre-2); cursor: pointer; font: inherit;
  transition: border-color var(--vif), background var(--vif), color var(--vif);
}
.coupe:hover { border-color: var(--filet); color: var(--encre); }
.coupe[aria-pressed="true"] { border-color: var(--or); background: rgba(138,94,19,.09); color: var(--encre); }
.coupe b { display: block; font: 400 .72rem/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .4rem; }
.coupe span { font-family: var(--display); font-size: 1.05rem; color: var(--or); font-variant-numeric: tabular-nums; }

.fiche__prix {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--or-vif);
  font-variant-numeric: tabular-nums;
}
.fiche__prix small { display: block; font: 400 .64rem/1 var(--texte); letter-spacing: .24em; text-transform: uppercase; color: var(--encre-3); margin-top: .6rem; }

.coloris { display: grid; gap: .7rem; }
.coloris__bande { display: flex; flex-wrap: wrap; gap: .4rem; }
.coloris__bande button {
  width: 44px; height: 55px; padding: 0; overflow: hidden; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 1px;
  transition: border-color var(--vif), transform var(--vif);
}
.coloris__bande img { width: 100%; height: 100%; object-fit: cover; }
.coloris__bande button:hover { transform: translateY(-2px); border-color: var(--filet); }
.coloris__bande button[aria-current="true"] { border-color: var(--or); }

.fiche__fermer {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(247,242,233,.86); backdrop-filter: blur(6px);
  border: 1px solid var(--filet-2); border-radius: 50%;
  color: var(--encre); font-size: 1.2rem; cursor: pointer; line-height: 1;
  transition: background var(--vif), border-color var(--vif), color var(--vif);
}
.fiche__fermer:hover { background: var(--or); border-color: var(--or); color: var(--creme); }

.fiche__nav {
  position: absolute; top: 50%; z-index: 3;
  width: 46px; height: 46px; transform: translateY(-50%);
  display: grid; place-items: center;
  background: rgba(247,242,233,.86); backdrop-filter: blur(6px);
  border: 1px solid var(--filet-2); border-radius: 50%;
  color: var(--encre); cursor: pointer; font-size: 1rem;
  transition: background var(--vif), color var(--vif), border-color var(--vif);
}
.fiche__nav:hover { background: var(--or); color: var(--creme); border-color: var(--or); }
.fiche__nav--p { left: .8rem; }
.fiche__nav--s { right: .8rem; }

@media (max-width: 900px) {
  .fiche { padding: 0; }
  .fiche__boite { grid-template-columns: 1fr; max-height: 100svh; height: 100svh; overflow-y: auto; }
  /* L'image ne prend que la moitié haute : le prix et le métrage doivent être
     visibles sans avoir à deviner qu'on peut faire défiler. */
  .fiche__vue { aspect-ratio: auto; height: 48svh; min-height: 0; flex: none; }
  .fiche__detail { padding-bottom: 2.5rem; }
  .fiche__nav { display: none; }
}

/* ------------------------------------------------------------- l'histoire */
.histoire {
  display: grid; gap: clamp(2.4rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .histoire { grid-template-columns: 1fr; } }

.film { position: relative; border: 1px solid var(--filet); background: var(--creme-2); }
.film video { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: var(--creme-3); }
.film__cartouche {
  position: absolute; inset: auto 0 0; padding: 2.6rem 1rem .9rem;
  background: linear-gradient(to top, rgba(247,242,233,.95), transparent);
  font: 400 .62rem/1 var(--texte);
  letter-spacing: .24em; text-transform: uppercase; color: var(--encre-2);
  pointer-events: none;
}
.film.joue .film__cartouche { opacity: 0; transition: opacity var(--moyen); }

.citations { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
.citation { padding-left: clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--filet); }
.citation p { margin: 0; }
.citation footer {
  margin-top: .9rem;
  font: 400 .64rem/1 var(--texte);
  letter-spacing: .26em; text-transform: uppercase; color: var(--or);
}

/* ---------------------------------------------------------- les maisons */
.maisons {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.maisons span {
  outline: 1px solid var(--filet-2);
  padding: 1.5rem .8rem; text-align: center;
  font: 400 .72rem/1.5 var(--texte);
  letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2);
  transition: color var(--vif), background var(--vif);
}
.maisons span:hover { color: var(--or-vif); background: var(--creme-2); }
.maisons span em { display: block; font-style: normal; font-size: .58rem; letter-spacing: .16em; color: var(--encre-3); margin-top: .45rem; }

/* ------------------------------------------------------------- la visite */
.visite {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .visite { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- l'accompagnement */
/* La photo montre le résultat dont parle la liste : une étoffe devenue tenue,
   turban et parure compris. Le texte tient la colonne de droite. */
.accompagnement {
  display: grid; gap: clamp(2.4rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
}
.accompagnement img { display: block; width: 100%; height: auto; }
.accompagnement__legende {
  margin: .9rem 0 0;
  font: 400 .72rem/1.6 var(--texte);
  letter-spacing: .04em; color: var(--encre-3);
}
/* L'ancre vise la section : sans marge, l'en-tête fixe couvrirait le titre. */
#accompagnement { scroll-margin-top: var(--entete-h); }

/* Une liste de service, en lignes séparées d'un filet : elle ne pouvait pas
   reprendre la grille en trois boîtes déjà utilisée plus haut. */
.conseils { margin: 0; display: grid; }
.conseils__ligne {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: .4rem 2rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-top: 1px solid var(--filet);
}
.conseils__ligne:last-child { border-bottom: 1px solid var(--filet); }
.conseils dt {
  font: 400 .64rem/1.5 var(--texte);
  letter-spacing: .24em; text-transform: uppercase; color: var(--or);
}
.conseils dd {
  margin: 0; color: var(--encre-2);
  font-size: .95rem; line-height: 1.75;
}

.accompagnement__note {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 1.6rem;
  max-width: 34em; color: var(--encre-2);
  font-size: .95rem; line-height: 1.75;
}
.accompagnement__note b { color: var(--or-vif); font-weight: 400; }

@media (max-width: 900px) {
  .accompagnement { grid-template-columns: 1fr; }
  /* La photo passe sous le texte : le titre doit rester le premier regard. */
  .accompagnement > :first-child { order: 2; }
}
@media (max-width: 620px) {
  .conseils__ligne { grid-template-columns: 1fr; gap: .45rem; }
}

/* La parole de la fondatrice, adossée à son portrait. */
.parole {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  align-items: center;
  max-width: 1180px; margin-inline: auto;
}
.parole img { display: block; width: 100%; height: auto; }
.parole blockquote { margin: 0; }
@media (max-width: 820px) { .parole { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- les clientes */
/* Les photos arrivent de mariages, de salons, de téléphones : leurs cadrages
   n'ont rien en commun. Des colonnes plutôt qu'une grille, pour que chacune
   garde ses proportions au lieu d'être recadrée de force. */
.clientes {
  column-count: 4;
  column-gap: clamp(.5rem, 1vw, .95rem);
}
@media (max-width: 1100px) { .clientes { column-count: 3; } }
@media (max-width: 720px)  { .clientes { column-count: 2; } }

.portrait {
  break-inside: avoid;
  margin: 0 0 clamp(.5rem, 1vw, .95rem);
  background: var(--creme-2);
  border: 1px solid transparent;
  overflow: hidden;
  transition: border-color var(--moyen), transform var(--moyen);
}
.portrait img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .portrait:hover { border-color: var(--filet); }
}

.clientes__note {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  color: var(--encre-3); font-size: .92rem;
}

/* Un lien discret au fil du texte, souligné d'un filet or. */
.lien-texte {
  color: var(--encre); border-bottom: 1px solid var(--or);
  padding-bottom: 1px; transition: color var(--vif), border-color var(--vif);
}
.lien-texte:hover { color: var(--or-vif); border-bottom-color: var(--or-vif); }
.visite__image { border: 1px solid var(--filet); }
.visite__image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.coordonnees { display: grid; gap: 1.6rem; margin: 2.2rem 0; }
.coordonnees div { display: grid; gap: .4rem; }
.coordonnees dt {
  font: 400 .62rem/1 var(--texte);
  letter-spacing: .28em; text-transform: uppercase; color: var(--or);
}
.coordonnees dd { margin: 0; font-size: 1rem; color: var(--encre); }
.coordonnees a:hover { color: var(--or-vif); }

/* ------------------------------------------------------------------ pied */
.pied {
  padding: clamp(3.5rem, 7vw, 6rem) var(--page) 2.2rem;
  border-top: 1px solid var(--filet);
  background: var(--creme-2);
}
.pied__haut {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(150px, 1fr));
  max-width: 1680px; margin-inline: auto;
}
.pied__marque img { width: 210px; margin-bottom: 1.3rem; }
.pied__marque p { max-width: 26em; color: var(--encre-3); font-size: .9rem; margin: 0; }
.pied h3 {
  margin-bottom: 1.1rem;
  font: 400 .64rem/1 var(--texte);
  letter-spacing: .28em; text-transform: uppercase; color: var(--or);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
/* Les lignes sans lien (les horaires) s'alignent sur les liens voisins,
   en un ton plus clair pour qu'on voie ce qui se clique. */
.pied li { font-size: .9rem; color: var(--encre-3); }
.pied li a { color: var(--encre-2); font-size: .9rem; transition: color var(--vif); }
.pied li a:hover { color: var(--or-vif); }
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  max-width: 1680px; margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  padding-top: 1.6rem; border-top: 1px solid var(--filet-2);
  font: 400 .64rem/1.6 var(--texte);
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3);
}

/* Sur téléphone, l'« auto-fit » tenait encore trois colonnes : celle de la
   marque tombait à une centaine de pixels et le texte descendait un mot par
   ligne. La marque prend toute la largeur, les listes se rangent en dessous. */
@media (max-width: 900px) {
  .pied__haut { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
  .pied__marque p { max-width: none; }
}
@media (max-width: 560px) {
  .pied__haut { gap: 2.4rem 1.6rem; }
  .pied__bas { gap: .6rem; }
}

/* -------------------------------------------------------------- formulaire */
.formulaire { display: grid; gap: 1.5rem; max-width: 34rem; }
.champ { display: grid; gap: .5rem; }
.champ label {
  font: 400 .62rem/1 var(--texte);
  letter-spacing: .26em; text-transform: uppercase; color: var(--encre-3);
}
.champ input, .champ textarea, .champ select {
  min-height: 48px; padding: .8rem .9rem;
  background: var(--creme-2); color: var(--encre);
  border: 1px solid var(--filet-2); border-radius: 1px;
  font: 300 1rem var(--texte);
  transition: border-color var(--vif);
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: 0; border-color: var(--or); }
.champ select option { background: var(--creme-2); }
.erreur { font-size: .78rem; color: #A02A24; letter-spacing: .04em; }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: #A02A24; }

/* ------------------------------------------------- confort et préférences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .reveler { opacity: 1; transform: none; }
  body::before { display: none; }
}