@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&family=Parisienne&display=swap');

:root{
    --tsb-blue:#073556;
    --tsb-light:#95CBD8;
    --tsb-bg:#F7F7F4;
    --gold:#c9a24b;
    --sage:#9aa886;
    --ink:#111315;
    --font-head:'Montserrat', sans-serif;
    --font-body:'Open Sans', sans-serif;
    --font-script:'Parisienne', cursive;
}

.dg *{ box-sizing:border-box; }
.dg{ font-family:var(--font-body); color:#3a4750; background:var(--tsb-bg); overflow:hidden; }
.dg-script{ font-family:var(--font-script); font-weight:400; }

/* =====================================================
   1. HERO sombre plein écran
   ===================================================== */

.dg-hero{
    position:relative;
    min-height:84vh;
    border-radius:0 0 30px 30px;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    padding:130px 40px 50px;
    background:var(--ink);
}
.dg-hero img.bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:.5; z-index:0;
}
.dg-hero::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(7,53,86,.5), rgba(17,19,21,.35) 50%, rgba(17,19,21,.85));
}
.dg-hero-inner{ position:relative; z-index:2; max-width:1280px; margin:auto; width:100%; }

.dg-hero h1{
    font-family:var(--font-head);
    font-size:clamp(22px,2.8vw,36px);
    font-weight:800;
    line-height:1.25;
    color:#fff;
    max-width:580px;
    margin:0;
    letter-spacing:-.3px;
}
.dg-hero h1 em{ font-style:normal; color:var(--tsb-light); }

.dg-watermark{
    position:absolute; bottom:74px; left:50%; transform:translateX(-50%);
    font-family:var(--font-head); font-weight:800;
    font-size:clamp(50px,12vw,150px);
    color:rgba(255,255,255,.09);
    letter-spacing:-3px; white-space:nowrap; z-index:2; pointer-events:none;
}

