/* ==========================================================================
   UNIKOSE — feuille de style principale
   Registre : galerie nocturne. Les œuvres apportent la couleur,
   le néon de la marque n'intervient qu'en ponctuation (filets, focus, CTA).
   ========================================================================== */

/* --- 1. Jetons de design -------------------------------------------------- */
:root {
  /* Nuit */
  --noir:        #05070a;
  --nuit:        #0a0e14;
  --surface:     #10151d;
  --surface-2:   #161d27;
  --filet:       rgba(243, 239, 231, 0.10);
  --filet-fort:  rgba(243, 239, 231, 0.22);

  /* Encre */
  --ivoire:      #f3efe7;
  --ivoire-doux: #c9cfd8;
  --gris:        #8a94a3;

  /* Néon de marque */
  --braise:      #ff7a2e;
  --braise-clair:#ffa45c;
  --cyan:        #3fd0ff;
  --halo-braise: rgba(255, 122, 46, 0.35);
  --halo-cyan:   rgba(63, 208, 255, 0.30);

  /* Typographie */
  --f-display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --f-corps:   "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs:   0.72rem;
  --t-sm:   0.85rem;
  --t-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --t-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --t-2xl:  clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  --t-3xl:  clamp(2.6rem, 1.4rem + 5.4vw, 6rem);

  /* Rythme */
  --gouttiere: clamp(1.2rem, 0.8rem + 1.6vw, 2.5rem);
  --section:   clamp(4rem, 2.5rem + 6vw, 9rem);
  --largeur:   1440px;
  --largeur-texte: 62ch;

  --rayon:     2px;
  --rayon-lg:  4px;
  --transition: 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 2. Réinitialisation --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--noir);
  color: var(--ivoire);
  font-family: var(--f-corps);
  font-size: var(--t-base);
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

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

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

/* --- 3. Utilitaires -------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--etroit { max-width: 980px; }

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

.kicker {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--braise);
  flex: none;
}

.kicker--centre { justify-content: center; }

.titre-section { font-size: var(--t-2xl); max-width: 20ch; }
.titre-page    { font-size: var(--t-3xl); letter-spacing: -0.035em; }

.chapo {
  font-size: var(--t-lg);
  color: var(--ivoire-doux);
  max-width: var(--largeur-texte);
  line-height: 1.5;
}

.texte-doux { color: var(--ivoire-doux); }
.texte-gris { color: var(--gris); }
.mono {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

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

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

/* --- 4. Boutons ------------------------------------------------------------ */
.btn {
  --btn-teinte: var(--braise);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--btn-teinte);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--ivoire);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--btn-teinte);
  transform: translateY(101%);
  transition: transform var(--transition);
  z-index: -1;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover, .btn:focus-visible {
  color: var(--noir);
  box-shadow: 0 0 28px -6px var(--btn-teinte);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }

.btn--plein { background: var(--braise); border-color: var(--braise); color: var(--noir); }
.btn--plein:hover { box-shadow: 0 0 34px -6px var(--halo-braise); }
.btn--plein::after { background: var(--braise-clair); }

.btn--cyan  { --btn-teinte: var(--cyan); }
.btn--sobre { --btn-teinte: var(--filet-fort); }
.btn--sobre:hover { color: var(--noir); }
.btn--sobre::after { background: var(--ivoire); }
.btn--bloc  { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--filet-fort);
  transition: color var(--transition), border-color var(--transition), gap var(--transition);
}
.lien-fleche:hover { color: var(--braise); border-color: var(--braise); gap: 1rem; }

/* --- 5. En-tête ------------------------------------------------------------ */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--gouttiere);
  padding: 1.1rem var(--gouttiere);
  transition: background var(--transition), border-color var(--transition), padding var(--transition);
  border-bottom: 1px solid transparent;
}

.entete--fond {
  background: rgba(5, 7, 10, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--filet);
  padding-block: 0.75rem;
}

.entete--cachee { transform: translateY(-100%); }
.entete { transition: transform var(--transition), background var(--transition), border-color var(--transition), padding var(--transition); }

.marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.marque__renard {
  width: 40px; height: 40px;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: saturate(1.1);
}

.marque__mot {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding-left: 0.1em;
}

.nav {
  display: flex;
  align-items: center;
  /* Espacement resserré depuis l'arrivée des réseaux : au précédent, « Sur-mesure »
     et « La marque » se coupaient sur deux lignes. */
  gap: clamp(.7rem, 1.35vw, 1.5rem);
  margin-inline: auto;
}

.nav__lien {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.13em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ivoire-doux);
  padding: 0.4rem 0;
  position: relative;
  transition: color var(--transition);
}

.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--braise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--ivoire); }
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { transform: scaleX(1); }

.entete__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.bouton-icone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition);
}
.bouton-icone:hover { border-color: var(--braise); color: var(--braise); }

.pastille {
  min-width: 1.35em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--braise);
  color: var(--noir);
  font-size: 0.7rem;
  line-height: 1.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pastille[hidden] { display: none; }

.burger { display: none; }

/* --- 6. Pied de page ------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--filet);
  background: var(--nuit);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.pied__titre {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1.2rem;
}

.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pied__liste a { color: var(--ivoire-doux); transition: color var(--transition); }
.pied__liste a:hover { color: var(--braise); }

.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--gris);
}

.mention-ip {
  font-size: var(--t-xs);
  color: var(--gris);
  max-width: 78ch;
  line-height: 1.6;
  margin-top: 1.4rem;
}

/* --- 7. Séquence d'ouverture ---------------------------------------------- */
.ouverture {
  position: relative;
  height: 680vh;              /* course de scroll de la séquence */
  background: var(--noir);
}

