/* guide-fp.css — Styles pour les shortcodes [formations_fp] et [formations_prof]
 * Chargé conditionnellement via functions.php sur les pages concernées.
 */

/* Défilement doux vers les sections ciblées par les ancres (.fp-guide__anchor-btn) */
html {
    scroll-behavior: smooth;
}

/* Onglets — fond blanc, chaque onglet est une pilule bordée ; seul l'onglet
   actif reçoit un aplat jaune plein (pas de bande jaune sur toute la section,
   contrairement au bandeau d'ancres ci-dessous). */
.fp-guide__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 4.25rem;
    align-items: center;
    margin-block-end: 0;
    background-color: #fff;
}

.fp-guide__tab-container {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 10px;
}

.fp-guide__tab-container--active {
    background-color: var(--wp--preset--color--jaune-30);
}

.fp-guide__tab {
    width: fit-content;
    padding: 0rem 0.5rem;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gris, #ccc);
    background: #fff;
    border: 1px solid #ccc;
    text-decoration: none;
    transition: border-color 0.15s;
}

.fp-guide__tab:hover {
    border-color: var(--wp--preset--color--noir);
}

.fp-guide__tab--active {
    background-color: var(--wp--preset--color--jaune);
}

/* Bande pleine largeur (jaune 30%) contenant les boutons de filtre du groupe
   actif — répartis en colonnes façon calendrier2.html (CSS columns : pas
   besoin de calculer les paquets d'items en PHP, le navigateur équilibre).
   var(--jaune-30) est une couleur translucide (rgba 30%) : posée seule en
   background-color, le fond blanc de la page transparaîtrait dessous en cas
   de superposition (ex. bordures/ombres d'éléments voisins). On superpose
   donc un calque teinté (background-image, peint au-dessus) sur un fond
   blanc opaque (background-color, en dessous) : le rendu visuel est
   identique, mais le résultat composé est opaque. */
.fp-guide__anchors-band {
    position: relative;
    padding-block: 1.5rem;
    background-color: var(--wp--preset--color--blanc, #fff);
    background-image: linear-gradient(var(--wp--preset--color--jaune-30), var(--wp--preset--color--jaune-30));
    box-shadow: 0 0 0 100vmax var(--wp--preset--color--jaune-30);
    clip-path: inset(0 -100vmax);
}

/* Trait plein écran sous la bande — pas besoin de sortir la nav dans un autre
   conteneur : un ::after à 100vw, recentré sur l'écran (left:50% + margin-left
   négatif de -50vw), calé sur le bord bas de .fp-guide__anchors-band (position:
   relative ci-dessus). Même principe que le fond jaune juste au-dessus (qui
   déborde, lui, via box-shadow + clip-path), appliqué ici à un simple trait. */
.fp-guide__anchors-band::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    margin-left: -50vw;
    border-bottom: 1px solid var(--wp--preset--color--noir);
    pointer-events: none;
}

.fp-guide__anchors {
    columns: 3;
    column-gap: 1.5rem;
    margin: 0;
}

