/* ============================================================ polices
   Toutes hébergées sur le site, rien n'est chargé chez Google.
   Anton = les gros titres condensés, la police du titre du journal = l'en-tête
   « THE LFIMUN TIMES », Roboto = les petits textes, Tinos = la colonne de journal. */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Journal"; src: url("../fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tinos"; src: url("../fonts/tinos-latin-400-normal.woff2") format("woff2"); font-display: swap; }

/* ============================================================ couleurs du club
   Relevées sur les posts Instagram et la maquette validée. */
:root {
  --rose: #d6245a;
  --violet: #7a3780;
  --bleu: #1e3c8b;
  --bleu-nuit: #14275e;
  --rouge: #fc2f27;
  --blanc: #fefaf6;
  --noir: #0d0d10;
}

/* ============================================================ unité de maquette
   La maquette ordinateur fait 2752 px de large. On exprime chaque cote dans ces
   pixels-là : « calc(452 * var(--u)) » tombe toujours au même endroit, quelle que
   soit la largeur de l'écran. cqw = largeur de la page sans la barre de défilement
   (avec vw, la page déborderait de 15 px). overflow-x: clip et pas hidden, sinon
   les sections épinglées au scroll cassent. */
html { container-type: inline-size; overflow-x: clip; }
body {
  --u: calc(100cqw / 2752);
  margin: 0;
  background: var(--bleu);
  color: var(--blanc);
  font-family: "Roboto", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, figure { margin: 0; }

/* ------------------------------------------------------------ fond dégradé + grain
   Le dégradé rose vers bleu des posts du club. Le grain est une texture de bruit
   en SVG posée par-dessus : Youssef le veut très prononcé, comme sur la maquette. */
.fond {
  background:
    linear-gradient(180deg, rgba(20, 20, 60, 0) 55%, rgba(30, 30, 90, .25) 100%),
    linear-gradient(100deg, #d6235a 0%, #b52a66 18%, #84397f 40%, #4a3a83 60%, #2a3b88 78%, #1e3c8b 100%);
}
.grain { position: relative; isolation: isolate; }
/* le grain fort des sections, identique à celui posé sur les maquettes par
   Site dev/Outils/grain.py : la même tuile de bruit, en incrustation à 55 %.
   Une tuile de 256 px affichée sur 128 px CSS donne des grains de 2 px de maquette. */
.grain--fort::after {
  background-image: url("../img/grain.png") !important;
  background-size: calc(256 * var(--u)) !important;
  mix-blend-mode: overlay;
  opacity: .55 !important;
}
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .55;
}

/* ============================================================ 01 · le hero
   Une toile de 2752 x 1536 unités, comme la maquette. Chaque élément y est posé
   à la cote mesurée sur l'image (x, y, largeur, hauteur en pixels de maquette). */
.hero {
  position: relative;
  height: calc(1536 * var(--u));
  overflow: hidden;
  /* Le dégradé de la maquette n'est pas droit : en haut le rose tient jusqu'au milieu,
     en bas tout est déjà violet puis bleu. On pose le profil du haut ici, celui du bas
     dans ::before, et on passe de l'un à l'autre en descendant (relevés sur la maquette). */
  background: linear-gradient(90deg, #d6255a 0%, #d5235a 12.5%, #d3255c 18.8%, #c92660 25%, #b22766 31.2%, #a52969 37.5%, #912a6e 43.8%, #7b2e77 50%, #67307c 56.2%, #52337f 62.5%, #423581 68.8%, #373a85 75%, #283985 81.2%, #213987 87.5%, #203b8a 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #693378 0%, #653379 12.5%, #60357c 18.8%, #59347d 25%, #50357e 31.2%, #483780 37.5%, #3d3884 43.8%, #2e3986 50%, #243a86 56.2%, #1f3a87 62.5%, #1f3b88 75%, #1f3c88 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 33%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 33%, #000 100%);
}
.hero > * { position: absolute; }

/* les filets du journal : double en haut, double sous le titre, simple sous la ligne d'infos */
.hero__regle { left: calc(48 * var(--u)); width: calc(2656 * var(--u)); box-sizing: border-box; }
.hero__regle--haut    { top: calc(25 * var(--u));  height: calc(11 * var(--u)); border-block: calc(2 * var(--u)) solid var(--blanc); }
.hero__regle--journal { top: calc(222 * var(--u)); height: calc(13 * var(--u)); border-block: calc(2 * var(--u)) solid var(--blanc); }
.hero__regle--sous    { top: calc(292 * var(--u)); border-top: calc(2 * var(--u)) solid var(--blanc); }

.hero__logo { left: calc(78 * var(--u)); top: calc(55 * var(--u)); width: calc(174 * var(--u)); }
.hero__logo img { width: 100%; }

/* « THE LFIMUN TIMES » : capitale de 138 unités, de x 452 à x 2304 */
.hero__journal {
  left: calc(452 * var(--u)); top: calc(45 * var(--u));
  font: 700 calc(179.2 * var(--u)) / 1 "Journal", Georgia, serif;
  white-space: nowrap;
  transform-origin: 0 0; transform: scaleX(.93);   /* la police est un peu plus large que celle de la maquette */
}

.hero__rejoindre {
  left: calc(2437 * var(--u)); top: calc(93 * var(--u));
  width: calc(268 * var(--u)); height: calc(77 * var(--u));
  display: grid; place-items: center;
  background: var(--blanc); color: var(--bleu);
  font: 500 calc(32 * var(--u)) / 1 "Roboto", sans-serif;
}

/* la ligne d'infos sous le titre du journal */
.hero__edition, .hero__date, .hero__nav {
  top: calc(249 * var(--u));
  font: 400 calc(32.5 * var(--u)) / 1 "Roboto", sans-serif;
  white-space: nowrap;
}
.hero__edition { left: calc(50 * var(--u)); }
.hero__date    { left: calc(1077 * var(--u)); letter-spacing: calc(.8 * var(--u)); }
.hero__nav     { right: calc(50 * var(--u)); }

/* le gros titre : « LE MONDE A BESOIN DE » blanc, « DÉLÉGUÉS. » sur un bloc rouge qui sort à droite */
.hero__titre { inset: 0; font-weight: 400; }
.hero__titre > span { position: absolute; }
.hero__titre-debut {
  left: calc(47 * var(--u)); top: calc(346 * var(--u));
  font: calc(252.6 * var(--u)) / 1 "Anton", sans-serif;
  white-space: nowrap;
  transform-origin: 0 0; transform: scaleX(.854);  /* Anton condensée pour retrouver la largeur de la maquette */
}
.hero__bloc {
  left: calc(1870 * var(--u)); top: calc(330 * var(--u));
  width: calc(882 * var(--u)); height: calc(266 * var(--u));
  background: var(--rouge);
}
.hero__titre-fin {
  position: absolute; left: calc(18 * var(--u)); top: calc(13 * var(--u));
  font: calc(252.6 * var(--u)) / 1 "Anton", sans-serif;
  white-space: nowrap;
  transform-origin: 0 0; transform: scaleX(.866);
}

/* les mots à la verticale : MODEL se lit de bas en haut, INTRODUCING de haut en bas */
.hero__vertical { font: calc(377 * var(--u)) / 1 "Anton", sans-serif; white-space: nowrap; }
.hero__vertical--model {
  left: calc(21 * var(--u)); top: calc(1504 * var(--u));
  transform-origin: 0 0; transform: rotate(-90deg) scaleX(.921);
}
.hero__vertical--introducing {
  left: calc(2716 * var(--u)); top: calc(625 * var(--u));
  font-size: calc(197.8 * var(--u));
  transform-origin: 0 0; transform: rotate(90deg) scaleX(.935);
}

/* la photo d'archive dans son cadre blanc, comme une photo de presse */
.hero__photo {
  left: calc(388 * var(--u)); top: calc(627 * var(--u));
  width: calc(1971 * var(--u)); height: calc(831 * var(--u));
  background: var(--blanc);
  padding: calc(21 * var(--u)) calc(26 * var(--u)) calc(17 * var(--u));
  box-sizing: border-box;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.hero__legende {
  left: calc(395 * var(--u)); width: calc(1963 * var(--u)); top: calc(1462 * var(--u));
  text-align: center;
  font: 500 calc(30 * var(--u)) / 1 "Roboto", sans-serif;
}
.hero__regle--legende { left: calc(397 * var(--u)); width: calc(1961 * var(--u)); top: calc(1492 * var(--u)); border-top: calc(2 * var(--u)) solid var(--blanc); }

/* le tampon START HERE, posé de travers sur le coin de la photo */
.hero__tampon {
  left: calc(392 * var(--u)); top: calc(1350 * var(--u));
  width: calc(412 * var(--u)); height: calc(106 * var(--u));
  border: calc(7 * var(--u)) solid var(--rouge); border-radius: calc(12 * var(--u));
  color: var(--rouge);
  display: grid; place-items: center;
  font: calc(86 * var(--u)) / 1 "Anton", sans-serif;
  transform: rotate(-17deg);
  box-sizing: border-box;
}

/* la colonne de journal, justifiée, à droite de la photo */
.hero__colonne {
  left: calc(2380 * var(--u)); top: calc(626 * var(--u));
  width: calc(131 * var(--u)); height: calc(868 * var(--u));
  font: calc(27 * var(--u)) / calc(31.5 * var(--u)) "Tinos", "Times New Roman", serif;
  text-align: justify; hyphens: auto;
  overflow: hidden;
}

.hero__burger { display: none; }

/* ============================================================ 01 · le hero sur téléphone
   La maquette mobile fait 1536 px de large : sous 768 px d'écran, l'unité devient
   1/1536 de la largeur et chaque élément reprend la cote mesurée sur cette maquette.
   Le titre passe sur trois lignes, le menu se range derrière le bouton à trois traits,
   et on retire ce qui ne tient pas : la ligne d'édition, la colonne de journal,
   la légende et le mot INTRODUCING. */
@media (max-width: 767px) {
  body { --u: calc(100cqw / 1536); }

  .hero {
    height: calc(2752 * var(--u));
    background: #243e89;
  }
  /* ici le rose ne vit qu'en haut : le profil du haut s'efface en descendant
     jusqu'au bleu uni du bas (relevé sur la maquette mobile) */
  .hero::before {
    background: linear-gradient(90deg, #d02b5e 0%, #c7285d 20%, #a32c69 39%, #703276 59%, #393b82 78%, #243e85 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.3) 61%, rgba(0,0,0,.12) 73%, transparent 88%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.3) 61%, rgba(0,0,0,.12) 73%, transparent 88%);
  }

  .hero__edition, .hero__nav, .hero__legende, .hero__regle--legende,
  .hero__colonne, .hero__vertical--introducing { display: none; }

  .hero__logo { left: calc(54 * var(--u)); top: calc(50 * var(--u)); width: calc(210 * var(--u)); }

  /* le bouton à trois traits */
  .hero__burger {
    display: block;
    left: calc(1081 * var(--u)); top: calc(113 * var(--u));
    width: calc(77 * var(--u)); height: calc(55 * var(--u));
    padding: 0; border: 0; background: none; cursor: pointer;
  }
  .hero__burger span {
    position: absolute; left: 0; width: 100%; height: calc(7 * var(--u));
    background: var(--blanc);
  }
  .hero__burger span:nth-child(1) { top: 0; }
  .hero__burger span:nth-child(2) { top: calc(24 * var(--u)); }
  .hero__burger span:nth-child(3) { bottom: 0; }

  .hero__rejoindre {
    left: calc(1210 * var(--u)); top: calc(100 * var(--u));
    width: calc(272 * var(--u)); height: calc(79 * var(--u));
    font-size: calc(36 * var(--u));
  }

  .hero__regle { left: calc(54 * var(--u)); width: calc(1428 * var(--u)); }
  .hero__regle--haut    { top: calc(272 * var(--u)); height: calc(14 * var(--u)); }
  .hero__regle--journal { top: calc(441 * var(--u)); height: calc(14 * var(--u)); }
  .hero__regle--sous    { top: calc(518 * var(--u)); }

  .hero__journal {
    left: calc(58 * var(--u)); top: calc(299 * var(--u));
    font-size: calc(136.3 * var(--u));
    transform: scaleX(.935);
  }
  .hero__date {
    left: calc(430 * var(--u)); top: calc(469 * var(--u));
    font-size: calc(36.7 * var(--u));
  }

  /* le titre sur trois lignes : chaque ligne est condensée à sa propre largeur mesurée */
  .hero__titre-debut { inset: 0; transform: none; font-size: calc(336.7 * var(--u)); }
  .hero__l1, .hero__l2 { position: absolute; transform-origin: 0 0; }
  .hero__l1 { left: calc(53 * var(--u)); top: calc(553 * var(--u)); transform: scaleX(.889); }
  .hero__l2 { left: calc(50 * var(--u)); top: calc(903 * var(--u)); transform: scaleX(.953); }
  .hero__bloc {
    left: 0; top: calc(1241 * var(--u));
    width: calc(1273 * var(--u)); height: calc(410 * var(--u));
  }
  .hero__titre-fin {
    left: calc(52 * var(--u)); top: calc(48 * var(--u));
    font-size: calc(336.7 * var(--u));
    transform: scaleX(.93);
  }

  .hero__vertical--model {
    left: calc(33 * var(--u)); top: calc(2685 * var(--u));
    font-size: calc(344.4 * var(--u));
    transform: rotate(-90deg) scaleX(1.074);
  }

  .hero__photo {
    left: calc(363 * var(--u)); top: calc(1709 * var(--u));
    width: calc(1119 * var(--u)); height: calc(984 * var(--u));
    padding: calc(22 * var(--u));
  }
  .hero__photo img { object-position: 30% 50%; }

  .hero__tampon {
    left: calc(364 * var(--u)); top: calc(2527 * var(--u));
    width: calc(420 * var(--u)); height: calc(108 * var(--u));
    font-size: calc(88 * var(--u));
  }
}

/* ============================================================ 02 · le manifeste
   Le fond est une image de quelques pixels relevée sur la maquette (Site dev/Outils/fond.py),
   étirée par le navigateur : on retrouve le dégradé exact, même quand il part de travers. */
.manif {
  position: relative;
  height: calc(1536 * var(--u));
  overflow: hidden;
  background: #2b3b85 url("../img/fond-02.png") 0 0 / 100% 100%;
}
.manif > *, .manif__texte > * { position: absolute; }
.manif__texte { position: absolute; inset: 0; margin: 0; font-weight: 400; }

.manif__etiquette, .manif__page {
  top: calc(42 * var(--u));
  font: 400 calc(39.4 * var(--u)) / 1 "Roboto", sans-serif;
  white-space: nowrap;
}
.manif__etiquette { left: calc(50 * var(--u)); letter-spacing: calc(.56 * var(--u)); }
.manif__page { right: calc(50 * var(--u)); }

/* chaque ligne : même taille d'Anton, mais condensée ou étirée à la largeur mesurée
   sur la maquette (le générateur a peint chaque ligne un peu différemment) */
.manif__l {
  left: calc(65 * var(--u));
  font: calc(238.8 * var(--u)) / 1 "Anton", sans-serif;
  white-space: nowrap;
  transform-origin: 0 0;
}
.manif__l1 { top: calc(126 * var(--u));  transform: scaleX(1.071); }
.manif__l2 { top: calc(351 * var(--u));  transform: scaleX(1.106); }
.manif__l3 { top: calc(576 * var(--u));  transform: scaleX(1.096); }
.manif__l4 { top: calc(802 * var(--u));  transform: scaleX(1.107); }
.manif__l5 { top: calc(1027 * var(--u)); transform: scaleX(1.121); }
.manif__l6 { top: calc(1253 * var(--u)); transform: scaleX(1.099); }
.manif__l--estompe { color: rgba(254, 250, 246, .62); }

/* le bloc rouge derrière « YOU SPEAK. », collé au bord gauche */
.manif__bloc {
  left: 0; top: calc(1029 * var(--u));
  width: calc(1194 * var(--u)); height: calc(227 * var(--u));
  background: var(--rouge);
}

/* le tampon APPROVED, en bas à droite. Cotes relevées sur la maquette par la boîte
   tournée la plus serrée : cadre 264 x 87, trait 5,5, lettres de 51 de haut, -14,75°.
   L'encre est « usée » par un masque de bruit, comme un vrai coup de tampon. */
.manif__tampon {
  left: calc(2439.6 * var(--u)); top: calc(1393.4 * var(--u));
  width: calc(264 * var(--u)); height: calc(86.6 * var(--u));
  border: calc(7 * var(--u)) solid var(--rouge); border-radius: calc(13 * var(--u));
  padding-top: calc(2 * var(--u));
  color: var(--rouge);
  display: grid; place-items: center;
  font: calc(58.8 * var(--u)) / 1 "Anton", sans-serif;
  transform: rotate(-14.75deg);
  box-sizing: border-box;
  -webkit-mask: url("../img/usure.png") 0 0 / calc(192 * var(--u));
          mask: url("../img/usure.png") 0 0 / calc(192 * var(--u));
}

@media (max-width: 767px) {
  .manif {
    height: calc(2752 * var(--u));
    background-image: url("../img/fond-02-mobile.png");
  }
  .manif__page { display: none; }
  .manif__etiquette {
    left: calc(105 * var(--u)); top: calc(80 * var(--u));
    font-size: calc(50.6 * var(--u)); letter-spacing: calc(1.2 * var(--u));
  }

  /* sur téléphone chaque morceau devient sa propre ligne */
  .manif__l { display: contents; }
  .manif__m {
    position: absolute; left: calc(102 * var(--u));
    font: calc(230.7 * var(--u)) / 1 "Anton", sans-serif;
    white-space: nowrap; transform-origin: 0 0;
  }
  .manif__m1  { top: calc(198 * var(--u));  transform: scaleX(1.128); }
  .manif__m2  { top: calc(417 * var(--u));  transform: scaleX(1.094); }
  .manif__m3  { top: calc(636 * var(--u));  transform: scaleX(1.145); }
  .manif__m4  { top: calc(854 * var(--u));  transform: scaleX(1.126); }
  .manif__m5  { top: calc(1072 * var(--u)); transform: scaleX(1.131); }
  .manif__m6  { top: calc(1291 * var(--u)); transform: scaleX(1.136); }
  .manif__m7  { top: calc(1509 * var(--u)); transform: scaleX(1.145); }
  .manif__m8  { top: calc(1726 * var(--u)); transform: scaleX(1.145); }
  .manif__m9  { top: calc(1945 * var(--u)); transform: scaleX(1.143); }
  .manif__m10 { top: calc(2164 * var(--u)); transform: scaleX(1.152); }
  .manif__m11 { top: calc(2378 * var(--u)); left: calc(109 * var(--u)); transform: scaleX(1.118); }

  .manif__bloc { top: calc(1946 * var(--u)); width: calc(1220 * var(--u)); height: calc(221 * var(--u)); }

  .manif__tampon {
    left: calc(1206.9 * var(--u)); top: calc(2587 * var(--u));
    width: calc(281.9 * var(--u)); height: calc(92.8 * var(--u));
    border-width: calc(8 * var(--u));
    padding-top: calc(7 * var(--u));
    font-size: calc(62.3 * var(--u));
    transform: rotate(-15deg);
  }
}


/* ============================================================ 04 · ce qu'on y fait
   Une page de dossier sur papier crème : fond relevé sur la maquette (fond-04.png),
   le même grain fort, une fine bande rose vers bleu tout en haut. */
.activ {
  position: relative;
  height: calc(1536 * var(--u));
  overflow: hidden;
  color: #111;
  background: #f9f1e2 url("../img/fond-04.png") 0 0 / 100% 100%;
}
.activ > *, .activ__bureau > * { position: absolute; margin: 0; }
.activ__bande {
  left: 0; top: 0; width: 100%; height: calc(17 * var(--u));
  background: linear-gradient(90deg, #fd2950 0%, #ed265a 12.5%, #ca2566 25%, #a3256e 37.5%, #812b82 50%, #542e84 62.5%, #37388e 75%, #1d3e91 100%);
}
.activ__regle { left: calc(91 * var(--u)); width: calc(2569 * var(--u)); background: #111; }
.activ__regle--epaisse { top: calc(84 * var(--u)); height: calc(6 * var(--u)); }
.activ__regle--fine    { top: calc(153 * var(--u)); height: calc(2 * var(--u)); }
.activ__etiquette, .activ__dossier {
  top: calc(102 * var(--u));
  font: 400 calc(38.6 * var(--u)) / 1 "Roboto", sans-serif;
  white-space: nowrap;
}
.activ__etiquette { left: calc(93 * var(--u)); }
.activ__dossier { right: calc(93 * var(--u)); font-size: calc(37.9 * var(--u)); }

/* les cinq colonnes, séparées par des filets verticaux de 3 unités */
.activ__colonnes { inset: 0; list-style: none; padding: 0; }
.activ__col { position: absolute; top: 0; width: calc(520 * var(--u)); height: 100%; text-align: center; }
.activ__col1 { left: calc((331 - 260) * var(--u)); }
.activ__col2 { left: calc((853 - 260) * var(--u)); }
.activ__col3 { left: calc((1375 - 260) * var(--u)); }
.activ__col4 { left: calc((1897 - 260) * var(--u)); }
.activ__col5 { left: calc((2420 - 260) * var(--u)); }
.activ__col2::before, .activ__col3::before, .activ__col4::before, .activ__col5::before {
  content: ""; position: absolute; top: calc(241 * var(--u)); height: calc(614 * var(--u));
  width: calc(3 * var(--u)); background: #111;
}
.activ__col2::before { left: calc((593 - 593) * var(--u)); }
.activ__col3::before { left: calc((1114 - 1115) * var(--u)); }
.activ__col4::before { left: calc((1635 - 1637) * var(--u)); }
.activ__col5::before { left: calc((2156 - 2160) * var(--u)); }

/* les grands chiffres creux : contour noir, intérieur crème, ombre bleue décalée */
.activ__num {
  position: absolute; left: 0; right: 0; top: calc(226.6 * var(--u));
  font: calc(281 * var(--u)) / 1 "Anton", sans-serif;
  color: #fbf3e5;
  -webkit-text-stroke: calc(5 * var(--u)) #111;
  text-shadow: calc(7 * var(--u)) calc(6 * var(--u)) 0 #1e378a;
}
.activ__titre {
  position: absolute; left: 0; right: 0; top: calc(533.5 * var(--u));
  margin: 0; font: 400 calc(94.6 * var(--u)) / 1 "Anton", sans-serif;
  white-space: nowrap; transform-origin: 50% 0;
}
.activ__col1 .activ__titre { transform: scaleX(.946); }
.activ__col2 .activ__titre { transform: scaleX(.959); }
.activ__col3 .activ__titre { transform: scaleX(.967); }
.activ__col4 .activ__titre { transform: scaleX(.979); }
.activ__col5 .activ__titre { transform: translateX(calc(-16 * var(--u))) scaleX(.857); }
.activ__desc {
  position: absolute; left: 0; right: 0; top: calc(642 * var(--u)); margin: 0;
  font: 500 calc(53.4 * var(--u)) / calc(52 * var(--u)) "Barlow Condensed", sans-serif;
}
.activ__col5 .activ__desc { top: calc(652 * var(--u)); }

/* ------------------------------------------------------------ le bureau */
.activ__bureau { inset: 0; }
.activ__photo {
  left: calc(95 * var(--u)); top: calc(1045 * var(--u));
  width: calc(1021 * var(--u)); height: calc(790 * var(--u));
  padding: calc(26 * var(--u)); box-sizing: border-box;
  background: #f3f1eb;
  transform-origin: 0 0; transform: rotate(-7.3deg);
  box-shadow: 0 calc(12 * var(--u)) calc(36 * var(--u)) rgba(40, 30, 20, .35);
}
/* la photo est recadrée plus serré que l'image d'origine, et assombrie pour retrouver
   les murs foncés de la maquette */
.activ__cadre { display: block; width: 100%; height: 100%; overflow: hidden; }
.activ__cadre img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.4); transform-origin: 48% 70%;
  filter: brightness(.82) contrast(1.2);
}
.activ__trombone {
  left: calc(178 * var(--u)); top: calc(985 * var(--u));
  width: calc(80 * var(--u)); height: calc(225 * var(--u));
  transform: rotate(-8deg);
}

/* le projet de résolution : une feuille beige sur une autre, légèrement décalée */
.activ__feuille {
  left: calc(1295 * var(--u)); top: calc(990 * var(--u));
  width: calc(940 * var(--u)); height: calc(820 * var(--u));
  background: #f7f0e4;
  transform-origin: 0 0; transform: rotate(10.1deg);
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(40, 30, 20, .3);
  z-index: 2;
}
.activ__feuille::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #ecdfc6;
  transform: translate(calc(14 * var(--u)), calc(-10 * var(--u))) rotate(-1.2deg);
}
.activ__feuille > * { position: absolute; margin: 0; }
.activ__resolution-titre {
  left: calc(84 * var(--u)); width: calc(700 * var(--u)); top: calc(162 * var(--u));
  text-align: center;
  font: 700 calc(27 * var(--u)) / 1 "Courier Prime", monospace;
}
.activ__resolution {
  left: calc(84 * var(--u)); width: calc(720 * var(--u));
  font: 400 calc(20.6 * var(--u)) / calc(24.5 * var(--u)) "Courier Prime", monospace;
}
.activ__resolution:nth-of-type(2) { top: calc(236 * var(--u)); }
.activ__resolution:nth-of-type(3) { top: calc(374 * var(--u)); }

/* les coups de tampon : encre rouge usée (masque usure.png), cotes relevées sur la maquette */
.activ__encre {
  display: grid; place-items: center;
  color: #dc3431; border: solid #dc3431;
  font-family: "Anton", sans-serif; line-height: 1;
  box-sizing: border-box;
  -webkit-mask: url("../img/usure.png") 0 0 / calc(192 * var(--u));
          mask: url("../img/usure.png") 0 0 / calc(192 * var(--u));
}
.activ__encre--secret {
  left: calc(330 * var(--u)); top: calc(46 * var(--u));
  width: calc(200 * var(--u)); height: calc(78 * var(--u));
  border-width: calc(5 * var(--u)); border-radius: calc(10 * var(--u));
  font-size: calc(56 * var(--u));
}
.activ__encre--confidential {
  left: calc((2300 - 235) * var(--u)); top: calc((1055 - 52.5) * var(--u));
  width: calc(470 * var(--u)); height: calc(105 * var(--u));
  border-width: calc(7 * var(--u)); border-radius: calc(12 * var(--u));
  font-size: calc(80.7 * var(--u));
  transform: rotate(-13.5deg);
  z-index: 1;
}
.activ__encre--approved {
  left: calc((2531.4 - 130.3) * var(--u)); top: calc((1388.7 - 44) * var(--u));
  width: calc(260.6 * var(--u)); height: calc(88 * var(--u));
  border-width: calc(6 * var(--u)); border-radius: calc(12 * var(--u));
  font-size: calc(52 * var(--u)); padding-top: calc(2 * var(--u));
  transform: rotate(-15.75deg);
}
.activ__tampon-bois {
  left: calc((2600 - 165) * var(--u)); top: calc((1110 - 168) * var(--u));
  width: calc(330 * var(--u));
  transform: rotate(14deg);
  filter: drop-shadow(calc(8 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) rgba(40, 30, 20, .35));
  z-index: 3;
}
.activ__desc-m { display: none; }

/* ------------------------------------------------------------ 04 sur téléphone
   Les colonnes deviennent une liste : le chiffre à gauche d'un filet vertical, le titre
   et une phrase courte à droite (texte propre au mobile, plus court). Sur le bureau,
   seuls restent la photo, le tampon en bois et APPROVED. */
@media (max-width: 767px) {
  .activ { height: calc(2752 * var(--u)); background-image: url("../img/fond-04-mobile.png"); }
  .activ__bande { height: calc(22 * var(--u)); }
  .activ__regle { left: calc(93 * var(--u)); width: calc(1349 * var(--u)); }
  .activ__regle--epaisse { top: calc(108 * var(--u)); height: calc(7 * var(--u)); }
  .activ__regle--fine    { top: calc(184 * var(--u)); height: calc(2 * var(--u)); }
  .activ__etiquette, .activ__dossier { left: calc(93 * var(--u)); right: auto; font-size: calc(39 * var(--u)); }
  .activ__etiquette { top: calc(132 * var(--u)); letter-spacing: calc(1.8 * var(--u)); }
  .activ__dossier   { top: calc(205 * var(--u)); letter-spacing: 0; font-size: calc(40 * var(--u)); }

  /* le filet vertical qui sépare les chiffres du texte, et les filets entre les lignes */
  .activ__colonnes::before {
    content: ""; position: absolute; left: calc(514 * var(--u)); top: calc(323 * var(--u));
    width: calc(3 * var(--u)); height: calc(1828 * var(--u)); background: #111;
  }
  .activ__col { left: 0 !important; width: 100%; height: calc(375 * var(--u)); text-align: left; }
  .activ__col::before { display: none; }
  .activ__col + .activ__col::after {
    content: ""; position: absolute; left: calc(92 * var(--u)); width: calc(1350 * var(--u));
    top: calc(286 * var(--u)); height: calc(3 * var(--u)); background: #111;
  }
  .activ__col1 { top: 0; }
  .activ__col2 { top: calc(376 * var(--u)); }
  .activ__col3 { top: calc(752 * var(--u)); }
  .activ__col4 { top: calc(1125 * var(--u)); }
  .activ__col5 { top: calc(1500 * var(--u)); }

  .activ__num {
    right: auto; left: calc(136 * var(--u)); top: calc(328.5 * var(--u));
    font-size: calc(304.5 * var(--u));
    -webkit-text-stroke-width: calc(5.5 * var(--u));
    transform-origin: 0 0; transform: scaleX(.98);
    text-shadow: calc(8 * var(--u)) calc(6 * var(--u)) 0 #1e378a;
  }
  .activ__titre {
    right: auto; left: calc(590 * var(--u)); top: calc(366 * var(--u));
    font-size: calc(137.3 * var(--u));
    transform: none !important;
  }
  .activ__desc { display: none; }
  .activ__desc-m {
    display: block; position: absolute; left: calc(589 * var(--u)); top: calc(514 * var(--u)); margin: 0;
    font: 500 calc(66.8 * var(--u)) / 1 "Barlow Condensed", sans-serif;
    white-space: nowrap;
  }

  .activ__feuille, .activ__encre--confidential { display: none; }
  .activ__photo {
    left: calc(178 * var(--u)); top: calc(2265 * var(--u));
    width: calc(965 * var(--u)); height: calc(760 * var(--u));
    padding: calc(24 * var(--u));
    transform: rotate(-5.8deg);
  }
  .activ__trombone {
    left: calc(258 * var(--u)); top: calc(2215 * var(--u));
    width: calc(95 * var(--u)); height: calc(265 * var(--u));
    transform: rotate(-6deg);
  }
  .activ__tampon-bois {
    left: calc((1318 - 170) * var(--u)); top: calc((2262 - 172) * var(--u));
    width: calc(340 * var(--u));
    transform: rotate(20deg);
  }
  .activ__encre--approved {
    left: calc((1285.8 - 204.3) * var(--u)); top: calc((2567.4 - 63.7) * var(--u));
    width: calc(408.6 * var(--u)); height: calc(127.4 * var(--u));
    border-width: calc(12 * var(--u)); border-radius: calc(16 * var(--u));
    font-size: calc(74 * var(--u)); padding-top: calc(3 * var(--u));
    transform: rotate(-16.5deg);
  }
}