/* Toiture Pro — cabecera boutique : barre de recherche, barre de catégories, panneau */

.shophead { position: sticky; top: 0; z-index: 60; }
.shophead__top { background: var(--bg); border-bottom: 1px solid var(--rule); }
.shophead__top-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: .85rem 0; }
.shophead__actions { display: flex; gap: .6rem; align-items: center; }
.shophead__burger { display: none; appearance: none; border: 1.5px solid var(--rule); background: var(--bg-soft); color: var(--ink); width: 40px; height: 40px; border-radius: 6px; font-size: 1.1rem; cursor: pointer; }

/* ---- Recherche en direct ---- */
.srch { position: relative; width: 100%; max-width: 640px; justify-self: center; }
.srch__field { display: flex; align-items: center; gap: .6rem; height: 46px; padding: 0 .85rem; background: var(--bg-soft); border: 1.5px solid var(--rule); border-radius: 6px; transition: border-color .18s, background .18s; }
.srch__field:focus-within { border-color: var(--orange); background: var(--bg); }
.srch__icon { color: var(--ink-muted); font-size: 1.25rem; line-height: 1; }
.srch__field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: .95rem; outline: none; }
.srch__field input::-webkit-search-cancel-button { display: none; }
.srch__clear { appearance: none; border: 0; background: transparent; color: var(--ink-muted); font-size: .85rem; cursor: pointer; padding: .2rem; }
.srch__clear:hover { color: var(--orange); }
.srch__panel { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-md); padding: .45rem; z-index: 70; max-height: 62vh; overflow: auto; }
.srch__hint { margin: 0; padding: .95rem; color: var(--ink-muted); font-size: .88rem; }
.srch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.srch__list a { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem; border-radius: 6px; }
.srch__list a:hover { background: var(--bg-soft); color: inherit; }
.srch__thumb { width: 46px; height: 46px; border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--ink-faint); font-weight: 800; font-size: .85rem; }
.srch__thumb img { width: 100%; height: 100%; object-fit: contain; }
.srch__body strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.srch__body small { display: block; color: var(--ink-muted); font-size: .78rem; margin-top: .1rem; }
.srch__side { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.srch__side b { color: var(--orange); font-size: .9rem; }
.srch__side em { font-style: normal; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); }

