/* =====================================================================
   pérégrinIA, le bureau : feuille de style (phase 1, fondations)
   Mur de béton sombre ; les textes se lisent sur papier.
   Référence visuelle : 04-Maquette-Bureau/bureau.html.
   Thème unique sombre : pas de règle clair/sombre à dupliquer.
   ===================================================================== */

/* ---------- Jetons ---------- */
:root {
  --beton: #151512;
  --craie: #ECE6D8;
  --craie-2: #B9B2A3;
  --jaune: #E3B82E;
  --rouge: #D22B45;
  --rouge-vif: #FF6B80;
  --encre: #22201C;
  --encre-2: #59534A;
  --rouge-encre: #A51F35;
  --kraft: #A8865A;

  --f-titre: "Special Elite", "Courier New", monospace;
  --f-texte: "Alegreya Sans", "Segoe UI", sans-serif;
  --f-fiche: "Courier Prime", "Courier New", monospace;

  --largeur: 1120px;
  --largeur-feuille: 900px;
  color-scheme: dark;
}

/* ---------- Le mur ---------- */
html, body {
  background: var(--beton) url("../assets/dark-texture-surface.webp") center / cover fixed !important;
  color: var(--craie);
}
body, button, input, select, optgroup, textarea {
  font-family: var(--f-texte);
}
body { font-size: 18px; line-height: 1.6; }

/* Astra pose des fonds blancs ou gris sur ses conteneurs : tout devient transparent, le béton se voit. */
#page, .site-content, .ast-container, .site-main,
.ast-separate-container, .ast-separate-container #primary,
.ast-plain-container, .ast-page-builder-template .site-content,
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single,
.ast-separate-container .comments-area, .ast-archive-description,
.ast-separate-container .ast-archive-description, .error-404, .no-results {
  background: transparent !important;
  box-shadow: none;
}