.ouverture__scene {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 50% 48%;
  background: radial-gradient(120% 90% at 50% 55%, #0b1119 0%, #05070a 62%);
}

.ouverture__voile {
  position: absolute; inset: 0;
  background: var(--noir);
  z-index: 6;
  pointer-events: none;
}

.ouverture__profondeur {
  position: absolute; inset: -20%;
  background:
    radial-gradient(50% 40% at 50% 50%, rgba(63, 208, 255, 0.16), transparent 70%),
    radial-gradient(70% 55% at 50% 60%, rgba(255, 122, 46, 0.10), transparent 75%);
  opacity: 0;
  z-index: 0;
}

.ouverture__grille {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(63, 208, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 208, 255, 0.14) 1px, transparent 1px);
  background-size: 90px 90px;
  transform-origin: 50% 100%;
  transform: perspective(600px) rotateX(72deg) translateZ(-40px);
  opacity: 0;
  mask-image: linear-gradient(to top, #000 5%, transparent 65%);
  z-index: 0;
}

.ouverture__champ {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 1;
}

.piece-vol {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(90px, 11vw, 168px);
  aspect-ratio: 3 / 4;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.piece-vol img { width: 100%; height: 100%; object-fit: cover; }

.ouverture__focus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

.focus-piece {
  position: relative;
  width: min(78vw, 46svh);
  aspect-ratio: 3 / 4;
  opacity: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  will-change: transform, opacity;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95);
}

.focus-piece img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Vignettage : la pièce reste éclairée, ses bords se fondent dans la nuit. */
.focus-piece::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(78% 68% at 50% 46%, transparent 40%, rgba(5, 7, 10, 0.75) 100%);
}

/* Reflet de la protection : lecture « surface plastique » sur toute la pièce. */
.focus-protection {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(112deg,
    rgba(255,255,255,0.01) 28%,
    rgba(255,255,255,0.15) 42%,
    rgba(255,255,255,0.03) 52%,
    rgba(255,255,255,0.09) 62%,
    rgba(255,255,255,0.01) 74%);
  box-shadow: inset 0 0 60px rgba(63, 208, 255, 0.16);
  opacity: 0;
  z-index: 1;
}

/* Hors du cadre de la pièce : celle-ci recadre son image en overflow hidden. */
.focus-legende {
  position: absolute;
  left: 50%;
  bottom: clamp(4rem, 9vh, 7rem);
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
  opacity: 0;
}

.ouverture__final {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.6rem;
  padding: var(--gouttiere);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(5,7,10,0.86), rgba(5,7,10,0.97));
}

.ouverture__final[data-actif="oui"] { pointer-events: auto; }

.logotype {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1rem + 9vw, 8.5rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  padding-left: 0.18em;
  line-height: 1;
  text-shadow: 0 0 60px var(--halo-braise);
}

.signature {
  font-family: var(--f-display);
  font-size: clamp(0.72rem, 0.3rem + 1.1vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
  margin: 0;
  padding-left: 0.42em;
}

.signature b { font-weight: 500; color: var(--braise); }

.ouverture__passer {
  position: absolute;
  right: var(--gouttiere);
  bottom: calc(var(--gouttiere) + 0.4rem);
  z-index: 7;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet-fort);
  padding: 0.3rem 0;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.ouverture__passer:hover { color: var(--ivoire); border-color: var(--ivoire); }

.indice-scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--gouttiere) + 0.4rem);
  transform: translateX(-50%);
  z-index: 7;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gris);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: opacity var(--transition);
}

.indice-scroll::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(var(--braise), transparent);
  animation: filer 2.4s ease-in-out infinite;
}

@keyframes filer {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);    opacity: 1;   transform-origin: top; }
}

/* --- 8. Bandeau de preuve sociale ----------------------------------------- */
.preuves {
  border-block: 1px solid var(--filet);
  background: var(--nuit);
}

.preuves__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--filet);
}

.preuve {
  background: var(--nuit);
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  text-align: center;
}

.preuve__valeur {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.5rem;
}

.preuve__valeur span { color: var(--braise); }

.preuve__libelle {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  font-family: var(--f-display);
}

/* --- 9. Grilles de pièces -------------------------------------------------- */
.grille {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}

.grille--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.carte:hover {
  border-color: var(--filet-fort);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.carte__visuel {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--noir);
}

.carte--paysage .carte__visuel { aspect-ratio: 4 / 3; }

.carte__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter var(--transition);
}

.carte:hover .carte__visuel img { transform: scale(1.045); }

.carte__corps {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.carte__titre {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.carte__meta {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  font-family: var(--f-display);
}

.carte__prix {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--ivoire);
}

.carte__lien { position: absolute; inset: 0; z-index: 2; }

.etiquette {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 1;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--filet);
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
}

/* Carte « format » de la boutique : une porte d'entrée vers une section de la
   page Art, pas un produit. Le 13 × 18 en montre deux, plat et Black Box. */
.carte--format { text-decoration: none; }

/* Mosaïque de quatre exemples : deux pièces, chacune en plat et en profond.
   Chaque case reprend le rapport 3/4 des photos, donc le cadrage remplit la
   vignette sans laisser de vide ni déformer. */
.carte__visuel--mosaique {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  aspect-ratio: 3 / 4;
  background: var(--filet);
}

.carte__visuel--mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.etiquette--epuise { color: var(--gris); }
.etiquette--braise { border-color: var(--braise); color: var(--braise); }

/* --- 10. Blocs éditoriaux --------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.duo--large { grid-template-columns: 1.15fr 1fr; }

.duo__visuel {
  position: relative;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  border: 1px solid var(--filet);
}

/* `height: auto` est indispensable : les images portent des attributs
   width/height pour réserver leur place au chargement, et sans lui la hauteur
   d'origine s'applique telle quelle — l'image s'étire en longueur dès que la
   colonne est plus étroite que le fichier. */
.duo__visuel img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Les gestes filmés (page ProTech) --------------------------------------
   De vraies captures de l'atelier : le film qu'on retire, la carte qu'on
   glisse, le boîtier qu'on referme. La vidéo se lance au survol et se rembobine
   quand on s'éloigne — rien n'est simulé.
--------------------------------------------------------------------------- */
.geste {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon-lg);
  background: var(--noir);
  cursor: pointer;
  isolation: isolate;
}

