/* Feuille des guides — refonte du 14/08/2026.
   La première version était juste mais terne : corps en police système, texte
   en olive pâle plutôt qu'en encre, une colonne de 34 rem pour tout le gabarit,
   aucune image. Elle se lisait bien et ne donnait envie de rien.

   Trois décisions structurent cette version :

   1. DEUX LARGEURS, pas une. Le texte garde une mesure courte (38 rem, environ
      70 signes) parce que c'est ce qui se lit ; les images et les tableaux vont
      chercher les 54 rem du gabarit. C'est ce décalage qui donne du rythme à une
      page, et son absence qui faisait « colonne minuscule ».
   2. LE CONTRASTE D'ABORD. Le corps passe en encre. L'olive redevient ce qu'il
      aurait toujours dû être : la couleur des éléments secondaires (légendes,
      dates, fil d'Ariane).
   3. LA SERIF AUX TITRES, LA SANS AU TEXTE. Le bloc de réponse en tête était
      composé en Garamond ; il est repris en sans, plus affirmé, sur un fond
      franc. Garamond reste aux titres, où sa finesse est une qualité.

   Autonome : les guides ne chargent pas styles.css, entièrement construit pour
   le héros et le jeu. Thème clair assumé — la charte de la marque est le lin. */

@font-face {
  font-family: "EBGaramond";
  src: url("/fonts/EBGaramond.woff2") format("woff2");
  font-display: swap;
}

:root {
  --lin: #FBF7EE;
  --lin-creux: #E7DCC2;
  --lin-chaud: #F5EEE0;      /* fond des encarts, plus soutenu que le lin */
  --olive: #635B46;
  --olive-clair: #7A6228;
  --encre: #2C2A24;
  --citron: #C9A64D;
  --citron-vif: #DEC06A;
  --citron-bas: #B08D3B;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EBGaramond", Georgia, "Times New Roman", serif;
  --mesure: 38rem;           /* la colonne de lecture */
  --gabarit: 54rem;          /* images, tableaux, galeries */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

/* ---------- Ossature ----------
   main tient le gabarit large ; les éléments de texte se recentrent eux-mêmes
   sur la mesure. Aucun conteneur supplémentaire n'est requis dans le HTML, ce
   qui permet de garder les guides en balisage plat. */

.bandeau {
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 18%, transparent);
  background: var(--lin);
}

.bandeau-in {
  max-width: var(--gabarit);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.marque {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.bandeau-lien {
  font-size: 0.875rem;
  color: var(--olive-clair);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--citron) 55%, transparent);
  white-space: nowrap;
}

.bandeau-lien:hover { border-bottom-color: var(--citron-bas); }

main {
  max-width: var(--gabarit);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
}

/* La mesure de lecture, appliquée aux éléments de texte plutôt qu'à un
   conteneur. Tout ce qui n'est pas listé ici occupe le gabarit entier. */
main > p,
main > ul,
main > ol,
main > h2,
main > h3,
main > .ariane,
main > .date-maj,
main > .reponse,
main > .essai,
main > .questions,
main > .suite,
article > p,
article > ul,
article > ol,
article > h2,
article > h3,
article > .ariane,
article > .date-maj,
article > .reponse,
article > .essai,
article > .questions,
article > .suite {
  max-width: var(--mesure);
  margin-inline: auto;
}

/* ---------- Fil d'Ariane ---------- */

.ariane {
  font-size: 0.8125rem;
  color: var(--olive);
  margin: 0 0 1.5rem;
}

.ariane a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--olive) 30%, transparent); }
.ariane a:hover { color: var(--olive-clair); }

/* ---------- Titres ----------
   Garamond, et une capitale ornée pour les h2 : un chiffre romain aurait
   suggéré une progression que ces guides n'ont pas — ce sont des sections
   indépendantes, pas des étapes. Le filet doré marque la section sans lui
   inventer un ordre. */

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3rem);
  line-height: 1.1;
  color: var(--encre);
  margin: 0 0 0.6rem;
  max-width: var(--mesure);
  margin-inline: auto;
  text-wrap: balance;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.18;
  color: var(--encre);
  margin: 3rem 0 0.9rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--citron);
  text-wrap: balance;
}

