@charset "UTF-8";
/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * CEKONAY AUTH FORM - CSS Formulaire de connexion/inscription
 * ═══════════════════════════════════════════════════════════════════════════════
 * ✅ Chargé UNIQUEMENT sur pages avec formulaire
 * ✅ Compatible Divi + WooCommerce
 * ✅ Design responsive avec vidéo background
 * ✅ Module à GAUCHE, vidéo à DROITE
 * ✅ Mode sombre intégré avec variables CSS
 */

/* ===================================
   VARIABLES CSS - COULEURS
   =================================== */

/* Variables principales (mode clair) */
:root {
  /* Backgrounds */
  --auth-bg-primary: #ffffff;
  --auth-bg-secondary: #f9fafb;
  --auth-bg-tertiary: #f3f4f6;
  --auth-glass-bg: rgba(255, 255, 255, 0.98);
  --auth-bg-quatro: #6c6cd1;
  /* Texte */
  --auth-text-primary: #1f2937;
  --auth-text-secondary: #6b7280;
  --auth-text-tertiary: #9ca3af;
  
  /* Borders */
  --auth-border-light: #e5e7eb;
  --auth-border-medium: #d1d5db;
  
  /* États spéciaux */
  --auth-success-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  --auth-success-border: #22c55e;
  --auth-success-text: #15803d;
  
  --auth-error-bg: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  --auth-error-border: #ef4444;
  --auth-error-text: #dc2626;
  
  --auth-warning-border: #fbbf24;
  
  /* Zones spécifiques */
  --auth-terms-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  --auth-summary-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  --auth-summary-border: #bae6fd;
  
  /* Inputs */
  --auth-input-bg: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  --auth-input-focus-bg: #ffffff;
  --auth-valid-bg: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  --auth-invalid-bg: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  
  /* Video overlay */
  --auth-video-overlay: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.15) 100%);
  
  /* Progress */
  --auth-progress-inactive: #e5e7eb;
  --auth-progress-inactive-text: #9ca3af;
}

/* Mode sombre */
body.cekonay-dark-mode {
  /* Backgrounds */
  --auth-bg-primary: #1f2937;
  --auth-bg-secondary: #030712;
  --auth-bg-tertiary: #374151;
  --auth-glass-bg: rgba(31, 41, 55, 0.95);
  --auth-bg-quatro: #7256b2;
  /* Texte */
  --auth-text-primary: #ffffff;
  --auth-text-secondary: #9ca3af;
  --auth-text-tertiary: #6b7280;
  
  /* Borders */
  --auth-border-light: #374151;
  --auth-border-medium: #4b5563;
  
  /* États spéciaux */
  --auth-success-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
  --auth-success-border: rgba(34, 197, 94, 0.4);
  --auth-success-text: #4ade80;
  
  --auth-error-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
  --auth-error-border: rgba(239, 68, 68, 0.4);
  --auth-error-text: #f87171;
  
  --auth-warning-border: rgba(251, 191, 36, 0.4);
  
  /* Zones spécifiques */
  --auth-terms-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
  --auth-summary-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  --auth-summary-border: rgba(186, 230, 253, 0.3);
  
  /* Inputs */
  --auth-input-bg: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  --auth-input-focus-bg: #1f2937;
  --auth-valid-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, #1f2937 100%);
  --auth-invalid-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, #1f2937 100%);
  
  /* Video overlay */
  --auth-video-overlay: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.25) 100%);
  
  /* Progress */
  --auth-progress-inactive: #374151;
  --auth-progress-inactive-text: #6b7280;
}

/* ===================================
   RESET & BASE
   =================================== */

* {
    box-sizing: border-box;
}

/* ===================================
   CONTAINER PRINCIPAL
   =================================== */

.cekonay-video-container {
    z-index: 1 !important;
    display: flex;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===================================
   MODULE D'AUTHENTIFICATION (GAUCHE)
   =================================== */

.cekonay-auth-wrapper {
    width: 540px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--auth-glass-bg);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 10;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    order: 1; /* Force à gauche */
}

.cekonay-auth-container {
    background: var(--auth-bg-primary);
    border-radius: 24px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.08);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 480px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    animation: cekAuthGlisse 0.4s ease-out;
}

@media screen and (min-width: 768px) {
    .cekonay-auth-wrapper {
        top: 80px;
    }
}

@media screen and (max-width: 767px) {
    .cekonay-auth-wrapper {
        top: -10px;
    }
}

body.cekonay-dark-mode .cekonay-auth-container {
    border: 1px solid var(--auth-border-light);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* glissement seul : la carte est visible dès le premier affichage (plus de fondu depuis l'invisible) */
@keyframes cekAuthGlisse {
    from {
        transform: translateX(-24px);
    }
    to {
        transform: translateX(0);
    }
}

.cekonay-auth-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

/* ===================================
   ZONE VIDÉO BACKGROUND (DROITE)
   =================================== */

.cekonay-video-background {
    flex: 1;
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
    order: 2; /* Force à droite */
}

#cekonay-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#cekonay-bg-video.loaded {
    opacity: 1;
}

.cekonay-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--auth-video-overlay);
    z-index: 2;
    animation: overlayPulse 6s ease-in-out infinite alternate;
}

@keyframes overlayPulse {
    0% {
        background: rgba(102, 126, 234, 0.25);
    }
    100% {
        background: rgba(118, 75, 162, 0.15);
    }
}

body.cekonay-dark-mode .cekonay-video-overlay {
    animation-name: overlayPulseDark;
}

@keyframes overlayPulseDark {
    0% {
        background: rgba(102, 126, 234, 0.15);
    }
    100% {
        background: rgba(118, 75, 162, 0.25);
    }
}

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

.cekonay-auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Logo Cekonay auth (vert clair / mauve sombre) */
.cekonay-auth-logo {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}

.cekonay-auth-logo img {
    max-width: 150px;
    height: auto;
}

/* Mode clair : logo vert visible */
.cekonay-auth-logo .logo-light { display: inline-block; }
.cekonay-auth-logo .logo-dark { display: none; }

/* Mode sombre : logo mauve visible */
body.cekonay-dark-mode .cekonay-auth-logo .logo-light { display: none; }
body.cekonay-dark-mode .cekonay-auth-logo .logo-dark { display: inline-block; }

.cekonay-auth-header p {
    color: var(--auth-text-secondary) !important;
    font-size: 1rem !important;
    margin: 0.5rem 0 !important;
    font-weight: 500;
}

.cekonay-tagline {
    color: #667eea !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-style: italic !important;
}

.cekonay-shop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1.2rem;
    margin: 0.8rem auto 0;
    color: #2F2C29 !important;
    border: 2px solid #ffffff !important;
    border-radius: 100px;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.1;
    text-decoration: none !important;
    background-color: #EBB028 !important;
    box-shadow: 0 10px 24px rgba(235, 176, 40, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cekonay-shop-cta:hover,
.cekonay-shop-cta:focus-visible {
    color: #2F2C29 !important;
    background-color: #f0b83c !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(235, 176, 40, 0.28);
    text-decoration: none !important;
}

/* ===================================
   BARRE DE PROGRESSION
   =================================== */

.cekonay-progress-bar {
    display: none;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.cekonay-progress-bar.visible {
    display: flex;
}

.progress-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--auth-progress-inactive);
    color: var(--auth-progress-inactive-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.progress-step.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: scale(1.1);
}

.progress-step.completed {
    background: #10b981;
    color: white;
}

.progress-step.completed::after {
    content: '✓';
    font-size: 0.75rem;
}

.progress-line {
    width: 60px;
    height: 2px;
    background: var(--auth-progress-inactive);
    transition: all 0.3s ease;
}

.progress-line.completed {
    background: #10b981;
}

.progress-line.completed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #10b981 0%, #667eea 100%);
    animation: progressSlide 0.6s ease-out;
}

@keyframes progressSlide {
    from { width: 0; }
    to { width: 100%; }
}

/* ===================================
   SECTIONS FORMULAIRES
   =================================== */

.cekonay-form-section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cekonay-form-section.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===================================
   ÉTAPES D'INSCRIPTION
   =================================== */

