/*
 * css/style.css
 * -----------------------------------------------------------------------------
 * Styles personnalisés du site ASR Assurances.
 * Palette : bleu / blanc / gris. Cartes modernes, animations légères.
 * -----------------------------------------------------------------------------
 */

:root {
    --bleu: #1d56c4;
    --bleu-fonce: #133a85;
    --bleu-clair: #eaf1ff;
    --gris: #6b7280;
    --gris-clair: #f5f7fa;
    --gris-bord: #e5e9f0;
    --ombre: 0 10px 30px rgba(18, 58, 133, 0.08);
    --ombre-hover: 0 18px 45px rgba(18, 58, 133, 0.16);
    --radius: 16px;
}

/* --- Surcharges Bootstrap (theme bleu) ------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--bleu);
    --bs-btn-border-color: var(--bleu);
    --bs-btn-hover-bg: var(--bleu-fonce);
    --bs-btn-hover-border-color: var(--bleu-fonce);
    --bs-btn-active-bg: var(--bleu-fonce);
    --bs-btn-disabled-bg: var(--bleu);
    border-radius: 10px;
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--bleu);
    --bs-btn-border-color: var(--bleu);
    --bs-btn-hover-bg: var(--bleu);
    --bs-btn-hover-border-color: var(--bleu);
    --bs-btn-active-bg: var(--bleu);
    border-radius: 10px;
    font-weight: 600;
}
.text-primary { color: var(--bleu) !important; }
.bg-primary { background-color: var(--bleu) !important; }
.link-primary { color: var(--bleu) !important; }

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #1f2937;
    background-color: #ffffff;
}

.navbar-brand { letter-spacing: -0.5px; }
.navbar .nav-link { font-weight: 500; color: #374151; }
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--bleu); }

/* --- Section héro ----------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 380px;
    height: 380px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}
.hero::before {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -140px;
    width: 320px;
    height: 320px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-weight: 800; line-height: 1.1; }
.hero-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    backdrop-filter: blur(6px);
}

/* --- Bandeau de page (en-tête interne) ------------------------------------- */
.page-header {
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    color: #fff;
    padding: 4rem 0 3rem;
}
.page-header h1 { font-weight: 800; }
.page-header .breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.page-header .breadcrumb-item.active { color: #fff; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.6); }

/* --- Cartes ----------------------------------------------------------------- */
.card-modern {
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-modern:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-hover);
}
.service-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--bleu-clair);
    color: var(--bleu);
    font-size: 1.7rem;
    margin-bottom: 1rem;
}

/* --- Bandeau statistiques --------------------------------------------------- */
.stats-section { background: var(--gris-clair); }
.stat-number { font-size: 2.4rem; font-weight: 800; color: var(--bleu); }

/* --- Section "pourquoi nous" ----------------------------------------------- */
.feature-check {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bleu-clair); color: var(--bleu);
    flex-shrink: 0;
}

/* --- CTA -------------------------------------------------------------------- */
.cta-section {
    background: linear-gradient(135deg, var(--bleu-fonce) 0%, var(--bleu) 100%);
    color: #fff;
    border-radius: var(--radius);
}

/* --- Formulaires ------------------------------------------------------------ */
.form-card {
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
}
.form-control, .form-select {
    border-radius: 10px;
    padding: .7rem .9rem;
    border-color: var(--gris-bord);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bleu);
    box-shadow: 0 0 0 .2rem rgba(29, 86, 196, 0.15);
}
.upload-zone {
    border: 2px dashed var(--gris-bord);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
    background: var(--gris-clair);
}

/* --- Pied de page ----------------------------------------------------------- */
.footer-section { background: #0f1b33; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-social a {
    color: #fff; font-size: 1.1rem; margin-left: .9rem;
    opacity: .8; transition: opacity .2s;
}
.footer-social a:hover { opacity: 1; }

/* --- Bouton retour en haut -------------------------------------------------- */
.back-to-top {
    position: fixed; right: 22px; bottom: 22px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bleu); color: #fff; border-radius: 50%;
    box-shadow: var(--ombre-hover);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: all .3s ease; z-index: 999; text-decoration: none;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--bleu-fonce); color: #fff; }

