/* =========================================================================
   Mises en scène propres à chaque page.

   Chaque page a sa façon de montrer le domaine :
     - accueil     : les arcades « Sur place », les cartes postales,
                     la carte des envies ;
     - gîtes       : la visite pièce par pièce, photo fixe à côté ;
     - sur place   : une journée en trois moments, jusqu'à la nuit ;
     - à propos    : la façade annotée, l'emblème, le mot de l'équipe.
   ========================================================================= */

:root {
  --c-lampe: #eec26a;
  --c-papier: #fdfaf2;
}

/* --- Accueil : les arcades « Sur place » ------------------------------- */

.arcades__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  margin-bottom: var(--e-7);
}

/* Trois colonnes, celle du milieu décalée vers le bas : une enfilade de
   fenêtres cintrées, en quinconce. */
.arcades__liste {
  display: grid;
  gap: var(--e-6) var(--e-5);
}

@media (min-width: 600px) {
  .arcades__liste {
    grid-template-columns: repeat(2, 1fr);
  }

  .arcade:nth-child(even) {
    translate: 0 var(--e-7);
  }
}

@media (min-width: 900px) {
  .arcades__liste {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-7) var(--e-6);
    padding-bottom: var(--e-7);
  }

  .arcade:nth-child(even) {
    translate: none;
  }

  .arcade:nth-child(3n + 2) {
    translate: 0 var(--e-8);
  }
}

.arcade__lien {
  display: block;
  color: var(--c-encre);
  text-decoration: none;
}

.arcade__lien:hover {
  color: var(--c-encre);
}

.arcade__photo {
  display: block;
  aspect-ratio: 4 / 5;
}

.arcade__photo .arche__image {
  transition: transform 1.6s var(--courbe-douce);
}

.arcade__lien:hover .arche__image {
  transform: scale(1.05);
}

.arcade__legende {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--e-3);
  margin-top: var(--e-4);
}

.arcade__num {
  grid-row: span 2;
  padding-top: 0.55rem;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--c-encre-douce);
}

.arcade__nom {
  position: relative;
  justify-self: start;
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.2;
}

/* Un filet qui se déroule sous le nom au survol. */
.arcade__nom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-lent) var(--courbe-douce);
}

.arcade__lien:hover .arcade__nom::after,
.arcade__lien:focus-visible .arcade__nom::after {
  transform: scaleX(1);
}

.arcade__accroche {
  font-size: var(--t-s);
  color: var(--c-encre-douce);
}

/* --- Accueil : les cartes postales ------------------------------------- */

.cartes-postales {
  display: grid;
  gap: var(--e-6);
  max-width: 62rem;
  margin-inline: auto;
}

.carte-postale {
  position: relative;
  display: grid;
  background: var(--c-papier);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(26 44 71 / 8%), 0 26px 50px -26px rgb(26 44 71 / 45%);
}

.carte-postale__recto {
  padding: 12px;
}

.carte-postale__recto picture,
.carte-postale__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 2px;
}

.carte-postale__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5) var(--e-6);
}

.carte-postale__salut {
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.5rem);
}

.carte-postale__titre {
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.15;
}

.carte-postale__texte {
  color: var(--c-encre-douce);
  font-size: var(--t-s);
  margin-bottom: var(--e-2);
}

.carte-postale__adresse {
  display: none;
}

