/* =====================================================================
   Camymy Joly — feuille de style unique.
   1. Polices   2. Jetons & thèmes   3. Base   4. En-tête   5. Sections
   6. Pièces    7. Visionneuse   8. Pied, yoga, parcours de l'accueil, retouches
   9. Thèmes (indigo, atelier ; « maison » = valeurs par défaut)
   10. Transitions & apparitions
   ===================================================================== */

/* ---------- 1. Polices (auto-hébergées, chargées seulement si utilisées) ---------- */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../polices/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../polices/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../polices/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../polices/jost-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../polices/caveat-latin-500-normal.woff2") format("woff2"); }

/* ---------- 2. Jetons (thème « maison » : valeurs par défaut ; les pages du site sont passées en indigo, sauf cravates) ---------- */

:root {
  --fond: #f5f0e8;
  --fond-2: #ebe3d6;
  --surface: #fbf8f3;
  --encre: #1f1a16;
  --encre-douce: #5f564d;
  --accent: #96703a;        /* or vieilli */
  --accent-texte: #7a5828;  /* or lisible sur ivoire */
  --trait: rgba(31, 26, 22, 0.14);
  --pied-accent: #c9a464;

  --police-titre: "Cormorant Garamond", "Times New Roman", serif;
  --police-texte: "Jost", "Segoe UI", system-ui, sans-serif;
  --police-main: "Caveat", "Segoe Print", cursive;

  --largeur: 74rem;
  --marge: clamp(1rem, 4vw, 2.5rem);
  --rayon: 2px;
  --ombre: 0 18px 40px -24px rgba(40, 28, 16, 0.45);

  --pastille-reserve: #a35f17;
  --pastille-vendu: #1f1a16;
}

/* ---------- 3. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.sans-defilement { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: 1.08; margin: 0 0 0.6em; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.45rem; font-weight: 600; }
p { margin: 0 0 1em; }

.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }
.surtitre {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-texte);
}
.chapeau { font-size: clamp(1.1rem, 1.8vw, 1.28rem); color: var(--encre-douce); max-width: 38rem; }
.italique { font-style: italic; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--fond);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.bouton:hover { background: transparent; color: var(--encre); }
.bouton-discret { background: transparent; color: var(--encre); }
.bouton-discret:hover { background: var(--encre); color: var(--fond); }
.boutons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.logo {
  display: inline-block;
  width: 2.3rem;
  aspect-ratio: 338 / 347;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../images/logo.png") center / contain no-repeat;
  mask: url("../images/logo.png") center / contain no-repeat;
}

/* ---------- 4. En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--marge);
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  view-transition-name: entete;
}
.marque { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--encre); }
.marque .logo { color: var(--accent); }
.marque-nom { font-family: var(--police-titre); font-size: 1.55rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }

.nav ul { display: flex; gap: clamp(0.9rem, 1.8vw, 1.8rem); margin: 0; padding: 0; list-style: none; }
.nav a {
  position: relative;
  font-size: 0.8rem;
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--encre-douce);
  transition: color 0.2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav a:hover, .nav a[aria-current] { color: var(--encre); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }

.menu-bouton {
  display: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre);
  font: 500 0.78rem/1 var(--police-texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 820px) {
  .menu-bouton { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 0fr;
    background: var(--fond);
    border-bottom: 1px solid var(--trait);
    transition: grid-template-rows 0.35s ease;
  }
  .nav > ul { overflow: hidden; flex-direction: column; gap: 0; padding: 0 var(--marge); }
  .nav li:first-child { margin-top: 0.5rem; }
  .nav li:last-child { margin-bottom: 1rem; }
  .nav a { display: block; padding: 0.8rem 0; font-size: 0.9rem; border-bottom: 1px solid var(--trait); }
  .nav a::after { display: none; }
  .menu-ouvert .nav { grid-template-rows: 1fr; }
}
/* Sans JavaScript, le menu reste visible. */
html:not(.js) .menu-bouton { display: none; }
html:not(.js) .nav { position: static; grid-template-rows: 1fr; }
@media (max-width: 820px) { html:not(.js) .entete { flex-wrap: wrap; } }

/* ---------- 5. Sections ---------- */

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-serree { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-alt { background: var(--fond-2); }
.titre-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.titre-section h2 { margin: 0; }
.titre-section p { margin: 0; color: var(--encre-douce); }
.astuce { font-size: 0.85rem; color: var(--encre-douce); }

/* Héro à deux colonnes */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 6rem); }
.hero-grille { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
.hero-texte .logo { display: block; width: 4.2rem; color: var(--accent); margin-bottom: 1.6rem; }
.hero h1 { margin-bottom: 1.4rem; }

.cadre { position: relative; }
.cadre::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.cadre img { position: relative; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: var(--ombre); }

@media (max-width: 820px) {
  .hero-grille { grid-template-columns: 1fr; }
  .hero-visuel { max-width: 26rem; width: calc(100% - 1.1rem); }
}


/* Faits (accueil) */
.faits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0 0; padding: 1.8rem 0 0; border-top: 1px solid var(--trait); list-style: none; }
.faits strong { display: block; font-family: var(--police-titre); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--accent-texte); }
.faits span { font-size: 0.9rem; color: var(--encre-douce); }
@media (max-width: 600px) { .faits { grid-template-columns: 1fr; gap: 1rem; } }

/* Tarifs */
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2rem 3rem; }
.tarifs-groupe h3 { padding-bottom: 0.7rem; border-bottom: 1px solid var(--encre); }
.tarifs-groupe dl { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 0; }
.tarifs-groupe dt, .tarifs-groupe dd { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--trait); }
.tarifs-groupe dd { padding-left: 1rem; text-align: right; font-weight: 500; white-space: nowrap; }
.tarifs-groupe dd.a-venir { font-family: var(--police-titre); font-style: italic; font-weight: 400; color: var(--encre-douce); }

