/* Atelier du Noyer : style « atelier éditorial ». Fond brun très foncé, crème chaud, terre de Sienne clair (--accent vient de donnees.json ; le chêne reste dans les photos).
   Titres : DM Serif Display. Texte : Albert Sans. Magazine : grille asymétrique, photos verticales plafonnées en hauteur,
   légendes numérotées en marge, gros chiffres de section. Deux signatures : l'assemblage à queue d'aronde (site.js) et le
   veinage du bois en fond (--veinage) avec le passage de rabot au survol des photos. */
:root {
  --fond: #16100c;
  --fond-2: #1c140f;
  --fond-3: #0f0a07;
  --creme: #efe6d8;
  --creme-douce: #cdbfa9;
  --trait: rgba(239, 230, 216, .22);
  --etiquette: 2rem;
  --haut-entete: 4.25rem;
  --bas-barre: 0px;
  --hmax: min(70svh, 600px);
  --rayon: 2px;
  --decalage-ancre: 5.5rem;
  --colonne: 24px;
  /* Veinage : fibres longues (bruit fractal étiré) ondulées par un second bruit, très peu opaques. Jamais derrière un texte au point de gêner : le contraste est mesuré (essai.py). */
  --veinage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='540'%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .02' numOctaves='2' seed='3' result='w'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .16' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='n' in2='w' scale='70' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .62 0 0 0 0 .38 2.6 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect x='-120' y='-70' width='1680' height='680' filter='url%28%23f%29' opacity='.045'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { :root { --bas-barre: 3.25rem; } }

body { background: var(--fond); color: var(--creme); font-family: var(--police-texte); font-size: 1.0625rem; line-height: 1.65; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; margin: 0 0 .5em; }
h2 { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.6rem); line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
h3 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.9rem); line-height: 1.1; }
p { margin: 0 0 1em; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--fond); }

/* Le veinage est un calque (div.veinage, décor déclaré dans donnees.json) : l'image n'arrive que 0,4 s après le premier affichage (animation discrète) puis le calque se fond en 1 s.
   Son tracé n'est donc pas dans la première image : le texte et la photo d'ouverture s'affichent sans l'attendre, et rien ne saute quand il arrive.
   Sans JavaScript : même chose, c'est du CSS. */
.veine { position: relative; background-color: var(--fond); }
.veine > * { position: relative; }   /* le calque de veinage est le premier enfant : tout le reste est peint par-dessus */
.veine > .veinage { position: absolute; inset: 0; background-size: 1440px 540px; opacity: 0; animation: veinage-image 1ms steps(1, end) .4s both, veinage-fondu 1s ease-out .4s both; }
@keyframes veinage-image { from { background-image: none; } to { background-image: var(--veinage); } }
@keyframes veinage-fondu { from { opacity: 0; } to { opacity: 1; } }
.etiquette-demo { height: var(--etiquette); line-height: var(--etiquette); padding-block: 0; background: var(--fond-3); color: var(--creme); letter-spacing: .04em; }

