/* ==========================================================================
   Composer — site provisoire
   Maquette Figma « site provisoire FR » (frame 1660 × 1086) + rendus 400 / 840 / 1280 / 1920
   --------------------------------------------------------------------------
   Breakpoints
   - Mobile  : < 600px                       (rendu 400)
   - Tablette: 600px → 1099px                (rendu 840)
   - Desktop : ≥ 1100px en format paysage     (maquette Figma, rendus 1280 / 1920)
   ========================================================================== */

/* Polices (licence SIL OFL, fichiers dans assets/fonts) ------------------- */
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Polices de secours calibrées sur Arial : pendant le chargement des polices,
   le texte occupe déjà la même place (pas de saut de mise en page / CLS) */
@font-face {
  font-family: "Urbanist Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 98.19%; ascent-override: 96.76%; descent-override: 25.46%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 103.83%; ascent-override: 102.67%; descent-override: 28.89%; line-gap-override: 0%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial Bold"), local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 109.84%; ascent-override: 89.59%; descent-override: 26.59%; line-gap-override: 0%;
}

/* Variables --------------------------------------------------------------- */
:root {
  --ink: #1a1815;                       /* texte (Figma) */
  --brand: #e3184b;                     /* rouge du logo */
  --btn-bg: rgba(26, 24, 21, .6);       /* bouton (Figma) */
  --btn-bg-hover: rgba(26, 24, 21, .86);
  --floor: #d8cac3;                     /* sol clair : couleur de secours sous le visuel */

  /* Couleur du logo : noir sur tous les formats (validé) */
  --logo-color: var(--ink);

  --font-title: "Urbanist", "Urbanist Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Manrope", "Manrope Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-btn: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
}

/* Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--floor);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
strong { font-weight: 700; }
.nowrap { white-space: nowrap; }


/* Page : contexte de positionnement du visuel ------------------------------ */
.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  /* Prolongement du mur au-dessus du visuel (couleurs du haut de l'image) */
  background:
    linear-gradient(to right, #b5aaa8, #b8adae 25%, #ada9b0 50%, #a6a5ae 75%, #9da2ad) top / 100% 45% no-repeat,
    var(--floor);

  --pad: clamp(24px, 7vw, 40px);         /* marges latérales */
  /* + zones sûres des écrans à encoche (0 sur les autres appareils) */
  --pad-l: max(var(--pad), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--pad), env(safe-area-inset-right, 0px));
}

/* Logo -------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 7vw, 40px) var(--pad-r) 0 var(--pad-l);
}

.logo {
  position: relative;
  display: inline-block;
  color: var(--logo-color);
  width: clamp(140px, 38vw, 170px);
  border-radius: 2px;
}

.logo__svg {
  width: 100%;
  height: auto;
}

.logo::after {                            /* zone tactile invisible */
  content: "";
  position: absolute;
  inset: -16px -10px;
}

.logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* Grille de contenu — mobile first --------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title bars"
    "scene scene"
    "text  text"
    "cta   cta";
  column-gap: 16px;
  padding: clamp(24px, 6vw, 32px) var(--pad-r) calc(clamp(24px, 8vw, 40px) + env(safe-area-inset-bottom, 0px)) var(--pad-l);   /* bas : 32px @ 400 */
}

/* Titre */
.hero__title {
  grid-area: title;
  align-self: center;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.5rem, 7vw, 2rem);                 /* 24 → 32px */
  line-height: 1.2;
  letter-spacing: .0178em;              /* 0.96px @ 54px (Figma) */
  color: var(--ink);
}

.hero__line { display: inline; }

/* Barres pinceau */
.hero__bars {
  grid-area: bars;
  align-self: center;
  width: clamp(40px, 10vw, 48px);
}

.hero__bars img {
  width: 100%;
  height: auto;
}

/* Zone réservée au visuel (sculpture « COMPOSER ») en mobile / tablette.
   Visuel « fond-mobile » (1122 × 1402, ratio 4:5) affiché sur toute la largeur :
   il est calé pour que le haut du soleil (27,32 % de sa hauteur = 34,14vw)
   arrive en haut de cette zone ; le texte démarre juste sous la sculpture. */
.hero__scene {
  grid-area: scene;
  position: relative;
  --sun-gap: clamp(20px, 6.5vw, 64px);
  height: calc(var(--sun-gap) + 27.9vw);
  pointer-events: none;
}

.scene {
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100vw;
  height: 124.96vw;
  margin-left: -50vw;
  top: calc(var(--sun-gap) - 34.14vw);
}

