/* =====================================================================
   SITE DE L'ÉGLISE DE RÉVEIL - BEAUVAIS
   Feuille de style principale (style.css)
   Organisation : variables > bases > en-tête > accueil > sections
   (dans l'ordre de la page) > dons > pied de page
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIABLES
   Toutes les couleurs et polices sont définies ici une seule fois.
   Pour changer une couleur sur tout le site, il suffit de la modifier ici.
   --------------------------------------------------------------------- */
:root {
  --bg: #ffffff;        /* fond principal (blanc) */
  --cream: #f6f3f0;     /* fond gris chaud des sections alternées */
  --ink: #1f1a17;       /* couleur du texte principal (presque noir) */
  --muted: #6b5f57;     /* texte secondaire, plus discret (gris-brun) */
  --orange: #e8590c;    /* couleur principale de l'église (orange du logo) */
  --amber: #f59f00;     /* orange plus clair (contour au focus clavier) */
  --gold: #ffd43b;      /* jaune (liens du pied de page) */
  --line: #e4ddd6;      /* couleur des bordures fines des cases */
  --display: "Montserrat", "Segoe UI", Arial, sans-serif;  /* police des titres (la même que le logo) */
  --body: "Source Sans 3", "Segoe UI", Arial, sans-serif;  /* police du texte courant */
  color-scheme: light;  /* indique au navigateur que le site est en thème clair */
}


/* ---------------------------------------------------------------------
   2. BASES (règles appliquées à toute la page)
   --------------------------------------------------------------------- */
* {
  box-sizing: border-box;  /* la largeur d'un élément inclut ses marges intérieures et sa bordure */
}

html {
  scroll-behavior: smooth;  /* défilement doux quand on clique sur un lien du menu */
}

/* Si la personne a demandé moins d'animations dans son téléphone/ordi */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;  /* on désactive le défilement doux */
  }
}

body {
  margin: 0;                   /* supprime la marge blanche ajoutée par défaut par le navigateur */
  background: var(--bg);       /* fond blanc */
  color: var(--ink);           /* couleur du texte */
  font-family: var(--body);    /* police du texte courant */
  font-size: 17px;             /* taille de texte de base */
  line-height: 1.6;            /* espace entre les lignes (1,6 fois la taille du texte) */
}

img {
  max-width: 100%;  /* une image ne dépasse jamais la largeur de l'écran */
}

[hidden] {
  display: none !important;  /* un élément avec l'attribut "hidden" est vraiment caché (sert au menu mobile) */
}

h1, h2, h3 {
  font-family: var(--display);  /* les titres utilisent la police Montserrat */
  line-height: 1.15;            /* lignes plus serrées pour les titres */
  text-wrap: balance;           /* répartit le texte des titres de façon équilibrée sur les lignes */
  margin: 0;                    /* supprime les marges par défaut des titres */
}

p {
  margin: 0;  /* supprime les marges par défaut des paragraphes (on gère les espaces nous-mêmes) */
}

a {
  color: var(--orange);  /* les liens sont orange */
}

/* Contour visible quand on navigue au clavier (touche Tab) : important pour l'accessibilité */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--amber);  /* contour orange clair */
  outline-offset: 3px;              /* écarte le contour de l'élément */
  border-radius: 2px;               /* coins très légèrement arrondis */
}

/* Conteneur qui centre le contenu et limite sa largeur sur grand écran */
.wrap {
  max-width: 1080px;  /* largeur maximale du contenu */
  margin: 0 auto;     /* centre le bloc horizontalement */
  padding-left: max(20px, env(safe-area-inset-left, 0px));   /* marge à gauche (au moins 20px, plus si encoche du téléphone) */
  padding-right: max(20px, env(safe-area-inset-right, 0px)); /* marge à droite (pareil) */
}


/* ---------------------------------------------------------------------
   3. EN-TÊTE ET MENU
   --------------------------------------------------------------------- */

