/* =====================================================================
 * CDC — Cartes styles ([cdc_style_cards] / [cdc_style_card])
 * Fichier : assets/css/cdc-style-cards.css
 * Chargé uniquement sur les pages qui utilisent le shortcode.
 * Overlay à la couleur du style au survol (écrans avec souris uniquement).
 * --cdc-c1 = couleur principale du style, --cdc-on = noir/blanc lisible dessus (calculé en PHP).
 * ===================================================================== */

.cdc-style-cards,
.cdc-style-card {
    --cdc-rouge: #FF0D0D;
    --cdc-card-text: #111111;
    --cdc-card-muted: #333333;
    --cdc-card-radius: 28px;
    --cdc-card-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Grille ---------- */
.cdc-style-cards {
    display: grid;
    grid-template-columns: repeat(var(--cdc-cols, 3), minmax(0, 1fr));
    gap: 56px 32px;
}
@media (max-width: 1024px) {
    .cdc-style-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cdc-style-cards { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Carte ---------- */
.cdc-style-card { margin: 0; }

.cdc-style-card .cdc-style-card__link,
.cdc-style-card .cdc-style-card__link:hover,
.cdc-style-card .cdc-style-card__link:focus {
    display: block;
    color: var(--cdc-card-text);
    text-decoration: none;
}

/* ---------- Image ---------- */
.cdc-style-card .cdc-style-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--cdc-card-radius);
    overflow: hidden;
    isolation: isolate; /* garde l'arrondi pendant le zoom (Safari) */
    background: #1a1a1a;
}
.cdc-style-card .cdc-style-card__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .7s var(--cdc-card-ease);
}
.cdc-style-card .cdc-style-card__img--fallback {
    background: linear-gradient(135deg, var(--cdc-c1, #333), var(--cdc-c2, #666));
}

/* ---------- Overlay couleur du style + picto ---------- */
.cdc-style-card .cdc-style-card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 13, 13, .85); /* secours si color-mix non supporté */
    background: color-mix(in srgb, var(--cdc-c1, #FF0D0D) 85%, transparent);
    opacity: 0;
    transition: opacity .35s var(--cdc-card-ease);
    pointer-events: none;
}
.cdc-style-card .cdc-style-card__plus {
    position: relative;
    width: 76px;
    height: 76px;
    border: 2px solid var(--cdc-on, #fff);
    border-radius: 50%;
    transform: rotate(-90deg) scale(.6);
    transition: transform .5s var(--cdc-card-ease);
}
.cdc-style-card .cdc-style-card__plus::before,
.cdc-style-card .cdc-style-card__plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 2px;
    background: var(--cdc-on, #fff);
    transform: translate(-50%, -50%);
}
.cdc-style-card .cdc-style-card__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ---------- Textes ---------- */
.cdc-style-card .cdc-style-card__body {
    display: block;
    padding-top: 28px;
}
.cdc-style-card .cdc-style-card__horaire {
    display: block;
    margin: 0 0 .6em;
    color: var(--cdc-rouge);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
}
.cdc-style-cards .cdc-style-card .cdc-style-card__title,
.cdc-style-card .cdc-style-card__title {
    margin: 0 0 .35em;
    padding: 0;
    color: var(--cdc-card-text);
    line-height: 1.1;
}
.cdc-style-card .cdc-style-card__subtitle {
    display: block;
    margin: 0;
    color: var(--cdc-card-muted);
    line-height: 1.45;
}

/* ---------- Bouton ---------- */
.cdc-style-card .cdc-style-card__button {
    display: inline-flex;
    align-items: center;
    margin-top: 1.25em;
    padding: .7em 1.5em;
    border: 2px solid var(--cdc-rouge);
    border-radius: 999px;
    color: var(--cdc-rouge);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease;
}

/* ---------- Survol : seulement avec une souris ----------
 * Sur mobile/tactile : pas d'overlay, le tap ouvre directement le cours. */
@media (hover: hover) and (pointer: fine) {
    .cdc-style-card .cdc-style-card__link:hover .cdc-style-card__overlay { opacity: 1; }
    .cdc-style-card .cdc-style-card__link:hover .cdc-style-card__plus { transform: rotate(0) scale(1); }
    .cdc-style-card .cdc-style-card__link:hover .cdc-style-card__img { transform: scale(1.05); }
    /* Avec une souris, l'overlay suffit : pas de bouton */
    .cdc-style-card .cdc-style-card__button { display: none; }
}

/* ---------- Mobile/tactile : bouton visible, retour visuel au tap ---------- */
.cdc-style-card .cdc-style-card__link:active .cdc-style-card__button {
    background: var(--cdc-rouge);
    color: #fff;
}

/* ---------- Clavier : même effet que le survol ---------- */
.cdc-style-card .cdc-style-card__link:focus { outline: none; }
.cdc-style-card .cdc-style-card__link:focus-visible .cdc-style-card__media {
    outline: 3px solid var(--cdc-rouge);
    outline-offset: 4px;
}
.cdc-style-card .cdc-style-card__link:focus-visible .cdc-style-card__overlay { opacity: 1; }
.cdc-style-card .cdc-style-card__link:focus-visible .cdc-style-card__plus { transform: rotate(0) scale(1); }

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
    .cdc-style-card .cdc-style-card__img,
    .cdc-style-card .cdc-style-card__overlay,
    .cdc-style-card .cdc-style-card__plus,
    .cdc-style-card .cdc-style-card__button { transition: none; }
    .cdc-style-card .cdc-style-card__link:hover .cdc-style-card__img { transform: none; }
}