h3 {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  color: var(--encre);
  margin: 2rem 0 0.5rem;
}

.date-maj {
  font-size: 0.8125rem;
  color: var(--olive);
  margin: 0 0 2rem;
}

/* ---------- La réponse courte ----------
   Le premier bloc de chaque guide répond à la question du titre en deux ou
   trois phrases autonomes. C'est ce que lit un visiteur pressé, et c'est aussi
   le passage qu'un moteur de réponse peut extraire sans le reste de la page.
   Repris en sans sur fond franc : en Garamond fine sur fond nu, le passage le
   plus important de la page était le moins visible. */

.reponse {
  background: var(--lin-chaud);
  border-left: 4px solid var(--citron);
  border-radius: 0 3px 3px 0;
  padding: 1.15rem 1.35rem;
  margin: 0 auto 2.5rem;
}

.reponse p {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--encre);
  margin: 0 0 0.7rem;
}

.reponse p:last-child { margin: 0; }

/* ---------- Texte courant ----------
   Justification avec césure : le fer à gauche laissait un bord droit très
   déchiqueté sur une mesure courte. La césure est indispensable — justifier
   sans elle creuse des rivières entre les mots. Le seuil est bas (22 rem) :
   c'est la césure qui décide si la justification tient, pas la largeur, et le
   français se coupe bien. En dessous, la colonne est trop étroite pour que le
   moteur trouve des points de coupe, et le fer à gauche reprend. */

p { margin: 0 0 1.15rem; }

@media (min-width: 22rem) {
  main > p, article > p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Permissif à dessein : plus le moteur trouve de points de coupe, moins il
       étire les espaces. Un seuil strict sur une colonne étroite produit
       exactement les blancs que la justification est censée éviter. */
    hyphenate-limit-chars: 5 2 2;
  }
}

/* Le bloc de réponse reste au fer à gauche : il est plus étroit que le corps
   à cause de son retrait, et composé plus gros. Justifié, il se creusait de
   blancs à chaque ligne — visible dès 390 px. */
.reponse p { text-align: left; }

a { color: var(--olive-clair); }
a:hover { color: var(--citron-bas); }

strong { color: var(--encre); font-weight: 650; }

ul, ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
li { margin: 0 0 0.5rem; }
li::marker { color: var(--citron-bas); }

/* ---------- Illustrations ----------
   Les images sont celles du jeu : des poses cultes rejouées par de vrais
   invités. Elles sortent de la mesure de lecture pour occuper le gabarit, ce
   qui aère la page et montre le produit sans avoir à le vendre. width/height
   sont portés dans le HTML pour réserver la place avant chargement. */

.figure {
  margin: 2.75rem auto;
  max-width: var(--gabarit);
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--lin-creux);
}

.figure figcaption {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--olive);
  padding-top: 0.6rem;
  max-width: var(--mesure);
  margin-inline: auto;
}

/* Galerie : plusieurs poses côte à côte, pour les guides qui parlent des
   poses elles-mêmes. auto-fit plutôt qu'un nombre fixe de colonnes — la
   grille se réduit d'elle-même sans point de rupture à maintenir. */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 2.5rem auto;
  max-width: var(--gabarit);
  padding: 0;
  list-style: none;
}

.galerie li { margin: 0; }

.galerie img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--lin-creux);
}

.galerie .legende {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--olive-clair);
  padding-top: 0.4rem;
}

/* ---------- Tableaux ---------- */

.tableau-enveloppe {
  overflow-x: auto;
  margin: 0 auto 1.6rem;
  max-width: var(--gabarit);
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 15%, transparent);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--olive);
  padding: 0.6rem 0 0;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.85rem 0.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 12%, transparent);
  vertical-align: top;
}

thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--olive-clair);
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 30%, transparent);
  font-weight: 600;
}

tbody th { font-weight: 600; color: var(--encre); }
tbody tr:hover { background: color-mix(in srgb, var(--lin-creux) 22%, transparent); }

