/* QuadretI — BOUTON-TESSELLE (28/09, fondateur : « les boutons deviennent des tesselles cliquables »).
   Un seul composant pour tous les boutons de l accueil : la même matière que les cases pleines du fond quadrillé (fond-quadrillage.css) —
   angles droits, biseau clair en haut à gauche / sombre en bas à droite (lumière haut-gauche, comme le reste du site), nervure noire
   autour, reflet qui traverse au survol, et à l appui la tesselle s enfonce dans la grille (le biseau s inverse).
   Portée : html.qz-tesselles-boutons (posée sur l accueil d abord). Les classes existantes restent (.cta, .btn-studio, .qb-cta2) : rien à
   changer dans le HTML ni dans le panneau, qui continue d injecter la couleur de fond sur .cta.
   Jetons : --qzt-fond (orange de marque), --qzt-encre (encre, 5,23 sur l orange), --qzt-fond-2 / --qzt-encre-2 (bouton secondaire gris,
   navy dessus), --qzt-nervure (nervure du quadrillage), --qzt-relief (force du biseau, 0..1). Aucune couleur figée dans les règles. */
:root{
  --qzt-fond:var(--qz-orange-marque,#d96c2f);
  --qzt-fond-survol:#df824e;          /* l eclaircissement deja en usage sur le site (index.html, 18/09) */
  --qzt-encre:#10181f;
  --qzt-fond-2:#dedede;
  --qzt-encre-2:#1e2b35;
  --qzt-nervure:var(--qzq-ligne,#000); /* 28/09 soir, fondateur : la nervure noire est RETIREE des boutons (« ca porte a confusion avec la demo ») ; jeton garde pour memoire. PAS var(--qzq-nervure) : ce jeton-la est une EPAISSEUR, et un box-shadow qui le recoit devient invalide en entier (mesure 28/09 : ombre = none) */
  --qzt-relief:.28;                  /* 28/09 soir, fondateur : « trop de volume » — biseau divise par deux, ombre portee allegee */
  --qzt-h:44px;                       /* cible tactile minimale */
}
html.qz-tesselles-boutons .cta,
html.qz-tesselles-boutons .btn-studio,
html.qz-tesselles-boutons .qb.qb-dispo-droite .qb-ctas .cta{
  position:relative; overflow:hidden; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:var(--qzt-h); padding:0 22px; margin:0;
  font-family:'Jura',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; line-height:1.1; white-space:nowrap;
  text-decoration:none; cursor:pointer; border:0; border-radius:0!important;
  background:var(--qzt-fond)!important; color:var(--qzt-encre)!important;
  /* le biseau des cases pleines (fond-quadrillage.css l.47) + la nervure autour + l ombre portée */
  box-shadow:inset 0.45mm 0.45mm 0.3mm rgba(255,255,255,calc(var(--qzt-relief) * .9)),
             inset -0.45mm -0.45mm 0.3mm rgba(0,0,0,var(--qzt-relief)),
             0.2mm 0.3mm 0.6mm rgba(0,0,0,.35)!important;
  transform:none!important;
  transition:background-color .18s ease, box-shadow .12s ease, transform .12s ease!important;
}
/* le bouton du hero : dans la disposition « droite » il vit dans .qb-ctas (bandeau-relief.js le deplace), position relative, rien a centrer.
   Quand il reste enfant direct de .hero (autres dispositions), il garde son centrage absolu d origine — ET ce centrage doit survivre au survol
   (29/08 : le bouton qui s echappe). ⚠ 28/09 : une premiere version testait .hero:not(.qb-dispo-droite), or cette classe est portee par .qb,
   pas par .hero : la regle s appliquait toujours et decalait le bouton (signale par le fondateur). */
html.qz-tesselles-boutons .qb-ctas .hero-cta.cta{ position:relative; left:auto; bottom:auto; }
html.qz-tesselles-boutons .hero > .hero-cta.cta{ position:absolute; left:50%; bottom:38px; transform:translateX(-50%)!important; }
html.qz-tesselles-boutons .hero > .hero-cta.cta:hover, html.qz-tesselles-boutons .hero > .hero-cta.cta:focus-visible{ transform:translateX(-50%) translate(-0.3mm,-0.4mm)!important; }
html.qz-tesselles-boutons .hero > .hero-cta.cta:active{ transform:translateX(-50%) translate(0.2mm,0.3mm)!important; }
/* secondaire : gris du site, navy dessus (10,75 mesuré, #1e2b35 sur #dedede) */
html.qz-tesselles-boutons .cta.light,
html.qz-tesselles-boutons .qb.qb-dispo-droite .qb-ctas .qb-cta2{ background:var(--qzt-fond-2)!important; color:var(--qzt-encre-2)!important; border:0!important; }
/* le reflet : la meme bande que sur les cases pleines, declenchee au survol (une seule traversee) */
html.qz-tesselles-boutons .cta::after,
html.qz-tesselles-boutons .btn-studio::after{
  content:''; position:absolute; inset:-10%; pointer-events:none; opacity:.9;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.45) 47%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.12) 55%,transparent 64%)!important;
  transform:translateX(-130%)!important; animation:none!important;
}
html.qz-tesselles-boutons .cta:hover, html.qz-tesselles-boutons .cta:focus-visible,
html.qz-tesselles-boutons .btn-studio:hover, html.qz-tesselles-boutons .btn-studio:focus-visible{
  background:var(--qzt-fond-survol)!important; transform:translate(-0.3mm,-0.4mm)!important;
  box-shadow:inset 0.45mm 0.45mm 0.3mm rgba(255,255,255,calc(var(--qzt-relief) * 1.1)),
             inset -0.45mm -0.45mm 0.3mm rgba(0,0,0,var(--qzt-relief)),
             0.5mm 0.7mm 1.4mm rgba(0,0,0,.45)!important;
}
html.qz-tesselles-boutons .cta.light:hover, html.qz-tesselles-boutons .cta.light:focus-visible,
html.qz-tesselles-boutons .qb.qb-dispo-droite .qb-ctas .qb-cta2:hover, html.qz-tesselles-boutons .qb.qb-dispo-droite .qb-ctas .qb-cta2:focus-visible{ background:#ffffff!important; }
html.qz-tesselles-boutons .cta:hover::after, html.qz-tesselles-boutons .cta:focus-visible::after,
html.qz-tesselles-boutons .btn-studio:hover::after, html.qz-tesselles-boutons .btn-studio:focus-visible::after{ animation:qzt-reflet .7s cubic-bezier(.4,0,.2,1) forwards!important; }
@keyframes qzt-reflet{ 0%{ transform:translateX(-130%) } 100%{ transform:translateX(130%) } }
/* a l appui : la tesselle se clipse — elle descend dans la grille, le biseau s inverse, l ombre portee disparait */
html.qz-tesselles-boutons .cta:active, html.qz-tesselles-boutons .btn-studio:active{
  transform:translate(0.2mm,0.3mm)!important; background:var(--qzt-fond)!important;
  box-shadow:inset 0.45mm 0.45mm 0.3mm rgba(0,0,0,calc(var(--qzt-relief) * .6)),
             inset -0.45mm -0.45mm 0.3mm rgba(255,255,255,calc(var(--qzt-relief) * .7)),
             0 0 0 rgba(0,0,0,0)!important;
}
html.qz-tesselles-boutons .cta:focus-visible, html.qz-tesselles-boutons .btn-studio:focus-visible{ outline:2px solid var(--qzt-fond-2); outline-offset:4px; }
/* les cartes tarifs : trois boutons de meme largeur, une tesselle pleine largeur dans sa carte */
html.qz-tesselles-boutons .offer .cta{ width:100%; }
@media (prefers-reduced-motion:reduce){
  html.qz-tesselles-boutons .cta::after, html.qz-tesselles-boutons .btn-studio::after{ display:none; }
  html.qz-tesselles-boutons .cta, html.qz-tesselles-boutons .btn-studio{ transition:none!important; }
}