/* ============================================================
   SpookySo -- theme "sophie"
   Généré depuis le handoff Claude Design (_src/base.css + _src/pages/*.css).
   Ne pas éditer à la main : régénérer via scratchpad/build-sophie-assets.js.
   ============================================================ */

/* ============================================================
   SpookySo · socle commun (inliné dans chaque fichier livré)
   Source : _src/base.css · éditer ici puis reconstruire
   ============================================================ */

/* ---------- Tokens (FIXES, brief §4) ---------- */
:root{
  --color-black-pure:#0A0A0A;
  --color-black-soft:#141414;
  --color-charcoal:#1E1E1E;
  --color-grey-dark:#2A2A2A;
  --color-white-pure:#FFFFFF;
  --color-white-soft:#F5F5F5;
  --color-grey-light:#B8B8B8;
  --color-grey-medium:#7A7A7A;
  --color-accent-primary:#C08B8B;
  --color-accent-text:#D4A5A5;
  --color-accent-hover:#D4A5A5;
  --color-accent-dark:#9A6B6B;
  --color-accent-light:#E8D4D4;
  --color-success:#4A7C59;
  --color-warning:#E8B04B;
  --color-error:#B85450;
  --color-info:#5B7C99;
  --gradient-hero:linear-gradient(135deg,#0A0A0A 0%,#1E1E1E 100%);
  --gradient-accent:linear-gradient(90deg,#C08B8B 0%,#9A6B6B 100%);
  --gradient-overlay:linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.3) 100%);
  --font-heading:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-accent:'Amatic SC',cursive;
  --font-mono:'JetBrains Mono',monospace;
  --text-xs:clamp(11px,10.67px + .104vw,12px);
  --text-sm:clamp(13px,12.67px + .104vw,14px);
  --text-base:clamp(15px,14.67px + .104vw,16px);
  --text-lg:clamp(17px,16px + .3125vw,20px);
  --text-xl:clamp(20px,18.67px + .4167vw,24px);
  --text-2xl:clamp(24px,22px + .625vw,30px);
  --text-3xl:clamp(30px,26.67px + 1.0417vw,40px);
  --text-4xl:clamp(36px,30.67px + 1.6667vw,52px);
  --text-5xl:clamp(44px,36px + 2.5vw,68px);
  --leading-none:1;
  --leading-tight:1.15;
  --leading-snug:1.3;
  --leading-normal:1.6;
  --leading-relaxed:1.75;
  --leading-loose:2;
  --tracking-tighter:-.04em;
  --tracking-tight:-.02em;
  --tracking-normal:0;
  --tracking-wide:.08em;
  --tracking-wider:.12em;
  --tracking-widest:.16em;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;
  --space-5xl:128px;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-xl:12px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --shadow-xl:0 24px 64px rgba(0,0,0,.55);
  --shadow-glow:0 0 20px rgba(192,139,139,.15);
  --duration-fast:120ms;
  --duration-normal:250ms;
  --duration-slow:400ms;
  --ease-default:cubic-bezier(.4,0,.2,1);
  --container-max:1280px;
  --container-narrow:720px;
  --container-form:640px;
  /* dérivés internes */
  --pad-x:clamp(20px,5vw,64px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --underline-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='4'%3E%3Cpath d='M0 2.5 Q 12 1.6 24 2.4 T 48 2.3' fill='none' stroke='%23C08B8B' stroke-width='1'/%3E%3C/svg%3E");
  --underline-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='4'%3E%3Cpath d='M0 2.6 Q 10 1.2 22 2.5 T 48 2.1' fill='none' stroke='%23D4A5A5' stroke-width='1.7'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--color-black-pure);
  color:var(--color-grey-light);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:400;
  line-height:var(--leading-normal);
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,h4{color:var(--color-white-soft);font-family:var(--font-heading);font-weight:500;line-height:var(--leading-tight);margin:0;text-wrap:balance}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
img,svg{display:block;max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0}
input,select,textarea{font:inherit}
::selection{background:var(--color-accent-dark);color:var(--color-white-pure)}
.mono{font-family:var(--font-mono)}
.visually-hidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);border:0;white-space:nowrap}

/* Focus visible : anneau rose 2px, décalé de 2px (brief §10) */
:focus-visible{box-shadow:var(--shadow-glow);outline:2px solid var(--color-accent-text);outline-offset:2px}

/* Lien d'évitement */
.skip{
  background:var(--color-black-soft);border:1px solid var(--color-accent-dark);
  color:var(--color-white-soft);font-size:var(--text-sm);left:var(--space-md);
  padding:var(--space-sm) var(--space-md);
  position:fixed;top:var(--space-md);
  transform:translateY(calc(-100% - 24px));
  transition:transform var(--duration-fast) var(--ease-default);z-index:300;
}
.skip:focus-visible,.skip--demo{transform:none}
.skip--demo{position:static}

/* ---------- Layout ---------- */
.container{margin-inline:auto;max-width:var(--container-max);padding-inline:var(--pad-x)}
.container--narrow{max-width:calc(var(--container-narrow) + 2*var(--pad-x))}
.container--form{max-width:calc(var(--container-form) + 2*var(--pad-x))}
.section{padding-block:var(--space-4xl)}
.section--tight{padding-block:var(--space-3xl)}
.page-top{padding-top:clamp(120px,18vh,176px)}

.section-head{margin-bottom:var(--space-2xl);max-width:56ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head h2{font-size:var(--text-4xl);font-weight:600;letter-spacing:var(--tracking-tight)}
.section-head .lede{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);margin-top:var(--space-md)}

/* Numérotation gravée (JetBrains Mono, brief §5) */
.plate-no{
  color:var(--color-accent-primary);
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-widest);
  margin-bottom:var(--space-md);
  text-transform:uppercase;
}

/* ---------- Kit décoratif ---------- */
.rule-orn{align-items:center;color:var(--color-grey-dark);display:flex;gap:var(--space-md)}
.rule-orn::before,.rule-orn::after{background:currentColor;content:'';flex:1;height:1px}
.rule-orn--start::before{flex:0 0 40px}
.rule-orn--end::after{flex:0 0 40px}
.rule-orn .orn{color:var(--color-accent-dark);flex:none}

.spec-frame{
  background:var(--color-black-pure);
  border:1px solid var(--color-grey-dark);
  color:var(--color-white-soft);
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-wide);
  outline:1px solid var(--color-grey-dark);
  outline-offset:3px;
  padding:var(--space-sm) var(--space-md);
}
.spec-frame--label{color:var(--color-grey-light);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}

.pin{background:var(--color-grey-dark);border-radius:50%;box-shadow:inset 1px 1px 1px rgba(245,245,245,.35),0 1px 2px rgba(0,0,0,.8);height:7px;left:50%;margin-left:-4px;position:absolute;top:10px;width:7px}

.hand-note{color:var(--color-accent-text);font-family:var(--font-accent);font-size:var(--text-xl);letter-spacing:.02em;line-height:var(--leading-snug)}

.photo-credit{background:rgba(11,11,11,.62);border:1px solid rgba(245,245,245,.1);color:var(--color-white-soft);font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;padding:3px 8px;position:absolute;right:8px;text-decoration:none;text-transform:uppercase;top:8px;transition:background var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default);z-index:4}
.photo-credit:hover{background:rgba(11,11,11,.9);color:var(--color-accent-text)}

.grain{isolation:isolate;position:relative}
.grain::after{background-image:var(--grain);content:'';inset:0;opacity:.05;pointer-events:none;position:absolute;z-index:1}

/* Majuscule ornée (gabarit lecture) */
.dropcap::first-letter{
  color:var(--color-accent-primary);
  float:left;
  font-family:var(--font-heading);
  font-size:3.6em;
  line-height:.82;
  padding:.04em .12em 0 0;
}

/* ---------- Boutons ---------- */
.btn{align-items:center;
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  display:inline-flex;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;gap:var(--space-sm);justify-content:center;
  letter-spacing:var(--tracking-wide);
  min-height:48px;padding:var(--space-sm) var(--space-xl);position:relative;
  text-align:center;text-transform:uppercase;
  transition:background-color var(--duration-fast) var(--ease-default),
             color var(--duration-fast) var(--ease-default),
             border-color var(--duration-fast) var(--ease-default),
             background-size var(--duration-normal) var(--ease-default);white-space:nowrap;
}
.btn--sm{min-height:44px;padding-inline:var(--space-lg)}

.btn--primary{background-color:var(--color-accent-primary);color:var(--color-black-pure)}
.btn--primary:is(:hover,.demo-hover){background-color:var(--color-accent-hover)}
.btn--primary:is(:active,.demo-active){background-color:var(--color-accent-dark)}

.btn--outline{
  background-image:linear-gradient(var(--color-accent-primary),var(--color-accent-primary));background-position:left center;
  background-repeat:no-repeat;background-size:0% 100%;border-color:var(--color-accent-dark);
  color:var(--color-accent-text);
}
.btn--outline:is(:hover,.demo-hover){background-size:100% 100%;border-color:var(--color-accent-primary);color:var(--color-black-pure)}
.btn--outline:is(:active,.demo-active){background-image:linear-gradient(var(--color-accent-dark),var(--color-accent-dark));background-size:100% 100%;border-color:var(--color-accent-dark);color:var(--color-black-pure)}

.btn--ghost{color:var(--color-grey-light);padding-inline:var(--space-md)}
.btn--ghost:is(:hover,.demo-hover){background-image:var(--underline-2);background-position:center bottom 8px;background-repeat:repeat-x;background-size:48px 4px;color:var(--color-white-soft)}

.btn:is(:disabled,.is-disabled){cursor:not-allowed}
.btn--primary:is(:disabled,.is-disabled){background-color:var(--color-grey-dark);color:var(--color-grey-medium)}
.btn--outline:is(:disabled,.is-disabled){background-size:0% 100%;border-color:var(--color-grey-dark);color:var(--color-grey-medium)}
.btn--ghost:is(:disabled,.is-disabled){background-image:none;color:var(--color-grey-medium)}

.btn.is-loading{color:transparent}
.btn.is-loading::after{
  animation:btnspin .8s linear infinite;
  border:2px solid rgba(10,10,10,.35);border-radius:50%;border-top-color:var(--color-black-pure);
  content:'';height:14px;position:absolute;width:14px;
}
.btn--outline.is-loading::after,.btn--ghost.is-loading::after{border-color:rgba(212,165,165,.3);border-top-color:var(--color-accent-text)}
@keyframes btnspin{to{transform:rotate(1turn)}}

/* ---------- Liens encrés ---------- */
.lnk{
  background-image:var(--underline-1);background-position:left bottom;
  background-repeat:repeat-x;background-size:48px 4px;
  color:var(--color-accent-text);
  padding-bottom:3px;
  transition:color var(--duration-fast) var(--ease-default);
}
.lnk:is(:hover,.demo-hover){background-image:var(--underline-2);color:var(--color-accent-light)}
.lnk--muted{background-image:none;color:var(--color-grey-light)}
.lnk--muted:is(:hover,.demo-hover){background-image:var(--underline-2);color:var(--color-white-soft)}

/* ---------- Badges de statut ---------- */
.badge{align-items:center;
  background:rgba(10,10,10,.72);
  border:1px solid var(--color-grey-dark);
  border-radius:var(--radius-sm);
  color:var(--color-grey-light);
  display:inline-flex;
  font-family:var(--font-mono);font-size:var(--text-xs);gap:8px;
  letter-spacing:var(--tracking-wider);
  padding:4px 10px;text-transform:uppercase;
}
.badge::before{background:var(--color-grey-medium);border-radius:50%;content:'';flex:none;height:6px;width:6px}
.badge--available{border-color:rgba(74,124,89,.55)}
.badge--available::before{background:var(--color-success)}
.badge--reserved{border-color:rgba(232,176,75,.5)}
.badge--reserved::before{background:var(--color-warning)}
.badge--done{background:rgba(10,10,10,.55);color:var(--color-grey-light)}
.badge__count{color:var(--color-warning);letter-spacing:var(--tracking-wide)}

