/*
Theme Name: HelloDupes
Theme URI: https://hellodupes.fr
Author: Lila
Description: Thème communautaire de dupes (déco). Guides par objet, mosaïque à ratios préservés, face-à-face, copywriting en tête d'écran, produits en données seules. Esthétique éditoriale crème / encre / taupe.
Version: 34.7
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hellodupes
*/

/* ============================================================
   Tokens · repris fidèlement des maquettes
   ============================================================ */
:root{
  --paper:#f7f5f1;
  --ink:#1a1a1a;
  --taupe:#8a7a66;
  --taupe2:#c9bfae;
  /* DA HelloDupes : brun chaud + étoile dorée (repris du logo), plus de vert. */
  --kaki:#9a6f3c;
  --kaki-d:#7a5629;
  --gold:#dca24f;
  --banane:#f3c53d;   /* jaune banane : accent bon plan */
  --banane-d:#d9a91f;
  --line:rgba(26,26,26,0.12);
  --faint:rgba(26,26,26,0.55);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --maxw:1320px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(130% 95% at 72% -5%, #efe9df 0%, #f4f0ea 42%, #f7f5f1 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"clig" 1;
  font-kerning:normal;
  min-height:100vh;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.hd-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ============================================================
   Réglages typographiques fins (mêmes polices, meilleur rendu)
   ============================================================ */
/* Le serif Cormorant est un display à fort contraste : kerning optique + équilibrage des titres. */
h1,h2,h3,h4,.hd-wordmark,.hd-sectionhead h2{
  font-optical-sizing:auto;
  text-wrap:balance;            /* évite les titres bancals / mots orphelins */
}
/* Corps de texte : pas de césure agressive en français, et fins de lignes plus harmonieuses. */
p,li{
  text-wrap:pretty;             /* supprime les veuves/orphelines (navigateurs récents) */
  hyphens:none;
}
/* Prix, scores, labels en Space Mono : on coupe les ligatures et on cale les chiffres en largeur fixe. */
.hd-cur,.hd-stat .n,.hd-stat .l,.hd-seal .pct,.hd-names .pr,.hd-meterrow .mv,.hd-matline,.hd-detail-col .pr{
  font-feature-settings:"tnum" 1,"liga" 0;
  font-variant-numeric:tabular-nums;
}
/* Italique Cormorant (accroches, citations) : léger ajustement d'interlettrage. */
em,i,.hd-lede{letter-spacing:.005em;}

/* ============================================================
   Header / nav (glassmorphism, sticky)
   ============================================================ */
.hd-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,245,241,0.62);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.hd-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;gap:32px;
}
/* Mot-repère façon logo : « Hello » rond et joueur, « Dupes » en script brun,
   l'étoile dorée. Sert de secours si aucun logo n'est téléversé. */
.hd-wordmark{
  font:600 27px/1 "Fredoka","Segoe UI",sans-serif;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;position:relative;
}
.hd-wordmark .hd-wordmark-d{
  font:700 30px/1 "Caveat",cursive;color:var(--taupe);
  margin-left:5px;transform:rotate(-4deg);display:inline-block;
}
.hd-wordmark .hd-wordmark-star{
  color:var(--banane);font-size:15px;line-height:1;margin-left:2px;transform:translateY(-8px);display:inline-block;
}
.hd-logo img{max-height:52px;width:auto;height:auto;display:block;}
.hd-footer-brand .hd-logo img{max-height:44px;}
.hd-navlinks{display:flex;gap:28px;}
.hd-navlinks a{
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;transition:color .2s;
}
.hd-navlinks a:hover,.hd-navlinks a.active{color:var(--ink);}
.hd-navutil{display:flex;align-items:center;gap:18px;}
.hd-cur{font:11px/1 var(--mono);letter-spacing:.1em;color:var(--faint);}
.hd-iconbtn{
  background:none;border:none;cursor:pointer;color:var(--ink);
  display:flex;padding:2px;position:relative;text-decoration:none;align-items:center;
}
.hd-badge{
  position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--taupe);color:var(--paper);box-sizing:border-box;
  font:700 9px/16px var(--mono);text-align:center;
}
.hd-badge[data-count="0"]{display:none;}

/* Burger (mobile) + panneau de recherche */
.hd-burger{display:none;}
.hd-searchpanel{border-top:1px solid var(--line);background:rgba(247,245,241,0.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
.hd-searchpanel[hidden]{display:none;}
.hd-searchform{display:flex;align-items:center;gap:12px;padding:14px 0;}
.hd-searchform svg{color:var(--faint);flex:0 0 auto;}
.hd-searchform input[type=search]{flex:1;min-width:0;border:none;background:none;outline:none;font:400 16px/1.4 var(--serif);color:var(--ink);}
.hd-searchform input[type=search]::placeholder{color:var(--faint);}
.hd-searchform button[type=submit]{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:none;padding:11px 16px;cursor:pointer;white-space:nowrap;}

/* Barre de tri (archives + recherche) */
.hd-sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 28px;}
.hd-sortlabel{font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-right:4px;}
.hd-sortopt{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--faint);text-decoration:none;padding:7px 12px;border:1px solid var(--line);border-radius:100px;transition:color .18s,border-color .18s,background .18s;}
.hd-sortopt:hover{color:var(--ink);border-color:var(--taupe2);}
.hd-sortopt.is-active{color:var(--paper);background:var(--ink);border-color:var(--ink);}

/* ============================================================
   Hero (front page)
   ============================================================ */
.hd-hero{
  display:grid;grid-template-columns:1.02fr 0.98fr;align-items:center;
  gap:56px;padding:56px 48px 64px;margin-top:14px;position:relative;
  border:1px solid var(--line);
  background-color:#f1e9dd;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E"),
    radial-gradient(120% 130% at 82% -10%, #e9dfce 0%, #efe6d8 46%, #f6f2ea 100%);
  background-blend-mode:multiply, normal;
  background-size:180px 180px, cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 30px 60px -40px rgba(26,26,26,.25);
}
.hd-eyebrow{
  font:600 11px/1 var(--sans);letter-spacing:.26em;color:var(--kaki);
  text-transform:uppercase;margin-bottom:26px;display:flex;align-items:center;gap:14px;
}
.hd-eyebrow::before{content:"";width:34px;height:1px;background:var(--kaki);display:inline-block;}
.hd-hero h1{
  margin:0;font:400 clamp(48px,6vw,92px)/0.98 var(--serif);
  letter-spacing:-.015em;text-wrap:balance;
}
.hd-hero h1 i{font-style:italic;}
.hd-hero h1 .muted{color:var(--taupe);}
.hd-lede{margin:30px 0 0;max-width:30em;font:400 19px/1.6 var(--serif);color:var(--faint);}
.hd-lede b{color:var(--ink);font-weight:600;}
.hd-cta{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap;}
.hd-btn{
  display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:none;cursor:pointer;text-decoration:none;
  padding:18px 34px;transition:transform .15s,background .2s;
}
.hd-btn:hover{transform:translateY(-2px);background:#000;}
.hd-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.hd-btn--ghost:hover{background:var(--ink);color:var(--paper);}
/* Bouton d'achat principal · kaki contrasté (conversion). */
.hd-btn--buy{background:var(--banane);color:var(--ink);}
.hd-btn--buy:hover{background:var(--banane-d);color:var(--ink);}
.hd-link{
  font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);
  padding-bottom:4px;transition:gap .2s,border-color .2s;
}
.hd-link:hover{gap:13px;border-color:var(--ink);}
.hd-stats{display:flex;gap:0;margin-top:56px;border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap;}
.hd-stat{padding-right:40px;margin-right:40px;border-right:1px solid var(--line);}
.hd-stat:last-child{border-right:none;}
.hd-stat .n{font:300 34px/1 var(--serif);letter-spacing:-.01em;}
.hd-stat .l{font:11px/1 var(--mono);letter-spacing:.08em;color:var(--taupe);margin-top:9px;}

/* Showcase card (hero illustration) */
.hd-showcase{position:relative;display:flex;justify-content:center;}
.hd-ghost{
  position:absolute;top:26px;left:50%;width:86%;height:92%;
  transform:translateX(-46%) rotate(-3.5deg);transform-origin:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(26,26,26,.06);
}

/* ============================================================
   Section heads
   ============================================================ */
.hd-sectionhead{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:48px 0 22px;border-bottom:1px solid var(--line);margin-top:8px;flex-wrap:wrap;gap:16px;
}
.hd-sectionhead h2{margin:0;font:400 34px/1.05 var(--serif);letter-spacing:-.01em;}
.hd-sectionhead .meta{font:11px/1 var(--mono);letter-spacing:.1em;color:var(--taupe);}

/* ============================================================
   Filtres (chips)
   ============================================================ */
.hd-chips{display:flex;gap:8px;overflow-x:auto;padding:22px 0;}
.hd-chip{
  font:500 12px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;cursor:pointer;
  padding:9px 16px;border-radius:100px;flex-shrink:0;text-decoration:none;
  color:var(--faint);background:transparent;border:1px solid var(--line);
  transition:background .18s,color .18s,border-color .18s;
}
.hd-chip:hover{color:var(--ink);}
.hd-chip.active{color:var(--paper);background:var(--ink);border-color:var(--ink);}

/* ============================================================
   Grille de cartes dupe
   ============================================================ */
.hd-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:26px;padding:26px 0 8px;
}
.hd-card{
  position:relative;background:#fff;border:1px solid var(--line);padding:18px;
  text-decoration:none;color:var(--ink);display:block;
  box-shadow:0 1px 2px rgba(26,26,26,.04),0 10px 24px rgba(26,26,26,.05);
  transition:transform .15s ease,box-shadow .15s ease;
}
.hd-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,26,26,.06),0 16px 34px rgba(26,26,26,.09);}
/* Lien « étiré » : toute la carte est cliquable sans imbriquer de liens. */
.hd-card-link{position:absolute;inset:0;z-index:1;}
.hd-card-meta{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.hd-card-cat{font:600 10px/1 var(--sans);letter-spacing:.2em;color:var(--ink);}
.hd-card-right{display:flex;align-items:center;gap:10px;}
.hd-card-n{font:11px/1 var(--mono);letter-spacing:.08em;color:var(--taupe);}
.hd-card-out{
  display:inline-flex;align-items:center;justify-content:center;color:var(--taupe);
  text-decoration:none;padding:4px;margin:-4px;transition:color .15s,transform .15s;
}
.hd-card-out:hover{color:var(--ink);transform:translate(1px,-1px);}

.hd-pair{position:relative;}
.hd-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hd-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#ece8e1;}
.hd-thumb img{width:100%;height:100%;object-fit:cover;}
.hd-thumb--empty{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(26,26,26,.05) 0 1px,transparent 1px 9px),#ece8e1;
}
.hd-thumb--dark.hd-thumb--empty{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px),#171717;
}
.hd-thumb .cap{font:11px/1 var(--mono);letter-spacing:.18em;color:rgba(26,26,26,.42);text-align:center;}
.hd-thumb--dark .cap{color:rgba(255,255,255,.55);}
.hd-tag{
  position:absolute;top:8px;left:8px;z-index:1;
  font:600 8px/1 var(--sans);letter-spacing:.18em;padding:5px 8px;
}
.hd-tag.o{background:var(--paper);color:var(--ink);}
.hd-tag.d{background:var(--ink);color:var(--paper);}

