/*
Theme Name:   Breizh Web Studio BaseTheme
Theme URI:    https://www.breizhwebstudio.fr 
Author:       Breizh Web Studio
Author URI:   https://www.breizhwebstudio.fr
Description:  Thème de base de l'agence Breizh Web Studio
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  breizhwebstudio-base
*/

/* ==========================================================================
Theme Styles
========================================================================== */

/* ==========================================================================
   BREIZH WEB STUDIO : UI SaaS / Builder de CV
   ========================================================================== */

/* Reset de base */
html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f7f9fc;
    color: #333;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@font-face {
    font-family: 'bradley_hand_itcregular';
    src:    url('fonts/bradhitc-webfont.woff2') format('woff2'),
            url('fonts/bradhitc-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Le Header Minimaliste */
.bws-site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bws-logo {
    font-size: 22px;
    font-weight: 800;
    color: #2e51d5;
    text-decoration: none;
    letter-spacing: -0.5px;
}

.bws-header-nav a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    font-size: 14px;
    margin-left: 20px;
    transition: color 0.2s ease;
}

.bws-header-nav a:hover {
    color: #2e51d5;
}

.bws-btn-login {
    background-color: #f0f0f0;
    padding: 8px 16px;
    border-radius: 20px;
    color: #333 !important;
}

/* L'espace de contenu principal */
.bws-site-content {
    flex: 1; /* Pousse le footer vers le bas */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 15px;
    box-sizing: border-box;
}

/* On cache les vieux titres de page WordPress disgracieux */
.entry-title, .page-title {
    display: none; 
}

/* Footer minimaliste */
.bws-site-footer {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: #888;
    border-top: 1px solid #eaeaea;
    margin-top: 40px;
}

.bws-footer-links {
    margin-bottom: 10px;
}

.bws-footer-links a {
    color: #888;
    text-decoration: none;
    margin: 0 10px;
}

/* --- BASE TECH CRÉATIF PRINTMYCV --- */
:root {
    --bg-dark: #0F111A;
    --text-light: #F8F9FA;
    --accent-cyan: #00F0FF;
    --accent-purple: #7000FF;
    --btn-radius: 12px;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --color-free: #94a3b8;
    --color-basic: #3b82f6;
    --color-medium: #00f0ff; /* accent-cyan */
    --color-premium: #7000ff; /* accent-purple */
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
}

/* On adapte ton header existant au Dark Mode */
.bws-site-header {
    background: rgba(15, 17, 26, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.bws-logo {
    color: #fff;
    font-weight: bold;
    font-family: 'Space Grotesk', sans-serif;
    text-decoration: none;
}

/* ---------------------------------------------------*/
/* --- VARIABLES & TYPOGRAPHIE (Ton coup de cœur) --- */
/* ---------------------------------------------------*/

:root {
    --bg-dark: #0F111A;
    --card-bg: rgba(255, 255, 255, 0.03);
    --text-muted: #a0aabf;
    --accent-cyan: #00F0FF;
    --accent-purple: #7000FF;
}

h1, h2, h3, .pricing-price { font-family: 'Space Grotesk', sans-serif; }
.text-gradient { 
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* --- HERO SECTION --- */
h2:first-child{
    display:none;
}

.hero-phygital { 
    background-color: var(--bg-dark); 
    color: #fff; 
    padding: 100px 20px 40px; 
    position: relative; 
    min-height: 700px; 
    display: flex; 
    align-items: center; /* Centre verticalement */ 
    overflow: hidden; 
}
.hero-split {
    background-color: var(--bg-dark);
    color: #fff;
    padding: 100px 20px 80px;
    min-height: 700px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
}
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row; /* Force l'affichage côte à côte ! */
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
}
.hero-split-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: row; /* Desktop : côte à côte */ 
    align-items: center; 
    gap: 60px; /* Espace sain entre le texte et l'animation */ 
    width: 100%; 
}
/* GAUCHE : Bloc de Conversion (55%) */
.hero-left {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
}

.hero-left .hero-title {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    margin-bottom: 20px;
    line-height: 1.1;
}
/* Aligne tes titres et boutons à gauche ici */

/* DROITE : L'Animation "Living Product" (45%) */
.hero-right {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 20px; line-height: 1.1; max-width: 900px;}
.hero-subtitle { color: var(--text-muted); font-size: 1.2rem; max-width: 700px; margin: 0 auto 40px auto; line-height: 1.6;}
.hero-cta-group { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 15px; /* Sépare le bouton du texte ! */
    margin-top: 20px;
}
.btn-primary { 
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-dark); 
    font-weight: bold; 
    padding: 15px 30px; 
    border-radius: 8px; 
    text-decoration: none; 
    font-size: 1.1rem; 
    transition: transform 0.2s;
    display: inline-block; /* Évite les bugs de hauteur */
}
.btn-primary:hover { transform: scale(1.05); }
.btn-primary, .btn-buy {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 54px; /* Largement supérieur aux 48px recommandés */
    width: 100%; /* Prend toute la largeur sur mobile */
    font-size: 1.1rem;
    padding: 10px 20px;
}

@media (min-width: 993px) {
    /* Sur Desktop, le bouton Hero reprend une taille normale */
    .btn-primary {
        width: auto;
    }
}
.trust-signals { 
    display: flex; 
    gap: 20px; 
    font-size: 0.85rem; 
    color: var(--text-muted); 
}
/* Le conteneur de l'animation "ResumeEvolution" */
.cv-showcase-container { 
    position: relative; 
    width: 100%; 
    max-width: 450px; /* Taille maîtrisée */ 
    aspect-ratio: 4/5; /* Format portrait */ 
    perspective: 1000px; 
    margin: 0; /* Plus de marges auto ! */ 
}
.resume-raw, .resume-designed {
    position: absolute; width: 300px; height: 400px; border-radius: 8px; padding: 20px;
}
.resume-raw { background: #111; border: 1px dashed var(--text-muted); color: #00FF41; font-family: monospace; font-size: 0.8rem; }
.resume-designed { background: #E8E9ED; box-shadow: 0 20px 50px rgba(0,0,0,0.5); opacity: 0; transform: translateY(50px) rotateX(-20deg); }
.scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan); opacity: 0; }

/* --- BENTO SECTION (Argumentaire) --- */
.argument-section { padding: 4rem 20px; max-width: 1200px; margin: 0 auto; color: #fff; text-align: center; }
.argument-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.argument-desc { color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem; line-height: 1.6; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.bento-card {
    background: var(--card-bg); border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); padding: 30px;
    position: relative; overflow: hidden;
}
/* Effet Spotlight conservé */
.bento-card::before {
    content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 2px;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(0, 240, 255, 0.3), transparent 40%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s;
}
.bento-card:hover::before { opacity: 1; }
.bento-card h3 { color: var(--accent-cyan); margin-bottom: 15px; font-size: 1.4rem;}
.bento-card p { color: var(--text-muted); line-height: 1.5; font-size: 0.95rem; }

/* --- PRICING SECTION --- */
.pricing-wrapper { padding: 4rem 20px 8rem; max-width: 1200px; margin: 0 auto; }
.breizh-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.pricing-card { background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; position: relative; }
.pricing-title { font-size: 1.2rem; margin-bottom: 0.5rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.pricing-price { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; color: #fff;}
.pricing-hook { color: var(--accent-cyan); font-size: 0.9rem; font-style: italic; margin-bottom: 1.5rem; min-height: 40px;}
.pricing-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; flex-grow: 1; line-height: 1.5; }

.btn-buy { text-align: center; padding: 12px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: 0.2s; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; border: none; width: 100%; font-size: 1rem;}
.btn-buy:hover { background: rgba(255,255,255,0.2); }

/* Le badge du Medium */
.badge-expert { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--bg-dark); font-size: 0.75rem; font-weight: bold; padding: 4px 15px; border-radius: 20px; z-index: 10; white-space: nowrap; }

/* Le Laser du Premium (L'Arsenal de Guerre) */
.card-ultimate { background: transparent; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 0 30px rgba(112, 0, 255, 0.2); z-index: 1; }
.ultimate-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent-purple); color: #fff; font-size: 0.75rem; font-weight: bold; padding: 4px 15px; border-radius: 20px; z-index: 10; white-space: nowrap; }
.ultimate-bg { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; z-index: -3; }
.ultimate-bg::after { content: ""; position: absolute; inset: 2px; background: #111424; border-radius: 18px; z-index: -1; }
.ultimate-bg::before { content: ""; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: conic-gradient(transparent, transparent, transparent, var(--accent-cyan), var(--accent-purple), transparent); animation: rotate-border 4s linear infinite; z-index: -2; }
@keyframes rotate-border { 100% { transform: rotate(360deg); } }
.card-ultimate .btn-buy { background: var(--accent-purple); color: #fff; }
.card-ultimate .btn-buy:hover { box-shadow: 0 0 15px var(--accent-purple); }

/* Responsive Grid */
@media (max-width: 1024px) { 
    .bento-grid { grid-template-columns: 1fr; }
    .pricing-wrapper {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0rem;
        overflow: hidden; /* Empêche tout bug de scroll horizontal sur la page globale */
    }

    .swipe-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: var(--text-muted);
        font-size: 0.85rem;
        margin-bottom: 10px;
        font-family: 'Space Grotesk', sans-serif;
    }
    .swipe-arrow {
        display: inline-block;
        animation: pulse-swipe 1.5s infinite ease-in-out;
    }
    @keyframes pulse-swipe {
        0%, 100% { transform: translateX(0); opacity: 0.5; }
        50% { transform: translateX(5px); opacity: 1; }
    }

    /* 2. La piste de défilement */
    .breizh-pricing-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px; 
        /* FIX BADGES : On ajoute 35px en haut (padding-top) pour sauver les badges VIP */
        padding: 35px 20px 30px 20px; 
        /* FIX TRAIT GAUCHE : On aligne le "magnétisme" à 20px du bord gauche */
        scroll-padding-left: 20px; 
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none; 
    }
    .breizh-pricing-grid::-webkit-scrollbar { display: none; }

    /* 3. LE CALIBRAGE DES CARTES */
    .pricing-card {
        /* FIX CENTRAGE GÉNÉRAL : Oblige la carte à respecter ses dimensions */
        box-sizing: border-box; 
        width: 85vw;
        min-width: 85vw;
        max-width: 85vw;
        /* FIX TRAIT GAUCHE : La carte s'aimante sur son bord GAUCHE (start), fini le centrage hasardeux */
        scroll-snap-align: start; 
        flex-shrink: 0;
    }

    /* 4. FIX DU BOUTON DÉCALÉ */
    .pricing-card .btn-buy {
        box-sizing: border-box; /* C'est cette ligne qui sauve le centrage ! */
        width: 100%;
        margin: 0;
    }
    .hero-split-container { 
        flex-direction: column; /* On empile sur mobile */ 
        text-align: center; 
    } 
    .hero-left, .hero-right { 
        flex: 0 0 100%; 
        max-width: 100%; 
    }
}
@media (min-width: 1025px) {
    .swipe-indicator { display: none; }
}
/* --- RESPONSIVE MOBILE FIRST --- */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column; /* Empile sur mobile */
        gap: 60px;
        text-align: center;
    }
    .hero-right {
        display: none !important;
    }

    /* 2. On donne 100% de la place à la colonne de gauche (Le texte et le CTA) */
    .hero-left {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre horizontalement tout le contenu */
        text-align: center;
        padding-top: 40px; /* Ajoute un peu d'air en haut */
    }

    /* 3. On s'assure que le texte est bien centré */
    .hero-left .hero-title,
    .hero-left .hero-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .dynamic-subtitle-wrapper {
        width: 100%; 
        height: 60px; /* On donne un peu plus de hauteur pour respirer */
        margin-bottom: 20px;
    }
    
    .dynamic-subtitle-wrapper .hero-subtitle {
        width: 100%;
        left: 0;
        text-align: center;
        /* On annule l'ancien hack de centrage qui n'est plus nécessaire */
        transform: none; 
        /* On évite que le texte touche les bords de l'écran sur les très petits téléphones */
        padding: 0 15px; 
    }
    .hero-cta-group {
        align-items: center;
        width: 100%;
    }}