/* Bande blanche derrière la barre d'état des iPhone (heure, batterie) */
body::before {
  content: "";                                  /* élément décoratif vide */
  position: fixed;                              /* reste en haut de l'écran */
  inset: 0 0 auto;                              /* collé en haut, à gauche et à droite */
  height: env(safe-area-inset-top, 0px);        /* hauteur de la zone de la barre d'état */
  z-index: 10;                                  /* passe au-dessus du reste */
  background: var(--bg);                        /* fond blanc */
}

header {
  position: sticky;                          /* l'en-tête reste visible en haut quand on fait défiler */
  top: env(safe-area-inset-top, 0px);        /* se colle juste sous la barre d'état du téléphone */
  z-index: 9;                                /* passe au-dessus du contenu de la page */
  background: rgba(255, 255, 255, .94);      /* blanc légèrement transparent */
  backdrop-filter: blur(8px);                /* floute ce qui passe derrière l'en-tête */
  border-bottom: 1px solid var(--line);      /* fine ligne sous l'en-tête */
}

/* Ligne qui contient le logo, le bouton Menu et les liens */
.bar {
  display: flex;                    /* éléments alignés sur une ligne */
  align-items: center;              /* centrés verticalement */
  justify-content: space-between;   /* logo à gauche, menu à droite */
  gap: 16px;                        /* espace entre les éléments */
  padding-block: 10px;              /* espace en haut et en bas de la barre */
}

/* Petit logo + nom en haut à gauche */
.brand {
  display: flex;           /* flamme et texte côte à côte */
  align-items: center;     /* centrés verticalement */
  gap: 10px;               /* espace entre la flamme et le texte */
  text-decoration: none;   /* pas de soulignement */
  color: var(--ink);       /* texte foncé */
}

.brand img {
  height: 38px;  /* hauteur de la petite flamme */
  width: auto;   /* largeur calculée automatiquement pour garder les proportions */
}

.brand span {
  font-family: var(--display);  /* police des titres */
  font-weight: 800;             /* très gras */
  font-size: 15px;              /* taille du texte */
  letter-spacing: .02em;        /* lettres légèrement espacées */
  text-transform: uppercase;    /* en majuscules */
  line-height: 1.1;             /* lignes serrées */
}

.brand em {
  font-style: normal;     /* pas d'italique */
  color: var(--orange);   /* "de Réveil" en orange */
}

/* Liste des liens du menu */
nav ul {
  display: flex;      /* liens côte à côte */
  gap: 22px;          /* espace entre les liens */
  list-style: none;   /* pas de puces */
  margin: 0;          /* pas de marge extérieure */
  padding: 0;         /* pas de marge intérieure */
}

nav a {
  font-family: var(--display);  /* police des titres */
  font-weight: 600;             /* semi-gras */
  font-size: 12px;              /* petite taille */
  letter-spacing: .1em;         /* lettres espacées */
  text-transform: uppercase;    /* en majuscules */
  white-space: nowrap;          /* un lien ne passe jamais sur deux lignes */
  color: var(--ink);            /* texte foncé */
  text-decoration: none;        /* pas de soulignement */
}

nav a:hover {
  color: var(--orange);  /* le lien devient orange au survol de la souris */
}

/* Bouton "Menu" (visible seulement sur petit écran) */
.menu-btn {
  display: none;                  /* caché sur grand écran */
  background: none;               /* pas de fond */
  border: 1px solid var(--ink);   /* contour fin foncé */
  border-radius: 2px;             /* coins presque droits */
  padding: 8px 12px;              /* espace intérieur */
  font-family: var(--display);    /* police des titres */
  font-weight: 600;               /* semi-gras */
  font-size: 12px;                /* petite taille */
  letter-spacing: .12em;          /* lettres espacées */
  text-transform: uppercase;      /* en majuscules */
  color: var(--ink);              /* texte foncé */
  cursor: pointer;                /* curseur en forme de main au survol */
}