/* ---------- Formulaires ---------- */
.field{display:grid;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.field__label{color:var(--color-white-soft);font-size:var(--text-sm);font-weight:500}
.field__label .req{color:var(--color-accent-text)}
.field__hint{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300}
.input,.textarea,.select{
  background:var(--color-black-pure);
  border:1px solid var(--color-grey-dark);
  border-radius:var(--radius-sm);
  color:var(--color-white-soft);
  font-size:var(--text-base);
  padding:12px 14px;
  transition:border-color var(--duration-fast) var(--ease-default);
  width:100%;
}
.input::placeholder,.textarea::placeholder{color:var(--color-grey-medium)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--color-grey-medium)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{border-color:var(--color-accent-dark)}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--color-black-soft);color:var(--color-grey-medium);cursor:not-allowed}
.textarea{line-height:var(--leading-normal);min-height:120px;resize:vertical}
.select-wrap{position:relative}
.select-wrap::after{border-bottom:1px solid var(--color-grey-light);border-right:1px solid var(--color-grey-light);content:'';height:7px;margin-top:-6px;pointer-events:none;position:absolute;right:16px;top:50%;transform:rotate(45deg);width:7px}
.select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px}

.field--error .input,.field--error .textarea,.field--error .select{border-color:var(--color-error)}
.field__msg{align-items:flex-start;color:var(--color-white-soft);display:flex;font-size:var(--text-sm);gap:8px}
.field__msg .ico{color:var(--color-error);flex:none;font-family:var(--font-mono)}

.error-summary{
  background:rgba(184,84,80,.08);
  border:1px solid var(--color-error);
  border-left-width:3px;
  margin-bottom:var(--space-xl);
  padding:var(--space-md) var(--space-lg);
}
.error-summary h3{align-items:baseline;color:var(--color-white-soft);display:flex;font-family:var(--font-body);font-size:var(--text-base);font-weight:600;gap:10px}
.error-summary h3 .ico{color:var(--color-error);font-family:var(--font-mono)}
.error-summary ul{color:var(--color-grey-light);display:grid;font-size:var(--text-sm);gap:6px;list-style:disc;margin-top:var(--space-sm);padding-left:26px}
.error-summary a{color:var(--color-accent-text)}

.check{align-items:flex-start;color:var(--color-grey-light);cursor:pointer;display:flex;font-size:var(--text-sm);gap:12px;line-height:var(--leading-snug)}
.check input{
  appearance:none;-webkit-appearance:none;
  background:var(--color-black-pure);
  border:1px solid var(--color-grey-medium);border-radius:var(--radius-sm);cursor:pointer;flex:none;height:18px;margin:1px 0 0;position:relative;
  transition:background-color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default);
  width:18px;
}
.check input:checked{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}
.check input:checked::after{border-bottom:2px solid var(--color-black-pure);border-right:2px solid var(--color-black-pure);content:'';height:9px;left:5px;position:absolute;top:1.5px;transform:rotate(40deg);width:5px}
.check b{color:var(--color-white-soft);font-weight:500}

/* ---------- Emplacements d'images (duotone, tokens uniquement) ---------- */
.ph-slot{position:relative}
.ph{
  background:linear-gradient(150deg,#0A0A0A 0%,#1E1E1E 55%,#141414 100%);
  border:1px solid var(--color-grey-dark);
  display:block;height:auto;object-fit:cover;width:100%;
}
.ph--v2{background:linear-gradient(35deg,#141414 0%,#2A2A2A 68%,#1E1E1E 100%)}
.ph--v3{background:radial-gradient(120% 90% at 70% 18%,#2A2A2A 0%,#141414 46%,#0A0A0A 100%)}
.ph--rose{background:radial-gradient(130% 100% at 78% 0%,rgba(192,139,139,.16) 0%,rgba(192,139,139,0) 55%),linear-gradient(150deg,#141414 0%,#1E1E1E 100%)}
.ph--rose2{background:linear-gradient(20deg,rgba(154,107,107,.20) 0%,rgba(154,107,107,0) 45%),linear-gradient(160deg,#1E1E1E 0%,#0A0A0A 90%)}
.ph--1x1{aspect-ratio:1}
.ph--4x5{aspect-ratio:4/5}
.ph--3x4{aspect-ratio:3/4}
.ph--3x2{aspect-ratio:3/2}
.ph--16x9{aspect-ratio:16/9}
.ph--21x9{aspect-ratio:21/9}
.ph-cap{bottom:var(--space-md);color:var(--color-grey-light);
  font-family:var(--font-mono);font-size:var(--text-xs);left:var(--space-md);
  letter-spacing:var(--tracking-wide);
  position:absolute;right:var(--space-md);
}
.ph-cap::before{color:var(--color-grey-medium);content:'[ '}
.ph-cap::after{color:var(--color-grey-medium);content:' ]'}
.ph-cap--top{bottom:auto;top:var(--space-md)}

/* ---------- Tuile portfolio (crossfade duotone → net) ---------- */
.tile{display:block;overflow:hidden;position:relative}
.tile .ph{transition:opacity var(--duration-normal) var(--ease-default)}
.tile__veil{background:linear-gradient(160deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.15) 100%);inset:0;position:absolute;transition:opacity var(--duration-normal) var(--ease-default)}
.tile__meta{
  background:var(--gradient-overlay);bottom:0;inset-inline:0;
  opacity:0;
  padding:var(--space-2xl) var(--space-md) var(--space-md);
  position:absolute;
  transition:opacity var(--duration-normal) var(--ease-default),translate var(--duration-normal) var(--ease-default);translate:0 8px;z-index:2;
}
.tile__meta strong{color:var(--color-white-soft);display:block;font-family:var(--font-heading);font-size:var(--text-lg);font-weight:500}
.tile__meta span{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.tile:is(:hover,:focus-visible,.demo-hover) .tile__veil{opacity:0}
.tile:is(:hover,:focus-visible,.demo-hover) .tile__meta{opacity:1;translate:0 0}

/* ---------- Carte flash ---------- */
.flash-card{
  background:var(--color-black-soft);
  border:1px solid var(--color-grey-dark);
  display:flex;flex-direction:column;
  transition:border-color var(--duration-normal) var(--ease-default);
}
.flash-card:hover{border-color:var(--color-accent-dark)}
.flash-card__media{position:relative}
.flash-card__media .ph{border:0;border-bottom:1px solid var(--color-grey-dark)}
.flash-card__badge{position:absolute;right:var(--space-md);top:var(--space-md)}
.flash-card__body{display:flex;flex:1;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg)}
.flash-card__title{font-size:var(--text-2xl);font-weight:600}
.flash-card__dims{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}
.flash-card__unique{color:var(--color-grey-light);font-size:var(--text-xs);font-style:italic;font-weight:300}
.flash-card__foot{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;margin-top:auto;padding-top:var(--space-md)}
.flash-card--done{opacity:.75}
.flash-card--done .flash-card__title{color:var(--color-grey-light)}

/* ---------- Citation éditoriale ---------- */
.quote{padding-top:var(--space-2xl);position:relative}
.quote__mark{
  color:var(--color-accent-dark);
  font-family:var(--font-heading);font-size:96px;left:-6px;line-height:1;opacity:.55;pointer-events:none;
  position:absolute;top:0;
}
.quote blockquote{
  color:var(--color-white-soft);
  font-family:var(--font-heading);
  font-size:var(--text-xl);font-style:italic;font-weight:400;line-height:var(--leading-snug);
  margin:0;
}
.quote figcaption{
  color:var(--color-grey-light);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-wider);
  margin-top:var(--space-md);text-transform:uppercase;
}

/* ---------- Pagination gravée ---------- */
.pgn{align-items:center;display:flex;gap:var(--space-sm);justify-content:center}
.pgn a,.pgn span{align-items:center;
  border:1px solid transparent;color:var(--color-grey-light);display:inline-flex;
  font-family:var(--font-mono);font-size:var(--text-lg);justify-content:center;min-height:44px;
  min-width:44px;
  transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default);
}
.pgn a:hover{border-color:var(--color-grey-dark);color:var(--color-white-soft)}
.pgn [aria-current="page"]{border-color:var(--color-accent-dark);color:var(--color-accent-text)}
.pgn .pgn__arrow{color:var(--color-grey-light);font-family:var(--font-body);font-size:var(--text-xl)}
.pgn .pgn__arrow:hover{color:var(--color-accent-text)}
.pgn .pgn__arrow[aria-disabled="true"]{color:var(--color-grey-dark);pointer-events:none}
.pf-foot{display:flex;justify-content:center;margin-top:var(--space-2xl)}

/* ---------- Gabarit lecture longue (blog, aftercare, legal) ---------- */
.longform{display:grid;gap:var(--space-lg)}
.longform p{color:var(--color-grey-light);font-size:var(--text-base);font-weight:300;line-height:var(--leading-relaxed)}
.longform p b,.longform li b{color:var(--color-white-soft);font-weight:500}
.longform h2{font-size:var(--text-2xl);font-weight:600;margin-top:var(--space-lg)}
.longform h3{font-size:var(--text-xl);font-weight:600;margin-top:var(--space-sm)}
.longform ul,.longform ol{display:grid;gap:var(--space-sm)}
.longform li{color:var(--color-grey-light);display:flex;font-size:var(--text-base);font-weight:300;gap:var(--space-md);line-height:var(--leading-normal)}
.longform li::before{color:var(--color-accent-primary);content:'–';flex:none}
.longform figure{margin-block:var(--space-md)}
.longform .quote{margin-block:var(--space-lg)}

/* ---------- Bande CTA de clôture ---------- */
.cta-band{background:var(--color-charcoal);border-block:1px solid var(--color-grey-dark)}
.cta-band__inner{display:grid;gap:var(--space-lg);justify-items:center;padding-block:var(--space-4xl);text-align:center}
.cta-band h2{font-size:var(--text-4xl);font-style:italic;font-weight:600}
.cta-band .promise{color:var(--color-grey-light);font-weight:300;max-width:44ch}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center}

/* ---------- En-tête de site ---------- */
.site-head{
  background:transparent;
  border-bottom:1px solid transparent;left:0;
  position:fixed;right:0;top:0;
  transition:background-color var(--duration-normal) var(--ease-default),border-color var(--duration-normal) var(--ease-default);z-index:100;
}
.site-head.is-solid{background-color:var(--color-black-pure);border-bottom-color:var(--color-grey-dark)}
.site-head__inner{align-items:center;display:flex;gap:var(--space-lg);margin-inline:auto;
  max-width:var(--container-max);
  min-height:76px;padding-inline:var(--pad-x);
}
.brand{color:var(--color-white-soft);
  font-family:var(--font-heading);
  font-size:var(--text-xl);font-style:italic;font-weight:600;letter-spacing:var(--tracking-tight);
  margin-right:auto;white-space:nowrap;
}
.brand:hover{color:var(--color-accent-text)}
.brand__so{color:var(--color-accent-primary)}
.site-nav ul{display:flex;gap:clamp(14px,1.6vw,26px)}
.site-nav a{
  background-image:none;background-position:left bottom;background-repeat:repeat-x;background-size:48px 3px;
  color:var(--color-grey-light);
  font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wider);padding:var(--space-sm) 2px;text-transform:uppercase;
  transition:color var(--duration-fast) var(--ease-default);white-space:nowrap;
}
.site-nav a:hover{background-image:var(--underline-2);color:var(--color-white-soft)}
.site-nav a[aria-current="page"]{background-image:var(--underline-1);color:var(--color-white-soft)}

.lang{align-items:center;display:flex;font-family:var(--font-mono);font-size:var(--text-xs);gap:6px;letter-spacing:var(--tracking-wider)}
.lang a{
  color:var(--color-grey-light);padding:12px 6px;
  transition:color var(--duration-fast) var(--ease-default);
}
/* Dans le menu plein écran (seul sélecteur de langue sous 1280 px) : cible 44 px */
.menu-overlay .lang a{align-items:center;display:inline-flex;justify-content:center;min-height:44px;min-width:44px}
.lang a:hover{color:var(--color-white-soft)}
.lang a{background-position:0 100%;background-repeat:no-repeat;background-size:100% 5px;display:inline-block;padding-bottom:4px}
.lang a:hover{background-image:var(--underline-2)}
.lang a[aria-current="true"]{background-image:var(--underline-1);color:var(--color-accent-text)}
.lang .lang__sep{color:var(--color-grey-dark)}

.burger{align-items:center;display:none;gap:10px;min-height:44px;min-width:44px;padding:var(--space-sm)}
.burger__box{display:grid;gap:5px;width:20px}
.burger__box span{background:var(--color-white-soft);height:1px;transition:transform var(--duration-normal) var(--ease-default),translate var(--duration-normal) var(--ease-default)}
.burger__label{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.burger[aria-expanded="true"] .burger__box span:first-child{transform:rotate(45deg);translate:0 3px}
.burger[aria-expanded="true"] .burger__box span:last-child{transform:rotate(-45deg);translate:0 -3px}

/* Menu plein écran */
.menu-overlay{align-items:center;
  background:var(--color-black-pure);
  display:flex;inset:0;opacity:0;
  position:fixed;
  transition:opacity var(--duration-normal) var(--ease-default),visibility 0s linear var(--duration-normal);
  visibility:hidden;z-index:90;
}
.menu-overlay.is-open{opacity:1;transition-delay:0s;visibility:visible}
.menu-lock{overflow:hidden}
.menu-overlay__inner{display:grid;gap:var(--space-2xl);max-height:100%;overflow:auto;padding-block:100px var(--space-2xl);width:100%}
.menu-overlay__nav ol{counter-reset:m;display:grid;gap:2px}
.menu-overlay__nav a{align-items:baseline;
  border-bottom:1px solid var(--color-grey-dark);color:var(--color-white-soft);
  display:flex;
  font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:500;gap:var(--space-md);
  padding:10px 0;
  transition:color var(--duration-fast) var(--ease-default),padding-left var(--duration-normal) var(--ease-default);
}
.menu-overlay__nav a:hover{color:var(--color-accent-text);padding-left:var(--space-sm)}
.menu-overlay__nav a[aria-current="page"]{color:var(--color-accent-text)}
.menu-overlay__no{color:var(--color-accent-primary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-widest);min-width:2.4em}
.menu-overlay__foot{display:grid;gap:var(--space-lg);justify-items:start}
.menu-overlay__addr{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}

/* ---------- Rail signature (marge gauche) ---------- */
.rail{align-items:center;
  display:none;flex-direction:column;gap:var(--space-lg);left:calc(var(--space-lg) - 6px);
  pointer-events:none;
  position:fixed;top:50%;translate:0 -50%;z-index:60;
}
.rail__txt{color:var(--color-grey-medium);
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--tracking-widest);transform:rotate(180deg);
  white-space:nowrap;
  writing-mode:vertical-rl;
}
.rail__line{background:var(--color-grey-dark);height:56px;width:1px}
.rail__plate{color:var(--color-accent-dark)}
@media (min-width:1280px){.rail{display:flex}}

/* ---------- Pied de page ---------- */
.site-foot{background:var(--color-black-pure);padding-top:var(--space-3xl)}
.site-foot__orn{margin-bottom:var(--space-xl);margin-inline:auto;max-width:280px}
.site-foot__grid{
  display:grid;gap:var(--space-2xl);grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  padding-block:var(--space-3xl);
}
.site-foot__logo{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-2xl);font-style:italic;font-weight:600}
.site-foot__tag{font-size:var(--text-sm);font-weight:300;line-height:var(--leading-relaxed);margin-top:var(--space-md);max-width:34ch}
.site-foot__meta{font-size:var(--text-sm);line-height:var(--leading-loose);margin-top:var(--space-lg)}
.site-foot__col h2{
  color:var(--color-grey-medium);
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  letter-spacing:var(--tracking-widest);margin-bottom:var(--space-md);text-transform:uppercase;
}
.site-foot__col ul{display:grid;gap:10px}
.site-foot__col a{color:var(--color-grey-light);font-size:var(--text-sm);transition:color var(--duration-fast) var(--ease-default)}
.site-foot__col a:hover{color:var(--color-accent-text)}
.site-foot__studio p{font-size:var(--text-sm);line-height:var(--leading-relaxed);margin-bottom:var(--space-md)}
.site-foot__studio .mono{color:var(--color-grey-medium);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}
.site-foot__legal{
  border-top:1px solid var(--color-grey-dark);color:var(--color-grey-medium);
  display:flex;flex-wrap:wrap;
  font-size:var(--text-xs);gap:var(--space-md) var(--space-2xl);justify-content:space-between;
  padding-block:var(--space-lg) var(--space-xl);
}
.site-foot__legal a{color:var(--color-grey-light)}
.site-foot__legal a:hover{color:var(--color-accent-text)}

/* ---------- En-tête de page standard (tiers 1–3) ---------- */
.page-hero{background:var(--gradient-hero);overflow:hidden;padding-bottom:var(--space-3xl);padding-top:clamp(116px,15vh,160px);position:relative}
.page-hero h1{font-size:var(--text-5xl);font-weight:700;letter-spacing:var(--tracking-tight)}
.page-hero .lede{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);margin-top:var(--space-md);max-width:56ch}
.page-hero .meta{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);margin-top:var(--space-lg)}

/* ---------- Filtres (chips, segmenté) ---------- */
.filters{display:grid;gap:var(--space-md);margin-bottom:var(--space-xl)}
.filters__row{align-items:center;display:flex;flex-wrap:wrap;gap:8px}
.filters__label{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);margin-right:var(--space-sm);text-transform:uppercase}
.filters__count{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);margin-left:auto}
.chip{align-items:center;
  border:1px solid var(--color-grey-dark);border-radius:var(--radius-md);
  color:var(--color-grey-light);cursor:pointer;
  display:inline-flex;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);min-height:36px;padding:6px 14px;text-transform:uppercase;
  transition:border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);white-space:nowrap;
}
.chip:is(:hover,.demo-hover){border-color:var(--color-accent-dark);color:var(--color-white-soft)}
.chip:is([aria-pressed="true"],.is-active){background:rgba(192,139,139,.08);border-color:var(--color-accent-primary);color:var(--color-accent-text)}
.seg{border:1px solid var(--color-grey-dark);border-radius:var(--radius-md);display:inline-flex;overflow:hidden}
.seg button{border-right:1px solid var(--color-grey-dark);
  color:var(--color-grey-light);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
  min-height:36px;padding:6px 14px;text-transform:uppercase;
  transition:color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);white-space:nowrap;
}
.seg button:last-child{border-right:0}
.seg button:is(:hover,.demo-hover){color:var(--color-white-soft)}
.seg button[aria-pressed="true"]{background:rgba(192,139,139,.1);color:var(--color-accent-text)}

