/* SPEQTRIS — page d'accueil (une seule page, HTML/CSS pur) */

:root{
  --orange:#dc4e20;   /* SPORT   */
  --green :#afbb8f;   /* CONTROL */
  --grey  :#999898;   /* ARCHI   */
  --ink   :#111214;

  /* Position des deux séparations obliques.
     dXa = abscisse en haut de l'écran, dXb = abscisse en bas.
     Valeurs reprises de la maquette 1920×1080. */
  --d1a:39.79%; --d1b:19.27%;
  --d2a:80.78%; --d2b:60.26%;

  /* Hauteur (0 = haut, 1 = bas) à laquelle les labels sont posés. */
  --t:.22;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.65s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:#fff;
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:#fff;color:var(--ink);padding:.6rem 1rem;
}
.skip:focus{left:0}

/* commandes de l'accordéon mobile : sans effet sur grand écran */
.tap,.tap-zone,.toggle{display:none}

/* ---------- scène ---------- */

.stage{
  /* Milieu de chaque bande à la hauteur des labels.
     À DÉCLARER ICI, pas sur :root : les états de survol redéfinissent --d1a…--d2b
     sur .stage, et une variable n'est recalculée que là où elle est déclarée. */
  --e1:calc(var(--d1a) + (var(--d1b) - var(--d1a)) * var(--t));
  --e2:calc(var(--d2a) + (var(--d2b) - var(--d2a)) * var(--t));

  position:relative;
  width:100%;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
}

/* ---------- les trois bandes obliques ---------- */

.panel{
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  cursor:pointer;
  transition:clip-path var(--dur) var(--ease);
  outline:none;
}
.panel--sport  {clip-path:polygon(0 0, var(--d1a) 0, var(--d1b) 100%, 0 100%)}
.panel--control{clip-path:polygon(var(--d1a) 0, var(--d2a) 0, var(--d2b) 100%, var(--d1b) 100%)}
.panel--archi  {clip-path:polygon(var(--d2a) 0, 100% 0, 100% 100%, var(--d2b) 100%)}

.panel__media{position:absolute;inset:0;display:block}
.panel__media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform 1s var(--ease), filter var(--dur) var(--ease);
  will-change:transform;
}
.panel--sport   img{object-position:48% 50%}
.panel--control img{object-position:54% 42%}
.panel--archi   img{object-position:34% 51%}

/* voile : assombrit les bandes au repos, et davantage celles qui ne sont pas survolées */
.panel__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,.25) 45%,rgba(10,11,13,.6) 100%);
  transition:opacity var(--dur) var(--ease);
  opacity:1;
}

/* ---------- bandeau du haut + logo ---------- */

/* Reprise de la maquette : bande pleine largeur, 152,6 px sur 1080 (14,13 %),
   noir a 70 % d'opacite, posee par-dessus les photos. */
.topbar{
  position:absolute;
  top:0;left:0;right:0;
  height:14.13%;
  display:flex;
  align-items:center;
  padding-left:3.13%;
  background:rgba(0,0,0,.7);
  pointer-events:none;
  z-index:3;
}

.brand{
  margin:0;
  width:clamp(180px,21vw,404px);
  color:#fff;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.35));
}
.brand svg{display:block;width:100%;height:auto}

/* ---------- labels des univers ---------- */

/* Les trois mots ont des proportions différentes (CONTROL est bien plus long).
   On leur impose donc la même HAUTEUR — celle qu'avait CONTROL — et la largeur suit.
   --label-h = ancienne largeur de CONTROL / son rapport largeur-hauteur (6,6315). */
.label{
  --label-h:calc(clamp(120px,18vw,340px) / 6.6315);
  position:absolute;
  top:calc(var(--t) * 100%);
  margin:0;
  transform:translate(-50%,-50%);
  width:max-content;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 3px 18px rgba(0,0,0,.55));
  transition:left var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.label svg{
  display:block;
  height:var(--label-h);
  width:auto;
  transition:height var(--dur) var(--ease);
}
.label--sport  {left:calc(var(--e1) / 2);            color:var(--orange)}
.label--control{left:calc((var(--e1) + var(--e2)) / 2); color:var(--green)}
.label--archi  {left:calc((var(--e2) + 100%) / 2);   color:var(--grey)}

/* ---------- interaction : la bande survolée s'ouvre en grand ---------- */

