/* Styles de programme.php — page pérenne d'un programme de l'EiMDC,
   voir /programme/{slug}?idioma=XX. CSS propre à la page : ne dépend plus de
   guide.css. Réutilise le gabarit "article plein écran"
   (.content/.content--show) de l'agenda ; ce fichier ne couvre que le contenu
   propre au programme. */

.program-article {
    max-width: 900px;
    margin: 0 auto;
    padding:60px 20px 80px;
}
.program-title {
    color: #990033;
    font-size: 2.4em;
    text-shadow: 1px 1px 2px #fff;
    margin:0;
}
.program-subtitle {
    font-style: italic;
    font-size: 1.2em !important;
    margin: 3px 0 10px !important;
}
.program-section {
    margin: 10px 0;
    background: #ffffffb8;
    padding: 20px 15px;
    border-radius: 10px;
    border: 2px solid #fff;
}
.program-section-title {
    color: #990033;
    border-bottom: 2px solid #cddff7;
    padding-bottom: 8px;
    margin: 0 0 16px;
    text-align: left;
}
.program-text p {
    line-height: 1.6;
    margin: 0 0 1em;
}
.program-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    margin: 30px 0;
    border-bottom: 4px dotted #cddff7;
    padding-bottom: 10px;
}
.program-block--img-right {flex-direction: row-reverse;}
.program-block-img {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    object-fit: contain;
}
.program-block-body {
    flex: 1 1 320px;
    min-width: 0;
}
.program-block-body h3 {
    color: #990033;
    margin: 0 0 10px;
    font-size: 1.3em;
}
.program-list {
    margin: 0 0 1em;
    padding-left: 1.3em;
}
.program-list li {
    margin-bottom: 0.6em;
    line-height:0.8;
}
.program-full-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 16px 0;
}

/* FAQ (accordéon natif <details>) */
.program-faq {
    margin: 12px 0 0;
}
.program-faq-item {
    border: 1px solid #cddff7;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px 16px;
    background: #f0f6ff;
}
.program-faq-item summary {
    cursor: pointer;
    font-weight: bold;
    color: #007abc;
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.program-faq-item summary::-webkit-details-marker {display: none;}
.program-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2em;
    color: #990033;
    transition: transform 0.2s;
}
.program-faq-item[open] summary::after {transform: rotate(45deg);}
.program-faq-answer {
    margin-top: 10px;
    line-height: 1.55;
    color: #303030;
}
.program-cta {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #990033, #cc0044);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: none;
    font-style: normal;
}
.program-cta:hover {
    color: #fff;
    opacity: 0.9;
}
.program-back {
    margin-top: 40px;
    text-align: center;
}

@media (max-width: 600px) {
    .program-block,
    .program-block--img-right {
        flex-direction: column;
    }

    .program-block-img {
        width: 100%;
        max-width: 220px;
        height: auto;
        margin: 0 auto;
    }
    .program-title {
        font-size: 1.8em;
        color: #990033;
    }
    .program-list li {
        margin-bottom: 0.6em;
        line-height: 1.2;
        font-size: 1.1em;
    }
    .program-block-body {
        flex: auto;
        min-width: 0;
    }
}

/* Prochaines sessions : liste à gauche, visuel à droite (1 colonne sur mobile) */
.program-sessions-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}
.program-sessions-grid .program-sessions-body {
    flex: 1 1 280px;
    min-width: 0;
}

.program-sessions-grid .program-list {
    flex: 1 1 280px;
    min-width: 0;
    margin: 0;
}
.program-sessions-img {
    flex: 0 1 520px;          /* base = largeur voulue : sinon flex-basis ecrase width */
    width: 520px;
    max-width: 100%;
    height: auto;
    object-fit: contain;      /* garde-fou : jamais ecrasee, meme si une hauteur est imposee */
    display: block;
    border-radius: 10px;
    align-self: center;
}

@media (max-width: 600px) {
    .program-sessions-grid {flex-direction: column;}
    .program-sessions-img {
        flex: 0 0 auto;       /* 'flex: auto' faisait grandir la HAUTEUR en colonne */
        width: 100%;
        max-width: 360px;
        height: auto;
        margin: 0 auto;
    }
}

/* Entree de page : glissement depuis le bas.
   Animation CSS pure, sans JS : l'etat FINAL est l'etat par defaut de
   .program-article, donc aucune regle ne masque le contenu au repos. Rien a
   executer pour que la page soit lisible — ni pour Googlebot, ni si
   l'animation echoue. */
.program-article {
    animation: program-slide-in 0.55s cubic-bezier(0.22, 0.85, 0.28, 1);
}

@keyframes program-slide-in {
    from {
        transform: translateY(48px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .program-article {
        animation: none;
    }
}

/* Antenne partenaire (ex. Quanta pour l'anglais) sous la liste des sessions */
.program-partner {
    margin: 14px 0 0;
}

.program-partner-name {
    display: block;
    margin-top: 6px;
    font-size: 0.88em;
    font-style: italic;
    color: #555;
}

/* Croix de fermeture (X dans un cercle) : retour à la fiche d'origine ou au hub */
a.program-close,
a.program-close:visited {
    position: fixed;       /* visible au défilement ; sur grand écran, alignée sur le bord droit de l'article (900px centré) */
    top: 14px;
    right: max(14px, calc((100% - 900px) / 2 + 14px));
    z-index: 100;
    display: block;
    width: 46px;
    height: 46px;
    color: #990033;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s, transform .25s;
}
.program-close svg {color: inherit; display: block; width: 100%; height: 100%; overflow: visible;}
.program-close circle {fill: rgba(255,255,255,.92); stroke: currentColor; stroke-width: 1.4; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));}
.program-close path {fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;}
a.program-close:hover,
a.program-close:focus-visible {color: #007abc; transform: rotate(90deg);}
.program-close:focus-visible {outline: 2px solid #007abc; outline-offset: 3px; border-radius: 50%;}

/* Fermeture : la page glisse vers le bas (bottom-slide-out) puis on navigue */
.content.is-closing {
    transform: translateY(100vh);
    opacity: .4;
    transition: transform .45s cubic-bezier(.55, 0, .75, .35), opacity .45s ease-in;
    pointer-events: none;
}
.content.is-closing ~ .program-close,
.program-close {will-change: transform;}