@font-face{
  font-family:'PoliceTitre';
  src:url('police-titre.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'PoliceLibelle';
  src:url('police-libelle.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --police-titre:'PoliceTitre',"Spectral","Iowan Old Style",Palatino,Georgia,serif;
  --police-libelle:'PoliceLibelle',"Barlow","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  --nuit:#1A120C;         /* le plus sombre : bandeau, bandes d'atelier, pied */
  --nuit-haut:#221812;    /* le haut du dégradé des bandes sombres */

  --fond:#F4EBDA;         /* LE PAPIER, chaud : le fond de page */
  --fond-alt:#E7DAC2;     /* LE CUIR CLAIR : les bandes claires alternées */
  --carte:#FBF5E9;        /* le fond des blocs posés sur le papier */
  --cuir-haut:#EFE3CB;    /* le haut d'une étiquette de réparation */
  --cuir-bas:#E2D4B8;     /* son bas — la même peau, un ton plus bas */
  --tabac-haut:#3A2A1E;   /* LE TABAC : le haut d'une pièce de cuir sur l'établi */
  --tabac-bas:#2E2016;    /* son bas — ΔL* 4,9, la peau ne change pas de couleur */

  --encre:#241811;        /* le texte sur fond clair */
  --encre-douce:#63513F;  /* le texte secondaire sur fond clair */
  --creme:#F6EFE2;        /* le texte sur fond sombre */
  --creme-doux:#C6B7A2;   /* le texte secondaire sur fond sombre */

  --marque:#8F4720;       /* LE COGNAC : liens, filets, fil poissé, accent clair */
  --marque-fonce:#763A18; /* le stop bas des dégradés d'accent, et le survol */
  --laiton:#D9A441;       /* LE FIL CIRÉ : accent sur fond SOMBRE uniquement */
  --laiton-clair:#E8C173; /* le mot d'accent du bandeau, sur le verre */

  --rayon:12px;
  --rayon-bouton:10px;    /* jamais nul : un bouton n'est pas un rectangle brut */
  --colonne:1120px;
  --colonne-etroite:800px;
  --marge:24px;

  --ombre:0 1px 2px rgba(36,24,17,.08), 0 12px 28px rgba(36,24,17,.14);
  --ombre-levee:0 1px 2px rgba(36,24,17,.08), 0 18px 40px rgba(36,24,17,.20);
  --ombre-nuit:0 1px 2px rgba(0,0,0,.30), 0 16px 36px rgba(0,0,0,.40);
  --ombre-nuit-levee:0 1px 2px rgba(0,0,0,.30), 0 24px 52px rgba(0,0,0,.52);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--police-libelle);
  background:var(--fond);color:var(--encre);
  line-height:1.62;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
figure{max-width:100%;min-width:0}
a{color:var(--marque)}
ol,ul{list-style:none}

.evite{position:absolute;left:-999px;top:0;background:var(--nuit);color:var(--creme);
  padding:12px 16px;z-index:99;text-decoration:none}
.evite:focus{left:8px}
:focus-visible{outline:2px solid var(--marque);outline-offset:3px}

.ruban{background:var(--nuit);color:var(--creme-doux);text-align:center;
  font-size:13.5px;padding:8px 16px;letter-spacing:.01em}
.ruban a{color:var(--laiton)}

.haut{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--fond) 84%,transparent);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  border-bottom:1px solid rgba(36,24,17,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.nav__dedans{max-width:var(--colonne);margin:0 auto;padding:12px var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.marque{display:flex;flex-direction:column;text-decoration:none;color:var(--encre);line-height:1.15}
.marque__nom{font-family:var(--police-titre);font-weight:700;font-size:22px;letter-spacing:.005em}
.marque__sous{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce)}
#nav-links{display:flex;gap:28px;align-items:center}
#nav-links a{color:var(--encre);text-decoration:none;font-weight:600;font-size:15.5px;
  padding:8px 0;display:inline-block;position:relative;transition:color .22s ease}
#nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--marque);transform:scaleX(0);transform-origin:left;
  transition:transform .24s cubic-bezier(.16,1,.3,1)}
#nav-links a:hover{color:var(--marque)}
#nav-links a:hover::after{transform:scaleX(1)}
#nav-toggle{display:none;background:none;border:0;padding:12px;cursor:pointer;
  min-width:48px;min-height:48px}
.nav-toggle__trait{display:block;width:24px;height:2px;background:var(--encre);
  margin:5px auto;border-radius:2px}

.entete-section{margin-bottom:32px}
.sur{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:12px}
.sur::before{content:"";width:52px;height:8px;flex:none;
  background:repeating-linear-gradient(135deg,var(--fil-sur,var(--marque)) 0 2.5px,transparent 2.5px 9.2px)}
.sur--clair{color:var(--creme-doux);--fil-sur:var(--laiton)}