/* ---------- en-tête : barre pleine, plus marquée une fois la page quittée ---------- */
.entete { position: fixed; top: var(--etiquette); left: 0; right: 0; z-index: 70; background: var(--fond); color: var(--creme); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
html.defile .entete { top: 0; border-bottom-color: var(--trait); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; min-height: var(--haut-entete); gap: 1rem; }
.marque { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; font-family: var(--police-titre); font-size: 1.45rem; text-decoration: none; letter-spacing: .005em; }
.marque-signe { color: var(--accent); flex: none; }
.menu ul { display: flex; gap: .4rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.menu a:hover { color: var(--accent); }
.menu-telephone { color: var(--accent); }
.menu-bouton { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .9rem; background: transparent; color: inherit; border: 1.5px solid var(--trait); border-radius: var(--rayon); font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.menu-bouton-barres { width: 1.1rem; height: 2px; background: currentColor; position: relative; }
.menu-bouton-barres::before, .menu-bouton-barres::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.menu-bouton-barres::before { top: -6px; }
.menu-bouton-barres::after { top: 6px; }
@media (min-width: 900px) { .menu { display: flex; align-items: center; gap: 2rem; } }
@media (max-width: 899px) {
  .menu { position: absolute; top: 100%; left: 0; right: 0; padding: 1rem var(--gouttiere) 1.5rem; background: var(--fond-3); color: var(--creme); border-bottom: 1px solid var(--trait); }
  .menu ul { flex-direction: column; gap: 0; }
  .menu li a, .menu-telephone { display: flex; padding: .5rem 0; }
  .menu-telephone { border-top: 1px solid var(--trait); margin-top: .5rem; padding-top: .75rem; }
}

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.6rem; background: var(--accent); color: var(--fond); border: 1.5px solid var(--accent); border-radius: var(--rayon); font: inherit; font-weight: 700; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.bouton:hover { background: #e8996a; border-color: #e8996a; }
.bouton-contour { background: transparent; color: var(--creme); border-color: rgba(239, 230, 216, .6); }
.bouton-contour:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ---------- gros chiffres, têtes de section, légendes ---------- */
.num-grand { font-family: var(--police-titre); font-size: clamp(4.5rem, 3rem + 7vw, 9.5rem); line-height: .78; color: var(--accent); margin: 0; letter-spacing: -.03em; }
.section-tete { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
@media (min-width: 900px) { .section-tete { grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); align-items: start; } .section-tete-compact { grid-template-columns: 1fr; } }
.section-tete-texte h2 { margin-bottom: .35em; }
.intro { color: var(--creme-douce); font-size: 1.1875rem; }

.legende { display: flex; flex-direction: column; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--accent); margin: 0; align-self: end; }
.legende-num { font-family: var(--police-titre); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.legende-texte { font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; line-height: 1.55; color: var(--creme-douce); }

/* ---------- photos : cadre plafonné en hauteur (70 % de l'écran, 600 px au plus), jamais à défiler pour la voir ---------- */
.cadre { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.cadre-photo { position: relative; overflow: hidden; background: var(--fond-2); aspect-ratio: var(--ratio, .75); width: min(100%, calc(var(--hmax) * var(--ratio, .75))); }
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
  .cadre-gauche { grid-template-columns: minmax(5.5rem, 8.5rem) minmax(0, 1fr); column-gap: 1.4rem; align-items: end; }
  .cadre-gauche .legende { grid-column: 1; grid-row: 1; }
  .cadre-gauche .cadre-photo { grid-column: 2; grid-row: 1; }
  .cadre-droite { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 8.5rem); column-gap: 1.4rem; align-items: end; }
  .cadre-droite .cadre-photo { grid-column: 1; grid-row: 1; justify-self: end; }
  .cadre-droite .legende { grid-column: 2; grid-row: 1; }
}
/* Passage de rabot : une bande de lumière traverse la photo au survol (et une fois à l'arrivée à l'écran, pour le tactile). */
.cadre-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, transparent 40%, rgba(255, 238, 210, .10) 46%, rgba(255, 238, 210, .42) 50%, rgba(255, 238, 210, .10) 54%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; }
.cadre-photo:hover::after, .cadre-photo.rabote::after { background-position: 0% 0; transition: background-position 1.1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .cadre-photo::after { display: none; } }

/* ---------- 01 ouverture ---------- */
.ouverture { padding-block: calc(var(--haut-entete) + clamp(2rem, 4.5vw, 4rem)) clamp(3rem, 6vw, 5rem); min-height: calc(100svh - var(--etiquette)); display: flex; align-items: center; }
.ouverture-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
@media (min-width: 900px) {
  .ouverture-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); row-gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
  .ouverture-texte { grid-column: 1 / 8; }
  .ouverture-cadre { grid-column: 8 / 13; }
  .faits { grid-column: 1 / -1; }
}
.ouverture-cadre { --ratio: .86; }
.surtitre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem; margin-bottom: 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--creme-douce); }
.surtitre-num { font-family: var(--police-titre); font-size: 1.4rem; letter-spacing: 0; text-transform: none; color: var(--accent); }
.surtitre-lieu::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 1.1rem; vertical-align: middle; background: var(--accent); }
.ouverture h1 { font-size: clamp(3rem, .5rem + 7.4vw, 8rem); line-height: .95; letter-spacing: -.018em; margin-bottom: .32em; text-wrap: balance; }
.chapo { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); max-width: 46ch; color: var(--creme-douce); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
.faits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
@media (min-width: 700px) { .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--colonne); } }
.faits li { display: grid; gap: .25rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--trait); }
.fait-num { font-family: var(--police-titre); font-size: 1.1rem; color: var(--accent); }
.faits strong { font-family: var(--police-titre); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.faits li > span:last-child { color: var(--creme-douce); }

/* ---------- 02 prestations ---------- */
.prestations { padding-block: clamp(5rem, 10vw, 9rem); }
.presta-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); row-gap: clamp(3.5rem, 8vw, 8rem); }
.presta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.presta-4, .presta-5 { align-content: start; border-top: 1px solid var(--accent); padding-top: 1.5rem; }
@media (min-width: 900px) {
  .presta-photo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); }
  .presta-1 .cadre { grid-column: 1 / 7; grid-row: 1; }
  .presta-1 .presta-texte { grid-column: 8 / 13; grid-row: 1; }
  .presta-2 .presta-texte { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .presta-2 .cadre { grid-column: 7 / 13; grid-row: 1; }
  .presta-3 .cadre { grid-column: 2 / 8; grid-row: 1; }
  .presta-3 .presta-texte { grid-column: 9 / 13; grid-row: 1; align-self: end; }
  .presta-4 { grid-column: 1 / 7; }
  .presta-5 { grid-column: 8 / 13; }
}
.presta-num { display: block; font-family: var(--police-titre); font-size: 1.15rem; color: var(--accent); margin-bottom: .6rem; }
.presta-texte p { color: var(--creme-douce); max-width: 44ch; }
.puces { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.puces li { padding: .6rem 0; border-top: 1px solid var(--trait); font-size: .98rem; }
.puces li:last-child { border-bottom: 1px solid var(--trait); }

/* ---------- 03 fait pour durer : assemblage à queue d'aronde ---------- */
.durer { padding-block: 0 clamp(5rem, 9vw, 8rem); background-color: var(--fond-2); }
.durer-scene { min-height: calc(100svh - var(--haut-entete) - var(--bas-barre)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.25rem; padding-block: 1.25rem; }
@media (min-width: 900px) { .durer-scene { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; } }
.durer-texte .num-grand { margin-bottom: 1.25rem; font-size: clamp(3.5rem, 2rem + 5vw, 7rem); }
.durer-texte h2 { margin-bottom: .4em; }
.durer-texte .lecture { color: var(--creme-douce); }
.rail { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.rail li { display: flex; align-items: baseline; gap: .5rem; padding-top: .55rem; border-top: 2px solid var(--trait); font-size: .74rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #a89a86; transition: color .2s, border-color .2s; }
.rail li span { font-family: var(--police-titre); font-size: 1.05rem; letter-spacing: 0; }
.durer-scene[data-etat="trace"] [data-rail="trace"],
.durer-scene[data-etat="glisse"] [data-rail="glisse"],
.durer-scene[data-etat="emboite"] [data-rail="emboite"] { color: var(--creme); border-top-color: var(--accent); }
.durer-scene[data-etat="trace"] [data-rail="trace"] span,
.durer-scene[data-etat="glisse"] [data-rail="glisse"] span,
.durer-scene[data-etat="emboite"] [data-rail="emboite"] span { color: var(--accent); }
.durer-figure { min-width: 0; }
.durer-dessin { display: block; width: 100%; height: auto; max-height: 52svh; margin-inline: auto; overflow: visible; }
.durer-pieces { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--creme-douce); }
.durer-pieces li { display: flex; align-items: center; gap: .6rem; }
.pastille { width: .8rem; height: .8rem; border-radius: 1px; flex: none; }
.pastille-a { background: #8d5b32; }
.pastille-b { background: #d1985a; }
.d-contour { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: butt; stroke-dasharray: 100; stroke-dashoffset: 0; }
.d-contour-fin { stroke-width: 1.2; opacity: .75; }
.d-guide path { stroke: var(--creme-douce); stroke-width: 1.5; stroke-dasharray: 3 7; opacity: 0; }
.d-fibres path { fill: none; stroke: rgba(30, 16, 8, .38); stroke-width: 1.3; }
/* Piste de défilement : la scène reste en place (position: sticky) pendant que l'assemblage se dessine puis s'emboîte.
   Sans JavaScript ou en mouvement réduit, la classe durer-actif n'existe pas : la section est une scène ordinaire, assemblage emboîté. */
html.durer-actif .durer-piste { height: calc(100svh - var(--haut-entete) - var(--bas-barre) + 240svh); }
html.durer-actif .durer-scene { position: sticky; top: var(--haut-entete); height: calc(100svh - var(--haut-entete) - var(--bas-barre)); min-height: 0; }
.durer-suite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-top: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .durer-suite { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); }
  .durer-suite .cadre { grid-column: 1 / 7; }
  .points { grid-column: 8 / 13; }
}
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.points li { padding-top: 1rem; border-top: 1px solid var(--trait); }
.point-num { display: block; font-family: var(--police-titre); font-size: 1.1rem; color: var(--accent); margin-bottom: .4rem; }
.points h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); margin-bottom: .35em; }
.points p { color: var(--creme-douce); margin: 0; }

/* ---------- 04 méthode ---------- */
.methode { padding-block: clamp(5rem, 10vw, 9rem); }
.methode-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; align-items: center; }
@media (min-width: 900px) {
  .methode-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); }
  .methode-grille .cadre { grid-column: 1 / 7; }
  .methode-texte { grid-column: 8 / 13; }
}
.methode .section-tete { margin-bottom: 2rem; }
.methode .num-grand, .zone .num-grand { font-size: clamp(3.5rem, 2rem + 5vw, 7rem); }
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--trait); }
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape-num { font-family: var(--police-titre); font-size: 2rem; line-height: 1; color: var(--accent); }
.etape h3 { font-size: 1.5rem; margin-bottom: .25em; }
.etape p { margin: 0; color: var(--creme-douce); }

