/* ============================================================================
   Modul@net — components.css
   ----------------------------------------------------------------------------
   Boutons, cartes, bandes ivoire et cuivre, tarifs, FAQ,
   formulaire d'audit, Modu. Réutilisables sur toutes les pages.
   ============================================================================ */

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;border:0;cursor:pointer;
  font-family:var(--mn-sans);font-size:var(--mn-t-body);font-weight:500;letter-spacing:-.01em;
  padding:16px 26px;border-radius:var(--mn-r-pill);position:relative;overflow:hidden;
  transition:transform .3s var(--mn-e-out),box-shadow .3s var(--mn-e-out),background .3s}
.btn .ar{transition:transform .3s var(--mn-e-out)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn-p{background:linear-gradient(120deg,#F7B081,#E27B4C);color:#231207;
  box-shadow:0 8px 34px rgba(223,122,54,.22),inset 0 0 0 1px rgba(255,196,152,.6)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(223,122,54,.34),inset 0 0 0 1px rgba(255,196,152,.8)}
.btn-g{background:rgba(255,255,255,.05);color:var(--mn-text);box-shadow:inset 0 0 0 1px var(--mn-line)}
.btn-g:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-dark{background:#1B1410;color:var(--mn-ivory);box-shadow:inset 0 0 0 1px rgba(32,27,23,.2)}
.btn-dark:hover{background:#2A201A;transform:translateY(-2px)}

/* ---------- cartes ---------- */
.card{background:var(--mn-surf-1);border:1px solid var(--mn-line);border-radius:var(--mn-r-m);
  padding:clamp(24px,2.4vw,34px);position:relative;overflow:hidden;isolation:isolate;
  transition:border-color .35s,transform .45s var(--mn-e-out)}
.card:hover{border-color:rgba(242,145,100,.38)}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.15em;text-transform:uppercase;color:var(--mn-faint)}
.card h3{margin-top:20px;font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);line-height:1.08;letter-spacing:-.03em}
.card>p{margin-top:16px;color:var(--mn-muted);font-size:var(--mn-t-body);max-width:44ch}
.card .go{margin-top:auto;padding-top:26px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;border-top:1px solid var(--mn-line-soft);color:var(--mn-text);font-size:var(--mn-t-body)}
.card .go .ar{color:var(--mn-copper)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(242,145,100,.13),transparent 62%);
  transition:opacity .4s}
.card:hover::after{opacity:1}

/* ---------- bandes ivoire / cuivre ---------- */
.band{border-radius:var(--mn-r-xl) var(--mn-r-xl) 0 0;position:relative;overflow:hidden}
.band--ivory{background:var(--mn-ivory);color:var(--mn-on-ivory)}
.band--ivory .eyebrow{color:var(--mn-on-ivory-label)}
.band--ivory .eyebrow::before{background:var(--mn-copper-dark)}
.band--ivory .tt em{color:var(--mn-copper-dark)}
.band--ivory .lede{color:var(--mn-on-ivory-dim)}
.band--copper{background:var(--mn-band-copper);color:#1B0E06}
.band--copper .eyebrow{color:var(--mn-on-copper)}
.band--copper .eyebrow::before{background:var(--mn-on-copper)}
.band--copper .tt em{color:var(--mn-on-copper-em)}
.band--copper .lede{color:var(--mn-on-copper-lede)}
.band + .band{border-radius:var(--mn-r-xl)}

@media (max-width:1000px){
  .head{grid-template-columns:1fr}
  .links{display:none}
  .burger{display:block}
  .lang{margin-left:auto}
  .hero{min-height:0}
  .hero .art{object-position:66% 42%}
  .hero .veil{background:linear-gradient(180deg,rgba(9,10,12,.72),rgba(9,10,12,.95) 58%),
    linear-gradient(0deg,var(--mn-bg) 2%,transparent 34%)}
  .band,.band + .band{border-radius:var(--mn-r-l) var(--mn-r-l) 0 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ============================================================
   Composants de substance
   ============================================================ */

/* ---------- 06 · tarifs ---------- */
.ptop{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  margin-bottom:30px}
.pswitch{display:inline-flex;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--mn-line);
  border-radius:var(--mn-r-pill);padding:4px}
.pswitch button{background:none;border:0;cursor:pointer;padding:10px 20px;border-radius:var(--mn-r-pill);
  color:var(--mn-dim);font-family:var(--mn-sans);font-size:var(--mn-t-body);font-weight:500;transition:.25s}
.pswitch button[aria-pressed="true"]{background:linear-gradient(120deg,#F7B081,#E27B4C);color:#231207}
.pswitch em{font-style:normal;opacity:.72;margin-left:8px;font-size:var(--mn-t-body)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,26px);align-items:stretch}
.plan{background:var(--mn-surf-1);border:1px solid var(--mn-line);border-radius:var(--mn-r-m);
  padding:clamp(24px,2.3vw,34px);display:flex;flex-direction:column;gap:20px;position:relative;
  transition:transform .4s var(--mn-e-out),border-color .35s}
.plan:hover{transform:translateY(-4px)}
.plan.feat{background:var(--mn-ivory);color:var(--mn-on-ivory);border-color:transparent;
  box-shadow:0 30px 70px rgba(242,145,100,.18)}
.plan .tag{display:flex;justify-content:space-between;font-family:var(--mn-mono);font-size:var(--mn-t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mn-faint)}
.plan.feat .tag{color:var(--mn-on-sheet-dim)}
.plan.feat .tag .fl{color:var(--mn-copper-dark)}
.plan .price{display:flex;align-items:baseline;gap:8px;font-family:var(--mn-serif);font-size:3.2rem;
  line-height:1;letter-spacing:-.03em}
.plan .price .u{font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.06em;color:var(--mn-faint)}
.plan.feat .price .u{color:var(--mn-on-sheet-dim)}
.plan .save{font-family:var(--mn-mono);font-size:var(--mn-t-meta);letter-spacing:.06em;color:var(--mn-copper);
  min-height:14px;opacity:0;transition:opacity .3s;margin-top:-14px}
.plan.feat .save{color:var(--mn-copper-dark)}
.plan .save.on{opacity:1}
.plan .desc{color:var(--mn-muted);font-size:var(--mn-t-body)}
.plan.feat .desc{color:var(--mn-on-ivory-dim)}
.plan ul{list-style:none;margin:0;padding-top:20px;border-top:1px solid var(--mn-line-soft);
  display:flex;flex-direction:column;gap:11px;font-size:var(--mn-t-body);color:var(--mn-muted)}
.plan.feat ul{border-top-color:rgba(32,27,23,.14);color:var(--mn-on-ivory-dim)}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mn-copper);
  margin-top:9px;flex:none}
.plan.feat li::before{background:var(--mn-copper-dark)}
.plan .btn{margin-top:auto;justify-content:center}
.hostline{margin-top:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  justify-content:space-between;border:1px solid var(--mn-line);border-radius:var(--mn-r-m);
  padding:22px 26px;background:var(--mn-surf-1)}
.hostline p{color:var(--mn-muted);font-size:var(--mn-t-body)}
.hostline .mono{color:var(--mn-text)}

/* La carte : ce qui s'achète à l'unité, sous les abonnements.
   Une ligne = une prestation, son prix, son unité. Grille auto-fit pour que
   le passage à une colonne se fasse sans point de rupture écrit à la main. */
.carte{margin-top:24px;border:1px solid var(--mn-line);border-radius:var(--mn-r-m);
  background:var(--mn-surf-1);padding:8px 26px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:0 44px}
.carte>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding-block:17px;border-bottom:1px solid var(--mn-line-soft)}
.carte>div:last-child{border-bottom:0}
@media (min-width:1000px){
  /* Sur deux colonnes, l'avant-dernière ligne est aussi en bas d'une colonne. */
  .carte>div:nth-last-child(2){border-bottom:0}
}
.carte dt{font-size:var(--mn-t-body);color:var(--mn-text)}
.carte dd{margin:0}
/* Le prix pousse à droite ; la note passe à la ligne sous les deux. */
.carte dd.p{margin-left:auto;white-space:nowrap}
/* 16 px, pas 13 : c'est une phrase qu'on lit, pas une étiquette. Plancher
   typographique du brief (correction obligatoire n° 4). */
.carte dd.n{flex-basis:100%;color:var(--mn-faint);font-size:var(--mn-t-body);line-height:1.5}
.carte dd.p b{font-family:var(--mn-mono);font-size:1.0625rem;font-weight:400;
  color:var(--mn-copper);font-variant-numeric:tabular-nums}
/* 14 px : « HTVA · une fois » est une mention lue, pas une étiquette de
   catégorie. 11 px la rendait illisible sur un site vendu à des dirigeants. */
.carte dd.p small{font-family:var(--mn-mono);font-size:var(--mn-t-meta);color:var(--mn-faint);letter-spacing:.04em;margin-left:8px}

/* ---------- 07 · faq ---------- */
.faq{border-top:1px solid var(--mn-line-soft)}
details{border-bottom:1px solid var(--mn-line-soft)}
summary{list-style:none;cursor:pointer;padding-block:24px;display:flex;gap:24px;align-items:baseline;
  font-size:1.0625rem;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--mn-copper)}
