/* Mosqity — feuille de la famille « accueil » (intégration des gabarits du design system Mosqity PS).
   Règles limitées à l’identifiant de page de <body>, jetons var(--…) seulement, aucun !important ;
   redéclaration d’un sélecteur de Hummingbird dans la même couche @layer que l’original. */

/* Carte B1_Accueil (V2) : templates/index.tpl, _partials/accueil/*, modules ps_imageslider (héros), ps_customtext
   (parties éditoriales), ps_featuredproducts (sélection), blockreassurance (widget).
   Les classes reprennent celles de la carte (mq-heros, mq-diag, mq-tuiles, mq-etapes…, « à remonter dans bundle.css »
   selon la carte), limitées ici à #index. Paliers de la carte en @media : 899,98 px (téléphone) ; s’y ajoutent
   1 199,98 px (marges réduites des panneaux) et 479,98 px (petits téléphones, 320 px sans débordement).

   Sommaire : §0 page · §1 contenus saisis (.mq-libre) et liens d’action · §2 héros · §3 diagnostic · §4 espaces ·
   §5 produits · §6 plan 360° · §7 avec mes voisins · §8 qui sommes-nous · §9 réassurance · §10 conseils · §11 paliers */


/* §0 Page ------------------------------------------------------------------------------------------------------- */

/* Hummingbird espace les modules de l’accueil de 2,5 rem (grille) : les sections de la carte portent leur propre
   espacement (.mq-section, 96 px ; 64 px sur téléphone). */
@layer ps-pages {
  #index .page-content--home {
    gap: 0;
    padding-bottom: var(--space-9);
  }
}

#index .mq-autres {
  min-width: 0;
}


/* §1 Contenus saisis au back-office (.mq-libre) et liens d’action --------------------------------------------------- */

/* Styles de base à poids faible (:where) : les classes du design system saisies dans l’éditeur (mq-surtitre, mq-chapo,
   mq-btn…) l’emportent. */
#index .mq-libre {
  min-width: 0;
  overflow-wrap: break-word;
}

:where(#index .mq-libre) > * {
  margin: var(--space-4) 0 0;
}

:where(#index .mq-libre) > :first-child {
  margin-top: 0;
}

:where(#index .mq-libre) h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  color: inherit;
  max-width: 22ch;
  text-wrap: balance;
  hyphens: auto;
}

:where(#index .mq-libre) .mq-surtitre + h2 {
  margin-top: 14px;
}

:where(#index .mq-libre) p,
:where(#index .mq-libre) li {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  max-width: 60ch;
}

#index .mq-libre .mq-chapo {
  font-size: var(--text-body);
  max-width: 48ch;
}

#index .mq-libre .mq-surtitre {
  display: flex;
}

/* Rangée de liens d’action (« La Mosqiteam », « La démarche », « Nos engagements ») et bouton seul. */
:where(#index .mq-libre) p:has(> a.mq-lien),
:where(#index .mq-libre) p:has(> a.mq-btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  max-width: none;
  margin-top: var(--space-5);
}

/* Lien d’action : libellé en capitales et cercle-flèche de 40 px (TextLink + CircleButton). */
#index .mq-lien {
  color: inherit;
  white-space: normal;
}

#index .mq-rond {
  --t: 40px;
}

/* Titres de section (.mq-tsec de marque.css) : surtitre en paragraphe, sans la marge de Bootstrap. */
#index .mq-tsec .mq-surtitre {
  margin: 0;
}

#index .mq-lien:hover > span:first-child {
  text-decoration: underline;
}


/* §2 Héros (bloc 2) -------------------------------------------------------------------------------------------------- */

#index .mq-heros {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  padding-top: 40px;
}

#index .mq-heros__t {
  display: grid;
  gap: 20px;
  justify-items: start;
  min-width: 0;
}

#index .mq-heros__t > .mq-surtitre {
  margin: 0;
}

#index .mq-heros__h1 {
  margin: 0;
  color: var(--text-heading);
  font-size: clamp(2.25rem, 4.7vw, 4.25rem);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

#index .mq-heros__desc {
  display: grid;
  gap: 20px;
  min-width: 0;
}

