@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/caveat.woff2) format('woff2');}
:root{
  color-scheme: only dark;   /* empeche Android d'inverser les couleurs */
  --bg:#0d0e11; --bg-alt:#17191d; --surface:#1e2126; --line:#2b2e34;
  --text:#f5f3ee; --text-dim:#999ca3; --gold:#ff6b3d; --sage:#74a693; --rust:#ff6b3d;
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden;}
body{
  overflow-x:hidden;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 900px 700px at 85% -5%, rgba(255,238,220,0.07), transparent 60%),
    radial-gradient(ellipse 700px 600px at -5% 40%, rgba(255,238,220,0.04), transparent 55%),
    radial-gradient(ellipse 800px 500px at 100% 85%, rgba(255,238,220,0.031), transparent 55%);
  background-size:auto, auto, auto;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  color:var(--text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;
}
body::after{content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22500%22%20height%3D%22500%22%3E%3Cline%20x1%3D%22119.0%22%20y1%3D%22272.1%22%20x2%3D%2291.4%22%20y2%3D%22251.0%22%20stroke%3D%22white%22%20stroke-width%3D%220.43%22%20opacity%3D%220.11%22/%3E%3Cline%20x1%3D%226.6%22%20y1%3D%22418.7%22%20x2%3D%229.6%22%20y2%3D%22448.9%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20opacity%3D%220.16%22/%3E%3Cline%20x1%3D%22418.2%22%20y1%3D%22238.2%22%20x2%3D%22444.8%22%20y2%3D%22275.2%22%20stroke%3D%22white%22%20stroke-width%3D%220.43%22%20opacity%3D%220.2%22/%3E%3Cline%20x1%3D%22261.6%22%20y1%3D%22370.6%22%20x2%3D%22304.7%22%20y2%3D%22388.9%22%20stroke%3D%22white%22%20stroke-width%3D%220.45%22%20opacity%3D%220.17%22/%3E%3Cline%20x1%3D%22150.6%22%20y1%3D%2215.5%22%20x2%3D%2296.8%22%20y2%3D%2224.8%22%20stroke%3D%22white%22%20stroke-width%3D%220.44%22%20opacity%3D%220.21%22/%3E%3Cline%20x1%3D%22357.1%22%20y1%3D%22460.5%22%20x2%3D%22368.4%22%20y2%3D%22426.5%22%20stroke%3D%22white%22%20stroke-width%3D%220.39%22%20opacity%3D%220.21%22/%3E%3Cline%20x1%3D%22439.4%22%20y1%3D%2248.7%22%20x2%3D%22444.6%22%20y2%3D%2273.6%22%20stroke%3D%22white%22%20stroke-width%3D%220.49%22%20opacity%3D%220.15%22/%3E%3Cline%20x1%3D%22313.3%22%20y1%3D%22150.5%22%20x2%3D%22282.9%22%20y2%3D%22177.0%22%20stroke%3D%22white%22%20stroke-width%3D%220.37%22%20opacity%3D%220.17%22/%3E%3Cline%20x1%3D%22292.1%22%20y1%3D%22452.1%22%20x2%3D%22334.7%22%20y2%3D%22431.7%22%20stroke%3D%22white%22%20stroke-width%3D%220.47%22%20opacity%3D%220.22%22/%3E%3Cline%20x1%3D%22335.6%22%20y1%3D%2281.5%22%20x2%3D%22388.7%22%20y2%3D%2269.5%22%20stroke%3D%22white%22%20stroke-width%3D%220.48%22%20opacity%3D%220.17%22/%3E%3Cline%20x1%3D%22356.9%22%20y1%3D%22105.6%22%20x2%3D%22309.2%22%20y2%3D%2281.9%22%20stroke%3D%22white%22%20stroke-width%3D%220.36%22%20opacity%3D%220.11%22/%3E%3Ccircle%20cx%3D%22427.0%22%20cy%3D%22494.9%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.18%22/%3E%3Ccircle%20cx%3D%22205.2%22%20cy%3D%2275.4%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.18%22/%3E%3Ccircle%20cx%3D%22436.4%22%20cy%3D%2222.1%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.1%22/%3E%3Ccircle%20cx%3D%22359.2%22%20cy%3D%22165.5%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.2%22/%3E%3Ccircle%20cx%3D%22252.7%22%20cy%3D%22499.3%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.11%22/%3E%3Ccircle%20cx%3D%22299.9%22%20cy%3D%2215.7%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.14%22/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;height:auto;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;width:100%;min-width:0;}

header.site{position:sticky;top:0;z-index:50;background:rgba(18,21,26,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow:visible;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:51px;max-width:1180px;margin:0 auto;}
.logo-mark{display:flex;align-items:center;}
.logo-mark img{margin-right:13px;}
.logo-mark img{width:38px;height:38px;object-fit:contain;flex-shrink:0;}
.logo-text{font-family:var(--font-body);font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;white-space:nowrap;}
.logo-text span{color:var(--gold);}
.footer-r img{width:14px;height:14px;margin-right:1px;object-fit:contain;transform:translateY(0px);}
.navlinks{display:flex;font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.04em;text-transform:uppercase;}
.navlinks a{color:var(--text-dim);transition:color .2s ease;position:relative;cursor:pointer;margin-left:34px;}
.navlinks a:first-child{margin-left:0;}
.navlinks a:hover,.navlinks a.active{color:var(--text);}
.navlinks a.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);}
.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;}
.navtoggle span{width:24px;height:2px;background:var(--text);}
@media (max-width:680px){
  .navlinks{position:fixed;top:52px;left:0;right:0;bottom:0;background:var(--bg);flex-direction:column;gap:0;padding:24px 32px;transform:translateX(100%);visibility:hidden;transition:transform .3s ease, visibility 0s linear .3s;overflow-y:auto;}
  .navlinks.open{transform:translateX(0);visibility:visible;transition:transform .3s ease, visibility 0s;}
  .navlinks a{display:block;padding:16px 0;border-bottom:1px solid var(--line);margin-left:0;}
  .navtoggle{display:flex;}
  header.site{backdrop-filter:none;}
}


.ridge-divider{line-height:0;}
.accent-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--gold);}
.ridge{width:100%;display:block;height:auto;}
.ridge path{stroke:var(--gold);stroke-width:1.2;fill:none;opacity:0.55;}
.ridge path.fill{fill:var(--bg-alt);stroke:none;opacity:1;}

.screen{min-height:min(calc(100vh - 52px), 900px);display:flex;flex-direction:column;justify-content:center;}
.screen>section{width:100%;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
.screen>section.hero{min-height:min(calc(100vh - 52px), 900px);flex-shrink:0;}
.hero{position:relative;padding:clamp(320px, 30vw, 700px) 32px 0;overflow:hidden;background-size:cover;background-position:center;max-width:2400px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(12,14,17,0.42) 0%, rgba(12,14,17,0.65) 55%, var(--bg-alt) 100%);pointer-events:none;}
#accueil .hero::after,
#contact .hero::after{background:linear-gradient(180deg, rgba(12,14,17,0.16) 0%, rgba(12,14,17,0.34) 55%, var(--bg-alt) 100%);}
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:end;padding-bottom:56px;}
.hero-inner.single{grid-template-columns:1fr;}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:6px 14px;margin-bottom:20px;font-weight:700;transform:rotate(-1.5deg);}
.hero .eyebrow{background:none;color:var(--sage);padding:0;font-weight:400;transform:none;}
h1{font-family:var(--font-body);font-size:clamp(2.8rem,7.5vw,5.6rem);font-weight:800;line-height:0.94;letter-spacing:-0.03em;text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,0.5);}
h1 em{font-style:normal;font-family:var(--font-body);color:var(--gold);font-weight:800;}
.hero .eyebrow{text-shadow:0 1px 12px rgba(0,0,0,0.6);}
.hero p.lead{margin-top:22px;font-size:1.08rem;color:#d7d4cb;max-width:48ch;text-shadow:0 1px 14px rgba(0,0,0,0.5);}
.hero-meta{font-family:var(--font-mono);font-size:0.84rem;color:var(--text-dim);border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;}
.hero-meta div{margin-top:10px;}
.hero-meta div:first-child{margin-top:0;}
.hero-meta strong{color:var(--text);font-weight:500;}
.cta-row{display:flex;margin-top:34px;flex-wrap:wrap;}
.cta-row a, .cta-row button{margin:0 16px 12px 0;}
.btn{display:inline-flex;align-items:center;padding:8px 20px;font-family:var(--font-mono);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;border:1px solid var(--gold);border-radius:999px;color:var(--bg);background:var(--gold);transition:all .2s ease;cursor:pointer;}
.btn-quiet{background:transparent;color:var(--gold);}
.btn-quiet:hover{background:var(--gold);color:var(--bg);}
.btn::after{content:'→';font-family:var(--font-body);margin-left:10px;transition:transform .2s ease;}
.btn:hover::after{transform:translateX(3px);}
.btn:hover{background:transparent;color:var(--gold);}
.btn.ghost{border-color:var(--line);color:var(--text);background:none;}
.btn.ghost:hover{border-color:var(--text);background:var(--text);color:var(--bg);}

section{padding:84px 32px;}
section.alt{
  background-image:
    radial-gradient(ellipse 700px 400px at 15% 0%, rgba(255,238,220,0.022), transparent 60%);
  background-repeat:no-repeat;
  background-color:var(--bg-alt);
}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head .eyebrow{margin-bottom:14px;}
h2{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-0.02em;line-height:0.98;overflow-wrap:break-word;}
.section-head p{color:var(--text-dim);margin-top:16px;font-size:1.02rem;}

.rule-head{text-align:left;max-width:100%;margin-bottom:48px;}
.rule-head .rule-row{display:flex;align-items:center;margin-bottom:18px;}
.rule-head .rule-row .line{display:none;}
.rule-head .rule-row .mark{font-family:var(--font-mono);font-style:normal;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:6px 14px;font-weight:700;white-space:nowrap;display:inline-block;transform:rotate(-2deg);}
.rule-head h2{text-align:left;}
.rule-head p{max-width:520px;margin-left:0;margin-right:0;text-align:left;}

.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--text);padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,0.25);}
.badge .dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--bg);font-family:var(--font-body);font-weight:800;font-size:0.72rem;}
.badge .sep{color:var(--line);margin:0 6px;}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.bento-tile .tile-subtitle{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-dim);margin-top:-6px;margin-bottom:14px;}
.bento-tile{overflow:hidden;position:relative;padding:34px;display:flex;flex-direction:column;justify-content:center;min-height:220px;}
.bento-tile.photo-bw::before{content:'';position:absolute;inset:0;background-image:var(--bw-bg);background-size:cover;background-position:center;filter:grayscale(1);z-index:0;}
.bento-tile.photo-bw::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,0.55);z-index:0;}
.bento-tile.photo-bw>*{position:relative;z-index:1;}
.bento-tile.span-2{grid-column:span 2;}
.bento-tile.span-3{grid-column:span 3;}
.bento-tile.span-4{grid-column:span 4;}
.bento-tile.span-6{grid-column:span 6;min-height:auto;}
.bento-tile.tall{min-height:360px;}
.bento-tile.gold{background:linear-gradient(155deg, var(--gold) 0%, #d85a25 100%);}
.bento-tile.gold .bento-num{font-family:var(--font-body);font-weight:800;font-size:4.5rem;line-height:0.85;color:var(--bg);opacity:0.28;position:absolute;top:20px;right:26px;}
.bento-tile.gold h3, .bento-tile.gold p, .bento-tile.gold .tag{color:var(--bg);}
.bento-tile.dark{background:var(--surface);border:1px solid var(--line);}
.bento-tile.photo{background-size:cover;background-position:center;}
.bento-tile.photo::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(8,9,11,0.88) 0%, rgba(8,9,11,0.1) 60%);}
.bento-tile.photo > *{position:relative;z-index:2;}
.bento-tile h3{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:-0.01em;margin-bottom:10px;line-height:1.05;}
.bento-tile p{font-size:0.95rem;color:var(--text-dim);}
.bento-tile .tag{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px;color:var(--text-dim);}
.bento-tile a.more{margin-top:16px;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.05em;text-transform:uppercase;color:inherit;text-decoration:underline;text-underline-offset:4px;}
.bento-quote{font-family:var(--font-body);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.12;text-transform:uppercase;letter-spacing:-0.01em;}
@media (max-width:820px){.bento{grid-template-columns:repeat(2,1fr);} .bento-tile.span-2,.bento-tile.span-3,.bento-tile.span-4,.bento-tile.span-6{grid-column:span 2;}}