/* Bandeau contact */
.contact { text-align: center; }
.contact h2 { margin-bottom: 0.8rem; }
.contact p { color: var(--encre-douce); margin-inline: auto; max-width: 34rem; }
.contact-tel {
  display: inline-block;
  margin: 1.2rem 0 1.6rem;
  font-family: var(--police-titre);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.reseaux { display: flex; justify-content: center; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.reseaux a { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- 6. Pièces (grilles d'articles) ---------- */

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.8rem); }
.grille-vide { display: block; }
.vide {
  margin: 0;
  padding: 3.5rem 1.5rem;
  border: 1px solid var(--trait);
  text-align: center;
  font-family: var(--police-titre);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--encre-douce);
}

.piece { position: relative; display: flex; flex-direction: column; }
.piece-visuel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 0 1rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rayon);
  background: var(--fond-2);
  cursor: zoom-in;
}
.piece-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease; }
.piece-survol { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) {
  .piece-visuel:hover img { transform: scale(1.035); }
  .a-survol:hover .piece-survol, .a-survol:focus-visible .piece-survol { opacity: 1; }
}

.pastille {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  padding: 0.3rem 0.6rem;
  border-radius: var(--rayon);
  background: var(--pastille-reserve);
  color: #fff;
  font: 500 0.68rem/1 var(--police-texte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pastille-reserve { background: var(--pastille-reserve); }
.pastille-vendu { background: var(--pastille-vendu); }
.piece[data-statut="vendu"] .piece-visuel img { filter: grayscale(0.7); opacity: 0.65; }

.piece-texte { display: flex; flex-direction: column; gap: 0.25rem; }
.piece-titre { margin: 0; font-size: 1.35rem; }
.piece-prix { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.piece-prix s { font-weight: 350; color: var(--encre-douce); }
.piece-desc { margin: 0.2rem 0 0; font-size: 0.93rem; color: var(--encre-douce); }
.lien-sms {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-texte);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}
.lien-sms::after { content: "→"; display: inline-block; margin-left: 0.45em; transition: transform 0.25s; }
.lien-sms:hover::after { transform: translateX(3px); }

/* ---------- 7. Visionneuse ---------- */

.visionneuse {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(16, 13, 11, 0.97);
  color: #f2ece2;
}
.visionneuse[open] { display: grid; grid-template-columns: 1fr minmax(16rem, 24rem); animation: vis-entree 0.3s ease; }
.visionneuse::backdrop { background: transparent; }
@keyframes vis-entree { from { opacity: 0; } }

.vis-cadre { position: relative; display: grid; place-items: center; min-height: 0; margin: 0; padding: 2rem; }
.vis-image { max-width: 100%; max-height: calc(100dvh - 4rem); object-fit: contain; transition: opacity 0.2s; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.vis-image.change { opacity: 0.25; }
.vis-nav, .vis-fermer {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(16, 13, 11, 0.5);
  color: #fff;
  font: 300 1.8rem/1 var(--police-texte);
  cursor: pointer;
  transition: background 0.2s;
}
.vis-nav:hover, .vis-fermer:hover { background: rgba(255, 255, 255, 0.15); }
.vis-prec { left: 1rem; top: 50%; translate: 0 -50%; }
.vis-suiv { right: 1rem; top: 50%; translate: 0 -50%; }
.vis-fermer { top: 1rem; right: 1rem; }
.vis-cote { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 2rem 2rem 2.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.vis-legende { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.vis-legende .pastille { position: static; }
.vis-titre { margin: 0; font-size: 2rem; }
.vis-prix { margin: 0; font-size: 1.2rem; }
.vis-desc { margin: 0; color: rgba(242, 236, 226, 0.75); }
dialog.visionneuse .lien-sms { color: var(--pied-accent); }
.vis-compteur { margin: 0; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 236, 226, 0.55); }

@media (max-width: 760px) {
  .visionneuse[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .vis-cadre { padding: 3.8rem 0.5rem 0.5rem; }
  .vis-image { max-height: calc(100dvh - 15rem); }
  .vis-nav { top: auto; bottom: 0.5rem; translate: none; width: 2.6rem; height: 2.6rem; }
  .vis-cote { padding: 1rem 1.2rem 1.4rem; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .vis-titre { font-size: 1.5rem; }
}

/* ---------- 8. Pied de page ---------- */

.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 2rem;
  padding: 0.45rem var(--marge);
  border-top: 1px solid var(--trait);
  background: transparent; /* reprend le fond de la page, motifs compris */
  color: var(--encre-douce);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.pied p { margin: 0; }
.pied a { color: var(--accent-texte); text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* ---------- 8 bis. Pantalons de yoga : coloris & configurateur ---------- */

.couleurs-mini { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.couleurs-mini li { width: 1.1rem; height: 1.1rem; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 1px var(--trait); }
.piece-tailles { margin: 0.2rem 0 0; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--encre-douce); }

.configurateur { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.config-visuel { position: sticky; top: 6rem; }
.config-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: var(--ombre); }
.config-echantillon {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: clamp(4.5rem, 9vw, 6.5rem);
  aspect-ratio: 1;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background-size: cover;
  box-shadow: var(--ombre);
  transition: background-image 0.3s;
}
.config-echantillon-ceinture { right: clamp(3.8rem, 8vw, 5.6rem); width: clamp(3rem, 6vw, 4.2rem); }
.config-echantillon[hidden] { display: none; }
.config-choix { display: flex; flex-direction: column; gap: 1.6rem; }
.config-groupe { margin: 0; padding: 0; border: 0; }
.config-groupe[hidden] { display: none; }
.config-groupe legend { margin-bottom: 0.7rem; padding: 0; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.config-groupe legend span { margin-left: 0.4rem; font-weight: 350; letter-spacing: 0.04em; text-transform: none; color: var(--encre-douce); }
.config-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.config-option {
  min-width: 3rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font: 450 0.9rem/1 var(--police-texte);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.config-option:hover:not(:disabled) { border-color: var(--encre); }
.config-option[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.config-option:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.config-tissu { width: 2.8rem; height: 2.8rem; min-width: 0; padding: 0; border-radius: 50%; background-size: cover; }
.config-tissu[aria-pressed="true"] { background-size: cover; box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--encre); }
.config-tissu:disabled { text-decoration: none; filter: grayscale(0.6); }
.config-recap { margin: 0.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--trait); font-size: 1.05rem; }
.config-bouton { align-self: flex-start; }
.config-bouton.incomplet { opacity: 0.55; cursor: default; }
.config-bouton.incomplet:hover { background: var(--encre); color: var(--fond); }
.infos-yoga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--trait); list-style: none; }
.infos-yoga strong { display: block; font-family: var(--police-titre); font-size: 1.4rem; font-weight: 600; color: var(--accent-texte); }
.infos-yoga span { font-size: 0.92rem; color: var(--encre-douce); }
@media (max-width: 760px) {
  .configurateur { grid-template-columns: 1fr; }
  .config-visuel { position: relative; top: 0; max-width: 20rem; }
  .infos-yoga { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- 8 ter. Accueil : parcours en scènes plein écran ---------- */

/* Sans JavaScript, les scènes s'empilent comme des sections d'un écran de haut. */
.scene { position: relative; min-height: calc(100svh - 4rem); background-color: var(--fond); color: var(--encre); }

/* Avec JavaScript, l'accueil ne défile plus : les scènes se superposent et se relaient. */
html.js .page-parcours { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
html.js .page-parcours .entete { position: relative; flex: none; }
/* clip et non hidden : les scènes zoomées débordent, et une ancre (#collections) ne doit pas faire défiler le conteneur. */
html.js .parcours { position: relative; flex: 1; min-height: 0; overflow: hidden; overflow: clip; background: var(--fond); }
html.js .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 1s;
}
html.js .scene::-webkit-scrollbar { display: none; }
/* Une scène déjà vue s'éloigne en grandissant, la suivante arrive du fond : on avance. */
html.js .scene.passee { transform: scale(1.08); }
html.js .scene.active { z-index: 1; opacity: 1; visibility: visible; transform: none; transition-delay: 0.12s, 0.12s, 0s; }

html.js .scene .entre { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.js .scene.active .entre { opacity: 1; transform: none; transition-delay: calc(0.35s + var(--i, 0) * 90ms); }
html.js .sans-transition .scene, html.js .sans-transition .entre { transition: none !important; }


/* 1. Présentation : la photo de l'atelier occupe le fond à droite et s'estompe vers le texte.
   Pour changer de photo, remplacer l'image dans index.html et ajuster object-position (cadrage). */
.scene-accueil { isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr) auto; }
/* Fond côté texte : une broderie de sequins (broderie-fond-1) floutée et voilée, qui fait écho
   aux motifs de la chemise de Lynda ; la photo de l'atelier s'y fond par la gauche.
   Pas de débord (inset négatif) : la scène deviendrait défilable et gênerait la molette. */
.scene-accueil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Voile bleuté ; fondu du bord droit de la broderie ; broderie (fashion-2 en grande taille)
     calée à gauche sur 56 % de la largeur : réduite plutôt qu'agrandie, elle reste nette.
     (Variante sequins : url("../images/broderie-fond-1.webp") 35% 50% / cover, sans 2e couche.) */
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 78%, transparent), color-mix(in srgb, var(--fond) 64%, transparent) 55%),
    linear-gradient(90deg, transparent 38%, var(--fond) 56%),
    url("../images/broderie-fond-2.webp") 0% 58% / 56% auto no-repeat;
  pointer-events: none;
}
.scene-accueil .pied { grid-column: 1 / -1; position: relative; z-index: 1; }
.accueil-texte { position: relative; z-index: 1; align-self: center; justify-self: end; max-width: 40rem; padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1.5rem, 4.5vw, 4.5rem); }
.accueil-texte .logo { display: block; width: 3.4rem; margin-bottom: 1.3rem; color: var(--accent); }
.accueil-texte h1 { margin-bottom: 1.1rem; font-size: clamp(2.1rem, min(3.9vw, 7vh), 3.7rem); }
.accueil-texte p:not(.surtitre) { color: var(--encre-douce); }
.accueil-texte .faits { margin-top: clamp(1rem, 3vh, 2rem); padding-top: clamp(0.8rem, 2.4vh, 1.5rem); }
.accueil-photo {
  position: absolute;
  /* Le + 1.5cm pousse le fondu vers la droite (la photo s'étrécit d'autant). */
  inset: 0 0 0 calc(32% + 1.5cm);
  z-index: 0;
  margin: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%), linear-gradient(to top, transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 42%), linear-gradient(to top, transparent, #000 18%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Photo de l'atelier (artisan-10) : calée à gauche pour que Lynda, au centre de la photo,
   tombe juste après le fondu ; légèrement assombrie pour l'ambiance indigo. */
.accueil-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; filter: brightness(0.74) saturate(0.95) contrast(1.05); }
/* Vignettage : les bords s'assombrissent, le regard va vers Lynda. */
.accueil-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 45%, transparent 42%, color-mix(in srgb, var(--fond) 55%, transparent));
  pointer-events: none;
}
.accueil-photo figcaption { position: absolute; right: clamp(1.2rem, 3vw, 2.4rem); bottom: clamp(3.5rem, 14vh, 7rem); z-index: 2; font-family: var(--police-main); font-size: 1.7rem; color: #f6efe4; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }

.accueil-texte .indice-defilement {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: clamp(1.2rem, 3.5vh, 2.4rem) 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.indice-defilement::before { content: ""; width: 1px; height: 1.8rem; background: linear-gradient(var(--accent), transparent); transform-origin: top; animation: indice 2.2s ease-in-out infinite; }
@keyframes indice { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
html:not(.js) .indice-defilement, .indice-tactile { display: none; }
@media (hover: none) { .indice-souris { display: none; } .indice-tactile { display: inline; } }

/* 2. Défilé des cravates (thème indigo) : fond bleu uni ; à droite, une bande photo de cravates
   suspendues (cravates-3), sur toute la hauteur, fondue vers la gauche. */
.scene-defile { isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; }
/* Hors de la grille : en flux, la photo imposerait sa hauteur naturelle à l'écran. */
.defile-fond {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 38%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6) 14%, #000 32%);
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6) 14%, #000 32%);
}
.defile-contenu { grid-area: 1 / 1; justify-self: end; max-width: 50rem; padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 4vw, 4rem); }
.defile-accroche { margin-bottom: 1rem; font-size: clamp(2.2rem, min(4.4vw, 7.5vh), 4.2rem); }
.defile-accroche em { display: block; }
.scene-defile .chapeau { max-width: 40rem; color: var(--encre); }
/* Les trois étapes du don : pastilles or, titres en italique, surpiqûre au-dessus. */
.dons-ligne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: clamp(1rem, 3vh, 1.8rem) 0; padding: clamp(0.9rem, 2.4vh, 1.4rem) 0 0; border-top: 1.5px dashed var(--trait); list-style: none; counter-reset: don; }
.dons-ligne li { counter-increment: don; font-size: 0.9rem; line-height: 1.45; color: var(--encre-douce); }
.dons-ligne li::before { content: counter(don); display: grid; place-items: center; width: 1.9rem; aspect-ratio: 1; margin-bottom: 0.55rem; border-radius: 50%; background: var(--accent); color: var(--fond); font-size: 0.85rem; font-weight: 600; }
.dons-ligne strong { display: block; margin-bottom: 0.15rem; font-family: var(--police-titre); font-size: 1.5rem; font-style: italic; font-weight: 400; line-height: 1.1; color: var(--encre); }
.defile-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; }
.scene-defile .collecte { flex: 1 1 16rem; max-width: 24rem; margin: 0; }
.defile-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.defile-quand { margin: 0; line-height: 1.2; }
.defile-quand [data-defile-date] { display: block; font-family: var(--police-titre); font-size: 1.8rem; font-style: italic; color: var(--accent); }
.defile-quand [data-defile-lieu] { display: block; margin-top: 0.2rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-douce); }
/* Compteur de cravates reçues : chiffre en italique or, jauge en surpiqûre. */
.scene-defile .collecte-chiffre { color: var(--encre-douce); }
.scene-defile .collecte-chiffre strong { font-family: var(--police-titre); font-size: 2.6rem; font-style: italic; font-weight: 400; color: var(--accent); }
.scene-defile .collecte-jauge { border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.scene-defile .collecte-jauge span { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, #b98634 6px 12px); }
.scene-defile .collecte-objectif { font-family: var(--police-titre); font-size: 1.15rem; font-style: italic; }
/* Compte à rebours : médaillon doré à surpiqûre, posé à la lisière de la photo. */
.scene-defile .tampon {
  top: 50%;
  right: auto;
  left: calc(65% - 4.75rem);
  width: 9.5rem;
  border: 1.5px solid var(--accent);
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 80%, transparent);
  outline-offset: -9px;
  background: color-mix(in srgb, var(--fond) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--ombre);
  color: var(--accent);
  translate: 0 -50%;
  rotate: 0deg;
}
.scene-defile .tampon span { color: var(--encre); }
.scene-defile .tampon strong { margin-bottom: 0.15rem; font-family: var(--police-titre); font-size: 2.9rem; font-style: italic; font-weight: 400; color: var(--accent); }

/* 3 et 4. Scènes coupées en deux volets cliquables */
.scene-duo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); background-color: var(--fond); }
.scene-etiquette {
  position: absolute;
  top: clamp(0.8rem, 2.5vh, 1.4rem);
  left: 50%;
  z-index: 3;
  margin: 0;
  padding: 0.55rem 1.2rem;
  background: var(--fond);
  color: var(--encre);
  border: 1px solid var(--trait);
  font: 500 0.74rem/1 var(--police-texte);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
  box-shadow: var(--ombre);
}
html:not(.js) .scene-duo { min-height: calc(100svh - 4rem); }

