/*
Theme Name: DF Events
Theme URI: https://dfevents.fr/
Author: Florian ROGER
Description: Magazine editorial maison et DIY. Atelier de fabrication : chevauchements, pele-mele a hauteurs reelles, medias desaxes, animations pilotees par le defilement en CSS natif.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: dfe
*/

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

   Palette choisie contre deux reflexes : le pastel et le dore
   que « deco de fete » appelle, et le beige plus laiton que
   « atelier » appelle, tous deux bannis par la section 4.2.

   Contrastes calcules avant ecriture, sur papier #F7F7F5 :
     --encre    #141613  17,0:1  AAA
     --encre-2  #4C524C   7,5:1  AAA corps
     --bleu     #0D5B57   7,4:1  AAA
     --blanc sur --bleu           7,9:1  AAA
   Systeme de formes, une seule regle tenue partout :
     aucun rayon nulle part, tout est a angle vif
     la signature n est pas un rayon mais le DESAXEMENT
     des medias, 1,2 degre, alterne d un bloc a l autre
   ========================================================= */
:root {
  --papier:   #F7F7F5;
  --papier-2: #EBEBE7;
  --blanc:    #FDFDFC;
  --encre:    #141613;
  --encre-2:  #4C524C;
  --bleu:     #0D5B57;
  --bleu-vif: #12746E;
  --bleu-lit: #8FCAC5;
  --bleu-voile: rgba(13, 91, 87, .08);
  --filet:    rgba(20, 22, 19, .16);
  --filet-clair: rgba(253, 253, 252, .26);

  --gite: 1.2deg;

  --titre: 'Young Serif', Georgia, serif;
  --texte: 'Literata', Georgia, serif;

  /* gamme typographique fermee, dix pas, aucune taille hors gamme */
  --t0: .74rem;
  --t1: .83rem;
  --t2: .93rem;
  --t3: 1rem;
  --t4: 1.14rem;
  --t5: 1.4rem;
  --t6: 1.8rem;
  --t7: 2.4rem;
  --t8: 3.1rem;
  --t9: clamp(2.6rem, 6.4vw, 5rem);

  --travee-max: 1340px;
  --travee-cote: 34px;
  --souffle: 104px;
  --duree: .45s;
  --courbe: cubic-bezier(.19, 1, .22, 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.66;
  -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: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

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

time, .mention { font-variant-numeric: tabular-nums; }

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

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

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

/* Signature de forme : le desaxement, sur les medias uniquement */
.gite      { transform: rotate(calc(var(--gite) * -1)); }
.gite-inv  { transform: rotate(var(--gite)); }

/* =========================================================
   MOUVEMENT

   MOTION 6. Les revelations sont pilotees par le defilement en
   CSS natif (animation-timeline: view()), ce qu aucun autre
   theme du parc ne fait : pas de JavaScript sur le trajet, pas
   d ecouteur, pas de recalcul. Repli sur l observateur pour les
   navigateurs qui ne gerent pas encore le timeline de vue.
   ========================================================= */
@keyframes dfe-pousse {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.pousse { opacity: 0; }
.pousse.vu { opacity: 1; animation: dfe-pousse .75s var(--courbe) both; }

@supports (animation-timeline: view()) {
  .pousse {
    opacity: 1;
    animation: dfe-pousse linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
}

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

/* =========================================================
   ELEMENTS INTERACTIFS
   ========================================================= */
.taquet {
  display: inline-flex; align-items: center;
  padding: 14px 28px;
  border: 1.5px solid var(--encre);
  font-family: var(--texte);
  font-size: var(--t2);
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe), transform .14s ease;
}
.taquet:hover { background: var(--encre); color: var(--papier); }
.taquet:active { transform: translateY(2px); }

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

.taquet-clair { border-color: var(--filet-clair); color: var(--blanc); }
.taquet-clair:hover { background: var(--blanc); color: var(--encre); }

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

.credence {
  position: sticky; top: 0; z-index: 90;
  background: var(--papier);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--duree) var(--courbe);
}
.credence.posee { border-bottom-color: var(--encre); }

.credence-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.marque-dfe { display: inline-flex; align-items: center; gap: 11px; }
.marque-dfe svg { display: block; }
.marque-dfe-nom {
  font-family: var(--titre);
  font-size: var(--t5);
  letter-spacing: -.015em;
}

.reglet { display: flex; align-items: center; gap: 6px; }
.reglet a {
  padding: 9px 14px;
  font-size: var(--t2);
  font-weight: 600;
  color: var(--encre-2);
  transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.reglet a:hover { color: var(--encre); background: var(--bleu-voile); }
.reglet a:active { transform: translateY(1px); }
.reglet .reglet-contact { border: 1.5px solid var(--encre); color: var(--encre); margin-left: 10px; padding: 9px 20px; }
.reglet .reglet-contact:hover { background: var(--encre); color: var(--papier); }

.taquet-menu, .reglet-clore {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid var(--encre);
  color: var(--encre);
  cursor: pointer;
}

/* =========================================================
   ACCUEIL 1 : ETABLI (hero en chevauchement)
   Le bloc titre mord sur la photo, qui saigne hors du cadre a
   droite. Aucun autre theme du parc n a de chevauchement.
   ========================================================= */
.etabli { position: relative; padding-top: 56px; padding-bottom: 0; }
.etabli-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: end; }

.etabli-mot { position: relative; z-index: 2; }
.etabli-h {
  font-size: var(--t9);
  letter-spacing: -.032em;
  line-height: .98;
  max-width: 15ch;
}
.etabli-h em {
  display: block;
  font-family: var(--texte);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t5);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--bleu);
  margin-top: 18px;
  padding-bottom: 4px;
}
.etabli-chapo { margin-top: 22px; max-width: 40ch; font-size: var(--t4); color: var(--encre-2); }
.etabli-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Le chevauchement : la photo saigne hors du cadre a droite et
   descend sur la bande suivante. C est le seul endroit du parc ou
   deux sections se croisent. */
