/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

/* ==========================================================================
   1. Settings – Variables, fonts, etc.
   ========================================================================== */

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

:root:not(.wp-admin) {
  --color-1: #293365;
  --color-2: #5476c8;
  --color-3: #f8f8f8;
  --fs-1: clamp(2.6rem, 2.1rem + 2.4vw, 5rem);
  --fs-2: clamp(2rem, 1.7rem + 1.8vw, 3.75rem);
  --fs-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.5rem);
  --fs-4: clamp(1.35rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-5: clamp(1.1rem, 1rem + 0.6vw, 1.5625rem);
  --fs-6: clamp(0.95rem, 0.9rem + 0.3vw, 1.25rem);
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url("assets/fonts/PlayfairDisplay/PlayfairDisplay-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900; /* Ici on part du principe que c'est une police variable */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("assets/fonts/Lora/Lora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; /* Ici on part du principe que c'est une police variable */
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Normalize / Reset
   ========================================================================== */

/* ==========================================================================
   3. Base – Éléments HTML bruts
   ========================================================================== */

body:not(.wp-admin) {
  font-size: 16px;
  font-family: "Lora" !important;
  font-weight: 400;
}

/* h1:not(.wp-admin) {
  font-size: var(--fs-1) !important;
}
h2:not(.wp-admin) {
  font-size: var(--fs-2) !important;
}
h3:not(.wp-admin) {
  font-size: var(--fs-3) !important;
}
h4:not(.wp-admin) {
  font-size: var(--fs-4) !important;
}
h5:not(.wp-admin) {
  font-size: var(--fs-5) !important;
}
h6:not(.wp-admin) {
  font-size: var(--fs-6) !important;
} */

.fs-1,
.fs-2,
.fs-3,
.fs-4,
.fs-5,
.fs-6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "PlayfairDisplay" !important;
  font-weight: 600 !important;
}

.fs-1:not(.wp-admin) {
  font-size: var(--fs-1) !important;
}
.fs-2:not(.wp-admin) {
  font-size: var(--fs-2) !important;
}
.fs-3:not(.wp-admin) {
  font-size: var(--fs-3) !important;
}
.fs-4:not(.wp-admin) {
  font-size: var(--fs-4) !important;
}
.fs-5:not(.wp-admin) {
  font-size: var(--fs-5) !important;
}
.fs-6:not(.wp-admin) {
  font-size: var(--fs-6) !important;
}

/* ==========================================================================
   4. Layout – Grilles, containers, colonnes, structure globale
   ========================================================================== */

/* Dimension des container */

@media (min-width: 1550px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1500px;
  }
}

@media (min-width: 1650px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1400px;
  }
}
/* ==========================================================================
   5. Components – Boutons, cartes, modals, etc.
   ========================================================================== */

/* CITATIONS (bloc Gutenberg « Citation » + <blockquote> du contenu)
   Guillemet décoratif en filigrane bleu clair, comme .quote-icon
   de la section présentation : caractère “ rendu en PlayfairDisplay. */

.entry-content blockquote,
.entry-content .wp-block-quote {
  position: relative;
  margin: 2rem 0;
  padding: 1.6rem 0 0 2.25rem;
  border: 0;
  background: transparent;
}

.entry-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  font-family: "PlayfairDisplay", serif;
  font-weight: 600;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-2);
  opacity: 0.25;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Une citation imbriquée n'empile pas un second filigrane */
.entry-content blockquote blockquote {
  margin: 0;
  padding: 0;
}

.entry-content blockquote blockquote::before {
  content: none;
}

/* Le contenu repasse au-dessus du filigrane.
   margin-block à 0 : neutralise le blockGap de 24px que Gutenberg applique
   via :root :where(.is-layout-flow) > * — c'est lui qui creusait l'écart
   entre le texte de la citation et son auteur. */
.entry-content blockquote > * {
  position: relative;
  z-index: 1;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Un seul écart, entre éléments successifs (paragraphes, puis auteur) */
.entry-content blockquote > * + * {
  margin-block-start: 0.4rem;
}

.entry-content blockquote p {
  font-family: "Lora", serif !important;
  font-size: var(--fs-6);
  font-style: normal;
  line-height: 1.55;
}

/* Auteur de la citation.
   Le thème parent ajoute .blockquote-footer (Bootstrap), qui pose un
   margin-top négatif et un tiret cadratin « — » : on neutralise les deux. */
.entry-content blockquote .blockquote-footer::before {
  content: none;
}

.entry-content blockquote cite,
.entry-content blockquote .wp-block-quote__citation {
  display: block;
  font-family: "PlayfairDisplay", serif !important;
  font-weight: 700 !important;
  font-style: normal;
  font-size: var(--fs-6);
  line-height: 1.3;
  color: var(--color-1);
}

/* Fonction / rôle : saisir <small>Jewelry Manager</small> dans la source de la citation */
.entry-content blockquote cite small,
.entry-content blockquote cite em {
  display: block;
  font-family: "Lora", serif !important;
  font-weight: 400 !important;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
  .entry-content blockquote,
  .entry-content .wp-block-quote {
    margin: 1.5rem 0;
    padding: 1.25rem 0 0 1.75rem;
  }

  .entry-content blockquote::before {
    font-size: 3.5rem;
  }
}

/* ==========================================================================
   6. Sections – Styles propres à des pages ou sections spécifiques
   ========================================================================== */

/* HEADER */

#bootscore-navbar .nav-link {
  word-break: keep-all !important;
}

