/*
Theme Name:   Vocabulaire Arabe
Description:  Twenty Twenty-Five Child Theme
Author:       Jonathan Webpixelia
Author URI:   http://webpixelia.com
Description: Testez vos compétences grammaticales en arabe avec notre site d'analyses grammaticales. Découvrez votre niveau à travers des quiz captivants, disponibles en trois niveaux de difficulté. Améliorez votre maîtrise de la grammaire arabe de manière ludique et interactive.
Template:     twentytwentyfive
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  vocabulaire-arabe-theme
*/

*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

/* ========================================
   VARIABLES CSS
======================================== */
:root {
  /* Couleurs principales */
  --color-gold: var(--wp--preset--color--gold, #d4af37);
  --color-white: var(--wp--preset--color--white, #ffffff);
  --color-gold-light: #facc15;
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef3c7;
  --color-yellow-400: #fcd34d;
  --color-yellow-600: #d97706;
  --color-yellow-800: #b45309;
  
  /* Gris */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  
  /* Autres couleurs */
  --color-blue-100: #dbeafe;
  --color-blue-600: #2563eb;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-red-50: #fef2f2;
  --color-red-100: #fecaca;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-orange-100: #ffedd5;
  --color-orange-600: #ea580c;
  --color-pink-100: #fce7f3;
  --color-pink-600: #db2777;
  --color-purple-100: #faf5ff;
  --color-purple-600: #805ad5;
  
  /* Espacements */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  
  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  
  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 15px 30px rgba(0, 0, 0, 0.2);
  
  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   BASE & TYPOGRAPHIE
======================================== */
[lang="ar"] {
  font-family: 'Amiri', serif;
  font-size: 1.5rem;
}

footer {
  margin-block-start: 0;
}

/* ========================================
   CLASSES UTILITAIRES
======================================== */
:where(.wp-site-blocks *:focus) {
  outline: none !important;
}
.current-menu-item:not(.no-current-gold) {
  color: var(--color-gold);
  font-weight: 700;
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.relative { position: relative; }
.text-align-center { text-align: center; }
.opacity-50 { opacity: 0.5; }
.list-style-none { list-style: none; padding: 0;}
.list-style-disc { list-style: disc; color: var(--wp--preset--color--gold);}
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.gold-txt { color: var(--color-gold); }
.bold-600 { font-weight: 600; }
.relative { position: relative; }
.w-100 { width: 100%; }
.bg-gold {
  background-color: var(--color-gold);
}
.bg-gold-50 {
    background-color: var(--color-gold);
    opacity: .5;
}
.text-center { 
  text-align: center;
  margin-top: var(--space-3xl);
}
.mb-10 { margin-bottom: var(--space-3xl); }
.h-28 { height: 7rem; }
.h-100 { height: 100%; }
.bg-transparent { background-color: transparent; }
.z-10 { z-index: 10; }
.p-btn-left {
    width: fit-content;
    text-align: left;
    margin-left: 0 !important;
}
.fit-content {
    width: fit-content;
}

.underline-absolute {
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  width: 100%;
  height: 0.75rem;
  z-index: 0;
  border-radius: 0.25rem;
}

.flex-grow-children {
  display: flex;
}
.flex-grow-children>div {
  flex-grow: 1;
}

/* Gradients */
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, #fdfcf7, var(--color-white));
}

.bg-gradient-white-yellow {
  background: linear-gradient(to bottom, var(--color-white), var(--color-yellow-50));
}

.bg-gradient-white-gray {
  background: linear-gradient(to bottom, var(--color-white), var(--color-gray-50));
}

.wp-block-button__link {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.stripe-button:hover,
.stripe-button:focus,
.swpm-login-submit input[type="submit"]:hover, 
.swpm-edit-profile-form input[type="submit"]:hover, 
.swpm-registration-form input[type="submit"]:hover, 
#swpm-pw-reset-form input[type="submit"]:hover, 
.swpm-profile-submit-button:hover, 
.swpm-plain-btn:hover, 
input[type="submit"].swpm-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.bt-link-gold-hover a:hover {
    background-color: #ffffff00 !important;
    color: var(--wp--preset--color--gold) !important;
    text-decoration: underline;
}

.bt-hover-trans a:hover {
    background-color: transparent !important;
    color: initial !important;
}

.deactivate-link-css a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

span.wp-block-post-terms__separator {
  margin: 0 3px;
}

.one-item-flex {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   COMPOSANTS: NAVIGATION
======================================== */
.nav_account_logged {
  z-index: 99;
  border-radius: 0.75rem;
  padding-top: 0.75rem;
  padding-right: 2rem;
  padding-bottom: 0.75rem;
  padding-left: 2rem;
}
.nav_account_logged a {padding:0;}
@media screen and (max-width: 615px) {
  #row-main-menu {
      justify-content: flex-end;
  }
}

@media (max-width:599px) {
  #bt-right-header {
    justify-content: center;
  }
}

.nav_account_logged .wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
    background-color: #fff;
    color: var(--wp--preset--color--blue-night) !important;
    border-radius: 0.5rem;
    border: 1px solid var(--wp--preset--color--gray);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    right: 0;
    left: auto;
    max-width: 350px;
    width: max-content;
}

.nav_account_logged .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
  margin-bottom: var(--space-xl);
}

/* ========================================
   COMPOSANTS: BOUTON SCROLL
======================================== */
#backToTopBtn {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 45px;
    height: 45px;
    background: var(--color-gold-light);
    color: #fff;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

#backToTopBtn.show {
    opacity: 0.85;
    visibility: visible;
}