summary .pm{margin-left:auto;flex:none;width:14px;height:14px;position:relative;align-self:center}
summary .pm::before,summary .pm::after{content:"";position:absolute;background:var(--mn-copper);
  transition:transform .3s var(--mn-e-out);border-radius:2px}
summary .pm::before{left:0;right:0;top:6.5px;height:1.5px}
summary .pm::after{top:0;bottom:0;left:6.5px;width:1.5px}
details[open] summary .pm::after{transform:scaleY(0)}
details .ans{padding:0 44px 26px 0;color:var(--mn-muted);max-width:70ch;font-size:var(--mn-t-body)}

/* ---------- audit ---------- */
.auditgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,4vw,72px);align-items:start}
.aform{background:rgba(27,14,6,.09);border-radius:var(--mn-r-m);padding:clamp(24px,2.4vw,34px);
  box-shadow:inset 0 0 0 1px rgba(27,14,6,.12)}
.aform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aform .f{margin-bottom:16px}
.aform label{display:block;font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(27,14,6,.58);margin-bottom:8px}
.aform input,.aform textarea,.aform select{width:100%;background:rgba(255,255,255,.62);border:0;
  box-shadow:inset 0 0 0 1px rgba(27,14,6,.14);border-radius:14px;color:#1B0E06;
  font-family:var(--mn-sans);font-size:var(--mn-t-body);padding:14px 16px;transition:box-shadow .2s}
