/*
 * Styles CSS inspirés du design officiel de service-public.fr
 * Basé sur l'analyse du site en août 2026
 * Compatible avec WordPress et l'extension Service Public Shortcode
 */

/* ============================================
   1. Variables CSS - Couleurs et typographie officielles
   ============================================ */
:root {
    /* Couleurs principales du site service-public.fr */
    --sp-blue-850: #002366;        /* Bleu très foncé (texte principal) */
    --sp-blue-750: #003399;        /* Bleu foncé */
    --sp-blue-650: #0055a4;        /* Bleu officiel (liens, titres) */
    --sp-blue-550: #1e73be;        /* Bleu moyen */
    --sp-blue-450: #3b88c8;        /* Bleu clair */
    --sp-blue-350: #65a3d8;        /* Bleu très clair */
    
    /* Couleurs neutres */
    --sp-grey-950: #1e1e1e;        /* Noir profond */
    --sp-grey-850: #333333;        /* Gris foncé (texte) */
    --sp-grey-750: #4d4d4d;        /* Gris moyen */
    --sp-grey-650: #666666;        /* Gris clair */
    --sp-grey-550: #808080;        /* Gris très clair */
    --sp-grey-400: #999999;        /* Gris pour les éléments secondaires */
    --sp-grey-300: #cccccc;        /* Bordures légères */
    --sp-grey-200: #e5e5e5;        /* Fond clair */
    --sp-grey-100: #f5f5f5;        /* Fond très clair */
    --sp-white: #ffffff;            /* Blanc */
    
    /* Couleurs d'état */
    --sp-success: #1f8d49;          /* Vert pour les succès */
    --sp-warning: #ff9900;          /* Orange pour les avertissements */
    --sp-error: #d9232d;            /* Rouge pour les erreurs */
    --sp-info: #0055a4;             /* Bleu pour les infos */
    
    /* Typographie */
    --sp-font-primary: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    --sp-font-secondary: 'Georgia', 'Times New Roman', serif;
    --sp-font-mono: 'Courier New', monospace;
    
    /* Espacements */
    --sp-space-xs: 4px;
    --sp-space-sm: 8px;
    --sp-space-md: 16px;
    --sp-space-lg: 24px;
    --sp-space-xl: 32px;
    
    /* Bordures et ombres */
    --sp-border-radius: 2px;
    --sp-border-radius-lg: 4px;
    --sp-border-width: 1px;
    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --sp-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
    
    /* Taille des polices */
    --sp-font-size-xs: 0.75rem;     /* 12px */
    --sp-font-size-sm: 0.875rem;    /* 14px */
    --sp-font-size-base: 1rem;      /* 16px */
    --sp-font-size-lg: 1.125rem;    /* 18px */
    --sp-font-size-xl: 1.25rem;     /* 20px */
    --sp-font-size-2xl: 1.5rem;     /* 24px */
    --sp-font-size-3xl: 1.75rem;    /* 28px */
    
    /* Interligne */
    --sp-line-height-base: 1.5;
    --sp-line-height-lg: 1.6;
}

/* ============================================
   2. Réinitialisation des styles pour éviter les conflits
   ============================================ */
.service-public-content,
.service-public-content *,
.service-public-content *::before,
.service-public-content *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.service-public-content {
    all: initial;
}

.service-public-content * {
    all: revert;
}

/* ============================================
   3. Conteneur principal (inspiré de la structure officielle)
   ============================================ */
.service-public-content {
    max-width: 100%;
    margin: var(--sp-space-lg) 0;
    padding: var(--sp-space-lg);
    background-color: var(--sp-white);
    border: var(--sp-border-width) solid var(--sp-grey-300);
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-shadow-sm);
    font-family: var(--sp-font-primary);
    font-size: var(--sp-font-size-base);
    line-height: var(--sp-line-height-lg);
    color: var(--sp-grey-850);
    overflow: hidden;
}

/* ============================================
   4. Titre principal (style officiel service-public.fr)
   ============================================ */