.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.card{background:var(--bg);padding:38px 30px;transition:background .2s ease;border-top:3px solid transparent;}
.card:hover{border-top-color:var(--gold);}
.card:hover{background:var(--surface);}
.card .num{font-family:var(--font-mono);color:var(--rust);font-size:0.74rem;letter-spacing:0.08em;font-weight:700;display:block;margin-bottom:18px;}
.card h3{font-family:var(--font-body);font-size:1.35rem;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;margin-bottom:12px;}
.card p{color:var(--text-dim);font-size:0.94rem;}

@media (max-width:900px){.grid3{grid-template-columns:1fr;} .hero-inner{grid-template-columns:1fr;}
  .hero-meta{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px;}}

.stats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt);}
.stat{flex:1;padding:38px 30px;border-right:1px solid var(--line);position:relative;}
.stat::before{content:'';position:absolute;left:0;top:38px;bottom:38px;width:2px;background:var(--gold);}
.stat:last-child{border-right:none;}
.stat .val{font-family:var(--font-body);font-size:2.3rem;font-weight:800;text-transform:uppercase;letter-spacing:-0.02em;color:var(--gold);padding-left:20px;}
.stat .label{font-family:var(--font-mono);font-size:0.74rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-top:8px;padding-left:20px;}
@media (max-width:700px){.stats{flex-direction:column;} .stat{border-right:none;border-bottom:1px solid var(--line);}}

.chiasm-statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt);padding:76px 32px;text-align:center;}
.chiasm-statement p{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,4vw,3rem);line-height:1.15;letter-spacing:-0.02em;max-width:900px;margin:0 auto;}
.chiasm-statement span{color:var(--gold);}

.photo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.photo-grid.cols2{grid-template-columns:1fr 1fr;}
.photo-item{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;transition:transform .3s ease, z-index 0s;}
.photo-item.wide{grid-column:1/-1;aspect-ratio:auto;}
.photo-item.wide img{width:100%;height:auto;display:block;}
.photo-item:nth-child(3n+1){transform:rotate(-1deg);}
.photo-item:nth-child(3n+2){transform:rotate(0.7deg);}
.photo-item:nth-child(3n+3){transform:rotate(-0.5deg);}
.photo-item:hover{transform:rotate(0deg) scale(1.02);z-index:5;}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:brightness(1.12) contrast(1.04);}
.photo-item:hover img{transform:scale(1.06);}
.photo-cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);font-family:var(--font-mono);font-size:0.72rem;color:var(--text);letter-spacing:0.02em;}
@media (max-width:820px){.photo-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.photo-grid, .photo-grid.cols2{grid-template-columns:1fr;}}

.detail-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.detail-item{border:1px solid var(--line);transition:transform .3s ease, z-index 0s;}
.detail-item:nth-child(3n+1){transform:rotate(0.8deg);}
.detail-item:nth-child(3n+2){transform:rotate(-0.6deg);}
.detail-item:nth-child(3n+3){transform:rotate(0.4deg);}
.detail-item:hover{transform:rotate(0deg) scale(1.02);z-index:5;}
.detail-item img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:brightness(1.15) contrast(1.05);}
.detail-item .cap{padding:14px 16px;font-family:var(--font-mono);font-size:0.72rem;color:var(--text-dim);letter-spacing:0.02em;background:var(--surface);}
@media (max-width:820px){.detail-strip{grid-template-columns:1fr;}}

.story{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:center;}
.story img{border:1px solid var(--line);filter:brightness(1.1) contrast(1.05);width:100%;height:auto;display:block;min-width:0;}
.story-text{min-width:0;}
.story-text .eyebrow{margin-bottom:16px;}
@media (max-width:900px){.story{grid-template-columns:1fr;}}

.texture-band{position:relative;padding:70px 32px;background-size:cover;background-position:center;}
.texture-band::before{content:'';position:absolute;inset:0;background:rgba(18,21,26,0.86);}
.texture-band .wrap{position:relative;z-index:2;text-align:center;max-width:600px;}

.process{border-top:1px solid var(--line);}
.pstep{display:grid;grid-template-columns:80px 1fr 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);}
.pstep .idx{font-family:var(--font-mono);color:var(--rust);font-size:0.85rem;}
.pstep h4{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:1.1rem;letter-spacing:-0.01em;}
.pstep p{color:var(--text-dim);font-size:0.94rem;}
@media (max-width:700px){.pstep{grid-template-columns:1fr;}}

.contact-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:64px;align-items:start;}
.contact-grid .form-panel{position:relative;transform:rotate(-0.5deg);background:var(--surface);border:1px solid var(--line);padding:36px 34px;}
.contact-grid .form-panel::before{content:'';position:absolute;top:-14px;left:38px;width:64px;height:26px;background:rgba(255,107,61,0.35);transform:rotate(-4deg);border:1px solid rgba(255,107,61,0.5);}
.contact-grid .info-panel{transform:rotate(0.6deg);margin-top:40px;}
.field{margin-bottom:22px;}
.field label{display:block;font-family:var(--font-mono);font-size:0.74rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:8px;}
.field input,.field textarea,.field select{width:100%;background:none;border:none;border-bottom:1px solid var(--line);color:var(--text);padding:11px 2px;font-family:var(--font-body);font-size:0.95rem;border-radius:0;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom:2px solid var(--gold);}
.select-wrap{position:relative;border-bottom:1px solid var(--line);}
.select-wrap:focus-within{border-bottom:2px solid var(--gold);}
.select-display{width:100%;color:var(--text);padding:11px 26px 11px 2px;font-family:var(--font-body);font-size:0.95rem;line-height:1.35;white-space:normal;word-break:break-word;pointer-events:none;}
.select-display::after{content:'';position:absolute;right:2px;top:50%;transform:translateY(-50%) rotate(45deg);width:7px;height:7px;border-right:1px solid var(--text-dim);border-bottom:1px solid var(--text-dim);}
.select-wrap select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border-bottom:none;}
.info-list{display:flex;flex-direction:column;}
.info-list div{margin-top:24px;}
.info-list div:first-child{margin-top:0;}
.info-list dt{font-family:var(--font-mono);font-size:0.74rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:0.05em;}
.info-list dd{font-family:var(--font-body);font-weight:700;font-size:1.2rem;margin-top:4px;overflow-wrap:break-word;}
.info-list dd a:hover{color:var(--gold);}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px;}}

/* Le filet du pied cesse d'etre une bordure : c'est un degrade de fond
   de 1 px avec une fenetre transparente au centre, ou passent les
   reseaux. Une pastille opaque se verrait — le pied est translucide. */
footer{position:relative;border-top:0;padding:44px 32px;background:var(--bg-alt);
background-image:linear-gradient(to right,var(--line) 0 calc(50% - 95px),
transparent calc(50% - 95px) calc(50% + 95px),
var(--line) calc(50% + 95px) 100%);
background-size:100% 1px;background-position:0 0;background-repeat:no-repeat;}
.footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.footer-links{display:flex;flex-wrap:wrap;row-gap:10px;font-family:var(--font-mono);font-size:0.76rem;color:var(--text-dim);}
.footer-links a{margin-left:22px;}
.footer-links a:first-child{margin-left:0;}
.footer-links a:hover{color:var(--text);cursor:pointer;}
.foot-note{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim);}
.foot-copyright{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim);width:100%;margin-top:10px;opacity:0.85;text-align:center;}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

.reveal-x{opacity:0;transition:opacity .7s ease, transform .7s ease;}
.reveal-x.side-l{transform:translateX(-30px);}
.reveal-x.side-r{transform:translateX(30px);}
.reveal-x.in{opacity:1;transform:translateX(0) !important;}
@media (prefers-reduced-motion: reduce){.reveal-x{opacity:1;transform:none !important;transition:none;}}
.hero-logo-mark{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:clamp(200px, 34vw, 460px);aspect-ratio:734/604;z-index:1;pointer-events:none;user-select:none;opacity:0.9;}
.hero-content-col{position:absolute;inset:0;max-width:1180px;margin:0 auto;width:100%;padding:0 32px;box-sizing:border-box;z-index:2;}
/* Le bloc SON / IMAGE / GRAIN vient se poser juste au-dessus de la plante
   suspendue de la photo. Comme le fond est en background-size:cover, la
   plante se DEPLACE quand la fenetre change de proportion : un top:% fixe
   la rattrape a une taille et lui rentre dedans a une autre. Alors on cale
   le bloc sur elle par le calcul.
   Le feuillage commence a 39,34 % de la hauteur de l'image (1500x1126,
   mesure sur les pixels verts). Deux regimes :
     fenetre plus large que l'image (rognage vertical, centre) :
       y = 0,5 H - 8 vw   (car (0,5 - 0,3934) / 1,3321 = 0,0800 pile)
     fenetre plus haute (rognage horizontal) :
       y = 39,34 % H,  soit un bottom de 60,66 %
   Dans chaque regime, c'est le plus GRAND des deux bottom qui est le bon —
   ils se croisent exactement au ratio de l'image. D'ou le max().
   Ancre par le bas : la hauteur du bloc suit la police, on ne veut pas
   avoir a la deduire. Et 18 px de garde, pour ne pas toucher la feuille. */