@media (min-width: 900px) {
  .carte-postale {
    grid-template-columns: 40% 1fr 13rem;
  }

  .carte-postale__recto {
    padding: 14px 0 14px 14px;
  }

  .carte-postale__recto picture,
  .carte-postale__image {
    aspect-ratio: auto;
    min-height: 17rem;
  }

  .carte-postale__message {
    justify-content: center;
    padding: var(--e-6);
  }

  /* Posées sur la table, un peu de biais. Aucun effet au survol : les
     cartes restent immobiles, seul le lien réagit. Les propriétés rotate
     et translate n'entrent pas en conflit avec la transformation des
     apparitions au défilement. */
  .carte-postale--1 { rotate: -1.2deg; }
  .carte-postale--2 { rotate: 0.9deg; }
  .carte-postale--3 { rotate: -0.5deg; }

  /* Le côté adresse : filet vertical, timbre, cachet et lignes. */
  .carte-postale__adresse {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-block: var(--e-5);
    padding: var(--e-5) var(--e-5) var(--e-2) var(--e-4);
    border-left: 1px solid var(--c-filet);
  }

  .carte-postale__timbre {
    position: absolute;
    top: 0;
    right: var(--e-5);
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 4.4rem;
    background: linear-gradient(160deg, var(--c-bleu-volet), var(--c-bleu));
    outline: 4px dotted var(--c-papier);
    outline-offset: -2px;
    box-shadow: 0 0 0 1px var(--c-filet);
  }

  .carte-postale__timbre-ancre {
    width: 1.4rem;
    aspect-ratio: 2189 / 2635;
    background: var(--c-creme);
    -webkit-mask: url('/img/ancre.svg') center / contain no-repeat;
    mask: url('/img/ancre.svg') center / contain no-repeat;
  }

  /* Cachet de la poste, encré de travers sur le timbre. */
  .carte-postale__cachet {
    position: absolute;
    top: 2.4rem;
    right: 4.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    border: 1.5px solid rgb(42 92 153 / 55%);
    border-radius: 50%;
    color: rgb(42 92 153 / 75%);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    rotate: -14deg;
  }

  .carte-postale__cachet b {
    font-family: var(--f-script);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  .carte-postale__cachet::after {
    content: '';
    position: absolute;
    right: 88%;
    top: 36%;
    width: 3.5rem;
    height: 1.1rem;
    background: repeating-linear-gradient(0deg, rgb(42 92 153 / 45%) 0 1.5px, transparent 1.5px 5px);
  }

  .carte-postale__lignes {
    display: grid;
    gap: 0.35rem;
    font-family: var(--f-script);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--c-encre);
  }

  .carte-postale__lignes span {
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--c-filet);
    white-space: nowrap;
  }
}

/* Le décalage des cartes attend la place : entre 900 et 1180 px, la carte
   décalée sortait de l'écran et la page défilait en largeur. */
@media (min-width: 1180px) {
  .carte-postale--2 { translate: 5% 0; }
  .carte-postale--3 { translate: -3% 0; }
}

/* --- La carte des envies ----------------------------------------------- */

.carte-envies {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 900px) {
  .carte-envies {
    grid-template-columns: 5fr 7fr;
    gap: 0;
  }
}

.carte-envies__photo {
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 3 / 4;
  justify-self: center;
}

.carte-envies__menu {
  position: relative;
  z-index: 1;
  padding: var(--e-7) var(--e-5) var(--e-6);
  background: var(--c-blanc);
  border: 1px solid var(--c-pierre);
  outline: 1px solid var(--c-pierre);
  outline-offset: -10px;
  border-radius: 2px;
  box-shadow: var(--ombre-carte);
  text-align: center;
}

@media (min-width: 700px) {
  .carte-envies__menu {
    padding: var(--e-7) var(--e-7) var(--e-6);
  }
}

@media (min-width: 900px) {
  .carte-envies__menu {
    margin-left: -4rem;
  }
}

.carte-envies__ancre {
  display: block;
  width: 1.5rem;
  aspect-ratio: 2189 / 2635;
  margin: 0 auto var(--e-2);
  background: var(--c-bleu-volet);
  -webkit-mask: url('/img/ancre.svg') center / contain no-repeat;
  mask: url('/img/ancre.svg') center / contain no-repeat;
}

.carte-envies__titre {
  font-size: clamp(2.8rem, 2.4rem + 1.6vw, 3.6rem);
  transform: none;
}

.carte-envies__sous-titre {
  margin: var(--e-1) 0 var(--e-6);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-encre-douce);
}

.carte-envies__liste {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
  text-align: left;
}

.carte-envies__ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}

.carte-envies__nom {
  font-family: var(--f-titre);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}

.carte-envies__points {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted var(--c-bordure);
  transform: translateY(-0.3em);
}

.carte-envies__mention {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-bleu);
  white-space: nowrap;
}

.carte-envies__description {
  margin-top: 0.1rem;
  font-size: var(--t-s);
  color: var(--c-encre-douce);
}

/* Le lien vers le partenaire, toujours sur sa propre ligne. */
.carte-envies__description a {
  display: block;
  width: fit-content;
  margin-top: 0.15rem;
  white-space: nowrap;
}

.carte-envies__description a::before {
  content: '→ ';
}

.carte-envies__note {
  margin-bottom: var(--e-4);
  font-size: var(--t-s);
  font-style: italic;
  color: var(--c-encre-douce);
}

/* --- Gîtes : la visite pièce par pièce --------------------------------- */

.visite__scene {
  display: none;
}

.visite__chapitre {
  position: relative;
  padding-block: var(--e-6);
}

.visite__chapitre + .visite__chapitre {
  border-top: 1px solid var(--c-filet);
}

.visite__photo-mobile {
  margin-bottom: var(--e-4);
  border-radius: var(--r-grand);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.visite__photo-mobile picture,
.visite__image-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le numéro en grand, tracé d'un filet bleu, derrière le titre. */
/* Le numéro tracé au filet, posé au-dessus du titre sans le toucher.
   Police statique : sur un tracé seul, la variable montrerait ses
   contours internes. */
.visite__numero {
  display: block;
  margin-bottom: var(--e-3);
  font-family: 'Cormorant Garamond Statique', var(--f-titre);
  font-size: clamp(3.6rem, 2.6rem + 3.5vw, 6rem);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-bleu-volet);
}

.visite__titre {
  position: relative;
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.1;
}

.visite__texte {
  max-width: 30rem;
  margin-top: var(--e-3);
  font-size: var(--t-l);
  line-height: 1.6;
  color: var(--c-encre-douce);
}

/* Les vignettes, en éventail comme des tirages posés sur la table. */
.visite__vignettes {
  display: flex;
  margin-top: var(--e-5);
  padding-left: 0.4rem;
}

.visite__vignettes li {
  width: clamp(5.5rem, 4rem + 4vw, 8rem);
  aspect-ratio: 4 / 5;
  margin-left: -1.1rem;
  border: 5px solid var(--c-blanc);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 10px 22px -10px rgb(26 44 71 / 45%);
  transition: rotate var(--d-moyen) var(--courbe), translate var(--d-moyen) var(--courbe);
}

.visite__vignettes li:first-child { margin-left: 0; rotate: -5deg; }
.visite__vignettes li:nth-child(2) { rotate: 3deg; translate: 0 6px; }
.visite__vignettes li:nth-child(3) { rotate: -2deg; }
.visite__vignettes li:nth-child(4) { rotate: 4deg; translate: 0 4px; }

.visite__vignettes li:hover,
.visite__vignettes li:focus-within {
  rotate: 0deg;
  translate: 0 -6px;
  z-index: 1;
}

/* Chaque vignette ouvre la visionneuse, en grand. */
.visite__vignette-lien {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.visite__vignette-lien:focus-visible {
  outline-offset: -3px;
}

.visite__vignettes picture,
.visite__vignette {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visite__reperes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-5);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-encre-douce);
}

.visite__reperes li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color var(--d-moyen), border-color var(--d-moyen);
}

.visite__reperes span {
  font-family: var(--f-titre);
  font-size: 1rem;
  letter-spacing: 0;
}

.visite__reperes .est-active {
  color: var(--c-bleu);
  border-bottom-color: var(--c-bleu);
}

/* Grand écran avec script : la fenêtre reste en place, les chapitres
   défilent à côté ; celui qu'on lit est pleinement visible. */
