/* Héros : planche jaune tramée, titre en deux temps, case « ancien site, BAM, nouveau site », bandeau, « C'est bien nous ». */

.hero {
  padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(3rem, 7vw, 5.5rem);
  background-color: var(--yellow);
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.6) 26%, transparent 29%),
    radial-gradient(circle, rgb(255 255 255 / 0.6) 26%, transparent 29%);
  background-position: 0 0, 7px 7px;
  background-size: 14px 14px;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.narration {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.8rem;
  font-weight: 700;
  background: var(--paper);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--pill);
  box-shadow: var(--shadow-1);
  rotate: -1.5deg;
}

.hero-title {
  --reg: 4px;
  margin-bottom: 1.25rem;
  line-height: 0.92;
}
.hero-title .slam { display: block; transform-origin: 0 70%; }
.hero-title .slam:first-child { font-size: clamp(1.9rem, 1rem + 2vw, 2.7rem); }
.hero-title .slam-2 {
  --reg: 5px;
  margin-top: 0.1em;
  font-size: clamp(3rem, 1rem + 4.6vw, 5.1rem);
  rotate: -2deg;
}

.lead {
  max-width: 34rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 500;
}

/* La case de droite : deux fenêtres de navigateur et une étoile, dessinées en HTML. */
.hero-art {
  position: relative;
  min-height: clamp(22rem, 40vw, 34rem);
  margin-top: 0.5rem;
  overflow: hidden;
  background-color: #ffd9ee;
  background-image:
    radial-gradient(circle, var(--magenta) 24%, transparent 27%),
    radial-gradient(circle, var(--magenta) 24%, transparent 27%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r3);
  box-shadow: var(--shadow-2);
  rotate: 1.2deg;
}

.win {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r2);
  box-shadow: var(--shadow-2);
}

.win-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-bottom: var(--line-thin) solid var(--ink);
}
.win-bar i {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.win-old { top: 7%; left: 5%; width: 64%; rotate: -6deg; }
.win-old .win-bar { background: #b8b8b8; }

.old {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem 1rem;
  font: 0.95rem / 1.3 "Times New Roman", Times, serif;
  background: #d9d6ce;
}
.old-title { font-size: 1.35rem; font-weight: 700; color: #8a0000; text-align: center; }
.old-links { color: #0000c8; text-align: center; }
.old-text { font-size: 0.85rem; }
.old-construction {
  justify-self: center;
  padding: 0.25rem 0.6rem;
  font: 700 0.8rem / 1.2 Arial, sans-serif;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #ffd400 0 20px);
  border: 2px solid var(--ink);
}
.old-counter { font-size: 0.8rem; text-align: center; }

.burst-bam {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 38%;
  width: clamp(8rem, 13vw, 11.5rem);
  aspect-ratio: 1;
  --burst-size: clamp(2rem, 3.2vw, 2.9rem);
}

.win-new { right: 5%; bottom: 6%; z-index: 3; width: 68%; rotate: 4deg; }
.win-new .win-bar { background: var(--cyan); }

.new {
  display: grid;
  gap: 0.6rem;
  padding: 1.1rem 1.1rem 1.25rem;
  color: #fff8e6;
  background:
    radial-gradient(circle at 85% 20%, #fff8e6 0 1.4rem, transparent 1.45rem),
    #1b2a5c;
}
.new-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.new-title { max-width: 16ch; font-size: clamp(1.25rem, 0.9rem + 1vw, 1.7rem); font-weight: 800; line-height: 1.1; }
.new-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.new-btns span {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1b2a5c;
  background: #ffd166;
  border-radius: 999px;
}
.new-btns span + span { color: #fff8e6; background: transparent; box-shadow: inset 0 0 0 2px #fff8e6; }

/* Le compteur de maquettes : un cartouche de narration posé sur le bord de la case. En position absolue dans la zone
   de la case (sa ligne et sa colonne de la grille), son arrivée après la mesure ne pousse rien. */
.compteur {
  position: absolute;
  z-index: 4;
  grid-row: 1;
  grid-column: 2;
  top: -0.6rem;
  left: 1.25rem;
  max-width: min(21rem, 100% - 2.5rem);
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  background: var(--paper);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r2);
  box-shadow: var(--shadow-1);
  rotate: -1.5deg;
}

@media (max-width: 60rem) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-art { min-height: 21rem; rotate: 0deg; }
  .compteur { grid-row: 2; grid-column: 1; }
}

/* Bandeau : sans mouvement, la liste passe à la ligne ; motion.css la fait défiler. */
.bandeau {
  position: relative;
  z-index: 2;
  margin: -1.25rem -2% 0;
  padding-inline: 2%;
  color: var(--yellow);
  background: var(--ink);
  border-block: var(--line) solid var(--ink);
  rotate: -1.5deg;
  overflow: hidden;
}

.bandeau-track { display: flex; }

.bandeau-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  list-style: none;
}
.bandeau-list[aria-hidden="true"] { display: none; }

.bandeau-list li {
  padding: 0.75rem 1.1rem 0.6rem;
  font: 400 clamp(1.4rem, 1rem + 1.4vw, 2.1rem) / 1 var(--display);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.bandeau-list li::after {
  content: "\2605" / "";
  margin-left: 2.2rem;
  color: var(--magenta);
}

.bandeau-pause {
  display: none;
  position: absolute;
  top: 50%;
  right: 3%;
  width: 2.75rem;
  height: 2.75rem;
  translate: 0 -50%;
  place-items: center;
  background: var(--yellow);
  border: var(--line-thin) solid var(--paper);
  border-radius: 50%;
  cursor: pointer;
}
.bandeau-pause span {
  width: 0.9rem;
  height: 1rem;
  border-inline: 0.3rem solid var(--ink);
}
.bandeau-pause[aria-pressed="true"] span {
  width: 0;
  height: 0;
  margin-left: 0.2rem;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent var(--ink);
}
.bandeau :focus-visible { outline-color: var(--yellow); }

/* Sous le bandeau, pour qui arrive d'un email et vérifie : les domaines d'envoi, en tampons. */
.verif {
  background:
    radial-gradient(circle, #ffb3dc 30%, transparent 33%) 0 0 / 12px 12px,
    var(--paper);
}
.verif-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1.5rem clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.verif .section-title { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem); }
.verif-oui {
  display: inline-block;
  margin-top: 0.25em;
  padding: 0.12em 0.3em 0;
  background: var(--yellow);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r1);
  rotate: -2deg;
}
.verif-carte {
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem clamp(1.1rem, 3vw, 1.75rem);
  font-size: 1.1rem;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r3);
  box-shadow: var(--shadow-2);
}
.verif-domaines { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; list-style: none; }
.verif-domaines li {
  padding: 0.3rem 0.7rem 0.2rem;
  font-weight: 800;
  background: #d8f3fd;
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--pill);
  box-shadow: var(--shadow-1);
  rotate: -1deg;
}
.verif-domaines li:nth-child(even) { rotate: 1deg; }
.verif-jamais { padding-top: 0.9rem; border-top: var(--line-thin) dashed var(--ink); }

@media (max-width: 52rem) {
  .verif-inner { grid-template-columns: minmax(0, 1fr); }
}