@charset "UTF-8";
/* =========================================================================
   AFFRENCHY — la Maison, le Magazine, les Affrenchys (octobre 2026)
   Complète affrenchy.css : l'en-tête, les matières (papier, ruban adhésif),
   le magazine, la page d'accueil et le salon des Affrenchys.
   ========================================================================= */

:root {
  /* le grain du papier : un bruit très fin, couleur sépia */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .25  0 0 0 0 .16  0 0 0 .085 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  /* les fibres du papyrus : un bruit étiré à l'horizontale */
  --fibres: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.004 .32' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .16  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --ombre-douce: 0 24px 52px -30px rgba(30, 24, 18, .26);
  --ombre-objet: 0 38px 70px -34px rgba(8, 14, 32, .7), 0 12px 24px -16px rgba(8, 14, 32, .5);
  --entete: 5rem;
  --nuit: #121E3D;
}

/* les objets posés de travers (couvertures, lettres, tirages) restent dans la page */
body { overflow-x: clip; }

/* ------------------------------------------------------------------ en-tête */

.nav__outils { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.6rem); }
.nav__langues { align-items: center; gap: .15rem; }
.nav__lang {
  border: 0;
  padding: .35rem .3rem;
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(26, 47, 94, .55);
}
.nav__lang:hover { color: var(--nasir); }
.nav__lang--active { color: var(--nasir); border-bottom: 1px solid var(--champagne); }
.nav__sep { color: var(--platine); font-size: .72rem; }
.site-header .reseaux { gap: .2rem; }
.site-header .reseaux__lien { width: 2rem; height: 2rem; }
@media (max-width: 60rem) {
  .nav__outils { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--platine-pale); width: 100%; }
  .nav__lang { font-size: .85rem; padding: .4rem .45rem; }
}

/* --------------------------------------------------------- les matières */

.papier {
  background-color: var(--ivoire-clair);
  background-image: var(--grain);
}

/* un morceau de ruban adhésif, posé de travers */
.ruban {
  position: absolute;
  z-index: 2;
  width: 7.5rem;
  height: 1.9rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .14)),
    rgba(222, 206, 170, .62);
  box-shadow: 0 2px 6px -2px rgba(60, 45, 20, .25);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 16% 8%, 20% 0, 100% 0, 96% 12%, 100% 26%, 96% 42%, 100% 58%, 96% 74%, 100% 90%, 96% 100%, 0 100%, 4% 86%, 0 70%, 4% 54%, 0 38%, 4% 22%);
  backdrop-filter: blur(.5px);
  pointer-events: none;
}
.ruban--gauche { top: -.8rem; left: 2.2rem; transform: rotate(-6deg); }
.ruban--droite { top: -.7rem; right: 2.4rem; transform: rotate(5deg); }
.ruban--haut { top: -.95rem; left: 50%; transform: translateX(-50%) rotate(-2.5deg); }

/* le dièse d'un salon, comme une étiquette */
.dieze {
  display: inline-block;
  font-family: var(--texte-police);
  font-weight: 600;
  font-size: .82em;
  letter-spacing: .04em;
  color: var(--nasir);
  background: rgba(201, 169, 106, .22);
  padding: .1em .55em;
  border-radius: 2em;
  white-space: nowrap;
}

/* apparitions au fil de la lecture (maison.js) : sans script, tout reste visible */
[data-revele] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.revele-pret [data-revele]:not(.est-visible) { opacity: 0; transform: translateY(1.6rem); }
@media (prefers-reduced-motion: reduce) {
  .revele-pret [data-revele]:not(.est-visible) { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ la couverture */

.couv {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--ivoire-clair);
  text-decoration: none;
  background: var(--nuit);
  box-shadow: var(--ombre-objet);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
}
.couv:hover { color: var(--ivoire-clair); }
.couv__image, .couv__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.couv__photo { object-fit: cover; }
.couv::before, .couv::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.couv::before { top: 0; height: 38%; background: linear-gradient(rgba(14, 22, 46, .72), rgba(14, 22, 46, 0)); }
.couv::after { bottom: 0; height: 58%; background: linear-gradient(rgba(14, 22, 46, 0), rgba(14, 22, 46, .9) 78%); }
.couv__tete {
  position: absolute; z-index: 2; top: 4.5cqi; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
}
.couv__marque { width: 40cqi; height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25)); }
.couv__revue {
  margin-top: .2cqi;
  font: 600 2.05cqi/1 var(--texte-police);
  letter-spacing: .6em; padding-left: .6em;
  text-transform: uppercase;
}
.couv__tete { top: 6cqi; }
.couv__coin {
  position: absolute; z-index: 2; top: 3.2cqi;
  font: 600 1.7cqi/1 var(--texte-police);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #DBC496;
}
.couv__coin--gauche { left: 5cqi; }
.couv__coin--droite { right: 5cqi; }
.couv__pied {
  position: absolute; z-index: 2; left: 7cqi; right: 7cqi; bottom: 6cqi;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.couv__titre {
  font-family: var(--display);
  font-size: 10cqi;
  line-height: 1;
  text-wrap: balance;
}
.couv__manchettes {
  display: flex; flex-direction: column; gap: .7cqi;
  margin-top: 3cqi; padding-top: 2.6cqi;
  border-top: 1px solid rgba(201, 169, 106, .7);
  font: 500 2.25cqi/1.3 var(--texte-police);
}
/* en petit, la couverture garde son titre et laisse ses manchettes */
@container (max-width: 15rem) {
  .couv__manchettes { display: none; }
  .couv__titre { font-size: 12cqi; }
}

/* ------------------------------------------------- la une : kiosque et numéro */

.kiosque-une, .mag-une {
  position: relative;
  color: rgba(247, 244, 238, .86);
  background-color: var(--nasir);
  background-image:
    var(--grain),
    radial-gradient(80% 70% at 22% 40%, rgba(201, 169, 106, .2), rgba(26, 47, 94, 0) 70%),
    linear-gradient(160deg, var(--nasir) 0%, var(--nuit) 100%);
  overflow: hidden;
}
.kiosque-une__inner, .mag-une__inner {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  min-height: calc(100svh - var(--entete));
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.kiosque-une__objet .couv, .mag-une__objet .couv { transform: rotate(-2.2deg); }
.kiosque-une__objet .couv:hover { transform: rotate(0) translateY(-6px); }
.kiosque-une__titre, .mag-une__titre { color: var(--ivoire-clair); }
.kiosque-une__titre { font-size: clamp(3.2rem, 2rem + 5vw, 6rem); margin-bottom: .25em; }
.kiosque-une__chapeau { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight: 300; max-width: 32rem; }
.kiosque-une__numero {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(201, 169, 106, .45);
}
.kiosque-une__date, .mag-une__date {
  font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: .8rem;
}
.kiosque-une__numero h2 { color: var(--ivoire-clair); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); margin-bottom: .7em; }
.kiosque__liste { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; gap: .65rem; }
.kiosque__liste li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
.kiosque__rubrique { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.kiosque__titre { font-family: var(--display); font-size: 1.3rem; line-height: 1.25; color: var(--ivoire-clair); }
.mag-une__titre { font-size: clamp(3rem, 1.8rem + 5vw, 5.8rem); line-height: 1; margin-bottom: .35em; }
.mag-une__accroche { font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); font-weight: 300; max-width: 34rem; margin-bottom: 2.4rem; }
@media (max-width: 54rem) {
  .kiosque-une__inner, .mag-une__inner { grid-template-columns: 1fr; min-height: 0; }
  .kiosque-une__objet, .mag-une__objet { max-width: 21rem; margin-inline: auto; width: 88%; }
  .kiosque__liste li { grid-template-columns: 1fr; gap: .1rem; }
}

/* ------------------------------------------------------------ les archives */

.archives__grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 44vw), 1fr));
}
.archives__numero .couv { box-shadow: var(--ombre-douce); }
.archives__numero .couv:hover { transform: translateY(-6px); box-shadow: var(--ombre-objet); }
.archives__legende { margin: .9rem 0 0; font-size: .82rem; letter-spacing: .06em; color: var(--texte); }
.archives__legende span { font-weight: 600; letter-spacing: .16em; color: var(--or-fonce); margin-right: .35rem; }
.archives__attente {
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  text-align: center; padding: 1.5rem;
  border: 1px dashed rgba(138, 106, 47, .55);
  background: var(--ivoire-clair) var(--grain);
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce);
}
.archives__attente-num { font: 400 3rem/1 var(--display); letter-spacing: 0; color: var(--nasir); text-transform: none; }
.archives__attente-date { font: italic 400 1.15rem/1.3 var(--display); letter-spacing: 0; text-transform: none; color: var(--texte); }

