/* ================================================================ ALCANA — Page « Dix étoiles pour lui » Feuille unique, échelle 110 %. Destination : Page > CSS additionnel. Remplace l'intégralité du champ. Ne contient que ce que cette page utilise réellement : chaque sélecteur correspond à un élément du bloc HTML ou à une classe posée par le script de la carte. 1 Insertion dans la page 6 Fiche · contenances 2 Racine et reset 7 Fiche · prix et bouton 3 En-tête 8 Fiche · navigation 4 Bascule Carte / Liste 9 Étoile filante et légendes 5 Planche et constellation 10 Vue Liste 11 Mobile 12 Fiche dans la planche (≥1020px) 13 Modes système ================================================================ */ /* ALCANA-ETAT {"v":{"largeur":414,"decalHaut":0,"decalDroite":44,"fondOp":0,"flou":12,"bordOp":40,"rayon":2,"padH":19,"padHaut":15,"padBas":12,"repliFlou":1,"filetHaut":1,"vedetteD":1,"visuel":1,"ratio":"3 / 2","hautMax":390,"posY":24,"voile":1,"flex":1,"gap":11,"nomLigne":1,"nomSep":"filet","nomEcart":0,"filets":1,"filetOp":20,"eyebrowT":11,"eyebrowS":20,"nomT":1.85,"nomS":3,"phraseT":1,"phraseI":0,"etoileT":0.74,"fromT":1.28,"descT":0.89,"descL":1.65,"repT":0.79,"pyrCols":"3","pyrGap":25,"pyrLabT":10,"pyrNoteT":0.76,"fmtCols":"3","fmtHaut":82,"fmtPadV":10,"fmtGap":10,"fmtSizeT":0.9,"fmtPrixT":0.8,"fmtTag":1,"fmtTagT":0.57,"fmtRayon":2,"prixSous":0,"achatSens":"row","prixT":1.9,"ctaHaut":46,"ctaT":11,"ctaS":18,"ctaPadH":30,"ctaRayon":2,"ctaPlein":0,"navT":0.78,"planche":1452},"o":[{"k":"ligne1","on":1,"av":0},{"k":"nom","on":1,"av":0},{"k":"phrase","on":1,"av":0},{"k":"etoile","on":0,"av":0},{"k":"from","on":0,"av":0},{"k":"desc","on":1,"av":0},{"k":"reperes","on":1,"av":0},{"k":"pyramide","on":1,"av":0},{"k":"formats","on":1,"av":0},{"k":"achat","on":1,"av":0},{"k":"nav","on":1,"av":0}],"t":{"eyebrow":"Collection Homme","vedette":"Best-seller","fromPref":"","rep1":"Extrait de parfum","rep2":"Tenue 8 heures","rep3":"Marque française","pyr1":"Tête","pyr2":"Cœur","pyr3":"Fond","legFmt":"Contenance","size1":"5 ml","size2":"50 ml","size3":"100 ml","tag1":"Découverte","tag2":"Le plus choisi","tag3":"","prixSuf":"— extrait de parfum","cta":"Découvrir","navPrev":"Étoile précédente :","chvPrev":"‹","chvNext":"›","puce":"✦"},"c":{"0":{"phrase":"Inspiré de Sauvage"},"1":{"phrase":"Inspiré de Y"},"2":{"phrase":"Inspiré de Stronger With You"},"3":{"phrase":"Inspiré de Bleu de Chanel"},"4":{"phrase":"Inspiré d'Eros"},"5":{"phrase":"Inspiré de One Million"},"6":{"phrase":"Inspiré du Mâle"},"7":{"phrase":"Inspiré d'Acqua di Giò"},"8":{"phrase":"Inspiré d'Invictus"},"9":{"phrase":"Inspiré de Scandal"}}} */ /* ================================================================ 1 · INSERTION DANS LA PAGE Le bloc est enfermé dans le conteneur de contenu du thème (~620px). On le sort en pleine largeur, puis on recentre à 1320px par le padding : aucun enfant n'est touché. ================================================================ */ main.alc-main { position: relative; z-index: 1; background: transparent !important; } /* La section du thème pose 120px de respiration en haut et en bas. Sur cette page, le sur-titre est trop bas : on rapproche le haut, on garde le bas. Le fond « papier » du thème est neutralisé ici — sans ça, .alc-section--paper reprend var(--alc-paper) et masque le ciel. */ main.alc-main .alc-section--paper { background: transparent !important; padding-top: 75px; padding-bottom: 40px; } main.alc-main .alc-atlas { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(clamp(16px, 3.5vw, 40px), calc(50vw - 726px)); } /* 100vw inclut la barre de défilement : sans rognage, la planche déborde de sa largeur et la page défile latéralement. Vaut à toutes les tailles : la feuille coulissante du mobile est en position fixe, son bloc conteneur est la fenêtre, le rognage ne l'atteint donc pas. */ main.alc-main { overflow-x: clip; } /* ================================================================ 2 · RACINE ET RESET LOCAL ================================================================ */ .alc-atlas, .alc-atlas *, .alc-atlas *::before, .alc-atlas *::after { box-sizing: border-box; } .alc-atlas p, .alc-atlas h1, .alc-atlas h2, .alc-atlas h3, .alc-atlas ul, .alc-atlas li, .alc-atlas figure { margin: 0; padding: 0; } .alc-atlas ul { list-style: none; } .alc-atlas { /* « dark » d'abord, « only dark » ensuite : repli pour les moteurs qui ne connaissent pas encore le mot-clé only. */ color-scheme: dark; color-scheme: only dark; --nuit-0: #02040c; --argent: #d5d9e8; --argent-hi: #eef0f8; --serif: "Playfair Display", Georgia, serif; --sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif; max-width: 1452px; margin: 0 auto; padding: 24px clamp(16px, 3.5vw, 40px) 32px; } /* ================================================================ 3 · EN-TÊTE ================================================================ */ .alc-atlas .alc-eyebrow { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; opacity: .78; text-align: center; margin-bottom: 12px; } .alc-atlas .alc-h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.15; text-align: center; background: linear-gradient(105deg, #9fa7c4 0%, #d8dcec 25%, #fff 50%, #d8dcec 75%, #9fa7c4 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: #e8ebf5; -webkit-text-fill-color: transparent; animation: alc-kf-shine 8s linear infinite; } @keyframes alc-kf-shine { to { background-position: -220% center; } } .alc-atlas .alc-lead { max-width: 620px; margin: 14px auto 0; text-align: center; font-weight: 300; font-size: .95rem; line-height: 1.75; opacity: .9; } /* ================================================================ 4 · BASCULE CARTE / LISTE Rail aligné à droite sur la largeur de la planche. Sélecteur repris du thème : main.alc-main l'emporte sur .alc-atlas seul. ================================================================ */ main.alc-main .alc-vue { display: flex; justify-content: flex-end; max-width: 1452px; margin: 0 auto clamp(14px, 2vw, 22px); } .alc-atlas .alc-vue__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid rgba(201, 204, 217, .26); background: transparent; color: var(--argent-hi); font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s, border-color .3s, color .3s; } .alc-atlas .alc-vue__btn:first-child { border-radius: 2px 0 0 2px; } .alc-atlas .alc-vue__btn:last-child { border-radius: 0 2px 2px 0; border-left: 0; } .alc-atlas .alc-vue__btn:hover { background: rgba(238, 240, 248, .06); border-color: var(--argent-hi); } .alc-atlas .alc-vue__btn.is-on { background: rgba(238, 240, 248, .1); color: #fff; border-color: rgba(238, 240, 248, .5); } .alc-atlas .alc-vue__btn:focus-visible { outline: 2px solid var(--argent); outline-offset: 3px; } .alc-atlas .alc-vue__ico { font-size: 12px; opacity: .8; } /* Ce que chaque vue montre et cache. */ .alc-atlas[data-vue="liste"] .alc-plan, .alc-atlas[data-vue="liste"] .alc-legende, .alc-atlas[data-vue="liste"] .alc-legende-mobile { display: none; } .alc-atlas[data-vue="carte"] .alc-grille, .alc-atlas[data-vue="carte"] .alc-grille__titre { display: none; } /* ================================================================ 5 · PLANCHE ET CONSTELLATION La constellation flotte directement sur le ciel du site : la planche n'a ni fond, ni cadre. Le décor gravé du SVG — graticule, graduations, coins — est masqué ; sans cette règle il se remplirait de noir. ================================================================ */ .alc-atlas .alc-plan { position: relative; } .alc-atlas .alc-planche { position: relative; overflow: hidden; } .alc-atlas .alc-planche::-webkit-scrollbar { height: 3px; } .alc-atlas .alc-planche::-webkit-scrollbar-thumb { background: rgba(201, 204, 217, .28); } .alc-atlas .alc-planche__inner { position: relative; min-width: 0; } .alc-atlas .alc-planche svg { display: block; width: 100%; height: auto; } .alc-atlas .alc-graticule, .alc-atlas .alc-graduations, .alc-atlas .alc-coin { display: none; } /* --- Étoiles-joyaux, créées par le script --- */ .alc-atlas .alc-etoile { cursor: pointer; opacity: 1; animation: alc-kf-allume .9s ease backwards; } .alc-atlas .alc-etoile .alc-lueur { fill: url(#alc-lueur); opacity: .4; transition: opacity .35s, transform .35s; transform-box: fill-box; transform-origin: center; } .alc-atlas .alc-etoile .alc-glyphe { fill: #eef0f8; } .alc-atlas .alc-etoile .alc-glyphe--sous { opacity: .65; } .alc-atlas .alc-etoile .alc-scintille { animation: alc-kf-scintille 4.2s ease-in-out infinite; transition: transform .35s; transform-box: fill-box; transform-origin: center; } .alc-atlas .alc-etoile .alc-nom { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; fill: rgba(238, 240, 248, .85); transition: fill .3s; } /* Couronne pointillée de l'étoile sélectionnée. */ .alc-atlas .alc-etoile .alc-anneau { fill: none; stroke: rgba(238, 240, 248, .75); stroke-width: 1; stroke-dasharray: 3 7; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s; } .alc-atlas .alc-etoile:hover .alc-nom, .alc-atlas .alc-etoile.is-focus .alc-nom { fill: #ffffff; } .alc-atlas .alc-etoile:hover .alc-lueur, .alc-atlas .alc-etoile.is-focus .alc-lueur { opacity: .95; transform: scale(1.45); } /* La mise à l'échelle porte sur le groupe, jamais sur le : celui-ci a un attribut transform (translate + scale) que la propriété CSS transform remplacerait en bloc, envoyant le joyau à l'origine du SVG. */ .alc-atlas .alc-etoile:hover .alc-scintille, .alc-atlas .alc-etoile.is-focus .alc-scintille { transform: scale(1.28); } .alc-atlas .alc-etoile.is-focus .alc-anneau { opacity: 1; animation: alc-kf-tourne 26s linear infinite; } .alc-atlas .alc-etoile:focus-visible { outline: none; } .alc-atlas .alc-etoile:focus-visible .alc-nom { fill: #fff; text-decoration: underline; } @keyframes alc-kf-allume { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes alc-kf-scintille { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } @keyframes alc-kf-tourne { to { transform: rotate(360deg); } } /* --- Tracé de la constellation --- */ .alc-atlas .alc-constellation { fill: none; stroke: #c9ccd9; stroke-width: 1; opacity: .13; transition: opacity .7s ease; } .alc-atlas .alc-constellation.is-visible { opacity: .7; } .alc-atlas .alc-constellation.is-hint { opacity: .34; } /* ================================================================ 6 · FICHE · STRUCTURE ET TEXTES Le corps est une suite de rangées qui se replient : chaque bloc prend toute la largeur et occupe donc sa propre ligne — sauf le nom et la phrase, en largeur automatique, posés sur la même ligne de base. min-width: 0 laisse les enfants passer sous leur largeur minimale de contenu, ce qu'un élément flex refuse par défaut. La position du panneau vit entièrement dans les sections 11 et 12 : feuille coulissante en dessous de 1020px, posé dans la planche au-dessus. ================================================================ */ .alc-atlas .alc-panneau { border: 1px solid rgba(201, 204, 217, .3); box-shadow: 0 34px 90px -30px rgba(0, 0, 0, .95); overflow: hidden; } /* Filet lumineux sur l'arête haute. */ .alc-atlas .alc-panneau::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--argent-hi), transparent); z-index: 2; } /* --- Visuel --- */ .alc-atlas .alc-panneau__visuel { position: relative; aspect-ratio: 3 / 2; max-height: 390px; overflow: hidden; } .alc-atlas .alc-panneau__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; } .alc-atlas .alc-panneau__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 7, 18, .12), transparent 40%, rgba(4, 7, 18, .92)); } /* --- Corps --- */ .alc-atlas .alc-panneau__corps { padding: 15px 19px 12px; display: flex; flex-flow: row wrap; align-items: baseline; gap: 11px; } .alc-atlas .alc-panneau__corps > * { margin-top: 0; width: 100%; min-width: 0; } .alc-atlas .alc-panneau__corps > .alc-panneau__nom, .alc-atlas .alc-panneau__corps > .alc-panneau__phrase { width: auto; } /* Ordre d'affichage. Les deux blocs retirés gardent leur rang : les rallumer depuis l'éditeur les remet à leur place. */ .alc-atlas .alc-panneau__corps > .alc-panneau__ligne1 { order: 1; } .alc-atlas .alc-panneau__corps > .alc-panneau__nom { order: 2; } .alc-atlas .alc-panneau__corps > .alc-panneau__phrase { order: 3; } .alc-atlas .alc-panneau__corps > .alc-panneau__etoile { order: 4; } .alc-atlas .alc-panneau__corps > .alc-panneau__from { order: 5; } .alc-atlas .alc-panneau__corps > .alc-panneau__desc { order: 6; } .alc-atlas .alc-panneau__corps > .alc-reperes { order: 7; } .alc-atlas .alc-panneau__corps > .alc-pyramide { order: 8; } .alc-atlas .alc-panneau__corps > .alc-formats { order: 9; } .alc-atlas .alc-panneau__corps > .alc-panneau__achat { order: 10; } .alc-atlas .alc-panneau__corps > .alc-panneau__nav { order: 11; } /* Repère astronomique et « À partir de » : retirés de la fiche. */ .alc-atlas .alc-panneau__etoile, .alc-atlas .alc-panneau__from { display: none; } /* --- Ligne collection + badge --- */ .alc-atlas .alc-panneau__ligne1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .alc-atlas .alc-panneau__eyebrow { font-size: 11px; letter-spacing: .20em; text-transform: uppercase; opacity: .72; } .alc-atlas .alc-panneau__vedette { display: none; margin-left: auto; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--argent-hi); border: 1px solid rgba(201, 204, 217, .4); border-radius: 2px; padding: 3px 8px; } .alc-atlas .alc-panneau.is-vedette .alc-panneau__vedette { display: inline-block; } /* --- Nom, phrase, description --- */ .alc-atlas .alc-panneau__nom { font-family: var(--serif); font-weight: 500; font-size: 1.85rem; letter-spacing: .03em; color: var(--argent-hi); } .alc-atlas .alc-panneau__phrase { font-family: var(--serif); font-size: 1rem; opacity: .85; } /* Filet vertical séparant le nom de la phrase. */ .alc-atlas .alc-panneau__corps > .alc-panneau__phrase { border-left: 1px solid rgba(201, 204, 217, .28); padding-left: 11px; } .alc-atlas .alc-panneau__desc { font-weight: 300; font-size: .89rem; line-height: 1.65; opacity: .88; } /* --- Repères produit --- */ .alc-atlas .alc-reperes { display: grid; gap: 7px; /* Le thème pose sur les un padding-inline-start ET un margin-bottom de 1,4em que le reset ne rattrape pas — sa feuille est chargée après celle de la page. On les reprend ici. 5px + les 11px d'écart entre blocs font 16px sous le dernier repère, contre 33 auparavant. */ padding-inline-start: 0; margin-bottom: 5px; } .alc-atlas .alc-reperes li { position: relative; padding-left: 20px; font-size: .79rem; line-height: 1.45; opacity: .82; } .alc-atlas .alc-reperes li::before { content: "✦"; position: absolute; left: 0; top: -1px; font-size: .7rem; opacity: .55; } /* --- Pyramide olfactive --- */ .alc-atlas .alc-pyramide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding-top: 15px; border-top: 1px solid rgba(201, 204, 217, .20); /* Le thème ferme la pyramide par un border-bottom. Sans marge basse, la dernière note vient buter dessus : on lui donne de l'air, et on aligne la couleur du trait bas sur celle du trait haut. */ padding-bottom: 8px; border-bottom-color: rgba(201, 204, 217, .20); } .alc-atlas .alc-pyramide__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .58; margin-bottom: 6px; } .alc-atlas .alc-pyramide__notes { font-size: .82rem; line-height: 1.5; opacity: .9; font-weight: 300; } /* ================================================================ 7 · FICHE · CONTENANCES minmax(0, 1fr) et non 1fr : une colonne peut alors passer sous la largeur minimale de son texte, l'étiquette se replie au lieu de faire déborder la grille. ================================================================ */ .alc-atlas .alc-formats { border: 0; /* 15px + les 11px d'écart entre blocs = 26px sous le trait de la pyramide. */ padding-top: 15px; /* Filet retiré. À annuler explicitement : l'omettre laisserait reprendre celui du thème, qui pose border-top sur .alc-formats. */ border-top: 0; } /* Intitulé « Contenance » retiré. Habillage conservé : le rétablir ne demande que de supprimer le display: none. */ .alc-atlas .alc-formats__legend { display: none; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .58; margin-bottom: 9px; } .alc-atlas .alc-formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .alc-atlas .alc-format { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 3px; min-height: 82px; padding: 10px 12px; border: 1px solid rgba(201, 204, 217, .3); border-radius: 2px; cursor: pointer; transition: border-color .25s, background .25s; } .alc-atlas .alc-format:hover { border-color: rgba(238, 240, 248, .7); } .alc-atlas .alc-format input { position: absolute; opacity: 0; pointer-events: none; } .alc-atlas .alc-format__size { order: 1; flex: 0 0 auto; font-size: .9rem; color: var(--argent-hi); letter-spacing: .04em; } .alc-atlas .alc-format__price { order: 2; flex: 0 0 auto; font-size: .8rem; opacity: .82; color: inherit; } .alc-atlas .alc-format__tag { order: 3; flex: 0 0 auto; margin-top: auto; min-height: 0; font-size: .57rem; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; opacity: .55; overflow-wrap: anywhere; } /* Carte choisie. La classe is-choisi double le sélecteur :has(), absent de Safari 15.4 et Firefox 121. */ .alc-atlas .alc-format:has(input:checked), .alc-atlas .alc-format.is-choisi { background: linear-gradient(105deg, #9aa2bd, #eef0f8 40%, #fff 50%, #d4d8e6 65%, #9aa2bd); border-color: transparent; } .alc-atlas .alc-format:has(input:checked) .alc-format__size, .alc-atlas .alc-format:has(input:checked) .alc-format__price, .alc-atlas .alc-format:has(input:checked) .alc-format__tag, .alc-atlas .alc-format.is-choisi .alc-format__size, .alc-atlas .alc-format.is-choisi .alc-format__price, .alc-atlas .alc-format.is-choisi .alc-format__tag { color: var(--nuit-0); opacity: .95; } .alc-atlas .alc-format:has(input:focus-visible) { outline: 2px solid var(--argent); outline-offset: 3px; } /* ================================================================ 8 · FICHE · PRIX ET BOUTON ================================================================ */ .alc-atlas .alc-panneau__achat { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .alc-atlas .alc-panneau__prix { font-family: var(--serif); font-size: 1.9rem; color: var(--argent-hi); line-height: 1; } /* Ligne de contenance sous le prix : retirée. */ .alc-atlas .alc-panneau__prix small { display: none; } .alc-atlas .alc-panneau__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 30px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--nuit-0); background: linear-gradient(105deg, #9aa2bd, #eef0f8 40%, #fff 50%, #d4d8e6 65%, #9aa2bd); border-radius: 2px; transition: transform .3s, box-shadow .3s; box-shadow: 0 0 0 1px rgba(238, 240, 248, .25), 0 12px 34px -14px rgba(150, 170, 230, .45); } .alc-atlas .alc-panneau__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(238, 240, 248, .4), 0 18px 44px -14px rgba(150, 170, 230, .6); } .alc-atlas .alc-panneau__cta:focus-visible { outline: 2px solid var(--argent); outline-offset: 3px; } /* ================================================================ 9 · FICHE · NAVIGATION ET FERMETURE ================================================================ */ .alc-atlas .alc-panneau__nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(201, 204, 217, .20); } .alc-atlas .alc-panneau__fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 0; background: none; color: var(--argent); font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; cursor: pointer; opacity: .75; transition: opacity .25s, color .25s; } .alc-atlas .alc-panneau__fleche:hover { opacity: 1; color: var(--argent-hi); } .alc-atlas .alc-panneau__fleche:focus-visible { outline: 2px solid var(--argent); outline-offset: 3px; } .alc-atlas .alc-panneau__fleche .alc-chv { font-family: var(--serif); font-size: 1.05rem; line-height: 1; } .alc-atlas .alc-panneau__fleche em { font-style: normal; font-family: var(--serif); letter-spacing: .05em; } /* Croix de fermeture : affichée en mobile seulement, section 11. */ .alc-atlas .alc-panneau__close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; border: 0; border-radius: 2px; background: rgba(2, 4, 12, .55); color: var(--argent-hi); font-size: 1.05rem; cursor: pointer; } .alc-atlas .alc-panneau__close:focus-visible { outline: 2px solid var(--argent); outline-offset: 2px; } /* Voile derrière la feuille coulissante. */ .alc-atlas .alc-voile { position: fixed; inset: 0; z-index: 8; background: rgba(1, 2, 7, .55); opacity: 0; pointer-events: none; transition: opacity .35s; } .alc-atlas .alc-voile.is-on { opacity: 1; pointer-events: auto; } /* ================================================================ 10 · ÉTOILE FILANTE ET LÉGENDES ================================================================ */ .alc-atlas .alc-filante { position: absolute; top: 0; left: 0; width: var(--flen, 160px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(238, 240, 248, .05) 45%, rgba(238, 240, 248, .9)); opacity: 0; pointer-events: none; transform-origin: 100% 50%; will-change: transform, opacity; } .alc-atlas .alc-filante::after { content: ""; position: absolute; right: -2px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, rgba(238, 240, 248, .9) 40%, transparent 72%); box-shadow: 0 0 9px 2px rgba(238, 240, 248, .5); } .alc-atlas .alc-filante.is-go { animation: alc-kf-file var(--fdur, 1s) cubic-bezier(.15, .55, .45, 1) forwards; } @keyframes alc-kf-file { 0% { opacity: 0; transform: rotate(var(--fang, 24deg)) translateX(0) scaleX(.35); } 10% { opacity: 1; } 65% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--fang, 24deg)) translateX(var(--fdist, 420px)) scaleX(1); } } /* Légende « Cliquez sur une étoile… » : retirée. Habillage conservé, la réafficher ne demande que de supprimer le display: none. */ .alc-atlas .alc-legende { display: none; margin-top: 16px; text-align: center; font-size: .8rem; letter-spacing: .05em; opacity: .7; } .alc-atlas .alc-legende-mobile { display: none; margin-top: 10px; text-align: center; font-size: .78rem; opacity: .65; } /* ================================================================ 11 · VUE LISTE — carte photo pleine, entièrement cliquable Le panneau monte du bas, le texte s'écarte de 118px au-dessus. Les contenances sont de vrais boutons radio dans un formulaire WooCommerce : le choix et le prix du bouton tiennent sans une ligne de JavaScript. ================================================================ */ .alc-atlas .alc-grille__titre { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: .07em; text-align: center; color: var(--argent-hi); margin: 0 0 clamp(20px, 3vw, 30px); } .alc-atlas .alc-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); max-width: 1452px; margin: 0 auto; padding: 0 20px; } .alc-atlas .alc-carte { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: #050810; /* contexte d'empilement propre : le panneau ne passe pas sous une voisine */ isolation: isolate; } .alc-atlas .alc-carte__visuel { position: absolute; inset: 0; margin: 0; } .alc-atlas .alc-carte__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .alc-atlas .alc-carte:hover .alc-carte__visuel img, .alc-atlas .alc-carte:focus-within .alc-carte__visuel img { transform: scale(1.05); } .alc-atlas .alc-carte__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,18,.15) 0%, transparent 34%, rgba(2,4,12,.92) 88%); } .alc-atlas .alc-carte__lien { position: absolute; inset: 0; z-index: 1; display: block; } .alc-atlas .alc-carte__lien:focus-visible { outline: 2px solid var(--argent); outline-offset: -4px; } .alc-atlas .alc-carte__sr, .alc-atlas .alc-carte__notes { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .alc-atlas .alc-carte__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; pointer-events: none; transition: transform .42s cubic-bezier(.2, .7, .2, 1); } .alc-atlas .alc-carte__fam { font-family: var(--sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; opacity: .55; margin: 0 0 7px; } .alc-atlas .alc-carte__nom { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; color: #fff; margin: 0 0 5px; } .alc-atlas .alc-carte__phrase { font-size: .78rem; opacity: .72; margin: 0; } .alc-atlas .alc-carte__des { font-size: .8rem; opacity: .9; margin: 11px 0 0; transition: opacity .3s; } .alc-atlas .alc-carte__vedette { position: absolute; top: 12px; left: 12px; right: auto; z-index: 3; font-family: var(--sans); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; background: linear-gradient(105deg, #9aa2bd, #eef0f8 40%, #fff 50%, #d4d8e6 65%, #9aa2bd); color: var(--nuit-0); color-scheme: only light; forced-color-adjust: none; } /* ---- Panneau d'achat, au survol seulement ------------------------------ Les contenances sont de vrais boutons radio dans un formulaire WooCommerce : la sélection et le prix du bouton tiennent sans une ligne de JavaScript, par simples sélecteurs de frères — pas de :has(), donc valable loin en arrière dans les versions de navigateurs. */ .alc-atlas .alc-carte:hover .alc-carte__txt, .alc-atlas .alc-carte:focus-within .alc-carte__txt { transform: translateY(-118px); } .alc-atlas .alc-carte:hover .alc-carte__des, .alc-atlas .alc-carte:focus-within .alc-carte__des { opacity: 0; } .alc-atlas .alc-achat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 12px; background: linear-gradient(105deg, #9aa2bd, #eef0f8 40%, #fff 50%, #d4d8e6 65%, #9aa2bd); color: var(--nuit-0); box-shadow: 0 -14px 34px -18px rgba(0, 0, 0, .9); transform: translateY(101%); transition: transform .42s cubic-bezier(.2, .7, .2, 1); color-scheme: only light; forced-color-adjust: none; } .alc-atlas .alc-carte:hover .alc-achat, .alc-atlas .alc-carte:focus-within .alc-achat { transform: none; } .alc-atlas .alc-achat__radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .alc-atlas .alc-achat__fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; } .alc-atlas .alc-achat__fmt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px; padding: 6px 4px; border: 1px solid rgba(2, 4, 12, .28); border-radius: 2px; background: rgba(255, 255, 255, .34); color: var(--nuit-0); font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .alc-atlas .alc-achat__fmt small { font-size: .6rem; opacity: .7; margin-top: 1px; } .alc-atlas .alc-achat__fmt:hover { background: rgba(255, 255, 255, .72); } .alc-atlas .alc-achat__radio[data-c="5"]:checked ~ .alc-achat__fmts .alc-achat__fmt[data-c="5"], .alc-atlas .alc-achat__radio[data-c="50"]:checked ~ .alc-achat__fmts .alc-achat__fmt[data-c="50"], .alc-atlas .alc-achat__radio[data-c="100"]:checked ~ .alc-achat__fmts .alc-achat__fmt[data-c="100"] { background: var(--nuit-0); border-color: var(--nuit-0); color: var(--argent-hi); font-weight: 500; } .alc-atlas .alc-achat__radio:focus-visible ~ .alc-achat__fmts .alc-achat__fmt { outline: 1px dashed rgba(2, 4, 12, .5); outline-offset: 2px; } .alc-atlas .alc-achat__btn { display: block; width: 100%; min-height: 40px; padding: 11px 8px; border: 0; border-radius: 2px; background: #02040c; cursor: pointer; transition: background .25s; } .alc-atlas .alc-achat__btn:hover { background: #12204a; } .alc-atlas .alc-achat__btn:focus-visible { outline: 2px solid var(--nuit-0); outline-offset: 2px; } /* Le lustre a besoin d'un calque à lui : un dégradé découpé dans le texte EST le fond de l'élément, il ne peut pas cohabiter avec le fond sombre du bouton. */ .alc-atlas .alc-achat__lustre { display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; background-image: linear-gradient(105deg, #9aa2bd 0%, #d8dcec 25%, #fff 45%, #d8dcec 65%, #9aa2bd 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .alc-atlas .alc-achat__p { display: none; } .alc-atlas .alc-achat__radio[data-c="5"]:checked ~ .alc-achat__btn .alc-achat__p--5, .alc-atlas .alc-achat__radio[data-c="50"]:checked ~ .alc-achat__btn .alc-achat__p--50, .alc-atlas .alc-achat__radio[data-c="100"]:checked ~ .alc-achat__btn .alc-achat__p--100 { display: inline; } /* Au doigt, le survol n'existe pas : le panneau n'aurait aucun moyen de s'ouvrir et resterait posé en permanence sur la photo. On le retire, la carte redevient un simple lien vers la fiche produit où le choix se fait au calme. Deux conditions distinctes : l'absence de survol vise les tablettes, la largeur vise la grille à deux colonnes. */ @media (hover: none) { .alc-atlas .alc-achat { display: none; } .alc-atlas .alc-carte__txt { transform: none; } .alc-atlas .alc-carte__des { opacity: 1; } } @media (max-width: 760px) { .alc-atlas .alc-achat { display: none; } .alc-atlas .alc-carte:hover .alc-carte__txt, .alc-atlas .alc-carte:focus-within .alc-carte__txt { transform: none; } .alc-atlas .alc-carte:hover .alc-carte__des, .alc-atlas .alc-carte:focus-within .alc-carte__des { opacity: 1; } } /* ================================================================ 12 · MOBILE — la fiche devient une feuille coulissante du bas Position fixe, pas de flou d'arrière-plan : l'habillage de la section 13 ne doit jamais déborder ici. ================================================================ */ @media (max-width: 1019px) { .alc-atlas .alc-panneau { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 9; max-height: 84dvh; overflow-y: auto; /* Sans ceci, arriver en bout de course dans la feuille poursuit le défilement de la page derrière : elle file jusqu'au pied et les textes se superposent. */ overscroll-behavior: contain; background: rgba(4, 7, 18, .92); border-radius: 6px 6px 0 0; border-bottom: 0; transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); padding-bottom: env(safe-area-inset-bottom, 0); } .alc-atlas .alc-panneau.is-open { transform: none; } .alc-atlas .alc-panneau__close { display: inline-flex; } /* Le voile est fixe mais ne défile pas : un glissement du doigt dessus irait sinon défiler le document en dessous. */ .alc-atlas .alc-voile.is-on { touch-action: none; overscroll-behavior: none; } } @media (max-width: 760px) { /* Sous 760px seulement, le SVG est plus large que l'écran : la planche redevient défilante au doigt. Au-dessus, elle ne l'est plus — un simple arrondi de largeur fractionnaire y faisait apparaître une barre parasite. */ .alc-atlas .alc-planche { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(201, 204, 217, .28) transparent; } /* La planche se parcourt au doigt : 920px imposaient 2,6 écrans de balayage pour 529px de haut. À 700 il en reste 2, pour 395px. Les noms sont agrandis dans le repère du SVG pour compenser la réduction : ils restent affichés autour de 12px, comme avant. */ /* La constellation s'arrête à l'unité 791 du repère, qui en fait 1240 : le tiers droit ne porte que du décor, laissé libre sur grand écran pour la fiche produit. Au doigt cette fiche est une feuille du bas, ce vide n'a donc plus de raison d'être. On agrandit le SVG au-delà du cadre et on coupe la part inutile, ce qui revient à recadrer sans toucher au viewBox — impossible à faire depuis une media query. */ .alc-atlas .alc-planche__inner { min-width: 463px; overflow: hidden; } /* max-width: none est indispensable : le thème pose img, svg, video { max-width: 100% }, qui plafonnait l'agrandissement à la largeur du cadre et annulait le recadrage en silence. */ .alc-atlas .alc-planche svg { width: 151%; max-width: none; } .alc-atlas .alc-etoile .alc-nom { font-size: 22px; } .alc-atlas .alc-legende { display: none; } .alc-atlas .alc-legende-mobile { display: block; } .alc-atlas .alc-panneau__achat { flex-direction: column; align-items: stretch; } .alc-atlas .alc-panneau__prix { display: flex; align-items: baseline; gap: 12px; } .alc-atlas .alc-panneau__cta { width: 100%; } /* Deux colonnes : une seule carte par écran donnait 4455px de grille pour dix produits. À deux, la carte tombe à 158×211 et la grille à 1093px. */ .alc-atlas .alc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px; } .alc-atlas .alc-carte__txt { padding: 12px; } .alc-atlas .alc-carte__fam { font-size: .52rem; letter-spacing: .16em; margin-bottom: 5px; } .alc-atlas .alc-carte__nom { font-size: 1.15rem; margin-bottom: 3px; } .alc-atlas .alc-carte__phrase { font-size: .68rem; } .alc-atlas .alc-carte__vedette { font-size: .48rem; padding: 3px 7px; top: 8px; left: 8px; } /* Moins de vide au-dessus du sur-titre : 75px se justifient sur un grand écran, pas sur un téléphone où ils coûtent un quart de la hauteur utile. */ main.alc-main .alc-section--paper { padding-top: 32px; } /* Le visuel de la fiche reprend un cadrage panoramique : en 3/2 il mangeait 236px des 685 de la feuille coulissante. */ .alc-atlas .alc-panneau__visuel { aspect-ratio: 16 / 7; } } /* ================================================================ 13 · FICHE POSÉE DANS LA PLANCHE (≥ 1020px) ================================================================ */ @media (min-width: 1020px) { .alc-atlas .alc-panneau { position: absolute; top: 0; right: 44px; width: min(414px, 42%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-color: rgba(201, 204, 217, .40); border-radius: 2px; box-shadow: 0 30px 80px -28px rgba(0, 0, 0, .95); scrollbar-width: thin; scrollbar-color: rgba(201, 204, 217, .3) transparent; -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); /* Repli : sans flou d'arrière-plan, un panneau transparent laisserait le texte à nu sur la carte. Ce fond lisible est la valeur de base… */ background: rgba(4, 7, 18, .82); } /* …et la transparence n'arrive qu'ici, où le flou est réellement géré. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .alc-atlas .alc-panneau { background: rgba(4, 7, 18, 0); } } .alc-atlas .alc-panneau::-webkit-scrollbar { width: 4px; } .alc-atlas .alc-panneau::-webkit-scrollbar-thumb { background: rgba(201, 204, 217, .3); } } /* ================================================================ 14 · MODES SYSTÈME ================================================================ */ /* Gardent leurs couleurs exactes quel que soit le mode sombre. */ .alc-atlas .alc-h1, .alc-atlas .alc-format:has(input:checked), .alc-atlas .alc-format.is-choisi, .alc-atlas .alc-panneau__cta { color-scheme: only light; forced-color-adjust: none; } /* Tactile en mode sombre : titre en argent lustré, le dégradé découpé y étant mal rendu. */ @media (hover: none) and (prefers-color-scheme: dark) { .alc-atlas .alc-h1 { background: none !important; animation: none; color: #eef2fb; -webkit-text-fill-color: #eef2fb; text-shadow: 0 1px 0 rgba(255, 255, 255, .45), 0 -1px 0 rgba(35, 45, 85, .75), 0 4px 14px rgba(150, 170, 230, .38); } } @media (prefers-reduced-motion: reduce) { .alc-atlas .alc-etoile { animation-duration: .01s; } .alc-atlas .alc-etoile .alc-scintille, .alc-atlas .alc-h1 { animation: none !important; } .alc-atlas .alc-etoile.is-focus .alc-anneau { animation: none; } .alc-atlas .alc-filante { display: none; } .alc-atlas .alc-panneau, .alc-atlas .alc-voile { transition: none !important; } }.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}.wp-block-uagb-advanced-heading h1,.wp-block-uagb-advanced-heading h2,.wp-block-uagb-advanced-heading h3,.wp-block-uagb-advanced-heading h4,.wp-block-uagb-advanced-heading h5,.wp-block-uagb-advanced-heading h6,.wp-block-uagb-advanced-heading p,.wp-block-uagb-advanced-heading div{word-break:break-word}.wp-block-uagb-advanced-heading .uagb-heading-text{margin:0}.wp-block-uagb-advanced-heading .uagb-desc-text{margin:0}.wp-block-uagb-advanced-heading .uagb-separator{font-size:0;border-top-style:solid;display:inline-block;margin:0 0 10px 0}.wp-block-uagb-advanced-heading .uagb-highlight{color:#f78a0c;border:0;transition:all .3s ease}.uag-highlight-toolbar{border-left:0;border-top:0;border-bottom:0;border-radius:0;border-right-color:#1e1e1e}.uag-highlight-toolbar .components-button{border-radius:0;outline:none}.uag-highlight-toolbar .components-button.is-primary{color:#fff}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02.wp-block-uagb-advanced-heading .uagb-heading-text{color: var(--ast-global-color-2);}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02 .uagb-heading-text{font-weight: 400;font-size: 24px;line-height: 1em;}@media only screen and (max-width: 976px) {.wp-block-uagb-advanced-heading.uagb-block-b05aeb02 .uagb-heading-text{font-size: 24px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-advanced-heading.uagb-block-b05aeb02.wp-block-uagb-advanced-heading {text-align: center;}.wp-block-uagb-advanced-heading.uagb-block-b05aeb02 .uagb-heading-text{font-size: 24px;}}.uagb-ifb-content>svg *{-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}.uagb-ifb-content>svg,.uagb-ifb-content{display:inline-block}.uagb-ifb-content>svg{vertical-align:middle;width:inherit;height:inherit;font-style:initial}.uagb-ifb-content .uagb-ifb-icon-wrap svg{box-sizing:content-box;width:inherit;height:inherit}.uagb-ifb-button-wrapper:empty{display:none}div.uagb-ifb-button-wrapper a.uagb-infobox-cta-link,div.uagb-ifb-cta a.uagb-infobox-cta-link,.entry .entry-content a.uagb-infobox-cta-link,a.uagb-infobox-link-wrap,.entry .entry-content a.uagb-infobox-link-wrap{text-decoration:none;align-items:center}.uagb-infobox-icon-left-title.uagb-infobox-image-valign-middle .uagb-ifb-title-wrap,.uagb-infobox-icon-right-title.uagb-infobox-image-valign-middle .uagb-ifb-title-wrap,.uagb-infobox-image-valign-middle .uagb-ifb-icon-wrap,.uagb-infobox-image-valign-middle .uagb-ifb-image-content,.uagb-infobox-icon-left.uagb-infobox-image-valign-middle .uagb-ifb-content,.uagb-infobox-icon-right.uagb-infobox-image-valign-middle .uagb-ifb-content{-ms-flex-item-align:center;-webkit-align-self:center;align-self:center}.uagb-infobox-icon-left-title.uagb-infobox-image-valign-top .uagb-ifb-title-wrap,.uagb-infobox-icon-right-title.uagb-infobox-image-valign-top .uagb-ifb-title-wrap,.uagb-infobox-image-valign-top .uagb-ifb-icon-wrap,.uagb-infobox-image-valign-top .uagb-ifb-image-content,.uagb-infobox-icon-left.uagb-infobox-image-valign-top .uagb-ifb-content,.uagb-infobox-icon-right.uagb-infobox-image-valign-top .uagb-ifb-content{-webkit-align-self:self-start;align-self:self-start}.uagb-infobox-left{justify-content:flex-start;text-align:left;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start}.uagb-infobox-center{justify-content:center;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-box-pack:center}.uagb-infobox-right{justify-content:flex-end;text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end}.uagb-infobox-icon-above-title.uagb-infobox__content-wrap,.uagb-infobox-icon-below-title.uagb-infobox__content-wrap{display:block;width:100%}.uagb-infobox-icon-left-title .uagb-ifb-content>svg,.uagb-infobox-icon-left .uagb-ifb-content>svg{margin-right:10px}.uagb-infobox-icon-right-title .uagb-ifb-content>svg,.uagb-infobox-icon-right .uagb-ifb-content>svg{margin-left:10px}.uagb-infobox-icon-left.uagb-infobox__content-wrap,.uagb-infobox-icon-right.uagb-infobox__content-wrap,.uagb-infobox-icon-left-title .uagb-ifb-left-title-image,.uagb-infobox-icon-right-title .uagb-ifb-right-title-image{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:-moz-box;display:flex;-js-display:flex}.uagb-infobox-icon-left-title .uagb-ifb-left-title-image .uagb-ifb-image-content,.uagb-infobox-icon-right-title .uagb-ifb-right-title-image .uagb-ifb-image-content,.uagb-infobox-icon-left .uagb-ifb-image-content,.uagb-infobox-icon-right .uagb-ifb-image-content{flex-shrink:0;line-height:0}.uagb-infobox-icon-left-title .uagb-ifb-left-title-image .uagb-ifb-title-wrap,.uagb-infobox-icon-right-title .uagb-ifb-right-title-image .uagb-ifb-title-wrap,.uagb-infobox-icon-left .uagb-ifb-content,.uagb-infobox-icon-right .uagb-ifb-content{flex-grow:1}.uagb-infobox-icon-right.uagb-infobox__content-wrap,.uagb-infobox-icon-right-title .uagb-ifb-right-title-image{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;justify-content:flex-end}.uagb-ifb-content img{position:relative;display:inline-block;line-height:0;width:auto;height:auto !important;max-width:100%;border-radius:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-border-radius:inherit}.uagb-infobox-module-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;width:100%;height:100%}.uagb-edit-mode .uagb-infobox-module-link{z-index:2}.uagb-infobox-link-icon-after{margin-right:0;margin-left:5px}.uagb-infobox-link-icon-before{margin-right:5px;margin-left:0}.uagb-infobox-link-icon{-webkit-transition:all 200ms linear;transition:all 200ms linear}.uagb-infobox__content-wrap{box-sizing:border-box;position:relative;width:100%;word-break:break-word;z-index:1}.uagb-ifb-separator{display:inline-block;margin:0;border-top-color:#333;border-top-style:solid;border-top-width:2px;line-height:0}.uagb-ifb-button-wrapper{line-height:1}.uagb-ifb-button-wrapper.uagb-ifb-button-type-text .uagb-infobox-cta-link.wp-block-button__link{background-color:unset;border:none}.uagb-ifb-button-wrapper.uagb-ifb-button-type-text .uagb-infobox-cta-link.wp-block-button__link:hover{background-color:unset;border-color:unset}.uagb-ifb-button-wrapper .uagb-infobox-cta-link{cursor:pointer}.uagb-ifb-button-wrapper .uagb-infobox-cta-link.wp-block-button__link{width:auto}.uagb-ifb-button-wrapper .wp-block-button__link svg,.uagb-ifb-button-wrapper .ast-outline-button svg{fill:currentColor}.uagb-infobox__content-wrap a{-webkit-box-shadow:none;box-shadow:none;text-decoration:none}.uagb-ifb-title-wrap{width:100%}.uagb-ifb-title{margin-block-start:0}.uagb-ifb-title-wrap .uagb-ifb-title-prefix{display:block;padding:0;margin:0}.uagb-infobox__content-wrap.uagb-infobox__content-wrap{position:relative}.uagb-ifb-content{width:100%}.uagb-infobox__content-wrap.uagb-infobox,.uagb-ifb-content,.uagb-ifb-title-wrap,.uagb-ifb-title-prefix *,svg.dashicon.dashicons-upload{z-index:1}a.uagb-infobox-link-wrap{color:inherit}.uagb-ifb-content p:empty{display:none}.uagb-infobox__content-wrap .uagb-ifb-content img{display:inline-block;max-width:100%}.uagb-infobox__content-wrap .uagb-ifb-content svg{display:inline-block}.uagb-infobox__content-wrap .uagb-ifb-icon-wrap,.uagb-infobox-icon-left .uagb-ifb-image-content,.uagb-infobox-icon-right .uagb-ifb-image-content{box-sizing:content-box}.uagb-infobox-cta-link>svg{vertical-align:middle;width:15px;height:15px;font-size:15px}.uagb-infobox-cta-link{display:inline-flex}.block-editor-page #wpwrap .uagb-infobox-cta-link svg,.uagb-infobox-cta-link svg{font-style:normal}.uagb-infobox-icon-left-title .uagb-ifb-icon-wrap,.uagb-infobox-icon-left .uagb-ifb-icon-wrap{margin-right:10px;line-height:0}.uagb-infobox-icon-right-title .uagb-ifb-icon-wrap,.uagb-infobox-icon-right .uagb-ifb-icon-wrap{margin-left:10px;line-height:0}html[dir=rtl] .uagb-infobox-icon-left-title .uagb-ifb-icon-wrap,html[dir=rtl] .uagb-infobox-icon-left .uagb-ifb-icon-wrap{margin-left:10px;line-height:0}html[dir=rtl] .uagb-infobox-icon-right-title .uagb-ifb-icon-wrap,html[dir=rtl] .uagb-infobox-icon-right .uagb-ifb-icon-wrap{margin-right:10px;line-height:0}html[dir=rtl] .uagb-infobox-left{justify-content:flex-end;text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end}html[dir=rtl] .uagb-infobox-right{justify-content:flex-start;text-align:left;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start}.uagb-infobox-icon-left .uagb-ifb-left-right-wrap,.uagb-infobox-icon-right .uagb-ifb-left-right-wrap,.uagb-infobox-icon-left-title .uagb-ifb-left-title-image,.uagb-infobox-icon-right-title .uagb-ifb-right-title-image{display:-webkit-box;display:-ms-flexbox;display:flex}.uagb-infobox-icon-right .uagb-ifb-left-right-wrap,.uagb-infobox-icon-right-title .uagb-ifb-right-title-image{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;justify-content:flex-end}a.uagb-infbox__link-to-all{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;box-shadow:none;text-decoration:none;-webkit-box-shadow:none}@media only screen and (max-width: 976px){.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap .uagb-ifb-image-content{padding:0;margin-bottom:20px}.uagb-infobox-stacked-tablet.uagb-reverse-order-tablet.uagb-infobox__content-wrap{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:-moz-inline-box;display:inline-flex;flex-direction:column-reverse;-js-display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;-moz-box-orient:vertical;-moz-box-direction:reverse}.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap .uagb-ifb-content,.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap .uagb-ifb-icon-wrap,.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap .uagb-ifb-image-content{display:block;width:100%;text-align:center}.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap .uagb-ifb-icon-wrap,.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap .uagb-ifb-image-content{margin-right:0;margin-left:0}.uagb-infobox-stacked-tablet.uagb-infobox__content-wrap{display:inline-block}.uagb-infobox-icon-left-title.uagb-infobox-stacked-tablet .uagb-ifb-image-content,.uagb-infobox-icon-left-title.uagb-infobox-stacked-tablet .uagb-ifb-icon-wrap,.uagb-infobox-icon-left.uagb-infobox-stacked-tablet .uagb-ifb-image-content,.uagb-infobox-icon-left.uagb-infobox-stacked-tablet .uagb-ifb-icon-wrap{margin-right:0}.uagb-infobox-icon-right-title.uagb-infobox-stacked-tablet .uagb-ifb-image-content,.uagb-infobox-icon-right-title.uagb-infobox-stacked-tablet .uagb-ifb-icon-wrap,.uagb-infobox-icon-right.uagb-infobox-stacked-tablet .uagb-ifb-image-content,.uagb-infobox-icon-right.uagb-infobox-stacked-tablet .uagb-ifb-icon-wrap{margin-left:0}.uagb-infobox-icon-left-title .uagb-ifb-separator{margin:10px 0}}@media screen and (max-width: 767px){.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap{display:inline-block}.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap .uagb-ifb-image-content,.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap .uagb-ifb-icon-wrap{padding:0;margin-bottom:20px;margin-right:0;margin-left:0}.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap.uagb-reverse-order-mobile{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:-moz-inline-box;display:inline-flex;flex-direction:column-reverse;-js-display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;-moz-box-orient:vertical;-moz-box-direction:reverse}.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap .uagb-ifb-image-content,.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap .uagb-ifb-icon-wrap,.uagb-infobox-stacked-mobile.uagb-infobox__content-wrap .uagb-ifb-content{display:block;width:100%;text-align:center}.uagb-infobox-icon-left-title.uagb-infobox-stacked-mobile .uagb-ifb-image-content,.uagb-infobox-icon-left-title.uagb-infobox-stacked-mobile .uagb-ifb-icon-wrap,.uagb-infobox-icon-left.uagb-infobox-stacked-mobile .uagb-ifb-image-content,.uagb-infobox-icon-left.uagb-infobox-stacked-mobile .uagb-ifb-icon-wrap{margin-right:0}.uagb-infobox-icon-right-title.uagb-infobox-stacked-mobile .uagb-ifb-image-content,.uagb-infobox-icon-right-title.uagb-infobox-stacked-mobile .uagb-ifb-icon-wrap,.uagb-infobox-icon-right.uagb-infobox-stacked-mobile .uagb-ifb-image-content,.uagb-infobox-icon-right.uagb-infobox-stacked-mobile .uagb-ifb-icon-wrap{margin-left:0}.uagb-infobox-icon-left-title .uagb-ifb-separator{margin:10px 0}}.uagb-ifb-icon svg{width:inherit;height:inherit;vertical-align:middle}.uagb-ifb-button-icon{height:15px;width:15px;font-size:15px;vertical-align:middle}.uagb-ifb-button-icon svg{height:inherit;width:inherit;display:inline-block}.uagb-ifb-button-icon.uagb-ifb-align-icon-after{float:right}.uagb-ifb-cta-button{display:inline-block}.uagb-disable-link{pointer-events:none}@media only screen and (min-width: 977px){.uagb-infobox-margin-wrapper{display:flex}}.uagb-ifb-content .uagb-ifb-desc p:last-child{margin-bottom:0}html[dir=rtl] .uagb-infobox-icon-left-title .uagb-ifb-content>svg,html[dir=rtl] .uagb-infobox-icon-left .uagb-ifb-content>svg{margin-right:0;margin-left:10px}html[dir=rtl] .uagb-infobox-icon-right-title .uagb-ifb-content>svg,html[dir=rtl] .uagb-infobox-icon-right .uagb-ifb-content>svg{margin-left:0;margin-right:10px}html[dir=rtl] .uagb-infobox-link-icon-after{margin-right:5px;margin-left:0}html[dir=rtl] .uagb-infobox-link-icon-before{margin-right:0;margin-left:5px}html[dir=rtl] .uagb-ifb-button-icon.uagb-ifb-align-icon-after{float:left}.uagb-block-a565c64a .uagb-ifb-icon{width: 30px;line-height: 30px;}.uagb-block-a565c64a .uagb-ifb-icon > span{font-size: 30px;width: 30px;line-height: 30px;color: #333;}.uagb-block-a565c64a .uagb-ifb-icon svg{fill: #333;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-icon-wrap svg{width: 30px;height: 30px;line-height: 30px;font-size: 30px;color: #333;fill: #333;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-icon-wrap svg{line-height: 30px;font-size: 30px;color: #333;fill: #333;}.uagb-block-a565c64a .uagb-iconbox-icon-wrap{margin: auto;display: inline-flex;align-items: center;justify-content: center;box-sizing: content-box;width: 30px;height: 30px;line-height: 30px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-icon-wrap > svg{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-icon-wrap > svg{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-left-title-image svg{width: 30px;line-height: 30px;font-size: 30px;color: #333;fill: #333;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-right-title-image svg{width: 30px;line-height: 30px;font-size: 30px;color: #333;fill: #333;}.uagb-block-a565c64a .uagb-infobox__content-wrap .uagb-ifb-imgicon-wrap{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;}.uagb-block-a565c64a .uagb-infobox .uagb-ifb-image-content img{border-radius: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap img{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;border-radius: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-right-title-image > img{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;border-radius: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-left-title-image > img{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;border-radius: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content > img{padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;border-radius: 0px;}.uagb-block-a565c64a .uagb-ifb-title-wrap .uagb-ifb-title-prefix{color: #ffffff;margin-bottom: 14px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a .uagb-ifb-title{color: #ffffff;margin-bottom: 14px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a .uagb-ifb-desc{color: #ffffff;margin-bottom: 40px;margin-top: 0px;margin-left: 40px;margin-right: 40px;}.uagb-block-a565c64a .uagb-ifb-separator{width: 30%;border-top-width: 2px;border-top-color: #333;border-top-style: solid;margin-bottom: 0px;}.uagb-block-a565c64a .uagb-infobox__content-wrap .uagb-ifb-separator{width: 30%;border-top-width: 2px;border-top-color: #333;border-top-style: solid;}.uagb-block-a565c64a .uagb-ifb-align-icon-after{margin-left: 5px;}.uagb-block-a565c64a .uagb-ifb-align-icon-before{margin-right: 5px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content svg{box-sizing: content-box;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content img{box-sizing: content-box;}.uagb-block-a565c64a .uagb-infobox__content-wrap{text-align: center;}.uagb-block-a565c64a.uagb-infobox-icon-above-title{text-align: center;}.uagb-block-a565c64a.uagb-infobox__content-wrap:not(.wp-block-uagb-info-box--has-margin){padding-top: 0%;padding-right: 16%;padding-bottom: 0%;padding-left: 16%;}.uagb-block-a565c64a.uagb-infobox__content-wrap.wp-block-uagb-info-box--has-margin .uagb-infobox-margin-wrapper{padding-top: 0%;padding-right: 16%;padding-bottom: 0%;padding-left: 16%;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-infobox-cta-link > svg {margin-left: 5px;}[dir=rtl] .uagb-block-a565c64a .uagb-iconbox-icon-wrap{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-icon-wrap > svg{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-icon-wrap > svg{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap img{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-right-title-image > img{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-left-title-image > img{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content > img{padding-right: 0px;padding-left: 0px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap{text-align: center;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox-icon-above-title{text-align: center;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-infobox-cta-link > svg{margin-right: 5px;margin-left: 0px;}@media only screen and (max-width: 976px) {.uagb-block-a565c64a .uagb-ifb-title-wrap .uagb-ifb-title-prefix{margin-bottom: 12px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a .uagb-ifb-title{margin-bottom: 12px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a .uagb-ifb-desc{margin-bottom: 24px;margin-top: 0px;margin-left: 60px;margin-right: 60px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-icon-wrap > svg{width: 30px;height: 30px;line-height: 30px;font-size: 30px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-icon-wrap > svg{line-height: 30px;font-size: 30px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content img{box-sizing: content-box;}.uagb-block-a565c64a .uagb-ifb-icon{width: 30px;line-height: 30px;}.uagb-block-a565c64a .uagb-ifb-icon > span{font-size: 30px;width: 30px;line-height: 30px;}.uagb-block-a565c64a .uagb-iconbox-icon-wrap{width: 30px;height: 30px;line-height: 30px;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-left-title-image > svg{width: 30px;line-height: 30px;font-size: 30px;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-right-title-image > svg{width: 30px;line-height: 30px;font-size: 30px;}.uagb-block-a565c64a.uagb-infobox__content-wrap:not(.wp-block-uagb-info-box--has-margin){padding-top: 0%;padding-right: 0%;padding-bottom: 0%;padding-left: 0%;}.uagb-block-a565c64a.uagb-infobox__content-wrap.wp-block-uagb-info-box--has-margin .uagb-infobox-margin-wrapper{padding-top: 0%;padding-right: 0%;padding-bottom: 0%;padding-left: 0%;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-infobox-cta-link > svg {margin-left: 5px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-infobox-cta-link > svg{margin-right: 5px;margin-left: 0px;}}@media only screen and (max-width: 767px) {.uagb-block-a565c64a .uagb-ifb-title-wrap .uagb-ifb-title-prefix{margin-bottom: 12px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a .uagb-ifb-title{margin-bottom: 12px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a .uagb-ifb-desc{margin-bottom: 24px;margin-top: 0px;margin-left: 0px;margin-right: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-icon-wrap > svg{width: 30px;height: 30px;line-height: 30px;font-size: 30px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-icon-wrap > svg{line-height: 30px;font-size: 30px;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-left-title-image > svg{width: 30px;line-height: 30px;font-size: 30px;}.uagb-block-a565c64a .uagb-ifb-content .uagb-ifb-right-title-image > svg{width: 30px;line-height: 30px;font-size: 30px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-ifb-content img{box-sizing: content-box;}.uagb-block-a565c64a .uagb-ifb-icon{width: 30px;line-height: 30px;}.uagb-block-a565c64a .uagb-ifb-icon > span{font-size: 30px;width: 30px;line-height: 30px;}.uagb-block-a565c64a .uagb-iconbox-icon-wrap{width: 30px;height: 30px;line-height: 30px;}.uagb-block-a565c64a.uagb-infobox__content-wrap:not(.wp-block-uagb-info-box--has-margin){padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap.wp-block-uagb-info-box--has-margin .uagb-infobox-margin-wrapper{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-infobox-cta-link > svg {margin-left: 5px;}[dir=rtl] .uagb-block-a565c64a.uagb-infobox__content-wrap .uagb-infobox-cta-link > svg{margin-right: 5px;margin-left: 0px;}}