/* Child and Future : blocs « Domaines d'intervention » (1.2.0). Fonds pleins, grands pictogrammes, bloc entièrement cliquable.
 * Ne modifie ni le contenu ni les liens : surcharge uniquement l'apparence des cartes .cf-domaine du thème.
 * Contrastes (texte sur fond) : protection 5,97 ; éducation 8,4 ; VBG 4,86 ; santé mentale 7,86 ; paix 5,25 ; résilience 5,04. */
.cf-domaine { --d-fond: #0F3557; --d-texte: #fff; --d-vif: var(--s, #02A0EC); }
.cf-domaine.cf-s-protection { --d-fond: #0A67A8; --d-vif: #02A0EC; }
.cf-domaine.cf-s-education { --d-fond: #F2B544; --d-texte: #0B2545; --d-vif: #fff; }
.cf-domaine.cf-s-vbg { --d-fond: #C24A33; --d-vif: #F2B544; }
.cf-domaine.cf-s-mhpss { --d-fond: #6F3A8E; --d-vif: #C99BE6; }
.cf-domaine.cf-s-paix { --d-fond: #17796F; --d-vif: #5FD0C2; }
.cf-domaine.cf-s-resilience { --d-fond: #3C7D2E; --d-vif: #A6D88B; }

.cf-domaine__lien { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-start; gap: .7rem; width: 100%; padding: clamp(1.1rem, 2.2vw, 1.75rem); background: var(--d-fond); color: var(--d-texte); border: 0; border-radius: 18px; box-shadow: 0 6px 18px rgba(11, 37, 69, .16); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .28s ease, box-shadow .28s ease; }
/* Grand motif décoratif aux couleurs du domaine */
.cf-domaine__lien::before { content: ""; position: absolute; z-index: -1; right: -18%; top: -22%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--d-vif); opacity: .28; transition: transform .45s ease; }
.cf-domaine__lien::after { content: ""; position: absolute; z-index: -1; left: -14%; bottom: -26%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .08; }
.cf-domaine__lien:hover, .cf-domaine__lien:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(11, 37, 69, .26); }
.cf-domaine__lien:hover::before, .cf-domaine__lien:focus-visible::before { transform: scale(1.12); }
.cf-domaine__lien:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(11, 37, 69, .2); }
.cf-domaine__lien:focus-visible { outline: 3px solid #0B2545; outline-offset: 3px; box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(11, 37, 69, .26); }

.cf-domaine .cf-picto { width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px); border-radius: 24px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .35s ease; }
.cf-domaine.cf-s-education .cf-picto { background: rgba(11, 37, 69, .1); box-shadow: inset 0 0 0 1px rgba(11, 37, 69, .18); }
.cf-domaine .cf-picto img { width: 62%; height: 62%; filter: brightness(0) invert(1); transition: transform .35s ease; }
.cf-domaine.cf-s-education .cf-picto img { filter: brightness(0); opacity: .82; }
.cf-domaine__lien:hover .cf-picto, .cf-domaine__lien:focus-visible .cf-picto { transform: rotate(-4deg) scale(1.05); }
.cf-domaine__lien:hover .cf-picto img, .cf-domaine__lien:focus-visible .cf-picto img { transform: scale(1.08); }

.cf-domaine .cf-domaine__titre { margin: .35rem 0 0; color: inherit; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.2; overflow-wrap: break-word; hyphens: manual; }
.cf-domaine .cf-domaine__texte { margin: 0; color: inherit; opacity: .94; font-size: clamp(.88rem, 1.1vw, 1rem); line-height: 1.5; flex: 1; }
.cf-domaine .cf-domaine__plus { align-self: flex-start; margin-top: .3rem; color: inherit; font-weight: 700; padding: .45rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); min-height: 44px; box-sizing: border-box; align-items: center; transition: background-color .25s ease; }
.cf-domaine.cf-s-education .cf-domaine__plus { background: rgba(11, 37, 69, .1); box-shadow: inset 0 0 0 1px rgba(11, 37, 69, .3); }
.cf-domaine__lien:hover .cf-domaine__plus, .cf-domaine__lien:focus-visible .cf-domaine__plus { background: rgba(255, 255, 255, .32); }
.cf-domaine.cf-s-education .cf-domaine__lien:hover .cf-domaine__plus { background: rgba(11, 37, 69, .18); }
/* Photo éventuelle : bandeau arrondi en haut du bloc */
.cf-domaine__photo { margin: calc(-1 * clamp(1.1rem, 2.2vw, 1.75rem)) calc(-1 * clamp(1.1rem, 2.2vw, 1.75rem)) .4rem; }
.cf-domaine__photo img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* Grille : 3 colonnes (ordinateur), 2 colonnes (tablette et smartphone) */
.cf-grid:has(> .cf-domaine) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 960px) { .cf-grid:has(> .cf-domaine) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }
@media (max-width: 640px) {
	.cf-grid:has(> .cf-domaine) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.cf-domaine__lien { padding: .95rem .85rem; gap: .5rem; border-radius: 16px; }
	.cf-domaine .cf-picto { width: 56px; height: 56px; border-radius: 18px; }
	.cf-domaine .cf-domaine__titre { font-size: 1rem; }
	.cf-domaine .cf-domaine__texte { font-size: .82rem; line-height: 1.42; }
	.cf-domaine .cf-domaine__plus { font-size: .82rem; padding: .4rem .7rem; }
}
@media (max-width: 359px) { .cf-domaine .cf-domaine__texte { font-size: .78rem; } .cf-domaine .cf-picto { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
	.cf-domaine__lien, .cf-domaine__lien::before, .cf-domaine .cf-picto, .cf-domaine .cf-picto img, .cf-domaine .cf-domaine__plus { transition: none; }
	.cf-domaine__lien:hover, .cf-domaine__lien:focus-visible, .cf-domaine__lien:active { transform: none; }
	.cf-domaine__lien:hover .cf-picto, .cf-domaine__lien:focus-visible .cf-picto, .cf-domaine__lien:hover .cf-picto img, .cf-domaine__lien:focus-visible .cf-picto img, .cf-domaine__lien:hover::before { transform: none; }
}
@media (forced-colors: active) { .cf-domaine__lien { border: 2px solid CanvasText; } }