/* Varlope · concept fictif. Mobile d'abord (390 px), puis 768, 1024 et 1440 px. */
@font-face { font-family: "Gloock"; src: url("../fonts/gloock-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --ivoire: #F3EDE3; --sable: #E6DCCB; --noyer: #2E1D14; --huile: #6B5848; --brou: #8A4B2A; --laiton: #C29A55; --filet: #D8CDBB;
  --titre: "Gloock", Georgia, serif;
  --texte: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --entete: 56px;
}
@media (min-width: 1024px) { :root { --entete: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--ivoire); color: var(--noyer); font: 400 17px/1.65 var(--texte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 768px) { body { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brou); text-underline-offset: .2em; }
[id] { scroll-margin-top: calc(var(--entete) + 8px); }

:focus-visible { outline: 3px solid var(--noyer); outline-offset: 3px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--noyer); color: var(--ivoire); padding: 12px 16px; border-radius: 4px; }
.evitement:focus { top: 8px; }

.c { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .c { padding-inline: 32px; } }
@media (min-width: 1024px) { .c { padding-inline: 64px; } }
.centre { text-align: center; }

/* ----- bandeau concept (dans le flux, jamais collant) ----- */
.bandeau { background: var(--noyer); color: var(--ivoire); font-size: 13px; line-height: 1.5; text-align: center; padding: 8px 16px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.bandeau a { color: var(--laiton); text-decoration: underline; text-decoration-thickness: 1px; white-space: nowrap; }
.bandeau a:hover { text-decoration-thickness: 2px; }
.bandeau :focus-visible { outline-color: var(--laiton); }

/* ----- en-tête : le seul élément collant ----- */
.entete { position: sticky; top: 0; z-index: 30; background: var(--ivoire); border-bottom: 1px solid var(--filet); }
.entete__in { max-width: 1440px; margin-inline: auto; padding: 6px 16px; min-height: var(--entete); display: flex; justify-content: space-between; align-items: flex-start; }
.marque { font: 400 26px/44px var(--titre); color: var(--noyer); text-decoration: none; letter-spacing: -.01em; }
.entete__nav, .entete__contact { display: none; }
.entete__d { display: flex; align-items: flex-start; gap: 24px; }
@media (min-width: 768px) { .entete__in { padding-inline: 32px; } }
@media (min-width: 1024px) {
  .entete__in { padding: 0 64px; align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; }
  .marque { font-size: 30px; line-height: 1; justify-self: center; }
  .entete__nav { display: flex; gap: 32px; }
  .entete__d { justify-self: end; align-items: center; }
  .entete__nav a, .entete__contact { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--noyer); text-decoration: none; background: linear-gradient(var(--brou), var(--brou)) 0 calc(100% - 8px) / 0 2px no-repeat; transition: background-size .25s; }
  .entete__nav a:hover, .entete__contact:hover { background-size: 100% 2px; }
  .entete__contact { display: inline-flex; }
}

/* ----- boutons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border-radius: 2px; font: 600 16px/1 var(--texte); text-decoration: none; cursor: pointer; border: 1.5px solid var(--noyer); transition: transform .2s, background-color .2s, box-shadow .2s; list-style: none; user-select: none; }
.btn::-webkit-details-marker { display: none; }
.btn--noyer { background: var(--noyer); color: var(--ivoire); }
.btn--noyer:hover { background: #432b1e; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(46,29,20,.6); }
.btn--contour { background: transparent; color: var(--noyer); }
.btn--contour:hover { background: rgba(46,29,20,.07); transform: translateY(-1px); }
.btn--grand { min-height: 52px; padding: 0 28px; }
.btn--petit { padding: 0 18px; }
.lien { font-weight: 600; color: var(--brou); text-decoration-thickness: 1px; display: inline-flex; align-items: center; min-height: 44px; }
.lien:hover { text-decoration-thickness: 2px; }

/* panneau « Appeler » / « Écrire » (details) : dans le flux sur téléphone, flottant dès 1024 px dans l'en-tête */
.appel { position: relative; }
.appel__panneau { margin-top: 8px; width: 280px; max-width: calc(100vw - 32px); background: var(--ivoire); border: 1px solid var(--noyer); padding: 14px 16px; font-size: 15px; line-height: 22px; text-align: left; box-shadow: 0 12px 32px -12px rgba(0,0,0,.25); }
.appel--entete { display: flex; flex-direction: column; align-items: flex-end; }
.appel--entete .appel__panneau { width: calc(100vw - 140px); max-width: 280px; }
@media (min-width: 1024px) {
  .appel--entete .appel__panneau { position: absolute; right: 0; top: 100%; margin-top: 12px; z-index: 5; width: 280px; }
}

/* ----- titres ----- */
h1, h2, h3 { font-family: var(--titre); font-weight: 400; color: var(--noyer); }
h2 { font-size: clamp(36px, 25.6px + 2.667vw, 64px); line-height: 1.05; letter-spacing: -.01em; }
h3 { font-size: clamp(24px, 21.8px + .571vw, 30px); line-height: 1.2; }
.surtitre { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brou); }
@media (min-width: 1024px) { .surtitre { font-size: 14px; } }
.centre > .surtitre { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.centre > .surtitre::before, .centre > .surtitre::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.chapeau { font-size: clamp(20px, 18.5px + .381vw, 24px); line-height: 1.55; max-width: 36em; }
.centre .chapeau { margin: 20px auto 0; }
.mention { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--huile); }

