/* ==========================================================================
   L'agence : l'histoire de Blitz en bande dessinée.
   L'album du numéro 1 collé sur le comptoir ; au défilement, il descend et devient un livre qu'on feuillette
   (une page qui tourne en 3D par cran). Puis l'équipe jase, « ailleurs vs chez nous », le chèque du statement, la distribution et la dernière page.
   ========================================================================== */

/* ---------- briques communes de la bande dessinée */
.page-agence { --ink: var(--nuit); --trame-n: radial-gradient(rgba(23, 23, 26, .22) 1.1px, transparent 1.5px) 0 0 / 7px 7px; }
/* l'encadré de narration (récitatif) : jaune, filet noir, ombre pleine */
.page-agence .recit { position: absolute; z-index: 4; left: 4%; top: 5%; max-width: 84%; margin: 0; padding: .45em .65em .5em; background: var(--jaune); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font: 700 var(--fs-recit, 15px)/1.22 var(--titre); text-wrap: balance; }
.page-agence .recit--bas { top: auto; bottom: 5%; }
/* la bulle : lettrage en capitales centré, coins ronds, queue en deux triangles (filet + blanc) */
.page-agence .bulle { position: absolute; z-index: 5; margin: 0; padding: .55em .85em .6em; max-width: 72%; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 1.2em;
  font: 800 var(--fs-bulle, 14px)/1.12 var(--titre); text-transform: uppercase; text-align: center; text-wrap: balance; }