/* ----------------------------------------------- l'abonnement, sur fond bleu */

.mag-abonnement {
  background: var(--nasir) var(--grain);
  color: rgba(247, 244, 238, .86);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.mag-abonnement__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mag-abonnement h2 { color: var(--ivoire-clair); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
@media (max-width: 52rem) { .mag-abonnement__inner { grid-template-columns: 1fr; } }

/* ------------------------------------------- le fil des rubriques, en lisant */

.mag-fil {
  position: sticky; top: var(--entete); z-index: 40;
  background: rgba(247, 244, 238, .95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--platine-pale);
}
.mag-fil__liens {
  display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.2rem);
  max-width: var(--shell); margin-inline: auto; padding: .75rem var(--gouttiere);
  overflow-x: auto; scrollbar-width: none;
}
.mag-fil__liens::-webkit-scrollbar { display: none; }
.mag-fil a {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: rgba(26, 47, 94, .5);
  padding-bottom: .2rem; border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.mag-fil a:hover, .mag-fil a.est-actif { color: var(--nasir); border-bottom-color: var(--champagne); }
.mag-fil__progression { display: block; height: 2px; background: transparent; }
.mag-fil__progression > span { display: block; height: 100%; width: 0; background: var(--champagne); transition: width .15s linear; }
@media (max-width: 54rem) { .mag-fil__liens { justify-content: flex-start; } }

/* ------------------------------------------------------------- le sommaire */

.mag-article, .mag-lettre, .mag-sommaire { scroll-margin-top: calc(var(--entete) + 2.4rem); }
.mag-sommaire { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--ivoire); }
.mag-sommaire__titre { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sommaire {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.sommaire__lien {
  display: grid; grid-template-columns: 6.5rem 1fr; grid-template-rows: auto auto 1fr; column-gap: 1.2rem;
  height: 100%; padding: 1rem; text-decoration: none; color: var(--texte);
  background: var(--ivoire-clair); box-shadow: var(--ombre-douce);
  transition: transform var(--transition), box-shadow var(--transition);
}
.sommaire__lien:hover { transform: translateY(-3px); color: var(--texte); }
.sommaire__vignette { grid-row: 1 / 4; aspect-ratio: 1; overflow: hidden; }
.sommaire__img { width: 100%; height: 100%; object-fit: cover; }
.sommaire__rang { font: 400 1.5rem/1 var(--display); color: var(--champagne); }
.sommaire__rubrique { margin-top: .35rem; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); }
.sommaire__titre { margin-top: .35rem; font: 400 1.22rem/1.25 var(--display); color: var(--nasir); }
.sommaire li:first-child .sommaire__lien { grid-template-columns: 1fr; background: var(--nasir); }
.sommaire li:first-child .sommaire__rubrique { color: var(--champagne); }
.sommaire li:first-child .sommaire__titre { color: var(--ivoire-clair); font-size: 1.6rem; }

/* ------------------------------------------------------- la lettre éditoriale */

.mag-lettre {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--champagne-doux) var(--grain);
}
.mag-lettre__papier {
  position: relative;
  max-width: 44rem; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  background: var(--ivoire-clair) var(--grain);
  box-shadow: var(--ombre-douce), 0 1px 0 rgba(255, 255, 255, .6) inset;
  transform: rotate(-.35deg);
}
.mag-lettre__titre { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); margin-bottom: .8em; }
.mag-lettre__texte p { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); line-height: 1.6; color: #2C2C33; }
.mag-lettre__texte p:first-child { font-style: italic; color: var(--nasir); }
.mag-lettre__formule { margin: 2rem 0 .2rem; font-family: var(--display); font-size: 1.3rem; font-style: italic; }
.mag-lettre__signature { margin: 0; font: italic 500 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/1.1 var(--display); color: var(--nasir); }
.mag-lettre__fonction { margin: .5rem 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); }
/* -------------------------------------------------------- une rubrique */

.mag-article { background: var(--ivoire); }
.mag-ouverture { position: relative; overflow: hidden; }
.mag-ouverture__image { margin: 0; }
.mag-ouverture__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.mag-rubrique { font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--or-fonce); margin-bottom: 1.1rem; }
.mag-titre { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem); line-height: 1.04; margin-bottom: .45em; }
.mag-chapo { font: italic 400 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.45 var(--display); color: var(--nasir); max-width: 36rem; }
.mag-signature { margin-top: 1.6rem; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--or-fonce); }

/* une image en paysage : en plein écran, le titre posé dessus */
.mag-ouverture--paysage { min-height: min(92svh, 62rem); display: grid; align-items: end; }
.mag-ouverture--paysage .mag-ouverture__image { position: absolute; inset: 0; }
.mag-ouverture--paysage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(14, 22, 46, 0) 35%, rgba(14, 22, 46, .82) 100%);
}
.mag-ouverture--paysage .mag-ouverture__texte {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: 0 var(--gouttiere) clamp(3rem, 7vw, 5.5rem);
}
.mag-ouverture--paysage .mag-rubrique { color: var(--champagne); }
.mag-ouverture--paysage .mag-titre { color: var(--ivoire-clair); max-width: 52rem; }
.mag-ouverture--paysage .mag-chapo { color: rgba(247, 244, 238, .92); }
.mag-ouverture--paysage .mag-signature { color: var(--champagne); }

/* une image en portrait : l'écran partagé, l'image d'un côté, le titre de l'autre */
.mag-ouverture--portrait {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(94svh, 64rem);
  background: var(--ivoire-clair) var(--grain);
}
.mag-ouverture--portrait .mag-ouverture__image { position: relative; min-height: 28rem; }
.mag-ouverture--portrait .mag-ouverture__photo { position: absolute; inset: 0; }
.mag-ouverture--portrait .mag-ouverture__texte { align-self: center; padding: clamp(2.5rem, 6vw, 5.5rem); }
.mag-article:nth-of-type(even) .mag-ouverture--portrait .mag-ouverture__image { order: 2; }
@media (max-width: 54rem) {
  .mag-ouverture--portrait { grid-template-columns: 1fr; min-height: 0; }
  .mag-ouverture--portrait .mag-ouverture__image { min-height: 0; aspect-ratio: 4 / 5; order: 0 !important; }
  .mag-ouverture--paysage { min-height: 82svh; }
}
.mag-ouverture.est-visible .mag-ouverture__photo, .mag-ouverture__photo { transform: scale(1); }
.revele-pret .mag-ouverture:not(.est-visible) .mag-ouverture__photo { transform: scale(1.06); }

