/* AubeScreen — lecteur plein écran (billboard). Pensé pour une télé vue de
   loin : noir profond, typographie énorme, une seule couleur d'accent (celle
   du commerce). Aucune dépendance externe hors polices. */

:root{
  --accent:#e8632c;
  --noir:#08090b;
  --blanc:#f4f4f2;
  --gris:#9a9da4;
  --ligne:rgba(255,255,255,.14);
  --ui:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior:none}
body.lecteur{
  background:var(--noir);color:var(--blanc);font-family:var(--ui);
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;user-select:none;
  touch-action:manipulation;
}
/* Prise de contrôle télé : quand la souris dort, PLUS RIEN ne montre de
   curseur, peu importe l'élément survolé (boîtiers Android à air mouse). */
body.lecteur.sans-curseur, body.lecteur.sans-curseur *{cursor:none!important}
.mono{font-family:var(--mono)}

/* ---------- Barre du haut : marque + horloge ---------- */
#haut{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 3.2vw;height:9vh;min-height:58px;
  border-bottom:1px solid var(--ligne);
}
#marque{display:flex;align-items:center;gap:1.2vw;min-width:0}
#marque-logo{max-height:5.5vh;max-width:22vw;object-fit:contain}
#marque-nom{
  font-size:clamp(16px,2.4vh,34px);font-weight:700;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#horloge{display:flex;align-items:baseline;gap:1.4vw;flex:0 0 auto}
#heure{font-family:var(--mono);font-size:clamp(18px,3.4vh,46px);font-weight:500}
#heure .battement{animation:battre 2s step-end infinite}
@keyframes battre{50%{opacity:.25}}
#date{font-size:clamp(11px,1.7vh,22px);color:var(--gris)}

/* ---------- Scène : les grandes affiches ---------- */
#scene{flex:1 1 auto;position:relative;overflow:hidden;background:var(--noir)}
/* Vignettage doux : donne de la profondeur, cadre le regard vers le centre. */
#scene::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 16vh rgba(0,0,0,.42);
}
/* Barre de progression de l'affiche courante, dans la couleur du commerce. */
#progres{
  position:absolute;left:0;bottom:0;height:.55vh;min-height:3px;width:0;
  background:var(--accent);z-index:5;opacity:.9;
}

.diapo{
  position:absolute;inset:0;opacity:0;transform:scale(1.02);
  transition:opacity .9s ease,transform 1.4s ease;
  display:flex;align-items:center;justify-content:center;
}
.diapo.visible{opacity:1;transform:scale(1)}

/* Entrée en scène du contenu : chaque étage glisse et apparaît en cascade.
   Animations (et non transitions) : `backwards` couvre le délai, et la
   diapo sortante garde son texte pendant le fondu. */
@keyframes entree{from{opacity:0;transform:translateY(2.6vh)}to{opacity:1;transform:none}}
.diapo.visible .a-sous{animation:entree .65s ease .05s backwards}
.diapo.visible .a-titre{animation:entree .7s ease .18s backwards}
.diapo.visible .a-texte{animation:entree .7s ease .32s backwards}
.diapo.visible .a-qr{animation:entree .7s ease .46s backwards}

/* Affiche image : la photo occupe tout, deux modes d'ajustement.
   En mode « couvrir », lent travelling avant (effet Ken Burns). */
.diapo.image img{width:100%;height:100%;object-fit:cover;display:block}
.diapo.image.entier img{object-fit:contain}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.diapo.image.visible:not(.entier) img{animation:kenburns 28s ease-out forwards}

/* Affiche annonce : composition typographique, filet d'accent à gauche,
   fond en dégradé profond dérivé de la couleur choisie. */
