/* « 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-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 { 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); }

/* 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); }
/* Étape faite cliquable : même aspect, soulignée au survol et au clavier ; le bouton rond reste vert. */
.mai-etape__lien { display: flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; border-radius: 8px; }
.mai-etape__lien:hover .mai-etape__t, .mai-etape__lien:focus-visible .mai-etape__t { text-decoration: underline; text-underline-offset: 3px; color: var(--c-teal); }
.mai-etape__lien:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.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__champs { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-4); }
.mai-carte__champs > *, .mai-ia-identite, .mai-ia-revue, .mai-ia-apres { min-width: 0; }
@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__actions .mai-carte__duo { display: grid; grid-auto-rows: 1fr; }
.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__autre { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); font: inherit; font-weight: 700; text-align: left; color: var(--c-primary); background: transparent; border: 0; border-top: 1px solid var(--c-line); cursor: pointer; }
.mai-sugg__autre:hover, .mai-sugg__autre:focus-visible { background: var(--c-bg-soft, var(--c-bg)); text-decoration: underline; }
.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); }

/* É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); }
/* Garde de l'onglet (29/10/2026) : le bandeau « cette page appartient à une autre demande » reprend la largeur de la page. */
.mai-garde-onglet:empty { display: none; }
.mai-garde-onglet .mai-flash { margin-bottom: var(--sp-3); }
.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) var(--sp-4); 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 { flex: none; font-weight: 900; font-size: 20px; line-height: 1; color: var(--c-teal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mai-band__barre { display: grid; gap: 8px; min-width: 0; }
/* Sur un écran étroit, la durée réelle passe SOUS le compteur (« 16 maquettes prêtes sur 16 »), qui reste sur une ligne au lieu d'être
   écrasé mot par mot sur quatre lignes à gauche de la durée (constaté à 375 px le 06/11/2026). */
.mai-band__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.mai-band__pretes { display: block; min-width: 0; font-size: 13px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.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 { white-space: nowrap; 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); }
.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); }
/* EN-TÊTES DE MÊME HAUTEUR (Ronan, 28/10/2026) : la place de deux lignes de titre plus une ligne de sous-titre ou de compteur est réservée à
   tout en-tête, ouvert ou replié : les barres noires de groupes côte à côte tombent sur la même horizontale, et celles des groupes
   repliés empilés sont régulièrement espacées. Un titre peut passer sur deux lignes sans rien décaler.
   Groupes de service REPLIABLES (Ronan, 25/10/2026) : <details>/<summary> natifs, sans JavaScript lourd. Aucune largeur
   maximale sur les textes. COTE À COTE (Ronan, 28/10/2026) : la grille compte 3 colonnes (2 sur écran moyen, 1 sur téléphone) ;
   un groupe OUVERT occupe autant de colonnes que de maquettes (data-cols 1 à 3), un groupe REPLIÉ une seule, et
   `dense` comble les trous : « Direction générale » (1) et « Direction commerciale » (2) tiennent sur une ligne. */
.mai-gcol { min-width: 0; }
.mai-grid { display: grid; gap: var(--sp-4) var(--sp-3); align-items: start; grid-auto-flow: row dense; }
.mai-gcartes { display: grid; gap: 10px var(--sp-3); align-items: stretch; }
.mai-gfam { grid-column: span 1; min-width: 0; }
.mai-fh { box-sizing: border-box; min-height: 92px; align-content: end; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titre cnt chev" "sous cnt chev"; column-gap: var(--sp-3); align-items: end; padding: var(--sp-1) 2px 2px; margin-bottom: 10px; border-bottom: 2px solid var(--c-ink); cursor: pointer; list-style: none; }
.mai-fh::-webkit-details-marker { display: none; }
.mai-fh:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; border-radius: 4px; }
.mai .mai-fh h2 { grid-area: titre; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; font-size: 16px; font-weight: 900; line-height: 20px; overflow-wrap: anywhere; }
.mai-fh__sub { grid-area: sous; display: block; font-size: 12.5px; line-height: 16px; color: var(--c-muted); margin-top: 2px; }
.mai-fh__cnt { grid-area: cnt; align-self: end; font-size: 12.5px; line-height: 16px; font-weight: 700; color: var(--c-teal); white-space: nowrap; padding-bottom: 3px; }
.mai-fh__chev { grid-area: chev; align-self: end; width: 10px; height: 10px; margin: 0 4px 6px 0; border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: rotate(45deg); transition: transform .15s; }
.mai-gfam[open] > .mai-fh .mai-fh__chev { transform: rotate(-135deg); margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .mai-fh__chev { transition: none; } }
.mai-gfam:not([open]) > .mai-fh { margin-bottom: 0; }
.mai-gfam:not([open]) .mai-fh__sub { display: none; }
/* Colonne étroite (≈ 300 px) : le titre et le chevron sur la première ligne ; dessous, le sous-titre à gauche et le compteur
   à droite (groupe ouvert d'une maquette), ou le compteur seul à gauche (groupe replié). Rien ne déborde. */
