:root{
  --noir:#000000;
  --beton:#403833;
  --gris:#4E453F;
  --or:#C4A07A;
  --or-vif:#D4B48F;
  --craie:#F7F3EE;
  --cendre:#B9A794;
  --taupe:#9A8370;
  --display:'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --body:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px);background:var(--noir)}
body{margin:0;background:var(--noir);color:var(--craie);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
html{overflow-x:hidden;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--or-vif);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.95;margin:0;letter-spacing:.01em;font-weight:700}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--noir);border-bottom:2px solid var(--or)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.top img{height:30px;width:auto}
.top nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.top nav a{text-decoration:none;font-family:var(--body);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--cendre);padding:10px 0}
.top nav a:hover{color:var(--craie)}
.top nav a.cta{color:var(--noir);background:var(--or);padding:8px 16px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.top nav a.cta:hover{background:var(--or-vif)}

/* hero */
.hero{position:relative;padding:72px 0 120px;overflow:hidden}
.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:48px}
.hero h1{font-weight:700;font-size:clamp(64px,10.5vw,160px);color:var(--craie)}
.hero h1 span{display:block}
.hero h1 .decale{color:transparent;-webkit-text-stroke:2px var(--craie)}
.hero .cote{display:flex;flex-direction:column;align-items:center;gap:28px;padding-bottom:12px}
.hero .cote img{width:100%;max-width:560px;margin:0 auto;animation:balaye 1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes balaye{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.hero p{margin:0 auto;max-width:30em;color:var(--cendre);font-size:18px}
.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;font-family:var(--body);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn.plein{background:var(--or);color:var(--noir)}
.btn.plein:hover{background:var(--or-vif)}
.btn.vide{background:var(--craie);color:var(--noir)}
.btn.vide:hover{background:#FFFFFF}

/* bande */
.bande{background:var(--or);color:var(--noir);transform:rotate(-2.2deg);margin:-30px -40px 0;padding:16px 0;overflow:hidden;position:relative;z-index:2}
.defile{display:flex;gap:40px;width:max-content;animation:defile 26s linear infinite;font-family:var(--display);font-weight:700;font-size:38px;text-transform:uppercase;white-space:nowrap}
.defile span{display:inline-flex;align-items:center;gap:40px}
.defile span::after{content:"";width:22px;height:8px;background:var(--noir);transform:skewX(-30deg)}
@keyframes defile{to{transform:translateX(-50%)}}

/* manifeste */
.manifeste{background:var(--beton);padding:150px 0 120px;margin-top:-20px;position:relative;overflow:hidden}
.manifeste .fond{position:absolute;right:-2%;bottom:-6%;font-family:var(--display);font-weight:700;font-size:clamp(180px,30vw,420px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px #3A332E;pointer-events:none;user-select:none}
.manifeste .wrap{position:relative}
.manifeste h2{font-weight:700;font-size:clamp(44px,6vw,84px);max-width:11em;margin-bottom:36px}
.manifeste h2 em{font-style:normal;color:var(--or-vif)}
.manifeste .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:860px}
.manifeste p{margin:0;font-size:19px;color:#E4DACD}

/* piliers */
.piliers{padding:110px 0}
.entete{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.entete h2{font-weight:700;font-size:clamp(52px,7vw,104px)}
.entete p{margin:0;max-width:26em;color:var(--cendre)}
.colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.col{background:var(--beton);min-height:520px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden;transition:background .25s}
.col:hover{background:var(--gris)}
.col h3{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:clamp(64px,7.4vw,108px);color:var(--craie);align-self:flex-start}
.col:nth-child(2) h3{color:var(--or-vif)}
.col p{margin:0;font-size:18px;color:#E4DACD;max-width:13em}
.col::after{content:"";position:absolute;top:0;right:0;width:60px;height:6px;background:var(--or);transform:skewX(-30deg) translateX(10px)}

/* collection */
.collection{background:var(--craie);color:var(--noir);padding:120px 0;clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%)}
.collection .entete p{color:#403833}
.pieces{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:18px}
.piece{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:24px;overflow:hidden}
.piece.p1{grid-row:span 2;background:var(--noir);color:var(--craie)}
.piece.p2{background:var(--beton);color:var(--craie)}
.piece.p3{background:var(--or);color:var(--noir)}
.piece .visuel{width:100%;aspect-ratio:3/2;object-fit:cover;margin:18px 0 22px;position:relative;z-index:1}
.piece.p1 .visuel{aspect-ratio:auto;flex:1;object-fit:contain;background:#F7F3EE}
.niveaux{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.etiquette.niv{background:var(--craie);color:var(--noir);border:2px solid currentColor}
.etiquette{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;background:var(--craie);color:var(--noir);position:relative;z-index:1}
.p1 .etiquette{background:var(--or);color:var(--noir)}
.p1 .etiquette.niv,.p2 .etiquette.niv{background:transparent;color:var(--craie);border:2px solid var(--craie)}
.p3 .etiquette.niv{background:transparent;color:var(--noir);border:2px solid var(--noir)}
.p2 .etiquette{background:var(--or);color:var(--noir)}
.piece h3{font-weight:700;font-size:clamp(44px,5vw,72px);position:relative;z-index:1;max-width:5em}
.piece .info{position:relative;z-index:1;max-width:17em}
.piece .info p{margin:6px 0 0;font-size:16px}
.piece .prix{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase}

/* intensites */
.intensites{padding:120px 0}
.choix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.onglets{display:flex;flex-direction:column;gap:6px}
.onglet{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 20px;background:var(--beton);border-left:6px solid transparent;transition:background .2s,border-color .2s}
.onglet:hover{background:var(--gris)}
.onglet:focus-visible{outline:3px solid var(--or-vif);outline-offset:2px}
.onglet[aria-selected="true"]{border-left-color:var(--or);background:var(--gris)}
.onglet strong{font-family:var(--display);font-weight:700;font-size:44px;text-transform:uppercase;line-height:1}
.onglet span{color:var(--cendre);font-size:15px;text-align:right}
.scene{background:var(--beton);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;position:relative}
.scene svg{width:78%;height:auto}
.scene p{margin:0;text-align:center;max-width:24em;color:#E4DACD;min-height:3.2em}
.zone{transition:all .45s cubic-bezier(.2,.8,.2,1)}

/* ambiance */
.ambiance{padding:0 0 120px}
.cadres{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px}
.cadre{margin:0;background:var(--beton);display:flex;flex-direction:column;border-top:4px solid var(--or)}
.cadre img{width:100%;height:460px;object-fit:cover;object-position:center 25%}
.cadre figcaption{padding:20px}
.cadre:nth-child(2){border-top-color:var(--craie)}
.cadre:nth-child(3){border-top-color:var(--gris)}
.cadre h3{font-weight:700;font-size:34px}
.cadre p{margin:8px 0 0;color:var(--cendre);font-size:16px}
.palette{display:flex;gap:4px;margin-top:4px}
.palette div{flex:1;padding:16px 20px;font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase}
.palette{flex-wrap:wrap}
.palette div{min-width:150px}
.palette .n{background:var(--noir);border:1px solid var(--gris)}
.palette .b{background:var(--beton)}
.palette .t{background:var(--taupe);color:var(--noir)}
.palette .o{background:var(--or);color:var(--noir)}
.palette .i{background:var(--craie);color:var(--noir)}
.palette small{display:block;font-family:var(--body);font-weight:500;font-size:14px;text-transform:none;opacity:.8}

/* defi */
.defi{background:var(--or);color:var(--noir);padding:120px 0;clip-path:polygon(0 0,100% 4vw,100% 100%,0 100%)}
.defi .grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.defi h2{font-weight:700;font-size:clamp(56px,7.5vw,112px)}
.defi .tag{font-family:var(--display);font-weight:700;font-size:28px;margin:16px 0 18px}
.defi p{margin:0 0 28px;max-width:28em;font-size:18px}
.inscription{display:flex;gap:8px;flex-wrap:wrap}
.inscription label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.inscription input{flex:1 1 220px;min-height:52px;padding:0 16px;border:2px solid var(--noir);background:var(--craie);color:var(--noir);font:inherit}
.inscription .btn{background:var(--noir);color:var(--craie)}
.inscription .btn:hover{background:#403833}
.retour{min-height:24px;margin-top:12px;font-weight:600}
.compteur{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.compteur strong{font-family:var(--display);font-weight:700;font-size:56px;line-height:1}
.compteur button{all:unset;cursor:pointer;font-weight:600;text-decoration:underline;padding:8px 0}
.compteur button:focus-visible{outline:3px solid var(--noir)}
.jours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.jour{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1/1;min-height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:22px;background:rgba(0,0,0,.12);color:var(--noir);transition:background .15s,color .15s}
.jour:hover{background:rgba(0,0,0,.24)}
.jour:focus-visible{outline:3px solid var(--noir);outline-offset:1px}
.jour[aria-pressed="true"]{background:var(--noir);color:var(--craie)}
.barre{height:10px;background:rgba(0,0,0,.15);margin-top:14px}
.barre div{height:100%;background:var(--noir);width:0;transition:width .3s}

/* footer */
footer{padding:64px 0 48px}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
footer img{height:54px;width:auto}
footer p{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,52px);text-transform:uppercase;line-height:.95}
footer small{color:var(--cendre)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .hero .wrap,.choix,.defi .grille{grid-template-columns:minmax(0,1fr)}
  .hero{padding:48px 0 100px}
  .manifeste .cols{grid-template-columns:minmax(0,1fr)}
  .colonnes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .col{min-height:380px}
  .pieces{grid-template-columns:minmax(0,1fr)}
  .piece.p1{grid-row:auto}
  .cadres{grid-template-columns:minmax(0,1fr)}
  .cadre img{height:360px}
  footer .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .top nav{gap:14px;flex-wrap:nowrap;overflow-x:auto;width:100%;min-width:0;padding-bottom:4px;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  .top .wrap{padding-top:8px;padding-bottom:6px;row-gap:4px}
  .hero h1{font-size:clamp(38px,12.5vw,64px)}
  .hero h1 .decale{-webkit-text-stroke:1.5px var(--craie)}
  .top nav a{font-size:12px;white-space:nowrap}
  .top nav a.cta{padding:6px 12px}
  .colonnes{grid-template-columns:minmax(0,1fr)}
  .col{min-height:auto;flex-direction:row;align-items:center}
  .col{flex-direction:column;align-items:flex-start;gap:10px}
  .col h3{writing-mode:horizontal-tb;transform:none;font-size:clamp(24px,8.2vw,46px);max-width:100%}
  .col p{max-width:none;font-size:16px}
  .piece h3{font-size:clamp(24px,7.8vw,44px);max-width:none}
  .onglet{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px}
  .onglet strong{font-size:clamp(28px,9vw,38px)}
  .onglet span{text-align:left;font-size:14px}
  h2{overflow-wrap:anywhere}
  .palette{flex-direction:column}
  .jours{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* animation des piliers */
@media (prefers-reduced-motion:no-preference){
  .js .colonnes .col{opacity:0;transform:translateY(80px)}
  .js .colonnes .col h3{clip-path:inset(0 0 100% 0)}
  .js .colonnes .col p{opacity:0;transform:translateY(16px)}
  .js .colonnes .col::after{width:0}
  .js .colonnes.vu .col{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i)*.18s),transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.18s),background .25s}
  .js .colonnes.vu .col h3{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.2,1) calc(var(--i)*.18s + .35s)}
  .js .colonnes.vu .col p{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i)*.18s + 1.1s),transform .6s ease calc(var(--i)*.18s + 1.1s)}
  .js .colonnes.vu .col::after{width:60px;transition:width .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.18s + 1.2s)}
  .js .colonnes.vu .col:hover h3{color:var(--or-vif);transition:color .3s}
}

/* Barre d'administration WordPress */
.admin-bar .top{top:32px}
@media screen and (max-width:782px){.admin-bar .top{top:46px}}

/* Pages simples (mentions légales, CGV, etc.) */
.page-simple{padding:90px 0 110px;min-height:60vh}
.page-simple h1{font-size:clamp(44px,6vw,80px);margin-bottom:36px}
.contenu-page{max-width:46em;color:#E4DACD}
.contenu-page h2{font-size:34px;margin:44px 0 14px}
.contenu-page a{color:var(--or-vif)}