.volet { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 0; overflow: hidden; color: #fff; text-decoration: none; }
.volet + .volet { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.22); }
.volet-fond { position: absolute; inset: 0; z-index: -2; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease; }
.volet-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease, filter 0.8s ease; }
.volet-fond img.montree, html:not(.js) .volet-fond img:first-child { opacity: 1; }
.volet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15, 11, 8, 0.88) 0%, rgba(15, 11, 8, 0.4) 42%, rgba(15, 11, 8, 0.05) 72%); pointer-events: none; }
@media (hover: hover) {
  .volet:hover .volet-fond { transform: scale(1.06); }
  .scene-duo:has(.volet:hover) .volet:not(:hover) .volet-fond { filter: brightness(0.6) saturate(0.7); }
}
.volet-texte { width: 100%; max-width: 36rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.volet .surtitre { margin-bottom: 0.7rem; color: #e8cf9f; }
.volet h3 { margin-bottom: 0.6rem; font-size: clamp(2rem, min(3.6vw, 6.5vh), 3.4rem); font-weight: 400; }
.volet h3 em { font-style: italic; }
.volet p { margin-bottom: 1.1rem; font-size: 1rem; color: rgba(255, 255, 255, 0.86); }
.volet-lien { display: inline-flex; gap: 0.6em; padding-bottom: 0.25rem; border-bottom: 1px solid #e8cf9f; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.volet-lien::after { content: "→"; transition: transform 0.3s; }
.volet:hover .volet-lien::after, .volet:focus-visible .volet-lien::after { transform: translateX(4px); }
.volet:focus-visible { outline-offset: -6px; }

/* Volets des collections et de l'atelier : surpiqûre dorée, titre en capitales et italique or (thème indigo) */
.scene-duo .volet::before { content: ""; position: absolute; inset: 0.8rem; z-index: 1; border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 4px; pointer-events: none; }
.scene-duo .volet::after { background: linear-gradient(to top, color-mix(in srgb, var(--fond) 95%, transparent) 0%, color-mix(in srgb, var(--fond) 50%, transparent) 45%, color-mix(in srgb, var(--fond) 5%, transparent) 72%); }
.scene-duo .volet h3 { font-family: var(--police-texte); font-size: clamp(1.7rem, min(3vw, 5.5vh), 2.8rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.scene-duo .volet h3 em { display: block; font-family: var(--police-titre); font-size: 1.12em; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); }
.scene-duo .volet .surtitre { color: var(--accent); }
.scene-duo .volet-lien { border-color: var(--accent); }

.volet-tissus { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.volet-tissus li { width: 1.6rem; height: 1.6rem; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }

/* Fenêtres basses (portable, navigateur avec barres) : on resserre pour que chaque scène tienne. */
@media (min-width: 821px) and (max-height: 760px) {
  .accueil-texte .logo { display: none; }
  .accueil-texte .surtitre, .scene-defile .surtitre { margin-bottom: 0.7rem; }
  .accueil-texte h1 { margin-bottom: 0.8rem; font-size: clamp(2.2rem, 7vh, 3.6rem); }
  .accueil-texte p:not(.surtitre) { margin-bottom: 0.7rem; font-size: 0.98rem; line-height: 1.55; }
  .accueil-texte .faits strong { font-size: 1.35rem; }
  .defile-accroche { margin-bottom: 0.6rem; font-size: clamp(2.2rem, 7.5vh, 3.6rem); }
  .scene-defile .chapeau { margin-bottom: 0.6rem; font-size: 1.02rem; line-height: 1.55; }
  .dons-ligne li::before { width: 1.6rem; margin-bottom: 0.3rem; font-size: 0.75rem; }
  .dons-ligne strong { font-size: 1.35rem; }
  .defile-quand [data-defile-date] { font-size: 1.5rem; }
  .scene-defile .tampon { width: 8rem; }
  .scene-defile .tampon strong { font-size: 2.4rem; }
}

@media (max-width: 820px) {
  /* La photo passe en haut et s'estompe vers le bas, sous le début du texte. */
  .scene-accueil { grid-template-columns: 1fr; grid-template-rows: minmax(10rem, 30%) 1fr auto; }
  /* Écran en hauteur : l'image élargie ne couvrirait plus la scène, on revient à cover. */
  .scene-accueil::before { background-size: auto, 0 0, cover; background-position: 0 0, 0 0, 45% 60%; }
  .accueil-photo { inset: 0 0 auto; height: 46%; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
  .accueil-photo img { object-position: 28% 50%; }
  .accueil-photo figcaption { right: var(--marge); bottom: auto; top: 0.8rem; font-size: 1.4rem; }
  .accueil-texte { grid-row: 2; justify-self: stretch; align-self: start; max-width: none; padding: 1.4rem var(--marge) 1rem; }
  .scene-accueil .pied { grid-row: 3; }
  .accueil-texte .logo { display: none; }
  .accueil-texte .surtitre { margin-bottom: 0.6rem; }
  .accueil-texte h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); margin-bottom: 0.8rem; }
  .accueil-texte p:not(.surtitre) { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.7rem; }
  .accueil-texte .faits { grid-template-columns: repeat(3, auto); gap: 0.8rem; margin-top: 0.8rem; }
  .accueil-texte .faits strong { font-size: 1.15rem; }
  .accueil-texte .faits span { font-size: 0.78rem; line-height: 1.3; display: block; }
  .accueil-texte .indice-defilement { margin-top: 0.8rem; }

  .scene-defile { grid-template-columns: 1fr; align-items: start; }
  /* Une colonne : le texte couvre toute la largeur ; la photo, discrète, reste sur le bord droit. */
  .defile-fond { width: 55%; opacity: 0.3; -webkit-mask-image: linear-gradient(to right, transparent, #000 60%); mask-image: linear-gradient(to right, transparent, #000 60%); }
  .defile-contenu { position: relative; justify-self: stretch; padding: 1.4rem var(--marge) 1.6rem; }
  .defile-accroche { font-size: clamp(1.7rem, 7.6vw, 2.2rem); padding-right: 5.5rem; }
  .scene-defile .chapeau { font-size: 0.98rem; }
  .dons-ligne { grid-template-columns: 1fr; gap: 0.7rem; }
  .dons-ligne li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.8rem; align-items: start; font-size: 0.85rem; }
  .dons-ligne li::before { grid-row: span 2; margin: 0; }
  .dons-ligne strong { font-size: 1.35rem; }
  .scene-defile .tampon { top: 1rem; right: var(--marge); left: auto; width: 5.6rem; translate: none; }
  .scene-defile .tampon strong { font-size: 1.9rem; }

  .scene-duo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .volet + .volet { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.22); }
  .volet-texte { padding: 1.2rem 1.4rem 1.3rem; }
  .volet .surtitre { margin-bottom: 0.4rem; font-size: 0.68rem; }
  .volet h3 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); margin-bottom: 0.4rem; }
  .scene-duo .volet h3 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .volet p { margin-bottom: 0.7rem; font-size: 0.88rem; line-height: 1.45; }
  .volet-tissus { margin-bottom: 0.8rem; }
  .volet-tissus li { width: 1.2rem; height: 1.2rem; }
  .scene-duo .volet::before { inset: 0.5rem; }
}

/* ---------- 8 quater. Pages intérieures : fil d'Ariane, page Retouches sur un écran ---------- */

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.3rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-douce); }
.fil a { display: inline-flex; gap: 0.45rem; color: var(--accent-texte); text-decoration: none; }
.fil a::before { content: "↑"; }
.fil a:hover { text-decoration: underline; }
.fil span::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }

body:has(.page-ecran) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page-ecran { flex: 1; display: grid; align-items: center; padding-block: clamp(1rem, 3vh, 2.5rem); }
.retouches {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "intro tarifs" "galerie tarifs";
  align-items: start;
  gap: clamp(1rem, 3vh, 2rem) clamp(2rem, 5vw, 5rem);
}
.retouches-intro { grid-area: intro; }
.retouches h1 { margin-bottom: 0.8rem; font-size: clamp(2.4rem, min(4.6vw, 7vh), 4rem); }
.retouches .chapeau { margin-bottom: 1.1rem; font-size: 1.05rem; }
.contact-retouches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.contact-retouches p { flex-basis: 100%; margin: 0; font-size: 0.95rem; color: var(--encre-douce); }
.tel-discret { font-family: var(--police-titre); font-size: 1.6rem; line-height: 1.1; text-decoration: none; border-bottom: 1px solid var(--accent); }
.retouches-tarifs { grid-area: tarifs; align-self: center; padding: clamp(1.2rem, 3vh, 2rem) clamp(1.2rem, 2.5vw, 2.2rem); background: var(--surface); box-shadow: var(--ombre); }
.titre-tarifs { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.4rem; }
.titre-tarifs h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.titre-tarifs p { margin: 0; font-size: 0.9rem; color: var(--encre-douce); }
.retouches .tarifs { grid-template-columns: 1fr; gap: clamp(0.6rem, 2vh, 1.2rem); }
.retouches .tarifs-groupe h3 { margin: 0.6rem 0 0.1rem; padding-bottom: 0.4rem; font-size: 1.15rem; }
.retouches .tarifs-groupe dt, .retouches .tarifs-groupe dd { padding: clamp(0.3rem, 0.9vh, 0.5rem) 0; font-size: 0.95rem; }
.avant-apres { grid-area: galerie; margin: 0; }
.avant-apres ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.avant-apres img { width: 100%; height: clamp(7rem, 22vh, 13rem); object-fit: cover; outline: 1.5px dashed transparent; outline-offset: -0.4rem; transition: filter 0.3s, outline-color 0.3s; }
/* Étapes cliquables : agrandies dans la visionneuse (surpiqûre dorée au survol). */
.avant-apres a { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.avant-apres a:focus-visible { outline: none; }
.avant-apres a:hover img, .avant-apres a:focus-visible img { filter: brightness(1.12); outline-color: color-mix(in srgb, var(--accent) 85%, transparent); }
.avant-apres a:hover span, .avant-apres a:focus-visible span { color: var(--accent-texte); }
.avant-apres span { display: block; margin-top: 0.3rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.avant-apres figcaption { margin-top: 0.5rem; font-family: var(--police-titre); font-size: 1.05rem; font-style: italic; color: var(--encre-douce); }
/* Petits écrans d'ordinateur (720 px de haut) : on resserre pour garder tout sur un écran. */
@media (min-width: 821px) and (max-height: 800px) {
  .retouches h1 { font-size: clamp(2.2rem, 6vh, 3.2rem); }
  .retouches .tarifs-groupe h3 { margin-top: 0.2rem; font-size: 1.05rem; }
  .retouches .tarifs-groupe dt, .retouches .tarifs-groupe dd { font-size: 0.9rem; line-height: 1.4; }
  .avant-apres figcaption { display: none; }
}
@media (max-width: 820px) {
  .retouches { grid-template-columns: 1fr; grid-template-areas: "intro" "tarifs" "galerie"; }
  .avant-apres img { height: auto; aspect-ratio: 3 / 4; }
}

/* =====================================================================
   9. Thèmes
   ===================================================================== */

/* ---------- A. Indigo : direction commune (accueil et ses 4 scènes, vestes, articles de scène, yoga, retouches) ----------
   Indigo profond d'un jean brut, fil d'or, surpiqûres. Pas encore migrée : cravates.html
   (ancienne page du défilé, thème atelier, plus reliée au menu).
   Les règles passent par :where() pour ne pas peser plus lourd qu'un réglage local
   (la scène du défilé, en thème atelier, garde ainsi sa typo et son bouton). */

.theme-indigo {
  --fond: #121b2c;
  --fond-2: #19253b;
  --surface: #1e2b44;
  --encre: #f0ebe1;
  --encre-douce: #b6bfcf;
  --accent: #e0a64b;
  --accent-texte: #ebb560;
  --trait: rgba(224, 166, 75, 0.24);
  --pied-accent: #e0a64b;
  --pastille-vendu: #8e2f3a;
  --ombre: 0 22px 44px -22px rgba(0, 0, 0, 0.75);
  --voile: color-mix(in srgb, var(--fond) 78%, transparent);
  /* Sergé du jean : fines diagonales et un halo bleuté. */
  --texture: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 20% 0%, rgba(90, 130, 190, 0.18), transparent 60%);
  background-image: var(--texture);
  background-attachment: fixed;
}

/* Titres : capitales franches, mot-clé en italique or. */
:where(.theme-indigo) :is(h1, h2) { font-family: var(--police-texte); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
:where(.theme-indigo) h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; }
:where(.theme-indigo) h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
:where(.theme-indigo) :is(h1, h2) :is(em, .italique) { font-family: var(--police-titre); font-size: 1.12em; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); }
:where(.theme-indigo) h1 em { display: block; }
:where(.theme-indigo) .vis-titre { font-family: var(--police-titre); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }

:where(.theme-indigo) .bouton { background: var(--accent); border-color: var(--accent); color: var(--fond); }
:where(.theme-indigo) .bouton:hover { background: transparent; color: var(--accent); }
:where(.theme-indigo) .bouton-discret { background: transparent; border-color: var(--encre); color: var(--encre); }
:where(.theme-indigo) .bouton-discret:hover { background: var(--encre); color: var(--fond); }

/* Pièces : surpiqûre dorée sur chaque photo. */
:where(.theme-indigo) .piece-visuel { border-radius: 4px; box-shadow: var(--ombre); }
:where(.theme-indigo) .piece-visuel::after { content: ""; position: absolute; inset: 0.55rem; z-index: 2; border: 1.5px dashed color-mix(in srgb, var(--accent) 75%, transparent); border-radius: 3px; pointer-events: none; }
:where(.theme-indigo) .piece-titre { font-family: var(--police-titre); font-style: italic; font-size: 1.5rem; }
:where(.theme-indigo) .pastille { top: 1rem; left: 1rem; }
:where(.theme-indigo) .vide { border: 1.5px dashed var(--trait); }

/* Pages collection : le fond d'écran reste fixe. Net derrière l'en-tête de page,
   il se voile ensuite (sections en --voile) pour laisser la place aux pièces. */
