/* ===========================================================================
   Fenody, landing page.

   Les jetons ci-dessous sont repris a l'identique du depot malak.be, sur
   decision de Malak du 2 septembre 2026 : la palette malak.be sert tant qu'une
   charte Fenody n'existe pas. Ils vivent tous dans ce seul bloc, pour qu'un
   changement de charte se fasse a un seul endroit.
   =========================================================================== */

:root {
  --ink: #2A1530;
  --muted: #6E6478;
  --body-text: #3C3444;
  --footer-ink: #1A1623;
  --placeholder: #A79DAF;
  --page-bg: #E4ECF3;
  --lilac: #F7F1FB;
  --blue: #EFF5FA;
  --modal-surface: #FDFAF3;
  /* Bande de fond du bloc description, ajoutee le 2 septembre 2026 : centre sur
     le fond de page, le texte flottait sans rien pour le poser. */
  --surface: #FFFFFF;
  --grad-pink: #FBD4DC;
  --grad-peach: #FFE9D4;
  --grad-lilac: #DFD0F2;
  --highlight-blue-grey: #C3D0DD;
  --accent-pink: #FF4D8F;
  --accent-orange: #F15B3E;
  --border-hairline: rgba(42, 21, 48, 0.08);
  --border-default: rgba(42, 21, 48, 0.14);
  --border-strong: rgba(42, 21, 48, 0.2);
  --toggle-track: rgba(42, 21, 48, 0.05);
  --modal-scrim: rgba(42, 21, 48, 0.45);

  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'General Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --gutter: 6vw;
  /* Largeur du conteneur commun a l'en-tete, au bloc principal, aux systemes,
     a la description et au pied de page. Une seule valeur pour que le logo,
     le titre et les cartes partagent le meme bord gauche. */
  --content: 1080px;
  /* Hauteur reservee a l'en-tete, qui ne prend plus de place dans le flux.
     Elle porte aussi l'espace entre le logo et le titre : l'en-tete lui-meme
     mesure environ 93px, le reste est du blanc voulu. Augmentee le 2 septembre
     2026, le logo et le titre etaient trop serres. */
  --header-h: 152px;
  /* Largeur maximale d'un paragraphe, pour que la ligne reste lisible meme
     quand le conteneur est plus large. */
  --measure: 700px;
}

/* ===== Polices, servies par le site =====
   Inter est distribuee par Google Fonts comme police variable : un seul fichier
   couvre toutes les graisses, d'ou la plage `font-weight: 100 900`. General Sans
   vient de Fontshare, une graisse par fichier.
   `font-display: swap` affiche le texte dans la police de repli pendant le
   chargement plutot que de laisser un blanc. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/general-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/general-sans-700.woff2') format('woff2');
}

/* ===== Base ===== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--body-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; font-size: inherit; }
img { max-width: 100%; height: auto; }

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Bouton qui doit ressembler a un lien : les mentions legales ouvrent une
   fenetre modale, pas une page, donc c'est un <button> et pas un <a>. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
.linklike:hover { text-decoration-color: currentColor; }
.linklike--inline { display: inline-block; margin-top: 8px; font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--accent-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== En-tete ===== */

