/* =====================================================================
   STRUCTURE DU SITE (01/10/2026) : en-tête, pied de page, accueil, hub des prestations
   Chargée sur toutes les pages par layouts/base.php, APRÈS shell.css et style.css :
   - la barre étiquetée doit passer après shell.css:296 (.nv2 .nav .nav__links{gap:20px}),
     même spécificité que .nv2 .nav--groupes .nav__links ;
   - les tailles de liens des resserrements (1400, 1240, 1180 px) doivent passer après
     style.css:315 (.v3 .nav .nav__links a{font-size:15px}), même spécificité.
   Quatre parties : l'en-tête (partials/header.php, portée .nv2 .nav--groupes), le pied
   de page (partials/footer.php, cinq colonnes), l'accueil (public/home.php, classes v3-)
   et la grille de cartes du hub /prestations (classe de page .page-prestations).
   Données : app/editorial/structure.php.
   ===================================================================== */

/* ---------- En-tête : groupes étiquetés « Location », « Nous confier » et « Animer » ---------- */
.nv2 .nav--groupes .nav__links{gap:0; align-items:center}
.nv2 .nav--groupes .nav__groupe{position:relative; display:flex; align-items:center; gap:20px; padding:0 18px}
.nv2 .nav--groupes .nav__groupe:first-child{padding-left:0}
.nv2 .nav--groupes .nav__groupe + .nav__groupe{border-left:1px solid var(--line-2)}
.nv2 .nav--groupes .nav__groupe-lab{position:absolute; left:18px; top:-12px; font-size:9.5px; font-weight:600; line-height:1;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lilac); white-space:nowrap; pointer-events:none}
.nv2 .nav--groupes .nav__groupe:first-child .nav__groupe-lab{left:0}
/* Les liens descendent d'un cran sous leur étiquette : l'ensemble reste centré dans la barre. */
.nv2 .nav--groupes .nav__groupe{padding-top:9px}
.nv2 .nav--groupes .nav__groupe-lab{top:-3px}