.fond-collection { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fond); }
.fond-collection img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.fond-collection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--fond) 84%, transparent) 0%, color-mix(in srgb, var(--fond) 58%, transparent) 32%, transparent 64%); }
.hero-collection {
  display: grid;
  align-items: center;
  min-height: calc(100svh - 4rem);
  padding-block: clamp(3rem, 8vh, 6rem) clamp(5rem, 14vh, 9rem);
  background: linear-gradient(to top, var(--voile), transparent 30%);
}
.hero-collection-texte { max-width: 35rem; }
.hero-collection h1 { margin-bottom: 1.3rem; }
.hero-collection .chapeau { color: var(--encre); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); }
.section-voilee, .page-collection .pied { background: var(--voile); }
@media (max-width: 820px) {
  .fond-collection::after { background: linear-gradient(to top, color-mix(in srgb, var(--fond) 88%, transparent) 0%, color-mix(in srgb, var(--fond) 64%, transparent) 50%, transparent 82%); }
  .hero-collection { align-items: end; min-height: calc(100svh - 3.8rem); padding-block: 2rem 3.5rem; }
}

/* Variante floue (pantalons de yoga) : flou artistique ; l'agrandissement cache les bords
   que le flou rend transparents. Le flou se règle ici. */
.fond-flou img { filter: blur(12px) saturate(1.15); transform: scale(1.08); }

