/* ===========================================================================
   Paroisse de la Trinité en Beaujolais — feuille de style publique
   Lot 7B : coquille seule (reset + tokens + @font-face + structure + responsive).
   Aucun CSS spécifique à la page d'accueil (édito, sidebar, panorama, cartes)
   — ces styles arriveront au Lot 7C.

   Cascade des tokens :
     1) Ce fichier pose un :root de SECOURS (valeurs par défaut maquette).
     2) `templates/layout.php` injecte un <style> inline APRÈS ce fichier,
        avec les valeurs réelles issues des settings (color_primary, etc.).
     → L'injection inline surcharge ce secours quand les settings existent.

   Variables :
     - Tokens éditables (9) = injectés depuis les settings via layout.php.
     - Constantes de design = valeurs littérales fixes, non éditables.
   =========================================================================== */

/* ===========================================================================
   1. ROOT — secours pour tokens éditables + constantes de design
   =========================================================================== */

:root {
  /* --- Tokens éditables (fallback si l'injection inline manque) --- */
  --color-primary:   #8B3540;
  --color-secondary: #2C3E50;
  --color-accent:    #D4B770;
  --color-footer:    #5C2228;
  --color-bg-page:   #FBF6EE;
  --color-meta:      #8B7355;
  --font-heading:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:       'Source Sans 3', system-ui, -apple-system, sans-serif;
  --border-radius:   8px;
  --font-base:       16px;  /* Taille de texte de base (setting font_size_base).
                               Posée sur <html> plus bas : toutes les tailles en
                               rem/em la suivent → le site entier grandit
                               proportionnellement. */

  /* --- Constantes de design (non éditables, centralisées ici) --- */
  --or-soft:         #f6ecd2;
  --sable:           #E8E2D3;
  --hairline:        #EFE5D2;
  --hairline-light:  #F4EBD9;
  --texte:           #2D2D2D;
  --texte-leger:     #4A4A4A;
  --blanc:           #FFFFFF;
  --footer-text:     #e8d8b0;

  /* Constante RGB sombre pour le voile dégradé du panorama (Lot 7C prompt 2a).
     Format RGB (pas hexa) pour permettre rgba(var(--overlay-dark-rgb), opacity).
     Valeur = #5C2228 (la teinte color_footer DÉFAUT, en RGB). Volontairement
     littérale et non synchronisée avec --color-footer : si l'admin change la
     palette, le panorama garde son voile sombre — sa fonction est de garantir
     la lisibilité de la légende sur la photo, pas de refléter la palette
     éditable. color-mix() écarté : support insuffisant sur la cible (parc
     paroissial âgé, vieux iPad/Android, Safari < 16.2). */
  --overlay-dark-rgb: 92, 34, 40;

  /* Couleurs sémantiques de signalisation (Lot 7C prompt 2b — cartes sidebar).
     Constantes littérales (pas tokens éditables) — ce sont des codes visuels
     d'état, pas des couleurs de marque que l'admin doit pouvoir ajuster.
     --color-alert : rouge brique sobre, désaturation de --color-primary ;
                     usage : ligne d'horaire ANNULÉE (line-through). Contraste
                     suffisant sur fond blanc ET sur fond --or-soft (dimanche
                     surligné annulé).
     --color-warn  : ambre sobre, dérivé de --color-accent assombri ; usage :
                     mention « Exceptionnellement à {lieu} » pour les
                     délocalisations. Lisible sur blanc, distinct de
                     --color-meta taupe. */
  --color-alert:     #A0413A;
  --color-warn:      #B8893A;

  /* --- Conteneur --- */
  --site-width:      1080px;
}

/* ===========================================================================
   2. @FONT-FACE — 8 woff2 self-hostées (cf. public/assets/fonts/FONTS.md)
   =========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-600.woff2') format('woff2');
}

/* ===========================================================================
   3. RESET
   =========================================================================== */

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

/* font-size sur <html> = ancre des unités rem. Piloté par le setting
   font_size_base (token --font-base, injecté par layout.php). C'est ce qui
   permet d'agrandir tout le site depuis l'admin sans toucher au CSS. */
html { scroll-behavior: smooth; font-size: var(--font-base); }

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  font-family: var(--font-body);
  font-size: 1rem;  /* = --font-base (posé sur <html>). Était 16px fixe ; passé en
                       rem pour que le corps de texte suive le réglage admin. */
  line-height: 1.6;
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 500; }

img { max-width: 100%; height: auto; }

/* ===========================================================================
   4. CADRE DU SITE
   =========================================================================== */

.site {
  background: var(--color-bg-page);
  /* Sticky footer (Lot 7B-bis) : .site est le conteneur flex column, .main absorbe
     l'espace restant via flex: 1 0 auto, le footer reste colle en bas du viewport
     quand le contenu est court, et se positionne apres le contenu quand il est long.
     Pas de min-height sur body ni de flex-shrink sur le footer : inutile ici puisque
     .site-footer est ENFANT direct de .site et donc bien flex item du bon conteneur. */
  /* Lot 7F : 100dvh en complément de 100vh. Progressive enhancement — les
     browsers modernes consomment dvh (dynamic viewport height, suit la barre
     URL mobile au scroll) ; les anciens ignorent la 2e déclaration et gardent
     100vh. Aucune régression possible. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--site-width);
  margin: 0 auto;
}

/* ===========================================================================
   5. HEADER
   =========================================================================== */

.site-header {
  background: var(--blanc);
  padding: 1.6rem 1.5rem 1.4rem;
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* Reset link (Lot 7B-bis) : .brand est devenu <a class="brand"> qui pointe vers
     la racine. Defensif/explicite : le reset global `a { color: inherit;
     text-decoration: none }` (l. 129) couvre deja le cas, mais on materialise
     l'intention au niveau du composant pour qu'elle survive a un changement
     futur du reset global. Pas de regle :focus ici : on s'appuie sur l'outline
     par defaut du navigateur (a11y). */
  color: inherit;
  text-decoration: none;
}

.blason {
  flex-shrink: 0;
  display: block;
  height: auto;
  /* La largeur est posée par l'attribut HTML width="<?= logo_size ?>" sur <img>
     dans layout.php. Le mobile override force 48px (cf. @media 640px). */
}

.brand-text { text-align: center; }

.brand-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.brand-subtitle {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 3px;
  font-weight: 500;
  color: var(--texte);
  margin-top: 0.45rem;
}

/* Lot 7C : devise paroissiale (italique, doree, sous le nom).
   Rendue par templates/layout.php a partir du setting header_subtitle (cle historique
   conservee — cf. commentaire dans layout.php). Sibling de .brand dans le <header>,
   pas a l'interieur du <a class="brand"> (motto, pas lien de navigation). */
.brand-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-accent);
  letter-spacing: 0.5px;
  text-align: center;
  margin-top: 0.95rem;
}

