/* encarts.css : les encarts publicitaires des sites M2 (socle mutualisé).
   Gabarit et règles : apps/_shared/encarts.py. Script : js/encarts.js.

   PIÈGE : la TAILLE de la boîte n'est pas ici. Elle est posée en style en ligne
   par encarts.py (max-width + aspect-ratio), pour qu'une feuille en retard ou
   périmée ne puisse jamais faire sauter la page à l'arrivée d'un visuel.
   Ce fichier ne porte que l'habillage.

   COULEURS : le repli maison lit les variables de marque du bandeau newsletter
   (--m-nl-*, variantes .m-nl--zbs, --lbp... de nl-bandeau.css), mêmes valeurs
   que domains.php. Chaque lecture porte un repli neutre : une page qui ne
   charge pas nl-bandeau.css sert un repli gris, jamais un repli sans style. */

.m-encart-zone { box-sizing: border-box; width: 100%; padding: 16px 16px 0; }
/* Une marge SOUS la bannière du haut aussi : sans elle, elle se pose à même
   le cartouche de titre des marques qui en ont un (A Free Lunch, Brief
   Patrimonial), constaté au rendu le 25/09/2026. */
.m-encart-zone--haut { padding-bottom: 16px; }
.m-encart-zone--bas { padding: 24px 16px 8px; }
.m-encart-zone--contenu { padding: 0; margin: 28px 0; }

.m-encart { position: relative; box-sizing: border-box; width: 100%; margin: 0 auto;
            overflow: hidden; border-radius: 6px; font-family: inherit; }
.m-encart *, .m-encart *::before, .m-encart *::after { box-sizing: border-box; }

/* ── Le repli maison : notre newsletter, ou l'espace proposé aux annonceurs ── */
.m-encart__maison { display: flex; flex-direction: column; align-items: center;
                    justify-content: center; gap: 6px; width: 100%; height: 100%;
                    padding: 12px 18px; text-align: center; text-decoration: none;
                    background: var(--m-nl-fond, #F4F4F1);
                    border: 1px solid var(--m-nl-bordure, #E2E2DC); border-radius: 6px;
                    color: var(--m-nl-texte, #1A1A1A); }
.m-encart a.m-encart__maison:hover,
.m-encart a.m-encart__maison:focus { text-decoration: none; color: var(--m-nl-texte, #1A1A1A); }
.m-encart a:focus-visible { outline: 2px solid var(--m-nl-kicker, #1A1A1A); outline-offset: -2px; }
.m-encart__marque { font-family: var(--font-heading, inherit); font-weight: 800;
                    font-size: 1.6rem; line-height: 1.15; color: var(--m-nl-kicker, #1A1A1A); }
.m-encart__accroche { font-size: 0.95rem; line-height: 1.4; max-width: 60ch; opacity: 0.85; }
.m-encart__bouton { display: inline-block; margin-top: 4px; padding: 8px 16px;
                    border-radius: 6px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
                    background: var(--m-nl-btn-fond, #1A1A1A); color: var(--m-nl-btn-texte, #FFFFFF); }
.m-encart__maison:hover .m-encart__bouton { opacity: 0.9; }

/* Le pavé : plus petit, tout sur la hauteur. */
.m-encart--contenu .m-encart__marque { font-size: 1.3rem; }

/* La bannière de bas de page : 8 fois plus large que haute, tout sur une ligne. */
.m-encart--bas .m-encart__maison { flex-direction: row; gap: 16px; padding: 8px 18px; }
.m-encart--bas .m-encart__marque { font-size: 1.1rem; }
.m-encart--bas .m-encart__accroche { font-size: 0.88rem; }
.m-encart--bas .m-encart__bouton { margin-top: 0; padding: 6px 12px; font-size: 0.82rem; }

/* ── Une campagne servie ── */
.m-encart--pub { background: #F4F4F2; }
.m-encart__lien, .m-encart__cadre { display: block; width: 100%; height: 100%; }
.m-encart__visuel { display: block; width: 100%; height: 100%; object-fit: contain; }
/* La mention « Publicité » : la loi (LCEN, art. 20) exige qu'une publicité en
   ligne soit identifiable comme telle. En surimpression dans un coin, pour ne
   pas changer la hauteur de la boîte. */
.m-encart__mention { position: absolute; top: 0; right: 0; padding: 2px 6px;
                     font-size: 10px; line-height: 1.4; letter-spacing: 0.04em;
                     text-transform: uppercase; color: #555;
                     background: rgba(255, 255, 255, 0.85); border-bottom-left-radius: 4px;
                     pointer-events: none; }

/* ── Écran étroit : la boîte garde ses proportions, le repli se resserre ── */
@media (max-width: 640px) {
  .m-encart-zone { padding: 12px 12px 0; }
  .m-encart-zone--haut { padding-bottom: 12px; }
  .m-encart-zone--bas { padding: 16px 12px 8px; }
  .m-encart-zone--contenu { padding: 0; }
  .m-encart--haut .m-encart__maison { gap: 4px; padding: 6px 12px; }
  .m-encart--haut .m-encart__marque { font-size: 1.05rem; }
  .m-encart--haut .m-encart__accroche,
  .m-encart--bas .m-encart__accroche { display: none; }
  .m-encart--haut .m-encart__bouton { margin-top: 0; padding: 4px 10px; font-size: 0.78rem; }
  .m-encart--bas .m-encart__maison { gap: 10px; padding: 4px 10px; }
  .m-encart--bas .m-encart__marque { font-size: 0.9rem; }
  .m-encart--bas .m-encart__bouton { padding: 3px 8px; font-size: 0.72rem; }
}

/* Une publicité ne s'imprime pas. */
@media print { .m-encart-zone { display: none; } }