/* --- LE LAYOUT DE BASE --- */
.dynamic-subtitle-wrapper {
    position: relative;
    height: 40px; 
    margin-bottom: 40px;
}
.dynamic-subtitle-wrapper .hero-subtitle {
    position: absolute;
    top: 0; left: 0;
    margin: 0;
    opacity: 0; 
    color: var(--text-muted); 
    font-size: 1.2rem; 
    font-weight: bold;
}

/* --- LA SCÈNE D'ANIMATION (Droite) --- */
.bws-stage {
    position: relative;
    width: 100%;
    max-width: 340px; /* Plus fin, format A4 plus réaliste */
    aspect-ratio: 1 / 1.3;
    perspective: 1200px;
    margin: 0 auto;
}

/* --- LE BADGE FLOTTANT (Corrigé !) --- */
.floating-badge {
    position: absolute;
    bottom: 20px; 
    right: -40px; /* On le décale sur le côté droit */
    z-index: 100; /* LE FIX EST ICI : Il passe au-dessus de tout ! */
    background: rgba(15, 17, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(112, 0, 255, 0.4);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4), 0 0 20px rgba(112, 0, 255, 0.2);
    white-space: nowrap; /* Empêche le texte de se casser sur deux lignes */
}

.actor-cv {
    width: 100%; height: 100%;
    background: #ffffff;
    border-radius: 12px;
    position: absolute; 
    z-index: 10;
    padding: 25px; 
    display: flex; flex-direction: column; gap: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    overflow: visible;
}