/* Pose au-dessus du bloc principal, sans fond a lui : le degrade demarre en
   haut de page et passe derriere le logo, comme sur malak.be. La hauteur qu'il
   n'occupe plus dans le flux est rendue par le remplissage haut de .hero, d'ou
   le jeton --header-h. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--gutter);
  /* La marge laterale fait partie de la largeur ici, alors que les sections plus
     bas la portent sur un parent pleine largeur. Sans ce calcul, le logo se
     retrouve decale d'une gouttiere vers la droite par rapport au titre. */
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
}
.site-header__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
}
.site-header__logo img { display: block; width: 176px; height: auto; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--toggle-track);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.lang-switch__current,
.lang-switch__other {
  display: block;
  padding: 5px 13px;
  border-radius: 999px;
}
.lang-switch__current { background: #FFFFFF; color: var(--ink); }
.lang-switch__other { color: var(--muted); }
.lang-switch__other:hover { color: var(--ink); }

/* ===== Bloc principal ===== */

.hero {
  padding: var(--header-h) var(--gutter) 96px;
  background: linear-gradient(120deg, #F7F1FB 0%, #FBD4DC 25%, #FFE9D4 45%, #DFD0F2 70%, #F7F1FB 100%);
  background-size: 300% 300%;
  animation: gradientDrift 22s ease-in-out infinite alternate;
}
@keyframes gradientDrift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

.hero__inner { max-width: var(--content); margin: 0 auto; }

/* Vit dans l'en-tete depuis le 2 septembre 2026, plus dans le bloc principal. */
.badge {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: balance;
}

.hero__lead {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.65;
  max-width: var(--measure);
  color: var(--body-text);
}

/* ===== Formulaire ===== */

.signup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.signup__fields { display: flex; gap: 10px; flex-wrap: wrap; }
.signup__fields input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ink);
}
.signup__fields input::placeholder { color: var(--placeholder); }
.signup__fields input:focus { border-color: var(--border-strong); }

/* Piege a robot. Retire du flux et de la tabulation, jamais visible ni lu. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.signup__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.signup__consent input {
  flex: none;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
}

/* Sert deux fois : le lien d'ancre du bloc principal et le bouton de
   soumission du formulaire. D'ou display: inline-block, sans quoi un <a>
   ignorerait le remplissage vertical. */
.btn {
  display: inline-block;
  align-self: flex-start;
  padding: 14px 26px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.form-success,
.form-error { max-width: 560px; }
.form-success {
  padding: 20px 22px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--border-hairline);
  color: var(--ink);
}
.form-success strong { font-family: var(--font-display); font-size: 18px; }
.form-success p { margin: 8px 0 0; color: var(--body-text); }
.form-error {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--accent-orange);
}

/* ===== Systemes ===== */

.products { padding: 88px var(--gutter) 88px; }
.products__inner { max-width: var(--content); margin: 0 auto; }
/* Centre depuis le 2 septembre 2026, demande de Malak. */
.products .eyebrow { text-align: center; }
.products__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  background: var(--lilac);
}
.product__kind {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.product__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.product__body { margin: 0; font-size: 15px; }
.pill {
  align-self: flex-start;
  /* Pousse la pastille en bas de la carte : les deux cartes n'ont pas la meme
     longueur de texte, sans cela leurs pastilles ne seraient pas alignees. */
  margin-top: auto;
  padding-top: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--border-hairline);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* ===== Bloc description =====
   Porte le referencement et la lecture par les moteurs generatifs. Texte plein,
   jamais une image. */

.about {
  padding: 80px var(--gutter);
  background: var(--surface);
}
.about__inner { max-width: var(--content); margin: 0 auto; }
/* Centre depuis le 2 septembre 2026, demande de Malak. Le paragraphe garde sa
   largeur de lecture, il est simplement centre dans le conteneur. */
.about .eyebrow { text-align: center; }
/* ===== Formulaire early bird =====
   Section a part entiere depuis le 2 septembre 2026 : le bloc principal n'y
   renvoie plus que par une ancre. Le panneau colore lui donne la presence qui
   manquerait a un formulaire pose seul en bas de page. */

.signup-section { padding: 80px var(--gutter) 96px; }
/* Colonne unique depuis le retrait de l'animation, le 2 septembre 2026. Le
   panneau est ramene a la largeur de lecture et centre dans la page : a la
   largeur du conteneur il laissait le formulaire echoue sur un cote. Son
   contenu, lui, reste aligne a gauche. */
.signup-section__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 32px 36px;
  border: 1px solid var(--border-hairline);
  border-radius: 24px;
  background: var(--lilac);
  /* L'ancre ne doit pas coller le titre au bord haut de la fenetre. */
  scroll-margin-top: 24px;
}
.signup-section__form { min-width: 0; }
/* Seul l'intitule est centre, demande de Malak du 2 septembre 2026. Le
   formulaire lui-meme reste aligne a gauche. */