/* le texte : une colonne de lecture confortable */
.mag-corps {
  max-width: calc(40rem + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gouttiere) clamp(4rem, 8vw, 6.5rem);
  font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  line-height: 1.82;
}
.mag-corps::after { content: ""; display: table; clear: both; }
.mag-corps h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.4rem);
  margin: 2.6em 0 .8em;
  padding-top: 1.1em;
  position: relative;
}
.mag-corps h2::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 1px; background: var(--champagne); }
.mag-corps a { text-decoration-color: var(--champagne); }
.mag-corps ul { list-style: none; padding: 0; margin: 0 0 1.6em; }
.mag-corps ul li { position: relative; padding-left: 1.7rem; margin-bottom: .9em; }
.mag-corps ul li::before {
  content: ""; position: absolute; left: .2rem; top: .78em;
  width: .45rem; height: .45rem; background: var(--champagne); transform: rotate(45deg);
}
.mag-corps strong { font-weight: 600; color: var(--nasir); }
.lettrine::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.6em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--nasir);
}

/* les images dans le texte */
.mag-figure { margin: 2.6rem 0; }
.mag-figure img { width: 100%; box-shadow: var(--ombre-douce); }
.mag-figure--large { width: min(64rem, 100vw - 2 * var(--gouttiere)); margin-left: 50%; transform: translateX(-50%); }
.revele-pret .mag-figure--large[data-revele]:not(.est-visible) { transform: translate(-50%, 1.6rem); }
.mag-figure--cote { width: min(18rem, 46%); margin-top: .4rem; margin-bottom: 1.4rem; }
.mag-figure--droite { float: right; margin-left: 2rem; margin-right: calc(-1 * clamp(0rem, (100vw - 46rem) / 4, 9rem)); }
.mag-figure--gauche { float: left; margin-right: 2rem; margin-left: calc(-1 * clamp(0rem, (100vw - 46rem) / 4, 9rem)); }
@media (max-width: 40rem) {
  .mag-figure--cote { float: none; width: 100%; margin: 2rem 0; }
}

/* la phrase mise en exergue */
.mag-citation {
  clear: both;
  margin: 3.2rem 0;
  padding: 2rem 0 1.6rem;
  border-top: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  text-align: center;
}
.mag-citation p {
  font: italic 400 clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem)/1.3 var(--display);
  color: var(--nasir);
  text-wrap: balance;
}
.mag-citation::before {
  content: "“"; display: block; margin: -1.2rem auto .2rem;
  font: 400 4rem/1 var(--display); color: var(--champagne);
}

/* ------------------------------------------------- le cycle pilaire */

.cycle {
  clear: both;
  margin: 3rem 0;
  width: min(62rem, 100vw - 2 * var(--gouttiere));
  margin-left: 50%; transform: translateX(-50%);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--ivoire-clair) var(--grain);
  box-shadow: var(--ombre-douce);
}
.revele-pret .cycle[data-revele]:not(.est-visible) { transform: translate(-50%, 1.6rem); }
.cycle__titre { text-align: center; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1.2 var(--display); color: var(--nasir); margin-bottom: 2rem; }
.cycle__titre span { display: block; margin-bottom: .6rem; font: 600 .7rem/1 var(--texte-police); letter-spacing: .24em; text-transform: uppercase; color: var(--or-fonce); }
.cycle__phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.cycle__phase { position: relative; text-align: center; }
.cycle__phase + .cycle__phase::before {
  content: "→"; position: absolute; left: calc(-1 * clamp(1.25rem, 3vw, 2.5rem) / 2 - .5em); top: 5.5rem;
  font: 400 1.6rem/1 var(--display); color: var(--champagne);
}
.cycle__dessin { width: 100%; max-width: 13rem; height: auto; margin: 0 auto 1rem; display: block; overflow: visible; }
.cycle__nom { margin: 0; font: 400 1.7rem/1.1 var(--display); color: var(--nasir); }
.cycle__rang {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .5rem; vertical-align: .25em;
  border: 1px solid var(--champagne); border-radius: 50%;
  font: 600 .7rem/1 var(--texte-police); color: var(--or-fonce);
}
.cycle__sous { margin: .3rem 0 .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); }
.cycle__duree { margin: 0 0 .8rem; font: italic 500 1.35rem/1.2 var(--display); color: var(--nasir); }
.cycle__texte { font-size: .92rem; line-height: 1.6; margin: 0; }
.cycle__boucle { margin: 2rem 0 0; text-align: center; font: italic 400 1.15rem/1.4 var(--display); color: var(--or-fonce); }
.cy-peau { fill: none; stroke: #8A6A2F; stroke-width: 2; }
.cy-derme { fill: none; stroke: #C5C7CB; stroke-width: 1.5; stroke-dasharray: 4 5; }
.cy-gaine { fill: rgba(201, 169, 106, .14); stroke: #8A6A2F; stroke-width: 1.6; stroke-linejoin: round; }
.cy-bulbe { fill: rgba(201, 169, 106, .45); stroke: #8A6A2F; stroke-width: 1.6; }
.cy-massue { fill: #D8D9DD; stroke: #8E9096; stroke-width: 1.4; }
.cy-germe { fill: rgba(201, 169, 106, .35); stroke: #8A6A2F; stroke-width: 1.4; }
.cy-papille { fill: #D9A48C; stroke: #A86F57; stroke-width: 1.2; }
.cy-tige { fill: #D8D9DD; stroke: #8E9096; stroke-width: 1.2; }
.cy-glande { fill: rgba(231, 216, 188, .6); stroke: #B39457; stroke-width: 1.3; }
.cy-cordon { fill: none; stroke: #8A6A2F; stroke-width: 1.4; stroke-dasharray: 3 4; }
@media (max-width: 44rem) {
  .cycle__phases { grid-template-columns: 1fr; }
  .cycle__phase { display: grid; grid-template-columns: 7rem 1fr; column-gap: 1rem; text-align: left; align-items: start; }
  .cycle__dessin { grid-row: 1 / 6; max-width: 7rem; margin: 0; }
  .cycle__phase + .cycle__phase::before { content: "↓"; left: 2.9rem; top: -1.35rem; }
}

/* ------------------------------------------------- la recette, sur papyrus */

.papyrus {
  position: relative; isolation: isolate; clear: both;
  margin: 3.4rem auto;
  max-width: 42rem;
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3.2rem) clamp(2.2rem, 4vw, 3rem);
  color: #3B2F1E;
  filter: drop-shadow(0 22px 26px rgba(60, 42, 18, .22));
  transform: rotate(.6deg);
}
.papyrus::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: #EBDDBC;
  background-image:
    var(--fibres),
    var(--grain),
    radial-gradient(120% 90% at 50% 50%, rgba(255, 250, 235, .55) 0%, rgba(255, 250, 235, 0) 60%),
    radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(120, 86, 38, .3) 100%);
  clip-path: polygon(0% 2%, 3% 0%, 9% 1.5%, 15% .2%, 22% 1.6%, 30% .4%, 38% 1.8%, 46% .3%, 54% 1.5%, 62% .2%, 70% 1.7%, 78% .5%, 86% 1.6%, 93% .2%, 100% 1.4%,
                     99.2% 9%, 100% 18%, 99% 27%, 100% 36%, 99.3% 46%, 100% 56%, 99% 66%, 100% 76%, 99.2% 86%, 100% 98%,
                     94% 99.4%, 87% 98.2%, 79% 100%, 71% 98.6%, 63% 99.8%, 55% 98.4%, 47% 100%, 39% 98.5%, 31% 99.7%, 23% 98.3%, 15% 99.9%, 7% 98.5%, 0% 99.6%,
                     .8% 90%, 0% 80%, 1% 70%, 0% 60%, .7% 50%, 0% 40%, 1% 30%, 0% 20%, .8% 10%);
}
.papyrus__sur { margin: 0 0 .5rem; text-align: center; font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8A6A2F; }
.papyrus__titre { text-align: center; font: italic 400 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.15 var(--display); color: #3B2F1E; margin: 0 0 1.8rem; }
.papyrus__colonnes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 2.6rem); }
.papyrus__intertitre { margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(138, 106, 47, .45); font: 600 .68rem/1 var(--texte-police); letter-spacing: .2em; text-transform: uppercase; color: #8A6A2F; }
.papyrus__ingredients { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.5; }
.papyrus__ingredients li { padding: .32rem 0; border-bottom: 1px dotted rgba(138, 106, 47, .35); }
.papyrus__etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; font-size: .92rem; line-height: 1.6; }
.papyrus__etapes li { counter-increment: etape; position: relative; padding-left: 2.2rem; margin-bottom: .85rem; }
.papyrus__etapes li::before { content: counter(etape); position: absolute; left: 0; top: -.15rem; font: italic 500 1.6rem/1 var(--display); color: #8A6A2F; }
.papyrus__etapes strong { color: #3B2F1E; font-weight: 600; }
.papyrus__fin { margin: 1.6rem 0 0; text-align: center; font: italic 400 1.25rem/1.3 var(--display); color: #6B5324; }
@media (max-width: 40rem) { .papyrus__colonnes { grid-template-columns: 1fr; } .papyrus { transform: none; } }

/* ------------------------------------------------- vers le salon */

.mag-salon {
  clear: both;
  margin-top: 3.5rem;
  padding: 1.6rem 1.8rem;
  border-left: 3px solid var(--champagne);
  background: var(--ivoire-clair) var(--grain);
}
.mag-salon__sur { margin: 0 0 .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--or-fonce); }
.mag-salon__texte { margin: 0 0 1rem; font: 400 1.3rem/1.45 var(--display); color: var(--nasir); }

/* ------------------------------------------------- la fin du numéro */

.mag-fin {
  background: var(--nasir) var(--grain);
  color: rgba(247, 244, 238, .86);
  padding-block: clamp(4rem, 8vw, 6.5rem) 2.5rem;
}
.mag-fin__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.mag-fin h2 { color: var(--ivoire-clair); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); }
.mag-fin__salon .btn { margin-top: 1rem; }
.mag-credits { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.6rem; border-top: 1px solid rgba(197, 199, 203, .2); font-size: .76rem; line-height: 1.6; color: rgba(247, 244, 238, .58); }
.mag-credits p { margin-bottom: .5rem; }
@media (max-width: 52rem) { .mag-fin__inner { grid-template-columns: 1fr; } }

/* =========================================================================
   LA MAISON (page d'accueil)
   ========================================================================= */

.maison-hero {
  position: relative;
  background-image:
    var(--grain),
    radial-gradient(70% 80% at 85% 30%, rgba(201, 169, 106, .3), rgba(247, 244, 238, 0) 70%),
    linear-gradient(var(--ivoire-clair), var(--ivoire));
  overflow: hidden;
}
.maison-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  min-height: calc(100svh - var(--entete));
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4.5rem, 8vw, 7rem);
}
.maison-hero__titre { font-size: clamp(3.3rem, 1.8rem + 6vw, 7rem); line-height: .98; margin-bottom: .35em; }
.maison-hero__chapeau { font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem); font-weight: 300; line-height: 1.6; color: var(--nasir); max-width: 34rem; }
.maison-hero__devise {
  display: inline-flex; align-items: center; gap: 1rem;
  margin: .4rem 0 2.4rem;
  font: italic 400 clamp(1.35rem, 1.2rem + .6vw, 1.75rem)/1.2 var(--display);
  color: var(--or-fonce);
}
.maison-hero__devise::before { content: ""; width: 2.5rem; height: 1px; background: var(--champagne); }
.maison-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.maison-hero__collage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem;
  align-items: start; justify-items: center;
}
.maison-hero__legende { grid-column: 1 / -1; margin: 1.4rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); }
.maison-hero__suite {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--or-fonce);
}
@media (max-width: 56rem) {
  .maison-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .maison-hero__collage { gap: 2rem 1rem; }
}

/* le livre de la famille, sous le héros */
.maison-livre { scroll-margin-top: var(--entete); }

/* la mission : ambassadrices et médiatrices */
.mission {
  padding-block: var(--section-y);
  background-color: var(--nasir);
  background-image: var(--grain), radial-gradient(60% 60% at 80% 0%, rgba(201, 169, 106, .18), rgba(26, 47, 94, 0) 70%);
  color: rgba(247, 244, 238, .86);
}
.mission h2, .mission h3 { color: var(--ivoire-clair); }
.mission .lede { color: rgba(247, 244, 238, .9); }
.mission__tete { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.mission__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); }
.role { border-top: 1px solid rgba(201, 169, 106, .55); padding-top: 1.8rem; }
.role__mot { margin: 0 0 .2rem; font: italic 400 clamp(2.6rem, 1.8rem + 3vw, 4.2rem)/1 var(--display); color: var(--champagne); }
.role h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-bottom: .8em; }
.mission__vie { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.mission__vie-titre { font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); margin-bottom: 1.4rem; }
.mission__piliers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.pilier-maison {
  display: grid; gap: .9rem; align-content: start;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(201, 169, 106, .4);
  text-decoration: none; color: rgba(247, 244, 238, .86);
  transition: background var(--transition), border-color var(--transition);
}
.pilier-maison:hover { background: rgba(247, 244, 238, .05); border-color: var(--champagne); color: rgba(247, 244, 238, .95); }
.pilier-maison__nom { font: 400 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.1 var(--display); color: var(--ivoire-clair); }
.pilier-maison .lien-fleche { color: var(--champagne); justify-self: start; }
@media (max-width: 52rem) {
  .mission__roles, .mission__piliers { grid-template-columns: 1fr; }
}