/* --- LE SMARTPHONE --- */
.actor-phone {
    width: 80px; height: 160px;
    background: #111; border: 3px solid #333; border-radius: 16px;
    position: absolute; z-index: 5;
    display: flex; justify-content: center; align-items: center;
}
.phone-screen { width: 90%; height: 90%; background: #222; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.mini-cv-line { height: 4px; background: var(--accent-cyan); border-radius: 2px; }
.mini-cv-line.short { width: 50%; background: var(--accent-purple); }

/* --- L'ENVELOPPE --- */
.actor-envelope { width: 120px; height: 80px; position: absolute; z-index: 5; }
.env-back { position: absolute; inset: 0; background: #e2e8f0; border-radius: 4px; }
.env-front { position: absolute; inset: 0; background: #cbd5e1; border-radius: 4px; clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%); }
.env-flap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f1f5f9; clip-path: polygon(0 0, 100% 0, 50% 50%); transform-origin: top; }

.txthollow {
    position:absolute;
    opacity:1;
    color:#5974fe;
    z-index:20;
    font-size:10px;
    scale: 1;
}
.bws-stage .titrecvhollow { font-family:Arial, Helvetica, sans-serif; font-weight:900; line-height: 24px; font-size:11px; }
.bws-stage .sstitrehollow { display:flex; flex-direction: row; justify-content: space-between; color:#000; }
.bws-stage .sstitrehollow .txtsstitrehollow { color:#333; }
.bws-stage .sstitrehollow .datesstitrehollow { color:#ff6600; font-size:8px; font-style:italic; }
.bws-stage p.pcvhollow { margin-top:5px; color:#333; }
.bws-stage .headerhollow { width:100%; background-color: #5974fe; padding-left:40%; box-sizing: border-box; color:#fff; font-size:26px; top:0; left:0; height:80px; line-height:80px; border-radius:12px 12px 0 0; }
.bws-stage .txt-hollow-03 img { width:100%; height:auto; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.bws-stage .txt-hollow-04 .adressehollow { width:100%; margin-bottom:6px; color:#000; }
.bws-stage .txt-hollow-05 p.pcvhollow { margin-top:5px; color:#333; text-align:justify; font-size:8px; }
.txt-hollow-01 { width:63%; top:86px; left:34%; }
.txt-hollow-02 { width:63%; top:306px; left:34%; }
.txt-hollow-03 { width:25%; top:30px; left:5%; }
.txt-hollow-04 { width:28%; top:136px; left:3%; }
.txt-hollow-05 { width:28%; top:228px; left:3%; }
.label-hero { position:absolute; top:165px; left:-220px; z-index:100; opacity:1; width:350px; height:350px; }
.label-hero img { width:100%; height:auto; }
.hero-brand { position:absolute; top:0px; left:-50px; z-index:200; width:100%; font-size:1rem; color:#fff; display:flex; flex-direction: row; align-items: baseline; opacity:1; scale: 1; }
.hero-brand span.brandtitle { color:#5974fe; font-weight:bold; font-family:'bradley_hand_itcregular'; font-size:3rem; margin-right:15px; }

/* --- LE FOOTER MINIMALISTE SAAS --- */
.site-footer {
    background-color: var(--bg-dark); /* On fusionne avec le fond du site */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Le liseré séparateur ultra-subtil */
    padding: 24px 0;
    color: var(--text-muted); /* Ton gris bleuté élégant */
    font-size: 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* La magie Flexbox : repousse les éléments aux extrémités */
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 30px; /* Espace aéré entre les liens */
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* La micro-interaction BWS au survol */
.footer-links a:hover {
    color: var(--accent-cyan);
}

/* --- LE RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column-reverse; /* Empile : Copyright en bas, Liens en haut */
        gap: 20px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
        flex-wrap: wrap; /* Permet aux liens de passer à la ligne s'ils sont trop longs */
        gap: 15px 25px;
    }
}

/* animation n°2 page d'accueil */
.titre-hero-list { font-family: 'bradley_hand_itcregular'; font-size:1.8rem; opacity:1; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
ul.hero-list { list-style:none; margin-left:20px; }
ul.hero-list li { font-family: 'bradley_hand_itcregular'; font-size:1.1rem; opacity:1; margin-bottom:15px; }
ul.hero-list li.hero-list-li-ia::before, 
ul.hero-list li.hero-list-li-hd::before,
ul.hero-list li.hero-list-li-qr::before { content:""; margin-top:9px; margin-right:20px; height:6px; width:12px; clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); background: #FCB045; display:inline-block; }
.img-hero-ia { position:absolute; top:330px; left:-140px; opacity:1; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); width:300px; height:92px; scale: 1; }
/* animation n°3 page d'accueil */
.container-hero-list { position:absolute; top:80px; left:70px; width:370px; }
.container-hero-list-print { position:absolute; top:80px; left:70px; width:370px; }
.container-hero-list-qr { position:absolute; top:80px; left:213px; width:370px; }
.img-hero-hd { position:absolute; top:94px; left:-225px; opacity:1; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); width:350px; height:350px; scale: 1; }
.img-hero-hd img { width:100%; height:auto; }
/* animation n°4 page d'accueil */
.img-hero-qr-ambre { position:absolute; top:124px; left:-222px; opacity:1; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); width:320px; height:auto; scale: 1; z-index:10; }
.img-hero-qr-qrcode { position:absolute; top:116px; left:-41px; opacity:1; width:320px; height:auto; z-index:20; }
.img-hero-qr-site { position:absolute; top:116px; left:-41px; opacity:1; width:320px; height:auto; z-index:30; }
.flasheffect { position:absolute; top:150px; left:-100px; opacity:1; width:350px; height:250px; z-index:15; filter: blur(100px); background-color:white; border-radius: 50%; }
.img-hero-qr-ambre img,
.img-hero-qr-qrcode img,
.img-hero-qr-site img { width:100%; height:auto; }

/* --- TITRES DE SECTIONS GENERIQUES --- */
.section-title { font-size: clamp(2rem, 4vw, 2.5rem); text-align: center; margin-bottom: 1rem; color: #fff; line-height: 1.2; }
.section-subtitle { text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem; line-height: 1.6; }

/* --- 1. SOCIAL PROOF --- */
.social-proof-section { padding: 40px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.2); }
.social-proof-container { max-width: 1000px; margin: 0 auto; text-align: center; }
.social-proof-text { color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.social-proof-logos { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; opacity: 0.6; filter: grayscale(100%); transition: 0.3s; }
.social-proof-logos:hover { opacity: 1; filter: grayscale(0%); }
.logo-placeholder { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: bold; color: #fff; }

/* --- 2. COMMENT ÇA MARCHE --- */
.how-it-works-section { padding: 80px 20px; background-color: var(--bg-dark); }
.hiw-container { max-width: 1200px; margin: 0 auto; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.step-card { background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.05); padding: 40px 30px; border-radius: 16px; position: relative; transition: transform 0.3s ease; }
.step-card:hover { transform: translateY(-5px); border-color: rgba(0, 240, 255, 0.2); }
.step-number { font-size: 4rem; font-weight: 800; color: rgba(255, 255, 255, 0.03); position: absolute; top: 10px; right: 20px; line-height: 1; font-family: 'Space Grotesk', sans-serif; }
.step-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 15px; position: relative; z-index: 1; }
.step-card p { color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; position: relative; z-index: 1; }

/* --- 3. FAQ (Zéro Javascript !) --- */
.faq-section { padding: 80px 20px 100px; background-color: var(--bg-dark); }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-accordion { display: flex; flex-direction: column; gap: 15px; margin-top: 40px; }
.faq-item { background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; }
/* Style du bouton clickable */
.faq-item summary { padding: 20px 25px; color: #fff; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; font-family: 'Space Grotesk', sans-serif;}
.faq-item summary::-webkit-details-marker { display: none; } /* Cache la flèche par défaut */
.faq-item summary:hover { background: rgba(255, 255, 255, 0.05); }
/* Le bouton + et - personnalisé */
.faq-item summary::after { content: "+"; color: var(--accent-cyan); font-size: 1.5rem; font-weight: 300; transition: transform 0.3s; }
.faq-item[open] summary::after { content: "-"; color: var(--accent-purple); transform: rotate(180deg); }
/* Le contenu qui se déroule */
.faq-content { padding: 0 25px 25px; color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; border-top: 1px solid transparent; }
.faq-item[open] .faq-content { border-top-color: rgba(255, 255, 255, 0.05); padding-top: 20px; }

/* --- RESPONSIVE MOBILE TEMPORAIRE --- */
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: 1fr; }
    .social-proof-logos { gap: 20px; }
}

/* --- SECTION WORKFLOW (Remplace le Comment ça marche) --- */
.workflow-section { padding: 80px 20px; background-color: var(--bg-dark); }
.workflow-container { max-width: 800px; margin: 0 auto; }

.workflow-timeline {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

/* La ligne verticale connectrice */
.workflow-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 30px; /* Aligné avec les marqueurs */
    width: 2px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 0;
}

.workflow-step {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.step-marker {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex; justify-content: center; align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem; font-weight: bold; color: var(--text-muted);
    flex-shrink: 0; /* Empêche le rond de s'écraser */
    transition: all 0.3s ease;
}

/* L'étape IA mise en avant */
.step-marker.highlight {
    border-color: var(--accent-cyan);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.workflow-step:hover .step-marker {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.step-content {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    flex-grow: 1;
}

.step-content h3 { color: #fff; font-size: 1.4rem; margin-bottom: 15px; }
.step-content p { color: var(--text-muted); line-height: 1.6; margin: 0; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .workflow-timeline::before { left: 20px; } /* Recentre la ligne */
    .step-marker { width: 40px; height: 40px; font-size: 1.2rem; }
    .workflow-step { gap: 20px; }
    .step-content { padding: 20px; }
    .step-content h3 { font-size: 1.2rem; }
}

/* --- STYLE DE BASE DU BOUTON HEADER --- */
.header-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: var(--btn-radius);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* --- EFFET DE BORDURE LUMINEUSE AU SURVOL --- */
.header-account-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 240, 255, 0.05);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
    transform: translateY(-1px);
}

/* --- STYLE SPÉCIFIQUE "CONNECTÉ" --- */
.header-account-btn.logged-in {
    border-color: rgba(112, 0, 255, 0.3); /* Teinte violette discrète */
}

.header-account-btn.logged-in:hover {
    border-color: var(--accent-purple);
    background: rgba(112, 0, 255, 0.05);
    box-shadow: 0 0 20px rgba(112, 0, 255, 0.15);
}

/* L'icône utilisateur (SVG) */
.user-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- PETIT BADGE DE NOTIFICATION (Optionnel) --- */
/* Pour indiquer par exemple que le CV est en attente d'impression */
.btn-status-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-cyan);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 8px;
    box-shadow: 0 0 10px var(--accent-cyan);
}

/* --- RESPONSIVE HEADER --- */
@media (max-width: 768px) {
    .header-account-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    .header-account-btn span {
        display: none; /* On cache le texte sur petit mobile pour ne garder que l'icône */
    }
}

/* --- STRUCTURE GLOBALE --- */
.details-page-wrapper { background-color: var(--bg-dark); color: #fff; padding-bottom: 100px; }
.details-header { text-align: center; padding: 100px 20px 50px; }

/* --- L'ARÈNE SCROLL-TELLING --- */
.scroll-telling-arena { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }

/* 1. Colonne Gauche (La Scène) */
.visual-stage { width: 50%; position: relative; }

.sticky-cv-container {
    position: sticky;
    top: 15vh; /* On remonte l'image pour la centrer sur l'écran */
    height: 70vh; /* On passe de 60 à 80% de hauteur d'écran */
    display: flex; 
    justify-content: center; 
    align-items: center;
}

/* Le fond lumineux dynamique */
.dynamic-glow {
    position: absolute; width: 60%; height: 60%;
    background: var(--color-free);
    filter: blur(80px); opacity: 0.2;
    border-radius: 50%;
    transition: background-color 0.8s ease, opacity 0.8s ease, transform 0.8s ease;
}

/* Les images superposées */
.cv-layers { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
}
.cv-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; 
    opacity: 0; 
    /* Point de départ : décalé vers le bas ET légèrement agrandi (1.15 = 115%) */
    transform: translateY(30px) scale(1.15); 
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cv-img.active { 
    opacity: 1; 
    /* Point d'arrivée : à sa place, en conservant l'agrandissement */
    transform: translateY(0) scale(1.15); 
}

/* 2. Colonne Droite (Le Texte) */
.content-track { width: 50%; padding-left: 60px; padding-bottom: 20vh; }

.pack-story-block {
    min-height: 80vh; /* Espace le texte pour forcer le scroll */
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0.3; /* Grisé par défaut */
    transition: opacity 0.5s ease;
}
.pack-story-block.in-view { opacity: 1; /* S'allume quand on arrive dessus */ }

.pack-story-block h2 { font-size: 2.5rem; line-height: 1.2; margin: 15px 0 20px; }
.pack-story-block p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 25px; }
.story-features { list-style: none; padding: 0; color: #cbd5e1; }
.story-features li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; position:relative; padding-left:25px; }
.story-features li::before { content:"✓"; position:absolute; left:0px; }


/* Les Badges */
.badge { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; width: fit-content; }
.badge-free { background: rgba(148, 163, 184, 0.1); color: var(--color-free); border: 1px solid rgba(148, 163, 184, 0.3); }
.badge-basic { background: rgba(59, 130, 246, 0.1); color: var(--color-basic); border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-medium { background: rgba(0, 240, 255, 0.1); color: var(--color-medium); border: 1px solid rgba(0, 240, 255, 0.3); box-shadow: 0 0 15px rgba(0,240,255,0.2); }
.badge-premium { background: rgba(112, 0, 255, 0.1); color: var(--color-premium); border: 1px solid rgba(112, 0, 255, 0.3); box-shadow: 0 0 15px rgba(112,0,255,0.2); }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
    .scroll-telling-arena { flex-direction: column; }
    .visual-stage { width: 100%; height: 50vh; margin-bottom: 40px; }
    /* Sur mobile, le sticky devient fixe par rapport à la DIV, on empile */
    .sticky-cv-container { position: relative; top: 0; height: 100%; }
    .content-track { width: 100%; padding-left: 0; }
    .pack-story-block { min-height: auto; padding: 60px 0; opacity: 1; }
    .pack-story-block h2 { font-size: 1.8rem; }
}

/* --- SECTION MATRIX --- */
.matrix-section { padding: 100px 20px; background-color: var(--bg-dark); }
.matrix-container { max-width: 1000px; margin: 0 auto; }
.matrix-header { text-align: center; margin-bottom: 60px; }

/* Wrapper pour le scroll horizontal sur mobile */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--card-bg);
}

.saas-matrix {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px; /* Force le scroll sur mobile si l'écran est plus petit */
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* L'En-tête du tableau */
.saas-matrix th {
    padding: 25px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

/* Les Cellules */
.saas-matrix td {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* La Première Colonne (Fonctionnalités) alignée à gauche et fixe sur mobile */
.saas-matrix th:first-child,
.saas-matrix td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card-bg); /* Masque le texte qui glisse dessous */
    z-index: 2;
    box-shadow: 5px 0 15px -5px rgba(0,0,0,0.5); /* Ombre de séparation */
}
.saas-matrix th:first-child { background: rgba(15, 17, 26, 0.95); z-index: 3; }

/* --- MISE EN VALEUR DE LA COLONNE PREMIUM --- */
.highlight-col {
    background-color: rgba(112, 0, 255, 0.05);
    border-left: 1px solid rgba(112, 0, 255, 0.2);
    border-right: 1px solid rgba(112, 0, 255, 0.2);
}
.saas-matrix th.highlight-col {
    color: var(--color-premium);
    background-color: rgba(112, 0, 255, 0.1);
    border-top: 2px solid var(--color-premium);
}

/* Les Titres de Catégories (Création, IA, etc.) */
.category-row td {
    text-align: left;
    padding: 30px 20px 10px;
    font-family: 'Space Grotesk', sans-serif;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
}

/* --- ICÔNES ET VALEURS --- */
.check { font-size: 1.2rem; }
.check.yes { color: var(--accent-cyan); }
.check.no { color: rgba(255, 255, 255, 0.1); }
.val { font-weight: bold; color: #fff; }
.highlight-col .val { color: var(--color-premium); }

/* --- BOUTONS DU FOOTER TABLEAU --- */
.saas-matrix tfoot td { padding: 30px 20px; border-bottom: none; }

.btn-ghost-small {
    display: inline-block; padding: 10px 20px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
    color: #fff; text-decoration: none; transition: 0.3s;
}
.btn-ghost-small:hover { background: rgba(255,255,255,0.1); }

.btn-buy-small {
    display: inline-block; padding: 10px 20px;
    border-radius: 8px; background: var(--color-premium);
    color: #fff; text-decoration: none; font-weight: bold;
    box-shadow: 0 5px 15px rgba(112,0,255,0.3); transition: 0.3s;
}
.btn-buy-small:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(112,0,255,0.5); }

/* ==========================================================================
   🌑 WOOCOMMERCE CHECKOUT BLOCK : DARK SAAS EDITION
   ========================================================================== */

/* 1. CACHER LE LIEN "RETOUR AU PANIER" (Frictionless) */
.wc-block-checkout__actions_row .wc-block-checkout__return-to-cart {
    display: none !important;
}

/* 2. DÉTRUIRE LES FONDS BLANCS DES CHAMPS DE SAISIE */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox-control input,
.wc-block-checkout .wc-block-components-text-input textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* 3. COULEUR DES LABELS FLOTTANTS (Gérer le fond pour ne pas couper la bordure) */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox-control label {
    color: #cbd5e1 !important;
    background: transparent !important; /* Enlève le patch blanc derrière le texte */
}

/* 4. LE FOCUS NEON CYAN (Comme dans le Builder) */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox-control input:focus {
    border-color: #00f0ff !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1) !important;
    outline: none !important;
}

/* 5. LE RÉCAPITULATIF DE COMMANDE (Colonne de droite - Glassmorphism) */
.wc-block-components-sidebar {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(10px) !important;
    padding: 25px !important;
}

/* Titres et textes du résumé en blanc/gris clair */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name,
.wc-block-components-sidebar-title {
    color: #ffffff !important;
}
.wc-block-components-product-metadata {
    color: #94a3b8 !important;
}

/* 6. LES MOYENS DE PAIEMENT ET ÉTAPES (Panneaux) */
.wc-block-checkout__payment-interfaces,
.wc-block-components-checkout-step__container {
    background-color: transparent !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-checkbox__label {
    color: #e2e8f0 !important;
}

/* Ligne de séparation subtile */
.wc-block-components-totals-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 7. LE BOUTON DE VALIDATION PAYPAL/CHECKOUT */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    background-color: #00f0ff !important;
    color: #0F111A !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2) !important;
}
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4) !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE CHECKOUT : FIX PAYS & PAIEMENTS (VRAIE VERSION)
   ========================================================================== */

/* --- 1. LE MENU DÉROULANT DU PAYS --- */

/* Tuer le fond blanc du conteneur parent */
.wc-block-components-address-form__country .wc-blocks-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__container {
    background-color: transparent !important;
}

/* Styliser le champ lui-même */
.wc-block-components-address-form__country .wc-blocks-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

/* Corriger le texte de l'étiquette (Pays/Région) */
.wc-block-components-address-form__country .wc-blocks-components-select__label,
.wc-blocks-components-select .wc-blocks-components-select__label {
    color: #94a3b8 !important;
    background: transparent !important; /* Enlève le patch blanc de l'étiquette */
}

/* Le fond des options (quand on clique dessus) */
.wc-blocks-components-select__select option {
    background-color: #0F111A !important;
    color: #fff !important;
}


/* --- 2. LES CARTES DE PAIEMENTS --- */

/* La carte de base (inactive) */
.wc-block-components-radio-control-accordion-option {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
}

/* La carte SÉLECTIONNÉE (Néon) en ciblant ta classe exacte */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    background-color: rgba(0, 240, 255, 0.05) !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15) !important;
}

/* Titre du mode de paiement (ex: PayPal) */
.wc-block-components-radio-control__label {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Texte descriptif en dessous */
.wc-block-components-radio-control-accordion-content {
    color: #94a3b8 !important;
}

/* Enlever les traits disgracieux de l'accordéon */
.wc-block-components-radio-control-accordion-option::before,
.wc-block-components-radio-control-accordion-option::after {
    display: none !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE CHECKOUT : RÉSUMÉ DE COMMANDE (GLASSMORPHISM)
   ========================================================================== */

/* 1. LE CONTENEUR PRINCIPAL (La carte en verre) */
.wc-block-components-sidebar {
    background: rgba(15, 17, 26, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important;
}

/* 2. L'EN-TÊTE ("Résumé de la commande") */
.wc-block-components-checkout-order-summary__title-text {
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* Le prix affiché dans l'en-tête (sur mobile) et l'icône */
.wc-block-components-checkout-order-summary__title-price {
    color: #00f0ff !important;
    font-weight: bold !important;
}
.wc-block-components-checkout-order-summary__title-icon {
    fill: #ffffff !important;
}

/* 3. L'ARTICLE (Le Pack choisi) */
/* Nom du produit */
.wc-block-components-product-name {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
/* Prix de l'article */
.wc-block-components-product-price__value {
    color: #e2e8f0 !important;
    font-weight: bold !important;
}
/* Description / Métadonnées (ex: "Saisie illimitée...") */
.wc-block-components-product-metadata {
    color: #94a3b8 !important;
    font-size: 13px !important;
    margin-top: 5px !important;
}

/* L'image du produit et sa pastille de quantité */
.wc-block-components-order-summary-item__image img {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.wc-block-components-order-summary-item__quantity {
    background-color: #00f0ff !important;
    color: #0F111A !important;
    font-weight: 800 !important;
    box-shadow: 0 0 10px rgba(0,240,255,0.4) !important;
}

/* 4. LES SÉPARATEURS (Sous-total, Total, Coupons) */
.wc-block-components-totals-wrapper {
    border-top: 1px dashed rgba(255, 255, 255, 0.15) !important;
    padding-top: 15px !important;
    margin-top: 15px !important;
}

/* Libellés (Sous-total, etc.) */
.wc-block-components-totals-item__label {
    color: #94a3b8 !important;
}
.wc-block-components-totals-item__value {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* 5. LE BOUTON COUPON PROMO */
.wc-block-components-panel__button {
    color: #00f0ff !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.wc-block-components-panel__button:hover {
    color: #fff !important;
}
.wc-block-components-panel__button-icon {
    fill: currentColor !important;
}

/* 6. LE TOTAL FINAL (Doit sauter aux yeux) */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #00f0ff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 15px rgba(0,240,255,0.3) !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE MON COMPTE : LE TABLEAU DE BORD SAAS
   ========================================================================== */

/* 1. DISPOSITION GLOBALE (Flexbox pour un affichage moderne) */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 2. LE MENU LATÉRAL (La Sidebar) */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 280px !important;
    background: rgba(15, 17, 26, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    width: 100% !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
}

/* Nettoyer la liste native */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 8px !important;
}

/* Les liens du menu */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}

/* Les effets au survol et l'onglet ACTIF */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:hover a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: rgba(0, 240, 255, 0.05) !important;
    color: #00f0ff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    border-left: 4px solid #00f0ff !important;
    border-radius: 0 10px 10px 0 !important; /* Ajustement car bordure à gauche */
}

/* 3. LA ZONE DE CONTENU PRINCIPALE */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    color: #cbd5e1 !important;
    min-width: 300px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

/* Typographie dans le contenu */
.woocommerce-account .woocommerce-MyAccount-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}
/* Les liens (comme "Déconnexion", "Commandes récentes") */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-shadow: 0 0 10px rgba(0,240,255,0.4) !important;
}

/* 4. LES NOTIFICATIONS (Fini le carré blanc qui pique les yeux) */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
    background: rgba(85, 235, 105, 0.05) !important; /* Fond vert très léger */
    color: #55eb69 !important; /* Texte vert néon */
    border: 1px solid rgba(85, 235, 105, 0.2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.woocommerce-message::before { 
    color: #55eb69 !important; /* Icône native de validation */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-right: 15px !important;
}

/* Le bouton dans la notification (ex: "Voir le panier") */
.woocommerce-message .button {
    background: rgba(85, 235, 105, 0.1) !important;
    color: #55eb69 !important;
    border: 1px solid rgba(85, 235, 105, 0.3) !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    transition: all 0.3s ease !important;
}
.woocommerce-message .button:hover {
    background: #55eb69 !important;
    color: #0F111A !important;
    box-shadow: 0 0 15px rgba(85,235,105,0.4) !important;
}

/* Modification spécifique si c'est une notification d'ERREUR */
.woocommerce-error {
    background: rgba(249, 14, 148, 0.05) !important;
    color: #f90e94 !important;
    border-color: rgba(249, 14, 148, 0.2) !important;
}
.woocommerce-error::before { color: #f90e94 !important; }

/* ==========================================================================
   🌑 DASHBOARD "MON CV" : DESIGN DES ACTIONS
   ========================================================================== */

/* 1. LE BADGE DE STATUT (Pack actuel) */
.bws-cv-status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* Variantes selon le pack */
.status-free { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
.status-basic { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); }
.status-medium { background: rgba(0, 240, 255, 0.1); color: #00f0ff; border: 1px solid rgba(0,240,255,0.2); }
.status-premium { background: rgba(112, 0, 255, 0.1); color: #b266ff; border: 1px solid rgba(112,0,255,0.2); }

/* 2. LES BOUTONS D'ACTION (Modifier / Télécharger) */
.bws-dashboard-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.bws-btn-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
}

/* Bouton Modifier (Style Cyber) */
.btn-edit-cv {
    background: rgba(255, 255, 255, 0.05);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-edit-cv:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #00f0ff;
    box-shadow: 0 0 15px rgba(0,240,255,0.2);
}

/* Bouton Télécharger (Style Neon) */
.btn-download-pdf {
    background: #00f0ff;
    color: #0F111A !important;
    box-shadow: 0 4px 15px rgba(0,240,255,0.3);
}
.btn-download-pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,240,255,0.5);
}

/* Bouton ATS (Futur - Style Violet) */
.btn-download-ats {
    background: rgba(112, 0, 255, 0.1);
    color: #b266ff !important;
    border: 1px solid rgba(112, 0, 255, 0.3);
}
.btn-download-ats:hover {
    background: #7000ff;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(112,0,255,0.4);
}

/* ==========================================================================
   🌑 FIX : EXCEPTION POUR LES BOUTONS DU DASHBOARD MON CV
   ========================================================================== */

/* On force la couleur des textes de nos boutons pour contrer le CSS WooCommerce */
.woocommerce-account .woocommerce-MyAccount-content a.bws-btn-dashboard {
    color: #ffffff !important; /* Blanc par défaut pour Edit et ATS */
}

/* On force le texte NOIR pour le bouton Cyan (Télécharger) */
.woocommerce-account .woocommerce-MyAccount-content a.btn-download-pdf,
.btn-download-pdf {
    background: rgba(0, 240, 255, 0.08) !important; /* Fond légèrement teinté */
    color: #00f0ff !important; /* Texte Cyan pour garder l'identité */
    border: 1px solid rgba(0, 240, 255, 0.3) !important; /* Bordure fine */
    box-shadow: none !important; /* Fini le halo radioactif permanent */
}

/* Effet au survol doux et pro */
.woocommerce-account .woocommerce-MyAccount-content a.btn-download-pdf:hover,
.btn-download-pdf:hover {
    background: rgba(0, 240, 255, 0.15) !important;
    border-color: #00f0ff !important;
    color: #fff !important; /* Le texte passe au blanc au survol */
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.15) !important; /* Halo très subtil */
    transform: translateY(-2px);
}

/* Le bouton ATS violet */
.woocommerce-account .woocommerce-MyAccount-content a.btn-download-ats {
    color: #b266ff !important;
}
.woocommerce-account .woocommerce-MyAccount-content a.btn-download-ats:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   🌑 FIX : FOOTER TOUJOURS EN BAS SUR L'ESPACE CLIENT
   ========================================================================== */

/* Force la zone de contenu à prendre au moins 70% de la hauteur de l'écran */
.woocommerce-account .site-content,
.woocommerce-account #content {
    min-height: 75vh !important;
    display: flex;
    flex-direction: column;
}

/* S'assure que le conteneur WooCommerce remplit bien cet espace */
.woocommerce-account .woocommerce {
    flex-grow: 1;
}

/* Si le footer a une marge haute résiduelle, on la supprime pour un rendu net */
.site-footer, #colophon {
    margin-top: 25px !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE MON COMPTE : ACCUEIL DU TABLEAU DE BORD
   ========================================================================== */

/* 1. On cache les vieux paragraphes par défaut de WooCommerce */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
    display: none !important;
}

/* 2. Le conteneur de bienvenue */
.bws-dashboard-welcome {
    animation: fadeIn 0.5s ease;
}
.bws-welcome-title {
    color: #fff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 28px !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
}
.bws-welcome-title span {
    color: #00f0ff; /* Prénom en Cyan */
}
.bws-welcome-subtitle {
    color: #94a3b8 !important;
    font-size: 15px !important;
    margin-bottom: 35px !important;
}

/* 3. La Grille des Cartes */
.bws-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

/* 4. Le Design des Cartes */
.bws-dash-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 25px 20px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.bws-dash-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
}

/* La carte "Mon CV" mise en avant (Highlight) */
.bws-dash-card.highlight {
    background: rgba(0, 240, 255, 0.03) !important;
    border-color: rgba(0, 240, 255, 0.2) !important;
}
.bws-dash-card.highlight:hover {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: #00f0ff !important;
    box-shadow: 0 15px 35px rgba(0, 240, 255, 0.15) !important;
}

/* 5. Éléments internes des cartes */
.bws-dash-card .card-icon {
    font-size: 32px !important;
    margin-bottom: 15px !important;
}
.bws-dash-card h3 {
    color: #fff !important;
    font-size: 18px !important;
    margin: 0 0 10px 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}
.bws-dash-card.highlight h3 {
    color: #00f0ff !important; /* Titre Cyan pour "Mon CV" */
}
.bws-dash-card p {
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE : FIX PAGE DE CONNEXION (GLASSMORPHISM V2)
   ========================================================================== */

/* 1. On isole la page de connexion pour éviter les conflits avec le Dashboard */
body.woocommerce-account:not(.logged-in) .woocommerce {
    display: block !important;
    background: rgba(15, 17, 26, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important;
    max-width: 450px !important;
    margin: 60px auto !important;
}

/* 2. On nettoie le formulaire interne */
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 3. Le Titre ("Se connecter") enfin à sa place */
body.woocommerce-account:not(.logged-in) h2 {
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 26px !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

/* 4. Forcer l'affichage en colonne pour éviter l'écrasement des champs */
body.woocommerce-account:not(.logged-in) form .form-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    float: none !important;
}

/* Les étiquettes (Labels) */
body.woocommerce-account:not(.logged-in) form .form-row label:not(.woocommerce-form-login__rememberme) {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* 5. Les champs de saisie */
body.woocommerce-account:not(.logged-in) form .form-row input.input-text {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}
body.woocommerce-account:not(.logged-in) form .form-row input.input-text:focus {
    border-color: #00f0ff !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1) !important;
    outline: none !important;
}

/* 6. LE REMÈDE MIRACLE CONTRE LE FOND BLANC DES NAVIGATEURS (Autofill) */
body.woocommerce-account:not(.logged-in) form .form-row input.input-text:-webkit-autofill,
body.woocommerce-account:not(.logged-in) form .form-row input.input-text:-webkit-autofill:hover, 
body.woocommerce-account:not(.logged-in) form .form-row input.input-text:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #0F111A inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 7. Le bouton de connexion */
body.woocommerce-account:not(.logged-in) form .woocommerce-button {
    width: 100% !important;
    background: #00f0ff !important;
    color: #0F111A !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    margin-top: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2) !important;
}
body.woocommerce-account:not(.logged-in) form .woocommerce-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4) !important;
    background: #ffffff !important;
}

/* 8. La case "Se souvenir de moi" et le lien "Mot de passe perdu" */
body.woocommerce-account:not(.logged-in) form .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    cursor: pointer;
}
body.woocommerce-account:not(.logged-in) form input[type="checkbox"] {
    accent-color: #00f0ff !important;
    width: 16px;
    height: 16px;
    margin: 0 !important;
}
body.woocommerce-account:not(.logged-in) form .lost_password {
    text-align: center !important;
    margin-top: 25px !important;
    margin-bottom: 0 !important;
}
body.woocommerce-account:not(.logged-in) form .lost_password a {
    color: #00f0ff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: all 0.2s ease;
}
body.woocommerce-account:not(.logged-in) form .lost_password a:hover {
    text-shadow: 0 0 10px rgba(0,240,255,0.4) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE : LISTE DES COMMANDES & DÉTAILS
   ========================================================================== */

/* 1. RESET DES TABLEAUX WOOCOMMERCE */
.woocommerce-account table.shop_table {
    background: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    border-radius: 0 !important;
}

/* En-têtes du tableau (th) */
.woocommerce-account table.shop_table thead th {
    background: rgba(255, 255, 255, 0.02) !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Lignes du tableau (td) */
.woocommerce-account table.shop_table tbody td,
.woocommerce-account table.shop_table tfoot td,
.woocommerce-account table.shop_table tfoot th {
    padding: 15px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* 2. LE BOUTON "VOIR" (Liste des commandes) */
.woocommerce-account table.my_account_orders .button.view {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.woocommerce-account table.my_account_orders .button.view:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.15) !important;
}

/* 3. PAGE DÉTAILS DE LA COMMANDE */
/* Le lien du produit */
.woocommerce-account table.order_details .product-name a {
    color: #00f0ff !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.woocommerce-account table.order_details .product-name a:hover {
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
    color: #ffffff !important;
}

/* Les meta-données cachées sous le produit (ex: bws_cv_id: 35) */
.woocommerce-account table.order_details .wc-item-meta {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #64748b !important;
    list-style: none !important;
    padding: 0 !important;
}
.woocommerce-account table.order_details .wc-item-meta li {
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.woocommerce-account table.order_details .wc-item-meta li p {
    display: inline !important;
    margin: 0 !important;
}

/* Le bouton "Commander une nouvelle fois" */
.woocommerce-account .order-again .button {
    display: inline-block !important;
    background: rgba(0, 240, 255, 0.08) !important;
    color: #00f0ff !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
    text-decoration: none !important;
}
.woocommerce-account .order-again .button:hover {
    background: rgba(0, 240, 255, 0.15) !important;
    border-color: #00f0ff !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.15) !important;
}

/* 4. BLOC ADRESSE DE FACTURATION (En bas de la commande) */
.woocommerce-account .woocommerce-customer-details {
    margin-top: 40px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 25px !important;
}
.woocommerce-account .woocommerce-customer-details h2 {
    font-size: 18px !important;
    color: #fff !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-family: 'Space Grotesk', sans-serif !important;
}
.woocommerce-account .woocommerce-customer-details address {
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    font-style: normal !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE : ONGLET ADRESSES & FORMULAIRES
   ========================================================================== */

/* --- 1. L'ACCUEIL DES ADRESSES (Correctif Anti-Escalier & Titre caché) --- */

/* On détruit les sauts de ligne invisibles (clear) natifs de WooCommerce */
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after {
    display: none !important;
}

/* On utilise Flexbox pour forcer l'alignement côte à côte quoi qu'il arrive */
.woocommerce-account .woocommerce-Addresses {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    margin-top: 20px !important;
    width: 100% !important;
}

/* On force les 2 cartes à prendre exactement 50% de l'espace (moins l'écart) */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
    flex: 1 1 calc(50% - 15px) !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
    
    /* Design de la carte */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    transition: all 0.3s ease !important;
}

/* L'en-tête de la carte : Le titre en haut, le bouton juste en dessous */
.woocommerce-account .woocommerce-Address-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    float: none !important;
}

/* Le titre caché réapparaît de force ! */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
    font-size: 20px !important;
    margin: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Le bouton "Modifier" */
.woocommerce-account .woocommerce-Address-title a.edit {
    display: inline-block !important;
    position: static !important;
    color: #00f0ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: rgba(0, 240, 255, 0.08) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}
.woocommerce-account .woocommerce-Address-title a.edit:hover {
    background: rgba(0, 240, 255, 0.15) !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.15) !important;
}

/* On s'assure que sur mobile, ça passe sur une seule colonne */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-Addresses .woocommerce-Address {
        flex: 1 1 100% !important;
    }
}

/* --- 2. LES FORMULAIRES DE MODIFICATION --- */

/* Organisation des colonnes avec Flexbox */
.woocommerce-address-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* Espacement des lignes */
.woocommerce-account form .form-row {
    margin-bottom: 20px !important;
}
/* Pleine largeur */
.woocommerce-account form .form-row-wide {
    width: 100% !important;
}
/* Moitié de largeur (Prénom/Nom) */
.woocommerce-account form .form-row-first,
.woocommerce-account form .form-row-last {
    width: 48% !important;
}

/* Les Labels (Étiquettes) */
.woocommerce-account form label {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* L'astérisque obligatoire rouge néon */
.woocommerce-account form label abbr.required {
    color: #f90e94 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* Les Champs de saisie et Sélecteurs (Glassmorphism) */
.woocommerce-account form input.input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 14px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

/* L'effet Cyan au clic (Focus) */
.woocommerce-account form input.input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
    border-color: #00f0ff !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1) !important;
    outline: none !important;
}

/* Options de la liste déroulante Pays */
.woocommerce-account form select option {
    background-color: #0F111A !important;
    color: #fff !important;
}

/* Le bouton d'enregistrement (Action Principale) */
.woocommerce-account form button[name="save_address"] {
    background: #00f0ff !important;
    color: #0F111A !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 30px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin-top: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2) !important;
    cursor: pointer !important;
}
.woocommerce-account form button[name="save_address"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4) !important;
    background: #ffffff !important;
}

/* Mode Mobile : On passe tout sur une seule colonne */
@media (max-width: 768px) {
    .woocommerce-account form .form-row-first,
    .woocommerce-account form .form-row-last {
        width: 100% !important;
    }
}

/* ==========================================================================
   🌑 FIX : ALIGNEMENT DES CARTES ADRESSES & MENU SELECT2
   ========================================================================== */

/* --- 1. CORRECTION DE L'EN-TÊTE DES CARTES ADRESSES --- */
.woocommerce-account .woocommerce-Address-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}
.woocommerce-account .woocommerce-Address-title h3 {
    margin-bottom: 0 !important; /* Annule l'ancienne marge */
    flex: 1 !important;
}
.woocommerce-account .woocommerce-Address-title a.edit {
    margin-bottom: 0 !important; /* Annule l'ancienne marge */
    white-space: nowrap !important; /* Empêche le bouton de se couper en deux */
}


/* --- 2. CORRECTION DU CHAMP PAYS (SELECT2) --- */

/* Le conteneur généré par Select2 */
.woocommerce-account form .select2-container .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    height: auto !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

/* Le texte à l'intérieur ("France") */
.woocommerce-account form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: normal !important;
    padding: 0 !important;
}

/* La petite flèche à droite */
.woocommerce-account form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 15px !important;
}

/* L'effet Cyan au clic (Focus) */
.woocommerce-account form .select2-container--focus .select2-selection--single,
.woocommerce-account form .select2-container--open .select2-selection--single {
    border-color: #00f0ff !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1) !important;
}

/* --- 3. LA LISTE DÉROULANTE SELECT2 (Quand elle est ouverte) --- */
.select2-dropdown {
    background-color: #0F111A !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
}

/* Le champ de recherche à l'intérieur du menu déroulant */
.select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 8px !important;
}
.select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    border-color: #00f0ff !important;
}