.couture{display:block;width:min(188px,46%);height:11px;margin:6px 0 20px;
  background:repeating-linear-gradient(135deg,var(--laiton) 0 3px,transparent 3px 13px)}

.titre2{font-family:var(--police-titre);font-weight:700;
  font-size:clamp(30px,3.6vw,44px);line-height:1.14;letter-spacing:-.008em}
.titre2--clair{color:var(--creme)}
.para{color:var(--encre-douce);max-width:60ch}
.para--large{max-width:66ch;margin-top:16px;font-size:17.5px}
.para--clair{color:var(--creme-doux)}
.note{--fil-note:rgba(154,78,34,.62);
  position:relative;max-width:64ch;margin-top:40px;padding:19px 0 0;
  color:var(--encre-douce);font-size:15.5px}
.note::before{content:"";position:absolute;left:0;top:0;width:100%;height:9px;
  background:radial-gradient(circle at 50% 50%,var(--fil-note) 0 1.7px,transparent 2.6px)
    left 2px top 3px/11px 9px repeat-x}

.colonne{max-width:var(--colonne);margin:0 auto;padding:0 var(--marge);
  position:relative;z-index:1}
.colonne--etroite{max-width:var(--colonne-etroite)}

.btn{display:inline-flex;flex-direction:column;gap:2px;
  padding:12px 24px;border-radius:var(--rayon-bouton);text-decoration:none;
  font-weight:700;font-size:16px;min-height:48px;justify-content:center;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.btn--fil{background:linear-gradient(180deg,var(--laiton-clair),var(--laiton));
  color:var(--encre);box-shadow:var(--ombre-nuit)}
.btn--fil:hover{box-shadow:var(--ombre-nuit-levee)}
.btn__quoi{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.btn__num{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em}
.btn--ligne{background:rgba(246,239,226,.08);color:var(--creme);
  border:1px solid rgba(246,239,226,.42);align-self:center;justify-content:center}
.btn--ligne:hover{background:rgba(246,239,226,.18)}

.bandeau{min-height:82vh;display:flex;align-items:center;overflow:hidden;background:var(--nuit)}
.bandeau__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%;
  opacity:.62;filter:sepia(.55) saturate(.85) contrast(1.05)}
.bandeau__voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,18,12,.44) 0%,rgba(26,18,12,.86) 100%)}
.bandeau__dedans{position:relative;z-index:2;max-width:var(--colonne);
  margin:0 auto;padding:96px var(--marge) 104px;width:100%}

.verre{max-width:720px;padding:40px;border-radius:var(--rayon);
  background:color-mix(in srgb,var(--nuit) 86%,transparent);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--ombre-nuit)}
.bandeau__titre{font-family:var(--police-titre);font-weight:700;
  font-size:clamp(42px,6vw,74px);line-height:1.02;letter-spacing:-.018em;
  color:var(--creme);margin-bottom:0}
.bandeau__accent{font-family:var(--police-titre);font-weight:700;
  font-size:clamp(42px,6vw,74px);line-height:1.02;letter-spacing:-.018em;
  color:var(--laiton-clair);margin-bottom:20px}
.bandeau__intro{color:var(--creme-doux);max-width:52ch;font-size:17.5px}
.bandeau__actes{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

.geste{background-color:#f4ebda;padding:0 0 108px}
.geste__deux{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:48px;align-items:center}
.geste__mot{padding-top:96px}
.geste .para + .para{margin-top:16px}

.reparations{background-color:#1a120c;
  color:var(--creme);padding:80px 0 88px}
.reparations .entete-section{position:relative}
.reparations .entete-section::before{content:"";position:absolute;
  left:50%;transform:translateX(-50%);top:-140px;
  width:min(760px,100%);height:400px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(217,164,65,.07),transparent)}

.rep-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:24px;margin-top:8px}
.patch{position:relative;border-radius:var(--rayon);padding:32px 28px;
  background-color:#3a2a1e;
  border:1px solid rgba(246,239,226,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--ombre-nuit);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.patch::before{content:"";position:absolute;inset:10px;border-radius:6px;pointer-events:none;
  border:1px dashed rgba(217,164,65,.36);transition:border-color .24s ease,inset .24s ease}
.patch:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--ombre-nuit-levee);
  border-color:rgba(217,164,65,.42)}
.patch:hover::before{border-color:rgba(217,164,65,.62)}
.patch__nom{font-family:var(--police-titre);font-weight:700;font-size:22px;
  color:var(--laiton);margin-bottom:10px}
.patch__texte{color:var(--creme-doux);font-size:15.5px}
.reparations .note{color:var(--creme-doux)}
.reparations .note{--fil-note:rgba(217,164,65,.60)}

