/* =========================================================================
   PB DIGITAL SOLUTIONS — direction « L'atelier »
   Papier, encre, objets poses. Pas de degrade, pas de verre, pas de halo :
   ce sont les marqueurs du gabarit par defaut. Ici tout est imprime.
   Ecrit le 2026-10-23. Remplace styles.css, conserve pour revenir en arriere.
   ========================================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  --papier:#F3EFE5;
  --papier-2:#EBE5D7;
  --blanc:#FFFFFF;
  --encre:#16130E;
  --encre-douce:#4A4337;
  --encre-pale:#6E6657;
  --nuit:#14110C;
  --or:#7A5B14;          /* or d'ECRITURE : 5,4:1 sur le papier */
  --or-vif:#ECAC2C;      /* or d'APLAT : uniquement sur fond sombre */
  --trait:#D5CCB8;
  --trait-fort:#16130E;
  --rouge:#A33223;
  --vert:#2F6B43;

  --titre:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --texte:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --main:"Caveat","Segoe Script",cursive;

  --wrap:1340px;
  --gouttiere:22px;
}
@media (min-width:900px){ :root{ --gouttiere:46px; } }

/* ---------- 2. Remise a zero ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.62;
  overflow-x:clip;
  /* grain d'impression */
  background-image:radial-gradient(rgba(22,19,14,.035) 1px,transparent 1px);
  background-size:3px 3px;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
/* Un SVG qui ne porte ni attribut width ni attribut height prend toute la
   largeur disponible : une etoile d'avis devenait une forme de 1 235 px.
   On lui donne une taille par defaut, puis une taille propre la ou il faut. */
svg:not([width]):not([height]){ width:1.15em; height:1.15em; flex:none;
  display:inline-block; vertical-align:-.16em; }
.subtle__icon svg{ width:22px; height:22px; }
.footer__review-stars svg{ width:15px; height:15px; display:inline-block; }
.pack__list svg,.option__list svg,.wz-choice svg,.wz-done svg,.service svg{ width:17px; height:17px; }
.diag__gauge svg{ width:100%; max-width:150px; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--titre); font-weight:400; letter-spacing:-.015em; line-height:1.08; margin:0; }
p{ margin:0 0 14px; }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }

/* ---------- 3. Utilitaires ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:max(var(--gouttiere),env(safe-area-inset-left,0px));
  padding-right:max(var(--gouttiere),env(safe-area-inset-right,0px));
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--nuit); color:var(--papier); padding:12px 18px; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }
/* Pas d'apparition au defilement : c'est une signature du gabarit par defaut,
   et le contenu doit rester lisible meme si le script ne tourne pas. */
.reveal{ opacity:1 !important; transform:none !important; }
.u-hand{ font-family:var(--main); font-style:normal; color:var(--or); font-size:1.12em; }

.tag{
  display:inline-block; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--trait); padding:4px 9px; color:var(--encre-douce); background:var(--papier);
}

/* Selecteurs DOUBLES a dessein : `.page a` et `.art a` valent 0,1,1 et
   ecraseraient la couleur du bouton (0,1,0). Un bouton plein se retrouvait
   alors en or sur encre, a 2,94:1. Une variante se declare toujours au moins
   aussi specifique que les regles generiques du conteneur qui l'englobe. */