/* Les options de la liste (Pays) */
.select2-results__option {
    color: #cbd5e1 !important;
    background-color: transparent !important;
    padding: 10px 15px !important;
}

/* Option au survol ou sélectionnée */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(0, 240, 255, 0.1) !important;
    color: #00f0ff !important;
}

/* ==========================================================================
   🌑 WOOCOMMERCE : DÉTAILS DU COMPTE (LE BOSS FINAL)
   ========================================================================== */

/* 1. Le texte d'aide (ex: "Indique comment votre nom apparaîtra...") */
.woocommerce-EditAccountForm span.description,
.woocommerce-EditAccountForm em {
    color: #64748b !important;
    font-size: 12px !important;
    font-style: normal !important;
    display: block !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

/* 2. L'encadré "Changement de mot de passe" (Fieldset) */
.woocommerce-EditAccountForm fieldset {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2) !important;
}

/* Le titre de l'encadré (Legend) */
.woocommerce-EditAccountForm fieldset legend {
    color: #00f0ff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 0 15px !important;
    background: transparent !important;
    font-family: 'Space Grotesk', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 3. L'icône "Œil" pour afficher/masquer le mot de passe */
.woocommerce form .show-password-input {
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.woocommerce form .show-password-input::after {
    color: #94a3b8 !important; /* Rend l'œil gris clair au lieu de noir */
    transition: color 0.3s ease !important;
}
.woocommerce form .show-password-input:hover::after {
    color: #00f0ff !important; /* L'œil devient cyan au survol */
}

/* 4. Le bouton d'enregistrement final */
.woocommerce-EditAccountForm button[name="save_account_details"] {
    background: #00f0ff !important;
    color: #0F111A !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 35px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin-top: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2) !important;
    cursor: pointer !important;
}
.woocommerce-EditAccountForm button[name="save_account_details"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4) !important;
    background: #ffffff !important;
}

/* --- PAGE DE CONFIRMATION DARK GLOSSY --- */

/* Fond général de la page de commande */
.woocommerce-order-received .site-content, 
.woocommerce-checkout.woocommerce-order-received {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    min-height: 100vh;
    padding-top: 50px;
}

/* Message de remerciement principal */
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: #00f0ff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
    margin-bottom: 40px;
}