/* le numéro de la semaine, sur la page d'accueil */
.maison-magazine { padding-block: var(--section-y); background: var(--champagne-doux) var(--grain); }
.maison-magazine__inner { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.maison-magazine__objet .couv { transform: rotate(-2deg); }
.maison-magazine__objet .couv:hover { transform: rotate(0) translateY(-6px); }
.maison-magazine .kiosque-une__date { color: var(--or-fonce); }
.maison-magazine__accroche { font-size: 1.1rem; font-weight: 300; color: var(--nasir); }
.maison-magazine .kiosque__titre { color: var(--nasir); }
.maison-magazine .kiosque__rubrique { color: var(--or-fonce); }
.maison-magazine__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
@media (max-width: 52rem) {
  .maison-magazine__inner { grid-template-columns: 1fr; }
  .maison-magazine__objet { max-width: 19rem; width: 82%; margin-inline: auto; }
}

/* l'invitation finale */
.maison-rejoindre { padding-block: var(--section-y); text-align: center; }
.maison-rejoindre__inner { max-width: 44rem; }
.maison-rejoindre__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem; margin-top: 2.4rem; }

/* =========================================================================
   LES AFFRENCHYS : la porte, la charte, l'accès, le salon
   ========================================================================= */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-fleche--clair { color: var(--champagne); border-bottom-color: var(--champagne); }
.lien-fleche--clair:hover { color: var(--champagne-doux); border-color: var(--champagne-doux); }
.btn--petit { padding: .7rem 1.2rem; font-size: .72rem; }
.lien-discret {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font: 600 .7rem/1.2 var(--texte-police); letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-fonce); text-decoration: none;
}
.lien-discret:hover { color: var(--nasir); }

/* --- la porte */
.porte-hero {
  background-color: var(--nasir);
  background-image: var(--grain), radial-gradient(70% 80% at 85% 20%, rgba(201, 169, 106, .22), rgba(26, 47, 94, 0) 70%);
  color: rgba(247, 244, 238, .88);
}
.porte-hero__inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  min-height: min(calc(100svh - var(--entete)), 48rem); padding-block: clamp(3.5rem, 8vw, 6rem);
}
.porte-hero h1 { color: var(--ivoire-clair); font-size: clamp(2.8rem, 1.8rem + 4vw, 5rem); }
.porte-hero .lede { color: rgba(247, 244, 238, .92); max-width: 36rem; }
.porte-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 2.4rem; }
.porte-hero__photo { position: relative; margin: 0; justify-self: center; transform: rotate(2deg); }
.porte-hero__photo img { max-height: clamp(18rem, 34vw, 30rem); width: auto; box-shadow: var(--ombre-objet); }
@media (max-width: 54rem) { .porte-hero__inner { grid-template-columns: 1fr; min-height: 0; } }

