/* =========================================================
   FIZZE — fizze.ch

   Feuille unique et autonome. Aucune dépendance externe.
   ========================================================= */

:root{
  /* Couleurs — primaire */
  --fz-blue: #2563EB;
  --fz-blue-hover: #1D4ED8;
  --fz-deep-bg: #0B1230;

  /* Couleurs — neutres */
  --fz-white: #FFFFFF;
  --fz-surface: #F9FAFB;
  --fz-border: #E5E7EB;

  /* Couleurs — texte */
  --fz-text-main: #111827;
  --fz-text-muted: #6B7280;
  --fz-text-on-deep: #E7ECFB;

  /* Typographie */
  --fz-font-heading: Arial, Helvetica, sans-serif;
  --fz-font-body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fz-body: clamp(1rem, 1.2vw, 1.125rem);

  /* Conteneur */
  --fz-container: 1440px;

  /* Rayons */
  --fz-radius-sm: 6px;

  /* Ombres */
  --fz-shadow-cta: 0 6px 16px -6px rgba(37,99,235,0.45);
  --fz-shadow-cta-hover: 0 10px 22px -6px rgba(29,78,216,0.55);
  --fz-shadow-float: 0 30px 60px -24px rgba(11,18,48,0.35);

  /* Rythme */
  --fz-ease: cubic-bezier(.4,0,.2,1);
  --fz-motion-in: 640ms;
}

/* ---------------------------------------------------------
   DM Sans, sous-ensemble latin, auto-hébergée.
   Copyright 2014 The DM Sans Project Authors.
   SIL Open Font License 1.1 — texte complet : ../fonts/OFL.txt
--------------------------------------------------------- */
@font-face{
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-latin-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   Base
--------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

html{
  /* La page tient dans une hauteur d'écran sur la plupart des formats ;
     le pied de page reste collé en bas quand elle est plus courte. */
  min-height: 100%;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fz-font-body);
  font-size: var(--fz-body);
  line-height: 1.6;
  color: var(--fz-text-main);
  background: var(--fz-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg{ display: block; max-width: 100%; height: auto; }
p{ margin: 0; }
a{ color: inherit; }

.lp-container{
  width: 100%;
  max-width: var(--fz-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ---------------------------------------------------------
   Accessibilité — focus visible et lien d'évitement
--------------------------------------------------------- */
a:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--fz-blue);
  outline-offset: 3px;
  border-radius: var(--fz-radius-sm);
}

.lp-skip-link{
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--fz-blue);
  color: #fff;
  font-family: var(--fz-font-heading);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--fz-radius-sm);
  transition: top .2s var(--fz-ease);
}
.lp-skip-link:focus{ top: 12px; }

/* ---------------------------------------------------------
   En-tête
--------------------------------------------------------- */
.lp-header{
  flex-shrink: 0;
  border-bottom: 1px solid var(--fz-border);
}

.lp-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.lp-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;               /* cible tactile */
  text-decoration: none;
  color: var(--fz-text-main);
}
.lp-brand__mark{ width: 30px; height: 30px; flex-shrink: 0; }
.lp-brand__word{
  font-family: var(--fz-font-heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #0B1220;
}

.lp-header__mail{
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* cible tactile */
  padding-inline: 12px;
  font-family: var(--fz-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--fz-text-muted);
  text-decoration: none;
  border-radius: var(--fz-radius-sm);
  white-space: nowrap;
  transition: color .18s var(--fz-ease), background .18s var(--fz-ease);
}
.lp-header__mail:hover{ color: var(--fz-text-main); background: var(--fz-surface); }

/* ---------------------------------------------------------
   Zone principale
--------------------------------------------------------- */
.lp-main{
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

.lp-hero{
  width: 100%;
  /* CENTRAGE OPTIQUE. `.lp-main` centre le hero verticalement : tout retrait
     appliqué symétriquement est repris pour moitié par le centrage, et ne
     déplace donc la composition que de la moitié de sa valeur. Seule
     l'ASYMÉTRIE des deux paddings fait réellement remonter le contenu — le
     décalage vaut la moitié de leur différence. Les valeurs ci-dessous posent
     la composition environ 25 px au-dessus du centre géométrique, ce que l'œil
     lit comme centré. Sous 1024 px la composition dépasse la hauteur d'écran :
     le centrage n'a plus de jeu et seul le padding haut s'applique. */
  padding-block: clamp(40px, 3.6vw, 52px) clamp(56px, 11.8vw, 170px);
}

.lp-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.lp-hero__copy,
.lp-hero__visual{
  animation: lpRise var(--fz-motion-in) var(--fz-ease) both;
}
.lp-hero__visual{ animation-delay: 90ms; }

@keyframes lpRise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

/* Sur-titre — pastille */
.lp-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 22px;
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 30px;
  font-family: var(--fz-font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fz-blue);
}
.lp-eyebrow::before{
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fz-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.16);
  animation: lpPulse 2.6s var(--fz-ease) infinite;
}

