/*
 * Feuille de style de la page /cv (Site/Public/cv.php).
 *
 * Volontairement séparée de styles.css : le CV a sa propre mise en page et,
 * surtout, son propre bloc @media print. Chargée uniquement sur /cv, via le
 * paramètre $extra_head de site_layout_start().
 *
 * Reprend les variables de couleur du site quand elles existent, avec des
 * valeurs de repli pour rester autonome.
 */

.cv-page {
    max-width: 960px;
    margin: 0 auto;
    /* La navbar du site est en position: fixed : on dégage sa hauteur en haut. */
    padding: 6.5rem 1rem 4rem;
}

/* styles.css applique une règle globale `section { padding: 4rem 2rem; margin: 2rem 0 }`
   à tous les <section> du site. Les blocs du CV en sont, et héritaient donc de 64 px de
   padding + 32 px de marge chacun : d'où un grand vide sous l'en-tête et un CV qui
   débordait sur cinq pages. On repart de zéro ici, le CV a sa propre métrique.
   Les règles .cv-* ci-dessous sont préfixées .cv-page pour repasser devant ce reset. */
.cv-page section,
.cv-page article,
.cv-page header,
.cv-page footer {
    padding: 0;
    margin: 0;
}

/* ---- Bouton PDF flottant (écran uniquement) ---- */

.cv-bouton-pdf {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cv-bouton-pdf:hover,
.cv-bouton-pdf:focus-visible {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
}

.cv-bouton-pdf i {
    font-size: 1.05em;
}

@media (max-width: 600px) {
    .cv-bouton-pdf {
        right: 1rem;
        bottom: 1rem;
    }
}

/* ---- Feuille du CV ---- */

.cv-page .cv-feuille {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    padding: 2.5rem;
    color: #1e293b;
    line-height: 1.55;
}

/* ---- En-tête ---- */

.cv-page .cv-entete {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #2563eb;
}

.cv-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #2563eb;
    flex-shrink: 0;
}

.cv-entete-texte {
    flex: 1;
    min-width: 0;
}

.cv-entete h1 {
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 0.25rem;
    color: #0f172a;
}

.cv-titre {
    margin: 0 0 0.75rem;
    font-weight: 600;
    color: #2563eb;
}

.cv-accroche {
    margin: 0 0 0.9rem;
    color: #475569;
}

.cv-coordonnees {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.92rem;
}

.cv-coordonnees li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cv-coordonnees i {
    color: #2563eb;
    width: 1rem;
    text-align: center;
}

.cv-coordonnees a {
    color: inherit;
    text-decoration: none;
}

.cv-coordonnees a:hover {
    text-decoration: underline;
}

.cv-anciennete {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
}

/* ---- Corps en deux colonnes ---- */

.cv-corps {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    margin-top: 1.75rem;
}

.cv-page .cv-section {
    margin-bottom: 1.75rem;
}

.cv-page .cv-section:last-child {
    margin-bottom: 0;
}

.cv-section h2 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
    margin: 0 0 0.9rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
}

/* ---- Expériences et formations ---- */

.cv-page .cv-experience,
.cv-page .cv-formation {
    margin-bottom: 1.25rem;
}

.cv-page .cv-experience:last-child,
.cv-page .cv-formation:last-child {
    margin-bottom: 0;
}

.cv-experience-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Le titre prend la place disponible, l'année reste calée à droite. */
.cv-experience-entete h3 {
    font-size: 1.02rem;
    margin: 0;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
}

.cv-experience-date {
    font-size: 0.84rem;
    color: #64748b;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
}

