/* ==========================================================================
   cinow — feuille de style des pages locales générées
   Un seul fichier, partagé par toutes les pages générées, donc mis en cache
   dès la deuxième page visitée. Il ne compte qu'une fois dans le budget des
   10 Mo, contrairement au HTML qui est dupliqué par page.
   Palette identique au site vitrine (assets/css/style.css).
   ========================================================================== */

/* Généré depuis build/exemple/local.css, qui fait foi. Seule différence :
   les chemins de polices, en ../fonts/ puisque ce fichier vit dans
   assets/css/. Ne pas éditer ici, éditer le gabarit de référence. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/inter-800.woff2) format('woff2')}

/* Jetons alignés sur ceux de l'application (front/tailwind.config.js) :
   --bg    = app-bg       #071229
   --blue  = app-blue     #1C14FF
   --surface est la seule valeur propre au site : un cran au-dessus du fond,
   pour détacher les blocs sans introduire de bordure. */
:root{
  --bg:#071229;
  --surface:#2a3347;
  --deep:#000a1f;
  --blue:#1c14ff;
  --blue-2:#3a54ff;
  --mint:#07ffa8;
  --ink:#fff;
  --ink-72:rgba(255,255,255,.72);
  --ink-52:rgba(255,255,255,.52);
  --ink-38:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.16);
  --line-2:rgba(255,255,255,.3);
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:820px;margin-inline:auto;padding:0 clamp(18px,5vw,32px) 64px}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
/* Collant en haut, avec un fond opaque : le contenu défile dessous, notamment
   la grille d'affiches, et un fond translucide le rendrait illisible. Le fond
   suffit à séparer la barre du contenu, aucune bordure n'est nécessaire.
   La barre occupe toute la largeur pour que le fond aille bord à bord, mais
   son contenu reste aligné sur la colonne de texte via .hd__in. */
.hd{position:sticky;top:0;z-index:50;background:var(--bg)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:820px;margin-inline:auto;padding:10px clamp(18px,5vw,32px)}

/* L'icône de l'application, présentée comme sur un écran d'accueil : coins
   arrondis au ratio iOS (~22 % du côté), sans wordmark à côté. Le logo porte
   déjà le nom, le répéter ferait doublon.
   La bordure est posée en box-shadow et non en border : elle se dessine ainsi
   à l'extérieur du carré, sans réduire l'image ni désaligner son rayon. */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  line-height:0;min-width:0}
.brand img{flex:0 0 auto;width:56px;height:56px;border-radius:14px;
  box-shadow:0 0 0 2px rgba(255,255,255,.2)}
/* « Séances de cinéma » plutôt que le nom de la marque : le logo porte déjà
   le nom, et ces deux mots sont ceux que l'on cherche. */
.brand span{font-size:.98rem;font-weight:600;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink)}
@media (max-width:480px){
  .brand img{width:44px;height:44px;border-radius:11px}
  .brand span{font-size:.88rem}
  .hd .gplay img{width:112px}
}

/* Badge officiel Google Play. Il ne doit être ni recoloré, ni recadré, ni
   déformé : les règles d'utilisation de la marque Google Play l'interdisent.
   Seule la taille est ajustée, en conservant le rapport d'origine 646/250. */
.gplay{display:inline-block;line-height:0}
.gplay img{width:158px;height:auto}
.hd .gplay img{width:132px}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.bc{font-size:.8rem;color:var(--ink-52);margin:14px 0 22px}
.bc a{color:var(--ink-52);text-decoration:none}
.bc a:hover{color:var(--ink)}

/* ── Titres ──────────────────────────────────────────────────────────────── */
/* Le titre et la phrase de réponse sont réunis dans un même bloc légèrement
   plus clair. C'est le passage que Google et les moteurs d'IA extraient : le
   traitement visuel le désigne comme la réponse à la question posée, avant
   même que le lecteur ait commencé à lire. */
.intro{background:var(--surface);border-radius:0;
  padding:clamp(20px,3.2vw,30px) clamp(20px,3.2vw,32px);margin:0 0 8px}

