/* QUALITE 24 — en-tête, menu et section Boutique communs (05/11/2026). Généré à partir du système de design : archives/site-unique-05-11/. Tout est préfixé q24u- : aucun effet sur les autres styles. */
:root{--q24u-bg:#F7F5F0;}
.q24u,.q24u-feuille{--ivoire:#F7F5F0;--papier:#FFFDF9;--encre:#23262B;--encre-douce:#5A5E66;--trait:#E3DDD2;--rouge:#9E1022;--rouge-fonce:#7E0C1B;--sur-rouge:#fff;--focus:#1456D9;--marge:clamp(20px,4vw,48px);--entete:64px;--bas:env(safe-area-inset-bottom,0px);--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--r-carte:20px;--ombre:0 1px 2px rgba(35,38,43,.06),0 8px 28px rgba(35,38,43,.08);--titre:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--texte:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-family:var(--texte);box-sizing:border-box}
.q24u *,.q24u-feuille *{box-sizing:border-box}
@media (min-width:900px){.q24u,.q24u-feuille{--entete:72px}}
.q24u-feuille a,.q24u a{color:inherit}
.q24u{font-size:16px;line-height:1.4;color:var(--encre);height:auto}
.q24u .q24u-btn{background:var(--rouge);color:#fff;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--texte);text-decoration:none}
.q24u .q24u-btn:hover{background:var(--rouge-fonce)}
.q24u-feuille .q24u-btn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:var(--rouge);color:#fff;margin-top:24px;text-decoration:none;font:600 16px/1 var(--texte)}
[hidden]{display:none!important}
/* section « Boutique » : rayons mis en avant (pages publiques) */
.q24u-boutique{background:#FFFDF9;border-top:1px solid #E3DDD2;padding:clamp(56px,8vw,104px) 0;font-family:var(--texte,system-ui)}
.q24u-boutique__in{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.q24u-boutique h2{font:400 clamp(32px,4.4vw,56px)/1.06 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;margin:0 0 12px;color:#23262B;letter-spacing:-.01em}
.q24u-boutique h2 em{font-style:normal}
.q24u-boutique p.lead{margin:0 0 32px;color:#5A5E66;font-size:18px;max-width:56ch}
.q24u-rayons-grille{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.q24u-rayons-grille>li:last-child{grid-column:1/-1}
@media (min-width:700px){.q24u-rayons-grille{grid-template-columns:repeat(3,1fr)}.q24u-rayons-grille>li:last-child{grid-column:auto}}
@media (min-width:1100px){.q24u-rayons-grille{grid-template-columns:repeat(5,1fr)}}
.q24u-rayon{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #E3DDD2;border-radius:18px;overflow:hidden;text-decoration:none;color:#23262B}
.q24u-rayon img{width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff;padding:8px}
.q24u-rayon span{display:block;padding:14px 16px 4px;font: 600 20px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif}
.q24u-rayon small{display:block;padding:0 16px 16px;color:#5A5E66;font-size:14px;line-height:1.35}
.q24u-boutique a.q24u-lien{display:inline-flex;align-items:center;min-height:48px;margin-top:28px;padding:0 24px;border:1px solid #23262B;border-radius:999px;color:#23262B;text-decoration:none;font:600 16px var(--texte,system-ui)}
.q24u-boutique a.q24u-lien:hover{background:#23262B;color:#F7F5F0}
/* ===== EN-TÊTE COMMUN (vitrine + boutique) ===== */
.q24u{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--trait)}
/* l'en-tête est « sticky » dans le flux : le vieux remplissage du haut (q24-theme.css, pour l'ancien en-tête fixe) laissait une bande vide de 56 à 64 px au-dessus */
body:has(>.q24u){padding-top:0}
/* téléphone (11/11/2026) : les 4 onglets restent atteignables, la rangée défile à l'horizontale (plus de « display:none » sur Réalisations et Estimer mon projet) */
.q24u-in{height:var(--entete);display:flex;align-items:center;gap:var(--s5);width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--marge)}
.q24u-logo{display:flex;align-items:center;height:44px;flex:none}
.q24u-logo img{height:100%;width:auto}
.q24u-menu{display:none;margin:0 auto;padding:0;list-style:none;gap:clamp(8px,1.6vw,28px)}
.q24u-menu>li{position:relative}
.q24u-menu>li>a,.q24u-menu>li>button{display:flex;align-items:center;min-height:44px;padding:0 6px;background:none;border:0;font:500 15px/1 var(--texte);color:var(--encre);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative}
.q24u-menu>li>a::after,.q24u-menu>li>button::after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:2px;background:var(--rouge);transform:scaleX(0);transition:transform .25s}
.q24u-menu>li:hover>a::after,.q24u-menu>li:hover>button::after,.q24u-menu [aria-current="true"]::after{transform:scaleX(1)}
.q24u-droite{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.q24u-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--encre);background:none;border:0;cursor:pointer;text-decoration:none;position:relative}
.q24u-ico:hover{background:rgba(35,38,43,.07)}
.q24u-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q24u-pastille{position:absolute;top:5px;right:3px;min-width:18px;height:18px;border-radius:9px;background:var(--rouge);color:#fff;font:600 11px/18px var(--texte);text-align:center;padding:0 4px}
.q24u .q24u-btn{min-height:44px;padding:0 20px;font-size:15px}
.q24u .q24u-devis{display:none}
.q24u-burger{display:grid}
@media (min-width:1024px){
  .q24u-menu{display:flex}.q24u-burger{display:none}.q24u .q24u-devis{display:inline-flex}
}
/* panneaux déroulants (ordinateur) */
.q24u-panneau{position:absolute;top:calc(100% + 1px);left:-24px;min-width:min(720px,86vw);padding:var(--s6);background:var(--papier);border:1px solid var(--trait);border-radius:0 0 var(--r-carte) var(--r-carte);box-shadow:var(--ombre);display:none;grid-template-columns:1.1fr 1fr;gap:var(--s6)}
.q24u-menu>li:hover>.q24u-panneau,.q24u-menu>li:focus-within>.q24u-panneau,.q24u-menu>li.ouvert>.q24u-panneau{display:grid}
.q24u-panneau h3{font:600 13px/1.2 var(--texte);color:var(--encre-douce);margin:0 0 var(--s3)}
.q24u-panneau ul{list-style:none;margin:0;padding:0}
.q24u-panneau a{display:block;padding:12px 0;text-decoration:none;font-size:16px;line-height:1.3}
.q24u-panneau a:hover{color:var(--rouge)}
.q24u-panneau small{display:block;color:var(--encre-douce);font-size:13px;margin-top:2px}
/* menu iPhone : feuille plein écran */
.q24u-feuille{position:fixed;inset:0;z-index:80;background:var(--ivoire);padding:calc(var(--entete) + 8px) var(--marge) calc(24px + var(--bas));overflow:auto;display:none}
.q24u-feuille.ouverte{display:block}
.q24u-feuille ul{list-style:none;margin:0;padding:0}
.q24u-feuille>ul>li{border-bottom:1px solid var(--trait)}
.q24u-feuille>ul>li>a,.q24u-feuille summary{display:flex;justify-content:space-between;align-items:center;min-height:60px;font:400 32px/1.1 var(--titre);text-decoration:none;cursor:pointer;list-style:none}
.q24u-feuille summary::-webkit-details-marker{display:none}
.q24u-feuille summary::after{content:"+";font:300 28px/1 var(--texte);color:var(--encre-douce)}
.q24u-feuille details[open] summary::after{content:"−"}
.q24u-feuille details ul{padding:0 0 var(--s4)}
.q24u-feuille details a{display:block;padding:12px 0;font-size:17px;text-decoration:none;color:var(--encre-douce)}
.q24u-feuille .btn{width:100%;margin-top:var(--s5)}
.q24u-fermer{position:fixed;top:10px;right:calc(var(--marge) - 8px);z-index:90}
/* barre de rayons — boutique seulement */
.q24u-rayons{border-top:1px solid var(--trait);background:var(--papier)}
.q24u-rayons ul{display:flex;gap:var(--s2);margin:0 auto;padding:0 var(--marge);max-width:1440px;list-style:none;overflow-x:auto;scrollbar-width:none}
.q24u-rayons a{display:flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px;text-decoration:none;white-space:nowrap;border-radius:999px;color:var(--encre-douce)}
.q24u-rayons a:hover,.q24u-rayons a[aria-current="true"]{background:var(--ivoire);color:var(--encre)}
.q24u-annonce{background:var(--ivoire);color:var(--encre);border-bottom:1px solid var(--trait);text-align:center;font-size:13px;line-height:1.3;padding:11px var(--marge)}


/* ===== 12/11/2026 : contrôle du site (règles communes) ===== */
/* 13/11 : les flèches ‹ › de la galerie des fiches modèles restent de part et d'autre, centrées sur la photo ; c'est le tchat qui s'écarte de la photo (assistant-compagnon.js, liste « eviter ») */
/* Zones tactiles d'au moins 44 px sur téléphone (menu, pied de page, fil d'Ariane, cases à cocher) */
@media (max-width:899px){
  body .site-footer .footer-liens a,body .site-footer .footer-liens span{min-height:44px!important}
  body .site-footer .footer-bas a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
  .q24u-feuille details a,.q24u-feuille>ul>li>a{display:flex;align-items:center;min-height:44px}
  .fil a,.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  .q24-tabbar a{min-height:44px}
  label:has(>input[type=checkbox]),label:has(>input[type=radio]){min-height:44px;padding-block:10px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;margin-inline-end:8px;vertical-align:middle;flex:none}
}
/* Contraste des étiquettes posées sur les images (texte sur fond plein, quelle que soit la photo) */
.q24-boutique__illu{background:rgba(20,20,22,.82)!important;color:#fff!important;font-size:11px!important}
.q-illus{background:#fffdf9;color:#23262B}
.q-photo-leg{background:linear-gradient(transparent,rgba(0,0,0,.8) 55%);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.q-photo-leg b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#23262B;color:#fff;font-weight:600;margin-right:6px;text-shadow:none}

/* ===== 13/11 : captures iPhone ===== */
/* Fil d'Ariane : tous les éléments (liens de 44 px et dernier libellé) sur la même ligne de base ; retour à la ligne propre si le libellé est long */
@media (max-width:899px){
  .fil ol{align-items:center;gap:0}
  .fil li{display:flex;align-items:center;min-height:44px;min-width:0;line-height:1.3}
  .fil [aria-current]{overflow-wrap:anywhere}
}
/* Estimation sur téléphone : on resserre le grand vide entre l'introduction et l'étape 1 (40 + 52 + 22 px de marges cumulées) */
@media (max-width:760px){
  .page-intro:has(+ .estimation-page){padding-bottom:12px}
  .page-intro + .estimation-page{padding-top:8px}
  .estimation-page .estimate-work{padding-top:8px}
}

/* 13/11 : barre noire « Univers » retirée (q24-unique.js) ; au cas où une ancienne copie en cache la poserait encore */
.q24-ecosystem{display:none!important}
