/* SmartBoycott — sérigraphie militante.
   Deux passes d'encre (noir + rouge) sur papier journal. Le repérage est
   volontairement décalé, le grain volontairement présent : c'est un tract,
   pas une plaquette d'entreprise. */

@font-face {
    font-family: "Big Shoulders";
    src: url("/static/fonts/BigShoulders-latin.woff2") format("woff2");
    font-weight: 600 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Big Shoulders";
    src: url("/static/fonts/BigShoulders-latin-ext.woff2") format("woff2");
    font-weight: 600 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Archivo";
    src: url("/static/fonts/Archivo-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    src: url("/static/fonts/Archivo-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --papier: #f2ede1;
    --papier-fonce: #e6dfcf;
    --encre: #16130f;
    --rouge: #d8271c;
    --rouge-fonce: #9e150e;
    --ocre: #e8a723;
    --gris: #6b645a;

    --affiche: "Big Shoulders", "Haettenschweiler", "Arial Narrow", sans-serif;
    --texte: "Archivo", "Helvetica Neue", Helvetica, sans-serif;

    --marge: clamp(16px, 4vw, 28px);
    --relief: 6px 6px 0 var(--encre);
    color-scheme: light;
}

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

/* La bande diagonale décorative déborde volontairement à droite. `overflow-x`
   posé sur body ne suffit pas : quand html est en `visible`, l'overflow de body
   est propagé au viewport et body lui-même redevient `visible` — il ne coupe
   donc rien. `clip` sur html tranche pour de bon, sans créer de conteneur de
   défilement. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Grain de papier. Une seule couche fixe, en multiply, pour que tout le
   document ait l'air imprimé sur le même support. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.42'/></svg>");
}

a { color: var(--rouge-fonce); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--rouge); }

.enveloppe { max-width: 760px; margin: 0 auto; padding: 0 var(--marge); }

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

/* Pas de bandeau pleine largeur : il ne portait qu'un logo et coûtait 90 px de
   hauteur au-dessus de la ligne de flottaison. */
.entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 0 14px;
    border-bottom: 4px solid var(--encre);
}
.entete .marque {
    font-family: var(--affiche);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--encre);
    text-decoration: none;
}
.entete .marque span { color: var(--rouge); }
.entete nav { display: flex; align-items: baseline; gap: 18px; }
.entete nav a, .entete nav button {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
    text-decoration: none;
}
.entete nav a:hover, .entete nav button:hover { color: var(--rouge); }
.entete nav form { display: inline; }
.entete nav button { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }

/* ---------- Titres ---------- */

h1 {
    font-family: var(--affiche);
    font-weight: 900;
    font-size: clamp(40px, 8vw, 68px);
    line-height: .94;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin: 0 0 22px;
    /* Repérage décalé : la passe rouge glisse sous la passe noire. */
    text-shadow: 4px 4px 0 var(--rouge);
}
h1 em { font-style: normal; color: var(--rouge); text-shadow: 4px 4px 0 var(--encre); }
/* Jitter de presse : le repérage bouge légèrement, comme une feuille mal calée. */
h1:hover { animation: jitter .28s steps(3) 1; }
@keyframes jitter {
    0%   { text-shadow: 4px 4px 0 var(--rouge); }
    50%  { text-shadow: 7px 2px 0 var(--rouge); }
    100% { text-shadow: 4px 4px 0 var(--rouge); }
}

/* Bloc d'ouverture : bande diagonale et trame de points, façon affiche
   constructiviste. Purement décoratif, donc masqué aux lecteurs d'écran. */
.affiche {
    position: relative;
    padding: 26px 0 4px;
    isolation: isolate;
}
.affiche::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20px; right: -22vw;
    width: 74vw; height: 210px;
    background: var(--rouge);
    transform: rotate(-7deg);
    opacity: .14;
    animation: bande .8s cubic-bezier(.2, .8, .3, 1) both;
}
.affiche::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 2px; right: 2%;
    width: 104px; height: 104px;
    border-radius: 50%;
    background-image: radial-gradient(var(--encre) 1.6px, transparent 1.7px);
    background-size: 9px 9px;
    opacity: .3;
    animation: trame 1s .15s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes bande { from { transform: rotate(-7deg) translateX(60px); opacity: 0; } to { transform: rotate(-7deg); opacity: .14; } }