.geste__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--noir);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.geste[data-actif] .geste__video { transform: scale(1.02); }

.geste__legende {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2.5rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(5, 7, 10, 0.92), transparent);
  pointer-events: none;
}

.geste__titre {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivoire);
}

.geste__note {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  transition: opacity 300ms ease;
}

.geste[data-actif] .geste__note { opacity: 0; }

.geste__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.68);
  backdrop-filter: blur(6px);
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 500ms ease 700ms, transform 500ms ease 700ms;
}

.geste[data-actif] .geste__badge { opacity: 1; transform: none; }

/* Preuve mesurée : la photo du relevé, présentée comme une pièce à conviction. */
.releve {
  margin: 0;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  background: var(--surface);
}

.releve img { width: 100%; display: block; }

.releve figcaption {
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--filet);
  font-size: var(--t-sm);
  color: var(--ivoire-doux);
}

.releve figcaption b {
  font-family: var(--f-display);
  color: var(--cyan);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .geste__video { transform: none !important; }
  .geste__badge { opacity: 1; transform: none; }
}


.video-realisation {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--noir);
  object-fit: cover;
}

.univers {
  position: relative;
  display: block;
  min-height: clamp(360px, 46vw, 620px);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  border: 1px solid var(--filet);
  isolation: isolate;
}

.univers img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -2;
}

.univers::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,10,0.94) 6%, rgba(5,7,10,0.35) 52%, rgba(5,7,10,0.1));
  z-index: -1;
}

.univers:hover img { transform: scale(1.05); }

.univers__contenu {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  display: grid;
  gap: 0.6rem;
}

.univers__titre {
  font-size: var(--t-xl);
  margin: 0;
}

.univers__texte { color: var(--ivoire-doux); max-width: 42ch; margin: 0; }

.citation {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0;
}

.liste-etapes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1px;
  background: var(--filet);
  border-block: 1px solid var(--filet);
}

.etape {
  background: var(--noir);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}

.etape__num {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.2em;
  color: var(--braise);
  padding-top: 0.35rem;
}

.etape__titre { font-size: var(--t-lg); margin: 0 0 0.4rem; }
.etape__texte { color: var(--ivoire-doux); margin: 0; max-width: 58ch; }

/* --- 11. Filtres ------------------------------------------------------------ */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}

.filtre {
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.filtre:hover { border-color: var(--filet-fort); color: var(--ivoire); }

.filtre[aria-pressed="true"] {
  background: var(--ivoire);
  border-color: var(--ivoire);
  color: var(--noir);
}

/* Sections de la page Art : un bloc par taille de cadre. */
.bloc-format + .bloc-format { margin-top: clamp(3.5rem, 7vw, 6rem); }

.bloc-format__entete {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--filet);
}

.bloc-format__titre {
  font-size: var(--t-xl);
  margin: 0;
  letter-spacing: -0.01em;
}

.bloc-format__note {
  margin: 0;
  color: var(--gris);
  font-size: var(--t-sm);
  max-width: 46ch;
}

.compteur-resultats {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1.2rem;
}

/* --- 12. Fiche produit ------------------------------------------------------ */
.fiche {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.galerie { display: grid; gap: 1rem; }

.galerie__principale {
  position: relative;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  background: var(--surface);
}

.galerie__principale img { width: 100%; }

.galerie__vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.7rem;
}

.vignette {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  background: none;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1;
  transition: border-color var(--transition);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette[aria-current="true"] { border-color: var(--braise); }

.fiche__panneau { position: sticky; top: 6.5rem; display: grid; gap: 1.4rem; }

.fiche__prix {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
}

.fiche__prix del { color: var(--gris); font-size: 0.62em; margin-left: 0.6rem; }

.options { display: grid; gap: 1rem; }

.option__intitule {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  display: block;
  margin-bottom: 0.6rem;
}

.option__choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.puce {
  border: 1px solid var(--filet);
  background: transparent;
  border-radius: var(--rayon);
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: var(--t-sm);
  transition: border-color var(--transition), color var(--transition);
}
.puce:hover { border-color: var(--filet-fort); }
.puce[aria-pressed="true"] { border-color: var(--braise); color: var(--braise); }
.puce[disabled] { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

/* Choix de monture : deux pavés lisibles, l'un pour la carte nue,
   l'autre pour la carte gradée. */
.option__choix--colonne { flex-direction: column; }

.puce--large {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
}

.puce__nom {
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--ivoire);
}

.puce__note {
  grid-column: 1;
  font-size: var(--t-xs);
  color: var(--gris);
}

.puce__prix { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.puce--large[aria-pressed="true"] .puce__nom,
.puce--large[aria-pressed="true"] .puce__prix { color: var(--braise); }

.puce--coloris { display: inline-flex; align-items: center; gap: 0.55rem; }

.pastille-coloris {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--filet-fort);
  flex: none;
}
.pastille-coloris--noir  { background: #14181e; }
.pastille-coloris--blanc { background: #eee9df; }

.accordeon { border-top: 1px solid var(--filet); }

.accordeon__titre {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet);
  padding: 1.1rem 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.accordeon__titre::after { content: "+"; color: var(--braise); font-size: 1.2rem; }
.accordeon__titre[aria-expanded="true"]::after { content: "–"; }

.accordeon__corps {
  padding: 0 0 1.4rem;
  color: var(--ivoire-doux);
  border-bottom: 1px solid var(--filet);
}
.accordeon__corps[hidden] { display: none; }

.liste-caracteristiques {
  margin: 0;
  border-top: 1px solid var(--filet);
}

.liste-caracteristiques > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filet);
}

.liste-caracteristiques dt { color: var(--gris); font-size: var(--t-sm); }
.liste-caracteristiques dd { margin: 0; font-family: var(--f-display); text-align: right; }

/* --- 12 bis. Texte long (pages éditoriales et légales) --------------------- */
.texte-long {
  max-width: 72ch;
  color: var(--ivoire-doux);
}

.texte-long h2 {
  font-size: var(--t-xl);
  color: var(--ivoire);
  margin-top: 3rem;
}

.texte-long h3 {
  font-size: var(--t-lg);
  color: var(--ivoire);
  margin-top: 2rem;
}

.texte-long ul, .texte-long ol { padding-left: 1.2rem; margin: 0 0 1.4rem; }
.texte-long li { margin-bottom: 0.5rem; }
.texte-long a { color: var(--braise); text-decoration: underline; text-underline-offset: 3px; }

.encart {
  border: 1px solid var(--filet);
  border-left: 2px solid var(--braise);
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  font-size: var(--t-sm);
}

.encart--cyan { border-left-color: var(--cyan); }
.encart p:last-child { margin-bottom: 0; }

.a-completer {
  color: var(--braise);
  font-family: var(--f-display);
  font-size: 0.9em;
  border-bottom: 1px dashed var(--braise);
}

/* --- 13. Panier (tiroir) ---------------------------------------------------- */
.voile-panier {
  position: fixed; inset: 0;
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(3px);
  z-index: 190;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.voile-panier[data-ouvert="oui"] { opacity: 1; visibility: visible; }

.panier {
  position: fixed;
  top: 0; right: 0;
  z-index: 200;
  width: min(460px, 100vw);
  height: 100dvh;
  background: var(--nuit);
  border-left: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform var(--transition);
}
.panier[data-ouvert="oui"] { transform: none; }

.panier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gouttiere);
  border-bottom: 1px solid var(--filet);
}

