/* Genere par tools/generer-site-publie.py — ne pas editer a la main. */
body{margin:0;background:#FAFAF9;font-family:'Public Sans',system-ui,sans-serif}a{color:#00696E}a:hover{color:#FF8A2A}html:not(.android) .si-android{display:none!important}
[data-hv="h00"]:hover{color:#fff}
[data-hv="h01"]:hover{border-color:#00696E}
[data-hv="h02"]:hover{background:#E3F1F1}
/* --- Menu telephone : un bouton, sans une ligne de JavaScript --------------
   Le site n'a plus de script du tout : le menu repose sur une case a cocher
   posee en tete du <header> et sur le selecteur « ~ » vers le <nav>, comme les
   filtres du catalogue. Les styles du site etant inline, il faut !important
   pour reprendre la main sur display:flex. */
.menu-t,.menu-b{display:none}

/* --- Logo : un SVG pose en hauteur, pas en largeur -------------------------
   Le lockup fait 1105,86 x 304,42 (3,63 pour 1) et n'est cale que par sa
   hauteur. La regle img{height:auto!important} de la mise en page telephone,
   plus bas, le ferait retomber a sa hauteur intrinseque : un logo de 304 px
   dans le bandeau. Ces deux regles sont hors media query pour tenir dans les
   deux mises en page ; a !important egal, c'est la specificite qui tranche. */
header img.mark{height:34px!important;width:auto!important;max-width:none!important}
footer img.mark{height:28px!important;width:auto!important;max-width:none!important}

/* --- Menu deroulant de langue (un <details>, pas un <select> : il faut que ca
   navigue sans JavaScript et que les entrees restent des liens suivis). ------ */
.lang{position:relative;margin-left:10px;font-size:13px}
.lang > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
        gap:9px;padding:7px 11px;border:1px solid rgba(255,255,255,.22);
        border-radius:6px;color:#FFFFFF;font-weight:600;white-space:nowrap}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::after{content:"";width:7px;height:7px;margin-top:-4px;
        border-right:2px solid #A8B3BC;border-bottom:2px solid #A8B3BC;
        transform:rotate(45deg)}
.lang[open] > summary::after{margin-top:2px;transform:rotate(225deg)}
.lang-p{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;z-index:30;
        display:flex;flex-direction:column;padding:6px;background:#1D1D26;
        border:1px solid #3A3A46;border-radius:8px;
        box-shadow:0 12px 26px rgba(0,0,0,.38)}
.lang-p a{padding:9px 12px;border-radius:5px;color:#E7E5E0;text-decoration:none;
        font-weight:500}
.lang-p a:hover{background:#2A2A34;color:#FFFFFF}
.lang-p a[aria-current]{background:#00696E;color:#FFFFFF;font-weight:700}

@media (max-width:900px){
  header{position:relative;padding-right:72px!important}
  .menu-t{display:block;position:absolute;right:16px;top:11px;width:44px;height:40px;
          margin:0;opacity:0;z-index:6;cursor:pointer}
  .menu-b{display:flex;align-items:center;justify-content:center;position:absolute;
          right:16px;top:11px;width:44px;height:40px;box-sizing:border-box;
          border:1px solid rgba(255,255,255,.24);border-radius:6px;z-index:5}
  /* Les trois barres sont DESSINEES, pas ecrites : ni « Public Sans » ni les
     polices systeme ne portent forcement U+2630, et un menu en tofu n'est plus
     un menu. Fermeture en croix, avec les deux memes barres. */
  .menu-b::before{content:"";display:block;width:20px;height:2px;border-radius:2px;
          background:#FFFFFF;box-shadow:0 -6px 0 #FFFFFF,0 6px 0 #FFFFFF}
  .menu-t:checked ~ .menu-b::before{box-shadow:none;transform:rotate(45deg)}
  .menu-t:checked ~ .menu-b::after{content:"";position:absolute;left:50%;top:50%;
          width:20px;height:2px;margin:-1px 0 0 -10px;border-radius:2px;
          background:#FFFFFF;transform:rotate(-45deg)}
  header nav{display:none!important}
  .menu-t:checked ~ nav{display:flex!important;flex-direction:column!important;
      align-items:stretch!important;width:100%;gap:0!important;margin-top:8px!important}
  .menu-t:checked ~ nav > a{display:block;box-sizing:border-box;width:100%;
      padding:14px 2px!important;border-top:1px solid rgba(255,255,255,.12);
      border-radius:0!important;font-size:16px!important;text-align:left}
  .menu-t:checked ~ nav > a[style*="#FF8A2A"]{margin:12px 0 4px!important;
      padding:13px 16px!important;border-top:0!important;border-radius:6px!important;
      text-align:center;font-weight:700!important}
  /* Dans le menu ouvert, le panneau se deplie dans le flux : un panneau flottant
     deborderait de l'ecran. */
  .menu-t:checked ~ nav > .lang{margin:12px 0 4px!important;width:100%}
  .menu-t:checked ~ nav > .lang > summary{justify-content:space-between;
      padding:12px 14px}
  .menu-t:checked ~ nav > .lang .lang-p{position:static;margin-top:6px;
      min-width:0;box-shadow:none}
}

/* --- Lot B : mise en page telephone (le site n'avait aucune media query) --- */
@media (max-width:900px){
  /* 1. Les grilles fixes (1.1fr .9fr, repeat(4,1fr)...) passent en une colonne. */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:22px!important}
  /* 2. Les marges laterales de 48 px deviennent 20 px (padding:Xpx 48px...). */
  [style*="px 48px"]{padding-left:20px!important;padding-right:20px!important}
  /* 3. Les titres composes pour un ecran large. */
  [style*="font-size:58px"]{font-size:32px!important;line-height:1.1!important}
  [style*="font-size:42px"]{font-size:28px!important;line-height:1.15!important}
  [style*="font-size:38px"],[style*="font-size:36px"]{font-size:26px!important}
  [style*="font-size:30px"],[style*="font-size:28px"]{font-size:23px!important}
  [style*="font-size:24px"]{font-size:20px!important}
  /* 4. Header : le logo reste a gauche, la navigation passe dessous et s'enroule. */
  header{flex-wrap:wrap!important;gap:10px!important;padding:12px 16px!important}
  header nav{gap:14px!important;flex-wrap:wrap!important;font-size:13px!important;
             row-gap:10px!important}
  /* 5. Un enfant de grille a min-width:auto : sans cela, un tableau qui defile
        pousse quand meme la page en largeur (debordement horizontal). */
  [style*="display:grid"] > *{min-width:0!important}
  /* 6. Les tableaux (comparatif des Tarifs, informations d'un modele) defilent
        au doigt au lieu de deborder. */
  table{display:block!important;overflow-x:auto!important;max-width:100%!important}
  table thead,table tbody{display:table!important;width:100%!important;min-width:620px}
  /* 7. Rien ne depasse : images, blocs a largeur fixe, pieds de page. */
  img{max-width:100%!important;height:auto!important}
  [style*="max-width:480px"],[style*="max-width:280px"]{max-width:100%!important}
  footer{padding-left:20px!important;padding-right:20px!important}
  /* 8. Le bandeau metier garde sa photo, mais moins haut. */
  [style*="padding:76px 48px 68px"]{padding-top:44px!important;padding-bottom:40px!important}
  [style*="padding:72px 48px 64px"]{padding-top:40px!important;padding-bottom:36px!important}
  /* 9. Le QR du catalogue passe sous le texte du modele. */
  [data-gen="voisins"] [style*="grid-template-columns"]{gap:18px!important}
  /* 10. Les fiches du catalogue : le QR passe sous le texte du modele. */
  .mdl{display:block!important}
  .mdl > a{display:block!important;margin-top:14px!important}
}
@media (max-width:560px){
  [style*="display:flex"][style*="gap:22px"]{flex-wrap:wrap!important}
  [style*="font-size:58px"]{font-size:27px!important}
  [style*="font-size:42px"]{font-size:24px!important}
}