/* ═══════════════════════════════════════════════════
   DIGIV.PRO — Design System v1 — 2026
   Charte CSS globale · Palette Océan bleu
   ═══════════════════════════════════════════════════ */

/* ── 1. Variables racine ────────────────────────────── */
:root {
    /* Palette Océan bleu */
    --ecume: #eef8ff;
    --voile: #abd0ed;
    --ondes: #00e0dd;
    --horizon: #3fb5ca;
    --lien-marin: #1b5e8c;
    --ancre: #0a4645;

    /* Couleurs sections */
    --profondeur: #1b5e8c;
    --surface: #3fb5ca;
    --soleil: #e8a04a;
    --courant: #0a9e8a;
    --rivage: #0e6455;

    /* Fonctionnelles */
    --accent: #e8a04a;
    --accent-soft: #fff8f0;
    --danger: #e05252;

    /* Texte */
    --text-dark: #12302f;
    --text-mid: #3a5a6a;
    --text-light: #8faab8;

    /* Champs */
    --field-bg: #f8fafb;
    --field-border: rgba(63, 181, 202, .22);
    --field-focus-border: #3fb5ca;
    --field-focus-shadow: rgba(63, 181, 202, .13);
    --field-text: #12302f;

    /* Global */
    --bg-app: #f2f7f9;
    --radius-card: 18px;
    --shadow-card: 0 2px 16px rgba(10, 70, 69, .06);

    /* Surcharge Bootstrap 5 custom properties */
    --bs-primary: #3fb5ca;
    --bs-primary-rgb: 63, 181, 202;
    --bs-link-color: #1b5e8c;
    --bs-link-color-rgb: 27, 94, 140;
    --bs-link-hover-color: #0a4645;
    --bs-body-bg: #f2f7f9;
    --bs-body-color: #12302f;
    --bs-border-color: rgba(63, 181, 202, .22);
}

/* ── 2. Global ─────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-app);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

/* Override Bootstrap bg-light */
body.bg-light,
.bg-light {
    background-color: var(--bg-app) !important;
}

/* ── 3. Navbar ─────────────────────────────────────── */
.dv-navbar {
    background: #fff !important;
    border-bottom: 1px solid rgba(63, 181, 202, .18) !important;
    box-shadow: 0 2px 14px rgba(10, 70, 69, .05) !important;
}

.dv-navbar .navbar-brand {
    font-weight: 800;
    color: var(--ancre);
}

.dv-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ancre), var(--lien-marin));
    flex-shrink: 0;
}

.dv-brand-text {
    background: linear-gradient(135deg, var(--ancre), var(--horizon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Boutons navbar */
.btn-dv-nav-primary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(135deg, var(--lien-marin), var(--horizon));
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: .45rem 1.1rem;
    font-size: .94rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 3px 12px rgba(27, 94, 140, .25);
}

.btn-dv-nav-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(27, 94, 140, .35);
}

.btn-dv-nav-outline {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: transparent;
    color: var(--lien-marin) !important;
    border: 1.5px solid rgba(63, 181, 202, .45);
    border-radius: 50px;
    padding: .42rem 1.05rem;
    font-size: .94rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.btn-dv-nav-outline:hover {
    background: var(--ecume);
    transform: translateY(-2px);
}

/* ── 4. Footer ─────────────────────────────────────── */
.dv-footer {
    background: #fff;
    border-top: 1px solid rgba(63, 181, 202, .15) !important;
}

.dv-footer a {
    color: var(--text-mid);
    text-decoration: none;
    transition: color .18s;
}

.dv-footer a:hover {
    color: var(--lien-marin);
}


/* ── 5. Hero générique ─────────────────────────────────────────
   RÈGLE ABSOLUE : uniquement des GOUTTES — jamais de cercles
   Une goutte = largeur ≠ hauteur + border-radius asymétrique
   ─────────────────────────────────────────────────────────────*/
.dv-hero {
    background: linear-gradient(135deg, var(--ancre) 0%, var(--lien-marin) 55%, var(--horizon) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Goutte 1 — grande, bas gauche */
.dv-hero::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 580px;        /* hauteur > largeur = forme goutte */
    bottom: -42%;
    left: -6%;
    border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
    background: transparent;
    border: 27px solid rgba(0, 224, 221, .13);
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Goutte 2 — moyenne, haut droite */
.dv-hero::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 400px;        /* hauteur > largeur = forme goutte */
    top: -28%;
    right: -4%;
    border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
    background: transparent;
    border: 23px solid rgba(171, 208, 237, .14);
    transform: rotate(12deg);
    pointer-events: none;
}

/* Goutte 3 — petite, centre droit — sur l'élément inner */
.dv-hero-inner::before {
    content: '';
    position: absolute;
    width: 210px;
    height: 240px;
    top: 25%;
    right: 26%;
    border-radius: 50% 50% 50% 50% / 75% 60% 40% 40%;
    background: transparent;
    border: 19px solid rgba(0, 224, 221, .10);
    transform: translateY(-50%) rotate(-30deg);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    /* Gouttes .dv-hero */
    .dv-hero::after,
    .dv-hero-inner::before {
        display: none;
    }

    /* Gouttes .profile-hero */
    .profile-hero::after,
    .profile-hero-inner::before {
        display: none;
    }
}
/* ── 6. Cards ──────────────────────────────────────── */
.dv-card {
    background: #fff;
    border-radius: var(--radius-card);
    border: 1px solid rgba(63, 181, 202, .14);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.dv-card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #f0f6f8;
    font-weight: 700;
    font-size: .88rem;
    color: var(--ancre);
}

.dv-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
}

/* ── 7. Boutons globaux ────────────────────────────── */
.btn-dv-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(135deg, var(--lien-marin), var(--horizon));
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: .75rem 1.8rem;
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(27, 94, 140, .28);
}

.btn-dv-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(27, 94, 140, .38);
    color: #fff !important;
}