.aform textarea{min-height:96px;resize:vertical}
.aform input:focus,.aform textarea:focus,.aform select:focus{outline:none;
  box-shadow:inset 0 0 0 2px #1B0E06}
.aform input::placeholder,.aform textarea::placeholder{color:rgba(27,14,6,.4)}
.aform .legal{font-size:var(--mn-t-body);color:rgba(27,14,6,.62);line-height:1.5;margin-top:16px}
.aform .ok{display:none;font-size:var(--mn-t-body);color:#1B0E06;background:rgba(255,255,255,.6);
  border-radius:14px;padding:13px 16px;margin-top:16px}
.aform .ok.on{display:block}
.aform.filled{box-shadow:inset 0 0 0 2px #1B0E06,0 0 0 6px rgba(27,14,6,.12)}

/* ============================================================
   Modu
   ============================================================ */
.modu{position:fixed;right:26px;bottom:26px;z-index:75;display:flex;flex-direction:column;
  align-items:flex-end;gap:14px}
.modu-btn{position:relative;width:80px;height:84px;padding:0;border:0;cursor:pointer;
  border-radius:var(--mn-r-pill);background:linear-gradient(150deg,rgba(29,32,37,.96),rgba(14,16,19,.96));
  box-shadow:inset 0 0 0 1px var(--mn-line),0 18px 44px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);transition:transform .35s var(--mn-e-out),box-shadow .35s}
.modu-btn:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(242,145,100,.42),0 22px 52px rgba(242,145,100,.2)}
.modu-btn svg{width:58px;height:66px;display:block;margin:8px auto 0}
.modu-btn .halo{position:absolute;inset:-16px;z-index:-1;pointer-events:none;border-radius:var(--mn-r-pill);
  background:radial-gradient(closest-side,rgba(242,145,100,.3),transparent 72%);
  animation:halo 4.4s var(--mn-e-io) infinite}
@keyframes halo{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
.modu-float{animation:float 5.4s var(--mn-e-io) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#h-sat,#b-sat{transform-box:view-box;transform-origin:75px 130px;animation:orbit 14s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
#h-scan,#b-scan{animation:scanline 3.8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes scanline{0%{transform:translateY(0)}58%{transform:translateY(33px)}100%{transform:translateY(33px);opacity:0}}
#h-tip,#b-tip{animation:tipglow 2.8s ease-in-out infinite}
#h-core,#b-core{animation:tipglow 3.6s ease-in-out .4s infinite}
@keyframes tipglow{0%,100%{opacity:1}50%{opacity:.42}}
#h-eyes,#b-eyes{transform-box:view-box;transform-origin:75px 57px;transition:transform .18s linear}
.blink{animation:blinkv 7s linear infinite}
@keyframes blinkv{0%,95.4%,100%{transform:scaleY(1)}96.4%{transform:scaleY(.06)}97.6%{transform:scaleY(1)}}
.modu-talk .mm0{animation:talk .48s steps(2) infinite}
.modu-talk .mm1{animation:talk .48s steps(2) .11s infinite}
.modu-talk .mm2{animation:talk .48s steps(2) .22s infinite}
@keyframes talk{0%,100%{opacity:.32}50%{opacity:1}}

.modu-tip{font-size:var(--mn-t-body);color:var(--mn-text);background:rgba(24,27,31,.94);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--mn-line);padding:12px 18px;border-radius:var(--mn-r-pill);max-width:250px;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--mn-e-out),transform .4s var(--mn-e-out)}
.modu-tip.on{opacity:1;transform:none}