.cekonay-step {
    display: none;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cekonay-step.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.cekonay-step.prev {
    transform: translateX(-30px);
}

.step-header {
    text-align: center;
    margin-bottom: 2rem;
}

.step-header h3 {
    color: var(--auth-text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.step-header p {
    color: var(--auth-text-secondary);
    font-size: 0.9rem;
}

/* ===================================
   CHAMPS DE FORMULAIRE
   =================================== */

.cekonay-input-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.cekonay-input-group input {
    width: 100% !important;
    padding: 1.1rem 1.3rem !important;
    border: 2px solid var(--auth-border-light) !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: var(--auth-input-bg) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    color: var(--auth-text-primary) !important;
}

.cekonay-input-group input::placeholder {
    color: var(--auth-text-tertiary) !important;
    font-weight: 500 !important;
}

.cekonay-input-group input:focus {
    outline: none !important;
    border-color: #667eea !important;
    background: var(--auth-input-focus-bg) !important;
    box-shadow:
        0 0 0 4px rgba(102, 126, 234, 0.1),
        0 4px 12px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* États de validation */
.cekonay-input-group input.cekonay-field-valid {
    border-color: #10b981 !important;
    background: var(--auth-valid-bg) !important;
}

.cekonay-input-group input.cekonay-field-invalid {
    border-color: #ef4444 !important;
    background: var(--auth-invalid-bg) !important;
}

.cekonay-field-feedback {
    position: absolute;
    bottom: -22px;
    left: 1rem;
    font-size: 0.8rem;
    color: #ef4444;
    font-weight: 500;
    background: #fef2f2;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    display: none;
}

body.cekonay-dark-mode .cekonay-field-feedback {
    color: var(--auth-error-text);
    background: var(--auth-error-bg);
}

/* ===================================
   INDICATEUR MOT DE PASSE
   =================================== */

.cekonay-password-strength {
    margin-top: 0.6rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid;
    display: none;
}

.cekonay-password-strength.visible {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* ===================================
   CHECKBOX
   =================================== */

.cekonay-remember-group {
    margin-bottom: 2rem;
}

.cekonay-checkbox {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    color: var(--auth-text-secondary) !important;
    font-weight: 500 !important;
    user-select: none !important;
}

.cekonay-checkbox input {
    display: none !important;
}

.checkmark {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--auth-border-medium) !important;
    border-radius: 5px !important;
    margin-right: 0.8rem !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    background: var(--auth-bg-primary) !important;
}

.cekonay-checkbox input:checked + .checkmark {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
}

.cekonay-checkbox input:checked + .checkmark::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* ===================================
   BOUTONS ÉTAPES
   =================================== */

.cekonay-step-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.cekonay-step-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
}

.cekonay-step-btn.secondary {
    background: var(--auth-bg-tertiary) !important;
    color: var(--auth-text-secondary) !important;
    width: auto !important;
    flex: 1 !important;
}

.cekonay-step-btn.secondary:hover {
    background: var(--auth-border-light) !important;
    color: var(--auth-text-primary) !important;
}

.step-buttons {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
}

.btn-arrow {
    transition: transform 0.3s ease !important;
}

.cekonay-step-btn:hover .btn-arrow {
    transform: translateX(4px) !important;
}

/* ===================================
   BOUTON SOUMISSION
   =================================== */

.cekonay-submit-btn {
    width: 100% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 1.2rem 2rem !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3) !important;
}

.cekonay-submit-btn:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4) !important;
}

.cekonay-submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.btn-loading {
    display: none;
}

.cekonay-submit-btn.loading .btn-text {
    display: none;
}

.cekonay-submit-btn.loading .btn-loading {
    display: inline;
}

/* ===================================
   CONDITIONS GÉNÉRALES
   =================================== */

.cekonay-terms-group {
    margin-bottom: 2rem;
    padding: 1.2rem;
    background: var(--auth-terms-bg);
    border: 1px solid var(--auth-warning-border);
    border-radius: 12px;
}

.cekonay-terms-checkbox {
    align-items: flex-start !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
}

.cekonay-terms-checkbox .checkmark {
    margin-top: 2px !important;
    flex-shrink: 0;
}

.terms-text {
    flex: 1;
}

.terms-text a {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease !important;
}

.terms-text a:hover {
    color: #764ba2 !important;
    border-bottom-color: #764ba2 !important;
}

.cekonay-terms-checkbox input:required:invalid + .checkmark {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

.cekonay-terms-checkbox input:required:valid + .checkmark {
    border-color: #10b981 !important;
}

/* ===================================
   RÉCAPITULATIF INSCRIPTION
   =================================== */

.signup-summary {
    background: var(--auth-summary-bg);
    border: 1px solid var(--auth-summary-border);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.summary-item:last-child {
    margin-bottom: 0;
}

.summary-item strong {
    color: var(--auth-text-primary);
}

.summary-item span {
    color: #667eea;
    font-weight: 500;
}

/* ===================================
   MESSAGES
   =================================== */

#cekonay-messages {
    margin-bottom: 1.5rem;
}

.cekonay-message {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
    border-left: 4px solid !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    animation: slideDown 0.3s ease-out;
}

.cekonay-message--success {
    background: var(--auth-success-bg) !important;
    border-color: var(--auth-success-border) !important;
    color: var(--auth-success-text) !important;
}

.cekonay-message--error {
    background: var(--auth-error-bg) !important;
    border-color: var(--auth-error-border) !important;
    color: var(--auth-error-text) !important;
}

/* Confirmation de connexion uniquement */
#cekonay-messages .cekonay-login-confirmation {
    box-sizing: border-box !important;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--auth-success-border) !important;
    background: var(--auth-success-bg) !important;
    color: var(--auth-success-text) !important;
}

#cekonay-messages .cekonay-login-confirmation__icon {
    box-sizing: border-box;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    color: var(--auth-success-text);
}

#cekonay-messages .cekonay-login-confirmation__content {
    min-width: 0;
    overflow-wrap: anywhere;
}

#cekonay-messages .cekonay-login-confirmation__title {
    font-weight: 700;
}

#cekonay-messages .cekonay-login-confirmation__detail {
    margin-top: 0.2rem;
    font-size: 0.875em;
    font-weight: 400;
}

/* Erreurs du formulaire d'authentification */
#cekonay-messages .cekonay-message--error {
    box-sizing: border-box !important;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--auth-error-border) !important;
    overflow-wrap: anywhere;
}

#cekonay-messages .cekonay-message__icon {
    box-sizing: border-box;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    color: var(--auth-error-text);
}

#cekonay-messages .cekonay-message__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ===================================
   FOOTER
   =================================== */

.cekonay-form-footer {
    text-align: center !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--auth-border-light) !important;
    margin-top: 2rem !important;
}

.cekonay-forgot a {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: color 0.3s ease !important;
}

.cekonay-forgot a:hover {
    color: #764ba2 !important;
}

.cekonay-switch-btn {
    background: transparent !important;
    border: 2px solid var(--auth-border-light) !important;
    color: var(--auth-text-secondary) !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    margin-top: 1rem !important;
}

.cekonay-switch-btn:hover {
    border-color: #667eea !important;
    color: #667eea !important;
    background: rgba(102, 126, 234, 0.05) !important;
}

.cekonay-switch-btn strong {
    color: #667eea !important;
    font-weight: 700 !important;
}

/* ===================================
   FORMULAIRE CACHÉ
   =================================== */

.cekonay-hidden-form {
    display: none;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 1024px) {
    .cekonay-video-container {
        flex-direction: column;
    }

    .cekonay-auth-wrapper {
        width: 100%;
        min-height: auto;
        padding: 2rem 1rem;
        order: 1;
    }

    .cekonay-video-background {
        order: 2;
        min-height: 40vh;
    }
}