.page-agence .bulle::before, .page-agence .bulle::after { content: ""; position: absolute; top: 100%; left: var(--qx, 30%); width: 1.3em; height: 1.2em; background: var(--ink); clip-path: polygon(0 0, 100% 0, 12% 100%); }
.page-agence .bulle::after { top: calc(100% - 3.5px); width: .85em; height: .85em; margin-left: 3px; background: #fff; }
.page-agence .bulle--petite { --fs-bulle: 11px; padding: .45em .7em .5em; }
/* le cri : un éclat régulier à pointes fines, contour d'encre épais et ombre décalée ; le texte reste au centre,
   avec de la marge tout autour (sa taille suit celle de l'éclat) */
.page-agence .cri { position: absolute; z-index: 5; display: grid; place-items: center; aspect-ratio: 220 / 144; margin: 0; container-type: inline-size; background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 144%22%3E%3Cpath d=%22M110.0 8.3L121.4 22.2L139.4 9.2L143.2 26.4L165.9 17.5L163.1 33.6L185.1 31.2L178.7 44.3L200.3 46.1L188.0 57.6L208.5 63.1L189.9 72.0L211.4 81.1L189.6 86.7L200.9 98.1L177.7 99.3L188.6 114.8L164.6 111.6L166.0 126.7L143.7 118.3L140.1 136.4L121.3 121.5L110.0 138.5L98.5 122.1L81.8 132.3L76.7 117.7L55.1 125.6L55.7 111.3L34.1 113.3L41.1 99.8L15.3 99.1L32.2 86.3L7.6 81.2L30.2 72.0L11.6 63.1L32.9 57.8L15.0 44.8L41.6 44.4L33.3 30.3L56.3 33.1L54.5 17.8L76.4 25.9L80.3 8.5L98.3 20.8Z%22 fill=%22%23fff%22 stroke=%22%2317171A%22 stroke-width=%225%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%2210%22/%3E%3C/svg%3E') center / 100% 100% no-repeat; filter: drop-shadow(4px 4px 0 var(--ink)); }
.page-agence .cri span { position: relative; font: 900 12.5cqi/1 var(--titre); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); rotate: -5deg; translate: 0 -2%; }
/* l'onomatopée : lettrage plein, contour d'encre, ombre décalée */
.page-agence .sfx { position: absolute; z-index: 5; margin: 0; font: 900 var(--fs-sfx, 44px)/.9 var(--titre); text-transform: uppercase; white-space: nowrap; color: var(--jaune);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.page-agence .sfx--petit { --fs-sfx: 20px; -webkit-text-stroke-width: 2px; text-shadow: 2px 2px 0 var(--ink); }
/* la facture : du papier, des lignes, un total */
.facture { position: absolute; z-index: 2; margin: 0; padding: 7% 8% 9%; background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font: 600 var(--fs, 11px)/1.2 var(--mono); }
.facture p { margin: 0; }
.facture__titre { font: 900 2.1em/1 var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.facture__objet { margin: .35em 0 .8em !important; text-transform: uppercase; letter-spacing: .08em; color: #55555c; }
.facture__ligne { display: block; height: .5em; margin: .55em 0; background: #dcdce2; }
.facture__ligne--courte { width: 58%; }
.facture__total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: .9em !important; padding-top: .5em; border-top: 2px solid var(--ink); text-transform: uppercase; }
.facture__total b { font: 900 1.7em/1 var(--titre); color: var(--rouge); letter-spacing: .02em; }

/* ---------- la couverture du numéro 1 (sur le comptoir et dans le livre) */
.couverture { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; background: var(--rouge); border: 3px solid var(--ink); }
.couverture__entete { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 3cqi 4cqi; background: var(--papier); border-bottom: 3px solid var(--ink); }
.couverture__numero { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 1.4cqi 2.6cqi; background: var(--ink); color: #fff; font: 600 3.2cqi/1 var(--mono); }
.couverture__numero b { font: 900 7cqi/1 var(--titre); }
.couverture__logo { width: 46cqi; height: auto; }
.couverture__scene { position: relative; flex: 1; background: repeating-conic-gradient(from 0deg at 50% 60%, var(--rouge) 0deg 7deg, #ff2b67 7deg 14deg); }
.couverture__scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(23, 23, 26, .2) 1.2px, transparent 1.6px) 0 0 / 8px 8px; mix-blend-mode: multiply; }
.couverture__eclat { position: absolute; z-index: 1; left: 20%; top: 6%; width: 74%; height: 74%; color: var(--jaune); fill: currentColor; stroke: var(--ink); stroke-width: 2.5; overflow: visible; }
.couverture__facture { --fs: 2.4cqi; left: 6%; top: 10%; width: 44%; rotate: -9deg; }
.couverture__jp { position: absolute; z-index: 3; right: 2%; bottom: -1%; width: 50%; }
.couverture__cri { left: 3%; bottom: 9%; width: 50%; rotate: -7deg; }
.couverture__titre { position: relative; z-index: 4; margin: 0; padding: 3cqi 4cqi 3.4cqi; background: var(--ink); color: var(--jaune); font: 900 9cqi/.92 var(--titre); text-transform: uppercase; text-align: center; }
.couverture__titre span { display: block; }
.couverture__complet { position: absolute; z-index: 5; right: -1%; top: 23%; margin: 0; padding: .5em .8em; background: var(--jaune); color: var(--ink); border: 2px solid var(--ink); font: 800 2.8cqi/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; rotate: 8deg; }

/* ------------------------------------------------------------------------------------------
   1. Le comptoir : le titre à gauche, l'album collé de travers à droite
   ------------------------------------------------------------------------------------------ */
.comptoir { position: relative; z-index: 6; padding: 40px 0 70px; background: radial-gradient(rgba(246, 246, 247, .05) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--nuit); }
.comptoir__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 40px 60px; }
.comptoir__titre { font-size: clamp(46px, 6.6vw, 112px); }
.comptoir__intro { max-width: 40ch; margin: 24px 0 0; color: var(--gris); font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--titre); }
.comptoir__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.comptoir__album { position: relative; justify-self: center; width: clamp(280px, 27vw, 420px); rotate: -5deg; }
.album { position: relative; aspect-ratio: .68; box-shadow: 14px 14px 0 var(--ink), 14px 14px 0 3px var(--charbon-2); }
.comptoir__ruban { position: absolute; z-index: 3; width: 34%; height: auto; pointer-events: none; }
.comptoir__ruban--a { top: -4%; left: -12%; rotate: -34deg; }
.comptoir__ruban--b { bottom: -3%; right: -12%; rotate: -30deg; }
/* l'étiquette de prix collée sur l'album */
.comptoir__prix { position: absolute; z-index: 4; right: -10%; top: 30%; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 10px 14px 12px; background: var(--jaune); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; rotate: 14deg; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink); }
.comptoir__prix b { margin-top: 4px; font: 900 22px/1 var(--titre); letter-spacing: 0; }
.comptoir__etoile { position: absolute; z-index: 4; left: -9%; bottom: 14%; width: 15%; rotate: -12deg; }

/* ------------------------------------------------------------------------------------------
   2. L'histoire : un album portrait. Les feuilles tournent autour de la reliure (au centre du livre).
   Sans JS ou en mouvement réduit, les pages se lisent simplement l'une après l'autre.
   ------------------------------------------------------------------------------------------ */
.bd { position: relative; z-index: 3; padding: 90px 0 60px; background: radial-gradient(rgba(246, 246, 247, .05) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--charbon); }
.bd__tete { margin-bottom: 30px; }
.bd__tete .titre { font-size: clamp(40px, 5.4vw, 90px); }
.livre { --pw: min(460px, 92vw); --ph: calc(var(--pw) / .68); position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.livre__dos { order: 99; }
.feuille { display: contents; }
.planche { position: relative; display: flex; flex-direction: column; width: var(--pw); height: var(--ph); overflow: hidden; container-type: inline-size; background: var(--papier); color: var(--ink); border: 3px solid var(--ink);
  --fs-recit: clamp(11px, 3.1cqi, 16px); --fs-bulle: clamp(10.5px, 2.9cqi, 15px); --fs-sfx: clamp(22px, 9cqi, 48px); }
.planche--couverture { background: none; border: 0; }

/* le livre animé (classe posée en JS) : la scène se fixe à l'écran, le livre est centré dessus */
.bd.est-livre .bd__scene { display: flex; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; padding-top: 80px; overflow: hidden; }
.bd.est-livre .livre { --ph: min(calc(100svh - 180px), 800px, calc((100vw - 120px) / 2 / .68)); --pw: calc(var(--ph) * .68);
  display: block; flex: none; width: calc(var(--pw) * 2); height: var(--ph); margin-left: calc(50% - var(--pw)); gap: 0; perspective: 2800px; perspective-origin: 50% 40%; }
.bd.est-livre .livre__dos, .bd.est-livre .feuille { position: absolute; top: 0; left: 50%; width: var(--pw); height: 100%; }
.bd.est-livre .feuille { display: block; transform-style: preserve-3d; transform-origin: 0 50%; }
.bd.est-livre .planche { position: absolute; inset: 0; width: auto; height: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bd.est-livre .planche--verso { transform: rotateY(180deg); }
/* l'ombre de la reliure, et la page qui s'assombrit pendant qu'elle tourne (--ombre, en JS) */
/* --pli : la position (en %) du reflet qui glisse sur la feuille courbée pendant qu'elle tourne */
@property --pli { syntax: "<number>"; inherits: false; initial-value: 130; }
.bd.est-livre .planche::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: linear-gradient(100deg, transparent calc(var(--pli) * 1% - 16%), rgba(255, 255, 255, .32) calc(var(--pli) * 1% - 3%), rgba(23, 23, 26, .2) calc(var(--pli) * 1% + 4%), transparent calc(var(--pli) * 1% + 18%)),
    linear-gradient(to right, rgba(23, 23, 26, .28), rgba(23, 23, 26, 0) 7%), rgba(23, 23, 26, var(--ombre, 0)); }
.bd.est-livre .planche--verso::after { background: linear-gradient(-100deg, transparent calc(var(--pli) * 1% - 16%), rgba(255, 255, 255, .32) calc(var(--pli) * 1% - 3%), rgba(23, 23, 26, .2) calc(var(--pli) * 1% + 4%), transparent calc(var(--pli) * 1% + 18%)),
    linear-gradient(to left, rgba(23, 23, 26, .28), rgba(23, 23, 26, 0) 7%), rgba(23, 23, 26, var(--ombre, 0)); }
.bd.est-livre .livre::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -26px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(14px); }

/* la feuille courbée (pendant qu'elle tourne) : six bandes emboîtées, chacune accrochée au bout de la précédente.
   --c (de -1 à 1, en JS) cambre la feuille ; les bandes du bout s'ombrent davantage dans le creux du pli */
.pli { position: absolute; inset: 0; display: none; transform-style: preserve-3d; }
.pli__bande { position: absolute; top: 0; left: 0; width: calc(100% / 6); height: 100%; transform-style: preserve-3d; transform-origin: 0 50%; }
.pli__bande .pli__bande { left: 100%; width: 100%; transform: rotateY(calc(var(--c, 0) * -9deg)); }
.bd.est-livre .pli__face { position: absolute; inset: 0 auto 0 0; width: 600%; height: 100%; }
.bd.est-livre .pli__face.planche--verso { transform: rotateY(180deg); }
.bd.est-livre .pli__face { --ombre: calc(max(var(--c, 0), var(--c, 0) * -1) * var(--i) * .045); }
.album { transition: box-shadow .2s; }
.comptoir__album .album.est-en-vol, .comptoir__album.est-en-vol .album { box-shadow: none; }

/* une page : l'en-tête du chapitre, puis la grille des cases (l'ordre du HTML est l'ordre de lecture) */
.planche__entete { flex: none; display: flex; align-items: baseline; gap: 2.4cqi; padding: 3.4cqi 4cqi 2.4cqi; }
.planche__chapitre { flex: none; margin: 0; padding: .45em .6em .4em; background: var(--ink); color: var(--jaune); font: 700 2.3cqi/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.planche__titre { flex: 1; margin: 0; font: 900 5.6cqi/.95 var(--titre); text-transform: uppercase; }
.planche__lieu { margin: 0; font: 600 2.3cqi/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #55555c; }
.planche__folio { position: absolute; bottom: 1.6cqi; left: 50%; margin: 0; translate: -50% 0; font: 700 2.4cqi/1 var(--mono); color: #77777e; }
.cases { position: relative; flex: 1; min-height: 0; margin: 0 4cqi 6cqi; display: grid; gap: 2.6cqi; grid-template-columns: 1fr 1fr; }
.cases--p1 { grid-template-rows: 1.1fr 1fr; }
.cases--p1 .case:first-child { grid-column: 1 / -1; }
.cases--p2 { grid-template-rows: .9fr 1fr 1fr; }
.cases--p2 .case--large { grid-column: 1 / -1; }
.cases--p3 { grid-template-rows: 1fr 1fr; }
.cases--p4 { grid-template-rows: 1.1fr 1fr; }
.cases--p4 .case:first-child { grid-column: 1 / -1; }
.cases--p5 { grid-template-rows: 1fr .95fr .95fr; }
.cases--p5 .case--large { grid-column: 1 / -1; }
.cases--p6 { grid-template-rows: 1fr 1fr; }
.cases--p6 .case--haute { grid-row: 1 / -1; }
.cases--p7 { grid-template-rows: .9fr 1fr 1.05fr; }
.cases--p7 .case--large { grid-column: 1 / -1; }
.cases--p8 { grid-template-rows: 1.25fr 1fr; }
.cases--p8 .case--large { grid-column: 1 / -1; }
/* une case : cadre noir épais, fond graphique */
.case { position: relative; overflow: hidden; border: 3px solid var(--ink); background: #fff; }
.case--image { background: var(--ink); }
.case__decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case--trame { background: var(--trame-n), #fff; }
.case--papier { background: radial-gradient(rgba(255, 0, 77, .2) 1.3px, transparent 1.7px) 0 0 / 9px 9px, var(--papier); }
.case--jaune { background: radial-gradient(rgba(23, 23, 26, .25) 1.4px, transparent 1.8px) 0 0 / 8px 8px, var(--jaune); }
.case--rouge { background: radial-gradient(rgba(23, 23, 26, .25) 1.4px, transparent 1.8px) 0 0 / 8px 8px, var(--rouge); }
.case--nuit { background: radial-gradient(rgba(250, 239, 93, .16) 1.3px, transparent 1.7px) 0 0 / 9px 9px, var(--ink); }
.case--rayons-rouges { background: repeating-conic-gradient(from 0deg at 50% 55%, var(--rouge) 0deg 8deg, #ff3a72 8deg 16deg); }
.case--rayons-jaunes { background: repeating-conic-gradient(from 0deg at 50% 70%, var(--jaune) 0deg 8deg, #fff7a8 8deg 16deg); }

/* chapitre 1 */
.p1__ordi { position: absolute; right: 2%; bottom: 6%; width: 64%; rotate: 4deg; }
.p1__jp { position: absolute; left: 0; bottom: -4%; width: 50%; }
.p1__sfx { right: 6%; top: 34%; rotate: 8deg; }
/* chapitre 2 */
.p2__facture { --fs: 1.8cqi; left: 34%; top: 44%; width: 46%; rotate: 6deg; }
.cases--p2 .case--papier .recit { max-width: 78%; }
.p2__total { position: absolute; left: 50%; top: 56%; margin: 0; translate: -50% -50%; font: 900 15cqi/1 var(--titre); color: var(--rouge); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); rotate: -6deg; }
.p2__cercle { position: absolute; left: 6%; top: 32%; width: 88%; height: 52%; overflow: visible; }
.p2__cercle path { fill: none; stroke: var(--rouge); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p2__jp { position: absolute; right: 8%; bottom: -10%; width: 34%; }
.p2__cri { left: 5%; top: 50%; width: 50%; translate: 0 -50%; rotate: -6deg; }
.p2__lueur { position: absolute; right: 8%; top: 50%; width: 46%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: repeating-conic-gradient(var(--jaune) 0deg 9deg, transparent 9deg 18deg); opacity: .9; }
.p2__ampoule { position: absolute; right: 18%; top: 50%; width: 26%; translate: 0 -50%; rotate: 8deg; }
.p2__sfx { right: 4%; bottom: 8%; rotate: -8deg; }
.cases--p2 .case--nuit .recit { top: auto; bottom: 10%; max-width: 50%; }
/* chapitre 3 */
.p3__calendrier { position: absolute; left: 50%; top: 58%; width: 54%; translate: -50% -50%; rotate: -5deg; display: flex; flex-direction: column; align-items: center; padding: 0 0 3cqi; background: #fff; border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.p3__calendrier b { align-self: stretch; padding: 1.4cqi 0; background: var(--rouge); color: #fff; font: 800 2.6cqi/1 var(--titre); text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.p3__spirale { position: absolute; top: -1.6cqi; left: 15%; right: 15%; height: 3cqi; background: radial-gradient(circle, var(--ink) 35%, transparent 40%) 0 0 / 3.5cqi 3cqi repeat-x; }
.p3__jour { font: 900 13cqi/1 var(--titre); }
.p3__mois { font: 600 2.4cqi/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.p3__eclat { position: absolute; left: 50%; top: 50%; width: 94%; height: 94%; translate: -50% -50%; color: var(--rouge); fill: currentColor; overflow: visible; }
.p3__eclair { position: absolute; left: 6%; top: 8%; width: 30%; rotate: -10deg; }
.p3__annee { position: absolute; left: 50%; top: 52%; margin: 0; translate: -50% -50%; font: 900 13cqi/1 var(--titre); color: var(--jaune); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.p3__sfx { right: 6%; bottom: 6%; rotate: -8deg; --fs-sfx: clamp(18px, 6.4cqi, 34px); }
.p3__tel { position: absolute; right: 2%; bottom: 4%; width: 60%; rotate: -6deg; }
.p3__bulle { left: 6%; top: auto; bottom: 30%; --qx: 70%; }
.p3__sfx-tel { right: 8%; top: 40%; rotate: 10deg; }
.p3__serveurs { position: absolute; right: 8%; top: 18%; width: 34%; }
.p3__fleche { position: absolute; width: 34%; }
.p3__fleche--a { left: 6%; top: 22%; rotate: 8deg; }
.p3__fleche--b { left: 10%; top: 44%; rotate: -6deg; }
.p3__moi { left: 4%; top: 4%; --qx: 60%; }
/* chapitre 4 */
.p4__punaise { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 3.4cqi; aspect-ratio: 1; border-radius: 50%; background: var(--rouge); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); translate: -50% -50%; }
.p4__mur { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 46%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; }
.p4__mur i { grid-column: span 2; background: var(--papier); border: 2px solid var(--ink); }
.p4__mur i:nth-child(4n + 4), .p4__mur i:nth-child(4n + 3) { background: var(--jaune); }
.p4__mur i:nth-child(n + 4):nth-child(-n + 6), .p4__mur i:nth-child(n + 10) { translate: 50% 0; }
.p4__sfx { right: 5%; top: 30%; rotate: 10deg; --fs-sfx: clamp(18px, 6.4cqi, 34px); }
.p4__annees { position: absolute; left: 50%; top: 46%; width: 70%; height: 15cqi; translate: -50% -50%; overflow: hidden; background: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--rouge); }
.p4__rouleau { display: flex; flex-direction: column; }
.p4__rouleau span { display: block; height: 15cqi; font: 900 11cqi/15cqi var(--titre); text-align: center; color: var(--jaune); }
/* chapitre 5 */
.p5__annee { position: absolute; left: 50%; top: 58%; margin: 0; translate: -50% -50%; font: 900 14cqi/1 var(--titre); color: var(--jaune); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); rotate: -6deg; }
.p5__eclat { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; height: auto; translate: -50% -50%; color: var(--rouge); fill: currentColor; stroke: var(--ink); stroke-width: 2.5; overflow: visible; }
.p5__eclat--fond { width: 84%; color: #fff; rotate: 14deg; }
.p5__nombre { position: absolute; left: 50%; top: 52%; margin: 0; translate: -50% -50%; font: 900 15cqi/1 var(--titre); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.p5__sfx { right: 4%; bottom: 8%; rotate: -10deg; }
.p5__rayons { position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255, 0, 77, .55) 0deg 8deg, transparent 8deg 16deg); }
.p5__enseigne { position: absolute; left: 50%; top: 60%; width: 72%; padding: 4.2% 5%; translate: -50% -50%; rotate: -3deg; background: var(--papier); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--rouge); }
.p5__logo { display: block; width: 100%; height: auto; }
/* chapitre 6 */
.p6__engrenages { position: absolute; right: 4%; top: 6%; width: 52%; }
.p6__dymo { position: absolute; left: 6%; top: 18%; font-size: 3.2cqi; rotate: -6deg; }
.p6__tetes { position: absolute; left: 0; right: 0; bottom: -4%; display: flex; justify-content: center; align-items: flex-end; }
.p6__tetes img { width: 26%; margin: 0 -4%; }
.p6__tetes .p6__jp { width: 34%; z-index: 2; }

/* chapitre 7 : l'ancien logo, le mot qu'on raye, puis le nouveau logo */
.p7__ancien { position: absolute; left: 50%; top: 66%; width: 74%; height: auto; translate: -50% -50%; rotate: -2deg; }
.p7__mot { position: absolute; left: 50%; top: 42%; margin: 0; translate: -50% -50%; rotate: -8deg; font: 900 12cqi/1 var(--titre); text-transform: uppercase; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.p7__mot::after { content: ""; position: absolute; left: -10%; right: -10%; top: 48%; height: 14%; background: var(--ink); rotate: -6deg; }
.p7__bouche { position: absolute; left: 8%; bottom: 6%; width: 40%; rotate: -10deg; }
.p7__bulle { right: 6%; top: 46%; --qx: 22%; }
.p7__logo { position: absolute; left: 50%; top: 62%; width: 44%; height: auto; translate: -50% -50%; }
.p7__sfx { right: 5%; bottom: 10%; rotate: -10deg; }

/* chapitre 8 : les quinze ans */
.p8__eclat { position: absolute; left: 50%; top: 56%; width: 66%; aspect-ratio: 1; height: auto; translate: -50% -50%; color: var(--rouge); fill: currentColor; stroke: var(--ink); stroke-width: 2.5; overflow: visible; }
.p8__eclat--fond { width: 80%; color: #fff; rotate: -12deg; }
.p8__nombre { position: absolute; left: 50%; top: 56%; margin: 0; translate: -50% -50%; display: flex; align-items: baseline; gap: .1em; font: 900 22cqi/1 var(--titre); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.p8__nombre span { font-size: .34em; text-transform: uppercase; color: var(--jaune); }
.p8__sfx { left: 5%; bottom: 8%; rotate: 8deg; }
.p8__dymo { position: absolute; z-index: 6; right: 6%; bottom: 9%; font-size: 3cqi; rotate: -5deg; }
.p8__rock { position: absolute; left: 4%; bottom: 2%; width: 44%; rotate: 8deg; }
.p8__bulle { right: 5%; top: 14%; max-width: 54%; --qx: 24%; }
.p8__eclair { position: absolute; left: 50%; top: 40%; width: 38%; translate: -50% -50%; rotate: -8deg; }

/* la toute dernière page : à suivre */
.planche--fin { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4cqi; padding: 10cqi 9cqi; background: var(--ink); color: #fff; }
.fin__rayons { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 80% 85%, rgba(255, 0, 77, .35) 0deg 7deg, transparent 7deg 14deg); }
.fin__suivre { position: relative; margin: 0; font: 900 15cqi/.9 var(--titre); color: var(--jaune); text-transform: uppercase; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--rouge); rotate: -4deg; }
.fin__texte { position: relative; max-width: 26ch; margin: 0; font: 600 4.2cqi/1.35 var(--titre); }
.fin__fleche { position: absolute; right: 10%; bottom: 10%; width: 30%; rotate: 70deg; filter: invert(1); }
.planche--fin .planche__folio { color: #8a8a92; }

/* le sommaire, au verso de la couverture */
.planche--sommaire { display: flex; flex-direction: column; padding: 9cqi 8cqi; background: radial-gradient(rgba(255, 0, 77, .18) 1.3px, transparent 1.7px) 0 0 / 9px 9px, var(--papier); }
.sommaire__sur { margin: 0; font: 600 2.6cqi/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.sommaire__titre { margin: 2cqi 0 0; font: 900 12cqi/.9 var(--titre); text-transform: uppercase; }
.sommaire__chapo { max-width: 30ch; margin: 3cqi 0 6cqi; font: 500 3.4cqi/1.35 var(--titre); color: #3a3a40; }
.sommaire__liste { margin: 0; padding: 0; list-style: none; counter-reset: ch; border-top: 3px solid var(--ink); }
.sommaire__liste li { display: flex; align-items: baseline; gap: 2cqi; padding: 2.2cqi 0; border-bottom: 1.5px dashed rgba(23, 23, 26, .35); counter-increment: ch; font: 800 3.8cqi/1.1 var(--titre); text-transform: uppercase; }
.sommaire__liste li::before { content: counter(ch); min-width: 5cqi; color: var(--rouge); font: 900 4.4cqi/1 var(--titre); }
.sommaire__liste span { flex: 1; }
.sommaire__liste b { font: 700 3cqi/1 var(--mono); }
.sommaire__eclair { position: absolute; right: 6%; bottom: 4%; width: 22%; rotate: 14deg; }

/* ------------------------------------------------------------------------------------------
   3. La façon de travailler : l'équipe jase, puis « ailleurs vs chez nous »
   ------------------------------------------------------------------------------------------ */
.facon { position: relative; z-index: 2; padding: 110px 0 120px; background: radial-gradient(rgba(23, 23, 26, .07) 1.2px, transparent 1.6px) 0 0 / 12px 12px, var(--papier); color: var(--ink); }
.facon__sur { color: var(--rouge); }
.facon__titre { max-width: 14ch; font-size: clamp(42px, 5.6vw, 96px); }
.facon__intro { margin: 18px 0 0; font: 600 clamp(17px, 1.3vw, 20px)/1.4 var(--titre); color: #3a3a40; }
/* la jasette : une bande de quatre cases de largeurs inégales. Pas de visage : chaque réplique sort d'un objet
   (le mégaphone, l'ordi, les ciseaux, le téléphone), sa bulle pointe vers lui, et l'objet fait son bruit */
.jasette { display: grid; grid-template-columns: 1.15fr .95fr 1.3fr 1fr; gap: 14px; margin: 46px 0 0; padding: 0; list-style: none; }
.replique { position: relative; height: clamp(400px, 34vw, 500px); overflow: hidden; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); container-type: inline-size; }
.replique--rouge { background: repeating-conic-gradient(from 0deg at 18% 92%, var(--rouge) 0deg 8deg, #ff3a72 8deg 16deg); }
.replique--jaune { background: radial-gradient(rgba(23, 23, 26, .22) 1.4px, transparent 1.8px) 0 0 / 8px 8px, var(--jaune); }
.replique--nuit { background: radial-gradient(rgba(250, 239, 93, .16) 1.3px, transparent 1.7px) 0 0 / 9px 9px, var(--ink); }
.replique--papier { background: repeating-conic-gradient(from 0deg at 26% 92%, #fff 0deg 8deg, #ececf0 8deg 16deg); }
.replique__objet { position: absolute; z-index: 1; height: auto; filter: drop-shadow(5px 5px 0 var(--ink)); }
.replique__objet--megaphone { left: 2%; bottom: 4%; width: 70%; rotate: -24deg; }
.replique__objet--ordi { right: 4%; bottom: 6%; width: 78%; rotate: 5deg; }
.replique__objet--ciseaux { left: 30%; bottom: 3%; width: 34%; rotate: -64deg; }
.replique__objet--tel { left: 4%; bottom: 5%; width: 74%; rotate: -8deg; }
/* le trait de coupe que les ciseaux suivent */
.replique__coupe { position: absolute; left: -2%; right: -2%; bottom: 23%; height: 0; border-top: 3px dashed rgba(250, 239, 93, .8); rotate: -6deg; }
.replique__sfx { --fs-sfx: clamp(28px, 13cqi, 52px); z-index: 3; right: 6%; bottom: 30%; rotate: -8deg; }
.replique--jaune .replique__sfx { right: auto; left: 7%; bottom: 40%; rotate: 7deg; color: #fff; }
.replique--nuit .replique__sfx { right: 7%; bottom: 31%; }
.replique--papier .replique__sfx { right: 5%; bottom: 36%; color: var(--rouge); }
.replique__bulle { position: absolute; z-index: 2; left: 7%; right: 7%; top: 7%; margin: 0; padding: .95em 1.05em 1em; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 1.3em;
  font: 800 clamp(16px, 7.4cqi, 24px)/1.12 var(--titre); text-transform: uppercase; text-align: center; text-wrap: balance; box-shadow: 4px 4px 0 var(--ink); }
.replique__bulle::before, .replique__bulle::after { content: ""; position: absolute; top: 100%; left: var(--qx, 30%); width: 36px; height: 44px; background: var(--ink); clip-path: var(--queue, polygon(0 0, 100% 0, 10% 100%)); }
.replique__bulle::after { top: calc(100% - 4px); width: 24px; height: 31px; margin-left: 5px; background: #fff; }
.replique__bulle--gauche { --qx: 22%; --queue: polygon(0 0, 100% 0, 6% 100%); }
.replique__bulle--droite { --qx: 62%; --queue: polygon(0 0, 100% 0, 92% 100%); }
.replique__bulle--centre { --qx: 40%; }
.replique--nuit .replique__bulle { font-size: clamp(15px, 6.2cqi, 22px); }
.replique--papier .replique__bulle { font-size: clamp(15px, 6.8cqi, 22px); }
/* au repos, chaque objet fait son petit bruit en boucle */
@media (prefers-reduced-motion: no-preference) {
  .replique.est-la .replique__objet--megaphone { animation: blz-crie 1.6s ease-in-out infinite; }
  .replique.est-la .replique__objet--ordi { animation: blz-bip 2.4s steps(1) infinite; }
  .replique.est-la .replique__objet--ciseaux { animation: blz-coupe 1.8s ease-in-out infinite; }
  .replique.est-la .replique__objet--tel { animation: blz-sonne 2.2s ease-in-out infinite; }
}
@keyframes blz-crie { 0%, 100% { scale: 1; } 12% { scale: 1.07; } 24% { scale: 1; } 36% { scale: 1.05; } }
@keyframes blz-bip { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes blz-coupe { 0%, 100% { translate: 0 0; rotate: -64deg; } 50% { translate: 18% -4%; rotate: -58deg; } }
@keyframes blz-sonne { 0%, 60%, 100% { rotate: -8deg; } 64% { rotate: -2deg; } 68% { rotate: -14deg; } 72% { rotate: -3deg; } 76% { rotate: -12deg; } 80% { rotate: -8deg; } }
/* le texte s'écrit lettre par lettre (JS) : la place est réservée d'avance pour que rien ne bouge */
.replique__bulle .l { visibility: hidden; }
.replique__bulle .l.on { visibility: visible; }

.modele { margin-top: 120px; }
.modele__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 30px; }
.modele__titre { margin: 0; font: 900 clamp(32px, 3.8vw, 60px)/.95 var(--titre); text-transform: uppercase; }
.modele__titre em { font-style: normal; color: var(--rouge); }
/* la bascule : deux choix, un curseur jaune qui glisse de l'un à l'autre */
.bascule { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; background: var(--ink); border-radius: 99px; }
.bascule__choix { position: relative; z-index: 1; min-width: 132px; min-height: 46px; padding: 0 20px; border: 0; background: none; color: #fff; cursor: pointer; font: 700 17px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; transition: color .2s; }
.bascule__choix[aria-pressed="true"] { color: var(--ink); }
.bascule__curseur { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 99px; background: var(--jaune); transition: translate .4s var(--claque); }
.bascule:has([data-cote="nous"][aria-pressed="true"]) .bascule__curseur { translate: 100% 0; }
.bascule__choix:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 99px; }
.comparo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.compare { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; background: #fff; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transition: background .35s; }
.compare[data-cote="ailleurs"] { background: #e4e4e9; }
.compare__quoi { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #55555c; }
.compare__visuel { height: 112px; display: grid; align-items: center; }
.compare__gros { margin: 0; font: 900 clamp(30px, 2.6vw, 44px)/.95 var(--titre); text-transform: uppercase; }
.compare__dit { margin: 0; font: 500 15.5px/1.42 var(--titre); color: #3a3a40; }
.compare[data-cote="nous"] .compare__ailleurs, .compare[data-cote="ailleurs"] .compare__nous { display: none; }
.compare[data-cote="nous"] .compare__gros { color: var(--rouge); }
.compare__voir { align-self: flex-start; margin-top: auto; padding: 6px 0 4px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 700 15px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: underline 2px var(--rouge); text-underline-offset: 5px; }
@media (hover: hover) { .compare__voir:hover { color: var(--rouge); } }
/* le budget : une jauge */
.jauge { position: relative; height: 54px; border: 3px solid var(--ink); background: repeating-linear-gradient(-45deg, #fff 0 7px, #e2e2e8 7px 14px); }
.jauge__plein { position: absolute; inset: 0 auto 0 0; width: var(--p, 90%); background: var(--rouge); border-right: 3px solid var(--ink); transition: width .8s var(--claque); }
.compare[data-cote="ailleurs"] .jauge { --p: 33%; }
.compare[data-cote="ailleurs"] .jauge__plein { background: var(--charbon-2); }
.jauge__reste { position: absolute; right: 8px; top: 50%; left: calc(var(--p, 90%) + 8px); translate: 0 -50%; font: 600 10px/1.15 var(--mono); text-transform: uppercase; color: #3a3a40; opacity: 0; transition: opacity .3s; }
.compare[data-cote="ailleurs"] .jauge__reste { opacity: 1; transition-delay: .4s; }
/* le délai : 24 semaines ; chez nous, trois cases jaunes suffisent */
.calendrier { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.calendrier i { aspect-ratio: 1.3; border: 2px solid var(--ink); background: #fff; transition: background .2s, opacity .3s; }
.compare[data-cote="ailleurs"] .calendrier i { background: var(--charbon-2); }
.compare[data-cote="nous"] .calendrier i { opacity: .28; }
.compare[data-cote="nous"] .calendrier i:nth-child(-n + 3) { opacity: 1; background: var(--jaune); }
/* l'information : un relais de mains en attente, ou une ligne directe */
.relais { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.relais b { z-index: 1; padding: 8px 9px; background: var(--ink); color: #fff; font: 700 12px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; }
.relais i { position: relative; z-index: 1; width: 22px; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); transition: scale .35s var(--claque), opacity .3s; }
.relais i::after { content: "…"; position: absolute; left: 50%; top: -20px; translate: -50% 0; font: 900 16px/1 var(--titre); }
.relais::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px); }
.compare[data-cote="nous"] .relais i { scale: 0; opacity: 0; }
.compare[data-cote="nous"] .relais::before { height: 6px; margin-top: -2px; background: var(--rouge); }
/* le problème : des billets qui s'empilent, ou un éclair */
.billets { position: relative; height: 100%; }
.billets span { position: absolute; left: 0; padding: 7px 10px; background: #fff; border: 2px solid var(--ink); font: 600 11px/1 var(--mono); text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); transition: translate .5s var(--claque), opacity .3s, rotate .5s; }
.billets span:nth-child(1) { top: 6%; rotate: -4deg; }
.billets span:nth-child(2) { top: 36%; left: 18%; rotate: 3deg; }
.billets span:nth-child(3) { top: 66%; left: 6%; rotate: -2deg; }
.billets__eclair { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--jaune); border: 3px solid var(--ink); font-size: 50px; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: scale .4s var(--claque); }
.compare[data-cote="nous"] .billets span { opacity: 0; translate: 140% 0; rotate: 20deg; }
.compare[data-cote="ailleurs"] .billets__eclair { scale: 0; }

/* ------------------------------------------------------------------------------------------
   4. Le statement : le chèque se déchire et laisse voir la fin de la phrase
   ------------------------------------------------------------------------------------------ */
.cheque { position: relative; z-index: 2; background: radial-gradient(rgba(250, 239, 93, .07) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--nuit); }
.cheque__scene { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 120px var(--gouttiere) 80px; }
.cheque__fort { position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 50%; margin: 0; translate: 0 -50%; font: 900 clamp(56px, 10vw, 190px)/.86 var(--titre); text-transform: uppercase; text-align: center; color: var(--jaune); text-wrap: balance; }
.cheque__fort em { font-style: normal; color: var(--rouge); }
.cheque__papier { position: relative; z-index: 2; width: min(1000px, 94vw); aspect-ratio: 2.35; rotate: -2deg; filter: drop-shadow(14px 14px 0 var(--rouge)); }
.cheque__moitie { position: absolute; inset: 0; }
.cheque__moitie--a { clip-path: polygon(0 0, 56% 0, 52% 9%, 58% 18%, 51% 27%, 57% 37%, 50% 46%, 56% 56%, 49% 65%, 55% 75%, 50% 84%, 54% 92%, 51% 100%, 0 100%); }
.cheque__moitie--b { clip-path: polygon(56% 0, 100% 0, 100% 100%, 51% 100%, 54% 92%, 50% 84%, 55% 75%, 49% 65%, 56% 56%, 50% 46%, 57% 37%, 51% 27%, 58% 18%, 52% 9%); }
.cheque__contenu { position: absolute; inset: 0; container-type: inline-size; padding: 3.4cqi 4cqi; color: var(--ink);
  background: repeating-linear-gradient(60deg, rgba(255, 0, 77, .05) 0 2px, transparent 2px 9px), repeating-linear-gradient(-60deg, rgba(23, 23, 26, .04) 0 2px, transparent 2px 9px), #f4f1e6; border: 3px solid var(--ink); }
.cheque__contenu p { margin: 0; }
.cheque__banque { font: 900 2.4cqi/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; }
.cheque__date { position: absolute; right: 4cqi; top: 3.4cqi; font: 600 1.6cqi/1 var(--mono); text-transform: uppercase; }
.cheque__date span, .cheque__ordre span, .cheque__signature span { display: inline-block; letter-spacing: .1em; }
.cheque__ordre { margin-top: 4cqi !important; font: 600 1.6cqi/1 var(--mono); text-transform: uppercase; }
.cheque__ordre span { width: 50cqi; border-bottom: 2px solid var(--ink); }
.cheque__phrase { margin-top: 3.4cqi !important; max-width: 78%; font: 900 5cqi/1 var(--titre); text-transform: uppercase; text-wrap: balance; }
.cheque__montant { position: absolute; right: 4cqi; top: 13cqi; padding: 1cqi 2cqi; border: 2px solid var(--ink); background: #fff; font: 900 3cqi/1 var(--titre); }
.cheque__signature { position: absolute; right: 4cqi; bottom: 7cqi; font: 600 1.6cqi/1 var(--mono); text-transform: uppercase; }
.cheque__signature span { width: 26cqi; margin-left: 1cqi; border-bottom: 2px solid var(--ink); }
.cheque__codes { position: absolute; left: 4cqi; bottom: 3cqi; font: 600 2cqi/1 var(--mono); letter-spacing: .2em; }
.cheque__sfx { z-index: 3; left: 50%; top: 18%; --fs-sfx: clamp(40px, 6vw, 90px); rotate: -8deg; opacity: 0; }

/* ------------------------------------------------------------------------------------------
   5. La distribution : le générique des cinq têtes, et la grande case de celui qu'on choisit
   ------------------------------------------------------------------------------------------ */
.distrib { --t: clamp(84px, 9vw, 140px); position: relative; z-index: 2; padding: 110px 0 110px; background: radial-gradient(rgba(246, 246, 247, .05) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--charbon); }
.distrib__tete { margin-bottom: 30px; }
/* le générique : les têtes sont posées sur le haut de la grande case et la débordent d'environ 35 % ;
   le nom est collé sur le menton */
.distrib__generique { --t: clamp(84px, 9vw, 140px); position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; margin-bottom: calc(var(--t) * -.52); }
.acteur { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.acteur img { display: block; width: var(--t); height: auto; filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .25s, translate .35s var(--claque); }
.acteur span { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; padding: 5px 9px 4px; background: var(--nuit); white-space: nowrap; font: 800 13px/1 var(--titre); letter-spacing: .12em; text-transform: uppercase; rotate: -3deg; transition: background .2s, color .2s; }
@media (hover: hover) { .acteur:hover img { filter: none; } }
.acteur[aria-selected="true"] img { filter: none; translate: 0 -12px; }
.acteur[aria-selected="true"] span { background: var(--rouge); color: #fff; translate: -50% -12px; }
.acteur:focus-visible { outline: 3px solid var(--jaune); outline-offset: 6px; }
/* la grande case : des rayons jaunes qui tournent lentement autour de la tête */
.plateau { position: relative; isolation: isolate; display: grid; min-height: clamp(460px, 42vw, 600px); border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--rouge); overflow: hidden; background: var(--jaune); }
.plateau::before { content: ""; position: absolute; z-index: -1; left: 26%; top: 55%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(var(--jaune) 0deg 7deg, #fff38a 7deg 14deg); }
@media (prefers-reduced-motion: no-preference) { .plateau::before { animation: blz-rayons 60s linear infinite; } }
@keyframes blz-rayons { to { rotate: 360deg; } }
.role { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 20px 50px; padding: calc(var(--t, 120px) * .5 + 40px) 56px 50px; visibility: hidden; }
.role.est-actif { visibility: visible; }
.role__tete { justify-self: center; width: min(100%, 360px); height: auto; }
.role__texte { align-self: center; }
.role__nom { margin: 0; font-size: clamp(20px, 2vw, 32px); padding: .4em .7em .35em; rotate: -2deg; }
.role__poste { margin: 16px 0 0; font: 600 14px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.role__bulle { position: relative; margin: 28px 0 0; padding: 1.1em 1.3em 1.2em; max-width: 30ch; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 1.3em; box-shadow: 6px 6px 0 var(--ink);
  font: 700 clamp(20px, 1.95vw, 30px)/1.28 var(--titre); }
.role__bulle::before, .role__bulle::after { content: ""; position: absolute; left: -34px; bottom: 30px; width: 36px; height: 30px; background: var(--ink); clip-path: polygon(100% 0, 100% 100%, 0 80%); }
.role__bulle::after { left: -24px; bottom: 33px; width: 28px; height: 21px; background: #fff; }

/* ------------------------------------------------------------------------------------------
   6. La dernière page : la case du prochain chapitre, et une petite annonce pour les carrières
   ------------------------------------------------------------------------------------------ */
.derniere { position: relative; z-index: 2; padding: 100px 0 120px; background: var(--nuit); }
.derniere__grille { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); align-items: center; gap: 40px 50px; }
.derniere__case { position: relative; padding: clamp(40px, 5vw, 80px); border: 4px dashed var(--jaune); background: radial-gradient(rgba(250, 239, 93, .1) 1.3px, transparent 1.7px) 0 0 / 10px 10px; }
.derniere__sur { margin: 0; font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.derniere__titre { margin: 14px 0 0; color: var(--blanc); font: 900 clamp(48px, 7vw, 120px)/.88 var(--titre); text-transform: uppercase; }
.derniere__titre em { font-style: normal; color: var(--rouge); }
.derniere__texte { max-width: 42ch; margin: 22px 0 30px; color: var(--gris); font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--titre); }
.derniere__fleche { position: absolute; right: 6%; bottom: 14%; width: clamp(80px, 9vw, 150px); rotate: -20deg; filter: invert(1); }
.annonce { position: relative; padding: 26px 24px 24px; background: #f2efe4; color: var(--ink); border: 2px solid var(--ink); rotate: 2deg; box-shadow: 8px 8px 0 var(--charbon-2); font-family: var(--mono); }
.annonce::before { content: ""; position: absolute; top: -18px; left: 30%; width: 104px; height: 34px; rotate: -5deg; background: url(../../_commun/img/decoupes/ruban-jaune.webp) no-repeat center / contain; }
.annonce__rubrique { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 3px double var(--ink); font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.annonce__titre { margin: 0; font: 900 clamp(20px, 1.6vw, 26px)/1.08 var(--titre); text-transform: uppercase; }
.annonce__texte { margin: 12px 0 18px; font: 500 14px/1.5 var(--mono); }
.annonce__lien { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 700 16px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline 2px var(--rouge); text-underline-offset: 5px; }
@media (hover: hover) { .annonce__lien:hover { color: var(--rouge); } }

/* ------------------------------------------------------------------------------------------
   Séparations : des déchirures de papier et des diagonales, en alternance
   ------------------------------------------------------------------------------------------ */
/* la déchirure : une bande au bas de la section, aux couleurs de la section suivante (--sous), avec une frange
   de papier clair (--frange) le long de la déchirure */
.dechire-bas { --dent: clamp(30px, 3.6vw, 58px); position: relative; padding-bottom: calc(var(--pb, 0px) + var(--dent)) !important; }
.dechire-bas::before, .dechire-bas::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: var(--dent); pointer-events: none;
  -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; }
.dechire-bas::before { --m: var(--dechire-a); background: var(--frange, var(--papier)); }
.dechire-bas::after { --m: var(--dechire-b); background: var(--sous); }
.comptoir.dechire-bas { --dechire-a: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 60L0.0 20.1L3.5 21.8L12.4 21.1L16.4 23.8L19.6 27.2L25.7 19.8L31.4 21.0L39.5 18.3L44.2 19.5L52.3 19.6L55.3 19.2L64.2 16.0L71.8 15.6L80.6 15.2L84.2 17.2L90.6 14.8L94.4 14.4L98.6 16.9L103.5 14.2L111.6 13.4L115.9 15.3L120.7 12.9L125.1 13.5L133.9 13.7L138.0 14.6L142.5 13.8L146.6 14.1L152.2 11.1L156.6 11.6L163.2 11.0L166.6 12.1L173.3 12.9L176.4 11.3L180.4 11.5L185.6 12.6L192.8 9.6L195.9 11.2L199.0 10.4L203.9 8.9L211.3 10.7L219.1 9.2L227.5 9.1L235.7 9.5L242.2 7.6L251.1 9.3L258.5 8.2L262.0 6.8L267.9 8.8L274.6 7.2L279.4 6.9L287.8 7.5L292.8 6.6L300.6 8.6L307.1 6.1L315.2 7.8L319.8 6.9L324.1 7.4L329.0 8.5L332.5 14.9L339.3 15.2L343.5 6.0L351.3 5.5L357.5 6.2L361.7 5.9L369.2 5.1L376.9 8.0L385.9 7.7L390.2 7.8L395.9 7.8L402.2 6.6L407.3 8.2L415.5 8.0L419.9 5.4L428.8 6.0L431.9 5.3L437.4 8.2L445.6 5.5L452.7 7.0L461.1 7.8L469.4 8.0L475.0 8.5L479.0 8.9L486.1 8.9L490.9 8.0L496.9 6.7L502.1 6.7L508.4 7.1L512.4 8.3L520.2 7.8L525.2 10.2L531.4 8.7L535.9 10.6L539.9 15.0L543.5 17.3L548.0 15.0L553.3 16.7L557.5 10.3L565.6 11.3L573.0 11.7L577.9 9.7L586.3 10.1L590.8 12.2L598.6 11.2L601.7 12.2L610.5 12.0L616.5 11.3L620.1 16.5L628.2 25.1L631.5 23.5L636.5 20.6L643.1 18.3L647.2 14.5L651.4 14.0L659.7 15.1L666.5 15.1L675.4 14.5L682.9 16.7L691.2 16.7L698.8 17.2L703.9 15.2L710.7 16.3L717.7 18.1L723.9 19.5L731.1 19.9L737.8 18.0L741.1 18.5L745.6 19.4L754.4 21.3L762.3 20.5L765.5 19.3L769.6 21.0L778.2 21.2L783.4 21.9L788.1 21.1L792.6 29.5L797.5 29.3L802.4 31.3L806.9 21.4L814.8 22.2L819.2 22.2L822.9 23.4L828.1 23.9L835.0 24.1L842.9 24.3L848.7 24.8L856.8 26.2L864.0 25.6L872.7 27.3L879.8 25.6L883.0 33.8L890.0 36.1L895.9 33.1L903.9 27.4L910.7 28.0L915.2 28.8L924.2 29.9L932.7 29.7L940.9 29.3L946.9 30.3L950.3 31.6L955.1 32.0L959.0 32.3L962.7 32.0L971.3 32.0L976.2 32.1L984.5 32.4L989.7 32.7L996.1 33.5L1002.5 34.5L1007.2 41.9L1014.1 42.4L1021.8 33.2L1030.2 35.3L1037.7 34.3L1045.3 36.3L1050.3 36.2L1056.5 36.6L1062.0 36.6L1069.8 37.6L1076.7 37.3L1082.2 35.7L1091.1 36.0L1096.7 38.7L1101.5 37.9L1105.6 37.4L1114.1 42.7L1120.7 45.2L1129.0 39.4L1135.8 38.4L1141.7 39.9L1149.3 39.7L1153.6 39.6L1161.4 39.7L1169.9 40.1L1175.6 38.8L1181.1 38.0L1189.0 40.0L1195.1 39.5L1199.3 38.2L1204.4 39.5L1211.6 40.2L1217.6 47.7L1225.6 45.1L1229.5 48.8L1233.0 39.5L1238.1 38.3L1243.9 40.6L1247.0 40.3L1253.4 38.0L1261.2 40.0L1266.4 38.9L1271.8 38.8L1279.2 40.9L1286.5 40.5L1290.4 40.0L1294.4 40.5L1298.0 38.3L1303.4 40.7L1309.5 40.1L1314.8 38.9L1320.2 40.7L1327.2 37.5L1332.2 37.7L1338.3 39.9L1342.2 40.1L1347.3 37.5L1356.3 39.2L1360.5 38.8L1364.0 38.6L1368.9 37.8L1372.7 37.0L1378.9 38.2L1387.4 38.8L1391.1 37.0L1395.6 38.7L1401.9 35.9L1410.8 37.7L1417.8 36.6L1425.6 42.1L1429.3 42.9L1433.8 45.6L1440.0 45.6L1440 60Z%22/%3E%3C/svg%3E'); --dechire-b: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 60L0.0 22.1L3.5 23.4L12.4 23.6L16.4 25.7L19.6 30.1L25.7 22.4L31.4 24.2L39.5 20.5L44.2 22.0L52.3 22.9L55.3 22.1L64.2 19.3L71.8 18.7L80.6 18.4L84.2 20.3L90.6 19.1L94.4 18.3L98.6 21.5L103.5 18.3L111.6 18.7L115.9 19.8L120.7 17.9L125.1 18.5L133.9 19.7L138.0 20.6L142.5 20.2L146.6 20.1L152.2 17.9L156.6 18.3L163.2 17.9L166.6 19.3L173.3 19.4L176.4 17.6L180.4 18.1L185.6 20.1L192.8 16.5L195.9 19.6L199.0 18.5L203.9 16.9L211.3 19.2L219.1 17.9L227.5 18.1L235.7 18.1L242.2 16.6L251.1 18.2L258.5 17.8L262.0 16.1L267.9 18.0L274.6 15.7L279.4 15.6L287.8 17.3L292.8 15.7L300.6 17.6L307.1 15.2L315.2 17.5L319.8 15.6L324.1 16.3L329.0 17.3L332.5 23.5L339.3 23.7L343.5 15.0L351.3 13.2L357.5 13.8L361.7 14.3L369.2 12.6L376.9 15.6L385.9 15.3L390.2 14.8L395.9 14.0L402.2 13.8L407.3 14.1L415.5 13.7L419.9 11.2L428.8 12.1L431.9 10.7L437.4 13.2L445.6 10.6L452.7 12.6L461.1 12.2L469.4 12.6L475.0 12.7L479.0 12.4L486.1 12.7L490.9 11.2L496.9 9.4L502.1 10.5L508.4 9.5L512.4 11.8L520.2 10.6L525.2 13.5L531.4 10.6L535.9 12.4L539.9 17.7L543.5 19.7L548.0 17.3L553.3 18.5L557.5 12.6L565.6 13.2L573.0 13.7L577.9 12.7L586.3 12.8L590.8 14.4L598.6 13.9L601.7 15.3L610.5 15.0L616.5 13.3L620.1 18.8L628.2 27.5L631.5 26.9L636.5 23.6L643.1 22.1L647.2 17.8L651.4 16.8L659.7 19.4L666.5 19.1L675.4 19.4L682.9 21.1L691.2 22.0L698.8 21.8L703.9 20.4L710.7 22.6L717.7 24.1L723.9 25.9L731.1 25.6L737.8 24.5L741.1 24.7L745.6 26.3L754.4 28.8L762.3 28.4L765.5 26.9L769.6 28.1L778.2 29.4L783.4 30.2L788.1 28.7L792.6 37.2L797.5 38.2L802.4 40.3L806.9 29.5L814.8 31.8L819.2 31.0L822.9 31.9L828.1 33.1L835.0 33.6L842.9 33.0L848.7 34.0L856.8 35.8L864.0 34.4L872.7 36.0L879.8 34.4L883.0 42.3L890.0 44.9L895.9 42.4L903.9 36.6L910.7 36.6L915.2 37.6L924.2 38.5L932.7 37.2L940.9 37.2L946.9 38.3L950.3 38.5L955.1 39.0L959.0 39.3L962.7 39.7L971.3 39.2L976.2 39.4L984.5 38.5L989.7 38.3L996.1 39.9L1002.5 40.7L1007.2 48.0L1014.1 47.6L1021.8 38.4L1030.2 39.3L1037.7 38.2L1045.3 40.2L1050.3 40.1L1056.5 40.9L1062.0 40.7L1069.8 41.6L1076.7 40.8L1082.2 39.0L1091.1 38.3L1096.7 40.8L1101.5 40.9L1105.6 40.0L1114.1 45.2L1120.7 47.5L1129.0 42.4L1135.8 41.2L1141.7 42.4L1149.3 41.8L1153.6 42.6L1161.4 41.4L1169.9 43.2L1175.6 41.8L1181.1 41.2L1189.0 42.9L1195.1 41.9L1199.3 40.6L1204.4 43.1L1211.6 43.5L1217.6 50.5L1225.6 48.8L1229.5 52.2L1233.0 43.6L1238.1 42.2L1243.9 45.1L1247.0 44.2L1253.4 43.3L1261.2 44.5L1266.4 43.7L1271.8 43.6L1279.2 46.6L1286.5 45.7L1290.4 46.3L1294.4 46.7L1298.0 44.0L1303.4 47.0L1309.5 47.3L1314.8 45.1L1320.2 48.2L1327.2 44.5L1332.2 45.0L1338.3 47.7L1342.2 48.0L1347.3 45.8L1356.3 47.9L1360.5 46.7L1364.0 47.3L1368.9 46.3L1372.7 46.2L1378.9 46.6L1387.4 47.9L1391.1 46.6L1395.6 47.2L1401.9 44.6L1410.8 46.6L1417.8 46.0L1425.6 51.4L1429.3 51.6L1433.8 55.3L1440.0 55.3L1440 60Z%22/%3E%3C/svg%3E'); }
.facon.dechire-bas { --dechire-a: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 60L0.0 24.3L3.1 26.0L9.2 25.1L16.9 26.4L25.7 27.1L32.2 25.9L38.0 27.0L44.9 26.0L52.8 26.1L56.0 27.7L61.0 27.0L68.7 27.2L76.4 29.3L82.6 28.8L86.6 27.2L89.8 29.4L97.6 29.2L105.1 30.9L109.3 29.4L117.9 28.9L124.0 30.1L128.6 31.4L133.6 31.3L140.7 31.2L147.6 30.1L155.2 31.1L158.9 30.5L166.9 32.7L173.2 30.6L179.1 32.3L184.3 30.6L188.5 30.8L194.1 32.6L201.2 32.3L206.0 30.9L214.2 33.2L220.8 31.8L225.6 32.0L231.1 32.5L235.7 31.3L240.3 32.7L246.0 32.9L254.2 33.9L263.1 31.4L267.7 31.7L271.3 32.5L276.0 34.2L280.1 34.2L283.2 31.7L289.0 33.1L296.9 33.1L300.7 34.0L306.3 33.2L314.4 32.3L321.9 32.0L330.8 31.3L338.4 30.9L345.8 32.4L351.2 31.6L359.2 31.8L364.0 31.8L372.0 33.3L378.7 31.9L387.6 31.1L395.6 30.7L398.9 32.5L406.1 30.1L412.7 30.9L419.0 29.0L422.8 29.6L430.3 30.0L435.4 29.0L441.4 30.4L450.2 34.5L458.7 37.1L467.5 37.6L470.7 29.7L475.2 27.8L478.3 29.3L485.4 26.4L491.3 28.6L499.8 26.5L507.4 25.1L511.3 30.4L516.0 33.6L520.8 34.5L528.7 32.9L536.3 29.4L543.1 26.0L546.5 23.2L554.4 24.9L560.0 24.4L565.0 24.2L571.8 22.3L579.5 23.0L583.1 23.7L588.3 28.0L592.9 31.1L597.9 21.5L605.7 21.9L613.1 22.2L616.2 21.7L619.9 21.5L628.7 20.6L632.5 20.0L641.2 19.9L649.9 19.8L655.3 17.7L660.3 17.2L665.4 19.2L673.5 16.7L677.9 17.5L682.4 17.9L686.9 18.8L695.8 15.8L703.3 16.1L709.8 14.9L714.7 14.9L718.4 15.8L723.5 16.3L729.9 15.4L736.7 16.1L744.1 15.0L751.8 15.9L758.1 13.1L765.4 15.5L769.8 14.8L773.0 14.4L782.0 14.8L786.5 12.8L792.1 12.5L797.5 19.2L802.0 22.3L809.2 20.7L814.6 20.2L823.0 16.2L826.3 13.2L832.7 14.0L837.1 14.4L840.4 14.6L848.5 12.8L854.4 13.9L860.8 12.4L866.6 13.2L873.3 12.5L879.4 14.4L888.0 12.7L892.7 14.2L899.7 12.6L905.2 11.8L910.2 13.0L918.8 14.8L923.0 13.7L930.0 12.4L936.1 13.0L944.9 13.7L953.8 15.8L957.7 14.6L962.9 16.0L970.6 13.4L976.2 16.4L984.7 21.7L992.6 23.0L998.4 25.8L1003.4 26.5L1010.5 23.9L1016.9 17.9L1021.1 15.4L1028.8 16.4L1033.0 17.0L1040.1 17.3L1048.8 17.7L1053.7 19.6L1061.0 19.2L1067.6 19.7L1075.3 19.5L1079.4 29.1L1087.2 25.6L1095.5 20.9L1100.3 22.1L1108.0 21.3L1113.3 23.5L1117.1 22.0L1125.6 22.6L1134.4 24.4L1138.4 23.6L1144.8 24.4L1148.5 24.3L1154.4 24.5L1157.5 24.9L1160.9 25.8L1164.4 24.0L1168.0 26.4L1175.7 26.6L1184.3 26.7L1193.2 26.2L1200.3 26.3L1203.4 29.0L1206.5 29.4L1213.5 29.8L1221.5 28.6L1229.5 30.1L1235.7 30.2L1239.5 29.2L1244.1 31.7L1252.1 31.2L1257.3 30.7L1266.1 33.0L1271.8 30.9L1277.4 40.5L1285.1 37.7L1288.2 32.0L1293.2 38.1L1300.9 39.5L1305.3 44.8L1312.3 44.5L1318.1 41.0L1322.0 34.8L1325.5 36.8L1333.3 36.3L1339.8 37.1L1347.6 36.4L1352.0 36.2L1355.3 37.1L1360.0 38.3L1368.3 37.6L1376.5 38.9L1383.6 37.2L1390.7 38.3L1397.2 39.6L1402.1 38.6L1406.7 38.3L1409.8 40.5L1415.5 38.7L1420.3 38.4L1425.9 38.9L1429.9 39.2L1435.9 39.6L1440.0 39.6L1440 60Z%22/%3E%3C/svg%3E'); --dechire-b: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 60L0.0 27.0L3.1 28.6L9.2 27.0L16.9 29.0L25.7 29.2L32.2 27.6L38.0 29.2L44.9 28.0L52.8 27.7L56.0 30.4L61.0 29.0L68.7 28.9L76.4 31.3L82.6 31.9L86.6 29.6L89.8 32.6L97.6 32.6L105.1 33.5L109.3 31.9L117.9 31.4L124.0 33.9L128.6 34.8L133.6 35.5L140.7 35.5L147.6 34.0L155.2 35.9L158.9 35.1L166.9 36.8L173.2 35.7L179.1 36.7L184.3 36.5L188.5 36.2L194.1 38.3L201.2 38.3L206.0 37.6L214.2 40.0L220.8 38.4L225.6 38.8L231.1 39.7L235.7 38.2L240.3 39.6L246.0 40.5L254.2 41.4L263.1 40.0L267.7 40.5L271.3 41.2L276.0 42.9L280.1 42.3L283.2 40.7L289.0 42.3L296.9 41.8L300.7 42.5L306.3 42.3L314.4 41.6L321.9 41.8L330.8 40.4L338.4 40.0L345.8 41.2L351.2 40.7L359.2 40.5L364.0 40.4L372.0 42.3L378.7 41.4L387.6 39.2L395.6 38.6L398.9 41.4L406.1 37.8L412.7 39.0L419.0 36.8L422.8 37.6L430.3 37.1L435.4 36.1L441.4 37.3L450.2 40.8L458.7 43.2L467.5 44.5L470.7 35.1L475.2 33.9L478.3 35.3L485.4 32.5L491.3 33.5L499.8 30.8L507.4 29.1L511.3 34.9L516.0 37.5L520.8 38.2L528.7 37.3L536.3 33.4L543.1 29.0L546.5 26.8L554.4 27.5L560.0 27.2L565.0 26.6L571.8 25.1L579.5 26.3L583.1 25.7L588.3 31.1L592.9 33.9L597.9 23.9L605.7 24.0L613.1 25.1L616.2 24.2L619.9 23.9L628.7 23.5L632.5 22.3L641.2 22.4L649.9 22.4L655.3 19.4L660.3 19.7L665.4 22.1L673.5 19.6L677.9 20.9L682.4 21.2L686.9 22.2L695.8 19.4L703.3 19.7L709.8 18.4L714.7 18.1L718.4 20.3L723.5 20.3L729.9 20.2L736.7 21.4L744.1 20.4L751.8 21.6L758.1 18.6L765.4 21.2L769.8 20.2L773.0 19.9L782.0 21.6L786.5 19.5L792.1 18.8L797.5 25.8L802.0 28.7L809.2 28.8L814.6 28.2L823.0 23.5L826.3 21.4L832.7 22.7L837.1 21.9L840.4 23.6L848.5 21.0L854.4 23.2L860.8 21.7L866.6 21.7L873.3 22.1L879.4 23.5L888.0 21.4L892.7 23.6L899.7 22.2L905.2 20.4L910.2 22.1L918.8 23.5L923.0 22.8L930.0 22.0L936.1 21.8L944.9 23.0L953.8 24.1L957.7 23.8L962.9 24.6L970.6 22.4L976.2 24.1L984.7 30.1L992.6 30.2L998.4 34.1L1003.4 34.7L1010.5 30.4L1016.9 25.1L1021.1 22.7L1028.8 23.1L1033.0 23.1L1040.1 23.6L1048.8 23.2L1053.7 24.7L1061.0 24.5L1067.6 24.7L1075.3 25.0L1079.4 33.9L1087.2 29.6L1095.5 24.8L1100.3 26.2L1108.0 24.5L1113.3 26.9L1117.1 25.7L1125.6 25.8L1134.4 28.0L1138.4 25.8L1144.8 26.9L1148.5 27.5L1154.4 27.0L1157.5 27.4L1160.9 27.8L1164.4 26.7L1168.0 28.0L1175.7 29.5L1184.3 29.0L1193.2 28.0L1200.3 28.3L1203.4 30.9L1206.5 32.1L1213.5 31.6L1221.5 31.3L1229.5 32.8L1235.7 32.4L1239.5 31.9L1244.1 33.9L1252.1 34.3L1257.3 33.6L1266.1 36.4L1271.8 35.2L1277.4 43.6L1285.1 41.0L1288.2 36.0L1293.2 42.8L1300.9 43.3L1305.3 50.1L1312.3 49.7L1318.1 45.4L1322.0 39.6L1325.5 41.5L1333.3 42.3L1339.8 42.6L1347.6 43.1L1352.0 42.7L1355.3 43.4L1360.0 45.4L1368.3 44.0L1376.5 45.5L1383.6 44.4L1390.7 46.0L1397.2 47.5L1402.1 47.3L1406.7 46.8L1409.8 49.1L1415.5 47.2L1420.3 46.3L1425.9 48.2L1429.9 48.1L1435.9 48.8L1440.0 48.8L1440 60Z%22/%3E%3C/svg%3E'); }
.distrib.dechire-bas { --dechire-a: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 60L0.0 25.0L4.7 25.3L13.4 25.8L16.9 24.4L24.9 25.4L28.1 24.1L31.1 26.4L37.6 33.9L40.7 36.6L45.0 33.3L49.7 29.7L56.5 24.3L61.1 25.5L66.2 24.6L73.0 26.9L76.1 27.1L79.8 26.2L86.9 24.7L91.2 26.0L94.8 25.3L100.4 26.3L105.1 27.5L113.0 27.6L121.7 27.8L130.5 28.3L135.6 27.3L139.3 28.4L145.9 25.9L153.2 26.5L161.5 26.5L167.9 28.6L173.1 26.3L181.8 26.3L189.6 26.5L193.3 28.8L201.6 27.6L205.0 27.1L211.4 27.5L215.4 26.0L223.1 26.1L228.8 28.5L232.8 26.0L237.8 29.0L246.3 27.5L249.5 26.1L256.0 26.8L260.4 27.1L266.3 27.5L272.4 27.7L278.4 28.6L285.8 27.2L294.6 27.1L300.3 27.9L307.2 28.1L312.5 28.7L316.0 28.4L319.3 26.3L326.0 28.3L329.3 27.9L336.1 27.9L341.2 27.3L350.2 28.1L354.4 26.6L362.0 26.6L368.9 26.1L377.5 27.8L383.7 26.6L391.1 24.5L396.9 24.8L405.7 33.0L409.6 30.8L414.9 34.4L420.2 24.5L427.6 26.7L434.0 24.1L438.9 26.4L447.7 24.6L455.0 25.5L462.9 23.8L469.3 23.7L474.4 24.7L478.9 22.5L486.8 23.4L490.9 21.8L495.8 22.7L504.3 23.4L510.9 22.6L519.2 23.1L524.5 20.9L530.0 21.1L535.0 22.9L541.4 30.0L547.1 28.6L553.6 26.7L561.2 20.8L567.1 20.0L575.6 22.0L584.3 19.5L591.0 19.4L598.2 19.7L606.4 18.6L613.1 18.1L618.4 19.1L625.7 19.9L633.4 18.6L640.7 18.6L646.6 19.1L653.7 17.1L662.4 18.9L669.8 15.9L678.7 17.7L685.7 18.4L692.8 16.2L698.9 17.7L704.0 16.9L710.8 14.8L718.4 15.4L726.6 14.9L735.5 15.6L741.1 14.7L749.1 16.7L756.2 13.8L761.9 16.1L764.9 14.6L769.1 14.5L774.8 13.3L782.8 13.0L787.9 15.0L794.8 15.5L800.3 14.9L806.1 14.1L814.2 14.7L819.5 20.0L823.6 18.5L827.1 18.9L833.9 23.3L839.1 12.4L844.7 14.5L848.1 15.3L852.7 12.3L858.1 14.5L864.6 14.2L869.4 15.0L877.1 15.2L884.9 12.4L892.4 13.6L898.5 13.2L902.1 12.2L905.7 12.3L910.5 14.1L916.4 15.3L924.0 13.3L928.8 24.5L934.9 19.0L941.5 21.1L946.3 24.6L951.1 20.0L959.0 13.1L964.0 15.5L970.4 14.0L977.7 14.6L985.6 14.2L990.5 15.9L994.0 15.1L1002.0 16.6L1007.8 14.4L1012.7 15.5L1021.1 17.1L1026.9 17.1L1031.9 17.3L1036.1 15.1L1042.7 15.5L1049.3 15.7L1058.1 18.4L1063.4 18.4L1072.3 17.2L1080.2 19.1L1088.7 19.5L1092.3 16.9L1098.4 19.3L1101.5 19.9L1105.6 18.8L1114.4 19.2L1121.8 21.1L1127.3 21.2L1133.6 19.1L1138.3 20.5L1142.3 21.8L1150.2 19.8L1158.1 19.9L1162.4 20.2L1169.1 22.9L1177.7 20.7L1183.6 21.3L1189.6 23.6L1197.8 24.1L1201.9 23.0L1207.7 23.9L1212.5 24.1L1216.1 22.7L1222.9 23.1L1229.9 24.9L1234.5 24.4L1239.0 25.5L1243.6 24.0L1249.1 26.5L1256.3 25.6L1260.9 25.8L1267.4 27.8L1271.6 25.4L1276.1 27.9L1283.7 27.2L1290.1 25.9L1294.7 28.0L1301.7 27.9L1305.2 28.2L1312.4 29.3L1316.0 28.1L1320.1 29.7L1327.6 30.1L1331.2 39.8L1335.6 37.0L1339.1 37.5L1344.1 39.7L1349.2 35.1L1353.1 29.5L1360.7 29.0L1369.0 29.0L1373.0 30.8L1376.9 33.5L1384.5 40.1L1392.5 35.6L1401.5 42.3L1406.8 39.9L1412.2 41.3L1419.3 36.5L1425.1 37.9L1431.9 31.6L1436.6 33.3L1440.0 33.3L1440 60Z%22/%3E%3C/svg%3E'); --dechire-b: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 60L0.0 28.7L4.7 28.9L13.4 29.1L16.9 28.7L24.9 29.8L28.1 28.4L31.1 30.3L37.6 38.0L40.7 41.2L45.0 37.6L49.7 34.6L56.5 30.0L61.1 30.6L66.2 30.6L73.0 32.7L76.1 32.8L79.8 32.7L86.9 31.9L91.2 32.2L94.8 31.9L100.4 33.8L105.1 34.9L113.0 35.4L121.7 35.3L130.5 36.9L135.6 35.3L139.3 37.3L145.9 34.8L153.2 35.1L161.5 35.3L167.9 37.0L173.1 34.8L181.8 35.9L189.6 34.9L193.3 37.5L201.6 37.1L205.0 36.5L211.4 36.4L215.4 35.7L223.1 34.9L228.8 37.0L232.8 35.4L237.8 38.6L246.3 35.7L249.5 35.2L256.0 36.0L260.4 36.1L266.3 35.9L272.4 36.4L278.4 36.6L285.8 34.7L294.6 34.5L300.3 36.0L307.2 35.1L312.5 36.4L316.0 35.9L319.3 33.9L326.0 34.7L329.3 34.7L336.1 34.1L341.2 33.4L350.2 34.2L354.4 32.8L362.0 31.7L368.9 31.1L377.5 32.9L383.7 30.6L391.1 28.2L396.9 28.7L405.7 36.7L409.6 33.8L414.9 37.3L420.2 28.5L427.6 29.6L434.0 26.7L438.9 28.7L447.7 26.6L455.0 27.7L462.9 25.9L469.3 26.8L474.4 26.9L478.9 24.3L486.8 25.5L490.9 24.2L495.8 25.3L504.3 25.1L510.9 25.4L519.2 25.5L524.5 22.8L530.0 23.4L535.0 26.0L541.4 32.4L547.1 31.7L553.6 29.8L561.2 23.8L567.1 23.5L575.6 25.4L584.3 23.0L591.0 22.9L598.2 24.2L606.4 23.8L613.1 23.8L618.4 24.0L625.7 25.8L633.4 24.3L640.7 24.3L646.6 26.0L653.7 24.3L662.4 25.7L669.8 23.0L678.7 24.5L685.7 26.1L692.8 24.4L698.9 25.2L704.0 25.5L710.8 22.6L718.4 23.8L726.6 24.4L735.5 24.0L741.1 23.9L749.1 25.2L756.2 22.6L761.9 25.3L764.9 24.0L769.1 23.9L774.8 22.9L782.8 21.8L787.9 24.2L794.8 24.7L800.3 23.5L806.1 23.5L814.2 23.2L819.5 29.6L823.6 27.8L827.1 27.4L833.9 31.3L839.1 20.4L844.7 22.4L848.1 23.5L852.7 20.1L858.1 22.3L864.6 21.6L869.4 22.3L877.1 22.5L884.9 20.2L892.4 20.0L898.5 20.2L902.1 18.7L905.7 18.1L910.5 20.8L916.4 21.3L924.0 19.1L928.8 30.5L934.9 23.5L941.5 25.5L946.3 29.7L951.1 24.0L959.0 16.9L964.0 19.8L970.4 17.6L977.7 17.6L985.6 18.2L990.5 18.6L994.0 18.3L1002.0 19.4L1007.8 17.1L1012.7 18.4L1021.1 19.2L1026.9 19.2L1031.9 20.3L1036.1 18.2L1042.7 18.3L1049.3 18.6L1058.1 20.2L1063.4 20.9L1072.3 19.7L1080.2 21.1L1088.7 22.0L1092.3 19.4L1098.4 22.4L1101.5 22.4L1105.6 21.5L1114.4 21.4L1121.8 24.4L1127.3 24.9L1133.6 21.8L1138.3 23.3L1142.3 25.9L1150.2 23.5L1158.1 24.0L1162.4 24.0L1169.1 26.5L1177.7 24.9L1183.6 25.8L1189.6 28.1L1197.8 29.3L1201.9 29.1L1207.7 29.6L1212.5 29.8L1216.1 28.8L1222.9 30.0L1229.9 30.8L1234.5 30.6L1239.0 32.6L1243.6 31.4L1249.1 34.4L1256.3 33.5L1260.9 33.3L1267.4 36.2L1271.6 33.0L1276.1 36.0L1283.7 36.2L1290.1 33.9L1294.7 37.0L1301.7 36.4L1305.2 37.8L1312.4 38.3L1316.0 37.2L1320.1 39.4L1327.6 39.8L1331.2 49.6L1335.6 46.8L1339.1 46.9L1344.1 48.8L1349.2 44.4L1353.1 39.2L1360.7 38.6L1369.0 38.8L1373.0 40.1L1376.9 43.0L1384.5 49.6L1392.5 44.2L1401.5 51.4L1406.8 48.8L1412.2 49.0L1419.3 45.5L1425.1 46.0L1431.9 40.1L1436.6 40.8L1440.0 40.8L1440 60Z%22/%3E%3C/svg%3E'); }
/* le dessous de chaque déchirure */
.comptoir.dechire-bas { --pb: 70px; --sous: radial-gradient(rgba(246, 246, 247, .05) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--charbon); --frange: var(--papier); }
.facon.dechire-bas { --pb: 120px; --sous: radial-gradient(rgba(250, 239, 93, .07) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--nuit); --frange: #fff; }
.distrib.dechire-bas { --pb: 110px; --sous: var(--nuit); --frange: var(--jaune); }
/* la diagonale : la section monte par-dessus la précédente, en biais (le sens change d'une fois à l'autre) */
.biais-haut { margin-top: calc(-1 * var(--biais)); padding-top: calc(var(--pt, 0px) + var(--biais)) !important; clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); }
.biais-haut--inverse { clip-path: polygon(0 0, 100% var(--biais), 100% 100%, 0 100%); }
.facon.biais-haut { --pt: 110px; z-index: 4; }
.distrib.biais-haut { --pt: 110px; z-index: 4; }
/* sous une diagonale, la section du dessus garde une marge pour que rien ne soit caché */
.bd { padding-bottom: calc(60px + var(--biais)); }
.bd.est-livre { padding-bottom: var(--biais); }
.cheque { z-index: 3; padding-bottom: calc(var(--biais) * .6); }
/* l'album et ses ornements restent par-dessus la bande déchirée du comptoir */
.comptoir__grille { position: relative; z-index: 2; }

/* ------------------------------------------------------------------------------------------
   7. Tablette et mobile
   ------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .jasette, .comparo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .comptoir__grille { grid-template-columns: minmax(0, 1fr); }
  .comptoir__album { width: min(320px, 70vw); margin-top: 20px; }
  .derniere__grille { grid-template-columns: minmax(0, 1fr); }
  .annonce { max-width: 420px; }
  .role { grid-template-columns: minmax(0, 1fr); align-content: center; padding: calc(var(--t) * .5 + 30px) 24px 36px; }
  .role__texte { order: -1; }
  .role__tete { width: min(62%, 260px); }
  .role__bulle::before, .role__bulle::after { left: 30%; bottom: -26px; width: 26px; height: 28px; clip-path: polygon(0 0, 100% 0, 20% 100%); }
  .role__bulle::after { left: calc(30% + 4px); bottom: -17px; width: 17px; height: 19px; }
}
@media (max-width: 760px) {
  .bd.est-livre .livre { --pw: min(calc(100vw - 32px), calc((100svh - 130px) * .68)); --ph: calc(var(--pw) / .68); }
  .bd.est-livre .bd__scene { padding-top: 60px; }

  /* ---------- sur téléphone, la BD se lit à la verticale : chaque case en pleine largeur, le texte à sa vraie taille */
  .bd:not(.est-livre) { padding: 56px 0 0; }
  .bd:not(.est-livre) .bd__tete { margin-bottom: 26px; }
  .bd:not(.est-livre) .livre { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .bd:not(.est-livre) .planche { width: 100%; height: auto; overflow: visible; border: 0; background: none; color: var(--blanc); padding: 0 14px 44px;
    --fs-recit: 16px; --fs-bulle: 15px; --fs-sfx: clamp(30px, 11cqi, 46px); }
  /* la couverture est déjà sur le comptoir, juste au-dessus ; le sommaire ne sert à rien quand tout se lit d'un trait */
  .bd:not(.est-livre) .planche--couverture, .bd:not(.est-livre) .planche--sommaire, .bd:not(.est-livre) .planche__folio { display: none; }
  .bd:not(.est-livre) .planche__entete { flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 2px 16px; }
  .bd:not(.est-livre) .planche__chapitre { font-size: 12px; background: var(--jaune); color: var(--nuit); }
  .bd:not(.est-livre) .planche__lieu { font-size: 12px; color: var(--gris); }
  .bd:not(.est-livre) .planche__titre { flex: 0 0 100%; order: 3; font-size: 31px; line-height: 1; color: var(--blanc); }
  .bd:not(.est-livre) .cases { display: flex; flex-direction: column; flex: none; gap: 12px; margin: 0; }
  .bd:not(.est-livre) .case { aspect-ratio: 1.26; flex: none; box-shadow: 5px 5px 0 #000; }
  .bd:not(.est-livre) .case--image { aspect-ratio: 1.42; }
  .bd:not(.est-livre) .case--haute { aspect-ratio: .86; }
  .bd:not(.est-livre) .recit { max-width: 82%; }
  .bd:not(.est-livre) .cases--p2 .case--nuit .recit { max-width: 52%; }
  /* les éléments dessinés étaient pensés pour une demi-page : on les ramène à l'échelle d'une case pleine largeur */
  .bd:not(.est-livre) .p1__ordi { width: 46%; right: 4%; bottom: 7%; }
  .bd:not(.est-livre) .p1__jp { width: 40%; bottom: -8%; }
  .bd:not(.est-livre) .p1__sfx { top: 26%; right: 8%; }
  .bd:not(.est-livre) .p2__facture { --fs: 11px; left: 44%; top: 34%; width: 42%; }
  .bd:not(.est-livre) .cases--p2 .case--papier .recit { max-width: 62%; }
  .bd:not(.est-livre) .p2__total { top: 60%; font-size: 21cqi; }
  .bd:not(.est-livre) .p2__cercle { left: 8%; top: 36%; width: 84%; height: 50%; }
  .bd:not(.est-livre) .p3__calendrier { width: 32%; top: 62%; left: 66%; padding-bottom: 8px; }
  .bd:not(.est-livre) .cases--p3 .case--papier .recit { max-width: 46%; }
  .bd:not(.est-livre) .p3__calendrier b { font-size: 12px; padding: 5px 0; }
  .bd:not(.est-livre) .p3__jour { font-size: 15cqi; }
  .bd:not(.est-livre) .p3__mois { font-size: 9.5px; }
  .bd:not(.est-livre) .p3__eclat { width: 76%; height: 92%; }
  .bd:not(.est-livre) .p3__eclair { width: 20%; }
  .bd:not(.est-livre) .p3__annee { font-size: 19cqi; }
  .bd:not(.est-livre) .p3__tel { width: 40%; right: 6%; }
  .bd:not(.est-livre) .p3__bulle { left: 6%; bottom: 16%; }
  .bd:not(.est-livre) .p3__sfx-tel { top: 22%; }
  .bd:not(.est-livre) .p3__serveurs { width: 24%; top: 12%; right: 12%; }
  .bd:not(.est-livre) .p3__fleche { width: 24%; }
  .bd:not(.est-livre) .p3__fleche--a { left: 38%; top: 16%; }
  .bd:not(.est-livre) .p3__fleche--b { left: 40%; top: 38%; }
  .bd:not(.est-livre) .p3__moi { left: 6%; top: 8%; }
  .bd:not(.est-livre) .p4__punaise { width: 13px; }
  .bd:not(.est-livre) .p4__mur { left: 14%; right: 14%; height: 44%; }
  .bd:not(.est-livre) .p4__sfx { top: 24%; }
  .bd:not(.est-livre) .p4__annees { top: 42%; width: 52%; height: 22cqi; }
  .bd:not(.est-livre) .p4__rouleau span { height: 22cqi; font-size: 16cqi; line-height: 22cqi; }
  .bd:not(.est-livre) .p5__annee { font-size: 25cqi; }
  .bd:not(.est-livre) .p5__eclat { width: 50%; }
  .bd:not(.est-livre) .p5__eclat--fond { width: 62%; }
  .bd:not(.est-livre) .p5__nombre { font-size: 23cqi; }
  .bd:not(.est-livre) .p5__enseigne { width: 60%; top: 62%; }
  .bd:not(.est-livre) .p7__ancien { width: 64%; top: 68%; }
  .bd:not(.est-livre) .p7__mot { font-size: 20cqi; }
  .bd:not(.est-livre) .p7__logo { width: 38%; }
  .bd:not(.est-livre) .p8__eclat { width: 46%; }
  .bd:not(.est-livre) .p8__eclat--fond { width: 58%; }
  .bd:not(.est-livre) .p8__nombre { font-size: 30cqi; }
  .bd:not(.est-livre) .p8__rock { width: 36%; }
  .bd:not(.est-livre) .p8__eclair { width: 26%; }
  .bd:not(.est-livre) .p6__engrenages { width: 36%; right: 6%; top: 8%; }
  .bd:not(.est-livre) .p6__dymo { font-size: 13px; top: 20%; }
  .bd:not(.est-livre) .p6__tetes img { width: 21%; }
  .bd:not(.est-livre) .p6__tetes .p6__jp { width: 28%; }
  /* la dernière case : à suivre */
  .bd:not(.est-livre) .livre__dos .planche--fin { min-height: 92vw; padding: 44px 26px; background: var(--ink); overflow: hidden; }
  .bd:not(.est-livre) .fin__suivre { font-size: 17cqi; }
  .bd:not(.est-livre) .fin__texte { font-size: 18px; }
  .bd:not(.est-livre) .fin__fleche { width: 24%; }
  /* les petites commandes de la page : de vraies cibles */
  .compare__voir, .annonce__lien { display: inline-flex; align-items: center; min-height: 44px; }
  .jauge__reste { font-size: 12px; }
  .annonce__rubrique { font-size: 13px; }
  .acteur span { font-size: 11px; }
}
@media (max-width: 640px) {
  .comptoir { padding-top: 22px; }
  .jasette, .comparo { grid-template-columns: minmax(0, 1fr); }
  .replique { height: 340px; }
  .distrib { --t: 17vw; }
  .distrib__generique { --t: 17vw; gap: 4px; }
  .acteur span { font-size: 9.5px; letter-spacing: .05em; padding: 4px 5px 3px; }
  .role__bulle { font-size: 18px; }
  .plateau { min-height: 560px; }
  .cheque__papier { aspect-ratio: 1.6; }
  .cheque__phrase { font-size: 6.4cqi; max-width: 92%; }
  .cheque__montant { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jauge__plein, .calendrier i, .relais i, .billets span, .billets__eclair, .bascule__curseur, .acteur img { transition: none; }
  /* sans la déchirure, le chèque cacherait la fin de la phrase : elle passe dessous, et la scène ne prend que sa hauteur */
  .cheque__scene { display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 4vw, 56px); min-height: 0; padding-block: clamp(80px, 9vw, 130px); }
  .cheque__fort { position: static; order: 2; translate: none; }
}