.cv-experience-entreprise {
    margin: 0.1rem 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.cv-experience-description {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: #334155;
}

.cv-tags {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cv-tag {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    border-radius: 0.375rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 500;
}

/* ---- Colonne latérale ---- */

.cv-liste-puces,
.cv-liste-simple,
.cv-liste-expertises,
.cv-liste-hobbies {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.cv-liste-puces li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.cv-liste-puces i {
    width: 1.1rem;
    text-align: center;
    color: #2563eb;
}

.cv-liste-simple li {
    padding: 0.15rem 0 0.15rem 0.9rem;
    position: relative;
}

.cv-liste-simple li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #2563eb;
}

.cv-liste-expertises li,
.cv-liste-hobbies li {
    margin-bottom: 0.7rem;
}

.cv-liste-expertises strong,
.cv-liste-hobbies strong {
    display: block;
    color: #0f172a;
    font-size: 0.92rem;
    margin-bottom: 0.1rem;
}

.cv-liste-expertises span,
.cv-liste-hobbies span {
    color: #475569;
    font-size: 0.86rem;
}

.cv-hobby-icone {
    font-size: 0.95rem;
}

/* Pied de page repris uniquement sur la version papier. */
.print-only {
    display: none;
}

@media screen and (max-width: 860px) {
    .cv-corps {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .cv-page .cv-feuille {
        padding: 1.5rem;
    }

    .cv-page .cv-entete {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cv-coordonnees {
        justify-content: center;
    }

    .cv-experience-entete {
        flex-direction: column;
        gap: 0.1rem;
    }
}

/* =========================================================
   Impression (CTRL+P / export PDF du navigateur)
   ========================================================= */

@media print {

    @page {
        size: A4 portrait;
        margin: 12mm 12mm 14mm;
    }

    /* Chrome/Firefox suppriment les aplats de couleur par défaut :
       on les conserve pour les tags et les filets du CV. */
    html,
    body {
        background: #fff !important;
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Chrome ignore la taille de police en pt si elle vient d'un rem hérité :
       on repart d'une base papier lisible. */
    body {
        font-size: 10.5pt;
        line-height: 1.4;
    }

    /* Chrome de navigation et éléments d'écran : masqués sur le papier. */
    .navbar,
    .footer,
    .hamburger,
    .no-print,
    .no-print * {
        display: none !important;
    }

    .print-only {
        display: block;
    }

    .site-subpage-main,
    .cv-page {
        max-width: none;
        margin: 0;
        padding: 0;
        /* min-height: calc(100vh - 120px) hérité de styles.css : inutile sur
           le papier, et source de hauteur vide en fin de document. */
        min-height: 0;
    }

    .cv-page .cv-feuille {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    /* Les deux colonnes sont conservées sur le papier, mais PAS en grid :
       les deux colonnes forment une seule ligne de grille, plus haute qu'une
       page, et un navigateur ne sait pas couper une ligne de grille en deux.
       Il pousse alors tout le bloc sur la page suivante — d'où une première
       page ne contenant que l'en-tête. Les flottants, eux, se fragmentent
       normalement d'une page à l'autre. */
    .cv-corps {
        display: block;
        margin-top: 6mm;
    }

    .cv-corps::after {
        content: "";
        display: block;
        clear: both;
    }

    .cv-colonne-principale {
        float: left;
        width: 63%;
    }

    .cv-colonne-laterale {
        float: right;
        width: 32%;
    }

    /* Les colonnes, elles, doivent pouvoir se couper : seuls les blocs
       individuels (expériences, formations…) restent insécables. */
    .cv-colonne-principale,
    .cv-colonne-laterale {
        break-inside: auto;
        page-break-inside: auto;
    }

    /* En-tête compact : il ne doit occuper qu'une fraction de la 1re page. */
    .cv-page .cv-entete {
        gap: 6mm;
        padding-bottom: 4mm;
    }

    .cv-photo {
        width: 26mm;
        height: 26mm;
        border-width: 2px;
    }

    .cv-entete h1 {
        font-size: 18pt;
        margin-bottom: 0.5mm;
    }

    .cv-titre,
    .cv-accroche,
    .cv-coordonnees {
        margin-bottom: 2mm;
    }

    .cv-coordonnees {
        font-size: 9pt;
        gap: 1mm 5mm;
    }

    .cv-anciennete {
        font-size: 9.5pt;
    }

    .cv-page .cv-experience,
    .cv-page .cv-formation {
        margin-bottom: 4mm;
    }

    .cv-page .cv-section {
        margin-bottom: 6mm;
    }

    .cv-section h2 {
        font-size: 11pt;
    }

    .cv-experience-entete h3 {
        font-size: 10.5pt;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    /* Une expérience, une formation ou un bloc de la colonne latérale
       ne doit jamais être coupé au milieu par un saut de page. */
    .cv-experience,
    .cv-formation,
    .cv-liste-expertises li,
    .cv-liste-hobbies li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cv-section {
        break-inside: auto;
    }

    .cv-section h2 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .cv-page .cv-entete {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* styles.css colore tous les <footer> (fond bleu, texte blanc) : le pied
       du CV, lui, est une simple ligne de rappel des coordonnées. */
    .cv-page .cv-pied {
        background: none;
        margin-top: 6mm;
        padding-top: 3mm;
        border-top: 1px solid #cbd5e1;
        font-size: 8.5pt;
        color: #475569;
        text-align: center;
    }
}