/*=========================================================
KUBRA'S ELEGANCE
GLOBAL CORE
=========================================================*/

/*=========================================================
VARIABLES
=========================================================*/

:root {
  --vvv-designer-kubraselegance-font-title: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --vvv-designer-kubraselegance-font-text: "Inter", "Manrope", Arial, sans-serif;

  --vvv-designer-kubraselegance-color-black: #080604;
  --vvv-designer-kubraselegance-color-cream: #fffaf2;
  --vvv-designer-kubraselegance-color-gold: #c9a45f;
  --vvv-designer-kubraselegance-color-brown: #21170f;

  --kubra-ink: #21170f;

  /* Neutralisation des couleurs globales Elementor */
  --e-global-color-primary: #21170f;
  --e-global-color-secondary: #080604;
  --e-global-color-text: #21170f;
  --e-global-color-accent: #c9a45f;
}



/*=========================================================
RESET
=========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    accent-color:var(--vvv-designer-kubraselegance-color-gold);

}

body{

    font-family:var(--vvv-designer-kubraselegance-font-text);
    color:var(--vvv-designer-kubraselegance-color-brown);
    background:var(--vvv-designer-kubraselegance-color-cream);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}



/*=========================================================
TYPO
=========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--vvv-designer-kubraselegance-font-title);

}

p,
li,
span,
a,
button,
input,
textarea{

    font-family:var(--vvv-designer-kubraselegance-font-text);

}



/*=========================================================
SELECTION
=========================================================*/

::selection{

    background:var(--vvv-designer-kubraselegance-color-gold);
    color:#090705;

}

::-moz-selection{

    background:var(--vvv-designer-kubraselegance-color-gold);
    color:#090705;

}



/*=========================================================
LINKS
=========================================================*/

a{

    color:inherit;
    text-decoration:none;

    transition:
    color .35s ease,
    opacity .35s ease,
    transform .35s ease;

}

a:hover{

    text-decoration:none;

}



/*=========================================================
BUTTONS
=========================================================*/

button{

    appearance:none;
    -webkit-appearance:none;

    border:none;
    background:none;

    cursor:pointer;

    font:inherit;

}

button::-moz-focus-inner{

    border:0;

}



/*=========================================================
FORMS
=========================================================*/

input,
textarea,
select,
button{

    outline:none;
    box-shadow:none;

}

input:focus,
textarea:focus,
select:focus,
button:focus{

    outline:none;
    box-shadow:none;

}



/*=========================================================
MEDIA
=========================================================*/

img{

    display:block;
    max-width:100%;

    user-select:none;
    -webkit-user-drag:none;

}

svg{

    overflow:visible;

}



/*=========================================================
ELEMENTOR — RESET GLOBAL KUBRA'S
=========================================================*/

.elementor {
  --e-global-color-primary: var(--vvv-designer-kubraselegance-color-brown);
  --e-global-color-secondary: var(--vvv-designer-kubraselegance-color-black);
  --e-global-color-text: var(--vvv-designer-kubraselegance-color-brown);
  --e-global-color-accent: var(--vvv-designer-kubraselegance-color-gold);
}

.elementor * {
  box-sizing: border-box;
}

.elementor a,
.elementor a:visited {
  text-decoration: none;
}

