/* ============================================================
   CSMT — refonte visuelle v2
   Feuille additionnelle : à charger APRÈS toutes les autres.
   Ne modifie aucun fichier existant. Pour annuler : retirer
   la balise <link> dans layouts/app.blade.php.
   ============================================================ */

/* --- 1. Palette ------------------------------------------------
   Identité rouge / noir / blanc stricte : les variables dorées du
   thème d'origine sont redéfinies en rouge, ce qui repeint d'un
   coup tout ce qui s'en sert (filets, bordures, anneau VS, boîtes
   du compte à rebours, numéros, liens).
   Deux valeurs de rouge, pour une raison de contraste :
   - #D4232B sur fond clair : 6,0:1, lisible en texte.
   - #FF4A52 sur fond noir  : 6,3:1. Le #D4232B n'y atteint que
     3,3:1, insuffisant pour du texte de taille normale.          */
.w49{
  --w49-gold:#D4232B;
  --w49-gold2:#FF4A52;
  --csmt-red:#D4232B;
  --csmt-red-ink:#B81721;
  --csmt-sand-ink:#B81721;
}

/* Éléments qui n'utilisent pas les variables. */
.w49-join-card .no{
  color:var(--csmt-red)!important;
}
.w49-join-card .link{
  color:var(--csmt-red)!important;
}
.w49-copy .k{
  color:var(--w49-gold2)!important;
}
.w49-copy .k:after{
  background:var(--csmt-red)!important;
}

/* --- 1 bis. Affectation des polices -----------------------------
   Changa pour l'affichage (titres, boutons, navigation, libellés),
   Tajawal pour le texte courant. Les deux sont déjà chargées par
   app.blade.php ; sports-fonts-v2.css se contente de les déclarer
   en @font-face sans les attribuer.
   Changa plafonne à 800 : aucune règle ci-dessous ne demande plus,
   sinon le navigateur fabrique un faux gras.                      */
body{
  font-family:'Tajawal',system-ui,sans-serif;
}

h1,h2,h3,h4,h5,
.w49 h1,.w49 h2,.w49 h3,.w49 h4,
.w49-btn,
.w49-quick strong,
.w49-heading .micro,
.w49-news-head .micro,
.w49-team h3,
.w49-box b,
.w49-bottom-note,
.w49-top-badge span,
.w49-vs-ring span,
.w49-join-card .no,
.w49-join-card .link,
.w49-sign strong,
.header .brand div,
.header nav a,
.header .button,
.header .account-link,
.topbar span,
footer h3,
.footer-brand strong{
  font-family:'Changa',system-ui,sans-serif!important;
}

p,li,td,input,textarea,select,
.w49-copy p,
.w49-quick small,
.w49 time,
.w49-side-item p{
  font-family:'Tajawal',system-ui,sans-serif!important;
}

/* --- 2. Typographie arabe --------------------------------------
   Trois défauts corrigés partout :
   - letter-spacing négatif : l'arabe est une écriture liée, le
     crénage négatif écrase les liaisons et rogne les diacritiques
     (le tanwin de نادٍ était coupé).
   - line-height sous 1 : les hampes hautes et les points bas se
     chevauchent d'une ligne à l'autre.
   - font-weight 950 : n'existe dans aucune des deux polices
     (Changa monte à 800, Tajawal à 900). Le navigateur fabriquait
     un faux gras par épaississement, d'où les contours pâteux.   */
.w49 h1,.w49 h2,.w49 h3,.w49 h4{
  letter-spacing:normal;
  font-weight:800;
}

/* !important obligatoire : csmt-red-override.css impose
   line-height:.94 / font-weight:950 / letter-spacing:-.05em en
   !important sur ce même sélecteur. Entre deux !important de même
   spécificité, c'est le dernier chargé qui gagne — d'où l'ordre
   des <link> dans app.blade.php. */
