/*
Theme Name: Ecole Pratique
Theme URI: 
Author: Teamtreize
Description: Thème sur mesure du site de l'École Pratique (Full Site Editing) : formations, filières, actualités et parcours de candidature. Conçu et développé par Teamtreize.
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: teamtreize
*/

:root {
    color-scheme: light dark;
}

/* Masquer à partir d'un breakpoint et en dessous (cumulatif) :
   hide-on-tablet masque aussi sur mobile. */
@media (width <= 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (width <= 1200px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (width > 768px) {
    .hide-from-mobile {
        display: none !important;
    }
}

@media (width > 1200px) {
    .hide-from-tablet {
        display: none !important;
    }
}

@media (width < 640px) {
    .hide-on-640 {
        display: none !important;
    }
}

@media (width >= 640px) {
    .hide-from-640 {
        display: none !important;
    }
}

/* Retirer le margin-top du footer */
footer.wp-block-template-part {
    margin-block-start: 0 !important;
}

/* Retirer le margin-block-start du main */
main.wp-block-group,
main.wp-block-post-content {
    margin-block-start: 0 !important;
}

.wp-block-template-part:has(> .is-position-sticky) {
    --wp-admin--admin-bar--position-offset: var(
        --wp-admin--admin-bar--height,
        0px
    );
    position: fixed;
    top: calc(30px + var(--wp-admin--admin-bar--position-offset, 0px));
    z-index: 10;
    width: 100%;
}

@media (width <= 1200px) {
    .wp-block-template-part:has(> .is-position-sticky) {
        top: var(--wp-admin--admin-bar--height, 0px);
    }

    /* Hauteur du header, mesurée et mise à jour par initHeaderHeight()
       (assets/js/header.js). Valeurs de repli (avant exécution du JS) :
       hauteurs mesurées de la barre principale seule, logo de 210px. */
    :root {
        --tt-header-height: 91px;
    }

    /* Heros des pages intérieures (core/cover avec fil d'Ariane : page.html,
       single-formations, single-actualites, archive-actualites, search, bloc
       hero-page-filiere) : leur min-height de 700px (inline) et leur contenu
       calé en bas laissaient, sous le header posé par-dessus le haut du hero,
       un vide de 450 à 500px avant le fil d'Ariane. Le hero prend ici la
       hauteur de son contenu et réserve en haut celle du header, plus un
       écart fixe. */
    .wp-block-cover:has(.wp-block-teamtreize-breadcrumb) {
        min-height: 0 !important;
        padding-top: calc(var(--tt-header-height) + var(--wp--preset--spacing--50)) !important;
    }
}

@media (width <= 640px) {
    /* Logo ramené à 150px (header.css) */
    :root {
        --tt-header-height: 71px;
    }
}

/* header-static : pas de pin viewport, le header défile avec la page */
.wp-block-template-part:has(> .is-header-static) {
    position: absolute;
}

/* Ancres : défilement fluide sur tout le site, sauf si le visiteur a demandé
   à réduire les animations. Posé sur <html> : seul l'élément racine pilote
   le scroll du viewport. */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* Arrêt des ancres juste sous le header fixe : barre d'admin, décalage de
   30px au-dessus de 1200px (cf. plus haut), puis --tt-header-height
   (mesurée par assets/js/header.js, barre "Je suis" dépliée). :root et non
   html : l'emporte sur le scroll-padding-top de admin-bar.css (WordPress). */
:root {
    scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 30px + var(--tt-header-height));
}

@media (width <= 1200px) {
    :root {
        scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tt-header-height));
    }
}

/* Pages formation (header statique) : ancres de la sous-navigation
   (.formation-subnav), arrêt 200px au-dessus du titre ciblé (sous 1200px :
   formation-subnav.css). */
html:has(> body.single-formations) {
    scroll-padding-top: 200px;
}

/* Border radius — classes appliquées par le hook teamtreize/group-radius
   (core/group, core/image, teamtreize/lien-englobant). Valeurs alignées sur
   settings.border.radius (s/m/full) de theme-settings.json. */
