/* « Mon agent IA ! » — page processus (maquette 9 du dossier du 23/10/2026) et page « Qui sommes-nous ».
   Jetons du site seulement (tokens.css) : la maquette a été relevée sur bluelemonagent.ai, ses couleurs
   sont celles de la charte. Aucune largeur maximale en caractères sur un texte (§ 2.18) : un paragraphe
   occupe toute la largeur de son encadré. Mobile d'abord ; les grilles s'ouvrent à partir de 768 px. */

.mai { padding-bottom: var(--sp-12); }
.mai h1 { font-size: clamp(32px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: var(--sp-2) 0 var(--sp-4); }
.mai h1 em { font-style: normal; color: var(--c-teal); }
.mai h2 { font-size: clamp(24px, 3.2vw, 30px); line-height: 1.15; margin: 0 0 var(--sp-2); }
.mai h3 { font-size: 19px; line-height: 1.25; margin: 0 0 var(--sp-2); }
.mai-lead { font-size: 18px; color: var(--c-ink-2); margin: 0 0 var(--sp-4); }

/* Héros : une colonne ; deux quand la carte du parcours est ouverte. */
.mai-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding: var(--sp-6) 0 var(--sp-4); }
/* Héros à deux colonnes (page processus, carte ouverte) : colonnes alignées EN HAUT — le bord haut de la
   citation au niveau du bord haut de la carte (Ronan Le Boulaire, 24/10/2026 ; centrées, la colonne de
   gauche flottait au milieu du formulaire). Le héros à une colonne (« Qui sommes-nous ») est inchangé. */
.mai-hero--carte { align-items: start; }
/* Largeurs de m9.html (`.hero`) : carte de 600 px, 40 px entre les colonnes. */
@media (min-width: 1024px) { .mai-hero--carte { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: calc(var(--sp-8) + var(--sp-2)); } }

.mai-verbatim { position: relative; margin: 0 0 var(--sp-4); padding: 2px 0 2px 22px; border-left: 5px solid var(--c-accent); }
.mai-verbatim q { display: block; quotes: "« " " »"; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.3; font-weight: 700; font-style: italic; color: var(--c-primary); }
.mai-verbatim cite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-style: normal; font-size: 14px; color: var(--c-muted); margin-top: var(--sp-2); }
.mai-exemple { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--c-warning); background: var(--c-warning-bg); border-radius: var(--sp-1); padding: 1px 7px; }

.mai-confiance { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 14px; font-weight: 600; color: var(--c-primary); }
.mai-confiance li { display: flex; align-items: center; gap: 6px; }
.mai-confiance li span { color: var(--c-success-ink); font-weight: 900; }
.mai-cta-row { margin-top: var(--sp-2); }

/* Carte du parcours (coquille du lot A). */
.mai-carte { background: var(--c-bg); border: 2px solid var(--c-accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-4) var(--sp-6); }
.mai-carte__titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: 15px; margin: 0 0 var(--sp-2); }
.mai-carte__titre .mai-carte__prerempli { margin-left: auto; }
.mai-carte__prerempli { font-size: 12px; font-weight: 700; color: var(--c-teal); background: var(--c-c50); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.mai-carte__besoin { font-size: 15px; line-height: 1.5; margin: 0 0 var(--sp-3); }
.mai-carte__note { font-size: 13px; color: var(--c-muted); margin: 0 0 var(--sp-4); }
.mai-carte__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 14px; font-weight: 700; }

/* Sections. */
.mai-section { padding: var(--sp-8) 0 0; margin-top: var(--sp-8); border-top: 1px solid var(--c-line); }
.mai-section--plain { border-top: 0; padding-top: 0; margin-top: var(--sp-6); }
.mai-sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-4); }
.mai-sh p { margin: 0; color: var(--c-muted); }
.mai-sh__lien { font-weight: 700; white-space: nowrap; }

/* Avant / après. */
.mai-ba { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: stretch; }
@media (min-width: 768px) { .mai-ba { grid-template-columns: 1fr 64px 1fr; gap: 0; } }
.mai-col { border-radius: 14px; padding: var(--sp-6); }
.mai-col--avant { background: var(--c-bg); border: 1px solid var(--c-line); display: flex; flex-direction: column; }
.mai-col--avant .mai-pied { margin-top: auto; padding-top: var(--sp-3); color: var(--c-muted); }
.mai-col--apres { background: var(--c-primary); color: var(--c-bg); }
.mai-col--apres h3 { color: var(--c-bg); }
.mai-col--apres .mai-pied { color: var(--c-line); }
.mai-col h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mai-tag { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; }
.mai-col--avant .mai-tag { background: var(--c-soft); color: var(--c-muted); }
.mai-col--apres .mai-tag { background: var(--c-accent); color: var(--c-primary); }
.mai-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.mai-col li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--sp-3); align-items: center; border-radius: 9px; padding: 7px 12px; font-size: 15px; }
.mai-col--avant li { background: var(--c-bg); border: 1px solid var(--c-line); }
.mai-col--apres li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.mai-col--apres li.mai-decision { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); font-weight: 700; }
.mai-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.mai-col--avant .mai-n { background: var(--c-bg); border: 1.5px solid var(--c-line); color: var(--c-muted); }
.mai-col--apres .mai-n { background: var(--c-accent); color: var(--c-primary); }
.mai-col--apres li.mai-decision .mai-n { background: var(--c-primary); color: var(--c-bg); }
.mai-col li small { font-size: 12.5px; white-space: nowrap; font-weight: 700; }
.mai-col--avant li small { color: var(--c-error); }
.mai-col--apres li small { color: var(--c-accent); }
.mai-col--apres li.mai-decision small { color: var(--c-primary); }
.mai-pied { margin: var(--sp-3) 0 0; font-size: 13.5px; }
.mai-mid { display: none; place-items: center; }
@media (min-width: 768px) { .mai-mid { display: grid; } }
.mai-mid span { width: 46px; height: 46px; border-radius: 50%; background: var(--c-accent); color: var(--c-primary); display: grid; place-items: center; font-size: 22px; font-weight: 900; }

/* Fait / décide. */
.mai-card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: var(--sp-6); }
.mai-dd { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .mai-dd { grid-template-columns: 1.55fr 1fr; } }
.mai-dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .mai-does ul { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); } }
.mai-dd li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-2); font-size: 15px; line-height: 1.4; }
.mai-dd li b { display: block; }
.mai-d { display: block; color: var(--c-muted); font-size: 13.5px; }
.mai-ck { width: 26px; height: 26px; border-radius: 7px; background: var(--c-success-bg); color: var(--c-success-ink); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.mai-you { background: var(--c-c50); border-color: var(--c-accent); }
.mai-you .mai-ck { background: var(--c-teal); color: var(--c-bg); }

/* Outils. */
.mai-toolrow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mai-tp { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--c-bg); border: 1.5px solid var(--c-line); border-radius: var(--radius-pill); padding: 8px 16px 8px 8px; font-weight: 700; font-size: 15px; }
.mai-m { min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--c-bg); background: var(--c-primary); }
.mai-tp small { font-weight: 500; color: var(--c-muted); font-size: 13px; }
.mai-tools-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font-size: 14px; color: var(--c-muted); }
.mai-tools-foot a { font-weight: 700; }

/* Facturation électronique et temps récupéré. */
.mai-duo { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .mai-duo { grid-template-columns: 1fr 1fr; } }
.mai-efact { background: var(--c-soft); border: 1.5px solid var(--c-line); border-radius: 14px; padding: var(--sp-6); }
.mai-efact h3 { font-size: 21px; }
.mai-efact p { margin: 0 0 var(--sp-3); font-size: 15px; color: var(--c-ink-2); }
.mai-flow { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.mai-flow li { display: inline-flex; align-items: center; gap: 6px; }
.mai-flow span { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 8px; padding: 6px 9px; }
.mai-flow i { font-style: normal; color: var(--c-teal); font-weight: 900; }
.mai-calc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.mai-v { background: var(--c-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 10px 14px; text-align: center; }
.mai-v b { display: block; font-size: 24px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.mai-v span { font-size: 12.5px; color: var(--c-muted); }
.mai-op { font-size: 22px; font-weight: 900; color: var(--c-muted); }
.mai-res { background: var(--c-c50); border-color: var(--c-accent); }
.mai-res b { color: var(--c-teal); }
.mai-gain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); background: var(--c-primary); color: var(--c-bg); border-radius: var(--radius-sm); padding: 12px 16px; }
.mai-gain b { font-size: 26px; font-weight: 900; color: var(--c-accent); white-space: nowrap; }
.mai-gain span { flex: 1 1 200px; font-size: 14px; line-height: 1.4; }
.mai-warn { font-size: 13px; color: var(--c-muted); margin: var(--sp-2) 0 0; }

/* Agents de la famille. */
.mai-fam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .mai-fam { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mai-fam { grid-template-columns: repeat(4, 1fr); } }
.mai-ag { position: relative; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.mai-ag--cur { border: 2px solid var(--c-accent); }
.mai-ag h3 { font-size: 17px; margin: 0; }
.mai-ag p { margin: 0; font-size: 14px; color: var(--c-muted); flex: 1; }
.mai-ag a { font-weight: 700; font-size: 14px; }
/* m9 `.ag .top` et `.ag .ico` : pastille d'initiales, badge « Cette page » à droite. */
.mai-ag__haut { display: flex; justify-content: space-between; align-items: center; }
.mai-ag__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--c-c50); color: var(--c-teal); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.mai-ag__haut .mai-badge { position: static; }
/* m9 : surtitre simple (pas de pastille) et bandeau d'appel final horizontal, compact. */
.mai-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal); }
.mai-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); padding: 20px 26px; border-radius: 16px; background: var(--c-primary); color: var(--c-bg); }
.mai-cta h2 { margin: 0; font-size: 24px; color: var(--c-bg); }
.mai-cta p { margin: var(--sp-1) 0 0; font-size: 15px; color: var(--c-footer-muted); }
.mai-cta__acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mai-cta__sec { background: transparent; color: var(--c-bg); border: 1.5px solid var(--c-bg); }
.mai-cta__sec:hover { background: rgba(255, 255, 255, .08); color: var(--c-bg); }
.mai-badge { align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--c-c50); color: var(--c-teal); }

