/**
 * Page d'accueil confcardio — mise en page
 *
 * Ne reprend QUE ce que SP Page Builder générait (grille de lignes/colonnes et
 * points de rupture). Toute l'identité visuelle — .hero-titre, .cc-btn,
 * .cc-hp-stat-*, .ca-eyebrow, .section-z-*, .osm-plan-* — vient déjà de
 * custom.scss via user.css et n'est pas redéfinie ici.
 *
 * @version 1.7.0
 */

/* ------------------------------------------------------------------
   1. Sections et conteneur
   ------------------------------------------------------------------ */

/* Pleine largeur : SP Page Builder l'obtenait par un style en ligne sur chaque
   section (max-width:100vw + marges négatives). On sort ainsi du conteneur de
   Cassiopeia pour que les bandes de couleur aillent d'un bord à l'autre. */
.cc-accueil .cc-section {
    position: relative;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.cc-accueil .cc-section__inner {
    width: 100%;
    /* Les sections sortent du conteneur en pleine largeur (margin-inline
       calc(50% - 50vw) ci-dessus) : c'est donc CE conteneur qui recentre le
       contenu. Plus de plafond fixe, mais la meme marge laterale que le reste
       du site, sinon le texte touche les bords. Voir --cc-marge-laterale
       dans header.css. */
    max-width: none;
    margin-inline: auto;
    /* Padding vertical a 0 : les espacements hauts et bas sont deja declares
       section par section juste en dessous (#section-hero, #section-pourquoi...),
       repris un a un de SPPB. Le 1rem qui figurait ici s'y ajoutait et decalait
       tout le contenu de 16px vers le bas — ecart mesure sur le titre du hero,
       y=187 en porte contre y=171 sur la page SPPB d'origine. */
    padding: 0 var(--cc-marge-laterale, 4.75%);
}

/* Fonds et espacements repris de media/com_sppagebuilder/css/page-1.css,
   où ils étaient scopés sous « .sp-page-builder .page-content ». */
.cc-accueil #section-hero        { padding: 0 0 25px; }
.cc-accueil #section-pourquoi    { background-color: var(--bleu-leger); padding: 20px 0; }
.cc-accueil #section-temoignages { background-color: rgb(30 64 110); padding: 25px 0; }
.cc-accueil #section-chiffres    { padding: 1px 0 39px; }
.cc-accueil #tarifs              { background-color: #fff; padding: 0; }
/* Le 1px de bas repris de SPPB laissait la carte du tarif collee a la bande
   bleue « A propos » : bas de .osm-plan a 2384, debut de #section-a-propos a
   2385. On passe a 40px, dans le rythme des autres sections (le bloc chiffres
   juste au-dessus finit sur 39px). */
.cc-accueil #a-propos            { background-color: #fff; padding: 0 0 40px; }
.cc-accueil #section-a-propos    { background-color: var(--bleu-med); padding: 35px 0; }
.cc-accueil #section-bottom      { padding: 20px 0 0; }

/* Anomalie du balisage : #tarifs n'est pas un <section> comme les autres id
   ci-dessus, c'est le .cc-section__inner de la section « a-propos ». Son
   padding: 0 (repris de SPPB) supprimait donc la gouttiere laterale du
   conteneur, l'id l'emportant sur la classe — l'eyebrow « L'abonnement »
   se retrouvait colle au bord. On rend la gouttiere, verticalement a 0. */
.cc-accueil #tarifs.cc-section__inner {
    padding: 0 var(--cc-marge-laterale, 4.75%);
}

