/* =========================================================
   ZONE TDAH
   HARMONISATION MOBILE COMMUNE
   Chargé APRÈS tous les CSS de page
   ========================================================= */


/* =========================================================
   MOBILE — 700px ET MOINS
   ========================================================= */

@media (max-width: 700px) {


  /* =======================================================
     1. BASE TYPOGRAPHIQUE
     ======================================================= */



  /* Texte courant */

  body.page-homme-site main.page-homme p,
  body.page-femme-site main.page-femme p,
  body.page-couple-site main.page-couple p,
  body.page-professionnel-site main.page-professionnel p,
  body.page-choixgenre-site main.page-choixgenre p,
  body.page-produits-site main.produits p,
  body.page-articles-site main.articles p,
  body.page-videos-site main.main-videos p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }


  /* =======================================================
     2. PETITS SUR-TITRES VERTS
     ======================================================= */

  body.page-homme-site .homme-sur-titre,
  body.page-femme-site .femme-sur-titre,
  body.page-couple-site .couple-sur-titre,
  body.page-professionnel-site .sur-titre-professionnel,
  body.page-choixgenre-site .test-sur-titre,
  body.page-produits-site .sur-titre-produits,
  body.page-articles-site .surtitre-articles,
  body.page-videos-site .surtitre-videos {
    margin-bottom: 1rem !important;

    font-size: 0.85rem !important;
    line-height: 1.35 !important;

    letter-spacing: 0.065em !important;
  }


  /* =======================================================
     3. GROS TITRES DES INTROS
     ======================================================= */

  body.page-homme-site .homme-hero h1,
  body.page-femme-site .femme-hero h1,
  body.page-couple-site .couple-hero h1,
  body.page-professionnel-site .professionnel-intro h2,
  body.page-choixgenre-site .test-hero h1,
  body.page-produits-site .intro-produits h1,
  body.page-articles-site .intro-articles h2,
  body.page-videos-site .intro-videos h2 {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;

    letter-spacing: -0.025em !important;
  }


  /* =======================================================
     4. PREMIER PARAGRAPHE DES INTROS
     ======================================================= */

  body.page-homme-site .homme-introduction,
  body.page-femme-site .femme-introduction,
  body.page-couple-site .couple-introduction,
  body.page-professionnel-site .professionnel-intro-principale,
  body.page-choixgenre-site .test-introduction,
  body.page-produits-site .intro-produits-principale,
  body.page-articles-site .texte-intro-articles,
  body.page-videos-site .intro-videos-principale {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;

    font-weight: 600;
  }
/* =======================================================
   CORRECTION INTRO HOMME — MOBILE
   ======================================================= */

body.page-homme-site .homme-hero h1 {
  font-size: 2rem !important;
  line-height: 1.12 !important;
}

