/* page.css — DRONELAPSE Pages Projet (embed client)
   Variables --accent / --accent-light injectées en JS depuis la couleur
   choisie dans le builder (rouge Dronelapse #BE222F par défaut). */

.dl-room{
  --accent:#BE222F;
  --accent-light:rgba(190,34,47,.08);
  --ink:#15191c;
  --muted:#6b7480;
  --faint:#9aa2ab;
  --line:#e7e7e9;
  --surface:#ffffff;
  --surface2:#fafafa;
  --radius:14px;
  --radius-lg:18px;
  --font-ui:'Barlow',sans-serif;
  --font-display:'Montserrat',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-label:'Barlow Condensed',sans-serif;

  font-family: var(--font-ui);
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 24px;
  /* Ancre de la modale d'abonnement (position:absolute dans la colonne) */
  position: relative;
}

/* ---------- HEADER ---------- */
.dl-room__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-label);
  font-size: 11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color: var(--accent-ink, var(--accent));
  background: var(--accent-light);
  border: 1px solid var(--accent-line, transparent);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.dl-room__eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---------- TABS ---------- */
.dl-room input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

.dl-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom: 18px;
}
.dl-tabs label{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}
.dl-tabs label:hover{ border-color: var(--accent); color: var(--ink); }
.dl-tabs label .ico{ display:inline-flex; opacity:.75 }
.dl-tabs label .ico svg{ width:15px; height:15px; display:block }
.dl-tabs label.active{
  background: var(--accent-solid, var(--accent));
  border-color: var(--accent-solid, var(--accent));
  color: var(--on-accent, #fff);
  box-shadow: 0 8px 18px -8px var(--accent-shadow, rgba(190,34,47,.55));
}
.dl-tabs label.active .ico{ opacity:1; color:var(--on-accent,#fff) }

/* ---------- PANELS ---------- */
.dl-panel{
  display:none;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px -30px rgba(20,25,28,.18);
  overflow:hidden;
}
.dl-panel.active{
  display:block;
  animation: dl-fade .25s ease;
}
@keyframes dl-fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.dl-panel__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
}
.dl-panel__title{
  display:flex; align-items:center; gap:10px;
  font-size: 15.5px; font-weight:700; color: var(--ink);
}
.dl-panel__title .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background: var(--accent-light); color: var(--accent-ink, var(--accent)); border:1px solid var(--accent-line, transparent);
}
.dl-panel__title .ico svg{ width:16px; height:16px; display:block }
.dl-panel__hint{
  font-size: 12.5px; color: var(--muted); margin-top:2px;
}

.dl-frame{ position:relative; width:100%; background:transparent; }
.dl-frame--16-9{ aspect-ratio: 16/9; margin-top: 18px; } /* écart sous les onglets vidéo, comme la galerie photo (padding 18px) */
.dl-frame--3-2{ aspect-ratio: 3/2; }
.dl-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* CMP : 16:9 en paysage ; en portrait/mobile le comparateur empile ses deux
   vidéos + les contrôles, donc il lui faut beaucoup plus de hauteur, sinon il
   est tronqué (scroll interne). Valeurs généreuses pour tout afficher d'un coup. */
.dl-frame--cmp{ aspect-ratio: 16/9; }
@media (max-width: 760px){ .dl-frame--cmp{ aspect-ratio: 1/1.85; } }
@media (max-width: 520px){ .dl-frame--cmp{ aspect-ratio: 1/2.15; } }
@media (max-width: 400px){ .dl-frame--cmp{ aspect-ratio: 1/2.35; } }

/* iPhone/WebKit only: avoid an oversized blank CMP iframe while keeping Android unchanged. */
@supports (-webkit-touch-callout: none){
  @media (max-width: 760px) and (orientation: portrait){ .dl-frame--cmp{ aspect-ratio: 1/1.65; } }
  @media (max-width: 520px) and (orientation: portrait){ .dl-frame--cmp{ aspect-ratio: 1/1.82; } }
  @media (max-width: 400px) and (orientation: portrait){ .dl-frame--cmp{ aspect-ratio: 1/1.92; } }
}

/* Tikee : la galerie Tikee se comporte comme un panorama très large.
   Un cadre trop haut laisse apparaître de grandes zones blanches dans l'iframe,
   surtout dans le builder : on privilégie donc un ratio plus panoramique. */
.dl-frame--tikee{ aspect-ratio: 2048/830; overflow:hidden; background:#fff; }
.dl-frame--tikee iframe{ top:-4%; bottom:auto; height:124%; background:#fff; }
@media (max-width: 760px){
  .dl-frame--tikee{ aspect-ratio: 16/9; }
  .dl-frame--tikee iframe{ top:-3%; height:118%; }
}
@media (max-width: 520px) and (orientation: portrait){
  .dl-frame--tikee{ aspect-ratio: 1/0.92; }
  .dl-frame--tikee iframe{ top:-13%; height:126%; }
}


.dl-frame--tikee-fit-compact{ aspect-ratio:2048/780; }
.dl-frame--tikee-fit-compact iframe{ top:-7%; height:132%; }
.dl-frame--tikee-fit-comfort{ aspect-ratio:2048/900; }
.dl-frame--tikee-fit-comfort iframe{ top:-2%; height:112%; }
@media (max-width:760px){
  .dl-frame--tikee-fit-compact iframe{ top:-7%; height:126%; }
  .dl-frame--tikee-fit-comfort iframe{ top:-1%; height:108%; }
}
@media (max-width:520px) and (orientation:portrait){
  .dl-frame--tikee-fit-compact{ aspect-ratio:1/0.82; }
  .dl-frame--tikee-fit-compact iframe{ top:-17%; height:136%; }
  .dl-frame--tikee-fit-comfort{ aspect-ratio:4/5; }
  .dl-frame--tikee-fit-comfort iframe{ top:0; height:100%; }
}

/* Message page désactivée */
.dl-disabled{
  text-align:center; padding:70px 24px; color:var(--muted); font-size:15px; line-height:1.6;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}

.dl-panel__foot{
  padding: 13px 22px;
  font-size: 12px; color: var(--faint);
  display:flex; align-items:center;
  flex-wrap: wrap;
}

/* ---------- HOWTO (CMP) ---------- */
.dl-howto{ padding: 4px 22px 10px; margin-top: 20px; }
.dl-howto__title{
  font-family: var(--font-display);
  font-size: 14px; font-weight:700; color: var(--ink);
  margin-bottom: 8px;
}
.dl-howto p, .dl-howto li{ font-size: 13px; color: var(--muted); line-height:1.6; }
.dl-howto ul{ margin: 8px 0 0; padding-left: 18px; }
.dl-howto li{ margin-bottom: 3px; }
.dl-howto strong{ color: var(--ink); }

/* ---------- SOUS-NAVIGATION (plusieurs reportages photo/vidéo) ---------- */
.dl-subnav{
  display:flex; flex-wrap:wrap; gap:6px;
  padding: 14px 22px 0;
}
.dl-subnav button{
  border:1px solid var(--line); background: var(--surface);
  color: var(--muted); font-family: var(--font-ui); font-weight:600; font-size:12.5px;
  padding: 7px 14px; border-radius:999px; cursor:pointer;
  transition: all .15s ease;
}
.dl-subnav button:hover{ border-color: var(--accent); color: var(--ink); }
.dl-subnav button.active{ background: var(--accent-solid, var(--accent)); border-color: var(--accent-solid, var(--accent)); color:var(--on-accent,#fff); }

/* ---------- GALERIE PHOTOS ---------- */
.dl-gallery-wrap{ padding: 18px; }
.dl-gallery{ column-count: 3; column-gap: 10px; }
.dl-gallery img{
  width:100%; display:block; margin-bottom:10px;
  cursor: zoom-in;
  background: var(--surface2);
  break-inside: avoid;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.dl-gallery img.dl-loaded{ opacity: 1; transform: none; }
.dl-gallery-status{ padding: 30px 0; text-align:center; color: var(--muted); font-size:13px; }
@media (max-width: 900px){ .dl-gallery{ column-count: 2; } }
@media (max-width: 480px){ .dl-gallery{ column-count: 1; } }

/* ---------- LIGHTBOX ---------- */
.dl-lightbox{
  position:fixed; inset:0; z-index:999999;
  background: #000;
  display:none; align-items:center; justify-content:center;
  padding: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.dl-lightbox.open{ display:flex; opacity: 1; }
/* Lightbox ouverte : on masque la room (footer compris) qui pourrait sinon
   remonter par-dessus dans le contexte iframe-fixé. La lightbox est sœur de la
   room dans le body, donc elle n'est pas affectée. */
html.dl-lb-open [data-dl-page]{ visibility:hidden !important; }
.dl-lightbox:fullscreen, .dl-lightbox:-webkit-full-screen{ width:100vw; height:100vh; }

/* ── Plein écran universel (pont postMessage → page hôte) ────────────────────
   Quand un composant passe en plein écran, la page hôte (Hostinger) fixe NOTRE
   iframe à tout l'écran. On verrouille alors le défilement interne pour que les
   overlays (lightbox, ou iframe enfant CMP/Slider) couvrent exactement le
   viewport visible — sur iOS comme sur Android, un seul et même chemin. */
html.dl-fs-active, html.dl-fs-active body{ height:100%; overflow:hidden; }
html.dl-fs-active .dl-lightbox.open{ width:100vw; height:100dvh; }
/* Cadre CMP/Slider promu en plein écran dans la room devenue plein écran. */
.dl-frame.dl-frame--fs{
  position:fixed; inset:0; z-index:999998;
  width:100vw; height:100dvh; aspect-ratio:auto; background:#000; margin:0;
}
.dl-frame.dl-frame--fs iframe{ position:absolute; inset:0; width:100%; height:100%; }
.dl-lightbox-stage{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  cursor: default; overflow: hidden; touch-action: none;
}
.dl-lightbox.dl-ui-hidden,
.dl-lightbox.dl-ui-hidden .dl-lightbox-stage{ cursor:none; }
.dl-lightbox img{
  max-width:100%; max-height:100%; object-fit:contain;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity: .5; filter: blur(10px);
  transition: opacity .3s ease, filter .3s ease;
  cursor: zoom-in;
  transform-origin: center center;
  image-rendering: auto;
  -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none;
}
.dl-lightbox img.dl-hires-loaded{ opacity: 1; filter: blur(0); }
.dl-lightbox img.dl-zoomed{ cursor: grab; }
/* will-change UNIQUEMENT pendant le drag : sinon le navigateur garde une
   texture GPU figée à la taille d'affichage et "upscale" au zoom (flou) au lieu
   de re-rendre depuis l'original. Au repos (zoomé, pas en drag) → rendu net. */
.dl-lightbox img.dl-panning{ cursor: grabbing; transition: none; will-change: transform; }
/* Balayage tactile : photos voisines (fantômes) positionnées de part et d'autre,
   suivant le doigt le temps du geste. Héritent du dimensionnement de .dl-lightbox img. */
.dl-lightbox img.dl-swipe-ghost{
  position:absolute; inset:0; margin:auto;
  pointer-events:none; cursor:default;
  will-change:transform; z-index:1;
}

/* Indicateur discret : la qualité originale se télécharge en arrière-plan au zoom
   (l'image hi-res reste visible pendant ce temps, plus de blanc). */
.dl-lightbox.dl-loading-orig::after{
  content:"Qualité maximale…";
  position:absolute; bottom:calc(16px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
  font-family:'Barlow',sans-serif; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:#fff; background:rgba(17,17,17,.62); border:1px solid rgba(255,255,255,.18);
  padding:6px 13px; border-radius:999px; z-index:8; pointer-events:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.dl-lightbox.dl-ui-hidden img{ cursor:none; }

/* Boutons — copie exacte de .dls-fs/.dls-play/.dls-vnav (slider.css) */
.dl-lbtn{
  position:absolute; z-index:7; margin:0; padding:0; outline:none;
  font-family:inherit;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,17,17,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color .15s, opacity .22s ease, transform .22s ease;
}
.dl-lbtn:hover{ border-color: var(--accent); }
.dl-lightbox.dl-ui-hidden .dl-lbtn{
  opacity:0;
  pointer-events:none;
}
.dl-lightbox.dl-ui-hidden .dl-lightbox-close,
.dl-lightbox.dl-ui-hidden .dl-lightbox-play,
.dl-lightbox.dl-ui-hidden .dl-lightbox-dl{ transform:translateY(-8px); }
.dl-lightbox.dl-ui-hidden .dl-lightbox-nav--prev{ transform:translate(-8px,-50%); }
.dl-lightbox.dl-ui-hidden .dl-lightbox-nav--next{ transform:translate(8px,-50%); }
.dl-lbtn svg{ width:18px; height:18px; display:block; }
.dl-lightbox-play svg{ fill:rgba(255,255,255,.95); }

.dl-lightbox-close{ top:calc(12px + env(safe-area-inset-top,0px)); right:calc(12px + env(safe-area-inset-right,0px)); }
.dl-lightbox-play{ top:calc(12px + env(safe-area-inset-top,0px)); right:calc(58px + env(safe-area-inset-right,0px)); }
.dl-lightbox-nav{ top:50%; transform:translateY(-50%); }
.dl-lightbox-nav--prev{ left:calc(12px + env(safe-area-inset-left,0px)); }
.dl-lightbox-nav--next{ right:calc(12px + env(safe-area-inset-right,0px)); }
/* Tactile : le balayage remplace les flèches (gardées sur desktop souris/clavier). */
@media (hover:none) and (pointer:coarse){ .dl-lightbox-nav{ display:none; } }
.dl-lightbox-dl{ top:calc(12px + env(safe-area-inset-top,0px)); right:calc(104px + env(safe-area-inset-right,0px)); }

/* Téléchargement (album + photo) */
.dl-gallery-tools{ padding:0 18px 2px; display:flex; justify-content:flex-end; }
.dl-album-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.dl-album-btn:hover{ border-color:var(--accent); color:var(--accent-ink, var(--accent)); }
.dl-album-btn[disabled]{ opacity:.6; cursor:default; }
.dl-album-btn svg{ width:16px; height:16px; }
.dl-gallery img{ -webkit-user-drag:none; user-select:none; }
.dl-lightbox-stage img{ -webkit-user-drag:none; }

.dl-empty{ text-align:center; padding:60px 20px; color:#9aa2ab; font-family:'Barlow',sans-serif; font-size:14px; }

/* Vidéos du dossier Drive (téléchargement, section séparée sous la galerie) */
.dl-vidsec{ padding:8px 18px 22px; }
.dl-vidsec-hd{ display:flex; align-items:center; gap:8px; font-family:'Barlow',sans-serif; font-size:13px; font-weight:700; color:var(--ink); margin:6px 0 12px; }
.dl-vidsec-hd::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.dl-vidgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.dl-vidcard{ display:flex; flex-direction:column; gap:9px; }
.dl-vidthumb{ position:relative; aspect-ratio:16/9; border-radius:12px; background:#0b0d0f center/cover no-repeat; border:1px solid var(--line); overflow:hidden; }
.dl-vidplay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.55); pointer-events:none; }
.dl-vidmeta{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.dl-vidname{ font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-vidsize{ font-family:'Barlow',sans-serif; font-size:11px; color:var(--faint); flex-shrink:0; }
.dl-vidbtn{ text-decoration:none; justify-content:center; }

@media (max-width: 640px){
  .dl-tabs{ gap:6px; }
  .dl-tabs label{ padding:9px 14px; font-size:12.5px; flex:1 1 auto; justify-content:center; }
  .dl-panel__head{ flex-direction:column; }
}

/* ════════════ MODE ÉDITEUR (page.js data-edit) ════════════ */
.dl-edit-navrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px; }
.dl-tabs-edit{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }

.dl-edit-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px 8px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--muted); font-weight:600; font-size:13.5px; cursor:pointer;
  transition:all .15s ease; user-select:none;
}
.dl-edit-pill .ico{ display:inline-flex; opacity:.7 }
.dl-edit-pill .ico svg{ width:15px; height:15px; display:block }
.dl-edit-pill:hover{ border-color:var(--accent); color:var(--ink); }
.dl-edit-pill.active{ background:var(--accent-solid, var(--accent)); border-color:var(--accent-solid, var(--accent)); color:var(--on-accent,#fff); box-shadow:0 8px 18px -8px var(--accent-shadow,rgba(190,34,47,.55)); }
.dl-edit-pill.active .ico{ opacity:1 }
.dl-edit-pill.off{ opacity:.45; }
.dl-edit-pill.dragging{ opacity:.4 }
.dl-edit-pill.drag-over{ box-shadow:0 0 0 2px var(--accent) inset }
.dl-edit-pill-label{ white-space:nowrap }
.dl-edit-pill-actions{ display:inline-flex; align-items:center; gap:2px; margin-left:2px }

.dl-mini{
  width:22px; height:22px; border-radius:50%; border:0; background:transparent;
  color:currentColor; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  opacity:.6; transition:opacity .12s, background .12s; padding:0;
}
.dl-mini svg{ width:13px; height:13px; display:block }
.dl-mini:hover{ opacity:1; background:rgba(0,0,0,.12) }
.dl-edit-pill.active .dl-mini:hover{ background:rgba(255,255,255,.22) }
.dl-mini-x:hover{ color:var(--on-accent,#fff); background:var(--accent-solid, var(--accent)) }

.dl-edit-add{ position:relative; }
.dl-edit-addbtn{
  padding:8px 16px; border-radius:999px; border:1px dashed var(--line);
  background:transparent; color:var(--muted); font-family:var(--font-ui); font-weight:600; font-size:13.5px; cursor:pointer;
  transition:all .15s ease;
}
.dl-edit-addbtn:hover{ border-color:var(--accent); color:var(--accent-ink, var(--accent)); }
.dl-edit-addmenu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 18px 40px -12px rgba(20,25,28,.3); min-width:200px;
}
.dl-edit-add.open .dl-edit-addmenu{ display:block }
.dl-edit-addmenu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 11px; border:0; background:transparent; border-radius:8px; cursor:pointer;
  font-family:var(--font-ui); font-size:13px; color:var(--ink);
}
.dl-edit-addmenu button .ico{ display:inline-flex; color:var(--accent-ink, var(--accent)) }
.dl-edit-addmenu button .ico svg{ width:15px; height:15px; display:block }
.dl-edit-addmenu button:hover{ background:var(--accent-light) }

/* Champs éditables inline (titre / sous-titre) */
.dl-edit .dl-ed-text{
  outline:none; border-radius:6px; padding:1px 5px; margin:0 -5px;
  transition:background .12s, box-shadow .12s; cursor:text;
}
.dl-edit .dl-ed-text:hover{ background:var(--accent-light) }
.dl-edit .dl-ed-text:focus{ background:#fff; box-shadow:0 0 0 2px var(--accent) }
.dl-edit .dl-ed-text:empty:before{ content:attr(data-ph); color:var(--faint) }

/* Barre de sources (sous l'onglet, dans l'en-tête du panneau)
   Grille volontairement stricte : le label prend une ligne complète, puis les
   deux champs se partagent l'espace. Ça évite le chevauchement visuel entre le
   slug et le champ “URL complète” quand l'iframe est large mais compressée. */
.dl-srcbar{
  width:100%; flex:0 0 100%; min-width:0; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
  display:grid; grid-template-columns:max-content minmax(180px,1fr) minmax(220px,1fr); gap:8px 10px; align-items:center;
}
.dl-srcbar > *{ min-width:0; }
.dl-srcbar > label{ white-space:nowrap; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.dl-srcinp{
  width:100%; min-width:0; box-sizing:border-box; background:var(--surface2); border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; font-family:var(--font-mono); font-size:12px; color:var(--ink); outline:none;
}
.dl-srcinp:focus{ border-color:var(--accent); background:#fff }
.dl-srcinp-wide{ grid-column:1/-1; min-width:0 }
@media (max-width: 760px){
  .dl-srcbar{ grid-template-columns:max-content minmax(0,1fr); }
  .dl-srcbar > .dl-srcinp:not(.dl-srcinp-wide){ grid-column:2; }
}
@media (max-width: 520px){
  .dl-srcbar{ grid-template-columns:1fr; align-items:start; }
  .dl-srcbar > label,
  .dl-srcbar > .dl-srcinp:not(.dl-srcinp-wide){ grid-column:1; }
}

.dl-reports-ed{ grid-column:1/-1; width:100%; display:flex; flex-direction:column; gap:6px }
.dl-reports-ed > label{ font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.dl-report-row{ display:flex; gap:6px; align-items:center }
.dl-srcadd{
  align-self:flex-start; margin-top:2px; padding:5px 12px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:12px; cursor:pointer;
}
.dl-srcadd:hover{ border-color:var(--accent); color:var(--accent-ink, var(--accent)) }

/* Champ slug avec liste déroulante maison */
.dl-slugfield{ position:relative; flex:1 1 180px; min-width:0; }
.dl-slugfield .dl-srcinp{ width:100%; }
.dl-slugmenu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px;
  box-shadow:0 18px 40px -12px rgba(20,25,28,.3); max-height:240px; overflow:auto;
}
.dl-slugfield.open .dl-slugmenu{ display:block; }
.dl-slugmenu button{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:left;
  padding:7px 9px; border:0; background:transparent; border-radius:7px; cursor:pointer;
}
.dl-slugmenu button:hover{ background:var(--accent-light); }
.dl-slugmenu button.is-match .s-name{ color:var(--accent-ink, var(--accent)); font-weight:600; }
.dl-slugmenu .s-name{ font-size:12.5px; color:var(--ink); font-family:var(--font-ui); }
.dl-slugmenu .s-slug{ font-size:11px; color:var(--faint); font-family:var(--font-mono); }
.dl-slugempty{ padding:8px 9px; font-size:12px; color:var(--faint); }


.dl-tikee-ed{ grid-column:1/-1; width:100%; display:flex; flex-direction:column; gap:8px; }
.dl-tikee-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dl-tikee-row > label{ flex:0 0 72px; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.dl-tikee-viewers{ align-items:stretch; }
.dl-tikee-viewer{
  display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:4px 6px 4px 10px;
  border:1px solid var(--line); border-radius:999px; color:var(--muted); background:transparent;
}
.dl-tikee-viewer.on{ color:var(--ink); background:var(--surface); }
.dl-tikee-viewer.is-default{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.dl-tikee-default{ border:0; background:transparent; color:currentColor; font-family:var(--font-ui); font-size:12px; font-weight:600; cursor:pointer; padding:0; }
.dl-tikee-toggle{
  position:relative; width:28px; height:16px; border-radius:999px; border:1px solid var(--line);
  background:rgba(20,25,28,.14); cursor:pointer; padding:0;
}
.dl-tikee-toggle::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(20,25,28,.25); }
.dl-tikee-viewer.on .dl-tikee-toggle{ background:var(--accent-solid, var(--accent)); border-color:var(--accent-solid, var(--accent)); }
.dl-tikee-viewer.on .dl-tikee-toggle::after{ transform:translateX(12px); }
.dl-tikee-color{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-family:var(--font-ui); font-size:12px; }
.dl-tikee-color input{ width:28px; height:28px; border:1px solid var(--line); border-radius:7px; padding:2px; background:var(--surface); cursor:pointer; }
@media (max-width: 520px){
  .dl-tikee-row > label{ flex:0 0 100%; }
  .dl-tikee-viewer{ flex:1 1 145px; justify-content:space-between; }
}

/* Options vidéo (toggles autoplay / boucle / contrôles) */
.dl-vopts{ grid-column:1/-1; width:100%; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.dl-vopt{
  padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); font-family:var(--font-ui); font-size:12px; cursor:pointer;
  transition:all .12s;
}
.dl-vopt:hover{ border-color:var(--accent); color:var(--ink); }
.dl-vopt.on{ background:var(--accent-solid, var(--accent)); border-color:var(--accent-solid, var(--accent)); color:var(--on-accent,#fff); }
.dl-vopt-note{ font-size:11px; color:var(--faint); }

/* ── Abonnement email (bouton en-tête + modal) ─────────────────── */
.dl-eyebrow-row{ display:flex; align-items:center; justify-content:space-between; gap:10px 12px; flex-wrap:wrap; margin-bottom:4px; }
.dl-eyebrow-actions{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dl-sub-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-label); font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-accent,#fff); background: var(--accent-solid, var(--accent));
  border:1px solid var(--accent-solid, var(--accent)); border-radius:999px; padding:9px 18px; cursor:pointer;
  box-shadow: 0 4px 14px var(--accent-light), 0 2px 6px rgba(0,0,0,.14);
  transition:all .14s;
}
.dl-sub-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.dl-sub-btn.subd{ color:var(--accent-ink, var(--accent)); background:var(--accent-light); border-color:var(--accent-line, transparent); box-shadow:none; }
.dl-sub-btn.subd::after{ content:"✓"; font-weight:700; }
/* « Partager l'accès » : picto rond, discret à côté de S'abonner.
   Déclaré APRÈS .dl-sub-btn (même spécificité : la dernière règle gagne). */
/* « Partager l'accès » : STRICTEMENT le bouton S'abonner (couleurs, ombre,
   survol hérités de .dl-sub-btn), seule la FORME change — rond, sans texte.
   La hauteur suit le bouton texte voisin (align-self:stretch) : elle varie
   selon son état (37 px normal, 36 px « abonné »), une valeur figée décalait.
   Largeur fixe car aspect-ratio ne pilote pas la largeur d'un élément flex. */
.dl-sub-btn.dl-invite-btn{
  align-self:stretch; width:37px; height:auto; min-height:0;
  padding:0; gap:0; border-radius:50%; justify-content:center; flex:none;
}
.dl-sub-btn.dl-invite-btn svg{ display:block; }
/* La modale vit DANS l'iframe : position:fixed y est piégeux (iOS étire
   l'iframe à la taille du contenu → le « fixed » se cale sur toute la page,
   pas sur l'écran). On ancre donc en ABSOLU dans la colonne .dl-room :
   l'overlay couvre tout l'embed, la carte se pose juste sous le bouton
   « S'abonner » — comportement identique desktop et mobile. */
.dl-sub-overlay{
  position:absolute; inset:0; z-index:9998; background:rgba(10,12,18,.55);
  display:flex; justify-content:center; align-items:flex-start;
  padding:64px 14px 24px;
}
.dl-sub-modal{
  position:relative; width:min(430px,100%); background:#fff; border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.35); padding:26px 24px 22px;
  font-family: var(--font-ui);
}
.dl-sub-close{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border:0;
  background:transparent; color:#9aa0ae; font-size:15px; cursor:pointer; border-radius:8px;
}
.dl-sub-close:hover{ background:rgba(0,0,0,.06); color:#333; }
.dl-sub-title{ font-size:17px; font-weight:700; margin-bottom:6px; }
.dl-sub-sub{ font-size:13px; line-height:1.5; color:#5b6070; margin-bottom:16px; }
.dl-sub-form{ display:flex; gap:8px; }
.dl-sub-input{
  flex:1; min-width:0; font-size:14px; padding:10px 12px;
  border:1px solid #d8dae2; border-radius:10px; outline:none;
}
.dl-sub-input:focus{ border-color: var(--accent); }
.dl-sub-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.dl-sub-go{
  border:0; background:var(--accent-solid, var(--accent)); color:var(--on-accent,#fff); font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:10px; cursor:pointer; white-space:nowrap;
}
.dl-sub-go:disabled{ opacity:.6; cursor:default; }
.dl-sub-consent{ font-size:11px; line-height:1.5; color:#8a8f9e; margin-top:12px; }
.dl-sub-msg{ margin-top:14px; font-size:13px; line-height:1.55; border-radius:10px; padding:11px 13px; }
.dl-sub-msg.ok{ background:rgba(46,204,113,.1); color:#1e7c4d; }
/* Erreur : rouge FIXE, jamais l'accent de la page (une page à accent bleu
   afficherait un message d'erreur bleu, illisible comme signal). */
.dl-sub-msg.err{ background:rgba(192,57,43,.08); color:#c0392b; }
.dl-sub-note{ font-size:13px; line-height:1.6; color:#3c404d; background:#f4f4f6; border-radius:10px; padding:12px 14px; }
.dl-sub-other{
  margin-top:12px; border:1px solid #d8dae2; background:#fff; color:#3c404d;
  font-size:12px; padding:8px 13px; border-radius:9px; cursor:pointer;
}
/* Formulaire d'invitation (empilé) + résultats par adresse */
.dl-inv-form{ display:flex; flex-direction:column; gap:8px; }
/* flex:none indispensable : .dl-sub-input hérite de flex:1 (basis 0), qui
   écrase height/min-height → ni redimensionnement manuel ni auto-agrandissement */
.dl-inv-emails{
  flex:none; resize:vertical; height:64px; min-height:64px; max-height:240px;
  overflow-y:auto; font-family:var(--font-mono); font-size:12.5px; line-height:1.5;
}
.dl-inv-form .dl-sub-input:not(.dl-inv-emails){ flex:none; }
.dl-inv-results{ margin-top:12px; display:flex; flex-direction:column; gap:4px; }
.dl-inv-res{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:#5b6070; background:#f4f4f6; border-radius:8px; padding:7px 11px;
}
.dl-inv-res b{ font-size:11px; font-weight:600; color:#8a8f9e; white-space:nowrap; }
.dl-inv-res.ok b{ color:#1e7c4d; }

/* Mobile : bouton plus compact, formulaire empilé (email au-dessus, bouton pleine largeur) */
@media (max-width: 480px){
  .dl-sub-btn{ padding:8px 14px; font-size:12px; }
  .dl-sub-btn.dl-invite-btn{ width:34px; height:auto; padding:0; }
  .dl-sub-overlay{ padding:56px 10px 20px; }
  .dl-sub-modal{ padding:22px 18px 20px; }
  .dl-sub-form{ flex-direction:column; }
  .dl-sub-go{ width:100%; padding:11px 16px; }
}
.dl-sub-other:hover{ border-color:var(--accent); color:var(--accent-ink, var(--accent)); }