/* ===========================================================================
   WYCAN · LES FORMES
   À copier tel quel dans le child theme, et à charger après le CSS du site.

   Comment lire ce fichier
   -----------------------
   Une forme = un bloc. Chaque bloc est coupé en deux : la STRUCTURE (ce qui
   place les éléments) puis l'ANIMATION (ce qui bouge). On peut ne reprendre
   que l'une des deux.

   Deux règles qui expliquent l'écriture
   -------------------------------------
   1. Tous les sélecteurs sont préfixés par `.elementor`. Le style de base d'un
      conteneur Elementor pèse deux classes : une règle `.wy-bento` seule perd
      contre lui et la grille repasse en flex. Le préfixe met la règle à
      égalité, et comme ce fichier est chargé après, il gagne.
   2. Aucun sélecteur ne dépend de la structure (`>`, `:first-child`, un nom de
      balise). Chaque élément stylé porte sa classe, posée à la main dans
      Avancé › Classes CSS. C'est ce qui rend ces formes reproductibles quelle
      que soit la version d'Elementor, qui n'emboîte pas ses widgets pareil
      d'une version à l'autre.

   Les variables (--wy-gap-s, --wy-bg-carte, --wy-radius…) viennent du kit.
   Si le kit change, les formes suivent.
   =========================================================================== */

/* ===========================================================================
   1 · BENTO · grille de tuiles inégales
   ---------------------------------------------------------------------------
   Section        : rien
   Grille         : .wy-bento
   Une tuile      : .wy-bento-tuile (+ .wy-bento-large pour la grande)
   Dans la tuile  : .wy-bento-icone · .wy-bento-titre · .wy-bento-texte

   Le nombre de tuiles est libre : la grille se remplit toute seule. Une seule
   tuile porte .wy-bento-large, elle occupe deux colonnes sur deux rangées.
   =========================================================================== */
.elementor .wy-bento {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: minmax(160px, auto);
   gap: var(--wy-gap-s);
}
.elementor .wy-bento-tuile {
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 24px;
   border: 1px solid var(--wy-border);
   border-radius: var(--wy-radius);
   background-color: var(--wy-bg-carte);
}
.elementor .wy-bento-large {
   grid-column: span 2;
   grid-row: span 2;
   justify-content: space-between;
   gap: var(--wy-gap-s);
}
.elementor .wy-bento-icone {
   width: 40px;
   height: 40px;
   color: var(--wy-accent);
   flex: 0 0 auto;
}
.elementor .wy-bento-large .wy-bento-icone {
   width: 100%;
   max-width: 300px;
   height: auto;
}
.elementor .wy-bento-titre {
   margin: 0;
}
.elementor .wy-bento-texte {
   margin: 0;
}
@media (max-width: 1024px) {
   .elementor .wy-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media (max-width: 767px) {
   .elementor .wy-bento {
      grid-template-columns: minmax(0, 1fr);
   }
   .elementor .wy-bento-large {
      grid-column: span 1;
      grid-row: span 1;
   }
}

/* PAS D'ANIMATION AU SURVOL.
   Une tuile qui n'est pas cliquable ne réagit pas : un mouvement sans lien
   derrière fait chercher un clic qui n'existe pas. Si la tuile est un lien,
   on lui ajoute .wy-contour-anime, le liseré qui tourne, celui des cartes du
   site. C'est le seul survol de carte du site, et il le reste. */

/* ===========================================================================
   2 · VISUEL COLLANT · le dessin reste, les cartes défilent
   ---------------------------------------------------------------------------
   Deux colonnes  : .wy-sticky
   Colonne gauche : .wy-sticky-visuel   (elle se colle au défilement)
   Colonne droite : .wy-sticky-piste
   Une carte      : .wy-sticky-etape (+ les classes de carte du site)
   Dans la carte  : .wy-sticky-titre · .wy-sticky-texte
   =========================================================================== */
.elementor .wy-sticky {
   width: 100%;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--wy-gap-l);
   align-items: start;
}
.elementor .wy-sticky-visuel {
   position: sticky;
   inset-block-start: 120px;
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-s);
}
.elementor .wy-sticky-piste {
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-m);
}
.elementor .wy-sticky-etape {
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-xs);
}
.elementor .wy-sticky-titre,
.elementor .wy-sticky-texte {
   margin: 0;
}
@media (max-width: 767px) {
   .elementor .wy-sticky {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--wy-gap-m);
   }
   .elementor .wy-sticky-visuel {
      position: static;
   }
}

