/* Child & Future | Recommandations : cartes, étiquettes, sections d'accueil.
   Reprend les variables du thème Child and Future si elles existent, sinon des valeurs de repli identiques. */

.cfrec, .cfrec-page, .cfrec-liste-page {
	--r-action: var(--cf-action, #0A67A8);
	--r-action-fonce: var(--cf-action-fonce, #084F82);
	--r-navy: var(--cf-navy, #0F3557);
	--r-ciel: var(--cf-ciel, #F4F9FD);
	--r-bord: var(--cf-bordure, #D7E3EC);
	--r-gris: var(--cf-gris, #4F6070);
	--r-rayon: var(--cf-rayon, 16px);
	--r-ombre: var(--cf-ombre-douce, 0 1px 2px rgba(15,53,87,.06), 0 6px 18px rgba(15,53,87,.07));
	--r-ombre-haute: var(--cf-ombre, 0 2px 4px rgba(15,53,87,.06), 0 14px 32px rgba(15,53,87,.10));
}

/* Couleurs des étiquettes : texte foncé sur fond clair (contraste supérieur à 4,5:1). */
.cfrec-t--protection { --t-fond: #E3F3FD; --t-texte: #084F82; --t-bord: #B7DBF2; }
.cfrec-t--education { --t-fond: #FDF2DC; --t-texte: #7A4F00; --t-bord: #F0D79B; }
.cfrec-t--vbg { --t-fond: #FCE9E5; --t-texte: #8F2D1B; --t-bord: #F2C4BB; }
.cfrec-t--mhpss { --t-fond: #F0E6F6; --t-texte: #5B2A78; --t-bord: #D8C2E6; }
.cfrec-t--paix { --t-fond: #DDF3F0; --t-texte: #0E6B61; --t-bord: #A9DCD5; }
.cfrec-t--resilience { --t-fond: #E8F3DF; --t-texte: #3A6A22; --t-bord: #BFDCAA; }
.cfrec-t--institution { --t-fond: #E3F3FD; --t-texte: #0F3557; --t-bord: #B7DBF2; }

.cfrec { margin-block: 3rem 0; padding-top: 2rem; border-top: 1px solid var(--r-bord); }
.cfrec__titre { margin: 0 0 1.5rem; color: var(--r-navy); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.cfrec__titre--petit { font-size: 1.25rem; margin-bottom: 1rem; }

/* Étiquettes */
.cfrec-puce { display: inline-block; font-size: .8rem; font-weight: 600; line-height: 1.3; letter-spacing: .02em; padding: .2rem .7rem; border-radius: 999px; background: var(--t-fond, #E3F3FD); color: var(--t-texte, #0F3557); }
.cfrec-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.cfrec-puces > li { margin: 0; }
.cfrec-puce--lien { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; font-size: .95rem; border: 1px solid var(--t-bord, #B7DBF2); text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.cfrec-puce--lien:hover { border-color: var(--t-texte, #0F3557); text-decoration: underline; text-underline-offset: 3px; }
.cfrec-puce--lien:focus-visible { outline: 3px solid var(--r-action); outline-offset: 2px; }

/* Grille de cartes */
.cfrec__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfrec__grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cfrec__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfrec__grille--liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.cfrec__grille--une { grid-template-columns: 1fr; }
.cfrec__grille > li { margin: 0; display: flex; }

.cfrec-carte__interieur { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--r-bord); border-radius: var(--r-rayon); overflow: hidden; box-shadow: var(--r-ombre); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cfrec-carte__interieur:hover { transform: translateY(-2px); box-shadow: var(--r-ombre-haute); border-color: #B7DBF2; }
.cfrec-carte__interieur:focus-within { outline: 3px solid var(--r-action); outline-offset: 2px; }
.cfrec-carte__media { aspect-ratio: 16 / 10; background: var(--r-ciel); overflow: hidden; margin: 0; }
.cfrec-carte__media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.cfrec-carte__media--vide { display: flex; align-items: center; justify-content: center; color: var(--r-action); background: linear-gradient(135deg, #F4F9FD, #E3F3FD); }
.cfrec-carte__corps { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.35rem 1.4rem; flex: 1; }
.cfrec-carte__rubrique { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0; }
.cfrec-carte__date { font-size: .85rem; color: var(--r-gris); }
.cfrec-carte__titre { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.cfrec-carte__titre a { color: var(--r-navy); text-decoration: none; }
.cfrec-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cfrec-carte__titre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cfrec-carte__titre a:focus-visible { outline: none; text-decoration: underline; }
.cfrec-carte__extrait { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--r-gris); }
.cfrec-carte__plus { margin-top: auto; padding-top: .3rem; font-weight: 600; font-size: .92rem; color: var(--r-action); }
.cfrec-carte__plus::after { content: " \2192"; display: inline-block; transition: transform .2s ease; }
.cfrec-carte__interieur:hover .cfrec-carte__plus::after { transform: translateX(3px); }
.cfrec-carte--grande .cfrec-carte__interieur { flex-direction: row; }
.cfrec-carte--grande .cfrec-carte__media { aspect-ratio: auto; flex: 0 0 48%; min-height: 15rem; }
.cfrec-carte--grande .cfrec-carte__titre { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }

/* Page thématique */
.cfrec-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.cfrec-hero__int, .cfrec-liste-page { max-width: 1200px; margin-inline: auto; }
.cfrec-liste-page { padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 4rem; }
.cfrec-hero__titre { margin: 0 0 .75rem; }
.cfrec-hero__texte { max-width: 46rem; }
.cfrec-hero__texte p { margin: 0; }
.cfrec-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; }
.cfrec-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--r-bord); border-radius: 12px; color: var(--r-navy); text-decoration: none; background: #fff; }
.cfrec-pagination .page-numbers.current { background: var(--r-action); border-color: var(--r-action); color: #fff; }
.cfrec-pagination a.page-numbers:hover { border-color: var(--r-action); }
.cfrec-pagination a.page-numbers:focus-visible { outline: 3px solid var(--r-action); outline-offset: 2px; }
.cfrec-liste-page .cfrec { margin-top: 3.5rem; }

/* Sections de la page d'accueil */
.cfrec-accueil { border-top: 0; margin: 0; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.cfrec-accueil__int { max-width: 1200px; margin-inline: auto; }
.cfrec-accueil__sur { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--r-action); }
.cfrec-accueil__suite { margin: 2rem 0 0; }
.cfrec-bouton { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.4rem; border-radius: 12px; border: 2px solid var(--r-action); color: var(--r-action); font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.cfrec-bouton:hover { background: var(--r-action); color: #fff; }
.cfrec-bouton:focus-visible { outline: 3px solid var(--r-action); outline-offset: 2px; }

/* Tablette */
@media (max-width: 1024px) {
	.cfrec__grille, .cfrec__grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cfrec__grille--une { grid-template-columns: 1fr; }
}

/* Téléphone : carrousel tactile (défilement horizontal avec accroche), accessible au clavier */
@media (max-width: 640px) {
	.cfrec__grille:not(.cfrec__grille--liste):not(.cfrec__grille--pile):not(.cfrec__grille--une) { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .25rem .25rem 1rem; margin-inline: -.25rem; scroll-padding-inline: .25rem; }
	.cfrec__grille:not(.cfrec__grille--liste):not(.cfrec__grille--pile):not(.cfrec__grille--une) > li { flex: 0 0 84%; scroll-snap-align: start; }
	.cfrec__grille--pile, .cfrec__grille--liste, .cfrec__grille--une { grid-template-columns: 1fr; }
	.cfrec-carte--grande .cfrec-carte__interieur { flex-direction: column; }
	.cfrec-carte--grande .cfrec-carte__media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
	.cfrec-carte__interieur, .cfrec-puce--lien, .cfrec-bouton, .cfrec-carte__plus::after { transition: none; }
	.cfrec-carte__interieur:hover { transform: none; }
	.cfrec-carte__interieur:hover .cfrec-carte__plus::after { transform: none; }
}