/* Sceau d'économie */
.hd-seal{
  position:absolute;right:-6px;bottom:-14px;width:74px;height:74px;border-radius:50%;
  background:var(--ink);color:var(--paper);transform:rotate(-8deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(26,26,26,.28);border:2px solid var(--paper);z-index:2;
  pointer-events:none;
}
.hd-seal .pct{font:300 26px/0.85 var(--serif);letter-spacing:-.02em;}
.hd-seal .pct small{font-size:14px;}
.hd-seal .lbl{font:600 7px/1 var(--sans);letter-spacing:.22em;margin-top:4px;opacity:.85;}
.hd-seal--lg{width:92px;height:92px;}
.hd-seal--lg .pct{font-size:33px;}
.hd-seal--lg .pct small{font-size:17px;}
.hd-seal--lg .lbl{font-size:8px;}
/* Sur les cartes : sceau d'économie en haut à droite de l'image. */
.hd-card .hd-seal{top:-12px;right:-6px;bottom:auto;}

.hd-names{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;}
.hd-names .nm{font:500 14px/1.2 var(--serif);}
.hd-names .o .nm{color:var(--faint);}
.hd-names .pr{font:14px/1 var(--mono);margin-top:7px;}
.hd-names .o .pr{color:var(--faint);text-decoration:line-through;}
.hd-names .d .pr{font-weight:700;font-size:17px;}

/* Jauge de ressemblance */
.hd-meterrow{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;}
.hd-meterrow .ml{font:600 9px/1 var(--sans);letter-spacing:.18em;color:var(--faint);}
.hd-meter{display:flex;gap:3px;flex:1;}
.hd-meter span{flex:1;height:4px;border-radius:2px;background:var(--line);}
.hd-meter span.on{background:var(--kaki);}
.hd-meterrow .mv{font:13px/1 var(--mono);}
.hd-matline{display:flex;justify-content:space-between;margin-top:14px;font:11px/1.5 var(--mono);color:var(--faint);gap:12px;}
.hd-matline .saved{color:var(--ink);white-space:nowrap;}

/* Appel à l'action « Voir le comparatif » en bas de carte (libellé, pas un lien :
   la carte entière est déjà cliquable via .hd-card-link). */
.hd-card-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);transition:color .18s ease,gap .18s ease;
}
.hd-card-cta svg{transition:transform .18s ease;}
.hd-card:hover .hd-card-cta{color:var(--kaki);gap:10px;}
.hd-card:hover .hd-card-cta svg{transform:translateX(3px);}

/* Score badge (meilleures dupes) */
.hd-score{
  display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--mono);
  letter-spacing:.06em;color:var(--ink);background:var(--taupe2);
  padding:5px 8px;border-radius:100px;
}
.hd-score svg{display:block;}

/* Badge « Affilié » */
.hd-aff{
  display:inline-block;font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);padding:5px 8px;border-radius:100px;
  vertical-align:middle;white-space:nowrap;
}

/* Bouton signet (save) */
.hd-fav{
  display:flex;align-items:center;justify-content:center;padding:4px;margin:-4px;
  background:none;border:none;cursor:pointer;color:var(--taupe);
}
.hd-fav.is-saved{color:var(--ink);}
.hd-fav svg path{transition:fill .15s;}

/* ============================================================
   Single dupe (détail côte-à-côte)
   ============================================================ */
.hd-detail{max-width:760px;margin:0 auto;padding:40px 0 80px;}
.hd-detail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.hd-back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:600 11px/1 var(--sans);letter-spacing:.14em;color:var(--ink);
}
.hd-detail-cat{font:11px/1 var(--mono);letter-spacing:.1em;color:var(--taupe);}

.hd-detail-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.hd-detail-col .role{font:600 10px/1 var(--sans);letter-spacing:.2em;margin-bottom:10px;}
.hd-detail-col.o .role{color:var(--faint);}
.hd-detail-col.d .role{color:var(--ink);}
.hd-detail-col .big{aspect-ratio:4/5;}
.hd-detail-col .nm{font:500 22px/1.2 var(--serif);margin-top:14px;}
.hd-detail-col .pr{font:16px/1 var(--mono);margin-top:8px;}
.hd-detail-col.o .pr{color:var(--faint);text-decoration:line-through;}
.hd-detail-col.d .pr{font-weight:700;}
.hd-vs{
  position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font:italic 16px/1 var(--serif);color:var(--taupe);z-index:3;
}

