/* ==========================================================================
   Les Clochers de l'Yerres — feuille de style
   Direction « Vitrail ».

   Les couleurs ne sont pas choisies au hasard : elles sont relevées sur le
   vitrail de Saint Leu (F. Haussaire) de l'église de Courquetaine — cobalt,
   rubis, turquoise, or, sur le brun des plombs. Cf. docs/charte.md.

   Écrit MOBILE D'ABORD : les règles de base visent le téléphone, les media
   queries n'ajoutent que ce que la largeur permet. C'est le bon ordre ici,
   parce que l'usage dominant d'un site de paroisse est « la messe est où
   dimanche ? », consulté sur un téléphone, souvent dans la voiture.
   ========================================================================== */

:root {
  /* Verre et plomb */
  --plomb:        #14100E;
  --nuit:         #1B1613;
  --cobalt:       #224698;
  --cobalt-clair: #4EA5E6;
  --rubis:        #951B2B;
  --or:           #C99B3A;
  --turquoise:    #1D758C;

  /* Jour */
  --jour:   #EDEDE9;
  --papier: #F7F7F4;
  --encre:  #1A1917;
  --gris:   #5E5C57;
  --trait:  #D8D8D2;

  --serif: "Hoefler Text", Baskerville, "Big Caslon", "Palatino Linotype",
           Palatino, Georgia, serif;
  --sans:  Optima, Candara, "Gill Sans MT", "Gill Sans", "Avenir Next",
           system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --large: 1180px;
  --marge: 18px;
}

@media (min-width: 700px) { :root { --marge: 32px; } }

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

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

body {
  margin: 0;
  background: var(--jour);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalt); }
a:hover { color: var(--rubis); }

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

.contenu {
  max-width: var(--large);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* Lien d'évitement, pour le clavier et les lecteurs d'écran */
.evitement {
  position: absolute; left: -9999px;
  background: var(--or); color: var(--plomb);
  padding: 10px 16px; z-index: 100;
}
.evitement:focus { left: 8px; top: 8px; }

/* ─────────────────────────── Titres ─────────────────────────── */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1;
             margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 8vw, 62px); letter-spacing: -0.022em; }
h2 { font-size: clamp(23px, 5vw, 34px); letter-spacing: -0.015em; }
h3 { font-size: 20px; }
p  { margin: 0 0 1em; }

.surtitre {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 12px;
}
.surtitre.sombre { color: var(--rubis); }

.tab { font-variant-numeric: tabular-nums; }

/* ─────────────────────── En-tête et navigation ─────────────────────── */

.entete {
  background: var(--plomb);
  color: #EAE6DF;
  position: relative;
  z-index: 5;
}
.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.marque {
  font-family: var(--serif);
  font-size: 19px;
  color: #EAE6DF;
  text-decoration: none;
  line-height: 1.15;
}
.marque em { font-style: normal; color: var(--or); }

.bouton-menu {
  font: inherit;
  font-size: 14px;
  color: #EAE6DF;
  background: transparent;
  border: 1px solid rgba(234, 230, 223, 0.32);
  border-radius: 3px;
  padding: 7px 12px;
  cursor: pointer;
}