.etabli-vue {
  position: relative;
  margin-left: -60px;
  margin-right: calc(var(--travee-cote) * -1 - 40px);
  margin-bottom: -96px;
  z-index: 3;
}
.etabli-vue img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.etabli-mot { padding-bottom: 74px; }

/* =========================================================
   ACCUEIL 2 : EXERGUE (une phrase, pleine largeur, sur accent)
   ========================================================= */
.exergue { background: var(--bleu); color: var(--blanc); padding-top: 150px; padding-bottom: 78px; }
.exergue-p {
  margin: 0;
  max-width: 24ch;
  font-family: var(--titre);
  font-size: var(--t8);
  line-height: 1.08;
  letter-spacing: -.024em;
}
.exergue-note { margin: 22px 0 0; max-width: 52ch; color: var(--bleu-lit); font-size: var(--t3); }

/* =========================================================
   ACCUEIL 3 : PELE-MELE (masonry a hauteurs reelles)
   Aucune ligne alignee, contrairement aux grilles du parc.
   ========================================================= */
.pele { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.pele-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1.5px solid var(--encre);
  margin-bottom: 40px;
}
.pele-tete h2 { font-size: var(--t7); letter-spacing: -.022em; }
.pele-lien { font-size: var(--t2); font-weight: 600; color: var(--bleu); }
.pele-lien:hover { text-decoration: underline; text-underline-offset: 4px; }

.pele-cols { columns: 3; column-gap: 34px; }
.vignette { display: block; break-inside: avoid; margin-bottom: 42px; }
.vignette-vue { overflow: hidden; background: var(--papier-2); margin-bottom: 14px; }
.vignette-vue img { width: 100%; height: auto; transition: transform 1s var(--courbe); }
.vignette:hover .vignette-vue img { transform: scale(1.04); }
.vignette-h {
  font-family: var(--titre);
  font-size: var(--t5);
  letter-spacing: -.016em;
  line-height: 1.14;
  transition: color var(--duree) var(--courbe);
}
.vignette:hover .vignette-h { color: var(--bleu); }
.mention {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px;
  font-size: var(--t1);
  color: var(--encre-2);
}
.mention b { font-weight: 600; color: var(--bleu); }

/* =========================================================
   ACCUEIL 4 : FRISE (rail horizontal, un seul de la page)
   ========================================================= */
.frise { padding-bottom: var(--souffle); }
.frise h2 { font-size: var(--t7); letter-spacing: -.022em; margin-bottom: 30px; max-width: 24ch; }
.frise-rail {
  display: flex; gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
}
.frise-pas { flex: 0 0 min(380px, 78vw); scroll-snap-align: start; }
.frise-pas h3 { font-family: var(--titre); font-size: var(--t5); letter-spacing: -.016em; margin: 16px 0 8px; }
.frise-pas p { margin: 0; color: var(--encre-2); }
.frise-pas img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* =========================================================
   ACCUEIL 5 : MOSAIQUE (planche de vignettes, bord a bord)
   ========================================================= */
.mosaique { display: grid; grid-template-columns: repeat(5, 1fr); }
.mosaique img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* =========================================================
   ACCUEIL 6 : QUESTIONS (deux colonnes)
   ========================================================= */