#index .mq-heros__desc > * {
  margin: 0;
}

#index .mq-heros__desc .mq-chapo {
  font-size: var(--text-body);
}

/* Preuves vérifiables (E112) : liste de la description, pastille jaune cerclée de navy, intitulé en capitales. */
#index .mq-heros__desc ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-5);
}

#index .mq-heros__desc li {
  display: grid;
  gap: 2px;
  padding-left: 18px;
  position: relative;
  font-size: 13px;
  line-height: 1.35;
}

#index .mq-heros__desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: inset 0 0 0 1px var(--navy);
}

#index .mq-heros__desc li b,
#index .mq-heros__desc li strong {
  display: block;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

#index .mq-heros__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: 8px;
}

#index .mq-heros__a p {
  margin: 0;
}

#index .mq-heros__img {
  aspect-ratio: 1 / 1.08;
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: var(--off-white);
}

#index .mq-heros__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* §3 Auto-diagnostic (bloc 3) : panneau jaune, bouton navy ------------------------------------------------------------ */

#index .mq-diag {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7);
  border-radius: var(--radius-photo);
  background: var(--yellow);
  color: var(--navy);
}

#index .mq-diag--seul {
  grid-template-columns: minmax(0, 1fr);
}

#index .mq-diag a {
  color: inherit;
}

#index .mq-diag a.mq-btn--navy {
  color: var(--white);
}

/* Focus sur fond jaune : anneau navy (le jaune de .mq-btn--navy:focus-visible y serait invisible). */
#index .mq-diag :focus-visible,
#index .mq-diag .mq-btn--navy:focus-visible,
#index .mq-article--jaune:focus-within {
  outline-color: var(--focus-ring);
}

#index .mq-diag__t > p {
  max-width: 46ch;
}

#index .mq-diag__choix {
  display: grid;
  gap: 10px;
}

#index .mq-diag__choix > * {
  margin: 0;
}

#index .mq-diag__label {
  font-weight: var(--weight-bold);
  margin-bottom: 4px;
}

#index .mq-diag__choix ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

#index .mq-diag__choix li {
  max-width: none;
  margin: 0;
}

/* Réponses : pilules blanches de 56 px, cercle à cocher (.mq-choix de la carte). */
#index .mq-diag__choix li > a,
#index .mq-diag__choix li:not(:has(> a)) {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: var(--space-2) 22px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
}

#index .mq-diag__choix li > a::before,
#index .mq-diag__choix li:not(:has(> a))::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--navy);
}

#index .mq-diag__choix li > a:hover {
  box-shadow: inset 0 0 0 1.5px var(--navy);
}

#index .mq-diag__choix p:has(> a.mq-btn) {
  margin-top: 8px;
}

#index .mq-diag__choix .mq-btn {
  width: 100%;
}


/* §4 Par espace extérieur (bloc 4) : 3 tuiles, 1 sur téléphone ------------------------------------------------------ */

#index .mq-tuiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

#index .mq-tuile {
  display: grid;
  gap: 18px;
  height: 100%;
  color: var(--navy);
  text-decoration: none;
}

#index .mq-tuile__img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  background: var(--off-white);
}

#index .mq-tuile__b {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

#index .mq-tuile__t {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#index .mq-tuile .mq-h3 {
  color: inherit;
  overflow-wrap: break-word;
}

#index .mq-tuile .mq-rond {
  --t: 44px;
}

#index .mq-tuile:hover .mq-h3 {
  text-decoration: underline;
}


/* §5 Sélection de produits (bloc 5) : grille de 4, 2 sur téléphone (.mq-grille de marque.css) ------------------------ */

/* Le lien « Voir tous les produits phares » de Hummingbird n’est pas rendu sur l’accueil (lien du titre de section) :
   son conteneur vide est masqué. */
#index .mq-produits .module-products__buttons {
  display: none;
}

#index .mq-produits .mq-grille {
  --mq-col: 4;
  --mq-col-tel: 2;
}

#index .mq-produits .mq-grille > * {
  min-width: 0;
}


/* §6 Le plan 360° (bloc 6) : étapes en cartes (forme StepCard), la 2e en navy -------------------------------------- */