.diapo.annonce{align-items:stretch;justify-content:flex-start}
.diapo.annonce,.diapo.menu{
  background:var(--fond,#101014);
  background:
    radial-gradient(130% 150% at 18% 22%,
      color-mix(in srgb, var(--fond,#101014) 86%, #ffffff 14%) 0%,
      var(--fond,#101014) 55%,
      color-mix(in srgb, var(--fond,#101014) 70%, #000000 30%) 100%);
}
.annonce-int{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:2.6vh;
  padding:6vh 3.6vw;border-left:.9vw solid var(--accent);
  margin:7vh 0 7vh 6vw;max-width:78vw;
}
/* Lueur douce derrière le filet d'accent. */
.annonce-int::before{
  content:"";position:absolute;left:-.9vw;top:8%;bottom:8%;width:.9vw;
  background:var(--accent);filter:blur(3vh);opacity:.45;pointer-events:none;
}
.annonce-int .a-sous{
  font-family:var(--mono);font-size:clamp(12px,2.2vh,30px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.annonce-int .a-titre{
  font-size:clamp(30px,8.2vh,110px);font-weight:800;line-height:1.04;
  letter-spacing:-.015em;text-wrap:balance;
}
.annonce-int .a-texte{
  font-size:clamp(14px,2.8vh,38px);color:var(--gris);line-height:1.4;max-width:46ch;
}
/* Annonce avec image : texte à gauche, visuel à droite. */
.diapo.annonce.avec-image .annonce-int{max-width:52vw}
.diapo.annonce .a-visuel{
  position:absolute;right:0;top:0;bottom:0;width:40vw;overflow:hidden;
}
.diapo.annonce .a-visuel img{width:100%;height:100%;object-fit:cover}
.diapo.annonce .a-visuel::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--fond,#101014) 0%,transparent 26%);
}

/* Affiche menu : sections et produits avec prix, points de conduite. */
.diapo.menu{align-items:stretch;justify-content:center}
.diapo.visible .m-sous{animation:entree .65s ease .05s backwards}
.diapo.visible .m-titre{animation:entree .7s ease .16s backwards}
.diapo.visible .m-section{animation:entree .7s ease .3s backwards}
.diapo.visible .m-section:nth-child(2){animation-delay:.42s}
.diapo.visible .m-section:nth-child(3){animation-delay:.54s}
.diapo.visible .m-section:nth-child(4){animation-delay:.66s}
.diapo.visible .m-section:nth-child(n+5){animation-delay:.78s}
.menu-int{
  display:flex;flex-direction:column;gap:3vh;
  padding:6vh 7vw;width:100%;
}
.menu-int .m-sous{
  font-family:var(--mono);font-size:clamp(11px,1.9vh,26px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.menu-int .m-titre{
  font-size:clamp(26px,6vh,76px);font-weight:800;letter-spacing:-.015em;line-height:1.05;
}
.m-sections{columns:2;column-gap:7vw;margin-top:1vh}
.m-section{break-inside:avoid;margin-bottom:3.4vh}
.m-sec-titre{
  font-family:var(--mono);font-size:clamp(11px,1.9vh,24px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);padding-bottom:1vh;margin-bottom:1.2vh;
  border-bottom:1px solid var(--ligne);
}
.m-item{display:flex;align-items:baseline;gap:0;padding:.75vh 0}
.m-nom{font-size:clamp(14px,2.5vh,34px);font-weight:500}
.m-pts{flex:1;border-bottom:2px dotted rgba(255,255,255,.22);margin:0 1.2vw;min-width:2vw}
.m-prix{font-family:var(--mono);font-size:clamp(14px,2.4vh,32px);color:var(--blanc)}

/* QR d'annonce : boîte blanche balayable, sous le texte. */
.a-qr{
  display:flex;align-items:center;gap:1.2vw;align-self:flex-start;
  background:#fff;border-radius:6px;padding:1.2vh 1.2vh;margin-top:1vh;
}
.a-qr img{width:12vh;height:12vh;display:block}
.a-qr span{
  font-family:var(--mono);font-size:clamp(10px,1.6vh,20px);color:#141414;
  max-width:16ch;line-height:1.35;padding-right:.6vw;
}

/* ---------- Attente (aucune affiche active) ---------- */
#attente{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:2vh;
  align-items:center;justify-content:center;text-align:center;padding:0 8vw;
}
.attente-nom{font-size:clamp(26px,6vh,72px);font-weight:800}
.attente-code{font-size:clamp(14px,2.6vh,32px);color:var(--gris)}
.attente-code .mono{color:var(--accent);letter-spacing:.2em;font-weight:500}
.attente-note{font-size:clamp(12px,2vh,24px);color:var(--gris)}

/* ---------- Bandeau du bas : nouvelles ou messages ---------- */
#bandeau{
  flex:0 0 auto;display:flex;align-items:center;height:7.5vh;min-height:48px;
  border-top:1px solid var(--ligne);overflow:hidden;
}
#bandeau-etiquette{
  flex:0 0 auto;display:flex;align-items:center;height:100%;
  padding:0 1.8vw;background:var(--accent);color:var(--noir);
  font-family:var(--mono);font-size:clamp(11px,1.8vh,22px);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
#defile{flex:1 1 auto;overflow:hidden;height:100%;display:flex;align-items:center}
#piste{
  display:inline-flex;white-space:nowrap;will-change:transform;
  animation:defiler var(--vitesse,60s) linear infinite;
}
#piste .item{
  font-size:clamp(14px,2.6vh,32px);color:var(--blanc);padding:0 2.4vw;
}
#piste .sep{color:var(--accent);font-size:clamp(14px,2.6vh,32px)}
@keyframes defiler{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Astuce plein écran ---------- */
#astuce{
  position:fixed;bottom:10vh;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.1);border:1px solid var(--ligne);
  color:var(--gris);font-size:13px;padding:8px 16px;border-radius:4px;
  backdrop-filter:blur(4px);
}

/* ---------- Mode aperçu (iframe du tableau de bord / vitrine) ---------- */
body.apercu #astuce{display:none!important}

/* ---------- Vertical 9:16 (totem, vitrine) : détection automatique ----------
   Rien à configurer : on tourne la télé, le lecteur se réagence. Les tailles
   passent en vw (en portrait, le vh devient trop généreux). */
@media (orientation: portrait){
  #haut{height:6vh;min-height:52px;padding:0 4.5vw}
  #marque-logo{max-height:3.4vh;max-width:34vw}
  #marque-nom{font-size:clamp(14px,4.2vw,30px)}
  #heure{font-size:clamp(16px,5.4vw,38px)}
  #date{font-size:clamp(10px,2.8vw,18px)}

  .annonce-int{
    margin:6vh 0 6vh 7vw;padding:4vh 5vw;border-left-width:2vw;max-width:86vw;
  }
  .annonce-int .a-titre{font-size:clamp(26px,10.5vw,96px)}
  .annonce-int .a-sous{font-size:clamp(11px,3.6vw,26px)}
  .annonce-int .a-texte{font-size:clamp(13px,4.4vw,30px)}

  /* Annonce avec visuel : l'image passe en haut, le texte dessous. */
  .diapo.annonce .a-visuel{left:0;right:0;top:0;bottom:auto;width:100vw;height:34vh}
  .diapo.annonce .a-visuel::before{
    background:linear-gradient(180deg,transparent 62%,var(--fond,#101014) 100%);
  }
  .diapo.annonce.avec-image .annonce-int{max-width:86vw;margin-top:32vh}

  .menu-int{padding:4vh 7vw}
  .menu-int .m-titre{font-size:clamp(24px,8vw,64px)}
  .menu-int .m-sous{font-size:clamp(11px,3.2vw,22px)}
  .m-sections{columns:1}
  .m-sec-titre{font-size:clamp(11px,3.2vw,22px)}
  .m-nom{font-size:clamp(14px,4.4vw,30px)}
  .m-prix{font-size:clamp(14px,4.2vw,28px)}

  .a-qr img{width:16vw;height:16vw}
  .a-qr span{font-size:clamp(10px,2.8vw,18px)}

  .attente-nom{font-size:clamp(24px,8vw,64px)}
  .attente-code{font-size:clamp(14px,4.5vw,30px)}
  .attente-note{font-size:clamp(12px,3.6vw,22px)}

  #bandeau{height:6vh;min-height:46px}
  #bandeau-etiquette{padding:0 3.4vw;font-size:clamp(10px,3vw,20px)}
  #piste .item,#piste .sep{font-size:clamp(13px,4vw,28px);padding:0 4.5vw}
  #piste .sep{padding:0}
}