/* =====================================================================
   RAYONS (01/10/2026, refonte du site, lot L2) : pivot de la location
   (/location-materiel-evenementiel) et pages de rayon (/location-son-lumiere,
   /location-mobilier, /location-decoration). Chargée par l'option 'css' de leurs
   configurations. Composants : v3c_rayons et v3c_rayon (app/editorial/composants.php).


   Les trois cartes de rayon (classes v3-rayons, v3-rayon) sont stylées par
   structure.css, chargée sur toutes les pages : leurs règles ne sont plus copiées ici
   (retrait du 01/10/2026, lot L7). Cette feuille garde ce qui n'existe pas ailleurs :
   la carte de rayon seule (v3-rayons--un) et les cartes de catégories d'un rayon
   (v3-cats, v3-cat).
   ===================================================================== */

/* ---------- Carte de rayon seule (option 'rayon' du composant rayons) ---------- */
/* Un seul rayon demandé : la carte prend la largeur, photo à gauche. Absent de structure.css. */
.v3 .v3-rayons--un{grid-template-columns:minmax(0,1fr)}
@media (min-width:1101px){
  .v3 .v3-rayons--un .v3-rayon{flex-direction:row}
  .v3 .v3-rayons--un .v3-rayon__media{flex:0 0 38%; aspect-ratio:auto}
}

/* ---------- Cartes de catégories d'un rayon (gabarit « Rayon ») ---------- */
.v3 .v3-cats{--cats-gap:clamp(12px,1.5vw,18px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--cats-gap)}
.v3 .v3-cats--1{grid-template-columns:minmax(0,1fr)}
.v3 .v3-cats__groupe{margin:clamp(30px,3.6vw,46px) 0 14px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-clair)}
.v3 .v3-clair .v3-cats__groupe{color:var(--creme-accent)}
.v3 .v3-cats__groupe:first-child{margin-top:0}
.v3 .v3-cat .v3-carte__media{aspect-ratio:3/2}
.v3 .v3-cat .v3-carte__corps{gap:3px; padding:clamp(14px,1.4vw,18px) clamp(14px,1.4vw,20px) clamp(16px,1.6vw,20px)}
.v3 .v3-cat h3,.v3 .v3-cat h4{font-size:clamp(17px,1.4vw,20px); font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--encre)}
.v3 .v3-clair .v3-cat h3,.v3 .v3-clair .v3-cat h4{color:var(--creme-encre)}
.v3 .v3-cat .v3-carte__texte{font-size:14.5px; line-height:1.5}
.v3 .v3-cat .v3-carte__go{padding-top:12px}

/* Deux petits groupes (par occasion, sur mesure) côte à côte. */
.v3 .v3-cats__petits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(14px,1.8vw,24px); align-items:stretch}
.v3 .v3-cats__petits > div{display:flex; flex-direction:column}
.v3 .v3-cats__petits .v3-cats{flex:1}
.v3 .v3-cats__petits .v3-cat{flex-direction:row}
.v3 .v3-cats__petits .v3-cat .v3-carte__media{flex:0 0 42%; aspect-ratio:auto; min-height:150px}
.v3 .v3-cats__petits .v3-cat .v3-carte__corps{justify-content:center}

/* Entrée mise en avant (décoration sur mesure) : fond d'accent, texte plus grand. */
.v3 .v3-cat--fort{border-color:var(--ligne-accent); background:linear-gradient(160deg,color-mix(in srgb,var(--accent-a) 22%,var(--surface)),color-mix(in srgb,var(--accent-b) 12%,var(--surface)))}
.v3 .v3-cat--fort h3,.v3 .v3-cat--fort h4{font-size:clamp(20px,1.8vw,25px)}
.v3 .v3-clair .v3-cat--fort{background:linear-gradient(160deg,color-mix(in srgb,var(--accent-a) 14%,var(--creme-carte)),var(--creme-carte)); border-color:var(--creme-accent)}

@media (max-width:1180px){
  .v3 .v3-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .v3 .v3-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3 .v3-cats__petits{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .v3 .v3-cats{--cats-gap:10px}
  .v3 .v3-cat .v3-carte__corps{padding:12px 12px 14px}
  .v3 .v3-cat h3,.v3 .v3-cat h4{font-size:16px}
  .v3 .v3-cat .v3-carte__texte{font-size:13.5px}
  .v3 .v3-cats__petits .v3-cat{flex-direction:column}
  .v3 .v3-cats__petits .v3-cat .v3-carte__media{flex:none; min-height:0; aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){
  .v3 a.v3-cat:hover{transform:none}
}

/* ---------- Dernière carte seule sur sa rangée (lot B9, 01/10/2026) ----------
   Rayon son : neuf cartes, la neuvième (Photobooth) restait seule en quatre puis en deux colonnes ; rayon mobilier :
   dix cartes, la dixième seule en trois colonnes. Elle prend toute la rangée, en ligne : photo de la largeur d'une
   colonne (N colonnes, écart --cats-gap), alignée sur les photos du dessus, texte à côté. Une rangée pleine ou de deux
   cartes et plus ne change pas (décoration : six et douze cartes ; mobilier en quatre et deux colonnes). Même idée que
   la règle B6 des options (style.css). */
@media (min-width:1181px){
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(4n+1):not(:first-child){grid-column:1 / -1; flex-direction:row}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(4n+1):not(:first-child) .v3-carte__media{flex:0 0 calc((100% - 3 * var(--cats-gap)) / 4); aspect-ratio:3/2}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(4n+1):not(:first-child) .v3-carte__corps{justify-content:center}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(4n+1):not(:first-child) .v3-carte__go{margin-top:0}
}
@media (min-width:861px) and (max-width:1180px){
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(3n+1):not(:first-child){grid-column:1 / -1; flex-direction:row}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(3n+1):not(:first-child) .v3-carte__media{flex:0 0 calc((100% - 2 * var(--cats-gap)) / 3); aspect-ratio:3/2}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(3n+1):not(:first-child) .v3-carte__corps{justify-content:center}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(3n+1):not(:first-child) .v3-carte__go{margin-top:0}
}
@media (max-width:860px){
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(2n+1):not(:first-child){grid-column:1 / -1; flex-direction:row}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(2n+1):not(:first-child) .v3-carte__media{flex:0 0 calc((100% - 1 * var(--cats-gap)) / 2); aspect-ratio:3/2}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(2n+1):not(:first-child) .v3-carte__corps{justify-content:center}
  .v3 .v3-cats:not(.v3-cats--1) > .v3-cat:last-child:nth-child(2n+1):not(:first-child) .v3-carte__go{margin-top:0}
}