/* Lot 7C (revision audit pre-push) : fond hero universel — voile BLANC opaque.
   Si hero_image est renseigne en setting, layout.php pose la classe .has-hero sur
   <header> et injecte la variable --hero-image dans le :root inline. La regle
   ci-dessous superpose un voile BLANC opaque (0.85) entre l'image et les textes :
   la photo se reduit a une TEXTURE DISCRETE par-dessus laquelle l'en-tete reste
   clair, et les textes gardent leurs couleurs d'origine (titre bordeaux, sous-titre
   anthracite, devise doree — PAS de bascule des couleurs).

   Justification de l'opacite (~0.85) : elle doit etre assez haute pour qu'une
   photo sombre redevienne un fond suffisamment clair pour du texte fonce. Plus
   on baisse pour "voir" la photo, plus une photo sombre menace la lisibilite du
   texte fonce — il y a un plancher. Valeur litterale calee a l'oeil (decision
   spec 7C : "pas un token").

   Robustesse au failure (404, perte reseau, fichier supprime) : le gradient stacke
   s'applique meme si l'url() echoue. Sur background-color: var(--blanc), un voile
   blanc sur fond blanc reste blanc pur → le texte fonce reste parfaitement lisible.
   C'est ce qui rend cette approche SURE par construction, contrairement a la
   premiere passe (voile noir + bascule des couleurs en blanc qui retombait sur
   fond blanc en 404 = texte invisible — defaut identifie au audit pre-push).

   Cadrage : cover + center + no-repeat pour cadrer correctement quel que soit le
   ratio de l'image, sans pavage si plus petite que la zone. */
.site-header.has-hero {
  background-color: var(--blanc);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Liseré or entre header/nav et nav/main */
.gold-rule {
  height: 2px;
  background: var(--color-accent);
}

/* ===========================================================================
   6. NAVIGATION
   =========================================================================== */

.site-nav {
  background: var(--color-primary);
  padding: 0.7rem 1rem;
  position: relative;
}

.nav-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--site-width);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.nav-list > li { position: relative; }

.nav-list > li > a {
  display: inline-block;
  color: var(--color-bg-page);
  padding: 0.35rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 400;
  border-radius: 16px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nav-list > li > a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Lot 7F : lien de nav correspondant à la page courante. Le sélecteur cible
   l'attribut aria-current="page" posé par layout.php via is_current_route()
   (functions/menu.php) — source unique de vérité sémantique (lecteurs d'écran)
   + visuelle (souris). Remplace le sélecteur orphelin .nav-list > li.active > a
   (Lot 7B, jamais déclenché car aucune classe .active posée par layout.php côté
   public). Rendu visuel identique (pastille or). Étendu au sous-menu. */
.nav-list > li > a[aria-current="page"],
.submenu li a[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-footer);
  font-weight: 500;
}

.caret {
  font-size: 0.62rem;
  margin-left: 0.15rem;
  opacity: 0.75;
}

/* Sous-menus desktop : dropdown au hover/focus */
.submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  list-style: none;
  padding: 0.35rem 0;
  margin: 0;
  background: var(--blanc);
  min-width: 200px;
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 20;
}

.nav-list > li:hover > .submenu,
.nav-list > li:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.submenu li a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--texte);
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.submenu li a:hover {
  background: var(--or-soft);
  color: var(--color-primary);
}

.nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--color-bg-page);
  font-size: 1.4rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

/* ===========================================================================
   7. CONTENU PRINCIPAL — coquille simple (1 colonne, centrée)
       Le grid 2-colonnes de la home (édito + sidebar) sera ajouté au Lot 7C
       via une classe sur <body> (hook $body_class).
   =========================================================================== */

.main {
  /* Lot 7D-1bis : .main est un item flex de .site (column).
     margin: 0 auto annulait le stretch en cross-axis → shrink-wrap au contenu.
     width: 100% rétablit le stretch ; max-width plafonne ensuite à 1080px. */
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 2rem;
  /* Sticky footer (Lot 7B-bis) : grandit pour pousser .site-footer en bas
     quand le contenu est court. flex-basis: auto = taille naturelle du contenu
     respectee quand il est long. */
  flex: 1 0 auto;
}

/* ===========================================================================
   8. BOUTON GÉNÉRIQUE
       Exerce --border-radius (token éditable).
   =========================================================================== */

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-bg-page);
  padding: 0.55rem 1.25rem;
  border-radius: var(--border-radius);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  border: none;
}

.btn:hover {
  background: var(--color-footer);
  transform: translateY(-1px);
}

/* ===========================================================================
   9. FOOTER
   =========================================================================== */

.site-footer {
  background: var(--color-footer);
  color: var(--footer-text);
  padding: 1.6rem 1.5rem 1.1rem;
  font-size: 0.82rem;
}

.footer-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.footer-col h3 {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 1.8px;
  font-weight: 600;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.footer-col p,
.footer-col ul {
  margin: 0;
  line-height: 1.65;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-col a:hover { color: var(--color-accent); }

.villages-list {
  font-size: 0.76rem;
  line-height: 1.7;
}

.footer-bottom {
  max-width: var(--site-width);
  margin: 1.2rem auto 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(212, 183, 112, 0.2);
  text-align: center;
  color: rgba(232, 216, 176, 0.55);
  font-size: 0.7rem;
}

/* Lot 7q : liens de conformité légale sous le copyright (soulignés car la règle
   globale `a { text-decoration: none }` les rendrait indistinguables du texte). */
.footer-legal {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1rem;
}
.footer-legal a { text-decoration: underline; }
.footer-legal a:hover { color: rgba(232, 216, 176, 0.9); }

/* ===========================================================================
   10. BLOC-ÉCHANTILLON
       Sert au 7B pour valider la typo/couleurs ; sera réutilisé par les pages
       de contenu génériques (7D). N'apparaît qu'avec la classe .sample
       (utilisée dans home.php pendant 7B, remplacée par .home-grid au 7C).
   =========================================================================== */

.sample {
  max-width: 760px;
  margin: 0 auto;
}

.sample h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin: 1.5rem 0 0.6rem;
}

.sample h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-primary);
  margin: 1.4rem 0 0.5rem;
}

.sample h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--texte);
  margin: 1.2rem 0 0.4rem;
}

.sample p {
  line-height: 1.7;
  margin: 0 0 1rem;
  color: var(--texte-leger);
}

.sample a {
  color: var(--color-primary);
  text-decoration: underline;
}