@media (min-width: 900px) {
  .js .visite__grille {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: var(--e-8);
    align-items: start;
  }

  .js .visite__scene {
    display: block;
    position: sticky;
    top: 6.5rem;
  }

  /* Le cadre : la photo de la pièce, un filet de pierre décalé derrière.
     Les vues se relaient par un fondu lent, rien de plus. */
  .js .visite__cadre {
    position: relative;
    height: min(64vh, 38rem);
    margin: 0 var(--e-5) var(--e-5) 0;
  }

  .js .visite__cadre::before {
    content: '';
    position: absolute;
    inset: var(--e-5) calc(-1 * var(--e-5)) calc(-1 * var(--e-5)) var(--e-5);
    border: 1px solid var(--c-pierre);
    border-radius: var(--r-grand);
  }

  .visite__vue {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--r-grand);
    opacity: 0;
    transition: opacity 1.1s var(--courbe-douce);
  }

  .visite__vue.est-active {
    opacity: 1;
  }

  .visite__vue picture,
  .visite__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (prefers-reduced-motion: no-preference) {
    .visite__image {
      transform: scale(1.04);
      transition: transform 2.4s var(--courbe-douce);
    }

    .visite__vue.est-active .visite__image {
      transform: scale(1);
    }
  }

  .js .visite__photo-mobile {
    display: none;
  }

  .js .visite__chapitre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72vh;
    border-top: 0;
    opacity: 0.3;
    transition: opacity var(--d-lent) var(--courbe);
  }

  .js .visite__chapitre.est-actif {
    opacity: 1;
  }
}

/* --- Sur place : la frise de la journée -------------------------------- */

.frise {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--e-6));
}

.frise__liste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--c-blanc);
  border-radius: var(--r-grand);
  box-shadow: var(--ombre-carte);
}

@media (min-width: 700px) {
  .frise__liste {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--e-4) var(--e-6);
  }

  /* La course du soleil, en pointillés, d'un moment à l'autre. */
  .frise__liste::before {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    top: calc(var(--e-4) + 1.9rem);
    border-top: 1px dashed var(--c-pierre);
  }
}

.frise__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border-radius: var(--r-moyen);
  color: var(--c-encre);
  text-decoration: none;
}

.frise__lien .icone {
  position: relative;
  width: 3rem;
  height: 3rem;
  padding: 0.65rem;
  border: 1px solid var(--c-filet);
  border-radius: 50%;
  background: var(--c-creme);
  color: var(--c-bleu-volet);
  transition: background-color var(--d-moyen), color var(--d-moyen);
}

.frise__lien:hover {
  color: var(--c-encre);
}

.frise__lien:hover .icone {
  background: var(--c-bleu);
  color: var(--c-creme);
}

.frise__script {
  font-family: var(--f-script);
  font-size: 1.65rem;
  line-height: 1.1;
  text-align: center;
}

/* --- Sur place : les trois moments ------------------------------------- */

.moment {
  position: relative;
  padding-block: var(--e-section);
}

.moment--matin {
  background: linear-gradient(180deg, var(--c-creme) 0%, #f3ead9 100%);
}

.moment--journee {
  background: var(--c-sable);
}

.moment--soir {
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 75% 0%, #2c4a72 0%, var(--c-nuit) 65%);
  color: var(--c-creme);
}

.moment__script {
  font-family: var(--f-script);
  font-size: clamp(3.4rem, 2.4rem + 4vw, 6.2rem);
  line-height: 0.95;
  color: var(--c-bleu-volet);
  rotate: -3deg;
  margin-bottom: var(--e-2);
}

.moment--soir .moment__script {
  color: var(--c-lampe);
}

.moment__titre {
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.1;
}

.moment__chapo {
  max-width: 34rem;
  margin-top: var(--e-3);
  font-size: var(--t-l);
  line-height: 1.6;
  color: var(--c-encre-douce);
}

.moment__entete {
  max-width: 40rem;
  margin-bottom: var(--e-7);
}

.moment__entete--clair .moment__chapo {
  color: var(--c-pierre);
}

/* Le matin */
.moment-matin {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 900px) {
  .moment-matin {
    grid-template-columns: 6fr 5fr;
    gap: var(--e-8);
  }
}

.moment-matin__photo {
  position: relative;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  justify-self: center;
}

/* Une lueur d'aube posée sur la photo. */
.moment-matin__soleil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 16%, rgb(255 214 150 / 60%) 0%, rgb(255 214 150 / 0%) 45%);
  mix-blend-mode: soft-light;
}

.moment-matin__notes {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.note-papier {
  display: flex;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--c-blanc);
  border-left: 3px solid var(--c-bleu-volet);
  border-radius: 0 var(--r-moyen) var(--r-moyen) 0;
  box-shadow: var(--ombre-douce);
  rotate: -0.4deg;
}