/* ---------- Encart produit ----------
   Discret, et il ne vend pas : il propose d'essayer. */

.essai {
  margin: 2.5rem auto;
  padding: 1.4rem 1.5rem;
  background: var(--lin-chaud);
  border: 1px solid color-mix(in srgb, var(--olive) 16%, transparent);
  border-radius: 3px;
}

.essai p { margin: 0 0 0.85rem; font-size: 0.9375rem; text-align: left; }
.essai p:last-child { margin: 0; }

.essai-titre {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--encre);
  margin: 0 0 0.5rem;
}

.bouton {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--encre);
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  border-radius: 3px;
  background: linear-gradient(158deg, var(--citron-vif) 0%, var(--citron) 46%, var(--citron-bas) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 12%, transparent);
}

.bouton:hover { color: var(--encre); filter: brightness(1.04); }

.essai-second {
  font-size: 0.875rem;
  color: var(--olive);
  margin-left: 0.85rem;
}

/* ---------- Questions ---------- */

.questions h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.75rem 0 0.4rem;
}

/* ---------- Suite de lecture & pied ---------- */

.suite {
  margin: 3.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--olive) 18%, transparent);
}

.suite h2 { font-size: 1.25rem; margin: 0 0 1rem; border-top: 0; padding-top: 0; }

.suite ul { list-style: none; padding: 0; margin: 0; }
.suite li { margin: 0 0 0.8rem; }
.suite a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--citron) 50%, transparent); }
.suite .quoi { display: block; font-size: 0.875rem; color: var(--olive); border: 0; }

footer {
  border-top: 1px solid color-mix(in srgb, var(--olive) 18%, transparent);
  margin-top: 3.5rem;
  padding: 1.6rem 1.25rem 2.5rem;
  font-size: 0.8125rem;
  color: var(--olive);
  text-align: center;
}

footer a { color: inherit; }

/* ---------- Sommaire des guides ---------- */

.liste-guides { list-style: none; padding: 0; margin: 2rem auto 0; max-width: var(--mesure); }

.liste-guides li {
  margin: 0 0 1.7rem;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 13%, transparent);
}

.liste-guides li:last-child { border-bottom: 0; }

.liste-guides a {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--encre);
  text-decoration: none;
  display: block;
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

.liste-guides a:hover { color: var(--olive-clair); }
.liste-guides p { margin: 0; font-size: 0.9375rem; text-align: left; color: var(--olive); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Rappel de date ----------
   Inséré par rappel.js avant la section « À lire aussi ». Le lecteur d'un guide
   prépare une fête lointaine : on ne lit pas « combien coûte un photobooth » la
   veille de son mariage. Lui demander d'acheter n'aurait pas de sens ; lui
   demander sa date, si. Sobre à dessein — il ne doit pas concurrencer l'encart
   d'essai, qui s'adresse à ceux dont l'événement est proche. */

.rappel-guide {
  max-width: var(--mesure);
  margin: 3rem auto 0;
  padding: 1.35rem 1.5rem;
  background: var(--lin-chaud);
  border: 1px solid color-mix(in srgb, var(--olive) 16%, transparent);
  border-radius: 3px;
}

.rappel-guide-titre {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--encre);
  margin: 0 0 0.5rem;
}

.rappel-guide-texte {
  font-size: 0.9375rem;
  color: var(--olive);
  margin: 0 0 1rem;
  text-align: left;
}

.rappel-guide .rappel-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.rappel-guide .rappel-form input {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--olive) 28%, transparent);
  border-radius: 3px;
}

.rappel-guide .rappel-form button {
  flex: 0 0 auto;
  padding: 0.65rem 1.15rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--encre);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  background: linear-gradient(158deg, var(--citron-vif) 0%, var(--citron) 46%, var(--citron-bas) 100%);
}

.rappel-guide .rappel-form button:disabled { opacity: .6; cursor: default; }

.rappel-guide .rappel-etat {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--olive);
  min-height: 1.1em;
  text-align: left;
}

/* Pot-de-miel : hors flux et hors champ, sans display:none — certains robots
   ignorent les champs masqués de cette dernière façon. */
.rappel-invisible { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }