<style>
  :root{
    --bg:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:rgba(17,24,39,.10);

    --red-1:#e35a73;
    --red-2:#cf3e63;
    --red-3:#b22b4d;
    --hero-grad: linear-gradient(135deg, var(--red-1) 0%, var(--red-2) 48%, var(--red-3) 100%);

    --shadow: 0 18px 50px rgba(17,24,39,.14);
    --r:18px;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
  }
  a{color:inherit;text-decoration:none}
  a:hover{text-decoration:none}
  .container{max-width:1180px;margin:0 auto;padding:0 18px}

  /* ===== Topbar (commun) ===== */
  .topbar{
    position:sticky; top:0; z-index:50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbarRow{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px;
    padding:14px 0;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:900;
    letter-spacing:-.01em;
    white-space:nowrap;
  }

  .brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;
    display:block;
  }

  /* Wrapper logo (si utilisé) */
  .brand .logo{
    width:42px;
    height:42px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
  }
  .brand .logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  .brandMark{
    width:34px;height:34px;
    border-radius:14px; /* identique à ta maquette actuelle */
    background:var(--hero-grad);
    box-shadow: 0 10px 22px rgba(207,62,99,.22);
    flex:0 0 auto;
  }

  /* Boutons "pills" (utilisés sur pages lecture/admin si besoin) */
  .pill{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(207,62,99,.28);
    background: rgba(207,62,99,.08);
    font-weight:900;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
  }

  /* ===== Hero + Carousel (index) ===== */
  .heroWrap{
    background: var(--hero-grad);
    padding:42px 0 44px 0;
  }
  .heroGrid{
    display:grid;
    grid-template-columns: 1.6fr .9fr;
    gap:18px;
    align-items:stretch;
  }

  .carousel{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    box-shadow: var(--shadow);
    border:1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.10);
    min-height:340px;
  }
  .slides{
    display:flex;
    width:100%;
    height:100%;
    transform: translateX(0%);
    transition: transform 520ms cubic-bezier(.2,.85,.2,1);
  }
  .slide{
    min-width:100%;
    position:relative;
    display:flex;
    align-items:stretch;
    justify-content:center;
    background: rgba(255,255,255,.08);
  }
  .slideMedia{
    position:absolute; inset:0;
    background:
      radial-gradient(900px 300px at 20% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
      radial-gradient(700px 260px at 75% 70%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
      rgba(255,255,255,.06);
  }
  .slideContent{
    position:relative;
    padding:22px;
    color: rgba(255,255,255,.96);
    text-shadow: 0 10px 26px rgba(0,0,0,.22);
    max-width:82%;
    margin:auto 0;
  }
  .slideKicker{
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:12px;
    opacity:.92;
  }
  .slideTitle{
    margin:10px 0 8px 0;
    font-size:46px;
    line-height:1.02;
    letter-spacing:-.02em;
    font-weight:900;
  }
  .slideSub{
    font-size:14px;
    line-height:1.5;
    opacity:.92;
    font-weight:700;
    max-width:62ch;
  }
  .slideCTA{
    margin-top:14px;
    display:inline-flex;
    padding:10px 14px;
    border-radius:999px;
    font-weight:900;
    background: rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
  }
  .slideCTA:hover{background: rgba(255,255,255,.22)}

  .carControls{
    position:absolute; inset:auto 0 0 0;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 100%);
  }
  .dots{
    display:flex; gap:10px; align-items:center; justify-content:center;
    width:100%;
  }
  .dot{
    width:8px;height:8px;
    border-radius:999px;
    background: rgba(255,255,255,.42);
    border:1px solid rgba(255,255,255,.30);
    cursor:pointer;
    padding:0;
  }
  .dot.isActive{background: rgba(255,255,255,.92);}
  .navBtn{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.14);
    cursor:pointer;
    color:#fff;
    flex:0 0 auto;
  }
  .navBtn:hover{background: rgba(255,255,255,.18)}

  /* Bloc latéral (index) */
  .heroSide{
    border-radius:10px;
    background: rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.26);
    box-shadow: var(--shadow);
    min-height:340px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:22px;
    text-align:center;
    color: rgba(255,255,255,.96);
    gap:12px;
  }
  .sideTitle{
    font-weight:900;
    font-size:20px;
    line-height:1.12;
    letter-spacing:-.01em;
  }
  .sideActions{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
    margin-top:6px;
  }
  .sideBtn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    font-weight:900;
    border:1px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.16);
    color:#fff;
  }
  .sideBtn:hover{background: rgba(255,255,255,.20)}
  .sideBtnPrimary{
    background: rgba(255,255,255,.92);
    color:#7a1330;
    border-color: rgba(255,255,255,.88);
  }
  .sideBtnPrimary:hover{background:#fff}

  /* ===== Sections + cartes (index) ===== */
  .section{padding:34px 0}
  .h2{
    font-size:28px;
    line-height:1.05;
    margin:0 0 12px 0;
    letter-spacing:-.02em;
    font-weight:900;
  }
  .lead{
    max-width:78ch;
    color: rgba(17,24,39,.78);
    font-size:15px;
    line-height:1.7;
    margin:0;
  }
  .grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
    margin-top:18px;
  }
  .card{
    border:1px solid rgba(17,24,39,.08);
    background: rgba(17,24,39,.02);
    border-radius:14px;
    padding:14px;
  }
  .tag{
    display:inline-flex;
    font-weight:900;
    font-size:12px;
    color: var(--red-2);
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .cardTitle{
    margin:8px 0 6px 0;
    font-weight:900;
    letter-spacing:-.01em;
  }
  .meta{font-size:12px;color: rgba(17,24,39,.62);}
  .card a:hover{text-decoration:underline}

  /* ===== Pages lecture (actu.php / event.php) ===== */
  .hero{background: var(--hero-grad); padding:26px 0;}
  .heroCard{
    border-radius:14px;
    border:1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.14);
    box-shadow: var(--shadow);
    padding:16px;
    color: rgba(255,255,255,.96);
  }
  .kicker{
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:12px;
    opacity:.92;
  }
  .h1{
    margin:10px 0 8px 0;
    font-size:34px;
    line-height:1.08;
    letter-spacing:-.02em;
    font-weight:900;
  }

  .grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:14px;
    padding:18px 0 30px 0;
    align-items:start;
  }
  .panel{
    border:1px solid rgba(17,24,39,.08);
    background: rgba(17,24,39,.02);
    border-radius:14px;
    padding:14px;
  }
  .excerpt{
    color: rgba(17,24,39,.74);
    font-weight:800;
    line-height:1.65;
    margin:0 0 12px 0;
  }
  .content{
    color: rgba(17,24,39,.82);
    line-height:1.8;
    font-size:15px;
    white-space:pre-wrap;
  }

  .kv{margin-top:12px; display:grid; gap:8px;}
  .kvRow{
    border:1px solid rgba(17,24,39,.08);
    background:#fff;
    border-radius:12px;
    padding:10px 12px;
    font-size:13px;
    color: rgba(17,24,39,.80);
  }
  .kvRow b{color: rgba(17,24,39,.92);}

  .list{display:flex; flex-direction:column; gap:10px;}
  .item{
    border:1px solid rgba(17,24,39,.08);
    background:#fff;
    border-radius:14px;
    padding:12px;
  }
  .itemTitle{font-weight:900; letter-spacing:-.01em;}
  .itemMeta{font-size:12px; color:rgba(17,24,39,.62); margin-top:4px;}
  .item a:hover{text-decoration:underline}

  /* ===== Responsive ===== */
  @media (max-width:980px){
    .heroGrid{grid-template-columns:1fr}
    .carousel,.heroSide{min-height:260px}
    .slideTitle{font-size:34px}
    .slideContent{max-width:92%}
    .grid3{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr}
  }

  /* ===== PATCH DEMANDÉ : MOBILE ===== */
  @media (max-width:768px){
    /* Logo lisible (évite miniaturisation via wrapper .logo) */
    .brand .logo{
      width:44px;
      height:44px;
      flex:0 0 44px;
    }
    .brand img{
      width:44px;
      height:44px;
    }

    /* Enlever UNIQUEMENT les 2 flèches sur mobile */
    .carControls .navBtn{
      display:none !important;
    }
  }
  
  /* Bandeau image collé au hero (full width, sans card) */
.ugaHeroBand{
  position: relative;
  width: 100%;
  /* hauteur maîtrisée (mobile vs desktop) */
  --band-h: 160px;
  min-height: var(--band-h);

  /* colle visuellement au hero */
  margin-top: 0;
  overflow: hidden;

  /* option : petite séparation douce (si tu veux) */
  /* border-top: 1px solid rgba(255,255,255,.14); */
}

@media (min-width: 900px){
  .ugaHeroBand{ --band-h: 120px; }
}

/* Le <picture> se comporte comme un background cover */
.ugaHeroBandMedia,
.ugaHeroBandMedia > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ugaHeroBandMedia > img{
  display: block;
  object-fit: cover;
  object-position: center;
  /* stabilité layout : si l’image tarde, la section garde sa hauteur */
}

/* Overlay optionnel pour rester dans ton univers “rose / verre” */
.ugaHeroBand::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* overlay léger : tu peux durcir/atténuer */
  background:
    radial-gradient(900px 260px at 25% 15%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.02));
}
</style>