.hero-abs-title{position:absolute;left:32px;
bottom:max(calc(50% + 8vw + 18px), calc(60.66% + 18px));
width:clamp(200px, 30vw, 400px);font-size:clamp(1.4rem, 3.75vw, 2.8rem);margin:0;}
.hero-bottom-row{position:absolute;left:32px;right:32px;bottom:9%;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;row-gap:10px;}
.hero-abs-cta{margin:0;flex-shrink:0;}
.hero-abs-cta .btn{height:38px;box-sizing:border-box;padding:0 20px;margin:0;white-space:nowrap;}
.hero-abs-badge{margin:0;height:38px;box-sizing:border-box;flex-shrink:0;white-space:nowrap;}
.hero-abs-badge .dot{width:20px;height:20px;flex-shrink:0;}
@media (max-width:600px){
  h2{font-size:clamp(1.7rem, 7vw, 3.4rem);}
  .hero-content-col{padding:0 24px;}
  .hero-abs-title{bottom:auto;top:11%;left:24px;width:clamp(150px, 52vw, 240px);font-size:clamp(1.25rem, 6.8vw, 1.7rem);}
  .hero-bottom-row{left:24px;right:24px;bottom:7%;gap:8px;}
  .hero-abs-cta .btn{padding:0 10px;font-size:0.54rem;height:28px;letter-spacing:0.02em;background:rgba(0,0,0,0.25);color:var(--gold);border:1px solid var(--gold);}
  .hero-abs-cta .btn::after{margin-left:5px;}
  .hero-abs-cta .btn:hover{background:var(--gold);color:var(--bg);}
  .hero-abs-badge{padding:0 8px 0 4px;font-size:0.54rem;gap:5px;height:28px;}
  .hero-abs-badge .dot{width:15px;height:15px;font-size:0.5rem;}
  .hero{padding-top:140px;}
  .contact-grid .form-panel{transform:none;padding:30px 24px;}
  .contact-grid .form-panel::before{top:-12px;left:24px;transform:rotate(-3deg);}
  .field select{font-size:0.82rem;}
}
@media (max-height:500px) and (max-width:900px){
  .screen>section.hero{min-height:min(calc(100vh - 66px), 420px);}
  .hero-logo-mark{width:clamp(110px, 20vw, 200px);opacity:0.55;}
  .hero-abs-title{bottom:auto;top:8%;font-size:clamp(1rem, 4.5vw, 1.5rem);width:clamp(130px, 38vw, 220px);}
  .hero-bottom-row{bottom:6%;gap:8px;}
  .hero-abs-cta .btn{height:26px;padding:0 12px;font-size:0.6rem;letter-spacing:0.03em;}
  .hero-abs-cta .btn::after{display:none;}
  .hero-abs-badge{height:26px;padding:0 10px 0 4px;font-size:0.6rem;gap:5px;}
  .hero-abs-badge .dot{width:15px;height:15px;font-size:0.5rem;}
}

/* --- Accessibilite clavier --------------------------------------------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--bg);padding:12px 20px;font-family:var(--font-mono);font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;}
.skip-link:focus{left:0;}
#contenu{scroll-margin-top:90px;}

/* --- Pages legales ------------------------------------------------------ */
.legal{max-width:760px;}
.legal h2{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:-0.01em;margin:36px 0 12px;color:var(--gold);}
.legal h2:first-of-type{margin-top:0;}
.legal p,.legal li{color:var(--text-dim);font-size:0.95rem;line-height:1.65;margin-bottom:12px;}
.legal strong{color:var(--text);font-weight:700;}
.legal ul{padding-left:22px;margin-bottom:12px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.legal em{color:var(--gold);font-style:normal;font-family:var(--font-mono);font-size:0.9em;}
.legal .maj{font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;margin-top:44px;opacity:0.7;}
.legal .todo{background:rgba(255,107,61,0.12);border-left:3px solid var(--gold);padding:16px 20px;margin-bottom:32px;color:var(--text);font-size:0.9rem;}
.legal .todo strong{color:var(--gold);}

/* --- Mention RGPD sous le formulaire ------------------------------------ */
.form-rgpd{font-family:var(--font-mono);font-size:0.7rem;line-height:1.6;color:var(--text-dim);margin-top:20px;}
.form-rgpd a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}

/* ======================================================================
   STYLE ANALOGIQUE  ---  dose reglable par --analogique (0 a 1)

   Montage : la photo est le FOND de la tuile ; une teinte translucide
   posee par-dessus est floutee par backdrop-filter. Ce montage precis
   produit deux choses que rien d'autre ne reproduit :
     - de grosses masses douces (le flou etale la photo)
     - des bords manges (le noyau de flou cherche des pixels au-dela
       des limites de la tuile et n'en trouve pas : le pourtour se
       delite de facon irreguliere)

   La photo est bornee a la generation (8 a 95 sur 255). Pleine amplitude,
   elle faisait tomber le contraste du texte a 1,65:1.

   --analogique pilote l'opacite de la teinte : plus la dose monte, plus
   la teinte s'efface et plus la photo se lit.
   ====================================================================== */
:root{--analogique:0.85;--usure:2.2;--halo:1;--halo-coins:0;}
.tuile-verre{--dx:0;--uf:1;}
.bento-tile.tuile-verre{position:relative;isolation:isolate;overflow:hidden;background-image:var(--photo);background-size:cover;background-position:center;background-color:transparent;}
.tuile-verre::before{content:'';position:absolute;inset:0;z-index:0;backdrop-filter:blur(26px) saturate(108%);-webkit-backdrop-filter:blur(26px) saturate(108%);background:var(--teinte);pointer-events:none;}
.tuile-verre::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(180deg,transparent 0%,rgba(8,9,12,0.66) 20%,rgba(8,9,12,0.66) 74%,transparent 100%);background-position:0 0;background-size:100% 100%;background-repeat:no-repeat;opacity:var(--analogique);}
.tuile-verre > *{position:relative;z-index:1;}
.tuile-verre.dark{--a:calc(0.74 - var(--analogique) * 0.30);--teinte:rgba(16,18,22,var(--a));border:0;}
.tuile-verre.gold{--a:calc(0.74 - var(--analogique) * 0.30);--teinte:linear-gradient(155deg,rgba(150,54,21,var(--a)) 0%,rgba(104,35,11,var(--a)) 100%);border:0;}
.tuile-verre.dark p{color:#a9acb3;}
.tuile-verre.gold h3{color:var(--text);}
.tuile-verre.gold p{color:rgba(245,243,238,0.92);}
.tuile-verre.gold .tag{color:rgba(245,243,238,0.74);}
.tuile-verre.gold .tile-subtitle{color:rgba(245,243,238,0.68);}

/* === Relief ============================================================ */
.bento-tile{box-shadow:inset 0 0 calc(var(--usure)*15px*(0.35 + 0.65*var(--halo-coins))) rgba(255,255,255,calc(var(--analogique)*0.13*var(--halo-coins))),inset 0 0 calc(var(--usure)*28px) rgba(0,0,0,calc(var(--analogique)*0.50)),inset 0 calc(var(--usure)*1.2px) 0 rgba(255,255,255,calc(var(--analogique)*0.30*var(--halo))),inset 0 calc(var(--usure)*-1.2px) 0 rgba(0,0,0,calc(var(--analogique)*0.46)),0 18px 38px -22px rgba(0,0,0,0.85);transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;}
.bento-tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 calc(var(--usure)*19px*(0.35 + 0.65*var(--halo-coins))) rgba(255,255,255,calc(var(--analogique)*0.17*var(--halo-coins))),inset 0 0 calc(var(--usure)*28px) rgba(0,0,0,calc(var(--analogique)*0.44)),inset 0 calc(var(--usure)*1.6px) 0 rgba(255,255,255,calc(var(--analogique)*0.38*var(--halo))),inset 0 calc(var(--usure)*-1.2px) 0 rgba(0,0,0,calc(var(--analogique)*0.46)),0 28px 52px -24px rgba(0,0,0,0.92);}
@media (prefers-reduced-motion: reduce){.bento-tile{transition:none;}.bento-tile:hover{transform:none;}}
@media (max-width:600px){.tuile-verre::before{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}}
.tuile-01{--photo:url(../img/tuile-01.webp?v=16b240cd);--dx:0;--uf:1.00;}
.tuile-02{--photo:url(../img/tuile-02.webp?v=56ac068b);--dx:137;--uf:0.83;}
.tuile-03{--photo:url(../img/tuile-03.webp?v=0a9bcebe);--dx:289;--uf:1.19;}
.tuile-04{--photo:url(../img/tuile-04.webp?v=4b44e3c3);--dx:61;--uf:0.91;}
.tuile-05{--photo:url(../img/tuile-05.webp?v=8ae75bf7);--dx:412;--uf:1.26;}
.tuile-06{--photo:url(../img/tuile-06.webp?v=bad32cee);--dx:208;--uf:0.78;}
.tuile-07{--photo:url(../img/tuile-07.webp?v=08940685);--dx:355;--uf:1.08;}
.tuile-08{--photo:url(../img/tuile-08.webp?v=e2e53542);--dx:94;--uf:0.95;}
.tuile-09{--photo:url(../img/tuile-09.webp?v=b8ffefe7);--dx:263;--uf:1.22;}
.tuile-10{--photo:url(../img/tuile-10.webp?v=919e3c45);--dx:480;--uf:0.86;}
.tuile-11{--photo:url(../img/tuile-11.webp?v=539cc597);--dx:176;--uf:1.13;}
.tuile-12{--photo:url(../img/tuile-12.webp?v=47079158);--dx:321;--uf:0.99;}

/* --- Encart de confirmation du formulaire -------------------------------- */
.form-retour{display:none;}
.form-retour.actif{display:block;}
.form-retour:focus{outline:none;}
.form-retour h3{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:-0.01em;line-height:1.1;margin-bottom:14px;color:var(--gold);}
.form-retour p{color:var(--text-dim);font-size:0.95rem;line-height:1.65;margin-bottom:12px;}
.form-retour strong{color:var(--text);font-weight:700;overflow-wrap:break-word;}
.form-retour a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px;overflow-wrap:break-word;}
.form-retour .btn{margin-top:10px;}
.form-retour-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}

