/* ============================================================
   ESPACE PROFESSIONNEL — ESTHEIA DESIGN SYSTEM
   ============================================================ */

/* ── Keyframes ── */
@keyframes ap-spin    { to { transform: rotate(360deg); } }
@keyframes ap-fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Tokens ── */
:root {
    --ap-accent:       #B08D9C;
    --ap-accent-70:    color-mix(in srgb, #B08D9C 70%,  #2B2630);
    --ap-accent-72:    color-mix(in srgb, #B08D9C 72%,  #2B2630);
    --ap-accent-80:    color-mix(in srgb, #B08D9C 80%,  #2B2630);
    --ap-accent-82:    color-mix(in srgb, #B08D9C 82%,  #2B2630);
    --ap-accent-12:    color-mix(in srgb, #B08D9C 12%,  #fff);
    --ap-accent-38:    color-mix(in srgb, #B08D9C 38%,  #fff);
    --ap-accent-grad:  linear-gradient(135deg,
                           color-mix(in srgb, #B08D9C 80%, #2B2630),
                           color-mix(in srgb, #B08D9C 52%, #6a4a78));
    --ap-text:         #2B2630;
    --ap-muted:        #8B8390;
    --ap-subtle:       #6b6470;
    --ap-border:       #ECE7EA;
    --ap-input-border: #E6E0E4;
    --ap-bg:           #FBFAFB;
    --ap-serif:        'Cormorant Garamond', Georgia, serif;
    --ap-sans:         'Hanken Grotesk', system-ui, sans-serif;
}

/* Mobile hero / benefits masqués sur desktop */
#ap-mobile-hero     { display: none; }
#ap-mobile-benefits { display: none; }

/* ── Flash messages ── */
.ap-flash {
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 14px 40px;
    border-radius: 10px;
    font: 500 14px var(--ap-sans);
    box-sizing: border-box;
}
.ap-flash--success { background:#e8f5e9; color:#2e7d32; border-left:4px solid #4caf50; }
.ap-flash--error   { background:#ffebee; color:#c62828; border-left:4px solid #f44336; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT DESKTOP
   ══════════════════════════════════════════════════════════════ */

.section_wrapper {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#ap-wrap {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 56px;
    align-items: start;
    max-width: 1180px;
    margin: 175px auto 90px;
    padding: 0 40px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   COLONNE GAUCHE : AVANTAGES
   ══════════════════════════════════════════════════════════════ */

.ap-overline {
    display: block;
    font: 600 12px var(--ap-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ap-accent-70);
    margin-bottom: 12px;
}

.ap-heading {
    font-family: var(--ap-serif);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.04;
    color: var(--ap-text);
    margin: 0 0 12px;
}

.ap-lead {
    font: 400 17px/1.6 var(--ap-sans);
    color: var(--ap-subtle);
    margin: 0 0 36px;
}

.ap-benefits        { display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }

.ap-benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: 18px;
    padding: 20px 22px;
    transition: border-color .2s, box-shadow .2s;
}
.ap-benefit-card:hover {
    border-color: var(--ap-accent-38);
    box-shadow: 0 14px 30px -22px rgba(43,38,48,.4);
}
.ap-benefit-icon {
    width:46px; height:46px; border-radius:50%; flex:none;
    background: var(--ap-accent-12);
    color: var(--ap-accent-72);
    display:flex; align-items:center; justify-content:center;
}
.ap-benefit-body  { display:flex; flex-direction:column; gap:3px; }
.ap-benefit-title { display:block; font:600 17px var(--ap-sans); color:var(--ap-text); }
.ap-benefit-desc  { display:block; font:400 14px/1.5 var(--ap-sans); color:var(--ap-muted); }

/* Carte essai gratuit */
.ap-trial {
    border-radius: 22px;
    padding: 38px 34px;
    text-align: center;
    background: var(--ap-accent-grad);
    box-shadow: 0 26px 50px -26px var(--ap-accent-70);
}
.ap-trial-number { font-family:var(--ap-serif); font-weight:600; font-size:56px; line-height:1; color:#fff; }
.ap-trial-sub    { font:500 15px var(--ap-sans); color:rgba(255,255,255,.85); margin:8px 0 24px; }
.ap-trial-checks { display:flex; justify-content:center; gap:34px; }
.ap-trial-check  { display:flex; flex-direction:column; align-items:center; gap:8px; font:600 13px var(--ap-sans); color:rgba(255,255,255,.92); }
.ap-trial-check-icon {
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.2); color:#fff;
    display:flex; align-items:center; justify-content:center;
}

/* ══════════════════════════════════════════════════════════════
   COLONNE DROITE : CARTE AUTH
   ══════════════════════════════════════════════════════════════ */

#ap-right {
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: 24px;
    box-shadow: 0 30px 60px -42px rgba(43,38,48,.4);
    /* Pas d'overflow:hidden : le dropdown estheia-cs doit pouvoir déborder */
}

/* Onglets */
.ap-tabs {
    padding: 10px;
    display: flex;
    gap: 8px;
    background: var(--ap-bg);
    border-bottom: 1px solid #F2EEF0;
    border-radius: 24px 24px 0 0;
}
.ap-tab {
    flex:1; padding:15px; border-radius:14px;
    border:none; cursor:pointer;
    font:600 15px var(--ap-sans);
    color:var(--ap-subtle); background:transparent;
    transition:all .25s ease; line-height:1;
}
.ap-tab--active {
    background: var(--ap-accent-grad);
    color: #fff;
    box-shadow: 0 10px 24px -12px var(--ap-accent-70);
}

/* Panneaux */
.ap-panel         { padding:38px 40px; animation:ap-fadeIn .3s ease; }
.ap-panel--hidden { display:none; }

.ap-panel-header { margin-bottom:22px; }
.ap-panel-title  { font-family:var(--ap-serif); font-weight:600; font-size:32px; line-height:1.1; color:var(--ap-text); margin:0 0 6px; }
.ap-panel-sub    { font:400 15px var(--ap-sans); color:var(--ap-muted); margin:0; }

/* ── Séparateur de section (remplace ap-section-label) ── */
.ap-section-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 10px var(--ap-sans);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ap-muted);
    margin-bottom: 14px;
}
.ap-section-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ap-border);
}
.ap-section-sep + .ap-row-2,
.ap-section-sep + .ap-field-card { margin-top: 0; }
.ap-section-sep:not(:first-child) { margin-top: 10px; }

.ap-section-sep-icon {
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--ap-accent-12);
    color: var(--ap-accent-72);
    display: flex; align-items: center; justify-content: center;
    flex: none;
}

/* ── Formulaire ── */
.ap-form { display:flex; flex-direction:column; gap:12px; }

.ap-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Card de champ (style hero search card) ── */
.ap-field-card {
    background: #fff;
    border: 1px solid var(--ap-input-border);
    border-radius: 14px;
    padding: 9px 14px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .2s, box-shadow .2s;
    position: relative; /* pour le dropdown estheia-cs */
    min-width: 0;
}
.ap-field-card:focus-within {
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 14%, transparent);
}
/* Accent quand le dropdown estheia-cs est ouvert */
.ap-field-card:has(.estheia-cs.is-open) {
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 14%, transparent);
}

/* Variante textarea : pas de flex-inner */
.ap-field-card--textarea { gap: 6px; }

/* Variante TVA : fond légèrement teinté */
.ap-field-card--vat { background: var(--ap-bg); }

/* ── Checklist de complexité mot de passe ── */
.ap-pwd-req-list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 4px; }
.ap-pwd-req { font: 500 11.5px var(--ap-sans); color: var(--ap-muted); display: flex; align-items: center; gap: 5px; }
.ap-pwd-req.valid { color: #16a34a; }
.ap-pwd-req.invalid { color: #ef4444; }
.ap-pwd-req__dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.ap-pwd-match-error {
    display: none;
    align-items: center;
    gap: 6px;
    margin: -4px 0 4px;
    color: #ef4444;
    font: 600 12px var(--ap-sans);
}

/* ── Label overline (style hero search) ── */
.ap-field-overline {
    display: block;
    font: 600 10px var(--ap-sans);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ap-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-optional { font-weight:400; color:var(--ap-muted); text-transform:none; letter-spacing:0; font-size:10px; }

/* ── Ligne icône + input ── */
.ap-field-inner {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.ap-field-inner--flex { flex: 1; min-width: 0; }

.ap-field-icon {
    flex-shrink: 0;
    color: var(--ap-accent);
}

.ap-field-chevron {
    flex-shrink: 0;
    color: var(--ap-muted);
    pointer-events: none;
}

/* ── Input nu (dans card — sans bordure propre) ──
   Tout est en !important : global.css (thème Avada legacy) cible
   input[type="password"] etc. avec une spécificité (0,1,1) qui bat
   .ap-input seul (0,1,0) sur les propriétés non protégées (margin-bottom:20px,
   font-size:13px...) — voir aussi la règle :focus juste en dessous. */
.ap-input {
    flex: 1 !important;
    min-width: 0;
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 !important;
    margin: 0 !important;
    font: 500 14px/1 var(--ap-sans) !important;
    color: var(--ap-text) !important;
    width: 100% !important;
}
.ap-input::placeholder { color: var(--ap-muted); font-weight:400; }
.ap-input::selection { background: color-mix(in srgb, var(--ap-accent) 25%, transparent); color: var(--ap-text); }

/* global.css a input[type="password"]:focus { background-color:#E9F5FC!important }
   avec une spécificité (0,2,1) qui bat .ap-input:focus (0,2,0) même avec !important.
   .ap-field-card .ap-input:focus = (0,3,0) : gagne quel que soit l'ordre de chargement. */
.ap-field-card .ap-input:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ap-text) !important;
    box-shadow: none !important;
}

/* Chrome/Edge : masque l'icône + le fond bleu du "suggérer un mot de passe fort"
   (autocomplete="new-password") — redondant avec notre propre icône + checklist */
.ap-input[type="password"]::-webkit-strong-password-auto-fill-button,
.ap-input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* Autofill navigateur : neutralise le fond jaune/bleu imposé, garde notre style */
.ap-input:-webkit-autofill,
.ap-input:-webkit-autofill:hover,
.ap-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ap-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Textarea : quelques tweaks */
.ap-textarea {
    display: block;
    min-height: 88px;
    resize: vertical;
    line-height: 1.55;
    padding-top: 2px !important;
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════
   ESTHEIA-CS ADAPTÉ POUR LES CARDS DE CHAMP
   ══════════════════════════════════════════════════════════════ */

/* Le wrapper estheia-cs dans une card = ap-field-inner
   On le passe en position:static pour que la liste déroulante
   se positionne par rapport à .ap-field-card (qui a position:relative) */
.ap-field-inner.estheia-cs {
    width: 100%;
    position: static;  /* override du position:relative de .estheia-cs global */
}

/* Trigger : nu, sans bordure propre (la card est le conteneur) */
.ap-field-card .estheia-cs-trigger {
    flex: 1 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font: 500 14px var(--ap-sans) !important;
    color: var(--ap-text) !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 0;
    gap: 0 !important;
}
.ap-field-card .estheia-cs-trigger:hover,
.ap-field-card .estheia-cs.is-open > .estheia-cs-trigger {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Le texte sélectionné */
.ap-field-card .estheia-cs-text {
    font: 500 14px var(--ap-sans);
    color: var(--ap-text);
}
.ap-field-card .estheia-cs-trigger[data-placeholder] .estheia-cs-text,
.ap-field-card .estheia-cs-text:empty {
    color: var(--ap-muted);
    font-weight: 400;
}

/* Chevron : à droite du trigger, géré par ap-field-icon (le SVG après le trigger) */
.ap-field-card .estheia-cs-chevron { display: none; } /* chevron géré par .ap-field-icon en fin de row */

/* Liste déroulante : positionnée par rapport à .ap-field-card
   (.ap-field-inner.estheia-cs est position:static, donc la liste
    remonte au .ap-field-card qui a position:relative) */
.ap-field-card .estheia-cs-list {
    top: calc(100% + 4px);
    left: -1px;   /* couvre la border de la card */
    right: -1px;
    border-radius: 14px;
    box-shadow: 0 20px 44px -12px rgba(43,38,48,.22);
    min-width: 0;
}

/* Chevron rotatif : SVG enfant du wrapper estheia-cs */
.ap-field-chevron { transition: transform .2s ease, color .15s ease; }

/* Le chevron est dedans le .ap-field-inner.estheia-cs */
.ap-field-inner.estheia-cs.is-open .ap-field-chevron {
    transform: rotate(180deg);
    color: var(--ap-accent);
}

/* ── Ligne TVA ── */
.ap-vat-row { display:flex; gap:10px; align-items:flex-start; }
.ap-input--flex { flex:1; min-width:0; }

.ap-vat-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    border: 1px solid var(--ap-input-border);
    background: #fff;
    cursor: pointer;
    font: 600 13px var(--ap-sans);
    color: var(--ap-accent-72);
    transition: border-color .2s;
    white-space: nowrap;
}
.ap-vat-btn:hover    { border-color: var(--ap-accent); }
.ap-vat-btn:disabled { opacity:.6; cursor:not-allowed; }

/* ── Helper ── */
.ap-helper { font:400 11px var(--ap-sans); color:var(--ap-muted); margin:2px 0 0; }

/* ── Erreurs Symfony ── */
.ap-field-card ul,
.ap-field-card .form-error { list-style:none; padding:0; margin:2px 0 0; }
.ap-field-card ul li,
.ap-field-card .form-error li { font:400 11px var(--ap-sans); color:#dc2626; }

/* ── Remember me ── */
.ap-remember-row {
    display:flex; align-items:center; justify-content:space-between;
    margin:4px 0; flex-wrap:wrap; gap:10px;
}
.ap-remember {
    display:inline-flex; align-items:center; gap:9px; cursor:pointer;
    font:500 14px var(--ap-sans); color:var(--ap-subtle);
}
.ap-remember input[type="checkbox"] { width:17px; height:17px; accent-color:var(--ap-accent); flex:none; padding:0; border:none; margin:0; }
.ap-forgot     { font:600 14px var(--ap-sans); color:var(--ap-accent-72); text-decoration:none; }
.ap-forgot:hover { text-decoration:underline; }

/* ── Bouton principal ── */
.ap-btn-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font: 600 16px var(--ap-sans);
    color: #fff;
    background: var(--ap-accent-72);
    box-shadow: 0 14px 30px -12px var(--ap-accent-70);
    transition: background .2s, box-shadow .2s;
    margin-top: 4px;
}
.ap-btn-primary:hover { background:var(--ap-accent-82); box-shadow:0 18px 34px -14px var(--ap-accent-70); }

/* ── Mentions légales ── */
.ap-terms          { font:400 13px/1.6 var(--ap-sans); color:var(--ap-muted); margin:18px 0 0; }
.ap-terms--center  { text-align:center; }
.ap-terms a        { color:var(--ap-accent-72); font-weight:600; text-decoration:none; }
.ap-terms a:hover  { text-decoration:underline; }

/* ── Bannière d'erreur ── */
.ap-error-banner {
    background:#fee2e2; border:1px solid #fecaca;
    border-radius:10px; padding:12px 16px; margin-bottom:6px;
    font:500 14px var(--ap-sans); color:#991b1b;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — ≤ 768 px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Reset conteneurs Avada */
    #Content, .content_wrapper, .sections_group, .section, .section_wrapper {
        padding:0 !important; margin:0 !important;
        width:100% !important; max-width:100% !important;
        box-sizing:border-box !important;
    }

    /* Flash */
    .ap-flash { border-radius:0; margin:0 0 4px; padding:12px 16px; }

    /* ── Hero mobile ── */
    #ap-mobile-hero {
        display: block;
        background: var(--ap-accent-grad);
        padding: 20px 20px 24px;
        text-align: center;
    }
    .ap-mh-logo       { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
    .ap-mh-logo-dot   { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
    .ap-mh-logo-inner { width:11px; height:11px; border-radius:3px 11px 3px 11px; background:#fff; transform:rotate(45deg); display:block; }
    .ap-mh-logo-name  { font-family:var(--ap-serif); font-weight:600; font-size:22px; color:#fff; }
    .ap-mh-title      { font:800 20px/1.2 var(--ap-sans); color:#fff; margin:0 0 5px; }
    .ap-mh-sub        { font:400 13px/1.5 var(--ap-sans); color:rgba(255,255,255,.82); margin:0 0 18px; }
    .ap-mh-badges     { display:flex; justify-content:center; gap:8px; }
    .ap-mh-badge      { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:8px 12px; text-align:center; }
    .ap-mh-badge-num  { font:700 15px var(--ap-sans); color:#fff; line-height:1; margin-bottom:3px; }
    .ap-mh-badge-lbl  { font:600 10px var(--ap-sans); color:rgba(255,255,255,.85); white-space:nowrap; }

    /* ── Benefits scroll ── */
    #ap-mobile-benefits { display:block; background:#f8f5ff; padding:14px 0 14px 16px; border-bottom:5px solid #f1f5f9; }
    .ap-mb-title  { font:700 11px var(--ap-sans); letter-spacing:.06em; text-transform:uppercase; color:#4a4550; margin-bottom:10px; padding-right:16px; }
    .ap-mb-list   { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px; padding-right:16px; }
    .ap-mb-list::-webkit-scrollbar { display:none; }
    .ap-mb-card   { flex:0 0 140px; background:#fff; border-radius:12px; padding:12px; border-left:3px solid var(--ap-accent); box-shadow:0 2px 8px rgba(0,0,0,.06); }
    .ap-mb-card--purple { border-left-color:#667eea; }
    .ap-mb-card--green  { border-left-color:#10b981; }
    .ap-mb-card--amber  { border-left-color:#f59e0b; }
    .ap-mb-card--blue   { border-left-color:#3b82f6; }
    .ap-mb-card--violet { border-left-color:#8b5cf6; }
    .ap-mb-icon        { font-size:20px; margin-bottom:5px; }
    .ap-mb-card-title  { font:700 11px var(--ap-sans); color:var(--ap-text); margin-bottom:3px; }
    .ap-mb-card-text   { font:400 10px/1.4 var(--ap-sans); color:var(--ap-muted); }

    /* Layout */
    #ap-wrap  { display:block; margin:0; padding:0; }
    #ap-left  { display:none !important; }
    #ap-right { border:none; border-radius:0; box-shadow:none; overflow:visible; }

    /* Onglets */
    .ap-tabs { border-radius:0; border-bottom:2px solid #F2EEF0; position:sticky; top:0; z-index:10; }
    .ap-tab  { padding:13px 10px; font-size:14px; }

    /* Panneaux */
    .ap-panel { padding:18px 14px 32px; }
    .ap-panel-title { font-size:21px; }

    /* Formulaire */
    .ap-form  { gap:10px; }

    /* Row 2 → 1 col (sauf première : prénom/nom) */
    .ap-row-2 { grid-template-columns:1fr; gap:10px; }
    .ap-row-2:first-of-type { grid-template-columns:1fr 1fr; gap:8px; }

    /* Card de champ */
    .ap-field-card { border-radius:12px; padding:8px 13px 10px; }
    .ap-field-overline { font-size:9px; }

    /* Input : font-size 16px pour bloquer le zoom iOS */
    .ap-input { font-size:16px !important; min-height:32px; }
    .ap-textarea { min-height:80px; }

    /* Estheia-cs sur mobile */
    .ap-field-card .estheia-cs-trigger { font-size:16px !important; min-height:32px; }
    .ap-field-card .estheia-cs-list { border-radius:12px; }

    /* Bouton TVA */
    .ap-vat-btn { padding:0 12px; font-size:12px; height:46px; border-radius:10px; }

    /* Bouton principal */
    .ap-btn-primary { padding:15px; font-size:15px; border-radius:12px; margin-top:8px; }

    /* Séparateur de section */
    .ap-section-sep { font-size:9px; margin-bottom:12px; }
    .ap-section-sep:not(:first-child) { margin-top:14px; }

    /* Remember row */
    .ap-remember { font-size:13px; }
    .ap-forgot   { font-size:13px; }

    /* Terms */
    .ap-terms { font-size:12px; }
}