/*
 * ================================================================
 * ARSN — CHARTE GRAPHIQUE OFFICIELLE NIGER 🇳🇪
 * Conforme à la REVUE SUR L'ARCHITECTURE DU SITE WEB DE L'ARSN
 * ================================================================
 * Couleurs officielles :
 *   Orange Niger  : #E05206  (CTA, onglets actifs, badges)
 *   Vert Niger    : #0B8F3C  (header, navigation secondaire)
 *   Blanc         : #FFFFFF  (arrière-plans, cartes)
 * Palette secondaire :
 *   Gris anthracite : #222222  (texte)
 *   Gris structurel : #DDDDDD  (bordures)
 *   Gris clair      : #F4F4F4  (fonds alternés)
 *   Vert clair      : #DFF5E6  (alertes positives)
 *   Orange clair    : #FFE6D6  (notifications)
 * ================================================================
 */

/* ----------------------------------------
   VARIABLES CSS GLOBALES
---------------------------------------- */
:root {
    /* Couleurs principales Niger */
    --orange-niger:    #E05206;
    --vert-niger:      #0B8F3C;
    --vert-niger-dark: #076B2C;
    --blanc:           #FFFFFF;

    /* Palette secondaire */
    --gris-anthracite: #222222;
    --gris-structurel: #DDDDDD;
    --gris-clair:      #F4F4F4;
    --vert-clair:      #DFF5E6;
    --orange-clair:    #FFE6D6;

    /* Gradients */
    --gradient-orange: linear-gradient(135deg, #E05206 0%, #f5793a 100%);
    --gradient-vert:   linear-gradient(135deg, #0B8F3C 0%, #0FA83E 100%);
    --gradient-urgence:linear-gradient(135deg, #c04000 0%, #E05206 100%);
    --gradient-footer: linear-gradient(135deg, #065a27 0%, #0B8F3C 50%, #076B2C 100%);

    /* Aliases compatibilité */
    --arsn-primary:    #E05206;
    --arsn-secondary:  #0B8F3C;
    --arsn-orange:     #E05206;
    --arsn-green:      #0B8F3C;
    --arsn-vert-dark:  #076B2C;
    --arsn-dark:       #222222;
    --arsn-gray:       #666666;
    --arsn-light:      #F4F4F4;
    --arsn-white:      #FFFFFF;
    --arsn-gradient:         linear-gradient(135deg, #E05206, #f5793a);
    --arsn-gradient-vert:    linear-gradient(135deg, #0B8F3C, #0FA83E);
    --primary-gradient:      linear-gradient(135deg, #E05206 0%, #f5793a 100%);
    --secondary-gradient:    linear-gradient(135deg, #0B8F3C 0%, #0FA83E 100%);
    --accent-gradient:       linear-gradient(135deg, #0B8F3C 0%, #0FA83E 100%);
    --dark-gradient:         linear-gradient(135deg, #076B2C 0%, #0B8F3C 100%);
    --urgence-gradient:      linear-gradient(135deg, #E05206 0%, #c04000 100%);
    --primary-color:   #E05206;
    --secondary-color: #0B8F3C;
    --accent-color:    #0B8F3C;
    --dark-color:      #222222;
    --light-color:     #F4F4F4;
    --white:           #FFFFFF;
    --gray-600:        #666666;
    --gray-300:        #DDDDDD;

    /* Ombres */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:  0 10px 25px rgba(0,0,0,0.12);
    --shadow-orange: 0 4px 15px rgba(224,82,6,0.3);
    --shadow-vert:   0 4px 15px rgba(11,143,60,0.3);

    /* Rayons */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
}

/* ----------------------------------------
   BASE & RESET
---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gris-anthracite);
    background: var(--gris-clair);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------
   TYPOGRAPHIE — Inter (REVUE §3)
---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    color: var(--gris-anthracite);
    line-height: 1.2;
    font-weight: 700;
}

a { color: var(--orange-niger); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--vert-niger); }

/* ----------------------------------------
   BOUTONS CTA — REVUE §4.3
   Bouton principal : fond orange, texte blanc, arrondi 999px
   Bouton secondaire : fond vert, texte blanc
   Bouton neutre : bordure gris, texte gris foncé
---------------------------------------- */

/* Bouton principal (action critique) */
.btn-primary,
.arsn-btn-primary,
.cta-btn,
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--gradient-orange);
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--transition);
    box-shadow: var(--shadow-orange);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn-primary:hover,
.arsn-btn-primary:hover,
.cta-btn:hover,
.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(224,82,6,0.45);
    color: #FFFFFF !important;
}

/* Bouton secondaire (vert) */
.btn-secondary,
.arsn-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--gradient-vert);
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--transition);
    box-shadow: var(--shadow-vert);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn-secondary:hover,
.arsn-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(11,143,60,0.45);
    color: #FFFFFF !important;
}

/* Bouton neutre */
.btn-neutre,
.arsn-btn-neutre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: transparent;
    color: var(--gris-anthracite) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--gris-structurel);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn-neutre:hover,
.arsn-btn-neutre:hover {
    border-color: var(--orange-niger);
    color: var(--orange-niger) !important;
    background: var(--orange-clair);
}

/* Bouton urgence */
.btn-urgence,
.arsn-btn-urgence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--gradient-urgence);
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(192,64,0,0.4);
    animation: pulse-urgence 3s ease-in-out infinite;
}
@keyframes pulse-urgence {
    0%,100% { box-shadow: 0 4px 15px rgba(192,64,0,0.4); }
    50%      { box-shadow: 0 4px 25px rgba(192,64,0,0.7); }
}
.btn-urgence:hover,
.arsn-btn-urgence:hover {
    transform: translateY(-2px);
    color: #FFFFFF !important;
}

/* ----------------------------------------
   BADGES & PILLS — REVUE §4.2
   Orange pour Sûreté, Réglementation, RP
   Vert pour Sécurité, Conformité
---------------------------------------- */
.badge,
.arsn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge-orange { background: var(--orange-clair); color: #c04000; }
.badge-vert   { background: var(--vert-clair);   color: #065a27; }
.badge-gray   { background: var(--gris-clair);   color: var(--gris-anthracite); }
.badge-urgent { background: var(--gradient-urgence); color: #FFFFFF; }

/* ----------------------------------------
   CARTES — REVUE §4.1
   Fond blanc, ombre légère, coins arrondis 8-12px
---------------------------------------- */
.arsn-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gris-structurel);
    transition: var(--transition);
    overflow: hidden;
}
.arsn-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.arsn-card-orange { border-top: 3px solid var(--orange-niger); }
.arsn-card-vert   { border-top: 3px solid var(--vert-niger); }

/* ----------------------------------------
   SECTIONS — Fonds alternés F4F4F4 / Blanc
---------------------------------------- */
.section-white    { background: #FFFFFF; }
.section-gray     { background: var(--gris-clair); }
.section-orange   { background: var(--gradient-orange); color: #FFFFFF; }
.section-vert     { background: var(--gradient-vert);   color: #FFFFFF; }

/* ----------------------------------------
   ICÔNES — REVUE §4.2
   Couleur orange ou vert, 20-28px, outline
---------------------------------------- */
.icon-orange { color: var(--orange-niger); font-size: 1.3rem; }
.icon-vert   { color: var(--vert-niger);   font-size: 1.3rem; }

.icon-box-orange {
    width: 48px; height: 48px;
    background: var(--orange-clair);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--orange-niger);
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: var(--transition);
}
.icon-box-vert {
    width: 48px; height: 48px;
    background: var(--vert-clair);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--vert-niger);
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: var(--transition);
}
.icon-box-orange:hover { background: var(--orange-niger); color: #FFFFFF; }
.icon-box-vert:hover   { background: var(--vert-niger);   color: #FFFFFF; }

/* ----------------------------------------
   PAGE HEADER STANDARD
   Utilisé sur toutes les pages internes
---------------------------------------- */
.arsn-page-header {
    background: var(--gradient-vert);
    color: #FFFFFF;
    padding: 3rem 0 2rem;
    position: relative;
    overflow: hidden;
}
.arsn-page-header::before {
    content: '';
    position: absolute; inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="20" cy="20" r="1.5" fill="rgba(255,255,255,0.05)"/><circle cx="180" cy="40" r="2" fill="rgba(255,255,255,0.05)"/><circle cx="100" cy="160" r="1.5" fill="rgba(255,255,255,0.05)"/></svg>') repeat;
}
.arsn-page-header-orange {
    background: var(--gradient-orange);
}
.arsn-page-header .container { position: relative; z-index: 1; }
.arsn-page-header h1 {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
}
.arsn-page-header p {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    max-width: 650px;
}

/* ----------------------------------------
   BREADCRUMB (fil d'Ariane)
---------------------------------------- */
.arsn-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 1rem;
}
.arsn-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.arsn-breadcrumb a:hover { color: #FFFFFF; }
.arsn-breadcrumb .sep { opacity: 0.5; }
.arsn-breadcrumb .current { color: rgba(255,255,255,0.6); }

/* ----------------------------------------
   SLOGAN ARSN — Standard REVUE
   Affiché sur toutes les pages
---------------------------------------- */
.arsn-slogan-bar {
    background: #FFFFFF;
    border-left: 4px solid var(--orange-niger);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-sm);
}
.arsn-slogan-bar p {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--gris-anthracite);
    font-weight: 500;
    margin: 0;
}
.arsn-slogan-bar p strong { color: var(--orange-niger); }

/* ----------------------------------------
   SECTION URGENCE CTA STANDARD
   Conforme REVUE — visible sur toutes les pages techniques
---------------------------------------- */
.arsn-urgence-section {
    background: var(--gradient-urgence);
    padding: 2.5rem 0;
    position: relative;
    overflow: hidden;
}
.arsn-urgence-section::before {
    content: '';
    position: absolute; inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.06)"/><circle cx="90" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
}
.arsn-urgence-inner {
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.arsn-urgence-icon {
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #FFFFFF; flex-shrink: 0;
    animation: pulse-icon 2.5s ease-in-out infinite;
}
@keyframes pulse-icon {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
    50%      { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.arsn-urgence-text { flex: 1; min-width: 200px; }
.arsn-urgence-text h3 {
    font-size: 1.15rem; font-weight: 800;
    color: #FFFFFF; margin-bottom: 0.25rem;
}
.arsn-urgence-text p { font-size: 0.88rem; color: rgba(255,255,255,0.88); margin: 0; }
.arsn-urgence-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.arsn-urgence-call {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    background: #FFFFFF; color: #E05206 !important;
    text-decoration: none !important; font-weight: 800;
    font-size: 0.95rem; border-radius: 999px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: var(--transition);
}
.arsn-urgence-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    color: #c04000 !important;
}
.arsn-urgence-info {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    background: rgba(255,255,255,0.15);
    color: #FFFFFF !important;
    text-decoration: none !important; font-weight: 600;
    font-size: 0.88rem; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.4);
    transition: var(--transition);
}
.arsn-urgence-info:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.7);
    color: #FFFFFF !important;
}

/* ----------------------------------------
   INDICATEURS CLÉS — Page d'accueil REVUE §2
---------------------------------------- */
.arsn-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.arsn-stat-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    border-top: 3px solid var(--orange-niger);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.arsn-stat-card:nth-child(even) { border-top-color: var(--vert-niger); }
.arsn-stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.arsn-stat-number {
    font-size: 2.8rem; font-weight: 900;
    color: var(--orange-niger); line-height: 1;
    margin-bottom: 0.4rem;
}
.arsn-stat-card:nth-child(even) .arsn-stat-number { color: var(--vert-niger); }
.arsn-stat-label { font-size: 0.88rem; color: var(--gris-anthracite); font-weight: 500; }

/* ----------------------------------------
   SECTION ACCÈS RAPIDE — Page d'accueil REVUE §3
---------------------------------------- */
.arsn-acces-rapide {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
.arsn-acces-item {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 1.25rem 0.75rem;
    text-align: center;
    border: 1px solid var(--gris-structurel);
    text-decoration: none;
    transition: var(--transition);
    display: flex; flex-direction: column;
    align-items: center; gap: 0.5rem;
}
.arsn-acces-item:hover {
    border-color: var(--orange-niger);
    box-shadow: var(--shadow-orange);
    transform: translateY(-3px);
}
.arsn-acces-item i {
    font-size: 1.5rem;
    color: var(--orange-niger);
    transition: var(--transition);
}
.arsn-acces-item:hover i { color: var(--vert-niger); }
.arsn-acces-item span {
    font-size: 0.78rem; font-weight: 600;
    color: var(--gris-anthracite); line-height: 1.3;
    text-align: center;
}

/* ----------------------------------------
   PARTENAIRES — Page d'accueil REVUE §6
---------------------------------------- */
.arsn-partenaires {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 1.5rem;
}
.arsn-partenaire {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.5rem;
    transition: var(--transition);
}
.arsn-partenaire:hover { transform: translateY(-3px); }
.arsn-partenaire-logo {
    width: 110px; height: 68px;
    background: #FFFFFF;
    border: 1.5px solid var(--gris-structurel);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.88rem; color: var(--vert-niger);
    letter-spacing: 0.05em; box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.arsn-partenaire:hover .arsn-partenaire-logo {
    border-color: var(--orange-niger);
    color: var(--orange-niger);
    box-shadow: var(--shadow-orange);
}
.arsn-partenaire span {
    font-size: 0.75rem; font-weight: 700;
    color: var(--gris-anthracite); text-transform: uppercase;
    letter-spacing: 0.05em; text-align: center;
}

/* ----------------------------------------
   NAVIGATION — REVUE §5
   Menu blanc, texte foncé, onglet actif orange
   Survol : soulignement orange
---------------------------------------- */
.nav-link.actif,
.nav-item.current .nav-link {
    color: var(--orange-niger) !important;
    background: rgba(224,82,6,0.08);
}

/* ----------------------------------------
   RESPONSIVE
---------------------------------------- */
@media (max-width: 1024px) {
    .arsn-acces-rapide { grid-template-columns: repeat(3, 1fr); }
    .arsn-stats-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .arsn-urgence-inner   { flex-direction: column; text-align: center; }
    .arsn-urgence-actions { justify-content: center; }
    .arsn-acces-rapide    { grid-template-columns: repeat(2, 1fr); }
    .arsn-stats-grid      { grid-template-columns: repeat(2, 1fr); }
    .arsn-partenaires     { gap: 1rem; }
    .arsn-partenaire-logo { width: 90px; height: 56px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
    .arsn-acces-rapide { grid-template-columns: repeat(2, 1fr); }
    .arsn-stats-grid   { grid-template-columns: 1fr 1fr; }
}