/*
Theme Name: De Fil et d Argent
Theme URI: https://de-fil-et-d-argent.fr/
Author: Florian ROGER
Description: Magazine editorial mode et accessoires. Mosaique de vitrine, colonnes decalees, palette froide bleu d encre.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: dfa
*/

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

   Palette froide et metallique, choisie contre le reflexe
   beige + laiton + espresso que « mode » et « argent »
   appellent (section 4.2 du skill), et contre les deux
   themes du parc deja en Cormorant + or.

   Contrastes calcules avant ecriture, sur papier #F1F2F4 :
     --encre     #14161B  16,1:1   AAA
     --encre-2   #4A5058   7,3:1   AAA corps
     --ton       #26356B  10,4:1   AAA
     --papier sur --ton              11,3:1   AAA
   Systeme de formes, regle unique tenue partout :
     surfaces, medias, sections   = angle vif, rayon 0
     boutons et champs d une ligne = pilule pleine, 999px
     zone de texte multiligne      = meme famille, plafonnee a 26px
   ========================================================= */
:root {
  --papier:    #F1F2F4;
  --papier-2:  #E4E6EA;
  --blanc:     #FBFBFC;
  --encre:     #14161B;
  --encre-2:   #4A5058;
  --ton:       #26356B;
  --ton-fonce: #1A2549;
  --ton-voile: rgba(38, 53, 107, .10);
  --filet:     rgba(20, 22, 27, .16);
  --filet-clair: rgba(251, 251, 252, .22);

  --pilule: 999px;
  --pilule-souple: 26px;

  --titre: 'Syne', 'Trebuchet MS', sans-serif;
  --texte: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* gamme typographique fermee, dix pas, aucune taille hors gamme */
  --t0: .72rem;
  --t1: .8rem;
  --t2: .9rem;
  --t3: 1rem;
  --t4: 1.125rem;
  --t5: 1.35rem;
  --t6: 1.7rem;
  --t7: 2.2rem;
  --t8: 3rem;
  --t9: clamp(2.2rem, 4.4vw, 3.5rem);

  --pli-max: 1360px;
  --pli-cote: 32px;
  --souffle: 96px;
  --duree: .45s;
  --courbe: cubic-bezier(.16, 1, .3, 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.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

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

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

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

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

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

.hors-ecran {
  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 4 : entree simple, rien de plus. */
.reveil {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--courbe), transform .7s var(--courbe);
}
.reveil.vu { opacity: 1; transform: none; }

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

/* =========================================================
   ELEMENTS INTERACTIFS : pilule pleine, seule forme arrondie
   ========================================================= */
.attache {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--encre);
  border-radius: var(--pilule);
  font-family: var(--texte);
  font-size: var(--t2);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe), transform .12s ease;
}
.attache:hover { background: var(--encre); color: var(--papier); }
.attache:active { transform: translateY(1px); }

.attache-plein {
  background: var(--ton);
  border-color: var(--ton);
  color: var(--blanc);
}
.attache-plein:hover { background: var(--ton-fonce); border-color: var(--ton-fonce); color: var(--blanc); }

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

/* =========================================================
   ENTETE
   ========================================================= */
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

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

.entete-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  height: 74px;
}

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

.fil { display: flex; align-items: center; gap: 4px; }
.fil a {
  padding: 9px 15px;
  border-radius: var(--pilule);
  font-size: var(--t2);
  font-weight: 500;
  color: var(--encre-2);
  transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.fil a:hover { color: var(--encre); background: var(--ton-voile); }
.fil a:active { transform: translateY(1px); }
.fil .fil-contact {
  border: 1px solid var(--encre);
  color: var(--encre);
  margin-left: 10px;
  padding: 9px 20px;
}
.fil .fil-contact:hover { background: var(--encre); color: var(--papier); }

.bouton-fil, .fil-fermer {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: var(--pilule);
  color: var(--encre);
  cursor: pointer;
}

/* =========================================================
   ACCUEIL 1 : VITRINE (mosaique asymetrique)
   Le titre occupe une cellule de la grille, trois cellules
   portent des macros de matiere. Aucune carte flottante.
   ========================================================= */
.vitrine { padding-top: 34px; padding-bottom: var(--souffle); }

.vitrine-grille {
  display: grid;
  grid-template-columns: 1.35fr .78fr .62fr;
  grid-template-rows: 320px 250px;
  gap: 14px;
}
.vitrine-mot {
  grid-column: 1; grid-row: 1 / span 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-right: 36px;
}
.vitrine-h {
  font-size: var(--t9);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  /* balance couperait le nom en deux lignes alors qu il tient sur une :
     le titre doit rester a deux lignes au total, nom puis nature du site */
  text-wrap: pretty;
}
.vitrine-h em {
  display: block;
  font-style: italic;
  font-weight: 600;
  font-size: var(--t6);
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--ton);
  margin-top: 14px;
  padding-bottom: 4px;
}
.vitrine-chapo {
  max-width: 46ch;
  margin-top: 22px;
  font-size: var(--t4);
  color: var(--encre-2);
}
.vitrine-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.vitrine-vue { position: relative; overflow: hidden; background: var(--papier-2); }
.vitrine-vue img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--courbe);
}
.vitrine-vue:hover img { transform: scale(1.04); }
.vitrine-vue-a { grid-column: 2; grid-row: 1 / span 2; }
.vitrine-vue-b { grid-column: 3; grid-row: 1; }
.vitrine-vue-c { grid-column: 3; grid-row: 2; }