.panier__titre {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
}

.panier__fermer {
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ivoire-doux);
  padding: 0.2rem 0.4rem;
}
.panier__fermer:hover { color: var(--braise); }

.panier__corps {
  flex: 1;
  overflow-y: auto;
  padding: var(--gouttiere);
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.ligne-panier {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 1rem;
  align-items: start;
}

.ligne-panier img {
  width: 76px; aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
}

.ligne-panier__titre { font-family: var(--f-display); font-size: 0.95rem; margin: 0 0 0.2rem; }
.ligne-panier__meta  { font-size: var(--t-xs); color: var(--gris); }

.quantite {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  margin-top: 0.6rem;
}
.quantite button {
  background: none; border: 0; cursor: pointer;
  width: 30px; height: 30px; color: var(--ivoire-doux);
}
.quantite button:hover { color: var(--braise); }
.quantite span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }

.panier__pied {
  border-top: 1px solid var(--filet);
  padding: var(--gouttiere);
  display: grid;
  gap: 1rem;
}

.panier__total {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: var(--t-lg);
}

.panier__note { font-size: var(--t-xs); color: var(--gris); text-align: center; }

.panier__vide {
  text-align: center;
  color: var(--gris);
  padding: 3rem 1rem;
  display: grid;
  gap: 1.2rem;
  justify-items: center;
}

/* --- 14. Bandeau d'information --------------------------------------------- */
/* Bandeau de service : ancré en bas pour ne jamais concurrencer l'en-tête. */
.bandeau-info {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  margin: 0;
  background: rgba(22, 29, 39, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--filet);
  padding: 0.7rem var(--gouttiere);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ivoire-doux);
  text-align: center;
}
.bandeau-info b { color: var(--braise); font-weight: 500; }

.entete-page {
  padding-top: clamp(7rem, 12vw, 11rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--filet);
}

.fil-ariane {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1.4rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fil-ariane a:hover { color: var(--braise); }

/* --- 15. Apparitions au scroll --------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal[data-vu="oui"] { opacity: 1; transform: none; }

/* Une carte déjà visible au moment du rendu ne se fait pas attendre : le fondu
   de 900 ms était juste du vide à l'écran. Le mouvement est conservé pour ce
   qui arrive plus bas, au fil du défilement. */
.reveal[data-immediat="oui"] {
  transition-duration: 260ms;
  transition-delay: 0s;
}

/* Les cartes de catalogue apparaissent plus vite que les grands blocs
   éditoriaux : on en affiche des dizaines d'un coup. */
.grille .reveal { transition-duration: 420ms; }

.squelette {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: glisser 1.5s linear infinite;
  border-radius: var(--rayon-lg);
  min-height: 320px;
}

/* Dans une grille de cadres, le fantôme reprend la silhouette d'une vignette
   pour que rien ne saute quand les vraies pièces la remplacent. */
.grille .squelette {
  min-height: 0;
  aspect-ratio: 3 / 4;
}

@media (prefers-reduced-motion: reduce) {
  .squelette { animation: none; }
}
@keyframes glisser { to { background-position: -220% 0; } }

/* --- 16. Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche__panneau { position: static; }
  .duo--large { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .burger {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.6rem 0.3rem;
  }
  .burger span {
    display: block;
    width: 26px; height: 1px;
    background: var(--ivoire);
    transition: transform var(--transition), opacity var(--transition);
  }
  .entete[data-menu="ouvert"] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .entete[data-menu="ouvert"] .burger span:nth-child(2) { opacity: 0; }
  .entete[data-menu="ouvert"] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Le menu descend SOUS la barre au lieu de couvrir l'écran entier : en plein
     écran, il recouvrait le logo et la croix de fermeture, et les libellés se
     confondaient avec l'en-tête. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem 5vw 1.4rem;
    /* Fond plein : en translucide, le titre de la page transparaissait derrière
       les libellés et les rendait illisibles. */
    background: #06080c;
    border-bottom: 1px solid var(--filet);
    box-shadow: 0 26px 50px rgba(0, 0, 0, .55);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), visibility var(--transition),
                transform var(--transition);
  }
  .entete[data-menu="ouvert"] .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__lien {
    font-size: 1rem;
    letter-spacing: .18em;
    padding: .95rem .2rem;
    border-bottom: 1px solid var(--filet);
    color: var(--ivoire);
  }

  /* Les réseaux forment une rangée en bas du panneau, assez grande pour le
     pouce, et cerclée pour rester visible sur le fond sombre. */
  .nav__filet { display: none; }
  .nav__reseaux {
    display: flex;
    justify-content: center;
    gap: .9rem;
    margin-top: 1.4rem;
  }
  .nav__social {
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid var(--filet);
    color: var(--ivoire);
  }

  .entete { justify-content: space-between; }
  .marque__mot { font-size: 0.92rem; letter-spacing: 0.28em; }

  .preuves__grille { grid-template-columns: repeat(2, 1fr); }
  .etape { grid-template-columns: 1fr; gap: 0.5rem; }
  .ouverture { height: 560vh; }
  .pied__grille { grid-template-columns: 1fr; }
  .bandeau-info { font-size: 0.68rem; }
}

