/* =============================================================================
 * Cartes — squelette MUTUALISÉ (Composants Ipedis)
 * Structure et comportement des cartes « carte » (.ipdc-card) et « compacte »
 * (.ipdc-compact) + badges + bouton CTA + icône CTA. Partagé par le Slider ET le
 * Filtre (mêmes gabarits components/slider/templates/{card,compact}.php).
 *
 * Ce fichier ne contient QUE le rendu de la carte elle-même : ni la mise en page
 * du slider (viewport, contrôles, défilement), ni celle de la grille du filtre.
 * Les fonds spécifiques à un contexte (modèle de slider, grille de filtre) sont
 * surchargés dans slider.css / filter.css. Dépend de tokens.css (--ipdc-*).
 * ========================================================================== */

/* Icône CTA dans un carré. */
.ipdc-cta-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; flex: none;
	border-radius: 4px; background: var(--ipdc-navy); color: #FFFDED;
	transition: transform 0.3s ease;
}
/* CTA « bouton » : plat par défaut, se remplit en navy au survol/focus de la carte (comme la liste blog). */
.ipdc-card__cta, .ipdc-compact__cta {
	text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-top: 0;
	color: var(--ipdc-navy); font-weight: 800; font-size: 16px; letter-spacing: 0.03em;
	padding-right: 8px; text-decoration: none !important; border-radius: 4px; background: transparent;
	transition: all .3s ease; width: fit-content; border: 1px solid transparent; overflow: hidden;
}
.ipdc-card:hover .ipdc-card__cta {
	border: 1px solid var(--ipdc-navy); color: #F5F1D8; background: #04162F;
}

/* --- Carte « card » (image, badges, titre, extrait, CTA) -------------------- */
/* Contenu TOUJOURS aligné à gauche (conforme maquette), même si un conteneur parent
 * centre le texte (ex. bandeau de section) — jamais de titre/extrait centré. */
