/*
  Terres mêlées — feuille de style (v5, 11/10/2026)
  =================================================
  Versions précédentes : .sauvegarde-2026-10-11-v1/ (origine), -v2/, -v3/ (avec le panneau de réglages), -v4/ (avec les blocs terres mêlées et raku)
  Règle Thib Studio : voir ../references/anti-look-ia.md

  L'identité vient de Celia, pas d'une police :
  - Le titre et le logo sont SON écriture, peinte à la main sur la plaque de sa
    carte de visite, détourée et tracée en SVG (outils/tracer-lettrage.py).
  - Les couleurs ont été choisies par Thib le 11/10/2026 dans le panneau de réglages,
    parmi celles prélevées sur les photos de ses pièces :
      blanc              : l'émail blanc de ses personnages (fond, blanc pur, pas crème)
      cœur du coquelicot : le brun-noir du cœur alvéolé de son coquelicot (fond du héros)
      rouge tenture      : la tenture rouge de son stand de Noël (logo au survol et au toucher, noir sinon)
      coquelicot         : son émail orange coquelicot (sélection de texte)
      rouge coquelicot   : le même émail, plus profond (liens, 5,9:1 sur blanc)
      veine rouge        : les veines rouges de l'émail coquelicot (bloc marchés, texte blanc 10:1)
    Peu de couleurs : le brun-noir du héros revient en pied de page, entre les deux le blanc
    et un seul bloc de couleur (les marchés).
    Exception assumée à la règle anti-look-IA, demandée par Thib : le rouge-orangé est
    l'émail réel de Celia (rouge vif, pas le terracotta de Claude), sur fond blanc, jamais crème.

  Typographies :
  - Gloock (titres) : un sérif d'affiche à fort contraste, aux courbes pleines et aux
    empattements en goutte, comme le bord d'un bol tourné. Il pose le travail de Celia
    avec sérieux et laisse le côté spontané à son écriture (logo, titre du héros).
    Choisie par Thib dans le panneau de réglages.
  - Karla (texte) : grotesque aux formes un peu irrégulières (le g, le y),
    chaleureuse et très lisible en grand corps pour un public de marché.
*/
:root {
  /* Couleurs */
  --blanc: #ffffff;
  --encre: #151a1a;            /* noir de fumée du raku, texte */
  --encre-douce: #48514f;      /* textes secondaires, 8,2:1 sur blanc */
  --trait: #dde4e2;            /* filets */
  --coeur: #1b100b;            /* cœur du coquelicot */
  --rouge-tenture: #8b1c22;
  --coquelicot: #e0531a;
  --rouge-coquelicot: #b9360f;
  --veine: #7a2614;
  --photo-fond: #eef2f1;       /* emplacement d'une photo pas encore chargée */

  /* Rôles */
  --accent: var(--rouge-coquelicot);   /* survol des liens, focus */
  --fond-heros: var(--coeur);
  --fond-marches: var(--veine);
  --texte-marches: var(--blanc);
  --bouton: var(--rouge-coquelicot);   /* « Écrire à Celia pour cette pièce » */
  --logo: var(--encre);
  --logo-survol: var(--rouge-tenture);   /* au survol et au toucher */

  /* Typographies */
  --police-titres: "Gloock", Georgia, serif;
  --poids-titres: 400;
  --echelle-titres: 1;
  --police-texte: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Texte courant (petit sur mobile, plus grand sur ordinateur) */
  --texte-grand: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);

  /* Rythme */
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --largeur: 76rem;
  --rayon: 3px;
  --entete: 4.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 1rem);
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
  line-height: 1.6;
}

::selection { background: var(--coquelicot); color: var(--encre); }

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

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: var(--poids-titres);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: calc(clamp(1.9rem, 6vw, 3.8rem) * var(--echelle-titres)); }

p { margin: 0; }
figure { margin: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover { color: var(--accent); text-decoration-thickness: 2px; }

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

.evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--encre);
  color: var(--blanc);
}
.evitement:focus { top: 1rem; color: var(--blanc); }

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

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

.section-tete {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  max-width: 38rem;
}
.section-tete p { font-size: var(--texte-grand); }

/* ---------- L'écriture de Celia ---------- */

