:root{
      --bg-1:#0b1222;
      --bg-2:#111a32;
      --bg-3:#0a0f1e;
      --gold-1:#f6d37a;
      --gold-2:#d7a83e;
      --gold-3:#a7771d;
      --white:#f3f6ff;
      --muted:#b9c2da;
      --shadow: 0 18px 50px rgba(0,0,0,.55);
      --soft: rgba(255,255,255,.08);
      --soft2: rgba(255,255,255,.12);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      background: radial-gradient(1200px 800px at 20% 10%, #1b2a55 0%, #0b1021 55%, #060a14 100%);
      color:var(--white);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      display:flex;
      min-height:100svh;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    /* Poster frame */
    .poster{
      position:relative;
      width:min(920px, 96vw);
      aspect-ratio: 2 / 3;           /* poster-ish ratio */
      border-radius: 22px;
      overflow:hidden;
      box-shadow: var(--shadow);
      background:
        radial-gradient(1000px 550px at 85% 15%, rgba(90,138,255,.22) 0%, rgba(0,0,0,0) 55%),
        radial-gradient(900px 520px at 10% 35%, rgba(255,220,130,.16) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #0a1125 0%, #080d1b 40%, #060a14 100%);
      isolation:isolate;
    }

    /* Background image placeholder (city) */
    .bg-city{
      position:absolute; inset:0;
      opacity:.42;
      filter: saturate(1.05) contrast(1.05);
      background:
        linear-gradient(0deg, rgba(5,8,16,.90) 0%, rgba(5,8,16,.65) 38%, rgba(5,8,16,.35) 100%),
        radial-gradient(1200px 700px at 75% 10%, rgba(120,170,255,.45) 0%, rgba(0,0,0,0) 55%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,0) 1px 8px);
      z-index:-2;
    }
    /* To use your own image here, uncomment and replace: */
      .bg-city{ background-image:
          linear-gradient(0deg, rgba(5,8,16,.90) 0%, rgba(5,8,16,.65) 38%, rgba(5,8,16,.35) 100%),
          url('/img/logo.png');
        background-size: cover;
        background-position: center;
      }
   

    /* Gold swoosh curves (top + bottom) */
    .swoosh-top, .swoosh-bottom{
      position:absolute;
      left:-12%;
      width:130%;
      height:46%;
      border-radius: 999px;
      pointer-events:none;
      z-index:-1;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
    }

    .swoosh-top{
      top:-18%;
      background:
        radial-gradient(120% 80% at 20% 40%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, rgba(246,211,122,.0) 0%, rgba(246,211,122,.0) 35%, rgba(246,211,122,.15) 58%, rgba(215,168,62,.25) 75%, rgba(167,119,29,.35) 100%);
      clip-path: ellipse(62% 44% at 55% 40%);
      border: 2px solid rgba(246,211,122,.22);
    }

    .swoosh-bottom{
      bottom:-26%;
      background:
        radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
        linear-gradient(45deg, rgba(246,211,122,.0) 0%, rgba(246,211,122,.0) 35%, rgba(246,211,122,.18) 60%, rgba(215,168,62,.28) 78%, rgba(167,119,29,.38) 100%);
      clip-path: ellipse(68% 48% at 45% 58%);
      border: 2px solid rgba(246,211,122,.22);
    }

    /* Thin gold inner rim like the flyer */
    .rim{
      position:absolute; inset:14px;
      border-radius: 18px;
      border: 1px solid rgba(246,211,122,.20);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
      pointer-events:none;
    }

    /* Layout */
    .content{
      height:100%;
      padding: 34px 38px;
      display:flex;
      flex-direction:column;
      gap: 18px;
    }

    .topbar{
      display:flex;
      align-items:center;
      gap: 14px;
    }

    /* Logo placeholder */
    .logo{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 280px;
    }
    .logo-badge{
      width:56px; height:56px;
      border-radius: 999px;
      border: 2px solid rgba(246,211,122,.65);
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, rgba(246,211,122,.18), rgba(167,119,29,.10));
      display:grid; place-items:center;
      box-shadow: 0 12px 24px rgba(0,0,0,.35);
    }
    /* .logo-badge svg{ width:34px; height:34px; opacity:.95; } */
    .logo-badge > svg,
    .logo-badge > img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    opacity: .95;
    }
    .logo-text{
      font-family: Montserrat, Inter, sans-serif;
      letter-spacing:.02em;
      line-height:1.05;
    }
    .logo-text .small{ font-weight:700; font-size:16px; opacity:.95 }
    .logo-text .small span{ font-weight:900 }
    .logo-text .small .accent{ color: var(--gold-1); text-shadow: 0 2px 14px rgba(246,211,122,.15); }

    /* Title block */
    .headline{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap: 20px;
      margin-top: 4px;
    }
    .title{
      max-width: 66%;
    }
    .title .kicker{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      letter-spacing: .16em;
      font-size: 16px;
      text-transform: uppercase;
      opacity:.95;
    }
    .title h1{
      margin: 10px 0 0;
      font-family: Montserrat, Inter, sans-serif;
      font-size: clamp(40px, 4.7vw, 60px);
      line-height: .96;
      letter-spacing: -.02em;
      text-transform: uppercase;
      font-weight: 900;
    }
    .title h1 .gold{
      background: linear-gradient(180deg, #ffe7a9 0%, #f6d37a 18%, #d7a83e 55%, #a7771d 100%);
      -webkit-background-clip: text;
      background-clip:text;
      color:transparent;
      text-shadow: 0 10px 30px rgba(215,168,62,.18);
    }
    .title h1 .white{
      color: #f3f6ff;
      text-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    .title .subline{
      margin-top: 10px;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      font-size: clamp(20px, 2.3vw, 30px);
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(243,246,255,.9);
    }
    .title .subline .place{
      color: var(--gold-1);
      text-shadow: 0 10px 28px rgba(246,211,122,.15);
    }

    /* Right photo placeholder (award speakers) */
    .hero-photo{
      width: 280px;
      aspect-ratio: 4 / 3;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
        radial-gradient(900px 350px at 10% 10%, rgba(246,211,122,.20) 0%, rgba(0,0,0,0) 65%),
        rgba(255,255,255,.06);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
      position:relative;
      overflow:hidden;
    }
    .hero-photo::after{
      /* content:"PHOTO / AWARD MOMENT"; */
      position:absolute;
      inset:auto 14px 14px 14px;
      font-size: 12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(255,255,255,.72);
      font-weight:700;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.12);
      padding: 8px 10px;
      border-radius: 12px;
      backdrop-filter: blur(6px);
    }
    /* You can uncomment the following to use an image:
      .hero-photo{
        background-image: url('YOUR_SPEAKERS_IMAGE.jpg');
        background-size: cover;
        background-position: center;
      }
      .hero-photo::after{ display:none; }
    */

    /* Date row */
    .date-row{
      display:flex;
      align-items:center;
      gap: 14px;
      margin-top: 6px;
      padding: 12px 14px;
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      width: fit-content;
      box-shadow: 0 18px 30px rgba(0,0,0,.25);
    }
    .date-row .date{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 14px;
      color: rgba(243,246,255,.95);
    }
    .date-row .divider{
      width:1px; height: 18px;
      background: rgba(246,211,122,.45);
    }
    .date-row .venue{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      letter-spacing:.06em;
      text-transform: uppercase;
      font-size: 14px;
      color: var(--gold-1);
    }

    /* Info paragraph block */
    .info{
      margin-top: 6px;
      max-width: 70%;
      color: rgba(243,246,255,.88);
      font-size: 15px;
      line-height: 1.55;
      padding: 14px 16px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(255,255,255,.05));
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(8px);
    }
    .info b{
      color: var(--gold-1);
      font-weight: 800;
    }
    .info .muted{ color: rgba(185,194,218,.95); }

    /* Mid section: "Pourquoi participer ?" */
    .mid{
      margin-top: 10px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      align-items:stretch;
    }

    .why{
      padding: 16px 18px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.15));
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
    }
    .why h2{
      margin: 0 0 12px;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 28px;
      letter-spacing: -.02em;
      color: rgba(243,246,255,.95);
    }
    .why h2 .q{
      color: var(--gold-1);
      text-shadow: 0 12px 24px rgba(246,211,122,.16);
    }
    .bullets{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    .bullets li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      color: rgba(243,246,255,.88);
      line-height: 1.45;
      font-size: 15px;
    }
    .check{
      width: 26px; height: 26px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
                  linear-gradient(180deg, rgba(246,211,122,.25), rgba(167,119,29,.16));
      border: 1px solid rgba(246,211,122,.45);
      display:grid; place-items:center;
      margin-top: 1px;
      flex: 0 0 auto;
    }
    .check svg{ width: 15px; height: 15px; opacity:.95; }
    .bullets b{ color: var(--gold-1); font-weight: 800; }

    /* Right column: group photo + QR */
    .side{
      display:flex;
      flex-direction:column;
      gap: 14px;
    }

    .group-photo{
      flex: 1 1 auto;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
        radial-gradient(700px 320px at 12% 20%, rgba(246,211,122,.18) 0%, rgba(0,0,0,0) 65%),
        rgba(255,255,255,.06);
      box-shadow: 0 18px 40px rgba(0,0,0,.40);
      position:relative;
      overflow:hidden;
      min-height: 230px;
    }
    .group-photo::after{
      /* content:"PHOTO DE GROUPE / ÉDITION PRÉCÉDENTE"; */
      position:absolute;
      inset:auto 14px 14px 14px;
      font-size: 12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(255,255,255,.72);
      font-weight:700;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.12);
      padding: 8px 10px;
      border-radius: 12px;
      backdrop-filter: blur(6px);
    }
    /* To use a real image: */
      .group-photo{
        background-image: url('/img/cd.jpg');
        background-size: cover;
        background-position: center;
      }
      .group-photo::after{ display:none; }
   

    .qr-wrap{
      display:flex;
      gap: 20px;
      align-items:stretch;
    }

    .qr {
  width: min(180px, 40vw);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid rgba(246,211,122,.55);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
}