#index .mq-plan ol {
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  counter-reset: mq-etape;
}

#index .mq-plan ol > li {
  counter-increment: mq-etape;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 30px 28px;
  border-radius: var(--radius-card);
  background: var(--off-white);
  color: var(--navy);
}

#index .mq-plan ol > li::before {
  content: counter(mq-etape);
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: 20px;
}

#index .mq-plan ol > li:nth-child(3n + 2) {
  background: var(--navy);
  color: var(--white);
}

#index .mq-plan ol > li > * {
  margin: 0;
}

#index .mq-plan ol h3 {
  font-size: 21px;
  line-height: 1.15;
  color: inherit;
}

#index .mq-plan ol p {
  font-size: 16px;
  line-height: 1.45;
}

#index .mq-plan ol a {
  color: inherit;
}

#index .mq-plan ol > li:nth-child(3n + 2) :focus-visible {
  outline-color: var(--focus-ring-sombre);
}


/* §7 Avec mes voisins (bloc 7) : panneau navy, texte à gauche, photo à droite ---------------------------------------- */

#index .mq-voisins {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-photo);
  overflow: hidden;
}

#index .mq-voisins--seul {
  grid-template-columns: minmax(0, 1fr);
}

#index .mq-voisins__t {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 56px;
}

#index .mq-voisins__img {
  grid-column: 2;
  grid-row: 1;
}

#index .mq-voisins__img img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  display: block;
}

#index .mq-voisins__t .mq-surtitre,
#index .mq-voisins__t h2,
#index .mq-voisins__t a:not(.mq-btn) {
  color: var(--white);
}

#index .mq-voisins__t p:not(.mq-surtitre) {
  font-size: 18px;
}

#index .mq-voisins .mq-rond {
  background: var(--yellow);
  color: var(--navy);
}

#index .mq-voisins :focus-visible {
  outline-color: var(--focus-ring-sombre);
}


/* §8 Qui sommes-nous (bloc 8) : photo arrondie à gauche, texte et rangée de liens --------------------------------------- */

#index .mq-imgtxt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

#index .mq-imgtxt--seul {
  grid-template-columns: minmax(0, 1fr);
}

#index .mq-imgtxt__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.9;
  object-fit: cover;
  border-radius: var(--radius-photo);
  display: block;
}

#index .mq-imgtxt__t .mq-chapo {
  margin-top: 20px;
}


/* §9 Réassurance (bloc 9) : 5 engagements, 2 colonnes sur téléphone (ReassuranceBar) --------------------------------- */

#index .mq-reass {
  display: grid;
  grid-template-columns: repeat(var(--mq-col, 5), minmax(0, 1fr));
  gap: 28px;
  padding: 30px 36px;
  border-radius: var(--radius-card);
  background: var(--off-white);
  color: var(--navy);
}

#index .mq-reass--1 { --mq-col: 1; }
#index .mq-reass--2 { --mq-col: 2; }
#index .mq-reass--3 { --mq-col: 3; }
#index .mq-reass--4 { --mq-col: 4; }
#index .mq-reass--5 { --mq-col: 5; }

#index .mq-reass__el {
  min-width: 0;
}

#index .mq-reass__t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: inherit;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  text-decoration: none;
  overflow-wrap: break-word;
}

#index a.mq-reass__t {
  min-height: 44px;
}

#index a.mq-reass__t:hover {
  text-decoration: underline;
}

#index .mq-reass__t::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
}

#index .mq-reass__x {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

#index .mq-reass__x p {
  margin: 0;
}


/* §10 Conseils (bloc 11) : cartes article (ArticleCard), 3 colonnes, 1 sur téléphone, la 3e en jaune ------------------- */

#index .mq-conseils {
  --mq-col: 3;
  --mq-col-tel: 1;
}

#index .mq-article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-photo);
  background: var(--navy);
  color: var(--white);
}

#index .mq-article--jaune {
  background: var(--yellow);
  color: var(--navy);
}

#index .mq-article > * {
  margin: 0;
}

#index .mq-article__tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

#index .mq-article__titre {
  font-size: 21px;
  line-height: 1.15;
  color: inherit;
}

