@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight: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;
}
@font-face{
  font-family:'PoliceLibelle';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('police-libelle.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{
  --nuit:#0B1410;            /* le creux du sous-bois : bandeau et pied */
  --sapin:#15271D;           /* la forêt : les travaux */
  --sapin-2:#1C3226;
  --braise:#100B08;          /* une nuit CHAUDE, pas une nuit verte : la sécurité */
  --braise-2:#221A13;
  --carte:#22392C;           /* les billons, posés sur la forêt */
  --papier:#F5F2E9;          /* le contact */
  --papier-2:#EFEBDF;
  --cendre:#EFEBE1;          /* LE BOIS SEC : gris chaud, sciure, poussière */
  --cendre-2:#DCD5C4;
  --panneau-haut:#FFFDF7;    /* les cartes claires, haut du dégradé */
  --panneau-bas:#F3EFE3;
  --encre:#1A2A20;           /* texte courant sur les fonds clairs */
  --sourd:#55604E;           /* texte secondaire sur clair — jamais plus clair */
  --creme:#F3F6EF;           /* texte courant sur les fonds sombres */
  --creme-doux:#B7C3B0;      /* texte secondaire sur sombre */
  --orange:#E8862E;          /* ORANGE DE SÉCURITÉ — gilet, casque, carter */
  --orange-clair:#F5A055;    /* survol : sur fond sombre, un bouton s'ÉCLAIRE */
  --accent-fonce:#8F4A05;    /* LE MÊME ACCENT, SUR FOND CLAIR. --orange n'y passe
                                pas l'AA (4,09 sur le papier, 3,14 sur le bas du
                                cendre) : mesuré le 13.08.2026, et c'est la faute
                                qu'on refait chaque fois qu'on reprend la couleur
                                du bouton pour du texte. Celle-ci tient partout :
                                5,96 sur papier · 4,56 au pire (bas du cendre). */
  --bois:#C79C64;            /* LA MATIÈRE : chants, filets, puces, bouts sciés */
  --bois-fonce:#9E7846;
  --filet:#32473A;           /* bordures sur sombre : décor, jamais du texte */
  --filet-clair:#DCD5C4;     /* bordures sur clair */
  --texte-bouton:#1B1206;    /* l'encre posée sur l'orange et sur le bois */
  --wa:#25d366;              /* vert WhatsApp : texte FONCÉ dessus, jamais blanc */

  --police-titre:'PoliceTitre', Rockwell, 'Roboto Slab', 'Bookman Old Style', Georgia, serif;
  --police-libelle:'PoliceLibelle', 'Segoe UI', system-ui, -apple-system, Helvetica, sans-serif;

  --bande:1120px;
  --sortie:clamp(0px,4vw,80px);   /* de combien une image sort de la colonne */
  --rayon:12px;
  --rayon-bouton:10px;
  --rayon-buche:34px;
  --ombre:0 1px 2px rgba(11,20,16,.08), 0 12px 28px rgba(11,20,16,.14);
  --ombre-haute:0 1px 2px rgba(11,20,16,.08), 0 18px 40px rgba(11,20,16,.20);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-libelle);
  font-size:16.5px;line-height:1.62;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--police-titre);font-weight:700;line-height:1.12;margin:0}
p,ul,ol,dl,dd,dt,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit}

.bande{max-width:var(--bande);margin:0 auto;padding-inline:24px;width:100%}

.saut-contenu{
  position:absolute;left:0;top:0;z-index:99;
  transform:translateY(-140%);
  background:var(--nuit);color:var(--creme);padding:12px 20px;
  border-radius:0 0 var(--rayon) 0;text-decoration:none;font-weight:600;
}
.saut-contenu:focus{transform:none}

.ruban{
  background:var(--nuit);color:var(--creme-doux);
  text-align:center;font-size:13.5px;padding:8px 16px;
}
.ruban a{
  display:inline-block;min-height:24px;padding:2px 6px;
  color:var(--orange);font-weight:600;
}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.billon__bout{
  --bout-taille:56px;
  position:relative;display:block;flex:none;
  width:var(--bout-taille);height:var(--bout-taille);border-radius:50%;
  background:
    repeating-radial-gradient(circle at 46% 42%,
      rgba(255,255,255,.16) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 46% 42%, #CFA772, #8C6A3C 84%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 2px #4A3A22,
    0 1px 2px rgba(11,20,16,.35);
}

.entete{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--nuit) 88%,transparent);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  border-bottom:1px solid rgba(199,156,100,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:64px;position:relative}
.marque{display:flex;flex-direction:column;text-decoration:none;padding:8px 0}
.marque__nom{font-family:var(--police-titre);font-size:19px;color:var(--creme);
  letter-spacing:.01em;line-height:1.1}
