/* 12/09 : les regles de l en-tete (barre, onglet, bloc logo, menu visible, sous-menu) sont parties dans entete-commun.css, commun a toutes les pages. Ne restent ici que la sequence d accueil et l accroche animee. */
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&display=swap");
/* QuadretI — bandeau d'accueil "carreaux 7x7 en relief", CSS pur (10/09/2026, demande fondateur : remplace la vidéo
   Changez, 18 à 22 Mo par version). Source des réglages : SITE\POLICE PROPRIETAIRE\bandeau-relief-outil.html (réglages par
   défaut, mur 3 x 2 carreaux). Séquence : attente, mur en relief, tesselles de l'oeil arrivent une à une depuis les 4
   angles, zoom sur la pupille, départ, vide, aurore, départ, boucle. Toutes les couleurs sont des variables posées sur .qb
   par bandeau-relief.js. Classes préfixées qb- pour ne rien toucher au reste de la page. */
.qb{position:relative;width:100%;max-width:1100px;background:var(--fond);overflow:hidden;border-radius:0;container-type:inline-size;padding:3cqw 0;display:flex;flex-direction:column;align-items:center;gap:var(--ecart-t)}
.qb.qb-pos-haut-bas .qb-b1{order:-1}
.qb.qb-pos-haut .qb-b1,.qb.qb-pos-haut .qb-b2{order:-1}
.qb-mur{position:relative;--u:calc((100cqw - (var(--cx) - 1) * var(--ecart) - 2 * var(--marge-ext, 0cqw)) / var(--cx));--case:calc(var(--u) * 26 / 189);--ext:calc(var(--u) * .5 / 189);--int:calc(var(--u) * 1 / 189);
  display:grid;grid-template-columns:repeat(var(--cx),var(--u));gap:var(--ecart);justify-content:center;perspective:calc(var(--u) * 6);transform-origin:var(--zx) var(--zy)}
.qb-carreau{position:relative;width:var(--u);height:var(--u);padding:var(--ext);display:grid;grid-template-columns:repeat(var(--cases),var(--case));grid-auto-rows:var(--case);gap:var(--int);background:var(--cadre);border-radius:0;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,calc(var(--lum) * .7)),inset -1px -1px 0 rgba(0,0,0,calc(var(--ombre) * .8)),0 calc(var(--u) * .018) calc(var(--u) * .026) rgba(0,0,0,.32)}
.qb-carreau::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
/* une case : logement traversant (on voit le fond) ; les 4 angles ont un fond ferme (gris) et le percage de la punaise */
.qb-case{position:relative;border-radius:0;background:radial-gradient(120% 120% at 30% 25%,color-mix(in srgb,var(--creux) 100%,#fff 6%) 0%,var(--creux) 55%,color-mix(in srgb,var(--creux) 100%,#000 12%) 100%);
  box-shadow:inset var(--relief) var(--relief) calc(var(--relief) * 1.6) rgba(0,0,0,var(--ombre)),inset calc(var(--relief) * -.35) calc(var(--relief) * -.35) calc(var(--relief) * .8) rgba(255,255,255,calc(var(--lum) * .25)),inset 0 0 0 1px rgba(255,255,255,calc(var(--lum) * .35)),1px 1px 0 rgba(255,255,255,var(--lum)),-1px -1px 0 rgba(0,0,0,calc(var(--ombre) * .5))}
.qb-angles-fermes .qb-case.qb-angle::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--case) * .058);height:calc(var(--case) * .058);margin:calc(var(--case) * -.029) 0 0 calc(var(--case) * -.029);border-radius:50%;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
/* la tesselle : meme dimension que la case (demande fondateur), angles droits ; une couche par visuel, toutes au repos hors ecran */
.qb-tu{position:absolute;inset:0;z-index:5;border-radius:0;background-color:var(--creux);background-repeat:no-repeat;opacity:0;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,calc(var(--lum) * 1.3)),inset -1px -1px 0 rgba(0,0,0,calc(var(--ombre) * .6)),calc(var(--relief) * .5) calc(var(--relief) * .5) calc(var(--relief) * 1.2) rgba(0,0,0,calc(var(--ombre) * .7));transform-origin:center}
.qb-tu::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,calc(var(--lum) * .3)) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,calc(var(--ombre) * .2)) 100%)}
.qb-flash{position:absolute;inset:0;z-index:6;border-radius:0;background:#fff;opacity:0;pointer-events:none}
.qb-fini .qb-tu.qb-k0{opacity:1}
/* 12/09 fondateur : « vie » du mur pendant la pause finale -- une tesselle isolee se declipse et se reclipse toutes les ~8 s.
   Deux calques sur la case choisie : le creux (cache la tesselle posee pendant la sortie) et une copie de la tesselle qui se souleve. */
.qb-vie-creux,.qb-vie-tu{position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:0}
.qb-vie-creux{z-index:7;background:radial-gradient(120% 120% at 30% 25%,color-mix(in srgb,var(--creux) 100%,#fff 6%) 0%,var(--creux) 55%,color-mix(in srgb,var(--creux) 100%,#000 12%) 100%);
  box-shadow:inset var(--relief) var(--relief) calc(var(--relief) * 1.6) rgba(0,0,0,var(--ombre)),inset 0 0 0 1px rgba(255,255,255,calc(var(--lum) * .35))}
.qb-vie-tu{z-index:30;background-color:var(--creux);background-repeat:no-repeat;transform-origin:center;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,calc(var(--lum) * 1.3)),inset -1px -1px 0 rgba(0,0,0,calc(var(--ombre) * .6))}
.qb-joue .qb-vie-creux,.qb-joue .qb-vie-tu{animation:var(--vie) var(--P) linear infinite;animation-delay:var(--tc)}
/* les textes : hors de la grille, centres, sous le mur (ou au-dessus) */
.qb-textes{position:relative;z-index:3;width:100%;display:grid;justify-items:center;text-align:center;gap:.05em;padding:0 4%;font-weight:700;pointer-events:none}
.qb-b1{font-family:var(--police1);font-size:var(--taille1);color:var(--couleur1)}
.qb-b2{display:block;font-family:var(--police2);font-size:var(--taille2);color:var(--couleur2)}
.qb-li{margin:0;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,calc(.5 * var(--txt-relief)))) drop-shadow(calc(1px * var(--txt-relief)) calc(1px * var(--txt-relief)) 0 rgba(0,0,0,calc(.45 * var(--txt-relief))))}
.qb-li .qb-l{display:inline-block;position:relative;transform-origin:center}
.qb-mot{display:inline-block;white-space:nowrap}
.qb-dispo-ligne .qb-li.qb-l2,.qb-dispo-ligne .qb-li.qb-l3{display:none}
/* ================== ANIMATION (CSS pur) ==================
   0. le mur apparait ; puis, pour chaque visuel k, la couche .qb-tu.k{k} joue "cycle-k" (dans #dyn) : arrivee depuis le coin le plus
   proche (translate + scale, vague par distance au coin : --d par tesselle), tenue, depart, vide. Toutes les couches partagent
   la periode --P, decalees de --tc + --d. Le flash "clic" et le zoom sont dans #dyn aussi. */