/* Sur les écrans de moins de 1180px de large (tablettes, téléphones) */
@media (max-width: 1180px) {
  .menu-btn {
    display: block;  /* on affiche le bouton Menu */
  }

  nav {
    position: absolute;                     /* le menu s'ouvre par-dessus la page */
    left: 0;                                /* collé à gauche */
    right: 0;                               /* et à droite (toute la largeur) */
    top: 100%;                              /* juste sous l'en-tête */
    background: var(--bg);                  /* fond blanc */
    border-bottom: 1px solid var(--line);   /* fine ligne en bas */
  }

  nav ul {
    flex-direction: column;  /* liens les uns sous les autres */
    gap: 0;                  /* pas d'espace (le padding des liens suffit) */
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); /* marges autour de la liste */
  }

  nav a {
    display: block;     /* le lien prend toute la largeur (plus facile à toucher) */
    padding: 10px 0;    /* espace au-dessus et en dessous de chaque lien */
    font-size: 14px;    /* un peu plus grand sur téléphone */
  }
}


/* ---------------------------------------------------------------------
   4. ACCUEIL (haut de page avec le logo et le verset)
   --------------------------------------------------------------------- */
.hero {
  background: var(--bg);  /* fond blanc */
}

.hero .wrap {
  display: grid;                        /* mise en page en grille */
  grid-template-columns: 1.1fr 1fr;     /* deux colonnes : logo à gauche, verset à droite */
  gap: 40px;                            /* espace entre les colonnes */
  align-items: center;                  /* centrées verticalement */
  padding-block: 56px 64px;             /* espace en haut (56px) et en bas (64px) */
}

.hero-logo {
  max-width: 100%;  /* ne dépasse jamais la largeur disponible */
  width: 520px;     /* largeur du grand logo */
  height: auto;     /* hauteur automatique pour garder les proportions */
}

/* "Église évangélique à Beauvais" */
.hero h1 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);  /* taille qui s'adapte à l'écran (entre un minimum et un maximum) */
  font-weight: 600;                           /* semi-gras */
  color: var(--muted);                        /* couleur discrète */
  margin-top: 22px;                           /* espace au-dessus */
}

/* "Bienvenue chez toi !" */
.welcome {
  font-size: 1.15rem;  /* un peu plus grand que le texte normal */
  margin-top: 14px;    /* espace au-dessus */
  max-width: 34ch;     /* largeur maximale d'environ 34 caractères */
}

/* Groupe de boutons sous le message d'accueil */
.cta {
  display: flex;      /* boutons côte à côte */
  flex-wrap: wrap;    /* passent à la ligne s'il n'y a pas la place */
  gap: 12px;          /* espace entre les boutons */
  margin-top: 26px;   /* espace au-dessus */
}

/* Style commun à tous les boutons */
.btn {
  display: inline-block;         /* le lien se comporte comme un bouton */
  font-family: var(--display);   /* police des titres */
  font-weight: 700;              /* gras */
  font-size: 12px;               /* petite taille */
  letter-spacing: .14em;         /* lettres espacées */
  text-transform: uppercase;     /* en majuscules */
  text-decoration: none;         /* pas de soulignement */
  padding: 14px 22px;            /* espace intérieur (haut/bas 14px, gauche/droite 22px) */
  border-radius: 2px;            /* coins presque droits */
}

/* Bouton principal : orange plein */
.btn-main {
  background: var(--orange);         /* fond orange */
  border: 1px solid var(--orange);   /* bordure orange */
  color: #fff;                       /* texte blanc */
}

.btn-main:hover {
  background: var(--ink);       /* devient foncé au survol */
  border-color: var(--ink);     /* bordure foncée aussi */
}

/* Bouton secondaire : contour seulement */
.btn-ghost {
  border: 1px solid var(--ink);  /* contour foncé */
  color: var(--ink);             /* texte foncé */
}

.btn-ghost:hover {
  border-color: var(--orange);  /* contour orange au survol */
  color: var(--orange);         /* texte orange au survol */
}

/* Encadré du verset */
.verse {
  background: var(--cream);               /* fond gris chaud */
  border-left: 3px solid var(--orange);   /* trait orange sur le côté gauche */
  border-radius: 4px;                     /* coins légèrement arrondis */
  padding: 32px 30px;                     /* espace intérieur */
}

.verse blockquote {
  margin: 0;                                 /* supprime la marge par défaut des citations */
  font-family: var(--display);               /* police des titres */
  font-weight: 500;                          /* épaisseur normale */
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);   /* taille qui s'adapte à l'écran */
  line-height: 1.4;                          /* espace entre les lignes */
}