.modu-panel{width:min(430px,calc(100vw - 28px));background:linear-gradient(160deg,#191C21,#0D0F12);
  border-radius:var(--mn-r-m);box-shadow:inset 0 0 0 1px var(--mn-line),0 30px 80px rgba(0,0,0,.62);
  transform-origin:bottom right;animation:panelin .36s var(--mn-e-out);overflow:hidden}
@keyframes panelin{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modu-panel .pin{display:flex;flex-direction:column;height:min(612px,78vh)}
.modu-hd{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--mn-line-soft);flex:none}
.modu-hd svg{width:34px;height:39px;flex:none}
.modu-hd .nm{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.modu-hd .st{font-size:var(--mn-t-meta);color:var(--mn-dim);display:flex;align-items:center;gap:7px}
.modu-hd .st i{width:6px;height:6px;border-radius:50%;background:#5FD39B;display:inline-block}
.modu-x{margin-left:auto;background:none;border:0;color:var(--mn-faint);cursor:pointer;font-size:20px;
  line-height:1;padding:6px 4px;border-radius:50%}
.modu-x:hover{color:var(--mn-copper)}
.modu-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin}
.msg{font-size:var(--mn-t-body);line-height:1.6;max-width:92%}
.msg.me{align-self:flex-end;background:linear-gradient(130deg,rgba(242,145,100,.2),rgba(226,123,76,.14));
  color:var(--mn-text);padding:12px 16px;border-radius:18px 18px 5px 18px;
  box-shadow:inset 0 0 0 1px rgba(242,145,100,.28)}
.msg.bot{color:var(--mn-muted)}
.msg.bot b{color:var(--mn-text);font-weight:500}
.msg.thinking{display:flex;gap:6px;align-items:center;padding:8px 0}
.msg.thinking i{width:7px;height:7px;border-radius:50%;background:var(--mn-copper);opacity:.35;
  animation:think 1.25s var(--mn-e-io) infinite}
.msg.thinking i:nth-child(2){animation-delay:.16s}.msg.thinking i:nth-child(3){animation-delay:.32s}
@keyframes think{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.modu-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 14px;flex:none}
.modu-sugg button{font-size:var(--mn-t-body);color:var(--mn-muted);background:rgba(255,255,255,.045);border:0;
  box-shadow:inset 0 0 0 1px var(--mn-line-soft);padding:9px 14px;border-radius:var(--mn-r-pill);
  cursor:pointer;text-align:left;transition:.2s}
.modu-sugg button:hover{color:var(--mn-copper);background:rgba(242,145,100,.12);
  box-shadow:inset 0 0 0 1px rgba(242,145,100,.34)}
.modu-form{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--mn-line-soft);
  flex:none;align-items:center}
.modu-form input{flex:1;background:rgba(255,255,255,.05);border:0;box-shadow:inset 0 0 0 1px var(--mn-line-soft);
  border-radius:var(--mn-r-pill);color:var(--mn-text);font-family:var(--mn-sans);font-size:var(--mn-t-body);
  padding:13px 18px;min-width:0;transition:box-shadow .2s}
.modu-form input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--mn-copper)}
.modu-form input::placeholder{color:var(--mn-faint)}
.modu-form button{background:linear-gradient(120deg,#F7B081,#E27B4C);border:0;color:#231207;
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:17px;flex:none;transition:transform .2s}
.modu-form button:hover{transform:scale(1.06)}
.modu-note{font-size:var(--mn-t-meta);color:var(--mn-faint);padding:0 20px 14px;flex:none;line-height:1.4}

.motionbtn{position:fixed;left:22px;bottom:26px;z-index:74;background:rgba(24,27,31,.9);
  backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--mn-line);border:0;cursor:pointer;
  border-radius:var(--mn-r-pill);padding:11px 18px;display:inline-flex;align-items:center;gap:10px;
  font-size:var(--mn-t-body);color:var(--mn-dim);transition:color .2s,box-shadow .2s}
.motionbtn:hover{color:var(--mn-text)}
.motionbtn i{width:7px;height:7px;border-radius:50%;background:var(--mn-copper);display:inline-block}
[data-motion="off"] .motionbtn i{background:var(--mn-faint)}
@media (max-width:900px){
  .modu{right:16px;bottom:16px}
  .modu-btn{width:66px;height:70px}
  .modu-btn svg{width:48px;height:55px;margin-top:6px}
  .modu-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .modu-float,.blink,.modu-btn .halo,#h-sat,#b-sat,#h-scan,#b-scan,#h-tip,#b-tip,#h-core,#b-core{animation:none}
  #h-scan,#b-scan{opacity:0}
}

/* ============================================================================
   AJOUTS DU THÈME — composants
   ============================================================================ */

/* ---------- formulaire : erreurs et consentement ----------
   Les messages disent CE QUI NE VA PAS et COMMENT LE CORRIGER, jamais une
   excuse (handoff §5.8). Ils sont liés au champ par aria-describedby et
   annoncés par role="alert" pour le message global. */
.aform-err{display:block;margin-top:8px;font-size:var(--mn-t-body);
  color:#3A1207;font-weight:600}
.aform .f.has-err input,
.aform .f.has-err select,
.aform .f.has-err textarea{border-color:#7A2A10;box-shadow:inset 0 0 0 1px #7A2A10}
p.aform-err{margin-bottom:18px;padding:14px 18px;border-radius:var(--mn-r-s);
  background:rgba(27,14,6,.1)}

.mn-consent label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-size:var(--mn-t-body);line-height:1.5;text-transform:none;letter-spacing:0;
  font-family:var(--mn-sans);color:var(--mn-on-copper)}
.mn-consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:#1B1410}

/* Le pot de miel : hors flux, jamais lu, jamais tabulable. On n'utilise pas
   display:none — certains robots le détectent et sautent le champ. */
.mn-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- mentions de démonstration ----------
   Elles ne sont pas décoratives : elles disent qu'une donnée est illustrative.
   Elles ne se retirent que le jour où la donnée devient réelle. */
.mn-demo-tag{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mn-faint)}
.mn-demo-tag::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--mn-copper-deep)}
.mn-demo-note{margin-top:20px;font-family:var(--mn-mono);font-size:var(--mn-t-meta);
  line-height:1.6;color:var(--mn-faint);max-width:62ch}
.band--ivory .mn-demo-note{color:var(--mn-on-ivory-dim)}
.band--copper .mn-demo-note{color:var(--mn-on-copper)}

.mn-audit-sign{margin-top:28px;font-size:var(--mn-t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mn-on-copper)}
.band--copper .src{color:var(--mn-on-copper)}

/* ---------- aperçu des blocs dans l'éditeur ---------- */
.mn-block-preview{padding:20px 24px;border:1px dashed rgba(255,255,255,.22);
  border-radius:var(--mn-r-s);background:rgba(255,255,255,.03)}
.mn-block-preview__tag{display:inline-block;margin-bottom:12px;
  font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mn-copper)}
.mn-block-preview p{margin:0 0 6px;font-size:var(--mn-t-body);color:var(--mn-muted)}
.mn-block-preview b{color:var(--mn-faint);font-weight:400}

