:root{
  --fx-color-fond:#f3e9d8;
  --fx-color-surface:#fbf6ec;
  --fx-color-texte:#2b1d14;
  --fx-color-texte-secondaire:#6b5443;
  --fx-color-accent:#a63c24;
  --fx-color-accent-2:#0b6e4b;
  --fx-color-contraste:#1f2d3d;
  --fx-color-bordure:#d9c7a8;
  --fx-font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --fx-font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --pad:max(var(--gut),calc((100% - 1560px)/2));
  --gap:clamp(1rem,2vw,2rem);
  --barre:3.5rem;
}
@property --glow{syntax:'<length>';inherits:true;initial-value:0px}
@property --lis-mix{syntax:'<percentage>';inherits:true;initial-value:0%}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fx-color-fond);color:var(--fx-color-texte);font-family:var(--fx-font-body);font-size:1.125rem;line-height:1.6;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--fx-color-accent)}
:focus-visible{outline:3px solid var(--fx-color-accent-2);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--barre) + 1rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--fx-color-texte);color:var(--fx-color-surface);padding:.75rem 1rem;text-decoration:none}
.skip:focus{top:.5rem}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

h1,h2,h3{font-family:var(--fx-font-display);font-weight:300;letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance}
em{font-style:italic;color:var(--fx-color-accent)}
p{margin:0 0 1em}
.k{font-family:var(--fx-font-body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fx-color-texte-secondaire);margin:0 0 .6rem}

/* Symboles SVG */
.sol{color:var(--fx-color-accent);stroke:currentColor}
.velo{stroke:var(--fx-color-texte)}
.lisere{stroke:color-mix(in srgb,var(--fx-color-accent-2),#fff var(--lis-mix,0%));stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 var(--glow,0px) color-mix(in srgb,var(--fx-color-accent-2),#fff 55%))}
.f-fond{fill:var(--fx-color-fond)}.f-surface{fill:var(--fx-color-surface)}.f-texte{fill:var(--fx-color-texte)}
.f-brou{fill:var(--fx-color-texte-secondaire)}.f-acc{fill:var(--fx-color-accent)}.f-vert{fill:var(--fx-color-accent-2)}
.f-nuit{fill:var(--fx-color-contraste)}.f-joint{fill:var(--fx-color-bordure)}
.k-texte{stroke:var(--fx-color-texte)}.k-brou{stroke:var(--fx-color-texte-secondaire)}.k-acc{stroke:var(--fx-color-accent)}
.k-vert{stroke:var(--fx-color-accent-2)}.k-joint{stroke:var(--fx-color-bordure)}.k-surface{stroke:var(--fx-color-surface)}

/* Barre */
.barre{position:sticky;top:0;z-index:50;background:var(--fx-color-fond);border-bottom:1px solid var(--fx-color-bordure);display:flex;align-items:center;gap:1.5rem;min-height:var(--barre);padding:.35rem var(--pad)}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--fx-font-display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;line-height:1;margin-right:auto;min-height:2.75rem}
.logo svg{width:2.4rem;height:auto;flex:none;--sw1:6;--sw2:3.5;--sw3:3}
.logo em{color:var(--fx-color-accent)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
.nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .7rem;font-size:.95rem;text-decoration:none;font-weight:500}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--fx-color-accent-2);text-decoration-thickness:2px}
.statut{margin:0;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.statut::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--fx-color-texte-secondaire);flex:none}
.statut[data-etat=ouvert]::before{background:var(--fx-color-accent-2)}
.statut[data-etat=ferme]::before{background:var(--fx-color-accent)}
.menu-btn{display:none;min-height:2.75rem;padding:0 1rem;background:none;border:1px solid var(--fx-color-texte);font:inherit;font-size:.95rem;font-weight:600;color:inherit;cursor:pointer}

/* Horizon */
.horizon{display:block;height:2px;background:var(--fx-color-accent-2);border:0;margin:0;width:100%}
.horizon-svg{display:block;width:100%;height:2px}
.horizon-svg line{stroke:var(--fx-color-accent-2);stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:0;animation:trace .9s cubic-bezier(.6,.1,.2,1) backwards}
@keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:.8rem;min-height:3.25rem;padding:.7rem 1.4rem .7rem 1rem;background:var(--fx-color-accent);color:var(--fx-color-surface);font-weight:600;font-size:1rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;line-height:1.2}
.btn:hover{background:var(--fx-color-texte);color:var(--fx-color-surface)}
.btn .h{font-family:var(--fx-font-display);font-style:italic;font-weight:400;font-size:1.15rem;padding-right:.8rem;border-right:1px solid color-mix(in srgb,var(--fx-color-surface),transparent 55%)}
.lien{display:inline-flex;align-items:center;min-height:3.25rem;font-weight:600;font-size:1rem}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem;margin-top:1.75rem}