/* Référence du verset (ex. Habacuc 3:2) */
.verse cite {
  display: block;              /* sur sa propre ligne */
  margin-top: 14px;            /* espace au-dessus */
  font-style: normal;          /* pas d'italique (les <cite> le sont par défaut) */
  font-size: 13px;             /* petite taille */
  font-weight: 600;            /* semi-gras */
  letter-spacing: .14em;       /* lettres espacées */
  text-transform: uppercase;   /* en majuscules */
  color: var(--orange);        /* en orange */
}

/* Sur écran de moins de 820px : logo et verset l'un sous l'autre */
@media (max-width: 820px) {
  .hero .wrap {
    grid-template-columns: 1fr;  /* une seule colonne */
    padding-block: 36px 44px;    /* moins d'espace en haut et en bas */
    gap: 28px;                   /* espace entre logo et verset */
  }
}


/* ---------------------------------------------------------------------
   5. STYLE COMMUN DES SECTIONS
   --------------------------------------------------------------------- */
section {
  scroll-margin-top: 70px;  /* quand on clique dans le menu, le titre n'est pas caché sous l'en-tête */
}

.sec {
  padding-block: 64px;  /* espace en haut et en bas de chaque section */
}

.sec.alt {
  background: var(--cream);  /* une section sur deux a un fond gris chaud */
}

/* Petit texte orange au-dessus des titres (ex. "CHAQUE SEMAINE") */
.eyebrow {
  font-family: var(--display);  /* police des titres */
  font-weight: 700;             /* gras */
  font-size: 12px;              /* petite taille */
  letter-spacing: .18em;        /* lettres très espacées */
  text-transform: uppercase;    /* en majuscules */
  color: var(--orange);         /* en orange */
}

/* Grands titres des sections */
.sec h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);  /* taille qui s'adapte à l'écran */
  font-weight: 800;                          /* très gras */
  text-transform: uppercase;                 /* en majuscules */
  letter-spacing: -.005em;                   /* lettres très légèrement resserrées */
  margin-top: 8px;                           /* espace au-dessus */
}

/* Petit trait orange sous les titres */
.sec h2::after {
  content: "";                 /* élément décoratif vide */
  display: block;              /* sur sa propre ligne */
  width: 40px;                 /* longueur du trait */
  height: 2px;                 /* épaisseur du trait */
  margin-top: 14px;            /* espace entre le titre et le trait */
  background: var(--orange);   /* couleur du trait */
}

/* Texte d'introduction gris sous certains titres */
.lead {
  margin-top: 18px;     /* espace au-dessus */
  max-width: 62ch;      /* largeur maximale d'environ 62 caractères (plus agréable à lire) */
  color: var(--muted);  /* couleur discrète */
}


/* ---------------------------------------------------------------------
   6. NOS RENDEZ-VOUS (horaires)
   --------------------------------------------------------------------- */
.times {
  display: grid;                                     /* grille */
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* deux cases côte à côte */
  gap: 20px;                                         /* espace entre les cases */
  margin-top: 32px;                                  /* espace sous le titre */
}

/* Une case d'horaire */
.time {
  background: var(--bg);                   /* fond blanc */
  border: 1px solid var(--line);           /* bordure fine */
  border-radius: 4px;                      /* coins légèrement arrondis */
  padding: 26px;                           /* espace intérieur */
  display: grid;                           /* grille intérieure */
  grid-template-columns: 7.2rem 1fr;       /* l'heure à gauche (largeur fixe), le texte à droite */
  gap: 6px 16px;                           /* espace vertical 6px, horizontal 16px */
  align-items: center;                     /* centré verticalement */
}

/* L'heure (10h, 19h30) */
.time .hour {
  grid-row: span 2;                    /* occupe la hauteur des deux lignes de texte */
  white-space: nowrap;                 /* l'heure ne se coupe jamais */
  font-family: var(--display);         /* police des titres */
  font-weight: 800;                    /* très gras */
  font-size: 2.4rem;                   /* gros chiffres */
  color: var(--orange);                /* en orange */
  font-variant-numeric: tabular-nums;  /* chiffres de même largeur (mieux alignés) */
}