/* =========================================================
   ACCUEIL 2 : TRAIT (bande d une phrase sur fond encre)
   ========================================================= */
.trait {
  background: var(--encre);
  color: var(--blanc);
  padding-top: 62px;
  padding-bottom: 62px;
}
.trait-p {
  margin: 0;
  max-width: 62ch;
  font-family: var(--titre);
  font-weight: 600;
  font-size: var(--t6);
  line-height: 1.32;
  letter-spacing: -.015em;
}
.trait-p span { color: #A9B4DC; }

/* =========================================================
   ACCUEIL 3 : TRESSE (deux colonnes decalees verticalement)
   ========================================================= */
.tresse { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.tresse-tete {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 44px;
}
.tresse-tete h2 { font-size: var(--t7); letter-spacing: -.025em; }
.tresse-compte { font-size: var(--t2); color: var(--encre-2); }

.tresse-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 46px;
}
.tresse-cols > *:nth-child(even) { margin-top: 64px; }

.fiche { display: block; }
.fiche-vue { overflow: hidden; background: var(--papier-2); margin-bottom: 18px; }
.fiche-vue img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.1s var(--courbe);
}
.fiche:nth-child(even) .fiche-vue img { aspect-ratio: 1 / 1; }
.fiche:hover .fiche-vue img { transform: scale(1.045); }
.fiche-h {
  font-size: var(--t5);
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color var(--duree) var(--courbe);
}
.fiche:hover .fiche-h { color: var(--ton); }
.mesure {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 12px;
  font-size: var(--t1);
  color: var(--encre-2);
}
.mesure b { font-weight: 500; color: var(--ton); }

/* =========================================================
   ACCUEIL 4 : ESCALIER (quatre principes, retrait croissant)
   ========================================================= */
