:root{
  --bg: #ffffff;
  --text: #0f0f0f;

  --logo-max: 520px;

  /* Bloc texte “original” = moins large */
  --domain-width: 400px;

  /* Décalage léger vers la droite (desktop seulement) */
  --block-shift: 14px;

  /* Picto */
  --icon-size: 40px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Centre global */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(36px, 7vh, 90px) 20px;
}

/* Stack = référence d’alignement */
.stack{
  width: min(var(--logo-max), 92vw);
}

/* Logo */
figure.lockup{
  margin:0;
  line-height:0;
}

/* Wrapper de CROP anti “traits 1px” Chrome/Edge */
.video-crop{
  overflow:hidden;
  background: var(--bg);
  /* Le crop réel (évite la couture verticale) */
  clip-path: inset(2px);
  -webkit-clip-path: inset(2px);
}

/* Vidéo */
video.logo{
  display:block;
  width: calc(100% + 2px);   /* déborde de 1px de chaque côté */
  margin-left: -1px;

  max-width: var(--logo-max);
  height:auto;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  transform: scale(2) translateZ(0);
  transform-origin: center center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

video.logo:focus,
video.logo:focus-visible{
  outline:none !important;
}

/* On neutralise complètement l'ancien slogan (si jamais réintroduit) */
.tagline{ display:none; }

/* Bloc sous logo :
   - centré sous le logo
   - puis léger shift vers la droite (desktop) */
.below-logo{
  margin-top: clamp(18px, 4vh, 44px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;

  transform: translateX(var(--block-shift));
}

/* Texte : “pêle-mêle” justifié, noir, sans trous */
.domain-box{
  width: min(var(--domain-width), 100%);
  color: var(--text);

  text-align: justify;
  text-justify: inter-word;

  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  word-spacing: 0.35em;
}

/* Force la justification */
.domain-box::after{
  content:"";
  display:inline-block;
  width:100%;
}

.domain-box .w{
  display:inline;
  white-space:nowrap;
  margin-right: 0.35em;
}

.domain-box .w strong{
  font-weight: 800;
}

/* Picto : centré sous le texte, fond transparent */
.contact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: calc(var(--icon-size) + 18px);
  height: calc(var(--icon-size) + 18px);

  border-radius: 999px;
  background: transparent;
  border: 0;                 /* supprime le “cadre gris” */
  text-decoration:none;
}

.contact-icon img{
  width: var(--icon-size);
  height: var(--icon-size);
  display:block;
}

.contact-icon:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 4px;
}

/* Mobile / iPhone :
   - on ANNULE le shift sinon ça n’est plus centré écran
   - on garde le bloc bien centré */
@media (max-width: 720px){
  .below-logo{
    transform: none; /* centrage iPhone */
  }
  :root{
    --block-shift: 0px;
  }
}