/* ------------------------------------------------------------------
   Pages de présentation : l'Institut, les acteurs occitans, les mentions
   légales. Un même vocabulaire, pris au reste du site : panneau Pais beige
   à filet d'or, titres Lora soulignés à la couleur d'opération, cartels en
   IBM Plex Mono. Tout tient sur un écran de portable (sections ≤ ~600 px).
   La couleur d'opération arrive par --couleur-operation, posée sur .pres-page.
   ------------------------------------------------------------------ */

.pres-page {
    --pres-encre: var(--couleur-operation, var(--color-principale));
    --pres-largeur: 1180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
}

.pres-bloc {
    width: 100%;
    max-width: calc(var(--pres-largeur) + 2 * var(--margin-bord-page-standard));
    padding-inline: var(--margin-bord-page-standard);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    box-sizing: border-box;
}

/* ---------- Titres ---------- */

.pres-titre {
    position: relative;
    margin: 0 0 1.25rem;
    padding-bottom: 0.55rem;
    font-family: var(--font-titre-2);
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    color: var(--pres-encre);
    text-wrap: balance;
}

.pres-titre::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
}

.pres-surtitre {
    margin: 0 0 0.4rem;
    font-family: var(--font-texte-annexe);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-chaud);
}

/* ---------- Textes ---------- */

.pres-chapo {
    margin: 0 auto;
    max-width: 62ch;
    font-family: var(--font-titre-2);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-style: italic;
    line-height: 1.6;
    text-align: center;
    color: #3a3328;
    text-wrap: pretty;
}

.pres-texte {
    font-family: var(--font-texte-global);
    font-size: 1rem;
    line-height: 1.75;
    color: #2b2620;
}

.pres-texte p {
    margin: 0 0 0.9rem;
}

.pres-texte p:last-child {
    margin-bottom: 0;
}

.pres-texte a,
.pres-lien {
    color: var(--pres-encre);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pres-texte ul {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
}

.pres-texte li {
    margin-bottom: 0.35rem;
}

.pres-texte li::marker {
    color: var(--pres-encre);
}

/* ---------- Texte + image en deux colonnes ---------- */

.pres-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.pres-duo--inverse > .pres-figure,
.pres-duo--inverse > .pres-mosaique {
    order: -1;
}

.pres-figure {
    margin: 0;
}

.pres-figure img {
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-niveau-3);
}

.pres-figure figcaption,
.pres-legende {
    margin-top: 0.6rem;
    font-family: var(--font-texte-annexe);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: #6f6556;
}

/* ---------- Chiffres clés sur panneau Pais ---------- */

.pres-chiffres {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pres-chiffre {
    position: relative;
    z-index: 1;
    text-align: center;
}

.pres-chiffre b {
    display: block;
    font-family: var(--font-titre-1);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 600;
    line-height: 1;
    color: var(--pres-encre);
}

.pres-chiffre span {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--font-texte-annexe);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: #5d5446;
}

/* ---------- Frise chronologique ---------- */

.pres-frise {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pres-frise::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 4.6rem;
    width: 2px;
    background: color-mix(in srgb, var(--pres-encre) 30%, transparent);
}

.pres-frise li {
    position: relative;
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1.6rem;
    padding-bottom: 1.1rem;
}

.pres-frise li::after {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: calc(4.6rem - 4px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pres-encre);
    box-shadow: 0 0 0 3px var(--color-fond-page, #ece4d4);
}

.pres-frise-annee {
    font-family: var(--font-titre-1);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: right;
    color: var(--pres-encre);
}

.pres-frise-texte {
    font-family: var(--font-texte-global);
    font-size: 0.95rem;
    line-height: 1.65;
    color: #2b2620;
}

/* ---------- Cartes (actions País, membres du Pôle) ---------- */

.pres-cartes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pres-carte {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.15rem 1.25rem;
    border-radius: var(--rayon-m);
    background: #fffdf8;
    border: 1px solid color-mix(in srgb, var(--color-citation) 35%, transparent);
    box-shadow: var(--ombre-niveau-1);
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-rapide) ease, box-shadow var(--transition-rapide) ease;
}

a.pres-carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-niveau-2);
}

.pres-carte-titre {
    margin: 0;
    font-family: var(--font-titre-2);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pres-encre);
}

.pres-carte-texte {
    margin: 0;
    font-family: var(--font-texte-global);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #3a3328;
}

.pres-carte-lien {
    margin-top: auto;
    padding-top: 0.35rem;
    font-family: var(--font-texte-annexe);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--pres-encre);
}

/* ---------- Panneau Pais (Département, contact, Pôle) ---------- */

.pres-panneau {
    padding: clamp(1.75rem, 4vw, 3rem);
}

.pres-panneau > * {
    position: relative;
    z-index: 1;
}

.pres-panneau-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

.pres-logo {
    width: clamp(140px, 18vw, 210px);
    height: auto;
}

/* ---------- Équipe ---------- */

.pres-equipe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.pres-equipe-groupe h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-texte-annexe);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-chaud);
}

.pres-equipe-groupe ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pres-equipe-groupe li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-citation) 45%, transparent);
    font-family: var(--font-texte-global);
}

