/* ============================================================
   Garden TV — couche d'harmonisation, mobile first
   Fichier : public/assets/css/harmonie.css
   Charge en dernier dans views/layouts/main.php, apres app.css.

   Pourquoi des !important : app.css:1170 contient
       @media (max-width:640px){ .section-title{font-size:1.1rem !important} }
   Une classe (0,1,0) bat « main h1 » (0,0,2) a priorite egale, donc
   surcharger depuis une feuille externe sans !important est impossible.
   Les !important sont limites aux seules proprietes en conflit.

   Mesures prises sur le site en production le 21/08 avant intervention.
   ============================================================ */

:root{
  --gtv-page: 1280px;   /* largeur de contenu unique */
  --gtv-bloc: 24px;     /* rythme vertical mobile */
  --gtv-bloc-lg: 40px;  /* rythme vertical desktop */
  --gtv-marge: 16px;    /* gouttiere laterale */
  --gtv-h1: 28px;
  --gtv-h2: 20px;
  --gtv-h3: 16px;
  --gtv-rayon: 12px;
  --gtv-tap: 44px;      /* cible tactile minimale */
}

/* ---------- 1. UNE SEULE LARGEUR DE CONTENU ---------- */
/* Avant : 1024px (/sports, /sport/*), 1280px (la majorite) et 1400px
   (/channel/*) coexistaient — /channel/* cumulait meme 1024 ET 1400
   sur la meme page, donc le bloc d'integration ne s'alignait pas avec
   le contenu en dessous.
   max-w-3xl n'est PAS touche : c'est la mesure de lecture des pages
   de texte (about, privacy, dmca, contact). Une largeur de lecture
   plus courte est de la typographie, pas une incoherence. */
main .max-w-4xl.mx-auto,
main .max-w-5xl.mx-auto,
main .max-w-7xl.mx-auto,
main .max-w-\[1400px\].mx-auto{
  max-width: var(--gtv-page) !important;
}

/* Gouttiere laterale identique partout, y compris sur les pages de texte.
   Avant : 12px, alors que px-4 annonce 1rem — l'echelle d'espacement de
   ce build Tailwind est remappee (px-4 calcule 12px, py-8 calcule 16px). */
main .max-w-3xl.mx-auto,
main .max-w-4xl.mx-auto,
main .max-w-5xl.mx-auto,
main .max-w-7xl.mx-auto,
main .max-w-\[1400px\].mx-auto{
  padding-left: var(--gtv-marge) !important;
  padding-right: var(--gtv-marge) !important;
}

/* Le lecteur reste pleine largeur : ce n'est pas un conteneur de contenu. */
.player-hero, .player-hero-inner{ max-width: none !important; }

/* ---------- 2. RYTHME VERTICAL UNIQUE ---------- */
/* Avant : py-6 / py-8 / py-12 / py-16 selon la page, rendant
   16 / 24 / 48 / 48px sans logique lisible. */
main .max-w-3xl.mx-auto[class*="py-"],
main .max-w-4xl.mx-auto[class*="py-"],
main .max-w-5xl.mx-auto[class*="py-"],
main .max-w-7xl.mx-auto[class*="py-"],
main .max-w-\[1400px\].mx-auto[class*="py-"]{
  padding-top: var(--gtv-bloc) !important;
  padding-bottom: var(--gtv-bloc) !important;
}
@media (min-width: 768px){
  main .max-w-3xl.mx-auto[class*="py-"],
  main .max-w-4xl.mx-auto[class*="py-"],
  main .max-w-5xl.mx-auto[class*="py-"],
  main .max-w-7xl.mx-auto[class*="py-"],
  main .max-w-\[1400px\].mx-auto[class*="py-"]{
    padding-top: var(--gtv-bloc-lg) !important;
    padding-bottom: var(--gtv-bloc-lg) !important;
  }
}

/* ---------- 3. HIERARCHIE DES TITRES ---------- */
/* Trois defauts mesures sur mobile :
   - /epg et /countries : .section-title ramenait le h1 a 17.6px, soit
     SOUS le h2 de la meme page (18.4px) — hierarchie inversee ;
   - /sport/football : text-xl la ou les autres pages ont text-2xl ;
   - les h2 variaient de 17.6 a 18.4px selon la page. */