/* ANIMATION · la carte en face du regard s'éclaire, les autres restent en
   retrait. Piloté par le défilement, sans JavaScript. Sans le support des
   timelines de scroll, tout reste à pleine opacité, ce qui est correct. */
@supports (animation-timeline: view()) {
   @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
      .elementor .wy-sticky-etape {
         animation: wy-etape-active linear both;
         animation-timeline: view();
         animation-range: cover 15% cover 85%;
      }
   }
}
@keyframes wy-etape-active {
   0% {
      opacity: 0.45;
      border-color: var(--wy-border);
   }
   35%,
   65% {
      opacity: 1;
      border-color: var(--wy-border-2);
   }
   100% {
      opacity: 0.45;
      border-color: var(--wy-border);
   }
}

/* ===========================================================================
   3 · ÉTAPES, EN COLONNE
   ---------------------------------------------------------------------------
   C'est le stepper du site, retourné. Aucune nouvelle façon de dessiner une
   étape : les mêmes classes, le même numéro, le même filet. Une seule classe
   s'ajoute sur le conteneur pour changer le sens.

   Liste        : .wy-step .wy-step-vertical
   Une étape    : .wy-step-item
   Sa tête      : .wy-step-entete  (numéro .wy-step-numero + filet .wy-step-sep)
   Le milieu    : .wy-step-corps   (titre .wy-step-titre + texte)

   En colonne, le filet du stepper devient le trait vertical qui relie les
   numéros : c'est le même élément, il change juste de sens.
   =========================================================================== */
.elementor .wy-step-vertical {
   flex-direction: column;
   gap: 0;
   align-items: stretch;
}
.elementor .wy-step-vertical .wy-step-item {
   flex: 0 0 auto;
   flex-direction: row;
   align-items: stretch;
   gap: var(--wy-gap-m);
}
.elementor .wy-step-vertical .wy-step-entete {
   width: 62px;
   flex: 0 0 62px;
   flex-direction: column;
   gap: 12px;
   align-items: center;
}
.elementor .wy-step-vertical .wy-step-sep {
   width: 1px;
   height: auto;
   flex: 1 1 auto;
}
.elementor .wy-step-vertical .wy-step-corps {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-xs);
   padding-block-end: var(--wy-gap-m);
}
/* La dernière étape ne prolonge pas le trait : il n'y a rien après elle.
   C'est le seul endroit de cette forme qui regarde la position. */
.elementor .wy-step-vertical .wy-step-item:last-child .wy-step-sep {
   display: none;
}
.elementor .wy-step-vertical .wy-step-item:last-child .wy-step-corps {
   padding-block-end: 0;
}
/* En mobile, la colonne du numéro se resserre : à 62 px elle mangeait un
   sixième de l'écran et le texte tombait en colonne de trois mots. */
@media (max-width: 767px) {
   .elementor .wy-step-vertical .wy-step-item {
      gap: var(--wy-gap-s);
   }
   .elementor .wy-step-vertical .wy-step-entete {
      width: 44px;
      flex-basis: 44px;
   }
   .elementor .wy-step-vertical .wy-step-numero {
      width: 44px;
      height: 44px;
      font-size: 1.5rem;
   }
   .elementor .wy-step-vertical .wy-step-corps {
      padding-block-end: var(--wy-gap-s);
   }
}

