@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('police-titre.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --forge-haut:#221b15;         /* haut des bandes sombres */
  --forge:#14110e;              /* bas des bandes sombres — noir de forge */
  --paille-haut:#f7f3ec;        /* haut des bandes claires */
  --paille:#e9e1d2;             /* bas des bandes claires */
  --paille-alt-haut:#e6ddcc;    /* la bande du râtelier, un cran plus foncée */
  --paille-alt:#d8ccb5;

  --fond:var(--paille-haut);    /* fond de page (sous le pied et les marges) */
  --encre:#1e1a16;              /* texte courant */
  --encre-douce:#4b443c;        /* texte secondaire — jamais plus clair que ça */
  --sur-forge:#f6f2ea;          /* texte sur les bandes sombres */
  --sur-forge-doux:#cdc4b6;     /* texte secondaire sur les bandes sombres */

  --braise:#e8641b;             /* accent des bandes SOMBRES : fer incandescent */
  --braise-claire:#ff7a29;      /* le même, plus clair, pour le texte sur forge */
  --braise-pale:#f08b3e;        /* survol des boutons braise */
  --rouille:#8a3610;            /* accent des bandes CLAIRES : le clou, l'assise */
  --filet:#cfc5b3;
  --wa:#25d366;

  --police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --police-titre:'PoliceTitre',"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;

  --rayon:0;
  --rayon-bouton:8px;
  --largeur:1120px;
  --gouttiere:clamp(16px,3vw,32px);
  --section-y:clamp(48px,7vw,96px);
  --hauteur-bandeau:78svh;

  --ombre:0 1px 2px rgba(30,26,22,.08), 0 12px 28px rgba(30,26,22,.14);
  --ombre-levee:0 1px 2px rgba(30,26,22,.08), 0 18px 40px rgba(30,26,22,.20);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-texte);
  font-size:clamp(1rem,.95rem + .2vw,1.1rem);   /* jamais sous 16px */
  line-height:1.6;
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--police-titre);line-height:1.12;margin:0 0 .5em;
  text-wrap:balance;font-weight:500;letter-spacing:.01em}
h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.4rem)}
h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);text-transform:uppercase;
  letter-spacing:.02em;line-height:1}
h3{font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem);text-transform:uppercase;
  letter-spacing:.05em;line-height:1.3}
p{margin:0 0 16px}
.hero__intro,.chauffe__intro,.apropos__texte p,.plaque-fer p,.geste p,
.tournee__texte p{max-width:62ch}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
main a:not(.bouton):not(.plaque):not(.contact__tel){text-decoration:underline;
  text-underline-offset:.15em}
main a[href^="tel:"]:not(.bouton):not(.plaque),
main a[href^="mailto:"]:not(.bouton){display:inline-block;padding-block:4px}
main .tableau dd a{display:inline-block;padding-block:4px}
:focus-visible{outline:3px solid var(--braise);outline-offset:2px}

.bande{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--gouttiere)}
.hors-vue{position:absolute;width:0;height:0;overflow:hidden}

.saut-contenu{position:absolute;top:-6rem;left:8px;z-index:50;background:var(--paille-haut);
  color:var(--encre);padding:8px 16px}
.saut-contenu:focus{top:8px}

.ruban{margin:0;padding:8px var(--gouttiere);text-align:center;font-size:.85rem;
  background:var(--forge);color:var(--sur-forge)}
.ruban a,.pied a{display:inline-block;padding-block:4px;text-decoration:underline}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 24px;border:0;border-radius:var(--rayon-bouton);
  font-family:var(--police-titre);font-size:1.02rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;
  text-align:center;cursor:pointer;
  box-shadow:var(--ombre);
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.bouton--braise{background:var(--braise);color:var(--encre)}
.bouton--braise:hover,.bouton--braise:focus-visible{background:var(--braise-pale);box-shadow:var(--ombre-levee)}
.bouton--wa{background:var(--wa);color:#11221a}   /* texte foncé : blanc sur #25d366 = 1,98:1 */
.bouton--wa:hover,.bouton--wa:focus-visible{background:color-mix(in oklab,var(--wa) 88%,black)}
.bouton--grand{min-height:56px;padding:16px 32px;font-size:1.1rem}

.mobile-seulement{display:inline-flex}
@media (min-width:48rem){.mobile-seulement{display:none}}

.entete{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--forge) 85%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  color:var(--sur-forge);
  border-bottom:1px solid var(--braise);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
@supports not (backdrop-filter:blur(1px)){
  .entete{background:var(--forge)}
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;min-height:64px;padding-block:8px}
.marque{display:flex;flex-direction:column;line-height:1.2}
.marque__nom{font-family:var(--police-titre);font-weight:500;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.06em}
.marque__sous{font-size:.8rem;color:var(--sur-forge-doux)}

#nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;
  border:1px solid rgba(246,242,234,.35);border-radius:var(--rayon);cursor:pointer}