/* ---------- Panneaux : colonnes par objet, pied de panneau ---------- */
/* Opaque : le fond presque opaque de shell.css laissait deviner le titre de la page sous les listes. */
.nv2 .nav--groupes .mega{background:#0C0716; -webkit-backdrop-filter:none; backdrop-filter:none}
.nv2 .mega__cadre{padding-top:clamp(24px,2.6vw,34px)}
.nv2 .mega__cols{display:flex; flex-wrap:wrap; gap:clamp(18px,2.2vw,30px) clamp(22px,calc(8vw - 68px),60px)}
.nv2 .mega__col{min-width:0; flex:0 0 auto}
.nv2 .mega__cadre .mega__list{width:auto; min-width:150px}
.nv2 .mega__cadre .mega__list[style*="--mega-cols:2"]{column-gap:6px}
.nv2 .mega__cadre .mega__list a{white-space:nowrap}
/* Tête de colonne (02/10/2026) : une petite photo de taille fixe, le titre à côté, un filet dessous. Toutes les têtes
   ont la même taille, quelle que soit la largeur de la colonne (les bandeaux pleine largeur étaient trop gros).
   La photo arrive au premier survol de la barre (shell.js) et se fond dans son cadre. */
.nv2 .mega__col{min-width:clamp(166px,15vw,250px)}
.nv2 .mega__tete{display:flex; align-items:center; gap:13px; margin:0 0 9px; padding:0 14px 14px 0; border-bottom:1px solid var(--line)}
.nv2 .mega__vignette{flex:none; position:relative; width:76px; height:52px; overflow:hidden; border-radius:11px;
  border:1px solid var(--line-2); background:linear-gradient(140deg,#1C1132,#120A22)}
.nv2 .mega__img{width:100%; height:100%; max-width:none; object-fit:cover; opacity:0; transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.nv2 .mega__img.is-pret{opacity:1}
.nv2 .mega__col:hover .mega__img{transform:scale(1.07)}
.nv2 .mega__cadre .mega__label{margin:0; font-size:15.5px; font-weight:600; line-height:1.2; letter-spacing:-.01em; text-transform:none; color:var(--ink); white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .nv2 .mega__col:hover .mega__img{transform:none} }
/* Écrans étroits : vignette et titre un cran plus petits, pour que les quatre colonnes de la décoration restent sur un rang. */
@media (max-width:1279px){
  .nv2 .mega__tete{gap:10px; padding-right:8px}
  .nv2 .mega__vignette{width:54px; height:38px; border-radius:9px}
  .nv2 .mega__cadre .mega__label{font-size:14.5px}
}
/* Le texte des liens s'aligne sur le bord de la photo : la liste recule de la marge intérieure de ses liens. */
.nv2 .mega__cadre .mega__list{margin-left:-12px}
.nv2 .mega__cadre .mega__list:has(.mega__fort){margin-left:0}
.nv2 .mega__cadre .mega__note{margin-left:0}
.nv2 .mega__cadre .mega__pied{padding-left:0}
/* Lien mis en avant (le sur-mesure dans le rayon Décoration) et sa phrase. */
.nv2 .mega__list a.mega__fort{color:#fff; font-weight:600; border-color:rgba(217,70,239,.5); background:rgba(217,70,239,.12)}
.nv2 .mega__list a.mega__fort:hover{background:rgba(217,70,239,.22); border-color:rgba(217,70,239,.8)}
/* Page courante dans un panneau. */
.nv2 .mega__cadre .mega__list a[aria-current="page"]{color:#fff; border-color:var(--line-2); background:rgba(139,92,246,.14)}
/* Entrées seules (groupe sans libellé après le premier) : sous la colonne précédente, après un filet. */
.nv2 .mega__cadre .mega__seules{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.nv2 .mega__cadre .mega__seules a{color:var(--ink); font-weight:600}
.nv2 .mega__note{max-width:25ch; margin:10px 0 0 11px; font-size:13px; line-height:1.5; color:var(--ink-2)}
.nv2 .mega__pied{display:flex; flex-wrap:wrap; align-items:center; gap:10px 30px; margin-top:clamp(18px,2vw,26px); padding:15px 0 17px 11px; border-top:1px solid var(--line)}
.nv2 .mega__pied a{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink)}
.nv2 .mega__pied a svg{color:var(--magenta); transition:transform .25s}
.nv2 .mega__pied a:hover svg{transform:translateX(4px)}
.nv2 .mega__pied a.mega__tel{margin:0 0 0 auto; font-weight:500; color:var(--ink-2)}

/* ---------- Menu plein écran (téléphone et tablette), 02/10/2026 : rangs et volets ----------
   Les quatre étiquettes de la barre, un rang par entrée, un volet repliable (details) pour chaque entrée à panneau,
   rangé par les mêmes familles que le panneau du bureau. Le corps défile, le devis et le téléphone restent en bas. */
.nv2 .navbody--volets{padding:0; overflow:hidden; justify-content:flex-start}
.nv2 .navbody__corps{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:calc(var(--header-h) + 20px) var(--pad-x) 26px}
.nv2 .navbody--volets .navbody__sur{display:flex; align-items:center; gap:12px; margin:28px 0 4px; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--lilac)}
.nv2 .navbody--volets .navbody__sur:first-child{margin-top:0}
.nv2 .navbody--volets .navbody__sur::after{content:""; flex:1; height:1px; background:var(--line-2)}
/* Un rang : le titre à gauche, le signe à droite ; même hauteur pour un volet et pour un lien seul. */
.nv2 .navbody--volets .navbody__rang{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; padding:8px 0;
  font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-.015em; color:var(--ink); opacity:1;
  border-bottom:1px solid var(--line); cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
.nv2 .navbody--volets .navbody__rang::-webkit-details-marker{display:none}
.nv2 .navbody--volets a.navbody__rang:hover{transform:none}
.nv2 .navbody--volets .navbody__rang svg{flex:none; color:var(--lilac); transition:transform .25s}
.nv2 .navbody--volets a.navbody__rang svg{color:var(--muted)}
.nv2 .navbody__volet[open] > .navbody__rang svg{transform:rotate(180deg)}
.nv2 .navbody__volet[open] > .navbody__rang{border-bottom-color:transparent}
.nv2 .navbody--volets .navbody__rang.is-active,.nv2 .navbody--volets a.navbody__rang[aria-current]{color:#C4B5FD}
/* Le contenu d'un volet : une famille, ses liens sur deux colonnes, puis le lien vers la page du rayon. */
.nv2 .navbody__contenu{padding:2px 0 18px; border-bottom:1px solid var(--line)}
.nv2 .navbody__famille{margin:16px 0 2px; font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.nv2 .navbody__famille:first-child{margin-top:0}
.nv2 .navbody__liens{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
.nv2 .navbody--volets .navbody__liens a{display:block; padding:10px 0; font-family:var(--font-sans); font-size:15.5px; line-height:1.3; color:var(--ink-2); opacity:1}
.nv2 .navbody--volets .navbody__liens a:hover{transform:none; color:#fff}
.nv2 .navbody--volets .navbody__liens a[aria-current="page"],.nv2 .navbody--volets .navbody__liens a.navbody__fort{color:#fff; font-weight:600}
.nv2 .navbody--volets a.navbody__tout{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:4px 0; font-family:var(--font-sans); font-size:14.5px; font-weight:600; line-height:1.3; opacity:1; color:var(--ink)}
.nv2 .navbody--volets a.navbody__tout:hover{transform:none}
.nv2 .navbody--volets a.navbody__tout svg{flex:none; color:var(--magenta)}
.nv2 .navbody--volets a.navbody__tout[aria-current="page"]{color:#C4B5FD}
.nv2 .navbody__plus{display:flex; flex-wrap:wrap; gap:2px 24px}
/* Bas du menu : le devis et le téléphone, toujours visibles. */
.nv2 .navbody--volets .navbody__pied{flex:none; flex-wrap:nowrap; justify-content:space-between; gap:12px; margin:0;
  padding:12px var(--pad-x) max(14px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-2)}
.nv2 .navbody--volets .navbody__pied .btn{padding:12px 20px; white-space:nowrap}
.nv2 .navbody--volets .navbody__pied .navbody__tel{font-size:16px; white-space:nowrap}
@media (min-width:700px){
  .nv2 .navbody__liens{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nv2 .navbody--volets .navbody__pied{justify-content:flex-start; gap:22px}
}
/* La croix du burger : les trois traits sont espacés de 14 px (grille étirée sur 42 px), pas de 5. */
.nv2 .burger.is-open i:nth-child(1){transform:translateY(14px) rotate(45deg)}
.nv2 .burger.is-open i:nth-child(3){transform:translateY(-14px) rotate(-45deg)}

/* ---------- Accueil, sous les deux portes : l'animation casino ---------- */
.v3 .v3-portes__plus{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin:clamp(18px,2.2vw,26px) 0 0;
  font-size:12px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--creme-accent)}
.v3 .v3-portes__plus .v3-pilule{font-size:15px; font-weight:600; letter-spacing:0; text-transform:none}

/* ---------- Accueil, les parties : le mot en grand, le H2 le précise ---------- */
.v3 .v3-partie{scroll-margin-top:calc(var(--header-h) - 24px)}
.v3 .v3-partie__marque{display:flex; align-items:flex-start; gap:14px; margin:0 0 clamp(10px,1.6vw,20px); line-height:1}
.v3 .v3-partie__no{margin-top:.5em; padding:5px 12px; border:1px solid var(--ligne-accent); border-radius:999px; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--accent-clair)}
.v3 .v3-partie__marque .v3-it{font-size:clamp(60px,9vw,132px); line-height:.92}
.v3 .v3-clair .v3-partie__no{color:var(--creme-accent); border-color:var(--creme-ligne); background:var(--creme-carte)}
.v3 .v3-partie .v3-tete .v3-h2{font-size:clamp(23px,2.5vw,34px); line-height:1.12}
.v3 .v3-partie .v3-tete{margin-bottom:34px}
.v3 .v3-partie > .v3-wrap > .v3-duo{margin-top:clamp(14px,2vw,26px)}
.v3 .v3-partie .v3-duo__texte .v3-h2{font-size:clamp(26px,3vw,40px); line-height:1.1}
.v3 .v3-partie__inter{margin:clamp(40px,5vw,64px) 0 20px}
.v3 .v3-clair .v3-petit-titre{color:var(--creme-accent)}
.v3 .v3-clair .v3-etape h3{color:var(--creme-encre)}

/* ---------- Accueil, rayons : une carte par rayon, toutes ses catégories rangées ---------- */
.v3 .v3-rayons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px)}
.v3 .v3-rayon{display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r); border:1px solid var(--creme-ligne); background:var(--creme-carte); transition:border-color .3s, box-shadow .3s}
.v3 .v3-rayon:hover{border-color:var(--creme-accent); box-shadow:0 16px 40px -22px color-mix(in srgb,var(--accent-a) 45%,transparent)}
.v3 .v3-rayon__media{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--creme-2)}
.v3 .v3-rayon__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.v3 .v3-rayon:hover .v3-rayon__media img{transform:scale(1.04)}
.v3 .v3-rayon__corps{display:flex; flex-direction:column; flex:1; padding:clamp(18px,2vw,26px)}
.v3 .v3-rayon h3{font-size:clamp(22px,2vw,27px); font-weight:800; letter-spacing:-.03em; line-height:1.1}
.v3 .v3-rayon h3 a{color:inherit; text-decoration:none}
.v3 .v3-rayon .v3-carte__sous{margin:4px 0 14px}
.v3 .v3-rayon__rangs{margin:0}
.v3 .v3-rayon__rangs > div{display:grid; grid-template-columns:98px minmax(0,1fr); gap:10px; align-items:baseline; padding:10px 0; border-top:1px solid var(--creme-ligne)}
.v3 .v3-rayon__rangs dt{padding-top:5px; font-size:10.5px; font-weight:700; line-height:1.5; letter-spacing:.13em; text-transform:uppercase; color:var(--creme-accent)}
.v3 .v3-rayon__rangs dd{margin:0; display:flex; flex-wrap:wrap; gap:6px}
.v3 .v3-rayon__rangs dd a{padding:5px 12px; border-radius:999px; border:1px solid var(--creme-ligne); background:var(--creme); font-size:14px; line-height:1.3; color:var(--creme-encre); text-decoration:none;
  transition:border-color .2s, color .2s, background .2s}
.v3 .v3-rayon__rangs dd a:hover{border-color:var(--creme-accent); color:var(--creme-accent); background:#fff}
/* Entrées de premier rang (les thèmes techniques, le mobilier) : toute la largeur. */
.v3 .v3-rayon__rangs > div.v3-rayon__rang--seul{grid-template-columns:minmax(0,1fr)}
.v3 .v3-rayon__rangs dd a.is-fort{border-color:transparent; background:var(--degrade); font-weight:700; color:var(--sur-accent)}
.v3 .v3-rayon__rangs dd a.is-fort:hover{background:var(--degrade); color:var(--sur-accent); box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent-b) 80%,transparent)}
.v3 .v3-rayon .v3-carte__go{margin-top:auto; padding-top:16px; text-decoration:none}

/* ---------- Accueil, événements : trois tuiles larges ---------- */
.v3 .v3-formats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v3 .v3-formats--3 .v3-format{aspect-ratio:16/10}

/* ---------- Accueil, en ce moment : la saison par les deux portes ---------- */
.v3 .v3-saison{padding:22px 0; border-block:1px solid var(--ligne); background:linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 18%,var(--fond)),var(--fond) 70%)}
.v3 .v3-saison__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px}
.v3 .v3-saison p{margin:0; font-size:17px; color:var(--texte)}
.v3 .v3-saison p b{margin-right:8px; font-family:var(--font-accent); font-style:italic; font-weight:400; font-size:1.5em; line-height:1; color:var(--accent-clair)}
.v3 .v3-saison__liens{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- Hub /prestations : cinq portes, trois puis deux (au lieu de quatre puis une) ---------- */
@media (min-width:981px){
  .v3.page-prestations .v3-cartes--4{grid-template-columns:repeat(6,minmax(0,1fr))}
  .v3.page-prestations .v3-cartes--4 > *{grid-column:span 2}
  .v3.page-prestations .v3-cartes--4 > :nth-child(n+4){grid-column:span 3}
  /* Cartes une fois et demie plus larges : photo en 2/1 pour garder la hauteur des photos 4/3 du rang du haut. */
  .v3.page-prestations .v3-cartes--4 > :nth-child(n+4) .v3-carte__media{aspect-ratio:2/1}
}

/* Sept entrées dans la barre : on resserre dès 1400 px, puis le téléphone de la barre s'efface
   (il reste au pied de chaque panneau et dans les pages) avant le passage au burger.
   Depuis que le premier rayon s'appelle « Sono, lumière et vidéo » (01/10/2026 au soir), le téléphone
   s'efface dès 1460 px et la barre se resserre encore à 1240 puis 1180 px : sans cela, le bouton
   de devis sortait de la page entre 1121 et 1460 px. */
@media (max-width:1400px){
  .nv2 .nav--groupes .nav__groupe{gap:15px; padding:0 13px}
  .nv2 .nav--groupes .nav__groupe-lab{left:13px}
  .v3 .nav--groupes .nav__links a{font-size:14.5px}
}
@media (max-width:1460px){
  .nv2 .nav--groupes .tel{display:none}
}
@media (max-width:1240px){
  .nv2 .nav--groupes .nav__groupe{gap:12px; padding:0 10px}
  .nv2 .nav--groupes .nav__groupe-lab{left:10px}
  .v3 .nav--groupes .nav__links a{font-size:13.5px}
}
@media (max-width:1180px){
  .nv2 .nav--groupes .nav__groupe{gap:10px; padding:0 8px}
  .nv2 .nav--groupes .nav__groupe-lab{left:8px}
  .v3 .nav--groupes .nav__links a{font-size:13px}
  .nv2 .nav--groupes .nav__devis{padding:9px 14px}
}
/* Pied de page : cinq colonnes (marque, Location, Nous confier, Animer, L'agence) au lieu des
   quatre de shell.css:242 ; sous 1100 px, les règles de shell.css reprennent la main (deux, puis une). */
@media (min-width:1101px){
  .nv2 .foot__grid{grid-template-columns:1.5fr 1fr 1fr .8fr 1.2fr; gap:36px}
}
/* Accueil, trois cartes côte à côte : l'intitulé du groupe passe au-dessus de ses pilules, qui gardent toute la largeur
   (sinon la colonne Décoration s'étire, une pilule par ligne). */
@media (min-width:1101px){
  .v3 .v3-rayon__rangs > div{grid-template-columns:minmax(0,1fr); gap:7px}
  .v3 .v3-rayon__rangs dt{padding-top:0}
}
@media (max-width:1100px){
  .v3 .v3-rayons{grid-template-columns:minmax(0,1fr)}
  .v3 .v3-rayon__media{aspect-ratio:21/9}
}
@media (max-width:860px){
  .v3 .v3-formats--3{grid-template-columns:minmax(0,1fr)}
  .v3 .v3-formats--3 .v3-format{aspect-ratio:16/8}
}
@media (max-width:700px){
  .v3 .v3-rayon__rangs > div{grid-template-columns:minmax(0,1fr); gap:6px}
  .v3 .v3-rayon__rangs dt{padding-top:0}
  .v3 .v3-rayon__media{aspect-ratio:16/9}
  .v3 .v3-saison p{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .v3 .v3-rayon:hover .v3-rayon__media img{transform:none}
}
/* L9 : menu mobile ouvert, la barre est opaque (la marque ne passe plus sur les pilules au défilement) */
.nv2 .nav.is-menu-open{background:var(--bg-2); border-bottom:1px solid var(--line)}