/* ---- Barre de catégories ---- */
.catbar { background: var(--blue-deep); position: relative; }
.catbar__row { display: flex; align-items: stretch; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.catbar__row::-webkit-scrollbar { display: none; }
.catbar__row > button, .catbar__row > a { appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.88); font-family: var(--sans); font-size: .88rem; font-weight: 600; padding: .85rem .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; transition: background .16s, color .16s; }
.catbar__row > button:hover, .catbar__row > a:hover { background: rgba(255,255,255,.1); color: #fff; }
.catbar__row > a.active { color: var(--orange); }
.catbar__item.is-open { background: var(--card); color: var(--ink); }
.catbar__item i { font-style: normal; font-size: .68rem; opacity: .75; }
.catbar__all { background: var(--orange) !important; color: #fff !important; font-weight: 700 !important; }
.catbar__all:hover, .catbar__all.is-open { background: var(--orange-deep) !important; }
.catbar__sep { flex: 1 0 1rem; }

/* ---- Panneau de catégories ---- */
.mm-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-md); z-index: 65; padding: 1.75rem 0; max-height: 74vh; overflow: auto; }
.mm-panel__inner { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.mm-panel--single .mm-panel__inner { grid-template-columns: 1fr; }
.mm-col__head a { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; }
.mm-col__head a:hover { color: var(--orange); }
.mm-col__head p { color: var(--ink-muted); font-size: .84rem; margin: .25rem 0 1rem; }
.mm-col__grid { display: grid; gap: .35rem; grid-template-columns: 1fr; }
.mm-panel--single .mm-col__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; }
.mm-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .7rem; align-items: center; padding: .45rem; border-radius: 6px; border: 1px solid transparent; }
.mm-tile:hover { background: var(--bg-soft); border-color: var(--rule); color: inherit; }
.mm-tile__img { width: 52px; height: 52px; border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; }
.mm-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.mm-tile__ph { font-weight: 800; color: var(--ink-faint); font-size: .9rem; text-transform: uppercase; }
.mm-tile__txt strong { display: block; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.mm-tile__txt small { display: block; color: var(--ink-muted); font-size: .76rem; margin-top: .1rem; }
.mm-tile__txt em { font-style: normal; font-size: .7rem; color: var(--orange); font-weight: 700; }

@media (max-width: 900px) {
  .shophead__top-row { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; }
  .srch { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .shophead__actions .btn--sm { display: none; }
  .shophead__burger { display: block; }
  .mm-panel { padding: 1.25rem 0; }
  .mm-panel__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============ FICHES PRODUIT FAÇADE ============ */
.fcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem;margin-top:2.5rem}
.fcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.fcard:hover{border-color:var(--orange);box-shadow:var(--shadow-md)}
.fcard__media{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:1rem;border-bottom:1px solid var(--rule)}
:root[data-theme="dark"] .fcard__media{background:#f6f6f4}
.fcard__img{width:100%;height:100%;object-fit:contain;display:block}
.fcard__ph{width:100%;height:100%;display:grid;place-items:center;background:var(--bg-soft);color:var(--ink-muted);font-weight:800;font-size:1.5rem;letter-spacing:.06em}
.fcard__body{padding:.9rem 1rem 1rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.fcard__brand{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.fcard__name{font-size:.95rem;line-height:1.3;margin:0;text-wrap:pretty}
.fcard__format{font-size:.8rem;font-weight:700;color:var(--ink)}
.fcard__note{font-size:.8rem;line-height:1.5;color:var(--ink-muted);margin:.15rem 0 0}
.fcard__cta{display:block;text-align:center;padding:.7rem;background:var(--orange);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none;cursor:pointer}
.fcard__cta:hover{background:var(--orange-deep);color:#fff}

/* ============ TILES DE CATÉGORIE ============ */
.ctile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.25rem}
.ctile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:10px;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.ctile:hover{border-color:var(--orange);box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit}
.ctile__media{aspect-ratio:16/10;background:var(--bg-soft);display:grid;place-items:center;overflow:hidden}
.ctile__media img{width:100%;height:100%;object-fit:cover;display:block}
.ctile__ph{font-weight:800;font-size:1.4rem;letter-spacing:.06em;color:var(--ink-muted)}
.ctile__body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.ctile__body h3{margin:0;font-size:1rem;line-height:1.25}
.ctile__body small{font-size:.78rem;color:var(--ink-muted)}
.ctile__count{margin-top:.4rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}

/* ============ LIGNE DE SPÉCIFICATIONS ============ */
.specline{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;margin:2.5rem 0 0;background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.specline>div{background:var(--card);padding:.9rem 1.1rem}
.specline dt{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .25rem}
.specline dd{margin:0;font-size:.9rem;font-weight:600}

.empty-note{margin-top:2.5rem;padding:1.4rem 1.6rem;background:var(--bg-soft);border:1px dashed var(--rule);border-radius:10px}
.empty-note strong{display:block;margin-bottom:.3rem}
.empty-note p{margin:0;font-size:.88rem;color:var(--ink-muted)}

.catgroup{margin-top:2.5rem}
.catgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.catgroup__head h3{margin:0;font-size:1.15rem}
.catgroup__head a{font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange);cursor:pointer;text-decoration:none;white-space:nowrap}
.catgroup__head a:hover{color:var(--orange-deep)}

/* Pas de rétrécissement des libellés dans la barre de catégories */
.catbar__row > button, .catbar__row > a { flex: 0 0 auto; white-space: nowrap; }
/* Indice de défilement quand la barre dépasse la largeur disponible */
@media (max-width: 1060px){
  .catbar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:46px;pointer-events:none;background:linear-gradient(to right,rgba(8,40,68,0),var(--blue-deep))}
}
/* Photo de scène (repli) : elle remplit la vignette au lieu d'être contenue */
.fcard__img--scene{object-fit:cover}
.fcard__media:has(.fcard__img--scene){padding:0;background:var(--bg-soft)}

/* ---- Vignettes de catégorie : image produit réelle ou pastille typographique ---- */
.ctile__media{position:relative}
.ctile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctile__ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:2.3rem;letter-spacing:.05em}
.mm-tile__ph{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.03em}
.mm-tile__img:has(.mm-tile__ph){background:transparent;border-color:transparent}
.fcard__ph{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:.05em;background:var(--blue-deep)}
.fcard__media:has(.fcard__ph){padding:0}
.srch__thumb span{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.03em;border-radius:3px}

/* Le panneau d'une seule famille doit tenir sans ascenseur interne */
.mm-panel--single { max-height: min(80vh, 660px); }

/* ---- Panneau « Toutes les catégories » : 3 colonnes, lignes compactes ----
   Les 3 groupes tiennent côte à côte et les enfants sont des liens texte
   (les vignettes 81px empilées en 1 colonne faisaient 1365px de haut). */
.mm-panel--all { max-height: min(80vh, 640px); }
.mm-panel--all .mm-panel__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.mm-panel--all .mm-col { padding-top: 0; }
.mm-panel--all .mm-col__grid { grid-template-columns: minmax(0, 1fr); gap: 1px; }
.mm-panel--all .mm-tile { grid-template-columns: minmax(0, 1fr); gap: 0; padding: .3rem .45rem; }
.mm-panel--all .mm-tile__img { display: none; }
.mm-panel--all .mm-tile__txt small { display: none; }
.mm-panel--all .mm-col__head p { margin-bottom: .6rem; }
@media (max-width: 900px) {
  .mm-panel--all .mm-panel__inner { grid-template-columns: minmax(0, 1fr); }
}
/* Pastille produit : bloc moins dominant qu'un carré 1:1 */
.fcard__media:has(.fcard__ph) { aspect-ratio: 5 / 3; }

/* Une seule ligne par entrée dans le panneau « Toutes les catégories » :
   9 familles façade ne tenaient pas dans le plafond lié à la hauteur d'écran. */
.mm-panel--all .mm-tile__txt em { display: none; }
.mm-panel--all .mm-tile { padding: .22rem .45rem; }
.mm-panel--all .mm-tile__txt strong { font-size: .85rem; line-height: 1.35; }

/* ---- Visuels agrandis pour une lecture plus facile ---- */
/* Vignettes des familles/catégories */
.ctile-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.ctile__media{aspect-ratio:4/3}
.ctile__ph{font-size:3.2rem}
.ctile__body{padding:1rem 1.1rem 1.15rem}
.ctile__body h3{font-size:1.1rem}

/* Fiches produit façade */
.fcard-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.fcard__media:has(.fcard__ph){aspect-ratio:4/3}
.fcard__ph{font-size:3rem}

/* Vignettes du panneau d'une famille */
.mm-panel--single .mm-tile{grid-template-columns:88px minmax(0,1fr);gap:.9rem}
.mm-panel--single .mm-tile__img{width:88px;height:88px;border-radius:6px}
.mm-panel--single .mm-tile__ph{font-size:1.5rem}
.mm-panel--single .mm-tile__txt strong{font-size:.95rem}

/* Résultats de recherche */
.srch__list a{grid-template-columns:64px minmax(0,1fr) auto;gap:1rem}
.srch__thumb{width:64px;height:64px;border-radius:6px}
.srch__thumb span{font-size:1rem}
.srch__body strong{font-size:.95rem}

/* ---- Panneau d'une famille : grille sur plusieurs colonnes ----
   9 familles empilées en 1 colonne à 88px dépassaient le plafond lié à la
   hauteur d'écran ; 3 colonnes ramènent le tout à 3 rangées. */
.mm-panel--single .mm-col__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem 1.25rem}
@media (max-width:1000px){.mm-panel--single .mm-col__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mm-panel--single .mm-col__grid{grid-template-columns:minmax(0,1fr)}}

/* ---- Panneau d'une famille : le budget de hauteur commande la grille ----
   La règle 3 colonnes précédente ne s'appliquait qu'au-dessus de 1000px, or
   c'est autour de 900px que la hauteur manque. On passe en min-width pour que
   les largeurs intermédiaires reçoivent bien 3 colonnes, avec une vignette de
   72px : 3 rangées ≈ 270px pour un budget de ~390px. */
.mm-panel--single{max-height:min(92vh,720px)}
.mm-panel--single .mm-tile{grid-template-columns:72px minmax(0,1fr);gap:.8rem}
.mm-panel--single .mm-tile__img{width:72px;height:72px}
.mm-panel--single .mm-tile__ph{font-size:1.3rem}
.mm-panel--single .mm-col__grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.mm-panel--single .mm-col__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.mm-panel--single .mm-col__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}