@keyframes lpPulse{
  0%, 100%{ box-shadow: 0 0 0 3px rgba(37,99,235,0.16); }
  50%{ box-shadow: 0 0 0 6px rgba(37,99,235,0.06); }
}

.lp-title{
  margin: 0;
  max-width: 11ch;
  font-family: var(--fz-font-heading);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.6rem + 3.2vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fz-text-main);
}
.lp-title__accent{
  background: linear-gradient(100deg, var(--fz-blue) 20%, #5B8DFF 55%, var(--fz-blue) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-lede{
  margin-top: 24px;
  max-width: 46ch;
  font-size: 1.0625rem;
  color: var(--fz-text-muted);
}

.lp-actions{ margin-top: 34px; }

.lp-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--fz-font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 0;
  border-radius: var(--fz-radius-sm);
  transition: background .18s var(--fz-ease), box-shadow .18s var(--fz-ease),
              transform .18s var(--fz-ease);
}
.lp-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }

.lp-btn--primary{
  background: var(--fz-blue);
  color: #fff;
  box-shadow: var(--fz-shadow-cta);
}
.lp-btn--primary:hover{
  background: var(--fz-blue-hover);
  box-shadow: var(--fz-shadow-cta-hover);
  transform: translateY(-1px);
}
.lp-btn--primary:active{ transform: translateY(0); }

/* ---------------------------------------------------------
   Panneau marine — signal de transition
--------------------------------------------------------- */
.lp-panel{
  display: grid;
  justify-items: center;
  gap: clamp(24px, 2.6vw, 32px);
  padding: clamp(44px, 5vw, 72px) clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, var(--fz-deep-bg) 0%, #0E1740 100%);
  border-radius: 16px;
  box-shadow: var(--fz-shadow-float);
}

.lp-panel__mark{
  width: clamp(154px, 18.5vw, 231px);
  height: auto;
}

.lp-panel__text{
  font-family: var(--fz-font-heading);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--fz-text-on-deep);
}

/* ---------------------------------------------------------
   Pied de page
--------------------------------------------------------- */
.lp-footer{
  flex-shrink: 0;
  border-top: 1px solid var(--fz-border);
}

.lp-footer__inner{
  display: flex;
  align-items: center;
  padding-block: 24px;
  font-size: 0.875rem;
  color: var(--fz-text-muted);
}

/* ---------------------------------------------------------
   Adaptations — la composition passe sur une colonne dès que
   les deux colonnes ne peuvent plus respirer.
--------------------------------------------------------- */
@media (max-width: 1023px){
  .lp-hero__grid{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(44px, 7vw, 64px);
    justify-items: start;
  }
  .lp-title{ max-width: 16ch; }
  .lp-hero__visual{ width: 100%; }
  .lp-panel__mark{ width: clamp(154px, 32.4vw, 216px); }
}

@media (max-width: 599px){
  .lp-hero{ padding-block: 44px 52px; }
  .lp-title{ max-width: 100%; }
  .lp-lede{ margin-top: 20px; }
  .lp-actions{ margin-top: 28px; }
  .lp-btn{ width: 100%; justify-content: center; }
}

@media (max-width: 379px){
  .lp-header__mail{ padding-inline: 8px; font-size: 13px; }
  .lp-eyebrow{ font-size: 0.75rem; letter-spacing: 0.04em; }
  .lp-panel{ padding-inline: 20px; }
}

/* ---------------------------------------------------------
   Réduction de mouvement — le mouvement n'est jamais porteur
   d'information, il peut donc être neutralisé entièrement.
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}