.elementor a:hover,
.elementor a:focus,
.elementor a:active {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.elementor button,
.elementor .elementor-button {
  font: inherit;
  box-shadow: none;
}

.elementor button:hover,
.elementor button:focus,
.elementor button:active,
.elementor .elementor-button:hover,
.elementor .elementor-button:focus,
.elementor .elementor-button:active {
  outline: none !important;
  box-shadow: none !important;
}


/*=========================================================
ACCESSIBILITE
=========================================================*/

*:focus{

    outline:none;

}

*:focus-visible{

    outline:none;
    box-shadow:none;

}

a,
button,
input,
textarea,
select{

    -webkit-tap-highlight-color:transparent;

}



/*=========================================================
UTILITAIRES
=========================================================*/

.hidden{

    display:none!important;

}

.visually-hidden{

    position:absolute!important;

    width:1px;
    height:1px;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/*=========================================================
KUBRA'S ELEGANCE
NEUTRALISATION GLOBALE DES BOUTONS ELEMENTOR
=========================================================*/

html body [type="button"],
html body [type="reset"],
html body [type="submit"],
html body button {
  appearance: none;
  -webkit-appearance: none;

  background-color: transparent;
  border-color: currentColor;
  color: inherit;

  font: inherit;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Supprime définitivement le hover rose Elementor */
html body [type="button"]:hover,
html body [type="button"]:focus,
html body [type="button"]:active,
html body [type="reset"]:hover,
html body [type="reset"]:focus,
html body [type="reset"]:active,
html body [type="submit"]:hover,
html body [type="submit"]:focus,
html body [type="submit"]:active,
html body button:hover,
html body button:focus,
html body button:active {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/*=========================================================
KUBRA'S — CORRECTION FLÈCHES SAFARI / IPHONE
=========================================================*/

.vvv-designer-kubraselegance button[class*="arrow"],
.vvv-designer-kubraselegance button[class*="prev"],
.vvv-designer-kubraselegance button[class*="next"],
[class^="vvv-"] button[class*="arrow"],
[class*=" vvv-"] button[class*="arrow"],
[class^="vvv-"] button[class*="prev"],
[class*=" vvv-"] button[class*="prev"],
[class^="vvv-"] button[class*="next"],
[class*=" vvv-"] button[class*="next"] {
    -webkit-appearance: none !important;
    appearance: none !important;

    margin: 0;
    padding: 0;

    font-family: inherit;
    font-style: normal;
    line-height: 1;

    text-decoration: none;
    text-transform: none;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    cursor: pointer;
}

/* Évite le fond bleu lors du clic tactile */
.vvv-designer-kubraselegance button[class*="arrow"]:focus,
.vvv-designer-kubraselegance button[class*="prev"]:focus,
.vvv-designer-kubraselegance button[class*="next"]:focus,
[class^="vvv-"] button[class*="arrow"]:focus,
[class*=" vvv-"] button[class*="arrow"]:focus {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Focus visible conservé pour l’accessibilité clavier */
.vvv-designer-kubraselegance button[class*="arrow"]:focus-visible,
[class^="vvv-"] button[class*="arrow"]:focus-visible,
[class*=" vvv-"] button[class*="arrow"]:focus-visible {
    outline: 2px solid #c9a45f;
    outline-offset: 3px;
}

.vvv-kubras-home-slider__arrow,
.vvv-kubras-shop-slider__arrow,
.vvv-designer-kubraselegance-accueil-essentiels__arrow {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/*=========================================================
KUBRA'S — FLÈCHES ↗ SANS EMOJI SUR IPHONE
Le symbole Unicode est masqué puis redessiné en SVG/CSS.
=========================================================*/

/*
 * Safari iOS peut afficher ↗ comme un emoji carré bleu.
 * On ne dépend donc plus d'une police ni du caractère Unicode.
 */
a[class*="vvv-designer-kubraselegance-"][class*="__text-link"]
> span[aria-hidden="true"]:last-child,
a[class*="vvv-designer-kubraselegance-"][class*="__cta"]
> i[aria-hidden="true"]:last-child,
.vvv-designer-kubraselegance-matieres__text-link
> span[aria-hidden="true"],
.vvv-designer-kubraselegance-accueil-matiere-loupe__cta
> i[aria-hidden="true"] {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  /* Cache complètement le caractère ↗ original. */
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;

  /* Empêche toute présentation emoji iOS. */
  font-family: Arial, Helvetica, sans-serif !important;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
  transform: none !important;
}

a[class*="vvv-designer-kubraselegance-"][class*="__text-link"]
> span[aria-hidden="true"]:last-child::before,
a[class*="vvv-designer-kubraselegance-"][class*="__cta"]
> i[aria-hidden="true"]:last-child::before,
.vvv-designer-kubraselegance-matieres__text-link
> span[aria-hidden="true"]::before,
.vvv-designer-kubraselegance-accueil-matiere-loupe__cta
> i[aria-hidden="true"]::before {
  position: absolute;
  inset: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  color: inherit;
  content: "";

  /*
   * Flèche vectorielle indépendante des polices.
   * -webkit-mask garantit le rendu sur Safari/iPhone.
   */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/*
 * Le parent transmet sa vraie couleur à la flèche vectorielle.
 */
.vvv-designer-kubraselegance-matieres__text-link
> span[aria-hidden="true"]::before,
.vvv-designer-kubraselegance-accueil-matiere-loupe__cta
> i[aria-hidden="true"]::before,
a[class*="vvv-designer-kubraselegance-"][class*="__text-link"]
> span[aria-hidden="true"]:last-child::before,
a[class*="vvv-designer-kubraselegance-"][class*="__cta"]
> i[aria-hidden="true"]:last-child::before {
  background-color: currentColor;
}

/* Couleur héritée depuis le lien, sans réafficher le caractère. */
.vvv-designer-kubraselegance-matieres__text-link,
.vvv-designer-kubraselegance-accueil-matiere-loupe__cta,
a[class*="vvv-designer-kubraselegance-"][class*="__text-link"],
a[class*="vvv-designer-kubraselegance-"][class*="__cta"] {
  --vvv-kubras-arrow-color: currentColor;
}

.vvv-designer-kubraselegance-matieres__text-link
> span[aria-hidden="true"]::before,
.vvv-designer-kubraselegance-accueil-matiere-loupe__cta
> i[aria-hidden="true"]::before,
a[class*="vvv-designer-kubraselegance-"][class*="__text-link"]
> span[aria-hidden="true"]:last-child::before,
a[class*="vvv-designer-kubraselegance-"][class*="__cta"]
> i[aria-hidden="true"]:last-child::before {
  background-color: var(--vvv-kubras-arrow-color);
}

/* Animation existante conservée, sans emoji. */
.vvv-designer-kubraselegance-matieres__text-link:hover
> span[aria-hidden="true"],
.vvv-designer-kubraselegance-accueil-matiere-loupe__cta:hover
> i[aria-hidden="true"],
a[class*="vvv-designer-kubraselegance-"][class*="__text-link"]:hover
> span[aria-hidden="true"]:last-child,
a[class*="vvv-designer-kubraselegance-"][class*="__cta"]:hover
> i[aria-hidden="true"]:last-child {
  transform: translate(3px, -3px) !important;
}

@media (max-width: 767px) {

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .select2-selection,
  .select2-search__field {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

}