.sample a:hover {
  color: var(--color-footer);
}

.sample ul {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
}

.sample blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.3rem 0 0.3rem 1.1rem;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-meta);
  margin: 1.3rem 0;
}

/* --- Contenu WYSIWYG CMS (page.php, Lot 7D) — scopé .sample comme ul/blockquote.
   Complète la typo des balises autorisées non encore stylées (h4, ol, hr, table,
   figure). Tokens uniquement, aucune couleur en dur. --- */
.sample h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--texte);
  margin: 1.2rem 0 0.4rem;
}
.sample ol {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
}
.sample hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 1.6rem 0;
}
.sample table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92rem;
}
.sample th,
.sample td {
  border: 1px solid var(--hairline);
  padding: 0.45rem 0.65rem;
  text-align: left;
}
.sample th {
  background: var(--or-soft);
  font-weight: 600;
}
.sample figure { margin: 1.3rem 0; }
.sample figcaption {
  font-size: 0.85rem;
  color: var(--color-meta);
  font-style: italic;
  text-align: center;
  margin-top: 0.4rem;
}

/* --- Index de rubrique (page.php : rubrique sans contenu → liste de ses
   sous-pages, page pivot). .sample .page-index a (0,2,1) bat .sample a (0,1,1). --- */
.page-index { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.page-index li { border-top: 1px solid var(--hairline); }
.page-index li:last-child { border-bottom: 1px solid var(--hairline); }
.sample .page-index a {
  display: block;
  padding: 0.85rem 0.2rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary);
}
.sample .page-index a:hover { color: var(--color-footer); }
.page-index__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-meta);
  margin-top: 0.15rem;
}

/* ===========================================================================
   11. RESPONSIVE — mobile (≤ 640px)
   =========================================================================== */

@media (max-width: 640px) {
  .site-header {
    padding: 1.3rem 1rem 1.1rem;
  }
  .brand {
    flex-direction: column;
    gap: 0.7rem;
  }
  .blason {
    width: 48px;
    height: 48px;
  }
  .brand-title {
    font-size: 1.25rem;
  }

  .site-nav {
    padding: 0.5rem 0.6rem;
  }
  .nav-list {
    gap: 0.25rem;
    display: none;
    flex-direction: column;
    width: 100%;
  }
  .nav-list.is-open {
    display: flex;
  }
  .nav-burger {
    display: block;
    margin: 0 auto;
  }

  .nav-list > li {
    width: 100%;
    text-align: center;
  }
  .nav-list > li > a {
    display: block;
    border-radius: 0;
    padding: 0.55rem 1rem;
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: none;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.15);
    min-width: 0;
    display: none;
  }
  .nav-list > li.is-expanded > .submenu {
    display: block;
  }
  .submenu li a {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    text-align: center;
  }

  .main {
    padding: 1.4rem 1rem 1.2rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .site-footer {
    padding: 1.3rem 1.2rem 1rem;
  }
}

/* ===========================================================================
   12. HOME — grille 2 colonnes, édito, sidebar minimal, panorama (Lot 7C 2a)
       Activé par body.home (posé par templates/home.php via $body_class).
       Bascule body.home.no-edito → grille 1 colonne quand get_edito() === false :
       la sidebar reste à 240px (sa largeur du cas nominal), recentrée dans .main.
       Cf. Décision 4 + Lot 7D-1bis : .main { width: 100% } rend .main = 1080 ;
       avant, le shrink-wrap flex le rétractait au contenu (~240), d'où la
       croyance erronée du commentaire d'origine.
   =========================================================================== */

/* --- Grille 2 colonnes (cas nominal) --- */
body.home .main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 1.8rem;
  align-items: start;
}

/* --- Bascule no-edito : sidebar à 240px, recentrée dans .main (Lot 7D-1bis) ---
   Le commentaire 7B-bis d'origine supposait que .main faisait 1080 ici, ce qui
   n'était pas le cas (shrink-wrap flex column annulé par margin auto). Le
   correctif 7D-1bis (.main { width: 100% }) rend .main = 1080 ; pour éviter
   d'étirer la sidebar de cartes (240px-conçues) sur toute la largeur, on
   contraint la cellule grid à 240px et on la recentre. */
body.home.no-edito .main {
  grid-template-columns: 240px;
  justify-content: center;
}

/* --- Édito --- */

.edito-label {
  font-size: 0.65rem;
  color: var(--color-accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.edito-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  color: var(--texte);
  margin: 0 0 0.45rem;
  line-height: 1.2;
  font-weight: 500;
}

.edito-byline {
  font-size: 0.78rem;
  color: var(--color-meta);
  font-style: italic;
  margin-bottom: 1.1rem;
}

.edito-body p {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--texte-leger);
}

/* Blockquote inséré dans l'édito via TinyMCE par le curé.
   Calque maquette : liseré or à gauche, italique en Playfair, couleur primaire. */
.edito-body blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 1.3rem 0;
  padding: 0.3rem 0 0.3rem 1.1rem;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-primary);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* --- Sidebar (placeholder en 2a — cartes ajoutées au 2b) --- */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Panorama (bandeau pleine largeur entre </main> et <footer>) ---
   L'URL de l'image est injectée par layout.php dans :root (--panorama-image),
   pattern identique à --hero-image du prompt 1. Si panorama_image est vide,
   le token n'est pas posé ET le markup .panorama n'est pas rendu côté home
   — donc cette règle ne s'applique jamais à vide. */

.panorama {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background-color: var(--color-footer);
  background-image: var(--panorama-image);
  background-size: cover;
  background-position: center 60%;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Voile dégradé via la constante RGB --overlay-dark-rgb (cf. :root et son
   commentaire). Trois stops calqués sur la maquette : plus sombre en haut
   (15%), atténué en milieu (5%), nettement assombri en bas (45%) — c'est
   ce qui garantit la lisibilité de la .panorama-caption positionnée en bas
   à droite quelle que soit la photo. */
.panorama-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--overlay-dark-rgb), 0.15) 0%,
    rgba(var(--overlay-dark-rgb), 0.05) 40%,
    rgba(var(--overlay-dark-rgb), 0.45) 100%
  );
}

.panorama-caption {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  z-index: 1;
}

.panorama-text {
  display: inline-block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-bg-page);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ===========================================================================
   13. RESPONSIVE HOME — breakpoint 800px (proposition à valider au
       checkpoint visuel — cf. checkpoint 5 du spec Lot 7C prompt 2a).
       Au-dessus de 800px : grille 2 colonnes (section 12).
       En-dessous de 800px : grille en 1 colonne, sidebar passe sous l'édito
       (order: 2) — inoffensif en mode no-edito (sidebar = unique enfant).
       Zone 641-800px : double seuil avec le @media 640 (nav) — à contrôler
       visuellement, transition entre nav desktop et grille mobile.
   =========================================================================== */

