/*
Theme Name:  La Fabrik Du Print
Theme URI:   https://lafabrikduprint.com
Author:      Studio Vingtrois
Author URI:  https://studio-vingtrois.com
Description: Theme sur-mesure de La Fabrik Du Print - imprimeur a Reims et Troyes. Impression papier, PLV et supports rigides. Concu pour la performance et le referencement local.
Version:     1.2.1
Requires at least: 6.4
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: lafabrik
Tags:        custom-menu, custom-logo, featured-images, translation-ready
*/

/* Transitions entre pages : API View Transitions, sans JavaScript. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } }

/* ============================================================
   LA FABRIK DU PRINT — maquette de refonte
   Jetons : encre / or / papier + gamme de contrôle CMJN
   ============================================================ */

:root{
  /* --- Encres --- */
  --encre:        #14130E;   /* noir d'encre, biais olive */
  --encre-deep:   #0A0A07;
  --encre-70:     #3A382E;
  --encre-40:     #6E6B5D;

  /* --- Or (prélevé sur le logo : #B08C12) --- */
  --or:           #B08C12;
  --or-clair:     #E8CE72;
  --or-sombre:    #6E5709;

  /* --- Papier --- */
  --papier:       #F4F1E8;
  --papier-2:     #EAE5D7;
  --papier-3:     #DED7C4;

  /* --- Gamme de contrôle (usage strictement décoratif / micro) --- */
  --cyan:    #1BA7C4;
  --magenta: #D6266E;
  --jaune:   #F2C230;

  /* --- Rôles (thème clair = papier) --- */
  --fond:        var(--papier);
  --fond-2:      #FBF9F3;
  --fond-creux:  var(--papier-2);
  --texte:       var(--encre);
  --texte-doux:  #55523F;
  --texte-faible:#7C7866;
  --trait:       #D5CFBC;
  --trait-fort:  #B9B19A;
  --accent:      #8C6F0E;      /* or de marque assombri pour rester lisible sur papier */
  --accent-vif:  var(--or);
  --plaque-fond: #22201A;
  --ombre:       0 1px 0 rgba(20,19,14,.05), 0 12px 34px -18px rgba(20,19,14,.35);

  --max: 1240px;
  --gouttiere: clamp(20px, 5vw, 64px);
  --r: 2px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:        #100F0B;
    --fond-2:      #17160F;
    --fond-creux:  #1C1A13;
    --texte:       #F2EFE4;
    --texte-doux:  #B5B09B;
    --texte-faible:#8B8672;
    --trait:       #2E2B21;
    --trait-fort:  #45412F;
    --accent:      var(--or);
    --accent-vif:  var(--or-clair);
    --plaque-fond: #1B1912;
    --ombre:       0 1px 0 rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --fond:        #100F0B;
  --fond-2:      #17160F;
  --fond-creux:  #1C1A13;
  --texte:       #F2EFE4;
  --texte-doux:  #B5B09B;
  --texte-faible:#8B8672;
  --trait:       #2E2B21;
  --trait-fort:  #45412F;
  --accent:      #D3AC2E;
  --accent-vif:  var(--or-clair);
  --plaque-fond: #1B1912;
  --ombre:       0 1px 0 rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.8);
}

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

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grain papier : très léger, sur toute la page */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>");
}
:root[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.16; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::before{ mix-blend-mode:screen; opacity:.16; }
}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{ font-family:"Bodoni Moda","Didot",Georgia,serif; font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.01em; }
h1{ font-size:clamp(2.7rem, 6.4vw, 5.4rem); line-height:.98; font-weight:500; }
h2{ font-size:clamp(1.95rem, 3.6vw, 3.15rem); line-height:1.04; }
h3{ font-size:clamp(1.15rem, 1.5vw, 1.4rem); line-height:1.2; font-weight:600; }
p{ margin:0; }
a{ color:inherit; }

.mono{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.685rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
}
.mesure{ max-width:63ch; }