@keyframes trame { from { transform: scale(.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: .3; } }

/* Bandeau défilant : le slogan de campagne, tenu comme une banderole. */
.banderole {
    background: var(--encre);
    color: var(--papier);
    border-top: 4px solid var(--rouge);
    border-bottom: 4px solid var(--rouge);
    overflow: hidden;
    margin: 0 0 44px;
    padding: 9px 0;
}
.banderole > div {
    display: flex;
    width: max-content;
    animation: defile 34s linear infinite;
}
.banderole span {
    font-family: var(--affiche);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0 22px;
    white-space: nowrap;
}
.banderole span::after { content: "◆"; color: var(--rouge); margin-left: 22px; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

h2 {
    font-family: var(--affiche);
    font-weight: 800;
    font-size: clamp(24px, 4.4vw, 32px);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 44px 0 14px;
    padding-bottom: 8px;
    border-bottom: 4px solid var(--encre);
}
h3 { font-size: 16px; margin: 0 0 6px; }

.chapo {
    font-size: clamp(17px, 2.4vw, 20px);
    line-height: 1.4;
    font-weight: 500;
    max-width: 34em;
    margin: 0 0 26px;
}
.note { font-size: 14px; color: var(--gris); }
.erreur { color: var(--rouge-fonce); font-weight: 600; font-size: 15px; margin: 0 0 14px; }

/* ---------- Blocs imprimés ---------- */

.recherche {
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
    background: var(--papier-fonce);
    border: 4px solid var(--encre);
    box-shadow: var(--relief);
    padding: 24px;
}
.recherche:focus-within { box-shadow: 9px 9px 0 var(--rouge); transform: translate(-2px, -2px); }
.recherche::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed var(--encre);
    opacity: .35;
    pointer-events: none;
}
.recherche label {
    display: block;
    font-family: var(--affiche);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ligne { display: flex; gap: 12px; flex-wrap: wrap; }
.ligne input[type="text"] { flex: 1 1 190px; min-width: 0; }

input[type="text"], input[type="password"], input[type="email"], textarea, select {
    width: 100%;
    font: inherit;
    font-weight: 600;
    padding: 13px 15px;
    color: var(--encre);
    background: var(--papier);
    border: 3px solid var(--encre);
    border-radius: 0;
    appearance: none;
}
input::placeholder { color: var(--gris); font-weight: 400; }
input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible {
    outline: 3px solid var(--rouge);
    outline-offset: 2px;
}
textarea { min-height: 280px; line-height: 1.55; }
.champ { margin-bottom: 18px; }
.champ label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

/* ---------- Boutons tamponnés ---------- */

button, .bouton {
    display: inline-block;
    font-family: var(--affiche);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    padding: 15px 24px;
    border: 3px solid var(--encre);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform .06s ease, box-shadow .06s ease;
}
.primaire { background: var(--rouge); color: #fff; box-shadow: 5px 5px 0 var(--encre); }
.primaire:hover { background: var(--rouge-fonce); color: #fff; }
.secondaire { background: var(--papier); color: var(--encre); box-shadow: 5px 5px 0 var(--encre); }
.secondaire:hover { background: var(--papier-fonce); color: var(--encre); }
.primaire:active, .secondaire:active, button:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--encre); }
.primaire:hover, .secondaire:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--encre); }

/* Encrage : une passe de couleur balaie le bouton au survol. */
.bouton, button.primaire, button.secondaire { position: relative; overflow: hidden; }
.bouton::before, button.primaire::before, button.secondaire::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transform: translateX(-101%);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.bouton:hover::before { opacity: .08; transform: none; }

.discret {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 4px 0;
    font-family: var(--texte);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gris);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.discret:hover { color: var(--rouge); }
.discret:active { transform: none; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.geoloc { margin: 16px 0 0; font-size: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.geoloc::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--rouge);
    animation: balise 1.9s ease-in-out infinite;
    flex: none;
}
@keyframes balise { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }

/* Retour visuel pendant une requête HTMX. */
.htmx-request { opacity: .5; pointer-events: none; }

/* ---------- Liste des magasins ---------- */