.w49-copy h1{
  padding-top:8px!important;
  font-size:clamp(38px,5.4vw,82px)!important;
  line-height:1.26!important;
  letter-spacing:normal!important;
  font-weight:800!important;
}
.w49-copy h1 span{
  color:var(--csmt-red)!important;
  font-weight:800!important;
}

.w49-heading h2,
.w49-news-head h2{
  line-height:1.35;
  font-weight:800;
}

.w49-team h3{
  line-height:1.4;
  font-weight:800;
}

.w49-meta-row,
.w49-bottom-note{
  font-weight:700;
}

/* --- 3. Le voile du hero ---------------------------------------
   92 % de noir + grayscale(1) effaçaient la photo de Touggourt.
   62 % et grayscale(.35) la laissent lisible ; le rouge ressort
   mieux dessus qu'il ne ressortait sur du gris uniforme.          */
.w49-hero:before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.32),rgba(0,0,0,.58)),
    linear-gradient(0deg,rgba(0,0,0,.72),transparent 46%),
    url('/assets/heritage.webp?v=20260921') center/cover no-repeat;
  filter:grayscale(.35) contrast(1.04);
}

/* --- 4. Les icônes de l'accès rapide ---------------------------
   home.blade.php déclare bien fill:none, mais une feuille chargée
   après l'écrase et remplit les contours : les sept icônes
   devenaient des taches rouges indistinctes. Le !important est
   volontaire — c'est une règle d'arbitrage, pas une rustine.      */
/* Le trait reste rouge — c'est le remplissage qui était le défaut,
   pas la couleur. Un contour rouge sur fond rouge très pâle donne
   des symboles lisibles ; un aplat rouge donnait des taches.     */
.w49-quick svg{
  fill:none!important;
  stroke:var(--csmt-red)!important;
  color:var(--csmt-red)!important;
  stroke-width:1.6!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  width:22px!important;
  height:22px!important;
}
.w49-quick .icon{
  background:rgba(212,35,43,.08)!important;
  border:1px solid rgba(212,35,43,.22)!important;
  box-shadow:none!important;
  color:var(--csmt-red)!important;
}
.w49-quick a{
  min-height:132px;
  gap:10px;
}
.w49-quick strong{
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}
.w49-quick small{
  line-height:1.5;
}
/* Au survol la carte passe en noir : le trait doit s'éclaircir,
   sinon le rouge foncé disparaît sur le fond sombre.             */
.w49-quick a:hover .icon{
  background:rgba(255,74,82,.14)!important;
  border-color:rgba(255,74,82,.40)!important;
}
.w49-quick a:hover svg{
  stroke:var(--w49-gold2)!important;
  color:var(--w49-gold2)!important;
}

/* --- 5. L'état vide du bloc match ------------------------------
   Quand aucune mباراة n'est programmée, le bloc gardait sa hauteur
   pleine : une dalle noire de 100 px au centre de la page pour
   annoncer qu'il n'y a rien. Ici il se réduit à un bandeau.
   Le bloc normal (avec match + compte à rebours) n'est pas touché. */
/* Classe posée en Blade plutôt que :has() : la sélection par
   :has() ne se déclenchait pas ici, et une classe explicite ne
   dépend ni du navigateur ni du nombre d'enfants.               */
.w49-match-empty{
  padding:16px 24px!important;
}
.w49-match-empty .w49-bottom-note{
  margin-top:0!important;
  font-size:15px!important;
  font-weight:600!important;
  color:#cfcfcf!important;
}

/* --- 6. Boutons du hero ----------------------------------------
   Le bouton principal passe en rouge plein : sur un fond sombre,
   deux boutons de même valeur ne hiérarchisent rien.              */
.w49-btn.dark{
  background:var(--csmt-red)!important;
  border:1px solid var(--csmt-red)!important;
  color:#fff!important;
}
.w49-btn.dark:hover{
  background:var(--csmt-red-ink)!important;
  border-color:var(--csmt-red-ink)!important;
}
.w49-btn{
  font-weight:800;
  font-size:14px;
}

