/* ==========================================================================
   Yvain, humoriste. Feuille de style unique du site.
   Couleurs et lettrage tirés de l'affiche de « Pas courageux » : orange du
   titre, rouge du sticker, turquoise du tee-shirt. Le gothique porte la voix
   du chevalier, le bâton étroit celle de l'affiche.
   ========================================================================== */

/* ---------- Polices ----------
   Archivo et Grenze Gotisch (SIL Open Font License), servies par le site lui-même :
   aucune demande à Google. Fichiers et règles produits par outils/polices.mjs.
   « latin » couvre le français ; « latin-ext » n'est chargé que si une page contient
   un caractère d'une autre langue (unicode-range). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../polices/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../polices/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../polices/archivo-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../polices/archivo-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Grenze Gotisch";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../polices/grenze-gotisch-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Grenze Gotisch";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../polices/grenze-gotisch-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Polices de secours, affichées une fraction de seconde tant que celles du site arrivent
   (première visite, connexion lente). Ce sont Georgia et Arial, déjà sur l'appareil, mises
   à l'échelle pour occuper la même largeur et la même hauteur que Grenze Gotisch et Archivo :
   quand la vraie police arrive, les lignes ne se recoupent pas et rien ne se déplace.
   Réglages mesurés dans le navigateur le 4 octobre 2026 (largeur moyenne des titres et des
   textes du site) ; ascent-override et descent-override = hauteurs de la police du site
   divisées par size-adjust. Sans Georgia ni Arial (Android), ces règles sont ignorées. */