@media (max-width: 800px) {
  body.home .main {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  body.home .sidebar {
    order: 2;
  }
}

/* --- Compléments mobile ≤ 640px (panorama réduit + édito title réduit) ---
   Pas un nouveau breakpoint : ces règles complètent celles déjà posées
   en section 11. Placées ici pour cohabiter avec le reste du CSS home. */
@media (max-width: 640px) {
  .edito-title {
    font-size: 1.55rem;
  }
  .panorama {
    height: 160px;
  }
  .panorama-caption {
    bottom: 0.6rem;
    right: 0.9rem;
  }
  .panorama-text {
    font-size: 0.75rem;
  }
}

/* ===========================================================================
   14. SIDEBAR CARTES (Lot 7C prompt 2b)
       Carte 1 (Horaires) ajoutée en 2b-C. Cartes 2 (Feuille) et 3 (Événements)
       ajoutées en 2b-D. Aucune règle ne s'applique hors sidebar home : .card
       et ses descendants n'existent nulle part ailleurs dans le projet
       (vérifié au 2b-Étape 0).
   =========================================================================== */

/* --- Carte générique --- */

.card {
  background: var(--blanc);
  border-top: 3px solid var(--color-accent);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  border-radius: 0 0 10px 10px;
  padding: 0.85rem 0.9rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0 0 0.7rem;
}

.card-title::before {
  content: '◆';
  color: var(--color-accent);
  font-size: 0.75rem;
}

.card-empty {
  margin: 0.5rem 0;
  font-style: italic;
  color: var(--color-meta);
  font-size: 0.85rem;
  text-align: center;
}

.card-footer-link {
  display: block;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.76rem;
  color: var(--color-primary);
  text-align: center;
  font-style: italic;
}

.card-footer-link:hover { color: var(--color-footer); }

/* --- Carte horaires --- */

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}

.schedule-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hairline-light);
}

.schedule-list li:last-child { border-bottom: none; }

.schedule-list .day { color: var(--color-meta); }
.schedule-list .place { color: var(--texte); font-weight: 500; }

/* Surlignage dominical. COUPLAGE CACHÉ : les marges négatives latérales
   (-0.9rem) compensent exactement le padding horizontal de .card (0.9rem)
   pour que le surlignage déborde proprement jusqu'aux bords de la carte.
   Si tu changes le padding horizontal de .card, mets à jour ces marges en
   miroir, sinon le surlignage se retrouve désaligné. */
.schedule-list .sunday {
  background: var(--or-soft);
  margin: 0.3rem -0.9rem -0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
}

.schedule-list .sunday .day,
.schedule-list .sunday .place {
  color: var(--color-primary);
  font-weight: 500;
}

/* Annulation : ligne barrée + couleur d'alerte. Le line-through doit traverser
   visiblement le fond .sunday (or-soft) quand l'annulation tombe un dimanche
   — à vérifier au checkpoint visuel. */
.schedule-list .cancelled .day,
.schedule-list .cancelled .place {
  text-decoration: line-through;
  color: var(--color-alert);
}

/* Note "Annulée [— motif]" et "Exceptionnellement à {lieu}" : sur leur propre
   ligne sous la ligne principale (flex-basis: 100% force le wrap). Italique +
   plus petit, couleur sémantique. */
.schedule-list .cancelled-note,
.schedule-list .relocated-note {
  flex-basis: 100%;
  font-size: 0.72rem;
  font-style: italic;
  margin-top: 0.15rem;
}

.schedule-list .cancelled-note { color: var(--color-alert); }
.schedule-list .relocated-note { color: var(--color-warn); }

/* --- Carte feuille paroissiale (Lot 7C 2b D) ---
   Markup simplifié vs maquette : un seul .bulletin-week (le title libre admin
   porte tout le sens — pas de .bulletin-week-label, cf. Décision 10). */

.bulletin {
  text-align: center;
  padding: 0.2rem 0 0.1rem;
}

.bulletin-week {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0.1rem 0 0.7rem;
}

/* Bouton de téléchargement PDF (Décision 17) :
   - border-radius = --border-radius (token éditable existant) plutôt que
     20px hardcodé de la maquette → cohérence avec .btn du projet, sobriété.
   - hover background = --color-footer (même pattern que .btn:hover du
     projet) plutôt que #c6a755 hardcodé → évite un nouveau token.
   - hover color : on bascule sur --color-bg-page (crème) pour rester lisible
     sur le fond foncé du hover. */
.btn-bulletin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-accent);
  color: var(--color-footer);
  padding: 0.45rem 1rem;
  border-radius: var(--border-radius);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-bulletin:hover {
  background: var(--color-footer);
  color: var(--color-bg-page);
}

/* --- Carte événements (Lot 7C 2b D) ---
   Pastille date à gauche (mois abrégé + jour) + info à droite (titre + méta).
   Titres non cliquables (event-single.php n'existe pas — Lot 7D). */

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-list li {
  display: flex;
  gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline-light);
}

.event-list li:last-child { border-bottom: none; }

.event-date {
  text-align: center;
  min-width: 40px;
  background: var(--color-primary);
  color: var(--color-bg-page);
  border-radius: 6px;
  padding: 0.25rem 0.2rem;
  flex-shrink: 0;
}

.event-date .month {
  font-size: 0.55rem;
  letter-spacing: 1px;
  color: var(--color-accent);
  text-transform: uppercase;
}

.event-date .day {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
}

.event-info { font-size: 0.82rem; line-height: 1.35; }
.event-title { font-weight: 500; color: var(--texte); }
.event-meta { color: var(--color-meta); font-size: 0.74rem; }

