/* Ce qu'ils ont dit — couche « collage sérigraphié »
   Affiches militantes collées dans la rue : papier journal, couches d'encre
   successives, bords déchirés, surimpression et décalages de repérage.
   Chargée APRÈS style.css : ici la matière, là les composants. */

:root {
  /* encres : une palette d'imprimeur, six couleurs, pas une de plus */
  --vermillon: #e0301c;
  --turquoise: #1f8f8a;
  --nuit: #101a2b;
  --ocre: #e8a72b;
  --encre: #0d0b0a;
  --journal: #e8dfc8;
  --journal-fonce: #d8ccae;

  /* les anciens jetons pointent vers les nouvelles encres : tout style.css suit */
  --rouge: var(--vermillon);
  --rouge-fonce: #b3230f;
  --noir: var(--encre);
  --papier: var(--journal);
  --creme: #f2ead4;
  --blanc: #f7f1e0;
  --jaune: var(--ocre);
  --gris: #4a4438;
  --gris-clair: #c3b89a;

  /* épaisseur des bords déchirés */
  --dechirure: 44px;   /* la zone arrachée : aucun contenu ne doit y tomber */
  --fibre: #fbf7ec;     /* le cœur du papier, révélé par la déchirure */
}

/* ---------- le papier ---------- */
/* Fibre + trame de similigravure, très discrètes : la matière doit se sentir
   sous les doigts, pas se voir. Le texte n'est jamais posé dessus directement. */