.navigation { display: none; }
.navigation.ouverte { display: block; }
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navigation a {
  display: block;
  padding: 11px 2px;
  color: rgba(234, 230, 223, 0.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(234, 230, 223, 0.10);
  font-size: 16px;
}
.navigation a:hover, .navigation a[aria-current="page"] { color: var(--or); }

@media (min-width: 900px) {
  .bouton-menu { display: none; }
  .navigation { display: block !important; }
  .navigation ul { flex-direction: row; gap: 22px; padding: 0; }
  .navigation a { border-bottom: 0; padding: 4px 0; font-size: 14.5px; }
  .entete-barre { padding-top: 18px; padding-bottom: 18px; }
  .marque { font-size: 21px; }
}

/* ───────────────────────────── Bandeau ───────────────────────────── */

.bandeau {
  background: var(--plomb);
  color: #EAE6DF;
  position: relative;
  overflow: hidden;
  padding-top: 26px;
  padding-bottom: 34px;
}

/* La lumière qui traverse le verre. Discrète, lente. */
.halo {
  position: absolute;
  inset: -40% 0 auto -35%;
  height: 170%;
  pointer-events: none;
  background: radial-gradient(closest-side,
              rgba(78, 165, 230, 0.28),
              rgba(34, 70, 152, 0.12) 55%,
              transparent 78%);
}
@media (prefers-reduced-motion: no-preference) {
  .halo { animation: respire 15s ease-in-out infinite; }
  @keyframes respire {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
  }
}

.bandeau-grille { position: relative; z-index: 1; }

.bandeau h1 { margin-top: 12px; }
.bandeau h1 em { font-style: italic; color: var(--cobalt-clair); }

.quand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 20px;
}
.quand .heure { font-family: var(--serif); font-size: 30px; color: var(--or); }
.quand .ou { font-size: 15px; color: rgba(234, 230, 223, 0.68); max-width: 40ch; }

.verriere { margin-top: 30px; }
.verriere img {
  width: 100%;
  border: 1px solid rgba(201, 155, 58, 0.34);
  box-shadow: 0 0 0 6px rgba(20, 16, 14, 0.6), 0 24px 56px rgba(0, 0, 0, 0.55);
}
.verriere figcaption {
  font-size: 11.5px;
  color: rgba(234, 230, 223, 0.5);
  margin-top: 10px;
}

@media (min-width: 860px) {
  .bandeau { padding-top: 46px; padding-bottom: 54px; }
  .bandeau-grille {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 46px;
    align-items: center;
  }
  .verriere { margin-top: 0; }
  .quand .heure { font-size: 36px; }
}

/* ──────────────────────── Le chemin du mois ──────────────────────── */

.chemin {
  background: var(--nuit);
  color: #EAE6DF;
  padding-top: 26px;
  padding-bottom: 26px;
}
.chemin .surtitre { color: rgba(234, 230, 223, 0.55); }

/* Sur téléphone les étapes défilent horizontalement plutôt que de s'empiler :
   le mois se lit d'un geste, comme sur le papier. */
.etapes {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.etape {
  flex: 0 0 62%;
  scroll-snap-align: start;
  background: rgba(234, 230, 223, 0.05);
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
}
.etape.active {
  background: linear-gradient(180deg, rgba(34, 70, 152, 0.55), rgba(29, 117, 140, 0.28));
}
/* Chaque information sur sa ligne : sans ce display:block, le jour, le lieu et
   l'heure se suivent au fil du texte et la carte devient illisible. */
.etape .j, .etape .lieu, .etape .h { display: block; }
.etape .j {
  font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(234, 230, 223, 0.56);
}
.etape.active .j { color: var(--cobalt-clair); }
.etape .lieu { font-family: var(--serif); font-size: 20px; margin-top: 6px; line-height: 1.12; }
.etape .h { font-size: 12.5px; color: rgba(234, 230, 223, 0.5); margin-top: 5px; }

.pastille {
  display: inline-block;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--rubis); color: #fff;
  padding: 2px 7px; border-radius: 2px; margin-top: 8px;
}

@media (min-width: 700px) {
  .etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; }
  .etape { flex: none; }
}

/* ───────────────────────────── Sections ──────────────────────────── */

.section { padding-top: 40px; padding-bottom: 40px; }
.section.claire { background: var(--jour); }
.section.papier { background: var(--papier); }
.section > * + h2 { margin-top: 0; }
.section .intro { max-width: 58ch; color: var(--gris); }

@media (min-width: 700px) { .section { padding-top: 58px; padding-bottom: 58px; } }

