body.arc-center-gate-open {
  overflow: hidden !important;
}


/* =========================================================
   ROOT
========================================================= */

#arc-center-gate-root {
  position: relative;
  z-index: 999999;
}


.arc-center-gate[hidden] {
  display: none !important;
}


.arc-center-gate,
.arc-center-gate *,
.arc-header-switcher,
.arc-header-switcher *,
.arc-center-card,
.arc-center-card *,
.arc-change-center-btn {
  font-family: 'Outfit', Arial, sans-serif !important;
}


/* =========================================================
   MODALE
========================================================= */

.arc-center-gate {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #efefef;
  overflow-y: auto;
  padding: 28px 20px 52px;
}


.arc-center-gate__inner {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}


/* =========================================================
   TITRE
========================================================= */

.arc-center-gate__title {
  max-width: 720px;
  margin: 8px 0 30px;
  color: #062a68;
  font-size: clamp(30px, 5.6vw, 64px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}


/* =========================================================
   GROUPES
========================================================= */

.arc-center-gate__groups {
  border-top: 1px solid rgba(6, 42, 104, 0.12);
  border-bottom: 1px solid rgba(6, 42, 104, 0.12);
}


.arc-center-gate__group {
  margin: 0;
  border-bottom: 1px solid rgba(6, 42, 104, 0.08);
}


.arc-center-gate__group:last-child {
  border-bottom: 0;
}


/* =========================================================
   SUMMARY PAYS
========================================================= */

.arc-center-gate__group summary {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;

  padding: 20px 18px !important;

  color: #021d4c !important;
  background: rgba(6, 42, 104, 0.035) !important;

  font-size: initial !important;
  font-weight: initial !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;

  transition:
    background 0.2s ease,
    padding 0.2s ease;
}


.arc-center-gate__group summary::-webkit-details-marker {
  display: none;
}


.arc-center-gate__group summary:hover {
  background: rgba(6, 42, 104, 0.075) !important;
}


.arc-center-gate__group[open] summary {
  background: rgba(6, 42, 104, 0.09) !important;
}


/* =========================================================
   FLÈCHE
========================================================= */

.arc-center-gate__group summary::after {
  content: '';

  width: 9px;
  height: 9px;

  flex: none;

  border-right: 1.8px solid #dc0000;
  border-bottom: 1.8px solid #dc0000;

  transform: rotate(45deg);

  transition: transform 0.2s ease;
}


.arc-center-gate__group[open] summary::after {
  transform:
    rotate(-135deg)
    translate(-1px, -1px);
}


/* =========================================================
   PAYS
========================================================= */

.arc-center-gate__country {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 16px;
}


.arc-center-gate__country-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


/* =========================================================
   DRAPEAUX RONDS
========================================================= */

.arc-center-gate__country-flag {
  position: relative;

  flex: 0 0 auto;

  display: block;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  overflow: hidden;

  border: 3px solid #ffffff;

  box-shadow:
    0 0 0 1px rgba(6, 42, 104, 0.12),
    0 5px 14px rgba(6, 42, 104, 0.12);
}


/* =========================================================
   FRANCE
========================================================= */

.arc-center-gate__country-flag[data-country="fr"] {
  background:
    linear-gradient(
      90deg,

      #1b3f8b 0%,
      #1b3f8b 33.333%,

      #ffffff 33.333%,
      #ffffff 66.666%,

      #e32235 66.666%,
      #e32235 100%
    );
}


/* =========================================================
   BELGIQUE
========================================================= */

.arc-center-gate__country-flag[data-country="be"] {
  background:
    linear-gradient(
      90deg,

      #111111 0%,
      #111111 33.333%,

      #f5d323 33.333%,
      #f5d323 66.666%,

      #d82235 66.666%,
      #d82235 100%
    );
}


/* =========================================================
   ALLEMAGNE
========================================================= */

.arc-center-gate__country-flag[data-country="de"] {
  background:
    linear-gradient(
      180deg,

      #111111 0%,
      #111111 33.333%,

      #d32635 33.333%,
      #d32635 66.666%,

      #f3ce2b 66.666%,
      #f3ce2b 100%
    );
}


/* =========================================================
   MAROC
========================================================= */

.arc-center-gate__country-flag[data-country="ma"] {
  background: #c52236;
}


/* =========================================================
   MARTINIQUE
   Rouge / Vert / Noir
========================================================= */

.arc-center-gate__country-flag[data-country="mq"] {
  background:
    linear-gradient(
      180deg,

      #159447 0%,
      #159447 50%,

      #111111 50%,
      #111111 100%
    );
}


/*
 * Triangle rouge du drapeau Martiniquais
 */

.arc-center-gate__country-flag[data-country="mq"]::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 58%;
  height: 100%;

  background: #d82035;

  clip-path:
    polygon(
      0 0,
      100% 50%,
      0 100%
    );
}