/* ----- sections ----- */
.section { padding-block: 64px; }
@media (min-width: 1024px) { .section { padding-block: 128px; } }
.section--sable { background: var(--sable); }
.section--noyer { background: var(--noyer); color: var(--ivoire); }
.section--noyer h2 { color: var(--ivoire); }
.section--noyer :focus-visible { outline-color: var(--laiton); }

/* ----- hero ----- */
.hero { padding-block: 32px 56px; overflow-x: clip; background: radial-gradient(ellipse 60% 50% at 70% 45%, rgba(194,154,85,.16), transparent 70%), var(--ivoire); }
.hero__grille { display: grid; gap: 28px; text-align: center; }
.hero__texte { min-width: 0; }
h1 { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
.nom { font-family: var(--titre); font-size: clamp(64px, 40.3px + 6.095vw, 128px); line-height: .95; letter-spacing: -.02em; }
.ligne { font: 500 clamp(19px, 17.8px + .286vw, 22px)/1.4 var(--texte); max-width: 15.5em; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; margin-top: 22px; }
.hero__armoire { min-width: 0; }
@media (min-width: 1024px) {
  .hero { padding-block: 48px 72px; }
  .hero__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; text-align: left; }
  .hero__texte { grid-column: 1 / 7; }
  .hero__armoire { grid-column: 7 / 13; }
  h1 { align-items: flex-start; gap: 22px; margin-top: 16px; }
  .ligne { max-width: 18em; }
  .hero__actions { justify-content: flex-start; margin-top: 36px; gap: 8px 28px; }
}

/* ----- l'armoire : deux feuilles en livre ouvert ----- */
.armoire { --angle: 100deg; --ouverture: .985; --o: .926; --gx: 42; --gy: 50;
  position: relative; width: min(100%, 358px); aspect-ratio: 358 / 470; margin-inline: auto; perspective: 1800px; border: 1px solid var(--noyer); background: var(--noyer); touch-action: pan-y; }
@media (min-width: 768px) { .armoire { width: 440px; } }
@media (min-width: 1024px) { .armoire { width: min(100%, 480px); aspect-ratio: 480 / 620; } }
@media (prefers-reduced-motion: no-preference) { .js .armoire { --angle: 0deg; --ouverture: 0; --o: 0; } }
@media (hover: hover) and (pointer: fine) { .js .armoire { cursor: grab; } }

.interieur { position: absolute; inset: 0; overflow: hidden; background: var(--noyer); transform: scale(calc(1.06 - .06 * var(--o))); }
.interieur img { width: 100%; height: 100%; object-fit: cover; }
.etiquette-meuble { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; width: max-content; max-width: calc(100% - 24px); background: var(--noyer); color: var(--ivoire); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; text-align: center; opacity: clamp(0, calc((var(--o) - .55) * 3), 1); }

