/* ═══════════════════════════════════════════════════════════════
   Son et lumière 2027 — Château de Pont-Rémy
   Codes du site de l'édition 2025 (chateaudepontremy.fr, juillet 2025) :
   titre manuscrit Bilbo Swash Caps, texte Albert Sans, or #efcf26,
   bouton contour blanc arrondi. Le fond, lui, a changé de camp : la nuit
   ne dure que le temps de l'en-tête, et tout ce qui suit est sur papier
   clair. Les couleurs du thème sombre sont simplement redéfinies plus
   bas, sur « .bloc, .pied ».
   Ce qui le distingue des Zhironloins (noir, fond pailleté, jaune vif,
   capitales condensées) : la vraie photo du château en ouverture et le
   titre manuscrit.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Nuit bleutée plutôt que noir d'encre : l'en-tête donne le ton, le
     reste de la page le prolonge sans tomber dans le trou noir. */
  --noir:        #1b1b25;   /* fond des sections */
  --nuit:        #24242f;   /* sections alternées */
  --carte:       #2e2e3b;
  --champ:       #1f1f2a;

  --blanc:       #ffffff;
  --texte:       #d6d5dd;
  --doux:        #a9a8b4;

  --or:          #efcf26;   /* or 2025 */

  --filet:       rgba(255, 255, 255, .13);
  --filet-fort:  rgba(255, 255, 255, .28);
  --rouge:       #f08c78;

  --script: "Bilbo Swash Caps", "Segoe Script", cursive;
  --sans:   "Albert Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --rayon: 15px;            /* arrondi des boutons 2025 */
  --rayon-carte: 6px;
  --rythme: clamp(64px, 9vw, 128px);
}

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

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

body {
  margin: 0;
  background: #f7f5ef;
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
}

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

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--or); color: var(--noir); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.saut {
  position: absolute; left: -999px; top: 8px; z-index: 50;
  background: var(--or); color: var(--noir);
  padding: 10px 18px; border-radius: var(--rayon-carte);
}
.saut:focus { left: 12px; }

.cadre { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.cadre--etroit { width: min(760px, calc(100% - 48px)); }

/* ── Haut de page, posé sur la photo ──────────────────────────── */

.haut {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  border-bottom: 1px solid var(--filet);
}
/* La barre du haut court d'un bord à l'autre : le logo se cale à gauche
   de l'écran, le lien à droite, sans la colonne centrale du reste de la
   page. */
.haut .cadre { width: 100%; padding-inline: clamp(18px, 2.6vw, 46px); }
.haut__ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
}
/* Logo fourni en traits noirs sur fond transparent : passé en blanc. */
.marque img { height: 58px; width: auto; filter: brightness(0) invert(1); }
.haut__lien {
  font: 600 13px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--blanc);
  padding: 12px 0; border-bottom: 1px solid var(--or);
}
.haut__lien:hover { color: var(--or); }

/* ── Accueil : la photo du lieu en plein cadre, assombrie ─────── */

/* L'en-tête ne prend volontairement PAS toute la hauteur de l'écran :
   l'accueil du site, lui, est plein écran. Si les deux l'étaient, on
   aurait l'impression de ne pas avoir bougé en arrivant ici. La suite de
   la page doit dépasser dès le premier coup d'œil. */
.accueil {
  position: relative;
  display: flex; align-items: center;
  /* La hauteur suit à la fois l'écran et sa largeur : sur un écran très
     large, un bandeau calculé sur le seul contenu devient une fente
     horizontale mal proportionnée. Jamais plein écran pour autant — la
     suite de la page doit rester visible. */
  min-height: clamp(460px, min(72vh, 56vw), 780px);
  padding-block: 112px 74px;
  overflow: hidden;
  background: var(--noir);
}
.accueil__photo { position: absolute; inset: 0; margin: 0; }
/* Même façade, même nuit et mêmes projecteurs que la page d'accueil :
   on doit sentir qu'on vient d'ouvrir la même porte. */
.accueil__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 26%;
  filter: brightness(.54) saturate(.78) contrast(1.1);
}
/* Voile uni : le texte est centré, donc posé sur la pierre claire des
   ruines. Mesuré pour que le blanc y reste lisible. */
.accueil__photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(74% 58% at 50% 44%, rgba(12, 16, 30, 0) 0%, rgba(8, 10, 20, .56) 62%, #070910 100%),
    linear-gradient(to bottom, rgba(8, 11, 22, .10) 38%, rgba(30, 28, 34, .62) 78%, rgba(150, 145, 140, .86) 94%, #f7f5ef 100%);
}

/* Les projecteurs : un chaud à gauche, un froid à droite, un halo au centre. */
.accueil__photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 20% 64%, rgba(255, 168, 56, .26) 0%, rgba(255, 168, 56, 0) 70%),
    radial-gradient(54% 58% at 82% 58%, rgba(118, 122, 255, .20) 0%, rgba(118, 122, 255, 0) 72%),
    radial-gradient(46% 42% at 50% 46%, rgba(255, 238, 196, .20) 0%, rgba(255, 238, 196, 0) 72%);
}
.accueil__photo figcaption {
  position: absolute; right: 24px; bottom: 20px; z-index: 4;
  font: italic 400 14px/1.4 var(--sans);
  color: rgba(255, 255, 255, .72);
}

/* L'en-tête a sa propre largeur : à cette taille de texte, la colonne
   de 1120 px coupait le chapeau en deux lignes. */
.accueil .cadre { width: min(1440px, calc(100% - 48px)); }
.accueil__grille { position: relative; z-index: 3; }
.accueil__texte { text-align: center; }

/* Échelle du bloc d'en-tête, du plus discret au plus fort :
   la ligne d'identité, le titre, la phrase, puis les dates et le bouton.
   Deux groupes : on présente, puis on donne le concret. L'écart entre
   les deux groupes est le plus grand du bloc. */
.surtitre {
  margin: 0 0 clamp(16px, 1.5vw, 28px);
  font: 600 clamp(11px, .82vw, 15px)/1.8 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--or);
}
.surtitre span + span::before { content: "·"; margin: 0 .7em; }

.accueil__titre {
  margin: 0 0 clamp(18px, 1.8vw, 32px);
  font: 400 clamp(46px, 6vw, 124px)/.98 var(--script);
  color: var(--blanc);
}

.accueil__chapeau {
  margin: 0 auto;
  font: 300 clamp(18px, 1.55vw, 26px)/1.62 var(--sans);
  color: #e4e3e8;
}

/* Les dates : une seule ligne, exactement comme sur la page d'accueil.
   Un tableau de nombres au milieu de la photo faisait tache, et de gros
   chiffres prenaient le pas sur le titre. */
.dates {
  margin: clamp(32px, 2.9vw, 52px) auto clamp(24px, 2.1vw, 38px);
  font: 400 clamp(13px, 1.1vw, 20px)/1.6 var(--sans);
  letter-spacing: .16em;
  color: var(--texte);
}
.dates span { white-space: nowrap; }
.dates span + span::before {
  content: "·";
  margin: 0 .7em;
  color: var(--or);
}

/* ── Boutons : contour blanc arrondi, comme en 2025 ───────────── */

/* Dans l'en-tête, le bouton grandit avec le reste du bloc. */
.accueil .bouton {
  padding: clamp(15px, 1.2vw, 19px) clamp(28px, 2.1vw, 40px);
  font-size: clamp(13px, .95vw, 15px);
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px;
  background: transparent; color: var(--blanc);
  border: 2px solid var(--blanc); border-radius: var(--rayon);
  font: 600 14px/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.bouton:hover { border-color: var(--or); color: var(--or); }
.bouton--or { border-color: var(--or); color: var(--or); }
.bouton--or:hover { background: var(--or); color: var(--noir); }
.bouton--plein { width: 100%; padding-block: 19px; background: var(--or); color: var(--noir); }
.bouton--plein:hover { background: transparent; color: var(--or); }
.bouton[disabled] { opacity: .55; cursor: progress; }

/* ── Du sombre au clair ───────────────────────────────────────────
   L'en-tête est une nuit de spectacle ; tout ce qui suit est sur papier.
   Les mêmes noms de couleurs sont simplement redéfinis ici : chaque
   règle écrite pour le thème sombre suit toute seule. « Blanc » devient
   l'encre, et l'or vif devient un or lisible sur clair. */
.bloc, .pied {
  --noir:       #f7f5ef;   /* fond des sections */
  --nuit:       #efece4;   /* sections alternées */
  --carte:      #ffffff;
  --champ:      #ffffff;
  --blanc:      #17161d;   /* l'encre */
  --texte:      #3f3e49;
  --doux:       #6d6c77;
  --or:         #8a6d00;   /* l'or du thème sombre est illisible sur papier */
  --filet:      rgba(23, 22, 29, .13);
  --filet-fort: rgba(23, 22, 29, .26);

  /* Sans cette ligne, les paragraphes garderaient le gris clair hérité
     du thème sombre : illisible sur papier. */
  color: var(--texte);
}

/* Sur papier, la carte du formulaire doit rester plus claire que la page,
   et le bouton d'envoi garder l'or vif : c'est l'action de la page. */
.bloc .formulaire,
.bloc .merci {
  --fond-clair: #ffffff;
  box-shadow: 0 14px 44px rgba(23, 22, 29, .07);
}
.bloc .bouton--plein {
  background: #efcf26;
  border-color: #efcf26;
  color: #17161d;
}

/* ── Blocs de contenu ─────────────────────────────────────────── */

.bloc { padding-block: var(--rythme); background: var(--noir); }
/* Section alternée : un papier légèrement plus chaud que le reste. */
.bloc--papier {   /* nom conservé : section alternée */
  background: var(--nuit);
  border-block: 1px solid var(--filet);
}

.bloc__tete {
  max-width: 1000px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.bloc__tete h2 {
  margin: 0;
  font: 400 clamp(48px, 7vw, 80px)/1 var(--script);
  color: var(--blanc);
}
.bloc__sous {
  margin: 14px 0 0;
  font: 300 clamp(17px, 1.9vw, 20px)/1.5 var(--sans);
  color: var(--doux);
}
.bloc__sous::after {
  content: "";
  display: block; width: 44px; height: 2px;
  margin: 24px auto 0;
  background: var(--or);
}

/* Six ingrédients : six cartes identiques, trois par ligne */
.ingredients {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.carte {
  display: flex; flex-direction: column;
  padding: 30px 30px 34px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
}
.carte__numero {
  font: 300 34px/1 var(--sans);
  letter-spacing: .04em;
  color: var(--or);
}
.carte__titre {
  margin: 16px 0 10px;
  font: 600 21px/1.25 var(--sans);
  color: var(--blanc);
}
.carte p { margin: 0; font-size: 16px; line-height: 1.65; }

/* Cinq façons de s'impliquer : lignes identiques, façon programme */
.roles {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 920px;
  border-top: 1px solid var(--filet-fort);
}
.role {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px 28px; align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--filet-fort);
}
.role__numero {
  font: 300 30px/1.1 var(--sans);
  color: var(--or);
}
.role__titre {
  margin: 0 0 8px;
  font: 600 clamp(20px, 2.3vw, 24px)/1.25 var(--sans);
  color: var(--blanc);
}
.role__corps p { margin: 0; max-width: 58ch; }
.role__moment {
  align-self: start; white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid rgba(239, 207, 38, .55); border-radius: var(--rayon);
  font: 600 12px/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--or);
}

/* ── Formulaire, sur fond clair ───────────────────────────────── */
/* Carte claire posée sur la section sombre : on y lit et on y écrit plus
   facilement. Les couleurs sont redéfinies localement pour cette carte. */

.formulaire, .merci {
  --fond-clair:  #f7f5ef;
  --encre:       #1b1a22;
  --encre-texte: #3b3a45;
  --encre-douce: #66656f;
  --trait:       rgba(27, 26, 34, .16);
  --trait-fort:  rgba(27, 26, 34, .30);
  --or-encre:    #8a6d00;   /* or assombri, lisible sur fond clair */
  --erreur:      #b3321e;
  background: var(--fond-clair);
  color: var(--encre-texte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
}

.formulaire {
  display: grid; gap: 30px;
  padding: clamp(26px, 4.5vw, 52px);
}
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }

.etiquette {
  display: block; padding: 0; margin-bottom: 10px;
  font: 600 13px/1.4 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre);
}
.oblig { color: var(--or-encre); }
.aide { margin: -4px 0 12px; font-size: 14px; color: var(--encre-douce); }