/* Lexique. */
.mai-lex { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: 0; }
@media (min-width: 768px) { .mai-lex { grid-template-columns: repeat(3, 1fr); } }
.mai-lex div { border-top: 3px solid var(--c-accent); background: var(--c-bg); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 12px 16px; font-size: 14.5px; }
.mai-lex dt { font-weight: 900; font-size: 16px; margin-bottom: 4px; }
.mai-lex dd { margin: 0; color: var(--c-ink-2); }

/* Fondateurs (page « Qui sommes-nous »). */
.mai-fondateurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px) { .mai-fondateurs { grid-template-columns: repeat(3, 1fr); } }
.mai-fondateur { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px; padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.mai-fondateur img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: var(--sp-3); border: 3px solid var(--c-c50); }
.mai-fondateur h2 { font-size: 20px; margin: 0 0 var(--sp-1); }
.mai-fondateur__fonction { margin: 0 0 var(--sp-3); font-weight: 700; color: var(--c-teal); }
.mai-fondateur__fonction span { display: block; font-weight: 500; color: var(--c-muted); font-size: 14px; }
.mai-fondateur__parcours { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ink-2); }
.mai-fondateur__source { margin: var(--sp-3) 0 0; font-size: 12.5px; color: var(--c-muted); }

/* Indicateur d'étapes du parcours (1 Votre besoin · … · 5 Votre rendez-vous). */
/* Barre des 5 étapes, portée de la maquette (base.css `.steps` et m3) : pastilles de 26 px, coche verte des
   étapes faites, pastille turquoise de l'étape en cours, trait de liaison de 44 px (vert après une étape
   faite). Téléphone (Ronan, 24/10/2026) : deux colonnes alignées, sans traits. */
.mai-etapes { list-style: none; margin: var(--sp-1) 0 var(--sp-6); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 700; color: var(--c-muted); }
.mai-etape { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.mai-etape:not(:last-child)::after { content: ""; flex: none; width: 44px; height: 2px; background: var(--c-line-strong); }
.mai-etape--faite:not(:last-child)::after { background: var(--c-ok-fonce); }
.mai-etape__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-pastille); color: var(--c-muted); font-size: 13px; flex: none; }
.mai-etape--faite .mai-etape__n { background: var(--c-ok-fonce); color: var(--c-bg); }
.mai-etape--courante { color: var(--c-ink); }
.mai-etape--courante .mai-etape__n { background: var(--c-accent); color: var(--c-ink); }
@media (max-width: 639px) {
  .mai-etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
  .mai-etape:not(:last-child)::after { content: none; }
}

/* La carte du parcours (écran 1). */
.mai-carte { display: grid; gap: var(--sp-4); }
.mai-carte__global { margin: 0; }
.mai-carte__qui { border: 0; margin: 0; padding: 0; }
.mai-carte__qui legend { font-weight: 800; font-size: 14px; margin-bottom: var(--sp-2); }
.mai-seg { display: inline-flex; border: 1.5px solid var(--c-primary); border-radius: 9px; overflow: hidden; }
.mai-seg__opt { padding: 6px 14px; font-size: 13.5px; font-weight: 700; color: var(--c-primary); background: var(--c-bg); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.mai-seg__opt + .mai-seg__opt { border-left: 1.5px solid var(--c-primary); }
.mai-seg__opt--on { background: var(--c-primary); color: var(--c-bg); }
.mai-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mai-seg__opt:focus-within { outline: 3px solid var(--ring-teinte); outline-offset: 2px; }
.mai-carte__pourquoi { margin: var(--sp-2) 0 0; font-size: 12.5px; color: var(--c-muted); }
.mai-carte__champs { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-4); }
@media (min-width: 640px) { .mai-carte__champs { grid-template-columns: 1fr 1fr; } .mai-carte__full { grid-column: 1 / -1; } }
.mai-carte__opt { font-weight: 400; color: var(--c-muted); font-size: 12.5px; }
.mai-combo { position: relative; }
.mai-sugg { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 0; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.mai-sugg__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 12px; border-top: 1px solid var(--c-line); cursor: pointer; font-size: 13.5px; }
.mai-sugg__item:first-child { border-top: 0; }
.mai-sugg__item.is-active, .mai-sugg__item:hover { background: var(--c-c50); }
.mai-sugg__nom { font-weight: 800; }
.mai-sugg__meta { grid-column: 1; color: var(--c-muted); font-size: 12.5px; }
.mai-sugg__siren { grid-row: 1 / span 2; align-self: center; font-size: 12px; color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mai-carte__note { margin: 0; font-size: 12.5px; color: var(--c-muted); }
.mai-badge--ok { background: var(--c-success-bg); color: var(--c-success-ink); }
.mai-badge--warn { background: var(--c-warning-bg); color: var(--c-warning); }
.mai-carte__besoin-zone { display: grid; gap: var(--sp-2); border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
.mai-carte__besoin-zone textarea { width: 100%; min-height: 120px; border: 1.5px solid var(--c-line); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; color: var(--c-ink); resize: vertical; }
.mai-carte__besoin-zone textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--ring); }
.mai-carte__actions .btn { width: 100%; }
.mai-carte__sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); font-size: 13px; color: var(--c-muted); }
.mai-carte__sub a:last-child { font-weight: 700; white-space: nowrap; }

/* Écran 2 : « Nous avons compris ». */
.mai-h3 { font-size: 19px; }
.mai-compris { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); }
.mai-compris div { display: grid; grid-template-columns: 1fr; gap: 2px var(--sp-4); padding: 8px 0; border-top: 1px solid var(--c-line); }
@media (min-width: 640px) { .mai-compris div { grid-template-columns: 180px 1fr; } }
.mai-compris dt { font-size: 13px; font-weight: 700; color: var(--c-muted); }
.mai-compris dd { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mai-compris__besoin { display: block; line-height: 1.55; }

/* Classes nommées dans les gabarits : la colonne du temps récupéré et le libellé d'une étape. */
.mai-time { display: grid; gap: var(--sp-2); align-content: start; }

/* ── Lot I — mode « Un service public » (maquette 1b) : fiches du catalogue public sous la zone de dépôt, réassurance d'achat public sous le bouton, en-tête de la liste du
   registre, note de l'écran 2. Jetons seulement ; aucune largeur maximale sur les textes (§ 2.18). ── */
/* Les trois blocs du mode public dans la grille de la carte : jamais plus larges qu'elle. */
.mai-public { min-width: 0; }
.mai-catpub { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 13.5px; }
.mai-catpub__t { font-weight: 700; color: var(--c-primary); }
.mai-chip { display: inline-block; font-size: 13px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius-pill); color: var(--c-primary); background: var(--c-bg); text-decoration: none; }
.mai-chip:hover, .mai-chip:focus-visible { border-color: var(--c-accent); background: var(--c-c50); }
.mai-catpub__total { color: var(--c-muted); font-size: 13px; }
.mai-achat { display: grid; gap: var(--sp-2); }
.mai-pub { margin: 0; display: flex; align-items: center; gap: var(--sp-3); background: var(--c-success-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-size: 14.5px; font-weight: 600; color: var(--c-success-ink); line-height: 1.4; }
.mai-pub__ic { width: 34px; height: 34px; border-radius: 50%; background: var(--c-bg); color: var(--c-success-ink); display: grid; place-items: center; flex: none; }
.mai-pub__ic svg { width: 18px; height: 18px; }
.mai-abbr { margin: 0; font-size: 12px; color: var(--c-muted); }
.mai-sugg__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-soft); font-size: 12px; color: var(--c-muted); cursor: default; }
.mai-sugg__tete b { text-transform: uppercase; letter-spacing: .05em; }
.mai-sugg__tete + .mai-sugg__item { border-top: 0; }
.mai-sugg__compte { font-weight: 700; }
.mai-sugg__nom mark { background: var(--c-c50); color: inherit; border-radius: 2px; }
.mai-public-note { margin: 0 0 var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--c-ink-2); }

/* Zone de dépôt de la carte (écran 1). */
.mai-drop { border: 1.5px dashed var(--c-line); border-radius: var(--radius-sm); background: var(--c-soft); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); }
.mai-drop--survol { border-color: var(--c-accent); background: var(--c-c50); }
.mai-drop--erreur { border-color: var(--c-error); }
.mai-drop__m { margin: 0; font-size: 13.5px; color: var(--c-muted); }
.mai-drop__m b { color: var(--c-ink); }
.mai-drop__fmt { display: block; font-size: 12px; }

/* Écran 2 « Précisions » (maquette 2). */
.mai-ttl { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-6); padding: var(--sp-4) 0; }
.mai-ttl h1 { margin-bottom: var(--sp-2); }
.mai-ttl .mai-lead { margin: 0; }
.mai-bandeau { background: var(--c-success-bg); color: var(--c-success-ink); border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 600; margin: 0 0 var(--sp-4); }
.mai-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .mai-cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.mai-precisions { display: grid; gap: var(--sp-4); min-width: 0; }
.mai-ch { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.mai-meta { font-size: 13px; color: var(--c-muted); }
.mai-sum { margin: 0; display: grid; }
.mai-sum > div { display: grid; grid-template-columns: 1fr; gap: 4px var(--sp-4); padding: 8px 0; border-top: 1px solid var(--c-line); align-items: center; }
@media (min-width: 640px) { .mai-sum > div { grid-template-columns: 170px 1fr; } }
.mai-sum dt { font-size: 13px; font-weight: 700; color: var(--c-muted); }
.mai-sum dd { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mai-ligne { width: 100%; border: 1px solid transparent; border-bottom-color: var(--c-line); border-radius: 6px; padding: 6px 8px; font: inherit; color: var(--c-ink); background: transparent; }
.mai-ligne:hover { border-color: var(--c-line); background: var(--c-bg); }
.mai-ligne:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--ring); background: var(--c-bg); }
.mai-sum__manque dt { color: var(--c-warning); }
.mai-sum__manque dd { color: var(--c-warning); font-size: 14px; }
.mai-inputs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mai-file { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2); align-items: center; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 8px 10px; }
.mai-file__th { font-size: 11px; font-weight: 900; background: var(--c-primary); color: var(--c-bg); border-radius: 6px; padding: 4px 6px; }
.mai-file__n { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.mai-file__s { font-size: 12.5px; color: var(--c-muted); }
.mai-file__x { border: 0; background: transparent; color: var(--c-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mai-file__x:hover { color: var(--c-error); }
.mai-questions { display: grid; gap: var(--sp-6); }
.mai-duo-q { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .mai-duo-q { grid-template-columns: 1fr 1fr; } }
.mai-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.mai-qh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); padding: 0; }
.mai-qh h3 { margin: 0; font-size: 17px; }
.mai-fac { font-size: 12px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.mai-hint { font-size: 13px; color: var(--c-muted); }
.mai-q input[type="text"] { width: 100%; border: 1.5px solid var(--c-line); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; color: var(--c-ink); }
.mai-q input[type="text"]:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--ring); }
.mai-src { margin: var(--sp-1) 0 0; font-size: 12.5px; color: var(--c-muted); }
.mai-picks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mai-pick { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--c-line); border-radius: var(--radius-pill); padding: 7px 13px; font-size: 14.5px; font-weight: 600; cursor: pointer; background: var(--c-bg); }
.mai-pick:has(input:checked) { border-color: var(--c-teal); background: var(--c-c50); color: var(--c-teal); }
.mai-pick input { margin: 0; }
.mai-tools-l { display: grid; gap: var(--sp-2); }
.mai-tl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; }
.mai-tl__nm { font-weight: 700; flex: 1 1 160px; }
.mai-addt { display: grid; gap: 6px; padding-top: var(--sp-2); }
.mai-addt label { font-size: 14px; font-weight: 700; }
.mai-qbadge { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--c-teal); background: var(--c-c50); border-radius: var(--radius-pill); padding: 3px 10px; margin-bottom: var(--sp-3); }
.mai-vol { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-4); }
@media (min-width: 640px) { .mai-vol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mai-vol { grid-template-columns: 1fr 1fr 1fr; } }
.mai-foot-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.mai-foot-act__retour { font-weight: 700; margin-right: auto; }
.mai-side { background: var(--c-soft); border: 1px solid var(--c-line); border-radius: 14px; padding: var(--sp-6); display: grid; gap: var(--sp-3); }
.mai-sub { margin: 0; color: var(--c-ink-2); }
.mai-side__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: 14.5px; }
.mai-side__liste b { display: block; }
.mai-rule { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; }
.mai-side-help { margin: 0; font-size: 13px; color: var(--c-muted); }

/* ÉCRAN 3 — « Vos interfaces se fabriquent » (maquette 3, lot D). Jetons seulement. */
.mai-flash { margin: 0 0 var(--sp-4); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); background: var(--c-soft); color: var(--c-ink); }
.mai-flash--ok { border-color: var(--c-success); }
.mai-flash--warn { border-color: var(--c-warning); }
.mai-fab-card { position: relative; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px; padding: var(--sp-4); display: grid; gap: var(--sp-2); overflow: hidden; }
.mai-fab-card__h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.mai-fab-num { font-size: 12px; color: var(--c-muted); }
.mai-fab-num b { font-size: 15px; color: var(--c-ink); }
.mai-fab-tt { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.mai-fab-mail { display: flex; gap: var(--sp-2); align-items: center; font-size: 13px; color: var(--c-ink-2); }
.mai-fab-mail b { display: block; color: var(--c-ink); }
.mai-fab-av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--c-ink); color: var(--c-bg); font-weight: 700; font-size: 12px; flex: none; }
.mai-fab-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mai-fab-kpi b { display: block; font-size: 18px; color: var(--c-ink); }
.mai-fab-kpi small { color: var(--c-muted); font-size: 12px; line-height: 1.3; display: block; }
.mai-fab-l1 { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-ink); }
.mai-fab-puces { margin: var(--sp-1) 0 0; padding-left: var(--sp-6); font-size: 14.5px; line-height: 1.5; color: var(--c-ink); }
.mai-fab-fade { height: 40px; margin-top: -32px; background: linear-gradient(to bottom, transparent, var(--c-bg)); pointer-events: none; }
.mai-fab-more { margin: 0; font-size: 12.5px; color: var(--c-muted); font-style: italic; }
.mai-fab-chosen { font-size: 13px; font-weight: 700; color: var(--c-primary); }
.mai-fab-file p { margin: var(--sp-2) 0 var(--sp-4); }

/* ── ÉCRAN 3, PORTÉ DE maquettes/html/m3.html (Ronan, 24/10/2026 : source HTML obligatoire). Mêmes blocs et
   mêmes mesures que la maquette, couleurs en jetons du site. Retouches de Ronan : pictogrammes, chiffres en
   encadrés centrés à ton, puces, « Choisir » centré, barre du choix dans le flux. Aucun max-width de texte. ── */