@media (max-width: 768px) {
    .cekonay-auth-wrapper {
        padding: 1rem;
        margin-top: 60px;
    }

    .cekonay-auth-container {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .cekonay-auth-header h1 {
        font-size: 2rem !important;
    }

    .step-buttons {
        flex-direction: column !important;
    }

    .cekonay-step-btn.secondary {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .cekonay-auth-container {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .cekonay-auth-header h1 {
        font-size: 1.8rem !important;
    }

    .cekonay-input-group input {
        padding: 1rem !important;
        font-size: 0.95rem !important;
    }

    .progress-step {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .progress-line {
        width: 40px;
    }

    .cekonay-terms-checkbox {
        font-size: 0.85rem !important;
    }

    .terms-text {
        line-height: 1.4 !important;
    }

    .terms-text a {
        display: inline-block;
        margin: 0 2px;
    }
}

/* ===================================
   COMPATIBILITÉ DIVI
   =================================== */

.et_pb_post .entry-title {
    display: none !important;
}

/* ===================================
   ANIMATIONS
   =================================== */

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



.cekonay-auth-header {
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative; 
    flex-wrap: wrap;
}

.cekonay-auth-header h1 {
    margin: 0;
}

#cekonay-dark-toggle {
    position: absolute;
    top: 0;      
    right: 0;     
}

#cekonay-subtitle,
.cekonay-tagline,
.cekonay-shop-cta {
    width: 100%;
    text-align: center;
}

/* H1 subtitle - style comme un paragraphe (SEO) */
h1#cekonay-subtitle,
.cekonay-auth-header h1#cekonay-subtitle {
    color: var(--auth-text-secondary) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0.5rem 0 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--auth-text-secondary) !important;
    background-clip: unset !important;
    letter-spacing: normal !important;
}

.cekonay-dark-toggle {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #1c71e3;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color:#d5d8f5;
  }

  /* Icônes lune/soleil dans le bouton toggle */
  .cekonay-dark-toggle .icon-moon,
  .cekonay-dark-toggle .icon-sun {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* Mode clair : afficher lune, cacher soleil */
  .cekonay-dark-toggle .icon-moon { display: block; }
  .cekonay-dark-toggle .icon-sun { display: none; }

  /* Mode sombre : afficher soleil, cacher lune */
  body.cekonay-dark-mode .cekonay-dark-toggle .icon-moon { display: none; }
  body.cekonay-dark-mode .cekonay-dark-toggle .icon-sun { display: block; }

  @media print {
    .cekonay-header,
    .cekonay-back-btn,
    .cekonay-dark-toggle,
    .cekonay-fab,
    .cekonay-btn,
    .cekonay-social-share,
    .cekonay-mobile-menu-btn {
      display: none !important;
    }
    
    .cekonay-card {
      break-inside: avoid;
      box-shadow: none;
      border: 1px solid #000;
    }
  }




  /* ==========================================================================
   CSS WooCommerce personnalisé pour Cekonay
   À ajouter à la fin de votre fichier CSS existant
   ========================================================================== */

/* Mise à jour des variables avec vos nouvelles couleurs */
:root {
  --cekonay-primary: #764ba2;
  --cekonay-primary-dark: #5e3b81;
  --cekonay-secondary: #667eea;
  --cekonay-secondary-dark: #3f56bd;
  --cekonay-gradient: linear-gradient(to right, var(--cekonay-primary), var(--cekonay-secondary));
  --cekonay-success: #22c55e;
  --cekonay-error: #ef4444;
  --cekonay-warning: #fb923c;
  --cekonay-info: #3b82f6;
}

/* ==========================================================================
   FORMULAIRES WOOCOMMERCE
   ========================================================================== */

/* Conteneurs de formulaires */
.woocommerce form,
.woocommerce-form {
  background: transparent;
  border: none;
  padding: 0;
}

/* Groupes de champs */
.woocommerce-form-row,
.woocommerce form .form-row {
  margin-bottom: 1.5rem;
}

.woocommerce form .form-row.form-row-wide {
  width: 100%;
}

.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last {
  width: 48%;
  float: left;
}

.woocommerce form .form-row.form-row-last {
  float: right;
}

@media (max-width: 768px) {
  .woocommerce form .form-row.form-row-first,
  .woocommerce form .form-row.form-row-last {
    width: 100%;
    float: none;
  }
}

/* Labels */
.woocommerce-form-row label,
.woocommerce form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.woocommerce-form-row label abbr,
.woocommerce form label abbr {
  color: var(--cekonay-error);
  text-decoration: none;
  font-weight: bold;
  margin-left: 0.25rem;
}

/* Champs de saisie */
.woocommerce-input-wrapper input[type="text"],
.woocommerce-input-wrapper input[type="email"],
.woocommerce-input-wrapper input[type="password"],
.woocommerce-input-wrapper input[type="tel"],
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: none;
  outline: none;
}

.woocommerce-input-wrapper input:focus,
.woocommerce form input:focus,
.woocommerce-input-wrapper select:focus,
.woocommerce form select:focus,
.woocommerce-input-wrapper textarea:focus,
.woocommerce form textarea:focus {
  border-color: var(--cekonay-primary);
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
  background-color: var(--bg-secondary);
}

/* Champs avec erreur */
.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid input {
  border-color: var(--cekonay-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Dark mode pour les champs */
body.cekonay-dark-mode .woocommerce-input-wrapper input,
body.cekonay-dark-mode .woocommerce form input,
body.cekonay-dark-mode .woocommerce-input-wrapper select,
body.cekonay-dark-mode .woocommerce form select,
body.cekonay-dark-mode .woocommerce-input-wrapper textarea,
body.cekonay-dark-mode .woocommerce form textarea {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ==========================================================================
   BOUTONS WOOCOMMERCE
   ========================================================================== */

/* Boutons principaux */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page a.button,
.woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
  
  /* Style primaire par défaut */
  background: var(--cekonay-gradient);
  color: white;
  box-shadow: var(--shadow);
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce .button:hover {
  background: linear-gradient(to right, var(--cekonay-primary-dark), var(--cekonay-secondary-dark));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
  text-decoration: none;
}

/* Bouton secondaire */
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .button.alt {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .button.alt:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Bouton de suppression */
.woocommerce .remove,
.woocommerce-remove-link {
  background: var(--cekonay-error) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce .remove:hover,
.woocommerce-remove-link:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

/* ==========================================================================
   MESSAGES ET NOTIFICATIONS
   ========================================================================== */

/* Messages de base */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  border: none;
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
}

/* Message de succès */
.woocommerce-message,
.woocommerce .woocommerce-message {
  background: rgba(34, 197, 94, 0.1);
  color: var(--cekonay-success);
  border-left: 4px solid var(--cekonay-success);
}

body.cekonay-dark-mode .woocommerce-message,
body.cekonay-dark-mode .woocommerce .woocommerce-message {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* Message d'erreur */
.woocommerce-error,
.woocommerce .woocommerce-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--cekonay-error);
  border-left: 4px solid var(--cekonay-error);
}

body.cekonay-dark-mode .woocommerce-error,
body.cekonay-dark-mode .woocommerce .woocommerce-error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Message d'information */
.woocommerce-info,
.woocommerce .woocommerce-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--cekonay-info);
  border-left: 4px solid var(--cekonay-info);
}

body.cekonay-dark-mode .woocommerce-info,
body.cekonay-dark-mode .woocommerce .woocommerce-info {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Boutons dans les messages */
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  margin-left: 1rem;
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
}

/* ==========================================================================
   TABLEAUX ET LISTES
   ========================================================================== */

/* Tables WooCommerce */
.woocommerce table.shop_table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 100%;
  margin-bottom: 1.5rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.woocommerce table.shop_table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce table.shop_table tbody tr:last-child th,
.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive pour les tables */
@media (max-width: 768px) {
  .woocommerce table.shop_table {
    font-size: 0.875rem;
  }
  
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ==========================================================================
   ADRESSES ET FORMULAIRES SPÉCIAUX
   ========================================================================== */

/* Section d'adresse */
.woocommerce-address-fields {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.woocommerce-address-fields h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Clearfix pour les formulaires flottants */
.woocommerce form::after,
.woocommerce-address-fields::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
  text-align: center;
  margin: 2rem 0;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--cekonay-primary);
  color: white;
  border-color: var(--cekonay-primary);
  transform: translateY(-1px);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--cekonay-gradient);
  color: white;
  border-color: var(--cekonay-primary);
}

/* ==========================================================================
   ÉLÉMENTS DIVERS
   ========================================================================== */

/* Selecteurs de pays */
.woocommerce .select2-container {
  width: 100% !important;
}

.woocommerce .select2-container .select2-selection--single {
  height: auto !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.woocommerce .select2-container .select2-selection--single:focus {
  border-color: var(--cekonay-primary) !important;
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1) !important;
}

/* Checkboxes et radios personnalisés */
.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  accent-color: var(--cekonay-primary);
  border-radius: 0.25rem;
}

