/* ============================================
   PRESS CARDS - Grille d'articles de presse
   ============================================ */

.press-cards {
    width: 100%;
    padding: 80px 0 240px 0;
}

.press-cards__container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right));
}

.press-cards__header {
    margin-bottom: 80px;
}

.press-cards__title {
    font-family: 'tt-commons-pro-thin', 'TT Commons Pro', sans-serif;
    font-size: 64px;
    font-weight: 100;
    line-height: 1.2;
    color: var(--color-noir);
    text-align: left;
    margin: 0 0 20px 0;
}

.press-cards__subtitle {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: 22px;
    font-weight: 200;
    color: var(--color-noir);
    text-align: left;
    margin: 0;
}

/* Grille principale - Masonry layout */
.press-cards__grid {
    position: relative;
    width: 100%;
}

/* Carte individuelle */
.press-card {
    padding: 50px 50px 100px 50px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    /* #54228 — plus d'ombre au repos : elle n'apparait qu'au survol (regle plus bas) */
}

/* #34227 — l'effet de soulevement au survol ne doit apparaitre que si la carte
   est reellement cliquable (contient un <a>) — sinon il suggere une interaction
   qui n'existe pas (card_link="#" tant que le client n'a pas fourni les vrais liens) */
.press-card:has(a.press-card__link):hover {
    transform: translateY(-5px);
}

.press-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Date */
.press-card__date {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: 19px;
    font-weight: 200;
    margin: 0 0 10px 0;
}

/* Titre principal */
.press-card__title {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: min(39px, max(32px, calc(5.3vw - 31px)));
    font-weight: 200;
    line-height: 1.2;
    margin: 0 0 10px 0;
}

/* Sous-titre */
.press-card__subtitle {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: 27px;
    font-weight: 200;
    line-height: 1.3;
    margin: 0 0 10px 0;
}

/* Description */
.press-card__description {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: 19px;
    font-weight: 200;
    line-height: 37px;
    margin: 0;
}

/* ============================================
   COULEURS DE FOND
   ============================================ */

.press-card.bg-red {
    background-color: var(--color-rouge);
    color: var(--color-blanc);
}

.press-card.bg-orange {
    background-color: var(--color-orange);
    color: var(--color-blanc);
}

.press-card.bg-blue {
    background-color: var(--color-bleu);
    color: var(--color-blanc);
}

.press-card.bg-green {
    background-color: var(--color-vert);
    color: var(--color-blanc);
}

.press-card.bg-black {
    background-color: var(--color-noir);
    color: var(--color-blanc);
}

.press-card.bg-white {
    background-color: var(--color-blanc);
    color: var(--color-noir);
    border: 1px solid var(--color-noir);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .press-cards {
        padding: 100px 0 160px 0;
    }

    .press-card {
        padding: 40px;
    }
}

/* Mobile */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .press-cards {
        padding: 60px 0 100px 0;
    }

    .press-card {
        padding: 30px;
    }

    .press-card__title {
        font-size: 32px;
    }

    .press-card__subtitle {
        font-size: 22px;
    }
}

/* ============================================
   VOIR PLUS (#54228)
   ============================================ */

/* La règle .press-card { display: flex } l'emporterait sur l'attribut hidden */
.press-card[hidden] {
    display: none !important;
}

/* Bouton existant du design system (.btn .btn-outline), centré sous la grille */
.press-cards__more {
    /* display: table = largeur du contenu, centre par les marges auto ; en mobile, la regle
       .btn { width: 100% } du design system s'applique toujours */
    display: table;
    margin: var(--space-2xl) auto 0;
}

/* Survol : celui du bouton « Contactez nous ! » du header (header.css). Le survol de .btn-outline
   (fond currentColor + texte noir) rendrait un texte noir sur fond noir. */
.press-cards__more:hover {
    background-color: var(--color-noir);
    color: var(--color-blanc);
}

.press-cards__more[hidden] {
    display: none;
}

/* #54228 — ombre au survol seulement (#640 : meme ombre qu'au survol de theme-block__theme-item),
   reservee aux appareils qui survolent vraiment : pas d'ombre collee apres un toucher sur mobile */
@media (hover: hover) {
    .press-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
}

/* #54228 — apparition des cartes revelees par « Voir plus » : fondu 0,3 -> 1 et descente de 10 px,
   comme si la carte se posait. La translation ne touche pas le flux : le masonry n'est pas deplace. */
@keyframes press-card-pose {
    from {
        opacity: 0.3;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.press-card--pose {
    animation: press-card-pose 350ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .press-card--pose {
        animation: none;
    }
}

/* ============================================
   PAYSAGE TACTILE - Tablette et téléphone en paysage
   Tailles et marges réduites
   ============================================ */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1376px) {
    .press-cards__title {
        font-size: 52px;
    }

    .press-card {
        padding: min(40px, 3.9063vw);
    }

    .press-card__title {
        font-size: min(32px, calc(4.1vw - 12px));
    }

    .press-card__subtitle {
        font-size: min(23px, 2.2461vw);
    }
}