ol.magasins { list-style: none; padding: 0; margin: 0; counter-reset: rang; }
ol.magasins > li {
    counter-increment: rang;
    position: relative;
    padding: 20px 0 20px 66px;
    border-bottom: 2px solid var(--encre);
    animation: monte .4s both;
}
ol.magasins > li:first-child { border-top: 4px solid var(--encre); }
ol.magasins > li::before {
    content: counter(rang, decimal-leading-zero);
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), color .18s ease;
    position: absolute;
    left: 0;
    top: 16px;
    font-family: var(--affiche);
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: var(--rouge);
}
ol.magasins > li:nth-child(1) { animation-delay: .02s }
ol.magasins > li:nth-child(2) { animation-delay: .05s }
ol.magasins > li:nth-child(3) { animation-delay: .08s }
ol.magasins > li:nth-child(4) { animation-delay: .11s }
ol.magasins > li:nth-child(5) { animation-delay: .14s }
ol.magasins > li:nth-child(6) { animation-delay: .17s }
ol.magasins > li:nth-child(7) { animation-delay: .20s }
ol.magasins > li:nth-child(8) { animation-delay: .23s }
ol.magasins > li:nth-child(9) { animation-delay: .26s }
ol.magasins > li:nth-child(10) { animation-delay: .29s }

@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.magasin-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.magasin-tete a {
    font-family: var(--affiche);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--encre);
    text-decoration: none;
}
.magasin-tete a:hover { color: var(--rouge); }
ol.magasins > li:hover::before { transform: rotate(-6deg) scale(1.08); }
ol.magasins > li:hover .distance { background: var(--rouge); }
.distance { transition: background .18s ease; }
.distance {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--encre);
    color: var(--papier);
    padding: 4px 8px;
}
.adresse { font-size: 15px; color: var(--gris); margin: 4px 0 0; }
ol.magasins .actions { margin-top: 14px; }
ol.magasins .actions .bouton { font-size: 16px; padding: 10px 16px; box-shadow: 4px 4px 0 var(--encre); }

/* ---------- Encadrés ---------- */

.encadre {
    position: relative;
    background: var(--papier-fonce);
    border-left: 8px solid var(--rouge);
    padding: 16px 20px;
    margin: 26px 0;
    font-size: 15px;
    font-weight: 500;
}
.encadre.neutre { border-left-color: var(--encre); }

/* ---------- Chiffres de couverture ---------- */

.chiffres {
    list-style: none;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin: 22px 0 0;
    padding: 0;
    border: 3px solid var(--encre);
}
.chiffres li {
    flex: 1 1 150px;
    padding: 13px 18px;
    border-right: 3px solid var(--encre);
}
.chiffres li:last-child { border-right: 0; }
.chiffres li:first-child { background: var(--rouge); color: #fff; }
.chiffres b {
    display: block;
    font-family: var(--affiche);
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.chiffres span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- Message de campagne ---------- */

.message {
    position: relative;
    background: #fffdf6;
    border: 3px solid var(--encre);
    box-shadow: var(--relief);
    padding: 24px;
    margin: 22px 0;
}
/* Tampon encreur, posé de travers sur la feuille. */
.message::after {
    content: "À ENVOYER";
    position: absolute;
    top: -14px; right: 18px;
    font-family: var(--affiche);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--rouge);
    background: var(--papier);
    border: 3px solid var(--rouge);
    padding: 5px 11px;
    transform: rotate(-4deg);
    opacity: .9;
}
.message .objet {
    padding-right: 128px;
    font-family: var(--affiche);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.08;
    text-transform: uppercase;
    border-bottom: 3px solid var(--encre);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.message pre {
    font: inherit;
    font-size: 16px;
    line-height: 1.62;
    white-space: pre-wrap;
    margin: 0;
}

.destinataire {
    display: inline-block;
    font-family: var(--texte);
    font-size: 14px;
    font-weight: 700;
    background: var(--encre);
    color: var(--papier);
    padding: 6px 11px;
    word-break: break-all;
}

/* ---------- Mini carte ---------- */

.carte {
    height: 230px;
    border: 3px solid var(--encre);
    box-shadow: var(--relief);
    margin: 20px 0 8px;
    background: var(--papier-fonce);
}
/* Les tuiles OpenStreetMap sont colorées : on les ramène au papier journal.
   Le filtre porte sur le seul calque de tuiles — appliqué au conteneur, il
   décolorerait aussi l'épingle et les contrôles. */
.carte .leaflet-tile-pane {
    filter: grayscale(1) contrast(1.06) sepia(.34) brightness(1.04);
}
.carte .leaflet-control-attribution {
    font-family: var(--texte);
    font-size: 10px;
    background: rgba(242, 237, 225, .86);
}
.carte .leaflet-bar a {
    font-family: var(--affiche);
    font-weight: 800;
    color: var(--encre);
    border-radius: 0;
    border-color: var(--encre);
}
.carte .leaflet-bar { border-radius: 0; box-shadow: none; border: 2px solid var(--encre); }
.epingle {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--rouge);
    border: 3px solid var(--encre);
    box-shadow: 0 0 0 5px rgba(216, 39, 28, .28);
    animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 3px rgba(216, 39, 28, .40); }
    70%  { box-shadow: 0 0 0 15px rgba(216, 39, 28, 0); }
    100% { box-shadow: 0 0 0 3px rgba(216, 39, 28, 0); }
}