@media (hover:hover) and (min-width:900px){

  /* SPORT */
  .stage:has(.panel--sport:hover),  .stage:has(.panel--sport:focus-visible){
    --d1a:63%; --d1b:43%; --d2a:89%; --d2b:69%;
  }
  /* CONTROL */
  .stage:has(.panel--control:hover), .stage:has(.panel--control:focus-visible){
    --d1a:26%; --d1b:6%;  --d2a:92%; --d2b:72%;
  }
  /* ARCHI */
  .stage:has(.panel--archi:hover),  .stage:has(.panel--archi:focus-visible){
    --d1a:22%; --d1b:2%;  --d2a:58%; --d2b:38%;
  }

  /* la bande survolée : image agrandie, voile levé, label plus grand */
  .panel:hover img,
  .panel:focus-visible img{transform:scale(1.12)}
  .panel:hover .panel__veil,
  .panel:focus-visible .panel__veil{opacity:.35}

  /* les autres bandes reculent */
  .stage:has(.panel:hover) .panel:not(:hover) img{filter:grayscale(.35) brightness(.75)}
  .stage:has(.panel:hover) .panel:not(:hover) .panel__veil{opacity:1}

  .stage:has(.panel--sport:hover)   .label--sport,
  .stage:has(.panel--control:hover) .label--control,
  .stage:has(.panel--archi:hover)   .label--archi{
    --label-h:calc(clamp(150px,24vw,440px) / 6.6315);
  }

  .stage:has(.panel--sport:hover)   .label:not(.label--sport),
  .stage:has(.panel--control:hover) .label:not(.label--control),
  .stage:has(.panel--archi:hover)   .label:not(.label--archi),
  .stage:has(.panel--sport:focus-visible)   .label:not(.label--sport),
  .stage:has(.panel--control:focus-visible) .label:not(.label--control),
  .stage:has(.panel--archi:focus-visible)   .label:not(.label--archi){opacity:0}

  .panel:focus-visible{outline:2px solid #fff;outline-offset:-6px}
}


@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}

/* ============================================================
   Contenu d'un univers, révélé à l'intérieur de la bande
   Géométrie reprise au pixel près de « Présentation SPORT.pdf »
   (repères d'origine sur 1920 × 1080, convertis en %)
   ============================================================ */