/* --- 7. Ajustements de lisibilité ------------------------------ */
.w49-copy p{
  max-width:540px;
  line-height:1.95;
}
.w49-copy .k{
  font-weight:700;
}

/* --- 8. Composition du hero ------------------------------------
   Inversion des colonnes. En RTL, la colonne 1 de la grille est
   la colonne de DROITE : le texte y est calé au bord droit au
   lieu de flotter au milieu, et la signature passe à gauche.
   justify-self:end pousse la signature vers le bord gauche —
   toujours en RTL, « end » désigne la gauche.                    */
/* padding-bottom : le bloc match remonte de 58px (voir plus bas).
   Sans réserve suffisante en bas du hero, il recouvre les boutons.
   align-content:end plaque la rangée au bas du conteneur, sinon
   l'espace libre du min-height:580px la laisse flotter en haut et
   la signature se retrouve à mi-hauteur.                          */
/* grid-row:1 sur les DEUX éléments — sans quoi ils s'empilent.
   Dans le markup, .w49-sign précède .w49-copy. En lui assignant
   la colonne 2, le placement automatique pose la signature en
   ligne 1, puis renvoie le texte — qui réclame la colonne 1,
   déjà dépassée par le curseur — à la ligne 2. Deux rangées au
   lieu d'une : hero deux fois trop haut, signature isolée en
   haut. La ligne explicite règle la hauteur et l'alignement
   ensemble.                                                      */
.w49-hero,
.w49-hero-in{
  min-height:540px!important;
}
.w49-hero-in{
  grid-template-columns:1.3fr .7fr!important;
  align-items:end!important;
  align-content:end!important;
  padding:76px 0 104px!important;
}
.w49-match-wrap{
  margin-top:-58px!important;
}
.w49-copy{
  grid-column:1!important;
  grid-row:1!important;
}
.w49-sign{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:end!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:14px!important;
}

/* --- 9. Bloc match ---------------------------------------------
   Angles droits : le rayon de 34px jurait avec le reste de la
   page, qui n'a aucun coin arrondi.                              */
.w49-match{
  border-radius:0!important;
}

/* État vide : le fond blanc est posé sur l'enfant, qui couvre
   toute la surface du parent sombre. Le filet rouge se lit comme
   un signal, pas comme une absence.                              */
.w49-match-empty{
  background:#fff!important;
  padding:28px 34px!important;
  border-right:4px solid var(--csmt-red)!important;
}
.w49-match-empty .w49-bottom-note{
  margin-top:0!important;
  font-size:16px!important;
  font-weight:700!important;
  color:#6E675E!important;
  text-shadow:none!important;
}

/* --- 10. En-tête ------------------------------------------------
   Fond noir et bouton rouge, comme le modèle. L'en-tête blanc
   coupait la page en deux : une bande claire posée sur un hero
   sombre, sans transition.                                        */
.header{
  background:#0B0B0C!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
.header .brand,
.header .brand div{
  color:#FFFFFF!important;
}
.header .brand small{
  color:#9A938A!important;
}
.header nav a{
  color:#E9E5DF!important;
}
.header nav a:hover,
.header nav a.active{
  color:var(--w49-gold2)!important;
}
.header .account-link{
  color:#9A938A!important;
}
.header .account-link:hover{
  color:#FFFFFF!important;
}
.header .button{
  background:var(--csmt-red)!important;
  border-color:var(--csmt-red)!important;
  color:#FFFFFF!important;
}
.header .button:hover{
  background:var(--csmt-red-ink)!important;
  border-color:var(--csmt-red-ink)!important;
}
.header .nav-toggle{
  color:#FFFFFF!important;
  border-color:rgba(255,255,255,.3)!important;
}


@media(max-width:1100px){
  .w49-hero,
  .w49-hero-in{
    min-height:460px!important;
  }
  .w49-hero-in{
    grid-template-columns:1fr!important;
    padding:72px 0 88px!important;
  }
  .w49-copy{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .w49-sign{
    grid-column:1!important;
    grid-row:auto!important;
  }
}