/* Barre de résumé (Numéro, Date, Total...) */
ul.woocommerce-thankyou-order-details {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px !important;
    border-radius: 15px;
    list-style: none !important;
    margin-bottom: 40px !important;
}

ul.woocommerce-thankyou-order-details li {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 20px;
    text-transform: uppercase;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}

ul.woocommerce-thankyou-order-details li:last-child { border-right: none; }

ul.woocommerce-thankyou-order-details li strong {
    display: block;
    color: #ff9d00; /* Orange pour les chiffres clés */
    font-size: 16px;
    margin-top: 5px;
}

/* Tableaux de détails de commande */
.woocommerce-order-details, .woocommerce-customer-details {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.woocommerce-table--order-details thead th {
    color: #00f0ff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(0, 240, 255, 0.2) !important;
}

.woocommerce-table--order-details td, .woocommerce-table--order-details th {
    padding: 15px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce-table--order-details tfoot th { color: #94a3b8; }
.woocommerce-table--order-details tfoot td { color: #fff; font-weight: bold; }

/* Adresses de facturation */
address {
    font-style: normal;
    color: #94a3b8;
    line-height: 1.8;
}

.woocommerce-column__title {
    color: #fff !important;
    font-family: 'Space Grotesk', sans-serif;
    border-bottom: 1px solid #ff9d00;
    display: inline-block;
    margin-bottom: 20px !important;
}

/* Boutons (Commander à nouveau, etc) */
.woocommerce-order-received .button {
    background: #00f0ff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    transition: all 0.3s ease;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.woocommerce-order-received .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
    background: #fff !important;
}

/* Liens produits */
.woocommerce-table__product-name a {
    color: #00f0ff !important;
    text-decoration: none;
}

/* --- AJUSTEMENT DU TABLEAU --- */

/* Padding-left de 25px sur la première colonne (En-tête et Données) */
.woocommerce-table--order-details th:first-child, 
.woocommerce-table--order-details td:first-child {
    padding-left: 25px !important;
}

/* --- BOUTONS D'ACTIONS (Modifier CV & Mon Compte) --- */

/* Conteneur pour aligner les boutons à droite */
.bws-thankyou-actions {
    display: flex;
    justify-content: flex-end; /* Aligne à droite */
    gap: 15px;
    margin-top: 20px;
}

/* Style commun pour tes nouveaux boutons glossy */
.bws-thankyou-actions .button {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 12px 25px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Couleur spécifique pour "Modifier votre CV" (Cyan) */
.bws-thankyou-actions .bws-btn-modifier {
    border-color: rgba(0, 240, 255, 0.3) !important;
    color: #00f0ff !important;
}

.bws-thankyou-actions .button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* On s'assure que le bouton "Commander à nouveau" original 
   et tes nouveaux boutons s'alignent bien si nécessaire */
.woocommerce-order-details p.order-again {
    display: inline-block;
    margin: 0;
}

.bws-mobile-app-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #0f172a; color: white; overflow-y: auto; z-index: 999999;
}

/* Animation Erreur PIN */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}
.shake { animation: shake 0.2s ease-in-out 0s 2; }

/* Sticky Footer */
.bws-m-sticky-actions {
    position: fixed; bottom: 20px; left: 5%; width: 90%;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px);
    padding: 15px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.bws-m-sticky-actions a, .bws-m-sticky-actions button {
    height: 50px; border-radius: 12px; border: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 240, 255, 0.1); color: #00f0ff; text-decoration: none;
}

/* Quand on est en mode Mobile App, on cache les éléments inutiles du thème */
body.bws-is-mobile-app .site-header, 
body.bws-is-mobile-app .site-footer,
body.bws-is-mobile-app .ast-site-header { 
    display: none !important; 
}

body.bws-is-mobile-app {
    background-color: #0F111A !important;
}

/* Grille de stats sur le dashboard */
.bws-client-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}
.bws-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(5px);
}

