@import url("/assets/css/tokens.css");

/* ── Polices, servies depuis notre serveur ─────────────────── */
@font-face{font-family:"Sligoil Micro";src:url("/assets/fonts/Sligoil-Micro.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sligoil Micro";src:url("/assets/fonts/Sligoil-MicroMedium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans repli";src:local("Arial"),local("Helvetica");
  size-adjust:101%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Sligoil Micro repli";src:local("Courier New"),local("monospace");
  size-adjust:104%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-ancre);color:var(--c-blanc);
  font-family:var(--f-texte);font-size:var(--t-corps);line-height:var(--i-corps);
  text-wrap:pretty}
h1,h2,p{margin:0}
h1,h2{text-wrap:balance}

/* ── La porte : deux territoires égaux, fondus l'un dans l'autre.
      Aucune animation, aucun état au survol qui déplace quoi que ce soit. ── */
.porte{display:grid;height:100svh;overflow:hidden;
  grid-template-columns:1fr 1fr;
  background:linear-gradient(90deg,
    var(--c-enbro) 0%,
    var(--c-enbro) calc(50% - var(--porte-fondu)),
    var(--c-earth) calc(50% + var(--porte-fondu)),
    var(--c-earth) 100%)}

.moitie{display:flex;flex-direction:column;justify-content:center;
  gap:var(--e-4);padding:var(--e-7);
  container-type:inline-size;min-width:0;min-height:0}
.moitie--earth{--h-enseigne:clamp(2.2rem,17cqw,6rem)}

.marque{font-family:var(--f-display);font-size:var(--t-annexe);
  letter-spacing:var(--l-large);
  color:color-mix(in srgb,var(--c-blanc) 82%,transparent)}

.enseigne{--h-enseigne:clamp(2.4rem,19cqw,6.5rem);margin:0}
.enseigne img{display:block;height:var(--h-enseigne);width:auto;max-width:100%}

.metier{max-width:34ch;font-size:var(--t-h3);line-height:var(--i-titre);
  color:color-mix(in srgb,var(--c-blanc) 82%,transparent)}

.pied{margin-block-start:var(--e-3)}

.entrer{display:inline-flex;align-items:baseline;gap:var(--e-3);
  font-weight:var(--g-600);font-size:var(--t-h3);color:var(--c-blanc);
  text-decoration:none;padding-block:var(--e-3);
  border-bottom:var(--b-epais) solid var(--c-blanc)}
.entrer:hover{border-bottom-color:color-mix(in srgb,var(--c-blanc) 50%,transparent)}
.entrer .fleche{font-family:var(--f-display);margin-inline-start:var(--e-2)}
.entrer:focus-visible{outline:var(--b-epais) solid var(--c-blanc);outline-offset:var(--e-2)}

/* ── Grain : 3 %, inerte ───────────────────────────────────── */
.grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23b)'/></svg>")}

/* ── Empilés : le fondu devient horizontal, tout tient en un écran ── */
@media (max-width:56rem){
  .porte{grid-template-columns:1fr;grid-template-rows:1fr 1fr;
    background:linear-gradient(180deg,
      var(--c-enbro) 0%,
      var(--c-enbro) calc(50% - var(--porte-fondu)),
      var(--c-earth) calc(50% + var(--porte-fondu)),
      var(--c-earth) 100%)}
  .moitie{padding:var(--e-5);gap:var(--e-3)}
  .moitie--earth{--h-enseigne:clamp(2.1rem,16cqw,4.5rem)}
  .enseigne{--h-enseigne:clamp(2.1rem,17cqw,4.5rem)}
  .metier{font-size:var(--t-corps);max-width:40ch}
  .entrer{font-size:var(--t-corps)}
}
@media (max-width:56rem) and (max-height:44rem){
  .moitie{padding:var(--e-4);gap:var(--e-2)}
  .marque{line-height:1}
  .metier{font-size:var(--t-annexe);max-width:36ch}
  .enseigne{--h-enseigne:clamp(1.7rem,12cqw,3rem)}
  .moitie--earth{--h-enseigne:clamp(1.7rem,11cqw,3rem)}
}