/* ===========================================================================
   15. POLISH A11Y GLOBAL (Lot 7F)
   ===========================================================================
   :focus-visible global. Outline 2px solid --color-accent + offset 2px.
   Couvre tous les éléments focusables (a, button, input, select, textarea,
   summary, details, [tabindex]). Le focus UA spécifique des form fields
   (bleu Chrome/Safari) est remplacé par l'outline or — choix explicite pour
   cohérence visuelle. Surcharge locale possible au Lot 7D prompt 5 (formulaire
   contact) si le focus UA est jugé préférable sur les form fields.

   Aucun outline: none nulle part dans ce fichier (décision Lot 7B). Cette règle
   complète sans rien remplacer. Browsers sans :focus-visible (rares en 2026)
   ignorent la règle → outline UA reste actif (fallback gracieux).

   Section dédiée en fin de fichier : règle transversale (toute la page), pas
   spécifique à la nav ni à un composant — sa place est ici, pas au milieu d'une
   section thématique.

   Couleur --color-accent : contrastes WCAG 2.4.11 vérifiés sur les 5 fonds du
   site, tous >= 3:1 (3.08:1 sur blanc à 6.16:1 sur bleu foncé). */
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===========================================================================
   16. CALENDRIER (déplacé de templates/calendar.php — Lot 7C prompt 8)
   ===========================================================================
   Auparavant inline dans le <style> de calendar.php (TODO « lot 7 » résolu).
   Contient : base (lot 6bis-E), palette en-têtes/bandeau (prompt 5), fond grille
   (prompt 7), annulations (prompt 3), délocalisations (prompt 6), + responsive
   grille (desktop) / agenda (mobile) et correctif de débordement (prompt 8).
   Tokens consommés (définis en :root) : --color-secondary, --color-on-secondary,
   --color-calendar-bg, --color-on-calendar-bg, --color-alert, --color-warn.
   Aucun token modifié (couleurs admin intactes). */

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
}
.legend-item.active {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border-color: var(--color-secondary);
}

/* Nav mois — Lot 7C prompt 8 (Décision 9) : flex-wrap = filet anti-débordement
   mobile ; le min-width: 200px du label est repoussé en desktop (@media
   min-width: 641px, plus bas) — sinon la ligne (label 200px + 2 boutons + gaps)
   dépasse un viewport de poche et provoque un scroll horizontal de page. */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.calendar-month-label {
    font-size: 1.3em;
    font-weight: 600;
    text-align: center;
}

.calendar-grid {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-calendar-bg);
}
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--color-secondary);
}
.calendar-day-name {
    text-align: center;
    padding: 10px;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--color-on-secondary);
}
.calendar-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-cell {
    min-height: 80px;
    min-width: 0;
    padding: 6px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    position: relative;
}
.calendar-cell--empty {
    background: #fafafa;
}
.calendar-cell--today {
    background: #fef7e0;
}
.calendar-day-num {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--color-on-calendar-bg);
}
/* Vignette pleine (Lot 7C prompt 9) : le fond (couleur de catégorie) et la couleur de
   texte (contraste WCAG) sont posés inline par renderGrid ; le border-left + le fond
   translucide d'origine sont retirés. L'annulé est peint par .--cancelled (pas d'inline). */
.calendar-event-item {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 3px 6px;            /* aéré pour la vignette pleine (était 1px 3px) */
    border-radius: 3px;          /* coins conservés — pas d'arrondi pilule */
    font-size: 0.72em;
    line-height: 1.4;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.calendar-event-item.hidden { display: none; }
.cal-evt-time { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.cal-evt-title { overflow: hidden; text-overflow: ellipsis; }
.cal-evt-pin  { font-size: 0.85em; vertical-align: -1px; }  /* épingle délocalisation (gap flex suffit) */

.calendar-detail {
    margin-top: 1.5rem;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    position: relative;
}
.calendar-detail.hidden {
    display: none;
}
.calendar-detail-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.3em;
    cursor: pointer;
}
.cal-detail-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.cal-detail-item:last-child {
    border-bottom: none;
}

.color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.calendar-subscribe {
    margin-top: 2rem;
    padding: 20px;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border-radius: 8px;
}
.calendar-subscribe h3,
.calendar-subscribe p {
    color: var(--color-on-secondary);
}
.subscribe-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ===== Annulations — Lot 7C prompt 3 puis prompt 9. GRILLE : vignette grisée + barré
   (le rouge --color-alert serait illisible sur fond plein). Le JS ne pose AUCUN style
   inline si annulé → ces règles de classe (spécificité 0,1,0) peignent sans !important.
   --texte-leger (#4A4A4A) ≈ 6.9:1 sur --sable = lisible (passe AA). VOLET : barré scopé à
   .cal-detail-main (jamais le parent), note frère (CSS Text Decoration L3, correctif
   a5775ce) — inchangé. ===== */
.calendar-event-item--cancelled {
    background: var(--sable);
    color: var(--texte-leger);
}
.calendar-event-item--cancelled .cal-evt-time,
.calendar-event-item--cancelled .cal-evt-title {
    color: var(--texte-leger);
    text-decoration: line-through;
}
.cal-detail-item--cancelled {
    color: var(--color-alert);
}
.cal-detail-item--cancelled .cal-detail-main {
    text-decoration: line-through;
}

/* ===== Délocalisations — Lot 7C prompt 6 (warn) puis prompt 9. La GRILLE n'utilise plus le
   warn : le sens est désormais porté par l'épingle ti-map-pin sur la vignette (qui garde sa
   couleur de catégorie). Le VOLET garde le warn (texte sur fond clair, pas de vignette). ===== */
.cal-detail-item--relocated {
    color: var(--color-warn);
}

/* ===== Notes annulation / délocalisation — SCOPÉES volet + agenda (Lot 7C prompt 8,
   Décision 8). Jamais de règle globale : la carte horaires home (section 14) utilise
   les mêmes classes sous .schedule-list — une globale créerait deux sources de vérité. ===== */
.cal-detail-item--cancelled .cancelled-note,
.calendar-agenda-item--cancelled .cancelled-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--color-alert);
}
.cal-detail-item--relocated .relocated-note,
.calendar-agenda-item--relocated .relocated-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--color-warn);
}