.questions { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.questions h2 { font-size: var(--t7); letter-spacing: -.022em; margin-bottom: 34px; max-width: 22ch; }
.questions-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; }
.questions-item h3 { font-family: var(--titre); font-size: var(--t5); letter-spacing: -.016em; margin-bottom: 8px; }
.questions-item p { margin: 0; color: var(--encre-2); }

/* =========================================================
   ACCUEIL 7 : ARTISAN (persona en chevauchement)
   ========================================================= */
.artisan { padding-bottom: var(--souffle); }
.artisan-cadre { position: relative; background: var(--papier-2); }
.artisan-grille { display: grid; grid-template-columns: 320px 1fr; gap: 46px; align-items: center; padding: 52px 46px 52px 0; }
.artisan-vue { margin: -34px 0 -34px 46px; }
.artisan-vue img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.artisan-nom { font-size: var(--t7); letter-spacing: -.022em; }
.artisan-role { margin: 8px 0 22px; color: var(--bleu); font-size: var(--t2); font-weight: 600; }
.artisan-mot { color: var(--encre-2); max-width: 66ch; }
.artisan-mot strong { color: var(--encre); font-weight: 600; }
.artisan-mot ul { margin: 0 0 1.1em; padding-left: 20px; }
.artisan-mot li { margin-bottom: .45em; }

/* =========================================================
   ACCUEIL 8 : ACCES (entree de rubrique, pleine largeur)
   ========================================================= */
.acces { border-top: 1.5px solid var(--encre); padding-top: 46px; padding-bottom: var(--souffle); }
.acces-h { font-size: var(--t8); letter-spacing: -.026em; max-width: 18ch; }
.acces p { margin-top: 16px; max-width: 58ch; color: var(--encre-2); font-size: var(--t4); }
.acces-actes { margin-top: 26px; }

/* =========================================================
   ASSISE (pied de page)
   ========================================================= */
.assise { background: var(--encre); color: var(--blanc); padding-top: 66px; padding-bottom: 32px; }
.assise-grille { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 46px; }
.assise .marque-dfe-nom { color: var(--blanc); }
.assise h2 {
  font-family: var(--texte);
  font-size: var(--t1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu-lit);
  margin-bottom: 16px;
}
.assise-mot { color: rgba(253, 253, 252, .74); font-size: var(--t2); max-width: 40ch; margin-top: 16px; }
.assise-liste { list-style: none; margin: 0; padding: 0; }
.assise-liste li { margin-bottom: 10px; }
.assise-liste a { font-size: var(--t2); color: rgba(253, 253, 252, .82); transition: color var(--duree) var(--courbe); }
.assise-liste a:hover { color: var(--bleu-lit); }
.assise-recent { display: block; margin-bottom: 15px; }
.assise-recent span { display: block; font-size: var(--t2); font-weight: 600; line-height: 1.36; }
.assise-recent time { display: block; font-size: var(--t0); color: rgba(253, 253, 252, .6); margin-top: 3px; }
.assise-bas {
  margin-top: 46px; padding-top: 20px;
  border-top: 1px solid var(--filet-clair);
  font-size: var(--t1); color: rgba(253, 253, 252, .66);
}

/* =========================================================
   SENTE (fil d ariane)
   ========================================================= */
.sente { font-size: var(--t1); color: var(--encre-2); padding-top: 24px; }
.sente a:hover { color: var(--bleu); }
.sente span { padding: 0 7px; }

/* =========================================================
   CAHIER (article)
   Le corps fait toujours la largeur du conteneur, exactement
   comme l image mise en avant. Aucun plafond de mesure.
   ========================================================= */
.cahier { padding-bottom: var(--souffle); }
.cahier-tete { padding-top: 24px; padding-bottom: 32px; }
.cahier-rubrique {
  display: inline-block;
  font-size: var(--t1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 16px;
}
.cahier-h { font-size: var(--t8); letter-spacing: -.026em; max-width: 22ch; }
.cahier-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 20px;
  font-size: var(--t1); color: var(--encre-2);
}
.cahier-meta .kk-star-ratings { margin: 0 !important; padding: 0 !important; }
.cahier-vue { margin-bottom: 38px; background: var(--papier-2); }
.cahier-vue img { width: 100%; height: clamp(250px, 40vw, 520px); object-fit: cover; }

