/* ==========================================================================
   MON-WIFI.COM  -  surcouche de marque par-dessus le theme UIkit
   ========================================================================== */

:root{
  --mw-navy:#0A1A40;
  --mw-navy-fonce:#06122F;
  --mw-bleu:#2e75b6;
  --mw-cyan:#0020F0;
  --mw-orange:#F06810;        /* orange Groupe LTL - voir METTRE-EN-LIGNE.md pour l'ajuster */
  --mw-orange-fonce:#D25808;
  --mw-gris:#5a6570;
  --mw-gris-pale:#f5f7f9;
  --mw-bordure:#e2e8ee;
}

body{ font-family:"Open Sans",Helvetica,Arial,sans-serif; color:#2c3540; }
h1,h2,h3,h4{ font-family:"Open Sans",Helvetica,Arial,sans-serif; font-weight:600; color:var(--mw-navy); }
.uk-light h1,.uk-light h2,.uk-light h3,.uk-light h4{ color:#fff; }

/* ---------- En-tete et heros ---------- */
.mw-hero{
  position:relative;
  background-color:var(--mw-navy);
  background-blend-mode:multiply;
}
.mw-hero:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(18,58,94,.93) 0%,rgba(13,43,70,.82) 50%,rgba(240,104,16,.42) 100%);
}
.mw-hero > *{ position:relative; z-index:2; }
.mw-hero-contenu{ padding:60px 0 70px; }
.mw-hero-grand .mw-hero-contenu{ padding:110px 0 120px; }
.mw-hero-contenu h1{ max-width:820px; line-height:1.15; }
.mw-hero-sous{ max-width:680px; opacity:.94; }
.mw-hero .uk-navbar-item.uk-logo{ font-weight:700; letter-spacing:.5px; font-size:1.15rem; color:#fff; }
.mw-nav > li > a{ font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.mw-nav > li.uk-active > a{ color:#fff; border-bottom:2px solid var(--mw-orange); }
.mw-lang{ font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; opacity:.85; }
.mw-lang:hover{ opacity:1; }

/* ---------- Boutons ---------- */
.uk-button-primary{ background-color:var(--mw-orange); border:0; font-weight:600; text-transform:none; }
.uk-button-primary:hover{ background-color:var(--mw-orange-fonce); }
.uk-button-secondary{ background-color:var(--mw-cyan); border:0; font-weight:600; text-transform:none; }
.uk-button-secondary:hover{ background-color:#0018C8; }
.uk-button-default{ border-color:rgba(255,255,255,.6); color:#fff; font-weight:600; text-transform:none; }
.mw-section-claire .uk-button-default{ border-color:var(--mw-navy); color:var(--mw-navy); }
.mw-btn-ltl{ border-color:rgba(255,255,255,.45); color:#fff; }

/* ---------- Sections ---------- */
.mw-section-claire{ background:#fff; }
.mw-section-grise{ background:var(--mw-gris-pale); }
.mw-titre-section{ margin-bottom:6px; }
.mw-intro-section{ color:var(--mw-gris); max-width:720px; margin:0 auto 10px; }

/* ---------- Cartes de forfait ---------- */
.mw-carte{
  background:#fff; border:1px solid var(--mw-bordure); border-radius:10px;
  padding:32px 28px; display:flex; flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mw-carte:hover{ box-shadow:0 14px 34px rgba(18,58,94,.12); transform:translateY(-3px); border-color:#cfdae4; }
.mw-carte-vedette{ border:2px solid var(--mw-orange); box-shadow:0 10px 30px rgba(240,104,16,.18); }
.mw-carte-etiquette{
  display:inline-block; background:var(--mw-orange); color:#fff; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.7px; padding:4px 11px; border-radius:20px; margin-bottom:14px;
}
.mw-carte h3{ margin:0 0 2px; font-size:1.32rem; }
.mw-carte-sous{ color:var(--mw-gris); font-size:.9rem; margin:0 0 18px; }
.mw-prix{ display:flex; align-items:baseline; gap:7px; margin-bottom:6px; }
.mw-prix-avant{ font-size:.76rem; text-transform:uppercase; letter-spacing:.6px; color:var(--mw-gris); }
.mw-prix-montant{ font-size:2.15rem; font-weight:700; color:var(--mw-navy); line-height:1; }
.mw-carte-desc{ color:var(--mw-gris); font-size:.92rem; margin:14px 0 18px; }
.mw-liste{ list-style:none; padding:0; margin:0 0 22px; }
.mw-liste li{ position:relative; padding:7px 0 7px 27px; font-size:.9rem; border-bottom:1px solid #f0f3f6; }
.mw-liste li:last-child{ border-bottom:0; }
.mw-liste li:before{
  content:""; position:absolute; left:3px; top:14px; width:11px; height:6px;
  border-left:2px solid var(--mw-orange); border-bottom:2px solid var(--mw-orange);
  transform:rotate(-45deg);
}
.mw-recurrent{
  margin-top:auto; background:var(--mw-gris-pale); border-radius:7px; padding:11px 14px;
  font-size:.82rem; color:var(--mw-gris);
}
.mw-carte .uk-button{ margin-top:16px; }

/* ---------- Blocs d avantages ---------- */
.mw-bloc{ padding:6px 0; }
.mw-bloc-icone{
  width:46px; height:46px; border-radius:10px; background:rgba(240,104,16,.13);
  display:flex; align-items:center; justify-content:center; color:var(--mw-orange); margin-bottom:14px;
}
.mw-bloc h4{ margin:0 0 7px; font-size:1.03rem; }
.mw-bloc p{ color:var(--mw-gris); font-size:.9rem; margin:0; }

/* ---------- Marques ---------- */
.mw-marque{
  background:#fff; border:1px solid var(--mw-bordure); border-radius:10px;
  padding:26px 24px;
}
.mw-marque-nom{
  font-size:1.28rem; font-weight:700; color:var(--mw-navy); margin:0 0 4px;
  letter-spacing:.3px;
}
.mw-marque-role{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; color:var(--mw-orange);
  font-weight:700; margin-bottom:11px;
}
.mw-marque p{ color:var(--mw-gris); font-size:.89rem; margin:0; }

/* ---------- Etapes numerotees ---------- */
.mw-etape{ position:relative; padding-left:62px; margin-bottom:30px; }
.mw-etape-num{
  position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%;
  background:var(--mw-orange); color:#fff; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
}
.mw-etape h4{ margin:8px 0 6px; }
.mw-etape p{ color:var(--mw-gris); font-size:.92rem; margin:0; }

/* ---------- Bandeaux d appel a l action ---------- */
.mw-bandeau{ background:var(--mw-navy); color:#fff; }
.mw-bandeau h2,.mw-bandeau h3{ color:#fff; }
.mw-bandeau p{ opacity:.9; }
.mw-bandeau-cyan{ background:linear-gradient(120deg,var(--mw-navy) 0%,#a85c0a 100%); }

/* ---------- Encadres ---------- */
.mw-encadre{
  background:#fff; border:1px solid var(--mw-bordure); border-left:4px solid var(--mw-orange);
  border-radius:7px; padding:22px 26px;
}
.mw-encadre h4{ margin:0 0 8px; }
.mw-encadre p{ color:var(--mw-gris); margin:0; font-size:.92rem; }
.mw-note{ color:var(--mw-gris); font-size:.8rem; font-style:italic; }

/* ---------- Tableau de tailles ---------- */
.mw-tableau{ width:100%; border-collapse:collapse; }
.mw-tableau td{ padding:13px 4px; border-bottom:1px solid var(--mw-bordure); font-size:.94rem; }
.mw-tableau tr:last-child td{ border-bottom:0; }
.mw-tableau td:last-child{ text-align:right; font-weight:700; color:var(--mw-navy); white-space:nowrap; }

/* ---------- Contact ---------- */
.mw-contact-carte{
  background:#fff; border:1px solid var(--mw-bordure); border-radius:10px;
  padding:28px 26px;
}
.mw-contact-carte h4{ margin:0 0 6px; }
.mw-contact-carte p{ color:var(--mw-gris); font-size:.9rem; }
.mw-contact-gros{ font-size:1.12rem; font-weight:600; color:var(--mw-orange); word-break:break-word; }

/* ---------- Pied de page ---------- */
.mw-footer{ background:var(--mw-navy-fonce); color:rgba(255,255,255,.72); }
.mw-foot-titre{ color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.8px; margin:0 0 13px; }
.mw-footer a{ color:rgba(255,255,255,.82); }
.mw-footer a:hover{ color:var(--mw-orange); text-decoration:none; }
.mw-foot-liste li{ margin-bottom:5px; }
.mw-foot-hr{ border-top:1px solid rgba(255,255,255,.14); margin:28px 0 16px; }
.mw-foot-bas{ color:rgba(255,255,255,.55); }

@media (max-width:960px){
  .mw-hero-contenu{ padding:44px 0 52px; }
  .mw-hero-grand .mw-hero-contenu{ padding:64px 0 72px; }
  .mw-etape{ padding-left:56px; }
}

/* ---------- Numéros réglementaires (RBQ / BSP) ---------- */
.mw-reglementaire{ list-style:none; padding:0; margin:14px 0 8px; }
.mw-reglementaire li{
  font-size:.82rem; letter-spacing:.3px; color:rgba(255,255,255,.86);
  margin-bottom:4px; font-variant-numeric:tabular-nums;
}
.mw-reglementaire li span{
  display:inline-block; min-width:38px; font-weight:700; color:var(--mw-orange);
  font-size:.7rem; text-transform:uppercase; letter-spacing:.8px;
}
.mw-bsp-mention{
  font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.5);
  margin:0 0 14px; max-width:230px;
}

/* ---------- Filet orange sous les titres de section ---------- */
.mw-titre-section{ position:relative; padding-bottom:14px; }
.mw-titre-section:after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:52px; height:3px; background:var(--mw-orange); border-radius:2px;
}
.mw-titre-gauche:after{ left:0; transform:none; }

/* ---------- Photos de réalisations ---------- */
.mw-photo{
  position:relative; overflow:hidden; border-radius:10px; background:var(--mw-gris-pale);
  border:1px solid var(--mw-bordure);
}
.mw-photo img{ width:100%; height:230px; object-fit:cover; display:block; transition:transform .4s ease; }
.mw-photo:hover img{ transform:scale(1.04); }
.mw-photo-legende{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  background:linear-gradient(to top,rgba(13,43,70,.92),rgba(13,43,70,0));
  color:#fff; font-size:.84rem; font-weight:600; line-height:1.3;
}
.mw-photo-legende span{
  display:block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:var(--mw-orange); margin-bottom:3px;
}
.mw-photo-large img{ height:340px; }
.mw-photo-cote img{ height:300px; border-radius:10px; }

/* ---------- Emplacement vide en attente d une photo ---------- */
.mw-photo-vide{
  border:2px dashed var(--mw-bordure); border-radius:10px; background:var(--mw-gris-pale);
  min-height:230px; display:flex; align-items:center; justify-content:center;
  color:#9aa7b4; font-size:.82rem; text-align:center; padding:20px;
}

/* ==========================================================================
   ENCADRÉ « PARLER À UN CONSEILLER »
   ========================================================================== */
.mw-cta{ padding:44px 0; }
.mw-cta-titre{ margin:0 0 6px; font-size:1.5rem; line-height:1.25; color:#fff; }
.mw-cta-texte{ margin:0; font-size:1rem; opacity:.92; max-width:620px; }
.mw-cta-boutons{ white-space:nowrap; }
.mw-cta-boutons .uk-button{ margin-left:10px; }
.mw-cta-tel{ border-color:rgba(255,255,255,.55); color:#fff; }
.mw-cta-tel:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ==========================================================================
   MOBILE  -  tout ce qui suit ne s'applique qu'aux petits écrans
   ========================================================================== */

/* ---- Tablette et moins ---- */
@media (max-width:959px){
  .mw-hero-contenu{ padding:38px 0 46px; }
  .mw-hero-grand .mw-hero-contenu{ padding:52px 0 60px; }
  .mw-hero-contenu h1{ font-size:1.85rem; line-height:1.22; }
  .mw-hero-sous{ font-size:1rem; }
  .uk-section{ padding-top:42px; padding-bottom:42px; }
  .uk-section-small{ padding-top:28px; padding-bottom:28px; }
  h2{ font-size:1.5rem; }
  h3{ font-size:1.2rem; }

  .mw-carte{ padding:26px 22px; }
  .mw-prix-montant{ font-size:1.9rem; }
  .mw-etape{ padding-left:52px; margin-bottom:24px; }
  .mw-etape-num{ width:38px; height:38px; font-size:.95rem; }

  .mw-photo img,
  .mw-photo-cote img{ height:210px; }
  .mw-photo-large img{ height:240px; }

  .mw-cta{ padding:34px 0; text-align:center; }
  .mw-cta-texte{ margin:0 auto; }
  .mw-cta-boutons{ white-space:normal; margin-top:18px; }
  .mw-cta-boutons .uk-button{ margin:6px 5px 0; }
}

/* ---- Téléphone ---- */
@media (max-width:639px){
  .mw-hero-contenu h1{ font-size:1.55rem; }
  .mw-hero-sous{ font-size:.95rem; }
  .mw-hero-contenu{ padding:30px 0 36px; }
  .mw-hero-grand .mw-hero-contenu{ padding:38px 0 44px; }
  .uk-container{ padding-left:18px; padding-right:18px; }

  /* Boutons pleine largeur : cible tactile confortable */
  .mw-hero-contenu .uk-button,
  .mw-cta-boutons .uk-button{
    display:block; width:100%; margin:8px 0 0; padding:0 16px;
    min-height:48px; line-height:48px; font-size:.95rem;
  }
  .mw-carte .uk-button{ min-height:48px; line-height:48px; }

  .mw-carte{ padding:22px 18px; }
  .mw-carte h3{ font-size:1.18rem; }
  .mw-prix-montant{ font-size:1.75rem; }
  .mw-liste li{ font-size:.88rem; padding:9px 0 9px 25px; }
  .mw-liste li:before{ top:15px; }

  .mw-photo img,
  .mw-photo-cote img,
  .mw-photo-large img{ height:190px; }
  .mw-photo-legende{ font-size:.78rem; padding:22px 13px 11px; }

  .mw-titre-section{ font-size:1.35rem; }
  .mw-intro-section{ font-size:.92rem; }
  .mw-cta-titre{ font-size:1.22rem; }
  .mw-cta-texte{ font-size:.92rem; }

  .mw-bloc-icone{ width:40px; height:40px; }
  .mw-etape{ padding-left:0; }
  .mw-etape-num{ position:static; margin-bottom:10px; }

  /* Tableaux de prix : empilés et lisibles */
  .mw-tableau td{ padding:11px 2px; font-size:.9rem; }

  .mw-encadre{ padding:18px 18px; }
  .mw-contact-carte{ padding:22px 18px; }
  .mw-contact-gros{ font-size:1.02rem; }

  /* Pied de page centré */
  .mw-footer{ text-align:center; }
  .mw-foot-liste{ margin-bottom:22px; }
  .mw-foot-bas{ flex-direction:column; gap:8px; text-align:center; }
  .mw-reglementaire li span{ min-width:34px; }
  .mw-bsp-mention{ max-width:none; margin-left:auto; margin-right:auto; }

  /* Menu hors-écran : cibles tactiles */
  .uk-offcanvas-bar .uk-nav > li > a{ padding:11px 0; font-size:1rem; }
}

/* ---- Écrans très étroits ---- */
@media (max-width:400px){
  .mw-hero-contenu h1{ font-size:1.38rem; }
  .mw-prix-montant{ font-size:1.6rem; }
  .mw-hero .uk-navbar-item.uk-logo{ font-size:1rem; }
}

/* ---- Confort tactile général ---- */
@media (hover:none){
  .mw-carte:hover{ transform:none; box-shadow:none; }
  .mw-photo:hover img{ transform:none; }
}

/* ==========================================================================
   CORRECTIF D'ALIGNEMENT
   Ces blocs ne doivent s'etirer que dans une grille uk-grid-match, ou UIkit
   passe la cellule en flex. Hors de ce contexte ils prennent la hauteur de
   leur contenu, sinon ils se gonflent a la hauteur de la colonne voisine.
   ========================================================================== */
.mw-carte,
.mw-photo,
.mw-marque,
.mw-contact-carte{ height:auto; align-self:start; }

.uk-grid-match > * > .mw-carte,
.uk-grid-match > * > .mw-photo,
.uk-grid-match > * > .mw-marque,
.uk-grid-match > * > .mw-contact-carte{ height:100%; align-self:stretch; }

/* ---------- Logo dans la barre de navigation ---------- */
.mw-hero .uk-navbar-item.uk-logo{ padding-top:6px; padding-bottom:6px; }
.mw-logo-img{ height:46px; width:auto; display:block; }
.mw-footer .mw-logo-pied{ height:52px; width:auto; margin-bottom:14px; }
@media (max-width:639px){ .mw-logo-img{ height:36px; } }

/* ==========================================================================
   PAGE SUPPORT : feuille de connexion et foire aux questions
   ========================================================================== */
.mw-feuille{
  background:#fff; border:1px solid var(--mw-bordure); border-radius:10px;
  overflow:hidden; box-shadow:0 6px 22px rgba(10,26,64,.07); margin-top:18px;
}
.mw-feuille-entete{
  background:var(--mw-navy); color:#fff; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; font-size:.78rem; padding:13px 20px;
}
.mw-feuille-ligne{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 20px; border-bottom:1px solid #f0f3f6;
}
.mw-feuille-ligne:last-child{ border-bottom:0; }
.mw-feuille-cle{ font-size:.88rem; color:var(--mw-gris); }
.mw-feuille-val{
  flex:0 0 46%; height:11px; border-bottom:2px dotted #cfd8e3; border-radius:1px;
}

.mw-faq .uk-accordion-title{
  font-size:1.02rem; font-weight:600; color:var(--mw-navy);
  background:#fff; border:1px solid var(--mw-bordure); border-radius:8px;
  padding:16px 52px 16px 20px; margin:0;
}
.mw-faq > li{ margin-top:12px; }
.mw-faq > li:first-child{ margin-top:0; }
.mw-faq .uk-accordion-title::before{ margin-left:14px; }
.mw-faq .uk-open > .uk-accordion-title{
  border-color:var(--mw-orange); color:var(--mw-orange);
}
.mw-faq .uk-accordion-content{ margin:0; padding:16px 20px 6px; }
.mw-faq .uk-accordion-content p{ color:var(--mw-gris); font-size:.94rem; margin:0; }
@media (max-width:639px){
  .mw-feuille-ligne{ flex-direction:column; align-items:flex-start; gap:7px; }
  .mw-feuille-val{ flex:none; width:100%; }
  .mw-faq .uk-accordion-title{ font-size:.94rem; padding:14px 44px 14px 16px; }
}