:root{
  --bg:#000911; --surface:#0B1629; --ink:#fff; --accent:#0DA2D1;
  --peak:#056A9E; --mid:#04355A; --deep:#055D8D;
  --muted:#B6C0D6; --mono:#8BA0C9; --line:#123049;
  --bandFoot:#086291;
}
.mrc,.mrc *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.mrc{background:var(--bg);color:var(--ink);font-family:Outfit,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
.mrc .mono{font-family:'JetBrains Mono',monospace}


/* ---------- HERO ----------
   Tailles calées sur les hauteurs de capitale relevées dans la maquette
   (rendu 300 dpi, page de reference 1920 pt ; Outfit : capitale = 0.705 em)
     H1 .............. capitale 51.6 pt  -> 73 px
     Libelles CTA .... capitale 14.9 pt  -> 20 px
     Paragraphe ...... corps    ~22 pt   -> 22 px / interligne 1.55 / mesure 950 px
     Chiffres stats .. corps    ~32 pt   -> 32 px
     Labels stats .... corps    ~16.5 pt -> 16.5 px
*/
.mrc .hero{position:relative;background:#000911;overflow:hidden}
.mrc .band{display:block;width:100%;height:auto;margin-bottom:-1px}
/* Le degrade du hero n'est plus reconstitue en CSS : il est echantillonne
   directement dans la maquette (240 x 637, texte masque puis interpole
   verticalement colonne par colonne). Ecart maximal releve : 4/255.
   Il porte aussi le vignettage sombre du bas, impossible a caler a l'oeil.
   La couleur de repli couvre le temps de chargement. */
.mrc .hero-lower{position:relative;background:#0A4670 url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/hero-fond.webp) 0 0/100% 100% no-repeat;
            padding:15.5px 0 0}
.mrc .hero-body{max-width:1240px;margin:0 auto;padding:0 32px;text-align:center}

/* Double appel a l'action.
   Grille 1fr / auto / 1fr : le separateur tombe exactement au centre du bloc,
   donc au centre de la page, sous la pointe basse de l'hexagone du certificat.
   Un centrage en flex le decalerait, les deux libelles n'ayant pas la meme longueur.
   Releve maquette : separateur x=961.3 (page 1920), 1 x 70 px, #3FA9F5
                     chevrons 36 x 19.2 px, epaisseur de bras 5 px, meme bleu
                     libelle secondaire #3FA9F5, pas blanc */
.mrc .duo{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
     font-size:clamp(13px,1.04vw,20px);letter-spacing:0;text-transform:uppercase;
     margin-bottom:54.2px}
.mrc .duo-side{display:flex;align-items:center;gap:10px}
.mrc .duo-side:first-of-type{justify-self:end}
.mrc .duo-side:last-of-type{justify-self:start}
.mrc .duo a{text-decoration:none;color:#3FA9F5;transition:opacity .18s;white-space:nowrap}
.mrc .duo a:hover{opacity:.75}
.mrc .duo a b{color:#fff;font-weight:700;margin-right:.45em}
/* Les chevrons ne sont pas centres sur la ligne : la maquette les pose
   1.5 px au-dessus du milieu des capitales. */
/* Chevrons : SVG d'origine (puce1), 36.08 x 19.09 une fois recadre sur le
   trace, soit exactement le releve de la maquette. Le groupe de gauche est
   le meme fichier retourne. */
.mrc img.chev{height:.96em;width:auto;flex:none;transform:translateY(.165em)}
.mrc img.chev-l{transform:translateY(.165em) scaleX(-1)}
/* Le separateur est plus haut (70 px) que la ligne de texte. Laisse dans le flux,
   il gonflerait la rangee et ferait descendre les libelles de ~15 px.
   On le sort donc du flux : la hauteur de la rangee reste dictee par le texte,
   et la barre deborde symetriquement de part et d'autre.
   La colonne centrale garde sa largeur (20 px) pour reserver la gouttiere. */
.mrc .duo .sep{width:20px;height:0;align-self:center;position:relative}
.mrc .duo .sep::before{content:'';position:absolute;left:50%;top:calc(50% + 2.4px);
  transform:translate(-50%,-50%);width:1px;height:70px;background:#3FA9F5}

.mrc h1{font-size:clamp(32px,3.85vw,74px);font-weight:300;line-height:.95;letter-spacing:-.012em;
   margin-bottom:72.5px}
.mrc h1 em{font-style:normal;font-weight:700;color:var(--accent)}

/* Meme traitement que le double appel a l'action : Outfit etant plus large
   que la police d'origine, on cale la chasse (20 px sans interlettrage) et non
   la capitale. Releve maquette : ligne complete 806.6..1115.5, capitale 14.9. */
.mrc .join{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
      font-size:clamp(13px,1.04vw,20px);letter-spacing:0;text-transform:uppercase;
      color:var(--accent);margin-bottom:20.1px;transition:opacity .18s}
.mrc .join:hover{opacity:.78}
.mrc .join b{color:#fff;font-weight:700}
/* Hexagone pointe en haut + avion, SVG d'origine recadre : 50.9 x 59,
   exactement le releve de la maquette (x 1065.1..1115.5, y 1046.0..1104.6). */
.mrc img.tg{width:51.1px;height:auto;flex:none;transform:translateY(-9.4px)}

/* Filet cyan de respiration entre l'appel Telegram et le chapo.
   Releve maquette : 36.4 x 5.3, #0DA2D1, y 1137.3..1142.6.
   Meme element que les filets de la section 2. */
.mrc .dash-hero{margin:0 auto 38.8px}

.mrc .lede{max-width:none;margin:0 auto 72px;font-size:clamp(15px,1.15vw,22px);
      line-height:1.55;color:#D6E1F0;font-weight:300}
/* Dans la maquette « Protocole MRC » est cyan, pas blanc. */
.mrc .lede b{color:var(--accent);font-weight:700}

/* Bandeau des chiffres cles.
   Il est ENCADRE par deux traits lumineux qui courent sur TOUTE la largeur
   de la page (releve maquette y = 1389 et y = 1494) : blanc pur au centre,
   fondu lineaire jusqu'a l'extinction sur les deux bords. Le bandeau est
   donc sorti de .hero-body, qui est limite a 1240 px.
   Le fond entre les deux traits est lui aussi echantillonne sur la maquette. */
.mrc .statsbar{position:relative;padding:19.3px 32px 38.7px;
          background:#0B1629 url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/hero-fond-stats.webp) 0 0/100% 100% no-repeat}
.mrc .statsbar::before,.mrc .statsbar::after{content:'';position:absolute;left:0;width:100%;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 50%,rgba(255,255,255,0) 100%)}
.mrc .statsbar::before{top:0}
.mrc .statsbar::after{bottom:0}

/* Les trois blocs ne sont pas de largeur egale : la maquette les cale sur
   leur contenu et fait fuir les chiffres vers l'exterieur (le premier est
   ferre a droite, le dernier a gauche, celui du milieu centre).
   Separateurs releves a x = 854.2 et 1031.8, hauteur 59.1, du haut des
   chiffres au bas des libelles : ils ne touchent aucun des deux traits. */
.mrc .stats{display:flex;justify-content:center;align-items:stretch;margin:0 auto}
.mrc .stat{padding:0 28px;position:relative;text-align:center}
.mrc .stat:first-child{text-align:right}
.mrc .stat:last-child{text-align:left}
.mrc .stat + .stat::before{content:'';position:absolute;left:0;top:-2.4px;height:59.1px;width:1px;
                      background:#fff;opacity:.92}
/* Releve maquette : chiffres hauteur 20.6 -> 29 px ; libelles capitale 12.0 -> 17 px ;
   ligne de base des chiffres a 1432.8, capitale des libelles a 1441.8, soit 9 px. */
.mrc .stat .n{font-size:clamp(25px,1.55vw,29.5px);font-weight:700;line-height:1;letter-spacing:0;word-spacing:.15em;
         color:var(--accent)}
.mrc .stat .l{margin-top:-2px;font-size:clamp(13px,.89vw,17px);line-height:1.2;color:#fff;font-weight:300}

/* En dessous de 900 px la bande est recadree au centre : reduite en largeur,
   le certificat deviendrait illisible. On sacrifie les mains, on garde la preuve. */
@media(max-width:900px){
  .mrc .band{height:44vh;min-height:290px;max-height:420px;object-fit:cover;object-position:50% 46%}
  .mrc h1 br{display:none}
  .mrc .hero-lower{padding:18px 0 0}
  .mrc .hero-body{padding-bottom:0}
  .mrc .duo{grid-template-columns:1fr;row-gap:14px;justify-items:center;margin-bottom:44px}
  .mrc .duo-side:first-of-type,.mrc .duo-side:last-of-type{justify-self:center}
  .mrc .duo .sep,.mrc .duo img.chev{display:none}
  .mrc h1{margin-bottom:32px}
  .mrc .join{margin-bottom:56px}
  .mrc .lede{margin-bottom:52px}
  .mrc .lede br{display:none}
  .mrc .statsbar{padding:30px 22px 34px}
  .mrc .stats{flex-direction:column;gap:30px}
  .mrc .stat,.mrc .stat:first-child,.mrc .stat:last-child{text-align:center;padding:0}
  .mrc .stat + .stat::before{display:none}
}

/* ---------- SECTION 2 : L'arme absolue ----------
   Mesures relevees sur la maquette (page 1920 pt) :
     H2 ............ capitale 51.6 pt -> 74 px, interligne 0.95   (identique au H1)
     Eyebrow ....... capitale 18.7 pt -> 26.5 px, crochets cyan plus hauts
     Filet ......... 37 x 5 px cyan   (sous le H2 et sous chaque titre de pilier)
     Numero 01 ..... chiffre 28.8 pt  -> 41 px, cyan, graisse 700
     Titre pilier .. capitale ~14.7pt -> 21 px
     Description ... corps ~19.7 px, interligne 1.21
     Barre de liaison : 1660 de large, 4 descentes de 2.4 x 56 aux centres d'icone

   La section se scinde en deux au niveau de la barre : le fond y bascule dans
   un regime plus sombre, avec un vignettage horizontal marque (a y = 2200 :
   #034973 au bord contre #012947 au centre) qu'un degrade CSS ne peut pas
   rendre. Les deux fonds sont donc echantillonnes dans la maquette, comme
   ceux du hero et de la section 3.
*/
.mrc .s2{background:#03426A}
.mrc .s2-head{background:#010C17 url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/s2-fond-haut.webp) 0 0/100% 100% no-repeat;
         padding:84.5px 0 0}
.mrc .s2-body{position:relative;
         background:#03426A url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/s2-fond-bas.webp) 0 0/100% 100% no-repeat;
         padding:0 0 75.4px}
.mrc .s2 .wrap{max-width:1724px;margin:0 auto;padding:0 32px;text-align:center}

/* Surtitre entre crochets. Le seul exemplaire renseigne de la maquette est
   celui de la section 3 ; c'est donc lui qui fixe le style :
     lettres  capitale 18.7, chasse totale 383.1 px pour 24 signes
     crochets #0DA2D1, hauteur 36.5, fut de 4 px, a 13.4 px du texte
   Outfit etant plus large que la police d'origine, on cale la chasse
   (25 px, sans interlettrage) plutot que la capitale : a 26.5 px la ligne
   depasserait de 6.5 %, ce qui se voit bien plus qu'une capitale de 17.6.
   Les crochets de la section 2 sont plus petits (27.4) et vides dans la
   maquette : le libelle y est un texte d'attente. */
.mrc .eyebrow{font-size:clamp(15px,1.3vw,25px);text-transform:uppercase;letter-spacing:0;
         color:#EAF2FA;font-weight:300;margin-bottom:11.8px}
.mrc .eyebrow b{font-weight:700;color:#fff}
/* Les crochets ne sont pas le glyphe de la police : la maquette dessine un
   crochet tres etroit (6.7 de large pour 36.5 de haut, fut de 4). Outfit
   donnerait un crochet deux fois plus large a hauteur egale. On le trace
   donc en bordures. */
.mrc .eyebrow i{display:inline-block;box-sizing:border-box;
           width:.268em;height:1.46em;border:.16em solid var(--accent);
           vertical-align:middle;position:relative;top:-.164em}
.mrc .eyebrow i:first-child{border-right:0;margin-right:.536em}
.mrc .eyebrow i:last-child{border-left:0;margin-left:.42em}

.mrc .s2 h2{font-size:clamp(30px,3.85vw,74px);font-weight:300;line-height:.95;letter-spacing:-.012em;
       color:#fff;margin-bottom:58px}
.mrc .s2 h2 em{font-style:normal;font-weight:700;color:var(--accent)}

.mrc .dash{display:block;width:37px;height:5px;background:var(--accent);border-radius:1px}
.mrc .dash-lg{margin:0 auto 31px}

.mrc .body-copy{font-size:clamp(15px,1.15vw,22px);line-height:1.55;color:#D6E1F0;font-weight:300;
           margin:0 auto 110px}
.mrc .body-copy em{font-style:normal;font-weight:700;color:var(--accent)}

/* Barre de liaison et descentes.
   Toute cette famille de filets est tracee a 2.4 px dans la maquette, pas 1,
   et chacun s'eteint dans le sens de sa longueur. Les teintes ci-dessous sont
   relevees au rendu 300 dpi, pas approchees : un blanc a opacite constante ne
   les reproduit pas (le rouge chute vite, le bleu lentement, signe d'un mode
   de fusion Illustrator que CSS n'a pas). On peint donc les couleurs mesurees.
     barre    y 2109.6, 5 lignes de rendu = 2.4 px
     descente x 320.2 / 666.2 / 1036.8 / 1420.3, 2.4 x 56 */
.mrc .bus{width:min(1660px,100%);height:2.4px;margin:0 auto;
     background:linear-gradient(180deg,#83A6C1 0%,#709CBC 25%,#337CAB 50%,#005B95 75%,#00548A 100%)}
/* La maquette n'a pas un pas regulier : les quatre colonnes y sont calees sur
   leur contenu, d'ou des ecarts de 344, 368 puis 393. On garde une grille
   reguliere (c'est ce qui tient au redimensionnement) mais calee sur le pas
   moyen releve, 368.2, ce qui ramene l'erreur a 39 px aux extremites au lieu
   de 103 avec une grille de 400. */
.mrc .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
         width:min(1473px,100%);margin:0 auto;text-align:left}
.mrc .pillar{position:relative;padding:71.6px 16px 0 0}
.mrc .pillar::before{content:'';position:absolute;top:0;left:57.4px;width:2.4px;height:56px;
  background:linear-gradient(180deg,#82A3BD 0%,#6F9CBB 16%,#5191B6 31%,#2F84B1 45%,
             #1277AB 60%,#086AA3 74%,#015D96 88%,rgba(1,84,137,0) 100%)}
/* Les pictogrammes sont desormais les SVG d'origine, recadres sur leur trace :
   une unite SVG = un point de la maquette, d'ou des largeurs exactes.
   La premiere colonne de la grille reste fixe (124 px) pour que le texte ne
   bouge pas quand la largeur d'icone change d'un pilier a l'autre. */
.mrc .pillar{display:grid;grid-template-columns:124px 1fr;align-items:start}
.mrc .ico{display:block;height:auto;margin-left:20px}
.mrc .pillar:nth-child(1) .ico{width:75.8px;margin-top:9.5px}
.mrc .pillar:nth-child(2) .ico{width:77.8px;margin-top:21px}
.mrc .pillar:nth-child(3) .ico{width:85px;margin-top:12.8px}
.mrc .pillar:nth-child(4) .ico{width:79.2px;margin-top:12.8px}
.mrc .pbody{min-width:0}

.mrc .num{font-size:clamp(28px,2.14vw,41px);font-weight:700;color:var(--accent);line-height:1;
     letter-spacing:-.02em;margin-bottom:6px}
.mrc .pillar h3{font-size:clamp(15px,1.1vw,21px);line-height:1.16;text-transform:uppercase;
           font-weight:700;color:#fff;letter-spacing:.01em;margin-bottom:8px}
.mrc .pillar h3 span{font-weight:300;color:#BBCADC}
.mrc .pillar .dash{margin-bottom:8px}
.mrc .pillar p{font-size:clamp(14px,.99vw,19px);line-height:1.24;color:#CBD8E8;font-weight:300}

@media(max-width:1200px){
  .mrc .pillars{grid-template-columns:repeat(2,1fr);row-gap:56px;width:min(900px,100%)}
  .mrc .pillar:nth-child(n+3)::before{display:none}
  .mrc .pillar:nth-child(n+3){padding-top:0}
}
@media(max-width:900px){
  .mrc .s2{padding:64px 0 76px}
  .mrc .s2 .wrap{padding:0 22px}
  .mrc .body-copy{margin-bottom:64px}
  .mrc .body-copy br,.mrc .s2 h2 br{display:none}
  .mrc .bus{display:none}
  .mrc .pillars{grid-template-columns:1fr;row-gap:44px;text-align:left}
  .mrc .pillar{padding-top:0}
  .mrc .pillar::before{display:none}
  .mrc .pillar p br{display:none}
}

/* ---------- SECTION 3 : architecture triple couche ----------
   Releve maquette (page 1920 pt) :
     Eyebrow ......... capitale ~18.7 -> 26.5 px, meme composant qu'en section 2
     H2 .............. capitale 51.6  -> 74 px, interligne 0.95, 2 lignes a 70.5
     Barre de liaison  y 2863, x 131.5..1790.9 (1659 px), blanc a 32 %
     Descentes ....... 3, x 320.2 / 774.0 / 1227.4, hauteur 41, meme blanc
     Numero .......... chiffre 29.7 -> 41 px cyan
     Titre + soutitre  capitale 15.3 -> 21 px, interligne 24
     Filet cyan ...... 36.5 x 5.3
     Puces ........... corps 19 px, interligne 23.5
     Filets de puce .. degrade blanc 55 % -> 16 %, pleine largeur du bloc texte
   La section se scinde en deux au niveau de la barre : le fond y change de
   regime (plus sombre, avec un vignettage horizontal). Les deux fonds sont
   echantillonnes dans la maquette, comme celui du hero.
   Elle se ferme sur un aplat de 7 px #152540 releve a y 3373..3379. */
.mrc .s3{background:#0A537F;border-bottom:7px solid #152540}

.mrc .s3-head{background:#0A537F url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/s3-fond-haut.webp) 0 0/100% 100% no-repeat;
         padding:70.8px 32px 104.3px;text-align:center}
.mrc .s3-head h2{font-size:clamp(30px,3.85vw,74px);font-weight:300;line-height:.95;
            letter-spacing:-.012em;color:#fff;margin-bottom:0}
.mrc .s3-head h2 em{font-style:normal;font-weight:700;color:#3FA9F5}
.mrc .s3-head .eyebrow{margin-bottom:40.1px}

/* Le bloc bas commence a la barre de liaison, qui en marque donc le bord haut. */
.mrc .s3-body{position:relative;
         background:#052E4D url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/s3-fond-bas.webp) 0 0/100% 100% no-repeat;
         padding:83.7px 32px 63.5px}
.mrc .bus3{position:absolute;top:-1.2px;left:50%;transform:translateX(-50%);
      width:min(1659px,calc(100% - 64px));height:2.4px;
      background:linear-gradient(180deg,#85ACC8 0%,#538EB6 25%,#136BA3 50%,#025D96 75%,#02568C 100%)}

.mrc .layers{display:grid;grid-template-columns:repeat(3,1fr);
        width:min(1395px,100%);margin:0 auto;text-align:left}

/* Descente verticale depuis la barre jusqu'au-dessus de chaque pictogramme,
   centree sur celui-ci (releve : centre d'icone a 319.7 / 773.2 / 1224.9). */
.mrc .layer{position:relative;display:flex;gap:20px;align-items:flex-start}
.mrc .layer::before{content:'';position:absolute;top:-83.1px;left:48.4px;width:2.4px;height:56px;
  background:linear-gradient(180deg,#83A9C5 0%,#79A5C3 8%,#6EA0C1 16%,#5194BB 31%,#3087B6 45%,
             #1379AE 60%,#096CA6 74%,#035E98 88%,rgba(3,84,137,0) 100%)}

/* Les pictogrammes ne sont pas alignes sur le haut du chiffre : la maquette
   les descend d'environ 18 px (haut d'icone releve a 2969.8). */
.mrc .icos{flex:none;width:99.3px;display:flex;flex-direction:column;gap:24.9px;align-items:center}
.mrc .layer:nth-child(1) .icos{margin-top:22.2px}
.mrc .layer:nth-child(2) .icos{margin-top:18.6px}
.mrc .layer:nth-child(3) .icos{margin-top:26.2px}
.mrc .icos img{height:auto;display:block}
.mrc .layer:nth-child(1) .icos img:first-child{width:94.2px}
.mrc .layer:nth-child(1) .icos img:last-child{width:99.3px}
.mrc .layer:nth-child(2) .icos img{width:93.7px}
.mrc .layer:nth-child(3) .icos img{width:96.2px}

/* Pas de retrait a droite : les filets de puce doivent courir sur toute
   la largeur du bloc texte, leur fin etant de toute facon eteinte. */
.mrc .lbody{flex:1;min-width:0}
/* Le chiffre est cale 4.7 px plus bas que ne le donne son interligne :
   la maquette pose le haut du 0 a 2961.7 et la capitale du titre a 3000.1. */
.mrc .s3 .num{font-size:clamp(28px,2.14vw,41px);font-weight:700;color:#3FA9F5;line-height:1;
         letter-spacing:-.02em;padding-top:10.4px;margin-bottom:-1.3px}
.mrc .s3 h3{font-size:clamp(15px,1.1vw,21px);line-height:1.14;text-transform:uppercase;
       font-weight:700;color:#fff;letter-spacing:.01em;margin-bottom:10px}
.mrc .s3 h3 span{font-weight:300;color:#DCE7F2}
.mrc .s3 .dash{margin-bottom:11px}

.mrc .s3 ul{list-style:none}
/* Le filet qui separe deux puces vire du gris-bleu clair au bleu franc sur
   ses 357 px, puis s'arrete net. Ce n'est donc pas un blanc en fondu : les
   cinq teintes ci-dessous sont relevees au quart sur les trois colonnes,
   qui donnent le meme degrade a 2 unites pres. Pseudo-element plutot que
   border-image, dont le decoupage en neuf zones comprime le degrade. */
.mrc .s3 li{position:relative;font-size:clamp(14px,.99vw,19px);line-height:1.24;color:#DCE7F2;
       font-weight:300;padding-bottom:12px;margin-bottom:12px}
.mrc .s3 li:not(:last-child)::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2.4px;
  background:linear-gradient(90deg,#879FB6 0%,#628FAF 25%,#2879A4 50%,#0B6296 75%,#034776 100%)}
.mrc .s3 li:last-child{padding-bottom:0;margin-bottom:0}

@media(max-width:1200px){
  .mrc .layers{grid-template-columns:1fr;row-gap:52px;width:min(760px,100%)}
  .mrc .layer::before{display:none}
  .mrc .bus3{display:none}
  .mrc .s3-body{padding-top:64px;margin-top:64px}
}
@media(max-width:900px){
  .mrc .s3-head{padding:56px 22px 0}
  /* On garde le retour entre le titre et son sous-titre : sans lui la ligne
     APP APPLICATION MOBILE UNIVERSELLE
   devient illisible. Seul le retour interne au sous-titre saute. */
  .mrc .s3-head h2 br,.mrc .s3 h3 span br{display:none}
  .mrc .s3-body{padding:48px 22px 52px;margin-top:48px}
  .mrc .layer{gap:18px}
  .mrc .icos{width:74px}
  .mrc .layer:nth-child(1) .icos img:first-child,
  .mrc .layer:nth-child(1) .icos img:last-child{width:74px}
  .mrc .layer:nth-child(2) .icos img,.mrc .layer:nth-child(3) .icos img{width:72px}
  .mrc .s3 li br{display:none}
}

/* ---------- SECTION 4 : la demonstration ----------
   Releve maquette (page 1920 pt) :
     Embleme ....... 96.0 x 110.8, y 3515.8..3626.6
     Eyebrow ....... encre 811.5..1114.9, y 3657.2..3684.6
     H2 ............ capitale 51.8 -> 74 px, haut du L a 3754.3
     Chapo ......... 2 lignes, pas de 34 -> 22 px / interligne 1.55
     Bouton ........ cadre cyan 610 x 61 a y 3997..4058, interieur #10151F
                     accents (croix et pastille) debordant : 616.3 x 68.1
                     commande en mono #00E5FF, libelle blanc capitale 13.4
     Panneau ....... 545.8 x 468.9, y 4092.7..4561.6
   Le fond est un degrade strictement vertical (verifie sur huit colonnes,
   ecart nul) : un seul echantillon de 8 px de large suffit, etire.
*/
.mrc .s4{background:#08213A url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/s4-fond.webp) 0 0/100% 100% no-repeat;
    padding:135.8px 32px 98.4px;text-align:center}

.mrc .embleme{display:block;width:96px;height:auto;margin:0 auto 30.6px}

/* Le corps des lettres est le meme qu'en section 3 (une fois cale sur la
   chasse), mais les crochets y sont nettement plus courts : 26.9 de haut
   contre 36.5, pour un fut identique de 4 px. */
.mrc .s4 .eyebrow{margin-bottom:59.2px}
.mrc .s4 .eyebrow i{width:.288em;height:1.076em;top:-.055em}

.mrc .s4 h2{font-size:clamp(30px,3.85vw,74px);font-weight:300;line-height:.95;letter-spacing:-.012em;
       color:#fff;margin-bottom:50.4px}
.mrc .s4 h2 em{font-style:normal;font-weight:700;color:#3FA9F5}

.mrc .s4-lede{font-size:clamp(15px,1.15vw,22px);line-height:1.55;color:#D6E1F0;font-weight:300;
         margin:0 auto 56.8px}

/* Bouton terminal.
   Le cadre est le trace d'origine (action3), qui porte deja son aplat interieur
   #10151F : il sert donc de fond a lui seul. Il est etire librement
   (preserveAspectRatio="none") car la maquette l'utilise en 616.3 x 68.1 la ou
   le fichier fait 613.2 x 63.
   Deux marques s'y ajoutent, absentes du fichier : une croix de 9.5 posee sur
   le coin superieur gauche et une pastille de 7 centree sur le coin inferieur
   gauche (releve x 658.8 / 659.25). */
.mrc .btn-term{position:relative;display:inline-flex;align-items:center;gap:24.3px;
          width:616.3px;max-width:100%;height:68.1px;box-sizing:border-box;
          padding:0 0 0 37.2px;text-decoration:none;text-transform:uppercase;
          background:url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/btn-terminal.svg) 0 0/100% 100% no-repeat;
          margin-bottom:31.6px;transition:filter .18s}
.mrc .btn-term:hover{filter:brightness(1.25)}
.mrc .btn-term::before{content:'';position:absolute;left:-.05px;top:-.65px;width:9.5px;height:9.5px;
  background:linear-gradient(var(--accent),var(--accent)) center/1.2px 100% no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/100% 1.2px no-repeat}
.mrc .btn-term::after{content:'';position:absolute;left:1.65px;top:60.9px;width:7px;height:7px;
  box-sizing:border-box;border:1.5px solid var(--accent);border-radius:50%;background:#082C49}
.mrc .btn-term .cmd,.mrc .btn-term .lbl{position:relative;white-space:nowrap}
/* Chasse relevee : pas de 14.5 entre glyphes, capitale 11.5.
   JetBrains Mono avance de 0.6 em, d'ou 16 px et 0.31 em d'interlettrage. */
.mrc .btn-term .cmd{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:400;
               letter-spacing:.31em;color:#00E5FF}
.mrc .btn-term .lbl{font-size:19px;font-weight:300;letter-spacing:0;color:#fff}

.mrc .demo-panneau{display:block;width:546px;max-width:100%;height:auto;margin:0 auto}

@media(max-width:900px){
  .mrc .s4{padding:78px 22px 64px}
  .mrc .embleme{width:76px;margin-bottom:24px}
  .mrc .s4 .eyebrow{margin-bottom:40px}
  .mrc .s4 h2{margin-bottom:28px}
  .mrc .s4-lede{margin-bottom:38px}
  .mrc .s4-lede br{display:none}
  .mrc .btn-term{width:100%;height:auto;min-height:62px;gap:16px;padding:14px 18px;flex-wrap:wrap;
            justify-content:center;text-align:center}
  /* La pastille est calee sur le coin inferieur gauche, qui descend avec la
     hauteur du bouton une fois le libelle passe sur deux lignes. */
  .mrc .btn-term::after{top:auto;bottom:-3.5px}
  .mrc .btn-term .cmd{font-size:19px}
  .mrc .btn-term .lbl{font-size:15px}
}

/* ---------- SECTION 5 : le teaser secteurs ----------
   Releve maquette (page 1920 pt) :
     Eyebrow ....... crochets 26.9 comme en section 4
     H2 ............ 2 lignes, pas de 70.1 -> 74 px / interligne 0.95
     Filet cyan .... 36.4 x 5.3 a y 4997.4
     Appel a l'action  chevrons 36 x 19 puis libelle, y 5075.2..5095.4
     Ruche ......... 3 hexagones pointe en haut de 494.2 de large
                     (hauteur 570.7 = largeur x 2/racine(3), donc reguliers)
                     hex 1 : x 723.6..1217.8, sommet haut y 5258.9
                     hex 2 : x 476.6..970.8,  sommet haut y 5686.4
                     hex 3 : x 970.7..1464.9, sommet haut y 5686.4
                     Le pave complet fait 988.3 x 998.2 et se centre a x 970.7.
     Trait ......... 2 px, et sa teinte tourne autour du contour : clair a
                     gauche et en bas (#86AECB), sombre en haut et a droite
                     (#01568C). Un degrade diagonal bas-gauche vers haut-droite
                     restitue les six aretes a moins de 15 unites pres.
   Le fond est de nouveau un degrade strictement vertical.
*/
.mrc .s5{position:relative;background:#055C8C url(https://mrc-protocol.com/wp-content/uploads/mrc-charte/s5-fond.webp) 0 0/100% 100% no-repeat;
    padding:95.6px 32px 181px;text-align:center}

.mrc .s5 .eyebrow{margin-bottom:21.1px}
.mrc .s5 .eyebrow i{width:.288em;height:1.076em;top:-.055em}

.mrc .s5 h2{font-size:clamp(30px,3.85vw,74px);font-weight:300;line-height:.95;letter-spacing:-.012em;
       color:#fff;margin-bottom:47.7px}
.mrc .s5 h2 em{font-style:normal;font-weight:400;color:#3FA9F5}

.mrc .s5 .dash-lg{margin:0 auto 71.3px}

/* Appel a l'action a chevrons : meme composant que le double appel du hero,
   cale sur la chasse (20 px, sans interlettrage) et non sur la capitale. */
.mrc .cta-chev{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
          font-size:clamp(13px,1.04vw,20px);letter-spacing:0;text-transform:uppercase;
          color:var(--accent);transition:opacity .18s}
.mrc .cta-chev:hover{opacity:.78}
.mrc .cta-chev b{color:#fff;font-weight:700}
.mrc .cta-chev .chev{height:.955em;width:auto;flex:none;transform:translateY(.06em)}

/* La ruche : le trace est un SVG etire sur le pave, les trois blocs de texte
   sont poses en absolu aux offsets releves dans l'hexagone 1 et repetes. */
.mrc .ruche{position:relative;width:min(988.3px,100%);margin:161.4px auto 0;
       aspect-ratio:988.3/998.2}
.mrc .ruche-trace{position:absolute;inset:0;width:100%;height:100%}

.mrc .secteur{position:absolute;width:41.6%;text-align:left}
/* Les trois blocs ne sont pas poses au meme offset dans leur hexagone : la
   maquette les cale a la main, l'ecart entre le bas du pictogramme et le
   chiffre passant de 32 a 24 selon la colonne. On aligne donc sur le chiffre,
   qui est le repere visuel, et le pictogramme suit. */
.mrc .s-1{left:34.77%;top:12.0%}
.mrc .s-2{left:11.37%;top:55.62%}   /* colonne 2 : 15.8 px de retrait de plus */
.mrc .s-3{left:59.77%;top:52.95%}
/* Le pictogramme deborde de 5.9 px a gauche du bloc de texte. */
.mrc .secteur img{display:block;height:auto;margin:0 0 17.8px -5.9px}
.mrc .s-1 img{width:110.2px}
.mrc .s-2 img{width:83.6px}
.mrc .s-3 img{width:98.7px}

.mrc .s5 .num{font-size:clamp(28px,2.14vw,41px);font-weight:700;color:var(--accent);line-height:1;
         letter-spacing:-.02em;padding-top:10.4px;margin-bottom:-1.3px}
.mrc .s5 h3{font-size:clamp(15px,1.1vw,21px);line-height:1.14;text-transform:uppercase;
       font-weight:700;color:#fff;letter-spacing:.01em;margin-bottom:9px}
.mrc .s5 h3 span{font-weight:300;color:#DCE7F2}
.mrc .s5 .secteur .dash{margin-bottom:11px}
.mrc .secteur p{font-size:clamp(13px,.89vw,17px);line-height:1.44;font-style:italic;
           font-weight:300;color:#C6D8E8}

@media(max-width:900px){
  .mrc .s5{padding:64px 22px 0}
  .mrc .s5 h2 br{display:none}
  .mrc .s5 .dash-lg{margin-bottom:44px}
  .mrc .cta-chev{flex-wrap:wrap;justify-content:center;text-align:center}
  /* Sous 900 px la ruche perdrait toute lisibilite : on abandonne le pavage
     et on empile les trois blocs, le trace disparait. */
  .mrc .ruche{width:100%;aspect-ratio:auto;margin:56px auto 0;display:flex;
         flex-direction:column;gap:48px}
  .mrc .ruche-trace{display:none}
  .mrc .secteur{position:static;width:100%}
  .mrc .secteur img{margin-left:0}
  .mrc .s-1 img{width:82px}
  .mrc .s-2 img{width:62px}
  .mrc .s-3 img{width:74px}
  .mrc .secteur p br{display:none}
}

/* --- integration Elementor : les conteneurs ne doivent rien imposer --- */
.elementor-widget-html:has(> .mrc){width:100%}
/* Hello Elementor pose line-height:1.5 sur body. Herite, il gonfle chaque bloc
   sans interligne declare de 3 a 5 px, soit 26 px cumules sur la page. Le
   prototype, lui, tourne sur le « normal » du navigateur : on le retablit. */
.mrc{width:100%;font-family:Outfit,sans-serif;font-weight:300;color:#fff;
     line-height:normal;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mrc img{max-width:100%}
.mrc a{box-shadow:none}