/* Polices hébergées sur le site : aucune requête vers Google */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans.woff2) format("woff2")}

:root{
  --papier:#F2F3F1;--encre:#1D2024;--ardoise:#6A7077;--voile:#DADDD9;--poudre:#B58C88;--blanc:#FFFFFF;
  --serif:"Bodoni Moda","Didot",Georgia,serif;--sans:"Instrument Sans",system-ui,sans-serif;
  --marge:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{background:var(--papier);color:var(--encre);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body.bloque{overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--poudre);outline-offset:3px}
img{display:block;max-width:100%}
/* Protection des photos : pas de clic droit, de glisser-déposer ni d'appui long */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cadre img,.mur img,#lb-img{pointer-events:none}


/* En-tête et menu burger */
header.site{position:sticky;top:0;z-index:30;background:rgba(242,243,241,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:18px var(--marge);border-bottom:1px solid var(--voile)}
.logo{font:400 26px/1 var(--serif);letter-spacing:.01em;text-decoration:none}
.logo span{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--ardoise);margin-left:10px;vertical-align:middle}
@media (max-width:600px){.logo span{display:none}}
.tete-droite{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.insta-tete{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--sans);text-decoration:none}
.insta-tete span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.insta-tete:hover{opacity:.65}
@media (max-width:560px){.insta-tete span{display:none}.insta-tete svg{width:19px;height:19px}}
.burger{display:flex;align-items:center;gap:12px;background:none;border:0;font:500 15px var(--sans);color:inherit;cursor:pointer;padding:6px 0}
.burger i{display:block;width:26px;height:12px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s ease,top .35s ease}
.burger i::before{top:0}.burger i::after{top:10px}
.burger[aria-expanded="true"] i::before{top:5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:5px;transform:rotate(-45deg)}
.panneau{position:fixed;inset:0;z-index:25;background:var(--encre);color:var(--papier);display:flex;flex-direction:column;justify-content:space-between;padding:120px var(--marge) 40px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.panneau.ouvert{opacity:1;visibility:visible}
body.menu-ouvert header.site{background:transparent;border-color:transparent;color:var(--papier);backdrop-filter:none}
.panneau nav{display:flex;flex-direction:column;gap:4px}
.panneau nav a{font:400 clamp(44px,8vw,104px)/1.05 var(--serif);letter-spacing:-.02em;text-decoration:none;color:#9aa0a6;transition:color .2s}
.panneau nav a:hover,.panneau nav a[aria-current="page"]{color:var(--papier)}
.panneau .pied{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;color:#c5c9cc}
.panneau .pied a{text-decoration:none}.panneau .pied a:hover{color:var(--papier)}

main{min-height:70vh}
.vue{display:none}.vue.active{display:block}

.cadre{position:relative;overflow:hidden;background:#cfd2d0}
.cadre img{width:100%;height:100%;object-fit:cover}

/* Accueil */
.hero{padding:clamp(24px,5vw,64px) var(--marge) clamp(72px,10vw,140px)}
.hero h1{font:400 clamp(64px,15.5vw,250px)/.86 var(--serif);letter-spacing:-.035em;margin-left:-.04em}
.hero-bas{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3.5vw,64px);margin-top:clamp(20px,3vw,40px);align-items:start}
.hero-texte{grid-column:1 / span 3}
.hero-bas .cadre:nth-of-type(1){grid-column:4 / span 4;aspect-ratio:2/3;margin-top:clamp(100px,18vw,300px)}
.hero-bas .cadre:nth-of-type(2){grid-column:8 / span 5;aspect-ratio:4/5}
.hero-texte{align-self:start;padding-top:8px;max-width:34ch}
.hero-texte p{font:400 21px/1.45 var(--serif)}
.lien-fleche{display:inline-flex;align-items:baseline;gap:14px;margin-top:26px;font:400 clamp(22px,2.2vw,30px)/1.2 var(--serif);text-decoration:none;transition:color .2s}
.lien-fleche span{display:inline-block;transition:transform .3s ease}
.lien-fleche:hover{color:var(--ardoise);border-color:var(--ardoise)}
.lien-fleche:hover span{transform:translateX(6px)}
.bouton{display:inline-flex;align-items:baseline;gap:12px;margin-top:22px;background:none;color:inherit;text-decoration:none;font:400 clamp(19px,1.8vw,24px)/1.2 var(--serif);padding:0;border:0;border-radius:0;cursor:pointer;transition:opacity .2s}
.bouton::before{content:"→";display:inline-block;transition:transform .3s ease}
.bouton:hover{opacity:.65}
.bouton:hover::before{transform:translateX(6px)}
@media (max-width:820px){.hero-bas{grid-template-columns:repeat(6,1fr);row-gap:28px}.hero-texte{grid-column:1/-1}.hero-bas .cadre:nth-of-type(1){grid-column:1 / span 3;margin-top:90px}.hero-bas .cadre:nth-of-type(2){grid-column:4 / -1}}

.bloc{padding:clamp(72px,10vw,140px) var(--marge)}
.presentation{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,6vw,96px);align-items:center}
.presentation .cadre{aspect-ratio:4/5}
h2{font:400 clamp(38px,5.4vw,76px)/1 var(--serif);letter-spacing:-.02em;margin-bottom:28px}
.lead{font:400 clamp(20px,2vw,25px)/1.5 var(--serif);margin-bottom:20px;max-width:34ch}
.texte p{max-width:60ch;color:#363a40;margin-bottom:16px}
@media (max-width:820px){.presentation{grid-template-columns:1fr}}

.univers{border-top:1px solid var(--voile)}
.univers-tete{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.univers-tete h2{margin:0}
.deux{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3.5vw,64px);align-items:start}
.deux a{text-decoration:none;display:block}
.deux a:first-child{grid-column:1 / span 7}.deux a:first-child .cadre{aspect-ratio:4/5}
.deux a:last-child{grid-column:9 / span 4;margin-top:clamp(120px,24vw,400px)}.deux a:last-child .cadre{aspect-ratio:2/3}
.deux h3{font:400 34px/1.1 var(--serif);margin-top:16px}
.deux p{font-size:15px;color:var(--ardoise);margin-top:4px}
@media (max-width:820px){.deux{grid-template-columns:repeat(6,1fr);row-gap:56px}.deux a:first-child{grid-column:1 / -1}.deux a:last-child{grid-column:3 / -1;margin-top:0}}

.appel{background:var(--encre);color:var(--papier)}
.appel h2{font-size:clamp(46px,9vw,150px);line-height:.92;margin-bottom:34px}
.appel p{max-width:46ch;color:#C5C9CC;font-size:18px}
.appel .bouton{color:var(--papier)}

/* Galeries */
.page-tete{padding:clamp(40px,7vw,96px) var(--marge) 0}
.page-tete h1{font:400 clamp(52px,9vw,140px)/.92 var(--serif);letter-spacing:-.03em}
.page-tete p{max-width:52ch;margin-top:22px;color:#363a40}
.sommaire{display:flex;gap:40px;flex-wrap:wrap;margin-top:36px}
.sommaire a{font:400 clamp(22px,2.2vw,30px)/1.2 var(--serif);text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--encre);transition:border-color .2s,color .2s}
.sommaire a:hover{color:var(--ardoise);border-color:var(--ardoise)}
.rubrique{padding:clamp(56px,8vw,110px) var(--marge) 0;scroll-margin-top:80px}
.rubrique:last-child{padding-bottom:clamp(72px,10vw,140px)}
#galeries-mode::before{content:"";display:block;height:1px;background:#c3c7c3;margin-bottom:clamp(56px,8vw,110px)}
.rubrique>h2{font-size:clamp(34px,4vw,56px);margin-bottom:8px}
.rubrique>p{color:var(--ardoise);margin-bottom:32px}
.projets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) clamp(16px,2.5vw,36px)}
.projets.trois{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px) clamp(14px,2vw,28px)}
.projet{text-decoration:none;display:block}
.projet .cadre{aspect-ratio:4/3}
.projets:not(.trois) .projet:nth-child(4n+2) .cadre,.projets:not(.trois) .projet:nth-child(4n+3) .cadre{aspect-ratio:4/5}
.projets.trois .projet .cadre{aspect-ratio:4/5}
.projet .cadre img{transition:transform .8s ease}
.projet:hover .cadre img{transform:scale(1.03)}
.projet h3{font:400 clamp(26px,2.6vw,38px)/1.1 var(--serif);margin-top:16px}
.projets.trois .projet h3{font-size:clamp(22px,2vw,30px)}
.projet p{font-size:15px;color:var(--ardoise);margin-top:4px}
@media (max-width:980px){.projets.trois{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.projets{grid-template-columns:1fr}.projets:not(.trois) .projet .cadre{aspect-ratio:4/3!important}}
@media (max-width:520px){.projets.trois{grid-template-columns:1fr}}


/* Mosaïque éditoriale de l'univers Mode */
.mosaique{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3.5vw,64px);row-gap:clamp(64px,9vw,150px);align-items:start}
.mosaique .projet .cadre img{object-position:50% 28%}
.mosaique .projet h3{font-size:clamp(24px,2.4vw,36px)}
.mosaique .f0{grid-column:1 / span 6}.mosaique .f0 .cadre{aspect-ratio:4/5}
.mosaique .f1{grid-column:8 / span 5;margin-top:clamp(60px,14vw,220px)}.mosaique .f1 .cadre{aspect-ratio:3/4}
.mosaique .f2{grid-column:2 / span 4}.mosaique .f2 .cadre{aspect-ratio:2/3}
.mosaique .f3{grid-column:7 / span 6;margin-top:clamp(40px,8vw,140px)}.mosaique .f3 .cadre{aspect-ratio:5/4}
.mosaique .f4{grid-column:1 / span 5}.mosaique .f4 .cadre{aspect-ratio:4/5}
.mosaique .f5{grid-column:7 / span 4;margin-top:clamp(80px,16vw,260px)}.mosaique .f5 .cadre{aspect-ratio:3/4}
.mosaique .f6{grid-column:3 / span 8}.mosaique .f6 .cadre{aspect-ratio:16/10}
.mosaique .f6 .cadre img{object-position:50% 22%}
@media (max-width:820px){
  .mosaique{grid-template-columns:repeat(6,1fr);row-gap:64px}
  .mosaique .projet{grid-column:1 / -1!important;margin-top:0!important}
  .mosaique .f1,.mosaique .f5{grid-column:2 / -1!important}
  .mosaique .f2,.mosaique .f4{grid-column:1 / span 5!important}
  .mosaique .f6 .cadre,.mosaique .f3 .cadre{aspect-ratio:4/3}
}

/* Page projet */
.projet-tete{padding:clamp(28px,5vw,64px) var(--marge) 0}
.retour-lien{font-size:15px;text-decoration:none;color:var(--ardoise)}
.retour-lien:hover{color:var(--encre)}
.projet-tete h1{font:400 clamp(56px,10vw,160px)/.9 var(--serif);letter-spacing:-.03em;margin-top:28px}
.projet-tete p{margin-top:18px;font:400 22px/1.4 var(--serif);color:#363a40}
.mur{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3.5vw,64px);row-gap:clamp(56px,8vw,130px);align-items:start;padding:clamp(56px,7vw,110px) var(--marge) 0}
.mur figure{margin:0}
.mur .g0{grid-column:1 / span 7}
.mur .g1{grid-column:9 / span 4;margin-top:clamp(80px,14vw,240px)}
.mur .g2{grid-column:3 / span 5}
.mur .g3{grid-column:9 / span 4;margin-top:clamp(40px,8vw,140px)}
.mur .g4{grid-column:1 / span 4;margin-top:clamp(60px,10vw,180px)}
.mur .g5{grid-column:6 / span 7}
.mur .grand-l{grid-column:1 / -1!important;margin-top:0!important}
.mur .grand-p{grid-column:3 / span 8!important;margin-top:0!important}
@media (max-width:820px){
  .mur{grid-template-columns:repeat(6,1fr);row-gap:48px}
  .mur figure{grid-column:1 / -1!important;margin-top:0!important}
  .mur .g1,.mur .g4{grid-column:2 / -1!important}
  .mur .g2,.mur .g5{grid-column:1 / span 5!important}
  .mur .grand-l,.mur .grand-p{grid-column:1 / -1!important}
}
.mur button{all:unset;display:block;width:100%;cursor:zoom-in}
.mur button:focus-visible{outline:2px solid var(--poudre);outline-offset:3px}
.suivant{display:block;margin:clamp(56px,8vw,110px) var(--marge) clamp(72px,10vw,140px);padding-top:32px;border-top:1px solid var(--voile);text-decoration:none}
.suivant span{font-size:15px;color:var(--ardoise)}
.suivant strong{display:block;font:400 clamp(40px,6vw,88px)/1 var(--serif);letter-spacing:-.02em;margin-top:6px}
.suivant:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}

.lightbox{position:fixed;inset:0;z-index:50;background:rgba(20,22,25,.96);display:none;align-items:center;justify-content:center;padding:6vh 7vw}
.lightbox.ouvert{display:flex}
.lightbox img{max-width:100%;max-height:84vh;width:auto;height:auto;object-fit:contain}
.lightbox .fermer,.lightbox .nav{position:absolute;background:none;border:0;color:#fff;border-radius:0;font:500 14px var(--sans);padding:6px 0;cursor:pointer}
.lightbox .fermer{top:20px;right:20px}
.lightbox .prec{left:20px;top:50%}.lightbox .suiv{right:20px;top:50%}
.lightbox .compteur{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#c5c9cc;font-size:14px}
@media (max-width:820px){.lightbox .nav{top:auto;bottom:56px}}

/* À propos */
.apropos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);padding:clamp(40px,7vw,96px) var(--marge) clamp(72px,10vw,140px);align-items:start}
.apropos .cadre{aspect-ratio:4/5;position:sticky;top:110px}
.apropos h1{font:400 clamp(52px,8vw,124px)/.92 var(--serif);letter-spacing:-.03em;margin-bottom:36px}
.etapes{margin-top:40px;border-top:1px solid var(--voile)}
.etapes div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--voile)}
.etapes strong{font:400 22px var(--serif)}
@media (max-width:820px){.apropos{grid-template-columns:1fr}.apropos .cadre{position:static}}