/* ---------- Connexion ---------- */

.connexion { max-width: 420px; }
.connexion .actions { margin-top: 4px; }
.connexion .actions button { width: 100%; }

/* ---------- Tableaux (back-office) ---------- */

.tableau { overflow-x: auto; border: 3px solid var(--encre); background: var(--papier); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid rgba(22, 19, 15, .18); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papier-fonce); }
td.nombre { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
td .lieu { font-size: 13px; color: var(--gris); display: block; margin-top: 2px; }

/* Compteurs de tête du back-office. */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 34px; }
.compteur { border: 3px solid var(--encre); background: var(--papier-fonce); padding: 14px 16px; }
.compteur b {
    display: block;
    font-family: var(--affiche);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.compteur.accent { background: var(--rouge); color: #fff; border-color: var(--encre); }
.compteur span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Titre de groupe d'enseignes. */
.groupe {
    font-family: var(--affiche);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 34px 0 10px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--encre);
}
.groupe small { font-family: var(--texte); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gris); margin-left: 10px; }
th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--papier);
    background: var(--encre);
    border-bottom: 0;
}
td code { font-size: 14px; background: var(--papier-fonce); padding: 2px 5px; }
table button { font-size: 14px; padding: 7px 12px; box-shadow: 3px 3px 0 var(--encre); }
table td form { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
table select { width: auto; flex: 0 0 auto; padding: 8px 10px; font-size: 14px; border-width: 2px; }
table input[type="email"] { width: auto; flex: 1 1 180px; min-width: 0; padding: 8px 10px; font-size: 14px; border-width: 2px; }
table button { flex: 0 0 auto; }

/* Le back-office est un outil de travail : le titre d'affiche y serait
   encombrant, on garde la famille mais pas l'échelle. */
h1.titre-admin {
    font-size: clamp(30px, 4vw, 40px);
    text-shadow: 3px 3px 0 var(--rouge);
    margin-bottom: 26px;
}
table .discret { box-shadow: none; }

.puce {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 2px solid var(--encre);
}
.puce.confirmee { background: var(--encre); color: var(--papier); }
.puce.exclue { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.puce.a_verifier { background: var(--papier-fonce); }

.admin-nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--encre);
    font-family: var(--affiche);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.admin-nav a { color: var(--gris); text-decoration: none; }
.admin-nav a:hover { color: var(--rouge); }
.admin-nav a.actif { color: var(--encre); border-bottom: 4px solid var(--rouge); }

/* ---------- Pied ---------- */

footer.site {
    margin-top: 80px;
    padding: 26px 0 40px;
    border-top: 5px solid var(--encre);
    font-size: 13px;
    color: var(--gris);
}
footer.site p { margin: 0 0 6px; }
footer.site a { color: var(--gris); }

/* ---------- Adaptations ---------- */

@media (max-width: 620px) {
    body { font-size: 16px; }
    /* Trois tuiles à 150 px de base imposent 450 px de large et poussent
       toute la page hors de l'écran : sur mobile elles se partagent la
       largeur disponible au lieu de l'imposer. */
    .chiffres li { flex: 1 1 0; min-width: 0; padding: 11px 10px; }
    .chiffres b { font-size: 27px; }
    .chiffres span { font-size: 9.5px; letter-spacing: .05em; }
    .entete { padding: 16px 0 11px; }
    h1 { text-shadow: 3px 3px 0 var(--rouge); }
    ol.magasins > li { padding-left: 52px; }
    ol.magasins > li::before { font-size: 32px; top: 19px; }
    .magasin-tete { flex-direction: column; align-items: flex-start; gap: 6px; }
    .actions .bouton, .actions button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
    body::after, .entete nav, .actions, .recherche { display: none; }
}

/* ---------- Recherche et filtres du back-office ---------- */

.filtres {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--papier-fonce);
    border: 3px solid var(--encre);
    padding: 16px 18px;
    margin-bottom: 22px;
}
.filtres > div { flex: 0 0 auto; }
.filtres .filtre-large { flex: 1 1 280px; min-width: 0; }
.filtres label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.filtres input[type="search"] { width: 100%; border-width: 2px; padding: 9px 12px; font-size: 15px; font-weight: 500; }
.filtres select { width: auto; border-width: 2px; padding: 9px 12px; font-size: 15px; }