.bws-stat-card .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: #00f0ff;
    margin: 5px 0;
}

.bws-stat-card .stat-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 1px;
}

/* Carte design spécifique */
.design-card .design-name {
    font-size: 18px !important;
    color: #ff9d00 !important;
}

/* Gestion du verrouillage QR Code */
.qr-card.is-locked {
    opacity: 0.6;
    filter: grayscale(1);
}

.lock-overlay {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
}

/* Par défaut, l'onglet Lettre de Motivation est bridé */
.woocommerce-MyAccount-navigation-link--lettre-motivation {
    opacity: 0.5;
    pointer-events: none;
}
.woocommerce-MyAccount-navigation-link--lettre-motivation a::after {
    content: " 🔒";
}

/* SI LE BODY A LA CLASSE (Pack Premium détecté), ON LIBÈRE TOUT */
body.user-has-ai .woocommerce-MyAccount-navigation-link--lettre-motivation {
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.user-has-ai .woocommerce-MyAccount-navigation-link--lettre-motivation a::after {
    content: " ✨" !important; /* Petit badge brillant au lieu du cadenas */
    color: #00f0ff;
}

.design-card .stat-value { color: #ff9d00 !important; font-size: 18px !important; }

/* --- BANNIÈRE D'UPSELL (CORRIGÉE) --- */
.bws-upsell-banner {
    position: relative !important; /* Force le point d'ancrage */
    overflow: hidden !important;   /* COUPE STRICTEMENT LE REFLET */
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(112, 0, 255, 0.1) 100%);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    z-index: 1;
}

/* Le fameux reflet */
.bws-upsell-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; 
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 50%, 
        transparent 100%
    );
    transform: skewX(-25deg); /* Plus élégant et moins gourmand que rotate */
    animation: bws-shine 10s infinite;
    pointer-events: none; /* Laisse passer les clics à travers */
    z-index: -1; /* Reste derrière le texte et le bouton */
}

