/* Styles de public/templates/index.php — sortis de la page (i102b). */

/* Bootstrap sous le thème lux : on neutralise ses couleurs par défaut */
body { background:var(--noir) !important; color:var(--ivoire) !important; }
.cat-hero { padding:180px 24px 70px; text-align:center; }
.cat-hero h1 { font-size:clamp(2.6rem,6.4vw,5rem); line-height:1.05; margin-top:26px; }
/* La condition, en petit, juste sous la promesse — assez lisible pour être
   lue, assez discrète pour ne pas voler la ligne au titre. */
.cat-note { max-width:66ch; margin:20px auto 0; font-size:.8rem; line-height:1.6;
  color:var(--ivoire-2); opacity:.8; }
.count-note { color:var(--ivoire-2); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  text-align:center; margin:26px 0 40px; }
.count-note b { color:var(--or); font-weight:500; }
/* Vitrine collections : carte "3 formats + bandeau COLLECTION" */
.coll-showcase{max-width:1240px;margin:0 auto 34px;padding:0 24px}
.coll-eyebrow{text-align:center;color:var(--or);font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;margin-bottom:26px}
/* min(440px,100%) : sans ce garde-fou, une colonne de 440 px reste 440 px sur
   un téléphone de 390 et la page entière défile de côté. C'était déjà le cas
   avant, à 360 px — agrandir les cartes l'aurait simplement rendu plus visible. */