.raisons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.raison { padding: 2rem 1.6rem; background: var(--ivoire-clair); box-shadow: var(--ombre-douce); }
.raison__num { display: block; margin-bottom: 1rem; font: italic 400 2rem/1 var(--display); color: var(--champagne); }
.raison h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.raison p { font-size: .98rem; margin: 0; }

.porte-salons { background: var(--champagne-doux) var(--grain); }
.porte-salons__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.porte-salons__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.porte-salons__liste li { display: grid; grid-template-columns: 13.5rem 1fr; gap: 1rem; align-items: baseline; padding: .9rem 1.1rem; background: rgba(251, 250, 246, .7); }
.porte-salons__liste li span:last-child { font-size: .92rem; line-height: 1.5; }
@media (max-width: 54rem) {
  .porte-salons__inner { grid-template-columns: 1fr; }
  .porte-salons__liste li { grid-template-columns: 1fr; gap: .35rem; }
}

.porte-vie-privee { background: var(--ivoire); }
.porte-vie-privee__inner { max-width: 46rem; text-align: center; }

.porte-formulaire {
  background: var(--nasir) var(--grain);
  color: rgba(247, 244, 238, .88);
  padding-block: var(--section-y);
  scroll-margin-top: var(--entete);
}
.porte-formulaire__inner { max-width: 46rem; }
.porte-formulaire h2 { color: var(--ivoire-clair); }
.formulaire__prive { margin: -.4rem 0 1.8rem; font-size: .82rem; color: var(--champagne); }
.champ__aide { margin: .5rem 0 0; font-size: .8rem; color: rgba(247, 244, 238, .62); }
.champ--situation { border: 0; padding: 0; margin: 0 0 1.8rem; }
.champ--situation legend { display: block; margin-bottom: .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivoire-clair); }
.choix--compact { gap: .5rem; }
.choix--compact .choix__option span { padding-block: .75rem; font-size: .95rem; }
.consentement { margin-bottom: 1.1rem; }
.consentement--leger label { color: rgba(247, 244, 238, .82); }
.formulaire--salon .btn { margin-top: 1rem; }
.message--grand { font-size: 1.05rem; line-height: 1.6; padding: 1.4rem 1.6rem; }
.porte-formulaire__connexion { margin-top: 2rem; font-size: .9rem; }
.porte-formulaire__connexion a { color: var(--champagne); }

/* --- la charte */
.charte { padding-block: clamp(3rem, 7vw, 6rem); background-color: var(--champagne-doux); }
.charte__feuille {
  position: relative; max-width: 50rem; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
  background: var(--ivoire-clair) var(--grain);
  box-shadow: var(--ombre-douce);
}
.charte__titre { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.charte__intro { font: italic 400 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.5 var(--display); color: var(--nasir); }
.charte__articles { margin: 2.5rem 0; padding: 0; list-style: none; counter-reset: art; }
.charte__articles li { counter-increment: art; position: relative; padding: 1.4rem 0 1.4rem 3.4rem; border-top: 1px solid rgba(201, 169, 106, .45); }
.charte__articles li::before { content: counter(art); position: absolute; left: 0; top: 1.15rem; font: italic 400 2.1rem/1 var(--display); color: var(--champagne); }
.charte__articles h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); margin-bottom: .4em; }
.charte__articles p { margin: 0; }
.charte__limites { margin: 2.5rem 0; padding: 1.8rem clamp(1.25rem, 3vw, 2.2rem); background: rgba(26, 47, 94, .05); border-left: 3px solid var(--nasir); }
.charte__limites h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.charte__limites ul { padding-left: 1.2rem; }
.charte__fin { font-family: var(--display); font-size: 1.3rem; font-style: italic; color: var(--nasir); }
.charte__signature { font: italic 500 1.8rem/1 var(--display); color: var(--nasir); }
.charte__retour { margin-top: 2.2rem; }

/* --- l'accès : recevoir son lien, entrer */
.acces { padding-block: clamp(4rem, 9vw, 7rem); min-height: calc(70svh - var(--entete)); background-color: var(--champagne-doux); }
.acces__carte { position: relative; max-width: 34rem; margin-inline: auto; padding: clamp(2.2rem, 5vw, 3.4rem); background: var(--ivoire-clair) var(--grain); box-shadow: var(--ombre-douce); text-align: center; }
.acces__carte h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.formulaire--acces { text-align: left; margin-top: 1.6rem; }
.formulaire--acces .champ > label { color: var(--nasir); }
.formulaire--acces .champ input { border-color: var(--platine); }
.acces .message--ok, .acces .message--erreur, .salon .message--ok, .salon .message--erreur, .fenetre .message--ok, .fenetre .message--erreur { color: var(--texte); }
.acces__autre { margin-top: 1.4rem; font-size: .9rem; }

/* --- le salon */
.salon { background: var(--ivoire); min-height: calc(100svh - var(--entete)); }
.salon__attente { padding: 3rem 1rem; text-align: center; font: italic 400 1.3rem/1.4 var(--display); color: var(--or-fonce); }
.salon__dehors { padding-block: var(--section-y); text-align: center; }
.salon__dehors-inner { max-width: 40rem; }
.salon__dehors-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.salon__dedans {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  max-width: var(--shell); margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--gouttiere) 5rem;
}
.salon__cote { position: sticky; top: calc(var(--entete) + 1.5rem); align-self: start; display: grid; gap: 1.6rem; }
.moi { display: flex; align-items: center; gap: .8rem; }
.moi__pseudo { margin: 0; font: 500 1.25rem/1.1 var(--display); color: var(--nasir); }
.moi__situation { margin: .2rem 0 0; font-size: .74rem; color: var(--or-fonce); }
.moi__actions { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .9rem; }
.moi__compte { margin: .9rem 0 0; font-size: .74rem; color: rgba(52, 52, 58, .7); }
.pastille-compte { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 1rem; background: #B5533F; color: #fff; font-size: .65rem; letter-spacing: 0; }
.salon__salons { display: grid; gap: .15rem; padding-top: 1.2rem; border-top: 1px solid rgba(201, 169, 106, .45); }
.salon-lien {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .55rem .75rem; text-decoration: none; color: var(--texte); font-size: .92rem;
  border-left: 2px solid transparent; transition: background var(--transition), border-color var(--transition);
}
.salon-lien:hover { background: rgba(201, 169, 106, .12); color: var(--nasir); }
.salon-lien.est-actif { background: var(--ivoire-clair); border-left-color: var(--champagne); color: var(--nasir); font-weight: 600; }
.salon-lien__compte { font-size: .72rem; color: var(--or-fonce); }
.salon__charte { margin: 0; font-size: .8rem; }
.avatar {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--teinte, var(--nasir)); color: var(--ivoire-clair);
  font: 500 1.25rem/1 var(--display);
  box-shadow: inset 0 0 0 2px rgba(201, 169, 106, .55);
}
.salon__bienvenue { margin-bottom: 1.6rem; padding: 1.6rem 1.8rem; background: var(--nasir) var(--grain); color: rgba(247, 244, 238, .9); }
.salon__bienvenue-titre { margin: 0 0 .6rem; font: italic 400 1.7rem/1.2 var(--display); color: var(--ivoire-clair); }
.salon__bienvenue .dieze { background: rgba(201, 169, 106, .3); color: var(--ivoire-clair); }
.salon__bienvenue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 1.2rem 0 0; }
.salon__bienvenue .lien-discret { color: var(--champagne); }
.salon__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.2rem; padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(201, 169, 106, .45); }
.salon__tete-sur { margin: 0 0 .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); }
.salon__tete-titre { margin: 0 0 .3rem; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); }
.salon__tete-texte { margin: 0; font-size: .95rem; max-width: 34rem; }
.salon__creer { flex: 0 0 auto; }
.salon__liste { display: grid; gap: 1.2rem; }
.salon__vide { padding: 3rem 1.5rem; text-align: center; background: var(--ivoire-clair) var(--grain); }
.salon__vide-titre { font: italic 400 1.6rem/1.3 var(--display); color: var(--nasir); margin-bottom: .4rem; }
.salon__suite { text-align: center; margin-top: 2rem; }