.cahier-corps { font-size: var(--t4); }
.cahier-corps h2 { font-size: var(--t7); letter-spacing: -.022em; margin: 1.8em 0 .5em; }
.cahier-corps h3 { font-size: var(--t5); letter-spacing: -.016em; margin: 1.4em 0 .4em; }
.cahier-corps ul, .cahier-corps ol { padding-left: 21px; margin-bottom: 1.1em; }
.cahier-corps li { margin-bottom: .45em; }
.cahier-corps a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.cahier-corps img { margin: 1.6em 0; }
.cahier-corps blockquote {
  margin: 1.8em 0; padding-left: 26px;
  border-left: 3px solid var(--bleu);
  font-family: var(--titre); font-size: var(--t6);
  letter-spacing: -.018em; line-height: 1.22;
}
.cahier-corps table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: var(--t2); }
.cahier-corps th, .cahier-corps td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--filet); }
.cahier-corps th { font-weight: 700; background: var(--papier-2); }

.cahier-auteur {
  display: grid; grid-template-columns: 92px 1fr; gap: 22px;
  margin-top: 54px; padding-top: 28px; padding-bottom: 28px;
  border-top: 1.5px solid var(--encre);
  border-bottom: 1px solid var(--filet);
}
.cahier-auteur img { width: 92px; height: 92px; object-fit: cover; }
.cahier-auteur h2 { font-size: var(--t5); letter-spacing: -.016em; margin-bottom: 7px; }
.cahier-auteur p { margin: 0; font-size: var(--t2); color: var(--encre-2); }

.cahier-suite { margin-top: 58px; }
.cahier-suite h2 { font-size: var(--t7); letter-spacing: -.022em; margin-bottom: 30px; }
.cahier-suite-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cahier-suite h3 { font-family: var(--titre); font-size: var(--t4); letter-spacing: -.014em; margin-top: 13px; }
.cahier-suite img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cahier-suite a:hover h3 { color: var(--bleu); }

.cahier-corps .dfe-aussi {
  margin: 2em 0;
  padding: 18px 0 18px 24px;
  border-left: 3px solid var(--bleu);
  background: var(--bleu-voile);
}
.cahier-corps .dfe-aussi b {
  display: block;
  font-size: var(--t1); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--bleu); margin-bottom: 6px;
}
.cahier-corps .dfe-aussi a { font-family: var(--titre); font-size: var(--t5); text-decoration: none; }
.cahier-corps .dfe-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, hqv. On selectionne donc par la FIN du nom de
   classe, jamais sur un prefixe. Et tout selecteur par suffixe
   est qualifie par .cahier-corps : sans cela il attraperait les
   classes du theme qui finissent pareil, ce qui a fait
   disparaitre la navigation d un site du parc.

   Le pictogramme est centre sur le point a savoir, jamais cale
   en haut : la chaine pose un padding vertical sur ses li.
   ========================================================= */
.cahier-corps [class$="-key"] ul { padding-left: 0; }
.cahier-corps [class$="-key"] li { position: relative; list-style: none; padding-left: 34px; }
.cahier-corps [class$="-key"] li::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--bleu); opacity: .14;
}
.cahier-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(--bleu); border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg);
}

.cahier-corps [class$="-badge"] { display: inline-flex; align-items: center; gap: 6px; }
.cahier-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;
}

.cahier-corps [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 21px; align-items: center; }
.cahier-corps [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.cahier-corps [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--bleu); 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;
}
.cahier-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");
}
.cahier-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");
}
.cahier-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");
}

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

/* =========================================================
   RAYONNAGE (archive)
   ========================================================= */