/* --- Liste deroulante native -------------------------------------------- */
.field select,.select-wrap select{background-color:#1e2126;color:#f5f3ee;}
.field select option,.select-wrap select option{background-color:#1e2126;color:#f5f3ee;}
.field select option:checked{background-color:#ff6b3d;color:#0d0e11;}

/* --- Confort tactile et saisie mobile ----------------------------------- */
@media (max-width:820px){.field input,.field textarea,.field select,.select-display{font-size:16px;}}
.navtoggle{padding:14px 10px;margin:-14px -10px;}
.footer-links a,.foot-legal a{display:inline-flex;align-items:center;min-height:24px;}

/* --- Enfants de grille : autoriser le retrecissement -------------------- */
.contact-grid>*,.bento-tile,.photo-item,.story>*{min-width:0;}

/* --- Pied de page : deux lignes alignees -------------------------------- */
.foot-ligne,.foot-bas{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 28px;width:100%;}
.foot-ligne{margin-top:18px;}
.foot-bas{margin-top:10px;font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim);opacity:0.85;}
.foot-legal a{margin-left:20px;}
.foot-legal a:first-child{margin-left:0;}
.foot-legal a:hover{color:var(--text);}
@media (max-width:560px){.foot-ligne,.foot-bas{justify-content:flex-start;}.foot-legal a{margin-left:0;margin-right:18px;}}

/* --- Titre des pages legales (h1 sans hero) ----------------------------- */
.rule-head h1{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-0.02em;line-height:0.98;overflow-wrap:break-word;text-align:left;text-shadow:none;}
@media (max-width:600px){.rule-head h1{font-size:clamp(1.7rem,7vw,3.4rem);}}

/* --- Fonds d'images ----------------------------------------------------- */
.hero-accueil{background-image:url(../img/console-mixage.webp?v=a12722e8);}
@media (max-width:600px){.hero-accueil{background-image:url(../img/console-mixage-800.webp?v=82fe15de);}}
.bw-accueil-1{--bw-bg:url(../img/tournage-plateau.webp?v=474fa828);}
@media (max-width:600px){.bw-accueil-1{--bw-bg:url(../img/tournage-plateau-800.webp?v=4ded8a68);}}
.hero-mixage-mastering{background-image:url(../img/ingenieur-mixage.webp?v=fa66ff17);}
@media (max-width:600px){.hero-mixage-mastering{background-image:url(../img/ingenieur-mixage-800.webp?v=820720a0);}}
.bw-mixage-mastering-1{--bw-bg:url(../img/matiere-brute.webp?v=29e4a2df);}
@media (max-width:600px){.bw-mixage-mastering-1{--bw-bg:url(../img/matiere-brute-800.webp?v=524eae55);}}
.hero-enregistrement{background-image:url(../img/cabine-enregistrement.webp?v=68015ec2);}
@media (max-width:600px){.hero-enregistrement{background-image:url(../img/cabine-enregistrement-800.webp?v=d39ecec8);}}
.bw-enregistrement-1{--bw-bg:url(../img/piano.webp?v=5b62726b);}
@media (max-width:600px){.bw-enregistrement-1{--bw-bg:url(../img/piano-800.webp?v=21dc3c9d);}}
.hero-video{background-image:url(../img/tournage-plateau.webp?v=474fa828);}
@media (max-width:600px){.hero-video{background-image:url(../img/tournage-plateau-800.webp?v=4ded8a68);}}
.hero-contact{background-image:url(../img/studio-contact.webp?v=b3915a9c);}
@media (max-width:600px){.hero-contact{background-image:url(../img/studio-contact-800.webp?v=4ed6ef62);}}

/* === Salissure ========================================================= */
:root{--salissure:1;}
:root{--bg:#0f0f0f;--bg-alt:#1a1a1a;--surface:#222222;--line:#303030;--text-dim:#b4b4b4;--gold:#d37143;--rust:#d37143;--gold-lien:#e2a183;--filet-section:rgba(150,54,21,0.5);--flottement:1;--rainure:1;}
body::after{position:absolute;background-image:url(../img/grain-site.webp?v=2cb1074a);background-size:220px 220px;background-repeat:repeat;opacity:calc(0.16*var(--salissure));mix-blend-mode:overlay;}
.chiasm-statement{border-top-color:rgba(43,46,52,calc(1 - 0.75*var(--salissure)));border-bottom-color:rgba(43,46,52,calc(1 - 0.75*var(--salissure)));}
@media (max-width:680px){.navlinks a{border-bottom-color:rgba(43,46,52,calc(1 - 0.6*var(--salissure)));background-image:url(../img/usure-bas.webp?v=c1beaa66);background-position:left bottom;background-repeat:repeat-x;background-size:auto calc(var(--salissure)*2px);}}
.eyebrow,.btn{box-shadow:inset 0 0 calc(var(--salissure)*11px) rgba(46,14,3,calc(var(--salissure)*0.46)),inset 0 calc(var(--salissure)*-1px) 0 rgba(30,10,2,calc(var(--salissure)*0.34)),inset 0 calc(var(--salissure)*1px) 0 rgba(255,255,255,calc(var(--salissure)*0.14));}
.badge,.photo-item,.contact-grid .form-panel{box-shadow:inset 0 0 0 calc(var(--salissure)*1.2px) rgba(255,255,255,calc(var(--salissure)*0.05)),inset 0 0 calc(var(--salissure)*20px) rgba(0,0,0,calc(var(--salissure)*0.34));}
.detail-item{position:relative;}
.accent-bar{background-image:url(../img/usure-haut.webp?v=63e4f331),url(../img/usure-bas.webp?v=c1beaa66);background-position:left top,left bottom;background-repeat:repeat-x,repeat-x;background-size:auto calc(var(--salissure)*2px),auto calc(var(--salissure)*2px);}
.legal .todo{background-image:url(../img/usure-gauche.webp?v=cf4c8c76);background-position:left top;background-repeat:repeat-y;background-size:calc(var(--salissure)*3px) auto;}
@media (prefers-contrast: more){:root{--text-dim:#d6d6d6;--line:#4a4a4a;--salissure:0.3;}.photo-item,.detail-item,.contact-grid .form-panel{border-color:var(--line);}header.site,footer,.chiasm-statement{border-color:var(--line);}.eyebrow,.btn{box-shadow:none;}}

/* === Fond fixe et sections en verre ==================================== */
html{overflow-x:visible;}
body{overflow-x:hidden;}
body{background-color:transparent;}
html{background-color:#000000;}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url(../img/fond-rack.webp?v=bcd1fc84);background-size:cover;background-position:center;opacity:0.30;}
main .verre-poli,main .verre-depoli{border-top:0;border-bottom:0;box-shadow:inset 0 1px 0 rgba(0,0,0,calc(0.78*var(--rainure))),inset 0 2px 0 rgba(255,255,255,calc(0.085*var(--rainure))),inset 0 -1px 0 rgba(255,255,255,calc(0.085*var(--rainure))),inset 0 -2px 0 rgba(0,0,0,calc(0.78*var(--rainure)));}
main .verre-poli,main .verre-depoli{position:relative;background-color:transparent;backdrop-filter:blur(9px) saturate(104%);-webkit-backdrop-filter:blur(9px) saturate(104%);background-image:none;}
main .verre-depoli{background-color:transparent;backdrop-filter:blur(26px) saturate(106%);-webkit-backdrop-filter:blur(26px) saturate(106%);background-image:radial-gradient(700px 400px at 15% 0%,rgba(255,238,220,0.022),rgba(0,0,0,0) 60%);background-position:0 0;background-repeat:no-repeat;background-size:auto;}
header.site{background-color:rgba(15,15,15,0.78);backdrop-filter:blur(26px) saturate(106%);-webkit-backdrop-filter:blur(26px) saturate(106%);}
@media (max-width:600px){header.site{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}}
main .verre-poli a:not(.btn),main .verre-depoli a:not(.btn){color:var(--gold-lien);}
.detail-item,.story img,.bento-tile.photo-bw{box-shadow:0 calc(var(--flottement)*2px) calc(var(--flottement)*5px) calc(var(--flottement)*-2px) rgba(0,0,0,0.58),0 calc(var(--flottement)*14px) calc(var(--flottement)*30px) calc(var(--flottement)*-10px) rgba(0,0,0,0.52);}
.photo-item,.contact-grid .form-panel{box-shadow:inset 0 0 0 calc(var(--salissure)*1.2px) rgba(255,255,255,calc(var(--salissure)*0.05)),inset 0 0 calc(var(--salissure)*20px) rgba(0,0,0,calc(var(--salissure)*0.34)),0 calc(var(--flottement)*2px) calc(var(--flottement)*5px) calc(var(--flottement)*-2px) rgba(0,0,0,0.58),0 calc(var(--flottement)*14px) calc(var(--flottement)*30px) calc(var(--flottement)*-10px) rgba(0,0,0,0.52);}
.contact-grid .form-panel{background:rgba(255,255,255,0.022);border-color:rgba(255,255,255,0.055);}
.contact-grid .form-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,0.085),inset 0 -1px 0 rgba(0,0,0,0.78),inset 0 0 0 calc(var(--salissure)*1.2px) rgba(255,255,255,calc(var(--salissure)*0.05)),inset 0 0 calc(var(--salissure)*20px) rgba(0,0,0,calc(var(--salissure)*0.34)),0 calc(var(--flottement)*2px) calc(var(--flottement)*5px) calc(var(--flottement)*-2px) rgba(0,0,0,0.58),0 calc(var(--flottement)*14px) calc(var(--flottement)*30px) calc(var(--flottement)*-10px) rgba(0,0,0,0.52);}
.contact-grid .form-panel::before{display:none;}
.contact-grid .form-panel,.contact-grid .info-panel{transform:none;}
footer{background-color:rgba(15,15,15,0.62);backdrop-filter:blur(26px) saturate(106%);-webkit-backdrop-filter:blur(26px) saturate(106%);}
@media (max-width:600px){main .verre-depoli,footer{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}main .verre-poli{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}}
@supports not (backdrop-filter: blur(1px)){main .verre-poli{background-color:rgba(15,15,15,0.88);}main .verre-depoli,footer{background-color:rgba(15,15,15,0.92);}header.site{background-color:rgba(15,15,15,0.96);}}

/* === Bloc d'informations =============================================== */
.info-list dd{font-size:1.2rem;line-height:1.6;font-weight:700;}
.info-list a{color:var(--gold-lien);font-weight:700;font-size:inherit;text-decoration:none;}
.info-list a:hover,.info-list a:focus-visible{text-decoration:underline;text-underline-offset:3px;}

/* === Fond assombri (page Video) =================== */
body.fond-sombre::before{opacity:0.15;}

/* === Texte dans la bande (entete video) ========== */

/* === L'entete video tient dans la fenetre ========= */
section.hero.hero-video{--cadre:100vw;margin-left:auto;margin-right:auto;}
@media (min-width:701px){section.hero.hero-video{--cadre:min(100vw,calc((100vh - 52px) * 1671 / 941));--cadre:min(100vw,calc((100svh - 52px) * 1671 / 941));max-width:var(--cadre);--haut-image:calc(var(--cadre) * 941 / 1671);--haut-cadre:min(var(--haut-image),calc(100vh - 52px));--haut-cadre:min(var(--haut-image),calc(100svh - 52px));max-height:var(--haut-cadre);}.screen:has(section.hero.hero-video){background:#000;}}

/* === Charte cinema (page Video) =================== */
.cinema .eyebrow{font-family:var(--font-body);font-weight:600;font-size:clamp(0.66rem,1vw,0.76rem);text-transform:uppercase;letter-spacing:0.34em;margin-right:-0.34em;color:var(--text-dim);background:none;background-image:none;padding:0;transform:none;box-shadow:none;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cinzel.woff2) format('woff2');}
.cinema h2{font-family:'Cinzel',var(--font-display);font-weight:600;font-size:clamp(1.75rem,3.3vw,2.65rem);letter-spacing:0.06em;line-height:1.16;text-wrap:balance;}
.cinema .chiasm-statement p{font-family:'Cinzel',var(--font-display);font-weight:600;letter-spacing:0.09em;line-height:1.3;}
.cinema .section-head p{line-height:1.75;letter-spacing:0.01em;}
.cinema .btn{border-radius:0;background:none;color:var(--gold);border:1px solid var(--gold);font-family:var(--font-body);font-weight:600;letter-spacing:0.22em;font-size:0.74rem;padding:15px 30px;}
.cinema .btn:hover,.cinema .btn:focus-visible{background:var(--gold);color:var(--bg);}
.cinema .btn::after{display:none;}

/* === Generique : la gouttiere ==================== */
.generique .bento{display:block;max-width:790px;margin:0 auto;}
.generique .bento-tile{display:grid;grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);column-gap:3%;align-items:baseline;background:none;border:0;box-shadow:none;background-image:none;min-height:0;padding:0;overflow:visible;margin:0 0 clamp(30px,4.2vw,54px);}
.generique .bento-tile:hover{transform:none;}
.generique .bento-tile::before,.generique .bento-tile::after{display:none;}
.generique .credit-role{grid-column:1;grid-row:1;text-align:right;}
.generique .rule-head{max-width:790px;margin:0 auto clamp(30px,4.6vw,56px);}
.generique .rule-row{justify-content:center;}
.generique .rule-head .mark{font-family:var(--font-body);font-weight:600;font-size:clamp(0.86rem,1.5vw,1.06rem);text-transform:uppercase;letter-spacing:0.42em;margin-right:-0.42em;color:var(--titre);background:none;padding:0;transform:none;box-shadow:none;}
.generique .bento-tile h3{font-family:var(--font-body);font-weight:600;font-size:clamp(0.76rem,1.1vw,0.9rem);letter-spacing:0.16em;margin:0;line-height:1.55;text-transform:uppercase;color:var(--titre);}
.generique .bento-tile .tag{display:block;font-family:var(--font-body);font-size:clamp(0.6rem,0.88vw,0.7rem);letter-spacing:0.2em;text-transform:uppercase;color:var(--text-dim);margin:0 0 5px;}
.generique .bento-tile p{grid-column:2;max-width:none;font-size:0.95rem;line-height:1.75;letter-spacing:0.01em;margin:0;}
.generique .bento-tile p + p{margin-top:1.75em;}
.generique .plans-bloc{margin-top:clamp(6px,1.4vw,16px);}
@media (max-width:640px){.generique .bento-tile{grid-template-columns:1fr;}.generique .credit-role,.generique .bento-tile p{grid-column:auto;grid-row:auto;}.generique .credit-role{text-align:left;margin-bottom:7px;}}

/* === Reseau du management ======================== */
.reseau-duo{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,0.76fr);gap:clamp(28px,4.4vw,64px);align-items:center;}
.reseau{width:100%;max-width:430px;margin-left:auto;}
.reseau svg{width:100%;height:auto;display:block;overflow:visible;}
@media (max-width:820px){.reseau-duo{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);}.reseau{margin:0 auto;max-width:340px;}}

/* === Photogrammes de Video ======================= */
.plans-bloc{grid-column:1 / -1;padding:clamp(10px,1.8vw,22px) 0 2px;}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.7vw,22px);list-style:none;margin:0;padding:0;}
.plans li{display:flex;flex-direction:column;align-items:center;gap:11px;min-width:0;}
.plan-cadre{position:relative;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.10);background:linear-gradient(180deg,rgba(255,255,255,0.028),rgba(0,0,0,0.22));box-shadow:inset 0 1px 0 rgba(255,255,255,0.055),inset 0 -1px 0 rgba(0,0,0,0.60);}
.plan-cadre svg{width:clamp(30px,4.2vw,52px);height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;}
.plan-num{position:absolute;top:7px;left:9px;font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.12em;opacity:0.48;}
.plan-nom{font-family:var(--font-mono);font-size:clamp(0.54rem,0.92vw,0.68rem);letter-spacing:0.13em;text-transform:uppercase;opacity:0.76;white-space:nowrap;}
.plans li:nth-child(1){color:#a9a49c;}
.plans li:nth-child(2){color:#bf9f86;}
.plans li:nth-child(3){color:#cf8a62;}
.plans li:nth-child(4){color:var(--gold);}
.plans li:nth-child(4) .plan-cadre{border-color:rgba(211,113,67,0.32);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.60),0 0 30px -10px rgba(211,113,67,0.45);}
.plans li:nth-child(4) svg{filter:drop-shadow(0 0 8px rgba(211,113,67,0.40));}
@media (max-width:560px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;}}

/* === Boite USER 404 ============================== */
.foot-signature{flex-basis:100%;text-align:right;}

/* === Encart USER 404 (pied de page) ============== */
/* Centre sous la rangee des mentions, separe par un filet. Le logo est
   deja detoure et clair — encre a 203/255 — il tient sur le fond sombre
   sans retouche. Taille contenue : c'est le site de Rasiga. */
.pub404{display:flex;justify-content:center;
/* le symbole monte a cheval sur le filet : la moitie de sa hauteur plus
   le retrait du haut de la rangee */
margin-top:-40px;}
.pub404-lien{display:flex;flex-direction:column;align-items:center;gap:12px;
background:none;border:0;padding:6px 18px 0;border-radius:12px;cursor:pointer;
color:inherit;font-family:var(--font-body);text-align:center;
transition:background .25s ease;}
/* Pas de fond au survol : sur un pied translucide, une plaque se voit.
   C'est le halo ci-dessous qui signale l'etat. */
.pub404-marque{display:block;line-height:0;}
/* Pas de halo : le nom s'allume par brightness pendant l'animation,
   et deux effets pour dire la meme chose en font un de trop. */
.pub404-logo{width:56px;height:auto;opacity:0.9;overflow:visible;
transition:opacity .25s ease;}

/* === Le personnage USER 404 ====================== */
/* Au repos : la tete de profil, seule, posee sur le filet. Le corps est
   dessine sous la zone de vue et les mains sont eteintes — rien ne se
   voit de plus que le logo d'origine. */
.k-corps,.k-mains,.k-face{opacity:0;}
.k-profil,.k-face{transform-box:view-box;transform-origin:127px 91px;}
.k-noeud,.k-tout{transform-box:view-box;}

/* Le declenchement pose .anime, la fin de l'animation la retire. Tant
   qu'elle est la, un nouveau survol ne relance rien : le geste va au
   bout, meme si la souris est partie. */
.pub404-lien.anime .k-tout{animation:k-monte 2.8s both;}
.pub404-lien.anime .k-corps{animation:k-corps 2.8s both;}
.pub404-lien.anime .k-mains{animation:k-mains 2.8s both;}
.pub404-lien.anime .k-profil{animation:k-profil 2.8s both;}
.pub404-lien.anime .k-face{animation:k-face 2.8s both;}
.pub404-lien.anime .k-noeud{animation:k-noeud 2.8s both;}
.pub404-lien.anime .pub404-sur{animation:k-signature 2.8s both;}

/* Il monte de 187 unites : la distance qui amene la barre de mi-crane
   (y 63) a la taille (y 250). Le depassement puis le recalage evitent
   l'arret mecanique. */
@keyframes k-monte{
0%,18%{transform:translateY(0);animation-timing-function:cubic-bezier(.32,.86,.34,1);}
40%{transform:translateY(-195px);}
48%{transform:translateY(-181px);animation-timing-function:cubic-bezier(.4,0,.5,1);}
56%,78%{transform:translateY(-187px);animation-timing-function:cubic-bezier(.5,0,.65,1);}
96%,100%{transform:translateY(0);}
}
/* Le corps rentre d'abord, il disparait ensuite : s'il s'effacait en
   descendant, on verrait un fantome gris a mi-course. */
@keyframes k-corps{0%,13%{opacity:0;}22%,94%{opacity:1;}98%,100%{opacity:0;}}
@keyframes k-mains{0%,11%{opacity:0;}19%,88%{opacity:1;}96%,100%{opacity:0;}}
/* Le pincement horizontal : le profil se resserre en disparaissant, la
   face s'ouvre en apparaissant. */
@keyframes k-profil{
0%,5%{opacity:1;transform:scaleX(1);}
11%,89%{opacity:0;transform:scaleX(.5);}
96%,100%{opacity:1;transform:scaleX(1);}
}
@keyframes k-face{
0%,5%{opacity:0;transform:scaleX(.5);}
11%,89%{opacity:1;transform:scaleX(1);}
96%,100%{opacity:0;transform:scaleX(.5);}
}
/* De face, le noeud se voit de profil : il glisse sur le cote. */
@keyframes k-noeud{
0%,5%{transform:translateX(0);}
11%,89%{transform:translateX(22px);}
96%,100%{transform:translateX(0);}
}
/* La signature s'allume pendant l'animation. brightness et non
   opacity : l'opacite ne monte pas au-dessus de 1, elle ne sait
   que retirer de la lumiere. */
@keyframes k-signature{0%,12%{filter:brightness(1);}26%,86%{filter:brightness(1.55);}96%,100%{filter:brightness(1);}}

/* Il y avait ici un @media (prefers-reduced-motion:reduce) qui mettait
   animation:none sur les sept groupes. Retire sur demande : la signature
   USER 404 joue maintenant pour tout le monde.
   Ce que ca coute, dit franchement : quelqu'un qui a demande a son
   systeme de reduire les mouvements le verra quand meme bouger. Le
   dommage reste borne — l'animation ne part qu'au survol du bloc, dure
   2,8 s, ne se rejoue pas, et rien d'autre ne bouge sur la page.
   Le declencheur JS a ete ouvert dans le meme mouvement. Les deux vont
   ensemble : couper l'animation ici sans couper la pose de la classe
   la-bas laisserait la classe accrochee, puisque animationend ne se
   declenche que s'il y a une animation. */
.pub404-lien:hover .pub404-logo,
.pub404-lien:focus-visible .pub404-logo{opacity:1;}
.pub404-sur{font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;
color:rgba(245,243,238,0.40);}
.pub404-sur b{color:var(--gold);font-weight:800;}
.pub404-fleche{display:inline-block;color:var(--gold);
transition:transform .25s ease;}
.pub404-lien:hover .pub404-fleche,
.pub404-lien:focus-visible .pub404-fleche{transform:translateX(4px);}
/* Le meme garde-fou couvrait les transitions du bloc — l'opacite du
   bonhomme et le glissement de la fleche. Retire aussi : laisser le
   grand mouvement et couper les deux petits n'aurait eu aucun sens. */


@media (max-width:560px){.foot-signature{text-align:left;}}
.lien-404{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;font-size:0.86rem;color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease;}
.lien-404:hover,.lien-404:focus-visible{color:var(--gold-lien);}
.boite404{border:0;padding:0;background:transparent;color:var(--text);width:min(680px,92vw);max-width:none;margin:auto;height:fit-content;max-height:90vh;}
.boite404::backdrop{background:rgba(8,8,8,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.boite404-cadre{position:relative;padding:clamp(26px,4vw,44px);background:rgba(15,15,15,0.92);backdrop-filter:blur(26px) saturate(106%);-webkit-backdrop-filter:blur(26px) saturate(106%);border:1px solid rgba(255,255,255,0.07);box-shadow:inset 0 1px 0 rgba(255,255,255,0.085),inset 0 -1px 0 rgba(0,0,0,0.78),0 40px 90px -30px rgba(0,0,0,0.9);max-height:90vh;overflow-y:auto;}
.boite404-fermer{position:absolute;top:8px;right:14px;background:none;border:0;cursor:pointer;font-size:30px;line-height:1;color:var(--text-dim);transition:color .2s ease;}
.boite404-fermer:hover,.boite404-fermer:focus-visible{color:var(--gold);}
.boite404-logo{width:72px;height:auto;display:block;margin:0 0 18px;}
.boite404 .field{margin-bottom:15px;}
.boite404-sur{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);margin:0 0 10px;}
.boite404 h2{margin:0 0 12px;}
.boite404-intro{color:var(--text-dim);max-width:52ch;margin:0 0 28px;}
.paire404{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
@media (max-width:560px){.paire404{grid-template-columns:1fr;}}
.boite404 .obl{color:var(--gold);}
.boite404-accord{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-mono);font-size:0.7rem;line-height:1.6;color:var(--text-dim);margin:4px 0 24px;cursor:pointer;}
.boite404-accord input{margin-top:3px;accent-color:var(--gold);flex:0 0 auto;}
.boite404-etat{font-family:var(--font-mono);font-size:0.72rem;line-height:1.6;color:var(--text-dim);margin:16px 0 0;min-height:1.2em;}
.boite404-etat[data-erreur]{color:#e8a08a;}
.mielleux{position:absolute;left:-9999px;}

/* === Survol du bouton (survol-bouton) ============= */
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.btn::after{position:relative;left:0;transform:none;transition:left .2s ease;}
.btn:hover::after{transform:none;left:3px;}

/* === Corps des titres de section ================== */
h2{font-size:clamp(1.7rem,3.6vw,2.9rem);}

/* === Equilibre des lignes ========================= */
h1,h2,h3,.bento-quote,.chiasm-statement p,.rule-head .mark{text-wrap:balance;}
.lead,.section-head p,.rule-head p,.bento-tile p,.legal p{text-wrap:pretty;}

/* === Nuance du bloc d'informations =============== */
.info-nuance{display:block;font-family:var(--font-mono);font-size:0.72rem;font-weight:400;line-height:1.55;letter-spacing:0.02em;color:var(--text-dim);margin-top:7px;}

/* === Presentation de section ====================== */
.rule-head p{color:var(--text-dim);font-size:1.02rem;line-height:1.72;margin:18px 0 0;max-width:600px;}

/* === Reseaux au pied de page ===================== */
.ruban-pied{display:flex;align-items:center;gap:18px;margin-top:18px;}
.ruban-pied a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform .2s ease,filter .2s ease;}
.ruban-pied svg{width:24px;height:24px;display:block;}
.ruban-pied a:hover,.ruban-pied a:focus-visible{transform:translateY(-2px);filter:brightness(1.18);}

/* === Repartition des onglets ===================== */
/* La rangee se cale a droite et respire d'un ecart FIXE. Avant,
   space-between repartissait 733 px de vide entre cinq titres qui
   n'en font que 312 : 183 px d'ecart, et l'oeil ne lisait plus une
   rangee mais cinq elements sans rapport. Un ecart borne se
   comporte pareil a toutes les largeurs, ce qu'une repartition ne
   fait jamais. */
@media (min-width:681px){.navlinks{flex:0 1 auto;margin-left:auto;justify-content:flex-end;gap:clamp(40px,7.6vw,110px);padding-left:0;}.navlinks a{margin-left:0;}}
.hero-video{background-image:url(../img/regard-plateau.webp?v=b531b7d6);}
@media (max-width:600px){.hero-video{background-image:url(../img/regard-plateau-800.webp?v=f1c9631b);}}

/* === En-tete Video : film sur pause =============== */
section.hero.hero-video{aspect-ratio:1671/941;min-height:0;flex:0 0 auto;padding:0 32px;justify-content:flex-end;background-color:#000;background-size:cover;background-position:center;background-repeat:no-repeat;}
section.hero.hero-video .hero-inner{align-items:end;padding-bottom:clamp(64px,7vw,96px);}
section.hero.hero-video h1{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:700;letter-spacing:0.01em;line-height:1.2;margin:0 0 6px;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,0.8),0 4px 16px rgba(0,0,0,0.6);}
section.hero.hero-video h1 em{font-style:normal;color:var(--gold);}
section.hero.hero-video .lead{max-width:30rem;font-size:clamp(0.78rem,0.92vw,0.88rem);line-height:1.5;color:rgba(245,243,238,0.66);text-shadow:0 1px 3px rgba(0,0,0,0.8),0 4px 14px rgba(0,0,0,0.5);}
.screen:has(section.hero.hero-video){min-height:0;}
.hero::after{display:none;}
.hero .accent-bar{display:none;}
.hero{position:relative;z-index:1000;}
section.hero.hero-video .accent-bar{display:block;left:clamp(24px,4vw,58px);right:clamp(24px,4vw,58px);bottom:clamp(22px,3vw,34px);height:3px;border-radius:2px;background-image:none;background:linear-gradient(to right,var(--gold) 0 37%,rgba(255,255,255,0.26) 37% 100%);}
section.hero.hero-video .accent-bar::after{content:'';position:absolute;left:37%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,0.6);}
section.hero.hero-video .accent-bar::before{content:'01:14 / 03:22';position:absolute;right:0;bottom:12px;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.06em;color:rgba(245,243,238,0.72);text-shadow:0 1px 3px rgba(0,0,0,0.85);}
header.site{z-index:1001;}
@media (min-width:701px){section.hero.hero-video .hero-inner{padding-bottom:max(calc(clamp(22px,3vw,34px) + 13px),calc(min(calc(100% + 64px),var(--cadre)) * 101 / 1500 - (min(calc(100% + 64px),var(--cadre)) * 941 / 1671 - min(min(calc(100% + 64px),var(--cadre)) * 941 / 1671,calc(100svh - 52px))) / 2 + 10px));}}
@media (max-width:700px){section.hero.hero-video{aspect-ratio:auto;min-height:0;background-size:contain;background-position:center top;padding:calc(100% * 941 / 1671) 0 clamp(44px,11vw,60px);justify-content:flex-start;}section.hero.hero-video .accent-bar{position:relative;order:1;margin:14px 22px 0;left:auto;right:auto;bottom:auto;}section.hero.hero-video .accent-bar::before{bottom:auto;top:11px;}section.hero.hero-video .hero-inner{order:2;padding:34px 22px 0;max-width:none;}section.hero.hero-video .lead{max-width:60ch;margin-top:8px;line-height:1.55;color:rgba(245,243,238,0.72);}}

/* === Entetes : la barre reseaux prend sa place ==== */
@media (max-width:680px){:root{--barre-sociale:calc(65px + env(safe-area-inset-bottom,0px));}.screen,.screen>section.hero:not(.hero-video){min-height:min(calc(100svh - 52px - var(--barre-sociale)),900px);}}
@media (max-height:500px) and (max-width:900px){.screen,.screen>section.hero:not(.hero-video){min-height:min(calc(100svh - 52px - var(--barre-sociale,0px)),420px);}}

/* === Titres : traitement commun =================== */
.hero h1:not(.hero-accueil h1):not(.hero-video h1),h2{font-weight:900;letter-spacing:-0.032em;line-height:0.94;text-shadow:0 2px 6px rgba(0,0,0,0.66),0 10px 34px rgba(0,0,0,0.48);}
.hero .lead,.lead{text-shadow:0 1px 4px rgba(0,0,0,0.72),0 6px 20px rgba(0,0,0,0.42);}
.hero-accueil h1{letter-spacing:normal;}

/* === Tuiles : mise en page des textes ============= */
.bento-tile:not(.photo-bw){justify-content:flex-start;}
.bento-tile h3{margin-bottom:14px;line-height:1.12;}
.bento-tile p{line-height:1.62;}
.bento-tile p{max-width:58ch;}
@media (max-width:820px){section{padding-left:20px;padding-right:20px;}.wrap{padding-left:8px;padding-right:8px;}.bento-tile{padding:26px 22px;}.bento-tile.tall{min-height:0;}}
@media (max-width:600px){.bento-tile p{max-width:none;}}
:root{--tuile-voile:0.5;}
.tuile-verre.dark{--a:calc((0.74 - var(--analogique) * 0.30) * var(--tuile-voile));}
.tuile-verre.gold{--a:calc((0.74 - var(--analogique) * 0.30) * var(--tuile-voile));}

/* === TUILES NUES (essai) ========================== */
.bento-tile,.bento-tile.gold,.bento-tile.dark,.bento-tile.tuile-verre,.bento-tile.photo{background:none;border:0;box-shadow:none;min-height:0;}
.bento-tile.photo-bw{min-height:220px;}
.tuile-verre::before,.tuile-verre::after{display:none;}
.bento-tile.photo::before{display:none;}
.bento-tile:hover{transform:none;box-shadow:none;}
.bento-tile.gold .bento-num{display:none;}

/* === Parcours en pictogrammes ===================== */
.bw-accueil-1::before,.bw-accueil-1::after,.bw-mixage-mastering-1::before,.bw-mixage-mastering-1::after,.bw-enregistrement-1::before,.bw-enregistrement-1::after{display:none;}
.bento-tile.photo-bw.bw-accueil-1,.bento-tile.photo-bw.bw-mixage-mastering-1,.bento-tile.photo-bw.bw-enregistrement-1{min-height:0;}
.parcours-bloc{width:fit-content;max-width:100%;margin-inline:auto;}
.bento-tile.photo-bw.bw-accueil-1,.bento-tile.photo-bw.bw-mixage-mastering-1,.bento-tile.photo-bw.bw-enregistrement-1{justify-content:center;}
.parcours{display:flex;align-items:flex-start;justify-content:center;list-style:none;margin:0 0 22px;padding:0;gap:0;}
.parcours li{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;}
.parcours li:nth-child(1){color:#e0dbd2;}
.parcours li:nth-child(2){color:#dcb8a2;}
.parcours li:nth-child(3){color:#d79472;}
.parcours li:nth-child(4){color:var(--gold);}
.parcours svg{display:block;width:clamp(30px,4.4vw,46px);height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.parcours li:last-child .parcours-jeton{filter:drop-shadow(0 0 9px rgba(211,113,67,0.45));}
.parcours-nom{font-family:var(--font-mono);font-size:clamp(0.54rem,0.92vw,0.68rem);letter-spacing:0.13em;text-transform:uppercase;opacity:0.72;white-space:nowrap;}
@media (max-width:400px){.parcours-nom{font-size:0.52rem;letter-spacing:0.04em;}}

/* === Mots longs et blanc des titres =============== */
@media (max-width:600px){h2{font-size:clamp(1.35rem,7vw,3.4rem);}.rule-head h1{font-size:clamp(1.35rem,7vw,3.4rem);}}
:root{--titre:#e0dbd2;}
h1,h2,h3,.bento-quote{color:var(--titre);}

/* === Pied de page ================================ */
footer{padding:clamp(40px,4.2vw,56px) 32px clamp(24px,2.6vw,30px);}
.footer-inner{display:block;}
/* Deux colonnes depuis que la navigation a quitte le pied : le
   bandeau est en sticky, il suit le defilement et reste a portee. */
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(26px,4.5vw,60px);align-items:start;}
.pied-marque{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.pied-baseline{margin:0;max-width:24rem;font-size:0.95rem;line-height:1.55;color:var(--text-dim);}
.pied-titre{margin:0 0 12px;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim);opacity:0.72;}
.pied-col a{display:block;padding:6px 0;font-size:0.94rem;color:var(--text-dim);text-decoration:none;transition:color .2s ease;}
.pied-col a:hover,.pied-col a:focus-visible{color:var(--gold-lien);}
.pied-courriel{overflow-wrap:anywhere;}
.foot-bas{margin-top:clamp(22px,3vw,34px);padding-top:18px;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 24px;
border-top:0;
background-image:linear-gradient(to right,var(--line) 0 calc(50% - 48px),
transparent calc(50% - 48px) calc(50% + 48px),
var(--line) calc(50% + 48px) 100%);
background-size:100% 1px;background-position:0 0;background-repeat:no-repeat;}
.foot-bas>span:first-child{justify-self:start;}
.foot-bas .foot-legal{justify-self:end;text-align:right;}

/* Sous 560 px la rangee se met en colonne : plus de fenetre dans le
   filet, plus de chevauchement, l'encart passe en tete. Ce bloc DOIT
   rester apres la regle en grille ci-dessus — a poids egal, c'est le
   dernier ecrit qui gagne. */

/* Les liens du pied restent a 4 px de retrait : 32 px de haut,
   au-dessus des 24 px du texte. */
footer .pied-col a{padding:4px 0;}


/* === Les reseaux ferment la section haute ======== */
/* Centres sur toute la largeur, au-dessus du filet. Ils ne sont plus
   une coordonnee parmi d'autres dans la colonne de droite. */
/* Le ruban sort du flux et se centre sur le bord haut du pied : les
   quatre icones coupent le filet, comme le logo USER 404 plus bas. Hors
   flux, il ne prend plus de hauteur. */
footer .ruban-pied{display:flex;justify-content:center;gap:18px;
position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
z-index:2;margin:0;}



/* === Le bloc Contact se cale a droite ============ */
/* Mesure : le courriel finissait a 1011 px, "Confidentialite" a 1236 —
   225 px d'ecart. La colonne faisait 431 px alors que sa plus longue
   ligne en fait 206 : elle flottait a gauche de sa piste.
   max-content la retrecit sur cette ligne, justify-self:end la pousse au
   bord. Le titre et le telephone restent alignes a gauche DANS le bloc :
   on deplace le bloc, on ne touche pas a son texte. */
@media (min-width:561px){
footer .pied-grille>.pied-col{justify-self:end;width:max-content;}
}

/* === Le pied cesse de se repeter au telephone ===== */
/* A 680 px apparaissent le menu burger ET la barre reseaux fixe. Les
   deux portent deja ce que le pied redit : les quatre liens de la
   colonne LE STUDIO, et les quatre logos de la colonne Contact. Le
   seuil est le meme parce que c'est le meme basculement — le pied cesse
   d'etre la seule voie vers ces liens.
   Rien n'est retire du balisage : le menu porte les memes liens a
   toutes les tailles. */
@media (max-width:680px){
footer .ruban-pied{display:none;}
/* Le filet se referme quand le ruban n'y est plus : la fenetre existait
   pour laisser passer les quatre logos, que la barre fixe porte
   desormais. Une coupure au milieu d'un trait, sans rien dedans, se
   lit comme un defaut. Les deux au meme seuil, dans le meme bloc. */
footer{background-image:linear-gradient(to right,var(--line) 0 100%);}
}

/* Sur telephone, le bonhomme se raccroche vraiment a la barre.
   Il pendait 30 px SOUS le filet et ne tenait a rien. Il repasse a
   cheval — ses mains sont a 22 px sous le haut de l'encart, d'ou les
   40 px de remontee, la meme valeur que sur ordinateur puisque c'est le
   meme dessin — et LE FILET SE COUPE LA OU IL EST : cale a gauche, donc
   fenetre a gauche, de 0 a 72 px. Ses mains sont a 8 et 57, plus 15 px
   d'air. Le filet repart de sa main droite.
   Et la marge au-dessus passe a 66 px : il monte de 47 px et depasse
   deja de 16, il lui faut la place, sinon il passe sur le courriel. */
@media (max-width:560px){
.foot-bas{grid-template-columns:1fr;gap:14px;justify-items:start;
margin-top:66px;
background-image:linear-gradient(to right,var(--line) 0 calc(50% - 40px),
transparent calc(50% - 40px) calc(50% + 40px),
var(--line) calc(50% + 40px) 100%);}
.foot-bas .foot-legal{justify-self:start;text-align:left;}
/* L'encart est sur l'axe de l'ecran, et le bonhomme sur l'axe de la
   signature : les trois alignes, avec la fenetre du filet au meme
   endroit. Les mains occupent 49 px de large, la fenetre en fait 80 —
   15 px d'air de chaque cote. */
.pub404{margin-top:-40px;justify-self:center;justify-content:center;
order:-1;}
.pub404-lien{align-items:center;}
}
@media (max-width:560px){.pied-grille{grid-template-columns:1fr;}}

/* === Logo grave dans le verre ==================== */
/* Il y avait ici un halo creme derriere le R, cense donner l'idee d'une
   lumiere prise dans le verre. Supprime : sur un bandeau deja sombre il
   ne se lisait pas comme une lumiere mais comme une salissure claire,
   toujours au meme endroit. Le relief du R tient tout seul, par ses deux
   traits de rainure.
   position:relative et isolation:isolate restent : ils font de la boite
   le contexte d'empilement ou .logo-pile pose son z-index. */
header.site .logo-mark{position:relative;isolation:isolate;}


/* === Le bandeau detoure le logo par le bas ======= */
/* Le bandeau fait 52 px. Le logo n'a pas bouge — 72 x 59 a l'ecran,
   une boite de 44 a l'echelle 1,35 — et deborde donc de 13 px en
   dessous. C'est le bandeau qui va le chercher : il descend a 76 px sur
   sa largeur, avec un arrondi en bas a droite.

   LE VERRE EST SUR DEUX PSEUDO-ELEMENTS, et l'element lui-meme y
   renonce : un backdrop-filter fait de son element une racine
   d'arriere-plan, et un backdrop-filter imbrique n'a plus rien a
   flouter. Les deux NE SE CHEVAUCHENT PAS — deux flous superposes
   assombriraient la zone commune : la bande commence la ou le detour
   finit. */
header.site{background:none;background-color:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;
/* Le centre du logo, nomme une fois : c'est lui qui place la fenetre du
   filet. Le bandeau est centre a 1180 de large, le logo commence a
   max(0,(100% - 1180)/2) + 32 et fait 72 : son centre est donc a +68. */
--centre-logo:calc(max(0px,(100% - 1180px)/2) + 68px);}
/* LE FILET SE COUPE LA OU LE LOGO SORT. Meme technique que pour les
   reseaux en haut du pied et pour le logo USER 404 en bas : le filet
   cesse d'etre une bordure et devient un degrade de fond de 1 px, avec
   une fenetre transparente la ou quelque chose le traverse. Il n'y a
   rien a masquer — la ligne n'est pas dessinee la.
   La fenetre fait 100 px : les 72 du logo plus 14 de chaque cote. */
header.site::before{content:'';position:absolute;left:0;right:0;top:0;
height:52px;z-index:-1;pointer-events:none;
background-color:rgba(15,15,15,0.78);
background-image:linear-gradient(to right,
var(--line) 0 calc(var(--centre-logo) - 50px),
transparent calc(var(--centre-logo) - 50px) calc(var(--centre-logo) + 50px),
var(--line) calc(var(--centre-logo) + 50px) 100%);
background-size:100% 1px;background-position:0 100%;
background-repeat:no-repeat;
backdrop-filter:blur(26px) saturate(106%);
-webkit-backdrop-filter:blur(26px) saturate(106%);}
@media (max-width:600px){
header.site::before{backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);}}
/* Le logo se pose en haut de la bande et grandit vers le bas, ou le
   detour l'attend. */
header.site .logo-mark{align-self:flex-start;margin-top:6px;}


/* === Le logo d'en-tete, en deux morceaux ========= */
/* 105/164 et 59/164 de la hauteur : les deux morceaux empiles redonnent
   l'original au pixel. display:block sur les deux — sans lui ce sont des
   images en ligne, elles reposent sur la ligne de base et un interligne
   s'intercale.
   PAS DE transform:scale ICI. Il y en avait un, de 1,35, et les hauteurs
   valaient 28,17 et 15,83. Le resultat a l'ecran etait le meme au
   centieme de pixel pres, mais obtenu par un mauvais chemin : le
   navigateur reduisait d'abord l'image a 28 px de haut, puis le
   compositeur agrandissait CE bitmap a 38. Une reduction suivie d'un
   agrandissement, c'est la recette du flou. On ecrit donc les hauteurs
   finales, 28,17 x 1,35 et 15,83 x 1,35, et l'image n'est echantillonnee
   qu'une fois.
   La boite de mise en page devient plus haute que le bandeau, comme
   avant : le bandeau a une hauteur fixe de 51 px, il ne bouge pas.
   Verifie : R et mot au meme endroit a 0,02 px pres, .nav toujours a
   51 px. */
.logo-pile{display:block;position:relative;z-index:1;}
.logo-pile img{display:block;width:auto;background:none;padding:0;margin:0;}
.logo-pile img.logo-r{height:38.01px;}
.logo-pile img.logo-mot{height:21.37px;}
/* Le R est INCRUSTE dans le verre : gris fume rgb(127,119,105), pose
   dans une entaille du bandeau. Ce qui fait l'incrustation, ce n'est pas
   d'assombrir le R — essaye, on perd la marque sans rien gagner — c'est
   le CONTRASTE DE SES ARETES. Lumiere venue d'en haut, donc :
     au-dessus, la paroi est dans l'ombre : un trait dur a 1 px et un
       deuxieme a 2 px — DURS, sans flou. Une version avec une ombre
       floue de 3 px par-dessus creusait davantage, mais elle brouillait
       le dessin : part des pixels ni fond ni encre, 9,1 % contre 6,8 % ;
     en dessous, la levre remonte vers la lumiere : deux traits clairs,
       0,34 puis 0,14, qui donnent l'epaisseur du chanfrein.
   Les drop-shadow s'enchainent — chacun reprend le resultat du precedent
   — d'ou un biseau en deux marches plutot qu'un simple filet.
   Le corps reste a 0,92 : l'assombrir ne creuse rien et ternit la
   marque.
   Tout tombe dans le bandeau, qui est sombre : mesure, aucun debordement
   sur le verre autour (16,9 avant comme apres). */
.logo-pile img.logo-r{filter:brightness(0) invert(0.46) sepia(0.50) brightness(0.92)
drop-shadow(0 -1px 0 rgba(0,0,0,1))
drop-shadow(0 -2px 0 rgba(0,0,0,0.55))
drop-shadow(0 1px 0 rgba(255,255,255,0.34))
drop-shadow(0 2px 0 rgba(255,255,255,0.14));}
/* Le mot ressort du bandeau et passe sur le contenu qui defile : creme
   de la maison, et RIEN D'AUTRE. Trois protections ont ete essayees et
   toutes les trois ont ete refusees a la vue : le halo doux, le cerne
   dilate, puis le voile radial pose derriere. Halo et cerne se lisent
   comme un contour sale autour d'une typo fine ; le voile, meme dose au
   plus bas, se voit sur les sections plates.
   Donc aucune. Le mot est nu, et il se dilue quand un titre clair passe
   derriere lui. C'est un choix assume : mieux vaut un mot qui s'efface
   une seconde qu'un artifice visible en permanence. */
.logo-pile img.logo-mot{filter:brightness(0) invert(0.88) sepia(0.18);}


/* === Menu telephone ============================== */
@media (max-width:680px){.navlinks{top:0;bottom:auto;z-index:1005;height:100vh;height:100svh;padding:105px 32px 76px;}}

/* === Barre sociale, menu, logo =================== */
.barre-sociale{display:none;}
@media (max-width:680px){.barre-sociale{display:flex;align-items:center;justify-content:center;gap:26px;position:fixed;left:0;right:0;bottom:0;z-index:1006;padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));background:rgba(12,12,12,0.86);backdrop-filter:blur(16px) saturate(106%);-webkit-backdrop-filter:blur(16px) saturate(106%);border-top:1px solid rgba(255,255,255,0.07);}.barre-sociale a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;}.barre-sociale svg{width:24px;height:24px;display:block;}body{padding-bottom:64px;}.navlinks a{background-image:none;border-bottom:0;}.navlinks{background:rgba(13,13,13,0.72);backdrop-filter:blur(30px) saturate(105%);-webkit-backdrop-filter:blur(30px) saturate(105%);}}

/* === Carte de menu (telephone) ==================== */
@media (max-width:680px){.navlinks{justify-content:center;gap:clamp(14px,3.6vh,26px);padding:105px 34px 88px;}.navlinks a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:clamp(1rem,4.6vw,1.22rem);letter-spacing:0.2em;color:var(--text-dim);}.navlinks a.active{color:var(--gold);}.navlinks a.active::after{display:none;}}

