/* Easy-DESC — page de garde.
   Meme identite que l'application : les valeurs ci-dessous sont recopiees telles quelles de
   src/index.css. Si l'une bouge un jour dans l'application, elle doit bouger ici. */
:root {
  --accent: #2f8f57; /* vert primaire */
  --accent-strong: #26794a; /* survol / presse */
  --accent-soft: #eaf5ee;
  --text: #17203a; /* encre */
  --muted: #667085; /* texte secondaire */
  --border: #e7e9ee;
  --bg: #ffffff;
  --bg-canvas: #e6efe8; /* le vert tres doux du "bureau" de l'app */
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
  --largeur: 1120px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}
.contenu-etroit {
  max-width: 760px;
}
.centre {
  text-align: center;
}

/* ---- En-tete ------------------------------------------------------------------------- */
/* Pose PAR-DESSUS l'illustration : le pixel art commence en haut de l'ecran, sans bandeau
   blanc qui viendrait le couper. */
.entete {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 20px 24px;
}
.marque {
  display: block;
  color: #fff; /* le mot « Easy » suit cette couleur (currentColor dans le SVG integre) */
  /* Halo BLANC et non ombre noire : sur une illustration claire et bariolee, une ombre noire
     salit le logo, alors qu'un halo blanc le decolle en restant invisible. */
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.16));
}
.logo {
  display: block;
  width: 168px;
  height: auto;
  aspect-ratio: 318 / 62;
}
.lien-connexion {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(23, 32, 58, 0.28);
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}
.lien-connexion:hover {
  background: rgba(23, 32, 58, 0.5);
}

/* ---- Accroche ------------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
}
/* La photo ne s'arrete pas net : elle se dissout en carres de 8 px de moins en moins nombreux,
   comme sur Cofounder. Deux couches de masque — un aplat pour tout le haut, le motif pour la
   zone de fondu — additionnees l'une a l'autre.
   Aucune retouche de l'illustration n'a ete necessaire : c'est du masquage, pas du montage. */
.hero-image {
  -webkit-mask-image: linear-gradient(#000, #000), url('assets/fondu.png');
  mask-image: linear-gradient(#000, #000), url('assets/fondu.png');
  -webkit-mask-size: 100% calc(100% - 80px), 512px 80px;
  mask-size: 100% calc(100% - 80px), 512px 80px;
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
  -webkit-mask-composite: source-over;
  mask-composite: add;

  position: relative;
  width: 100%;
  /* La hauteur est la PLUS GRANDE de deux valeurs :
       - la hauteur naturelle de l'illustration, quand la fenetre est large (aucun recadrage) ;
       - un ecran plein plus 80 px, sinon.
     Dans les deux cas le fondu tombe SOUS la ligne de flottaison : le premier ecran ne montre
     que l'image, et la transition se decouvre en descendant. */
  height: max(calc(100svh + 80px), calc(100vw / 1.7895));
  max-height: 132svh;
  overflow: hidden;
  background: #7fc4ee; /* le bleu du ciel : evite le flash blanc avant l'image */
}
.hero-image img,
.hero-image canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-image canvas {
  opacity: 0; /* revele seulement quand le vent tourne (cf. vent.js) */
  transition: opacity 0.4s;
}
.hero-image canvas.actif {
  opacity: 1;
}

/* Le texte se pose EN HAUT A GAUCHE, sur le ciel : c'est la seule zone vraiment calme de
   l'illustration. Pose en bas, il tombait sur les barrieres et le panneau — deux messages qui
   se disputaient le meme espace — et il fallait un voile si sombre qu'il tuait le pixel art. */
.hero-texte {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(88px, 13vh, 150px) 24px 0;
}
.hero-texte h1 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(28px, 3.9vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  /* Halo blanc : il epaissit la lettre sans l'assombrir, la ou une ombre noire creusait un
     lisere sale au contact du ciel. */
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.12),
    0 1px 16px rgba(12, 26, 20, 0.3);
}
.sous-titre {
  margin: 16px 0 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.1),
    0 1px 12px rgba(12, 26, 20, 0.3);
}

