/* =====================================================================
   StatArena — feuille de style commune
   Une seule feuille pour tout le site : le visiteur la télécharge une
   fois, puis toutes les pages suivantes s'affichent sans requête.
   ===================================================================== */

/* Outfit — SIL Open Font License 1.1.
   Deux fichiers : le Regular couvre 400-500, le Bold couvre 600-800.
   Servis depuis le site : aucune requête vers Google Fonts, donc aucune
   donnée de visiteur transmise à un tiers. */
@font-face{
  font-family:Outfit; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(/polices/Outfit-400.woff2) format("woff2");
}
@font-face{
  font-family:Outfit; font-style:normal; font-weight:600 800; font-display:swap;
  src:url(/polices/Outfit-700.woff2) format("woff2");
}

:root{
  /* Bleu nuit plutôt que noir : le fond respire, et le vert ressort
     davantage sur un bleu que sur un gris très sombre. */
  --nuit:#0B1A2E;
  --nuit2:#0E2038;
  --panneau:#102542;
  --carte:#143050;
  --ligne:rgba(255,255,255,.07);
  --ligne2:rgba(255,255,255,.15);
  --texte:#F2F6FA;
  --doux:#93A6BD;
  --tres-doux:#657C97;
  --vert:#22C55E;
  --vert-clair:#4ADE80;
  --vert-sourd:rgba(34,197,94,.12);
  --atone:#3D5878;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* DÉFILEMENT PAR BLOCS
   Le calage est piloté en JavaScript, pas par `scroll-snap`. Raison mesurée :
   nos panneaux sont un peu plus hauts que l'écran, et dans ce cas la norme
   autorise le navigateur à ne caler que le bord atteint. Résultat en
   descendant, le haut du bloc suivant se calait bien ; en remontant, Chrome
   alignait le BAS du bloc — donc rien ne se calait comme attendu. Le
   `scroll-padding` reste utile aux ancres, pour ne pas passer sous l'en-tête. */
html{scroll-padding-top:84px}

body{
  margin:0; color:var(--texte);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased; line-height:1.5;
  background:var(--nuit);
  /* trame discrète : donne de la matière au fond sans image à charger */
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:58px 58px;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 34px}
.etroit{max-width:760px}

.evite{position:absolute;left:-9999px;top:0;background:var(--vert);color:#04210F;
       padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;z-index:100}
.evite:focus{left:0}
:focus-visible{outline:2px solid var(--vert-clair);outline-offset:3px;border-radius:6px}

/* ----------------------------------------------------------- EN-TÊTE */
header{position:sticky;top:0;z-index:60;background:rgba(11,26,46,.88);
       backdrop-filter:blur(18px);border-bottom:1px solid var(--ligne)}
.hrow{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.lockup{display:flex;align-items:center;gap:20px;min-width:0}
.marque{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:700;letter-spacing:-.6px}
.marque svg{width:30px;height:30px;flex:none}
.marque .v{color:var(--vert-clair)} .marque .g{color:var(--tres-doux)}
.devise{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--doux);
        font-weight:600;white-space:nowrap}
.trait{width:1px;height:26px;background:var(--ligne2);flex:none}
.socio{display:flex;align-items:center;gap:14px}
.socio a{color:var(--tres-doux);display:flex;transition:color .25s}
.socio a:hover{color:var(--vert-clair)}
.socio svg{width:19px;height:19px}
@media(max-width:1080px){.devise,.trait{display:none}}

nav{display:flex;align-items:center;gap:34px}
nav a{font-size:16px;color:var(--doux);transition:color .25s;white-space:nowrap}
nav a:hover,nav a.ici{color:var(--texte)}
nav a.ici{font-weight:600}
.bouton{display:inline-block;background:var(--vert);color:#052012;font-size:16px;font-weight:700;
        padding:14px 28px;border-radius:10px;transition:transform .2s,box-shadow .2s;border:0;cursor:pointer;
        box-shadow:0 6px 22px rgba(34,197,94,.22)}
.bouton:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(34,197,94,.3)}
.bouton.creux{background:none;color:var(--texte);border:1px solid var(--ligne2);box-shadow:none}
.bouton.creux:hover{border-color:var(--vert);transform:none}
.burger{display:none;background:none;border:0;color:var(--texte);cursor:pointer;padding:8px}
.burger svg{width:26px;height:26px;display:block}

@media(max-width:900px){
  .burger{display:block}
  nav{position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;
      gap:0;background:var(--nuit2);border-bottom:1px solid var(--ligne2);padding:8px 0;display:none}
  nav.ouvert{display:flex}
  nav a{padding:15px 34px;font-size:17px}
  nav .bouton{margin:10px 34px 16px;text-align:center}
}

/* ----------------------------------------------------------- ACCROCHE */
.hero{position:relative;padding:104px 0 118px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-380px;right:-180px;width:1000px;height:820px;
  background:radial-gradient(ellipse at center,rgba(34,197,94,.26),transparent 66%);pointer-events:none}
.hero>*{position:relative}
/* VARIANTES D'ACCROCHE
   Elles étaient écrites en style « en ligne » dans le générateur, ce qui
   les rendait plus fortes que la feuille de style : la version téléphone
   ne pouvait pas les réduire, d'où des accroches de 110 px de marge sur un
   écran de poche. Elles sont ici, donc elles obéissent aux media queries. */
.hero.rubrique{padding:66px 0 36px}     /* page Football */
.hero.secondaire{padding:64px 0 40px}   /* Qui sommes-nous, mentions, confidentialité */
.hero.plein{padding:96px 0 80px}        /* merci, 404 : la page tient en un écran */
/* Force égale à « .corps » ou « section » : il faut donc être plus précis
   que la règle qu'on annule, sinon c'est la dernière déclarée qui gagne. */
