/*
Theme Name: Jolivet Bois Negoce
Theme URI: https://jolivetboisnegoce.fr/
Author: Florian ROGER
Description: Magazine editorial maison. Carnet d entretien : bande photographique, grille a tete de rythme, bareme chiffre, accent olive.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: jbn
*/

/* =========================================================
   JETONS

   Palette choisie contre le reflexe beige, laiton et espresso
   que « bois » et « negoce » appellent (section 4.2 du skill),
   et contre les deux derniers sites du parc, tous deux froids.
   Accent chaud sur papier neutre, l inverse de maison-du-bois.

   Contrastes calcules avant ecriture, sur papier #F2F2F0 :
     --encre    #191A16  15,6:1  AAA
     --encre-2  #4F5347   7,0:1  AAA corps
     --olive    #454F1F   7,8:1  AAA
     --papier sur --olive         8,8:1  AAA
   Systeme de formes, une seule regle tenue partout :
     tout est a angle vif, rayon 0
     les MEDIAS portent un coin coupe de 14px en bas a droite
   ========================================================= */
:root {
  --papier:   #F2F2F0;
  --papier-2: #E6E6E1;
  --blanc:    #FCFCFB;
  --encre:    #191A16;
  --encre-2:  #4F5347;
  --olive:    #454F1F;
  --olive-vif:#5C6A2A;
  --olive-lit:#B6C47E;
  --olive-voile: rgba(69, 79, 31, .09);
  --filet:    rgba(25, 26, 22, .18);
  --filet-clair: rgba(252, 252, 251, .24);

  --coupe: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);

  --titre: 'Instrument Sans', 'Segoe UI', sans-serif;
  --texte: 'Spectral', Georgia, serif;

  /* gamme typographique fermee, dix pas, aucune taille hors gamme */
  --t0: .73rem;
  --t1: .82rem;
  --t2: .92rem;
  --t3: 1rem;
  --t4: 1.1rem;
  --t5: 1.3rem;
  --t6: 1.6rem;
  --t7: 2.05rem;
  --t8: 2.7rem;
  --t9: clamp(2.1rem, 4vw, 3.2rem);

  --laize-max: 1280px;
  --laize-cote: 30px;
  --souffle: 72px;
  --duree: .4s;
  --courbe: cubic-bezier(.2, .8, .2, 1);
}

/* =========================================================
   BASES
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: CLIP et non hidden : un hidden fait de l element un
   conteneur de defilement et casse le position: sticky de la barre. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t3);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

time, .reperes, .bareme td { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.laize {
  width: 100%;
  max-width: var(--laize-max);
  margin: 0 auto;
  padding-left: var(--laize-cote);
  padding-right: var(--laize-cote);
}

.a-part {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Revelations a la lecture. MOTION 3 : une entree, rien de plus. */
.leve {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--courbe), transform .6s var(--courbe);
}
.leve.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .leve { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Signature de forme : le coin coupe, sur les medias uniquement */
.coupe { clip-path: var(--coupe); }

/* =========================================================
   ELEMENTS INTERACTIFS
   ========================================================= */
.poignee {
  display: inline-flex; align-items: center;
  padding: 12px 24px;
  border: 1px solid var(--encre);
  font-family: var(--titre);
  font-size: var(--t2);
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe), transform .12s ease;
}
.poignee:hover { background: var(--encre); color: var(--papier); }
.poignee:active { transform: translateY(1px); }

.poignee-plein { background: var(--olive); border-color: var(--olive); color: var(--blanc); }
.poignee-plein:hover { background: var(--olive-vif); border-color: var(--olive-vif); color: var(--blanc); }

/* =========================================================
   FAITIERE (entete)
   ========================================================= */
.guet { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.faitiere {
  position: sticky; top: 0; z-index: 90;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree) var(--courbe);
}
.faitiere.assise { border-bottom-color: var(--filet); }

.faitiere-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px;
  height: 70px;
}

