/* =========================================================
   Mon Chai — contenu éditorial des pages « Le logiciel »
   Composant .mtx, posé APRÈS la scène Figma de chaque module.

   Il vit dans le même système que .fonc : une bande de 1920 px de large
   dans .page, mise à l'échelle par pages.js au-dessus de 1200 px, puis
   remise en flux fluide en dessous. Aucune couleur ni police nouvelle :
   tout vient des variables de pages.css.

   Vocabulaire :
     .mtx            la bande
     .mtx--sable     variante de fond, pour alterner deux bandes
     .mtx__entete    titre + chapô + filet doré
     .mtx__cles      bandeau de chiffres ou de repères
     .mtx__corps     la colonne de lecture (texte long)
     .mtx__chaine    la traçabilité en jetons reliés
     .mtx__grille    cartes côte à côte
     .mtx__note      encadré d'honnêteté (« ce qui reste à faire à la main »)
     .mtx__faq       questions dépliantes
     .mtx__liens     maillage interne, en fin de bande
   ========================================================= */

.mtx{
  position:relative;
  width:1920px;
  padding:96px 0 104px;
  background:var(--blanc);
  color:var(--encre);
  font-family:var(--sans);
}
.mtx--sable{ background:var(--creme); }

/* Filet doré en haut de bande : sépare le contenu de la scène du dessus. */
.mtx::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1100px; height:3px;
  background:linear-gradient(90deg, transparent, var(--or) 22%, var(--or) 78%, transparent);
}

.mtx__inner{ width:1100px; margin:0 auto; }

/* ---------- En-tête de bande ---------- */
.mtx__entete{ text-align:center; margin:0 0 54px; }
.mtx__sur{
  display:block;
  font-family:var(--titre); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cuivre-f);
  margin:0 0 14px;
}
.mtx__titre{
  font-family:var(--serif); font-weight:500;
  font-size:42px; line-height:1.18; letter-spacing:-.02em;
  color:var(--bordeaux);
  margin:0 0 18px;
}
.mtx__titre em{ font-style:italic; color:var(--cuivre-f); }
/* Ornement : filet doré centré, losange au milieu. */
.mtx__orn{
  position:relative;
  width:180px; height:1px;
  margin:0 auto 22px;
  background:linear-gradient(90deg, transparent, var(--or), transparent);
}
.mtx__orn::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:7px; height:7px; margin:-4px 0 0 -4px;
  background:var(--or); transform:rotate(45deg);
}
.mtx__chapo{
  max-width:820px; margin:0 auto;
  font-size:19px; line-height:1.62; color:var(--encre);
}
.mtx__chapo strong{ color:var(--bordeaux); font-weight:600; }