.mai-live { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal); margin-bottom: var(--sp-2); }
.mai-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-c50); }
.mai-band { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px; padding: var(--sp-3) 20px; display: grid; gap: var(--sp-3) 18px; align-items: center; margin: 0 0 18px; }
.mai-band__clock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; color: var(--c-ink-2); }
.mai-band__clock b { font-variant-numeric: tabular-nums; font-size: 17px; color: var(--c-ink); background: var(--c-soft); border-radius: 6px; padding: 3px 9px; }
.mai-band__sep { color: var(--c-line-strong); }
.mai-gbar { height: 10px; border-radius: 99px; background: var(--c-pastille); position: relative; }
.mai-gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--c-teal), var(--c-accent)); transition: width .6s ease; }
.mai-gbar i::after { content: ""; position: absolute; right: -8px; top: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-bg); border: 3px solid var(--c-accent); box-sizing: border-box; }
.mai-band__pct { font-weight: 900; font-size: 20px; color: var(--c-teal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mai-band__pct small { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); }
.mai-layout { display: grid; gap: var(--sp-6); align-items: start; }
.mai-tl { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--sp-1) 20px 18px; }
.mai-tl__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 14px 0 10px; border-bottom: 1px solid var(--c-line); }
.mai .mai-tl__head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.mai-clock { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--c-ink); background: var(--c-soft); border-radius: 6px; padding: 3px 9px; }
.mai-tl__liste { list-style: none; margin: 0; padding: 0; }
.mai-st { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-soft); font-size: 14.5px; line-height: 1.4; color: var(--c-ink); }
.mai-st__ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.mai-st--fait .mai-st__ic { background: var(--c-success-bg); color: var(--c-ok-fonce); }
.mai-st--en_cours { background: var(--c-c50); margin: 6px -10px; padding: 13px 10px; border-radius: 10px; border-bottom: 0; }
.mai-st--ensuite { color: var(--c-muted); }
.mai-st--ensuite .mai-st__ic { width: 22px; height: 22px; margin: 1px; border: 2px dashed var(--c-line-strong); }
.mai-st__t { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--c-muted); padding-top: 3px; white-space: nowrap; }
.mai-st__sub { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mai-st__sub .mai-badge { font-size: 11.5px; padding: 2px 8px; }
.mai-spin { width: 22px; height: 22px; margin: 1px; border-radius: 50%; border: 3px solid var(--c-line); border-top-color: var(--c-teal); border-right-color: var(--c-teal); animation: mai-tourner 1s linear infinite; }
@keyframes mai-tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mai-spin { animation: none; } }
.mai-prog { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-2); }
.mai-prog__tr { flex: 1; height: 7px; border-radius: 99px; background: var(--c-bg); overflow: hidden; border: 1px solid var(--c-line); }
.mai-prog__tr i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-accent)); border-radius: 99px; }
.mai-prog > span:last-child { font-size: 13.5px; font-weight: 700; color: var(--c-teal); white-space: nowrap; }
.mai-tl__note { margin: 14px 0 0; padding: var(--sp-3) 14px; background: var(--c-soft); border-radius: var(--sp-2); font-size: 13.5px; line-height: 1.45; color: var(--c-ink-2); }
.mai-grid { display: grid; gap: 10px var(--sp-3); align-items: stretch; }
.mai-gfam { display: contents; }
.mai-fh { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 2px 2px; border-bottom: 2px solid var(--c-ink); }
.mai .mai-fh h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 16px; font-weight: 900; line-height: 1.2; }
.mai-fh div > span { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.mai-fh__cnt { font-size: 12.5px; font-weight: 700; color: var(--c-teal); white-space: nowrap; padding-bottom: 3px; }
.mai-picto { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--c-c50); color: var(--c-teal); font-size: 15px; }
.mai-cd { background: var(--c-bg); border: 1.5px solid var(--c-line); border-radius: 12px; padding: var(--sp-2) 10px; display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.mai-cd--sel { border: 2px solid var(--c-accent); box-shadow: 0 8px 22px rgba(39, 201, 214, .18); padding: 7.5px 9.5px; }
.mai-cd--dim .mai-pv { opacity: .92; }
.mai-cd__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 24px; }
.mai-cd__num { font-size: 12px; font-weight: 800; color: var(--c-muted); letter-spacing: .04em; }
.mai-cd__num b { color: var(--c-ink); }
.mai-cd__pbar { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--c-teal); white-space: nowrap; }
.mai-cd__pbar > i { display: block; width: 54px; height: 6px; border-radius: 99px; background: var(--c-pastille); overflow: hidden; }
.mai-cd__pbar > i > span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-accent)); border-radius: 99px; transition: width .6s ease; }
.mai .mai-cd__tt { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--c-ink); }
.mai-cd__tt .mai-picto { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }
.mai-pv { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; position: relative; }
.mai-cd--sel .mai-pv { border-color: var(--c-c50); }
.mai-pv__mh { display: flex; align-items: center; gap: 9px; padding: 10px var(--sp-3); border-bottom: 1px solid var(--c-line); background: var(--c-soft); }
.mai-pv__av { width: 30px; height: 30px; border-radius: var(--sp-2); background: var(--c-ink); color: var(--c-bg); display: grid; place-items: center; font-weight: 900; font-size: 11.5px; letter-spacing: .02em; flex: none; }
.mai-pv__mh b { display: block; font-size: 12.5px; line-height: 1.25; color: var(--c-ink); }
.mai-pv__mh div span { display: block; font-size: 11.5px; color: var(--c-muted); line-height: 1.25; margin-top: 1px; }
.mai-pv__bd { padding: 10px var(--sp-3) 0; height: 196px; overflow: hidden; display: grid; align-content: start; gap: 6px; }
.mai-pv__bd .mai-fab-kpi { gap: 6px; }
.mai-pv__bd .mai-kpi { padding: 6px 4px; }
.mai-pv__bd .mai-kpi b { font-size: 15px; }
.mai-pv__bd .mai-kpi small { font-size: 11px; }
.mai-pv__bd .mai-fab-l1, .mai-pv__bd .mai-fab-puces { font-size: 12.5px; line-height: 1.42; color: var(--c-ink-2); }
.mai-pv__bd .mai-fab-puces { margin: 0; padding-left: 18px; }
.mai-pv__wr { margin: 0 0 var(--sp-1); font-size: 12px; font-weight: 700; color: var(--c-teal); }
.mai-sk { height: 11px; border-radius: 5px; background: linear-gradient(90deg, var(--c-pastille), var(--c-soft) 50%, var(--c-pastille)); }
.mai-sk--a { width: 80%; } .mai-sk--b { width: 94%; } .mai-sk--c { width: 70%; }
.mai-pv__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; }
.mai-pv__fade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 32%, var(--c-bg) 55%); }
.mai-pv__fade > span { position: absolute; left: 10px; right: 10px; bottom: 7px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--c-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.mai-padlock { position: relative; display: inline-block; flex: none; width: 10px; height: 8px; background: currentColor; border-radius: 2px; margin-top: 5px; }
.mai-padlock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 6px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.mai-cd__ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: auto; padding-top: 2px; }
.mai-cd__pick { margin: 0; }
.mai-choose { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-2); border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.mai-choose:disabled { color: var(--c-muted); cursor: not-allowed; }
.mai-choose--off { color: var(--c-muted); font-weight: 600; cursor: default; }
.mai-box { width: 19px; height: 19px; border: 2px solid var(--c-ink); border-radius: 4px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--c-bg); }
.mai-box--on { background: var(--c-ink); color: var(--c-bg); }
.mai-choose--off .mai-box, .mai-choose:disabled .mai-box { border-color: var(--c-line-strong); background: var(--c-soft); }
.mai-chosen { display: inline-flex; align-items: center; gap: 6px; background: var(--c-accent); color: var(--c-ink); font-size: 12.5px; font-weight: 800; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.mai-chosen[hidden] { display: none; }
.mai-choix { margin-top: 20px; background: var(--c-ink); color: var(--c-bg); border-radius: 14px; padding: var(--sp-4) 22px; display: grid; gap: var(--sp-3) 22px; align-items: center; }
.mai-choix__cnt { display: flex; align-items: center; gap: var(--sp-3); font-size: 16px; }
.mai-choix__cnt b { font-weight: 800; }
.mai-choix__dots { display: flex; gap: 5px; }
.mai-choix__dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-accent); box-sizing: border-box; }
.mai-choix__dots i.on { background: var(--c-accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.mai-choix form { margin: 0; }
.mai-choix .btn { padding: 14px var(--sp-6); font-size: 16.5px; }
.mai-choix__hint { margin: 0; font-size: 14px; color: var(--c-footer-muted); line-height: 1.4; }
/* Les trois chiffres d'une maquette (Ronan, 24/10/2026) : centrés ; ton explicite de la donnée. */
.mai-kpi { background: var(--c-soft); border-radius: var(--radius-sm); padding: var(--sp-2); text-align: center; }
.mai-kpi--negatif { background: var(--c-negatif-bg); }
.mai-kpi--decision { background: var(--c-decision-bg); }
@media (min-width: 640px) { .mai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .mai-band { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mai-band__pct small { text-align: right; }
  .mai-layout { grid-template-columns: 350px minmax(0, 1fr); }
  .mai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mai-choix { grid-template-columns: auto auto minmax(0, 1fr); }
}
.mai-badge--mute { background: var(--c-soft); color: var(--c-muted); border-color: var(--c-line); }
.mai-muted { color: var(--c-muted); }

/* ÉCRAN 4 — « Où vous envoyer… ? », porté depuis maquettes/html/m4.html (24/10/2026), et conditions.
   Valeurs de la maquette, couleurs en jetons. Aucune largeur maximale sur les textes (§ 2.18). */
.mai-coord-ttl { margin: 0 0 20px; }
.mai-coord-grid { display: grid; gap: 26px; align-items: start; }
.mai-coord-main { display: grid; gap: 18px; align-content: start; }
.mai-cond { padding-top: var(--sp-6); }
.mai-cond__liste { display: grid; gap: var(--sp-3); padding-left: 1.2em; margin: var(--sp-4) 0; line-height: 1.55; }
.mai-cond__liste b { display: block; }
/* Colonne gauche : maquettes choisies (`.chosen-h`, `.cc`, `.pv`) */
.mai-coord-side { display: grid; gap: 14px; align-content: start; }
.mai .mai-coord-side__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 -4px; font-size: 17px; font-weight: 900; color: var(--c-ink); }
.mai-coord-side__t span { font-size: 13px; font-weight: 400; color: var(--c-muted); }
.mai-coord-card { position: relative; background: var(--c-bg); border: 2px solid var(--c-accent); border-radius: 14px; padding: 12px; box-shadow: 0 8px 22px rgba(39, 201, 214, .14); }
.mai-coord-cc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mai-coord-cc__num { font-size: 12px; font-weight: 800; color: var(--c-muted); letter-spacing: .04em; }
.mai-coord-cc__num b { color: var(--c-ink); }
.mai-coord-cc__chosen { display: inline-flex; align-items: center; gap: 6px; background: var(--c-accent); color: var(--c-primary); font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mai .mai-coord-cc__tt { margin: 0 0 9px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--c-ink); }
.mai-coord-pv { position: relative; overflow: hidden; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; }
.mai-coord-pv__mh { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--c-line); background: var(--c-soft); }
.mai-coord-pv__av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--c-primary); color: var(--c-bg); font-size: 13px; font-weight: 900; letter-spacing: .02em; }
.mai-coord-pv__mh b { display: block; font-size: 13.5px; line-height: 1.25; color: var(--c-ink); }
.mai-coord-pv__mh div span { display: block; margin-top: 1px; font-size: 12px; line-height: 1.25; color: var(--c-muted); }
.mai-coord-pv__bla { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 9px; line-height: 1.1; color: var(--c-muted); white-space: nowrap; }
.mai-coord-pv__bla img { height: 20px; width: auto; margin-top: 2px; }
.mai-coord-pv__bd { height: 152px; overflow: hidden; padding: 14px 16px 0; }
.mai-coord-pv__t3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--c-ink); }
.mai-coord-pv__t3 b { font-weight: 900; color: var(--c-teal); }
.mai-coord-pv__l1 { margin: 0; font-size: 14px; line-height: 1.42; color: var(--c-ink-2); }
.mai-coord-sk { padding: 10px 16px 0; }
.mai-coord-sk span { display: block; height: 12px; margin: 0 0 9px; border-radius: 5px; background: linear-gradient(90deg, var(--c-line), var(--c-soft) 50%, var(--c-line)); }
.mai-coord-sk span:first-child { width: 90%; }
.mai-coord-sk span:last-child { width: 72%; }
.mai-coord-pv__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; }
.mai-coord-pv__fade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 32%, var(--c-bg) 55%); }
.mai-coord-pv__lk { position: absolute; left: 10px; right: 10px; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.mai-coord-pv__lockic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 2px 8px rgba(0, 27, 57, .08); }
.mai-coord-padlock { position: relative; display: inline-block; width: 12px; height: 9px; margin-top: 4px; border-radius: 2px; background: currentColor; }
.mai-coord-padlock::before { content: ""; position: absolute; left: 2px; top: -7px; width: 8px; height: 8px; box-sizing: border-box; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }
/* « Une question avant de continuer ? » (`.mini`) */
.mai-coord-question { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--c-primary); color: var(--c-bg); }
.mai-coord-question__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-line); color: var(--c-ink-2); }
.mai-coord-question b { display: block; font-size: 14.5px; }
.mai-coord-question div span { font-size: 12.5px; color: var(--c-line); }
.mai-coord-question a { color: var(--c-accent); font-weight: 800; text-decoration: none; }
/* Carte « Vos coordonnées » (`.card`, `.fgrid`, `.consent`) */
.mai-coord-form { display: grid; gap: 18px; }
.mai .mai-coord-main .mai-h3 { margin: 0 0 4px; font-size: 20px; }
.mai-coord-vos { border-radius: 14px; padding: 24px 26px; }
.mai-coord-oblig { margin: 0 0 18px; font-size: 13px; color: var(--c-muted); }
.mai-coord-oblig b { color: var(--c-ink); }
.mai-coord-champs { display: grid; gap: 18px 20px; }
.mai-coord-champs .field { margin: 0; }
.mai-coord-champs input[readonly] { background: var(--c-bg); }
.mai-coord-email__inp { position: relative; }
.mai-coord-email__c { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--c-success); color: var(--c-bg); place-items: center; font-size: 12px; font-weight: 900; }
.mai-coord-okline { display: none; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--c-success-ink); }
.mai-coord-email.is-ok input { padding-right: 42px; border-color: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-bg); }
.mai-coord-email.is-ok .mai-coord-email__c { display: grid; }
.mai-coord-email.is-ok .mai-coord-okline { display: block; }
.mai-coord-email.is-ok .mai-coord-email__aide { display: none; }
.mai-req { color: var(--c-error); font-weight: 700; }
.mai-coord-consent { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.mai-coord-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-ink); cursor: pointer; }
.mai .mai-coord-check input { appearance: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--c-primary); border-radius: 4px; background: var(--c-bg); cursor: pointer; }
.mai .mai-coord-check input:checked { background: var(--c-primary); }
.mai .mai-coord-check input:checked::after { content: "✓"; color: var(--c-bg); font-size: 13px; font-weight: 900; line-height: 1; }
.mai .mai-coord-check input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.mai .mai-coord-check input:disabled { cursor: default; }
.mai-coord-check a { font-weight: 700; }
.mai-coord-check--err { color: var(--c-error); }
.mai-coord-rgpd { margin: 0; font-size: 13px; color: var(--c-muted); }
/* Bouton et sa phrase (`.submit`) */
.mai-coord-submit { display: grid; gap: 18px; align-items: center; }
.mai-coord-submit__btn { padding: 16px 28px; font-size: 17px; }
.mai-coord-submit p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); }
/* Code de vérification (`.code`, `.digits`, `.row2`) */
.mai-coord-codeform { display: grid; gap: 18px; }
.mai-coord-code { display: grid; gap: 18px 30px; align-items: center; padding: 22px 26px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-bg); }
.mai-coord-code p { margin: 0; font-size: 15px; color: var(--c-ink-2); }
.mai-coord-code p b { font-weight: 800; }
.mai .mai-coord-code .mai-coord-code__validite { margin-top: 4px; font-size: 13.5px; color: var(--c-muted); }
.mai-coord-modif { font-size: 13px; margin-left: 6px; }
.mai-coord-code__input { font-size: 28px; font-weight: 800; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; width: 12ch; }
.mai-coord-digits { display: flex; gap: 9px; }
.mai-coord-digits[hidden] { display: none; }
.mai .mai-coord-dg { width: 50px; height: 60px; padding: 0; border: 1.5px solid var(--c-muted); border-radius: 10px; background: var(--c-bg); color: var(--c-ink); font-size: 28px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--c-ink); }
.mai .mai-coord-dg.is-rempli { border-color: var(--c-primary); }
.mai .mai-coord-dg:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px var(--c-c50); }
.mai-coord-dg--sep { margin-left: 8px; }
.mai-coord-code__saisie .err { display: block; margin-top: 8px; }
.mai-coord-code__row2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 13.5px; }
.mai-coord-renvoi { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--c-teal); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.mai-coord-renvoi:disabled { color: var(--c-muted); text-decoration: none; cursor: default; }
.mai-coord-code__eu { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--c-muted); }
.mai-coord-code__shield { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--c-c50); color: var(--c-teal); }
/* État après la vérification */
.mai-coord-etat { display: grid; gap: var(--sp-3); border-left: 4px solid var(--c-success); }
.mai-coord-etat--orange { border-left-color: var(--c-warning); }
.mai-coord-etat--rouge { border-left-color: var(--c-error); }
.mai-coord-etat .mai-badge { justify-self: start; }
/* Retour et « Ce que vous recevez » (`.back`, `.side`, `.gets`) */
.mai-coord-retour { justify-self: start; font-size: 15px; font-weight: 700; color: var(--c-muted); text-decoration: none; }
.mai-coord-retour:hover { color: var(--c-ink); text-decoration: underline; }
.mai-recevez { margin-top: 4px; padding: 22px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-bg); }
.mai .mai-recevez .mai-h3 { margin: 0 0 14px; }
.mai-recevez__liste { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.mai-recevez__liste li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.45; }
.mai-recevez__liste .mai-recevez__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c-c50); color: var(--c-teal); }
.mai-recevez__liste .mai-recevez__ic svg { width: 20px; height: 20px; }
.mai-recevez__liste b { display: block; margin-bottom: 1px; font-size: 15.5px; color: var(--c-ink); }
.mai-recevez__liste span { color: var(--c-muted); }
@media (min-width: 768px) {
  .mai-coord-champs { grid-template-columns: 1fr 1fr; }
  .mai-coord-code { grid-template-columns: 1fr auto; }
  .mai-coord-submit { grid-template-columns: auto minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .mai-coord-grid { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .mai .mai-coord-dg { width: 42px; height: 54px; font-size: 24px; }
  .mai-coord-dg--sep { margin-left: 4px; }
  .mai-coord-digits { gap: 6px; }
}

/* ===== Lot F — écran 5 « Vos maquettes sont prêtes et envoyées », porté de m5.html (24/10/2026). ===== */
/* Cadenas dessiné en CSS (m5 `.padlock`), couleur du texte courant ; variante blanche pour les pastilles sombres (m6). */
.mai-padlock { position: relative; display: inline-block; flex: none; width: 12px; height: 9px; margin-top: 6px; border-radius: 2px; background: currentColor; }
.mai-padlock::before { content: ""; position: absolute; left: 2px; top: -7px; width: 8px; height: 8px; box-sizing: border-box; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }
.mai-padlock--blanc { width: 9px; height: 7px; margin-top: 4px; color: var(--c-bg); }
.mai-padlock--blanc::before { left: 1.5px; top: -5px; width: 6px; height: 6px; border-width: 1.6px; border-radius: 4px 4px 0 0; }
/* Bandeau sombre (m5 `.hero` et `.sent`). */
.mai-rec-hero { display: grid; gap: var(--sp-6); margin: var(--sp-4) 0 22px; padding: 28px 32px; border-radius: 16px; background: var(--c-primary); color: var(--c-bg); }
.mai-rec-hero__date { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.mai .mai-rec-hero h1 { margin: 0 0 var(--sp-2); font-size: clamp(26px, 3.4vw, 36px); color: var(--c-bg); }
.mai-rec-hero__txt p:last-child { margin: 0; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.mai-rec-hero b { font-weight: 700; color: var(--c-bg); }
.mai-rec-envoi { display: grid; gap: 10px; padding: var(--sp-4) 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .07); }
.mai-rec-envoi__t { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mai-rec-canal { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.mai-rec-canal div b { display: block; font-size: 14.5px; color: var(--c-bg); }
.mai-rec-canal div span { display: block; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .7); }
.mai-rec-canal__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 15px; font-weight: 900; }
.mai-rec-canal__ic--ml { background: rgba(39, 201, 214, .18); color: var(--c-accent); }
.mai-rec-canal__ic--wa { background: rgba(31, 168, 85, .25); color: var(--c-success-bg); }
.mai-rec-canal__ok { font-size: 12.5px; font-weight: 800; white-space: nowrap; color: var(--c-accent); }
/* Familles (m5 `.fh`) et grille de cartes (m5 `.grid`, 3 colonnes). */
.mai-rec-fam { margin: 0 0 var(--sp-3); }
.mai-rec-fam__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); padding: var(--sp-2) 2px var(--sp-1); border-bottom: 2px solid var(--c-ink); }
.mai .mai-rec-fam__t { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.2; }
.mai-rec-fam__s { margin: 2px 0 0; font-size: 13px; color: var(--c-muted); }
.mai-rec-fam__cnt { display: flex; align-items: center; gap: 6px; padding-bottom: 3px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--c-muted); }
.mai-rec-fam__cnt .mai-padlock { margin-top: 4px; }
.mai-rec-fam__cnt--ok { color: var(--c-success-ink); }
.mai-rec-cards { display: grid; gap: var(--sp-3) var(--sp-4); }
/* Carte (m5 `.tile`, `.tile.open`, `.tile.lk`). */
.mai-rec-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: 11px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-bg); }
.mai-rec-card--open { padding: 11px; border: 2px solid color-mix(in srgb, var(--c-success) 30%, var(--c-bg)); }
.mai-rec-card--lock { background: var(--c-soft); }
.mai-rec-card__h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); min-height: 24px; }
.mai-rec-card__num { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--c-muted); }
.mai-rec-card__num b { font-size: inherit; color: var(--c-ink); }
.mai-rec-badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--c-line); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--c-muted); }
.mai-rec-badge--ok { background: var(--c-success-bg); color: var(--c-success-ink); }
.mai .mai-rec-card__t { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.3; color: var(--c-ink); }
.mai-rec-card--lock .mai-rec-card__t { color: var(--c-ink-2); }
/* Aperçu façon messagerie (m5 `.pv`). */
.mai-rec-pv { position: relative; overflow: hidden; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); }
.mai-rec-pv__mh { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--c-line); background: var(--c-soft); }
.mai-rec-card--open .mai-rec-pv__mh { background: var(--c-success-bg); }
.mai-rec-pv__av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--c-primary); font-size: 11.5px; font-weight: 900; letter-spacing: .02em; color: var(--c-bg); }
.mai-rec-pv__mh b { display: block; font-size: 12.5px; line-height: 1.25; color: var(--c-ink); }
.mai-rec-pv__mh span { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.25; color: var(--c-muted); }
.mai-rec-pv__bd { overflow: hidden; padding: 10px 12px 0; }
.mai-rec-apercu { height: 132px; }
.mai-rec-pv__t3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--c-ink); }
.mai-rec-pv__t3 b { font-weight: 900; color: var(--c-teal); }
.mai-rec-pv__l1 { margin: 0; font-size: 12.5px; line-height: 1.42; color: var(--c-ink-2); }
.mai-rec-pv__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 32%, var(--c-bg) 55%); text-decoration: none; }
.mai-rec-pv__fade span { position: absolute; left: 10px; right: 10px; bottom: 7px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--c-muted); }
.mai-rec-pv__fade .mai-padlock { margin-top: 3px; transform: scale(.8); }
.mai-rec-card--lock .mai-rec-pv { flex: 1; }
.mai-rec-card--lock .mai-rec-pv__mh { padding: 7px 12px; }
.mai-rec-card--lock .mai-rec-pv__bd { display: grid; gap: 8px; align-content: start; height: 56px; }
.mai-rec-card--lock .mai-rec-pv__mh, .mai-rec-card--lock .mai-rec-pv__bd { filter: blur(6px); opacity: .45; user-select: none; }
.mai-rec-pv__barre { display: block; width: 92%; height: 9px; border-radius: 5px; background: var(--c-line); }
.mai-rec-pv__barre--titre { width: 78%; height: 12px; background: var(--c-muted); }
.mai-rec-pv__barre--court { width: 60%; }
.mai-rec-lockov { position: absolute; inset: 0; display: grid; place-items: center; }
.mai-rec-lockov span { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 13px 7px 11px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-bg); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.mai-rec-card__f { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: 2px; font-size: 13px; color: var(--c-muted); }
.mai-rec-card__revoir { padding: 9px 16px; font-size: 14px; }
.mai-rec-pe { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--c-muted); }
.mai-rec-pe .mai-padlock { margin-top: 5px; transform: scale(.85); }
/* Encart rendez-vous (m5 `.rdv`, `.slots`, `.cta`, `.wa-link`). */
.mai-rec-rdv { display: grid; gap: var(--sp-8); margin: 28px 0 var(--sp-4); padding: 30px 34px; border-radius: 16px; background: var(--c-primary); color: var(--c-bg); }
.mai-rec-rdv__txt { min-width: 0; }
.mai-rec-rdv__sur { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.mai .mai-rec-rdv h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.01em; color: var(--c-bg); }
.mai-rec-rdv ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mai-rec-rdv li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.mai-rec-rdv li i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(39, 201, 214, .18); font-size: 12px; font-weight: 900; font-style: normal; color: var(--c-accent); }
.mai-rec-rdv__box { padding: 20px 22px; border-radius: 12px; background: var(--c-bg); color: var(--c-ink); }
.mai-rec-rdv__bt { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.mai-rec-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--sp-4); }
.mai-rec-slot { display: block; padding: 10px 14px; border: 1.5px solid var(--c-line); border-radius: 10px; line-height: 1.3; text-decoration: none; color: var(--c-ink); }
.mai-rec-slot b { display: block; font-size: 16px; white-space: nowrap; }
.mai-rec-slot span { font-size: 13px; color: var(--c-muted); }
.mai-rec-slot--on, .mai-rec-slot:hover { border-color: var(--c-teal); background: var(--c-c50); }
.mai-rec-slot--on span { color: var(--c-teal); }
.mai-rec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mai-rec-rdv__cta { flex: 1; justify-content: center; padding: 16px 26px; font-size: 17px; }
.mai-rec-wa { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--c-success-ink); }
.mai-rec-wa small { display: block; font-size: 12.5px; font-weight: 400; color: var(--c-muted); }
.mai-rec-wa__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-success); font-size: 13px; color: var(--c-bg); }
.mai-rec-lien { display: flex; justify-content: center; align-items: center; gap: 10px; margin: var(--sp-4) 0 var(--sp-8); text-align: center; font-size: 14px; color: var(--c-muted); }
.mai-rec-lien .mai-padlock { margin-top: 4px; }
.mai-expire { padding-block: var(--sp-8); }
.mai-expire__box { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) {
  .mai-rec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mai-rec-hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: center; }
  .mai-rec-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mai-rec-rdv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
}
@media (max-width: 767px) {
  .mai-rec-hero, .mai-rec-rdv { padding: var(--sp-6) var(--sp-4); }
  .mai-rec-slots { grid-template-columns: 1fr; }
}