.carte-salon { position: relative; padding: 1.4rem clamp(1.1rem, 3vw, 1.8rem) 1rem; background: var(--ivoire-clair); box-shadow: var(--ombre-douce); }
.carte-salon--epinglee { border-top: 2px solid var(--champagne); }
.carte-salon--masquee { opacity: .55; }
.carte-salon__tete { display: flex; align-items: center; gap: .8rem; }
.carte-salon__qui { flex: 1; min-width: 0; }
.auteur { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.auteur__pseudo { font-weight: 600; color: var(--nasir); font-size: .98rem; }
.badge { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--or-fonce); background: rgba(201, 169, 106, .16); padding: .15rem .5rem; border-radius: 1rem; }
.badge--equipe { background: var(--nasir); color: var(--champagne); }
.carte-salon__meta { margin: .15rem 0 0; font-size: .78rem; color: rgba(52, 52, 58, .72); }
.carte-salon__meta .dieze { font-size: .78rem; text-decoration: none; }
.carte-salon__epingle { color: var(--or-fonce); font-weight: 600; }
.carte-salon__plus { background: none; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--or-fonce); padding: .2rem .5rem; }
.carte-salon__corps { cursor: pointer; margin-top: .9rem; }
.carte-salon__titre { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); margin: 0 0 .4em; }
.carte-salon__texte { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.texte-membre p { margin: 0 0 .8em; font-size: 1rem; line-height: 1.7; }
.texte-membre a { word-break: break-word; }
.carte-salon__image { margin-top: .9rem; max-height: 26rem; width: auto; max-width: 100%; }
.carte-salon__actions { display: flex; gap: 1.2rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--platine-pale); }
.action { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer; padding: .35rem 0; font: 500 .82rem/1 var(--texte-police); color: var(--texte); }
.action:hover, .action.est-actif { color: var(--or-fonce); }
.action span[aria-hidden] { font-size: 1.05rem; color: var(--or-fonce); }
.action__compte { margin-left: .2rem; font-weight: 600; }
.menu-options { position: absolute; right: 1rem; top: 3.2rem; z-index: 5; display: grid; min-width: 13rem; background: #fff; box-shadow: var(--ombre-objet); }
.menu-options button { background: none; border: 0; text-align: left; padding: .8rem 1.1rem; cursor: pointer; font: 500 .88rem/1.2 var(--texte-police); color: var(--texte); }
.menu-options button:hover { background: var(--ivoire); color: var(--nasir); }

.fenetre {
  width: min(40rem, 100vw - 1.5rem); max-height: min(92svh, 60rem);
  padding: 0; border: 0; background: var(--ivoire-clair) var(--grain); box-shadow: var(--ombre-objet); color: var(--texte);
}
.fenetre--large { width: min(52rem, 100vw - 1.5rem); }
.fenetre::backdrop { background: rgba(14, 22, 46, .55); backdrop-filter: blur(3px); }
.fenetre__corps { padding: clamp(1.6rem, 4vw, 2.6rem); }
.fenetre__fermer { position: absolute; top: .6rem; right: .8rem; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--or-fonce); }
.fenetre__titre { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); margin-bottom: 1.2rem; padding-right: 2rem; }
.compositeur__label { display: block; margin: 1.2rem 0 .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nasir); }
.compositeur__label .champ__option { color: var(--or-fonce); }
.compositeur__champ { width: 100%; font: 400 1rem/1.6 var(--texte-police); color: var(--encre); background: #fff; border: 1px solid var(--platine); padding: .85rem 1rem; }
.compositeur__champ:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(201, 169, 106, .28); }
.compositeur__salons { border: 0; padding: 0; margin: 0; }
.compositeur__salons legend { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nasir); margin-bottom: .6rem; }
.choix-salons { display: flex; flex-wrap: wrap; gap: .45rem; }
.choix-salon { position: relative; cursor: pointer; }
.choix-salon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-salon span { display: inline-block; padding: .45rem .8rem; border: 1px solid rgba(201, 169, 106, .6); border-radius: 2rem; font-size: .82rem; font-weight: 600; color: var(--nasir); transition: background var(--transition); }
.choix-salon input:checked + span { background: var(--nasir); border-color: var(--nasir); color: var(--champagne); }
.choix-salon input:focus-visible + span { outline: 2px solid var(--or-fonce); outline-offset: 2px; }
.compositeur__photo { margin-top: 1rem; }
.compositeur__apercu { margin-top: .8rem; display: grid; gap: .5rem; justify-items: start; }
.compositeur__apercu img { max-height: 12rem; width: auto; box-shadow: var(--ombre-douce); }
.compositeur__rappel { margin: 1.2rem 0; font-size: .82rem; color: rgba(52, 52, 58, .75); }
.lecture__titre { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); margin: 1rem 0 .6rem; }
.lecture__texte { margin-top: 1rem; }
.lecture__image { margin-top: 1rem; max-height: 34rem; width: auto; max-width: 100%; }
.lecture__reponses { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(201, 169, 106, .45); }
.lecture__reponses h3 { font-size: 1.35rem; }
.reponses { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1.1rem; }
.reponse { display: flex; gap: .8rem; }
.reponse .avatar { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
.reponse__corps { flex: 1; min-width: 0; padding: .8rem 1rem; background: #fff; }
.reponse--masquee { opacity: .55; }
.reponse__quand { font-size: .74rem; color: rgba(52, 52, 58, .7); }
.reponse__actions { margin: .2rem 0 0; display: flex; gap: 1rem; }
.reponse-form textarea { width: 100%; font: 400 1rem/1.6 var(--texte-police); padding: .8rem 1rem; border: 1px solid var(--platine); background: #fff; margin-bottom: .8rem; }
.case { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 0; font-size: .92rem; cursor: pointer; }
.case input { margin-top: .3rem; accent-color: var(--nasir); }
.profil .btn { margin-top: 1.4rem; }
.profil__situation { border: 0; padding: 0; margin: 0; }
.choix--clair .choix__option span { color: var(--texte); border-color: rgba(201, 169, 106, .55); }
.profil__danger { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--platine-pale); }
.profil__danger summary { cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9A4A3A; }
.profil__danger form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.profil__danger .compositeur__champ { max-width: 14rem; }
.signalements { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.signalement { padding: 1rem 1.2rem; background: #fff; border-left: 3px solid #B5533F; }
.signalement__meta { margin: 0 0 .4rem; font-size: .82rem; }
.signalement__motif { margin: 0 0 .4rem; font-style: italic; }
.signalement__texte { margin: 0 0 .6rem; padding-left: .9rem; border-left: 2px solid var(--platine); font-size: .92rem; }
.signalement__actions { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; }
.membres__tableau { overflow-x: auto; }
.membres__tableau table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.membres__tableau th, .membres__tableau td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--platine-pale); vertical-align: top; }
.membres__tableau th { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); }
.membres__note { font-size: .82rem; color: var(--or-fonce); }

@media (max-width: 56rem) {
  .salon__dedans { grid-template-columns: 1fr; }
  .salon__cote { position: static; gap: 1rem; }
  .salon__salons { display: flex; overflow-x: auto; gap: .4rem; padding-bottom: .4rem; scrollbar-width: none; }
  .salon-lien { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; padding: .45rem .7rem; white-space: nowrap; }
  .salon-lien.est-actif { border-bottom-color: var(--champagne); }
  .salon__creer { width: 100%; justify-content: center; }
}


/* =========================================================================
   LES POLAROÏDS : la photo entière, son cadre ivoire, sa légende à la main
   ========================================================================= */

.polaroid {
  --r: 0deg;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: .75rem .75rem 0;
  background-color: #FFFEFA;
  background-image: var(--grain);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 106, .32),
    0 1px 1px rgba(30, 24, 18, .05),
    0 28px 50px -26px rgba(30, 24, 18, .5),
    0 12px 20px -14px rgba(30, 24, 18, .28);
  transform: rotate(var(--r));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
}
a:hover > .polaroid, .polaroid:hover { transform: rotate(0deg) translateY(-4px); }
.polaroid__fenetre { display: block; line-height: 0; background: #EDE7DB; }
.polaroid__photo { display: block; width: auto; max-width: 100%; height: auto; }
.polaroid__legende {
  display: block;
  width: 0; min-width: 100%; box-sizing: border-box;
  padding: .8rem .4rem 1rem;
  text-align: center;
  font: italic 400 clamp(1.05rem, 1rem + .3vw, 1.25rem)/1.2 var(--display);
  color: var(--nasir);
}
.revele-pret .polaroid[data-revele]:not(.est-visible),
.revele-pret [data-revele]:not(.est-visible) .polaroid { transform: rotate(var(--r)) translateY(1.4rem); }

/* le héros : quatre générations */
.maison-hero__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; align-items: start; justify-items: center; }
.polaroid--collage .polaroid__photo { max-height: clamp(10.5rem, 17vw, 15.5rem); }
.maison-hero__collage .polaroid:nth-child(2) { margin-top: 2.2rem; }
.maison-hero__collage .polaroid:nth-child(4) { margin-top: 1.4rem; }

