*, *::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 */
  --navy:        #233155;   /* bleu des dégradés (état survol, encarts) */
  --navy-dark:   #171c2b;   /* 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) */
  --bg:          #ffffff;   /* contenu sur fond blanc, comme icrspfrance.fr */
  --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;
}

/* 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;
  background: rgba(23,28,43,.65);
}
.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 #171c2b à 3 colonnes, comme icrspfrance.fr ---- */
.site-footer {
  background: #171c2b; 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;
}

/* ---- 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; }
}

.event-card-body { padding: .5rem 1.4rem 1.1rem; flex: 1; min-width: 0; }

.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); }

.event-footer {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-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); }
.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;
}

/* 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;
}
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; }
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 */
/* Les liens sont CENTRÉS et ne se coupent jamais au milieu d'un libellé.
   Défaut corrigé le 01/08/2026 (Jean) : la barre était bridée à 800px sans
   consigne de centrage ni de césure, si bien qu'« Informations pratiques » ou
   « Encadrer un séjour » passaient sur deux lignes dès qu'il y avait quatre ou
   cinq entrées. Si le menu venait à déborder malgré tout, c'est un lien ENTIER
   qui descend à la ligne (flex-wrap), jamais un mot coupé. */
.site-navbar-links {
  list-style: none;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  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;
  white-space: nowrap;
  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;
    /* Le tiroir est une COLONNE : le centrage horizontal des liens, utile à la
       barre du haut sur ordinateur, tasserait ici les entrées au milieu de la
       hauteur de l'écran. Elles restent donc alignées en haut. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    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;
    /* Dans le tiroir, la place manque en largeur mais pas en hauteur : un
       libellé long a le droit de passer à la ligne plutôt que de déborder. */
    white-space: normal;
    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; }
}