/* ===== Lot F — l'interface ouverte (maquette 6) : rapport façon messagerie, filigrane, impression neutralisée. ===== */
.mai-itf { --mai-orange-clair: #FDEBDC; --mai-orange-bord: #F3CDAE; --mai-orange-texte: #9A4A06; --mai-jaune-clair: #FFF6D2; --mai-jaune-bord: #EEDC94; --mai-jaune-texte: #6E5600; position: relative; max-width: 760px; margin: 0 auto; padding: 0 var(--sp-4); background: var(--c-bg); }
.mai-itf__filigrane { position: fixed; inset: -20%; z-index: 5; display: flex; flex-wrap: wrap; gap: 70px 50px; align-content: flex-start; transform: rotate(-24deg); pointer-events: none; user-select: none; opacity: .07; font-size: 13px; font-weight: 700; color: var(--c-ink); overflow: hidden; }
.mai-itf__barre { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.mai-itf__retour { flex: none; font-size: 20px; font-weight: 700; text-decoration: none; color: var(--c-ink); }
.mai-itf__barre { flex-wrap: wrap; }
.mai-itf__qui { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--c-muted); }
.mai-itf__qui b { display: block; font-size: 14px; color: var(--c-ink); }
.mai-itf__bla { flex: 1 0 100%; display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0; font-size: 10.5px; color: var(--c-muted); }
.mai-itf__bla img { width: 64px; height: auto; }
.mai-itf__demo { margin: 0 calc(-1 * var(--sp-4)); padding: 6px var(--sp-4); text-align: center; font-size: 12.5px; font-weight: 700; color: var(--c-teal); background: var(--c-c50); }
.mai-itf__corps { position: relative; display: grid; gap: var(--sp-6); padding-top: var(--sp-6); }
.mai-itf__sur { margin: 0 0 var(--sp-1); font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-teal); }
.mai-itf h1 { margin: 0 0 var(--sp-3); font-size: clamp(26px, 5vw, 34px); line-height: 1.15; }
.mai-itf h2 { margin: 0 0 var(--sp-3); font-size: 21px; }
.mai-itf__intro { margin-bottom: var(--sp-2); }
.mai-itf__synthese p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; }
.mai-itf__salut { font-weight: 800; }
.mai-itf__l1 { margin: 0 0 6px; }
.mai-itf__synthese .mai-fab-puces { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; }
.mai-itf__outils { display: grid; gap: var(--sp-2); }
.mai-itf__outil { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: 10px; background: var(--c-soft); font-size: 14px; }
.mai-itf__outil b { display: block; }
.mai-itf__outil-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--c-bg); font-size: 11px; font-weight: 800; color: var(--c-ink); }
.mai-itf__outil-etat { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--c-warning-bg); color: var(--c-warning); font-size: 12px; font-weight: 700; }
.mai-itf__tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* Encadrés de chiffres (directive de Ronan, 24/10/2026) : chiffre et libellé centrés ; orange clair pour une rubrique
   négative (écart, anomalie, retard, relance, doublon…), jaune clair pour une décision ; chiffre vert pour un résultat acquis (m6 `.tile.ok`). */
