/*
 * Page « Modèle de livret d'accueil gratuit » (06/10/2026). Composants
 * communs : stitch.css ; le document de l'exemple : document.css.
 * Préfixe `mlp-` (modèle livret, page).
 */
.mlp-hero { padding-block: 3rem 3.5rem; background: linear-gradient(180deg, var(--st-conteneur-bas), var(--st-surface)); }
.mlp-hero__grille { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .mlp-hero__grille { grid-template-columns: 1.6fr 1fr; gap: 4rem; padding-block: 1.5rem; } }
.mlp-hero__texte { display: grid; gap: 1.25rem; justify-items: start; }
.mlp-hero__texte .st-titre-display, .mlp-hero__texte .st-texte-lg { margin: 0; }
.mlp-appel { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.mlp-appel--centre { justify-content: center; margin-top: 2rem; }
.mlp-lien { color: var(--st-primaire-conteneur); font-weight: 600; text-underline-offset: 3px; }
.mlp-note { margin: 0; font-size: 13px; line-height: 20px; color: var(--st-texte-variant); }
.mlp-atouts { list-style: none; margin: 0; padding: 1.5rem; display: grid; gap: 1rem; border-radius: var(--st-rayon-xl);
  background: #fff; border: 1px solid rgba(196, 198, 205, .5); box-shadow: var(--st-ombre-2); }
.mlp-atouts li { display: flex; align-items: center; gap: .75rem; font-weight: 500; color: var(--st-primaire-conteneur); }
.mlp-atouts .material-symbols-outlined { flex: none; inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center;
  border-radius: var(--st-rayon-md); background: var(--st-secondaire-conteneur); color: var(--st-sur-secondaire-conteneur); }

.mlp-section { padding-block: 4rem; }
.mlp-section--sable { background: var(--st-conteneur-bas); }

.mlp-rubriques { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mlp-rubriques { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mlp-rubriques { grid-template-columns: repeat(4, 1fr); } }
.mlp-rubrique { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border-radius: var(--st-rayon-lg);
  background: #fff; border: 1px solid rgba(196, 198, 205, .5); box-shadow: var(--st-ombre-1); }
.mlp-rubrique p { margin: 0; color: var(--st-texte-variant); }
.mlp-rubrique .mlp-lien { margin-top: auto; font-size: 14px; }
.mlp-icone { inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border-radius: var(--st-rayon-md);
  background: var(--st-primaire-conteneur); color: #fff; }
.mlp-encadre { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.5rem; padding: 1rem 1.25rem;
  border-radius: var(--st-rayon-lg); background: rgba(242, 220, 192, .45); color: var(--st-texte); }
.mlp-encadre p { margin: 0; }
.mlp-encadre .material-symbols-outlined { color: var(--st-secondaire); }

/* L'exemple : le vrai document, sur une « feuille » ; hauteur bornée sur
   petit écran, avec un fondu (le texte reste entier dans la page). */
.mlp-exemple { margin: 0; display: grid; gap: .75rem; justify-items: center; }
.mlp-exemple__feuille { position: relative; inline-size: 100%; max-inline-size: 46rem; padding: 2.5rem 2.75rem;
  background: #fff; border-radius: var(--st-rayon); box-shadow: var(--st-ombre-2); border: 1px solid rgba(196, 198, 205, .5); }
@media (max-width: 639px) {
  .mlp-exemple__feuille { padding: 1.5rem 1.1rem; max-block-size: 44rem; overflow: hidden; }
  .mlp-exemple__feuille::after { content: ""; position: absolute; inset: auto 0 0; block-size: 6rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
  .mlp-exemple__feuille .ml-document .ml-ligne { grid-template-columns: 1fr; gap: 0; }
  .mlp-exemple__feuille .ml-wifi { grid-template-columns: 1fr; }
  .mlp-exemple__feuille .ml-emplacement-qr { inline-size: 8rem; }
  .mlp-exemple__feuille .ml-autres { grid-template-columns: 1fr; }
}
.mlp-exemple figcaption { font: 600 12px/16px var(--st-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--st-secondaire); }

.mlp-pays { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mlp-pays { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mlp-pays { grid-template-columns: repeat(4, 1fr); } }
.mlp-pays__carte { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border-radius: var(--st-rayon-lg);
  background: #fff; border: 1px solid rgba(196, 198, 205, .5); }
.mlp-pays__carte p { margin: 0; color: var(--st-texte-variant); }
.mlp-pays__carte--autre { background: var(--st-conteneur-bas); border-style: dashed; }
.mlp-pays__choix { font-size: 13px; }
.mlp-numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mlp-numeros li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem .65rem; border-radius: var(--st-rayon);
  background: var(--st-conteneur-bas); font-size: 14px; }
.mlp-numeros strong { color: var(--st-primaire-conteneur); }

.mlp-comparatif { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--st-rayon-lg);
  border: 1px solid rgba(196, 198, 205, .6); overflow: hidden; font-size: 14px; line-height: 21px; }
.mlp-comparatif th, .mlp-comparatif td { padding: .85rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--st-conteneur-haut); }
.mlp-comparatif tbody tr:last-child th, .mlp-comparatif tbody tr:last-child td { border-bottom: 0; }
.mlp-comparatif thead th { font: 600 13px/18px var(--st-sans); color: var(--st-primaire-conteneur); background: var(--st-conteneur-bas); }
.mlp-comparatif thead th:last-child { background: var(--st-primaire-conteneur); color: #fff; }
.mlp-comparatif tbody th { font-weight: 600; color: var(--st-texte); inline-size: 26%; }
.mlp-comparatif td:last-child { color: var(--st-primaire-conteneur); }
.mlp-comparatif a { font-weight: 600; }
@media (max-width: 639px) {
  .mlp-comparatif thead { display: none; }
  .mlp-comparatif, .mlp-comparatif tbody, .mlp-comparatif tr, .mlp-comparatif th, .mlp-comparatif td { display: block; inline-size: auto; }
  .mlp-comparatif tbody th { inline-size: auto; padding-bottom: .25rem; border-bottom: 0; background: var(--st-conteneur-bas); }
  .mlp-comparatif td { padding-block: .45rem; border-bottom: 0; }
  .mlp-comparatif td::before { content: attr(data-titre); display: block; font: 600 11px/16px var(--st-sans);
    letter-spacing: .04em; text-transform: uppercase; color: var(--st-texte-variant); }
  .mlp-comparatif tr { border-bottom: 1px solid var(--st-conteneur-haut); padding-bottom: .5rem; }
  .mlp-comparatif tbody tr:last-child { border-bottom: 0; }
}

.mlp-final { padding-block: 4rem; background: var(--st-primaire-conteneur); color: var(--st-surface); text-align: center; }
.mlp-final .st-conteneur { display: grid; gap: 1rem; justify-items: center; }
.mlp-final .st-titre-lg { color: var(--st-surface); }
.mlp-final p { margin: 0; color: rgba(252, 249, 244, .85); }
.mlp-final__note { font-size: 13px; }
.mlp-final__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.mlp-final__liens a { color: var(--st-surface); font-weight: 500; }