/* Variante bande gauche (retouches, page tenue sur un écran) : la photo, sur toute la hauteur,
   montre l'image depuis un peu avant le chat (15 % de sa largeur) jusqu'au bord droit de la machine :
   largeur = 0,85 × 3/4 de la hauteur. Les deux colonnes de texte commencent juste avant la fin
   de la photo (légère superposition dans le fondu) ; à droite, fond bleuté uni pour les tarifs, sans cadre.
   --decalage-photo pousse l'image vers la droite sans bouger le texte : la bande s'élargit d'autant
   et l'image, calée à droite, rend un peu de ce qui était rogné à gauche. */
body:has(> .fond-ecran) { --photo-ecran: min(100vh * 0.6375, 40vw); --decalage-photo: 1cm; }
.fond-ecran img {
  --bande: calc(var(--photo-ecran) + var(--decalage-photo));
  width: var(--bande, 50%);
  object-position: 100% 50%;
  /* Fondu large et progressif vers le bleu, mesuré depuis le bord droit de l'image : le texte peut s'y poser. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 0.58 * var(--photo-ecran)), rgba(0, 0, 0, 0.85) calc(100% - 0.44 * var(--photo-ecran)), rgba(0, 0, 0, 0.55) calc(100% - 0.3 * var(--photo-ecran)), rgba(0, 0, 0, 0.22) calc(100% - 0.15 * var(--photo-ecran)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 0.58 * var(--photo-ecran)), rgba(0, 0, 0, 0.85) calc(100% - 0.44 * var(--photo-ecran)), rgba(0, 0, 0, 0.55) calc(100% - 0.3 * var(--photo-ecran)), rgba(0, 0, 0, 0.22) calc(100% - 0.15 * var(--photo-ecran)), transparent);
}
.fond-ecran::after { right: auto; width: calc(var(--photo-ecran, 50%) + var(--decalage-photo, 0px)); background: linear-gradient(to top, color-mix(in srgb, var(--fond) 45%, transparent), color-mix(in srgb, var(--fond) 12%, transparent) 45%); }
@media (min-width: 821px) {
  body:has(> .fond-ecran) .page-ecran { padding-inline: calc(var(--photo-ecran) - 5rem) var(--marge); }
  body:has(> .fond-ecran) .retouches { width: min(100%, 66rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.8rem, 3vw, 3rem); }
}
/* Écrans étroits en largeur (tablette à l'horizontale) : colonnes plus serrées, vignettes plus basses. */
@media (min-width: 821px) and (max-width: 1180px) {
  body:has(> .fond-ecran) .avant-apres img { height: clamp(6rem, 15vh, 9rem); }
}
:where(.page-collection) :is(.retouches-intro, .avant-apres) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.6); }
:where(.page-collection) .retouches-intro p { font-weight: 400; color: var(--encre); }
:where(.page-collection) .retouches-intro .bouton { text-shadow: none; }
:where(.theme-indigo) .retouches-tarifs { padding-inline: 0; background: none; box-shadow: none; }
:where(.theme-indigo) .tarifs-groupe h3 { border-bottom-color: var(--trait); color: var(--accent-texte); }
@media (max-width: 820px) {
  /* Une seule colonne : la photo repasse en plein écran, voilée sous tout le contenu. */
  .fond-ecran img { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .fond-ecran img { object-position: 40% 42%; }
  .fond-ecran::after { right: 0; width: auto; background: color-mix(in srgb, var(--fond) 80%, transparent); }
}

/* ---------- B. Atelier (cravates) : kraft, fil rouge, tirages scotchés ---------- */

.theme-atelier {
  --fond: #e7dbc5;
  --fond-2: #ddcfb5;
  --surface: #faf5ea;
  --encre: #2b231c;
  --encre-douce: #5e5043;
  --accent: #a3392b;
  --accent-texte: #93301f;
  --trait: rgba(43, 35, 28, 0.18);
  --pied-accent: #e3a48f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* La scène du défilé est dans l'accueil (thème indigo) : elle reprend ici sa propre typographie. */
.theme-atelier :is(h1, h2) { font-family: var(--police-titre); font-weight: 400; letter-spacing: -0.005em; text-transform: none; }
.theme-atelier h1 em { display: block; margin-top: 0.1em; font-family: var(--police-main); font-style: normal; color: var(--accent); font-size: 0.72em; line-height: 1; }
.note-main { font-family: var(--police-main); font-size: 1.7rem; line-height: 1.1; color: var(--accent); }
.couture { height: 0; margin: 0; border: 0; border-top: 2px dashed var(--accent); opacity: 0.45; }

.tirage {
  position: relative;
  margin: 0;
  padding: 0.85rem 0.85rem 3rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 16px 30px -18px rgba(60, 40, 20, 0.55);
  rotate: -1.6deg;
}
.tirage img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tirage figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 0.55rem; font-family: var(--police-main); font-size: 1.5rem; color: var(--encre); }
.tirage::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  z-index: 2;
  width: 6rem;
  height: 1.6rem;
  background: rgba(244, 233, 200, 0.78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  translate: -50% 0;
  rotate: -3deg;
}
.tirage-2 { rotate: 2.2deg; }


.etiquette-defile {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--surface);
  box-shadow: var(--ombre);
}
.etiquette-defile::after { content: ""; position: absolute; inset: 0.7rem; border: 2px dashed rgba(163, 57, 43, 0.45); pointer-events: none; }
.defile-date { margin: 0 0 0.4rem; font-family: var(--police-main); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--accent); }
.defile-titre { margin-bottom: 0.4rem; }
.defile-lieu { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-douce); }

