/* Contact, section nuit (v5) : la trace, la lumière du verre sans l’objet, occupe la droite de la
   section sur toute sa hauteur. Titre sur toute la largeur, l’offre et le lien principal à gauche,
   le QR code à droite, la réassurance et le filtre en bas. Voir docs/PLAN.md, 6.6, 7.6, 17 et 18. */

.contact {
  position: relative;
  overflow-x: clip;
  padding-block: var(--pas);
  border-top: 1px solid var(--nuit-filet);
}

/* Petits écrans (v7) : la trace couvre toute la section, comme sur ordinateur, au lieu de former un
   bandeau détaché. Le texte se pose sur sa partie sombre. */
.contact__trace {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}

.contact__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 86% 0;
}

.contact__grille {
  position: relative;
  z-index: 1;
}

.contact__corps {
  display: grid;
  gap: 0 var(--gouttiere);
}

.contact__titre {
  font-size: min(var(--t-titre), 11vw);
}

.contact__ligne {
  display: block;
}

/* « Montrez-nous » ne se coupe jamais au trait d’union ; la ligne, elle, se replie. Sur un téléphone,
   une ligne entière insécable élargissait toute la section et coupait ses textes au bord de l’écran. */
.contact__mot {
  white-space: nowrap;
}

.contact__texte {
  max-width: 30em;
  margin-top: clamp(32px, 5vw, 72px);
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 350;
  line-height: 1.42;
  color: var(--nuit-texte);
}

.contact__action {
  margin-top: clamp(32px, 4vw, 56px);
}

/* Le CTA principal : le plus grand objet construit du site. */
.contact__lien {
  width: min(100%, 38rem);
}

.contact__lien .cta__texte {
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-variation-settings: "opsz" 60;
  font-weight: 330;
  letter-spacing: -0.02em;
}

/* QR code : seulement sur un ordinateur, où WhatsApp vit souvent dans le téléphone.
   Modules sombres sur fond clair : c’est ce que les téléphones lisent le mieux. */
.contact__qr {
  display: none;
  margin: 0;
}

.contact__qr .qr {
  width: 228px;
  height: 228px;
}

.contact__legende {
  max-width: 16ch;
  color: var(--nuit-texte);
  text-align: right;
}

.contact__assurance {
  max-width: 38em;
  margin-top: clamp(48px, 7vw, 104px);
  padding-top: 24px;
  border-top: 1px solid var(--nuit-filet);
  font-size: var(--t-texte);
  color: var(--nuit-texte);
}

.contact__filtre {
  max-width: 18em;
  margin-top: 24px;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  font-variation-settings: "opsz" 48;
  font-style: italic;
  font-weight: 320;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--nuit-titre);
}

@media (min-width: 1080px) {
  .contact {
    min-height: clamp(640px, 100svh, 1080px);
    padding-block: clamp(96px, 12svh, 140px);
  }

  /* La trace sur toute la hauteur, à droite ; sa gauche est un fond vide, fondu dans la section. */
  .contact__trace {
    inset: 0 0 auto auto;
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0;
    aspect-ratio: 1672 / 941;
    mask-image: linear-gradient(to right, transparent, #000 30%);
  }

  .contact__image {
    object-fit: fill;
  }

  .contact__corps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .contact__titre {
    grid-column: 1 / -1;
    font-size: min(var(--t-titre), 5.6vw);
  }

  .contact__texte {
    grid-column: 1 / span 5;
  }

  .contact__action {
    grid-column: 1 / span 6;
  }

  /* Réassurance et filtre à gauche : la droite reste à la lumière et au QR code. */
  .contact__assurance,
  .contact__filtre {
    grid-column: 1 / span 6;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  /* Légende à gauche du code, sur la partie sombre : la lumière des caustiques reste à droite. */
  .contact__qr {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 20px;
    grid-column: 7 / -1;
    grid-row: 2 / span 2;
    align-self: end;
    justify-self: end;
  }
}

/* L’éclair : calque ajouté au body par js/sections/contact.js, jamais en mouvement réduit. */

.eclair {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: clip;
  pointer-events: none;
  /* Le noir de la lame disparaît, seule la lumière du verre s’ajoute à la page. Porté par le calque
     fixe lui-même : sur la lame, le mélange resterait isolé dans ce calque. */
  mix-blend-mode: screen;
}

.eclair__lame {
  position: absolute;
  top: -30vh;
  left: 0;
  width: 16vw;
  height: 160vh;
  /* v2 : la lame lumineuse sur fond nuit, la foudre traverse aussi les sections claires. */
  background: url("../../assets/img/eclair-lame-nuit.webp") center / cover no-repeat;
  background-image: image-set(url("../../assets/img/eclair-lame-nuit.avif") type("image/avif"), url("../../assets/img/eclair-lame-nuit.webp") type("image/webp"));
  /* Masque fonctionnel : bords de la lame adoucis. */
  mask-image: linear-gradient(to right, transparent, #000 32%, #000 68%, transparent);
  opacity: 0;
  transform: translateX(-30vw) rotate(-18deg);
}

@media (prefers-reduced-motion: reduce) {
  .eclair {
    display: none;
  }
}