.qb-joue .qb-mur{opacity:0;animation:qb-paraitre var(--dg) cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--depart)}
.qb-joue.qb-zoome .qb-mur{animation:qb-paraitre var(--dg) cubic-bezier(.2,.8,.3,1) forwards,qb-zoomer var(--P) linear infinite;animation-delay:var(--depart),var(--tc)}
.qb-joue .qb-tu{animation:var(--anim) var(--P) linear infinite;animation-delay:calc(var(--tc) + var(--d))}
.qb-joue .qb-flash{animation:var(--flash) var(--P) linear infinite;animation-delay:calc(var(--tc) + var(--d))}
@keyframes qb-paraitre{from{opacity:0;transform:scale(.7)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes qb-fondu{from{opacity:0}to{opacity:1}}
@keyframes qb-monter{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes qb-arriere{from{opacity:0;transform:scale(.5)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes qb-clipser-l{0%{opacity:0;transform:scale(1.8);filter:drop-shadow(0 .12em .1em rgba(0,0,0,.6))}30%{opacity:1}100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}}
.qb-joue.qb-mode-t-clip .qb-li .qb-l{opacity:0;animation:qb-clipser-l .45s cubic-bezier(.3,1.55,.5,1) forwards;animation-delay:calc(var(--tl) + var(--i) * var(--ln))}
.qb-joue.qb-mode-t-dactylo .qb-li .qb-l{opacity:0;animation:qb-fondu .04s linear forwards;animation-delay:calc(var(--tl) + var(--i) * var(--ln))}
.qb-joue.qb-mode-t-fondu .qb-li{opacity:0;animation:qb-fondu var(--dn) ease-out forwards;animation-delay:var(--tl)}
.qb-joue.qb-mode-t-montee .qb-li{opacity:0;animation:qb-monter var(--dn) cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--tl)}
.qb-joue.qb-mode-t-arriere .qb-li{opacity:0;animation:qb-arriere var(--dn) cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--tl)}
.qb-joue.qb-mode-t-aucun .qb-li{opacity:1}
.qb-li.qb-l1{--tl:var(--tl1)}.qb-li.qb-l2{--tl:var(--tl2)}.qb-li.qb-l3{--tl:var(--tl3)}.qb-li.qb-l4{--tl:var(--tl4)}
.qb-fini .qb-mur,.qb-fini .qb-li,.qb-fini .qb-l,.qb-fini .qb-para{opacity:1}
/* le paragraphe suit le titre (fondu) */
.qb-joue .qb-para{opacity:0;animation:qb-monter .7s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--tl4) + .4s)}
.qb-joue.qb-mode-t-aucun .qb-para{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.qb *{animation:none!important}.qb-mur,.qb-li,.qb-l,.qb-para,.qb-tu.qb-k0,.qb.qb-dispo-droite .qb-b2{opacity:1}}

