/* ==========================================================
   Swiss Starter — feuille de style
   Les couleurs principales sont définies ici, une seule fois.
   ========================================================== */
:root{
  --indigo:#16123A;
  --indigo-2:#221D4D;
  --indigo-line:#3A346A;
  --jaune:#FFC845;
  --corail:#FF6B4A;
  --lavande:#B9A6FF;
  --violet:#6B3FD6;
  --fond-clair:#F4F1FF;
  --texte-doux:#4A4570;
  --texte-carte:#3A3560;
  --texte-sur-sombre:#D7D3F2;
  --c-jaune:#FFE6A6;
  --c-rose:#FFD4C9;
  --c-lavande:#E3DCFF;
  --c-vert:#CFF3E1;
  --titre:'Bricolage Grotesque',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;font-family:'DM Sans',sans-serif;color:var(--indigo);font-size:16px;line-height:1.55}
a{color:var(--indigo)}a:hover{color:#000}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:96px 24px}
.titre-section{margin:0;font-family:var(--titre);font-weight:800;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.035em;line-height:1.02}
.entete-section{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:end;justify-content:space-between;margin-bottom:40px}
.entete-section p{margin:0;font-size:17px;color:var(--texte-doux);max-width:440px}
.btn{display:inline-block;text-decoration:none;padding:16px 26px;border-radius:999px;font-weight:700;font-size:17px;text-align:center}
.btn-jaune{background:var(--jaune);color:var(--indigo)}
.btn-contour{border:2px solid #4A4478;color:#FFFFFF;padding:14px 24px}
.btn-indigo{background:var(--indigo);color:#FFFFFF}
.btn-indigo:hover{color:#FFFFFF}
.btn-contour-indigo{border:2px solid var(--indigo);color:var(--indigo);padding:14px 26px}

/* ---------- En-tête ---------- */
.hero-fond{background:var(--indigo);color:#FFFFFF;overflow:hidden}
.topbar{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#FFFFFF}
.logo:hover{color:#FFFFFF}
.logo-carre{width:40px;height:40px;border-radius:12px;background:var(--jaune);display:flex;align-items:center;justify-content:center;font-family:var(--titre);font-weight:800;font-size:20px;color:var(--indigo)}
.logo-nom{font-family:var(--titre);font-weight:800;font-size:22px;letter-spacing:-.02em}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;font-weight:500;font-size:15px}
.nav a{color:#FFFFFF;text-decoration:none;padding:10px 0}
.nav a.nav-cta{color:var(--indigo);background:var(--jaune);padding:12px 20px;border-radius:999px;font-weight:700}
.hero{max-width:1240px;margin:0 auto;padding:56px 24px 104px;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hero-texte{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:26px}
.badge{align-self:flex-start;background:var(--corail);color:var(--indigo);font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px}
.hero h1{margin:0;font-family:var(--titre);font-weight:800;font-size:clamp(44px,6.4vw,84px);line-height:.98;letter-spacing:-.04em}
.hero h1 span{color:var(--jaune)}
.hero-intro{margin:0;font-size:19px;line-height:1.6;color:var(--texte-sur-sombre);max-width:540px}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
.hero-visuel{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mosaique img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;display:block}
.mosaique img:nth-child(1){border-radius:24px 24px 24px 4px}
.mosaique img:nth-child(3){border-radius:24px 24px 4px 24px}
.mosaique img:nth-child(4){border-radius:24px 4px 24px 24px}
.chiffre{border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:var(--indigo)}
.chiffre b{font-family:var(--titre);font-weight:800;font-size:40px;line-height:1}
.chiffre span{font-size:13px;font-weight:700}
.carte-fb{text-decoration:none;background:#FFFFFF;color:var(--indigo);border-radius:20px;padding:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.carte-fb-gauche{display:flex;gap:14px;align-items:center;min-width:0}
.icone-fb{width:48px;height:48px;border-radius:14px;background:#1877F2;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.carte-fb small{display:block;font-size:13px;font-weight:700;color:var(--violet)}
.carte-fb strong{font-family:var(--titre);font-size:19px}
.pastille-indigo{color:#FFFFFF;background:var(--indigo);padding:12px 18px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none}
a.pastille-indigo:hover{color:#FFFFFF;opacity:.9}
.pastille-in{background:#0A66C2}
.boutons-reseaux{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Ce qu'on vit ensemble ---------- */
.grille-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.format{border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:10px}
.format .num{font-family:var(--titre);font-weight:800;font-size:15px}
.format h3{margin:0;font-family:var(--titre);font-size:24px;font-weight:700;line-height:1.15}
.format p{margin:0;font-size:15px;color:var(--texte-carte)}
.bg-jaune{background:var(--c-jaune)}.bg-rose{background:var(--c-rose)}.bg-lavande{background:var(--c-lavande)}.bg-vert{background:var(--c-vert)}

/* ---------- Événements ---------- */
.fond-clair{background:var(--fond-clair)}
.onglets{display:flex;gap:6px;background:#FFFFFF;padding:6px;border-radius:999px}
.onglets button{font-family:inherit;font-size:15px;font-weight:700;min-height:44px;padding:0 20px;border-radius:999px;border:none;cursor:pointer;background:transparent;color:var(--indigo)}
.onglets button[aria-pressed="true"]{background:var(--indigo);color:#FFFFFF}
.evt-avenir{display:flex;flex-wrap:wrap;gap:16px}
.evt-liste{flex:999 1 520px;min-width:0;background:#FFFFFF;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px}
.evt-ligne{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:16px;border-radius:16px;background:var(--fond-clair);text-decoration:none;color:var(--indigo)}
a.evt-ligne:hover{outline:2px solid var(--indigo)}
.evt-titre{flex:1 1 260px;min-width:0;font-weight:700}
.evt-titre small{display:block;font-weight:500;font-size:14px;color:var(--texte-doux)}
.evt-date{font-size:14px;color:var(--violet);font-weight:700}
.evt-vide{margin:0;padding:16px;border-radius:16px;background:var(--fond-clair);color:var(--texte-doux)}
.tag{font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;color:var(--indigo);background:#ECE8FA;white-space:nowrap}
.evt-encart{flex:1 1 280px;min-width:0;background:var(--indigo);color:#FFFFFF;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.evt-encart b{font-family:var(--titre);font-weight:800;font-size:28px;line-height:1.1}
.evt-encart span{font-size:15px;color:var(--texte-sur-sombre)}
.grille-passes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.evt-passe{background:#FFFFFF;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.evt-passe span:last-child{font-family:var(--titre);font-weight:700;font-size:19px;line-height:1.25}
[hidden]{display:none!important}

/* ---------- Intervenants ---------- */
.grille-intervenants{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.intervenant{margin:0;display:flex;gap:18px;align-items:center;padding:20px;border-radius:24px}
.intervenant img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0;border:4px solid #FFFFFF}
.intervenant figcaption{display:flex;flex-direction:column;gap:4px;min-width:0}
.intervenant b{font-family:var(--titre);font-weight:700;font-size:20px;line-height:1.15}
.intervenant span{font-size:14px;color:var(--texte-carte)}

/* ---------- À propos ---------- */
.sombre{background:var(--indigo);color:#FFFFFF}
.apropos-entete{display:flex;flex-wrap:wrap;gap:24px 56px;margin-bottom:44px}
.apropos-entete h2{flex:1 1 360px}
.apropos-entete p{flex:1 1 420px;margin:0;font-size:17px;line-height:1.65;color:var(--texte-sur-sombre)}
.grille-raisons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.raison{border:2px solid var(--indigo-line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:10px}
.raison .num{font-family:var(--titre);font-weight:800;font-size:34px;line-height:1}
.raison h3{margin:0;font-size:19px;font-weight:700}
.raison p{margin:0;font-size:15px;color:#C9C4EA}
.c-jaune{color:var(--jaune)}.c-corail{color:var(--corail)}.c-lavande{color:var(--lavande)}
.honneur{margin-top:44px;background:var(--indigo-2);border-radius:22px;padding:28px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}
.honneur-titre{flex:1 1 260px;display:flex;flex-direction:column;gap:6px}
.honneur-titre small{font-size:13px;font-weight:700;color:var(--jaune)}
.honneur-titre b{font-family:var(--titre);font-weight:700;font-size:22px}
.honneur-liste{flex:999 1 420px;display:flex;flex-wrap:wrap;gap:10px}
.membre{display:inline-flex;align-items:center;gap:10px;background:var(--indigo);border:2px solid var(--indigo-line);border-radius:999px;padding:8px 10px 8px 18px;font-weight:700;color:#FFFFFF;text-decoration:none;min-height:48px}
.membre:hover{color:#FFFFFF;border-color:var(--jaune)}
.icone-in{width:30px;height:30px;border-radius:8px;background:#0A66C2;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- Témoignages ---------- */
.temoignage{border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:18px;min-height:260px}
.temoignage blockquote{margin:0;font-family:var(--titre);font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.25;letter-spacing:-.015em;max-width:900px}
.temoignage figcaption{font-weight:700}
.fleches{display:flex;gap:8px}
.fleches button{width:48px;height:48px;border-radius:50%;border:2px solid var(--indigo);background:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fleches button.plein{background:var(--indigo);border:none}

/* ---------- Lectures ---------- */
.grille-livres{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.livre{border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.livre small{font-size:13px;font-weight:700;color:var(--violet);text-transform:uppercase}
.livre b{font-family:var(--titre);font-weight:800;font-size:23px;line-height:1.1}
.livre span{font-size:15px;color:var(--texte-carte)}

/* ---------- Partenaires ---------- */
.grille-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.logo-partenaire{background:#FFFFFF;border-radius:18px;height:96px;display:flex;align-items:center;justify-content:center;padding:16px}
.logo-partenaire img{max-width:100%;max-height:56px;object-fit:contain;display:block}
.logo-partenaire.grand{grid-column:span 2}
.logo-partenaire.grand img{max-height:72px}

/* ---------- Rejoindre ---------- */
.rejoindre{background:var(--corail);color:var(--indigo);border-radius:32px;padding:56px 40px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.rejoindre h2{margin:0;font-family:var(--titre);font-weight:800;font-size:clamp(32px,4vw,48px);letter-spacing:-.035em;line-height:1.02}
.rejoindre p{margin:12px 0 0;font-size:18px;max-width:560px}
.rejoindre-boutons{flex:1 1 260px;display:flex;flex-direction:column;gap:10px}

/* ---------- Contact ---------- */
.contact{display:flex;flex-wrap:wrap;gap:48px}
.contact-texte{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.contact-texte p{margin:0;font-size:17px;color:var(--texte-doux)}
.contact-texte p.petit{font-size:14px;margin-top:8px}
.contact-boite{flex:999 1 520px;min-width:0;background:var(--fond-clair);border-radius:28px;padding:32px}
.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.large{grid-column:1/-1}
.champ label{font-size:14px;font-weight:700}
.champ input,.champ select,.champ textarea{font-family:inherit;font-size:16px;padding:13px 14px;min-height:48px;border:2px solid transparent;border-radius:14px;background:#FFFFFF;color:var(--indigo)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--indigo)}
.champ textarea{resize:vertical}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire button{grid-column:1/-1;font-family:inherit;min-height:54px;border:none;border-radius:999px;background:var(--indigo);color:#FFFFFF;font-size:17px;font-weight:700;cursor:pointer}
.message-retour{padding:16px 18px;border-radius:14px;margin-bottom:16px;font-weight:700}
.message-retour.ok{background:var(--c-vert)}
.message-retour.erreur{background:var(--c-rose)}

/* ---------- Pied de page ---------- */
.pied{background:var(--indigo);color:#C9C4EA;font-size:15px}
.pied .wrap{padding:48px 24px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.pied-boutons{display:flex;flex-wrap:wrap;gap:10px}
.pied-boutons a{text-decoration:none;padding:11px 20px;border-radius:999px;font-weight:700}

@media (max-width:640px){
  .wrap{padding:64px 16px}
  .formulaire{grid-template-columns:1fr}
  .rejoindre{padding:40px 24px}
  .temoignage{padding:28px}
  .grille-intervenants{grid-template-columns:1fr}
}