.porte { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; will-change: transform; }
.porte--g { left: 0; transform-origin: left center; transform: rotateY(calc(var(--angle) * -1)); }
.porte--d { right: 0; transform-origin: right center; transform: rotateY(var(--angle)); }
.porte__face, .porte__dos { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.porte__face { overflow: hidden; background: var(--noyer); }
.porte--g .porte__face { box-shadow: inset -1px 0 0 rgba(20,10,5,.55); }
.porte--d .porte__face { box-shadow: inset 1px 0 0 rgba(20,10,5,.55); }
/* feuille de placage : plus grande que la porte, elle glisse ; la porte droite est le miroir exact de la gauche */
.miroir { position: absolute; inset: 0; }
.porte--d .miroir { transform: scaleX(-1); }
.placage { position: absolute; left: 0; top: 0; height: 130%; aspect-ratio: 960 / 1287; background: var(--noyer) url("../images/placage-960.webp") center / 100% 100% no-repeat; transform: translate3d(calc(var(--gx) * -.6%), calc(var(--gy) * -.2308%), 0); will-change: transform; }
@supports (background-image: image-set(url("a.avif") type("image/avif"))) {
  .placage { background-image: image-set(url("../images/placage-960.avif") type("image/avif"), url("../images/placage-960.webp") type("image/webp")); }
}
.vernis, .ombre { position: absolute; inset: 0; pointer-events: none; }
.porte--g .vernis { background: linear-gradient(90deg, rgba(255,255,255,.07), transparent 40%); }
.porte--d .vernis { background: linear-gradient(270deg, rgba(255,255,255,.07), transparent 40%); }
.ombre { background: linear-gradient(90deg, rgba(10,4,0,.6), rgba(10,4,0,.15)); opacity: calc(.45 * var(--ouverture)); }
.poignee { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E0BE7A, var(--laiton) 45%, #8C6A2F); box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.porte--g .poignee { right: 9px; }
.porte--d .poignee { left: 9px; }
.porte__dos { transform: rotateY(180deg); background: linear-gradient(90deg, #3a261b, #241811); box-shadow: inset 0 0 0 10px #2E1D14, inset 0 0 0 11px rgba(194,154,85,.22); }
.tranche { position: absolute; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, #1a0f09, #3a261b); }
.porte--g .tranche { right: 0; transform-origin: right center; transform: rotateY(-90deg); }
.porte--d .tranche { left: 0; transform-origin: left center; transform: rotateY(90deg); }

/* poignées : un vrai bouton de 48 px sur l'axe (les disques de laiton sont portés par les portes) */
.poignees { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 3; }
.poignees:focus-visible { outline: 3px solid var(--ivoire); outline-offset: 0; box-shadow: 0 0 0 6px var(--noyer); }
.no-js .poignees, .js:not(.pret) .poignees { display: none; }

.legende { margin-top: 28px; font-size: 15px; line-height: 1.5; color: var(--huile); text-align: center; max-width: 30em; margin-inline: auto; }
.l-js, .js .l-nojs, .l-souris, .l-doigt, .l-defile, .l-bouton { display: none; }
.js .l-js { display: inline; }
@media (hover: hover) and (pointer: fine) { .js .l-souris { display: inline; } }
@media (hover: none), (pointer: coarse) { .js .l-doigt { display: inline; } }
@media (prefers-reduced-motion: no-preference) { .js .l-defile { display: inline; } }
@media (prefers-reduced-motion: reduce) { .js .l-bouton { display: inline; } }
@media (min-width: 1024px) { .legende { margin-top: 32px; } }

/* sol : ombre douce sous l'armoire */
.armoire::after { content: ""; position: absolute; left: 4%; right: 4%; top: 100%; height: 26px; margin-top: -8px; background: radial-gradient(ellipse at center, rgba(46,29,20,.35), transparent 72%); filter: blur(7px); pointer-events: none; z-index: -1; }

/* ----- ce que nous fabriquons ----- */
.fabrication { margin: 48px auto 0; max-width: 960px; position: relative; }
.fabrication li { padding: 32px 8px; border-top: 1px solid var(--filet); }
.fabrication h3 { margin-bottom: 10px; }
.fabrication p { max-width: 21em; margin-inline: auto; }
.bois { margin-top: 32px; color: var(--huile); }
@media (min-width: 768px) { .fabrication p { max-width: 24em; } }
@media (min-width: 1024px) {
  .fabrication { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; }
  .fabrication::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--filet); }
  .fabrication li { padding: 48px 56px; }
  .bois { margin-top: 48px; }
}

/* ----- travaux ----- */
.travail { margin-top: 56px; display: grid; gap: 20px; max-width: 560px; margin-inline: auto; text-align: left; }
.travail__photo { margin: 0; }
.travail__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filet); }
.etiquette { margin-top: 12px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brou); }
.travail__texte h3 { margin-bottom: 10px; }
.travail__texte p { max-width: 28em; }
@media (min-width: 1024px) {
  .etiquette { font-size: 14px; }
  .section--sable .c > .centre + .travail { margin-top: 88px; }
  .travail { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; margin-top: 96px; }
  .travail__photo { grid-column: 1 / 7; }
  .travail__texte { grid-column: 8 / 12; }
  .travail--inverse .travail__photo { grid-column: 7 / 13; grid-row: 1; }
  .travail--inverse .travail__texte { grid-column: 2 / 6; grid-row: 1; }
}