@font-face {
  font-family: "Grenze repli";
  font-weight: 900;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 76.2%;
  ascent-override: 144.4%;
  descent-override: 49.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Grenze repli";
  font-weight: 500 800;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 74.6%;
  ascent-override: 147.5%;
  descent-override: 50.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-weight: 400 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.1%;
  ascent-override: 89.7%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 97.7%;
  ascent-override: 90.1%;
  descent-override: 21.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98.1%;
  ascent-override: 89.7%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

/* Lettres étroites (boutons, étiquettes, prix : font-stretch de 62 à 80 %). Arial n'a pas de
   version étroite : on le réduit davantage, pour qu'il occupe la même largeur. */
@font-face {
  font-family: "Archivo repli";
  font-stretch: 72.1% 90%;
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 80.2%;
  ascent-override: 109.7%;
  descent-override: 26.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-stretch: 65.1% 72%;
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 77.5%;
  ascent-override: 113.5%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-stretch: 50% 65%;
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 73%;
  ascent-override: 120.5%;
  descent-override: 28.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-style: italic;
  font-weight: 400 500;
  src: local("Arial Italic"), local("Arial-ItalicMT");
  size-adjust: 98.1%;
  ascent-override: 89.7%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo repli";
  font-style: italic;
  font-weight: 600 900;
  src: local("Arial Bold Italic"), local("Arial-BoldItalicMT");
  size-adjust: 95.5%;
  ascent-override: 92.1%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --orange: #ff8a00;
  --jaune: #ffc93c;
  --rouge: #e5131b;
  --turquoise: #4fc3a9;
  --encre: #0f2b2a;

  --gothique: "Grenze Gotisch", "Grenze repli", Georgia, serif;
  --baton: "Archivo", "Archivo repli", "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(1rem, 4.5vw, 3.5rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --rayon: 10px;
  --entete: 3.75rem;
  --creneau: 1.125rem;
}

/* ---------- Socle ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html[data-menu-ouvert] {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--encre);
  color: var(--encre);
  font: 400 1.0625rem/1.55 var(--baton);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

sup {
  font-size: 0.6em;
  line-height: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus, currentColor);
  outline-offset: 3px;
  border-radius: 4px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.conteneur {
  width: min(100% - 2 * var(--marge), 80rem);
  margin-inline: auto;
}

.evitement {
  position: absolute;
  left: 0.5rem;
  top: -5rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  background: #fff;
  color: var(--encre);
  font-weight: 700;
}

.evitement:focus {
  top: 0.5rem;
}

/* ---------- Champs de couleur ----------
   Chaque section pose son fond et les couleurs qui vont avec. */

.champ {
  position: relative;
  background: var(--fond);
  color: var(--texte);
  --focus: var(--texte);
}

.champ--orange {
  --fond: var(--orange);
  --texte: var(--encre);
  --doux: #3b2a0a;
  --trait: var(--encre);
  --bouton: var(--encre);
  --sur-bouton: #fff;
  --rubrique: var(--encre);
}

.champ--blanc {
  --fond: #fff;
  --texte: var(--encre);
  --doux: #4c6362;
  --trait: var(--encre);
  --bouton: var(--encre);
  --sur-bouton: #fff;
  --rubrique: var(--rouge);
}

.champ--turquoise {
  --fond: var(--turquoise);
  --texte: var(--encre);
  --doux: #153d39;
  --trait: var(--encre);
  --bouton: var(--encre);
  --sur-bouton: #fff;
  --rubrique: var(--encre);
}

.champ--jaune {
  --fond: var(--jaune);
  --texte: var(--encre);
  --doux: #40330f;
  --trait: var(--encre);
  --bouton: var(--encre);
  --sur-bouton: #fff;
  --rubrique: var(--encre);
}

.champ--encre {
  --fond: var(--encre);
  --texte: #fff;
  --doux: #b5cdca;
  --trait: #3c5a58;
  --bouton: var(--orange);
  --sur-bouton: var(--encre);
  --rubrique: var(--orange);
}

/* Lumière éteinte : tout passe à la nuit, l'orange reste allumé. */
[data-theme="nuit"] .champ {
  --texte: #e9f3f1;
  --doux: #a8c2bf;
  --trait: #35524f;
  --bouton: var(--orange);
  --sur-bouton: var(--encre);
  --rubrique: var(--orange);
  --titre: var(--orange);
}

[data-theme="nuit"] .champ--orange {
  --fond: #0a1e1d;
}

[data-theme="nuit"] .champ--blanc {
  --fond: #0f2b2a;
}

[data-theme="nuit"] .champ--turquoise {
  --fond: #123733;
}

[data-theme="nuit"] .champ--jaune {
  --fond: #142f2d;
}

[data-theme="nuit"] .champ--encre {
  --fond: #061413;
}

/* Créneaux : le haut de la section mord sur la précédente, comme un rempart
   derrière lequel se cacher. */
.creneaux::before {
  content: "";
  position: absolute;
  inset: auto 0 calc(100% - 1px) 0;
  height: var(--creneau);
  background: linear-gradient(90deg, var(--fond) 50%, transparent 50%) 0 0 /
    calc(var(--creneau) * 3.2) 100%;
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--encre);
  color: #fff;
  --focus: #fff;
}

[data-theme="nuit"] .entete {
  background: #061413;
}

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: var(--entete);
}

.logo {
  margin-right: auto;
  color: var(--orange);
  font: 900 2.25rem/1 var(--baton);
  font-stretch: 62%;
  text-decoration: none;
}

.menu__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.menu a {
  display: block;
  padding: 0.5rem 0;
  font-weight: 600;
  text-decoration: none;
}

.menu a:hover {
  color: var(--orange);
}

.menu a[aria-current] {
  box-shadow: inset 0 -3px var(--orange);
}

.lumiere,
.burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Ces deux boutons n'agissent qu'avec le script : sans lui, ils ne s'affichent pas.
   La classe « js » est posée dans l'en-tête de la page, avant le premier affichage :
   les boutons sont en place d'emblée et le menu ne se décale pas à leur apparition. */
html:not(.js) .lumiere,
html:not(.js) .burger {
  display: none;
}

.lumiere:hover,
.burger:hover {
  color: var(--orange);
}

.lumiere[aria-pressed="true"] {
  color: var(--jaune);
}