.resultat-compte { font-size: 15px; margin: 0 0 14px; }
.resultat-compte strong { font-family: var(--affiche); font-size: 24px; font-weight: 900; }

th.trie { background: var(--rouge); }
th a { color: inherit; text-decoration: none; white-space: nowrap; }
th a:hover { color: #fff; text-decoration: underline; }
.manque { color: var(--gris); font-style: italic; font-size: 14px; }

.pagination { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.pagination .bouton { font-size: 15px; padding: 9px 16px; box-shadow: 3px 3px 0 var(--encre); }

/* ---------- Explication des groupes ---------- */

.explication { border: 3px solid var(--encre); background: var(--papier); margin-bottom: 34px; }
.explication summary {
    cursor: pointer;
    padding: 14px 18px;
    font-family: var(--affiche);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--papier-fonce);
}
.explication summary::marker { color: var(--rouge); }
.explication .corps { padding: 6px 18px 18px; }
.explication h4 {
    font-family: var(--affiche);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 18px 0 4px;
}
.explication h4 .puce { margin-left: 8px; vertical-align: 2px; }
.explication p { margin: 0 0 8px; font-size: 15px; }

/* Les pages de back-office sont des outils de travail : la largeur de lecture
   confortable d'un texte (760 px) y étouffe un tableau à six colonnes. */
.enveloppe.large { max-width: 1240px; }
.enveloppe.large table { font-size: 14px; }
.enveloppe.large td, .enveloppe.large th { padding: 9px 12px; }
.enveloppe.large td:nth-child(5) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.enveloppe.large td:last-child { min-width: 210px; }
.enveloppe.large td code { word-break: break-all; }
.enveloppe.large .puce { white-space: nowrap; }

/* ---------- Fiche magasin ---------- */

.fiche {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
    border-top: 3px solid var(--encre);
    border-bottom: 3px solid var(--encre);
    padding: 16px 0;
    margin: 0 0 20px;
}
.adresse-fiche { flex: 1 1 260px; font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0; }
.horaires { flex: 1 1 240px; }
.horaires h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
    margin: 0 0 5px;
}
.horaires ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.horaires li { font-variant-numeric: tabular-nums; }

/* ---------- Envoi groupé ---------- */

/* Traitement volontairement secondaire : un cadre fin, pas de rouge plein.
   L'action locale reste la plus efficace, ce bloc ne doit pas la concurrencer
   visuellement. */
.groupe-envoi {
    border: 3px solid var(--encre);
    background: var(--papier-fonce);
    padding: 20px var(--marge);
    margin: 34px 0;
}
.groupe-envoi h2 { margin-top: 0; }
.groupe-envoi p { font-size: 15px; margin: 0 0 4px; }
.groupe-envoi form { margin-top: 18px; }
.groupe-envoi label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.groupe-envoi select { flex: 1 1 240px; min-width: 0; width: auto; }
.groupe-envoi .actions { margin-top: 14px; }