.enseigne { display: inline-flex; align-items: center; gap: 10px; }
.enseigne svg { display: block; }
.enseigne-nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: var(--t3);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.chemin { display: flex; align-items: center; gap: 2px; }
.chemin a {
  padding: 8px 14px;
  font-family: var(--titre);
  font-size: var(--t2);
  font-weight: 500;
  color: var(--encre-2);
  transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.chemin a:hover { color: var(--encre); background: var(--olive-voile); }
.chemin a:active { transform: translateY(1px); }
.chemin .chemin-contact { border: 1px solid var(--encre); color: var(--encre); margin-left: 10px; }
.chemin .chemin-contact:hover { background: var(--encre); color: var(--papier); }

.bouton-chemin, .chemin-clore {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--filet);
  color: var(--encre);
  cursor: pointer;
}

/* =========================================================
   ACCUEIL 1 : DEVANTURE
   Bande photographique pleine largeur, bord a bord, sans texte
   dessus. Le bloc titre est pose dessous, sur le papier.
   ========================================================= */
.devanture-vue { width: 100%; }
.devanture-vue img { width: 100%; height: clamp(240px, 30vw, 380px); object-fit: cover; }

.accroche { padding-top: 44px; padding-bottom: var(--souffle); }
.accroche-h {
  font-size: var(--t9);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.05;
  max-width: 20ch;
  text-wrap: pretty;
}
.accroche-h em {
  display: block;
  font-family: var(--texte);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t6);
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--olive);
  margin-top: 12px;
  padding-bottom: 3px;
}
.accroche-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
}
.accroche-chapo { margin: 0; max-width: 52ch; font-size: var(--t4); color: var(--encre-2); }
.accroche-actes { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================
   ACCUEIL 2 : LINTEAU (une phrase sur fond encre)
   ========================================================= */
.linteau { background: var(--encre); color: var(--blanc); padding-top: 52px; padding-bottom: 52px; }
.linteau-p {
  margin: 0; max-width: 66ch;
  font-family: var(--titre);
  font-weight: 500;
  font-size: var(--t6);
  line-height: 1.34;
  letter-spacing: -.012em;
}
.linteau-p span { color: var(--olive-lit); }

/* =========================================================
   ACCUEIL 3 : RELEVE
   Grille de trois colonnes, avec une fiche large en tete de
   rythme toutes les cinq. Aucune rangee de cartes egales.
   ========================================================= */
.releve { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.releve-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 34px;
}
.releve-tete h2 { font-size: var(--t7); letter-spacing: -.02em; }
.releve-lien { font-family: var(--titre); font-size: var(--t2); color: var(--olive); }
.releve-lien:hover { text-decoration: underline; text-underline-offset: 4px; }

.releve-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }

.notice { display: block; }
.notice-vue { overflow: hidden; background: var(--papier-2); margin-bottom: 14px; }
.notice-vue img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .9s var(--courbe);
}
.notice:hover .notice-vue img { transform: scale(1.035); }
.notice-h {
  font-family: var(--titre);
  font-size: var(--t4);
  font-weight: 600;
  letter-spacing: -.015em;
  transition: color var(--duree) var(--courbe);
}
.notice:hover .notice-h { color: var(--olive); }
.reperes {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 9px;
  font-family: var(--titre);
  font-size: var(--t1);
  color: var(--encre-2);
}
.reperes b { font-weight: 500; color: var(--olive); }

/* La tete de rythme : premiere fiche de chaque groupe de cinq */
.notice-tete { grid-column: span 2; }
.notice-tete .notice-vue img { aspect-ratio: 16 / 7; }
.notice-tete .notice-h { font-size: var(--t6); letter-spacing: -.02em; }

/* =========================================================
   ACCUEIL 4 : CONSIGNES (liste en vis-a-vis)
   ========================================================= */
.consignes { background: var(--papier-2); padding-top: var(--souffle); padding-bottom: var(--souffle); }
.consignes h2 { font-size: var(--t7); letter-spacing: -.02em; max-width: 22ch; margin-bottom: 34px; }
.consignes-item {
  display: grid; grid-template-columns: 290px 1fr; gap: 34px;
  padding-top: 22px; padding-bottom: 22px;
  border-bottom: 1px solid var(--filet);
}
.consignes-item h3 { font-size: var(--t5); font-weight: 600; letter-spacing: -.015em; }
.consignes-item p { margin: 0; color: var(--encre-2); max-width: 70ch; }