/* 12/09 fondateur : photo en arriere-plan du bandeau (essai), sous un voile navy degrade -- plus dense a gauche pour les textes, plus leger sur le mur */
.qb.qb-fond-photo{background-image:linear-gradient(90deg,rgba(30,43,53,var(--voile-g,.84)) 0%,rgba(30,43,53,var(--voile-g,.84)) 38%,rgba(30,43,53,var(--voile-d,.5)) 62%,rgba(30,43,53,var(--voile-d,.5)) 100%),var(--fond-image);background-size:cover;background-position:var(--fond-pos,center);background-repeat:no-repeat}
/* le hero de index.html : la vidéo et ses textes sont remplacés par ce bloc, plein largeur */
.qb{max-width:none;border-radius:0;padding-bottom:calc(3cqw + 84px)}
.hero{min-height:0!important;display:block!important}
.hero .bg-veil{display:none}
/* 10/09, demande fondateur : pleine largeur (plus de plafond a 940 px) */
/* 11/09, demande fondateur : le mur doit tenir a l ecran -> largeur pleine, mais jamais plus de 70 % de la hauteur de la fenetre */
.qb .qb-mur{--u:min(calc((100cqw - (var(--cx) - 1) * var(--ecart)) / var(--cx)), calc(70vh / var(--cy)))}
/* grille fixe (fondateur 10/09) : la grille est la des le chargement, sans apparition */
.qb.qb-grille-fixe .qb-mur{opacity:1;animation:none}
/* repli navigateurs anciens : photo fixe */
.qb.qb-repli{display:block;padding:0}.qb-repli-img{display:block;width:100%;height:auto}
/* 11/09, demande fondateur : disposition 'droite' -- baseline 1, baseline 2 et bouton a gauche (chacun sur sa ligne), mur anime a droite */
/* 11/09 : bandeau + bande des gestes doivent tenir sur un ecran de portable 14 pouces -> mur plafonne a 50 % de la hauteur de la fenetre, marges serrees */
/* 11/09 fondateur (« A + marges a 3 % ») : marges laterales 3 %, la colonne de textes prend toute la largeur laissee par le mur */
.qb.qb-dispo-droite{flex-direction:row;align-items:center;justify-content:space-between;gap:3cqw;padding:1.2cqw 3cqw 1.2cqw} /* 11/09 soir : marges haut/bas serrees (1.2 %), le mur prend la hauteur disponible (--mur-max, calcule par caler) */
.qb.qb-dispo-droite .qb-col{display:flex;flex-direction:column;align-items:flex-start;gap:1.1cqw;flex:1 1 auto;min-width:0}
.qb.qb-dispo-droite .qb-textes{width:auto;padding:0;text-align:left;justify-items:start;pointer-events:none}
.qb.qb-dispo-droite .qb-li{white-space:normal}
/* 11/09, reference Pixel Corner : accroche en capitales espacees (baseline 1), gros titre serre (baseline 2), paragraphe, deux boutons cote a cote */
.qb.qb-dispo-droite .qb-b1 .qb-li{text-transform:uppercase;letter-spacing:.18em;line-height:1.3;filter:none}
/* 11/09 fondateur : « style onglet » -- la barre gris clair (#dedede) descend a gauche sous le logo et accueille l accroche (baseline 1),
   remontee et alignee sur le logo ; le navy commence en dessous. Forme dessinee par le fondateur (!BAZAR A MORAD\ONGLET.svg), etiree sur
   toute la largeur : partie droite = hauteur de la barre (--entete, posee par bandeau-relief.js), partie gauche 29 % plus basse, raccord en pente douce. */