.btn.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; text-decoration:none; padding:14px 26px; border:2px solid var(--encre);
  background:transparent; color:var(--encre); cursor:pointer; text-align:center;
  transition:background .2s, color .2s, transform .2s;
}
.btn.btn:hover{ background:var(--encre); color:var(--papier); }
.btn--solid.btn--solid{ background:var(--encre); color:var(--papier); }
.btn--solid.btn--solid:hover{ background:var(--or); border-color:var(--or); color:#fff; }
.btn--ghost.btn--ghost{ border-color:var(--trait); background:transparent; color:var(--encre); }
.btn--ghost.btn--ghost:hover{ background:var(--encre); border-color:var(--encre); color:var(--papier); }

/* ---------- 4. En-tete ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:var(--nuit); color:#F2EDE1;
  padding-top:env(safe-area-inset-top,0px);
}
.header__inner{
  max-width:min(1680px,100%); margin:0 auto;
  padding:12px max(var(--gouttiere),env(safe-area-inset-left,0px));
  display:flex; align-items:center; gap:18px;
}
.wordmark{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.wordmark__badge{
  width:38px; height:38px; flex:none; background:var(--or-vif); color:var(--nuit);
  display:grid; place-items:center; font-family:var(--titre); font-size:1.02rem;
}
.wordmark__name{ font-family:var(--titre); font-size:1.1rem; color:#F2EDE1; }
.nav{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:19px; margin-inline:auto;
}
/* Les rubriques ne respirent qu a partir du moment ou il reste vraiment de la
   place : a 1280 px un ecart plus large les faisait passer sur deux lignes. */
@media (min-width:1440px){
  .header__inner{ gap:clamp(20px,1.8vw,34px); }
  .nav{ gap:clamp(20px,1.6vw,30px); }
}
.nav a{
  text-decoration:none; color:#BDB5A5; font-size:.84rem; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 0; border-bottom:2px solid transparent;
}
.nav a:hover,.nav a.is-active{ color:#F2EDE1; border-bottom-color:var(--or-vif); }
/* double, pour passer devant `.btn.btn` */
.header__cta.header__cta{
  flex:none; padding:10px 18px; border-color:var(--or-vif); background:var(--or-vif);
  color:var(--nuit); font-size:.86rem;
}
.header__cta.header__cta:hover{ background:transparent; color:var(--or-vif); }
.burger{
  display:none; width:44px; height:44px; background:none; border:1px solid #3A342A;
  cursor:pointer; padding:0; place-items:center; margin-left:auto;
}
.burger span{ display:block; width:20px; height:2px; background:#F2EDE1; margin:3px auto; transition:transform .2s,opacity .2s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:1080px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,330px); background:var(--nuit);
    flex-direction:column; gap:0; padding:84px 26px 26px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto; z-index:70;
  }
  .nav a{ padding:13px 0; border-bottom:1px solid #2A251D; font-size:.95rem; }
  .nav.open{ transform:none; }
  .burger{ display:grid; z-index:80; }
  /* double : une requete media n'ajoute aucune specificite, et `.btn.btn`
     ressusciterait le bouton. A 320 px l'en-tete reclamait 378 px et le
     bouton de menu sortait de l'ecran. */
  .header__cta.header__cta{ display:none; }
}
/* tres petit ecran : le nom de la marque ne tient plus a cote du monogramme */
@media (max-width:360px){
  .wordmark__name{ display:none; }
}

/* reperes de progression, uniquement sur grand ecran */
/* Le repere mesure 2 px, mais la zone cliquable doit faire au moins 24 px :
   c'est un lien, pas une decoration. Le trait est dessine par ::before. */
.marks{ position:fixed; left:10px; top:50%; transform:translateY(-50%); z-index:50; display:grid; }
.marks a{ display:grid; align-items:center; width:34px; height:26px; }
.marks a::before{ content:""; display:block; width:16px; height:2px; background:var(--trait); transition:width .2s, background .2s; }
.marks a:hover::before{ background:var(--encre-pale); }
.marks a.is-active::before{ background:var(--or); width:28px; }
@media (max-width:1240px){ .marks{ display:none; } }

/* ---------- 5. Sections ---------- */
.section{ padding-block:clamp(44px,6vw,92px); border-bottom:1px solid var(--trait); }
.section__label{
  font-family:var(--main); font-size:1.5rem; color:var(--or); margin:0 0 4px;
}
.section__title{
  font-size:clamp(1.85rem,4.3vw,3.2rem); margin:0 0 10px;
}
.section__title em{ font-style:italic; color:var(--or); }
.section__sub{ color:var(--encre-douce); margin:0; max-width:62ch; }

/* ---------- 6. Ouverture ---------- */
.hero{ border-bottom:1px solid var(--trait); padding-block:clamp(40px,6vw,86px); }
.hero__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(22px,4vw,58px); align-items:stretch;
}
.kicker{ font-family:var(--main); font-size:1.5rem; color:var(--or); margin:0 0 4px; }
.hero__title{
  font-size:clamp(2.2rem,6.6vw,5rem); line-height:1.02; margin:0 0 16px;
}
.hero__geo{
  display:flex; align-items:center; gap:9px; color:var(--encre-douce);
  font-size:.92rem; margin:0 0 14px;
}
.hero__geo svg{ width:17px; height:17px; flex:none; color:var(--or); }
.hero__sub{ color:var(--encre-douce); max-width:52ch; }
.hero__sub b{ color:var(--encre); font-weight:600; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

/* la fiche de l'artisan : un bristol, pas une carte de verre */
.founder{
  border-top:3px solid var(--encre); padding-top:14px;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
}
.founder__head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.founder__name{ font-family:var(--titre); font-size:1.5rem; }
.founder__role{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-pale);
}
.founder__quote{
  font-family:var(--titre); font-style:italic; font-size:clamp(1.16rem,1.32vw,1.34rem);
  line-height:1.5; margin:0; color:var(--encre);
}
/* la signature : ce qui fait d une fiche un bristol signe */
.founder__sign{
  font-family:var(--main); font-size:1.9rem; color:var(--or); margin:0;
  line-height:1; padding-bottom:10px; border-bottom:1px solid var(--trait);
}
/* l identite, reprise mot pour mot des mentions legales */
.founder__id{ margin:0; display:grid; gap:0; }
.founder__id > div{
  display:flex; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--trait);
}
.founder__id dt{
  flex:none; width:7.4rem; font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--encre-pale);
}
.founder__id dd{ margin:0; font-size:.94rem; color:var(--encre); }
.founder__stats{ margin:0; }
.founder__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:14px; }
.stat__num{ font-family:var(--titre); font-size:1.9rem; color:var(--or); line-height:1; }
.stat__label{ font-size:.78rem; color:var(--encre-pale); margin-top:3px; }

