/* ============================================================
   Delta WordPress — chargé APRÈS site.css.

   site.css est une extraction octet pour octet de la maquette validée et ne
   doit jamais être modifiée. Tout ce que la mise sous WordPress rend
   nécessaire vit ici, et uniquement ici.
   ============================================================ */

/* ------------------------------------------------------------
   1. Barre d'administration
   WordPress injecte html{margin-top:32px!important} pour les utilisateurs
   connectés. Les éléments en position:fixed (en-tête, overlay, vue projet)
   passent alors SOUS la barre, et le hero en 100dvh déborde d'autant.
   Seule Johanna voit ce défaut — elle en conclurait que le site est cassé.
   ------------------------------------------------------------ */
body.admin-bar .site-header,
body.admin-bar .overlay,
body.admin-bar .pv { top: 32px; }

body.admin-bar .hero { height: calc(100dvh - 32px); min-height: 568px; }

body.admin-bar .overlay,
body.admin-bar .pv { height: calc(100% - 32px); }

@media (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .overlay,
  body.admin-bar .pv { top: 46px; }
  body.admin-bar .hero { height: calc(100dvh - 46px); }
  body.admin-bar .overlay,
  body.admin-bar .pv { height: calc(100% - 46px); }
}

/* ------------------------------------------------------------
   2. Cartes devenues des liens
   .project et .post étaient des <button> ; ce sont désormais des <a> pour
   avoir une vraie URL partageable et indexable. Ils portent déjà
   font:inherit, color:inherit et display:block — il ne manque que ceci.
   ------------------------------------------------------------ */
.project,
.post { text-decoration: none; }

/* ------------------------------------------------------------
   3. Repli si color-mix() n'est pas comprise
   L'en-tête, la barre de la vue projet et le fond de modale reposent dessus.
   Sans repli, la déclaration est ignorée et l'en-tête devient TOTALEMENT
   transparent : navigation illisible dès qu'on défile sur fond clair.
   ------------------------------------------------------------ */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-header[data-solid="true"] { background: rgba(241, 239, 231, .9); }
  .pv-bar { background: rgba(241, 239, 231, .92); }
  .modal-back { background: rgba(34, 35, 28, .55); }
  .svc-head .tagpill { border-color: rgba(59, 109, 47, .4); }
  .offer:hover { border-color: rgba(59, 109, 47, .4); }

  :root[data-theme="dark"] .site-header[data-solid="true"] { background: rgba(20, 21, 15, .9); }
  :root[data-theme="dark"] .pv-bar { background: rgba(20, 21, 15, .92); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header[data-solid="true"] { background: rgba(20, 21, 15, .9); }
    :root:not([data-theme="light"]) .pv-bar { background: rgba(20, 21, 15, .92); }
  }
}

/* ------------------------------------------------------------
   4. Vue réalisation en page autonome
   Le même markup (.pv-hero + .pv-body) sert dans la modale plein écran et
   dans /realisations/<slug>/. En page autonome il ne doit ni être fixé, ni
   masqué, ni translaté.
   ------------------------------------------------------------ */
.pv-static {
  position: static;
  transform: none;
  visibility: visible;
  overflow: visible;
  background: var(--paper);
  padding-top: var(--head-h);
}
.pv-static .pv-load { display: none; }

/* ------------------------------------------------------------
   5. Typographie des contenus rédigés dans l'éditeur
   Articles de blog et pages légales. Reprend les jetons de la maquette.
   ------------------------------------------------------------ */
.entry-content { max-width: 68ch; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content p,
.entry-content li { color: var(--stone); }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 2.2em; }
.entry-content h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 1.8em; }
.entry-content a { color: var(--accent-ink); text-underline-offset: .18em; }
.entry-content ul,
.entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.entry-content img { border-radius: 12px; }
.entry-content figcaption { font-size: .84rem; color: var(--faint); margin-top: .5rem; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content :is(th, td) { border-bottom: 1px solid var(--line); padding: .6rem .4rem; text-align: left; }

/* Palette de l'éditeur : global-styles est retirée du front, on redéclare
   à la main les seules couleurs autorisées dans theme.json. */
.has-accent-color { color: var(--accent-ink); }
.has-ink-color { color: var(--ink); }
.has-stone-color { color: var(--stone); }

/* Wrapper de contenu long hors one-page (article, page légale). */
.page-shell { max-width: 940px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); }
.page-shell > .entry-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.page-shell > .entry-head h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; }
.page-shell > .entry-head .k {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: .6rem;
}

/* Tableaux et blocs de code : jamais de défilement horizontal du document. */
.entry-content :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }