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

/* ============================================================
   Style repris du site de la Province de France (icrspfrance.fr,
   template ja_justitia) : corps en Servus 17px justifié, titres en
   Goudy Modern, italiques Goudy Oldstyle, palette bleu nuit #171c2b /
   dégradés #233155 → #646E86 / or #ab9460, boutons à dégradé clair qui
   s'inverse en dégradé foncé au survol. Polices hébergées localement.
   ============================================================ */

/* Titres (mêmes fichiers que le site de la Province : goudymodern) */
@font-face {
  font-family: 'GoudyModern';
  src: url('goudy-modern-regular.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GoudyOldstyle';
  src: url('goudy-oldstyle-italic.woff2') format('woff2');
  font-weight: normal; font-style: italic; font-display: swap;
}
/* Corps de texte : Servus, la police du site de la Province */
@font-face {
  font-family: 'Servus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Servus-Regular.woff2') format('woff2'),
       url('fonts/Servus-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Servus'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Servus-RegularItalic.woff2') format('woff2'),
       url('fonts/Servus-RegularItalic.woff') format('woff');
}
@font-face {
  font-family: 'Servus'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Servus-SemiBold.woff2') format('woff2'),
       url('fonts/Servus-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Servus'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/Servus-SemiBoldItalic.woff2') format('woff2'),
       url('fonts/Servus-SemiBoldItalic.woff') format('woff');
}
@font-face {
  font-family: 'Servus'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Servus-Bold.woff2') format('woff2'),
       url('fonts/Servus-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Servus'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/Servus-BoldItalic.woff2') format('woff2'),
       url('fonts/Servus-BoldItalic.woff') format('woff');
}

:root {
  /* Palette du site de la Province de France */
  /* Bleus ÉCLAIRCIS le 01/08/2026, à la demande de Jean : « le bleu du site est
     un peu trop foncé (la barre du menu, etc.), fais-le plus clair, un peu
     comme sur icrss.org ». Ce sont exactement les deux bleus d'icrss.org
     (--navy et --navy-dark de son site.css), pour que les deux sites de
     l'Institut ne se répondent pas à deux tons d'écart.
     Anciennes valeurs : #233155 et #171c2b, reprises du template Joomla
     ja_justitia, où le bleu nuit tirait vers le noir. */
  --navy:        #2b3550;   /* bleu des dégradés (état survol, encarts) */
  --navy-dark:   #1d2540;   /* bleu nuit : titres, pied de page, bandeaux */
  --navy-lt:     #646E86;   /* bleu-gris : second ton des dégradés, textes discrets */
  --gold:        #ab9460;   /* or Province */
  --gold-light:  #e4c06a;   /* or clair (dégradé doré) */
  --pale:        #dcebff;   /* bleu pâle (état repos des boutons) */
  /* Fond crème chaud (31/07/2026, demande de Jean, maquette « C » retenue,
     inspirée de la billetterie du Puy du Fou). Les cartes restent BLANCHES :
     c'est le contraste entre les deux qui détache le formulaire du fond. */
  --bg:          #faf4ea;
  --card:        #ffffff;
  --text:        #444444;   /* couleur de corps du site de la Province */
  --muted:       #646E86;
  --border:      #e4e4e4;
  --red:         #c0392b;
  --green:       #27ae60;
  --shadow-soft: 0 0 10px rgba(0,0,0,.19);
  /* Typographie du site de la Province : Servus pour les paragraphes et le
     corps de texte, sans-serif pour l'appareillage (formulaires, étiquettes,
     petites descriptions, boutons) — demande Jean 11/07 */
  --font-title:  'GoudyModern', 'Goudy Modern', Georgia, 'Times New Roman', serif;
  --font-italic: 'GoudyOldstyle', Georgia, serif;
  --font-body:   'Servus', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:     system-ui, -apple-system, 'Segoe UI', sans-serif;
  --navbar-h:    46px;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

/* ─── Filigrane du médaillon (31/07/2026, maquette « C ») ────────────────────
   Le médaillon de la Maison, en très grand et coupé par le bord GAUCHE de
   l'écran, comme le losange de la billetterie du Puy du Fou. Coupé, il cesse
   d'être un logo posé sur la page et devient une texture : c'est toute la
   différence entre les deux (constaté en comparant les maquettes A et C).

   ⚠ MASQUÉ PAR DÉFAUT, montré ensuite en @media (min-width). C'est
   volontairement dans ce sens : le bloc @media qui traite le téléphone vit au
   MILIEU de ce fichier et écraserait une règle posée ici (piège déjà rencontré
   sur l'app de la Province). En réglant d'abord le téléphone, puis en ajoutant
   l'écran large après, plus rien ne peut être écrasé en silence.

   Sur écran étroit, le filigrane passerait derrière le texte : un fond ne doit
   jamais gêner la lecture d'un formulaire. */
body::before { content: none; }

/* Le contenu passe AU-DESSUS du filigrane. Sans cela, un fond de section
   opaque le recouvrirait par endroits et pas à d'autres, ce qui se verrait. */
.site-header, .site-navbar, main, .site-footer { position: relative; z-index: 1; }

@media (min-width: 900px) {
  body::before {
    content: '';
    position: fixed;                 /* fixe : il ne défile pas, l'effet reste calme */
    left: -280px; top: 50%;
    transform: translateY(-50%);
    width: 780px; height: 789px;     /* proportions exactes du fichier (200 × 202) */
    background: url('logo-blue-200.png') no-repeat center / contain;
    opacity: .06;
    z-index: 0;
    pointer-events: none;            /* jamais entre le doigt et un champ */
  }
}

/* À l'impression, ni le fond crème ni le filigrane : une confirmation
   d'inscription imprimée reste noir sur blanc, et ne vide pas la cartouche. */
@media print {
  body { background: #fff; }
  body::before { display: none; }
}

/* Titres : Goudy Modern en graisse normale (h5-h6 restent en Servus),
   couleur bleu nuit, sans filet souligné — comme sur icrspfrance.fr */
h1 { font-family: var(--font-title); font-weight: normal; font-size: 2.2rem;
     line-height: 1.2; color: var(--navy-dark); margin-bottom: 1.4rem; }
h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.45rem;
     line-height: 1.2; color: var(--navy-dark); margin: 0 0 .75rem; }
h3 { font-family: var(--font-title); font-weight: normal; font-size: 1.15rem;
     line-height: 1.2; color: var(--navy-dark); margin: 1.25rem 0 .4rem; }

/* Paragraphes justifiés, comme sur le site de la Province */
p { text-align: justify; }
.site-footer p, .confirm-box p, .text-center p, .event-meta ~ p { text-align: left; }

a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .canons-link:hover { text-decoration: none; }
a:hover { color: var(--navy-dark); }

/* ---- Header (masthead façon Province : image assombrie bleu nuit,
        titre Goudy Modern, sous-titre Goudy italique) ---- */
.site-header {
  background: var(--navy-dark) url('hero.jpg') center / cover no-repeat;
  position: relative;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.75rem 2rem calc(2.75rem + var(--navbar-h));
}
.site-header::before {
  content: ''; position: absolute; inset: 0;
  /* Voile allégé le 01/08/2026 (0,65 → 0,50) et reteinté sur le nouveau bleu.
     C'est lui, plus encore que la couleur de fond, qui rendait la bannière
     sombre : la barre de menu est transparente et se lit PAR-DESSUS ce voile,
     d'où l'impression de menu presque noir dont Jean parlait. Il ne peut pas
     descendre beaucoup plus bas : le titre est en blanc sur photo, et sans
     assombrissement suffisant il devient illisible sur les zones claires. */
  background: rgba(29,37,64,.50);
}
.site-header > * { position: relative; z-index: 1; }

.site-logo-link { flex-shrink: 0; z-index: 1; }
.site-logo { height: 90px; width: auto; display: block; filter: drop-shadow(0 1px 6px rgba(0,0,0,.55)); }

.site-header-title { text-align: left; color: #fff; }
.site-header-name {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 400;
  letter-spacing: .03em; line-height: 1.2;
  text-shadow: 0 0 10px rgba(0,0,0,.6);
}
.site-header-institute {
  display: block;
  font-family: var(--font-italic);
  font-style: italic; font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: rgba(255,255,255,.88); margin-top: .4rem;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
  letter-spacing: .02em;
}
.hdr-institute-short { display: none; }

/* Espace des chanoines */
.site-nav { position: absolute; top: .75rem; right: 1.25rem; z-index: 1; }
.canons-link {
  font-family: var(--font-ui); font-size: .74rem;
  color: rgba(255,255,255,.65); text-decoration: none;
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: 3px;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
.canons-link:hover { color: #fff; border-color: #fff; }
.canons-link--active { color: #fff; border-color: rgba(255,255,255,.8); }

@media (max-width: 600px) {
  .site-header { padding: 1.5rem 1rem calc(1.5rem + var(--navbar-h)); gap: 1rem; min-height: 140px; justify-content: flex-start; }
  .site-logo { height: 60px; }
  .site-header-name { font-size: 1.5rem; }
  .site-header-institute { font-size: 1rem; }
  .hdr-institute-full { display: none; }
  .hdr-institute-short { display: inline; }
}

/* ---- Page d'accueil : intro + annonces + infos ---- */
.home-hero-image { margin-bottom: 1.75rem; }
.home-hero-image img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 10px; display: block; box-shadow: 0 6px 18px rgba(29,37,64,.14); }
.home-intro { margin-bottom: 2rem; line-height: 1.75; }
.home-intro p { margin-bottom: .75rem; }

.announcement-card {
  background: #fffbf0;
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.announcement-title {
  font-family: var(--font-title);
  font-size: 1.35rem; font-weight: normal;
  color: var(--navy-dark); margin: 0 0 .6rem;
}
.announcement-body { line-height: 1.7; margin-bottom: .9rem; }
.announcement-body p { margin-bottom: .5rem; }
.announcement-cta { margin-top: .25rem; }

.announcement-img {
  float: right;
  width: 50%;
  height: auto;
  margin: .2rem 0 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(29,37,64,.12);
  display: block;
}
.announcement-card::after { content: ''; display: table; clear: both; }

@media (max-width: 580px) {
  .announcement-img { float: none; width: 100%; margin: 0 0 1rem 0; }
}

.home-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.home-info-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
}
.home-info-block h2 {
  font-size: 1rem; margin-bottom: .6rem;
  border-bottom: 1px solid var(--border); padding-bottom: .4rem;
}
.home-info-block p { margin-bottom: .4rem; line-height: 1.65; }
.home-info-block img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: .5rem 0; }

.chapel-schedule { display: flex; flex-direction: column; gap: .9rem; }
.chapel-day-name {
  font-family: var(--font-title); font-size: .9rem;
  font-weight: 400; color: var(--navy);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .3rem;
}
.chapel-hour {
  display: flex; gap: .75rem; align-items: baseline;
  padding: .15rem 0 .15rem 1.1rem; border-bottom: 1px solid #f0ece4;
  font-size: .9rem;
}
.chapel-hour:last-child { border-bottom: none; }
.chapel-time { flex-shrink: 0; width: 52px; color: var(--navy); font-variant-numeric: tabular-nums; }
.chapel-office { color: var(--text); }

/* ---- Footer : bleu nuit à 3 colonnes, comme icrspfrance.fr ----
   La couleur était écrite en dur ici, si bien qu'éclaircir la palette laissait
   le pied de page à l'ancien ton : la page se serait terminée deux crans plus
   sombre qu'elle ne commence. Elle passe par la variable (01/08/2026). */
.site-footer {
  background: var(--navy-dark); color: rgba(255,255,255,.75);
  padding: 2.5rem 1.5rem 2rem;
  font-size: .9rem; font-family: var(--font-ui);
  margin-top: 3rem;
}
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: #fff; }
.site-footer p { margin: 0 0 .15rem; text-align: inherit; }
.site-footer-cols {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 2rem; align-items: center;
}
.site-footer-col--left  { text-align: left; }
.site-footer-col--left h4 {
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem;
  color: #fff; margin: 0 0 .5rem; line-height: 1.35;
}
.site-footer-col--center { text-align: center; }
.site-footer-logo { max-width: 110px; height: auto; display: inline-block; opacity: .92; }
.site-footer-col--right { text-align: right; line-height: 2; }
@media (max-width: 640px) {
  .site-footer-cols { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
  .site-footer-col--left, .site-footer-col--right { text-align: center; }
}

/* ---- Layout ---- */
main { min-height: 60vh; }

.container {
  max-width: 800px; margin: 2rem auto;
  padding: 0 1rem;
}
/* Colonne élargie du formulaire d'inscription (31/07/2026, demande du gérant).
   Réservée à cette page : les champs y sont disposés deux par deux et
   gagnent à respirer. Le reste du site garde 800 px, car un paragraphe de
   Servus justifié à 17 px dépasse alors 90 caractères par ligne, ce qui se lit
   moins bien, pas mieux. Élargir .container pour tout le monde aurait dégradé
   l'accueil et les mentions légales. */
.container--form { max-width: 940px; }

/* ---- Events list ---- */
.events-list { display: flex; flex-direction: column; gap: 1.1rem; }

/* Tuile compacte (demande du confrère 07/2026) : titre pleine largeur tout en
   haut (au-dessus de l'image, demande Jean 11/07), puis une rangée avec la
   vignette et le texte à côté. Coins arrondis et ombre douce façon Province. */
.event-card {
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--navy); border-radius: 10px;
  box-shadow: var(--shadow-soft);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Titre en bandeau pleine largeur */
.event-card-header {
  margin: 0; padding: .9rem 1.4rem .1rem;
  width: 100%;
}
/* Rangée image + contenu sous le titre */
.event-card-main { display: flex; flex-direction: row; }
.event-card--mariage      { border-left-color: #e07018; }
.event-card--salesienne   { border-left-color: #1a4ab5; }
.event-card--provinciale  { border-left-color: #1e8a3a; }
.event-card--recollection { border-left-color: #7c3aed; }
.event-card--maries       { border-left-color: #c92678; }
.event-card--autre        { border-left-color: #7c4d1a; }
.event-card--full { border-left-color: #bbb; opacity: .7; }

/* Vignette mobile : petit carré arrondi, le texte s'affiche à côté */
.event-card-image { flex-shrink: 0; padding: .5rem 0 .9rem .9rem; }
.event-card-image img {
  width: 96px; height: 96px; object-fit: cover; display: block;
  border-radius: 8px; box-shadow: 0 4px 12px rgba(29,37,64,.14);
}

/* Écran large : vignette plus grande, toujours avec le texte à côté */
@media (min-width: 580px) {
  .event-card-image { padding: .6rem 0 1.1rem 1.1rem; }
  .event-card-image img { width: 170px; height: 170px; }
}

/* Colonne, pour que le pied de tuile puisse descendre EN BAS (voir
   .event-footer). Le corps s'étire déjà à la hauteur de la vignette, qui est
   souvent plus haute que le texte ; en bloc simple, ses enfants se posaient les
   uns sous les autres et le pied restait accroché au dernier paragraphe. */
.event-card-body {
  padding: .5rem 1.4rem 1.1rem; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

.event-meta {
  display: flex; gap: .65rem; align-items: center;
  flex-wrap: wrap; margin-bottom: .4rem;
}
.event-type {
  font-family: var(--font-ui); font-size: .72rem;
  background: var(--navy); color: #fff;
  padding: .1rem .45rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}
.event-type--mariage      { background: #e07018; }
.event-type--salesienne   { background: #1a4ab5; }
.event-type--provinciale  { background: #1e8a3a; }
.event-type--recollection { background: #7c3aed; }
.event-type--maries       { background: #c92678; }
.event-type--autre        { background: #7c4d1a; }
.event-audience {
  font-family: var(--font-ui); font-size: .72rem;
  background: #dce8f5; color: #1a4080;
  padding: .1rem .45rem; border-radius: 3px;
}
.event-dates { font-family: var(--font-ui); font-size: .85rem; color: var(--muted); }

.event-title { font-size: 1.3rem; margin-bottom: .2rem; }
.event-location { font-size: .87rem; color: var(--muted); font-family: var(--font-ui); margin-bottom: .4rem; }
.event-desc { font-size: .93rem; margin-bottom: .6rem; color: var(--text); }

/* Le pied de tuile (prix, places restantes, bouton) se cale EN BAS de la tuile,
   demande de Jean (01/08/2026). Sur une retraite au texte court, il remontait
   sous la dernière ligne pendant que la vignette, plus haute, descendait bien
   plus bas : le bouton flottait au milieu du cadre.
   « margin-top: auto » absorbe toute la hauteur libre du corps et pousse le
   pied contre le bas. Le padding prend le relais de l'ancienne marge : quand le
   texte est assez long pour tout remplir, la marge automatique vaut zéro, et
   sans lui le pied viendrait toucher le paragraphe du dessus. */
.event-footer {
  display: flex; justify-content: space-between;
  align-items: flex-end;
  margin-top: auto; padding-top: .9rem;
  flex-wrap: wrap; gap: .5rem;
}
.event-price { font-family: var(--font-ui); font-size: .88rem; color: var(--muted); }

/* ---- Buttons ---- */
/* Boutons du site de la Province (mécanisme exact du a.button
   d'icrspfrance.fr) : au repos, dégradé CLAIR (blanc → bleu pâle) avec texte
   sombre et petite ombre ; au survol, dégradé FONCÉ (#233155 → #646E86) avec
   texte blanc. Variante or : dégradé #ab9460 → #e4c06a. */
/* ---- Boutons (refaits le 24/07/2026, demande Jean) --------------------------
   Plus de dégradé bleu ciel qui s'inverse au survol : des boutons classiques,
   à fond uni, bordure fine et survol qui assombrit simplement.
     .btn         bouton courant (secondaire) : clair, discret
     .btn--gold   action principale : bleu nuit plein
     .btn--ghost  / .btn--outline : contour seul
     .btn--danger action destructive : rouge plein
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none; padding: .45rem 1rem;
  border-radius: 4px; font-family: var(--font-ui);
  font-size: .92rem; line-height: 1.4; cursor: pointer;
  color: var(--navy-dark);
  background: #f2f5fa;
  border: 1px solid #c8d2e0;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .btn:focus {
  background: var(--pale);
  border-color: var(--navy);
  color: var(--navy-dark);
}
.btn:active { background: #cddcf0; }
.btn[disabled], .btn.is-disabled {
  background: #f0f0f0; border-color: #ddd; color: #9aa1ab;
  cursor: not-allowed; pointer-events: none;
}

/* Action principale : bleu nuit plein */
.btn--gold {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}
.btn--gold:hover, .btn--gold:focus {
  color: #fff;
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}
.btn--gold .text-muted, .btn--gold:hover .text-muted { color: rgba(255,255,255,.75); }

.btn--ghost, .btn--outline {
  background: transparent; border: 1px solid var(--navy); color: var(--navy);
}
.btn--ghost:hover, .btn--outline:hover { background: var(--navy); color: #fff; }

.btn--sm { padding: .28rem .65rem; font-size: .82rem; }

.btn--danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn--danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: .2rem .55rem;
  border-radius: 3px; font-family: var(--font-ui);
  font-size: .78rem; font-weight: 600;
}
.badge--full      { background: #e8e8e8; color: var(--muted); }
/* Places restantes (01/08, demande de Jean). Bleu pâle et non vert : ce n'est
   pas un succès, c'est un renseignement. Il voisine le bouton d'inscription,
   il ne doit pas lui disputer le regard. */
.badge--seats     { background: var(--pale); color: var(--navy-dark); }

/* Le décompte se tient JUSTE À GAUCHE du bouton, tous deux en bas à droite de
   la tuile (demande de Jean, 01/08/2026).
   Sans cette marge, le pied de tuile est un flex en « space-between » à trois
   enfants : le prix se cale à gauche, le bouton à droite, et le décompte se
   retrouve au MILIEU, à mi-chemin des deux, sans rapport visible avec le bouton
   qu'il renseigne. La marge automatique absorbe tout l'espace libre à sa
   gauche : le décompte rejoint le bouton et le couple part à droite.
   Écrit ici plutôt que sur .event-footer pour ne rien changer aux tuiles sans
   décompte, ni au badge « Complet », qui se placent déjà bien. */
.event-footer .badge--seats { margin-left: auto; }

.badge--waitlist  { background: #fff3cd; color: #7a5c00; }
.badge--draft     { background: #e8e8e8; color: #555; }
.badge--published { background: #d5f5e3; color: #1e8449; }
.badge--closed    { background: #fdebd0; color: #a04000; }
.badge--cancelled { background: #fadbd8; color: #922b21; }
.badge--canons    { background: #e8e0f7; color: #5b2d91; }
.badge--super     { background: var(--navy); color: #fff; }
.badge--pending   { background: #fff3cd; color: #7a5c00; }

/* ---- Event info box (page inscription) ---- */
.event-info-box {
  background: #eaf1fb; border-left: 4px solid var(--navy);
  border-radius: 0 4px 4px 0; margin-bottom: 1.4rem;
  display: flex; gap: 1.2rem; overflow: hidden;
  align-items: flex-start;
}
.event-info-content { padding: 1rem 1.2rem; flex: 1; min-width: 0; }
.event-info-box h2  { margin: .25rem 0 .4rem; }

.event-info-type {
  font-family: var(--font-ui); font-size: .78rem;
  color: var(--muted); margin: 0 0 .15rem;
}
.event-info-audience {
  font-family: var(--font-ui); font-size: .78rem;
  background: #dce8f5; color: #1a4080;
  padding: .05rem .35rem; border-radius: 3px;
}
.event-info-dates {
  font-family: var(--font-ui); font-size: .88rem;
  color: var(--muted); margin: 0 0 .8rem;
}
.event-info-location {
  font-family: var(--font-ui); font-size: .88rem;
  color: var(--muted); margin: .5rem 0 0;
}
.event-info-price {
  font-family: var(--font-ui); font-size: .9rem;
  color: var(--text); margin: .5rem 0 0; font-weight: 600;
}

/* Thème : encadré doré */
.event-theme {
  border-left: 3px solid var(--gold);
  background: #fffaf2; padding: .6rem .9rem;
  margin: .75rem 0; font-style: italic;
  font-size: .93rem; color: var(--text);
  border-radius: 0 8px 8px 0;
}
/* Encadré « Précisions » : complément affiché sous le thème */
.event-theme-details {
  border-left: 3px solid var(--navy-lt);
  background: #f4f6fa; padding: .6rem .9rem;
  margin: .75rem 0; font-size: .9rem; color: var(--text);
  border-radius: 0 8px 8px 0;
}
.event-preachers {
  font-family: var(--font-ui); font-size: .88rem;
  margin: .5rem 0 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   RUBRIQUES DÉPLIABLES de la page d'inscription (01/08/2026)

   Demande du gérant : replier les informations sous des intitulés, avec un « + »
   qui tourne sur lui-même. Cinq apparences lui ont été soumises en maquette
   (maquettes/accordeon-infos.html) ; Jean a retenu la « A » : un + cerclé d'or,
   qui pivote de 135° et devient une croix.

   ⚠ LE REPLI EST POSÉ PAR JAVASCRIPT, PAS PAR LE CSS. Les corps ne se ferment
     que sous `.acc.is-ready`, classe que le script ajoute au chargement. Un
     visiteur dont le JavaScript ne s'exécute pas voit donc TOUT le contenu,
     déplié, comme avant : sans cette précaution, les horaires d'arrivée et le
     thème de la retraite lui seraient purement et simplement invisibles.
   ──────────────────────────────────────────────────────────────────────────── */
.acc { margin: .9rem 0 0; }
.acc-item + .acc-item { border-top: 1px solid rgba(35,49,85,.12); }

.acc-head {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .5rem 0; text-align: left;
  background: none; border: 0; font: inherit; color: inherit;
  cursor: pointer;
}
.acc-head:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.acc-title {
  flex: 1; min-width: 0;
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--navy-dark);
}

/* Le « + » : deux traits, donc pas de police d'icônes ni d'image à charger. */
.acc-plus {
  position: relative; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold);
  transition: transform .32s ease, background-color .2s ease;
}
.acc-plus::before, .acc-plus::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--gold); border-radius: 1px;
}
.acc-plus::before { width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; }
.acc-plus::after  { width: 1.5px; height: 10px; margin: -5px 0 0 -.75px; }
.acc-head:hover .acc-plus { background: rgba(171,148,96,.12); }
/* 135° et non 45° : le quart de tour supplémentaire se voit, c'est ce
   mouvement que le gérant décrivait (« tourner sur lui-même »). */
.acc.is-ready .acc-item.is-open .acc-plus { transform: rotate(135deg); }

.acc-body-inner {
  padding: .1rem 0 .7rem; font-size: .9rem; line-height: 1.7;
}

/* Fermeture : uniquement quand le script a pris la main. La hauteur est posée
   en ligne par le JS (valeur mesurée) ; ici on ne décrit que l'animation. */
.acc.is-ready .acc-body {
  overflow: hidden; max-height: 0;
  transition: max-height .32s ease;
}

@media (prefers-reduced-motion: reduce) {
  .acc.is-ready .acc-body { transition: none; }
  .acc-plus { transition: none; }
}

/* Mode sombre : le bleu nuit du titre devient illisible sur fond sombre. */
html.dark .acc-title { color: #b0c8e8; }
html.dark .acc-item + .acc-item { border-top-color: rgba(255,255,255,.12); }

/* Photo de la retraite — affichée en entier, sans rognage */
.event-info-img {
  width: 160px; flex-shrink: 0;
  height: auto; display: block;
  align-self: flex-start;
  border-radius: 0 0 10px 0;
}
@media (max-width: 580px) {
  .event-info-box { flex-direction: column; }
  /* Vignette réduite sur mobile (plus d'image pleine largeur) */
  .event-info-img {
    width: 120px; height: 120px; object-fit: cover;
    margin: .9rem 0 0 .9rem; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(29,37,64,.14);
  }
}

/* Encadré maison intégré dans le contenu */
.event-loc-block {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(26,60,110,.18);
  border-radius: 4px;
  padding: .35rem .6rem .35rem .35rem;
  margin-top: .55rem;
  font-family: var(--font-ui);
  font-size: .76rem; line-height: 1.4;
  color: var(--muted);
  max-width: 100%;
}
.event-loc-block strong {
  display: block;
  color: var(--navy);
  font-size: .78rem;
}
.event-loc-thumb {
  width: 56px; height: auto;
  border-radius: 3px; flex-shrink: 0; display: block;
}

/* ---- Notices ---- */
.notice {
  padding: .9rem 1.1rem; border-radius: 4px;
  font-family: var(--font-ui); font-size: .9rem;
  margin-bottom: 1rem;
}
.notice--info    { background: #eaf1fb; border-left: 3px solid var(--navy); }
.notice--warning { background: #fff3cd; border-left: 3px solid #e0a000; color: #664d03; }
.notice--success { background: #d4edda; border-left: 3px solid var(--green); color: #155724; }
.notice--error   { background: #f8d7da; border-left: 3px solid var(--red); color: var(--red); }

/* ---- Forms ---- */
.form-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 4px; padding: 1.1rem 1.4rem;
  margin-bottom: 1.1rem;
}
.form-section h2 { margin-top: 0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 580px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: .8rem; }

.form-group label {
  display: block; font-family: var(--font-ui);
  font-size: .84rem; font-weight: 600; margin-bottom: .28rem;
  color: var(--navy);
}
.form-group label .req { color: var(--red); margin-left: .15rem; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: .45rem .6rem;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--font-ui); font-size: .93rem;
  background: #fff; color: var(--text);
  transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--navy-lt);
  box-shadow: 0 0 0 2px rgba(42,82,152,.12);
}
.form-group textarea { min-height: 75px; resize: vertical; }
.form-group input.has-error,
.form-group select.has-error,
.form-group textarea.has-error { border-color: var(--red); }

.field-error {
  color: var(--red); font-size: .8rem;
  font-family: var(--font-ui); margin-top: .2rem;
}

.check-group {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem;
}
.check-group input[type="checkbox"],
.check-group input[type="radio"] {
  flex-shrink: 0; width: 1rem; height: 1rem;
  margin: 0; cursor: pointer; accent-color: var(--navy);
}
.check-group label {
  font-size: .88rem; font-family: var(--font-ui);
  font-weight: normal; color: var(--text); cursor: pointer;
}

/* ---- Payment options ---- */
.payment-options { display: flex; flex-direction: column; gap: .45rem; }

.payment-option {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.payment-option:has(input:checked) { border-color: var(--navy); background: #eaf1fb; }
.payment-option input[type="radio"] { flex-shrink: 0; margin: 0; accent-color: var(--navy); }
.payment-option-label { font-family: var(--font-ui); font-weight: 600; font-size: .88rem; }
.payment-option-desc  { font-size: .8rem; color: var(--muted); font-family: var(--font-ui); }

/* ---- Price summary ---- */
.price-summary {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: .7rem .9rem;
  font-family: var(--font-ui); font-size: .88rem;
  margin: .75rem 0;
}
.price-summary .total { font-weight: bold; color: var(--navy); margin-top: .4rem; }

/* ---- Companions ---- */
.companion-block {
  border: 1px solid var(--border); border-radius: 4px;
  padding: .9rem 1.1rem; margin-bottom: .65rem;
  position: relative;
}
.companion-block legend {
  font-family: var(--font-ui); font-weight: 600;
  font-size: .9rem; color: var(--navy); padding: 0 .3rem;
}
.companion-remove {
  position: absolute; top: .6rem; right: .6rem;
  background: none; border: 1px solid var(--red);
  color: var(--red); border-radius: 3px;
  font-size: .75rem; padding: .12rem .45rem;
  cursor: pointer; font-family: var(--font-ui);
}
.companion-remove:hover { background: var(--red); color: #fff; }

.btn-add-companion {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; width: 100%;
  background: none; border: 1px dashed var(--navy);
  color: var(--navy); border-radius: 4px;
  padding: .5rem; cursor: pointer;
  font-family: var(--font-ui); font-size: .88rem;
  transition: background .15s;
}
.btn-add-companion:hover { background: #eaf1fb; }

/* ---- Confirmation ---- */
.confirm-box { text-align: center; padding: 1.5rem 0; }
.confirm-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.confirm-box h1 { border: none; padding: 0; }
.confirm-box p { color: var(--muted); margin-top: .5rem; }

/* ---- Utilities ---- */
.text-muted { color: var(--muted); font-size: .88rem; }
/* Texte secondaire dans un bouton : sombre au repos (fond clair),
   clair au survol (fond foncé) */
.btn .text-muted { color: rgba(23,28,43,.6); }
.btn:hover .text-muted { color: rgba(255,255,255,.75); }
.mt-half { margin-top: .4rem; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.25rem; }
.hidden { display: none !important; }
.text-center { text-align: center; }

/* ---- Toggle thème (pill) ---- */
.theme-switch {
  position: relative;
  width: 56px; height: 28px;
  border-radius: 14px;
  border: none; padding: 0;
  cursor: pointer;
  background: #252838;
  flex-shrink: 0;
  transition: background .3s;
  vertical-align: middle;
}
html:not(.dark) .theme-switch { background: #d4dce8; }

.theme-switch::after {
  content: '☽';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #252838;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  transition: transform .3s ease, background .3s, color .3s;
}
html:not(.dark) .theme-switch::after {
  content: '☀';
  transform: translateX(28px);
  background: #374151;
  color: #facc15;
}

/* ---- Dark mode (classe html.dark) ---- */
html.dark {
  --bg:      #1e2538;
  --card:    #27304c;
  --text:    #dcd7d0;
  --muted:   #8fa0b8;
  --border:  #38496a;
  --navy-lt: #7bb3f0;
}
/* Le filigrane en mode sombre (31/07/2026) : le médaillon BLEU disparaîtrait
   dans le bleu nuit du fond. On passe donc au fichier blanc, à une opacité
   plus basse : sur fond sombre, un motif clair ressort davantage à opacité
   égale. Le mode sombre est traité, pas laissé de côté. */
html.dark body::before {
  background-image: url('logo-white-200.png');
  opacity: .04;
}
html.dark h1, html.dark h2, html.dark h3 { color: #b0c8e8; }
html.dark .chapel-day-name, html.dark .chapel-time { color: #b0c8e8; }
html.dark .companion-block legend { color: #b0c8e8; }
html.dark .form-group label { color: #b0c8e8; }

html.dark .announcement-card { background: #2c2214; border-color: #9a7a28; }
html.dark .announcement-title { color: #c8d8f0; }
html.dark .chapel-hour { border-bottom-color: #38496a; }
html.dark .event-info-box { background: #1e2e46; }
html.dark .event-audience,
html.dark .event-info-audience { background: #1e3050; color: #7bb3f0; }
html.dark .event-theme { background: #2a2010; }
html.dark .event-loc-block { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
html.dark .event-loc-block strong { color: #b0c8e8; }

html.dark .notice--info    { background: #122040; color: #7bb3f0; border-color: #1e3860; }
html.dark .notice--warning { background: #2a1e08; color: #c8a041; border-color: #4a3010; }
html.dark .notice--success { background: #102018; color: #4daa70; border-color: #1a4028; }
html.dark .notice--error   { background: #2e1010; color: #e07070; border-color: #501818; }

html.dark .form-section { background: var(--card); border-color: var(--border); }
html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea { background: #1c2440; color: var(--text); border-color: var(--border); }

html.dark .payment-option { border-color: var(--border); }
html.dark .payment-option:has(input:checked) { background: #1e2e46; border-color: #7bb3f0; }

html.dark .btn--ghost,
html.dark .btn--outline { border-color: #7bb3f0; color: #7bb3f0; }
html.dark .btn--ghost:hover,
html.dark .btn--outline:hover { background: #1a3060; color: #fff; }
html.dark .btn-add-companion { border-color: #7bb3f0; color: #7bb3f0; }
html.dark .btn-add-companion:hover { background: #1e2e46; }

html.dark .badge--full,
html.dark .badge--draft     { background: #303a52; color: #8fa0b8; }
html.dark .badge--waitlist,
html.dark .badge--pending   { background: #352510; color: #c8a041; }
html.dark .badge--published { background: #12301e; color: #4daa70; }
html.dark .badge--closed    { background: #2e1a08; color: #c87040; }
html.dark .badge--cancelled { background: #381414; color: #e07070; }
html.dark .badge--canons    { background: #281a4c; color: #b090e0; }
/* ⚠ Sans cette ligne, le bandeau des places resterait en bleu PÂLE sur le fond
   sombre, avec un texte bleu nuit dessus : illisible, et invisible tant qu'on
   ne bascule pas le thème. */
html.dark .badge--seats     { background: #122040; color: #7bb3f0; }
html.dark .price-summary    { background: var(--card); }
html.dark .home-info-block  { background: var(--card); }

/* ---- Barre de navigation principale ---- */
.site-navbar {
  background: transparent;
  border-bottom: 2px solid transparent;
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--navbar-h));
  transition: border-bottom-color .2s;
}
/* Pas de filet doré : la bordure est gérée en blanc via le JS de scroll */
.site-navbar-links {
  list-style: none;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex: none;
  max-width: 800px;
  width: 100%;
}
.site-navbar-utils {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Onglets en capitales Servus, comme le menu du site de la Province */
.site-navbar-link {
  display: block;
  padding: .65rem 1.2rem;
  color: rgba(255,255,255,.72);
  font-family: var(--font-ui);
  font-size: .8rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .08em;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-navbar-link:hover { color: #fff; text-decoration: none; }
.site-navbar-link.active { color: #fff; border-bottom-color: rgba(255,255,255,.7); }

.canons-link--nav {
  font-family: var(--font-ui); font-size: .74rem;
  color: #fff; text-decoration: none;
  padding: .25rem .7rem;
  border: 1.5px solid rgba(255,255,255,.75); border-radius: 3px;
  white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.canons-link--nav:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.canons-link--nav.canons-link--active { color: #fff; border-color: #fff; }

.site-navbar-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .8rem 1rem;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.site-navbar-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 1px;
  transition: background .15s;
}
.site-navbar-burger:hover span { background: #fff; }

.nav-sep       { display: none; }
.nav-util-item { display: none; }

.site-navbar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 150;
}
.site-navbar-overlay.is-visible { display: block; }

@media (max-width: 600px) {
  .site-navbar-burger { display: flex; }
  .site-navbar-utils  { display: none; }
  .site-navbar-links {
    position: fixed;
    top: 0; right: -260px; left: auto;
    width: 260px; height: 100vh;
    flex: none;
    background: var(--navy);
    flex-direction: column;
    padding: 3.5rem 0 2rem;
    z-index: 200;
    transition: right .3s ease;
    border-left: 1px solid rgba(255,255,255,.08);
    overflow-y: auto;
  }
  .site-navbar-links.is-open {
    right: 0;
    box-shadow: -4px 0 24px rgba(0,0,0,.35);
  }
  .site-navbar-link {
    padding: .9rem 1.5rem;
    font-size: .95rem;
    border-right: 3px solid transparent;
  }
  .site-navbar-link.active {
    border-right-color: rgba(255,255,255,.7);
    color: #fff;
    background: rgba(255,255,255,.05);
  }
  .nav-sep {
    display: block;
    height: 1px;
    background: rgba(255,255,255,.1);
    margin: .4rem 1rem;
    list-style: none;
  }
  .nav-util-item { display: list-item; }
  .nav-theme-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.5rem;
  }
  .nav-theme-label {
    color: rgba(255,255,255,.72);
    font-family: var(--font-ui);
    font-size: .88rem;
  }
}

/* ---- Boutons de filtre (page retraites) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.filter-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: .35rem .9rem;
  font-family: var(--font-ui);
  font-size: .83rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

html.dark .filter-btn { background: var(--card); border-color: var(--border); color: var(--text); }
html.dark .filter-btn:hover { border-color: #7bb3f0; color: #7bb3f0; }
html.dark .filter-btn.active { background: #1e3868; border-color: #7bb3f0; color: #fff; }

.filter-desc {
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--navy);
  background: var(--card);
  border-radius: 0 4px 4px 0;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.filter-desc p { margin: .3rem 0; }
.filter-desc p:first-child { margin-top: 0; }
.filter-desc p:last-child { margin-bottom: 0; }
.filter-desc ul, .filter-desc ol { padding-left: 1.5rem; margin: .4rem 0; }
.filter-desc li { margin-bottom: .2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCÈNES DE LA PAGE D'ACCUEIL (point 12 du chanoine, juillet 2026)
   ---------------------------------------------------------------------------
   Une scène = un carrousel de photos plein cadre + un calque par-dessus
   (titre, bouton discret ou citation). Rendu par includes/home-scenes.php,
   animé par assets/home-scenes.js.

   La scène « hero » occupe tout l'écran à l'ouverture, puis se réduit en
   bandeau quand on descend : c'est la demande d'origine (« puis en défilant
   vers le bas, on réduirait puis basculerait sur un simple bandeau »).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   Cadrage revu le 24/07/2026, sur retour du chanoine : « les photographies ne
   s'adaptent pas vraiment à la taille (en hauteur), elles sont coupées, et cela
   donne 2 cadres simultanément ».

   Les deux défauts, mesurés : une scène ne faisait que 62 % de la hauteur de
   l'écran, donc on voyait toujours la fin d'une photo et le début de la
   suivante ; et les treize photos sont en 4/3 alors que le cadre, très
   panoramique, en rognait plus de la moitié.

   Réponse : une scène occupe la hauteur visible (on n'en voit plus qu'une), et
   la photo est affichée ENTIÈRE (« contain »), sur un fond flouté tiré de la
   même image pour que le cadre reste plein plutôt que barré de noir.
   --------------------------------------------------------------------------- */
.scene {
  position: relative;
  /* Une scène occupe l'écran MOINS la barre de navigation, qui est collante et
     reste seule visible quand on descend (l'en-tête, lui, défile). Retrancher
     l'en-tête ici laisserait dépasser la scène suivante. La scène d'ouverture,
     elle, a son propre calcul : à l'arrivée l'en-tête est encore là. */
  height: calc(100vh - var(--navbar-h, 46px));  /* repli navigateurs anciens */
  height: calc(100svh - var(--navbar-h, 46px)); /* hauteur réelle sur mobile */
  min-height: 380px;
  overflow: hidden;
  background: #1d2540;
  display: flex;
  align-items: flex-end;
}

/* Ouverture : plein écran, moins la hauteur de l'en-tête et de la barre de nav */
.scene--hero {
  height: calc(100vh - var(--nav-offset, 130px));
  min-height: 460px;
  align-items: center;
  /* Le passage en bandeau se fait sur cette propriété : une hauteur qui change,
     donc une transition douce plutôt qu'un saut. */
  transition: height .45s cubic-bezier(.4, 0, .2, 1);
}

/* Réduit en bandeau (classe posée par le JS au défilement) */
.scene--hero.is-collapsed {
  height: 34vh;
  min-height: 220px;
}
.scene--hero.is-collapsed .scene-title { font-size: clamp(1.3rem, 3vw, 2rem); }
.scene--hero.is-collapsed .scene-subtitle,
.scene--hero.is-collapsed .scene-btn,
.scene--hero.is-collapsed .scene-scroll-hint { opacity: 0; pointer-events: none; }
.scene--hero.is-collapsed .scene-dots { opacity: 0; }

/* ── Les photos ── */
.scene-slides { position: absolute; inset: 0; }
.scene-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.scene-slide.is-active { opacity: 1; }

/* La photo entière, jamais rognée. Ce qui reste du cadre est comblé par la
   même photo, agrandie et floutée : le fond n'est ni noir ni vide, et l'œil ne
   voit qu'une seule image. La variable --photo est posée par home-scenes.php
   (version 960 px : elle est floutée, inutile de charger la grande). */
/* Seule la photo affichée porte le fond flouté : un flou coûte cher à dessiner,
   inutile d'en garder dix-neuf en mémoire pour des photos invisibles. Le fondu
   entre deux photos reste doux, l'opacité étant portée par la diapositive. */
.scene-slide.is-active::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(.62) saturate(.9);
  transform: scale(1.15); /* masque les bords délavés par le flou */
}
.scene-slide img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* LA SCÈNE D'OUVERTURE RESTE PLEIN CADRE (choix de Jean, 24/07/2026).
   Une photo 4/3 montrée en entier sur un écran 16/9 n'occupe que la moitié de
   la largeur : acceptable pour les scènes que l'on regarde en descendant, mais
   pas pour l'arrivée sur le site, qui doit remplir l'écran. L'ouverture assume
   donc son recadrage, en grand comme en bandeau ; ce sont les scènes suivantes
   qui montrent les photos entières, et c'est là qu'on les regarde vraiment. */
.scene--hero .scene-slide img { object-fit: cover; }
.scene--hero .scene-slide.is-active::before { filter: none; transform: none; opacity: 0; }

/* Voile : sans lui, le texte blanc disparaît sur les photos claires. */
.scene-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,48,.42) 0%, rgba(20,26,48,.18) 45%, rgba(20,26,48,.62) 100%);
}

/* ── Le calque de texte ── */
.scene-content {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  color: #fff;
  text-align: center;
}
.scene--hero .scene-content { padding-bottom: 4rem; }

.scene-title {
  font-family: var(--font-title, Georgia, serif);
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 .7rem;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
  border: none; padding: 0;
  transition: font-size .45s ease;
}
.scene-title--sm { font-size: clamp(1.35rem, 2.8vw, 2.1rem); }

.scene-subtitle {
  font-family: var(--font-body, Georgia, serif);
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  max-width: 46rem;
  margin: 0 auto;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  transition: opacity .3s ease;
}

/* ── Boutons « discrets » (demande de Jean) ──
   Contour fin sur fond translucide : présent sans écraser la photo. */
.scene-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .62rem 1.5rem;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .92rem;
  letter-spacing: .02em;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(20,26,48,.28);
  backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.scene-btn:hover,
.scene-btn:focus-visible {
  background: rgba(255,255,255,.95);
  border-color: #fff;
  color: var(--nav, #1a3c6e);
  transform: translateY(-1px);
}
.scene-btn--solid {
  background: rgba(200,169,91,.92);
  border-color: rgba(200,169,91,.92);
  color: #1d2540;
  font-weight: 600;
}
.scene-btn--solid:hover,
.scene-btn--solid:focus-visible { background: #fff; border-color: #fff; }

/* ── Citation (saint François de Sales sur les photos du parc) ── */
.scene-quote { margin: 0; max-width: 42rem; margin-inline: auto; }
.scene-quote p {
  font-family: var(--font-italic, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  line-height: 1.55;
  margin: 0 0 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.scene-quote p::before { content: "« "; }
.scene-quote p::after  { content: " »"; }
.scene-quote cite {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light, #e0d4b8);
}

/* ── Flèches ── */
.scene-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,26,48,.3);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s ease, background .25s ease;
  backdrop-filter: blur(4px);
}
.scene-arrow:hover, .scene-arrow:focus-visible { opacity: 1; background: rgba(20,26,48,.6); }
.scene-arrow svg { width: 22px; height: 22px; }
.scene-arrow--prev { left: 1rem; }
.scene-arrow--next { right: 1rem; }

/* ── Pastilles ── */
.scene-dots {
  position: absolute;
  bottom: 1.1rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .45rem;
  transition: opacity .3s ease;
}
.scene-dot {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.scene-dot.is-active { background: #fff; transform: scale(1.25); }

/* ── Flèche « descendez » ── */
.scene-scroll-hint {
  position: absolute;
  bottom: 2.6rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  animation: scene-bounce 2.4s ease-in-out infinite;
  transition: opacity .3s ease;
}
.scene-scroll-hint svg { width: 26px; height: 26px; }
@keyframes scene-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* ── Pas de point d'accroche au défilement ──
   Un « scroll-snap » avait été posé ici le 24/07/2026 pour qu'on ne voie qu'une
   scène à la fois. Il a été RETIRÉ le jour même : au chargement, le navigateur
   alignait tout seul la page sur la première scène, la page descendait donc de
   la hauteur de l'en-tête, et la scène d'ouverture se réduisait en bandeau au
   bout d'une seconde sans que personne n'ait touché à rien (constaté par Jean).
   Ne pas le réintroduire : les scènes font déjà la hauteur de l'écran, l'accroche
   n'apportait presque rien et cassait l'arrivée sur le site. */

/* ── Téléphone ──
   Le plein écran vrai est intenable sur mobile : on ne verrait plus rien
   d'autre que la photo, et les retraites passeraient sous la ligne de flottaison.
   La hauteur suit ici le format des photos (4/3) : elles s'affichent entières,
   sans bandes floutées démesurées au-dessus et au-dessous. */
@media (max-width: 820px) {
  .scene { height: auto; aspect-ratio: 4 / 3; min-height: 300px; }
  /* Déclarées APRÈS .scene, à dessein : à spécificité égale, la dernière règle
     l'emporte, et la scène d'ouverture doit garder sa hauteur propre. */
  /* La scène d'ouverture garde une hauteur propre (le titre, le sous-titre et
     le bouton doivent tenir) : la photo y est simplement centrée, avec un peu
     de fond flouté au-dessus et au-dessous. Ne PAS lui donner aussi un
     aspect-ratio : les deux ensemble imposent une largeur plus grande que
     l'écran, et la photo se retrouve rognée sur les côtés (constaté). */
  .scene--hero { height: 60vh; height: 60svh; aspect-ratio: auto; min-height: 380px; }
  .scene--hero.is-collapsed { height: 26vh; height: 26svh; aspect-ratio: auto; min-height: 170px; }
  .scene-arrow { width: 38px; height: 38px; }
  .scene-arrow--prev { left: .4rem; }
  .scene-arrow--next { right: .4rem; }
  .scene-content { padding: 1.75rem 1.1rem; }
  .scene--hero .scene-content { padding-bottom: 3rem; }
}

/* Certains désactivent les animations au niveau du système : on respecte. */
@media (prefers-reduced-motion: reduce) {
  .scene-slide { transition: none; }
  .scene--hero, .scene-title { transition: none; }
  .scene-scroll-hint { animation: none; }
}