.pres-equipe-groupe li b {
    font-family: var(--font-titre-2);
    font-weight: 600;
}

.pres-equipe-groupe li span {
    font-size: 0.9rem;
    color: #5d5446;
    text-align: right;
}

/* ---------- Adresses ---------- */

.pres-adresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.pres-adresse {
    font-style: normal;
    font-family: var(--font-texte-global);
    font-size: 0.95rem;
    line-height: 1.65;
}

.pres-adresse b {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-titre-2);
    font-size: 1.05rem;
    color: var(--pres-encre);
}

/* ---------- Acteur (Ostal, ADOC) ---------- */

.pres-mosaique {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.pres-mosaique img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-niveau-2);
}

.pres-mosaique img:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

.pres-mosaique .pres-legende {
    grid-column: 1 / -1;
    margin-top: 0;
}

.pres-pratique {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--color-citation) 40%, transparent);
    font-family: var(--font-texte-annexe);
    font-size: 0.8rem;
    color: #4a4237;
}

.pres-media-fonds {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 320px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.75rem;
}

/* ---------- Partenaires ---------- */

.pres-partenaires {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 2rem;
}

.pres-partenaires h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-texte-annexe);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-chaud);
}

.pres-partenaires ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pres-partenaires-colonnes ul {
    columns: 2;
    column-gap: 2rem;
}

.pres-partenaires li {
    break-inside: avoid;
    padding: 0.4rem 0;
    font-family: var(--font-texte-global);
    font-size: 0.92rem;
    line-height: 1.45;
}

.pres-partenaires li small {
    display: block;
    font-family: var(--font-texte-annexe);
    font-size: 0.72rem;
    color: #6f6556;
}

.pres-partenaires a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, var(--pres-encre) 50%, transparent);
    text-underline-offset: 3px;
}

.pres-partenaires a:hover {
    color: var(--pres-encre);
}

/* ---------- Texte juridique (mentions légales) ---------- */

.pres-legal {
    max-width: 78ch;
    margin-inline: auto;
}

.pres-legal h2 {
    margin: 2.5rem 0 1rem;
}

.pres-legal h3 {
    margin: 1.6rem 0 0.5rem;
    font-family: var(--font-titre-2);
    font-size: 1.2rem;
    color: #2b2620;
}

.pres-legal dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1.25rem;
    margin: 0 0 1rem;
    font-family: var(--font-texte-global);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pres-legal dt {
    font-family: var(--font-texte-annexe);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: #6f6556;
    padding-top: 0.15rem;
}

.pres-legal dd {
    margin: 0;
}

.pres-tableau {
    width: 100%;
    margin: 0.5rem 0 1rem;
    border-collapse: collapse;
    font-family: var(--font-texte-global);
    font-size: 0.88rem;
    line-height: 1.5;
}

.pres-tableau th,
.pres-tableau td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--color-citation) 40%, transparent);
}

.pres-tableau th {
    font-family: var(--font-texte-annexe);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6f6556;
}

.pres-tableau code {
    font-family: var(--font-texte-annexe);
    font-size: 0.8rem;
    word-break: break-all;
}

.pres-choix {
    margin: 1rem 0;
    padding: 1.5rem 1.75rem;
}

.pres-choix p {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem;
    font-family: var(--font-texte-global);
    line-height: 1.6;
}

.pres-bouton {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: var(--rayon-pill);
    border: 1.5px solid var(--pres-encre);
    background: var(--pres-encre);
    color: #ffffff;
    font-family: var(--font-texte-annexe);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background-color var(--transition-rapide) ease, color var(--transition-rapide) ease;
}

.pres-bouton:hover {
    background: transparent;
    color: var(--pres-encre);
}

.pres-bouton:focus-visible,
.pres-carte:focus-visible {
    outline: 2px solid var(--pres-encre);
    outline-offset: 3px;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 900px) {
    .pres-duo,
    .pres-partenaires,
    .pres-media-fonds {
        grid-template-columns: minmax(0, 1fr);
    }

    .pres-duo--inverse > .pres-figure,
    .pres-duo--inverse > .pres-mosaique {
        order: 0;
    }

    .pres-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.5rem;
    }

    .pres-equipe {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .pres-panneau-grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .pres-cartes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pres-cartes {
        grid-template-columns: minmax(0, 1fr);
    }

    .pres-frise::before {
        left: 3.4rem;
    }

    .pres-frise li {
        grid-template-columns: 2.9rem minmax(0, 1fr);
        gap: 1.2rem;
    }

    .pres-frise li::after {
        left: calc(3.4rem - 4px);
    }

    .pres-frise-annee {
        font-size: 1rem;
    }

    .pres-partenaires-colonnes ul {
        columns: 1;
    }

    .pres-legal dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .pres-legal dd {
        margin-bottom: 0.6rem;
    }

    .pres-tableau,
    .pres-tableau tbody,
    .pres-tableau tr,
    .pres-tableau td {
        display: block;
        width: 100%;
    }

    .pres-tableau thead {
        display: none;
    }

    .pres-tableau tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-citation) 40%, transparent);
    }

    .pres-tableau td {
        padding: 0.15rem 0;
        border: 0;
    }
}