/* ------------------------------------------------------------------
   Largeur du contenu au-dessus de 992px — portage du conteneur Bootstrap
   de Helix.
   Helix ne pose pas une marge en pourcentage mais un conteneur a PALIERS :
   max-width 960px des 992, 1140px des 1200, 1320px des 1400, avec 15px de
   padding, le tout centre. Notre 4.75% est continu, d'ou des ecarts qui
   changent de sens selon la largeur — mesures a l'appui, sur le titre
   « Que contient Confcardio ? » :
     a  992 (utile  977) : Helix 24>954 (930 large), nous 40>937 (898)
     a 1280 (utile 1265) : Helix 78>1188 (1110),     nous 53>1212 (1158)
     a 1440 (utile 1425) : Helix 68>1358 (1290)
   Les deux courbes se croisent : juste apres un palier Helix est plus large,
   puis le pourcentage le rattrape et le depasse avant le palier suivant.
   Seul le portage des paliers aligne les deux a TOUTES les largeurs.
   Borne a 992px sur demande de Roland (2026-08-17) : en dessous, le 4.75%
   est conserve tel quel — c'est le reglage cale pour le mobile, on n'y touche
   pas.
   Le second selecteur reprend #tarifs : son identifiant bat la classe seule,
   sans lui il garderait le pourcentage.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .cc-accueil .cc-section__inner,
    .cc-accueil #tarifs.cc-section__inner {
        max-width: 960px;
        padding-inline: 15px;
    }
}

@media (min-width: 1200px) {
    .cc-accueil .cc-section__inner,
    .cc-accueil #tarifs.cc-section__inner {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .cc-accueil .cc-section__inner,
    .cc-accueil #tarifs.cc-section__inner {
        max-width: 1320px;
    }
}

/* Bouton « Je m'abonne » des plans OSMembership. Le balisage est celui du
   composant — <a class="btn-signup"> dans un <li> d'un <ul class="osm-signup-
   container"> — et il est identique sur la page SPPB d'origine. Seul le CSS
   differait : la remise a zero des listes venait d'un selecteur scope sous le
   conteneur de SP Page Builder, absent ici, d'ou la puce devant le bouton
   (list-style calcule a « disc ») et son alignement a gauche. */
.cc-accueil .osm-signup-container {
    list-style: none;
    padding-left: 0;
    text-align: center;
}

.cc-accueil .osm-signup-container > li {
    list-style: none;
}

/* ------------------------------------------------------------------
   2. Hero : titre, vidéo, puis la rangée de chiffres
   ------------------------------------------------------------------ */

.cc-accueil .hero-video {
    max-width: 900px;
    margin: 2rem auto 0;
}

/* Remplace le calage par padding: 56.25% qu'utilisait le balisage d'origine. */
.cc-accueil .hero-video__cadre {
    position: relative;
    aspect-ratio: 16 / 9;
}

.cc-accueil .hero-video__cadre iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Rangee de chiffres — colonnes SPPB .stats1/.stats2/.stats3 a 33.333333%
   chacune, sans gouttiere : le separateur est un border-right pose sur les
   deux premieres colonnes (custom.scss ligne 1786), il doit donc tomber
   exactement sur le bord de colonne. L espacement du texte vient d un
   padding interne, comme les colonnes SPPB. */
/* max-width : sans plafond, la rangee prenait toute la largeur utile (1158px
   mesures a 1280 de fenetre), soit des colonnes de 386 — les trois blocs
   paraissaient bien plus espaces que sur la page d'origine. SPPB plafonne la
   sienne : .sppb-section porte max-width:998px et la .sppb-row deborde de 10px
   de chaque cote par des marges negatives, ce qui la rend a 1018px pour trois
   colonnes de 339. On reprend cette largeur rendue. */
.cc-accueil .hero-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1018px;
    margin-top: 2.5rem;
    /* La .sppb-row d'origine deborde de 10px a gauche (margin-left:-10px) : une
       fois le padding de 10px de sa premiere colonne applique, le texte retombe
       pile sur l'alignement du titre. Sans ce decalage, les colonnes 2 et 3
       derivent de 21px vers la droite. */
    margin-left: -10px;
}

/* Calage a gauche des trois blocs de chiffres, et gouttiere apres le trait.
   custom.scss pose « #section-hero .hero-outer », un selecteur a identifiant
   qui bat les regles en classes seules : margin, text-align ET padding doivent
   donc tous passer par ce prefixe. Les deux regles en classes seules qui
   figuraient ici etaient ignorees (padding calcule a 0px), d'ou le trait colle
   au texte de la colonne suivante.
   La page SPPB d'origine laisse 20px entre le trait et le texte suivant :
   ses colonnes .sppb-column portent la bordure sans padding, et leurs
   conteneurs .sppb-row-column ont 10px de chaque cote. */
.cc-accueil #section-hero .hero-chiffres > .hero-outer {
    position: relative;
    margin: 0;
    padding-inline: 10px;
    text-align: left;
}

.cc-accueil .hero-chiffres .hero-stats,
.cc-accueil .hero-chiffres .cc-hp-stat-item {
    text-align: left;
}

/* Separateurs verticaux — memes couleur, epaisseur et hauteur minimale que
   sous Helix, et meme point de rupture : rien en dessous de 576px, ou les
   chiffres s empilent. */
