/* Règles .ia-badge de ce fichier : sans usage depuis D23 (2026-10-30), gardées avec les mises en page validées par Pierre. */
/* My Love Coach — mises en page tablette et ordinateur (MLC-07, point 5, Fable, 2026-10-30).
   mlc.css reste la conception mobile d'abord (390 px) et n'est pas modifié (sha256 contrôlé par socle.spec.ts).
   Ici : à partir de 768 px la feuille de papier prend toute la largeur (plus de « téléphone » au milieu de l'écran),
   le contenu se centre dans une colonne de --maxw avec des gouttières --gx, et les blocs se mettent côte à côte :
   couverture en deux colonnes (texte + silhouette), cartes de prix et de sujets en grille, étapes en trois colonnes.
   Identité MLC-01 conservée : papier, lumière, grain, Newsreader en grand, cartes en léger relief, corail pour les ¿ ?. */

/* ---------- Tablette : 768 px et plus ---------- */
@media (min-width: 768px) {
  :root { --gx: 40px; --maxw: 100%; --figw: 300px; }
  .screen { max-width: none; margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
  /* Conteneur centré sans élément enveloppant : la gouttière grandit quand l'écran dépasse --maxw. */
  .top, section, .cover, .hero-text, .wrap, .foot {
    padding-left: max(var(--gx), calc((100% - var(--maxw)) / 2));
    padding-right: max(var(--gx), calc((100% - var(--maxw)) / 2));
  }
  .top { padding-top: 22px; padding-bottom: 12px; }
  .top img { height: 34px; }
  .top a:last-child { font-size: 17px; }
  section { padding-top: 44px; }
  h1 { font-size: 48px; text-wrap: balance; }
  h2 { font-size: 34px; text-wrap: balance; }
  .deck { font-size: 21px; }
  .lead { font-size: 20px; max-width: 42ch; }
  .cta { max-width: 400px; }
  section > .cta { margin-left: auto; margin-right: auto; }

  /* Couverture : le texte à gauche, la silhouette détourée debout à droite, posée sur la ligne de base de la couverture. */
  .cover { display: grid; grid-template-columns: minmax(0, 1fr) var(--figw); column-gap: 32px; align-items: start; padding-top: 18px; }
  .cover > :not(.figure) { grid-column: 1; }
  .cover .figure, .cover.compact .figure {
    grid-column: 2; grid-row: 1 / span 24; position: relative; right: auto; top: auto; width: 100%; height: 100%;
    min-height: 440px; align-self: stretch; pointer-events: none;
  }
  /* La silhouette remplit sa colonne du haut en bas (les PNG détourés ont des marges transparentes : le recadrage latéral ne coupe rien). */
  .cover .figure img { object-fit: cover; object-position: 50% 0%; }
  .cover .figure::after { height: 90px; }
  /* Mention IA (icône UE, D22) : 24 px, toujours en bas à droite de la partie visible de la photo. */
  .ia-badge, .cover .figure img.ia-badge, .cover.compact .figure img.ia-badge, .hero img.ia-badge, .photo-card img.ia-badge, .wrapfig img.ia-badge { height: 24px; }
  .wrapfig .ia-badge { right: 8px; }
  .cover .figure .ia-badge, .cover.compact .figure .ia-badge { top: auto; bottom: 14px; left: auto; right: 12px; pointer-events: none; }
  .cover h1, .cover.compact h1, .cover.compact h2 { max-width: none; font-size: 50px; }
  .cover .lead, .cover.compact .lead { max-width: 40ch; font-size: 19px; }
  .cover .chat-wrap { max-width: 520px; }
  .cover .cta { margin-left: 0; }
  .cover .cta-note { text-align: left; }
  .cover .demo { text-align: left !important; }
  .cover .overlap { max-width: 560px; }

  /* Héros pleine largeur (Mi ex, Mi pareja, résultat du quiz) : image plus haute, texte remonté dans la lumière. */
  .hero img { height: min(52vh, 520px); object-position: 50% 30%; }
  .hero-text { margin-top: -140px; max-width: 820px; }
  .hero .say { left: max(var(--gx), calc((100% - var(--maxw)) / 2)); top: 30px; max-width: 440px; }
  .hero .ia-badge { left: auto; top: auto; bottom: 152px; right: 16px; }

  /* Grilles : sujets, listes de consejos, cartes de prix. */
  .topics { gap: 20px; }
  .topic { padding: 24px 22px; }
  .topic strong { font-size: 26px; }
  section > div:has(> a.topic), section > div:has(> article.topic) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
  section:has(> .price) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  section:has(> .price) > .price { margin-bottom: 0; }
  section:has(> .price) > .cta, section:has(> .price) > .cta-note { grid-column: 1 / -1; }

  /* Étapes : trois colonnes, le numéro corail au-dessus ; la figure « Cómo funciona » prend la colonne de droite. */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
  .steps li { display: block; border-top: 2px solid var(--border); padding: 18px 0 0; }
  .steps li::before { display: block; margin-bottom: 10px; font-size: 34px; }
  section:has(> .wrapfig) { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 36px; }
  section:has(> .wrapfig) > :not(.wrapfig) { grid-column: 1; }
  section:has(> .wrapfig) > .wrapfig { grid-column: 2; grid-row: 1 / span 4; float: none; width: 100%; height: auto; aspect-ratio: 3 / 4; margin: 0; align-self: end; shape-outside: none; }
  /* En tablette, les étapes à côté de la figure restent en colonne (trois colonnes de 150 px seraient illisibles). */
  section:has(> .wrapfig) .steps, .consejo-cuerpo .steps { grid-template-columns: 1fr; gap: 0; }
  section:has(> .wrapfig) .steps li, .consejo-cuerpo .steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
  section:has(> .wrapfig) .steps li::before, .consejo-cuerpo .steps li::before { display: inline; margin: 0; font-size: 30px; }

  /* Pages de lecture : une colonne confortable, jamais une ligne de 150 caractères. */
  .consejo-cuerpo, [data-legal], section > p:not(.cta-note), section > ul, section > article.topic, #quiz-stage, #resultado, .result { max-width: 72ch; }
  section > .cta-note { max-width: none; }
  .consejo-cuerpo { font-size: 19px; }
  #quiz-stage .signs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quiz-q > div { max-width: 640px; }
  .coach { max-width: 720px; }
  .foot { padding-top: 34px; padding-bottom: 54px; }
}

/* ---------- Ordinateur : 1024 px et plus ---------- */
@media (min-width: 1024px) {
  :root { --gx: 48px; --maxw: 1120px; --figw: 42%; }
  .top { padding-top: 26px; padding-bottom: 14px; }
  .top img { height: 36px; }
  section { padding-top: 56px; }
  h1 { font-size: 56px; }
  h2 { font-size: 38px; margin-bottom: 18px; }
  .deck { font-size: 22px; }
  .cover { column-gap: 48px; padding-top: 24px; }
  .cover h1, .cover.compact h1 { font-size: 60px; }
  .cover .figure, .cover.compact .figure { min-height: 560px; }
  .cover .chat-wrap { max-width: 540px; margin-top: 38px; }
  .chat { padding: 20px 20px 16px; }
  .bubble { font-size: 25px; }
  .topics { gap: 24px; }
  .topic { padding: 28px 26px; }
  .topic strong { font-size: 28px; }
  section > div:has(> a.topic), section > div:has(> article.topic) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px !important; }
  section:has(> .price) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .price { padding: 22px; }
  .price .amount { font-size: 40px; }
  .steps { gap: 36px; }
  section:has(> .wrapfig) { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 48px; }
  section:has(> .wrapfig) .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  section:has(> .wrapfig) .steps li { display: block; border-top: 2px solid var(--border); padding: 18px 0 0; }
  section:has(> .wrapfig) .steps li::before { display: block; margin-bottom: 10px; font-size: 34px; }
  .hero-text { max-width: 880px; }
  .hero img { height: min(60vh, 600px); }
  .hero-text { margin-top: -170px; }
  .hero .ia-badge { bottom: 182px; }
  .hero .say { max-width: 480px; top: 40px; }
  .foot { font-size: 16px; }
}

/* ---------- Grand écran : 1440 px et plus ---------- */
@media (min-width: 1440px) {
  :root { --maxw: 1200px; --gx: 64px; }
  .cover h1, .cover.compact h1 { font-size: 64px; }
}