.scene__img {
  position: absolute;
  inset: 0;
  background-image: url("../img/fond-mobile.jpg");
  background-image: image-set(url("../img/fond-mobile.webp") type("image/webp"), url("../img/fond-mobile.jpg") type("image/jpeg"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Haut du visuel fondu dans le prolongement du mur (fond de .page) */
.scene__img--main {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%);
  mask-image: linear-gradient(to bottom, transparent, #000 5%);
}

/* Reflets miroir : prolongent le mur (en haut) et le sol (en bas / à droite)
   sans couture visible, quel que soit le format d'écran. */
/* (le masque est retourné avec l'élément : son haut local touche la couture) */
.scene__img--top,
.scene__img--top-right {
  top: -100%;
  bottom: calc(100% - 2px);              /* 2px de recouvrement : pas de liseré */
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 45%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 45%);
}

/* (son bas local touche la couture) */
.scene__img--bottom,
.scene__img--bottom-right {
  top: calc(100% - 2px);
  bottom: -100%;
  transform: scaleY(-1);
  /* sol uniquement (s'arrête avant les reflets colorés) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 64%);
  mask-image: linear-gradient(to bottom, transparent 60%, #000 64%);
}

.scene__img--top,
.scene__img--right,
.scene__img--top-right,
.scene__img--bottom-right {
  display: none;
}

/* Voile clair sur le sol, sous la sculpture : adoucit la texture du béton
   derrière le texte (mobile / tablette) */
.scene__veil {
  position: absolute;
  left: 0;
  right: 0;
  top: 49%;                              /* juste sous les reflets de la sculpture */
  bottom: -300%;
  /* puis s'intensifie vers le bas : le sol se fond dans une brume claire */
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, .28) 5%,
    rgba(255, 255, 255, .28) 15.5%,
    rgba(255, 255, 255, .6) 25.5%,
    rgba(255, 255, 255, .6));
}

/* Texte */
.hero__text {
  grid-area: text;
  justify-self: center;
  max-width: 36em;
  font-size: .9375rem;                  /* 15px */
  line-height: 1.6;
  color: var(--ink);
}

.hero__text p + p { margin-top: 1em; }

/* Bouton */
.hero__cta {
  grid-area: cta;
  justify-self: center;
  margin-top: 28px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .7em 2.1em;
  border: 1.875px solid var(--btn-bg);
  border-radius: 40px;
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--font-btn);
  font-weight: 700;
  font-size: .9375rem;                  /* 15px */
  line-height: 1.5;
  letter-spacing: -.03em;                /* -0.45px @ 15px (Figma) */
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.btn__arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Petits mobiles (< 600px, écran standard) : visuel allégé */
@media (max-width: 599px) and (max-resolution: 1.5dppx) {
  .scene__img {
    background-image: url("../img/fond-mobile-600.jpg");
    background-image: image-set(url("../img/fond-mobile-600.webp") type("image/webp"), url("../img/fond-mobile-600.jpg") type("image/jpeg"));
  }
}

/* ==========================================================================
   Tablette — rendu 840
   ========================================================================== */
@media (min-width: 600px) {
  .page { --pad: clamp(40px, 8.5vw, 96px); }

  .site-header { padding-top: clamp(44px, 7.8vw, 72px); }

  .logo { width: clamp(160px, 22vw, 210px); }

  .hero {
    column-gap: 24px;
    padding-top: clamp(28px, 4.4vw, 48px);
    padding-bottom: calc(clamp(110px, 18vw, 200px) + env(safe-area-inset-bottom, 0px));
  }

  .hero__title {
    font-size: clamp(1.6875rem, 4.6vw, 3rem);          /* 27 → 48px */
  }

  .hero__line { display: block; }

  .hero__bars { width: clamp(44px, 6vw, 64px); }

  .hero__text {
    max-width: 36em;
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
  }

  .hero__text p + p { margin-top: 1.1em; }

  .hero__cta { margin-top: 32px; }

  .btn {
    font-size: 1rem;
    padding: .72em 2.4em;
  }

  .btn__arrow { display: none; }
}

/* ==========================================================================
   Desktop — maquette Figma (1660 × 1086) et rendus 1280 / 1920
   --------------------------------------------------------------------------
   Toute la composition est exprimée en « unités maquette » (--u = 1px Figma),
   recalculées selon la taille de la fenêtre :
   - le visuel paysage est calé en bas à gauche, comme dans Figma ;
   - il remplit la hauteur de l'écran, sans jamais être assez large pour
     que la colonne de texte manque de place ;
   - si l'écran est plus large que le visuel, un reflet miroir prolonge le
     mur et le sol à droite ; s'il est plus haut, idem en haut et en bas.
   ========================================================================== */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .page {
    --vh: max(620px, 100vh);
    --u: min(
      calc(100vw / 1650),
      max(
        calc(var(--vh) / 1087),
        min(calc(100vw / 1869), calc(var(--vh) * 1.15 / 1087))
      )
    );
    --stage-top: calc(var(--vh) - 1087 * var(--u));
    --text-top: clamp(72px, calc(var(--stage-top) + 124 * var(--u)), calc(var(--vh) * .12));
    --title-offset: max(
      calc(101 * var(--u)),
      calc(var(--stage-top) + 225 * var(--u) - var(--text-top))
    );

    min-height: var(--vh);
    background:
      linear-gradient(to right, #a99f9f, #a4a0a5 25%, #9d9da9 50%, #9799a5 75%, #9295a2) top / 100% 45% no-repeat,
      var(--floor);
  }

  @supports (height: 100svh) {
    .page { --vh: max(620px, 100svh); }
  }

  /* Logo : x 41 / y 34, 178 × 16 dans Figma */
  .site-header {
    position: absolute;
    top: max(24px, calc(34 * var(--u)));
    left: max(24px, calc(41 * var(--u)));
    padding: 0;
  }

  .logo { width: clamp(150px, calc(178 * var(--u)), 230px); }

  /* Grille : titre aligné à droite sur x = 1005, colonne de texte à x = 1086 */
  .hero {
    min-height: var(--vh);
    font-size: clamp(.9375rem, calc(16 * var(--u)), 1.125rem);   /* 15 → 18px */
    grid-template-columns:
      calc(1005 * var(--u))
      calc(81 * var(--u))
      min(26.625em, calc(100% - 1086 * var(--u) - 40px));
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title . text"
      "title . cta"
      "title . bars";
    column-gap: 0;
    align-content: start;
    padding: var(--text-top) 0 clamp(20px, 2.5vh, 48px);
  }

  .hero__title {
    justify-self: end;
    align-self: start;
    margin-top: var(--title-offset);
    padding-left: 24px;                  /* marge si le texte est agrandi par l'utilisateur */
    font-size: clamp(2.125rem, calc(54 * var(--u)), 4.5rem);     /* 34 → 72px */
    line-height: 1.2037;                 /* 65px @ 54px */
    text-align: right;
  }

  .hero__text {
    justify-self: stretch;
    max-width: none;
    font-size: 1em;
    line-height: 1.5625;                 /* 25px @ 16px */
    text-align: left;
  }

  .hero__text p + p { margin-top: 1.5625em; }

  .hero__cta {
    justify-self: start;
    margin-top: 1.5625em;
  }

  .btn {
    font-size: clamp(.9375rem, calc(15 * var(--u)), 1.0625rem);  /* 15 → 17px */
    padding: .6em 1.333em;               /* 9px 20px @ 15px */
  }

  /* Barres posées sur le sol, sous le bouton (x 1067 / y 828, 210 × 120) */
  .hero__bars {
    justify-self: start;
    align-self: start;
    width: clamp(150px, calc(210 * var(--u)), 270px);
    margin-top: clamp(32px, calc(170 * var(--u) - 60px), 130px);   /* 110px @ u = 1 */
    margin-left: calc(-19 * var(--u));
  }

  /* Visuel « fond-desktop » (1920 × 1200) : 2005 × 1253 en x -36 / y -168 (unités maquette),
     de sorte que la sculpture tombe au même endroit que dans la maquette Figma */
  .hero__scene {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .scene {
    left: calc(-36 * var(--u));
    top: calc(var(--stage-top) - 168 * var(--u));
    width: calc(2005 * var(--u));
    height: calc(1253 * var(--u));
    margin: 0;
  }

  .scene__img {
    background-image: url("../img/fond-desktop.jpg");
    background-image: image-set(url("../img/fond-desktop.webp") type("image/webp"), url("../img/fond-desktop.jpg") type("image/jpeg"));
  }

  .scene__img--main {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scene__img--top { display: block; }

  .scene__img--right,
  .scene__img--top-right,
  .scene__img--bottom-right {
    display: block;
    left: calc(100% - 2px);
    right: -100%;
  }

  .scene__veil { display: none; }

  .scene__img--right { transform: scaleX(-1); }
  .scene__img--top-right,
  .scene__img--bottom-right { transform: scale(-1, -1); }
}

/* ==========================================================================
   Préférences utilisateur (n'affectent pas le rendu standard)
   ========================================================================== */

/* Pas d'animation si l'utilisateur l'a demandé */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Contraste renforcé demandé par le système */
@media (prefers-contrast: more) {
  :root {
    --btn-bg: #1a1815;
    --btn-bg-hover: #000;
  }
}

/* Mode contrasté Windows (couleurs forcées) */
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .btn:focus-visible,
  .logo:focus-visible { outline-color: Highlight; }
}

/* Impression : texte seul, lisible, sans visuel de fond */
@media print {
  body { background: #fff; }
  .page { min-height: 0; overflow: visible; }
  .hero__scene, .hero__bars { display: none; }
  .site-header { position: static; padding: 0 0 24px; }
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .hero__title { margin: 0 0 24px; text-align: left; font-size: 24pt; }
  .hero__text { font-size: 11pt; text-align: left; max-width: none; }
  .hero__cta { margin-top: 16px; }
  .btn { color: #000; background: none; border-color: #000; }
  .btn__arrow { display: none; }
}