.fp-guide__anchor-btn {
    display: block;
    width: fit-content;
    break-inside: avoid;
    margin-bottom: 0.25rem;
    padding: 0rem 0.5rem;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    text-transform: uppercase;
    background: #fff;
    border: 2px solid #ccc;
    color: var(--wp--preset--color--gris, #ccc);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.fp-guide__anchor-btn:hover {
    border-color: var(--wp--preset--color--noir);
}

/* Bouton du groupe actuellement filtré/affiché */
.fp-guide__anchor-btn--active {
    background-color: var(--wp--preset--color--jaune);
    border-color: 1px solid #ccc;
    font-weight: 700;
}

@media (max-width: 900px) {
    .fp-guide__anchors {
        columns: 2;
    }
}

@media (max-width: 600px) {
    .fp-guide__anchors {
        columns: 1;
    }
}

/* Sections */
.fp-guide__section {
    position: relative;
    max-width: 50%;
    margin-block-end: 3rem;
    padding-block: 1.5rem;
    scroll-margin-top: 4rem;
}

/* Fond jaune 33% sur les groupes pairs (2, 4, 6…), étendu à toute la largeur
   de l'écran malgré le max-width:50% du contenu — technique du box-shadow
   surdimensionné (100vmax) : peint au-delà du viewport sans jamais créer de
   scroll horizontal (contrairement à width:100vw + margins négatives). */
.fp-guide__section:nth-child(even of .fp-guide__section) {
    background-color: var(--wp--preset--color--jaune-30);
    box-shadow: 0 0 0 100vmax var(--wp--preset--color--jaune-30);
    clip-path: inset(0 -100vmax);
}

/* Image de la 1re section de résultats, dans la marge droite (le contenu ne
   fait que 50% de large, cf. .fp-guide__section ci-dessus) — left:100% la
   colle juste après la section, top:0 l'aligne sur le haut du conteneur.
   :first-of-type = le premier <section class="fp-guide__section">, quels que
   soient les éléments avant lui (nav, bande jaune). */
.fp-guide__section:first-of-type::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 110%;
    margin-left: 2rem;
    width: 650px;
    height: 350px;
    background-image: url("../images/images-cpt/archive-guide.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}

/* Sous 1100px, plus assez de place dans la marge droite pour cette image
   sans chevaucher le contenu (ou le fond jaune plein écran des sections
   paires) : on la masque plutôt que de la faire déborder. */
@media (max-width: 1100px) {
    .fp-guide__section:first-of-type::after {
        display: none;
    }
}

/* Même styles que le H2 du bloc Section Article Pro (blocks/section-article-pro/style.css
   + textColor "black"/fontFamily "cabinet-grotesk" du bloc). */
.fp-guide__section-title {
    margin-block-end: 1.25rem;
    padding-block-end: var(--wp--preset--spacing--20, 0.6rem);
    border-bottom: 2px solid currentColor;
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: var(--wp--preset--font-size--chapo);
    font-weight: 300;
    line-height: 1.1;
    color: var(--wp--preset--color--black, #000);
}

.fp-guide__section-title a {
    color: inherit;
    text-decoration: none;
}

/* Cartes — pas de bordure/margin propres : le contenu reste aligné avec le H2
   du groupe au-dessus (même point de départ à gauche).
   Décoration "croix" à droite (même SVG que .emplois-fle__item-side sur
   /emploi/ et .fle2026-section-article-pro__sous-section::before) : la carte
   réserve 70px à droite (padding-right) pour tout son contenu (titre, texte,
   boutons), la croix est positionnée en absolu dans cet espace, centrée
   verticalement sur toute la hauteur de la carte. Une par carte, générée
   automatiquement pour chaque formation ajoutée — rien à faire de plus. */
.fp-guide__card {
    position: relative;
    padding: 0 70px 0 0;
    border: 0;
    margin: 0;
    background: transparent;
}

.fp-guide__card::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='2' x2='12' y2='9' stroke='%237F7F7F' stroke-width='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='22' stroke='%237F7F7F' stroke-width='1'/%3E%3Cline x1='2' y1='12' x2='9' y2='12' stroke='%237F7F7F' stroke-width='1'/%3E%3Cline x1='15' y1='12' x2='22' y2='12' stroke='%237F7F7F' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
}

/* Aperçu 3 cartes / groupe : les extra restent masquées tant que le groupe
   n'est pas déplié (cf. templates/archive-formation-prof.php). Combiné avec
   .fp-guide__card pour gagner face à cette même règle de base (spécificité). */
.fp-guide__card.fp-guide__card--extra {
    display: none;
}

.fp-guide__section.is-expanded .fp-guide__card--extra {
    display: block;
}

.fp-guide__toggle {
    display: block;
    margin: var(--wp--preset--spacing--30, 1.5rem) auto 0;
    cursor: pointer;
}

/* Même typographie que le H3 de Section Article Pro (blocks/section-article-pro/index.js) */
.fp-guide__card-title {
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 300;
    margin: 0 0 0.35rem;
}

.fp-guide__card-title a {
    color: var(--wp--preset--color--noir, #000);
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    text-decoration: none;
}

.fp-guide__card-org {
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 300;
    color: #555;
    margin: 0 0 0.75rem;
}

/* Établissement affiché à l'intérieur du même H3 que le titre (texte inline,
   pas un item flex séparé) : ils restent naturellement sur la même ligne et
   ne passent à la ligne suivante qu'au niveau du mot, comme du texte normal,
   au lieu de sauter entièrement à la ligne comme le faisait le flex. */
.fp-guide__card-org--inline {
    margin-inline-start: 0.75rem;
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 300;
    opacity: 0.45;
}

/* Même style que le texte de description au-dessus (.fp-guide__card-content) */
.fp-guide__card-ref-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--fle2026-font-weight-pro);
    color: var(--wp--preset--color--black, #000);
    margin: 0 0 0.75rem;
}

.fp-guide__card-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 0.75rem;
    font-size: var(--wp--preset--font-size--label);
    margin: 0 0 0.75rem;
}

.fp-guide__card-meta dt {
    font-weight: 600;
    color: #000;
}

.fp-guide__card-meta dd {
    margin: 0;
    color: #333;
}

.fp-guide__card-content {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--fle2026-font-weight-pro);
    color: var(--wp--preset--color--black, #000);
    margin-block-end: 0.75rem;
}

.fp-guide__card-content p {
    margin: 0 0 0.4rem;
}

/* Un bouton par ligne */
.fp-guide__card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-block-end: 1.75rem;
}

.fp-guide__card-contact {
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    color: var(--wp--preset--color--noir);
    text-decoration: underline;
}

.fp-guide__card-link {
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    padding: 0.4rem 1rem;
    background: var(--wp--preset--color--noir);
    color: #fff !important;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.15s;
}

.fp-guide__card-link:hover {
    opacity: 0.85;
}

.fp-guide__card-ref {
    margin-inline-start: auto;
    font-size: var(--wp--preset--font-size--label);
    color: #999;
}

/* Date + durée */
.fp-guide__card-dates {
    display: inline-block;
    width: fit-content;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--wp--preset--color--noir);
    padding: 0.2em 0.6em;
    margin: 0 0 0.5rem;
}

.fp-guide__card-duree {
    font-weight: 400;
    color: #666;
}

/* Tags villes */
.fp-guide__card-villes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block-end: 0.5rem;
}

.fp-guide__card-ville-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    background: var(--wp--preset--color--noir);
    color: #fff;
    border-radius: 2em;
}

@media (max-width: 480px) {
    .fp-guide__card-meta {
        grid-template-columns: 1fr;
    }
    .fp-guide__card-ref {
        margin-inline-start: 0;
    }
}