/* Le titre court jusqu'au chevron, sur toute la largeur de la colonne (règle de Ronan Le Boulaire, 18/10/2026 : un texte ne passe pas à la ligne
   tant qu'il reste de la place à droite) : le compteur « 1 prête » ne réserve sa largeur que sur la seconde ligne, jamais sur celle du titre. */
.mai-gfam[data-cols="1"] > .mai-fh { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titre titre chev" "sous cnt chev"; align-items: start; row-gap: 2px; }
.mai-gfam[data-cols="1"] > .mai-fh .mai-fh__cnt { align-self: start; padding-bottom: 0; }
.mai-gfam[data-cols="1"] > .mai-fh .mai-fh__sub { align-self: start; }
.mai-gfam[data-cols="1"] > .mai-fh .mai-fh__chev { align-self: start; margin: 5px 4px 0 0; }
.mai-gfam[data-cols="1"][open] > .mai-fh .mai-fh__chev { margin-top: 4px; }
.mai-gfam:not([open]) > .mai-fh { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre chev" "cnt cnt"; align-items: start; row-gap: 2px; }
.mai-gfam:not([open]) > .mai-fh .mai-fh__cnt { align-self: start; padding-bottom: 0; }
.mai-gfam:not([open]) > .mai-fh .mai-fh__chev { align-self: center; margin: 0 4px 0 0; }
/* Bloc d'introduction (Ronan, 28/10/2026) à gauche du bouton « Tout déplier » : il prend toute la largeur laissée libre. */
.mai-gtools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); }
.mai-gtools__intro { flex: 1 1 320px; min-width: 0; }
.mai .mai-gtools__titre { margin: 0 0 var(--sp-1); font-size: 20px; font-weight: 900; line-height: 1.25; }
.mai-gtools__intro p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }
.mai-gtools__btn { flex: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--c-teal); background: transparent; border: 1px solid var(--c-line); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.mai-gtools__btn:hover { border-color: var(--c-teal); }
.mai-gtools__btn:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
.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; }
/* La maquette CHOISIE prend le fond de l'encadré « Préparation du contenu complet des 3 maquettes que vous aurez choisies » (Ronan Le Boulaire, 02/11/2026). */
.mai-cd--sel .mai-pv { border-color: var(--c-c50); background: var(--c-c50); }
/* L'aperçu d'une maquette prête se clique comme « Choisir » (Ronan, 31/10/2026) : un bouton transparent le couvre en entier. */
.mai-pv__choix { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.mai-pv__choix:disabled { cursor: not-allowed; }
.mai-pv--choix:has(.mai-pv__choix:not(:disabled):hover) { border-color: var(--c-teal); box-shadow: 0 0 0 2px var(--c-c50); }
.mai-pv__choix:focus-visible { outline: 3px solid var(--c-teal); outline-offset: -3px; }
.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); }
/* La fréquence seule, à gauche, sans fond (Ronan Le Boulaire, 02/11/2026) : le nom de l'agent, son destinataire et son service redisaient le titre et l'intitulé du groupe. */
.mai-pv__freq { margin: 0; padding: 10px var(--sp-3) 0; text-align: left; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--c-muted); background: none; border: 0; }
.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; }
/* « Choisir » en haut à droite, à la place de « ✓ Prête » ; une fois la maquette choisie, « ★ Choisie k/c » remplace la case (Ronan Le Boulaire, 02/11/2026). */
.mai-cd__top .mai-cd__pick { display: inline-flex; }
.mai-cd__top .mai-choose { min-height: 28px; padding: 0 var(--sp-1); font-size: 13px; }
.mai-choose__vide { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mai-choose[aria-pressed="true"] .mai-choose__vide { display: none; }
.mai-choose[aria-pressed="false"] .mai-chosen { display: none; }
/* Une seule colonne BORNÉE (`minmax(0, 1fr)`) hors grand écran : avec une piste `auto`, le bouton « Sélectionnez… » (28 rem) imposait sa largeur
   à la piste et la barre débordait de 110 px à droite d'un écran de 375 px (constaté le 06/11/2026). */
.mai-choix { margin-top: 20px; background: var(--c-ink); color: var(--c-bg); border-radius: 14px; padding: var(--sp-4) 22px; display: grid; grid-template-columns: minmax(0, 1fr); 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)); }
  .mai-gfam[data-cols="2"], .mai-gfam[data-cols="3"] { grid-column: span 2; }
  .mai-gfam[data-cols="2"] > .mai-gcartes, .mai-gfam[data-cols="3"] > .mai-gcartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mai-layout { grid-template-columns: 350px minmax(0, 1fr); }
  .mai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mai-gfam[data-cols="3"] { grid-column: span 3; }
  .mai-gfam[data-cols="3"] > .mai-gcartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mai-choix { grid-template-columns: auto auto minmax(0, 1fr); }
}
/* TRAITS NOIRS ALIGNÉS (Ronan, 28/10/2026 : « je préfère quand les traits noirs horizontaux sont alignés ») : grille ordinaire à 3 colonnes,
   rangée par rangée ; l'en-tête de chaque groupe a la même hauteur (`.mai-fh`, 72 px), donc leur trait du bas est à la même hauteur. */