.qb.qb-dispo-droite{--entete:80px}
.qb.qb-dispo-droite{--decroche:33.5%} /* position du decroche : la pente finit a cette fraction de la largeur (fondateur : ~29-32 %) */
/* 12/09 : bords = vrais <svg> dans la page (bandeau-relief.js, bordElement), forme + ligne du bord libre. L onglet du haut (BORD 1) est desormais dessine par l en-tete commune (commun-bandeau.js / entete-commun.css) */
.qb-bord{position:absolute;left:0;width:100%;display:block;pointer-events:none}
.qb-bord.qb-bord-ligne{z-index:5;overflow:visible}
/* 12/09 piste B : reflet qui voyage le long du lisere (tiret court sur un second trace, longueur normalisee a 1000, va d un bout a l autre puis pause) */
.qb-bord-reflet{stroke-width:var(--lisere-ep,0);stroke-dashoffset:var(--reflet-tiret,60)}
.qb-bord-reflet.qb-reflet-boucle{animation:qb-reflet-ligne var(--reflet-duree,7s) linear infinite}
.qb-bord-defile-bas .qb-bord-reflet.qb-reflet-boucle{animation-direction:reverse}
/* 12/09 piste A : la ligne se dessine au chargement, de droite a gauche a l ecran (le bord retourne est inverse) ; invisible avant (fill-mode both) */
.qb-bord-trace{animation:qb-trace-ligne var(--trace-duree,1.4s) cubic-bezier(.65,0,.35,1) var(--t-lisere,3s) both}
.qb-bord-defile-bas .qb-bord-trace{animation-name:qb-trace-ligne-inv}
@keyframes qb-trace-ligne{from{stroke-dashoffset:-1000}to{stroke-dashoffset:0}}
@keyframes qb-trace-ligne-inv{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.qb-bord-trace{animation:none;stroke-dashoffset:0}}
@keyframes qb-reflet-ligne{0%{stroke-dashoffset:var(--reflet-tiret,60)}32%{stroke-dashoffset:-1000}100%{stroke-dashoffset:-1000}}
@media (prefers-reduced-motion:reduce){.qb-bord-reflet{animation:none;visibility:hidden}} /* 12/09 : la ligne du bord libre est un calque a part, au premier plan, qui peut deborder (sinon rognee sur les parties plates) */
.qb-bord-trait{stroke:var(--lisere-couleur,#d96c2f);stroke-width:var(--lisere-ep,0)}
.qb.qb-dispo-droite .qb-col{position:relative;z-index:1}
/* 11/09 fondateur, proposition D3 du mock-up : l accroche rejoint le bloc logo de la barre (bandeau-relief.js la deplace dans .qz-wm-col),
   sous la categorie, alignee sur le naming. Q de 88 px, trois lignes a hauteur egale (naming 36 px, categorie navy et accroche orange en
   Jura gras 19 px sur 26 px), la tesselle orange du Q sur la ligne de l accroche. */
.qz-header.qz-menu-visible .qb-b1{display:block;width:auto;padding:0;margin:0;position:static;pointer-events:none;font-family:'Jura',sans-serif;font-weight:700;font-size:14.5px;line-height:19.5px;letter-spacing:.02em;color:#1e2b35;text-transform:none;white-space:nowrap;filter:none} /* 12/09 : accroche en navy, 2e ligne */
.qz-header.qz-menu-visible .qb-b1 .qb-li{margin:0;line-height:inherit;letter-spacing:inherit;text-transform:none;white-space:nowrap;filter:none}
.qz-header.qz-menu-visible .qb-b1 .qb-l{display:inline-block;opacity:0;animation:qb-clipser-l .45s cubic-bezier(.3,1.55,.5,1) forwards;animation-delay:calc(var(--qz-ta,.3s) + var(--i) * var(--ln,.3s))} /* --qz-ta : depart de l accroche dans la sequence generale */
.qz-header.qz-menu-visible .qb-b1 .qb-mot{display:inline-block;white-space:nowrap}
.qz-header.qz-menu-visible .qb-b1 .qb-l2,.qz-header.qz-menu-visible .qb-b1 .qb-l3{display:none} /* accroche sur une ligne (les lignes 2 et 3 servent a la disposition en colonne) */
@media (prefers-reduced-motion:reduce){.qz-header.qz-menu-visible .qb-b1 .qb-l{animation:none;opacity:1}}
.qb.qb-dispo-droite .qb-b2{margin-top:.2cqw}
.qb.qb-dispo-droite .qb-b2.qb-li{line-height:1.02;letter-spacing:-.02em;font-weight:700;white-space:nowrap;color:var(--titre,var(--couleur2))}
/* 12/09 fondateur : le titre apparait en fondu au moment ou le mur commence a changer de visuel (--t-changement, pose par bandeau-relief.js) */
.qb.qb-dispo-droite .qb-b2{opacity:0}
.qb.qb-dispo-droite.qb-joue .qb-b2{animation:qb-fondu 1.4s ease-out forwards;animation-delay:var(--t-changement,0s)}
.qb.qb-dispo-droite.qb-fini .qb-b2{opacity:1} /* 11/09 soir : titre sur une ligne (taille ajustee par caler) */
.qb.qb-dispo-droite .qb-b2 .qb-mot{margin-right:.22em}
.qb.qb-dispo-droite .qb-para .qb-phrase{display:block;white-space:nowrap}
.qb.qb-dispo-droite .qb-para{margin:.6cqw 0 0;max-width:none;font-family:'Jura',sans-serif;font-weight:500;font-size:clamp(14px,1.3cqw,18px);line-height:1.6;color:color-mix(in srgb,var(--couleur2) 82%,transparent)}
.qb.qb-dispo-droite .qb-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2cqw}
.qb.qb-dispo-droite .qb-ctas .cta{position:static;transform:none;margin:0;pointer-events:auto;z-index:4;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(11px,.9cqw,13px);padding:11px 20px;white-space:nowrap;border-radius:4px} /* 11/09 soir : boutons reduits (fondateur) */
/* 11/09 soir (fondateur) : relief de tesselle sur les deux boutons (arete claire en haut a gauche, ombre en bas a droite, ombre portee)
   et animation « reflet » : au survol, un eclat clair balaie le bouton de gauche a droite, comme une lumiere sur une tesselle brillante. */
.qb.qb-dispo-droite .qb-ctas .cta{position:relative;top:auto;right:auto;bottom:auto;left:auto;overflow:hidden;box-shadow:inset 1px 1px 0 rgba(255,255,255,.38),inset -1px -1px 0 rgba(0,0,0,.28),0 5px 12px rgba(0,0,0,.4);transition:box-shadow .2s}
.qb.qb-dispo-droite .qb-ctas .cta::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-18deg);opacity:0}
.qb.qb-dispo-droite .qb-ctas .cta:hover::after{animation:qb-reflet .75s cubic-bezier(.4,0,.2,1) forwards}
.qb.qb-dispo-droite .qb-ctas .cta:hover{transform:none;box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.28),0 7px 16px rgba(0,0,0,.45)}
.qb.qb-dispo-droite .qb-ctas .cta:active{transform:none;box-shadow:inset 2px 2px 4px rgba(0,0,0,.35),0 0 0 rgba(0,0,0,0)}
@keyframes qb-reflet{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}15%{opacity:1}100%{transform:translateX(420%) skewX(-18deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.qb.qb-dispo-droite .qb-ctas .cta:hover::after{animation:none}}
.qb.qb-dispo-droite .qb-ctas .qb-cta2{background:#dedede!important;color:#1e2b35!important;border:none} /* 11/09 soir : Galerie en gris clair, texte navy, meme relief que Composer mon mur */
.qb.qb-dispo-droite .qb-mur{flex:0 0 auto;--u:min(calc((60cqw - (var(--cx) - 1) * var(--ecart)) / var(--cx)),calc(var(--mur-max,38vh) / var(--cy)))} /* 11/09 soir : hauteur max du mur = place restante a l ecran (barre, marges, bande des gestes, bandeau defilant deduits), calculee par bandeau-relief.js */
@media (max-width:900px){
  .qb.qb-dispo-droite{flex-direction:column;gap:2.5cqw;padding:3cqw 4cqw 4cqw}
  .qb.qb-dispo-droite .qb-col{align-items:center;flex:none;width:100%}
  .qb.qb-dispo-droite .qb-textes{text-align:center;justify-items:center}
  .qb.qb-dispo-droite .qb-para{text-align:center}
  .qb.qb-dispo-droite .qb-ctas{justify-content:center}
  .qb.qb-dispo-droite .qb-mur{--u:min(calc((100cqw - (var(--cx) - 1) * var(--ecart)) / var(--cx)),calc(70vh / var(--cy)))}
}

/* ===== 11/09 : bande des quatre gestes sous le bandeau (bandeau-gestes.js). Compacte pour tenir avec le bandeau sur un 14 pouces.
   Variantes : A dans la continuite du bandeau (navy), B sur le fond de page, C bande creme posee sur le navy. Bord gauche = colonne de textes. */
.qb-gestes{position:relative;z-index:3;font-family:'Jura',sans-serif}
/* 11/09 fondateur : decroche du bas -- le navy du bandeau descend sous le mur, a droite, de --decroche-bas (meme hauteur que le
   surplus de l onglet du haut : 29 % de la barre), pente vers ~43 % de la largeur (--decroche-bas-x). Meme dessin que l onglet
   (ONGLET.svg), recadre sur la bande de la pente et retourne horizontalement. La bande des gestes est decalee d autant. */
.qb-gestes{--entete:58px;--decroche-bas:var(--decroche-h,22px);padding-top:var(--decroche-bas)}
.qb-bord-bas{top:-4px;height:calc(var(--decroche-bas) + 4px);z-index:-1}
/* 12/09 fondateur : decroche du bandeau defilant -- son navy remonte a gauche dans la bande des gestes (--decroche-defile, meme hauteur que
   les autres decroches), pente descendante vers ~28 % de la largeur (--decroche-defile-x). Dessin ONGLET.svg, bande de la pente, non retourne. */
.qb-gestes{--decroche-defile:var(--decroche-h,22px);padding-bottom:var(--decroche-defile)}
.qb-bord-defile-haut{bottom:-4px;height:calc(var(--decroche-defile) + 4px);z-index:-1}
@media (max-width:900px){.qb-gestes{padding-top:0;padding-bottom:0}.qb-bord-bas,.qb-bord-defile-haut,.qb-bord-defile-bas{display:none}}
/* 11/09 fondateur : bande plus petite, sur toute la largeur (marges 3 %), fleches entre les etapes */
.qb-gestes-liste{list-style:none;margin:0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:clamp(10px,1.4vw,26px);padding:clamp(10px,1.2vw,18px) 3vw clamp(14px,1.6vw,24px)}
.qb-geste{display:grid;align-content:start;justify-items:center;text-align:center;gap:4px;min-width:0} /* chaque icone centree avec son texte */
.qb-geste-icone{width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);display:block;color:inherit}
.qb-geste h3{margin:3px 0 0;font-family:'Jura',sans-serif;font-weight:700;font-size:clamp(14px,1.05vw,16px);letter-spacing:.02em;line-height:1.2}
.qb-geste p{margin:0;font-size:clamp(11.5px,.85vw,12.5px);line-height:1.45;font-weight:500;max-width:36ch} /* 11/09 : phrases sur deux lignes */
.qb-geste-fleche{display:flex;align-items:center;justify-content:center;height:clamp(36px,3vw,44px);opacity:.55}
.qb-geste-fleche svg{width:clamp(22px,2vw,30px);height:auto;display:block}
.qb-gestes-A{background:var(--fond,#1e2b35);color:var(--couleur2,#f4f1ea)}
.qb-gestes-A .qb-geste p{color:color-mix(in srgb,var(--couleur2,#f4f1ea) 70%,transparent)}
.qb-gestes-A .qb-geste-icone{--ic-fond:var(--fond,#1e2b35)}
/* B (retenue le 11/09) : sur le fond de page, icones et textes navy, sauf Changez en terracotta */
.qb-gestes-B{background:transparent;color:#1e2b35}
.qb-gestes-B .qb-geste p{color:color-mix(in srgb,#1e2b35 78%,transparent)}
.qb-gestes-B .qb-geste-icone{--ic-fond:transparent}
/* 14/09 : --qz-terracotta-texte et non --qz-terracotta. L orange de marque pose en texte sur ce fond clair vaut 2,54 ;
   le jeton texte porte la meme teinte, foncee juste assez pour se lire (4,67, calcule). Repli sur le #9c4514 de la charte. */
.qb-gestes-B .qb-geste-changez h3,.qb-gestes-B .qb-geste-changez p{color:var(--qz-terracotta-texte,#9c4514)} /* 12/09 : tout le texte du geste Changez en orange */
/* 12/09 fondateur : icone Changez plus grasse (contour ajoute au trace plein, unites du dessin) */
.qb-geste-changez .qb-geste-icone{color:var(--qz-terracotta-texte,#9c4514);stroke:var(--qz-terracotta-texte,#9c4514);   /* 14/09 : un trait aussi doit atteindre 3:1 — l orange de marque n y arrivait pas sur ce fond (2,54) */stroke-width:16;stroke-linejoin:round;stroke-linecap:round} /* pose sur le <svg> : herite dans le symbole reference par <use> (le trace n a pas d attribut stroke) */
/* 12/09 fondateur : le geste Changez apparait en fondu au moment ou le mur commence a changer (classe qb-changement posee au lancement du mur) */
.qb-gestes .qb-geste-changez,.qb-gestes .qb-gestes-liste > li:nth-last-child(2){opacity:0} /* 12/09 : la fleche qui precede Changez suit le meme fondu */
.qb-gestes.qb-changement .qb-geste-changez,.qb-gestes.qb-changement .qb-gestes-liste > li:nth-last-child(2){animation:qb-fondu 1.4s ease-out forwards;animation-delay:var(--t-changement,0s)}
@media (prefers-reduced-motion:reduce){.qb-gestes .qb-geste-changez,.qb-gestes .qb-gestes-liste > li:nth-last-child(2){opacity:1;animation:none}}
.qb-gestes-C{background:var(--fond,#1e2b35);padding:0 4vw clamp(20px,2.4vw,36px)}
.qb-gestes-C .qb-gestes-liste{background:#f4f1ea;color:#1e2b35;padding-left:3vw;padding-right:3vw}
.qb-gestes-C .qb-geste p{color:#5c646c}
.qb-gestes-C .qb-geste-icone{--ic-fond:#f4f1ea}
@media (max-width:900px){
  .qb-gestes-liste{grid-template-columns:1fr 1fr;gap:22px 18px}
  .qb-geste{justify-items:center;text-align:center}
  .qb-geste-fleche{display:none}
}
@media (max-width:420px){ .qb-gestes-liste{grid-template-columns:1fr} }

/* ===== 11/09 soir, fondateur : sequence generale (classes qb-seq posees par bandeau-relief.js, delais calcules a partir du depart du logo).
   Menu : liens un par un apres l accroche ; titre lettre par lettre, paragraphe puis boutons ; icones pedagogiques une par une
   des que le premier visuel du mur est pose. Sans qb-seq (visite suivante dans la session, mouvement reduit) tout est visible d emblee. */
/* 12/09 fondateur : dans la sequence, l accroche sort de la tesselle (glisse depuis le Q, masquee par sa propre boite), la categorie et le naming
   apparaissent d un bloc (montee douce), plus lettre par lettre. Ordre : tesselles > accroche > categorie > naming > menu. */
.qz-header.qz-menu-visible.qb-seq .qb-b1{overflow:hidden}
.qz-header.qz-menu-visible.qb-seq .qb-b1 .qb-l{animation:none;opacity:1}
.qz-header.qz-menu-visible.qb-seq .qb-b1 .qb-li{transform:translateX(-105%);animation:qz-sortir .6s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--qz-ta,0s)}
@keyframes qz-rideau{from{clip-path:inset(0 0 100% 0);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}}
@media (prefers-reduced-motion:reduce){.qz-header.qz-menu-visible li.qz-hassub.open .qz-sublist{animation:none}}
@keyframes qz-sortir{from{transform:translateX(-105%);opacity:.5}to{transform:none;opacity:1}}
.qz-header.qz-menu-visible.qb-seq .qz-cat .qz-l,.qz-header.qz-menu-visible.qb-seq .qz-naming .qz-l{animation:none;opacity:1}
.qz-header.qz-menu-visible.qb-seq .qz-cat{opacity:0;animation:qb-monter .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--qz-tb,0s)}
.qz-header.qz-menu-visible.qb-seq .qz-naming.qz-wordmark-img{opacity:0;animation:qb-monter .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--qz-tn,0s)}
.qz-header.qz-menu-visible.qb-seq .qz-navpanel > ul > li{opacity:0;animation:qb-monter .4s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--qz-tm,0s) + var(--i-menu,0) * var(--qz-menu-pas,.12s))}
.qb.qb-dispo-droite.qb-seq .qb-b2 .qb-l{opacity:0;animation:qb-clipser-l .45s cubic-bezier(.3,1.55,.5,1) forwards;animation-delay:calc(var(--tt,0s) + var(--i) * var(--ln,.07s))}
.qb.qb-dispo-droite.qb-seq .qb-para{opacity:0;animation:qb-monter .7s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--tp,0s)}
.qb.qb-dispo-droite.qb-seq .qb-ctas .cta{opacity:0;animation:qb-monter .5s cubic-bezier(.2,.8,.3,1) forwards}
.qb.qb-dispo-droite.qb-seq .qb-ctas .hero-cta{animation-delay:var(--tb1,0s)}
.qb.qb-dispo-droite.qb-seq .qb-ctas .qb-cta2{animation-delay:var(--tb2,0s)}
.qb-gestes.qb-gestes-joue .qb-gestes-liste > li{opacity:0;animation:qb-monter .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--t-icones,0s) + var(--i,0) * var(--icones-pas,.25s))}
@media (prefers-reduced-motion:reduce){
  .qz-header.qz-menu-visible.qb-seq .qb-b1 .qb-li,.qz-header.qz-menu-visible.qb-seq .qz-cat,.qz-header.qz-menu-visible.qb-seq .qz-naming.qz-wordmark-img,.qz-header.qz-menu-visible.qb-seq .qz-navpanel > ul > li,.qb.qb-dispo-droite.qb-seq .qb-b2 .qb-l,.qb.qb-dispo-droite.qb-seq .qb-para,.qb.qb-dispo-droite.qb-seq .qb-ctas .cta,.qb-gestes.qb-gestes-joue .qb-gestes-liste > li{animation:none;opacity:1;transform:none}
}

/* 12/09 fondateur : sequence limitee au bloc logo (qb-seq-logo) -- tesselles, puis la CATEGORIE (orange) sort de la tesselle orange,
   puis le naming, puis l accroche apparaissent d un bloc. Le reste de la page est fixe. */
/* la categorie decalee a gauche avant sa sortie etait visible par-dessus le Q : c est la colonne de textes qui masque, pas la ligne elle-meme */
.qz-header.qz-menu-visible.qb-seq-logo .qz-wm-col{clip-path:inset(-14px -24px -4px 0)} /* ne rogne que le bord gauche : le t et le point du i depassent en haut, on les laisse */
.qz-header.qz-menu-visible.qb-seq-logo .qz-cat{opacity:1}
.qz-header.qz-menu-visible.qb-seq-logo .qz-cat .qz-l{animation:none;opacity:1}
.qz-header.qz-menu-visible.qb-seq-logo .qz-cat{transform:translateX(-105%);animation:qz-sortir .6s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--qz-ta,0s)}
.qz-header.qz-menu-visible.qb-seq-logo .qz-naming .qz-l,.qz-header.qz-menu-visible.qb-seq-logo .qb-b1 .qb-l{animation:none;opacity:1}
.qz-header.qz-menu-visible.qb-seq-logo .qz-naming.qz-wordmark-img{opacity:0;animation:qb-monter .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--qz-tn,0s)}
.qz-header.qz-menu-visible.qb-seq-logo .qb-b1{opacity:0;animation:qb-monter .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--qz-tb,0s)}
@media (prefers-reduced-motion:reduce){.qz-header.qz-menu-visible.qb-seq-logo .qz-cat,.qz-header.qz-menu-visible.qb-seq-logo .qz-naming.qz-wordmark-img,.qz-header.qz-menu-visible.qb-seq-logo .qb-b1{animation:none;opacity:1;transform:none}}
/* 12/09 fondateur : plus aucune animation hors le visuel du mur (sequence.actif = false) -- le bloc logo est fixe */
.qz-header.qb-sans-anim .qz-logorow *,.qz-header.qb-sans-anim .qb-b1 .qb-l{animation:none!important;opacity:1!important}

/* ===== 12/09 fondateur : bouton « remonter » en orange, fleche blanche ; effet reflet (comme les boutons du bandeau) au survol du bouton
   « remonter » et de la bulle de contact flottante (accueil pour l instant). !important : commun.css et le panneau posent leurs couleurs. */
.qz-fab{background:var(--qz-terracotta,#d96c2f)!important;border-color:var(--qz-terracotta,#d96c2f)!important;overflow:hidden}
.qz-fab svg{stroke:#ffffff!important}
.qz-fab:hover,.qz-fab:focus-visible{background:var(--qz-terracotta,#d96c2f)!important;border-color:var(--qz-terracotta,#d96c2f)!important}
.qz-fab::after,.qz-bulle-contact::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-18deg);opacity:0}
.qz-bulle-contact{overflow:hidden}
.qz-fab:hover::after,.qz-bulle-contact:hover::after{animation:qb-reflet .75s cubic-bezier(.4,0,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.qz-fab:hover::after,.qz-bulle-contact:hover::after{animation:none}}

/* bandeau defilant sous la bande des gestes (bandeau-gestes.js) : l ancien .ticker de la page est remplace */
.qb-defile{position:relative;z-index:2;background:#1e2b35;color:#f4f1ea;padding:9px 0;font-family:'Jura',sans-serif}
.qb-defile-fenetre{overflow:hidden} /* 12/09 : le rognage passe sur une fenetre interieure pour laisser deborder le decroche du bas */
/* 12/09 fondateur : decroche en miroir en bas a droite du bandeau defilant (navy qui descend sous le bandeau, pente vers 13,4 % depuis la droite) ; lisere orange essaye puis retire le 12/09 */
.qb-bord-defile-bas{top:calc(100% - 4px);height:calc(var(--decroche-h,22px) + 4px);transform:scale(-1,-1)}

.qb-defile-piste{display:flex;width:max-content;animation:qb-defiler var(--qb-defile-duree,28s) linear infinite}
.qb-defile span{font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:0 34px;border-right:1px solid rgba(244,241,234,.22);white-space:nowrap}
@keyframes qb-defiler{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.qb-defile-piste{animation:none}}
.hero ~ .ticker,.ticker{display:none!important}
/* ===== 13/09 fondateur : diaporama a la place du mur en tesselles (bandeau-relief.js, construireDiapo). Cadre 3:2 = format des photos,
   la photo carree s affiche entiere dedans ; fondu croise pilote par des keyframes generees (--anim par image, periode --P, depart --tc). ===== */
.qb-mur.qb-mur-diapo{display:block;height:auto;padding:0;gap:0} /* plus de grille de carreaux : un seul cadre */
.qb.qb-dispo-droite .qb-mur.qb-mur-diapo{width:min(60cqw, calc((var(--mur-max,38vh) - 21px) * 1.5));max-width:100%} /* 21 px = la rangee de points sous le cadre */
/* 13/09 fondateur (essai) : cadre orange de l epaisseur du lisere des sections (3 px), a la place de la marge grise #dedede et lisere orange de meme epaisseur a l exterieur (--diapo-marge) */
.qb-diapo{--diapo-marge:var(--qz-lisere-ep,3px);--diapo-lisere:0px;position:relative;box-sizing:content-box;width:calc(100% - 2 * var(--diapo-marge));aspect-ratio:3/2;border:var(--diapo-marge) solid var(--qz-lisere,var(--qz-terracotta,#d96c2f));border-radius:4px;overflow:hidden;background:#162129;box-shadow:0 14px 34px rgba(0,0,0,.35)} /* 13/09 : lisere orange essaye (6 puis 3 px) puis retire ; marge grise #dedede gardee (--diapo-lisere conserve en reglage, 0 = sans) */
.qb-diapo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;display:block;transition:opacity var(--fondu,1s) ease}
.qb-diapo-img.qb-visible{opacity:1}
.qb-diapo-img.qb-carre{object-fit:contain}
/* points du diaporama (13/09 fondateur) : un par photo, centres sous le cadre, l actuel en orange ; petites tesselles 9 px */
.qb-diapo{outline:none}
.qb-diapo:focus-visible{box-shadow:0 0 0 3px var(--qz-terracotta,#d96c2f),0 14px 34px rgba(0,0,0,.35)}
.qb-diapo-points{display:flex;justify-content:center;gap:8px;margin-top:12px}
.qb-diapo-point{width:9px;height:9px;padding:0;border:0;border-radius:2px;background:#dedede;opacity:.5;cursor:pointer;transition:opacity .15s,background .15s}
.qb-diapo-point:hover,.qb-diapo-point:focus-visible{opacity:1;outline:none}
.qb-diapo-point.qb-actif{background:var(--qz-terracotta,#d96c2f);opacity:1}
@media (max-width:900px){.qb.qb-dispo-droite .qb-mur.qb-mur-diapo{width:100%}}
@media (prefers-reduced-motion:reduce){.qb-diapo-img{transition:none}}