.marque__sous{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#DAB57E;margin-top:2px}

#nav-links{display:flex;align-items:center;gap:8px;margin:0}
#nav-links a{
  display:block;padding:10px 12px;min-height:24px;
  color:var(--creme);text-decoration:none;font-size:15px;font-weight:500;
  border-radius:var(--rayon-bouton);
  transition:color .22s ease,background .22s ease;
}
#nav-links a:hover{color:var(--orange);background:rgba(199,156,100,.10)}
.bouton--menu{margin-left:8px}

#nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  padding:12px;min-width:48px;min-height:48px;border-radius:var(--rayon-bouton);
}
.nav-toggle__trait{display:block;width:22px;height:2px;background:var(--creme);
  border-radius:2px;margin:5px auto;transition:background .22s ease}
#nav-toggle:hover .nav-toggle__trait{background:var(--orange)}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 24px;
  border-radius:var(--rayon-bouton);
  font-family:var(--police-libelle);font-size:15.5px;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
  text-decoration:none;white-space:nowrap;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}
.bouton--grand{min-height:56px;padding:16px 28px;font-size:16.5px}
.bouton--plein{
  background:linear-gradient(180deg,var(--orange-clair),var(--orange));
  color:var(--texte-bouton);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), var(--ombre);
}
.bouton--plein:hover{
  background:linear-gradient(180deg,#FFB068,var(--orange-clair));box-shadow:inset 0 1px 0 rgba(255,255,255,.30), var(--ombre-haute);
}
.bouton--menu{min-height:40px;padding:8px 18px;font-size:14.5px;box-shadow:none}
.bouton--menu:hover{box-shadow:var(--ombre)}
.bouton--bois{
  background:rgba(199,156,100,.12);color:var(--creme);
  border:1px solid rgba(199,156,100,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.bouton--bois:hover{background:rgba(199,156,100,.22)}
.bouton--wa{background:var(--wa);color:#0B2912;box-shadow:var(--ombre)}
.bouton--wa:hover{box-shadow:var(--ombre-haute)}

main > section.joues,.hero,.securite{position:relative}
main > section.joues::before,.hero::before,.securite::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 36% 27% at 16% 15%,
      var(--joue-jour) 0,transparent 70%),
    radial-gradient(ellipse 29% 22% at 76% 33%,
      var(--joue-jour) 0,transparent 72%),
    radial-gradient(ellipse 23% 30% at 44% 79%,
      var(--joue-tache) 0,transparent 74%),
    radial-gradient(ellipse 31% 20% at 89% 67%,
      var(--joue-tache) 0,transparent 72%),
    radial-gradient(ellipse 26% 25% at 8% 61%,
      var(--joue-tache) 0,transparent 70%);
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.66) 24%,rgba(0,0,0,.52) 50%,rgba(0,0,0,.66) 76%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.66) 24%,rgba(0,0,0,.52) 50%,rgba(0,0,0,.66) 76%,#000 100%);
}

main > section,.pied{--joue-tache:transparent;--joue-jour:transparent;--joue-grain:transparent}

main > section.joues::after,.hero::after,.securite::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100% - var(--bande)) / 2));
  background-image:
    linear-gradient(90deg,var(--joue-fond) 0%,transparent 36%,transparent 64%,var(--joue-fond) 100%);
  background-size:
    auto;
  background-position:
    left top;
  background-repeat:no-repeat;
}
.section-cendre,.section-claire{
  --joue-fond:rgba(21,39,29,.32);
  --joue-trait:rgba(21,39,29,.075);
  --joue-nappe:rgba(21,39,29,.055);   /* le fil du bois : une NAPPE, pas un trait */
  --joue-lueur:rgba(255,255,255,.30);
  --joue-tache:rgba(21,39,29,.05);      /* la mousse sur la sciure */
  --joue-jour:rgba(255,255,255,.11);     /* la trouée de lumière */
  --joue-grain:rgba(21,39,29,.06);       /* le piqué de l'écorce */
  --joue-arete:rgba(255,255,255,.58);
}
.section-sapin,.hero,.securite{
  --joue-fond:rgba(232,222,196,.10);
  --joue-trait:rgba(232,222,196,.075);
  --joue-nappe:rgba(232,222,196,.05);
  --joue-lueur:rgba(0,0,0,.20);
  --joue-tache:rgba(0,0,0,.13);
  --joue-jour:rgba(232,222,196,.055);
  --joue-grain:rgba(232,222,196,.055);
  --joue-arete:rgba(11,20,16,.44);
}
.hero{
  --joue-trait:rgba(232,222,196,.038);
  --joue-nappe:rgba(232,222,196,.032);
  --joue-lueur:rgba(0,0,0,.10);
  --joue-tache:rgba(0,0,0,.07);
  --joue-jour:rgba(232,222,196,.03);
  --joue-grain:rgba(232,222,196,.028);
}

