/* ═══════════ STYLE AFFICHE (crème, rouge, noir) — chargé après style.css ═══════════ */
:root {
  --creme: #efe8da; --creme-2: #f7f2e8; --rouge: #d7261e; --noir: #141414;
  --marine: #141414; --marine-2: #2b2b2b; --jaune: #d7261e; --jaune-pale: #f6dcd6;
  --fond: #efe8da; --blanc: #f7f2e8; --texte: #141414; --gris: #5a554c; --ligne: #c9bfae;
  --titre: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --rayon: 0;
}
body { font-family: 'Inter', system-ui, sans-serif; background: var(--creme); }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; letter-spacing: .3px; line-height: 1.02; color: var(--noir); }
h2 { border-top: 3px solid var(--noir); }
a { color: var(--noir); }
.bouton, .formulaire button, .chercheur button, .interet button { background: var(--noir) !important; color: var(--creme) !important; border-radius: 0 !important; font-family: var(--titre); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; }
.bouton:hover { background: var(--rouge) !important; }

/* En-tête */
.entete { background: var(--creme); border-bottom: 3px solid var(--noir); }
.entete-in { padding: 0; gap: 0; align-items: stretch; flex-wrap: nowrap; }
.entete .logo { background: var(--noir); color: var(--creme); padding: 10px 18px; gap: 12px; }
.logo-pastille { background: var(--rouge); color: #fff; font-family: var(--titre); font-weight: 400; transform: rotate(-8deg); border-radius: 0; padding: 4px 8px; font-size: 1.05rem; }
.logo-texte { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .4px; }
.logo-texte small { font-family: var(--mono); color: var(--creme); opacity: .75; text-transform: uppercase; font-size: .62rem; letter-spacing: 1px; }
.menu { margin-left: 22px; align-items: center; gap: 2px 18px; flex: 1; }
.menu a { color: var(--noir); font-family: var(--titre); text-transform: uppercase; font-size: .95rem; letter-spacing: .4px; border-bottom: 3px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--rouge); border-bottom-color: var(--rouge); }
.menu-compte { gap: 0; margin-left: auto; }
.menu-compte a { border: 0; border-left: 3px solid var(--noir); border-radius: 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; display: flex; align-items: center; padding: 0 18px; background: var(--rouge); color: #fff; }
.menu-compte a.menu-agences { background: var(--creme); color: var(--noir); }
.menu-compte a:hover { background: var(--noir); color: var(--creme); }

/* Bandeau défilant */
.bandeau { background: var(--rouge); color: #fff; overflow: hidden; border-bottom: 3px solid var(--noir); white-space: nowrap; }
.bandeau-piste { display: inline-flex; gap: 28px; padding: 7px 0; animation: defile 40s linear infinite; font-family: var(--titre); text-transform: uppercase; letter-spacing: .6px; font-size: .9rem; }
.bandeau-piste i { font-style: normal; color: var(--noir); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-piste { animation: none; } }

/* Colonne de côté */
.encart { background: var(--creme-2); border: 3px solid var(--noir); }
.encart h2 { font-family: var(--titre); font-weight: 400; font-size: 1.2rem; border: 0; }
.encart-agent { background: var(--rouge); border-color: var(--noir); }
.encart-agent h2, .encart-agent p { color: #fff; }
.encart-agent .bouton { background: var(--noir) !important; color: var(--creme) !important; }
.encart-agence { background: var(--noir); border-top: 3px solid var(--noir); }
.encart-agence h2, .encart-agence p, .encart-agence a { color: var(--creme); }
.liste-liens li, .liste-nouvelles li { border-color: var(--noir); }
.liste-nouvelles time, .carte-texte time, .maj { font-family: var(--mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; }

/* Étiquettes */
.etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }
.numero { background: var(--noir); color: var(--creme); padding: 3px 7px; }
.etiquette-cat { background: var(--rouge); color: #fff; padding: 3px 7px; text-decoration: none; }
.etiquette-cat.contour { background: transparent; color: var(--noir); border: 2px solid var(--noir); }
.categorie { background: var(--rouge); color: #fff; border: 0; font-family: var(--mono); font-weight: 700; letter-spacing: 1px; }
a.categorie:hover { background: var(--noir); }

/* La une */
.une { position: relative; overflow: hidden; background: var(--creme); border: 3px solid var(--noir); padding: 36px 30px 110px; min-height: 520px; }
.une-cercle { position: absolute; right: -90px; top: -40px; width: 380px; height: 380px; border-radius: 50%; background: var(--rouge); }
.une-carre { position: absolute; right: 70px; bottom: 120px; width: 62px; height: 62px; border: 7px solid var(--noir); transform: rotate(22deg); }
.une-texte { position: relative; max-width: 560px; }
.une h1, .une .une-titre { border: 0; margin: 0 0 18px; padding: 0; font-size: 2rem; }
.une h1 a, .une .une-titre a { color: var(--noir); text-decoration: none; display: block; }
.une-avant { display: block; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .95; }
.une-gros { display: block; color: var(--rouge); font-size: clamp(5rem, 13vw, 9rem); line-height: .9; mix-blend-mode: multiply; }
.une-apres { display: inline-block; background: var(--noir); color: var(--creme); font-size: clamp(2rem, 4.5vw, 3.2rem); padding: 2px 12px; transform: rotate(-4deg); margin-top: 6px; }
.une-resume { max-width: 420px; font-size: .95rem; }
.bouton-noir, .bouton-creme, .bouton-contour { display: inline-block; font-family: var(--titre); text-transform: uppercase; letter-spacing: .6px; text-decoration: none; padding: 10px 18px; }
.bouton-noir { background: var(--noir); color: var(--creme); }
.bouton-noir:hover { background: var(--rouge); }
.bande-diagonale { position: absolute; left: -40px; right: -40px; bottom: 28px; background: var(--noir); transform: rotate(-3deg); overflow: hidden; white-space: nowrap; }
.bande-diagonale div { display: inline-flex; gap: 18px; padding: 10px 0; color: var(--creme); font-family: var(--titre); text-transform: uppercase; letter-spacing: 3px; font-size: 1.2rem; }
.bande-diagonale i { font-style: normal; color: var(--creme); font-size: .8rem; align-self: center; }

/* Les deux nouvelles suivantes */
.suites { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--noir); border-top: 0; }
.suite { position: relative; overflow: hidden; padding: 28px 24px; }
.suite-creme { background: var(--creme); border-right: 3px solid var(--noir); }
.suite-noire { background: var(--noir); color: var(--creme); }
.suite-numero { position: absolute; right: -6px; top: -18px; font-family: var(--titre); font-size: 7rem; line-height: 1; color: rgba(20,20,20,.08); }
.suite-noire .suite-numero { color: rgba(215,38,30,.45); }
.suite h2 { border: 0; margin: 0 0 12px; font-size: 1.7rem; position: relative; }
.suite h2 a { color: inherit; text-decoration: none; }
.suite h2 a:hover { color: var(--rouge); }
.suite p { position: relative; font-size: .9rem; margin: 0; }
.suite-noire h2 { color: var(--creme); }
.suite-noire .etiquette-cat { background: var(--creme); color: var(--noir); }

/* Barre « toutes les nouvelles » */
.barre-toutes { display: flex; justify-content: space-between; align-items: center; border: 3px solid var(--noir); border-top: 0; padding: 14px 24px; font-family: var(--titre); text-transform: uppercase; font-size: 1.5rem; text-decoration: none; color: var(--noir); background: var(--creme); }
.barre-toutes:hover { background: var(--noir); color: var(--creme); }

/* Bloc agent */
.bloc-agent { position: relative; overflow: hidden; background: var(--rouge); border: 3px solid var(--noir); border-top: 0; padding: 44px 30px; }
.bloc-agent-cercle { position: absolute; right: 70px; top: 30px; width: 90px; height: 90px; border-radius: 50%; background: var(--creme); }
.bloc-agent-bande { position: absolute; right: -60px; top: 150px; width: 520px; height: 60px; background: var(--noir); transform: rotate(-22deg); transform-origin: right; }
.bloc-texte { position: relative; max-width: 460px; }
.bloc-agent h2 { color: var(--creme); border: 0; font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0 0 16px; }
.bloc-agent p { color: #fff; }
.bouton-creme { background: var(--creme); color: var(--noir); box-shadow: 6px 6px 0 var(--noir); }
.bouton-creme:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--noir); }

/* Les outils */
.bloc-outils { display: grid; grid-template-columns: 220px 1fr; border: 3px solid var(--noir); border-top: 0; background: var(--creme); }
.outils-titre { padding: 28px 24px; border-right: 3px solid var(--noir); }
.outils-titre h2 { border: 0; font-size: 3.4rem; margin: 0; }
.outils-carres { position: relative; height: 90px; margin-top: 18px; }
.outils-carres span { position: absolute; width: 56px; height: 56px; }
.outils-carres span:first-child { left: 0; top: 0; border: 6px solid var(--noir); }
.outils-carres span:last-child { left: 26px; top: 26px; background: var(--rouge); }
.outils-liste { list-style: none; margin: 0; padding: 0; }
.outils-liste li { border-bottom: 3px solid var(--noir); }
.outils-liste li:last-child { border-bottom: 0; }
.outils-liste a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 13px 22px; text-decoration: none; color: var(--noir); }
.outils-liste a:hover { background: var(--noir); color: var(--creme); }
.outil-num { font-family: var(--mono); color: var(--rouge); font-size: .75rem; }
.outil-nom { font-family: var(--titre); text-transform: uppercase; font-size: 1.45rem; }

/* Bloc agence */
.bloc-agence { position: relative; overflow: hidden; background: var(--noir); color: var(--creme); border: 3px solid var(--noir); border-top: 0; padding: 40px 30px 40px 170px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bloc-agence-triangle { position: absolute; left: 0; top: 0; bottom: 0; width: 150px; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%); }
.bloc-agence h2 { color: var(--creme); border: 0; font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 10px; }
.bloc-agence p { color: var(--creme); }
.surtitre { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem; color: var(--rouge) !important; margin: 0 0 6px; }
.bouton-contour { border: 2px solid var(--creme); color: var(--creme); position: relative; }
.bouton-contour:hover { background: var(--creme); color: var(--noir); }

/* Cartes, articles et formulaires aux nouvelles couleurs */
.carte-nouvelle { border: 3px solid var(--noir); background: var(--creme-2); }
.image-attente { background: var(--noir); }
.image-attente::before { background: radial-gradient(circle at 85% 20%, var(--rouge) 0 22%, transparent 22.5%); }
.image-attente span { color: var(--creme); border-color: var(--creme); font-family: var(--titre); font-weight: 400; letter-spacing: 2px; }
.carte-texte h3, .carte-texte h2 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; }
.carte-texte h3 a, .carte-texte h2 a { color: var(--noir); }
.carte-texte h3 a:hover, .carte-texte h2 a:hover { color: var(--rouge); text-decoration: none; }
.filtres-categories a { border: 2px solid var(--noir); border-radius: 0; background: var(--creme-2); color: var(--noir); font-family: var(--mono); text-transform: uppercase; font-size: .75rem; }
.filtres-categories a[aria-current="page"], .filtres-categories a:hover { background: var(--noir); color: var(--creme); }
.tableau { border: 3px solid var(--noir); }
th { background: var(--noir); color: var(--creme); }
.enbref { background: var(--creme-2); border-left: 8px solid var(--rouge); }
.chercheur, .formulaire, .poste, .resultat, .boite-demandes, .abonnement { border: 3px solid var(--noir) !important; border-radius: 0 !important; background: var(--creme-2); }
.chercheur input, .formulaire input:not([type=checkbox]):not([type=radio]), .formulaire textarea, .formulaire select { border: 2px solid var(--noir) !important; border-radius: 0 !important; background: #fff; }

/* Pied de page */
.pied { background: var(--creme); color: var(--noir); border-top: 6px solid var(--rouge); }
.pied h2 { color: var(--noir); font-family: var(--titre); font-weight: 400; font-size: 1.05rem; border-top: 0; border-bottom: 3px solid var(--noir); padding-bottom: 6px; }
.pied a { color: var(--noir); }
.pied a:hover { color: var(--rouge); }
.pied .logo { background: none; padding: 0; }
.pied .logo .logo-texte { display: none; }
.pied-mention { border-top: 2px solid var(--noir); font-family: var(--mono); font-size: .72rem; color: var(--noir); }

@media (max-width: 960px) {
  .entete-in { flex-wrap: wrap; }
  .menu { padding: 8px 16px; flex: 1 1 100%; margin-left: 0; }
  .entete .logo { flex: 1 1 100%; }
  .une { padding: 28px 20px 100px; }
  .une-cercle { width: 240px; height: 240px; right: -80px; }
}
@media (max-width: 700px) {
  .suites, .bloc-outils { grid-template-columns: 1fr; }
  .suite-creme, .outils-titre { border-right: 0; border-bottom: 3px solid var(--noir); }
  .bloc-agence { padding-left: 30px; }
  .bloc-agence-triangle { display: none; }
  .menu-compte { width: 100%; }
  .menu-compte a { flex: 1; justify-content: center; padding: 10px; border-left: 0; border-top: 3px solid var(--noir); }
}

/* Retour en haut */
.haut-de-page { position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 48px; height: 48px; display: grid; place-items: center; background: var(--noir); color: var(--creme); font-family: var(--titre); font-size: 1.6rem; text-decoration: none; border: 3px solid var(--noir); box-shadow: 4px 4px 0 var(--rouge); }
.haut-de-page:hover { background: var(--rouge); box-shadow: 4px 4px 0 var(--noir); }

/* Habillage publicitaire : panneaux fixes de chaque côté de la colonne (écrans larges seulement) */
.habillage { display: none; }
@media (min-width: 1600px) {
  .habillage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: fixed; top: 150px; bottom: 30px; width: calc((100vw - 1240px) / 2 - 40px); max-width: 230px; padding: 24px 16px; background: var(--noir); color: var(--creme); text-decoration: none; text-align: center; border: 3px solid var(--noir); box-shadow: 8px 8px 0 var(--rouge); z-index: 5; }
  .habillage-g { left: 20px; }
  .habillage-d { right: 20px; background: var(--creme); color: var(--noir); }
  .habillage:hover { box-shadow: 8px 8px 0 var(--noir); outline: 3px solid var(--rouge); }
  .habillage img { width: 150px; height: 150px; border: 3px solid var(--noir); background: #fff; }
  /* Un panneau non loué ne paraît pas : seul le lien « Voir » de l'espace agences (?pub=…) le montre */
  .habillage.pub-libre:not(.pub-montree) { display: none; }
}
.hab-sur { font-family: 'Space Mono', monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.hab-nom { font-family: 'Anton', sans-serif; font-size: 2rem; text-transform: uppercase; line-height: 1; }
.hab-gros { font-family: 'Anton', sans-serif; font-size: 3.2rem; text-transform: uppercase; line-height: 1; background: var(--rouge); color: var(--creme); padding: 4px 12px; transform: rotate(-4deg); }
.hab-texte { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.hab-pied { font-family: 'Anton', sans-serif; font-size: 1.3rem; text-transform: uppercase; border-top: 2px solid currentColor; padding-top: 10px; }
.encart-pub { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--noir); border: 3px dashed var(--rouge); background: var(--creme); }
.encart-pub strong { font-family: 'Anton', sans-serif; font-size: 1.6rem; text-transform: uppercase; color: var(--rouge); }

/* Recherche sans résultat */
.message-vide { display: block; margin: 16px 0; padding: 16px 18px; font-size: 1rem; color: var(--noir); background: #fff; border: 3px solid var(--noir); border-left: 10px solid var(--rouge); }
.message-vide strong { display: block; font-family: 'Anton', sans-serif; font-size: 1.3rem; font-weight: 400; text-transform: uppercase; margin-bottom: 4px; }

/* Mise en évidence d'un espace publicitaire (lien « Voir » de l'admin : ?pub=…) */
.pub-montree { outline: 6px solid #ffd400 !important; outline-offset: 4px; animation: pub-clignote 1s ease-in-out 3; }
@keyframes pub-clignote { 50% { outline-color: var(--rouge); } }
.pub-avis { position: sticky; top: 0; z-index: 50; margin: 0; padding: 12px 16px; background: #ffd400; color: var(--noir); font-weight: 700; text-align: center; }

/* Bandeau de consentement aux témoins */
.temoins { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--noir); color: var(--creme); border: 3px solid var(--noir); box-shadow: 6px 6px 0 var(--rouge); font-size: .9rem; }
.temoins p { margin: 0; flex: 1 1 320px; }
.temoins a { color: var(--creme); }
.temoins div { display: flex; gap: 8px; }
.temoins button { font: inherit; font-weight: 700; padding: 8px 16px; cursor: pointer; border: 2px solid var(--creme); background: transparent; color: var(--creme); }
.temoins #temoins-oui { background: var(--rouge); border-color: var(--rouge); }

/* Barre des espaces publicitaires cochés */
.barre-pubs { position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 12px 0; padding: 12px 16px; background: var(--noir); color: var(--creme); box-shadow: 6px 6px 0 var(--rouge); font-weight: 700; }

.encadre-offre { margin: 12px 0; padding: 12px 16px; background: #fff; border-left: 6px solid var(--rouge); }
.encadre-offre ul { margin: 6px 0 0; padding-left: 18px; }

/* Boutons de choix (récapitulatif des espaces publicitaires) */
.pastille-choix { font: inherit; font-weight: 700; margin: 3px 4px 3px 0; padding: 7px 12px; cursor: pointer; border: 2px solid var(--noir); background: #fff; color: var(--noir); }
.pastille-choix.actif { background: var(--noir); color: var(--creme); box-shadow: 3px 3px 0 var(--rouge); }
.pastille-choix[data-valeur]:not([data-valeur=""])[data-groupe^="offre"] { border-color: var(--rouge); }
.formulaire button.pastille-choix { background: #fff !important; color: var(--noir) !important; box-shadow: none; border: 2px solid var(--noir); }
.formulaire button.pastille-choix.actif { background: var(--noir) !important; color: var(--creme) !important; box-shadow: 3px 3px 0 var(--rouge); }
.formulaire button.pastille-choix.actif::before { content: "✓ "; }
.mise-en-page.sans-colonne { grid-template-columns: minmax(0, 1fr); }

/* Enchères : cartes des espaces publicitaires */
.choix-region { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; margin: 8px 0 14px; }
.choix-region select { font: inherit; padding: 8px 10px; border: 2px solid var(--noir); background: #fff; }
.cartes-pubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.carte-pub { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fff; border: 3px solid var(--noir); box-shadow: 6px 6px 0 var(--noir); }
.carte-pub p { margin: 0; }
.carte-tete-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte-tete-ligne strong { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.4rem; text-transform: uppercase; }
.carte-mois { font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; color: var(--rouge); }
.carte-etat { display: block; margin-top: 6px; font-size: 1.05rem; }
.carte-tete { color: #1f7a3a; font-weight: 700; }
.carte-bouton { margin-top: auto; font-family: 'Anton', sans-serif; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .5px; padding: 14px; border: 0; cursor: pointer; background: var(--rouge); color: #fff; box-shadow: 4px 4px 0 var(--noir); }
.carte-bouton:hover { background: var(--noir); }
.carte-bouton:disabled { background: #1f7a3a; cursor: default; box-shadow: none; }
.regles-pubs { margin-top: 18px; }
.regles-pubs summary { cursor: pointer; font-weight: 700; }

/* Étiquette « espace à louer » sur la bannière de l'accueil */
.bloc-agence { position: relative; }
.pub-etiquette { position: absolute; top: 10px; right: 12px; z-index: 2; font-family: 'Space Mono', monospace; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--creme); opacity: .7; text-decoration: none; }
.pub-etiquette:hover { opacity: 1; text-decoration: underline; }

/* Espaces non loués : classe pub-libre (le cadre jaune ne paraît qu'avec le lien « Voir », ?pub=…) */
.encart-pub.pub-forcee { display: flex !important; }
.carte-retirer { margin-top: auto; align-self: center; background: none; border: 0; padding: 6px; font: inherit; font-weight: 700; color: var(--rouge); text-decoration: underline; cursor: pointer; }
.carte-retirer + .carte-bouton { margin-top: 6px; }
.carte-retirer { color: var(--noir); text-decoration: none; background: linear-gradient(transparent 45%, #ffd400 45%); padding: 0 4px; }
.carte-confirmer { display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding: 10px; background: #fff7cc; border: 2px solid #ffd400; font-weight: 600; cursor: pointer; }
.carte-confirmer input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.carte-confirmer + .carte-bouton { margin-top: 8px; }
.carte-bouton[data-pret]:disabled { background: #999; box-shadow: none; cursor: not-allowed; }

/* Pastilles des mois (enchères sur 6 mois) */
.mois-rangee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mois-pastille { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font: inherit; font-size: .8rem; border: 2px solid var(--noir); background: #fff; color: var(--noir); cursor: pointer; }
.mois-pastille strong { font-family: 'Space Mono', monospace; text-transform: uppercase; font-size: .78rem; }
.mois-pastille.choisi { background: var(--noir); color: var(--creme); box-shadow: 3px 3px 0 var(--rouge); }
.mois-pastille.mois-tete { border-color: #1f7a3a; color: #1f7a3a; background: #e8f5ec; cursor: default; }
.mois-pastille.mois-reserve { opacity: .45; cursor: default; text-decoration: line-through; }
.carte-retraits { font-size: .85rem; }
.carte-retraits .carte-retirer { margin: 0 2px; padding: 0 4px; }
.carte-bouton:disabled:not([data-pret]) { background: #bbb; box-shadow: none; cursor: default; }
.pastille-surenchere { margin-top: 4px; font: inherit; font-weight: 700; font-size: .85rem; padding: 5px 10px; border: 0; background: var(--rouge); color: #fff; cursor: pointer; }
#bloc-mes-mises { margin-top: 22px; }
.ligne-region { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.ligne-region .choix-region { margin: 0; }
.horloge-pubs { display: flex; flex-direction: column; align-items: flex-end; }
#horloge { font-family: "Space Mono", monospace; font-weight: 700; font-size: 1.6rem; background: var(--noir); color: var(--creme); padding: 2px 12px; }
#compte-rebours { font-family: "Space Mono", monospace; font-size: .8rem; margin-top: 4px; }
#compte-rebours.urgent { color: var(--rouge); font-weight: 700; }

/* « Comment ça marche ? » des enchères */
.regles-pubs { margin-top: 22px; background: #fff; border: 3px solid var(--noir); padding: 0; }
.regles-pubs summary { padding: 14px 18px; font-family: 'Anton', sans-serif; font-size: 1.2rem; text-transform: uppercase; background: var(--noir); color: var(--creme); }
.regles-pubs[open] summary { margin-bottom: 18px; }
.regles-pubs > *:not(summary) { margin-left: 18px; margin-right: 18px; }
.regles-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.regle { position: relative; padding: 16px 14px 14px; border: 3px solid var(--noir); }
.regle h4 { margin: 0 0 6px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.15rem; text-transform: uppercase; }
.regle p { margin: 0; font-size: .92rem; }
.regle-num { position: absolute; top: -14px; left: 12px; width: 28px; height: 28px; display: grid; place-items: center; font-family: 'Anton', sans-serif; background: var(--noir); color: var(--creme); }
.regle-bleu { background: #e6efff; } .regle-rouge { background: #fde8e7; } .regle-jaune { background: #fff6cc; } .regle-vert { background: #e6f5ea; }
.regles-titre { margin: 22px 18px 10px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.15rem; text-transform: uppercase; }
.exemple { margin-bottom: 12px; padding: 12px 14px; background: var(--creme); border-left: 8px solid var(--rouge); }
.exemple p { margin: 0; font-size: .95rem; }
.exemple-titre { font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; font-size: .8rem !important; color: var(--rouge); margin-bottom: 4px !important; }
.regles-liste { list-style: none; padding: 0; margin-bottom: 18px; }
.regles-liste li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: .93rem; }
.puce { flex: none; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 700; color: #fff; }
.puce-vert { background: #1f7a3a; } .puce-jaune { background: #e0b400; } .puce-rouge { background: var(--rouge); }
.regles-liste li { display: block; position: relative; padding-left: 32px; }
.regles-liste .puce { position: absolute; left: 0; top: 0; }
.ligne-mois { display: flex; justify-content: space-between; align-items: center; }
.tous-mois { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--noir); cursor: pointer; }
.tous-mois input { width: 18px; height: 18px; }

/* Choix du % de surenchère */
.ligne-pct { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pcts { display: inline-flex; }
.pct { font: inherit; font-weight: 700; font-size: .85rem; padding: 4px 10px; border: 2px solid var(--noir); margin-left: -2px; background: #fff; color: var(--noir); cursor: pointer; }
.pct.choisi { background: var(--rouge); border-color: var(--rouge); color: #fff; position: relative; }

/* Récapitulatif avant confirmation */
.carte-confirmer { display: block; }
.recap-titre { margin: 0 0 6px !important; font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; font-size: .78rem; }
.recap { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 10px; }
.recap td { padding: 3px 0; border-bottom: 1px dashed #c9b55a; }
.recap td:nth-child(2) { color: #6b6b6b; font-size: .8rem; }
.recap td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.recap-total td { border-bottom: 0; border-top: 2px solid var(--noir); padding-top: 6px; font-weight: 700; font-size: 1rem; }
.carte-confirmer label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }

.pct { white-space: nowrap; }
.pastille-surenchere { margin: 3px 2px 0 0; white-space: nowrap; }
.total-offres { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; margin: 6px 0 12px; padding: 12px 16px; background: var(--noir); color: var(--creme); box-shadow: 5px 5px 0 var(--rouge); }
.total-offres strong { grid-row: span 2; font-family: "Anton", sans-serif; font-weight: 400; font-size: 2rem; }
.total-offres small { opacity: .8; } .total-offres small b { color: #ff8a80; }
.format-pub { margin: 0; font-family: "Space Mono", monospace; font-size: .75rem; background: var(--creme); padding: 4px 8px; }
.formats th { text-align: left; font-size: .8rem; border-bottom: 2px solid var(--noir); padding: 4px 0; }
.formats td:last-child { text-align: left; font-weight: 400; white-space: normal; }
.offre-design { margin: 10px 0 4px; padding: 10px 14px; background: #fff6cc; border-left: 6px solid #e0b400; }
.profil-agent { margin-top: 6px; }
.profil-agent summary { cursor: pointer; font-weight: 700; color: var(--rouge); }
.profil-agent dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; padding: 10px 12px; background: var(--creme); font-size: .9rem; }
.profil-agent dt { font-weight: 700; } .profil-agent dd { margin: 0; }
.profil-agent dd { white-space: pre-line; }

/* Icônes du profil d'un agent qui a accepté */
.ligne-icones td { padding-top: 0 !important; border-top: 0 !important; }
.icones-agent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.icone-agent { display: inline-grid; place-items: center; width: 32px; height: 32px; font-size: 1rem; border: 2px solid; cursor: help; }
.icone-oui { border-color: #1f7a3a; background: #e6f5ea; }
.icone-non { border-color: #ccc; background: #f3f3f3; filter: grayscale(1); opacity: .45; }
.icone-expire { border-color: var(--rouge); background: #fde8e7; }
.langue-agent { display: inline-grid; place-items: center; height: 32px; padding: 0 8px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: .8rem; border: 2px solid var(--noir); cursor: help; }
.cp-agent { font-family: 'Space Mono', monospace; font-size: .85rem; margin-left: 6px; }
.sep-icones { width: 2px; height: 24px; background: #ccc; margin: 0 4px; }

/* Colonnes de critères triables (marques d'intérêt) */
#interets th.col-critere { cursor: pointer; text-align: center; padding: 6px 2px; font-size: 1rem; user-select: none; }
#interets th.col-critere.trie { background: var(--rouge); }
#interets td.col-critere { text-align: center; padding: 4px 2px; }
#interets .icone-agent { width: 28px; height: 28px; font-size: .9rem; }
#interets td.col-langues { white-space: nowrap; }

.filtres-interets { margin: 6px 0 10px; }
.pastille-filtre { font: inherit; font-size: .85rem; font-weight: 700; padding: 4px 10px; border: 0; background: var(--rouge); color: #fff; cursor: pointer; margin: 2px; }

/* Version compacte : barre de filtres + colonne Profil */
.filtre-icone { font: inherit; width: 30px; height: 30px; margin: 1px; padding: 0; border: 2px solid #ccc; background: #fff; cursor: pointer; filter: grayscale(1); opacity: .6; }
.filtre-icone.actif { border-color: var(--rouge); background: #fde8e7; filter: none; opacity: 1; }
.col-profil { min-width: 140px; }
.mini-icone { display: inline-block; font-size: .95rem; margin-right: 3px; cursor: help; }
.mini-expire { outline: 2px solid var(--rouge); outline-offset: 1px; }
.mini-langue { display: inline-block; font-family: 'Space Mono', monospace; font-size: .7rem; font-weight: 700; border: 1px solid var(--noir); padding: 0 3px; margin-right: 3px; cursor: help; }
.titre-interets { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.choix-contrat { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.choix-contrat select { font: inherit; padding: 6px 10px; border: 2px solid var(--noir); background: #fff; }
.offre-design ul { margin: 6px 0; padding-left: 18px; }
.offre-design li { margin-bottom: 3px; }

/* Titre lu par Google et les lecteurs d'écran, invisible à l'écran */
.lecteur-seul { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Articles lus : sans script, 5 dernières nouvelles seulement ; les lus sont atténués */
.liste-nouvelles li:nth-child(n+6) { display: none; }
.liste-nouvelles li.deja-lu a { opacity: .55; }
.liste-nouvelles li.deja-lu time::after { content: " · lu"; }

/* Page d'erreur 404 */
.page-404 { padding: 20px 0 40px; }
.page-404 h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.liens-404 { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.liens-404 a { display: block; padding: 16px 18px; border: 3px solid var(--noir); background: #fff; color: var(--noir); font-family: 'Anton', sans-serif; text-transform: uppercase; text-decoration: none; box-shadow: 5px 5px 0 var(--rouge); }
.liens-404 a:hover { background: var(--noir); color: var(--creme); }

/* Annonces louées : l'image remplace le contenu « à louer » */
.encart-pub.pub-louee, .bloc-agence.pub-louee { position: relative; }
.pub-mention { position: absolute; top: 4px; left: 4px; z-index: 2; font-family: 'Space Mono', monospace; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; background: rgba(20, 20, 20, .75); color: #fff; padding: 1px 5px; }
.habillage.pub-louee { padding: 0; gap: 0; background: var(--noir); overflow: hidden; }
.habillage.pub-louee img { width: 100%; height: 100%; border: 0; object-fit: cover; object-position: top center; background: none; }
.encart-pub.pub-louee { padding: 0; border: 3px solid var(--noir); }
.encart-pub.pub-louee img { display: block; width: 100%; height: auto; }
.bloc-agence.pub-louee { padding: 0; display: block; min-height: 0; }
.bloc-agence.pub-louee .pub-lien { display: block; }
.bloc-agence.pub-louee img { display: block; width: 100%; height: auto; }
.pct-titre { white-space: nowrap; }
.pcts { flex: none; }
.pct { padding: 4px 8px; }
.ligne-pct { flex-wrap: wrap; }
.pcts { max-width: 100%; }
.pct { padding: 4px 6px; font-size: .8rem; }
.mois-pastille span { white-space: nowrap; font-size: .78rem; }

/* Le carnet : encart de la colonne et page des tomes */
.encart-carnet img { display: block; width: 100%; height: auto; border: 3px solid var(--noir); margin-bottom: 10px; }
.tomes { display: grid; gap: 28px; margin: 24px 0; }
.tome { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 22px; align-items: start; padding: 18px; background: #fff; border: 3px solid var(--noir); box-shadow: 6px 6px 0 var(--noir); }
.tome img { display: block; width: 100%; height: auto; border: 2px solid var(--noir); }
.tome h2 { margin: 2px 0 8px; }
.tome ol { margin: 0 0 14px; padding-left: 20px; font-size: .95rem; }
.tome .surtitre { margin: 0; font-family: 'Space Mono', monospace; font-size: .75rem; text-transform: uppercase; color: var(--rouge); }
@media (max-width: 600px) { .tome { grid-template-columns: 1fr; } .tome img { max-width: 220px; } }
.legende-tome { margin: 0 0 10px; font-family: "Space Mono", monospace; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rouge); }
.legende-tome .jauge { display: block; height: 8px; margin-top: 4px; border: 2px solid var(--noir); background: #fff; }
.legende-tome .jauge i { display: block; height: 100%; background: var(--rouge); }

/* Appel aux auteurs, sous l'encart du carnet */
.encart-auteur { background: #fff; border-style: dashed; }
.encart-reddit .bouton + .bouton { margin-top: 8px; }
/* Lien Facebook dans l'en-tête */
.menu-compte a.menu-page { background: var(--noir); color: var(--creme); padding: 0 20px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.5rem; text-transform: none; }
.menu-compte a.menu-page:hover { background: var(--rouge); color: #fff; }
@media (max-width: 900px) { .menu-compte a.menu-page { flex: 0 0 auto; padding: 10px 16px; border-left: 3px solid var(--noir); } }
/* Bouton de langue dans l'en-tête */
.menu-compte a.menu-langue { background: var(--creme); color: var(--noir); padding: 0 14px; }
@media (max-width: 900px) { .menu-compte a.menu-langue { flex: 0 0 auto; padding: 10px 16px; border-left: 3px solid var(--noir); } }
/* Page 404 en affiche : le gros chiffre, la bande qui défile et un faux rapport d'incident */
.affiche-404 { position: relative; overflow: hidden; background: var(--noir); color: var(--creme); border: 3px solid var(--noir); padding: 34px 34px 0; }
.page-404 .affiche-404 p.surtitre { position: relative; margin: 0; font-family: 'Space Mono', monospace; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--creme) !important; }
.cercle-404 { position: absolute; right: -90px; top: -110px; width: 420px; height: 420px; border-radius: 50%; background: var(--rouge); }
.gros-404 { position: relative; margin: 0; font-family: 'Anton', sans-serif; font-size: clamp(7rem, 30vw, 19rem); line-height: .86; color: var(--creme); letter-spacing: -4px; }
.affiche-404 h1 { position: relative; display: inline-block; margin: 14px 0 34px; padding: 6px 14px; background: var(--creme); color: var(--noir); font-size: clamp(1.5rem, 4.6vw, 3rem); transform: rotate(-2deg); border: 0; }
.bande-404 { position: relative; margin: 0 -34px; background: var(--rouge); color: #fff; border-top: 3px solid var(--noir); overflow: hidden; white-space: nowrap; font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.bande-404 > div { display: inline-block; padding: 10px 0; animation: bande-404 26s linear infinite; }
.bande-404 span { padding: 0 16px; } .bande-404 i { font-style: normal; font-size: .6em; vertical-align: middle; }
@keyframes bande-404 { to { transform: translateX(-37.5%); } }
@media (prefers-reduced-motion: reduce) { .bande-404 > div { animation: none; } }
.rapport-404 { max-width: 640px; margin: 34px auto 30px; background: #fff; border: 3px solid var(--noir); box-shadow: 8px 8px 0 var(--noir); padding: 0 22px 16px; font-family: 'Space Mono', monospace; font-size: .86rem; transform: rotate(.6deg); }
.rapport-entete { display: flex; justify-content: space-between; margin: 0 -22px 14px; padding: 10px 22px; background: var(--noir); color: var(--creme); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.rapport-entete span:last-child { color: var(--rouge); background: var(--creme); padding: 0 8px; }
.rapport-404 dl { display: grid; grid-template-columns: 150px 1fr; margin: 0; }
.rapport-404 dt, .rapport-404 dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed #b9b0a0; }
.rapport-404 dt { text-transform: uppercase; font-size: .72rem; color: var(--rouge); font-weight: 700; padding-top: 10px; }
.rapport-404 dd { word-break: break-word; }
.rapport-404 dt:nth-last-of-type(1), .rapport-404 dd:last-child { border-bottom: 0; }
.signature-404 { font-family: 'Inter', sans-serif; font-style: italic; font-size: 1.15rem; }
.page-404 > .chapeau { text-align: center; }
@media (max-width: 600px) { .affiche-404 { padding: 22px 18px 0; } .bande-404 { margin: 0 -18px; } .cercle-404 { width: 240px; height: 240px; right: -70px; top: -70px; } .rapport-404 dl { grid-template-columns: 1fr; } .rapport-404 dt { border-bottom: 0; padding-bottom: 0; } }
/* Étiquettes « Nouveau » et « Lu » sur les articles (mémoire du navigateur du visiteur) */
.pastille-etat { display: inline-block; align-self: flex-start; margin: 0 6px 6px 0; padding: 2px 8px; font-family: 'Space Mono', monospace; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; vertical-align: middle; }
.pastille-nouveau { background: var(--rouge); color: #fff; }
.etiquettes .pastille-etat { margin: 0 0 0 6px; }
.carte-lue .carte-image, .carte-lue h3 a, .suite.carte-lue h2 a { opacity: .6; }
html[lang^="en"] .liste-nouvelles li.deja-lu time::after { content: " · read"; }
.message-vide .appel-vide { display: block; width: fit-content; margin-top: 12px; text-decoration: none; }

/* Appel à créer son profil : grand bloc sur la page d'emploi, ligne mince en tête des articles */
.appel-profil { margin: 22px 0 26px; padding: 22px 24px; background: var(--noir); color: var(--creme); border-left: 10px solid var(--rouge); }
.appel-profil strong { display: block; font-family: 'Anton', sans-serif; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .5px; }
.appel-profil p { margin: 10px 0 16px; color: var(--creme); }
.appel-profil .bouton-creme { box-shadow: 6px 6px 0 var(--rouge); }
.appel-profil-mince { margin: 14px 0 18px; padding: 10px 14px; border: 2px solid var(--noir); background: #fff; font-weight: 600; }
.appel-profil-mince a { color: var(--rouge); font-weight: 700; }

/* Champ piège des formulaires publics : invisible pour une personne, rempli par un robot */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.encart-agent .lien-histoires { margin: 10px 0 0; font-weight: 700; }
.encart-agent .lien-histoires a { color: inherit; }
/* Le mot-dièse garde ses majuscules et ses minuscules, sinon il devient illisible */
.mot-diese { text-transform: none; }

/* Formulaire d'histoires : bouton de dictée à côté du bouton d'envoi */
.ligne-envoi { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.bouton-micro { display: inline-flex; align-items: center; gap: 8px; background: var(--creme) !important; color: var(--noir) !important; border: 3px solid var(--noir) !important; }
.bouton-micro:hover { background: #fff !important; }
.bouton-micro.actif { background: var(--rouge) !important; color: var(--creme) !important; border-color: var(--rouge) !important; }
/* Avertissement au-dessus de la case quand la dictée est offerte */
.legende-dictee { margin: 0 0 12px; padding: 8px 12px; border-left: 6px solid var(--rouge); background: #fff; font-weight: 600; }

/* Formulaire d'histoires : case « humour noir » et son échelle de 1 à 10 */
.bloc-noir { margin: 4px 0 14px; }
.case-noir { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.case-noir input { width: 22px; height: 22px; margin: 0; accent-color: var(--noir); }
#noir-echelle { margin-top: 10px; padding: 12px 14px; border: 2px solid var(--noir); background: #fff; }
#noir-echelle input[type=range] { display: block; width: 100%; margin: 10px 0 4px; accent-color: var(--rouge); }
#noir-echelle .note { margin: 0; }
.formulaire label.case-noir { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; }
.formulaire label.case-noir input { width: 22px; height: 22px; flex: none; }
.formulaire #noir-echelle label { display: block; }

/* Étiquettes des histoires de quart : choix sur le formulaire, mots-dièse sur l'article */
.bloc-etiquettes { margin: 4px 0 14px; padding: 0; border: 0; min-width: 0; }
.bloc-etiquettes legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.bloc-etiquettes legend .note { font-weight: 400; }
.etiquettes-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.formulaire label.case-etiquette { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 2px solid var(--noir); background: #fff; font-family: var(--mono); font-weight: 700; cursor: pointer; }
.formulaire label.case-etiquette input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--rouge); }
.formulaire label.case-etiquette:has(input:checked) { background: var(--noir); color: var(--creme); }
.formulaire label.case-etiquette:has(input:disabled) { opacity: .45; cursor: default; }
.etiquettes-histoire { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes-histoire a { font-family: var(--mono); font-weight: 700; text-decoration: none; color: var(--noir); border: 2px solid var(--noir); padding: 3px 10px; background: #fff; }
.etiquettes-histoire a:hover { background: var(--noir); color: var(--creme); }

/* Étiquettes « qui raconte » : la précision entre le mot-dièse et la case suivante, et la case de suggestion */
.case-etiquette .precision { font-family: 'Inter', sans-serif; font-weight: 400; font-size: .85em; opacity: .75; }
.formulaire label.suggestion-etiquette { display: block; margin-top: 12px; font-weight: 700; }
.formulaire label.suggestion-etiquette input { display: block; width: 100%; max-width: 320px; margin-top: 6px; }
/* Sous la case d'une histoire : le rappel que rien n'oblige à publier */
.legende-publication { margin: -6px 0 14px; font-weight: 600; font-style: italic; }

/* « Qui raconte ? » : un menu déroulant, pour ne pas prendre de place */
.formulaire label.choix-agent { display: block; margin: 4px 0 14px; font-weight: 700; }
.formulaire label.choix-agent select { display: block; width: 100%; max-width: 360px; margin-top: 6px; font: inherit; font-family: var(--mono); font-weight: 700; padding: 8px 10px; border: 2px solid var(--noir); background: #fff; }
/* Le menu « Qui raconte ? » prend la largeur de son texte, pas plus */
.formulaire label.choix-agent select { width: auto; max-width: 100%; }
/* Étiquettes d'une histoire sur sa carte, dans les listes */
.carte-texte .etiquettes-histoire { margin: 8px 0 2px; gap: 6px; }
.carte-texte .etiquettes-histoire a { font-size: .72rem; padding: 2px 7px; }

/* Les trois cœurs au bas d'un article */
.coeurs { margin: 34px 0 6px; padding: 16px 18px; border: 3px solid var(--noir); background: var(--creme-2); }
.coeurs-titre { margin: 0 0 10px; font-family: var(--titre); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .3px; }
.coeurs-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.coeurs button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-family: var(--mono); font-weight: 700; font-size: .85rem; color: var(--noir); background: #fff; border: 2px solid var(--noir); padding: 8px 14px; cursor: pointer; }
.coeurs button svg { width: 24px; height: 24px; color: var(--rouge); flex: none; }
.coeurs .deux-coeurs { display: inline-flex; }
.coeurs .deux-coeurs svg + svg { margin-left: -9px; }
.coeurs button:hover:not(:disabled), .coeurs button.choisi { background: var(--noir); color: var(--creme); }
.coeurs button:disabled { cursor: default; }
.coeurs button:disabled:not(.choisi) { opacity: .4; }
.coeurs-merci { margin: 12px 0 0; font-size: .92rem; }

/* Boutons de partage, sous les cœurs */
.partage { margin: 12px 0 6px; }
.partage-titre { margin: 0 0 8px; font-family: var(--titre); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .3px; }
.partage-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.partage-choix a, .partage-choix button { font: inherit; font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--noir); background: #fff; border: 2px solid var(--noir); padding: 6px 12px; text-decoration: none; cursor: pointer; }
.partage-choix a:hover, .partage-choix button:hover { background: var(--noir); color: var(--creme); }
.partage-choix .partage-natif { background: var(--rouge); color: #fff; border-color: var(--rouge); }

/* Annonce du prochain article : une bande rouge fixe, aux couleurs du bandeau de faits, au-dessus de « Tous les articles » sur l'accueil */
.legende-prochain { margin: 0; padding: 9px 24px; background: var(--rouge); color: #fff; border: 3px solid var(--noir); border-bottom: 0; font-family: var(--titre); text-transform: uppercase; letter-spacing: .6px; font-size: .9rem; }
.legende-prochain strong { font-weight: 400; }

/* ═══════════ Les volets de la famille, au bout du logo ═══════════
   Fermé, un volet est une barre oblique de la couleur de son site. Au survol (ou au clavier), le blanc s'ouvre
   sur le logo d'Agent Code Blanc et prend la place de la section ASQ, qui se replie. Même mécanique sur agentcodeblanc.com. */
/* Le noir du logo se prolonge jusqu'à l'oblique : cette pièce noire inclinée recouvre le bord droit du bloc et lui donne sa coupe en biais */
.ligne-oblique { flex: none; align-self: stretch; width: 34px; margin: 0 0 0 -16px; background: var(--noir); transform: skewX(-20deg); }
/* Même pièce à gauche : le bloc noir est coupé en biais des deux côtés, entre la barre blanche et la jaune */
.ligne-gauche { margin: 0 -18px 0 0; }
.volet { flex: none; align-self: stretch; display: flex; align-items: center; width: 24px; margin: 0 0 0 8px; overflow: hidden; transform: skewX(-20deg); text-decoration: none; transition: width .35s ease; box-sizing: border-box; }
/* La barre blanche n'a un filet noir que sur ses deux côtés en biais, rien en haut ni en bas */
.volet-blanc { background: #fff; color: var(--noir); border: solid var(--noir); border-width: 0 3px; margin: 0 8px 0 12px; }
.volet-jaune { background: #f5c400; } .volet-bleu { background: #1d4ed8; } .volet-orange { background: #ff6a00; } .volet-vert { background: #1f9d3a; }
.volet-in { display: flex; align-items: center; gap: 12px; padding: 0 26px; white-space: nowrap; transform: skewX(20deg); opacity: 0; transition: opacity .2s ease; }
.volet-blanc .logo-pastille { background: var(--noir); color: #fff; }
/* Le volet jaune (Agent Ambulancier) : texte noir sur le jaune des ambulances */
.volet-jaune, .volet-jaune:hover, .volet-jaune:focus-visible, .volet-jaune .logo-texte, .volet-jaune .logo-texte small { color: var(--noir); }
.volet-jaune .logo-pastille { background: var(--noir); color: #fff; }
.volet-jaune .logo-texte small { opacity: .85; font-size: .92rem; font-weight: 700; line-height: 1.1; }
.volet-blanc .logo-texte small { color: var(--noir); opacity: .85; font-size: .92rem; font-weight: 700; line-height: 1.1; }
.diese { font-size: 1.75em; line-height: 0; vertical-align: -.12em; margin-right: 2px; }
@media (hover: hover) and (min-width: 961px) {
  /* Un volet ouvert est toujours plus large que la section repliée : son bord droit ne recule jamais sous la souris */
  /* 280 px, c'est la largeur réelle du logo (278,6 px avec la police Anton, en français comme en anglais) : la transition de max-width
     rétrécit donc le logo dès le premier instant, au même rythme que la barre s'ouvre. Avec 360 px, le logo ne bougeait pas pendant
     le premier quart de la transition, la famille s'élargissait de 40 px, le menu se déplaçait et l'en-tête pouvait changer de hauteur
     le temps d'un battement (mesuré le 11 oct. 2026 à 1 100 px de large). */
  .entete .logo { max-width: 280px; overflow: hidden; white-space: nowrap; transition: max-width .35s ease, padding .35s ease, opacity .25s ease; }
  .entete-in:has(.volet-blanc:hover) .logo, .entete-in:has(.volet-blanc:focus-visible) .logo, .entete-in:has(.volet-jaune:hover) .logo, .entete-in:has(.volet-jaune:focus-visible) .logo { max-width: 66px; padding-left: 18px; padding-right: 0; opacity: 1; }
  /* 250 px : juste la largeur de « ACB Code Blanc #hôpital » (c'était 380 px du temps de « Agent Code Blanc », raccourci le 10 oct. 2026) */
  .volet-blanc:hover, .volet-blanc:focus-visible { width: 250px; }
  /* Même règle pour la jaune, la bleue et l'orange (11 oct. 2026) : le logo se replie sur sa pastille (66 px) au lieu de disparaître.
     Ces barres sont à DROITE du logo, donc elles glissent vers la gauche quand il se replie : avec un repli complet, la bleue et l'orange
     sortaient de sous la souris et clignotaient. Repli de 213 px, barres ouvertes de 280 px ou plus : la barre couvre toujours sa place d'origine. */
  /* Quand la barre blanche s'ouvre, le logo d'ASQ ne disparaît pas : il se replie sur sa pastille. Sans ça, la barre ouverte (250 px)
     prenait moins de place que le logo replié, le menu remontait sur une rangée, l'en-tête raccourcissait sous la souris, et la barre
     se refermait et se rouvrait sans fin sur un écran de largeur moyenne (bogue signalé par Martin le 11 oct. 2026). */
  .entete-in:has(.volet-blanc:hover) .logo, .entete-in:has(.volet-blanc:focus-visible) .logo { max-width: 66px; padding-left: 18px; padding-right: 0; opacity: 1; }
  .volet-jaune:hover, .volet-jaune:focus-visible { width: 300px; }
  .volet-blanc:hover .volet-in, .volet-blanc:focus-visible .volet-in, .volet-jaune:hover .volet-in, .volet-jaune:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) { .volet, .volet-in, .entete .logo, .ligne-oblique { transition: none; } }
@media (max-width: 960px) {
  .entete .logo { flex: 0 1 auto; }
  .volet-vert { margin-right: 14px; }
}
/* Téléphone : toutes les barres de couleur de la famille restent là, en mince, à droite du logo (demande de Martin, 11 oct. 2026 ;
   avant, on ne gardait que la blanche). Le logo d'ASQ est long : on le serre un peu pour que tout tienne sur une rangée. */
@media (max-width: 600px) {
  .volet { width: 14px; margin-left: 4px; }
  .volet-blanc { width: 20px; margin: 0 6px 0 6px; }
  .volet-vert { margin-right: 6px; }
  .ligne-oblique { width: 24px; margin-left: -12px; margin-right: 2px; }
  .ligne-gauche { margin: 0 -14px 0 0; }
  .entete .logo { padding: 10px 12px 10px 10px; gap: 8px; min-width: 0; }
  .entete .logo .logo-texte small { letter-spacing: 0; font-size: .54rem; }
  .entete .logo .logo-texte { font-size: .88rem; letter-spacing: .2px; }
  .entete .logo .logo-pastille { font-size: .92rem; padding: 3px 6px; }
}
/* Très petit téléphone : barres encore plus minces, et la verte (site à venir) laisse sa place */
@media (max-width: 359px) { .volet { width: 10px; margin-left: 3px; } .volet-blanc { width: 14px; } .volet-vert { display: none; } .entete .logo .logo-texte { font-size: .8rem; } }
/* L'en-tête a la même largeur que le contenu en dessous (1 240 px moins ses marges de 16 px) : la barre blanche à gauche et le dernier bouton à droite tombent coin pour coin avec les blocs de la page. Le menu du haut n'a plus que deux liens (Articles, Carnet ; Emplois retiré le 11 oct. 2026, il reste dans le pied de page), il tient sur une rangée. */
@media (min-width: 961px) { .entete-in { max-width: min(1208px, calc(100% - 32px)); } }

/* Sur une carte, l'étiquette garde sa hauteur : elle ne s'étire pas quand la carte voisine est plus haute */
.carte-texte .etiquettes-histoire { flex: none; align-items: flex-start; }

/* ═══════════ Imprimer ce qu'on veut : bouton « Imprimer » d'un article, et carnet au choix (/carnet/au-choix/) ═══════════ */
.partage-choix .partage-imprimer { background: var(--noir); color: var(--creme); border-color: var(--noir); }
.carnet-choix { margin: 0 0 22px; }
.carnet { max-width: 820px; margin: 0 auto; }
.carnet-genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 10px; }
.carnet-genres .genre { font: inherit; font-family: var(--mono); font-weight: 700; font-size: .85rem; padding: 8px 12px; border: 2px solid var(--noir); background: #fff; color: var(--noir); cursor: pointer; }
.carnet-genres .genre[aria-pressed="true"] { background: var(--noir); color: #fff; }
.carnet-genres .genre-rien { border-style: dashed; }
.carnet-genres .compte { display: inline-block; min-width: 1.5em; margin-left: 5px; padding: 0 5px; background: var(--noir); color: #fff; text-align: center; }
.carnet-genres .genre[aria-pressed="true"] .compte { background: #fff; color: var(--noir); }
.carnet-etat { font-weight: 700; margin: 0 0 14px; }
.carnet-outils { padding-bottom: 26px; border-bottom: 3px solid var(--noir); margin-bottom: 26px; }
.carnet-outils .bouton { font-size: 1.2rem; padding: 14px 22px; border: 0; cursor: pointer; }
.carnet-outils .bouton:disabled { opacity: .4; cursor: not-allowed; }
.carnet-couverture { display: none; }
.carnet-sommaire ol { list-style: none; padding-left: 0; }
.carnet-sommaire li { display: flex; align-items: baseline; gap: 2px; margin: 4px 0; }
.carnet-sommaire label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
.carnet-sommaire input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--noir); cursor: pointer; margin: 0; }
.tag-ligne { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .68rem; line-height: 1.5; padding: 0 5px; margin-right: 6px; border: 2px solid var(--noir); background: #fff; color: var(--noir); vertical-align: 1px; white-space: nowrap; }
/* À l'écran, la page s'arrête au sommaire : le texte des articles ne paraît qu'à l'impression */
.feuille { display: none; }
.feuille h2 { border: 0; font-size: 1.9rem; margin: 6px 0 10px; }
.feuille h3 { font-size: 1.25rem; border-top: 2px solid var(--noir); padding-top: 10px; margin-top: 22px; }
.feuille h4 { font-family: inherit; text-transform: none; font-weight: 700; font-size: 1.02rem; margin: 16px 0 4px; }
.feuille-tete { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.feuille-pied { font-family: var(--mono); font-size: .72rem; color: var(--gris); margin-top: 18px; }
.carnet [hidden] { display: none !important; }
@media print {
  @page { margin: 16mm 15mm; }
  .entete, .bandeau, .pied, .haut-de-page, .habillage, .temoins, .pub-avis, .barre-laterale, .a-lire, .filtres-categories, .pagination,
  .carnet-outils, .coeurs, .partage, .article-image, .etiquettes-histoire, .appel-profil-mince { display: none !important; }
  body, .mise-en-page, main { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; display: block !important; }
  body { font-size: 10.5pt; color: #000; }
  .article h1 { font-size: 22pt; }
  .article a, .feuille a, .carnet-sommaire a { color: #000; text-decoration: none; }
  .article h2, .article h3, .feuille h3, .feuille h4 { page-break-after: avoid; break-after: avoid; }
  .carnet { max-width: none; }
  .carnet-couverture { display: flex; flex-direction: column; justify-content: center; min-height: 240mm; page-break-after: always; break-after: page; }
  .couverture-logo .logo-pastille { display: inline-block; font-size: 30pt; padding: 8px 16px; background: #d7261e; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .couverture-titre { font-family: var(--titre); text-transform: uppercase; font-size: 46pt; line-height: 1; margin: 26px 0 8px; }
  .couverture-sous-titre { font-family: var(--titre); text-transform: uppercase; font-size: 22pt; margin: 0 0 30px; }
  .couverture-date { font-family: var(--mono); font-size: 9pt; text-transform: uppercase; letter-spacing: 1px; }
  .couverture-note { font-size: 9pt; max-width: 120mm; margin-top: 40px; }
  .carnet-sommaire { page-break-after: always; break-after: page; }
  .carnet-sommaire li:has(input:not(:checked)) { display: none; }
  .carnet-sommaire input[type=checkbox] { display: none; }
  .feuille { display: block; page-break-before: always; break-before: page; }
  .feuille:first-of-type { page-break-before: auto; break-before: auto; }
  .feuille h2 { font-size: 20pt; }
  .essentiel, .categorie, .tableau th, .tag-ligne { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tableau { overflow: visible; }
  .tableau table { font-size: 9pt; page-break-inside: avoid; break-inside: avoid; }
  li, p { orphans: 3; widows: 3; }
}
/* Carnet : la liste des futurs articles, sous le sommaire. Elle ne s'imprime pas. */
.carnet-avenir { margin-top: 26px; }
.carnet-avenir ul { list-style: none; padding-left: 0; }
.carnet-avenir li { margin: 4px 0; color: var(--gris); }
.date-ligne { display: inline-block; min-width: 7.6em; font-family: var(--mono); font-weight: 700; font-size: .78rem; color: var(--noir); }
@media print { .carnet-avenir { display: none !important; } }
/* « Supprimer mon profil » : à droite et à l'écart du bouton « Envoyer », pour ne pas l'accrocher par erreur */
.supprimer-profil { text-align: right; margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--ligne); }
/* Liste des nouvelles allégée (10 oct. 2026) : une seule barre de filtres, sur une ligne qui défile. Le fondu à droite montre qu'il y a une suite. */
.barre-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 0 48px 8px 0; margin-bottom: 18px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.barre-filtres a { flex: none; white-space: nowrap; }
.barre-filtres a.filtre-qui { text-transform: none; }
.filtre-sep { flex: none; width: 2px; align-self: stretch; background: var(--noir); margin: 0 4px; }
/* Sur une carte : « Nouveau » et l'étiquette sur la même ligne, juste au-dessus du titre */
.carte-texte .etiquettes-histoire { align-items: center; margin-top: 0; }
.carte-texte .etiquettes-histoire .pastille-etat { margin: 0; }
/* Téléphone (10 oct. 2026) : le menu et les boutons tiennent sur UNE rangée sous le logo, avec des libellés courts
   (« Carnet », « Profil »). S'ils ne tiennent pas sur un très petit écran, les boutons repassent en dessous. */
@media (max-width: 700px) {
  .menu-long { display: none; }
  .entete .menu { flex: 1 1 auto; width: auto; padding: 0 0 0 12px; gap: 0 11px; flex-wrap: nowrap; align-items: stretch; border-top: 3px solid var(--noir); }
  .entete .menu a { display: flex; align-items: center; font-size: .8rem; letter-spacing: .2px; padding: 0; white-space: nowrap; }
  .entete .menu-compte { flex: 0 0 auto; width: auto; margin-left: auto; border-top: 3px solid var(--noir); }
  .entete .menu-compte a, .entete .menu-compte a.menu-langue, .entete .menu-compte a.menu-page { flex: 0 0 auto; padding: 9px 8px; font-size: .8rem; letter-spacing: .2px; border-top: 0; border-left: 3px solid var(--noir); white-space: nowrap; }
  .entete .menu-compte a.menu-page { font-size: 1.05rem; padding: 6px 10px; }
  /* Sur les listes de nouvelles, la phrase d'introduction laisse sa place aux articles */
  .chapeau-liste { display: none; }
}

/* Le volet bleu mène à Agent Policier : il s'ouvre comme les autres, lettres blanches sur le bleu de la police */
a.volet-bleu, a.volet-bleu:hover, a.volet-bleu:focus-visible, a.volet-bleu .logo-texte, a.volet-bleu:hover .logo-texte, a.volet-bleu:focus-visible .logo-texte, a.volet-bleu .logo-texte small { color: #fff; }
a.volet-bleu .logo-pastille { background: var(--noir); color: #fff; }
a.volet-bleu .logo-texte small { opacity: .9; font-size: .92rem; font-weight: 700; line-height: 1.1; }
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(a.volet-bleu:hover) .logo, .entete-in:has(a.volet-bleu:focus-visible) .logo { max-width: 66px; padding-left: 18px; padding-right: 0; opacity: 1; }
  a.volet-bleu:hover, a.volet-bleu:focus-visible { width: 280px; }
  a.volet-bleu:hover .volet-in, a.volet-bleu:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}

/* Le volet orange mène à Agent Pompier : il s'ouvre comme les autres, lettres blanches sur l'orange des pompiers */
a.volet-orange, a.volet-orange:hover, a.volet-orange:focus-visible, a.volet-orange .logo-texte, a.volet-orange:hover .logo-texte, a.volet-orange:focus-visible .logo-texte, a.volet-orange .logo-texte small { color: #fff; }
a.volet-orange .logo-pastille { background: var(--noir); color: #fff; }
a.volet-orange .logo-texte small { opacity: .9; font-size: .92rem; font-weight: 700; line-height: 1.1; }
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(a.volet-orange:hover) .logo, .entete-in:has(a.volet-orange:focus-visible) .logo { max-width: 66px; padding-left: 18px; padding-right: 0; opacity: 1; }
  a.volet-orange:hover, a.volet-orange:focus-visible { width: 280px; }
  a.volet-orange:hover .volet-in, a.volet-orange:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}
/* « Mon profil » : le bouton est une boîte flexible, qui avale l'espace entre « Mon » et « profil ». On le redonne ici. */
.menu-compte a .menu-long { margin-right: .3em; }

/* ═══════════ L'en-tête d'ASQ se comporte comme celui des autres sites de la famille (demande de Martin, 11 oct. 2026) ═══════════
   Même mécanique que sur agentpolicier.com : toute barre survolée s'ouvre à 310 px et montre le nom complet du site, et le logo d'ASQ
   se replie en barre noire de 46 px, vide. Ce bloc passe après les règles plus haut (barre blanche à 250 px, repli sur la pastille)
   et les remplace. Le calcul qui évite le clignotement : le logo perd 233 px, la barre en gagne 286, donc une barre ouverte couvre
   toujours la place qu'elle avait fermée, de quelque côté du logo qu'elle soit. La suite du calcul est dans le bloc « L'en-tête garde sa hauteur » plus bas. */
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(a.volet:hover) .logo, .entete-in:has(a.volet:focus-visible) .logo { max-width: 46px; padding-left: 0; padding-right: 0; opacity: 1; }
  .entete .logo > * { transition: opacity .2s ease; }
  .entete-in:has(a.volet:hover) .logo > *, .entete-in:has(a.volet:focus-visible) .logo > * { opacity: 0; }
  .entete a.volet:hover, .entete a.volet:focus-visible { width: 310px; }
  .entete a.volet:hover .volet-in, .entete a.volet:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}


/* ═══════════ La famille dans une boîte : l'en-tête ne bouge plus quand une barre s'ouvre (bogue signalé par Martin, 11 oct. 2026) ═══════════
   Le problème : une barre qui s'ouvre et un logo qui se replie étaient deux animations séparées. Dès qu'elles n'étaient pas parfaitement
   synchrones (la souris passe d'une barre à l'autre, une animation repart à l'envers à mi-chemin), la famille changeait de largeur
   pendant quelques images, le menu se réorganisait, l'en-tête changeait de hauteur et la barre sortait de sous la souris : ça clignotait.
   Entre 961 et 1 200 px de large (un portable au zoom 125 %), où le menu tient sur deux rangées, c'était à chaque passage.
   La solution : sur ordinateur, la famille (barres, pièces obliques et logo) vit dans une boîte .famille de largeur FIXE, 492 px.
   Le logo n'a plus d'animation à lui : il est l'élément souple de la boîte et prend la place qui reste, calculée par le navigateur
   à chaque image. Une barre qui s'ouvre (24 → 310 px) pousse donc le logo, qui se replie exactement d'autant, quoi qu'il arrive.
   Le bord droit d'une barre survolée ne bouge pas d'un pixel, les autres barres non plus, le menu non plus.
   Replié, le logo fait 0 px (son remplissage est passé dans les marges de la pastille et du texte, pour qu'il puisse disparaître) :
   restent les deux pièces obliques, qui se superposent en une barre noire penchée de 34 px, comme les barres des autres sites.
   492 px, c'est 7 px de plus que la famille au naturel avec la police Anton : les 7 px vont au logo, cachés sous la pièce oblique
   qui le chevauche de 16 px. Si la police de secours est plus large, c'est le bout du logo qui passe sous l'oblique, rien d'autre. */
.famille { display: flex; align-items: stretch; flex: 1 1 100%; min-width: 0; }
@media (hover: hover) and (min-width: 961px) {
  .famille { flex: none; width: 492px; }
  .entete .logo, .entete-in:has(a.volet:hover) .logo, .entete-in:has(a.volet:focus-visible) .logo { flex: 1 1 auto; min-width: 0; max-width: none; padding-left: 0; padding-right: 0; clip-path: none; transition: none; opacity: 1; }
  .entete .logo .logo-pastille { margin-left: 18px; }
  .entete .logo .logo-texte { margin-right: 18px; }
}
@media (min-width: 961px) and (hover: none) { .famille { flex: none; } }

/* ═══════════ « Vous avez aimé cet article ? » et le partage, en petit (demande de Martin, 12 oct. 2026) ═══════════
   Le bloc passe avant la FAQ : il ne doit pas couper la lecture. Chaque question tient sur une ligne, la question à gauche
   et ses boutons à la suite, sans cadre épais ni fond. */
.coeurs { margin: 22px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--noir); background: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.coeurs-titre { margin: 0; font-size: .86rem; }
.coeurs-choix { gap: 6px; }
.coeurs button { gap: 5px; font-size: .7rem; padding: 3px 8px; border-width: 1px; }
.coeurs button svg { width: 15px; height: 15px; }
.coeurs .deux-coeurs svg + svg { margin-left: -6px; }
.coeurs-merci { margin: 0; flex: 1 1 100%; font-size: .8rem; }
.partage { margin: 6px 0 22px; padding-bottom: 8px; border-bottom: 1px solid var(--noir); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.partage-titre { margin: 0; font-size: .86rem; }
.partage-choix { gap: 5px; }
.partage-choix a, .partage-choix button { font-size: .7rem; padding: 3px 8px; border-width: 1px; }

/* ═══════════ Cartes : les cœurs à droite de la catégorie, et le tampon « Nouveau » sur l'image (demande de Martin, 12 oct. 2026) ═══════════ */
.carte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.carte-tete:empty { display: none; }
.carte-tete .categorie { align-self: center; margin: 0; }
.nb-coeurs { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-weight: 700; font-size: .8rem; color: #d7261e; }
.nb-coeurs svg { width: 15px; height: 15px; }
/* Le tampon est rouge sur tous les sites, quelle que soit la couleur de la maison */
.carte-nouvelle a.avec-tampon { position: relative; display: block; }
.tampon-nouveau { position: absolute; top: 16px; left: 10px; z-index: 2; transform: rotate(-11deg); padding: 3px 14px 4px; background: #d7261e; color: #fff; border: 3px solid #fff; outline: 3px solid #d7261e; font-family: var(--titre); font-weight: 400; font-size: 1.7rem; line-height: 1.1; letter-spacing: 2px; text-transform: uppercase; box-shadow: 4px 4px 0 rgba(20, 20, 20, .55); pointer-events: none; }
@media print { .tampon-nouveau, .nb-coeurs { display: none !important; } }
/* Le tampon « Nouveau » en plus petit (demande de Martin, 12 oct. 2026 : le premier était trop gros) */
.tampon-nouveau { top: 12px; left: 8px; padding: 2px 9px 3px; font-size: 1.05rem; letter-spacing: 1.2px; border-width: 2px; outline-width: 2px; box-shadow: 3px 3px 0 rgba(20, 20, 20, .55); }

/* ═══════════ Le vote pour le prochain article, au-dessus de « Futurs articles » sur la page du carnet (demande de Martin, 12 oct. 2026) ═══════════ */
.vote-prochain { margin: 26px 0 0; padding: 16px 18px; border: 3px solid var(--noir); background: var(--creme-2); }
.vote-prochain h2 { margin: 0 0 6px; }
.vote-prochain p { margin: 0 0 10px; }
.vote-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.vote-form[hidden] { display: none; }
.vote-form input[type="email"] { flex: 1 1 220px; max-width: 340px; font: inherit; padding: 8px 10px; border: 2px solid var(--noir); background: #fff; }
.vote-form button, .vote-bouton, .vote-sortir { font: inherit; font-family: var(--mono); font-weight: 700; font-size: .8rem; text-transform: uppercase; cursor: pointer; border: 2px solid var(--noir); background: var(--noir); color: var(--creme); padding: 8px 14px; }
.vote-sortir { background: none; color: var(--noir); padding: 4px 10px; font-size: .7rem; margin-bottom: 10px; }
.vote-etat { font-weight: 700; }
.vote-etat:empty { display: none; }
.vote-ligne { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; white-space: nowrap; }
.vote-compte { font-family: var(--mono); font-weight: 700; font-size: .74rem; color: #d7261e; }
.vote-bouton { padding: 2px 9px; font-size: .68rem; border-width: 1px; }
.vote-bouton.choisi { background: #d7261e; border-color: #d7261e; color: #fff; cursor: default; }
@media print { .vote-prochain, .vote-ligne { display: none !important; } }
/* Le vote se fait avec un cœur à côté de chaque futur article (demande de Martin, 12 oct. 2026) : vide, puis plein et rouge pour son choix */
.vote-coeur { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 2px 4px; border: 0; background: none; cursor: pointer; vertical-align: middle; font-family: var(--mono); font-weight: 700; font-size: .78rem; color: #d7261e; }
.vote-coeur svg { width: 19px; height: 19px; }
.vote-coeur:hover svg path { fill: currentColor; }
.vote-coeur.choisi { cursor: default; }
@media print { .vote-coeur { display: none !important; } }
/* Le vote est un « + » à gauche de la date, à la place du cœur (demande de Martin, 12 oct. 2026). La classe garde son nom. */
.vote-coeur { margin: 0 8px 0 0; padding: 0 6px; min-width: 24px; height: 22px; justify-content: center; border: 2px solid var(--noir); background: #fff; color: var(--noir); font-size: .82rem; line-height: 1; }
.vote-coeur:hover, .vote-coeur.choisi { background: #d7261e; border-color: #d7261e; color: #fff; }
/* La case de l'infolettre, sous le champ du courriel de la boîte de vote */
.vote-infolettre { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; cursor: pointer; }
.vote-infolettre input { margin-top: 3px; width: 16px; height: 16px; flex: none; }

/* ═══════════ La voûte (12 oct. 2026) : page noire, pour adultes avertis, avec un avis au centre de l'écran avant d'entrer ═══════════ */
body.voute { background: #0a0a0a; }
body.voute main { color: #e9e4d8; }
body.voute.voute-fermee { overflow: hidden; }
.voute-page { max-width: 680px; margin: 0 auto; padding: 40px 0 80px; }
.voute-page h1 { color: #e9e4d8; font-size: 3.2rem; margin: 0 0 22px; }
.voute-page p { font-size: 1.12rem; line-height: 1.7; margin: 0 0 18px; color: #e9e4d8; }
.voute-page .voute-vide { margin-top: 34px; padding-top: 18px; border-top: 1px solid #3a3a3a; font-family: var(--mono); font-size: .85rem; color: #9a958a; }
.voute-avis { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .94); }
.voute-avis[hidden] { display: none; }
.voute-avis-boite { max-width: 440px; padding: 26px 24px; background: #0a0a0a; border: 3px solid #d7261e; color: #e9e4d8; text-align: center; }
.voute-avis-boite p { margin: 0 0 16px; color: #e9e4d8; }
.voute-avis-titre { font-family: var(--titre); text-transform: uppercase; font-size: 1.6rem; line-height: 1.1; color: #d7261e !important; }
.voute-avis-choix { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.voute-avis-choix button { font: inherit; font-family: var(--titre); text-transform: uppercase; letter-spacing: .5px; font-size: 1rem; padding: 10px 18px; background: #d7261e; color: #fff; border: 0; cursor: pointer; }
.voute-avis-choix a { color: #9a958a; font-size: .9rem; }
/* Formulaire Raconter : la case « public averti », tout en haut */
.formulaire label.case-averti { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; cursor: pointer; margin: 0 0 4px; }
.formulaire label.case-averti input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.formulaire .note-averti { margin: 0 0 16px; }

/* Le bouton de langue (EN ou FR) : une boîte fermée des quatre côtés, à gauche des liens du coin (demande de Martin, 14 oct. 2026) */
.entete .menu-compte a.menu-langue { align-self: stretch; border: 3px solid var(--noir); padding: 0 14px; margin: 0; background: var(--creme); color: var(--noir); }
@media (max-width: 900px) { .entete .menu-compte a.menu-langue { flex: 0 0 auto; align-self: stretch; border: 3px solid var(--noir); padding: 0 16px; margin: 0; } }


/* Les deux sortes de liens, dans le texte des articles et des pages (demande de Martin, 15 oct. 2026, comme sur Agent Policier).
   Un lien qui sort du site porte une petite flèche. Un lien vers une autre page du site est souligné d'un trait épais de la couleur du site.
   Le menu, l'en-tête, les étiquettes, les cartes et les boutons de partage ne sont pas touchés. */
main a[href^="http"]:not([href*="agentdesecuritequebec.com"])::after { content: " ↗"; font-size: .85em; text-decoration: none; display: inline-block; }
main .partage a::after, main .carte-nouvelle a::after, main .encart a::after { content: none; }
main :is(p, li, td) > a[href^="/"]:not([class]), main :is(p, li, td) > em > a[href^="/"]:not([class]) { text-decoration: underline; text-decoration-color: #d7261e; text-decoration-thickness: 3px; text-underline-offset: 3px; }
main :is(p, li, td) > a[href^="/"]:not([class]):hover { background: #fde8e7; }
main .etiquettes-histoire a, main .pagination a, main .carte-texte a { text-decoration: none; }