/* bande de preuve */
.trust{ background:var(--papier-2); border-bottom:1px solid var(--trait); }
.trust__in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:18px; padding-block:22px;
}
.tstat b{ font-family:var(--titre); font-size:2rem; display:block; line-height:1; }
.tstat b em{ font-style:italic; color:var(--or); }
.tstat span{ font-size:.84rem; color:var(--encre-pale); }

/* ---------- 7. Le studio ---------- */
.statement{
  font-family:var(--titre); font-size:clamp(1.4rem,3.2vw,2.3rem); line-height:1.24;
  margin:0; max-width:none;
}
.statement em{ font-style:italic; color:var(--or); }
.studio .wrap{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:clamp(16px,2.6vw,46px); align-items:start;
}
.studio .section__label{ grid-column:1 / -1; }
.studio__note{ border-left:3px solid var(--or); padding-left:16px; position:relative; }
.studio__note p{ color:var(--encre-douce); margin:0; }
.studio__note-hand{ font-family:var(--main); font-size:1.5rem; color:var(--or); display:block; margin-bottom:4px; }

/* ---------- 8. Services ---------- */
/* Les filets sont portes par les cases, pas par un fond qui transparait dans
   les gouttieres : sinon la derniere rangee incomplete laisse un aplat gris. */
.services{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,252px),1fr));
  border-top:1px solid var(--trait); border-left:1px solid var(--trait); margin-top:26px;
  list-style:none; padding:0;
}
.service{ background:var(--papier); padding:22px; border-right:1px solid var(--trait); border-bottom:1px solid var(--trait); }
.service h3{ font-size:1.32rem; margin:0 0 8px; }
.service p{ color:var(--encre-douce); font-size:.96rem; margin:0; }
.service .tag{ margin-top:12px; }

/* ---------- 9. Methode ---------- */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
  gap:clamp(18px,3vw,34px); margin-top:26px; list-style:none; padding:0;
}
.step{ border-top:2px solid var(--encre); padding-top:13px; }
.step__num{ font-family:var(--main); font-size:1.7rem; color:var(--or); line-height:1; margin-bottom:4px; }
.step h3{ font-size:1.22rem; margin:0 0 6px; }
.step p{ color:var(--encre-douce); font-size:.95rem; margin:0; }