/* Le jour (Dimanche, Vendredi) */
.time .day {
  font-family: var(--display);  /* police des titres */
  font-weight: 700;             /* gras */
  font-size: 1rem;              /* taille normale */
  letter-spacing: .04em;        /* lettres légèrement espacées */
  text-transform: uppercase;    /* en majuscules */
}

/* La description (Culte, Rencontre de prière) */
.time .what {
  color: var(--muted);  /* couleur discrète */
}

/* Sur écran de moins de 640px : une case par ligne, heure au-dessus du texte */
@media (max-width: 640px) {
  .times {
    grid-template-columns: 1fr;  /* une seule colonne */
  }

  .time {
    grid-template-columns: 1fr;  /* heure et texte l'un sous l'autre */
    gap: 4px;                    /* petit espace entre les lignes */
  }

  .time .hour {
    grid-row: auto;     /* n'occupe plus deux lignes */
    font-size: 2.2rem;  /* un peu plus petit */
  }
}


/* ---------------------------------------------------------------------
   7. QUI SOMMES-NOUS ?
   --------------------------------------------------------------------- */
.about {
  display: grid;                   /* grille */
  grid-template-columns: 1fr 1fr;  /* deux colonnes : histoire / ce que nous croyons */
  gap: 40px;                       /* espace entre les colonnes */
  margin-top: 28px;                /* espace sous le titre */
}

.about h3 {
  font-size: 1.1rem;     /* taille des sous-titres */
  font-weight: 700;      /* gras */
  margin-bottom: 12px;   /* espace sous le sous-titre */
}

.about p + p {
  margin-top: 14px;  /* espace entre deux paragraphes qui se suivent */
}

/* Cadre en pointillés "Texte à ajouter" (à supprimer quand le vrai texte sera écrit) */
.slot {
  border: 1px dashed var(--line);  /* bordure en pointillés */
  border-radius: 2px;              /* coins presque droits */
  min-height: 120px;               /* hauteur minimale du cadre */
  display: flex;                   /* pour centrer le texte */
  align-items: center;             /* centré verticalement */
  justify-content: center;         /* centré horizontalement */
  color: var(--muted);             /* texte discret */
  font-size: 14px;                 /* petite taille */
  font-style: italic;              /* en italique */
  padding: 16px;                   /* espace intérieur */
}

/* Sur écran de moins de 720px : les deux blocs l'un sous l'autre */
@media (max-width: 720px) {
  .about {
    grid-template-columns: 1fr;  /* une seule colonne */
    gap: 24px;                   /* espace entre les blocs */
  }
}


/* ---------------------------------------------------------------------
   8. ÉQUIPE PASTORALE
   --------------------------------------------------------------------- */
.team {
  display: grid;                                     /* grille */
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* trois cases côte à côte */
  gap: 18px;                                         /* espace entre les cases */
  margin-top: 32px;                                  /* espace sous le titre */
}

/* Une case de l'équipe */
.member {
  background: var(--bg);          /* fond blanc */
  border: 1px solid var(--line);  /* bordure fine */
  border-radius: 4px;             /* coins légèrement arrondis */
  padding: 24px;                  /* espace intérieur */
  min-width: 0;                   /* évite que le texte élargisse la case */
}

/* Les prénoms */
.member h3 {
  font-size: 1.05rem;  /* taille des noms */
  font-weight: 700;    /* gras */
}

/* Le rôle (Pasteurs, Équipe pastorale) */
.member p {
  font-family: var(--display);  /* police des titres */
  font-size: 11px;              /* petit texte */
  font-weight: 600;             /* semi-gras */
  letter-spacing: .14em;        /* lettres espacées */
  text-transform: uppercase;    /* en majuscules */
  color: var(--muted);          /* couleur discrète */
  margin-top: 2px;              /* collé juste sous les prénoms */
}

/* Sur écran de moins de 820px : une case par ligne */
@media (max-width: 820px) {
  .team {
    grid-template-columns: 1fr;  /* une seule colonne */
  }
}