/* ===== Vue agenda (mobile) — Lot 7C prompt 8 ===== */
.calendar-agenda-day { margin-bottom: 1rem; }
.calendar-agenda-day__label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 0.3rem 0.1rem;
    color: var(--color-on-calendar-bg);
}
.calendar-agenda-day--today .calendar-agenda-day__label { color: var(--color-secondary); }
.calendar-agenda-item {
    border-left: 4px solid #999;          /* écrasé inline par category_color */
    border-radius: 0 4px 4px 0;
    background: rgba(0,0,0,0.04);
    padding: 8px 10px;
    margin-top: 6px;
}
.calendar-agenda-item.hidden { display: none; }
.cal-ag-time  { font-weight: 700; margin-right: 6px; }
.cal-ag-loc   { display: block; font-size: 0.85em; color: #666; }
/* Barré annulation scopé au wrapper .cal-ag-main (jamais le parent) ; warn déloc sans barré. */
.calendar-agenda-item--cancelled .cal-ag-main { text-decoration: line-through; color: var(--color-alert); }
.calendar-agenda-item--relocated .cal-ag-main { color: var(--color-warn); }

/* ===== Bascule responsive (mobile-first — Lot 7C prompt 8, Décisions 1 + 9) =====
   Mobile (défaut) : agenda visible, grille + volet masqués.
   Desktop ≥ 641px : grille + volet visibles, agenda masqué.
   .calendar-detail.hidden { display: none } (spécificité 0,2,0) garde la main sur le
   display:block desktop (0,1,0) → un volet fermé reste fermé. */
.calendar-grid,
.calendar-detail { display: none; }
.calendar-agenda { display: block; }

@media (min-width: 641px) {
    .calendar-grid   { display: block; }
    .calendar-detail { display: block; }
    .calendar-agenda { display: none; }

    /* Noms complets : titres qui reviennent à la ligne au lieu d'être tronqués (Décision 7) */
    .calendar-event-item { white-space: normal; }
    .cal-evt-title { overflow: visible; text-overflow: clip; }

    /* min-width du label rétabli en desktop (Décision 9) */
    .calendar-month-label { min-width: 200px; }
}

/* ===========================================================================
   17. PAGES INTÉRIEURES (Lot 7D prompt 1)
       Fil d'Ariane + en-tête de page. La LARGEUR (~800px centré) et la typo du
       CONTENU viennent de .sample (section 10), réutilisé comme cadre — pas
       reposées ici. Seul le TITRE de page est restylé (cf. .page-header h1).
   =========================================================================== */

/* Fil d'Ariane — discret, sous le menu, gris taupe (architecture § Principes
   visuels : "Fil d'Ariane : sous le menu, discret, texte gris léger"). */
.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
  color: var(--color-meta);
}
.breadcrumb a { color: var(--color-meta); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 0.4rem; color: var(--color-meta); }
.breadcrumb-current { color: var(--texte); font-weight: 500; }

/* En-tête de page intérieure. Le titre REDÉCLARE l'identité typographique des
   titres (Playfair, bordeaux, 2.2rem) : le RESET global (section 3) ne pose que
   margin + font-weight sur h1 ; cette identité était jusqu'ici portée
   UNIQUEMENT par .sample h1. On la redéclare ici pour DÉCOUPLER le titre de
   page de .sample (une page intérieure garde son titre stylé même hors .sample,
   et la page de référence ne dépend pas d'un héritage implicite). */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin: 0;
}

/* ===========================================================================
   18. PAGES INTÉRIEURES — LISTES (Lot 7D prompt 2)
       Composant .content-card réutilisable (articles + futurs events + newsletters).
       Pagination publique alignée sur l'admin (classes .current / .disabled).
       Article seul (image à la une, méta, navigation prev/next).
   =========================================================================== */

/* --- Composant .content-card : réutilisable --- */
.content-card-list { display: flex; flex-direction: column; }

.content-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--sable);
}
.content-card:last-child { border-bottom: 0; }

.content-card__media {
  flex: 0 0 140px;
  width: 140px;
  height: 96px;
  border-radius: 6px;
  background: var(--sable) center / cover no-repeat;
  display: block;
}

.content-card__body { flex: 1; min-width: 0; }

.content-card__meta {
  font-size: 0.78rem;
  color: var(--color-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.content-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.content-card__title a { color: inherit; text-decoration: none; }
.content-card__title a:hover { text-decoration: underline; }

.content-card__excerpt {
  font-size: 0.92rem;
  color: var(--texte);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.content-card__action {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
}
.content-card__action:hover { text-decoration: underline; }

/* Responsive : sous 640, image au-dessus du texte */
@media (max-width: 640px) {
  .content-card { flex-direction: column; gap: 0.5rem; }
  .content-card__media { flex: 0 0 auto; width: 100%; height: 160px; }
}

/* État vide */
.page-empty { color: var(--color-meta); font-style: italic; }

/* --- Pagination publique (alignée admin, mêmes classes .current / .disabled) --- */
.pagination {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--sable);
  border-radius: 4px;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--texte);
  background: #fff;
}
.pagination a:hover { background: var(--sable); }
.pagination .current {
  background: var(--color-primary);
  color: #fff;                       /* token --color-on-primary inexistant — cf. parking 7L */
  border-color: var(--color-primary);
  font-weight: 600;
}
.pagination .disabled {
  color: var(--color-meta);
  background: transparent;
  pointer-events: none;
}

/* --- Article seul --- */
.article-single__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.2rem;
  border-radius: 6px;
}
.article-single__meta {
  font-size: 0.85rem;
  color: var(--color-meta);
  margin: 0 0 0.3rem;
  font-style: italic;
}

/* --- Navigation prev/next entre articles --- */
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sable);
}
.article-nav__link {
  flex: 1 1 0;
  max-width: 48%;
  text-decoration: none;
  color: var(--texte);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.article-nav__link--prev { text-align: left; }
.article-nav__link--next { text-align: right; }
.article-nav__label { font-size: 0.78rem; color: var(--color-meta); }
.article-nav__title { font-size: 0.95rem; color: var(--color-primary); font-weight: 500; }
.article-nav__link:hover .article-nav__title { text-decoration: underline; }
.article-nav__spacer { flex: 1 1 0; max-width: 48%; }

@media (max-width: 640px) {
  .article-nav { flex-direction: column; }
  .article-nav__link, .article-nav__spacer { max-width: 100%; }
  .article-nav__link--next { text-align: left; }
}

/* ===========================================================================
   19. ÉVÉNEMENTS (Lot 7D prompt 3 + refonte présentation « C1-c-4ter »)
       Page « Événements à venir » : pilules de filtre (no-JS), en-têtes de
       semaine, rangées .event-row (bande date latérale JOUR/N°/MOIS + liseré or
       + corps en grille titre|lieu|heure), page événement seul.
       La page vit dans .sample → certaines règles sont scopées « .sample … » /
       « .event-row … » pour battre .sample a / .sample h2 / .sample h3 (0,1,1).
       Couleurs de catégorie posées INLINE (hex validé #RRGGBB par save_category).
   =========================================================================== */

/* --- Filtres (pilules <a>, no-JS — état dans l'URL ?cat=) --- */
.event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.event-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--sable);
  border-radius: 999px;
  font-size: 0.82rem;
  background: #fff;
  text-decoration: none;
  line-height: 1.4;
}
/* La page événements vit dans .sample, dont « .sample a » impose un soulignage
   (spécificité 0,1,1) qui battait « .event-filter » (0,1,0). On neutralise avec
   une spécificité supérieure (0,2,0). Pas d'icône dans les pilules : la coloration
   (active = fond plein de la catégorie ; inactive = contour) suffit à signaler
   l'état (décision client Lot 7D-3). */
.sample .event-filter,
.sample .event-filter:hover { text-decoration: none; }

/* --- En-tête de semaine (italique Playfair + court filet or) ---
   Scopé .sample pour battre .sample h2 (0,1,1). --- */