.note-papier:nth-child(2) {
  rotate: 0.5deg;
  margin-left: var(--e-4);
}

.note-papier > .icone {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.2rem;
  color: var(--c-bleu-volet);
}

.note-papier__titre {
  font-family: var(--f-titre);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.note-papier__titre span {
  margin-left: 0.4rem;
  font-family: var(--f-texte);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-bleu);
}

@media (max-width: 599px) {
  .note-papier__titre span {
    display: block;
    margin-left: 0;
  }
}

.note-papier p {
  font-size: var(--t-s);
  color: var(--c-encre-douce);
}

/* La journée : un collage d'activités */
.collage {
  display: grid;
  gap: var(--e-8);
}

@media (min-width: 900px) {
  .collage {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--e-7) var(--e-5);
    align-items: start;
  }

  .collage__piece--1 { grid-column: 1 / 8; grid-row: 1; }
  .collage__piece--2 { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: 10rem; }
  .collage__piece--3 { grid-column: 2 / 7; grid-row: 2; }

  /* Le mot manuscrit se loge dans le blanc laissé à droite du paintball. */
  .collage__mot {
    grid-column: 8 / 13;
    grid-row: 2;
    align-self: end;
    margin-bottom: 4rem;
  }
}

.collage__mot {
  max-width: 22rem;
  font-family: var(--f-script);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem);
  line-height: 1.15;
  color: var(--c-bleu-volet);
  rotate: -4deg;
}

.collage__mot::before {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  margin-bottom: var(--e-4);
  background: var(--c-pierre);
}

.collage__images {
  position: relative;
}

.collage__images > picture,
.collage__images > .collage__image {
  display: block;
  width: 100%;
}

.collage__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-grand);
}

.collage__piece--2 .collage__image:not(.collage__image--petite),
.collage__piece--3 .collage__image {
  aspect-ratio: 4 / 5;
}

.collage__image--petite {
  position: absolute;
  /* Déborde du cadre sans jamais dépasser la marge de l'écran. */
  right: max(-5%, 6px - var(--gouttiere));
  bottom: -12%;
  width: 44%;
  aspect-ratio: 1;
  border: 6px solid var(--c-sable);
  border-radius: var(--r-moyen);
  box-shadow: var(--ombre-carte);
}

.collage__legende {
  max-width: 30rem;
  margin-top: var(--e-5);
  padding-left: var(--e-5);
  border-left: 1px solid var(--c-pierre);
}

.collage__images:has(.collage__image--petite) + .collage__legende {
  margin-top: var(--e-8);
}

.collage__numero {
  display: block;
  font-family: var(--f-script);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--c-bleu-volet);
}

.collage__titre {
  margin: 0.1rem 0 var(--e-2);
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.15;
}

.collage__legende p {
  color: var(--c-encre-douce);
  margin-bottom: var(--e-2);
}

