/* Maison Vaucelle : site d'exemple (Tigerhead Studio)
   Charte : noir profond, ivoire, laiton. Capitales espacées, sérif à fort contraste. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("polices/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("polices/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("polices/cinzel.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  --noir: #0b0a09;
  --noir-2: #141210;
  --ivoire: #f1eadc;
  --ivoire-2: #e8dfcd;
  --texte-clair: #e6dfd1;
  --gris-clair: #a9a196;
  --encre: #1a1714;
  --gris: #57504a;
  --laiton: #c2a266;
  --laiton-fonce: #775c2e;
  /* Nuances dérivées, en variables pour que les coloris (fin du fichier) les changent aussi */
  --texte-doux: #d7cfbf;
  --texte-terne: #cbc3b4;
  --encre-2: #2f2a25;
  --encre-3: #3a342e;
  --carton: #f7f2e8;
  --gris-pied: #8f887d;
  --cuir: #1c130d;
  --cuir-teinte: transparent;   /* teinte posée sur la texture de cuir (mode « color ») */
  --photo-a: #4a4036;           /* emplacements photo : halo, fond */
  --photo-b: #15120f;
  --photo-accroche: #5b4e40;
  --photo-atelier: #6a5640;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --capitales: "Cinzel", "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  /* Grain argentique : clair sur fond noir, sombre sur fond ivoire */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --marge: clamp(1.4rem, 7vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grain), var(--noir);
  color: var(--texte-clair);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
}
svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.1; }
h2 {
  font-family: var(--capitales);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-align: center;
  margin-right: -.32em; /* compense l'espacement de la dernière lettre */
}
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 4px; }
/* Sur fond ivoire, le laiton clair ne ressort pas assez (2,2:1) */
.ivoire :focus-visible { outline-color: var(--laiton-fonce); }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; background: var(--laiton); color: var(--noir); padding: .6rem 1rem; z-index: 10; }
.evitement:focus { top: 1rem; }

/* Petites capitales espacées, utilisées partout */
.entete-mention, .nav a, .bouton, .num, .sous-titre, .numero-section, .bloc h3, .fiche dt, .chiffres dd, .citation figcaption, .marque-maison, .marque-sous, .exemple {
  font-family: var(--capitales);
  text-transform: uppercase;
  letter-spacing: .3em;
}

/* ---------- Boutons : rectangles fins, filet laiton ---------- */
.bouton {
  display: inline-block;
  padding: 1.05rem 2.2rem;
  font-size: .75rem;
  letter-spacing: .24em;
  color: var(--laiton);
  text-decoration: none;
  border: 1px solid var(--laiton);
  outline: 1px solid color-mix(in srgb, var(--laiton) 35%, transparent);
  outline-offset: 3px;
  transition: background .4s, color .4s;
}
.bouton:hover { background: var(--laiton); color: var(--noir); }
/* Le filet décoratif du bouton masquait l'indicateur de focus */
.bouton:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
.ivoire .bouton:focus-visible { outline-color: var(--laiton-fonce); }
.bouton-plein { background: var(--noir); color: var(--ivoire); border-color: var(--noir); outline-color: color-mix(in srgb, var(--noir) 30%, transparent); }
.bouton-plein:hover { background: var(--laiton-fonce); border-color: var(--laiton-fonce); color: var(--ivoire); }

/* ---------- En-tête centré ---------- */
.entete { text-align: center; padding: 1.6rem var(--marge) 1.2rem; }
/* En-tête et pied en CUIR : grain de Voronoï (textures/cuir.webp, outils/texture_cuir.py, tuile
   raccordable affichée en demi-taille pour rester nette), assombri sur les bords comme une peau
   patinée, et bordé d'une surpiqûre laiton. */