/* Services */
.prestations{padding:20px var(--marge) clamp(72px,10vw,140px)}
.prestation{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(20px,4vw,56px);padding:44px 0;border-top:1px solid var(--voile);align-items:start}
.prestation:last-child{border-bottom:1px solid var(--voile)}
.prestation h2{font-size:clamp(40px,5vw,68px);margin:0}
.prestation .cadre{aspect-ratio:3/2}
.prestation p{color:#363a40;max-width:44ch}
@media (max-width:820px){.prestation{grid-template-columns:1fr}}

/* Contact */
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,6vw,96px);padding:clamp(40px,7vw,96px) var(--marge) clamp(72px,10vw,140px);align-items:start}
.contact h1{font:400 clamp(52px,8vw,124px)/.92 var(--serif);letter-spacing:-.03em;margin-bottom:28px}
.contact .cadre{aspect-ratio:4/5}
.coord{margin-top:40px;border-top:1px solid var(--voile)}
.coord>div{padding:22px 0;border-bottom:1px solid var(--voile)}
.coord span{display:block;font-size:13px;color:var(--ardoise);margin-bottom:4px}
.coord a,.coord b,.coord output{font:400 clamp(24px,2.6vw,34px)/1.3 var(--serif);text-decoration:none}
.coord a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.reveler{all:unset;cursor:pointer;font:400 clamp(24px,2.6vw,34px)/1.3 var(--serif);display:inline-flex;gap:14px;align-items:baseline}
.reveler::before{content:"→";display:inline-block;transition:transform .3s ease}
.reveler:hover::before{transform:translateX(6px)}
.reveler:focus-visible{outline:2px solid var(--poudre);outline-offset:3px}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px var(--marge);font-size:14px;color:var(--ardoise);border-top:1px solid var(--voile)}
footer a{text-decoration:none}footer a:hover{color:var(--encre)}
footer .insta{display:inline-flex;align-items:center;gap:8px}
footer .insta span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