.rayonnage-tete { position: relative; overflow: hidden; background: var(--encre); color: var(--blanc); }
.rayonnage-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rayonnage-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 19, .68), rgba(20, 22, 19, .84)); }
.rayonnage-mot { position: relative; z-index: 1; padding-top: 92px; padding-bottom: 74px; }
.rayonnage-mot h1 { font-size: var(--t8); letter-spacing: -.026em; }
.rayonnage-compte { margin-top: 14px; font-size: var(--t2); color: var(--bleu-lit); }
.rayonnage-desc { margin-top: 18px; max-width: 62ch; color: rgba(253, 253, 252, .88); }
.rayonnage-desc p { margin-bottom: .7em; color: inherit; }
.rayonnage-liste { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.rayonnage-seo { padding-bottom: var(--souffle); color: var(--encre-2); }
.rayonnage-seo h2 { font-size: var(--t6); letter-spacing: -.018em; color: var(--encre); margin-bottom: 15px; }
.rayonnage-seo p { max-width: 80ch; }

/* =========================================================
   PAGES STATIQUES
   ========================================================= */
.page-nue { padding-bottom: var(--souffle); }
.page-tete { padding-top: 28px; padding-bottom: 34px; border-bottom: 1.5px solid var(--encre); margin-bottom: 42px; }
.page-tete h1 { font-size: var(--t8); letter-spacing: -.026em; }
.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(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.page-corps ul { padding-left: 21px; }

.plan-part { margin-bottom: 44px; }
.plan-part h2 { font-size: var(--t6); letter-spacing: -.018em; margin-bottom: 17px; }
.plan-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.plan-liste li { margin-bottom: 9px; break-inside: avoid; }
.plan-liste a { color: var(--encre-2); }
.plan-liste a:hover { color: var(--bleu); }

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

.formulaire { background: var(--papier-2); padding: 32px; }
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 17px; }
.wpcf7-form br { display: none; }
.wpcf7-form label { font-size: var(--t1); font-weight: 600; color: var(--encre-2); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t2);
}
.wpcf7-form textarea { min-height: 170px; 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(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.wpcf7-form input.wpcf7-submit {
  width: auto;
  padding: 14px 32px;
  background: var(--bleu);
  border: 1.5px solid var(--bleu);
  color: var(--blanc);
  font-family: var(--texte);
  font-weight: 600;
  font-size: var(--t2);
  cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--bleu-vif); }
.wpcf7-form input.wpcf7-submit:active { transform: translateY(2px); }
.wpcf7-not-valid-tip { font-size: var(--t1); color: #98241A; }
.wpcf7-response-output { border: 1px solid var(--filet); padding: 13px 16px; font-size: var(--t2); }

/* =========================================================
   SANS ISSUE (404) ET ETAT VIDE
   ========================================================= */
.sans-issue { padding-top: 110px; padding-bottom: var(--souffle); }
.sans-issue h1 { font-size: var(--t8); letter-spacing: -.026em; max-width: 19ch; }
.sans-issue p { margin-top: 18px; color: var(--encre-2); max-width: 58ch; font-size: var(--t4); }
.sans-issue-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rien-a-lire { padding-top: 54px; padding-bottom: 54px; color: var(--encre-2); font-size: var(--t4); }

/* =========================================================
   EFFONDREMENT MOBILE, declare palier par palier
   ========================================================= */
@media (max-width: 1080px) {
  :root { --souffle: 78px; }
  .etabli-grille { grid-template-columns: 1fr; gap: 34px; }
  .etabli-vue { margin-left: 0; margin-right: calc(var(--travee-cote) * -1); margin-bottom: -70px; }
  .etabli-vue img { aspect-ratio: 16 / 10; }
  .etabli-mot { padding-bottom: 0; }
  .exergue { padding-top: 124px; }
  .etabli-h { max-width: 18ch; }
  .pele-cols { columns: 2; }
  .questions-grille { grid-template-columns: 1fr; gap: 26px; }
  .artisan-grille { grid-template-columns: 250px 1fr; gap: 32px; padding-right: 34px; }
  .artisan-vue { margin-left: 34px; }
  .assise-grille { grid-template-columns: 1fr 1fr; gap: 38px; }
  .parler-grille { grid-template-columns: 1fr; gap: 38px; }
  .cahier-suite-cols { grid-template-columns: repeat(2, 1fr); }
  .cahier-suite-cols > *:last-child { display: none; }
  .mosaique { grid-template-columns: repeat(3, 1fr); }
  .mosaique > *:nth-child(n+4) { display: none; }
}

@media (max-width: 760px) {
  :root { --travee-cote: 22px; --souffle: 62px; }

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

  .taquet-menu { display: inline-flex; }
  .reglet-clore { display: inline-flex; position: absolute; top: 11px; right: 22px; }

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

  .etabli { padding-top: 32px; }
  .pele-cols { columns: 1; }
  .vignette { margin-bottom: 34px; }

  .frise-pas { flex: 0 0 82vw; }

  .artisan-grille { grid-template-columns: 1fr; gap: 22px; padding: 0 22px 34px; }
  .artisan-vue { margin: -26px 0 0; max-width: 230px; }

  .assise-grille { grid-template-columns: 1fr; gap: 32px; }

  .cahier-h, .rayonnage-mot h1, .page-tete h1, .sans-issue h1, .acces-h, .exergue-p { font-size: var(--t7); }
  .cahier-auteur { grid-template-columns: 1fr; }
  .cahier-suite-cols { grid-template-columns: 1fr; }
  .cahier-suite-cols > *:last-child { display: block; }

  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .mosaique > *:nth-child(n+3) { display: none; }

  .plan-liste { columns: 1; }
  .formulaire { padding: 24px 20px; }
  .rayonnage-mot { padding-top: 64px; padding-bottom: 54px; }

  /* Le desaxement se retire en mobile : il coute de la largeur */
  .gite, .gite-inv { transform: none; }
}