/* ---------- 10. Realisations ---------- */
.realisations__lead{ color:var(--encre-douce); max-width:66ch; margin:0 0 26px; }
.feat{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));
  gap:clamp(26px,4vw,56px);
}
/* la fiche projet est un tirage photo pose de travers */
.fcard{
  display:flex; flex-direction:column; text-decoration:none; background:var(--blanc);
  border:1px solid #E2DACA; padding:11px 11px 0;
  box-shadow:0 18px 40px -22px rgba(22,19,14,.55), 0 2px 0 rgba(22,19,14,.07);
  transform:rotate(-.9deg); transition:transform .3s ease, box-shadow .3s ease;
}
.feat > .fcard:nth-child(even){ transform:rotate(.75deg); }
.fcard:hover{ transform:rotate(0) translateY(-5px); box-shadow:0 26px 54px -24px rgba(22,19,14,.6); }
.fbrowser{
  display:flex; align-items:center; gap:7px; background:var(--papier-2);
  border:1px solid var(--trait); border-bottom:0; padding:8px 11px;
}
.fbrowser__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.fbrowser__url{
  margin-left:7px; flex:1; display:flex; align-items:center; gap:6px; background:var(--blanc);
  border:1px solid var(--trait); padding:4px 10px; font-size:.74rem; color:var(--encre-pale);
}
.fbrowser__url svg{ width:12px; height:12px; flex:none; opacity:.6; }
.fhero{ position:relative; display:block; }
.fhero--shot{ padding:0; }
.fshot{ width:100%; aspect-ratio:1280/800; object-fit:cover; object-position:top center; border:1px solid #E8E2D4; }
.fbadge{
  position:absolute; top:11px; right:11px; z-index:2; font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; padding:5px 11px; background:var(--nuit); color:var(--or-vif);
}
/* le haut est reserve a l annotation manuscrite, qui deborde du tirage */
.fbody{ display:flex; flex-direction:column; gap:10px; padding:32px 3px 18px; flex:1; }
.ftitle{ font-family:var(--titre); font-size:1.45rem; line-height:1.14; }
.fdesc{ color:var(--encre-douce); font-size:.96rem; }
.ftags{ display:flex; flex-wrap:wrap; gap:7px; }
.flink{
  margin-top:auto; font-weight:600; color:var(--or);
  border-bottom:2px solid var(--or); align-self:flex-start; padding-bottom:2px;
}

.rsub{ margin:clamp(34px,5vw,62px) 0 22px; border-top:1px solid var(--trait); padding-top:22px; }
.rsub__h{ display:block; font-family:var(--titre); font-size:1.7rem; }
.rsub__s{ color:var(--encre-pale); font-size:.95rem; }

.mini{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
  border-top:1px solid var(--trait); border-left:1px solid var(--trait);
  margin-top:clamp(26px,4vw,48px);
}
.mcard{
  background:var(--papier); padding:16px; text-decoration:none; display:flex;
  flex-direction:column; gap:9px; transition:background .2s;
  border-right:1px solid var(--trait); border-bottom:1px solid var(--trait);
}
.mcard:hover{ background:var(--blanc); }
.mshot{ width:100%; aspect-ratio:1280/800; object-fit:cover; object-position:top center; border:1px solid var(--trait); }
.micon{ width:40px; height:40px; object-fit:cover; border:1px solid var(--trait); }
.micon--you{
  display:grid; place-items:center; font-family:var(--titre); font-size:1.5rem;
  background:var(--or-vif); color:var(--nuit); border:0;
}
.mlogo{ font-family:var(--titre); font-size:1.22rem; }
.mdesc{ color:var(--encre-douce); font-size:.89rem; line-height:1.5; }
.mlink{ margin-top:auto; color:var(--or); font-size:.8rem; letter-spacing:.05em; }
.mcard--you{ background:var(--papier-2); }

/* ---------- 11. Tarifs ---------- */
.pricing__intro{ color:var(--encre-douce); max-width:66ch; margin:0 0 24px; }
.packs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(18px,3vw,30px); }
.pack{ border:2px solid var(--encre); background:var(--papier); padding:22px; display:flex; flex-direction:column; }
.pack--featured{ background:var(--blanc); box-shadow:7px 7px 0 var(--or-vif); }
.pack__badge{
  align-self:flex-start; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  background:var(--nuit); color:var(--or-vif); padding:4px 10px; margin-bottom:10px;
}
.pack__name{ font-family:var(--titre); font-size:1.55rem; margin:0 0 4px; }
.pack__from{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-pale); }
.pack__price{ display:flex; align-items:baseline; gap:6px; margin:4px 0 12px; }
.pack__amount{ font-family:var(--titre); font-size:2.5rem; line-height:1; }
.pack__rule{ height:1px; background:var(--trait); margin:10px 0 14px; }
.pack__list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.pack__list li{ padding-left:20px; position:relative; color:var(--encre-douce); font-size:.95rem; }
.pack__list li::before{ content:"—"; position:absolute; left:0; color:var(--or); }
.pack__note{ font-size:.85rem; color:var(--encre-pale); margin:0 0 14px; }
.pack .btn{ margin-top:auto; }

.options{ margin-top:clamp(32px,5vw,58px); }
.options__title{ font-family:var(--titre); font-size:1.7rem; margin:0 0 16px; }
.options__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
  border-top:1px solid var(--trait); border-left:1px solid var(--trait); }
.option{ background:var(--papier); padding:17px; border-right:1px solid var(--trait); border-bottom:1px solid var(--trait); }
.option__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.option__name{ font-family:var(--titre); font-size:1.18rem; }
.option__price{ font-weight:700; color:var(--or); white-space:nowrap; }
.option__flag{ font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-pale); }
.option__list{ list-style:none; margin:9px 0 0; padding:0; display:grid; gap:5px; font-size:.9rem; color:var(--encre-douce); }
.option__list li{ padding-left:16px; position:relative; }
.option__list li::before{ content:"·"; position:absolute; left:4px; color:var(--or); }

.pricing__indicative,.pricing__domain-note{ font-size:.88rem; color:var(--encre-pale); margin-top:14px; }
.pricing__cta{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.subtle-blocks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr)); gap:clamp(16px,3vw,26px); margin-top:clamp(28px,4vw,48px); }
.subtle{ border-top:2px solid var(--encre); padding-top:12px; }
.subtle h3{ font-size:1.18rem; margin:0 0 6px; }
.subtle p{ color:var(--encre-douce); font-size:.93rem; margin:0; }
.subtle__icon{ color:var(--or); width:22px; height:22px; margin-bottom:8px; }
.callout{ border-left:3px solid var(--or); background:var(--papier-2); padding:16px 18px; margin-top:22px; }
.callout p{ margin:0; color:var(--encre-douce); }
.assure{ list-style:none; margin:14px 0 10px; padding:0; display:grid; gap:6px;
  font-size:.92rem; color:var(--encre-douce); }
