/* =============================================================================
   moodboard.css — six partis pris graphiques, dessinés.
   Chaque vignette est une mini-affiche : ce sont ses propres réglages de typo,
   de couleur et de composition qui font la démonstration. Les familles sont
   génériques (serif / sans-serif / monospace) : ce qui compte est le contraste
   entre les partis pris, pas la police exacte.
   ========================================================================== */

/* ---------------------------------------------------- les leviers, en amont */
.leviers{list-style:none;margin:0;padding:0}
.levier{display:grid;grid-template-columns:54px 1fr;gap:0 20px;
   padding:22px 0;border-top:1px solid var(--trait)}
.levier:first-child{border-top:0;padding-top:0}
.levier-num{font-family:var(--font-title);font-size:1.3rem;color:var(--amu-purple);line-height:1.2}
.levier h3{font-family:var(--font-medium);font-size:1.1rem;margin-bottom:8px}
.levier-quoi{font-family:var(--font-medium);color:var(--encre);margin-bottom:8px}
.levier-comment{color:var(--gris-txt);margin-bottom:0}

.brief-liste{margin:0;padding-left:1.2em}
.brief-liste li{margin-bottom:12px;line-height:1.6;color:var(--gris-txt)}
.brief-liste strong{color:var(--encre);font-family:var(--font-medium);font-weight:400}

.relire{list-style:none;margin:0;padding:0}
.relire li{position:relative;padding:11px 0 11px 26px;font-size:.96rem;line-height:1.55;
   color:var(--gris-txt);border-bottom:1px solid var(--trait)}
.relire li::before{content:"?";position:absolute;left:0;top:11px;
   font-family:var(--font-title);color:var(--amu-purple-fonce)}

/* ------------------------------------------------------------- le moodboard */
.moodboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
   gap:clamp(20px,2.6vw,32px);margin-top:clamp(22px,3vw,34px)}
.mb-carte{display:flex;flex-direction:column;min-width:0}

/* la vignette : un support au format A5 debout */
.mb-affiche{
  aspect-ratio:1 / 1.414;display:flex;flex-direction:column;
  padding:var(--mb-pad,22px);overflow:hidden;position:relative;
  background:var(--mb-fond);color:var(--mb-encre);
  justify-content:var(--mb-justif,space-between);
  align-items:var(--mb-align,flex-start);
  text-align:var(--mb-texte,left);
}
.mb-sur{font-family:var(--mb-font-sur,inherit);font-size:var(--mb-sur-taille,11px);
  letter-spacing:var(--mb-sur-espace,.1em);text-transform:var(--mb-sur-casse,uppercase);
  color:var(--mb-sur-couleur,currentColor);opacity:var(--mb-sur-opacite,1);z-index:2}
.mb-titre{font-family:var(--mb-font);font-size:var(--mb-titre-taille,30px);
  line-height:var(--mb-titre-inter,1.02);letter-spacing:var(--mb-titre-espace,-.02em);
  font-weight:var(--mb-titre-graisse,700);text-transform:var(--mb-titre-casse,none);
  color:var(--mb-titre-couleur,currentColor);z-index:2;
  margin:var(--mb-titre-marge,auto 0)}
.mb-bas{font-family:var(--mb-font-sur,inherit);font-size:var(--mb-bas-taille,11px);
  letter-spacing:var(--mb-bas-espace,.04em);z-index:2;opacity:var(--mb-bas-opacite,1)}

/* 01 · institutionnel — une linéale neutre, une couleur, une grille qui se voit */
.mb-institutionnel{--mb-fond:#fff;--mb-encre:#1F63DE;--mb-font:system-ui,sans-serif;
  --mb-titre-taille:28px;--mb-titre-graisse:600;--mb-pad:24px}