/* la lettre du magazine */
.polaroid--lettre { position: absolute; right: clamp(-1.5rem, -3vw, -.5rem); bottom: clamp(-3.5rem, -5vw, -2rem); width: clamp(9rem, 19vw, 13rem); }
.polaroid--lettre .polaroid__photo { width: 100%; }
@media (max-width: 40rem) {
  .polaroid--lettre { position: relative; right: auto; bottom: auto; margin: 2rem 0 0 auto; display: block; }
}

/* la porte des Affrenchys */
.porte-hero__photo { justify-self: center; }
.polaroid--porte .polaroid__photo { max-height: clamp(18rem, 34vw, 28rem); }

/* =========================================================================
   LA MAISON : la suite après le livre, l'histoire des fondatrices
   ========================================================================= */

:root { --pont: 5.5rem; }
.maison-livre .livre--3d .livre__scene { height: calc(100svh - var(--entete, 0px) - var(--pont)); }
.maison-pont {
  height: var(--pont);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background: var(--nasir) var(--grain);
  text-align: center;
}
.maison-pont__bouton {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .55rem 1.5rem;
  border: 1px solid rgba(201, 169, 106, .7); border-radius: 3rem;
  font: 600 .82rem/1 var(--texte-police); letter-spacing: .2em; text-transform: uppercase;
  color: var(--champagne); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.maison-pont__bouton:hover { background: var(--champagne); color: var(--nasir); }
.maison-pont__fleche { font-size: 1.15rem; animation: pont-fleche 1.8s ease-in-out infinite; }
@keyframes pont-fleche { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.maison-pont__texte { margin: 0; font: italic 400 1.05rem/1.2 var(--display); color: rgba(247, 244, 238, .86); }
@media (max-width: 40rem) { .maison-pont__texte { display: none; } :root { --pont: 4.5rem; } }

.fondatrices { padding-top: var(--section-y); background: var(--ivoire); scroll-margin-top: var(--entete); }
.fondatrices__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); max-width: 54rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.fondatrice-carte { display: grid; justify-items: center; gap: .55rem; text-decoration: none; color: var(--texte); text-align: center; }
.polaroid--portrait .polaroid__photo { max-height: clamp(17rem, 30vw, 25rem); }
.fondatrice-carte__nom { margin-top: 1.4rem; font: 400 clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem)/1.1 var(--display); color: var(--nasir); }
.fondatrice-carte__role { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); margin-bottom: .6rem; }
@media (max-width: 44rem) { .fondatrices__duo { grid-template-columns: 1fr; } }

.histoire { padding-block: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: var(--entete); }
.histoire--maritza { background: var(--ivoire-clair) var(--grain); }
.histoire--juliana { background: var(--champagne-doux) var(--grain); }
.histoire__titre { text-align: center; font-style: italic; font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.histoire__fil { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 62rem; }
/* le fil d'argent, de la première image à la dernière */
.histoire__fil::before {
  content: ""; position: absolute; left: 50%; top: 2rem; bottom: 2rem; width: 2px; transform: translateX(-50%);
  background: linear-gradient(rgba(197, 199, 203, 0), #C5C7CB 8%, #E4E5E7 50%, #C5C7CB 92%, rgba(197, 199, 203, 0));
}
.etape-vie {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 8vw, 6rem);
  align-items: center;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
}
.etape-vie::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--champagne); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(247, 244, 238, .9), 0 0 0 6px rgba(201, 169, 106, .45);
}
.etape-vie__image { justify-self: end; }
.etape-vie--droite .etape-vie__image { order: 2; justify-self: start; }
.etape-vie--droite .etape-vie__texte { order: 1; text-align: right; }
.etape-vie__image .polaroid__photo { max-height: clamp(15rem, 28vw, 22rem); }
.etape-vie__image .polaroid--haute .polaroid__photo { max-height: clamp(20rem, 40vw, 31rem); }
.etape-vie__lieu { margin: 0 0 .7rem; font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--or-fonce); }
.etape-vie__phrase { margin: 0; font: 400 clamp(1.35rem, 1.15rem + .8vw, 1.8rem)/1.45 var(--display); color: var(--nasir); }
.histoire__signature { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; text-align: center; font: italic 500 clamp(2rem, 1.6rem + 1.6vw, 2.9rem)/1 var(--display); color: var(--nasir); }
@media (max-width: 48rem) {
  .histoire__fil::before { left: .9rem; transform: none; }
  .etape-vie { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 2.6rem; }
  .etape-vie::after { left: .95rem; top: 1.6rem; }
  .etape-vie__image, .etape-vie--droite .etape-vie__image { order: 0; justify-self: start; }
  .etape-vie--droite .etape-vie__texte { order: 1; text-align: left; }
}

/* la Marine : la jeune officière, puis la capitaine, vingt ans plus tard */
.etape-vie__paire { display: flex; align-items: flex-start; gap: clamp(.5rem, 1.5vw, 1rem); }
.paire__avant { padding-top: .3rem; }
.paire__apres { display: flex; flex-direction: column; align-items: flex-start; }
.paire__vingt { margin: 0 0 .8rem .3rem; font: italic 500 clamp(1.05rem, 1rem + .4vw, 1.3rem)/1.2 var(--display); color: var(--or-fonce); white-space: nowrap; }
.etape-vie__paire .paire__avant .polaroid__photo { max-height: clamp(6.5rem, 12vw, 11rem); }
.etape-vie__paire .paire__apres .polaroid__photo { max-height: clamp(8.5rem, 15.5vw, 14.5rem); }
.etape-vie__paire .polaroid { padding: .55rem .55rem 0; }
.etape-vie__paire .polaroid__legende { padding: .6rem .3rem .8rem; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); }

/* =========================================================================
   L'ALBUM DE VOYAGES : un album relié de lin bleu, une ville par double page
   ========================================================================= */