.sans-haut{padding-top:0}
.corps.sans-haut,section.sans-haut{padding-top:0}

.badge{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(34,197,94,.45);
       border-radius:999px;padding:11px 22px;font-size:13px;font-weight:700;letter-spacing:2px;
       text-transform:uppercase;color:var(--vert-clair);margin-bottom:40px}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert);
               box-shadow:0 0 0 4px rgba(34,197,94,.2)}

h1{font-size:clamp(46px,6.4vw,82px);line-height:1.02;letter-spacing:-3px;font-weight:800;margin:0}
h1 .v{color:var(--vert-clair);display:block}
.chapo{font-size:21px;line-height:1.7;color:var(--doux);margin:36px 0 0;max-width:60ch}
.chapo strong{color:var(--texte);font-weight:600}
/* Une phrase par ligne, avec un demi-interligne entre elles : assez pour
   qu'elles se lisent séparément, pas assez pour trouer l'accroche. Chaque
   phrase est un bloc, donc l'espacement survit au repli sur mobile. */
.chapo.lignes span{display:block}
.chapo.lignes span+span{margin-top:.55em}

/* FLÈCHE VERS L'INSCRIPTION
   Elle remplit le vide à droite de l'accroche et rabat le regard sur le
   bouton. Elle ne s'affiche qu'au-dessus de 1180 px : en dessous, la colonne
   de texte occupe toute la largeur et il n'y a plus rien à combler.
   Le tracé se dessine une fois, puis la flèche respire doucement.
   La boîte va du bord droit du formulaire au bord droit de la colonne, et le
   dessin garde ses proportions à l'intérieur : la pointe reste alignée sur le
   centre du bouton quelle que soit la largeur, sans calcul de position. */
.fleche-abo{position:absolute;left:600px;right:0;bottom:71px;height:220px;
  pointer-events:none;display:none;animation:fa-flot 3.4s 2.3s ease-in-out infinite}
@media(min-width:1180px){.fleche-abo{display:block}}
.fleche-abo .trace{stroke-dasharray:var(--fa-long,490);stroke-dashoffset:var(--fa-long,490);
  animation:fa-trace 1.7s .45s cubic-bezier(.4,0,.2,1) forwards}
.fleche-abo .pointe{opacity:0;transform-origin:62px 140px;
  animation:fa-pointe .5s 2.05s cubic-bezier(.34,1.4,.64,1) forwards}
@keyframes fa-trace{to{stroke-dashoffset:0}}
@keyframes fa-pointe{from{opacity:0;transform:translateX(14px) scale(.6)}
                     to{opacity:1;transform:none}}
@keyframes fa-flot{0%,100%{transform:translateX(0)}50%{transform:translateX(-12px)}}

/* Une flèche qui ondule en boucle, ce n'est pas anodin pour qui souffre de
   troubles vestibulaires : si le système demande moins d'animation, elle
   s'affiche d'un coup et ne bouge plus. */
@media(prefers-reduced-motion:reduce){
  .fleche-abo{animation:none}
  .fleche-abo .trace{stroke-dashoffset:0;animation:none}
  .fleche-abo .pointe{opacity:1;animation:none}
}

/* SÉPARATEUR ANIMÉ ENTRE LES BLOCS
   Un filet discret, parcouru en boucle par une lueur verte de gauche à
   droite. Il remplace le vide qui séparait les blocs : la page respire
   sans avoir besoin d'un demi-écran de marge. */
.separateur{position:relative;height:2px;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--ligne2) 18%,var(--ligne2) 82%,transparent)}
.separateur span{position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,var(--vert) 45%,var(--vert-clair) 55%,transparent);
  animation:filet 5.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes filet{
  0%{transform:translateX(-110%);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(330%);opacity:0}
}
/* Une lueur qui traverse la page en boucle est exactement ce que le
   réglage « moins d'animations » demande d'éviter : on la fige alors au
   centre, en filet vert continu. */
@media(prefers-reduced-motion:reduce){
  .separateur span{animation:none;left:0;width:100%;opacity:.5}
}

/* FILET SOUS LES TITRES DE SECTION
   Un trait court sous « Le terrain & Le Business », « Trois règles… »,
   « Une analyse détaillée… ». Dégradé vers la transparence : il souligne
   sans enfermer le titre dans un cadre. */
.tete>div::after,.relance .titre-sec+h2::after{
  content:"";display:block;height:2px;width:64px;border-radius:2px;margin-top:18px;
  background:linear-gradient(90deg,var(--vert),rgba(34,197,94,0))}
.relance .titre-sec+h2::after{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,rgba(34,197,94,0),var(--vert),rgba(34,197,94,0))}

/* LE CHIFFRE DE TÊTE, DANS LE TITRE DE LA CARTE
   Le gros nombre séparé faisait doublon avec le titre. Plutôt que de le
   répéter, on met en valeur celui qui est DÉJÀ dans le titre : même vert,
   plus gros, et la phrase continue normalement derrière. Un seul chiffre,
   qui reste lisible d'un coup d'œil. */
.carte h3 .cn{color:var(--vert-clair);font-size:1.42em;font-weight:800;
  letter-spacing:-1.4px;line-height:1;
  /* le resserrement des lettres mange aussi l'espace qui suit le chiffre :
     on le rend, sinon on lit « 208millions ». */
  padding-right:.14em}

/* ----------------------------------------------------------- FORMULAIRE */
/* 42 px avant le champ, c'était le vide d'une maquette large. Le formulaire
   suit la phrase qui le justifie : il doit rester à portée du regard. */