.assure li{ display:flex; align-items:center; gap:9px; }
.assure svg{ width:16px; height:16px; color:var(--or); flex:none; }

/* ---------- 12. Diagnostic ---------- */
.diag__card{
  border:2px solid var(--encre); background:var(--blanc); padding:clamp(20px,3vw,34px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(20px,3vw,44px); align-items:center; box-shadow:8px 8px 0 var(--papier-2);
}
.diag__title{ font-family:var(--titre); font-size:clamp(1.5rem,3vw,2.3rem); margin:0 0 10px; }
.diag__text{ color:var(--encre-douce); margin:0 0 16px; }
/* .diag__proof est la COLONNE de droite (jauge + legende), pas une phrase. */
.diag__proof{ display:grid; justify-items:center; gap:12px; }
.diag__proof > p{ margin:0; }
/* Le score se pose AU CENTRE du cercle, et le cercle de fond etait blanc :
   invisible sur du papier. */
.diag__gauge{ position:relative; display:grid; place-items:center; width:164px; max-width:100%; margin-inline:auto; }
.diag__gauge b{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--titre); font-weight:400; font-size:2.7rem; color:var(--or); }
.diag__gauge circle:first-of-type{ stroke:var(--trait); }
.diag__caption{ font-family:var(--main); font-size:1.22rem; line-height:1.3;
  color:var(--or); text-align:center; max-width:24ch; }
.diag__cta{ margin-top:6px; }
.diag__body{ color:var(--encre-douce); }

/* ---------- 13. Partenaire ---------- */
.partner__card{
  border:1px solid var(--trait); background:var(--papier-2); padding:clamp(18px,3vw,30px);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px,2.4vw,32px);
}
.partner__logo{ width:clamp(96px,9vw,128px); flex:none; }
.partner__body{ flex:1 1 300px; min-width:0; }
.partner__cta{ flex:none; align-self:center; }
.partner__name{ font-family:var(--titre); font-size:1.4rem; margin:0 0 6px; }
.partner__text{ color:var(--encre-douce); margin:0; max-width:64ch; }
.partner__body{ color:var(--encre-douce); }
.partner__cta{ color:var(--or); font-weight:600; border-bottom:2px solid var(--or); text-decoration:none; }

/* ---------- 14. Contact : le parcours en etapes ---------- */
.contact__head{
  margin-bottom:clamp(22px,3vw,34px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(16px,2.6vw,46px); align-items:end;
}
.contact__head-r{ align-self:end; }
.contact__head .assure{ margin-top:0; }
.contact__phone{ color:var(--or); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; min-height:26px; }
.wz{ border:2px solid var(--encre); background:var(--blanc); padding:clamp(18px,3vw,32px); }
.wz-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.wz-steps{ font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-pale); }
.wz-bar{ height:3px; background:var(--trait); margin-bottom:22px; }
.wz-bar__fill{ height:100%; background:var(--or); width:0; transition:width .3s ease; }
.wz-title{ font-family:var(--titre); font-size:clamp(1.3rem,2.6vw,1.9rem); margin:0 0 14px; }
.wz-pane{ display:block; }
.wz-pane.wz-hidden,.wz-hidden{ display:none !important; }
.wz-fieldset{ border:0; margin:0 0 16px; padding:0; }
.wz-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px; }
.wz-chips,.wz-choices,.wz-checks{ display:flex; flex-wrap:wrap; gap:9px; }
.wz-chip,.wz-check,.wz-choice{
  border:2px solid var(--trait); background:var(--papier); padding:11px 15px; cursor:pointer;
  font-size:.93rem; transition:border-color .18s, background .18s;
}
.wz-chip:hover,.wz-check:hover,.wz-choice:hover{ border-color:var(--encre); }
.wz-chip.on,.wz-check.on,.wz-choice.on{ border-color:var(--or); background:var(--papier-2); box-shadow:inset 0 0 0 1px var(--or); }
.wz-choices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:14px;
}
.wz-choice{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  text-align:left; padding:clamp(18px,2.2vw,26px);
}
.wz-choice h3{ font-family:var(--titre); font-size:1.26rem; margin:0; }
.wz-choice p{ margin:0; color:var(--encre-douce); font-size:.94rem; }
.wz-choice__tag{ margin-top:4px; }
.wz-choice__ic{ color:var(--or); flex:none; width:22px; height:22px; }
.wz-choice__tag{ display:block; font-size:.8rem; color:var(--encre-pale); }
.wz-box{ border:1px solid var(--trait); background:var(--papier-2); padding:14px 16px; margin:14px 0; }
.wz-opt{ font-size:.86rem; color:var(--encre-pale); }
.wz-foot{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--trait); }
.wz-back{ background:none; border:0; color:var(--encre-pale); cursor:pointer; text-decoration:underline; padding:8px 0; }
.wz-spacer{ flex:1; }
.wz-sendnow{ font-size:.88rem; }
.wz-code-note,.wz-done{ font-size:.9rem; color:var(--encre-douce); }
.wz-done{ display:flex; gap:12px; align-items:flex-start; }
.wz-done__ic{ color:var(--vert); flex:none; width:26px; height:26px; }

