/* =========================================================
   CRC Icons — pictogrammes SVG duotone animés
   ========================================================= */

.crc-icon {
	--crc-icon-stroke: 1.75;
	--crc-icon-fill-opacity: .16;
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: -0.15em;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--crc-icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	transform-origin: 50% 50%;
	transform-box: fill-box;
}
.crc-icon .crc-i-fill { fill: var(--crc-icon-accent, currentColor); stroke: none; opacity: var(--crc-icon-fill-opacity); transition: opacity .35s ease; }
.crc-icon .crc-i-line { transform-origin: 12px 12px; }
.crc-icon--line .crc-i-fill { display: none; }

/* Grandes tailles : trait légèrement affiné pour rester élégant. */
.crc-icon-xl .crc-icon, .crc-icon.crc-icon-xl { --crc-icon-stroke: 1.5; }

/* -------- Animation « dessin » à l'apparition (activée par JS) -------- */
.crc-js .crc-icon.crc-will-draw .crc-i-line > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.crc-js .crc-icon.crc-will-draw .crc-i-fill { opacity: 0; }
.crc-js .crc-icon.crc-drawn .crc-i-line > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1); }
.crc-js .crc-icon.crc-drawn .crc-i-line > *:nth-child(2) { transition-delay: .12s; }
.crc-js .crc-icon.crc-drawn .crc-i-line > *:nth-child(3) { transition-delay: .24s; }
.crc-js .crc-icon.crc-drawn .crc-i-line > *:nth-child(n+4) { transition-delay: .36s; }
.crc-js .crc-icon.crc-drawn .crc-i-fill { opacity: var(--crc-icon-fill-opacity); transition: opacity .6s ease .7s; }

/* -------- Micro-animations au survol --------
   Déclenchées au survol de l'icône OU de son conteneur interactif. */
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-icon,
.crc-icon:hover { --crc-icon-fill-opacity: .3; }

:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-beat .crc-i-line,
.crc-anim-beat:hover .crc-i-line { animation: crcBeat 1.1s ease-in-out infinite; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-ring .crc-i-line,
.crc-anim-ring:hover .crc-i-line { animation: crcRing .9s ease-in-out; transform-origin: 12px 3px; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-float .crc-i-line,
.crc-anim-float:hover .crc-i-line { animation: crcFloat 1.6s ease-in-out infinite; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-spin .crc-i-line,
.crc-anim-spin:hover .crc-i-line { animation: crcSpin 1.4s cubic-bezier(.5,0,.3,1); }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-drip .crc-i-line,
.crc-anim-drip:hover .crc-i-line { animation: crcDrip 1.2s ease-in-out infinite; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-wave .crc-i-line,
.crc-anim-wave:hover .crc-i-line { animation: crcWave 1.4s ease-in-out infinite; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-sway .crc-i-line,
.crc-anim-sway:hover .crc-i-line { animation: crcSway 1.6s ease-in-out infinite; transform-origin: 12px 20px; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-pop .crc-i-line,
.crc-anim-pop:hover .crc-i-line { animation: crcPop .6s cubic-bezier(.34,1.56,.64,1); }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-nudge .crc-i-line,
.crc-anim-nudge:hover .crc-i-line { animation: crcNudge .9s ease-in-out infinite; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-nudge-left .crc-i-line,
.crc-anim-nudge-left:hover .crc-i-line { animation: crcNudgeLeft .9s ease-in-out infinite; }
:is(a, button, .card, .value-card, .icon-block, .stat-card, .program-item, .contact-info-card, .branch-card, .crc-mega-link, .crc-icons-item, .crc-icon-hover):hover .crc-anim-flicker .crc-i-line,
.crc-anim-flicker:hover .crc-i-line { animation: crcFlicker 1s ease-in-out infinite; transform-origin: 12px 21px; }

.crc-anim-loading .crc-i-line, .crc-icon--spinner .crc-i-line { animation: crcSpinLoop .8s linear infinite; }

/* Mode « vivant » : animation en boucle permanente (classe à ajouter sur un conteneur). */
.crc-icons-live .crc-anim-beat .crc-i-line { animation: crcBeat 1.6s ease-in-out infinite; }
.crc-icons-live .crc-anim-float .crc-i-line,
.crc-icons-live .crc-anim-drip .crc-i-line { animation: crcFloat 3s ease-in-out infinite; }
.crc-icons-live .crc-anim-sway .crc-i-line,
.crc-icons-live .crc-anim-wave .crc-i-line { animation: crcSway 3.2s ease-in-out infinite; transform-origin: 12px 20px; }

@keyframes crcBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } }
@keyframes crcRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes crcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes crcSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes crcSpinLoop { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes crcDrip { 0%, 100% { transform: translateY(0) scaleY(1); } 40% { transform: translateY(1.5px) scaleY(.94); } 60% { transform: translateY(-1px) scaleY(1.04); } }
@keyframes crcWave { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(1px) rotate(2deg); } 75% { transform: translateX(-1px) rotate(-2deg); } }
@keyframes crcSway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 70% { transform: rotate(6deg); } }
@keyframes crcPop { 0% { transform: scale(1); } 40% { transform: scale(.86); } 100% { transform: scale(1); } }
@keyframes crcNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes crcNudgeLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes crcFlicker { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(.96, 1.06); } 50% { transform: scale(1.03, .96); } 75% { transform: scale(.98, 1.04); } }

/* Shortcode en ligne */
.crc-icon-inline { display: inline-flex; align-items: center; justify-content: center; color: var(--red-primary, #C41E3A); line-height: 1; vertical-align: middle; }
.crc-icon-inline .crc-icon { width: auto; height: auto; }

@media (prefers-reduced-motion: reduce) {
	.crc-icon .crc-i-line, .crc-icon .crc-i-line > * { animation: none !important; transition: none !important; stroke-dashoffset: 0 !important; }
	.crc-js .crc-icon.crc-will-draw .crc-i-fill { opacity: var(--crc-icon-fill-opacity); }
	.crc-anim-loading .crc-i-line, .crc-icon--spinner .crc-i-line { animation: crcSpinLoop 1.6s linear infinite !important; }
}