/* ---------- PIED DE PAGE — bande 6440..6883 de la maquette ----------
   Releve a 600 dpi (1 pt = 8.3333 px). Ordonnees ramenees a l'origine du pied.

     Filet haut ............ x   75.4..1832.4   y   -0.9..1.2    2.04 plein #29648F
     Logo .................. x   74.6.. 411.7   y   37.8..120.6
     Baseline, 2 lignes .... x   77.3.. 492.5   y  169.8..216.0  italique
     Tiret cyan ............ x   76.9.. 113.6   y  243.1..248.6  36.8 x 5.6
     Rejoindre + telegram .. x   78.2.. 387.2   y  256.5..315.4
     Reseaux (47.2 plein) .. x  442.4.. 608.4   y  261.4..308.6
     /INDEX ................ x  711.4.. 828.5   y   73.3.. 96.0
     liens INDEX ........... x  711.4.. 958.8   y  113.4..233.0
     /LEGAL ................ x 1015.0..1109.2   y   77.6.. 95.2
     liens LEGAL ........... x 1014.2..1213.1   y  114.8..201.3
     SECURE_UPDATES ........ x 1314.7..1456.9   y  161.6..171.0  mono
     Champ (action4.svg) ... x 1313.5..1534.4   y  192.7..243.6  221 x 51
     Tiret cyan CONTACT .... x 1795.3..1832.0   y   36.2.. 41.7
     /CONTACT .............. x 1682.5..1832.4   y   73.3.. 96.0
     liens CONTACT ......... x 1587.6..1832.4   y  154.3..266.2  alignes a droite
     Barre d'etat .......... x   75.4..1832.3   y  332.7..347.1
     Ligne systeme ......... x 1498.3..1835.5   y  363.7..375.1  mono
     Copyright ............. x   76.1.. 647.0   y  380.4..399.2

   Deux irregularites de la maquette, reproduites telles quelles :
   la colonne LEGAL est composee plus petite et en gris #B3B3B3 la ou INDEX et
   CONTACT sont en blanc avec un titre cyan ; et le filet haut deborde d'un
   demi-point au-dessus de la limite de section. Le second est invisible, le
   premier hierarchise volontairement les mentions legales.

   « POLYGON / SOLANA : ALL NODES ONLINE » est le seul libelle capitale de la
   charte ou Outfit tombe juste sur les deux criteres a la fois : corps 20.45,
   chasse 405.4 et capitale 14.4, exactement le releve.
*/
.mrc .pied{position:relative;
      background:#000911 url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/footer-fond.webp) 0 0/100% 100% no-repeat}
/* Les marges laterales de la maquette ne sont pas symetriques : 75.4 a gauche,
   87.6 a droite. On les pose telles quelles plutot que de centrer un bloc. */
.mrc .pied-in{position:relative;max-width:1920px;margin:0 auto;
         padding:0 87.6px 39.1px 75.36px}
.mrc .pied .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
          white-space:nowrap}

/* Le filet est plein, pas degrade : les deux extremites echantillonnent la
   meme valeur. C'est le seul separateur de la charte dans ce cas. */
