.spip-admin-bloc, .spip-admin-float{z-index: 3000!important;} .crayon-html textarea{width: 100%; min-height: 10vw; min-height: 32vw;} .blocvide{border: 1px dotted var(--muted); background-color:rgba(255,255,255,0.60); color: var(--muted); font-style: italic; padding: 3px 8px; font-size: clamp(10px,1.6vw,16px); float: right; border-radius: 5px; margin-left: 5px;} .formulaire_crayon input.text{width: 100%} /* Teintes */ :root { --bg: #eeeeee; --darkbg: #222222; --muted: #999999; --text: #555555; --accent: rgba(139,49,29,1.00); --darkaccent: rgba(95,17,0,1.00); --panel: rgba(139,49,29,1.00); --textinv: #fff; --swiper-navigation-size: 65px; --swiper-navigation-sides-offset: 20px; --swiper-theme-color: #ffffff; } /* Base */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; } html { scroll-behavior: auto; } [id] { scroll-margin-top: 65px; } a { color: inherit; text-decoration: none; } h3 a, h5 a{transition: opacity .6s ease; opacity: 1;} h3 a:hover, h5 a:hover{opacity: 0.5;} p a, li a{font-weight: 500; transition: color .6s ease; opacity: 1; border-bottom: 1px dotted var(--muted)} p a:hover, li a:hover{color: var(--accent)} sup {font-size: 45%;font-weight: 600;} .spacer{min-height: 80px;} /* Masonry valeurs par défaut*/ .masonry { --masonry-gap: 40px; --masonry-cols: 2; position: relative; display: grid; } .masonry .cols-2 { column-count: 2; column-gap: var(--masonry-gap); column-fill: balance; /*hyphens: auto; /* OK avec du site */ overflow-wrap: break-word; } /* Évite les coupures moches d’éléments block */ .masonry .cols-2 > * { break-inside: auto;/*avoid*/; } /* Titres, images, figures : pas de coupure avant/après */ .masonry .cols-2 h1, .masonry .cols-2 h2, .masonry .cols-2 h3, .masonry .cols-2 h4, .masonry .cols-2 figure, .masonry .cols-2 img { break-inside: avoid; break-after: avoid; } .masonry > .span-all { grid-column: 1 / -1; } .masonry > .break { grid-column: 1; } .boxed, .fullwidth h2.titre { padding: 60px 80px 30px; max-width: 1200px; margin: 0 auto;} .fullwidth { position: relative; width: 100%; /*overflow: hidden;*/ } .fullwidth h2.titre {display: block;} /* Focus par défaut : rien (on va piloter en .kbd-nav) */ :focus { outline: none; } /* N’affiche le focus visuel que si l’utilisateur navigue au clavier */ .kbd-nav :focus-visible { outline: 3px solid rgba(48,51,190,.35); outline-offset: 4px; border-radius: 12px; } /* Focus personnalisé sur éléments clés seulement au clavier */ .kbd-nav .hamburger:focus-visible, .kbd-nav .offcanvas nav a:focus-visible, .kbd-nav .lien-cadre:focus-visible, .kbd-nav .logo:focus-visible { box-shadow: 0 0 0 3px rgba(48,51,190,.20); outline: none; border-radius: 12px; } a, button { -webkit-tap-highlight-color: transparent; } button::-moz-focus-inner { border: 0; } .portfolio-container.masonry{ --masonry-cols: 2;--masonry-gap: 16px;} h1 {font-size: clamp(60px, 9vw, 90px);letter-spacing: .02em; margin: 0 0 18px; font-weight: 100; color: var(--accent);} h1.titre{margin-top:80px;} h2 { font-size: clamp(50px,7vw,70px); letter-spacing: .02em; margin: 0 0 18px; font-weight: 100; color: var(--accent); } h3 { font-size: clamp(28px,4vw,40px); margin: 0 0 8px; font-weight: 100; } h4 {font-size: clamp(18px,2.5vw,25px); margin-block-start:0.8em; margin-block-end:0;} h5 {font-size: clamp(17px,2.1vw,21px); margin-block-start:0.8em; margin-block-end:0;} p {font-size: clamp(17px,2.1vw,21px); line-height: 1.7; } ul {margin:1em 0} li {font-size: clamp(16px,2vw,2px); line-height: 1.7; } .button-off{; pointer-events: none; opacity: 0.2} blockquote {margin: 10px 0; opacity: 0.9} blockquote i {font-size: 16px; letter-spacing: 0.5;} .ajaxloadmore{text-align: center} .lien-cadre, .lien-cadre-small {border: var(--accent) solid 1px; padding: 8px 35px; transition: background .65s ease, color .6s ease; text-align: center; width: auto; display: block; margin: clamp(12px,2vw,32px) 0 0 0; border-radius: 8px; color: var(--accent); white-space: nowrap; overflow: hidden;} .lien-cadre:hover, .lien-cadre-small:hover{background: var(--panel); color: var(--textinv);} .lien-cadre{font-size: clamp(20px, 2.0vw, 22px);} .lien-cadre-small{font-size: 18px; padding: 3px 15px;} .lien-cadre-blanc { font-size: clamp(15px, 2.0vw, 22px); border: var(--textinv) solid 1px; padding: 8px 35px; transition: background .65s ease, color .6s ease; text-align: center; width: 100%; display: block; margin: clamp(15px, 3vw, 30px) auto 0 auto; border-radius: 8px; text-decoration: none; font-weight: 400; } .lien-cadre-blanc:hover{ background: #FFFFFF; color: var(--text); } .lien-small{ width: 160px; font-size: 16px; margin-bottom: 30pt; } .ajaxbutton{display: inline-block; margin: 20px auto;} /* bandeau haut */ .top-back { position: fixed; inset: 0 0 auto 0; height: 65px; background: var(--darkbg); pointer-events: none; z-index: 1500; } /* Logo */ .logo { position: fixed; top: 16px; left: 16px; z-index: 2000; display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; } .logo img { width: clamp(240px,35%,260px); height: auto; display: block;} .logo span { font-weight: 600; letter-spacing: .02em; font-size: 14px; } /* Hamburger */ .hamburger {position: fixed; top: 16px; right: 16px; z-index: 2100; border: none; background: none; padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px;} .hamburger .bars { width: 22px; height: 14px; position: relative; display: inline-block; } .hamburger .bars::before, .hamburger .bars::after, .hamburger .bars span {content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--textinv); transition: transform .3s ease, opacity .3s ease, top .3s ease; mix-blend-mode: normal;} .hamburger .bars span { top: 6px; } .hamburger .bars::before { top: 0; } .hamburger .bars::after { top: 12px; } .hamburger[aria-expanded="true"] .bars::before { top: 6px; transform: rotate(45deg); } .hamburger[aria-expanded="true"] .bars::after { top: 6px; transform: rotate(-45deg); } .hamburger[aria-expanded="true"] .bars span { opacity: 0; } .hamburger[aria-expanded="true"] .bars::before, .hamburger[aria-expanded="true"] .bars::after, .hamburger[aria-expanded="true"] .bars span { background-color: rgba(255,255,255,.6); } /* Panneau du menu */ .offcanvas { background: var(--panel) url("/squelettes/logos/Alexis_bordes_singes.png") no-repeat right bottom; background-size: 80%; position: fixed; top: 0; right: 0; width: min(420px, 100vw); height: 100vh; border-left: 1px solid rgba(255,255,255,0.12); transform: translateX(100%); transition: all .5s ease; z-index: 1900; padding: 80px 24px 24px; overflow-y: auto; mix-blend-mode: normal; } .offcanvas.open { transform: translateX(0); } /*.offcanvas[aria-hidden="true"] { visibility: hidden; }*/ .offcanvas nav { display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; z-index: 1; padding: 100px 0 180px } .offcanvas nav a { display: block; padding: clamp(8px,1.1vw,11px) 8px; font-size: clamp(24px, 3.2vw, 32px); font-weight: 300; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--textinv); opacity: .7; transition: opacity .6s ease, transform .6s ease; letter-spacing: 0.04em;} .offcanvas nav > a:hover, .offcanvas nav > a:focus, .offcanvas nav > a.active { opacity: 1; } .offcanvas nav > a:hover{transform: translateX(5px)} .offcanvas nav li > a:hover, .offcanvas nav li > a:focus, .offcanvas nav li > a.active { opacity: 0.8;} .offcanvas nav li > a:hover{transform: translateX(5px)} .offcanvas nav ul {margin: 0; padding: 0; list-style: none;} .offcanvas nav ul li a {font-size: clamp(15px, 1.9vw, 19px); padding: clamp(4px,1vw,10px) 8px; border-bottom: 1px solid rgba(255,255,255,0.1); opacity: .6} .offcanvas .nav-lang {padding: clamp(15px,2.5vw,36px) 8px; } .offcanvas .nav-lang span, .offcanvas .nav-lang a {font-size: clamp(16px, 2vw, 20px); color: var(--textinv); opacity: .6; display: inline-block; border: none; letter-spacing: 0.1em} .offcanvas .nav-lang a{font-style: italic} .offcanvas .nav-lang a:hover, .offcanvas .nav-lang a:focus, .offcanvas .nav-lang a.active {opacity: 1;} .offcanvas .nav-lang a:hover {transform: translateY(-4px)} /* HERO slider */ .swiper-hero {z-index: 1600; background-color: var(--darkbg);} .swiper-hero { position: relative; width: 100%; height: 100vh; overflow: hidden; } .swiper { position: absolute; inset: 0; width: 100%; height: 100%; } .swiper-slide{ position: relative; overflow: hidden;} .fullscreen{ position: absolute; inset: 0; object-fit: cover; z-index: 0; transform: translateZ(0); width: 100%; height: 100%; display: block; } /* Overlay et texte */ .overlay{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; /* au-dessus de la vidéo */ will-change: transform, opacity; backface-visibility: hidden; transform: translateZ(0); padding: clamp(20px, 8vw, 120px); display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 20%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.4) 100%); width: 100%; height: 100%; color: var(--textinv); } .slidetext{ position: relative; z-index: 3; will-change: transform, opacity; backface-visibility: hidden; transform: translateZ(0); text-align: center; transition: transform .6s ease, opacity .6s ease; opacity: 1; max-width: clamp(600px,95vw,750px); } .slidetext:hover{ opacity: 0.8; transform: translateY(-5px) } .overlay img {max-width: 60vw; width: 25%; opacity: .7} .overlay h4 { margin: clamp(9px, 1.5vw, 15px) auto; padding: 4px 25px; font-size: clamp(14px, 2vw, 20px); color: var(--textinv); line-height: 0.8; letter-spacing: 0.02em; font-weight: 500; background: var(--textinv); color: var(--text); display: inline-block; border-radius: 6px; opacity: 0.8; text-transform: uppercase;} .overlay h1 { margin: clamp(9px, 1.5vw, 15px) 0; font-size: clamp(49px, 7vw, 80px); line-height: 0.9; letter-spacing: .02em; font-weight: 100; letter-spacing: 0.02em; color: var(--textinv)} .overlay p { margin: clamp(13px, 2vw, 20px) 0; font-size: clamp(21px, 3vw, 30px); color: var(--textinv); line-height: 1.05; letter-spacing: 0.03em} /* === Slide en 2 panneaux (split) === */ .swiper-slide.split { position: relative; display: grid; grid-template-columns: 1fr 1fr; /* côte à côte en horizontal */ width: 100%; height: 100%; } .swiper-slide.split .halfscreen { position: relative; overflow: hidden; } .swiper-slide.split .halfscreen .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; transform: translateZ(0); } .swiper-slide.split .overlay { padding: clamp(20px, 6vw, 80px); display: flex; justify-content: center; align-items: center; } .swiper-hero-button-prev, .swiper-hero-button-next { color: var(--textinv); opacity: 0.8; transition: transform .6s ease, opacity .6s ease } .swiper-hero-button-prev:hover, .swiper-hero-button-next:hover {opacity: 1; transform: translateY(5px)} /* ######## LIGHTBOX VIDEO */ #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1600; } #lightbox.open { opacity: 1; pointer-events: auto; } #lightbox .lightbox { position: relative; width: 95vw; max-width: 1600px; aspect-ratio: 16 / 9; /* responsive */ } #lightbox .lb-content, #lightbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; overflow: hidden; } #lightbox .lb-close { position: absolute; top: -50px; right: 0px; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 5px 10px rgba(0,0,0,.25); z-index: 1650;} #lightbox .lb-close::before { content: "✕"; font-size: 24px; line-height: 1; } /* pdf-flip reader */ .pf-float .pf-ui {letter-spacing: .025em; font-variant-numeric: lining-nums; padding: 4px; height: 48px;} .pf-ui .pf-ui-btn { } .pf-ui .pf-ui-page label {font-size: 18px;} /* Series */ .series-container { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; } .series-item { position: relative; overflow: hidden; background: rgba(255,255,255,0.5); border-radius: 12px; height: clamp(170px, 20vh, 350px); } .series-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; } .series-item .cadrebg { position: absolute; inset: 0; background: var(--panel); mix-blend-mode: multiply; z-index: 2; pointer-events: none; opacity: 1; transition: opacity .6s ease; } .series-container figcaption { color: #fff; transition: opacity .6s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; text-align: center; padding: 0; z-index: 2; } .series-container figcaption h3 { font-weight: 100; font-size: clamp(40px,4vw,70px); line-height: clamp(40px,3.2vw,56px); margin: 0; } .series-container figcaption h5 { font-weight: 100; font-variant: italic; font-size: clamp(16px,1.4em,20px); margin: 0; } .series-container a { width: 100%; height: 100%; z-index: 3; opacity: 1; transition: opacity 1s ease; position: relative; display: block; } .series-container a:hover .cadrebg { opacity: 0; } .series-container a:hover figcaption { opacity: 0; } .series-container .series-item, .series-container figure, figure.series-item { margin: 0; } /*liste */ .list{grid-template-columns: 1fr; display: grid; gap: 16px} .list .list-item {position: relative;display: grid;grid-template-columns: 180px auto; grid-template-rows: auto; gap:16px; margin: 0; align-items: stretch;} .list .list-item .thumb {width: 180px; aspect-ratio: 1/1; position: relative;} .list-item img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; display: block; z-index: 1; border-radius: 12px; } .list .list-item .text{align-self: end; padding-bottom: 6px; transition: opacity .6s ease; height: 180px; overflow: hidden;} .list-item .cadrebg { position: absolute; inset: 0; background: var(--panel); mix-blend-mode: multiply; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; border-radius: 12px} .list-item:hover .cadrebg { opacity: 1; } .list-item:hover .text { opacity: 0.5; } .masonry-item { position: relative; overflow: hidden;} .masonry-item img { width: 100%; height: auto; display: block; z-index: 1; position: relative; } .masonry-item .cadrebg { position: absolute; inset: 0; background: var(--panel); mix-blend-mode: multiply; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; } .masonry-item figcaption { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 25px; color: #fff; mix-blend-mode: normal; z-index: 3; opacity: 0; transition: opacity .6s ease; } figcaption h3 { font-weight: 100; font-size: clamp(20px, 5vw,38px); line-height: clamp(20px, 5vw,38px); margin: 0 0 6px 0; } figcaption h5 { font-weight: 100; font-variant: italic; font-size: clamp(13px, 2.2vw,18px); line-height: clamp(13px, 2.2vw,18px); margin: 0; } /*.masonry-item a { position: absolute; inset: 0; width: 100%; height: 100%;} /*z-index: 3; opacity: 1; transition: opacity 1s ease; */ .masonry-item a.spip_out{ position: relative; color:#7174DB; } #portfolio .masonry-item{border-radius: 12px;} .masonry-item figure a, .series-container a { position: absolute; inset: 0; width: 100%; height: 100%; } .masonry-item figure.spip_doc_inner a{ position: relative; } .masonry-item figure.spip_doc_inner{ width: 50%; transition: opacity 0.6s ease; opacity: 1; } .masonry-item figure.spip_doc_inner img{ opacity: 1; border-radius: 12px; } .masonry-item figure.spip_doc_inner:hover{ opacity: 0.5; } .spip_doc_inner a{position: relative; pointer-events: none; border-radius: 12px;} .masonry-item:hover .cadrebg { opacity: 1; } .masonry-item:hover figcaption { opacity: 1; } .masonry.is-masonry { display: block; } .masonry.is-masonry .masonry-item { position: absolute; margin: 0; } .masonry .masonry-item, .masonry figure, figure.masonry-item { margin: 0; } figure { margin: 0; } .video {text-align: center} .video .videocontainer{display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; position: relative} .video a .videocontainer::before{content: ''; background: rgba(0,0,0,0.50) url("../logos/play.png") center no-repeat; background-size: 35%; width: 100%; height: 100%; position: absolute; opacity: .2; transition: opacity .6s ease;} .video a:hover .videocontainer::before {opacity: .8} .video .videocontainer img{object-fit: fill; object-position: center;} /* Intros landing page */ .masonry.intro-container { display: grid; --masonry-cols: 1; gap: 50px; position: relative;} .intro-card {padding: 0; } .intro-photo { border-radius: 12px; overflow: hidden; } .intro-photo aside {margin-bottom: 28px;} .intro-photo img, .intro-photo video { width: 100%; height: auto; display: block; object-fit: float: left; } /* Grid-containers */ .grid-container {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:40px; margin-top: 40px;} .container-2{grid-template-columns: repeat(2, minmax(0, 1fr))} .container-3{grid-template-columns: repeat(3, minmax(0, 1fr))} .container-4{grid-template-columns: repeat(2, minmax(0, 1fr))} .container-6{grid-template-columns: repeat(4, minmax(0, 1fr))} .catalogues-4{grid-template-columns: repeat(2, minmax(0, 1fr))} .container-8{grid-template-columns: repeat(6, minmax(0, 1fr))} .container-12{grid-template-columns: repeat(8, minmax(0, 1fr))} .container-2-3{grid-template-columns: 1fr} .grid-item {display: flex; flex-direction: column; position: relative} a.grid-item-lien{transition: color .6s ease, transform .6s ease; display: inline-block; text-decoration: none;} a.grid-item-lien:hover{transform: translateY(-5px); color: var(--accent)} a.grid-item-lien p{transition: color .6s ease} a.grid-item-lien:hover p{color: var(--accent)} .grid-item .optionnel{display: none} .grid-item a.lien-cadre-small{margin-top: auto} .grid-item h4{white-space: nowrap; overflow: hidden; font-size: 20px;} .grid-item h4.artiste{white-space: nowrap; overflow: hidden; font-size: 18px; font-weight: 300} .grid-item h3{font-size: clamp(20px, 3vw,30px);} .grid-item .img-wrap {position: relative; display: block; line-height: 0; border-radius: 12px; overflow: hidden;} .grid-item .img-wrap img, .grid-item a .img-wrap img video{aspect-ratio: 1 / 1; object-fit: cover; object-position: center; display: block; width: 100%; height: auto; border-radius: inherit;} .grid-item .img-wrap::after { content: ""; position: absolute; inset: 0; background: var(--darkaccent); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;} .grid-item a:hover .img-wrap::after {opacity: .4;} /* Grid no gaps (nouvelles acquisitons)*/ .nogap {gap:0; background-color: var(--darkbg)} .nogap .grid-item a .img-wrap {border-radius: 0} .nogap .grid-item a.grid-item-lien:hover{transform: none;} .nogap .grid-item a .img-wrap:hover::after {opacity: .8;} .img-wrap figcaption{position: absolute; left: 0; right: 0; top:50%; transform: translateY(-50%); text-align: center; padding: 25px; color: var(--textinv); z-index: 3; opacity: 0; transition: opacity .6s ease} .img-wrap:hover figcaption{opacity: 1;} .img-wrap figcaption h3{font-size: clamp(16px, 2.8vw, 28px)} .img-wrap figcaption h3 .optionnel{display: none} .img-wrap figcaption h5{font-size: clamp(10px, 1.8vw, 18px)} /* Grid catalogues */ .catalogues {} .catalogues img {width: 100%;} .catalogues p{font-size: clamp(16px,2vw,20px);} a.catalogue:hover{transform: translateY(0);} .catalogue{ display:block; color:inherit; text-decoration:none; } .catalogue3d{position: relative; transform-style: preserve-3d; perspective: 1400px;} .catalogue-back{display:block; width:100%; height:auto; border-radius: 4px;visibility:hidden;} .catalogue-cover{position:absolute; inset:0; width:100%; height:100%; object-fit: cover; border-radius: 4px; backface-visibility: hidden; transform-origin: left center; transform: rotateY(0deg) translateZ(1px); transition: transform .6s ease, box-shadow .6s ease, filter .6s ease; box-shadow: 0 12px 28px rgba(0,0,0,.18);z-index:1; } .catalogue-pages{position:absolute; inset:0; border-radius: 2px; background: linear-gradient(90deg,#fafafa 0%, #efefef 35%, #fafafa 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.18); pointer-events:none; z-index:0; } .catalogue3d::before{content:""; position:absolute; top:1%; bottom:1%; left:-2px; width:12px; background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0)); border-radius: 6px; filter: blur(6px); pointer-events:none;} .catalogue:hover .catalogue-cover{transform: rotateY(-20deg) translateZ(1px); filter: brightness(1.35) saturate(0.65); box-shadow: 0 28px 50px rgba(0,0,0,.32);} .modelecatalogue{text-align: center;} .modelecatalogue{} /****************************** ** PAGE CONTENUS REDAC * ******************************/ section.fullpage{margin-top: 80px;} section.fullpage h1{font-size: clamp(39px,6.5vw,65px); line-height: 0.8} section.fullpage h1 small{font-size: clamp(23px, 3.5vw, 35px); line-height: 1.2} section.fullpage h2{font-size: clamp(28px,4vw,40px)} section.fullpage h3{margin-bottom: 80px} /****************************** ** PAGE OEUVRE * ******************************/ #ps-galerie {position: relative; overflow: visible} #ps-galerie .fullwidth{height: 800px; display: block; position: relative; text-align: center; align-content: center} .vignettes {position: relative; height: 115px; gap: 20px; width: 100%; margin: 20px 0;} .ps-item, .ps-item-lien{display: inline-block} .ps-item img, .ps-item-lien img{max-width: 100%; max-height: 100%; width: auto;} .vignettes img{max-height: 115px;opacity: 0.7; max-width: 220px; transition: opacity .6s ease; } .vignettes .ps-item-lien a.active img, .vignettes .ps-item-lien a:hover img {opacity: 1;} .cartel {position: relative;} .cartel-float{position: relative; width: inherit; margin-bottom: 80px;} .cartel-float {overflow: visible;} .cartel-float h1{font-size: 30px; font-weight: 500; margin: 60px 0 0; letter-spacing: .02em; color: var(--accent)} .cartel-float .dates{font-size: 20px; margin: 5px 0; letter-spacing: .02em} .cartel-float h2{font-size: 30px; letter-spacing: .005em; color: var(--text); font-style: italic; font-weight: 500; margin: 45px 0} .cartel-float h2 .small{font-weight: 200;}/* font-size: clamp(15px, 2.5vw, 25px);}*/ .cartel-float h3 {font-size: 20px; letter-spacing: 0.005em} .cartel-float .resultat {font-size: 24px; color: var(--accent); margin-bottom: 0px; letter-spacing: 0.005em} .cartel-float .nomvente {font-size: 18px; color: var(--accent); font-weight: 600; margin-top: 55px; letter-spacing: 0.005em} .cartel-float p {font-size: 18px; letter-spacing: .005em; line-height: 2; margin: 0} .cartel-float h4{font-size: 22px; letter-spacing: 0.005em; margin: 2px 0 10px} .cartel-float p{font-size: 18px; position: relative;} .cartel-float .puces {margin-top: 20px; padding-top: 20px; border-top: var(--muted) 1px solid;} .cartel-float .puces p{line-height: 1.5; margin-bottom: 6px; } .cartel-float .puces p::before{content: "";position: absolute;left: -14px; top: .7em; width: .25em; height: .25em; background-color: currentColor; border-radius: 50%} .visuels{position: relative; width: 100%; overflow: visible; min-width: 0;border-bottom: var(--muted) 1px solid; padding-bottom: 45px;} .swiper-oeuvres { position: relative; width: 100%; overflow: hidden; } .exportdoc {text-align: right; width: 100%; position: absolute} .exportdoc img {width: 32px;} .exportdoc a img{cursor: pointer; margin-left: 5px; transition: transform .6s ease} .exportdoc a img:hover{transform: translateY(-5px)} .spip_doc_inner {grid-template-columns: 7fr 5fr; display: grid; gap: 24px; margin: 24px} .spip_doc_inner .spip_doc_titre, .spip_doc_inner .spip_doc_credits{display: none;} .spip_doc_inner .spip_doc_legende, .spip_doc_inner .spip_doc_descriptif {text-align: left; align-content: end;} /****************************** ** Formulaire expertise * ******************************/ /* BIG UP */ /* cache les dropzones BigUp « suivantes » */ .dropfile.is_hidden{display:none!important;} /* fallback : cache les « suivants » tant que BigUp n'a pas encore créé .dropfile */ .choix input[type="file"].bigup.is_hidden_input{display:none!important;} .formulaire_formidable fieldset {border:none; padding: 20px; border-radius: 12px; } .formulaire_formidable fieldset.avec_sous_saisies{background-color:rgba(255,255,255,0.40);} .formulaire_formidable .avec_sous_saisies>legend{font-size: clamp(24px,4vw,40px); color: var(--accent); display: contents} .formulaire_formidable .explication_texte p{font-style: normal; font-size: clamp(17px,2.2vw,22px)} .formulaire_formidable .editer_with_bigup {display:grid; grid-template-columns: repeat(6,1fr); gap: 12px;} .formulaire_formidable .editer_with_bigup p.explication {display: block; font-size: clamp(17px,2.2vw,22px); grid-column: 1 / -1; } .formulaire_formidable .editer_with_bigup>legend {display: none } .formulaire_formidable .editer_with_bigup .choix{display:block; width: 100%; grid-column: 1 / -1;} .formulaire_formidable .choix .dropfile {text-align: center; border: 2px dashed var(--muted); border-radius: 12px; font-size: 22px; background-color: rgba(255,255,255,0.50); height: 250px; align-content: center;font-family: Arial, "sans-serif"; color: var(--text)} .formulaire_formidable .choix .dropfile .dropfilebutton {font-size: 20px; border-radius: 28px; padding: 9px 45px 6px; font-family: Arial, "sans-serif"; color: var(--muted)} .formulaire_formidable .choix .dropfile .dropfileor {font-size: 0.8em; font-weight: 100; font-style: italic} .formulaire_formidable .choix .bigup_fichiers {display: none;} @supports selector(:has(> .is_hidden)) { .formulaire_formidable .choix:has(.fichier){ display:inline-block; grid-column:auto;} .formulaire_formidable .choix .bigup_fichiers:has(.fichier) {display: block;} .formulaire_formidable .choix:has(> .is_hidden){ display:none; } } .formulaire_formidable .bigup_fichiers {width: 100%; height: 100%;} .formulaire_formidable .bigup_fichiers .description {width: 100%; height: 100%; display: block;} .formulaire_formidable .bigup_fichiers .description .infos .name, .formulaire_formidable .bigup_fichiers .description .infos .size, .formulaire_formidable .bigup_fichiers .description .actions{display: none;} .formulaire_formidable .bigup_fichiers .fichier {position: relative; width: 100%; height: 100%; border-radius: 12px;} .formulaire_formidable .bigup_fichiers .fichier .previsualisation{width: 100%; height: 100%;} .formulaire_formidable .bigup_fichiers .fichier .previsualisation>span{background-size: contain;} .formulaire_formidable .bigup_fichiers .fichier .vignette_extension{width: 100%; height: 100%; background-size: 50%; background-repeat: no-repeat; background-position: center} .formulaire_formidable .fichier progress {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100px; height: 40px; -webkit-appearance: none; appearance: none;} .formulaire_formidable .fichier progress::-webkit-progress-bar {background: var(--textinv); border-radius: 5px; height: 10px; border: 1px solid var(--muted)} .formulaire_formidable .fichier progress::-webkit-progress-value {background: var(--accent); border-radius: 4px; height: 8px;} .formulaire_formidable .fichier progress::-moz-progress-bar {background: var(--accent); border-radius: 5px; height: 10px;} .formulaire_formidable .bigup_fichiers .fichier, .formulaire_formidable .bigup_fichiers .fichier:last-child, .formulaire_formidable .bigup_fichiers .fichier:first-child{margin: 0} .formulaire_formidable .explication_texte ul.spip{list-style-type: decimal-leading-zero; margin: 0 0 0 36px; padding: 0; font-size: clamp(14px, 2vw, 20px)} .formulaire_formidable .explication_texte ul.spip li{margin-top: 5px;} .formulaire_formidable label {display: block; font-weight: 300} .formulaire_formidable textarea {display: block; width: 100%; font-size: clamp(16px,2.3vw,23px); border-radius: 5px; font-family: "Cormorant Garamond", serif; padding: 18px 10px; border: none;} .formulaire_formidable input.text {display: block; width: 100%; font-size: clamp(18px,2.6vw,26px); border:none; border-bottom: 1px solid var(--muted); background: none; font-family: "Cormorant Garamond", serif; padding: 12px 0; border-radius: 0} .editer-groupe_inline > .editer:not(.en_configuration){width: 100%} .formulaire_formidable form>div>.editer-groupe>fieldset:last-child .choix{grid-template-columns: 40px 1fr; display: grid; align-items: center} .formulaire_formidable form>div>.editer-groupe>fieldset:last-child .choix label {font-size: clamp(17px,2.2vw,22px);} .formulaire_formidable button{font-size: clamp(17px,2.2vw,22px); background: var(--accent); border-radius: 25px; border: none; height: 50px; margin: 20px 0; padding: 5px 20px; color: var(--textinv); font-family: "Cormorant Garamond", serif; transition: transform .6s ease; cursor: pointer} .formulaire_formidable button:hover{transform: translateY(-6px)} .formulaire_formidable .formulaire_valeurs{grid-template-columns: repeat(2,1fr)} .reponse_formulaire {font-size: 1.4em; border-radius: 24px; padding: 0.75em 2em} /****************************** ** Footer * ******************************/ footer {background-color: var(--darkbg); color: var(--textinv); margin-top: 80px;} footer .contact{grid-template-columns: 1fr; gap: 40px; display: grid;font-variant-numeric: lining-nums;} footer h2{font-size: 16px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted)} footer h3{font-size: 32px; line-height: 1.5; margin: 0} footer h4{font-size: 18px; line-height: 1.9; font-weight: 300; letter-spacing: 0.035em} footer .contact a{display: block; transition: transform .5s ease, color .5s ease; border: none; font-weight: 100} footer .contact a:hover{transform: translateX(6px);} footer .newsletter {grid-template-columns: 1fr; display: grid; gap: 40px;} footer .rs {} footer .rs .rsicons {border-bottom: var(--muted) 1px solid; height: 70px} footer .rs a img {width: 34px;} footer .rs a {transition: transform .6s ease, opacity .6s ease; opacity: 0.65; display: inline-block; padding: 20px 8px 7px 0px; border: none;} footer .rs a:hover{transform: translateY(-5px); opacity: 1} footer .rs .autobr{display: none} .contact { font-size: 22px; margin-bottom: 28px; } .newsletter form{position: relative;} .newsletter #email{background: none; border: none; border-bottom: var(--muted) 1px solid; font-family: "Cormorant Garamond", serif; font-size: clamp(23px,3.8vw,38px); font-weight: 100; margin-right: 10px; width: auto; padding: 10px 0 ; width: 100%; color: var(--textinv); height: 70px; border-radius: 0} .newsletter .mentions p{font-family: Arial, "sans-serif"; font-size: 13px; line-height: 1.5; color: var(--muted)} .newsletter .mentions p a{text-decoration: underline;} .newsletter .mentions p a:hover{color: var(--textinv);} .newsletter #submit{background: none; border: none; cursor: pointer; position: absolute; right: -4px; top: 17px; padding: 5px; transition: transform .6s ease, opacity .6s ease; opacity: .65;} .newsletter #submit:hover{transform: translateY(-6px); opacity: 1;} .newsletter #submit img {width: clamp(30px,4.2vw,42px); height: auto;} .copyright { font-size: 15px; margin-bottom: 28px;} .copyright div:first-child{float: left;} .copyright div:last-child{text-align: right;} .copyright div:last-child a{white-space: nowrap;} .copyright a{transition: opacity .6s ease; display: inline-block; opacity: .6;} .copyright a:hover{opacity: 1;} #cta-estimation a {position: fixed; bottom: 25px; left: 25px; width: 340px; text-align: center; line-height: 20px; font-size: 20px; text-transform: uppercase; z-index: 1800; background-color: var(--accent); border-radius: 12px; padding: 10px 20px; font-weight: 500; letter-spacing: 0.05em; display: flex; grid-template-columns: 5fr 1fr; align-items: center; transition: transform .6s ease; } #cta-estimation a:hover {transform: translateY(-5px);} #cta-estimation div {display: block} #cta-estimation img{width: 105px; margin-left: 10px;} #seo {background-color: var(--bg)} .seo {grid-template-columns: 1fr; display: grid; font-variant-numeric: lining-nums;} .seo div{margin-bottom: 40px;} .seo h2{font-size: 16px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent)} .seo h3{font-size: 18px; line-height: 1.5; font-weight: 300; margin: 0} /****************************** ** COOKIES * ******************************/ #tarteaucitronRoot #tarteaucitronAlertBig {font-family: Arial, "sans-serif"!important; font-size: 17px!important; font-weight: 300!important; color: var(--text)} #tarteaucitronAlertBig button{border-radius:24px;font-weight: 300!important; border-radius: 24px!important; padding: 5px 15px!important; letter-spacing: -0.035em!important; transition: transform .6s ease;} #tarteaucitronAlertBig button:hover{transform: translateY(-4px);} #tarteaucitronAlertBig #tarteaucitronPersonalize2{background-color: var(--textinv)!important; color: var(--darkbg)!important} #tarteaucitronAlertBig #tarteaucitronAllDenied2, .tarteaucitronDeny {background-color: var(--accent)!important; color: var(--textinv)!important;} #tarteaucitronCloseAlert {background-color: var(--darkbg)!important; border: 1px var(--muted) solid!important; color: var(--muted)!important;} #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert{margin-bottom: 15px;} #tarteaucitronRoot button#tarteaucitronBack{background-color: var(--darkbg)!important;} #tarteaucitronServices {font-family: Arial, "sans-serif"!important; font-weight: 300!important; color:var(--text); border-radius: 24px!important;} #tarteaucitronServices button{border-radius:24px;font-weight: 300!important; border-radius: 24px!important; padding: 5px 2px!important; transition: transform .6s ease; letter-spacing: -0.03em!important} #tarteaucitronServices button:hover{transform: translateY(-4px);} #tarteaucitronServices button>span{display: none!important;} #tarteaucitronServices .tarteaucitronAllow{background-color: var(--accent)!important} #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny {background-color: var(--bg)!important; color: var(--muted)!important; border: var(--muted) 2px solid!important;} #tarteaucitronClosePanel {top: 30px!important; z-index: 1; color: rgba(255,255,255,0.00)!important} #tarteaucitronClosePanel:after {content:"╳"; color: var(--text)!important; font-size: 24px;} /****************************** ** MOBILE * ******************************/ /* Breakpoints 1024*/ @media (min-width: 1200px) { .masonry { --masonry-cols: 3; } .masonry.intro-container { --masonry-cols: 2;} .list{grid-template-columns: repeat(2, 1fr);} .portfolio-container.masonry{ --masonry-cols: 3} .seo {grid-template-columns: 1fr 1fr;} footer .contact {grid-template-columns: repeat(3,1fr);} footer .newsletter {grid-template-columns: 2fr 1fr;} .boxed, .fullwidth h2.titre { padding: 60px 140px 30px; max-width: 1600px; } .container-4{grid-template-columns: repeat(4, minmax(0, 1fr))} .container-6{grid-template-columns: repeat(6, minmax(0, 1fr))} .catalogues-4{grid-template-columns: repeat(4, minmax(0, 1fr))} .container-8{grid-template-columns: repeat(8, minmax(0, 1fr))} .container-12{grid-template-columns: repeat(12, minmax(0, 1fr))} .container-2-3{grid-template-columns: 7fr 5fr} .cartel-float h1{margin-top: 140px} .cartel-float{position: absolute; width: inherit;} .vignettes {position: absolute; top: 0;left: -115px; width: 100px; height: 800px; display: block; flex-direction: column; margin: 0; align-content: center;} .vignettes img{max-width: 100px; max-height: 240px;} } @media (max-width: 699px) { .masonry .cols-2 { column-count: 1; } .boxed, .fullwidth h2.titre { padding: 60px 28px 30px; } .swiper-hero { height: 100svh; } .overlay .slidetext { position: relative; transform: translateY(25px) ; z-index: 1; padding: 0 0; } .swiper-button-next, .swiper-button-prev{display: none} .overlay{ background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.45) 20%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.5) 100%);} .swiper-lb-button-prev, .swiper-lb-button-next{display: none;} .lightbox .lb-content{padding: 25px;} .swiper-slide.split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .container-3, .container-4 {grid-template-columns: 1fr} .container-6{grid-template-columns: repeat(3, minmax(0, 1fr))} .catalogues-4{grid-template-columns: repeat(2, minmax(0, 1fr))} .container-8{grid-template-columns: repeat(3, minmax(0, 1fr))} .container-12{grid-template-columns: repeat(6, minmax(0, 1fr))} .container-2-3{grid-template-columns: 1fr} .formulaire_formidable .editer_with_bigup {grid-template-columns: repeat(2,1fr);} .formulaire_formidable .choix .dropfile span {display: none;} .formulaire_formidable .choix .dropfile .dropfilebutton {height: 100%; width: 100%; border: none; background: none; margin:0} .formulaire_formidable .formulaire_valeurs{grid-template-columns: repeat(1fr)} #cta-estimation .cta-text{display: none; } #cta-estimation a {width: 100px; padding: 10px; left: -10px; border-bottom-left-radius: 0; border-top-left-radius: 0;} #cta-estimation img{width: 70px; margin-left: 10px;} } /* Accessibility & motion preferences */ @media (prefers-reduced-motion: reduce) { .slide, .overlay, .hamburger .bars::before, .hamburger .bars::after, .hamburger .bars span { transition: none !important; } .swiper-hero .slider { animation: none !important; } #lightbox, #lightbox .lightbox{ transition: none !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; } .catalogue:hover .catalogue-cover{ transform:none; box-shadow: 0 12px 28px rgba(0,0,0,.18); } } @media print { @page { size: A4; margin: 12mm 7mm; } .page-break { break-after: page; } html, body{background-color: #FFFFFF; color: #000000;} .logo{position: relative} .logo::after{content: url(/squelettes/logos/alexis_bordes_logo_coul_large.png);} .top-back, .logo img, .hamburger, .offcanvas, .no-print, #tarteaucitronRoot { display: none !important; } .boxed, .fullwidth h2.titre { padding: 0px 28px 30px; } .container-2-3{grid-template-columns: 1fr} #ps-galerie {position: relative; overflow: visible} #ps-galerie .fullwidth{height: 350px; display: block; position: relative; text-align: left; align-content: center} #ps-galerie .swiper-slide{display: none} #ps-galerie .swiper-slide:first-child{display: block} .vignettes {position: relative; height: 80px; gap: 20px; width: 100%; margin: 20px 0; left:0!important} .ps-item, .ps-item-lien{display: inline-block} .ps-item img, .ps-item-lien img{max-width: 100%; max-height: 100%; width: auto;} .vignettes img{max-height: 115px; max-width: 220px; opacity: 1; transition: opacity .6s ease; } .vignettes .ps-item-lien a.active img, .vignettes .ps-item-lien a:hover img {opacity: 1;} .cartel {position: relative;} .cartel-float{position: relative; width: inherit;} .cartel-float {overflow: visible;} .cartel-float h1{font-size: 25px; font-weight: 500; margin: 0; letter-spacing: .02em; color: var(--accent)} .cartel-float .dates{font-size: 20px; margin: 5px 0; letter-spacing: .02em} .cartel-float h2{font-size: 25px; letter-spacing: .005em; color: var(--text); font-style: italic; font-weight: 500; margin: 15px 0} .cartel-float h2 .small{font-weight: 200;}/* font-size: clamp(15px, 2.5vw, 25px);}*/ .cartel-float h3 {font-size: 18px; letter-spacing: 0.005em} .cartel-float p {font-size: 16px; letter-spacing: .005em; line-height: 1.25; margin: 0} .cartel-float h4{font-size: 19px; letter-spacing: 0.005em;} .cartel-float p{font-size: 16px; position: relative;} .cartel-float .puces {margin-top: 18px; padding-top: 20px; border-top: var(--muted) 1px solid;} .cartel-float .puces p{line-height: 1.5; margin-bottom: 6px; } .cartel-float .puces p::before{content: "";position: absolute;left: -14px; top: .7em; width: .25em; height: .25em; background-color: currentColor; border-radius: 50%} .visuels{position: relative; width: 100%; overflow: visible; min-width: 0;border-bottom: var(--muted) 1px solid; padding-bottom: 45px;} .texte p{font-size: 15px; line-height: 1.2;} .swiper-oeuvres { position: relative; width: 100%; overflow: hidden; } .exportdoc {display: none;} footer {background-color: #FFFFFF; color: #000000!important} footer .newsletter{display: none} footer .contact{grid-template-columns: repeat(3,1fr)} footer h3{font-size: 18px;} footer h4{font-size: 16px;} footer p{font-size: 15px;} }