/* =========================================================================
   Correctifs d'affichage des blocs WordPress de l'accueil (.ppb1 à .ppb8)
   -------------------------------------------------------------------------
   Les blocs de PROPRYO-COM/3-wordpress-a-coller/accueil sont injectés tels
   quels. Trois défauts du package sont corrigés ICI, sans toucher aux blocs :

   1. Aucune règle responsive : grilles à 2 ou 3 colonnes figées, tableau à
      5 colonnes sans défilement. Sur téléphone, le hero tient dans une
      colonne d'environ 150 px de large.
   2. Les liens stylés en boutons n'annulent pas le soulignement : selon le
      thème WordPress, « Créer mon compte » s'affiche souligné (c'est le cas
      sur les maquettes PNG du package).
   3. Le halo du CTA final (bloc 8) est peint par-dessus le titre, dont la
      fin vire au rose (visible sur le PNG). Sous 1040 px, sa boîte devient
      haute et étroite et laisse un bord net dans la carte.

   Au-dessus de 1040 px, seuls les correctifs 2 et 3 modifient le rendu
   des maquettes validées.

   ⚠️ EN PRODUCTION, ces règles doivent être reportées dans le <style> de
   chaque bloc (en retirant le préfixe .wp-content). Sinon l'accueil
   WordPress restera cassé sur mobile.

   Le préfixe .wp-content est nécessaire ici : les <style> des blocs arrivent
   après cette feuille dans la page et gagneraient à spécificité égale.

   Points de bascule repris du site de référence
   PROPRYO-COM/5-site-technique/index.html.
   ========================================================================= */

/* 2. Boutons : pas de soulignement */
.wp-content .ppb1 .btn,
.wp-content .ppb4 .btn,
.wp-content .ppb8 .btn {
  text-decoration: none;
}

/* 1. Adaptation mobile */

@media (max-width: 860px) {
  .wp-content .ppb1 .hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wp-content .ppb1 h1    { font-size: clamp(34px, 7.4vw, 52px); }
  .wp-content .ppb1 .lede { font-size: 17px; }
}

@media (max-width: 760px) {
  .wp-content .ppb3 .split-in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .wp-content .ppb2 .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .wp-content .ppb4 .hooks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .wp-content .ppb6 .founder { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* Tableau comparatif : défilement horizontal plutôt que débordement */
  .wp-content .ppb5 table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wp-content .ppb5 th,
  .wp-content .ppb5 td { padding: 12px 11px; font-size: 13.5px; white-space: nowrap; }
  .wp-content .ppb5 td:first-child { white-space: normal; min-width: 150px; }
}

@media (max-width: 600px) {
  .wp-content .ppb1,
  .wp-content .ppb2,
  .wp-content .ppb3,
  .wp-content .ppb4,
  .wp-content .ppb5,
  .wp-content .ppb6,
  .wp-content .ppb7,
  .wp-content .ppb8 { padding: 28px 20px; }

  .wp-content .ppb2 .diff h2,
  .wp-content .ppb3 h2,
  .wp-content .ppb4 h2,
  .wp-content .ppb5 h2,
  .wp-content .ppb7 h2 { font-size: clamp(26px, 7.2vw, 34px); }

  .wp-content .ppb2 .diff    { padding: 24px 20px; }
  .wp-content .ppb3 .sub,
  .wp-content .ppb4 .sub     { font-size: 16px; }
  .wp-content .ppb3 .col     { padding: 22px 20px 24px; }
  .wp-content .ppb4 .hook    { padding: 22px; }
  .wp-content .ppb6 .founder { padding: 26px 22px; }
  .wp-content .ppb6 blockquote { font-size: 19px; }
  .wp-content .ppb7 details  { padding: 2px 16px; }
  .wp-content .ppb8 .final   { padding: 44px 22px; }
  .wp-content .ppb8 .final h2 { font-size: clamp(28px, 8vw, 40px); }
  .wp-content .ppb8 .final p  { font-size: 16px; }
}

@media (max-width: 480px) {
  /* Maquette d'app du hero : 3 tuiles sur ~300 px */
  .wp-content .ppb1 .mkpi     { gap: 7px; }
  .wp-content .ppb1 .mkpi .k  { padding: 9px; }
  .wp-content .ppb1 .mkpi .kv { font-size: 15px; }
}

@media (max-width: 412px) {
  .wp-content .ppb1 h1 { font-size: 34px; }   /* taille téléphone de la charte */
}

/* 3. Halo du CTA final (bloc 8) */

/* Le texte passe au-dessus du halo (les enfants sont déjà en position relative) */
.wp-content .ppb8 .final > * { z-index: 1; }

@media (max-width: 1040px) {
  /* Boîte carrée : le dégradé s'éteint avant ses bords, plus de coupure nette */
  .wp-content .ppb8 .final::after {
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: -35%;
    right: -25%;
  }
}