/* ---------- Commandes de lightbox ---------- */
.lb-btn{align-items:center;
  background:var(--color-black-soft);
  border:1px solid var(--color-grey-dark);border-radius:var(--radius-sm);
  color:var(--color-white-soft);display:inline-flex;font-size:var(--text-lg);height:48px;justify-content:center;
  transition:border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);
  width:48px;
}
.lb-btn:is(:hover,.demo-hover){border-color:var(--color-accent-dark);color:var(--color-accent-text)}
.lb-count{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider)}

/* ---------- États génériques ---------- */
.empty{border:1px dashed var(--color-grey-dark);display:grid;gap:var(--space-md);justify-items:center;padding:var(--space-3xl) var(--space-xl);text-align:center}
.empty h3{font-size:var(--text-2xl);font-weight:500}
.empty p{color:var(--color-grey-light);font-weight:300;max-width:44ch}
.skel{animation:skel 1.4s linear infinite;aspect-ratio:1;background:linear-gradient(100deg,#141414 40%,#1E1E1E 50%,#141414 60%);background-size:200% 100%;border:1px solid var(--color-grey-dark)}
@keyframes skel{to{background-position:-200% 0}}

/* ---------- Sections variantes (états rendus) ---------- */
.variant-section{background:var(--color-black-soft);border-top:1px dashed var(--color-grey-dark)}
.variant-section .intro-sm{color:var(--color-grey-light);font-weight:300;margin-bottom:var(--space-xl);max-width:64ch}
.variant-note{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);margin-top:var(--space-md)}

/* ---------- Révélations (encre) — sans script inline ---------- */
/* Masquage initial UNIQUEMENT quand le scripting est actif (@media scripting:
   enabled, qui matche dès le premier paint) : plus de classe .js ni de bootstrap
   inline, d'où une CSP script-src 'self' pure. Fail-safe : si sophie.js ne charge
   jamais, l'animation rend le contenu visible après 3 s (jamais masqué à vie). */
@media (scripting: enabled){
  [data-reveal]{animation:reveal-failsafe 1ms linear 3s forwards;opacity:0;transition:opacity var(--duration-slow) var(--ease-default),translate var(--duration-slow) var(--ease-default);transition-delay:var(--d,0ms);translate:0 14px}
  [data-reveal].is-in{animation:none;opacity:1;translate:0 0}
  .reveal-img{overflow:hidden;position:relative}
  .reveal-img::after{background:var(--color-black-soft);content:'';inset:-1px;pointer-events:none;position:absolute;transition:translate calc(var(--duration-slow) + 150ms) var(--ease-default);transition-delay:var(--d,0ms);z-index:3}
  .reveal-img.is-in::after{translate:0 -101%}
  /* Reveal-img nested inside a [data-reveal] wrapper (not itself the trigger): slide its cover when the wrapper enters. */
  [data-reveal].is-in .reveal-img::after{translate:0 -101%}
  .rule-draw{transform:scaleX(0);transform-origin:left center;transition:transform calc(var(--duration-slow) + 200ms) var(--ease-default)}
  .is-in .rule-draw,.rule-draw.is-in{transform:scaleX(1)}
}
@keyframes reveal-failsafe{to{opacity:1;translate:0 0}}

/* ---------- Responsive chrome ---------- */
/* Huit liens + langue + CTA ne tiennent jamais à l'étroit (l'allemand court ~30 %
   plus long) : la barre complète est réservée aux écrans larges (≥ 1280 px). */
@media (max-width:1279px){
  .site-nav{display:none}
  /* Header lang selector hidden with the nav: below 1280 px the full-screen
     overlay (44 px targets) is the only language selector. */
  .site-head .lang{display:none}
  .burger{display:inline-flex}
}
@media (max-width:767px){
  .section{padding-block:var(--space-3xl)}
  /* Le burger (44 px) doit toujours tenir dans la barre : gaps resserrés, brand et
     CTA compacts, libellé du burger masqué (nom accessible : aria-label du bouton).
     Budget vérifié à 360 px de large. */
  .site-head__inner{gap:var(--space-sm);min-height:64px}
  .site-head .brand{font-size:var(--text-lg)}
  .site-head .btn{font-size:var(--text-xs);min-height:44px;padding-inline:var(--space-sm)}
  .burger__label{display:none}
  .site-foot__grid{gap:var(--space-xl);grid-template-columns:1fr}
  .cta-band h2{font-size:var(--text-3xl)}
  .chip,.seg button{min-height:44px}
}
@media (max-width:359px){
  /* Très petits écrans : le CTA d'en-tête cède la place au burger ; le menu plein
     écran conserve « Prendre rendez-vous », le parcours de réservation reste à
     deux gestes. */
  .site-head .btn{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  .site-foot__grid{grid-template-columns:1fr 1fr}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0s !important;transition-duration:0s !important}
  [data-reveal]{animation:none;opacity:1;translate:0 0}
  .reveal-img::after{content:none}
  .rule-draw{transform:none}
}



/* ---------- 00-design-system.css ---------- */
/* ---- 00 · feuille de système ---- */
.sheet-hero{padding-bottom:var(--space-2xl)}
.sheet-hero h1{font-size:var(--text-5xl);font-weight:700;letter-spacing:var(--tracking-tight)}
.sheet-hero .lede{font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);margin-top:var(--space-md);max-width:60ch}
.sheet-hero .meta{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);margin-top:var(--space-lg)}

.sheet-section{border-top:1px solid var(--color-grey-dark);padding-block:var(--space-3xl)}
.sheet-section > .container > h2{font-size:var(--text-3xl);font-weight:600;margin-bottom:var(--space-sm)}
.sheet-section .intro{color:var(--color-grey-light);font-weight:300;margin-bottom:var(--space-xl);max-width:64ch}

.spec-label{
  color:var(--color-grey-medium);
  display:block;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-wider);margin-bottom:var(--space-sm);text-transform:uppercase;
}

/* Couleurs */
.swatch-group{margin-bottom:var(--space-xl)}
.swatches{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.swatch{background:var(--color-black-soft);border:1px solid var(--color-grey-dark)}
.swatch__chip{border-bottom:1px solid var(--color-grey-dark);height:64px}
.swatch__body{padding:var(--space-sm) var(--space-md) var(--space-md)}
.swatch__name{color:var(--color-white-soft);font-size:var(--text-sm);font-weight:500}
.swatch__var{color:var(--color-grey-medium);display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;margin-top:4px;overflow-wrap:anywhere}
.swatch__hex{color:var(--color-grey-light);display:block;font-family:var(--font-mono);font-size:var(--text-xs);margin-top:4px}
.swatch--grad .swatch__chip{height:88px}

/* Typographie */
.face{align-items:baseline;border-bottom:1px solid var(--color-grey-dark);display:grid;gap:var(--space-lg);grid-template-columns:220px 1fr;padding-block:var(--space-lg)}
.face:last-child{border-bottom:0}
.face__id .swatch__var{margin-top:6px}
.face__name{color:var(--color-white-soft);font-family:var(--font-body);font-size:var(--text-base);font-weight:600}
.face__use{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;margin-top:6px;max-width:26ch}
.face__sample{color:var(--color-white-soft);overflow-wrap:anywhere}
.face__sample--heading{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:600}
.face__sample--body{font-family:var(--font-body);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);max-width:52ch}
.face__sample--accent{color:var(--color-accent-text);font-family:var(--font-accent);font-size:var(--text-3xl)}
.face__sample--mono{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-base);letter-spacing:var(--tracking-wide)}

