/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background:#f5f7fb;
    color:#1e293b;
    line-height:1.6;
}

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

.container{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
}

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

.site-header{
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
    position:sticky;
    top:0;
    z-index:999;
}

.header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:78px;
}

.logo{
    width:160px;
    max-width:100%;
    object-fit:contain;
}

.secure-text{
    color:#2563eb;
    font-size:14px;
    font-weight:600;
}

/* =========================
   HERO
========================= */

.hero-section{
    padding:50px 0 40px;
}

.hero-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-content{
    background:#ffffff;
    border-radius:20px;
    padding:40px;
    width:100%;
    box-shadow:
        0 10px 35px rgba(0,0,0,.05);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#2563eb;
    border-radius:999px;
    padding:10px 18px;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.hero-content h1{
    font-size:42px;
    line-height:1.2;
    margin-bottom:18px;
    color:#0f172a;
}

.hero-description{
    font-size:18px;
    color:#64748b;
    max-width:700px;
}

.hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.feature-item{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:12px 18px;
    font-size:15px;
    font-weight:600;
}

/* =========================
   MAIN FORM
========================= */

.cv-builder-section{
    padding-bottom:80px;
}

.form-card{
    background:#ffffff;
    border-radius:20px;
    padding:35px;
    margin-bottom:28px;
    box-shadow:
        0 10px 30px rgba(15,23,42,.04);
}

.card-header{
    margin-bottom:28px;
}

.card-header h2{
    font-size:28px;
    margin-bottom:8px;
    color:#0f172a;
}

.card-header p{
    color:#64748b;
    font-size:15px;
}

/* =========================
   GRID
========================= */

.form-grid{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:20px;
}

.full-width{
    grid-column:span 2;
}

/* =========================
   FORM
========================= */

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:10px;
    font-size:15px;
    font-weight:700;
    color:#334155;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    border:1px solid #dbe2ea;
    border-radius:14px;
    padding:16px 18px;
    background:#fff;
    outline:none;
    font-size:15px;
    transition:.2s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:120px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:#2563eb;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
}

/* =========================
   BUTTONS
========================= */

.add-more-btn{
    margin-top:25px;
    border:none;
    background:#eff6ff;
    color:#2563eb;
    border-radius:14px;
    padding:15px 20px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.add-more-btn:hover{
    background:#dbeafe;
}

.submit-btn{
    width:100%;
    border:none;
    background:#2563eb;
    color:#ffffff;
    border-radius:16px;
    padding:20px;
    cursor:pointer;
    font-size:17px;
    font-weight:700;
    transition:.25s ease;
}

.submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 35px rgba(37,99,235,.25);
}

/* =========================
   HIDDEN SECTION
========================= */

.hidden-section{
    display:none;
    margin-top:25px;
}

/* =========================
   CHECKBOXES
========================= */

.checkbox-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.checkbox-row{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
}

.checkbox-card{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:16px;
    background:#ffffff;
    cursor:pointer;
}
/* =========================
   SKILLS GRID
========================= */

.skills-grid{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:15px;
}

.checkbox-card input{
    width:18px;
    height:18px;
    accent-color:#2563eb;
}

.checkbox-card:hover{
    border-color:#2563eb;
    background:#f8fbff;
    transition:.2s ease;
}

/* =========================
   EXPERIENCE / FORMATION
========================= */

.experience-item,
.formation-item,
.langue-item{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:22px;
    margin-bottom:20px;
}

/* =========================
   FILE INPUT
========================= */

input[type="file"]{
    border:2px dashed #dbe2ea;
    background:#f8fafc;
    padding:20px;
    border-radius:16px;
    cursor:pointer;
}

input[type="file"]:hover{
    border-color:#2563eb;
    background:#eff6ff;
}

/* =========================
   FINAL CARD
========================= */

.final-card{
    border:2px solid #dbeafe;
}

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

.site-footer{
    background:#ffffff;
    border-top:1px solid #e5e7eb;
    padding:40px 0;
}

.footer-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    text-align:center;
}

.footer-logo img{
    width:150px;
    object-fit:contain;
}

.footer-links{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
}

.footer-links a{
    text-decoration:none;
    color:#475569;
    font-size:15px;
    transition:.2s ease;
}