.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:30px}
.coll-card{position:relative;display:block;text-decoration:none;color:inherit;background:#0c0c11;border:1px solid #1c1c26;border-radius:16px;aspect-ratio:16/11;overflow:hidden;box-shadow:0 22px 54px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
.coll-card:hover{transform:translateY(-4px);box-shadow:0 28px 64px rgba(0,0,0,.55);border-color:#3a3320}
/* UN ÉVENTAIL CENTRÉ, PAS TROIS POSITIONS FIXES.
   Les trois tirages étaient posés à gauche, au milieu et à droite, en absolu.
   Une collection qui n'a qu'un format — et il y en a — laissait donc les deux
   tiers de la carte vides, et ça se lisait comme une page cassée plutôt que
   comme un choix. Centrés et superposés, un, deux ou trois tirages composent
   la même image voulue.
   HAUTEUR COMMUNE, LARGEUR LIBRE : c'est ce qui rend les formats comparables
   d'un coup d'œil — une bande étroite à côté d'un paysage large. */
.coll-stage{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
            padding:7% 6% 19%}
/* Cadres-photo : dimensions FIXES (aspect-ratio) + object-fit → jamais réduits à
   un "trait" si l'aperçu est transparent/manquant ; fond blanc = allure de tirage. */
/* ── POURQUOI IL N'Y A PLUS DE max-width ICI ──────────────────────────────
   C'ÉTAIT LA CAUSE DE L'ÉTIREMENT. Un tirage avait une hauteur DÉFINIE
   (height:100%) et un plafond de largeur (max-width:46%). Sur une image — et
   un canvas en est une — ces deux contraintes ensemble n'ajustent pas la
   taille : elles ÉCRASENT. Le navigateur garde la hauteur imposée et rabote la
   largeur, donc l'image se déforme au lieu de rétrécir.

   Mesuré avant correction, rapport affiché ÷ rapport réel :
       paysage 0,699   ·   portrait 1,106   ·   bande 1,156
   Le paysage sortait à 70 % de sa largeur : c'est l'écrasement qu'on voyait.

   UNE SEULE DIMENSION EST IMPOSÉE DÉSORMAIS — la hauteur — et la largeur suit
   d'elle-même. Un tirage ne peut alors plus être déformé, par construction.

   Et comme un paysage à hauteur égale serait deux fois plus large que tout le
   reste, c'est SA HAUTEUR qu'on baisse, pas sa largeur qu'on rabote. Chaque
   format garde ses proportions exactes ; ils occupent des surfaces comparables.
   C'est d'ailleurs vrai sur une table : un 15×10 et un 10×15 n'ont pas la même
   hauteur, seulement la même surface. */
/* box-sizing:content-box, EXPRESSÉMENT. Bootstrap met tout en border-box ;
   la marge blanche de 4 px serait alors PRISE SUR la hauteur imposée, et
   l'image, elle, ne rétrécirait pas d'autant — il restait 2 % de déformation,
   invisible à l'œil mais bien réelle. Ici la hauteur imposée est celle du
   TIRAGE, et le liseré blanc s'ajoute autour. */
.coll-ph{position:relative;box-sizing:content-box;flex:0 0 auto;height:92%;width:auto;
  background:#fff;padding:4px;border-radius:4px;box-shadow:0 16px 36px rgba(0,0,0,.6)}
.coll-ph.p{transform:rotate(-6deg);z-index:2}
.coll-ph.s{transform:rotate(-1deg);margin:0 -2%;z-index:3}
.coll-ph.l{height:62%;transform:rotate(5deg);margin-left:-2%;z-index:1}
/* Le repli image garde une largeur plancher : un PNG entièrement transparent
   n'a pas de proportions utiles et s'écraserait en trait. Un canvas peint, si. */
img.coll-ph{min-width:52px}
canvas.coll-ph{opacity:0;transition:opacity .35s}
canvas.coll-ph.fp-pret{opacity:1}
canvas.coll-ph.fp-rate{opacity:.5}
/* Bandeau nom + COLLECTION : tient dans la carte (le mot n'est plus coupé) */
.coll-brand{position:absolute;right:16px;bottom:14px;text-align:right;z-index:5;max-width:88%}
.coll-tape{position:absolute;right:6px;top:-12px;width:44px;height:16px;background:#c9a962;opacity:.85;transform:rotate(-8deg);border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.coll-name{display:inline-block;background:#f7f4ee;color:#141414;font-weight:700;letter-spacing:.01em;padding:.26rem .7rem;border-radius:3px;font-size:.86rem;line-height:1.15;box-shadow:0 6px 16px rgba(0,0,0,.45);max-width:100%}
.coll-word{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:800;text-transform:uppercase;color:#c9a962;font-size:clamp(1.05rem,2.6vw,1.55rem);line-height:1;letter-spacing:.12em;margin-top:.2em;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.55)}
@media(max-width:520px){.coll-word{font-size:1.15rem}.coll-name{font-size:.76rem}}

/* ── Rayons par occasion ── */
.coll-outils{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:30px}
.coll-q{width:min(460px,100%);background:#0f0f16;border:1px solid #262633;border-radius:2rem;color:var(--ivoire);padding:.7rem 1.2rem;font-size:.92rem;outline:none}
.coll-q:focus{border-color:var(--or)}
.coll-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.coll-chip{background:none;border:1px solid #2a2a35;color:var(--ivoire-2);border-radius:2rem;padding:.4rem .95rem;font-size:.78rem;letter-spacing:.06em;cursor:pointer;transition:border-color .15s,color .15s}
.coll-chip span{color:var(--or);margin-left:.25em;font-weight:600}
.coll-chip:hover{border-color:#4a4230;color:var(--ivoire)}
.coll-chip.on{border-color:var(--or);color:var(--ivoire);background:rgba(201,169,98,.08)}
.coll-rayon{margin-bottom:36px}
.rayon-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rayon-tete h3{font-family:var(--serif);font-size:1.6rem;margin:0;color:var(--ivoire)}
.rayon-tete h3 span{font-family:Inter,sans-serif;font-size:.8rem;color:var(--or);vertical-align:middle;margin-left:.3em}
.rayon-nav{display:flex;gap:8px;align-items:center}
.rayon-fl{display:none;width:34px;height:34px;border-radius:50%;border:1px solid #2a2a35;background:none;color:var(--ivoire);font-size:1.1rem;line-height:1;cursor:pointer}
.rayon-fl:hover{border-color:var(--or)}
.rayon-tout{background:none;border:0;color:var(--or);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:.3rem .4rem}
.rayon-piste{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,80vw);gap:20px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:#3a3320 transparent}
.rayon-piste>.coll-card{scroll-snap-align:start}
.coll-rayons .coll-card .coll-word{font-size:1.15rem}
.coll-rayons .coll-card .coll-name{font-size:.78rem}
/* Une occasion choisie, ou une recherche : le rayon devient une grille. */
.coll-rayon.grille .rayon-piste{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));overflow:visible}
.coll-rayon.deborde:not(.grille) .rayon-fl{display:inline-block}
.coll-rayon[hidden],.coll-card[hidden]{display:none!important}
#coll-grille{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:24px}
/* L'étiquette : le NOM d'abord, grand, sur un bandeau aux couleurs du thème ;
   le mot COLLECTION dessous, fin et espacé — il signe, il ne crie plus. */
#coll-grille .coll-brand{right:18px;bottom:16px;max-width:82%}
#coll-grille .coll-name{font-size:clamp(1.05rem,1.55vw,1.32rem);font-weight:700;letter-spacing:.02em;line-height:1.12;
  padding:.42rem 1rem .46rem;border-radius:3px;text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14)}
/* « MONDE DE TRANSFORMATION » est deux fois plus long que « COLLECTION » :
   l'interlettrage se resserre et le mot a le droit de passer à la ligne,
   sinon il sort de la carte. */
#coll-grille .coll-word{font-size:.74rem;font-weight:600;letter-spacing:.3em;margin-top:.55em;margin-right:-.3em;color:#c9a962;white-space:normal}
#coll-grille .a-theme .coll-name{background:var(--ca);color:var(--ct);font-family:var(--cf,inherit);font-style:var(--cfs,normal);
  font-weight:var(--cfw,700);font-size:clamp(1.15rem,1.7vw,1.45rem);
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.14))}
#coll-grille .a-theme .coll-word{color:var(--cw)}
#coll-grille .a-theme .coll-tape{background:var(--cw);opacity:.75}
#coll-grille .a-theme:hover{border-color:color-mix(in srgb,var(--ca) 55%,transparent);box-shadow:0 28px 64px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--ca) 35%,transparent)}
@media(max-width:520px){#coll-grille .coll-name{font-size:1.05rem}#coll-grille .coll-word{font-size:.66rem}}
.coll-vide{text-align:center;color:var(--ivoire-2);font-style:italic;margin:20px 0 40px}
@media(max-width:600px){.coll-rayon .rayon-fl{display:none!important}.rayon-tete h3{font-size:1.3rem}}

/* ── Cadres (liste du bas) : chaque cadre, et sa collection ── */
#cat-grid{gap:18px;background:none;border:0;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.tp-card{background:#0c0c11;border:1px solid #1c1c26;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.tp-card:hover{transform:translateY(-3px);border-color:#3a3320}
.tp-scene{position:relative;display:block;aspect-ratio:1/1;background:radial-gradient(120% 90% at 50% 30%,#17161f,#0b0b10)}
.tp-img{position:absolute;inset:22px 18px;display:flex;align-items:center;justify-content:center}
.tp-scene img,.tp-scene canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;background:#fff;padding:3px;border-radius:3px;
  box-shadow:0 14px 30px rgba(0,0,0,.55);transition:transform .5s}
.tp-card:hover .tp-scene img,.tp-card:hover .tp-scene canvas{transform:scale(1.03)}
.tp-scene canvas{opacity:0;transition:opacity .35s,transform .5s}
.tp-scene canvas.fp-pret{opacity:1}.tp-scene canvas.fp-rate{opacity:.5}
.tp-scene .use{position:absolute;top:12px;right:12px;opacity:0;transform:translateY(-6px);transition:all .3s;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;background:var(--or);color:var(--noir);padding:8px 13px;font-weight:600;border-radius:2px}
.tp-card:hover .use{opacity:1;transform:none}
.tp-scene .prem{position:absolute;top:12px;left:12px;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;padding:6px 10px;
  background:rgba(11,10,8,.8);color:var(--or);border:1px solid #3a3320;border-radius:2px}
.tp-pied{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.tp-nom{font-family:var(--serif);font-size:1.05rem;color:var(--ivoire);line-height:1.2}
.tp-pied small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-2)}
.tp-coll{align-self:flex-start;margin-top:8px;text-decoration:none;font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:3px;
  background:var(--ca,#f7f4ee);color:var(--ct,#141414);box-shadow:0 6px 14px rgba(0,0,0,.4);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-coll span{font-size:.56rem;letter-spacing:.24em;opacity:.8;margin-right:.3em}
.tp-coll:hover{filter:brightness(1.1)}
/* La carte ouvre l'aperçu (plus l'espace opérateur) */
button.tp-scene{width:100%;border:0;padding:0;margin:0;cursor:zoom-in;font:inherit;color:inherit;text-align:inherit}
button.tp-scene:focus-visible{outline:2px solid var(--or);outline-offset:-2px}

/* ── Aperçu d'un cadre : grand, précédent / suivant, « je le veux » ── */
.tp-lb{position:fixed;inset:0;margin:auto;width:min(1100px,96vw);max-height:94vh;padding:0;border:1px solid var(--hair,rgba(201,169,98,.35));
  border-radius:18px;background:#0d0c10;color:var(--ivoire,#f3eee3);box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:hidden}
.tp-lb::backdrop{background:rgba(5,4,3,.82);backdrop-filter:blur(5px)}
.tp-lb[open]{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr)}
.tp-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(78vh,640px);padding:34px 64px;
  background:radial-gradient(120% 90% at 50% 30%,#1a1922,#0b0b10)}
.tp-lb-stage canvas,.tp-lb-stage img{max-width:100%;max-height:min(72vh,600px);width:auto;height:auto;display:block;background:#fff;padding:4px;
  border-radius:3px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.tp-lb-stage canvas{opacity:0;transition:opacity .3s}.tp-lb-stage canvas.fp-pret{opacity:1}
.tp-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--hair,rgba(201,169,98,.35));
  background:rgba(11,10,8,.7);color:var(--or,#c9a962);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.tp-lb-nav:hover{background:var(--or,#c9a962);color:#0b0a08}
.tp-lb-nav.prev{left:12px}.tp-lb-nav.next{right:12px}
.tp-lb-side{display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;border-left:1px solid #1c1c26;overflow:auto}
.tp-lb-close{align-self:flex-end;width:38px;height:38px;border-radius:50%;border:1px solid #2a2a33;background:none;color:var(--ivoire-2,#cfc8b8);cursor:pointer;margin:-10px -8px 0 0}
.tp-lb-close:hover{border-color:var(--or);color:var(--or)}
.tp-lb-count{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ivoire-2,#cfc8b8)}
.tp-lb-nom{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;margin:0}
.tp-lb-meta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-2,#cfc8b8)}
.tp-lb-prix{font-size:1rem;color:var(--or,#c9a962)}
.tp-lb-side .tp-coll{margin-top:0}
.tp-lb-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.tp-lb-cta .btn-lux{width:100%;text-align:center}
.tp-lb-note{font-size:.78rem;color:var(--ivoire-2,#cfc8b8);line-height:1.45;margin:0}
@media(max-width:820px){
  .tp-lb[open]{grid-template-columns:1fr;overflow:auto}
  .tp-lb-stage{min-height:0;padding:22px 52px}
  .tp-lb-stage canvas,.tp-lb-stage img{max-height:56vh}
  .tp-lb-side{border-left:0;border-top:1px solid #1c1c26;padding:18px 18px 22px}
  .tp-lb-close{position:absolute;top:10px;right:10px;margin:0;background:rgba(11,10,8,.7)}
  .tp-lb-nav{width:40px;height:40px}.tp-lb-nav.prev{left:6px}.tp-lb-nav.next{right:6px}
}

/* i170 — les pages par occasion, sous la grille des collections. */
.coll-occ-liens{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;align-items:center;margin:10px auto 36px;max-width:1100px}
.coll-occ-titre{width:100%;text-align:center;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--or,#c9a962);margin-bottom:4px}
.coll-occ-liens a{padding:7px 14px;border-radius:999px;border:1px solid rgba(201,169,98,.28);color:var(--ivoire,#f3eee3);text-decoration:none;font-size:.86rem;transition:border-color .2s,background .2s}
.coll-occ-liens a:hover{border-color:var(--or,#c9a962);background:rgba(201,169,98,.08)}

/* i174 — « voir toutes les collections » et « afficher plus de cadres » */
.coll-plus,.cat-plus-p{text-align:center;margin:6px 0 28px}
.coll-plus .btn-lux,.cat-plus-p .btn-lux{isolation:isolate;text-decoration:none;padding:15px 30px}
.cat-plus-p{margin-top:34px}