#backToTopBtn:hover {
    opacity: 1;
}

/* ========================================
   COMPOSANTS: STATISTIQUES
======================================== */
.exo-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 2px solid transparent;
}

.exo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold);
}

.exo-card h3 {
  color: var(--color-gray-700);
  margin-bottom: var(--space-lg);
  font-size: 1.25rem;
}

.exo-card .stat {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.exo-card .label {
  color: var(--color-gray-500);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exo-card h4 {
  font-size: 1.125rem;
  color: var(--color-gray-700);
  margin-bottom: var(--space-sm);
}

exo-card p {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ========================================
   COMPOSANTS: RIBBON
======================================== */
.ribbon {
  position: absolute;
  top: -0.75rem;
  right: 1.5rem;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-gold);
  color: var(--color-gray-900);
  font-weight: 600;
  border-radius: var(--radius-lg);
  z-index: 1;
  width: 200px;
  text-align: center;
}

/* ========================================
   COMPOSANTS: SOMMAIRE
======================================== */
summary {
  cursor: pointer;
}

.summary-toggle:not(#faq-group > .summary-toggle) {
  background: none;
  border: none;
  color: var(--color-blue-600);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.9em;
  margin-bottom: var(--space-md);
  display: inline-block;
}

.summary-toggle {
  border-radius: 0.75rem;
  background-color: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-md);
}

/* ========================================
   CLASSES DE COULEURS DE TEXTE
======================================== */
.text-blue-600 { color: var(--color-blue-600); }
.text-green-600 { color: var(--color-green-600); }
.text-yellow-600 { color: var(--color-yellow-600); }
.text-orange-600 { color: var(--color-orange-600); }
.text-red-600 { color: var(--color-red-600); }
.text-pink-600 { color: var(--color-pink-600); }
.text-gray-400 { color: var(--color-gray-400); }
.text-red { color: var(--color-red-500); }
.text-purple { color: var(--color-purple-600); }

/* ========================================
   CLASSES DE COULEURS DE FOND
======================================== */
.bg-blue-100 { background-color: var(--color-blue-100); }
.bg-green-50 { background-color: var(--color-green-50); }
.bg-green-100 { background-color: var(--color-green-100); }
.bg-orange-100 { background-color: var(--color-orange-100); }
.bg-orange-600 { background-color: var(--color-orange-600);}
.bg-pink-100 { background-color: var(--color-pink-100); }
.bg-red-50 { background-color: var(--color-red-50); }
.bg-yellow-100 { background-color: var(--color-yellow-100); }
.bg-purple-100 { background-color: var(--color-purple-100); }

/* ========================================
   BORDURES
======================================== */
.border-green-600 { border-color: var(--color-green-600); }
.border-red-500 { border-color: var(--color-red-500); }

.gap-2 { gap: var(--space-sm); }
.mt-05 { margin-top: 0.125rem; }
.mt-1 { margin-top: var(--space-sm); }

/* Animation pour les cartes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

exo-card {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Délai d'animation pour chaque carte */
.exo-card:nth-child(1) { animation-delay: 0.1s; }
.exo-card:nth-child(2) { animation-delay: 0.2s; }
.exo-card:nth-child(3) { animation-delay: 0.3s; }


/* ========================================
   CLASSES DE FORMULAIRE (MEMBERSHIP)
======================================== */
/* --- CONTENEUR GLOBAL --- */
.swpm-login-widget-form,
.swpm-registration-form,
.swpm-edit-profile-form,
.swpm-reset-form,
.swpm-login-widget-logged,
.swpm-pw-reset-widget-form,
.swpm-registration-widget-form {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  font-family: 'Inter', system-ui, sans-serif;
}

/* --- TITRES --- */
.swpm-login-widget-form h3,
.swpm-edit-profile-form h3,
.swpm-reset-form h3,
.swpm-registration-form h3,
.swpm-registration-widget-form h3 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: #222;
  margin-bottom: 1.5rem;
}

