/* hab.css — 15/11/2026 — habillage saisonnier hors accueil : hab-espace.php, hab-rayon.php, hab-case.php. Suite de noel26.css.
   Deux classes par règle ; intérieur des cartes produit jamais stylé ; mobile d'abord ; aucune barre de défilement.
   Jetons : --hk encre, --hb trait, --ht ton, --hs texte sur le ton, --hp ton pâle, --hf focus. */
@font-face{font-family:Archivo;src:url(../fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}

/* 0. Jetons, tons (--hab-* = clé « tons » de l'habillage), pièces communes */
.buro2-body .hab{--hk:#141414;--hb:2.5px solid var(--hk);--h-e:cubic-bezier(.2,.8,.2,1);--h-g:var(--gout,15px);--ht:var(--hab-mangue,#FFC53D);--hs:#141414;--hp:#FFF1CC;--hf:#141414;
box-sizing:border-box;font-family:Archivo,system-ui,sans-serif;font-size:16px;font-stretch:100%;line-height:1.5;color:var(--hk)}
.hab.hab-t--lagon{--ht:var(--hab-lagon,#19C3BD);--hp:#DDF6F4}
.hab.hab-t--nuit{--ht:var(--hab-nuit,#6C4BE0);--hs:#fff;--hp:#ECE7FF}
.hab.hab-t--filao{--ht:var(--hab-filao,#0B7A3B);--hs:#fff;--hp:#E0F2E7}
.hab.hab-t--bleu{--ht:var(--hab-bleu,#1E6FE0);--hs:#fff;--hp:#E0ECFF}
.hab.hab-t--rouge{--ht:var(--hab-rouge,#E41E20);--hs:#fff;--hp:#FFE3E3}
.hab .hab-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ni Bubu flottant en doublon (les espaces n'ont pas la classe buro-sans-bubu), ni Alma ici (Riaz, 12/11) */
.buro2-body:has(.hab-esp) #bubu-root,.hab .buro-ti[data-t=alma],.hab .buro-alma-note{display:none!important}
/* le carton : trait d'encre, tranche droite dessous */
.hab .hab-carton,.hab.hab-case,.hab.hab-bande,.hab.hab-marque{position:relative;box-sizing:border-box;border:var(--hb);border-radius:4px;box-shadow:0 5px 0 var(--hk);background:var(--ht);color:var(--hs);--hf:var(--hs)}
.hab .hab-titre,.hab .hab-case-t,.hab .hab-bande-t{margin:0;padding:0;color:inherit;font-family:inherit;font-weight:900;font-stretch:62%;line-height:.96;text-transform:uppercase;text-wrap:balance}
/* étiquette de papier, penchée */
.hab .hab-etq{display:inline-block;margin:0;padding:3px 9px;border:2px solid var(--hk);border-radius:4px;background:#fff;color:var(--hk);font-size:14px;font-weight:800;font-stretch:112%;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;transform:rotate(-1.5deg)}
/* bouton : une pièce de carton qu'on enfonce */
.hab .hab-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:44px;margin:0;padding:6px 16px;border:var(--hb);border-radius:4px;background:#fff;color:var(--hk);box-shadow:0 4px 0 var(--hk);font-size:16px;font-weight:700;line-height:1.15;text-align:center;text-decoration:none;transition:transform 150ms var(--h-e)}
.hab .hab-btn::after,.hab .hab-suite::after{content:"\2192";font-weight:800}
.hab .hab-btn:hover{color:var(--hk);transform:translateY(-2px)}
.hab .hab-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hk)}
.hab .hab-suite{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--hk);font-size:17px;font-weight:800;font-stretch:87%;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hab .hab-suite:hover{color:#B3080C}
.hab .hab-btn:focus-visible,.hab .hab-suite:focus-visible,.hab .hab-ph:focus-visible{outline:3px solid var(--hf);outline-offset:3px}

/* 1. La vitrine : décor encadré sous son lambrequin, personnage les pieds sous le cadre, bulle, carton */
.hab.hab-esp{margin:18px 0 30px}
.hab.hab-ray{margin:12px 0 16px}
.hab .hab-vit{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.hab .hab-tab{position:relative;z-index:1}
.hab .hab-scene{position:relative;aspect-ratio:16/9;overflow:hidden;border:var(--hb);border-radius:4px;background:var(--ht)}
.hab-ray .hab-scene{aspect-ratio:5/2}
.hab .hab-scene-i{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 78%}
.hab .hab-scene::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:20px;pointer-events:none;background:
radial-gradient(circle at 50% 50%,var(--hk) 0 2.1px,transparent 2.7px) 50% 7px/24px 8px repeat-x,
radial-gradient(circle at 50% 0,#fff 0 10px,var(--hk) 10.6px 12.4px,transparent 13px) 50% 6px/24px 14px repeat-x,
linear-gradient(#fff,#fff) 0 0/100% 6px no-repeat}
.hab .hab-perso{position:absolute;z-index:2;bottom:-12%;width:50%;height:auto;aspect-ratio:1;max-width:none;pointer-events:none}
.hab-ray .hab-perso{width:40%}
.hab .hab-vit--g .hab-perso{left:-1%}
.hab .hab-vit--d .hab-perso{right:-1%}
.hab .hab-bulle{position:absolute;z-index:3;top:28px;box-sizing:border-box;max-width:53%;margin:0;padding:8px 11px;border:var(--hb);border-radius:14px;background:#fff;color:var(--hk);font-size:14px;font-weight:700;font-stretch:87%;line-height:1.25}
.hab .hab-bulle::after{content:"";position:absolute;z-index:-1;bottom:-8.5px;width:13px;height:13px;background:#fff;border:solid var(--hk);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hab .hab-vit--g .hab-bulle{right:8px}
.hab .hab-vit--g .hab-bulle::after{left:18px}
.hab .hab-vit--d .hab-bulle{left:8px}
.hab .hab-vit--d .hab-bulle::after{right:18px}
.hab .hab-carton{margin-top:-12px;padding:28px 14px 16px}
.hab .hab-sur{margin:0 0 8px;padding:0;line-height:1}
.hab .hab-titre{font-size:27px}
.hab .hab-texte{margin:8px 0 0;padding:0;max-width:48ch;color:inherit;font-size:16px;font-weight:500;line-height:1.45}
.hab-ray .hab-texte{font-size:15px}
.hab .hab-carton .hab-btn{margin-top:14px}

/* 2. Les rangées de fiches : rail sans barre sous 992 px, grille au-delà (les cartes restent celles du site) */
.hab .hab-tete{margin:18px 0 8px;padding:0}
.hab .hab-h{margin:0;padding:0;color:var(--hk);font-family:inherit;font-size:24px;font-weight:800;font-stretch:75%;line-height:1.05;letter-spacing:-.01em}
.hab .hab-h::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.36em;border:2px solid var(--hk);border-radius:50%;background:var(--ht);vertical-align:.06em}
.hab .hab-rail{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:44%;gap:10px!important;box-sizing:border-box;max-width:none!important;margin:16px calc(var(--h-g)*-1) 0;padding:2px var(--h-g) 6px;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 var(--h-g);scrollbar-width:none}
.hab .hab-tete+.hab-rail{margin-top:0}
.hab .hab-rail::-webkit-scrollbar{display:none}
.hab .hab-rail>*{scroll-snap-align:start;margin:0!important}
.hab .hab-pied{display:flex;justify-content:flex-end;margin:6px 0 0;padding:0}

@media (min-width:600px){
.hab .hab-rail{grid-auto-columns:29%}
.hab .hab-scene{aspect-ratio:5/2}
.hab-ray .hab-scene{aspect-ratio:10/3}
.hab .hab-perso{width:36%}
.hab-ray .hab-perso{width:30%}
.hab .hab-bulle{top:32px;max-width:44%;font-size:16px}
}
@media (min-width:992px){
.hab.hab-esp{margin:26px 0 44px}
.hab.hab-ray{margin:16px 0 26px}
/* le carton d'un côté, la vitrine de l'autre ; le personnage entre les deux */
.hab .hab-vit{grid-template-columns:minmax(0,36fr) minmax(0,64fr);align-items:stretch}
.hab .hab-vit--d{grid-template-columns:minmax(0,64fr) minmax(0,36fr)}
.hab .hab-tab{grid-row:1;height:clamp(236px,21vw,276px)}
.hab-ray .hab-tab{height:clamp(196px,17vw,224px)}
.hab .hab-vit--g .hab-tab{grid-column:2}
.hab .hab-vit--d .hab-tab{grid-column:1}
.hab .hab-scene,.hab-ray .hab-scene{aspect-ratio:auto;height:100%;box-shadow:0 5px 0 var(--hk)}
.hab .hab-scene-i{object-position:50% 72%}
.hab .hab-perso,.hab-ray .hab-perso{bottom:-11%;width:auto;height:100%}
.hab .hab-vit--g .hab-perso{left:3%}
.hab .hab-vit--d .hab-perso{right:3%}
.hab .hab-bulle{top:36px;max-width:290px;padding:11px 15px;font-size:17px}
.hab .hab-vit--g .hab-bulle{right:auto;left:36%}
.hab .hab-vit--d .hab-bulle{left:auto;right:36%}
.hab .hab-carton{z-index:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin:10px 0;padding:20px 28px}
.hab .hab-vit--g .hab-carton{grid-column:1;margin-right:-18px;padding-right:44px;transform:rotate(-1deg)}
.hab .hab-vit--d .hab-carton{grid-column:2;margin-left:-18px;padding-left:44px;transform:rotate(1deg)}
.hab .hab-titre{font-size:clamp(32px,3.1vw,42px)}
.hab-ray .hab-titre{font-size:clamp(28px,2.7vw,36px)}
.hab .hab-texte{font-size:17px}
.hab-ray .hab-texte{font-size:16px}
.hab .hab-tete{margin:30px 0 12px}
.hab .hab-h{font-size:30px}
.hab .hab-rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:26px 0 0;padding:0;overflow:visible!important;scroll-snap-type:none}
.hab .hab-pied{margin-top:12px}
}
/* jamais de rangée entamée : une rangée (rayon), deux pleines (espace) ou une seule */
@media (min-width:992px) and (max-width:1199px){
.hab .hab-rail>:nth-child(n+9),.hab .hab-rail--1>:nth-child(n+5),.hab .hab-rail:not(:has(>:nth-child(8)))>:nth-child(n+5){display:none!important}
}
@media (min-width:1200px){
.hab .hab-rail{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
.hab .hab-rail--1>:nth-child(n+6),.hab .hab-rail:not(:has(>:nth-child(10)))>:nth-child(n+6){display:none!important}
}

/* 3. Emplacements de la grille : celle qui en porte un se tasse (pas de case vide devant la bande ou la marque) */
.buro-grid:has(>.hab){grid-auto-flow:dense}
.buro-grid>.hab{overflow:visible!important}
/* 3a. la case : un carton suspendu ; le personnage prend la place qui reste, les pieds sur le bouton */
.hab.hab-case{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 5px;padding:24px 11px 11px}
.hab.hab-case::before{content:"";position:absolute;top:7px;left:50%;width:12px;height:12px;margin-left:-6px;box-sizing:border-box;border:2px solid var(--hk);border-radius:50%;background:#F0F2F5}
.hab .hab-case-t{margin-top:9px;font-size:24px}
.hab .hab-case-p{margin:6px 0 0;padding:0;color:inherit;font-size:14px;font-weight:600;font-stretch:87%;line-height:1.35}
.hab .hab-case-i{position:relative;z-index:2;flex:1 1 0;align-self:stretch;min-height:92px;width:100%;height:0;max-width:none;margin:2px 0 -13%;object-fit:contain;object-position:92% 100%;pointer-events:none}
.hab-case .hab-btn{z-index:1;align-self:stretch;padding:5px 10px;font-size:15px}
/* tout le carton se clique ; le lien reste le bouton (immobile : son ::before couvre le carton) */
.hab.hab-case,.hab.hab-bande{isolation:isolate;transition:transform 150ms var(--h-e)}
.hab.hab-case:hover,.hab.hab-bande:hover{transform:translateY(-2px)}
.hab.hab-case .hab-btn,.hab.hab-bande .hab-btn{position:static;transform:none!important}
.hab-case .hab-btn::before,.hab-bande .hab-btn::before{content:"";position:absolute;z-index:1;inset:0}
.hab-case:hover .hab-btn,.hab-bande:hover .hab-btn{background:var(--hp)}
/* 3b. la bande : toute la largeur ; le personnage sort du carton, la tête au-dessus du bord */
.hab.hab-bande{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 5px;padding:12px 12px 14px}
.hab .hab-bande-i{flex:none;align-self:flex-start;width:108px;height:108px;max-width:none;margin:-36px -8px -4px -10px;pointer-events:none}
.hab .hab-bande-i2{display:none}
.hab .hab-bande-c{flex:1 1 150px;min-width:0}
.hab .hab-bande-t{margin-top:8px;font-size:24px}
.hab .hab-bande-p{margin:6px 0 0;padding:0;color:inherit;font-size:15px;font-weight:600;line-height:1.4}
/* les faits : tickets perforés (la perforation prend la couleur du carton) */
.hab .hab-faits{flex:1 1 100%;display:grid;gap:6px;min-width:0}
.hab .hab-fait{display:flex;align-items:baseline;gap:10px;padding:8px 20px;border-radius:4px;color:var(--hk);background:radial-gradient(circle at 0 50%,var(--ht) 6px,transparent 6.6px),radial-gradient(circle at 100% 50%,var(--ht) 6px,transparent 6.6px),#fff}
.hab .hab-fait b{flex:none;min-width:112px;font-size:24px;font-weight:900;font-stretch:62%;line-height:1;text-transform:uppercase;white-space:nowrap}
.hab .hab-fait span{font-size:14px;font-weight:600;line-height:1.3}
.hab-bande .hab-btn{flex:1 1 100%}
/* 3c. la marque : aucun personnage ; mention lisible, logo et photos réels épinglés sur le carton */
.hab.hab-marque{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 5px;padding:12px;background:var(--hp);color:var(--hk)}
.hab .hab-mention{margin:0;padding:0;font-size:14px;font-weight:800;font-stretch:112%;line-height:1.2;letter-spacing:.07em;text-transform:uppercase}
.hab .hab-logo{display:flex;align-items:center;box-sizing:border-box;min-height:56px;margin:0;padding:6px 12px;border:2px solid var(--hk);border-radius:4px;background:#fff;font-size:30px;font-weight:900;font-stretch:62%;line-height:1;text-transform:uppercase}
.hab .hab-logo img{display:block;width:auto;height:auto;max-width:150px;max-height:40px}
.hab .hab-accroche{margin:0;padding:0;max-width:34ch;font-size:18px;font-weight:800;font-stretch:87%;line-height:1.2;text-wrap:balance}
.hab .hab-phs{flex:1 1 auto;align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px;padding:2px 2px 4px}
.hab .hab-ph{display:block;border:2px solid var(--hk);border-radius:4px;background:#fff;box-shadow:0 3px 0 var(--hk);transition:transform 150ms var(--h-e)}
.hab .hab-ph:nth-child(1){transform:rotate(-2.5deg)}
.hab .hab-ph:nth-child(2){transform:rotate(1.5deg)}
.hab .hab-ph:nth-child(3){transform:rotate(-1deg)}
.hab .hab-phs .hab-ph:hover{transform:translateY(-3px)}
.hab .hab-ph img{display:block;width:100%;height:auto;aspect-ratio:1;max-width:none;object-fit:contain;border-radius:2px}
.hab-marque .hab-btn{align-self:stretch}

@media (min-width:768px){
.hab.hab-case{padding:26px 14px 14px}
.hab .hab-case-t{font-size:clamp(26px,2.6vw,34px)}
.hab .hab-case-p{font-size:15px}
.hab-case .hab-btn{font-size:16px}
.hab.hab-bande{gap:10px 22px;min-height:124px;margin:12px 0 5px;padding:12px 24px}
.hab .hab-bande-i{align-self:center;width:176px;height:176px;margin:-44px -16px -30px -20px}
.hab .hab-bande-c{flex:1 1 280px;min-width:220px}
.hab .hab-bande-t{font-size:clamp(26px,2.5vw,34px)}
.hab .hab-bande-p{max-width:64ch;font-size:16px}
.hab .hab-faits{flex:0 1 auto;grid-auto-flow:column;grid-auto-columns:fit-content(200px);gap:10px}
.hab .hab-fait{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:72px}
.hab .hab-fait b{min-width:0;font-size:28px}
.hab-bande .hab-btn{flex:none}
.hab.hab-marque{padding:16px}
.hab .hab-accroche{font-size:21px}
.hab .hab-phs{gap:12px;padding:4px 4px 6px}
.hab-marque .hab-btn{align-self:flex-start}
}
@media (min-width:992px){
.hab.hab-bande{flex-wrap:nowrap}
.hab .hab-bande-c{min-width:190px}
.hab .hab-fait{padding:8px 16px}
}
@media (min-width:1200px){
.hab .hab-bande-i2{display:block;margin:-44px -22px -30px -14px}
}
@media (prefers-reduced-motion:reduce){
.hab .hab-btn,.hab .hab-ph,.hab.hab-case,.hab.hab-bande{transition:none}
}