/* ---------- Bandeau de repères ---------- */
.mtx__cles{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:18px; margin:0 0 56px;
}
.mtx__cle{
  background:var(--blanc);
  border:1px solid rgba(223,183,128,.55);
  border-top:3px solid var(--or);
  border-radius:0 0 12px 12px;
  padding:22px 20px 20px;
  text-align:center;
}
.mtx--sable .mtx__cle{ background:#fff; }
.mtx__cle b{
  display:block;
  font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.1;
  color:var(--bordeaux); margin:0 0 8px;
}
.mtx__cle span{ font-size:14.5px; line-height:1.45; color:#5a504b; display:block; }

/* ---------- Colonne de lecture ---------- */
.mtx__corps{ max-width:900px; margin:0 auto; }
.mtx__corps h2{
  font-family:var(--serif); font-weight:500;
  font-size:28px; line-height:1.28; color:var(--bordeaux);
  margin:46px 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(223,183,128,.5);
}
.mtx__corps h2:first-child{ margin-top:0; }
.mtx__corps h3{
  font-family:var(--titre); font-weight:600; font-size:17.5px;
  color:var(--encre); margin:26px 0 8px;
}
.mtx__corps p{ font-size:17px; line-height:1.68; margin:0 0 16px; color:#332c29; }
.mtx__corps p strong{ color:var(--bordeaux); font-weight:600; }
.mtx__corps a{ color:var(--cuivre-f); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.mtx__corps a:hover{ color:var(--bordeaux); }

/* Lettrine sur le premier paragraphe d'une bande : ornement discret. */
.mtx__corps .mtx__ouvre::first-letter{
  float:left;
  font-family:var(--serif); font-weight:500;
  font-size:62px; line-height:.86;
  color:var(--bordeaux);
  margin:6px 12px 0 0;
}

/* Listes ornées : puce en losange doré. */
.mtx__liste{ list-style:none; padding:0; margin:0 0 20px; }
.mtx__liste li{
  position:relative; padding-left:26px; margin:0 0 10px;
  font-size:16.5px; line-height:1.6;
}
.mtx__liste li::before{
  content:""; position:absolute; left:4px; top:10px;
  width:7px; height:7px; background:var(--or); transform:rotate(45deg);
}
.mtx__liste li strong{ color:var(--bordeaux); }

/* ---------- Chaîne de traçabilité ---------- */
.mtx__chaine{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 8px;
  margin:26px 0 30px;
  padding:26px 22px;
  background:#fff;
  border:1px solid rgba(223,183,128,.55);
  border-radius:14px;
}
.mtx--sable .mtx__chaine{ background:var(--blanc); }
.mtx__jeton{
  font-family:var(--titre); font-weight:600; font-size:14px;
  color:var(--bordeaux);
  background:rgba(223,183,128,.18);
  border:1px solid rgba(223,183,128,.7);
  border-radius:999px;
  padding:9px 16px;
  white-space:nowrap;
}
.mtx__lien-chaine{ color:var(--cuivre); font-size:15px; }

/* ---------- Cartes ---------- */
.mtx__grille{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin:26px 0 32px; }
.mtx__grille--3{ grid-template-columns:repeat(3, 1fr); }
.mtx__carte{
  background:#fff;
  border:1px solid rgba(223,183,128,.55);
  border-radius:14px;
  padding:24px 24px 22px;
}
.mtx--sable .mtx__carte{ background:var(--blanc); }
.mtx__carte h3{
  font-family:var(--titre); font-weight:600; font-size:16px;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--bordeaux); margin:0 0 12px;
}
.mtx__carte p{ font-size:16px; line-height:1.6; margin:0 0 10px; color:#332c29; }
.mtx__carte p:last-child{ margin:0; }
.mtx__carte ul{ list-style:none; padding:0; margin:0; }
.mtx__carte li{
  position:relative; padding-left:20px; margin:7px 0;
  font-size:15.5px; line-height:1.55; color:#332c29;
}
.mtx__carte li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--cuivre);
}

/* ---------- Encadré d'honnêteté ---------- */
.mtx__note{
  background:rgba(223,183,128,.16);
  border-left:4px solid var(--cuivre);
  border-radius:0 12px 12px 0;
  padding:20px 24px;
  margin:26px 0 30px;
}
.mtx__note p{ margin:0 0 8px; font-size:16px; line-height:1.6; }
.mtx__note p:last-child{ margin:0; }
.mtx__note strong{ color:var(--bordeaux); }

/* ---------- Citation métier ---------- */
.mtx__cit{
  margin:30px 0;
  padding:4px 0 4px 26px;
  border-left:3px solid var(--or);
  font-family:var(--serif); font-style:italic;
  font-size:21px; line-height:1.5; color:var(--bordeaux);
}

/* ---------- FAQ ---------- */
.mtx__faq{ max-width:900px; margin:10px auto 0; }
.mtx__faq details{
  border-bottom:1px solid rgba(223,183,128,.5);
  padding:14px 0;
}
.mtx__faq summary{
  cursor:pointer; list-style:none;
  font-family:var(--titre); font-weight:600; font-size:16.5px;
  color:var(--encre);
  position:relative; padding-right:34px;
}
.mtx__faq summary::-webkit-details-marker{ display:none; }
.mtx__faq summary::after{
  content:"+"; position:absolute; right:6px; top:-4px;
  font-size:24px; font-weight:400; color:var(--cuivre-f);
}
.mtx__faq details[open] summary::after{ content:"–"; }
.mtx__faq details p{ margin:12px 0 2px; font-size:16.5px; line-height:1.65; color:#332c29; }
.mtx__faq details a{ color:var(--cuivre-f); }

/* ---------- Maillage de fin de bande ---------- */
.mtx__liens{
  margin:52px auto 0; max-width:900px;
  padding-top:26px;
  border-top:1px solid rgba(223,183,128,.5);
}
.mtx__liens-titre{
  font-family:var(--titre); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cuivre-f);
  margin:0 0 16px;
}
.mtx__liens ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.mtx__liens li{ position:relative; padding-left:20px; font-size:16px; line-height:1.5; }
.mtx__liens li::before{
  content:"›"; position:absolute; left:2px; top:-1px;
  color:var(--cuivre); font-size:17px;
}
.mtx__liens a{ color:var(--encre); text-decoration:none; border-bottom:1px solid rgba(223,183,128,.8); }
.mtx__liens a:hover{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); }

/* ---------- Appel à l'action de fin de bande ---------- */
.mtx__cta{
  margin:52px auto 0; max-width:900px;
  background:var(--bordeaux); color:var(--creme);
  border-radius:16px;
  padding:30px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.mtx__cta div{ flex:1 1 auto; }
.mtx__cta h2{
  font-family:var(--serif); font-weight:500; font-size:24px;
  color:#fff; margin:0 0 6px; border:0; padding:0;
}
.mtx__cta p{ margin:0; font-size:16px; line-height:1.55; color:rgba(255,249,244,.88); }
.mtx__cta-actions{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px; }
.mtx__btn{
  display:inline-block; text-align:center;
  background:var(--or); color:var(--bordeaux-n);
  font-family:var(--titre); font-weight:600; font-size:15px;
  text-decoration:none;
  padding:13px 26px; border-radius:999px;
  transition:background .15s ease;
}
.mtx__btn:hover{ background:#e9c99a; }
.mtx__btn--fant{
  background:transparent; color:var(--creme);
  border:1px solid rgba(255,249,244,.5);
}
.mtx__btn--fant:hover{ background:rgba(255,249,244,.12); }

/* =========================================================
   Sous 1200 px : la page repasse en flux, la bande devient fluide.
   ========================================================= */
@media (max-width:1199px){
  .mtx{ width:auto; padding:60px 22px 68px; }
  .mtx::before{ width:min(88%, 620px); }
  .mtx__inner{ width:auto; max-width:760px; }
  .mtx__titre{ font-size:clamp(27px, 5vw, 36px); }
  .mtx__chapo{ font-size:17.5px; }
  .mtx__cles{ grid-template-columns:repeat(2, 1fr); gap:14px; margin-bottom:42px; }
  .mtx__grille, .mtx__grille--3{ grid-template-columns:1fr; }
  .mtx__corps h2{ font-size:24px; margin-top:38px; }
  .mtx__corps p, .mtx__faq details p{ font-size:16.5px; }
  .mtx__cit{ font-size:19px; }
  .mtx__liens ul{ grid-template-columns:1fr; }
  .mtx__cta{ flex-direction:column; align-items:flex-start; padding:26px 24px; }
  .mtx__cta-actions{ flex-direction:row; flex-wrap:wrap; }
}

@media (max-width:640px){
  .mtx{ padding:48px 18px 56px; }
  .mtx__cles{ grid-template-columns:1fr; }
  .mtx__cle{ text-align:left; }
  .mtx__cle b{ font-size:26px; }
  .mtx__corps .mtx__ouvre::first-letter{ font-size:52px; }
  .mtx__chaine{ padding:20px 16px; gap:8px 6px; }
  .mtx__jeton{ font-size:13px; padding:8px 13px; }
  .mtx__cta-actions{ width:100%; }
  .mtx__btn{ flex:1 1 auto; }
}