@media (max-width: 520px) {
  .grille--4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ligne-panier { grid-template-columns: 60px 1fr; }
  .ligne-panier img { width: 60px; }
}

/* --- 17. Accessibilité : mouvement réduit ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ouverture { height: auto; }
  .ouverture__scene { position: relative; height: auto; min-height: 88svh; padding-block: 6rem; }
  .ouverture__champ, .ouverture__focus, .ouverture__voile { display: none; }
  .ouverture__final { position: relative; opacity: 1; inset: auto; pointer-events: auto; }
  .indice-scroll, .ouverture__passer { display: none; }
}

/* --- 18. Impression --------------------------------------------------------- */
@media print {
  .entete, .pied, .panier, .voile-panier, .ouverture { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- 19. Navigation par format et recherche -------------------------------
   Le catalogue grandit : il faut pouvoir sauter à une taille et retrouver une
   pièce sans dérouler toute la page.
--------------------------------------------------------------------------- */
.barre-formats {
  position: sticky;
  top: 4.2rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  margin-bottom: 2.5rem;
  background: linear-gradient(to bottom, var(--noir) 72%, transparent);
}

.barre-formats__lien {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.barre-formats__lien:hover,
.barre-formats__lien:focus-visible {
  border-color: var(--braise);
  color: var(--braise);
}

.barre-formats__lien small {
  font-size: 0.68em;
  letter-spacing: 0.12em;
  color: var(--gris);
}

.barre-formats__lien:hover small { color: inherit; }

/* Champ de recherche : celui de la page Art, et celui du panneau global. */
.champ-recherche {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 220px;
}

.champ-recherche input {
  width: 100%;
  padding: 0.7rem 2.4rem 0.7rem 1.1rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ivoire);
  font-size: var(--t-sm);
  transition: border-color var(--transition);
}

.champ-recherche input::placeholder { color: var(--gris); }
.champ-recherche input:focus { outline: none; border-color: var(--braise); }

.champ-recherche__effacer {
  position: absolute;
  right: 0.7rem;
  background: none;
  border: 0;
  color: var(--gris);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem;
}
.champ-recherche__effacer:hover { color: var(--braise); }
.champ-recherche__effacer[hidden] { display: none; }

.bloc-format[hidden] { display: none; }

.aucun-resultat {
  padding: 2.5rem 0;
  color: var(--gris);
  text-align: center;
}

/* --- Panneau de recherche global ------------------------------------------ */
.voile-recherche {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(5, 7, 10, 0.9);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  overflow-y: auto;
  padding: clamp(4rem, 10vh, 8rem) var(--gouttiere) var(--gouttiere);
}

.voile-recherche[data-ouvert="oui"] { opacity: 1; visibility: visible; }

.recherche-panneau {
  max-width: 760px;
  margin-inline: auto;
}

.recherche-panneau .champ-recherche input {
  padding-block: 1rem;
  font-size: var(--t-lg);
  background: var(--nuit);
}

.recherche-panneau__fermer {
  position: absolute;
  top: 1.4rem;
  right: var(--gouttiere);
  background: none;
  border: 0;
  color: var(--ivoire-doux);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.recherche-panneau__fermer:hover { color: var(--braise); }

.recherche-panneau__note {
  margin: 1rem 0 1.6rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

.resultats { display: grid; gap: 0.6rem; }

.resultat {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-lg);
  background: var(--surface);
  transition: border-color var(--transition), transform var(--transition);
}

.resultat:hover, .resultat:focus-visible {
  border-color: var(--braise);
  transform: translateX(3px);
}

.resultat img {
  width: 58px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rayon);
}

.resultat__titre { font-family: var(--f-display); font-size: 0.98rem; }
.resultat__meta  { font-size: var(--t-xs); color: var(--gris); }
.resultat__prix  { font-family: var(--f-display); color: var(--ivoire-doux); }

@media (max-width: 860px) {
  .barre-formats { top: 3.6rem; }
}

/* --- Prises de vue d'une même pièce ---------------------------------------
   Le 30 × 45 est photographié avec les cartes gradées puis en top loader :
   la seconde vue laisse bien mieux voir l'illustration. */
.galerie__vues {
  display: flex;
  gap: .8rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}

.vue {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem;
  width: 8.5rem;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  color: var(--texte-gris);
  font: inherit;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.vue img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--rayon-s) - 2px);
  display: block;
}

.vue:hover { border-color: var(--braise); color: var(--texte); }

.vue[aria-pressed="true"] {
  border-color: var(--braise);
  color: var(--braise);
}

/* --- Renard au-dessus du logotype d'ouverture -----------------------------
   Le titre seul laissait un vide au-dessus : la tête de renard referme la
   séquence sur la marque. */