body.page-homme-site .homme-hero .homme-introduction {
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

body.page-homme-site .homme-hero p:not(.homme-introduction):not(.homme-sur-titre) {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

  /* =======================================================
     5. GRANDS CADRES D'INTRO
     ======================================================= */

  body.page-homme-site .homme-hero,
  body.page-femme-site .femme-hero,
  body.page-couple-site .couple-hero,
  body.page-professionnel-site .professionnel-intro,
  body.page-choixgenre-site .test-hero,
  body.page-produits-site .intro-produits,
  body.page-articles-site .intro-articles,
  body.page-videos-site .intro-videos {
    width: calc(100% - 1rem) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding:
      1.4rem
      1.2rem !important;

    border-radius: 22px !important;
  }


  /* =======================================================
     6. ESPACEMENT DANS LES INTROS À DEUX BLOCS
     ======================================================= */

  body.page-homme-site .homme-hero,
  body.page-femme-site .femme-hero,
  body.page-couple-site .couple-hero,
  body.page-professionnel-site .professionnel-intro,
  body.page-produits-site .intro-produits,
  body.page-articles-site .intro-articles,
  body.page-videos-site .intro-videos {
    gap: 1.4rem !important;
  }


  /* =======================================================
     7. IMAGES DES INTROS
     ======================================================= */

  body.page-homme-site .homme-hero-image,
  body.page-femme-site .femme-hero-image,
  body.page-couple-site .couple-hero-image,
  body.page-professionnel-site .professionnel-intro-image,
  body.page-produits-site .intro-produits-photo,
  body.page-articles-site .intro-articles-image,
  body.page-videos-site .intro-videos-image {
    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    border-radius: 18px !important;
  }


  body.page-homme-site .homme-hero-image img,
  body.page-femme-site .femme-hero-image img,
  body.page-couple-site .couple-hero-image img,
  body.page-professionnel-site .professionnel-intro-image img,
  body.page-produits-site .intro-produits-photo img,
  body.page-articles-site .intro-articles-image img,
  body.page-videos-site .intro-videos-image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 18px !important;
  }


  /* =======================================================
     8. ENTÊTES DES GRANDES SECTIONS
     Centrés sur mobile
     ======================================================= */

  body.page-homme-site .homme-entete-section,
  body.page-femme-site .femme-entete-section,
  body.page-couple-site .couple-entete-section {
    width: 100%;

    margin-left: auto;
    margin-right: auto;

    text-align: center !important;
  }


  body.page-homme-site .homme-entete-section h2,
  body.page-femme-site .femme-entete-section h2,
  body.page-couple-site .couple-entete-section h2 {
    text-align: center !important;
  }


  body.page-homme-site
  .homme-entete-section
  .homme-sur-titre,

  body.page-femme-site
  .femme-entete-section
  .femme-sur-titre,

  body.page-couple-site
  .couple-entete-section
  .couple-sur-titre {
    text-align: center !important;
  }


  /* =======================================================
   9. PAGE HOMME — ENTÊTES DE SECTIONS
   ======================================================= */

/* Tous les petits sur-titres verts de la page */
body.page-homme-site
main.page-homme
.homme-sur-titre {
  text-align: center !important;
}


/* Titres des sections principales */
body.page-homme-site
.homme-entete-section h2,

body.page-homme-site
.homme-section-intro-texte h2,

body.page-homme-site
.homme-finances-texte h2,

body.page-homme-site
.homme-bienetre-texte h2 {
  text-align: center !important;
}


/* Finances : même rythme de lecture que le reste */
body.page-homme-site
.homme-finances-texte p {
  line-height: 1.6 !important;
}


  /* =======================================================
   10. PARAGRAPHES : TOUJOURS À GAUCHE
   ======================================================= */

body.page-homme-site main.page-homme p,
body.page-femme-site main.page-femme p,
body.page-couple-site main.page-couple p,
body.page-professionnel-site main.page-professionnel p,
body.page-produits-site main.produits p,
body.page-articles-site main.articles p,
body.page-videos-site main.main-videos p {
  text-align: left;
}


  /* Les surtitres peuvent toutefois être centrés */

  body.page-femme-site .femme-sur-titre,
  body.page-couple-site .couple-sur-titre {
    text-align: center;
  }


  /* =======================================================
     11. ESPACE ENTRE GRANDES SECTIONS
     ======================================================= */

  body.page-homme-site .homme-section,
  body.page-femme-site .femme-section,
  body.page-couple-site .couple-section {
    margin-bottom: 3rem !important;
  }


  /* =======================================================
     12. CARTES — UNE COLONNE MOBILE
     ======================================================= */

  body.page-homme-site .homme-grille-parcours,
  body.page-homme-site .homme-grille-outils,
  body.page-homme-site .homme-grille-bienetre,

  body.page-femme-site .femme-grille-parcours,
  body.page-femme-site .femme-grille-outils,

  body.page-couple-site .couple-grille,

  body.page-professionnel-site .professionnel-types,

  body.page-choixgenre-site .test-choix,
  body.page-choixgenre-site .test-explication-grille {
    grid-template-columns: 1fr !important;
  }


  /* =======================================================
     13. BOUTONS PRINCIPAUX
     Plus faciles à toucher
     ======================================================= */

  body.page-homme-site .homme-action .homme-bouton,
  body.page-femme-site .femme-action .femme-bouton,
  body.page-couple-site .couple-action .couple-bouton,
  body.page-accompagnement-site .hero-actions .bouton {
    width: 100% !important;

    min-height: 46px;
  }

  /* =======================================================
   14. SURTITRES DES INTROS — SANS BANDE BLANCHE
   ======================================================= */

body.page-professionnel-site
.professionnel-intro
.sur-titre-professionnel,

body.page-accompagnement-site
.hero-accompagnement
.sur-titre {
  width: auto !important;

  margin: 0 0 1rem !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #0e7568 !important;

  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;

  letter-spacing: 0.065em !important;
  text-transform: uppercase;
}

/* =========================================================
   SURTITRES VERTS — STYLE MOBILE COMMUN
   ========================================================= */

body.page-homme-site .homme-sur-titre,
body.page-femme-site .femme-sur-titre,
body.page-couple-site .couple-sur-titre,
body.page-professionnel-site .sur-titre-professionnel,
body.page-accompagnement-site .hero-accompagnement .sur-titre,
body.page-produits-site .sur-titre-produits,
body.page-articles-site .surtitre-articles,
body.page-videos-site .surtitre-videos {
  margin: 0 0 1rem !important;

  padding: 0 !important;

  background: transparent !important;

  color: #0e7568 !important;

  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  letter-spacing: 0.065em !important;
  text-transform: uppercase !important;

  text-align: left !important;
}

}