/*
 * Page d'une sélection (Phase 16 decies, Selections\Page) : encart de présentation, grille des produits, page
 * « plus d'actualité », bandeau de l'équipe. Les cartes gardent leurs classes de la charte (cbb-carte-produit…).
 * Chargée sur les pages /selection/… seulement (et dans l'aperçu des Réglages boutique). Mise en page de la page
 * (colonne, marges) : classes Oxygen du gabarit « selection » (gabarits/sources/selection.php).
 */
.cbb-selection-page { display: flex; flex-direction: column; gap: 28px; }

/* ---------------------------------------------------------------- bandeau de l'équipe */
.cbb-selection-equipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: var(--cbb-rayon, 10px); background: var(--cbb-ocre-pale, #f6ecd9); border: 1px solid var(--cbb-ocre-trait, #e3cfa8); color: var(--cbb-encre, #1d2a26); font-size: var(--cbb-fs-petit, 14px); line-height: 1.45; }
.cbb-selection-equipe--en_ligne { background: var(--cbb-sauge-pale, #e8efe9); border-color: var(--cbb-sauge-clair, #c7d6cb); }
.cbb-selection-equipe strong { font-weight: 700; }
.cbb-selection-equipe span { flex: 1 1 280px; }
.cbb-selection-equipe a { color: var(--cbb-vert, #2c5f4f); font-weight: 600; }

/* ---------------------------------------------------------------- titre seul (sans encart) */
.cbb-selection-tete { display: flex; flex-direction: column; gap: 8px; }
.cbb-selection-tete .cbb-selection-encart__titre { font-size: clamp(30px, 4vw, 44px); }

/* ---------------------------------------------------------------- encart */
.cbb-selection-encart { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--cbb-rayon-md, 16px); background: var(--cbb-creme, #f7f3ea); border: 1px solid var(--cbb-trait-doux, #ebe5d8); }
.cbb-selection-encart--image { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.cbb-selection-encart__visuel { position: relative; min-height: 260px; background: var(--cbb-scene, #efeae0); }
.cbb-selection-encart__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cbb-selection-encart__corps { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: clamp(24px, 4vw, 48px); }
.cbb-selection-encart__titre { margin: 0; font-family: var(--cbb-police-titre, Georgia, serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; color: var(--cbb-encre, #1d2a26); text-wrap: balance; }
.cbb-selection-encart__texte { font-size: var(--cbb-fs-lead, 17px); line-height: 1.6; color: var(--cbb-texte, #3a4743); max-width: 62ch; }
.cbb-selection-encart__texte p { margin: 0 0 .7em; }
.cbb-selection-encart__texte p:last-child { margin-bottom: 0; }
.cbb-selection-encart__date { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: var(--cbb-rayon-pilule, 999px); background: var(--cbb-blanc, #fff); color: var(--cbb-vert, #2c5f4f); font-weight: 600; font-size: var(--cbb-fs-petit, 14px); }
.cbb-selection-encart__date::first-letter { text-transform: uppercase; }
.cbb-selection-encart__bouton { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

/* ---------------------------------------------------------------- grille */
.cbb-selection-grille { display: flex; flex-direction: column; gap: 20px; }
.cbb-selection-grille__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cbb-selection-grille__compte { margin: 0; color: var(--cbb-texte-doux, #5d6a66); font-size: var(--cbb-fs-texte, 15px); }
.cbb-selection-grille__compte strong { color: var(--cbb-encre, #1d2a26); }
.cbb-selection-grille__tri { margin: 0; display: flex; align-items: center; gap: 8px; }
.cbb-selection-grille__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cbb-selection-case { display: flex; min-width: 0; }
.cbb-selection-case[hidden] { display: none; }
.cbb-selection-grille .cbb-suite { margin-top: 32px; }
.cbb-selection-case > .cbb-carte-produit { flex: 1 1 auto; min-width: 0; }
.cbb-selection-grille__vide { margin: 0; padding: 24px; border-radius: var(--cbb-rayon, 10px); background: var(--cbb-sauge-brume, #f1f5f2); color: var(--cbb-texte-doux, #5d6a66); text-align: center; }

/* ---------------------------------------------------------------- sélection terminée */
.cbb-selection-fin { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 24px auto 40px; max-width: 640px; padding: clamp(28px, 5vw, 56px) 24px; text-align: center; border-radius: var(--cbb-rayon-md, 16px); background: var(--cbb-creme, #f7f3ea); border: 1px solid var(--cbb-trait-doux, #ebe5d8); }
.cbb-selection-fin__icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cbb-sauge-pale, #e8efe9); color: var(--cbb-vert, #2c5f4f); }
.cbb-selection-fin__titre { margin: 0; font-family: var(--cbb-police-titre, Georgia, serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: var(--cbb-encre, #1d2a26); text-wrap: balance; }
.cbb-selection-fin__texte { margin: 0; font-size: var(--cbb-fs-lead, 17px); line-height: 1.6; color: var(--cbb-texte, #3a4743); }
.cbb-selection-fin__bouton { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

@media (max-width: 1100px) {
	.cbb-selection-grille__cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.cbb-selection-encart--image { grid-template-columns: minmax(0, 1fr); }
	.cbb-selection-encart__visuel { min-height: 0; aspect-ratio: 16 / 9; }
	.cbb-selection-encart__corps { gap: 12px; }
	.cbb-selection-encart__texte { font-size: var(--cbb-fs-texte, 15px); }
	.cbb-selection-encart__bouton { width: 100%; justify-content: center; }
	.cbb-selection-grille__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cbb-selection-grille__barre { align-items: stretch; }
	.cbb-selection-grille__tri, .cbb-selection-grille__tri .cbb-tri { width: 100%; }
	.cbb-selection-fin__bouton { width: 100%; justify-content: center; }
}