.logotype__logo {
  display: block;
  /* Le logo entier, jamais recadré : le carré du favicon coupait les oreilles
     du renard. On le borne par la hauteur de fenêtre pour que la signature et
     le bouton restent visibles sous lui. */
  width: auto;
  height: min(58vh, 34rem);
  max-width: 88vw;
  margin: 0 auto 1.2rem;

  /* Le logo arrive sur son propre fond nocturne, un peu plus clair que la
     scène : ses quatre bords fondent dans le noir, et le mode « screen »
     laisse le décor traverser les zones sombres. Résultat : les néons
     ressortent, le rectangle disparaît. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 17%, #000 83%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 17%, #000 83%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  mix-blend-mode: screen;
}

@media (max-width: 860px) {
  .logotype__logo { height: min(46vh, 22rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .ouverture__final[data-actif="oui"] .logotype__logo {
    animation: renard-apparait 1s ease-out both;
  }
}

@keyframes renard-apparait {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* --- 17. Éclaté du montage -------------------------------------------------
   Coupe technique d'un cadre 13 × 18. La pile est vue de trois quarts,
   presque de côté : vue de face, les huit couches se confondaient en
   mille-feuille illisible. Les libellés sont sortis de la scène 3D et rangés
   en liste — flottants, ils se chevauchaient. */

/* Trois volets : le geste réel filmé, la coupe qui nomme les couches, et la
   liste qui les détaille. La vidéo montre ce que l'éclaté ne peut pas — les
   mains, la matière — et l'éclaté nomme ce que la vidéo ne dit pas. */
.eclate__grille {
  display: grid;
  grid-template-columns: .82fr 1.05fr .78fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: 3rem;
}

.eclate__film {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.eclate__film video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: var(--rayon-lg);
  background: #0c0e11;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}

.eclate__film figcaption {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--texte);
}

/* La seconde phrase passe en retrait : elle commente, elle ne décrit plus. */
.eclate__film figcaption span {
  display: block;
  margin-top: .5rem;
  color: var(--texte-gris);
  font-size: .76rem;
}

.eclate__scene {
  /* Aucun `transform` ni `opacity` animés ici : sur le conteneur de
     perspective, ils aplatissent la 3D des descendants et toutes les couches
     se retrouvent au même plan. C'est ce qui cassait la coupe sur mobile. */
  perspective: 2600px;
  perspective-origin: 74% 50%;
  padding: clamp(2rem, 6vw, 5rem) 0;
  /* La pile s'ouvre vers la droite : on la décale à gauche pour qu'elle ne
     vienne pas mordre sur la liste des étapes. */
  padding-right: clamp(3.5rem, 13vw, 11rem);
}

.eclate__pile {
  position: relative;
  width: min(26vw, 15rem);
  aspect-ratio: 13 / 18;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: translateX(-24%) rotateX(4deg) rotateY(-52deg);
  transition: transform 1.3s cubic-bezier(.22, 1, .36, 1);
}

.couche {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Un cran de profondeur subsiste même fermé : sans lui, toutes les couches
     sont au même plan et c'est l'ordre du code qui décide — l'illustration
     passait devant la carte. Fermé, on doit voir un cadre monté. */
  /* Deux réglages distincts : --profondeur écarte les pièces à l'ouverture,
     --rang les empile dans le bon ordre même refermées. Un cran proportionnel
     à la profondeur ne suffisait pas : les cinq pièces du trio carte + sleeve
     + top loader tombaient au même plan, et l'illustration repassait devant
     la carte. */
  transform: translateZ(calc(var(--profondeur) * var(--ecart, 0) * -5.4rem
                             + var(--rang, 0) * -.09rem));
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1),
              opacity .4s ease;
  transition-delay: calc(var(--profondeur) * 130ms), 0s;
}

.couche__forme {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .55);
}

/* Tranches d'extrusion : elles donnent l'épaisseur, mais ne portent ni ombre
   portée ni image, sinon la pile devient illisible et lourde. */
.couche__tranche {
  box-shadow: none;
  pointer-events: none;
}
.couche__tranche img { visibility: hidden; }
.couche__tranche.couche__forme--illustration::after { opacity: .25; }

/* La tranche du fond reprend la teinte du bois, pas celle de l'illustration. */
.couche__tranche.couche__forme--illustration {
  background: #1b1e23;
}

/* Cadre en MDF : la moulure, vue de tranche. */
.couche__forme--facade {
  border: .85rem solid #15171c;
  border-radius: 5px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08),
              0 26px 60px rgba(0, 0, 0, .65);
}

.couche__forme--verre {
  background: linear-gradient(122deg,
              rgba(190, 225, 255, .26) 0%,
              rgba(190, 225, 255, .05) 40%,
              rgba(255, 255, 255, .28) 52%,
              rgba(190, 225, 255, .04) 62%,
              rgba(120, 170, 210, .03) 100%);
  border: 1px solid rgba(190, 225, 255, .28);
}

/* Top loader et sleeve sont des POCHETTES, pas des plaques : sans épaisseur de
   bord ni ouverture visible, elles passaient pour deux vitres de plus. La
   soudure court sur trois côtés — franchement épaisse pour le top loader
   rigide — et le haut reste ouvert, c'est par là que la carte est glissée. */
.couche__forme--toploader {
  /* 76 × 102 mm dans un cadre de 130 × 180 mm. */
  inset: 21.6% 20.8%;
  background: linear-gradient(118deg,
              rgba(255, 255, 255, .04) 0%,
              rgba(255, 255, 255, .17) 26%,
              rgba(255, 255, 255, .04) 38%,
              rgba(255, 255, 255, .02) 100%);
  border: 0;
  border-radius: 5px;
  box-shadow:
    inset 4px 0 0 -1px rgba(255, 255, 255, .34),
    inset -4px 0 0 -1px rgba(255, 255, 255, .34),
    inset 0 -5px 0 -1px rgba(255, 255, 255, .34),
    0 20px 45px rgba(0, 0, 0, .5);
}

/* Lèvre d'ouverture : le rebord évasé du haut, signature du top loader. */
.couche__forme--toploader::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: -2.5%;
  height: 4.5%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, .42), rgba(255, 255, 255, .05));
}

.couche__forme--sleeve {
  /* 66 × 91 mm : la sleeve dépasse à peine la carte. */
  inset: 24.7% 24.6%;
  background: linear-gradient(122deg,
              rgba(238, 246, 255, .11), rgba(238, 246, 255, .02));
  border: 0;
  border-radius: 2px;
  /* Souple : soudure fine et film mat, au lieu du reflet franc du verre. */
  box-shadow:
    inset 2px 0 0 -0.5px rgba(255, 255, 255, .24),
    inset -2px 0 0 -0.5px rgba(255, 255, 255, .24),
    inset 0 -2px 0 -0.5px rgba(255, 255, 255, .24),
    0 14px 30px rgba(0, 0, 0, .4);
}