main h1,
main h1.section-title{
  font-size: var(--gtv-h1) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
/* .section-title s'applique aussi aux h2 (4 sur la page d'accueil) et
   les ramenait a 17.6px. Il faut donc la meme specificite de classe. */
main h2,
main h2.section-title{
  font-size: var(--gtv-h2) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}
main h3,
main h3.section-title{
  font-size: var(--gtv-h3) !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

/* La home garde une hero plus forte : c'est volontaire, pas une derive.
   app.css:1156 pose « .hero-section .text-4xl {1.6rem !important} », soit
   une specificite (0,2,0) qui bat « main .hero-section h1 » (0,1,2).
   Sans ce cran de plus, la hero (25.6px) finissait PLUS PETITE que le h1
   d'une page ordinaire (28px) — exactement l'inverse de l'intention. */
main .hero-section .text-4xl,
main .hero-section h1{ font-size: 32px !important; }

@media (min-width: 768px){
  main h1, main h1.section-title{ font-size: 36px !important; }
  main h2{ font-size: 24px !important; }
  main .hero-section h1{ font-size: 52px !important; }
}

/* ---------- 4. CIBLES TACTILES ---------- */
/* Avant : 50 cibles sous 40px sur la home, 256 sur /epg, la plus petite
   a 14px de haut. Reference retenue : 44px. */
header nav a,
header nav button,
.gtv-servers button,
.gtv-servers a,
.category-pill, .cat-pill,
[class*="chip"], [class*="pill"],
.psp-toggle,
.psp-item,
.btn-ghost,
.ge-tab,
.ge-copy,
.epg-nav,
#reportBtn{
  min-height: var(--gtv-tap);
  display: inline-flex;
  align-items: center;
}

/* Les liens empiles dans les fiches du guide (.ec-name 24px,
   .ec-country 15px, .ec-more 17px) restent sous 44px volontairement :
   il y en a trois par fiche et 2000 fiches sur /epg. Les porter a 44px
   ajouterait ~80px par fiche, soit une page trois fois plus lourde a
   faire defiler. Sur une liste dense, c'est l'ecart entre les cibles
   qui compte, pas leur hauteur brute — on donne donc de l'air. */
.ec-name{ min-height: 30px; display: inline-flex; align-items: center; }
.ec-country, .ec-more{ padding-top: 4px; padding-bottom: 4px; }

/* #reportBtn mesurait 16px de haut : le plus petit controle du site,
   et c'est celui qui fait remonter les flux morts. Il porte aussi
   ml-auto, absente du build fige (voir section 6) : il n'etait donc
   meme pas aligne a droite comme prevu. */
#reportBtn{
  justify-content: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Liens de grille : zone tactile elargie sans grossir le visuel. */
.card-grid a, .country-grid a{ position: relative; }
.card-grid a::after, .country-grid a::after{
  content: "";
  position: absolute;
  inset: -6px;
}

/* Les liens en ligne (fil d'Ariane, lien dans une fiche) restent tels
   quels : les agrandir casserait le flux du texte sans gain reel. */
.breadcrumb a, .info-row a{ min-height: 0; display: inline; }

/* ---------- 5. CARTES : UN SEUL TRAITEMENT ---------- */
/* Avant : rayons 0 / 8 / 12px et bordures 0 / 0.8 / 1px melanges. */
main article,
.gtv-embed,
.gtv-servers{
  border-radius: var(--gtv-rayon);
  border-width: 1px;
}

/* ---------- 6. CLASSES ABSENTES DU BUILD FIGE ---------- */
/* Verifie par sonde dans le navigateur : ces classes sont ecrites dans
   les vues mais ne produisent aucun style. tailwind.min.css est purge
   depuis le 18/07 et n'a pas ete regenere depuis. */
.py-10{ padding-top: 40px; padding-bottom: 40px; }
.py-24{ padding-top: 64px; padding-bottom: 64px; }
.text-base{ font-size: 16px; line-height: 24px; }
.rounded-md{ border-radius: 6px; }
.max-w-xs{ max-width: 320px; }
.max-w-xl{ max-width: 576px; }
.ml-auto{ margin-left: auto; }
.opacity-50{ opacity: .5; }

/* ---------- 7. DEBORDEMENT ---------- */
/* Le bloc de code d'integration depassait la fenetre sur mobile. */
.gtv-embed code,
.gtv-embed pre,
.gtv-embed textarea{
  max-width: 100%;
  overflow-x: auto;
  word-break: break-all;
  white-space: pre-wrap;
}

/* ---------- 8. LE PANNEAU DE FILTRES DU GUIDE TV ---------- */
/* Mesure sur un ecran de 375x812 : le panneau occupait 755px de haut, soit la
   quasi-totalite de l'ecran. Il fallait faire defiler 1 187px avant d'atteindre
   la premiere chaine.
   Le coupable : deux rangees de 14 pastilles (categories 252px, pays 356px) qui
   passaient a la ligne. Sur telephone, une rangee de filtres se fait glisser du
   doigt ; elle ne s'empile pas. Sur grand ecran l'empilement reste juste, d'ou
   la regle limitee au mobile. */
@media (max-width: 767px){
  #epg-filters > div:nth-child(3),
  #epg-filters > div:nth-child(4){
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* de l'air a droite pour que la derniere pastille ne colle pas au bord */
    padding-right: 8px;
  }
  #epg-filters > div:nth-child(3)::-webkit-scrollbar,
  #epg-filters > div:nth-child(4)::-webkit-scrollbar{ display: none; }
  #epg-filters > div:nth-child(3) > *,
  #epg-filters > div:nth-child(4) > *{ flex-shrink: 0; }
}

