/* 👀 BRUITS DE COULOIR — la peau du couloir.

   Meme famille que Le Grill : le noir, la braise, le mono en capitales pour les
   etiquettes. Mais une personnalite un peu differente, plus editoriale et plus
   dense : ici on scanne, on reagit, on continue. Les cartes doivent se lire en
   une seconde et se toucher confortablement au pouce.

   Aucun style n'est ecrit dans le HTML : la CSP du site interdit les styles en
   ligne. Tout ce qui est calcule passe par des variables CSS posees en JS. */

/* Un element porteur de `hidden` doit disparaitre, meme si une regle plus bas
   lui donne un display. Sans ca, le voile des tiroirs reste au-dessus de la page
   et avale tous les clics alors qu'il est cense etre ferme. */
[hidden]{display:none !important}

/* ---------- l'entete ---------- */
.btn-nav.on{border-color:rgba(var(--braise-rgb),.55);color:var(--ink)}
.coin-compte{display:inline-flex;align-items:center;margin-left:4px}
.compte-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px solid var(--ligne);border-radius:999px;padding:6px 12px 6px 6px;cursor:pointer;
  color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em}
.compte-btn:hover{border-color:rgba(var(--braise-rgb),.5)}
.compte-btn img,.compte-av{width:24px;height:24px;border-radius:50%;object-fit:cover;
  background:linear-gradient(135deg,var(--braise),var(--or));display:grid;place-items:center;
  font-size:11px;color:#160C05;font-weight:700;flex:none}
.compte-menu{position:absolute;right:5vw;top:66px;z-index:40;min-width:210px;
  background:#140D09;border:1px solid var(--ligne);border-radius:14px;padding:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.compte-menu a,.compte-menu button{display:block;width:100%;text-align:left;background:none;
  border:0;color:var(--dim);padding:10px 12px;border-radius:9px;cursor:pointer;
  font:inherit;font-size:13.5px;text-decoration:none}
.compte-menu a:hover,.compte-menu button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.compte-menu hr{border:0;border-top:1px solid var(--ligne);margin:5px 8px}

/* ---------- le haut du couloir ---------- */
/* Ici on vient lire ce qui se raconte, pas admirer un titre. La barre annonce
   l'endroit en deux lignes et rend l'ecran aux sujets : le premier bruit doit
   etre visible sans scroller. */
.bdc-barre{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:14px 0 4px;border-bottom:1px solid var(--ligne);margin-bottom:18px}
.bdc-titre{flex:1;min-width:250px}
.bdc-titre h1, .bdc-titre .bdc-h1{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.02;
  letter-spacing:-.03em;font-size:clamp(28px,5.2vw,46px);margin-bottom:6px}
.bdc-titre .sous{color:#8B8177;font-size:clamp(13px,1.9vw,15.5px);max-width:46ch;
  text-wrap:balance}
.bdc-actions{display:flex;gap:9px;align-items:center;flex-wrap:nowrap}
.bdc-actions .btn{white-space:nowrap}

/* ---------- les onglets et les filtres ---------- */
.bdc-onglets{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.ong{background:transparent;border:1px solid var(--ligne);color:var(--dim);cursor:pointer;
  border-radius:999px;padding:10px 18px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;min-height:42px;
  transition:border-color .18s,color .18s,background .18s}
.ong:hover{color:var(--ink)}
.ong.on{background:linear-gradient(135deg,var(--braise),var(--or));color:#160C05;
  border-color:transparent;font-weight:500}
.bdc-filtres{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.filt{background:transparent;border:1px solid rgba(255,255,255,.1);color:#9C8E84;cursor:pointer;
  border-radius:8px;padding:7px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.12em;min-height:34px}
.filt:hover{color:var(--ink);border-color:var(--ligne)}
.filt.on{color:var(--ink);border-color:rgba(var(--braise-rgb),.55);
  background:rgba(var(--braise-rgb),.08)}

/* ---------- une carte ---------- */
.bdc-feed{display:flex;flex-direction:column;gap:12px}
.carte{display:block;text-decoration:none;color:inherit;background:var(--dalle);
  border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:18px 20px;
  transition:border-color .18s,transform .18s,background .18s}
.carte:hover{border-color:rgba(var(--braise-rgb),.35);background:rgba(255,255,255,.05)}
.carte:active{transform:scale(.995)}
.c-haut{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.etiq{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  padding:4px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.14);color:#B9ABA0}
.temp{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  padding:4px 9px;border-radius:999px;font-weight:500;
  color:var(--temp-encre,#160C05);background:var(--temp-fond,#F5B841)}
/* le repere « source » dans le feed : un chip texte, ni image ni requete */
.c-lien{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  padding:4px 9px;border-radius:6px;color:#C9A98F;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  border:1px solid rgba(var(--braise-rgb),.28);background:rgba(var(--braise-rgb),.07)}
.carte h3{text-wrap:balance;font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.6vw,23px);
  line-height:1.22;letter-spacing:-.015em;font-weight:600;margin-bottom:7px}
.c-extrait{color:#A99C92;font-size:14.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-bas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:13px}
.c-qui{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#8B8177;letter-spacing:.06em}
.c-qui b{color:#C9BCB2;font-weight:500}
.c-gestes{display:flex;gap:12px;margin-left:auto}
.c-gestes span{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9C8E84;
  display:inline-flex;align-items:center;gap:5px}

/* ---------- le vide ---------- */
.bdc-vide{text-align:center;padding:64px 6vw;border:1px dashed var(--ligne);border-radius:18px}
.bdc-vide h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,4vw,30px);
  letter-spacing:-.02em;margin-bottom:8px}
.bdc-vide p{color:#9C8E84;margin-bottom:20px}
.bdc-plus{display:flex;justify-content:center;margin:26px 0 10px}

/* ---------- la page d'un bruit ---------- */
.bdc-retour{background:none;border:0;color:#9C8E84;cursor:pointer;font:inherit;font-size:13px;
  padding:18px 0;display:inline-block}
.bdc-retour:hover{color:var(--ink)}
.bdc-sujet{background:var(--dalle);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:26px 24px}
.bdc-sujet h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,5vw,44px);
  line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:12px 0}
.bdc-corps{color:var(--dim);font-size:16px;line-height:1.65;white-space:pre-wrap;
  word-break:break-word;margin-bottom:18px}
.bdc-lien-ext{display:inline-block;margin-bottom:18px;color:var(--braise);font-size:14px;
  word-break:break-all}
.bdc-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--ligne);margin-top:6px}
.bdc-outils{display:flex;gap:8px;margin-left:auto}
.bdc-outil{background:none;border:1px solid rgba(255,255,255,.1);color:#9C8E84;cursor:pointer;
  border-radius:8px;padding:7px 11px;font-size:12px;min-height:34px}
.bdc-outil:hover{color:var(--ink);border-color:var(--ligne)}

/* ---------- les reactions ---------- */
.reacs{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 4px}
.reac{background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:999px;
  cursor:pointer;padding:8px 13px;min-height:40px;display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#9C8E84;
  transition:border-color .16s,background .16s,color .16s}
.reac:hover{border-color:var(--ligne);color:var(--ink)}
.reac.on{border-color:rgba(var(--braise-rgb),.6);background:rgba(var(--braise-rgb),.12);
  color:var(--ink)}
.reac i{font-style:normal;font-size:16px;line-height:1;display:inline-block}
.reacs.mini .reac{padding:5px 10px;min-height:32px;font-size:11.5px}
.reacs.mini .reac i{font-size:14px}

@media(prefers-reduced-motion:no-preference){
  .reac.pop i{animation:bdc-pop .22s ease-out}
  .reac.flamme i{animation:bdc-flamme .25s ease-out}
  .reac.bounce i{animation:bdc-bounce .24s ease-out}
  .reac.shake i{animation:bdc-shake .22s ease-out}
}
@keyframes bdc-pop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes bdc-flamme{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-6px) scale(1.3)}
  100%{transform:translateY(0) scale(1)}}
@keyframes bdc-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px) rotate(-9deg)}}
@keyframes bdc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}}

