/*
  Coin Paris — hub de choix (/paris). Tokens de tokens.css, composants de
  components.css, aucune couleur/taille en dur (voir CLAUDE.md). Le sombre
  est le thème par défaut.
*/
/* Transition entre pages (même origine) : fondu au lieu du flash d'un
   rechargement. L'en-tête garde son nom pour rester en place pendant le fondu.
   Ignoré par les navigateurs qui ne gèrent pas la règle — la navigation reste
   un simple lien. Même règle dans paris.css pour les deux pages cibles. */
@view-transition{navigation:auto;}
.app-topbar{view-transition-name:entete-app;}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}}

.hub-main{max-width:920px;margin:0 auto;padding:24px 20px 80px;display:flex;flex-direction:column;gap:40px;}

.hub-intro{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}

/* .eyebrow "Coin paris" — même recette que .page-head .eyebrow sur
   communaute.css (prune) et quiz-page.css (moutarde) : ici en bleu, couleur
   générique du Coin Paris. Pas de margin-bottom : .hub-intro espace déjà ses
   enfants via son gap flex, contrairement à .page-head sur les deux autres
   écrans. */
.hub-intro .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-soft);border:1.5px solid color-mix(in srgb, var(--blue) 28%, transparent);border-radius:6px;padding:4px 10px;transform:rotate(-2deg);}
.hub-intro h1{font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--ink);margin:0;}
.hub-intro p{font-size:14px;color:var(--ink-soft);max-width:520px;line-height:1.5;margin:0;}

/* Le portail (#parisHubGate, public/paris-hub.html) prend ici la place des
   billets juste en dessous d'un intro déjà visible — sa hauteur par défaut
   (.member-gate, components.css) suppose au contraire qu'il remplace TOUTE
   la page (comme sur /paris/pro ou /atelier), et centre alors sa carte dans
   60vh de vide, ce qui creuse un grand blanc entre l'intro et la carte ici.
   Pas de min-height : la carte se colle directement sous l'intro. */
#parisHubGate{min-height:0;}

/* ——— Les deux billets ———
   Un billet = un corps + un talon, deux éléments voisins que PERFORE un trait
   en pointillés. Les encoches (demi-cercles aux extrémités de la perforation,
   et au milieu du bord extérieur) sont des masques radiaux composés :
   chaque dégradé troue un coin, l'intersection les cumule. L'ombre passe par
   filter:drop-shadow, qui suit la forme découpée — box-shadow la rendrait
   rectangulaire. Thème par billet : --accent consommé par kicker et code ;
   pro = bleu (couleur générique du Coin Paris), amateur = terracotta. */
.hub-billets{display:grid;grid-template-columns:1fr 1fr;gap:36px 28px;align-items:stretch;padding-block:8px;}
@media(max-width:720px){.hub-billets{grid-template-columns:1fr;}}

.billet--pro{--accent:var(--blue);--inclinaison:-2.2deg;}
.billet--amateur{--accent:var(--terracotta);--inclinaison:1.8deg;}

