/* =========================================================
   Archets Pour Un Espoir — feuille de style principale
   Palette issue du logo :
   rouge #d93b2f / orange #e07525 / or #f6af3d
   vert foncé #418828 / vert moyen #55ac39 / vert clair #79bf5f
   ========================================================= */

:root {
  --red: #d93b2f;
  --red-dark: #b82f25;
  --orange: #a8501a; /* assombri (audit accessibilité : texte blanc du bandeau CTA insuffisamment contrasté sur l'orange d'origine #e07525) */
  --gold: #f6af3d;
  --green-dark: #2c6b16; /* assombri (audit accessibilité : texte de l'eyebrow/des messages de confirmation insuffisamment contrasté) */
  --green-mid: #55ac39;
  --green-light: #79bf5f;

  --cream: #fdf6ea;
  --paper: #fffaf2;
  --ink: #2e2a22;
  --ink-light: #6b6153;
  --border-soft: #ead9bd;

  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;

  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(46, 42, 34, 0.08);
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

.prose p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.prose p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 72px 0;
}

.section--alt {
  background: var(--paper);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--green-dark);
  background: rgba(85, 172, 57, 0.12);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-head p {
  color: var(--ink-light);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { background: var(--red-dark); color: #fff; }

.btn--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: #fff; }

.btn--light {
  background: #fff;
  color: var(--red);
}

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Cadre "feutre" façon logo ---------- */
.frame-marker {
  position: relative;
  border: 3px solid var(--red);
  border-radius: 6px;
  padding: 6px;
}
.frame-marker::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  transform: rotate(-0.6deg);
  z-index: -1;
}
.frame-marker--fill {
  padding: 0;
  overflow: hidden;
}
.frame-marker--fill:has(img[data-next-concert="image"]) {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.frame-marker--fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bannière d'accueil : hauteur explicite (via aspect-ratio) pour que
   height:100% ait un sens et que l'image recouvre vraiment tout le cadre,
   sans dépendre de sa hauteur naturelle (qui laissait un espace vide
   quand la colonne de texte, plus haute, centrait le cadre verticalement). */
.hero-grid .frame-marker--fill { aspect-ratio: 400 / 271; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}

.nav {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  /* pousse tout le reste (liens + boutons) contre le bord droit,
     tout en gardant le logo toujours ancré à gauche */
  margin-right: auto;
}
.brand img { height: 88px; width: auto; flex-shrink: 0; }

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-links a:hover, .nav-links a.active { color: var(--red); }

/* "Faire un don" et "Contact" dans le menu mobile : gardent l'apparence
   bouton (comme en desktop) au lieu du style "lien de menu" simple, malgré
   la spécificité plus forte de .nav-links a et .nav-links a:hover/.active */
.nav-links a.btn--primary {
  display: inline-flex;
  font-weight: 700 !important;
  color: #fff !important;
}
.nav-links a.btn--primary:hover,
.nav-links a.btn--primary.active {
  color: #fff !important;
}
.nav-links a.btn--secondary {
  display: inline-flex;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.nav-links a.btn--secondary:hover {
  color: #fff !important;
}
.nav-links a.btn--secondary.active {
  color: var(--ink) !important;
}

/* Le lien Contact ne s'affiche que dans le menu mobile (déjà présent via le bouton en desktop) */
.nav-mobile-only { display: none; }

.nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: 48px; }
.nav-cta .btn { white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 960px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: center;
    padding: 20px 24px;
    gap: 16px;
    border-bottom: 1px solid var(--border-soft);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-mobile-only { display: block; }
  .nav-toggle {
    display: block;
    /* distance fixe entre l'icône menu et le bouton "Faire un don", quelle que soit la largeur */
    margin-right: 18px;
  }
  .nav-cta { margin-left: 0; }
  .nav-cta .btn--secondary { display: none; }
  .nav-cta .btn--primary { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 80px;
  background:
    radial-gradient(circle at 85% 15%, rgba(246,175,61,0.18), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(85,172,57,0.15), transparent 45%);
}

/* Vidéo de fond en transparence, derrière le texte et l'image du hero.
   Purement décorative : ne participe pas à la mise en page (position
   absolue), les autres éléments ne bougent donc pas. */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}
/* Masque le bouton lecture natif que WebKit (iOS) affiche sur la vidéo
   quand l'autoplay est bloqué (ex. mode Faible consommation) : la vidéo
   est purement décorative, ce bouton n'a aucune utilité. */
.hero-video-bg::-webkit-media-controls,
.hero-video-bg::-webkit-media-controls-start-playback-button,
.hero-video-bg::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 18px; }
.hero .lead { font-size: 1.15rem; color: var(--ink-light); margin-bottom: 32px; max-width: 520px; }

.hero-badges-label {
  display: block;
  margin-top: 40px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-badges {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 40px;
  row-gap: 16px;
  margin-top: 0;
}
@media (max-width: 460px) {
  .hero-badges { grid-template-columns: 1fr; }
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-light);
}
.hero-badge strong { color: var(--ink); display: block; font-size: 1.3rem; font-family: var(--font-head); }

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: 32px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-4px); }
a.card { display: block; text-decoration: none; color: inherit; }