.safir-header {
  background: #0b0b0b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.safir-header .logo,
.safir-header .logo-responsive {
  height: 50px !important;
  width: auto;
}

.safir-header .navbar {
  padding: 0.75rem 3rem 0.75rem 3rem;
}

.safir-header .navbar-brand,
.safir-header .navbar-brand:visited {
  color: #ffffff;
}

.safir-header .nav-link {
  color: #e9e9e9;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.65rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.safir-header .nav-link:hover,
.safir-header .nav-link:focus {
  color: #ffffffdc;
  border-bottom: 2px solid #4f6aa8;
}

.safir-header .current-menu-item > .nav-link,
.safir-header .current-menu-ancestor > .nav-link {
  color: #ffffff;
  border-bottom: 2px solid #4f6aa8;
}

.safir-header .header-actions a,
.safir-header .header-actions button {
  color: #ffffff;
}

.safir-header .header-actions .btn,
.safir-header .header-actions .btn:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

.safir-header .header-actions .btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.safir-header .header-actions .woocommerce-Price-amount {
  color: #ffffff;
  font-weight: 500;
}

.btn-outline-custom {
  border: 1px solid black;
}

@media (min-width: 1400px) {
  .safir-navbar .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .safir-navbar .offcanvas {
    position: static;
    visibility: visible !important;
    transform: none !important;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
  }

  .safir-navbar .offcanvas-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
  }

  .safir-navbar .navbar-nav {
    flex-direction: row;
    gap: 1.25rem;
    margin: 0;
  }

  .safir-navbar .header-actions {
    margin-left: auto;
    gap: 0.75rem;
  }
}

@media (max-width: 425px) {
  .safir-header .navbar {
    padding: 0.75rem !important;
  }
}


@media (min-width: 1399.98px) {
  .cart-content {
    display: none !important;
  }
    .safir-header .navbar {
    padding: 0 !important;
  }
}
@media (min-width: 1599.98px) {
  .cart-content {
    display: block !important;
  }
    .safir-header .navbar {
    padding: 0.75rem !important;
  }
}
/* OFFCANVAS HEADER */

.offcanvas {
  --bs-offcanvas-bg: black !important;
}

.offcanvas {
  background-color: #0b0b0b !important;
}

.offcanvas-header {
  color: white !important;
}

#offcanvas-navbar .btn-close {
  filter: invert(1);
}

.offcanvas.offcanvas-cart,
.offcanvas.offcanvas-user {
  background: white !important;
  color: black !important;
}

.offcanvas.offcanvas-cart .offcanvas-header,
.offcanvas.offcanvas-user .offcanvas-header {
  color: black !important;
}

.offcanvas.offcanvas-cart .offcanvas-header .btn-close,
.offcanvas.offcanvas-user .offcanvas-header .btn-close {
  filter: none;
}

/* OFFCANVAS COMPTE WOOCOMMERCE*/

.my-offcanvas-account a {
  color: var(--color-2) !important;
  text-shadow: 0px 0px 0px #5476c8 !important;
  transform: all ease 0.3s !important;
}

.my-offcanvas-account a:hover {
  text-shadow: 0px 0px 8px #5476c8 !important;
}

/* Login */
#offcanvas-user .my-offcanvas-account h2,
#offcanvas-user .my-offcanvas-account .woocommerce-form-row label,
#offcanvas-user .my-offcanvas-account .woocommerce-form-login__rememberme,
#offcanvas-user .my-offcanvas-account .woocommerce-MyAccount-content p {
  color: var(--color-1) !important;
}

#offcanvas-user .my-offcanvas-account .woocommerce-form-row input.input-text {
  background: #ffffff !important;
  border: 1px solid rgba(41, 51, 101, 0.24) !important;
  border-radius: 10px !important;
  color: #1f273f !important;
}

#offcanvas-user
  .my-offcanvas-account
  .woocommerce-form-row
  input.input-text:focus {
  border-color: var(--color-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(84, 118, 200, 0.22) !important;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  color: black !important;
}
/* Sign In */
#offcanvas-user
  .my-offcanvas-account
  .woocommerce-form-register
  .woocommerce-privacy-policy-text
  p {
  color: var(--color-1) !important;
}

#offcanvas-user
  .my-offcanvas-account
  .woocommerce-button.button.woocommerce-form-login__submit,
#offcanvas-user
  .my-offcanvas-account
  .woocommerce-button.button.woocommerce-form-register__submit {
  background: var(--color-1) !important;
  border: 1px solid var(--color-1) !important;
  color: #ffffff !important;
}

#offcanvas-user
  .my-offcanvas-account
  .woocommerce-button.button.woocommerce-form-login__submit:hover,
#offcanvas-user
  .my-offcanvas-account
  .woocommerce-button.button.woocommerce-form-register__submit:hover {
  background: var(--color-2) !important;
  border-color: var(--color-2) !important;
  color: #ffffff !important;
}

#accordionRegister .accordion-item {
  background-color: transparent !important;
}

