/* ---------- HEADER — bande 0..157 de la maquette ----------
   Releve a 600 dpi (1 pt = 8.3333 px), page de reference 1920 pt.

     Logo (LogotypeMRC-Horizontal.svg) .. x 78.04..415.12   y  74.76..157.56
     Menu, ligne de base ................................... y 117.32
     Menu, hauteur de capitale ............................. 16.80
     Accueil (actif) .................... x 528.16..606.40
     Fonctionnement ..................... x 643.60..804.40
     Secteurs ........................... x 838.88..925.28
     Ecosysteme ......................... x 961.70..1080.10
     Jeton .............................. x 1114.08..1168.92
     Soulignement actif (divider1) ...... x 528.28..565.00  y 132.32..137.84
     Bouton (action1.svg) ............... x 1408.64..1600.64 y 91.72..128.68
     Reseaux (bouton-*.svg) ............. x 1612.68..1703.00 y 97.68..123.36
     Puce Polygon ....................... x 1718.44..1746.76 y 97.44..122.88
     Polygon Mainnet Live ............... x 1757.44..1873.96 y 105.00..117.12

   Deux ecarts assumes, tous deux dus a la meme cause : la maquette compose le
   bouton et l'etiquette Polygon dans une lineale etroite (DIN Condensed, non
   licenciable pour le web). Outfit, a hauteur de capitale egale, y serait 37 %
   trop large et deborderait du cadre et de la marge droite. On cale donc ces
   deux libelles sur la chasse relevee : la capitale y est plus petite que dans
   la maquette. Pour le menu, un calage conjoint corps + gouttiere place les
   cinq entrees a 2.9 px pres.

   Le fond n'est pas une couleur : c'est la meme rampe verticale que l'image du
   hero, coupee en deux par le decoupage en templates. Elle est echantillonnee
   dans la maquette et tramee ; la derniere ligne du fichier raccorde a moins
   de 2/255 de la premiere ligne de la bande du hero.
*/
.mrc .hdr{position:relative;height:157px;
     background:#010B15 url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/header-fond.webp) 0 0/100% 100% no-repeat}

/* Le contenu n'est pas centre dans la bande : son axe tombe a y 110.2, soit
   31.7 px sous le milieu. On centre puis on descend l'ensemble d'un bloc,
   plutot que de caler chaque element : les nudges restent ainsi lisibles. */
.mrc .hdr-in{display:flex;align-items:center;height:100%;box-sizing:border-box;
        padding:0 46.1px 0 78px;transform:translateY(31.7px)}

.mrc .marque{flex:none;display:block;line-height:0;transform:translateY(5.9px)}
.mrc .marque img{display:block;width:337.2px;height:auto}

/* ---- menu ---- */
/* La maquette aligne sept entrees de 528.2 a 1385.3, soit 857 px de course.
   La V1 n'en compte que cinq : a gouttiere egale le menu s'arreterait 213 px
   plus tot et laisserait un vide avant le bouton. Le menu occupe donc toute la
   place entre le logo et le bloc de droite et repartit ses entrees dedans. Les
   deux marges reproduisent le releve : 112.9 px apres le logo, 23.3 px avant
   le bouton. A 1920 px la premiere et la derniere entree retombent sur les
   abscisses de la maquette ; en dessous les gouttieres se resserrent d'elles-
   memes, sans palier. */
.mrc .hdr-menu{flex:1;min-width:0;margin-left:112.9px;margin-right:23.3px}
.mrc .hdr-menu ul{list-style:none;display:flex;align-items:baseline;
             justify-content:space-between;gap:18px;margin:0;padding:0}
.mrc .hdr-menu li{position:relative}
.mrc .hdr-menu a{display:block;text-decoration:none;color:#fff;font-family:Outfit,sans-serif;
            font-size:23.05px;font-weight:400;line-height:1;letter-spacing:0;
            white-space:nowrap;transition:opacity .18s}
.mrc .hdr-menu a:hover{opacity:.72}
.mrc .hdr-menu .current-menu-item > a,.mrc .hdr-menu .current-menu-ancestor > a{font-weight:600}
/* Le soulignement ne court pas sous tout le mot : 36.8 px cales a gauche,
   15 px sous la ligne de base. C'est divider1.svg, un simple rectangle plein,
   qu'on redessine en CSS plutot que de charger un fichier pour 36 x 5.6. */
.mrc .hdr-menu .current-menu-item > a::after,.mrc .hdr-menu .current-menu-ancestor > a::after{content:'';position:absolute;left:0;top:33.65px;
  width:36.8px;height:5.64px;background:var(--accent)}

/* ---- bloc de droite ---- */
.mrc .hdr-droite{margin-left:auto;display:flex;align-items:center}

.mrc .btn-demo{flex:none;display:grid;place-items:center;
          width:192.15px;height:37px;box-sizing:border-box;
          background:url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/btn-demo.svg) 0 0/100% 100% no-repeat;
          text-decoration:none;transition:filter .18s}
