/* Pilotage des appels · styles du module « Solutions M&R : catalogue et suggestions » (modules.js).
   Jetons et composants de la refonte : app.css ; contrat du socle : specs/front-v2.md.
   Page produit sobre : cartes blanches bordées sur le fond clair rosé, une scène lumineuse M&R par solution (illustration construite en DOM),
   les chiffres de l'agence en très grand. Empilement : voile 46, feuille 47 (toasts 50 au-dessus). */

/* ===== Page ===== */
.m-modules-page { min-width: 0; }
.m-modules-page > .entete { margin-bottom: 0; }
.m-modules-note { margin: 28px 0 0; }
.m-modules-bloc { margin-top: 56px; min-width: 0; }
.m-modules-bloc-tete { margin-bottom: 18px; }
.m-modules-bloc-tete .section-titre { margin-bottom: 4px; }
.m-modules-bloc-sous { margin: 0; font: 400 0.9375rem/1.5 var(--police); letter-spacing: -0.006em; color: var(--texte-2); }
.m-modules-surtitre { display: block; margin: 0; font: 600 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-modules-catalogue { display: grid; gap: 28px; }

/* Léa : toujours son avatar officiel, recadré en cercle */
.m-modules-avatar { display: block; width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; background: var(--rose-pale); }
.m-modules-btn-lea .m-modules-avatar-btn { width: 24px; height: 24px; margin-left: -5px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }

/* « Qu'est-ce que Léa peut faire pour moi ? » : l'invitation de l'en-tête */
.m-modules-invite {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 56px; padding: 7px 18px 7px 7px;
  border: 1px solid var(--contour-carte); border-radius: var(--r-capsule); background: var(--surface); color: var(--texte); cursor: pointer;
  font: 600 0.9375rem/1.3 var(--police); letter-spacing: -0.008em; text-align: left; box-shadow: var(--ombre-carte);
  transition: box-shadow var(--d-rapide) var(--c-standard), border-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
@media (hover: hover) { .m-modules-invite:hover { box-shadow: var(--ombre-survol); border-color: var(--separateur-fort); } }
.m-modules-invite:active { transform: scale(.98); }
.m-modules-invite .m-modules-invite-avatar { width: 42px; height: 42px; }
.m-modules-invite-texte { min-width: 0; text-wrap: balance; }
.m-modules-invite-chevron { width: 16px; height: 16px; color: var(--texte-3); }

/* Marque d'une solution : l'avatar de Léa, ou une tuile d'icône */
.m-modules-marque { width: 32px; height: 32px; }
.m-modules-marque-icone { display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--accent-teinte); color: var(--accent); }
.m-modules-marque-icone svg { width: 18px; height: 18px; }
.m-modules-marque-grande { width: 56px; height: 56px; }
.m-modules-marque-icone.m-modules-marque-grande { border-radius: 16px; }
.m-modules-marque-icone.m-modules-marque-grande svg { width: 28px; height: 28px; }

/* Le chiffre de l'agence, en très grand : dégradé bleu → rose M&R (texte ≥ 5,5:1 sur blanc en tout point) */
.m-modules-grand-chiffre {
  display: inline-block; padding-right: .04em; font: 700 4.5rem/0.95 var(--police); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; color: var(--accent);
  background: linear-gradient(120deg, var(--mr-bleu) 12%, var(--mr-rose-fonce) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ===== Boutons et retours ===== */
.m-modules-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.m-modules-recontact { display: inline-flex; }
.m-modules-transmise {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-m);
  background: var(--vert-pale); color: var(--vert-texte); font: 600 0.9375rem/1 var(--police); letter-spacing: -0.006em; white-space: nowrap;
}
.m-modules-transmise svg { width: 16px; height: 16px; stroke-width: 2.2; }
.m-modules-transmise:focus { outline: none; }
.m-modules-transmise:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.m-modules-statut { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font: 500 0.875rem/1.45 var(--police); }
.m-modules-statut svg { width: 16px; height: 16px; margin-top: 1px; stroke-width: 2.2; }
.m-modules-statut-vert { color: var(--vert-texte); }
.m-modules-statut-ambre { color: var(--ambre-texte); }
.m-modules-statut-rouge { color: var(--rouge-texte); }

/* ===== Recommandé pour vous =====
   Côte à côte, les constats s'alignent (sous-grille) ; seule sur sa ligne et assez large, la carte se lit de gauche à droite. */
.m-modules-reco { container-type: inline-size; }
.m-modules-reco-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.m-modules-reco-carte { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
.m-modules-reco-constat { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 28px 28px 24px; background: linear-gradient(135deg, #F2F1FF 0%, #FCF1F7 48%, #FFFFFF 86%); }
.m-modules-reco-texte { margin: 0; max-width: 30ch; font: 600 1.1875rem/1.35 var(--police); letter-spacing: -0.016em; color: var(--texte); text-wrap: balance; }
.m-modules-reco-reponse { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 28px 26px; border-top: 1px solid var(--separateur); }
.m-modules-reco-nom { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; font: 700 1.125rem/1.3 var(--police); letter-spacing: -0.016em; color: var(--texte); }
.m-modules-reco-explication { margin: 0; max-width: 62ch; font: 400 0.9375rem/1.55 var(--police); color: var(--texte-2); }
.m-modules-reco-reponse .m-modules-actions { margin-top: auto; padding-top: 12px; }
.m-modules-voir { margin-left: 2px; }
@container (min-width: 840px) {
  .m-modules-reco-grille:not(.m-modules-reco-seule) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .m-modules-reco-grille:not(.m-modules-reco-seule) .m-modules-reco-carte { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
@container (min-width: 560px) and (max-width: 839px) {
  .m-modules-reco-carte { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto; }
  .m-modules-reco-constat { align-content: center; }
  .m-modules-reco-reponse { border-top: 0; border-left: 1px solid var(--separateur); }
}
@container (min-width: 560px) {
  .m-modules-reco-seule .m-modules-reco-carte { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto; }
  .m-modules-reco-seule .m-modules-reco-constat { align-content: center; }
  .m-modules-reco-seule .m-modules-reco-reponse { border-top: 0; border-left: 1px solid var(--separateur); }
}

/* ===== Une section par solution : argument et illustration côte à côte (alternés), puis les trois bénéfices ===== */
.m-modules-section {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "tete visuel" "benefices benefices";
  align-items: center; column-gap: 56px; row-gap: 40px; padding: 44px;
}
.m-modules-section.m-modules-inverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "visuel tete" "benefices benefices"; }
.m-modules-tete { grid-area: tete; min-width: 0; }
.m-modules-visuel { grid-area: visuel; min-width: 0; margin: 0; display: grid; gap: 18px; }
.m-modules-titre { margin: 0; display: grid; justify-items: start; gap: 14px; }
.m-modules-nom { display: inline-flex; align-items: center; gap: 10px; font: 650 1rem/1.3 var(--police); letter-spacing: -0.01em; color: var(--texte); }
.m-modules-argument { font: 700 2.125rem/1.12 var(--police); letter-spacing: -0.03em; color: var(--texte); text-wrap: balance; }
.m-modules-accroche { margin: 16px 0 0; max-width: 46ch; font: 400 1.125rem/1.55 var(--police); letter-spacing: -0.012em; color: var(--texte-2); }
.m-modules-pour-vous {
  display: inline-flex; align-items: flex-start; gap: 10px; max-width: 100%; margin: 22px 0 0; padding: 10px 16px 10px 12px; border-radius: 14px;
  background: var(--rose-pale); color: var(--action); font: 500 0.9375rem/1.45 var(--police); letter-spacing: -0.006em;
}
.m-modules-pour-vous svg { width: 18px; height: 18px; margin-top: 1px; }
.m-modules-pour-vous > span { text-wrap: balance; }
.m-modules-pour-vous strong { font-weight: 700; }
.m-modules-tete > .m-modules-actions { margin-top: 28px; }

/* La scène, en légende de l'illustration */
.m-modules-scene { position: relative; display: grid; gap: 4px; padding: 2px 4px 2px 18px; }
.m-modules-scene::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--mr-bleu), var(--mr-rose)); }
.m-modules-scene-moment { font: 600 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-modules-scene-recit { font: 500 1rem/1.6 var(--police); letter-spacing: -0.008em; color: var(--texte); text-wrap: pretty; }

/* Les trois bénéfices */
.m-modules-benefices {
  grid-area: benefices; list-style: none; margin: 0; padding: 32px 0 0; border-top: 1px solid var(--separateur);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px;
}
.m-modules-benefices li { display: grid; align-content: start; gap: 12px; min-width: 0; }
.m-modules-benefice-icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-teinte); color: var(--accent); }
.m-modules-benefice-icone svg { width: 22px; height: 22px; }
.m-modules-benefice-texte { display: grid; gap: 4px; min-width: 0; }
.m-modules-benefice-texte strong { font: 650 1.0625rem/1.35 var(--police); letter-spacing: -0.012em; color: var(--texte); }
.m-modules-benefice-texte span { font: 400 0.9375rem/1.55 var(--police); color: var(--texte-2); text-wrap: pretty; }

/* ===== Illustrations : une scène lumineuse aux couleurs M&R (indigo, mauve, rose), des cartes blanches qui flottent ===== */
.m-modules-illu {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 440px;
  padding: 36px 32px; border-radius: var(--r-l); color: var(--texte);
  background:
    radial-gradient(30rem 20rem at 0% 0%, rgba(99, 102, 241, .34), transparent 70%),
    radial-gradient(26rem 18rem at 100% 100%, rgba(236, 72, 153, .30), transparent 70%),
    radial-gradient(22rem 16rem at 92% 6%, rgba(168, 85, 247, .20), transparent 70%),
    linear-gradient(160deg, #ECEEFF 0%, #F4EDFD 52%, #FCE9F3 100%);
  box-shadow: inset 0 0 0 1px rgba(33, 60, 160, .08);
}
.m-modules-inverse .m-modules-illu {
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgba(99, 102, 241, .34), transparent 70%),
    radial-gradient(26rem 18rem at 0% 100%, rgba(236, 72, 153, .30), transparent 70%),
    radial-gradient(22rem 16rem at 8% 6%, rgba(168, 85, 247, .20), transparent 70%),
    linear-gradient(200deg, #ECEEFF 0%, #F4EDFD 52%, #FCE9F3 100%);
}
.m-modules-mini { position: relative; background: var(--surface); border-radius: 18px; box-shadow: 0 0 0 1px rgba(33, 60, 160, .06), 0 2px 6px rgba(33, 60, 160, .10), 0 22px 44px -10px rgba(79, 70, 229, .32); }
.m-modules-illu .pastille { height: 24px; padding: 0 9px; font-size: 0.75rem; }
.m-modules-illu .pastilles { gap: 6px; }

/* Apparitions : préparées hors champ, jouées une fois à l'écran */
.m-modules-anime { transition: opacity 420ms var(--c-standard), transform 560ms var(--c-sortie); }
.m-modules-a-venir { opacity: 0; transform: translateY(10px) scale(.98); }
.m-modules-point { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--vert); }

/* Texte qui s'écrit : la place est réservée par le texte complet, invisible */
.m-modules-texte-ecrit { position: relative; display: block; }
.m-modules-fantome { visibility: hidden; }
.m-modules-ecrit { position: absolute; inset: 0; }
.m-modules-tape .m-modules-ecrit::after {
  content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; border-radius: 1px; background: var(--accent);
  animation: m-modules-clignote 1s steps(1) infinite;
}
@keyframes m-modules-clignote { 50% { opacity: 0; } }

/* Léa Call : l'appel, la transcription, le résumé (qui se pose sur le bas de la carte, dans une marge réservée) */
.m-modules-appel { width: min(100%, 430px); align-self: flex-start; padding: 16px 16px 42px; }
.m-modules-appel-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--separateur); }
.m-modules-appel-portrait { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; }
.m-modules-appel-portrait img { display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
@keyframes m-modules-onde { from { transform: scale(.94); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.m-modules-appel-qui { flex: 1; min-width: 0; display: grid; gap: 1px; }
.m-modules-appel-qui strong { font: 650 0.9375rem/1.3 var(--police); letter-spacing: -0.01em; }
.m-modules-appel-qui span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 0.8125rem/1.35 var(--police); color: var(--texte-2); }
.m-modules-appel-etat {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-capsule);
  background: var(--vert-pale); color: var(--vert-texte); font: 600 0.75rem/1 var(--police); letter-spacing: 0;
}
.m-modules-appel-etat svg { width: 13px; height: 13px; stroke-width: 2.4; }
.m-modules-etat-fin { background: var(--remplissage); color: var(--neutre-texte); }
.m-modules-etat-ligne .m-modules-point { animation: m-modules-pouls 1.6s var(--c-standard) infinite; }
@keyframes m-modules-pouls { 50% { opacity: .35; } }
.m-modules-transcription { position: relative; display: grid; gap: 8px; padding-top: 14px; }
.m-modules-entrant {
  position: absolute; inset: 14px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 14px; background: var(--surface-inset); text-align: center;
}
.m-modules-entrant-portrait { position: relative; width: 76px; height: 76px; margin-bottom: 10px; border-radius: 50%; }
.m-modules-entrant-portrait img { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 8px 22px rgba(14, 22, 56, .18); }
.m-modules-sonne .m-modules-entrant-portrait::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--vert);
  animation: m-modules-onde 1.3s var(--c-sortie) infinite;
}
.m-modules-entrant strong { font: 650 0.9375rem/1.3 var(--police); letter-spacing: -0.01em; }
.m-modules-entrant span:last-child { max-width: 30ch; font: 400 0.8125rem/1.45 var(--police); color: var(--texte-2); text-wrap: balance; }
.m-modules-bulle { justify-self: start; max-width: 88%; padding: 8px 12px 10px; border-radius: 16px 16px 16px 6px; background: var(--surface-inset); }
.m-modules-bulle-lea { justify-self: end; border-radius: 16px 16px 6px 16px; background: var(--accent-teinte); }
.m-modules-bulle-qui { display: block; margin-bottom: 2px; font: 600 0.75rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-modules-bulle-lea .m-modules-bulle-qui { color: var(--accent-texte); }
.m-modules-bulle .m-modules-texte-ecrit { font: 400 0.875rem/1.45 var(--police); color: var(--texte); }
.m-modules-appel-resume { align-self: flex-end; width: min(94%, 400px); margin-top: -30px; padding: 14px 16px 16px; display: grid; gap: 8px; }
.m-modules-resume-tete { display: flex; align-items: center; gap: 8px; font: 650 0.8125rem/1.3 var(--police); color: var(--vert-texte); }
.m-modules-resume-envoye { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 500 0.75rem/1.3 var(--police); color: var(--texte-2); white-space: nowrap; }
.m-modules-resume-envoye svg { width: 13px; height: 13px; stroke-width: 2.4; color: var(--vert-texte); }
.m-modules-resume-titre { margin: 0; font: 650 1rem/1.35 var(--police); letter-spacing: -0.012em; }

/* Léa Mail : la boîte de réception triée, le résumé en tête */
.m-modules-boite { width: min(100%, 460px); align-self: center; padding: 14px 14px 6px; }
.m-modules-boite-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.m-modules-boite-titre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 650 0.9375rem/1.3 var(--police); letter-spacing: -0.01em; }
.m-modules-boite-titre svg { width: 18px; height: 18px; color: var(--accent); }
.m-modules-trie {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 3px; border-radius: var(--r-capsule);
  background: var(--rose-pale); color: var(--action); font: 600 0.75rem/1 var(--police); letter-spacing: 0;
}
.m-modules-trie .m-modules-avatar { width: 22px; height: 22px; }
.m-modules-synthese { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #F3F5FF 0%, #FDF1F8 100%); }
.m-modules-synthese .m-modules-synthese-avatar { width: 32px; height: 32px; }
.m-modules-synthese-texte { display: grid; gap: 2px; min-width: 0; }
.m-modules-synthese-texte strong { font: 650 0.8125rem/1.3 var(--police); color: var(--accent-texte); }
.m-modules-synthese .m-modules-texte-ecrit { font: 500 0.875rem/1.45 var(--police); color: var(--texte); }
.m-modules-attente { position: absolute; inset: 0; display: flex; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--texte-2); }
.m-modules-attente .chargeur { margin-top: 3px; }
.m-modules-boite-groupe { margin: 14px 6px 2px; font: 600 0.75rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-modules-courriels { position: relative; overflow: hidden; }
.m-modules-courriel {
  position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 6px;
  background: var(--surface); box-shadow: inset 0 -1px 0 var(--separateur);
  transition: transform 680ms var(--c-sortie), opacity 360ms var(--c-standard);
}
.m-modules-courriel-point { width: 8px; height: 8px; margin: 0 6px; flex: none; border-radius: 50%; background: var(--separateur-fort); transition: background-color 320ms var(--c-standard); }
.m-modules-trie-fait .m-modules-ton-rose .m-modules-courriel-point { background: var(--action); }
.m-modules-trie-fait .m-modules-ton-ambre .m-modules-courriel-point { background: var(--ambre); }
.m-modules-trie-fait .m-modules-ton-bleu .m-modules-courriel-point { background: var(--accent); }
.m-modules-courriel-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.m-modules-courriel-texte strong, .m-modules-courriel-texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-modules-courriel-texte strong { font: 600 0.8125rem/1.3 var(--police); }
.m-modules-courriel-texte span { font: 400 0.8125rem/1.3 var(--police); color: var(--texte-2); }
.m-modules-lettre .m-modules-courriel-texte strong { font-weight: 500; color: var(--texte-2); }
.m-modules-groupe { box-shadow: none; }
.m-modules-groupe-icone { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--texte-3); }
.m-modules-groupe-icone svg { width: 18px; height: 18px; }
.m-modules-groupe .m-modules-courriel-texte strong { color: var(--texte-2); }

