/* Le style "identité visuelle" ci-dessous (typo H1, spacing) n'est
   appliqué que sur les usages "par défaut" du bloc, marqués par la classe
   .section-titre-nav--default (parts/hero-titre.html,
   templates/archive-actualite.html). Tous les autres usages
   (single-centre-fle.php, taxonomy-region/ville.php, templates/taxonomy.php,
   templates/archive-emploi/stage/evenement/formation-prof.php) n'utilisent
   le bloc que pour sa structure et gardent le style commun de
   navigation.css (typo/graisse partagées avec les fiches centre/taxonomie).
   Le style de navigation (pastilles, sous-items, etc.) vit entièrement
   dans assets/css/navigation.css, quel que soit le bloc/contexte qui
   l'utilise — ce fichier ne contient que le titre et la structure du bloc. */

/* padding-block scindé : homepage vs autres pages (parts/hero-titre.html est
   partagé par templates/page.html pour les deux). La règle nue sert de
   fallback aux contextes hors page (templates/archive-actualite.html…). */
.section-titre-nav--default {
    padding-block: clamp(2rem, 4vw, 4rem);
    /* Hauteur des 3 rectangles décoratifs du titre (cas 3 lignes ou +).
       --h1-band-h   : rectangle 1 (::before)  + défaut des 2 autres si non définis
       --h1-band-h-2 : rectangle 2 (::after)
       --h1-band-h-3 : rectangle 3 (span .fle2026-h1-band)
       var(--h1-lh) = 1 ligne (posée par view.js) → calc(var(--h1-lh) * 1.6) pour
       rester proportionnel, ou une valeur fixe comme ici. */
    --h1-band-h:   200px;
    --h1-band-h-2: 300px;
    --h1-band-h-3: 300px;
}

/* Page d'accueil */
body.home .section-titre-nav--default {
    padding-block: clamp(2rem, 4vw, 4rem);
}

/* Autres pages Gutenberg */
body.page:not(.home) .section-titre-nav--default {
    padding-block: clamp(2rem, 4vw, 4rem);
}

/* Pages Gutenberg : supprime le margin-bottom: 1.75em que le core
   (wp-block-library) pose sur :where(.wp-block-columns) sous le titre. */
body.page:not(.home) .section-titre-nav--default .wp-block-columns {
    margin-bottom: 0;
}

/* Padding latéral minimum en mobile — réutilise le padding global du thème
   (useRootPaddingAwareAlignments dans theme.json), déjà utilisé ailleurs
   (ex: templates/taxonomy.php) plutôt qu'une valeur d'espacement propre. */
@media (max-width: 781px) {
    .section-titre-nav--default {
        padding-inline: var(--wp--style--root--padding-right);
    }
}

.section-titre-nav {
    overflow: visible;
}

/* Permettre à la bande de déborder */
.section-titre-nav .wp-block-columns,
.section-titre-nav .wp-block-column:first-child {
    overflow: visible;
}

/* Contexte de positionnement pour la bande décorative */
.section-titre-nav .wp-block-column:first-child {
    position: relative;
    z-index: 0;
}

/* Bande rose inclinée derrière le titre */
/* .section-titre-nav .wp-block-column:first-child::before {
    content: '';
    position: absolute;
    inset: -8% -4%;
    background: var(--wp--preset--color--rouge-30);
    transform: rotate(-3deg);
    z-index: 0;
} */

/* ── Titre sur 3 lignes ou plus (Pages / Pages Répertoire) ────────────────────
   view.js : injecte le span .fle2026-h1-band ET pose la classe .has-h1-bands
   sur le H1 (les deux retirés en dessous de 3 lignes).
   À 1 ou 2 lignes → rien ne change (components.css garde la main).
   var(--h1-lh) = hauteur d'une ligne, posée par view.js.
   Éditeur : pas de view.js → seulement les 2 pseudo-bandes d'origine. */

/* Rectangle 3 — le span injecté */
.fle2026-h1-band {
    position: absolute;
    z-index: 0;                       /* sous le texte du H1 */
    pointer-events: none;
    background: color-mix(in srgb, var(--wp--preset--color--rouge) 30%, transparent);
    left: -20%;
    width: 155%;
    height: var(--h1-band-h-3, var(--h1-band-h, 200px));
    transform: rotate(-1.4deg);
}

/* Rectangles 1 & 2 — repositionnement des 2 pseudo-bandes de components.css,
   UNIQUEMENT quand le titre fait 3 lignes ou plus (classe .has-h1-bands).
   Le préfixe body.page assure de passer devant components.css.
   Édite librement top / bottom / left / width / height / transform. */
body.page .section-titre-nav--default h1.has-h1-bands::before {
    bottom: auto;
    left: -10%;
    height: var(--h1-band-h, 200px);
    transform: rotate(-2.5deg);
}
body.page .section-titre-nav--default h1.has-h1-bands::after {
    top: 40%;
    bottom: auto;
    left: 25%;
    width: 120%;
    height: var(--h1-band-h-2, var(--h1-band-h, 200px));
}

/* ── En-tête « Page Carte » (parts/hero-titre-carte.html) ────────────────────
   Une seule bande décorative derrière le titre (::after supprimé), plus haute.
   view.js n'agit pas sur cet en-tête (exclu via :not(.hero-titre-carte)).
   Édite librement top / bottom / left / width / height / transform. */
body.page .section-titre-nav--default.hero-titre-carte h1::after {
    content: none;
}
body.page .section-titre-nav--default.hero-titre-carte h1::before {
    top: -20%;
    bottom: auto;
    left: -8%;
    width: 80%;
    height: 300px;              /* bande unique plus haute */
    transform: rotate(-2deg);
}

/* H1 au-dessus de la bande */
.section-titre-nav--default .wp-block-column:first-child .wp-block-post-title {
    position: relative;
    z-index: 1;
    font-family: var(--wp--preset--font-family--cabinet-grotesk);
    font-size: var(--wp--preset--font-size--display-large);
    font-weight: 900;
    line-height: 0.95;
    color: var(--wp--preset--color--noir);
    margin: 0;
}

/* En dessous de 480px, --hero (min 4rem) reste trop grand pour la colonne
   disponible : des mots comme "français" dépassent la largeur et se
   coupent en plein milieu faute d'espace pour wrapper au mot suivant. */
@media (max-width: 480px) {
    .section-titre-nav--default .wp-block-column:first-child .wp-block-post-title {
        font-size: 3rem;
    }
}