/* Tampon du compte à rebours */
.tampon {
  position: absolute;
  top: -1.6rem;
  right: -1.2rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 7.2rem;
  aspect-ratio: 1;
  border: 2px solid var(--accent);
  border-radius: 50%;
  outline: 1px dashed var(--accent);
  outline-offset: -8px;
  background: rgba(250, 245, 234, 0.92);
  color: var(--accent);
  text-align: center;
  rotate: 12deg;
}
.tampon strong { display: block; font-family: var(--police-main); font-size: 2.2rem; font-weight: 500; line-height: 0.9; }
.tampon span { display: block; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.tampon[hidden] { display: none; }
@media (max-width: 820px) { .tampon { right: -0.4rem; width: 6rem; } }

/* Collecte */
.collecte { max-width: 28rem; margin-top: 2rem; }
.collecte-chiffre { margin: 0 0 0.6rem; color: var(--encre-douce); }
.collecte-chiffre strong { font-family: var(--police-main); font-size: 2.4rem; font-weight: 500; line-height: 1; color: var(--accent); margin-right: 0.3rem; }
.collecte-jauge { height: 0.7rem; padding: 2px; border: 1.5px dashed rgba(163, 57, 43, 0.55); border-radius: 99px; }
.collecte-jauge span { display: block; height: 100%; border-radius: 99px; background: repeating-linear-gradient(135deg, var(--accent) 0 6px, #b8503f 6px 12px); }
.collecte-objectif { margin: 0.4rem 0 0; font-family: var(--police-main); font-size: 1.2rem; color: var(--encre-douce); text-align: right; }

/* Étapes du don : étiquettes épinglées */
.dons { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0 0 2.5rem; padding: 0; list-style: none; counter-reset: don; }
.dons li { position: relative; padding: 2rem 1.6rem 1.6rem; background: var(--surface); box-shadow: 0 14px 28px -20px rgba(60, 40, 20, 0.6); counter-increment: don; rotate: -0.8deg; }
.dons li:nth-child(2) { rotate: 0.7deg; }
.dons li::before { content: counter(don); position: absolute; top: -1.1rem; left: 1.2rem; display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--police-main); font-size: 1.5rem; }
.dons h3 { font-family: var(--police-main); font-size: 1.8rem; font-weight: 500; margin-bottom: 0.4rem; }
.dons p { margin: 0; color: var(--encre-douce); font-size: 0.97rem; }
@media (max-width: 760px) { .dons { grid-template-columns: 1fr; } }

/* Créations voilées jusqu'au défilé */
.voiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); }
.voile { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--encre); }
.voile img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.2) brightness(0.75); scale: 1.2; }
.voile figcaption { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.3rem; padding: 1rem; text-align: center; color: #fbf3e6; }
.voile strong { font-family: var(--police-main); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; line-height: 1; }
.voile span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 600px) { .voiles { grid-template-columns: 1fr 1fr; } .voile:last-child { display: none; } }

/* =====================================================================
   10. Transitions entre pages & apparitions
   ===================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 0.22s ease-in both page-sortie; }
::view-transition-new(root) { animation: 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both page-entree; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes page-sortie { to { opacity: 0; } }
@keyframes page-entree { from { opacity: 0; transform: translateY(12px); } }

/* L'image d'un volet de l'accueil devient l'image d'en-tête de la page visée. */
.vt-cravates { view-transition-name: univers-cravates; }

html.js .apparition { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .apparition.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.js .apparition { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}