/* ========================================================================== VINTAGE-CAMERAS — PAGE UNIQUE. Bloc autonome, aucune extension. Les valeurs viennent des jetons du theme enfant (voir CAHIER par 5) ; elles sont redeclarees ici en secours pour que la page se rende meme si la feuille du theme enfant n est pas encore chargee. ========================================================================== */ .vc-app{ --fond:#FFFFFF; --surface:#FBF7F1; --carte:#F5EFE6; --marque:#50390F; --surMarque:#FFFFFF; --texte:#1A1A1A; --erreur:#E53935; --voile:rgba(0,0,0,.12); --rBouton:8px; --rThumb:10px; --rCarte:14px; --rGrille:16px; --rHero:18px; --rSheet:20px; --rNav:32px; --rPill:999px; --flouNav:28px; --flouVerre:20px; --verreFond:rgba(255,255,255,.45); --verreBord:rgba(255,255,255,.20); --verreTrait:.8px; --eXs:4px; --eSm:8px; --ePill:10px; --eGrille:12px; --eListe:14px; --ePage:16px; --eTab:20px; --ombreNav:0 8px 28px -4px rgba(0,0,0,.12); --ombrePastille:0 1px 4px rgba(0,0,0,.12); --dAppui:110ms; --dBascule:220ms; --dAller:320ms; --courbe:cubic-bezier(.33,1,.68,1); font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--texte); background:var(--fond); line-height:1.45; } .vc-app *,.vc-app *::before,.vc-app *::after{box-sizing:border-box} .vc-app img{max-width:100%;height:auto;display:block} .vc-app a{color:var(--marque);font-weight:700;text-decoration:none} .vc-app h1,.vc-app h2,.vc-app h3{margin:0;color:var(--marque);letter-spacing:-.2px} .vc-app p{margin:0 0 .8em} /* ---------------------------------- HEADER ---------------------------------- */ .vc-entete{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex; align-items:center;justify-content:center;gap:var(--eGrille); padding:18px var(--ePage) 54px;pointer-events:none;isolation:isolate} body.admin-bar .vc-entete{padding-top:50px} body.admin-bar .vc-hero{padding-top:164px} /* Le voile est plein sous la pilule, puis se dissout en trois paliers jusqu au bas du bandeau : la coupure nette d avant se voyait comme un trait. */ .vc-entete::before{content:"";position:absolute;inset:0;z-index:-1; opacity:var(--voileOp,0); background:rgba(0,0,0,.12); -webkit-backdrop-filter:blur(var(--flouNav)) saturate(130%); backdrop-filter:blur(var(--flouNav)) saturate(130%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.72) 64%,rgba(0,0,0,.32) 82%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.72) 64%,rgba(0,0,0,.32) 82%,transparent 100%)} .vc-pilule{pointer-events:auto;background:var(--verreFond); -webkit-backdrop-filter:blur(var(--flouNav));backdrop-filter:blur(var(--flouNav)); border:var(--verreTrait) solid var(--verreBord);box-shadow:var(--ombreNav)} .vc-pilule{position:relative;display:flex;align-items:center;gap:2px;border-radius:var(--rPill); padding:9px var(--eSm)} .vc-pilule a{position:relative;z-index:1;display:inline-block;padding:6px 17px;border-radius:var(--rPill); font-size:13px;font-weight:600;color:var(--texte);letter-spacing:.2px; transition:background var(--dBascule) var(--courbe)} .vc-pilule a:hover,.vc-pilule a:focus-visible{background:rgba(80,57,15,.08)} .vc-rond{width:51px;height:51px;border-radius:var(--rPill);display:grid;place-items:center; pointer-events:auto;background:var(--marque); border:var(--verreTrait) solid var(--verreBord);box-shadow:var(--ombreNav); -webkit-backdrop-filter:blur(var(--flouVerre));backdrop-filter:blur(var(--flouVerre)); cursor:pointer;color:var(--surMarque); transition:transform var(--dAppui) var(--courbe)} .vc-rond:active{transform:scale(.97);opacity:.85} .vc-rond svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .vc-ronds{display:flex;gap:var(--eSm);pointer-events:none} .vc-pilule a.vc-logo-lien{display:inline-flex;align-items:center;padding:0 14px 0 6px;pointer-events:auto;position:relative;z-index:1} .vc-logo-lien::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:20px;border-radius:var(--rPill);background:rgba(26,26,26,.18)} .vc-app .vc-logo-mini{height:26px;width:auto;display:block} @media (max-width:760px){ .vc-entete{gap:var(--eSm);padding:18px var(--ePage) 36px} body.admin-bar .vc-entete{padding-top:64px} .vc-pilule a{padding:7px 10px;font-size:12px} .vc-rond{width:43px;height:43px} } /* --------------------------------- SECTIONS --------------------------------- */ .vc-sec{padding:84px var(--ePage);max-width:1180px;margin:0 auto;scroll-margin-top:96px} .vc-sec--surface{background:var(--surface);max-width:none;scroll-margin-top:96px} .vc-sec--surface > .vc-in{max-width:1180px;margin:0 auto} .vc-titre{font-size:30px;font-weight:700;line-height:1.2;margin-bottom:10px; display:flex;align-items:center;gap:14px;text-align:left} .vc-titre svg{width:30px;height:30px;flex:0 0 30px;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .vc-sec > .vc-titre,.vc-in > .vc-titre{position:relative;padding-bottom:22px} .vc-sec > .vc-titre::after,.vc-in > .vc-titre::after{content:"";position:absolute; left:0;bottom:0;width:56px;height:3px;border-radius:var(--rPill);background:var(--marque);opacity:.35} .vc-chapo{text-align:left} .vc-app p.vc-chapo{font-size:15px;max-width:none;margin:30px 0 40px;line-height:1.6} .vc-hero .vc-chapo{max-width:78ch;margin-left:auto;margin-right:auto} #seopress-beacon-universal-metabox{display:none!important} .vc-app a.vc-cta,.vc-app .vc-cta{color:var(--surMarque)} .vc-cta{display:inline-flex;align-items:center;gap:var(--eSm);background:var(--marque); color:var(--surMarque);border:0;border-radius:var(--rBouton);padding:14px 26px; font-family:inherit;font-size:14px;font-weight:700;cursor:pointer; transition:transform var(--dAppui) var(--courbe),opacity var(--dAppui)} .vc-cta:active{transform:scale(.97);opacity:.85} .vc-centre{text-align:center} /* -------------------------------- BANNIERE ---------------------------------- */ .vc-hero{padding-top:132px;padding-bottom:40px;text-align:center} .vc-hero h1{font-size:24px;font-weight:700;line-height:1.28;max-width:30ch; margin:0 auto 22px;text-wrap:balance} .vc-hero-img{border-radius:var(--rHero);overflow:hidden;max-width:940px;margin:0 auto 26px; min-height:180px;background:var(--carte)} .vc-hero p{font-size:15px;margin:0 auto .9em;text-align:left;line-height:1.6} @media (min-width:900px){.vc-hero h1{font-size:34px;max-width:44ch} .vc-hero{padding-top:158px} .vc-hero p{font-size:16px}} /* ------------------------------- VISIONNEUSE -------------------------------- */ .vc-rail{display:flex;gap:var(--eGrille);overflow-x:auto;padding-bottom:var(--eGrille); scrollbar-width:none;-ms-overflow-style:none; width:100vw;max-width:100vw;position:relative;left:50%;right:50%; margin-left:-50vw;margin-right:-50vw;padding-left:var(--ePage);padding-right:var(--ePage)} .vc-app{overflow-x:clip} @media (min-width:1100px){.vc-rail .vc-prod{flex:0 0 268px}} @media (min-width:1600px){.vc-rail .vc-prod{flex:0 0 292px}} .vc-rail::-webkit-scrollbar{height:0} .vc-dots{display:flex;justify-content:center;gap:var(--eSm);margin-top:26px} .vc-dot{width:7px;height:7px;border-radius:var(--rPill);border:0;padding:0;cursor:pointer; background:var(--marque);opacity:.22;transition:opacity var(--dBascule) var(--courbe), width var(--dBascule) var(--courbe)} .vc-dot[aria-current="true"]{opacity:.85;width:22px} .vc-prod{flex:0 0 236px;background:var(--fond); border:1px solid rgba(26,26,26,.08);border-radius:var(--rCarte);overflow:hidden; transition:transform var(--dAppui) var(--courbe)} .vc-prod:hover{transform:translateY(-2px)} .vc-prod-img{min-height:200px;background:var(--carte);display:grid;place-items:center} .vc-prod-img img{width:100%;height:200px;object-fit:cover} .vc-prod-txt{padding:var(--eListe)} .vc-prod-txt h3{font-size:14px;font-weight:600;line-height:1.35;color:var(--texte)} /* -------------------------------- ACTUALITES -------------------------------- */ .vc-mac{column-count:3;column-gap:18px} @media (max-width:1100px){.vc-mac{column-count:2}} @media (max-width:768px){.vc-mac{column-count:1}} .vc-post{break-inside:avoid;background:var(--fond);border:1px solid rgba(26,26,26,.08); border-radius:var(--rCarte);overflow:hidden;margin-bottom:var(--eGrille)} .vc-photo{position:relative;min-height:200px;background:var(--carte)} .vc-photo img{width:100%;display:block} .vc-pastille{position:absolute;top:var(--ePill);padding:5px 11px;border-radius:var(--rPill); font-size:11px;font-weight:600;background:var(--verreFond);color:var(--marque); -webkit-backdrop-filter:blur(var(--flouVerre));backdrop-filter:blur(var(--flouVerre)); box-shadow:var(--ombrePastille)} .vc-pastille--date{left:var(--ePill)} .vc-pastille--res{right:var(--ePill);display:inline-flex;align-items:center;gap:5px} .vc-pastille--res svg{width:13px;height:13px;fill:currentColor} .vc-post-txt{padding:var(--eListe)} .vc-post-txt p{font-size:12.5px;line-height:1.45;white-space:pre-line} .vc-post .vc-photo{min-height:150px} .vc-post-txt{padding:var(--eGrille)} .vc-app a.vc-lien{color:var(--surMarque)} .vc-lien{display:inline-flex;align-items:center;gap:var(--eSm);background:var(--marque); border-radius:var(--rPill);padding:9px 16px;font-size:12.5px;font-weight:700; transition:transform var(--dAppui) var(--courbe),opacity var(--dAppui)} .vc-lien:active{transform:scale(.97);opacity:.85} .vc-lien svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .vc-post-act{display:flex;justify-content:flex-end;margin-top:20px} /* -------------------------------- ESTIMATION -------------------------------- */ .vc-acc{border:1px solid rgba(80,57,15,.18);border-radius:var(--rSheet); background:var(--fond);margin-top:36px} .vc-acc-in{padding:46px 32px 40px} .vc-acc > summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700; font-size:15px;color:var(--marque);display:flex;align-items:center; justify-content:space-between;gap:var(--eGrille)} .vc-acc > summary::-webkit-details-marker{display:none} .vc-acc > summary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2; transition:transform var(--dAller) var(--courbe)} .vc-acc[open] > summary svg{transform:rotate(45deg)} /* -------------------------------- FORMULAIRE -------------------------------- */ .vc-form{display:grid;gap:18px;max-width:760px;margin:0 auto} .vc-form label{font-size:12px;font-weight:600;letter-spacing:.2px;display:block; margin-bottom:6px;color:var(--texte)} .vc-form input[type=text],.vc-form input[type=email],.vc-form textarea{ width:100%;font-family:inherit;font-size:14px;color:var(--texte);background:var(--fond); border:1px solid rgba(26,26,26,.18);border-radius:var(--rBouton);padding:12px 14px} .vc-form textarea{min-height:130px;resize:vertical} .vc-form input:focus,.vc-form textarea:focus{outline:2px solid var(--marque);outline-offset:1px} .vc-form label.vc-case{display:flex;gap:var(--eSm);align-items:flex-start;font-size:12.5px; line-height:1.45;font-weight:400;margin-bottom:0} .vc-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .vc-pj{border:1px dashed rgba(80,57,15,.30);border-radius:var(--rBouton);padding:18px; text-align:center;transition:background var(--dBascule) var(--courbe),border-color var(--dBascule)} .vc-pj:hover,.vc-pj[data-survol="1"]{background:rgba(80,57,15,.05);border-color:rgba(80,57,15,.55)} .vc-pj input{position:absolute;left:-9999px} .vc-pj label{display:inline-flex;align-items:center;gap:var(--eSm);cursor:pointer; font-size:13.5px;font-weight:600;color:var(--marque);margin:0} .vc-pj label svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .vc-pj-aide{display:block;font-size:12px;margin-top:8px;font-weight:400} .vc-pj-liste{display:flex;flex-wrap:wrap;gap:var(--eSm);margin-top:14px;justify-content:center} .vc-pj-vig{position:relative;width:64px;height:64px;border-radius:var(--rThumb);overflow:hidden; background:var(--carte)} .vc-pj-vig img{width:100%;height:100%;object-fit:cover} .vc-pj-vig button{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;padding:0; border-radius:var(--rPill);background:rgba(0,0,0,.55);color:#fff;cursor:pointer;line-height:0; display:grid;place-items:center} .vc-pj-vig button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round} .vc-etat{font-size:13px;padding:12px 14px;border-radius:var(--rBouton);display:none} .vc-etat--ok{background:rgba(80,57,15,.08);color:var(--marque);display:block} .vc-etat--ko{background:rgba(229,57,53,.08);color:var(--erreur);display:block} /* -------------------------------- ETATS VIDES ------------------------------- */ .vc-vide{padding:34px;text-align:center;border:1px dashed rgba(26,26,26,.18); border-radius:var(--rCarte);font-size:14px} .vc-panne{padding:34px;text-align:center;border:1px solid rgba(229,57,53,.28); border-radius:var(--rCarte);font-size:14px;color:var(--erreur)} .vc-attente{padding:34px;text-align:center;font-size:14px} /* ------------------------------- RECHERCHE ---------------------------------- */ .vc-rech{position:fixed;inset:0;z-index:9500;display:none;padding:96px var(--ePage) var(--ePage); background:rgba(43,30,8,.28);-webkit-backdrop-filter:blur(var(--flouVerre)) saturate(130%); backdrop-filter:blur(var(--flouVerre)) saturate(130%)} .vc-rech[data-ouvert="1"]{display:block} .vc-rech-boite{max-width:760px;margin:0 auto;background:var(--verreFond); -webkit-backdrop-filter:blur(var(--flouNav));backdrop-filter:blur(var(--flouNav)); border:var(--verreTrait) solid var(--verreBord);box-shadow:var(--ombreNav); border-radius:var(--rSheet);overflow:hidden} .vc-rech-haut{display:flex;align-items:center;gap:var(--eGrille);padding:16px 18px; border-bottom:1px solid rgba(26,26,26,.10)} .vc-rech-haut svg{width:20px;height:20px;stroke:var(--marque);fill:none;stroke-width:1.9; stroke-linecap:round;flex:0 0 20px} .vc-rech-trait{flex:0 0 1px;width:1px;height:24px;background:rgba(80,57,15,.22); border-radius:var(--rPill)} .vc-rech input{flex:1;border:0;background:transparent;font-family:inherit;font-size:16px; color:var(--texte);outline:none} .vc-rech-fermer{border:0;background:transparent;cursor:pointer;padding:6px;line-height:0} .vc-rech-res{max-height:56vh;overflow:auto;background:rgba(255,255,255,.72)} .vc-rech-res a{display:flex;align-items:center;gap:var(--eListe);padding:12px 18px; border-bottom:1px solid rgba(26,26,26,.06);color:var(--texte);font-size:14px} .vc-rech-res a:hover{background:rgba(80,57,15,.06)} .vc-rech-res img{width:52px;height:52px;object-fit:cover;border-radius:var(--rThumb);flex:0 0 52px} .vc-rech-msg{padding:26px 18px;text-align:center;font-size:14px} /* ---------------------------------- FOOTER ---------------------------------- */ .vc-pied{background:var(--surface);padding:56px var(--ePage) 34px;margin-top:0} .vc-pied-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:26px; align-items:flex-start;justify-content:space-between} .vc-pied img{height:44px} .vc-pied nav{display:flex;flex-wrap:wrap;gap:18px;font-size:13px} .vc-pied-bas{max-width:1180px;margin:26px auto 0;padding-top:18px; border-top:1px solid rgba(26,26,26,.10);font-size:12px;color:var(--texte); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between} .vc-soc{display:flex;gap:var(--eGrille)} .vc-soc a{position:relative;width:36px;height:36px;border-radius:var(--rPill);display:grid;place-items:center; background:var(--marque);color:var(--surMarque)} .vc-soc svg{width:17px;height:17px;fill:currentColor} .vc-soc a:not(:last-child)::after{content:"";position:absolute;right:-6px;top:50%; transform:translateY(-50%);width:1px;height:18px;border-radius:var(--rPill); background:rgba(26,26,26,.18)} /* ----------------------------- BOUTON FLOTTANT ------------------------------ */ .vc-flot{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex; flex-direction:column;align-items:flex-end;gap:var(--eSm)} .vc-flot-opt{display:flex;flex-direction:column;gap:var(--eSm); opacity:0;transform:translateY(8px) scale(.96);pointer-events:none; transition:opacity var(--dBascule) var(--courbe),transform var(--dBascule) var(--courbe)} .vc-flot[data-ouvert="1"] .vc-flot-opt{opacity:1;transform:none;pointer-events:auto} .vc-flot-opt a{display:inline-flex;align-items:center;gap:var(--eSm); background:var(--verreFond);-webkit-backdrop-filter:blur(var(--flouVerre)); backdrop-filter:blur(var(--flouVerre));border:var(--verreTrait) solid var(--verreBord); box-shadow:var(--ombreNav);border-radius:var(--rPill);padding:11px 18px; font-size:13px;font-weight:600;color:var(--marque);white-space:nowrap} .vc-flot-btn{width:54px;height:54px;border:var(--verreTrait) solid var(--verreBord);border-radius:var(--rPill); background:var(--marque);color:var(--surMarque);display:grid;place-items:center; cursor:pointer;box-shadow:var(--ombreNav); transition:transform var(--dAppui) var(--courbe)} .vc-flot-btn:active{transform:scale(.97)} .vc-flot-btn svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dAller) var(--courbe)} .vc-flot-btn .vc-ic-croix{display:none} .vc-flot[data-ouvert="1"] .vc-flot-btn .vc-ic-bulle{display:none} .vc-flot[data-ouvert="1"] .vc-flot-btn .vc-ic-croix{display:block} /* ---- Voile du menu flottant : meme flou et meme opacite que le header ---- */ .vc-flot-voile{position:fixed;inset:0;z-index:8990;background:var(--voile); -webkit-backdrop-filter:blur(var(--flouNav)) saturate(130%); backdrop-filter:blur(var(--flouNav)) saturate(130%); opacity:0;pointer-events:none;transition:opacity var(--dBascule) var(--courbe)} .vc-flot-voile[data-ouvert="1"]{opacity:1;pointer-events:auto} .vc-pied-bas nav{display:flex;flex-wrap:wrap;gap:10px;font-size:12px} .vc-pied-bas nav a:not(:last-child)::after{content:"\2022";margin-left:10px;opacity:.45} .vc-pied-bas nav a{color:var(--texte);font-weight:400} .vc-pastille--res{padding:5px 8px} @media (max-width:760px){.vc-app .vc-logo-mini{height:21px}.vc-logo-lien{padding:0 8px 0 4px}} /* ---- Les deux logos de la mediatheque ont un fond BLANC OPAQUE (canal alpha plein a 255, mesure au pixel). Sur le creme du pied, cela dessine un cadre blanc. `multiply` rend le blanc invisible sur un fond clair, sans ajouter un seul fichier a la mediatheque. ATTENTION : ne tient que sur fond clair : si un fond sombre arrive, il faudra un vrai PNG detoure. ---- */ /* Les deux logos pointent desormais sur un PNG reellement detoure (media 8949) : le fond blanc a ete retire au pixel, `multiply` n est plus necessaire — et il ne fonctionnait de toute facon pas dans la pilule, dont le backdrop-filter isole le melange. */ /* ---- Curseur de section : il marque l item de la section ou se trouve le visiteur. La transition porte sur transform et width, donc il GLISSE d un item a l autre ; le sens du glissement suit celui du defilement, sans avoir a le calculer. ---- */ .vc-pilule-curseur{position:absolute;left:0;top:0;width:0;height:0;z-index:0; border-radius:var(--rPill);background:rgba(80,57,15,.08);opacity:0;pointer-events:none; transition:transform var(--dAller) var(--courbe),width var(--dAller) var(--courbe), opacity var(--dBascule) var(--courbe)} @media (prefers-reduced-motion:reduce){.vc-app *{transition:none!important;animation:none!important}} /* ===================================================================== B.1b - regles propres au portage dans le theme (0.7.0) Elles remplacent les regles body.vc-brouillon du bloc, qui ne valaient que sur la page 8919. Ici l habillage de Total est masque PARTOUT ou le chrome du theme est pose - et NULLE PART ailleurs : aucune regle ne touche la mise en page interne des 323 fiches. ===================================================================== */ body.vc-habille #site-header, body.vc-habille .page-header, body.vc-habille #footer, body.vc-habille #footer-bottom, body.vc-habille .site-breadcrumbs{display:none!important} /* La pilule est en position fixed : sans cette reserve, le haut du contenu passe dessous. 18px d air + 51px de pilule + 18px d air. */ body.vc-habille #outer-wrap{padding-top:87px} body.vc-habille.admin-bar #outer-wrap{padding-top:119px} @media (max-width:760px){body.vc-habille #outer-wrap{padding-top:79px}} /* Pastille Complianz : le bouton flottant occupe 72px depuis la droite (18 + 54), on laisse 24px d air. Aucun reglage de l extension n est touche. */ body.vc-habille button.cmplz-manage-consent{right:96px!important} /* ===================================================================== 0.7.2 - Le flou du voile n est applique QUE quand le voile est ouvert CE QUE LA REGLE FAIT. `.vc-flot-voile` portait un backdrop-filter en permanence, y compris a opacity 0 : une couche composee plein ecran maintenue sur les 323 fiches sans jamais rien flouter. Le flou ne sert que menu ouvert. Mesure apres changement, sur une fiche produit : menu ouvert -> opacity 1, blur(28px) saturate(1.3), options a opacity 1, aria-expanded true ; menu ferme -> opacity 0, filtre none. Comportement identique, une couche composee en moins au repos. CE QU ELLE NE FAIT PAS, et ce que la version 0.7.1 affirmait a tort : elle ne corrige AUCUN defaut d affichage. J avais cru isoler une cause en neutralisant ce filtre a la main et en voyant la photo du produit reapparaitre - mais TOUTE modification de style force un repeint, donc ce test ne prouvait rien. Le premier rendu blanc n existait que dans les captures d ecran de l extension : Jason, devant l ecran, voit la photo. Le controle de niveau 3 de METHODE-WORDPRESS par 3 est donc AVEUGLE sur ce site depuis que l en-tete porte un flou d arriere-plan. Detail et parade : I.179. La regle ouverte porte un selecteur d attribut (0,2,0) : elle l emporte sur la regle de base (0,1,0) quel que soit l ordre. ===================================================================== */ .vc-flot-voile{-webkit-backdrop-filter:none;backdrop-filter:none} .vc-flot-voile[data-ouvert="1"]{-webkit-backdrop-filter:blur(var(--flouNav)) saturate(130%);backdrop-filter:blur(var(--flouNav)) saturate(130%)} /* ===================================================================== 0.8.0 - BOUTON RETOUR (fiches produits) ET VISIONNEUSE EN VERRE CLAIR ⚠ SPECIFICITE, le piege paye quatre fois le 15/08 (METHODE par 3) : `.vc-app a` vaut (0,1,1) et l emporterait sur `.vc-retour` (0,1,0). Toutes les regles du bouton portent donc `.vc-app a.vc-retour` (0,2,1). La visionneuse est FANCYBOX, celle du theme Total - pas PhotoSwipe. Mesure du 16/08, lightbox ouverte : `.fancybox-bg` a `rgb(30,30,30)`, les six boutons ont `color:#ccc` et leurs icones sont peintes en `currentColor` - changer la couleur du bouton change donc l icone. `.fancybox-container` est a z-index 999999 : elle passe au-dessus de l en-tete (9000) sans rien avoir a forcer. Les valeurs sont ecrites en dur ici, PAS en `var(--marque)` : le balisage de Fancybox est ajoute a `body`, hors de `.vc-app` ou les jetons sont declares. Elles viennent de CAHIER-DES-CHARGES par 5. Le prefixe `body.vc-habille` (0,2,1) evite un `!important` et limite la reprise aux pages ou notre habillage est pose. ===================================================================== */ .vc-app a.vc-retour{position:fixed;top:18px;left:var(--ePage);z-index:9100; display:inline-flex;align-items:center;gap:7px;height:51px;padding:0 20px 0 15px; border-radius:var(--rPill);background:var(--verreFond); -webkit-backdrop-filter:blur(var(--flouNav));backdrop-filter:blur(var(--flouNav)); border:var(--verreTrait) solid var(--verreBord);box-shadow:var(--ombreNav); font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--texte);text-decoration:none; transition:transform var(--dAppui) var(--courbe)} .vc-app a.vc-retour:active{transform:scale(.97);opacity:.85} .vc-app a.vc-retour svg{width:19px;height:19px;flex:0 0 19px;stroke:var(--marque);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body.admin-bar .vc-app a.vc-retour{top:50px} @media (max-width:760px){ .vc-app a.vc-retour{height:43px;width:43px;padding:0;justify-content:center;gap:0} .vc-app a.vc-retour span{display:none} body.admin-bar .vc-app a.vc-retour{top:64px} } body.vc-habille .fancybox-bg{background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(28px) saturate(130%);backdrop-filter:blur(28px) saturate(130%)} body.vc-habille .fancybox-is-open .fancybox-bg{opacity:1} body.vc-habille .fancybox-button{background:rgba(255,255,255,.45);color:#50390F; border:.8px solid rgba(255,255,255,.20);border-radius:999px; -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); box-shadow:0 8px 28px -4px rgba(0,0,0,.12)} body.vc-habille .fancybox-button:hover{color:#50390F;background:rgba(255,255,255,.72)} body.vc-habille .fancybox-button[disabled]{color:rgba(80,57,15,.35)} body.vc-habille .fancybox-button--arrow_left, body.vc-habille .fancybox-button--arrow_right{background:transparent;border:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;color:#50390F} body.vc-habille .fancybox-button--arrow_left div, body.vc-habille .fancybox-button--arrow_right div{background:rgba(255,255,255,.45); border:.8px solid rgba(255,255,255,.20);border-radius:999px; -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); box-shadow:0 8px 28px -4px rgba(0,0,0,.12)} body.vc-habille .fancybox-infobar{color:#50390F;text-shadow:none} body.vc-habille .fancybox-caption{color:#1A1A1A;border-top-color:rgba(26,26,26,.10)} body.vc-habille .fancybox-caption a{color:#50390F} /* ===================================================================== 0.9.0 - LA VISIONNEUSE A LA CHARTE (Fancybox 3.5.7 de Total) Tout ce qui suit vient de mesures faites lightbox OUVERTE le 16/08, pas de la documentation : - Total passe ses propres options : buttons zoom/slideShow/close/thumbs, infobar 1, arrows 1, loop vide, idleTime 3. Les options `thumbs` et `slideShow`, elles, restent celles par defaut - c est pourquoi chrome.js peut les changer par `jQuery.fancybox.defaults` alors que `buttons` doit etre traite ici, en CSS. - Les miniatures NEXISTAIENT PAS dans le document : ce qu on voyait en bas etait la page produit vue au travers du voile a 72 pour cent. - Balisage mesure : div.fancybox-thumbs > div.fancybox-thumbs__list > a, vignettes de 100 par 72, ancrees en bas sur toute la largeur. - Aucun `!important` : `body.vc-habille` ajoute (0,1,1) a chaque selecteur, ce qui suffit a passer devant les regles de Fancybox. ===================================================================== */ /* 1. Fond ENTIEREMENT opaque. A 72 pour cent, la pilule Retour et le bouton flottant transparaissaient. Opaque, plus rien ne passe - et le flou d arriere-plan devient inutile, donc on le retire. */ body.vc-habille .fancybox-bg{background:#FFFFFF; -webkit-backdrop-filter:none;backdrop-filter:none} body.vc-habille .fancybox-is-open .fancybox-bg{opacity:1} /* 2. Barre d outils : lecture et fermeture seulement. La loupe ne sert a rien sur des photos deja en pleine page ; le bouton grille devient inutile puisque les miniatures sont affichees par defaut. */ body.vc-habille .fancybox-button--zoom, body.vc-habille .fancybox-button--thumbs{display:none} body.vc-habille .fancybox-toolbar .fancybox-button{background:rgba(255,255,255,.45);color:#50390F; border:.8px solid rgba(255,255,255,.20);border-radius:999px;margin-left:8px; -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); box-shadow:0 8px 28px -4px rgba(0,0,0,.12)} body.vc-habille .fancybox-toolbar{padding:12px 12px 0 0} /* 3. Fleches : la pastille du bouton flottant, brun plein a icone blanche. Leur position horizontale est posee par chrome.js sur la bordure reelle de la photo, qui change avec chaque image. */ body.vc-habille .fancybox-navigation .fancybox-button{width:54px;height:54px;padding:0; top:50%;margin-top:-27px;background:transparent;border:0;box-shadow:none} body.vc-habille .fancybox-navigation .fancybox-button div{width:54px;height:54px;padding:0; display:grid;place-items:center;background:#50390F;border-radius:999px; box-shadow:0 8px 28px -4px rgba(0,0,0,.12)} body.vc-habille .fancybox-navigation .fancybox-button svg{width:23px;height:23px} body.vc-habille .fancybox-navigation .fancybox-button svg path{fill:#FFFFFF} body.vc-habille .fancybox-navigation .fancybox-button[disabled]{opacity:0;pointer-events:none} /* 4. Miniatures a gauche, centrees verticalement. En bas, le regard ne les voyait pas - demande de Jason du 16/08. */ body.vc-habille .fancybox-thumbs{top:50%;bottom:auto;left:0;right:auto; transform:translateY(-50%);width:124px;height:auto;max-height:80vh; padding:0 0 0 14px;background:transparent;box-shadow:none} body.vc-habille .fancybox-thumbs__list{display:flex;flex-direction:column;gap:10px; width:100px;height:auto;max-height:80vh;overflow-x:hidden;overflow-y:auto; scrollbar-width:none;margin:0;padding:0} body.vc-habille .fancybox-thumbs__list::-webkit-scrollbar{width:0} body.vc-habille .fancybox-thumbs__list a{position:relative;float:none;flex:0 0 100px; width:100px;height:100px;margin:0;border-radius:14px;overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.12)} body.vc-habille .fancybox-thumbs__list a:before{border:3px solid #50390F;border-radius:14px} body.vc-habille .fancybox-show-thumbs .fancybox-inner{bottom:0;left:138px;right:0} @media (max-width:760px){ body.vc-habille .fancybox-thumbs{width:82px;padding:0 0 0 8px} body.vc-habille .fancybox-thumbs__list{width:66px} body.vc-habille .fancybox-thumbs__list a{flex:0 0 66px;width:66px;height:66px;border-radius:10px} body.vc-habille .fancybox-show-thumbs .fancybox-inner{left:88px} body.vc-habille .fancybox-navigation .fancybox-button, body.vc-habille .fancybox-navigation .fancybox-button div{width:44px;height:44px} body.vc-habille .fancybox-navigation .fancybox-button{margin-top:-22px} } /* ===================================================================== 0.9.1 - LE BOUTON LOUPE RESISTAIT A UNE REGLE POURTANT PLUS SPECIFIQUE Mesure : la regle `body.vc-habille .fancybox-button--zoom` etait bien presente dans la feuille ET le display calcule valait `inline-block`. Le bouton grille, dans la MEME regle, etait bien masque. La difference : Fancybox appelle `.show()` de jQuery sur la loupe quand l image est agrandissable, ce qui pose un `style="display:inline-block"` EN LIGNE. Aucun selecteur, si specifique soit-il, ne bat un style en ligne. C est le seul endroit du theme ou `!important` est justifie : il ne sert pas a gagner une bataille de specificite, il sert a battre un style pose par du JavaScript tiers. ===================================================================== */ body.vc-habille .fancybox-button--zoom{display:none !important} /* ===================================================================== 0.9.2 - LES VIGNETTES ETAIENT BRIDEES A 46 px Mesure : `.fancybox-thumbs__list a` porte `max-width: calc(50% - 4px)` dans la feuille de Fancybox. La colonne faisant 100 px, la vignette etait donc plafonnee a 46 px de large pour 100 px de haut. Ma regle posait bien `width:100px`, mais une largeur ne passe jamais devant un plafond. On leve le plafond, on ne se bat pas avec la largeur. ===================================================================== */ body.vc-habille .fancybox-thumbs__list a{max-width:none} /* ===================================================================== 0.10.0 - BARRE SOUS LA PHOTO, BOUTONS BRUNS, FLECHES SANS SAUT 1. Les boutons lecture et fermeture prennent la pastille du bouton flottant : brun plein, icone blanche. Le selecteur porte `.fancybox-toolbar` ou `.vc-fb-barre` (0,3,1) pour passer devant la regle en verre clair de la 0.9.0, qui a la meme specificite mais vient plus haut dans le fichier. 2. La barre du bas est centree sur la PAGE, pas sur la photo - c est ce que Jason a demande, et cela evite tout calcul de position. `.vc-fb-multi` reserve 96 px en bas pour qu elle ne morde jamais l image ; la classe n est posee que s il y a plus d une photo. 3. Les fleches partent invisibles et ne se montrent qu une fois placees. Sans cela on les voyait une fraction de seconde au bord de l ecran avant qu elles ne sautent sur la bordure de la photo - le defaut que Jason a vu a l ouverture. ===================================================================== */ body.vc-habille .fancybox-toolbar .fancybox-button--close, body.vc-habille .vc-fb-barre .fancybox-button{width:54px;height:54px;padding:0; border-radius:999px;background:#50390F;border:.8px solid rgba(255,255,255,.20); box-shadow:0 8px 28px -4px rgba(0,0,0,.12); -webkit-backdrop-filter:none;backdrop-filter:none} body.vc-habille .fancybox-toolbar .fancybox-button--close:hover, body.vc-habille .vc-fb-barre .fancybox-button:hover{background:#6A4D16} body.vc-habille .fancybox-toolbar .fancybox-button--close svg path, body.vc-habille .vc-fb-barre .fancybox-button svg path{fill:#FFFFFF} body.vc-habille .fancybox-toolbar{padding:14px 14px 0 0} body.vc-habille .vc-fb-barre{position:absolute;left:50%;bottom:22px; transform:translateX(-50%);z-index:99997;display:flex;align-items:center;gap:20px} body.vc-habille .vc-fb-barre .fancybox-button{position:static;margin:0;top:auto} body.vc-habille .vc-fb-dots{display:flex;align-items:center;gap:9px} body.vc-habille .vc-fb-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px; background:#50390F;opacity:.22;cursor:pointer; transition:opacity 220ms cubic-bezier(.33,1,.68,1),width 220ms cubic-bezier(.33,1,.68,1)} body.vc-habille .vc-fb-dot:hover{opacity:.5} body.vc-habille .vc-fb-dot[aria-current="true"]{opacity:.85;width:24px} body.vc-habille .fancybox-container.vc-fb-multi .fancybox-inner{bottom:96px} body.vc-habille .fancybox-navigation .fancybox-button{visibility:hidden} body.vc-habille .fancybox-navigation .fancybox-button.vc-placee{visibility:visible} @media (max-width:760px){ body.vc-habille .fancybox-toolbar .fancybox-button--close, body.vc-habille .vc-fb-barre .fancybox-button{width:44px;height:44px} body.vc-habille .vc-fb-barre{gap:14px;bottom:16px} body.vc-habille .fancybox-container.vc-fb-multi .fancybox-inner{bottom:80px} } /* ===================================================================== 0.10.2 - LES BOUTONS A LA TAILLE DES FLECHES, ET LE LOGO EN HAUT Mesure du 16/08 : la fleche portait un bouton de 54 px avec une icone de 23 px, sans bordure ni ombre. La croix portait un bouton de 54 px avec une icone de 52 px, plus une bordure et une ombre - elle remplissait tout le cercle, ce qui la faisait paraitre enorme a cote des fleches. On aligne les trois sur la fleche. Le compteur 3 / 3 occupait le coin superieur gauche. Il fait doublon avec les points de la barre du bas depuis la 0.10.0 : le logo prend sa place, au meme niveau vertical que la croix. La barre de progression du diaporama etait restee a #FF5268, la couleur d usine de Fancybox. ===================================================================== */ body.vc-habille .fancybox-toolbar .fancybox-button--close, body.vc-habille .vc-fb-barre .fancybox-button{border:0;box-shadow:none} body.vc-habille .fancybox-toolbar .fancybox-button--close svg, body.vc-habille .vc-fb-barre .fancybox-button svg{width:23px;height:23px} body.vc-habille .fancybox-infobar{display:none} body.vc-habille .vc-fb-logo{position:absolute;top:14px;left:14px;width:80px;height:54px; z-index:99997;pointer-events:none; background:url(/wp-content/uploads/2026/08/logo-4.png) left center no-repeat; background-size:auto 26px} body.vc-habille .fancybox-progress{background:#50390F} @media (max-width:760px){ body.vc-habille .vc-fb-logo{top:10px;left:10px;height:44px;background-size:auto 21px} } /* ===================================================================== 0.10.3 - LE BOUTON FLOTTANT RESTE ATTEIGNABLE DANS LA VISIONNEUSE Demande de Jason : une personne qui regarde une piece du musee doit pouvoir appeler ou ecrire sans avoir a refermer la visionneuse. Mesure : `.vc-flot` est a z-index 9000, `.fancybox-container` a 999999 - le bouton passait donc dessous. Fancybox pose une classe `fancybox-active` sur le `body` quand la visionneuse est ouverte : il suffit de s en servir, aucun JavaScript n est necessaire. Le voile du menu flottant monte lui aussi, sinon le menu deploye s ouvrirait sous la photo. Il reste sous le bouton, comme ailleurs. ===================================================================== */ body.vc-habille.fancybox-active .vc-flot{z-index:1000001} body.vc-habille.fancybox-active .vc-flot-voile{z-index:1000000} /* ===================================================================== 0.10.4 - LE LOGO ETAIT COUPE DE 10 px Mesure : `logo-4.png` fait 1059 x 308, soit un rapport de 3,438. A 26 px de haut il occupe donc 90 px de large, et le conteneur en faisait 80 - le E de CAMERAS etait tranche. Sur telephone, a 21 px de haut, il lui faut 73 px. La largeur est portee a 96 et 80 px : le fond est cale a gauche, la marge en trop ne se voit pas, et une future variante du logo un peu plus large ne se recoupera pas. ===================================================================== */ body.vc-habille .vc-fb-logo{width:96px} @media (max-width:760px){ body.vc-habille .vc-fb-logo{width:80px} } /* ===================================================================== 0.10.5 - LES ICONES ETAIENT COLLEES AU BORD GAUCHE DE LEUR CERCLE Mesure du 16/08, decalage de l icone dans son bouton : bouton flottant display:grid place-items:center icone a 16,16 fleche display:grid place-items:center icone a 16,16 fermer display:inline-block aucun icone a 0,16 lecture display:block aucun icone a 0,16 Le centre theorique est 16,16 dans les quatre cas : la taille etait donc juste depuis la 0.10.2, c est le CENTRAGE qui manquait. Les fleches, elles, l avaient - parce que leur icone vit dans un `div` interne auquel j avais donne `place-items:center`, ce que la croix et le bouton de lecture n ont pas. On leur donne la meme grille qu au bouton flottant. Le bouton de lecture porte DEUX svg superposes, lecture et pause, dont Fancybox masque l un : une grille a une seule cellule les empile sans decaler. ===================================================================== */ body.vc-habille .fancybox-toolbar .fancybox-button--close, body.vc-habille .vc-fb-barre .fancybox-button{display:grid;place-items:center} body.vc-habille .vc-fb-barre .fancybox-button svg, body.vc-habille .fancybox-toolbar .fancybox-button--close svg{grid-area:1/1} /* ===================================================================== 0.11.0 - MOINS DE BRUN. Le brun plein ne reste que sur ce qui APPELLE a l action : le bouton flottant, le bouton de lecture, la fermeture. Tout le reste passe au verre clair de la pilule du menu, icone noire. 1. Les fleches de navigation quittent les bords de la photo et rejoignent la barre du bas, de part et d autre du bouton de lecture. Elles font 44 px contre 54 - un peu plus petites, comme demande. Cela supprime tout le calcul de position sur la bordure de l image, et donc le saut a l ouverture avec lui. 2. Le bouton de recherche du header et les deux icones du pied prennent le fond de la pilule (`--verreFond`) et une icone noire (`--texte`). Les regles portent `.vc-app` en tete pour passer devant celles du bloc, qui valent (0,1,0) et (0,1,1). ⚠️ Le bloc de la page 8919 porte SA PROPRE copie de ces regles : la page de validation ne changera pas tant que son bloc n aura pas ete nettoye. Divergence voulue et temporaire. ===================================================================== */ body.vc-habille .vc-fb-barre .fancybox-button--arrow_left, body.vc-habille .vc-fb-barre .fancybox-button--arrow_right{ position:static;width:44px;height:44px;margin:0;top:auto;padding:0; display:grid;place-items:center;visibility:visible; background:rgba(255,255,255,.45);border:.8px solid rgba(255,255,255,.20); border-radius:999px;box-shadow:0 8px 28px -4px rgba(0,0,0,.12); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} body.vc-habille .vc-fb-barre .fancybox-button--arrow_left:hover, body.vc-habille .vc-fb-barre .fancybox-button--arrow_right:hover{ background:rgba(255,255,255,.72)} body.vc-habille .vc-fb-barre .fancybox-button--arrow_left div, body.vc-habille .vc-fb-barre .fancybox-button--arrow_right div{ width:auto;height:auto;padding:0;background:transparent; box-shadow:none;border-radius:0;display:grid;place-items:center} body.vc-habille .vc-fb-barre .fancybox-button--arrow_left svg, body.vc-habille .vc-fb-barre .fancybox-button--arrow_right svg{width:20px;height:20px} body.vc-habille .vc-fb-barre .fancybox-button--arrow_left svg path, body.vc-habille .vc-fb-barre .fancybox-button--arrow_right svg path{fill:#1A1A1A} body.vc-habille .vc-fb-barre .fancybox-button[disabled]{opacity:.3} body.vc-habille .vc-fb-barre{gap:14px} .vc-app .vc-rond{background:var(--verreFond);color:var(--texte)} .vc-app .vc-soc a{background:var(--verreFond);color:var(--texte); border:var(--verreTrait) solid var(--verreBord); -webkit-backdrop-filter:blur(var(--flouVerre));backdrop-filter:blur(var(--flouVerre))} @media (max-width:760px){ body.vc-habille .vc-fb-barre .fancybox-button--arrow_left, body.vc-habille .vc-fb-barre .fancybox-button--arrow_right{width:38px;height:38px} body.vc-habille .vc-fb-barre{gap:10px} } /* ===================================================================== 0.11.0 - SUITE : LE VOILE DE RECHERCHE, LA BARRE DE PROGRESSION, LE LOGO CLIQUABLE, LE TITRE ET LA DESCRIPTION DANS LA VISIONNEUSE. ===================================================================== */ /* 4. Le voile de la recherche prend celui du bouton flottant. Mesure avant : .vc-rech portait rgba(43,30,8,.28) avec un flou de 20px, le voile du flottant porte var(--voile) soit rgba(0,0,0,.12) avec un flou de 28px sature a 130 pour cent. La recherche s ouvrait en display none vers block, donc sans aucune transition. On aligne les deux : meme teinte, meme flou, meme fondu de 220ms, et le flou nest pose quune fois ouvert - meme precaution quen ligne 350 pour ne pas creer une couche de rendu permanente. */ .vc-rech{display:block;background:var(--voile); -webkit-backdrop-filter:none;backdrop-filter:none; opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--dBascule) var(--courbe), visibility 0s linear var(--dBascule)} .vc-rech[data-ouvert="1"]{display:block;opacity:1;visibility:visible; pointer-events:auto; -webkit-backdrop-filter:blur(var(--flouNav)) saturate(130%); backdrop-filter:blur(var(--flouNav)) saturate(130%); transition:opacity var(--dBascule) var(--courbe),visibility 0s} /* La boite reprend le geste exact des options du bouton flottant, copie de .vc-flot-opt : translateY(8px) scale(.96) puis rien. */ .vc-rech-boite{transform:translateY(8px) scale(.96); transition:transform var(--dBascule) var(--courbe)} .vc-rech[data-ouvert="1"] .vc-rech-boite{transform:none} /* 5. La barre de progression du diaporama. Mesure fenetre 1920 : .fancybox-progress est un enfant de .fancybox-inner, que la colonne de miniatures decale de 138px. La barre demarrait donc a 138 et non a 0 - coupee a gauche, au niveau du logo. On la sort du cadre en position fixe. */ body.vc-habille .fancybox-progress{position:fixed;top:0;left:0;right:0; height:3px;z-index:1000002;background:#50390F} /* 6. Le logo ferme la visionneuse, exactement comme la croix. Il devient un vrai bouton : chrome.js pose desormais un