.album { padding-block: var(--section-y); background: var(--ivoire) var(--grain); scroll-margin-top: var(--entete); }
.album__livre { max-width: 68rem; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; scroll-margin-top: calc(var(--entete) + 1rem); }
/* la reliure : du lin bleu Nasir, qui dépasse des pages comme sur un vrai album */
.album__reliure {
  padding: clamp(.45rem, 1.3vw, .85rem);
  border-radius: .6rem;
  background-color: var(--nasir);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px),
    var(--grain);
  box-shadow: 0 40px 70px -38px rgba(8, 14, 32, .75), 0 14px 26px -18px rgba(8, 14, 32, .5);
}
.album__pages {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: .25rem;
  outline-offset: 4px;
}
.album__pages:focus-visible { outline: 2px solid var(--champagne); }
.album--actif .album__pages { scrollbar-width: none; }
.album--actif .album__pages::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .album__pages { scroll-behavior: smooth; } }

/* une ville par page : à gauche et à droite du creux de la reliure, la légende écrite sous la photo */
.album-page {
  position: relative;
  flex: 0 0 50%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: clamp(28rem, 64vh, 37rem);
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.6rem) clamp(2.4rem, 4vw, 3rem);
  background-color: #FBF8F1;
  background-image: linear-gradient(90deg, rgba(60, 45, 25, 0) 82%, rgba(60, 45, 25, .08) 95%, rgba(60, 45, 25, .2)), var(--grain);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 106, .18);
}
/* la page de droite : son ombre est du côté de la reliure, et l'on tourne les doubles pages entières */
.album-page:nth-child(odd):not(.album-page--couverture) {
  scroll-snap-align: none;
  background-image: linear-gradient(270deg, rgba(60, 45, 25, 0) 82%, rgba(60, 45, 25, .08) 95%, rgba(60, 45, 25, .2)), var(--grain);
}
.album-page__photos {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: clamp(.8rem, 2vw, 1.4rem);
  max-width: 100%;
}
.album-page__legende {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0; max-width: 22em; text-align: center;
  font: italic 400 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.35 var(--display); color: #2C2C33;
}
.album-page__ville {
  display: block; margin-bottom: .4rem;
  font: 600 .74rem/1.3 var(--texte-police); font-style: normal; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-fonce);
}
.album-page__num { position: absolute; bottom: .9rem; left: 1.3rem; font: italic 400 1rem/1 var(--display); color: var(--or-fonce); }
.album-page:nth-child(odd) .album-page__num { left: auto; right: 1.3rem; }
.album-page__retour { margin-top: 1.1rem; }

/* le tirage, glissé dans ses quatre coins dorés */
.tirage-album {
  --r: -1.2deg;
  position: relative;
  margin: 0;
  padding: .45rem;
  background: #FFFFFF;
  box-shadow: 0 16px 30px -18px rgba(30, 24, 18, .5), 0 2px 4px rgba(30, 24, 18, .12);
  transform: rotate(var(--r));
}
.tirage-album:nth-child(2) { --r: 1.6deg; margin-top: clamp(1rem, 3vw, 2.2rem); }
.tirage-album__photo { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(14rem, 27vw, 22rem); }
.album-page__photos--2 .tirage-album { max-width: 48%; }
.album-page__photos--2 .tirage-album__photo { max-height: clamp(9rem, 16vw, 15rem); }
.tirage-album::before, .tirage-album::after,
.tirage-album__coins::before, .tirage-album__coins::after {
  content: ""; position: absolute; z-index: 1; width: 1.5rem; height: 1.5rem;
  filter: drop-shadow(0 1px 1px rgba(30, 24, 18, .3));
}
.tirage-album__coins { position: absolute; inset: 0; pointer-events: none; }
.tirage-album::before { top: -.3rem; left: -.3rem; background: linear-gradient(135deg, #DCC189 0 50%, transparent 50%); }
.tirage-album::after { top: -.3rem; right: -.3rem; background: linear-gradient(225deg, #DCC189 0 50%, transparent 50%); }
.tirage-album__coins::before { bottom: -.3rem; left: -.3rem; background: linear-gradient(45deg, #C9A96A 0 50%, transparent 50%); }
.tirage-album__coins::after { bottom: -.3rem; right: -.3rem; background: linear-gradient(315deg, #C9A96A 0 50%, transparent 50%); }

/* la couverture : le titre doré à chaud sur le lin */
.album-page--couverture {
  flex-basis: 100%;
  background-color: var(--nasir);
  background-image:
    radial-gradient(70% 60% at 50% 40%, rgba(201, 169, 106, .14), rgba(26, 47, 94, 0) 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px),
    var(--grain);
  box-shadow: none;
}
.album-couverture {
  margin: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.8rem, 6vw, 5rem);
  text-align: center;
  border: 1px solid rgba(201, 169, 106, .65);
  outline: 1px solid rgba(201, 169, 106, .3); outline-offset: .55rem;
}
.album-couverture__titre {
  margin: 0;
  font: italic 500 clamp(2.5rem, 1.9rem + 3vw, 4.4rem)/1.05 var(--display);
  color: var(--champagne);
  background: linear-gradient(175deg, #F1E2B8 0%, #C9A96A 45%, #9C7A3C 80%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.album-couverture__noms { margin: 1.2rem 0 2.2rem; font: 600 .78rem/1.4 var(--texte-police); letter-spacing: .3em; text-transform: uppercase; color: var(--champagne-doux); }
.album-couverture__ouvrir.btn { background: var(--champagne); border-color: var(--champagne); color: var(--nasir); }
.album-couverture__ouvrir.btn:hover { background: var(--ivoire-clair); border-color: var(--ivoire-clair); color: var(--nasir); }

/* les commandes : de grands boutons, le numéro de la page entre les deux */
.album__commandes, .album__aide { display: none; }
.album--actif .album__commandes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.album--actif .album__aide { display: block; }
.album__bouton {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 3.2rem; padding: .7rem 1.5rem;
  border: 1px solid var(--nasir); border-radius: 3rem; background: transparent;
  font: 600 .8rem/1 var(--texte-police); letter-spacing: .14em; text-transform: uppercase;
  color: var(--nasir); cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.album__bouton span { font-size: 1.15rem; letter-spacing: 0; }
.album__bouton:hover:not([disabled]) { background: var(--nasir); color: var(--ivoire-clair); }
.album__bouton:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 3px; }
.album__bouton[disabled] { opacity: .3; cursor: default; }
.album__compteur { margin: 0; text-align: center; font: italic 500 clamp(1.15rem, 1.05rem + .4vw, 1.35rem)/1.3 var(--display); color: var(--or-fonce); }
.album__aide { margin: .9rem 0 0; text-align: center; font-size: .92rem; color: var(--texte); }
.album__villes { margin: 1.6rem auto 0; max-width: 56rem; text-align: center; font-size: .86rem; line-height: 2.1; color: var(--texte); }
.album__villes a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .1rem; }
.album__villes a:hover, .album__villes a[aria-current="true"] { color: var(--or-fonce); border-bottom-color: var(--champagne); }
.album__villes a[aria-current="true"] { font-weight: 600; }

@media (max-width: 44rem) {
  .album-page, .album-page--couverture { flex-basis: 100%; min-height: 0; justify-content: flex-start; padding: 1.4rem 1.1rem 2.6rem; }
  .album-page, .album-page:nth-child(odd):not(.album-page--couverture) { scroll-snap-align: start; background-image: var(--grain); }
  .album-page--couverture { justify-content: center; background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px), var(--grain); }
  .album-page__num, .album-page:nth-child(odd) .album-page__num { left: auto; right: 1.1rem; }
  .tirage-album__photo { max-height: 19rem; }
  .album-page__photos--2 .tirage-album__photo { max-height: 12rem; }
  .album--actif .album__commandes { flex-wrap: wrap; }
  .album__compteur { order: -1; flex-basis: 100%; }
  .album__bouton { flex: 1; justify-content: center; padding-inline: .8rem; letter-spacing: .08em; }
}
}