#accordionRegister .accordion-button {
  background-color: transparent !important;
  border-radius: 0px;
  padding: 10px 15px;
}

#accordionRegister .accordion-button::after {
  filter: invert(1) !important;
}

#offcanvas-user #accordionRegister .accordion-button::after {
  filter: none !important;
}

/* HERO SECTION (section_hero.php)*/

/* Les bornes basses ne s'appliquent qu'en dessous de ~680px (4vw et 3.5vw y restent
   sous le minimum) : les relever agit uniquement sur mobile, le desktop est inchangé. */

.heading-hero-accent {
  font-size: clamp(2.3rem, 4vw, 5rem);
  /* <span> : non capté par la règle h1…h6 du thème, il héritait de Lora 400 */
  font-weight: 700;
}

.heading-hero-secondary {
  font-size: clamp(1.9rem, 3.5vw, 5rem);
  /* !important pour passer devant le font-weight: 600 !important des h1…h6 */
  font-weight: 700 !important;
}

.hero-section-custom {
  /* Fond noir dès le départ : évite le flash gris avant le chargement de l'image de fond */
  background-color: #000;
  /* Hauteur mini = plein écran MOINS ce qui précède le hero (header sticky, éventuel top-bar).
     --hero-offset est mesuré en JS (voir section_hero.php) ; le fallback ~75px = hauteur du header,
     pour un premier rendu correct avant l'exécution du JS (donc quasi aucun CLS).
     min-height (et non height) : le contenu n'est jamais rogné.
     svh = hauteur d'écran stable (non recalculée avec les barres mobiles) -> pas de CLS Lighthouse.
     Fallback en vh pour les navigateurs sans support de svh. */
  min-height: calc(100vh - var(--hero-offset, 75px));
  min-height: calc(100svh - var(--hero-offset, 75px));
}

.hero-section-custom .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-section-custom .hero-bg-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.bandeau-infos-hero {
  background: #ffffff24 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-content, .bandeau-infos-hero{
  position: relative;
  z-index: 2;
}


.btn-video-modal {
  height: 80px;
  width: 80px;
  background-color: white;
  border: solid white 1px;
  transform: scale(1);
  box-shadow: 0 0 0 rgb(255, 255, 255);
  animation: anim-vibrate 2s infinite;
  transition: all ease 0.5s;
}

.btn-video-modal:hover {
  background-color: transparent;
  border: solid white 1px;
}