.temps{background-color:#f4ebda;padding:112px 0 104px}
.etiquettes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;margin-top:8px}
.etiquette{position:relative;padding:56px 28px 30px;
  background:linear-gradient(180deg,#FBF4E5,var(--cuir-bas));
  clip-path:polygon(34px 0,100% 0,100% 100%,0 100%,0 34px);
  filter:drop-shadow(0 10px 20px rgba(36,24,17,.26));
  transition:transform .26s cubic-bezier(.16,1,.3,1),filter .26s ease}
.etiquette::before{content:"";position:absolute;inset:11px;pointer-events:none;
  clip-path:polygon(25px 0,100% 0,100% 100%,0 100%,0 25px);
  border:1.5px dashed rgba(143,71,32,.55)}
.etiquette::after{content:"";position:absolute;left:34px;right:0;top:0;height:1px;
  pointer-events:none;background:rgba(255,255,255,.85)}
.etiquette:hover{filter:drop-shadow(0 20px 36px rgba(36,24,17,.26))}
.etiquette__oeillet{position:absolute;left:24px;top:20px;width:16px;height:16px;
  border-radius:50%;background:var(--cuir-bas);
  box-shadow:0 0 0 4px var(--laiton),0 0 0 5px rgba(118,58,24,.35),
             inset 0 1px 3px rgba(36,24,17,.6)}
.etiquette__nom{font-family:var(--police-titre);font-weight:700;font-size:21px;
  line-height:1.2;margin-bottom:8px}
.etiquette__texte{color:var(--encre-douce);font-size:15.5px}

.cadre{position:relative;overflow:hidden;border-radius:16px;
  padding:11px;background:var(--cuir-haut);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),var(--ombre);
  border:1px solid rgba(36,24,17,.16)}
.cadre::after{content:"";position:absolute;inset:5px;border-radius:11px;
  pointer-events:none;border:1px dashed rgba(143,71,32,.42)}
.cadre img{width:100%;border-radius:7px;display:block}
.cadre--haut{margin-top:-96px;position:relative;z-index:2;box-shadow:var(--ombre-nuit-levee)}
.cadre--debout img{aspect-ratio:3/4;object-fit:cover;object-position:50% 50%}

.atelier{background-color:#1a120c;
  color:var(--creme);padding:76px 0 84px}
.atelier__deux{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:48px;align-items:center}
.atelier .cadre{background:var(--tabac-haut);border-color:rgba(217,164,65,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--ombre-nuit)}
.atelier .cadre::after{border-color:rgba(217,164,65,.44)}

.contact{background-color:#f4ebda;padding:100px 0 104px}
.contact__grille{display:grid;grid-template-columns:minmax(0,1fr);
  gap:48px;align-items:start;max-width:820px;margin-inline:auto}
.contact .btn--fil{margin:24px 0 32px}

.tableau{position:relative;border-radius:var(--rayon);overflow:hidden;
  background-color:#1a120c;color:var(--creme);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--ombre);
  padding:16px 24px}
.tableau::before{content:"";position:absolute;inset:8px;border-radius:6px;pointer-events:none;
  border:1px dashed rgba(217,164,65,.30)}
.tableau__ligne{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:11px 8px;border-bottom:1px solid rgba(246,239,226,.12)}
.tableau__ligne:last-child{border-bottom:0}
.tableau__ligne dt{font-weight:700;display:flex;align-items:center;gap:10px}
.tableau__ligne dd{color:var(--laiton);font-variant-numeric:tabular-nums lining-nums}
.tableau__ligne--ferme dd{color:var(--creme-doux)}
.tableau__ligne--aujourdhui{background:rgba(217,164,65,.10)}
.tableau__aujourdhui{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre);background:var(--laiton);border-radius:999px;padding:2px 8px}

.fiche{border-radius:var(--rayon);background:var(--carte);padding:24px;
  border:1px solid rgba(36,24,17,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),var(--ombre)}
.fiche__titre{font-family:var(--police-titre);font-weight:700;font-size:19px;margin-bottom:8px}
.tableau--fiche{background:none;color:var(--encre);box-shadow:none;padding:0;border-radius:0}
.tableau--fiche::before{display:none}
.tableau--fiche .tableau__ligne{border-bottom:1px solid rgba(36,24,17,.10);padding:11px 0}
.tableau--fiche dt{color:var(--encre-douce);font-weight:600;min-width:104px}
.tableau--fiche dd{color:var(--encre)}
.tableau--fiche dd a{color:var(--marque);text-decoration:none;font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;
  padding:4px 0;display:inline-block;min-height:24px}
.tableau--fiche dd a:hover{color:var(--marque-fonce);text-decoration:underline}

.pied{background:var(--nuit);color:var(--creme-doux);padding:40px 0}
.pied__dedans{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14.5px}
.pied__qui{color:var(--creme);font-weight:700}
.pied a{color:var(--laiton)}

