/* 
==============================================
            CV-STYLES.CSS - Axel Walter 
==============================================
*/

/* Styles globaux pour le CV */
@page { size: A4; margin: 0; }

.cv-container {
    width: 210mm;
    height: auto; /* Hauteur automatique pour l'affichage web */
    max-height: none; /* Supprime la contrainte de hauteur maximale pour le web */
    overflow: visible; /* Permet le défilement pour le web */
    background: white !important; /* Force le fond blanc pour le CV en ligne */
    max-width: 210mm;
    margin: 0 auto;
    box-shadow: 0 15px 35px var(--shadow-light);
    display: flex;
    flex-direction: row;
    font-family: var(--font-primary); /* Utilise la variable de thème pour la police */
}

/* NOUVELLE COULEUR : Vert Sapin / Émeraude foncé (couleurs de marque fixes) */
.cv-bg-brand, .bg-brand { background-color: #064e3b; }
.cv-text-brand, .text-brand { color: #064e3b; }
.cv-border-brand, .border-brand { border-color: #064e3b; }

/* Couleurs spécifiques adaptées au thème pour le CV */
/* Utilise les variables de style.css pour un mode sombre fonctionnel */
.cv-text-white { color: white; }
.cv-text-emerald-light { color: #a7f3d0; } /* Émeraude 200 */
.cv-text-gray-light { color: var(--light-text-color); } /* Gris 100 */
.cv-bg-emerald-faded { background-color: rgba(236, 253, 245, 0.7); } /* Émeraude 50 / 70% opacity */
.cv-text-gray-dark { color: var(--text-color); } /* Gris 800 */
.cv-text-emerald-dark { color: #047857; } /* Émeraude 700 */
.cv-bg-emerald-light-faded { background-color: #d1fae5; } /* Émeraude 100 */
.cv-text-gray-darkest { color: var(--text-color); } /* Gris 900 */
.cv-text-gray-medium { color: var(--light-text-color); } /* Gris 600 ou 500 */
.cv-text-emerald-accent { color: #6ee7b7; } /* Une nuance d'émeraude pour l'accentuation */
.cv-text-rose-darkest { color: #881337; } /* Rose 900 */
.cv-text-indigo-darkest { color: #312e81; } /* Indigo 900 */
.cv-text-cyan-darkest { color: #164e63; } /* Cyan 900 */

/* Classes de layout et d'espacement pour le CV */
.cv-flex { display: flex; }
.cv-flex-col { flex-direction: column; }
.cv-items-center { align-items: center; }
.cv-justify-center { justify-content: center; }
.cv-justify-between { justify-content: space-between; }
.cv-items-baseline { align-items: baseline; }
.cv-items-start { align-items: flex-start; }

.cv-p-5 { padding: 1.25rem; } /* ~20px */
.cv-px-8 { padding-left: 2rem; padding-right: 2rem; } /* ~32px */
.cv-py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } /* ~20px */
.cv-p-3 { padding: 0.75rem; } /* ~12px */
.cv-p-2 { padding: 0.5rem; } /* ~8px */
.cv-p-2-5 { padding: 0.625rem; } /* ~10px */

.cv-mb-3 { margin-bottom: 0.75rem; } /* ~12px */
.cv-mt-1 { margin-top: 0.25rem; } /* ~4px */
.cv-mb-2-5 { margin-bottom: 0.625rem; } /* ~10px */
.cv-mb-3-5 { margin-bottom: 0.875rem; } /* ~14px */
.cv-mb-4 { margin-bottom: 1rem; } /* ~16px */
.cv-mb-0-5 { margin-bottom: 0.125rem; } /* ~2px */
.cv-mb-1 { margin-bottom: 0.25rem; } /* ~4px */
.cv-mt-0-5 { margin-top: 0.125rem; } /* ~2px */
.cv-mb-auto { margin-bottom: auto; }
.cv-mt-auto { margin-top: auto; }
.cv-mb-2-5 { margin-bottom: 0.625rem; } /* ~10px */

.cv-space-y-1-5 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.375rem * calc(1 - 0)); margin-bottom: calc(0.375rem * 0); } /* space-y-1.5 ~6px */
.cv-space-y-2-5 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.625rem * calc(1 - 0)); margin-bottom: calc(0.625rem * 0); } /* space-y-2.5 ~10px */
.cv-space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.75rem * calc(1 - 0)); margin-bottom: calc(0.75rem * 0); } /* space-y-3 ~12px */
.cv-space-y-0-5 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.125rem * calc(1 - 0)); margin-bottom: calc(0.125rem * 0); } /* space-y-0.5 ~2px */
.cv-space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.5rem * calc(1 - 0)); margin-bottom: calc(0.5rem * 0); } /* space-y-2 ~8px */

.cv-gap-2-5 { gap: 0.625rem; } /* ~10px */
.cv-gap-2 { gap: 0.5rem; } /* ~8px */

