/* Éléments partagés par les 4 maquettes : lecteur vidéo, message d'information, sélecteur de maquette.
   Chaque maquette règle les couleurs avec --lecteur-accent et --lecteur-police. */

/* ---------- Lecteur vidéo ---------- */
.lecteur{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:64px 20px 56px;
  background:rgba(4,5,8,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.lecteur.ouvert{opacity:1;visibility:visible}
.lecteur-cadre{
  position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;
  transform:scale(.92);transition:transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lecteur.vertical .lecteur-cadre{width:auto;height:min(78vh,820px);aspect-ratio:9/16;max-width:100%}
.lecteur.ouvert .lecteur-cadre{transform:none}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lecteur-haut{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;color:#fff;font:500 14px/1.3 var(--lecteur-police,system-ui,sans-serif);
}
.lecteur-titre{letter-spacing:.04em;opacity:.9}
.lecteur-fermer{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;
  font-size:20px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .3s;
}
.lecteur-fermer:hover{background:var(--lecteur-accent,#fff);border-color:var(--lecteur-accent,#fff);color:#000;transform:rotate(90deg)}
.lecteur-lien{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;
  font:400 13px/1 var(--lecteur-police,system-ui,sans-serif);color:rgba(255,255,255,.65);
}
.lecteur-lien a{color:#fff;text-underline-offset:3px}

/* ---------- Message d'information (pages à venir) ---------- */
.info-maquette{
  position:fixed;left:50%;bottom:calc(var(--bas-fixe,0px) + 72px);z-index:2100;transform:translate(-50%,20px);
  max-width:min(460px,calc(100vw - 32px));padding:12px 18px;border-radius:10px;
  background:#fff;color:#111;font:500 14px/1.4 system-ui,sans-serif;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
}
.info-maquette.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Sélecteur de maquette (outil de présentation, retiré du site final) ---------- */
.choix-maquette{
  position:fixed;right:14px;bottom:calc(var(--bas-fixe,0px) + 14px);z-index:1500;
  display:flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;
  background:rgba(18,19,22,.9);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:500 12px/1 system-ui,-apple-system,sans-serif;color:#aab1bd;box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.choix-maquette span{margin-right:4px;letter-spacing:.02em}
.choix-maquette a{
  display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;
  color:#e8ebf0;text-decoration:none;transition:background .2s,color .2s;
}
.choix-maquette a:hover{background:rgba(255,255,255,.14)}
.choix-maquette a[aria-current="page"]{background:#fff;color:#111}
@media(max-width:520px){.choix-maquette span{display:none}.choix-maquette{padding-left:6px}}
@media print{.choix-maquette{display:none}}