.img-bijou {
  transition: transform 0.15s ease-out;
  will-change: transform;
  width: auto;
  max-height: 230px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes anim-vibrate {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.hero-title-rotator {
  position: relative;
  display: inline-block;
  perspective: 800px;
  --cycle: 4.8s;
}

.hero-title-layer {
  display: inline-flex;
  /* Autorise le passage à la ligne entre deux mots (voir buildLetters dans section_hero.php) */
  flex-wrap: wrap;
  gap: 0.02em;
  line-height: 1.1;
  /* Réserve la hauteur d'une ligne avant que le JS n'injecte les lettres -> évite le saut (CLS) au chargement */
  min-height: 1.1em;
}

/* Un mot = un bloc insécable de lettres animées */
.hero-title-word {
  display: inline-flex;
  gap: 0.02em;
}

.hero-title-back {
  position: absolute;
  inset: 0 auto auto 0;
}

.hero-title-letter {
  display: inline-block;
  transform-style: preserve-3d;
  animation: hero-title-flip var(--cycle) infinite;
  animation-delay: var(--letter-delay, 0ms);
  animation-fill-mode: both;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  /* Pas de will-change ici : sur Safari iOS, les couches GPU des animations infinies
     sont recyclées et parfois perdues après la 1re boucle (titre qui disparaît). */
}

/* 2e mot : même flip mais décalé d'une demi-phase via un keyframe dédié, en gardant
   un animation-delay POSITIF (les delays négatifs + animations infinies désynchronisent
   Safari iOS). Le calque arrière est donc caché quand l'avant est visible, et inversement. */
.hero-title-back .hero-title-letter {
  animation-name: hero-title-flip-back;
}

@keyframes hero-title-flip {
  0%,
  30% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  45%,
  55% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  70%,
  90% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  95%,
  100% {
    transform: rotateY(360deg);
    opacity: 1;
  }
}

@keyframes hero-title-flip-back {
  0%,
  30% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  45%,
  55% {
    transform: rotateY(360deg);
    opacity: 1;
  }

  70%,
  90% {
    transform: rotateY(360deg);
    opacity: 1;
  }

  95%,
  100% {
    transform: rotateY(540deg);
    opacity: 0;
  }
}

/* --- Version mobile / tactile : animation similaire mais 100% 2D ---
   Le flip 3D par lettre (rotateY + backface-visibility) bugue sur Safari iOS
   (lettres manquantes / désynchronisées après la 1re boucle). Sur les appareils
   tactiles, on le remplace par un simple fondu + léger glissement vertical entre
   les deux mots, animé au niveau des CALQUES (pas par lettre) : robuste partout.
   Ciblage (hover:none) + (pointer:coarse) = mobiles/tablettes ; le desktop garde le flip. */
@media (hover: none) and (pointer: coarse) {
  /* On coupe le flip 3D par lettre sur les deux calques */
  .hero-title-front .hero-title-letter,
  .hero-title-back .hero-title-letter {
    animation: none;
    transform: none;
    opacity: 1;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  /* Fondu + glissement entre les deux mots, au niveau des calques */
  .hero-title-front {
    animation: hero-title-fade var(--cycle) infinite;
  }
  .hero-title-back {
    animation: hero-title-fade-back var(--cycle) infinite;
  }
}

@keyframes hero-title-fade {
  0%, 42%  { opacity: 1; transform: translateY(0); }
  50%, 92% { opacity: 0; transform: translateY(-0.3em); }
  100%     { opacity: 1; transform: translateY(0); }
}

@keyframes hero-title-fade-back {
  0%, 42%  { opacity: 0; transform: translateY(0.3em); }
  50%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0.3em); }
}

/* --- Safari (macOS ET iOS) : même moteur WebKit que l'iPhone ---
   Le flip 3D peut buguer aussi sur Safari macOS (MacBook). On force donc la version
   2D pour TOUT Safari. Détection : -webkit-hyphens n'est reconnu que par Safari
   (ni Chrome, ni Firefox, ni Edge) -> eux conservent le flip 3D sur desktop. */
@supports (-webkit-hyphens: none) {
  .hero-title-front .hero-title-letter,
  .hero-title-back .hero-title-letter {
    animation: none;
    transform: none;
    opacity: 1;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .hero-title-front {
    animation: hero-title-fade var(--cycle) infinite;
  }
  .hero-title-back {
    animation: hero-title-fade-back var(--cycle) infinite;
  }
}

/* Accessibilité : on fige le titre pour les utilisateurs qui préfèrent moins d'animation.
   Placé APRÈS les blocs mobile/Safari pour l'emporter quand plusieurs conditions s'appliquent. */
@media (prefers-reduced-motion: reduce) {
  .hero-title-letter,
  .hero-title-front,
  .hero-title-back {
    animation: none;
  }
  .hero-title-back {
    display: none;
  }
}

/* SECTION COLONNE CATEGORIES (section_colonnes_categories.php) */

.listing-cat-links .cat-link {
  color: #2b2b2bff;
  transition: all ease 0.3s;
  transform: scale(1);
  letter-spacing: 2px;
}

.listing-cat-links .cat-link:hover {
  color: #2b2b2bff;
  transition: all ease 0.3s;
  color: var(--color-2) !important;
  transform: scale(0.9);
}

.listing-cat-links .cat-link::after {
  color: #2b2b2bff !important;
  font-family: "Font Awesome 6 pro";
  content: "\f054";
  font-size: 18px;
}

.img-cat-list {
  position: absolute;
  max-height: 280px;
  right: 0;
  top: 0;
  z-index: 1 !important;
  opacity: 1;
  transition: all ease 0.3s;
}

.cat-content {
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 1400px) {
  .img-cat-list {
    opacity: 0.4;
    max-height: 100%;
    /* Libère la largeur (bloquée par les attributs width/height du <img>) pour
       conserver le ratio quand max-height plafonne la hauteur -> plus de déformation */
    width: auto;
    height: auto;
  }
  .cat-card {
    overflow: hidden;
  }
}

/* SECTION AFFICHAGE PROMOTIONS (section_affichage_promotions.php) */

.section-affichage-promotions {
  padding: clamp(32px, 6vw, 80px) clamp(16px, 6vw, 160px);
}

.promo-card {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  /* padding: 3rem; */
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
  gap: 24px;
}

.promo-card--dispo-2 {
  display: flex;
  flex-direction: row-reverse;
}

.promo-card-verticale {
  padding: 4rem 2rem !important;
}

.promo-card .overlay-promo {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  left: 0;
}

.promo-card__content {
  z-index: 2;
}

.promo-card__pretitle {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.promo-card__title {
  font-weight: 700;
  margin-bottom: 8px;
}

.promo-card__title--big {
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.promo-card__subtitle {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.promo-card__text {
  opacity: 0.9;
  margin-bottom: 12px;
}

.promo-card__percent {
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700;
  line-height: 1;
  margin: 8px 0;
}

.promo-card--dispo-1 .promo-card__media img {
  margin-top: -120px;
  max-height: 300px;
  transform: rotateZ(-15deg);
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.3));
}

.promo-card--dispo-2 .promo-card__media img {
  margin-bottom: -120px;
  min-width: 400px;
  transform: rotateZ(-25deg);
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.3));
}

@media (max-width: 991.98px) {
  .promo-card--dispo-2 .promo-card__media,
  .promo-card--dispo-1 .promo-card__media {
    display: none !important;
  }

  .promo-card {
    text-align: center;
    padding: 2rem;
  }

  .promo-card__content {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .promo-card {
    padding: 1.5rem;
  }

  .promo-card__title--big {
    font-size: clamp(20px, 6vw, 28px);
  }

  .promo-card__percent {
    font-size: clamp(32px, 10vw, 52px);
  }
}

/* SECTION PRESENTATION EQUIPE (section_equipe_generale.php)*/

.section-presentation-equipe .team-card {
  min-height: 360px;
  background-size: cover;
  background-position: center;
}

/* SECTION PRESENTATION GENERALE (section_presentation_generale.php) */

/* .section-presentation-generale .row {
  min-height: 500px; 
}
 */

.section-presentation-generale {
  padding: 5rem 0;
  background: #fff;
}

.presentation-quote__text {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  margin-bottom: 20px;
}

.presentation-quote__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.presentation-quote__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-2);
}