.lumiere__texte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 55.99rem) {
  /* Sans JavaScript, le menu passe simplement sous la barre. */
  .menu {
    order: 5;
    width: 100%;
    padding-bottom: 0.5rem;
  }

  .js .menu {
    display: none;
    position: fixed;
    inset: var(--entete) 0 0;
    width: auto;
    padding: 1.5rem var(--marge) 2.5rem;
    overflow-y: auto;
    background: var(--encre);
  }

  .js .menu[data-ouvert] {
    display: block;
  }

  .js .menu__liste {
    flex-direction: column;
    gap: 0;
  }

  .js .menu a {
    padding: 0.3rem 0;
    font: 800 clamp(2.5rem, 11vw, 3.5rem) / 1.05 var(--gothique);
  }

  .js .menu a[aria-current] {
    box-shadow: none;
    color: var(--orange);
  }
}

@media (min-width: 56rem) {
  .menu {
    margin-right: 0.5rem;
  }

  .burger {
    display: none;
  }
}

/* ---------- Boutons, liens, stickers ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.15em 0.72em;
  border: 0;
  border-radius: var(--rayon);
  background: var(--bouton);
  color: var(--sur-bouton);
  font: 800 1.1875rem/1 var(--baton);
  font-stretch: 75%;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover {
  background: var(--rouge);
  color: #fff;
}

.bouton--grand {
  font-size: 1.375rem;
}

.bouton--entete {
  padding: 0.62em 0.9em 0.54em;
  background: var(--orange);
  color: var(--encre);
  font-size: 1.0625rem;
}

.lien {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.lien:hover {
  text-decoration-thickness: 4px;
}

/* Le sticker de l'affiche : rouge, liseré blanc, posé de travers. */
.sticker {
  display: inline-block;
  padding: 0.3em 0.7em 0.24em;
  border: 3px solid #fff;
  border-radius: var(--rayon);
  background: var(--rouge);
  color: #fff;
  font: 900 1.125rem/1 var(--baton);
  font-stretch: 68%;
  letter-spacing: 0.01em;
  rotate: -3deg;
  box-shadow: 0 0.2rem 0.5rem -0.15rem rgb(15 43 42 / 0.5);
}

/* ---------- Titres et texte courant ---------- */

.titre {
  color: var(--titre, var(--texte));
  font: 800 clamp(2.75rem, 8vw, 5.5rem) / 0.9 var(--gothique);
  letter-spacing: -0.01em;
}