/* ---------- le fil ---------- */
.bdc-h2{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#8B8177;margin:38px 0 14px}
.bdc-ecrire{margin-bottom:20px}
.bdc-zone{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--ligne);
  border-radius:12px;padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;
  line-height:1.55;resize:vertical;min-height:88px}
.bdc-zone:focus{outline:none;border-color:rgba(var(--braise-rgb),.55)}
.bdc-envoi{display:flex;gap:9px;align-items:center;margin-top:9px;flex-wrap:wrap}
.bdc-compteur{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#6F655D;
  margin-left:auto}
.reponse{padding:15px 0;border-top:1px solid rgba(255,255,255,.06)}
.reponse .r-haut{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.reponse .r-txt{color:var(--dim);font-size:15px;line-height:1.6;white-space:pre-wrap;
  word-break:break-word}
.reponse .r-txt.parti{color:#6F655D;font-style:italic}
.enfants{margin-left:16px;padding-left:14px;border-left:1px solid rgba(255,255,255,.08)}
.r-actions{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.r-lien{background:none;border:0;color:#8B8177;cursor:pointer;font:inherit;font-size:12px;
  padding:6px 0;min-height:32px}
.r-lien:hover{color:var(--braise)}

/* ---------- les sources ---------- */
.bdc-avertit{color:#8B8177;font-size:13px;margin-bottom:14px}
.source{display:flex;gap:11px;align-items:flex-start;padding:12px 0;
  border-top:1px solid rgba(255,255,255,.06)}
.source a{color:var(--ink);font-size:14.5px;word-break:break-word}
.src-nature{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  padding:3px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.14);color:#B9ABA0;
  flex:none;margin-top:2px}
.src-nature.primaire{border-color:rgba(74,222,128,.4);color:#7FE0A4}
.src-nature.contestee{border-color:rgba(255,68,68,.4);color:#FF8A8A}

/* ---------- le profil ---------- */
.prof-haut{display:flex;align-items:center;gap:18px;padding:26px 0 8px;flex-wrap:wrap}
.prof-av{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none;
  background:linear-gradient(135deg,var(--braise),var(--or));display:grid;place-items:center;
  font-size:30px;color:#160C05;font-weight:700}
.prof-haut h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,5vw,40px);
  letter-spacing:-.02em}
.prof-depuis{color:#8B8177;font-size:13px;font-family:'JetBrains Mono',monospace}
.prof-chiffres{display:flex;gap:26px;flex-wrap:wrap;margin:18px 0 30px}
.prof-chiffres b{display:block;font-family:'Space Grotesk',sans-serif;font-size:28px;
  font-weight:700}
.prof-chiffres span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;
  color:#8B8177;text-transform:uppercase}

/* ---------- les tiroirs ---------- */
.bdc-voile{position:fixed;inset:0;z-index:60;background:rgba(6,4,3,.78);
  backdrop-filter:blur(7px);display:grid;place-items:center;padding:5vw;overflow-y:auto}
.bdc-modal{position:relative;width:min(460px,100%);background:#140D09;
  border:1px solid var(--ligne);border-radius:20px;padding:32px 28px;
  box-shadow:0 30px 90px rgba(0,0,0,.66);margin:auto}
.bdc-modal.large{width:min(620px,100%)}
@media(prefers-reduced-motion:no-preference){
  .bdc-modal{animation:bdc-entre .18s ease-out}
}
@keyframes bdc-entre{from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}
.bdc-modal h2{text-wrap:balance;font-family:'Space Grotesk',sans-serif;font-size:clamp(21px,4vw,27px);
  line-height:1.18;letter-spacing:-.02em;font-weight:700;margin-bottom:8px;padding-right:28px}
.bdc-sous-modal{color:#A99C92;font-size:14.5px;margin-bottom:22px}
.bdc-fin-modal{color:#6F655D;font-size:12px;margin-top:16px;text-align:center}
.bdc-fermer{position:absolute;right:14px;top:14px;background:none;border:0;color:#8B8177;
  cursor:pointer;font-size:17px;width:38px;height:38px;border-radius:9px}
.bdc-fermer:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.porte{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  background:#fff;color:#1B1B1B;border:0;border-radius:12px;padding:14px 18px;cursor:pointer;
  font:inherit;font-weight:600;font-size:15px;min-height:52px;margin-bottom:10px}
.porte:hover{opacity:.92}
.porte.sombre{background:transparent;color:var(--ink);border:1px solid var(--ligne)}
.porte.sombre:hover{border-color:rgba(var(--braise-rgb),.5);opacity:1}
.porte svg{flex:none}
.bdc-ou{display:flex;align-items:center;gap:12px;color:#6F655D;margin:14px 0;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em}
.bdc-ou::before,.bdc-ou::after{content:"";flex:1;height:1px;background:var(--ligne)}
.bdc-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--ligne);
  border-radius:11px;padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;
  margin-bottom:6px;min-height:50px}
.bdc-input:focus{outline:none;border-color:rgba(var(--braise-rgb),.55)}
.bdc-label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#8B8177;margin:16px 0 7px}
.bdc-fac{color:#5F564F;letter-spacing:.08em}
.bdc-erreur{color:#FF8A8A;font-size:13.5px;margin:10px 0 4px}
.bdc-champ-pseudo{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.04);
  border:1px solid var(--ligne);border-radius:11px;padding:0 15px;margin-bottom:6px}
.bdc-champ-pseudo span{color:#8B8177;font-size:17px;font-family:'JetBrains Mono',monospace}
.bdc-champ-pseudo input{flex:1;background:none;border:0;color:var(--ink);font:inherit;
  font-size:17px;padding:14px 6px;min-height:52px}
.bdc-champ-pseudo input:focus{outline:none}
.bdc-couloirs,.bdc-natures,.bdc-motifs,.bdc-partages{display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:6px}
.bdc-partages{flex-direction:column}
.choix{background:transparent;border:1px solid rgba(255,255,255,.12);color:#B9ABA0;
  cursor:pointer;border-radius:9px;padding:10px 13px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.11em;min-height:42px}
.choix:hover{color:var(--ink);border-color:var(--ligne)}
.choix.on{background:rgba(var(--braise-rgb),.14);border-color:rgba(var(--braise-rgb),.6);
  color:var(--ink)}
.bdc-partages .choix{width:100%;text-align:left;letter-spacing:.04em;font-size:13px;
  font-family:'Inter',sans-serif}
.bdc-modal .btn{width:100%;justify-content:center;margin-top:14px}
.bdc-login{max-width:460px;margin:8vh auto;background:#140D09;border:1px solid var(--ligne);
  border-radius:20px;padding:34px 28px}

/* ---------- le mot qui passe ---------- */
.bdc-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:#1B120C;border:1px solid rgba(var(--braise-rgb),.4);border-radius:12px;
  padding:13px 20px;color:var(--ink);font-size:14px;max-width:90vw;text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}

/* ---------- la section sur l'accueil du Grill ---------- */
.accueil-bdc{margin:64px 0 8px}
.accueil-bdc .ab-haut{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:16px}
.accueil-bdc h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,4.4vw,34px);
  letter-spacing:-.025em;font-weight:700}
.accueil-bdc .ab-sous{color:#8B8177;font-size:14px}
.accueil-bdc .ab-voir{margin-left:auto;color:var(--braise);font-size:13px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-decoration:none}
.accueil-bdc .bdc-feed{gap:10px}

/* ---------- le menu ---------- */
/* Les trois familles de boutons du menu (langue, liens, compte) viennent de
   trois endroits differents et n'avaient pas la meme hauteur ni le meme rythme.
   On les aligne sur une hauteur commune et une seule ligne. Sur telephone, la
   ligne defile lateralement plutot que de casser en escalier : tout reste au
   meme niveau, rien ne sort de l'ecran. */
.nav-h{align-items:center}
.nav-h .btn-nav,.nav-h .lang-btn,.nav-h .compte-btn{height:38px;box-sizing:border-box}
.bn-court{display:none}

@media(max-width:760px){
  /* Disposition classique du telephone : la marque a gauche, le compte a droite
     sur la meme ligne, la navigation en dessous sur toute la largeur.
     Avant, les quatre boutons se battaient pour une seule rangee : elle
     debordait, elle defilait, et c'est « Connexion » qui sortait de l'ecran —
     le seul bouton dont un nouveau visiteur a besoin. Sorti du flux, il est
     toujours la, et les libelles peuvent rester entiers. */
  header{position:relative;padding:16px 4vw 12px;flex-wrap:wrap;row-gap:12px;
    align-items:center}
  .marque{width:100%;padding-right:110px}
  .coin-compte{position:absolute;right:4vw;top:9px;margin:0}
  /* Surtout pas d'overflow ici : il recadrerait le deroulant des langues, qui
     est en position absolue et depasse largement la hauteur de la rangee. On
     laisse plutot passer a la ligne si un jour ca ne tient plus. */
  .nav-h{width:100%;flex-wrap:wrap;justify-content:flex-start;
    gap:8px;margin:0;padding:2px 0;overflow:visible}
  .nav-h > *{flex:none}
  .bn-long{display:none}
  .bn-court{display:inline}
  .btn-nav.on{display:none}       /* deja dans le couloir : le lien ne sert plus */
}


@media(max-width:640px){
  .bdc-barre{padding:8px 0 10px;margin-bottom:14px}
  .bdc-actions{width:100%}
  .bdc-actions .btn:first-child{flex:1}
  /* le de perd son texte : qu'il perde aussi la largeur d'un bouton a texte */
  #btnHasard{flex:none;width:52px;padding-left:0;padding-right:0;
    justify-content:center;font-size:18px}
  .bh-txt{display:none}
  .bdc-onglets,.bdc-filtres{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bdc-onglets::-webkit-scrollbar,.bdc-filtres::-webkit-scrollbar{display:none}
  .ong,.filt{flex:none}
  .bdc-onglets{gap:6px}
  .ong{padding:9px 14px;font-size:10px}
  .carte{padding:16px 16px;border-radius:14px}
  .c-gestes{margin-left:0;width:100%;gap:14px}
  .bdc-sujet{padding:20px 17px}
  .bdc-modal{padding:26px 20px;border-radius:18px}
  .compte-menu{right:4vw;left:4vw;top:62px}
  .enfants{margin-left:8px;padding-left:10px}
}


/* ============================================================
   LA BRAISE, LE PONT, LA SYNTHÈSE
   ============================================================ */

/* ---------- la braise le long de la carte ----------
   L'intensité vient du serveur (etat.niveau, de 0 à 1) et arrive en variable
   CSS. Une carte qui chauffe porte une ligne de braise plus haute et plus vive
   sur son bord : on voit ce qui bouge avant même d'avoir lu le titre. */
.carte{position:relative;overflow:hidden}
.carte::before{content:"";position:absolute;left:0;bottom:0;width:3px;
  height:calc(12% + 88% * var(--braise-niveau,0));
  background:linear-gradient(to top,var(--braise),var(--or));
  opacity:calc(.25 + .75 * var(--braise-niveau,0));
  border-radius:0 3px 3px 0;transition:height .3s,opacity .3s}
@media(prefers-reduced-motion:no-preference){
  .carte[data-chaud="1"]::before{animation:bdc-braise 2.6s ease-in-out infinite}
}
@keyframes bdc-braise{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- qui lit, maintenant ---------- */
.bdc-lisent{display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  color:#C9BCB2;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(74,222,128,.32);background:rgba(74,222,128,.07)}
.bdc-lisent i{font-style:normal;width:7px;height:7px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 8px #4ADE80;display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .bdc-lisent i{animation:bdc-bat 2s ease-in-out infinite}
}
@keyframes bdc-bat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

/* ---------- le pont vers le grill ---------- */
.adresses{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px}
.adresse{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:rgba(255,255,255,.03);border:1px dashed var(--ligne);
  border-radius:12px;padding:11px 13px}
.adresse .ad-dom{font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:#C9BCB2;word-break:break-all;flex:1;min-width:140px}
.adresse .btn{padding:8px 14px;font-size:10px;min-height:38px;white-space:nowrap}

.bdc-verdict{display:flex;gap:16px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(255,90,31,.07),transparent 62%);
  border:1px solid rgba(var(--braise-rgb),.3);border-radius:16px;
  padding:16px 18px;margin-bottom:11px}
.bdc-verdict .v-note{flex:none;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:23px;color:#160C05;
  background:var(--v-couleur,#F5B841);line-height:1}
.bdc-verdict .v-corps{flex:1;min-width:0}
.bdc-verdict .v-dom{font-family:'JetBrains Mono',monospace;font-size:12px;
  color:#C9BCB2;word-break:break-all;margin-bottom:5px}
.bdc-verdict .v-phrase{color:var(--dim);font-size:14.5px;line-height:1.5;
  text-wrap:balance}
.bdc-verdict .v-bas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:11px}
.bdc-verdict .v-voir{color:var(--braise);font-size:12.5px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-decoration:none}
.bdc-verdict .v-voir:hover{text-decoration:underline}
.bdc-verdict.attente{border-style:dashed;border-color:var(--ligne)}
.bdc-verdict.attente .v-note{background:rgba(255,255,255,.06);color:#8B8177;font-size:22px}
.bdc-verdict.echec .v-note{background:rgba(255,68,68,.18);color:#FF8A8A}
@media(prefers-reduced-motion:no-preference){
  .bdc-verdict.attente .v-note{animation:bdc-tourne 1.5s linear infinite}
}
@keyframes bdc-tourne{to{transform:rotate(360deg)}}

/* ---------- ce qui se dit ---------- */
.bdc-synthese .synth{background:rgba(255,255,255,.03);
  border:1px solid var(--ligne);border-radius:16px;padding:20px 20px 16px}
.synth-bref{font-family:'Space Grotesk',sans-serif;font-size:clamp(16px,2.4vw,20px);
  line-height:1.36;font-weight:600;letter-spacing:-.01em;margin-bottom:16px;
  text-wrap:balance}
.synth-camps{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.synth-camp{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:13px 14px}
.synth-camp b{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:7px}
.synth-camp span{color:#A99C92;font-size:14px;line-height:1.5}
.synth-angle{margin-top:14px;padding-top:14px;border-top:1px solid var(--ligne);
  color:var(--dim);font-size:14.5px;line-height:1.55}
.synth-angle b{color:var(--or);font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px}
.synth-verif{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.synth-verif li{list-style:none;color:#A99C92;font-size:13.5px;line-height:1.45;
  padding-left:22px;position:relative}
.synth-verif li::before{content:"?";position:absolute;left:0;top:0;
  font-family:'JetBrains Mono',monospace;color:var(--or);font-size:12px}
.synth-pied{color:#6F655D;font-size:11.5px;margin-top:14px;line-height:1.45}

@media(max-width:640px){
  .bdc-verdict{gap:12px;padding:14px}
  .bdc-verdict .v-note{width:54px;height:54px;font-size:20px}
}


/* ---------- la porte ---------- */
.bdc-etat-champ{font-size:12.5px;min-height:17px;margin:2px 0 8px;color:#6F655D}
.bdc-etat-champ.bon{color:#7FE0A4}
.bdc-etat-champ.mauvais{color:#FF8A8A}
.bdc-lien-discret{display:block;width:100%;background:none;border:0;cursor:pointer;
  color:#8B8177;font:inherit;font-size:13px;padding:12px 0 2px;text-align:center;
  min-height:40px}
.bdc-lien-discret:hover{color:var(--ink);text-decoration:underline}


/* ============================================================
   LES GRANDS ECRANS — le couloir ne se dilue pas
   ============================================================
   Sur un moniteur PC, la .zone partagee reste bloquee a 1080px et son
   padding en 5vw grossit avec l'ecran : le contenu retrecit au lieu de
   respirer, et le feed reste une colonne perdue au milieu du noir.
   Ici on rend l'espace au couloir : gouttieres plafonnees, feed en
   deux puis trois colonnes, et la lecture d'un bruit gardee etroite
   pour rester confortable a l'oeil. Tout est scope a .pg-bdc pour ne
   pas toucher la page de roast. */
@media(min-width:1000px){
  /* la gouttiere arrete de manger le contenu passe une certaine largeur */
  .pg-bdc .zone{padding-left:clamp(24px,5vw,64px);
    padding-right:clamp(24px,5vw,64px)}
  /* le feed et le profil occupent plus large */
  .pg-bdc #vueFeed,.pg-bdc #vueProfil{max-width:1180px}
  /* les cartes se rangent en deux colonnes au lieu d'une bande unique */
  .pg-bdc .bdc-feed{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;align-content:start}
  /* lire un bruit reste une colonne de lecture, pas un pave large */
  .pg-bdc #vueBruit{max-width:840px}
}
@media(min-width:1560px){
  .pg-bdc #vueFeed,.pg-bdc #vueProfil{max-width:1400px}
  .pg-bdc .bdc-feed{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ============================================================
   L'APERCU D'UN LIEN — la carte, pas l'iframe
   ============================================================
   On ne met pas le site en iframe (LinkedIn et les autres l'interdisent, et ca
   alourdit). Le serveur lit les balises Open Graph du lien ; ici on les pose
   dans une carte cliquable aux couleurs du couloir : vignette a gauche, titre
   et domaine a droite. Sans image exploitable, la carte se replie sur un lien
   sobre — on ne perd jamais le lien. */
.bdc-apercu{display:flex;text-decoration:none;color:inherit;background:var(--dalle);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;
  max-height:230px;margin:16px 0 4px;transition:border-color .18s,background .18s}
.bdc-apercu:hover{border-color:rgba(var(--braise-rgb),.4);background:rgba(255,255,255,.045)}
.ap-vign{flex:none;width:210px;align-self:stretch;position:relative;
  overflow:hidden;background:#0e0906}
.ap-img{width:100%;height:100%;min-height:128px;object-fit:cover;display:block}
.bdc-apercu.sans-img .ap-vign,.bdc-apercu.nu .ap-vign{display:none}
.ap-corps{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;
  gap:5px;justify-content:center;overflow:hidden}
.ap-titre{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-desc{font-size:13px;line-height:1.45;color:#9C8E84;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-desc:empty{display:none}
.ap-site{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#6F655D;margin-top:2px}

/* le squelette pendant la recolte : une vignette qui respire, deux barres */
.bdc-apercu.charge{pointer-events:none}
.bdc-apercu.charge .ap-vign{min-height:128px;
  background:linear-gradient(100deg,#140d09 30%,#1f1512 50%,#140d09 70%);
  background-size:200% 100%}
.bdc-apercu.charge .ap-titre{color:transparent;max-width:72%;border-radius:5px;
  background:rgba(255,255,255,.06)}
.bdc-apercu.charge .ap-site{color:transparent;max-width:34%;border-radius:4px;
  background:rgba(255,255,255,.05)}
@media(prefers-reduced-motion:no-preference){
  .bdc-apercu.charge .ap-vign{animation:ap-shimmer 1.2s linear infinite}
}
@keyframes ap-shimmer{to{background-position:-200% 0}}

/* le repli : rien d'exploitable, on garde un lien discret plutot qu'une carte vide */
.bdc-apercu.nu{display:inline-flex;background:transparent;border-radius:10px;
  border-color:rgba(255,255,255,.12);max-width:100%}
.bdc-apercu.nu .ap-corps{padding:10px 14px;gap:0}
.bdc-apercu.nu .ap-titre{color:var(--braise);font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:500;-webkit-line-clamp:1;word-break:break-all}
.bdc-apercu.nu .ap-desc,.bdc-apercu.nu .ap-site{display:none}

@media(max-width:560px){
  .bdc-apercu{flex-direction:column;max-height:none}
  .ap-vign{width:auto;aspect-ratio:1.9/1}
  .ap-img{height:100%}
}


/* ============================================================
   LE DÉCORTICAGE D'UN POST — de bullshit à brillant
   ============================================================
   Analyse du TEXTE, separee du scan de site de l'accueil. Le verdict porte une
   couleur posee en JS (var --dec-c) selon l'echelle. On dit franchement quand
   c'est malin, pas seulement quand c'est creux. */
.bdc-decort{margin-top:22px}
.dec-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 2px}
.dec-coller-lien{background:none;border:0;color:#9C8E84;cursor:pointer;font:inherit;
  font-size:12.5px;text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
.dec-coller-lien:hover{color:var(--ink)}
.dec-zone{margin:10px 0 2px;display:flex;flex-direction:column;gap:10px}
.dec-err{color:#FF8A8A;font-size:13.5px;margin-top:10px}

.dec-res:not(:empty){background:var(--dalle);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:18px 18px 16px;margin-top:14px}
.dec-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dec-verdict{flex:none;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:6px 12px;border-radius:999px;color:#160C05;background:var(--dec-c,#C9BCB2)}
.dec-punch{font-family:'Space Grotesk',sans-serif;font-size:clamp(16px,2.4vw,20px);
  line-height:1.3;color:var(--ink);font-weight:600;text-wrap:balance;margin:0}
.dec-synth{color:var(--dim);font-size:15px;line-height:1.6;margin:6px 0}
.dec-pourquoi{color:#9C8E84;font-size:13.5px;line-height:1.55;margin:4px 0 0}
.dec-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:12px 0 2px}
.dec-ia{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:#9C8E84;border:1px solid var(--ligne);border-radius:8px;padding:6px 10px;cursor:help}
.dec-ia b{color:#C9BCB2;font-weight:500}
.dec-src{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#6F655D}
.dec-drapeaux{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.dec-flag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:#C9A98F;border:1px solid rgba(var(--braise-rgb),.24);border-radius:6px;padding:5px 9px}
.dec-avert{color:#6F655D;font-size:11.5px;line-height:1.45;margin-top:14px}

/* ===== Profil enrichi : bio + reseaux + edition ===== */
.prof-bio{color:var(--dim);font-size:15px;line-height:1.6;margin:14px 0 4px;
  max-width:60ch;white-space:pre-wrap}
.prof-liens{display:flex;gap:10px;margin:12px 0 4px}
.prof-lien{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  color:#C9BCB2;border:1px solid var(--ligne);background:var(--dalle);
  transition:color .18s,border-color .18s,transform .18s}
.prof-lien:hover{color:var(--ink);border-color:rgba(var(--braise-rgb),.5);transform:translateY(-2px)}
.prof-lien.li:hover{color:#4aa3ff}
.prof-lien.ig:hover{color:#e1306c}
.prof-edit{margin-top:16px}
.prof-form{display:flex;flex-direction:column;gap:6px;max-width:480px;margin-top:18px}
.prof-form-photo{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.prof-form-photo .prof-av{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none;
  background:linear-gradient(135deg,var(--braise),var(--or))}
.prof-form-lab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#9C8E84;margin-top:10px}
.prof-form-actions{display:flex;gap:10px;margin-top:18px}


/* ---------- le decorticage, aere ----------
   Le probleme n'etait pas la quantite de texte mais son absence de relief :
   trois paragraphes empiles, aucun point d'accroche pour l'oeil. On donne a
   chaque bloc son etiquette, on les pose cote a cote des qu'il y a la place,
   et on replie ce qui depasse. */
.dec-carte{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:20px 20px 14px}
.dec-carte .dec-tete{margin-bottom:16px}
.dec-carte .dec-punch{margin:0}

.dec-corps{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:860px){
  /* deux colonnes des que l'ecran le permet : la carte perd la moitie de sa
     hauteur et les deux angles se comparent d'un coup d'oeil */
  .dec-corps{grid-template-columns:1fr 1fr;gap:22px}
}
.dec-bloc{min-width:0}
.dec-etiq{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#8B8177;margin-bottom:7px}
.dec-bloc.avis .dec-etiq{color:var(--or)}
.dec-txt{margin:0;font-size:14.5px;line-height:1.6;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.dec-txt.ouvert{-webkit-line-clamp:unset;overflow:visible}
.dec-bloc.avis .dec-txt{color:#A99C92;font-size:13.5px}
.dec-plus{background:none;border:0;padding:6px 0 0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--braise);min-height:32px}
.dec-plus:hover{text-decoration:underline}

.dec-drapeaux{margin-top:16px}
.dec-flag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  color:#B9ABA0;white-space:nowrap}

.dec-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.dec-pied .dec-ia{display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8B8177}
.dec-pied .dec-ia b{font-weight:400}
.dec-pied .dec-ia i{font-style:normal;color:var(--ink);
  border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:2px 7px}
.dec-pied .dec-src{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:#6F655D}
.dec-pied .dec-avert{color:#6F655D;font-size:11.5px;line-height:1.4;
  flex:1 1 100%;margin:0}

@media(max-width:640px){
  .dec-carte{padding:16px 15px 12px;border-radius:14px}
  .dec-txt{font-size:14px}
}


/* ---------- mise en forme du texte ---------- */
.riche .tx-p{margin:0 0 .85em}
.riche .tx-p:last-child{margin-bottom:0}
.riche strong{color:var(--ink);font-weight:600}
.riche em{font-style:italic}
.riche a{color:var(--braise);word-break:break-word}
.riche a:hover{text-decoration:underline}
.riche .tx-cite{margin:0 0 .85em;padding:2px 0 2px 14px;
  border-left:2px solid rgba(var(--braise-rgb),.45);color:#A99C92;font-style:italic}
.riche .tx-liste{margin:0 0 .85em;padding-left:20px}
.riche .tx-liste li{list-style:disc;margin:.25em 0}
.bdc-corps.riche{white-space:normal}
.r-txt.riche{white-space:normal}

/* ---------- la barre d'edition ---------- */
.tx-barre{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.tx-outil{min-width:34px;height:34px;padding:0 9px;background:transparent;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#9C8E84;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .16s,border-color .16s,background .16s}
.tx-outil:hover{color:var(--ink);border-color:var(--ligne);background:rgba(255,255,255,.04)}
.tx-outil.gras{font-weight:700}
.tx-outil.ital{font-style:italic}
.tx-apercu{margin-left:auto;height:34px;padding:0 12px;background:transparent;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#9C8E84;cursor:pointer;
  font:inherit;font-size:12px}
.tx-apercu:hover{color:var(--ink);border-color:var(--ligne)}
.tx-apercu.on{color:#160C05;background:linear-gradient(135deg,var(--braise),var(--or));
  border-color:transparent;font-weight:500}
.tx-vue{background:rgba(255,255,255,.04);border:1px solid var(--ligne);
  border-radius:12px;padding:13px 15px;color:var(--dim);font-size:15px;line-height:1.6;
  min-height:88px}
.tx-vue .tx-vide{color:#6F655D;font-style:italic;margin:0}

@media(max-width:640px){
  .tx-outil{min-width:38px;height:38px}
  .tx-apercu{height:38px}
}


/* ---------- le deroulant des langues ----------
   Il est en position absolue et fait plusieurs centaines de pixels : n'importe
   quel ancetre qui recadre son contenu le ferait disparaitre. On le dit
   explicitement pour que la prochaine regle de mise en page ne le reprenne pas
   au piege. */
header, header .nav-h, header .lang{overflow:visible}
.lang-menu{z-index:120}


/* ---------- le deroulant des langues sur telephone ----------
   Il est ancre a droite de son bouton. Sur grand ecran ce bouton est a droite
   de la rangee, tout va bien. Sur telephone il est le PREMIER, donc colle au
   bord gauche : un menu ancre a droite part vers la gauche et sort de l'ecran.
   On l'ancre a gauche, et on le borne a ce qui est visible. */
@media (max-width:760px){
  .lang-menu{left:0;right:auto;max-width:calc(100vw - 10vw);min-width:172px}
}


/* ---------- le pied de page ----------
   Les liens legaux se detachent du nom au lieu de s'empiler contre lui : c'est
   l'espace, pas une ligne de plus, qui rend un pied lisible. */
.pied-legal{display:block;margin-top:18px;line-height:2.1}
footer{padding-top:52px;padding-bottom:46px}
@media (max-width:640px){
  .pied-legal{margin-top:16px;line-height:2.3}
  footer{padding-top:42px}
}


/* ---------- la vignette d'un lien dans le fil ----------
   Elle arrive apres la carte, donc elle apparait en fondu plutot que de faire
   sauter la mise en page. Hauteur bornee : une carte de fil doit rester
   scannable, pas devenir une affiche. */
.c-vignette{margin:10px 0 2px;border-radius:11px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);
  opacity:0;transition:opacity .35s}
.c-vignette.la{opacity:1}
.c-vignette img{display:block;width:100%;height:auto;max-height:190px;
  object-fit:cover;object-position:center top}
@media (max-width:640px){
  .c-vignette img{max-height:158px}
}


/* ---------- la FAQ ----------
   Repliee par defaut : six reponses ouvertes feraient le pave qu'on cherche
   justement a eviter. Chaque question reste lisible et cliquable au pouce. */
.faq{max-width:68ch;margin-top:22px}
.faq-q{border-bottom:1px solid rgba(255,255,255,.07)}
.faq-q summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;
  position:relative;font-size:15.5px;color:var(--ink);font-weight:500;
  min-height:52px;display:flex;align-items:center}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";position:absolute;right:4px;color:var(--braise);
  font-size:19px;line-height:1;transition:transform .2s}
.faq-q[open] summary::after{content:"−"}
.faq-q summary:hover{color:var(--or)}
.faq-q p{margin:0 0 18px;color:var(--dim);font-size:15px;line-height:1.65;
  max-width:64ch}


/* Masquer sans retirer de la page : `hidden` empeche certains navigateurs
   d'ouvrir le selecteur de fichier depuis le label qui l'entoure. */
.champ-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}