.presentation-quote__role {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.presentation-text__body {
  color: rgba(255, 255, 255, 0.9);
}

.presentation-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
}

.presentation-swiper .swiper-pagination-bullet-active {
  background: var(--color-2);
  opacity: 1;
}

.presentation-swiper .swiper-pagination {
  position: static;
}

.presentation-portrait {
  position: absolute;
  max-height: 600px;
}

.quote-icon {
  position: absolute;
  opacity: 0.8;
  font-size: 10rem;
  transform: rotate(180deg);
  right: 80px;
  bottom: -50px;
}

@media (max-width: 991.98px) {
  .presentation-portrait {
    display: none;
  }
}

@media (max-width: 768px) {
  .quote-icon {
    display: none;
  }
}

.presentation-alt-image {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* SECTION FAQ (section_faq.php) */

.section-faq .accordion-button {
  background-color: #ffffff;
  border: 1px solid var(--color-2);
  box-shadow: none;
  color: var(--color-1);
  transition: background-color 0.3s ease;
}

.section-faq .faq-icon {
  font-size: 2rem;
  color: var(--color-1);
  transform: rotate(0deg);
  transition: all ease 0.3s;
}

.section-faq .accordion-button:hover {
  background-color: var(--color-2);
  color: #ffffff !important;
}

.section-faq .accordion-button:not(.collapsed) {
  background-color: var(--color-2) !important;
  color: #ffffff !important;
}

.section-faq .accordion-button:not(.collapsed) .faq-icon {
  color: #ffffff !important;
  transform: rotate(45deg);
}

.section-faq .accordion-button::after {
  display: none;
}

.section-faq .accordion-item {
  background-color: transparent;
}

.section-faq .accordion-body {
  border: 1px solid var(--color-2);
  border-top: 0;
  background-color: #ffffff;
}

.section-faq .accordion-button:hover .faq-icon {
  color: #ffffff !important;
}

/* SECTION BANDEAU CHIFFRES (section_bandeau_chiffres.php) */

.section-bandeau-chiffres .bandeau-chiffres-value {
  font-size: clamp(2.25rem, 3vw, 3.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.section-bandeau-chiffres .bandeau-chiffres-unit {
  margin-left: 0.2rem;
  font-size: 0.7em;
  font-weight: 500;
}

.section-bandeau-chiffres .bandeau-chiffres-label {
  margin-top: 0.5rem;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  font-weight: 500;
}

/* SECTION BANDEAU PROMOTIONNEL (section_bandeau_promotionnel.php) */

.section-bandeau-promotionnel {
  background-color: var(--color-2);
  background-size: cover;
  background-position: center;
}

.section-bandeau-promotionnel .letter-spacing-2 {
  letter-spacing: 0.16em;
}

/* SECTION COLONNES CATEGORIES (section_colonnes_categories.php) */

.section-colonnes-categories {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.1s ease;
}

.section-colonnes-categories__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.section-colonnes-categories .row {
  min-height: inherit;
}

.section-colonnes-categories .row > [class*="col-"] {
  display: flex;
}

.col-cat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.15);
  transition:
    all 0.3s ease,
    transform 0.3s ease;
  z-index: 1;
  width: 100%;
  min-height: 800px;
}

.bloc-item {
  position: absolute;
  width: 100%;
  height: 0%;
  background: white;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all ease 0.3s;
}

.col-cat-item__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 28px 32px;
}

.col-cat-item:hover {
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-1);
}

.col-cat-item:hover .bloc-item {
  height: 100%;
}

.col-cat-item__pretitle {
  position: relative;
  font-size: 0.9rem;
  opacity: 0.9;
  z-index: 2;
}

.col-cat-item__title {
  position: relative;
  font-weight: 700;
  margin: 0;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .col-cat-item {
    border-right: none;
    min-height: auto;
  }
}

/* SECTION AFFICHAGE AUTO CATEGORIES (section_affichage_auto_categories.php) */

.auto-cat-card {
  transition: all ease 0.3s;
  background-color: white;
}
.auto-cat-card:hover {
  transform: scale(1.05);
}

.auto-cat-card:hover .auto-cat-card__title {
  text-decoration: underline;
}

.auto-cat-card__img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.auto-cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auto-cat-card__title {
  font-size: 1rem;
  font-weight: 500;
}

