/* * ZigZagou — filigrane public * * Le filigrane appartient maintenant physiquement * au conteneur de son image. * * Il ne peut donc plus flotter au-dessus du site, * du header, des menus ou du footer pendant le scroll. */ .zz-watermark-host{ position:relative !important; overflow:hidden !important; isolation:isolate; } .zz-watermark-image-host{ vertical-align:middle; line-height:0; } /* * Une image placée dans notre wrapper doit conserver * son comportement visuel normal. */ .zz-watermark-image-host > img, .zz-watermark-image-host > canvas{ display:block; max-width:100%; } /* * Calque strictement limité à son host. */ .zz-public-watermark-overlay{ position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; z-index:2 !important; pointer-events:none !important; user-select:none; overflow:hidden; border-radius:inherit; background-repeat:repeat; background-position:center; /* * Le calque ne peut créer aucun contexte global * susceptible de passer devant la navigation. */ contain:paint; } .zz-public-watermark-overlay.zz-center{ background-repeat:no-repeat; background-position:center; background-size:contain; } /* * Sécurité supplémentaire : * les logos explicitement exclus ne reçoivent jamais * de calque. */ .zz-brand-logo, .brand-logo, .footer-logo, [data-no-watermark]{ --zz-watermark-disabled:1; } /* ZZ_WATERMARK_NO_CROP_START */ /* ===================================================== FILIGRANE + COUVERTURES ZIGZAGOU AUCUNE IMAGE COUPEE ===================================================== */ /* ----------------------------------------------------- CARROUSEL ----------------------------------------------------- */ .zz-showcase-visual{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } .zz-showcase-visual > .zz-watermark-image-host{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:8px 8px 34px !important; box-sizing:border-box !important; overflow:hidden !important; } .zz-showcase-visual > .zz-watermark-image-host > img, .zz-showcase-visual > img{ position:static !important; display:block !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:100% !important; max-height:100% !important; margin:auto !important; padding:0 !important; object-fit:contain !important; object-position:center center !important; transform:none !important; } /* ----------------------------------------------------- COLLECTIONS DE L'ACCUEIL ----------------------------------------------------- */ .zz-featured-image{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; padding:6px !important; box-sizing:border-box !important; } .zz-featured-image > .zz-watermark-image-host{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; } .zz-featured-image > .zz-watermark-image-host > img, .zz-featured-image > img{ position:static !important; display:block !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:100% !important; max-height:100% !important; margin:auto !important; padding:0 !important; object-fit:contain !important; object-position:center center !important; transform:none !important; } /* ----------------------------------------------------- LES IMAGES FILIGRANEES NE SONT JAMAIS FORCEES A REMPLIR LEUR WRAPPER ----------------------------------------------------- */ .zz-showcase-visual .zz-watermark-image-host > img, .zz-featured-image .zz-watermark-image-host > img{ flex:0 1 auto !important; } /* ----------------------------------------------------- MOBILE ----------------------------------------------------- */ @media(max-width:700px){ .zz-showcase-visual > .zz-watermark-image-host{ padding: 5px 5px 32px !important; } } /* ZZ_WATERMARK_NO_CROP_END */ /* ZZ_CAROUSEL_FINAL_BOX_START */ /* ===================================================== CARROUSEL ZIGZAGOU Principe simple : - colonne texte - colonne visuelle - PETITE case beige fixe - livre entier dans la case ===================================================== */ @media(min-width:901px){ /* ----------------------------------------------- Répartition générale du slide ----------------------------------------------- */ .zz-showcase-slide{ grid-template-columns: minmax(0, 1fr) 300px !important; align-items:center !important; } /* ----------------------------------------------- Colonne du livre Elle sert seulement à centrer la petite case. ----------------------------------------------- */ .zz-showcase-visual{ position:relative !important; width:240px !important; height:330px !important; min-width:240px !important; min-height:330px !important; max-width:240px !important; max-height:330px !important; justify-self:center !important; align-self:center !important; margin:0 auto !important; padding:14px 14px 30px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } /* ----------------------------------------------- Wrapper du filigrane Il prend uniquement la place nécessaire. ----------------------------------------------- */ .zz-showcase-visual > .zz-watermark-image-host{ display:flex !important; align-items:center !important; justify-content:center !important; width:200px !important; height:300px !important; min-width:0 !important; min-height:0 !important; max-width:200px !important; max-height:300px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; overflow:visible !important; } /* ----------------------------------------------- Couverture 1024 × 1536 = ratio 2:3 Elle est donc limitée à 200 × 300. ----------------------------------------------- */ .zz-showcase-visual > .zz-watermark-image-host > img, .zz-showcase-visual > img{ position:static !important; display:block !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:200px !important; max-height:300px !important; margin:auto !important; padding:0 !important; object-fit:contain !important; object-position:center center !important; transform:none !important; scale:1 !important; clip-path:none !important; } /* ----------------------------------------------- Petit texte en bas ----------------------------------------------- */ .zz-showcase-caption{ position:absolute !important; left:8px !important; right:8px !important; bottom:5px !important; width:auto !important; margin:0 !important; z-index:5 !important; } } /* ===================================================== TABLETTE ===================================================== */ @media(min-width:701px) and (max-width:900px){ .zz-showcase-visual{ width:220px !important; height:300px !important; margin:10px auto 24px !important; padding:12px 12px 28px !important; } .zz-showcase-visual > .zz-watermark-image-host{ width:180px !important; height:270px !important; } .zz-showcase-visual > .zz-watermark-image-host > img, .zz-showcase-visual > img{ width:auto !important; height:auto !important; max-width:180px !important; max-height:270px !important; object-fit:contain !important; } } /* ===================================================== MOBILE ===================================================== */ @media(max-width:700px){ .zz-showcase-visual{ width:190px !important; height:265px !important; min-width:0 !important; min-height:0 !important; max-width:190px !important; max-height:265px !important; margin:10px auto 22px !important; padding:10px 10px 26px !important; } .zz-showcase-visual > .zz-watermark-image-host{ width:155px !important; height:232px !important; max-width:155px !important; max-height:232px !important; } .zz-showcase-visual > .zz-watermark-image-host > img, .zz-showcase-visual > img{ width:auto !important; height:auto !important; max-width:155px !important; max-height:232px !important; object-fit:contain !important; } } /* ZZ_CAROUSEL_FINAL_BOX_END */ /* ZZ_CAROUSEL_CAPTION_CENTER_START */ .zz-showcase-caption{ position:absolute !important; left:0 !important; right:0 !important; bottom:5px !important; width:100% !important; margin:0 !important; padding:0 6px !important; box-sizing:border-box !important; text-align:center !important; display:flex !important; justify-content:center !important; align-items:center !important; } /* ZZ_CAROUSEL_CAPTION_CENTER_END */ /* ZZ_CAROUSEL_PAGE_CENTER_START */ /* * Centre le CARROUSEL COMPLET sur la page. * Ne modifie ni le livre ni sa petite case. */ .zz-home-hero{ width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; box-sizing:border-box !important; } .zz-showcase-carousel{ width:min(100% - 40px, 1180px) !important; max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; position:relative !important; box-sizing:border-box !important; } /* Sur grand écran : largeur confortable et centrée */ @media(min-width:1200px){ .zz-showcase-carousel{ width:1180px !important; } } /* Tablette / mobile */ @media(max-width:700px){ .zz-showcase-carousel{ width:calc(100% - 20px) !important; margin-left:auto !important; margin-right:auto !important; } } /* ZZ_CAROUSEL_PAGE_CENTER_END */ /* ZZ_HOME_CLOUD_AND_SYMMETRY_20260922_START */ .zz-home-hero{ position:relative; width:100%; max-width:none; margin-left:auto; margin-right:auto; background: linear-gradient( 90deg, #fff8dd 0%, #fffdf7 13%, #fffdf7 87%, #fff8dd 100% ); } .zz-home-doodles-left, .zz-home-doodles-right{ width:120px; opacity:.9; } .zz-book-cover-link{ display:block; color:inherit; text-decoration:none; } .zz-book-cover-link .zz-book-cover{ cursor:pointer; } .zz-book-cover-link:focus-visible{ outline:3px solid #72bdc7; outline-offset:3px; border-radius:20px; } /* ZZ_HOME_CLOUD_AND_SYMMETRY_20260922_END */ /* ZZ_CLOUD_ARROWS_FIX_V6_START */ /* * IMPORTANT : * aucune règle générique sur les boutons du carrousel. * On ne touche donc plus au positionnement des flèches. */ .zz-home-hero{ position:relative; overflow:visible !important; } /* ===================================================== NUAGE Il est PHYSIQUEMENT AU-DESSUS de la flèche gauche. ===================================================== */ .zz-home-cloud.zz-home-cloud-svg{ position:absolute; z-index:20; /* * Coin gauche du carrousel. */ left:8px; /* * Remonté pour être AU-DESSUS * de la flèche gauche et non dessus. */ top:35%; width:225px; height:auto; padding:0; margin:0; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; /* * Petite inclinaison de quelques degrés. */ transform: translateY(-50%) rotate(-4deg); transform-origin:center; pointer-events:none; } .zz-home-cloud.zz-home-cloud-svg::before, .zz-home-cloud.zz-home-cloud-svg::after{ content:none !important; display:none !important; } .zz-home-cloud .zz-cloud-art{ display:block; width:100%; height:auto; overflow:visible; filter:none; } /* ===================================================== SECURITE FLECHES ===================================================== */ /* * On annule précisément la mauvaise règle V5 qui avait * donné position:relative aux boutons du carrousel. * * Les règles originales du site peuvent donc reprendre * le contrôle de left/right. */ .zz-showcase-carousel button{ position:absolute; } /* * Les classes gauche/droite existantes conservent leurs * coordonnées originales. Ces deux règles garantissent * seulement que la droite reste bien à DROITE et la * gauche bien à GAUCHE. */ .zz-showcase-prev, .zz-carousel-prev, .zz-showcase-carousel .prev, .zz-showcase-carousel [data-prev]{ left:12px; right:auto; } .zz-showcase-next, .zz-carousel-next, .zz-showcase-carousel .next, .zz-showcase-carousel [data-next]{ left:auto; right:12px; } /* ===================================================== FORMAT DE TON ECRAN ===================================================== */ @media(max-width:1480px){ .zz-home-cloud.zz-home-cloud-svg{ left:7px; top:29%; width:205px; transform: translateY(-50%) rotate(-4deg); } } /* ===================================================== TABLETTE ===================================================== */ @media(max-width:1050px){ .zz-home-cloud.zz-home-cloud-svg{ width:175px; top:32%; } } /* ===================================================== MOBILE ===================================================== */ @media(max-width:760px){ .zz-home-hero{ padding-top:105px; } .zz-home-cloud.zz-home-cloud-svg{ left:50%; top:3px; width:215px; transform: translateX(-50%) rotate(-3deg); } } /* ZZ_CLOUD_ARROWS_FIX_V6_END */ /* ZZ_CLOUD_VERTICAL_FINAL_START */ /* * Ajustement FINAL de position uniquement. * On remonte le nuage de 25 px. * Taille, rotation et flèches inchangées. */ .zz-home-cloud.zz-home-cloud-svg{ margin-top:-25px !important; } /* ZZ_CLOUD_VERTICAL_FINAL_END */