*/
.page-rejoindre .chip{
display:inline-flex;
align-items:center;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: var(--ink);
background: rgba(91,75,199,0.08);
border: 1px solid rgba(91,75,199,0.18);
white-space: nowrap;
}
/* Mobile : chips sous le texte */
@media (max-width: 900px){
.page-rejoindre .card-feature{
grid-template-columns: 1fr;
}
.page-rejoindre .card-feature-aside{
justify-content: flex-start;
}
}
/* 2) Bloc 2 : rejoindre-grid (3 cartes) */
.page-rejoindre .rejoindre-grid{
margin-top: 18px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px){
.page-rejoindre .rejoindre-grid{
grid-template-columns: 1fr;
}
}
/* 3) Bloc 3 : benefits (2x2) — sécurité si ça saute à nouveau */
.page-rejoindre .benefits{
margin-top: 18px;
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.page-rejoindre .benefit{
background:#fff;
border:1px solid var(--line);
border-radius: 16px;
padding: 18px;
box-shadow: var(--shadow-soft);
}
.page-rejoindre .benefit h3{ margin: 0 0 8px; }
.page-rejoindre .benefit p{ margin: 0; }
@media (max-width: 900px){
.page-rejoindre .benefits{
grid-template-columns: 1fr;
}
}
/* 4) Bloc 4 : CTA — éviter les boutons collés (surtout mobile) */
.page-rejoindre .cta-actions{
display:flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 14px;
}
@media (max-width: 900px){
.page-rejoindre .cta-actions .btn{
width: 100%;
justify-content: center;
}
}
/* 5) Optionnel : si tu veux un rendu “premium” sur les blocs white */
.page-rejoindre .section-white .card{
box-shadow: var(--shadow-soft);
}
/* =========================================================
HOME — HERO GRID + BLOC "TEMPS DE RENCONTRE"
Objectif :
- garder une vraie colonne droite sur desktop (hero-copy / hero-media)
- permettre un encart (form / agenda) AU-DESSUS du visuel à droite
Markup attendu (index.html) :
========================================================= */
/* Grille hero (desktop) */
.hero-grid{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap:28px;
align-items:start;
}
/* Colonne gauche */
.hero-copy .muted{ color: var(--muted); }
/* CTA row (home) — si présent dans le HTML */
.cta-row{
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:center;
margin-top:18px;
}
/* Colonne droite : encart + visuel */
.hero-media{
display:grid;
gap:16px;
align-content:start;
}
/* Visuel (image) */
.hero-visual{
padding:0; /* la card ne rajoute pas une “double marge” autour de l’image */
overflow:hidden;
border-radius: var(--radius);
}
.hero-img{
width:100%;
height:auto;
display:block;
}
/* Encart “Temps de rencontre” (dans la colonne droite) */
.hero-events{
border-color: rgba(91,75,199,0.18);
background:
radial-gradient(520px 220px at 18% 10%, rgba(91,75,199,0.10), transparent 55%),
linear-gradient(180deg, rgba(246,247,251,0.92) 0%, rgba(255,255,255,0.98) 100%);
box-shadow: var(--shadow-soft);
padding:18px;
}
.hero-events h3{
margin:0 0 10px;
font-size:18px;
}
.hero-events p{
margin:0 0 10px;
color: var(--ink-soft);
}
.hero-events ul{
margin: 8px 0 10px;
padding-left:18px;
color: var(--ink);
}
.hero-events li{
margin: 0 0 6px;
}
/* Lien/CTA interne de l’encart (si tu utilises un
simple) */
.hero-events .hero-events-link{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:800;
color: var(--primary);
margin-top:4px;
}
.hero-events .hero-events-link:hover{
text-decoration: underline;
}
/* Responsive : passage en 1 colonne (garde le visuel + encart sous le texte) */
@media (max-width:900px){
.hero-grid{
grid-template-columns: 1fr;
}
.hero-media{
margin-top: 18px;
}
.hero-events{
padding:16px;
}
}
/* Image sous le hero, à la largeur du container (comme avant) */
.section-hero .hero-image-wrap{
margin-top: 18px; /* ajuste si besoin */
}
.section-hero .hero-image-wrap .hero-visual{
padding: 0;
overflow: hidden;
}
.section-hero .hero-image-wrap .hero-img{
width: 100%;
height: auto;
display: block;
}