/*
  Feuille commune aux pages d'entree des campagnes (trouver-partenaire,
  padel-antibes). La vitrine garde son style en ligne : elle est bien plus
  riche, et ces pages doivent rester legeres -- une annonce paye chaque clic,
  et une page lente le gaspille.

  Memes couleurs que la vitrine, pour qu'un visiteur venu d'une annonce
  reconnaisse ensuite le site.
*/
:root {
  --bleu-50: #eef7ff;
  --bleu-100: #d9edff;
  --bleu-600: #1c70f0;
  --bleu-700: #175adc;
  --jaune: #ffd21e;
  --marine: #0d202b;
  --ardoise-200: #e2e8f0;
  --ardoise-500: #64748b;
  --ardoise-700: #334155;
  --ardoise-900: #0f172a;
  --blanc: #fff;
  --police: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--police);
  color: var(--ardoise-900);
  background: var(--blanc);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.zone { max-width: 760px; margin: 0 auto; padding: 0 20px; }

header.entete { background: var(--marine); padding: 16px 0; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); font-weight: 700; text-decoration: none; }
.marque img { width: 28px; height: 28px; }
.marque span { color: var(--jaune); font-weight: 600; }

.banniere { background: linear-gradient(180deg, var(--bleu-50), var(--blanc)); padding: 48px 0 40px; }
.surtitre { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-700); }
h1 { margin-top: 12px; font-size: clamp(28px, 6vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
h1 em { font-style: normal; color: var(--bleu-600); }
.chapeau { margin-top: 16px; font-size: 17px; color: var(--ardoise-700); }

.actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.bouton { display: inline-block; padding: 14px 22px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.bouton-principal { background: var(--bleu-600); color: var(--blanc); }
.bouton-principal:hover { background: var(--bleu-700); }
.bouton-secondaire { border: 1px solid var(--ardoise-200); color: var(--ardoise-700); }
.note { margin-top: 12px; font-size: 13.5px; color: var(--ardoise-500); }

section { padding: 40px 0; }
h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.01em; }
h3 { margin-top: 4px; font-size: 17px; }
p + p, ul + p, h2 + p { margin-top: 12px; }

.points { margin-top: 24px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); } }
.point { border: 1px solid var(--ardoise-200); border-radius: 16px; padding: 20px; }
.point p { margin-top: 8px; font-size: 14.5px; color: var(--ardoise-700); }

.liste { margin-top: 12px; padding-left: 20px; color: var(--ardoise-700); }
.liste li { margin-top: 6px; }

.question { border-top: 1px solid var(--ardoise-200); padding: 14px 0; }
.question summary { cursor: pointer; font-weight: 600; }
.question p { margin-top: 8px; font-size: 14.5px; color: var(--ardoise-700); }

footer { background: var(--marine); color: rgba(255, 255, 255, .75); padding: 28px 0; font-size: 14px; margin-top: 24px; }
footer a { color: rgba(255, 255, 255, .9); }