.mrc .pied-filet{display:block;height:2.04px;background:#29648F}

/* Cinq colonnes de largeurs inegales, et des gouttieres inegales elles aussi :
   on decrit la grille en pourcentages de la largeur utile plutot qu'en pixels,
   avec une piste vide par gouttiere. La grille se contracte alors
   proportionnellement au lieu de se decaler. */
.mrc .pied-cols{display:grid;
  grid-template-columns:30.37% 5.86% 14.08% 3.15% 11.31% 5.71% 12.57% 3.02% 13.93%;
  align-items:start}
.mrc .p-marque{grid-column:1}
.mrc .p-index{grid-column:3}
.mrc .p-legal{grid-column:5}
.mrc .p-lettre{grid-column:7}
.mrc .p-contact{grid-column:9}

/* ---- colonne de marque ---- */
.mrc .p-marque{padding-top:35.7px}
.mrc .p-logo{display:block;width:337.2px;max-width:100%;height:auto}
/* Les deux lignes partagent un corps : Outfit compose la seconde 1.3 % plus
   courte que la maquette. Un corps par ligne serait un artifice ; 5 px sur
   416 ne se voient pas. */
.mrc .p-baseline{margin-top:42.70px;font-size:20.26px;font-style:italic;font-weight:300;
            line-height:1.36;color:#fff}
.mrc .p-dash{display:block;width:36.8px;height:5.64px;background:var(--accent);
        margin-top:25.10px}
/* Les deux groupes ne se compriment pas : sous 1560 px la rangee ne tient plus
   dans la colonne, et un flex qui retrecit ecraserait les pictogrammes au lieu
   de passer a la ligne — avec img{max-width:100%} ils tombent a 4 px. */
.mrc .p-rejoindre,.mrc .p-reseaux{flex:none}
.mrc .p-rang{display:flex;align-items:center;flex-wrap:wrap;row-gap:20px;margin-top:8.90px}
.mrc .p-rejoindre{display:inline-flex;align-items:center;gap:17.9px;text-decoration:none;
             font-size:19.44px;font-weight:300;letter-spacing:0;text-transform:uppercase;
             color:var(--accent);white-space:nowrap;transition:opacity .18s}
/* Rare endroit ou les deux criteres tombent d'accord : a 19.44, << REJOINDRE >>
   fait 108.8 pour 108.6 releves, et le groupe entier 245.0 pour 245.0. Le
   pictogramme Telegram se pose donc a sa place sans retouche. */
.mrc .p-rejoindre b{font-weight:700;color:#fff}
.mrc .p-rejoindre:hover{opacity:.78}
.mrc .p-rejoindre img{display:block;width:51.1px;height:auto;flex:none}
.mrc .p-reseaux{display:flex;align-items:center;gap:12.2px;margin-left:55.2px}
.mrc .p-reseaux a{display:block;line-height:0;transition:opacity .18s}
.mrc .p-reseaux a:hover{opacity:.72}
.mrc .p-reseaux img{display:block;width:47.2px;height:47.2px}

/* ---- colonnes de liens ---- */
.mrc .p-col ul{list-style:none;margin:0;padding:0}
.mrc .p-col a{text-decoration:none;transition:opacity .18s}
.mrc .p-col a:hover{opacity:.7}

.mrc .p-titre{font-size:25.39px;font-weight:700;line-height:1;color:var(--accent);
         white-space:nowrap}
/* Le prompt est plus petit et plus leger que le mot qu'il annonce, et sa base
   remonte de 2.6 : il se lit comme une invite, pas comme un mot du titre. */
.mrc .p-titre i{font-style:normal;font-weight:400;font-size:.79em;letter-spacing:.02em;
           margin-right:.30em;position:relative;top:-.115em}

.mrc .p-index{padding-top:69.00px}
.mrc .p-index ul{margin-top:16.60px}
.mrc .p-index li + li{margin-top:13.60px}
/* ARCHITECTURE TRIPLE COUCHE fait 247.4 de chasse pour une colonne de 247.4 :
   au demi-pixel pres la ligne se coupe en deux. On l'interdit, la gouttiere
   suivante absorbe le debord. */
.mrc .p-index a{font-size:16.5px;font-weight:300;line-height:1.18;color:#fff;
           text-transform:uppercase;white-space:nowrap}
.mrc .p-index .p-fort a{font-size:19.55px;font-weight:700;text-transform:none}
/* Le chevron n'est pas dans le libelle du menu : il est pose en CSS, pour que
   l'entree reste modifiable depuis l'admin sans que personne ait a savoir
   qu'il faut taper un chevron devant. */
.mrc .p-index .p-fort a::before{content:'>';margin-right:.42em}
.mrc .p-index .p-fort{margin-top:15.20px}
.mrc .p-index .p-fort + li{margin-top:13.80px}

/* La maquette compose LEGAL plus petit et en gris : les mentions legales sont
   secondaires, elles ne concurrencent pas l'index ni le contact. */
.mrc .p-legal{padding-top:73.65px}
.mrc .p-legal .p-titre{font-size:20.20px;color:#B3B3B3}
.mrc .p-legal ul{margin-top:14.10px}
.mrc .p-legal a{font-size:16.66px;font-weight:300;line-height:1.18;color:#B3B3B3}
.mrc .p-legal li + li{margin-top:15.30px}

/* Outfit ne conserve pas le rapport de chasse entre INDEX et CONTACT : au meme
   corps, /CONTACT tombe 4 % court. Chaque titre a donc le sien. */
.mrc .p-contact .p-titre{font-size:24.32px}
.mrc .p-contact{padding-top:34.40px;text-align:right}
.mrc .p-contact .p-dash{margin:0 0 28.50px auto}
.mrc .p-contact ul{margin-top:56.00px}
.mrc .p-contact li + li{margin-top:23.85px}
.mrc .p-contact a{font-size:20.22px;font-weight:300;line-height:1.18;color:#fff}

/* ---- lettre d'information ---- */
.mrc .p-lettre{padding-top:160.20px}
.mrc .p-mono-titre{font-family:'JetBrains Mono',monospace;font-size:10.25px;font-weight:400;
              line-height:1;letter-spacing:.235em;color:#00E5FF}
/* Le cadre est action4.svg : rectangle a coin superieur droit chanfreine,
   contour #00E5FF a 50 %. Etire, donc preserveAspectRatio="none" cote SVG. */
.mrc .p-champ{position:relative;width:221px;max-width:100%;height:51px;margin-top:21.50px;
         background:url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/champ-mail.svg) 0 0/100% 100% no-repeat}
.mrc .p-champ input{position:absolute;left:15.9px;top:0;height:100%;width:calc(100% - 52px);
               /* WordPress et le theme posent un padding et une bordure sur les
                  champs : sans remise a zero, le texte de substitution part
                  9 px trop a droite. */
               background:none;border:0;outline:none;padding:0;margin:0;box-sizing:border-box;
               font-family:'JetBrains Mono',monospace;font-size:12.6px;font-weight:400;
               letter-spacing:.03em;color:#C8D3EA}
.mrc .p-champ input::placeholder{color:#8892B0;opacity:1}
.mrc .p-champ input:focus{color:#fff}
.mrc .p-champ button{position:absolute;right:14.5px;top:50%;transform:translateY(-50%);
                width:19.5px;height:19.5px;padding:0;cursor:pointer;
                background:#001E28;border:0;display:grid;place-items:center}
/* Le pictogramme est une enveloppe : un rectangle et ses deux diagonales. */
.mrc .p-champ button i{display:block;width:7.1px;height:9.8px;
                  border:1.1px solid #00D0E9;box-sizing:border-box;
                  background:
                    linear-gradient(to bottom right,transparent calc(50% - .6px),#00D0E9 50%,transparent calc(50% + .6px)),
                    linear-gradient(to bottom left, transparent calc(50% - .6px),#00D0E9 50%,transparent calc(50% + .6px))}
.mrc .p-champ button:hover{background:#00323F}

/* ---- barre d'etat ---- */
.mrc .p-etat{display:flex;align-items:center;margin-top:17.50px}
/* barre-etat.svg : filet degrade de 2.03 termine par un disque cyan de 7.18 de
   rayon. On l'etire sur la place laissee par le libelle. */
.mrc .p-etat-filet{flex:1;height:14.36px;
              background:url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/barre-etat.svg) 0 0/100% 100% no-repeat}
.mrc .p-etat-txt{flex:none;margin-left:23.9px;font-size:20.45px;font-weight:700;
            line-height:1;letter-spacing:0;color:var(--accent);white-space:nowrap}

.mrc .p-sys{margin-top:14.00px;text-align:right;
       font-family:'JetBrains Mono',monospace;font-size:12.28px;font-weight:400;
       line-height:1;letter-spacing:.11em;color:#666C72}
.mrc .p-copy{margin-top:3.40px;font-size:19.55px;font-weight:300;line-height:1;color:#808080}

/* ---- adaptations ---- */
@media(max-width:1560px){
  .mrc .pied-in{width:100%;padding:0 40px 40px}
  .mrc .pied-cols{grid-template-columns:28% 4% 15% 3% 13% 4% 14% 3% 16%}
  .mrc .p-baseline{font-size:18px}
  .mrc .p-reseaux{margin-left:32px}
}
@media(max-width:1200px){
  /* Le champ passe sous la colonne contact : a cette largeur les cinq colonnes
     ne tiennent plus, et c'est le bloc le moins hierarchique qui cede. */
  .mrc .pied-cols{grid-template-columns:1fr 6% 1fr 4% 1fr;row-gap:56px}
  .mrc .p-marque{grid-column:1/-1}
  .mrc .p-index{grid-column:1;padding-top:0}
  .mrc .p-legal{grid-column:3;padding-top:0}
  .mrc .p-contact{grid-column:5;padding-top:0;text-align:left}
  .mrc .p-contact .p-dash{margin-left:0;margin-right:auto}
  .mrc .p-lettre{grid-column:1/-1;padding-top:0}
  .mrc .p-marque{padding-top:44px}
  .mrc .p-etat-txt{font-size:17px}
  .mrc .p-sys{font-size:13px}
  .mrc .p-copy{font-size:16px}
}
@media(max-width:900px){
  .mrc .pied-in{padding:0 22px 34px}
  .mrc .pied-cols{grid-template-columns:1fr;row-gap:44px}
  .mrc .p-marque,.mrc .p-index,.mrc .p-legal,.mrc .p-contact,.mrc .p-lettre{grid-column:1}
  .mrc .p-logo{width:250px}
  .mrc .p-baseline{font-size:16px}
  .mrc .p-baseline br{display:none}
  .mrc .p-rang{flex-wrap:wrap;row-gap:22px}
  .mrc .p-reseaux{margin-left:0;width:100%}
  .mrc .p-titre{font-size:19px}
  .mrc .p-etat{flex-direction:column;align-items:flex-start;gap:14px;margin-top:44px}
  .mrc .p-etat-filet{width:100%;flex:none}
  .mrc .p-etat-txt{margin-left:0;font-size:15px;white-space:normal}
  .mrc .p-sys,.mrc .p-copy{text-align:left;font-size:13px;line-height:1.5}
  .mrc .p-sys{margin-top:18px}
  .mrc .p-copy{margin-top:10px}
}