/* ===========================================================================
   4 · PANNEAUX · des volets qui s'ouvrent au survol
   ---------------------------------------------------------------------------
   La rangée   : .wy-panneaux
   Un volet    : .wy-panneau
   Dedans      : .wy-panneau-icone · .wy-panneau-titre · .wy-panneau-texte

   Le nombre de volets est libre, de deux à six : les largeurs se répartissent
   toutes seules, il n'y a aucun pourcentage écrit. Au repos on voit l'icône et
   le titre ; le texte se déplie dans le volet ouvert, et lui seul.
   En dessous de 1025 px, les volets s'empilent et tout est visible : un survol
   n'existe pas sur un écran tactile.
   =========================================================================== */
.elementor .wy-panneaux {
   width: 100%;
   display: flex;
   gap: var(--wy-gap-xs);
}
.elementor .wy-panneau {
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 24px;
   border: 1px solid var(--wy-border);
   border-radius: var(--wy-radius);
   background-color: var(--wy-bg-carte);
}
.elementor .wy-panneau-icone {
   width: 64px;
   height: 64px;
   color: var(--wy-accent);
   flex: 0 0 auto;
}
.elementor .wy-panneau-titre,
.elementor .wy-panneau-texte {
   margin: 0;
}

@media (min-width: 1025px) {
   .elementor .wy-panneaux {
      min-height: 300px;
   }
   .elementor .wy-panneau {
      flex: 1 1 0;
      justify-content: flex-end;
   }
   /* Le volet ouvert prend la place, les autres se serrent. Aucune largeur
      n'est écrite : la même règle vaut pour deux volets comme pour six.
      Tout est sur la même durée et la même courbe, sinon l'ouverture part en
      trois temps et le mouvement paraît sec. */
   .elementor .wy-panneau {
      transition:
         flex-grow 620ms cubic-bezier(0.65, 0, 0.35, 1),
         border-color 620ms ease,
         background-color 620ms ease;
   }
   .elementor .wy-panneaux:hover .wy-panneau,
   .elementor .wy-panneaux:focus-within .wy-panneau {
      flex-grow: 0.7;
   }
   .elementor .wy-panneaux .wy-panneau:hover,
   .elementor .wy-panneaux .wy-panneau:focus-within {
      flex-grow: 2.8;
      border-color: var(--wy-border-2);
      background-color: var(--wy-bg-2);
   }
   /* L'icône est grande au repos et se range quand le volet s'ouvre : c'est
      elle qui occupe le vide, et elle le rend au texte. */
   .elementor .wy-panneau-icone {
      margin-block-end: auto;
      transition:
         width 620ms cubic-bezier(0.65, 0, 0.35, 1),
         height 620ms cubic-bezier(0.65, 0, 0.35, 1);
   }
   .elementor .wy-panneau:hover .wy-panneau-icone,
   .elementor .wy-panneau:focus-within .wy-panneau-icone {
      width: 40px;
      height: 40px;
   }
   /* Le texte est replié, pas masqué : une hauteur qui s'ouvre ne fait pas
      sauter la mise en page, et ne dépend pas de l'opacité, que les animations
      d'entrée pilotent déjà. La fermeture est aussi longue que l'ouverture,
      c'est ce qui manquait pour que le mouvement paraisse tenu. */
   .elementor .wy-panneau-texte {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      translate: 0 6px;
      transition:
         max-height 620ms cubic-bezier(0.65, 0, 0.35, 1),
         opacity 460ms ease,
         translate 620ms cubic-bezier(0.65, 0, 0.35, 1);
   }
   .elementor .wy-panneau:hover .wy-panneau-texte,
   .elementor .wy-panneau:focus-within .wy-panneau-texte {
      max-height: 14em;
      opacity: 1;
      translate: 0 0;
   }
}

/* Sous 1025 px les volets s'empilent. flex: 0 0 auto est obligatoire : en
   colonne, le flex: 1 1 0 du grand écran répartit la hauteur au lieu de la
   largeur, et les volets s'écrasent à quelques pixels, icône coupée. */
@media (max-width: 1024px) {
   .elementor .wy-panneaux {
      flex-direction: column;
   }
   .elementor .wy-panneau {
      flex: 0 0 auto;
   }
   .elementor .wy-panneau-icone {
      width: 44px;
      height: 44px;
   }
}