.mb-institutionnel .mb-affiche{border:1px solid #d9d3e6}
.mb-institutionnel .mb-titre{color:#111}
.mb-institutionnel .mb-affiche::after{content:"";position:absolute;left:24px;right:24px;
  top:52%;height:1px;background:#1F63DE}

/* 02 · premium — capitales espacées, marges énormes, centrage assumé */
.mb-premium{--mb-fond:#11100e;--mb-encre:#cfc6b4;--mb-font:Georgia,"Times New Roman",serif;
  --mb-titre-taille:19px;--mb-titre-graisse:400;--mb-titre-casse:uppercase;
  --mb-titre-espace:.24em;--mb-titre-inter:1.9;--mb-align:center;--mb-texte:center;
  --mb-pad:30px;--mb-sur-opacite:.45;--mb-bas-espace:.18em;--mb-bas-opacite:.6}

/* 03 · jeune — un grotesque énorme qui touche les bords, deux couleurs qui vibrent */
.mb-jeune{--mb-fond:#FFE800;--mb-encre:#111;--mb-font:"Arial Black","Helvetica Neue",sans-serif;
  --mb-titre-taille:52px;--mb-titre-inter:.82;--mb-titre-espace:-.045em;
  --mb-titre-casse:uppercase;--mb-pad:16px}
.mb-jeune .mb-titre{color:#F5003C;margin-left:-4px}
.mb-jeune .mb-sur{background:#111;color:#FFE800;padding:3px 7px}

/* 04 · artisanal — romain épais, couleurs de matière, asymétrie */
.mb-artisanal{--mb-fond:#efe6d6;--mb-encre:#5a4632;--mb-font:Georgia,serif;
  --mb-titre-taille:27px;--mb-titre-graisse:400;--mb-titre-inter:1.18;--mb-pad:24px;
  --mb-sur-casse:none;--mb-sur-espace:.02em}
.mb-artisanal .mb-titre{font-style:italic;padding-left:18px}
.mb-artisanal .mb-affiche::before{content:"";position:absolute;left:24px;top:38%;
  width:1px;height:26%;background:#a8895f}

/* 05 · tech — linéale géométrique, blocs réguliers, un seul accent */
.mb-tech{--mb-fond:#f6f7fb;--mb-encre:#4a5068;--mb-font:system-ui,sans-serif;
  --mb-titre-taille:26px;--mb-titre-graisse:600;--mb-titre-espace:-.03em;--mb-pad:22px}
.mb-tech .mb-titre{color:#1b1c2e}
.mb-tech .mb-sur{color:#6C4BF4}
.mb-tech .mb-bas{background:#6C4BF4;color:#fff;padding:7px 13px;font-size:10.5px}
.mb-tech .mb-affiche::after{content:"";position:absolute;right:-30px;top:16%;
  width:96px;height:96px;border:14px solid #e3e1f6;border-radius:50%}

/* 06 · culturel — la typo devient l'image, bichromie franche */
.mb-culturel{--mb-fond:#12123f;--mb-encre:#00E0B0;--mb-font:"Helvetica Neue",sans-serif;
  --mb-titre-taille:40px;--mb-titre-inter:.92;--mb-titre-espace:-.04em;--mb-pad:18px}
.mb-culturel .mb-titre{transform:rotate(-4deg);transform-origin:left center}
.mb-culturel .mb-bas{border-top:2px solid #00E0B0;padding-top:7px;width:100%}

/* -------------------------------------------------------- le texte à côté */
.mb-texte{padding-top:16px}
.mb-texte h3{font-family:var(--font-title);font-size:1.15rem;letter-spacing:-.02em;margin-bottom:10px}
.mb-ligne{font-size:.93rem;line-height:1.5;color:var(--gris-txt);margin-bottom:8px}
.mb-etiq{display:inline-block;font-family:var(--font-medium);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre);
  background:var(--amu-yellow);padding:2px 7px;margin-right:6px;vertical-align:1px}
.mb-etiq-rouge{background:#fbdcdc;color:#96232a}

.mb-leviers{list-style:none;margin:14px 0 0;padding:0}
.mb-leviers li{font-size:.9rem;line-height:1.5;color:var(--gris-txt);
  padding:8px 0;border-top:1px solid var(--trait)}
.mb-levier{display:block;font-family:var(--font-medium);color:var(--encre);font-size:.86rem}
.mb-piege{margin:14px 0 0;font-size:.9rem;line-height:1.5;color:var(--gris-txt)}

@media(max-width:560px){
  .levier{grid-template-columns:40px 1fr}
  .mb-jeune{--mb-titre-taille:42px}
  .mb-culturel{--mb-titre-taille:34px}
}