.section-cendre{background-color:#dcd5c4}
.section-sapin{background-color:#1E3628;color:var(--creme)}
.section-claire{background-color:#f5f2e9}

.entete-section{position:relative;z-index:1;max-width:62ch;margin-bottom:32px}
.entete-section::before{
  content:'';position:absolute;left:-6%;top:-72px;
  width:min(520px,108%);height:320px;
  background:radial-gradient(ellipse at 50% 40%, rgba(199,156,100,.06), transparent 68%);
  pointer-events:none;z-index:-1;
}
.sur{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sourd);margin-bottom:16px;
}
.sur::before{
  content:'';width:16px;height:16px;border-radius:50%;flex:none;
  background:
    repeating-radial-gradient(circle at 44% 40%, var(--bois) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 44% 40%, #E0BE8E, var(--bois-fonce) 82%);
}
.sur--sombre{color:var(--creme-doux)}
.entete-section h2{
  font-size:clamp(1.85rem,3.4vw,2.7rem);
  color:inherit;letter-spacing:-.005em;
}
.entete-section h2 em{font-style:normal;color:var(--accent-fonce)}
.entete-section--sombre h2 em{color:var(--orange)}
.para{max-width:62ch;color:var(--sourd);margin-top:20px}
.para--sombre{color:var(--creme-doux)}

.hero{position:relative;overflow:hidden;background:var(--nuit);
  display:flex;align-items:center;min-height:min(88vh,760px)}
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  opacity:.62;
}
.hero__voile{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(11,20,16,.94) 0%, rgba(11,20,16,.70) 46%, rgba(11,20,16,.26) 100%),
    linear-gradient(180deg, rgba(11,20,16,.55), transparent 34%);
}
.cernes{
  position:absolute;right:-9%;top:50%;transform:translateY(-50%);
  width:min(660px,74vh);height:min(660px,74vh);
  color:rgba(199,156,100,.34);pointer-events:none;
}
.cerne{
  fill:none;stroke-width:2;
  stroke-dasharray:1700;stroke-dashoffset:1700;
  animation:cerne-pousse 2.2s cubic-bezier(.16,1,.3,1) forwards;
}
.cerne--2{stroke-width:1.4;animation-delay:.28s}
.cerne--3{animation-delay:.56s}
.cerne--4{stroke-width:1.4;animation-delay:.84s}
@keyframes cerne-pousse{to{stroke-dashoffset:0}}

.hero__bande{position:relative;z-index:2;padding-block:96px}
.verre{
  background:color-mix(in srgb,var(--nuit) 84%,transparent);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rayon);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--ombre-haute);
}
.hero__verre{
  max-width:min(100%,760px);padding:40px;
  border-bottom:3px solid var(--bois);   /* LE CHANT : sur un panneau de bois,
                                            la tranche visible est en bas. */
}
.pastille{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-clair);margin-bottom:16px;
}
.pastille::before{
  content:'';width:16px;height:16px;border-radius:50%;flex:none;
  background:
    repeating-radial-gradient(circle at 44% 40%, var(--bois) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 44% 40%, #E0BE8E, var(--bois-fonce) 82%);
}
.hero__titre{font-size:clamp(2.25rem,4.9vw,3.35rem);color:var(--creme);letter-spacing:-.01em}
.hero__ligne,.hero__accent{display:block}
.hero__accent{color:var(--orange-clair)}
.hero__intro{margin-top:20px;max-width:56ch;color:var(--creme-doux);font-size:17px}
.cote-mot{
  display:flex;align-items:center;gap:12px;margin-top:24px;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bois);
}
.cote-mot::before,.cote-mot::after{content:'';height:1px;background:rgba(199,156,100,.42);flex:1}
.cote-mot span{flex:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.bois{padding-block:104px 112px}
.bois__grille{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:64px;align-items:center;
}
.astuce{
  margin-top:32px;max-width:64ch;
  background-color:#fffdf7;
  border:1px solid var(--filet-clair);
  border-left:3px solid var(--bois);
  border-radius:0 var(--rayon) var(--rayon) 0;
  padding:24px;color:var(--encre);
  box-shadow:var(--ombre);
}
.astuce__quoi{display:block;font-family:var(--police-titre);font-size:17px;margin-bottom:8px}
.astuce strong{color:var(--accent-fonce);font-weight:600}   /* 5,80:1 au pire */
.bois__note{margin-top:24px;max-width:60ch;color:var(--sourd);font-size:15px}
.bois__acte{margin-top:32px}

.bois__photo{
  border-color:var(--filet-clair);
  border-bottom:3px solid var(--bois);
}
.bois__photo img{aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;width:100%}
.cadre.bois__photo{border-bottom:3px solid var(--bois)}

.travaux{padding-block:80px 88px}
.billons{position:relative;z-index:1;display:grid;gap:12px}
.billon{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;
  background-color:#22392c;
  border:1px solid var(--filet);
  border-bottom:3px solid #0F1D15;      /* le chant : la face à l'ombre est en bas */
  border-radius:var(--rayon-buche);
  padding:20px 32px 20px 20px;position:relative;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.billon::before{
  content:'';position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,246,239,.20),transparent);
}
.billon:hover{box-shadow:var(--ombre-haute);
  border-color:rgba(199,156,100,.46)}