/* ===========================================================================
   5 · BANDEAU DE POINTS · la flèche qui suit la colonne survolée
   ---------------------------------------------------------------------------
   Le bandeau  : .wy-points
   La piste    : .wy-points-piste  (contient .wy-points-fleche)
   Une colonne : .wy-points-colonne (+ .wy-points-titre)

   Correction du 10/09/2026 : les positions étaient écrites en dur pour cinq
   colonnes (10, 30, 50, 70, 90 %). Avec quatre colonnes la flèche tombait
   entre deux. Le nombre de colonnes se lit maintenant en CSS et la position se
   calcule : (rang - 0,5) / nombre. Juste de deux à six colonnes.
   =========================================================================== */
.elementor .wy-points {
   --wy-cols: 4;
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(2):last-child) {
   --wy-cols: 2;
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(3):last-child) {
   --wy-cols: 3;
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(4):last-child) {
   --wy-cols: 4;
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(5):last-child) {
   --wy-cols: 5;
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(6):last-child) {
   --wy-cols: 6;
}
/* Le centrage passe par translate, pas par transform : les animations
   d'entrée posent transform: none sur ce qu'elles ont animé, et la flèche
   partait alors d'une demi-largeur sur la droite, sur toutes les colonnes.
   translate est une propriété à part, personne ne l'écrase. */
.elementor .wy-points-fleche {
   inset-inline-start: calc(100% * 0.5 / var(--wy-cols));
   translate: -50% 0;
   transform: none;
   transition: inset-inline-start 560ms cubic-bezier(0.65, 0, 0.35, 1);
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(1):hover) .wy-points-fleche {
   inset-inline-start: calc(100% * 0.5 / var(--wy-cols));
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(2):hover) .wy-points-fleche {
   inset-inline-start: calc(100% * 1.5 / var(--wy-cols));
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(3):hover) .wy-points-fleche {
   inset-inline-start: calc(100% * 2.5 / var(--wy-cols));
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(4):hover) .wy-points-fleche {
   inset-inline-start: calc(100% * 3.5 / var(--wy-cols));
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(5):hover) .wy-points-fleche {
   inset-inline-start: calc(100% * 4.5 / var(--wy-cols));
}
.elementor .wy-points:has(.wy-points-colonne:nth-child(6):hover) .wy-points-fleche {
   inset-inline-start: calc(100% * 5.5 / var(--wy-cols));
}
@media (prefers-reduced-motion: reduce) {
   .elementor .wy-points-fleche {
      transition: none;
   }
}

/* ===========================================================================
   LE REPÈRE DE SECTION DU CATALOGUE
   Le petit numéro orange en haut à gauche de chaque section de la page
   Sections. Il ne sert qu'à piocher : il n'a rien à faire sur un vrai site.
   =========================================================================== */
.elementor .wy-cat-badge {
   position: absolute;
   inset-block-start: 10px;
   inset-inline-start: 12px;
   z-index: 5;
   font-family: var(--wy-ff-text);
   font-size: 11px;
   letter-spacing: 1.4px;
   text-transform: uppercase;
   color: var(--wy-primary);
   opacity: 0.85;
   pointer-events: none;
}

/* ===========================================================================
   6 · INDEX · une liste de liens en grande typo, la vignette au survol
   ---------------------------------------------------------------------------
   La liste   : .wy-index
   Une ligne  : .wy-index-ligne   (un conteneur, cliquable si besoin)
   Dedans     : .wy-index-titre · .wy-index-meta · .wy-index-image

   La vignette vit dans sa propre ligne et se pose au-dessus des voisines au
   survol : aucune règle ne compte les lignes, on peut donc en mettre trois
   comme quinze. Sur écran tactile, la vignette reste cachée et la liste se lit
   comme une liste.
   =========================================================================== */