/* Le dos d'une pochette : même découpe, mais aucun reflet — il est derrière la
   carte. C'est lui qui rend l'emboîtement crédible : la carte passe ENTRE les
   deux faces au lieu de flotter devant l'une d'elles. */
.couche__forme--dos {
  box-shadow: none;
  background: linear-gradient(300deg,
              rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
}
.couche__forme--dos::after { display: none; }

/* Le montage se lit à la fermeture. La carte, elle, ne bouge pas : c'est le
   sujet. Ce sont ses protections qui montent par le bas l'envelopper — la
   sleeve d'abord, le top loader ensuite, comme on enfile réellement les deux
   pochettes l'une après l'autre. Les deux faces d'une même pochette bougent
   ensemble, sinon elle se déchirerait à l'écran. */
.couche[data-couche="3"] .couche__forme,
.couche[data-couche="4"] .couche__forme {
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1);
}
.couche[data-couche="4"] .couche__forme { transition-delay: 0s; }    /* sleeve */
.couche[data-couche="3"] .couche__forme { transition-delay: .45s; }  /* top loader */

.eclate__scene[data-ouvert="oui"] .couche[data-couche="4"] .couche__forme {
  transform: translateY(84%);
  transition-delay: .35s;
}
.eclate__scene[data-ouvert="oui"] .couche[data-couche="3"] .couche__forme {
  transform: translateY(120%);
  transition-delay: 0s;
}

.couche__forme--carte,
.couche__forme--illustration { overflow: hidden; }
/* 63 × 88 mm : les proportions exactes d'une carte, sinon le cadrage la
   rogne en haut et en bas. */
.couche__forme--carte { inset: 25.5% 25.8%; }
.couche__forme--carte img,
.couche__forme--illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Réserve blanche : l'emplacement de la carte n'est jamais imprimé — c'est ce
   qui garantit qu'aucun élément sous licence n'est reproduit sous la carte. */
.couche__forme--illustration::after {
  content: "";
  position: absolute;
  inset: 25.5% 25.8%;
  background: #f3f1ed;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

/* Les pastilles se collent au dos du top loader, dans les quatre coins de la
   carte et sans jamais en dépasser : même transparentes elles se verraient
   légèrement, alors la carte les masque entièrement. */
.couche__forme--fond {
  background: linear-gradient(150deg, #24272d, #15171b);
  border: 1px solid rgba(255, 255, 255, .06);
}

.couche__forme--pastilles {
  inset: 25.5% 25.8%;
  background: transparent;
  box-shadow: none;
}

.pastille-coin {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  /* Rangée dans l'angle, jamais à cheval sur le bord. */
  left: calc(6% + var(--x) * 88%);
  top: calc(4% + var(--y) * 92%);
  transform: translate(calc(var(--x) * -100%), calc(var(--y) * -100%));
  background: radial-gradient(circle at 34% 32%,
              rgba(255, 255, 255, .55), rgba(255, 255, 255, .10) 60%, transparent 74%);
  border: 1px solid rgba(255, 255, 255, .38);
  transition: transform .7s cubic-bezier(.34, 1.4, .5, 1), opacity .4s ease;
}

/* Ouvert, les quatre pastilles s'écartent en diagonale, chacune vers son coin.
   À la fermeture elles reviennent se poser une à une : on voit exactement où
   elles se collent, et qu'elles ne dépassent jamais de la carte. */
.eclate__scene[data-ouvert="oui"] .pastille-coin {
  transform: translate(calc(var(--x) * -100%), calc(var(--y) * -100%))
             translate(calc((var(--x) * 2 - 1) * 2.1rem),
                       calc((var(--y) * 2 - 1) * 2.1rem));
}

/* Décalage : haut-gauche, haut-droite, bas-gauche, bas-droite. */
.pastille-coin:nth-child(1) { transition-delay: .10s; }
.pastille-coin:nth-child(2) { transition-delay: .22s; }
.pastille-coin:nth-child(3) { transition-delay: .34s; }
.pastille-coin:nth-child(4) { transition-delay: .46s; }

/* --- Liste des étapes ---------------------------------------------------- */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.etape {
  display: flex;
  gap: 1rem;
  padding: .8rem .6rem;
  border-bottom: 1px solid var(--filet);
  cursor: default;
  transition: background .25s, color .25s;
}

.etape__rang {
  color: var(--braise);
  font-size: .72rem;
  padding-top: .2rem;
  opacity: .65;
}

.etape__corps {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texte-gris);
}
.etape__corps b {
  display: block;
  color: var(--texte);
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .1rem;
}

.etape:hover,
.etape[data-actif="oui"] { background: rgba(255, 255, 255, .04); }
.etape:hover .etape__rang,
.etape[data-actif="oui"] .etape__rang { opacity: 1; }

/* Survol d'une étape : sa couche seule reste nette. */
.eclate__grille[data-isole] .couche { opacity: .18; }
.eclate__grille[data-isole] .couche[data-couche="1"] { opacity: .18; }

.eclate__scene[data-ouvert="oui"] .couche { --ecart: 1; }
.eclate__scene[data-ouvert="oui"] .eclate__pile { transform: translateX(-24%) rotateX(4deg) rotateY(-56deg); }

@media (max-width: 1180px) {
  .eclate__grille { grid-template-columns: 1fr 1fr; }
  .eclate__legende { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .eclate__grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .eclate__film video { max-width: 20rem; margin-inline: auto; }
  .eclate__scene { perspective-origin: 50% 50%; padding: 1.5rem 0; }
  .eclate__pile { width: min(54vw, 12rem); transform: rotateX(4deg) rotateY(-48deg); }
  /* Le cran de profondeur permanent doit être repris ici : sans lui, la règle
     mobile écrase celle du dessus et, cadre fermé, l'illustration repasse
     devant la carte — on ne voyait plus que la réserve blanche. */
  .couche {
    transform: translateZ(calc(var(--profondeur) * var(--ecart, 0) * -3.15rem
                               + var(--rang, 0) * -.09rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .eclate__pile, .couche { transition: none; }
  .couche { --ecart: 1; }
}

/* Le bouton d'ouverture précède la liste : sur mobile, la scène est juste
   au-dessus, on garde donc le cadre sous les yeux en l'actionnant. */
.eclate__commande {
  margin: 0 0 1.4rem;
}

@media (max-width: 980px) {
  /* Sur petit écran, la commande se colle à la scène qu'elle pilote. */
  .eclate__commande { margin-top: -.6rem; }
  .eclate__commande .btn { width: 100%; justify-content: center; }
}

/* Les deux raisons de la réserve vide, côte à côte sous la photo : en pile
   elles s'opposaient, alors qu'elles vont ensemble. */
.etapes--deux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  border-top: 0;
}
.etapes--deux .etape { border-top: 1px solid var(--filet); }

@media (max-width: 860px) {
  .etapes--deux { grid-template-columns: 1fr; }
}

/* --- Réseaux sociaux dans la navigation ------------------------------------
   Ils étaient au seul pied de page : un visiteur qui ne déroule pas jusqu'en
   bas ne les voyait jamais, alors que la vente se fait en direct sur Whatnot.
   Ils rejoignent donc la barre principale, après un filet de séparation. */
.nav__filet {
  width: 1px;
  height: 1.1rem;
  background: var(--filet);
  margin-inline: .3rem;
  flex: none;
}

.nav__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--texte-gris);
  transition: color .25s, background .25s;
  flex: none;
}

/* Sur la barre du bureau, le conteneur s'efface pour que les icônes s'alignent
   avec les liens. Bornée au grand écran : sinon elle écrase la rangée du
   panneau mobile, définie plus haut. */
@media (min-width: 1081px) {
  .nav__reseaux { display: contents; }
}

.nav__social svg { width: 1.05rem; height: 1.05rem; display: block; }

.nav__social:hover,
.nav__social:focus-visible {
  color: var(--braise);
  background: rgba(255, 255, 255, .06);
}

/* Dans le menu déroulant du mobile, les icônes se rangent sur une ligne. */
@media (max-width: 1080px) {
  .nav__filet {
    width: 100%;
    height: 1px;
    margin: .6rem 0;
  }
  .nav__social { width: 2.6rem; height: 2.6rem; }
  .nav__social svg { width: 1.3rem; height: 1.3rem; }
}

/* --- Avis vérifiés ---------------------------------------------------------
   La section est masquée par défaut et n'apparaît que si l'application d'avis
   renvoie quelque chose : une grille vide dessert plus qu'elle ne sert. */
/* Les deux réputations, côte à côte, chacune sous son nom. */
.avis__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}

.avis__source {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1.3rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s;
}
a.avis__source:hover { border-color: var(--braise); }

.avis__source-lieu {
  font-family: var(--f-display);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
.avis__source-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
}
.avis__source-note b { color: var(--texte); font-weight: 500; }
.avis__source-detail { font-size: .72rem; color: var(--gris); }

.etoiles { display: inline-flex; gap: .1rem; letter-spacing: .05em; }
.etoile { color: var(--filet); font-size: .95rem; line-height: 1; }
.etoile--pleine { color: var(--braise); }

.avis {
  margin: 0;
  padding: 1.6rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.avis__titre {
  font-family: var(--f-display);
  font-size: .92rem;
  letter-spacing: .04em;
  margin: 0;
  color: var(--texte);
}

.avis__texte {
  margin: 0;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--texte-gris);
}

.avis__signature {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .74rem;
  color: var(--gris);
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--filet);
}
.avis__signature b { color: var(--texte); font-weight: 500; }