/* Liens WooCommerce */
.woocommerce a {
  color: var(--cekonay-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.woocommerce a:hover {
  color: var(--cekonay-primary-dark);
  text-decoration: underline;
}

/* Loading states */
.woocommerce .blockUI.blockOverlay {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

body.cekonay-dark-mode .woocommerce .blockUI.blockOverlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.woocommerce .loader {
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--cekonay-primary);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 767px) {
  .woocommerce-address-fields {
    padding: 1rem;
  }
  
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce .button {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .woocommerce table.shop_table {
    border-radius: 0.75rem;
  }
}

/* Finition UX Cekonay Portes sur mesure, limitée à cette page. */
body.page-template-page-connexion-cekonay .cekonay-auth-container {
  width: min(100%, 448px);
  padding: clamp(28px, 4vw, 42px) clamp(20px, 4vw, 36px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
body.page-template-page-connexion-cekonay .cekonay-auth-header {
  margin-bottom: 24px;
}
body.page-template-page-connexion-cekonay .cekonay-auth-intro {
  max-width: 34em;
  margin: 8px auto 0 !important;
  color: var(--auth-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.5;
  font-weight: 400;
}
body.page-template-page-connexion-cekonay .cekonay-shop-cta {
  min-height: 48px;
  margin-top: 16px;
  padding: 0 20px;
  background: transparent !important;
  border: 1px solid var(--auth-border-medium) !important;
  color: var(--auth-text-primary) !important;
  box-shadow: none;
}
body.page-template-page-connexion-cekonay .cekonay-shop-cta:hover,
body.page-template-page-connexion-cekonay .cekonay-shop-cta:focus-visible {
  background: var(--auth-bg-tertiary) !important;
  color: var(--auth-text-primary) !important;
  box-shadow: none;
}
body.page-template-page-connexion-cekonay .cekonay-progress-bar {
  margin: 0 auto 24px;
}
body.page-template-page-connexion-cekonay .cekonay-input-group input,
body.page-template-page-connexion-cekonay .cekonay-submit-btn,
body.page-template-page-connexion-cekonay .cekonay-step-btn {
  min-height: 48px;
}
body.page-template-page-connexion-cekonay .cekonay-submit-btn {
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: #0071e3 !important;
  box-shadow: 0 8px 20px rgba(0,113,227,.2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.page-template-page-connexion-cekonay .cekonay-submit-btn:hover:not(:disabled),
body.page-template-page-connexion-cekonay .cekonay-submit-btn:focus-visible {
  background: #0077ed !important;
  box-shadow: 0 10px 24px rgba(0,113,227,.28) !important;
}
body.page-template-page-connexion-cekonay .cekonay-switch-btn,
body.page-template-page-connexion-cekonay .cekonay-forgot a {
  min-height: 48px;
}
body.page-template-page-connexion-cekonay .cekonay-auth-container::before {
  content: none;
  display: none;
}
body.page-template-page-connexion-cekonay .cekonay-auth-header > .cekonay-logo-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto 14px;
  line-height: 1;
  color: var(--auth-text-primary);
}
body.page-template-page-connexion-cekonay .cekonay-auth-header > .cekonay-logo-stack .cekonay-logo-main {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.04em;
}
body.page-template-page-connexion-cekonay .cekonay-auth-header > .cekonay-logo-stack .cekonay-logo-main span,
body.page-template-page-connexion-cekonay .cekonay-auth-header > .cekonay-logo-stack .cekonay-logo-sub {
  color: #c65a16;
}
body.page-template-page-connexion-cekonay .cekonay-auth-header > .cekonay-logo-stack .cekonay-logo-sub {
  align-self: flex-end;
  margin-top: 3px;
  padding-right: .12em;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}
@media (max-width: 767px) {
  body.page-template-page-connexion-cekonay .cekonay-auth-wrapper {
    min-height: 100vh;
    padding: 16px 12px 28px;
    align-items: flex-start;
  }
  body.page-template-page-connexion-cekonay .cekonay-auth-container {
    width: 100%;
    padding: 24px 18px 26px;
    border-radius: 20px;
  }
  body.page-template-page-connexion-cekonay .cekonay-auth-intro {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   INTÉGRATION AVEC LE DESIGN CEKONAY
   ========================================================================== */

/* S'assurer que les éléments WooCommerce héritent des bonnes polices */
.woocommerce,
.woocommerce * {
  font-family: var(--font-system);
}

/* Animation d'apparition pour les éléments WooCommerce */
.woocommerce-address-fields,
.woocommerce table.shop_table,
.woocommerce form {
  animation: fadeInUp 0.5s ease-out;
}

/* Masquer les éléments inutiles */
.woocommerce .woocommerce-breadcrumb {
  display: none;
}

/* Style pour les required fields */
.woocommerce form .required {
  color: var(--cekonay-error);
}











.ckn-passwrap{position:relative;display:flex;align-items:center}
.ckn-passwrap input[type="password"],
.ckn-passwrap input[type="text"]{width:100%;padding-right:2.5rem}
.ckn-pass-toggle{
  position:absolute;right:.625rem;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;padding:.25rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;color:#6b7280
}
.ckn-pass-toggle:focus{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}
.cekonay-dark-mode .ckn-pass-toggle{color:#d1d5db}

.cekonay-video-background.place_video_connexion {
  position: relative;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
}

.cekonay-video-background.place_video_connexion .cekonay-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

/* Page connexion: vignette en fond */
.cekonay-video-background.place_video_connexion .video-background-container img {
  z-index: 0 !important;
}

/* Comportement initial (tablette/smartphone): la vidéo remplace la vignette */
.cekonay-video-background.place_video_connexion .video-background-container video {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
}

/* Connexion : fond image responsif, sans chargement ni dépendance vidéo. */
body.page-template-page-connexion-cekonay .cekonay-video-container {
  display: block;
  min-height: 100vh;
  background: #111;
}
body.page-template-page-connexion-cekonay .cekonay-auth-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  order: initial;
  padding: clamp(24px, 5vw, 54px);
  background: rgba(255,255,255,.08);
  backdrop-filter: none;
  box-shadow: none;
}
body.page-template-page-connexion-cekonay .cekonay-auth-container {
  max-width: 440px;
  margin: auto;
}
body.page-template-page-connexion-cekonay .cekonay-auth-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #171614;
}
body.page-template-page-connexion-cekonay .cekonay-auth-backdrop picture,
body.page-template-page-connexion-cekonay .cekonay-auth-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
}
body.page-template-page-connexion-cekonay .cekonay-auth-backdrop img {
  object-fit: cover;
  object-position: center;
}
@media (max-width: 980px) {
  body.page-template-page-connexion-cekonay .cekonay-auth-wrapper { min-height: auto; order: 1; }
  body.page-template-page-connexion-cekonay .cekonay-auth-backdrop { min-height: 100%; }
}
@media (max-width: 767px) {
  body.page-template-page-connexion-cekonay .cekonay-auth-wrapper { padding: 20px 16px; }
  body.page-template-page-connexion-cekonay .cekonay-auth-container { border-radius: 18px; }
  body.page-template-page-connexion-cekonay .cekonay-auth-backdrop { min-height: 100%; }
}

/* Desktop uniquement: vidéo en bas à droite, max 1000px, proportions conservées */
@media screen and (min-width: 981px) {
  .cekonay-video-background.place_video_connexion .video-background-container video {
    top: auto !important;
    left: auto !important;
    right: 3% !important;
    bottom: 3% !important;
    width: 100% !important;
    max-width: 606px !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    border: 3px solid #ffffff !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
}

.motif-livraison::before {
  content: "LIVRAISON \A EN \A 4 SEMAINES*";
  white-space: pre;
  display: block;
  text-align: center;
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.69);
  pointer-events: none;
  font-size: 6vw;
  opacity: 0;
  transform: scale(0.75);
  animation: rebondLivraison 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s;
}

.motif-livraison {
  position: relative;
}

.motif-livraison::after {
  content: "*Temps moyen constate pour des facades standard 4 chants en blanc.";
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vh, 20px);
  transform: translateX(-50%);
  width: min(92%, 640px);
  text-align: center;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 6;
}

@media screen and (min-width: 981px) {
  .motif-livraison::before {
    color: rgba(255, 255, 255, 0.97);
  }
}

@keyframes rebondLivraison {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (max-width: 1024px) {
  .motif-livraison::before {
    font-size: 7vw;
  }
}

@media screen and (max-width: 768px) {
  .motif-livraison::before {
    font-size: 12vw;
    width: 90%;
  }

  .motif-livraison::before {
    content: "LIVRAISON \A 4 \A SEMAINES*";
  }

  .motif-livraison::after {
    width: 90%;
    bottom: 12px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .motif-livraison::before {
    font-size: 14vw;
  }

  .motif-livraison::after {
    width: 92%;
    bottom: 10px;
    font-size: 10px;
    line-height: 1.25;
  }
}

/* Actions sous un message d'erreur (Mot de passe oublié, Créer mon compte). */
.cekonay-message__actions{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}
.cekonay-message__action{font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.cekonay-message__action:hover,.cekonay-message__action:focus-visible{text-decoration-thickness:2px}

/* ===================================
   CHARTE BLANC ET NOIR, FILET OR (page Connexion / Inscription)
   Un seul rendu : carte blanche sur la photo, texte et bouton noirs ; l'or ne sert qu'au point du logo, au focus et à l'étape en cours.
   Ajout en fin de fichier : les règles précédentes restent, celles-ci priment.
   =================================== */
body.page-template-page-connexion-cekonay {
  --cx-fond: #121210;
  --cx-carte: #ffffff;
  --cx-champ: #f7f6f2;
  --cx-champ-focus: #ffffff;
  --cx-trait: #d6d1c7;
  --cx-trait-or: rgba(0, 0, 0, .08);
  --cx-ivoire: #141412;
  --cx-sur-ivoire: #ffffff;
  --cx-texte: #141412;
  --cx-doux: #55514a;
  --cx-pale: #7d786d;
  --cx-or: #b08d4c;
  --cx-or-clair: #e6cd94;
  --cx-champagne: #f5e0ac;
  --cx-sur-or: #1b1710;
  --cx-erreur: #a63d32;
  --cx-erreur-fond: #fbeeec;
  --cx-succes: #2f6b3a;
  --cx-succes-fond: #eef6ec;
  background: var(--cx-fond);
}

/* Un seul rendu : le bouton clair / sombre n'a plus lieu d'être. */
body.page-template-page-connexion-cekonay .cekonay-dark-toggle,
body.page-template-page-connexion-cekonay #cekonay-dark-toggle { display: none !important; }

body.page-template-page-connexion-cekonay .cekonay-video-container { background: var(--cx-fond); }

/* Rien ne doit être coupé : la page défile, la carte n'est plus décalée ni rognée */
body.page-template-page-connexion-cekonay .cekonay-video-container { overflow: visible !important; min-height: 100vh; min-height: 100dvh; }
body.page-template-page-connexion-cekonay .cekonay-auth-backdrop { position: fixed !important; inset: 0; min-height: 0 !important; }
body.page-template-page-connexion-cekonay .cekonay-auth-wrapper {
  top: auto !important; min-height: 100vh !important; min-height: 100dvh !important; height: auto !important;
  align-items: flex-start !important; padding: clamp(24px, 6vh, 64px) 16px !important; box-sizing: border-box; overflow: visible !important;
}
body.page-template-page-connexion-cekonay .cekonay-auth-container { overflow: visible !important; margin: 0 auto !important; max-width: 460px !important; width: 100% !important; box-sizing: border-box; }

/* Carte */
body.page-template-page-connexion-cekonay .cekonay-auth-container {
  background: var(--cx-carte) !important;
  color: var(--cx-texte);
  border: 1px solid var(--cx-trait-or) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
  padding: 40px 36px 32px !important;
}

body.page-template-page-connexion-cekonay .cekonay-auth-container::before { content: none !important; display: none !important; }

/* En-tête */
body.page-template-page-connexion-cekonay .cekonay-auth-header { text-align: center; }
/* Logo de la carte : mêmes couleurs que le logo du header (noir, point et « portes sur mesure » orange). Le header n'est pas touché. */
body.page-template-page-connexion-cekonay .cekonay-auth-header .cekonay-logo-main { color: #1d1d1f !important; }
body.page-template-page-connexion-cekonay #cekonay-subtitle {
  color: var(--cx-texte) !important; -webkit-text-fill-color: var(--cx-texte) !important; background: none !important;
  font-size: clamp(22px, 2.4vw, 26px) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-wrap: balance;
  margin: 18px 0 8px !important;
}
body.page-template-page-connexion-cekonay .cekonay-auth-intro { color: var(--cx-doux) !important; font-size: 14.5px !important; line-height: 1.5 !important; }
body.page-template-page-connexion-cekonay .cekonay-shop-cta {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: auto !important; min-height: 40px; padding: 8px 20px !important;
  background: transparent !important; color: var(--cx-texte) !important;
  border: 1px solid var(--cx-trait) !important; border-radius: 999px !important;
  font-size: 13.5px !important; font-weight: 600 !important; text-decoration: none !important;
  box-shadow: none !important; transition: border-color .2s, background .2s;
}
body.page-template-page-connexion-cekonay .cekonay-shop-cta:hover { border-color: var(--cx-pale) !important; background: rgba(0,0,0,.03) !important; }

/* Étapes : chiffres seuls, plus de coche ajoutée par le CSS */
body.page-template-page-connexion-cekonay .cekonay-progress-bar { gap: 0; margin: 26px auto 22px !important; }
body.page-template-page-connexion-cekonay .progress-step {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: transparent !important; color: var(--cx-pale) !important;
  border: 1px solid var(--cx-trait) !important; box-shadow: none !important;
  font-size: 14px !important; font-weight: 650 !important; transform: none !important;
  font-variant-numeric: tabular-nums;
}
body.page-template-page-connexion-cekonay .progress-step.active {
  background: transparent !important;
  color: var(--cx-texte) !important; border-color: var(--cx-or) !important;
  box-shadow: none !important;
}
body.page-template-page-connexion-cekonay .progress-step.completed {
  background: var(--cx-champ) !important; color: var(--cx-doux) !important; border-color: var(--cx-trait) !important;
}
body.page-template-page-connexion-cekonay .progress-step::after,
body.page-template-page-connexion-cekonay .progress-step.completed::after { content: none !important; display: none !important; }
body.page-template-page-connexion-cekonay .progress-line { width: 56px !important; height: 1px !important; background: var(--cx-trait) !important; }
body.page-template-page-connexion-cekonay .progress-line.completed { background: var(--cx-pale) !important; }
body.page-template-page-connexion-cekonay .progress-line::after,
body.page-template-page-connexion-cekonay .progress-line.completed::after { content: none !important; display: none !important; }

/* Titres d'étape */
body.page-template-page-connexion-cekonay .step-header { text-align: center; margin-bottom: 20px !important; }
body.page-template-page-connexion-cekonay .step-header h3 { color: var(--cx-texte) !important; font-size: 19px !important; font-weight: 650 !important; margin: 0 0 4px !important; }
body.page-template-page-connexion-cekonay .step-header p { color: var(--cx-doux) !important; font-size: 14px !important; margin: 0 !important; }

/* Champs */
body.page-template-page-connexion-cekonay .cekonay-input-group { margin-bottom: 12px !important; }
body.page-template-page-connexion-cekonay .cekonay-input-group input {
  width: 100% !important; min-height: 52px; box-sizing: border-box;
  background: var(--cx-champ) !important; color: var(--cx-texte) !important;
  border: 1px solid var(--cx-trait) !important; border-radius: 14px !important;
  padding: 14px 16px !important; font-size: 16px !important; box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.page-template-page-connexion-cekonay .cekonay-input-group input::placeholder { color: var(--cx-pale) !important; opacity: 1; }
body.page-template-page-connexion-cekonay .cekonay-input-group input:focus {
  outline: none !important; background: var(--cx-champ-focus) !important;
  border-color: var(--cx-texte) !important; box-shadow: 0 0 0 3px rgba(20,20,18,.08) !important;
}
body.page-template-page-connexion-cekonay .cekonay-input-group input:-webkit-autofill {
  -webkit-text-fill-color: var(--cx-texte); -webkit-box-shadow: 0 0 0 1000px var(--cx-champ) inset; caret-color: var(--cx-texte);
}

/* Cases à cocher : coche dessinée, aucun caractère spécial */
body.page-template-page-connexion-cekonay .cekonay-checkbox { color: var(--cx-doux) !important; font-size: 14px !important; line-height: 1.5; }
body.page-template-page-connexion-cekonay .cekonay-checkbox .checkmark {
  width: 20px !important; height: 20px !important; flex: 0 0 20px;
  background: var(--cx-champ) !important; border: 1px solid var(--cx-trait) !important; border-radius: 6px !important;
}
body.page-template-page-connexion-cekonay .cekonay-checkbox input:checked + .checkmark {
  background: linear-gradient(135deg, #d8bc84, #c6a15b) !important; border-color: transparent !important;
}
body.page-template-page-connexion-cekonay .cekonay-checkbox input:checked + .checkmark::after {
  content: '' !important; width: 5px !important; height: 10px !important;
  border: solid #ffffff !important; border-width: 0 2px 2px 0 !important;
  transform: translate(-50%, -62%) rotate(45deg) !important; font-size: 0 !important;
}

/* Récapitulatif et conditions */
body.page-template-page-connexion-cekonay .signup-summary {
  background: var(--cx-champ) !important; border: 1px solid var(--cx-trait) !important;
  border-radius: 16px !important; padding: 14px 18px !important; margin: 14px 0 !important; box-shadow: none !important;
}
body.page-template-page-connexion-cekonay .summary-item {
  display: flex !important; justify-content: space-between; gap: 14px; padding: 6px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px !important; color: var(--cx-doux) !important;
}
body.page-template-page-connexion-cekonay .summary-item:last-child { border-bottom: 0; }
body.page-template-page-connexion-cekonay .summary-item strong { color: var(--cx-doux) !important; font-weight: 500 !important; }
body.page-template-page-connexion-cekonay .summary-item span { color: var(--cx-texte) !important; text-align: right; overflow-wrap: anywhere; min-width: 0; }
body.page-template-page-connexion-cekonay .cekonay-terms-group {
  background: transparent !important; border: 1px solid var(--cx-trait) !important;
  border-radius: 16px !important; padding: 14px 16px !important; margin: 0 0 16px !important; box-shadow: none !important;
}
body.page-template-page-connexion-cekonay 
body.page-template-page-connexion-cekonay .cekonay-terms-group .terms-text a,
body.page-template-page-connexion-cekonay .cekonay-terms-group a,
body.page-template-page-connexion-cekonay .cekonay-forgot a { color: var(--cx-texte) !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,.3); }

/* Vérification Cloudflare : sa propre ligne, au-dessus des boutons, angles arrondis */
body.page-template-page-connexion-cekonay .cekonay-registration-turnstile {
  display: flex; justify-content: center; width: 100% !important; margin: 0 0 14px;
  border-radius: 14px; overflow: hidden;
}
body.page-template-page-connexion-cekonay .cekonay-registration-turnstile iframe { border-radius: 12px; max-width: 100%; }
body.page-template-page-connexion-cekonay .cekonay-registration-turnstile-error { color: var(--cx-erreur); font-size: 13.5px; margin: 6px 0 0; }

/* Boutons : côte à côte quand la place le permet, empilés sur petit écran */
body.page-template-page-connexion-cekonay .step-buttons { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px !important; margin-top: 18px !important; }
body.page-template-page-connexion-cekonay .cekonay-submit-btn,
body.page-template-page-connexion-cekonay .cekonay-step-btn {
  min-height: 52px; border-radius: 14px !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: .01em !important; text-transform: none !important; padding: 14px 20px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; transform: none !important;
}
body.page-template-page-connexion-cekonay .cekonay-submit-btn,
body.page-template-page-connexion-cekonay .cekonay-step-btn:not(.secondary) {
  background: var(--cx-ivoire) !important; color: var(--cx-sur-ivoire) !important;
  border: 0 !important; box-shadow: none !important; width: 100%;
}
body.page-template-page-connexion-cekonay .cekonay-submit-btn:hover:not(:disabled),
body.page-template-page-connexion-cekonay .cekonay-step-btn:not(.secondary):hover { background: #000000 !important; }
body.page-template-page-connexion-cekonay .cekonay-step-btn.secondary {
  white-space: nowrap; padding-inline: 22px !important;
  background: transparent !important; color: var(--cx-texte) !important; border: 1px solid var(--cx-trait) !important; box-shadow: none !important;
  flex: 0 0 auto; width: auto !important;
}
body.page-template-page-connexion-cekonay .cekonay-step-btn.secondary:hover { border-color: var(--cx-pale) !important; }
body.page-template-page-connexion-cekonay .step-buttons > .cekonay-step-btn:not(.secondary),
body.page-template-page-connexion-cekonay .step-buttons > .cekonay-submit-btn { flex: 1 1 200px; width: auto !important; min-width: 0; }
@media (max-width: 420px) {
  body.page-template-page-connexion-cekonay .step-buttons { flex-direction: column-reverse !important; }
  body.page-template-page-connexion-cekonay .step-buttons > * { width: 100% !important; flex: 0 0 auto !important; }
}
body.page-template-page-connexion-cekonay .cekonay-step-btn:focus-visible,
body.page-template-page-connexion-cekonay .cekonay-submit-btn:focus-visible,
body.page-template-page-connexion-cekonay .cekonay-switch-btn:focus-visible { outline: 2px solid var(--cx-or) !important; outline-offset: 3px; }

/* Bas de carte */
body.page-template-page-connexion-cekonay .cekonay-form-footer { border-top: 1px solid var(--cx-trait) !important; margin-top: 22px !important; padding-top: 18px !important; text-align: center; }
body.page-template-page-connexion-cekonay .cekonay-switch-btn {
  background: transparent !important; color: var(--cx-doux) !important; border: 1px solid var(--cx-trait) !important;
  border-radius: 999px !important; padding: 10px 20px !important; font-size: 14px !important; box-shadow: none !important;
}
body.page-template-page-connexion-cekonay .cekonay-switch-btn strong { color: var(--cx-texte) !important; }
body.page-template-page-connexion-cekonay .cekonay-forgot { margin: 0 0 14px !important; font-size: 14px; }

/* Messages */
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message,
body.page-template-page-connexion-cekonay #cekonay-messages > div { border-radius: 14px !important; }
body.page-template-page-connexion-cekonay .cekonay-message--error { background: var(--cx-erreur-fond) !important; color: var(--cx-erreur) !important; border: 1px solid rgba(166,61,50,.25) !important; }
body.page-template-page-connexion-cekonay .cekonay-message--success { background: var(--cx-succes-fond) !important; color: var(--cx-succes) !important; border: 1px solid rgba(47,107,58,.25) !important; }

@media (max-width: 767px) {
  body.page-template-page-connexion-cekonay .cekonay-auth-container { padding: 30px 20px 24px !important; border-radius: 20px !important; }
  body.page-template-page-connexion-cekonay .progress-line { width: 40px !important; }
}

/* Bascule « S'inscrire » / « Se connecter » : visible du premier coup d'œil, teinte champagne */
body.page-template-page-connexion-cekonay .cekonay-switch-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  width: 100% !important; min-height: 50px; box-sizing: border-box;
  background: #f7f0e1 !important; color: var(--cx-texte) !important;
  border: 1px solid #c6a15b !important; border-radius: 14px !important;
  font-size: 15px !important; font-weight: 500 !important; padding: 12px 18px !important;
  transition: background .2s, border-color .2s;
}
body.page-template-page-connexion-cekonay .cekonay-switch-btn strong { color: #7a5c24 !important; font-weight: 700 !important; }
body.page-template-page-connexion-cekonay .cekonay-switch-btn:hover { background: #f1e5cc !important; border-color: #b08d4c !important; }

/* États (survol, clic, focus) cohérents, même si le navigateur a gardé l'ancien mode sombre :
   les anciennes variables reprennent les valeurs claires de la charte sur cette page. */
body.page-template-page-connexion-cekonay,
body.page-template-page-connexion-cekonay.cekonay-dark-mode {
  --auth-bg-primary: #ffffff; --auth-bg-secondary: #f7f6f2; --auth-bg-tertiary: #f1efe9; --auth-glass-bg: rgba(255,255,255,.08);
  --auth-bg-quatro: #141412; --auth-text-primary: #141412; --auth-text-secondary: #55514a; --auth-text-tertiary: #7d786d;
  --auth-border-light: #e6e2da; --auth-border-medium: #d6d1c7;
  --auth-success-bg: #eef6ec; --auth-success-border: rgba(47,107,58,.25); --auth-success-text: #2f6b3a;
  --auth-error-bg: #fbeeec; --auth-error-border: rgba(166,61,50,.25); --auth-error-text: #a63d32;
  --auth-warning-border: #c6a15b; --auth-terms-bg: transparent; --auth-summary-bg: #f7f6f2; --auth-summary-border: #d6d1c7;
  --auth-input-bg: #f7f6f2; --auth-input-focus-bg: #ffffff; --auth-valid-bg: #f7f6f2; --auth-invalid-bg: #fbeeec;
  --auth-progress-inactive: #d6d1c7; --auth-progress-inactive-text: #7d786d;
}
body.page-template-page-connexion-cekonay .cekonay-shop-cta:hover,
body.page-template-page-connexion-cekonay .cekonay-shop-cta:focus-visible,
body.page-template-page-connexion-cekonay .cekonay-shop-cta:active {
  color: var(--cx-texte) !important; background: #f4f2ec !important; border-color: var(--cx-pale) !important;
  box-shadow: none !important; transform: none !important; text-decoration: none !important;
}
body.page-template-page-connexion-cekonay .cekonay-step-btn.secondary:hover,
body.page-template-page-connexion-cekonay .cekonay-step-btn.secondary:active {
  background: #f4f2ec !important; color: var(--cx-texte) !important; border-color: var(--cx-pale) !important;
}
body.page-template-page-connexion-cekonay .cekonay-submit-btn:active:not(:disabled),
body.page-template-page-connexion-cekonay .cekonay-step-btn:not(.secondary):active { background: #000000 !important; color: #ffffff !important; }
body.page-template-page-connexion-cekonay .cekonay-switch-btn:active { background: #ecdcbb !important; }
body.page-template-page-connexion-cekonay .cekonay-switch-btn:hover { color: var(--cx-texte) !important; }
body.page-template-page-connexion-cekonay .cekonay-terms-group .terms-text a:hover,
body.page-template-page-connexion-cekonay .cekonay-forgot a:hover { color: #000000 !important; border-bottom-color: transparent !important; text-decoration-color: #000000; }
body.page-template-page-connexion-cekonay .ckn-pass-toggle { color: var(--cx-pale) !important; }
body.page-template-page-connexion-cekonay .ckn-pass-toggle:hover { color: var(--cx-texte) !important; }
body.page-template-page-connexion-cekonay .ckn-pass-toggle:focus { outline: 2px solid #b08d4c !important; }
/* Survol des boutons noirs : noir profond, aucun reflet bleu (ancienne ombre bleue neutralisée). */
body.page-template-page-connexion-cekonay .cekonay-submit-btn:hover:not(:disabled),
body.page-template-page-connexion-cekonay .cekonay-submit-btn:focus-visible,
body.page-template-page-connexion-cekonay .cekonay-step-btn:not(.secondary):hover,
body.page-template-page-connexion-cekonay .cekonay-step-btn:hover {
  box-shadow: none !important; transform: none !important;
}
body.page-template-page-connexion-cekonay .cekonay-submit-btn:hover:not(:disabled),
body.page-template-page-connexion-cekonay .cekonay-step-btn:not(.secondary):hover { background: #000000 !important; color: #ffffff !important; }
body.page-template-page-connexion-cekonay .cekonay-submit-btn:focus-visible { background: #000000 !important; color: #ffffff !important; }

/* ===================================
   MODE SOMBRE DE LA CHARTE (bouton lune / soleil en haut à droite de la carte)
   Carte anthracite, champs bien contrastés, bouton ivoire ; mêmes repères or.
   =================================== */
body.page-template-page-connexion-cekonay .cekonay-dark-toggle,
body.page-template-page-connexion-cekonay #cekonay-dark-toggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: absolute !important; top: 16px !important; right: 16px !important;
  width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: var(--cx-doux) !important;
  border: 1px solid var(--cx-trait) !important; box-shadow: none !important; cursor: pointer;
}
body.page-template-page-connexion-cekonay #cekonay-dark-toggle:hover { color: var(--cx-texte) !important; border-color: var(--cx-pale) !important; }
body.page-template-page-connexion-cekonay #cekonay-dark-toggle:focus-visible { outline: 2px solid #b08d4c !important; outline-offset: 3px; }
body.page-template-page-connexion-cekonay #cekonay-dark-toggle svg { width: 18px; height: 18px; }
body.page-template-page-connexion-cekonay .cekonay-auth-header { position: relative; }

body.page-template-page-connexion-cekonay.cekonay-dark-mode {
  --cx-carte: #1b1b19; --cx-champ: #262522; --cx-champ-focus: #2c2b28;
  --cx-trait: #4a4740; --cx-trait-or: rgba(255,255,255,.10);
  --cx-texte: #f3f1ea; --cx-doux: #c4bfb3; --cx-pale: #9b968b;
  --cx-ivoire: #f3f1ea; --cx-sur-ivoire: #141412;
  --cx-erreur: #f0a99f; --cx-erreur-fond: rgba(196,84,70,.14); --cx-succes: #b9d9a8; --cx-succes-fond: rgba(120,170,100,.14);
  --auth-bg-primary: #1b1b19; --auth-bg-secondary: #262522; --auth-bg-tertiary: #2c2b28;
  --auth-text-primary: #f3f1ea; --auth-text-secondary: #c4bfb3; --auth-text-tertiary: #9b968b;
  --auth-border-light: #3a3832; --auth-border-medium: #4a4740;
  --auth-input-bg: #262522; --auth-input-focus-bg: #2c2b28; --auth-valid-bg: #262522; --auth-invalid-bg: rgba(196,84,70,.14);
  --auth-summary-bg: #262522; --auth-summary-border: #4a4740; --auth-progress-inactive: #4a4740; --auth-progress-inactive-text: #9b968b;
  --auth-success-bg: rgba(120,170,100,.14); --auth-success-border: rgba(185,217,168,.3); --auth-success-text: #b9d9a8;
  --auth-error-bg: rgba(196,84,70,.14); --auth-error-border: rgba(240,169,159,.3); --auth-error-text: #f0a99f;
}
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-auth-container { border-color: rgba(255,255,255,.08) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-auth-header .cekonay-logo-main { color: #f7f3ee !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-input-group input:focus { border-color: #c6a15b !important; box-shadow: 0 0 0 3px rgba(198,161,91,.18) !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .summary-item { border-bottom-color: rgba(255,255,255,.06); }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-terms-group .terms-text a,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-terms-group a,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-forgot a { text-decoration-color: rgba(255,255,255,.35); }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-terms-group .terms-text a:hover,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-forgot a:hover { color: #ffffff !important; text-decoration-color: #ffffff; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-shop-cta:hover,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-shop-cta:focus-visible,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-step-btn.secondary:hover { background: #2c2b28 !important; color: var(--cx-texte) !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-submit-btn:hover:not(:disabled),
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-submit-btn:focus-visible,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-step-btn:not(.secondary):hover { background: #ffffff !important; color: #141412 !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-switch-btn { background: rgba(198,161,91,.12) !important; color: var(--cx-texte) !important; border-color: #c6a15b !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-switch-btn strong { color: #e6cd94 !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-switch-btn:hover { background: rgba(198,161,91,.2) !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .ckn-pass-toggle { color: var(--cx-pale) !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .ckn-pass-toggle:hover { color: var(--cx-texte) !important; }

/* Messages : sobres. Fond neutre, contour fin teinté tout autour (pas de barre sur le côté), texte noir, icône seule en couleur. */
body.page-template-page-connexion-cekonay #cekonay-messages { margin: 0 0 18px; }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message,
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message--error,
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message--success,
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-login-confirmation {
  display: flex; gap: 12px; align-items: flex-start; box-sizing: border-box; width: 100%;
  margin: 0 !important; padding: 14px 16px !important;
  background: var(--cx-champ) !important; color: var(--cx-texte) !important;
  border: 1px solid var(--cx-msg-trait, var(--cx-trait)) !important;
  border-radius: 14px !important; box-shadow: none !important;
  font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.5;
}
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message--error { --cx-msg: #a63d32; --cx-msg-trait: rgba(166,61,50,.32); }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message--success,
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-login-confirmation { --cx-msg: #2f6b3a; --cx-msg-trait: rgba(47,107,58,.32); }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message__icon,
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-login-confirmation__icon {
  flex: 0 0 18px; width: 18px !important; height: 18px !important; margin-top: 2px; color: var(--cx-msg) !important;
}
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message__text { color: var(--cx-texte) !important; }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-login-confirmation__title { font-weight: 600 !important; color: var(--cx-texte) !important; }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-login-confirmation__detail { color: var(--cx-doux) !important; font-size: 13.5px; }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message__actions { gap: 6px 18px; margin-top: 10px; }
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message__action {
  color: var(--cx-texte) !important; font-weight: 600; font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(0,0,0,.3); text-decoration-thickness: 1px;
}
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message__action:hover,
body.page-template-page-connexion-cekonay #cekonay-messages .cekonay-message__action:focus-visible { text-decoration-color: currentColor; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode #cekonay-messages .cekonay-message--error { --cx-msg: #e08a7e; --cx-msg-trait: rgba(224,138,126,.38); }
body.page-template-page-connexion-cekonay.cekonay-dark-mode #cekonay-messages .cekonay-message--success,
body.page-template-page-connexion-cekonay.cekonay-dark-mode #cekonay-messages .cekonay-login-confirmation { --cx-msg: #9fcf8c; --cx-msg-trait: rgba(159,207,140,.38); }
body.page-template-page-connexion-cekonay.cekonay-dark-mode #cekonay-messages .cekonay-message__action { text-decoration-color: rgba(255,255,255,.35); }

/* Photo de fond attachée au formulaire (et non à l'écran) : au défilement, elle ne passe plus par-dessus le pied de page. */
body.page-template-page-connexion-cekonay .cekonay-video-container { position: relative !important; }
body.page-template-page-connexion-cekonay .cekonay-auth-backdrop { position: absolute !important; inset: 0 !important; height: auto !important; min-height: 0 !important; }

/* Champ manquant : petite ligne rouge sous le champ, sans pastille ni décalage. */
body.page-template-page-connexion-cekonay .cekonay-input-group { position: relative; }
body.page-template-page-connexion-cekonay .cekonay-field-feedback {
  position: static !important; display: none; margin: 6px 2px 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  color: #a63d32 !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.3;
}
body.page-template-page-connexion-cekonay .cekonay-field-invalid,
body.page-template-page-connexion-cekonay .cekonay-input-group input.cekonay-field-invalid { border-color: #a63d32 !important; }
body.page-template-page-connexion-cekonay .cekonay-terms-group.cekonay-terms-invalid { border-color: #a63d32 !important; background: transparent !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-field-feedback { color: #e08a7e !important; background: none !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-field-invalid,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-input-group input.cekonay-field-invalid,
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-terms-group.cekonay-terms-invalid { border-color: #e08a7e !important; }
body.page-template-page-connexion-cekonay .cekonay-input-group input.cekonay-field-valid { border-color: #2f6b3a !important; background: var(--cx-champ) !important; }
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-input-group input.cekonay-field-valid { border-color: #9fcf8c !important; }

/* Formulaire centré dans la photo, en haut et en bas, sur la hauteur visible sous l'en-tête du site
   (48 px sur ordinateur, 56 px sous 860 px). Si le formulaire est plus haut que l'écran (inscription,
   petits écrans), il part du haut et la page défile : rien n'est jamais coupé. */
body.page-template-page-connexion-cekonay { --cx-entete: 48px; }
@media (max-width: 860px) { body.page-template-page-connexion-cekonay { --cx-entete: 56px; } }
body.page-template-page-connexion-cekonay .cekonay-video-container,
body.page-template-page-connexion-cekonay .cekonay-auth-wrapper {
  min-height: calc(100vh - var(--cx-entete)) !important;
  min-height: calc(100dvh - var(--cx-entete)) !important;
}
body.page-template-page-connexion-cekonay .cekonay-auth-wrapper {
  display: flex !important; align-items: flex-start !important; justify-content: center !important;
  padding: clamp(16px, 4vh, 48px) 16px !important;
}
body.page-template-page-connexion-cekonay .cekonay-auth-container { margin: auto !important; }

/* Sous 768 px, une ancienne règle ajoutait 60 px vides au-dessus de la photo : supprimés. */
body.page-template-page-connexion-cekonay .cekonay-auth-wrapper { margin-top: 0 !important; }
/* Écrans peu hauts (portables) : carte un peu plus compacte pour rester centrée sans défiler. */
@media (max-height: 820px) and (min-width: 861px) {
  body.page-template-page-connexion-cekonay .cekonay-auth-container { padding: 28px 32px 24px !important; }
  body.page-template-page-connexion-cekonay #cekonay-subtitle { margin: 10px 0 6px !important; }
  body.page-template-page-connexion-cekonay .cekonay-auth-intro { margin: 0 0 12px !important; }
  body.page-template-page-connexion-cekonay .cekonay-progress-bar { margin: 16px auto 14px !important; }
  body.page-template-page-connexion-cekonay .cekonay-input-group { margin-bottom: 10px !important; }
  body.page-template-page-connexion-cekonay .cekonay-input-group input { min-height: 48px; padding-top: 12px !important; padding-bottom: 12px !important; }
  body.page-template-page-connexion-cekonay .cekonay-form-footer { margin-top: 16px !important; padding-top: 14px !important; }
  body.page-template-page-connexion-cekonay .cekonay-forgot { margin-bottom: 10px !important; }
}

/* Remplissage automatique du navigateur (Firefox : :autofill ; Chrome, Safari : :-webkit-autofill) :
   le fond jaune imposé est recouvert par une ombre intérieure à la couleur du champ, texte lisible. */
body.page-template-page-connexion-cekonay .cekonay-input-group input:autofill {
  box-shadow: 0 0 0 1000px var(--cx-champ) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cx-champ) inset !important;
  -webkit-text-fill-color: var(--cx-texte) !important;
  color: var(--cx-texte) !important;
  caret-color: var(--cx-texte);
  filter: none !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
body.page-template-page-connexion-cekonay .cekonay-input-group input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--cx-champ) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cx-champ) inset !important;
  -webkit-text-fill-color: var(--cx-texte) !important;
  color: var(--cx-texte) !important;
  caret-color: var(--cx-texte);
  filter: none !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
body.page-template-page-connexion-cekonay .cekonay-input-group input:autofill:focus {
  box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(20,20,18,.08) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(20,20,18,.08) !important;
}
body.page-template-page-connexion-cekonay .cekonay-input-group input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(20,20,18,.08) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(20,20,18,.08) !important;
}
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-input-group input:autofill:focus {
  box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(198,161,91,.18) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(198,161,91,.18) !important;
}
body.page-template-page-connexion-cekonay.cekonay-dark-mode .cekonay-input-group input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(198,161,91,.18) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cx-champ-focus) inset, 0 0 0 3px rgba(198,161,91,.18) !important;
}

/* Mot de passe : « Remplissez ce champ » passe sous le champ, l'œil reste dans le champ. */
body.page-template-page-connexion-cekonay .ckn-passwrap { flex-wrap: wrap; align-items: flex-start; }
body.page-template-page-connexion-cekonay .ckn-passwrap .cekonay-field-feedback { flex: 0 0 100%; order: 3; }
body.page-template-page-connexion-cekonay .ckn-passwrap .ckn-pass-toggle { top: 26px; }
@media (max-height: 820px) and (min-width: 861px) {
  body.page-template-page-connexion-cekonay .ckn-passwrap .ckn-pass-toggle { top: 24px; }
}

/* Mobile : drapeau et indicatif du pays devant le numéro (9 pays acceptés).
   Le client tape son numéro comme d'habitude ; le 0 initial s'enlève quand il quitte le champ. */
body.page-template-page-connexion-cekonay .ckn-tel { position: relative; }
body.page-template-page-connexion-cekonay .ckn-tel .ckn-pays {
    position: absolute; left: 1px; top: 1px; height: var(--ckn-tel-h, 46px); z-index: 2;
    display: flex; align-items: center; padding: 0 10px 0 12px;
    border-right: 1px solid var(--cx-trait, rgba(0, 0, 0, .12)); border-radius: 10px 0 0 10px;
}
body.page-template-page-connexion-cekonay .ckn-tel .ckn-pays-vue {
    display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--cx-texte, inherit);
    font-variant-numeric: tabular-nums; pointer-events: none;
}
body.page-template-page-connexion-cekonay .ckn-tel .ckn-pays-vue svg {
    width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: 0 0 auto;
}
body.page-template-page-connexion-cekonay .ckn-tel .ckn-pays-vue i {
    width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); opacity: .55; margin-left: 1px;
}
body.page-template-page-connexion-cekonay .ckn-tel select {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
    font-size: 16px; -webkit-appearance: none; appearance: none; border: 0; margin: 0; padding: 0;
}
body.page-template-page-connexion-cekonay .ckn-tel .ckn-pays:focus-within {
    outline: 2px solid var(--cx-or, #c9a96e); outline-offset: -2px;
}
body.page-template-page-connexion-cekonay .ckn-tel input#reg_mobile { padding-left: var(--ckn-tel-pl, 104px) !important; }

/* Chargement des boutons Se connecter / Créer mon compte : petit cercle discret à la place du sablier. */
body.page-template-page-connexion-cekonay .ckn-spin {
    display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ckn-tourne .75s linear infinite;
}
@keyframes ckn-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.page-template-page-connexion-cekonay .ckn-spin { animation: none; opacity: .55; }
}