.entete, .pied {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 220, 170, .07), transparent 70%),
    linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)),
    linear-gradient(var(--cuir-teinte), var(--cuir-teinte)),
    url("textures/cuir.webp") 0 0 / 256px 256px repeat,
    var(--cuir);
  background-blend-mode: normal, normal, color, normal, normal;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
}
.entete::after, .pied::before {
  content: ""; position: absolute; left: 10px; right: 10px; pointer-events: none;
  border-top: 1px dashed color-mix(in srgb, var(--laiton) 55%, transparent);   /* la surpiqûre */
}
.entete::after { bottom: 7px; }
.pied::before { top: 7px; }
.entete-mention { font-size: .75rem; letter-spacing: .26em; color: var(--gris-clair); margin: 0 0 1.4rem; }
.marque { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.marque-maison, .marque-sous { font-size: .75rem; letter-spacing: .26em; color: var(--laiton); }
.marque-nom { font-family: var(--capitales); font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: .34em; margin: .5rem -.34em .55rem 0; color: var(--ivoire); }
.nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.4rem;
  margin-top: 1.6rem; padding: .25rem 0;
  border-top: 1px solid color-mix(in srgb, var(--laiton) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--laiton) 35%, transparent);
  box-shadow: 0 3px 0 -2px color-mix(in srgb, var(--laiton) 20%, transparent), 0 -3px 0 -2px color-mix(in srgb, var(--laiton) 20%, transparent);
}
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .75rem; letter-spacing: .24em; text-decoration: none; color: var(--texte-clair); }
.nav a:hover { color: var(--laiton); }
@media (max-width: 540px) { .nav { gap: 0 1.2rem; } .nav a { letter-spacing: .16em; } }