.field{ display:block; margin-bottom:13px; }
.field > span,.field label{ display:block; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; color:var(--encre-pale); margin-bottom:5px; }
.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%; font:inherit; color:var(--encre); background:var(--blanc);
  border:2px solid var(--trait); padding:12px 13px;
}
.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{ outline:0; border-color:var(--or); box-shadow:0 0 0 3px rgba(122,91,20,.16); }
.field--hp{ position:absolute; left:-9999px; }
.req{ color:var(--rouge); }
.opt{ color:var(--encre-pale); font-weight:400; text-transform:none; letter-spacing:0; }
.form__note,.form__privacy{ font-size:.85rem; color:var(--encre-pale); }

/* ---------- 15. Pied de page ---------- */
.footer{ background:var(--nuit); color:#D8D2C5; padding-block:clamp(34px,5vw,62px); }
.footer__inner{
  max-width:var(--wrap); margin:0 auto;
  padding-left:max(var(--gouttiere),env(safe-area-inset-left,0px));
  padding-right:max(var(--gouttiere),env(safe-area-inset-right,0px));
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px clamp(18px,2.2vw,36px);
}
.footer h3,.footer h4{ color:#F2EDE1; font-size:1.1rem; margin:0 0 10px; }
.footer a{ color:#D8D2C5; text-decoration:none; }
.footer a:hover{ color:var(--or-vif); }
/* 26 px de haut : une cible tactile ne descend pas sous 24 px. */
.footer__links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2px clamp(14px,1.5vw,24px); font-size:.92rem; flex:1 1 320px;
}
.footer__links a,.footer a{ display:inline-flex; align-items:center; min-height:26px; }
.crumb a{ display:inline-flex; align-items:center; min-height:26px; }
.footer__legal{ font-size:.84rem; color:#9A9284; flex:none; }
.footer__review{
  border:1px solid #2A251D; padding:16px clamp(16px,2vw,26px);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,44px);
}
.footer__review-l{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); }
.footer__review-t{ font-family:var(--titre); color:#F2EDE1; font-size:1.05rem; }
.footer__review-s{ font-size:.86rem; color:#9A9284; }
.footer__review-stars{ color:var(--or-vif); letter-spacing:.1em; }
.footer__review-l div{ font-size:.86rem; }
.footer__review-btn{ display:inline-flex; align-items:center; gap:8px; flex:none; border:1px solid var(--or-vif); color:var(--or-vif); padding:8px 14px; font-size:.86rem; }
.footer__review-btn:hover{ background:var(--or-vif); color:var(--nuit); }
.gbadge{ display:inline-flex; align-items:center; gap:7px; }

/* bouton flottant WhatsApp */
.wa-fab{
  position:fixed; right:16px; bottom:16px; z-index:55; width:54px; height:54px;
  display:grid; place-items:center; background:var(--vert); color:#fff; border-radius:50%;
  box-shadow:0 10px 26px -10px rgba(22,19,14,.7);
}
.wa-fab:hover{ transform:translateY(-2px); }

/* ---------- 16. Pages de texte, blog, erreur ---------- */
.page{ padding-block:clamp(36px,5vw,72px); }
.page--wide{ max-width:none; }
.page h1{ font-size:clamp(1.9rem,4.4vw,3rem); margin:0 0 14px; }
.page h2{ font-size:clamp(1.35rem,2.6vw,1.9rem); margin:30px 0 10px; }
.page h3{ font-size:1.2rem; margin:22px 0 8px; }
.page p,.page li{ color:var(--encre-douce); }
.page ul,.page ol{ padding-left:20px; }
.page a{ color:var(--or); }
.crumb{ font-size:.84rem; color:var(--encre-pale); margin-bottom:12px; }
.crumb a{ color:var(--encre-pale); }
.code{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; background:var(--papier-2); padding:2px 6px; font-size:.92em; }

.blog__intro{ color:var(--encre-douce); max-width:66ch; }
.posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  border-top:1px solid var(--trait); border-left:1px solid var(--trait); margin-top:26px; list-style:none; padding:0; }
.post{ background:var(--papier); padding:20px; display:flex; flex-direction:column; gap:8px;
  border-right:1px solid var(--trait); border-bottom:1px solid var(--trait); }
.post__meta{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-pale); }
.post__title{ font-family:var(--titre); font-size:1.32rem; margin:0; line-height:1.16; }
.post__title a{ text-decoration:none; }
.post__desc{ color:var(--encre-douce); font-size:.95rem; margin:0; }
.post__link{ margin-top:auto; color:var(--or); font-weight:600; text-decoration:none; border-bottom:2px solid var(--or); align-self:flex-start; }

.art{ padding-block:clamp(32px,5vw,64px); }
.art__lede{ font-family:var(--titre); font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.4; color:var(--encre); margin:0 0 22px; }
.art__meta{ font-size:.82rem; color:var(--encre-pale); margin-bottom:12px; }
.art p,.art li{ color:var(--encre-douce); }
.art h2{ font-size:clamp(1.4rem,2.8vw,2rem); margin:34px 0 10px; }
.art h3{ font-size:1.22rem; margin:24px 0 8px; }
.art__table-wrap{ overflow-x:auto; margin:18px 0; }
.art__table{ border-collapse:collapse; width:100%; min-width:460px; }
.art__table th,.art__table td{ border:1px solid var(--trait); padding:9px 12px; text-align:left; font-size:.93rem; }
.art__table th{ background:var(--papier-2); font-family:var(--titre); font-weight:400; }
.art__more{ margin-top:34px; border-top:1px solid var(--trait); padding-top:18px; }
.art__cta{ border:2px solid var(--encre); padding:20px; margin-top:28px; background:var(--papier-2); }

.error-page{
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center;
  padding-inline:max(var(--gouttiere),env(safe-area-inset-left,0px));
}

/* ---------- 17. Ecrans pliants (iPhone Duo) ---------- */
/* Safari ne sait pas signaler la pliure : on ne devine aucune largeur,
   les grilles ci-dessus sont deja fluides. Reste la hauteur. */
@media (min-width:700px) and (max-height:720px){
  .hero{ padding-block:40px 32px; }
  .hero__title{ font-size:clamp(2rem,4.2vw,2.9rem); }
  .section{ padding-block:46px; }
}
@media (horizontal-viewport-segments:2){
  .feat,.mini,.packs,.hero__grid{ grid-template-columns:1fr 1fr; }
  .feat,.mini,.packs,.hero__grid{ column-gap:max(26px,env(viewport-segment-left 1 0,26px)); }
}
@media (vertical-viewport-segments:2){
  .feat,.mini,.packs,.hero__grid{ grid-template-columns:1fr; }
}

/* ---------- 18. Impression ---------- */
@media print{
  .header,.marks,.wa-fab,.wz,.footer__review{ display:none !important; }
  body{ background:#fff; }
  .fcard{ transform:none; box-shadow:none; }
}

/* =========================================================================
   LES PIECES VIVANTES - ajoutees le 2026-10-24
   Le banc d'essai, l'etabli, et les annotations a la main.
   ========================================================================= */

/* ---------- Le banc d'essai : la page se mesure devant le visiteur ------ */
.banc{ background:var(--nuit); color:#E8E2D4; border-bottom:1px solid var(--trait); }
.banc__in{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:16px clamp(18px,2.6vw,44px); padding-block:clamp(20px,2.8vw,30px);
}
.banc__t{ flex:1 1 230px; min-width:0; }
.banc__k{
  display:block; font-family:var(--main); font-size:1.4rem; color:var(--or-vif); line-height:1;
}
.banc__h{ display:block; font-family:var(--titre); font-size:clamp(1.12rem,1.5vw,1.4rem); font-weight:400; margin-top:4px; }
.banc__d{
  display:flex; flex-wrap:wrap; gap:14px clamp(16px,2vw,30px); margin:0; flex:0 1 auto;
}
.banc__d > div{ border-left:1px solid #3A342A; padding-left:13px; min-width:0; }
.banc__d dt{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#9A9284; margin-bottom:3px;
}
.banc__d dd{ margin:0; font-family:var(--titre); font-size:1.6rem; line-height:1; color:#F2EDE1; }
.banc__d dd b{ font-weight:400; color:var(--or-vif); font-variant-numeric:tabular-nums; }
.banc__n{
  font-family:var(--main); font-size:1.18rem; color:#B9B1A1; margin:0; line-height:1.25;
  flex:1 1 180px; text-align:right;
}
@media (max-width:780px){ .banc__n{ text-align:left; } }

/* ---------- L'etabli : la piste des produits sur son rail gradue -------- */
.etabli{ margin-top:clamp(24px,4vw,44px); }
.etabli__piste{
  display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none;
  margin-inline:calc(-1 * max(var(--gouttiere),env(safe-area-inset-left,0px)));
  padding:10px max(var(--gouttiere),env(safe-area-inset-left,0px)) 22px;
  cursor:grab;
}
.etabli__piste::-webkit-scrollbar{ display:none; }
.etabli__piste.tire{ cursor:grabbing; scroll-snap-type:none; }
.etabli__piste.tire .obj{ transform:none; }
.etabli__piste:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }

/* chaque produit est un tirage pose sur l'etabli, legerement de travers */
.obj{
  flex:0 0 clamp(236px,25vw,310px); scroll-snap-align:start; text-decoration:none;
  background:var(--blanc); border:1px solid #E2DACA; padding:9px 9px 0;
  display:flex; flex-direction:column;
  box-shadow:0 14px 30px -20px rgba(22,19,14,.55), 0 2px 0 rgba(22,19,14,.06);
  transform:rotate(-.7deg); transition:transform .3s ease, box-shadow .3s ease;
}
.etabli__piste > .obj:nth-child(even){ transform:rotate(.6deg); }
.etabli__piste > .obj:nth-child(3n){ transform:rotate(-.3deg); }
.obj:hover,.obj:focus-visible{
  transform:rotate(0) translateY(-5px); box-shadow:0 24px 46px -22px rgba(22,19,14,.6);
}
.obj__fen{ display:block; }
.obj__barre{
  display:flex; align-items:center; gap:5px; background:var(--papier-2);
  border:1px solid var(--trait); border-bottom:0; padding:6px 9px;
}
.obj__barre i{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--trait); }
.obj__barre i:first-child{ background:#E0A59C; }
.obj__barre i:nth-child(2){ background:#E6CE93; }
.obj__barre i:nth-child(3){ background:#A8C9AE; }
.obj__url{
  margin-left:5px; flex:1; min-width:0; background:var(--blanc); border:1px solid var(--trait);
  padding:3px 8px; font-size:.68rem; color:var(--encre-pale);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.obj__shot{
  width:100%; aspect-ratio:1280/800; object-fit:cover; object-position:top center;
  border:1px solid #E8E2D4; display:block;
}
.obj__nom{ font-family:var(--titre); font-size:1.26rem; margin-top:12px; }
.obj__desc{ color:var(--encre-douce); font-size:.87rem; line-height:1.5; margin-top:5px; }
.obj__lien{
  margin-top:auto; padding:12px 0 14px; color:var(--or); font-size:.79rem; letter-spacing:.05em;
}
/* la case vide : une place qui attend */
.obj--vous{ background:var(--papier-2); border-style:dashed; border-color:var(--or); }
.obj--vous .obj__plus{
  display:grid; place-items:center; aspect-ratio:1280/800; background:var(--or-vif);
  color:var(--nuit); font-family:var(--titre); font-size:3rem; line-height:1;
}

/* le rail gradue : c'est la barre de defilement, dessinee comme une regle */
.etabli__rail{
  position:relative; height:21px; border-top:1px solid var(--trait-fort);
  background-image:repeating-linear-gradient(to right,var(--trait) 0 1px,transparent 1px 28px);
  background-size:100% 7px; background-repeat:no-repeat; background-position:0 0;
}
.etabli__curseur{
  position:absolute; top:-2px; height:3px; background:var(--encre); transition:left .12s linear;
}
.etabli__pos{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:9px 0 0; font-size:.88rem; color:var(--encre-pale);
}
.etabli__pos b{ font-family:var(--titre); font-size:1.5rem; color:var(--encre); font-weight:400; }
.etabli__nom{ color:var(--encre-douce); }
.etabli__aide{ margin-left:auto; font-family:var(--main); font-size:1.14rem; color:var(--or); }

/* ---------- L'annotation a la main, posee sur le tirage ---------------- */
.fhero{ overflow:visible; }
.note-main{
  position:absolute; left:10px; bottom:-14px; z-index:3; max-width:min(78%,290px);
  display:flex; align-items:flex-end; gap:7px;
  background:var(--papier); border:1px solid var(--trait);
  padding:7px 12px 8px; transform:rotate(-1.4deg);
  box-shadow:0 8px 18px -12px rgba(22,19,14,.5);
  font-family:var(--main); font-size:1.24rem; line-height:1.16; color:var(--encre);
}
.note-main svg{ width:17px; height:19px; flex:none; color:var(--or); margin-bottom:1px; }
.fcard:hover .note-main{ transform:rotate(0); }
@media (max-width:560px){ .note-main{ font-size:1.12rem; max-width:88%; } }

@media (prefers-reduced-motion:reduce){
  .obj,.note-main,.etabli__curseur{ transition:none; }
}