.scale{display:grid;gap:2px;margin-top:var(--space-xl)}
.scale__row{align-items:baseline;border-bottom:1px solid var(--color-charcoal);display:grid;gap:var(--space-lg);grid-template-columns:120px 1fr 220px;padding:10px 0}
.scale__row .tok{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs)}
.scale__row .val{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:10px;text-align:right}
.scale__row .smp{color:var(--color-white-soft);font-family:var(--font-heading);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Grilles d'états */
.state-grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.state-cell{align-content:start;display:grid;gap:var(--space-sm);justify-items:start}
.variant-row{display:grid;gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
.variant-row:last-child{margin-bottom:0}

/* Formulaires (démo) */
.form-demo{display:grid;gap:var(--space-2xl);grid-template-columns:1fr 1fr;max-width:960px}
.form-demo .field{margin-bottom:0}
.demo-focus{box-shadow:var(--shadow-glow);outline:2px solid var(--color-accent-text);outline-offset:2px}
.input.demo-focus{border-color:var(--color-accent-dark)}

/* Cartes (démo) */
.cards-demo{align-items:start;display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* Kit décoratif (démo) */
.kit{display:grid;gap:var(--space-xl)}
.kit__row{display:grid;gap:var(--space-sm)}
.numerals{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.numerals .plate-no{margin-bottom:0}

/* Espacements */
.space-scale{display:grid;gap:10px}
.space-row{align-items:center;display:grid;gap:var(--space-lg);grid-template-columns:130px 1fr}
.space-row .tok{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs)}
.space-row .bar{background:var(--gradient-accent);border-radius:var(--radius-sm);height:14px}

/* Lightbox (démo) : .lb-btn / .lb-count viennent du socle */
.lb-controls{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-md)}

/* Bande de test allemand */
.de-strip{background:var(--color-black-soft);border:1px dashed var(--color-grey-dark);display:grid;gap:var(--space-xl);padding:var(--space-xl)}
.de-strip__nav{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg)}
.de-strip__nav a{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase}
.de-strip__nav a:hover{color:var(--color-white-soft)}
.de-strip__row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-md)}
.de-strip .flash-card{max-width:300px}

/* Mouvement (démo) */
.motion-grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.motion-cell{align-content:start;background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-md);padding:var(--space-lg)}
.motion-cell .ph{border:0}
.durations{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg)}

/* Pastilles de couleur (feuille uniquement) */
.chip-black-pure{background:var(--color-black-pure)}
.chip-black-soft{background:var(--color-black-soft)}
.chip-charcoal{background:var(--color-charcoal)}
.chip-grey-dark{background:var(--color-grey-dark)}
.chip-white-pure{background:var(--color-white-pure)}
.chip-white-soft{background:var(--color-white-soft)}
.chip-grey-light{background:var(--color-grey-light)}
.chip-grey-medium{background:var(--color-grey-medium)}
.chip-accent-primary{background:var(--color-accent-primary)}
.chip-accent-text{background:var(--color-accent-text)}
.chip-accent-hover{background:var(--color-accent-hover)}
.chip-accent-dark{background:var(--color-accent-dark)}
.chip-accent-light{background:var(--color-accent-light)}
.chip-success{background:var(--color-success)}
.chip-warning{background:var(--color-warning)}
.chip-error{background:var(--color-error)}
.chip-info{background:var(--color-info)}
.chip-grad-hero{background:var(--gradient-hero)}
.chip-grad-accent{background:var(--gradient-accent)}
.chip-grad-overlay{background:var(--gradient-overlay),linear-gradient(150deg,#141414 0%,#2A2A2A 100%)}

/* Corps de la gamme fluide (feuille uniquement) */
.fs-xs{font-size:var(--text-xs)}
.fs-sm{font-size:var(--text-sm)}
.fs-base{font-size:var(--text-base)}
.fs-lg{font-size:var(--text-lg)}
.fs-xl{font-size:var(--text-xl)}
.fs-2xl{font-size:var(--text-2xl)}
.fs-3xl{font-size:var(--text-3xl)}
.fs-4xl{font-size:var(--text-4xl)}
.fs-5xl{font-size:var(--text-5xl)}

/* Barres d'espacement (feuille uniquement) */
.sp-xs{width:4px}
.sp-sm{width:8px}
.sp-md{width:16px}
.sp-lg{width:24px}
.sp-xl{width:32px}
.sp-2xl{width:48px}
.sp-3xl{width:64px}
.sp-4xl{width:96px}
.sp-5xl{width:128px}

/* Démos de mouvement (survol = rejouer) */
.m-ink{overflow:hidden;position:relative}
.m-ink::after{background:var(--color-black-soft);content:'';inset:0;position:absolute;transition:translate var(--duration-slow) var(--ease-default)}
.m-ink:hover::after{translate:0 -101%}
.m-rule{background:var(--color-accent-dark);height:1px;transform:scaleX(0);transform-origin:left center;transition:transform calc(var(--duration-slow) + 200ms) var(--ease-default)}
.motion-cell:hover .m-rule{transform:scaleX(1)}
.motion-cell .hint{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-wide)}

@media (max-width:767px){
  .face{gap:var(--space-sm);grid-template-columns:1fr}
  .scale__row{grid-template-columns:90px 1fr;grid-template-rows:auto auto}
  .scale__row .val{display:none}
  .form-demo{grid-template-columns:1fr}
}


/* ---------- 01-home.css ---------- */
/* ---- 01 · accueil ---- */

/* Héros asymétrique */
.hero{align-items:center;background:var(--gradient-hero);display:flex;min-height:100vh;min-height:100svh;overflow:hidden;position:relative}
.hero__inner{
  column-gap:var(--space-3xl);
  display:grid;
  grid-template-areas:"title media" "rule media" "copy media";grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:96px;
  padding-top:96px;
  position:relative;width:100%;
}
.hero__title{color:var(--color-white-soft);
  font-family:var(--font-heading);
  font-size:clamp(84px,12.5vw,168px);font-style:italic;font-weight:600;
  grid-area:title;
  letter-spacing:var(--tracking-tighter);line-height:.82;
  /* Débordement éditorial à gauche, mais jamais rogné : le titre est planché au
     bord du viewport (title_left ≥ 8px) tant que le conteneur occupe toute la
     largeur ; le débordement franc revient à mesure que le conteneur se centre.
     --title-gutter = espace de centrage du conteneur (0 tant qu'il est pleine largeur). */
  --title-gutter:max(0px,(100vw - var(--container-max)) / 2);
  margin-left:max(calc(-1 * (var(--pad-x) + clamp(6px,1.6vw,30px))),calc(8px - var(--pad-x) - var(--title-gutter)));position:relative;z-index:3;
}
.hero__title .t2{color:var(--color-accent-primary);display:block;padding-left:.48em}
.hero__copy{align-content:center;display:grid;gap:var(--space-lg);grid-area:copy;justify-items:start;position:relative;z-index:2}
.hero__line{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);max-width:44ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.hero__micro{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}
.hero__media{align-self:start;
  grid-area:media;
  margin-left:auto;
  margin-top:0;position:relative;
  width:min(100%, max(340px, calc((100vh - 320px) * 1.2)));
  width:min(100%, max(340px, calc((100svh - 320px) * 1.2)));z-index:2;
}
.hero__media .ph{box-shadow:var(--shadow-lg)}
.hero__media .spec-frame{background:var(--color-black-pure);bottom:28px;left:-14px;padding-left:30px;position:absolute}
.hero__rule{align-items:center;
  display:flex;gap:var(--space-md);
  grid-area:rule;
  margin-block:clamp(40px,6vh,88px) clamp(16px,2.2vh,32px);
  /* pleine largeur de fenêtre depuis l'intérieur du conteneur */
  margin-inline:calc((100% - 100vw) / 2);z-index:1;
}
.hero__rule::before{background:var(--color-grey-dark);content:'';height:1px;width:clamp(20px,6vw,110px)}
.hero__rule::after{background:var(--color-grey-dark);content:'';flex:1;height:1px}
.hero__rule span{
  color:var(--color-grey-light);
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-widest);white-space:nowrap;
}
.hero__cue{bottom:48px;display:grid;gap:10px;justify-items:center;left:calc(var(--pad-x) + 2px);position:absolute;z-index:3}
.hero__cue-line{animation:cueDraw 2.6s var(--ease-default) infinite;background:var(--color-grey-light);height:56px;transform-origin:top center;width:1px}
.hero__cue-txt{color:var(--color-grey-light);font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase}
@keyframes cueDraw{
  0%{opacity:1;transform:scaleY(0)}
  50%{opacity:1;transform:scaleY(1)}
  82%{opacity:0;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(1)}
}

/* En-têtes de section avec lien de fuite */
.head-row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:space-between;margin-bottom:var(--space-2xl)}
.head-row .section-head{margin-bottom:0}

