/* ========================================================= Tristan — système de design « crème chaude » Base claire, encre brune, accents tropicaux. Le brun profond sert de ponctuation, jamais de fond général. identité complète d'une page (couleurs + typo + rayons) teinte seule, appliquée au survol des portes ========================================================= */ /* ---------- couleurs communes à l'identité et à la teinte ---------- */ :root, [data-teinte="accueil"],[data-identite="drone"]{ --accent:#E8623D; /* corail */ --accent-2:#1E8F82; /* teal */ --sur-accent:#FFF8F4; --fond:#FAF9F5; --fond-2:#F3ECDF; --halo-a:#E8623D; --halo-b:#1E8F82; --halo-c:#E8A93D; } [data-teinte="immobilier"],[data-identite="immobilier"]{ --accent:#1E8F82; --accent-2:#3D6E7A; --sur-accent:#F1F8F5; --fond:#F5F7F3; --fond-2:#E7EFEA; --halo-a:#1E8F82; --halo-b:#7FB8AE; --halo-c:#B9D2C8; } [data-teinte="mariage"],[data-identite="mariage"]{ --accent:#C97C63; --accent-2:#D9A79A; --sur-accent:#FFF8F4; --fond:#FCF3EE; --fond-2:#F5E4DE; --halo-a:#C97C63; --halo-b:#D9A79A; --halo-c:#E8A93D; } [data-teinte="entreprise"],[data-identite="entreprise"]{ --accent:#3D6E7A; --accent-2:#8A8378; --sur-accent:#F2F7F8; --fond:#F4F3EE; --fond-2:#E9E7DE; --halo-a:#3D6E7A; --halo-b:#8A8378; --halo-c:#C9C3B4; } [data-teinte="drone"],[data-identite="drone"]{ --accent:#E8623D; --accent-2:#E8A93D; --sur-accent:#FFF8F4; --fond:#FAF7F2; --fond-2:#F3ECDF; --halo-a:#E8623D; --halo-b:#E8A93D; --halo-c:#1E8F82; } :root{ --encre:#241D14; --encre-2:#5C5346; --encre-3:#8A6A5D; --scene:#241D14; /* sections de ponctuation */ --scene-2:#3A241D; --halo-op:.20; --halo-flou:130px; --grain-op:.045; --papier:rgba(58,36,29,.10); --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px; --titre-style:normal; --titre-tracking:-.012em; --titre-interligne:1.08; --titre-poids:400; --flou:18px; --display:'Cormorant Garamond',Georgia,serif; --sans:'Work Sans',system-ui,sans-serif; --label:'Bricolage Grotesque','Work Sans',sans-serif; --petit-titre:var(--label); --marge:clamp(16px,4vw,54px); --lueur:color-mix(in srgb, var(--accent) 34%, transparent); --lueur-faible:color-mix(in srgb, var(--accent) 13%, transparent); --ombre:0 20px 48px -24px rgba(58,36,29,.34); --ombre-basse:0 8px 22px -14px rgba(58,36,29,.28); } /* ---------- variantes typographiques, par page uniquement ---------- */ [data-identite="immobilier"]{--r-s:9px;--r-m:13px;--r-l:17px;--r-xl:22px;--titre-tracking:-.022em;--titre-interligne:1.04} [data-identite="mariage"]{--r-s:18px;--r-m:26px;--r-l:34px;--r-xl:42px;--titre-style:italic;--titre-tracking:0;--titre-interligne:1.14;--titre-poids:300} [data-identite="entreprise"]{--r-s:8px;--r-m:11px;--r-l:14px;--r-xl:18px;--titre-tracking:-.026em;--titre-interligne:1.02;--titre-poids:500} [data-identite="drone"]{--r-s:11px;--r-m:16px;--r-l:22px;--r-xl:28px} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:16.5px;line-height:1.62; font-weight:350;-webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .55s ease} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} video{display:block} a{color:inherit} img{display:block;width:100%;height:100%;object-fit:cover} section[id],div[id]{scroll-margin-top:104px} @media(max-width:760px){section[id],div[id]{scroll-margin-top:20px}} /* ================= Lavis de couleur ================= */ .halos{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .halo{position:absolute;border-radius:50%;filter:blur(var(--halo-flou));opacity:var(--halo-op); transition:background .7s ease,opacity .7s ease} .halo--1{width:56vw;height:56vw;background:var(--halo-a);top:-14%;left:-10%;animation:derive 34s ease-in-out infinite alternate} .halo--2{width:46vw;height:46vw;background:var(--halo-b);top:40%;right:-12%;animation:derive 43s ease-in-out infinite alternate-reverse} .halo--3{width:38vw;height:38vw;background:var(--halo-c);bottom:-12%;left:22%;animation:derive 38s ease-in-out infinite alternate} @keyframes derive{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,-7%) scale(1.16)}} /* grain de papier : en fusion multiply, il assombrit à peine la trame */ .grain{position:fixed;inset:-60%;z-index:95;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")} /* ================= Liquid glass, version claire ================= */ .verre{position:relative;isolation:isolate;border-radius:var(--r-m);overflow:hidden;border:0; background-color:rgba(255,255,255,.58); background-image:linear-gradient(158deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.2) 46%,rgba(255,255,255,.06) 100%); backdrop-filter:blur(var(--flou)) saturate(1.45); -webkit-backdrop-filter:blur(var(--flou)) saturate(1.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--ombre)} /* arête : liseré clair en haut-gauche, ombre fine en bas-droite */ .verre::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.45) 26%, rgba(58,36,29,.07) 58%,rgba(255,255,255,.55) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude} .verre::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:radial-gradient(130% 86% at 16% -12%,rgba(255,255,255,.5),transparent 56%)} /* posé sur une vidéo : plus opaque pour garantir la lecture de l'encre */ .verre--dense{background-color:rgba(250,249,245,.86);backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3)} /* teinté par l'accent : utilisé sur les encadrés de vidéo */ .verre--teinte{background-color:color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.7))} /* posé sur une vidéo ET teinté : la couleur d'identité passe dans le fond de l'encadré, comme demandé, sans sacrifier la lisibilité de l'encre */ .verre--dense.verre--teinte{background-color:color-mix(in srgb, var(--accent) 9%, rgba(250,249,245,.89))} /* ================= Typo ================= */ h1,h2,h3{font-family:var(--display);font-weight:var(--titre-poids);font-style:var(--titre-style); letter-spacing:var(--titre-tracking);line-height:var(--titre-interligne)} h2.tt{font-size:clamp(30px,4.6vw,52px);margin-top:12px;line-height:1.1} .eyebrow{font-family:var(--label);font-size:11.5px;font-weight:500;color:var(--accent); display:flex;align-items:center;gap:10px;letter-spacing:.1em;text-transform:uppercase} .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);flex:none} .meta{font-family:var(--label);font-size:12px;font-weight:400;color:var(--encre-3);letter-spacing:.02em} /* ================= Logo + nav ================= */ .marque-fixe{position:fixed;top:19px;left:clamp(16px,4vw,40px);z-index:82;display:flex;align-items:center;gap:11px;text-decoration:none} .marque-fixe svg{width:38px;height:38px;color:var(--accent); filter:drop-shadow(0 2px 6px rgba(255,255,255,.9));transition:color .55s} .marque-fixe .mot{font-family:var(--label);font-size:14px;font-weight:600;letter-spacing:.16em;color:var(--encre); text-transform:lowercase;display:none} @media(min-width:600px){.marque-fixe .mot{display:inline}} .nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:80;--flou:20px; display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;max-width:calc(100vw - 28px)} .nav a{font-family:var(--label);font-size:12.5px;font-weight:450;color:var(--encre-2);text-decoration:none; white-space:nowrap;padding:9px 15px;border-radius:999px;transition:color .2s,background .2s} .nav a:hover,.nav a.actif{color:var(--encre);background:rgba(58,36,29,.07)} .nav a.tel{color:var(--encre);background:rgba(58,36,29,.06);display:none} @media(min-width:1080px){.nav a.tel{display:inline}} .nav a.cta{background:var(--accent);color:var(--sur-accent);box-shadow:0 6px 18px -8px var(--accent); transition:background .55s,box-shadow .55s} .nav .defil{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .nav .defil::-webkit-scrollbar{display:none} @media(max-width:900px){.nav{top:auto;bottom:15px;width:calc(100vw - 24px)}} /* ================= Bandes vidéo ================= */ .bande{position:relative;margin:var(--marge);border-radius:var(--r-xl);overflow:hidden; background:var(--scene);box-shadow:var(--ombre)} .bande--hero{height:88svh;min-height:470px;margin-top:78px} .bande--projet{height:62svh;min-height:330px} .bande video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02)} /* voile léger : il assoit l'image sans l'assombrir comme avant */ .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,29,20,.18) 0%,transparent 34%,rgba(36,29,20,.42) 100%)} .bloom{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light; background:radial-gradient(ellipse 60% 46% at 50% 30%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 72%)} .carte-hero{position:absolute;left:clamp(14px,3.2vw,38px);right:clamp(14px,3.2vw,38px);bottom:clamp(14px,3.2vw,38px); max-width:660px;padding:clamp(22px,3.2vw,36px);border-radius:var(--r-l)} .carte-hero h1{font-size:clamp(34px,5.6vw,64px);margin:14px 0 0} .carte-hero .sous{color:var(--encre-2);font-size:16px;margin-top:14px} .badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} .badge{font-family:var(--label);font-size:11.5px;color:var(--encre-2);border:1px solid var(--papier); padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.5)} .badge.fort{color:var(--sur-accent);background:var(--accent);border-color:transparent} .etiq{position:absolute;left:clamp(14px,3.2vw,34px);bottom:clamp(14px,3.2vw,34px); padding:13px 22px;border-radius:999px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .etiq strong{font-family:var(--petit-titre);font-weight:600;font-size:clamp(14.5px,1.7vw,16.5px);letter-spacing:0} .progression{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);transition:width .18s linear;z-index:2} /* ================= Banderole ================= */ .ruban{overflow:hidden;padding:20px 0;margin:calc(var(--marge) * 1.1) 0; border-top:1px solid var(--papier);border-bottom:1px solid var(--papier);background:var(--fond-2)} .ruban-piste{display:flex;width:max-content;will-change:transform; animation:glisse var(--duree,34s) linear infinite} .ruban-piste span{font-family:var(--display);font-style:var(--titre-style);font-size:clamp(22px,3vw,34px); color:var(--encre-2);white-space:nowrap;display:flex;align-items:center;gap:30px;padding-right:30px} .ruban-piste span::after{content:"❋";color:var(--accent);font-size:.52em} @keyframes glisse{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--pas,-50%) * 1),0,0)}} .ruban:hover .ruban-piste{animation-play-state:paused} /* ================= Révélations ================= */ .rev{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)} .rev.vu{opacity:1;transform:none} .rev.d1{transition-delay:.08s}.rev.d2{transition-delay:.16s}.rev.d3{transition-delay:.24s} /* ================= Blocs ================= */ .bloc{margin:calc(var(--marge) * 2) var(--marge)} .bloc-tete{margin-bottom:28px;max-width:680px} .bloc-tete .meta{margin-top:10px} /* manifeste : la ponctuation sombre du site */ .respire{margin:calc(var(--marge) * 2) 0;padding:clamp(48px,9vw,110px) var(--marge); background:var(--scene);color:#F3ECDF;position:relative;overflow:hidden} .respire::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 120% at 12% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%)} .respire p{font-family:var(--display);font-style:var(--titre-style);font-size:clamp(26px,4vw,46px); line-height:1.26;max-width:900px;position:relative} .respire em{font-style:normal;color:var(--accent)} /* ================= Livrables / portes ================= */ .livrables,.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:13px} .livrable{padding:24px;border-radius:var(--r-l);transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s} .livrable:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 54px -26px rgba(58,36,29,.4)} .livrable .puce-n{font-family:var(--label);font-size:11.5px;font-weight:500;color:var(--accent);letter-spacing:.08em} .livrable h3{font-family:var(--petit-titre);font-weight:600;font-style:normal;font-size:18px;letter-spacing:0;margin:11px 0 8px} .livrable p{font-size:14.5px;color:var(--encre-2);line-height:1.58} /* ================= Portail ================= */ .portail{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)} .portes{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.portes{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.portes{grid-template-columns:1fr}} .porte{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:var(--r-l); min-height:clamp(186px,27vh,272px);background:var(--scene);box-shadow:var(--ombre-basse); transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s} .porte video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .6s} .porte-fond{position:absolute;inset:0;background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 40%,transparent),transparent 75%)} .porte-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,29,20,.1) 26%,rgba(36,29,20,.82) 100%)} .porte-txt{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#F5E4DE} .porte-txt .n{font-family:var(--label);font-size:11.5px;font-weight:500;color:var(--accent);letter-spacing:.08em} .porte-txt h3{font-size:clamp(23px,2.5vw,30px);margin:7px 0 0;color:#FFF8F4} .porte-txt p{font-size:14px;color:#D9BEB0;line-height:1.5;margin-top:8px;max-height:0;overflow:hidden;opacity:0; transition:max-height .5s,opacity .4s} .porte-txt .fleche{position:absolute;top:20px;right:20px;font-family:var(--label);font-size:16px; color:#F5E4DE;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s} .porte:hover,.porte:focus-visible{transform:translateY(-6px);box-shadow:0 30px 60px -26px rgba(58,36,29,.5)} .porte:hover video,.porte:focus-visible video{opacity:.9} .porte:hover .porte-txt p,.porte:focus-visible .porte-txt p{max-height:96px;opacity:1} .porte:hover .fleche,.porte:focus-visible .fleche{opacity:1;transform:none} .portail-pied{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .portail-pied a,.plus a,.fiche-liens a,.contact-direct a{font-family:var(--label);font-size:12.5px;text-decoration:none; color:var(--encre);padding:12px 22px;border-radius:999px;border:1px solid var(--papier); background:rgba(255,255,255,.6);transition:border-color .2s,box-shadow .2s,transform .2s} .portail-pied a:hover,.plus a:hover,.fiche-liens a:hover,.contact-direct a:hover{border-color:var(--accent);transform:translateY(-2px)} .portail-pied a.plein,.fiche-liens a.plein{background:var(--accent);color:var(--sur-accent);border-color:transparent} /* ================= Chiffres ================= */ .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:13px;margin:calc(var(--marge) * 1.6) var(--marge)} .chiffre{padding:24px;border-radius:var(--r-l)} .chiffre b{display:block;font-family:var(--display);font-style:var(--titre-style);font-weight:var(--titre-poids); font-size:clamp(38px,5.4vw,58px);line-height:.98;color:var(--accent)} .chiffre span{display:block;font-size:13.5px;color:var(--encre-2);margin-top:10px;line-height:1.45} /* ================= Fiche projet ================= */ .fiche{margin:14px var(--marge) calc(var(--marge) * 1.7);padding:clamp(24px,3.6vw,42px);border-radius:var(--r-l); display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)} @media(max-width:820px){.fiche{grid-template-columns:1fr;gap:26px}} .fiche h3{font-size:clamp(25px,3vw,34px);margin:12px 0 15px} .fiche p{color:var(--encre-2);font-size:15.5px;line-height:1.7;max-width:60ch} .fiche p + p{margin-top:13px} .fiche-specs{display:grid;align-content:start} .spec{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--papier)} .spec:last-child{border-bottom:0} .spec dt{font-family:var(--label);font-size:11.5px;color:var(--encre-3);flex:none;letter-spacing:.04em} .spec dd{font-size:14px;color:var(--encre);text-align:right} .fiche-liens{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px} /* ================= Portfolio ================= */ .filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .filtre{font-family:var(--label);font-size:12.5px;color:var(--encre-2);background:rgba(255,255,255,.6); border:1px solid var(--papier);padding:10px 18px;border-radius:999px;cursor:pointer;transition:all .2s} .filtre:hover{color:var(--encre);border-color:var(--encre-3)} .filtre.actif{background:var(--accent);border-color:transparent;color:var(--sur-accent)} .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .projet,.case{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--scene); box-shadow:var(--ombre-basse);transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s} .projet{aspect-ratio:4/3} .projet video,.case video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s} .projet picture,.case picture{position:absolute;inset:0;display:block} .projet .fixe,.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(.9);transition:filter .5s,transform .8s} /* la miniature floue reste visible tant que la vidéo n'est pas chargée */ .bande video,.porte video,.tuile video,.projet video,.case video{background-size:cover;background-position:center} .projet .ombre,.case-voile{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(36,29,20,.86) 100%)} .projet:hover,.projet.on,.case:hover,.case.on{transform:translateY(-5px);box-shadow:0 28px 56px -24px rgba(58,36,29,.5)} .projet:hover video,.projet.on video,.case:hover video,.case.on video{opacity:1} .projet:hover .fixe,.projet.on .fixe,.case:hover img,.case.on img{transform:scale(1.05)} .projet-txt,.case-txt{position:absolute;left:0;right:0;bottom:0;padding:17px 19px;color:#FFF8F4} .projet-txt h3,.case-txt h3{font-family:var(--petit-titre);font-weight:600;font-style:normal; font-size:clamp(15px,1.7vw,17px);letter-spacing:0} .projet-txt .cat,.case-txt .cat{font-family:var(--label);font-size:11.5px;color:var(--accent);display:block;margin-top:4px} .projet.masque,.case.masque{display:none} .plus{margin-top:24px;display:flex;justify-content:center;gap:11px;flex-wrap:wrap} .lien-plus{font-family:var(--label);font-size:12.5px;color:var(--sur-accent);background:var(--accent); border:0;padding:13px 26px;border-radius:999px;cursor:pointer;transition:transform .2s} .lien-plus:hover{transform:translateY(-2px)} /* mosaïque */ .mosaique-tete{padding:calc(var(--marge) + 88px) var(--marge) 0;max-width:740px} .mosaique-tete h1{font-size:clamp(34px,5.2vw,58px);margin:14px 0 0} .mosaique-tete .sous{color:var(--encre-2);font-size:16px;margin-top:14px} .barre-filtres{position:sticky;top:78px;z-index:40;margin:26px var(--marge) 0;padding:5px;border-radius:999px; display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;--flou:20px} .barre-filtres::-webkit-scrollbar{display:none} @media(max-width:900px){.barre-filtres{top:12px}} .mosaique{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:15vh;gap:11px; margin:20px var(--marge) calc(var(--marge) * 2);grid-auto-flow:dense} .case{grid-column:span 2;grid-row:span 2} .case.large{grid-column:span 3} .case.haute{grid-row:span 3} .case.geante{grid-column:span 4;grid-row:span 3} @media(max-width:900px){ .mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:13vh} .case,.case.large,.case.haute{grid-column:span 1;grid-row:span 2} .case.geante{grid-column:span 2} } .volet{position:fixed;inset:0;z-index:120;display:none;padding:var(--marge);align-items:center;justify-content:center; background:rgba(36,29,20,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .volet.ouvert{display:flex} .volet-boite{position:relative;max-width:920px;width:100%;max-height:86svh;overflow:auto; padding:clamp(26px,4vw,46px);border-radius:var(--r-xl);background-color:rgba(255,255,255,.9)} .volet-fermer,.lightbox-fermer{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:999px; border:1px solid var(--papier);background:rgba(255,255,255,.8);color:var(--encre);font-size:20px;cursor:pointer;z-index:3} .volet-boite .fiche{margin:0;padding:0;background:none;box-shadow:none;backdrop-filter:none} .volet-boite .fiche::before,.volet-boite .fiche::after{display:none} /* ================= Bento ================= */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(152px,19vh);gap:13px} .tuile{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--scene);box-shadow:var(--ombre-basse); transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s} .tuile:nth-child(1){grid-column:span 2;grid-row:span 2} .tuile:nth-child(2){grid-column:span 2} .tuile:nth-child(5){grid-column:span 4;grid-row:span 2} .tuile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s} .tuile-fond{position:absolute;inset:0;background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 52%,transparent),color-mix(in srgb,var(--accent-2) 26%,transparent))} .tuile-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,29,20,.06) 32%,rgba(36,29,20,.88) 100%)} .tuile.on{transform:translateY(-5px);box-shadow:0 30px 58px -24px rgba(58,36,29,.5)} .tuile.on video{opacity:1} .tuile-num{position:absolute;top:15px;left:17px;font-family:var(--label);font-size:11.5px;color:#FFF8F4; padding:4px 11px;border-radius:999px;background:rgba(36,29,20,.42);transition:color .35s} .tuile.on .tuile-num{color:var(--accent)} .tuile-txt{position:absolute;left:0;right:0;bottom:0;padding:19px;color:#FFF8F4} .tuile-txt h3{font-size:clamp(23px,2.5vw,29px)} .tuile-txt p{font-size:14px;color:#D9BEB0;line-height:1.5;margin-top:8px;max-height:0;overflow:hidden;opacity:0; transition:max-height .5s cubic-bezier(.2,.8,.3,1),opacity .4s .1s} .tuile.on .tuile-txt p{max-height:132px;opacity:1} @media(max-width:760px){ .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(160px,21vh)} .tuile:nth-child(1){grid-column:span 2;grid-row:span 1} .tuile:nth-child(5){grid-column:span 2} } .declencheur{position:absolute;inset:0;z-index:4;background:none;border:0;cursor:pointer;border-radius:inherit; -webkit-tap-highlight-color:transparent} .declencheur:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} /* ================= Méthode ================= */ .etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:13px} .etape{padding:26px 24px 28px;border-radius:var(--r-l);transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s} .etape:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 28px 56px -26px rgba(58,36,29,.4)} .etape-num{font-family:var(--label);font-size:11.5px;font-weight:500;color:var(--accent);letter-spacing:.08em} .etape h3{font-size:24px;margin:13px 0 10px} .etape p{font-size:14.5px;color:var(--encre-2);line-height:1.58} .etape-duree{display:inline-block;margin-top:15px;font-family:var(--label);font-size:11.5px;color:var(--encre-3); border:1px solid var(--papier);padding:5px 13px;border-radius:999px} /* ================= Témoignages ================= */ .avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:13px} .avis blockquote{padding:28px 26px;border-radius:var(--r-l)} .avis blockquote p{font-family:var(--display);font-style:var(--titre-style);font-size:clamp(23px,2.7vw,28px); line-height:1.34;color:var(--encre)} .avis figcaption{margin-top:20px;font-family:var(--label);font-size:11.5px;color:var(--encre-3);line-height:1.6} .avis figcaption strong{color:var(--accent);font-weight:600;display:block} .etoiles{color:var(--accent);font-size:12px;letter-spacing:.22em;margin-bottom:15px;display:block} /* ================= Questions ================= */ .questions{display:grid;gap:10px;max-width:850px} .q{border-radius:var(--r-m)} .q summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between; align-items:center;gap:18px;font-size:16px;font-weight:450} .q summary::-webkit-details-marker{display:none} .q summary::after{content:"+";font-family:var(--label);font-size:20px;color:var(--accent);flex:none;transition:transform .35s} .q[open] summary::after{transform:rotate(45deg)} .q .rep{padding:0 24px 22px;font-size:15px;color:var(--encre-2);line-height:1.66;max-width:64ch} .q .rep strong{color:var(--encre);font-weight:500} /* ================= Showreel ================= */ .showreel-btn{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-family:var(--label);font-size:12.5px; color:var(--encre);background:rgba(255,255,255,.6);border:1px solid var(--papier); padding:11px 20px 11px 13px;border-radius:999px;transition:border-color .25s,transform .2s} .showreel-btn:hover{border-color:var(--accent);transform:translateY(-2px)} .showreel-btn i{display:grid;place-items:center;width:25px;height:25px;border-radius:999px; background:var(--accent);color:var(--sur-accent);font-style:normal;font-size:10px;padding-left:2px} .lightbox{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:var(--marge); background:rgba(36,29,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .lightbox.ouvert{display:flex} .lightbox-boite{position:relative;width:100%;max-width:1060px;border-radius:var(--r-l);overflow:hidden;background:#241D14} .lightbox video{width:100%;aspect-ratio:16/9;object-fit:cover} /* ================= Devis ================= */ .devis{margin:calc(var(--marge) * 2) var(--marge) var(--marge);padding:clamp(28px,4.8vw,56px); border-radius:var(--r-xl);max-width:920px} .devis h2{font-size:clamp(34px,5.6vw,58px);line-height:1.06;margin:14px 0 12px} .devis .accueil{color:var(--encre-2);font-size:16px;max-width:52ch;margin-bottom:32px} fieldset{border:0;margin-bottom:26px} legend{font-family:var(--label);font-size:11.5px;color:var(--encre-3);margin-bottom:12px;letter-spacing:.05em} .puces{display:flex;flex-wrap:wrap;gap:8px} .puce input{position:absolute;opacity:0;width:0;height:0} .puce span{display:inline-block;font-size:14.5px;color:var(--encre-2);border:1px solid var(--papier); padding:10px 19px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.65);transition:all .18s} .puce span:hover{border-color:var(--encre-3);color:var(--encre)} .puce input:checked+span{background:var(--accent);border-color:transparent;color:var(--sur-accent)} .puce input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px} .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:26px} label.champ{font-family:var(--label);font-size:11.5px;color:var(--encre-3);display:block;margin-bottom:11px;letter-spacing:.05em} input[type=text],input[type=date],input[type=email],textarea{width:100%;color:var(--encre);font-family:var(--sans); font-size:15.5px;background:rgba(255,255,255,.7);border:1px solid var(--papier);border-radius:var(--r-s);padding:13px 15px} input::placeholder,textarea::placeholder{color:var(--encre-3);opacity:.75} textarea{min-height:112px;resize:vertical} input:focus,textarea:focus{outline:0;border-color:var(--accent);background:#fff} .envoi{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px} button.envoyer{background:var(--accent);color:var(--sur-accent);font-family:var(--label);font-weight:500;font-size:15px; border:0;border-radius:999px;padding:16px 34px;cursor:pointer;box-shadow:0 10px 26px -12px var(--accent); transition:transform .12s,box-shadow .25s} button.envoyer:hover{box-shadow:0 16px 36px -12px var(--accent)} button.envoyer:active{transform:scale(.98)} .pot{position:absolute;left:-9999px} .msg{margin-top:20px;padding:16px 19px;border-radius:var(--r-s);font-size:14.5px;display:none} .msg.on{display:block} .msg.ok{background:var(--lueur-faible);border:1px solid var(--lueur);color:var(--encre)} .msg.ko{background:rgba(200,70,60,.1);border:1px solid rgba(200,70,60,.4);color:#8C2F26} input:user-invalid,textarea:user-invalid{border-color:rgba(200,70,60,.6)} button.envoyer[disabled]{opacity:.55;cursor:progress} .requis{color:var(--accent)} .champs-sup{animation:deplie .4s ease;margin-top:26px} @keyframes deplie{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .deplier{font-family:var(--label);font-size:12.5px;color:var(--accent);background:var(--lueur-faible); border:1px solid var(--lueur);padding:12px 21px;border-radius:999px;cursor:pointer;margin-top:24px;transition:transform .2s} .deplier:hover{transform:translateY(-2px)} .deplier::before{content:"+ "} .deplier[aria-expanded="true"]::before{content:"− "} .contact-direct{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--papier)} .contact-direct a b{font-weight:600;color:var(--accent)} /* ================= Pied ================= */ footer{margin-top:calc(var(--marge) * 1.6);padding:clamp(34px,5vw,58px) var(--marge); background:var(--scene);color:#F3ECDF} .pied-haut{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start} .pied-logo svg{width:78px;height:78px;color:var(--accent)} .pied-logo .mot{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.18em;margin-top:12px;display:block} .pied-cols{display:flex;gap:clamp(24px,6vw,74px);flex-wrap:wrap} .pied-cols h4{font-family:var(--label);font-size:11.5px;color:#8A6A5D;margin-bottom:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase} .pied-cols a{display:block;font-size:14.5px;color:#D9BEB0;text-decoration:none;padding:3px 0;transition:color .2s} .pied-cols a:hover{color:var(--accent)} .pied-bas{margin-top:36px;padding-top:22px;border-top:1px solid rgba(245,228,222,.16); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center} .pied-bas .meta{color:#8A6A5D} .pied-legal{display:flex;gap:18px;flex-wrap:wrap} .pied-legal a,.pied-legal span{font-family:var(--label);font-size:11.5px;color:#8A6A5D;text-decoration:none;transition:color .2s} .pied-legal a:hover{color:#F5E4DE} /* ================= Pages texte / 404 ================= */ .texte{margin:calc(var(--marge) + 96px) auto var(--marge);padding:clamp(28px,4.8vw,56px);max-width:830px; border-radius:var(--r-xl);width:calc(100% - var(--marge) * 2)} .texte h1{font-size:clamp(32px,4.8vw,48px);margin-bottom:26px} .texte h2{font-size:25px;margin:32px 0 10px} .texte p,.texte li{font-size:15px;color:var(--encre-2);line-height:1.68} .texte ul{margin:8px 0 0 20px} .texte mark{background:var(--lueur-faible);color:var(--accent);padding:1px 6px;border-radius:5px;font-family:var(--label);font-size:13px} .erreur{min-height:74svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--marge) + 90px) var(--marge)} .erreur h1{font-size:clamp(54px,12vw,132px);line-height:.9} .erreur p{color:var(--encre-2);font-size:17px;margin-top:18px;max-width:46ch} .saut{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--accent); color:var(--sur-accent);font-family:var(--label);font-size:12px} .saut:focus{left:0} .progres-scroll{position:fixed;top:0;left:0;height:3px;width:0;z-index:98;background:var(--accent);pointer-events:none} /* ---- mobile : on allège ---- */ @media(max-width:760px){ .grain{opacity:calc(var(--grain-op) * .7)} .halo--3{display:none} .halo{filter:blur(80px)} .verre{backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)} .bande--hero{margin-top:0;border-radius:0 0 var(--r-xl) var(--r-xl)} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .halo,.ruban-piste{animation:none} .rev{opacity:1;transform:none} *{transition:none!important} }