/* SINGLE PRODUCT PAGE WOOCOMMERCE */

.woocommerce div.product .product_title {
  color: var(--color-1) !important;
}

.woocommerce div.product .summary .product_title {
  color: var(--color-1) !important;
  font-size: var(--fs-3) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.card .price {
  color: var(--color-2) !important;
  font-weight: 500;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: var(--color-3) !important ;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background-color: var(--color-3) !important;
  padding: 3rem;
}

.wc-tabs-wrapper .scrollbar-none {
  margin: 0 !important;
}

.product_meta .posted_in a {
  text-decoration: none !important;
  color: var(--color-2) !important;
  font-weight: 400 !important;
}

.woocommerce div.product form.cart .button {
  /* Bouton ajouter au panier juste à al bonne taille */
  flex-grow: 0 !important;
}

.woocommerce div.product form.cart {
  /* Bordures de séparation */
  padding: 3rem 0;
  margin: 3rem 0;
  border-top: solid 1px #d1d1d1;
  border-bottom: solid 1px #d1d1d1;
}

.woocommerce div.product form.cart div.quantity {
  /* Centrer la quantité */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce-product-gallery__image,
.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: 0px !important;
}

.woocommerce-Tabs-panel h2 {
  font-size: var(--fs-4) !important;
}

/* PAGE COMMANDE WOOCOMMERCE */

#fc-wrapper .fc-inside .fc-checkout-steps .fc-checkout-step .fc-step__substep {
  background-color: #f8f9fa !important;
}

div.woocommerce form .form-row input[type="checkbox"] {
  float: left !important;
}

.collapsible-content__inner a {
  color: var(--color-2) !important;
}

.fc-progress-bar .fc-progress-bar__inner .fc-progress-bar__step {
  background-color: var(--color-2) !important;
  -webkit-box-shadow: 0px 0px 15px 0px #5476c8 !important;
  box-shadow: 0px 0px 15px 0px #5476c8 !important;
}

/* CARTE PRODUIT WOOCOMMERCE*/

.product .woocommerce-loop-product__title {
  text-decoration: none !important;
  font-size: var(--fs-6) !important;
  font-family: "Lora" !important;
}

.product .woocommerce-Price-amount {
  text-decoration: none !important;
}

.woocommerce-LoopProduct-link {
  text-decoration: none !important;
}

.woocommerce div.product {
  border-radius: 0 !important;
}

.card-img,
.card-img-top {
  border-radius: 0;
}

/* CAROUSEL PRODUIT */

.classic-carousel {
  position: relative;
  touch-action: pan-y;
}

.classic-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
}

.classic-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Mobile : ~80% de largeur visible (equivalent slidesPerView 1.2) */
.classic-carousel__slide {
  flex: 0 0 calc(80% - 10px);
  scroll-snap-align: start;
  min-width: 0;
}

/* Forcer les colonnes Bootstrap a prendre toute la largeur de la slide */
.classic-carousel__slide > .col-md-6,
.classic-carousel__slide > .col-lg-4,
.classic-carousel__slide > .col-xxl-3 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.classic-carousel__slide .price {
  font-size: 1.25rem !important;
}

/* Tablette portrait : 2 slides */
@media (min-width: 576px) {
  .classic-carousel__slide {
    flex: 0 0 calc(50% - 10px);
  }
}

/* Tablette paysage : 3 slides */
@media (min-width: 768px) {
  .classic-carousel__slide {
    flex: 0 0 calc(33.333% - 14px);
  }
}

/* Boutons fleches */
.classic-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #5477c8d7;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.classic-carousel__btn:hover {
  background: #293365e0;
}

.classic-carousel__btn.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.classic-carousel__btn--prev {
  left: -10px;
}

.classic-carousel__btn--next {
  right: -10px;
}

.classic-carousel__btn::after {
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .classic-carousel__btn {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }

  .classic-carousel__btn--prev {
    left: 2px;
  }

  .classic-carousel__btn--next {
    right: 2px;
  }
}



/* Decription en double */
.term-description {
  display: none !important;
}

/* SINGLE POST */

.post-thumbnail .wp-post-image {
  max-height: 550px;
  object-fit: cover;
}

/* BREADCRUMB WOOCOMMERCE */

.wc-breadcrumb {
  background: transparent !important;
}

.wc-breadcrumb .breadcrumb-item,
.wc-breadcrumb .breadcrumb-item::before {
  color: white !important;
  font-size: var(--fs-6) !important;
}

.wc-breadcrumb .breadcrumb-item a {
  color: var(--color-2) !important;
  text-decoration: none !important;
}

.wc-breadcrumb .breadcrumb {
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* SECTION CONTACT */

.section-contact__form-wrapper label {
  color: var(--color-1) !important;
  margin-bottom: 0px;
}

.section-contact .wpcf7-form p {
  margin-bottom: 14px;
}

.section-contact .wpcf7-form input[type="text"],
.section-contact .wpcf7-form input[type="email"],
.section-contact .wpcf7-form input[type="tel"],
.section-contact .wpcf7-form textarea {
  width: 100%;
  border: 1px solid var(--color-2);
  padding: 10px 12px;
  box-shadow: none;
  border-radius: 0px;
  background-color: transparent !important;
}

.wpcf7-form-control::placeholder {
  color: #3b3b3b !important;
}

.section-contact .wpcf7-form input:focus,
.section-contact .wpcf7-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(191, 159, 112, 0.2);
  outline: none;
}

