<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon-transp.ico" />
<link rel="stylesheet" href="css-simulateur-dpae.css">
<title>Urssaf – Fiche ressource DPAE</title>
<meta name="author" content="CERPEG – Fabienne MAURI">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/* ============================================================
   COMPOSANTS CONTENU
============================================================ */
.fiche-intro {
    background: linear-gradient(135deg, var(--bleu-clair) 0%, #dce8f8 100%);
    border: 1px solid #c5d5ee;
    border-left: 4px solid var(--bleu-urssaf);
    border-radius: var(--rayon);
    padding: 18px 22px;
    margin-bottom: 20px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--texte);
}
.fiche-intro strong { color: var(--bleu-urssaf); }

.num-section {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: var(--bleu-urssaf); color: var(--blanc);
    border-radius: 50%; font-size: 13px; font-weight: 700;
    flex-shrink: 0; margin-right: 2px;
}

.fiche-liste { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; }
.fiche-liste li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 15px; line-height: 1.55;
    padding: 9px 14px;
    background: var(--gris-fond);
    border-radius: var(--rayon); border: 1px solid var(--gris-bordure);
}
.fiche-liste li .puce {
    width: 22px; height: 22px;
    background: var(--teal-clair); color: var(--teal);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0; margin-top: 1px;
}

.delais-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.delai-bloc { border-radius: var(--rayon); padding: 14px 16px; border: 1px solid; }
.delai-bloc.tot  { background: var(--vert-clair);   border-color: #a5d6a7; }
.delai-bloc.tard { background: var(--orange-clair); border-color: #ffcc80; }
.delai-bloc .delai-titre {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.delai-bloc.tot  .delai-titre { color: var(--vert); }
.delai-bloc.tard .delai-titre { color: var(--orange); }
.delai-bloc p  { font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.delai-bloc ul { margin: 6px 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--texte); }

.a-retenir {
    margin-top: 14px;
    background: var(--teal-clair); border: 1px solid var(--teal);
    border-radius: var(--rayon); padding: 12px 16px;
    font-size: 14.5px; line-height: 1.55; color: #00514A;
}
.a-retenir strong { color: #00695C; }

.procedure-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.proc-step {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--gris-fond); border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon); padding: 12px 14px;
}
.proc-num {
    width: 30px; height: 30px;
    background: var(--bleu-urssaf); color: var(--blanc);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.proc-content strong { display: block; font-size: 15px; color: var(--texte); margin-bottom: 2px; }
.proc-content span   { font-size: 14px; color: var(--gris-texte); line-height: 1.5; }

.sanction-bloc {
    background: var(--rouge-clair); border: 1px solid #ef9a9a;
    border-left: 4px solid var(--rouge); border-radius: var(--rayon);
    padding: 14px 16px; margin-top: 10px;
    font-size: 15px; line-height: 1.6; color: #4A0000;
}
.sanction-bloc strong { color: var(--rouge); }

.source-ref {
    margin-top: 14px; padding: 8px 12px;
    background: #F0F4FF; border: 1px solid #c5d0ef;
    border-radius: var(--rayon); font-size: 13px; color: var(--gris-texte);
    display: flex; align-items: flex-start; gap: 7px;
}
.source-ref i { color: var(--bleu-urssaf); font-size: 12px; margin-top: 1px; flex-shrink: 0; }

.effets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.effet-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    background: var(--vert-clair); border: 1px solid #a5d6a7;
    border-radius: var(--rayon); font-size: 14.5px; line-height: 1.5; color: var(--texte);
}
.effet-item i { color: var(--vert); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.options-doc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; margin-top: 12px; align-items: center; }
.option-doc {
    background: var(--bleu-clair); border: 1px solid #c5d5ee;
    border-radius: var(--rayon); padding: 14px 16px;
    font-size: 14.5px; line-height: 1.55; color: var(--texte);
}
.option-doc .option-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--bleu-urssaf);
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.option-ou span {
    background: var(--gris-texte); color: var(--blanc);
    border-radius: 50%; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}

.btn-retour {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bleu-urssaf); color: var(--blanc);
    border: none; border-radius: var(--rayon);
    padding: 10px 20px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background 0.2s; margin-bottom: 20px;
}
.btn-retour:hover { background: var(--bleu-fonce); color: var(--blanc); }