/* ---------------------------------------------------------------------
   9. NOS ACTIVITÉS
   --------------------------------------------------------------------- */
.acts {
  display: grid;                                     /* grille */
  grid-template-columns: repeat(4, minmax(0, 1fr));  /* quatre cases par ligne sur ordinateur */
  gap: 18px;                                         /* espace entre les cases */
  margin-top: 32px;                                  /* espace sous le titre */
}

/* Une case d'activité */
.act {
  background: var(--bg);          /* fond blanc */
  border: 1px solid var(--line);  /* bordure fine */
  border-radius: 4px;             /* coins légèrement arrondis */
  padding: 22px;                  /* espace intérieur */
}

/* Nom de l'activité */
.act h3 {
  font-size: 1rem;             /* taille normale */
  font-weight: 700;            /* gras */
  letter-spacing: .04em;       /* lettres légèrement espacées */
  text-transform: uppercase;   /* en majuscules */
}

/* Fréquence (ex. "Un dimanche par mois") */
.act .freq {
  display: inline-block;         /* se place sous le titre */
  margin-top: 8px;               /* espace au-dessus */
  font-family: var(--display);   /* police des titres */
  font-size: 11px;               /* petit texte */
  font-weight: 700;              /* gras */
  letter-spacing: .12em;         /* lettres espacées */
  text-transform: uppercase;     /* en majuscules */
  color: var(--orange);          /* en orange */
}

/* Description de l'activité */
.act p {
  margin-top: 10px;     /* espace au-dessus */
  color: var(--muted);  /* couleur discrète */
  font-size: 16px;      /* taille du texte */
}