.signup-section .eyebrow { text-align: center; }
.signup { max-width: none; }

@media (max-width: 560px) {
  .signup-section__inner { padding: 26px 22px 30px; }
}

.about__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  color: var(--ink);
}

/* ===== Pied de page ===== */

.site-footer {
  padding: 32px var(--gutter) 48px;
  border-top: 1px solid var(--border-hairline);
  color: var(--muted);
  font-size: 13px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  max-width: var(--content);
  margin: 0 auto;
}
.site-footer__legal,
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.site-footer__links a { display: inline-flex; align-items: center; gap: 7px; }
.site-footer__links a:hover,
.site-footer__legal button:hover { color: var(--footer-ink); }

/* ===== Fenetres modales ===== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 20px;
  background: var(--modal-scrim);
}
.modal[hidden] { display: none; }

.modal__panel {
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 30px 34px;
  border-radius: 22px;
  background: var(--modal-surface);
  color: var(--body-text);
}
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.modal__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
.modal__close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--toggle-track);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__body h3 {
  margin: 22px 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.modal__body p { margin: 0; font-size: 14px; }

/* ===== Page de remerciement ===== */

.page-simple .hero { padding-bottom: 72px; }

/* L'en-tete etant hors du flux, la place qu'il occupe est reservee a la main
   par --header-h. Toute modification de la taille du logo ou du remplissage de
   l'en-tete doit s'accompagner d'un ajustement de cette valeur, sinon le titre
   vient se glisser sous le logo. */
@media (max-width: 780px) {
  :root { --header-h: 132px; }
  .site-header__logo img { width: 146px; }
}

@media (max-width: 560px) {
  :root { --header-h: 116px; }
  .site-header { padding: 18px var(--gutter); }
  .site-header__logo img { width: 132px; }
  .hero { padding-bottom: 72px; }
  .products { padding: 64px var(--gutter); }
  .about { padding: 64px var(--gutter); }
  .signup-section { padding: 60px var(--gutter) 72px; }
  .btn { align-self: stretch; text-align: center; }
  .hero .btn { display: block; text-align: center; }
}

/* ===========================================================================
   Animations
   Ajoutees le 2 septembre 2026, demande de Malak. Tout est en CSS, aucune
   bibliotheque, aucun JavaScript, et tout se desactive proprement pour un
   visiteur qui a demande a son systeme de reduire les animations.
   =========================================================================== */

/* Entree en cascade du bloc principal : badge, titre, paragraphe, bouton.
   L'etat de depart est pose sur l'element lui-meme, et `forwards` fige l'etat
   d'arrivee. Le contenu reste donc visible une fois l'animation terminee, meme
   si la page est mise en arriere-plan pendant qu'elle joue. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__lead,
.hero .btn {
  opacity: 0;
  animation: riseIn 0.7s cubic-bezier(0.22, 0.7, 0.28, 1) forwards;
}
.hero__lead { animation-delay: 0.42s; }
.hero .btn  { animation-delay: 0.58s; }

/* Revelation du titre mot par mot. Le rang de chaque mot est pose dans le HTML
   au moment du build (--i), c'est lui qui echelonne les departs. */
@keyframes wordIn {
  from { opacity: 0; filter: blur(9px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
.hero__title .word {
  display: inline-block;
  opacity: 0;
  animation: wordIn 0.72s cubic-bezier(0.22, 0.7, 0.28, 1) forwards;
  animation-delay: calc(0.16s + var(--i) * 0.07s);
}

/* Un visiteur qui a demande moins de mouvement voit la meme page, complete et
   lisible, sans une seule animation. L'avion reste pose en vol, l'enveloppe est
   entierement dessinee. */
@media (prefers-reduced-motion: reduce) {
  .hero__lead,
  .hero .btn,
  .hero__title .word {
    opacity: 1;
    animation: none;
    transform: none;
    filter: none;
  }
}