/* ----- étapes ----- */
.etapes { counter-reset: e; margin-top: 48px; display: grid; gap: 0; }
.etapes li { counter-increment: e; padding: 32px 8px; border-top: 1px solid var(--filet); }
.etapes li::before { content: counter(e); display: block; font: 400 40px/1 var(--titre); color: var(--brou); margin-bottom: 14px; }
.etapes h3 { margin-bottom: 10px; }
.etapes p { max-width: 21em; margin-inline: auto; }
@media (min-width: 1024px) {
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
  .etapes li { padding: 36px 0 0; border-top: 1px solid var(--noyer); }
  .etapes p { max-width: none; }
  .etapes h3 { min-height: 2.4em; }
}

/* ----- l'atelier ----- */
.atelier { display: grid; gap: 36px; }
.atelier__photo { margin: 0; min-width: 0; }
.atelier__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.atelier__texte { min-width: 0; text-align: center; }
.atelier__texte .chapeau { margin: 24px auto 0; }
.atelier__texte > p:last-child { margin: 20px auto 0; max-width: 34em; }
.filet-laiton { display: block; width: 48px; height: 2px; background: var(--laiton); margin: 20px auto 0; }
@media (min-width: 1024px) {
  .atelier { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .atelier__photo { grid-column: 1 / 8; }
  .atelier__texte { grid-column: 8 / 13; text-align: left; }
  .atelier__texte .chapeau, .atelier__texte > p:last-child { margin-left: 0; }
  .filet-laiton { margin-left: 0; }
}

/* ----- contact ----- */
.coordonnees { margin: 40px auto 0; max-width: 640px; display: grid; gap: 0; text-align: center; }
.coordonnees > div { padding: 20px 0; border-top: 1px solid var(--filet); }
.coordonnees dt { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brou); margin-bottom: 4px; }
.coordonnees dd { overflow-wrap: anywhere; }
.fictif { color: var(--huile); font-size: 15px; white-space: nowrap; }
.pastille { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.pastille[hidden] { display: none; }
.pastille__point { width: 10px; height: 10px; border-radius: 50%; background: var(--huile); flex: none; }
.pastille[data-etat="ouvert"] .pastille__point { background: #2F7D4F; }
.pastille[data-etat="pause"] .pastille__point { background: var(--laiton); }
.contact__boutons { margin: 32px auto 0; max-width: 640px; display: grid; gap: 12px; justify-items: stretch; }
.contact__boutons .appel { display: grid; justify-items: center; }
.contact__boutons .btn { width: 100%; }
.contact__boutons .appel__panneau { margin-inline: auto; }
@media (min-width: 768px) {
  .coordonnees { grid-template-columns: 1fr 1fr; }
  .coordonnees > div { padding: 24px 16px; }
  .contact__boutons { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ----- pied de page ----- */
.pied { background: var(--sable); color: var(--noyer); font-size: 14px; line-height: 22px; padding-block: 56px 32px; }
.pied p { color: var(--huile); }
.pied a { color: var(--noyer); }
.pied__grille { display: grid; gap: 36px; }
.pied__nom { font: 400 30px/1.1 var(--titre); color: var(--noyer) !important; margin-bottom: 8px; }
.pied__id p + p { margin-top: 10px; }
.pied__nav { display: grid; gap: 0; align-content: start; }
.pied__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pied__credits li { color: var(--huile); }
.pied__credits strong { color: var(--noyer); }
.pied__bas { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--filet); display: grid; gap: 6px; }
.pied__bas a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) {
  .pied__grille { grid-template-columns: 1.4fr .8fr 1fr; gap: 64px; }
  .pied__bas { grid-template-columns: 1fr auto; align-items: center; }
}

/* ----- apparitions : seulement avec JS et sans demande de mouvement réduit ----- */
@keyframes secours { to { opacity: 1; translate: 0 0; --angle: 100deg; --ouverture: .985; --o: .926; } }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.vu) { opacity: 0; translate: 0 18px; animation: secours 0s 2.5s forwards; }
  .js.pret [data-reveal]:not(.vu) { animation: none; }
  .js [data-reveal] { transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); }
  [data-reveal="2"] { transition-delay: .1s !important; }
  [data-reveal="3"] { transition-delay: .2s !important; }
  .js .armoire { animation: secours 0s 2.5s forwards; }
  .js.pret .armoire { animation: none; }
}

/* ?capture : état figé et déterministe pour les cartes du portfolio */
.capture *, .capture *::before, .capture *::after { animation: none !important; transition: none !important; }
.capture [data-reveal] { opacity: 1 !important; translate: 0 0 !important; }