/* Webshop — vitrine (maquette 2 du 02/11/2026 : menu des familles à gauche, vignettes photo) ; la couleur principale --acc vient des réglages GestCom */
:root { --largeur: 1280px; --acc: #c0392b; --acc-f: #fbeceb; --encre: #1f2328; --doux: #5f6872; --fond: #f3f4f6; --carte: #fff; --trait: #e3e5e8; --ok: #146c43; --bas: #9a6a00; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; } /* (rien ne dépasse sur le côté : Safari sur iPad réduirait sinon toute la page pour tout faire tenir) */
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.5 "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; }
@supports (background: color-mix(in srgb, red 10%, white)) { :root { --acc-f: color-mix(in srgb, var(--acc) 10%, white); } }

/* Bandeau : ouvert / fermé, adresse, téléphone, e-mail */
.bandeau { background: var(--encre); color: #cfd4da; font-size: 13px; }
.bandeau .in { max-width: var(--largeur); margin: 0 auto; padding: 0 16px; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.bandeau a { color: #e6e9ec; display: inline-flex; align-items: center; gap: 6px; }
.bandeau a:hover { color: #fff; text-decoration: underline; }
.bandeau b { color: #fff; font-weight: 600; }
.bandeau svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: .8; }
.bandeau .droite { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.etat { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #fff; cursor: default; position: relative; }
.etat i { width: 9px; height: 9px; border-radius: 50%; background: #2fb36d; box-shadow: 0 0 0 3px rgba(47,179,109,.25); }
.etat.ferme i { background: #e0605a; box-shadow: 0 0 0 3px rgba(224,96,90,.25); }
.etat small { font-weight: 400; color: #cfd4da; font-size: 13px; }
.etat .horaires { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; background: #fff; color: var(--encre); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 10px 14px; z-index: 50; font-weight: 400; white-space: nowrap; }
.etat:hover .horaires, .etat:focus-within .horaires { display: block; }
.horaires table { border-collapse: collapse; font-size: 13px; }
.horaires td { padding: 2px 0; }
.horaires td:first-child { padding-right: 16px; color: var(--doux); }
.horaires tr.auj td { font-weight: 700; color: var(--acc); }

/* En-tête : logo, recherche, raccourcis */
header { background: var(--carte); border-bottom: 3px solid var(--acc); position: sticky; top: 0; z-index: 20; }
.entete { max-width: var(--largeur); margin: 0 auto; padding: 10px 16px; display: flex; gap: 18px; align-items: center; }
.logo img { height: 80px; display: block; }
.logo b { font-size: 1.4rem; color: var(--acc); }
.btn-fam { display: none; align-items: center; gap: 6px; border: 1px solid var(--trait); background: #fff; border-radius: 6px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
.btn-fam svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.cherche { flex: 1; display: flex; max-width: 640px; }
.cherche input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border: 1px solid #c8ccd1; border-right: 0; border-radius: 6px 0 0 6px; background: #f8f9fa; }
.cherche input:focus { outline: none; border-color: var(--acc); background: #fff; }
.cherche button { background: var(--acc); color: #fff; border: 0; border-radius: 0 6px 6px 0; padding: 0 18px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cherche button svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.4; vertical-align: -3px; margin-right: 6px; }
.raccourcis { margin-left: auto; display: flex; gap: 6px; font-size: 13px; }
.raccourcis a { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.2; color: var(--encre); font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.raccourcis svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.raccourcis a.promo { color: var(--acc); }
.raccourcis a:hover { color: var(--acc); background: var(--acc-f); }

/* Colonne des familles + contenu */
.page { max-width: var(--largeur); margin: 0 auto; padding: 18px 16px 40px; display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.page.seule { grid-template-columns: 1fr; }
aside.familles { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; position: sticky; top: 118px; max-height: calc(100vh - 136px); overflow: auto; }
aside h2 { margin: 0; padding: 11px 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; background: var(--encre); color: #fff; border-radius: 8px 8px 0 0; }
.fam { border-bottom: 1px solid var(--trait); }
.fam:last-child { border-bottom: 0; }
.fam > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.fam > a::after { content: "›"; color: #a0a6ad; font-size: 18px; line-height: 1; transition: transform .15s; }
.fam > a:hover { background: var(--fond); color: var(--acc); }
.fam.ouverte > a { color: var(--acc); background: var(--acc-f); }
.fam.ouverte > a::after { transform: rotate(90deg); color: var(--acc); }
.fam ul { display: none; list-style: none; margin: 0; padding: 4px 0 8px; }
.fam.ouverte ul { display: block; }
.fam li a { display: block; padding: 4px 14px 4px 26px; font-size: 13.5px; color: #3c434b; border-left: 3px solid transparent; }
.fam li a:hover { color: var(--acc); }
.fam li a.on { color: var(--acc); border-left-color: var(--acc); font-weight: 600; background: var(--acc-f); }
main { min-width: 0; }

/* Accueil */
.hero { background: var(--encre) linear-gradient(115deg, transparent 62%, var(--acc) 62%); color: #fff; border-radius: 8px; padding: 28px 30px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: center; }
.hero h1 { margin: 0 0 6px; font-size: 1.7rem; line-height: 1.2; text-wrap: balance; }
.hero p { margin: 0 0 14px; color: #cfd4da; }
.hero ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.hero li::before { content: "✓ "; font-weight: 700; }
.btn { display: inline-block; background: var(--acc); color: #fff; border: 0; border-radius: 6px; padding: 9px 18px; font-weight: 600; cursor: pointer; }
.btn.blanc { background: #fff; color: var(--encre); }
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0 0; }
.atout { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--doux); display: flex; gap: 10px; align-items: center; }
.atout span { font-size: 22px; }
.atout b { display: block; color: var(--encre); font-size: 14px; }
h2.sec { font-size: 1.15rem; margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; }
h2.sec a { margin-left: auto; font-size: .85rem; color: var(--acc); font-weight: 600; }
.marques { display: flex; flex-wrap: wrap; gap: 8px; }
.marques a { background: var(--carte); border: 1px solid var(--trait); border-radius: 6px; padding: 10px 16px; font-weight: 700; color: #6b737c; letter-spacing: .03em; font-size: 14px; }
.marques a:hover { color: var(--acc); border-color: var(--acc); }
.marques a.avec-logo { padding: 6px 12px; display: flex; align-items: center; justify-content: center; min-width: 110px; height: 52px; background: #fff; }
.marques a.avec-logo img { max-height: 38px; max-width: 120px; object-fit: contain; }
.titre-logo { display: flex; align-items: center; gap: 14px; }
.titre-logo img { max-height: 54px; max-width: 180px; object-fit: contain; }
.logo-marque { display: inline-block; margin-bottom: 6px; }
.logo-marque img { max-height: 44px; max-width: 160px; object-fit: contain; display: block; }

/* Page d'accueil réglable (Paramètres › Webshop › Page d'accueil de GestCom) : même espace entre tous les blocs, dans n'importe quel ordre */
.accueil { display: grid; gap: 24px; }
.accueil .bloc-acc { min-width: 0; }
.accueil .bloc-acc > *, .accueil .bloc-acc > section > h2.sec:first-child, .accueil .bloc-acc > h2.sec:first-child { margin-top: 0; }
.slider { position: relative; border-radius: 10px; overflow: hidden; height: 300px; background: var(--encre); }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; color: #fff; }
.slide.on { opacity: 1; visibility: visible; }
.slide.sans-img { grid-template-columns: 1fr; background: var(--encre) linear-gradient(115deg, transparent 62%, var(--acc) 62%); }
.slide .txt { padding: 30px 34px 40px; }
.slide .etiq { display: inline-block; background: var(--acc); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 4px; margin-bottom: 10px; letter-spacing: .04em; }
.slide h2 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 8px; text-wrap: balance; max-width: 22ch; }
.slide p { color: #cfd4da; margin: 0 0 16px; max-width: 52ch; }
.slide .vis { height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.slide .vis img { max-height: 82%; max-width: 78%; object-fit: contain; }
.points { position: absolute; bottom: 14px; left: 34px; display: flex; gap: 6px; }
.points button { width: 26px; height: 5px; border: 0; border-radius: 3px; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.points button.on { background: var(--acc); }
.fleche { position: absolute; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); cursor: pointer; font-size: 18px; line-height: 1; color: var(--encre); box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 2; }
.slider .fleche { bottom: 10px; } .slider .fleche.g { right: 50px; } .slider .fleche.d { right: 12px; }
.ronds { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 8px; }
.rond { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.rond .im { width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 1px solid var(--trait); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color .15s, transform .15s; }
.rond:hover .im { border-color: var(--acc); transform: translateY(-2px); }
.rond .im img { width: 70%; height: 70%; object-fit: contain; }
.rond .ini { width: 56px; height: 56px; font-size: 22px; }
.rub-art { margin-top: 26px; }
.onglets-art { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.onglets-art button { font: inherit; font-size: 1.05rem; font-weight: 700; border: 0; background: none; padding: 4px 10px 6px; border-bottom: 3px solid transparent; color: var(--doux); cursor: pointer; }
.onglets-art button.on { color: var(--encre); border-color: var(--acc); }
.rangee { position: relative; }
.rangee .fleche { top: 38%; }
.rangee .fleche.g { left: -14px; } .rangee .fleche.d { right: -14px; }
.piste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.piste::-webkit-scrollbar { display: none; }
.piste .produit { scroll-snap-align: start; }
.grille.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.regardes { margin-top: 26px; }
/* Fiche article : « Envoyer à un ami » */
.partage { position: relative; margin: 10px 0 4px; }
.btn-partage { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--trait); background: var(--carte); color: var(--encre); border-radius: 6px; padding: 7px 12px; font-weight: 600; cursor: pointer; }
.btn-partage:hover { border-color: var(--acc); color: var(--acc); }
.btn-partage svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.menu-partage { position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; display: grid; min-width: 210px; z-index: 30; }
.menu-partage a, .menu-partage button { text-align: left; border: 0; background: none; font: inherit; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--encre); }
.menu-partage a:hover, .menu-partage button:hover { background: var(--fond); color: var(--acc); }
.badge-phare { position: absolute; top: 8px; right: 8px; background: #fff; color: var(--acc); border: 1px solid var(--acc); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; z-index: 1; }
.intro-page { margin: -4px 0 12px; color: var(--doux); }
@media (max-width: 760px) { .grille.grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.produit.tout-voir { align-items: center; justify-content: center; font-weight: 700; color: var(--acc); min-height: 200px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.tuile-pub { border-radius: 10px; padding: 24px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 6px; color: #fff; }
.tuile-pub b { font-size: 1.35rem; line-height: 1.2; }
.tuile-pub span { color: rgba(255,255,255,.85); font-size: 14px; max-width: 38ch; }
.tuile-pub .btn { align-self: flex-start; margin-top: 6px; color: #fff; }
.tuile-pub.a { background: linear-gradient(120deg, #1f2328, #3a4350); }
.tuile-pub.b { background: var(--acc); }
.tuile-pub.b .btn { background: #fff; color: var(--encre); }
.focus { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 26px; }
.focus-txt { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.focus-txt .im { height: 120px; display: flex; align-items: center; justify-content: center; }
.focus-txt .im img { max-height: 100%; max-width: 100%; object-fit: contain; }
.focus-txt h3 { margin: 0; font-size: 1.25rem; }
.focus-txt p { margin: 0; color: var(--doux); font-size: 14px; }
.focus-txt ul { margin: 0; padding-left: 18px; font-size: 14px; }
.focus-txt .btn { align-self: flex-start; margin-top: auto; }
.focus .grille { grid-template-columns: repeat(3, 1fr); }
.magasin { display: grid; grid-template-columns: 1.2fr 1fr; margin-top: 26px; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); background: var(--carte); }
.magasin .carte-plan { min-height: 230px; background: linear-gradient(135deg, #e9eef3 25%, #dfe6ec 25% 50%, #e9eef3 50% 75%, #dfe6ec 75%) 0 0 / 28px 28px; display: flex; align-items: center; justify-content: center; color: var(--doux); font-weight: 600; }
.magasin .carte-plan img { width: 100%; height: 100%; object-fit: cover; }
.magasin .infos { padding: 22px; display: grid; gap: 10px; align-content: center; font-size: 14px; }
.magasin h3 { margin: 0; font-size: 1.2rem; }
.magasin table { border-collapse: collapse; font-size: 13.5px; }
.magasin td { padding: 2px 0; } .magasin td:first-child { color: var(--doux); padding-right: 16px; }
.magasin tr.auj td { color: var(--acc); font-weight: 700; }
.magasin .boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.magasin .btn.blanc { border: 1px solid var(--trait); }
.texte-libre { margin-top: 26px; background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--acc); border-radius: 8px; padding: 16px 20px; }
.texte-libre h2 { margin: 0 0 6px; font-size: 1.15rem; }
.texte-libre p { margin: 0; color: #3a4048; }
.atouts { margin-top: 14px; }
@media (max-width: 860px) { .focus { grid-template-columns: 1fr; } .focus .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .slide, .slide.sans-img { grid-template-columns: 1fr; background: var(--encre); } .slide .vis { display: none; } .slider { height: 270px; }
  .slide h2 { font-size: 1.45rem; } .piste { grid-auto-columns: 46%; } .duo, .magasin { grid-template-columns: 1fr; } .rangee .fleche { display: none; } }

/* Vignettes des familles / sous-familles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.tuile:hover { border-color: var(--acc); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.tuile .im { height: 116px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.tuile .im img, .tete-fam .im img { width: 100%; height: 100%; object-fit: contain; }
.ini { width: 64px; height: 64px; border-radius: 50%; background: var(--acc-f); color: var(--acc); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tuile b { margin-top: auto; font-size: 13.5px; padding: 8px 10px; border-top: 1px solid var(--trait); line-height: 1.25; }
.tuile b small { display: block; font-weight: 400; color: var(--doux); font-size: 12px; }
.tete-fam { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 14px 18px; display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.tete-fam .im { width: 120px; height: 90px; flex: none; display: flex; align-items: center; justify-content: center; }
.tete-fam h1 { margin: 0 0 4px; font-size: 1.45rem; }
.tete-fam p { margin: 0; color: var(--doux); font-size: 14px; }
.tete-fam .titre-fam { flex: none; }
.texte-fam { flex: 1; min-width: 0; margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--trait); font-size: 13.5px; line-height: 1.55; color: #3a4048; max-height: 9.5em; overflow: auto; }
@media (max-width: 700px) { .tete-fam { flex-wrap: wrap; } .texte-fam { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid var(--trait); padding-top: 10px; } }

/* Articles */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.produit { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .15s, border-color .15s; }
.produit:hover { border-color: #c8ccd1; box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.ph { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--trait); }
/* (photo dans un cadre de taille fixe : toutes les cartes ont la même hauteur, quelle que soit la forme de la photo) */
.ph { position: relative; overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.vignettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vignettes button { width: 72px; height: 72px; padding: 4px; background: #fff; border: 1px solid var(--trait); border-radius: 6px; cursor: pointer; }
.vignettes button.on, .vignettes button:hover { border-color: var(--acc); }
.vignettes img { width: 100%; height: 100%; object-fit: contain; }
.ph svg { width: 46%; max-width: 120px; opacity: .25; stroke: var(--encre); fill: none; stroke-width: 1.4; }
.produit .c { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.marque { font-size: 11.5px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.nom { font-size: 14px; line-height: 1.3; font-weight: 600; }
.ref { font-size: 12px; color: var(--doux); }
.bas-c { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: end; gap: 6px; }
.prix { font-size: 1.15rem; font-weight: 700; }
.prix small { font-size: .65rem; color: var(--doux); font-weight: 400; display: block; line-height: 1; }
.prix s, .grosprix s { font-size: .8rem; color: var(--doux); font-weight: 400; }
.produit.en-promo .prix, .grosprix.en-promo { color: var(--acc); }
.stock { font-size: 12px; white-space: nowrap; }
.stock::before { content: "● "; }
.stock.ok { color: var(--ok); } .stock.bas { color: var(--bas); } .stock.cde { color: var(--doux); }
.badge { position: absolute; top: 8px; left: 8px; background: var(--acc); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; z-index: 1; }

/* Listes : fil, titre, sous-familles, barre de filtres, pages */
.fil { font-size: 13px; color: var(--doux); margin-bottom: 6px; }
.fil a:hover { color: var(--acc); }
h1.titre { font-size: 1.45rem; margin: 0 0 8px; }
.sous { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.sous a { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 3px 12px; font-size: 13.5px; }
.sous a:hover, .sous a.on { border-color: var(--acc); color: var(--acc); }
.sous a small { color: var(--doux); }
.outils { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 14px; margin-bottom: 12px; }
.outils select { font: inherit; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 5px; background: #fff; max-width: 220px; }
.outils .nb { margin-left: auto; color: var(--doux); }
.vide { color: var(--doux); }
.pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 18px; }
.pages a { min-width: 34px; text-align: center; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); font-size: 14px; }
.pages a:hover { border-color: var(--acc); color: var(--acc); }
.pages a.on { background: var(--acc); color: #fff; border-color: var(--acc); }
.pages span { color: var(--doux); }

/* Fiche article */
.fiche { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 22px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; }
.fiche .ph { aspect-ratio: 1; border: 1px solid var(--trait); border-radius: 8px; }
.fiche h1 { font-size: 1.4rem; margin: 2px 0 4px; line-height: 1.25; }
.grosprix { font-size: 1.9rem; font-weight: 700; margin: 12px 0 0; }
.grosprix small { font-size: .8rem; color: var(--doux); font-weight: 400; }
.fiche .stock { font-size: 14px; margin: 4px 0; }
.texte { font-size: 14px; color: #3a4048; margin: 14px 0; }
.fiche table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; }
.fiche td { padding: 6px 0; border-bottom: 1px solid var(--trait); }
.fiche td:first-child { color: var(--doux); width: 38%; }
.demande { background: var(--fond); border-radius: 8px; padding: 14px; margin-top: 16px; }
.demande h2 { font-size: 1rem; margin: 0 0 4px; }
.demande p { font-size: 14px; color: var(--doux); margin: 0 0 8px; }
.demande form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demande label { display: grid; gap: 2px; font-size: 13px; color: var(--doux); }
.demande label:nth-of-type(4) { grid-column: 1 / -1; }
.demande input, .demande textarea { font: inherit; padding: 7px 9px; border: 1px solid #c8ccd1; border-radius: 6px; color: var(--encre); background: #fff; }
.demande button { grid-column: 1 / -1; justify-self: start; }
.demande .pot { position: absolute; left: -9999px; }
.merci { color: var(--ok) !important; font-weight: 600; font-size: 15px !important; }

/* Contact, attente */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.boite { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 18px; }
.boite h2 { margin: 0 0 8px; font-size: 1.1rem; }
.boite a { color: var(--acc); }
.attente { background: var(--carte); border: 1px solid var(--encre); border-radius: 10px; padding: 32px; text-align: center; max-width: 720px; margin: 20px auto; }

footer.site { background: var(--encre); color: #c4c9cf; font-size: 13px; }
footer.site .in { max-width: var(--largeur); margin: 0 auto; padding: 22px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
footer.site b { color: #fff; display: block; margin-bottom: 4px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Tablette (écran tactile de plus de 760 px, iPad compris : classe « tablette » posée par le script de la page, car Safari sur iPad
   se présente comme un ordinateur) : toute la largeur, textes, boutons et cibles plus grands, 3 articles par ligne (08/11/2026) */
html.tablette { --largeur: 100%; }
html.tablette body { font-size: 16.5px; }
html.tablette .bandeau { font-size: 14.5px; } html.tablette .bandeau .in { min-height: 42px; }
html.tablette .cherche input, html.tablette .cherche button { font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
html.tablette .raccourcis { font-size: 14.5px; } html.tablette .raccourcis svg { width: 27px; height: 27px; }
html.tablette .page { grid-template-columns: 280px 1fr; }
html.tablette .fam > a { font-size: 16px; padding: 11px 14px; }
html.tablette .fam li a { font-size: 15.5px; padding: 7px 14px 7px 26px; }
html.tablette aside h2 { font-size: 14px; }
html.tablette .grille, html.tablette .grille.grille-4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; } /* (autant de cartes que la largeur le permet) */
html.tablette .piste { grid-auto-columns: minmax(215px, calc((100% - 42px) / 4)); }
html.tablette .marque { font-size: 13px; } html.tablette .nom { font-size: 15.5px; } html.tablette .ref { font-size: 13.5px; }
html.tablette .prix { font-size: 1.3rem; } html.tablette .stock { font-size: 13.5px; }
html.tablette .btn { padding: 12px 20px; font-size: 16px; }
html.tablette .tuile b { font-size: 15px; } html.tablette .tuile b small { font-size: 13px; }
html.tablette .rond { font-size: 14px; } html.tablette .rond .im { width: 92px; height: 92px; }
html.tablette .outils { font-size: 16px; } html.tablette .outils select { font-size: 16px; padding: 7px 10px; }
html.tablette .sous a { font-size: 15px; padding: 6px 14px; }
html.tablette .fil { font-size: 14.5px; }
html.tablette .onglets-art button { font-size: 1.15rem; padding: 6px 12px 8px; }
html.tablette .fleche { width: 42px; height: 42px; font-size: 22px; }
html.tablette .atout { font-size: 14px; } html.tablette .atout b { font-size: 15.5px; }
html.tablette .demande input, html.tablette .demande textarea { font-size: 16px; padding: 10px 12px; }
html.tablette footer.site { font-size: 15px; }
/* Tablette en hauteur (jusqu'à 1024 px) : le menu des familles se replie dans « ☰ Familles », les articles prennent toute la largeur */
html.tablette-h .page { grid-template-columns: 1fr; }
html.tablette-h aside.familles { display: none; position: fixed; inset: 0 auto 0 0; width: min(360px, 80vw); top: 0; max-height: none; z-index: 40; border-radius: 0; box-shadow: 0 0 0 100vw rgba(0,0,0,.35); }
html.tablette-h aside.familles.ouvert { display: block; }
html.tablette-h .btn-fam { display: inline-flex; font-size: 16px; padding: 10px 14px; }
/* Tablette / téléphone : le menu des familles devient un tiroir (bouton « Familles ») */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }
  aside.familles { display: none; position: fixed; inset: 0 auto 0 0; width: min(320px, 85vw); top: 0; max-height: none; z-index: 40; border-radius: 0; box-shadow: 0 0 0 100vw rgba(0,0,0,.35); }
  aside.familles.ouvert { display: block; }
  aside h2 { border-radius: 0; }
  .btn-fam { display: inline-flex; }
  .raccourcis { display: none; }
  .hero { grid-template-columns: 1fr; background: var(--encre); }
  .fiche, .contact { grid-template-columns: 1fr; }
  .entete { flex-wrap: wrap; }
  .cherche { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 700px) {
  .logo img { height: 56px; }
  .bandeau .adr, .bandeau .mail { display: none; }
  .bandeau .droite { margin-left: 0; }
  .demande form { grid-template-columns: 1fr; }
  .fiche { padding: 14px; }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Pages légales (Vie privée & cookies, Mentions légales) et mention sous le formulaire de demande */
.page-legale { max-width: 820px; }
.page-legale h2 { font-size: 1.1rem; margin: 20px 0 6px; }
.page-legale p, .page-legale li { color: #3a4048; }
.rgpd { font-size: 12.5px !important; margin: 8px 0 0 !important; } .rgpd a { color: var(--acc); }
footer.site a { color: #e6e9ec; } footer.site a:hover { color: #fff; text-decoration: underline; }
.sans-cookie { font-size: 12px; color: #9aa3ad; }