.service-public-content .service-public-title {
    font-family: var(--sp-font-secondary);
    font-size: var(--sp-font-size-2xl);
    font-weight: 700;
    color: var(--sp-blue-650);
    margin-bottom: var(--sp-space-md);
    padding-bottom: var(--sp-space-sm);
    border-bottom: 2px solid var(--sp-blue-650);
    letter-spacing: 0.5px;
    text-rendering: optimizeLegibility;
}

/* ============================================
   5. Corps du contenu (typographie et mise en page)
   ============================================ */
.service-public-content .service-public-body {
    margin: var(--sp-space-md) 0;
}

.service-public-content .service-public-body p {
    margin: var(--sp-space-md) 0;
    text-align: justify;
    hyphens: auto;
}

.service-public-content .service-public-body p:first-child {
    margin-top: 0;
}

.service-public-content .service-public-body p:last-child {
    margin-bottom: 0;
}

/* ============================================
   6. Typographie des paragraphes et textes
   ============================================ */
.service-public-content .service-public-body {
    font-size: var(--sp-font-size-base);
    line-height: var(--sp-line-height-lg);
}

/* ============================================
   7. Liens (style officiel avec icône pour les liens externes)
   ============================================ */
.service-public-content .service-public-body a {
    color: var(--sp-blue-650);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
    outline: none;
}

.service-public-content .service-public-body a:hover,
.service-public-content .service-public-body a:focus {
    color: var(--sp-blue-850);
    text-decoration: none;
}

/* Liens externes avec icône (utilise Font Awesome si disponible) */
.service-public-content .service-public-body a[target="_blank"]::after {
    content: "\f08e"; /* Icône Font Awesome pour lien externe */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: var(--sp-space-xs);
    vertical-align: middle;
    display: inline-block;
}

/* ============================================
   8. Listes (à puces et numérotées)
   ============================================ */
.service-public-content .service-public-body ul,
.service-public-content .service-public-body ol {
    margin: var(--sp-space-md) 0;
    padding-left: var(--sp-space-lg);
}

.service-public-content .service-public-body ul {
    list-style-type: disc;
}

.service-public-content .service-public-body ol {
    list-style-type: decimal;
}

.service-public-content .service-public-body ul ul,
.service-public-content .service-public-body ol ol,
.service-public-content .service-public-body ul ol,
.service-public-content .service-public-body ol ul {
    margin: var(--sp-space-sm) 0 var(--sp-space-sm) var(--sp-space-md);
}

/* Puce personnalisée pour les listes imbriquées */
.service-public-content .service-public-body ul ul {
    list-style-type: circle;
}

.service-public-content .service-public-body ul ul ul {
    list-style-type: square;
}

/* ============================================
   9. Titres hiérarchiques (h1 à h6)
   ============================================ */
.service-public-content .service-public-body h1 {
    font-family: var(--sp-font-secondary);
    font-size: var(--sp-font-size-3xl);
    font-weight: 700;
    color: var(--sp-blue-850);
    margin: var(--sp-space-xl) 0 var(--sp-space-md);
    padding-bottom: var(--sp-space-sm);
    border-bottom: 1px solid var(--sp-grey-300);
    letter-spacing: 0.5px;
}

.service-public-content .service-public-body h2 {
    font-family: var(--sp-font-secondary);
    font-size: var(--sp-font-size-2xl);
    font-weight: 700;
    color: var(--sp-blue-750);
    margin: var(--sp-space-lg) 0 var(--sp-space-md);
    padding-bottom: var(--sp-space-xs);
    border-bottom: 1px solid var(--sp-grey-300);
}

.service-public-content .service-public-body h3 {
    font-family: var(--sp-font-primary);
    font-size: var(--sp-font-size-xl);
    font-weight: 600;
    color: var(--sp-blue-650);
    margin: var(--sp-space-md) 0 var(--sp-space-sm);
}

.service-public-content .service-public-body h4 {
    font-family: var(--sp-font-primary);
    font-size: var(--sp-font-size-lg);
    font-weight: 600;
    color: var(--sp-grey-850);
    margin: var(--sp-space-md) 0 var(--sp-space-sm);
}

