/* PopTheDate — univers Pro (/pro/) : la papeterie d'affaires et le hall d'embarquement.
   Atmosphère seulement ; la structure et les jetons (palette Blanc papier, Gris perle, Marine, Or mat, Or texte,
   Lagon, Ardoise ; DM Serif Display, Inter, IBM Plex Mono) viennent de univers.css.

   Scène d'entrée (HTML dans vitrine/_univers/pro.mjs) : la carte d'embarquement vitrine/assets/img/pro-billet.webp
   (1536 × 1024, sans texte). La carte opaque occupe la boîte (73, 247)–(1466, 780) de l'image : .billet a les
   proportions de cette boîte (1393 × 533) et l'image y déborde de -5,24 % / -46,34 % (110,27 % × 192,12 %).
   Deux couches de la même image, découpées à la perforation (trous à x = 1138, soit 74,09 % de l'image) :
   le corps à gauche, le talon à droite. Les textes sont posés sur les trois filets de l'image (y = 470, 583, 686)
   dans la zone x = 145–1070, jamais sous la perforation. Le talon pivote de 4° autour de son pied et descend
   (12 px sur ordinateur, 8 px sur un billet de téléphone, trois fois plus petit),
   et le tampon « Admis » se frappe dans le timbre sec (double cercle centré en 1297, 508).
   Geste : le billet glisse (300 ms), le talon se détache (420 ms), le tampon tombe (180 ms) : 0,98 s, sans rebond.
   Avec « réduire les animations », l'état final (talon détaché, tampon posé) s'affiche d'emblée. */

[data-univers="pro"]{
  /* Encres posées sur le papier du billet (gris clair #DEDEDC au plus sombre) : toutes ≥ 5:1 */
  --billet-marine:#1E2A44; --billet-ardoise:#4F5563; --billet-lagon:#155E55; --billet-or:#735512;
  --perfo:rgba(30,42,68,.5);
}