/* ============================================================
   8. GUIDE TV — cartes plus compactes sur mobile
   Mesure avant : 198px de haut par carte, 14px de padding, 2000 cartes
   empilees = mur visuel. La carte contient logo + nom + pays + 2 lignes
   d'EPG. On tasse le padding et on aligne mieux les elements pour retirer
   du bruit sans supprimer d'information.
   ============================================================ */
@media (max-width: 767px) {
  .epg-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  .epg-card .ec-head {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .epg-card .ec-logo {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    object-fit: contain;
    /* Fond neutre pour les logos transparents qui « percent » sur fond sombre */
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 2px;
  }
  .epg-card .ec-name {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .epg-card .ec-country {
    font-size: 10.5px !important;
    opacity: 0.75;
  }
  .epg-card .ec-row {
    font-size: 12px !important;
    padding: 3px 0 !important;
    line-height: 1.35 !important;
  }
  /* Le programme en cours prend un fond leger pour se distinguer sans
     ajouter une bordure de plus dans une pile deja dense */
  .epg-card .ec-row.is-now {
    background: rgba(34,197,94,0.08);
    margin: 0 -6px;
    padding: 3px 6px !important;
    border-radius: 4px;
  }
  .epg-card .ec-bar {
    margin-top: 6px !important;
    height: 2px !important;
  }
}

/* ============================================================
   9. GUIDE SPORT — tuiles plus denses sur mobile, avec une hierarchie
   Avant : cards de 9.5rem min-width = 2 colonnes en 375px, cards hautes,
   icone imposante, beaucoup d'espace vide. Sur mobile on veut voir
   plus de sports d'un coup.
   ============================================================ */
@media (max-width: 767px) {
  /* Grille : 3 colonnes au lieu de 2 sur mobile — les vignettes deviennent
     assez petites pour montrer les 12 premiers sports sans defiler. */
  main .grid[style*="minmax(9.5rem"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  main .grid[style*="minmax(9.5rem"] > a {
    padding: 12px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    /* On centre le contenu vertical, plus lisible sur une tuile carree */
    align-items: center;
    text-align: center;
  }
  main .grid[style*="minmax(9.5rem"] > a > span:first-child {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  main .grid[style*="minmax(9.5rem"] > a > span:first-child svg {
    width: 20px !important;
    height: 20px !important;
  }
  main .grid[style*="minmax(9.5rem"] > a > span:nth-child(2) {
    text-align: center;
  }
  main .grid[style*="minmax(9.5rem"] > a > span:nth-child(2) > span:first-child {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  main .grid[style*="minmax(9.5rem"] > a > span:nth-child(2) > span:last-child {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
  /* Le badge « live now » aussi centre, plus petit, plus present */
  main .grid[style*="minmax(9.5rem"] > a > span:last-child.inline-flex {
    justify-content: center;
    font-size: 10px !important;
    padding-top: 2px;
    border-top: 1px solid rgba(34,197,94,0.15);
    margin-top: 2px;
    padding-top: 6px;
  }
}

/* ============================================================
   9. GUIDE TV — hierarchie visuelle : ce qui est en direct
   maintenant se distingue du reste, sans changer la structure HTML.
   ============================================================ */
/* Une carte a is-now dans une de ses lignes = un programme en cours.
   On la met discretement en avant avec un liseret vert a gauche. */
.epg-card:has(.ec-row.is-now) {
  border-left: 3px solid rgba(34,197,94,0.55) !important;
  padding-left: 11px !important;
}
/* Le nom de la chaine en direct devient plus visible */
.epg-card:has(.ec-row.is-now) .ec-name {
  color: #f9fafb !important;
}
/* Le badge pays en direct : dot vert visible */
.epg-card:has(.ec-row.is-now) .ec-country::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: gtvPulse 2s ease-in-out infinite;
}
@keyframes gtvPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}

/* ============================================================
   10. GUIDE SPORT — mise en avant des 3 sports majeurs
   Sans ces regles les 27 sports sont au meme niveau, alors que
   Football (126 programmes) et Motorsport (1) meritent des tailles
   differentes. La tuile is-featured est doublement plus grande.
   ============================================================ */
main .grid[style*="minmax(9.5rem"] > a.is-featured {
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.02));
  border-color: rgba(59,130,246,0.30) !important;
}
main .grid[style*="minmax(9.5rem"] > a.is-featured > span:first-child {
  background: rgba(59,130,246,0.20) !important;
  color: #93c5fd !important;
}
/* Sur desktop, les 3 tuiles majeures s etalent sur 2 colonnes chacune */
@media (min-width: 768px) {
  main .grid[style*="minmax(9.5rem"] > a.is-featured {
    grid-column: span 2;
  }
  main .grid[style*="minmax(9.5rem"] > a.is-featured > span:first-child {
    width: 48px !important;
    height: 48px !important;
  }
  main .grid[style*="minmax(9.5rem"] > a.is-featured > span:first-child svg {
    width: 26px !important;
    height: 26px !important;
  }
}