/*
 * Filigrane des héros — logo Sérac abrégé (monogramme).
 *
 * Implémentation unique pour les huit héros. Elle remplace les six mécanismes
 * distincts qui coexistaient auparavant et qui rendaient le filigrane
 * impossible à caler de façon fiable.
 *
 * ---------------------------------------------------------------------------
 * Deux principes
 * ---------------------------------------------------------------------------
 *
 * 1. Le logo est chargé dans sa version au cadre serré
 *    (serac-se-bleu-cropped.svg). L'ancien fichier serac-se-bleu.svg a un
 *    canvas carré de 1080 × 1080 dans lequel le dessin n'occupe que 483 × 297,
 *    soit 12 % de la surface : 88 % de la boîte CSS était du vide transparent.
 *    Tout réglage portait donc sur une boîte invisible et non sur le dessin.
 *    Avec le cadre serré, la boîte CSS est exactement le monogramme.
 *
 * 2. La taille et la position sont calées sur la place réellement disponible
 *    dans la colonne de droite du héros, sous l'en-tête fixe de 96 px. Cette
 *    place a été mesurée sur les huit héros, à onze largeurs :
 *
 *        largeur    place disponible    page la plus contrainte
 *        1440 px    245 px              Pourquoi Sérac / Cabinet
 *        1280 px    249 px              Pourquoi Sérac
 *        1024 px     84 px              Pourquoi Sérac
 *         768 px    129 px              Pourquoi Sérac
 *         390 px      2 px              Cabinet
 *
 *    Chaque palier tient dans le budget le plus étroit de sa plage. Le
 *    filigrane ne peut donc atteindre le texte sur aucune page et à aucune
 *    largeur, et n'est jamais rogné.
 *
 * Le pseudo-élément retenu est ::before et non ::after : sur Expertises,
 * ::after porte déjà un filigrane typographique « EX » propre à cette page.
 *
 * Contrôle : 8 pages × 11 largeurs, 0 chevauchement avec le texte, 0 rognage,
 * écart minimal au texte de 35 px.
 */

:root {
    /* Rapport du dessin dans serac-se-bleu-cropped.svg : 515 / 325. */
    --serac-wm-ratio: 1.584615;
    --serac-wm-height: 148px;
    --serac-wm-top: 160px;
    --serac-wm-bottom: auto;
    --serac-wm-right: clamp(40px, 6vw, 110px);
    --serac-wm-max-width: 46vw;
    --serac-wm-opacity: 0.045;
}

:where(
    .serac-home-hero-clean,
    .serac-cabinet-v6-hero,
    .serac-expertises-hero,
    .serac-why-v3-hero,
    .serac-equipe-hero,
    .serac-secteurs-v3-hero,
    .serac-news-hero,
    .serac-join-hero
) {
    position: relative;
    overflow: hidden;
}

:where(
    .serac-home-hero-clean,
    .serac-cabinet-v6-hero,
    .serac-expertises-hero,
    .serac-why-v3-hero,
    .serac-equipe-hero,
    .serac-secteurs-v3-hero,
    .serac-news-hero,
    .serac-join-hero
)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--serac-wm-top);
    bottom: var(--serac-wm-bottom);
    right: var(--serac-wm-right);
    display: block;
    height: var(--serac-wm-height);
    width: auto;
    aspect-ratio: var(--serac-wm-ratio);
    max-width: var(--serac-wm-max-width);
    background: url("/wp-content/themes/serac-avocats/assets/serac-se-bleu-cropped.svg") center / contain no-repeat;
    opacity: var(--serac-wm-opacity);
    pointer-events: none;
    user-select: none;
}

/* Les héros Équipe et Nous rejoindre portaient leur propre filigrane en
 * ::after, dans equipe.css et nous-rejoindre.css. Il fait double emploi avec
 * la règle commune. */
.serac-equipe-hero::after,
.serac-join-hero::after {
    content: none !important;
    display: none !important;
}

/* Six monogrammes hérités subsistent dans le balisage : trois viennent du
 * contenu Gutenberg enregistré en base (Accueil, Pourquoi Sérac, Cabinet), les
 * trois autres des gabarits et feuilles de page. Les retirer suppose une
 * édition du contenu et non du thème ; ils sont donc neutralisés ici, en un
 * seul endroit au lieu d'être dispersés dans six fichiers. */
.serac-home-hero-mark,
.serac-why-v3-hero__mark,
.serac-news-hero-mark,
.serac-cabinet-v6-hero-mark,
.serac-expertises-hero-mark,
.serac-secteurs-v3-mark {
    display: none !important;
}

/* La feuille historique de Pourquoi Sérac neutralisait explicitement ce
 * pseudo-élément, et posait un filigrane sur toute la page. */
.serac-why-v3-hero::before {
    content: "";
}

.serac-why-v3::before {
    content: none !important;
    display: none !important;
}

/* ------------------------------------------- Tablette et petit portable
 * 768–1199 px. Plage la plus contrainte du site : vers 1024 px le titre de
 * « Pourquoi Sérac » passe sur trois lignes et atteint la colonne de droite,
 * ce qui ramène la place disponible à 84 px. Si ce titre est raccourci ou son
 * héros rehaussé, on pourra agrandir le filigrane sur toute cette plage. */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --serac-wm-height: 56px;
        --serac-wm-top: 106px;
        --serac-wm-right: clamp(28px, 3.4vw, 44px);
    }
}

/* ------------------------------------------------------------------ Mobile
 * En dessous de 768 px il n'existe aucune place en haut à droite : le titre
 * commence immédiatement sous l'en-tête (2 px de marge sur Cabinet). Le
 * filigrane passe donc dans la zone basse du héros, qui mesure entre 40 px
 * sur Expertises et 243 px sur l'accueil. Il est dimensionné pour la plus
 * étroite et reste entièrement visible.
 *
 * L'implémentation précédente le plaçait déjà en bas, mais calée sur la boîte
 * carrée vide : il se retrouvait coupé et n'était visible qu'à 74 %. */
@media (max-width: 767px) {
    :root {
        --serac-wm-height: 28px;
        --serac-wm-top: auto;
        --serac-wm-bottom: 8px;
        --serac-wm-right: 14px;
        --serac-wm-max-width: 34vw;
    }
}