.section-contact .wpcf7-form .wpcf7-list-item-label {
  color: var(--mid-grey);
}

.wpcf7-spinner {
  display: none !important;
}

.icone-rs {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  text-decoration: none;
  transform: scale(1);
  transition: all ease 0.3s;
}

.icone-rs:hover {
  transform: scale(0.9);
}

.icone-rs.text-color-2 {
  color: var(--color-2);
  border: solid var(--color-2) 1px !important;
}

.icone-rs.text-color-2:hover {
  color: white !important;
  background-color: var(--color-2);
}

.icone-rs.text-white {
  color: white;
  border: solid white 1px !important;
}

.icone-rs.text-white:hover {
  color: var(--color-1) !important;
  background-color: white;
}

.contact-map iframe {
  width: 100%;
}

/* CATEGORY TREE */

.cat-tree {
  text-align: left;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.5rem;
}

.cat-tree-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.cat-tree-list .cat-tree-list {
  padding-left: 1rem;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  margin-left: 0.5rem;
}

.cat-tree-item {
  margin: 2px 0;
}

.cat-tree-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  color: var(--color-1, #2a4074);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: "Lora", serif;
  transition:
    background 0.15s,
    color 0.15s;
}

.cat-tree-link:hover {
  background: rgba(42, 64, 116, 0.07);
  color: var(--color-2, #5476c8);
}

.cat-tree-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-1, #2a4074);
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

@media (max-width: 767.98px) {
  .section-auto-categories .auto-cat-card__title {
    font-size: 0.8rem;
  }

  .cat-tree {
    padding-top: 0.3rem;
  }

  .cat-tree-link {
    font-size: 0.75rem;
    padding: 0.2rem 0.3rem;
  }

  .cat-tree-count {
    font-size: 0.6rem;
    padding: 0 4px;
    min-width: 16px;
  }

  .cat-tree-list .cat-tree-list {
    padding-left: 0.6rem;
    margin-left: 0.3rem;
  }

  .cat-tree-item {
    margin: 1px 0;
  }
}

/* FAB FILTRES MOBILE */

.roccitania-fab-filters {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: var(--color-1, #2a4074);
  color: #fff;
  font-family: "Lora", serif;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}

.roccitania-fab-filters:hover {
  background: var(--color-2, #5476c8);
}

.roccitania-fab-filters i {
  font-size: 0.75rem;
}

/* FOOTER */

#colophon a[href^="tel:"] {
  color: inherit !important;
  text-decoration: none;
}

#footer-menu {
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  #footer-menu {
    flex-direction: row;
  }
}

#footer-menu .nav-link {
  color: white !important;
}

#footer-menu .nav-link:hover {
  color: rgba(255, 255, 255, 0.801) !important;
}

.top-button {
  background-color: var(--color-2) !important;
  border-radius: 0 !important;
  border: none !important;
  transition: all ease 0.3s;
}

.top-button:hover {
  background-color: var(--color-1) !important;
}

/* Titre d'article (single post)
   Balise <p> et non <h1> : le h1 de la page est celui de la bannière.
   On restitue l'allure d'un titre, en bleu. */

.entry-title-single {
  font-family: "PlayfairDisplay" !important;
  font-weight: 600 !important;
  font-size: var(--fs-3) !important;
  line-height: 1.2;
  color: var(--color-1) !important;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--color-2);
}

/* ==========================================================================
   7. Utilities – Helpers, classes utilitaires
   ========================================================================== */

.bg-color-1 {
  background-color: var(--color-1) !important;
}
.bg-color-2 {
  background-color: var(--color-2) !important;
}
.bg-color-3 {
  background-color: var(--color-3) !important;
}

.text-color-1 {
  color: var(--color-1) !important;
}
.text-color-2 {
  color: var(--color-2) !important;
}
.text-color-3 {
  color: var(--color-3) !important;
}

.wp-block-separator {
  color: #b3b3b39e !important;
}

.font-lora {
  font-family: "Lora" !important;
}

.font-playfair {
  font-family: "PlayfairDisplay" !important;
}

/* WooCommerce - Tableau de bord (Mon compte) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: clamp(16px, 2vw, 28px);
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin-bottom: 10px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-3);
  color: var(--color-1);
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--color-2);
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  color: var(--color-1);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  border-left-color: var(--color-2);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce-account table.shop_table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.woocommerce-account table.shop_table th {
  background: var(--color-3);
  color: var(--color-1);
  font-weight: 600;
}

.woocommerce-account table.shop_table td,
.woocommerce-account table.shop_table th {
  padding: 12px;
}

@media (max-width: 991.98px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 16px;
  }
}

/* WooCommerce - Connexion / inscription (utilisateur non connecte) */
body.woocommerce-account:not(.logged-in) .site-content {
  padding-left: clamp(16px, 4vw, 42px);
  padding-right: clamp(16px, 4vw, 42px);
}

