/* Pat's Natural Beauty : l'accueil, pensé comme un passage au salon.
   La photo qu'on peigne, le miroir de la loge, l'avant et après, l'ardoise des prix,
   le mur de photos du salon et le fauteuil qui attend. */

@font-face { font-family: 'Kalam'; src: url('../fonts/kalam-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url('../fonts/kalam-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin Sketch'; src: url('../fonts/cabin-sketch-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

.page-accueil { --creme: #F4E9DA; --creme-2: #EADBC6; --brun: #2B1D14; --brun-2: #4A3222; --craie: #F1EEE4; --craie-jaune: #F2D47C; --craie-rose: #F3B9A6; --ardoise: #23302A; --bois: #7A4A22; --bois-clair: #B27843; }
.page-accueil .contenu { background: var(--creme); }

/* ---------- La photo qu'on peigne ---------- */
.pg { --pg-fond: #F4E9DA; position: relative; display: flex; flex-direction: column; background: var(--pg-fond); }
.pg-scene { order: 1; position: relative; margin: 0; height: clamp(380px, 62svh, 640px); overflow: hidden; background: #3A291D; touch-action: pan-y; cursor: none; isolation: isolate; }
@media (hover: none) { .pg-scene { cursor: auto; } }
.pg-repli, .pg-toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-repli { object-fit: cover; object-position: 50% 30%; transition: opacity .5s var(--courbe); }
.pg-repli.est-cache { opacity: 0; }
.pg-toile { opacity: 0; transition: opacity .2s linear; }
.pg.est-pret .pg-toile { opacity: 1; }
.pg.est-pret .pg-repli { opacity: 0; }
.pg.sans-gl .pg-toile, .pg.sans-gl .pg-outil { display: none; }
.pg.sans-gl .pg-repli { opacity: 1; }
.pg.sans-gl .pg-repli.est-cache { opacity: 0; }
.pg.sans-gl .pg-scene { cursor: auto; }
.pg-outil { position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .25s var(--courbe); will-change: transform; }
.pg-outil.est-visible { opacity: 1; }
.pg-outil-peigne { position: absolute; width: clamp(150px, 16vw, 230px); height: auto; left: 0; top: 0; transform: translate(-50%, -78%); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.pg-fiche { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: center; max-width: calc(100% - 28px); padding: 12px 16px 12px 26px; background: #FBF4EA; color: var(--encre); border-radius: 4px 14px 14px 4px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.pg-fiche::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #3A291D; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.pg-fiche-num { grid-row: 1 / 3; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 2rem; line-height: 1; color: var(--ocre); }
.pg-fiche-corps { display: grid; min-width: 0; }
.pg-fiche-corps strong { font-family: var(--titre); font-style: italic; font-size: 1.2rem; line-height: 1.1; }
.pg-fiche-corps > span { font-size: .88rem; color: var(--encre-2); }
.pg-fiche-prix { font-weight: 700; color: var(--vermillon-fonce) !important; }
.pg-fiche-lien { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 800; font-size: .92rem; text-decoration: none; border-bottom: 2px solid var(--ocre); }
.pg-fiche-lien .ic { width: 16px; height: 16px; }
.pg.texte-change .pg-fiche-corps, .pg.texte-change .pg-fiche-num { animation: pg-texte .7s var(--courbe) both; }
@keyframes pg-texte { from { opacity: 0; transform: translateY(8px); } }
.pg-astuce { position: absolute; z-index: 2; right: 12px; top: 12px; display: flex; align-items: center; gap: 10px; max-width: min(19em, calc(100% - 24px)); margin: 0; padding: 8px 14px 8px 10px; border-radius: 12px; background: rgba(43, 29, 20, .82); color: #FBF4EA; font-size: .86rem; font-weight: 700; line-height: 1.25; opacity: 0; transform: translateY(-6px); transition: opacity .6s var(--courbe) 1.8s, transform .6s var(--courbe) 1.8s; pointer-events: none; }
.pg.est-pret .pg-astuce { opacity: 1; transform: none; }
.pg-astuce.est-vue, .pg.est-pret .pg-astuce.est-vue { opacity: 0; transition-delay: 0s; }
.pg-astuce-peigne { width: 44px; height: auto; flex: none; }
.pg-astuce .si-souris { display: none; }
@media (hover: hover) and (pointer: fine) { .pg-astuce .si-souris { display: inline; } .pg-astuce .si-doigt { display: none; } }

.pg-texte { order: 2; display: flex; flex-direction: column; padding: 18px var(--marge) 34px; }
.pg-reperes { display: none; }
.pg-styles { order: -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--marge) * -1) 18px; padding: 2px var(--marge) 4px; scroll-padding-inline: var(--marge); }
.pg-styles::-webkit-scrollbar { display: none; }
.pg-style { flex: none; display: inline-flex; align-items: baseline; gap: 7px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--encre-2); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .3s var(--courbe), color .3s var(--courbe); }
.pg-style-num { font-size: .72rem; letter-spacing: .04em; color: var(--gris); }
.pg-style-nom { font-family: var(--titre); font-style: italic; font-size: 1.05rem; }
.pg-style[aria-selected="true"] { background: var(--brun); color: #FBF4EA; }
.pg-style[aria-selected="true"] .pg-style-num { color: var(--ocre); }
.pg-titre { font-family: var(--titre); font-style: italic; font-size: clamp(2.3rem, 1.3rem + 5.4vw, 3.5rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 .4em; }
.pg-titre .ligne { display: block; overflow: hidden; padding: .02em .08em .1em 0; margin-bottom: -.08em; }
.pg-titre .ligne > span { display: inline-block; }
.pg-titre .ligne:nth-child(2) { color: var(--bronze); }
.js .pg-titre .ligne > span { transform: translateY(105%); }
.js body.est-pret .pg-titre .ligne > span { transform: none; transition: transform 1s var(--courbe) .25s; }
.js body.est-pret .pg-titre .ligne:nth-child(2) > span { transition-delay: .35s; }
.js body.est-pret .pg-titre .ligne:nth-child(3) > span { transition-delay: .45s; }
.pg-intro { max-width: 34em; color: var(--encre-2); font-size: 1rem; margin: 0 0 22px; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pg-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--vermillon); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 14px 24px -16px var(--vermillon-fonce); transition: transform var(--rapide) var(--courbe), background-color var(--moyen); }
.pg-bouton:hover { background: var(--vermillon-fonce); }
.pg-bouton:active { transform: scale(.97); }
.pg-bouton .ic { width: 20px; height: 20px; }
.pg-bouton-clair { background: #FBF4EA; color: var(--brun); box-shadow: none; }
.pg-bouton-clair:hover { background: #fff; }
.pg-lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--ocre); padding-bottom: 2px; }
.pg-lien .ic { width: 18px; height: 18px; transition: transform var(--moyen) var(--courbe); }
.pg-lien:hover .ic { transform: translateX(4px); }
.pg-lien-clair { color: #FBF4EA; }

@media (min-width: 1024px) {
  .pg { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); height: calc(100svh - var(--entete)); min-height: 640px; max-height: 1040px; }
  .pg-scene { order: 0; grid-column: 2; height: auto; }
  .pg-texte { grid-column: 1; grid-row: 1; justify-content: center; padding: 40px clamp(32px, 4vw, 64px) 40px var(--marge); }
  .pg-reperes { display: flex; align-items: center; gap: .55em; margin: 0 0 auto; font-weight: 700; font-size: .9rem; }
  .pg-reperes .ic { width: .8em; height: .8em; color: var(--ocre); }
  .pg-titre { font-size: min(5vw, 5rem); margin-top: auto; }
  .pg-titre .ligne { white-space: nowrap; }
  .pg-intro { font-size: 1.08rem; margin-bottom: 26px; }
  .pg-styles { order: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: auto 0 0; padding: 22px 0 0; overflow: visible; border-top: 1px solid rgba(43, 29, 20, .14); }
  .pg-style { min-height: 0; padding: 7px 0; border-radius: 0; background: none; text-align: left; }
  .pg-style-nom { font-size: 1.2rem; transition: transform .45s var(--courbe); }
  .pg-style:hover .pg-style-nom { transform: translateX(5px); }
  .pg-style[aria-selected="true"] { background: none; color: var(--encre); }
  .pg-style[aria-selected="true"] .pg-style-nom { box-shadow: inset 0 -.32em 0 rgba(217, 125, 22, .35); }
  .pg-fiche { left: 28px; bottom: 28px; padding: 16px 22px 16px 30px; }
  .pg-fiche-num { font-size: 2.6rem; }
  .pg-fiche-corps strong { font-size: 1.45rem; }
  .pg-astuce { right: 24px; top: 24px; }
}
@media (min-width: 1024px) and (max-height: 760px) { .pg-intro { display: none; } }

/* ---------- Le miroir de la loge ---------- */
.loge { position: relative; overflow: hidden; color: #FBF4EA; background-color: #0F3B26; background-image: radial-gradient(120% 80% at 70% 20%, rgba(255, 220, 160, .12), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.2'%3E%3Cpath d='M30 92 C 30 66, 48 46, 78 40 C 76 70, 58 90, 30 92 Z M30 92 L 70 50'/%3E%3C/g%3E%3C/svg%3E"); padding: clamp(64px, 9vw, 130px) 0; }
.loge-in { display: grid; gap: 40px; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.loge-titre { color: #FBF4EA; }
.loge-titre .ligne { display: block; }
.loge-titre .ligne:nth-child(2) { color: var(--craie-jaune); }
.loge-intro { max-width: 30em; color: rgba(251, 244, 234, .82); margin: 14px 0 26px; }
.loge-commandes { display: flex; align-items: center; gap: 16px; }
.loge-fleche { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(251, 244, 234, .4); background: transparent; color: #FBF4EA; cursor: pointer; transition: background-color var(--moyen), border-color var(--moyen); }
.loge-fleche:hover { background: rgba(251, 244, 234, .12); border-color: #FBF4EA; }
.loge-compteur { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--titre); font-style: italic; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.loge-sep { width: 34px; height: 1.5px; background: rgba(251, 244, 234, .5); }
.loge-nom { display: grid; gap: 6px; margin: 26px 0 0; }
.loge-nom strong { font-family: var(--titre); font-style: italic; font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem); line-height: 1.05; }
.loge-nom a { justify-self: start; display: inline-flex; align-items: center; gap: 8px; color: var(--craie-jaune); font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }
.loge-nom a .ic { width: 18px; height: 18px; }

.miroir { position: relative; justify-self: center; width: min(100%, 470px); }
.miroir-cadre { position: relative; padding: 46px 46px 40px; border-radius: 10px; background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 12%, transparent 88%, rgba(0, 0, 0, .28)), repeating-linear-gradient(92deg, rgba(255, 255, 255, .03) 0 3px, rgba(0, 0, 0, .04) 3px 7px), linear-gradient(180deg, #8C5A2E, #6A3F1C 48%, #4E2D12); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .35); transform-style: preserve-3d; }
.miroir-cadre::after { content: ''; position: absolute; inset: 40px 40px 34px; border-radius: 4px; box-shadow: 0 0 0 6px #3B2210, 0 0 0 7px rgba(255, 255, 255, .12); pointer-events: none; }
.ampoules { position: absolute; display: flex; justify-content: space-between; pointer-events: none; }
.ampoules-haut { left: 64px; right: 64px; top: 12px; }
.ampoules-gauche, .ampoules-droite { flex-direction: column; top: 70px; bottom: 60px; }
.ampoules-gauche { left: 12px; }
.ampoules-droite { right: 12px; }
.ampoules i { position: relative; display: block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fffdf6, #e8dcc2 45%, #b9a888 80%); box-shadow: 0 0 0 3px #2E1A0B, 0 2px 4px rgba(0, 0, 0, .5); transition: background .25s, box-shadow .5s; }
.miroir.est-allume .ampoules i { background: radial-gradient(circle at 38% 34%, #ffffff, #fff4d6 40%, #ffd88c 85%); box-shadow: 0 0 0 3px #2E1A0B, 0 0 16px 4px rgba(255, 214, 140, .85), 0 0 46px 10px rgba(255, 196, 110, .35); transition-delay: calc(var(--k) * 55ms); }
.miroir.est-allume .ampoules i:nth-child(4n + 2) { animation: ampoule 5.5s steps(1) calc(var(--k) * 230ms) infinite; }
@keyframes ampoule { 0%, 92%, 96%, 100% { filter: none; } 94% { filter: brightness(.55); } }
.miroir-glace { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: #1d1612; isolation: isolate; }
.miroir-fond { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(22px) saturate(1.15) brightness(.72); transform: scale(1.06); }
.miroir-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.06); transition: opacity .3s; }
.miroir-buee { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.miroir-reflet { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, transparent calc(30% + var(--rx, 0%)), rgba(255, 255, 255, .2) calc(38% + var(--rx, 0%)), transparent calc(46% + var(--rx, 0%)), transparent calc(56% + var(--rx, 0%)), rgba(255, 255, 255, .09) calc(60% + var(--rx, 0%)), transparent calc(66% + var(--rx, 0%))), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .38)); mix-blend-mode: screen; }
.miroir-glisse { position: absolute; left: 30px; top: 30px; z-index: 4; display: flex; }
.miroir-carte { width: 70px; aspect-ratio: 3 / 4; padding: 4px 4px 12px; border: 0; background: #FBF7EF; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); transform: rotate(var(--r)); cursor: pointer; transition: transform .4s var(--courbe-ressort); }
.miroir-carte + .miroir-carte { margin-left: -18px; margin-top: 10px; }
.miroir-carte img { width: 100%; height: 100%; object-fit: cover; }
.miroir-carte:hover { transform: rotate(0deg) translateY(-4px) scale(1.06); }
.miroir-tablette { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 64px; margin: -4px -26px 0; padding: 0 30px 18px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, transparent 0 46px, #5C3517 46px, #7A4A22 52px, #4A2A10 64px); }
.objet { display: block; }
.objet-flacon { position: relative; width: 26px; height: 52px; border-radius: 6px 6px 4px 4px; background: linear-gradient(90deg, #2a1a10, #5a3a22 40%, #2a1a10); margin-bottom: 18px; }
.objet-flacon::before { content: ''; position: absolute; left: 7px; top: -14px; width: 12px; height: 14px; border-radius: 3px 3px 0 0; background: #e7e0d6; }
.objet-flacon::after { content: ''; position: absolute; left: 4px; right: 4px; top: 16px; height: 16px; border-radius: 2px; background: var(--ocre); }
.objet-peigne { width: 110px; height: auto; margin-bottom: 18px; transform: rotate(-4deg); }
.objet-pot { width: 40px; height: 26px; border-radius: 4px 4px 8px 8px; background: linear-gradient(90deg, #d7c5aa, #f5eadb 40%, #cbb795); box-shadow: inset 0 6px 0 #2B1D14; margin-bottom: 18px; }
.objet-pinces { display: flex; gap: 4px; margin-bottom: 18px; }
.objet-pinces i { width: 9px; height: 30px; border-radius: 4px; background: linear-gradient(#e94e1b, #b33a12); transform: rotate(12deg); }
.objet-pinces i + i { background: linear-gradient(#048c37, #036b2a); transform: rotate(-10deg); }
@media (min-width: 1024px) {
  .loge-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; gap: 60px; }
  .miroir { justify-self: end; width: min(100%, 520px); }
}
@media (max-width: 520px) {
  .miroir-cadre { padding: 34px 34px 30px; }
  .miroir-cadre::after { inset: 29px 29px 25px; }
  .ampoules i { width: 15px; height: 15px; box-shadow: 0 0 0 2px #2E1A0B; }
  .miroir.est-allume .ampoules i { box-shadow: 0 0 0 2px #2E1A0B, 0 0 10px 3px rgba(255, 214, 140, .85), 0 0 26px 6px rgba(255, 196, 110, .3); }
  .ampoules-haut { left: 44px; right: 44px; top: 9px; }
  .ampoules-gauche, .ampoules-droite { top: 50px; bottom: 44px; }
  .ampoules-gauche { left: 9px; }
  .ampoules-droite { right: 9px; }
  .miroir-glisse { left: 20px; top: 20px; }
  .miroir-carte { width: 52px; }
}

/* ---------- Avant et après ---------- */
.aa-section { padding: clamp(64px, 9vw, 130px) 0; background: var(--creme); }
.aa-in { display: grid; gap: 30px; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.aa-texte .ligne { display: block; }
.aa-texte .ligne:nth-child(2) { color: var(--bronze); }
.aa-texte p { max-width: 30em; color: var(--encre-2); margin: 14px 0 0; }
.aa { position: relative; aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; border-radius: 16px; overflow: hidden; background: var(--brun); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; box-shadow: 0 30px 50px -34px rgba(43, 29, 20, .8); }
.aa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.aa-avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; z-index: 2; pointer-events: none; }
.aa-trait { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #FBF4EA; box-shadow: 0 0 12px rgba(0, 0, 0, .35); }
.aa-peigne { position: absolute; top: 50%; left: 0; width: 190px; height: auto; transform: translate(-50%, -50%) rotate(90deg); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.aa-etiquette { position: absolute; z-index: 1; top: 16px; padding: 6px 12px; border-radius: 8px; background: rgba(43, 29, 20, .78); color: #FBF4EA; font-weight: 800; font-size: .9rem; pointer-events: none; }
.aa-etiquette-avant { left: 16px; }
.aa-etiquette-apres { right: 16px; }
.aa-curseur { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
@media (min-width: 1024px) {
  .aa-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: center; gap: 60px; }
  .aa { max-height: 82svh; justify-self: end; width: min(100%, 560px); }
}

/* ---------- L'ardoise du salon ---------- */
.ardoise-section { padding: clamp(70px, 9vw, 140px) var(--marge) clamp(60px, 8vw, 120px); background: linear-gradient(180deg, var(--creme), var(--creme-2)); }
.ardoise-pend { position: relative; max-width: 880px; margin: 0 auto; padding-top: 74px; transform-origin: 50% 0; transform: rotate(var(--rot, 0deg)); }
.ardoise-clou { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4f1ec, #8c8780 60%, #4d4945); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); z-index: 2; }
.ardoise-ficelle { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 90px; overflow: visible; }
.ardoise-ficelle path { fill: none; stroke: #8a6a45; stroke-width: 2.4; stroke-linecap: round; }
.ardoise { position: relative; padding: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 56px) clamp(22px, 3vw, 40px); border-radius: 6px; color: var(--craie); background-color: var(--ardoise); background-image: radial-gradient(60% 40% at 30% 20%, rgba(255, 255, 255, .08), transparent 70%), radial-gradient(50% 50% at 80% 85%, rgba(255, 255, 255, .05), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); box-shadow: inset 0 0 50px rgba(0, 0, 0, .55); }
.ardoise::before { content: ''; position: absolute; inset: calc(clamp(12px, 1.6vw, 20px) * -1); z-index: -1; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, rgba(0, 0, 0, .05) 2px 6px), linear-gradient(135deg, #B27843, #7A4A22 40%, #9a6233 60%, #5c3517); box-shadow: 0 34px 50px -30px rgba(43, 29, 20, .75), inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .3); }
.ardoise-pend { isolation: isolate; }
.ardoise-filtre { position: absolute; }
.ardoise-tete { text-align: center; margin-bottom: 22px; }
.ardoise-titre { font-family: 'Cabin Sketch', var(--titre); font-weight: 700; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.8rem); line-height: 1; color: var(--craie); filter: url(#craie); letter-spacing: .01em; }
.ardoise-titre span { color: var(--craie-jaune); }
.ardoise-note { max-width: 36em; margin: 12px auto 0; font-family: 'Kalam', var(--texte); font-size: 1rem; line-height: 1.35; color: rgba(241, 238, 228, .72); }
.ardoise-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 18px; }
.ardoise-onglet { position: relative; padding: 6px 4px 10px; border: 0; background: none; color: rgba(241, 238, 228, .62); font-family: 'Kalam', var(--texte); font-weight: 700; font-size: 1.12rem; cursor: pointer; transition: color .3s; }
.ardoise-onglet::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 22 2, 40 7, 60 4 S 90 3, 98 5' fill='none' stroke='%23F2D47C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--courbe); }
.ardoise-onglet:hover { color: var(--craie); }
.ardoise-onglet[aria-selected="true"] { color: var(--craie); }
.ardoise-onglet[aria-selected="true"]::after { transform: none; }
.ardoise-tableau { position: relative; min-height: 220px; }
.ardoise-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ardoise-liste a { display: flex; align-items: baseline; gap: 10px; padding: 9px 4px; color: inherit; text-decoration: none; border-radius: 6px; transition: background-color .25s; }
.ardoise-liste a:hover { background: rgba(255, 255, 255, .05); }
.ardoise-nom { display: grid; font-family: 'Kalam', var(--texte); font-size: 1.18rem; line-height: 1.2; }
.ardoise-nom small { font-size: .85rem; color: rgba(241, 238, 228, .55); }
.ardoise-points { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(241, 238, 228, .38); transform: translateY(-4px); }
.ardoise-prix { font-family: 'Kalam', var(--texte); font-weight: 700; font-size: 1.12rem; color: var(--craie-rose); white-space: nowrap; }
.js .ardoise-liste li { clip-path: inset(0 100% 0 0); opacity: .4; }
.js .ardoise-liste.est-ecrite li { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path .85s cubic-bezier(.45, .05, .3, 1) calc(var(--j) * 160ms + .15s), opacity .4s calc(var(--j) * 160ms + .15s); }
.js .ardoise .ardoise-liste.est-effacee li { clip-path: inset(0 0 0 0); opacity: 0; filter: blur(3px); transform: translateX(14px); transition: opacity .35s, filter .35s, transform .35s; }
.js .ardoise-titre { clip-path: inset(0 100% 0 0); }
.js .ardoise.est-ecrite .ardoise-titre { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.45, .05, .3, 1); }
.ardoise-bas { position: relative; display: flex; justify-content: center; margin-top: 24px; }
.ardoise-rdv { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 2px solid rgba(241, 238, 228, .75); color: var(--craie); font-family: 'Kalam', var(--texte); font-weight: 700; font-size: 1.1rem; text-decoration: none; transition: background-color .3s, color .3s; }
.ardoise-rdv:hover { background: var(--craie); color: var(--ardoise); }
.ardoise-rdv .ic { width: 20px; height: 20px; }
.ardoise-craie { position: absolute; right: 6%; bottom: -24px; width: 46px; height: 11px; border-radius: 3px; background: linear-gradient(#fbfaf5, #dcd8cc); transform: rotate(-8deg); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.ardoise-brosse { position: absolute; left: 0; top: 0; z-index: 5; width: 110px; height: 44px; border-radius: 8px; background: linear-gradient(#a3703f 0 60%, #ececec 60%); box-shadow: 0 8px 14px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; }
.ardoise-brosse.est-active { animation: brosse .8s cubic-bezier(.45, .05, .3, 1) both; }
@keyframes brosse { 0% { opacity: 0; transform: translate(-10%, 120%) rotate(-6deg); } 12% { opacity: 1; } 50% { transform: translate(380%, 230%) rotate(4deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-30%, 360%) rotate(-4deg); } }
@media (min-width: 900px) { .ardoise-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 40px; } }

/* ---------- Une journée au salon : photos suspendues par des pinces ---------- */
.journee { position: relative; padding: clamp(64px, 9vw, 130px) 0 clamp(50px, 7vw, 100px); background: var(--brun); color: #FBF4EA; overflow: hidden; }
.journee-in { max-width: 1400px; margin: 0 auto; }
.journee-tete { padding: 0 var(--marge); max-width: 760px; }
.journee-tete .ligne { display: block; }
.journee-tete .ligne:nth-child(2) { color: var(--ocre); }
.journee-tete p { color: rgba(251, 244, 234, .78); margin: 14px 0 0; }
.journee-mur { position: relative; list-style: none; display: flex; gap: 18px; margin: 40px 0 0; padding: 30px var(--marge) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.journee-mur::-webkit-scrollbar { display: none; }
.journee-mur::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: rgba(251, 244, 234, .35); min-width: 100%; }
.journee-photo { position: relative; flex: none; width: min(72vw, 300px); scroll-snap-align: center; transform-origin: 50% 0; transform: rotate(calc((var(--i) - 2.5) * 1.2deg)); }
.journee-photo:nth-child(even) { margin-top: 26px; }
.journee-photo figure { margin: 0; padding: 10px 10px 14px; background: #FBF7EF; color: var(--encre); box-shadow: 0 20px 30px -18px rgba(0, 0, 0, .8); }
.journee-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.journee-photo figcaption { margin-top: 10px; font-family: 'Kalam', var(--texte); font-size: 1rem; line-height: 1.25; color: var(--encre-2); }
.journee-pince { position: absolute; left: 50%; top: -16px; z-index: 2; width: 18px; height: 40px; margin-left: -9px; border-radius: 5px 5px 7px 7px; background: linear-gradient(90deg, #1b120c, #4a3222 45%, #1b120c); box-shadow: 0 4px 6px rgba(0, 0, 0, .5); }
.journee-pince::after { content: ''; position: absolute; left: 4px; right: 4px; top: 10px; height: 3px; border-radius: 2px; background: #c9a36b; }
.js .journee-photo { opacity: 0; transform: translateY(-30px) rotate(calc((var(--i) - 2.5) * 4deg)); }
.js .journee.est-vue .journee-photo { opacity: 1; transform: rotate(calc((var(--i) - 2.5) * 1.2deg)); transition: opacity .6s var(--courbe) calc(var(--i) * 110ms), transform 1.1s var(--courbe-ressort) calc(var(--i) * 110ms); }
.js .journee.est-vue .journee-photo:hover { transform: rotate(0deg) translateY(4px); transition-delay: 0s; }
@media (min-width: 1100px) {
  .journee-mur { overflow: visible; justify-content: center; flex-wrap: nowrap; padding-top: 36px; }
  .journee-photo { width: calc((100% - 5 * 18px) / 6); }
}

/* ---------- Le fauteuil qui attend ---------- */
.fauteuil-fin { position: relative; overflow: hidden; padding: clamp(60px, 9vw, 130px) 0; color: #FBF4EA; background: radial-gradient(80% 70% at 30% 40%, #5A3A26, #2B1D14 70%); }
.fauteuil-fin-in { display: grid; gap: 30px; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); align-items: center; }
.fauteuil-dessin { justify-self: center; width: min(66vw, 300px); }
.fauteuil-svg { width: 100%; height: auto; overflow: visible; }
.f-verin { transform-box: fill-box; transform-origin: 50% 100%; }
.f-siege { transition: transform 1.2s var(--courbe-ressort) .2s; }
.f-cape { transform-box: view-box; transform-origin: 160px 60px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.js .fauteuil-fin .f-siege { transform: translateY(22px); }
.js .fauteuil-fin .f-verin { transform: scaleY(.6); }
.js .fauteuil-fin .f-cape { opacity: 0; transform: translate(-180px, -240px) rotate(-38deg) scale(.5); }
.js .fauteuil-fin.est-vue .f-siege { transform: none; }
.js .fauteuil-fin.est-vue .f-verin { transform: none; transition: transform 1.2s var(--courbe-ressort) .2s; }
.js .fauteuil-fin.est-vue .f-cape { opacity: 1; animation: cape-pose 1.6s cubic-bezier(.2, .8, .2, 1) .9s both, cape-souffle 5s ease-in-out 2.6s infinite; }
@keyframes cape-pose { 0% { opacity: 0; transform: translate(-180px, -240px) rotate(-38deg) scale(.5); } 45% { opacity: 1; transform: translate(20px, -40px) rotate(14deg) scale(1.08, .92); } 70% { transform: translate(-6px, 6px) rotate(-4deg) scale(.98, 1.03); } 100% { opacity: 1; transform: none; } }
@keyframes cape-souffle { 0%, 100% { transform: none; } 50% { transform: rotate(1.4deg) skewX(-1.5deg); } }
.fauteuil-texte h2 { font-family: var(--titre); font-style: italic; font-size: clamp(2.3rem, 1.4rem + 3.8vw, 4.2rem); line-height: 1; letter-spacing: -.02em; }
.fauteuil-texte .ligne { display: block; }
.fauteuil-texte .ligne:nth-child(2) { color: var(--ocre); }
.fauteuil-texte p { max-width: 30em; color: rgba(251, 244, 234, .8); margin: 16px 0 26px; }
.fauteuil-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
@media (min-width: 900px) { .fauteuil-fin-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 60px; } .fauteuil-dessin { width: min(100%, 360px); } }

@media (prefers-reduced-motion: reduce) {
  html[data-calme="1"] .fauteuil-fin .f-cape { animation: none !important; opacity: 1 !important; transform: none !important; }
  html[data-calme="1"] .journee-photo { opacity: 1 !important; transform: none !important; }
  html[data-calme="1"] .ardoise-liste li, html[data-calme="1"] .ardoise-titre { clip-path: none !important; opacity: 1 !important; }
}