/* Cartes « vous cherchez à… » */
.besoins {
  display: grid;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  margin-top: 22px;
}
@media (min-width: 620px) { .besoins { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .besoins { grid-template-columns: repeat(3, 1fr); } }

.besoin {
  background: var(--papier);
  padding: 19px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
}
.besoin:hover { background: #fff; }
.besoin b { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.besoin span { font-size: 14px; color: var(--gris); }
.besoin .delai {
  margin-top: auto; padding-top: 10px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cobalt);
}

/* Liste de messes */
.messes { border-top: 1px solid var(--trait); margin-top: 20px; }
.messe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}
.messe .h { font-family: var(--serif); font-size: 19px; color: var(--cobalt); }
.messe .lieu { font-weight: 600; }
.messe .det { font-size: 13.5px; color: var(--gris); }
.messe .pastille { align-self: start; }

@media (min-width: 620px) {
  .messe { grid-template-columns: 120px 1fr; gap: 18px; align-items: baseline; }
}

/* Grille des clochers */
.clochers {
  display: grid;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  margin-top: 22px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 780px) { .clochers { grid-template-columns: repeat(4, 1fr); } }

.clocher-case {
  background: var(--papier);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.clocher-case:hover { background: #fff; }
.clocher-case b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 400; }
.clocher-case span { display: block; font-size: 12px; color: var(--gris); margin-top: 3px; }
.clocher-case.actif { background: var(--cobalt); color: #fff; }
.clocher-case.actif span { color: rgba(255, 255, 255, 0.78); }

/* Galerie des clochers : une colonne sur téléphone, deux dès qu'il y a la
   place, quatre sur grand écran. */
.galerie {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
@media (min-width: 560px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .galerie { grid-template-columns: repeat(4, 1fr); } }

.tuile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--papier);
  border: 1px solid var(--trait);
  overflow: hidden;
}
.tuile:hover { border-color: var(--cobalt); }
.tuile img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
@supports not (object-fit: cover) { .tuile img { height: auto; } }
.tuile-texte { padding: 12px 13px; }
.tuile-texte b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.tuile-texte span { display: block; font-size: 12.5px; color: var(--gris); margin-top: 2px; }

/* Repli quand une église n'a pas encore de photo : un panneau de verre
   plutôt qu'un cadre vide ou une image générique. */
.vitre {
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(135deg, rgba(34,70,152,.92), rgba(29,117,140,.85) 46%, rgba(149,27,43,.78)),
    var(--plomb);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: #fff;
  font-family: var(--serif);
  font-size: 17px;
}
@supports not (aspect-ratio: 3 / 2) { .vitre { height: 190px; } }

/* Actualités */
.actus { display: grid; gap: 20px; margin-top: 22px; }
@media (min-width: 760px) { .actus { grid-template-columns: repeat(3, 1fr); } }
.actu { background: var(--papier); border: 1px solid var(--trait); }
.actu .corps { padding: 16px; }
/* Les affiches de paroisse sont en portrait : on cadre la vignette pour que
   les cartes gardent la même hauteur, l'affiche entière restant visible sur
   la page de l'actualité. */
.actu-image { display: block; }
.actu-image img { width: 100%; height: 200px; object-fit: cover; object-position: top center; }
@supports not (object-fit: cover) { .actu-image img { height: auto; } }
.actu-affiche {
  max-width: 460px;
  margin: 22px 0;
  border: 1px solid var(--trait);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
.actu h3 { font-size: 19px; margin-bottom: 6px; }
.actu .date { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--turquoise); }
.actu p { font-size: 14px; color: var(--gris); margin: 8px 0 0; }

/* ─────────────────────────── Publications ─────────────────────────── */

.livre {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  padding: 28px 0;
  border-bottom: 1px solid var(--trait);
}
.livre:last-of-type { border-bottom: 0; }
@media (min-width: 720px) {
  .livre { grid-template-columns: 240px 1fr; gap: 38px; align-items: start; }
}
.livre-couv img {
  width: 100%;
  border: 1px solid var(--trait);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.livre-texte h3 { font-size: 25px; }
.livre-sous { font-size: 15.5px; color: var(--gris); margin: 5px 0 0; }
.livre-auteur {
  font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--cobalt); margin: 10px 0 16px;
}
.livre-cit {
  margin: 18px 0;
  padding-left: 16px;
  border-left: 3px solid var(--or);
  font-family: var(--serif);
  font-size: 18px;
  color: var(--encre);
}
.livre-ou { font-size: 14px; color: var(--gris); }

/* Liste des membres d'une équipe */
.membres { list-style: none; padding: 0; margin: 22px 0; border-top: 1px solid var(--trait); }
.membre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 640px) {
  .membre { flex-direction: row; align-items: baseline; gap: 14px; }
  .membre-nom { flex: 0 0 210px; }
  .membre-role { flex: 1 1 auto; }
}
.membre-nom { font-weight: 600; }
.membre-role { font-size: 14px; color: var(--gris); }
.membre-via { font-size: 13.5px; }

/* Encart « rejoindre » : discret mais visible, il ne doit pas concurrencer
   l'information principale (où et quand est la messe). */
.rejoindre {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--turquoise);
}
.rejoindre b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.rejoindre span { display: block; font-size: 14px; color: var(--gris); margin-top: 4px; max-width: 60ch; }
@media (min-width: 720px) {
  .rejoindre { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .rejoindre .bouton { flex: 0 0 auto; }
}

/* ─────────────────── Coordonnées protégées ─────────────────── */

.coord { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reveler {
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--cobalt);
  color: var(--cobalt);
  background: transparent;
  border-radius: 2px;
}
.reveler:hover { background: var(--cobalt); color: #fff; }
.reveler[disabled] { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .reveler { transition: background-color .18s ease, color .18s ease; }
}
.coord-valeur { font-weight: 600; }
.coord-valeur a { text-decoration: none; }

/* ───────────────────────────── Formulaire ─────────────────────────── */

.formulaire { max-width: 620px; margin-top: 22px; }
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: 13.5px; color: var(--gris); margin-bottom: 5px; }
.champ input, .champ select, .champ textarea {
  font: inherit;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--trait);
  border-radius: 3px;
  background: #fff;
  color: var(--encre);
}
.champ textarea { min-height: 150px; resize: vertical; }
/* Le piège à robots : hors de l'écran, hors du flux, invisible au lecteur
   d'écran (aria-hidden dans le gabarit) mais rempli par les automates. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bouton {
  font: inherit;
  font-size: 16px;
  padding: 12px 22px;
  background: var(--cobalt);
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.bouton:hover { background: var(--rubis); }

.alerte { padding: 14px 16px; border-left: 3px solid var(--rubis); background: #fff; margin-bottom: 18px; }
.alerte.ok { border-left-color: var(--turquoise); }
.alerte ul { margin: 0; padding-left: 18px; }

/* ─────────────────────────────── Pied ─────────────────────────────── */

.pied {
  background: var(--plomb);
  color: rgba(234, 230, 223, 0.72);
  padding-top: 34px;
  padding-bottom: 34px;
  font-size: 14px;
  margin-top: 0;
}
.pied a { color: rgba(234, 230, 223, 0.86); }
.pied a:hover { color: var(--or); }
.pied-grille { display: grid; gap: 24px; }
@media (min-width: 760px) { .pied-grille { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.pied h3 { font-size: 14px; font-family: var(--sans); letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--or); margin-bottom: 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 6px; }
.pied .mention { margin-top: 26px; font-size: 12px; color: rgba(234, 230, 223, 0.42); }

/* ───────────────────────────── Impression ────────────────────────── */

@media print {
  .entete, .pied, .halo, .verriere, .bouton-menu, .navigation { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .bandeau, .chemin { background: #fff !important; color: #000 !important; }
  .etape { border: 1px solid #999; }
}