/* ═══════════ 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); }