/* =====================================================================
   chrome-mobile.css — l habillage mobile, une seule fois pour tout le site
   ---------------------------------------------------------------------
   Le menu et le pied en version telephone et tablette vivaient en double,
   dans commun-charte.css (pages miroir) et dans charte-chrome.css (pages
   outil). Le 11/09, une retouche faite d un seul cote a laisse le panneau
   mobile visible au format bureau sur les six configurateurs. Ces regles
   sont donc sorties des deux feuilles et rassemblees ici.

   Ce fichier est charge EN DERNIER sur toutes les pages (voir ec_assets()
   dans functions.php) : c est la seule source de verite du menu et du pied
   mobiles. Les pieces du panneau sont posees par assets/js/entete.js.
   ===================================================================== */
/* L entete du panneau, son pied et les boutons de repli sont poses par
   le script sur toutes les largeurs : au format bureau ils n ont rien a
   faire a l ecran. Ils ne reapparaissent que dans la requete ci-dessous. */
.mir .mir-menu-tete,
.mir .mir-menu-pied,
.mir .mir-replier,
.mir-voile{ display:none; }

/* ===== Menu mobile et tablette — refait le 02/11/2026 =====
   Avant : le bandeau passait de display:none a display:block, les sept
   rubriques et leurs quinze sous-entrees empilees, et AUCUN script ne
   l ouvrait — le bouton ne faisait rien. Desormais un panneau qui
   glisse depuis la droite, des rubriques repliables une a la fois, et
   un pied qui garde l appel et le configurateur a portee de pouce.
   Le panneau et son pied sont poses par assets/js/entete.js.
   Au-dessus de 1040 px, rien n est touche. */