body.woocommerce-account:not(.logged-in) #customer_login.account-auth-switcher {
  width: 100%;
  max-width: 680px;
  margin: 0 auto !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border: 1px solid rgba(41, 51, 101, 0.12);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(11, 11, 11, 0.08);
  padding: clamp(20px, 2.5vw, 34px);
}

body.woocommerce-account:not(.logged-in) #customer_login .account-auth-panel {
  margin: 0;
}

body.woocommerce-account:not(.logged-in) #customer_login h2 {
  font-family: "PlayfairDisplay" !important;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem) !important;
  line-height: 1.2;
  color: var(--color-1) !important;
  margin-bottom: 1rem;
}

body.woocommerce-account:not(.logged-in) #customer_login p,
body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-row
  label,
body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-login__rememberme {
  font-family: "Lora" !important;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  color: #1f273f !important;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-login,
body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-register {
  margin: 0 !important;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-row
  input.input-text {
  background: #ffffff !important;
  border: 1px solid rgba(41, 51, 101, 0.22) !important;
  border-radius: 10px !important;
  color: #1f273f !important;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-row
  input.input-text:focus {
  border-color: var(--color-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(84, 118, 200, 0.22) !important;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-register__submit {
  background: var(--color-1) !important;
  border: 1px solid var(--color-1) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: "Lora" !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.35rem !important;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-login__submit:hover,
body.woocommerce-account:not(.logged-in)
  #customer_login
  .woocommerce-form-register__submit:hover {
  background: var(--color-2) !important;
  border-color: var(--color-2) !important;
  color: #ffffff !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .lost_password {
  margin-bottom: 0.75rem;
}

body.woocommerce-account:not(.logged-in) #customer_login .lost_password a {
  color: var(--color-2) !important;
  text-decoration: none;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .lost_password
  a:hover {
  text-decoration: underline;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .account-auth-toggle-group,
#offcanvas-user #customer_login .account-auth-toggle-group {
  display: flex;
  width: 100%;
  gap: 4px;
  padding: 4px;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(41, 51, 101, 0.22);
  border-radius: 999px;
  background: #ffffff;
}

body.woocommerce-account:not(.logged-in) #customer_login .account-auth-toggle,
#offcanvas-user #customer_login .account-auth-toggle {
  flex: 1 1 50%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-1);
  cursor: pointer;
  font-family: "Lora" !important;
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  transition: all 0.2s ease;
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .account-auth-toggle:hover,
#offcanvas-user #customer_login .account-auth-toggle:hover {
  color: var(--color-2);
}

body.woocommerce-account:not(.logged-in)
  #customer_login
  .account-auth-toggle.is-active,
#offcanvas-user #customer_login .account-auth-toggle.is-active {
  color: #ffffff;
  background: var(--color-1);
  box-shadow: 0 8px 18px rgba(41, 51, 101, 0.22);
}

#offcanvas-user #customer_login.account-auth-switcher {
  max-width: 100%;
  margin: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

#offcanvas-user #customer_login .account-auth-toggle {
  font-size: 0.8rem;
}

#offcanvas-user #customer_login .account-auth-toggle-group {
  margin-bottom: 1rem;
}

/* Carte mot de passe oublie — meme design que #customer_login */
body.woocommerce-account:not(.logged-in) .account-auth-card {
  width: 100%;
  max-width: 680px;
  margin: 0 auto !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border: 1px solid rgba(41, 51, 101, 0.12);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(11, 11, 11, 0.08);
  padding: clamp(20px, 2.5vw, 34px);
}

body.woocommerce-account:not(.logged-in) .account-auth-card h2 {
  font-family: "PlayfairDisplay" !important;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem) !important;
  line-height: 1.2;
  color: var(--color-1) !important;
  margin-bottom: 1rem;
}

body.woocommerce-account:not(.logged-in) .account-auth-card p,
body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .woocommerce-form-row
  label {
  font-family: "Lora" !important;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  color: #1f273f !important;
}

body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .woocommerce-form-row
  input.input-text {
  background: #ffffff !important;
  border: 1px solid rgba(41, 51, 101, 0.22) !important;
  border-radius: 10px !important;
  color: #1f273f !important;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
}

body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .woocommerce-form-row
  input.input-text:focus {
  border-color: var(--color-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(84, 118, 200, 0.22) !important;
}

body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .woocommerce-Button {
  background: var(--color-1) !important;
  border: 1px solid var(--color-1) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: "Lora" !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.35rem !important;
}

body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .woocommerce-Button:hover {
  background: var(--color-2) !important;
  border-color: var(--color-2) !important;
}

body.woocommerce-account:not(.logged-in) .account-auth-card .account-auth-back {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .account-auth-back
  a {
  color: var(--color-2) !important;
  text-decoration: none;
}

body.woocommerce-account:not(.logged-in)
  .account-auth-card
  .account-auth-back
  a:hover {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  body.woocommerce-account:not(.logged-in) .site-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}