dans le bandeau) s'affiche proprement */
.card-weekend .weekend-toggle > div > div
========================================================== */
/* 3) Le bloc texte (le 2e
dans le bandeau) s'affiche proprement */
.card-weekend .weekend-toggle > div > div {
display: block;
margin: 0;
padding: 0;
color: #fff; /* lisible sur fond sombre */
line-height: 1.25;
}/* ==========================================================
SCOPE : @media screen and (min-width: 801px)
PAGE : weekend.php
SECTION : Cartes week-ends
EFFET : grille, cartes et CTA des week-ends
SELECTEUR(S) : .card-weekend .weekend-toggle > div > div strong
========================================================== */
.card-weekend .weekend-toggle > div > div strong {
display: block;
font-size: 1.05rem;
margin-bottom: 2px;
}/* ==========================================================
SCOPE : @media screen and (min-width: 801px)
PAGE : weekend.php
SECTION : Cartes week-ends
EFFET : grille, cartes et CTA des week-ends
SELECTEUR(S) : .card-weekend .weekend-toggle > div > div span
========================================================== */
.card-weekend .weekend-toggle > div > div span {
display: block;
opacity: .9;
font-size: .95rem;
} /* ==========================================================
SCOPE : @media screen and (min-width: 801px)
PAGE : global
SECTION : Éléments HTML
EFFET : règles sur éléments (typographie, espacements)
SELECTEUR(S) : /* 4) Le bouton occupe la largeur, sans contrainte parasite */
.card-weekend .weekend-toggle
========================================================== */
/* 4) Le bouton occupe la largeur, sans contrainte parasite */
.card-weekend .weekend-toggle {
width: 100%;
text-align: left;
} /* ==========================================================
SCOPE : @media screen and (min-width: 801px)
PAGE : weekend.php
SECTION : Cartes week-ends
EFFET : apparence des cartes (bords, ombres, boutons)
SELECTEUR(S) : /* 5) Le panneau sous la carte ne déborde pas en largeur */
.card-weekend #panel_,
.card-weekend .fiche-description
========================================================== */
/* 5) Le panneau sous la carte ne déborde pas en largeur */
.card-weekend #panel_,
.card-weekend .fiche-description {
overflow-x: auto;
}
}
/* ==========================================================
PAGE : weekend.php (et accueil)
SECTION : Liste & cartes week-ends (mosaïque canonique)
EFFET : grille responsive fluide + carte visuelle & hauteur stable
========================================================== */
/* Base (mobile-first) : 1 colonne */
.weekend-list {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 0 auto;
align-items: stretch;
}
/* Carte : apparence + structure (hauteur cohérente) */
.weekend-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.10);
overflow: hidden;
width: auto;
min-width: 0;
}
/* Image d'entête : ratio et recadrage */
.weekend-card > img,
.weekend-card .card-img,
.weekend-card .media img {
width: 100%;
aspect-ratio: 16 / 9; /* ajuste si besoin: 4/3, 3/2, etc. */
object-fit: cover;
display: block;
}
/* Corps : prend l'espace dispo ; footer collé bas */
.weekend-card .content,
.weekend-card .card-body,
.weekend-card .texte,
.weekend-card .inner {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.weekend-card .footer,
.weekend-card .card-footer,
.weekend-card .actions {
margin-top: auto;
padding: 12px 16px;
}
/* Desktop : mosaïque auto-fit */
@media screen and (min-width: 801px) {
.weekend-list {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 1.5rem;
align-items: stretch;
}
}
/* Liens enveloppants : neutres */
.weekend-card a.weekend-link,
.weekend-card a.weekend-link:visited,
.weekend-card a.weekend-link:hover,
.weekend-card a.weekend-link:active {
color: inherit !important;
text-decoration: none;
text-shadow: none !important;
}
/* =======================================================
Bouton d'inscription (nouvelle base propre)
======================================================= */
.btn-inscription {
all: unset; /* efface TOUT style hérité (du lien, titre, etc.) */
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 12px;
background: #e6f3ff;
border: 1px solid #b7d9ea;
color: #064a7a;
font-weight: 600;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
box-sizing: border-box; /* indispensable après un all:unset */
}
.btn-inscription:hover {
background: #d9edff;
transform: translateY(-1px);
text-decoration: none;
}
.btn-inscription:active {
transform: translateY(0);
}
/* ====== Alignement vertical cartes week-ends ====== */
:root{
--we-h-cover: 220px; /* hauteur image */
--we-h-title: 64px; /* titre sur 1–2 lignes max */
--we-h-desc: 120px; /* zone fixe pour la description */
--we-h-meta: 52px; /* Lieu + Dates */
--we-h-pill: 40px; /* pastille d’état */
--we-h-org: 48px; /* avatar + nom organisateur */
--we-h-actions: 56px; /* bouton d’inscription */
}
/* Image de couverture uniforme */
.we-card .we-cover img{
width:100%; height:var(--we-h-cover);
object-fit:cover; display:block;
border-top-left-radius:inherit; border-top-right-radius:inherit;
}
/* Titre */
.we-card .we-title{
min-height:var(--we-h-title);
display:flex; align-items:flex-end;
}
/* Description : zone fixe + ellipsis */
.we-card .we-desc{
min-height:var(--we-h-desc);
max-height:var(--we-h-desc);
overflow:hidden;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; /* ≈ 6 lignes */
}
/* Lieu + dates */
.we-card .we-meta{
min-height:var(--we-h-meta);
display:flex; flex-direction:column; justify-content:center;
}
/* Pastille */
.we-card .we-pill{
min-height:var(--we-h-pill);
display:flex; align-items:center;
}
/* Organisateur */
.we-card .we-organizer{
min-height:var(--we-h-org);
display:flex; align-items:center; gap:10px;
}
/* Bouton */
.we-card .we-actions{
min-height:var(--we-h-actions);
display:flex; align-items:center;
}
/* Optionnel : harmonise les séparateurs */
.we-card hr{ margin:8px 0; }
/* =======================================================
ALIGNEMENT TOTAL DES CARTES WEEK-END (layout grid)
======================================================= */
:root{
--we-h-cover: 220px; /* image */
--we-h-title: 70px; /* titre sur 1–2 lignes */
--we-h-desc: 120px; /* zone de description (blanc si courte) */
--we-h-meta: 54px; /* Lieu + Dates */
--we-h-pill: 40px; /* pastille état */
--we-h-org: 48px; /* organisateur */
--we-h-actions: 56px; /* bouton */
}
/* 1) La carte devient une grille à 7 lignes fixes */
.we-card{
display: grid;
grid-template-rows:
var(--we-h-cover)
var(--we-h-title)
var(--we-h-desc)
var(--we-h-meta)
var(--we-h-pill)
var(--we-h-org)
var(--we-h-actions);
}
/* 2) Reset des marges qui faisaient varier les hauteurs */
.we-card h1, .we-card h2, .we-card h3,
.we-card p, .we-card hr {
margin: 0;
}
/* 3) Chaque “rangée” de la grille s’aligne verticalement au centre */
.we-cover, .we-title, .we-desc, .we-meta, .we-pill, .we-organizer, .we-actions{
display: flex;
align-items: center;
}
/* 4) Couverture fixe et propre dans sa ligne */
.we-cover{ height: 100%; }
.we-cover img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 5) Titre : pas d’écart parasite */
.we-title{ padding: 0 0 2px 0; } /* léger ajustement visuel */
/* 6) Description : “fenêtre” fixe + ellipsis multi-lignes */
.we-desc{
overflow: hidden;
}
.we-desc > p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6; /* ~6 lignes pour ~120px, ajuste si besoin */
overflow: hidden;
}
/* 7) Lieu + Dates : pas de sauts verticaux */
.we-meta{ flex-direction: column; justify-content: center; }
.we-meta p{ margin: 0; }
/* 8) Pastille : centrée et non extensible (si texte long) */
.we-pill{ overflow: hidden; }
.we-pill .pill{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
/* 9) Orga : avatar + nom bien calés */
.we-organizer{ gap: 10px; }
/* 10) Bouton : aligné à gauche, hauteur figée */
.we-actions{ justify-content: flex-start; }
/* 11) On neutralise les
pour éviter un “row” fantôme */
.we-card hr{ display: none; }
/* --- Fix: bouton coupé en bas des cartes --- */
:root{
/* on donne un peu plus d'air à la ligne "actions" */
--we-h-actions: 60px; /* 56px -> 70px */
}
/* ajoute un petit padding bas dans la rangée du bouton */
.we-actions{ padding-bottom: 8px; }
/* au cas où la carte a overflow/arrondis serrés, on ajoute du souffle bas */
.weekend-card.we-card{ padding-bottom: 12px; } /* n'affecte que ces cartes */
/* ================== Finitions cartes week-end ================== */
/* 1) Lieu + Dates alignés à gauche */
.we-meta{
align-items: flex-start; /* plus centré verticalement */
justify-content: center;
text-align: left; /* force l'alignement du texte */
}
.we-meta p{ margin: 0; width: 100%; }
/* 2) Espace sous la pastille (avant le bloc responsable) */
.we-pill{ margin-bottom: 8px; }
/* 3) Bloc Responsable : bordure, plus compact */
.we-organizer{
gap: 8px;
padding: 6px 10px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background: #fff;
align-items: center;
margin: 10px 0; /* petit souffle autour */
margin-bottom : 1px;
}
/* avatar + nom plus serrés */
.we-organizer img{
width: 48px; height: 48px; object-fit: cover; border-radius: 50%;
}
.we-organizer a{
font-size: 14px;
line-height: 1.2;
font-weight: 600;
text-decoration: none;
}
/* 4) Bouton rapproché du responsable */
.we-actions{
padding-top: 0;
margin-top: 0;
align-items: flex-start;
justify-content: center
}
/* Au besoin, si le bouton touche encore la bordure basse, laisse ceci : */
.weekend-card.we-card{ padding-bottom: 45px; }