/* ---------- blocs rendus ---------- */
.mn-stat{max-width:34ch}
.mn-stat .cap{margin-top:22px;font-size:var(--mn-t-lede);color:var(--mn-muted)}
.mn-stat .src{margin-top:16px}

.mn-pricing .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,1.6vw,24px);margin-top:28px}

.mn-faq{display:flex;flex-direction:column;gap:2px;margin-top:24px}

/* ---------- liste éditoriale du Journal ----------
   Une liste, pas des cartes : la rangée de cartes arrondies à ombre douce est
   le marqueur du template générique, et elle est sur la liste noire du §2.5. */
.mn-entry{display:grid;grid-template-columns:190px 1fr auto;gap:clamp(16px,2vw,40px);
  align-items:start;padding:28px 0;border-bottom:1px solid var(--mn-line-soft);
  transition:background var(--mn-base)}
.mn-entry:hover{background:rgba(255,255,255,.02)}
.mn-entry .meta{display:flex;flex-direction:column;gap:8px;
  font-family:var(--mn-mono);font-size:var(--mn-t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mn-faint)}
.mn-entry .cit{color:var(--mn-copper)}
.mn-entry b{display:block;font-size:var(--mn-t-h3);font-weight:400;line-height:1.12;
  letter-spacing:-.025em;color:var(--mn-text)}
.mn-entry .ex{display:block;margin-top:12px;font-size:var(--mn-t-body);
  color:var(--mn-muted);max-width:62ch}
.mn-entry .ar{color:var(--mn-copper);transition:transform var(--mn-base) var(--mn-e-out)}
.mn-entry:hover .ar{transform:translate(3px,-3px)}

@media (max-width:760px){
  .mn-entry{grid-template-columns:1fr;gap:14px}
  .mn-entry .meta{flex-direction:row;flex-wrap:wrap;gap:16px}
}


/* ============================================================================
   STYLES DES CINQ BLOCS ÉDITABLES
   ----------------------------------------------------------------------------
   Ces règles vivaient dans sections.css, qui n'est chargé QUE sur la page
   d'accueil. Les blocs mn/hero, mn/stat… servent précisément à construire les AUTRES
   pages : posés sur une page de service, ils arrivaient sans style — grand
   chiffre en taille de corps, grille de services en colonne unique, titre de
   hero sur une seule ligne.

   Constaté en rendant une page d'essai, pas en relisant le code : c'est le
   genre de défaut qu'aucune vérification côté serveur ne montre.

   Elles sont donc ici, dans le fichier chargé partout.
   ============================================================================ */

.bignum{display:flex;align-items:baseline;gap:14px;
  font-family:var(--mn-mono);font-weight:500;font-size:clamp(5.5rem,3rem + 11vw,12rem);
  line-height:.82;letter-spacing:-.06em;color:var(--mn-text);font-variant-numeric:tabular-nums}
.bignum u{text-decoration:none;font-size:.24em;color:var(--mn-copper);transform:translateY(-.6em)}

.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,1.8vw,26px)}
.grid4 .card{display:flex;flex-direction:column;min-height:440px}

/* Le titre du bloc mn/hero. Reprend la mécanique du hero de l'accueil :
   chaque ligne dans un conteneur overflow:hidden avec padding-top .1em et
   margin-top -.1em, sans quoi les accents circonflexes sont tranchés. */
.mn-hero-block h1{margin-top:26px;font-size:clamp(2.4rem,1.4rem + 3.6vw,4.2rem);
  line-height:1.02;letter-spacing:-.042em;max-width:18ch}
.mn-hero-block h1 .ln{display:block;overflow:hidden;padding-top:.1em;margin-top:-.1em}
.mn-hero-block h1 .ln>span{display:block}
.mn-hero-block h1 em{font-family:var(--mn-serif);font-style:italic;
  color:var(--mn-copper);letter-spacing:-.03em}
.mn-hero-block .lede{margin-top:24px}
.mn-hero-block .acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}

/* Le grand chiffre du bloc mn/stat : l'unité a besoin d'air, « 22ans » se
   lisait collé. */
.mn-stat .bignum u{margin-left:.06em}

@media (max-width:860px){
  .grid4{grid-template-columns:1fr}
  .grid4 .card{min-height:0}
}

/* ============================================================================
   LE RAPPEL D'AUDIT EN FIN DE PAGE DE SERVICE
   ----------------------------------------------------------------------------
   Bande cuivre, comme la section d'audit de l'accueil : le visiteur reconnaît
   l'endroit où l'on demande quelque chose. L'encre est --mn-on-copper partout,
   jamais du blanc — interdit sur cuivre (handoff §9), et mesuré à 2,7:1.
   ============================================================================ */