/* ---------- Structure ---------- */
.enveloppe{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gouttiere); }
.bloc{ padding-block:clamp(64px, 9vw, 130px); position:relative; }
.bloc--creux{ background:var(--fond-creux); }
.bloc--encre{ background:var(--encre-deep); color:#F2EFE4; }
.bloc--encre .mono{ color:var(--or); }

/* Traits de coupe aux angles des blocs marqués */
.coupe::before,.coupe::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none; opacity:.55;
  border-color:var(--trait-fort); border-style:solid; border-width:0;
}
.coupe::before{ top:22px; left:14px; border-top-width:1px; border-left-width:1px; }
.coupe::after{ bottom:22px; right:14px; border-bottom-width:1px; border-right-width:1px; }

/* ---------- Chapeau de section ---------- */
.chapeau{ display:flex; align-items:baseline; gap:14px; margin-bottom:26px; color:var(--texte-faible); }
.chapeau .cible{ flex:0 0 auto; }
.chapeau .filet{ flex:1 1 auto; height:1px; background:var(--trait); }

.cible{ width:13px; height:13px; display:inline-block; vertical-align:-1px; }

/* ---------- Gamme de contrôle (séparateur) ---------- */
.gamme{ display:flex; height:7px; width:100%; }
.gamme i{ flex:1; }
.gamme i:nth-child(1){ background:var(--cyan); }
.gamme i:nth-child(2){ background:var(--magenta); }
.gamme i:nth-child(3){ background:var(--jaune); }
.gamme i:nth-child(4){ background:var(--encre); }
.gamme i:nth-child(5){ background:var(--or); flex:2; }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.entete{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.entete.est-collee{ border-bottom-color:var(--trait); }
.entete .rangee{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:74px;
}
.marque{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.marque .logo{ height:50px; width:auto; display:block; }
.marque .sous{
  font-size:.55rem; letter-spacing:.24em; color:var(--texte-faible);
  font-family:"IBM Plex Mono",monospace; padding-left:14px; border-left:1px solid var(--trait);
  line-height:1.5;
}
@media (max-width:620px){ .marque .sous{ display:none; } .marque .logo{ height:42px; } }

.marque .logo-clair{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marque .logo-fonce{ display:none; }
  :root:not([data-theme="light"]) .marque .logo-clair{ display:block; }
}
:root[data-theme="dark"] .marque .logo-fonce{ display:none; }
:root[data-theme="dark"] .marque .logo-clair{ display:block; }

.script{ font-family:"Grand Hotel", "Brush Script MT", cursive; font-style:normal; font-weight:400; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav button{
  appearance:none; background:none; border:0; cursor:pointer; color:var(--texte-doux);
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 13px; border-radius:var(--r); position:relative; white-space:nowrap; transition:color .22s ease;
}
.nav button::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav button:hover{ color:var(--texte); }
.nav button[aria-current="page"]{ color:var(--texte); }
.nav button[aria-current="page"]::after,.nav button:hover::after{ transform:scaleX(1); }

.tel-cta{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--trait-fort); padding:9px 15px; border-radius:var(--r);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.06em; white-space:nowrap;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.tel-cta:hover{ border-color:var(--accent); color:var(--accent); }
.entete .outils{ display:flex; align-items:center; gap:10px; }
.bascule{
  appearance:none; background:none; border:1px solid var(--trait); color:var(--texte-doux);
  width:34px; height:34px; border-radius:var(--r); cursor:pointer; display:grid; place-items:center;
  transition:border-color .25s ease, color .25s ease;
}
.bascule:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width:900px){
  .nav{ display:none; }
  .entete .rangee{ height:64px; }
}

/* ============================================================
   PLAQUES (emplacements photo — trames de similigravure)
   ============================================================ */
.plaque{
  position:relative; overflow:hidden; background:var(--plaque-fond);
  border-radius:var(--r); isolation:isolate;
}
.plaque::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(50% 60% at 22% 28%, rgba(200,164,77,.55), transparent 62%),
    radial-gradient(46% 56% at 78% 72%, rgba(27,167,196,.24), transparent 66%),
    radial-gradient(70% 70% at 55% 12%, rgba(240,223,168,.20), transparent 70%);
  filter:blur(2px);
  transform:translate3d(0,0,0);
}
.plaque::after{ /* trame simili */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at center, rgba(0,0,0,.62) 34%, transparent 35%);
  background-size:6px 6px;
  mix-blend-mode:multiply; opacity:.55;
}
.plaque[data-plaque="or"]::before{
  background:linear-gradient(112deg,#6E520F 0%,#C8A44D 16%,#F6E7B3 30%,#C8A44D 44%,#8A6A1D 58%,#EBD79A 76%,#9C7C22 100%);
  background-size:260% 100%; filter:none;
  animation:foil 9s linear infinite;
}
.plaque[data-plaque="or"]::after{ opacity:.28; }
.plaque[data-plaque="cyan"]::before{
  background:radial-gradient(60% 70% at 30% 30%, rgba(27,167,196,.75), transparent 65%),
             radial-gradient(50% 60% at 75% 70%, rgba(20,19,14,.9), transparent 70%),
             linear-gradient(160deg,#123A44,#0B1A1E);
}
.plaque[data-plaque="magenta"]::before{
  background:radial-gradient(60% 70% at 68% 30%, rgba(214,38,110,.62), transparent 65%),
             radial-gradient(55% 65% at 25% 75%, rgba(200,164,77,.35), transparent 70%),
             linear-gradient(160deg,#331021,#140B10);
}
.plaque[data-plaque="encre"]::before{
  background:radial-gradient(60% 70% at 40% 25%, rgba(242,239,228,.24), transparent 62%),
             linear-gradient(155deg,#26241C,#0C0B07);
}
@keyframes foil{ 0%{background-position:0% 50%} 100%{background-position:260% 50%} }

/* Plaque contenant une vraie photo */
.plaque.photo::before,.plaque.photo::after{ display:none; }
.plaque.photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1;
  transition:transform 1s cubic-bezier(.2,.8,.2,1), filter .6s ease;
}
.plaque.photo::after{ content:none; }
.oeuvre:hover .plaque.photo img,.article:hover .plaque.photo img{ transform:scale(1.045); }
.plaque .voile{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,7,.62) 0%, rgba(10,10,7,.12) 42%, transparent 70%);
}
.plaque .etiquette{
  position:absolute; left:12px; bottom:12px; z-index:3;
  background:rgba(10,10,7,.62); color:#EFE9D6; backdrop-filter:blur(6px);
  padding:6px 10px; border-radius:var(--r); border:1px solid rgba(240,223,168,.22);
  font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
}
.plaque .etiquette b{ color:var(--or-clair); font-weight:500; }
.plaque .repere{ position:absolute; top:10px; right:10px; z-index:3; opacity:.8; }

/* ============================================================
   HÉROS
   ============================================================ */
/* Bannière plein écran : hauteur de la fenêtre moins l'en-tête collé et sa
   gamme de contrôle, pour que le premier écran soit exactement la bannière.
   100dvh et non 100vh : sur mobile, la barre d'adresse ne coupe plus le socle. */
.heros{
  --h-entete:81px; /* 74 px de rangée + 7 px de gamme */
  position:relative; background:var(--encre-deep); color:#F4F1E6;
  min-height:calc(100dvh - var(--h-entete));
  display:flex; align-items:center;
  overflow:hidden;
  padding-block:clamp(72px,9vw,120px);
}
@supports not (height:100dvh){
  .heros{ min-height:calc(100vh - var(--h-entete)); }
}
@media (max-width:900px){
  .heros{ --h-entete:71px; } /* rangée réduite à 64 px */
}
/* Écran très bas (portable 13" barre d'outils ouverte) : on laisse respirer
   plutôt que d'écraser le titre. */
@media (max-height:620px){
  .heros{ min-height:560px; }
}
.heros .fond{ position:absolute; inset:-10% -5%; z-index:0; }
.heros .fond span{ position:absolute; display:block; border-radius:50%; filter:blur(60px); }
.heros .fond .f1{ width:56vw; height:56vw; left:-14vw; top:-18vw; background:radial-gradient(circle,rgba(200,164,77,.34),transparent 66%); }
.heros .fond .f2{ width:44vw; height:44vw; right:-10vw; bottom:-20vw; background:radial-gradient(circle,rgba(27,167,196,.20),transparent 66%); }
.heros .fond .f3{ width:30vw; height:30vw; left:46%; top:34%; background:radial-gradient(circle,rgba(214,38,110,.14),transparent 66%); }
.heros .trame{
  position:absolute; inset:0; z-index:1; opacity:.35;
  background-image:radial-gradient(circle at center, rgba(240,223,168,.20) 30%, transparent 31%);
  background-size:7px 7px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}
.heros .enveloppe{ position:relative; z-index:2; }

.heros .fil{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; color:var(--or); margin-bottom:26px; }
.heros h1{ color:#FBF8EE; }
.heros h1 em{ font-style:italic; color:var(--or-clair); }
.heros h1 em.script{ font-size:1.2em; line-height:.85; color:var(--or-clair); display:inline-block; padding-inline:.04em; }
.heros .accroche{ margin-top:26px; color:#CFC8B2; font-size:1.06rem; max-width:56ch; }
.heros .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  padding:14px 22px; border-radius:var(--r); border:1px solid transparent;
  transition:transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--or{ background:linear-gradient(110deg,var(--or-sombre),var(--or) 40%,var(--or-clair) 62%,var(--or) 84%); background-size:200% 100%; color:#14130E; font-weight:500; }
.btn--or:hover{ background-position:100% 50%; }
.btn--fantome{ border-color:rgba(240,223,168,.34); color:#EDE7D6; }
.btn--fantome:hover{ border-color:var(--or); color:var(--or-clair); }
.btn--encre{ background:var(--texte); color:var(--fond); }
.btn--encre:hover{ background:var(--accent); color:#14130E; }

.heros .socle{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-top:1px solid rgba(240,223,168,.14);
  background:rgba(10,10,7,.5); backdrop-filter:blur(8px);
}
.heros .socle .rangee{ display:flex; flex-wrap:wrap; gap:10px 34px; padding-block:13px; align-items:center; color:#C7C0AA; }
.heros .socle .rangee span{ display:inline-flex; align-items:center; gap:8px; }
.heros .socle b{ color:var(--or-clair); font-weight:500; }


.heros .cliche{ position:absolute; inset:-8% 0 -8% 0; z-index:1; overflow:hidden; }
.heros .cliche img{ width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(.85) contrast(1.05); }
.heros .cliche::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,10,7,.94) 0%, rgba(10,10,7,.82) 42%, rgba(10,10,7,.44) 100%);
}
@media (max-width:760px){ .heros .cliche::after{ background:rgba(10,10,7,.86); } }

/* ============================================================
   SAVOIR-FAIRE
   ============================================================ */
.metiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--trait); border:1px solid var(--trait); }
@media (max-width:1000px){ .metiers{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .metiers{ grid-template-columns:1fr; } }
.metier{
  background:var(--fond); padding:30px 26px 28px; position:relative; overflow:hidden;
  transition:background .3s ease;
}
.metier:hover{ background:var(--fond-2); }
.metier .num{ font-family:"IBM Plex Mono",monospace; font-size:.63rem; color:var(--texte-faible); letter-spacing:.16em; }
.metier h3{ margin:14px 0 10px; }
.metier p{ color:var(--texte-doux); font-size:.94rem; }
.metier .liste{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--trait); display:flex; flex-wrap:wrap; gap:6px; }
.metier .liste em{
  font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.06em;
  color:var(--texte-faible); border:1px solid var(--trait); padding:3px 7px; border-radius:var(--r);
}
.metier{ padding:0 0 28px; display:flex; flex-direction:column; }
.metier .vue{ aspect-ratio:16/10; margin-bottom:22px; }
.metier .num,.metier h3,.metier p,.metier .liste{ margin-inline:26px; }
.metier .liste{ margin-top:auto; padding-top:14px; }
.metier:not(:has(.vue)){ padding-top:30px; }
.metier .glisse{
  position:absolute; inset:auto -30px -30px auto; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,var(--accent-vif),transparent 68%); opacity:.10;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.metier:hover .glisse{ transform:scale(1.35); opacity:.2; }

/* ============================================================
   À PROPOS / DUO
   ============================================================ */
.duo{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; }
.duo--inverse{ grid-template-columns:.95fr 1.05fr; }
@media (max-width:860px){ .duo,.duo--inverse{ grid-template-columns:1fr; } }
.duo .plaque{ aspect-ratio:4/5; }
.duo p + p{ margin-top:18px; }

.stats{ display:flex; flex-wrap:wrap; gap:0; margin-top:34px; border-top:1px solid var(--trait); }
.stats div{ flex:1 1 130px; padding:18px 18px 18px 0; border-right:1px solid var(--trait); }
.stats div:last-child{ border-right:0; }
.stats strong{ display:block; font-family:"Bodoni Moda",serif; font-size:2.1rem; line-height:1; font-weight:500; }
.stats span{ display:block; margin-top:8px; color:var(--texte-faible); }

/* ============================================================
   CLIENTS — bandeau défilant
   ============================================================ */
.bandeau{ overflow:hidden; border-block:1px solid var(--trait); padding-block:20px; position:relative; }
.bandeau::before,.bandeau::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.bandeau::before{ left:0; background:linear-gradient(to right,var(--fond),transparent); }
.bandeau::after{ right:0; background:linear-gradient(to left,var(--fond),transparent); }
.piste{ display:flex; gap:0; width:max-content; animation:defile 46s linear infinite; }
.piste span{
  font-family:"Bodoni Moda",serif; font-size:1.12rem; letter-spacing:.03em; color:var(--texte-doux);
  padding-inline:26px; white-space:nowrap; display:inline-flex; align-items:center; gap:26px;
}
.piste span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.5; }
@keyframes defile{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.bandeau:hover .piste{ animation-play-state:paused; }

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.filtres{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filtres button{
  appearance:none; cursor:pointer; background:none; border:1px solid var(--trait);
  color:var(--texte-doux); padding:8px 14px; border-radius:var(--r);
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  transition:all .22s ease;
}
.filtres button:hover{ border-color:var(--trait-fort); color:var(--texte); }
.filtres button[aria-pressed="true"]{ background:var(--texte); color:var(--fond); border-color:var(--texte); }

.galerie{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; }
.oeuvre{ display:block; }
.oeuvre .plaque{ aspect-ratio:4/3; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.oeuvre:nth-child(4n+1) .plaque{ aspect-ratio:4/5; }
.oeuvre:hover .plaque{ transform:translateY(-5px); }
.oeuvre .titre{ margin-top:12px; font-family:"Bodoni Moda",serif; font-size:1.02rem; }
.oeuvre .meta{ margin-top:4px; color:var(--texte-faible); }
.oeuvre[hidden]{ display:none; }

/* ============================================================
   PROCESS
   ============================================================ */
.etapes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; border:1px solid var(--trait); }
.etape{ padding:26px 22px; border-right:1px solid var(--trait); position:relative; }
.etape:last-child{ border-right:0; }
@media (max-width:820px){
  .etape{ border-right:0; border-bottom:1px solid var(--trait); }
  .etape:last-child{ border-bottom:0; }
}
.etape .rang{
  font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.14em; color:var(--accent);
  display:flex; align-items:center; gap:8px;
}
.etape .rang::after{ content:""; flex:1; height:1px; background:var(--trait); }
.etape h3{ font-size:1.05rem; margin:12px 0 8px; }
.etape p{ color:var(--texte-doux); font-size:.9rem; }

/* ============================================================
   JOURNAL
   ============================================================ */
.articles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.article{ display:flex; flex-direction:column; gap:14px; text-decoration:none; }
.article .plaque{ aspect-ratio:16/10; }
.article h3{ font-size:1.12rem; transition:color .25s ease; }
.article:hover h3{ color:var(--accent); }
.article p{ color:var(--texte-doux); font-size:.92rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
.coord{ display:flex; flex-direction:column; gap:2px; }
.coord a,.coord p{ text-decoration:none; padding-block:13px; border-bottom:1px solid var(--trait); display:flex; gap:14px; align-items:flex-start; }
.coord a:hover{ color:var(--accent); }
.coord .cle{ flex:0 0 92px; color:var(--texte-faible); font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; padding-top:5px; }

.formulaire{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.formulaire .plein{ grid-column:1/-1; }
.champ{ display:flex; flex-direction:column; gap:7px; }
.champ label{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--texte-faible); }
.champ input,.champ textarea,.champ select{
  font:inherit; font-size:.95rem; color:var(--texte); background:var(--fond-2);
  border:1px solid var(--trait); border-radius:var(--r); padding:12px 13px; width:100%;
  transition:border-color .22s ease, background .22s ease;
}
.champ textarea{ min-height:132px; resize:vertical; }
.champ input:focus,.champ textarea:focus,.champ select:focus{ outline:none; border-color:var(--accent); background:var(--fond); }
.note-envoi{ color:var(--texte-faible); font-size:.82rem; }
@media (max-width:640px){ .formulaire{ grid-template-columns:1fr; } }

/* ============================================================
   PIED
   ============================================================ */
.pied{ background:var(--encre-deep); color:#CFC8B2; padding-block:56px 30px; }
.pied a{ text-decoration:none; color:#CFC8B2; }
.pied a:hover{ color:var(--or-clair); }
.pied .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
@media (max-width:820px){ .pied .cols{ grid-template-columns:1fr 1fr; } }
.pied h4{ font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--or); font-weight:400; margin-bottom:14px; }
.pied ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.92rem; }
.pied .bas{ margin-top:44px; padding-top:20px; border-top:1px solid rgba(240,223,168,.14); display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; color:#8B8571; }

/* ---------- Apparitions au défilement ---------- */
.js-anim .rev{ opacity:0; transform:translate3d(0,26px,0); filter:blur(6px); }
.js-anim .rev.vu{
  opacity:1; transform:none; filter:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.js-anim .rev.d1.vu{ transition-delay:.08s } .js-anim .rev.d2.vu{ transition-delay:.16s }
.js-anim .rev.d3.vu{ transition-delay:.24s } .js-anim .rev.d4.vu{ transition-delay:.32s }
.js-anim .rev.d5.vu{ transition-delay:.40s }


/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js-anim .rev{ opacity:1; transform:none; filter:none; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ============================================================
   AJOUTS WORDPRESS
   ============================================================ */
.ecran-lecteur{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.lien-evitement{
  position:absolute; left:-9999px; top:0; z-index:500;
  background:var(--texte); color:var(--fond); padding:12px 18px; border-radius:var(--r);
}
.lien-evitement:focus{ left:12px; top:12px; }

.entete .burger{
  display:none; appearance:none; background:none; border:1px solid var(--trait);
  color:var(--texte); width:38px; height:38px; border-radius:var(--r); cursor:pointer;
}
@media (max-width:900px){
  .entete .burger{ display:grid; place-items:center; }
  .nav{
    position:fixed; inset:74px 0 auto 0; display:none; flex-direction:column; align-items:stretch;
    background:var(--fond); border-bottom:1px solid var(--trait); padding:10px var(--gouttiere) 22px;
  }
  .nav.ouvert{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--trait); }
  .nav a::after{ display:none; }
}

/* Le menu WordPress rend des <a>, pas des <button> */
.nav a{
  text-decoration:none; color:var(--texte-doux);
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 13px; border-radius:var(--r); position:relative; white-space:nowrap; transition:color .22s ease;
}
.nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover{ color:var(--texte); }
.nav .current-menu-item > a,.nav .current_page_item > a,
.nav .current-menu-parent > a,.nav .current-post-ancestor > a{ color:var(--texte); }
.nav .current-menu-item > a::after,.nav .current_page_item > a::after,
.nav .current-menu-parent > a::after,.nav a:hover::after{ transform:scaleX(1); }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px; }
@media (max-width:900px){ .nav ul{ flex-direction:column; align-items:stretch; width:100%; } }

/* Contenu editorial libre (l'editeur WordPress) */
.editorial{ max-width:70ch; }
.editorial > * + *{ margin-top:1.15em; }
.editorial h2{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-top:1.8em; }
.editorial h3{ margin-top:1.6em; }
.editorial a{ color:var(--accent); text-underline-offset:3px; }
.editorial img,.editorial figure{ max-width:100%; height:auto; border-radius:var(--r); }
.editorial figcaption{ color:var(--texte-faible); font-size:.85rem; margin-top:8px; }
.editorial blockquote{
  margin:1.8em 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent);
  font-family:"Bodoni Moda",serif; font-size:1.25rem; font-style:italic;
}
.editorial ul,.editorial ol{ padding-left:1.25em; }
.editorial li + li{ margin-top:.5em; }
.editorial code{ font-family:"IBM Plex Mono",monospace; font-size:.88em; background:var(--fond-creux); padding:2px 6px; border-radius:var(--r); }
.editorial table{ width:100%; border-collapse:collapse; }
.editorial th,.editorial td{ border-bottom:1px solid var(--trait); padding:10px 12px; text-align:left; }
.wp-block-table{ overflow-x:auto; }

/* Fil d'Ariane */
.fil-ariane{ color:var(--texte-faible); }
.fil-ariane a{ text-decoration:none; }
.fil-ariane a:hover{ color:var(--accent); }
.fil-ariane span + span::before{ content:"/"; margin:0 8px; opacity:.5; }

/* Pagination */
.pagination{ display:flex; gap:6px; flex-wrap:wrap; margin-top:48px; }
.pagination .page-numbers{
  display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--trait); border-radius:var(--r); text-decoration:none;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem;
}
.pagination .page-numbers:hover{ border-color:var(--accent); color:var(--accent); }
.pagination .current{ background:var(--texte); color:var(--fond); border-color:var(--texte); }

/* Fiche realisation */
.fiche{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:860px){ .fiche{ grid-template-columns:1fr; } }
.fiche .specs{ border-top:1px solid var(--trait); }
.fiche .specs div{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--trait); }
.fiche .specs dt{ flex:0 0 108px; color:var(--texte-faible); font-family:"IBM Plex Mono",monospace;
  font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; padding-top:4px; margin:0; }
.fiche .specs dd{ margin:0; }

/* Bloc ville */
.villes{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--trait); border:1px solid var(--trait); }
@media (max-width:700px){ .villes{ grid-template-columns:1fr; } }
.ville{ background:var(--fond); padding:30px 26px; }
.ville h3{ margin-bottom:10px; }
.ville address{ font-style:normal; color:var(--texte-doux); }
.ville a{ color:var(--accent); text-decoration:none; }

/* Message de formulaire */
.alerte{ padding:14px 16px; border-radius:var(--r); border:1px solid var(--trait); }
.alerte--ok{ border-color:var(--accent); color:var(--accent); }
.alerte--ko{ border-color:#C0453F; color:#C0453F; }

/* ============================================================
   FICHES PRODUIT (gabarit « Famille de produits »)
   ============================================================ */

/* Étiquettes techniques, réutilisées dans plusieurs blocs */
.etiquettes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; }
.etiquettes em{
  font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.07em;
  color:var(--texte-faible); border:1px solid var(--trait); padding:5px 9px; border-radius:var(--r);
}

/* Deux colonnes : tableau des supports d'un côté, encarts de l'autre */
.colonnes-fiche{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; }
@media (max-width:920px){ .colonnes-fiche{ grid-template-columns:1fr; } }

.defilant{ overflow-x:auto; }
.grille-tech{ width:100%; border-collapse:collapse; }
.grille-tech caption{
  text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent); padding-bottom:14px;
}
.grille-tech th,.grille-tech td{
  text-align:left; vertical-align:top; padding:14px 16px 14px 0; border-top:1px solid var(--trait); font-weight:400;
}
.grille-tech tr:last-child th,.grille-tech tr:last-child td{ border-bottom:1px solid var(--trait); }
.grille-tech th{ white-space:nowrap; color:var(--texte); font-size:.94rem; padding-right:26px; }
.grille-tech td{ color:var(--texte-doux); font-size:.92rem; }
@media (max-width:520px){
  .grille-tech th{ white-space:normal; }
}

.pile-tech{ display:flex; flex-direction:column; gap:18px; }
.bloc-tech{ border:1px solid var(--trait); padding:22px; background:var(--fond-2); }
.titre-tech{ color:var(--accent); margin:0; }
.bloc-tech .etiquettes{ margin-top:16px; }

.reperes{ margin:16px 0 0; display:grid; grid-template-columns:1fr auto; gap:10px 18px; }
.reperes dt{ color:var(--texte-doux); font-size:.88rem; }
.reperes dd{
  margin:0; text-align:right; font-family:"IBM Plex Mono",monospace; font-size:.76rem;
  color:var(--texte); font-variant-numeric:tabular-nums;
}
.note-tech{ margin-top:16px; font-size:.78rem; color:var(--texte-faible); font-style:italic; }

/* Trois conseils, sur fond encre */
.conseils{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(240,223,168,.16); border:1px solid rgba(240,223,168,.16); }
@media (max-width:900px){ .conseils{ grid-template-columns:1fr; } }
.conseil{ background:var(--encre-deep); padding:28px 26px; }
.num-conseil{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.16em; color:var(--or); margin:0 0 16px;
}
.conseil h3{ color:#FBF8EE; font-size:1.08rem; margin:0 0 10px; }
.conseil p{ color:#B5B09B; font-size:.92rem; }

/* Questions fréquentes */
.faq{ border-top:1px solid var(--trait); }
.faq details{ border-bottom:1px solid var(--trait); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-family:"Bodoni Moda","Didot",Georgia,serif; font-size:clamp(1.02rem,1.5vw,1.22rem);
  line-height:1.3; color:var(--texte); transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details p{ padding:0 0 24px; max-width:72ch; color:var(--texte-doux); font-size:.95rem; }
@media (prefers-reduced-motion:reduce){
  .faq summary::after{ transition:none; }
}

/* Familles voisines */
.voisins{ margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid var(--trait); }
.liens-voisins{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
@media (max-width:760px){ .liens-voisins{ grid-template-columns:1fr; } }
.liens-voisins a{
  display:block; text-decoration:none; border:1px solid var(--trait); padding:20px 22px;
  transition:border-color .25s ease, background .25s ease;
}
.liens-voisins a:hover{ border-color:var(--accent); background:var(--fond-2); }
.liens-voisins span{
  display:block; font-family:"Bodoni Moda","Didot",Georgia,serif; font-size:1.15rem; margin-bottom:8px; color:var(--texte);
}
.liens-voisins em{ font-style:normal; font-size:.88rem; color:var(--texte-doux); }

/* Grille produits : trois colonnes plutôt que six, les intitulés sont longs */
.etapes--produits{ grid-template-columns:repeat(3,1fr); }
.etapes--produits .etape{ border-bottom:1px solid var(--trait); }
.etapes--produits .etape:nth-child(3n){ border-right:0; }
.etapes--produits .etape:nth-last-child(-n+3){ border-bottom:0; }
@media (max-width:900px){
  .etapes--produits{ grid-template-columns:repeat(2,1fr); }
  .etapes--produits .etape{ border-right:1px solid var(--trait); border-bottom:1px solid var(--trait); }
  .etapes--produits .etape:nth-child(2n){ border-right:0; }
  .etapes--produits .etape:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:620px){
  .etapes--produits{ grid-template-columns:1fr; }
  .etapes--produits .etape{ border-right:0; }
  .etapes--produits .etape:last-child{ border-bottom:0; }
}