/* Le soir : ciel étoilé, lumière de lampe */
.moment-soir__etoiles {
  position: absolute;
  inset: 0 0 55% 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 22%, #fff, transparent),
    radial-gradient(1px 1px at 18% 64%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 27% 12%, #fff, transparent),
    radial-gradient(1px 1px at 39% 48%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 18%, #fff, transparent),
    radial-gradient(1px 1px at 61% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 73% 30%, #fff, transparent),
    radial-gradient(1px 1px at 84% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 93% 16%, #fff, transparent);
}

.moment--soir .moment__titre,
.moment--soir .collage__titre {
  color: var(--c-creme);
}

.moment--soir :focus-visible {
  outline-color: var(--c-creme);
}

.soiree {
  position: relative;
  margin-bottom: var(--e-5);
  border-radius: var(--r-grand);
  overflow: hidden;
  background: #0f1b2c;
}

.soiree > picture,
.soiree__image {
  display: block;
  width: 100%;
}

.soiree__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.soiree__legende {
  padding: var(--e-5);
}

.soiree__legende p,
.veillee__texte p {
  color: var(--c-pierre);
}

@media (min-width: 800px) {
  .soiree__image {
    aspect-ratio: 21 / 9;
  }

  .soiree__legende {
    position: absolute;
    left: var(--e-6);
    bottom: var(--e-6);
    max-width: 26rem;
    background: rgb(26 44 71 / 78%);
    border: 1px solid rgb(238 194 106 / 35%);
    border-radius: var(--r-moyen);
  }

  @supports (backdrop-filter: blur(8px)) {
    .soiree__legende {
      background: rgb(26 44 71 / 62%);
      backdrop-filter: blur(8px);
    }
  }
}

.veillee {
  display: grid;
  gap: var(--e-5);
}

@media (min-width: 800px) {
  .veillee {
    grid-template-columns: 1fr 1fr;
  }
}

.veillee__carte {
  display: grid;
  border: 1px solid rgb(216 200 164 / 18%);
  border-radius: var(--r-grand);
  background: rgb(255 255 255 / 4%);
  overflow: hidden;
  transition: border-color var(--d-moyen);
}

.veillee__carte:hover {
  border-color: rgb(238 194 106 / 55%);
}

@media (min-width: 1100px) {
  .veillee__carte {
    grid-template-columns: 1fr 1fr;
  }
}

.veillee__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .veillee__photo {
    aspect-ratio: auto;
    min-height: 15rem;
  }
}

.veillee__photo picture,
.veillee__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.veillee__texte {
  padding: var(--e-5);
  align-self: center;
}

/* --- À propos : la façade annotée -------------------------------------- */

.facade-lue__grille {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 1000px) {
  .facade-lue__grille {
    grid-template-columns: 5fr 7fr;
    gap: var(--e-8);
    align-items: start;
  }

  /* La planche accompagne la lecture de la légende, jusqu'au bas de la
     section, sous l'en-tête replié. Sélecteur renforcé : la règle de base
     de la planche, plus bas, la remet en position relative. */
  .facade-lue__grille > .facade-lue__planche {
    position: sticky;
    top: calc(4.5rem + var(--e-6));
  }
}

.facade-lue__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}

.facade-lue__intro {
  margin: var(--e-4) 0 var(--e-5);
  font-size: var(--t-l);
  line-height: 1.6;
}

/* Lettrine, comme sur une page de carnet. */
.facade-lue__intro::first-letter {
  float: left;
  padding: 0.06em 0.1em 0 0;
  font-family: var(--f-titre);
  font-size: 3.6em;
  font-weight: 500;
  line-height: 0.8;
  color: var(--c-bleu);
}

.facade-lue__legende {
  width: 100%;
  border-top: 1px solid var(--c-filet);
}

.facade-lue__entree {
  display: flex;
  gap: var(--e-3);
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--c-filet);
  font-size: var(--t-s);
  color: var(--c-encre-douce);
  transition: background-color var(--d-moyen);
}

.facade-lue__entree b {
  display: block;
  font-family: var(--f-titre);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-encre);
}

.facade-lue__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--c-bleu);
  color: var(--c-blanc);
  font-size: var(--t-xs);
  font-weight: 600;
  transition: box-shadow var(--d-moyen);
}

.facade-lue__entree.est-actif {
  background: rgb(63 125 194 / 7%);
}

.facade-lue__entree.est-actif .facade-lue__num {
  box-shadow: 0 0 0 4px rgb(63 125 194 / 28%);
}

/* La planche : la photo épinglée, un morceau de ruban adhésif en haut. */
.facade-lue__planche {
  position: relative;
  margin: 0;
  padding: var(--e-4) var(--e-4) var(--e-3);
  background: var(--c-blanc);
  border-radius: 3px;
  box-shadow: var(--ombre-carte);
  rotate: 0.6deg;
}

.facade-lue__planche::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.8rem;
  left: 50%;
  width: 7rem;
  height: 1.7rem;
  background: rgb(237 227 208 / 80%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  translate: -50% 0;
  rotate: -3deg;
}

.facade-lue__photo {
  position: relative;
}

.facade-lue__photo > picture,
.facade-lue__image {
  display: block;
  width: 100%;
}

.repere {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 50%;
  background: var(--c-creme);
  color: var(--c-nuit);
  font-size: var(--t-s);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgb(26 44 71 / 35%), 0 4px 12px rgb(0 0 0 / 30%);
  transition: transform var(--d-moyen) var(--courbe), background-color var(--d-moyen), color var(--d-moyen);
}