.elementor .wy-index {
   width: 100%;
   display: flex;
   flex-direction: column;
}
.elementor .wy-index-ligne {
   position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--wy-gap-s);
   align-items: baseline;
   justify-content: space-between;
   padding-block: 22px;
   border-block-start: 1px solid var(--wy-border);
}
/* Le titre glisse, pas la ligne : déplacer le padding fait sauter la hauteur
   et hacher le mouvement. Une translation ne coûte rien à la mise en page. */
.elementor .wy-index-titre {
   margin: 0;
   font-size: clamp(1.375rem, 0.9rem + 1.9vw, 2.25rem);
   line-height: 1.1;
   translate: 0 0;
   transition:
      translate 620ms cubic-bezier(0.65, 0, 0.35, 1),
      color 620ms ease;
}
.elementor .wy-index-meta {
   margin: 0;
}
.elementor .wy-index-image {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-end: 18%;
   z-index: 3;
   width: 260px;
   height: auto;
   border-radius: var(--wy-radius-s);
   opacity: 0;
   translate: 0 -50%;
   scale: 0.94;
   pointer-events: none;
   transition:
      opacity 420ms ease,
      scale 620ms cubic-bezier(0.65, 0, 0.35, 1),
      rotate 620ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* ANIMATION · le titre glisse et s'allume, la vignette se redresse.
   L'inclinaison alterne d'une ligne à l'autre : c'est le seul sélecteur qui
   compte les lignes, et c'est ce qui rend l'alternance automatique quand on
   duplique une ligne dans l'éditeur. */
.elementor .wy-index-ligne:nth-child(odd) .wy-index-image {
   rotate: -4deg;
}
.elementor .wy-index-ligne:nth-child(even) .wy-index-image {
   rotate: 4deg;
}
.elementor .wy-index-ligne:hover .wy-index-titre,
.elementor .wy-index-ligne:focus-within .wy-index-titre {
   color: var(--wy-primary);
}
.elementor .wy-index-ligne:hover .wy-index-titre,
.elementor .wy-index-ligne:focus-within .wy-index-titre {
   translate: 18px 0;
}
.elementor .wy-index-ligne:nth-child(odd):hover .wy-index-image,
.elementor .wy-index-ligne:nth-child(odd):focus-within .wy-index-image {
   opacity: 1;
   rotate: -2deg;
   scale: 1;
}
.elementor .wy-index-ligne:nth-child(even):hover .wy-index-image,
.elementor .wy-index-ligne:nth-child(even):focus-within .wy-index-image {
   opacity: 1;
   rotate: 2deg;
   scale: 1;
}
@media (max-width: 1024px), (hover: none) {
   .elementor .wy-index-image {
      display: none;
   }
}

/* ===========================================================================
   7 · PILE · des cartes qui s'empilent au défilement
   ---------------------------------------------------------------------------
   La pile   : .wy-pile
   Une carte : .wy-pile-carte
   Le numéro : .wy-pile-num

   Chaque carte se colle sous l'en-tête et la suivante vient la recouvrir. Il
   n'y a aucun décalage écrit : trois cartes ou six, le comportement est le
   même. Sous 1025 px les cartes s'empilent normalement, l'une après l'autre.
   =========================================================================== */
.elementor .wy-pile {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-m);
}
.elementor .wy-pile-carte {
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-xs);
   padding: clamp(24px, 3vw, 44px);
   border: 1px solid var(--wy-border);
   border-radius: var(--wy-radius);
   background-color: var(--wy-bg-carte);
}
.elementor .wy-pile-num {
   margin: 0;
   font-family: var(--wy-ff-titre);
   font-size: var(--wy-fs-text);
   letter-spacing: 2px;
   color: var(--wy-primary);
}
@media (min-width: 1025px) {
   .elementor .wy-pile-carte {
      position: sticky;
      inset-block-start: 140px;
      min-height: 260px;
   }
}

