/* ==================================================
   ENTÊTES — MOTIFS DE FOND

   Les cercles et filets du slider, partagés par les trois
   entêtes : slider, simple, compact. C'est la signature du
   haut de page, elle ne dépend pas du bloc choisi.

   Le parent doit être positionné et rogner ce qui dépasse
   (position: relative; overflow: hidden) ; son contenu passe
   devant avec un z-index de 1.
================================================== */

/* Les entêtes écrits dans leur gabarit — fiche formation, agenda, blog,
   article, recherche, espace membre, 404 — portent la classe v-hero :
   elle leur donne le cadre que les trois blocs se donnent eux-mêmes. */
.v-hero {
    position: relative;
    overflow: hidden;
}

.v-hero > .container {
    position: relative;
    z-index: 1;
}

.v-hero-motifs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Le disque : grande tache pâle en haut à droite, largement débordante.
   C'est elle qui donne la profondeur au fond. */
.v-hero-motifs__disque {
    position: absolute;
    width: 820px;
    height: 820px;
    top: -380px;
    right: -240px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.09;
}

/* Les anneaux sont posés en grande partie hors du cadre : on n'en voit
   qu'un arc, et c'est cet arc qui fait le motif. Un cercle entièrement
   visible ferait une cible, pas une signature. */
.v-hero-motifs__anneau {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0.4;
}

.v-hero-motifs__anneau--1 {
    width: 1180px;
    height: 1180px;
    top: -700px;
    right: -420px;
}

.v-hero-motifs__anneau--2 {
    width: 760px;
    height: 760px;
    top: -430px;
    right: -120px;
    opacity: 0.32;
}

/* Le troisième entre par le bas à gauche, pour équilibrer. */
.v-hero-motifs__anneau--3 {
    width: 620px;
    height: 620px;
    bottom: -460px;
    left: -180px;
    opacity: 0.28;
}

/* Des cercles blancs ne se voient pas sur un fond clair : ils passent
   à la couleur de marque. */
.v-hero--clair .v-hero-motifs__disque {
    background: var(--v-violet-500);
}

.v-hero--clair .v-hero-motifs__anneau {
    border-color: var(--v-violet-500);
}