@media (min-width: 576px) {
    .cc-accueil .hero-chiffres > .hero-outer {
        min-height: 140px;
    }

    /* Separateur en ::after plutot qu'en border-right : SPPB le pose sur la
       colonne INTERNE, donc 10px avant la limite de colonne, et les 10px de
       padding de la colonne suivante completent l'ecart a 20px. Un border-right
       pose sur .hero-outer tomberait sur la limite meme et ne laisserait que
       10px avant le texte suivant. */
    .cc-accueil .hero-chiffres > .hero-outer:not(:last-child)::after {
        content: "";
        position: absolute;
        inset-block: 0;
        right: 10px;
        border-right: 1px solid rgb(251 248 242 / 38%);
    }
}

/* ------------------------------------------------------------------
   3. « Que contient Confcardio ? » — les trois encarts
   ------------------------------------------------------------------ */

.cc-accueil .cc-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* ------------------------------------------------------------------
   4. Témoignages — défilement horizontal, sans JavaScript
   ------------------------------------------------------------------ */

/* Carrousel de témoignages — reprise du rendu Helix.
   Valeurs relevées dans custom.scss : bloc .sppb-testimonial-carousel-testi_layout2
   (carte, nom, message, troncature) et classes .cc-tm-* (avatar, guillemet,
   bouton « Lire la suite »). Le balisage des cartes est reconstruit par
   js/temoignages.js à partir des <blockquote> de l'article 56.
   Comportement du carrousel repris de l'addon SPPB : 3 cartes visibles,
   15 px entre elles, flèches sans pastilles. */

.cc-accueil .cc-temoignages {
    margin-top: 1.5rem;
}