/* Un groupe replié ne garde que son en-tête (titre, chevron à droite, compteur dessous) et tient dans une seule colonne : les titres repliés se rangent par trois, et sous un groupe ouvert ils s'empilent dans la colonne libre. */
.mai-gfam:not([open]) { grid-column: span 1; }
.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).
   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; }
/* 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-civilite { grid-column: 1 / -1; display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.mai-coord-civilite legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.mai-coord-civilite legend + * { clear: both; }
.mai-coord-civilite__choix { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.mai-coord-case { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; color: var(--c-ink); cursor: pointer; }
.mai .mai-coord-case input { appearance: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 2px solid var(--c-primary); border-radius: 4px; background: var(--c-bg); cursor: pointer; }
.mai .mai-coord-case input:checked { background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mai .mai-coord-case input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.mai .mai-coord-case input:disabled { cursor: default; }
.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); }
/* La mention d'information avant le bouton (30/10/2026) : toute la largeur de la carte, aucun plafond de largeur (§ 2.18). */
.mai-coord-mention { margin: var(--sp-3) 0; line-height: 1.5; }
/* 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-code { scroll-margin-top: 96px; }
.mai-coord-retour-bloc { margin: 0 0 var(--sp-4); }
/* Lien de retour bien visible (Ronan, 28/10/2026) : pastille à bord et texte de la couleur du site, au-dessus du titre. */
.mai-coord-retour { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 9px 16px; border: 2px solid var(--c-teal); border-radius: 999px; background: var(--c-bg); font-size: 15.5px; font-weight: 800; color: var(--c-teal); text-decoration: none; }
.mai-coord-retour:hover, .mai-coord-retour:focus-visible { background: var(--c-teal); color: var(--c-bg); }
.mai-coord-retour:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.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); 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; color: var(--c-accent); }
.mai-rec-canal div .mai-rec-canal__ok { display: block; margin-top: 2px; }
/* 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); }
/* Le haut net des maquettes NON choisies (Ronan, 04/11/2026) : le MÊME aperçu que la carte de l'écran 3 (`.mai-pv`, `_chiffres`, `_apercu_decision`), sans aucun flou ; un voile dégradé cadenassé en bas de carte annonce que l'expert présente la suite. Rien n'est caché sous le voile : le corps n'est jamais envoyé. */
.mai-rec-pv__l1 { margin: 0; font-size: 12.5px; line-height: 1.42; color: var(--c-ink-2); }
.mai-pv--expert { flex: 1; display: flex; flex-direction: column; }
.mai-pv--expert .mai-pv__bd { flex: 1; padding-bottom: 30px; }
.mai-rec-pv__suite { display: grid; gap: 7px; padding-top: 6px; }
.mai-rec-pv__suite i { display: block; width: 92%; height: 9px; border-radius: 5px; background: var(--c-line-strong); filter: blur(2px); }
.mai-rec-pv__suite i:last-child { width: 60%; }
.mai-pv__voile { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; }
.mai-pv__voile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .88) 34%, var(--c-bg) 60%); }
.mai-pv__voile > span { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; text-align: center; color: var(--c-ink-2); }
.mai-pv__voile .mai-padlock { margin-top: 3px; transform: scale(.85); }
.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); }
.mai-rec-card--lock .mai-rec-card__resa { font-weight: 800; color: var(--c-teal); }
/* Carte non choisie ENTIÈREMENT cliquable (31/10/2026 soir) : le lien du pied s'étend sur toute la carte (réservation de 30 min). */
.mai-rec-card--lock:has(.mai-rec-card__resa):hover { border-color: var(--c-teal); box-shadow: 0 0 0 2px var(--c-c50); }
.mai-rec-card__resa { color: inherit; text-decoration: none; }
.mai-rec-card__resa::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.mai-rec-card__resa:focus-visible { outline: none; }
.mai-rec-card__resa:focus-visible::after { outline: 3px solid var(--c-teal); outline-offset: -3px; }
/* Titre de la page des maquettes reçues : la ligne « préparée pour … · secteur d'activité » sous le titre, et le pied d'une carte ouverte. */
.mai-rec-hero__txt .mai-rec-hero__org { margin: 0 0 var(--sp-2); font-size: 14.5px; font-weight: 600; color: var(--c-accent); }
.mai-rec-etat { display: inline-flex; align-items: center; }
.mai-cd__ft:has(.mai-rec-etat) { justify-content: space-between; }
.mai-cd__ft:has(.mai-rec-etat) .mai-chosen { display: none; }
/* 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: start; }
  .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: start; }
}
@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__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__tete { margin: 10px 0 0; }
/* « Dicter » puis « Rédiger ma demande avec l'IA » sur la ligne de l'intitulé, alignés à droite (Ronan, 24 et
   25/10/2026) ; sur téléphone, empilés sous l'intitulé, chacun sur toute la largeur. */
