:root{
  --bg:#050505; --fg:#fff; --line:#313131; --muted:#dedede;
  --orange:#ff792d; --green:#6bca73; --blue:#219acf;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --condensed:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#ff792d;color:#111}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
button{font:inherit}
img,svg{display:block;max-width:100%}
.icon-sprite,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.icon{width:1em;height:1em;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}
.skip-link{position:absolute;z-index:100;top:-100px;left:14px;padding:12px 18px;background:#fff;color:#000;border-radius:0 0 6px 6px;font-weight:800}.skip-link:focus{top:0}
.site-wrap{width:min(100%,1280px);margin-inline:auto;padding-inline:clamp(22px,5.4vw,76px)}
/* HERO — composition volontairement sobre et graphique */
.hero{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-layout{position:relative;min-height:660px;display:grid;grid-template-columns:28% 39% 33%;align-items:start;padding-top:55px}
.hero-brand{position:relative;z-index:4;max-width:290px;padding-right:clamp(18px,3vw,43px)}
.hero-brand a{display:block;max-width:270px}
.hero-brand img{width:100%;height:auto;max-width:256px}
.hero-brand::after{content:"";position:absolute;top:115px;right:12px;width:1.8px;height:230px;background:#d7d7d7;transform:rotate(11deg);transform-origin:top}
.hero-copy{position:relative;z-index:3;padding:52px 0 0 2px;max-width:370px}
.hero-copy h1{font-family:var(--display);font-style:italic;font-size:clamp(44px,4.8vw,66px);font-weight:900;line-height:.93;letter-spacing:-.06em;margin:0 0 19px;text-wrap:balance}
.accent-stroke{display:block;width:49px;height:6px;background:var(--orange);transform:skew(-13deg);margin:0 0 16px 1px}
.hero-subtitle{font-size:clamp(19px,2.17vw,27px);font-weight:800;font-style:italic;line-height:1.10;letter-spacing:-.035em;margin:0 0 14px}
.hero-subtitle strong{font-weight:900}
.hero-detail{font-size:clamp(14px,1.48vw,18px);font-weight:500;font-style:italic;line-height:1.35;margin:0;color:#ebebeb;letter-spacing:-.014em}
.hero-illustration{z-index:2;position:absolute;right:calc(-1 * clamp(22px,5.4vw,76px));top:0;width:min(45.5vw,545px);max-width:none;pointer-events:none;user-select:none}
.hero-illustration img{width:100%;height:auto;max-width:none}
.hero-actions{position:absolute;bottom:66px;left:0;z-index:5;display:flex;align-items:center;gap:15px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:55px;padding:0 23px;border:2px solid white;border-radius:11px;font-weight:850;letter-spacing:-.03em;font-size:clamp(14px,1.5vw,19px);white-space:nowrap;transition:transform .22s ease,color .22s ease,background .22s ease,border-color .22s ease}
.button:hover{transform:translateY(-4px)}
.button-primary{background:#fff;color:#050505}
.button-primary:hover{background:var(--orange);border-color:var(--orange)}
.button-secondary{background:transparent;color:#fff}
.button-secondary:hover{background:#fff;color:#050505}
.button .icon-arrow{font-size:23px}.button .icon-external{font-size:19px}
/* Introduction du club */
.about{position:relative;padding:39px 4px 48px;border-bottom:0}
.about-grid{display:grid;grid-template-columns:43% 57%;align-items:center}
.about-title-block{padding-right:32px}
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--condensed);font-weight:900;font-size:23px;font-style:italic;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.eyebrow .accent-stroke{width:44px;height:6px;margin:3px 0 0}
.about h2{font-style:italic;font-size:clamp(32px,4.1vw,51px);line-height:.98;letter-spacing:-.058em;font-weight:900;margin:10px 0 0}
.about-copy{border-left:2px solid #dedede;padding-left:40px;font-size:clamp(14px,1.55vw,19px);font-weight:450;line-height:1.43;letter-spacing:-.018em;margin:0}
/* Le pont entre deux projets, sans assimilation des identités */
.brands{position:relative;overflow:hidden;margin-left:calc(-1 * clamp(22px,5.4vw,76px));margin-right:calc(-1 * clamp(22px,5.4vw,76px));padding:1px 0 14px}
.brands-panel{background:#fff;color:#050505;min-height:280px;display:grid;grid-template-columns:39% 22% 39%;align-items:center;padding:19px clamp(44px,7.5vw,98px) 17px;clip-path:polygon(3.5% 7%,98% 0,95.5% 96%,0 100%)}
.brand-round,.brand-new{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.brand-round img{width:clamp(150px,20vw,235px);height:auto;filter:drop-shadow(0 0 0 #000)}
.brand-new img{width:clamp(150px,18vw,235px);height:auto}
.brand-bridge{display:flex;justify-content:center;align-items:center;text-align:center;font-style:italic;font-weight:900;line-height:1;letter-spacing:-.055em;white-space:nowrap}
.brand-bridge-x{color:#050505}
.collab-mark{display:block;width:clamp(74px,9.3vw,124px);height:auto;overflow:visible;transform:rotate(-6deg)}
/* Liens : entièrement cliquables, pas de faux boutons */
.connections{padding:29px 0 30px;position:relative}
.connections h2{font-weight:900;font-style:italic;font-size:clamp(32px,4.1vw,50px);line-height:1.1;letter-spacing:-.055em;margin:0 0 25px;display:flex;gap:16px;align-items:center}
.connections .accent-green{background:var(--green);width:47px;height:6px;margin:8px 0 0}
.links-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:stretch}
.links-grid a{position:relative;min-width:0;min-height:106px;padding:13px 7px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;border:2px solid white;border-radius:12px;font-size:clamp(10px,1.18vw,15px);font-weight:850;letter-spacing:-.025em;transition:transform .2s,background .2s,color .2s,border-color .2s}
.links-grid a:hover{background:#fff;color:#050505;transform:translateY(-5px)}
.links-grid a:nth-child(4){margin-left:20px}
.links-grid a:nth-child(4)::before{content:"";position:absolute;left:-19px;top:4px;bottom:4px;width:1.5px;background:#777}
.link-icon{font-size:35px;stroke-width:1.9}
.link-external{position:absolute;right:8px;bottom:10px;font-size:12px;stroke-width:2}
/* Signature discrète */
.footer{min-height:100px;position:relative;padding:9px 0 31px}
.footer-inner{display:flex;gap:28px;align-items:center;justify-content:center;position:relative;z-index:2}
.footer-rule{height:1.5px;background:#b8b8b8;flex:1;max-width:190px}
.footer p{font-size:clamp(13px,1.46vw,18px);font-style:italic;letter-spacing:-.028em;font-weight:550;text-align:center;margin:0;white-space:normal}
.footer p strong{font-weight:900}
.footer-flowers{position:absolute;right:calc(-1 * clamp(22px,5.4vw,76px));bottom:0;width:145px;height:auto;z-index:1;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 30%)}
.footer-leaf{position:absolute;left:calc(-1 * clamp(22px,5.4vw,76px));bottom:0;width:150px;pointer-events:none;z-index:1}.footer-leaf svg{width:100%;height:auto}
@media (min-width:1250px){.hero-layout{min-height:710px}.hero-copy{padding-top:61px}.hero-actions{bottom:81px}.hero-illustration{width:546px}.about{padding:48px 5px 51px}.brands-panel{min-height:300px}.connections{padding:32px 0 38px}}
/* TABLETTES — grille explicite : les éléments ne se superposent jamais. */
@media (min-width:601px) and (max-width:1240px){
  .hero{overflow:hidden}
  .hero-layout{
    display:grid;
    grid-template-columns:27% 34% 39%;
    grid-template-rows:auto minmax(0,auto) minmax(60px,auto);
    min-height:0;
    align-items:start;
    padding:45px 0 35px;
  }
  .hero-brand{grid-column:1;grid-row:1 / 4;max-width:100%;padding-right:clamp(20px,3vw,35px)}
  .hero-brand::after{right:10px;top:100px;height:240px}
  .hero-copy{display:contents}
  .hero-heading{grid-column:2 / 4;grid-row:1;z-index:3;padding:24px 0 5px 4px;max-width:100%}
  .hero-heading h1{font-size:clamp(43px,5.3vw,63px);line-height:.93;max-width:620px;margin-bottom:20px}
  .hero-heading .accent-stroke{margin-bottom:18px}
  .hero-description{grid-column:2;grid-row:2;z-index:3;align-self:start;padding:3px 12px 0 4px;min-width:0}
  .hero-subtitle{font-size:clamp(19px,2.25vw,26px);line-height:1.12;margin-bottom:17px;max-width:100%}
  .hero-detail{font-size:clamp(14px,1.5vw,17px);line-height:1.43;max-width:100%}
  .hero-illustration{
    grid-column:3;grid-row:2 / span 2;
    position:relative;right:auto;top:auto;
    width:calc(100% + 32px);max-width:440px;
    margin:0 -32px 0 0;
    justify-self:start;align-self:start;
    z-index:2;
  }
  .hero-actions{
    grid-column:1 / 3;grid-row:3;
    position:relative;left:auto;bottom:auto;
    align-self:end;justify-self:start;
    z-index:4;margin:18px 0 0 0;
  }
  .hero-actions .button{font-size:clamp(13px,1.4vw,17px);min-height:51px;padding:0 clamp(13px,1.6vw,22px);gap:12px}
  .about h2{font-size:clamp(32px,4vw,45px)}
  .brands-panel{min-height:240px}
  .collab-mark{width:clamp(64px,8vw,94px)}
}
@media (min-width:601px) and (max-width:790px){
  .hero-layout{grid-template-columns:27% 34% 39%;padding-top:38px;padding-bottom:24px}
  .hero-brand{padding-right:16px}.hero-brand::after{right:6px;top:85px;height:185px}
  .hero-heading{padding-top:18px}
  .hero-heading h1{font-size:clamp(38px,5.75vw,46px)}
  .hero-description{padding-right:11px}
  .hero-subtitle{font-size:clamp(17px,2.6vw,20px)}
  .hero-detail{font-size:clamp(13px,1.9vw,15px)}
  .hero-illustration{width:calc(100% + 22px);margin-right:-22px}
  .hero-actions .button{font-size:13px;min-height:48px}
  .about-grid{grid-template-columns:44% 56%}.about-copy{padding-left:22px;font-size:14px}
  .brands-panel{min-height:217px;padding-inline:6%}.brand-round img{width:150px}.brand-new img{width:150px}
  .collab-mark{width:clamp(55px,7vw,70px)}
  .links-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .links-grid a{min-height:100px;font-size:14px}
  .links-grid a:nth-child(4){margin-left:0}.links-grid a:nth-child(4)::before{display:none}
}
@media (max-width:600px){
  .site-wrap{padding-inline:22px}
  .hero-layout{display:flex;flex-direction:column;min-height:auto;padding-top:30px;padding-bottom:0}
  .hero-brand{width:194px;max-width:none;padding:0 0 16px}.hero-brand img{width:100%;max-width:194px}.hero-brand::after{display:none}
  .hero-copy{display:block;padding:20px 0 0;max-width:520px;width:100%}
  .hero-copy h1{font-size:clamp(48px,11vw,69px);line-height:.93;margin-bottom:17px}
  .hero-subtitle{font-size:clamp(20px,5.3vw,26px);max-width:430px;margin-bottom:10px}
  .hero-detail{font-size:15px;line-height:1.45;max-width:390px}
  .hero-actions{position:relative;left:auto;bottom:auto;margin-top:27px;display:flex;flex-wrap:wrap;width:100%;gap:10px;order:3;z-index:6}
  .button{min-height:48px;font-size:clamp(13px,3.65vw,15px);padding:0 13px;gap:10px}.button .icon-arrow{font-size:20px}.button .icon-external{font-size:17px}
  .hero-illustration{position:relative;right:auto;top:auto;order:4;width:min(calc(100% + 22px),460px);margin:10px -22px 0 auto;align-self:flex-end}
  .about{padding:29px 0 35px}.about-grid{display:block}.about h2{font-size:clamp(35px,8.5vw,46px);margin-bottom:22px}.about-copy{font-size:15px;padding:0 0 0 18px;line-height:1.56}
  .brands{margin-inline:-22px;padding:0 0 8px}.brands-panel{clip-path:polygon(2% 3%,99% 0,98% 97%,0 100%);grid-template-columns:38% 24% 38%;min-height:170px;padding:12px 8px}
  .brand-round img{width:min(29vw,157px)}.brand-new img{width:min(28vw,157px)}
  .collab-mark{width:clamp(49px,13vw,68px)}
  
  .connections{padding:29px 0}.connections h2{font-size:35px;margin-bottom:22px}
  .links-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .links-grid a:nth-child(4){margin-left:0}.links-grid a:nth-child(4)::before{display:none}
  .links-grid.links-grid a{min-height:100px;padding:10px 6px;font-size:clamp(11px,3vw,13px);border-radius:10px}.link-icon{font-size:29px}.link-external{font-size:11px}
  .footer{padding:16px 0 65px}.footer-inner{gap:13px}.footer-rule{max-width:40px}.footer p{max-width:290px;font-size:13px;line-height:1.35}.footer-flowers{right:-22px;width:105px}.footer-leaf{left:-22px;width:93px}
}
@media (max-width:380px){
  .hero-brand{width:164px}.hero-copy h1{font-size:46px}
  .hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}
  .brands-panel{grid-template-columns:38% 24% 38%}.collab-mark{width:46px}
  .links-grid a{font-size:11px;min-height:92px}.link-icon{font-size:25px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}