/* ---------- Emplacements photo ---------- */
.photo {
  position: relative; margin: 0; overflow: hidden;
  background: var(--grain), radial-gradient(90% 70% at 50% 30%, var(--photo-a), var(--photo-b) 75%);
  color: color-mix(in srgb, var(--laiton) 45%, transparent);
}
.photo .trait { position: absolute; left: 50%; top: 50%; width: 46%; max-width: 260px; transform: translate(-50%, -50%); }
.ton-ardoise { background: var(--grain), radial-gradient(70% 60% at 50% 35%, #5d6166, #1a1b1d 80%); }
.ton-paille  { background: var(--grain), radial-gradient(70% 60% at 50% 35%, #8a7348, #1c1710 80%); }
.ton-bordeaux{ background: var(--grain), radial-gradient(70% 60% at 50% 35%, #6c2b27, #170b0a 80%); }
.ton-ivoire  { background: var(--grain), radial-gradient(70% 60% at 50% 35%, #a49b8a, #1e1c19 80%); color: color-mix(in srgb, var(--ivoire) 50%, transparent); }
.ton-noir    { background: var(--grain), radial-gradient(50% 45% at 50% 35%, #34302b, #090807 80%); }
.photo-bordeaux { background: var(--grain), radial-gradient(80% 70% at 40% 40%, #5f2522, #160b0a 80%); }
/* Filet laiton discret autour des emplacements photo */
.photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--laiton) 22%, transparent); pointer-events: none; }

/* ---------- Accroche ---------- */
.accroche { padding: clamp(1.6rem, 4vw, 3rem) var(--marge) 0; }
.cadre-deco {
  position: relative;
  min-height: min(82svh, 50rem);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 3rem 1.5rem clamp(3rem, 8vh, 5rem);
  text-align: center;
}
/* Double filet laiton intérieur, coins coupés façon art déco */
.cadre-deco::before, .cadre-deco::after {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  border: 1px solid color-mix(in srgb, var(--laiton) 60%, transparent);
}
.cadre-deco::before { inset: 14px; }
.cadre-deco::after { inset: 20px; border-color: color-mix(in srgb, var(--laiton) 28%, transparent); }
.accroche-photo {
  position: absolute; inset: 0;
  background: var(--grain),
    linear-gradient(180deg, color-mix(in srgb, var(--noir) 20%, transparent) 0%, color-mix(in srgb, var(--noir) 0%, transparent) 40%, color-mix(in srgb, var(--noir) 92%, transparent) 100%),
    radial-gradient(60% 55% at 50% 35%, var(--photo-accroche), var(--photo-b) 80%);
  color: color-mix(in srgb, var(--laiton) 40%, transparent);
}
.accroche-photo::after { display: none; }
.accroche-photo .trait { top: 27%; width: 32%; max-width: 420px; }
.accroche-texte { position: relative; z-index: 3; max-width: 40rem; }
.accroche h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); font-weight: 300; line-height: 1.02; color: var(--ivoire); }
.accroche h1 em { color: var(--laiton); }
.fleuron { width: 7.5rem; height: 1rem; margin: 1.6rem auto; color: var(--laiton); }
.accroche-chapo { font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--texte-doux); margin-bottom: 2.2rem; }
@media (max-width: 640px) { br.large { display: none; } .accroche-photo .trait { top: 24%; width: 52%; } }

/* ---------- Sections ---------- */
.section { padding: clamp(5rem, 12vw, 10rem) var(--marge); }
.ivoire { background: var(--grain-sombre), var(--ivoire); color: var(--encre); }
.numero-section {
  text-align: center; font-size: .75rem; color: var(--laiton); margin: 0 0 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
}
.numero-section::before, .numero-section::after { content: ""; width: 3rem; height: 1px; background: currentColor; opacity: .6; }
.ivoire .numero-section { color: var(--laiton-fonce); }
.sous-titre { text-align: center; font-size: .75rem; letter-spacing: .24em; color: var(--gris-clair); margin: 1.1rem 0 0; }

/* La maison */
.maison-grille { display: grid; gap: 3rem; max-width: 70rem; margin: 3.5rem auto 0; align-items: start; }
.maison h2 { text-align: left; font-size: 1rem; letter-spacing: .4em; color: var(--laiton-fonce); margin-bottom: 1.6rem; }
.citation { margin: 0; text-align: center; padding: 2rem 0; border-top: 1px solid var(--laiton); border-bottom: 1px solid var(--laiton); }
.citation blockquote { margin: 0; }
.citation p { font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.15; margin-bottom: 1.4rem; }
.citation figcaption { font-size: .75rem; letter-spacing: .2em; color: var(--gris); }
.maison-texte p { color: var(--encre-2); }
.lettrine::first-letter { font-family: var(--capitales); float: left; font-size: 4.6rem; line-height: .82; padding: .3rem .7rem 0 0; color: var(--laiton-fonce); }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 52rem; margin: 5rem auto; text-align: center; }
.chiffres div + div { border-left: 1px solid color-mix(in srgb, var(--laiton-fonce) 45%, transparent); }
.chiffres dt { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 300; line-height: 1; }
.chiffres dd { margin: .8rem 0 0; font-size: .75rem; color: var(--gris); letter-spacing: .16em; }
.duo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; max-width: 70rem; margin: 0 auto; align-items: end; }
.photo-portrait { aspect-ratio: 3 / 4; }
.duo .photo-bordeaux { aspect-ratio: 16 / 11; }
@media (min-width: 900px) {
  .maison-grille { grid-template-columns: 1fr 1.1fr; gap: 6rem; }
  .citation { margin-top: 3rem; }
  .duo { gap: 2rem; }
}

/* Savoir-faire */
.savoir { text-align: center; border-top: 1px solid color-mix(in srgb, var(--laiton) 25%, transparent); }
.etapes { list-style: none; padding: 0; margin: 4.5rem auto 0; max-width: 72rem; display: grid; gap: 3rem; }
.etapes li { padding: 0 1.5rem; }
.etape-num { display: block; font-family: var(--capitales); font-size: 2.6rem; color: var(--laiton); line-height: 1; margin-bottom: 1.4rem; }
.etapes h3 { font-size: 1.7rem; font-style: italic; margin-bottom: .9rem; color: var(--ivoire); }
.etapes p { color: var(--gris-clair); max-width: 20em; margin: 0 auto; font-size: 1.1rem; }
/* Point sellier : filet en pointillés, comme une couture */
.etapes li + li::before { content: ""; display: block; width: 4rem; margin: 0 auto 3rem; border-top: 1px dashed color-mix(in srgb, var(--laiton) 60%, transparent); }
@media (min-width: 820px) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .etapes li + li { border-left: 1px dashed color-mix(in srgb, var(--laiton) 40%, transparent); }
  .etapes li + li::before { display: none; }
}

/* Créations */
.creations { border-top: 1px solid color-mix(in srgb, var(--laiton) 25%, transparent); }
.num { font-size: .75rem; letter-spacing: .26em; color: var(--laiton); margin-bottom: .9rem; }
.vedette { display: grid; gap: 2.4rem; max-width: 74rem; margin: 4.5rem auto 6rem; align-items: center; }
.vedette .photo { aspect-ratio: 4 / 5; }
.vedette h3 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-style: italic; font-weight: 300; color: var(--ivoire); margin-bottom: 1.2rem; }
.vedette-texte > p:not(.num) { color: var(--texte-terne); max-width: 28em; }
.fiche { margin: 2rem 0 0; padding: 0; list-style: none; max-width: 26rem; }
.fiche div, .fiche li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--laiton) 25%, transparent); }
.fiche dt { font-size: .75rem; letter-spacing: .2em; color: var(--gris-clair); }
.fiche dd { margin: 0; font-style: italic; }
@media (min-width: 900px) { .vedette { grid-template-columns: 1fr 1fr; gap: 6rem; } }