.service-public-content .service-public-body h5,
.service-public-content .service-public-body h6 {
    font-family: var(--sp-font-primary);
    font-size: var(--sp-font-size-base);
    font-weight: 600;
    color: var(--sp-grey-750);
    margin: var(--sp-space-sm) 0;
}

/* ============================================
   10. Tableaux (style officiel service-public.fr)
   ============================================ */
.service-public-content .service-public-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-space-lg) 0;
    font-size: var(--sp-font-size-sm);
    line-height: var(--sp-line-height-base);
}

.service-public-content .service-public-body th,
.service-public-content .service-public-body td {
    padding: var(--sp-space-sm) var(--sp-space-md);
    text-align: left;
    border: var(--sp-border-width) solid var(--sp-grey-300);
}

.service-public-content .service-public-body th {
    background-color: var(--sp-grey-100);
    font-weight: 600;
    color: var(--sp-grey-850);
    font-family: var(--sp-font-primary);
}

.service-public-content .service-public-body td {
    background-color: var(--sp-white);
}

.service-public-content .service-public-body tr:nth-child(even) td {
    background-color: var(--sp-grey-100);
}

.service-public-content .service-public-body tr:hover td {
    background-color: var(--sp-grey-200);
}

/* ============================================
   11. Blocs d'information (encadrés officiels)
   ============================================ */

/* Encadré bleu (information) */
.service-public-content .service-public-body .sp-encadre,
.service-public-content .service-public-body .encadre {
    background-color: rgba(0, 85, 164, 0.05);
    border-left: 4px solid var(--sp-blue-650);
    padding: var(--sp-space-md);
    margin: var(--sp-space-lg) 0;
    font-size: var(--sp-font-size-sm);
    line-height: var(--sp-line-height-base);
}

/* Encadré orange (attention/avertissement) */
.service-public-content .service-public-body .sp-attention,
.service-public-content .service-public-body .attention {
    background-color: rgba(255, 153, 0, 0.05);
    border-left: 4px solid var(--sp-warning);
    padding: var(--sp-space-md);
    margin: var(--sp-space-lg) 0;
    font-size: var(--sp-font-size-sm);
}

/* Encadré rouge (erreur/important) */
.service-public-content .service-public-body .sp-erreur,
.service-public-content .service-public-body .erreur {
    background-color: rgba(217, 35, 45, 0.05);
    border-left: 4px solid var(--sp-error);
    padding: var(--sp-space-md);
    margin: var(--sp-space-lg) 0;
    font-size: var(--sp-font-size-sm);
}

/* Encadré vert (succès) */
.service-public-content .service-public-body .sp-succes,
.service-public-content .service-public-body .succes {
    background-color: rgba(31, 141, 73, 0.05);
    border-left: 4px solid var(--sp-success);
    padding: var(--sp-space-md);
    margin: var(--sp-space-lg) 0;
    font-size: var(--sp-font-size-sm);
}

/* Titre des encadrés */
.service-public-content .service-public-body .sp-encadre h3,
.service-public-content .service-public-body .encadre h3,
.service-public-content .service-public-body .sp-attention h3,
.service-public-content .service-public-body .attention h3,
.service-public-content .service-public-body .sp-erreur h3,
.service-public-content .service-public-body .erreur h3,
.service-public-content .service-public-body .sp-succes h3,
.service-public-content .service-public-body .succes h3 {
    font-size: var(--sp-font-size-base);
    margin-bottom: var(--sp-space-sm);
    color: var(--sp-grey-850);
}

/* ============================================
   12. Onglets (Tabs) - Style officiel service-public.fr
   ============================================ */

/* Conteneur des onglets */
.service-public-content .service-public-body .sp-tabs,
.service-public-content .service-public-body .tabs {
    margin: var(--sp-space-lg) 0 var(--sp-space-md);
    border-bottom: var(--sp-border-width) solid var(--sp-grey-300);
}

/* Liste des onglets (navigation) */
.service-public-content .service-public-body .sp-tabs-nav,
.service-public-content .service-public-body .tabs-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 var(--sp-space-xs);
    padding: 0;
}