/* Network-iA : des dirigeants qualifiés, un rendez-vous dans l'agenda (posé sur le bas de la liste, dans une marge réservée) */
.m-modules-leads { width: min(100%, 440px); align-self: flex-start; padding: 14px 14px 34px; }
.m-modules-leads-tete { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; border-bottom: 1px solid var(--separateur); }
.m-modules-leads-titre { flex: 1; min-width: 0; display: grid; gap: 1px; }
.m-modules-leads-titre strong { font: 650 0.9375rem/1.3 var(--police); letter-spacing: -0.01em; }
.m-modules-leads-titre span { font: 400 0.75rem/1.3 var(--police); color: var(--texte-2); }
.m-modules-compte {
  flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-capsule);
  background: var(--vert-pale); color: var(--vert-texte); font: 600 0.75rem/1 var(--police); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.m-modules-dirigeants { display: grid; padding-top: 4px; }
.m-modules-dirigeant {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 12px;
  transition: opacity 420ms var(--c-standard), transform 560ms var(--c-sortie), background-color 400ms var(--c-standard);
}
.m-modules-dirigeant + .m-modules-dirigeant::before { content: ''; position: absolute; top: 0; left: 52px; right: 8px; height: 1px; background: var(--separateur); }
.m-modules-dirigeant .avatar { width: 34px; height: 34px; font-size: 0.75rem; }
.m-modules-dirigeant-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.m-modules-dirigeant-texte strong { font: 600 0.875rem/1.3 var(--police); }
.m-modules-dirigeant-texte span { font: 400 0.75rem/1.4 var(--police); color: var(--texte-2); }
.m-modules-dirigeant-texte .m-modules-besoin { margin-top: 3px; font-weight: 500; color: var(--accent-texte); }
.m-modules-qualifie { flex: none; }
.m-modules-qualifie svg { width: 12px; height: 12px; stroke-width: 2.6; }
.m-modules-dirigeant.m-modules-retenu { background: var(--accent-teinte); }
.m-modules-retenu::before, .m-modules-retenu + .m-modules-dirigeant::before { opacity: 0; }
.m-modules-agenda { align-self: flex-end; width: min(86%, 360px); margin-top: -24px; padding: 12px 14px 14px; }
.m-modules-agenda-tete { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.m-modules-agenda-tete svg { width: 16px; height: 16px; color: var(--accent); }
.m-modules-agenda-tete strong { font: 650 0.875rem/1.3 var(--police); }
.m-modules-agenda-tete span { margin-left: auto; font: 400 0.75rem/1.3 var(--police); color: var(--texte-2); }
.m-modules-agenda-grille { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.m-modules-heure { font: 500 0.6875rem/1 var(--police); letter-spacing: 0; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.m-modules-creneau { min-height: 24px; border-top: 1px solid var(--separateur); }
.m-modules-creneau-rdv { border-top: 0; padding: 10px 0 4px; }
.m-modules-rdv { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--accent-teinte); box-shadow: inset 3px 0 0 var(--accent); }
.m-modules-illu .m-modules-nouveau { position: absolute; top: -10px; right: 8px; height: 20px; padding: 0 8px; font-size: 0.6875rem; box-shadow: 0 0 0 2px var(--surface); }
.m-modules-rdv-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.m-modules-rdv-texte strong { font: 600 0.8125rem/1.3 var(--police); color: var(--accent-texte); }
.m-modules-rdv-texte span { font: 400 0.75rem/1.35 var(--police); color: var(--accent-texte); }

/* Solution sans scène dédiée */
.m-modules-generique { width: min(100%, 400px); align-self: center; display: grid; justify-items: start; gap: 12px; padding: 22px; }
.m-modules-generique > strong { font: 700 1.125rem/1.3 var(--police); letter-spacing: -0.014em; }
.m-modules-generique ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-modules-generique li { display: flex; gap: 8px; align-items: flex-start; font: 400 0.875rem/1.45 var(--police); color: var(--texte-2); }
.m-modules-generique li svg { width: 16px; height: 16px; margin-top: 2px; color: var(--vert-texte); }

/* ===== Déjà actif : un rappel discret ===== */
.m-modules-actifs-liste { display: grid; gap: 16px; }
.m-modules-actif { padding: 22px 24px 24px; }
.m-modules-actif-tete { display: flex; align-items: center; gap: 14px; }
.m-modules-actif-titres { flex: 1; min-width: 0; }
.m-modules-actif-titres h3 { margin: 0; font: 650 1rem/1.3 var(--police); letter-spacing: -0.01em; }
.m-modules-actif-titres p { margin: 2px 0 0; font: 400 0.875rem/1.45 var(--police); color: var(--texte-2); }
.m-modules-actif-tete .pastille { flex: none; }
.m-modules-points { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--separateur); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.m-modules-points li { font-size: 0.875rem; color: var(--texte-2); }

/* ===== Vue d'ensemble : la recommandation la plus forte ===== */
.m-modules-vue {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chiffre texte actions";
  align-items: center; gap: 12px 28px; padding: 22px 64px 22px 28px; background: linear-gradient(135deg, #F2F1FF 0%, #FCF1F7 42%, #FFFFFF 78%);
}
.m-modules-vue .m-modules-vue-chiffre { grid-area: chiffre; font-size: 3.25rem; }
.m-modules-vue-texte { grid-area: texte; min-width: 0; }
.m-modules-vue-titre { margin: 0; display: grid; gap: 4px; }
.m-modules-vue-constat { font: 650 1.125rem/1.35 var(--police); letter-spacing: -0.014em; color: var(--texte); }
.m-modules-vue-reponse { margin: 4px 0 0; max-width: 72ch; font: 400 0.875rem/1.5 var(--police); color: var(--texte-2); }
.m-modules-vue-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.m-modules-masquer {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--texte-3); cursor: pointer; transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide) var(--c-standard);
}
.m-modules-masquer svg { width: 18px; height: 18px; }
@media (hover: hover) { .m-modules-masquer:hover { background: var(--remplissage); color: var(--texte); } }

/* ===== Feuille « Être recontacté » ===== */
html.m-modules-ouvert { overflow: hidden; }
html.m-modules-gouttiere { scrollbar-gutter: stable; }
.m-modules-voile { position: fixed; inset: 0; z-index: 46; background: var(--voile); animation: fondu var(--d-base) var(--c-standard); }
.m-modules-feuille {
  position: fixed; z-index: 47; left: 50%; top: 50%; translate: -50% -50%; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  overscroll-behavior: contain; padding: 32px; border-radius: var(--r-feuille); background: var(--surface); color: var(--texte);
  border: 1px solid var(--contour-carte); box-shadow: var(--ombre-flottante); animation: entre var(--d-base) var(--c-sortie);
}
.m-modules-feuille:focus { outline: none; }
.m-modules-feuille.m-modules-sortie { opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; transition: opacity var(--d-sortie) var(--c-standard), transform var(--d-sortie) var(--c-standard); }
.m-modules-voile.m-modules-sortie { opacity: 0; pointer-events: none; transition: opacity var(--d-sortie) var(--c-standard); }
.m-modules-fermer {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--remplissage); color: var(--texte-2); cursor: pointer; transition: background-color var(--d-rapide) var(--c-standard);
}
.m-modules-fermer svg { width: 18px; height: 18px; }
@media (hover: hover) { .m-modules-fermer:hover { background: var(--remplissage-survol); color: var(--texte); } }
.m-modules-feuille-titre { margin: 18px 0 6px; font: 700 1.375rem/1.27 var(--police); letter-spacing: -0.018em; }
.m-modules-feuille-titre:focus { outline: none; }
.m-modules-feuille-sous { margin: 0 0 22px; font: 400 0.9375rem/1.5 var(--police); color: var(--texte-2); }
.m-modules-feuille-sous strong { color: var(--texte); font-weight: 600; }
.m-modules-feuille-erreur { margin-bottom: 16px; }
.m-modules-champ { display: grid; gap: 6px; }
.m-modules-champ label { font: 600 0.8125rem/1.38 var(--police); letter-spacing: 0; color: var(--texte); }
.m-modules-facultatif { font-weight: 400; color: var(--texte-2); }
.m-modules-champ textarea {
  width: 100%; min-height: 116px; resize: vertical; padding: 12px 14px; border: 1px solid var(--contour-champ); border-radius: 14px;
  background: var(--surface); color: var(--texte); font: 400 1rem/1.5 var(--police);
  transition: border-color var(--d-rapide) var(--c-standard), box-shadow var(--d-rapide) var(--c-standard);
}
@media (hover: hover) { .m-modules-champ textarea:hover { border-color: var(--contour-champ-survol); } }
.m-modules-champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--halo-champ); }
.m-modules-coordonnees { margin: 12px 0 0; font: 400 0.8125rem/1.5 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-modules-email { overflow-wrap: anywhere; }
.m-modules-feuille-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 26px; }
/* Issue de la demande : coche qui se trace, titre et phrase centrés */
.m-modules-issue { display: grid; justify-items: center; text-align: center; padding-top: 8px; }
.m-modules-issue .m-modules-feuille-titre { margin-top: 18px; max-width: 22ch; }
.m-modules-issue .m-modules-feuille-sous { max-width: 40ch; margin-bottom: 0; }
.m-modules-issue .m-modules-feuille-actions { justify-content: center; }
.m-modules-issue-icone { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; }
.m-modules-issue-vert .m-modules-issue-icone { background: var(--vert-pale); color: var(--vert-texte); }
.m-modules-issue-ambre .m-modules-issue-icone { background: var(--ambre-pale); color: var(--ambre-texte); }
.m-modules-issue-icone svg { width: 32px; height: 32px; stroke-width: 2.2; }
.m-modules-issue-vert .m-modules-issue-icone svg path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: m-modules-trace 520ms 140ms var(--c-sortie) forwards; }
@keyframes m-modules-trace { to { stroke-dashoffset: 0; } }

