/* Maymoune — Espace client */
.mymo{--ink:#150A28;--ink2:#40325A;--mut:#756A8C;--wash:#FAF7FF;--line:#EBE3F8;--iris:#7B22E8;--rose:#E8267E;--sun:#FF9A1F;--grad:linear-gradient(100deg,#7B22E8,#E8267E 58%,#FF9A1F);
  width:100%;max-width:100%;color:var(--ink);font-size:16px;line-height:1.6}
.mymo *{box-sizing:border-box}

/* fil d’étapes — une progression, pas des onglets : rien n’y est cliquable,
   donc rien n’y ressemble à un bouton. */
.mymo-fil{display:flex;list-style:none;margin:0 0 34px;padding:0;counter-reset:e}
.mymo-fil-e{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;
 gap:8px;text-align:center;color:var(--mut);font-size:13.5px;font-weight:600;line-height:1.3}
.mymo-fil-e::before{content:"";position:absolute;top:13px;right:50%;left:-50%;height:2px;background:var(--line)}
.mymo-fil-e:first-child::before{display:none}
.mymo-fil-e.est-fait::before,.mymo-fil-e.est-ici::before{background:var(--iris);opacity:.45}
.mymo-fil-n{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;
 border-radius:99px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);color:var(--mut);
 font-size:12.5px;font-weight:800}