main > section{position:relative}
main > section::after,.pied::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100% - var(--colonne)) / 2));
  --joue-masque:linear-gradient(#000,#000);
  background-image:
    linear-gradient(90deg,
      var(--pli-ombre) 0%,transparent 9%,
      var(--pli-jour) 21%,transparent 34%,
      var(--pli-ombre) 44%,transparent 57%,
      var(--pli-jour) 72%,transparent 84%,
      var(--pli-ombre) 93%,transparent 100%);
  background-size:100% 100%;
  background-position:left top;
  background-repeat:no-repeat;
  -webkit-mask-image:var(--joue-masque);
  mask-image:var(--joue-masque);
}
.geste,.temps,.contact{
  --joue-fond:rgba(36,24,17,.34);
  --joue-trait:rgba(143,71,32,.16);      /* la tête du clou, en creux de cognac */
  --joue-clou:rgba(255,255,255,.62);     /* sa lumière, 1 px plus haut */
  --joue-fil:rgba(143,71,32,.085);       /* le fil poissé qui traverse */
  --joue-lueur:rgba(255,255,255,.70);
  --joue-arete:rgba(255,255,255,.58);
  --pli-ombre:rgba(60,38,24,.040);       /* le creux du pli, dans le cuir clair */
  --pli-jour:rgba(255,255,255,.115);     /* sa crête, là où la lampe passe */
}
.bandeau,.reparations,.atelier,.pied{
  --joue-fond:rgba(255,238,209,.10);
  --joue-trait:rgba(0,0,0,.34);           /* l'ombre portée du clou sur le cuir sombre */
  --joue-clou:rgba(217,164,65,.30);       /* sa tête de laiton, qui accroche la lampe */
  --joue-fil:rgba(217,164,65,.085);       /* le fil ciré, doré, sur le cuir sombre */
  --joue-lueur:rgba(255,238,209,.16);
  --joue-arete:rgba(26,18,12,.44);
  --pli-ombre:rgba(0,0,0,.115);
  --pli-jour:rgba(255,238,209,.032);     /* sur du sombre, c'est la crête qui se voit */
}
.bandeau{--joue-fond:rgba(26,18,12,.34);--joue-arete:rgba(255,238,209,.26);
  --joue-trait:rgba(0,0,0,.16);--joue-clou:rgba(255,238,209,.13);
  --joue-fil:rgba(217,164,65,.035);--joue-lueur:rgba(255,238,209,.20);
  --pli-ombre:rgba(0,0,0,.055);--pli-jour:rgba(255,238,209,.018)}

html.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
html.js .reveal.est-vu{opacity:1;transform:none}
html.js .patch:nth-child(2),html.js .etiquette:nth-child(2){transition-delay:60ms}
html.js .patch:nth-child(3),html.js .etiquette:nth-child(3){transition-delay:120ms}
html.js .patch:nth-child(4),html.js .etiquette:nth-child(4){transition-delay:180ms}

html.js .etiquette.reveal{transform:translateY(18px) rotate(-2.2deg);
  transform-origin:22px 22px;                    /* le pivot est l'œillet */
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
html.js .etiquette.reveal.est-vu{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js .etiquette.reveal{transform:none;
    transition:opacity .45s ease;transition-delay:0s !important}
  .cadre img{transition:none}
  #nav-links a::after{transition:none}
}

@media (max-width:1080px){
  .geste__deux,.atelier__deux,.contact__grille{grid-template-columns:1fr;gap:32px}
  .geste__mot{padding-top:0}
  .cadre--haut{margin-top:-64px}
  .atelier__deux .cadre{order:-1}
}
@media (max-width:900px){
  #nav-toggle{display:block}
  #nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--fond);border-bottom:1px solid rgba(36,24,17,.12);
    flex-direction:column;gap:0;padding:8px 0;box-shadow:var(--ombre)}
  #nav-links.is-open{display:flex}
  #nav-links a{display:block;padding:14px 24px;width:100%}
  #nav-links a::after{display:none}
  .bandeau{min-height:auto}
  .bandeau__dedans{padding:72px var(--marge) 80px}
  .verre{padding:28px 24px}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .reparations,.atelier,.temps{padding:72px 0}
  .contact{padding:72px 0 80px}
  .geste{padding-bottom:72px}
  .geste__mot{padding-top:0}
  .verre{padding:24px 20px}
  .btn{width:100%}
  .btn--ligne{text-align:center}
}

.pied{position:relative}
.pied__dedans{position:relative;z-index:1}

@media (max-width:600px){
  .bandeau{display:block;min-height:0}
  .bandeau__fond{position:static;display:block;
    width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.88}
  .bandeau__voile{display:none}
  .bandeau__dedans{padding-top:24px}
}

.haut{background-color:rgba(244,235,218,0.84)}
.haut{margin-bottom:-66px}