/* No. I · registre des six styles */
.styles-ledger{border-top:1px solid var(--color-grey-dark)}
.ledger-row{
  align-items:center;
  border-bottom:1px solid var(--color-grey-dark);
  display:grid;gap:var(--space-lg);grid-template-columns:64px 88px 1fr auto;padding:var(--space-md) var(--space-sm);
  transition:background-color var(--duration-fast) var(--ease-default);
}
.ledger-row:hover{background:var(--color-black-soft)}
.ledger-row__no{color:var(--color-accent-primary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}
.ledger-row__thumb{width:88px}
.ledger-row__txt strong{color:var(--color-white-soft);display:block;font-family:var(--font-heading);font-size:var(--text-xl);font-weight:500;transition:color var(--duration-fast) var(--ease-default)}
.ledger-row__txt em{color:var(--color-grey-light);font-size:var(--text-sm);font-style:normal;font-weight:300}
.ledger-row:hover .ledger-row__txt strong{color:var(--color-accent-text)}
.ledger-row__arrow{color:var(--color-grey-medium);font-size:var(--text-xl);transition:translate var(--duration-normal) var(--ease-default),color var(--duration-fast) var(--ease-default)}
.ledger-row:hover .ledger-row__arrow{color:var(--color-accent-text);translate:6px 0}

/* No. II · bande portfolio pleine largeur */
.pf-band{display:grid;gap:8px;grid-template-columns:repeat(4,1fr);padding-inline:8px}
.pf-band [data-reveal]:nth-child(2){--d:70ms}
.pf-band [data-reveal]:nth-child(3){--d:140ms}
.pf-band [data-reveal]:nth-child(4){--d:210ms}

/* No. III · atelier, section décalée */
.about-split{align-items:center;display:grid;gap:var(--space-3xl);grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.about-split__media{max-width:440px;position:relative}
.about-split__media .hand-note{
  background:var(--color-black-pure);border:1px solid var(--color-grey-dark);bottom:-16px;padding:5px 12px;
  position:absolute;right:-10px;rotate:-2deg;z-index:4;
}
.about-split__body{display:grid;gap:var(--space-lg);justify-items:start}
.about-split__body .bio{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);max-width:56ch}
.about-split__body .bio em{color:var(--color-white-soft);font-style:normal}

/* No. IV · flashs */
.flash-teaser{display:grid;gap:var(--space-lg);grid-template-columns:repeat(4,1fr)}

/* No. V · citations */
.quotes{align-items:start;display:grid;gap:var(--space-2xl) var(--space-3xl);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.quotes-foot{margin-top:var(--space-2xl)}

/* No. VI · instagram */
.ig-grid{display:grid;gap:8px;grid-template-columns:repeat(6,1fr)}
.ig-grid .tile__meta{padding:var(--space-sm)}
.ig-grid .tile__meta strong{font-size:.9rem;letter-spacing:0;white-space:nowrap}
.ig-grid .tile__meta span{font-size:.72rem}

/* Variante 375 px (.variant-section vient du socle) */
.m375{background:var(--color-black-pure);border:1px solid var(--color-grey-dark);max-width:100%;width:375px}
.mh{background:var(--gradient-hero);display:grid;gap:var(--space-lg);overflow:hidden;padding:56px 20px 40px;position:relative}
.mh__title{
  color:var(--color-white-soft);
  font-family:var(--font-heading);
  font-size:96px;font-style:italic;font-weight:600;letter-spacing:var(--tracking-tighter);line-height:.82;margin-left:-32px;
}
.mh__title .t2{color:var(--color-accent-primary);display:block;padding-left:.48em}
.mh__line{color:var(--color-grey-light);font-size:15px;font-weight:300;line-height:var(--leading-relaxed)}
.mh__cta{width:100%}
.mh__micro{color:var(--color-grey-light);font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wide)}

/* Responsive */
@media (max-width:1023px){
  .hero__inner{grid-template-areas:"title" "rule" "media" "copy";grid-template-columns:1fr;padding-bottom:var(--space-2xl);row-gap:var(--space-xl)}
  .hero__media{margin-inline:auto;margin-top:clamp(-72px,-6vw,-24px);width:min(520px,100%)}
  .hero__copy{padding-top:0}
  .about-split{gap:var(--space-2xl);grid-template-columns:1fr}
  .flash-teaser{grid-template-columns:1fr 1fr}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .pf-band{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .quotes .quote:nth-child(2){margin-top:0}
  .ledger-row{gap:var(--space-md);grid-template-columns:44px 56px 1fr auto}
  .ledger-row__thumb{width:56px}
  .flash-teaser{grid-template-columns:1fr}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1 1 100%}
}


/* ---------- 02-portfolio.css ---------- */
/* ---- 02 · portfolio ---- */

/* Grille uniforme 1:1, gouttières 8px, spécimen épinglé double */
.pf-grid{display:grid;gap:8px;grid-auto-flow:dense;grid-template-columns:repeat(4,1fr)}
.pf-item{position:relative}
.pf-item > .badge{left:var(--space-md);pointer-events:none;position:absolute;top:var(--space-md);z-index:3}
.pf-feature{grid-column:span 2;grid-row:span 2}
.pf-feature .tile{rotate:-.4deg}
.pf-feature .spec-frame{bottom:var(--space-md);left:var(--space-md);pointer-events:none;position:absolute;z-index:3}
.pf-foot{display:flex;justify-content:center;margin-top:var(--space-2xl)}

/* Lightbox rendue ouverte (variante) */
.lb{background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lb__media{border-right:1px solid var(--color-grey-dark);position:relative}
.lb__media .ph{border:0;height:100%}
.lb__panel{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-xl);position:relative}
.lb__close{position:absolute;right:var(--space-md);top:var(--space-md)}
.lb__style{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.lb__title{font-size:var(--text-3xl);font-weight:600;padding-right:56px}
.lb__meta{border-top:1px solid var(--color-grey-dark);margin:0}
.lb__meta div{border-bottom:1px solid var(--color-grey-dark);display:flex;gap:var(--space-md);justify-content:space-between;padding:12px 0}
.lb__meta dt{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.lb__meta dd{color:var(--color-white-soft);font-size:var(--text-sm);margin:0;text-align:right}
.lb__nav{align-items:center;display:flex;gap:var(--space-md);margin-top:auto}
.lb__nav .lb-count{margin-left:auto}

/* Squelette de chargement */
.skel-grid{display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}

@media (max-width:1023px){
  .pf-grid,.skel-grid{grid-template-columns:repeat(3,1fr)}
  .lb{grid-template-columns:1fr}
  .lb__media{border-bottom:1px solid var(--color-grey-dark);border-right:0}
}
@media (max-width:767px){
  .pf-grid,.skel-grid{grid-template-columns:repeat(2,1fr)}
  .filters__count{margin-left:0}
}


/* ---------- 03-flash.css ---------- */
/* ---- 03 · flashs ---- */

/* Planche de spécimens : cartes épinglées, légère rotation */
.fl-board{display:grid;gap:var(--space-lg);grid-template-columns:repeat(4,1fr)}
.fl-board .flash-card{transition:rotate var(--duration-normal) var(--ease-default),border-color var(--duration-normal) var(--ease-default)}
.fl-board > :nth-child(4n+1) .flash-card{rotate:-.5deg}
.fl-board > :nth-child(4n+2) .flash-card{rotate:.35deg}
.fl-board > :nth-child(4n+3) .flash-card{rotate:.5deg}
.fl-board > :nth-child(4n+4) .flash-card{rotate:-.35deg}
.fl-board .flash-card:hover{rotate:0deg}

/* Ligne de cycle de vie (variante) */
.fl-states{align-items:start;display:grid;gap:var(--space-lg);grid-template-columns:repeat(3,1fr)}
.fl-state{display:grid;gap:var(--space-sm)}
.fl-state .note{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;line-height:var(--leading-normal)}
.fl-state .note b{color:var(--color-white-soft);font-weight:500}

/* Modale de réservation (rendue ouverte) */
.fl-modal{background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-lg);max-width:560px;padding:var(--space-xl);position:relative}
.fl-modal__close{position:absolute;right:var(--space-md);top:var(--space-md)}
.fl-modal__head{align-items:center;display:flex;gap:var(--space-md)}
.fl-modal__head .ph-slot{flex:none;width:88px}
.fl-modal__title{font-size:var(--text-2xl);font-weight:600}
.fl-modal__sub{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);margin-top:4px}
.fl-modal .field{margin-bottom:0}
.fl-modal__terms{border-top:1px solid var(--color-grey-dark);color:var(--color-grey-light);display:grid;font-size:var(--text-xs);font-weight:300;gap:var(--space-sm);padding-top:var(--space-md)}
.fl-modal__terms b{color:var(--color-white-soft);font-weight:500}
.fl-modal__actions{display:flex;flex-wrap:wrap;gap:var(--space-md)}

/* Archive : dessin ↔ porté */
.fl-pairs{display:grid;gap:var(--space-2xl);grid-template-columns:1fr 1fr}
.fl-pair{display:grid;gap:var(--space-md)}
.fl-pair__imgs{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.fl-pair__imgs .ph-slot:last-child{translate:0 var(--space-md)}
.fl-pair h3{font-size:var(--text-xl);font-weight:600}
.fl-pair .mono-line{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}

/* Bannière prochain drop (état vide) */
.fl-drop{background:var(--color-charcoal);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-md);justify-items:start;outline:1px solid var(--color-grey-dark);outline-offset:4px;padding:var(--space-2xl)}
.fl-drop h3{font-size:var(--text-3xl);font-style:italic;font-weight:600}
.fl-drop p{color:var(--color-grey-light);font-weight:300;max-width:52ch}
.fl-drop__form{display:flex;flex-wrap:wrap;gap:var(--space-sm);max-width:480px;width:100%}
.fl-drop__form .input{flex:1;min-width:220px}

@media (max-width:1279px){
  .fl-board{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1023px){
  .fl-board{grid-template-columns:repeat(2,1fr)}
  .fl-states{grid-template-columns:1fr}
  .fl-pairs{grid-template-columns:1fr}
}
@media (max-width:767px){
  .fl-board{grid-template-columns:1fr}
  .fl-board .flash-card{rotate:0deg}
}


/* ---------- 04-booking.css ---------- */
/* ---- 04 · rendez-vous ---- */

.bk-layout{align-items:start;display:grid;gap:var(--space-3xl);grid-template-columns:220px minmax(0,1fr)}
.bk-aside{display:grid;gap:2px;position:sticky;top:104px}
.bk-aside__title{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);margin-bottom:var(--space-sm);text-transform:uppercase}
.bk-aside a{border-left:1px solid var(--color-grey-dark);
  color:var(--color-grey-light);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:10px 0 10px 14px;
  transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default);
}
.bk-aside a:hover{border-left-color:var(--color-accent-dark);color:var(--color-accent-text)}

.bk-trust{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg)}
.bk-model{align-items:baseline;background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);outline:1px solid var(--color-grey-dark);outline-offset:3px;padding:var(--space-md) var(--space-lg)}
.bk-model .plate-no{flex:none;margin-bottom:0}
.bk-model p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300}
.bk-model b{color:var(--color-white-soft);font-weight:500}

.bk-step{background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-lg);margin-bottom:var(--space-xl);padding:var(--space-xl);scroll-margin-top:96px}
.bk-step__head{align-items:baseline;border-bottom:1px solid var(--color-grey-dark);display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;padding-bottom:var(--space-md)}
.bk-step__head h2{font-size:var(--text-2xl);font-weight:600}
.bk-step__no{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase}
.bk-step .field{margin-bottom:0}
.bk-row{display:grid;gap:var(--space-lg);grid-template-columns:1fr 1fr}

/* Plaques radio (type de projet) */
.rplate-grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.rplate{align-content:start;border:1px solid var(--color-grey-dark);cursor:pointer;display:grid;gap:6px;padding:var(--space-md);position:relative;transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}
.rplate:hover{border-color:var(--color-accent-dark)}
.rplate input{height:1px;opacity:0;position:absolute;width:1px}
.rplate:has(input:checked){background:rgba(192,139,139,.06);border-color:var(--color-accent-primary)}
.rplate:has(input:focus-visible){box-shadow:var(--shadow-glow);outline:2px solid var(--color-accent-text);outline-offset:2px}
.rplate b{color:var(--color-white-soft);font-size:var(--text-sm);font-weight:600}
.rplate small{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;line-height:var(--leading-snug)}
.rplate__mark{border:1px solid var(--color-grey-medium);border-radius:50%;height:14px;position:absolute;right:10px;top:10px;width:14px}
.rplate:has(input:checked) .rplate__mark{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}

/* Vignettes de style (étape 2) */
.sthumb-grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.sthumb{border:1px solid var(--color-grey-dark);cursor:pointer;display:grid;gap:8px;padding:10px;position:relative;transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}
.sthumb:hover{border-color:var(--color-accent-dark)}
.sthumb input{height:1px;opacity:0;position:absolute;width:1px}
.sthumb:has(input:checked){background:rgba(192,139,139,.06);border-color:var(--color-accent-primary)}
.sthumb:has(input:focus-visible){box-shadow:var(--shadow-glow);outline:2px solid var(--color-accent-text);outline-offset:2px}
.sthumb span{color:var(--color-grey-light);font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-wide);text-align:center;text-transform:uppercase}
.sthumb:has(input:checked) span{color:var(--color-accent-text)}

/* Encarts conditionnels */
.bk-cond{background:rgba(192,139,139,.04);border:1px dashed var(--color-accent-dark);display:grid;gap:var(--space-sm);justify-items:start;padding:var(--space-md) var(--space-lg)}
.bk-cond .tag{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.bk-cond p{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;line-height:var(--leading-normal)}
.bk-cond p b{color:var(--color-white-soft);font-weight:500}

/* Zone de dépôt */
.drop{border:1px dashed var(--color-grey-dark);cursor:pointer;display:grid;gap:var(--space-sm);justify-items:center;padding:var(--space-xl);text-align:center;transition:border-color var(--duration-fast) var(--ease-default)}
.drop:hover{border-color:var(--color-accent-dark)}
.drop .ico{color:var(--color-accent-dark);font-size:var(--text-2xl);line-height:1}
.drop b{color:var(--color-white-soft);font-size:var(--text-sm);font-weight:500}
.drop small{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300}

/* Contre-indications */
.bk-checks{display:grid;gap:var(--space-sm) var(--space-xl);grid-template-columns:1fr 1fr}
.bk-note{border-left:2px solid var(--color-info);color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;line-height:var(--leading-normal);padding-left:var(--space-md)}

/* Récapitulatif + acompte */
.bk-recap{border-top:1px solid var(--color-grey-dark);margin:0}
.bk-recap div{border-bottom:1px solid var(--color-grey-dark);display:flex;gap:var(--space-md);justify-content:space-between;padding:12px 0}
.bk-recap dt{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.bk-recap dd{color:var(--color-white-soft);font-size:var(--text-sm);margin:0;text-align:right}
.bk-deposit{background:var(--color-charcoal);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-md);justify-items:start;outline:1px solid var(--color-grey-dark);outline-offset:3px;padding:var(--space-lg)}
.bk-deposit p{color:var(--color-grey-light);font-size:var(--text-sm)}
.bk-deposit p.strong{color:var(--color-white-soft)}
.pay-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pay{align-items:center;border:1px solid var(--color-grey-dark);color:var(--color-grey-light);display:inline-flex;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:6px 12px;text-transform:uppercase}
.bk-submit{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-md)}