.escalier { padding-top: var(--souffle); padding-bottom: var(--souffle); background: var(--papier-2); }
.escalier h2 { font-size: var(--t7); letter-spacing: -.025em; max-width: 20ch; margin-bottom: 46px; }
.escalier-pas { border-top: 1px solid var(--filet); padding-top: 30px; padding-bottom: 30px; }
.escalier-pas:last-child { border-bottom: 1px solid var(--filet); }
.escalier-pas h3 { font-size: var(--t5); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.escalier-pas p { margin: 0; color: var(--encre-2); max-width: 68ch; }
.escalier-pas:nth-child(2) { padding-left: 0; }
.escalier-pas:nth-child(3) { padding-left: 6%; }
.escalier-pas:nth-child(4) { padding-left: 12%; }
.escalier-pas:nth-child(5) { padding-left: 18%; }

/* =========================================================
   ACCUEIL 5 : PLANCHE (media pleine largeur, legende dessous)
   ========================================================= */
.planche { padding-top: var(--souffle); }
.planche-vue { width: 100%; }
.planche-vue img { width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; }
.planche-legende {
  margin: 16px 0 0;
  font-size: var(--t2);
  color: var(--encre-2);
  max-width: 58ch;
}

/* =========================================================
   ACCUEIL 6 : ENTREE (split asymetrique vers la rubrique)
   ========================================================= */
.entree { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.entree-grille { display: grid; grid-template-columns: .82fr 1.18fr; gap: 46px; align-items: center; }
.entree-vue { overflow: hidden; background: var(--papier-2); }
.entree-vue img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.entree-mot h2 { font-size: var(--t8); letter-spacing: -.03em; margin-bottom: 18px; }
.entree-mot p { color: var(--encre-2); max-width: 56ch; font-size: var(--t4); }

/* =========================================================
   ACCUEIL 7 : ATELIER (portrait 4/5 plus prose)
   ========================================================= */
.atelier { padding-top: var(--souffle); padding-bottom: var(--souffle); background: var(--encre); color: var(--blanc); }
.atelier-grille { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.atelier-portrait { overflow: hidden; }
.atelier-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.atelier-nom { font-size: var(--t7); letter-spacing: -.03em; }
.atelier-role { margin: 8px 0 26px; color: #A9B4DC; font-size: var(--t2); }
.atelier-mot { color: rgba(251, 251, 252, .84); max-width: 70ch; }
.atelier-mot p { margin-bottom: 1em; }
.atelier-mot strong { color: var(--blanc); font-weight: 600; }
.atelier-mot ul { margin: 0 0 1.2em; padding-left: 20px; }
.atelier-mot li { margin-bottom: .5em; }

/* =========================================================
   OURLET (pied de page)
   ========================================================= */
.ourlet { background: var(--papier-2); border-top: 1px solid var(--filet); padding-top: 70px; padding-bottom: 34px; }
.ourlet-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.4fr;
  gap: 48px;
}
.ourlet h2 { font-size: var(--t2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.ourlet-mot { color: var(--encre-2); font-size: var(--t2); max-width: 42ch; margin-top: 16px; }
.ourlet-liste { list-style: none; margin: 0; padding: 0; }
.ourlet-liste li { margin-bottom: 10px; }
.ourlet-liste a { font-size: var(--t2); color: var(--encre-2); transition: color var(--duree) var(--courbe); }
.ourlet-liste a:hover { color: var(--ton); }
.ourlet-recent { display: block; margin-bottom: 16px; }
.ourlet-recent span { display: block; font-size: var(--t2); font-weight: 500; line-height: 1.4; }
.ourlet-recent time { display: block; font-size: var(--t0); color: var(--encre-2); margin-top: 3px; }
.ourlet-bas {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--filet);
  font-size: var(--t1); color: var(--encre-2);
}

/* =========================================================
   FIL D ARIANE
   ========================================================= */
.miette { font-size: var(--t1); color: var(--encre-2); padding-top: 26px; }
.miette a { color: var(--encre-2); }
.miette a:hover { color: var(--ton); }
.miette span { padding: 0 7px; }

/* =========================================================
   ARTICLE
   Le corps fait toujours la largeur du conteneur, exactement
   comme l image mise en avant. Aucun plafond de mesure sur le
   conteneur ni sur les paragraphes : les blocs injectes par la
   chaine de contenu sont concus pour la pleine largeur.
   ========================================================= */
.papier { padding-bottom: var(--souffle); }
.papier-tete { padding-top: 26px; padding-bottom: 34px; }
.papier-rubrique {
  display: inline-block;
  font-size: var(--t1); font-weight: 500;
  color: var(--ton);
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px;
}
.papier-h { font-size: var(--t8); letter-spacing: -.03em; max-width: 22ch; }
.papier-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 20px;
  font-size: var(--t1); color: var(--encre-2);
}
.papier-meta .kk-star-ratings { margin: 0 !important; padding: 0 !important; }
.papier-vue { margin-bottom: 40px; background: var(--papier-2); }
.papier-vue img { width: 100%; height: clamp(260px, 40vw, 520px); object-fit: cover; }

.papier-corps { font-size: var(--t4); }
.papier-corps h2 { font-size: var(--t7); letter-spacing: -.025em; margin: 1.9em 0 .6em; }
.papier-corps h3 { font-size: var(--t5); letter-spacing: -.02em; margin: 1.5em 0 .5em; }
.papier-corps ul, .papier-corps ol { padding-left: 22px; margin-bottom: 1.2em; }
.papier-corps li { margin-bottom: .5em; }
.papier-corps a { color: var(--ton); text-decoration: underline; text-underline-offset: 3px; }
.papier-corps img { margin: 1.6em 0; }
.papier-corps blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 26px;
  border-left: 2px solid var(--ton);
  font-family: var(--titre); font-weight: 600; font-size: var(--t5);
  letter-spacing: -.015em; line-height: 1.35;
}
.papier-corps table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: var(--t2); }
.papier-corps th, .papier-corps td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--filet); }
.papier-corps th { font-weight: 600; background: var(--papier-2); }