.avis__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
}
/* Produit et date : l'information de contexte, pas celle qu'on lit en premier. */
.avis__ligne--menue { font-size: .7rem; opacity: .75; }

.avis__verifie {
  color: var(--braise);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .66rem;
}

/* --- Formulaire ------------------------------------------------------------
   Même registre que le reste : fond sombre, filets discrets, le néon
   n'apparaît qu'au focus. */
.formulaire { margin-top: 2.5rem; max-width: 46rem; }

.formulaire__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.champ--large { grid-column: 1 / -1; }

.champ { display: flex; flex-direction: column; gap: .45rem; }

.champ__libelle {
  font-family: var(--f-display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

.champ__saisie {
  font-family: inherit;
  font-size: .88rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: .75rem .9rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.champ__saisie::placeholder { color: var(--gris); opacity: .6; }
.champ__saisie:focus {
  outline: none;
  border-color: var(--braise);
  box-shadow: 0 0 0 3px rgba(255, 107, 43, .12);
}
textarea.champ__saisie { resize: vertical; min-height: 7rem; }

select.champ__saisie {
  appearance: none;
  /* La flèche est dessinée en CSS : pas de fichier à charger pour un chevron. */
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: right 1rem center, right .72rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
select.champ__saisie option { background: var(--nuit); color: var(--texte); }

.formulaire__mention {
  font-size: .74rem;
  line-height: 1.6;
  color: var(--gris);
  margin: 1.4rem 0 1.8rem;
  max-width: 52ch;
}

/* Champ leurre anti-robot : masqué à l'œil comme aux lecteurs d'écran. */
.formulaire__leurre { position: absolute; left: -9999px; }

.formulaire__confirmation {
  margin-top: 2.5rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--braise);
  border-radius: var(--rayon-lg);
  background: var(--surface);
  font-size: .9rem;
  max-width: 46rem;
}

@media (max-width: 700px) {
  .formulaire__grille { grid-template-columns: 1fr; }
}

/* Empilées sur petit écran, les deux sources doivent avoir la même largeur :
   deux cartes de tailles différentes donnent l'air d'un chiffre plus
   important que l'autre. */
@media (max-width: 560px) {
  .avis__sources { display: grid; grid-template-columns: 1fr; }
}