/* =========================================================
   ACCUEIL 5 : BAREME (tableau chiffre)
   ========================================================= */
.bareme { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.bareme h2 { font-size: var(--t7); letter-spacing: -.02em; margin-bottom: 10px; }
.bareme-note { color: var(--encre-2); max-width: 62ch; margin-bottom: 26px; }
.bareme-cadre { overflow-x: auto; }
.bareme table { width: 100%; border-collapse: collapse; font-size: var(--t2); min-width: 620px; }
.bareme th {
  text-align: left; padding: 12px 14px;
  font-family: var(--titre); font-weight: 600;
  background: var(--encre); color: var(--blanc);
}
.bareme td { padding: 13px 14px; border-bottom: 1px solid var(--filet); }
.bareme tr:last-child td { border-bottom: 0; }
.bareme td:first-child { font-family: var(--titre); font-weight: 500; }

/* =========================================================
   ACCUEIL 6 : CHANTIER (diptyque de deux photos inegales)
   ========================================================= */
.chantier { padding-bottom: var(--souffle); }
.chantier-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
.chantier-vue img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.chantier-vue:last-child img { aspect-ratio: 4 / 3; }
.chantier-legende { margin: 12px 0 0; font-size: var(--t2); color: var(--encre-2); max-width: 54ch; }

/* =========================================================
   ACCUEIL 7 : COMPAGNON (portrait plus prose)
   ========================================================= */
.compagnon { background: var(--encre); color: var(--blanc); padding-top: var(--souffle); padding-bottom: var(--souffle); }
.compagnon-grille { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.compagnon-vue img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.compagnon-nom { font-size: var(--t7); letter-spacing: -.02em; }
.compagnon-role { margin: 7px 0 22px; color: var(--olive-lit); font-family: var(--titre); font-size: var(--t2); }
.compagnon-mot { color: rgba(252, 252, 251, .85); max-width: 72ch; }
.compagnon-mot strong { color: var(--blanc); font-weight: 600; }
.compagnon-mot ul { margin: 0 0 1.1em; padding-left: 19px; }
.compagnon-mot li { margin-bottom: .45em; }

/* =========================================================
   SOCLE (pied de page)
   ========================================================= */
.socle { background: var(--papier-2); border-top: 1px solid var(--filet); padding-top: 58px; padding-bottom: 30px; }
.socle-grille { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 44px; }
.socle h2 {
  font-family: var(--titre);
  font-size: var(--t1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 15px;
}
.socle-mot { color: var(--encre-2); font-size: var(--t2); max-width: 40ch; margin-top: 14px; }
.socle-liste { list-style: none; margin: 0; padding: 0; }
.socle-liste li { margin-bottom: 9px; }
.socle-liste a { font-size: var(--t2); color: var(--encre-2); transition: color var(--duree) var(--courbe); }
.socle-liste a:hover { color: var(--olive); }
.socle-recent { display: block; margin-bottom: 14px; }
.socle-recent span { display: block; font-family: var(--titre); font-size: var(--t2); font-weight: 500; line-height: 1.35; }
.socle-recent time { display: block; font-size: var(--t0); color: var(--encre-2); margin-top: 2px; }
.socle-bas {
  margin-top: 42px; padding-top: 20px;
  border-top: 1px solid var(--filet);
  font-family: var(--titre); font-size: var(--t1); color: var(--encre-2);
}

/* =========================================================
   TRACE (fil d ariane)
   ========================================================= */
.trace { font-family: var(--titre); font-size: var(--t1); color: var(--encre-2); padding-top: 22px; }
.trace a:hover { color: var(--olive); }
.trace span { padding: 0 6px; }

/* =========================================================
   FEUILLET (article)
   Le corps fait toujours la largeur du conteneur, exactement
   comme l image mise en avant. Aucun plafond de mesure.
   ========================================================= */
.feuillet { padding-bottom: var(--souffle); }
.feuillet-tete { padding-top: 22px; padding-bottom: 30px; }
.feuillet-rubrique {
  display: inline-block;
  font-family: var(--titre);
  font-size: var(--t1); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 14px;
}
.feuillet-h { font-size: var(--t8); letter-spacing: -.025em; max-width: 24ch; }
.feuillet-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 18px;
  font-family: var(--titre); font-size: var(--t1); color: var(--encre-2);
}
.feuillet-meta .kk-star-ratings { margin: 0 !important; padding: 0 !important; }
.feuillet-vue { margin-bottom: 34px; background: var(--papier-2); }
.feuillet-vue img { width: 100%; height: clamp(240px, 38vw, 500px); object-fit: cover; }

.feuillet-corps { font-size: var(--t4); }
.feuillet-corps h2 { font-size: var(--t7); letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.feuillet-corps h3 { font-size: var(--t5); letter-spacing: -.015em; margin: 1.4em 0 .4em; }
.feuillet-corps ul, .feuillet-corps ol { padding-left: 20px; margin-bottom: 1.1em; }
.feuillet-corps li { margin-bottom: .45em; }
.feuillet-corps a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.feuillet-corps img { margin: 1.5em 0; }
.feuillet-corps blockquote {
  margin: 1.7em 0; padding-left: 24px;
  border-left: 3px solid var(--olive);
  font-family: var(--titre); font-weight: 500; font-size: var(--t5);
  letter-spacing: -.012em; line-height: 1.38;
}
.feuillet-corps table { width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: var(--t2); }
.feuillet-corps th, .feuillet-corps td { text-align: left; padding: 12px 13px; border-bottom: 1px solid var(--filet); }
.feuillet-corps th { font-family: var(--titre); font-weight: 600; background: var(--papier-2); }

.feuillet-auteur {
  display: grid; grid-template-columns: 88px 1fr; gap: 20px;
  margin-top: 50px; padding-top: 26px; padding-bottom: 26px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.feuillet-auteur img { width: 88px; height: 88px; object-fit: cover; }
.feuillet-auteur h2 { font-size: var(--t5); letter-spacing: -.015em; margin-bottom: 7px; }
.feuillet-auteur p { margin: 0; font-size: var(--t2); color: var(--encre-2); }

.feuillet-suite { margin-top: 56px; }
.feuillet-suite h2 { font-size: var(--t7); letter-spacing: -.02em; margin-bottom: 28px; }
.feuillet-suite-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.feuillet-suite h3 { font-family: var(--titre); font-size: var(--t4); font-weight: 600; letter-spacing: -.012em; margin-top: 12px; }
.feuillet-suite img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feuillet-suite a:hover h3 { color: var(--olive); }

.feuillet-corps .jbn-aussi {
  margin: 1.9em 0;
  padding: 16px 0 16px 22px;
  border-left: 3px solid var(--olive);
  background: var(--olive-voile);
}
.feuillet-corps .jbn-aussi b {
  display: block;
  font-family: var(--titre);
  font-size: var(--t1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--olive); margin-bottom: 5px;
}
.feuillet-corps .jbn-aussi a { font-family: var(--titre); font-weight: 600; font-size: var(--t4); text-decoration: none; }
.feuillet-corps .jbn-aussi a:hover { text-decoration: underline; }

/* =========================================================
   BLOCS D ARTICLE GENERES PAR LA CHAINE DE CONTENU

   La chaine change de prefixe au fil de ses versions : qfd, czm,
   mjd, xnr, dbr. Une charte qui nomme les prefixes est perimee au
   prochain changement et les pictogrammes disparaissent en
   silence. On selectionne par la FIN du nom de classe.

   Ces blocs arrivent avec leur CSS en ligne, posee apres la
   feuille du theme : on qualifie par .feuillet-corps, ce qui
   remonte la specificite sans !important. Les icones sont des
   masques, elles heritent donc de l accent du site. Le picto est
   centre sur la puce, jamais cale en haut : la chaine pose un
   padding vertical sur ses li.
   ========================================================= */
.feuillet-corps [class$="-key"] ul { padding-left: 0; }
.feuillet-corps [class$="-key"] li { position: relative; list-style: none; padding-left: 34px; }
.feuillet-corps [class$="-key"] li::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--olive); opacity: .13;
}
.feuillet-corps [class$="-key"] li::after {
  content: ''; position: absolute; left: 6.5px; top: 50%; margin-top: -5px;
  width: 5px; height: 9px;
  border: 0; border-right: 2px solid var(--olive); border-bottom: 2px solid var(--olive);
  transform: rotate(45deg);
}

.feuillet-corps [class$="-badge"] { display: inline-flex; align-items: center; gap: 6px; }
.feuillet-corps [class$="-badge"]::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.feuillet-corps [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.feuillet-corps [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.feuillet-corps [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--olive); opacity: .85;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.feuillet-corps [class$="-foot"] span:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
}
.feuillet-corps [class$="-foot"] span:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}
.feuillet-corps [class$="-foot"] span:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
}

.feuillet-corps #ez-toc-container { background: var(--papier-2); border: 0; box-shadow: none; }

/* =========================================================
   CHAPITRE (archive)
   ========================================================= */
.chapitre-tete { position: relative; overflow: hidden; background: var(--encre); color: var(--blanc); }
.chapitre-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.chapitre-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 26, 22, .70), rgba(25, 26, 22, .84)); }
.chapitre-mot { position: relative; z-index: 1; padding-top: 82px; padding-bottom: 66px; }
.chapitre-mot h1 { font-size: var(--t8); letter-spacing: -.025em; }
.chapitre-compte { margin-top: 12px; font-family: var(--titre); font-size: var(--t2); color: var(--olive-lit); }
.chapitre-desc { margin-top: 18px; max-width: 64ch; color: rgba(252, 252, 251, .88); }
.chapitre-desc p { margin-bottom: .7em; color: inherit; }
.chapitre-liste { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.chapitre-seo { padding-bottom: var(--souffle); color: var(--encre-2); }
.chapitre-seo h2 { font-size: var(--t6); letter-spacing: -.018em; color: var(--encre); margin-bottom: 14px; }
.chapitre-seo p { max-width: 80ch; }

/* =========================================================
   PAGES STATIQUES
   ========================================================= */
.page-plate { padding-bottom: var(--souffle); }
.page-tete { padding-top: 26px; padding-bottom: 32px; border-bottom: 1px solid var(--filet); margin-bottom: 40px; }
.page-tete h1 { font-size: var(--t8); letter-spacing: -.025em; }
.page-corps { font-size: var(--t4); max-width: 84ch; }
.page-corps h2 { font-size: var(--t6); letter-spacing: -.018em; margin: 1.7em 0 .5em; }
.page-corps a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.page-corps ul { padding-left: 20px; }

.plan-bloc { margin-bottom: 42px; }
.plan-bloc h2 { font-size: var(--t6); letter-spacing: -.018em; margin-bottom: 16px; }
.plan-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 42px; }
.plan-liste li { margin-bottom: 8px; break-inside: avoid; }
.plan-liste a { color: var(--encre-2); }
.plan-liste a:hover { color: var(--olive); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; align-items: start; }
.contact-mot h2 { font-size: var(--t5); letter-spacing: -.015em; margin-bottom: 9px; }
.contact-mot p { color: var(--encre-2); max-width: 46ch; }
.contact-bloc { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--filet); }
.contact-mot a { color: var(--olive); }