.form{display:flex;gap:14px;margin-top:30px;max-width:560px;flex-wrap:wrap}
.form input[type=email]{
  flex:1;min-width:230px;background:rgba(255,255,255,.045);border:1px solid var(--ligne2);
  color:var(--texte);border-radius:12px;padding:19px 22px;font:inherit;font-size:17px;
  transition:border-color .25s,background .25s
}
.form input::placeholder{color:var(--tres-doux)}
.form input:focus{outline:none;border-color:var(--vert);background:rgba(255,255,255,.07)}
.form button{background:var(--vert);color:#052012;border:0;border-radius:12px;padding:19px 34px;
             font:inherit;font-weight:700;font-size:17px;cursor:pointer;white-space:nowrap;
             transition:transform .2s,box-shadow .2s;box-shadow:0 6px 22px rgba(34,197,94,.22)}
.form button:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(34,197,94,.3)}

/* 30 px d'écart valaient aussi entre les LIGNES une fois les garanties
   repliées : sur un téléphone, trois lignes séparées par un blanc énorme.
   Écart horizontal généreux, vertical serré. */
.atouts{display:flex;gap:9px 26px;flex-wrap:wrap;margin-top:20px;font-size:15.5px;
        color:var(--doux)}
.atouts span{display:flex;align-items:center;gap:9px}
.atouts span::before{content:"✓";color:var(--vert-clair);font-weight:700}
.fine{font-size:13.5px;color:var(--tres-doux);margin-top:16px;max-width:56ch;line-height:1.6}
/* chaque mention sur sa ligne : trois informations distinctes, pas un pavé */
.fine span{display:block}
.fine a{color:var(--doux);text-decoration:underline;text-underline-offset:2px}
.msg{font-size:15px;margin-top:14px;display:none}
.msg.vu{display:block}
.msg.ok{color:var(--vert-clair)}
.msg.ko{color:#F87171}

/* ----------------------------------------------------------- PANNEAUX */
section{padding:56px 0}
.panneau{background:var(--nuit2);border:1px solid var(--ligne);border-radius:26px;
         padding:52px 60px}
@media(max-width:760px){.panneau{padding:40px 26px;border-radius:20px}}
/* DEUX COLONNES, ET QUI LE RESTENT.
   En flex, la largeur des colonnes dépendait de la longueur du texte : le
   titre « Trois règles, et elles ne bougent pas. » mesurait 586 px, le
   paragraphe 468, l'ensemble dépassait les 1050 px disponibles — et tout
   basculait l'un sous l'autre, calé à gauche, la moitié droite vide. En
   grille, les colonnes sont décidées d'avance et le texte s'y plie.
   Alignement par le HAUT : le libellé de section doit se lire en premier,
   à hauteur de la première ligne du texte d'intro. */
.tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
      gap:24px 44px;align-items:start}
@media(max-width:900px){.tete{grid-template-columns:1fr}}
/* 16 px et non 13 : à cette taille l'interlettrage se resserre légèrement,
   sinon le mot s'étire et perd sa densité. Les trois règles qui fixent ce
   libellé (ici, dans .tete, dans .relance) donnent la même valeur — la
   moindre divergence laisserait un bloc plus petit que les autres. */
.titre-sec,.sur{font-size:16px;letter-spacing:2.2px;text-transform:uppercase;color:var(--vert-clair);
           font-weight:700;margin:0 0 20px}
h2{font-size:clamp(30px,3.8vw,44px);line-height:1.14;letter-spacing:-1.6px;font-weight:700;
   margin:0;max-width:20ch}
.tete p{font-size:17px;color:var(--doux);margin:0;max-width:42ch}
/* … mais pas le libellé, qui est aussi un <p> : sans cette ligne, la règle
   ci-dessus le repeignait en gris et le grossissait à 17 px. */
.tete .titre-sec{font-size:16px;color:var(--vert-clair);margin-bottom:18px}

/* LES DEUX THÈMES, dans le titre de section.
   Chacun reprend la couleur de son étiquette sur les cartes — vert pour le
   terrain, bleu pour le business — pour qu'on fasse le lien sans y penser. */
.themes{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0;max-width:none}
/* L'esperluette reste collée au PREMIER thème : sur un téléphone, la ligne
   se coupe entre les deux thèmes et se lit « Le terrain & » / « Le Business ».
   Jamais un « & » seul en début de ligne. */
.themes .paire{display:inline-flex;align-items:baseline;gap:18px}

/* Annonce au-dessus de la grille : dit ce qu'on regarde, les dernières
   parutions, et non une sélection éditoriale. */
.annonce{margin:18px 0 0;font-size:15px;color:var(--tres-doux);
  display:flex;align-items:center;gap:12px}
.annonce::before{content:"";width:26px;height:2px;background:var(--vert);flex:none;border-radius:2px}
/* la grille suit l'annonce de près : les 48 px prévus pour un titre seul
   faisaient un trou une fois la phrase intercalée */
.annonce+.grille{margin-top:22px}

/* Accès à la liste complète : centré sous la grille, en vert plein, avec
   une flèche qui avance au survol. */
.vers-liste{margin-top:32px;text-align:center}
.bouton.fort{font-size:17px;padding:17px 34px;display:inline-flex;align-items:center;gap:12px}
.bouton.fort span{transition:transform .2s}
.bouton.fort:hover span{transform:translateX(4px)}
.themes a{border-bottom:2px solid transparent;transition:border-color .2s}
.themes a:hover{border-bottom-color:currentColor}
.themes .t-terrain{color:var(--vert-clair)}
.themes .t-business{color:#7FB6E4}
.themes .et{color:var(--tres-doux);font-weight:400;letter-spacing:-1px}
.intro{font-size:18px;line-height:1.72;color:var(--doux);margin:24px 0 0;max-width:64ch}

/* Le socle documentaire, entre l'intro et les trois règles : encadré
   discret, un liseré vert à gauche, pour qu'il se lise comme un fait et
   non comme un argument de vente. */
.socle{margin:34px 0 0;padding:22px 26px;border-left:3px solid var(--vert);
  background:rgba(34,197,94,.06);border-radius:0 14px 14px 0;
  font-size:17px;line-height:1.65;color:var(--doux);max-width:96ch}
.socle strong{color:var(--texte);font-weight:600}
.socle .s-cle{display:block;font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--vert-clair);font-weight:700;margin-bottom:8px}
.socle+.methode{margin-top:40px}