.repere.est-actif {
  background: var(--c-bleu);
  color: var(--c-blanc);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: no-preference) {
  .repere::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--c-creme);
    border-radius: 50%;
    opacity: 0;
    animation: repere-pouls 2.6s ease-out infinite;
  }
}

@keyframes repere-pouls {
  0% { opacity: 0.8; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.6); }
}

.facade-lue__consigne {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  font-style: italic;
  text-align: center;
  color: var(--c-encre-douce);
}

/* --- À propos : l'emblème ---------------------------------------------- */

.embleme-bande {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--e-section);
  background: var(--c-bleu);
  color: var(--c-creme);
}

.embleme-bande__persienne {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0%) 0 46px, rgb(255 255 255 / 7%) 46px 47px, rgb(10 25 50 / 12%) 47px 49px),
    linear-gradient(135deg, var(--c-bleu-volet) 0%, var(--c-bleu) 55%, var(--c-bleu-fonce) 100%);
}

.embleme-bande__grille {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 900px) {
  .embleme-bande__grille {
    grid-template-columns: 4fr 7fr;
    gap: var(--e-8);
  }
}

/* L'ancre en grand, dans deux cercles comme sur le cachet du logo. */
.embleme-bande__ancre {
  position: relative;
  justify-self: center;
  width: min(13rem, 55%);
  aspect-ratio: 2189 / 2635;
}

.embleme-bande__ancre::before,
.embleme-bande__ancre::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
}

.embleme-bande__ancre::before {
  width: 150%;
  border: 1px solid rgb(247 243 234 / 40%);
}

.embleme-bande__ancre::after {
  width: 175%;
  border: 1px dashed rgb(247 243 234 / 25%);
}

.embleme-bande__trace {
  position: absolute;
  inset: 0;
  background: var(--c-creme);
  -webkit-mask: url('/img/ancre.svg') center / contain no-repeat;
  mask: url('/img/ancre.svg') center / contain no-repeat;
  filter: drop-shadow(0 8px 20px rgb(0 0 0 / 25%));
}

.embleme-bande .script {
  color: var(--c-bleu-clair);
}

.embleme-bande__titre {
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-creme);
}

.embleme-bande__citation {
  max-width: 36rem;
  margin-top: var(--e-4);
  font-family: var(--f-titre);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-style: italic;
  line-height: 1.45;
}

/* --- À propos : le mot de l'équipe ------------------------------------- */

.equipe__grille {
  display: grid;
  align-items: start;
}

.equipe__photo {
  border-radius: var(--r-grand);
  overflow: hidden;
}

.equipe__photo picture,
.equipe__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.equipe__mot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  margin: -3rem var(--e-4) 0;
  padding: var(--e-6);
  background: var(--c-blanc);
  border-radius: var(--r-grand);
  box-shadow: var(--ombre-carte);
}

@media (min-width: 1000px) {
  .equipe__grille {
    grid-template-columns: 8fr 4fr;
  }

  .equipe__mot {
    margin: 9rem 0 0 -8rem;
  }
}

.equipe__mot .script {
  font-size: 2.2rem;
}

.equipe__titre {
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.15;
}

.equipe__mot p {
  color: var(--c-encre-douce);
}

/* --- À propos : les principes ------------------------------------------ */

.principes {
  display: grid;
}

@media (min-width: 800px) {
  .principes {
    grid-template-columns: repeat(3, 1fr);
  }

  .principe + .principe {
    border-left: 1px solid var(--c-pierre);
  }
}

@media (max-width: 799px) {
  .principe + .principe {
    border-top: 1px solid var(--c-pierre);
  }
}

.principe {
  padding: var(--e-5) var(--e-6);
  text-align: center;
}

.principe__chiffre {
  display: block;
  margin-bottom: var(--e-3);
  font-family: 'Cormorant Garamond Statique', var(--f-titre);
  font-size: 4rem;
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-bleu-volet);
}

.principe__titre {
  margin-bottom: var(--e-2);
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 600;
}

.principe__texte {
  max-width: 18rem;
  margin-inline: auto;
  color: var(--c-encre-douce);
}