/* Confirmation */
.bk-confirm{background:rgba(74,124,89,.07);border:1px solid var(--color-success);display:grid;gap:var(--space-lg);justify-items:start;padding:var(--space-xl)}
.bk-confirm__ok{align-items:baseline;display:flex;gap:var(--space-md)}
.bk-confirm__ok .ico{color:var(--color-success);font-family:var(--font-mono)}
.bk-confirm h3{font-size:var(--text-3xl);font-weight:600}
.bk-ref{border:1px solid var(--color-grey-dark);color:var(--color-white-soft);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);padding:8px 14px}
.bk-tl{display:grid;width:100%}
.bk-tl li{align-items:start;border-bottom:1px solid var(--color-grey-dark);display:grid;gap:var(--space-md);grid-template-columns:24px 1fr;padding:13px 0}
.bk-tl li:last-child{border-bottom:0}
.bk-tl .dot{border:1px solid var(--color-grey-medium);border-radius:50%;height:9px;justify-self:center;margin-top:6px;width:9px}
.bk-tl .is-now .dot{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}
.bk-tl b{color:var(--color-white-soft);display:block;font-size:var(--text-sm);font-weight:500}
.bk-tl .is-now b{color:var(--color-accent-text)}
.bk-tl small{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300}

@media (max-width:1023px){
  .bk-layout{grid-template-columns:1fr}
  .bk-aside{display:none}
  .bk-row{grid-template-columns:1fr}
  .bk-checks{grid-template-columns:1fr}
}


/* ---------- 05-style-fine-line.css ---------- */
/* ---- 05 · style fine line ---- */

/* En-tête planche d'encyclopédie, 21:9 */
.st-hero{overflow:hidden;position:relative}
.st-hero .ph{border:0;width:100%}
.st-hero__veil{background:var(--gradient-overlay);inset:0;position:absolute}
.st-hero__body{bottom:0;inset-inline:0;padding-bottom:var(--space-2xl);position:absolute}
.st-hero__body h1{font-size:var(--text-5xl);font-weight:700;letter-spacing:var(--tracking-tight)}
.st-hero__body .def{color:var(--color-grey-light);font-family:var(--font-heading);font-size:var(--text-xl);font-style:italic;margin-top:var(--space-sm);max-width:52ch}
.st-hero__spacer{padding-top:clamp(88px,12vh,120px)}

/* Fiche technique */
.st-facts{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-xl)}

/* Corps éditorial */
.st-copy{display:grid;gap:var(--space-lg)}
.st-copy p{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);max-width:66ch}
.st-copy p b{color:var(--color-white-soft);font-weight:500}

/* Galerie d'exemples */
.st-gallery{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.st-gallery .pf-item:nth-child(2){translate:0 var(--space-lg)}

/* Pour qui / à savoir */
.st-duo{display:grid;gap:var(--space-3xl);grid-template-columns:1fr 1fr}
.st-duo__col h3{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-md)}
.st-duo__col ul{display:grid;gap:var(--space-sm)}
.st-duo__col li{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);padding-left:1.5em;position:relative}
.st-duo__col li::before{color:var(--color-accent-primary);content:'–';left:0;position:absolute}
.st-duo__col li b{color:var(--color-white-soft);font-weight:500}

/* Renvoi vers les autres styles */
.st-others{border-top:1px solid var(--color-grey-dark)}
.st-others .ledger-row{grid-template-columns:64px 88px 1fr auto}

@media (max-width:1023px){
  .st-gallery{grid-template-columns:repeat(2,1fr)}
  .st-gallery .pf-item:nth-child(2){translate:0 0}
  .st-duo{gap:var(--space-xl);grid-template-columns:1fr}
}
@media (max-width:767px){
  .st-hero .ph{aspect-ratio:4/5}
}

/* Motifs Tier 1 réutilisés par cette page (le build n'inline que le CSS propre
   à la page : copies locales depuis 01-home.css et 02-portfolio.css) */
.head-row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:space-between;margin-bottom:var(--space-2xl)}
.head-row .section-head{margin-bottom:0}
.styles-ledger{border-top:1px solid var(--color-grey-dark)}
.ledger-row{
  align-items:center;
  border-bottom:1px solid var(--color-grey-dark);
  display:grid;gap:var(--space-lg);grid-template-columns:64px 88px 1fr auto;padding:var(--space-md) var(--space-sm);
  transition:background-color var(--duration-fast) var(--ease-default);
}
.ledger-row:hover{background:var(--color-black-soft)}
.ledger-row__no{color:var(--color-accent-primary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}
.ledger-row__thumb{width:88px}
.ledger-row__txt strong{color:var(--color-white-soft);display:block;font-family:var(--font-heading);font-size:var(--text-xl);font-weight:500;transition:color var(--duration-fast) var(--ease-default)}
.ledger-row__txt em{color:var(--color-grey-light);font-size:var(--text-sm);font-style:normal;font-weight:300}
.ledger-row:hover .ledger-row__txt strong{color:var(--color-accent-text)}
.ledger-row__arrow{color:var(--color-grey-medium);font-size:var(--text-xl);transition:translate var(--duration-normal) var(--ease-default),color var(--duration-fast) var(--ease-default)}
.ledger-row:hover .ledger-row__arrow{color:var(--color-accent-text);translate:6px 0}
.pf-item{position:relative}
.pf-item > .badge{left:var(--space-md);pointer-events:none;position:absolute;top:var(--space-md);z-index:3}
@media (max-width:767px){
  .ledger-row{gap:var(--space-md);grid-template-columns:44px 56px 1fr auto}
  .ledger-row__thumb{width:56px}
}


/* ---------- 06-about.css ---------- */
/* ---- 06 · à propos ---- */

/* Portrait + biographie */
.ab-split{align-items:start;display:grid;gap:var(--space-3xl);grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ab-split__media{max-width:440px;position:relative}
.ab-split__media .hand-note{background:var(--color-black-pure);border:1px solid var(--color-grey-dark);bottom:-16px;padding:5px 12px;position:absolute;right:-8px;rotate:-2deg;z-index:4}
.ab-split__body{display:grid;gap:var(--space-lg);justify-items:start}
.ab-split__body .bio{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);max-width:58ch}
.ab-split__body .bio em{color:var(--color-white-soft);font-style:normal}
.ab-facts{display:flex;flex-wrap:wrap;gap:var(--space-md)}

/* Philosophie : trois principes */
.ab-principles{display:grid;gap:var(--space-2xl);grid-template-columns:repeat(3,1fr)}
.ab-principle{align-content:start;border-top:1px solid var(--color-grey-dark);display:grid;gap:var(--space-sm);padding-top:var(--space-lg)}
.ab-principle h3{font-size:var(--text-xl);font-weight:600}
.ab-principle p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal)}

/* Bande studio */
.ab-studio{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);padding-inline:8px}

/* Hygiène */
.ab-hyg{align-items:start;display:grid;gap:var(--space-3xl);grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.ab-hyg__copy{display:grid;gap:var(--space-md)}
.ab-hyg__copy p{color:var(--color-grey-light);font-weight:300;line-height:var(--leading-relaxed);max-width:56ch}
.ab-hyg__frames{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr}
.ab-hyg__frames .spec-frame{padding-block:var(--space-md);text-align:center}

/* Chronologie en registre */
.tl{border-top:1px solid var(--color-grey-dark)}
.tl__row{border-bottom:1px solid var(--color-grey-dark);display:grid;gap:var(--space-lg);grid-template-columns:110px 1fr;padding-block:var(--space-lg)}
.tl__no{color:var(--color-accent-primary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-widest);text-transform:uppercase}
.tl__row h3{font-size:var(--text-xl);font-weight:600;margin-bottom:6px}
.tl__row p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);max-width:64ch}

@media (max-width:1023px){
  .ab-split{gap:var(--space-2xl);grid-template-columns:1fr}
  .ab-principles{gap:var(--space-lg);grid-template-columns:1fr}
  .ab-hyg{gap:var(--space-xl);grid-template-columns:1fr}
}
@media (max-width:767px){
  .ab-studio{grid-template-columns:1fr 1fr}
  .tl__row{gap:var(--space-sm);grid-template-columns:1fr}
}


/* ---------- 07-pricing.css ---------- */
/* ---- 07 · tarifs ---- */

/* Carte de tarifs gravée (double filet) */
.pr-card{
  background:var(--color-black-soft);
  border:1px solid var(--color-grey-dark);
  max-width:720px;
  outline:1px solid var(--color-grey-dark);outline-offset:5px;
  padding:var(--space-xl);
}
.pr-card__head{border-bottom:1px solid var(--color-grey-dark);display:grid;gap:var(--space-sm);justify-items:center;padding-bottom:var(--space-lg);text-align:center}
.pr-card__head h2{font-size:var(--text-3xl);font-weight:700}
.pr-card__head .sub{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.pr-rows{margin:0}
.pr-rows > div{align-items:baseline;border-bottom:1px solid var(--color-grey-dark);display:flex;gap:var(--space-lg);justify-content:space-between;padding:var(--space-md) 0}
.pr-rows > div:last-child{border-bottom:0}
.pr-rows dt{display:grid;gap:2px}
.pr-rows dt b{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600}
.pr-rows dt small{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300}
.pr-rows dd{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);margin:0;white-space:nowrap}
.pr-card__foot{border-top:1px solid var(--color-grey-dark);color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;padding-top:var(--space-lg);text-align:center}

/* Ce qui fait varier le prix */
.pr-vary{display:grid;gap:var(--space-2xl);grid-template-columns:repeat(3,1fr)}
.pr-vary > div{align-content:start;border-top:1px solid var(--color-grey-dark);display:grid;gap:var(--space-sm);padding-top:var(--space-lg)}
.pr-vary h3{font-size:var(--text-xl);font-weight:600}
.pr-vary p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal)}

/* Acompte et paiement */
.pr-pay{align-items:start;display:grid;gap:var(--space-3xl);grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pr-deposit{background:var(--color-charcoal);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-md);justify-items:start;outline:1px solid var(--color-grey-dark);outline-offset:3px;padding:var(--space-lg)}
.pr-deposit p{color:var(--color-grey-light);font-size:var(--text-sm)}
.pr-deposit p.strong{color:var(--color-white-soft)}
.pr-methods{align-content:start;display:grid;gap:var(--space-md)}
.pr-methods .pay-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pr-methods p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);max-width:44ch}

@media (max-width:1023px){
  .pr-vary{gap:var(--space-lg);grid-template-columns:1fr}
  .pr-pay{gap:var(--space-xl);grid-template-columns:1fr}
}
@media (max-width:560px){
  .pr-rows > div{align-items:flex-start;flex-direction:column;gap:var(--space-xs)}
}

/* Composant réutilisé de 04-booking (le build n'inline que le CSS de la page) */
.pay{align-items:center;border:1px solid var(--color-grey-dark);color:var(--color-grey-light);display:inline-flex;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:6px 12px;text-transform:uppercase}


/* ---------- 08-blog-index.css ---------- */
/* ---- 08 · blog index ---- */

/* Article vedette */
.bl-feat{align-items:center;display:grid;gap:var(--space-2xl);grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.bl-feat__body{display:grid;gap:var(--space-md);justify-items:start}
.bl-feat__body h2{font-size:var(--text-3xl);font-weight:600;line-height:var(--leading-tight)}
.bl-feat__body h2 a{transition:color var(--duration-fast) var(--ease-default)}
.bl-feat__body h2 a:hover{color:var(--color-accent-text)}
.bl-feat__body .excerpt{color:var(--color-grey-light);font-size:var(--text-base);font-weight:300;line-height:var(--leading-relaxed);max-width:48ch}

/* Métadonnées d'article */
.bl-meta{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}
.bl-cat{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}

/* Grille d'articles */
.blog-grid{display:grid;gap:var(--space-xl) var(--space-lg);grid-template-columns:repeat(3,1fr)}
.blog-card{align-content:start;display:grid;gap:var(--space-md)}
.blog-card__link{display:grid;gap:var(--space-md)}
.blog-card h3{font-size:var(--text-xl);font-weight:600;line-height:var(--leading-snug);transition:color var(--duration-fast) var(--ease-default)}
.blog-card__link:hover h3{color:var(--color-accent-text)}
.blog-card__body{display:grid;gap:var(--space-sm)}

@media (max-width:1023px){
  .bl-feat{gap:var(--space-lg);grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .blog-grid{grid-template-columns:1fr}
}


/* ---------- 09-blog-post.css ---------- */
/* ---- 09 · article de blog ---- */

/* Couverture 21:9 (même geste que l'entrée d'encyclopédie) */
.post-hero{overflow:hidden;position:relative}
.post-hero .ph{border:0;width:100%}
.post-hero__veil{background:var(--gradient-overlay);inset:0;position:absolute}
.post-hero__body{bottom:0;inset-inline:0;padding-bottom:var(--space-2xl);position:absolute}
.post-hero__body h1{font-size:var(--text-4xl);font-weight:700;letter-spacing:var(--tracking-tight);max-width:24ch}
.post-hero__meta{align-items:baseline;display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-md)}
.post-hero__spacer{padding-top:clamp(88px,12vh,120px)}
.bl-cat{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.bl-meta{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}

/* Partage : liens texte */
.post-share{border-block:1px solid var(--color-grey-dark);display:flex;gap:var(--space-lg);margin-block:var(--space-xl);padding-block:var(--space-md)}

/* Bio de l'autrice */
.post-author{align-items:center;background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:flex;gap:var(--space-lg);margin-top:var(--space-3xl);padding:var(--space-lg)}
.post-author .ph-slot{flex:none;width:72px}
.post-author p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal)}
.post-author b{color:var(--color-white-soft);font-weight:600}