.mai-itf__tuile { display: grid; gap: 4px; align-content: center; justify-items: center; padding: 12px 13px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-bg); text-align: center; }
.mai-itf__tuile b { font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--c-ink); }
.mai-itf__tuile span { font-size: 12.5px; line-height: 1.35; color: var(--c-muted); }
.mai-itf__tuile--negatif { background: var(--mai-orange-clair); border-color: var(--mai-orange-bord); }
.mai-itf__tuile--negatif b { color: var(--mai-orange-texte); }
.mai-itf__tuile--decision { background: var(--mai-jaune-clair); border-color: var(--mai-jaune-bord); }
.mai-itf__tuile--decision b { color: var(--mai-jaune-texte); }
.mai-itf__tuile--ok b { color: var(--c-success-ink); }
.mai-itf__decision { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: 14px; }
.mai-itf__decision--generale { border: 2px solid var(--c-ink); }
/* Cas particulier (m6 `.dec2`) : rond numéroté à gauche, question, aide et boutons à droite. */
.mai-itf__decision:not(.mai-itf__decision--generale) { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 13px 14px; }
.mai-itf__decision:not(.mai-itf__decision--generale) > * { grid-column: 2; }
.mai-itf__decision:not(.mai-itf__decision--generale) > .mai-itf__dec-n { grid-column: 1; grid-row: 1 / span 4; }
.mai-itf__decision:not(.mai-itf__decision--generale) > input[type="hidden"] { display: none; }
.mai-itf__decision h3 { margin: 0; font-size: 17px; }
.mai-itf__dec-n { margin: 0; }
.mai-itf__dec-tag { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--c-ink); color: var(--c-bg); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mai-itf__dec-rond { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-soft); font-size: 13px; font-weight: 700; }
.mai-itf__dec-aide { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-ink-2); }
/* Une phrase par ligne au lieu d'un enchaînement par « ; » (directive de Ronan, 24/10/2026). */
.mai-itf__puces { display: grid; gap: 4px; padding-left: 1.2em; }
.mai-itf__puces li { padding-left: 2px; }
.mai-itf__options { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.mai-itf__option { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; cursor: pointer; font-weight: 700; }
.mai-itf__option input { width: 20px; height: 20px; accent-color: var(--c-ink); }
.mai-itf__option span { flex: 1; }
.mai-itf__option em { font-style: normal; font-size: 12.5px; color: var(--c-success-ink); }
.mai-itf__option--preco { border-color: var(--c-success); background: var(--c-success-bg); }
.mai-itf__retenir { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
.mai-itf__retenir input { width: 18px; height: 18px; accent-color: var(--c-ink); }
.mai-itf__enreg { width: 100%; justify-content: center; background: var(--c-ink); color: var(--c-bg); }
.mai-itf__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mai-itf__bouton--pris { border-color: var(--c-ink); background: var(--c-soft); }
.mai-itf__enregistre { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--c-success-ink); }
.mai-itf__bloc { scroll-margin-top: 90px; }
.mai-itf__coches, .mai-itf__cadenas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.mai-itf__coches li { position: relative; padding-left: 32px; font-size: 15px; }
/* « Ce qui reste votre décision » (m6 `.yours`) : encadré gris, cadenas dans des ronds bleu marine. */
.mai-itf__yours { padding: 14px 14px 4px; border-radius: 14px; background: var(--c-soft); }
.mai-itf__cadenas li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding-bottom: 10px; font-size: 14.5px; line-height: 1.45; }
.mai-itf__hd { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--c-primary); }
.mai-itf__coches li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-success-bg); color: var(--c-success-ink); font-size: 12px; font-weight: 700; }
.mai-itf__gain { padding: var(--sp-6); border-radius: 14px; background: var(--c-c50); }
.mai-itf__gain h2 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--c-teal); }
.mai-itf__echelle { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0; font-size: 12px; color: var(--c-muted); }
.mai-itf__gain-sous { margin: 0 0 var(--sp-3); font-weight: 700; }
.mai-itf__jauge { height: 10px; margin: 12px 0 6px; border: 1px solid var(--c-line); border-radius: 99px; background: var(--c-bg); overflow: hidden; }
.mai-itf__jauge span { display: block; height: 100%; background: var(--c-accent); }
.mai-itf__methode { margin: var(--sp-3) 0 var(--sp-1); font-size: 13.5px; line-height: 1.45; color: var(--c-ink-2); }
.mai-itf__note { margin: 0; font-size: 13px; font-style: italic; color: var(--c-muted); }
.mai-itf__prochain { margin: 0; font-size: 14px; color: var(--c-ink-2); }
.mai-itf__pied { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); text-align: center; font-size: 12.5px; color: var(--c-muted); }
.mai-itf__pied p { margin: 0 0 var(--sp-1); }
.mai-itf__collant { position: sticky; bottom: 0; z-index: 7; display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-6) calc(-1 * var(--sp-4)) 0; padding: var(--sp-3) var(--sp-4); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.mai-itf__collant .btn { flex: 1; max-width: 520px; justify-content: center; padding: 14px 10px; font-size: 15.5px; white-space: nowrap; }
.mai-itf__wa { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--c-success); color: var(--c-bg); font-size: 20px; font-weight: 900; text-decoration: none; }
@media (min-width: 768px) {
  .mai-itf__tuiles { grid-template-columns: repeat(4, 1fr); }
  .mai-itf__bla { flex: none; }
}
/* IMPRESSION NEUTRALISÉE (brief § 9) : une page qui porte une interface ouverte n'imprime rien ; les autres pages du parcours s'impriment. */
@media print {
  body:has(.mai-itf) { display: none !important; }
}

