/* madus — Accès client (15 oct. 2026). Identité du bandeau madus de la maquette MARQUISE
   (nouvelle/marquise.html, .madus-*) : rouge, noir, blanc, gris. Mot « madus » en Jost 500,
   première lettre rouge ; « software » espacé en gris. Variables propres à la page (--md-*). */

body.page-madus{
  --md-noir:#0b0b0c;
  --md-noir2:#151517;
  --md-gris:#2a2a2e;
  --md-gris-clair:#f2f2f3;
  --md-gris-txt:#6b6b72;
  --md-rouge:#d81f2a;
  --md-rouge-vif:#e8434d;
  background:#fff;
}

/* Marges des pages gamme (comme le Showroom) */
body.page-madus main .wrap{max-width:none;padding:0 clamp(56px,11vw,220px)}
body.page-madus #head .nav{max-width:none;padding-left:clamp(56px,11vw,220px);padding-right:clamp(56px,11vw,220px)}
@media (max-width:860px){
  body.page-madus main .wrap{padding:0 24px}
  body.page-madus #head .nav{padding-left:24px;padding-right:24px}
}

/* ---------- Accès client ---------- */
.md-acces{position:relative;overflow:hidden;background:var(--md-noir);color:#fff;padding:clamp(48px,7vw,96px) 0}
.md-acces::before{content:"";position:absolute;top:-30%;right:-10%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,31,42,.28),rgba(216,31,42,0) 68%);pointer-events:none}
.md-grille{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center}
@media (max-width:980px){.md-grille{grid-template-columns:minmax(0,1fr)}}
/* 15 oct. 2026 (Jeremy) : à gauche la marque + badge, la copie d'écran en dessous ; à droite le
   bloc « Accès client ». En une colonne : marque, formulaire, copie d'écran. */
.md-grille{grid-template-areas:"entete form" "ecran form";grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);row-gap:32px;grid-template-rows:auto 1fr;align-items:start}
.md-entete{grid-area:entete}
.md-gauche{grid-area:form}
.md-gauche h1{margin-top:0}
.md-ecran{grid-area:ecran}
.md-entete .md-marque{margin-bottom:14px}
/* 15 oct. 2026 (Jeremy : « réduit l'image », puis « non pas autant ») : copie d'écran limitée à
   510 px (≈ 570 au départ à 1440 ; 440 jugé trop petit). */
.md-ecran{max-width:560px}  /* 15 oct. 2026 : « agrandis l'image » -> 560 (avant 510) */
/* 15 oct. 2026 (Jeremy : « mets access client plus au centre », puis « juste l'acces client qui
   vient au centre le reste reste a gauche ») : marque et copie d'écran restent calées à gauche ;
   colonnes à la largeur de leur contenu (510 / 480 px), écart réduit -> le bloc « Accès client »
   se rapproche du milieu. Avant : colonnes 1.1fr / .9fr, écart jusqu'à 96 px. */
@media (min-width:981px){
  /* Puis « agrandis l'image et décalle le formulaire un peu sur la droite » : 560 px, écart 72 px. */
  .md-grille{grid-template-columns:minmax(0,560px) minmax(0,480px);justify-content:start;column-gap:clamp(48px,5vw,72px)}
  /* « décalle le formulaire de 50px sur la droite » : bloc décalé de 50 px sans toucher aux colonnes
     (un écart de colonnes plus grand rétrécissait l'image faute de place). */
  .md-gauche,.md-titre{position:relative;left:50px}
}
@media (max-width:980px){.md-grille{grid-template-areas:"entete" "titre" "form" "ecran"}}
/* 15 oct. 2026 (« mets la vidéo à la même hauteur que le formulaire ») : 1re rangée marque | titre,
   2e rangée copie d'écran | formulaire -> l'image et le cadre du formulaire partent de la même ligne. */
.md-grille{grid-template-areas:"entete titre" "ecran form";grid-template-rows:auto auto}
.md-titre{grid-area:titre}
.md-titre h1{margin-top:0}
.md-titre .md-chapo{margin-bottom:0}
@media (max-width:980px){.md-grille{grid-template-areas:"entete" "titre" "form" "ecran"}}