.nav-toggle__trait{display:block;height:2px;background:var(--sur-forge)}

#nav-links{display:flex;flex-direction:column;gap:4px;width:100%;padding-bottom:8px}
#nav-links a:not(.bouton){font-family:var(--police-titre);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
#nav-links a{display:flex;align-items:center;min-height:44px;padding:8px 4px}
#nav-links a:not(.bouton):hover,#nav-links a:not(.bouton):focus-visible{color:var(--braise-claire)}
.js #nav-links{display:none}
.js #nav-links.is-open{display:flex}

@media (min-width:68rem){
  #nav-toggle{display:none}
  #nav-links,.js #nav-links{display:flex;flex-direction:row;align-items:center;
    gap:clamp(12px,2vw,28px);width:auto;padding-bottom:0}
  #nav-links .bouton{padding:10px 20px;font-size:.95rem}
}

main > section{position:relative;scroll-margin-top:72px}
main > section::after,.pied::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --bord:max(0px,calc((100% - var(--largeur)) / 2));
  background-image:
    radial-gradient(circle 8.5px at 6px 6px,
      transparent 0 44%,var(--joue-luis) 48% 58%,transparent 62%),
    radial-gradient(circle 8.5px at 7px 7px,
      transparent 0 44%,var(--joue-trait) 48% 58%,transparent 62%),
    linear-gradient(90deg,
      var(--joue-fond) 0,transparent var(--bord),
      transparent calc(100% - var(--bord)),var(--joue-fond) 100%);
  background-size:13px 13px,13px 13px,100% 100%;
  background-repeat:repeat,repeat,no-repeat;
  background-position:left top,left top,center top;
}
.est-claire{
  --joue-fond:rgba(30,26,22,.32);
  --joue-trait:rgba(30,26,22,.014);
  --joue-luis:rgba(255,255,255,.19);
  --joue-arete:rgba(255,255,255,.58);
}
.est-sombre,.pied{
  --joue-fond:rgba(255,238,209,.10);
  --joue-trait:rgba(0,0,0,.075);
  --joue-luis:rgba(255,238,209,.014);
  --joue-arete:rgba(20,17,14,.44);
}

.entete-section{margin-bottom:32px}
.sur{font-family:var(--police-titre);font-size:.95rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--encre-douce);
  margin:0 0 8px}
.est-sombre .sur{color:var(--sur-forge-doux)}
.entete-section h2{margin-bottom:0}
.entete-section--centre{text-align:center}
.entete-section--centre .etampure{margin-inline:auto}

.etampure{position:relative;display:flex;gap:10px;align-items:center;
  width:fit-content;height:8px;margin-top:16px}
.etampure::before{content:"";position:absolute;left:-12px;right:-12px;top:50%;
  height:1px;background:var(--filet)}
.est-sombre .etampure::before{background:rgba(246,242,234,.22)}
.etampure span{position:relative;width:6px;height:6px;transform:rotate(45deg);
  background:var(--rouille)}
.est-sombre .etampure span{background:var(--braise)}
.etampure span:nth-child(even){opacity:.45}

.hero{overflow:clip;display:flex;align-items:center;
  min-height:min(var(--hauteur-bandeau),46rem);
  padding-block:var(--section-y);
  background-color:#221b15;
  color:var(--sur-forge)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 46% at 34% 0%,
    rgba(232,100,27,.07) 0%,transparent 70%)}
.hero__grille{display:grid;gap:clamp(32px,4vw,48px);align-items:center;
  position:relative;z-index:1}
.hero__etiquette{font-family:var(--police-titre);font-size:.95rem;font-weight:500;
  color:var(--sur-forge-doux);text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:16px}
.hero__titre{font-size:clamp(3.4rem,2.2rem + 7vw,7rem);line-height:.92;
  text-transform:uppercase;letter-spacing:.005em;margin-bottom:24px}
.hero__titre span{display:block}
.hero__accent{color:var(--braise-claire)}       /* 6,17:1 au pire cas */
.hero__intro{font-size:1.1rem;color:var(--sur-forge-doux);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}

.hero__visuel{position:absolute;inset:0;z-index:0;margin:0;overflow:clip}
.hero__visuel img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;
  filter:sepia(.22) contrast(1.03) brightness(.62) saturate(.9)}
.hero__visuel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-color:rgba(28,22,17,.66)}