.billet{
  --fond:color-mix(in srgb, var(--accent) 15%, var(--card));
  --encoche:11px;
  position:relative;display:grid;grid-template-columns:1fr 104px;min-width:0;
  text-decoration:none;color:var(--ink);
  filter:drop-shadow(0 14px 16px var(--ombre-billet));
  transform:rotate(var(--inclinaison));
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
/* Le survol n'existe qu'à la souris : sur écran tactile il resterait collé
   après un tap. Le :active donne le retour immédiat au toucher. */
@media(hover:hover){.billet:hover{transform:rotate(0) translateY(-6px) scale(1.015);}}
.billet:focus-visible{transform:rotate(0) translateY(-6px) scale(1.015);outline:2px solid var(--accent);outline-offset:6px;}
.billet:active{transform:rotate(var(--inclinaison)) scale(.98);transition-duration:.1s;}

.billet-corps,.billet-talon{background:var(--fond);padding:26px 24px;display:flex;flex-direction:column;gap:8px;min-width:0;}

.billet-corps{
  position:relative;overflow:hidden;border-radius:var(--r-md) 0 0 var(--r-md);
  -webkit-mask:radial-gradient(circle var(--encoche) at 100% 0,#0000 97%,#000),radial-gradient(circle var(--encoche) at 100% 100%,#0000 97%,#000),radial-gradient(circle var(--encoche) at 0 50%,#0000 97%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--encoche) at 100% 0,#0000 97%,#000),radial-gradient(circle var(--encoche) at 100% 100%,#0000 97%,#000),radial-gradient(circle var(--encoche) at 0 50%,#0000 97%,#000);
  mask-composite:intersect;
}
/* Reflet qui traverse le billet au survol. */
.billet-corps::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb, var(--ink) 14%, transparent) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s;pointer-events:none;}
@media(hover:hover){.billet:hover .billet-corps::after{transform:translateX(120%);}}

.billet-talon{
  align-items:center;justify-content:space-between;text-align:center;
  border-radius:0 var(--r-md) var(--r-md) 0;
  border-left:2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  transform-origin:0 0;
  -webkit-mask:radial-gradient(circle var(--encoche) at 0 0,#0000 97%,#000),radial-gradient(circle var(--encoche) at 0 100%,#0000 97%,#000),radial-gradient(circle var(--encoche) at 100% 50%,#0000 97%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--encoche) at 0 0,#0000 97%,#000),radial-gradient(circle var(--encoche) at 0 100%,#0000 97%,#000),radial-gradient(circle var(--encoche) at 100% 50%,#0000 97%,#000);
  mask-composite:intersect;
  transition:transform .28s cubic-bezier(.5,0,.8,.4),opacity .25s .05s;
}

.billet-entete{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.billet-picto{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);}
.billet-picto svg{width:24px;height:24px;}
.billet-kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.billet-titre{font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0;}
.billet-texte{font-size:14px;line-height:1.5;color:var(--ink-soft);}
.billet-pied{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
.billet-code{font-size:18px;letter-spacing:.2em;color:var(--accent);}

.billet-vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.billet-barres{display:block;width:100%;height:46px;opacity:.75;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);}

/* Déchirure : le talon part en bas à droite en pivotant, le corps recule. */
.billet--dechire{pointer-events:none;}
.billet--dechire .billet-talon{transform:translate(20px,30px) rotate(9deg);opacity:0;}
.billet--dechire .billet-corps{transform:translateX(-4px);transition:transform .2s;}

/* Mobile : les deux billets doivent tenir à l'écran sans scroller (≈ 200 px
   chacun au lieu de 280). Talon réduit au seul mot vertical, sans code-barres ;
   description sur 3 lignes ; marge basse = barre du bas + zone sûre. */
@media(max-width:720px){
  .hub-main{padding:16px 16px calc(88px + env(safe-area-inset-bottom,0px));gap:20px;}
  .hub-intro{gap:8px;}
  .hub-intro h1{font-size:24px;line-height:1.1;}
  .hub-billets{gap:16px;padding-block:4px;}
  .billet--pro{--inclinaison:-1deg;}
  .billet--amateur{--inclinaison:1deg;}
  .billet{grid-template-columns:1fr 52px;--encoche:9px;}
  .billet-corps{padding:16px;gap:6px;}
  .billet-talon{padding:16px 6px;justify-content:center;}
  .billet-barres{display:none;}
  .billet-entete{margin-bottom:2px;}
  .billet-picto{width:36px;height:36px;}
  .billet-picto svg{width:20px;height:20px;}
  .billet-titre{font-size:24px;}
  .billet-texte{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .billet-pied{padding-top:4px;}
}
@media(prefers-reduced-motion:reduce){
  .billet{transition:none;}
  .billet:focus-visible,.billet:active{transform:rotate(var(--inclinaison));}
}