/* Le SVG sert de masque : la couleur suit le texte (currentColor) */
.lettrage {
  display: block;
  background: currentColor;
  -webkit-mask: var(--lettrage) no-repeat left center / contain;
          mask: var(--lettrage) no-repeat left center / contain;
}
.lettrage--plaque {
  --lettrage: url("img/lettrage-terres-melees.svg");
  aspect-ratio: 2421 / 1456;
}
.lettrage--ligne {
  --lettrage: url("img/lettrage-terres-melees-ligne.svg");
  aspect-ratio: 3701 / 688;
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--blanc);
}
.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--entete);
  max-width: var(--largeur);
  margin-inline: auto;
  padding: 0.5rem var(--gouttiere);
}
.marque {
  display: block;
  width: clamp(9.5rem, 24vw, 13rem);
  padding-block: 0.4rem;
  color: var(--logo);
  transition: color 0.25s ease;
}
.marque:hover,
.marque:active,
.marque:focus-visible { color: var(--logo-survol); }

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0 clamp(0.9rem, 2.6vw, 2rem);
}
.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.navigation a:hover { color: var(--accent); border-bottom-color: currentColor; }

@media (max-width: 599px) {
  .navigation__article { display: none; }
  .navigation a { font-size: 1rem; }
}

/* En arrivant sur le site, pas de bandeau (téléphone comme ordinateur) : la navigation
   flotte en blanc sur le héros et « Terres mêlées » n'est écrit qu'en grand dans le héros.
   Quand ce grand titre passe sous l'en-tête, le bandeau blanc se pose et le logo monte
   du bas de sa case, comme un glissement, dans la continuité du défilement
   (main.js, classe entete--pleine). Pas de filet sous le bandeau : c'est lui qui laissait
   une ligne en retard pendant le fondu. Sans JavaScript, le bandeau reste affiché. */
.js .entete {
  transition: background-color 0.4s ease, color 0.4s ease;
}
.js .entete:not(.entete--pleine) {
  background: transparent;
  color: var(--blanc);
}
.js .entete .navigation a { transition: border-color 0.2s ease, color 0.4s ease, text-shadow 0.4s ease; }
.js .entete:not(.entete--pleine) .navigation a {
  text-shadow: 0 1px 10px rgb(27 16 11 / 0.55);   /* lisible sur l'orange de la photo */
}
.js .entete:not(.entete--pleine) .navigation a:hover { color: inherit; }
.js .entete:not(.entete--pleine) :focus-visible { outline-color: var(--blanc); }

/* Le logo monte du bas de sa propre case, qui le masque tant qu'il n'est pas arrivé */
.js .marque { overflow: hidden; }
.js .marque .lettrage {
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.3s ease;
}
.js .entete:not(.entete--pleine) .marque { pointer-events: none; }
.js .entete:not(.entete--pleine) .marque .lettrage {
  opacity: 0;
  transform: translateY(115%);
}

/* Le héros passe sous le bandeau transparent */
.js .accueil { margin-top: calc(-1 * var(--entete)); }
@media (min-width: 760px) {
  .js .accueil {
    min-height: min(100svh, calc(50rem + var(--entete)));
    padding-top: var(--entete);
  }
}

/* ---------- Accueil : le cœur du coquelicot, texte en blanc sur le noir du raku ---------- */

/* La photo se fond dans le noir par un masque très progressif (pas de voile posé dessus) :
   on ne voit pas où elle s'arrête, l'orange garde toute sa couleur.
   Téléphone : la photo entière en haut, le texte commence dans son fondu.
   Ordinateur : le texte à gauche, la photo occupe les deux tiers de droite. */