@keyframes monte{from{transform:translateY(.25em);opacity:0}to{transform:none;opacity:1}}
.hero h1{animation:monte 1.1s cubic-bezier(.2,.7,.1,1) both}

/* Soulignement animé au survol des boutons fléchés */
.bouton,.lien-fleche,.reveler{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:6px;transition:background-size .45s cubic-bezier(.6,0,.2,1),color .2s,opacity .2s}
.bouton:hover,.bouton:focus-visible,.lien-fleche:hover,.lien-fleche:focus-visible,.reveler:hover,.reveler:focus-visible{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){.bouton,.lien-fleche,.reveler{transition:none}}

/* Pages légales */
.legal{padding:clamp(48px,7vw,96px) var(--marge) clamp(72px,10vw,140px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3.5vw,64px)}
.legal .corps{grid-column:4 / span 7;max-width:68ch}
.legal h2{font-size:clamp(26px,2.6vw,36px);margin:56px 0 16px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#363a40;margin-bottom:14px}
.legal ul{padding-left:1.2em;margin-bottom:14px}
.legal a{text-underline-offset:3px}
.legal .maj{color:var(--ardoise);font-size:15px;margin-top:48px}
.legal .reveler{font:inherit;text-decoration:underline;text-underline-offset:3px;background:none;padding:0}
.legal .reveler::before{content:none}
.reveler-tel:not(.reveler){all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.reveler-tel:focus-visible{outline:2px solid var(--poudre);outline-offset:3px}
footer .liens{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
@media (max-width:900px){.legal .corps{grid-column:1 / -1}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bandeau de consentement */
.consentement{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--encre);color:var(--papier);padding:12px 18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;box-shadow:0 6px 24px rgba(29,32,36,.2)}
.consentement[hidden]{display:none}
.consentement p{font-size:13px;line-height:1.45;color:#D5D8DA;margin:0;max-width:34ch}
.consentement p a{color:var(--papier);text-underline-offset:3px}
.consentement .choix{display:flex;gap:20px}
.consentement .bouton{margin:0;color:var(--papier);font-size:16px;gap:8px}
@media (min-width:700px){.consentement{left:auto;right:24px;bottom:24px;max-width:460px}}