.md-marque{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.md-mot{font-family:"Jost",sans-serif;font-size:2.6rem;font-weight:500;letter-spacing:-.01em;line-height:1;color:#fff}
.md-mot::first-letter{color:var(--md-rouge-vif)}
.md-soft{font-family:"Jost",sans-serif;font-size:.9rem;letter-spacing:.42em;color:rgba(255,255,255,.5)}
.md-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(216,31,42,.16);border:1px solid rgba(232,67,77,.4);
  color:#ff8a91;font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:6px 13px;border-radius:999px}
.md-badge svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none}
.md-acces h1{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(2.2rem,4.4vw,3.4rem);
  line-height:1.05;margin:22px 0 12px;color:#fff}
.md-chapo{color:rgba(255,255,255,.75);font-size:1.05rem;max-width:44ch;margin:0 0 28px}
.md-chapo b{color:#fff}

/* Formulaire */
.md-form{background:var(--md-noir2);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:clamp(22px,2.6vw,32px);max-width:480px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.md-champ{margin-bottom:18px}
.md-champ label{display:block;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:7px}
.md-champ input{width:100%;font:inherit;font-size:1rem;color:#fff;background:var(--md-noir);border:1px solid var(--md-gris);border-radius:10px;
  padding:13px 14px;transition:border-color .2s ease,box-shadow .2s ease}
.md-champ input::placeholder{color:rgba(255,255,255,.3)}
.md-champ input:focus{outline:none;border-color:var(--md-rouge-vif);box-shadow:0 0 0 3px rgba(216,31,42,.25)}
.md-mdp{position:relative}
.md-mdp input{padding-right:50px}
.md-voir{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:8px;color:rgba(255,255,255,.55);cursor:pointer}
.md-voir:hover,.md-voir[aria-pressed="true"]{color:#fff}
.md-voir:focus-visible{outline:2px solid var(--md-rouge-vif);outline-offset:1px}
.md-voir svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.md-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 22px;font-size:.88rem}
.md-case{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.75);cursor:pointer}
.md-case input{width:16px;height:16px;accent-color:var(--md-rouge)}
.md-lien{color:#ff8a91;text-decoration:underline;text-underline-offset:3px}
.md-lien:hover{color:#fff}

.md-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;font:inherit;font-size:1rem;font-weight:600;
  color:#fff;background:var(--md-rouge);border:0;border-radius:999px;padding:15px 26px;cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(216,31,42,.7);transition:background .2s ease,transform .2s ease}
.md-btn:hover{background:var(--md-rouge-vif);transform:translateY(-2px)}
.md-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.md-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.md-bientot{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:rgba(216,31,42,.14);border:1px solid rgba(232,67,77,.35);
  color:rgba(255,255,255,.9);font-size:.9rem;line-height:1.5}
.md-bientot[hidden]{display:none}

.md-nouveau{margin:24px 0 4px;color:rgba(255,255,255,.75)}
.md-nouveau a{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;border-bottom:1px solid var(--md-rouge-vif);padding-bottom:1px}
.md-nouveau a:hover{color:#ff8a91}
.md-nouveau svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.md-fine{font-size:.8rem;color:rgba(255,255,255,.45);margin:0}

/* Copie d'écran */
.md-ecran{position:relative;margin:0;border-radius:14px;overflow:hidden;line-height:0;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.md-ecran img{width:100%;height:auto;display:block}
.md-ecran figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 11px;line-height:1.4;font-size:.8rem;color:rgba(255,255,255,.85);
  background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* ---------- La plateforme ---------- */
.md-sec{padding:clamp(56px,8vw,104px) 0;background:#fff}
.md-sur{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--md-rouge);margin:0 0 12px}
.md-sec h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.6rem,3.2vw,2.35rem);letter-spacing:-.015em;line-height:1.18;color:var(--md-noir);max-width:22ch}
.md-sec h2 em{font-style:normal;font-weight:300;color:var(--md-gris-txt)}
.md-intro{color:var(--md-gris-txt);font-size:1.05rem;max-width:62ch;margin:16px 0 0}
.md-intro b{color:var(--md-noir)}
.md-feats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:clamp(32px,4vw,48px) 0 0;padding:0}
@media (max-width:1100px){.md-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.md-feats{grid-template-columns:minmax(0,1fr)}}
.md-feats li{background:var(--md-gris-clair);border-radius:16px;padding:26px 24px}
.md-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--md-noir);margin-bottom:18px}
.md-ico svg{width:22px;height:22px;stroke:var(--md-rouge-vif);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.md-feats h3{font-family:"Jost",sans-serif;font-weight:500;font-size:1.15rem;color:var(--md-noir);margin:0 0 8px}
.md-feats p{color:var(--md-gris-txt);font-size:.95rem;line-height:1.55;margin:0}

/* ---------- Aide ---------- */
.md-aide{background:var(--md-gris-clair);padding:clamp(40px,5vw,64px) 0}
.md-aide-in{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.md-aide h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--md-noir);margin:0 0 6px}
.md-aide p{color:var(--md-gris-txt);margin:0}
.md-aide-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.md-aide .md-btn{width:auto}
.md-btn-clair{background:var(--md-noir);box-shadow:none}
.md-btn-clair:hover{background:var(--md-rouge)}
.md-lien-fort{display:inline-flex;align-items:center;gap:6px;color:var(--md-noir);font-weight:600;border-bottom:1px solid var(--md-rouge)}
.md-lien-fort:hover{color:var(--md-rouge)}
.md-lien-fort svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

@media (prefers-reduced-motion:reduce){ .md-btn,.md-champ input{transition:none} .md-btn:hover{transform:none} }