/* --- CHAMPS --- */
.swpm-edit-profile-form input[type="text"],
.swpm-edit-profile-form input[type="email"],
.swpm-edit-profile-form input[type="password"],
.swpm-edit-profile-form select,
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"],
#swpm-pw-reset-form input[type="text"],
#swpm-pw-reset-form input[type="email"],
.swpm-registration-form input[type="text"],
.swpm-registration-form input[type="email"],
.swpm-registration-form input[type="password"],
.swpm-registration-form select,
.swpm-registration-widget-form input[type="text"],
.swpm-registration-widget-form input[type="email"],
.swpm-registration-widget-form input[type="password"]{
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.75rem;
  font-size: 1rem;
  color: #333;
  transition: all 0.2s ease;
  margin-bottom: 1rem;
  background-color: #fff;
}

.swpm-edit-profile-form input:focus,
.swpm-login-widget-form input:focus,
#swpm-pw-reset-form input:focus,
.swpm-registration-form input:focus,
.swpm-edit-profile-form select:focus,
.swpm-registration-form select:focus,
.swpm-registration-widget-form input:focus {
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.2);
  outline: none;
}

.swpm-form-row.swpm-state-row, .swpm-form-row.swpm-company-row {display: none;}
.swpm-profile-update-success {text-align: center;}

/* --- LABELS --- */
.swpm-edit-profile-form label,
.swpm-login-widget-form label,
.swpm-registration-form label,
#swpm-pw-reset-form label,
.swpm-registration-widget-form label {
  display: block;
  font-weight: 600;
  color: #444;
  margin-bottom: 0.4rem;
}

/* --- BOUTONS --- */
.swpm-login-submit input[type="submit"],
.swpm-edit-profile-form input[type="submit"],
.swpm-registration-form input[type="submit"],
#swpm-pw-reset-form input[type="submit"],
.swpm-registration-widget-form input[type="submit"],
.swpm-profile-submit-button,
.swpm-submit-btn-default-style,
.swpm-plain-btn,
input[type="submit"].swpm-submit {
  background: #d4a017 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  padding: 1rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(212, 160, 23, 0.25) !important;
  display: block;
  width: 100%;
}

