/* (fichier renommé en -v2 le 19/10/2026 : la V1 est servie « immutable » un an sous l autre nom) Page Messagerie professionnelle (/messagerie-professionnelle-hebergement), 18/10/2026 : fiche IA de la page 150465.
   Seulement ce qui est propre à cette page : le reste vient de ad-socle.css et ad-composants.css.
   Passe Impeccable du 19/10/2026, forme seule (texte inchangé) : les situations en liste à filets (plus de seconde grille de cartes),
   la carte « Selon le projet » pleine avec une pastille d'état sans bordure (DESIGN §3), le détail technique à 15 px, les titres des
   raisons en Schibsted, la planète pour lampe dans la bande de nuit (DESIGN §6 : lampe et sceau), la FAQ à 860 px comme Mail-ADNS,
   le paragraphe de fin à 62 ch. */

/* ouverture : le texte à gauche, une boîte de réception dessinée à droite (aucun texte dans le dessin) */
.ad-msg-ouverture { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ad-msg-tete { display: grid; gap: var(--ad-e-5); justify-items: start; }
.ad-msg-tete > p { margin: 0; }
.ad-msg-etiquette { font-size: var(--ad-t-legende); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ad-texte-discret); }
.ad-msg-titre { text-wrap: balance; }
.ad-msg-chapeau { max-width: 36em; text-wrap: pretty; }
.ad-msg-pour { max-width: 38em; text-wrap: pretty; }
.ad-msg-tete .ad-actions { margin-top: var(--ad-e-2); }
.ad-msg-visuel { width: 100%; max-width: 480px; justify-self: end; }
.ad-msg-dessin { display: block; width: 100%; height: auto; }
.ad-msg-dessin .d-cadre { fill: var(--ad-surface); stroke: var(--ad-filet-fort); stroke-width: 1; }
.ad-msg-dessin .d-filet { stroke: var(--ad-filet); stroke-width: 1; }
.ad-msg-dessin .d-point { fill: var(--ad-filet-fort); }
.ad-msg-dessin .d-surligne { fill: var(--ad-c-soleil-pale); }   /* le surlignage pâle d'un détail (charte §1.2) */
.ad-msg-dessin .d-enveloppe { fill: var(--ad-surface); stroke: var(--ad-texte); stroke-width: 2.5; }
.ad-msg-dessin .d-trait { fill: none; stroke: var(--ad-texte); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ad-msg-dessin .d-barre-forte { fill: var(--ad-texte); opacity: .78; }
.ad-msg-dessin .d-barre { fill: var(--ad-filet-fort); }
.ad-msg-dessin .d-sceau { fill: var(--ad-texte); }
.ad-msg-dessin .d-coche { fill: none; stroke: var(--ad-fond); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* situations : quatre lignes à filet, l'icône puis le texte, sur deux colonnes au bureau — une liste, pas des cartes
   (la seule grille de cartes de la page est celle des apports, juste après) */
.ad-msg-situations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); row-gap: 0; }
.ad-msg-situation { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ad-e-4); row-gap: var(--ad-e-2); align-items: start;
  padding-block: var(--ad-e-6); border-top: 1px solid var(--ad-filet-fort); }
.ad-msg-situation > .bi { grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1; margin-top: 0.1em; }
.ad-msg-situation .ad-titre-3, .ad-msg-situation p { margin: 0; text-wrap: pretty; }
.ad-msg-situation p { grid-column: 2; }
.ad-msg-situation:nth-last-child(-n+2) { border-bottom: 1px solid var(--ad-filet-fort); }

/* ce qui est inclus : trois cartes ; la troisième dit qu'elle dépend du projet */
.ad-msg-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ad-e-6); }
.ad-msg-carte { display: grid; gap: var(--ad-e-3); align-content: start; padding: var(--ad-e-6); border-radius: var(--ad-r-3);
  background: var(--ad-surface); border: 1px solid var(--ad-filet); }