.btn-dv-secondary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #edf6f9;
    color: var(--lien-marin) !important;
    border: 1.5px solid rgba(63, 181, 202, .3);
    border-radius: 50px;
    padding: .72rem 1.75rem;
    font-weight: 600;
    font-size: .97rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, transform .2s;
}

.btn-dv-secondary:hover {
    background: var(--ecume);
    transform: translateY(-2px);
}

.btn-dv-white {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #fff;
    color: var(--lien-marin) !important;
    border: none;
    border-radius: 50px;
    padding: .6rem 1.4rem;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform .2s, box-shadow .2s;
}

.btn-dv-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

.btn-dv-ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .13);
    border: 1.5px solid rgba(255, 255, 255, .32);
    color: #fff !important;
    border-radius: 50px;
    padding: .55rem 1.2rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
}

.btn-dv-ghost:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff !important;
    transform: translateY(-2px);
}

.btn-dv-danger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--danger);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: .55rem 1.2rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 14px rgba(224, 82, 82, .32);
    transition: transform .2s, box-shadow .2s;
}

.btn-dv-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(224, 82, 82, .42);
    color: #fff !important;
}

/* ── 8. Champs formulaire ──────────────────────────── */
.dv-input {
    width: 100%;
    padding: .72rem 1rem;
    border: 1.5px solid var(--field-border);
    border-radius: 10px;
    font-size: .9rem;
    color: var(--field-text);
    background: var(--field-bg);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
}

.dv-input:focus {
    border-color: var(--field-focus-border);
    background: #fff;
    box-shadow: 0 0 0 3px var(--field-focus-shadow);
}

.dv-input::placeholder {
    color: #b0c4cc;
}

/* ── 9. Badges ─────────────────────────────────────── */
.badge-dv-accent {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 50px;
}

.badge-dv-success {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(14, 100, 85, .12);
    color: var(--rivage);
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 50px;
}

.badge-dv-danger {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(224, 82, 82, .1);
    color: var(--danger);
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 50px;
}

/* checkbox accent */
input[type="checkbox"] {
    accent-color: var(--courant);
}

/* ── 10. Alertes Bootstrap recoloriées ─────────────── */
.alert-primary {
    background: var(--ecume) !important;
    border-color: var(--voile) !important;
    color: var(--lien-marin) !important;
}

.alert-success {
    background: rgba(14, 100, 85, .08) !important;
    border-color: rgba(14, 100, 85, .22) !important;
    color: var(--rivage) !important;
}

.alert-danger {
    background: rgba(224, 82, 82, .08) !important;
    border-color: rgba(224, 82, 82, .22) !important;
    color: var(--danger) !important;
}

/* ── 11. Eyebrow / pill label ──────────────────────── */
.dv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lien-marin);
    background: var(--ecume);
    padding: .3rem .9rem;
    border-radius: 50px;
}
/* ── Gouttes page Profil ───────────────────────────── */
.profile-hero {
    background: linear-gradient(
        135deg,
        var(--ancre)      0%,
        var(--lien-marin) 48%,
        var(--horizon)    100%
    );
    padding: 2.2rem 2rem 3.6rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.profile-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Goutte 1 — grande, bas gauche */
.profile-hero::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 580px;
    bottom: -42%;
    left: -6%;
    border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
    background: transparent;
    border: 27px solid rgba(0, 224, 221, .13);
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Goutte 2 — moyenne, haut droite 
.profile-hero::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 400px;
    top: -28%;
    right: -4%;
    border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
    background: transparent;
    border: 23px solid rgba(171, 208, 237, .14);
    transform: rotate(12deg);
    pointer-events: none;
}*/

/* Goutte 3 — petite, centre droit */
.profile-hero-inner::before {
    content: '';
    position: absolute;
    width: 210px;
    height: 240px;
    top: 25%;
    right: 26%;
    border-radius: 50% 50% 50% 50% / 75% 60% 40% 40%;
    background: transparent;
    border: 19px solid rgba(0, 224, 221, .10);
    transform: translateY(-50%) rotate(-30deg);
    pointer-events: none;
    z-index: 0;
}