.papier-signature {
  display: grid; grid-template-columns: 96px 1fr; gap: 22px;
  margin-top: 56px; padding-top: 30px; padding-bottom: 30px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.papier-signature img { width: 96px; height: 96px; object-fit: cover; }
.papier-signature h2 { font-size: var(--t5); letter-spacing: -.02em; margin-bottom: 8px; }
.papier-signature p { margin: 0; font-size: var(--t2); color: var(--encre-2); }

.papier-suite { margin-top: 64px; }
.papier-suite h2 { font-size: var(--t7); letter-spacing: -.025em; margin-bottom: 34px; }
.papier-suite-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.papier-suite h3 { font-size: var(--t4); font-weight: 600; letter-spacing: -.015em; margin-top: 14px; }
.papier-suite img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.papier-suite a:hover h3 { color: var(--ton); }

/* Encart insere dans le corps par le theme */
.papier-corps .dfa-aussi {
  margin: 2em 0;
  padding: 18px 0 18px 24px;
  border-left: 2px solid var(--ton);
  background: var(--ton-voile);
}
.papier-corps .dfa-aussi b {
  display: block;
  font-size: var(--t1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ton); margin-bottom: 6px;
}
.papier-corps .dfa-aussi a { font-family: var(--titre); font-weight: 600; font-size: var(--t4); text-decoration: none; }
.papier-corps .dfa-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, puis
   czm, puis mjd. Une charte qui nomme les prefixes est donc perimee
   au prochain changement, et les pictogrammes disparaissent sans
   que rien ne le signale. On selectionne par la FIN du nom de
   classe, ce qui couvre tous les prefixes, passes et a venir.

   Ces blocs arrivent avec leur propre CSS en ligne, posee apres la
   feuille du theme. On reprend la main en qualifiant par
   .papier-corps, ce qui remonte la specificite sans !important.
   Les icones sont des masques, elles heritent donc de l accent.
   ========================================================= */
.papier-corps [class$="-key"] li { position: relative; list-style: none; padding-left: 34px; }
.papier-corps [class$="-key"] ul { padding-left: 0; }
.papier-corps [class$="-key"] li::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--ton); opacity: .12;
}
.papier-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(--ton); border-bottom: 2px solid var(--ton);
  transform: rotate(45deg);
}

/* Le bouclier du badge : la chaine reserve son gap mais n injecte
   plus l icone depuis la version czm. On la repose. */
.papier-corps [class$="-badge"] { display: inline-flex; align-items: center; gap: 6px; }
.papier-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;
}

.papier-corps [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.papier-corps [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.papier-corps [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--ton); 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;
}
/* Faits verifies : coche dans un cercle */
.papier-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");
}
/* Sources : feuillet */
.papier-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");
}
/* Mise a jour : horloge */
.papier-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");
}

/* Sommaire du plugin Easy Table of Contents */
.papier-corps #ez-toc-container { background: var(--papier-2); border: 0; box-shadow: none; }

/* =========================================================
   RUBRIQUE (archive)
   ========================================================= */
.rubrique-tete { position: relative; overflow: hidden; background: var(--encre); color: var(--blanc); }
.rubrique-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.rubrique-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 27, .68), rgba(20, 22, 27, .82));
}
.rubrique-mot { position: relative; z-index: 1; padding-top: 92px; padding-bottom: 76px; }
.rubrique-mot h1 { font-size: var(--t8); letter-spacing: -.03em; }
.rubrique-compte { margin-top: 14px; font-size: var(--t2); color: #A9B4DC; }
.rubrique-desc { margin-top: 20px; max-width: 62ch; color: rgba(251, 251, 252, .88); }
.rubrique-desc p { margin-bottom: .8em; color: inherit; }
.rubrique-liste { padding-top: var(--souffle); padding-bottom: var(--souffle); }
/* Le bloc porte la classe conteneur, qui centre par margin auto : un
   max-width pose ici le decalerait vers le milieu de la page. On plafonne
   donc la mesure sur les paragraphes, pas sur le conteneur. */
.rubrique-seo {
  padding-top: 12px;
  padding-bottom: var(--souffle);
  color: var(--encre-2);
}
.rubrique-seo p { max-width: 78ch; }
.rubrique-seo h2 { font-size: var(--t6); letter-spacing: -.02em; color: var(--encre); margin-bottom: 16px; }

/* =========================================================
   PAGES STATIQUES
   ========================================================= */
.page-simple { padding-bottom: var(--souffle); }
.page-tete { padding-top: 30px; padding-bottom: 40px; border-bottom: 1px solid var(--filet); margin-bottom: 48px; }
.page-tete h1 { font-size: var(--t8); letter-spacing: -.03em; }
.page-corps { font-size: var(--t4); max-width: 82ch; }
.page-corps h2 { font-size: var(--t6); letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.page-corps h3 { font-size: var(--t5); letter-spacing: -.02em; margin: 1.4em 0 .4em; }
.page-corps a { color: var(--ton); text-decoration: underline; text-underline-offset: 3px; }
.page-corps ul { padding-left: 22px; }

.plan-groupe { margin-bottom: 46px; }
.plan-groupe h2 { font-size: var(--t6); letter-spacing: -.02em; margin-bottom: 18px; }
.plan-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 46px; }
.plan-liste li { margin-bottom: 9px; break-inside: avoid; }
.plan-liste a { color: var(--encre-2); }
.plan-liste a:hover { color: var(--ton); }

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

.formulaire { background: var(--papier-2); padding: 34px; }
.wpcf7-form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.wpcf7-form br { display: none; }
.wpcf7-form label { 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: 13px 18px;
  border: 1px solid var(--filet);
  border-radius: var(--pilule);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t2);
}
.wpcf7-form textarea { border-radius: var(--pilule-souple); 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(--ton); outline-offset: 1px; border-color: var(--ton); }
.wpcf7-form input.wpcf7-submit {
  width: auto;
  padding: 14px 34px;
  background: var(--ton);
  border: 1px solid var(--ton);
  border-radius: var(--pilule);
  color: var(--blanc);
  font-weight: 500;
  font-size: var(--t2);
  cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--ton-fonce); }