/* Inner QR image or canvas */
.qr img,
.qr canvas,
.qr svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

    /* .qr::before{
      content:"QR CODE";
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing:.18em;
      font-size: 12px;
      color: rgba(255,255,255,.70);
      position:absolute;
      top: 10px;
    }
    .qr-grid{
      width: 86%;
      height: 86%;
      margin-top: 10px;
      border-radius: 10px;
      background:
        linear-gradient(90deg, rgba(0,0,0,.32) 0 10%, rgba(255,255,255,.88) 10% 18%, rgba(0,0,0,.32) 18% 26%, rgba(255,255,255,.88) 26% 36%, rgba(0,0,0,.32) 36% 52%, rgba(255,255,255,.88) 52% 63%, rgba(0,0,0,.32) 63% 74%, rgba(255,255,255,.88) 74% 85%, rgba(0,0,0,.32) 85% 100%),
        linear-gradient(0deg, rgba(0,0,0,.32) 0 12%, rgba(255,255,255,.88) 12% 21%, rgba(0,0,0,.32) 21% 33%, rgba(255,255,255,.88) 33% 41%, rgba(0,0,0,.32) 41% 56%, rgba(255,255,255,.88) 56% 69%, rgba(0,0,0,.32) 69% 82%, rgba(255,255,255,.88) 82% 92%, rgba(0,0,0,.32) 92% 100%);
      opacity:.95;
      mix-blend-mode: soft-light;
      border: 1px solid rgba(0,0,0,.25);
    } */

    .cta{
      flex: 1 1 auto;
      border-radius: 18px;
      padding: 14px 14px;
      border: 1px solid rgba(246,211,122,.22);
      background:
        radial-gradient(650px 240px at 30% 30%, rgba(246,211,122,.18) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
      backdrop-filter: blur(8px);
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap: 6px;
      box-shadow: 0 18px 34px rgba(0,0,0,.32);
    }
    .cta .big{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: 20px;
      color: rgba(243,246,255,.96);
    }
    .cta .big .gold{
      background: linear-gradient(180deg, #ffe7a9 0%, #f6d37a 20%, #d7a83e 60%, #a7771d 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }
    .cta .small{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 12px;
      color: rgba(185,194,218,.95);
    }

    /* Bottom bar: contact */
    .bottom{
      margin-top:auto;
      display:flex;
      justify-content:space-between;
      gap: 18px;
      align-items:flex-end;
      padding-top: 8px;
    }

    .contact{
      display:flex;
      flex-wrap:wrap;
      gap: 12px 14px;
      align-items:center;
      padding: 12px 14px;
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
    }
    .pill{
      display:flex;
      align-items:center;
      gap: 10px;
      font-size: 13px;
      color: rgba(243,246,255,.90);
      white-space:nowrap;
    }
    .icon{
      width: 28px; height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(246,211,122,.40);
      background: linear-gradient(180deg, rgba(246,211,122,.22), rgba(167,119,29,.10));
      display:grid; place-items:center;
      box-shadow: 0 10px 18px rgba(0,0,0,.25);
    }
    /* .icon svg{ width: 15px; height: 15px; opacity:.95; } */

    .icon > svg,
    .icon > img {
        max-width: 60%;
        max-height: 60%;
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        opacity: .95;
        }


    .img-fit{ width:100%; height:100%; object-fit: cover; display:block; };

    .footer-right{
      text-align:right;
      padding: 12px 14px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.16));
      border: 1px solid rgba(246,211,122,.18);
      backdrop-filter: blur(8px);
      max-width: 36%;
    }
    .footer-right .line1{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.06em;
      font-size: 14px;
      color: rgba(243,246,255,.95);
    }
    .footer-right .line1 .gold{ color: var(--gold-1); }
    .footer-right .line2{
      margin-top: 6px;
      font-size: 12px;
      color: rgba(185,194,218,.95);
      line-height: 1.35;
    }

    /* Responsive tweaks */
    @media (max-width: 860px){
      .content{ padding: 26px 22px; }
      .headline{ flex-direction:column; }
      .title{ max-width:100%; }
      .hero-photo{ width: 100%; max-width: 520px; }
      .info{ max-width:100%; }
      .mid{ grid-template-columns: 1fr; }
      .footer-right{ max-width: 100%; text-align:left; }
      .bottom{ flex-direction:column; align-items:stretch; }
    }

    /* =========================
    MOBILE FIRST IMPROVEMENTS
    ========================= */

    @media (max-width: 640px) {
    body {
        padding: 12px;
    }

    .poster {
        width: 100%;
        aspect-ratio: auto;
        min-height: 100svh;
        border-radius: 16px;
    }

    .content {
        padding: 18px 16px;
        gap: 14px;
    }

    /* Logo */
    .logo {
        min-width: 0;
    }

    .logo-badge {
        width: 44px;
        height: 44px;
    }

    .logo-text .small {
        font-size: 14px;
    }

    /* Title */
    .title h1 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .title .subline {
        font-size: 16px;
    }

    /* Headline layout */
    .headline {
        gap: 14px;
    }

    /* Hero photo */
    .hero-photo {
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    /* Info block */
    .info {
        font-size: 14px;
        padding: 12px 14px;
    }

    /* Why section */
    .why h2 {
        font-size: 22px;
    }

    .bullets li {
        font-size: 14px;
    }

    /* Side column */
    .side {
        gap: 12px;
    }

    .group-photo {
        min-height: 180px;
    }

    /* Bottom */
    .contact {
        font-size: 12px;
    }

    .footer-right {
        padding: 10px 12px;
    }
}