/* ── Suite du lot I (24/10/2026, décisions de Ronan Le Boulaire) : détails du sélecteur et des champs
   (maquette 1b), puis le bandeau de l'accueil quand le parcours est ouvert. Aucune largeur maximale sur
   les textes (§ 2.18). ── */
/* La coche « ✓ » de l'option choisie du sélecteur ; cachée sur l'autre option. */
.mai-seg__coche { margin-right: 6px; }
.mai-seg__opt:not(.mai-seg__opt--on) .mai-seg__coche { display: none; }
/* Ligne du registre : nom et activité à gauche, SIREN à droite. Le SIREN, placé sur deux rangées, était
   posé en premier par le placement automatique de la grille, donc à gauche du nom. */
.mai-sugg__nom, .mai-sugg__meta { grid-column: 1; }
.mai-sugg__siren { grid-column: 2; }
/* La loupe du champ d'organisation et le globe du site, dans le champ, à gauche du texte. */
.mai-champ-ic { position: relative; }
.mai-champ-ic__i { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--c-muted); pointer-events: none; z-index: 1; }
.mai-champ-ic__i svg { width: 17px; height: 17px; }
.field .mai-champ-ic input:not([type="checkbox"]):not([type="radio"]) { padding-left: 38px; }

/* ── Accueil et carte du parcours PORTÉS de m1.html, m1b.html et m9.html (24/10/2026, décisions de Ronan
   Le Boulaire). Valeurs relevées dans les maquettes, exprimées avec les jetons du site. Aucune largeur
   maximale sur les textes (§ 2.18) : les `max-width` de la maquette sur le texte d'introduction et les
   introductions de section ne sont pas repris. Mobile d'abord ; la mise en page des maquettes à partir
   de 1024 px. ── */

/* 1. LA CARTE (m1 `.ask`, m9 `.ask`) : des bandes séparées par des filets — « Vous êtes », champs, besoin,
   barre d'outils, puis (page processus) bouton et rendez-vous. */
.mai-carte { display: block; padding: 0; overflow: hidden; border-radius: 16px; }
.mai-carte > .mai-carte__global { margin: var(--sp-3) 20px 0; }
.mai-carte__qui { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 20px; background: var(--c-soft); border-bottom: 1px solid var(--c-line); }
.mai-carte__qui legend { float: left; margin: 0; font-size: 14.5px; }
.mai-carte__pourquoi { margin: 0; font-size: 13px; line-height: 1.3; }
/* Carte étroite (m9) : « Vous êtes » et le sélecteur sur une ligne, la phrase dessous ; carte large (m1,
   m1b) : la phrase à droite, sur la même ligne. */
.mai-carte__pourquoi { flex: 1 1 100%; }
@media (min-width: 1024px) { .mai-carte--large .mai-carte__pourquoi { flex: 1 1 200px; text-align: right; } }
.mai-carte__champs { padding: 14px 20px; align-items: start; }
.mai-carte__besoin-zone { padding: var(--sp-1) 20px 0; gap: var(--sp-2); }
.mai-carte__besoin-zone > .mai-carte__titre { margin: 10px 0 0; }
.mai-carte__titre .mai-carte__prerempli { margin-left: 0; }
.mai-prog { display: flex; align-items: center; gap: var(--sp-3); }
.mai-prog[hidden] { display: none; }
.mai-prog__barre { flex: 1; height: 4px; border-radius: 4px; background: var(--c-c50); overflow: hidden; }
.mai-prog__barre i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent), var(--c-teal)); transition: width .4s linear; }
.mai-prog__t { font-size: 12.5px; font-weight: 700; color: var(--c-teal); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .mai-prog__barre i { transition: none; } }

/* La zone de dépôt (m1 `.drop`) : pointillé discret, pictogramme, phrase, formats ; le champ natif est
   retiré de la vue (l'outil « Joindre des fichiers » l'ouvre), sa liste devient la ligne des vignettes. */
.mai-drop { position: relative; border: 1.5px dashed var(--c-line); border-radius: var(--radius-sm); background: var(--c-soft); padding: 9px var(--sp-3); margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.mai-drop__ligne { display: flex; align-items: center; gap: var(--sp-3); font-size: 13.5px; color: var(--c-muted); }
.mai-drop__ic { width: 30px; height: 30px; border-radius: var(--sp-2); background: var(--c-bg); border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-teal); flex: none; }
.mai-drop__ic svg { width: 17px; height: 17px; }
.mai-drop__m { flex: 1; font-weight: 400; cursor: pointer; }
.mai-drop__fmt { font-size: 11.5px; white-space: nowrap; }
.mai-drop .champ-fichier { gap: var(--sp-2); }
.mai-drop .champ-fichier__zone { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mai-drop .champ-fichier__liste:not([hidden]) { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mai-drop .champ-fichier__liste li { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--c-line); border-radius: 9px; padding: 6px 10px 6px 7px; background: var(--c-bg); color: var(--c-primary); font-size: 13px; font-weight: 700; }
.mai-vignette { position: relative; width: 26px; height: 32px; border-radius: var(--sp-1); border: 1px solid var(--c-line); background: var(--c-bg); overflow: hidden; flex: none; }
.mai-vignette::before { content: ""; position: absolute; left: var(--sp-1); right: var(--sp-1); top: 6px; height: 2px; background: var(--c-line); box-shadow: 0 5px 0 var(--c-line), 0 10px 0 var(--c-line); }
.mai-vignette b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 7.5px; line-height: 1.4; font-weight: 800; text-align: center; color: var(--c-bg); background: var(--c-error); }
.mai-carte .mai-catpub { margin: 0 0 var(--sp-3); }

/* La barre d'outils (m1 `.tools`). */
.mai-outils__dictee { flex-basis: 100%; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
.mai-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3); border-top: 1px solid var(--c-line); background: var(--c-soft); }
.mai-outil { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border: 1.5px solid var(--c-line); background: var(--c-bg); border-radius: var(--sp-2); padding: var(--sp-2) 11px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--c-primary); white-space: nowrap; cursor: pointer; }
.mai-outil[hidden] { display: none; }
.mai-outil svg { width: 17px; height: 17px; flex: none; }
.mai-outil:hover { background: var(--c-c50); }
.mai-outil:focus-visible, .mai-carte:has(#mai-fichiers:focus-visible) .mai-outil--joindre { outline: 3px solid var(--ring-teinte); outline-offset: 2px; }
.mai-outil--actif, .mai-outil--ia { border-color: var(--c-teal); background: var(--c-c50); color: var(--c-teal); }
.mai-outil__sp { display: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-c50); border-top-color: var(--c-teal); flex: none; }
.mai-outil--ia[aria-busy="true"] .mai-outil__sp { display: inline-block; animation: mai-tourne 1s linear infinite; }
@keyframes mai-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mai-outil--ia[aria-busy="true"] .mai-outil__sp { animation: none; } }
.mai-outils__envoi { margin-left: auto; }
.mai-outils__etat { margin: 0; padding: var(--sp-2) 20px 0; font-size: 13px; color: var(--c-muted); }
.mai-outils__etat:empty { display: none; }
.mai-voix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) 20px 0; font-size: 13px; color: var(--c-ink-2); }
.mai-voix[hidden] { display: none; }
.mai-voix svg { width: 16px; height: 16px; color: var(--c-teal); }
.mai-voix__retirer { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--c-teal); text-decoration: underline; cursor: pointer; }
@media (max-width: 639px) { .mai-outils__envoi { width: 100%; margin-left: 0; } }