.wpcf7-form input.wpcf7-submit:active { transform: translateY(1px); }
.wpcf7-not-valid-tip { font-size: var(--t1); color: #A3231B; }
.wpcf7-response-output { border: 1px solid var(--filet); padding: 13px 18px; font-size: var(--t2); }

/* =========================================================
   404 ET ETAT VIDE
   ========================================================= */
.perdu { padding-top: 120px; padding-bottom: var(--souffle); }
.perdu h1 { font-size: var(--t8); letter-spacing: -.03em; max-width: 18ch; }
.perdu p { margin-top: 18px; color: var(--encre-2); max-width: 56ch; font-size: var(--t4); }
.perdu-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vide { padding-top: 60px; padding-bottom: 60px; color: var(--encre-2); font-size: var(--t4); }

/* =========================================================
   EFFONDREMENT MOBILE, declare palier par palier
   ========================================================= */
@media (max-width: 1080px) {
  :root { --souffle: 74px; }
  .vitrine-grille { grid-template-columns: 1fr 1fr; grid-template-rows: auto 240px; }
  .vitrine-mot { grid-column: 1 / span 2; grid-row: 1; padding-right: 0; }
  .vitrine-vue-a { grid-column: 1; grid-row: 2; }
  .vitrine-vue-b { grid-column: 2; grid-row: 2; }
  .vitrine-vue-c { display: none; }
  .entree-grille { grid-template-columns: 1fr; }
  .entree-vue img { aspect-ratio: 16 / 9; }
  .atelier-grille { grid-template-columns: 260px 1fr; gap: 40px; }
  .ourlet-grille { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-grille { grid-template-columns: 1fr; gap: 40px; }
  .papier-suite-cols { grid-template-columns: 1fr 1fr; }
  .papier-suite-cols > *:last-child { display: none; }
}

@media (max-width: 768px) {
  :root { --pli-cote: 22px; --souffle: 58px; }

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

  .bouton-fil { display: inline-flex; }
  .fil-fermer { display: inline-flex; position: absolute; top: 12px; right: 22px; }

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

  .vitrine-grille { grid-template-columns: 1fr; grid-template-rows: auto 230px; gap: 12px; }
  .vitrine-mot { grid-column: 1; }
  .vitrine-vue-a { grid-column: 1; grid-row: 2; }
  .vitrine-vue-b, .vitrine-vue-c { display: none; }
  .vitrine-h { letter-spacing: -.025em; }

  .tresse-cols { grid-template-columns: 1fr; gap: 44px; }
  .tresse-cols > *:nth-child(even) { margin-top: 0; }
  .fiche:nth-child(even) .fiche-vue img { aspect-ratio: 4 / 3; }
  .tresse-tete { flex-direction: column; gap: 6px; }

  .escalier-pas:nth-child(3),
  .escalier-pas:nth-child(4),
  .escalier-pas:nth-child(5) { padding-left: 0; }

  .atelier-grille { grid-template-columns: 1fr; gap: 28px; }
  .atelier-portrait { max-width: 260px; }

  .ourlet-grille { grid-template-columns: 1fr; gap: 34px; }

  .papier-h, .entree-mot h2, .rubrique-mot h1, .page-tete h1, .perdu h1 { font-size: var(--t7); }
  .papier-signature { grid-template-columns: 1fr; }
  .papier-suite-cols { grid-template-columns: 1fr; }
  .papier-suite-cols > *:last-child { display: block; }

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