/**
 * Sonnette : landing de vente. Base, composants et hero.
 *
 * Direction artistique « comptoir du Sud » : papier, encre, tomette, olivier.
 * Chaque argument est une preuve matérielle (tampon, ticket, vraie capture),
 * jamais une promesse dessinée. Les sections vivent dans landing-sections.css.
 */

/* ------------------------------------------------------------ Polices */

@font-face {
  font-family: "Bitter";
  src: url("/assets/fonts/bitter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bitter";
  src: url("/assets/fonts/bitter-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Bitter";
  src: url("/assets/fonts/bitter-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ------------------------------------------------------------ Jetons */

:root {
  --papier: #F5F0E6;
  --sable: #EAE1CE;
  --encre: #2E241A;
  --tomette: #BF4A24;
  --brique: #9C3A1A;
  --olivier: #5F6B3C;
  --ticket: #FBF8F1;

  --titres: "Bitter", Georgia, serif;
  --texte: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --display: clamp(2.1rem, 1.3rem + 3.6vw, 3.4rem);
  --h2: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);

  --colonne: 1160px;
}

/* ------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3,
p, ul, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  /* clip plutôt que hidden : hidden crée un conteneur de défilement qui casse
     position: sticky, et sur iOS il laisse malgré tout Safari élargir le
     viewport, ce qui décale toute la page vers la gauche. */
  overflow-x: clip;
}

body {
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  /* Tout est calé à gauche : la symétrie centrée est le premier réflexe machine. */
  text-align: left;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--titres);
  line-height: 1.15;
  text-wrap: balance;
}

h2 {
  font-size: var(--h2);
  font-weight: 700;
}

p {
  max-width: 34em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brique);
}

:focus-visible {
  outline: 2px solid var(--tomette);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  background: var(--encre);
  color: var(--papier);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}

/* ------------------------------------------------------------ Composants */

.pastille {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--sable);
  padding: 0.5em 0.9em;
  border-radius: 4px;
  transform: rotate(-1deg);
}

/* Le tampon à l'encre : la signature graphique. Toujours une preuve, jamais
   un décor. Quatre par page maximum. */
.tampon {
  --rot: -2.5deg;
  display: inline-block;
  font: 600 0.75rem/1 var(--texte);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brique);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 0.5em 0.75em;
  box-shadow: inset 0 0 0 2px var(--papier);
  transform: rotate(var(--rot));
  filter: url(#encre);
}

/* La rotation fait sortir un tampon large de son conteneur sur petit écran. */
@media (max-width: 519px) {
  .tampon {
    max-width: 100%;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }
}

.tampon--olivier {
  --rot: 1.5deg;
  color: var(--olivier);
}

.tampon--ticket {
  --rot: 2deg;
  box-shadow: inset 0 0 0 2px var(--ticket);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 1rem var(--texte);
  text-decoration: none;
  border: none;
  border-radius: 10px;
  padding: 15px 26px;
  min-height: 52px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.bouton--plein {
  background: var(--brique);
  color: #fff;
  box-shadow: 0 3px 0 #6E2A12;
}

.bouton--plein:hover {
  box-shadow: 0 4px 0 #6E2A12;
  transform: translateY(-1px);
}

.bouton--plein:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #6E2A12;
}

.bouton--contour {
  border: 1.5px solid var(--encre);
  color: var(--encre);
  background: transparent;
  min-height: 44px;
  padding: 10px 18px;
}

.cloche {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  transform-origin: top center;
}

.bouton:hover .cloche {
  animation: ding 0.5s ease;
}

@keyframes ding {
  25% { transform: rotate(13deg); }
  55% { transform: rotate(-9deg); }
  80% { transform: rotate(4deg); }
}

/* Lien dont le souligné se trace de gauche à droite. */
.lien-trace {
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px;
  padding-bottom: 3px;
  transition: background-size 0.25s ease;
}

.lien-trace:hover {
  background-size: 0% 2px;
  background-position: 100% 100%;
}

/* Cadre téléphone : la preuve dans son écrin, jamais un mockup dessiné. */
.telephone {
  border: 8px solid var(--encre);
  border-radius: 30px;
  overflow: hidden;
  background: var(--encre);
  box-shadow: 24px 28px 60px -18px rgba(46, 36, 26, 0.45);
}