.formulaire { background: var(--papier-2); padding: 30px; }
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.wpcf7-form br { display: none; }
.wpcf7-form label { font-family: var(--titre); font-size: var(--t1); font-weight: 500; color: var(--encre-2); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t2);
}
.wpcf7-form textarea { min-height: 165px; resize: vertical; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--encre-2); opacity: 1; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: 2px solid var(--olive); outline-offset: 1px; border-color: var(--olive); }
.wpcf7-form input.wpcf7-submit {
  width: auto;
  padding: 13px 30px;
  background: var(--olive);
  border: 1px solid var(--olive);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 500;
  font-size: var(--t2);
  cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--olive-vif); }
.wpcf7-form input.wpcf7-submit:active { transform: translateY(1px); }
.wpcf7-not-valid-tip { font-size: var(--t1); color: #9B2418; }
.wpcf7-response-output { border: 1px solid var(--filet); padding: 12px 15px; font-size: var(--t2); }

/* =========================================================
   IMPASSE (404) ET ETAT VIDE
   ========================================================= */
.impasse { padding-top: 100px; padding-bottom: var(--souffle); }
.impasse h1 { font-size: var(--t8); letter-spacing: -.025em; max-width: 20ch; }
.impasse p { margin-top: 16px; color: var(--encre-2); max-width: 58ch; font-size: var(--t4); }
.impasse-actes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rien { padding-top: 50px; padding-bottom: 50px; color: var(--encre-2); font-size: var(--t4); }

/* =========================================================
   EFFONDREMENT MOBILE, declare palier par palier
   ========================================================= */
@media (max-width: 1040px) {
  :root { --souffle: 58px; }
  .releve-grille { grid-template-columns: repeat(2, 1fr); }
  .notice-tete { grid-column: span 2; }
  .consignes-item { grid-template-columns: 200px 1fr; gap: 24px; }
  .chantier-grille { grid-template-columns: 1fr; }
  .compagnon-grille { grid-template-columns: 240px 1fr; gap: 34px; }
  .socle-grille { grid-template-columns: 1fr 1fr; gap: 36px; }
  .contact-grille { grid-template-columns: 1fr; gap: 36px; }
  .feuillet-suite-cols { grid-template-columns: repeat(2, 1fr); }
  .feuillet-suite-cols > *:last-child { display: none; }
}

@media (max-width: 760px) {
  :root { --laize-cote: 20px; --souffle: 48px; }

  /* Aucun backdrop-filter sur la faitiere en mobile : il cree un
     contexte d empilement et le menu plein ecran passe dessous. */
  .faitiere { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .faitiere-in { height: 62px; }

  .bouton-chemin { display: inline-flex; }
  .chemin-clore { display: inline-flex; position: absolute; top: 10px; right: 20px; }

  .chemin {
    position: fixed; inset: 0; z-index: 200;
    display: none;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 4px;
    padding: 0 30px;
    background: var(--papier);
  }
  .chemin.ouvert { display: flex; }
  .chemin a,
  .category .faitiere .chemin a,
  .single .faitiere .chemin a,
  .page .faitiere .chemin a {
    color: var(--encre) !important;
    font-size: var(--t6);
    font-weight: 600;
    letter-spacing: -.018em;
    padding: 9px 0;
  }
  .chemin .chemin-contact { border: 0; padding: 9px 0; margin-left: 0; }
  .chemin .chemin-contact:hover { background: transparent; color: var(--olive) !important; }

  .accroche { padding-top: 30px; }
  .accroche-bas { flex-direction: column; align-items: flex-start; gap: 18px; }

  .releve-grille { grid-template-columns: 1fr; gap: 34px; }
  .notice-tete { grid-column: span 1; }
  .notice-tete .notice-vue img { aspect-ratio: 3 / 2; }
  .notice-tete .notice-h { font-size: var(--t4); }

  .consignes-item { grid-template-columns: 1fr; gap: 8px; }
  .compagnon-grille { grid-template-columns: 1fr; gap: 24px; }
  .compagnon-vue { max-width: 240px; }
  .socle-grille { grid-template-columns: 1fr; gap: 30px; }

  .feuillet-h, .chapitre-mot h1, .page-tete h1, .impasse h1 { font-size: var(--t7); }
  .feuillet-auteur { grid-template-columns: 1fr; }
  .feuillet-suite-cols { grid-template-columns: 1fr; }
  .feuillet-suite-cols > *:last-child { display: block; }

  .plan-liste { columns: 1; }
  .formulaire { padding: 22px 18px; }
  .chapitre-mot { padding-top: 58px; padding-bottom: 48px; }
}

/* Coordonnees de l editeur, servies en image (mentions legales) */
.bordereau-signataires { display: block; margin-top: 1rem; margin-bottom: 1.25rem; }
.bordereau-signataires img { display: block; max-width: 100%; height: auto; }