/*
 * components.css — Composants transverses du thème fle2026
 *
 * Table des matières
 * ──────────────────
 *  1. Variables globales  (:root)
 *  2. Titre H1            (bandes de fond homepage)
 *  3. Boutons             (.fle-btn, pilules, .fle-btn-bord)
 *  4. Bandeau pages pro   (.fle2026-bandeau-pages-pro)
 *  5. Liste centres       (.fle2026-centre-listing, pages taxonomy)
 *
 * Styles extraits vers leurs blocs respectifs (blocks/{nom}/style.css) :
 *  - fle2026/bouton       → blocks/bouton/style.css
 *  - fle2026/retrouvez    → blocks/retrouvez/style.css
 *  - fle2026/section      → blocks/section/style.css
 */


/* ══ 1. VARIABLES GLOBALES ══ */

:root {
    --width-wide:    var(--wp--style--global--wide-size, 1447px);
    --transition:    200ms ease;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-paper:    cubic-bezier(0.15, 0, 0.2, 1);
}

header{
    border-bottom: 1px solid var(--wp--preset--color--noir);
}

header .wp-block-site-tagline{
font-weight: 300;
  max-width: 150px;
  color: var(--wp--preset--color--gris);
}


header .image-30ans{
    margin-bottom: -30px;
    margin-left: auto;
}
header .image-30ans img{
    max-height: 200px;
}


header ul.polylang_lang_switcher {
    display: flex;
    padding-left: 0;
    flex-flow: column wrap;
    gap: 2px;
    list-style-type: none;
    /* margin-left: auto; */
}