/* --- Animations "reveal" ---------------------------------------------------- */
.reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Divers ----------------------------------------------------------------- */
.section-padding { padding: 5rem 0; }
.section-title { font-weight: 800; }
.text-gris { color: var(--gris); }
.badge-soft {
    background: var(--bleu-clair); color: var(--bleu);
    font-weight: 600; padding: .5rem .9rem; border-radius: 50px;
}

/* =========================================================================== */
/*  INTERFACE ADMINISTRATEUR                                                   */
/* =========================================================================== */
.admin-body { background: var(--gris-clair); min-height: 100vh; }

.admin-login-wrapper {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    padding: 1.5rem;
}
.admin-login-card {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--ombre-hover); width: 100%; max-width: 420px;
    padding: 2.5rem;
}

.admin-sidebar {
    background: #0f1b33; color: #cdd5e3;
    width: 250px; min-height: 100vh;
    position: fixed; top: 0; left: 0;
    display: flex; flex-direction: column;
    transition: transform .3s ease; z-index: 1040;
}
.admin-sidebar .brand {
    padding: 1.4rem 1.5rem; font-size: 1.25rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-sidebar .nav-link {
    color: #cdd5e3; padding: .8rem 1.5rem; display: flex; align-items: center; gap: .7rem;
    border-left: 3px solid transparent;
}
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-sidebar .nav-link.active {
    background: rgba(29, 86, 196, 0.25); color: #fff; border-left-color: var(--bleu);
}
.admin-content { margin-left: 250px; padding: 1.5rem; }
.admin-topbar {
    background: #fff; border-radius: 12px; box-shadow: var(--ombre);
    padding: 1rem 1.3rem; margin-bottom: 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
}

.stat-card {
    background: #fff; border-radius: var(--radius); box-shadow: var(--ombre);
    padding: 1.4rem; display: flex; align-items: center; gap: 1rem;
    border-left: 4px solid var(--bleu);
}
.stat-card .icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; background: var(--bleu-clair); color: var(--bleu);
}
.stat-card .value { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-card .label { color: var(--gris); font-size: .9rem; }
.stat-card.is-new { border-left-color: #f59e0b; }
.stat-card.is-new .icon { background: #fff3e0; color: #f59e0b; }
.stat-card.is-done { border-left-color: #16a34a; }
.stat-card.is-done .icon { background: #e7f6ec; color: #16a34a; }

.admin-card {
    background: #fff; border-radius: var(--radius); box-shadow: var(--ombre);
    padding: 1.5rem;
}
.table thead th { color: var(--gris); font-weight: 600; border-bottom: 2px solid var(--gris-bord); }
.table-hover tbody tr:hover { background: var(--bleu-clair); }

.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1039;
}

@media (max-width: 991.98px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-content { margin-left: 0; }
    .sidebar-backdrop.show { display: block; }
}

/* =========================================================================== */
/*  MENU DÉROULANT « SERVICES » (navigation)                                  */
/*  Ajout non intrusif : style du dropdown + ouverture au survol sur desktop.  */
/* =========================================================================== */
.dropdown-menu-services {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--ombre);
    padding: .5rem;
    min-width: 17rem;
}
.dropdown-menu-services .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: .6rem .8rem;
    font-weight: 500;
    color: #374151;
    white-space: normal;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.dropdown-menu-services .dropdown-item i {
    color: var(--bleu);
    font-size: 1.05rem;
    width: 1.6rem;
    flex-shrink: 0;
}
.dropdown-menu-services .dropdown-item:hover,
.dropdown-menu-services .dropdown-item:focus {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    transform: translateX(4px);
}
.dropdown-menu-services .dropdown-item.active,
.dropdown-menu-services .dropdown-item:active {
    background-color: var(--bleu);
    color: #fff;
}
.dropdown-menu-services .dropdown-item.active i,
.dropdown-menu-services .dropdown-item:active i { color: #fff; }
.dropdown-menu-services .dropdown-item-all { color: var(--bleu); }
.dropdown-menu-services .dropdown-divider { margin: .4rem .2rem; }

/* --- Ouverture au survol sur ordinateur (>= 992px) ------------------------- */
@media (min-width: 992px) {
    .services-dropdown .dropdown-menu {
        display: block;
        margin-top: .35rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    .services-dropdown:hover .dropdown-menu,
    .services-dropdown .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}


/* =========================================================================== */
/* PREMIUM GLOBAL UI UPGRADE - consistent corporate insurance design            */
/* =========================================================================== */
:root{--premium-radius:18px;--premium-shadow:0 18px 45px rgba(18,58,133,.13);--premium-shadow-hover:0 26px 70px rgba(18,58,133,.22)}
.navbar{backdrop-filter:saturate(140%) blur(10px)}
.card-modern,.form-card,.admin-card,.stat-card{border-radius:var(--premium-radius);box-shadow:var(--premium-shadow);border-color:rgba(29,86,196,.10)}
.card-modern{overflow:hidden}.card-modern:hover{box-shadow:var(--premium-shadow-hover)}
.page-header,.hero,.cta-section{background:radial-gradient(900px 400px at 80% -10%,rgba(82,139,255,.35),transparent 55%),linear-gradient(135deg,#0e3478 0%,#1d56c4 55%,#0c2557 100%)}
.btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}.btn:hover{transform:translateY(-2px)}
.service-image-wrap{width:100%;height:230px;overflow:hidden;border-radius:18px 18px 0 0;margin:-1.5rem -1.5rem 1.25rem;background:var(--bleu-clair)}
.service-image-wrap img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .45s ease;filter:saturate(1.04) contrast(1.02)}
.card-modern:hover .service-image-wrap img{transform:scale(1.055)}
.service-hero-photo{width:100%;max-width:520px;overflow:hidden;border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,.28)}
.service-hero-photo img{width:100%;height:360px;object-fit:cover;display:block;border-radius:24px}
.service-icon{box-shadow:0 10px 24px rgba(29,86,196,.12)}
@media(max-width:991.98px){.service-image-wrap{height:210px}.service-image-wrap img{height:210px}.section-padding{padding:4rem 0}}
@media(max-width:575.98px){.service-image-wrap{height:190px}.service-image-wrap img{height:190px}.page-header{padding:3rem 0 2.2rem}.card-modern,.form-card{border-radius:16px}}

/* ============================================================================
   Tableau de bord ADMINISTRATION - widgets additionnels
   (reutilise la palette et le style existants : --bleu, --bleu-clair, etc.)
   ============================================================================ */
.stat-card.is-users    { border-left-color:#6366f1; }
.stat-card.is-users .icon    { background:#eef0ff; color:#6366f1; }
.stat-card.is-pending  { border-left-color:#f59e0b; }
.stat-card.is-pending .icon  { background:#fff3e0; color:#f59e0b; }
.stat-card.is-rejected { border-left-color:#dc2626; }
.stat-card.is-rejected .icon { background:#fde8e8; color:#dc2626; }
.stat-card.is-services { border-left-color:#0ea5e9; }
.stat-card.is-services .icon { background:#e0f2fe; color:#0ea5e9; }

/* Listes : activites recentes / connexions recentes */
.activity-list { list-style:none; margin:0; padding:0; }
.activity-list li { display:flex; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--gris-bord); }
.activity-list li:last-child { border-bottom:0; }
.activity-list .act-ic {
    width:38px; height:38px; border-radius:10px; flex:0 0 38px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bleu-clair); color:var(--bleu);
}
.activity-list .act-meta { font-size:.78rem; color:var(--gris); }

/* Etat du systeme */
.sys-status { list-style:none; margin:0; padding:0; }
.sys-status li {
    display:flex; justify-content:space-between; align-items:center;
    padding:.55rem 0; border-bottom:1px dashed var(--gris-bord); font-size:.92rem;
}
.sys-status li:last-child { border-bottom:0; }
.status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.4rem; }
.status-dot.ok   { background:#16a34a; }
.status-dot.warn { background:#f59e0b; }
.status-dot.off  { background:#dc2626; }

/* Carte Export Data */
.export-card .feature-pill {
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--bleu-clair); color:var(--bleu);
    border-radius:50px; padding:.35rem .8rem;
    font-size:.82rem; font-weight:600; margin:.2rem .2rem 0 0;
}

/* Conteneur de graphique (Chart.js) */
.chart-box { position:relative; min-height:220px; }
/* Services page cards: match Home page premium service cards */
.services-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.services-page-grid .service-card{position:relative;background:#fff;border:1px solid var(--gris-bord);border-radius:24px;padding:0;box-shadow:0 18px 45px rgba(15,61,122,.12);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;display:flex;flex-direction:column;height:100%;min-height:470px;cursor:pointer}
.services-page-grid .service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--bleu),#0F3D7A);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:4}
.services-page-grid .service-card:hover{transform:translateY(-10px);box-shadow:0 26px 70px rgba(15,61,122,.20);border-color:rgba(29,86,196,.18)}
.services-page-grid .service-card:hover::before{transform:scaleX(1)}
.services-page-grid .service-card .ic{position:relative;width:100%;aspect-ratio:4/3;height:auto;border-radius:24px 24px 0 0;background:var(--bleu-clair);display:block;font-size:0;margin:0 0 24px;overflow:hidden;transition:transform .35s ease;flex:0 0 auto;box-shadow:none;z-index:2}
.services-page-grid .service-card .ic img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .45s ease;filter:saturate(1.04) contrast(1.02)}
.services-page-grid .service-card:hover .ic{transform:none}
.services-page-grid .service-card:hover .ic img{transform:scale(1.055)}
.services-page-grid .service-card h3{font-size:1.25rem;font-weight:700;margin:0 30px 10px;min-height:3rem;display:flex;align-items:flex-start;position:relative;z-index:2;color:var(--noir)}
.services-page-grid .service-card p{color:var(--gris);font-size:.96rem;margin:0 30px 22px;min-height:4.8rem;flex:1 1 auto;position:relative;z-index:2}
.services-page-grid .service-link{font-weight:700;color:var(--bleu);font-size:.92rem;display:inline-flex;align-items:center;gap:6px;transition:gap .25s ease;margin:0 30px 30px;position:relative;z-index:3;margin-top:auto;text-decoration:none}
.services-page-grid .service-card:hover .service-link{gap:12px}
.services-page-grid .service-card .card-cover{position:absolute;inset:0;z-index:1;border-radius:inherit;font-size:0;line-height:0;text-indent:-9999px}
@media(max-width:991.98px){.services-page-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.services-page-grid{grid-template-columns:1fr}.services-page-grid .service-card h3,.services-page-grid .service-card p,.services-page-grid .service-link{margin-left:24px;margin-right:24px}.services-page-grid .service-link{margin-bottom:24px}}
/* CLAIRASSUR website logo */
.site-logo-img{width:34px;height:34px;object-fit:contain;margin-right:.45rem;vertical-align:middle}
.footer-logo-img{width:30px;height:30px}
.admin-logo-img{width:34px;height:34px;object-fit:contain;margin-right:.45rem;vertical-align:middle;background:#fff;border-radius:8px;padding:2px}
.logo-image-mark{background:#fff!important;padding:3px;overflow:hidden}
.logo-image-mark img{width:100%;height:100%;object-fit:contain;display:block}


/* --- Accessibilité et responsive renforcés ---------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: 3px solid rgba(29, 86, 196, 0.35);
    outline-offset: 2px;
}
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
@media (max-width: 575.98px) {
    .section-padding { padding: 3rem 0; }
    .page-header { padding: 3rem 0 2rem; }
    .admin-card, .form-card { border-radius: 12px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* About section v2 */
.about-nav-link{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:1rem;color:var(--bs-dark,#1f2937);text-decoration:none;font-weight:600;transition:all .25s ease;border:1px solid transparent}.about-nav-link:hover,.about-nav-link:focus{background:rgba(13,110,253,.08);color:var(--bs-primary,#0d6efd);transform:translateX(4px);outline:0}.about-nav-link.active{background:var(--bs-primary,#0d6efd);color:#fff;box-shadow:0 12px 30px rgba(13,110,253,.22)}.about-help{background:linear-gradient(135deg,rgba(13,110,253,.08),rgba(13,110,253,.03))}.about-card{transition:transform .25s ease,box-shadow .25s ease}.about-card:hover{transform:translateY(-6px);box-shadow:0 1rem 2.5rem rgba(15,61,122,.12)}.about-card .service-icon{transition:transform .25s ease}.about-card:hover .service-icon{transform:scale(1.08)}.about-hero-subtitle{max-width:780px;margin-inline:auto}.focus-ring:focus,.btn:focus,.about-nav-link:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.25)!important}@media(max-width:991.98px){.about-sidebar .sticky-lg-top{position:static!important}.about-nav-link:hover{transform:none}}