/* === Menu : barre ou panneau ===================== */
@media (min-width:681px){div.navlinks-telephone{display:none;}}
@media (max-width:680px){div.navlinks-barre{display:none;}}

/* === Plans ====================================== */
header.site{z-index:1010;}

/* === Eventail du coaching ======================= */
.eventail{display:flex;list-style:none;padding:0;margin:118px auto 0;width:100%;max-width:clamp(380px,62vw,820px);}
.eventail li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;min-width:0;padding:0 clamp(8px,1.8vw,24px);color:rgba(220,184,162,0.62);}
.eventail svg{display:block;width:clamp(26px,3.2vw,38px);height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.eventail span{font-family:var(--font-mono);font-size:clamp(0.54rem,0.9vw,0.66rem);letter-spacing:0.13em;text-transform:uppercase;opacity:0.78;}
@media (max-width:820px){.eventail{margin-top:110px;}}
@media (max-width:600px){.eventail li{padding:0 6px;gap:9px;}.eventail span{font-size:0.5rem;letter-spacing:0.06em;line-height:1.32;}}

/* === Coaching : texte etale ==================== */
.tuile-07 .tag,.tuile-07 h3,.tuile-11 .tag,.tuile-11 h3{text-align:center;width:100%;}
.tuile-07 p,.tuile-11 p{max-width:none;margin-inline:auto;text-align:center;}
@media (max-width:600px){.tuile-07 p,.tuile-11 p{text-align:left;}.tuile-07 .tag,.tuile-07 h3,.tuile-11 .tag,.tuile-11 h3{text-align:left;}}

/* === Corps de texte des tuiles sombres ========== */
.tuile-verre.dark p{color:#e8e4dc;}

/* === Coaching : descente ======================= */
.tuile-07,.tuile-11{padding-top:102px;}
@media (max-width:820px){.tuile-07,.tuile-11{padding-top:94px;}}

/* === Planche-contact ============================ */
.photo-item:nth-child(3n+1),.photo-item:nth-child(3n+2),.photo-item:nth-child(3n+3){transform:none;}
.photo-item:hover{transform:scale(1.012);}
.photo-item{border-color:rgba(255,255,255,0.09);}
.photo-item:hover{outline:1px solid rgba(211,113,67,0.55);outline-offset:-1px;}
.photo-item img{filter:brightness(0.98) contrast(1.07) saturate(0.88);}
.photo-item::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent 54%,rgba(8,9,12,0.78) 100%);}
.photo-item::before{content:attr(data-n);position:absolute;top:10px;left:14px;z-index:2;font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.1em;color:var(--gold);opacity:0.9;}
.photo-legende{position:absolute;left:14px;right:14px;bottom:10px;z-index:2;font-family:var(--font-mono);font-size:clamp(0.56rem,0.78vw,0.66rem);letter-spacing:0.13em;text-transform:uppercase;color:rgba(232,228,220,0.92);text-shadow:0 1px 3px rgba(0,0,0,0.8);}