.mymo-fil-t{max-width:14ch}
.mymo-fil-e.est-fait{color:var(--ink2)}
.mymo-fil-e.est-fait .mymo-fil-n{background:var(--iris);box-shadow:none;color:#fff}
.mymo-fil-e.est-ici{color:var(--ink)}
.mymo-fil-e.est-ici .mymo-fil-n{background:var(--grad);box-shadow:0 0 0 4px rgba(123,34,232,.14);color:#fff}

.mymo-tete h2{margin:0 0 6px;font-size:30px;line-height:1.2}
.mymo-tete p{margin:0 0 24px;color:var(--mut)}

.mymo-bloc{border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin-bottom:24px;background:#fff}
.mymo-etape-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mymo-etape-tete h3{flex:1 1 auto;min-width:0}
.mymo-bloc h3{margin:0;font-size:20px}
.mymo-num{display:grid;place-items:center;width:28px;height:28px;border-radius:99px;background:var(--grad);color:#fff;font-size:14px;font-weight:800;flex:none}
.mymo-aide{margin:6px 0 0;color:var(--mut);font-size:14px;max-width:66ch}
.mymo-label{display:block;margin:14px 0 6px;font-weight:700;font-size:14px}
.mymo-fac{font-weight:400;color:var(--mut)}
.mymo input[type=text],.mymo input[type=email],.mymo input[type=url]{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-size:17px;background:var(--wash);color:var(--ink)}
.mymo input:focus{outline:none;border-color:var(--iris);background:#fff;box-shadow:0 0 0 3px rgba(123,34,232,.15)}

/* cartes univers */
.mymo-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:20px}
.mymo-carte{position:relative;display:block;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--wash);cursor:pointer;transition:.15s}
.mymo-carte:hover{border-color:var(--iris);background:#fff}
.mymo-carte input{position:absolute;opacity:0;pointer-events:none}
.mymo-carte-t{display:block;font-weight:700;font-size:15px;line-height:1.3}
.mymo-carte-s{display:block;margin-top:4px;color:var(--mut);font-size:13px}
.mymo-carte.est-choisi{background:#fff;border-color:transparent;box-shadow:inset 0 0 0 2px var(--iris)}
.mymo-carte.est-choisi:after{content:"";position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:99px;background:var(--iris)}

/* duo nom / aperçu */
.mymo-duo{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:start;margin-top:22px}
.mymo-duo-apercu{text-align:center}
.mymo-tel{width:150px;margin:0 auto;padding:14px 12px 20px;border:2px solid var(--line);border-radius:24px;background:linear-gradient(160deg,#efe7ff,#fff)}
.mymo-tel-ecran{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:22px}
.mymo-icone{width:54px;height:54px;border-radius:14px;background:var(--grad);box-shadow:0 6px 16px rgba(123,34,232,.3)}
.mymo-tel-nom{max-width:100%;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mymo-adresse{margin:14px 0 0;font-size:13px;color:var(--mut);word-break:break-all}
.mymo-adresse strong{color:var(--iris)}
.mymo-compteur{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--mut);min-height:20px}
.mymo-compteur.est-long{color:var(--sun)}
.mymo-compteur.est-bon{color:#1a6b34}

.mymo-encadre{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--iris);background:var(--wash);border-radius:0 10px 10px 0;font-size:14px;color:var(--ink2)}
.mymo-encadre code{background:#fff;padding:2px 6px;border-radius:5px}
.mymo-identite{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.mymo-identite strong{display:block;color:var(--ink)}
.mymo-erreur{padding:12px 16px;border-radius:10px;background:#fbe5e5;color:#a00;font-weight:600}

.mymo-envoi{text-align:center;margin:26px 0 4px}
/* Le theme met une marge basse sur tous les p ; sans monter la specificite,
   le « auto » saute et la mention se colle a gauche. */
.mymo .mymo-envoi .mymo-mention{max-width:42ch;margin:26px auto 0;
 font-size:13px;line-height:1.55;color:var(--mut);text-align:center}
.mymo-bouton{display:inline-block;padding:16px 34px;border:0;border-radius:12px;background:var(--grad);color:#fff;font-size:17px;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:0 8px 22px rgba(123,34,232,.28)}
.mymo-bouton:hover{filter:brightness(1.06);color:#fff}

/* écrans 2 et 3 */
.mymo-recap{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--wash);text-align:center}
.mymo-recap.est-prete{background:linear-gradient(160deg,#f3ecff,#fff)}
.mymo-recap-nom{margin:0;font-size:26px;font-weight:800}
.mymo-recap-adr{margin:4px 0 0;color:var(--iris);font-weight:700}
.mymo-recap-l{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.mymo-recap-l li{font-size:14px}
.mymo-recap-l span{display:block;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.mymo-texte{margin:20px 0;font-size:17px}
.mymo-petit{font-size:14px;color:var(--mut)}
.mymo-liens{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.mymo-liens a{font-weight:700;color:var(--iris);text-decoration:none}
.mymo-liens a:hover{text-decoration:underline}

@media (max-width:760px){
  .mymo-duo{grid-template-columns:1fr}
  .mymo-duo-apercu{order:-1}
  .mymo-tete h2{font-size:24px}
  .mymo-bloc{padding:18px 16px}
  .mymo-fil-e{flex:1 1 100%}
}

/* ce qu'il y a à remplir, dit à l'endroit où on se pose la question */
.mymo-tag{display:inline-block;padding:4px 10px;border-radius:99px;background:rgba(123,34,232,.09);
 color:var(--iris);font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;
 text-transform:uppercase;line-height:1.4}
.mymo-tag.est-ok{background:#e9f6ee;color:#1a6b34}

/* une note secondaire, plus discrète que l'ancien encadré */
.mymo-note{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
 font-size:13.5px;color:var(--mut)}
.mymo-note code{background:var(--wash);padding:2px 6px;border-radius:5px;color:var(--ink2)}

/* l'écran de celui qui n'a pas encore acheté */
.mymo-vide{max-width:52ch;margin:10px auto;padding:44px 30px;text-align:center;
 border:1px solid var(--line);border-radius:20px;background:var(--wash)}
.mymo-vide-i{display:block;width:56px;height:56px;margin:0 auto 20px;border-radius:16px;
 background:var(--grad);opacity:.9;box-shadow:0 10px 24px rgba(123,34,232,.28)}
.mymo-vide h2{margin:0 0 10px;font-size:26px;line-height:1.2}
.mymo-vide p{margin:0 0 6px;color:var(--ink2)}
.mymo-vide .mymo-petit{margin-top:18px;color:var(--mut)}

.mymo-apercu-admin{margin:0 0 20px;padding:10px 14px;border-radius:10px;background:#fff8e6;
 border:1px solid #f0dfae;color:#7a5a00;font-size:13.5px}

/* barre de test, visible du seul administrateur */
.mymo-test{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 22px;
 padding:10px 14px;border:1px solid #f0dfae;border-radius:12px;background:#fff8e6;font-size:13px}
.mymo-test-t{font-weight:800;color:#7a5a00;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.mymo-test-l{display:flex;gap:6px;flex-wrap:wrap}
.mymo .mymo-test .mymo-test-a[class]{padding:4px 11px;border:1px solid #eadfc0;border-radius:99px;
 background:#fff;color:#7a5a00;font-weight:700;text-decoration:none;border-bottom:0}
.mymo .mymo-test .mymo-test-a[class]:hover{border-color:#c8a340}
.mymo .mymo-test .mymo-test-a.est-ici[class]{background:#7a5a00;border-color:#7a5a00;color:#fff}
.mymo .mymo-test .mymo-test-r[class]{margin-left:auto;color:#7a5a00;font-weight:700;
 text-decoration:underline;border-bottom:0}

@media (max-width:560px){
 .mymo-fil-t{display:none}
 .mymo-fil-e::before{top:13px}
 .mymo-bloc{padding:20px 18px}
}


/* ------------------------------------------------------------------ deroule
   Le formulaire ne s'ouvre pas d'un bloc : chaque etape apparait quand la
   precedente est faite, et se replie en une ligne une fois qu'on l'a quittee.
   Sans JavaScript, rien de tout cela ne s'applique et tout reste visible. */
.mymo-etape{transition:border-color .2s}
.mymo-etape-corps{margin-top:12px}
.mymo-deroule .mymo-etape.est-cachee{display:none}
.mymo-deroule .mymo-etape.est-repliee{padding:16px 22px;background:var(--wash)}
.mymo-deroule .mymo-etape.est-repliee .mymo-etape-corps{display:none}
.mymo-deroule .mymo-etape.est-repliee h3{font-size:16px;color:var(--ink2)}
.mymo-deroule .mymo-etape.est-repliee .mymo-num{width:22px;height:22px;font-size:12px}

.mymo-resume{display:none;margin:8px 0 0;padding-left:32px;font-size:14.5px;
 font-weight:700;color:var(--ink);word-break:break-word}
.mymo-deroule .mymo-etape.est-repliee .mymo-resume{display:block;padding-left:32px}

.mymo-modif{display:none}
/* meme raison que pour le bouton principal : le theme neutralise les boutons
   des extensions dans l'espace client, il faut passer devant. */
.mymo .mymo-etape .mymo-modif[class]{margin-left:auto;padding:5px 13px;
 border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--iris);
 font-family:inherit;font-size:13px;font-weight:700;line-height:1.4;cursor:pointer;
 box-shadow:none}
.mymo .mymo-etape .mymo-modif[class]:hover{border-color:var(--iris);background:var(--wash)}
.mymo-deroule .mymo-etape.est-repliee .mymo-modif[class]{display:inline-block}
.mymo-deroule .mymo-etape.est-repliee .mymo-tag{display:none}

/* l'etape faite : la pastille numerotee devient une coche */
.mymo-deroule .mymo-etape.est-faite.est-repliee .mymo-num{font-size:0}
.mymo-deroule .mymo-etape.est-faite.est-repliee .mymo-num::after{content:"\2713";font-size:13px}

/* arrivee d'une etape : une seule fois, et jamais pour qui n'en veut pas */
@keyframes mymo-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mymo-deroule .mymo-etape.vient-d-arriver{animation:mymo-arrive .42s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){
 .mymo-deroule .mymo-etape.vient-d-arriver{animation:none}
}

/* derniere etape : le recapitulatif puis le bouton */
.mymo-etape-fin{background:linear-gradient(170deg,#f7f2ff,#fff 60%)}
.mymo-recap-final{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 30px;
 margin:0;padding:0;border-top:0;text-align:left}
.mymo-recap-final li{min-width:0}
.mymo-recap-final strong{display:block;margin-top:2px;font-size:15px;line-height:1.35;overflow-wrap:anywhere}

/* Le theme neutralise volontairement les boutons des extensions dans l'espace
   client — y compris la couleur des liens. Notre bouton doit passer devant,
   partout ou il apparait : d'ou la classe repetee. */
.mymo .mymo-bouton[class][class]{display:inline-block;padding:16px 34px;border:0;
 border-radius:12px;background:var(--grad);color:#fff;font-family:inherit;font-size:17px;
 font-weight:800;line-height:1.2;cursor:pointer;text-decoration:none;border-bottom:0;
 box-shadow:0 8px 22px rgba(123,34,232,.28)}
.mymo .mymo-bouton[class][class]:hover{filter:brightness(1.06);color:#fff}

@media (max-width:560px){
 .mymo-recap-final{grid-template-columns:1fr}
 .mymo-deroule .mymo-etape.est-repliee{padding:14px 16px}
 .mymo-resume,.mymo-deroule .mymo-etape.est-repliee .mymo-resume{padding-left:0}
 .mymo .mymo-bouton[class][class]{width:100%;padding:16px 20px}
}

/* ------------------------------------------------------------------ attente
   Le seul ecran ou le client n'a rien a faire : on lui donne du temps qui
   passe pour de vrai, de l'air, et deux portes pour parler a quelqu'un. */
.mymo-tete-c{text-align:center;max-width:46ch;margin:0 auto 30px}
.mymo-tete-c h2{margin:0 0 8px}
.mymo .mymo-tete-c p{margin:0;color:var(--mut)}

.mymo-attente{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
 padding:34px 36px;border:1px solid var(--line);border-radius:22px;
 background:linear-gradient(150deg,#f7f2ff,#fff 65%)}

.mymo-jauge{position:relative;width:180px;height:180px;flex:none}
.mymo-jauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.mymo-jauge-f{fill:none;stroke:var(--line);stroke-width:7}
.mymo-jauge-p{fill:none;stroke:url(#mymo-degrade);stroke-width:7;stroke-linecap:round;
 stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.mymo-jauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:4px;margin:0;text-align:center}
.mymo-jauge-c strong{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 font-size:25px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.mymo-jauge-c span{max-width:13ch;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--mut)}

.mymo-attente-fiche{min-width:0}
.mymo-attente-eti{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:var(--mut)}
.mymo .mymo-attente-nom{margin:0;font-size:27px;font-weight:800;line-height:1.15}
.mymo .mymo-attente-adr{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--iris);
 overflow-wrap:anywhere}
.mymo .mymo-attente-uni{display:inline-block;margin:16px 0 0;padding:5px 12px;border-radius:99px;
 background:rgba(123,34,232,.09);color:var(--iris);font-size:12.5px;font-weight:700}
.mymo .mymo-attente-quand{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);
 font-size:14px;line-height:1.6;color:var(--mut)}
.mymo .mymo-attente-quand strong{color:var(--ink);font-size:15.5px}
.mymo-attente.est-depassee .mymo-attente-quand{opacity:.5}
.mymo .mymo-attente-retard{margin:14px 0 0;padding:12px 14px;border-radius:12px;
 background:#fff8e6;border:1px solid #f0dfae;color:#7a5a00;font-size:13.5px;line-height:1.55}

/* ce qui se fabrique pendant l'attente */
.mymo-soustitre{margin:44px 0 18px;font-size:19px;text-align:center}
.mymo-suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
 list-style:none;margin:0;padding:0;counter-reset:none}
.mymo-suite > li{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;
 border:1px solid var(--line);border-radius:18px;background:#fff}
.mymo-suite > li::before{content:none}
.mymo-suite h4{margin:0 0 6px;font-size:16px;line-height:1.3}
.mymo .mymo-suite p{margin:0;font-size:14px;line-height:1.6;color:var(--mut)}

/* deux portes : nous ecrire, ou aller voir les autres */
.mymo-portes{margin-top:8px}
.mymo-portes-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mymo-porte{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--wash)}
.mymo-porte h4{margin:0 0 8px;font-size:17px;line-height:1.3}
.mymo .mymo-porte p{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}
.mymo-porte-i{display:block;width:40px;height:40px;margin-bottom:14px;border-radius:12px;
 background:var(--grad);box-shadow:0 8px 18px rgba(123,34,232,.22);position:relative}
.mymo-porte-i::after{content:"";position:absolute;inset:0;background:#fff;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
 -webkit-mask-size:20px 20px;mask-size:20px 20px}
.mymo-porte-i-sup::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.1A8.4 8.4 0 0 1 4 12a8.4 8.4 0 0 1 8.5-8.4 8.4 8.4 0 0 1 8.5 7.9z'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.1A8.4 8.4 0 0 1 4 12a8.4 8.4 0 0 1 8.5-8.4 8.4 8.4 0 0 1 8.5 7.9z'/%3E%3C/svg%3E")}
.mymo-porte-i-tav::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E")}
.mymo .mymo-portes .mymo-porte-a[class]{display:inline-block;margin-top:16px;font-weight:700;
 color:var(--iris);text-decoration:none;border-bottom:1px solid rgba(123,34,232,.35);padding-bottom:1px}
.mymo .mymo-portes .mymo-porte-a[class]:hover{border-bottom-color:var(--iris)}

@media (prefers-reduced-motion:reduce){ .mymo-jauge-p{transition:none} }

@media (max-width:720px){
 .mymo-attente{grid-template-columns:1fr;justify-items:center;text-align:center;padding:28px 20px;gap:26px}
 .mymo-attente-fiche{text-align:center}
 .mymo .mymo-attente-quand{border-top:1px solid var(--line)}
 .mymo-jauge{width:158px;height:158px}
}

/* ------------------------------------------------------------------- prête
   Deux gestes seulement : entrer dans le back-office, ou aller voir
   l'application. Le reste est de l'information, pas des boutons. */
.mymo-prete{padding:34px 30px 30px;text-align:center;border:1px solid var(--line);
 border-radius:22px;background:linear-gradient(150deg,#f3ecff,#fff 62%)}
.mymo .mymo-prete-nom{margin:0;font-size:30px;font-weight:800;line-height:1.15}
.mymo .mymo-prete-adr{margin:6px 0 0;font-size:15.5px;font-weight:700;color:var(--iris);
 overflow-wrap:anywhere}
.mymo-prete-b{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.mymo .mymo-prete-p{max-width:44ch;margin:22px auto 0;padding-top:18px;
 border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--mut)}
.mymo .mymo-prete-p code{display:inline-block;margin-top:8px;background:#fff;padding:5px 11px;
 border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px;font-weight:600;
 overflow-wrap:anywhere}

/* le bouton secondaire — meme combat que le principal face au reset du theme */
.mymo .mymo-bouton-o[class][class]{display:inline-block;padding:16px 28px;
 border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
 font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;
 box-shadow:none;border-bottom:1px solid var(--line)}
.mymo .mymo-bouton-o[class][class]:hover{border-color:var(--iris);color:var(--iris)}

.mymo-invit{display:flex;gap:18px;align-items:flex-start;margin-top:22px;padding:22px 24px;
 border:1px solid var(--line);border-radius:18px;background:#fff}
.mymo-invit-i{flex:none;display:block;width:40px;height:40px;border-radius:12px;
 background:var(--grad);position:relative;box-shadow:0 8px 18px rgba(123,34,232,.22)}
.mymo-invit-i::after{content:"";position:absolute;inset:0;background:#fff;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
 -webkit-mask-size:20px 20px;mask-size:20px 20px;
 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 6.5 9 6 9-6'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 6.5 9 6 9-6'/%3E%3C/svg%3E")}
.mymo-invit-t{min-width:0}
.mymo-invit h3{margin:0 0 8px;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.mymo .mymo-invit p{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}
.mymo .mymo-invit .mymo-invit-s{margin-top:10px;color:var(--mut);font-size:13.5px}

.mymo-porte-i-faq::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 9a3 3 0 1 1 4 2.8c-.8.3-1.2 1-1.2 1.8v.4'/%3E%3Cpath d='M12 17.5h.01'/%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 9a3 3 0 1 1 4 2.8c-.8.3-1.2 1-1.2 1.8v.4'/%3E%3Cpath d='M12 17.5h.01'/%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/svg%3E")}
.mymo-porte-i-ia::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 13.9 8l5.6 1.9-5.6 1.9L12 17.4l-1.9-5.6L4.5 9.9 10.1 8z'/%3E%3Cpath d='M18.5 15.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 13.9 8l5.6 1.9-5.6 1.9L12 17.4l-1.9-5.6L4.5 9.9 10.1 8z'/%3E%3Cpath d='M18.5 15.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3C/svg%3E")}

@media (max-width:560px){
 .mymo-prete{padding:28px 18px 24px}
 .mymo .mymo-prete-nom{font-size:25px}
 .mymo-prete-b{flex-direction:column}
 .mymo .mymo-bouton-o[class][class]{width:100%}
 .mymo-invit{flex-direction:column;gap:14px}
}

/* ------------------------------------------------------- parties et en-tete
   L'ecran se lit en trois temps. Chaque partie s'annonce par un trait
   degrade, son titre, puis un filet qui court jusqu'au bord : on voit ou l'on
   est sans avoir a lire. */
/* le theme donne 96px de padding vertical a tout <section> : ici, non. */
.mymo-part{margin-top:38px;padding:0}
.mymo-part:first-of-type{margin-top:0}
.mymo-part-t{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.mymo-part-t::before{content:"";flex:none;width:26px;height:4px;border-radius:99px;background:var(--grad)}
.mymo-part-t::after{content:"";flex:1;height:1px;background:var(--line)}
.mymo .mymo-part-t h3{margin:0;font-size:19px;line-height:1.3;white-space:nowrap}

/* le fil d'etapes devient un vrai bandeau, pas trois pastilles posees sur du blanc */
/* [class] pour passer devant .mym-libre ol[class], qui remet le retrait des listes */
.mymo .mymo-fil[class]{padding:18px 22px;border:1px solid var(--line);border-radius:16px;
 background:var(--wash);margin-bottom:30px}
.mymo-fil-e::before{top:31px;background:var(--line)}

/* ce qui se fabrique pendant l'attente : numero et titre sur la meme ligne.
   Le theme remet a zero le padding des <li> dans l'espace client, d'ou la
   classe portee par chaque element — et la specificite qui va avec. */
.mymo .mymo-suite .mymo-etap[class]{display:block;padding:20px 22px 22px;
 border:1px solid var(--line);border-radius:18px;background:#fff}
.mymo .mymo-suite .mymo-etap[class]::before,
.mymo .mymo-suite .mymo-etap[class]::marker{content:none;display:none}
.mymo-etap-h{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.mymo .mymo-etap-h h4{margin:0;font-size:15.5px;line-height:1.3}
.mymo .mymo-suite .mymo-etap[class] p{margin:0;font-size:14px;line-height:1.6;color:var(--mut)}

@media (max-width:560px){
 .mymo .mymo-fil[class]{padding:14px 12px}
 .mymo .mymo-part-t h3{white-space:normal}
}

/* ------------------------------------------------------------- entretien
   Le compteur dit ce qui a ete fait, pas ce qui reste : « 4 sur 12 publiees »
   valorise le service rendu la ou « il reste 8 » fait fondre un credit. */
.mymo-quota{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;
 padding:26px 28px;border:1px solid var(--line);border-radius:20px;
 background:linear-gradient(150deg,#f7f2ff,#fff 62%)}
.mymo .mymo-quota-n{margin:0;line-height:1}
.mymo-quota-n strong{font-size:42px;font-weight:800;letter-spacing:-.02em}
.mymo-quota-n span{font-size:15px;font-weight:700;color:var(--mut)}
.mymo .mymo-quota-l{margin:4px 0 0;font-size:13.5px;color:var(--mut)}
.mymo-quota-b{margin-top:16px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.mymo-quota-b span{display:block;height:100%;border-radius:99px;background:var(--grad);
 transition:width .6s cubic-bezier(.16,1,.3,1)}
.mymo .mymo-quota-d p{margin:0 0 12px;font-size:14px}
.mymo .mymo-quota-d p:last-child{margin-bottom:0}
.mymo-quota-d span{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
 text-transform:uppercase;color:var(--mut)}
.mymo-quota-d strong{color:var(--ink)}
.mymo-quota.est-echu{background:var(--wash);opacity:.75}
.mymo .mymo-note-alerte{padding:14px 16px;border-top:0;border-radius:12px;background:#fff8e6;
 border:1px solid #f0dfae;color:#7a5a00}

/* ------------------------------------------------------------- historique
   Une longue liste de corrections ne doit pas etirer la page : chaque mise a
   jour se replie. <details> plutot qu'un script — le pli survit a une panne
   de JavaScript, et le clavier le pilote nativement. La plus recente est
   ouverte : c'est celle qu'on vient lire. */
.mymo-hist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mymo .mymo-hist .mymo-hist-i[class]{display:block;padding:0;margin:0;background:none;border:0}
.mymo .mymo-hist .mymo-hist-i[class]::before,
.mymo .mymo-hist .mymo-hist-i[class]::marker{content:none;display:none}

.mymo-maj{position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;
 overflow:hidden}
.mymo-maj::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--grad)}
.mymo-maj[open]{box-shadow:0 6px 22px rgba(21,10,40,.05)}

.mymo .mymo-maj > summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:16px 44px 16px 22px;cursor:pointer;list-style:none;position:relative}
.mymo .mymo-maj > summary::-webkit-details-marker{display:none}
.mymo .mymo-maj > summary:hover{background:var(--wash)}
.mymo .mymo-maj > summary:focus-visible{outline:2px solid var(--iris);outline-offset:-2px}

.mymo-maj-d{flex:none;padding:5px 11px;border-radius:8px;background:var(--grad);color:#fff;
 font-size:12px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
 white-space:nowrap}
.mymo-maj-h{flex:1 1 auto;min-width:0;font-family:inherit;font-size:17px;font-weight:800;
 line-height:1.3;color:var(--ink)}

/* le chevron : la seule chose qui bouge quand on ouvre */
.mymo-maj-c{position:absolute;right:18px;top:50%;width:10px;height:10px;margin-top:-7px;
 border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);border-radius:1px;
 transform:rotate(45deg);transition:transform .2s ease}
.mymo-maj[open] .mymo-maj-c{transform:rotate(-135deg);margin-top:-3px}

/* les stores : seulement ce qu'on sait, jamais un statut qui vieillit mal */
.mymo-maj-s{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.mymo-maj-s > span{display:inline-block;padding:4px 11px;border-radius:99px;
 background:var(--wash);color:var(--ink2);font-size:12px;font-weight:700;line-height:1.5}
.mymo-maj-s > span em{margin-left:5px;font-style:normal;font-weight:600;color:var(--mut)}
.mymo-maj-s > .est-en-ligne{background:#e9f6ee;color:#12522a}
.mymo-maj-s > .est-en-ligne em{color:#1a6b34}

.mymo-maj-b{padding:2px 22px 22px}
.mymo-maj-r{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.mymo-maj-r:first-child{margin-top:4px;padding-top:0;border-top:0}
.mymo .mymo-maj-rt{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:11px;
 font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--iris)}
.mymo .mymo-maj-rt span{padding:1px 7px;border-radius:99px;background:rgba(123,34,232,.1);
 letter-spacing:0;font-size:11px}
.mymo .mymo-maj-b ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mymo .mymo-maj-b ul li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;
 color:var(--ink2)}
.mymo .mymo-maj-b ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
 border-radius:99px;background:var(--iris);opacity:.5}
.mymo .mymo-maj-rien{margin:6px 0 0;font-size:14px;color:var(--mut)}

@media (prefers-reduced-motion:reduce){ .mymo-maj-c{transition:none} }



/* une pastille de store ne doit jamais pousser la carte hors de l'ecran */
.mymo-maj-s > span{max-width:100%;white-space:normal}

@media (max-width:640px){
 .mymo-quota{grid-template-columns:1fr;gap:20px;padding:22px 18px}
 .mymo .mymo-maj > summary{padding:14px 40px 14px 16px;gap:9px}
 .mymo-maj-b{padding:2px 16px 18px}
 .mymo-maj-s{margin-left:0;width:100%}
 .mymo-maj-h{flex:1 1 100%}
}