.titre--moyen {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

/* Largeurs en em et non en ch : le ch dépend de la police affichée, donc change (et recoupe
   les lignes) quand la police du site remplace celle de secours. 20.63em = 36ch en Archivo. */
.chapo {
  max-width: 20.63em;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.4;
}

/* Textes courts : lignes équilibrées, jamais de mot seul en dernière ligne. */
.chapo,
.citation p,
.hero__phrase,
.hero__chapo,
.volets p,
.etapes p,
.fiche__texte > p {
  text-wrap: balance;
}

.prose {
  max-width: 35.53em; /* 62ch en Archivo */
}

.prose > * + * {
  margin-top: 1em;
}

.prose a:not(.bouton) {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.prose h2 {
  margin-top: 2.5rem;
}

/* Lettrine rubriquée, comme dans les manuscrits où vit l'autre Yvain. */
.lettrine {
  /* Contient la lettrine même quand le paragraphe est plus court qu'elle. */
  display: flow-root;
}

.lettrine::first-letter {
  float: left;
  margin: 0.04em 0.1em 0 0;
  color: var(--rubrique);
  font: 900 4.2em/0.8 var(--gothique);
}

.citation {
  max-width: 12.1em; /* 24ch en Grenze Gotisch */
  font: 700 clamp(1.75rem, 4vw, 3rem) / 1.04 var(--gothique);
}

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

.section__tete {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section__suite {
  margin-top: 2.25rem;
}

@media (min-width: 56rem) {
  .section__tete {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
  }
}

.duo {
  display: grid;
  gap: 2rem 4rem;
}

@media (min-width: 56rem) {
  .duo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .duo--egal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .duo--centre {
    align-items: center;
  }
}

/* ---------- Accueil : le titre trouillard ---------- */

.hero {
  padding-block: clamp(2rem, 5vw, 4.5rem) calc(var(--section) + var(--creneau));
  overflow: clip;
}

.hero__grille {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero__sticker {
  margin-bottom: 1.25rem;
}

.hero__qui {
  display: block;
  font: 800 clamp(1.125rem, 2.4vw, 1.5rem) / 1.1 var(--baton);
  font-stretch: 75%;
}

.hero__spectacle {
  display: block;
  margin-top: 0.12em;
  color: var(--titre, var(--texte));
  font: 900 clamp(4.5rem, 21vw, 11rem) / 0.8 var(--gothique);
  letter-spacing: -0.02em;
}

.hero__spectacle .mot {
  display: block;
  white-space: nowrap;
}

.mot-lie {
  display: inline-block;
  white-space: nowrap;
}

.lettre {
  display: inline-block;
  will-change: transform;
}

/* 12.65em = 22ch en Archivo italique (voir .chapo). */
.hero__phrase {
  max-width: 12.65em;
  margin-top: 1.5rem;
  font: italic 600 clamp(1.25rem, 2.6vw, 1.75rem) / 1.25 var(--baton);
}

/* 22.92em = 40ch en Archivo (voir .chapo). */
.hero__chapo {
  max-width: 22.92em;
  margin-top: 1rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

/* L'astuce ne vaut que si le titre réagit : script actif et animations acceptées.
   Décidé ici et non par le script, pour que sa place soit prise dès le premier affichage. */
.hero__astuce {
  display: none;
  margin-top: 1.5rem;
  color: var(--doux);
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero__astuce {
    display: block;
  }
}

.hero__affiche {
  justify-self: center;
  width: min(100%, 24rem);
  padding: 0.625rem;
  border-radius: 4px;
  background: #fff;
  rotate: 2.5deg;
  box-shadow: 0 1.75rem 3rem -1.25rem rgb(15 43 42 / 0.6);
}

.hero__affiche img {
  width: 100%;
  border-radius: 2px;
}

@media (min-width: 60rem) {
  .hero__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .hero__spectacle {
    font-size: clamp(6rem, 12.5vw, 10.5rem);
  }
}

/* ---------- En-tête des pages intérieures ---------- */

.tete {
  padding-block: clamp(2.5rem, 6vw, 5rem) calc(clamp(2.5rem, 6vw, 4.5rem) + var(--creneau));
  overflow: clip;
}

.tete__sur {
  display: block;
  margin-bottom: 0.4rem;
  font: 800 clamp(1.0625rem, 2vw, 1.25rem) / 1.2 var(--baton);
  font-stretch: 75%;
}

.tete--seule {
  min-height: 70vh;
}

.tete .sticker {
  margin-bottom: 1.25rem;
}

.tete__titre {
  display: block;
  color: var(--titre, var(--texte));
  font: 900 clamp(3.5rem, 12vw, 8.5rem) / 0.82 var(--gothique);
  letter-spacing: -0.015em;
}

.tete__chapo {
  margin-top: 1.5rem;
}

/* ---------- Dates ---------- */

.residence {
  display: grid;
  gap: 1.25rem 2.5rem;
  align-items: center;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  border-radius: var(--rayon);
  background: var(--encre);
  color: #fff;
  --focus: #fff;
  --bouton: var(--orange);
  --sur-bouton: var(--encre);
}

[data-theme="nuit"] .residence {
  background: #061413;
}

.residence__ville {
  margin-top: 0.5rem;
  color: var(--orange);
  font: 900 clamp(4rem, 11vw, 7rem) / 0.78 var(--gothique);
}

.residence__rythme {
  font: 800 clamp(1.375rem, 2.6vw, 1.75rem) / 1.15 var(--baton);
  font-stretch: 75%;
}

.residence__infos p + p {
  margin-top: 0.5rem;
  color: #b5cdca;
}

@media (min-width: 56rem) {
  .residence {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

.dates {
  margin-top: 1rem;
}

.date {
  display: grid;
  gap: 0.4rem 1.5rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 2px solid var(--trait);
}

.date__jours {
  display: block;
  font: 900 2.75rem/0.95 var(--baton);
  font-stretch: 62%;
}

.date__mois {
  font-weight: 700;
  font-stretch: 80%;
}

.date__ville {
  font: 800 clamp(2rem, 4.5vw, 2.75rem) / 0.95 var(--gothique);
}

.date__precision {
  font: 600 1rem var(--baton);
}

.date__salle {
  font-weight: 600;
}

.date__details {
  color: var(--doux);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.bouton--date {
  justify-self: start;
  margin-top: 0.4rem;
}

.dates__vide {
  margin-top: 1.5rem;
  max-width: 28.66em; /* 50ch en Archivo */
}

.dates__titre {
  margin-bottom: 1.5rem;
}

.dates__titre:not(:first-child) {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.dates__note {
  max-width: 34.39em; /* 60ch en Archivo */
  margin-top: 1.5rem;
  color: var(--doux);
  font-size: 0.9375rem;
}

@media (min-width: 48rem) {
  .date {
    grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 14rem) minmax(8.5rem, auto);
  }

  .bouton--date {
    justify-self: end;
    margin-top: 0;
  }
}

/* ---------- Fiches de faits ---------- */

.faits {
  border-top: 2px solid var(--trait);
}

.faits > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 2px solid var(--trait);
}

.faits dt {
  font-weight: 800;
  font-stretch: 75%;
}

.faits a {
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* ---------- Vidéos ---------- */

.videos {
  display: grid;
  gap: 2.25rem 1.5rem;
}

@media (min-width: 40rem) {
  .videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Deux vidéos : deux colonnes pleines, pas de case vide. */
  .videos--deux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.video__facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayon);
  background: #000;
}

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

.video__lecture {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--rayon);
  background: var(--orange);
  color: var(--encre);
}

.video__facade:hover .video__lecture {
  background: var(--rouge);
  color: #fff;
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--rayon);
}

.video__legende {
  margin-top: 0.75rem;
}

.video__titre {
  font: 700 1.125rem/1.25 var(--baton);
}

.video__legende p {
  color: var(--doux);
  font-size: 0.9375rem;
}

/* ---------- Boutique ---------- */

.produits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
}

@media (min-width: 48rem) {
  .produits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }
}

@media (min-width: 68rem) {
  .produits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.produit__lien {
  display: block;
  text-decoration: none;
}

.produit__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rayon);
  background: #fff;
}

.produit__nom {
  margin-top: 0.75rem;
  font: 700 1.0625rem/1.25 var(--baton);
}

.produit__lien:hover .produit__nom {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.produit__genre {
  color: var(--doux);
  font-size: 0.9375rem;
}

.produit__prix {
  margin-top: 0.15rem;
  font: 900 1.5rem/1.2 var(--baton);
  font-stretch: 62%;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

html:not(.js) .filtres {
  display: none;
}

.filtre {
  padding: 0.6em 0.95em 0.52em;
  border: 2px solid var(--trait);
  border-radius: 999px;
  background: none;
  color: var(--texte);
  font: 700 1rem/1 var(--baton);
  cursor: pointer;
}

.filtre[aria-pressed="true"] {
  background: var(--trait);
  color: var(--fond);
}

.filtre__nombre {
  font-weight: 500;
}

.etapes {
  display: grid;
  gap: 1.5rem 2.5rem;
  counter-reset: etape;
}

.etapes li {
  counter-increment: etape;
}

.etapes li::before {
  content: counter(etape);
  display: block;
  font: 900 4rem/0.9 var(--baton);
  font-stretch: 62%;
  color: var(--rubrique);
}

.etapes h3 {
  margin: 0.5rem 0 0.25rem;
  font: 800 1.75rem/1 var(--gothique);
}

@media (min-width: 48rem) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Fiche d'un article */

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

.fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.9375rem;
}

.fil li + li::before {
  content: "›";
  margin-right: 0.4rem;
}

.fiche__grille {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

.fiche__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--rayon);
  background: #fff;
}

.fiche__nom {
  font: 900 clamp(2.75rem, 7vw, 5rem) / 0.88 var(--gothique);
}

.fiche__prix {
  margin-top: 1rem;
  font: 900 2.75rem/1 var(--baton);
  font-stretch: 62%;
}

.fiche__texte > p {
  max-width: 25.22em; /* 44ch en Archivo */
  margin-top: 1rem;
}

.fiche__accroche {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

.fiche__texte .bouton {
  margin-top: 1.75rem;
}

.fiche__texte .fiche__note {
  color: var(--doux);
  font-size: 0.9375rem;
}

@media (min-width: 52rem) {
  .fiche__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }
}

/* ---------- Volets : blocs de texte côte à côte (2, 3 ou 4) ---------- */

.volets {
  display: grid;
  gap: 2rem 2.5rem;
}

.volets h2,
.volets h3 {
  margin-bottom: 0.5rem;
  font: 800 clamp(1.875rem, 3.4vw, 2.5rem) / 0.95 var(--gothique);
}

.volets p + p {
  margin-top: 0.75rem;
}

@media (min-width: 48rem) {
  .volets {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

/* Quatre volets : deux par deux tant que la place manque pour quatre de front. */
@media (min-width: 48rem) and (max-width: 69.99rem) {
  .volets:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.affiche-cadre {
  width: min(100%, 22rem);
  padding: 0.625rem;
  border-radius: 4px;
  background: #fff;
  rotate: -2deg;
  box-shadow: 0 1.75rem 3rem -1.25rem rgb(15 43 42 / 0.6);
}

.affiche-cadre img {
  width: 100%;
}

/* ---------- Réseaux et pied de page ---------- */

.reseaux li + li,
.pied__liens li + li {
  margin-top: 0.45rem;
}

.reseau {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  text-decoration: none;
}

.reseau__nom {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.reseau__compte {
  color: var(--doux);
  font-size: 0.9375rem;
}

.reseaux--grands .reseau__nom {
  font: 800 clamp(2rem, 4.5vw, 2.75rem) / 1.1 var(--gothique);
  text-decoration-thickness: 3px;
}

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

.pied__phrase {
  max-width: 8.18em; /* 16ch en Grenze Gotisch */
  color: var(--orange);
  font: 800 clamp(2.75rem, 8vw, 6rem) / 0.88 var(--gothique);
  text-wrap: balance;
}

.pied__colonnes {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.pied__titre {
  margin-bottom: 0.75rem;
  color: var(--doux);
  font: 800 1.125rem/1.2 var(--baton);
  font-stretch: 75%;
}

.pied__liens a {
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2.5rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  color: var(--doux);
  font-size: 0.875rem;
}

.pied__legal a {
  color: var(--texte);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.pied__legal a:hover {
  color: var(--orange);
}

@media (min-width: 48rem) {
  .pied__colonnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Guichet : la commande dans une fenêtre Etsy, sans quitter le site ---------- */

.guichet {
  width: min(100% - 2rem, 34rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 0;
  border-radius: var(--rayon);
  background: var(--orange);
  color: var(--encre);
  --focus: var(--encre);
  box-shadow: 0 2rem 4rem -1rem rgb(0 0 0 / 0.6);
}

.guichet::backdrop {
  background: rgb(15 43 42 / 0.82);
}

.guichet__titre {
  margin-top: 1rem;
  font: 800 clamp(2rem, 6vw, 2.75rem) / 0.95 var(--gothique);
  text-wrap: balance;
}

.guichet p:not(.sticker) {
  margin-top: 1rem;
}

.guichet__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.guichet .bouton {
  background: var(--encre);
  color: #fff;
}

.guichet .bouton:hover {
  background: var(--rouge);
}

.guichet__fermer {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.0625rem;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Résumés factuels : phrase de présentation, questions fréquentes ---------- */

.tete__resume {
  margin-top: 0.75rem;
  font-weight: 600;
}

.portrait {
  max-width: 33.24em; /* 58ch en Archivo */
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.45;
}

.questions {
  max-width: 35.53em; /* 62ch en Archivo */
}

.questions h3 {
  font: 800 clamp(1.5rem, 3vw, 1.875rem) / 1.05 var(--gothique);
}

.questions h3:not(:first-child) {
  margin-top: 2rem;
}

.questions p {
  margin-top: 0.5rem;
}

.questions a {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}