@media (max-width:1040px){
  .mir .mir-burger{ display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:7px; width:44px; height:44px; padding:0;
    margin-left:auto; position:relative; z-index:900; }
  .mir .mir-burger span{ width:26px; height:2px; margin:0; border-radius:2px;
    background:#fff; }

  .mir-voile{ display:block; position:fixed; inset:0; z-index:1000;
    background:rgba(20,22,24,.45);
    opacity:0; pointer-events:none; transition:opacity .26s; }
  .mir-voile.est-ouvert{ opacity:1; pointer-events:auto; }

  .mir .mir-menu{ position:fixed; top:0; right:0; bottom:0; left:auto;
    width:100%; max-width:none; z-index:1001; background:#fff;
    display:flex; flex-direction:column; padding:0;
    transform:translateX(102%); transition:transform .3s cubic-bezier(.22,.7,.3,1);
    box-shadow:-18px 0 40px -18px rgba(0,0,0,.45); }
  .mir .mir-menu.est-ouvert{ transform:translateX(0); }

  .mir .mir-menu-tete{ flex:0 0 auto; display:flex; align-items:center;
    justify-content:space-between; gap:12px; height:84px;
    padding:0 10px 0 16px; border-bottom:1px solid var(--ligne,#e5e5e5); }
  .mir .mir-menu-logo{ display:block; flex:0 0 auto; width:76px; }
  .mir .mir-menu-logo img{ display:block; width:76px; height:76px; }
  .mir .mir-menu-fermer{ width:48px; height:48px; border:0; background:none;
    cursor:pointer; font-size:34px; line-height:1; color:var(--encre); }

  .mir .mir-menu > ul{ display:block; flex:1 1 auto; overflow-y:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    margin:0; padding:6px 0; }
  .mir .mir-menu-item{ position:relative;
    border-bottom:1px solid var(--ligne,#e5e5e5); }
  .mir .mir-menu-item:last-child{ border-bottom:0; }
  .mir .mir-menu-lien{ display:flex; align-items:center; height:auto;
    min-height:56px; padding:0 76px 0 20px; border-radius:0;
    color:var(--encre); font-size:14px; }
  .mir .mir-menu-jaune > .mir-menu-lien,
  .mir .mir-menu-vert > .mir-menu-lien{ background:none; }
  .mir .mir-menu-vert > .mir-menu-lien{ color:var(--vert); }
  .mir .mir-menu-lien .mir-chevron{ display:none; }

  /* La zone de repli couvre tout le flanc droit de la rangee : viser un
     chevron de 11 px au doigt faisait manquer la cible et atteindre le
     lien dessous, qui refermait le panneau entier. */
  .mir .mir-replier{ position:absolute; top:0; right:0; width:76px;
    height:56px; border:0; background:none; cursor:pointer; padding:0;
    display:grid; place-items:center; touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(43,47,51,.08); }
  /* Un plus pour ouvrir, un moins pour refermer. La barre horizontale est
     le <i>, la verticale son ::after : elle pivote d un quart de tour et
     vient se poser sur l autre, ce qui change le signe sans changer la
     forme. */
  .mir .mir-replier i{ display:block; position:relative; border:0;
    width:15px; height:2.5px; border-radius:2px; background:#6e6e6e; }
  .mir .mir-replier i::after{ content:""; position:absolute;
    left:50%; top:50%; width:2.5px; height:15px;
    margin:-7.5px 0 0 -1.25px; border-radius:2px; background:#6e6e6e;
    transition:transform .24s cubic-bezier(.22,.7,.3,1); }
  .mir .mir-menu-item.est-deplie .mir-replier i::after{
    transform:rotate(90deg); }
  @media (prefers-reduced-motion: reduce){
    .mir .mir-replier i::after{ transition:none; }
  }

  /* Au doigt, Android et iOS laissent l etat :hover colle sur le dernier
     element touche. La regle de bureau
     « .mir-menu-item:hover .mir-sous-menu { display:block } » reprenait
     donc la main apres le tapotement : la classe partait, le chevron
     tournait, et le sous-menu restait ouvert. Elle est neutralisee ici,
     avec .est-ouvert, heritee de l ancien script. Sous 1040 px, seule
     .est-deplie commande l affichage. */
  .mir .mir-sous-menu{ position:static; display:none; box-shadow:none;
    min-width:0; padding:0 0 10px; background:var(--gris,#f6f6f6); }
  .mir .mir-menu-item:hover > .mir-sous-menu,
  .mir .mir-menu-item.est-ouvert > .mir-sous-menu{ display:none; }
  .mir .mir-menu-item.est-deplie > .mir-sous-menu{ display:block; }
  /* Trois points de specificite : deux regles posees plus bas dans ce
     fichier (la pilule des sous-menus et la mise en avant de « Toute la
     gamme ») gagnaient autrement, et le sous-menu heritait de la taille,
     des marges et du filet prevus pour le bureau. */
  .mir .mir-menu .mir-sous-menu a{ display:block; border-radius:0;
    padding:12px 20px 12px 32px; margin:0; font-size:14px; font-weight:700;
    line-height:1.35; letter-spacing:0; white-space:normal;
    color:var(--encre); }
  .mir .mir-menu .mir-sous-menu a[href="/gamme-reimo/"],
  .mir .mir-menu .mir-sous-menu a[href="/gamme-reimo-charte/"]{
    color:var(--vert,#59815b); border-bottom:0; border-radius:0;
    padding:12px 20px 12px 32px; margin:0; }

  .mir .mir-menu-pied{ flex:0 0 auto; border-top:1px solid var(--ligne,#e5e5e5);
    background:var(--creme,#f2f1e7); display:flex; flex-direction:column;
    gap:9px; padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px)); }
  .mir .mir-menu-cta{ display:flex; align-items:center; justify-content:center;
    min-height:48px; border-radius:999px; text-decoration:none;
    font-weight:900; font-size:13px; text-transform:uppercase; }
  .mir .mir-menu-cta-jaune{ background:var(--jaune,#ffd202); color:var(--encre); }
  .mir .mir-menu-cta-vert{ background:var(--vert,#59815b); color:#fff; }
  .mir .mir-menu-adresse{ margin:2px 0 0; text-align:center; font-size:11px;
    color:#6e6e6e; }

  html.mir-bloque, html.mir-bloque body{ overflow:hidden; }
}

/* Tablette : le panneau reste sur la droite et laisse la page visible ;
   le logo de l en-tete restant a gauche, inutile de le repeter. */
@media (min-width:700px) and (max-width:1040px){
  .mir .mir-menu{ width:430px; }
  .mir .mir-menu-tete{ justify-content:flex-end; }
  .mir .mir-menu-logo{ display:none; }
}

/* Panneau ouvert : l entete porte le panneau, il doit donc passer
   au-dessus des pastilles flottantes, qui partagent son niveau. Les
   pastilles sont masquees pendant ce temps — trois boutons ronds par
   dessus un menu plein ecran ne servent personne. (02/11/2026) */
html.mir-bloque .mir .mir-entete{ z-index:1100; }
html.mir-bloque .mir-pastilles,
html.mir-bloque .mobile-bar,
html.mir-bloque .cmplz-manage-consent{ display:none !important; }

/* ---- pied de page mobile (version A) ------------------------------- */
/* base hors requete media : les pieces injectees par entete.js sont
   neutralisees pour que le pied de bureau reste identique */
.mir .mir-pied-tete{ display:block; width:auto; font:inherit; color:inherit;
  background:none; border:0; padding:0; margin:0; text-align:left;
  letter-spacing:inherit; text-transform:inherit; cursor:default;
  pointer-events:none; -webkit-appearance:none; appearance:none; }
.mir .mir-pied-tete i{ display:none; }
.mir .mir-pied-coord{ display:none; }

@media (max-width:1040px){
  .mir .mir-pied{ padding:28px 20px 0; }
  .mir .mir-pied-marque > a{ display:block; width:128px; margin:0 0 4px; }
  .mir .mir-pied-marque > a img{ display:block; width:100%; height:auto; }
  .mir .mir-pied-coord{ display:block; margin:12px 0 0; }
  .mir .mir-pied-adresse{ margin:0; display:flex; flex-direction:column; gap:3px;
    font-size:14px; line-height:1.5; color:#dfe3e0; text-transform:none;
    letter-spacing:normal; font-weight:400; }
  .mir .mir-pied-heures{ color:#8e9490; }
  .mir .mir-pied-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
  .mir .mir-pied .mir-pied-actions a.mir-pied-bouton{ flex:1 1 140px; display:flex; align-items:center;
    justify-content:center; min-height:46px; border-radius:999px;
    text-decoration:none; font-weight:900; font-size:13px;
    text-transform:uppercase; letter-spacing:0; }
  .mir .mir-pied .mir-pied-actions a.mir-pied-bouton-jaune{ background:var(--jaune,#ffd202); color:var(--encre,#2b2f33); }
  .mir .mir-pied .mir-pied-actions a.mir-pied-bouton-contour{ background:none; color:#fff;
    box-shadow:inset 0 0 0 1.5px #565a58; }
  .mir .mir-pied-colonnes{ gap:0; padding-bottom:18px; }
  .mir .mir-pied-colonne:last-child{ border-bottom:1px solid #3a3d3b; }
  .mir .mir-pied-colonne:not(.mir-pied-marque){ border-top:1px solid #3a3d3b; }
  .mir .mir-pied-colonne:not(.mir-pied-marque) h3{ margin:0; padding:0; border:0; }
  .mir .mir-pied-colonne:not(.mir-pied-marque) .mir-pied-tete{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:54px; cursor:pointer; pointer-events:auto;
    font-size:14px; letter-spacing:-.2px; touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(255,255,255,.08); }
  .mir .mir-pied-colonne:not(.mir-pied-marque) .mir-pied-tete i{
    display:block; position:relative; width:14px; height:2px; flex:0 0 auto;
    border-radius:2px; background:#8e9490; }
  .mir .mir-pied-tete i::after{ content:""; position:absolute; left:50%; top:50%;
    width:2px; height:14px; margin:-7px 0 0 -1px; border-radius:2px;
    background:#8e9490; transition:transform .24s cubic-bezier(.22,.7,.3,1); }
  .mir .mir-pied-colonne.est-deplie .mir-pied-tete i::after{ transform:rotate(90deg); }
  .mir .mir-pied-corps{ display:none; padding:0 0 14px; }
  .mir .mir-pied-colonne.est-deplie .mir-pied-corps{ display:block; }
  .mir .mir-pied-corps a{ display:block; padding:7px 0; font-size:14px; }
  .mir .mir-pied-marque h3{ font-size:11px; letter-spacing:.13em;
    margin:20px 0 10px; padding:0; border:0; color:#8e9490; }
  .mir .mir-pied-bas{ flex-wrap:wrap; gap:6px 14px; font-size:12px; padding:16px 20px; }
}

/* ---- raccourcis flottants effaces sur le pied (mobile) -------------- */
/* Pose par assets/js/entete.js : la classe mir-pied-vu arrive sur <html>
   des que le pied entre dans la fenetre. Les pastilles, la barre basse et
   l onglet de consentement cachaient les signes + et la ligne legale.
   Le pied porte deja le telephone, l itineraire et tous les liens. */
@media (max-width:1040px){
  .mir-pastilles,
  .mobile-bar,
  .cmplz-manage-consent{
    transition:opacity .25s ease, visibility .25s ease;
  }
  html.mir-pied-vu .mir-pastilles,
  html.mir-pied-vu .mobile-bar,
  html.mir-pied-vu .cmplz-manage-consent{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .mir-pastilles,
  .mobile-bar,
  .cmplz-manage-consent{ transition:none; }
}

/* ---- pages outil : ne pas decouper l en-tete ------------------------ */
/* Sur les pages outil (configurateurs, pages legales), chrome-charte.php
   pose l en-tete dans un conteneur .mir.ec-chrome-entete de hauteur nulle,
   et la barre est en position:absolute dedans. Sous 1040 px, la regle
   .mir{ overflow-x:hidden } de charte-chrome.css transformait ce conteneur
   en zone de defilement : la barre, le logo et le burger etaient decoupes
   et devenaient invisibles et incliquables. Signale par le client le 11/09
   sur le configurateur Camp 2. */
@media (max-width:1040px){
  .mir.ec-chrome-entete{ overflow:visible; }
}

/* ---- pied mobile : respiration sous les reseaux --------------------- */
/* La rangee d icones touchait le filet de « Nos produits » : zero pixel
   entre les deux. Signale par le client le 11/09. */
@media (max-width:1040px){
  /* cible de 44 px sous le doigt, sans deplacer les glyphes : la rangee
     recule de 11 px pour que la premiere icone reste calee a gauche. */
  .mir .mir-pied-reseaux{ margin:0 0 16px -11px; gap:0; flex-wrap:wrap; }
  .mir .mir-pied-reseaux a{ display:flex; align-items:center;
    justify-content:center; width:44px; height:44px; }
}

/* ---- pied mobile : le logo ne porte plus sa marge basse ------------- */
/* Le fichier du logo a sa propre marge de 40 px ; sur telephone elle
   s ajoutait aux 4 px du lien et eloignait l adresse. Demande du client
   le 11/09. */
@media (max-width:1040px){
  .mir .mir-pied-marque img{ margin-bottom:0; }
}

/* ---- pied mobile : la ligne legale au bon calibre ------------------- */
/* La bande portait font-size:12px mais ses liens etaient a 16 px, poses
   par .mir .mir-pied-bas a — plus specifique que le conteneur. Sur
   telephone ils pesaient autant que les rubriques du pied. Signale par le
   client le 11/09. */
@media (max-width:1040px){
  .mir .mir-pied-bas a{ font-size:13px; line-height:20px; }
}