/* ========================================================================== Scrupul’ — feuille de style du site Charte : taupe brun du logo (#51423F) sur papier écru, accent champagne. Polices : Cormorant Garamond (titres, graisse légère, italique pour les accents — esprit faire-part de mariage) + Jost (texte, graisse légère, capitales espacées). Animations dégradables : tout ce qui est masqué avant animation dépend de html.js-anim (posé par le seulement si le visiteur accepte le mouvement et que JavaScript tourne). ========================================================================== */ /* ----- polices auto-hébergées (variables, sous-ensemble latin) ---------- */ @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../polices/cormorant-garamond-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("../polices/cormorant-garamond-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url("../polices/jost-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* repli serif ajusté pour limiter le saut de mise en page avant l arrivée de Cormorant */ @font-face{font-family:"Cormorant repli";src:local("Georgia"),local("Times New Roman"),local("Times");size-adjust:82%;ascent-override:98%;descent-override:26%} @font-face{font-family:"Jost repli";src:local("Century Gothic"),local("Avenir Next"),local("Segoe UI"),local("Arial");size-adjust:98%} /* ----- jetons ------------------------------------------------------------- */ :root{ --encre:#51423F;--encre-2:#6B5A56;--encre-3:#776662; --papier:#F6F1EA;--papier-2:#EEE6DB;--papier-3:#E3D8C9;--carte:#FBF8F3;--blanc:#FFFDFA; --nuit:#3B2F2C;--nuit-2:#4A3B38; --or:#B8965E;--or-clair:#D9C49B;--or-fonce:#7E6437; /* dégradé en deux moitiés : or à gauche, encre à droite. En faisant glisser sa position, le chiffre « se remplit » d'or de gauche à droite (voir .nf-or). */ --or-remplissage:linear-gradient(90deg,#E9D3A0 0%,#B8965E 12%,#7E6437 25%,#B8965E 38%,#EFE0BE 50%,#51423F 50%,#51423F 100%); --ligne:rgba(81,66,63,.16);--ligne-forte:rgba(81,66,63,.34);--ligne-claire:rgba(246,241,234,.22); --disp:"Cormorant Garamond","Cormorant repli",Georgia,"Times New Roman",serif; --sans:"Jost","Jost repli","Century Gothic","Segoe UI",system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --r:2px; --sp-1:6px;--sp-2:12px;--sp-3:20px;--sp-4:32px;--sp-5:46px;--sp-6:64px;--sp-7:clamp(48px,5.2vw,82px); --fs-0:.7rem;--fs-1:.88rem;--fs-2:1rem;--fs-3:clamp(1rem,.95rem + .22vw,1.12rem); --fs-h3:clamp(1.3rem,1.14rem + .6vw,1.7rem);--fs-h2:clamp(2.1rem,1.5rem + 2.2vw,3.5rem);--fs-h1:clamp(2.35rem,1.6rem + 2.7vw,4rem); --cadre:1240px;--marge:clamp(18px,3.6vw,48px);--entete:74px; color-scheme:light; } @media (max-width:900px){:root{--entete:60px}} /* ----- socle -------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* overflow-x:hidden sur html (pas seulement body) : sinon le tiroir de navigation, poussé hors écran par transform, élargit la fenêtre de mise en page sur mobile */ /* pas de scroll-behavior:smooth global : il anime chaque coup de molette et donne une page qui « saute » ; le défilement doux n'est appliqué qu'aux liens d'ancre (site.js) */ html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 16px);background:var(--papier);overflow-x:hidden} body{margin:0;font:400 1rem/1.55 var(--sans);color:var(--encre);background:var(--papier);overflow-x:hidden;-webkit-font-smoothing:antialiased} img,picture,svg,video{display:block;max-width:100%} /* Toute photo modifiable (.zp) remplit son cadre et applique son recadrage : position du point de mire (--cx/--cy) et zoom (--cz), réglés depuis l'administration. */ .zp{display:block;position:relative;overflow:hidden;width:100%;height:100%} /* L'agrandissement du recadrage est obtenu par la MISE EN PAGE (largeur/hauteur), pas par une transformation : une couche transformée est rastérisée à sa taille d'origine puis étirée, ce qui rendait floue toute photo recadrée avec un zoom. --cxr/--cyr sont --cx/--cy sans unité. */ .zp img{position:absolute;top:calc((100% - 100% * var(--cz,1)) * var(--cyr,.5));left:calc((100% - 100% * var(--cz,1)) * var(--cxr,.5));width:calc(100% * var(--cz,1));height:calc(100% * var(--cz,1));max-width:none;max-height:none;object-fit:cover;object-position:var(--cx,50%) var(--cy,50%)} img{height:auto} picture img{width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} address{font-style:normal} h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.1;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:var(--or-clair);color:var(--nuit)} :focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:2px} .acces-direct{position:absolute;left:-9999px;top:12px;z-index:200;background:var(--encre);color:var(--papier);padding:12px 18px;border-radius:var(--r)} .acces-direct:focus{left:12px} .ico{width:22px;height:22px;flex:0 0 auto} .ico-bouton{width:16px;height:16px;margin-right:2px} @media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease}} /* ----- typographie -------------------------------------------------------- */ .titre-section,.titre-page,.titre-heros,.titre-heros-scinde{font-family:var(--disp);font-weight:600;letter-spacing:-.012em;line-height:1.05;text-wrap:balance} .titre-section{font-size:var(--fs-h2);margin:0 0 12px;max-width:24ch} .titre-page{font-size:var(--fs-h2);margin:0 0 14px} .titre-section em,.titre-heros em,.titre-page em,.titre-heros-scinde em{font-style:italic;font-weight:600;color:var(--or-fonce)} .bloc-sombre .titre-section em,.titre-heros em{color:var(--or-clair)} .titre-petit{font:600 var(--fs-h3)/1.15 var(--disp);letter-spacing:0;margin:0 0 10px} .lead{font-size:var(--fs-3);font-weight:400;line-height:1.55;color:var(--encre-2);max-width:42rem;margin:0} .lead-etroit{max-width:46rem} .bloc-sombre .lead{color:rgba(246,241,234,.82)} .prose p{margin:0 0 .85em} .prose p:last-child{margin-bottom:0} .prose h2{font:600 var(--fs-h3)/1.15 var(--disp);letter-spacing:0;margin:1.8em 0 .5em} .prose h3{font:500 1.35rem/1.3 var(--disp);margin:1.4em 0 .4em} .prose ul{padding-left:1.1em;list-style:disc;margin:0 0 1em} .prose a{text-decoration:underline;text-underline-offset:3px} .tete-section{margin:0 auto var(--sp-4);max-width:66rem;text-align:center} .tete-section .titre-section,.tete-section .lead{margin-left:auto;margin-right:auto} .tete-centre{margin-left:auto;margin-right:auto;text-align:center} .tete-gauche,.tete-gauche.tete-section{text-align:left;margin-left:0;margin-right:0} .tete-gauche .titre-section,.tete-gauche .lead{margin-left:0;margin-right:0} /* ----- boutons et liens --------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:12px 24px;border:1px solid var(--encre);border-radius:var(--r);background:var(--encre);color:var(--papier);font:500 .76rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s} .btn:hover{background:var(--nuit);border-color:var(--nuit);transform:translateY(-2px);box-shadow:0 18px 30px -22px rgba(59,47,44,.6)} .btn-contour{background:transparent;color:var(--encre);border-color:var(--ligne-forte)} .btn-contour:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)} .btn-clair{background:var(--papier);color:var(--encre);border-color:var(--papier)} .btn-clair:hover{background:var(--blanc);border-color:var(--blanc)} .btn-fantome{background:rgba(246,241,234,.06);color:var(--papier);border-color:rgba(246,241,234,.7);backdrop-filter:blur(6px)} .btn-fantome:hover{background:var(--papier);color:var(--encre);border-color:var(--papier)} .btn-petit{min-height:40px;padding:9px 17px;font-size:.71rem} .bloc-sombre .btn-contour{color:var(--papier);border-color:var(--ligne-claire)} .bloc-sombre .btn-contour:hover{background:var(--papier);color:var(--encre)} .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .actions-centre{justify-content:center} .lien-fleche{display:inline-flex;align-items:center;gap:9px;font:500 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:4px 0;border-bottom:1px solid var(--ligne-forte);transition:gap .3s var(--ease),border-color .3s} .lien-fleche::after{content:"→";font-size:1rem;line-height:0;transition:transform .3s var(--ease)} .lien-fleche:hover{gap:16px;border-color:var(--encre)} .bloc-sombre .lien-fleche{border-color:var(--ligne-claire)} .bloc-sombre .lien-fleche:hover{border-color:var(--papier)} .appel-pilule{display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border:1px solid var(--ligne-forte);border-radius:999px;background:var(--carte);font-size:var(--fs-1);color:var(--encre-2);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s} .appel-pilule b{font-weight:600;color:var(--encre);letter-spacing:.04em} .appel-pilule .ico-bouton{width:18px;height:18px;color:var(--or-fonce)} .appel-pilule:hover{border-color:var(--encre);transform:translateY(-2px);box-shadow:0 14px 26px -20px rgba(59,47,44,.5)} /* ----- structure ---------------------------------------------------------- */ .cadre{width:100%;max-width:var(--cadre);margin:0 auto;padding:0 var(--marge)} .cadre.tete-section{margin-bottom:var(--sp-4)} .cadre-etroit{max-width:860px} .bloc{padding:var(--sp-7) 0} .bloc-sombre{background:var(--nuit);color:var(--papier)} /* ----- en-tête ------------------------------------------------------------ */ .entete{position:sticky;top:0;z-index:100;height:var(--entete);background:rgba(246,241,234,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s} .entete.est-scrolle{border-color:var(--ligne);box-shadow:0 18px 40px -36px rgba(59,47,44,.5)} .entete-int{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%} .marque{display:block;color:var(--encre)} .marque-logo{height:42px;width:auto;transition:height .4s var(--ease)} .est-scrolle .marque-logo{height:36px} .nav{display:flex;align-items:center;gap:34px} .nav-liste{display:flex;gap:26px} .nav-liste a{position:relative;display:inline-block;padding:6px 0;font:500 .76rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--encre)} .nav-liste a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--encre);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)} .nav-liste a:hover::after,.nav-liste a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .nav-tel{font:400 .95rem/1 var(--sans);letter-spacing:.08em;color:var(--encre-2);white-space:nowrap} .burger{display:none;position:relative;width:46px;height:44px;margin-right:-8px;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:120} .burger span{display:block;width:24px;height:1.5px;background:var(--encre);transition:transform .35s var(--ease),opacity .25s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media (max-width:1100px){.nav-tel{display:none}.nav-liste{gap:22px}} @media (max-width:900px){ .marque-logo,.est-scrolle .marque-logo{height:36px} .burger{display:flex} .nav{position:fixed;inset:0;left:auto;width:min(88vw,380px);height:100dvh;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:calc(var(--entete) + 24px) 28px 40px;background:var(--papier);box-shadow:-30px 0 60px -30px rgba(59,47,44,.45);transform:translateX(104%);transition:transform .5s var(--ease);overflow-y:auto;z-index:110} .nav.est-ouvert{transform:none} .nav-liste{flex-direction:column;gap:0} .nav-liste a{display:block;padding:18px 0;font-size:1rem;letter-spacing:.1em;border-bottom:1px solid var(--ligne)} .nav-liste a::after{display:none} .nav-cta{margin-top:22px;width:100%} .nav-tel{display:block;margin-top:14px;text-align:center;font-size:1.1rem} .voile-nav{position:fixed;inset:0;background:rgba(59,47,44,.35);z-index:105;opacity:0;pointer-events:none;transition:opacity .4s} .voile-nav.est-ouvert{opacity:1;pointer-events:auto} body.nav-ouverte{overflow:hidden} } .annonce{background:var(--or);color:var(--nuit);text-align:center;padding:10px 0;font:500 .92rem/1.4 var(--sans)} .annonce p{max-width:60rem;margin:0 auto} /* ----- héros (diaporama) ------------------------------------------------- */ .heros{position:relative;display:flex;align-items:flex-end;min-height:min(calc(100svh - var(--entete)),860px);overflow:hidden;background:var(--nuit);color:var(--papier);isolation:isolate} .heros-page{min-height:min(74svh,760px)} .heros-visuel{position:absolute;inset:0;z-index:0;transform:translate3d(0,calc(var(--par,0) * 1px),0);will-change:transform} html.js-anim .heros-visuel{animation:kenburns 26s ease-in-out infinite alternate} .diapo-image{position:absolute;inset:0;opacity:0;transition:opacity var(--fondu,1400ms) cubic-bezier(.4,0,.2,1);will-change:opacity} .diapo-image.est-active{opacity:1;z-index:1} /* lent zoom (Ken Burns) de la diapo active, relancé à chaque changement */ @keyframes kenburns{from{transform:translate3d(0,calc(var(--par,0) * 1px),0) scale(1.02)}to{transform:translate3d(0,calc(var(--par,0) * 1px),0) scale(1.11)}} /* deux voiles : un dégradé vertical pour le bas, et un dégradé depuis la gauche derrière le texte, pour rester lisible même sur une photo très claire (place de Milan, vitrine blanche) */ .heros-voile{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(59,47,44,.34) 0%,rgba(59,47,44,.05) 22%,rgba(59,47,44,.22) 42%,rgba(59,47,44,.58) 62%,rgba(59,47,44,.8) 80%,rgba(59,47,44,.9) 100%)} .titre-heros,.heros-p,.heros .fil{text-shadow:0 1px 2px rgba(59,47,44,.35),0 8px 30px rgba(59,47,44,.35)} .heros-texte{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:var(--sp-5);padding-bottom:clamp(58px,6vw,84px)} .heros-texte > *{max-width:100%} .titre-heros{font-size:var(--fs-h1);line-height:1.04;max-width:20ch;margin:0 0 12px;color:var(--papier)} .titre-heros-page{font-size:clamp(2.1rem,1.55rem + 2vw,3.3rem);max-width:20ch} .heros-p{max-width:46rem;font-size:1.02rem;font-weight:400;line-height:1.5;color:rgba(246,241,234,.94)} .heros .actions{justify-content:center;margin-top:20px} .heros-ouvert{margin-top:16px;font:500 .8rem/1.4 var(--sans);letter-spacing:.05em;color:rgba(246,241,234,.8);min-height:1.2em} .heros-ouvert:empty{display:none} .heros-ouvert::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#8FBF8A;margin-right:10px;vertical-align:1px} .heros-ouvert.est-ferme::before{background:#C98D7A} .diapo-points{position:absolute;left:0;right:0;bottom:18px;z-index:4;display:flex;justify-content:center;gap:9px} .diapo-points button{width:34px;height:22px;display:grid;place-items:center} .diapo-points button::before{content:"";display:block;width:100%;height:1.5px;background:rgba(246,241,234,.45);transition:background .4s,transform .4s var(--ease)} .diapo-points button[aria-current="true"]::before{background:var(--papier);transform:scaleY(2)} /* Entrée du héros en CSS pur (increvable, même si GSAP n'arrive pas) : chaque élément monte à son tour, et le TITRE se découpe en ses deux ou trois morceaux pour que la phrase s'installe mot après mot — l'entrée de Cadres Robain. */ html.js-anim .heros-texte > *{opacity:0;transform:translateY(26px);animation:monter 1.05s var(--ease) forwards} html.js-anim .heros-texte > :nth-child(1){animation-delay:.12s} html.js-anim .heros-texte > :nth-child(2){animation-delay:.24s} html.js-anim .heros-texte > :nth-child(3){animation-delay:.62s} html.js-anim .heros-texte > :nth-child(4){animation-delay:.76s} html.js-anim .heros-texte > :nth-child(5){animation-delay:.9s} html.js-anim .heros-texte > :nth-child(6){animation-delay:1.02s} html.js-anim .heros-texte > .titre-heros{opacity:1;transform:none;animation:none} html.js-anim .titre-heros > span,html.js-anim .titre-heros > em{display:inline-block;opacity:0;transform:translateY(26px);animation:monter 1.05s var(--ease) forwards} html.js-anim .titre-heros > :nth-child(1){animation-delay:.24s} html.js-anim .titre-heros > :nth-child(2){animation-delay:.36s} html.js-anim .titre-heros > :nth-child(3){animation-delay:.48s} @keyframes monter{to{opacity:1;transform:none}} /* ----- couche d'animation (GSAP) ----------------------------------------- */ /* Les titres s'écrivent de gauche à droite quand ils entrent dans l'écran : un masque dégradé dont la position est pilotée par --rev (js/anim.js). */ .tw-titre{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--rev,1) * 122% - 16%),transparent calc(var(--rev,1) * 122% - 4%));mask-image:linear-gradient(90deg,#000 calc(var(--rev,1) * 122% - 16%),transparent calc(var(--rev,1) * 122% - 4%));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* garde-fou : sans moteur d'animation, aucun masque ne doit cacher un titre */ html:not(.js-anim) .tw-titre{-webkit-mask-image:none!important;mask-image:none!important} /* Les chiffres se remplissent d'or. Un seul élément : un dégradé en deux moitiés dont on fait glisser la position (--nf de 0 à 1), découpé sur le texte. */ @property --nf{syntax:"";initial-value:1;inherits:false} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .nf-or{background-image:var(--or-remplissage);background-size:200% 100%;background-position:calc((1 - var(--nf,1)) * 100%) 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .nf-or i{-webkit-text-fill-color:transparent} } .fil{margin-bottom:14px;font:500 var(--fs-0)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase} .fil ol{display:flex;flex-wrap:wrap;gap:10px} .fil li + li::before{content:"/";margin-right:10px;opacity:.5} .heros .fil{color:rgba(246,241,234,.75)} .heros .fil a:hover{color:var(--papier)} .heros-scinde .fil,.bloc-legal .fil{color:var(--encre-3)} @media (max-width:900px){ .heros{min-height:calc(100svh - var(--entete))} .heros-page{min-height:min(78svh,720px)} .diapo-points{bottom:calc(12px + 64px + env(safe-area-inset-bottom))} /* la barre fixe recouvre le bas du premier écran : le héros garde sa dernière ligne visible */ .heros-texte{padding-bottom:calc(52px + 64px + env(safe-area-inset-bottom))} } /* ----- héros scindé (pages intérieures) ---------------------------------- */ /* La photo ne doit ni toucher la barre de menu ni paraître coupée : la section respire en haut et en bas, et le visuel est un bloc arrondi posé DANS la page, pas un bord à bord. */ .heros-scinde{background:var(--carte);border-bottom:1px solid var(--ligne);padding:var(--sp-5) 0} .heros-scinde-int{display:grid;grid-template-columns:1fr .8fr;gap:var(--sp-6);align-items:center;min-height:0} /* Texte centré à côté d'un GRAND portrait, dont la proportion (7/10) est presque celle des photos d'origine : elles ne sont donc quasiment plus recadrées. */ .heros-scinde-texte{padding:var(--sp-3) 0;text-align:center} .heros-scinde-texte .fil ol{justify-content:center} .heros-scinde-texte .lead{margin-left:auto;margin-right:auto} .heros-scinde-texte .titre-heros-scinde{margin-left:auto;margin-right:auto} .titre-heros-scinde{font-size:clamp(2.2rem,1.6rem + 2.3vw,3.6rem);margin:0 0 14px;max-width:18ch} .heros-scinde-visuel{align-self:center;position:relative;aspect-ratio:7/10;min-height:0;overflow:hidden;border-radius:var(--r);box-shadow:0 40px 70px -46px rgba(59,47,44,.75)} /* la photo se pose : léger fondu et zoom arrière, une seule fois */ html.js-anim .heros-scinde-visuel{opacity:0;animation:monter 1.2s var(--ease) .1s forwards} html.js-anim .heros-scinde-visuel img{animation:poserPhoto 1.8s var(--ease) .1s both} @keyframes poserPhoto{from{transform:scale(1.06)}to{transform:none}} .heros-scinde-visuel picture{position:absolute;inset:0} html.js-anim .heros-scinde-texte > *{opacity:0;transform:translateY(22px);animation:monter 1s var(--ease) forwards} html.js-anim .heros-scinde-texte > :nth-child(1){animation-delay:.1s} html.js-anim .heros-scinde-texte > :nth-child(2){animation-delay:.22s} html.js-anim .heros-scinde-texte > :nth-child(3){animation-delay:.34s} html.js-anim .heros-scinde-texte > :nth-child(4){animation-delay:.46s} @media (max-width:900px){ .heros-scinde-int{grid-template-columns:1fr;gap:var(--sp-3);min-height:0} .heros-scinde-texte{padding:var(--sp-4) 0 var(--sp-3);order:1} .heros-scinde-visuel{order:0;aspect-ratio:4/5;max-height:56svh;border-radius:var(--r)} } /* ----- révélation au défilement (une seule fois) -------------------------- */ html.js-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)} html.js-anim .reveal.est-visible{opacity:1;transform:none} /* ----- accueil : intro (photo + texte + chiffres) ------------------------- */ .intro-grille{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--sp-5);align-items:center} .intro-visuel{margin:0;position:relative} .intro-visuel picture{aspect-ratio:4/5;border-radius:var(--r)} .intro-legende{position:absolute;left:-18px;bottom:34px;display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--nuit);color:var(--papier);border-radius:var(--r);box-shadow:0 26px 40px -28px rgba(59,47,44,.7);max-width:min(80%,320px)} .intro-legende-nb{font:500 2.4rem/1 var(--disp);letter-spacing:-.01em;color:var(--or-clair);font-variant-numeric:lining-nums} .intro-legende span:last-child{font:400 .9rem/1.3 var(--sans);color:rgba(246,241,234,.85)} .intro-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 20px;padding-top:18px;border-top:1px solid var(--ligne)} .chiffre-nb{display:block;font:500 clamp(1.9rem,1.5rem + 1.1vw,2.5rem)/1 var(--disp);letter-spacing:-.01em;font-variant-numeric:lining-nums} .chiffre-nb i{font-style:normal;font-size:.5em;color:var(--or-fonce);margin-left:.1em;font-weight:400} .chiffre-lib{display:block;margin-top:6px;font:400 .82rem/1.4 var(--sans);color:var(--encre-3)} @media (max-width:900px){.intro-grille{grid-template-columns:1fr;gap:var(--sp-5)}.intro-legende{left:14px}} @media (max-width:560px){.intro-chiffres{grid-template-columns:1fr 1fr}} /* ----- accueil : univers -------------------------------------------------- */ .univers-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .univers{display:block;color:inherit} .univers-visuel{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--papier-2)} .univers-visuel img{transition:transform 1.2s var(--ease)} .univers-visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,47,44,0) 60%,rgba(59,47,44,.25));opacity:0;transition:opacity .6s} .univers-texte{padding:15px 4px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px} .univers-titre{font:600 var(--fs-h3)/1.18 var(--disp);letter-spacing:0;margin:0} .univers-texte p{color:var(--encre-2);margin:0 0 6px;max-width:30rem;font-size:.9rem;line-height:1.5} @media (hover:hover) and (pointer:fine){ .univers:hover .univers-visuel img{transform:scale(1.05)} .univers:hover .univers-visuel::after{opacity:1} .univers:hover .lien-fleche{gap:16px;border-color:var(--encre)} } @media (max-width:900px){.univers-grille{grid-template-columns:1fr 1fr;gap:20px}} @media (max-width:620px){.univers-grille{grid-template-columns:1fr;gap:34px}} /* ----- accueil : arguments (section sombre, photo + liste illustrée) ------ */ .arguments-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-5);align-items:center} .arguments-visuel{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)} .arguments-visuel picture{position:absolute;inset:0} .arguments-texte .tete-section{margin-bottom:var(--sp-4)} .arguments{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px} .argument{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start} .argument-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--ligne-claire);color:var(--or-clair)} .argument-ico .ico{width:24px;height:24px} .argument h3{font:500 1.2rem/1.2 var(--disp);letter-spacing:0;margin-bottom:5px} .argument p{color:rgba(246,241,234,.82);font-weight:400;font-size:.88rem;line-height:1.5} .prix{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--ligne-claire);font:300 var(--fs-2)/1.4 var(--sans);color:rgba(246,241,234,.8);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .prix-val{font:300 clamp(1.9rem,1.4rem + 1.6vw,2.9rem)/1.15 var(--disp);letter-spacing:0;color:var(--papier)} .prix-val:empty,.prix:has(.prix-val:empty){display:none} @media (max-width:1000px){.arguments{grid-template-columns:1fr}} @media (max-width:900px){.arguments-grille{grid-template-columns:1fr;gap:var(--sp-5)}.arguments-visuel{aspect-ratio:4/3;max-height:52svh}.arguments{grid-template-columns:1fr 1fr}} @media (max-width:620px){.arguments{grid-template-columns:1fr;gap:24px}} /* ----- cartes de robes ---------------------------------------------------- */ .robes-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 20px} .robes-grille-3{grid-template-columns:repeat(3,1fr)} .robe[hidden]{display:none} .robe-visuel{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--papier-2);text-align:left} .robe-visuel img{transition:transform 1.2s var(--ease)} .robe-visuel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(81,66,63,.06);pointer-events:none} .robe-badge,.robe-nb{position:absolute;font:500 .63rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r)} .robe-badge{left:12px;top:12px;background:var(--papier);color:var(--encre)} .robe-badge:empty{display:none} .robe-nb{right:12px;top:12px;background:rgba(59,47,44,.55);color:var(--papier);backdrop-filter:blur(6px)} .robe-voir{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;padding:12px;background:rgba(246,241,234,.94);color:var(--encre);font:500 .68rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)} .robe-infos{padding:11px 2px 0;text-align:center} .robe-nom{font:500 1.14rem/1.2 var(--disp);letter-spacing:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 9px} .robe-ref{font:500 .66rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)} .robe-coloris{margin-top:4px;font-size:.84rem;color:var(--encre-2)} .robe-coloris:empty{display:none} .robe-note{margin-top:4px;font:italic 500 1rem/1.4 var(--disp);color:var(--or-fonce)} .robe-note:empty{display:none} @media (hover:hover) and (pointer:fine){ .robe-visuel:hover img{transform:scale(1.05)} .robe-visuel:hover .robe-voir{opacity:1;transform:none} } @media (max-width:1000px){.robes-grille-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.robes-grille,.robes-grille-3{grid-template-columns:repeat(2,1fr);gap:28px 14px}.robe-nom{font-size:1.05rem}.robe-infos{padding-top:10px}.robe-coloris{font-size:.82rem}} @media (max-width:380px){.robes-grille,.robes-grille-3{grid-template-columns:1fr}} /* ----- page collection ---------------------------------------------------- */ .bloc-collection{padding-top:var(--sp-5)} .collection-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--ligne)} .collection-intro .lead{flex:1 1 30rem} /* ----- fiche (boîte de dialogue) ----------------------------------------- */ .fiche{width:min(1180px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:var(--r);background:var(--papier);color:var(--encre);box-shadow:0 60px 120px -40px rgba(59,47,44,.6);overflow:hidden} .fiche::backdrop{background:rgba(59,47,44,.72);backdrop-filter:blur(6px)} html.js-anim .fiche[open]{animation:ficheOuvre .5s var(--ease)} @keyframes ficheOuvre{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} .fiche-int{display:grid;grid-template-columns:1.12fr .88fr;max-height:calc(100dvh - 32px)} .fiche-fermer{position:absolute;right:14px;top:10px;z-index:3;width:46px;height:46px;border-radius:50%;background:var(--papier);color:var(--encre);font:300 1.8rem/1 var(--sans);display:grid;place-items:center;box-shadow:0 10px 30px -14px rgba(59,47,44,.6);transition:transform .3s var(--ease),background .3s} .fiche-fermer:hover{transform:rotate(90deg);background:var(--blanc)} .fiche-visuel{position:relative;background:var(--papier-2);display:grid;grid-template-rows:1fr auto;min-height:0} .fiche-figure{margin:0;position:relative;min-height:0;display:grid;place-items:center;background:var(--papier-2)} .fiche-figure img{width:100%;height:100%;max-height:calc(100dvh - 32px - 96px);object-fit:contain;background:var(--papier-2)} .fiche-figure figcaption{position:absolute;left:14px;bottom:12px;font:500 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--papier);background:rgba(59,47,44,.55);backdrop-filter:blur(6px);padding:8px 11px;border-radius:var(--r)} .fiche-figure figcaption:empty{display:none} .fiche-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(246,241,234,.92);color:var(--encre);font:300 1.9rem/1 var(--sans);display:grid;place-items:center;transition:background .3s,transform .3s var(--ease)} .fiche-nav:hover{background:var(--blanc);transform:translateY(-50%) scale(1.06)} .fiche-prec{left:14px}.fiche-suiv{right:14px} .fiche-nav[disabled]{opacity:0;pointer-events:none} .fiche-vignettes{display:flex;gap:8px;padding:12px 14px;overflow-x:auto;background:var(--papier-3);scrollbar-width:thin} .fiche-vignettes li{flex:0 0 auto} .fiche-vignettes button{width:56px;height:74px;overflow:hidden;border-radius:var(--r);border:2px solid transparent;opacity:.65;transition:opacity .3s,border-color .3s} .fiche-vignettes button img{width:100%;height:100%;object-fit:cover} .fiche-vignettes button.est-actif,.fiche-vignettes button:hover{opacity:1;border-color:var(--encre)} .fiche-vignettes:has(li:only-child){display:none} .fiche-texte{padding:clamp(28px,4vw,56px) clamp(24px,4vw,52px);display:flex;flex-direction:column;justify-content:center;overflow-y:auto} .fiche-titre{font:300 clamp(2.2rem,1.6rem + 1.8vw,3.3rem)/1.05 var(--disp);letter-spacing:-.005em;margin:0 0 18px} .fiche-titre small{display:block;margin-top:8px;font:500 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--encre-3)} .fiche-coloris{padding:14px 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);font-size:var(--fs-2)} .fiche-lib{display:inline-block;margin-right:12px;font:500 var(--fs-0)/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--encre-3)} .fiche-note{margin-top:14px;font:italic 400 1.2rem/1.4 var(--disp);color:var(--or-fonce)} .fiche-note:empty{display:none} .fiche-appel{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;margin-top:22px;padding:18px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r)} .fiche-appel-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--papier-2);color:var(--or-fonce)} .fiche-appel-titre{font:500 1.05rem/1.3 var(--sans);margin-bottom:4px} .fiche-appel-texte{font-size:var(--fs-1);color:var(--encre-2);line-height:1.5} .fiche-rappel{margin-top:14px;font-size:var(--fs-1);color:var(--encre-3);max-width:32rem} /* Mode boutique : depuis la fiche d'un modèle, un accès direct à l'écran qui le modifie. */ .fiche-modifier{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 18px;border-radius:22px;background:var(--or);color:#fff;font:600 .76rem/1 var(--sans);letter-spacing:.06em;transition:background .3s} .fiche-modifier:hover{background:var(--or-fonce);color:#fff} .fiche-modifier[hidden]{display:none} .fiche-texte .actions{margin-top:22px} @media (max-width:900px){ /* sur mobile, le dialogue devient une colonne qui défile */ .fiche{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)} .fiche-int{display:block;max-height:calc(100dvh - 16px);overflow-y:auto;position:relative} .fiche-visuel{display:block} .fiche-figure{display:block} .fiche-figure img{width:100%;height:auto;max-height:66dvh;object-fit:contain} .fiche-texte{display:block;overflow:visible;padding:26px 22px 34px} .fiche-titre{font-size:1.8rem} .fiche-fermer{position:sticky;top:10px;margin:10px 10px -56px auto;float:right} .fiche-nav{width:42px;height:42px;top:33dvh} } /* ----- avis Google défilants --------------------------------------------- */ .bloc-avis{background:var(--papier-2);overflow:hidden} /* la note, sur une seule ligne sous le titre : 4,4/5 ★★★★★ · 122 avis Google */ .avis-note-ligne{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;margin:12px 0 0} .avis-note-chiffre{font:500 1.9rem/1 var(--disp);letter-spacing:-.01em;font-variant-numeric:lining-nums} .avis-note-chiffre i{font-style:normal;font-size:.5em;color:var(--or-fonce);margin-left:.1em;font-weight:400} .avis-note-lib{font:400 var(--fs-1)/1.3 var(--sans);color:var(--encre-3)} .etoiles{display:inline-flex;gap:2px} .etoile{width:16px;height:16px;fill:var(--papier-3);stroke:none} .etoile.est-pleine{fill:var(--or)} .avis-note-ligne .etoile{width:19px;height:19px} .avis-defile{display:grid} .avis-rangee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .avis-piste{display:flex;align-items:stretch;gap:16px;width:max-content;animation:defiler var(--duree,72s) linear infinite} .avis-rangee-inverse .avis-piste{animation-direction:reverse} .avis-rangee:hover .avis-piste,.avis-rangee.est-pause .avis-piste{animation-play-state:paused} @keyframes defiler{to{transform:translateX(-50%)}} /* Toutes les cartes ont EXACTEMENT la même taille : le texte trop long est coupé proprement au bout de six lignes. Une rangée régulière, pas un assemblage de blocs de tailles différentes. */ .avis-carte{margin:0;width:min(304px,78vw);height:236px;display:flex;flex-direction:column;gap:10px;padding:18px 20px 16px;background:var(--blanc);border:1px solid var(--papier-3);border-radius:var(--r);box-shadow:0 18px 34px -30px rgba(59,47,44,.45)} .avis-tete{display:flex;justify-content:space-between;align-items:center} .ico-google{width:20px;height:20px;fill:var(--encre-3);stroke:none;opacity:.9} .ico-google path{fill:currentColor} .avis-google{color:var(--encre-3)} .avis-texte{margin:0;font:500 1rem/1.5 var(--disp);color:var(--encre);flex:0 0 auto;height:7.5em;display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .avis-auteur{font-size:.8rem;color:var(--encre-3);margin-top:auto;padding-top:8px;border-top:1px solid var(--papier-2)} .avis-auteur strong{font-weight:600;color:var(--encre)} .bloc-avis .actions{margin-top:var(--sp-4)} @media (max-width:820px){.avis-carte{padding:15px 16px;height:224px}} @media (prefers-reduced-motion:reduce){.avis-piste{animation:none;flex-wrap:wrap;width:auto}.avis-rangee{mask-image:none;-webkit-mask-image:none}.tw-titre{-webkit-mask-image:none;mask-image:none}.nf-or{background:none;-webkit-text-fill-color:currentColor;color:inherit}} /* ----- « Nous trouver » : trois cartes ----------------------------------- */ /* Chaque carte suit la même hiérarchie : pictogramme doré, étiquette discrète, L'INFORMATION en grand, la précision en petit, l'action en bas. Fond papier plus soutenu derrière des cartes blanches à filet doré : les trois se détachent nettement. */ .bloc-trouver{background:var(--papier)} .bloc-trouver-page{padding-top:var(--sp-4)} /* Aucun encadré : trois colonnes posées sur le papier, séparées par un filet fin. Le pictogramme doré et la typographie portent le bloc — épuré, pas « en boîte ». */ .trouver-panneau{display:grid;grid-template-columns:repeat(3,1fr);max-width:66rem;margin:0 auto} .trouver-carte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:6px 30px 4px;position:relative} .trouver-carte + .trouver-carte::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--ligne)} .trouver-ico{display:block;color:var(--or);margin-bottom:2px} .trouver-ico .ico{width:30px;height:30px;stroke-width:1.1} .trouver-lib{font:500 var(--fs-0)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--or-fonce);margin:0} .trouver-valeur{font:500 1.2rem/1.45 var(--disp);font-style:normal;color:var(--encre);display:block} .trouver-note{font-size:.83rem;color:var(--encre-3);line-height:1.5;margin:0} .trouver-tel{font:500 clamp(1.5rem,1.25rem + .9vw,1.95rem)/1.1 var(--disp);letter-spacing:.01em;font-variant-numeric:lining-nums;transition:color .3s} .trouver-tel:hover{color:var(--or-fonce)} .trouver-carte .btn{margin-top:auto;align-self:center} .trouver-carte .trouver-ouvert{margin-bottom:2px} .trouver-ouvert{font:500 .83rem/1.4 var(--sans);color:#4F7A4B} .trouver-ouvert.est-ferme{color:#B0614E} .trouver-ouvert:empty{display:none} .horaires-resume{display:grid;gap:5px;justify-items:center} .horaires-ouvert{display:grid;gap:3px} .horaires-jours{display:block;font:500 var(--fs-0)/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)} .horaires-heures{display:block;font:500 1.5rem/1.15 var(--disp);letter-spacing:0;font-variant-numeric:lining-nums} .horaires-ferme{font-size:.83rem;color:var(--encre-3)} .horaires-ferme:empty{display:none} @media (max-width:960px){.trouver-panneau{grid-template-columns:1fr;gap:var(--sp-4)}.trouver-carte{padding:0 12px}.trouver-carte + .trouver-carte::before{left:18%;right:18%;top:calc(-1 * var(--sp-4) / 2);bottom:auto;width:auto;height:1px}} /* ----- section d'appel ---------------------------------------------------- */ .bloc-cta{background:var(--papier-2)} .cta-int{text-align:center;max-width:52rem;margin:0 auto} .cta-int .titre-section,.cta-int .lead{margin-left:auto;margin-right:auto} .cta-int .actions{justify-content:center} /* ----- page boutique ------------------------------------------------------ */ /* La vitrine et le texte côte à côte : on voit la boutique, et l'histoire est juste à côté. */ .bloc-vitrine{background:var(--carte);border-bottom:1px solid var(--ligne);padding-top:var(--sp-6)} .vitrine-grille{display:grid;grid-template-columns:.92fr 1.18fr;gap:var(--sp-5);align-items:center} .vitrine-texte .prose{color:var(--encre-2);margin-top:12px;max-width:44rem} .vitrine-visuel{position:relative} .vitrine-diapo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--papier-2);box-shadow:0 34px 60px -44px rgba(59,47,44,.7)} .vitrine-visuel .diapo-points{position:static;margin-top:12px} .vitrine-visuel .diapo-points button::before{background:var(--ligne-forte)} .vitrine-visuel .diapo-points button[aria-current="true"]::before{background:var(--or)} .vitrine-legende{margin:6px 0 0;font:italic 500 .96rem/1.4 var(--disp);color:var(--encre-3);text-align:center} .vitrine-texte .prose{font-size:.94rem} @media (max-width:900px){.vitrine-grille{grid-template-columns:1fr;gap:var(--sp-4)}.vitrine-visuel{order:-1}.vitrine-diapo{aspect-ratio:16/10;margin:0 calc(-1 * var(--marge));border-radius:0}} /* Ce que la boutique propose : six cartes centrées, les quatre premières cliquables. */ .services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .service{display:flex;margin:0} .service-int{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;width:100%;padding:26px 22px 22px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);color:inherit;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s} a.service-int:hover{transform:translateY(-4px);border-color:var(--or-clair);box-shadow:0 26px 44px -34px rgba(59,47,44,.5)} .service-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--papier-2);color:var(--or-fonce);margin-bottom:5px} .service h3{font:400 1.2rem/1.22 var(--disp);letter-spacing:0;margin:0} .service p{color:var(--encre-2);font-size:.87rem;line-height:1.5;margin:0} .service .lien-fleche{margin-top:auto;padding-top:10px;border:none;color:var(--or-fonce)} a.service-int:hover .lien-fleche{gap:14px} .accessoires-grille{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:center} .accessoires-visuels{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .accessoires-visuels figure{margin:0} .accessoires-visuels picture{aspect-ratio:3/4;border-radius:var(--r)} .accessoires-visuels figure:nth-child(2){margin-top:36px} .accessoires-visuels figcaption{margin-top:8px;font:italic 500 1rem/1.4 var(--disp);color:var(--or-clair)} .photos-boutique{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .photo-boutique{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--papier-2)} .photo-boutique[hidden]{display:none} .photo-boutique img{width:100%;height:100%;object-fit:cover} .faq-grille{display:grid;grid-template-columns:.78fr 1.22fr;gap:var(--sp-5);align-items:start} .faq-tete{position:sticky;top:calc(var(--entete) + 24px)} .faq{border-bottom:1px solid var(--ligne)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;font:500 1.15rem/1.3 var(--disp);letter-spacing:0} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";flex:0 0 auto;font:300 1.7rem/1 var(--sans);color:var(--or-fonce);transition:transform .35s var(--ease)} .faq[open] summary::after{transform:rotate(45deg)} .faq p{padding:0 0 17px;max-width:42rem;color:var(--encre-2);font-size:.92rem} @media (max-width:900px){.accessoires-grille,.faq-grille{grid-template-columns:1fr;gap:var(--sp-4)}.faq-tete{position:static}.services{grid-template-columns:1fr 1fr}.photos-boutique{grid-template-columns:1fr 1fr}} @media (max-width:560px){.services{grid-template-columns:1fr}.photos-boutique{grid-template-columns:1fr}.accessoires-visuels figure:nth-child(2){margin-top:24px}} /* ----- page contact : plan et vue de la rue ------------------------------- */ .bloc-plan{padding-top:0} .plan{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden} .plan-onglets{display:flex;align-items:center;gap:6px;padding:10px;border-bottom:1px solid var(--ligne);background:var(--carte)} .plan-onglets [role="tab"]{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r);font:500 .73rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);transition:background .3s,color .3s} .plan-onglets [role="tab"][aria-selected="true"]{background:var(--encre);color:var(--papier)} .plan-onglets [role="tab"]:hover:not([aria-selected="true"]){background:var(--papier-2)} .plan-ouvrir{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:12px 14px;font:500 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--or-fonce)} .plan-volet{position:relative;width:100%;aspect-ratio:16/9;max-height:600px;background:var(--papier-2)} .plan-volet[hidden]{display:none} .plan-volet iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .plan-legende{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 16px;background:rgba(246,241,234,.94);border-radius:var(--r);font-size:var(--fs-1);color:var(--encre-2);max-width:40rem} @media (max-width:700px){.plan-volet{aspect-ratio:4/3}.plan-ouvrir{width:100%;justify-content:center;margin:4px 0 0}.plan-onglets{flex-wrap:wrap}.plan-onglets [role="tab"]{flex:1 1 40%;justify-content:center}} /* ----- page contact : écrire ---------------------------------------------- */ .bloc-ecrire{background:var(--papier-2)} .ecrire-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-6);align-items:start} .ecrire-texte .appel-pilule{margin-top:26px} .formulaire{display:grid;gap:18px;padding:clamp(24px,3.5vw,44px);background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r)} .champ-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .champ{display:grid;gap:8px} .champ label{font:500 var(--fs-0)/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--encre-3)} .champ input,.champ textarea{width:100%;font:400 1rem/1.5 var(--sans);color:var(--encre);background:var(--papier);border:1px solid var(--ligne-forte);border-radius:var(--r);padding:13px 14px;transition:border-color .25s,box-shadow .25s} .champ input:focus,.champ textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(184,150,94,.22)} .champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"]{border-color:#B0614E} .champ textarea{resize:vertical;min-height:140px} .champ-piege{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden} .form-pied{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px} .champ-note{font-size:var(--fs-1);color:var(--encre-3);max-width:24rem} .champ-note a{text-decoration:underline;text-underline-offset:3px} .form-retour{font-size:var(--fs-2);min-height:1.5em} .form-retour:empty{display:none} .form-retour.est-ok{color:#4F7A4B} .form-retour.est-erreur{color:#B0614E} @media (max-width:900px){.ecrire-grille{grid-template-columns:1fr;gap:var(--sp-4)}} @media (max-width:560px){.champ-2{grid-template-columns:1fr}} /* ----- pages légales ------------------------------------------------------ */ .bloc-legal .prose{color:var(--encre-2)} .bloc-legal .prose strong{color:var(--encre)} /* ----- pied de page ------------------------------------------------------- */ .pied{background:var(--nuit);color:var(--papier);padding:var(--sp-5) 0 var(--sp-3)} /* Enseigne centrée en tête, puis trois colonnes de même largeur : tout s'aligne, et le pied se lit comme une carte de visite plutôt qu'en escalier. */ .pied-marque{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-bottom:var(--sp-4);border-bottom:1px solid var(--ligne-claire)} .pied-int{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4) var(--sp-3);padding:var(--sp-4) 0;align-items:stretch} .pied-carte + .pied-carte{position:relative} .pied-carte + .pied-carte::before{content:"";position:absolute;left:calc(-1 * var(--sp-3) / 2);top:2px;bottom:2px;width:1px;background:var(--ligne-claire)} .pied-logo{height:92px;width:auto;color:var(--papier-3)} .pied-slogan{margin:0;font:italic 500 1.12rem/1.5 var(--disp);color:rgba(246,241,234,.8)} .pied-carte{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center} .pied-carte .horaires-resume{justify-items:center;gap:4px} .pied-carte .horaires-heures{font-size:1.3rem} .pied-carte .lien-fleche{margin-top:auto;padding-top:10px} .pied-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne-claire);color:var(--or-clair)} .pied-ico .ico{width:20px;height:20px} .pied-titre{display:flex;align-items:center;gap:8px;font:600 var(--fs-0)/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--or-clair);margin:0 0 4px;min-height:22px} .pied-ico{width:16px;height:16px;flex:0 0 auto;opacity:.85} .pied-adresse{line-height:1.6;color:rgba(246,241,234,.88);margin-bottom:14px} .pied .horaires-jours{color:rgba(246,241,234,.6)} .pied .horaires-heures{color:var(--papier);font-size:1.2rem} .pied .horaires-ferme{color:rgba(246,241,234,.6)} .pied-ouvert{margin-top:10px;font:400 var(--fs-1)/1.4 var(--sans);color:#A8D3A2} .pied-ouvert.est-ferme{color:#E0A797} .pied-ouvert:empty{display:none} .pied-tel{display:inline-block;font:400 2rem/1.1 var(--disp);letter-spacing:.01em;font-variant-numeric:lining-nums;color:var(--papier);margin-bottom:8px} .pied-note{font-size:var(--fs-1);color:rgba(246,241,234,.65);margin-bottom:14px} .pied-bas{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:var(--sp-3);border-top:1px solid var(--ligne-claire);font-size:var(--fs-1);color:rgba(246,241,234,.62)} .pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px} .pied-liens a,.pied-bas a{color:rgba(246,241,234,.78);border-bottom:1px solid transparent;transition:color .3s,border-color .3s} .pied-liens a:hover,.pied-bas a:hover{color:var(--papier);border-color:var(--ligne-claire)} .pied-admin{opacity:.55} @media (max-width:1100px){.pied-int{grid-template-columns:1fr 1fr}.pied-carte + .pied-carte::before{display:none}} @media (max-width:560px){.pied-int{grid-template-columns:1fr;gap:var(--sp-4)}.pied-logo{height:80px}} /* ----- barre d'actions mobile -------------------------------------------- */ .barre-mobile{display:none} @media (max-width:900px){ body{padding-bottom:calc(64px + env(safe-area-inset-bottom))} .barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(246,241,234,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ligne);padding-bottom:env(safe-area-inset-bottom)} .barre-mobile a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px 9px;font:500 .66rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--encre)} .barre-mobile a + a{border-left:1px solid var(--ligne)} .barre-mobile .ico{width:20px;height:20px} } /* Bandeau « mode boutique » : visible seulement quand la boutique est connectée. Il propose d'aller modifier DIRECTEMENT la page regardée, et de basculer entre le site publié et le brouillon. Il se pose tout en bas ; site.js réserve la hauteur pour ne rien recouvrir. */ .bande-boutique{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;background:var(--encre);color:var(--papier);padding:9px 14px;font:400 .82rem/1.35 var(--sans);box-shadow:0 -2px 18px rgba(0,0,0,.32);padding-bottom:calc(9px + env(safe-area-inset-bottom))} .bande-boutique.est-apercu{background:#5C4A2E} .bb-titre{font-weight:600;letter-spacing:.04em;white-space:nowrap} .bb-note{opacity:.72;font-size:.78rem} .bande-boutique .bb-action{background:var(--or-clair);color:var(--encre);font-weight:600;text-decoration:none;padding:6px 15px;border-radius:2px;white-space:nowrap} .bande-boutique .bb-action:hover{background:#fff} .bande-boutique .bb-lien{color:var(--or-clair);text-decoration:none;border-bottom:1px solid rgba(199,168,110,.45);padding-bottom:1px;white-space:nowrap;font-size:.8rem} .bande-boutique .bb-lien:hover{color:#fff;border-bottom-color:#fff} .bb-fermer{background:none;border:none;color:var(--papier);opacity:.6;font-size:1rem;line-height:1;cursor:pointer;padding:4px 6px} .bb-fermer:hover{opacity:1} @media (max-width:700px){.bb-note{display:none}.bande-boutique{gap:6px 10px;font-size:.76rem;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}} /* ----- mouvement réduit --------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .diapo-image img{transform:none!important} } /* ----- impression --------------------------------------------------------- */ @media print{ .entete,.barre-mobile,.heros-visuel,.heros-voile,.diapo-points,.annonce,.btn,.actions,.pied-liens,.pied-admin,.fiche,.plan-onglets,.robe-voir,.formulaire,.avis-defile,.bande-boutique{display:none!important} body{background:#fff;color:#000;font-size:11pt} .heros{min-height:0;color:#000;background:none} .heros-texte > *{opacity:1!important;transform:none!important;animation:none!important} .titre-heros,.titre-heros em{color:#000} .bloc{padding:18pt 0} .bloc-sombre,.pied{background:none;color:#000} .reveal{opacity:1!important;transform:none!important} .horaires-detail[hidden]{display:block!important} .pied-int{grid-template-columns:1fr 1fr} }