/* LiveEdit — états d'animation au défilement. Masqué seulement hors édition. */ body:not(.le-editing) [data-anim]{opacity:0;transition:opacity .62s cubic-bezier(.2,0,0,1),transform .62s cubic-bezier(.2,0,0,1);will-change:opacity,transform} body:not(.le-editing) [data-anim="fade"]{transform:none} body:not(.le-editing) [data-anim="up"]{transform:translateY(28px)} body:not(.le-editing) [data-anim="down"]{transform:translateY(-28px)} body:not(.le-editing) [data-anim="left"]{transform:translateX(28px)} body:not(.le-editing) [data-anim="right"]{transform:translateX(-28px)} body:not(.le-editing) [data-anim="zoom"]{transform:scale(.94)} body:not(.le-editing) [data-anim].le-in{opacity:1;transform:none} /* ===== Défilement fluide (Réglages → Défilement) ===== La classe est posée sur par reveal.js quand — et seulement quand — l'option est active. scroll-behavior:smooth (posé par beaucoup de thèmes, dont Core Framework) est alors neutralisé : sans cela, chaque window.scrollTo de la boucle de lissage déclenche une animation native que la suivante annule, et la page cesse complètement d'avancer. !important parce qu'une règle de thème l'est souvent aussi. */ html.le-smooth,html.le-smooth body{scroll-behavior:auto!important} /* ===== Accordéon (details/summary natif, icône +/− animée) ===== */ .le-accordion{width:100%} /* Séparateurs : un simple trait SOUS chaque panneau (border-bottom), jamais au-dessus du premier — l'accordéon ne s'encadre plus tout seul. Trois variantes au choix, posées en classe sur la racine : « entre les panneaux » (rien sous le dernier), « bordure complète » (vraie bordure sur les 4 côtés, qui suit le rayon des coins) et « aucun ». */ .le-acc-item{border-bottom:var(--le-acc-div-w,1px) var(--le-acc-div-s,solid) var(--le-acc-div,rgba(128,128,128,.28));background:var(--le-acc-item-bg,transparent);border-radius:var(--le-acc-item-r,0)} .le-acc-div-between .le-acc-item:last-child{border-bottom:0} .le-acc-div-box .le-acc-item{border:var(--le-acc-div-w,1px) var(--le-acc-div-s,solid) var(--le-acc-div,rgba(128,128,128,.28))} .le-acc-div-none .le-acc-item{border:0} .le-acc-item+.le-acc-item{margin-top:var(--le-acc-gap,0px)} /* Espace du titre : une boîte 4 côtés (--le-acc-head-pt/-pr/-pb/-pl) comme partout ailleurs dans le builder. Les deux valeurs communes --le-acc-head-py / -px sont le repli des accordéons créés avant cette boîte (et 19px / 2px à défaut de tout réglage). Rayon : celui du panneau (--le-acc-item-r) sauf si un rayon propre au titre est réglé (--le-acc-head-r) — auquel cas il vaut aussi pour le panneau OUVERT, dont les coins bas restaient carrés pour se souder au contenu. */ .le-acc-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:var(--le-acc-head-pt,var(--le-acc-head-py,19px));padding-right:var(--le-acc-head-pr,var(--le-acc-head-px,2px));padding-bottom:var(--le-acc-head-pb,var(--le-acc-head-py,19px));padding-left:var(--le-acc-head-pl,var(--le-acc-head-px,2px));cursor:pointer;list-style:none;user-select:none;font-weight:var(--le-acc-head-w,600);font-size:var(--le-acc-head-s,inherit);color:var(--le-acc-head-c,inherit);background:var(--le-acc-head-bg,transparent);border-radius:var(--le-acc-head-r,var(--le-acc-item-r,0));transition:color .18s ease,background-color .18s ease,opacity .18s ease} .le-acc-head::-webkit-details-marker{display:none} .le-acc-head:hover{opacity:var(--le-acc-head-hop,.8);color:var(--le-acc-head-hc,var(--le-acc-head-c,inherit));background:var(--le-acc-head-hbg,var(--le-acc-head-bg,transparent))} .le-acc-item[open]>.le-acc-head{color:var(--le-acc-open-c,var(--le-acc-head-c,inherit));background:var(--le-acc-open-bg,var(--le-acc-head-bg,transparent));border-bottom-left-radius:var(--le-acc-head-r,0);border-bottom-right-radius:var(--le-acc-head-r,0)} /* Icône : DEUX boîtes. L'extérieure (.le-acc-ico) est la pastille — fond, arrondi et espace autour ; l'intérieure (.le-acc-ico-i) est le glyphe à la taille demandée. Le glyphe est dessiné en pseudo-éléments (barres ＋/− ou chevron) tant qu'il est VIDE ; dès qu'une icône est choisie (SVG injecté dedans), les barres disparaissent d'elles-mêmes grâce à :empty. */ .le-acc-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;width:var(--le-acc-ico-s,12px);height:var(--le-acc-ico-s,12px);padding:var(--le-acc-ico-p,0px);background:var(--le-acc-ico-bg,transparent);border-radius:var(--le-acc-ico-r,0);color:var(--le-acc-ico-c,currentColor);transition:background-color .18s ease,color .18s ease} .le-acc-ico-i{position:relative;display:block;width:100%;height:100%;transition:transform .28s cubic-bezier(.2,0,0,1)} .le-acc-ico-i>svg{display:block;width:100%;height:100%} .le-acc-ico-i:empty::before,.le-acc-ico-i:empty::after{content:"";position:absolute;left:0;top:calc(50% - 1px);width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.2,0,0,1)} .le-acc-ico-i:empty::after{transform:rotate(90deg)} .le-acc-item[open]>.le-acc-head .le-acc-ico-i:empty::after{transform:rotate(0deg)} /* Icône choisie : elle ne se transforme pas en − à l'ouverture, on lui applique la rotation demandée (aucune par défaut) — de quoi retourner un chevron ou une flèche. */ .le-acc-item[open]>.le-acc-head .le-acc-ico-i{transform:rotate(var(--le-acc-ico-rot,0deg))} /* Variante chevron (classe le-acc-chevron sur la racine) : deux demi-barres formant un ∨ qui bascule en ∧ à l'ouverture — mêmes pseudo-éléments, seules positions/rotations changent. */ .le-acc-chevron .le-acc-ico-i:empty::before{width:62%;left:0;transform:rotate(45deg)} .le-acc-chevron .le-acc-ico-i:empty::after{width:62%;left:auto;right:0;transform:rotate(-45deg)} .le-acc-chevron .le-acc-item[open]>.le-acc-head .le-acc-ico-i:empty::before{transform:rotate(-45deg)} .le-acc-chevron .le-acc-item[open]>.le-acc-head .le-acc-ico-i:empty::after{transform:rotate(45deg)} /* Contenu : même boîte 4 côtés que le titre (--le-acc-body-pt/-pr/-pb/-pl), avec les anciennes valeurs communes --le-acc-body-py / -px en repli. Rayon propre au contenu si réglé (--le-acc-body-r), sinon les seuls coins BAS du panneau, comme avant. */ .le-acc-body{padding-top:var(--le-acc-body-pt,var(--le-acc-body-py,2px));padding-right:var(--le-acc-body-pr,var(--le-acc-body-px,2px));padding-bottom:var(--le-acc-body-pb,var(--le-acc-body-py,22px));padding-left:var(--le-acc-body-pl,var(--le-acc-body-px,2px));opacity:var(--le-acc-body-op,.82);line-height:1.7;max-width:var(--le-acc-body-mw,70ch);color:var(--le-acc-body-c,inherit);background:var(--le-acc-body-bg,transparent);border-radius:var(--le-acc-body-r,0 0 var(--le-acc-item-r,0) var(--le-acc-item-r,0))} /* ===== Galerie ===== */ .le-gallery{display:grid;gap:var(--le-gal-gap,14px)} .le-gal-c1{grid-template-columns:1fr} .le-gal-c2{grid-template-columns:repeat(2,minmax(0,1fr))} .le-gal-c3{grid-template-columns:repeat(3,minmax(0,1fr))} .le-gal-c4{grid-template-columns:repeat(4,minmax(0,1fr))} .le-gal-c5{grid-template-columns:repeat(5,minmax(0,1fr))} .le-gal-c6{grid-template-columns:repeat(6,minmax(0,1fr))} .le-gal-item{margin:0} .le-gal-item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--le-gal-pos,center);border-radius:10px;display:block} /* Curseur normal (pointer) au survol : indique juste que c'est cliquable, pas une loupe. */ .le-gal-lb .le-gal-item img{cursor:pointer;transition:opacity .2s cubic-bezier(.2,0,0,1)} .le-gal-lb .le-gal-item img:hover{opacity:.85} @media(max-width:700px){.le-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ===== Lightbox ===== */ .le-lb{position:fixed;inset:0;z-index:100200;background:rgba(8,9,11,.93);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s cubic-bezier(.2,0,0,1);font-family:Inter,-apple-system,sans-serif} .le-lb.on{opacity:1} .le-lb-img{max-width:88vw;max-height:84vh;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.6)} .le-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:9999px;border:1px solid rgba(255,255,255,.25);background:rgba(20,22,26,.6);color:#fff;cursor:pointer;font-size:26px;line-height:1;padding:0;transition:background .15s} .le-lb-btn:hover{background:rgba(255,255,255,.16)} .le-lb-x{top:22px;right:22px;font-size:17px} .le-lb-p{left:22px;top:50%;transform:translateY(-50%)} .le-lb-n{right:22px;top:50%;transform:translateY(-50%)} .le-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.72);font:600 12px/1 Inter,sans-serif;letter-spacing:.1em} /* ===== Icône ===== */ /* Couleur : par défaut currentColor → l'icône suit la couleur de texte du parent (bouton/lien) et change donc automatiquement au survol de celui-ci. Un survol propre à l'icône (couleur / fond) est possible via les variables --le-ic-h / --le-ic-bgh. */ .le-icon{display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;width:var(--le-ic-size,28px);height:var(--le-ic-size,28px);padding:var(--le-ic-pad,0);color:var(--le-ic,currentColor);background:var(--le-ic-bg,transparent);border-radius:var(--le-ic-r,0);transition:color .22s cubic-bezier(.2,0,0,1),background-color .22s cubic-bezier(.2,0,0,1);vertical-align:middle;line-height:0} .le-icon:hover{color:var(--le-ic-h,var(--le-ic,currentColor));background:var(--le-ic-bgh,var(--le-ic-bg,transparent))} .le-icon svg{width:100%;height:100%;display:block} a.le-icon{text-decoration:none} /* Icône DANS un bouton / lien (à côté du libellé). Taille relative au texte (1em), couleur héritée (currentColor) → suit la couleur et le survol de l'élément parent. */ .le-has-ico{display:inline-flex;align-items:center;gap:.5em} .le-btn-ico{display:inline-flex;flex:none;line-height:0} .le-btn-ico svg{width:1em;height:1em;display:block} /* ===== Carrousel — glissement fluide (transform) ou fondu (opacité), boucle infinie ===== Le « hublot » (overflow:hidden + coins arrondis) est sur .le-carousel, qui ne bouge JAMAIS ; seul .le-car-track (à l'intérieur) reçoit le transform qui fait glisser les diapos. Mettre overflow:hidden ET le transform sur le même élément déplacerait le hublot avec son contenu — plus rien ne serait visible (c'était le bug). */ /* Espacement entre diapos (--le-car-gap, réglable dans le panneau, défaut 16px), format d'image (--le-car-aspect) et vitesse de transition (--le-car-speed) pilotés par variables. */ .le-carousel{position:relative;overflow:hidden;border-radius:10px} .le-carousel:focus-visible{outline:2px solid rgba(110,160,255,.7);outline-offset:2px} .le-carousel:not([data-le-mode="fade"]) .le-car-track{display:flex;gap:var(--le-car-gap,16px)} .le-carousel:not([data-le-mode="fade"]) .le-car-slide{flex:0 0 calc((100% - (var(--le-pv,1) - 1)*var(--le-car-gap,16px))/var(--le-pv,1));min-width:0} .le-carousel[data-le-drag] .le-car-track{cursor:grab} .le-car-track.le-car-dragging{cursor:grabbing;user-select:none} .le-car-track.le-car-dragging img{pointer-events:none} .le-carousel[data-le-mode="fade"] .le-car-track{display:grid} .le-carousel[data-le-mode="fade"] .le-car-slide{grid-area:1/1;opacity:0;transition:opacity var(--le-car-speed,.7s) ease;pointer-events:none} .le-carousel[data-le-mode="fade"] .le-car-slide.le-car-active{opacity:1;pointer-events:auto} .le-car-slide img{width:100%;aspect-ratio:var(--le-car-aspect,16/9);object-fit:cover;object-position:var(--le-car-pos,center);border-radius:10px;display:block} /* Format « auto » : l'image garde ses proportions naturelles (pas de recadrage). */ .le-carousel[style*="--le-car-aspect:auto"] .le-car-slide img,.le-carousel[style*="--le-car-aspect: auto"] .le-car-slide img{aspect-ratio:auto;object-fit:contain} /* Sans boucle infinie : flèche estompée quand on est au début / à la fin. */ .le-car-btn.le-car-dim{opacity:.35;pointer-events:none} .le-car-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:9999px;border:1px solid rgba(255,255,255,.28);background:rgba(15,17,20,.55);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s;z-index:2} .le-car-btn:hover{background:rgba(15,17,20,.85)} .le-car-prev{left:14px} .le-car-next{right:14px} .le-car-prev::before,.le-car-next::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;display:block} .le-car-prev::before{transform:rotate(45deg);margin-left:3px} .le-car-next::before{transform:rotate(-135deg);margin-right:3px} /* Flèches custom (« Classes CSS des flèches ») : le style décoratif par défaut est neutralisé — rond sombre, bordure, chevron ::before — pour laisser les classes de l'utilisateur contrôler tout le visuel. Le positionnement (absolu, centré verticalement, gauche/droite) est conservé, surchargeable par ces mêmes classes au besoin. */ .le-car-btn.le-car-custom{width:auto;height:auto;border:0;border-radius:0;background:none;backdrop-filter:none;color:inherit} .le-car-btn.le-car-custom:hover{background:none} .le-car-custom.le-car-prev::before,.le-car-custom.le-car-next::before{content:none} /* Flèches SOUS le carrousel (option « Position des flèches ») : rangée en flux normal après la piste, alignée à gauche / centrée / à droite. On neutralise le positionnement absolu et le centrage vertical des flèches superposées ; le reste du style (rond, chevron, ou classes custom) est inchangé. */ .le-car-nav{display:flex;gap:10px;margin-top:14px} .le-car-nav-left{justify-content:flex-start} .le-car-nav-center{justify-content:center} .le-car-nav-right{justify-content:flex-end} .le-car-nav .le-car-btn{position:static;transform:none;left:auto;right:auto} /* La rangée de pastilles est le DERNIER enfant de .le-carousel, qui porte le hublot (overflow:hidden) : tout ce qui dépasse de sa boîte est rogné. Or la pastille active est agrandie par transform:scale(1.3) — un effet purement visuel, qui ne réserve aucune place dans la mise en page : elle débordait donc d'environ 1 px sous le bord du hublot, et s'y faisait couper. Le contour de focus au clavier, lui, débordait de plus encore. D'où cette réserve en bas, calculée pour les deux (la pastille agrandie et son contour de focus). */ .le-car-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;padding-bottom:4px} .le-car-dot{width:7px;height:7px;border-radius:9999px;border:0;background:rgba(128,128,128,.45);cursor:pointer;padding:0;transition:all .2s cubic-bezier(.2,0,0,1)} .le-car-dot.on{background:currentColor;transform:scale(1.3)} /* Repli générique « 1 image sur mobile » — désactivé (:not) dès que le carrousel a sa propre surcharge « Images visibles » par breakpoint (data-le-pv-resp, media queries .ler-… dédiées). */ @media(max-width:700px){.le-carousel:not([data-le-pv-resp]){--le-pv:1!important}} /* ===== Vidéo (élément) : YouTube / Vimeo / fichier direct, responsive via aspect-ratio ===== */ .le-video{position:relative;width:100%;aspect-ratio:var(--le-video-aspect,16/9);overflow:hidden;border-radius:10px;background:#0b0c0e} .le-video .le-video-frame,.le-video .le-video-el{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover} /* ===== Fond vidéo (section / sous-section) : plein cadre, muet, en boucle, overlay optionnel ===== */ .le-has-bgvideo{position:relative;isolation:isolate;overflow:hidden} .le-bgvideo,.le-bgvideo-overlay{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .le-bgvideo .le-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} /* Les iframes YouTube/Vimeo ne supportent pas object-fit : on les surdimensionne (astuce vw/vh 16:9) pour qu'elles couvrent le cadre sans bandes noires, quel que soit son format. */ .le-bgvideo .le-video-frame{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0} /* Vidéo de fond plein écran (Section/En-tête en Largeur de grille) : même bleed que le fond couleur/dégradé/image (::before, voir liveedit_apply_cf_scale), mais appliqué à ce vrai fragment DOM. Le conteneur doit laisser passer le débordement (overflow:visible) — .le-bgvideo garde SON PROPRE overflow:hidden, qui rogne alors la vidéo surdimensionnée à la largeur du viewport plutôt qu'à celle, plus étroite, de la grille. */ .le-has-bgvideo.le-bgbleed{overflow:visible} .le-has-bgvideo.le-bgbleed>.le-bgvideo,.le-has-bgvideo.le-bgbleed>.le-bgvideo-overlay{inset:auto;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%)} /* ===== Lottie : taille fixée dans les propriétés du bloc (style inline width/height) ===== */ .le-lottie{max-width:100%;line-height:0} .le-lottie svg{display:block;max-width:100%;max-height:100%} /* ===== Fenêtre modale (front public) =================================================== La fenêtre s'ouvre depuis un Bouton/Lien pointant vers son ancre (#id). Le wrap ne contient que le voile .le-modal-overlay (position:fixed, donc sorti du flux) : il n'occupe aucune place visible. Le voile est masqué tant que la fenêtre n'a pas la classe .le-modal-open (posée par reveal.js à l'ouverture). ===== */ .le-modal-wrap{display:contents} /* Voile plein écran. Masqué au repos (opacity/visibility → transition). La POSITION de la boîte (centre/haut/bas) est pilotée par les marges auto de la boîte, pas par align-items : les marges auto centrent horizontalement ET verticalement tout en se réduisant à 0 quand le contenu dépasse la hauteur du voile — le haut reste alors accessible au défilement (align-items:center couperait). */ /* Vitesse d'ouverture réglable dans le panneau : --le-modal-speed (défaut 300 ms). */ .le-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;padding:24px;background:var(--le-modal-backdrop,rgba(0,0,0,.6));opacity:0;visibility:hidden;overflow-y:auto;transition:opacity var(--le-modal-speed,.3s) ease,visibility var(--le-modal-speed,.3s) ease;-webkit-overflow-scrolling:touch} .le-modal-overlay.le-modal-open{opacity:1;visibility:visible} /* Boîte de contenu : fond/rayon/padding pilotés par variables (voir rendu PHP). box-sizing:border-box pour que max-width englobe le padding (largeur intuitive, indépendante du reset du thème). */ .le-modal-dialog{position:relative;box-sizing:border-box;width:100%;max-width:560px;margin:auto;background:var(--le-modal-bg,#fff);color:inherit;border-radius:var(--le-modal-r,14px);padding:var(--le-modal-pad,28px);box-shadow:0 24px 70px rgba(0,0,0,.35);outline:none;transition:transform calc(var(--le-modal-speed,.3s)*1.1) cubic-bezier(.22,.61,.36,1),opacity var(--le-modal-speed,.3s) ease} .le-modal-dialog *{box-sizing:border-box} /* Position : marge verticale auto = centré ; à 0 d'un côté = collé en haut / en bas. */ .le-modal-pos-top .le-modal-dialog{margin-top:0} .le-modal-pos-bottom .le-modal-dialog{margin-bottom:0} /* Plein écran : la boîte remplit tout le voile (utile en prise de rendez-vous, menu plein écran…). */ .le-modal-pos-full{padding:0} .le-modal-pos-full .le-modal-dialog{max-width:none;width:100%;min-height:100%;margin:0;border-radius:0} .le-modal-body{min-width:0} /* Bouton ✕ : coin haut-droit de la boîte. */ .le-modal-x{position:absolute;top:10px;right:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9999px;background:transparent;color:currentColor;font-size:24px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .15s,background .15s} .le-modal-x:hover{opacity:1;background:rgba(128,128,128,.16)} /* Animations d'apparition : état fermé de la boîte, puis retour à la normale une fois ouvert. */ .le-modal-anim-zoom .le-modal-dialog{transform:scale(.94);opacity:0} .le-modal-anim-zoom.le-modal-open .le-modal-dialog{transform:scale(1);opacity:1} .le-modal-anim-slide .le-modal-dialog{transform:translateY(40px);opacity:0} .le-modal-anim-slide.le-modal-open .le-modal-dialog{transform:translateY(0);opacity:1} .le-modal-anim-fade .le-modal-dialog{opacity:0} .le-modal-anim-fade.le-modal-open .le-modal-dialog{opacity:1} /* Défilement de la page bloqué pendant qu'une fenêtre est ouverte (option). */ html.le-modal-locked{overflow:hidden} @media(prefers-reduced-motion:reduce){ .le-modal-overlay,.le-modal-dialog{transition:opacity .01s linear} .le-modal-anim-zoom .le-modal-dialog,.le-modal-anim-slide .le-modal-dialog{transform:none} } /* Responsive : la boîte est déjà fluide (width:100% plafonné par max-width) donc elle occupe la largeur disponible sur mobile. On resserre le voile et on donne un peu plus d'élan au glissement. La largeur max et la position par breakpoint se règlent dans le panneau (feuille scopée #id). */ @media(max-width:600px){ .le-modal-overlay{padding:12px} .le-modal-anim-slide .le-modal-dialog{transform:translateY(60px)} .le-modal-anim-slide.le-modal-open .le-modal-dialog{transform:translateY(0)} } /* ===== Off-canvas (front public) ============================================================ Panneau latéral glissant depuis un bord (gauche/droite/haut/bas). Même mécanique que la Fenêtre modale : le wrap (display:contents) porte l'ID cible ; s'ouvre depuis tout Bouton/ Lien/Icône dont la destination est l'ancre « #id » (voir reveal.js). La taille du panneau (--le-oc-size) est posée sur le WRAP et héritée : la surcharge responsive (.ler-…, clé ocSize) peut donc la battre par breakpoint. min(…,100vw/100vh) : jamais plus grand que l'écran, quel que soit le réglage — le responsive « juste marche » même sans surcharge. ===== */ .le-oc-wrap{display:contents} .le-oc-overlay{position:fixed;inset:0;z-index:9999;background:var(--le-oc-backdrop,rgba(0,0,0,.5));opacity:0;visibility:hidden;transition:opacity var(--le-oc-speed,.32s) ease,visibility var(--le-oc-speed,.32s) ease} .le-oc-overlay.le-oc-open{opacity:1;visibility:visible} /* Padding par côté : variables --le-oc-pad-* posées par la Marge intérieure (onglet Personnalisé) sur le wrap display:contents, dont elles héritent jusqu'ici. Repli : --le-oc-pad (ancien réglage « Espace intérieur » de l'onglet Général, conservé pour les contenus existants) puis 28px. */ .le-oc-panel{position:fixed;box-sizing:border-box;background:var(--le-oc-bg,#fff);color:inherit;padding:var(--le-oc-pad-top,var(--le-oc-pad,28px)) var(--le-oc-pad-right,var(--le-oc-pad,28px)) var(--le-oc-pad-bottom,var(--le-oc-pad,28px)) var(--le-oc-pad-left,var(--le-oc-pad,28px));box-shadow:0 12px 60px rgba(0,0,0,.3);overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;transition:transform var(--le-oc-speed,.32s) cubic-bezier(.22,.61,.36,1)} .le-oc-panel *{box-sizing:border-box} /* Directions : le panneau est collé au bord choisi et glisse hors-champ au repos. */ .le-oc-from-left .le-oc-panel{top:0;bottom:0;left:0;width:min(var(--le-oc-size,380px),100vw);transform:translateX(-102%)} .le-oc-from-right .le-oc-panel{top:0;bottom:0;right:0;width:min(var(--le-oc-size,380px),100vw);transform:translateX(102%)} .le-oc-from-top .le-oc-panel{left:0;right:0;top:0;height:min(var(--le-oc-size,380px),100vh);transform:translateY(-102%)} .le-oc-from-bottom .le-oc-panel{left:0;right:0;bottom:0;height:min(var(--le-oc-size,380px),100vh);transform:translateY(102%)} .le-oc-overlay.le-oc-open .le-oc-panel{transform:none} /* Bouton ✕ : coin haut du panneau (côté intérieur pour gauche, extérieur classique sinon). */ /* ✕ : taille et couleur réglables dans le panneau (Fermeture) — la zone cliquable suit la taille. */ .le-oc-x{position:absolute;top:10px;right:10px;width:calc(var(--le-oc-x-size,24px) + 10px);height:calc(var(--le-oc-x-size,24px) + 10px);display:flex;align-items:center;justify-content:center;border:0;border-radius:9999px;background:transparent;color:var(--le-oc-x-color,currentColor);font-size:var(--le-oc-x-size,24px);line-height:1;cursor:pointer;opacity:.55;transition:opacity .15s,background .15s;z-index:1} .le-oc-x:hover{opacity:1;background:rgba(128,128,128,.16)} /* Défilement de la page bloqué pendant qu'un panneau est ouvert (option). */ html.le-oc-locked{overflow:hidden} /* Un Menu déposé dans le panneau passe naturellement en pile verticale si l'orientation « Verticale » est choisie sur le bloc Menu (classe flex-column, déjà gérée par le plugin). */ .le-oc-body{min-width:0} @media(prefers-reduced-motion:reduce){ .le-oc-overlay{transition:opacity .01s linear} .le-oc-panel{transition:none} }