.serie { list-style: none; padding: 3.5rem 0 0; margin: 0 auto; max-width: 74rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem 1.2rem; border-top: 1px solid color-mix(in srgb, var(--laiton) 25%, transparent); }
.serie .photo { aspect-ratio: 4 / 5; margin-bottom: 1.2rem; }
.serie .photo .trait { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.serie li:hover .photo .trait { transform: translate(-50%, -54%); }
.serie h3 { font-size: 1.45rem; font-style: italic; color: var(--ivoire); }
.prix { font-size: .95rem; color: var(--gris-clair); margin-top: .3rem; }
@media (min-width: 900px) { .serie { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .serie li:nth-child(even) { margin-top: 4rem; } }

/* Atelier : carton d'invitation */
.atelier { padding-top: 0; }
.atelier-photo { aspect-ratio: 21 / 9; margin: 0 calc(var(--marge) * -1); min-height: 16rem; background: var(--grain), radial-gradient(60% 70% at 50% 40%, var(--photo-atelier), var(--photo-b) 80%); }
.atelier-photo .trait { top: 42%; width: 22%; }
@media (max-width: 640px) { .atelier-photo { aspect-ratio: auto; height: 16rem; } .atelier-photo .trait { top: 45%; width: 42%; } }
.carton {
  position: relative; text-align: center;
  max-width: 40rem; margin: -6rem auto 0;
  padding: 3.5rem clamp(1.4rem, 5vw, 4rem);
  background: var(--grain-sombre), var(--carton);
  border: 1px solid var(--laiton-fonce);
  outline: 1px solid var(--laiton-fonce); outline-offset: -9px;
  box-shadow: 0 30px 60px rgba(30,20,10,.25);
}
.carton h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.carton .fleuron { color: var(--laiton-fonce); }
.carton p { color: var(--encre-3); }
.fiche-centre { margin: 2rem auto; text-align: left; }
.fiche-centre li { border-color: color-mix(in srgb, var(--laiton-fonce) 35%, transparent); font-size: 1.05rem; }
.fiche-centre li span:last-child { font-style: italic; color: var(--laiton-fonce); }
.carton .bouton { color: var(--laiton-fonce); border-color: var(--laiton-fonce); }
.carton .bouton:hover { background: var(--laiton-fonce); color: var(--ivoire); }
.carton .bouton-plein { color: var(--ivoire); background: var(--noir); border-color: var(--noir); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }

/* Visite */
.visite-grille { display: grid; gap: 3rem; max-width: 66rem; margin: 4rem auto 0; text-align: center; }
.bloc h3 { font-size: .75rem; letter-spacing: .26em; color: var(--laiton); margin-bottom: 1.2rem; }
address { font-style: normal; font-size: 1.4rem; line-height: 1.5; }
.bloc p a { position: relative; font-size: 1.3rem; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--laiton) 40%, transparent); }
/* Zone tactile portée à 44 px sans déplacer le filet */
.bloc p a::before { content: ""; position: absolute; inset: -.6rem 0; }
.bloc p a:hover { color: var(--laiton); }
.note { font-size: .95rem; font-style: italic; color: var(--gris-clair); margin-top: .8rem; }
.horaires { border-collapse: collapse; margin: 0 auto; font-size: 1.1rem; }
.horaires th { font-weight: 400; text-align: left; padding: .3rem 1.4rem .3rem 0; color: var(--gris-clair); font-style: italic; }
.horaires td { text-align: right; white-space: nowrap; }
@media (min-width: 820px) { .visite-grille { grid-template-columns: repeat(3, 1fr); gap: 0; } .bloc + .bloc { border-left: 1px solid color-mix(in srgb, var(--laiton) 30%, transparent); } }

/* Pied */
.pied { text-align: center; padding: 4rem var(--marge) 2rem; border-top: 1px solid color-mix(in srgb, var(--laiton) 30%, transparent); color: var(--gris-clair); }
.monogramme { width: 4.4rem; height: 4.4rem; margin: 0 auto 1.4rem; color: var(--laiton); }
.pied-marque { font-family: var(--capitales); letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; color: var(--ivoire); font-size: .95rem; }
.exemple { margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--laiton) 15%, transparent); font-size: .75rem; letter-spacing: .14em; color: var(--gris-pied); }
/* Lien de crédit : zone tactile de 44 px sans changer le rendu (marges négatives) */
.exemple a { color: var(--texte-clair); display: inline-block; padding: .9rem 0; margin: -.9rem 0; }