h1{font-size:clamp(1.85rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;margin:0 0 14px}
h2{font-size:clamp(1.12rem,2.4vw,1.32rem);font-weight:600;letter-spacing:-.015em;
  margin:44px 0 14px}

/* La première phrase de la page : c'est elle que Google et les moteurs d'IA
   extraient. Elle est mise en avant typographiquement, mais reste du texte
   normal dans le flux — aucun balisage particulier n'est nécessaire. */
.lead{font-size:1.06rem;line-height:1.7;color:var(--ink-72);margin:0;max-width:62ch}
.lead b{color:var(--ink);font-weight:600}

/* ── Tableau des salles ──────────────────────────────────────────────────── */
/* Les 9 lignes sont TOUJOURS dans le HTML : elles portent la longue traîne
   (« Café des Images Hérouville cinéma ») et les liens de maillage interne.
   Seul l'affichage est tronqué, par une hauteur maximale et un fondu. Le texte
   reste rendu par le navigateur, donc lu par Google et par les robots d'IA —
   contrairement à un display:none, qui lui serait déclassé.
   --tb-rows fixe le nombre de lignes visibles avant le fondu. */
.tbw{position:relative;--tb-rows:5;--tb-h:44px;
  max-height:calc(34px + var(--tb-rows) * var(--tb-h));overflow:hidden}
/* Le dégradé est ici fonctionnel : il signale une troncature. C'est la seule
   exception au « aucun dégradé » du site vitrine. */
.tbw::after{content:"";position:absolute;inset:auto 0 0;height:130px;
  background:linear-gradient(to bottom,rgba(7,18,41,0) 0%,rgba(7,18,41,.8) 45%,var(--bg) 100%);
  pointer-events:none}
/* Centrage par marges auto et non par translateX : la propriété transform doit
   rester libre pour l'état :active du bouton, sinon le scale écrase le
   décalage de centrage et le bouton saute vers la droite au clic. */
.tbw .btn{position:absolute;left:0;right:0;bottom:10px;
  margin-inline:auto;width:max-content;max-width:calc(100% - 24px);
  z-index:1;white-space:nowrap}

.tb{width:100%;border-collapse:collapse;font-size:.94rem}
.tb th{text-align:left;font-weight:600;font-size:.82rem;color:var(--ink-52);
  padding:8px 6px;border-bottom:1px solid var(--line)}
.tb td{padding:11px 6px;border-bottom:1px solid var(--line);color:var(--ink-72)}
.tb tr:last-child td{border-bottom:0}
.tb td a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.tb td a:hover{border-bottom-color:var(--mint)}
.tb .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Grille des films ────────────────────────────────────────────────────── */
/* auto-fill plutôt qu'auto-fit : les colonnes gardent leur largeur même quand
   la dernière ligne est incomplète, sinon deux films seuls s'étireraient sur
   toute la largeur. */
.fl{list-style:none;margin:0;padding:0;display:grid;gap:22px 16px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.fl li{min-width:0}

/* Les affiches viennent du CDN de TMDB : zéro octet stocké chez nous. Le ratio
   2/3 et le fond réservent la place avant chargement et évitent tout décalage
   de mise en page (Cumulative Layout Shift). */
.fl img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  border-radius:8px;background:var(--surface)}

.fl b{display:block;font-weight:600;font-size:.92rem;line-height:1.3;
  margin:10px 0 7px}

/* Étiquettes de salles. Le chiffre est le nombre de séances sur 7 jours : on
   donne le volume, jamais l'horaire, qui reste dans l'application.
   Le nom passe à la ligne plutôt que de déborder : avec white-space:nowrap,
   « UGC Ciné Cité Villeneuve d'Ascq » sortait de sa pastille et recouvrait la
   suivante. Tronquer aurait été pire — le nom de la salle et son nombre de
   séances sont précisément la donnée que la page apporte, et un rognage
   emporterait le chiffre, placé en fin d'étiquette.
   Le rayon passe de 999px à 12px : sur deux lignes, une extrémité en demi-
   cercle donne une forme molle et mange la place du texte. */
.fl p{margin:0;display:flex;flex-wrap:wrap;gap:5px}
.fl p span{display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;line-height:1.3;color:var(--ink-72);
  background:var(--surface);border:1px solid var(--line);
  padding:5px 8px;border-radius:12px;max-width:100%}
.fl p i{flex:none;font-style:normal;font-weight:600;font-size:.68rem;
  color:var(--bg);background:var(--mint);border-radius:999px;padding:2px 5px;
  font-variant-numeric:tabular-nums}

/* Même traitement que le tableau : tous les films restent dans le HTML, seule
   la hauteur d'affichage est bornée. --fl-rows fixe le nombre de rangées
   visibles avant le fondu. */
.flw{position:relative;--fl-rows:2;--fl-h:290px;
  max-height:calc(var(--fl-rows) * var(--fl-h));overflow:hidden}
.flw::after{content:"";position:absolute;inset:auto 0 0;height:170px;
  background:linear-gradient(to bottom,rgba(7,18,41,0) 0%,rgba(7,18,41,.8) 45%,var(--bg) 100%);
  pointer-events:none}
.flw .btn{position:absolute;left:0;right:0;bottom:12px;
  margin-inline:auto;width:max-content;max-width:calc(100% - 24px);
  z-index:1;white-space:nowrap}

/* ── Bouton ──────────────────────────────────────────────────────────────── */
/* Calqué sur le bouton primaire de l'application, variante md
   (front/components/ui/Button.tsx) : aplat #1C14FF, texte blanc 16 px en
   graisse 500, hauteur 56 px, rayon 18 px, active:scale(0.97).
   Le bleu n'est jamais utilisé comme couleur de texte sur fond sombre
   (contraste ~2,2:1), uniquement en aplat avec du blanc dessus. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 22px;border-radius:18px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-weight:500;font-size:16px;line-height:1.2;
  transition:background .15s,transform .15s;user-select:none}
.btn:hover{background:var(--blue-2)}
.btn:active{transform:scale(.97)}

.note{font-size:.78rem;color:var(--ink-38);margin:14px 0 0}

/* ── Appel à l'action ────────────────────────────────────────────────────── */
/* L'illustration est un fichier unique, partagé par toutes les pages générées :
   22 Ko comptés une seule fois dans le budget, et mis en cache dès la première
   page visitée. Dans le HTML elle ne coûte qu'une balise, soit ~105 octets.
   Elle reste en PNG palettisé : sur un aplat à quelques couleurs, le PNG bat
   largement le WebP (22 Ko contre 84 Ko après conversion). */
.cta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;gap:clamp(14px,3vw,26px);
  background:var(--deep);border-radius:14px;
  padding:clamp(20px,3vw,30px);margin:44px 0 0}