@media (min-width:62rem){
  .hero__grille{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}

.section{padding-block:var(--section-y)}
.est-claire{background:var(--paille)}
.rateau.est-claire{background:var(--paille)}

.tournee__grille{display:grid;gap:clamp(32px,5vw,56px);position:relative;z-index:1}
.tournee__soustitre{margin-top:32px;margin-bottom:8px}
.liste-clous li{position:relative;padding:8px 0 8px 28px;color:var(--encre-douce)}

.liste-clous li::before{content:"";position:absolute;left:2px;top:.72em;
  width:8px;height:15px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--rouille) 62%,white),var(--rouille));
  clip-path:polygon(0 0,100% 0,100% 26%,66% 100%,34% 100%,0 26%)}

.joignable{align-self:start;padding:24px;
  background-color:#221b15;
  color:var(--sur-forge);border-top:3px solid var(--braise);
  box-shadow:var(--ombre)}
.joignable__titre{margin:0 0 16px;font-size:1.4rem;letter-spacing:.08em}
.joignable__note{font-size:.92rem;color:var(--sur-forge-doux);margin:16px 0 24px}
.joignable .bouton{width:100%}

.tableau{margin:0}
.tableau__ligne{display:flex;flex-wrap:wrap;gap:4px 16px;
  justify-content:space-between;padding:8px 0;
  border-bottom:1px solid rgba(246,242,234,.12)}
.tableau__ligne:last-child{border-bottom:0}
.tableau dt{font-family:var(--police-titre);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;
  color:var(--sur-forge-doux)}
.tableau dd{margin:0;font-variant-numeric:lining-nums tabular-nums;
  color:var(--sur-forge)}
.tableau__ligne--ferme dd{color:var(--sur-forge-doux)}
.a-completer{opacity:.5;font-style:italic;font-size:.92em;letter-spacing:.01em}

.tournee__photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gouttiere);
  align-items:start}
.tournee__photos figure{margin:0}
.tournee__photos img{width:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 50%;box-shadow:var(--ombre)}

@media (min-width:62rem){
  .tournee__grille{grid-template-columns:7fr 5fr;
    grid-template-areas:"texte plaque" "photos photos";
    align-items:start}
  .tournee__texte{grid-area:texte}
  .joignable{grid-area:plaque}
  .tournee__photos{grid-area:photos;margin-top:16px}
  .tournee__photos img{aspect-ratio:4/3;object-position:50% 55%}
}

.chauffe{background-color:#221b15;
  color:var(--sur-forge)}
.chauffe__grille{display:block}
.chauffe__visuel{margin:0;position:relative;z-index:1}   /* au-dessus de la joue */
.chauffe__visuel img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 50%}
.chauffe__contenu{position:relative;z-index:1;
  max-width:var(--largeur);margin-inline:auto;
  padding:var(--section-y) var(--gouttiere)}
.chauffe__intro{color:var(--sur-forge-doux);margin-bottom:32px}

@media (min-width:62rem){
  .chauffe__grille{display:grid;align-items:stretch;
    grid-template-columns:
      minmax(var(--gouttiere),1fr)
      minmax(0,calc(min(var(--largeur),100%)/2 - var(--gouttiere)))
      minmax(0,calc(min(var(--largeur),100%)/2 - var(--gouttiere)))
      minmax(var(--gouttiere),1fr)}
  .chauffe__visuel{grid-column:1/3;grid-row:1}
  .chauffe__visuel img{height:100%;aspect-ratio:auto;min-height:34rem}
  .chauffe__contenu{grid-column:3/4;grid-row:1;max-width:none;margin:0;
    padding-left:clamp(32px,4vw,56px)}
}

.geste{display:flex;gap:20px;align-items:flex-start;
  padding-bottom:24px;margin-bottom:24px;
  border-bottom:1px solid rgba(246,242,234,.12)}