/* Élément de navigation des onglets (li) */
.service-public-content .service-public-body .sp-tabs-nav li,
.service-public-content .service-public-body .tabs-nav li {
    margin: 0 var(--sp-space-xs) var(--sp-space-xs) 0;
}

/* Lien des onglets */
.service-public-content .service-public-body .sp-tabs-nav a,
.service-public-content .service-public-body .tabs-nav a {
    display: inline-block;
    padding: var(--sp-space-sm) var(--sp-space-md);
    font-family: var(--sp-font-primary);
    font-size: var(--sp-font-size-sm);
    font-weight: 600;
    color: var(--sp-grey-650);
    text-decoration: none;
    background-color: var(--sp-grey-200);
    border: var(--sp-border-width) solid var(--sp-grey-300);
    border-bottom: none;
    border-radius: var(--sp-border-radius) var(--sp-border-radius) 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Lien des onglets au survol */
.service-public-content .service-public-body .sp-tabs-nav a:hover,
.service-public-content .service-public-body .tabs-nav a:hover {
    color: var(--sp-blue-650);
    background-color: var(--sp-grey-100);
    border-color: var(--sp-blue-350);
}

/* Onglet actif */
.service-public-content .service-public-body .sp-tabs-nav a.active,
.service-public-content .service-public-body .sp-tabs-nav a:focus,
.service-public-content .service-public-body .tabs-nav a.active,
.service-public-content .service-public-body .tabs-nav a:focus {
    color: var(--sp-blue-650);
    background-color: var(--sp-white);
    border-color: var(--sp-grey-300);
    border-bottom-color: var(--sp-white);
    position: relative;
    z-index: 2;
}

/* Contenu des onglets */
.service-public-content .service-public-body .sp-tab-content,
.service-public-content .service-public-body .tab-content {
    padding: var(--sp-space-md);
    background-color: var(--sp-white);
    border: var(--sp-border-width) solid var(--sp-grey-300);
    border-top: none;
    border-radius: 0 0 var(--sp-border-radius) var(--sp-border-radius);
    box-shadow: var(--sp-shadow-sm);
}

/* Contenu des onglets inactifs (masqués) */
.service-public-content .service-public-body .sp-tab-content:not(.active),
.service-public-content .service-public-body .tab-content:not(.active) {
    display: none;
}

/* ============================================
   13. Citations et blocs de code
   ============================================ */
.service-public-content .service-public-body blockquote {
    font-family: var(--sp-font-secondary);
    font-style: italic;
    color: var(--sp-grey-750);
    border-left: 3px solid var(--sp-grey-300);
    padding-left: var(--sp-space-md);
    margin: var(--sp-space-md) 0;
    font-size: var(--sp-font-size-lg);
    line-height: var(--sp-line-height-lg);
}

.service-public-content .service-public-body code,
.service-public-content .service-public-body pre {
    font-family: var(--sp-font-mono);
    font-size: var(--sp-font-size-sm);
    background-color: var(--sp-grey-100);
    padding: var(--sp-space-xs) var(--sp-space-sm);
    border-radius: var(--sp-border-radius);
    color: var(--sp-blue-850);
    overflow-x: auto;
}

.service-public-content .service-public-body pre {
    display: block;
    padding: var(--sp-space-md);
    margin: var(--sp-space-md) 0;
    border: var(--sp-border-width) solid var(--sp-grey-300);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ============================================
   13. Images et médias
   ============================================ */
.service-public-content .service-public-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--sp-space-md) auto;
    border: var(--sp-border-width) solid var(--sp-grey-300);
    border-radius: var(--sp-border-radius);
}

.service-public-content .service-public-body figure {
    margin: var(--sp-space-md) 0;
    text-align: center;
}

.service-public-content .service-public-body figcaption {
    font-size: var(--sp-font-size-sm);
    color: var(--sp-grey-650);
    margin-top: var(--sp-space-xs);
    font-style: italic;
}

/* ============================================
   14. Source et pied du contenu
   ============================================ */