/* === Patchwork ================================= */
.photo-grid.patchwork-3,.photo-grid.patchwork-5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(108px,13vw,178px);gap:10px;}
.photo-grid.patchwork-5>*:nth-child(1){grid-column:1/4;grid-row:1/3;}
.photo-grid.patchwork-5>*:nth-child(2){grid-column:4/7;grid-row:1/2;}
.photo-grid.patchwork-5>*:nth-child(3){grid-column:4/7;grid-row:2/3;}
.photo-grid.patchwork-5>*:nth-child(4){grid-column:1/3;grid-row:3/4;}
.photo-grid.patchwork-5>*:nth-child(5){grid-column:3/7;grid-row:3/4;}
.photo-grid.patchwork-3>*:nth-child(1){grid-column:1/5;grid-row:1/3;}
.photo-grid.patchwork-3>*:nth-child(2){grid-column:5/7;grid-row:1/2;}
.photo-grid.patchwork-3>*:nth-child(3){grid-column:5/7;grid-row:2/3;}
.photo-grid.patchwork-3 .photo-item,.photo-grid.patchwork-5 .photo-item{aspect-ratio:auto;height:100%;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.09);}
.photo-grid.patchwork-3 .photo-item img,.photo-grid.patchwork-5 .photo-item img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:640px){.photo-grid.patchwork-3,.photo-grid.patchwork-5{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(96px,30vw,150px);gap:8px;}.photo-grid.patchwork-3>*:nth-child(n),.photo-grid.patchwork-5>*:nth-child(n){grid-column:auto;grid-row:auto;}.photo-grid.patchwork-3>*:nth-child(1),.photo-grid.patchwork-5>*:nth-child(1){grid-column:1/3;grid-row:span 2;}}