.sample .events-week {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 1.9rem 0 0.8rem;
  display: inline-block;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--accent);
}
.sample .events-week:first-of-type { margin-top: 0; }

/* --- Liste d'événements : rangées « C1-c-4ter » (design validé) ---
   Bande date latérale (fond = couleur catégorie via --evr-c, liseré or) + corps
   en grille : titre | lieu aligné | heure (colonne fixe → lieux alignés au même x).
   Classes .event-row/.evr-* dédiées (PAS .card ni .content-card : éviter toute
   collision avec la sidebar home et les cartes articles). */
.event-list { display: flex; flex-direction: column; gap: 0.6rem; }

.event-row {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--blanc);
  box-shadow: 0 2px 7px rgba(92, 34, 40, 0.06);
  transition: transform 0.12s, box-shadow 0.12s;
}
/* .sample a impose soulignage + couleur (0,1,1) sur les rangées cliquables : neutralisé (0,2,0). */
.sample .event-row,
.sample .event-row:hover { text-decoration: none; color: inherit; }
.sample a.event-row:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(92, 34, 40, 0.10); }

/* Bande date latérale */
.evr-date {
  flex: 0 0 78px;
  background: var(--evr-c, var(--color-secondary));
  color: var(--evr-ct, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.35rem;
  border-right: 3px solid var(--accent);
}
.evr-dow,
.evr-mon { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; line-height: 1; }
/* Chiffre du jour : line-height 1 + marge-bas .75rem = espacement OPTIQUE égal
   au-dessus / en dessous (le chiffre Playfair laisse un creux sous sa ligne de
   base ; valeur mesurée à l'encre via canvas). */
.evr-day { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1; margin: 0 0 0.75rem; }

/* Corps : titre | lieu (aligné) | heure (colonne fixe pour aligner tous les lieux) */
.evr-body {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1.1rem;
  padding: 0.4rem 1.1rem;
}
/* .evr-title est un <h3> : scopé .event-row pour battre .sample h3 (0,1,1). */
.event-row .evr-title {
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--color-primary);
  line-height: 1.1;
  margin: 0;
}
.evr-mid { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.evr-loc { font-size: 0.88rem; color: var(--color-meta); }
.evr-time {
  justify-self: end;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-primary);
  white-space: nowrap;
}

.event-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* --- Annulé / délocalisé --- */
.event-row--cancelled { opacity: 0.62; }
.event-row--cancelled .evr-date { background: var(--sable); color: var(--texte-leger); border-right-color: var(--hairline); }
.event-row--cancelled .evr-title,
.event-row--cancelled .evr-time { text-decoration: line-through; }
.event-note {
  display: block;
  font-size: 0.74rem;
  font-style: italic;
  margin-top: 0.05rem;
}
.event-note--cancelled { color: var(--color-alert); }
.event-note--relocated { color: var(--color-warn); }

.events-more {
  margin-top: 1.6rem;
  font-size: 0.9rem;
}
.events-more a { color: var(--color-primary); }

/* --- Page événement seul --- */
.event-single__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.2rem;
  border-radius: 6px;
}
.event-single__meta {
  font-size: 0.9rem;
  color: var(--color-meta);
  margin: 0 0 0.3rem;
}

@media (max-width: 640px) {
  .event-filter { font-size: 0.78rem; }
  /* La grille 3 colonnes ne tient pas dans ~230px : titre + heure (ligne 1),
     lieu pleine largeur (ligne 2). L'alignement des lieux en colonne reste un
     comportement desktop. */
  .evr-body {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title time" "loc loc";
    align-items: baseline;
    column-gap: 0.7rem;
    row-gap: 0.2rem;
    padding: 0.55rem 0.85rem 0.65rem;
  }
  .event-row .evr-title { grid-area: title; font-size: 1.12rem; }
  .evr-mid { grid-area: loc; }
  .evr-time { grid-area: time; font-size: 1.25rem; }
}

/* ===========================================================================
   20. FEUILLE PAROISSIALE (Lot 7D — liste des PDF téléchargeables, design « N2-c »)
   Cartes-rangées alignées sur .event-row (section 19) : fond --blanc, filet
   --hairline, radius 12px, ombre littérale. Spécificités N2-c : liseré or à
   gauche (--color-accent) + bouton fantôme « Télécharger » rempli au survol.
   Rangée = un seul <a> (PDF, nouvel onglet) → liens scopés .sample pour battre
   .sample a (soulignage + couleur, 0,1,1 → 0,2,0).
   =========================================================================== */

.newsletter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.newsletter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(92, 34, 40, 0.06);
  transition: transform 0.12s, box-shadow 0.12s;
}

/* .sample a impose soulignage + couleur (0,1,1) sur la rangée-lien : neutralisé (0,2,0). */
.sample .newsletter-row,
.sample .newsletter-row:hover { text-decoration: none; color: inherit; }
.sample a.newsletter-row:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(92, 34, 40, 0.10); }

.nl-body {
  flex: 1;
  min-width: 0;          /* laisse les titres longs s'enrouler au lieu de déborder */
  display: flex;
  flex-direction: column;
}

.nl-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--color-primary);
}

.nl-date {
  margin-top: 0.12rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-meta);
}

/* Bouton fantôme : contour bordeaux, se remplit (bordeaux + blanc) au survol de la rangée. */
.nl-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.nl-btn .ti { font-size: 1rem; }
.sample .newsletter-row:hover .nl-btn { background: var(--color-primary); color: var(--blanc); }

@media (max-width: 640px) {
  .newsletter-row { padding: 0.7rem 0.85rem; }
  .nl-title { font-size: 1.1rem; }
}

/* ===========================================================================
   21. CONTACT (Lot 7D — coordonnées + formulaire, design « C2-c »)
   Bandeau coordonnées bordeaux (--color-footer) + carte formulaire pleine
   largeur (champs 2 colonnes). La page vit dans .sample → liens et titre
   scopés .sample pour battre .sample a (0,1,1) et .sample h2 (0,1,1).
   =========================================================================== */

.sample .contact-lead { color: var(--texte-leger); margin: 0 0 1.4rem; }

/* --- Bandeau coordonnées (bordeaux) --- */
.contact-band {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem 2.6rem;
  align-items: center;
  background: var(--color-footer);
  color: var(--or-soft);
  border-radius: 14px;
  padding: 1.3rem 1.7rem;
  margin: 0 0 1.6rem;
  box-shadow: 0 4px 18px rgba(92, 34, 40, 0.10);
}
.bd-item { display: flex; align-items: center; gap: 0.6rem; }
.bd-item .ti { font-size: 1.5rem; color: var(--color-accent); flex: 0 0 auto; }
.bd-lbl {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent);
  margin-bottom: 0.1rem;
}
.bd-val { font-size: 1rem; color: var(--or-soft); line-height: 1.3; }
.bd-phone { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1; }
/* .sample a impose soulignage + couleur (0,1,1) : neutralisé sur le bandeau (0,2,1). */
.sample .contact-band a { color: var(--or-soft); text-decoration: none; }
.sample .contact-band .bd-phone a { color: var(--blanc); }
.sample .contact-band a:hover { text-decoration: underline; }