body {
  background-color: var(--journal);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(13, 11, 10, .10) 1px, transparent 1.6px),
    repeating-linear-gradient(94deg, rgba(13, 11, 10, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(2deg, rgba(160, 130, 80, .05) 0 2px, transparent 2px 7px);
  background-size: 5px 5px, auto, auto;
}

/* ---------- morceau de papier déchiré ---------- */
/* Deux masques, et c'est tout le principe. Le papier imprimé se déchire en
   deux temps : la couche d'encre casse AVANT le cœur de la feuille, laissant
   une lisière de fibre claire — qui disparaît par endroits, là où la déchirure
   est passée franche. Un seul masque ne donne qu'un bord dentelé.
   Masques produits par scripts/dechirures.py.
   Si les SVG manquent, seule la déchirure s'en va : le contenu reste lisible. */
.papier {
  --ext-haut: url("/assets/motifs/dechirure-1-haut-ext.svg");
  --ext-bas: url("/assets/motifs/dechirure-1-bas-ext.svg");
  --int-haut: url("/assets/motifs/dechirure-1-haut-int.svg");
  --int-bas: url("/assets/motifs/dechirure-1-bas-int.svg");
  --fond-papier: var(--creme);

  position: relative;
  min-height: calc(var(--dechirure) * 2 + 40px);
  background-color: var(--fibre);
  -webkit-mask-image: var(--ext-haut), var(--ext-bas), linear-gradient(#000, #000);
  mask-image: var(--ext-haut), var(--ext-bas), linear-gradient(#000, #000);
  -webkit-mask-position: center top, center bottom, center;
  mask-position: center top, center bottom, center;
  -webkit-mask-size: 100% var(--dechirure), 100% var(--dechirure), 100% calc(100% - var(--dechirure) * 2 + 3px);
  mask-size: 100% var(--dechirure), 100% var(--dechirure), 100% calc(100% - var(--dechirure) * 2 + 3px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.papier::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fond-papier);
  -webkit-mask-image: var(--int-haut), var(--int-bas), linear-gradient(#000, #000);
  mask-image: var(--int-haut), var(--int-bas), linear-gradient(#000, #000);
  -webkit-mask-position: center top, center bottom, center;
  mask-position: center top, center bottom, center;
  -webkit-mask-size: 100% var(--dechirure), 100% var(--dechirure), 100% calc(100% - var(--dechirure) * 2 + 3px);
  mask-size: 100% var(--dechirure), 100% var(--dechirure), 100% calc(100% - var(--dechirure) * 2 + 3px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* le contenu passe au-dessus de la couche d'encre */
.papier > * { position: relative; z-index: 1; }

/* trois déchirures, distribuées par le générateur : deux morceaux voisins ne
   sont jamais déchirés pareil */
.dech-2 {
  --ext-haut: url("/assets/motifs/dechirure-2-haut-ext.svg");
  --ext-bas: url("/assets/motifs/dechirure-2-bas-ext.svg");
  --int-haut: url("/assets/motifs/dechirure-2-haut-int.svg");
  --int-bas: url("/assets/motifs/dechirure-2-bas-int.svg");
}
.dech-3 {
  --ext-haut: url("/assets/motifs/dechirure-3-haut-ext.svg");
  --ext-bas: url("/assets/motifs/dechirure-3-bas-ext.svg");
  --int-haut: url("/assets/motifs/dechirure-3-haut-int.svg");
  --int-bas: url("/assets/motifs/dechirure-3-bas-int.svg");
}

.papier-nuit { --fond-papier: var(--nuit); color: var(--journal); }
.papier-encre { --fond-papier: var(--encre); color: var(--journal); }
.papier-vermillon { --fond-papier: var(--vermillon); color: var(--journal); }
.papier-turquoise { --fond-papier: var(--turquoise); color: var(--journal); }

/* ---------- pivots ---------- */
/* Huit inclinaisons, distribuées par le générateur : irrégulier mais stable
   d'une construction à l'autre. Jamais au-delà de 2 degrés : au-delà, les
   lignes de texte se lisent mal. */
.pivot-0 { transform: rotate(-2.4deg) translate(-4px, 2px); }
.pivot-1 { transform: rotate(1.7deg) translate(3px, -3px); }
.pivot-2 { transform: rotate(-1.1deg) translate(5px, 1px); }
.pivot-3 { transform: rotate(2.9deg) translate(-2px, -2px); }
.pivot-4 { transform: rotate(-3.1deg) translate(2px, 3px); }
.pivot-5 { transform: rotate(0.9deg) translate(-5px, -1px); }
.pivot-6 { transform: rotate(2.2deg) translate(4px, 2px); }
.pivot-7 { transform: rotate(-1.8deg) translate(-3px, -3px); }

/* ---------- surimpression ---------- */
/* Les encres se mélangent quand elles se chevauchent, comme de vraies
   transparentes. Multiply sur crème donne le brun d'imprimerie attendu. */
.surimpression { mix-blend-mode: multiply; }

/* ---------- décalage de repérage ---------- */
/* Le cyan a bougé d'un demi-millimètre au calage : c'est le détail qui dit
   « imprimé », et aucun générateur ne le met de lui-même. */
.decale {
  text-shadow: 1.5px -1.5px 0 rgba(31, 143, 138, .62);
}
.decale-rouge { text-shadow: -1.5px 1.5px 0 rgba(224, 48, 28, .55); }

/* ---------- aplats d'encre ---------- */
/* Grandes formes géométriques posées derrière le contenu : cercles vermillon,
   chevrons turquoise, fragments ocre. Décoratives, donc invisibles au lecteur
   d'écran et jamais porteuses d'information. */
.encres {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.encres > * { position: absolute; mix-blend-mode: multiply; }

.cercle {
  border-radius: 50%;
  background: var(--vermillon);
  opacity: .88;
}
.chevron {
  background: var(--turquoise);
  clip-path: polygon(0 0, 46% 0, 100% 50%, 46% 100%, 0 100%, 54% 50%);
  opacity: .8;
}
.fragment-ocre {
  background: var(--ocre);
  clip-path: polygon(2% 8%, 96% 0, 100% 84%, 38% 100%, 0 92%);
  opacity: .85;
}
.aplat-nuit { background: var(--nuit); opacity: .93; }

/* ---------- ornements ---------- */
/* Jamais du papier peint : des fragments imprimés, interrompus par les
   couches voisines. D'où les masques partiels. */
.ornement {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .9;
}

.tapis-floral {
  background-image: url("/assets/motifs/floral.webp");
  background-size: 340px 340px;
  background-color: var(--encre);
}

.trame {
  background-image: url("/assets/motifs/trames.svg");
  mix-blend-mode: multiply;
  opacity: .5;
}

.colonnes-journal {
  background-image: url("/assets/motifs/fragments-journal.svg");
  background-repeat: no-repeat;
  opacity: .16;
  mix-blend-mode: multiply;
}

.ruban {
  position: absolute;
  background-image: url("/assets/motifs/ruban-colle.svg");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* ---------- lisibilité : la règle qui prime sur tout le reste ---------- */
/* Le texte se pose toujours sur un aplat plein. Les trames, les motifs et les
   colonnes de journal vivent derrière, dans les marges, jamais sous une ligne
   de texte. Si l'un des deux doit céder, c'est le décor. */
.contenant, .citation, .prose, .tweet, .carte { position: relative; z-index: 1; }

@media (prefers-contrast: more) {
  body { background-image: none; }
  .ornement, .trame, .colonnes-journal, .encres { display: none; }
  .decale, .decale-rouge { text-shadow: none; }
}

/* Impression papier : on retire la matière, on garde le fond. */
@media print {
  body { background: #fff; }
  .encres, .ornement, .trame, .colonnes-journal, .ruban { display: none; }
  .pivot-0, .pivot-1, .pivot-2, .pivot-3,
  .pivot-4, .pivot-5, .pivot-6, .pivot-7 { transform: none; }
}

/* ============================================================
   COMPOSANTS — le collage remplace les cadres
   ============================================================ */

/* ---------- la citation : un morceau d'affiche arraché ---------- */
/* Le ruban doit déborder du papier pour se lire comme du ruban ; or le masque
   de déchirure coupe tout ce qui dépasse. D'où l'enveloppe : le papier est
   masqué, le ruban ne l'est pas, et le pivot les emporte ensemble. */
.colle {
  position: relative;
  display: flex;
  isolation: isolate;
}
.colle > .citation { flex: 1; min-width: 0; }

.citation {
  border: 0 !important;
  box-shadow: none !important;
  /* le contenu commence FRANCHEMENT après la déchirure, sinon elle le mange */
  padding: calc(var(--dechirure) + 12px) 0 calc(var(--dechirure) + 8px);
  background-color: transparent;
}
.citation-date {
  margin: 0 14px;
  background: var(--nuit);
  color: var(--journal);
}
.citation-date .theme { color: var(--ocre); }
.citation blockquote { padding: 16px 18px 6px; }
.citation .pourquoi, .citation .contexte { margin-left: 18px; margin-right: 18px; }
.citation .preuve { padding: 12px 18px 6px; }

/* la gravité se dit par l'encre, pas par un cadre */
.citation.grave-5 .citation-date { background: var(--vermillon); }
.citation.grave-5 .citation-date .theme { color: var(--journal); }
.citation.grave-4 .citation-date { background: var(--encre); }

/* ---------- ruban adhésif ---------- */
/* Cinq morceaux piochés dans la planche, posés de travers sur les coins. */
.ruban {
  width: 104px;
  height: 46px;
  background-image: url("/assets/motifs/ruban-colle.svg");
  background-size: 600% 200%;
  background-repeat: no-repeat;
  z-index: 4;
  opacity: 1;
  filter: contrast(1.15) saturate(1.1);
}
.ruban-0 { top: -16px; left: -20px; transform: rotate(-24deg); background-position: 0 0; }
.ruban-1 { top: -18px; right: -16px; transform: rotate(19deg); background-position: 25% 0; }
.ruban-2 { bottom: -14px; left: 12%; transform: rotate(6deg); background-position: 50% 0; }
.ruban-3 { top: -14px; left: 30%; transform: rotate(-5deg); background-position: 75% 0; }
.ruban-4 { bottom: -16px; right: -14px; transform: rotate(-17deg); background-position: 100% 0; }

/* ---------- ornement posé sur un morceau ---------- */
.sceau {
  position: absolute;
  left: 16px;
  bottom: 2px;
  width: 72px;
  height: 72px;
  background-image: url("/assets/motifs/rosaces.svg");
  background-size: 500% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: .55;
  z-index: 0;
}
.sceau-0 { background-position: 0 0; }
.sceau-1 { background-position: 25% 0; }
.sceau-2 { background-position: 50% 0; }
.sceau-3 { background-position: 75% 0; }
.sceau-4 { background-position: 100% 0; }

/* ---------- les grilles respirent et se désalignent ---------- */
/* Une grille trop propre est le premier signe d'une interface ; on décale une
   colonne sur deux pour que les morceaux se chevauchent comme des affiches
   collées les unes par-dessus les autres. */
.citations-une, .citations-liste { gap: 42px 30px; align-items: start; }
.citations-une > .colle:nth-child(3n+2) { margin-top: 22px; }
.citations-une > .colle:nth-child(3n+3) { margin-top: 10px; }
.citations-liste > .colle:nth-child(2n) { margin-top: 18px; }

/* ---------- bandes de section : des aplats d'encre déchirés ---------- */
.section-noire, .section-jaune, .section-blanche {
  position: relative;
  border: 0;
}
.section-noire { background: var(--nuit); color: var(--journal); }
.section-jaune { background: var(--ocre); color: var(--encre); }
.section-blanche { background: transparent; }


/* ---------- boutons : un tampon encré ---------- */
.bouton {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--vermillon);
  color: var(--journal);
  letter-spacing: .12em;
  -webkit-mask-image: url("/assets/motifs/dechirure-3-haut-ext.svg"),
                      url("/assets/motifs/dechirure-3-bas-ext.svg"),
                      linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-3-haut-ext.svg"),
              url("/assets/motifs/dechirure-3-bas-ext.svg"),
              linear-gradient(#000, #000);
  -webkit-mask-position: center top, center bottom, center;
  mask-position: center top, center bottom, center;
  -webkit-mask-size: 100% 7px, 100% 7px, 100% calc(100% - 11px);
  mask-size: 100% 7px, 100% 7px, 100% calc(100% - 11px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.bouton:hover { background: var(--nuit); color: var(--journal); }
.bouton.secondaire { background: var(--turquoise); color: var(--journal); }
.bouton.secondaire:hover { background: var(--encre); }

/* ---------- liens ---------- */
a:not([class]):hover {
  background: var(--vermillon);
  color: var(--journal);
  box-shadow: 0 0 0 2px var(--vermillon);
}

/* ---------- ce que la matière ne doit jamais coûter ---------- */
@media (max-width: 720px) {
  /* Une déchirure de 44 px en haut ET en bas de chaque morceau coûte 88 px de
     hauteur par fragment : sur téléphone, c'est un écran de vide tous les trois
     propos. On resserre — l'effet tient encore à 26 px. */
  :root { --dechirure: 26px; }
  .chiffre { padding: 34px 18px 30px; }
  .chiffres { gap: 10px; padding: 14px 0; }
  /* les pivots mangent la largeur et créent un débordement */
  .pivot-0, .pivot-1, .pivot-2, .pivot-3,
  .pivot-4, .pivot-5, .pivot-6, .pivot-7 { transform: none; }
  .citations-une > .colle, .citations-liste > .colle { margin-top: 0 !important; }
  .ruban { display: none; }
}


/* ---------- aplats posés derrière une section ---------- */
/* Grandes formes d'imprimeur : elles débordent du cadre, se chevauchent et
   passent en multiply. Purement décoratives — jamais d'information dedans. */
.section { position: relative; }
.section > .contenant { position: relative; z-index: 1; }

.encres .c-1 { width: 460px; height: 460px; top: -130px; right: -110px; }
.encres .c-2 { width: 260px; height: 260px; bottom: -90px; left: -70px; opacity: .55; }
.encres .ch-1 { width: 300px; height: 190px; top: 42%; left: -90px; }
.encres .ch-2 { width: 220px; height: 140px; bottom: 6%; right: 8%; opacity: .5; }
.encres .f-1 { width: 240px; height: 170px; top: 10%; left: 28%; opacity: .5; }
.encres .f-2 { width: 180px; height: 220px; bottom: -40px; right: 22%; opacity: .45; }

/* ---------- le héros : la première affiche ---------- */
/* Le dégradé d'origine contredisait toute la charte : une encre ne dégrade pas.
   À la place, un aplat de nuit, une bande florale arrachée, un cercle
   d'imprimeur et un bord déchiré en bas. */
.heros {
  background: var(--nuit) !important;
  color: var(--journal);
  border-bottom: 0 !important;
}

/* la bande florale, arrachée sur son flanc gauche */
.heros-floral {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 52%;
  bottom: -30px;
  background-image: url("/assets/motifs/floral.webp");
  background-size: 320px 320px;
  background-position: top left;
  background-color: var(--encre);
  opacity: .9;
  -webkit-mask-image: url("/assets/motifs/dechirure-2-gauche-ext.svg"), linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-2-gauche-ext.svg"), linear-gradient(#000, #000);
  -webkit-mask-position: left top, right center;
  mask-position: left top, right center;
  -webkit-mask-size: 46px 1150px, calc(100% - 43px) 100%;
  mask-size: 46px 1150px, calc(100% - 43px) 100%;
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* le cercle d'encre derrière le mégaphone */
.heros-cercle {
  position: absolute;
  top: 4%;
  right: 3%;
  width: min(560px, 44vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vermillon);
  mix-blend-mode: normal;
  opacity: .95;
  z-index: 0;
  pointer-events: none;
}

.heros .contenant { z-index: 1; }
.heros-titre .k { background: var(--vermillon); color: var(--journal); }
.heros-titre .k-noir { background: var(--encre); }
.heros-slogan .k-blanc { background: var(--journal); color: var(--encre); }
/* L'illustration a son propre canal alpha : aucune découpe à lui imposer,
   et surtout aucune conversion en RGB, qui l'aplatirait sur du noir. */
.heros-logo {
  filter: none;
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  height: auto;
  align-self: center;
  justify-self: center;
}

/* ---------- les chiffres : quatre morceaux collés, plus une grille ---------- */
.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 26px 0;
}
.chiffre {
  flex: 1 1 210px;
  border: 0 !important;
  margin: 0;
  padding: calc(var(--dechirure) + 6px) 20px calc(var(--dechirure) + 2px);
  text-align: left;
}
.chiffre.papier-turquoise b, .chiffre.papier-vermillon b, .chiffre.papier-encre b { color: var(--journal); }

/* ---------- la tête de fiche se déchire sur la barre de sommaire ---------- */
.fiche-tete {
  position: relative;
  background: var(--encre) !important;
  border-bottom: 0 !important;
}
.sommaire { background: var(--ocre) !important; border-bottom: 0 !important; }

/* la déchirure de la tête retombe SUR la barre : on lui laisse le passage */
.sommaire .contenant { padding-top: 42px; }

/* ---------- la fouille : un formulaire collé, pas un champ d'interface ---------- */
.fouille-barre {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--fibre) !important;
  border-bottom: 5px solid var(--encre) !important;
}
.fouille-barre input { background: transparent; }
.fouille-barre button { border-left: 4px solid var(--encre) !important; }
.fouille-barre:focus-within { box-shadow: 0 0 0 4px var(--vermillon) !important; }

.fouille-etat, .fouille .chargement {
  border: 0 !important;
}
.fouille .chargement {
  display: block;
  background: var(--fibre);
  padding: 22px 24px;
}

.puce {
  border: 0 !important;
  background: var(--fibre);
  box-shadow: inset 0 0 0 2px var(--encre);
}
.puce[aria-pressed="true"] { background: var(--nuit); color: var(--ocre); box-shadow: none; }

/* ---------- le mur de mots-clics : des vignettes imprimées ---------- */
.mot-clic {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--fibre);
  color: var(--encre);
  -webkit-mask-image: url("/assets/motifs/dechirure-1-haut-ext.svg"),
                      url("/assets/motifs/dechirure-2-bas-ext.svg"),
                      linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-1-haut-ext.svg"),
              url("/assets/motifs/dechirure-2-bas-ext.svg"),
              linear-gradient(#000, #000);
  -webkit-mask-position: center top, center bottom, center;
  mask-position: center top, center bottom, center;
  -webkit-mask-size: 100% 9px, 100% 9px, 100% calc(100% - 15px);
  mask-size: 100% 9px, 100% 9px, 100% calc(100% - 15px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  padding: 12px 14px 14px;
}
.mot-clic:nth-child(3n+1) { background: var(--vermillon); color: var(--journal); }
.mot-clic:nth-child(4n+2) { background: var(--turquoise); color: var(--journal); }
.mot-clic:nth-child(5n+3) { background: var(--ocre); color: var(--encre); }
.mot-clic[aria-expanded="true"] { background: var(--nuit); color: var(--ocre); box-shadow: none !important; }
.mot-clic-detail {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--fibre);
}

/* ---------- le texte long : une colonne posée sur du papier ---------- */
.prose { max-width: 62ch; }
.prose blockquote {
  border-left: 6px solid var(--vermillon);
  background: transparent;
}

/* ---------- fragment de gravure sur les sections d'encre ---------- */
/* La gravure dense sert de fragment imprimé, arraché, jamais de papier peint :
   on n'en voit qu'un morceau, coupé par la déchirure. */
.gravure {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 38%;
  background-image: url("/assets/motifs/floral.webp");
  background-size: 320px 320px;
  background-position: top left;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: url("/assets/motifs/dechirure-3-gauche-ext.svg"), linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-3-gauche-ext.svg"), linear-gradient(#000, #000);
  -webkit-mask-position: left top, right center;
  mask-position: left top, right center;
  -webkit-mask-size: 46px 1150px, calc(100% - 43px) 100%;
  mask-size: 46px 1150px, calc(100% - 43px) 100%;
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
}

/* Une bande déchirée accrochée SOUS la section laissait tout ce qui dépassait
   (la gravure florale, les aplats) filer sous la déchirure. On masque la section
   entière : ce qu'elle contient se déchire avec elle. */
.heros {
  -webkit-mask-image: url("/assets/motifs/dechirure-1-bas-ext.svg"), linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-1-bas-ext.svg"), linear-gradient(#000, #000);
  -webkit-mask-position: center bottom, center top;
  mask-position: center bottom, center top;
  -webkit-mask-size: 100% var(--dechirure), 100% calc(100% - var(--dechirure) + 3px);
  mask-size: 100% var(--dechirure), 100% calc(100% - var(--dechirure) + 3px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  padding-bottom: calc(var(--dechirure) + 8px);
  overflow: hidden;
}

/* Une bande déchirée accrochée SOUS la section laissait tout ce qui dépassait
   (la gravure florale, les aplats) filer sous la déchirure. On masque la section
   entière : ce qu'elle contient se déchire avec elle. */
.fiche-tete {
  -webkit-mask-image: url("/assets/motifs/dechirure-3-bas-ext.svg"), linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-3-bas-ext.svg"), linear-gradient(#000, #000);
  -webkit-mask-position: center bottom, center top;
  mask-position: center bottom, center top;
  -webkit-mask-size: 100% var(--dechirure), 100% calc(100% - var(--dechirure) + 3px);
  mask-size: 100% var(--dechirure), 100% calc(100% - var(--dechirure) + 3px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  padding-bottom: calc(var(--dechirure) + 8px);
  overflow: hidden;
}

/* Une bande déchirée accrochée SOUS la section laissait tout ce qui dépassait
   (la gravure florale, les aplats) filer sous la déchirure. On masque la section
   entière : ce qu'elle contient se déchire avec elle. */
.section-noire, .section-jaune {
  -webkit-mask-image: url("/assets/motifs/dechirure-2-bas-ext.svg"), linear-gradient(#000, #000);
  mask-image: url("/assets/motifs/dechirure-2-bas-ext.svg"), linear-gradient(#000, #000);
  -webkit-mask-position: center bottom, center top;
  mask-position: center bottom, center top;
  -webkit-mask-size: 100% var(--dechirure), 100% calc(100% - var(--dechirure) + 3px);
  mask-size: 100% var(--dechirure), 100% calc(100% - var(--dechirure) + 3px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  padding-bottom: calc(var(--dechirure) + 8px);
  overflow: hidden;
}

/* l'icône d'en-tête est désormais presque carrée, plus un rectangle large */
.marque img { width: 42px; }
@media (max-width: 720px) { .marque img { width: 36px; } }