.mn-cta-audit__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,4vw,72px);align-items:center}
.mn-cta-audit__acts{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.mn-cta-audit__acts .btn{width:100%;justify-content:space-between}
.mn-cta-audit__mail{font-size:var(--mn-t-meta);color:var(--mn-on-copper)}
.mn-cta-audit__mail a{text-decoration:underline;text-underline-offset:.2em}

@media (max-width:860px){
  .mn-cta-audit__grid{grid-template-columns:1fr}
}

/* ============================================================================
   PAGES DE SERVICE
   ============================================================================ */

/* La réponse directe : 40 à 60 mots sous le h1, avant tout le reste. C'est le
   passage que les moteurs extraient — il doit se voir comme tel. */
.mn-answer-first{color:var(--mn-text);border-left:2px solid var(--mn-copper-deep);
  padding-left:22px;max-width:64ch}

/* La date de mise à jour. Visible dans le contenu, pas seulement en méta :
   la fraîcheur est le second facteur de citation. */
.mn-freshness{margin-top:22px}
.mn-freshness strong{color:var(--mn-warn)}

/* Le tableau chiffré, obligatoire sur toute page de fond. Il défile dans son
   propre conteneur : le corps de page ne défile jamais horizontalement. */
.mn-prose .wp-block-table{overflow-x:auto;margin-block:2em}
.mn-prose .wp-block-table table{min-width:32rem}
.mn-prose .wp-block-table td:not(:first-child),
.mn-prose .wp-block-table th:not(:first-child){text-align:right;font-family:var(--mn-mono);
  font-variant-numeric:tabular-nums}
.mn-prose .wp-block-table figcaption{margin-top:12px;font-family:var(--mn-mono);
  font-size:var(--mn-t-meta);color:var(--mn-faint)}

/* ============================================================================
   « POUR ALLER PLUS LOIN » — fin d'article
   ----------------------------------------------------------------------------
   Une liste, pas des cartes : la rangée de cartes arrondies à ombre douce est
   sur la liste noire du §2.5 du handoff, et c'est aussi ce qui fait qu'on
   n'ose plus rien écrire dedans.
   ============================================================================ */
.mn-suite{padding-block:clamp(40px,5vw,72px) 0}
.mn-suite__titre{font-size:var(--mn-t-h3);letter-spacing:-.025em;margin-bottom:22px}
.mn-suite__liste{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--mn-line-soft);border-block:1px solid var(--mn-line-soft)}
.mn-suite__liste a{display:block;padding:24px 0;background:var(--mn-bg);
  transition:background var(--mn-base)}
.mn-suite__liste a:hover,.mn-suite__liste a:focus-visible{background:var(--mn-panel)}
.mn-suite__quoi{display:block;font-family:var(--mn-mono);font-size:var(--mn-t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mn-copper)}
.mn-suite__liste b{display:block;margin-top:10px;font-size:var(--mn-t-h3);
  font-weight:400;line-height:1.14;letter-spacing:-.022em;color:var(--mn-text)}
.mn-suite__ex{display:block;margin-top:10px;font-size:var(--mn-t-body);
  color:var(--mn-muted);max-width:66ch}

/* ============================================================
   Le brief de départ — /demarrer/
   ------------------------------------------------------------
   Dans components.css et non dans sections.css : sections.css ne
   part que sur l'accueil, et ce formulaire vit sur une page
   intérieure. La même erreur a déjà laissé les blocs mn/stat et
   mn/poles sans style partout ailleurs que sur l'accueil.

   Le formulaire est LONG. Trois décisions en découlent :
     · une mesure de lecture stricte (≈ 68 caractères) — vingt-deux
       questions étalées sur 1560 px ne se lisent pas ;
     · les intitulés en phrase, pas en étiquette mono capitale :
       « QUE DIT UN CLIENT JUSTE AVANT DE SIGNER ? » en 12 px
       capitales est illisible, et c'est une question, pas un
       champ de base de données ;
     · les « pourquoi » à 14 px (--mn-t-meta), le plancher des
       mentions — jamais en dessous.
   ============================================================ */
.mn-brief .wrap{max-width:none}
.mn-brief__form,
.mn-brief__ok{max-width:68ch;margin-inline:auto}

.mn-brief__jauge{border:1px solid var(--mn-line);border-radius:var(--mn-r-s);
  background:var(--mn-panel);padding:18px 22px;margin-bottom:var(--mn-8,40px)}
.mn-brief__jauge p{margin:0}
.mn-brief__jauge p.mono{font-family:var(--mn-mono);font-size:var(--mn-t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mn-dim);
  display:flex;gap:10px;align-items:baseline}
.mn-brief__jauge b{color:var(--mn-text);font-weight:500;font-variant-numeric:tabular-nums}
.mn-brief__bar{height:6px;border-radius:var(--mn-r-pill);background:var(--mn-line-soft);
  overflow:hidden;margin:10px 0 12px}
.mn-brief__bar i{display:block;height:100%;border-radius:var(--mn-r-pill);
  background:linear-gradient(90deg,var(--mn-copper),var(--mn-copper-deep));
  transition:width .35s ease}
.mn-brief__jauge .src{font-size:var(--mn-t-meta);color:var(--mn-dim);line-height:1.5}

.mn-brief__sec{border:0;border-top:1px solid var(--mn-line);margin:0 0 34px;
  padding:26px 0 0;min-width:0}
.mn-brief__sec legend{padding:0;font-size:var(--mn-t-h3);font-weight:500;
  letter-spacing:-.02em;color:var(--mn-text);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:12px}
.mn-brief__sec legend .n{font-size:var(--mn-t-label);letter-spacing:.14em;
  color:var(--mn-copper);font-weight:400}
.mn-brief__sec legend .hint{font-family:var(--mn-sans);font-size:var(--mn-t-meta);
  color:var(--mn-dim);font-weight:400;letter-spacing:0}

