/**
 * Bloc contact_cartes — section sombre de contact, cartes-tickets cliquables
 *
 * Contenu : 1. En-tête  2. Liste  3. Ticket  4. Phrase de fin  5. Courbe de fond  6. Responsive
 *
 * Nombre de cartes libre (grille auto-fit). Toute la carte est le lien : cible tactile pleine taille.
 * Survol caramel réservé aux pointeurs qui survolent (sinon il reste « collé » après un toucher).
 * Les encoches latérales du ticket sont découpées par un mask : aucune image.
 */

/* 1. En-tête --------------------------------------------------------------- */
.contact-cartes { position: relative; isolation: isolate; overflow: hidden; }
.contact-cartes__head { display: grid; gap: var(--space-sm); max-width: 44rem; margin-bottom: var(--space-xl); }

/* 2. Liste ----------------------------------------------------------------- */
.contact-cartes__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* 3. Ticket ---------------------------------------------------------------- */
.contact-cartes__card {
    --notch: 14px;
    position: relative; height: 100%;
    display: grid; gap: var(--space-2xs); align-content: start;
    padding: var(--space-lg) calc(var(--space-lg) + var(--notch));
    background: var(--color-bg); color: var(--color-text); text-decoration: none;
    border-radius: var(--radius-lg);
    -webkit-mask: radial-gradient(circle var(--notch) at left 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--notch) at right 50%, #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--notch) at left 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--notch) at right 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base);
}
.contact-cartes__num {
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-primary);
}
.contact-cartes__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin-top: var(--space-sm); }
.contact-cartes__sub {
    font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3);
    font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--color-text-muted);
}
/* Talon du ticket, séparé par un pointillé */
.contact-cartes__detail {
    margin-top: var(--space-lg); padding-top: var(--space-md);
    font-family: var(--font-mono); font-size: var(--fs-sm);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text) 45%, transparent) var(--rule-dot), transparent calc(var(--rule-dot) + 0.5px));
    background-size: var(--rule-gap) calc(var(--rule-dot) * 2); background-repeat: repeat-x; background-position: left top;
}
/* Le mask découpe aussi l'outline de focus : il est reporté sur le li */
.contact-cartes__card:focus-visible { outline: none; }
.contact-cartes__list li:has(.contact-cartes__card:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-lg); }
@media (hover: hover) {
    .contact-cartes__card:hover { transform: translateY(-6px) rotate(-0.6deg); background: var(--color-accent); }
    /* Gris et rouge ne passent pas l'AA sur caramel : tout le ticket passe à l'encre */
    .contact-cartes__card:hover :is(.contact-cartes__num, .contact-cartes__sub) { color: var(--color-text); }
}

/* 4. Phrase de fin --------------------------------------------------------- */
.contact-cartes__end {
    margin-top: var(--space-xl); font-family: var(--font-display); font-style: italic;
    font-size: var(--fs-h3); color: var(--color-text-muted-inverse);
}

/* 5. Courbe de fond ------------------------------------------------------- */
/* Rappel de la signature du hero, en caramel discret ; tracée au défilement (contact-cartes.js) */
.contact-cartes__curve {
    position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 45%;
    pointer-events: none;
}
.contact-cartes__curve path {
    fill: none; stroke: color-mix(in srgb, var(--color-accent) 25%, transparent);
    stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* 6. Responsive ------------------------------------------------------------ */
/* Tablette : 2 tickets côte à côte dès ~640 px. Avec le minimum de 340 px, ils passaient sur une
   colonne dès 1023 px et s'étiraient sur ~700 px de large à 768 px (tickets en bandeau). */
@media (max-width: 1023px) {
    .contact-cartes__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-md); }
}
@media (max-width: 480px) {
    .contact-cartes__card { --notch: 10px; padding: var(--space-md) calc(var(--space-md) + var(--notch)); }
}