.hd-block{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);}
.hd-specs{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.hd-specs .h{font:600 10px/1 var(--sans);letter-spacing:.2em;color:var(--faint);margin-bottom:14px;}
.hd-spec{font:12px/1.6 var(--mono);color:var(--ink);}
.hd-spec b{color:var(--faint);font-weight:400;display:inline-block;min-width:92px;}

.hd-econo{display:flex;align-items:flex-end;justify-content:space-between;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.hd-econo .l{font:600 10px/1 var(--sans);letter-spacing:.2em;color:var(--faint);}
.hd-econo .s{font:500 13px/1 var(--mono);color:var(--taupe);margin-top:9px;}
.hd-econo .pct{font:300 46px/.8 var(--serif);color:var(--ink);letter-spacing:-.01em;}
.hd-econo .pct small{font-size:26px;}

.hd-actions{display:flex;gap:12px;margin-top:34px;}
.hd-actions .hd-btn{flex:1;text-align:center;}
.hd-savebtn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:0 18px;
  background:transparent;border:1px solid var(--ink);cursor:pointer;
  font:600 11px/1 var(--sans);letter-spacing:.14em;color:var(--ink);
}

/* ============================================================
   Single produit
   ============================================================ */
.hd-product{max-width:820px;margin:0 auto;padding:40px 0 80px;display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.hd-product .media{aspect-ratio:1/1;}
.hd-product h1{font:400 34px/1.1 var(--serif);margin:0 0 6px;}
.hd-product .brand{font:600 11px/1 var(--sans);letter-spacing:.2em;color:var(--taupe);margin-bottom:18px;}
.hd-product .price{font:700 26px/1 var(--mono);margin:18px 0;}
.hd-proptable{width:100%;border-collapse:collapse;margin-top:12px;}
.hd-proptable td{padding:12px 0;border-top:1px solid var(--line);font:13px/1.5 var(--mono);vertical-align:top;}
.hd-proptable td:first-child{color:var(--faint);width:120px;letter-spacing:.04em;}
.hd-related{font:600 10px/1 var(--sans);letter-spacing:.2em;color:var(--faint);margin:28px 0 14px;}

/* ============================================================
   Favoris page
   ============================================================ */
.hd-empty{padding:80px 24px;text-align:center;color:var(--faint);}
.hd-empty .t{font:italic 22px/1.3 var(--serif);margin-bottom:12px;}
.hd-empty .s{font:11px/1.5 var(--mono);letter-spacing:.06em;color:var(--taupe);}

/* ============================================================
   Comments (couche communauté)
   ============================================================ */
.hd-comments{max-width:760px;margin:0 auto;padding:0 0 80px;}
.hd-comments h3{font:400 26px/1.1 var(--serif);border-top:1px solid var(--line);padding-top:30px;}
.hd-comments .comment-list{list-style:none;margin:0;padding:0;}
.hd-comments li.comment{padding:20px 0;border-bottom:1px solid var(--line);}
.hd-comments .comment-author{font:600 12px/1 var(--sans);letter-spacing:.06em;}
.hd-comments .comment-meta{font:10px/1 var(--mono);color:var(--taupe);margin:6px 0 10px;}
.hd-comments textarea,.hd-comments input[type=text],.hd-comments input[type=email]{
  width:100%;border:1px solid var(--line);background:#fff;padding:12px;font:14px/1.5 var(--sans);margin-bottom:12px;
}
.hd-comments .submit{
  font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:none;cursor:pointer;padding:14px 28px;
}

/* ============================================================
   Sticky bar (fiche dupe)
   ============================================================ */
body.single-dupe{padding-bottom:84px;}
.hd-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(26,26,26,.08);
}
.hd-sticky .inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.hd-sticky .info{min-width:0;}
.hd-sticky .acts{display:flex;gap:10px;flex-shrink:0;}
.hd-sticky .acts .hd-btn{padding:13px 18px;white-space:nowrap;}
@media (max-width:560px){
  .hd-sticky .info{display:none;}
  .hd-sticky .acts{flex:1;width:100%;gap:8px;}
  .hd-sticky .acts .hd-btn{flex:1;text-align:center;padding:14px 6px;letter-spacing:.08em;}
}

/* ============================================================
   Footer
   ============================================================ */
.hd-footer-band{
  margin-top:48px;border-top:1px solid var(--line);
  background-color:#efe7da;
  background-image:
    repeating-linear-gradient(45deg, rgba(26,26,26,.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(26,26,26,.035) 0 1px, transparent 1px 9px);
}
.hd-footer{padding:48px 0 56px;text-align:center;}
.hd-footer .fm{font:italic 22px/1.3 var(--serif);}
.hd-footer .fs{font:11px/1 var(--mono);letter-spacing:.1em;color:var(--taupe);margin-top:12px;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .hd-navlinks{display:none;}
  .hd-burger{display:flex;}
  .hd-header.is-menu-open .hd-navlinks{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:rgba(247,245,241,0.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:6px 18px 16px;z-index:49;
  }
  .hd-header.is-menu-open .hd-navlinks a{padding:14px 0;border-top:1px solid var(--line);font-size:12px;}
  .hd-hero{grid-template-columns:1fr;gap:44px;padding:34px 22px 46px;}
  .hd-showcase{order:0;}
  .hd-ghost{display:none;}
  .hd-product{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:560px){
  .hd-wrap{padding:0 18px;}
  .hd-detail-pair{gap:14px;}
  .hd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;}
  .hd-stat{padding:0 8px;margin:0;border-right:1px solid var(--line);text-align:center;}
  .hd-stat:last-child{border-right:none;}
  .hd-stat .n{font-size:22px;}
  .hd-stat .l{font-size:9px;letter-spacing:.04em;}
}
/* ============================================================
   Classement d'un objet descriptif (single-objet.php)
   ============================================================ */
.hd-objet{max-width:var(--maxw);margin:0 auto;padding:0 32px 72px;}

.hd-objet-head{padding:44px 0 28px;}
.hd-objet-head h1{
  font:400 clamp(30px,4.4vw,52px)/1.08 var(--serif);
  margin:0 0 14px;letter-spacing:-.01em;
}
.hd-objet-meta{font:11px/1.6 var(--mono);letter-spacing:.06em;color:var(--faint);margin:0;text-transform:uppercase;}
.hd-objet-intro{font:400 19px/1.6 var(--serif);color:var(--ink);margin:20px 0 0;max-width:64ch;}

/* --- L'ancrage : la référence chère --- */
.hd-objet-ref{
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  padding:26px;margin-top:32px;
  border:1px solid var(--line);background:rgba(255,255,255,.42);
}
.hd-objet-ref-img{width:120px;flex:0 0 120px;}
.hd-objet-ref-body{flex:1 1 260px;}
.hd-objet-ref-name{font:400 27px/1.15 var(--serif);margin-top:9px;}
.hd-objet-ref-specs{font:13px/1.5 var(--sans);color:var(--faint);margin-top:8px;}
.hd-objet-ref-price{text-align:right;flex:0 0 auto;}
.hd-objet-ref-price .v{font:700 25px/1 var(--mono);}
.hd-objet-ref-price .s{font:11px/1 var(--mono);color:var(--faint);margin-top:7px;letter-spacing:.05em;}

/* --- Tranches --- */
.hd-objet-tier{margin-top:52px;}
.hd-ogrid{
  display:grid;gap:18px;margin-top:22px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}

/* --- Carte d'alternative --- */
.hd-ocard{
  display:flex;flex-direction:column;
  border:1px solid var(--line);background:rgba(255,255,255,.5);
  padding:16px;position:relative;
}
.hd-ocard.is-choix{border:2px solid var(--kaki);background:rgba(255,255,255,.75);}
.hd-ocard-flag{
  position:absolute;top:-1px;left:-1px;
  font:700 9px/1 var(--mono);letter-spacing:.14em;
  color:var(--paper);background:var(--kaki);padding:7px 11px;
}
.hd-ocard-img{margin-bottom:14px;}
.hd-ocard.is-choix .hd-ocard-img{margin-top:16px;}
.hd-ocard-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.hd-ocard-name{font:400 17px/1.25 var(--serif);}
.hd-ocard-match{
  font:700 11px/1 var(--mono);color:var(--taupe);
  border:1px solid var(--line);padding:5px 7px;flex:0 0 auto;
}
.hd-ocard-diff{font:13px/1.5 var(--sans);color:var(--faint);margin-top:9px;}
.hd-ocard-price{font:700 21px/1 var(--mono);margin:14px 0 12px;}
.hd-ocard-cta{width:100%;text-align:center;margin-top:auto;}
.hd-ocard-rupture{
  font:11px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint);
  border:1px dashed var(--line);padding:11px;text-align:center;margin-top:auto;
}
.hd-ocard-fiche{
  font:11px/1 var(--mono);letter-spacing:.06em;color:var(--taupe);
  text-decoration:none;margin-top:12px;display:inline-block;
}
.hd-ocard-fiche:hover{color:var(--ink);}

/* --- Enseignes + méthode --- */
.hd-objet-enseignes{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);}
.hd-objet-enseignes .hd-chips{margin-top:14px;}
.hd-objet-methode{margin-top:38px;padding-top:26px;border-top:1px solid var(--line);}
.hd-objet-methode p{font:15px/1.65 var(--sans);color:var(--faint);margin:12px 0 0;max-width:76ch;}
.hd-objet-aff{font-size:13px !important;}

/* ============================================================
   Blocs dérivés (derive.php) et avis (avis.php)
   ============================================================ */
.hd-facts{margin-top:26px;}
.hd-facts + .hd-facts{margin-top:30px;}
.hd-avis{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}

@media (max-width:860px){
  .hd-objet{padding:0 20px 56px;}
  .hd-objet-ref{gap:18px;padding:20px;}
  .hd-objet-ref-price{text-align:left;flex:1 1 100%;}
  .hd-ogrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
}

/* ============================================================
   Fiche dupe · six blocs (single-dupe.php)
   ============================================================ */
.hd-fiche{max-width:920px;margin:0 auto;padding:0 32px 72px;}
.hd-fiche .hd-back{padding:28px 0 0;font:11px/1 var(--mono);letter-spacing:.08em;}
.hd-fiche .hd-back a{color:var(--faint);text-decoration:none;}
.hd-fiche .hd-back a:hover{color:var(--ink);}

.hd-fiche-head{padding:26px 0 8px;}
.hd-fiche-head h1{font:400 clamp(27px,3.8vw,42px)/1.12 var(--serif);margin:0 0 12px;letter-spacing:-.01em;}
.hd-fiche-meta{font:11px/1.7 var(--mono);letter-spacing:.05em;color:var(--faint);margin:0;}

/* --- Le face-à-face --- */
.hd-duo{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:start;margin-top:30px;}
.hd-duo-name{font:400 18px/1.25 var(--serif);margin-top:12px;}
.hd-duo-price{font:700 21px/1 var(--mono);margin-top:8px;}
.hd-duo-side .hd-eyebrow{margin-bottom:10px;}

.hd-duo-mid{display:flex;flex-direction:column;align-items:center;padding-top:64px;width:112px;}
.hd-indice{
  width:94px;height:94px;border-radius:50%;
  border:2px solid var(--banane);background:rgba(243,197,61,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hd-indice .v{font:700 29px/1 var(--mono);color:var(--kaki-d);}
.hd-indice .v .d{font-size:15px;}
.hd-indice .l{font:700 8px/1 var(--mono);letter-spacing:.12em;color:var(--kaki-d);margin-top:5px;}
.hd-indice-src{font:10px/1.4 var(--mono);color:var(--faint);text-align:center;margin-top:8px;}

/* --- Barre économie + achat --- */
.hd-econobar{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  margin-top:30px;padding:22px 24px;
  border:1px solid var(--kaki);background:rgba(154,111,60,.06);
}
.hd-econobar-fig .l{font:11px/1 var(--mono);letter-spacing:.07em;color:var(--kaki-d);}
.hd-econobar-fig .v{font:700 34px/1.1 var(--mono);color:var(--kaki-d);margin-top:5px;}
.hd-econobar-fig .s{font:11px/1 var(--mono);color:var(--kaki-d);margin-top:5px;}
.hd-econobar-cta{flex:1 1 250px;max-width:340px;}
.hd-econobar-cta .hd-btn{width:100%;text-align:center;}
.hd-econobar-note{font:11px/1.5 var(--mono);color:var(--kaki-d);text-align:center;margin-top:8px;}

/* --- Blocs --- */
.hd-fiche .hd-block{margin-top:38px;padding-top:30px;border-top:1px solid var(--line);}
.hd-verdict p{font:400 20px/1.6 var(--serif);margin:0;max-width:66ch;}
.hd-verdict-rel{font:15px/1.6 var(--sans) !important;color:var(--faint);margin-top:14px !important;}

/* --- Tableau comparatif --- */
.hd-cmp{width:100%;border-collapse:collapse;margin-top:16px;font:15px/1.5 var(--sans);}
.hd-cmp th{
  text-align:left;font:600 11px/1 var(--mono);letter-spacing:.07em;
  color:var(--taupe);padding:0 0 12px;border-bottom:1px solid var(--line);
}
.hd-cmp td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.hd-cmp td.k{color:var(--faint);width:34%;}
.hd-cmp tr:last-child td{border-bottom:none;}

/* --- Décision --- */
.hd-decision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:24px;}
.hd-decision-card{border:1px solid var(--line);background:rgba(255,255,255,.45);padding:16px 18px;}
.hd-decision-card p{font:400 16px/1.5 var(--serif);margin:9px 0 0;}
.hd-decision-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.hd-decision-meth{font:13px/1.6 var(--sans);color:var(--faint);margin-top:18px;}

.hd-mentions p{font:400 11px/1.7 var(--sans);color:var(--faint);margin:0 0 8px;}
.hd-mentions p:last-child{margin-bottom:0;}

@media (max-width:760px){
  .hd-fiche{padding:0 20px 56px;}
  .hd-duo{grid-template-columns:1fr 1fr;gap:14px;}
  .hd-duo-mid{grid-column:1 / -1;order:3;padding-top:6px;width:auto;}
  .hd-indice{width:76px;height:76px;}
  .hd-econobar{padding:18px;}
  .hd-econobar-cta{max-width:none;}
}
.hd-objet-filtre{
  margin-top:26px;padding:12px 16px;border:1px dashed var(--line);
  font:13px/1.5 var(--sans);color:var(--faint);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.hd-chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.hd-chip-n{opacity:.55;font-size:.85em;margin-left:3px;}
.hd-prixmaj{font:10px/1 var(--mono);letter-spacing:.05em;color:var(--faint);}
.hd-prixmaj.is-perime{color:#a0664b;}

/* ============================================================
   Accueil : grille des classements + promesse
   ============================================================ */
.hd-objgrid{
  max-width:var(--maxw);margin:22px auto 0;padding:0 32px;
  display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
}
.hd-objcard{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);background:rgba(255,255,255,.5);
  transition:border-color .18s ease, background .18s ease;
}
.hd-objcard:hover{border-color:var(--ink);background:rgba(255,255,255,.78);}
.hd-objcard-img{border-bottom:1px solid var(--line);}
.hd-objcard-body{padding:16px 18px 18px;}
.hd-objcard-title{font:400 22px/1.15 var(--serif);}
.hd-objcard-meta{font:11px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint);margin-top:9px;}
.hd-objcard-eco{
  display:inline-block;margin-top:12px;
  font:700 10px/1 var(--mono);letter-spacing:.1em;
  color:var(--ink);background:var(--cta);padding:6px 9px;border-radius:3px;
}

.hd-promesse{
  max-width:var(--maxw);margin:64px auto 0;padding:36px 32px 0;
  border-top:1px solid var(--line);
  display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.hd-promesse-item p{font:400 15px/1.65 var(--sans);color:var(--faint);margin:12px 0 0;}

@media (max-width:860px){
  .hd-objgrid{padding:0 20px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
  .hd-promesse{padding:32px 20px 0;gap:24px;}
  .hd-objcard-title{font-size:19px;}
}

/* ============================================================
   Photo en situation + alerte prix
   ============================================================ */
.hd-situation{margin:16px 0 0;}
.hd-situation img{width:100%;height:auto;}
.hd-situation figcaption{font:11px/1.5 var(--mono);letter-spacing:.05em;color:var(--faint);margin-top:8px;}

.hd-alerte-form{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.hd-alerte-form label{display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--taupe);margin-bottom:10px;}
.hd-alerte-row{display:flex;gap:10px;flex-wrap:wrap;}
.hd-alerte-row input[type=email]{
  flex:1 1 220px;padding:12px 14px;border:1px solid var(--line);
  background:rgba(255,255,255,.6);font:15px/1 var(--sans);color:var(--ink);
}
.hd-alerte-row input[type=email]:focus{outline:none;border-color:var(--ink);}
.hd-alerte-note{font:11px/1.6 var(--sans);color:var(--faint);margin:10px 0 0;}

/* ============================================================
   Correctifs d'affichage
   ============================================================ */

/* Le sceau d'économie débordait de la carte et masquait le produit. */
.hd-card .hd-seal{
  top:10px;right:10px;bottom:auto;
  width:64px;height:64px;
  box-shadow:0 0 0 3px var(--paper);
}
.hd-card .hd-seal .pct{font-size:19px;}
.hd-card .hd-seal .pct small{font-size:10px;}
.hd-card .hd-seal .lbl{font-size:6px;letter-spacing:.16em;margin-top:2px;}

/* Noms de produits : deux lignes maximum, pour que les cartes s'alignent. */
.hd-names .nm,.hd-card .nm,.hd-card-link .nm{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Titre de fiche + bouton favori sur la même ligne. */
.hd-fiche-titrerow{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.hd-fiche-titrerow h1{flex:1;margin-bottom:0;}
.hd-fiche-titrerow .hd-fav{flex:0 0 auto;margin-top:8px;}

/* Grille des objets : une carte seule ne doit pas paraître perdue. */
.hd-objgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,238px),1fr));}
.hd-objcard-img img{aspect-ratio:4/3;object-fit:cover;width:100%;}

/* Cartes comparatifs : plus d'air, noms sur deux lignes maximum. */
.hd-names{gap:16px;}
.hd-names .nm{
  font-size:15px;line-height:1.35;min-height:2.7em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hd-names .pr{margin-top:6px;}
.hd-pair-grid{gap:10px;}
.hd-matline{font-size:12px;}

/* ============================================================
   Classements populaires : cartes uniformes, sans orphelin
   ============================================================ */
.hd-popgrid{
  max-width:var(--maxw);margin:22px auto 0;padding:0 32px;
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.hd-popcard{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);background:rgba(255,255,255,.5);
  transition:border-color .18s ease,background .18s ease;
}
.hd-popcard:hover{border-color:var(--ink);background:rgba(255,255,255,.8);}
.hd-popcard-img{border-bottom:1px solid var(--line);background:#fff;}
.hd-popcard-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:14px;}
.hd-popcard-body{padding:15px 17px 17px;}
.hd-popcard-nom{
  font:400 19px/1.25 var(--serif);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em;
}
.hd-popcard-meta{font:11px/1.5 var(--mono);letter-spacing:.03em;color:var(--faint);margin-top:9px;}
.hd-popcard-eco{
  display:inline-block;margin-top:12px;
  font:700 10px/1 var(--mono);letter-spacing:.1em;
  color:var(--cta-ink);background:var(--cta);padding:6px 9px;
}
@media (max-width:860px){
  .hd-popgrid{padding:0 20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
  .hd-popcard-nom{font-size:17px;}
}

/* ============================================================
   Direction artistique : clean premium
   Les packshots ne se recadrent plus, ils respirent sur blanc.
   ============================================================ */

/* Le recadrage « cover » massacrait les visuels produit. */
.hd-thumb{background:#fff;border:1px solid rgba(26,26,26,.07);}
.hd-thumb img{object-fit:contain;padding:11%;background:#fff;}
.hd-thumb--dark{background:#fff;}
.hd-thumb--dark .cap{color:rgba(26,26,26,.38);}

/* Deux objets distincts, séparés, chacun dans son cadre. */
.hd-pair-grid{gap:14px;}
.hd-pair-side{margin:0;}
.hd-pair-side figcaption{
  font:600 9px/1 var(--sans);letter-spacing:.2em;
  color:var(--faint);text-align:center;margin-top:10px;
}
.hd-pair-side--alt figcaption{color:var(--ink);}

/* Les étiquettes noires posées sur les produits disparaissent. */
.hd-card .hd-tag{display:none;}

/* Le sceau quitte l'image et devient un repère entre les deux prix. */
.hd-names{position:relative;padding-top:8px;}
.hd-card .hd-seal{
  position:absolute;top:50%;left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  width:58px;height:58px;
  background:var(--ink);color:var(--paper);
  box-shadow:0 0 0 5px var(--paper);
  z-index:2;
}
.hd-card .hd-seal .pct{font-size:17px;}
.hd-card .hd-seal .pct small{font-size:9px;}
.hd-card .hd-seal .lbl{font-size:6px;letter-spacing:.14em;margin-top:2px;}

/* Plus d'air, des filets plus discrets. */
.hd-card{padding:22px;border-color:rgba(26,26,26,.09);}
.hd-card:hover{border-color:rgba(26,26,26,.28);}
.hd-names .nm{font-size:15px;line-height:1.4;}
.hd-names .pr{font-size:17px;}
.hd-meterrow{margin-top:20px;padding-top:18px;}
.hd-matline{margin-top:14px;opacity:.75;}
.hd-card-cta{margin-top:20px;padding-top:18px;border-top:1px solid rgba(26,26,26,.07);}

/* Vignettes des classements : même traitement. */
.hd-objcard-img img,.hd-popcard-img img{object-fit:contain;padding:9%;background:#fff;}
.hd-objcard-img,.hd-popcard-img{background:#fff;}

/* Carte face-à-face : l'originale puis le dupe, vraies photos produit, sans texte
   incrusté. L'image de partage (titre + prix) reste réservée à l'Open Graph. */
.hd-objcard-ff{display:flex;align-items:center;justify-content:center;gap:8px;background:#efeae1;padding:16px 12px;min-height:154px;}
.hd-objcard-ff .hd-occ{display:flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;}
.hd-objcard-ff img{aspect-ratio:auto;width:auto;max-width:100%;max-height:120px;object-fit:contain;padding:0;background:transparent;display:block;}
.hd-objcard-ff .hd-occ--ref img{max-height:84px;opacity:.92;}
.hd-objcard-ff .hd-occ-arr{flex:0 0 auto;color:var(--kaki);}
.hd-objcard-ff .hd-occ-arr svg{width:30px;height:20px;display:block;}

/* ============================================================
   Mosaïque du rayon · le ratio d'origine de chaque photo
   ------------------------------------------------------------
   Empilement en colonnes, pas une grille : le navigateur remplit
   chaque colonne à la suite et aucune image n'est recadrée. Une
   grille imposerait une hauteur de rangée, donc un recadrage,
   donc la perte de la silhouette · exactement ce qu'on compare.
   ============================================================ */
.hd-mosaique-wrap{margin:0 0 64px;}
.hd-mosaique{columns:4 230px;column-gap:14px;}
@media(max-width:900px){.hd-mosaique{columns:3 150px;column-gap:10px;}}
@media(max-width:560px){.hd-mosaique{columns:2 132px;column-gap:8px;}}

.hd-mtile{
  display:block;position:relative;margin:0 0 14px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  background:#fff;border:1px solid rgba(26,26,26,.07);
  overflow:hidden;color:var(--ink);text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
@media(max-width:560px){.hd-mtile{margin-bottom:8px;}}
a.hd-mtile:hover{border-color:rgba(26,26,26,.3);box-shadow:0 6px 22px rgba(26,26,26,.07);}
.hd-mtile-img{line-height:0;background:#fff;}
.hd-mtile-img img{width:100%;height:auto;}

/* Packshot détouré : de l'air autour, sinon le fond blanc de l'image
   et le fond blanc de la tuile se confondent en un bloc informe. */
.hd-mtile--pack .hd-mtile-img{padding:10%;}
.hd-mtile--pack .hd-mcap{border-top:1px solid rgba(26,26,26,.06);}

/* Photo en situation : image pleine, légende posée dessus. */
.hd-mtile--situ .hd-mcap{
  position:absolute;left:0;right:0;bottom:0;
  padding:42px 14px 13px;color:#fff;
  background:linear-gradient(to top,rgba(15,13,11,.82) 0%,rgba(15,13,11,.44) 48%,rgba(15,13,11,0) 100%);
}

/* Seule entorse au ratio d'origine : une image très verticale
   déséquilibrerait sa colonne. On la borne, elle seule. */
.hd-mtile--tall .hd-mtile-img{aspect-ratio:1/1.45;}
.hd-mtile--tall .hd-mtile-img img{height:100%;object-fit:cover;}
.hd-mtile--tall.hd-mtile--pack .hd-mtile-img img{object-fit:contain;}

.hd-mcap{padding:11px 13px 13px;}
.hd-meyebrow{
  font:400 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:7px;
}
.hd-mname{
  font:400 15px/1.3 var(--serif);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hd-mrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:7px;}
.hd-mprice{font:700 16px/1 var(--mono);white-space:nowrap;}
.hd-mprice--na{font:400 11px/1 var(--sans);opacity:.6;}
.hd-mnote{font:400 10px/1 var(--mono);letter-spacing:.05em;color:var(--faint);white-space:nowrap;}
.hd-mtile--situ .hd-meyebrow{color:rgba(255,255,255,.88);}
.hd-mtile--situ .hd-mnote{color:rgba(255,255,255,.74);}

.hd-mtile.is-ref{border-color:rgba(26,26,26,.24);}
.hd-mtile.is-choix{border-color:var(--kaki);}
.hd-mtile.is-choix .hd-meyebrow{color:var(--kaki);}
.hd-mtile--situ.is-choix .hd-meyebrow{color:#fff;}
.hd-mtile.is-rupture{opacity:.55;}

.hd-mosaique-note{font:12px/1.6 var(--sans);color:var(--faint);max-width:64ch;margin:16px 0 0;}

/* ============================================================
   Classement en liste · une échelle de prix se lit en colonne
   ------------------------------------------------------------
   La grille de cartes tenait à quatre modèles puis s'écroulait,
   et elle faisait doublon avec la mosaïque. Douze lignes alignées
   se comparent d'un seul regard, prix en colonne à droite.
   ============================================================ */
.hd-oliste{border-top:1px solid rgba(26,26,26,.11);margin-top:22px;}
.hd-oline{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;
  padding:18px 4px;border-bottom:1px solid rgba(26,26,26,.08);
  transition:background .16s ease;
}
.hd-oline:hover{background:rgba(255,255,255,.55);}
.hd-oline.is-rupture{opacity:.5;}
.hd-oline-main{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none;color:inherit;}
.hd-oline-img{flex:0 0 58px;width:58px;}
.hd-oline-img .hd-thumb img{padding:6%;}
.hd-oline-body{min-width:0;}
.hd-oline-name{font:400 17px/1.3 var(--serif);}
.hd-oline-flag{
  font:400 9px/1 var(--mono);letter-spacing:.18em;color:var(--kaki);
  margin-left:9px;vertical-align:1px;white-space:nowrap;
}
.hd-oline-diff{font:13px/1.5 var(--sans);color:var(--faint);margin-top:4px;}
.hd-oline-match{font:400 12px/1 var(--mono);color:var(--faint);white-space:nowrap;}
.hd-oline-end{text-align:right;min-width:118px;}
.hd-oline-price{font:700 20px/1 var(--mono);white-space:nowrap;}
.hd-oline-go{
  display:inline-block;margin-top:7px;
  font:400 11px/1 var(--sans);color:var(--taupe);text-decoration:none;
  border-bottom:1px solid rgba(138,122,102,.4);padding-bottom:2px;
  transition:color .16s ease,border-color .16s ease;
}
.hd-oline-go:hover{color:var(--ink);border-bottom-color:var(--ink);}
.hd-oline-note{font:11px/1.4 var(--sans);color:var(--faint);margin-top:7px;opacity:.78;}
@media(max-width:640px){
  .hd-oline{grid-template-columns:1fr auto;gap:12px;padding:15px 2px;}
  .hd-oline-match{display:none;}
  .hd-oline-main{gap:12px;}
  .hd-oline-img{flex:0 0 48px;width:48px;}
  .hd-oline-name{font-size:15px;}
  .hd-oline-diff{font-size:12px;}
  .hd-oline-price{font-size:17px;}
  .hd-oline-end{min-width:92px;}
}

/* ============================================================
   Carte comparatif · treize informations deviennent six
   ------------------------------------------------------------
   Sceau, jauge en dix segments, badge de score, numéro et flèche
   sortante étaient de la décoration : quatre accents qui se
   disputaient la même carte. Restent les deux produits, les deux
   prix, une ligne de faits et le changement de matière.
   ============================================================ */
.hd-card .hd-seal,
.hd-card .hd-meterrow,
.hd-card .hd-score,
.hd-card .hd-card-n,
.hd-card .hd-card-out,
.hd-card .hd-card-right{display:none;}
.hd-card{padding:26px;}
.hd-names{padding-top:0;}

.hd-factline{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(26,26,26,.09);
  font:13px/1.4 var(--sans);color:var(--faint);
}
.hd-factline b{font:700 15px/1 var(--mono);color:var(--ink);}
.hd-factline:empty{display:none;}

.hd-matline{display:block;margin-top:12px;font:12px/1.5 var(--sans);color:var(--faint);opacity:.85;}
.hd-matline .ar{color:var(--taupe);margin:0 5px;}
.hd-card-cta{margin-top:22px;}

/* Rythme vertical : les sections ne se touchent plus. */
.hd-objet-tier{margin-top:64px;}

/* ============================================================
   Héros · une surface, pas une accumulation d'effets
   ------------------------------------------------------------
   Le fond superposait un bruit fractal, un dégradé radial, une
   ombre intérieure blanche et une ombre portée. Quatre effets qui
   se neutralisaient. Il reste du papier et un filet.
   ============================================================ */
.hd-hero{
  background-image:none;
  background-color:#efe8dc;
  box-shadow:none;
  border-color:rgba(26,26,26,.1);
  align-items:start;
  gap:64px;
  padding:72px 56px 76px;
}
.hd-ghost{display:none;}
.hd-hero-preuve{
  margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line);
  max-width:46ch;font:13px/1.75 var(--sans);color:var(--faint);
}

/* L'échelle de prix : la vitrine démontre au lieu de décrire. */
.hd-echelle{width:100%;max-width:440px;background:#fff;border:1px solid rgba(26,26,26,.1);}
.hd-echelle-ref,.hd-echelle-row{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;
  padding:16px 18px;text-decoration:none;color:inherit;transition:background .16s ease;
}
.hd-echelle-ref{padding-top:20px;padding-bottom:20px;border-bottom:1px solid rgba(26,26,26,.14);}
.hd-echelle-row + .hd-echelle-row{border-top:1px solid rgba(26,26,26,.07);}
.hd-echelle-ref:hover,.hd-echelle-row:hover{background:#faf8f5;}
.hd-echelle-img{width:52px;}
.hd-echelle-img .hd-thumb{border:none;}
.hd-echelle-img .hd-thumb img{padding:4%;}
.hd-echelle .hd-eyebrow{margin-bottom:5px;font-size:9px;letter-spacing:.2em;color:var(--taupe);}
.hd-echelle .hd-eyebrow::before{display:none;}
.hd-echelle-name{font:400 15px/1.3 var(--serif);}
.hd-echelle-sub{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;
  font:400 11px/1.3 var(--mono);color:var(--faint);
}
.hd-echelle-flag{color:var(--kaki);letter-spacing:.14em;}
.hd-echelle-ref .hd-echelle-price{font:400 22px/1 var(--mono);color:var(--faint);}
.hd-echelle-row .hd-echelle-price{font:700 19px/1 var(--mono);}
.hd-echelle-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-top:1px solid rgba(26,26,26,.1);
  font:600 10px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;transition:color .16s ease;
}
.hd-echelle-foot:hover{color:var(--ink);}

/* ============================================================
   Pied de page · maillage interne et pages légales
   ------------------------------------------------------------
   Les guides sont les pages qui captent la requête : les lier
   depuis tout le site est le geste de référencement le moins
   coûteux. Les pages légales existaient sans qu'aucun lien n'y
   mène, ce qui les rendait introuvables.
   ============================================================ */
.hd-footer-band{background-image:none;background-color:#efe8dc;margin-top:72px;}
.hd-footer{padding:56px 0 34px;text-align:left;}
.hd-footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:38px;}
.hd-footer-brand .hd-wordmark{font-size:26px;text-decoration:none;display:inline-block;}
.hd-footer-brand p{margin:16px 0 0;max-width:40ch;font:14px/1.7 var(--sans);color:var(--faint);}
.hd-footer-col .hd-eyebrow{margin-bottom:18px;font-size:10px;letter-spacing:.2em;color:var(--taupe);}
.hd-footer-col .hd-eyebrow::before{display:none;}
.hd-footer-col ul{list-style:none;margin:0;padding:0;}
.hd-footer-col li{margin-bottom:11px;}
.hd-footer-col li a{
  font:400 15px/1.4 var(--serif);color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .16s ease;
}
.hd-footer-col li a:hover{border-bottom-color:var(--ink);}
.hd-footer-legal{border-top:1px solid rgba(26,26,26,.12);padding-top:24px;}
.hd-footer-aff{margin:0 0 18px;max-width:80ch;font:12px/1.7 var(--sans);color:var(--faint);}
.hd-footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:11px/1.6 var(--mono);letter-spacing:.05em;color:var(--taupe);
}
.hd-footer-legalnav a{color:var(--taupe);text-decoration:none;}
.hd-footer-legalnav a:hover{color:var(--ink);}
.hd-footer-legalnav .sep{margin:0 9px;opacity:.5;}
@media(max-width:820px){
  .hd-footer{padding:38px 20px 46px;}
  .hd-footer-cols{grid-template-columns:1fr;gap:34px;}
  .hd-footer-bottom{flex-direction:column;align-items:flex-start;}
  .hd-hero{padding:40px 22px 48px;}
}

/* ============================================================
   Le guide · mobile d'abord
   ------------------------------------------------------------
   Le trafic déco vient de Pinterest, donc du téléphone. Tout ce
   qui suit est dessiné pour un écran de 390 px, puis élargi.
   ============================================================ */
.hd-guide{max-width:680px;margin:0 auto;}

.hd-guide-head{padding-top:22px;}
.hd-guide-eyebrow{font:400 9px/1 var(--mono);letter-spacing:.24em;color:var(--taupe);}
.hd-guide h1{
  margin:12px 0 14px;
  font:400 clamp(30px,8vw,44px)/1.06 var(--serif);
  letter-spacing:-.01em;color:var(--ink);
}
.hd-guide-h1-alt{
  display:block;margin-top:8px;
  font:italic 400 .5em/1.25 var(--serif);color:var(--taupe);
}
.hd-guide-chapo{margin:0;font:400 17px/1.62 var(--serif);color:#3d3a35;}
.hd-guide-meta{margin:16px 0 20px;font:400 10px/1 var(--mono);letter-spacing:.12em;color:var(--taupe);}
.hd-guide-filtre{
  margin:0 0 18px;padding:12px 14px;background:rgba(255,255,255,.6);
  border:1px solid var(--line);font:13px/1.5 var(--sans);
}

/* ---------- La planche ---------- */
/* Images pleines : ni marge, ni cadre, ni fond blanc. Elles vont
   d'un bord à l'autre de l'écran sur téléphone. */
.hd-mosaique{
  columns:3 100px;column-gap:4px;
  /* Pleine largeur de l'écran sur mobile : effet mur d'ambiance. */
  position:relative;left:50%;right:50%;
  width:100vw;margin-left:-50vw;margin-right:-50vw;
  margin-bottom:22px;
}
.hd-mtile{
  display:block;position:relative;margin:0 0 5px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  background:#e9e4db;border:none;overflow:hidden;
  color:var(--ink);text-decoration:none;
}
.hd-mtile-img{line-height:0;background:transparent;padding:0;}
.hd-mtile-img img{width:100%;height:auto;display:block;}
.hd-mtile--pack .hd-mtile-img,
.hd-mtile--pack .hd-mcap{padding:0;border:none;}
.hd-mtile--tall .hd-mtile-img{aspect-ratio:1/1.35;}
.hd-mtile--tall .hd-mtile-img img{height:100%;object-fit:cover;}
.hd-mcap,.hd-mname,.hd-meyebrow,.hd-mrow,.hd-mnote{display:none;}

.hd-mnum{
  display:none; /* Numéros masqués : mur épuré. Retirer cette ligne pour réafficher le classement 1, 2, 3. */
  position:absolute;top:7px;left:7px;
  width:19px;height:19px;border-radius:50%;
  background:rgba(20,17,14,.5);color:#fff;
  font:400 10px/19px var(--mono);text-align:center;
}
.hd-mprix{
  position:absolute;right:8px;bottom:7px;
  font:700 12px/1 var(--mono);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.85);
}
.hd-mtile.is-choix{outline:2px solid var(--kaki);outline-offset:-2px;}
.hd-mtile.is-rupture{opacity:.5;}
a.hd-mtile:active{opacity:.85;}

.hd-guide-resume{
  margin:40px 4px 8px;text-align:center;
  font:400 22px/1.5 var(--serif);color:var(--ink);
}

/* ---------- Une section ---------- */
.hd-guide-sec{margin-top:56px;}
.hd-guide-sec h2{margin:0;font:400 25px/1.2 var(--serif);color:var(--ink);}
.hd-guide-sur{margin-top:6px;font:400 10px/1.4 var(--mono);letter-spacing:.14em;color:var(--taupe);}

/* ---------- Le face-à-face ---------- */
/* Le second produit descend : c'est ce décalage qui ouvre la
   diagonale dans laquelle la flèche peut courir. */
.hd-ff{position:relative;display:flex;align-items:flex-start;gap:34px;margin-top:20px;}
.hd-ff-side{flex:1;min-width:0;text-align:center;}
.hd-ff-side--alt{margin-top:34px;}
.hd-ff-lien{display:block;text-decoration:none;color:inherit;}
.hd-ff-img{line-height:0;background:#e9e4db;}
.hd-ff-img img{width:100%;height:auto;display:block;}
.hd-ff-vide{aspect-ratio:1/1;background:#e9e4db;}
.hd-ff-prix{margin-top:10px;font:400 24px/1 var(--serif);color:var(--ink);}
.hd-ff-prix--ref{color:var(--faint);}
.hd-ff-fleche{
  position:absolute;left:50%;top:29%;
  width:68px;height:42px;transform:translateX(-50%);
  color:var(--kaki);overflow:visible;pointer-events:none;
}

.hd-guide-indice{
  display:inline-block;margin-left:10px;padding:2px 9px;
  background:rgba(154,111,60,.1);color:var(--kaki);
  font:400 10px/1.5 var(--mono);letter-spacing:.08em;border-radius:20px;
  vertical-align:1px;
}

/* Le paragraphe éditorial : la voix, en serif, quand l'accroche est écrite. */
.hd-guide-para{
  margin:26px 0 0;font:400 19px/1.66 var(--serif);color:#33302b;
}

/* Les faits dérivés, étiquetés et posés dans un cadre discret · deux lignes
   courtes deviennent un vrai encadré au lieu de flotter dans le vide. */
.hd-guide-faits{
  margin:24px 0 0;padding:20px 22px;
  background:rgba(255,255,255,.5);border:1px solid rgba(26,26,26,.08);
}
.hd-guide-faits p{margin:0;}
.hd-guide-faits p + p{margin-top:14px;padding-top:14px;border-top:1px solid rgba(26,26,26,.07);}
.hd-guide-faits-lbl{
  display:block;margin-bottom:4px;
  font:400 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);
}
.hd-guide-garde{font:15px/1.6 var(--sans);color:#3d3a35;}
.hd-guide-perd{font:15px/1.6 var(--sans);color:#3d3a35;}

/* Les actions : le clic sortant devient un vrai bouton plein, et
   « enregistrer » se lit en toutes lettres juste dessous. */
.hd-guide-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:22px;}
.hd-guide-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;background:var(--kaki);color:#fff;
  font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border:none;border-radius:2px;
  transition:background .18s ease,transform .12s ease;
}
.hd-guide-cta::after{content:"";width:14px;height:9px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;}
.hd-guide-cta:hover{background:var(--kaki-d);transform:translateY(-1px);}
.hd-guide-cta:active{transform:translateY(0);}

.hd-fav-wide{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;background:transparent;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;
  font:400 12px/1 var(--sans);color:var(--ink);
  transition:border-color .18s ease,background .18s ease;
}
.hd-fav-wide svg{color:var(--taupe);transition:color .18s ease;}
.hd-fav-wide:hover{border-color:var(--ink);}
.hd-fav-wide .hd-fav-on{display:none;}
.hd-fav-wide.is-saved{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.hd-fav-wide.is-saved svg{color:var(--paper);fill:var(--paper);}
.hd-fav-wide.is-saved .hd-fav-off{display:none;}
.hd-fav-wide.is-saved .hd-fav-on{display:inline;}

/* ---------- La liste finale ---------- */
/* Pas de tableau : cinq colonnes sur un téléphone, personne ne lit. */
.hd-oliste-courte{margin-top:14px;}
.hd-ol{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(26,26,26,.09);}
.hd-ol:last-child{border-bottom:none;}
.hd-ol-n{font:400 11px/1 var(--mono);color:var(--taupe);width:12px;flex:none;}
.hd-ol-body{flex:1;min-width:0;text-decoration:none;color:inherit;display:block;}
.hd-ol-nom{display:block;font:400 16px/1.3 var(--serif);color:var(--ink);}
.hd-ol-specs{display:block;margin-top:2px;font:12px/1.45 var(--sans);color:var(--taupe);}
.hd-ol-prix{font:400 16px/1 var(--mono);color:var(--ink);flex:none;white-space:nowrap;}
.hd-ol.is-ref .hd-ol-prix{color:var(--faint);}

.hd-guide-mentions{
  margin:30px 0 10px;padding-top:16px;border-top:1px solid rgba(26,26,26,.1);
  font:400 10px/1.8 var(--mono);color:#a2977f;
}

/* ---------- Au-delà du téléphone ---------- */
@media (min-width:700px){
  .hd-guide-head{padding-top:34px;}
  /* Sur PC : la mosaïque remplit toute la largeur allouée (dans la colonne). */
  .hd-mosaique{columns:5 130px;column-gap:6px;position:static;left:auto;right:auto;width:auto;margin:0 0 30px;}
  .hd-mtile{margin-bottom:6px;}
  .hd-mnum{top:8px;left:8px;width:21px;height:21px;font-size:10px;line-height:21px;}
  .hd-mprix{right:9px;bottom:8px;font-size:13px;}
  .hd-guide-resume{margin-top:52px;margin-bottom:12px;font-size:26px;max-width:32ch;margin-left:auto;margin-right:auto;}
  .hd-guide-sec{margin-top:84px;}
  .hd-guide-sec h2{font-size:32px;}
  .hd-ff{gap:48px;margin-top:28px;}
  .hd-ff-side--alt{margin-top:44px;}
  .hd-ff-prix{font-size:32px;margin-top:14px;}
  .hd-ff-fleche{width:92px;height:57px;top:27%;}
  .hd-guide-para{font-size:21px;max-width:60ch;margin-top:30px;}
  .hd-guide-faits{max-width:62ch;margin-top:28px;padding:22px 26px;}
  .hd-guide-actions{flex-direction:row;align-items:center;gap:14px;margin-top:30px;}
  .hd-ol-nom{font-size:17px;}
  .hd-ol-prix{font-size:18px;}
}

/* ---------- Favoris : une alternative gardée sans fiche 1 vs 1 ---------- */
.hd-favprod{background:var(--surface,#fff);border:1px solid var(--line);display:flex;flex-direction:column;}
.hd-favprod-top{position:relative;}
.hd-favprod-top .hd-fav{position:absolute;top:10px;right:10px;z-index:2;}
.hd-favprod-body{padding:14px 16px 4px;}
.hd-favprod-nom{font:400 16px/1.35 var(--serif);color:var(--ink);}
.hd-favprod-prix{margin-top:6px;font:400 16px/1 var(--mono);color:var(--ink);}
.hd-favprod-link{
  margin:12px 16px 16px;padding-top:12px;border-top:1px solid var(--line);
  font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--taupe);text-decoration:none;
}
.hd-favprod-link:hover{color:var(--ink);}

/* Texte réservé aux lecteurs d'écran. Sans cette règle, les noms de
   produits des tuiles s'afficheraient en clair et casseraient la planche. */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ============================================================
   Transitions & animations · discrètes, désactivées si l'on
   préfère moins de mouvement (accessibilité).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* Cartes : léger soulèvement au survol. */
  .hd-objcard,.hd-popcard,.hd-favprod{
    transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    will-change:transform;
  }
  .hd-objcard:hover,.hd-popcard:hover,.hd-favprod:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(26,26,26,.10);
  }

  /* Mosaïque : la photo zoome doucement dans sa tuile. */
  .hd-mtile{transition:box-shadow .24s ease, transform .24s ease;}
  .hd-mtile-img{overflow:hidden;}
  .hd-mtile-img img{transition:transform .55s cubic-bezier(.2,.7,.2,1);}
  a.hd-mtile:hover{box-shadow:0 12px 30px rgba(26,26,26,.13);}
  a.hd-mtile:hover .hd-mtile-img img{transform:scale(1.05);}

  /* Face-à-face : même respiration sur l'alternative cliquable. */
  .hd-ff-img{overflow:hidden;}
  .hd-ff-img img{transition:transform .55s cubic-bezier(.2,.7,.2,1);}
  .hd-ff-lien:hover .hd-ff-img img{transform:scale(1.04);}

  /* Lignes de liste et échelle : fond qui glisse. */
  .hd-oline,.hd-ol,.hd-echelle-row,.hd-echelle-ref,.hd-echelle-foot{transition:background .18s ease, color .18s ease;}

  /* Boutons : appui léger. */
  .hd-btn,.hd-guide-cta,.hd-fav-wide,.hd-oline-go{transition:transform .14s ease, background .2s ease, border-color .2s ease, color .2s ease;}
  .hd-btn:active,.hd-guide-cta:active,.hd-fav-wide:active{transform:translateY(1px);}

  /* Révélation au défilement · activée par JS (classe .hd-anim sur <html>). */
  .hd-anim .hd-reveal{opacity:0;transform:translateY(18px);}
  .hd-anim .hd-reveal.is-in{
    opacity:1;transform:none;
    transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  }
}

/* Ligne « côte à côte » : prix + lien affilié visible. */
.hd-ol-end{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.hd-ol-go{
  font:400 11px/1 var(--mono);letter-spacing:.04em;color:var(--kaki);
  text-decoration:none;border-bottom:1px solid rgba(154,111,60,.4);padding-bottom:2px;white-space:nowrap;
}
.hd-ol-go:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* ============================================================
   Barre collante « mon choix » · un seul produit, un seul CTA
   ============================================================ */
.hd-guide-affnote{margin:10px 0 0;font:11px/1.5 var(--sans);color:var(--taupe);}

.hd-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(247,245,241,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(26,26,26,.12);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 -8px 24px rgba(26,26,26,.08);
}
.hd-sticky.is-visible{transform:translateY(0);}
.hd-sticky-in{
  display:flex;align-items:center;gap:14px;
  max-width:var(--maxw);margin:0 auto;padding:10px 18px;
}
.hd-sticky-txt{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1;}
.hd-sticky-lbl{font:400 9px/1 var(--mono);letter-spacing:.16em;color:var(--kaki);flex:none;}
.hd-sticky-nom{font:400 15px/1.2 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hd-sticky-prix{font:700 16px/1 var(--mono);color:var(--ink);flex:none;}
.hd-sticky-cta{
  flex:none;padding:12px 22px;background:var(--kaki);color:#fff;
  font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;transition:background .18s ease;
}
.hd-sticky-cta:hover{background:var(--kaki-d);}
.hd-sticky-aff{
  text-align:center;padding:0 18px 7px;
  font:9px/1.3 var(--mono);letter-spacing:.04em;color:var(--taupe);
}
/* Sur grand écran, les blocs détaillés suffisent : pas de barre collante. */
@media (min-width:760px){ .hd-sticky{display:none;} }

/* Mentions comparateur (obligation L111-7 / D111-7) en fin de guide. */
.hd-guide-methode{margin:34px 0 10px;padding-top:20px;border-top:1px solid rgba(26,26,26,.12);}
.hd-guide-methode p{margin:0 0 10px;font:12px/1.7 var(--sans);color:var(--faint);max-width:80ch;}
.hd-guide-methode .hd-guide-aff{color:var(--taupe);}

/* ============================================================
   Blog · tendances + recommandations de guides
   ============================================================ */
.hd-artgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;
  max-width:var(--maxw);margin:22px auto 0;padding:0 32px;
}
.hd-artcard{display:block;text-decoration:none;color:inherit;}
.hd-artcard-img{aspect-ratio:16/10;overflow:hidden;background:#e9e4db;}
.hd-artcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.hd-artcard:hover .hd-artcard-img img{transform:scale(1.05);}
.hd-artcard-ph{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,rgba(26,26,26,.04) 0 1px,transparent 1px 10px),#e9e4db;}
.hd-artcard-cat{margin:14px 0 6px;font:400 10px/1 var(--mono);letter-spacing:.18em;color:var(--taupe);}
.hd-artcard-title{font:400 22px/1.26 var(--serif);color:var(--ink);}
.hd-artcard-ex{margin-top:8px;font:14px/1.6 var(--sans);color:var(--faint);}

/* Article */
.hd-article{max-width:720px;margin:0 auto;padding:0 20px;}
.hd-article-head{padding:28px 0 0;}
.hd-article-eyebrow{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--taupe);}
.hd-article h1{margin:14px 0 12px;font:400 clamp(30px,6vw,48px)/1.08 var(--serif);letter-spacing:-.01em;}
.hd-article-meta{font:400 11px/1 var(--mono);letter-spacing:.1em;color:var(--taupe);margin:0;}
.hd-article-cover{margin:24px 0 0;}
.hd-article-cover img{width:100%;height:auto;display:block;}
.hd-article-body{margin-top:26px;font:400 18px/1.75 var(--serif);color:#2f2c28;}
.hd-article-body > *{max-width:100%;}
.hd-article-body p{margin:0 0 20px;}
.hd-article-body h2{font:400 28px/1.22 var(--serif);margin:38px 0 14px;}
.hd-article-body h3{font:500 19px/1.3 var(--sans);margin:28px 0 10px;}
.hd-article-body img{max-width:100%;height:auto;margin:14px 0;}
.hd-article-body a{color:var(--kaki);text-decoration:underline;text-underline-offset:3px;}
.hd-article-body ul,.hd-article-body ol{margin:0 0 20px;padding-left:22px;}
.hd-article-body li{margin-bottom:8px;}
.hd-article-body blockquote{margin:24px 0;padding-left:18px;border-left:2px solid var(--kaki);font-style:italic;color:var(--faint);}

/* Bloc « guides à lire » sous un article */
.hd-reco{max-width:var(--maxw);margin:54px auto 0;padding:28px 20px 0;border-top:1px solid var(--line);}
.hd-objgrid--inline{margin:20px 0;}
@media(max-width:640px){ .hd-artgrid{padding:0 18px;gap:20px;} }

/* ============================================================
   Touches dorées reprises du logo (l'étoile)
   ============================================================ */
.hd-eyebrow::before{background:var(--banane);height:2px;width:40px;}
.hd-guide-eyebrow,.hd-artcard-cat,.hd-meyebrow{color:var(--taupe);}
/* Le sceau/étoile de section : un clin d'œil doré discret. */
.hd-sectionhead .meta{color:var(--taupe);}
.hd-guide-indice{background:rgba(243,197,61,.24);color:var(--kaki-d);}

/* ============================================================
   v34 · DIRECTION JAUNE — bloc additif (n'enlève rien au thème)
   ------------------------------------------------------------
   1) Contours d'angle jaunes : deux crochets épais et arrondis,
      en haut-gauche et bas-droite, posés sur les cartes/vitrines.
   2) CTA en jaune (fond) + encre (texte) pour le contraste AA.
   Pour tout annuler : supprimer ce bloc et remettre HD_VERSION.
   ============================================================ */
:root{
  --cta:#f7e8a1;      /* jaune pastel choisi */
  --cta-d:#ecd677;    /* jaune profond · survol */
  --cta-ink:#1a1a1a;  /* texte posé sur le jaune */
  --frame:5px;        /* épaisseur des crochets */
  --frame-r:22px;     /* arrondi du coin extérieur */
}

/* ---------- 1 · Contours d'angle (haut-gauche + bas-droite) ---------- */
.hd-card,.hd-ocard,.hd-favprod,.hd-artcard,.hd-echelle{position:relative;}
.hd-card::before,.hd-card::after,
.hd-ocard::before,.hd-ocard::after,
.hd-favprod::before,.hd-favprod::after,
.hd-artcard::before,.hd-artcard::after,
.hd-echelle::before,.hd-echelle::after{
  content:"";position:absolute;width:34px;height:34px;
  border:var(--frame) solid var(--cta);
  pointer-events:none;z-index:3;
}
/* crochet haut-gauche */
.hd-card::before,.hd-ocard::before,.hd-favprod::before,
.hd-artcard::before,.hd-echelle::before{
  top:7px;left:7px;border-right:0;border-bottom:0;
  border-top-left-radius:var(--frame-r);
}
/* crochet bas-droite */
.hd-card::after,.hd-ocard::after,.hd-favprod::after,
.hd-artcard::after,.hd-echelle::after{
  bottom:7px;right:7px;border-left:0;border-top:0;
  border-bottom-right-radius:var(--frame-r);
}
/* La vitrine (échelle de prix) porte un crochet plus généreux. */
.hd-echelle::before,.hd-echelle::after{width:52px;height:52px;border-width:6px;}
/* Sur la carte « meilleur choix », l'étiquette occupe déjà le coin
   haut-gauche : on lui laisse la place, on ne garde que le bas-droite. */
.hd-ocard.is-choix::before{display:none;}

/* ---------- 2 · CTA en jaune (fond jaune, texte encre) ---------- */
.hd-btn:not(.hd-btn--ghost){background:var(--cta);color:var(--cta-ink);}
.hd-btn:not(.hd-btn--ghost):hover{background:var(--cta-d);color:var(--cta-ink);}
.hd-guide-cta,.hd-sticky-cta{background:var(--cta);color:var(--cta-ink);}
.hd-guide-cta:hover,.hd-sticky-cta:hover{background:var(--cta-d);color:var(--cta-ink);}

/* Le repère « meilleur choix » passe du brun kaki au jaune. */
.hd-ocard.is-choix{border-color:var(--cta);}
.hd-ocard-flag{background:var(--cta);color:var(--cta-ink);}
.hd-mtile.is-choix{outline-color:var(--cta);}

/* ============================================================
   v34.1 · Extension — crochets sur cartes objet + intros de
   pages, et aération globale (desktop). Additif, supprimable.
   ============================================================ */

/* ---------- Crochets d'angle : cartes objet + populaires ---------- */
.hd-objcard,.hd-popcard,
.hd-guide-head,.hd-fiche-head,.hd-article-head{position:relative;}
.hd-objcard::before,.hd-objcard::after,
.hd-popcard::before,.hd-popcard::after,
.hd-guide-head::before,.hd-guide-head::after,
.hd-fiche-head::before,.hd-fiche-head::after,
.hd-article-head::before,.hd-article-head::after{
  content:"";position:absolute;width:34px;height:34px;
  border:5px solid var(--cta);pointer-events:none;z-index:3;
}
/* crochet haut-gauche */
.hd-objcard::before,.hd-popcard::before,
.hd-guide-head::before,.hd-fiche-head::before,.hd-article-head::before{
  top:7px;left:7px;border-right:0;border-bottom:0;border-top-left-radius:22px;
}
/* crochet bas-droite */
.hd-objcard::after,.hd-popcard::after,
.hd-guide-head::after,.hd-fiche-head::after,.hd-article-head::after{
  bottom:7px;right:7px;border-left:0;border-top:0;border-bottom-right-radius:22px;
}
/* Les intros sont des blocs de texte : un peu d'air pour que le cadre respire. */
.hd-guide-head,.hd-fiche-head,.hd-article-head{padding-top:34px;padding-bottom:24px;}

/* ---------- Aération globale (desktop uniquement) ---------- */
@media (min-width:760px){
  .hd-hero{gap:68px;padding:64px 56px 78px;}
  .hd-sectionhead{padding:64px 0 26px;}
  .hd-grid{gap:32px;padding:36px 0 10px;}
  .hd-objgrid{gap:24px;margin-top:32px;}
  .hd-ogrid{gap:24px;margin-top:28px;}
  .hd-artgrid{gap:36px;margin-top:32px;}
  .hd-card{padding:22px;}
  .hd-ocard{padding:20px;}
  .hd-objcard-body{padding:20px 20px 22px;}
  .hd-promesse{margin-top:76px;padding:44px 32px 0;gap:40px;}
  .hd-stats{margin-top:62px;padding-top:26px;}
  .hd-lede{margin-top:34px;}
  .hd-mosaique-wrap{margin-bottom:80px;}
  .hd-footer-band{margin-top:84px;}
  .hd-guide-sec{margin-top:64px;}
}

/* ---------- Header · logo un cran plus grand ---------- */
.hd-wordmark{font-size:30px;}
.hd-wordmark .hd-wordmark-d{font-size:33px;}
.hd-wordmark .hd-wordmark-star{font-size:16px;}
.hd-logo img{max-height:60px;}

/* ---------- Pages guides · séparateur avant chaque h2 + flèche ---------- */
/* Petit trait jaune au-dessus de chaque titre de section : joli et discret. */
.hd-guide-sec h2::before{
  content:"";display:block;width:46px;height:4px;border-radius:4px;
  background:var(--cta-d);margin:0 0 18px;
}
@media (min-width:760px){
  .hd-guide-sec{margin-top:88px;}   /* un peu plus de marge entre les sections */
}
/* Flèche du face-à-face : ombre blanche nette qui la détache du fond. */
.hd-ff-fleche{filter:drop-shadow(0 1.5px 1.5px rgba(26,26,26,.42));}

/* ============================================================
   v34.2 · Coins assortis, intros écartées, aération sections,
   résumé en citation, actions centrées, commentaires stylés.
   ============================================================ */

/* III · Cartes : coins haut-gauche + bas-droite arrondis au rayon
   du crochet ; le crochet se pose pile dessus → plus rien ne dépasse. */
.hd-card,.hd-ocard,.hd-favprod,.hd-artcard,.hd-echelle,.hd-objcard,.hd-popcard{
  border-top-left-radius:22px;border-bottom-right-radius:22px;
}
.hd-objcard,.hd-popcard,.hd-favprod,.hd-echelle{overflow:hidden;}
.hd-artcard-img{border-top-left-radius:22px;}
.hd-card::before,.hd-ocard::before,.hd-favprod::before,.hd-artcard::before,
.hd-echelle::before,.hd-objcard::before,.hd-popcard::before{top:0;left:0;}
.hd-card::after,.hd-ocard::after,.hd-favprod::after,.hd-artcard::after,
.hd-echelle::after,.hd-objcard::after,.hd-popcard::after{bottom:0;right:0;}
/* La carte « choix » garde son coin haut-gauche carré (l'étiquette y est). */
.hd-ocard.is-choix{border-top-left-radius:0;}

/* E · Intros de pages : crochets écartés du texte, posés dans la marge
   (desktop). Masqués en mobile où la colonne est trop étroite. */
@media (min-width:760px){
  .hd-guide-head::before,.hd-fiche-head::before,.hd-article-head::before{top:-16px;left:-16px;}
  .hd-guide-head::after,.hd-fiche-head::after,.hd-article-head::after{bottom:-16px;right:-16px;}
}
@media (max-width:759px){
  .hd-guide-head::before,.hd-guide-head::after,
  .hd-fiche-head::before,.hd-fiche-head::after,
  .hd-article-head::before,.hd-article-head::after{display:none;}
}

/* F · Plus de hauteur entre les sections d'un guide. */
@media (min-width:760px){
  .hd-guide-sec{margin-top:112px;}
}

/* D · La section « ce qu'on promet » respire davantage (haut + bas). */
@media (min-width:760px){
  .hd-promesse{margin-top:100px;padding:64px 32px 64px;}
}

/* G · Le résumé du guide prend des airs de citation discrète. */
.hd-guide-resume{
  font-style:italic;color:#6b655c;position:relative;
  max-width:34ch;margin-left:auto;margin-right:auto;
}
.hd-guide-resume::before{content:"«\00a0";color:var(--cta-d);}
.hd-guide-resume::after{content:"\00a0»";color:var(--cta-d);}

/* H · Les actions du guide (« Voir chez… », « Enregistrer ») centrées. */
.hd-guide-actions{align-items:center;justify-content:center;}

/* I · Zone de commentaires, à la DA HelloDupes. */
.hd-comments-inner{max-width:680px;margin:72px auto 0;padding-top:30px;border-top:1px solid var(--line);}
.hd-comments-inner h3{font:400 26px/1.15 var(--serif);color:var(--ink);margin:0 0 8px;}
.hd-comments-inner h3::before{content:"";display:block;width:46px;height:4px;border-radius:4px;background:var(--cta-d);margin-bottom:16px;}
.hd-comments-inner .comment-list{list-style:none;margin:24px 0 0;padding:0;}
.hd-comments-inner .comment-list li{margin:0 0 18px;}
.hd-comments-inner .comment-body{background:#fff;border:1px solid var(--line);border-radius:16px 4px 16px 4px;padding:16px 18px;}
.hd-comments-inner .comment-author{font:500 14px/1.2 var(--serif);color:var(--ink);}
.hd-comments-inner .comment-author .says{display:none;}
.hd-comments-inner .comment-metadata,.hd-comments-inner .comment-meta{font:400 10px/1 var(--mono);letter-spacing:.06em;color:var(--taupe);margin-top:4px;}
.hd-comments-inner .comment-metadata a{color:var(--taupe);text-decoration:none;}
.hd-comments-inner .comment-content{font:400 15px/1.6 var(--sans);color:#33302b;margin-top:10px;}
.hd-comments-inner .comment-content p{margin:0 0 8px;}
.hd-comments-inner .reply{margin-top:8px;}
.hd-comments-inner .reply a{font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--kaki);text-decoration:none;}
.hd-comments-inner .comment-respond,.hd-comments-inner #respond{margin-top:30px;}
.hd-comments-inner .comment-reply-title{font:400 20px/1.2 var(--serif);color:var(--ink);margin:0 0 14px;}
.hd-comments-inner .comment-form{display:flex;flex-direction:column;gap:12px;}
.hd-comments-inner .comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:14px 16px;font:400 15px/1.55 var(--sans);color:var(--ink);resize:vertical;
}
.hd-comments-inner .comment-form textarea:focus{outline:none;border-color:var(--cta-d);box-shadow:0 0 0 3px rgba(236,214,119,.35);}
.hd-comments-inner .comment-form input[type=text],
.hd-comments-inner .comment-form input[type=email],
.hd-comments-inner .comment-form input[type=url]{
  width:100%;max-width:340px;border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:11px 14px;font:400 14px/1.4 var(--sans);color:var(--ink);
}
.hd-comments-inner .form-submit{margin:4px 0 0;}
.hd-comments-inner .form-submit .submit{
  display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cta-ink);background:var(--cta);border:none;border-radius:999px;
  padding:15px 30px;cursor:pointer;transition:background .2s ease,transform .15s ease;
}
.hd-comments-inner .form-submit .submit:hover{background:var(--cta-d);transform:translateY(-2px);}

/* Carte objet en <article> : lien étiré (toute la carte cliquable, sans imbriquer de lien). */
.hd-objcard-link{position:absolute;inset:0;z-index:1;}

/* ============================================================
   v34.3 · CTA hero en noir ; crochets « décollés » du bloc.
   ============================================================ */

/* Le CTA principal du hero seulement : noir, texte blanc. */
.hd-hero .hd-btn:not(.hd-btn--ghost){background:var(--ink);color:#fff;}
.hd-hero .hd-btn:not(.hd-btn--ghost):hover{background:#000;color:#fff;}

/* Crochets détachés : ils flottent un peu à l'extérieur du coin.
   Pour ne pas les couper, on déplace le rognage sur l'élément image
   interne au lieu de la carte (qui redevient overflow:visible). */
.hd-objcard,.hd-popcard,.hd-favprod,.hd-echelle{overflow:visible;}
.hd-objcard-img,.hd-popcard-img,.hd-favprod-top{border-top-left-radius:22px;overflow:hidden;}
.hd-echelle-ref{border-top-left-radius:22px;}
.hd-echelle-foot{border-bottom-right-radius:22px;}

/* Petit espace : les crochets se décollent du coin. */
.hd-card::before,.hd-ocard::before,.hd-favprod::before,.hd-artcard::before,
.hd-echelle::before,.hd-objcard::before,.hd-popcard::before{top:-10px;left:-10px;}
.hd-card::after,.hd-ocard::after,.hd-favprod::after,.hd-artcard::after,
.hd-echelle::after,.hd-objcard::after,.hd-popcard::after{bottom:-10px;right:-10px;}

/* ============================================================
   v34.4 · Polices de titres : Oi (h1, ultra-gras) +
   Quintessential (h2, calligraphique). Additif, supprimable.
   ============================================================ */
h1{font-family:"Oi",serif !important;}
h2{font-family:"Quintessential",serif !important;}
/* Le sous-titre inclus dans le H1 des guides reste en serif classique. */
.hd-guide-h1-alt{font-family:var(--serif) !important;font-style:italic;}
/* Oi n'a pas d'italique : on garde « Pas » droit (évite un faux-italique moche). */
.hd-hero h1 i{font-style:normal;}
/* Oi est très épaisse : on calme la taille du gros titre du hero. */
.hd-hero h1{font-size:clamp(38px,4.6vw,66px);line-height:1.03;letter-spacing:-.005em;}

/* Prix mis à jour · petite mention de fraîcheur sous le CTA de chaque produit. */
.hd-guide-prixmaj{margin:10px 0 0;font:11px/1.5 var(--mono);letter-spacing:.03em;color:var(--taupe);}
.hd-guide-prixmaj.is-perime{color:#a0664b;}



/* ============================================================
   v34.7 · Accueil : les derniers articles + grilles renforcées.
   ------------------------------------------------------------
   1) Tuiles d'articles en accueil : grande image carrée, un
      titre en capitales espacées, une date. Le texte s'efface,
      la photo parle · façon journal déco.
   2) Cartes objet (grilles) : la flèche courbe des guides,
      cernée d'un halo jaune, remplace la flèche droite ; image
      plus haute, texte centré.
   Additif : supprimer ce bloc pour tout annuler.
   ============================================================ */

/* ---------- 1 · Les derniers articles (accueil) ---------- */
.hd-blog-home{max-width:var(--maxw);margin:0 auto;}
.hd-arttuiles{
  max-width:var(--maxw);margin:26px auto 0;padding:0 32px;
  display:grid;gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.hd-arttuile{display:block;text-decoration:none;color:inherit;text-align:center;}

/* Le cadre porte les crochets jaunes ; l'image, le rognage. */
.hd-arttuile-frame{display:block;position:relative;}
.hd-arttuile-frame::before,.hd-arttuile-frame::after{
  content:"";position:absolute;width:34px;height:34px;
  border:var(--frame) solid var(--cta);pointer-events:none;z-index:3;
}
.hd-arttuile-frame::before{top:-10px;left:-10px;border-right:0;border-bottom:0;border-top-left-radius:var(--frame-r);}
.hd-arttuile-frame::after{bottom:-10px;right:-10px;border-left:0;border-top:0;border-bottom-right-radius:var(--frame-r);}

.hd-arttuile-img{
  display:block;aspect-ratio:1/1;overflow:hidden;background:#e9e4db;
  border-top-left-radius:22px;border-bottom-right-radius:22px;
}
.hd-arttuile-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.hd-arttuile:hover .hd-arttuile-img img{transform:scale(1.04);}
.hd-arttuile-img .hd-artcard-ph{width:100%;height:100%;}

.hd-arttuile-title{
  display:block;margin:20px auto 0;max-width:30ch;
  font:400 20px/1.42 var(--serif);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);
}
.hd-arttuile:hover .hd-arttuile-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.hd-arttuile-date{display:block;margin-top:9px;font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--taupe);}

.hd-blog-home-more{max-width:var(--maxw);margin:34px auto 0;padding:0 32px;text-align:center;}
.hd-blog-home-more .hd-link{justify-content:center;}

@media (min-width:760px){
  .hd-arttuiles{gap:44px;margin-top:36px;}
}
@media (max-width:640px){
  .hd-arttuiles{padding:0 20px;gap:26px;}
}

/* ---------- 2 · Grilles d'objets : flèche des guides + halo jaune ---------- */
/* La même flèche courbe que le face-à-face des articles, en miniature,
   posée sur un rond jaune pâle qui la détache des deux photos. */
.hd-objcard-ff .hd-occ-arr{
  color:var(--kaki);
  background:radial-gradient(closest-side, var(--cta) 0%, var(--cta) 58%, rgba(247,232,161,0) 100%);
  border-radius:50%;
  padding:12px 9px;
  margin:0 -4px;
}
.hd-objcard-ff .hd-occ-arr svg{
  width:40px;height:25px;overflow:visible;
  filter:drop-shadow(0 1px 1px rgba(26,26,26,.30));
}
/* La diagonale des guides, en miniature : l'originale un peu plus haute,
   le dupe un peu plus bas · la flèche court entre les deux. */
.hd-objcard-ff{min-height:186px;}
.hd-objcard-ff .hd-occ--ref{transform:translateY(-8px);}
.hd-objcard-ff .hd-occ--dupe{transform:translateY(10px);}

/* L'image seule (repli) passe au carré, comme les tuiles d'articles. */
.hd-objcard-img img{aspect-ratio:1/1;}
.hd-objcard-ff img{aspect-ratio:auto;}

/* Le texte de carte s'efface un peu : centré, plus discret. */
.hd-objcard-body{text-align:center;}
.hd-objcard-title{letter-spacing:.01em;}
.hd-objcard-meta{font-size:10px;letter-spacing:.08em;}