.mn-brief__note{margin:18px 0 0;padding:16px 18px;border-radius:var(--mn-r-s);
  background:var(--mn-copper-wash);color:var(--mn-muted);
  font-size:var(--mn-t-meta);line-height:1.6}

.mn-brief__champs{margin-top:22px;display:grid;gap:26px}
.mn-brief .f{display:grid;gap:7px;min-width:0}
.mn-brief .f label{font-family:var(--mn-sans);font-size:var(--mn-t-body);
  font-weight:500;line-height:1.4;color:var(--mn-text);
  letter-spacing:0;text-transform:none;margin:0}
.mn-brief .f label .src{font-size:var(--mn-t-meta);color:var(--mn-dim);font-weight:400}
.mn-brief .f .why{margin:0;font-size:var(--mn-t-meta);color:var(--mn-dim);
  line-height:1.55;max-width:66ch}
/* `:not([type="checkbox"])` n'est pas une précaution de style : sans lui, la
   case de consentement hérite de width:100% et de min-height:44px. Elle est
   dans un label en flex, la largeur en pourcentage n'a alors rien à résoudre,
   et le navigateur élargit la ligne jusqu'à 456 px — soit, à 375 px de large,
   toute la page qui défile latéralement, en-tête et pied compris. La règle
   .mn-consent input existait déjà mais perdait la cascade : un sélecteur à
   deux classes bat un sélecteur à une. Mesuré, pas supposé. */
.mn-brief .f input:not([type="checkbox"]),
.mn-brief .f textarea,
.mn-brief .f select{width:100%;background:var(--mn-panel);color:var(--mn-text);
  border:0;box-shadow:inset 0 0 0 1px var(--mn-line);border-radius:14px;
  font-family:var(--mn-sans);font-size:var(--mn-t-body);padding:13px 15px;
  transition:box-shadow .18s;min-height:44px}
.mn-brief .f textarea{min-height:84px;resize:vertical;line-height:1.55}
.mn-brief .f input:focus,
.mn-brief .f textarea:focus,
.mn-brief .f select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--mn-copper)}
.mn-brief .f input::placeholder,
.mn-brief .f textarea::placeholder{color:var(--mn-faint)}
.mn-brief .f.is-done input,
.mn-brief .f.is-done textarea,
.mn-brief .f.is-done select{box-shadow:inset 0 0 0 1px rgba(78,212,149,.45)}

/* Les erreurs. Celles de .aform sont écrites pour la bande cuivre — texte
   presque noir sur fond clair. Ici le fond est sombre : sans cette reprise,
   le message d'erreur s'affiche en #3A1207 sur #090A0C, soit illisible. */
.mn-brief .aform-err{color:var(--mn-err);font-size:var(--mn-t-meta);font-weight:500}
.mn-brief p.aform-err{font-size:var(--mn-t-body);background:rgba(255,138,132,.1);
  box-shadow:inset 0 0 0 1px rgba(255,138,132,.3);margin-bottom:26px}
.mn-brief .f.has-err input,
.mn-brief .f.has-err textarea,
.mn-brief .f.has-err select{box-shadow:inset 0 0 0 2px var(--mn-err)}

/* Pas de « justify-items:start » sur cette grille : il donne à CHAQUE enfant
   une largeur max-content, et la phrase de consentement — qui ne porte pas de
   max-width — cesse alors de se replier. Résultat mesuré à 375 px : un
   document de 456 px, donc la page entière qui défile latéralement, Modu
   compris. Seul le bouton a besoin d'être calé à gauche ; on le lui dit à lui
   et à personne d'autre. */
.mn-brief__envoi{border-top:1px solid var(--mn-line);padding-top:26px;
  display:grid;gap:20px}
.mn-brief__envoi .btn{justify-self:start}
.mn-brief__envoi .mn-consent label{max-width:66ch}
.mn-brief__envoi .mn-consent label{color:var(--mn-text)}
.mn-brief__envoi .legal{font-size:var(--mn-t-meta);color:var(--mn-dim);
  line-height:1.6;margin:0;max-width:66ch}

@media (max-width:640px){
  .mn-brief__sec legend{font-size:var(--mn-t-h4)}
  .mn-brief__envoi .btn{width:100%;justify-content:center}
}

/* La case elle-même, dite explicitement et avec assez de poids pour gagner. */
.mn-brief .f.mn-consent input[type="checkbox"]{width:20px;height:20px;min-height:0;
  flex:none;margin-top:2px;accent-color:var(--mn-copper);box-shadow:none}
.mn-brief .f.mn-consent input[type="checkbox"]:focus-visible{outline:2px solid var(--mn-copper);
  outline-offset:3px}

/* ------------------------------------------------------------
   Le brief · le choix du métier, et les branches
   ------------------------------------------------------------
   Le masquage des branches tient en deux règles, et elles sont
   toutes deux conditionnées par « .js ». Ce marqueur est posé
   par un script en ligne dans parts/section-brief.php, pendant
   l'analyse du document. Sans JavaScript il n'est jamais posé :
   aucune de ces deux règles ne s'applique, et le formulaire
   s'affiche en entier — ce qui est exactement la règle n° 2 du
   brief appliquée à nous-mêmes.
   ------------------------------------------------------------ */
.mn-brief.js [data-m]{display:none}
.mn-brief.js [data-m].is-on{display:block}

