/* =============================================================================
   CERCLES DÉCORATIFS DU HERO — mon courtier frontalier.ch
   Remplace ton ancien bloc .mcf-section-hero::before/::after dans WPCodeBox.

   IDÉE : la technique (ring en dégradé via mask) ne bouge plus. Tout ce qui
   VARIE d'un hero à l'autre (couleur, taille, position) est piloté par des
   variables. Pour décorer un hero : on ajoute une classe. Pour ajuster : on
   surcharge une variable.
   ============================================================================= */


/* 1. RÉGLAGES PAR DÉFAUT (orange, en haut à droite) -------------------------- */
.mcf-section-hero{
  position: relative;   /* indispensable pour positionner les cercles          */
  overflow: hidden;     /* on ne voit QUE l'arc qui déborde du coin            */
  isolation: isolate;   /* contexte d'empilement propre → z-index maîtrisé     */

  /* ——— Dégradé du ring (variable de ta collection Oxygen MCF) ——— */
  --ring-gradient: var(--lineargradientorange90, linear-gradient(90deg,#f8b46d,#ff8a5e));

  /* ——— Géométrie ——— */
  --ring-1-size: 520px;   /* grand cercle  (plus grand = on en voit moins)     */
  --ring-2-size: 380px;   /* petit cercle                                      */
  --ring-1-width: 8px;    /* épaisseur du trait du grand cercle                */
  --ring-2-width: 4px;    /* épaisseur du trait du petit cercle                */

  /* ——— Centre COMMUN des 2 cercles, mesuré depuis le coin ——— */
  /* Plus ces valeurs sont petites, plus le centre est proche du coin, donc    */
  /* plus les cercles sortent de l'écran → on ne voit qu'un arc.               */
  --ring-cy: 40px;        /* distance du centre depuis le haut                 */
  --ring-cx: 60px;        /* distance du centre depuis le bord droit (ou gauche)*/
}


/* 2. LE MOTEUR (ne pas toucher) ---------------------------------------------- */
.mcf-section-hero::before,
.mcf-section-hero::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;          /* DERRIÈRE tout le contenu, quoi qu'Oxygen impose */
  border: 0 solid transparent;
  /* le ring : un dégradé dont seul le contour reste visible grâce au masque    */
  background: var(--ring-gradient) border-box;
  -webkit-mask:
     linear-gradient(#fff 0 0) padding-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Position calculée à partir du CENTRE → les 2 cercles restent concentriques  */
/* automatiquement, quelle que soit leur taille.                              */
.mcf-section-hero::before{    /* grand cercle */
  width: var(--ring-1-size); height: var(--ring-1-size);
  border-width: var(--ring-1-width);
  top:   calc(var(--ring-cy) - var(--ring-1-size) / 2);
  right: calc(var(--ring-cx) - var(--ring-1-size) / 2);
}
.mcf-section-hero::after{     /* petit cercle */
  width: var(--ring-2-size); height: var(--ring-2-size);
  border-width: var(--ring-2-width);
  top:   calc(var(--ring-cy) - var(--ring-2-size) / 2);
  right: calc(var(--ring-cx) - var(--ring-2-size) / 2);
}


/* 3. MODIFICATEURS — à ajouter en classe sur la section ---------------------- */

/* 3a. Couleur BLEUE (dégradé bleu de ta collection Oxygen) */
.mcf-section-hero--bleu{
  --ring-gradient: var(--lineargradientblue135, linear-gradient(135deg,#1f49b6,#4875d8));
}

/* 3b. Cercles à GAUCHE au lieu de droite */
.mcf-section-hero--left::before,
.mcf-section-hero--left::after{ right: auto; }
.mcf-section-hero--left::before{ left: calc(var(--ring-cx) - var(--ring-1-size) / 2); }
.mcf-section-hero--left::after{  left: calc(var(--ring-cx) - var(--ring-2-size) / 2); }

/* 3c. Cercles BLANCS translucides pour fond foncé (sections bleues) */
.mcf-section-hero--sur-fonce{
  --ring-gradient: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
}

/* 3d. Cercles centrés VERTICALEMENT (au milieu de la section, pas en haut) */
/*     Se combine avec le côté (droite par défaut, ou --left).              */
.mcf-section-hero--middle::before{ top: calc(50% - var(--ring-1-size) / 2); }
.mcf-section-hero--middle::after{  top: calc(50% - var(--ring-2-size) / 2); }


/* 4. CONTENU TOUJOURS DEVANT — les 2 anneaux passent DERRIÈRE tout le contenu */
/*    (sinon, à z-index égal, ::after peut repasser devant une carte)          */
.mcf-section-hero > *{ position: relative; z-index: 1; }


/* 5. RESPONSIVE -------------------------------------------------------------- */
/* Tablette : remonter les cercles pour ne pas chevaucher le titre.            */
/* Lever : --ring-cy (plus petit/négatif = plus haut). --ring-cx pour décaler. */
@media (max-width: 1119px){
  .mcf-section-hero{ --ring-cy: -40px; }
}

@media (max-width: 1023px){
  .mcf-section-hero::before,
  .mcf-section-hero::after{ display: none; }
}


/* =============================================================================
   CERCLES ORANGES DÉCORATIFS SUR UN ENCART — mon courtier frontalier.ch
   Snippet CSS WPCodeBox (site-wide). Classe dédiée, INDÉPENDANTE du hero.

   Deux arcs concentriques oranges, rognés par les coins arrondis de la carte.
   NE touche PAS au border-radius : l'overflow:hidden clippe les arcs EN
   respectant l'arrondi de l'encart (le radius est préservé).

   Usage : ajoute la classe « mcf-encart--cercles » sur ta carte.
   ============================================================================= */

.mcf-encart--cercles{
  position: relative;
  overflow: hidden;            /* rogne les arcs en suivant le border-radius */

  /* ——— réglages pilotables ——— */
  --ring-gradient: var(--lineargradientorange90, linear-gradient(90deg,#f8b46d,#ff8a5e));
  --ring-1-size: 520px;        /* grand anneau (petit car un encart < un hero) */
  --ring-2-size: 380px;        /* petit anneau */
  --ring-1-width: 6px;
  --ring-2-width: 3px;
  --ring-cx: 30px;             /* centre commun, depuis le coin haut-droit */
  --ring-cy: 24px;
}

/* le moteur : anneau = dégradé dont seul le contour reste (mask) */
.mcf-encart--cercles::before,
.mcf-encart--cercles::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: 0 solid transparent;
  background: var(--ring-gradient) border-box;
  -webkit-mask:
     linear-gradient(#fff 0 0) padding-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* positions calculées par le CENTRE → les 2 anneaux restent concentriques */
.mcf-encart--cercles::before{      /* grand */
  width: var(--ring-1-size); height: var(--ring-1-size);
  border-width: var(--ring-1-width);
  top:   calc(var(--ring-cy) - var(--ring-1-size) / 2);
  right: calc(var(--ring-cx) - var(--ring-1-size) / 2);
}
.mcf-encart--cercles::after{       /* petit */
  width: var(--ring-2-size); height: var(--ring-2-size);
  border-width: var(--ring-2-width);
  top:   calc(var(--ring-cy) - var(--ring-2-size) / 2);
  right: calc(var(--ring-cx) - var(--ring-2-size) / 2);
}

/* contenu de l'encart devant les cercles */
.mcf-encart--cercles > *{ position: relative; z-index: 1; }

/* variante : cercles en haut à GAUCHE */
.mcf-encart--cercles.is-left::before,
.mcf-encart--cercles.is-left::after{ right: auto; }
.mcf-encart--cercles.is-left::before{ left: calc(var(--ring-cx) - var(--ring-1-size) / 2); }
.mcf-encart--cercles.is-left::after{  left: calc(var(--ring-cx) - var(--ring-2-size) / 2); }