.saisie {
  display: block; width: 100%;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-carte);
  font: 400 16px/1.4 var(--sans);
  color: var(--encre);
  color-scheme: light;
}
.saisie:hover { border-color: rgba(27, 26, 34, .5); }
.saisie:focus { outline: 2px solid var(--or-encre); outline-offset: 1px; border-color: var(--or-encre); }

.choix-ligne { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.choix-pile { display: grid; gap: 10px; }
.choix { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; color: var(--encre); }
.choix input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  accent-color: var(--or); color-scheme: light; cursor: pointer;
}
.choix--bloc {
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-carte);
}
.choix--bloc:has(input:checked) { border-color: var(--or-encre); background: #fdf8e1; }
.choix--haut { align-items: flex-start; }
.choix--haut input { margin-top: 3px; }
.choix__texte { font-size: 14.5px; line-height: 1.6; color: var(--encre-douce); }

.champ.est-invalide .saisie,
.champ.est-invalide .choix--bloc { border-color: var(--erreur); }
.erreur { display: none; margin: 8px 0 0; font-size: 14px; color: var(--erreur); }
.erreur.est-visible { display: block; }

.envoi { display: grid; gap: 14px; }
.statut { margin: 0; min-height: 1.5em; text-align: center; font-size: 15px; color: var(--erreur); }
.formulaire .bouton--plein { border-color: var(--or); }
.formulaire .bouton--plein:hover { background: var(--encre); border-color: var(--encre); color: var(--or); }

.merci {
  padding: clamp(36px, 6vw, 68px) clamp(24px, 5vw, 56px);
  text-align: center;
}
.merci:focus { outline: none; }
.merci__surtitre {
  margin: 0 0 8px;
  font: 600 13px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--or-encre);
}
.merci__titre { margin: 0 0 14px; font: 400 clamp(46px, 6vw, 64px)/1 var(--script); color: var(--encre); }
.merci p { margin: 0 auto 30px; max-width: 44ch; }
.merci .bouton { color: var(--encre); border-color: var(--encre); }
.merci .bouton:hover { background: var(--encre); color: var(--or); }

/* ── Pied de page ─────────────────────────────────────────────── */

.pied {
  padding-block: 48px 56px;
  text-align: center;
  background: var(--nuit);
  border-top: 1px solid var(--filet);
}
.pied__nom { margin: 0 0 6px; font: 400 34px/1.1 var(--script); color: var(--blanc); }
.pied__ligne { margin: 0; font-size: 15px; color: var(--doux); }
.pied__ligne a { color: var(--or); text-decoration: none; }
.pied__ligne a:hover { text-decoration: underline; }
.pied__ligne + .pied__ligne { margin-top: 4px; }

/* Année dans une phrase : écrite droite et en chiffres normaux. */
.chiffre { font-style: normal; }

/* ── Adaptatif ────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .cadre, .cadre--etroit { width: calc(100% - 36px); }
  .marque img { height: 50px; }
  .surtitre span { display: block; }
  .surtitre span + span::before { content: none; }
  .accueil { padding-block: 120px 90px; }
  .accueil__photo figcaption { right: 18px; bottom: 16px; font-size: 13px; }

  .role { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 16px; padding: 26px 0; }
  .role__numero { font-size: 26px; }
  .role__moment { grid-column: 2; justify-self: start; margin-top: 8px; }


  .deux { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ingredients { grid-template-columns: 1fr; }
  .haut__lien { font-size: 11px; }

  /* Les trois dates passent l'une sous l'autre, comme sur l'accueil. */
  .dates span { display: block; }
  .dates span + span::before { content: none; }
  .dates span + span { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}