.cc-accueil .cc-temoignages--carrousel {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-accueil .cc-temoignages__cadre {
    flex: 1 1 auto;
    overflow: hidden;
    /* pan-y laisse au navigateur le defilement vertical de la page et nous
       reserve l'horizontal, que temoignages.js traite pour le glissement au
       doigt. Sans cette ligne, le geste lateral serait avale par le navigateur
       et le carrousel ne bougerait pas. */
    touch-action: pan-y;
}

.cc-accueil .cc-temoignages__piste {
    display: flex;
    align-items: stretch;
    gap: 15px;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    will-change: transform;
}

/* Carte — .sppb-carousel-extended-item de custom.scss. */
.cc-accueil .cc-temoignages .cc-tm-card {
    margin: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 16px 18px 18px;
    box-sizing: border-box;
    min-height: 245px;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.cc-accueil .cc-temoignages .cc-tm-card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* Avatar à initiale + nom, en haut de carte. */
.cc-accueil .cc-tm-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cc-accueil .cc-tm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rouge-vif, #c0392b);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.cc-accueil .cc-tm-name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
}

/* Guillemet — opacité .6 et aligné à gauche, comme dans testi_layout2. */
.cc-accueil .cc-tm-qmark {
    font-family: Georgia, serif;
    font-size: 28px;
    line-height: 1;
    color: var(--rouge-vif, #c0392b);
    opacity: .6;
    text-align: left;
    margin-bottom: 4px;
    user-select: none;
}

/* Message — serif 17px, tronqué à 4 lignes tant qu'il est replié. */
.cc-accueil .cc-tm-text {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink, #1a1a1a);
    text-align: left;
    flex: 1;
    margin: 0;
}

.cc-accueil .cc-tm-text.cc-tm-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-accueil .cc-tm-expand {
    align-self: flex-start;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--rouge-vif, #c0392b);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cc-accueil .cc-tm-expand:hover {
    opacity: .75;
}

/* Flèches rejetées aux bords de la section, hors des cartes. */
.cc-accueil .cc-temoignages__fleche {
    flex: 0 0 auto;
    width: 52px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--rouge-vif, #a6192e);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.cc-accueil .cc-temoignages__fleche:hover,
.cc-accueil .cc-temoignages__fleche:focus-visible {
    background: var(--rouge, #7d1322);
}

@media (max-width: 575.98px) {
    .cc-accueil .cc-temoignages .cc-tm-card {
        padding: 15px;
    }
}


/* ------------------------------------------------------------------
   5. À propos — photo et texte côte à côte
   ------------------------------------------------------------------ */

.cc-accueil .cc-hp-apropos {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem;
    /* La photo se cale en haut, sur la ligne du chapeau « A PROPOS ». En
       « center », la colonne texte etant la plus haute (689px contre 559),
       l'image etait repoussee de 65px vers le bas et ne s'alignait sur rien. */
    align-items: start;
}

.cc-accueil .cc-hp-apropos__media img {
    max-width: 100%;
}

/* Lien « Voir une démo », pose en bas de la photo. Ces declarations etaient
   ecrites en style= dans l'article, ou elles etaient illisibles et non
   reutilisables ; elles sont reprises ici telles quelles, a deux exceptions
   pres : cursor:pointer, qui est deja le defaut d'un <a href>, et
   left/right/bottom regroupes en inset. Le conteneur est en position:relative. */
.cc-accueil .cc-demo-lien {
    position: absolute;
    inset: auto 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgb(251 248 242 / 95%);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, transform .15s;
}

.cc-accueil .cc-demo-lien__texte {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sous SP Page Builder, l'accueil était une vue « page ». Devenue un article,
   elle capte les règles que custom.scss réserve à la page « À propos »
   (article 7) via .view-article : texte noir, largeurs et flottés. On les
   neutralise ici, la page d'accueil étant reconnaissable à .cc-hp-v2. */
.cc-hp-v2 #section-a-propos .container {
    color: #fff;
    width: auto;
    float: none;
    padding: 0;
}

.cc-hp-v2 #section-a-propos .img-a-propos {
    width: auto;
    float: none;
}

/* Le hero est sur un dégradé sombre : le texte y est clair. Les éléments qui
   ont leur propre couleur (.hero-badge en rouge, .hero-titre en blanc)
   conservent la leur. */
.cc-hp-v2 #section-hero {
    color: #fff;
}

/* ------------------------------------------------------------------
   6. Pied de page interne
   ------------------------------------------------------------------ */

.cc-accueil .cc-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cc-accueil .cc-pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* ------------------------------------------------------------------
   7. Points de rupture
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    /* Pleine largeur sans vw. calc(50% - 50vw) fait deborder les sections de la
       moitie de la barre de defilement de chaque cote : 50vw vaut 384 quand la
       largeur utile n'est que de 376,5 (barre de 15px), soit 8px de trop a
       droite et un defilement horizontal parasite. Sous 992px, la
       .container-component occupe deja toute la largeur utile — il suffit donc
       d'annuler ses 15px de padding, poses par header.css. */
    .cc-accueil .cc-section {
        max-width: none;
        margin-inline: -15px;
    }

    /* Gouttiere laterale. Sous 992px, header.css met --cc-marge-laterale a 0
       pour rendre la pleine largeur aux pages : sans la ligne ci-dessous, les
       sections n'ont plus AUCUNE marge et le texte touche les bords — constate
       sur l'eyebrow « L'abonnement », mesure a x=0 alors que la page d'origine
       le pose a x=30. #tarifs est repris explicitement : son padding:0 hérité
       de SPPB passe par un identifiant, qui bat la classe. */
    .cc-accueil .cc-section__inner,
    .cc-accueil #tarifs.cc-section__inner {
        padding-inline: 15px;
    }

    /* La classe reelle du bloc « A propos » est cc-hp-apropos. La regle visait
       « cc-apropos », qui n'existe nulle part : elle n'a jamais rien fait, et la
       grille restait a deux colonnes sur telephone — image de 135px contre texte
       de 203px, la ou la page d'origine empile les deux. */
    .cc-accueil .cc-hp-apropos {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Une fois empile, l'ordre du balisage mettrait la photo avant le texte.
       On inverse : le lecteur voit d'abord l'eyebrow, le titre et le propos,
       la photo venant en appui derriere. L'ordre du DOM reste inchange, donc
       les deux colonnes du bureau — photo a gauche, texte a droite — ne
       bougent pas. */
    .cc-accueil .cc-hp-apropos__texte {
        order: 1;
    }

    .cc-accueil .cc-hp-apropos__media {
        order: 2;
    }

}

/* Les trois chiffres du hero et les trois encarts « Que contient Confcardio ? »
   restent cote a cote des 768px : a cette largeur une colonne sur trois fait
   240px, assez pour le contenu.
   En dessous de 768px les deux blocs divergent volontairement :
   - les encarts passent directement a UNE colonne (choix de Roland, 2026-08-17) :
     leur contenu est trop dense pour une demi-largeur, l'etape a deux colonnes
     produisait une carte orpheline sur la seconde ligne ;
   - les chiffres du hero, eux, gardent l'etape a deux colonnes avant de
     s'empiler sous 576px. */
@media (max-width: 767.98px) {
    .cc-accueil .cc-features {
        grid-template-columns: 1fr;
    }

    .cc-accueil .hero-chiffres {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Le plafond et le debord de -10px de la rangee de chiffres ne valent que
       pour la disposition en trois colonnes. En dessous, la rangee passe a deux
       colonnes puis s'empile : on les annule, sinon les chiffres depassent de
       10px a gauche par rapport au reste du contenu. */
    .cc-accueil .hero-chiffres {
        max-width: none;
        margin-left: 0;
    }

    .cc-accueil #section-hero .hero-chiffres > .hero-outer {
        padding-inline: 0;
    }
}

/* Bloc tarif (module 155, mise en page « pricingtableflat ») — la vue de
   Membership Pro sort une colonne .col-md-4, soit 392px de large : la puce
   « Acces a l'ensemble du contenu de confcardio.com » retombait sur deux
   lignes, y compris en desktop. Largeur necessaire, mesuree : 330px pour le
   texte, plus la pastille .check (18px) et son gap (10px), plus 20px de
   padding sur la <li>, 40px sur .osm-plan et 18px sur la colonne — soit 437px
   de colonne. On centre la colonne et on lui donne la moitie de la rangee sans
   jamais descendre sous 440px : 440px a 768 de fenetre, 588px a 1280 — soit la
   largeur d'un col-md-6. Le selecteur vise l'attribut de classe plutot que
   .col-md-4 en dur : le nombre de colonnes est un parametre du module, la
   valeur de span change avec lui. */
@media (min-width: 768px) {
    .cc-accueil .osm-pricing-table-flat > [class*="col-md-"] {
        flex: 0 0 auto;
        width: max(50%, 440px);
        margin-inline: auto;
    }
}

@media (max-width: 575.98px) {
    /* .cc-features est deja en une colonne des 767.98px, inutile de le repeter. */
    .cc-accueil .hero-chiffres {
        grid-template-columns: 1fr;
    }

    /* Fleches du carrousel retirees sur telephone : elles mangeaient 124px des
       372 disponibles (2 x 52 plus les gouttieres), ne laissant que 248px a la
       carte. Le defilement automatique reste actif, les temoignages restent
       donc tous accessibles. Le CSS s'applique avant l'initialisation du script,
       qui calcule la largeur de carte sur cadre.clientWidth : la carte occupe
       donc d'emblee toute la largeur. */
    .cc-accueil .cc-temoignages__fleche {
        display: none;
    }

    .cc-accueil .cc-pied {
        justify-content: center;
        text-align: center;
    }
}

/* ------------------------------------------------------------------
   Hero : hero-inner et hero-video cote a cote en desktop, empiles en mobile.
   .cc-section__inner est un bloc, ses trois enfants directs (hero-inner,
   hero-video, hero-chiffres) se suivaient donc verticalement.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .cc-accueil #section-hero .cc-section__inner {
        display: grid;
        /* Proportions Helix : la rangee du hero etait en layout "7+5" dans la
           page SP Page Builder id=1, soit 58.333333% / 41.666667%. */
        grid-template-columns: 58.333333% 41.666667%;
        column-gap: 0;
        align-items: center;
    }

    /* La rangee de chiffres reprend toute la largeur, sous les deux colonnes. */
    .cc-accueil #section-hero .hero-chiffres {
        grid-column: 1 / -1;
    }

    /* Annule le centrage en colonne unique (max-width 900px + margin auto). */
    .cc-accueil #section-hero .hero-video {
        max-width: none;
        margin: 0;
    }
}

/* ------------------------------------------------------------------
   Animations d entree au defilement — remplacement de celles de SPPB.
   Section « A propos » : animation "zoomIn", 800ms, delai 385ms (reglages
   lus dans la page SPPB id=1). Le declenchement est fait par
   js/anim-scroll.js ; les keyframes reprennent la definition animate.css
   utilisee par SP Page Builder.
   ------------------------------------------------------------------ */
@keyframes ccZoomIn {
    from { opacity: 0; transform: scale3d(.3, .3, .3); }
    50%  { opacity: 1; }
}

.cc-anim {
    opacity: 0;
}

.cc-anim--vu {
    opacity: 1;
}

.cc-anim[data-cc-anim="zoomIn"].cc-anim--vu {
    animation-name: ccZoomIn;
    animation-duration: var(--cc-anim-duree, 800ms);
    animation-delay: var(--cc-anim-delai, 385ms);
    animation-fill-mode: both;
    animation-timing-function: ease;
}

/* Sans JS, sans IntersectionObserver ou si l utilisateur a demande de reduire
   les animations, la section reste simplement visible. */
@media (prefers-reduced-motion: reduce) {
    .cc-anim { opacity: 1; animation: none !important; }
}