.ipdc-card, .ipdc-compact { text-align: left; }
.ipdc-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--ipdc-cream, #FFFDED);
	border: none; border-radius: var(--ipdc-radius-lg); overflow: hidden;
}
/* Cadre image : liseré crème 10px + coins arrondis ; overflow:hidden garde le zoom À L'INTÉRIEUR du cadre (jamais de débordement, même au survol). */
.ipdc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 10px solid var(--ipdc-cream, #FFFDED); border-radius: 20px; }
/* Zoom au survol : simple et net (sans vibration). */
.ipdc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; backface-visibility: hidden; border-radius: 10px; transition: transform 0.2s ease-out; }
.ipdc-card:hover .ipdc-card__img, .ipdc-card:has(:focus-visible) .ipdc-card__img, .ipdc-card:active .ipdc-card__img { transform: scale(1.05); }
/* Liste des étiquettes (date + thématiques) : <ul>/<li> sémantique → reset de liste (aucun marqueur/retrait). */
.ipdc-card__badges { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 82%; margin: 0; padding: 0; list-style: none; }
.ipdc-badge { padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; line-height: 1.3; background: var(--ipdc-white, #FFFDED); color: #04162F; }
/* Teintes d'étiquette (par catégorie) : palette FIXE en CLASSES — plus AUCUNE couleur en style inline.
 * Fond + texte contrasté (= text_on) portés par la classe. Teinte inconnue → étiquette neutre (règle .ipdc-badge). */
.ipdc-badge--yellow { background: #FFCC02; color: #04162F; }
.ipdc-badge--blue   { background: #B9E9FF; color: #04162F; }
.ipdc-badge--purple { background: #DFC8FF; color: #04162F; }
.ipdc-badge--beige  { background: #F5F1D8; color: #04162F; }
.ipdc-badge--navy   { background: #04162F; color: #FFFDED; }
/* Corps à hauteur égale : titre en haut, CTA collé en bas (comme la liste blog). */
.ipdc-card__body { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-between; gap: 12px; padding: 22px 24px 24px; }
/* Titre limité à 2 lignes + « … » (texte complet conservé dans le DOM pour les lecteurs d'écran). */
.ipdc-card__title {
	margin: 0; font-size: 25px; line-height: 1.3; color: #04162F; font-weight: 700;
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Le lien est porté par le bouton CTA ; son ::after s'étire sur TOUTE la carte (carte entièrement
 * cliquable, un seul lien). Le bouton reste en position statique → le ::after se cale sur .ipdc-card
 * (positionnée) et n'est PAS rogné par l'overflow:hidden du bouton (l'overflow ne rogne pas un
 * élément absolu dont le bloc conteneur est un ancêtre situé au-dessus). */
.ipdc-card__cta::after { content: ""; position: absolute; inset: 0; }
/* Focus clavier : anneau NAVY 3px en inset (jamais rogné, compatible avec le calage à gauche),
 * au-dessus des voisins (z-index). Contraste fort navy sur fond crème. */
.ipdc-card:has(:focus-visible) { outline: 3px solid var(--ipdc-navy); outline-offset: -3px; z-index: 2; box-shadow: 0 0 0 3px rgba(255, 255, 255, 1) !important; }
.ipdc-card:has(:focus-visible) .ipdc-card__media { z-index: -1 !important; }
.ipdc-card__cta:focus-visible { outline: none; }
/* Extrait limité à 3 lignes + « … » (harmonise la hauteur des cartes). */
.ipdc-card__excerpt {
	margin: 0 0 25px; color: rgba(4, 22, 47, 0.82); line-height: 1.55; font-weight: 500;
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ipdc-card:hover .ipdc-cta-ico { transform: rotate(45deg); }

/* Accent des cartes compactes (repères) : palette FIXE en CLASSES — aucune couleur injectée en style
 * inline. Le texte contrasté reproduit exactement text_on() : navy sur les 3 teintes claires, crème sur navy. */
.ipdc-accent--yellow { --ipdc-accent: #FFCC02; --ipdc-accent-fg: #04162F; }
.ipdc-accent--purple { --ipdc-accent: #DFC8FF; --ipdc-accent-fg: #04162F; }
.ipdc-accent--blue   { --ipdc-accent: #B9E9FF; --ipdc-accent-fg: #04162F; }
.ipdc-accent--navy   { --ipdc-accent: #04162F; --ipdc-accent-fg: #FFFDED; }
/* Icône CTA d'une carte compacte : reprend l'accent (au lieu du navy par défaut). */
.ipdc-compact .ipdc-cta-ico { background: var(--ipdc-accent, var(--ipdc-navy)); color: var(--ipdc-accent-fg, #FFFDED); }

/* --- Carte « compacte » (repères : titre, texte, liseré coloré) ------------- */
.ipdc-compact {
	position: relative; display: flex; flex-direction: column;
	background: var(--ipdc-cream, #FFFDED);
	/* Liseré coloré : épais en haut (16px), fin (4px) sur les autres côtés — comme la maquette. */
	border: 4px solid var(--ipdc-accent, var(--ipdc-navy)); border-top-width: 16px;
	border-radius: var(--ipdc-radius-lg);
	border-start-start-radius: 30px; border-start-end-radius: 30px;
}
.ipdc-compact__body { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-between; gap: 12px; padding: 24px 26px; }
.ipdc-compact__title {
	margin: 0; font-size: 1.5rem; color: #04162F; font-weight: 700;
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Lien porté par le bouton CTA (idem cartes) : ::after étiré sur toute la carte compacte. */
.ipdc-compact__cta::after { content: ""; position: absolute; inset: 0; }
/* Focus clavier : anneau NAVY en inset (-3px) → distinct du liseré coloré du repère, jamais rogné. */
.ipdc-compact:has(:focus-visible) { outline: 3px solid var(--ipdc-navy); outline-offset: -3px; z-index: 2; }
.ipdc-compact__cta:focus-visible { outline: none; }
.ipdc-compact__text {
	margin: 0; color: rgba(4, 22, 47, 0.82); line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Carrousels SANS lien (data-ipdc-interactive="0") : AUCUNE troncature du titre ni du texte.
 * Le contenu n'est atteignable QUE là (pas de lien vers une fiche pour lire la suite) → il doit
 * être visible en entier. La hauteur des items s'aligne alors sur l'item le plus long (le viewport
 * a align-items:stretch), et varie donc d'un carrousel à l'autre selon son contenu. Ne concerne que
 * les modèles sans élément actionnable ; les cartes AVEC lien gardent leur clamp + « … ». */
[data-ipdc-interactive="0"] .ipdc-compact__title,
[data-ipdc-interactive="0"] .ipdc-compact__text,
[data-ipdc-interactive="0"] .ipdc-card__title,
[data-ipdc-interactive="0"] .ipdc-card__excerpt {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}
.ipdc-compact:hover .ipdc-cta-ico { transform: rotate(45deg); }
/* Bouton « en savoir plus » : prend le fond de l'accent au survol/active (PAS au focus clavier :
 * le focus n'affiche QUE l'anneau de la carte, aucun état sur le bouton). */
.ipdc-compact:hover .ipdc-compact__cta,
.ipdc-compact:active .ipdc-compact__cta { background: var(--ipdc-accent); color: var(--ipdc-accent-fg, var(--ipdc-navy)); }

/* Mouvement réduit — neutralise les transitions/zoom des cartes. */
@media (prefers-reduced-motion: reduce) {
	.ipdc-card__img, .ipdc-card, .ipdc-cta-ico, .ipdc-compact { transition: none !important; }
	.ipdc-card:hover .ipdc-card__img, .ipdc-card:focus-within .ipdc-card__img, .ipdc-card:active .ipdc-card__img,
	.ipdc-card:hover .ipdc-cta-ico, .ipdc-card:focus-within .ipdc-cta-ico,
	.ipdc-compact:hover .ipdc-cta-ico, .ipdc-compact:focus-within .ipdc-cta-ico { transform: none; }
}