/* ============================================
   PAGES SECONDAIRES — préfixe .pg-
   ============================================
   Ces pages (speakers, program, contact, blog, article, gallery,
   privacy, terms, 404) étaient écrites en style="" inline : aucune
   media query ne pouvait les cibler, donc aucune adaptation mobile
   n'était possible. Les styles sont regroupés ici pour être
   réellement responsive.

   Conventions : desktop d'abord, puis 1024 / 768 / 480 comme dans
   style.css. Les propriétés logiques (border-inline-start,
   padding-inline) sont préférées à left/right pour que l'arabe (RTL)
   se retourne tout seul.
   ============================================ */

/* ---------- Enveloppe de page ---------- */

/* Le haut de page doit dégager la navbar ET la barre de compte à rebours,
   toutes deux fixes. Un padding en dur (10rem) passait sous la barre dès
   que --countdown-height grimpait à 80px en mobile : on le calcule. */
.pg-page {
    padding-top: calc(var(--navbar-height) + var(--countdown-height) + 3rem);
    padding-bottom: 5rem;
    background: linear-gradient(135deg, #f9f7f1 0%, #fff 100%);
}

/* Variante sans dégradé (pages légales) */
.pg-page--plain {
    background: none;
}

.pg-narrow {
    max-width: 900px;
}

/* ---------- En-tête de page ---------- */
.pg-head {
    max-width: 800px;
    margin: 0 auto 4rem;
    text-align: center;
}

.pg-head h1 {
    margin: 1rem 0;
    font-size: clamp(1.85rem, 5vw, 3.5rem);
    font-weight: 800;
}

.pg-head h1.pg-head__title--green {
    color: var(--color-primary);
}

.pg-head p {
    color: var(--color-gray);
    font-size: clamp(1rem, 2.2vw, 1.1rem);
}

/* Le .section-tag est un inline-flex avec une barre de 40px : centré ici,
   et autorisé à passer à la ligne si le libellé est long (arabe). */
.pg-head .section-tag {
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- Grille de cartes ---------- */

/* `minmax(min(280px, 100%), 1fr)` au lieu de `minmax(280px, 1fr)` :
   sous 280px de largeur utile, une piste de 280px déborde le conteneur et
   provoque un défilement horizontal. Le `min()` la laisse rétrécir. */
.pg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pg-card {
    padding: 2.5rem 2rem;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.pg-card--center {
    text-align: center;
}

.pg-card h2 {
    margin-top: 0;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.pg-card p {
    color: var(--color-gray);
    line-height: 1.8;
}

.pg-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 1rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.8rem;
}

.pg-card__icon--green {
    background: linear-gradient(135deg, #6B8E1E, #8FB733);
}

.pg-card__icon--brown {
    background: linear-gradient(135deg, #8B3A1F, #B8552D);
}

.pg-card__icon--gold {
    background: linear-gradient(135deg, #D4A574, #E8C293);
}

/* Adresses e-mail et numéros : ne doivent jamais élargir la carte. */
.pg-card a[href^="mailto:"],
.pg-card a[href^="tel:"] {
    overflow-wrap: anywhere;
}

/* ---------- Bandeau d'appel à l'action de bas de page ---------- */
.pg-cta {
    margin-top: 4rem;
    text-align: center;
}

.pg-cta .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* ---------- Programme (pages/program.php) ---------- */
.pg-timeline {
    max-width: 900px;
    margin: 0 auto;
}

.pg-timeline__heading {
    margin-bottom: 2rem;
    color: var(--color-primary);
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
}

.pg-timeline__heading--pm {
    margin-top: 3rem;
    color: var(--color-secondary);
}

.pg-slot {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1.5rem;
    background: var(--color-white);
    border-radius: 12px;
    /* inline-start (et non left) : en arabe le liseré passe à droite. */
    border-inline-start: 4px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pg-slot--pm {
    border-inline-start-color: var(--color-secondary);
}

.pg-slot__time {
    min-width: 80px;
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 700;
    /* L'heure reste en chiffres latins lisibles même en RTL. */
    font-variant-numeric: tabular-nums;
}

.pg-slot--pm .pg-slot__time {
    color: var(--color-secondary);
}

.pg-slot h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.pg-slot p {
    margin: 0;
    color: var(--color-gray);
    font-size: 0.9rem;
}

/* ---------- Liste du blog (pages/blog.php) ---------- */
.pg-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

.pg-post {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.pg-post__thumb {
    display: block;
}

/* aspect-ratio plutôt qu'une hauteur fixe de 200px : la vignette garde le
   cadrage carré des visuels du blog quelle que soit la largeur de la colonne. */
.pg-post__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--color-cream);
}

.pg-post__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.pg-post__body h2 {
    margin: 0.75rem 0;
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    line-height: 1.35;
}

.pg-post__body h2 a {
    color: var(--color-secondary);
}

.pg-post__excerpt {
    flex: 1;
    color: var(--color-gray);
    font-size: 0.95rem;
}

.pg-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    color: var(--color-gray);
    font-size: 0.85rem;
}

.pg-post__more {
    color: var(--color-primary);
    font-weight: 600;
}

/* ---------- Intervenants (pages/speakers.php) ---------- */
.pg-speakers__heading {
    margin: 3rem 0 0.5rem;
    text-align: center;
}

.pg-speakers__lead {
    max-width: 640px;
    margin: 0 auto 2rem;
    color: var(--color-gray);
    text-align: center;
}

/* minmax(min(240px, 100%)) et non minmax(240px, …) : sous 240px de largeur
   utile la piste déborderait et ramènerait un défilement horizontal. */
.pg-speakers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
}

.pg-speaker {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pg-speaker:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.pg-speaker__media {
    display: block;
}

/* Les visuels d'annonce sont carrés, comme les vignettes du blog. */
.pg-speaker__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--color-cream);
}

.pg-speaker__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem;
}

.pg-speaker__name {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

/* flex: 1 sur l'intitulé : les liens « Lire l'annonce » restent alignés d'une
   carte à l'autre même quand les fonctions tiennent sur trois lignes. */
.pg-speaker__role {
    flex: 1;
    margin: 0 0 1rem;
    color: var(--color-gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

.pg-speaker__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* La flèche doit pointer vers la fin de ligne, donc vers la gauche en arabe. */
[dir="rtl"] .pg-speaker__link .fa-arrow-right {
    transform: scaleX(-1);
}

.pg-speakers__more {
    margin: 2rem 0 0;
    color: var(--color-gray);
    font-size: 0.92rem;
    text-align: center;
}

/* ---------- Article (pages/article.php) ---------- */
.pg-article__container {
    max-width: 820px;
}

.pg-breadcrumb {
    margin-bottom: 1.5rem;
    color: var(--color-gray);
    font-size: 0.9rem;
    /* Un titre d'article long ne doit pas pousser le fil d'Ariane hors écran. */
    overflow-wrap: anywhere;
}

.pg-breadcrumb a {
    color: var(--color-primary);
}

.pg-article__header {
    margin-bottom: 2rem;
}

.pg-article__header h1 {
    margin: 1rem 0 0.75rem;
    color: var(--color-primary);
    font-size: clamp(1.55rem, 4.5vw, 3rem);
    font-weight: 800;
}

/* Flex + wrap : les 3 métadonnées passent à la ligne proprement en mobile,
   là où les séparateurs ` • ` forçaient une ligne unique. */
.pg-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    color: var(--color-gray);
    font-size: 0.9rem;
}

.pg-article__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Les visuels du blog sont carrés (affiche officielle du congrès pour les
   annonces d'intervenants) : le ratio 1/1 les montre en entier. max-width
   borne la couverture, sinon elle occuperait les 820px de la colonne et
   repousserait tout le texte sous la ligne de flottaison. */
.pg-article__cover {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto 2.5rem;
    border-radius: 16px;
    background: var(--color-cream);
}

.pg-article__cta {
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(135deg, #fff8e7 0%, #f5e6cc 100%);
    border-inline-start: 4px solid var(--color-accent);
}

.pg-article__cta h3 {
    margin-bottom: 0.75rem;
    color: var(--color-secondary);
}

.pg-article__cta p {
    margin-bottom: 1.5rem;
    color: var(--color-gray);
}

.pg-article__back {
    margin-top: 2.5rem;
}

.pg-article__back a {
    color: var(--color-primary);
    font-weight: 600;
}

/* Le corps d'article contient du HTML éditorial (listes, longues URLs,
   éventuels tableaux) : on le borne pour qu'il ne déborde jamais. */
.article-body {
    font-size: clamp(1rem, 2.2vw, 1.05rem);
    line-height: 1.8;
    color: #333;
    overflow-wrap: break-word;
}

.article-body img,
.article-body iframe,
.article-body video {
    max-width: 100%;
    height: auto;
}

.article-body ul,
.article-body ol {
    list-style: revert;
    padding-inline-start: 1.4rem;
    margin-bottom: 1.25rem;
}

.article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Pages légales (privacy / terms) ---------- */
.pg-legal h2 {
    margin-top: 2.25rem;
    font-size: clamp(1.25rem, 3.5vw, 1.9rem);
}

.pg-legal p,
.pg-legal li {
    overflow-wrap: break-word;
}

.pg-legal__updated {
    color: var(--color-gray);
}

/* ---------- 404 ---------- */
.pg-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: calc(var(--navbar-height) + var(--countdown-height) + 2rem) 1.25rem 4rem;
    text-align: center;
}

/* 8rem en dur débordait sous 320px : clamp borné à la largeur d'écran. */
.pg-404__code {
    color: var(--color-primary);
    font-size: clamp(4.5rem, 22vw, 8rem);
    font-weight: 900;
    line-height: 1;
}

.pg-404 h1 {
    margin: 1rem 0;
    font-size: clamp(1.4rem, 6vw, 2rem);
}

.pg-404 p {
    max-width: 500px;
    margin: 0 auto 2rem;
    color: var(--color-gray);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .pg-page {
        padding-top: calc(var(--navbar-height) + var(--countdown-height) + 2rem);
        padding-bottom: 3.5rem;
    }

    .pg-head {
        margin-bottom: 2.5rem;
    }

    .pg-cards,
    .pg-blog-grid {
        gap: 1.25rem;
    }

    .pg-card {
        padding: 1.85rem 1.4rem;
    }

    .pg-cta {
        margin-top: 2.5rem;
    }

    /* Bouton pleine largeur : cible tactile confortable et pas de
       débordement quand le libellé traduit est long. */
    .pg-cta .btn {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0.95rem 1.25rem;
        font-size: 1rem;
    }

    .pg-timeline__heading--pm {
        margin-top: 2.25rem;
    }

    .pg-article__cover {
        margin-bottom: 1.75rem;
        border-radius: 12px;
    }

    .pg-article__cta {
        margin-top: 2.25rem;
        padding: 1.5rem 1.15rem;
    }
}

/* L'empilement du créneau horaire se déclenche avant 768px : à deux
   colonnes le titre de session n'a plus qu'une soixantaine de pixels. */
@media (max-width: 600px) {
    .pg-slot {
        flex-direction: column;
        gap: 0.4rem;
        padding: 1.15rem;
    }

    .pg-slot__time {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .pg-page {
        padding-bottom: 3rem;
    }

    .pg-head {
        margin-bottom: 2rem;
    }

    .pg-card {
        padding: 1.5rem 1.15rem;
    }

    .pg-card__icon {
        width: 58px;
        height: 58px;
        font-size: 1.5rem;
    }

    .pg-post__body {
        padding: 1.15rem;
    }

    .pg-404 {
        min-height: 60vh;
    }
}