/* ==========================================================================
   Hacoeur — couche responsive (mobile + tablette)
   --------------------------------------------------------------------------
   Regle absolue de ce fichier : TOUTE declaration vit dans une media query
   `max-width`. Au-dela de 1024px, l'affichage bureau reste strictement
   identique a ce qu'il etait avant l'ajout de ce fichier.

   Le site est construit en styles inline (`style="..."`). Les selecteurs
   ci-dessous ciblent donc des fragments de l'attribut `style` et utilisent
   `!important`, seul moyen de passer devant un style inline.

   Ce fichier n'ajoute AUCUN element de navigation : la barre de nav reste
   celle rendue par hac_nav() dans le theme, une seule et meme sur tout le
   site (pages, pages Canvas et articles).
   ========================================================================== */


/* ==========================================================================
   1. TABLETTE — 1024px et moins
   ========================================================================== */
@media (max-width: 1024px) {

  /* 1.1 Gouttieres laterales des conteneurs centres : 40px -> 28px.
     Seules les marges horizontales bougent, le rythme vertical est conserve. */
  [style*="max-width:1200px"],
  [style*="max-width:1100px"],
  [style*="max-width:1000px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 1.2 Grilles de 3 colonnes et plus : deux colonnes.
     Les cartes gardent une largeur lisible au lieu de se comprimer a 30%. */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 1.3 Les grilles « tableau » — celles dont les cellules sont separees par
     un filet vertical — passent directement a une colonne. Sur deux colonnes
     les filets se dedoublent contre la bordure du cadre et la derniere
     cellule reste orpheline : une colonne est le seul rendu propre.
     `:has()` n'est pas indispensable — le point 2.2 refait le travail sur
     mobile pour les navigateurs qui ne le supportent pas. */
  [style*="grid-template-columns"]:has(> [style*="border-right:2.5px"]) {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns"]:has(> [style*="border-right:2.5px"]) > [style*="border-right:2.5px"] {
    border-right-width: 0 !important;
  }

  /* Le filet vertical devient un filet horizontal — sauf si la cellule porte
     deja une bordure haute, auquel cas le trait existe deja. */
  [style*="grid-template-columns"]:has(> [style*="border-right:2.5px"]) > [style*="border-right:2.5px"]:not(:last-child):not([style*="border-top:2.5px"]) {
    border-bottom: 2.5px solid #0A0A0A !important;
  }

  /* Cadre dont le cote droit etait ferme par la derniere cellule. */
  [style*="grid-template-columns"][style*="border-right:none"]:has(> [style*="border-right:2.5px"]) {
    border-right: 2.5px solid #0A0A0A !important;
  }

  /* 1.4 En-tetes « titre a gauche / prix a droite » : une colonne, tout a gauche. */
  [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:1fr auto"] > [style*="text-align:right"] {
    text-align: left !important;
  }
}


/* ==========================================================================
   2. MOBILE — 767px et moins
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- 2.1 Mise en page : une seule colonne, partout ---------------------- */

  /* Toute grille declaree en inline retombe sur une colonne. C'est la regle
     qui corrige les pages construites sans media query (offre, industries,
     pages de service). */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- 2.2 Filets des grilles applaties ---------------------------------- */

  /* Sans `:has()`, cette regle suffit : sur mobile toutes les grilles sont
     deja a une colonne, donc tout filet vertical est a neutraliser. */
  [style*="grid-template-columns"] > [style*="border-right"] {
    border-right-width: 0 !important;
  }

  [style*="grid-template-columns"] > [style*="border-right:2.5px"]:not(:last-child):not([style*="border-top:2.5px"]) {
    border-bottom: 2.5px solid #0A0A0A !important;
  }

  [style*="grid-template-columns"] > [style*="border-right:1.5px"]:not(:last-child):not([style*="border-top"]) {
    border-bottom: 1.5px solid #E0DED9 !important;
  }

  [style*="grid-template-columns"] > [style*="text-align:right"] {
    text-align: left !important;
  }

  /* Certains cadres ouvrent leur cote droit parce que, sur bureau, c'est la
     bordure de la derniere cellule qui ferme le cadre (bloc « A lire ensuite »).
     Une fois les cellules empilees, ce cote reste beant : on le referme. */
  [style*="grid-template-columns"][style*="border-right:none"] {
    border-right: 2.5px solid #0A0A0A !important;
  }

  /* ---- 2.3 Gouttieres ----------------------------------------------------- */

  [style*="max-width:1200px"],
  [style*="max-width:1100px"],
  [style*="max-width:1000px"],
  [style*="max-width:900px"],
  [style*="max-width:860px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Colonnes de lecture (articles, pages legales) : on gagne 20px de texte. */
  [style*="max-width:760px"],
  [style*="max-width:720px"],
  [style*="max-width:680px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Barre de navigation : meme traitement que les conteneurs. */
  #hac-nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- 2.4 Blocs a fort rembourrage --------------------------------------- */

  [style*="padding:3rem;"] { padding: 1.75rem !important; }
  [style*="padding:2.5rem 3rem"] { padding: 1.75rem 1.25rem !important; }
  [style*="padding:2.5rem 2rem"] { padding: 1.75rem 1.25rem !important; }
  [style*="padding:2.25rem 2rem"] { padding: 1.75rem 1.25rem !important; }

  /* Cartes du selecteur de modules : les quatre bandes internes s'alignent. */
  [style*="padding:2rem 2rem 0"] { padding: 1.5rem 1.35rem 0 !important; }
  [style*="padding:1.4rem 2rem 0"] { padding: 1.1rem 1.35rem 0 !important; }
  [style*="padding:1.4rem 2rem 1.6rem"] { padding: 1.1rem 1.35rem 1.25rem !important; }
  [style*="padding:1.5rem 2rem 2rem"] { padding: 1.25rem 1.35rem 1.5rem !important; }
  [style*="padding:1.75rem 2rem"] { padding: 1.35rem 1.35rem !important; }

  /* ---- 2.5 Debordements horizontaux --------------------------------------- */

  /* Rien ne doit depasser la largeur de l'ecran. */
  img, svg, video, iframe, table { max-width: 100% !important; }

  /* Les `nowrap` des libelles de boutons debordent sur un ecran etroit :
     « Reserver l'appel avec ce forfait → » ne tient sur aucune ligne. On les
     libere — mais uniquement sur les liens et boutons. Ailleurs le `nowrap`
     tient ensemble un montant (« 1 500 $ ») qu'il ne faut surtout pas couper. */
  a[style*="white-space:nowrap"],
  button[style*="white-space:nowrap"] { white-space: normal !important; }

  /* Bandes de statistiques (hero) : deux par rangee. Sans cela les quatre
     chiffres se serrent sur une seule ligne et leurs libelles s'empilent
     lettre par lettre. `flex:1` acheve de remplir la rangee. */
  [style*="min-width:140px"] {
    flex-basis: 45% !important;
    min-width: 0 !important;
  }

  /* Les autres `min-width` de colonnes flex ne doivent pas forcer la largeur. */
  [style*="min-width:180px"],
  [style*="min-width:200px"],
  [style*="min-width:220px"],
  [style*="min-width:240px"],
  [style*="min-width:260px"],
  [style*="min-width:280px"],
  [style*="min-width:300px"],
  [style*="min-width:320px"] {
    min-width: 0 !important;
  }

  /* Mots longs, URL, adresses : on coupe plutot que de deborder. */
  p, li, h1, h2, h3, h4, td, th, blockquote { overflow-wrap: break-word; }

  /* ---- 2.6 Rangees flex ---------------------------------------------------- */

  /* Une rangee « texte a gauche / bouton a droite » se replie proprement. */
  [style*="justify-content:space-between"][style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* Rangee « grand chiffre + libelle » (page Resultats, prix de L'offre).
     Le chiffre y est un element flex qui se comprime : « 2,44 $ » se coupait
     entre le montant et le symbole. On laisse la rangee se replier et on
     garde le chiffre d'un seul tenant. */
  [style*="display:flex"][style*="align-items:baseline"] {
    flex-wrap: wrap !important;
  }

  [style*="display:flex"][style*="align-items:baseline"] > span:first-child {
    white-space: nowrap !important;
  }

  /* Ligne d'attribution des articles (auteur · date · duree de lecture).
     Sans repli, les trois libelles se compriment et chaque mot passe a la
     ligne. On laisse la rangee se replier : chaque libelle reste d'un bloc. */
  [style*="display:flex"][style*="align-items:center"][style*="gap:1.25rem"] {
    flex-wrap: wrap !important;
    gap: .55rem .9rem !important;
  }

  /* ---- 2.7 Barre fixe du selecteur de forfait (page L'offre) -------------- */

  #of-bar > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: .75rem !important;
  }

  #of-bar a {
    width: 100%;
    text-align: center;
    padding: .8rem 1rem !important;
  }
}


/* ==========================================================================
   3. PETIT MOBILE — 480px et moins
   ========================================================================== */
@media (max-width: 480px) {

  /* Gouttieres minimales : chaque pixel de texte compte. */
  [style*="max-width:1200px"],
  [style*="max-width:1100px"],
  [style*="max-width:1000px"],
  [style*="max-width:900px"],
  [style*="max-width:860px"],
  [style*="max-width:760px"],
  [style*="max-width:720px"],
  [style*="max-width:680px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #hac-nav { padding-left: 16px !important; padding-right: 16px !important; }

  /* Boutons pleine largeur : plus faciles a viser au pouce. */
  a[style*="display:inline-block"][style*="padding:1.125rem 3rem"],
  a[style*="display:inline-block"][style*="padding:1rem 2.5rem"] {
    display: block !important;
    text-align: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}