/* patagoniafilm.css — externalisé du <style> inline (move verbatim + font corps alignée --aion-font) */
*{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%;background:#000;font-family:var(--aion-font, system-ui, -apple-system, sans-serif)}

    .film-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden}
    .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

    .film-overlay{
      position:absolute;inset:0;z-index:1;
      background:linear-gradient(to bottom,rgba(11,18,24,.75) 0%,transparent 42%,rgba(11,18,24,.9) 100%);
      pointer-events:none;
    }

    /* ========= TITRE EN CASCADE ========= */
    .intro{
      position:absolute;inset:0;z-index:2;
      display:flex;align-items:center;justify-content:center;
      text-align:center;color:#fff;padding:20px;
      pointer-events:none;
      /* fade-out plus tôt (6s après l'ouverture) */
      animation:introFadeOut 0.9s ease 6s forwards;
    }
    .intro.hide{opacity:0;transition:opacity .4s ease;}
    @keyframes introFadeOut{to{opacity:0}}
    .intro h1{
      font-size:clamp(50px,11vw,140px);
      font-weight:950;letter-spacing:-0.04em;line-height:0.9;
      text-shadow:0 10px 40px rgba(0,0,0,0.9);
    }
    .intro h1 span{
      display:inline-block;opacity:0;
      transform:translateY(300px) rotateX(90deg) scale(.5);
      animation:fallIn 1.5s cubic-bezier(.175,.885,.32,1.275) forwards;
    }
    @keyframes fallIn{
      0%{opacity:0;transform:translateY(300px) rotateX(90deg) scale(.5)}
      70%{opacity:1;transform:translateY(-18px) rotateX(-10deg) scale(1.08)}
      100%{opacity:1;transform:none}
    }

    /* ========= PANNEAU "ENTRER DANS LE FILM", VERSION XXL GLASS ========= */
    .entry-panel{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%) translateY(12px);
      z-index:3;
      max-width:1040px;                 /* beaucoup plus large */
      width:calc(100% - 28px);
      min-height:440px;                 /* panneau massif */
      border-radius:32px;
      color:#fff;
      text-align:center;

      background:radial-gradient(120% 160% at 10% 0%,rgba(255,255,255,.24),transparent 45%)
                 ,radial-gradient(120% 160% at 90% 100%,rgba(200,168,114,.18),transparent 55%)
                 ,linear-gradient(135deg,rgba(14,20,28,.88),rgba(11,16,24,.82));
      border:1px solid rgba(255,255,255,.32);
      box-shadow:0 40px 110px rgba(0,0,0,.9);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
      padding:40px 56px 34px;
      position:relative;
      overflow:hidden;

      opacity:0;
      pointer-events:none;
      transition:opacity .45s ease, transform .45s ease;
    }
    .entry-panel::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.16),transparent 40%);
      opacity:.5;
      pointer-events:none;
    }
    .entry-panel.show{
      opacity:1;
      pointer-events:auto;
      transform:translate(-50%,-50%);
    }
    .entry-panel.hide{
      opacity:0;
      transform:translate(-50%,-50%) translateY(14px);
      pointer-events:none;
    }
    .entry-inner{
      position:relative;
      z-index:1;
      max-width:720px;
      margin:0 auto;
    }
    .entry-kicker{
      font-size:13px;
      letter-spacing:.32em;
      text-transform:uppercase;
      opacity:.92;
      margin-bottom:14px;
      font-weight:900;
    }
    .entry-title{
      font-size:clamp(22px,3vw,30px);
      font-weight:950;
      letter-spacing:.22em;
      text-transform:uppercase;
      margin-bottom:22px;
    }
    .entry-text{
      font-size:17px;
      line-height:1.9;
      color:rgba(255,255,255,.92);
      margin:0 auto 28px;
      max-width:720px;
    }
    .entry-play{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      padding:16px 36px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.24);
      background:#c8a872;
      color:#fff;
      font-size:13px;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 26px 70px rgba(200,168,114,.45);
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .entry-play:hover{
      transform:translateY(-1px);
      background:#d6ba87;
      box-shadow:0 32px 90px rgba(200,168,114,.55);
    }
    .entry-play-icon{
      width:34px;height:34px;border-radius:999px;
      border:1px solid rgba(255,255,255,.82);
      display:grid;place-items:center;
      background:rgba(0,0,0,.25);
    }
    .entry-play-icon::before{
      content:"";
      display:block;
      width:0;height:0;
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
      border-left:12px solid #fff;
      margin-left:3px;
    }

    /* ========= CONTROLES BAS ========= */
    .controls{
      position:absolute;left:12px;right:12px;bottom:16px;
      z-index:3;display:flex;gap:12px;align-items:center;
      justify-content:flex-start;
    }
    .ctrl-btn{
      pointer-events:auto;
      display:inline-flex;align-items:center;gap:8px;
      padding:9px 14px;border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(10,14,18,.55);
      backdrop-filter:blur(10px);
      color:#fff;cursor:pointer;
      font-size:12px;letter-spacing:.12em;text-transform:uppercase;
      font-weight:800;
      transition:transform .15s ease, background .2s ease;
    }
    .ctrl-btn:hover{transform:translateY(-1px);background:rgba(10,14,18,.75)}
    .icon{width:14px;height:14px;display:inline-block;position:relative}
    .icon.pause:before,.icon.pause:after{content:"";position:absolute;top:0;bottom:0;width:4px;background:rgba(255,255,255,.9);border-radius:2px}
    .icon.pause:before{left:0}
    .icon.pause:after{right:0}
    .icon.play:before{content:"";position:absolute;left:2px;top:1px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid rgba(255,255,255,.9)}
    .icon.vol:before{content:"";position:absolute;left:0;top:4px;width:6px;height:6px;background:rgba(255,255,255,.9);clip-path:polygon(0 30%,50% 30%,100% 0,100% 100%,50% 70%,0 70%)}
    .icon.vol:after{content:"";position:absolute;left:8px;top:2px;width:6px;height:10px;border:2px solid rgba(255,255,255,.75);border-left:none;border-top-right-radius:10px;border-bottom-right-radius:10px}

    .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* ========= BADGE SPONSOR ========= */
    .sponsor-prompt{
      position:absolute;left:14px;bottom:82px;z-index:3;
      display:inline-flex;align-items:center;gap:10px;
      padding:10px 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.26);
      background:rgba(10,14,18,.7);
      backdrop-filter:blur(10px);
      color:#fff;
      font-size:12px;
      line-height:1.4;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:800;
      cursor:pointer;
      opacity:0;transform:translateY(4px);
      pointer-events:none;
      transition:opacity .5s ease, transform .5s ease;
      max-width:520px;
    }
    .sponsor-prompt.show{
      opacity:1;transform:translateY(0);pointer-events:auto;
    }
    .sponsor-dot{
      width:10px;height:10px;border-radius:999px;
      background:#c8a872;
      box-shadow:0 0 0 6px rgba(200,168,114,.22);
      flex:0 0 auto;
    }

    /* ========= MODAL SPONSOR ========= */
    .modal-overlay{
      position:fixed;inset:0;z-index:50;
      background:rgba(0,0,0,.7);
      display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;
      transition:opacity .25s ease;
    }
    .modal-overlay.show{opacity:1;pointer-events:auto}
    .modal{
      width:min(480px,90vw);
      border-radius:22px;
      background:rgba(10,14,18,.94);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 24px 80px rgba(0,0,0,.7);
      padding:26px 24px 22px;
      color:#fff;
    }
    .modal-header{
      display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
    }
    .modal-title{
      font-size:14px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
    }
    .modal-close{
      border:none;background:transparent;color:rgba(255,255,255,.7);
      cursor:pointer;font-size:20px;line-height:1;
    }
    .modal p{font-size:15px;line-height:1.7;margin:0 0 14px;color:rgba(255,255,255,.86);}
    .modal-actions{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;
    }
    .modal-btn{
      flex:1 1 auto;
      padding:11px 14px;border-radius:999px;
      border:1px solid rgba(255,255,255,.26);
      background:rgba(255,255,255,.06);
      color:#fff;font-size:12px;font-weight:800;
      text-transform:uppercase;letter-spacing:.14em;
      text-decoration:none;text-align:center;
      cursor:pointer;
      transition:background .15s ease, transform .15s ease;
    }
    .modal-btn.primary{
      background:#c8a872;border-color:rgba(200,168,114,.6);
      box-shadow:0 16px 40px rgba(200,168,114,.35);
    }
    .modal-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);}
    .modal-btn.primary:hover{background:#d6ba87;}

    @media(max-width:900px){
      .entry-panel{
        max-width:96vw;
        width:calc(100% - 18px);
        min-height:auto;
        padding:32px 20px 26px;
      }
      .entry-text{font-size:15px;}
      .controls{left:10px;right:10px;bottom:14px;}
      .sponsor-prompt{
        bottom:106px;
        font-size:11px;
        max-width:80vw;
      }
    }