/* Sur écran de moins de 900px : deux cases par ligne */
@media (max-width: 900px) {
  .acts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sur écran de moins de 560px : une case par ligne */
@media (max-width: 560px) {
  .acts {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------------
   10. ÉDUCATION CHRÉTIENNE (groupes d'enfants)
   --------------------------------------------------------------------- */
.kids {
  display: grid;                                     /* grille */
  grid-template-columns: repeat(4, minmax(0, 1fr));  /* quatre groupes côte à côte */
  gap: 18px;                                         /* espace entre les cases */
  margin-top: 32px;                                  /* espace sous le texte d'intro */
}

/* Une case de groupe */
.kid {
  background: var(--bg);          /* fond blanc */
  border: 1px solid var(--line);  /* bordure fine */
  border-radius: 4px;             /* coins légèrement arrondis */
  padding: 22px;                  /* espace intérieur */
  min-width: 0;                   /* évite que le texte élargisse la case */
}

/* La tranche d'âge (ex. 4-7) */
.kid .age {
  font-family: var(--display);         /* police des titres */
  font-weight: 800;                    /* très gras */
  font-size: 1.6rem;                   /* gros chiffres */
  color: var(--orange);                /* en orange */
  font-variant-numeric: tabular-nums;  /* chiffres de même largeur */
  line-height: 1.1;                    /* lignes serrées */
}

/* Le mot "ans" à côté de l'âge */
.kid .age small {
  font-size: .9rem;      /* plus petit que les chiffres */
  font-weight: 700;      /* gras */
  color: var(--muted);   /* couleur discrète */
}

/* Nom du groupe (Garderie, Les papillons...) */
.kid h3 {
  font-size: 1rem;             /* taille normale */
  font-weight: 700;            /* gras */
  letter-spacing: .04em;       /* lettres légèrement espacées */
  text-transform: uppercase;   /* en majuscules */
  margin-top: 8px;             /* espace sous l'âge */
}

/* Description du groupe */
.kid p {
  margin-top: 8px;      /* espace au-dessus */
  color: var(--muted);  /* couleur discrète */
  font-size: 15px;      /* taille du texte */
}

/* Sur écran de moins de 900px : deux cases par ligne */
@media (max-width: 900px) {
  .kids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sur écran de moins de 480px : une case par ligne */
@media (max-width: 480px) {
  .kids {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------------
   11. LE BAPTÊME
   --------------------------------------------------------------------- */
.bapt {
  display: grid;                      /* grille */
  grid-template-columns: 1.4fr 1fr;   /* texte à gauche (plus large), encadré à droite */
  gap: 32px;                          /* espace entre les deux */
  align-items: center;                /* centrés verticalement */
  margin-top: 28px;                   /* espace sous le titre */
}

.bapt p {
  max-width: 58ch;  /* largeur maximale d'environ 58 caractères */
}

.bapt p + p {
  margin-top: 12px;  /* espace entre deux paragraphes */
}

/* Sur écran de moins de 720px : texte et encadré l'un sous l'autre */
@media (max-width: 720px) {
  .bapt {
    grid-template-columns: 1fr;  /* une seule colonne */
    gap: 20px;                   /* espace entre les deux */
  }
}


/* ---------------------------------------------------------------------
   12. PROCHAINS ÉVÉNEMENTS
   --------------------------------------------------------------------- */
.events {
  margin-top: 28px;  /* espace sous le titre */
  display: grid;     /* grille (une ligne par événement) */
  gap: 12px;         /* espace entre les événements */
}

/* Une ligne d'événement */
.ev {
  display: grid;                        /* grille */
  grid-template-columns: 76px 1fr;      /* la date à gauche (76px), le texte à droite */
  gap: 18px;                            /* espace entre la date et le texte */
  align-items: center;                  /* centrés verticalement */
  padding: 16px 0;                      /* espace en haut et en bas */
  border-bottom: 1px solid var(--line); /* ligne fine sous chaque événement */
}

/* Bloc de la date */
.ev .date {
  text-align: center;           /* centré */
  font-family: var(--display);  /* police des titres */
  line-height: 1.1;             /* lignes serrées */
}

/* Le numéro du jour */
.ev .date b {
  display: block;        /* sur sa propre ligne */
  font-size: 1.8rem;     /* gros chiffre */
  font-weight: 800;      /* très gras */
  color: var(--orange);  /* en orange */
}

/* Le mois (Nov., Déc.) */
.ev .date span {
  font-size: 12px;             /* petite taille */
  font-weight: 700;            /* gras */
  letter-spacing: .12em;       /* lettres espacées */
  text-transform: uppercase;   /* en majuscules */
}

/* Nom de l'événement */
.ev h3 {
  font-size: 1.05rem;  /* taille du titre */
  font-weight: 700;    /* gras */
}

/* Jour complet sous le nom */
.ev p {
  color: var(--muted);  /* couleur discrète */
  font-size: 15px;      /* taille du texte */
}


/* ---------------------------------------------------------------------
   13. NOUS TROUVER (adresse et contact)
   --------------------------------------------------------------------- */
.visit {
  display: grid;                   /* grille */
  grid-template-columns: 1fr 1fr;  /* deux cases : adresse / contact */
  gap: 24px;                       /* espace entre les cases */
  margin-top: 32px;                /* espace sous le titre */
}

/* Case blanche encadrée (adresse, contact, baptême) */
.panel {
  background: var(--bg);          /* fond blanc */
  border: 1px solid var(--line);  /* bordure fine */
  border-radius: 4px;             /* coins légèrement arrondis */
  padding: 28px;                  /* espace intérieur */
  min-width: 0;                   /* évite que le contenu élargisse la case */
}

/* Titre d'une case (Adresse, Contact...) */
.panel h3 {
  font-size: 1rem;             /* taille normale */
  font-weight: 700;            /* gras */
  letter-spacing: .04em;       /* lettres légèrement espacées */
  text-transform: uppercase;   /* en majuscules */
  margin-bottom: 12px;         /* espace sous le titre */
}

/* Texte gris dans une case (ex. "Oise, France") */
.panel .lead {
  margin-top: 8px;  /* moins d'espace que les autres textes d'intro */
}

/* Bouton dans une case */
.panel .btn {
  margin-top: 18px;  /* espace au-dessus du bouton */
}

/* L'adresse */
.addr {
  font-size: 1.15rem;  /* un peu plus grand que le texte normal */
  font-weight: 600;    /* semi-gras */
}

/* Liste E-mail / Fixe / Portable */
.contact-list {
  display: grid;  /* grille */
  gap: 12px;      /* espace entre les lignes */
  margin: 0;      /* pas de marge par défaut */
}

/* Les intitulés (E-MAIL, FIXE, PORTABLE) */
.contact-list dt {
  font-size: 12px;             /* petite taille */
  font-weight: 700;            /* gras */
  letter-spacing: .12em;       /* lettres espacées */
  text-transform: uppercase;   /* en majuscules */
  color: var(--orange);        /* en orange */
}

/* Les valeurs (adresse mail, numéros) */
.contact-list dd {
  margin: 0 0 6px;            /* petit espace en dessous */
  overflow-wrap: anywhere;    /* une adresse mail trop longue peut se couper pour ne pas déborder */
}

/* Ligne vide en pointillés à remplacer par un numéro */
.blank {
  display: block;                         /* prend sa propre ligne */
  height: 1.4em;                          /* hauteur d'une ligne de texte */
  width: 10em;                            /* longueur de la ligne */
  max-width: 100%;                        /* ne dépasse pas la case */
  border-bottom: 1px dashed var(--line);  /* trait en pointillés */
}

/* Liens vers les réseaux sociaux */
.socials {
  display: flex;      /* liens côte à côte */
  flex-wrap: wrap;    /* passent à la ligne si besoin */
  gap: 10px;          /* espace entre les liens */
  margin-top: 14px;   /* espace au-dessus */
}

.socials a {
  font-family: var(--display);    /* police des titres */
  font-weight: 600;               /* semi-gras */
  font-size: 12px;                /* petite taille */
  letter-spacing: .08em;          /* lettres légèrement espacées */
  text-decoration: none;          /* pas de soulignement */
  color: var(--ink);              /* texte foncé */
  border: 1px solid var(--line);  /* contour fin */
  border-radius: 2px;             /* coins presque droits */
  padding: 8px 14px;              /* espace intérieur */
}

.socials a:hover {
  border-color: var(--orange);  /* contour orange au survol */
  color: var(--orange);         /* texte orange au survol */
}

/* Sur écran de moins de 720px : adresse et contact l'un sous l'autre */
@media (max-width: 720px) {
  .visit {
    grid-template-columns: 1fr;  /* une seule colonne */
  }
}


/* ---------------------------------------------------------------------
   14. SOUTENIR L'ÉGLISE (dons)
   --------------------------------------------------------------------- */
.give {
  background: var(--orange);  /* bandeau orange */
  color: #fff;                /* texte blanc */
}

.give .wrap {
  display: flex;                    /* texte et bouton côte à côte */
  flex-wrap: wrap;                  /* passent l'un sous l'autre sur petit écran */
  justify-content: space-between;   /* texte à gauche, bouton à droite */
  align-items: center;              /* centrés verticalement */
  gap: 24px;                        /* espace entre le texte et le bouton */
  padding-block: 48px;              /* espace en haut et en bas */
}

.give h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);  /* taille qui s'adapte à l'écran */
  font-weight: 800;                        /* très gras */
}

.give p {
  margin-top: 8px;   /* espace sous le titre */
  max-width: 52ch;   /* largeur maximale d'environ 52 caractères */
}

/* Bouton "Faire un don" : blanc sur le bandeau orange */
.give .btn {
  background: #fff;       /* fond blanc */
  color: var(--orange);   /* texte orange */
}


/* ---------------------------------------------------------------------
   15. PIED DE PAGE
   --------------------------------------------------------------------- */
footer {
  background: var(--ink);  /* fond foncé */
  color: #e9e2dc;          /* texte clair */
}

footer .wrap {
  display: flex;                    /* textes côte à côte */
  flex-wrap: wrap;                  /* passent à la ligne si besoin */
  justify-content: space-between;   /* un à gauche, un à droite */
  gap: 12px;                        /* espace entre les deux */
  padding-block: 28px;              /* espace en haut et en bas */
  font-size: 14px;                  /* petite taille */
}

footer a {
  color: var(--gold);  /* liens en jaune dans le pied de page */
}