/* ==========================================================================
   20 · La Gazette d'Hector — le site en quotidien
   Papier journal, encre noire, une seule couleur d'accompagnement (le vert).
   Photos en noir et blanc, couleur au survol.
   ========================================================================== */
.v20 {
  --paper: #f3efe4;
  --paper-2: #ebe5d6;
  --ink: #141414;
  --ink-2: #3b3a36;
  --muted: #6b675e;
  --spot: #1fa855;
  --spot-bright: #25d366;
  --rule: #141414;
  --display: "Playfair Display", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}
.v20 .wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.v20 i { font-style: italic; }
.v20 .center { text-align: center; }
.v20 :focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }
.v20 .small { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* Photos N&B, couleur au survol */
.bw { filter: grayscale(1) contrast(1.06); transition: filter .5s ease; }
.bw:hover, a:hover .bw, button:hover .bw, figure:hover .bw { filter: none; }

/* Bouton vert (couleur d'accompagnement) */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 20px; background: var(--spot-bright); color: var(--ink); font: 600 15px/1.1 Inter, sans-serif; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.gbtn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.gbtn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.gbtn--block { width: 100%; }
.gbtn--lg { min-height: 56px; font-size: 17px; padding: 14px 28px; }

/* ---------- Manchette ---------- */
.mast { padding-top: 14px; }
.mast__top { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); font: 500 12px/1.3 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.mast__title { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 22px 0 6px; font: 900 clamp(44px, 1rem + 6.4vw, 112px)/.95 var(--display); letter-spacing: -.02em; text-align: center; }
.mast__title img { width: clamp(44px, 5vw, 78px); height: auto; border-radius: 50%; filter: grayscale(1); }
.mast__title i { font-weight: 700; }
.mast__motto { text-align: center; padding: 8px 0 12px; font: italic 400 17px/1.3 var(--serif); color: var(--ink-2); border-bottom: 4px double var(--rule); }

.index { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.index__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; }
.index__brand { font: 800 20px/1 var(--display); white-space: nowrap; }
.index__links { display: flex; gap: 28px; font: 600 12.5px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; }
.index__links a:hover { color: var(--spot); text-decoration: underline; text-underline-offset: 4px; }
.index .gbtn { min-height: 40px; padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Typo éditoriale ---------- */
.rubric { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); font: 500 12px/1.3 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.rubric span { background: var(--ink); color: var(--paper); padding: 4px 9px; font-weight: 600; }
.h2 { margin-top: 26px; font: 800 clamp(30px, 1.2rem + 2.4vw, 52px)/1.05 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.h2 i { font-weight: 600; color: var(--spot); }
.h2--center { text-align: center; max-width: 900px; margin-inline: auto; }
.h2--big { font-size: clamp(34px, 1.2rem + 3.4vw, 68px); }
.deck { margin-top: 16px; font: italic 400 22px/1.45 var(--serif); color: var(--ink-2); max-width: 760px; }
.deck--center { text-align: center; margin-inline: auto; }
.byline { margin-top: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.body p { font-size: 18px; line-height: 1.6; color: var(--ink-2); hyphens: auto; text-align: justify; }
.body p + p { margin-top: 12px; }
.dropcap > p:first-child::first-letter { float: left; font: 900 76px/.8 var(--display); margin: 6px 10px 0 0; color: var(--ink); }
.cols { margin-top: 22px; column-gap: 32px; column-rule: 1px solid rgba(20,20,20,.25); }
.cols--2 { columns: 2; }
.fig { margin-top: 22px; }
.fig img { width: 100%; height: auto; display: block; }
.fig figcaption, .phonefig figcaption { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(20,20,20,.3); font: italic 400 14px/1.4 var(--serif); color: var(--muted); }
.pull { margin: 30px 0 0; padding: 20px 0; border-top: 3px solid var(--spot); border-bottom: 1px solid var(--rule); font: italic 600 clamp(24px, 1rem + 1.4vw, 34px)/1.25 var(--display); text-align: center; text-wrap: balance; }
.pull--small { font-size: 24px; }
.box { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.box--spot { padding: 20px; border: 2px solid var(--ink); background: #fff8; box-shadow: 6px 6px 0 var(--spot); }
.box__kicker { font: 600 12px/1.3 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--spot); margin-bottom: 12px; }

.sec { margin-top: 80px; }

/* ---------- La une ---------- */
.une { margin-top: 26px; }
.une__title { margin-top: 18px; font: 900 clamp(42px, 1rem + 5.4vw, 96px)/.98 var(--display); letter-spacing: -.025em; text-wrap: balance; max-width: 1100px; }
.une__grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 320px; gap: 44px; }
.une__main { border-right: 1px solid var(--rule); padding-right: 44px; }
.une__main .fig img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
.brief { display: grid; gap: 10px; margin-bottom: 18px; }
.brief li { padding-bottom: 10px; border-bottom: 1px dotted rgba(20,20,20,.4); font-size: 17px; }
.side-wa { display: block; margin-top: 14px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.side-wa:hover { color: var(--spot); }
.bignum { font: 900 64px/1 var(--display); }
.toc { display: grid; gap: 8px; counter-reset: toc; }
.toc a { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; border-bottom: 1px dotted rgba(20,20,20,.4); padding-bottom: 6px; }
.toc a span { font: 500 12px/1.6 var(--mono); color: var(--muted); }
.toc a:hover { color: var(--spot); }

/* ---------- Société ---------- */
.societe__grid { display: grid; grid-template-columns: 1fr 360px; gap: 44px; }
.societe__grid article { border-right: 1px solid var(--rule); padding-right: 44px; }
.overheard { padding-top: 26px; }
.overheard ul { display: grid; gap: 12px; }
.overheard li { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px dotted rgba(20,20,20,.4); font: italic 400 17px/1.35 var(--serif); }
.overheard img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.overheard time { font: 500 11px/1 var(--mono); color: var(--muted); }

/* ---------- Mode d'emploi ---------- */
.how { margin: 36px -26px 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.how__fig { padding: 0 26px; }
.how__fig + .how__fig { border-left: 1px solid var(--rule); }
.frame { padding: 8px; border: 1px solid var(--rule); background: #fff6; }
.frame video, .frame img { display: block; width: 100%; aspect-ratio: 1664 / 956; object-fit: cover; }
.how__fig figcaption { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.how__fig strong { font: 700 21px/1.25 var(--display); color: var(--ink); display: block; margin-bottom: 4px; }
.how__n { display: inline-block; margin-bottom: 8px; padding: 2px 8px; background: var(--spot); color: #fff; font: 600 13px/1.4 var(--mono); }

/* ---------- Reportage ---------- */
.reportage__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
.reportage__grid .fig { margin-top: 26px; }
.reportage__grid .fig img { border: 1px solid var(--rule); }
.reportage__text .body { margin-top: 18px; }
.legend { margin: 22px 0 26px; display: grid; gap: 10px; }
.legend li { display: flex; gap: 12px; align-items: baseline; font: 600 18px/1.35 var(--serif); padding-bottom: 10px; border-bottom: 1px dotted rgba(20,20,20,.4); }
.legend b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--spot); color: #fff; display: grid; place-items: center; font: 600 13px/1 var(--mono); }

/* ---------- Chronique ---------- */
.chronique__grid { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start; }
.chronique__grid article { padding-top: 10px; }
.phonefig .phone { width: 360px; }
.chronique__grid article .body { margin-top: 18px; }
.chronique__grid .pull { margin-bottom: 26px; }
.phonefig .phone { filter: grayscale(.15); }

/* ---------- Courrier des lecteurs ---------- */
.tv { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tv__item { text-align: left; padding: 24px; display: grid; gap: 14px; align-content: start; }
.tv__item + .tv__item { border-left: 1px solid var(--rule); }
.tv__img { position: relative; display: block; }
.tv__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tv__play { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; background: var(--paper); border: 1px solid var(--ink); font: 600 12px/1 var(--mono); }
.tv__quote { font: italic 700 26px/1.2 var(--display); }
.tv__item:hover .tv__quote { color: var(--spot); }
.tv__who { font: 500 12px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.letters { margin-top: 36px; columns: 3; column-gap: 36px; column-rule: 1px solid rgba(20,20,20,.25); }
.letters__head { column-span: all; margin-bottom: 20px; }
.letter { break-inside: avoid; margin-bottom: 24px; padding: 18px; background: #fff8; border: 1px solid rgba(20,20,20,.2); }
.letter p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.letter__to { font-style: italic; margin-bottom: 6px; }
.letter cite { display: block; margin-top: 10px; font: 600 13px/1.3 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .8px; }

/* ---------- L'enquête ---------- */
.enquete .deck { max-width: 820px; }
.enquete__suspects { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.suspects { display: inline-flex; gap: 6px; }
.suspects img { width: 30px; height: 30px; object-fit: cover; border: 1px solid var(--rule); }
.findings { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.finding { padding: 24px 26px 26px 0; border-bottom: 1px solid var(--rule); }
.finding:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px solid var(--rule); }
.finding__n { font: 600 12px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--spot); }
.finding h3 { margin-top: 10px; font: 700 23px/1.2 var(--display); }
.finding p { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.finding__else { display: block; margin-top: 8px; font-style: italic; color: var(--muted); }
.verdict { margin-top: 24px; padding: 16px 20px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--spot); font-size: 19px; display: inline-block; }

/* ---------- Portraits ---------- */
.portraits__grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.portrait figcaption { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.portrait strong { display: block; font: 700 21px/1.25 var(--display); color: var(--ink); margin: 6px 0 4px; }
.portrait em { display: block; margin-top: 8px; font-style: italic; color: var(--ink); }
.portrait__tag { font: 600 11px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--spot); }
.portraits .center { margin-top: 36px; }

/* ---------- Petites annonces ---------- */
.annonces__flash { margin: 18px auto 0; width: fit-content; padding: 6px 14px; border: 1px dashed var(--ink); font: 600 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .6px; }
.ads { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ad { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px 22px 22px; border: 1px solid var(--ink); background: #fff8; transition: transform .15s, box-shadow .15s; }
.ad:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ad--star { border: 3px double var(--spot); outline: 2px solid var(--spot); outline-offset: 4px; background: #fff; }
.ad__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 10px; background: var(--spot); color: #fff; font: 600 11px/1.3 var(--mono); letter-spacing: 1px; white-space: nowrap; }
.ad__ref { font: 500 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ad__name { font: 900 34px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.ad__text { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ad__price { padding-top: 10px; border-top: 1px dotted var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ad__price b { font: 900 40px/1 var(--display); }
.ad__price span { font: 600 15px/1 var(--mono); }
.ad__line { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ad__disc { padding: 2px 7px; background: var(--ink); color: var(--paper); font: 600 12px/1.3 var(--mono); }
.ad--star .ad__disc { background: var(--spot); color: #fff; }
.ad__cta { margin-top: 6px; font: 600 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .6px; color: var(--spot); }
.conditions { margin-top: 34px; padding: 22px 0 0; border-top: 1px solid var(--rule); }
.conditions ul { columns: 3; column-gap: 30px; }
.conditions li { font-size: 15px; line-height: 1.5; padding: 2px 0 2px 16px; position: relative; break-inside: avoid; }
.conditions li::before { content: "■"; position: absolute; left: 0; top: 2px; font-size: 9px; color: var(--spot); }
.conditions .garanties { margin-top: 16px; columns: 2; }
.conditions .pay { margin-top: 22px; }

/* ---------- Vos questions ---------- */
.qa { margin-top: 30px; columns: 2; column-gap: 44px; column-rule: 1px solid rgba(20,20,20,.25); }
.qa details { break-inside: avoid; border-bottom: 1px solid rgba(20,20,20,.3); }
.qa summary { list-style: none; cursor: pointer; padding: 16px 0; font: 700 20px/1.3 var(--display); display: flex; gap: 10px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--spot); }
.qa__q, .qa__r { font: 600 14px/1.6 var(--mono); color: var(--spot); flex: none; }
.qa p { padding: 0 0 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); display: flex; gap: 10px; }

/* ---------- Dernière minute ---------- */
.derniere { margin-bottom: 90px; padding: 40px 30px 50px; border: 3px solid var(--ink); text-align: center; position: relative; }
.derniere__flag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 6px 14px; background: var(--spot); color: #fff; font: 600 13px/1.2 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; }
.derniere__title { font: 900 clamp(34px, 1rem + 3.6vw, 72px)/1.02 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.derniere__title i { color: var(--spot); font-weight: 700; }
.derniere .center { margin-top: 26px; }
.derniere .wa-input { margin-top: 22px; border-radius: 0; border: 1px solid var(--ink); box-shadow: none; font-family: Inter, sans-serif; }

/* Pied de page : colophon */
.v20 .footer { background: var(--ink); }
.v20 .footer h4 { font-family: var(--display); font-weight: 700; font-size: 17px; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .index__links { gap: 16px; font-size: 11.5px; }
  .chronique__grid { grid-template-columns: 1fr 360px; gap: 40px; }
}
@media (max-width: 960px) {
  .index__links { display: none; }
  .une__grid, .societe__grid, .reportage__grid, .chronique__grid { grid-template-columns: 1fr; gap: 26px; }
  .une__main, .societe__grid article { border-right: 0; padding-right: 0; }
  .how { grid-template-columns: 1fr; margin-inline: 0; }
  .how__fig { padding: 0; }
  .how__fig + .how__fig { border-left: 0; border-top: 1px solid var(--rule); padding-top: 26px; }
  .tv { grid-template-columns: 1fr; }
  .tv__item + .tv__item { border-left: 0; border-top: 1px solid var(--rule); }
  .letters, .qa { columns: 1; }
  .findings { grid-template-columns: 1fr 1fr; }
  .finding:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .finding:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--rule); }
  .ads, .portraits__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .ads { gap: 30px; }
  .conditions ul { columns: 2; }
}
/* ---------- Mobile : une colonne de journal ---------- */
@media (max-width: 600px) {
  .mast__top { flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 10.5px; text-align: center; }
  .mast__top span:nth-child(3) { display: none; }
  .mast__title { flex-direction: column; gap: 8px; padding-top: 16px; font-size: 46px; }
  .mast__title img { width: 44px; }
  .mast__motto { font-size: 15px; }
  .index__brand { font-size: 17px; }
  .index .gbtn { font-size: 13px; padding: 8px 12px; min-height: 38px; }
  .une__title { font-size: 42px; }
  .deck { font-size: 19px; }
  .cols--2 { columns: 1; }
  .body p { font-size: 17px; text-align: left; }
  .dropcap > p:first-child::first-letter { font-size: 62px; }
  .sec { margin-top: 60px; }
  .rubric { font-size: 11px; gap: 10px; flex-wrap: wrap; }
  .overheard li { font-size: 16px; }
  .findings { grid-template-columns: 1fr; }
  .finding, .finding:nth-child(2n) { padding: 20px 0; border-left: 0; }
  .tv__item { padding: 22px 0; }
  .tv__quote { font-size: 23px; }
  .conditions ul, .conditions .garanties { columns: 1; }
  .verdict { font-size: 17px; }
  .ad__name { font-size: 30px; }
  .qa summary { font-size: 18px; }
  .derniere { padding: 36px 16px 40px; }
  .phonefig .phone { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .bw, .gbtn, .ad { transition: none; }
}
.phonefig .wa--photo img { max-height: 230px; object-fit: cover; }
.phonefig .phone__chat { min-height: 0; }