/* Articles liés (mêmes cartes que l'index) */
.blog-grid{display:grid;gap:var(--space-xl) var(--space-lg);grid-template-columns:repeat(2,1fr)}
.blog-card{align-content:start;display:grid;gap:var(--space-md)}
.blog-card__link{display:grid;gap:var(--space-md)}
.blog-card h3{font-size:var(--text-xl);font-weight:600;line-height:var(--leading-snug);transition:color var(--duration-fast) var(--ease-default)}
.blog-card__link:hover h3{color:var(--color-accent-text)}
.blog-card__body{display:grid;gap:var(--space-sm)}

@media (max-width:767px){
  .post-hero .ph{aspect-ratio:4/5}
  .blog-grid{grid-template-columns:1fr}
}


/* ---------- 10-aftercare.css ---------- */
/* ---- 10 · aftercare ---- */

/* Étiquettes d'apothicaire */
.apo{display:grid;gap:var(--space-xl)}
.apo-label{
  background:var(--color-black-soft);
  border:1px solid var(--color-grey-dark);
  display:grid;gap:var(--space-md);justify-items:center;
  outline:1px solid var(--color-grey-dark);outline-offset:4px;
  padding:var(--space-xl);text-align:center;
}
.apo-label__no{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase}
.apo-label h2{font-size:var(--text-2xl);font-weight:700}
.apo-label__dose{border-block:1px solid var(--color-grey-dark);color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding-block:var(--space-sm);width:100%}
.apo-label p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-relaxed);max-width:52ch;text-align:left}
.apo-label p b{color:var(--color-white-soft);font-weight:500}

/* À faire / à éviter */
.duo{display:grid;gap:var(--space-3xl);grid-template-columns:1fr 1fr}
.duo__col h2{align-items:baseline;display:flex;font-size:var(--text-xl);font-weight:600;gap:10px;margin-bottom:var(--space-md)}
.duo__col h2 .ico{font-family:var(--font-mono);font-size:var(--text-sm)}
.duo__col--do h3 .ico{color:var(--color-success)}
.duo__col--dont h3 .ico{color:var(--color-error)}
.duo__col ul{display:grid;gap:var(--space-sm)}
.duo__col li{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);padding-left:1.5em;position:relative}
.duo__col li::before{color:var(--color-accent-primary);content:'–';left:0;position:absolute;top:0}
.duo__col li b{color:var(--color-white-soft);font-weight:500}

/* Chronologie de cicatrisation (registre) */
.tl{border-top:1px solid var(--color-grey-dark)}
.tl__row{border-bottom:1px solid var(--color-grey-dark);display:grid;gap:var(--space-lg);grid-template-columns:130px 1fr;padding-block:var(--space-lg)}
.tl__no{color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);padding-top:4px;text-transform:uppercase}
.tl__row h3{font-size:var(--text-lg);font-weight:600;margin-bottom:4px}
.tl__row p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);max-width:62ch}

/* Urgence */
.ac-alert{background:rgba(232,176,75,.06);border-left:2px solid var(--color-warning);color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);padding:var(--space-md) var(--space-lg)}
.ac-alert b{color:var(--color-white-soft);font-weight:500}

@media (max-width:767px){
  .duo{gap:var(--space-xl);grid-template-columns:1fr}
  .tl__row{gap:var(--space-xs);grid-template-columns:1fr}
}


/* ---------- 11-faq.css ---------- */
/* ---- 11 · faq ---- */

/* Groupes et entrées de folio */
.faq-group{margin-bottom:var(--space-2xl)}
.faq-group__head{align-items:baseline;display:flex;gap:var(--space-md);margin-bottom:var(--space-md)}
.faq-group__head h2{font-size:var(--text-2xl);font-weight:600}
.faq{border-top:1px solid var(--color-grey-dark)}
.faq details{border-bottom:1px solid var(--color-grey-dark)}
.faq summary{align-items:baseline;cursor:pointer;
  display:grid;gap:var(--space-lg);grid-template-columns:88px 1fr 24px;list-style:none;
  padding:var(--space-md) var(--space-sm);
  transition:background-color var(--duration-fast) var(--ease-default);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--color-black-soft)}
.faq__no{color:var(--color-accent-primary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);white-space:nowrap}
.faq__q{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-lg);font-weight:500}
.faq__mark{color:var(--color-grey-medium);font-size:var(--text-lg);justify-self:center;line-height:1;transition:rotate var(--duration-normal) var(--ease-default),color var(--duration-fast) var(--ease-default)}
.faq details[open] .faq__mark{color:var(--color-accent-text);rotate:45deg}
.faq__a{padding:0 var(--space-sm) var(--space-lg) calc(64px + var(--space-lg))}
.faq__a p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-relaxed);max-width:62ch}
.faq__a p + p{margin-top:var(--space-sm)}
.faq__a b{color:var(--color-white-soft);font-weight:500}

@media (max-width:767px){
  .faq summary{gap:var(--space-md);grid-template-columns:44px 1fr 20px}
  .faq__a{padding-left:calc(44px + var(--space-md))}
}


/* ---------- 12-contact.css ---------- */
/* ---- 12 · contact ---- */

.ct-layout{align-items:start;display:grid;gap:var(--space-3xl);grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ct-form{background:var(--color-black-soft);border:1px solid var(--color-grey-dark);display:grid;gap:var(--space-lg);padding:var(--space-xl)}
.ct-form .field{margin-bottom:0}
.ct-form__foot{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-md)}

.ct-info{align-content:start;display:grid;gap:var(--space-xl)}
.ct-info__block{display:grid;gap:var(--space-sm)}
.ct-info__block p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-relaxed)}
.ct-info__block p b{color:var(--color-white-soft);font-weight:500}
.ct-map{border:1px solid var(--color-grey-dark);display:block;overflow:hidden;position:relative}
.ct-map__img{aspect-ratio:3/2;display:block;filter:invert(.91) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.82);height:auto;object-fit:cover;transition:filter .45s ease,transform .6s ease;width:100%}
.ct-map:hover .ct-map__img{filter:invert(.88) hue-rotate(180deg) brightness(1) contrast(.95) saturate(.95);transform:scale(1.03)}
.ct-map__badge{background:rgba(11,11,11,.78);border:1px solid var(--color-grey-dark);bottom:12px;color:var(--color-white-soft);font-family:var(--font-mono);font-size:.6rem;left:12px;letter-spacing:.14em;padding:5px 10px;position:absolute;text-transform:uppercase;z-index:3}
.ct-map .pin{background:var(--color-accent-primary);box-shadow:0 0 0 4px rgba(155,28,28,.22),0 2px 6px rgba(0,0,0,.7);height:13px;left:50%;margin:0;top:50%;transform:translate(-50%,-50%);width:13px;z-index:2}

/* Variante succès */
.ct-ok{background:rgba(74,124,89,.07);border:1px solid var(--color-success);display:grid;gap:var(--space-md);justify-items:start;max-width:640px;padding:var(--space-xl)}
.ct-ok__head{align-items:baseline;display:flex;gap:var(--space-md)}
.ct-ok__head .ico{color:var(--color-success);font-family:var(--font-mono)}
.ct-ok h3{font-size:var(--text-2xl);font-weight:600}
.ct-ok p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-normal);max-width:52ch}

@media (max-width:1023px){
  .ct-layout{gap:var(--space-xl);grid-template-columns:1fr}
}


/* ---------- 13-legal.css ---------- */
/* ---- 13 · mentions légales ---- */

.lg-anchors{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-2xl)}
.lg-doc{display:grid;gap:var(--space-3xl)}
.lg-doc section{border-top:1px solid var(--color-grey-dark);padding-top:var(--space-xl);scroll-margin-top:96px}
.lg-doc h2{font-size:var(--text-2xl);font-weight:600;margin-bottom:var(--space-md)}
.lg-meta{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}
.lg-block{display:grid;gap:var(--space-md)}
.lg-block h3{font-size:var(--text-lg);font-weight:600;margin-top:var(--space-sm)}


/* ---------- 14-error-404.css ---------- */
/* ---- 14 · erreur 404 ---- */

.err{align-items:center;background:var(--gradient-hero);display:flex;min-height:100vh;min-height:100svh;overflow:hidden;position:relative}
.err__inner{display:grid;gap:var(--space-xl);justify-items:start;padding-bottom:var(--space-3xl);padding-top:120px;width:100%}
.err__code{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase}
.err h1{font-size:clamp(38px,6vw,72px);font-style:italic;font-weight:600;letter-spacing:var(--tracking-tight);max-width:18ch}
.err p{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed);max-width:52ch}
.err .rule-orn{width:min(320px,100%)}

.err-exits{border-top:1px solid var(--color-grey-dark);width:min(560px,100%)}
.err-exit{align-items:center;border-bottom:1px solid var(--color-grey-dark);
  display:grid;gap:var(--space-lg);grid-template-columns:56px 1fr auto;
  padding:var(--space-md) var(--space-sm);
  transition:background-color var(--duration-fast) var(--ease-default);
}
.err-exit:hover{background:var(--color-black-soft)}
.err-exit__no{color:var(--color-accent-primary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}
.err-exit strong{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-lg);font-weight:500;transition:color var(--duration-fast) var(--ease-default)}
.err-exit:hover strong{color:var(--color-accent-text)}
.err-exit__arrow{color:var(--color-grey-medium);transition:translate var(--duration-normal) var(--ease-default),color var(--duration-fast) var(--ease-default)}
.err-exit:hover .err-exit__arrow{color:var(--color-accent-text);translate:6px 0}


/* ---------- 15-colophon.css ---------- */
/* ---- 15 · colophon ---- */
/* Exception assumée du site : colonne unique, étroite, centrée. */

.co{display:grid;gap:var(--space-3xl);justify-items:center;margin-inline:auto;max-width:620px;text-align:center}
.co section{display:grid;gap:var(--space-md);justify-items:center;width:100%}
.co p{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-relaxed);max-width:54ch}
.co p b{color:var(--color-white-soft);font-weight:500}
.co .rule-orn{width:min(280px,100%)}

.co-frame{
  background:var(--color-black-soft);
  border:1px solid var(--color-grey-dark);
  display:grid;gap:var(--space-md);justify-items:center;
  outline:1px solid var(--color-grey-dark);outline-offset:5px;
  padding:var(--space-xl);
  width:100%;
}
.co-frame h2{font-size:var(--text-3xl);font-style:italic;font-weight:700}
.co-frame .mono-line{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}

.co-credit{display:grid;gap:4px;justify-items:center}
.co-credit .who{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600}

.co-faces{border-top:1px solid var(--color-grey-dark);width:100%}
.co-face{border-bottom:1px solid var(--color-grey-dark);display:grid;gap:8px;justify-items:center;padding-block:var(--space-lg)}
.co-face .smp{color:var(--color-white-soft);line-height:var(--leading-tight)}
.co-face .smp--playfair{font-family:var(--font-heading);font-size:var(--text-3xl);font-style:italic;font-weight:600}
.co-face .smp--inter{font-family:var(--font-body);font-size:var(--text-lg);font-weight:300}
.co-face .smp--amatic{color:var(--color-accent-text);font-family:var(--font-accent);font-size:var(--text-3xl)}
.co-face .smp--mono{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-base);letter-spacing:var(--tracking-wide)}
.co-face small{color:var(--color-grey-light);font-size:var(--text-xs);font-weight:300;line-height:var(--leading-normal);max-width:44ch}