a { color: var(--jaune); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px dashed var(--jaune);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a, .ast-archive-title, .site-title {
  font-family: var(--f-titre) !important;
  font-weight: 400 !important; /* Special Elite n'a qu'une graisse : pas de faux gras. */
  color: var(--jaune);
  letter-spacing: .005em;
}

::selection { background: var(--jaune); color: var(--encre); }

/* ---------- En-tête ---------- */
.site-header, .ast-primary-header-bar, .main-header-bar, .ast-main-header-wrap,
#ast-desktop-header, #ast-mobile-header, .ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-content, .ast-mobile-header-content .main-header-menu,
.ast-sticky-active, .ast-header-sticked {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ast-header-sticked, .ast-sticky-active { background: rgba(21, 21, 18, .94) !important; }
.ast-mobile-header-content { background: var(--beton) !important; border-top: 1px dashed rgba(236, 230, 216, .2) !important; }

.main-header-menu .menu-link, .ast-builder-menu .menu-link,
.ast-mobile-header-content .menu-link {
  font-family: var(--f-titre) !important;
  font-size: .98rem !important;
  letter-spacing: .04em;
  color: var(--craie) !important;
  background: transparent !important;
}
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link { color: var(--jaune) !important; }
@media (hover: hover) and (pointer: fine) {
  .main-header-menu .menu-link:hover { color: var(--jaune) !important; }
}
/* « L'enquêteur » : la personne, pas une rubrique. Rouge vif (6,7:1 sur le béton), jaune au survol comme les autres. */
.main-header-menu .menu-item-592 > .menu-link,
.main-header-menu .menu-item-592.current-menu-item > .menu-link,
.ast-mobile-header-content .menu-item-592 > .menu-link { color: var(--rouge-vif) !important; }
@media (hover: hover) and (pointer: fine) {
  .main-header-menu .menu-item-592 > .menu-link:hover { color: var(--jaune) !important; }
}
/* Focus clavier du menu : le lien occupe toute la hauteur de l'en-tête, le cadre se resserre autour du texte. */
.main-header-menu > .menu-item > .menu-link { position: relative; }
.main-header-menu > .menu-item > .menu-link:focus-visible { outline: none; }
.main-header-menu > .menu-item > .menu-link:focus-visible::after {
  content: ""; position: absolute; left: .35em; right: .35em; top: 50%; height: 2.4em; transform: translateY(-50%);
  border: 2px dashed var(--jaune); pointer-events: none;
}
.main-header-menu .sub-menu {
  background: var(--beton) !important;
  border: 1px solid rgba(236, 230, 216, .25) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.ast-mobile-menu-trigger-minimal, .menu-toggle, .ast-button-wrap .menu-toggle { color: var(--craie) !important; background: transparent !important; }
.ast-mobile-svg, .mobile-menu-toggle-icon svg { fill: var(--craie) !important; }

/* Logo : un seul fichier (01-Marque-Finale/Logo-v2), sa largeur se règle dans Astra. */
.custom-logo-link img { height: auto; }

/* ---------- La feuille de papier ----------
   Articles et pages : le contenu se lit sur la feuille ancienne, découpée en neuf tranches
   (border-image) pour s'allonger avec le texte sans déformer ses bords. */
.ast-separate-container .ast-article-single,
body.page:not(.home) .site-main > article.page,
.ast-separate-container .ast-article-post,
.error-404, .no-results {
  position: relative;
  isolation: isolate;
  max-width: var(--largeur-feuille);
  margin: 1.5rem auto 2.5rem !important;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 6vw, 4.2rem) !important;
  color: var(--encre);
  border: 0 !important;
}
.ast-separate-container .ast-article-single::before,
body.page:not(.home) .site-main > article.page::before,
.ast-separate-container .ast-article-post::before,
.error-404::before, .no-results::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-style: solid;
  border-width: 26px;
  /* Bords seuls, répétés (« round ») : un « fill » étiré sur une page haute donnait des traînées verticales. */
  border-image: url("../assets/papier-cadre.webp") 70 / 26px round;
  /* Couleur de secours : sous l'image, dans la zone intérieure seulement (les bords déchirés restent ceux de l'image). */
  background: #ECE4D0 url("../assets/papier-fond.webp") 0 0 / 400px 400px repeat padding-box;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
}

/* Sur la feuille, tout passe à l'encre. */
body:not(.home) .ast-article-single, body.page:not(.home) article.page, .ast-article-post, .error-404, .no-results {
  --texte: var(--encre);
}
body:not(.home) .ast-article-single :is(p, li, dd, dt, td, th, figcaption, blockquote, cite, span, div),
body.page:not(.home) article.page :is(p, li, dd, dt, td, th, figcaption, blockquote, cite, span, div),
.ast-article-post :is(p, li, span, div),
.error-404 :is(p, span, div), .no-results :is(p, span, div) {
  color: var(--encre);
}
body:not(.home) .ast-article-single :is(h1, h2, h3, h4, h5, h6, .entry-title),
body.page:not(.home) article.page :is(h1, h2, h3, h4, h5, h6, .entry-title),
.ast-article-post :is(h1, h2, h3, .entry-title, .entry-title a),
.error-404 :is(h1, h2), .no-results :is(h1, h2) {
  color: var(--encre) !important;
}
body:not(.home) .ast-article-single a, body.page:not(.home) article.page a, .ast-article-post a, .error-404 a, .no-results a {
  color: var(--rouge-encre);
}
.ast-article-post .entry-title a { text-decoration: none; }

body:not(.home) .ast-article-single .entry-title, body.page:not(.home) article.page .entry-title {
  font-size: clamp(1.9rem, 4.4vw, 2.8rem) !important;
  line-height: 1.1;
}

/* Mesure de lecture sur la feuille. */
body:not(.home) .ast-article-single .entry-content, body.page:not(.home) article.page .entry-content { font-size: 1.125rem; line-height: 1.7; }
body:not(.home) .ast-article-single .entry-content > :is(p, ul, ol, blockquote, h2, h3, h4),
body.page:not(.home) article.page .entry-content > :is(p, ul, ol, blockquote, h2, h3, h4) {
  max-width: 70ch;
  margin-left: 0;
}

/* Métadonnées et fil d'Ariane : à la machine. */
.entry-meta, .entry-meta *, .ast-breadcrumbs, .ast-breadcrumbs *, .posted-on, .byline, .cat-links, .tags-links,
.ast-archive-description .ast-breadcrumbs * {
  font-family: var(--f-fiche) !important;
  font-size: .85rem;
  color: var(--craie-2) !important; /* sur le béton (recherche, étiquettes) */
}
.entry-meta a, .ast-breadcrumbs a { color: var(--craie) !important; text-decoration: underline dotted; text-underline-offset: .2em; }
/* Sur le papier, à l'encre. */
:is(.ast-article-single, .ast-article-post, article.page, .feuille) :is(.entry-meta, .entry-meta *, .ast-breadcrumbs, .ast-breadcrumbs *, .posted-on, .byline, .cat-links, .tags-links) { color: var(--encre-2) !important; }
:is(.ast-article-single, .ast-article-post, article.page, .feuille) :is(.entry-meta a, .ast-breadcrumbs a) { color: var(--encre-2) !important; }

/* Images dans le dossier : en couleur, cadre blanc de tirage. */
body:not(.home) .ast-article-single .entry-content img, body.page:not(.home) article.page .entry-content img {
  border: 6px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

/* Citations, code, tableaux sur papier. */
body:not(.home) .ast-article-single blockquote, body.page:not(.home) article.page blockquote {
  border-left: 3px solid var(--rouge-encre) !important;
  background: rgba(34, 32, 28, .05);
  padding: .8rem 1.1rem;
  font-style: italic;
}
body:not(.home) .ast-article-single :is(code, pre, kbd), body.page:not(.home) article.page :is(code, pre, kbd) {
  font-family: var(--f-fiche);
  background: rgba(34, 32, 28, .07);
  color: var(--encre);
}
body:not(.home) .ast-article-single table, body.page:not(.home) article.page table { border-collapse: collapse; }
body:not(.home) .ast-article-single :is(td, th), body.page:not(.home) article.page :is(td, th) { border-color: rgba(34, 32, 28, .3) !important; }
.wp-block-separator { border-color: rgba(34, 32, 28, .35) !important; opacity: 1; }

/* ---------- Accueil actuel, en attendant son gabarit (phase 3) ---------- */
body.home .entry-content :is(p, li, span, div, h2, h3, a) { color: var(--craie) !important; }
body.home .entry-content :is(h2, h3, h2 a, h3 a) { color: var(--jaune) !important; text-decoration: none; }

/* ---------- Boutons ---------- */
.wp-block-button__link, .ast-button, .button, button.search-submit, input[type="submit"] {
  font-family: var(--f-titre) !important;
  font-size: .9rem !important;
  letter-spacing: .06em;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jaune) !important;
  border: 1px solid var(--jaune) !important;
  padding: .6rem 1rem !important;
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover, .ast-button:hover, .button:hover { background: var(--jaune) !important; color: var(--encre) !important; }
}
/* Sur papier, le bouton passe à l'encre rouge. */
body:not(.home) :is(.ast-article-single, article.page) .wp-block-button__link { color: var(--rouge-encre) !important; border-color: var(--rouge-encre) !important; }
@media (hover: hover) and (pointer: fine) {
  body:not(.home) :is(.ast-article-single, article.page) .wp-block-button__link:hover { background: var(--rouge-encre) !important; color: #fff !important; }
}

/* ---------- Archives (provisoire : la vraie page de dossier arrive en phase 3) ---------- */
:is(body.archive, body.blog, body.search) .ast-article-post { background: transparent !important; box-shadow: none !important; }
:is(body.archive, body.blog, body.search) .ast-article-post::before { content: none; }
:is(body.archive, body.blog, body.search) .ast-article-post .ast-article-inner {
  background: #EFEBE2 !important;
  color: var(--encre);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5) !important;
  border: 0 !important;
}
:is(body.archive, body.blog, body.search) .ast-article-post :is(p, span, div, time) { color: var(--encre) !important; }
:is(body.archive, body.blog, body.search) .ast-article-post :is(.entry-title, .entry-title a) { color: var(--encre) !important; text-decoration: none; }
:is(body.archive, body.blog, body.search) .ast-article-post a { color: var(--rouge-encre) !important; }
:is(body.archive, body.blog, body.search) .ast-article-post .ast-blog-featured-section img { border: 6px solid #F7F3EA; }
.ast-archive-description { max-width: var(--largeur-feuille); margin: 1.5rem auto 0 !important; padding: 0 !important; border: 0 !important; }
.ast-archive-description .ast-archive-title { color: var(--jaune) !important; font-size: clamp(2rem, 5vw, 3rem) !important; }
.ast-archive-description p, .ast-archive-description .taxonomy-description { color: var(--craie) !important; }
.ast-separate-container .ast-article-post { margin-bottom: 1.6rem !important; }

/* ---------- Articles liés (Astra Pro), sur le béton ---------- */
.ast-single-related-posts-container { max-width: var(--largeur-feuille); margin: 0 auto 2rem; background: transparent !important; padding: 0 !important; }
.ast-related-posts-title { color: var(--jaune) !important; font-size: 1.4rem !important; }
.ast-related-post .entry-title a, .ast-related-post a { color: var(--craie) !important; }
.ast-related-post .entry-meta, .ast-related-post .entry-meta * { color: var(--craie-2) !important; }

/* ---------- Pied de page ---------- */
.site-footer, .site-below-footer-wrap, .site-primary-footer-wrap, .site-above-footer-wrap,
.ast-builder-grid-row-container {
  background: transparent !important;
  border: 0 !important;
}
.site-footer, .site-footer * { font-family: var(--f-fiche); font-size: .85rem; color: var(--craie-2) !important; }
.site-footer a { color: var(--craie) !important; }

/* ---------- Retour en haut (bouton d'Astra) ---------- */
#ast-scroll-top {
  background: var(--beton) !important;
  color: var(--jaune) !important;
  border: 1px solid var(--jaune);
  border-radius: 0 !important;
  width: 44px; height: 44px; line-height: 42px;
}

/* ---------- Recherche, formulaires ---------- */
input[type="search"], input[type="text"], input[type="email"], textarea {
  background: rgba(236, 230, 216, .06) !important;
  color: var(--craie) !important;
  border: 1px solid rgba(236, 230, 216, .3) !important;
  border-radius: 0 !important;
}

/* Recherche de la page 404 : sur le papier, à l'encre. */
.pb-recherche { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: 1.4rem; }
.pb-recherche label { flex: 1 0 100%; font: 700 .85rem/1.2 var(--f-fiche); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); }
.pb-recherche input[type="search"] {
  flex: 1 1 14rem; min-width: 0; padding: .6rem .8rem; font-size: 1rem;
  background: #FBF7EC !important; color: var(--encre) !important; border: 1px solid var(--encre) !important;
}
.pb-recherche input[type="search"]::placeholder { color: var(--encre-2); opacity: 1; }
.pb-recherche button {
  padding: .6rem 1rem; font: 400 .9rem var(--f-titre); letter-spacing: .06em; cursor: pointer;
  background: transparent !important; color: var(--rouge-encre) !important; border: 1px solid var(--rouge-encre) !important; border-radius: 0 !important;
}
.pb-recherche :is(input, button):focus-visible { outline: 3px solid var(--rouge-encre); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pb-recherche button:hover { background: var(--rouge-encre) !important; color: #fff !important; }
}

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 520px) {
  .ast-separate-container .ast-article-single::before,
  body.page:not(.home) .site-main > article.page::before,
  .ast-separate-container .ast-article-post::before { border-width: 16px; border-image-width: 16px; }
}