/* --- Carte formulaire pleine largeur --- */
.form-card {
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--color-accent);
  border-radius: 14px;
  padding: 1.7rem 1.8rem;
  box-shadow: 0 4px 18px rgba(92, 34, 40, 0.07);
}
.sample .fc-title {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-primary);
  font-size: 1.2rem;
  margin: 0 0 1.2rem;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.3rem;
}
.contact-form .field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.32rem; }
.field label { font-weight: 600; color: var(--color-primary); font-size: 0.9rem; }
.field .req { color: var(--color-alert); }
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.64rem 0.78rem;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--blanc);
  color: var(--texte);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 183, 112, 0.35);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--color-alert); }
.field-error { color: var(--color-alert); font-size: 0.82rem; }

.contact-form .btn { grid-column: 1 / -1; justify-self: start; }

/* --- Messages (flash succès / erreur), palette chaude + filet latéral --- */
.form-flash {
  border-radius: 9px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
}
.form-flash--success {
  background: var(--or-soft);
  border-left: 4px solid var(--color-accent);
  color: var(--color-primary);
}
.form-flash--error {
  background: var(--sable);
  border-left: 4px solid var(--color-alert);
  color: var(--color-alert);
}

/* ===========================================================================
   22. CONTENU CMS — KIT DE COMPOSANTS (pages WYSIWYG, page.php)
       Briques réutilisables pour les pages de contenu rédigées en WYSIWYG (ou
       générées hors-ligne puis collées en vue « Code source » de TinyMCE).
       Tout est scopé .sample (le contenu vit dans <div class="sample">) et bâti
       UNIQUEMENT sur les tokens → suit la palette éditable, aucune couleur en
       dur. Mobile-first : empilé par défaut, multi-colonnes au breakpoint maison
       (min-width: 641px, cf. §16).

       Plusieurs sélecteurs sont scopés « .sample … » pour battre la cascade du
       §10 (.sample a = 0,1,1 ; .sample p = 0,1,1 ; .sample figure = 0,1,1),
       même motif que .page-index / .event-row / .contact-band.

       Liste blanche associée : config.php ALLOWED_HTML_TAGS autorise <div>
       (conteneur des composants) + le pack étendu (b i sub sup small h5 h6
       dl dt dd caption). Doc de rédaction : cadre-generation-page.md.
   =========================================================================== */

/* --- Balises sémantiques nouvellement autorisées, mises au thème --- */
.sample h5 {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  color: var(--texte);
  margin: 1.1rem 0 0.3rem;
}
.sample h6 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--color-meta);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 1.1rem 0 0.3rem;
}
.sample dl { margin: 0 0 1rem; }
.sample dt { font-weight: 600; color: var(--texte); margin-top: 0.6rem; }
.sample dd { margin: 0 0 0.4rem 1.2rem; color: var(--texte-leger); }
.sample caption {
  caption-side: bottom;
  font-size: 0.85rem;
  color: var(--color-meta);
  font-style: italic;
  text-align: left;
  margin-top: 0.4rem;
}

/* --- Chapô d'introduction (.sample .lead 0,2,0 bat .sample p 0,1,1) --- */
.sample .lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-meta);
  margin: 0 0 1.4rem;
}

/* --- Utilitaire : centrage (.sample .text-center 0,2,0 bat .sample p) --- */
.sample .text-center { text-align: center; }

/* --- Grilles responsives : 1 colonne sur mobile → 2 ou 3 dès 641px --- */
.sample .cols-2,
.sample .cols-3 {
  display: grid;
  gap: 1.2rem;
  margin: 1.4rem 0;
}

/* --- Carte de contenu (DISTINCTE de .card §14, réservée à la sidebar accueil).
   Fond blanc, fine bordure hairline, ombre douce (même valeur que la carte
   formulaire contact), coins arrondis via le token. --- */
.sample .bloc {
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-radius: var(--border-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 18px rgba(92, 34, 40, 0.07);
}
.sample .bloc > :first-child { margin-top: 0; }
.sample .bloc > :last-child { margin-bottom: 0; }

/* --- Encart « à noter » : fond or pâle + liseré or à gauche --- */
.sample .callout {
  background: var(--or-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.sample .callout > :first-child { margin-top: 0; }
.sample .callout > :last-child { margin-bottom: 0; }

/* --- Image + texte côte à côte (empilés sur mobile). DOM attendu : <figure>
   PUIS le bloc de texte, dans cet ordre, pour les DEUX variantes ; media-right
   renvoie l'image à droite via `order` au breakpoint. .sample .media-* > figure
   (0,2,1) neutralise la marge de .sample figure (0,1,1). --- */
.sample .media-left,
.sample .media-right {
  display: grid;
  gap: 1.3rem;
  margin: 1.4rem 0;
  align-items: start;
}
.sample .media-left > figure,
.sample .media-right > figure { margin: 0; }
.sample .media-left > figure img,
.sample .media-right > figure img { display: block; width: 100%; }
/* Aligne le haut de l'image avec le haut du texte (annule la marge du 1er enfant). */
.sample .media-left > * > :first-child,
.sample .media-right > * > :first-child { margin-top: 0; }

/* --- Bouton-lien (.btn §8) dans le contenu : .sample a (0,1,1) imposait
   soulignage + couleur bordeaux ; on rétablit le rendu bouton (0,2,1). --- */
.sample a.btn,
.sample a.btn:hover { text-decoration: none; color: var(--color-bg-page); }

/* --- Bascule desktop (breakpoint maison 641px) --- */
@media (min-width: 641px) {
  .sample .cols-2 { grid-template-columns: 1fr 1fr; }
  .sample .cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .sample .media-left  { grid-template-columns: 1fr 1.5fr; }
  .sample .media-right { grid-template-columns: 1.5fr 1fr; }
  .sample .media-right > figure { order: 2; }
}

/* --- Honeypot : piège à robots, invisible (sans display:none) --- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Responsive --- */
@media (max-width: 640px) {
  .contact-band { gap: 1rem 1.5rem; padding: 1.1rem 1.2rem; }
  .contact-form { grid-template-columns: 1fr; }
  .form-card { padding: 1.3rem 1.2rem; }
}