.mai-carte__tete { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.mai-carte__tete > .mai-carte__titre { margin: 0; }
.mai-carte__boutons { display: flex; flex-direction: column; gap: var(--sp-2); }
.mai-carte__boutons:not(:has(> :not([hidden]))) { display: none; }
.mai-carte__boutons > .mai-outil, .mai-carte__boutons > .btn { justify-content: center; }
/* Le bouton de rédaction devenu « Je lance la fabrication de mon agent IA » (29/10/2026) : aspect de .btn--primary, sans le stylo ni la roue ;
   pendant la rédaction ou l'envoi il reste focalisable (aria-disabled, jamais disabled) et se grise. */
.mai-carte__boutons > .btn svg { display: none; }
.mai-carte__boutons > [aria-disabled="true"] { opacity: .7; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .mai-carte__boutons > .btn { transition: none; } }
@media (min-width: 640px) {
  .mai-carte__tete { flex-direction: row; align-items: center; justify-content: space-between; }
  .mai-carte__boutons { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; flex: none; }
}
.mai-outil--ia[aria-busy="true"] svg { display: none; }
.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; }
/* Le message d'étape passe à la ligne au lieu de déborder de la carte et d'élargir tout son contenu (29/10/2026 : « une partie est tronquée »). */
.mai-prog__t { flex: 0 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--c-teal); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .mai-prog__barre i { transition: none; } }

/* La zone de dépôt (m1 `.drop`), UN SEUL ENCADRÉ (Ronan, 25/10/2026) : pointillé discret ; la ligne entière
   (pictogramme, phrase, formats, « Joindre des fichiers ») ouvre le choix des fichiers ; le champ natif est
   retiré de la vue, sa liste devient la ligne des vignettes, dans le même encadré. */