.geste:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.geste__fer{flex:0 0 40px;width:40px;height:43px;
  --percage:#1b1610;                        /* la couleur du fond : les trous sont percés */
  color:#c9c2b6}
.geste h3{margin-bottom:4px}
.geste p{margin:0;color:var(--sur-forge-doux)}
.geste:nth-child(3) .geste__fer{color:#ffd98a}
.geste:nth-child(4) .geste__fer{color:#ff7a29}
.geste:nth-child(5) .geste__fer{color:#a99a89}

.rateau .bande{position:relative;z-index:1}
.rateau__mur{position:relative}
.rateau__barre{display:none}
.plaques-fer{display:grid;gap:var(--gouttiere);grid-template-columns:1fr}
.plaque-fer{position:relative;padding:24px;
  background:linear-gradient(180deg,#f4efe5,#e8e0d0);
  border-top:3px solid var(--rouille);
  box-shadow:var(--ombre);
  transition:transform .25s ease,box-shadow .25s ease}
.plaque-fer:hover{box-shadow:var(--ombre-levee)}
.plaque-fer h3{margin-bottom:8px}
.plaque-fer p{margin:0;color:var(--encre-douce)}

@media (min-width:48rem){
  .rateau__mur{padding-top:48px}
  .rateau__barre{display:block;position:absolute;
    left:calc(var(--gouttiere) * -1);right:calc(var(--gouttiere) * -1);
    top:24px;height:3px;
    background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(30,26,22,.4))}
  .plaques-fer{grid-template-columns:repeat(2,1fr)}
  .plaque-fer::before{content:"";position:absolute;left:50%;margin-left:-5px;
    top:-24px;width:10px;height:24px;
    background:linear-gradient(180deg,#8b8175,#4a433b);
    clip-path:polygon(0 0,100% 0,100% 30%,68% 100%,32% 100%,0 30%)}
  .plaque-fer:nth-child(even){margin-top:24px}
  .plaque-fer:nth-child(even)::before{top:-48px;height:48px}
}
@media (min-width:64rem){
  .plaques-fer{grid-template-columns:repeat(4,1fr)}
}

.apropos-section .bande{position:relative;z-index:1}
.apropos__texte p{color:var(--encre-douce)}

.contact-forge{padding-block:var(--section-y);
  background-color:#221b15;
  color:var(--sur-forge)}
.contact-forge::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:radial-gradient(50% 44% at 50% 0%,
    rgba(232,100,27,.06) 0%,transparent 72%)}
.contact-forge .bande{position:relative;z-index:1}
.contact__grille{display:grid;gap:clamp(32px,4vw,48px)}
@media (min-width:62rem){.contact__grille{grid-template-columns:7fr 5fr;
  align-items:start}}

.contact__tel{font-family:var(--police-titre);font-weight:500;
  font-size:clamp(2.6rem,1.8rem + 4vw,4.6rem);line-height:1.1;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em;
  color:var(--sur-forge);display:inline-block;
  padding-bottom:8px;border-bottom:4px solid var(--braise);
  transition:color .2s ease}
.contact__tel:hover,.contact__tel:focus-visible{color:var(--braise-claire)}
.contact__phrase{font-size:.95rem;color:var(--sur-forge-doux);margin-top:16px}

.plaques{display:grid;gap:16px;margin-top:32px}
@media (min-width:30rem){.plaques{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.plaque{display:flex;flex-direction:column;gap:4px;padding:16px 24px;
  min-height:72px;justify-content:center;
  background:linear-gradient(180deg,rgba(246,242,234,.10),rgba(246,242,234,.045));
  border:1px solid rgba(246,242,234,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background-color .2s ease,transform .2s ease}
.plaque:hover,.plaque:focus-visible{
  background:rgba(246,242,234,.14)}
.plaque__quoi{font-family:var(--police-titre);font-weight:500;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--sur-forge-doux)}
.plaque__no{font-family:var(--police-titre);font-weight:500;font-size:1.5rem;
  font-variant-numeric:lining-nums tabular-nums;color:var(--sur-forge)}

.fiche__titre{margin-bottom:16px;font-size:1.2rem;letter-spacing:.08em;
  color:var(--sur-forge-doux)}

.pied{position:relative;padding-block:32px;background:var(--forge);color:var(--sur-forge)}
.pied__grille{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between}
.pied p{margin:0}
.pied__credit{color:var(--sur-forge-doux)}

.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.js .reveal.est-vu{opacity:1;transform:none}
.js .plaques-fer .reveal:nth-child(2){transition-delay:.08s}
.js .plaques-fer .reveal:nth-child(3){transition-delay:.16s}
.js .plaques-fer .reveal:nth-child(4){transition-delay:.24s}
.js .gestes .geste:nth-child(2){transition-delay:.07s}
.js .gestes .geste:nth-child(3){transition-delay:.14s}
.js .gestes .geste:nth-child(4){transition-delay:.21s}
.js .gestes .geste:nth-child(5){transition-delay:.28s}
.js .tournee__photos figure:nth-child(2){transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .bouton,.plaque-fer,.plaque,.contact__tel{transition:background-color .2s ease,color .2s ease}
}

@media (max-width:600px){
  .tournee__photos{grid-template-columns:minmax(0,1fr)}
  .tournee__photos img{aspect-ratio:4/3}
}

.entete{background-color:rgba(20,17,14,0.76)}
.entete{margin-bottom:-65px}