.btn-pdf {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--rouge); color: var(--blanc);
    border: none; border-radius: var(--rayon);
    padding: 10px 20px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background 0.2s; margin-bottom: 20px;
}
.btn-pdf:hover { background: #9B1B1B; color: var(--blanc); }

/* ============================================================
   ONGLETS
============================================================ */
.onglets-nav {
    display: flex;
    flex-wrap: wrap;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-bottom: none;
    border-radius: var(--rayon) var(--rayon) 0 0;
    overflow: hidden;
}

.onglet-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 17px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gris-texte);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-right: 1px solid var(--gris-bordure);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-bottom-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.onglet-btn:last-child { border-right: none; }
.onglet-btn i { font-size: 13px; opacity: 0.75; transition: opacity 0.15s; }
.onglet-btn:hover { background: var(--bleu-clair); color: var(--bleu-urssaf); }
.onglet-btn:hover i { opacity: 1; }
.onglet-btn.actif {
    color: var(--bleu-urssaf);
    background: var(--bleu-clair);
    border-bottom-color: var(--bleu-urssaf);
    font-weight: 700;
}
.onglet-btn.actif i { opacity: 1; }

.onglet-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    background: var(--gris-bordure); color: var(--gris-texte);
    border-radius: 50%; font-size: 10px; font-weight: 700;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.onglet-btn.actif .onglet-num,
.onglet-btn:hover .onglet-num { background: var(--bleu-urssaf); color: var(--blanc); }

/* Corps */
.onglets-body {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-top: none;
    border-radius: 0 0 var(--rayon) var(--rayon);
    box-shadow: var(--ombre-card);
}

.onglet-panel { display: none; padding: 28px 28px 24px; animation: fadeIn 0.18s ease; }
.onglet-panel.actif { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel-titre {
    font-size: 17px; font-weight: 700; color: var(--bleu-urssaf);
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 2px solid var(--bleu-clair);
}
.panel-titre i { font-size: 18px; opacity: 0.85; }

/* Grille vue d'ensemble */
.resume-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.resume-carte {
    border-radius: var(--rayon); border: 1px solid var(--gris-bordure);
    padding: 14px 16px; cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s, background 0.15s;
    background: var(--gris-fond);
    display: flex; flex-direction: column; gap: 6px;
}
.resume-carte:hover {
    box-shadow: var(--ombre-card); transform: translateY(-2px);
    border-color: var(--bleu-urssaf); background: var(--bleu-clair);
}
.rc-header { display: flex; align-items: center; gap: 8px; }
.rc-num {
    width: 24px; height: 24px; background: var(--bleu-urssaf); color: var(--blanc);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.rc-icone { font-size: 15px; color: var(--bleu-urssaf); }
.rc-titre { font-size: 13.5px; font-weight: 700; color: var(--texte); line-height: 1.3; }
.rc-desc { font-size: 12.5px; color: var(--gris-texte); line-height: 1.4; padding-left: 32px; }
.rc-fleche {
    font-size: 10px; color: var(--gris-texte); align-self: flex-end; margin-top: 4px;
    transition: color 0.15s, transform 0.15s;
}
.resume-carte:hover .rc-fleche { color: var(--bleu-urssaf); transform: translateX(3px); }

/* Navigation bas panneau */
.nav-panel {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gris-bordure);
}
.nav-panel-btn {
    display: flex; align-items: center; gap: 7px;
    background: none; border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon); padding: 9px 16px;
    font-size: 13.5px; color: var(--gris-texte);
    cursor: pointer; transition: all 0.15s; font-weight: 600;
}
.nav-panel-btn:hover { background: var(--bleu-clair); border-color: var(--bleu-urssaf); color: var(--bleu-urssaf); }
.nav-panel-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Responsive */
@media (max-width: 720px) {
    .onglet-btn { padding: 11px 11px; font-size: 11.5px; gap: 4px; }
    .onglet-btn .onglet-label { display: none; }
    .resume-grid { grid-template-columns: 1fr 1fr; }
    .delais-grid, .effets-grid { grid-template-columns: 1fr; }
    .options-doc { grid-template-columns: 1fr; }
    .option-ou { display: none; }
    .onglet-panel { padding: 18px 16px; }
}
@media (max-width: 480px) {
    .resume-grid { grid-template-columns: 1fr; }
}