/* Typographie */
.cv-text-sm { font-size: 0.6875rem; } /* equivalent de text-[11px] */
.cv-text-xs { font-size: 0.75rem; } /* equivalent de text-[12px] */
.cv-text-xxs { font-size: 0.59375rem; } /* equivalent de text-[9.5px] */
.cv-h1-right { font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* text-[32px] font-extrabold tracking-widest */
.cv-h2-right { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; } /* text-[16px] font-bold tracking-wide */
.cv-h4-experience, .cv-h4-formation { font-size: 0.84375rem; font-weight: 700; } /* text-[13.5px] font-bold */
.cv-font-bold { font-weight: 700; }
.cv-font-semibold { font-weight: 600; }
.cv-leading-tight { line-height: 1.25; }
.cv-leading-snug { line-height: 1.375; }
.cv-text-justify { text-align: justify; }

/* Composants spécifiques du CV */
.cv-aside {
    width: 34%;
    display: flex;
    flex-direction: column;
}
.cv-main-content {
    width: 66%;
    display: flex;
    flex-direction: column; /* Décommenté pour l'alignement */
}

/* Nouvelles classes utilitaires pour le CV */
.cv-mt-1-5 { margin-top: 0.375rem; } /* mt-1.5 ~6px */
.cv-gap-1-5 { gap: 0.375rem; } /* gap-1.5 ~6px */
.cv-border-l-3px { border-left-width: 3px; } /* border-l-[3px] */

.hexagon-wrapper {
    width: 130px;
    height: 140px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: white; /* Conserver blanc pour le contour */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.hexagon-inner {
    width: 124px;
    height: 134px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: var(--background-color); /* Utilise la variable de thème */
}
.hexagon-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-title-left {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 0.2rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.05em;
}

.section-title-right {
    font-size: 1.1rem;
    font-weight: 700;
    color: #064e3b; /* Vert Sapin */
    text-transform: uppercase;
    border-bottom: 2px solid #064e3b; /* Vert Sapin */
    padding-bottom: 0.25rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.02em;
}

/* Icônes de contact */
.cv-icon-sm { width: 1rem; height: 1rem; } /* w-4 h-4 */

/* QR Code */
.cv-qrcode-wrapper {
    background-color: white;
    padding: 3px;
    border-radius: 0.125rem; /* rounded */
    display: inline-block;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}
.cv-qrcode-img {
    width: 5.25rem; /* w-[84px] */
    height: 5.25rem; /* h-[84px] */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    border-radius: 0.125rem; /* rounded-sm */
}

/* Certifications images */
.cv-certification-img {
    width: 1.75rem; /* w-7 */
    height: 1.75rem; /* h-7 */
    object-fit: contain;
    background-color: white;
    border-radius: 0.25rem; /* rounded */
    padding: 0.125rem; /* p-0.5 */
}

/* Veille/Apprentissage images */
.cv-veille-img {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    border-radius: 0.25rem; /* rounded */
    background-color: white;
    padding: 0.125rem; /* p-0.5 */
}

/* Section d'introduction */
.cv-intro-box {
    border-left-width: 3px; /* border-l-[3px] */
    border-left-color: var(--border-brand); /* utilise cv-border-brand */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm (tailwind) */
}

/* Badges d'expérience */
.cv-badge-main {
    font-size: 0.625rem; /* text-[10px] */
    font-weight: 700;
    color: white;
    padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */
    border-radius: 0.25rem; /* rounded */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}
.cv-badge-secondary {
    font-size: 0.625rem; /* text-[10px] */
    font-weight: 700;
    padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */
    border-radius: 0.25rem; /* rounded */
}

/* Logos d'expérience */
.cv-exp-logo {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    object-fit: cover;
    object-position: top;
    border-radius: 0.125rem; /* rounded-sm */
}
.cv-exp-logo-sm {
    width: 0.875rem; /* w-3.5 */
    height: 0.875rem; /* h-3.5 */
    object-fit: contain;
}

/* Grille Homelab */
.cv-grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; /* gap-2 */
}

/* Cartes Homelab - Couleurs de fond avec dégradé simulé et bordures adaptées au thème */
.cv-homelab-card-emerald {
    background: linear-gradient(to bottom right, var(--cv-bg-emerald-gradient-start), var(--cv-bg-emerald-gradient-end));
    border: 1px solid var(--cv-border-emerald-light);
}
.cv-homelab-card-indigo {
    background: linear-gradient(to bottom right, var(--cv-bg-indigo-gradient-start), var(--cv-bg-indigo-gradient-end));
    border: 1px solid var(--cv-border-indigo-light);
}
.cv-homelab-card-rose {
    background: linear-gradient(to bottom right, var(--cv-bg-rose-gradient-start), var(--cv-bg-rose-gradient-end));
    border: 1px solid var(--cv-border-rose-light);
}
.cv-homelab-card-cyan {
    background: linear-gradient(to bottom right, var(--cv-bg-cyan-gradient-start), var(--cv-bg-cyan-gradient-end));
    border: 1px solid var(--cv-border-cyan-light);
}
.cv-homelab-card-h4 { font-size: 0.75rem; font-weight: 700; } /* text-[12px] font-bold */
.cv-homelab-card-p { font-size: 0.6875rem; } /* text-[11px] */

/* Couleurs des dégradés Homelab (utilisées par les classes ci-dessus) */
:root {
    --cv-bg-emerald-gradient-start: #ecfdf5;
    --cv-bg-emerald-gradient-end: #f0fdf4;
    --cv-border-emerald-light: #a7f3d0;

    --cv-bg-indigo-gradient-start: #eef2ff;
    --cv-bg-indigo-gradient-end: #f3e8ff;
    --cv-border-indigo-light: #c7d2fe;

    --cv-bg-rose-gradient-start: #fff1f2;
    --cv-bg-rose-gradient-end: #fdf2f8;
    --cv-border-rose-light: #fecdd3;

    --cv-bg-cyan-gradient-start: #ecfeff;
    --cv-bg-cyan-gradient-end: #eff6ff;
    --cv-border-cyan-light: #a7f3d0;
}

body.dark-mode {
    --cv-bg-emerald-gradient-start: #10b981; /* Darker emerald */
    --cv-bg-emerald-gradient-end: #059669; /* Darker teal */
    --cv-border-emerald-light: #065f46;

    --cv-bg-indigo-gradient-start: #4f46e5; /* Darker indigo */
    --cv-bg-indigo-gradient-end: #7c3aed; /* Darker purple */
    --cv-border-indigo-light: #4338ca;

    --cv-bg-rose-gradient-start: #be123c; /* Darker rose */
    --cv-bg-rose-gradient-end: #db2777; /* Darker pink */
    --cv-border-rose-light: #9f1239;

    --cv-bg-cyan-gradient-start: #06b6d4; /* Darker cyan */
    --cv-bg-cyan-gradient-end: #3b82f6; /* Darker blue */
    --cv-border-cyan-light: #0891b2;
}


/* Liens */
.cv-link-hover-underline:hover { text-decoration: underline; }

/* Media Queries spécifiques au CV */
@media (max-width: 992px) {
    .cv-container { flex-direction: column; }
    .cv-aside, .cv-main-content { width: 100%; }
    .cv-px-8 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .cv-py-5 { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (max-width: 768px) {
    .cv-container { box-shadow: none; }
    .cv-aside, .cv-main-content { padding: 1rem; }
    .cv-h1-right { font-size: 1.8rem; }
    .cv-h2-right { font-size: 0.9rem; }
    .cv-intro-box { padding: 0.5rem; }
    .cv-text-xs { font-size: 0.7rem; }
    .cv-text-xxs { font-size: 0.55rem; }
    .cv-h4-experience, .cv-h4-formation { font-size: 0.8rem; }
    .section-title-left, .section-title-right { font-size: 0.8rem; }
    .cv-qrcode-img { width: 4rem; height: 4rem; }
    .cv-exp-logo, .cv-exp-logo-sm { width: 0.8rem; height: 0.8rem; }
    .cv-grid-cols-2 { grid-template-columns: 1fr; }
}

@media print {
    body { background: white !important; padding: 0; margin: 0; }
    .cv-container { box-shadow: none; margin: 0; width: 210mm; height: 297mm; max-height: 297mm; overflow: hidden; }
    .no-print { display: none; }
    .print-bg-brand { background-color: #064e3b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-text-brand { color: #064e3b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-border-brand { border-color: #064e3b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-text-white { color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* For print, ensure colors for the right column are dark */
    .cv-main-content { color: #333333 !important; }
    .cv-main-content h1, .cv-main-content h2, .cv-main-content h3, .cv-main-content h4 { color: #333333 !important; }
    .cv-main-content p { color: #666666 !important; }
    .cv-intro-box { background-color: #e2e8f0 !important; border-left-color: #064e3b !important; }
    .cv-intro-box p { color: #333333 !important; }

    .cv-homelab-card-emerald, .cv-homelab-card-indigo, .cv-homelab-card-rose, .cv-homelab-card-cyan {
        background: #f0fdf4 !important; /* light background for print */
        border-color: #a7f3d0 !important; /* light border for print */
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .cv-homelab-card-emerald h4, .cv-homelab-card-indigo h4, .cv-homelab-card-rose h4, .cv-homelab-card-cyan h4 {
        color: #064e3b !important; /* brand color for print */
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .cv-homelab-card-emerald p, .cv-homelab-card-indigo p, .cv-homelab-card-rose p, .cv-homelab-card-cyan p {
        color: #333333 !important; /* dark text for print */
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}