header ul.polylang_lang_switcher .lang-item a {
    display: block;
    color: var(--wp--preset--color--gris, #7F7F7F);
    text-decoration: none;
    border: 1.8px solid var(--wp--preset--color--gris);
    padding: 0.35em 0.55em;
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--inter, inherit);
    font-size: 0.5em;
    font-weight: 400;
    line-height: 1.35;
    background-color: white;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

header ul.polylang_lang_switcher .lang-item a:hover,
header ul.polylang_lang_switcher .lang-item a:focus {
    background-color: var(--wp--preset--color--jaune, #E8F23B);
    border-color: var(--wp--preset--color--jaune, #E8F23B);
    font-weight: bold;
}

header ul.polylang_lang_switcher .lang-item.current-lang a {
    background-color: var(--wp--preset--color--jaune, #E8F23B);
    border-color: var(--wp--preset--color--jaune, #E8F23B);
    color: var(--wp--preset--color--noir);
    font-weight: 700;
}


/* ══ 2. TITRE H1 ══ */

h1 {
    /* ── variables des bandes de fond (homepage uniquement) ── */
    --band-width-min:    120px;
    --band-width-pref:   100%;
    --band-width-max:    1200px;
    --band-height-min:   60px;
    --band-height-pref:  1.4em;
    --band-height-max:   200px;
    --band-opacity:  30%;
    --band-rotate:  -2deg;
    --overlap-min:   20px;
    --overlap-max:   50px;

    position: relative;
    overflow: inherit;
    width: fit-content;
    max-width: var(--width-wide);
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left;
    font-size: clamp(3.5rem, 9vw, 12rem);    
    color: var(--wp--preset--color--noir);
}

/* Bat .is-layout-constrained > :where(...) { margin: auto !important } (spécificité 0-1-0).
   .is-layout-constrained > h1 = 0-1-1 → gagne à !important égal. */
.is-layout-constrained > h1 {
    margin-left: max(0px, calc((100% - var(--width-wide)) / 2)) !important;
    margin-right: auto !important;
}

/* Éditeur : pleine largeur pour le confort de frappe */
.editor-styles-wrapper h1 {
    width: 100% !important;
    max-width: var(--width-wide) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Bandes de fond — homepage uniquement */
h1::before,
h1::after {
    content: "";
    display: inline-block;
    width:  clamp(var(--band-width-min), var(--band-width-pref), var(--band-width-max));
    height: clamp(var(--band-height-min), var(--band-height-pref), var(--band-height-max));
    background-color: color-mix(in srgb, var(--wp--preset--color--rouge) var(--band-opacity), transparent);
    position: absolute;
    transform: rotate(var(--band-rotate));
    z-index: -1;
}

h1::after {
    bottom: 20%;
    left: -10%;
}

h1::before {
    left: 10%;
    /* 80% = 100% − ::after bottom (20%).
       clamp garantit --overlap-min ≤ overlap vertical ≤ --overlap-max.
       max(0px, …) empêche l'inversion sur les h1 très courts. */
    top: max(0px, clamp(calc(80% - var(--overlap-max)), 30%, calc(80% - var(--overlap-min))));
}


/* ══ 3. BOUTONS ══
   Chargé en front (wp_enqueue_scripts) ET en éditeur (add_editor_style).
   :is() bat a:where(:not(.wp-element-button)) généré par theme.json. */

:is(
    .fle-btn,
    .lien-gris,
    .lien-bleu,
    .fle2026-destination-nav .wp-block-navigation-item__content,
    .fle2026-section-links a,
    .fle2026-destination-loop.fle2026-alt-bg .wp-block-post-content a
) {
    display: inline-block;
    border: 1.5px solid var(--btn-color);
    color: var(--btn-color);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

:is(
    .fle-btn,
    .lien-gris,
    .lien-bleu,
    .fle2026-destination-nav .wp-block-navigation-item__content,
    .fle2026-section-links a,
    .fle2026-destination-loop.fle2026-alt-bg .wp-block-post-content a
):hover,
:is(
    .fle-btn,
    .lien-gris,
    .lien-bleu,
    .fle2026-destination-nav .wp-block-navigation-item__content,
    .fle2026-section-links a,
    .fle2026-destination-loop.fle2026-alt-bg .wp-block-post-content a
):focus-visible {
    background-color: var(--btn-color);
    color: var(--wp--preset--color--blanc);
    text-decoration: none;
}

.fle2026-destination-nav .current-menu-item .wp-block-navigation-item__content {
    background-color: var(--btn-color);
    color: var(--wp--preset--color--blanc);
}

/* ── .fle-btn — standard ── */
.fle-btn {
    --btn-color: var(--wp--preset--color--noir);
    padding: 0.6em 1.25em;
    font-weight: 500;
    font-size: 0.95em;
    line-height: 1.2;
}

/* ── Pilules uppercase ── */
.lien-gris,
.lien-bleu,
.fle2026-destination-nav .wp-block-navigation-item__content,
.fle2026-section-links a,
.fle2026-destination-loop.fle2026-alt-bg .wp-block-post-content a {
    padding: 0.35em 0.55em;
    border-width: 1.8px;
    font-family: var(--wp--preset--font-family--body, inherit);
    font-weight: 600;
    font-size: 0.7em;
    line-height: 1.35;
    text-transform: uppercase;
    text-wrap: balance;
}

.lien-gris,
.fle2026-destination-nav .wp-block-navigation-item__content,
.fle2026-section-links a,
.fle2026-destination-loop.fle2026-alt-bg .wp-block-post-content a { --btn-color: #888; }

.lien-bleu { --btn-color: #2a9fff; }

/* ── .fle-btn-bord — rectangle plein ── */
.fle-btn-bord {
    --btn-border-color: var(--wp--preset--color--gris);
    display: inline-block;
    padding: 0.45em;
    border: 1px solid var(--btn-border-color);
    color: #6f6f6f;
    background: var(--wp--preset--color--blanc);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.fle-btn-bord:hover {
    background-color: var(--btn-border-color);
    color: var(--wp--preset--color--blanc);
    text-decoration: none;
}

.fle-btn-bord:focus-visible {
    outline: 2px solid var(--btn-border-color);
    outline-offset: 3px;
}

.fle-btn-bord--rouge { --btn-border-color: var(--wp--preset--color--rouge); }
.fle-btn-bord--bleu  { --btn-border-color: var(--wp--preset--color--bleu); }


/* ══ 4. BANDEAU PAGES PRO ══ */

.fle2026-bandeau-pages-pro {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding-block: 150px;
}

.fle2026-bandeau-pages-pro::before,
.fle2026-bandeau-pages-pro::after {
    content: '';
    position: absolute;
    background-color: color-mix(in srgb, var(--wp--preset--color--jaune) 80%, transparent);
    mix-blend-mode: multiply;
    width: 100vw;
    height: 150px;
    left: 0;
    z-index: -1;
}

.fle2026-bandeau-pages-pro::before {
    top: 0;
    clip-path: polygon(100% 0%, 100% 100%, 0% 85%, 0% 0%);
}

.fle2026-bandeau-pages-pro::after {
    bottom: 0;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 15%);
}

.fle2026-bandeau-pages-pro-wrapper {
    position: relative;
}

.fle2026-bandeau-pages-pro-wrapper::before,
.fle2026-bandeau-pages-pro-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 100vw;
    height: 100px;
    background-color: color-mix(in srgb, var(--wp--preset--color--jaune) 90%, transparent);
    z-index: -1;
    transform: translateX(-50%) rotate(-2.5deg);
}

.fle2026-bandeau-pages-pro-wrapper::before { top: -40px; }

.fle2026-bandeau-pages-pro-wrapper::after {
    bottom: -20px;
    height: 200px;
}

.fle2026-bandeau-pages-pro .wp-block-columns {
    position: relative;
    z-index: 2;
}

.fle2026-bandeau-pages-pro .wp-block-columns p {
    font-weight: 400;
}

.fle2026-bandeau-pages-pro .section-emplois,
.fle2026-bandeau-pages-pro .section-actualites {
    margin-top: 80px;
}

.fle2026-bandeau-pages-pro .wp-block-columns p.bpp-surtitre {
    display: block;
    margin: 0;
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: clamp(2.5rem, 4vw, 5rem);
    font-weight: 100;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--wp--preset--color--gris);
}

.fle2026-bandeau-pages-pro .wp-block-columns p.bpp-titre {
    display: block;
    margin: 0;
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: clamp(3.5rem, 5vw, 5.5rem);
    font-weight: 900;
    line-height: 0.88;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--gris);
}

@media (max-width: 768px) {
    .fle2026-bandeau-pages-pro .wp-block-columns p.bpp-titre {
        font-size: clamp(3rem, 10vw, 4.5rem);
    }
}


/* ══ 5. LISTE CENTRES (pages taxonomy) ══ */

.fle2026-centre-listing {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 35%);
    gap: var(--wp--preset--spacing--40);
}

.fle2026-centre-listing__divider {
    border: 0;
    border-top: 1px solid var(--wp--preset--color--noir);
    margin: 0 0 var(--wp--preset--spacing--30);
    max-width: 320px;
}

.fle2026-centre-listing__title {
    border-top: 1px solid var(--wp--preset--color--noir);
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--noir);
    padding-top: 15px;
}

.fle2026-centre-listing__title a {
    color: inherit;
    font-family: inherit;
    text-decoration: none;
}

.fle2026-centre-listing__title a:hover,
.fle2026-centre-listing__title a:focus-visible {
    text-decoration: underline;
}

.fle2026-centre-listing__excerpt {
    margin: 0 0 var(--wp--preset--spacing--30);
    max-width: 50rem;
    font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--wp--preset--color--noir);
    line-height: 1.3;
}

.fle2026-centre-listing__links {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
}

.fle2026-centre-listing__media {
    margin: 0;
    width: 100%;
    aspect-ratio: 4/3;
}

.fle2026-centre-listing__media--placeholder {
    background-color: var(--wp--preset--color--region, #EFEFE5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fle2026-centre-listing__media--placeholder::after {
    content: attr(data-initiales);
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--wp--preset--color--gris);
    opacity: 0.18;
    user-select: none;
}

.fle2026-centre-listing__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.fle2026-no-results {
    padding: var(--wp--preset--spacing--50) 0;
    color: color-mix(in srgb, var(--wp--preset--color--noir) 60%, transparent);
}

@media (max-width: 781px) {
    .fle2026-centre-listing {
        grid-template-columns: 1fr;
    }
}