.card .card-img { aspect-ratio: 4/3; background: var(--paper); }
.card .card-body { padding: 24px; }

/* Équipe / bénévoles (page À propos) : présentation compacte, sans photo */
.team-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 32px;
}
.team-member {
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--gold);
}
.team-member h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.team-member p {
  font-size: 0.85rem;
  color: var(--ink-light);
  margin: 0;
}
@media (max-width: 900px) {
  .team-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .team-list { grid-template-columns: 1fr; }
}

/* Actualités : toutes les images ont la même hauteur (recadrées pour
   remplir le cadre 4:3, quelle que soit leur taille ou proportion d'origine). */
.news-grid .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Actualités : lien "Lire la suite" toujours en bas à droite de la carte,
   même quand les cartes d'une même ligne sont étirées à des hauteurs égales. */
.news-grid .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Titres des actualités : hiérarchie sémantique corrigée (h2 puis h3, sans
   sauter de niveau après le h1 de la page) mais tailles visuelles conservées
   telles qu'à l'origine, indépendamment du niveau de titre. */
.news-grid h2 { font-size: 1.3rem; }
.news-grid h3 { font-size: 1rem; }
.news-grid .card-body p { margin-bottom: 0; }
.news-grid .read-more {
  margin-top: 16px;
  align-self: flex-end;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: none;
}
.news-grid .read-more:hover { text-decoration: underline; }

/* Accueil : section "Prochain rendez-vous" — l'image ne doit pas trop
   rétrécir. On passe en une colonne (image pleine largeur) plus tôt que les
   autres grilles 2 colonnes, avant que l'espace ne devienne trop étroit. */
.next-concert-grid .frame-marker--fill { min-width: 280px; }
@media (max-width: 820px) {
  .next-concert-grid { grid-template-columns: 1fr; }
}

/* Contact (formulaire / coordonnées) et Bénévolat (texte / formulaire) :
   passent en une seule colonne plus tôt que les autres grilles 2 colonnes,
   pour éviter la zone intermédiaire où les deux blocs restent côte à côte,
   trop resserrés, avant le passage en mode mobile classique (600px).
   L'ordre du HTML détermine l'ordre empilé : formulaire au-dessus des
   coordonnées (contact), texte au-dessus du formulaire (bénévolat). */
@media (max-width: 900px) {
  .grid-stack-early { grid-template-columns: 1fr; }
}

/* Photo + légende (page À propos, section Historique) */
.history-figure { margin: 0 auto; max-width: 240px; }
.history-figure figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-light);
  text-align: center;
}

/* Chiffres clés (page À propos, fin de la section Historique) */
.history-stats { margin-top: 56px; }
.history-stats h3 { margin-bottom: 6px; }
.history-stats .stats { margin-top: 28px; }

/* Partenaires (page Nos actions) : les cartes s'étirent pour égaler la
   hauteur de la plus grande (celle avec titre + texte) ; on centre donc
   le contenu verticalement pour que les logos ne restent pas collés en haut. */
