/* ==========================================================================
   Roland Chateau — page d'attente · Direction « Nuancier »
   Layout : 1) hero plein écran — logo en haut à gauche, grappe au centre, 5 métiers en orbite
            2) implantations sur fond nuit, révélées par une bille qui grandit — carte en billes 58 / liste 42
   Charte conservée : logo, barre de cartouches, couleurs des étiquettes métiers, Avant Garde.
   ========================================================================== */
:root{
  /* Neutres */
  --papier:#f0f1f1;          /* = fond de la photo de la grappe, pour qu'elle se fonde dans la page */
  --encre:#1d1a17;
  --gris:#66625c;
  --nuit:#211026;            /* prune de la barre (#521864), assombrie : fond des implantations */
  --ivoire:#f2eee6;
  --ivoire-doux:#bdb3c0;
  /* Étiquettes métiers (relevées sur la pub + PNG transport) */
  --verrerie:#34b56b;
  --bouchons:#f57823;
  --packaging:#d0164b;
  --embouteillage:#6375c3;
  --transport:#d3a221;
  /* Typo — Avant Garde en premier (kit Adobe Fonts ou @font-face sous licence), Questrial en attendant */
  --display:"itc-avant-garde-gothic-pro","ITC Avant Garde Gothic","Avant Garde","Century Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--papier);color:var(--encre)}
body{margin:0;font-family:var(--display);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{padding-inline:clamp(16px,4vw,64px)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
a{color:inherit}
:focus-visible{outline:2px solid var(--packaging);outline-offset:4px}

/* ---------- HERO plein écran : toute la scène tient dans la fenêtre ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden}
.scene{position:absolute;inset:clamp(20px,5vh,52px) clamp(16px,4vw,64px)}
.logo{position:absolute;left:0;top:0;z-index:4;display:flex;flex-direction:column;gap:clamp(10px,1vw,14px);width:max-content;max-width:100%}
h1{font-weight:300;font-size:clamp(36px,min(4vw,6.4vh),68px);line-height:1;letter-spacing:-.012em;margin:0;white-space:nowrap}
.bar{display:flex;gap:2px;height:clamp(6px,.65vw,10px);width:100%}
.bar span{display:block;height:100%}
.tag{font-size:clamp(16px,min(1.55vw,2.4vh),24px);color:var(--gris);margin:0;font-weight:200;letter-spacing:.01em}
.cta{position:absolute;left:0;bottom:0;z-index:4;display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:15px 20px;border:1px solid var(--encre);overflow:hidden;isolation:isolate;transition:color .4s;will-change:transform}
.cta::before{content:"";position:absolute;inset:0;background:var(--encre);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.cta:hover,.cta:focus-visible{color:var(--papier)}
.cta:hover::before,.cta:focus-visible::before{transform:scaleY(1)}
.cta svg{transition:transform .4s}
.cta:hover svg{transform:translateY(3px)}

/* Grappe au centre, 5 métiers en orbite — rupture : les étiquettes chevauchent les disques et débordent */
.grappe{position:absolute;top:3%;height:94%;width:auto;left:52%;translate:-50% 0;aspect-ratio:900/1199;display:block}
.fx{position:absolute;inset:0;pointer-events:none;z-index:3}
.chip{position:absolute;--g:0;background:
   radial-gradient(circle at 34% 30%,rgba(255,255,255,calc(.9*var(--g))) 0 7%,rgba(255,255,255,0) 28%),
   radial-gradient(circle at 62% 72%,rgba(0,0,0,calc(.28*var(--g))) 0,rgba(0,0,0,0) 70%),var(--c)}
.metier{position:absolute;width:min(22vh,14.5vw);margin:0;z-index:2}
.metier .float{animation:float var(--d,7s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes float{from{transform:translate3d(0,-7px,0)}to{transform:translate3d(0,8px,0)}}
.disc{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--c);box-shadow:0 18px 40px -22px rgba(29,26,23,.55);transition:box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.disc img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--s,1.05));transform-origin:var(--o,50% 50%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.metier:hover .disc{box-shadow:0 0 0 6px var(--papier),0 0 0 7px var(--c),0 24px 50px -22px rgba(29,26,23,.6);transform:scale(1.04)}
.metier:hover .disc img{transform:scale(calc(var(--s,1.05) + .12))}
.label{position:absolute;white-space:nowrap;background:var(--c);color:#fff;padding:.42em .9em .46em;text-align:center;line-height:1.15;font-size:clamp(9px,min(1.02vw,1.6vh),15px);letter-spacing:.06em;z-index:2;font-weight:300}
.label b{display:block;font-weight:300;font-size:1.28em;letter-spacing:.08em;text-transform:uppercase}
.label span{display:block;letter-spacing:.07em}
/* Transport & stockage : intitulé long, légèrement resserré pour tenir dans la cartouche */
.m-transport .label b{font-size:1.16em;letter-spacing:.065em}
.m-transport .label span{font-size:1em}
.label.up{bottom:88%}.label.down{top:86%}
.label.l{right:38%}.label.rr{right:-6%}.label.r{left:38%}.label.c{left:50%;translate:-50% 0}
/* positions en orbite (en % de la scène) */
.m-bouchons{left:14%;top:33%;--c:var(--bouchons);--o:45% 60%;--s:1.2;--d:7.4s}
.m-verrerie{left:70%;top:5%;--c:var(--verrerie);--o:50% 32%;--s:1.35;--d:8.2s;--dl:-2s}
.m-transport{left:81%;top:37%;--c:var(--transport);--o:62% 60%;--s:1.25;--d:6.8s;--dl:-4s}
.m-packaging{left:67%;top:67%;--c:var(--packaging);--o:70% 30%;--s:1.02;--d:7.9s;--dl:-1s}
.m-embouteillage{left:22%;top:65%;--c:var(--embouteillage);--o:55% 40%;--s:1.3;--d:8.6s;--dl:-3s}

/* ---------- IMPLANTATIONS ---------- */
.sites{position:relative;background:var(--nuit);color:var(--ivoire);padding-block:clamp(72px,10vw,150px) clamp(32px,4vw,56px)}
.sites-in{max-width:1360px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(32px,5vw,96px);align-items:start}
.sites h2{grid-column:1/-1;font-weight:300;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.02em;margin:0 0 clamp(8px,2vw,24px);text-wrap:balance}
.sites h2 em{font-style:normal;color:var(--transport)}
.eyebrow{grid-column:1/-1;color:var(--ivoire-doux);margin-bottom:-8px}
.map{position:sticky;top:clamp(24px,6vh,64px);min-width:0}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map .dot{fill:var(--ivoire);opacity:.16}
.map .site circle.b{transition:r .4s}
.map .site .ring{fill:none;stroke-width:.12;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .5s}
.map .site.on .ring{opacity:1;transform:scale(1.6)}
.map .site text{font-family:var(--mono);font-size:.8px;letter-spacing:.08em;fill:var(--ivoire);text-transform:uppercase;opacity:0;transition:opacity .3s}
.map .site.on text{opacity:1}
.map figcaption{margin-top:14px;color:var(--ivoire-doux)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:0;min-width:0}
.site-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:16px;padding-block:clamp(18px,2vw,26px);border-top:1px solid rgba(242,238,230,.14);cursor:default;transition:background .4s}
.site-item:last-child{border-bottom:1px solid rgba(242,238,230,.14)}
.bille{width:16px;height:16px;border-radius:50%;margin-top:.3em;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85) 0 10%,rgba(255,255,255,0) 32%),radial-gradient(circle at 62% 72%,rgba(0,0,0,.3),rgba(0,0,0,0) 70%),var(--c);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.site-item:hover .bille,.site-item.on .bille{transform:scale(1.35)}
.site-item h3{margin:0 0 6px;font-weight:300;font-size:clamp(18px,1.6vw,24px);letter-spacing:.1em;text-transform:uppercase}
.seat{margin:-2px 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-doux)}
.site-item address{font-style:normal;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--ivoire-doux)}
.site-item[data-site="bourgogne"] h3{font-size:clamp(22px,2.1vw,32px)}
.site-item.main address{color:var(--ivoire)}
.contact{display:flex;flex-direction:column;gap:6px;margin-top:12px;text-transform:none;letter-spacing:.03em;font-size:13px}
.contact .k{text-transform:uppercase;font-size:10px;letter-spacing:.14em}
.contact .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contact .k{color:var(--ivoire-doux);width:3.2em}
.contact a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0% 1px no-repeat;transition:background-size .45s cubic-bezier(.7,0,.2,1);padding-bottom:2px;overflow-wrap:anywhere}
.contact a:hover,.contact a:focus-visible{background-size:100% 1px}
.copy{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivoire-doux);background:none;border:1px solid rgba(242,238,230,.25);padding:4px 8px;cursor:pointer;transition:color .3s,border-color .3s}
.copy:hover{color:var(--ivoire);border-color:var(--ivoire)}
.copy.ok{color:var(--nuit);background:var(--transport);border-color:var(--transport)}
.minis{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.foot{max-width:1360px;margin:clamp(64px,8vw,120px) auto 0;display:flex;flex-direction:column;gap:22px}
.foot .bar{height:6px;opacity:.9}
.foot-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 32px;color:var(--ivoire-doux)}
.brands{font-size:clamp(15px,1.3vw,19px);color:var(--ivoire);letter-spacing:.02em}
.brands span{color:var(--ivoire-doux);padding-inline:.5em}

/* ---------- ÉCRANS ÉTROITS / PORTRAIT : logo en tête, orbite resserrée dessous ---------- */
@media (max-width:820px),(max-aspect-ratio:5/4){
  .grappe{width:min(70%,38svh);height:auto;top:27%;left:50%}
  .metier{width:min(28%,14svh)}
  .m-bouchons{left:0;top:23%}.m-verrerie{left:72%;top:21%}.m-transport{left:72%;top:49%}.m-embouteillage{left:2%;top:55%}.m-packaging{left:37%;top:73%}
  .label{font-size:9px;padding:.4em .7em}
  .label span{display:none}
  .label,.label.l,.label.r{left:50%;right:auto;translate:-50% 0}
  .label.rr{left:auto;right:0;translate:none}
  .cta{left:auto;right:0;padding:12px 16px;font-size:11px}
}
@media (max-width:820px){
  .sites-in{grid-template-columns:minmax(0,1fr)}
  .map{position:relative;top:0;max-width:440px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .metier .float{animation:none}
}