.telephone img {
  border-radius: 20px;
}

.telephone--petit {
  max-width: 270px;
  border-width: 7px;
}

/* ------------------------------------------------------------ En-tête */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 18px 20px;
}

.entete__marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 800 1.35rem var(--titres);
  color: var(--encre);
  text-decoration: none;
}

.entete__marque .cloche {
  width: 22px;
  height: 22px;
  color: var(--tomette);
}

.entete__burger {
  font: 600 0.85rem var(--texte);
  color: var(--encre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid var(--encre);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}

.entete__nav {
  display: none;
}

.entete__nav.est-ouvert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: absolute;
  top: 74px;
  left: 12px;
  right: 12px;
  background: var(--ticket);
  border: 1.5px solid var(--encre);
  border-radius: 14px;
  padding: 14px;
  z-index: 50;
  box-shadow: 12px 16px 40px -12px rgba(46, 36, 26, 0.35);
}

.entete__nav a {
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  padding: 10px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 880px) {
  .entete__burger {
    display: none;
  }

  .entete__nav {
    display: flex;
    align-items: center;
    gap: 22px;
  }
}

/* ------------------------------------------------------------ Hero */

.hero {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 34px 20px 10px;
  position: relative;
}

.hero__titre {
  font-size: var(--display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 18px 0 16px;
  max-width: 13em;
}

.hero__titre em {
  font-weight: 500;
  font-style: italic;
  color: var(--tomette);
}

.hero__sous {
  font-size: 1.1rem;
  margin-bottom: 26px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 40px;
}

.hero__preuve {
  position: relative;
  max-width: 320px;
  /* Le téléphone penche et déborde : la page est composée, pas alignée. */
  margin-left: auto;
  margin-right: -6%;
  transform: rotate(-2.5deg);
}

.hero__preuve .tampon {
  position: absolute;
  top: -12px;
  left: -22px;
  z-index: 2;
}

.hero__legende {
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 14px;
  color: rgba(46, 36, 26, 0.75);
  transform: rotate(2.5deg);
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 24px;
    padding-top: 48px;
  }

  .hero__texte {
    grid-column: 1 / 7;
    padding-top: 26px;
    /* Sans cela, la grille étirait la colonne sur la hauteur du téléphone et
       laissait 168 px de vide sous le dernier bouton. */
    align-self: start;
  }

  .hero__preuve {
    grid-column: 8 / 13;
    max-width: 360px;
    /* Le débord ne s'autorise que si la fenêtre est plus large que la colonne :
       en dessous, il sortait du document au lieu de déborder de la grille. */
    margin-right: min(0px, calc((var(--colonne) - 100vw) / 2));
    transform: translateY(46px) rotate(-2.5deg);
  }

  /* Bande sable verticale en contrepoint, derrière le téléphone. */
  .hero::before {
    content: "";
    position: absolute;
    top: -120px;
    bottom: -40px;
    left: 58%;
    /* Au bord, pas au-delà : un débordement ici gonflait la largeur du
       document (html reste en overflow visible, indispensable au sticky
       de la section Rubriques). */
    right: 0;
    background: var(--sable);
    z-index: -1;
  }
}

/* ------------------------------------------------------------ Bandeau des faits */

.bandeau {
  background: var(--encre);
  color: var(--papier);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  max-width: none;
  padding: 18px max(20px, calc((100vw - var(--colonne)) / 2 + 20px));
  margin-top: 46px;
}

/* ------------------------------------------------------------ Animations d'entrée */

/* La pose du tampon : frappé au défilement, statique si le navigateur ne sait pas. */
@supports (animation-timeline: view()) {
  .tampon {
    animation: frappe both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  @keyframes frappe {
    from {
      transform: rotate(var(--rot)) scale(1.7);
      opacity: 0;
    }
    62% {
      transform: rotate(var(--rot)) scale(0.94);
      opacity: 1;
    }
    to {
      transform: rotate(var(--rot)) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .tampon,
  .bouton .cloche {
    animation: none !important;
  }

  .bouton,
  .lien-trace {
    transition: none;
  }
}