/* Papier blanc épais : lignes vergées à peine visibles (2 % ; à 3 %, les lignes de chaînette formaient une grille) */
body[data-univers="pro"]{
  background-image:
    repeating-linear-gradient(90deg,rgba(30,42,68,.018) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(0deg,rgba(30,42,68,.02) 0 1px,transparent 1px 4px);
}

/* ─── Scène : la carte d'embarquement ─── */
[data-univers="pro"] .scene{background:#FDFDFC}
.billet-scene{position:absolute;inset:0}
/* Les formes marine et or du thème Corporate chaleureux : deux moitiés de la même image, l'une calée en haut,
   l'autre en bas, pour garder les quatre coins quel que soit le format de la scène (le milieu de l'image est blanc). */
.scene .billet-decor{height:50%;object-position:50% 0}
.scene .billet-decor-bas{top:50%;object-position:50% 100%}
.billet{position:absolute;z-index:2;left:50%;top:23%;width:calc(100% - 16px);max-width:640px;aspect-ratio:1393/533;translate:-50% 0;container:billet/inline-size}
.scene .billet img{inset:auto;left:-5.24%;top:-46.34%;width:110.27%;height:192.12%;max-width:none;object-fit:fill}
.billet-corps{clip-path:inset(0 25.91% 0 0)}
.billet-talon{position:absolute;inset:0;z-index:1;transform-origin:76.45% 100%;transform:translateY(var(--chute)) rotate(4deg);--chute:8px}
.billet-talon img{clip-path:inset(0 0 0 74.09%)}

/* Textes du billet : une grille calée sur les filets de l'image (bandeau, trois lignes) */
.billet-texte{position:absolute;z-index:1;left:5.17%;top:11.07%;width:66.4%;height:84.2%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:36.5% 25.2% 23% 15.3%;color:var(--billet-marine);font:400 max(11px,2.05cqw)/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.billet-texte p{grid-column:1 / -1;align-self:end;margin:0;padding-bottom:.45em}
.billet-texte .billet-titre{display:flex;flex-direction:column;gap:.3em;padding-bottom:.32em}
.billet-type{font-size:max(11px,1.9cqw);letter-spacing:.14em;color:var(--billet-ardoise)}
.billet-nom{font:400 max(17px,5.15cqw)/1.05 'DM Serif Display',Georgia,serif;letter-spacing:0;text-transform:none;color:var(--billet-marine)}
.billet-heure{grid-row:2}
.billet-salle{grid-row:3}
.billet-destination{grid-row:4;color:var(--billet-lagon)}
.billet-texte .billet-destination{align-self:center;padding-bottom:0}
.billet-porte{display:none}
/* Billet de téléphone étroit (moins de 350 px) : « Salle Horizon » s'efface, la destination prend deux lignes */
@container billet (max-width:349px){
  .billet-salle{display:none}
  .billet-texte .billet-destination{display:contents}
  .billet-dest-label{grid-row:3;grid-column:1 / -1;align-self:end;padding-bottom:.45em}
  .billet-dest-valeur{grid-row:4;grid-column:1 / -1;align-self:center}
}
/* Très petit billet (téléphone de 320 px) : le titre seul dans le bandeau */
@container billet (max-width:319px){
  .billet-type{display:none}
}
/* Grand billet (tablette et ordinateur) : l'heure et la salle sur la même ligne, la porte en pied */
@container billet (min-width:520px){
  .billet-texte{letter-spacing:.08em}
  .billet-texte .billet-heure{grid-column:1}
  .billet-texte .billet-salle{grid-row:2;grid-column:2}
  .billet-salle::before{content:'·';margin:0 .75em}
  .billet-texte .billet-destination{grid-row:3;align-self:end;padding-bottom:.45em}
  .billet-porte{display:block;grid-row:4;color:var(--billet-ardoise)}
  .billet-texte .billet-porte{align-self:center;padding-bottom:0}
}

/* Tampon « Admis », frappé dans le timbre sec du talon */
.billet-tampon{position:absolute;left:87.87%;top:48.97%;margin:0;translate:-50% -50%;rotate:-9deg;padding:.34em .3em .3em .52em;border:3px double currentColor;border-radius:3px;color:var(--billet-or);font:500 max(11px,2.45cqw)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;mix-blend-mode:multiply}

/* La valise du thème Voyageurs, posée à côté */
.scene .billet-valise{inset:auto;right:1%;bottom:7%;z-index:3;width:min(46%,250px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(30,42,68,.18))}

/* L'impératif, comme un panneau de porte d'embarquement */
[data-univers="pro"] .scene-geste{left:12px;bottom:14px;transform:none;background:var(--encre);color:#FFFFFF;letter-spacing:.16em}

/* Le geste */
@keyframes pro-glisse{from{transform:translateX(-7%)}to{transform:none}}
@keyframes pro-detache{from{transform:none}to{transform:translateY(var(--chute)) rotate(4deg)}}
@keyframes pro-tampon{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:none}}
.scene.joue .billet{animation:pro-glisse .3s var(--courbe) both}
.scene.joue .billet-talon{animation:pro-detache .42s var(--courbe) .38s both}
.scene.joue .billet-tampon{animation:pro-tampon .18s var(--courbe) .8s both}

/* ─── Rubriques : portes d'embarquement ─── */
[data-univers="pro"] .folio{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:var(--encre)}
[data-univers="pro"] .folio-num{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:2px;background:var(--encre);color:#FFFFFF;letter-spacing:.16em}
[data-univers="pro"] .porte-lagon{--accent-texte:#1F7A6F}
[data-univers="pro"] .porte-lagon .folio-num{background:#1F7A6F}
/* Entre deux portes, la perforation du billet */
[data-univers="pro"] .rubrique{position:relative}
[data-univers="pro"] .rubrique + .rubrique{border-top:0}
[data-univers="pro"] .rubrique + .rubrique::before{content:'';position:absolute;left:0;right:0;top:-3px;height:6px;background:radial-gradient(circle,var(--perfo) 1.6px,transparent 2.1px) 0 50%/12px 6px repeat-x}
/* « Ce que contient l'invitation » : un carton blanc coiffé du double filet marine et or du billet */
[data-univers="pro"] .contient{position:relative;overflow:hidden;padding-top:28px;background:#FFFFFF;border-color:#DADDE4}
[data-univers="pro"] .contient::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(var(--encre) 0 3px,transparent 3px 4px,#E9B44C 4px 7px)}
[data-univers="pro"] .porte-lagon .contient::before{background:linear-gradient(#1F7A6F 0 3px,transparent 3px 4px,#E9B44C 4px 7px)}
[data-univers="pro"] .contient li::before{content:'→'}
/* Coup de cœur : un tampon or mat, encre marine (7,55:1) */
[data-univers="pro"] .modele-cdc{background:#E9B44C;color:#1E2A44}
/* Idées de textes : des cartons blancs */
[data-univers="pro"] .idee{background:#FFFFFF;border-color:#DADDE4;border-left:3px solid var(--encre)}
[data-univers="pro"] .porte-lagon .idee{border-left-color:#1F7A6F}

/* ─── Sections communes : les rayures marine et or de la doublure Corporate chaleureux ─── */
[data-univers="pro"] :is(.invites,.etapes,.questions,.autres){position:relative;border-top:0}
[data-univers="pro"] :is(.invites,.etapes,.questions,.autres)::before{content:'';position:absolute;top:0;left:max(16px,calc((100% - 1120px) / 2));width:96px;height:12px;background:linear-gradient(var(--encre) 0 2px,transparent 2px 5px,var(--encre) 5px 7px,transparent 7px 10px,#E9B44C 10px 12px)}
[data-univers="pro"] .invites-num{display:inline-flex;align-items:center;min-height:22px;padding:0 6px;border:1px solid var(--encre);border-radius:2px;color:var(--encre)}
[data-univers="pro"] .etapes-num{font-family:var(--display);font-style:italic;font-weight:400;color:var(--accent-texte)}

/* Boutons équilibrés sur deux lignes et libellé de la barre collante sur deux lignes : règles communes de univers.css. */

/* ─── Tablette ─── */
@media (min-width:760px){
  .billet{top:14%}
  [data-univers="pro"] :is(.invites,.etapes,.questions,.autres)::before{left:max(32px,calc((100% - 1120px) / 2))}
  .scene .billet-valise{width:min(26%,190px);right:3%;bottom:2%}
  [data-univers="pro"] .scene-geste{left:32px;bottom:20px}
}
/* ─── Ordinateur : texte à gauche, grande scène à droite ─── */
@media (min-width:1024px){
  [data-univers="pro"] .couverture{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px}
  [data-univers="pro"] .scene{aspect-ratio:6/5;max-height:min(620px,calc(100svh - 160px))}
  .billet{top:16%;width:94%}
  .billet-talon{--chute:12px}
  .scene .billet-valise{width:34%;right:2%;bottom:2%}
  /* Porte A3 : ses cinq modèles sur une seule ligne */
  [data-univers="pro"] #pro .galerie{grid-template-columns:repeat(5,minmax(0,1fr));gap:44px 18px}
  [data-univers="pro"] .scene-geste{left:20px;bottom:20px}
}