/* Hero */
.hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--barre))}
.hero-ciel{position:relative;flex:1;padding:clamp(2rem,5vw,4.5rem) var(--pad) clamp(2.5rem,4vw,3.5rem)}
.hero h1{font-size:clamp(2.35rem,7vw,8rem);line-height:1;max-width:11.5em;position:relative;z-index:2}
.hero h1 em{display:block}
.hero .lead{position:relative;z-index:2;max-width:33rem;margin-top:1.75rem;font-size:1.2rem}
.hero .cta{position:relative;z-index:2}
.hero-sun{position:absolute;right:var(--pad);bottom:0;width:min(34vw,31rem);height:auto;transform:translateY(7%);z-index:1}
.hero-quai{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;padding:0 var(--pad)}
.fait{padding:1.25rem var(--gap) 1.5rem 0;margin:0}
.fait+.fait{padding-left:var(--gap);border-left:1px solid var(--fx-color-bordure)}
.fait dt{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fx-color-texte-secondaire)}
.fait dd{margin:.25rem 0 0;font-family:var(--fx-font-display);font-size:clamp(1.3rem,2vw,1.8rem);font-weight:400;line-height:1.2}
.fait dd small{display:block;font-family:var(--fx-font-body);font-size:.95rem;font-weight:600;margin-top:.15rem}
.frise{position:relative;height:.9rem;margin-top:.8rem;border-bottom:1px solid var(--fx-color-texte-secondaire);max-width:16rem}
.frise span{position:absolute;bottom:-.1rem;font-size:.72rem;font-weight:600;color:var(--fx-color-texte-secondaire);transform:translateY(105%)}
.frise .a{left:0}.frise .b{right:0}
.frise i{position:absolute;bottom:-.3rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--fx-color-accent-2);transform:translateX(-50%);display:none}
.frise i.on{display:block}
.fait .frise+small{margin-top:1.3rem}

/* Manifeste */
.manifeste{padding:clamp(4rem,9vw,8rem) var(--pad) clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.manifeste blockquote{grid-column:2/12;margin:0;font-family:var(--fx-font-display);font-weight:300;font-size:clamp(1.8rem,3.9vw,3.7rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.nom{grid-column:6/12;margin-top:2rem;color:var(--fx-color-texte-secondaire);max-width:34rem}
.valeurs{grid-column:1/-1;list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.valeurs li{border-top:2px solid var(--fx-color-texte);padding-top:1rem}
.valeurs h3{font-style:italic;font-weight:400;font-size:1.55rem;margin-bottom:.5rem}
.valeurs p{margin:0;color:var(--fx-color-texte-secondaire)}

/* Heures */
.ciel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(4rem,9vw,8rem) var(--pad) clamp(2rem,4vw,3.5rem)}
.num{grid-column:1/-1;margin:0;font-family:var(--fx-font-display);font-weight:300;font-size:clamp(6rem,19vw,19rem);line-height:.8;letter-spacing:-.04em;white-space:nowrap}
.num i{font-style:italic;color:var(--fx-color-accent);font-size:.5em;letter-spacing:-.02em;margin-left:.08em}
.titre{grid-column:5/-1;font-size:clamp(2rem,4.4vw,4.4rem);margin-top:clamp(1.25rem,3vw,2.5rem)}
.inverse .num{text-align:right}
.inverse .titre{grid-column:1/9;grid-row:2}
.quai{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(2rem,4vw,3.5rem) var(--pad) clamp(4rem,8vw,7rem);align-items:start}
.texte{grid-column:1/8;max-width:40rem}
.texte .grand{font-size:1.35rem;line-height:1.5}
.carnet{grid-column:9/13;background:var(--fx-color-surface);border:1px solid var(--fx-color-bordure);border-top:3px solid var(--fx-color-texte);padding:1.25rem 1.4rem 1.5rem;position:sticky;top:calc(var(--barre) + 1rem)}
.carnet h3{font-family:var(--fx-font-body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fx-color-texte-secondaire);margin-bottom:.5rem}
.carnet dl{margin:0}
.carnet .r{padding:.8rem 0;border-top:1px dashed var(--fx-color-bordure)}
.carnet dt{font-size:.85rem;color:var(--fx-color-texte-secondaire)}
.carnet dd{margin:.1rem 0 0;font-weight:600;line-height:1.4}
.carnet dd .gros{font-family:var(--fx-font-display);font-weight:400;font-size:1.7rem;line-height:1.1;display:block}
.carnet dd .doux{font-weight:400;color:var(--fx-color-texte-secondaire)}
.carnet p.note{margin:.9rem 0 0;font-size:.95rem;color:var(--fx-color-texte-secondaire)}
.rang{list-style:none;margin:2rem 0 0;padding:0;counter-reset:r}
.rang li{counter-increment:r;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--fx-color-bordure);padding:.7rem 0;font-family:var(--fx-font-display);font-weight:300;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.15}
.rang li::after{content:"0" counter(r);font-family:var(--fx-font-body);font-size:.8rem;font-weight:600;color:var(--fx-color-texte-secondaire)}
.rang li:last-child{border-bottom:1px solid var(--fx-color-bordure)}

/* Galerie */
.galerie-tete{padding:clamp(4rem,8vw,7rem) var(--pad) 2rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.galerie-tete h2{grid-column:1/9;font-size:clamp(2rem,4.4vw,4.4rem)}
.galerie{padding:1rem var(--pad) clamp(4rem,8vw,7rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem) var(--gap)}
.galerie figure{margin:0}
.galerie .large{grid-column:1/-1}
.galerie svg{display:block;width:100%;height:auto}
.galerie figcaption{margin-top:.6rem;font-size:.9rem;color:var(--fx-color-texte-secondaire);display:flex;gap:.8rem}
.galerie figcaption b{font-family:var(--fx-font-display);font-style:italic;font-weight:400;color:var(--fx-color-texte);font-size:1.1rem;line-height:1.2}

/* FAQ */
.faq{padding:clamp(3rem,6vw,5rem) var(--pad) clamp(4rem,8vw,7rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.faq h2{grid-column:1/5;font-size:clamp(2rem,3.6vw,3.6rem);align-self:start}
.faq .liste{grid-column:5/-1;border-bottom:1px solid var(--fx-color-texte)}
details{border-top:1px solid var(--fx-color-texte)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.75rem;padding:.7rem 0;font-family:var(--fx-font-display);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:400;line-height:1.2}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--fx-font-body);font-size:1.6rem;color:var(--fx-color-accent);flex:none;width:2rem;text-align:center}
details[open] summary::after{content:"−"}
details .rep{padding:0 3rem 1.4rem 0;max-width:42rem}
details .rep p:last-child{margin:0}

/* Contact */
.confirm{background:var(--fx-color-surface);border:1px solid var(--fx-color-accent-2);border-left-width:6px;padding:1.1rem 1.3rem;margin-bottom:1.5rem;font-family:var(--fx-font-display);font-size:1.3rem;line-height:1.3}
.confirm[hidden]{display:none}
.confirm p{margin:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem}
.form .pleine{grid-column:1/-1}
.form label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.3rem}
.form .opt{font-weight:400;color:var(--fx-color-texte-secondaire)}
.form input,.form select,.form textarea{width:100%;min-height:3rem;padding:.65rem .8rem;font:inherit;font-size:1rem;color:var(--fx-color-texte);background:var(--fx-color-surface);border:1px solid var(--fx-color-texte-secondaire);border-radius:0}
.form textarea{min-height:9rem;resize:vertical}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.carnet a{font-weight:600}

/* Pied de nuit */
.nuit{background:var(--fx-color-contraste);color:var(--fx-color-surface)}
.nuit a:hover{color:var(--fx-color-surface)}
.nuit :focus-visible{outline-color:var(--fx-color-surface)}
.nuit-ciel{position:relative;padding:clamp(4rem,8vw,7rem) var(--pad) clamp(2.5rem,5vw,4rem);min-height:22rem}
.nuit .k{color:var(--fx-color-surface)}
.nuit .num{font-size:clamp(6rem,17vw,16rem);color:var(--fx-color-surface)}
.nuit .num i{color:var(--fx-color-surface);opacity:.75}
.nuit-ciel p.mot{position:relative;z-index:2;max-width:26rem;margin:1.5rem 0 0;font-family:var(--fx-font-display);font-size:1.5rem;font-weight:300;line-height:1.3}
.nuit-ciel p.mot em{color:var(--fx-color-surface)}
.nuit-sun{position:absolute;right:var(--pad);bottom:0;width:min(38vw,34rem);height:auto;transform:translateY(7%);--lis-mix:35%;--glow:3px;color:var(--fx-color-surface)}
.nuit-sun .sol{color:var(--fx-color-surface)}
.nuit-sun.glow{animation:brille 2.2s ease-out 1}
@keyframes brille{0%{--lis-mix:35%;--glow:3px}35%{--lis-mix:75%;--glow:18px}100%{--lis-mix:35%;--glow:3px}}
.nuit .horizon{background:color-mix(in srgb,var(--fx-color-accent-2),#fff 35%)}
.nuit-quai{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem;padding:clamp(2.5rem,5vw,4rem) var(--pad)}
.nuit-quai>div:nth-child(1){grid-column:1/5}
.nuit-quai>div:nth-child(2){grid-column:5/8}
.nuit-quai>div:nth-child(3){grid-column:8/13}
.nuit address{font-style:normal}
.nuit address p{margin:0 0 .8rem}
.nuit strong{font-weight:600}
.nuit ul{list-style:none;margin:0;padding:0}
.nuit li a{display:inline-flex;align-items:center;min-height:2.5rem;text-decoration:none}
.nuit li a:hover{text-decoration:underline}
.nuit iframe{display:block;width:100%;height:15rem;border:1px solid color-mix(in srgb,var(--fx-color-surface),transparent 60%);background:var(--fx-color-fond)}
.nuit .plan-leg{font-size:.88rem;margin:.5rem 0 0;color:var(--fx-color-surface)}
.mentions{padding:1.25rem var(--pad) 2rem;margin:0;font-size:.88rem;border-top:1px solid var(--fx-color-texte-secondaire);color:var(--fx-color-surface)}

/* 404 */
.perdu{min-height:calc(100svh - var(--barre));display:flex;flex-direction:column}
.perdu .hero-ciel{display:flex;flex-direction:column;justify-content:center}

/* Tablette & mobile */
@media (max-width:68rem){
  .menu-btn{display:inline-flex;align-items:center}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--fx-color-surface);border-bottom:1px solid var(--fx-color-texte);padding:.5rem var(--pad) 1rem}
  .js .nav.ouvert{display:block}
  .js .nav ul{flex-direction:column;gap:0}
  .js .nav a{width:100%;min-height:3.25rem;font-size:1.1rem;border-bottom:1px dashed var(--fx-color-bordure)}
  .nav:not(.ouvert) ul{flex-wrap:wrap}
  html:not(.js) .barre{flex-wrap:wrap}
  html:not(.js) .nav{order:3;width:100%}
  html:not(.js) .nav ul{flex-wrap:wrap}
  .menu-btn{margin-left:0}
  .statut{margin-left:auto}
}
@media (max-width:62rem){
  .titre,.inverse .titre{grid-column:1/-1}
  .inverse .num{text-align:left}
  .texte,.carnet{grid-column:1/-1;max-width:none}
  .texte{max-width:40rem}
  .carnet{position:static;margin-top:2.5rem}
  .manifeste blockquote{grid-column:1/-1}
  .nom{grid-column:1/-1}
  .valeurs{grid-template-columns:1fr}
  .faq h2,.faq .liste{grid-column:1/-1}
  .faq h2{margin-bottom:2rem}
  .hero-quai{grid-template-columns:1fr 1fr}
  .fait:nth-child(3){padding-left:0;border-left:0}
  .fait:nth-child(n+3){border-top:1px solid var(--fx-color-bordure)}
  .fait:nth-child(3),.fait:nth-child(4){padding-top:1.25rem}
  .hero-sun{width:min(52vw,22rem)}
  .nuit-quai>div:nth-child(n){grid-column:1/-1}
  .nuit-sun{width:min(60vw,22rem)}
  .nuit-ciel{min-height:0}
  .galerie{grid-template-columns:1fr}
}
@media (max-width:44rem){
  .statut{display:none}
  .menu-btn{margin-left:auto}
  .form{grid-template-columns:1fr}
  .hero-ciel{padding-bottom:6.5rem}
  details .rep{padding-right:0}
}
@media (max-width:30rem){
  .hero-quai{grid-template-columns:1fr}
  .fait+.fait{padding-left:0;border-left:0;border-top:1px solid var(--fx-color-bordure)}
  .fait:nth-child(n){padding-left:0}
  .hero .lead{font-size:1.1rem}
  .logo{font-size:1.05rem}
  .logo svg{width:2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  @view-transition{navigation:none}
}