/*
Theme Name: Groupes de prière dans l'Esprit - Liège
Theme URI: https://groupesdepriereliege.org
Author: Groupes de prière dans l'Esprit - Diocèse de Liège
Description: Thème personnalisé dérivé de la maquette HTML validée v19.
Version: 1.0
Text Domain: groupes-priere-liege
*/

:root {
      --bg:#f8f3ea;
      --paper:#ffffff;
      --text:#18202a;
      --muted:#5d6673;
      --amber:#92400e;
      --amber2:#b45309;
      --orange:#c2410c;
      --light:#fff7ed;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      font-family: Arial, Calibri, sans-serif;
      background:var(--bg);
      color:var(--text);
    }
    header {
      position:sticky;
      top:0;
      z-index:10;
      background:rgba(248,243,234,.94);
      backdrop-filter: blur(14px);
      border-bottom:1px solid #eadcc8;
    }
    .wrap { max-width:1180px; margin:auto; padding:0 22px; }
    .nav {
      display:flex; align-items:center; justify-content:space-between;
      gap:22px; padding:18px 0;
    }
    .brand { display:flex; gap:14px; align-items:center; }
    .logo {
      width:48px; height:48px; border-radius:18px;
      background:linear-gradient(135deg,var(--amber),var(--amber2));
      color:white; display:grid; place-items:center; font-size:24px; font-weight:800;
      box-shadow:0 10px 30px rgba(146,64,14,.25);
    }
    .brand small {
      display:block; color:var(--amber); font-weight:700;
      letter-spacing:.16em; text-transform:uppercase; font-size:12px;
    }
    .brand strong { display:block; font-size:19px; line-height:1.15; }
    .links { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .links a {
      text-decoration:none; color:#344054; padding:10px 13px;
      border-radius:999px; font-weight:700; font-size:14px;
    }
    .links a:hover { background:white; color:var(--amber); }
    .hero {
      position:relative; overflow:hidden;
      background:
        radial-gradient(circle at 80% 20%, rgba(217,119,6,.22), transparent 35%),
        radial-gradient(circle at 10% 80%, rgba(146,64,14,.16), transparent 36%);
    }
    .hero-grid {
      display:grid; grid-template-columns:1.1fr .9fr;
      gap:46px; align-items:center; padding:86px 0;
    }
    .badge {
      display:inline-block; background:white; color:var(--amber);
      font-weight:800; padding:10px 16px; border-radius:999px;
      box-shadow:0 8px 24px rgba(0,0,0,.06); margin-bottom:22px;
    }
    h1 { font-size:clamp(38px,6vw,68px); line-height:.98; margin:0; letter-spacing:-.04em; }
    .lead { color:var(--muted); font-size:19px; line-height:1.75; max-width:700px; }
    .hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
    .primary-button, .secondary-button {
      display:inline-block; text-decoration:none; padding:14px 20px;
      border-radius:999px; font-weight:900;
    }
    .primary-button {
      background:linear-gradient(135deg,var(--amber2),var(--amber));
      color:white; box-shadow:0 12px 28px rgba(146,64,14,.18);
    }
    .secondary-button { border:1px solid var(--amber); color:var(--amber); background:white; }
    .hero-card {
      background:white; border-radius:34px; padding:28px;
      box-shadow:0 26px 60px rgba(60,42,22,.16);
    }
    .quote {
      background:linear-gradient(135deg,#b45309,#c2410c,#92400e);
      color:white; border-radius:26px; padding:36px; min-height:260px;
      display:flex; flex-direction:column; justify-content:center;
    }
    .quote p:first-child { font-size:28px; line-height:1.25; font-weight:900; margin:0; }
    .quote p:last-child { color:rgba(255,255,255,.8); }
    section { padding:72px 0; }
    .section-title { max-width:860px; margin-bottom:32px; }
    .over {
      color:var(--amber); font-weight:900; letter-spacing:.22em;
      text-transform:uppercase; font-size:13px;
    }
    h2 { margin:10px 0 0; font-size:clamp(30px,4vw,52px); line-height:1.05; letter-spacing:-.035em; }
    .mission { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .mission .box {
      background:white; border-radius:28px; padding:28px;
      box-shadow:0 8px 24px rgba(0,0,0,.04);
    }
    .box h3 { margin:12px 0 8px; font-size:22px; }
    .box p { color:var(--muted); line-height:1.65; margin:0; }
    .groups { background:white; }
    .groups-top {
      display:flex; justify-content:space-between; align-items:end;
      gap:24px; margin-bottom:30px;
    }
    .search {
      width:min(420px,100%); border:1px solid #e5e7eb; background:#f9fafb;
      padding:14px 18px; border-radius:999px; font-size:16px; outline:none;
    }
    .search:focus { border-color:var(--amber2); background:white; }
    .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .card {
      border:1px solid #f1dfcc; border-radius:28px; padding:24px;
      box-shadow:0 6px 18px rgba(0,0,0,.04); transition:.18s ease; background:white;
    }
    .card:hover { transform:translateY(-3px); box-shadow:0 16px 35px rgba(146,64,14,.10); }
    .card-head { display:flex; justify-content:space-between; gap:18px; margin-bottom:16px; }
    .card h3 { margin:0; font-size:22px; line-height:1.15; }
    .city { margin:5px 0 0; color:var(--amber); font-weight:900; }
    .pin { color:var(--amber2); font-size:23px; }
    .place { font-weight:800; margin:0 0 4px; }
    .address { color:var(--muted); line-height:1.55; margin:0 0 18px; }
    .info {
      background:var(--light); border-radius:20px; padding:16px;
      color:#374151; line-height:1.55; font-size:15px;
    }
    .info p { margin:0 0 8px; }
    .info p:last-child { margin-bottom:0; }
    .info a, .event-details a, .contact-card a { color:var(--amber); font-weight:800; }
    .map-button {
      display:block; margin-top:16px; text-align:center; text-decoration:none;
      background:linear-gradient(135deg,#b45309,#92400e); color:white;
      font-weight:900; padding:12px 16px; border-radius:999px;
      box-shadow:0 10px 24px rgba(146,64,14,.16);
    }
    .map-button:hover { filter:brightness(.96); transform:translateY(-1px); }
    .meetings { background:linear-gradient(135deg,#fef3c7,#fde68a,#fff7ed); }
    .event-card {
      display:grid; grid-template-columns:1fr .9fr; gap:28px;
      background:white; border-radius:34px; padding:30px;
      box-shadow:0 20px 52px rgba(146,64,14,.14); border:1px solid #f0d28f;
    }
    .event-badge {
      display:inline-block; color:white; background:linear-gradient(135deg,#b45309,#92400e);
      padding:8px 14px; border-radius:999px; font-weight:900; margin-bottom:18px;
    }
    .event-card h3 { margin:0; font-size:clamp(28px,4vw,44px); line-height:1.05; }
    .event-card p { color:var(--muted); line-height:1.7; }
    .event-details { background:#fff7ed; border-radius:26px; padding:22px; }
    .event-details p { margin:0 0 12px; color:#374151; }
    .placeholder-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
    .placeholder {
      background:rgba(255,255,255,.72); border:1px dashed #d6a36a;
      border-radius:24px; padding:22px;
    }
    .placeholder h4 { margin:0 0 8px; color:var(--amber); font-size:18px; }
    .placeholder p { margin:0; color:var(--muted); line-height:1.6; }
    .warm { background:linear-gradient(135deg,#b45309,#c2410c,#92400e); color:white; }
    .warm .over { color:#fde68a; }
    .warm p { color:rgba(255,255,255,.78); line-height:1.7; }
    .teach { display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px; }
    .teach article {
      background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
      border-radius:28px; padding:30px;
    }
    .teach article h3 { margin:0 0 20px; font-size:28px; }
    .teach article h4 { margin:26px 0 10px; font-size:20px; color:#fde68a; }
    .teach article p { margin:0 0 14px; line-height:1.75; }
    .teach blockquote {
      margin:18px 0; padding:18px 20px; border-left:4px solid #fde68a;
      background:rgba(255,255,255,.08); border-radius:0 18px 18px 0;
      line-height:1.75;
    }
    .teach .source { margin-top:20px; font-size:14px; color:rgba(255,255,255,.82); }
    .teach .source a {
      display:inline-block; margin:6px 10px 0 0; color:white; font-weight:800;
      text-decoration:underline; text-underline-offset:3px;
    }
    .contact-card {
      background:white; border-radius:28px; padding:28px;
      box-shadow:0 8px 24px rgba(0,0,0,.05); max-width:760px;
    }
    .contact-line {
      margin-top:18px; padding:20px; border-radius:22px;
      background:#fff7ed; border:1px solid #f1dfcc;
    }
    .contact-line p { margin:0 0 7px; }
    footer {
      background:linear-gradient(90deg,#92400e,#b45309,#92400e);
      color:white; padding:28px 0;
    }
    footer .wrap {
      display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;
    }
    footer .small { color:rgba(255,255,255,.78); margin-top:6px; font-size:14px; }
    @media (max-width:880px) {
      .hero-grid, .mission, .grid, .teach, .event-card, .placeholder-row { grid-template-columns:1fr; }
      .groups-top { align-items:stretch; flex-direction:column; }
      .links { display:none; }
      section { padding:54px 0; }
    }
  
    .teach details {
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.16);
      border-radius:28px;
      overflow:hidden;
    }
    .teach summary {
      cursor:pointer;
      list-style:none;
      padding:24px 28px;
      font-size:24px;
      font-weight:900;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .teach summary::-webkit-details-marker { display:none; }
    .teach summary::after {
      content:"+";
      font-size:30px;
      line-height:1;
      font-weight:700;
      color:#fde68a;
    }
    .teach details[open] summary::after { content:"−"; }
    .teach .teach-content {
      padding:0 30px 30px;
      border-top:1px solid rgba(255,255,255,.12);
    }

  
    .nav-action {
      border:2px solid rgba(255,255,255,.82);
      background:rgba(255,255,255,.16);
      border-radius:999px;
      padding:10px 16px !important;
      font-weight:900 !important;
      box-shadow:0 6px 18px rgba(0,0,0,.12);
    }
    .nav-action:hover {
      background:white;
      color:#4b2e1f !important;
      transform:translateY(-1px);
    }
    .action-panels {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:24px;
      margin-top:30px;
    }
    .action-panel {
      background:white;
      border:2px solid #d8c9b7;
      border-radius:28px;
      padding:32px;
      box-shadow:0 16px 38px rgba(48,38,24,.12);
      text-align:center;
    }
    .action-panel h3 {
      margin:0 0 12px;
      font-size:28px;
    }
    .action-panel p {
      margin:0 auto 22px;
      line-height:1.65;
      max-width:520px;
    }
    .action-panel .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:210px;
      padding:14px 24px;
      border-radius:999px;
      font-size:17px;
      font-weight:900;
      box-shadow:0 9px 22px rgba(48,38,24,.16);
    }
    .action-panel .btn::before {
      margin-right:9px;
      font-size:19px;
    }
    #rester-informe .btn::before { content:"✉"; }
    #soutenir .btn::before { content:"♥"; }
    @media (max-width:760px) {
      .action-panels { grid-template-columns:1fr; }
    }

  
    /* Deux actions, deux identités visuelles */
    #rester-informe {
      border-color:#8aa7a0;
      background:#f3f8f6;
    }
    #rester-informe .btn {
      background:#426f68;
      color:white;
    }
    #soutenir {
      border-color:#c6a45f;
      background:#fffaf0;
    }
    #soutenir .btn {
      background:#9a7331;
      color:white;
    }
    nav a[href="#rester-informe"].nav-action {
      background:#426f68;
      border-color:#7fa39b;
      color:white;
    }
    nav a[href="#soutenir"].nav-action {
      background:#9a7331;
      border-color:#c9aa6a;
      color:white;
    }

  
    /* Bandeau d'accueil — Cathédrale Saint-Paul de Liège */
    .hero {
      position:relative;
      background:
        linear-gradient(rgba(35,27,23,.48), rgba(35,27,23,.48)),
        url('assets/st-paul-liege.jpg') center 46% / cover no-repeat !important;
    }
    .hero > * {
      position:relative;
      z-index:1;
    }

  
    /* Lisibilité du texte d'introduction sur la photo du bandeau */
    .hero .lead {
      color:#ffffff !important;
      text-shadow:0 2px 8px rgba(0,0,0,.75);
      font-weight:600;
    }

  
    /* Lisibilité du titre principal sur la photo du bandeau */
    .hero h1 {
      color:#ffffff !important;
      text-shadow:0 3px 10px rgba(0,0,0,.82);
    }

  
    .meeting-date {
      margin:18px 0;
      padding:16px 18px;
      border-left:4px solid #c6a45f;
      background:rgba(255,255,255,.10);
      border-radius:0 14px 14px 0;
    }
    .meeting-date h4 { margin:0 0 8px; }
    .meeting-date p { margin:5px 0; }