.ad-msg-carte > .bi { font-size: 1.5rem; line-height: 1; }
.ad-msg-carte .ad-titre-3, .ad-msg-carte p { margin: 0; text-wrap: pretty; }
/* carte avec détail : en colonne, le détail posé au bas de la carte (même hauteur d'une carte à l'autre) ; la technique en second niveau */
.ad-msg-carte:has(.ad-msg-detail) { display: flex; flex-direction: column; }
.ad-msg-carte:has(.ad-msg-detail) > .bi { align-self: flex-start; }
.ad-msg-detail { margin-top: auto !important; padding-top: var(--ad-e-3); border-top: 1px solid var(--ad-filet);
  font-size: var(--ad-t-petit); line-height: var(--ad-il-petit); color: var(--ad-texte-discret); }
/* « Selon le projet » : la même carte que les autres, un filet plus marqué ; l'état en pastille de fond neige sans bordure (DESIGN §3),
   posée en haut à droite, à hauteur de l'icône : le titre reste aligné avec ceux des deux autres cartes */
.ad-msg-carte--projet { position: relative; border-color: var(--ad-filet-fort); }
.ad-msg-carte__etiquette { position: absolute; top: var(--ad-e-6); right: var(--ad-e-6); margin: 0; padding: 4px 10px; border-radius: 999px;
  background: var(--ad-surface-creuse); color: var(--ad-texte-doux); font-size: var(--ad-t-legende); line-height: var(--ad-il-legende); font-weight: 600; letter-spacing: 0.02em; }

/* parcours après la prise de contact : la frise simple de l'accueil, quatre étapes */
@media (min-width: 961px) { .ad-msg-frise { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ad-msg-limite { max-width: 62ch; }

/* pourquoi (nuit) : le titre, le principe et la planète pour lampe à gauche, trois raisons à droite */
.ad-msg-pourquoi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ad-msg-pourquoi__tete { display: grid; gap: var(--ad-e-5); justify-items: start; }
.ad-msg-pourquoi__tete > p { margin: 0; max-width: 34em; }
.ad-msg-pourquoi .ad-titre-2 { text-wrap: balance; }
/* la planète entière, sous le propos, jamais devant un texte (DESIGN §6 : 214 px, 168 sous 1 100, 150 sous 960) ; anneau clair par les rôles de nuit */
.ad-msg-lampe { width: 214px; margin-top: var(--ad-e-4); }
.ad-msg-lampe svg { display: block; width: 100%; height: auto; }
.ad-msg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ad-msg-points > li { display: grid; gap: var(--ad-e-2); padding-block: var(--ad-e-5); border-top: 1px solid var(--ad-filet-fort); }
.ad-msg-points > li:last-child { border-bottom: 1px solid var(--ad-filet-fort); }
.ad-msg-points p { margin: 0; text-wrap: pretty; }
/* le titre de chaque raison dans la voix du titrage, comme les étapes de la chaîne de l'accueil */
.ad-msg-point__titre { font-family: var(--ad-police-titre); font-size: var(--ad-t-titre-3); font-weight: 560; letter-spacing: -0.01em; line-height: 1.25; }

/* questions : la largeur de la FAQ de Mail-ADNS, la question et son signe restent proches */
.ad-msg-faq { max-width: 860px; }

/* fin */
#contact .ad-titre-2 { text-wrap: balance; }
#contact .ad-fonction__texte p { max-width: 62ch; }

@media (max-width: 1100px) {
  .ad-msg-lampe { width: 168px; }
}
@media (max-width: 960px) {
  .ad-msg-ouverture, .ad-msg-pourquoi { grid-template-columns: minmax(0, 1fr); }
  .ad-msg-visuel { justify-self: start; max-width: 420px; }
  .ad-msg-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-msg-lampe { width: 150px; }
}
@media (max-width: 640px) {
  .ad-msg-situations, .ad-msg-cartes { grid-template-columns: minmax(0, 1fr); }
  .ad-msg-cartes { gap: var(--ad-e-4); }
  .ad-msg-situation:nth-last-child(2) { border-bottom: 0; }
  .ad-msg-carte { padding: var(--ad-e-5); }
  .ad-msg-visuel { max-width: 320px; }
}