.mrc .btn-demo span{font-family:Outfit,sans-serif;font-size:16.63px;font-weight:600;line-height:1;
               letter-spacing:0;color:var(--accent);transform:translateY(.5px)}
.mrc .btn-demo:hover{filter:brightness(1.25)}

.mrc .reseaux{flex:none;display:flex;align-items:center;gap:6.6px;margin-left:12px}
.mrc .reseaux a{display:block;line-height:0;transition:opacity .18s}
.mrc .reseaux a:hover{opacity:.72}
.mrc .reseaux img{display:block;width:25.8px;height:25.8px}

.mrc .chaine{flex:none;display:flex;align-items:center;gap:10.7px;margin-left:15.4px;
        font-family:Outfit,sans-serif;font-size:12.4px;font-weight:400;line-height:1;
        color:#0C98C5;white-space:nowrap}
.mrc .chaine img{display:block;width:28.4px;height:auto;flex:none}

/* ---- bascule mobile ---- */
.mrc .hdr-bascule{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.mrc .hdr-bascule i{display:block;width:26px;height:2px;background:#fff;border-radius:1px}
.mrc .hdr-bascule i + i{margin-top:6px}

/* ---- adaptations ----
   On retire dans l'ordre ce qui coute le plus pour ce qu'il apporte :
   l'etiquette de chaine, puis les reseaux, en resserrant a chaque palier le
   logo, le corps du menu et les marges. Sous 900 px plus rien ne tient : le
   menu passe sous une bascule. Jeu minimal mesure entre la derniere entree et
   le bouton, de 1920 a 901 px : 12 px. */
@media(max-width:1560px){
  .mrc .hdr-in{padding-left:40px;padding-right:32px}
  .mrc .hdr-menu{margin-left:56px;margin-right:20px}
  .mrc .hdr-menu a{font-size:20px}
  .mrc .marque img{width:300px}
}
@media(max-width:1360px){
  .mrc .chaine{display:none}
  .mrc .hdr-menu{margin-left:48px}
  .mrc .hdr-menu a{font-size:19px}
  .mrc .marque img{width:270px}
}
@media(max-width:1150px){
  .mrc .reseaux{display:none}
  .mrc .hdr-in{padding-left:28px;padding-right:24px}
  .mrc .hdr-menu{margin-left:36px;margin-right:16px}
  .mrc .hdr-menu ul{gap:14px}
  .mrc .hdr-menu a{font-size:17.5px}
  .mrc .marque img{width:240px}
}
@media(max-width:1000px){
  .mrc .hdr-in{padding-left:20px;padding-right:18px}
  .mrc .hdr-menu{margin-left:24px;margin-right:12px}
  .mrc .hdr-menu ul{gap:12px}
  .mrc .hdr-menu a{font-size:15px}
  .mrc .marque img{width:190px}
}
@media(max-width:900px){
  .mrc .hdr{height:96px}
  .mrc .hdr-in{transform:none;padding:0 22px}
  .mrc .marque img{width:210px}
  .mrc .marque{transform:none}
  .mrc .hdr-menu,.mrc .btn-demo,.mrc .reseaux,.mrc .chaine{display:none}
  .mrc .hdr-bascule{display:block}
  .mrc .hdr.est-ouvert{height:auto;padding-bottom:22px}
  .mrc .hdr.est-ouvert .hdr-in{flex-wrap:wrap}
  .mrc .hdr.est-ouvert .hdr-menu{display:block;width:100%;margin:18px 0 0}
  .mrc .hdr.est-ouvert .hdr-menu ul{flex-direction:column;align-items:flex-start;gap:0}
  .mrc .hdr.est-ouvert .hdr-menu li{width:100%;border-top:1px solid rgba(255,255,255,.12)}
  .mrc .hdr.est-ouvert .hdr-menu a{font-size:19px;padding:14px 0}
  .mrc .hdr.est-ouvert .hdr-menu .current-menu-item > a::after{top:auto;bottom:8px}
  .mrc .hdr.est-ouvert .btn-demo{display:grid;margin:16px 0 0}
  .mrc .hdr.est-ouvert .reseaux{display:flex;margin:16px 0 0}
}