@font-face{
  font-family:"Raleway";
  src:url("/assets/fonts/raleway-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Raleway";
  src:url("/assets/fonts/raleway-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barre orange du lockup : part du bord de l'écran et s'arrête avant le mot */
.lockup-bar{
  position:absolute;
  left:0;
  top:19.62%;              /* centrée sur la ligne du label */
  height:4.75%;            /*  51,3 / 1080 */
  width:0;
  background:var(--orange);
  transform-origin:left center;
  transition:width var(--dur) var(--ease);
  pointer-events:none;
  z-index:1;
}

.content{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  z-index:2;
}

/* le panneau clair : x 37,84→731,41 ; y 379,2→778,0 (depuis le haut) ; rayon 44,35 */
.card{
  position:absolute;
  left:1.97%;
  top:35.11%;
  width:36.12%;
  height:36.93%;
  background:#efefef;
  border-radius:2.31vw;              /* 44,35 / 1920 */
  container-type:inline-size;
  display:flex;
  align-items:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.card p{
  margin:0;
  padding:0 9.2%;                    /* 63,8 / 693,6 */
  font-family:"Raleway",system-ui,sans-serif;
  font-weight:300;
  font-size:min(3.32cqi,2.13vh);      /* 23 / 693,6, borné en hauteur */
  line-height:1.2;
  text-align:justify;
  color:#111214;
}

/* le bouton : x 101,79→658,69 ; y 876,6→990,2 ; pilule */
.cta{
  position:absolute;
  left:5.30%;
  top:81.19%;
  width:29.01%;
  height:10.51%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:8.2%;                 /* 45,9 / 556,9 */
  padding-right:2.9%;
  background:var(--orange);
  border-radius:999px;
  text-decoration:none;
  container-type:inline-size;
  box-shadow:0 14px 34px rgba(0,0,0,.3);
  transition:filter .25s var(--ease), transform .25s var(--ease);
}
.cta__text{
  font-family:"Raleway",system-ui,sans-serif;
  font-weight:600;
  font-size:6.60cqi;                 /* 32/556,9 dans le PDF, agrandi à la demande */
  color:#fff;
  white-space:nowrap;
}
.cta__icon{
  flex:0 0 auto;
  width:14.47cqi;                    /* 80,6 / 556,9 */
  height:14.47cqi;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cta__icon svg{width:37%;height:auto;fill:var(--orange);display:block}
.cta:hover{filter:brightness(1.08);transform:translateY(-2px)}

/* révélation au survol de la bande */
@media (hover:hover) and (min-width:900px){
  /* :focus-within figeait le contenu après un clic souris (la bande garde le focus).
     On ne garde donc que le survol et le focus clavier. */
  .panel:hover .content,
  .panel:focus-visible .content,
  .panel:has(:focus-visible) .content{
    opacity:1;
    transform:none;
    pointer-events:auto;
    transition-delay:.18s;
  }
  /* la barre orange rejoint le mot : elle s'arrête 31 px avant le label */
  .stage:has(.panel--sport:hover) .panel--sport .lockup-bar{
    width:calc(var(--e1) / 2 - calc(clamp(150px,24vw,440px) / 6.6315) * 4.5498 / 2 - 1.6%);
  }
}

/* --- variantes par univers, relevées sur chaque PDF ---------------------- */

/* CONTROL : carte noire + texte blanc, bouton vert, tout décalé au centre */
.panel--control .card{left:31.08%;background:#000}
.panel--control .card p{color:#fff}
.panel--control .cta{left:34.64%;top:79.68%;background:var(--green)}
.panel--control .cta__icon svg{fill:var(--green)}
.panel--control .lockup-bar{background:var(--green)}

/* ARCHI : carte claire, bouton gris foncé, décalé à droite */
.panel--archi .card{left:57.64%}
.panel--archi .cta{left:61.24%;top:79.86%;background:#4d4d4d}
.panel--archi .cta__icon svg{fill:#4d4d4d}
.panel--archi .lockup-bar{background:var(--grey)}

/* la barre du lockup s'arrête juste avant le mot, dans chaque bande
   (son départ est donné par le bord de la bande : le clip-path la coupe) */
@media (hover:hover) and (min-width:900px){
  .stage:has(.panel--control:hover) .panel--control .lockup-bar{
    width:calc((var(--e1) + var(--e2)) / 2 - clamp(150px,24vw,440px) / 2 - 1.6%);
  }
  .stage:has(.panel--archi:hover) .panel--archi .lockup-bar{
    width:calc((var(--e2) + 100%) / 2 - calc(clamp(150px,24vw,440px) / 6.6315) * 4.2658 / 2 - 1.6%);
  }
}

/* ============================================================
   Écrans étroits : accordéon au tap, sans JavaScript
   (case à cocher + label : un 2e tap referme ; plusieurs peuvent rester ouverts —
    un radio ne se décoche pas au clic, d'où la case)
   ============================================================ */

@media (max-width:899px), (orientation:portrait){

  body{overflow:auto}

  .stage{
    height:auto;
    min-height:100dvh;
    padding-top:var(--bar-h);
    background:var(--ink);
  }
  :root{--bar-h:clamp(64px,17vw,110px)}

  .topbar{height:var(--bar-h);padding-left:5vw;background:rgba(0,0,0,.85)}
  .brand{width:min(56vw,290px)}

  /* chaque univers redevient un bloc dans le flux */
  .panel{
    position:relative;
    inset:auto;
    height:auto;
    clip-path:none;
    overflow:visible;
    cursor:default;
  }

  /* la photo devient une bandeau de tête, coupée en biais */
  .panel__media,
  .panel__veil{
    position:relative;
    height:24dvh;
    min-height:168px;
    clip-path:polygon(0 0,100% 0,100% 90%,0 100%);
  }
  .panel__veil{position:absolute;top:0;left:0;right:0}
  .panel__media img{transform:none}

  /* zone tapable : tout le bandeau */
  .tap-zone{
    display:block;
    position:absolute;
    top:0;left:0;right:0;
    height:24dvh;
    min-height:168px;
    cursor:pointer;
    z-index:4;
  }
  .tap{
    display:block;
    position:absolute;
    width:1px;height:1px;opacity:0;pointer-events:none;
  }
  .tap:focus-visible ~ .tap-zone{outline:2px solid #fff;outline-offset:-5px}

  .label{
    --label-h:calc(min(42vw,220px) / 6.6315);
    position:absolute;
    left:5vw;
    top:12dvh;
    width:max-content;
    transform:translateY(-50%);
    opacity:1;
  }

  /* pastille + chevron, qui pivote quand l'univers est ouvert */
  .toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:6vw;
    top:12dvh;
    width:2.6rem;height:2.6rem;
    margin-top:-1.3rem;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.5);
    z-index:3;
    transition:transform .35s var(--ease), background .35s var(--ease);
  }
  /* chevron de la charte, centré en flex : pas de décalage possible */
  .toggle svg{
    width:.8rem;height:auto;
    fill:#fff;
    display:block;
    transform:rotate(90deg);   /* pointe vers le bas au repos */
  }
  .panel--sport   .tap:checked ~ .toggle{background:var(--orange);border-color:var(--orange)}
  .panel--control .tap:checked ~ .toggle{background:var(--green);border-color:var(--green)}
  .panel--archi   .tap:checked ~ .toggle{background:#4d4d4d;border-color:#4d4d4d}
  .tap:checked ~ .toggle{transform:rotate(180deg)}

  /* le contenu se déplie sous le bandeau */
  .lockup-bar{display:none}
  .content{
    position:static;
    inset:auto;
    opacity:0;
    transform:none;
    pointer-events:none;
    max-height:0;
    overflow:hidden;
    padding:0 5vw;
    transition:max-height .5s var(--ease), opacity .35s var(--ease), padding .5s var(--ease);
  }
  .tap:checked ~ .content{
    opacity:1;
    pointer-events:auto;
    max-height:130dvh;
    padding:1.4rem 5vw 2.2rem;
  }

  .card{
    position:static;
    width:auto;height:auto;
    border-radius:1rem;
    padding:1.15rem 1.25rem;
    box-shadow:none;
    display:block;
  }
  .card p{
    padding:0;
    font-size:clamp(13.5px,3.7vw,17px);
    line-height:1.45;
    text-align:left;
  }

  .cta{
    position:static;
    width:100%;
    max-width:24rem;
    height:auto;
    margin-top:1.1rem;
    padding:.85rem .85rem .85rem 1.6rem;
    box-shadow:none;
  }
  .cta__text{font-size:clamp(14px,4vw,18px)}
  .cta__icon{width:2.5em;height:2.5em}
}