/* ===== Adaptations ===== */
@media (max-width: 1279px) {
  .m-modules-section, .m-modules-section.m-modules-inverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "visuel" "benefices"; row-gap: 32px; padding: 36px; }
  .m-modules-argument { font-size: 2rem; }
  .m-modules-accroche { max-width: 60ch; }
  .m-modules-illu { min-height: 420px; }
  .m-modules-vue { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chiffre texte" "chiffre actions"; }
  .m-modules-vue-actions { justify-content: flex-start; }
}
@media (max-width: 899px) {
  .m-modules-bloc { margin-top: 44px; }
  .m-modules-page > .entete .entete-droite { width: auto; max-width: 100%; }
  .m-modules-section, .m-modules-section.m-modules-inverse { padding: 28px; }
}
@media (max-width: 640px) {
  .m-modules-bloc { margin-top: 36px; }
  .m-modules-catalogue { gap: 20px; }
  .m-modules-invite { min-height: 52px; padding-right: 14px; font-size: 0.875rem; }
  .m-modules-invite .m-modules-invite-avatar { width: 38px; height: 38px; }
  .m-modules-grand-chiffre { font-size: 3.75rem; }
  .m-modules-reco-constat { padding: 22px 20px 20px; }
  .m-modules-reco-texte { font-size: 1.0625rem; }
  .m-modules-reco-reponse { padding: 18px 20px 22px; }
  .m-modules-section, .m-modules-section.m-modules-inverse { padding: 22px 18px 24px; row-gap: 26px; }
  .m-modules-titre { gap: 10px; }
  .m-modules-argument { font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.024em; }
  .m-modules-accroche { margin-top: 12px; font-size: 1rem; }
  .m-modules-pour-vous { margin-top: 18px; font-size: 0.875rem; }
  .m-modules-tete > .m-modules-actions { margin-top: 22px; }
  .m-modules-actions { gap: 10px; }
  .m-modules-actions > .btn, .m-modules-recontact { flex: 1 1 100%; }
  .m-modules-recontact > .btn, .m-modules-recontact > .m-modules-transmise { flex: 1; justify-content: center; height: 44px; }
  .m-modules-actions > .btn { height: 44px; }
  .m-modules-voir { flex: 1 1 100%; justify-content: center; }
  .m-modules-illu, .m-modules-inverse .m-modules-illu { min-height: 0; padding: 24px 14px; }
  .m-modules-appel { padding: 14px 12px 38px; }
  .m-modules-leads { padding: 14px 12px 30px; }
  .m-modules-bulle { max-width: 92%; }
  .m-modules-appel-resume { width: 96%; margin-top: -26px; padding: 12px 14px 14px; }
  .m-modules-resume-envoye { display: none; }
  .m-modules-boite { padding: 12px 10px 4px; }
  .m-modules-boite-titre svg { display: none; }
  .m-modules-boite-titre { white-space: nowrap; font-size: 0.875rem; }
  .m-modules-synthese { padding: 10px 12px; }
  .m-modules-qualifie { width: 24px; padding: 0; justify-content: center; }
  .m-modules-qualifie-texte { display: none; }
  .m-modules-agenda { width: 94%; margin-top: -20px; }
  .m-modules-scene { padding-left: 16px; }
  .m-modules-scene-recit { font-size: 0.9375rem; }
  .m-modules-benefices { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .m-modules-benefices li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .m-modules-benefice-icone { width: 40px; height: 40px; border-radius: 12px; }
  .m-modules-benefice-icone svg { width: 20px; height: 20px; }
  .m-modules-benefice-texte strong { font-size: 1rem; }
  .m-modules-actif { padding: 18px 18px 20px; }
  .m-modules-actif-tete { flex-wrap: wrap; }
  .m-modules-points { grid-template-columns: minmax(0, 1fr); }
  .m-modules-vue { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chiffre" "texte" "actions"; gap: 8px; padding: 18px 18px 20px; }
  .m-modules-vue .m-modules-vue-chiffre { font-size: 2.75rem; }
  .m-modules-vue-actions { margin-top: 8px; }
  .m-modules-vue-actions .btn { flex: 1 1 100%; height: 44px; }
  /* Feuille : posée en bas de l'écran, à portée de pouce */
  .m-modules-feuille {
    left: 0; right: 0; top: auto; bottom: 0; translate: none; width: 100%; max-height: 92dvh; padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0; border-bottom: 0; animation: m-modules-monte var(--d-base) var(--c-sortie);
  }
  .m-modules-feuille.m-modules-sortie { transform: translateY(24px); }
  .m-modules-feuille-actions { flex-direction: column-reverse; }
  .m-modules-issue .m-modules-feuille-actions { justify-self: stretch; }
  .m-modules-feuille-actions .btn { width: 100%; height: 48px; }
}
@keyframes m-modules-monte { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px), (pointer: coarse) {
  .m-modules-voir { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-modules-anime, .m-modules-courriel, .m-modules-dirigeant, .m-modules-courriel-point { transition: none; }
  .m-modules-sonne .m-modules-entrant-portrait::after, .m-modules-etat-ligne .m-modules-point, .m-modules-tape .m-modules-ecrit::after { animation: none; }
  .m-modules-feuille, .m-modules-voile { animation: fondu var(--d-rapide) linear; }
  .m-modules-feuille.m-modules-sortie { transform: none; }
  .m-modules-issue-vert .m-modules-issue-icone svg path { animation: none; stroke-dashoffset: 0; }
  .m-modules-invite:active { transform: none; }
}
@media (forced-colors: active), (prefers-contrast: more) {
  .m-modules-grand-chiffre { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-texte); }
}