/* Page processus (m9 `.act`) : le bouton sur toute la largeur, puis la préparation et le rendez-vous. */
.mai-carte__actions { display: block; padding: var(--sp-3) 18px 14px; border-top: 1px solid var(--c-line); }
.mai-carte__sub { margin-top: 10px; align-items: center; }
.mai-carte__dessous { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.mai-carte > .mai-carte__dessous { margin: 0; padding: 0 18px 14px; }
.mai-carte > .mai-achat { padding: 0 18px 14px; }

/* 2. LE BANDEAU DE L'ACCUEIL (m1 `.hero`, m1b `.hero`). */
.mai-accueil { --mai-decision-bg: #FFF6D6; padding: var(--sp-6) 0 var(--sp-6); background: linear-gradient(180deg, var(--c-soft) 0%, var(--c-bg) 92%); border-bottom: 1px solid var(--c-line); }
.mai-accueil__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.mai-sig { margin: 0 0 var(--sp-3); font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.mai-sig b { color: var(--c-primary); font-weight: 800; letter-spacing: .01em; }
.mai-sig span { display: block; }
.mai-accueil h1 { font-size: clamp(32px, 4vw, 42px); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 var(--sp-3); }
.mai-accueil__texte .mai-lead { font-size: 17px; line-height: 1.5; margin: 0; }
.mai-accueil .mai-carte { border: 1.5px solid var(--c-line); box-shadow: 0 10px 30px rgba(0, 27, 57, .08); }
.mai-accueil .heros__benefices { margin-top: 0; }
.mai-accueil .mai-achat { margin-top: 0; }
.mai-accueil__reas .mai-abbr { margin: var(--sp-2) 0 0; }
[data-mai-mode="entreprise"] .mai-accueil__achat { display: none; }
/* La carte large : les champs sur une ligne (trois en entreprise comme m1, quatre en service public comme
   m1b), la liste du registre en flux sous les champs. */
@media (min-width: 1024px) {
  .mai-accueil__grille { column-gap: 44px; grid-template-columns: minmax(0, 1fr) 340px; }
  [data-mai-mode="entreprise"] .mai-accueil__grille { grid-template-areas: "texte tel" "carte tel" "reas reas"; }
  [data-mai-mode="service_public"] .mai-accueil__grille { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "texte reasc" "carte carte" "achat achat"; }
  .mai-accueil__texte { grid-area: texte; }
  .mai-accueil__reas-col { grid-area: reasc; }
  .mai-accueil__carte { grid-area: carte; }
  .mai-accueil__tel { grid-area: tel; padding-top: 112px; }
  .mai-accueil__reas { grid-area: reas; margin-top: var(--sp-1); }
  .mai-accueil__achat { grid-area: achat; }
  .mai-carte--large .mai-carte__champs { position: relative; row-gap: 6px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.5fr); }
  [data-mai-mode="entreprise"] .mai-carte--large .mai-carte__champs { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .8fr); }
  .mai-carte--large .mai-carte__full { grid-column: auto; }
  /* Libellés de hauteurs différentes : la sous-grille aligne les champs (libellé, champ, note, erreur). */
  .mai-carte--large .mai-carte__champs > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; }
  .mai-carte--large .mai-carte__champs > .field:has(.mai-combo), .mai-carte--large .mai-combo { display: contents; }
  .mai-carte--large .mai-carte__champs > .field:has(.mai-combo) > label { grid-area: 1 / 1; }
  .mai-carte--large .mai-combo > .mai-champ-ic { grid-area: 2 / 1; }
  .mai-carte--large .mai-carte__champs > .field:has(.mai-combo) > .mai-carte__note { grid-area: 3 / 1; }
  .mai-carte--large .mai-carte__champs > .field:has(.mai-combo) > .err { grid-area: 4 / 1; }
  .mai-carte--large .mai-sugg { grid-area: 5 / 1 / auto / -1; position: static; margin-top: 6px; }
}

/* 3. LE TÉLÉPHONE D'APERÇU (m1 `.phone`). Tuiles centrées ; orange clair pour l'anomalie, jaune clair pour
   les décisions (directive du 24/10/2026). */
.mai-tel { margin: 0; }
.mai-tel__cadre { width: 340px; max-width: 100%; margin: 0 auto; background: var(--c-primary); border-radius: 46px; padding: var(--sp-3); box-shadow: 0 24px 50px rgba(0, 27, 57, .18); }
.mai-tel__ecran { position: relative; overflow: hidden; border-radius: 36px; background: var(--c-soft); }
.mai-tel__encoche { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; border-radius: 14px; background: var(--c-primary); }
.mai-tel__barre { display: flex; justify-content: space-between; height: 36px; padding: 10px 26px 0; font-size: 12px; font-weight: 700; color: var(--c-primary); }
.mai-tel__tete { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) 14px 10px; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.mai-tel__tete p { margin: 0; }
.mai-tel__av { width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent); color: var(--c-primary); display: grid; place-items: center; font-weight: 900; font-size: 13px; flex: none; }
.mai-tel__nom { font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.mai-tel__statut { font-size: 12px; color: var(--c-success-ink); }
.mai-tel__tete .mai-tel__par { margin-left: auto; text-align: right; font-size: 8.5px; line-height: 1.15; color: var(--c-muted); flex: none; }
.mai-tel__par img { display: block; height: 30px; width: auto; margin: 1px 0 0 auto; }
.mai-tel__exemple { margin: 0; padding: var(--sp-1); background: var(--c-warning-bg); color: var(--c-warning); font-size: 11.5px; font-weight: 800; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.mai-tel__msgs { padding: var(--sp-3) var(--sp-3) 14px; }
.mai-tel__bulle { margin: 0; background: var(--c-bg); border-radius: 4px 14px 14px 14px; padding: 10px var(--sp-3); font-size: 13px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 27, 57, .06); }
.mai-tel__heure { display: block; text-align: right; font-size: 10.5px; color: var(--c-muted); margin-top: var(--sp-1); }
.mai-tel__tuiles { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mai-tel__tuile { background: var(--c-bg); border-radius: 10px; padding: var(--sp-2) var(--sp-1) 7px; text-align: center; }
.mai-tel__tuile b { display: block; font-size: 19px; font-weight: 900; line-height: 1.1; }
.mai-tel__tuile span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; color: var(--c-muted); }
.mai-tel__tuile--ok b { color: var(--c-success-ink); }
.mai-tel__tuile--alerte { background: var(--c-warning-bg); }
.mai-tel__tuile--alerte b { color: var(--c-error); }
.mai-tel__tuile--decision { background: var(--mai-decision-bg); }
.mai-tel__tuile--decision b { color: var(--c-teal); }
.mai-tel__dec { background: var(--mai-decision-bg); border-radius: var(--sp-3); padding: 11px var(--sp-3) var(--sp-3); }
.mai-tel__k { margin: 0; font-size: 10.5px; font-weight: 800; color: var(--c-teal); text-transform: uppercase; letter-spacing: .07em; }
.mai-tel__q { margin: 3px 0 var(--sp-2); font-size: 13px; font-weight: 700; line-height: 1.35; }
.mai-tel__opts { list-style: none; margin: 0; padding: 0; }
.mai-tel__opt { display: flex; align-items: center; gap: var(--sp-2); margin-top: 6px; border: 1.5px solid var(--c-line); border-radius: 9px; padding: 7px 9px; background: var(--c-bg); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.mai-tel__r { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-line); flex: none; }
.mai-tel__opt--pre { border-color: var(--c-accent); background: var(--c-c50); }
.mai-tel__opt--pre .mai-tel__r { border-color: var(--c-teal); background: radial-gradient(var(--c-teal) 40%, transparent 45%); }
.mai-tel__badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--c-teal); color: var(--c-bg); }
.mai-tel__legende { margin: 10px auto 0; width: 340px; max-width: 100%; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); text-align: center; }

/* 4. LES SECTIONS SOUS LE BANDEAU (m1 `.sec`, `.how`, `.cat`, `.team`, `.figs`). */
.mai-sec { padding: 26px 0 0; }
.mai-sec__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sp-2) var(--sp-6); margin: 0 0 18px; }
.mai-sec__h h2 { margin: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 900; letter-spacing: -.015em; }
.mai-sec__h > p { margin: 0; font-size: 15px; color: var(--c-muted); }
.mai-sec__k { margin: 0 0 var(--sp-1); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal); }
@media (min-width: 768px) { .mai-sec__h > p { text-align: right; } }
.mai-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.mai-how__st { position: relative; }
.mai-how__n { width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary); color: var(--c-bg); font-weight: 900; font-size: 18px; display: grid; place-items: center; margin-bottom: var(--sp-3); box-shadow: 0 0 0 6px var(--c-bg); position: relative; }
.mai-how__st:nth-child(3) .mai-how__n { background: var(--c-accent); color: var(--c-primary); }
.mai-how h3 { margin: 0 0 5px; font-size: 16.5px; line-height: 1.25; }
.mai-how p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); }
@media (min-width: 1024px) {
  .mai-how { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .mai-how__st { padding-right: 22px; }
  .mai-how__st:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: var(--sp-3); height: 2px; background: var(--c-accent); opacity: .45; }
}
.mai-cat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .mai-cat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mai-cat { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mai-cat__ag { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--sp-3); padding: 14px 14px var(--sp-3); background: var(--c-bg); }
.mai-cat__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--c-c50); color: var(--c-teal); display: grid; place-items: center; margin-bottom: 10px; }
.mai-cat__ic svg { width: 20px; height: 20px; }
.mai-cat__ag h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.25; }
.mai-cat__ag p { flex: 1; margin: 0 0 var(--sp-3); font-size: 13px; line-height: 1.42; color: var(--c-muted); }
.mai-cat__ag a { padding-top: 9px; border-top: 1px solid var(--c-line); font-size: 12.5px; font-weight: 800; line-height: 1.35; text-decoration: none; }
.mai-cat__plus { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; font-size: 15px; }
.mai-cat__plus a { font-weight: 800; }
.mai-cat__plus a.mai-cat__complet { font-weight: 600; }
.mai-cat__plus > span { color: var(--c-muted); }
.mai-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
@media (min-width: 900px) { .mai-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mai-team__fd { border: 1px solid var(--c-line); border-radius: 14px; padding: 18px 18px var(--sp-4); background: var(--c-bg); }
.mai-team__hd { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: 10px; }
.mai-team__hd img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 4.5px var(--c-c50); }
.mai-team__hd h3 { margin: 0 0 3px; font-size: 17px; line-height: 1.2; }
.mai-team__fn { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--c-teal); }
.mai-team__fn span { font-weight: 500; color: var(--c-muted); }
.mai-team__fd > p { margin: 0; font-size: 13px; line-height: 1.42; color: var(--c-muted); }
.mai-team__fd > .mai-team__source { margin-top: var(--sp-2); font-size: 12px; }
.mai-figs { margin-top: 26px; background: var(--c-primary); color: var(--c-bg); }
.mai-figs__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); padding-top: var(--sp-6); padding-bottom: 22px; }
@media (min-width: 768px) { .mai-figs__in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mai-figs__fig { margin: 0; }
.mai-figs__fig b { display: block; font-size: 40px; font-weight: 900; line-height: 1; color: var(--c-accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mai-figs__fig span { display: block; margin-top: var(--sp-2); font-size: 15px; line-height: 1.35; color: var(--c-footer-muted); }
@media (min-width: 1024px) { .mai .mai-ttl h1 { font-size: 38px; } }
.mai-etape__t { white-space: nowrap; }
.mai-st__c { min-width: 0; }