.swpm-login-submit input[type="submit"]:hover,
.swpm-edit-profile-form input[type="submit"]:hover,
.swpm-registration-form input[type="submit"]:hover,
.swpm-reset-form input[type="submit"]:hover,
.swpm-submit-btn-default-style:hover,
.swpm-registration-widget-form input[type="submit"]:hover{
  background: #b88a10 !important;
  box-shadow: 0 4px 10px rgba(212, 160, 23, 0.35) !important;
}

/* --- LIENS --- */
.swpm-login-widget-form a,
.swpm-edit-profile-form a,
#swpm-pw-reset-form a,
.swpm-registration-form a {
  color: #d4a017;
  text-decoration: none;
  font-weight: 500;
}

.swpm-login-widget-form a:hover,
.swpm-edit-profile-form a:hover,
#swpm-pw-reset-form a:hover,
.swpm-registration-form a:hover {
  text-decoration: underline;
}

/* --- MESSAGES --- */
.swpm-login-widget-form .swpm-login-error,
.swpm-login-widget-form .swpm-login-msg,
.swpm-registration-form .swpm-registration-error,
.swpm-registration-form .swpm-success-msg,
#swpm-pw-reset-form .swpm-reset-message {
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.swpm-login-widget-form .swpm-login-error,
.swpm-registration-form .swpm-registration-error {
  background: #ffe5e5;
  color: #c00;
}

.swpm-registration-form .swpm-success-msg,
#swpm-pw-reset-form .swpm-reset-message {
  background: #e6f6ea;
  color: #2d7a3d;
}

/* --- CHECKBOX --- */
.swpm-login-widget-form input[type="checkbox"],
.swpm-registration-widget-form input[type="checkbox"] {
  accent-color: #d4a017;
}

.swpm-password-input-visibility, .swpm-remember-me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom:1rem;
}

.swpm-password-input-visibility label, .swpm-remember-me label {
  margin-bottom:0;
}

/* --- ESPACEMENT --- */
.swpm-login-widget-form .swpm-login-submit,
.swpm-registration-form .swpm-submit-section,
.swpm-edit-profile-form .swpm-edit-profile-submit-section {
  margin-top: 1.5rem;
}

.swpm-post-not-logged-in-msg {
    text-align: center;
    margin: 5rem 0 !important;
    padding: 2rem;
    display: block;
}

.justify-center-mobile > div:not(:nth-child(2)) {
  flex: 0 0 250px;
}

.justify-center-mobile > div:nth-child(2) {
  flex: 1;
}

@media screen and (max-width: 1015px) {
    .justify-center-mobile {
        justify-content: center;
    }
}

/*=======
Page Offres
=======*/
#formule_decouverte > .wp-block-group {
  margin-block-start: var(--wp--preset--spacing--30);
}
.transform {
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
#formule-premium {
  transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#formule-premium:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* --- Style général du bouton d’ouverture --- */
.open-modal-btn {
  background-color: #0073aa;
  color: #fff;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}
.open-modal-btn:hover {
  background-color: #005f8a;
}

/* --- Overlay du modal --- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* --- Contenu du modal --- */
.modal-content {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  width: 90%;
  max-width: 820px;
  text-align: center;
  position: relative;
  animation: slideDown 0.3s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- Bouton de fermeture --- */
.close-modal {
  position: absolute;
  top: 0.8rem;
  right: 1.2rem;
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
  transition: color 0.3s ease;
}
.close-modal:hover {
  color: #000;
}

/*.stripe-button::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('assets/img/stripe-logo.png') no-repeat center center;
  background-size: contain;
}*/

.stripe-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--wp--preset--color--gold);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    border-radius: 0.75rem;
    border-width: 0px;
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--montserrat);
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 700;
    padding-top: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 0.75rem;
    padding-left: 2rem;
    cursor: pointer;
}
#formule-premium .stripe-button {
  background: var(--wp--preset--color--gold);
}
#formule-premium-annuel .stripe-button {
  background: var(--wp--preset--color--blue-night);
}