/* Lien étendu : toute la carte mène à l’article. */
#index .mq-article__titre a {
  color: inherit;
  text-decoration: none;
}

#index .mq-article__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

#index .mq-article:hover .mq-article__titre a {
  text-decoration: underline;
}

#index .mq-article:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#index .mq-article__titre a:focus-visible {
  outline: none;
}

#index .mq-article__extrait {
  font-size: 15px;
  line-height: 1.45;
}

#index .mq-article__pied {
  position: relative;
  margin-top: auto;
  min-height: 72px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

#index .mq-article__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#index .mq-article__lire {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

#index .mq-article__lire .mq-rond {
  --t: 36px;
}


/* §11 Paliers ---------------------------------------------------------------------------------------------------------- */

/* 900-1 199 px : panneaux et réassurance resserrés. */
@media (max-width: 1199.98px) {
  #index .mq-heros {
    gap: var(--space-6);
  }

  #index .mq-diag {
    padding: var(--space-6);
    gap: var(--space-6);
  }

  #index .mq-voisins__t {
    padding: var(--space-6);
  }

  #index .mq-imgtxt {
    gap: var(--space-6);
  }

  #index .mq-reass {
    padding: var(--space-5);
  }

  #index .mq-reass--5 {
    --mq-col: 3;
  }

  #index .mq-reass--4 {
    --mq-col: 2;
  }

  #index .mq-plan ol > li {
    padding: var(--space-5);
  }
}

/* Téléphone (palier 900 px de la carte) : une colonne, photo du héros sous le texte, photo des voisins au-dessus,
   réassurance en 2 colonnes, boutons pleine largeur. */
@media (max-width: 899.98px) {
  :where(#index .mq-libre) h2 {
    font-size: clamp(1.625rem, 8vw, 2.125rem);
  }

  #index .mq-libre .mq-chapo,
  #index .mq-heros__desc .mq-chapo {
    font-size: 18px;
  }

  #index .mq-heros {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-top: 20px;
  }

  #index .mq-heros__h1 {
    font-size: clamp(1.75rem, 9.2vw, 2.25rem);
  }

  #index .mq-heros__img {
    aspect-ratio: auto;
    height: 220px;
    border-radius: var(--radius-card);
  }

  #index .mq-heros__desc ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #index .mq-heros__a {
    gap: var(--space-3);
    width: 100%;
  }

  #index .mq-heros__a .mq-btn {
    width: 100%;
  }

  #index .mq-diag,
  #index .mq-diag--seul {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
    gap: var(--space-5);
    border-radius: var(--radius-card);
  }

  #index .mq-diag .mq-btn {
    width: 100%;
  }

  #index .mq-tuiles,
  #index .mq-plan ol,
  #index .mq-imgtxt {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  #index .mq-tuile__img {
    aspect-ratio: auto;
    height: 170px;
  }

  #index .mq-voisins {
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--radius-card);
  }

  #index .mq-voisins__img {
    grid-column: 1;
    grid-row: 1;
  }

  #index .mq-voisins__t {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-5) 20px;
  }

  #index .mq-voisins--seul .mq-voisins__t {
    grid-row: 1;
  }

  #index .mq-voisins__img img {
    min-height: 0;
    height: 200px;
  }

  #index .mq-voisins__t p:not(.mq-surtitre) {
    font-size: var(--text-body-sm);
  }

  #index .mq-voisins .mq-btn {
    width: 100%;
  }

  #index .mq-reass {
    padding: 22px 18px;
    gap: 20px 16px;
  }

  #index .mq-reass--3,
  #index .mq-reass--4,
  #index .mq-reass--5 {
    --mq-col: 2;
  }
}

/* Petits téléphones (320-479 px) : pilules et cartes resserrées. */
@media (max-width: 479.98px) {
  #index .mq-diag__choix li > a,
  #index .mq-diag__choix li:not(:has(> a)) {
    padding: var(--space-2) var(--space-4);
    font-size: 15px;
  }

  #index .mq-plan ol > li,
  #index .mq-article {
    padding: 20px;
  }

  #index .mq-reass {
    padding: 18px 14px;
    gap: 18px 12px;
  }
}