/* Marche à suivre en trois temps. La numérotation est reprise de la liste des
   magasins : mêmes chiffres d'affiche, même grammaire visuelle. */
ol.etapes { list-style: none; padding: 0; margin: 34px 0 0; counter-reset: etape; }
ol.etapes > li {
    counter-increment: etape;
    position: relative;
    padding: 4px 0 24px 66px;
    border-bottom: 2px solid var(--encre);
    margin-bottom: 24px;
}
ol.etapes > li:last-child { border-bottom: 0; }
ol.etapes > li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--affiche);
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: var(--rouge);
}
ol.etapes h2 { margin-top: 0; }
ol.etapes p { font-size: 15px; }

.copie-ok { font-size: 15px; font-weight: 700; color: var(--rouge-fonce); margin: 12px 0 0; }
details#adresses { margin-top: 14px; }
details#adresses summary { font-size: 14px; color: var(--gris); cursor: pointer; }
details#adresses summary::marker { color: var(--rouge); }
textarea.liste-adresses {
    min-height: 0;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
    word-break: break-all;
}

ul.cibles { list-style: none; padding: 0; margin: 0; column-width: 240px; column-gap: 28px; }
ul.cibles li { border-bottom: 2px solid var(--papier-fonce); padding: 6px 0; break-inside: avoid; }
ul.cibles span { display: block; word-break: break-all; }

/* ---------- Accroche et motif de boycott ---------- */

.baseline {
    font-family: var(--affiche);
    font-size: clamp(21px, 3.4vw, 28px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: .01em;
    max-width: 22em;
    margin: 0 0 18px;
    padding-left: 16px;
    border-left: 7px solid var(--rouge);
}

.cri {
    font-family: var(--affiche);
    font-size: clamp(26px, 4.6vw, 36px);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: var(--rouge);
    margin: 22px 0 0;
}

.titre-sources {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gris);
    margin: 30px 0 10px;
}

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sources a {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 12px 15px;
    border: 3px solid var(--encre);
    background: var(--papier-fonce);
    color: var(--encre);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.sources a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rouge); }
.source-media {
    flex: none;
    font-family: var(--affiche);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rouge);
}
.source-titre { flex: 1 1 260px; font-size: 14px; line-height: 1.35; }
.sources a::after { content: "↗"; flex: none; color: var(--gris); font-size: 14px; }

@media (max-width: 620px) {
    .baseline { padding-left: 12px; border-left-width: 5px; }
}

/* ---------- Pages légales ---------- */

.legal { max-width: 40em; }
.legal h2 { font-size: clamp(20px, 3.4vw, 26px); margin: 36px 0 12px; }
.legal p { margin: 0 0 12px; }
.legal dl { margin: 0 0 16px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.legal dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gris);
    padding-top: 3px;
}
.legal dd { margin: 0; font-size: 16px; }
.legal .note { margin-top: 36px; padding-top: 16px; border-top: 3px solid var(--encre); }

@media (max-width: 620px) {
    .legal dl { grid-template-columns: 1fr; gap: 2px; }
    .legal dd { margin-bottom: 10px; }
}

/* ---------- Suivre la campagne ---------- */

.suivre {
    border: 3px solid var(--encre);
    background: var(--papier-fonce);
    padding: 18px 20px;
    margin: 36px 0 0;
}
.suivre h3 {
    font-family: var(--affiche);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.suivre .case { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; }
.suivre .case input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--rouge); }
.suivre .ligne input[type="email"] { flex: 1 1 170px; border-width: 2px; padding: 10px 12px; }
.suivre .ligne input[type="text"] { flex: 0 0 76px; border-width: 2px; padding: 10px 12px; text-align: center; }
.suivre button { font-size: 16px; padding: 10px 16px; box-shadow: 4px 4px 0 var(--encre); }
.suivre .note { margin: 10px 0 0; }
.suivre .erreur { margin: 12px 0 0; }
.suivre-ok {
    font-family: var(--affiche);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--rouge);
    margin: 0;
}
.suivre-ok .note { font-family: var(--texte); font-size: 14px; font-weight: 400; text-transform: none; color: var(--gris); }

/* Champ leurre : invisible pour un humain, rempli par les robots qui
   remplissent tout. Masque par position plutot que par display:none, que
   certains robots detectent. */
.champ-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}