/* parutions.css - refonte 2026
   Aligne parutions.html sur le systeme de services.css : une colonne de contenu
   unique (max-width 1200px centree), une echelle typographique commune, des
   espacements sur une echelle discrete.

   Ce que cette feuille remplace : la page se dimensionnait sur les dimensions de
   la fenetre (vmin/vh/vw) avec trois zoom empiles, ce qui donnait cinq largeurs
   sans rapport entre elles sur un meme ecran (841 / 1280 / 301 / 263 / 1213 px
   mesures en 1280x650) et faisait retrecir les couvertures quand l'ecran
   grandissait. Plus aucune dimension ici ne depend de la hauteur de fenetre.

   Les formules de taille de titre - calc(1rem + 1.5vmin) - sont reprises telles
   quelles de services.css : les titres des deux pages doivent faire la meme
   taille. C'est une taille de police, pas une largeur : le vmin y reste sans
   consequence sur la mise en page. */

/* ============================================================
   Conteneur et sections
   ============================================================ */

.parutions-main {
    /* Annule l'heritage du corps de page : la regle body{font-size:10px} qui
       vivait dans parutions.html ecrasait tout le texte de la page et divisait
       par 1.6 le moindre espacement exprime en em. */
    font-size: 1rem;
}

.parutions-section {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.parutions-section > h2 {
    color: #b2b298;
    font-weight: 300;
    font-size: calc(1rem + 1.5vmin);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #b2b298;
    text-align: left;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* neutralise h2[b-9aeb3uions] : fond sable, width fit-content, marges 50px */
    background: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

/* Le titre est en flex pour poser l'hexagone : sans ce span, chaque noeud du
   titre deviendrait un flex item distinct et le gap s'insererait au milieu de
   la phrase (constate sur "Sud Radio | le 11 mars 2005"). */
.parutions-section > h2 > span {
    display: inline;
}

.parutions-section > h2 a {
    color: inherit;
    text-decoration: none;
}

.parutions-section > h2 a:hover,
.parutions-section > h2 a:focus-visible {
    text-decoration: underline;
}

.parutions-section > h2::before {
    content: '';
    display: inline-block;
    width: 34px;
    height: 30px;
    flex-shrink: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: #b2b298;
}

/* Chapeau de section : une phrase sous le titre */
.section-lead {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    text-indent: 0;
    margin: -0.75rem 0 1.75rem 0;
    text-align: left;
}

/* ============================================================
   Livres : cartes horizontales, deux par ligne
   ============================================================ */

.livres-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}

.livre-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(178,178,152,0.2);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    /* deux par ligne avec un gap de 1.25rem */
    flex: 0 0 calc(50% - 0.625rem);
    min-width: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.livre-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.livre-card-img {
    width: 34%;
    flex-shrink: 0;
    background: #EBEAF0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* L'ombre est un drop-shadow, pas un box-shadow : elle doit epouser l'image
   REELLEMENT peinte, pas sa boite. En contexte flex, la largeur de l'image est
   d'abord ramenee a celle de la colonne (162px), puis max-height la borne a
   240px sans re-reduire cette largeur : la boite vaut donc 162x240 (rapport
   0.675) alors que la couverture vaut 0.633. object-fit recentre bien l'image
   dans cette boite trop large, mais un box-shadow serait reste dessine sur la
   boite - il depassait de 5px de chaque cote et donnait l'illusion d'une
   couverture etiree en hauteur. Visible sur les deux seules couvertures qui
   touchent le plafond de 240px : Confinement (648x1024) et Moi, Manon
   (380x578). drop-shadow n'a pas de rayon d'etalement : le flou est augmente
   pour compenser. */
.livre-card-img img {
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28));
}

.livre-card-body {
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.livre-card-body h3 {
    color: #1e2d47;
    font-size: calc(0.8rem + 0.4vmin);
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    text-align: left;
}

.livre-resume {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.55;
    text-indent: 0;
    margin-bottom: 0.9rem;
    text-align: left;
    flex: 1;
}

.livre-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.livre-lien {
    color: #b2b298;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    border: 1px solid rgba(178,178,152,0.5);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.livre-lien:hover,
.livre-lien:focus-visible {
    background-color: #b2b298;
    color: #fff;
}

.livre-lien[aria-disabled="true"] {
    color: #aaa;
    border-color: #ddd;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   Videos : grille trois colonnes, cadre 16/9
   ============================================================ */

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.video-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(178,178,152,0.2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* aspect-ratio : le cadre suit la largeur de la colonne, sans hauteur fixe a
   recalibrer par palier. */
.video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: 0;
    background: #1e2d47;
}

.video-card h3 {
    color: #1e2d47;
    font-size: calc(0.78rem + 0.35vmin);
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    margin: 0;
    padding: 0.9rem 1rem 1rem 1rem;
}

.video-card h3 a {
    color: inherit;
    text-decoration: none;
}

.video-card h3 a:hover,
.video-card h3 a:focus-visible {
    color: #b2b298;
    text-decoration: underline;
}

/* ============================================================
   Radio : lecteurs empiles, forme chevron conservee
   ============================================================ */

.radio-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Reprend le clip-path hexagonal de .clip (app.css) : c'est la forme signature
   du site, presente aussi sur la navigation et le footer. */
.radio-item {
    background-color: #b2b298;
    clip-path: polygon(0.866rem 0, calc(100% - 0.866rem) 0, 100% 50%, calc(100% - 0.866rem) 100%, 0.866rem 100%, 0 50%);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 2.2rem;
    color: #fff;
}

.radio-item-titre {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.radio-item .btn {
    color: #fff;
    padding: 0.2rem 0.4rem;
    border: 0;
    background: none;
    flex-shrink: 0;
    line-height: 1;
}

.radio-item .btn:hover,
.radio-item .btn:focus-visible {
    color: #EBEAF0;
}

.radio-item input[type="range"] {
    flex: 1;
    min-width: 60px;
    cursor: pointer;
}

.radio-item-temps {
    color: #fff;
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 992px) {
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .livre-card {
        flex: 0 0 100%;
    }
}

@media (max-width: 768px) {
    .parutions-section {
        padding: 2rem 1rem;
    }

    .videos-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .livre-card {
        flex-direction: column;
    }

    .livre-card-img {
        width: 100%;
        padding: 1.25rem;
    }

    .livre-card-img img {
        max-height: 200px;
        width: auto;
    }

    .radio-item {
        padding: 0.75rem 1.4rem;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .radio-item-titre {
        font-size: 0.88rem;
    }
}

/* Sous 480px le chevron mange trop de largeur utile pour la barre de lecture :
   on passe a un bloc droit a coins arrondis. */
@media (max-width: 480px) {
    .radio-item {
        clip-path: none;
        border-radius: 6px;
        padding: 0.75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .livre-card,
    .video-card {
        transition: none;
    }

    .livre-card:hover,
    .video-card:hover {
        transform: none;
    }
}