@keyframes bws-shine {
    0% { left: -150%; }
    20% { left: 150%; } /* Passe vite */
    100% { left: 150%; } /* Attend avant de recommencer */
}

.upsell-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.upsell-icon {
    font-size: 40px;
}

.upsell-text h3 {
    margin: 0;
    color: #fff !important;
    font-size: 18px;
    font-weight: 800;
}

.upsell-text p {
    margin: 5px 0 0 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.4;
}

/* Bouton d'action brillant */
.bws-btn-upgrade {
    background: #00f0ff !important;
    color: #0F111A !important;
    font-weight: bold !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    position: relative;
    z-index: 10;
}

.bws-btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
    background: #00f0ff !important;
}

/* Responsive */
@media (max-width: 600px) {
    .bws-upsell-banner {
        flex-direction: column;
        text-align: center;
    }
    .upsell-content {
        flex-direction: column;
    }
}

/* --- CADRE MINIMALISTE PERCUTANT --- */
.bws-minimal-link-frame {
    margin-top: 15px;
    position: relative;
}

.bws-punchy-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.bws-punchy-link span {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.bws-punchy-link svg {
    color: #00f0ff;
    transition: transform 0.3s ease;
}

/* Effet au survol */
.bws-punchy-link:hover {
    background: rgba(0, 240, 255, 0.03);
    border-color: rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.bws-punchy-link:hover span {
    color: #fff;
}

.bws-punchy-link:hover svg {
    transform: translateX(8px);
}

/* Optionnel : petite lueur au survol */
.bws-punchy-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease;
    z-index: -1;
}

.bws-punchy-link:hover::before {
    width: 100%;
}

/* --- CADRE CTA PAGE D'ACCUEIL --- */
.bws-home-cta-frame {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 240, 255, 0.05) 100%);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    max-width: 1100px; /* À ajuster selon la largeur de ton site */
    margin: 160px auto 0px auto; /* Centre le cadre avec de l'espace autour */
}

/* Effet de lévitation au survol de tout le cadre */
.bws-home-cta-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.4);
}

.bws-cta-content {
    flex: 1;
}

.bws-cta-title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
}

.bws-cta-desc {
    color: #94a3b8;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* Le bouton lumineux */
.bws-btn-glow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #00f0ff;
    color: #0f111a;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bws-btn-glow svg {
    transition: transform 0.3s ease;
}

.bws-btn-glow:hover {
    background: #fff;
    color: #0f111a;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
}

.bws-btn-glow:hover svg {
    transform: translateX(5px);
}

/* Responsive pour Mobile */
@media (max-width: 768px) {
    .bws-home-cta-frame {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        margin: 40px 20px;
    }
    
    .bws-btn-glow {
        width: 100%;
        justify-content: center;
    }
}

/* --- CONFIGURATION PDF GOTEMBERG --- */
@media print {
    @page {
        size: A4;
        margin: 0; /* Important pour le "borderless" */
    }

    body {
        margin: 0;
        -webkit-print-color-adjust: exact; /* Force l'impression des couleurs de fond */
    }

    /* La classe à mettre sur tes blocs d'expérience/formation */
    .cv-section-item {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 10px;
    }

    /* Le fond de la colonne latérale s'il y en a une */
    /* En position: fixed, il se répète sur chaque page créée par Gotenberg */
    .cv-sidebar-bg {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 30%; /* À adapter selon le template */
        z-index: -1;
    }
}