/* Fond transparent : aucun cadre ni arrondi, l'illustration se pose sur le
   navy du bloc. */
.cta__art{width:100%;height:auto;max-width:300px;justify-self:center}
.cta b{display:block;font-size:1.1rem;font-weight:600;line-height:1.3;
  letter-spacing:-.01em}
.cta span{display:block;font-size:.92rem;color:var(--ink-72);margin:8px 0 18px}
@media (max-width:620px){
  .cta{grid-template-columns:1fr}
  .cta__art{order:-1}
}

/* ── Communes voisines ───────────────────────────────────────────────────── */
/* Ce bloc porte le maillage interne : c'est par lui que Google circule de
   proche en proche dans le réseau des communes. */
.near{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.88rem;line-height:2}
.near b{display:block;font-weight:600;font-size:.82rem;color:var(--ink-52);
  margin-bottom:4px}
.near a{color:var(--ink-72);text-decoration:none;margin-right:14px;
  border-bottom:1px solid var(--line)}
.near a:hover{color:var(--ink)}

/* ── Pied de page ────────────────────────────────────────────────────────── */
.ft{max-width:820px;margin-inline:auto;padding:28px clamp(18px,5vw,32px) 48px;
  border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-52)}
.ft p{margin:0 0 8px}
.ft a{color:var(--ink-52);text-decoration:none}
.ft a:hover{color:var(--ink)}
.ft .small{font-size:.76rem;line-height:1.55;max-width:70ch}

@media (max-width:520px){
  .tb{font-size:.86rem}
  .tb th:nth-child(2),.tb td:nth-child(2){display:none}
  .hd__cta{padding:8px 13px;font-size:.82rem}
}