.co-updated{color:var(--color-grey-light);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}


/* ============================================================
   Ajout main (hors bundle _src) — notice cookies. À migrer dans
   la source quand le pipeline CSS sera rapatrié dans le dépôt.
   ============================================================ */
.cookie{background:var(--color-black-soft);border-top:1px solid var(--color-grey-dark);bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.5);left:0;position:fixed;right:0;transform:translateY(100%);transition:transform var(--duration-normal) var(--ease-default);z-index:990}
.cookie.is-in{transform:translateY(0)}
.cookie__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:space-between;padding-block:var(--space-md)}
.cookie__text{color:var(--color-grey-light);font-size:var(--text-sm);margin:0;max-width:64ch}
.cookie__actions{align-items:center;display:flex;flex-shrink:0;gap:var(--space-lg)}
@media (max-width:767px){.cookie__inner{align-items:flex-start;flex-direction:column;gap:var(--space-md)}}
@media (prefers-reduced-motion:reduce){.cookie{transition:none}}

/* --- Nav "work in progress" badge (Portfolio / Flash) --- */
.wip{border:1px solid var(--color-grey-dark);border-radius:3px;color:var(--color-accent-primary);display:inline-block;font-family:var(--font-mono);font-size:.58em;font-weight:400;letter-spacing:.08em;line-height:1;margin-left:.45em;padding:.18em .42em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.menu-overlay__nav .wip{font-size:.5em;margin-left:.6em}

/* --- Footer social icons (Instagram / Facebook) --- */
.site-foot__social{display:flex;gap:var(--space-sm);margin:var(--space-md) 0}
.site-foot__social .soc{align-items:center;border:1px solid var(--color-grey-dark);border-radius:4px;color:var(--color-grey-light);display:inline-flex;height:40px;justify-content:center;transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);width:40px}
.site-foot__social .soc:hover{background:var(--color-black-soft);border-color:var(--color-accent-primary);color:var(--color-accent-text)}

/* --- Plain link (address / maps): no ink underline --- */
.lnk--plain{background-image:none;color:inherit}
.lnk--plain:hover{background-image:none;color:var(--color-accent-text)}

/* --- "In progress" hanging sign (Portfolio / Flash placeholder pages) --- */
.wip-page{display:grid;min-height:54vh;padding-block:var(--space-3xl);place-items:center}
.wip-sign{margin-inline:auto;max-width:36rem;text-align:center}
.wip-sign__hang{color:var(--color-grey-dark);display:block;margin:0 auto -2px}
.wip-sign__board{background:var(--color-black-soft);border:1px solid var(--color-grey-dark);border-radius:2px;box-shadow:0 28px 64px rgba(0,0,0,.5);padding:var(--space-2xl) var(--space-xl);position:relative;rotate:-1deg}
.wip-sign__plate{color:var(--color-accent-text);display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);margin-bottom:var(--space-md);text-transform:uppercase}
.wip-sign__title{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:600;margin-bottom:var(--space-sm)}
.wip-sign__body{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-relaxed);margin:0 auto var(--space-lg);max-width:34ch}
.wip-sign__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}
@media (prefers-reduced-motion:reduce){.wip-sign__board{rotate:none}}

/* --- Home "in progress" zone: dim a teaser grid + hang a small sign --- */
.wip-zone{position:relative}
.wip-zone__dim{filter:grayscale(.55);opacity:.4;pointer-events:none;user-select:none}
.wip-zone__tag{align-items:center;display:flex;flex-direction:column;left:50%;pointer-events:none;position:absolute;top:0;translate:-50% -16px;z-index:2}
.wip-zone__hang{color:var(--color-grey-dark);display:block}
.wip-zone__label{background:var(--color-black-soft);border:1px solid var(--color-grey-dark);border-radius:2px;box-shadow:0 14px 30px rgba(0,0,0,.5);color:var(--color-accent-text);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-widest);margin-top:-3px;padding:.45em .95em;rotate:-1.5deg;text-transform:uppercase}
.lnk--disabled{background-image:none;color:var(--color-grey-medium);cursor:default;pointer-events:none}
@media (prefers-reduced-motion:reduce){.wip-zone__label{rotate:none}}

/* --- Styles index grid + generic style page --- */
.styles-grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.style-card{align-items:center;background:var(--color-black-soft);border:1px solid var(--color-grey-dark);border-radius:var(--radius-sm,3px);display:grid;gap:var(--space-lg);grid-template-columns:64px 1fr auto;padding:var(--space-lg);transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}
.style-card:hover{background:var(--color-black-pure);border-color:var(--color-accent-primary)}
.style-card__motif{height:64px;width:64px}
.style-card__body{display:grid;gap:4px;min-width:0}
.style-card__name{color:var(--color-white-soft);font-family:var(--font-heading);font-size:var(--text-xl);font-weight:500}
.style-card__desc{color:var(--color-grey-light);font-size:var(--text-sm);font-weight:300;line-height:var(--leading-snug)}
.style-card__arrow{color:var(--color-grey-medium);font-size:var(--text-2xl);line-height:1}
.style-card:hover .style-card__arrow{color:var(--color-accent-text)}

.st-generic{align-items:start;display:grid;gap:var(--space-2xl);grid-template-columns:120px 1fr}
.st-generic__motif{flex:none;height:120px;width:120px}
.st-generic .st-copy p{color:var(--color-grey-light);font-size:var(--text-lg);font-weight:300;line-height:var(--leading-relaxed)}
.st-generic .st-copy b{color:var(--color-white-soft);font-weight:500}
@media (max-width:640px){.st-generic{gap:var(--space-lg);grid-template-columns:1fr}}

/* Honeypot: off-screen, kept out of the tab order + a11y tree (bots still fill it). */
.hp{height:1px;left:-9999px!important;overflow:hidden;position:absolute!important;width:1px}

/* ═══════════ Flash board (dynamic gallery, PL. 03) ═══════════ */
.fl-board{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin-top:var(--space-xl)}
.fl-board--done{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:var(--space-lg)}
.fl-card{background:var(--color-black-soft);border:1px solid var(--color-charcoal);display:flex;flex-direction:column}
.fl-card__fig{margin:0;position:relative}
.fl-card__fig .ph{aspect-ratio:4/5;display:block;height:auto;object-fit:cover;width:100%}
.fl-badge{background:var(--color-black-pure);border:1px solid var(--color-charcoal);color:var(--color-accent-light);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;padding:.35em .9em;position:absolute;right:10px;text-transform:uppercase;top:10px}
.fl-badge--done{color:var(--color-grey-medium)}
.fl-card--taken .fl-card__fig .ph,.fl-card--done .fl-card__fig .ph{filter:grayscale(.4) brightness(.72)}
.fl-card__body{display:flex;flex:1;flex-direction:column;gap:var(--space-sm);padding:var(--space-md)}
.fl-card__title{font-family:var(--font-heading);font-size:1.15rem;font-style:italic;margin:0}
.fl-card__desc{color:var(--color-grey-light);font-size:.86rem;line-height:1.55;margin:0}
.fl-card__specs{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);margin:0}
.fl-card__specs div{display:flex;gap:.45em}
.fl-card__specs dt{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;padding-top:.35em;text-transform:uppercase}
.fl-card__specs dd{color:var(--color-white-soft);font-size:.9rem;margin:0}
.fl-card__price{color:var(--color-accent-light);font-family:var(--font-heading);font-size:1.05rem;font-style:italic}
.fl-card__unique{border-top:1px solid var(--color-charcoal);color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;margin:auto 0 0;padding-top:var(--space-sm);text-transform:uppercase}
.fl-reserve{margin-top:var(--space-xs)}
.fl-reserve>summary{cursor:pointer;display:inline-block;list-style:none;width:100%}
.fl-reserve>summary::-webkit-details-marker,.fl-reserve>summary::marker{display:none}
.fl-reserve[open]>summary{margin-bottom:var(--space-md)}
.fl-reserve__form{display:flex;flex-direction:column;gap:var(--space-sm)}
.fl-reserve__form .field__hint{font-size:.78rem}
.fl-notice{border:1px solid var(--color-accent-dark);border-left:3px solid var(--color-accent-primary);margin-bottom:var(--space-xl);padding:var(--space-md) var(--space-lg)}
.fl-notice h2{font-size:1.2rem;margin:0 0 .35em}
.fl-notice p{color:var(--color-grey-light);margin:0}
.fl-empty{border:1px dashed var(--color-charcoal);margin-top:var(--space-xl);padding:var(--space-2xl) var(--space-lg);text-align:center}
.fl-empty h2{margin:.5em 0 .4em}
.fl-empty .btn{margin-top:var(--space-md)}
@media (max-width:640px){.fl-board{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

/* ═══════════ Portfolio grid (dynamic gallery, PL. 02) ═══════════ */
.pf-filter{align-items:baseline;display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-sm);margin-top:var(--space-lg)}
.pf-filter__label{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;margin-right:var(--space-xs);text-transform:uppercase}
.pf-filter__item{border:1px solid var(--color-charcoal);color:var(--color-grey-light);font-size:.82rem;padding:.35em 1em;text-decoration:none;transition:border-color .2s,color .2s}
.pf-filter__item:hover{border-color:var(--color-grey-medium);color:var(--color-white-soft)}
.pf-filter__item--active{border-color:var(--color-accent-primary);color:var(--color-accent-light)}
.pf-grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:var(--space-xl)}
.pf-tile{border:1px solid var(--color-charcoal);color:inherit;display:flex;flex-direction:column;text-decoration:none;transition:border-color .25s}
.pf-tile:hover{border-color:var(--color-grey-medium)}
.pf-tile__fig{margin:0}
.pf-tile__fig .ph{aspect-ratio:1/1;display:block;height:auto;object-fit:cover;width:100%}
.pf-tile__meta{display:flex;flex-direction:column;gap:.3em;padding:var(--space-sm) var(--space-md)}
.pf-tile__title{font-family:var(--font-heading);font-size:1rem;font-style:italic;font-weight:600}
.pf-tile__specs{color:var(--color-grey-light);font-size:.8rem}
.pf-tile__state{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:640px){.pf-grid{grid-template-columns:repeat(2,1fr)}}

/* OSM attribution under the static maps (ODbL requirement) */
.map-credit{margin:.45em 0 0;text-align:right}
.map-credit a{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-decoration:none}
.map-credit a:hover{color:var(--color-grey-light);text-decoration:underline}

/* ═══════════ Blog (journal, PL. 18) ═══════════ */
.post-list{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-xl)}
.post-grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--space-xl)}
.post-grid .post-card{align-content:start}
.post-card{border:1px solid var(--color-charcoal);color:inherit;display:grid;gap:.35em;grid-template-columns:1fr auto;padding:var(--space-md) var(--space-lg);text-decoration:none;transition:border-color .25s}
.post-card:hover{border-color:var(--color-grey-medium)}
.post-card__meta{color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.62rem;grid-column:1;letter-spacing:.14em;text-transform:uppercase}
.post-card__title{font-family:var(--font-heading);font-size:1.25rem;font-style:italic;font-weight:600;grid-column:1}
.post-card__lede{color:var(--color-grey-light);font-size:.9rem;grid-column:1;line-height:1.6}
.post-card__arrow{align-self:center;color:var(--color-grey-medium);font-size:1.4rem;grid-column:2;grid-row:1/span 3}
.post-card--compact{grid-template-columns:1fr auto}
.post-card--compact .post-card__arrow{grid-row:1}
.article-byline{color:var(--color-grey-light);font-size:.88rem;margin-top:var(--space-md)}
.article-body .st-copy{margin-top:var(--space-xl)}
.article-body .st-copy:first-child{margin-top:0}
.article-list{color:var(--color-grey-light);line-height:1.7;margin:.6em 0 0;padding-left:1.1em}
.article-list li{margin:.4em 0}
.article-list b{color:var(--color-white-soft);font-weight:500}
.article-links{margin-top:var(--space-xl)}

/* Article figures: line-art diagrams (currentColor SVGs on the theme ink) */
.article-fig{border:1px solid var(--color-charcoal);color:var(--color-grey-light);margin:var(--space-xl) 0 0;padding:var(--space-md)}
.article-fig img{display:block;height:auto;width:100%}
.article-fig figcaption{border-top:1px solid var(--color-charcoal);color:var(--color-grey-medium);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;margin-top:var(--space-md);padding-top:var(--space-sm)}