/* Style pour l'éditeur (hors impression) */
.cv-section-item {
    transition: transform 0.2s ease;
}

/* ==========================================================================
   🛠️ CHANTIER 1 : CORRECTIONS MOBILE (PrintMyCV)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. BOUTON ACCUEIL QUI DÉBORDE */
    /* Empêche le cadre et le bouton "Explorer nos offres" de sortir de l'écran */
    .bws-home-cta-frame {
        padding: 20px !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
    .bws-btn-glow {
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Autorise le texte à passer sur 2 lignes si besoin */
        text-align: center;
        justify-content: center;
    }

    /* 2. FORMULAIRE RECRUTEUR (Le champ Nom qui décale tout) */
    /* Force tous les champs de saisie à rester dans la limite de l'écran */
    .bws-b2b-dashboard input,
    .bws-b2b-dashboard select,
    .bws-b2b-dashboard textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. TAILLE DES POLICES (Qualités profil recruteur & texte général) */
    /* Agrandit les "pilules" de compétences pour qu'elles soient lisibles au doigt */
    .bws-skill-tag {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    /* 4. CENTRAGE (Lettre de motivation & Pavé numérique PIN) */
    /* Centre le contenu dans l'espace client */
    .bws-motivation-section,
    .woocommerce-MyAccount-content form {
        text-align: center;
    }
    /* S'assure que le pavé numérique (clavier) est bien au milieu de l'écran */
    .bws-pin-pad, 
    .bws-pin-container {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    /* 5. LE BUILDER / VIDÉO EN MINIATURE (Anti-Dézoom) */
    /* Empêche la page entière de rétrécir en forçant le conteneur principal à s'empiler */
    .bws-builder-layout,
    .bws-cv-builder-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Si le rendu de droite a un scale/zoom forcé, on le désactive sur mobile */
    .bws-preview-container {
        transform: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. Formulaire d'inscription : Forcer 1 seule colonne au lieu de 2 */
    .bws-b2b-dashboard form div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 2. Barre de recherche : Autoriser le bouton à passer en dessous */
    .bws-b2b-dashboard header form > div {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    /* 3. Bouton "Rechercher" : Prendre toute la largeur sur mobile */
    .bws-b2b-dashboard header form .bws-btn-search {
        width: 100% !important;
        margin-top: 5px !important;
    }

    /* =======================================================
       CORRECTION POINT 3 & 4 : QUALITÉS ET CODE PIN
       ======================================================= */

    /* POINT 3 : Qualités (Contournement du style inline React) */
    /* On cible les bulles (span) situées dans les blocs de la colonne de droite */
    .bws-b2b-header div span {
        font-size: 13px !important;       /* Taille plus grande et lisible */
        color: #ffffff !important;        /* Forcé en blanc pur */
        font-weight: 600 !important;      /* Un peu plus gras */
        padding: 8px 14px !important;     /* Zone de touché plus large */
    }

    .bws-m-lockscreen {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 20px 0 !important;
    }

    /* On cible directement la grille du pavé numérique */
    .bws-m-numpad {
        margin: 0 auto !important;
        justify-content: center !important; /* Centre la grille entière */
        justify-items: center !important;   /* Centre chaque bouton rond dans sa colonne */
        width: 100% !important;
        max-width: 320px !important;        /* Empêche la grille de s'étirer et la force à rester au milieu */
        margin: 20px auto 0 auto !important;
    }
    
    /* On force la grille des numéros (enfant direct) à se centrer */
    .bws-m-lockscreen > div {
        justify-content: center !important;
    }
    
    /* Correction optionnelle pour centrer la section lettre de motivation (Espace candidat) */
    .woocommerce-MyAccount-content form {
        text-align: center;
        margin: 0 auto;
    }

    /* =======================================================
       SÉPARATION DES COMMANDES WOOCOMMERCE SUR MOBILE
       ======================================================= */

    /* On ajoute un espace et un trait de couleur sous chaque commande (chaque ligne <tr>) */
    table.woocommerce-orders-table tbody tr.order {
        display: block !important;
        border-bottom: 2px dashed #00f0ff !important; /* Le trait cyan PrintMyCV (en pointillés pour le style) */
        padding-bottom: 25px !important;
        margin-bottom: 25px !important;
    }

    /* On retire le trait sous la toute dernière commande pour que le bloc se ferme proprement */
    table.woocommerce-orders-table tbody tr.order:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Optionnel : On retire la petite bordure grise par défaut du dernier élément "Actions" de chaque commande */
    table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
        border-bottom: none !important;
    }

    /* =======================================================
       COMPARATIF SAAS (Version Native - Sûre & Standard)
       ======================================================= */

    /* 1. Le conteneur redevient un simple couloir de scroll de la taille de ton écran */
    .table-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important; /* Active le scroll horizontal natif */
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
        padding: 0 0 20px 0 !important;
    }

    /* 2. On donne une largeur totale fixe au tableau pour que les produits AIENT DE L'ESPACE pour exister */
    .saas-matrix {
        width: 100% !important;
        min-width: 750px !important; /* Essentiel : garantit que les produits font au moins 500px cumulés à droite */
        border-collapse: separate !important; /* Obligatoire pour le mode sticky */
        border-spacing: 0 !important;
    }

    /* 3. La colonne de gauche reste figée proprement sans écraser le reste */
    .saas-matrix th.col-feature,
    .saas-matrix td:first-child {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        background-color: #0f111a !important;
        z-index: 2 !important;
        width: 202px !important;
        min-width: 202px !important;
        max-width: 202px !important;
        font-size: 13px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* 4. Les titres de catégories (On répare le bug : ils restent figés aussi, sans casser la grille) */
    .saas-matrix tr.category-row td {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 1 !important;
        background-color: #161a30 !important;
        font-size: 13px !important;
        text-align: left !important;
        padding: 12px 15px !important;
    }

    /* 5. Les colonnes produits (Libres de défiler à droite) */
    .saas-matrix td:not(:first-child),
    .saas-matrix th:not(.col-feature) {
        text-align: center !important;
        width: 90px !important;
        min-width: 90px !important;
        font-size: 13px !important;
    }

    .saas-matrix tr th.col-free {
        max-width: 61px !important;
    }
}

/* =======================================================
   DESIGN PREMIUM POUR LA PAGE CONTACT (ID: 322)
   ======================================================= */

/* 1. Reset & Immersion de la page */
body.page-id-322 {
    background-color: #0F111A !important; /* Fond sombre absolu */
    font-family: 'Space Grotesk', sans-serif !important;
}

/* On cadre proprement le contenu textuel au centre */
body.page-id-322 .bws-site-content main {
    max-width: 750px !important;
    margin: 0 auto !important;
    padding: 60px 20px !important;
}

/* 2. Nettoyage : On masque le titre de page doublon généré par le thème */
body.page-id-322 main > h2:first-child {
    display: none !important;
}

/* 3. Métamorphose des Titres */
body.page-id-322 .wp-block-heading {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

/* Titre Principal : "Nous contacter" */
body.page-id-322 h1.wp-block-heading {
    font-size: 46px !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    /* Effet dégradé Cyberpunk signature */
    background: linear-gradient(135deg, #00f0ff 0%, #f90e94 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Sous-titre : "Une question ? Une idée ? Échangeons." */
body.page-id-322 h2.wp-block-heading {
    font-size: 20px !important;
    text-align: center !important;
    color: #cbd5e1 !important;
    margin-bottom: 40px !important;
    font-weight: 400 !important;
}

/* 4. Sublimation des Paragraphes */
body.page-id-322 .wp-block-paragraph {
    color: #94a3b8 !important; /* Gris ardoise élégant */
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 24px !important;
}

/* Mise en avant des mots en gras (ex: "PrintMyCV.fr") */
body.page-id-322 .wp-block-paragraph strong {
    color: #00f0ff !important; /* Allumage en Cyan fluorescent */
    font-weight: 600 !important;
}

/* 5. Refonte de la liste à puces (Candidats / Recruteurs) */
body.page-id-322 .wp-block-list {
    list-style: none !important; /* On vire les puces rondes moches */
    padding: 25px !important;
    margin: 35px auto !important;
    max-width: 650px !important;
    /* Transformation de la liste en mini-carte discrète */
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
}

body.page-id-322 .wp-block-list li {
    color: #cbd5e1 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    padding-left: 30px !important;
    position: relative !important;
}

body.page-id-322 .wp-block-list li:last-child {
    margin-bottom: 0 !important;
}

/* Remplacement de la puce par un éclair cyan tech */
body.page-id-322 .wp-block-list li::before {
    content: "⚡" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #00f0ff !important;
}

body.page-id-322 .wp-block-list li strong {
    color: #fff !important;
}

/* 6. Section "Droit à l'oubli instantané" stylisée en encadré de Sécurité */
body.page-id-322 h3.wp-block-heading {
    max-width: 650px !important;
    margin: 60px auto 15px auto !important;
    font-size: 18px !important;
    color: #ff9d00 !important; /* Couleur Ambre/Sécurité */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.page-id-322 h3.wp-block-heading + .wp-block-paragraph {
    max-width: 650px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Look "Notice RGPD / Coffre fort" */
    background: rgba(255, 157, 0, 0.02) !important;
    border: 1px solid rgba(255, 157, 0, 0.15) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #94a3b8 !important;
}

body.page-id-322 h3.wp-block-heading + .wp-block-paragraph strong {
    color: #fff !important;
}