.accueil {
  --fondu: linear-gradient(var(--sens-fondu, to bottom),
    #000 0%, rgb(0 0 0 / 0.987) 8.1%, rgb(0 0 0 / 0.951) 15.5%, rgb(0 0 0 / 0.896) 22.5%,
    rgb(0 0 0 / 0.825) 29%, rgb(0 0 0 / 0.741) 35.2%, rgb(0 0 0 / 0.648) 41.1%, rgb(0 0 0 / 0.55) 47.1%,
    rgb(0 0 0 / 0.45) 52.9%, rgb(0 0 0 / 0.352) 58.9%, rgb(0 0 0 / 0.259) 64.8%, rgb(0 0 0 / 0.175) 71%,
    rgb(0 0 0 / 0.104) 77.5%, rgb(0 0 0 / 0.049) 84.5%, rgb(0 0 0 / 0.013) 91.9%, transparent 100%);
  position: relative;
  color: var(--blanc);
  background: var(--fond-heros);
  isolation: isolate;
}
.accueil__photo {
  position: relative;
  display: block;
  z-index: -1;
  /* Le fondu ne commence qu'aux 55 % de la hauteur */
  -webkit-mask: linear-gradient(#000, #000) top / 100% 55% no-repeat, var(--fondu) bottom / 100% 45% no-repeat;
          mask: linear-gradient(#000, #000) top / 100% 55% no-repeat, var(--fondu) bottom / 100% 45% no-repeat;
}
.accueil__photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.accueil__texte {
  display: grid;
  gap: 1rem;
  margin-top: -6rem;
  padding-bottom: clamp(3rem, 8vw, 4.5rem);
}
.accueil .lettrage--plaque {
  width: min(78vw, 30rem);
  margin-bottom: 0.75rem;
}
/* Téléphone : seul le grand titre est remonté (pas le texte dessous),
   pour que le logo passe dans l'en-tête un peu plus tôt */
@media (max-width: 759px) {
  .accueil h1 { position: relative; top: -1.5rem; }
}
.sans-logo-heros .accueil .lettrage--plaque { display: none; }
.accueil__univers {
  max-width: 24ch;
  font-family: var(--police-titres);
  font-weight: var(--poids-titres);
  font-size: calc(clamp(1.35rem, 3.4vw, 2.35rem) * var(--echelle-titres));
  line-height: 1.15;
  text-wrap: balance;
}
.accueil__texte p:not(.accueil__univers) {
  max-width: 31rem;
  font-size: 1rem;
  line-height: 1.55;
}
.accueil :focus-visible { outline-color: var(--blanc); }

@media (min-width: 760px) {
  .accueil {
    --sens-fondu: to left;
    display: grid;
    align-items: center;
    min-height: min(calc(100svh - var(--entete)), 50rem);
  }
  .accueil__photo {
    position: absolute;
    inset: 0 0 0 30%;
    /* Fondu sur la moitié gauche de la photo, l'autre moitié reste entière */
    -webkit-mask: linear-gradient(#000, #000) right / 55% 100% no-repeat, var(--fondu) left / 45% 100% no-repeat;
            mask: linear-gradient(#000, #000) right / 55% 100% no-repeat, var(--fondu) left / 45% 100% no-repeat;
  }
  .accueil__photo img {
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 50%;
  }
  .accueil__texte {
    margin-top: 0;
    padding-block: clamp(3rem, 8vh, 5rem);
  }
  .accueil__texte > * { max-width: min(30rem, 46vw); }
}

/* ---------- Pièces : une rangée qui défile ---------- */

/* Toutes les pièces ont la même hauteur ; la largeur suit la photo (--r = largeur / hauteur).
   Sur téléphone, on en voit au moins deux côte à côte, comme sur la table du marché.
   Le premier bord s'aligne sur la colonne du texte, la rangée file jusqu'au bord de l'écran. */
.pieces {
  --hauteur-piece: clamp(11.5rem, 52vw, 15rem);
  --marge-piste: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--section);
}
@media (min-width: 760px) {
  .pieces { --hauteur-piece: clamp(16rem, 24vw, 21rem); }
}

.pieces__piste {
  position: relative;               /* garde les textes masqués (.sr-only) des cartes dans la rangée */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge-piste);
  padding: 0.25rem var(--marge-piste) 1rem;
  scrollbar-width: none;
}
.pieces__piste::-webkit-scrollbar { display: none; }
.pieces__piste:focus-visible { outline-offset: -3px; }

.pieces__rangee {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  width: max-content;
}

.carte {
  flex: 0 0 auto;
  width: calc(var(--hauteur-piece) * var(--r, 0.75));
  scroll-snap-align: start;
}
.carte__ouvrir {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.carte__photo {
  position: relative;
  display: block;
  aspect-ratio: var(--r, 0.75);
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--photo-fond);
}
.carte__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.carte__ouvrir:hover .carte__photo img { transform: scale(1.04); }

.carte__vide {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.badge {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  background: var(--encre);
  color: var(--blanc);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--rayon);
}

.carte__nom {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--police-titres);
  font-weight: var(--poids-titres);
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
.carte__ouvrir:hover .carte__nom {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Le petit mot de Celia sur la pièce */
.carte__mot {
  margin-top: 0.25rem;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--encre-douce);
}

.pieces__pied {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.pieces__pied p {
  max-width: 34rem;
  font-size: var(--texte-grand);
}

/* ---------- Fiche d'une pièce (s'ouvre au toucher) ---------- */

.fiche {
  width: min(100% - 2 * var(--gouttiere), 52rem);
  max-width: none;
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  overflow: auto;
}
.fiche::backdrop { background: rgb(27 16 11 / 0.8); }
.fiche[open] { animation: fiche-entree 0.3s cubic-bezier(.2,.7,.2,1); }
.fiche[open]::backdrop { animation: fondu 0.3s ease; }
@keyframes fiche-entree { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes fondu { from { opacity: 0; } }

.fiche__corps { display: grid; }
.fiche__corps:focus { outline: none; }
/* Fiche ouverte : la page derrière ne défile plus, il faut d'abord la fermer */
.fiche-ouverte,
.fiche-ouverte body { overflow: hidden; }
.fiche { overscroll-behavior: contain; }
.fiche__photo { background: var(--photo-fond); }
.fiche__photo img {
  width: 100%;
  max-height: 60svh;
  object-fit: contain;
}
.fiche__texte {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 0.25rem;
}
.fiche h3 { font-size: 1.6rem; }
.fiche__mot { font-style: italic; color: var(--encre-douce); }
.fiche__statut { font-weight: 700; }
.fiche__demande {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--bouton);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.fiche__demande:hover { color: var(--bouton); text-decoration-thickness: 3px; filter: brightness(0.82); }
.fiche form { padding: 0 1.25rem 0.75rem; }
.fiche__fermer {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.fiche__fermer:hover { color: var(--encre); }

@media (min-width: 760px) {
  .fiche__corps { grid-template-columns: 3fr 2fr; }
  .fiche__photo { grid-row: span 2; }
  .fiche__photo img { height: 100%; max-height: 80svh; }
  .fiche__texte { align-content: start; padding: 2rem 1.75rem 0.5rem; }
  .fiche form { align-self: end; padding: 0 1.75rem 1.5rem; }
}

/* ---------- Marchés ---------- */

.marches {
  padding-block: var(--section);
  background: var(--fond-marches);
  color: var(--texte-marches);
}
.marches a:hover { color: inherit; }
.marches :focus-visible { outline-color: currentColor; }
.marches__grille {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.marches__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid currentColor;
}
.marche {
  display: grid;
  gap: 0.2rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid currentColor;
}
.marche__date {
  font-weight: 700;
  font-size: var(--texte-grand);
  line-height: 1.3;
}
.marche__date::first-letter { text-transform: uppercase; }
.marche__lieu { font-weight: 400; }

.marches__vide {
  padding: 1.5rem 0;
  border-top: 2px solid currentColor;
  font-size: var(--texte-grand);
}

.marches__photo img { border-radius: var(--rayon); }
.marches__photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.98rem;
}

@media (min-width: 900px) {
  .marches__grille { grid-template-columns: 5fr 6fr; align-items: start; }
  .marches__photo { margin-top: 0.5rem; }
}

/* ---------- L'atelier ---------- */

.atelier { padding-block: var(--section); }
.atelier__texte { display: grid; gap: 1.1rem; }
.atelier__texte > p { max-width: 34rem; font-size: var(--texte-grand); }

/* Notes de Thib pour Celia, à retirer quand elle aura répondu */
.note-celia {
  margin-top: 1.25rem;
  font-style: italic;
  font-size: 0.95rem;
}

/* ---------- Pied de page : le brun-noir du héros, le logo et les coordonnées ---------- */

.pied {
  background: var(--fond-heros);
  color: var(--blanc);
  padding-top: clamp(3rem, 7vw, 4.5rem);
}
.pied a { text-decoration: none; }
.pied a:hover { color: inherit; text-decoration: underline; text-underline-offset: 0.22em; }
.pied :focus-visible { outline-color: var(--blanc); }
.pied__grille {
  display: grid;
  gap: 2rem;
}
.pied__lettrage { width: clamp(11rem, 44vw, 15rem); }

.coordonnees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.coordonnees li,
.coordonnees a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
}
.coordonnees a,
.coordonnees address {
  font-style: normal;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.coordonnees__icone {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pied__note { margin-top: 0; }
.marches__note { margin-top: 0.6rem; }

.pied__credit {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-block: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  .pied__grille { grid-template-columns: 1fr auto; align-items: start; column-gap: 4rem; }
  .pied__note { grid-column: 2; }
}

/* ---------- Apparition au scroll ---------- */

.js .apparition {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .apparition.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .entete, .js .marque .lettrage, .js .entete .navigation a { transition: none; }
  .js .apparition { opacity: 1; transform: none; transition: none; }
  .carte__photo img { transition: none; }
  html { scroll-behavior: auto; }
  .carte__ouvrir:hover .carte__photo img { transform: none; }
  .fiche[open], .fiche[open]::backdrop { animation: none; }
}