.grid--4 .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card .card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2.4rem;
  color: var(--red);
}
.stat span { color: var(--ink-light); font-size: 0.9rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--red), var(--orange));
  color: #fff;
  border-radius: 24px;
  padding: 56px;
  text-align: center;
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band .btn--secondary { border-color: #fff; color: #fff; }
.cta-band .btn--secondary:hover { background: #fff; color: var(--red); }

@media (max-width: 700px) { .cta-band { padding: 36px 24px; } }

/* ---------- Formulaires ---------- */
form { max-width: 640px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: 0.85rem; color: var(--ink-light); }

/* Case à cocher dans un .field (ex: "Adhérez-vous en couple ?") : ne doit
   pas hériter du width:100% appliqué aux autres inputs de formulaire. */
.field-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
}
.field input[type="checkbox"] {
  width: auto;
  accent-color: var(--red);
}

/* Page Dons : centre tout le bloc "Montant du don" (formulaire) sur la
   page, pour qu'il s'aligne avec le titre déjà centré au-dessus. */
.donate-form {
  max-width: 720px;
  margin: 0 auto;
}
.donate-form button[type="submit"] {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}
.donate-form .form-note {
  text-align: center;
}

.form-feedback {
  display: none;
  background: rgba(65, 136, 40, 0.12);
  border: 1px solid var(--green-mid);
  color: var(--green-dark);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

/* ---------- Dons montants ---------- */
.donate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0 40px;
}
@media (max-width: 700px) { .donate-grid { grid-template-columns: repeat(2, 1fr); } }
.donate-option {
  background: #fff;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.donate-option:hover, .donate-option.selected { border-color: var(--red); }
.donate-option strong { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--red); margin-bottom: 6px; }
.donate-option span { font-size: 0.82rem; color: var(--ink-light); }

/* ---------- Timeline (actions) ---------- */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: "";
  position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border-soft);
}
.timeline-item { position: relative; padding-bottom: 40px; }
.timeline-item::before {
  content: "";
  position: absolute; left: -32px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-mid);
  border: 3px solid var(--cream);
}
.timeline-item .date { color: var(--red); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #f2ece0;
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Chaque colonne s'étire sur toute la hauteur de la ligne (comportement
   grid par défaut) ; en la transformant en conteneur flex vertical, on peut
   pousser son dernier élément (icônes sociales / bouton newsletter) tout en
   bas via margin-top:auto, pour que les deux colonnes se terminent bien à
   la même hauteur, quel que soit le texte au-dessus. */
.footer-col { display: flex; flex-direction: column; }
.footer-col .connect-links,
.footer-col .newsletter-form { margin-top: auto; }

.site-footer h3 { color: #fff; font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: #cfc6b5; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand img { height: 40px; }
.connect-links { display: flex; gap: 14px; }
.connect-links a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.connect-links a:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-3px);
}
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.newsletter-form input[type="email"]::placeholder { color: #cfc6b5; }
.newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  background: rgba(255,255,255,0.12);
}
.newsletter-form .btn { width: 100%; justify-content: center; }
.newsletter-form .form-feedback { font-size: 0.78rem; padding: 10px 12px; margin-bottom: 10px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  font-size: clamp(0.52rem, 2.2vw, 0.82rem);
  color: #ada393;
  white-space: nowrap;
}
.footer-bottom a { color: #ada393; flex-shrink: 0; }
/* Si malgré la réduction de police le texte de copyright est encore trop
   long sur un très petit écran, il se tronque proprement (...) plutôt que
   de passer à la ligne — "Mentions légales" reste toujours entier et cliquable. */
.footer-bottom .footer-copyright {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------- Breadcrumb / page header ---------- */
.page-hero {
  padding: 56px 0 48px;
  text-align: center;
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
}
.page-hero .eyebrow { margin-bottom: 10px; }

/* ---------- Testimonials ---------- */
.quote-card {
  background: #fff;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.quote-card p { font-style: italic; color: var(--ink-light); }
.quote-card footer { font-weight: 600; color: var(--ink); font-style: normal; }

/* ---------- Utils ---------- */
.text-center { text-align: center; }

/* Logos partenaires (page Nos actions, section "Partenaires").
   Les logos fournis ont des formats très différents (carrés, bannières
   larges, portraits...). Pour un rendu uniforme quel que soit le format
   d'origine, chaque logo est affiché dans un cadre de hauteur fixe, centré,
   sans jamais être rogné (object-fit: contain via max-height/max-width). */
.grid--4 .partner-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-logo-frame img {
  display: block;
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
}

/* Version compacte de la grille de logos partenaires (page d'accueil,
   colonne de largeur réduite) : 3 colonnes, cadre et logos plus petits. */
.partner-mini-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.partner-mini-grid .card-body { padding: 10px; }
.partner-mini-grid .partner-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-mini-grid .partner-logo-frame img { max-height: 44px; }