.dg-hero-card{
    position:absolute; bottom:30px; right:40px; z-index:3;
    display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px; padding:10px 14px;
}
.dg-hero-card .thumb{ width:42px; height:42px; border-radius:9px; overflow:hidden; flex-shrink:0; }
.dg-hero-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.dg-hero-card .meta b{ display:block; font-family:var(--font-head); font-size:11px; font-weight:700; color:#fff; }
.dg-hero-card .meta span{ font-size:9px; color:rgba(255,255,255,.7); }

.dg-hero-social{ position:absolute; bottom:30px; left:40px; z-index:3; display:flex; gap:14px; }
.dg-hero-social a{ color:rgba(255,255,255,.7); font-size:13px; transition:.3s; }
.dg-hero-social a:hover{ color:var(--gold); }

/* =====================================================
   2. SECTION CARTES
   ===================================================== */

.dg-cards{ max-width:1280px; margin:auto; padding:80px 40px; }
.dg-cards-grid{ display:grid; grid-template-columns:0.8fr 1.1fr 1.1fr; gap:24px; align-items:end; }

.dg-meta-row{ display:flex; justify-content:space-between; font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:1px; color:#9aa3ab; margin-bottom:16px; }
.dg-left .desc{ font-size:11px; line-height:1.7; color:#7a828c; margin:0 0 34px; max-width:230px; }
.dg-left .dg-label{ font-family:var(--font-script); font-size:20px; color:var(--gold); margin-bottom:4px; }
.dg-left h2{ font-family:var(--font-head); font-size:clamp(18px,2.2vw,26px); font-weight:800; color:var(--tsb-blue); line-height:1.18; margin:0 0 20px; }

.dg-pill{ display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 22px; border-radius:999px; background:var(--tsb-blue); color:#fff; font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; transition:.3s; }
.dg-pill:hover{ background:var(--gold); color:#1a1407; transform:translateY(-2px); }

.dg-card{
    position:relative; border-radius:22px; overflow:hidden;
    min-height:340px; padding:24px;
    display:flex; flex-direction:column; justify-content:space-between;
    color:#fff;
}
.dg-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.dg-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,53,86,.22), rgba(17,19,21,.78)); z-index:1; }
.dg-card.light{ color:var(--tsb-blue); }
.dg-card.light::after{ background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(247,247,244,.85)); }
.dg-card-top, .dg-card-bot{ position:relative; z-index:2; }
.dg-card-top b{ display:block; font-family:var(--font-head); font-size:16px; font-weight:700; }
.dg-card-top span{ font-size:9px; letter-spacing:1px; text-transform:uppercase; opacity:.8; }
.dg-card-bot h3{ font-family:var(--font-head); font-size:17px; font-weight:800; margin:0 0 7px; }
.dg-card-bot p{ font-size:11px; line-height:1.6; opacity:.85; margin:0 0 14px; max-width:230px; }
.dg-mini{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); color:inherit; font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; transition:.3s; }
.dg-card.light .dg-mini{ background:rgba(7,53,86,.1); }
.dg-mini:hover{ background:var(--gold); color:#1a1407; }

/* carte dédiée à la plaque — image entière, pas recadrée */
.dg-card-plaque{ color:#fff !important; background:var(--ink); }
.dg-card-plaque img{
    object-fit:contain !important;
    padding:18px;
    background:radial-gradient(circle at 50% 40%, #1a1a18, #0c0c0b);
}
.dg-card-plaque::after{
    background:linear-gradient(180deg, transparent 40%, rgba(12,12,11,.85)) !important;
}
.dg-card-plaque .dg-mini{ background:rgba(255,255,255,.16) !important; }

.dg-cards-nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.dg-nav-btn{ width:40px; height:40px; border:none; border-radius:50%; background:#fff; color:var(--tsb-blue); cursor:pointer; box-shadow:0 8px 20px rgba(7,53,86,.12); transition:.3s; }
.dg-nav-btn:hover{ background:var(--tsb-blue); color:#fff; }

/* =====================================================
   3. MANIFESTE
   ===================================================== */

.dg-manifest{ background:#fff; padding:100px 40px; text-align:center; }
.dg-manifest .tag{ font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.dg-manifest p{
    max-width:820px; margin:0 auto;
    font-family:var(--font-head);
    font-size:clamp(18px,2.4vw,28px);
    font-weight:700; line-height:1.4; letter-spacing:-.3px;
    color:var(--tsb-blue);
}
.dg-manifest p .muted{ color:#b8c0c6; }

/* =====================================================
   4. VIDÉO + TÉMOIGNAGE
   ===================================================== */

.dg-video{ max-width:1280px; margin:auto; padding:36px 40px 100px; display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:stretch; }

.dg-video-card{ position:relative; border-radius:24px; overflow:hidden; min-height:320px; }
.dg-video-card img{ width:100%; height:100%; object-fit:cover; }
.dg-video-card .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--tsb-blue); font-size:16px; cursor:pointer; transition:.3s; }
.dg-video-card .play:hover{ background:var(--gold); transform:translate(-50%,-50%) scale(1.08); }
.dg-video-card .cap{ position:absolute; left:16px; bottom:16px; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); color:#fff; font-size:10px; padding:7px 13px; border-radius:999px; }

.dg-quote{ background:#fff; border-radius:24px; padding:36px 30px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 16px 40px rgba(7,53,86,.07); }
.dg-quote .qhead{ font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#9aa3ab; }
.dg-quote .name{ font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--tsb-blue); margin:12px 0; }
.dg-quote .deco{ color:var(--gold); font-size:16px; letter-spacing:4px; }
.dg-quote .who{ display:flex; align-items:center; gap:11px; margin-top:22px; }
.dg-quote .who img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.dg-quote .who b{ display:block; font-family:var(--font-head); font-size:12px; color:var(--tsb-blue); }
.dg-quote .who span{ font-size:10px; color:#8a929a; }

/* reveal */
.fx{ opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.fx.in{ opacity:1; transform:translateY(0); }

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media(max-width:980px){
    .dg-hero{ padding:120px 22px 50px; }
    .dg-hero-card{ display:none; }
    .dg-cards-grid{ grid-template-columns:1fr; gap:18px; }
    .dg-video{ grid-template-columns:1fr; }
}
@media(max-width:560px){
    .dg-hero h1{ font-size:20px; }
    .dg-manifest{ padding:72px 22px; }
    .dg-video{ padding:28px 22px 72px; }
}