/**
 * On papote · la feuille du plugin.
 *
 * Les couleurs et les polices viennent du thème quand il les expose
 * (--automne, --nappe, --serif…) et retombent sur des valeurs proches
 * sinon : le fil s'accorde au site sans en dépendre.
 */
.hdp-wrap{
  --hdp-ocre:var(--automne,#a8551f);
  --hdp-creme:var(--nappe,#f7e9cf);
  --hdp-papier:var(--paper,#faf6f0);
  --hdp-blanc:var(--blanc,#fffdfa);
  --hdp-encre:var(--ink,#1a1a1a);
  --hdp-gris:var(--ink3,#6f6152);
  --hdp-trait:var(--line,rgba(26,26,26,.1));
  --hdp-serif:var(--serif,"Cormorant Garamond",Georgia,serif);
  --hdp-ui:var(--ui,"Helvetica Neue",Helvetica,Arial,sans-serif);

  max-width:720px;margin:0 auto;padding:0 24px 96px;
}

/* ---- L'en-tête ---- */
.hdp-tete{padding:56px 0 6px;}
.hdp-eyebrow{
  display:block;font:700 11px/1 var(--hdp-ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--hdp-ocre);margin-bottom:10px;
}
/* Le titre porte le nappage du thème, et les gouttes tombent dessous :
   il lui faut la place, sinon la barre du fil vient s'y coller. */
.hdp-tete h1{
  margin:0 0 86px;font:700 clamp(34px,5vw,52px)/1.04 var(--hdp-serif);
  letter-spacing:-.015em;color:var(--hdp-encre);
}
.hdp-tete h1 i{font-style:italic;color:var(--hdp-ocre);}
.hdp-lede{margin:14px 0 0;font:400 16px/1.6 var(--hdp-serif);color:var(--hdp-gris);max-width:56ch;}

/* ---- Le formulaire ---- */
.hdp-form{
  background:var(--hdp-blanc);border-radius:8px;padding:20px;
  box-shadow:0 10px 28px rgba(26,26,26,.07);margin:0 0 40px;
}
.hdp-form-onglets{display:flex;gap:8px;margin-bottom:14px;}
.hdp-form-onglets button{
  padding:8px 14px;border:1px solid var(--hdp-trait);border-radius:999px;
  background:none;cursor:pointer;color:var(--hdp-gris);
  font:600 12px/1 var(--hdp-ui);letter-spacing:.06em;
}
.hdp-form-onglets button.is-on{background:var(--hdp-creme);border-color:transparent;color:var(--hdp-ocre);}
.hdp-form textarea{
  width:100%;border:0;padding:6px 0;background:none;resize:none;overflow:hidden;
  font:400 19px/1.55 var(--hdp-serif);color:var(--hdp-encre);
}
.hdp-form textarea:focus{outline:none;}
.hdp-form textarea::placeholder{color:var(--taupe2,#a99d8a);}
.hdp-form-suite[hidden]{display:none !important;}
.hdp-form-suite{display:block;border-top:1px solid var(--hdp-trait);margin-top:14px;padding-top:14px;}
.hdp-form-bas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hdp-form-bas input[type=text]{
  flex:1 1 200px;padding:11px 14px;border:1px solid var(--hdp-trait);border-radius:6px;
  background:var(--hdp-papier);font:400 15px/1 var(--hdp-ui);
}
.hdp-piege{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;}
.hdp-envoyer{
  padding:13px 26px;border:0;border-radius:12px;cursor:pointer;
  background:var(--hdp-ocre);color:#fff;
  font:700 13px/1 var(--hdp-ui);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 0 4px var(--hdp-creme);
}
.hdp-envoyer:disabled{opacity:.6;cursor:wait;}
.hdp-legal{margin:12px 0 0;font:400 12px/1.5 var(--hdp-ui);color:var(--hdp-gris);}
.hdp-msg{margin:10px 0 0;font:500 14px/1.5 var(--hdp-ui);color:var(--hdp-ocre);}

/* L'aperçu · on voit son message avant de l'envoyer. */
.hdp-apercu{
  background:var(--hdp-creme);border-radius:8px;padding:14px 16px;margin-bottom:14px;
}
.hdp-apercu-lbl{
  display:block;font:700 10px/1 var(--hdp-ui);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hdp-ocre);margin-bottom:8px;
}
.hdp-apercu-corps b{font:700 13px/1 var(--hdp-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--hdp-encre);}
.hdp-apercu-corps p{margin:6px 0 0;font:400 17px/1.55 var(--hdp-serif);color:var(--hdp-encre);}

/* ---- Le fil ---- */
.hdp-fil{display:grid;gap:16px;}
.hdp-carte{
  background:var(--hdp-blanc);border-radius:8px;padding:18px 20px 14px;
  box-shadow:0 8px 22px rgba(26,26,26,.05);
}
.hdp-carte.is-attente{background:var(--hdp-creme);box-shadow:none;}
.hdp-carte-tete{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;
  font:500 11px/1.4 var(--hdp-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--hdp-gris);
}
.hdp-nom{color:var(--hdp-encre);font-weight:700;}
.hdp-sujet{
  padding:3px 9px;border-radius:999px;background:var(--hdp-creme);color:var(--hdp-ocre);
  letter-spacing:.08em;
}
.hdp-carte-tete time{margin-left:auto;text-transform:none;letter-spacing:.02em;}
.hdp-txt{font:400 18px/1.6 var(--hdp-serif);color:var(--hdp-encre);}
.hdp-txt p{margin:0 0 8px;}
.hdp-note{margin:6px 0 0;font:400 13px/1.5 var(--hdp-ui);color:var(--hdp-gris);}

.hdp-pied{display:flex;align-items:center;gap:10px;margin-top:10px;}
.hdp-coeur,.hdp-lien{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--hdp-papier);color:var(--hdp-gris);
  font:700 13px/1 var(--hdp-ui);font-variant-numeric:tabular-nums;
  transition:background .16s ease,color .16s ease;
}
.hdp-coeur svg{fill:none;stroke:currentColor;stroke-width:1.7;}
.hdp-coeur.is-on{color:var(--hdp-ocre);background:var(--hdp-creme);}
.hdp-coeur.is-on svg{fill:currentColor;stroke:none;}
.hdp-coeur:hover,.hdp-lien:hover{color:var(--hdp-ocre);background:var(--hdp-creme);}
.hdp-vues{margin-left:auto;font:400 12px/1 var(--hdp-ui);color:var(--hdp-gris);}

.hdp-vide{
  text-align:center;padding:40px 0;color:var(--hdp-gris);
  font:400 19px/1.5 var(--hdp-serif);
}

/* ---- La page d'un message ---- */
.hdp-wrap--seul{max-width:680px;}
.hdp-retour{margin:34px 0 18px;font:500 12px/1 var(--hdp-ui);letter-spacing:.12em;text-transform:uppercase;}
.hdp-retour a{color:var(--hdp-gris);text-decoration:none;}
.hdp-retour a:hover{color:var(--hdp-ocre);}
.hdp-reps{margin-top:34px;}
.hdp-reps h2{margin:0 0 18px;font:700 26px/1.2 var(--hdp-serif);}
.hdp-rep-liste{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;}
.hdp-rep{background:var(--hdp-blanc);border-radius:8px;padding:14px 16px 10px;}
.hdp-rep.is-attente{background:var(--hdp-creme);}
.hdp-rep-tete{
  display:flex;gap:10px;align-items:baseline;margin:0 0 6px;
  font:500 11px/1.4 var(--hdp-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--hdp-gris);
}
.hdp-rep-tete b{color:var(--hdp-encre);font-weight:700;}
.hdp-rep-tete time{margin-left:auto;text-transform:none;}
.hdp-rep .hdp-txt{font-size:17px;}

@media (max-width:600px){
  .hdp-wrap{padding:0 18px 72px;}
  .hdp-tete{padding:36px 0 26px;}
  .hdp-form textarea{font-size:18px;}
  .hdp-envoyer{width:100%;}
}

/* ---- Le composeur, plus compact ----
 *  Il occupait la moitié de l'écran avant le premier message : le fil
 *  doit se voir sans avoir à défiler, sinon on ne sait pas qu'il y a
 *  une conversation à rejoindre.
 */
.hdp-form{padding:14px 16px;margin-bottom:26px;}
.hdp-form-onglets{margin-bottom:10px;}
.hdp-form-onglets button{padding:6px 12px;font-size:11px;}
.hdp-form textarea{font-size:17px;line-height:1.5;padding:2px 0;}
.hdp-tete{padding:44px 0 4px;}
.hdp-tete h1{margin-bottom:64px;}
.hdp-lede{font-size:15px;margin-top:10px;}

/* ---- Les onglets du fil ---- */
.hdp-filtres{
  display:flex;gap:8px;flex-wrap:wrap;margin:0;
}
.hdp-filtres a{
  padding:7px 14px;border-radius:999px;text-decoration:none;
  background:var(--hdp-blanc);color:var(--hdp-gris);
  font:600 12px/1 var(--hdp-ui);letter-spacing:.06em;
  transition:background .16s ease,color .16s ease;
}
.hdp-filtres a:hover{color:var(--hdp-ocre);}
/* Le filtre actif ne doit pas ressembler au bouton d'action : une seule
   pastille pleine sur la ligne, et c'est celle qui fait quelque chose. */
.hdp-filtres a.is-on{background:var(--hdp-creme);color:var(--hdp-ocre);}

/* ---- Le bouton « + » et le tiroir d'écriture ----
 *  Le fil se lit d'abord ; on écrit quand on a vu ce que les autres
 *  cherchent. Le bouton reste à portée de pouce, en bas à droite.
 */
/* La barre du fil · écrire d'abord, filtrer ensuite. */
.hdp-barre{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;
}
.hdp-barre .hdp-filtres{margin-left:6px;padding-left:12px;border-left:1px solid var(--line,rgba(26,26,26,.1));}
.hdp-ecrire{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px 9px 14px;border:0;border-radius:999px;cursor:pointer;
  background:var(--automne,#a8551f);color:#fff;
  font:700 13px/1 var(--ui,sans-serif);letter-spacing:.08em;
  box-shadow:0 0 0 4px var(--nappe,#f7e9cf);
  transition:transform .16s ease;
}
.hdp-ecrire svg{display:block;}
.hdp-ecrire:hover{transform:translateY(-1px);}
.hdp-ecrire:focus-visible{outline:2px solid var(--automne,#a8551f);outline-offset:6px;}

.hdp-tiroir{
  width:min(560px,calc(100% - 32px));
  border:0;border-radius:12px;padding:0;
  background:var(--paper,#faf6f0);
  box-shadow:0 24px 60px rgba(26,26,26,.28);
}
.hdp-tiroir::backdrop{background:rgba(26,26,26,.42);}
.hdp-tiroir-tete{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 0;
}
.hdp-tiroir-tete b{font:700 13px/1 var(--ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3,#6f6152);}
.hdp-fermer{
  border:0;background:none;cursor:pointer;font-size:18px;line-height:1;
  color:var(--ink3,#6f6152);padding:4px 6px;
}
.hdp-fermer:hover{color:var(--automne,#a8551f);}
.hdp-tiroir .hdp-form{box-shadow:none;margin:12px 16px 16px;}

/* La pagination du fil */
.hdp-wrap .pagination,.hdp-wrap .nav-links{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;
}
.hdp-wrap .page-numbers{
  padding:9px 14px;border-radius:999px;text-decoration:none;
  background:var(--blanc,#fffdfa);color:var(--ink3,#6f6152);
  font:600 13px/1 var(--ui,sans-serif);
}
.hdp-wrap .page-numbers.current{background:var(--automne,#a8551f);color:#fff;}
.hdp-wrap .page-numbers:hover{color:var(--automne,#a8551f);}

@media (max-width:600px){
  .hdp-barre{gap:8px;}
  .hdp-ecrire{padding:9px 16px 9px 12px;}
  .hdp-tiroir{width:100%;max-width:none;margin:auto auto 0;border-radius:14px 14px 0 0;}
}


/* ---- L'onglet « Sur les dupes » ----
 *  La photo d'abord, la phrase ensuite, et la carte entière mène au fil
 *  du guide : on ne discute jamais à deux endroits du même produit.
 */
.hdp-fil--reac{display:flex;flex-direction:column;gap:12px;}
.hdp-reac{
  display:flex;gap:14px;align-items:stretch;text-decoration:none;color:inherit;
  background:var(--hdp-blanc);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 0 rgba(26,26,26,.05), 0 8px 22px rgba(26,26,26,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hdp-reac:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(26,26,26,.05), 0 14px 30px rgba(26,26,26,.09);}
/* Le produit n'est jamais rogné : il se pose en entier dans sa case, et
   la case ne dépasse pas la hauteur de la carte. */
.hdp-reac-img{
  flex:0 0 116px;align-self:stretch;background:var(--hdp-papier);
  display:flex;align-items:center;justify-content:center;
  min-height:104px;padding:8px;
}
.hdp-reac-img img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}
.hdp-reac-txt{display:block;padding:16px 18px 15px 4px;min-width:0;}
.hdp-reac-tete{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:700 11px/1 var(--hdp-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hdp-encre);
}
.hdp-reac-tete time{margin-left:auto;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--hdp-gris);}
.hdp-reac-mot{
  display:block;margin-top:9px;
  font:400 18px/1.5 var(--hdp-serif);color:var(--hdp-encre);
}
.hdp-reac-pied{
  display:block;margin-top:10px;
  font:600 11px/1.4 var(--hdp-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--hdp-gris);
}
.hdp-reac-pied i{font-style:normal;color:var(--hdp-ocre);}
@media (max-width:600px){
  .hdp-reac-img{flex-basis:88px;min-height:88px;padding:6px;}
  .hdp-reac-txt{padding:13px 14px 12px 2px;}
  .hdp-reac-mot{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  .hdp-reac{transition:none;}
  .hdp-reac:hover{transform:none;}
}