.mn-brief__metiers{border:1px solid var(--mn-line);border-radius:var(--mn-r-s);
  background:var(--mn-panel);padding:22px;margin:0 0 26px;min-width:0}
.mn-brief__metiers legend{padding:0 0 4px;font-size:var(--mn-t-h3);font-weight:500;
  letter-spacing:-.02em;color:var(--mn-text)}
.mn-brief__metiers > .why{margin:0 0 18px;font-size:var(--mn-t-meta);color:var(--mn-dim);
  line-height:1.55;max-width:66ch}
.mn-brief__mlist{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.mn-brief__mlist label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border-radius:12px;padding:13px 15px;box-shadow:inset 0 0 0 1px var(--mn-line);
  transition:background .2s,box-shadow .2s;min-height:44px}
.mn-brief__mlist label:hover{background:rgba(255,255,255,.04)}
.mn-brief__mlist input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;
  accent-color:var(--mn-copper);box-shadow:none}
.mn-brief__mlist span{display:grid;gap:3px;min-width:0}
.mn-brief__mlist b{font-size:var(--mn-t-body);font-weight:500;color:var(--mn-text);line-height:1.3}
.mn-brief__mlist em{font-style:normal;font-size:var(--mn-t-meta);color:var(--mn-dim);line-height:1.45}
.mn-brief__mlist label:has(input:checked){background:var(--mn-copper-wash);
  box-shadow:inset 0 0 0 1.5px var(--mn-copper)}
.mn-brief__mlist label:has(input:checked) b{color:var(--mn-copper-hi)}
.mn-brief__mlist label:has(input:focus-visible){outline:2px solid var(--mn-copper);outline-offset:3px}

/* L'étiquette de branche : elle dit à quel métier la section appartient.
   Elle sert surtout sans JavaScript, où tout est à l'écran en même temps. */
.mn-brief__tag{font-size:var(--mn-t-label);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mn-copper);background:var(--mn-copper-wash);padding:3px 10px;
  border-radius:var(--mn-r-pill);font-weight:400}

/* La branche qu'on voit mais qui ne partira pas. Visible seulement sans
   JavaScript — avec, la section entière est masquée. On le dit plutôt que
   de laisser quelqu'un écrire vingt lignes qui seront ignorées. */
.mn-brief__dormante{margin:18px 0 0;padding:14px 16px;border-radius:var(--mn-r-s);
  background:rgba(240,180,90,.1);box-shadow:inset 0 0 0 1px rgba(240,180,90,.32);
  color:var(--mn-muted);font-size:var(--mn-t-meta);line-height:1.6}

.mn-brief__envoi .src[data-brief-portee]{font-size:var(--mn-t-meta);color:var(--mn-warn);
  line-height:1.6;margin:0;max-width:66ch}

/* ------------------------------------------------------------
   Le brief · Modu, second rôle
   ------------------------------------------------------------
   Le bloc est rendu avec `hidden` et révélé par brief-modu.js.
   Sans JavaScript il reste caché, et c'est voulu : le formulaire
   est complet sans lui.
   ------------------------------------------------------------ */
.mn-brief__modu{border:1px solid var(--mn-line);border-radius:var(--mn-r-s);
  background:var(--mn-panel);padding:20px 22px;margin:0 0 30px;display:grid;gap:16px;min-width:0}
.mn-brief__modu-avis{margin:0;font-size:var(--mn-t-meta);color:var(--mn-dim);
  line-height:1.6;max-width:66ch}
.mn-brief__modu-avis a{color:var(--mn-copper-hi)}
.mn-brief__modu > .btn{justify-self:start}

.mn-brief__modu-fil{display:grid;gap:12px;margin:0;padding-top:4px;
  border-top:1px solid var(--mn-line-soft)}
.mn-brief__modu-bot,
.mn-brief__modu-moi{margin:0;font-size:var(--mn-t-body);line-height:1.55;
  padding:12px 15px;border-radius:14px;max-width:60ch}
.mn-brief__modu-bot{background:var(--mn-copper-wash);color:var(--mn-text);justify-self:start}
.mn-brief__modu-moi{background:rgba(255,255,255,.06);color:var(--mn-muted);justify-self:end}

.mn-brief__modu-saisie{display:grid;gap:8px}
.mn-brief__modu-saisie label{font-size:var(--mn-t-body);font-weight:500;color:var(--mn-text)}
.mn-brief__modu-saisie textarea{width:100%;background:var(--mn-bg);color:var(--mn-text);border:0;
  box-shadow:inset 0 0 0 1px var(--mn-line);border-radius:14px;font-family:var(--mn-sans);
  font-size:var(--mn-t-body);padding:13px 15px;min-height:60px;resize:vertical;line-height:1.55}
.mn-brief__modu-saisie textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--mn-copper)}
.mn-brief__modu-actions{display:flex;flex-wrap:wrap;gap:10px}
.mn-brief__modu-actions .btn{padding:11px 18px;font-size:var(--mn-t-meta)}

/* Le champ que Modu vient de remplir. Deux secondes et demie, puis plus rien :
   le visiteur doit voir OÙ ses mots ont atterri, pas subir un halo permanent. */
.f.vient-de-modu input,
.f.vient-de-modu textarea,
.f.vient-de-modu select{box-shadow:inset 0 0 0 2px var(--mn-copper)}

@media (max-width:640px){
  .mn-brief__modu-actions .btn{width:100%;justify-content:center}
}