/* Portail Vitrio — themes. Un theme ne pose que de la mise en page : il reprend
   les reglages du socle (portal.css) et ajoute ses regles sous son propre
   selecteur. Il se choisit dans l'administration (Apparence) et se lit sur
   <html data-theme="...">. Aucune couleur ici : elles viennent de palettes.css.

   Ajouter un theme : un bloc [data-theme="nom"] ci-dessous, et une entree dans
   THEMES de services/appearance.py. Aucun gabarit a toucher. */

/* --- Sobre : clair, aere, peu d'elements. C'est le socle tel quel. ---------- */

/* --- Dense : place de marche, beaucoup d'information par ecran -------------- */
[data-theme="dense"]{
  --corps:14.5px; --largeur:1360px; --air:22px;
  --radius:6px; --radius-grand:8px; --rond:6px;
  --gouttiere:8px; --carte-min:190px; --colonnes-tel:1;
}
[data-theme="dense"] .top-in{padding-top:4px;padding-bottom:4px}
[data-theme="dense"] main{padding-top:12px}
[data-theme="dense"] .hero{max-width:none;padding-top:4px;text-align:left}
[data-theme="dense"] .hero h1{font-size:clamp(20px,2.6vw,26px);margin-bottom:10px}
[data-theme="dense"] .hero h1 br{display:none}
[data-theme="dense"] .search-grand{max-width:860px}
[data-theme="dense"] .hero-aide{margin:10px 0 0}
[data-theme="dense"] .hero .chips{justify-content:flex-start}
[data-theme="dense"] .exemples{margin-top:12px}
/* Les rayons en pave : c'est par eux qu'on entre dans une place de marche. */
[data-theme="dense"] .bloc-rayons .chips{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
[data-theme="dense"] .bloc-rayons .chips a{display:flex;min-height:56px;font-weight:700;background:var(--accent-soft);
  border-color:transparent}
[data-theme="dense"] .bloc-rayons .chips a:hover{border-color:var(--rule-clair)}
[data-theme="dense"] .card,[data-theme="dense"] .shops a,[data-theme="dense"] .filtres{box-shadow:none}
[data-theme="dense"] .card .body{padding:6px 8px 8px;gap:2px}
[data-theme="dense"] .title{font-size:13.5px}
[data-theme="dense"] .price{font-size:15.5px}
[data-theme="dense"] .stock,[data-theme="dense"] .verifie{font-size:11.5px;padding:1px 6px}
[data-theme="dense"] .card .voir{padding:0 8px 8px}
[data-theme="dense"] .shops{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
[data-theme="dense"] .shops a{padding:10px 12px;gap:10px}
[data-theme="dense"] .ecusson{width:38px;height:38px;font-size:16px}
[data-theme="dense"] .page-tete{margin-bottom:12px}
[data-theme="dense"] .filtres{margin-bottom:10px}
@media (max-width:520px){
  /* Telephone : une ligne par produit, photo a gauche — plus de produits par ecran
     que deux colonnes, et un texte qui reste lisible. */
  [data-theme="dense"] .cards{grid-template-columns:minmax(0,1fr);gap:6px}
  [data-theme="dense"] .card > a{flex-direction:row}
  [data-theme="dense"] .card img{width:112px;flex:none;align-self:flex-start;aspect-ratio:1/1}
  [data-theme="dense"] .card .body{padding:8px 10px}
  [data-theme="dense"] .bloc-rayons .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Vitrine : grandes photos, titres marques ------------------------------- */
[data-theme="vitrine"]{
  --titres:var(--serif); --largeur:1280px; --air:clamp(34px,6vw,64px);
  --radius:18px; --radius-grand:26px;
  --gouttiere:24px; --carte-min:290px; --carte-image:4/5;
}
[data-theme="vitrine"] .hero{max-width:880px}
[data-theme="vitrine"] .hero h1{font-size:clamp(30px,6.4vw,58px);font-weight:600;letter-spacing:-.02em}
[data-theme="vitrine"] .page-title{font-size:clamp(26px,4.6vw,40px);font-weight:600}
[data-theme="vitrine"] .bloc h2{font-size:clamp(21px,3vw,28px);font-weight:600}
/* Les produits passent avant les rayons : la photo d'abord. Le champ de
   recherche reste en tete, dans le premier ecran. */
[data-theme="vitrine"] .hero{order:-2}
[data-theme="vitrine"] .bloc-recents{order:-1}
/* La photo est la carte : ni fond ni filet autour d'elle. */
[data-theme="vitrine"] .card{background:none;border-color:transparent;box-shadow:none;overflow:visible}
[data-theme="vitrine"] .card:hover{border-color:transparent}
[data-theme="vitrine"] .card img{border-radius:var(--radius)}
[data-theme="vitrine"] .card .body{padding:10px 2px 8px}
[data-theme="vitrine"] .title{font-size:16px}
[data-theme="vitrine"] .price{font-size:18px}
[data-theme="vitrine"] .card .voir,[data-theme="vitrine"] .card .apercu{margin-inline:0;padding-inline:2px}
[data-theme="vitrine"] .card .apercu{padding:10px}
@media (min-width:900px){
  /* Accueil : une grande photo, quatre autour. */
  [data-theme="vitrine"] .bloc-recents .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-theme="vitrine"] .bloc-recents .card:first-child{grid-column:span 2;grid-row:span 2}
}