.has-radius-s {
    border-radius: 3px;
    overflow: hidden;
}

.has-radius-m {
    border-radius: 10px;
    overflow: hidden;
}

.has-radius-full {
    border-radius: 9999px;
    overflow: hidden;
}

/* Carte partenaire (teamtreize/lien-englobant + classe carte-partenaire) :
   survol sans le filtre du variant "primary", qui blanchit les logos. */
.lien-englobant.carte-partenaire:hover,
.lien-englobant.carte-partenaire:focus-visible {
    box-shadow: 0 6px 0 0 var(--wp--preset--color--primary);
    transform: translateY(-4px);
}

.has-gutter-left {
    padding-left: var(--wp--custom--spacing--gutter);
}
.has-gutter-right {
    padding-right: var(--wp--custom--spacing--gutter);
}

.add-arrow-after {
    display: inline-flex;
    align-items: center;
}

.add-arrow-after::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M1.5 7.5H13.5' stroke='%23192548' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 1.5L13.5 7.50002L7.5 13.5' stroke='%23192548' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.add-arrow-after:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M1.5 7.5H13.5' stroke='%23373CF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 1.5L13.5 7.50002L7.5 13.5' stroke='%23373CF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1200px) {
    :root {
        --wp--preset--spacing--140: 70px;
    }
}

/* Superposition d'une image Gutenberg sur les sections suivantes.
   À appliquer respectivement au conteneur principal, au conteneur direct de
   l'image et aux sections qui doivent rester en arrière-plan. */
.image-overlay-container,
.image-overlay-container > .wp-block-cover__inner-container {
    overflow: visible !important;
}

.image-overlay-foreground {
    position: relative;
    z-index: 5;
    overflow: visible !important;
}

.image-overlay-background {
    position: relative;
    z-index: 1;
}

/* Grande image décorative placée entre deux sections Gutenberg. */
main:has(.oversized-image-right) {
    overflow-x: clip;
}

.oversized-image-anchor {
    position: relative;
    z-index: 0;
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
}

.oversized-image-right {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 0;
    width: clamp(40rem, 70vw, 75rem);
    max-width: none !important;
    margin: 0 !important;
    transform: translate(45%, -92%);
    pointer-events: none;
}

.oversized-image-right img {
    display: block;
    width: 100%;
    height: auto;
}

.oversized-image-content {
    position: relative;
    z-index: 1;
}

@media (max-width: 781px) {
    .oversized-image-right {
        width: clamp(28rem, 110vw, 44rem);
    }
}

/* Illustration libre dans le CTA candidature, découpée avant la section suivante. */
.candidature-image-stage {
    --candidature-image-width: clamp(42rem, 60vw, 61.3125rem);
    --candidature-image-x: 50%;
    --candidature-image-y: 50%;
    position: relative;
    overflow: hidden;
}

.candidature-image-column {
    position: relative;
    align-self: stretch !important;
    min-height: clamp(32rem, 50vw, 46rem);
}

.candidature-image-movable {
    position: absolute;
    top: var(--candidature-image-y);
    left: var(--candidature-image-x);
    width: var(--candidature-image-width);
    max-width: none !important;
    margin: 0 !important;
    transform: translate(-65%, -32%);
}

.candidature-image-movable img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

@media (max-width: 781px) {
    .candidature-image-column {
        min-height: 0;
    }

    /* Illustration centrée et recadrée sur la photo : agrandie (125%) dans
       un cadre 5:4, décalée pour centrer la photo (61,7% de la largeur de
       l'image, 33% de sa hauteur). Les traînées de flèches, qui occupaient
       la moitié basse de l'image, sont en grande partie rognées, et
       s'estompent au bas du cadre. */
    .candidature-image-movable {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 26rem);
        max-width: none !important;
        aspect-ratio: 5 / 4;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow: hidden;
        transform: none;
        mask-image: linear-gradient(to bottom, #000 75%, transparent);
    }

    .candidature-image-movable img {
        width: 125%;
        margin-left: -27.1%;
    }
}