/* méthode */
.methode{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:46px}
.m-item{border-top:2px solid var(--ligne2);padding-top:22px}
/* Numéro et titre sur une seule ligne : le titre porte, le numéro repère.
   La phrase récupère ensuite toute la largeur de la colonne. */
.m-tete{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.m-num{font-size:15px;color:var(--vert-clair);font-weight:800;letter-spacing:1.6px;flex:none}
.m-item h3{font-size:23px;font-weight:700;margin:0;letter-spacing:-.5px;color:var(--texte)}
.m-item p{font-size:16px;line-height:1.72;color:var(--doux);margin:0}
.m-item p strong{color:var(--texte);font-weight:600}
@media(max-width:860px){.methode{grid-template-columns:1fr;gap:34px}}

/* couverture */
.compets{display:flex;gap:13px;flex-wrap:wrap;margin-top:38px}
.compet{display:flex;align-items:center;gap:12px;border:1px solid var(--ligne);border-radius:10px;
        padding:13px 18px;font-size:15.5px;color:var(--doux);background:rgba(255,255,255,.02)}
.dr{width:26px;height:17px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.dr-fr{background:linear-gradient(90deg,#0055A4 33.3%,#F5F5F5 33.3% 66.6%,#EF4135 66.6%)}
.dr-es{background:linear-gradient(180deg,#AA151B 25%,#F1BF00 25% 75%,#AA151B 75%)}
.dr-it{background:linear-gradient(90deg,#008C45 33.3%,#F4F5F0 33.3% 66.6%,#CD212A 66.6%)}
.dr-de{background:linear-gradient(180deg,#111 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
.dr-en{background:linear-gradient(90deg,transparent 40%,#CE1124 40% 60%,transparent 60%),
                 linear-gradient(0deg,transparent 38%,#CE1124 38% 62%,transparent 62%),#F5F5F5}
.dr-eu{background:#003399;position:relative}
.dr-eu::after{content:"";position:absolute;inset:3px 6px;border:1.4px dotted #FFCC00;border-radius:50%}

/* ----------------------------------------------------------- ARTICLES */
/* min() plutôt que 320px sec : sur un écran de 360 px, une colonne de 320
   plus les marges dépassait, et les cartes sortaient du panneau. */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
        gap:24px;margin-top:48px}
.carte{display:flex;flex-direction:column;background:var(--panneau);border:1px solid var(--ligne);
       border-radius:18px;padding:30px 30px 26px;transition:border-color .3s,transform .3s}
.carte:hover{border-color:rgba(34,197,94,.45);transform:translateY(-3px)}
.carte .cn{font-size:54px;font-weight:800;letter-spacing:-2.6px;color:var(--vert-clair);margin:18px 0 2px;line-height:1}
.carte h3{font-size:21px;font-weight:700;letter-spacing:-.5px;margin:10px 0 0;line-height:1.32}
.carte p{font-size:15.5px;line-height:1.66;color:var(--doux);margin:12px 0 0;flex:1}
.carte .bas{display:flex;align-items:center;justify-content:space-between;margin-top:24px;
            padding-top:18px;border-top:1px solid var(--ligne);font-size:13.5px;color:var(--tres-doux)}
.carte .lire{color:var(--vert-clair);font-weight:700}

/* ----------------------------------------------------------- ARTICLE */
/* Le padding horizontal vient de .wrap ; ne le remettre qu'en vertical ici
   effaçait les 34 px latéraux et collait tout le texte au bord de l'écran.
   Invisible sur grand écran, où la colonne est de toute façon centrée. */
/* La marge du bas était une cale de 80 px posée en dur dans le HTML :
   invisible depuis la feuille de style, donc impossible à réduire sur
   téléphone. Elle est ici, et elle suit les media queries. */
.art{padding:56px 34px 48px}
.fil{font-size:14px;color:var(--tres-doux);margin-bottom:28px}
.fil a{color:var(--doux)} .fil a:hover{color:var(--texte)}
.art h1{font-size:clamp(34px,4.6vw,52px);max-width:22ch;letter-spacing:-2px;line-height:1.08}
.meta{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--tres-doux);
      margin-top:26px;padding-bottom:28px;border-bottom:1px solid var(--ligne)}
.meta .comp{color:var(--vert-clair);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;font-size:12px}
.corps{font-size:18px;line-height:1.8;color:#D5DFEB;max-width:68ch;padding:36px 0 0}
.corps p{margin:0 0 22px}
.corps strong{color:#fff;font-weight:600}
.corps h2{font-size:29px;letter-spacing:-1px;margin:48px 0 20px;max-width:26ch}
.corps h3{font-size:22px;font-weight:700;letter-spacing:-.5px;margin:36px 0 14px}
.corps a{color:var(--vert-clair);text-decoration:underline;text-underline-offset:3px}
.corps ul{margin:0 0 22px;padding-left:22px}
.corps li{margin-bottom:10px}

.exergue{background:linear-gradient(160deg,var(--carte),var(--panneau));border:1px solid var(--ligne2);
         border-radius:18px;padding:32px 34px;margin:36px 0;position:relative;overflow:hidden}
.exergue::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--vert)}
.exergue .n{font-size:62px;font-weight:800;color:var(--vert-clair);letter-spacing:-3px;line-height:1}
.exergue p{margin:14px 0 0;font-size:17.5px;color:var(--texte)}

/* BARRES DE GRAPHIQUE (HTML, pas SVG)
   La piste s'étire avec la colonne, le texte garde sa taille : lisible de
   320 à 1400 px de large, sans jamais rien faire glisser. */
.barres{margin:22px 0 4px}
.gbar{display:grid;grid-template-columns:1fr auto;gap:7px 16px;align-items:center;
      margin-bottom:18px}
.gbar-lab{grid-column:1/-1;font-size:14.5px;font-weight:600;color:var(--doux);
          line-height:1.35}
.gbar-piste{height:26px;background:rgba(255,255,255,.05);border-radius:6px}
.gbar-piste span{display:block;height:100%;background:var(--atone);border-radius:6px}
.gbar-val{font-size:17px;font-weight:700;color:var(--doux);white-space:nowrap}
.gbar.vif .gbar-lab,.gbar.vif .gbar-val{color:var(--texte)}
.gbar.vif .gbar-piste span{background:var(--vert)}

/* BARRES DIVERGENTES (HTML)
   La flèche donne le sens du poste, la couleur son effet sur le résultat.
   Le trait central sépare « creuse la perte » de « réduit la perte ». */
.ecarts{margin:20px 0 4px}
.ec-leg{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;
        margin-bottom:16px;letter-spacing:.3px}
.ec-leg .g{color:#E5484D} .ec-leg .d{color:var(--vert-clair)}
.ec{margin-bottom:20px}
.ec-tete{display:flex;align-items:baseline;gap:9px}
.ec-tete b{font-size:15.5px;font-weight:600;color:var(--texte)}
.ec-f{flex:none;transform:translateY(-1px)}
.ec-tete .v{margin-left:auto;font-size:16.5px;font-weight:700;white-space:nowrap}
.ec.rouge .v{color:#E5484D} .ec.vert .v{color:var(--vert-clair)}
.ec-sous{font-size:13px;color:var(--tres-doux);margin:3px 0 8px 20px}
.ec-piste{display:grid;grid-template-columns:1fr 1fr;height:22px;
          background:rgba(255,255,255,.04);border-radius:5px}
.ec-piste>div{display:flex;min-width:0}
.ec-piste>.g{justify-content:flex-end;border-right:1px solid var(--ligne2)}
.ec-piste span{display:block;height:100%}
.ec-piste>.g span{background:#E5484D;border-radius:5px 0 0 5px}
.ec-piste>.d span{background:var(--vert);border-radius:0 5px 5px 0}

figure{margin:40px 0;background:var(--panneau);border:1px solid var(--ligne);border-radius:18px;padding:28px 30px 20px}
figure .ft{font-size:18.5px;font-weight:700;margin-bottom:4px;letter-spacing:-.4px}
figure .fs{font-size:15px;color:var(--tres-doux);margin-bottom:20px}
figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne);
           font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--tres-doux)}

table{width:100%;border-collapse:collapse;font-size:16.5px;margin:28px 0}
/* Hors téléphone, rien ne dépasse : le conteneur est transparent et
   l'indication de glissement n'a pas lieu d'être. */
.defile{overflow:visible}
.glisser{display:none}
/* affichée seulement quand le conteneur déborde vraiment (classe posée
   par le script après mesure) */
.defile.deborde+.glisser{display:flex;align-items:center;gap:7px;margin:8px 0 0;
  font-size:12.5px;color:var(--tres-doux)}
thead th{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--tres-doux);
         font-weight:700;text-align:left;padding:0 0 12px;border-bottom:1px solid var(--ligne2)}
/* Deux colonnes alignées à droite se collaient l'une à l'autre : « 52 » et
   « 6e » se lisaient « 526e ». L'écart était posé jusqu'ici en style dans
   chaque article ; il appartient à la feuille de style. */
thead th+th,tbody td+td{padding-left:26px}
thead th.n{text-align:right}
tbody td{padding:13px 0;border-bottom:1px solid var(--ligne);color:var(--doux)}
tbody td.n{text-align:right;color:var(--texte);font-weight:700;font-variant-numeric:tabular-nums}
tbody tr.pic td{color:var(--vert-clair);font-weight:700}

.sources{margin:44px 0 0;padding:26px 28px;background:var(--panneau);border:1px solid var(--ligne);border-radius:16px}
.sources .t{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--vert);font-weight:700;margin-bottom:12px}
.sources p{font-size:15.5px;line-height:1.7;color:var(--doux);margin:0 0 10px}
.sources p:last-child{margin:0}

.relance{margin:60px 0 0;padding:52px;background:linear-gradient(160deg,var(--carte),var(--panneau));
         border:1px solid rgba(34,197,94,.3);border-radius:24px}
.relance h2{font-size:30px;max-width:24ch;letter-spacing:-1.2px}
.relance p{font-size:17px;color:var(--doux);margin:16px 0 0;max-width:52ch}
/* … sauf le libellé, qui est aussi un <p> : sans cette ligne, la règle
   ci-dessus le repeignait en gris et le grossissait. Même piège que dans
   les autres blocs — un libellé de section n'est pas du texte courant. */
.relance .titre-sec{color:var(--vert-clair);font-size:16px;margin:0 0 18px}
@media(max-width:640px){.relance{padding:32px 24px}}

/* ----------------------------------------------------------- FORMULES */
.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;align-items:stretch}
.f{background:var(--panneau);border:1px solid var(--ligne);border-radius:20px;padding:40px 34px;
   display:flex;flex-direction:column;transition:border-color .3s}
.f:hover{border-color:var(--ligne2)}
.f.mise{border-color:rgba(34,197,94,.45);background:linear-gradient(160deg,var(--carte),var(--panneau))}
.f .nom{font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--vert-clair);font-weight:700}
.f .prix{font-size:44px;font-weight:800;letter-spacing:-2px;margin:20px 0 4px}
.f .prix small{font-size:16px;font-weight:400;color:var(--tres-doux);letter-spacing:0}
.f .quoi{font-size:16px;color:var(--doux);margin:12px 0 26px;line-height:1.6}
.f ul{list-style:none;margin:0 0 28px;padding:0;flex:1}
.f li{font-size:16px;color:var(--doux);padding:10px 0 10px 26px;position:relative;line-height:1.55}
.f li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;border-radius:50%;
              background:var(--vert-sourd);box-shadow:0 0 0 1px rgba(34,197,94,.55)}
.f .etat{font-size:14px;color:var(--tres-doux);text-align:center;padding:15px;
         border:1px dashed var(--ligne2);border-radius:10px}
@media(max-width:920px){.formules{grid-template-columns:1fr}}

/* ----------------------------------------------------------- PIED */
/* Le filet vert sépare désormais le dernier bloc du pied : plus besoin
   d'un trait gris ni de 40 px de marge en plus. */
footer{padding:40px 0 36px;font-size:15px;color:var(--tres-doux);margin-top:0}
.frow{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.fnav{display:flex;gap:30px;flex-wrap:wrap}
.fnav a{color:var(--doux)} .fnav a:hover{color:var(--texte)}
.reseaux{display:flex;gap:12px;margin-top:16px}
.reseaux a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
           border:1px solid var(--ligne2);border-radius:11px;color:var(--doux);
           transition:border-color .25s,color .25s}
.reseaux a:hover{border-color:var(--vert);color:var(--vert-clair)}
.reseaux svg{width:18px;height:18px}
.bas-pied{margin-top:28px;padding-top:20px;border-top:1px solid var(--ligne);
          display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px}

.centre{text-align:center}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------- PARTAGE ET LIENS
   Relevé sur Opta Analyst et So Foot : le bloc de partage est placé sous
   les métadonnées, AVANT le corps — il est donc vu par tout le monde, pas
   seulement par les 10 % qui atteignent la fin. Trois canaux, pas dix. */
.partage{display:flex;align-items:center;gap:12px;margin-top:22px}
.partage .pl{font-size:12px;letter-spacing:2px;text-transform:uppercase;
             color:var(--tres-doux);font-weight:700;margin-right:4px}
.partage a,.partage button{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--ligne2);border-radius:11px;
  background:none;color:var(--doux);cursor:pointer;padding:0;
  transition:border-color .25s,color .25s}
.partage a:hover,.partage button:hover{border-color:var(--vert);color:var(--vert-clair)}
.partage svg{width:17px;height:17px}
.partage .copier.fait{border-color:var(--vert);color:var(--vert-clair)}
.partage .copier.fait::after{content:"Copié";position:absolute;margin-top:-58px;
  font-size:12px;color:var(--vert-clair);letter-spacing:.5px}

/* temps de lecture : icône horloge, comme sur So Foot */
.meta .duree{display:inline-flex;align-items:center;gap:7px}
.meta .duree svg{width:15px;height:15px;opacity:.8}

/* articles liés, filtrés par rubrique, en fin d'article */
.lies{margin:48px 0 0;padding-top:34px;border-top:1px solid var(--ligne2)}
.lies .grille{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.lies .carte{padding:24px 24px 20px}
.lies .carte .cn{font-size:42px;margin:14px 0 0}
.lies .carte h3{font-size:17.5px;margin-top:8px}

/* -------------------------------------------------- FILTRES DE RUBRIQUE
   Le sport est la section (l'URL), l'angle est la rubrique (le filtre).
   Filtrage en JavaScript sur une seule page : pas de rechargement, et une
   seule URL forte pour les moteurs de recherche. */
.filtres{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.puce{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ligne2);
      border-radius:12px;padding:13px 22px;font:inherit;font-size:16px;font-weight:600;
      color:var(--doux);background:rgba(255,255,255,.02);cursor:pointer;
      transition:border-color .25s,color .25s,background .25s}
.puce:hover{border-color:var(--doux);color:var(--texte)}
.puce span{font-size:13px;font-weight:700;color:var(--tres-doux);
           background:rgba(255,255,255,.06);border-radius:20px;padding:2px 9px}
.puce.actif{border-color:var(--vert);color:var(--texte);background:var(--vert-sourd)}
.puce.actif span{color:var(--vert-clair);background:rgba(34,197,94,.18)}
.rien{display:none;margin-top:40px;padding:60px 0;text-align:center;color:var(--tres-doux);
      font-size:16px;border:1px dashed var(--ligne2);border-radius:16px}

/* Étiquette de rubrique sur les cartes et dans le fil d'article.
   Deux couleurs distinctes : le lecteur doit voir d'un coup d'œil s'il est
   sur du terrain ou sur des comptes. */
/* remplacés par le bandeau d'étiquettes ci-dessous */


/* ------------------------------------------------ BANDEAU D'ÉTIQUETTES
   Compétition, angle et date : les trois informations que le lecteur
   cherche avant même le titre. Elles étaient en petit et en bas de carte,
   donc invisibles. Elles passent en haut, en pastilles pleines. */
.etiq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.etiq .p-comp,.etiq .p-rub{
  display:inline-flex;align-items:center;border-radius:8px;
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  padding:7px 13px;line-height:1;white-space:nowrap
}
/* la compétition : blanc franc, c'est l'information la plus cherchée */
.etiq .p-comp{background:rgba(255,255,255,.10);color:#FFF;border:1px solid rgba(255,255,255,.22);
              gap:9px}
/* le drapeau du pays de la compétition. Le liseré sombre l'empêche de se
   fondre dans la pastille : sans lui, la bande blanche disparaît. */
.etiq .dr{width:17px;height:11.5px;flex:none;border-radius:2px;
          box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.etiq.grand .dr{width:20px;height:13.5px}
/* l'angle : couleur pleine, une par rubrique, reconnaissable d'un coup d'œil */
.etiq .p-rub.r-terrain{background:var(--vert);color:#052012;border:1px solid var(--vert)}
.etiq .p-rub.r-business{background:#5B9BD5;color:#04182B;border:1px solid #5B9BD5}
/* La date passe SOUS les pastilles, alignée à gauche sur « Ligue 1 » :
   flex-basis 100 % lui donne toute la largeur, donc sa propre ligne. À
   droite, elle se retrouvait à l'autre bout de la carte, loin de ce
   qu'elle date. */
/* Deuxième ligne du bandeau : la date, et le club quand l'article n'en
   traite qu'un seul. flex-basis 100 % lui donne toute la largeur. */
.etiq .sous{flex-basis:100%;display:flex;align-items:center;gap:12px;
            flex-wrap:wrap;margin-top:2px}
.etiq time{margin:0;font-size:14px;font-weight:600;color:var(--doux);white-space:nowrap}
.etiq .club{font-size:14px;font-weight:700;color:var(--vert-clair);white-space:nowrap;
            padding-left:12px;border-left:1px solid var(--ligne2)}
.etiq.grand .club{font-size:16px}

/* version article : plus grande encore, et la date reste alignée à gauche
   pour ne pas partir à l'autre bout d'une colonne de 760 px */
.etiq.grand{gap:12px;margin:0 0 24px}
.etiq.grand .p-comp,.etiq.grand .p-rub{font-size:14px;padding:9px 16px;letter-spacing:1.6px}
.etiq.grand .sous{margin-top:6px}
.etiq.grand time{font-size:16px;color:var(--texte)}
/* Les pastilles de la page d'article sont des liens : on le fait sentir au
   survol, discrètement — elles ne doivent pas ressembler à des boutons. */
a.p-comp,a.p-rub{transition:transform .18s,box-shadow .18s,filter .18s}
a.p-comp:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
a.p-rub:hover{filter:brightness(1.12)}
a.p-comp:hover,a.p-rub:hover{transform:translateY(-1px)}

/* Le temps de lecture appartient au titre, mais ne doit pas le toucher :
   la marge remise à zéro ici datait de l'époque où ce bloc portait aussi
   la date, juste sous les étiquettes. */
.meta{margin-top:18px;padding-bottom:24px}

/* état du refus de mesure, sur la page de confidentialité */
.etat-mesure{font-weight:600;padding:12px 16px;border-radius:10px;display:inline-block}
.etat-mesure.dedans{background:rgba(255,255,255,.05);color:var(--doux)}
.etat-mesure.hors{background:var(--vert-sourd);color:var(--vert-clair)}

/* ------------------------------------------------ FILTRES COMBINABLES
   Trois dimensions qui se cumulent. Une dimension n'est affichée que si
   elle propose au moins deux valeurs : un filtre à un seul choix n'aide
   personne et donne l'impression d'un site vide. */
.filtres{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.fgroupe{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ftitre{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--tres-doux);
        font-weight:700;min-width:96px}
.fpuces{display:flex;gap:10px;flex-wrap:wrap}
.effacer{align-self:flex-start;background:none;border:0;color:var(--vert-clair);
         font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:0;
         text-decoration:underline;text-underline-offset:3px}
.compte{font-size:14.5px;color:var(--tres-doux);margin:22px 0 0}
.rappel{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.factif{display:inline-flex;align-items:center;gap:10px;background:var(--vert-sourd);
        border:1px solid rgba(34,197,94,.4);border-radius:10px;padding:9px 12px 9px 16px;
        font-size:14.5px;color:var(--texte)}
.factif b{color:var(--vert-clair);font-weight:700}
.factif button{background:none;border:0;color:var(--doux);cursor:pointer;font-size:14px;
               padding:2px 4px;line-height:1}
.factif button:hover{color:var(--texte)}

/* clubs cités en fin d'article */
.clubs-cites{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:36px 0 0;
             padding-top:22px;border-top:1px solid var(--ligne)}
.clubs-cites .ct{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
                 color:var(--tres-doux);font-weight:700;margin-right:4px}
.pclub{display:inline-flex;border:1px solid var(--ligne2);border-radius:9px;padding:9px 15px;
       font-size:14.5px;color:var(--doux);transition:border-color .25s,color .25s}
.pclub:hover{border-color:var(--vert);color:var(--vert-clair)}


/* =====================================================================
   TÉLÉPHONE
   Tout ce qui suit corrige des problèmes constatés à 390 et 360 px de
   large, dans le navigateur, sur les pages réelles. Regroupé ici pour
   qu'on voie d'un coup ce que le petit écran change.
   ===================================================================== */
@media(max-width:760px){

  /* EN-TÊTE plus basse : 84 px de bandeau collant, c'est un dixième de
     l'écran d'un téléphone occupé en permanence par un logo. */
  .hrow{height:64px}
  .marque{font-size:20px;gap:10px}
  .marque svg{width:26px;height:26px}
  nav{top:64px}
  html{scroll-padding-top:64px}

  /* ÉCART ENTRE LES BLOCS. Sur grand écran, 56 px au-dessus et 56 en
     dessous de chaque section aèrent la page. Sur un téléphone, les deux
     s'additionnent : 112 px de vide entre deux panneaux, soit un tiers
     d'écran à faire défiler pour rien. Moitié moins ici, et le bord du
     panneau suffit à séparer les blocs. */
  section{padding:22px 0}

  /* L'accroche respirait sur 220 px de padding vertical, hérités du grand
     écran : sur un téléphone, ça fait un écran entier de vide. */
  .hero,.hero.rubrique,.hero.secondaire{padding:26px 0 26px}
  .hero.plein{padding:48px 0 44px}
  .badge{margin-bottom:20px;padding:7px 14px;font-size:11px;letter-spacing:1.2px}
  .badge::before{width:6px;height:6px;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
  .chapo{font-size:18px}
  /* un cran en dessous sur téléphone, où la colonne est étroite */
  .titre-sec,.sur,.tete .titre-sec,.relance .titre-sec{font-size:14.5px;margin-bottom:14px}

  /* TITRES DE SECTION CENTRÉS sur téléphone. Le bloc titre occupe alors
     toute la largeur au-dessus du texte d'intro : centré, il fait une
     vraie ouverture de chapitre. Le texte courant, lui, reste aligné à
     gauche — une phrase longue centrée se lit mal. */
  .tete{gap:18px}
  .tete>div{width:100%;text-align:center}
  .themes{justify-content:center}
  /* le filet suit le titre : centré lui aussi, et symétrique */
  .tete>div::after{margin-left:auto;margin-right:auto;
    background:linear-gradient(90deg,rgba(34,197,94,0),var(--vert),rgba(34,197,94,0))}
  /* le bloc d'abonnement suit la même règle : titre centré, texte à gauche */
  .relance .titre-sec,.relance h2{text-align:center}

  /* Champ et bouton pleine largeur : un bouton à mi-largeur sous un champ
     qui la prend toute donnait un formulaire bancal, et une cible de clic
     plus petite qu'elle n'a besoin de l'être. */
  .form{gap:12px;margin-top:22px}
  .form input[type=email],.form .bouton,.form button{width:100%}
  /* une garantie par ligne : côte à côte, elles se lisaient comme une
     phrase coupée en morceaux plutôt que comme une liste. */
  .atouts{flex-direction:column;gap:8px}

  /* Le tiret de l'annonce se centrait verticalement sur trois lignes de
     texte et se retrouvait au milieu de nulle part. */
  .annonce{align-items:flex-start}
  .annonce::before{margin-top:10px}

  /* Titres de section : 44 px de haut de casse débordaient de la colonne. */
  h1{letter-spacing:-1.6px}
  h2{letter-spacing:-1px}
  .themes{gap:12px}
  .themes .paire{gap:12px}

  /* Articles : la colonne de texte est déjà étroite, inutile d'y ajouter
     30 px de cadre de chaque côté pour les figures. */
  .art{padding-top:36px;padding-bottom:28px}
  figure{padding:20px 16px 14px;margin:30px 0;border-radius:14px}
  figure .ft{font-size:17px}

  /* GRAPHIQUES ET TABLEAUX : ils gardent leur largeur de lecture et se
     font glisser du doigt. Réduits à 320 px, les libellés tombaient sous
     7 px — illisibles. Mieux vaut un défilement franc qu'un graphique
     qu'on ne peut pas lire. */
  .defile{overflow-x:auto;-webkit-overflow-scrolling:touch;
          scrollbar-width:thin;padding-bottom:6px}
  /* Les tableaux ne comptent que deux ou trois colonnes : ils tiennent
     dans la largeur en resserrant un peu. Un tableau qui se fait glisser
     cache ses chiffres — c'est-à-dire l'essentiel. */
  /* max-content : le tableau prend exactement la largeur dont il a besoin.
     Deux colonnes tiennent dans l'écran, quatre débordent et se font
     glisser — au lieu de rogner silencieusement la dernière colonne. */
  .defile>table{min-width:max-content}
  table{font-size:15px}
  table th,table td{padding:11px 8px}
  table th:first-child,table td:first-child{padding-left:0}
  table th:last-child,table td:last-child{padding-right:0}
  .defile::-webkit-scrollbar{height:5px}
  .defile::-webkit-scrollbar-thumb{background:var(--atone);border-radius:3px}

  /* Bandeau d'étiquettes et bloc de partage, resserrés. */
  .etiq{gap:8px;margin-bottom:16px}
  .etiq .p-comp,.etiq .p-rub{font-size:11.5px;padding:6px 10px;letter-spacing:1px}
  .etiq.grand .p-comp,.etiq.grand .p-rub{font-size:12.5px;padding:8px 12px}
  .partage{flex-wrap:wrap;gap:10px}

  /* La méthode : le numéro et le titre restent sur une ligne, mais le
     titre a besoin de pouvoir revenir à la ligne sans casser l'alignement. */
  /* bas d'article : « Clubs cités » puis « À lire aussi ». Sur un écran
     étroit, une seule pastille laissait une bande vide de part et d'autre. */
  .clubs-cites{margin-top:28px;padding-top:18px;gap:9px}
  .lies{margin-top:34px;padding-top:26px}
  .meta{margin-top:14px;padding-bottom:20px}

  /* pied de page resserré : sur un téléphone, tout se met en colonne et
     les écarts prévus pour deux colonnes deviennent des trous. */
  footer{padding:18px 0 24px}
  .frow{gap:18px}
  .fnav{gap:10px 24px}
  .bas-pied{margin-top:22px;padding-top:16px}

  .m-tete{align-items:flex-start}
  .m-item h3{font-size:21px}
  .socle{padding:18px 18px 18px 20px;font-size:16px}
}

/* Très petits écrans : on gagne les derniers pixels sur les marges. */
@media(max-width:400px){
  /* padding-left/right, jamais la forme courte « padding » : elle aurait
     aussi remis les marges HAUT et BAS à zéro, et comme cette règle est la
     dernière du fichier, elle écrasait celles des blocs qui la précèdent.
     C'est ce qui vidait le bas des pages d'article sur un écran de 390 px. */
  .wrap{padding-left:20px;padding-right:20px}
  .art{padding-left:20px;padding-right:20px}
  .panneau{padding:32px 20px}
  h1{font-size:clamp(34px,8.6vw,46px)}
}