/* ---- Boutons ------------------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.actions-centrees {
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.1s,
    border-color 0.15s;
}
.btn:active {
  transform: translateY(1px);
}
.btn-principal {
  color: #fff;
  background: var(--accent);
  box-shadow: var(--shadow-md);
}
.btn-principal:hover {
  background: var(--accent-strong);
}
/* Secondaire = discret, comme demande : c'est une porte de sortie, pas une deuxieme offre. */
.btn-secondaire {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}
.btn-secondaire:hover {
  background: rgba(255, 255, 255, 0.22);
}
.btn-sur-fonce {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  backdrop-filter: none;
}
.btn-sur-fonce:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---- Sections ------------------------------------------------------------------------ */
.section {
  padding: clamp(56px, 7vw, 92px) 0;
}
h2 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.texte-large {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* Ouverture : le paragraphe qui dit ce que fait le logiciel, avant d'entrer dans le detail. */
.section-ouverture {
  border-bottom: 1px solid var(--border);
}
.chapeau {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  font-weight: 500;
}
.chapeau-suite {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- Un point = un texte + une illustration ------------------------------------------ */
/* Les rangs alternent d'eux-memes : ajouter ou retirer un point ne demande aucune classe
   supplementaire, et l'ordre reste celui du HTML — donc celui de la lecture au clavier. */
.point {
  padding: clamp(48px, 6vw, 78px) 0;
  border-bottom: 1px solid var(--border);
}
.point:nth-of-type(even) {
  background: var(--bg-canvas);
}
.point-grille {
  max-width: 1200px; /* plus large que le reste du site : les captures y gagnent en lisibilite */
  display: grid;
  /* Le média prend la plus grande part : ce sont des captures, il faut pouvoir les lire. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.point:nth-of-type(even) .point-texte {
  order: 2;
}
.point:nth-of-type(even) .point-grille {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); /* le média reste la grande colonne */
}
.point-texte p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.point-texte p:first-of-type {
  margin-top: 16px;
}

.media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Un vrai média garde ses proportions : ce sont des captures de l'application, les rogner
   couperait des boutons ou des libellés. Le 16/10 ne sert qu'aux emplacements vides. */
.media-rempli {
  aspect-ratio: auto;
  display: block;
}
.media-rempli {
  position: relative;
  cursor: zoom-in;
}
/* Pastille « agrandir » : dit qu'on peut cliquer, sans masquer la capture. */
.media-agrandir {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(23, 32, 58, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.media-rempli:hover .media-agrandir {
  opacity: 1;
}

/* ---- Vidéo en grand ------------------------------------------------------------------- */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 56px);
  background: rgba(10, 14, 26, 0.88);
  cursor: zoom-out;
  animation: visionneuse-entree 0.18s ease-out;
}
.visionneuse video {
  width: min(100%, calc((100vh - 2 * clamp(12px, 4vw, 56px)) * 16 / 9));
  max-height: 100%;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #000;
  cursor: default;
}
/* Une capture en grand : entière, jamais plus grande que l'écran. */
.visionneuse img {
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(12px, 4vw, 56px));
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.visionneuse-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.visionneuse-fermer:hover {
  background: rgba(255, 255, 255, 0.24);
}
@keyframes visionneuse-entree {
  from {
    opacity: 0;
  }
}
.media img,
.media video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* jamais de rognage, meme si une ancienne regle imposait un cadre */
}
.media-attente {
  font-size: 13px;
  font-weight: 600;
  color: #98a2b3;
}

/* ---- Accès et tarifs ------------------------------------------------------------------ */
.section-contact {
  background: #fff;
}
.section-contact .actions {
  margin-top: 26px;
}
.btn-sur-clair {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  backdrop-filter: none;
}
.btn-sur-clair:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---- Pied ---------------------------------------------------------------------------- */
.pied {
  padding: 28px 0;
  background: var(--text);
  color: rgba(255, 255, 255, 0.75);
}
.pied-contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.pied-logo {
  color: #fff;
  width: 130px;
}
.pied-mention {
  margin: 0;
  font-size: 14px;
}
.lien-connexion--pied {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---- Petits écrans ------------------------------------------------------------------- */
@media (max-width: 860px) {
  .point-grille,
  .point:nth-of-type(even) .point-grille {
    grid-template-columns: 1fr;
  }
  .point:nth-of-type(even) .point-texte {
    order: 0; /* en colonne, le texte precede toujours son illustration */
  }
}

@media (max-width: 720px) {
  .hero-image {
    aspect-ratio: 4 / 5; /* on recadre : en portrait, l'image large ne montrerait rien */
    min-height: 0;
    max-height: none;
  }
  .hero-texte {
    padding-top: 96px;
  }
  .btn {
    flex: 1 1 100%;
  }
  .pied-contenu {
    justify-content: center;
    text-align: center;
  }
}