/* =====================================================================
   Site de campagne — Gil Thériault
   ===================================================================== */

:root {
  --paper: #f7f3ea;
  --paper-dim: #f0ece1;
  --ink: #2a2a28;
  --ink-soft: #57544c;
  --ink-faint: #78716a;
  --rule: #e3ded0;
  --red: #d8232a;
  --red-dark: #a5161c;
  --amber: #b26a00;
  --blue: #2c4a6e;
  --blue-pale: #e8eef4;
  --serif: 'Lora', Georgia, serif;
  --ui: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --large: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); line-height: 1.55; }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); margin: 0; font-weight: 600; line-height: 1.15; }
a { color: inherit; }
sup { font-size: .65em; }

.brouillon { background: #222; color: #ffd9a8; text-align: center; font-size: 12.5px; padding: 9px 16px; position: sticky; top: 0; z-index: 200; }

/* ---------------- Menu ---------------- */
.entete { background: var(--paper); border-bottom: 3px solid var(--blue); position: sticky; top: 0; z-index: 100; }
.entete .conteneur { max-width: var(--large); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.marque .nom { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.marque .lieu { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
nav.menu { display: flex; gap: 2px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
nav.menu a { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink-soft); padding: 9px 11px; border-radius: 3px; }
nav.menu a:hover { color: var(--red); background: var(--paper-dim); }
nav.menu a.actif { color: var(--red); }
.lien-lang {
  font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--ink-soft);
  text-decoration: none; border: 1px solid var(--rule); border-radius: 20px; padding: 6px 11px; flex: 0 0 auto;
}
.lien-lang:hover { border-color: var(--red); color: var(--red); }
.bouton-don {
  background: var(--red); color: #fff; font-family: var(--ui); font-weight: 700;
  font-size: 12.5px; padding: 9px 17px; border-radius: 20px; text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}
.bouton-don:hover { background: var(--red-dark); }
.bouton-menu-mobile { display: none; background: none; border: 1px solid var(--rule); border-radius: 4px; padding: 8px 12px; font-size: 20px; flex: 0 0 auto; cursor: pointer; }
.menu-mobile { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding: 8px 20px 14px; }
.menu-mobile[hidden] { display: none; }
.menu-mobile a { padding: 11px 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }

/* ---------------- Héros ---------------- */
.hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; background: #1a1a18; }
.hero-secondaire { min-height: 260px; }
.hero img.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: .55; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,13,10,.92) 10%, rgba(15,13,10,.35) 60%, rgba(15,13,10,.1)); }
.hero-contenu { position: relative; z-index: 2; max-width: var(--large); margin: 0 auto; padding: 54px 24px 40px; width: 100%; }
.hero .kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: #ff9a9d; font-size: 12px; display: block; margin-bottom: 14px; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.3rem); margin-bottom: 10px; }
.hero .role { color: #e7e2d4; font-size: 15.5px; margin-bottom: 24px; max-width: 520px; }
.hero .boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .portrait-hero {
  position: absolute; z-index: 1; bottom: 0; right: 3%; height: 108%; max-height: 560px;
  width: auto; object-fit: contain; object-position: bottom;
  mix-blend-mode: screen; pointer-events: none; -webkit-user-select: none; user-select: none;
}
.bouton { display: inline-block; padding: 12px 20px; border-radius: 3px; font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.bouton.plein { background: var(--red); color: #fff; }
.bouton.plein:hover { background: var(--red-dark); }
.bouton.contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.bouton.contour:hover { border-color: #fff; }
.bouton.encre { background: var(--ink); color: #fff; }
.bouton.encre:hover { background: #000; }
.bouton.blanc { background: #fff; color: var(--red); }
.bouton.blanc:hover { background: #ffeced; }

/* ---------------- Compte à rebours ---------------- */
.bande-rebours { background: var(--blue); border-bottom: 1px solid #1d3552; }
.rebours-conteneur { max-width: var(--large); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rebours-chiffre { font-family: var(--serif); font-size: 40px; font-weight: 600; color: #fff; line-height: 1; }
.rebours-texte { color: #c3d2e6; font-size: 13px; }
.rebours-texte b { color: #fff; }
.rebours-conteneur .sep { width: 1px; height: 32px; background: #3f5c80; }
.rebours-mini { color: #c3d2e6; font-size: 12px; }
.rebours-mini b { color: #ffcf7d; }

/* ---------------- Zone trois colonnes ---------------- */
.trois-colonnes { max-width: var(--large); margin: 0 auto; padding: 46px 24px; display: grid; grid-template-columns: 0.85fr 1.55fr 1fr; gap: 22px; align-items: start; }
.colonne-carte { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 22px 22px 18px; }
.colonne-carte h2 { font-size: 20px; }
.colonne-carte .kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); font-size: 11px; display: block; margin-bottom: 5px; }
.colonne-carte .sous { font-size: 12.5px; color: var(--ink-faint); margin: 4px 0 16px; }
.colonne-carte .bouton { width: 100%; text-align: center; }

.form-rapide label { display: block; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 12px; }
.form-rapide .fac { color: var(--ink-faint); font-weight: 400; }
.form-rapide select { width: 100%; margin-top: 4px; padding: 10px 11px; font-family: var(--ui); font-size: 13.5px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); }
.form-rapide input, .form-rapide textarea {
  width: 100%; margin-top: 4px; padding: 10px 11px; font-family: var(--ui); font-size: 13.5px;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink);
}
.form-rapide textarea { min-height: 84px; resize: vertical; }
.form-rapide .oblig { color: var(--red); }
.form-rapide button { width: 100%; margin-top: 4px; }
.note-form { font-size: 11px; color: var(--ink-faint); margin-top: 10px; text-align: center; }
.message-etat { font-size: 12px; margin: 10px 0 0; min-height: 1.2em; }
.message-etat.ok { color: #1c7a4a; }
.message-etat.erreur { color: var(--red); }

/* ---------------- Carte interactive (Leaflet / OpenStreetMap) ---------------- */
.carte-widget {
  position: relative; height: 380px; width: 100%; border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden; margin-bottom: 10px; background: var(--paper-dim); z-index: 0;
}
.carte-widget:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.carte-widget .leaflet-container { font-family: var(--ui); background: #eef5f8; }
.carte-widget .leaflet-control-attribution { font-size: 9.5px; }

/* Pastille de village : point plein, pas d'étiquette permanente (le nom
   apparaît dans l'infobulle au clic). */
.point-village { cursor: pointer; }
.point-pastille {
  display: block; width: 14px; height: 14px; margin: 1px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--red);
}
.point-village.neutre .point-pastille { background: #8a97a3; box-shadow: 0 0 0 1px #8a97a3; }
.point-village.cette-semaine .point-pastille { background: var(--amber); box-shadow: 0 0 0 1px var(--amber); animation: pulse 1.8s infinite; }
.point-village.cal-surligne .point-pastille { transform: scale(1.35); }

/* Contenu des infobulles (popups Leaflet), habillé pour matcher la charte. */
.leaflet-popup-content-wrapper { border-radius: 6px; }
.leaflet-popup-content { margin: 10px 13px; font-size: 12.5px; }
.popup-carte b { display: block; font-family: var(--ui); font-weight: 700; font-size: 12.5px; margin-bottom: 2px; color: var(--ink); }
.popup-carte .quand { color: var(--ink-soft); font-size: 11.5px; }

@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(178,106,0,.45)} 50%{box-shadow:0 0 0 8px rgba(178,106,0,0)} }

/* ---------------- Petit calendrier (Où est Gil) ---------------- */
.calendrier-widget { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 16px; margin-bottom: 22px; }
.cal-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-titre { font-family: var(--ui); font-weight: 700; font-size: 13px; text-transform: capitalize; }
.cal-nav { background: none; border: 1px solid var(--rule); border-radius: 4px; width: 26px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink-soft); }
.cal-nav:hover { border-color: var(--red); color: var(--red); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-jours-noms span { font-size: 10px; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; padding-bottom: 4px; }
.cal-case { background: none; border: 0; padding: 6px 0; font-size: 12px; border-radius: 4px; color: var(--ink); font-family: var(--ui); }
.cal-case.vide { visibility: hidden; }
.cal-case.cal-actif { cursor: pointer; background: var(--paper-dim); font-weight: 700; position: relative; }
.cal-case.cal-actif:hover { background: #e9e2cf; }
.cal-case.cal-choisi { background: var(--red); color: #fff; }
.calendrier-filtre .cal-case.cal-actif::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
.calendrier-filtre .cal-case.cal-choisi::after { background: #fff; }

/* ---------------- Calendrier de rendez-vous (Rencontrer Gil) ---------------- */
.cal-case.cal-indispo { color: var(--ink-faint); opacity: .35; cursor: default; }
.calendrier-rdv .cal-case.cal-occupe { position: relative; }
.calendrier-rdv .cal-case.cal-occupe::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }
.calendrier-rdv .cal-case.cal-choisi::after { display: none; }
.cal-legende-rdv { display: flex; gap: 14px; font-size: 10.5px; color: var(--ink-faint); margin-top: 8px; }
.date-choisie { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 16px; }
.date-choisie.date-choisie-active { color: var(--red); font-weight: 600; }
.legende-carte { display: flex; gap: 16px; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 14px; }
.legende-carte span { display: flex; align-items: center; gap: 6px; }
.puce-legende { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.puce-rouge { background: var(--red); }
.puce-ambre { background: var(--amber); }
.lien-carte-plus { display: block; text-align: center; font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); font-size: 11.5px; text-decoration: none; }
.lien-carte-plus:hover { text-decoration: underline; }

/* ---------------- Implications qui défilent ---------------- */
.liste-roulante { height: 340px; overflow: hidden; border-top: 1px solid var(--rule); margin-bottom: 14px; position: relative; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.piste-roulante { display: flex; flex-direction: column; animation: defiler 24s linear infinite; }
.liste-roulante:hover .piste-roulante { animation-play-state: paused; }
@keyframes defiler { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.item-implication { display: block; padding: 12px 2px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.item-implication:hover h3 { color: var(--red); }
.item-implication h3 { font-size: 13.5px; margin-bottom: 3px; }
.item-implication p { font-size: 12px; color: var(--ink-faint); margin: 0; }

/* ---------------- Sections génériques ---------------- */
.section { max-width: var(--large); margin: 0 auto; padding: 10px 24px 58px; }
.section:first-of-type { padding-top: 58px; }
.section.pale { max-width: none; background: var(--paper-dim); padding: 0; }
.section.pale > .interieur { max-width: var(--large); margin: 0 auto; padding: 58px 24px; }
.entete-section { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; gap: 20px; flex-wrap: wrap; }
.entete-section .kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--red); font-size: 11.5px; display: block; margin-bottom: 7px; }
.entete-section h2 { font-size: 27px; }
.entete-section p { color: var(--ink-faint); font-size: 13.5px; margin: 6px 0 0; max-width: 480px; }
.lien-plus { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); font-size: 11.5px; text-decoration: none; white-space: nowrap; }
.lien-plus:hover { text-decoration: underline; }
.vide { color: var(--ink-faint); font-size: 13px; padding: 20px 0; }

/* ---------------- Rencontrer Gil : biographie + rendez-vous + priorités ---------------- */
.grille-rencontrer-3 { display: grid; grid-template-columns: 1fr 1.1fr 0.85fr; gap: 26px; align-items: start; }
.bloc-bio .kicker, .bloc-priorites-mini .kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); font-size: 11px; display: block; margin-bottom: 7px; }
.bloc-bio h2, .bloc-priorites-mini h2 { font-size: 22px; margin-bottom: 14px; }
.bloc-bio .citation-bio { font-style: italic; color: var(--ink); border-left: 3px solid var(--red); padding-left: 14px; margin: 0 0 18px; font-size: 14.5px; }
.bloc-bio p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.bloc-form-rencontre { align-self: start; }

.liste-mini-cartes { display: flex; flex-direction: column; gap: 8px; }
.mini-carte {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rule);
  border-radius: 8px; padding: 12px 14px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s;
}
.mini-carte:hover { box-shadow: 0 8px 20px rgba(0,0,0,.08); transform: translateY(-1px); border-color: var(--red); }
.mini-icone { font-size: 17px; flex: 0 0 auto; }
.mini-titre { font-size: 13px; font-weight: 600; flex: 1 1 auto; }
.mini-fleche { color: var(--red); font-size: 13px; flex: 0 0 auto; }

/* ---------------- Implication communautaire (page dédiée) ---------------- */
.grille-implication { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.carte-implication { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--red); border-radius: 3px; padding: 20px; }
.carte-implication h3 { font-size: 15.5px; margin-bottom: 6px; }
.carte-implication p { font-size: 13px; color: var(--ink-faint); margin: 0; }
.carte-implication-lien { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.carte-implication-lien:hover { box-shadow: 0 12px 26px rgba(0,0,0,.09); transform: translateY(-2px); }
.lien-mini { display: block; margin-top: 10px; font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--red); font-size: 10.5px; }

/* ---------------- Page Contact ---------------- */
.contact-liens { display: flex; gap: 18px; flex-wrap: wrap; }
.contact-liens a { text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.contact-liens a:hover { color: var(--red); }
.contact-liens a.don { color: var(--red); }

/* ---------------- Défis / priorités locales ---------------- */
.grille-defis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carte-defi { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.carte-defi:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.10); }
.carte-defi .icone { font-size: 26px; padding: 18px 18px 0; }
.carte-defi h3 { font-size: 15px; padding: 8px 18px 0; }
.carte-defi .defi { padding: 8px 18px 0; font-size: 12.5px; color: var(--ink-faint); }
.carte-defi .defi b { color: var(--ink-soft); font-weight: 600; }
.carte-defi .offre { margin: 14px 18px 18px; padding: 12px 14px; background: #fdf0f1; border-left: 3px solid var(--red); border-radius: 2px; font-size: 12.5px; }
.carte-defi .offre b { color: var(--red); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

/* ---------------- Engagements Quebec / PLQ ---------------- */
.section.pale.bande-plq { background: var(--blue-pale); }
.bande-plq .interieur .entete-section .kicker { color: var(--blue); }
.bande-plq .interieur .entete-section h2 { color: var(--ink); }
.bande-plq .interieur .entete-section p { color: var(--ink-soft); }
.bande-plq .lien-plus { color: var(--blue); }
.grille-plq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte-plq { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--blue); border-radius: 6px; padding: 16px; color: var(--ink); font-size: 13.5px; }
.avis-plq-mini { grid-column: 1/-1; font-size: 11.5px; color: var(--ink-faint); font-style: italic; margin-top: 4px; }

/* ---------------- Capsules ---------------- */
.grille-capsules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.capsule { background: #fff; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; transition: box-shadow .15s, transform .15s; text-decoration: none; color: inherit; display: block; }
.capsule:hover { box-shadow: 0 14px 32px rgba(0,0,0,.12); transform: translateY(-2px); }
.capsule .cadre-video { position: relative; aspect-ratio: 9/16; background: #111; }
.capsule video { width: 100%; height: 100%; object-fit: cover; }
.capsule .jouer { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 24px; background: rgba(0,0,0,.15); text-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }
.capsule-txt { padding: 13px 15px 16px; }
.capsule-txt .num { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); font-size: 10.5px; display: block; }
.capsule-txt h3 { font-size: 14.5px; margin: 3px 0 5px; }
.capsule-txt p { font-size: 12px; color: var(--ink-faint); margin: 0; }

/* ---------------- Articles ---------------- */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.filtre { font-family: var(--ui); font-size: 11px; padding: 5px 11px; border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); border-radius: 20px; cursor: pointer; }
.filtre.actif { border-color: var(--red); color: var(--red); }
.liste-articles-proto { border-top: 1px solid var(--rule); }
.article-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.article-ligne:hover h3 { color: var(--red); }
.article-ligne .g span.kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); font-size: 10.5px; }
.article-ligne h3 { font-size: 15.5px; margin: 3px 0 0; }
.article-ligne .meta { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* ---------------- Me joindre ---------------- */
.bande-joindre { background: var(--red); color: #fff; text-align: center; max-width: none; padding: 54px 24px; }
.bande-joindre h2 { color: #fff; font-size: 26px; }
.bande-joindre p { color: rgba(255,255,255,.88); max-width: 460px; margin: 10px auto 24px; font-size: 13.5px; }
.boutons-joindre { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 540px; margin: 0 auto; }
.lien-savoir-plus { display: inline-block; margin-top: 18px; color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.lien-savoir-plus:hover { color: #ffd9da; }

/* ---------------- Pied ---------------- */
.pied { background: var(--ink); color: #a9a397; padding: 42px 24px 28px; }
.pied .conteneur { max-width: var(--large); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
.pied h4 { color: #fff; font-family: var(--ui); font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 12px; }
.pied a { display: block; color: #a9a397; text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.pied a:hover { color: #fff; }
.pied a.don { color: #ff9a9d; font-weight: 700; }
.pied a.don:hover { color: #ffb3b6; }
.pied-blurb { font-size: 13px; max-width: 280px; margin: 0; }
.pied-legal { max-width: var(--large); margin: 26px auto 0; padding-top: 18px; border-top: 1px solid #3a382f; font-size: 11.5px; color: #756f61; }

/* ---------------- Page Où est Gil (carte complète) ---------------- */
.bloc-carte { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: start; }
.sous-titre-liste { font-size: 15px; margin: 22px 0 10px; }
.sous-titre-liste:first-child { margin-top: 0; }
.liste-agenda { display: flex; flex-direction: column; }
.ligne-agenda { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
.date-agenda { font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--red); flex: 0 0 62px; padding-top: 2px; }
.titre-agenda { font-size: 14.5px; }
.titre-agenda small { display: block; font-family: var(--ui); font-size: 11.5px; color: var(--ink-faint); }
.carnet-mini .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--rule); font-size: 13.5px; }
.carnet-mini .ligne .note { color: var(--ink-faint); font-size: 12.5px; text-align: right; }

/* ---------------- Faire un don / lecture longue ---------------- */
.lecture-large { max-width: 680px; }
.lecture-large p { font-size: 15px; }

/* ---------------- Lecture (article / capsule) ---------------- */
.lecture { max-width: 680px; margin: 0 auto; padding: 44px 24px 60px; }
.lecture h1 { font-size: 28px; margin: 6px 0 10px; }
.lecture .kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); font-size: 11.5px; }
.lecture p { font-size: 15px; line-height: 1.65; color: #35322c; }
.lecture .meta { font-size: 12px; color: var(--ink-faint); }
.chapeau-article { font-style: italic; color: var(--ink-soft); }
.video-pleine { width: 100%; max-width: 380px; margin: 18px auto; aspect-ratio: 9/16; background: #111; border-radius: 6px; }
.retour { display: inline-block; margin-top: 24px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--red); text-decoration: none; }

/* =====================================================================
   Réactif : tablette puis téléphone
   ===================================================================== */
@media (max-width: 1080px) {
  nav.menu { display: none; }
  .bouton-menu-mobile { display: block; }
  .hero .portrait-hero { display: none; }
  .trois-colonnes { grid-template-columns: 1fr 1fr; }
  .trois-colonnes .colonne-carte:last-child { grid-column: 1 / -1; }
  .grille-defis { grid-template-columns: 1fr 1fr; }
  .grille-plq, .grille-capsules, .grille-implication { grid-template-columns: 1fr 1fr; }
  .bloc-carte { grid-template-columns: 1fr; }
  .grille-rencontrer-3 { grid-template-columns: 1fr 1fr; }
  .grille-rencontrer-3 .bloc-priorites-mini { grid-column: 1 / -1; }
  .pied .conteneur { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .entete { top: 0; }
  .trois-colonnes { grid-template-columns: 1fr; padding: 30px 18px; }
  .trois-colonnes .colonne-carte:last-child { grid-column: auto; }
  .grille-defis, .grille-plq, .grille-capsules, .grille-implication { grid-template-columns: 1fr; }
  .grille-rencontrer-3 { grid-template-columns: 1fr; }
  .pied .conteneur { grid-template-columns: 1fr; }
  .hero { min-height: 400px; }
  .hero-contenu { padding: 40px 18px 30px; }
  .section { padding: 6px 18px 44px; }
  .section.pale > .interieur { padding: 44px 18px; }
  .rebours-conteneur { padding: 16px 18px; gap: 14px; }
  .rebours-chiffre { font-size: 32px; }
  .capsule .cadre-video { aspect-ratio: 3/4; }
}