/* Style for hover and active states */
.my-stripe-button:hover {
    background-color: #0056b3;
}
.my-stripe-button:active {
    background-color: #004085;
}
.swpm-paypal-subscription-button-wrapper>div {width:auto !important;}

/* ========================================
   COMPOSANTS: FORMULAIRES SRFM
======================================== */
.editor-styles-wrapper .srfm-button, .srfm-form-container .srfm-button {
	background: var(--wp--preset--color--gold);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border:none;
}
.editor-styles-wrapper .srfm-button:hover, .srfm-form-container .srfm-button:hover {
	transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ========================================
   COMPOSANTS: FORMULAIRES BREVO
======================================== */
footer .sib-form .entry__field {
    background: transparent;
    border: none;
    border-radius: unset;
}
footer .sib-form .entry__field:focus-within {
    box-shadow: none;
}

.sib-form-message-panel {
  color: #FFF;
}
    /* Champ email */
  footer #sib-form .va-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-gold);
    color: #fff !important;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    height: auto;
  }
  footer #sib-form .va-input::placeholder {
    color: #d3d3d3;
  }
  footer #sib-form .va-input:focus {
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.08);
  }

  /* Bouton */
  footer #sib-form .va-btn {
    background: var(--color-gold);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
    width: 100%;
  }
  footer #sib-form .va-btn:hover {
    background: #b9964f;
    transform: translateY(-2px);
  }
  footer #sib-form .va-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Message sous le formulaire */
  footer .va-footnote {
    color: #b8c0c8;
    font-size: 14px;
    text-align: left;
    margin-top: 6px;
  }

  /* Messages de retour */
  footer .sib-form .va-message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    display: none;
  }
  footer .sib-form .va-message.success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid #4CAF50;
    color: #4CAF50;
  }
  footer .sib-form .va-message.error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid #f44336;
    color: #f44336;
  }
  footer .sib-form .va-message.show {
    display: block;
  }

/*=======================================
   COMPOSANTS: CARROUSEL CARTES
======================================== */
@media (min-width: 768px) {
  .caroussel-card {
    position: relative;
    overflow: hidden;
  }

  .caroussel-card > .wp-block-columns {
    display: flex;
    gap: 2rem;
    will-change: transform;
  }

  .caroussel-card > .wp-block-columns > .wp-block-column {
    flex: 0 0 auto;
    min-width: 260px;
    margin: 0 !important;
  }

  .caroussel-card::before,
  .caroussel-card::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
  }

  .caroussel-card::before {
    left: 0;
  }

  .caroussel-card::after {
    right: 0;
  }
}

/*----------------
Page après inscription
----------------*/
.hidden-block {
    display: none;
}
/* Progress Bar */
.progress-bar-container {
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #D4AF37, #FFD700);
    border-radius: 9999px;
    transition: width 0.5s ease-out;
}
/* Quiz Options */
#options-container {display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));;gap: 0.75rem;}
.option-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background-color: white;
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    text-align: center;
    direction: rtl;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--wp--preset--color--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: transparent !important;
}

.option-btn.correct {
    background-color: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;
}

.option-btn.incorrect {
    background-color: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
}

.option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

#feedback-text {
    text-align: center;
    font-weight: 600;
    font-size: 1.125rem;
}
.feedback-correct {
color: rgb(22 163 74);
}
.feedback-incorrect {
color: rgb(239 68 68);
}
#quiz-screen #next-btn {
    text-align: center;
    display: block;
    font-weight: 600;
    border-radius: 0.75rem;
    cursor: pointer;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: rgb(16, 24, 43);
    color: #fff;
}
#victory-tip-text {text-align:center;}
.exercise-demo-card {cursor:pointer;}
#exercise-demo-zone {text-align:center;}
#exercise-demo-zone div>* {margin:0;}

/* Confetti */
@keyframes confetti-fall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confetti-fall 3s linear forwards;
}

/* ARMember */
#payment-modal .arm_setup_form_1.arm-default-form:not(.arm_admin_member_form) {
  height: 100%;
  overflow-y: auto
}