/* ═══════════════════════════════════════════════════════════════════════
   Mon image — masterclass design (validée par Dérick le 04/10/2026)
   Chargée en dernier sur toutes les pages : bandeau métal, signature
   MON / œil / IMAGE empilés (tour Eiffel en A, choix « 3 b-2 » du 05/10 :
   trait bleu en haut, trait rouge en bas, filet bleu à gauche, rouge à droite),
   devise, barre d'onglets unique,
   têtes crème (plus de bloc noir), cartes, marques dessinées, saisons.
   Les !important ne servent qu'à passer devant les styles en ligne
   historiques des pages (placés dans le <body>).
   ═══════════════════════════════════════════════════════════════════════ */
:root{--mi-nuit:#0B1D4A;--mi-or:#C9A55C;--mi-or-t:#946823;--mi-metal-1:#F4F6F8;--mi-metal-2:#E6E9ED;--mi-metal-3:#DCE1E6}
h1,h2,.big,.rsx-h1{text-wrap:balance}

/* ── 1. le bandeau ── */
.mlh{position:relative;z-index:60;overflow:visible;overflow-x:clip;overflow-y:visible;min-height:88px;border-bottom:0!important;
  background:
    radial-gradient(ellipse 42% 140% at 50% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,rgba(20,30,50,.008) 1px 2px),
    linear-gradient(180deg,var(--mi-metal-1) 0%,var(--mi-metal-2) 50%,var(--mi-metal-3) 100%)!important;
  box-shadow:inset 0 1px 0 #fff,0 12px 26px -22px rgba(11,29,74,.45)!important}
.mlh-in::before{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 75%);
  transform:translateX(-120%) skewX(-12deg);animation:miReflet 4.2s cubic-bezier(.45,0,.25,1) .9s 1 both}
@keyframes miReflet{to{transform:translateX(360%) skewX(-12deg)}}
/* le tricolore se lit de haut en bas : trait bleu nuit en haut, blanc métal, trait rouge en bas (1 px chacun) */
.mlh::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(11,29,74,0),rgba(11,29,74,.9) 12%,rgba(11,29,74,.9) 88%,rgba(11,29,74,0))}
.mlh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(178,23,44,0),rgba(178,23,44,.9) 12%,rgba(178,23,44,.9) 88%,rgba(178,23,44,0))}
.mlh-in{max-width:none!important;min-height:88px;padding:16px 18px 18px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center!important;gap:8px;position:relative}
.mlh .mlh-logo{display:flex!important;align-items:center;justify-content:center;gap:32px!important;width:100%;text-decoration:none;color:var(--mi-nuit);min-height:0}
.mlh .mi-mot{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:34px;line-height:1;letter-spacing:.36em;margin-right:-.36em;white-space:nowrap;color:var(--mi-nuit);text-shadow:0 1px 0 rgba(255,255,255,.75)}
.mlh .mlh-logo img.mi-tour{height:1.06em!important;width:auto!important;display:inline!important;vertical-align:-.07em;margin-right:.36em}
.mlh .mi-pile{display:flex;flex-direction:column;align-items:center;gap:7px}
.mlh .mi-pile .mi-mot{font-size:30px}
.mlh .mlh-logo img.mi-oeil-cr{height:30px!important;width:auto!important;display:block!important}
.mlh .mlh-logo img.mi-tour-a{height:.68em!important;width:auto!important;display:inline!important;vertical-align:baseline;margin:0 .36em 0 .02em}
.mlh .mi-filet{flex:1 1 0;max-width:340px;min-width:24px;height:1px;background:linear-gradient(90deg,rgba(11,29,74,0),#0B1D4A 50%,rgba(11,29,74,0));
  animation:miFilet 1.4s cubic-bezier(.2,.8,.2,1) .3s 1 both}
@keyframes miFilet{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.mlh .mi-devise{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.28em;margin-right:-.28em;text-transform:uppercase;color:#A67C37;
  opacity:0;animation:miDevise 1.2s ease 1.3s 1 forwards}
@keyframes miDevise{to{opacity:1}}
.mlh .mi-filet-d{background:linear-gradient(90deg,rgba(178,23,44,0),#B2172C 50%,rgba(178,23,44,0))}
@media (prefers-reduced-motion:reduce){ .mlh-in::before{display:none} .mlh .mi-filet,.mlh .mi-devise{animation:none;opacity:1} }
.mlh-in .mlh-droite,.mlh-in>#mrlLang{position:absolute!important;right:18px;top:33px;transform:translateY(-50%)}
#mrlLangBtn{background:transparent!important;border:0!important;color:var(--mi-nuit)!important;box-shadow:none!important;letter-spacing:.1em;padding:8px 6px!important}
#mrlLangBtn:hover,#mrlLangBtn[aria-expanded="true"]{background:rgba(11,29,74,.06)!important}
@media (max-width:900px){ .mlh .mi-filet{max-width:120px} }
@media (max-width:600px){
  .mlh,.mlh-in{min-height:64px} .mlh-in{padding:12px 62px 13px 62px!important;gap:6px}
  .mlh .mlh-logo{gap:10px!important} .mlh .mi-filet{flex:0 0 34px;min-width:0}
  .mlh .mi-pile{gap:4px} .mlh .mi-pile .mi-mot{font-size:19px}
  .mlh .mlh-logo img.mi-oeil-cr{height:19px!important}
  .mlh .mi-mot{font-size:19px;letter-spacing:.24em;margin-right:-.24em} .mlh .mlh-logo img.mi-tour-a{margin-right:.24em!important} .mlh .mlh-logo img.mi-tour{margin-right:.24em}
  .mlh .mi-devise{font-size:7.5px;letter-spacing:.24em}
  .mlh-in .mlh-droite,.mlh-in>#mrlLang{right:4px;top:25px} }
@media (max-width:360px){ .mlh .mi-mot,.mlh .mi-pile .mi-mot{font-size:17px} .mlh .mi-filet{flex-basis:22px} .mlh-in{padding-left:52px!important;padding-right:52px!important} }

/* ── 2. têtes de page : crème, onglets en barre, plus de bloc noir ── */
.mi-tete{background:transparent!important;color:#241f1a!important;padding:26px 18px 0!important}
.mi-tete #siteTabs{display:flex!important;width:max-content;max-width:100%;margin:0 auto!important;padding:5px!important;gap:4px!important;
  background:#FFFDFA;border:1px solid #E7DBCB;border-radius:999px;box-shadow:0 10px 30px -18px rgba(80,60,30,.30);-webkit-mask-image:none!important;mask-image:none!important}
.mi-tete #siteTabs .stab{color:#5b5147!important;border:0!important;border-radius:999px;padding:9px 16px!important;font-size:13.5px!important;min-height:0!important;text-decoration:none}
.mi-tete #siteTabs .stab:hover{color:#241f1a!important}
.mi-tete #siteTabs .stab:focus-visible{outline:2px solid var(--mi-or-t)!important;outline-offset:2px}
#acces .compte-head,#espace .esp-top,.page-head{background:transparent!important;box-shadow:none!important;clip-path:none!important;border-bottom:0!important;color:#241f1a!important}
#acces .compte-head h1,#espace .esp-top h1,.page-head h1{color:#14110E!important}
#acces .compte-head p,#espace .esp-top #depuis,.page-head p{color:#5b5147!important}
.page-head .langues{color:#5b5147!important}
.page-head .langues a{color:#5b5147!important}
.page-head .langues a[aria-current="page"]{color:var(--mi-or-t)!important}
.page-head .langues a:focus-visible,.mi-tete :focus-visible{outline:2px solid var(--mi-or-t)!important}
#espace .esp-top{border-bottom:1px solid #E7DBCB!important;padding-bottom:24px!important}
#deco{background:transparent!important;color:#5b5147!important;border:1px solid #D9CBB6!important}

/* ── 3. accueil ── */
.hero h1.big{max-width:27ch;margin-left:auto;margin-right:auto}
.hcard{display:flex;flex-direction:column}
.hcard .hgo{margin-top:auto;padding-top:6px}
.hcard .mur-annonce{display:none!important}   /* une seule mention : .mur-unique */
html.mrl-anonyme .mur-unique{display:block;text-align:center;font-weight:500;margin:-6px auto 18px}
.hcard.feature h3{display:flex;align-items:center;gap:12px}
.hcard.feature h3 img{height:26px;width:auto}
.mi-etapes{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.mi-etapes span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mi-or-t);border:1px solid #E3D3B3;border-radius:999px;padding:5px 11px;background:#FFFAF0}
.mi-etapes i{font-style:normal;font-family:"Cormorant Garamond",serif;font-size:14px;margin-right:6px;color:#B8934A}
.reload-profil{border:1px solid #E7DBCB!important;background:#FFFDFA!important}
.foot{border-top:1px solid transparent;border-image:linear-gradient(90deg,rgba(201,165,92,0),rgba(201,165,92,.6),rgba(201,165,92,0)) 1;padding-top:22px}

/* ── 4. marques dessinées (à la place des émojis) ── */
.mk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;margin-right:8px;vertical-align:1px;flex:none}
.mk-ok{background:#F1F7F2;color:#3F8A5A;border:1px solid #BCD9C5}
.mk-ko{background:#FBF0EE;color:#BD5B4F;border:1px solid #E6C3BD}

/* ── 5. Mon espace ── */
.ana-note{font-size:12.5px!important;color:#7a6f63!important}
.mi-vide{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0;text-align:center}
.mi-vide img{height:34px;width:auto}
.mi-vide b{font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:600;color:#14110E}
.mi-vide span{color:#7a6f63;font-size:14px}
.mi-vide a.mi-vide-btn{display:inline-flex!important;align-items:center;min-height:44px;margin-top:4px;background:linear-gradient(96deg,#A67C37,#C9A55C)!important;color:#14110E!important;text-decoration:none!important;border:0!important;border-radius:13px;padding:0 20px!important;font-weight:600}
.mi-google-haut{margin:0 0 6px}
.mi-google-haut .btn-google{width:100%}
.mi-google-haut .sep-ou{margin:18px 0 14px}

/* ── 6. pages d'analyse ── */
.page-wrap h2{position:relative;padding-left:14px}
.page-wrap h2::before{content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:linear-gradient(#C9A55C,rgba(201,165,92,.2))}
.mi-saisons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 8px}
.mi-saison{background:#FFFDFA;border:1px solid #E7DBCB;border-radius:14px;padding:12px 12px 10px}
.mi-saison b{display:block;font-family:"Cormorant Garamond",serif;font-size:17px;font-weight:600;color:#14110E;margin-bottom:8px}
.mi-saison .nuances{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.mi-saison .nuances i{display:block;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.mi-fam{grid-column:1/-1;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mi-or-t);margin:10px 0 -2px}
@media (max-width:600px){ .mi-saisons{grid-template-columns:1fr} }

/* la phrase sous la tour Eiffel : la suite sur sa propre ligne */
.ft-phrase em{display:block}

/* ═══ 06/10/2026 (Dérick) : bleu, blanc, rouge AU-DESSUS du trait tricolore ; dessous, les couleurs d'avant ═══ */
.mi-rm,#home .hero h1.big em,.modtitle .g.mi-rm{background:linear-gradient(180deg,#E04A5E 0%,#C21E36 38%,#9E1226 62%,#C8344A 82%,#8A0F22 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.mi-rm,.modtitle .g.mi-rm{font-style:italic;padding:0 .04em}
#home .hero h1.big{color:#0B1D4A!important}
#home .hero h1.big em{padding:0 .05em}
#home .hero{padding-bottom:6px}
#home .hero::after{content:'';display:block;width:132px;height:3px;margin:26px auto 6px;border-radius:2px;background:linear-gradient(90deg,#0B1D4A 0 33.3%,#E6E9ED 33.3% 66.6%,#B2172C 66.6% 100%);box-shadow:0 0 0 1px rgba(11,29,74,.06)}
#home > h2.section-title{margin-top:44px!important}
.mi-tric{display:block;width:132px;height:3px;margin:22px auto 4px;border-radius:2px;background:linear-gradient(90deg,#0B1D4A 0 33.3%,#E6E9ED 33.3% 66.6%,#B2172C 66.6% 100%);box-shadow:0 0 0 1px rgba(11,29,74,.06)}
.rsx-h1{color:#0B1D4A!important}
.rsx-intro{color:#33405E!important}
.rsx-fiche-ouverte .mi-tric{display:none}
.modtitle.mi-haut{color:#0B1D4A!important}
.sub.mi-haut-sub{color:#33405E!important}

/* 06/10/2026 (Dérick : « je n'arrive pas à scroll pour l'italien ») : le bandeau coupait le menu des langues
   (Español, Italiano invisibles). Le bandeau ne coupe plus qu'à l'horizontale (le reflet) ; le menu déborde
   vers le bas, au-dessus des onglets. Navigateur sans « overflow:clip » : pas de reflet, pour ne jamais élargir la page. */
@supports not (overflow:clip){.mlh{overflow:visible}.mlh-in::before{display:none}}
.mlh-in #mrlLang{z-index:70}
#mrlLangMenu{max-height:calc(100vh - 80px);overflow-y:auto}
.mlh-in{z-index:2}
#mrlLangMenu{background:#101412!important;opacity:1!important}