/* =========================================================
   NOM PAYS
========================================================= */

.arc-center-gate__country-name {
  display: block;

  color: #021d4c !important;

  font-family:
    'Outfit',
    Arial,
    sans-serif !important;

  font-size:
    clamp(
      21px,
      3vw,
      31px
    ) !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    -0.035em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   COMPTEUR CENTRES
========================================================= */

.arc-center-gate__country-count {
  display: block;

  color:
    rgba(
      6,
      42,
      104,
      0.48
    ) !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.16em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   LISTE CENTRES
========================================================= */

.arc-center-gate__list {
  position: relative;

  display: grid;

  gap: 0 !important;

  padding:
    8px
    18px
    24px
    72px !important;
}


/*
 * Ligne verticale hiérarchique
 */

.arc-center-gate__list::before {
  content: '';

  position: absolute;

  left: 36px;
  top: 5px;
  bottom: 25px;

  width: 1px;

  background:
    rgba(
      6,
      42,
      104,
      0.11
    );
}


/* =========================================================
   CENTRE
========================================================= */

.arc-center-gate__center,
body .arc-center-gate__center,
.elementor .arc-center-gate__center {

  -webkit-appearance:
    none !important;

  appearance:
    none !important;

  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    14px
    0 !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(
      6,
      42,
      104,
      0.08
    ) !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  text-align:
    left !important;

  cursor:
    pointer !important;
}


.arc-center-gate__center:last-child {
  border-bottom: 0 !important;
}


/* =========================================================
   PETIT POINT DEVANT CENTRE
========================================================= */

.arc-center-gate__center::before {
  content: '';

  position: absolute;

  left: -40px;
  top: 24px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(
      6,
      42,
      104,
      0.25
    );

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.arc-center-gate__center:hover::before,
.arc-center-gate__center.is-selected::before {
  background: #dc0000;

  transform:
    scale(1.5);
}


/* =========================================================
   NOM CENTRE
========================================================= */

.arc-center-gate__center-name {
  display: block;

  color:
    #12366f !important;

  font-size:
    clamp(
      18px,
      2.2vw,
      25px
    ) !important;

  font-weight:
    500 !important;

  line-height:
    1.02;

  letter-spacing:
    -0.04em;

  text-transform:
    uppercase;

  transition:
    color
    0.18s ease;
}


.arc-center-gate__center:hover
.arc-center-gate__center-name,

.arc-center-gate__center:focus-visible
.arc-center-gate__center-name,

.arc-center-gate__center.is-selected
.arc-center-gate__center-name {

  color:
    #dc0000 !important;
}


/* =========================================================
   META CENTRE
========================================================= */

.arc-center-gate__center-meta {
  display: block;

  margin-top:
    4px;

  color:
    rgba(
      6,
      42,
      104,
      0.48
    ) !important;

  font-size:
    10px !important;

  font-weight:
    500;

  line-height:
    1.25;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  transition:
    color
    0.18s ease;
}


.arc-center-gate__center:hover
.arc-center-gate__center-meta,

.arc-center-gate__center:focus-visible
.arc-center-gate__center-meta,

.arc-center-gate__center.is-selected
.arc-center-gate__center-meta {

  color:
    rgba(
      220,
      0,
      0,
      0.78
    );
}


.arc-center-gate__center:focus-visible {
  outline:
    none !important;
}


/* =========================================================
   HEADER SWITCHER
========================================================= */

.arc-header-switcher,
body .arc-header-switcher,
.elementor .arc-header-switcher {

  display:
    inline-grid !important;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    ) !important;

  align-items:
    stretch !important;

  min-height:
    38px !important;

  max-width:
    348px !important;

  width:
    100% !important;

  background:
    #131923 !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    ) !important;

  box-shadow:
    inset
    0
    -1px
    0
    rgba(
      255,
      255,
      255,
      0.05
    ) !important;

  overflow:
    hidden !important;
}


/* =========================================================
   LABEL HEADER
========================================================= */

.arc-header-switcher__label {

  display:
    inline-flex !important;

  align-items:
    center !important;

  padding:
    0
    12px !important;

  background:
    #252d39 !important;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


/* =========================================================
   BOUTON HEADER
========================================================= */

.arc-header-switcher__button,
body .arc-header-switcher__button,
.elementor .arc-header-switcher__button {

  -webkit-appearance:
    none !important;

  appearance:
    none !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  gap:
    9px !important;

  padding:
    0
    12px !important;

  border:
    0 !important;

  background:
    #131923 !important;

  color:
    #ffffff !important;

  text-align:
    left !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;
}


.arc-header-switcher__button:hover,
.arc-header-switcher__button:focus-visible {

  background:
    #18202c !important;

  outline:
    none !important;
}


/* =========================================================
   DRAPEAU HEADER
========================================================= */

.arc-header-switcher__flag {

  flex:
    none;

  width:
    13px;

  height:
    13px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  background:
    rgba(
      255,
      255,
      255,
      0.2
    );

  overflow:
    hidden;
}


/* France */

.arc-header-switcher[
  data-arc-country-code="fr"
]
.arc-header-switcher__flag,

.arc-center-card[
  data-arc-country-code="fr"
]
.arc-center-card__eyebrow::after {

  background:
    linear-gradient(
      90deg,

      #2447a8
      0
      33.33%,

      #ffffff
      33.33%
      66.66%,

      #e63a47
      66.66%
      100%
    );
}


/* Belgique */

.arc-header-switcher[
  data-arc-country-code="be"
]
.arc-header-switcher__flag,

.arc-center-card[
  data-arc-country-code="be"
]
.arc-center-card__eyebrow::after {

  background:
    linear-gradient(
      90deg,

      #121212
      0
      33.33%,

      #f3d232
      33.33%
      66.66%,

      #d72b3f
      66.66%
      100%
    );
}


/* Allemagne */

.arc-header-switcher[
  data-arc-country-code="de"
]
.arc-header-switcher__flag,

.arc-center-card[
  data-arc-country-code="de"
]
.arc-center-card__eyebrow::after {

  background:
    linear-gradient(
      180deg,

      #151515
      0
      33.33%,

      #c62c3a
      33.33%
      66.66%,

      #f3d232
      66.66%
      100%
    );
}


/* Maroc */

.arc-header-switcher[
  data-arc-country-code="ma"
]
.arc-header-switcher__flag,

.arc-center-card[
  data-arc-country-code="ma"
]
.arc-center-card__eyebrow::after {

  background:
    #c5343d;
}


/* =========================================================
   MARTINIQUE — HEADER / CARTE
========================================================= */

.arc-header-switcher[
  data-arc-country-code="mq"
]
.arc-header-switcher__flag,

.arc-center-card[
  data-arc-country-code="mq"
]
.arc-center-card__eyebrow::after {

  background:
    linear-gradient(
      180deg,

      #159447
      0%,

      #159447
      50%,

      #111111
      50%,

      #111111
      100%
    );
}


/*
 * Triangle rouge approximatif pour le petit
 * drapeau du header.
 */

.arc-header-switcher[
  data-arc-country-code="mq"
]
.arc-header-switcher__flag {

  position:
    relative;
}


.arc-header-switcher[
  data-arc-country-code="mq"
]
.arc-header-switcher__flag::before {

  content:
    '';

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    58%;

  height:
    100%;

  background:
    #d82035;

  clip-path:
    polygon(
      0 0,
      100% 50%,
      0 100%
    );
}


/* =========================================================
   VALEUR HEADER
========================================================= */

.arc-header-switcher__value {

  min-width:
    0 !important;

  overflow:
    hidden !important;

  color:
    #ffffff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


/* =========================================================
   CARET HEADER
========================================================= */

.arc-header-switcher__caret {

  flex:
    none;

  width:
    7px;

  height:
    7px;

  margin-left:
    auto;

  border-right:
    1.5px solid
    rgba(
      255,
      255,
      255,
      0.84
    );

  border-bottom:
    1.5px solid
    rgba(
      255,
      255,
      255,
      0.84
    );

  transform:
    rotate(
      45deg
    )
    translateY(
      -1px
    );
}


/* =========================================================
   BOUTON CHANGER CENTRE
========================================================= */

.arc-change-center-btn,
body .arc-change-center-btn,
.elementor .arc-change-center-btn {

  -webkit-appearance:
    none !important;

  appearance:
    none !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    46px !important;

  padding:
    12px
    20px !important;

  border:
    1px solid
    #dc0000 !important;

  border-radius:
    10px !important;

  background:
    #dc0000 !important;

  color:
    #ffffff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  text-decoration:
    none !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;
}


.arc-change-center-btn:hover,
.arc-change-center-btn:focus-visible {

  border-color:
    #b20000 !important;

  background:
    #b20000 !important;

  color:
    #ffffff !important;

  outline:
    none !important;
}


/* =========================================================
   CARTE CENTRE
========================================================= */

.arc-center-card,
body .arc-center-card,
.elementor .arc-center-card {

  position:
    relative;

  padding:
    24px
    24px
    26px !important;

  border:
    1px solid
    rgba(
      6,
      42,
      104,
      0.08
    ) !important;

  border-radius:
    22px !important;

  background:
    #ffffff !important;

  color:
    #06245a !important;

  box-shadow:
    none !important;
}


/* =========================================================
   EYEBROW CARTE
========================================================= */

.arc-center-card__eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    0
    0
    10px !important;

  color:
    rgba(
      6,
      42,
      104,
      0.65
    ) !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  text-transform:
    uppercase !important;

  letter-spacing:
    0.08em !important;
}


.arc-center-card__eyebrow::after {

  content:
    '';

  width:
    12px;

  height:
    12px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(
      6,
      42,
      104,
      0.08
    );

  background:
    rgba(
      6,
      42,
      104,
      0.08
    );
}


/* =========================================================
   TITRE CARTE
========================================================= */

.arc-center-card__title {

  margin:
    0
    0
    10px !important;

  color:
    #06245a !important;

  font-size:
    clamp(
      26px,
      3vw,
      34px
    ) !important;

  font-weight:
    700 !important;

  line-height:
    1.04 !important;

  letter-spacing:
    -0.04em !important;
}


/* =========================================================
   SOUS TITRE CARTE
========================================================= */

.arc-center-card__subtitle {

  margin:
    0
    0
    10px !important;

  color:
    rgba(
      6,
      42,
      104,
      0.56
    ) !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    0.14em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   LIGNES CARTE
========================================================= */

.arc-center-card__line {

  margin:
    0
    0
    10px !important;

  color:
    #06245a !important;

  font-size:
    16px !important;

  font-weight:
    500 !important;

  line-height:
    1.45 !important;
}


.arc-center-card__line a {

  color:
    inherit !important;

  text-decoration:
    none !important;
}


.arc-center-card__actions {

  margin-top:
    20px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width:
  767px
) {

  .arc-center-gate {

    padding:
      22px
      16px
      42px;
  }


  .arc-center-gate__title {

    max-width:
      100%;

    margin:
      4px
      0
      24px;

    font-size:
      clamp(
        28px,
        11vw,
        44px
      );
  }


  .arc-center-gate__group summary {

    padding:
      16px
      10px !important;
  }


  .arc-center-gate__country {

    gap:
      12px;
  }


  .arc-center-gate__country-flag {

    width:
      32px;

    height:
      32px;

    border-width:
      2px;
  }


  .arc-center-gate__country-name {

    font-size:
      21px !important;
  }


  .arc-center-gate__country-count {

    font-size:
      8px !important;
  }


  .arc-center-gate__list {

    padding:
      7px
      10px
      20px
      52px !important;
  }


  .arc-center-gate__list::before {

    left:
      25px;
  }


  .arc-center-gate__center::before {

    left:
      -29px;
  }


  .arc-center-gate__center-name {

    font-size:
      18px !important;
  }


  .arc-header-switcher,
  body .arc-header-switcher,
  .elementor .arc-header-switcher {

    max-width:
      100% !important;
  }


  .arc-header-switcher__label {

    padding:
      0
      10px !important;

    font-size:
      11px !important;
  }


  .arc-header-switcher__value {

    font-size:
      13px !important;
  }


  .arc-center-card,
  body .arc-center-card,
  .elementor .arc-center-card {

    padding:
      22px
      20px
      24px !important;
  }


  .arc-center-card__title {

    font-size:
      28px !important;
  }


  .arc-change-center-btn,
  body .arc-change-center-btn,
  .elementor .arc-change-center-btn {

    min-height:
      44px !important;

    padding:
      11px
      18px !important;
  }

}