/* ---------- 05 zone d'intervention ---------- */
.zone { padding-block: clamp(5rem, 10vw, 9rem); background-color: var(--fond-2); }
.zone-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; align-items: center; }
@media (min-width: 900px) {
  .zone-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); }
  .zone-texte { grid-column: 1 / 8; }
  .zone-grille .cadre { grid-column: 8 / 13; }
}
.zone .section-tete { margin-bottom: 2rem; }
.communes { list-style: none; margin: 0; padding: 0; }
.communes li { padding: .5rem 0; border-top: 1px solid var(--trait); font-family: var(--police-titre); font-size: clamp(1.6rem, 1rem + 2vw, 2.7rem); line-height: 1.15; }
.communes li:last-child { border-bottom: 1px solid var(--trait); }
.avis { margin: 2rem 0 0; padding: 1rem 1.25rem; border: 1px dashed rgba(239, 230, 216, .45); border-radius: var(--rayon); color: var(--creme-douce); }

/* ---------- 06 contact ---------- */
.contact { padding-block: clamp(5rem, 10vw, 9rem); }
.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 5fr 6fr; gap: 5rem; align-items: start; } }
.contact-texte .num-grand { margin-bottom: 1.5rem; font-size: clamp(3.5rem, 2rem + 5vw, 7rem); }
.contact-texte .lecture { color: var(--creme-douce); }
.contact-tel { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--police-titre); font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); color: var(--accent); text-decoration: none; }
.contact-tel:hover { text-decoration: underline; text-underline-offset: 6px; }
address { font-style: normal; margin-bottom: 1.5rem; color: var(--creme-douce); }
.horaires { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--trait); }
.horaires dt { font-weight: 700; }
.horaires dd { margin: 0; color: var(--creme-douce); }
.contact-formulaire { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--fond-3); border: 1px solid var(--trait); border-radius: var(--rayon); }
.formulaire { display: grid; gap: 1.1rem; }
.champ label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .45rem; }
.champ-requis { color: var(--accent); }
.champ input, .champ textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; background: var(--fond-2); color: var(--creme); border: 1.5px solid #8d7d68; border-radius: var(--rayon); font: inherit; }
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.formulaire .bouton { justify-self: start; }
.formulaire-statut { padding: .9rem 1rem; background: var(--fond-2); border-left: 4px solid var(--accent); border-radius: var(--rayon); margin: 0; }

/* ---------- pied ---------- */
.pied { background: var(--fond-3); color: var(--creme); border-top: 1px solid var(--trait); }
.pied-interieur { padding-block: 3rem 1rem; color: var(--creme-douce); }
.pied-interieur p { margin-bottom: .35rem; }
.pied-nom { font-family: var(--police-titre); font-size: 1.9rem; color: var(--creme); }
.pied-lien { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pied-sep { margin-inline: .75rem; }
.mention-pied { border-top: 1px solid var(--trait); color: var(--creme-douce); }

/* ---------- barre d'appel (téléphone) ---------- */
.barre-appel a { background: var(--accent); color: var(--fond); font-weight: 700; letter-spacing: .02em; }