/* AEC — accueil (artefact d2a5f611). */ .hwrap{max-width:1240px;margin:0 auto;padding:0 32px;} .sec{padding:clamp(84px,13vh,156px) 0;} .sec h2{font-family:var(--aec-disp);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--aec-t);margin:12px 0 0;letter-spacing:-.5px;line-height:1.1;} .shead{max-width:640px;} .shead.center{margin:0 auto;text-align:center;} .shead p{font-family:var(--aec-disp);font-style:italic;font-size:1.22rem;line-height:1.5;color:var(--aec-mut);margin:14px 0 0;} .link{display:inline-flex;align-items:center;gap:10px;color:var(--aec-ch);text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--aec-ch);padding-bottom:5px;transition:gap .25s,color .25s,border-color .25s;} .link:hover{gap:16px;color:var(--aec-t);border-color:var(--aec-cop);} .link::after{content:"→";} /* reveal « élévation » propre à la home */ .reveal{transform:translateY(36px) scale(.986);transition:opacity 1.05s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.2,.7,.2,1);} .reveal.in{transform:none;} .dgrid>.reveal:nth-child(2){transition-delay:.09s;} .dgrid>.reveal:nth-child(3){transition-delay:.18s;} .dgrid>.reveal:nth-child(4){transition-delay:.27s;} /* bouton : reflet balayé */ .btn{position:relative;overflow:hidden;} .btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;} .btn:hover::after{left:130%;} /* ============ HERO ============ */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:130px 24px 60px;overflow:hidden;background:#0d2f37;} .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;will-change:transform;} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,47,55,.5),rgba(13,47,55,.35) 40%,rgba(13,47,55,.7));} .hero__in{position:relative;z-index:5;max-width:900px;width:100%;} .hero h1{font-family:var(--aec-disp);font-weight:400;font-size:clamp(2.9rem,7.2vw,6.2rem);color:var(--aec-iv);line-height:1.02;letter-spacing:-1.5px;margin:18px 0 16px;} .hero h1 em{font-style:italic;color:#f0dcc4;} .hero__sub{font-size:1.12rem;letter-spacing:.2px;color:rgba(250,248,244,.88);max-width:640px;margin:0 auto 34px;} .hero__in>*{opacity:0;transform:translateY(26px);animation:heroIn 1s cubic-bezier(.2,.7,.2,1) forwards;} .hero h1{animation-delay:.25s;} .hero__sub{animation-delay:.45s;} .search{animation-delay:.62s;} .hero__lost{animation-delay:.8s;} @keyframes heroIn{to{opacity:1;transform:none;}} @media(prefers-reduced-motion:reduce){.hero__in>*{opacity:1;transform:none;animation:none;}} .hero__lost{margin-top:22px;} .hero__lost a{color:rgba(250,248,244,.85);font-size:.85rem;text-decoration:underline;text-underline-offset:4px;} .scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;color:rgba(250,248,244,.7);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;} /* search */ /* Les angles sont arrondis UNE seule fois, par la barre, qui rogne ses enfants. * Quand le bouton portait son propre arrondi par-dessus le fond blanc de la barre, les * deux courbes etaient lissees separement : sur les pixels a moitie couverts, le blanc * restait visible sous le teal et dessinait un liseré clair le long de la courbe. * Un seul rognage pour tout le sous-arbre, et le liseré disparait. * Les menus (destination, calendriers) sont poses sur en position fixed par * search.js : overflow:hidden ne les rogne pas. */ .search{display:flex;background:rgba(255,255,255,.97);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(10,30,35,.35);max-width:820px;margin:0 auto;} .search__f{flex:1;text-align:left;padding:14px 22px;border-right:1px solid var(--aec-st);} .search__f label{display:block;font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--aec-mut);margin-bottom:2px;} .search__f select{width:100%;border:0;background:transparent;font-family:var(--aec-sans);font-size:.94rem;color:var(--aec-ch);outline:none;cursor:pointer;appearance:none;padding:2px 0;} .search__btn{background:var(--aec-t);color:var(--aec-iv);border:0;padding:0 32px;display:flex;align-items:center;gap:9px;font-family:var(--aec-sans);font-weight:500;letter-spacing:.5px;cursor:pointer;transition:background .25s;} .search__btn:hover{background:var(--aec-td);} /* le rognage couperait un anneau de focus pose a l'exterieur : on le rentre */ .search__btn:focus-visible{outline:2px solid var(--aec-cop);outline-offset:-5px;} @media(max-width:700px){.search{flex-direction:column;}.search__f{border-right:0;border-bottom:1px solid var(--aec-st);}.search__btn{padding:16px;justify-content:center;}} /* ============ DESTINATIONS ============ */ .dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;} .dcard{position:relative;height:400px;border-radius:16px;overflow:hidden;display:block;text-decoration:none;background-size:cover;background-position:center;background-color:#0e2f37;transition:transform .6s cubic-bezier(.2,.7,.2,1);} .dcard:hover{transform:scale(1.015);} .dcard__n{position:absolute;top:20px;left:24px;z-index:4;font-family:var(--aec-disp);font-size:1.05rem;color:var(--aec-iv);opacity:.85;letter-spacing:1px;} .dcard__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,35,.18) 0%,transparent 26%,transparent 52%,rgba(10,30,35,.8));z-index:2;} .dcard__lab{position:absolute;left:24px;bottom:24px;z-index:3;color:var(--aec-iv);transition:transform .55s cubic-bezier(.2,.7,.2,1);} .dcard:hover .dcard__lab{transform:translateY(-7px);} .dcard__lab span{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--aec-sable);} .dcard__lab h3{font-family:var(--aec-disp);font-weight:500;font-size:1.75rem;margin:4px 0 2px;} .dcard__lab small{font-size:.82rem;opacity:.85;} @media(max-width:900px){.dgrid{grid-template-columns:1fr 1fr;}.dcard{height:300px;}} /* ============ SPLIT ============ */ .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;} .split__img{height:520px;border-radius:18px;overflow:hidden;background:#0e2f37;} .split__img img{width:100%;height:100%;object-fit:cover;display:block;} .split__t p{font-size:1.05rem;color:#3a352e;margin:18px 0 28px;} @media(max-width:900px){.split{grid-template-columns:1fr;}.split__img{height:320px;}} /* ============ COUPS DE CŒUR (carrousel) ============ */ .pc{background:#fff;border:1px solid var(--aec-st);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s;} .pc:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(20,14,8,.13);} .pc__a{text-decoration:none;color:inherit;display:block;} .pc__img{height:220px;position:relative;overflow:hidden;background-color:#0e2f37;} .pc__img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1);} .pc:hover .pc__img>img{transform:scale(1.055);} .pc__tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--aec-t);font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px;} .pc__b{padding:26px 22px 22px;} .pc__b h3{font-family:var(--aec-disp);font-weight:500;font-size:1.18rem;color:var(--aec-t);margin:0 0 3px;line-height:1.25;} .pc__loc{font-size:.85rem;color:var(--aec-mut);margin:0 0 16px;} .pc__foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--aec-st);} .pc__facts{font-size:.8rem;color:var(--aec-mut);} .pc__link{font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--aec-cop);} .ccar-wrap{overflow:hidden;} .ccar{display:flex;gap:24px;overflow-x:auto;padding:6px max(32px,calc(50vw - 620px)) 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;} .ccar.is-drag{cursor:grabbing;} .ccar.is-drag a{pointer-events:none;} .ccar img,.ccar a{-webkit-user-drag:none;} .ccar::-webkit-scrollbar{display:none;} .ccar>.pc{flex:0 0 350px;} @media(max-width:600px){.ccar>.pc{flex:0 0 84vw;}} /* ============ IMMERSIVE ============ */ .imm{position:relative;height:82vh;min-height:540px;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;} .imm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,35,.35),rgba(10,30,35,.5));} .imm__in{position:relative;z-index:2;color:var(--aec-iv);max-width:780px;padding:0 24px;} .imm__in .eye{color:var(--aec-sable);} .imm__in h2{font-family:var(--aec-disp);font-weight:400;color:var(--aec-iv);font-size:clamp(2.1rem,4.6vw,3.6rem);margin:16px 0 26px;letter-spacing:-.5px;} .imm__in a.link{color:var(--aec-iv);border-color:rgba(250,248,244,.5);} .imm__in a.link:hover{border-color:var(--aec-sable);color:var(--aec-sable);} @media(max-width:820px){.imm{background-attachment:scroll;height:70vh;}} @media(prefers-reduced-motion:reduce){.imm{background-attachment:scroll;}} /* ============ CONC (bande teal) ============ */ .conc{background:var(--aec-t);color:var(--aec-iv);text-align:center;} .conc .eye{color:var(--aec-sable);} .conc h2{color:var(--aec-iv);max-width:16ch;margin:12px auto 0;} .conc p{max-width:60ch;margin:18px auto 30px;color:rgba(250,248,244,.85);font-size:1.05rem;} .conc .btn{background:var(--aec-cop);color:#fff!important;} .conc .btn:hover{background:#cfa286;} .conc a.link{color:var(--aec-iv);border-color:rgba(250,248,244,.5);} .conc a.link:hover{color:var(--aec-sable);border-color:var(--aec-sable);} /* ============ CARNETS (carrousel blog) ============ */ .bc{text-decoration:none;display:block;} .bc__img{height:240px;border-radius:16px;margin-bottom:18px;background-size:cover;background-position:center;background-color:#0e2f37;transition:transform .5s,box-shadow .5s;} .bc:hover .bc__img{transform:scale(1.03);box-shadow:0 20px 44px rgba(20,14,8,.16);} .bc__eye{font-size:.66rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--aec-cop);} .bc__b h3{font-family:var(--aec-disp);font-weight:500;font-size:1.28rem;color:var(--aec-t);margin:8px 0 6px;line-height:1.2;} .bc__b p{font-size:.9rem;color:var(--aec-mut);margin:0;} .bc__cta{display:inline-block;margin-top:14px;font-family:var(--aec-sans);font-size:.72rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--aec-cop);transition:letter-spacing .25s,color .2s;} .bc:hover .bc__cta{letter-spacing:2.4px;color:var(--aec-t);} .ccar--blog>.bc{flex:0 0 400px;} @media(max-width:600px){.ccar--blog>.bc{flex:0 0 84vw;}} /* ============ INSTAGRAM (mosaïque magazine) ============ */ .igwrap{background:#fff;} .ighead{text-align:center;margin-bottom:30px;} .iglink{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--aec-t);text-decoration:none;font-size:.85rem;font-weight:600;letter-spacing:.5px;} .iglink:hover{color:var(--aec-cop);} .iggrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;gap:12px;max-width:1080px;margin:0 auto;} .ig{position:relative;overflow:hidden;border-radius:12px;background:#0e2f37;display:block;} .ig__im{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.15s cubic-bezier(.2,.7,.3,1);} .ig:hover .ig__im{transform:scale(1.08);} .ig::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,38,43,.62),transparent 46%);opacity:0;transition:opacity .4s;} .ig:hover::after{opacity:1;} .ig__cap{position:absolute;left:16px;bottom:14px;z-index:3;color:#fff;font-family:var(--aec-disp);font-weight:500;font-size:1rem;letter-spacing:.2px;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;text-shadow:0 2px 14px rgba(0,0,0,.5);} .ig__cap::before{content:"";display:block;width:22px;height:2px;background:var(--aec-cop);margin-bottom:8px;transform:scaleX(0);transform-origin:left;transition:transform .45s .05s;} .ig:hover .ig__cap{opacity:1;transform:none;} .ig:hover .ig__cap::before{transform:scaleX(1);} .ig__ov{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7) translateY(-4px);transition:opacity .35s,transform .35s;} .ig:hover .ig__ov{opacity:1;transform:none;} .ig__ov svg{width:17px;height:17px;} .ig--a{grid-column:1/3;grid-row:1/3;} .ig--b{grid-column:3/4;grid-row:1/2;} .ig--c{grid-column:4/5;grid-row:1/2;} .ig--d{grid-column:3/4;grid-row:2/4;} .ig--e{grid-column:4/5;grid-row:2/3;} .ig--f{grid-column:4/5;grid-row:3/4;} .ig--g{grid-column:1/3;grid-row:3/4;} .ig--a .ig__cap{font-size:1.25rem;} .ig--a .ig__im{animation:igkb 15s ease-in-out infinite alternate;} @keyframes igkb{from{transform:scale(1);}to{transform:scale(1.1);}} .ig--a:hover .ig__im{animation-play-state:paused;} @media(prefers-reduced-motion:reduce){.ig--a .ig__im{animation:none;}} @media(max-width:760px){.iggrid{grid-template-columns:1fr 1fr;grid-auto-rows:132px;}.ig--a{grid-column:1/3;grid-row:auto;grid-row-end:span 2;}.ig--b,.ig--c,.ig--d,.ig--e,.ig--f,.ig--g{grid-column:auto;grid-row:auto;}.ig--a .ig__im{animation:none;}} /* ============ SAVOIR-FAIRE / STATS ============ */ .sf__stats{display:flex;justify-content:center;gap:clamp(30px,6vw,90px);margin:40px 0 46px;flex-wrap:wrap;} .stat{text-align:center;} .stat b{display:block;font-family:var(--aec-disp);font-weight:500;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--aec-t);line-height:1;} .stat span{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--aec-mut);} /* ============ FAQ CONTACT ============ */ .faqc{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,88px);align-items:start;} @media(max-width:900px){.faqc{grid-template-columns:1fr;gap:46px;}} .faqc__left>p{color:var(--aec-mut);font-size:1.05rem;margin:16px 0 28px;} .faqc__opts{display:flex;flex-direction:column;gap:4px;margin-bottom:30px;} .faqc__opt{display:flex;align-items:center;gap:14px;text-decoration:none;padding:10px 0;} .faqc__ic{width:46px;height:46px;border-radius:50%;background:var(--aec-iv);border:1px solid var(--aec-st);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .2s,border-color .2s;} .faqc__opt:hover .faqc__ic{background:#fff;border-color:var(--aec-cop);} .faqc__ic svg{width:22px;height:22px;} .faqc__tt b{display:block;font-family:var(--aec-disp);font-weight:500;font-size:1.16rem;color:var(--aec-t);line-height:1.1;} .faqc__tt>span{font-size:.82rem;color:var(--aec-mut);} .acc details{border-bottom:1px solid var(--aec-st);} .acc details:first-child{border-top:1px solid var(--aec-st);} .acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--aec-disp);font-weight:500;font-size:clamp(1.05rem,2vw,1.28rem);color:var(--aec-t);} .acc summary::-webkit-details-marker{display:none;} .acc summary::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--aec-cop);border-bottom:2px solid var(--aec-cop);transform:rotate(45deg);transition:transform .3s;} .acc details[open] summary::after{transform:rotate(-135deg);} .acc__a{padding:0 4px 24px;color:#3a352e;font-size:1rem;line-height:1.65;max-width:70ch;} /* ============ RÉASSURANCE ============ */ .re__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px;} .re__i{text-align:center;} .re__ic{width:36px;height:36px;stroke:var(--aec-cop);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 14px;display:block;} .re__i h4{font-family:var(--aec-disp);font-weight:500;font-size:1.08rem;color:var(--aec-t);margin:0 0 7px;} .re__i p{font-size:.88rem;color:var(--aec-mut);margin:0;line-height:1.5;} @media(max-width:820px){.re__grid{grid-template-columns:1fr 1fr;gap:26px;}} /* ===== respiration + fleches des carousels (revue Sacha) ===== */ .ccar-wrap{margin-top:26px;} /* .ccar-nav : styles partagés dans page-shared.css (flèches sur tous les carrousels). */ /* ===== cartes regions : rail glissant en mobile (revue Sacha) ===== */ .ddots{display:none;} @media(max-width:700px){ .dgrid{display:flex;overflow-x:auto;gap:12px;margin:28px -24px 0;padding:4px 24px 10px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .dgrid::-webkit-scrollbar{display:none;} .dgrid>.dcard{flex:0 0 74vw;height:250px;scroll-snap-align:center;} .dcard__lab h3{font-size:1.45rem;} .dcard__n{top:14px;left:18px;} /* affordance carrousel : points de pagination */ .ddots{display:flex;justify-content:center;gap:8px;margin-top:16px;} .ddot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--aec-st);cursor:pointer;transition:background .3s,transform .3s;} .ddot.on{background:var(--aec-cop);transform:scale(1.25);} } /* Inspiration — onglets autour du titre + compositions magazine */ .une__bar{display:flex;align-items:baseline;justify-content:center;gap:clamp(20px,3.2vw,54px);max-width:1120px;margin:0 auto 52px;flex-wrap:wrap;} .une__title{font-family:var(--aec-disp);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.5px;color:var(--aec-t);margin:0;white-space:nowrap;} .une__tabs{display:flex;align-items:baseline;justify-content:center;gap:clamp(20px,3.2vw,54px);flex-wrap:wrap;} .une__tab{background:none;border:0;cursor:pointer;padding:6px 2px 10px;font-family:var(--aec-sans);font-size:.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--aec-mut);position:relative;transition:color .25s;white-space:nowrap;} .une__tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aec-cop);transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.2,.7,.2,1);} .une__tab:hover{color:var(--aec-t);} .une__tab.on{color:var(--aec-t);} .une__tab.on::after{transform:scaleX(1);} } .une__pane{display:none;} .une__pane.on{display:block;animation:uneFade .45s ease;} @keyframes uneFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} /* deux écritures : le collage des adresses (.unex) et le carnet (.unec) */ /* le carnet : images superposées, texte à droite, lettrine */ .unec{display:grid;grid-template-columns:1.05fr 1fr;gap:58px;align-items:center;} .unec__imgs{position:relative;height:470px;} .unec__i1{width:80%;height:88%;object-fit:cover;border-radius:18px;display:block;} .unec__i2{position:absolute;right:0;bottom:0;width:46%;height:52%;object-fit:cover;border-radius:14px;border:6px solid #fff;box-shadow:0 24px 54px rgba(10,30,35,.24);} .unec__t .eye{display:block;margin-bottom:10px;} .unec__t h3{font-family:var(--aec-disp);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.4px;color:var(--aec-t);margin:0 0 18px;line-height:1.2;} /* collage : deux plans photo décalés, très peu de texte (repère Le Collectionist). * Le tirage reste dans le flux (marge négative) : sa légende ne peut jamais * se poser sur la grande photo, à aucune largeur. */ .unex{display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(30px,4vw,64px);align-items:center;} .unex--rev{grid-template-columns:.84fr 1.16fr;} .unex--rev .unex__st{order:2;} .unex__a{display:block;overflow:hidden;border-radius:18px;background:var(--aec-st);} .unex__a img{display:block;width:100%;height:clamp(340px,34vw,480px);object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1);} .unex__a:hover img{transform:scale(1.045);} /* les carnets, posés sur la photo : des tirages nus, pas des cartons. Ils restent * dans le flux (marge négative) : les titres ne peuvent jamais passer sur l'image. */ .uncards{position:relative;z-index:2;display:grid;grid-template-columns:1.26fr .86fr .96fr;gap:clamp(20px,2.2vw,40px);align-items:start;margin:-104px clamp(-40px,-2.6vw,-16px) 0 clamp(16px,3.4vw,58px);} .unex--rev .uncards{margin-left:clamp(-34px,-2.2vw,-14px);margin-right:clamp(14px,3vw,52px);} .uncard{display:block;text-decoration:none;color:inherit;} .uncard:nth-child(2){margin-top:52px;} .uncard:nth-child(3){margin-top:20px;} .uncard__im{display:block;padding:7px;background:#fff;border-radius:4px;box-shadow:0 32px 62px -20px rgba(10,30,35,.46);transition:box-shadow .5s,transform .5s cubic-bezier(.2,.7,.2,1);} .uncard__im img{border-radius:2px;} .uncard:hover .uncard__im{transform:translateY(-7px);box-shadow:0 42px 78px -22px rgba(10,30,35,.54);} .uncard__im img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;} .uncard__t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:17px;padding-top:14px;border-top:1px solid var(--aec-st);font-family:var(--aec-disp);font-weight:400;font-size:1.04rem;line-height:1.34;letter-spacing:-.1px;color:var(--aec-t);transition:color .3s,border-color .3s;} .uncard:hover .uncard__t{color:var(--aec-cop);border-color:var(--aec-cop);} .unex__t .eye{display:block;margin-bottom:12px;} .unex__t h3{font-family:var(--aec-disp);font-weight:400;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.6px;line-height:1.12;margin:0 0 14px;} .unex__t h3 a{color:var(--aec-t);text-decoration:none;background:linear-gradient(var(--aec-cop),var(--aec-cop)) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1);} .unex__t h3 a:hover{background-size:100% 1px;} .unex__loc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 18px;font-size:.74rem;font-weight:600;letter-spacing:1.7px;text-transform:uppercase;color:var(--aec-cop);} .unex__loc svg{width:15px;height:15px;flex:none;margin-right:-6px;} .unex__loc i{font-style:normal;font-weight:400;letter-spacing:.6px;text-transform:none;font-size:.84rem;color:var(--aec-mut);} .unex__x{color:#3a352e;line-height:1.7;margin:0 0 26px;max-width:40ch;} .unex__go{display:flex;align-items:center;gap:26px;flex-wrap:wrap;} .unex__all{font-size:.74rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--aec-mut);text-decoration:none;transition:color .25s;} .unex__all:hover{color:var(--aec-t);} /* croquis au trait : signature discrète, jamais un élément qui capte le regard */ .unex__motif{display:block;width:clamp(168px,16vw,238px);height:auto;margin-top:clamp(30px,3.4vw,50px);color:var(--aec-cop);opacity:.4;} /* Le croquis (crête / rivage) se trace quand il entre à l'écran (classe .in posée par fx.js). */ .unex__motif [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;} .unex__motif.in [data-draw]{animation:aec-unex-draw 1.5s cubic-bezier(.6,0,.35,1) forwards;animation-delay:var(--d,0s);} @keyframes aec-unex-draw{to{stroke-dashoffset:0;}} @media (prefers-reduced-motion:reduce){.unex__motif [data-draw]{stroke-dashoffset:0;animation:none;}} @media(max-width:1020px){.unex__motif{margin-top:26px;width:170px;}} @media(max-width:1020px){ .unec,.unex,.unex--rev{grid-template-columns:1fr;gap:32px;} .unec__imgs{height:360px;} .unex--rev .unex__st{order:0;} .unex--rev .unex__a img{height:clamp(300px,44vw,420px);} .uncards,.unex--rev .uncards{margin:-58px 0 0;grid-template-columns:repeat(3,1fr);gap:16px;} .uncard:nth-child(2){margin-top:22px;} .uncard:nth-child(3){margin-top:9px;} .uncard__t{font-size:.95rem;margin-top:14px;padding-top:12px;-webkit-line-clamp:3;} .uncard__im{padding:6px;} } @media(max-width:820px){ /* Le titre repasse au-dessus des onglets : les deux groupes qui l'encadraient sur * desktop n'ont plus de raison d'être et se cassaient en deux lignes décalées * (« Nouveautés Été » puis « Hiver Découverte »). On les fond en une seule ligne * d'onglets centrée, avec une graisse de texte qui la fait tenir sur un téléphone. */ .une__bar{flex-wrap:wrap;justify-content:center;gap:2px clamp(14px,4.4vw,22px);margin-bottom:38px;} .une__title{width:100%;text-align:center;order:-1;margin-bottom:16px;} .une__tabs--l,.une__tabs--r{display:contents;} .une__tab{font-size:.72rem;letter-spacing:1.3px;padding:6px 0 9px;} } @media(max-width:640px){ .unec__imgs{height:300px;} .unec__i2{border-width:4px;} .unex__a img,.unex--rev .unex__a img{height:270px;} /* rail défilant : trois cartes ne tiennent pas côte à côte sur un téléphone. * Il déborde jusqu'aux bords de l'écran : coupé au bord de la colonne, il donnait * l'impression d'un titre tronqué au milieu d'un mot plutôt que d'un rail à faire * glisser. Le fond de rail laisse aussi respirer l'ombre portée des tirages. */ .uncards,.unex--rev .uncards{display:flex;margin:-40px -32px 0;padding:0 32px 26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:32px;scrollbar-width:none;} .uncards::-webkit-scrollbar{display:none;} .uncard{flex:0 0 70%;scroll-snap-align:start;} .uncard:nth-child(2),.uncard:nth-child(3){margin-top:0;} }