.footer-links a:hover{
    color:#2563eb;
}

.footer-copy{
    color:#94a3b8;
    font-size:14px;
}

/* =========================
   FORM ANIMATION
========================= */

.form-card{
    transition:.2s ease;
}

.form-card:hover{
    transform:translateY(-2px);
}

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

@media(max-width:991px){

    .hero-content h1{
        font-size:34px;
    }

    .form-card{
        padding:28px;
    }
}

@media(max-width:768px){

    .hero-section{
        padding:30px 0;
    }

    .hero-content{
        padding:28px;
        border-radius:18px;
    }

    .hero-content h1{
        font-size:30px;
    }

    .hero-description{
        font-size:16px;
    }

    .hero-features{
        flex-direction:column;
    }

    .feature-item{
        width:100%;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .full-width{
        grid-column:span 1;
    }

    .skills-grid{
        grid-template-columns:1fr;
    }

    .card-header h2{
        font-size:24px;
    }

    .form-card{
        padding:22px;
        border-radius:18px;
    }

    .submit-btn{
        font-size:16px;
        padding:18px;
    }

    .footer-links{
        flex-direction:column;
        gap:14px;
    }

    .header-wrapper{
        min-height:72px;
    }

    .logo{
        width:135px;
    }
}

@media(max-width:480px){

    .container{
        padding:0 16px;
    }

    .hero-content h1{
        font-size:26px;
    }

    .hero-badge{
        font-size:13px;
        padding:9px 15px;
    }

    .card-header h2{
        font-size:22px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select{
        font-size:14px;
        padding:15px;
    }

    .checkbox-row{
        align-items:flex-start;
    }

    .submit-btn{
        border-radius:14px;
    }
}

javascript
/* =========================
   OPTIONAL PERSONAL SECTION
========================= */

const showOptionalPersonalBtn =
document.getElementById(
    "showOptionalPersonalBtn"
);

const optionalPersonalSection =
document.getElementById(
    "optionalPersonalSection"
);

if(showOptionalPersonalBtn){

    showOptionalPersonalBtn
    .addEventListener(
        "click",
        function(){

        if(
            optionalPersonalSection
            .style.display === "block"
        ){

            optionalPersonalSection
            .style.display = "none";

            showOptionalPersonalBtn
            .innerHTML =
            "+ Ajouter plus d’informations";

        }else{

            optionalPersonalSection
            .style.display = "block";

            showOptionalPersonalBtn
            .innerHTML =
            "− Réduire les informations";
        }

    });

}

/* =========================
   ADD FORMATION
========================= */

const addFormationBtn =
document.getElementById(
    "addFormationBtn"
);

const formationsContainer =
document.getElementById(
    "formationsContainer"
);

if(addFormationBtn){

    addFormationBtn
    .addEventListener(
        "click",
        function(){

        const formationHTML = `

        <div class="formation-item">

            <div class="form-grid">

                <div class="form-group">
                    <label>Diplôme</label>

                    <input
                        type="text"
                        name="formation_diplome[]"
                        placeholder="Ex : BTS Logistique">
                </div>

                <div class="form-group">
                    <label>Établissement</label>

                    <input
                        type="text"
                        name="formation_ecole[]"
                        placeholder="Nom de l'école">
                </div>

                <div class="form-group">
                    <label>Ville</label>

                    <input
                        type="text"
                        name="formation_ville[]"
                        placeholder="Ex : Marseille">
                </div>

                <div class="form-group">
                    <label>Date de début</label>

                    <input
                        type="month"
                        name="formation_debut[]">
                </div>

                <div class="form-group">
                    <label>Date de fin</label>

                    <input
                        type="month"
                        name="formation_fin[]">
                </div>

                <div class="form-group full-width">

                    <label>Description</label>

                    <textarea
                        rows="4"
                        name="formation_description[]"
                        placeholder="Informations complémentaires"></textarea>

                </div>

            </div>

        </div>
        `;

        formationsContainer
        .insertAdjacentHTML(
            "beforeend",
            formationHTML
        );

    });

}

/* =========================
   ADD EXPERIENCE
========================= */

const addExperienceBtn =
document.getElementById(
    "addExperienceBtn"
);

const experiencesContainer =
document.getElementById(
    "experiencesContainer"
);

if(addExperienceBtn){

    addExperienceBtn
    .addEventListener(
        "click",
        function(){

        const experienceHTML = `

        <div class="experience-item">

            <div class="form-grid">

                <div class="form-group">
                    <label>Poste occupé</label>

                    <input
                        type="text"
                        name="experience_poste[]"
                        placeholder="Ex : Chauffeur livreur">
                </div>

                <div class="form-group">
                    <label>Entreprise</label>

                    <input
                        type="text"
                        name="experience_entreprise[]"
                        placeholder="Nom entreprise">
                </div>

                <div class="form-group">
                    <label>Ville</label>

                    <input
                        type="text"
                        name="experience_ville[]"
                        placeholder="Ex : Paris">
                </div>

                <div class="form-group">
                    <label>Date début</label>

                    <input
                        type="month"
                        name="experience_debut[]">
                </div>

                <div class="form-group">
                    <label>Date fin</label>

                    <input
                        type="month"
                        name="experience_fin[]">
                </div>

                <div class="form-group full-width">

                    <label>Missions principales</label>

                    <textarea
                        rows="5"
                        name="experience_missions[]"
                        placeholder="Décrivez vos tâches principales"></textarea>

                </div>

            </div>

        </div>
        `;

        experiencesContainer
        .insertAdjacentHTML(
            "beforeend",
            experienceHTML
        );

    });

}

/* =========================
   ADD LANGUAGE
========================= */

const addLangueBtn =
document.getElementById(
    "addLangueBtn"
);

const languesContainer =
document.getElementById(
    "languesContainer"
);

if(addLangueBtn){

    addLangueBtn
    .addEventListener(
        "click",
        function(){

        const langueHTML = `

        <div class="langue-item">

            <div class="form-grid">

                <div class="form-group">
                    <label>Langue</label>

                    <input
                        type="text"
                        name="langue_nom[]"
                        placeholder="Ex : Français">
                </div>

                <div class="form-group">
                    <label>Niveau</label>

                    <select
                        name="langue_niveau[]">

                        <option value="">
                            Sélectionner
                        </option>

                        <option value="Débutant">
                            Débutant
                        </option>

                        <option value="Intermédiaire">
                            Intermédiaire
                        </option>

                        <option value="Avancé">
                            Avancé
                        </option>

                        <option value="Bilingue">
                            Bilingue
                        </option>

                    </select>

                </div>

            </div>

        </div>
        `;

        languesContainer
        .insertAdjacentHTML(
            "beforeend",
            langueHTML
        );

    });

}
/* =========================
   HIDDEN OPTIONS
========================= */

.hidden-options{
    display:none;
    width:100%;
    margin-top:24px;
}

.hidden-options.active{
    display:block;
}

/* =========================
   DYNAMIC ITEMS
========================= */

.formation-item,
.experience-item,
.langue-item{
    display:block;
    width:100%;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:22px;
    margin-top:20px;
    margin-bottom:20px;
}
.footer-logo{
    width:160px;
    max-width:100%;
    object-fit:contain;
    margin-bottom:20px;
}

/* OPTIONAL TAG */

.optional-tag{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    border-radius:999px;

    margin-left:8px;

    font-size:12px;

    font-weight:700;

    background:#eff6ff;

    color:#2563eb;
}

/* FOOTER LOGO FIX */

.footer-logo{

    width:160px;

    max-width:100%;

    object-fit:contain;

    display:block;

    margin:0 auto 18px;
}

/* SEO SECTION */

.seo-content-section{

    margin-top:40px;
}

.seo-card h2{

    margin-bottom:18px;
}

.seo-card p{

    margin-bottom:20px;

    line-height:1.9;
}

/* FAVICON / LOGO */

.logo,
.footer-logo{

    image-rendering:auto;
}

/* HEADER LOGO */

.logo{

    width:150px;

    height:auto;

    object-fit:contain;
}

/* FOOTER FIX */

.site-footer{

    text-align:center;
}

.footer-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}

/* MOBILE */

@media (max-width:768px){

    .footer-logo{

        width:130px;
    }

    .logo{

        width:130px;
    }

}