/* Impression : affiche tous les panneaux */
@media print {
    .btn-retour, .header-top, .header-nav, .main-footer,
    .menu-overlay, .menu-lateral, .onglets-nav, .nav-panel { display: none !important; }
    .onglet-panel { display: block !important; padding: 16px 0 !important; }
    .onglet-panel + .onglet-panel { border-top: 1px dashed #ccc; padding-top: 16px; margin-top: 8px; }
    .onglets-body { border: none !important; box-shadow: none !important; }
    .main-wrapper { padding: 0 !important; max-width: 100% !important; }
}
</style>
</head>
<body>

<!-- OVERLAY + MENU LATÉRAL -->
<div class="menu-overlay" id="menuOverlay" onclick="fermerMenu()"></div>
<nav class="menu-lateral" id="menuLateral" aria-label="Menu principal">
    <div class="menu-lateral-header">
        <div class="menu-lateral-titre">
            <svg viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
                <circle cx="17" cy="16" r="9" fill="#4DB6AC" opacity="0.9"/>
                <circle cx="26" cy="22" r="8" fill="white" opacity="0.7"/>
                <circle cx="17" cy="27" r="7" fill="#7986CB" opacity="0.75"/>
            </svg>
            <div><span>Urssaf</span><small>urssaf.fr</small></div>
        </div>
        <button class="btn-fermer-menu" onclick="fermerMenu()" aria-label="Fermer le menu">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>
    <div class="menu-lateral-corps">
        <div class="menu-section">
            <div class="menu-section-titre">Déclarer</div>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-file-signature"></i></div><div class="mi-texte"><strong>DPAE</strong><small>Déclaration Préalable à l'Embauche</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-user-minus"></i></div><div class="mi-texte"><strong>Arrêt de travail</strong><small>Déclaration et indemnisation</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-baby"></i></div><div class="mi-texte"><strong>Congé maternité / paternité</strong><small>Calcul des indemnités journalières</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-file-lines"></i></div><div class="mi-texte"><strong>DSN</strong><small>Déclaration Sociale Nominative</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-money-bill-transfer"></i></div><div class="mi-texte"><strong>Travailleurs indépendants</strong><small>Déclaration de revenus</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-house-chimney-user"></i></div><div class="mi-texte"><strong>CESU / PAJEMPLOI</strong><small>Emploi à domicile</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
        </div>
        <div class="menu-section">
            <div class="menu-section-titre">Gérer</div>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-building-user"></i></div><div class="mi-texte"><strong>Mon espace employeur</strong><small>Tableau de bord entreprise</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-users"></i></div><div class="mi-texte"><strong>Gestion des salariés</strong><small>Contrats, embauches, départs</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-credit-card"></i></div><div class="mi-texte"><strong>Paiement des cotisations</strong><small>Échéancier et règlement en ligne</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-file-invoice"></i></div><div class="mi-texte"><strong>Historique des déclarations</strong><small>Archives et justificatifs</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
        </div>
        <div class="menu-section">
            <div class="menu-section-titre">Informations</div>
            <button class="menu-item actif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-circle-question"></i></div><div class="mi-texte"><strong>FAQ et aide en ligne</strong><small>Réponses aux questions fréquentes</small></div><span class="mi-badge">En cours</span></button>
            <button class="menu-item inactif" onclick="fermerMenu()"><div class="mi-icone"><i class="fa-solid fa-scale-balanced"></i></div><div class="mi-texte"><strong>Textes réglementaires</strong><small>Code du travail, Code SS</small></div><i class="fa-solid fa-chevron-right mi-arrow"></i></button>
            <a class="menu-item lien" href="https://open.urssaf.fr/explore/dataset/liste-des-sites-et-des-activites/table/?dataChart=eyJxdWVyaWVzIjpbeyJjb25maWciOnsiZGF0YXNldCI6Imxpc3RlLWRlcy1zaXRlcy1ldC1kZXMtYWN0aXZpdGVzIiwib3B0aW9ucyI6e319LCJjaGFydHMiOlt7ImFsaWduTW9udGgiOnRydWUsInR5cGUiOiJjb2x1bW4iLCJmdW5jIjoiQVZHIiwieUF4aXMiOiJjb2RlX3NpdGVfdjIiLCJzY2llbnRpZmljRGlzcGxheSI6dHJ1ZSwiY29sb3IiOiIjRkZDQzAwIn1dLCJ4QXhpcyI6ImxpYmVsbGVfb3JnYW5pc21lIiwibWF4cG9pbnRzIjo1MCwic29ydCI6IiJ9XSwidGltZXNjYWxlIjoiIiwiZGlzcGxheUxlZ2VuZCI6dHJ1ZSwiYWxpZ25Nb250aCI6dHJ1ZX0%3D" target="_blank" rel="noopener noreferrer" onclick="fermerMenu()">
                <div class="mi-icone"><i class="fa-solid fa-list-ul"></i></div>
                <div class="mi-texte"><strong>Liste des Urssaf</strong><small>Sites et activités — open.urssaf.fr</small></div>
                <i class="fa-solid fa-arrow-up-right-from-square mi-arrow"></i>
            </a>
        </div>
    </div>
    <div class="menu-lateral-pied">
        <strong style="color:var(--texte);">Urssaf</strong> — Au service de notre protection sociale<br>
        <a href="#">urssaf.fr</a> &nbsp;·&nbsp; <a href="#">Accessibilité</a> &nbsp;·&nbsp; <a href="#">Données personnelles</a>
    </div>
</nav>

<!-- HEADER -->
<header>
    <div class="header-top">
        <span class="header-top-text">Créer votre espace en ligne</span>
        <div class="header-top-sep"></div>
        <button class="btn-connecter">Se connecter <i class="fa-solid fa-lock"></i></button>
    </div>
    <div class="header-nav">
        <button class="btn-menu" onclick="ouvrirMenu()" aria-label="Ouvrir le menu">
            <span class="bar"></span><span class="bar"></span><span class="bar"></span>
            Menu
        </button>
        <div class="sep-nav"></div>
        <div class="logo-urssaf">
            <div class="logo-circle">
                <svg viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="17" cy="16" r="9" fill="#4DB6AC" opacity="0.9"/>
                    <circle cx="26" cy="22" r="8" fill="#2D4891" opacity="0.7"/>
                    <circle cx="17" cy="27" r="7" fill="#7986CB" opacity="0.75"/>
                </svg>
            </div>
            <div class="logo-texte">
                <span class="logo-nom">urssaf</span>
                <span class="logo-tagline">Au service de notre protection sociale</span>
            </div>
        </div>
        <div class="simulateur-badge">
            <i class="fa-solid fa-book-open"></i> Base documentaire
        </div>
    </div>
</header>

<!-- CONTENU -->
<div class="main-wrapper">

    <div class="breadcrumb">
        <a href="simulateur-dpae.html"><i class="fa-solid fa-house"></i> Accueil</a>
        <i class="fa-solid fa-chevron-right" style="font-size:10px;"></i>
        <a href="#">Informations</a>
        <i class="fa-solid fa-chevron-right" style="font-size:10px;"></i>
        <span>Fiche ressource DPAE</span>
    </div>

    <a href="simulateur-dpae.html" class="btn-retour no-print">
        <i class="fa-solid fa-arrow-left"></i> Retour au simulateur DPAE
    </a>
    <a href="DPAE_mises-en-situation-BASE-DOCUMENTAIRE.pdf" target="_blank" rel="noopener noreferrer" class="btn-pdf no-print">
        <i class="fa-solid fa-file-pdf"></i> Version PDF
    </a>

    <!-- En-tête carte -->
    <div class="card-header" style="border-radius:var(--rayon) var(--rayon) 0 0; margin-bottom:0;">
        <span class="card-icon"><i class="fa-solid fa-file-circle-info"></i></span>
        <div>
            <h1 style="font-size:19px;font-weight:700;margin:0;">Fiche ressource — Déclaration Préalable à l'Embauche (DPAE)</h1>
            <p style="font-size:14px;opacity:.85;margin-top:2px;">Base documentaire pédagogique CERPEG — 7 points essentiels</p>
        </div>
    </div>

    <!-- ======= BARRE D'ONGLETS ======= -->
    <div class="onglets-nav" role="tablist">
        <button class="onglet-btn actif" role="tab" aria-selected="true"  data-onglet="0" onclick="allerOnglet(0)">
            <i class="fa-solid fa-table-cells-large"></i>
            <span class="onglet-label">Vue d'ensemble</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="1" onclick="allerOnglet(1)">
            <span class="onglet-num">1</span>
            <i class="fa-solid fa-circle-info"></i>
            <span class="onglet-label">Définition</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="2" onclick="allerOnglet(2)">
            <span class="onglet-num">2</span>
            <i class="fa-solid fa-list-check"></i>
            <span class="onglet-label">Formalités</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="3" onclick="allerOnglet(3)">
            <span class="onglet-num">3</span>
            <i class="fa-solid fa-clock"></i>
            <span class="onglet-label">Délais</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="4" onclick="allerOnglet(4)">
            <span class="onglet-num">4</span>
            <i class="fa-solid fa-laptop"></i>
            <span class="onglet-label">Procédure</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="5" onclick="allerOnglet(5)">
            <span class="onglet-num">5</span>
            <i class="fa-solid fa-user-shield"></i>
            <span class="onglet-label">Effets salarié</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="6" onclick="allerOnglet(6)">
            <span class="onglet-num">6</span>
            <i class="fa-solid fa-file-contract"></i>
            <span class="onglet-label">Document</span>
        </button>
        <button class="onglet-btn" role="tab" aria-selected="false" data-onglet="7" onclick="allerOnglet(7)">
            <span class="onglet-num">7</span>
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span class="onglet-label">Sanctions</span>
        </button>
    </div>

    <!-- ======= CORPS DES ONGLETS ======= -->
    <div class="onglets-body">

        <!-- PANEL 0 : VUE D'ENSEMBLE -->
        <div class="onglet-panel actif" id="panel-0" role="tabpanel">
            <div class="panel-titre">
                <i class="fa-solid fa-table-cells-large"></i> Vue d'ensemble — 7 points essentiels
            </div>
            <div class="fiche-intro">
                La <strong>DPAE (Déclaration Préalable à l'Embauche)</strong> est une formalité
                <strong>obligatoire</strong> avant tout recrutement d'un salarié au régime général.
                Clique sur une rubrique pour en savoir plus.
            </div>
            <div class="resume-grid">
                <div class="resume-carte" onclick="allerOnglet(1)">
                    <div class="rc-header"><span class="rc-num">1</span><i class="fa-solid fa-circle-info rc-icone"></i><span class="rc-titre">Définition et principe</span></div>
                    <div class="rc-desc">Formalité obligatoire avant toute embauche au régime général.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
                <div class="resume-carte" onclick="allerOnglet(2)">
                    <div class="rc-header"><span class="rc-num">2</span><i class="fa-solid fa-list-check rc-icone"></i><span class="rc-titre">Formalités regroupées</span></div>
                    <div class="rc-desc">6 formalités sociales sur un seul formulaire.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
                <div class="resume-carte" onclick="allerOnglet(3)">
                    <div class="rc-header"><span class="rc-num">3</span><i class="fa-solid fa-clock rc-icone"></i><span class="rc-titre">Délais à respecter</span></div>
                    <div class="rc-desc">Au plus tôt 8 jours avant — au plus tard avant la prise de poste.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
                <div class="resume-carte" onclick="allerOnglet(4)">
                    <div class="rc-header"><span class="rc-num">4</span><i class="fa-solid fa-laptop rc-icone"></i><span class="rc-titre">Procédure pratique</span></div>
                    <div class="rc-desc">En ligne via urssaf.fr, net-entreprises.fr ou la MSA.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
                <div class="resume-carte" onclick="allerOnglet(5)">
                    <div class="rc-header"><span class="rc-num">5</span><i class="fa-solid fa-user-shield rc-icone"></i><span class="rc-titre">Effets pour le salarié</span></div>
                    <div class="rc-desc">Ouverture des droits dès le début du contrat.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
                <div class="resume-carte" onclick="allerOnglet(6)">
                    <div class="rc-header"><span class="rc-num">6</span><i class="fa-solid fa-file-contract rc-icone"></i><span class="rc-titre">Document à remettre</span></div>
                    <div class="rc-desc">Copie de la DPAE ou contrat avec mention de l'organisme.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
                <div class="resume-carte" onclick="allerOnglet(7)" style="border-color:#ef9a9a;">
                    <div class="rc-header"><span class="rc-num" style="background:var(--rouge);">7</span><i class="fa-solid fa-triangle-exclamation rc-icone" style="color:var(--rouge);"></i><span class="rc-titre" style="color:var(--rouge);">Sanctions</span></div>
                    <div class="rc-desc">Absence de DPAE = travail dissimulé. Amendes pénales et redressements.</div>
                    <i class="fa-solid fa-arrow-right rc-fleche"></i>
                </div>
            </div>
        </div>

        <!-- PANEL 1 : DÉFINITION -->
        <div class="onglet-panel" id="panel-1" role="tabpanel">
            <div class="panel-titre"><i class="fa-solid fa-circle-info"></i> Définition et principe</div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:12px;">
                La déclaration préalable à l'embauche (DPAE) est une formalité <strong>obligatoire</strong>
                que doit accomplir tout employeur avant d'embaucher un salarié relevant du
                régime général de la Sécurité sociale.
            </p>
            <p style="font-size:15px;line-height:1.65;">
                Le Code du travail précise que l'embauche d'un salarié <em>« ne peut intervenir qu'après
                déclaration nominative accomplie par l'employeur auprès des organismes de protection
                sociale désignés à cet effet »</em>.
            </p>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> Code du travail, article L1221‑10 — site entreprendre.service‑public.fr</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" disabled><i class="fa-solid fa-chevron-left"></i> Précédent</button>
                <button class="nav-panel-btn" onclick="allerOnglet(2)">Formalités <i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <!-- PANEL 2 : FORMALITÉS -->
        <div class="onglet-panel" id="panel-2" role="tabpanel">
            <div class="panel-titre"><i class="fa-solid fa-list-check"></i> À quoi sert la DPAE ? — Formalités regroupées</div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:12px;">
                La DPAE permet de regrouper, sur un <strong>seul formulaire</strong>, plusieurs
                formalités sociales liées à l'embauche. Elle vaut notamment :
            </p>
            <ul class="fiche-liste">
                <li><span class="puce"><i class="fa-solid fa-check"></i></span>Déclaration de première embauche dans un établissement.</li>
                <li><span class="puce"><i class="fa-solid fa-check"></i></span>Immatriculation de l'employeur au régime général et au régime d'assurance chômage (en cas de premier salarié).</li>
                <li><span class="puce"><i class="fa-solid fa-check"></i></span>Immatriculation du salarié à la Sécurité sociale (CPAM / MSA) s'il ne l'est pas encore.</li>
                <li><span class="puce"><i class="fa-solid fa-check"></i></span>Adhésion de l'employeur à un service de santé au travail.</li>
                <li><span class="puce"><i class="fa-solid fa-check"></i></span>Demande de visite médicale ou de visite d'information et de prévention.</li>
                <li><span class="puce"><i class="fa-solid fa-check"></i></span>Pré‑établissement de la déclaration annuelle des données sociales (DADS ou équivalent).</li>
            </ul>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> Notice officielle du formulaire DPAE (CERFA n°14468) + documentation juridique DPAE</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" onclick="allerOnglet(1)"><i class="fa-solid fa-chevron-left"></i> Définition</button>
                <button class="nav-panel-btn" onclick="allerOnglet(3)">Délais <i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <!-- PANEL 3 : DÉLAIS -->
        <div class="onglet-panel" id="panel-3" role="tabpanel">
            <div class="panel-titre"><i class="fa-solid fa-clock"></i> Quand doit-on faire la DPAE ? — Délais à connaître</div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:4px;">
                La DPAE doit <strong>toujours</strong> être réalisée <strong>avant la prise de poste effective</strong>
                du salarié. D'après la notice officielle :
            </p>
            <div class="delais-grid">
                <div class="delai-bloc tot">
                    <div class="delai-titre"><i class="fa-solid fa-calendar-plus"></i> Au plus tôt</div>
                    <p>8 jours <strong>avant</strong> la date d'embauche prévue.</p>
                </div>
                <div class="delai-bloc tard">
                    <div class="delai-titre"><i class="fa-solid fa-calendar-check"></i> Au plus tard</div>
                    <ul>
                        <li>Par courrier recommandé AR : le dernier jour ouvrable précédant l'embauche.</li>
                        <li>Par Internet ou télécopie : dans les instants qui précèdent la prise de poste.</li>
                    </ul>
                </div>
            </div>
            <div class="a-retenir">
                <strong><i class="fa-solid fa-lightbulb"></i> À retenir pour les cas pratiques :</strong>
                une DPAE faite <em>« le jour même »</em> reste valable si elle est transmise
                <strong>avant l'heure prévue d'embauche</strong>.
            </div>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> Code du travail, art. L1221‑10 — Notice CERFA DPAE 14468 (rubrique délais)</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" onclick="allerOnglet(2)"><i class="fa-solid fa-chevron-left"></i> Formalités</button>
                <button class="nav-panel-btn" onclick="allerOnglet(4)">Procédure <i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <!-- PANEL 4 : PROCÉDURE -->
        <div class="onglet-panel" id="panel-4" role="tabpanel">
            <div class="panel-titre"><i class="fa-solid fa-laptop"></i> Comment effectuer la DPAE ? — Procédure pratique</div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:10px;">
                La DPAE se fait principalement <strong>en ligne</strong>.
                L'organisme destinataire délivre un <strong>accusé de réception</strong>
                qui prouve que la déclaration a été faite.
            </p>
            <div class="procedure-steps">
                <div class="proc-step">
                    <div class="proc-num">1</div>
                    <div class="proc-content">
                        <strong>Via urssaf.fr</strong>
                        <span>Créer un compte employeur et effectuer les déclarations directement sur le site de l'Urssaf.</span>
                    </div>
                </div>
                <div class="proc-step">
                    <div class="proc-num">2</div>
                    <div class="proc-content">
                        <strong>Via net-entreprises.fr</strong>
                        <span>Saisie en ligne ou dépôt de fichier de paie sur le portail national des déclarations sociales.</span>
                    </div>
                </div>
                <div class="proc-step">
                    <div class="proc-num">3</div>
                    <div class="proc-content">
                        <strong>Via la MSA (employeurs agricoles)</strong>
                        <span>Les entreprises du secteur agricole déclarent auprès de la Mutualité Sociale Agricole.</span>
                    </div>
                </div>
            </div>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> DPAE site URSSAF — Fiche DPAE entreprendre.service‑public.fr</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" onclick="allerOnglet(3)"><i class="fa-solid fa-chevron-left"></i> Délais</button>
                <button class="nav-panel-btn" onclick="allerOnglet(5)">Effets salarié <i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <!-- PANEL 5 : EFFETS SALARIÉ -->
        <div class="onglet-panel" id="panel-5" role="tabpanel">
            <div class="panel-titre"><i class="fa-solid fa-user-shield"></i> Effets pour le salarié</div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:10px;">
                Grâce à la DPAE, le salarié est reconnu et protégé dès le début du contrat.
                Cela permet d'<strong>ouvrir ses droits</strong> (maladie, accident du travail, chômage) immédiatement.
            </p>
            <div class="effets-grid">
                <div class="effet-item"><i class="fa-solid fa-id-card"></i>Immatriculé ou affilié à la Sécurité sociale s'il ne l'était pas.</div>
                <div class="effet-item"><i class="fa-solid fa-umbrella"></i>Affilié à l'assurance chômage.</div>
                <div class="effet-item"><i class="fa-solid fa-stethoscope"></i>Rattaché au service de santé au travail.</div>
                <div class="effet-item"><i class="fa-solid fa-hospital-user"></i>Convoqué à une visite médicale ou de prévention selon le poste.</div>
                <div class="effet-item"><i class="fa-solid fa-building-columns"></i>Identifié comme salarié auprès des organismes sociaux.</div>
            </div>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> Notice CERFA DPAE et documentation sur les formalités regroupées</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" onclick="allerOnglet(4)"><i class="fa-solid fa-chevron-left"></i> Procédure</button>
                <button class="nav-panel-btn" onclick="allerOnglet(6)">Document à remettre <i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <!-- PANEL 6 : DOCUMENT -->
        <div class="onglet-panel" id="panel-6" role="tabpanel">
            <div class="panel-titre"><i class="fa-solid fa-file-contract"></i> Document à remettre au salarié</div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:12px;">
                L'employeur doit fournir au salarié la <strong>preuve que la DPAE a été effectuée</strong>.
                L'obligation est considérée comme satisfaite par l'<strong>une ou l'autre</strong> des deux options :
            </p>
            <div class="options-doc">
                <div class="option-doc">
                    <div class="option-label"><i class="fa-solid fa-copy"></i> Option A</div>
                    L'employeur remet une <strong>copie de la DPAE</strong> ou de l'<strong>accusé de réception</strong>
                    délivré par l'Urssaf ou la MSA.
                </div>
                <div class="option-ou"><span>OU</span></div>
                <div class="option-doc">
                    <div class="option-label"><i class="fa-solid fa-file-contract"></i> Option B</div>
                    Le salarié reçoit un <strong>contrat de travail écrit</strong> comportant la mention
                    de l'organisme destinataire de la déclaration (URSSAF ou MSA).
                </div>
            </div>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> Code du travail, article R1221‑9</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" onclick="allerOnglet(5)"><i class="fa-solid fa-chevron-left"></i> Effets salarié</button>
                <button class="nav-panel-btn" onclick="allerOnglet(7)">Sanctions <i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <!-- PANEL 7 : SANCTIONS -->
        <div class="onglet-panel" id="panel-7" role="tabpanel">
            <div class="panel-titre" style="color:var(--rouge);border-bottom-color:var(--rouge-clair);">
                <i class="fa-solid fa-triangle-exclamation"></i> Sanctions en cas d'absence de DPAE
            </div>
            <p style="font-size:15px;line-height:1.65;margin-bottom:10px;">
                Ne pas effectuer de DPAE peut être qualifié de
                <strong>travail dissimulé par dissimulation d'emploi salarié</strong>.
            </p>
            <div class="sanction-bloc">
                <p style="margin-bottom:8px;">
                    <strong><i class="fa-solid fa-triangle-exclamation"></i> Travail dissimulé</strong> —
                    Il y a travail dissimulé lorsque l'employeur se soustrait <em>intentionnellement</em>
                    à la déclaration préalable à l'embauche prévue à l'article L1221‑10.
                </p>
                <p>
                    Les sanctions sont lourdes : <strong>amendes pénales</strong>,
                    éventuellement <strong>peines d'emprisonnement</strong>,
                    <strong>redressements et majorations de cotisations</strong>, etc.
                </p>
            </div>
            <div class="source-ref">
                <i class="fa-solid fa-bookmark"></i>
                <span><strong>Source :</strong> Code du travail — art. L8221‑5 (définition du travail dissimulé) et L8224‑1 et suivants (sanctions)</span>
            </div>
            <div class="nav-panel">
                <button class="nav-panel-btn" onclick="allerOnglet(6)"><i class="fa-solid fa-chevron-left"></i> Document à remettre</button>
                <button class="nav-panel-btn" onclick="allerOnglet(0)"><i class="fa-solid fa-table-cells-large"></i> Vue d'ensemble</button>
            </div>
        </div>

    </div><!-- /onglets-body -->
</div><!-- /main-wrapper -->

<footer class="main-footer">
    <strong>© CERPEG</strong> | URSSAF — Base documentaire DPAE — Déclaration Préalable à l'Embauche
</footer>

<script>
function ouvrirMenu() {
    document.getElementById('menuLateral').classList.add('ouvert');
    document.getElementById('menuOverlay').classList.add('ouvert');
}
function fermerMenu() {
    document.getElementById('menuLateral').classList.remove('ouvert');
    document.getElementById('menuOverlay').classList.remove('ouvert');
}
function allerOnglet(n) {
    document.querySelectorAll('.onglet-btn').forEach(b => {
        const actif = parseInt(b.dataset.onglet) === n;
        b.classList.toggle('actif', actif);
        b.setAttribute('aria-selected', actif);
    });
    document.querySelectorAll('.onglet-panel').forEach(p => {
        p.classList.toggle('actif', p.id === 'panel-' + n);
    });
    document.querySelector('.onglets-nav').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
</script>

</body>
</html>