.service-public-content .service-public-source {
    margin-top: var(--sp-space-lg);
    padding-top: var(--sp-space-md);
    border-top: var(--sp-border-width) solid var(--sp-grey-300);
    text-align: right;
    font-size: var(--sp-font-size-xs);
    color: var(--sp-grey-650);
    font-style: italic;
}

.service-public-content .service-public-source a {
    color: var(--sp-blue-650);
    text-decoration: none;
    font-style: normal;
}

.service-public-content .service-public-source a:hover {
    color: var(--sp-blue-850);
    text-decoration: underline;
}

/* ============================================
   15. Messages d'erreur
   ============================================ */
.service-public-error {
    background-color: rgba(217, 35, 45, 0.1);
    border: var(--sp-border-width) solid var(--sp-error);
    border-radius: var(--sp-border-radius);
    padding: var(--sp-space-md);
    margin: var(--sp-space-md) 0;
    color: var(--sp-error);
    font-size: var(--sp-font-size-sm);
}

.service-public-error strong {
    font-weight: 600;
}

/* ============================================
   16. Adaptation responsive (mobile et tablette)
   ============================================ */
@media (max-width: 1024px) {
    .service-public-content {
        padding: var(--sp-space-md);
    }
    
    .service-public-content .service-public-body {
        font-size: var(--sp-font-size-sm);
    }
}

@media (max-width: 768px) {
    .service-public-content {
        padding: var(--sp-space-sm);
        margin: var(--sp-space-md) 0;
    }
    
    .service-public-content .service-public-title {
        font-size: var(--sp-font-size-xl);
    }
    
    .service-public-content .service-public-body h1 {
        font-size: var(--sp-font-size-2xl);
    }
    
    .service-public-content .service-public-body h2 {
        font-size: var(--sp-font-size-xl);
    }
    
    .service-public-content .service-public-body h3 {
        font-size: var(--sp-font-size-lg);
    }
    
    /* Tableaux en mode défilement horizontal sur mobile */
    .service-public-content .service-public-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Source alignée à gauche sur mobile */
    .service-public-content .service-public-source {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .service-public-content {
        padding: var(--sp-space-xs);
    }
    
    .service-public-content .service-public-body p {
        text-align: left;
    }
    
    /* Réduire les marges pour gagner de la place */
    .service-public-content .service-public-body {
        margin: var(--sp-space-sm) 0;
    }
    
    .service-public-content .service-public-body h2,
    .service-public-content .service-public-body h3,
    .service-public-content .service-public-body h4 {
        margin: var(--sp-space-sm) 0;
    }
}

/* ============================================
   17. Impression
   ============================================ */
@media print {
    .service-public-content {
        box-shadow: none;
        border-color: #000;
        page-break-inside: avoid;
        background-color: transparent;
    }
    
    .service-public-content .service-public-title {
        color: #000 !important;
        border-bottom-color: #000;
    }
    
    .service-public-content .service-public-body a {
        color: #002366 !important;
        text-decoration: underline;
    }
    
    .service-public-content .service-public-body a::after {
        content: none; /* Masquer les icônes à l'impression */
    }
    
    .service-public-content .service-public-source {
        color: #666 !important;
    }
    
    /* Éviter les coupures de page dans les encadrés */
    .service-public-content .service-public-body .sp-encadre,
    .service-public-content .service-public-body .encadre {
        page-break-inside: avoid;
    }
}

/* ============================================
   18. Animations subtiles (optionnel)
   ============================================ */
@keyframes spFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-public-content {
    animation: spFadeIn 0.4s ease-out;
}

/* ============================================
   19. Compatibilité avec les anciens navigateurs
   ============================================ */
/* Fallback pour les navigateurs qui ne supportent pas les variables CSS */
@supports not (--css: variables) {
    .service-public-content {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        color: #333333;
    }
    
    .service-public-content .service-public-title {
        color: #0055a4;
        border-bottom-color: #0055a4;
    }
    
    .service-public-content .service-public-body a {
        color: #0055a4;
    }
}