/* ---------- Coloris : panneau « Essayez d'autres coloris » (script.js) ----------
   Les couleurs sont enregistrées (@property) pour que le changement de coloris se fasse en fondu :
   la classe .coloris-anime n'est posée par le script que le temps de la transition. */
@property --noir { syntax: "<color>"; inherits: true; initial-value: #0b0a09; }
@property --ivoire { syntax: "<color>"; inherits: true; initial-value: #f1eadc; }
@property --texte-clair { syntax: "<color>"; inherits: true; initial-value: #e6dfd1; }
@property --gris-clair { syntax: "<color>"; inherits: true; initial-value: #a9a196; }
@property --encre { syntax: "<color>"; inherits: true; initial-value: #1a1714; }
@property --gris { syntax: "<color>"; inherits: true; initial-value: #57504a; }
@property --laiton { syntax: "<color>"; inherits: true; initial-value: #c2a266; }
@property --laiton-fonce { syntax: "<color>"; inherits: true; initial-value: #775c2e; }
@property --texte-doux { syntax: "<color>"; inherits: true; initial-value: #d7cfbf; }
@property --texte-terne { syntax: "<color>"; inherits: true; initial-value: #cbc3b4; }
@property --encre-2 { syntax: "<color>"; inherits: true; initial-value: #2f2a25; }
@property --encre-3 { syntax: "<color>"; inherits: true; initial-value: #3a342e; }
@property --carton { syntax: "<color>"; inherits: true; initial-value: #f7f2e8; }
@property --gris-pied { syntax: "<color>"; inherits: true; initial-value: #8f887d; }
@property --cuir-teinte { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --photo-a { syntax: "<color>"; inherits: true; initial-value: #4a4036; }
@property --photo-b { syntax: "<color>"; inherits: true; initial-value: #15120f; }
@property --photo-accroche { syntax: "<color>"; inherits: true; initial-value: #5b4e40; }
@property --photo-atelier { syntax: "<color>"; inherits: true; initial-value: #6a5640; }
html.coloris-anime {
  transition: --noir .4s, --ivoire .4s, --texte-clair .4s, --gris-clair .4s, --encre .4s, --gris .4s,
    --laiton .4s, --laiton-fonce .4s, --texte-doux .4s, --texte-terne .4s, --encre-2 .4s, --encre-3 .4s, --carton .4s,
    --gris-pied .4s, --cuir-teinte .4s, --photo-a .4s, --photo-b .4s, --photo-accroche .4s, --photo-atelier .4s;
}

/* Bleu nuit & or (contrastes du texte vérifiés ≥ 4,5:1, comme l'origine) */
html[data-coloris="nuit"] {
  --noir: #0e1a30; --ivoire: #f3eddf; --texte-clair: #e5e3dc; --gris-clair: #a3a9b6;
  --encre: #141a26; --gris: #4e5565; --laiton: #d4b46e; --laiton-fonce: #7a5d22;
  --texte-doux: #d3d2cc; --texte-terne: #c5c6c4; --encre-2: #283041; --encre-3: #333a49; --carton: #f8f3e8;
  --gris-pied: #8b93a2; --cuir-teinte: #22385f;
  --photo-a: #36435a; --photo-b: #0b111d; --photo-accroche: #445069; --photo-atelier: #4d5a74;
}
/* Bordeaux & vieil or */
html[data-coloris="bordeaux"] {
  --noir: #2a0e15; --ivoire: #f3eadb; --texte-clair: #eadfd6; --gris-clair: #b4a09c;
  --encre: #22110f; --gris: #5c4642; --laiton: #c79c5a; --laiton-fonce: #7c5523;
  --texte-doux: #ddcdc2; --texte-terne: #d0bfb5; --encre-2: #3a2420; --encre-3: #432b27; --carton: #f8f0e6;
  --gris-pied: #a08a86; --cuir-teinte: #6a1626;
  --photo-a: #573035; --photo-b: #19090d; --photo-accroche: #64383b; --photo-atelier: #6e423c;
}

/* Fenêtre non modale en bas à droite (la page reste visible et utilisable), puis onglet au bord droit */
.coloris {
  position: fixed; z-index: 30; inset: auto 1.5rem 1.5rem auto; margin: 0;
  width: min(26rem, calc(100% - 3rem)); max-height: calc(100% - 3rem); overflow: auto;
  padding: 1.1rem 1.2rem 1rem 1.5rem;
  background: var(--grain), var(--noir); color: var(--texte-clair);
  border: 1px solid var(--laiton); outline: 1px solid color-mix(in srgb, var(--laiton) 40%, transparent); outline-offset: -7px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.coloris:focus { outline: 1px solid color-mix(in srgb, var(--laiton) 40%, transparent); outline-offset: -7px; }  /* focus posé sur la fenêtre quand on la rouvre */
.coloris[open] { animation: coloris-pop .5s cubic-bezier(.2,.8,.2,1); }
@keyframes coloris-pop { from { opacity: 0; transform: translateY(1.2rem) scale(.95); } }
.coloris-tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-right: -.4rem; }
.coloris-titre { margin: 0; text-align: left; font-family: var(--capitales); font-weight: 400; text-transform: uppercase; font-size: .8rem; letter-spacing: .22em; color: var(--ivoire); }
.coloris-fermer { flex: none; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .7rem; cursor: pointer; font: inherit; background: none; border: 0; color: var(--laiton); font-family: var(--capitales); text-transform: uppercase; font-size: .68rem; letter-spacing: .2em; }
.coloris-intro { margin: .2rem 0 .9rem; font-style: italic; font-size: 1.05rem; color: var(--gris-clair); }
.coloris-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.coloris-choix button {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  min-width: 0; padding: .5rem .15rem; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.coloris-pastille {
  display: block; width: 4rem; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(135deg, var(--p1) 0 49.5%, var(--p2) 50.5%);
  transition: transform .3s;
  border: 2px solid var(--ivoire);
}
.coloris-choix button:hover .coloris-pastille { transform: scale(1.06); }
.coloris-choix button[aria-pressed="true"] .coloris-pastille { box-shadow: 0 0 0 4px var(--noir), 0 0 0 5px var(--laiton); }
.coloris-nom { line-height: 1.2; text-align: center; font-style: italic; font-size: 1rem; color: var(--texte-clair); }
.coloris-choix button[aria-pressed="true"] .coloris-nom { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.coloris [data-coloris="origine"], .coloris-onglet [data-coloris="origine"] { --p1: #0b0a09; --p2: #c2a266; }
.coloris [data-coloris="nuit"], .coloris-onglet [data-coloris="nuit"] { --p1: #0e1a30; --p2: #d4b46e; }
.coloris [data-coloris="bordeaux"], .coloris-onglet [data-coloris="bordeaux"] { --p1: #2a0e15; --p2: #c79c5a; }
/* Téléphone : toute la largeur utile en bas, plus compacte */
@media (max-width: 600px) {
  .coloris { inset: auto 12px 12px 12px; width: auto; max-height: calc(100% - 24px); padding: .7rem .8rem .6rem 1rem; }
  .coloris-intro { display: none; }
  .coloris-choix { margin-top: .3rem; }
  .coloris-choix button { gap: .4rem; padding: .35rem .1rem; }
  .coloris-pastille { width: 3.1rem; }
}
/* 320 px : encore plus ramassée, pour laisser voir le haut de page */
@media (max-width: 360px) {
  .coloris-titre { font-size: .7rem; letter-spacing: .16em; }
  .coloris-pastille { width: 2.75rem; }
  .coloris-nom { font-size: .8rem; }
}
.coloris-onglet {
  position: fixed; z-index: 25; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  width: 2.75rem; padding: .75rem 0; cursor: pointer; font: inherit;
  background: var(--grain), var(--noir); color: var(--laiton);
  border: 1px solid var(--laiton); border-right: 0; box-shadow: -6px 8px 24px rgba(0,0,0,.4);
}
.coloris-onglet[hidden] { display: none; }
.coloris-onglet-points { display: grid; gap: .3rem; }
.coloris-onglet-points span { display: block; width: .95rem; height: .95rem; border-radius: 50%; background: linear-gradient(135deg, var(--p1) 0 49.5%, var(--p2) 50.5%); border: 1px solid var(--ivoire); }
.coloris-onglet-libelle { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; font-family: var(--capitales); text-transform: uppercase; font-size: .7rem; letter-spacing: .24em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}