.billon__nom{font-size:20px;color:var(--creme)}
.billon__texte{margin-top:6px;color:var(--creme-doux);font-size:15px;max-width:64ch}

.cadre{
  position:relative;z-index:1;overflow:hidden;border-radius:var(--rayon);
  border:0;box-shadow:var(--ombre-haute);
  max-width:100%;
}
.cadre::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;
  box-shadow:
    inset 0 4px 7px -3px rgba(11,20,16,.72),
    inset 0 -4px 7px -3px rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(11,20,16,.16);
}
.cadre img{width:100%}
.travaux__photo{margin-top:48px;margin-inline:calc(var(--sortie) * -1);max-width:none}
.travaux__photo img{aspect-ratio:12/5;object-fit:cover;object-position:50% 58%}

.securite{position:relative;background:var(--braise);padding-block:84px 88px}
.braise{
  position:relative;z-index:1;
  background-color:#1F1712;   /* 16.08 : le panneau valait #181310, exactement la
                                 couleur de sa section — il n'existait que là où il
                                 mordait la photo. La photo partie, il lui faut sa
                                 propre valeur, 10/255 au-dessus du fond. */
  border:1px solid rgba(199,156,100,.22);
  border-bottom:3px solid var(--bois);   /* le chant, toujours en bas */
  border-radius:var(--rayon);
  padding:40px;color:var(--creme);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--ombre-haute);
  max-width:min(100%,1040px);margin-inline:auto;
}
.braise .entete-section{margin-bottom:0}
.braise .para + .para{margin-top:16px}
.securite__grille{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:40px;align-items:center;
}
.securite__photo{margin:0}
.securite__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:74% 38%;display:block}

.contact{padding-block:104px 112px}
.contact__grille{position:relative;z-index:1}
.contact__carte{max-width:760px;margin-inline:auto}
@media (min-width:64rem){
  .contact__carte{max-width:960px;
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:44px;align-items:start;grid-auto-flow:row dense}
  .contact__carte > .entete-section,
  .contact__carte > .contact__phrase,
  .contact__carte > .plaques{grid-column:1 / -1}
  .contact__carte > .fiche[data-bloc="horaires"]{grid-column:2;grid-row:4 / span 2}
}
.panneau{
  background-color:#fffdf7;
  border:1px solid var(--filet-clair);border-radius:var(--rayon);
  padding:40px;box-shadow:var(--ombre);position:relative;
  border-bottom:3px solid var(--bois);   /* le chant, toujours en bas */
}
.panneau::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.contact__carte .entete-section{margin-bottom:24px}
.contact__phrase{color:var(--sourd);max-width:52ch}

.plaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-top:32px}
.plaque{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:56px;padding:12px 20px;text-decoration:none;
  border-radius:var(--rayon-bouton);
  background:linear-gradient(180deg,var(--orange-clair),var(--orange));
  color:var(--texte-bouton);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), var(--ombre);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.plaque:hover{
  background:linear-gradient(180deg,#FFB068,var(--orange-clair));box-shadow:inset 0 1px 0 rgba(255,255,255,.30), var(--ombre-haute);
}
.plaque__quoi{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.plaque__num{font-size:19px;font-weight:700;font-variant-numeric:lining-nums tabular-nums}

.fiche{margin-top:32px}
.fiche__titre{
  font-family:var(--police-libelle);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sourd);margin-bottom:8px;
}
.tableau{display:grid}
.tableau__ligne{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:12px 0;border-bottom:1px dotted var(--filet-clair);
}
.tableau dt{font-weight:600;color:var(--encre);font-size:15px}
.tableau dd{margin:0;color:var(--sourd);font-size:15px;
  font-variant-numeric:lining-nums tabular-nums}
.tableau dd a{display:inline-block;min-height:24px;padding-block:2px;
  color:var(--accent-fonce);text-decoration:underline;text-underline-offset:3px}
.tableau__ligne--ferme dd{opacity:.72}
.tableau__ligne--aujourdhui dt{color:var(--accent-fonce)}
.tableau__aujourdhui{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;
  background:rgba(199,156,100,.22);color:var(--accent-fonce);
  font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  vertical-align:middle;
}
.fiche__note{margin-top:12px;font-size:13.5px;color:var(--sourd);max-width:48ch}

.pied{background-color:#101c16;color:var(--creme-doux);
  padding-block:48px;border-top:1px solid var(--filet)}
.pied__dedans{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.pied__bout{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:
    repeating-radial-gradient(circle at 44% 40%, var(--bois) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 44% 40%, #E0BE8E, var(--bois-fonce) 82%);
}
.pied__marque{display:flex;flex-direction:column;margin-right:auto}
.pied__nom{font-family:var(--police-titre);font-size:17px;color:var(--creme)}
.pied__lieu{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bois)}
.pied__demo{font-size:13.5px}
.pied__demo a{display:inline-block;min-height:24px;padding:2px 4px;
  color:var(--bois);text-decoration:underline;text-underline-offset:3px}

html.js .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.est-vu{opacity:1;transform:none}
html.js .billon:nth-child(2){transition-delay:.11s}
html.js .billon:nth-child(3){transition-delay:.22s}
html.js .billon:nth-child(4){transition-delay:.33s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cerne{animation:none;stroke-dashoffset:0}
  html.js .reveal{transform:none;transition:opacity .5s ease}
  html.js .billon:nth-child(n){transition-delay:0s}
  .cadre img,.cadre:hover img{transition:none}
}

@media (max-width:1000px){
  .bois__grille{grid-template-columns:minmax(0,1fr);gap:48px}
  .securite__grille{grid-template-columns:minmax(0,1fr);gap:32px}
  .cernes{right:-22%;opacity:.7}
  .braise{max-width:100%}
}

@media (max-width:820px){
  #nav-toggle{display:block}
  #nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 0 12px;
    background:color-mix(in srgb,var(--nuit) 97%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--filet);
    box-shadow:var(--ombre-haute);
  }
  #nav-links.is-open{display:flex}
  #nav-links a{padding:14px 24px;border-radius:0}
  .bouton--menu{margin:8px 24px 0;justify-content:center}
}

@media (max-width:720px){
  .hero{min-height:auto}
  .hero__bande{padding-block:64px}
  .hero__verre{padding:24px}
  .cernes{right:-40%;opacity:.5}
  .bois,.travaux,.contact{padding-block:64px}
  .securite{padding-block:64px}
  .braise{padding:24px}
  .securite__photo img{aspect-ratio:3/2}
  .panneau{padding:24px}
  .billon{grid-template-columns:minmax(0,1fr);gap:16px;
    border-radius:var(--rayon);padding:24px}
  .travaux__photo img{aspect-ratio:3/2}
  .pied__dedans{flex-direction:column;align-items:flex-start}
  .pied__marque{margin-right:0}
}

@media (min-width:960px){
  .billon:nth-child(2){margin-right:5%}
  .billon:nth-child(3){margin-right:2%}
  .billon:nth-child(4){margin-right:7%}
}

@media (min-width:1600px){
  .hero__bande{padding-block:120px}
}

@media (max-width:600px){
  .hero{display:block;min-height:0}
  .hero__photo{position:relative;height:40vh;max-height:330px;opacity:.92}
  .hero__voile{inset:0 0 auto 0;height:40vh;max-height:330px}
  .cernes{top:20%;transform:none}
  .hero__bande{padding-block:0 72px;margin-top:-26px}
}

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

#nav-links a.bouton.bouton--plein.bouton--menu{color:#100b08}