.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; font-weight: 400; color: var(--c-muted); cursor: pointer; }
.mai-drop:hover, .mai-drop:has(#mai-fichiers:focus-visible) { border-color: var(--c-teal); }
.mai-drop:has(#mai-fichiers:focus-visible) { outline: 3px solid var(--ring-teinte); outline-offset: 2px; }
.mai-drop__choisir { flex: none; pointer-events: none; }
@media (max-width: 639px) { .mai-drop__ligne { flex-wrap: wrap; } .mai-drop__choisir { flex: 1 1 100%; justify-content: center; } }
.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; min-width: 0; }
.mai-drop__fmt { display: block; font-size: 11.5px; }
.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`). */
/* Sous le champ : l'aide pendant la dictée, la mention de la dictée, puis l'état (dictée et rédaction). */
.mai-carte__dictee { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0; }
.mai-carte__dictee:not(:has(> :not([hidden]))) { display: none; }
.mai-outils__dictee { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
.mai-outils__dictee[hidden] { display: none; }
.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 { 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); }
/* Dictée en cours (24/10/2026) : « ● Arrêter la dictée », pastille rouge qui pulse, aide courte à côté. */
.mai-outil__point { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-error); flex: none; }
.mai-outil--actif .mai-outil__point { display: inline-block; animation: mai-pulse 1.2s ease-in-out infinite; }
.mai-outil--actif:has(.mai-outil__point) > svg { display: none; }
.mai-outils__aide { align-self: center; font-size: 13px; color: var(--c-ink-2); }
.mai-outils__aide[hidden] { display: none; }
@keyframes mai-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .mai-outil--actif .mai-outil__point { animation: none; } }
.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__etat { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--c-muted); }
.mai-outils__etat:empty { display: none; }
/* Accueil : « Voir mon agent en action » SOUS l'encadré de dépôt, aligné à droite ; sur toute la largeur sur
   téléphone (Ronan, 25/10/2026). */
.mai-carte__envoi { display: flex; justify-content: flex-end; padding: 0 20px var(--sp-4); }
/* Les deux boutons de la carte (29/10/2026) : « Je précise mon besoin » (secondaire) à gauche du bouton principal, même hauteur ;
   empilés, sur toute la largeur, sur téléphone et dans la colonne étroite de la page processus. */
.mai-carte__duo { display: flex; align-items: stretch; gap: var(--sp-3); }
@media (max-width: 639px) { .mai-carte__envoi { display: block; } .mai-carte__envoi .btn { width: 100%; } .mai-carte__duo { display: grid; grid-auto-rows: 1fr; } }

/* 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; }
/* Mentions DISCRÈTES (Ronan, 03/11/2026) : avertissement du lancement et prudence sous « Joindre des fichiers ». Petit texte atténué, justifié (Ronan, 03/11/2026 : « diminue la taille de la police et justifie les paragraphes »)
   (--c-muted : 5,97:1 sur blanc, 5,6:1 sur --c-soft, AA), lien souligné ; AUCUN max-width : le texte occupe toute la largeur de sa zone. */
.mai-lancement, .mai-drop__prudence { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--c-muted); text-align: justify; text-justify: inter-word; hyphens: auto; }
.mai-lancement a { color: inherit; text-decoration: underline; font-weight: 600; }
.mai-drop__prudence { margin: 0; }
.mai-carte__envoi { flex-direction: column; align-items: stretch; }
.mai-carte__envoi .mai-carte__duo { align-self: flex-end; margin-top: var(--sp-3); }
.mai-carte__envoi .mai-lancement { margin-top: 0; }
/* Page processus : la mention au-dessus du bouton sur toute la largeur. */
.mai-carte__actions .mai-lancement { margin: 0 0 var(--sp-3); }
.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-accueil h1 { font-size: clamp(32px, 4vw, 42px); font-weight: 900; 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; }
/* Les deux modes ont la même mise en page : à droite, le téléphone d'aperçu du mode (factures fournisseurs ou
   courrier et accueil des usagers), puis les trois réassurances (Ronan, 25/10/2026). */
/* 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; }
  .mai-accueil__grille { grid-template-areas: "intro intro" "texte droite" "carte droite" "achat droite"; grid-template-rows: auto auto auto 1fr; }
  .mai-accueil__grille { row-gap: var(--sp-4); }
  .mai-accueil__intro { grid-area: intro; margin-bottom: calc(-1 * var(--sp-4)); }
  .mai-accueil__texte { grid-area: texte; }
  .mai-accueil__droite { grid-area: droite; display: grid; gap: var(--sp-4); align-content: start; }
  .mai-accueil__tel { min-width: 0; } /* le conteneur du téléphone, masqué ou montré selon le mode (data-mode) */
  .mai-accueil__carte { grid-area: carte; }
  .mai-accueil__achat { grid-area: achat; }
  .mai-carte--large .mai-carte__champs { position: relative; row-gap: 6px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.15fr); }
  .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; }
}

/* 4. LES SECTIONS SOUS LE BANDEAU (m1 `.sec`, `.how`, `.cat`, `.figs`). Les biographies des fondateurs (`.team`) ont quitté la
   page le 07/11/2026 (MA4 A) : elles sont sur « Qui sommes-nous ». */
.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; }
/* « Sur mesure » à gauche, « Catalogue complet » à droite sur la même ligne ; empilés sur téléphone, le
   second toujours aligné à droite (Ronan, 25/10/2026). */
.mai-cat__plus { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2) 14px; margin: 14px 0 0; font-size: 15px; }
@media (min-width: 640px) { .mai-cat__plus { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } }
.mai-cat__plus a { font-weight: 800; }
.mai-cat__plus a.mai-cat__complet { font-weight: 600; align-self: flex-end; text-align: right; }
.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; }

/* « Rédiger ma demande avec l'IA » v2 : proposition à relire, aide, actions, informations utilisées. Textes sur toute la largeur. */
.mai-ia-identite, .mai-ia-revue, .mai-ia-apres { margin-top: var(--sp-3); }
.mai-ia-identite { border: 1.5px solid var(--c-warning); background: var(--c-warning-bg); border-radius: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.mai-ia-identite p, .mai-ia-revue__t { margin: 0 0 var(--sp-2); font-size: 14px; font-weight: 700; color: var(--c-primary); }
.mai-ia-revue { border: 1.5px solid var(--c-teal); background: var(--c-c50); border-radius: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.mai-ia-revue__texte { display: block; width: 100%; min-height: 220px; font: inherit; font-size: 14px; line-height: 1.55; border: 1px solid var(--c-line); border-radius: var(--sp-2); padding: var(--sp-3); background: var(--c-bg); color: var(--c-ink); resize: vertical; }
.mai-ia-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.mai-ia-aide { margin: 0; font-size: 13px; color: var(--c-muted); }
.mai-ia-notice { margin-top: var(--sp-1); color: var(--c-primary); font-weight: 600; }
.mai-ia-infos { margin-top: var(--sp-3); font-size: 13px; color: var(--c-ink-2); }
.mai-ia-infos summary { cursor: pointer; font-weight: 700; color: var(--c-teal); min-height: 24px; }
.mai-ia-infos__t { margin: var(--sp-2) 0 var(--sp-1); font-weight: 700; color: var(--c-primary); }
.mai-ia-infos ul, .mai-ia-questions ul { margin: 0; padding-left: var(--sp-4); }
.mai-ia-infos a { color: var(--c-teal); overflow-wrap: anywhere; }
.mai-ia-questions { margin-top: var(--sp-3); font-size: 13px; color: var(--c-ink-2); }
#mai-besoin { line-height: 1.55; }

/* Dictée (29/10/2026) : l'annonce « Parlez, votre texte s'écrit dans le champ » est le filigrane du champ ; elle se voit pendant la dictée. */
.mai-champ--dictee::placeholder { color: var(--c-ink); opacity: 1; font-weight: 600; }

/* Maillage de l'accueil « Mon agent IA ! » vers les pages par secteur. */
.mai-secteurs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.mai-secteurs a { font-weight: 700; }

/* LE SÉLECTEUR DE PAYS (écran 1, avant « Votre entreprise » ; décision de Ronan Le Boulaire du 05/11/2026). Replié : le drapeau seul. Déplié : recherche + liste drapeau et nom,
   sur toute la largeur utile (aucun max-width sur les textes). Sans script, le `<select>` natif reste affiché. Contrastes : texte --c-ink sur --c-bg, aide --c-muted. */
.mai-pays { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: 14px 20px 0; }
.mai-pays__lib { font-size: 14.5px; font-weight: 800; color: var(--c-ink); }
.mai-pays__champ select { font: inherit; font-size: 15.5px; color: var(--c-ink); border: 1.5px solid var(--c-line); border-radius: 10px; padding: 10px 13px; background: #fff; min-height: 44px; }
.mai-pays__bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--c-line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.mai-pays__bouton:hover { border-color: var(--c-primary); }
.mai-pays__bouton:focus-visible, .mai-pays__recherche:focus-visible { outline: 3px solid var(--ring-teinte); outline-offset: 2px; }
.mai-pays__drapeau { display: block; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); object-fit: cover; }
.mai-pays__fleche { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--c-ink); }
.mai-pays__panneau { position: absolute; z-index: 30; left: 20px; top: calc(100% + 6px); width: min(360px, calc(100% - 40px)); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.mai-pays__recherche { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--c-line); padding: 12px 14px; font: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-bg); }
.mai-pays__liste { position: relative; list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.mai-pays__option { display: flex; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; font-size: 14.5px; color: var(--c-ink); }
.mai-pays__option.is-active, .mai-pays__option:hover { background: var(--c-c50); }
.mai-pays__option[aria-selected="true"] .mai-pays__nom { font-weight: 800; }
.mai-pays__vide { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--c-muted); }
.mai-pays__err { flex-basis: 100%; }
/* Hors de France, le champ de l'identifiant porte un libellé long (« Numéro d'immatriculation de votre organisation facultatif ») : il prend toute la largeur de sa ligne pour que
   le libellé ne passe pas à la ligne alors qu'il reste de la place ; sur la carte large, les trois autres champs gardent leur ligne et l'identifiant vient dessous. */
@media (min-width: 640px) { .mai-carte[data-pays-etranger] .mai-carte__champs > [data-pays-target="blocLocal"] { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .mai-carte--large[data-pays-etranger] .mai-carte__champs { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.15fr); }
  .mai-carte--large[data-pays-etranger] .mai-carte__champs > [data-pays-target="blocLocal"] { order: 9; }
}

/* 5. REFONTE SEO/GEO DU 07/11/2026 : fil d'Ariane, lien « expert », « Ce que votre maquette vous montre », « Ce qui se passe
   après la maquette », FAQ « Vos données et vos documents », « Pourquoi Blue Lemon Agent », CTA final et ligne « Page vérifiée ».
   Aucun texte n'est plafonné en caractères : chaque paragraphe prend toute la largeur de son conteneur. */
.mai-accueil__fil .crumb { padding: 0 0 var(--sp-3); }
/* La macro du fil n'écrit aucune espace après la barre : une marge, pour « Accueil / Mon agent IA ! ». */
.mai-accueil__fil .crumb span[aria-hidden] { margin-right: 6px; }
.mai-carte__expert { margin: var(--sp-3) 0 0; font-size: 15px; font-weight: 700; }
.mai-montre__bloc { border: 1px solid var(--c-line); border-radius: 14px; padding: 20px 22px; background: var(--c-soft); }
.mai-montre__statut { margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.mai-montre__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px var(--sp-6); }
.mai-montre__liste li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; }
.mai-montre__liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--c-teal); }
@media (min-width: 768px) { .mai-montre__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mai-apres__liste { list-style: none; counter-reset: mai-apres; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mai-apres__liste li { counter-increment: mai-apres; display: flex; align-items: flex-start; gap: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--sp-3); padding: 14px 16px; background: var(--c-bg); font-size: 15px; line-height: 1.45; }
.mai-apres__liste li::before { content: counter(mai-apres); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: var(--c-bg); font-weight: 900; font-size: 14px; display: grid; place-items: center; }
@media (min-width: 768px) { .mai-apres__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mai-apres__liens { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: var(--sp-4) 0 0; font-size: 15px; font-weight: 800; }
.mai-faq details { border-bottom: 1px solid var(--c-line); padding: 14px 2px; }
.mai-faq details:first-of-type { border-top: 1px solid var(--c-line); }
.mai-faq summary { font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.mai-faq summary::-webkit-details-marker { display: none; }
.mai-faq summary::after { content: "+"; color: var(--c-teal); font-weight: 800; }
.mai-faq details[open] summary::after { content: "\2013"; }
.mai-faq p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--c-muted); }
.mai-pourquoi .heros__benefices { margin: 0; }
.mai-pourquoi__confiance { margin: var(--sp-4) 0 0; font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }
.mai-pourquoi__confiance a { white-space: nowrap; }
.mai-final { margin-top: 26px; padding: var(--sp-6) 0; }
.mai-final__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-6); }
.mai-final__expert { font-weight: 800; font-size: 15px; }
.mai-verifiee { margin: 0; padding: 0 0 var(--sp-6); font-size: 13px; color: var(--c-muted); text-align: center; }