/* ===========================================================================
   8 · AVANT / APRÈS · le voile qui se retire
   ---------------------------------------------------------------------------
   Le cadre  : .wy-avap
   L'image du bas (l'après) : .wy-avap-apres
   L'image du dessus (l'avant) : .wy-avap-avant
   La légende : .wy-avap-note

   Les deux images se superposent, celle du dessus se retire au survol. Le
   cadre garde son format quelles que soient les images ; les deux doivent
   avoir le même rapport, sinon le décalage se voit.
   =========================================================================== */
.elementor .wy-avap {
   position: relative;
   overflow: hidden;
   width: 100%;
   aspect-ratio: 3 / 2;
   border: 1px solid var(--wy-border);
   border-radius: var(--wy-radius);
}
.elementor .wy-avap-apres,
.elementor .wy-avap-avant {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.elementor .wy-avap-avant {
   z-index: 2;
   clip-path: inset(0 0 0 0);
   transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor .wy-avap:hover .wy-avap-avant,
.elementor .wy-avap:focus-within .wy-avap-avant {
   clip-path: inset(0 100% 0 0);
}
.elementor .wy-avap-note {
   position: absolute;
   z-index: 3;
   inset-block-end: 16px;
   inset-inline-start: 16px;
   margin: 0;
   padding: 6px 14px;
   border-radius: 100px;
   background-color: color-mix(in srgb, var(--wy-bg) 78%, transparent);
   font-size: var(--wy-fs-text-sm);
   color: var(--wy-text);
}

/* ===========================================================================
   9 · ZIGZAG · visuel et texte, alternés
   ---------------------------------------------------------------------------
   Le bloc    : .wy-zigzag
   Une rangée : .wy-zigzag-ligne (+ .wy-zigzag-inverse une fois sur deux)
   Dedans     : .wy-zigzag-visuel · .wy-zigzag-corps

   L'alternance se pose à la main, avec .wy-zigzag-inverse : c'est plus long à
   monter qu'un :nth-child, mais on voit dans l'éditeur ce qui se passe, et
   déplacer une rangée ne casse pas le rythme.
   =========================================================================== */
.elementor .wy-zigzag {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-l);
}
.elementor .wy-zigzag-ligne {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--wy-gap-l);
   align-items: center;
}
.elementor .wy-zigzag-visuel {
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-xs);
}
.elementor .wy-zigzag-inverse .wy-zigzag-visuel {
   order: 2;
}
.elementor .wy-zigzag-corps {
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-xs);
}
@media (max-width: 767px) {
   .elementor .wy-zigzag-ligne {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--wy-gap-s);
   }
   .elementor .wy-zigzag-inverse .wy-zigzag-visuel {
      order: 0;
   }
}

/* ===========================================================================
   10 · ONGLETS
   ---------------------------------------------------------------------------
   Le bloc     : .wy-onglets   (widget Onglets d'Elementor)
   Un onglet   : .wy-onglet
   Un panneau  : .wy-onglet-panneau

   Le widget gère l'ouverture. Le CSS ne fait que l'habiller : filet sous la
   rangée d'onglets, trait orange sous l'onglet actif, panneau sans cadre.
   =========================================================================== */
.elementor .wy-onglets {
   width: 100%;
}
.elementor .wy-onglet {
   position: relative;
   padding: 12px 4px;
   margin-inline-end: 28px;
   border: 0;
   background: none;
   font-family: var(--wy-ff-titre);
   font-size: var(--wy-fs-h3);
   color: var(--wy-accent);
   cursor: pointer;
   transition: color var(--wy-transition) ease;
}
.elementor .wy-onglet::after {
   content: "";
   position: absolute;
   inset-block-end: -1px;
   inset-inline-start: 0;
   width: 100%;
   height: 2px;
   background-color: var(--wy-primary);
   transform-origin: left center;
   scale: 0 1;
   transition: scale 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor .wy-onglet:hover,
.elementor .wy-onglet[aria-selected="true"] {
   color: var(--wy-text);
}
.elementor .wy-onglet[aria-selected="true"]::after {
   scale: 1 1;
}
.elementor .wy-onglet-panneau {
   padding-block-start: var(--wy-gap-m);
   display: flex;
   flex-direction: column;
   gap: var(--wy-gap-xs);
}