/* ===== rubriques-mobile.css ===== */
/* Sur téléphone : image Facebook complète, puis texte de présentation. */
.mobile-rubrique-image { display: none !important; }

@media (max-width: 760px) {
  .poems-hero,
  .citations-hero,
  .hero {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    background: #11183d;
  }

  /* L’en-tête est fixe sur mobile : ce décalage empêche qu’il masque
     la partie supérieure de l’image panoramique. */
  main > .poems-hero,
  main > .citations-hero,
  main > .hero {
    margin-top: 82px !important;
  }

  .poems-hero::before,
  .poems-hero::after,
  .citations-hero::before,
  .citations-hero::after,
  .hero::before,
  .hero::after,
  .hero-overlay { display: none !important; }

  .poems-hero > img:not(.mobile-rubrique-image),
  .citations-hero > img:not(.mobile-rubrique-image) { display: none !important; }

  .poems-hero > .mobile-rubrique-image,
  .citations-hero > .mobile-rubrique-image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1800 / 945;
    flex: none;
    object-fit: contain !important;
    object-position: center !important;
  }

  .hero > .mobile-rubrique-image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1800 / 945;
    flex: none;
    object-fit: contain !important;
    object-position: center !important;
  }

  .poems-hero-copy,
  .citations-hero-copy {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 25px 20px 31px !important;
    color: #fffaf4;
    background: linear-gradient(145deg, #11183d, #24183e);
    transform: none !important;
  }

  .hero-copy {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 25px 20px 38px !important;
    color: #fffaf4;
    background: linear-gradient(145deg, #11183d, #24183e);
    transform: none !important;
  }

  /* L’ancien accueil faisait remonter les cartes sur le bandeau.
     Avec le texte placé sous l’image, elles doivent reprendre le flux normal. */
  .hero + .univers {
    position: relative;
    z-index: 1;
    width: calc(100% - 24px);
    margin: 24px auto 0 !important;
  }

  .poems-hero-copy h1,
  .citations-hero-copy h1 {
    margin-top: 7px;
    font-size: var(--taille-titre-rubrique-active) !important;
    line-height: 1.02 !important;
  }

  .poems-hero-copy > p:last-child,
  .citations-hero-copy > p:last-child {
    margin-bottom: 0;
    font-size: 1rem !important;
    line-height: 1.6;
  }
}

/* ======================================================================
   EXTENSION DE L'ACCUEIL
   Ces classes sont propres à index.html : elles ne modifient aucune
   rubrique ni aucune page intérieure déjà validée.
   ====================================================================== */
.home-personalized,
.home-emotions,
.home-favorites {
  padding: 56px max(2.2%, 22px);
  background: #020d29;
}

.home-emotions {
  background: radial-gradient(circle at 88% 0, #311640 0, transparent 34%), #07122f;
}

.home-favorites {
  background: radial-gradient(circle at 12% 0, #35143f 0, transparent 36%), #020d29;
}

.home-section-heading,
.home-personalized-grid,
.home-emotion-links,
.home-favorites-grid {
  width: min(1700px, 100%);
  margin-inline: auto;
}

.home-section-heading {
  margin-bottom: 24px;
}

.home-section-heading h2,
.daily-section h2 {
  margin: 0;
  color: #fffaf4;
  font: 700 clamp(30px, 3vw, 46px)/1.08 var(--police-titres);
  letter-spacing: -.025em;
}

.home-section-heading h2 em,
.daily-section h2 em {
  color: var(--pink);
  font-weight: 500;
}

.home-section-heading p {
  margin: 9px 0 0;
  color: #d6d8e8;
  font-size: 16px;
}

.home-personalized-grid,
.home-favorites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-personalized-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-personalized-card {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid #6381ad;
  border-radius: 22px;
  color: #fff;
  background: #101b43;
  box-shadow: 0 18px 42px #0007;
  text-decoration: none;
}

.home-personalized-card > img,
.home-card-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-personalized-card > img {
  object-fit: cover;
  transition: transform .35s ease;
}

.home-card-shade {
  background:
    linear-gradient(0deg, rgba(3, 12, 37, .98) 0, rgba(3, 12, 37, .86) 27%, rgba(3, 12, 37, .16) 65%, transparent 100%),
    linear-gradient(90deg, rgba(3, 12, 37, .35), transparent 62%);
}

.home-personalized-copy {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 30px 82px 28px 28px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.home-personalized-copy strong,
.home-favorite-card strong {
  font: 700 clamp(23px, 1.75vw, 32px)/1.08 var(--police-titres);
}

.home-personalized-copy small {
  max-width: 82%;
  margin-top: 8px;
  color: #e1e3ee;
  font-size: 15px;
  line-height: 1.55;
}

.home-personalized-copy i,
.home-favorite-card i {
  display: grid;
  width: 46px;
  height: 46px;
  margin-top: 20px;
  place-items: center;
  border: 1px solid var(--pink);
  border-radius: 50%;
  font-style: normal;
}

.home-personalized-copy i {
  position: absolute;
  right: 25px;
  bottom: 27px;
  margin: 0;
  background: rgba(5, 18, 48, .72);
  backdrop-filter: blur(5px);
}

.home-personalized-card:hover > img,
.home-favorite-card:hover img {
  transform: scale(1.035);
}

.home-emotion-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-emotion-links a {
  display: flex;
  min-height: 62px;
  padding: 13px 23px;
  align-items: center;
  gap: 13px;
  border: 1px solid #6381ad;
  border-radius: 999px;
  color: #fffaf4;
  background: linear-gradient(145deg, #16244b, #0a1736);
  font: 700 18px var(--police-titres);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.home-emotion-links a:hover {
  border-color: var(--pink);
  transform: translateY(-2px);
}

.home-emotion-links span {
  color: var(--pink);
  font: 24px/1 sans-serif;
}

.home-favorite-card {
  display: grid;
  min-height: 230px;
  overflow: hidden;
  grid-template-columns: 48% 1fr;
  border: 1px solid #6381ad;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #17254a, #28163f);
  text-decoration: none;
}

.home-favorite-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.home-favorite-card > span {
  position: relative;
  display: flex;
  padding: 25px;
  flex-direction: column;
  justify-content: center;
}

.home-favorite-card small {
  margin-top: 9px;
  color: #d9ddec;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .home-personalized,
  .home-emotions,
  .home-favorites {
    padding: 38px 16px;
  }

  .home-section-heading {
    margin-bottom: 19px;
  }

  .home-section-heading h2,
  .daily-section h2 {
    font-size: clamp(30px, 8.5vw, 38px);
  }

  .home-section-heading p {
    font-size: 14px;
    line-height: 1.5;
  }

  .home-personalized-grid,
  .home-favorites-grid {
    grid-template-columns: 1fr;
  }

  .home-personalized-card {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .home-personalized-copy {
    width: 100%;
    min-height: 0;
    padding: 24px 68px 22px 21px;
  }

  .home-personalized-copy strong {
    font-size: clamp(23px, 7vw, 30px);
  }

  .home-personalized-copy small {
    max-width: 100%;
    font-size: 13px;
  }

  .home-personalized-copy i {
    right: 18px;
    bottom: 21px;
    width: 42px;
    height: 42px;
  }

  .home-emotion-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-emotion-links a {
    min-height: 54px;
    padding: 10px 14px;
    gap: 9px;
    font-size: 14px;
  }

  .home-emotion-links span {
    font-size: 20px;
  }

  .home-favorite-card {
    min-height: 180px;
    grid-template-columns: 45% 1fr;
  }

  .home-favorite-card > span {
    padding: 18px;
  }

  .home-favorite-card strong {
    font-size: 23px;
  }
}

/* Garantit le ratio complet 1800 × 945 et les titres sur une ligne. */
@media (max-width: 760px) {
  main > .hero > img.mobile-rubrique-image,
  main > .poems-hero > img.mobile-rubrique-image,
  main > .citations-hero > img.mobile-rubrique-image {
    width: 100vw !important;
    height: 52.5vw !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1800 / 945 !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  main > .poems-hero > .poems-hero-copy h1,
  main > .citations-hero > .citations-hero-copy h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: var(--taille-titre-rubrique-active) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  main > .poems-hero > .poems-hero-copy h1 em,
  main > .citations-hero > .citations-hero-copy h1 em {
    display: inline !important;
  }
}

/* ===== images-rubriques-mobile.css ===== */

/* ======================================================================
   CORRECTION FINALE DE L'ACCUEIL SUR MOBILE UNIQUEMENT
   Ces règles ne modifient pas la version ordinateur ni la tablette.
   ====================================================================== */
@media (max-width: 760px) {
  /* L'image commence sous l'en-tête fixe et reste entièrement visible. */
  main > .hero {
    margin-top: 67px !important;
  }

  main > .hero > img.mobile-rubrique-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1800 / 945 !important;
    object-fit: contain !important;
  }

  /* Bloc de présentation placé proprement sous l'image. */
  main > .hero > .hero-copy {
    padding: 30px 20px 34px !important;
  }

  main > .hero .hero-copy h1 {
    margin: 0 0 22px !important;
    font-size: clamp(31px, 9vw, 39px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
  }

  main > .hero .hero-copy h1 em {
    display: inline-block;
    white-space: nowrap;
  }

  main > .hero .hero-intro {
    margin: 0 0 24px !important;
    max-width: none !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }

  main > .hero .hero-intro br {
    display: none !important;
  }

  main > .hero .motto {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
  }

  main > .hero .motto-line {
    width: 42px !important;
  }

  main > .hero .motto-words {
    width: auto !important;
    min-width: 0;
    gap: 2px 4px !important;
  }

  main > .hero .motto-words > span:not(:last-child)::after {
    margin-left: 4px !important;
  }

  /* Les cartes ne chevauchent plus le texte de présentation. */
  main > .hero + .univers {
    margin-top: 22px !important;
  }

  /* Encadré temporaire avec de vraies marges latérales. */
  main .renewal-note {
    width: calc(100% - 32px) !important;
    margin: 0 16px 28px !important;
    padding: 16px !important;
    align-items: flex-start;
  }

  main .renewal-note strong {
    font-size: 18px !important;
  }

  main .renewal-note p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Pied de page compact et lisible. */
  body > footer {
    min-height: 0 !important;
    padding: 26px 20px !important;
    gap: 12px !important;
  }

  body > footer .foot-love {
    font-size: 34px !important;
  }

  body > footer p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}