/* Pat's Natural Beauty : gestes du salon communs à toutes les pages.
   La cape de coiffure entre deux pages, le peigne qui découvre les titres. */

.cape { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.cape svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cape-tissu { fill: #0F3B26; }
.cape-plis { mix-blend-mode: soft-light; }
.cape-liseré { fill: none; stroke: var(--vermillon); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-width: 5px; }
html.cape-arrive body::after { content: ''; position: fixed; inset: 0; z-index: 8999; background: #0F3B26; }

.js .peigne-attente { clip-path: inset(-10% 100% -10% 0); }
.js .peigne-passe { clip-path: inset(-10% -2% -10% 0); transition: clip-path .95s cubic-bezier(.5, 0, .2, 1); }
.peigne-bande { position: absolute; z-index: 60; left: 0; width: 100%; overflow: hidden; pointer-events: none; }
.peigne-volant { position: absolute; z-index: 60; width: 0; height: 0; pointer-events: none; }
.peigne-volant svg { position: absolute; left: 0; top: 0; width: calc(var(--haut) * 3.4); max-width: 260px; height: auto; transform: translate(-60%, -50%) rotate(90deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .28)); opacity: 0; }
.peigne-volant.est-parti svg { animation: peigne-vole .95s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes peigne-vole { 0% { opacity: 0; transform: translate(-60%, -50%) rotate(90deg); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--larg) + 20%), -50%) rotate(96deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-calme="1"] .peigne-attente { clip-path: none !important; }
  html[data-calme="1"] .peigne-volant { display: none; }
}

/* ---------- Le rendez-vous : chaque heure est un fauteuil ---------- */
.heures { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important; gap: 10px 8px !important; }
.heure { position: relative; display: grid; justify-items: center; gap: 4px; height: auto !important; padding: 10px 4px 8px !important; border-radius: 14px !important; background: #FBF6EE !important; box-shadow: inset 0 0 0 1.5px #E7DCCB !important; text-decoration: none !important; transition: transform .35s var(--courbe-ressort), background-color .3s, box-shadow .3s; }
.heure-fauteuil { width: 44px; height: auto; overflow: visible; transition: transform .6s var(--courbe-ressort); }
.hf-dos, .hf-assise, .hf-accoudoir { fill: #2B1D14; }
.hf-metal { fill: #A9A39B; }
.hf-cape { fill: var(--vermillon); opacity: 0; transform-origin: 30px 4px; transform: translateY(-14px) rotate(-14deg) scale(.7); transition: opacity .3s, transform .6s var(--courbe-ressort); }
.heure-plaque { font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--encre); }
.heure.est-libre:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--encre) !important; }
.heure.est-libre:hover .heure-fauteuil { transform: rotate(-6deg); }
.heure.est-complet, .heure.est-passe { background: #F2EEE8 !important; box-shadow: none !important; }
.heure.est-complet .hf-cape { opacity: .45; transform: none; fill: #8f857c; }
.heure.est-complet .hf-dos, .heure.est-complet .hf-assise, .heure.est-complet .hf-accoudoir, .heure.est-passe .hf-dos, .heure.est-passe .hf-assise, .heure.est-passe .hf-accoudoir { fill: #b9b0a6; }
.heure.est-complet .heure-plaque, .heure.est-passe .heure-plaque { color: var(--gris-clair); text-decoration: line-through; }
.heure.est-choisie { background: var(--brun, #2B1D14) !important; box-shadow: 0 12px 20px -14px rgba(0, 0, 0, .7) !important; transform: translateY(-3px); }
.heure.est-choisie .heure-plaque { color: #FBF4EA; }
.heure.est-choisie .hf-dos, .heure.est-choisie .hf-assise, .heure.est-choisie .hf-accoudoir { fill: #FBF4EA; }
.heure.est-choisie .hf-cape { opacity: 1; transform: none; }
.heure.est-choisie .heure-fauteuil { animation: fauteuil-tourne .7s var(--courbe) both; }
@keyframes fauteuil-tourne { 0% { transform: scaleX(1); } 35% { transform: scaleX(-.85); } 70% { transform: scaleX(1.05); } 100% { transform: scaleX(1); } }
.js .heures .heure { animation: fauteuil-arrive .5s var(--courbe) both; animation-delay: calc(var(--k, 0) * 35ms); }
@keyframes fauteuil-arrive { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { html[data-calme="1"] .heure, html[data-calme="1"] .heure-fauteuil { animation: none !important; } }
@media (max-width: 560px) {
  .heures { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important; gap: 8px 6px !important; }
  .heure { padding: 8px 2px 6px !important; border-radius: 12px !important; }
  .heure-fauteuil { width: 32px; }
  .heure-plaque { font-size: .84rem; }
}

/* ---------- La vitrine : une photo qui descend mèche par mèche, que l'on écarte comme le rideau de l'entrée ---------- */
.vitrine { position: relative; margin: 0; padding-top: 20px; }
.vitrine-cadre { position: relative; aspect-ratio: 4 / 5; touch-action: pan-y; clip-path: inset(-24px -40px -60px -40px); }
.vitrine-photo { position: absolute; inset: 0; display: block; }
.vitrine-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foyer, 50% 35%); }
.vitrine-entiere { overflow: hidden; border-radius: 3px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 0 calc(100% - 14px)); }
.vitrine-meches { position: absolute; inset: 0; display: none; }
.vitrine-meche { position: absolute; top: 0; bottom: 0; left: calc(var(--k) * 100% / var(--n)); width: calc(100% / var(--n) + .5px); overflow: hidden; transform-origin: 50% 0; transform: translate3d(var(--dx, 0px), 0, 0) rotate(var(--rz, 0deg)); will-change: transform;
  clip-path: polygon(1px 0, calc(100% - 1px) 0, calc(100% - 1px) calc(100% - 34px + var(--l) * 3px), 50% calc(100% - 8px + var(--l) * 3px), 1px calc(100% - 34px + var(--l) * 3px)); }
.vitrine-meche .vitrine-photo { left: calc(var(--k) * -100%); right: auto; width: calc(var(--n) * 100% - var(--n) * .5px); }
.vitrine-meche::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(255, 255, 255, .05) 40%, transparent 60%, rgba(0, 0, 0, .08)); pointer-events: none; }
.vitrine-tringle { position: absolute; z-index: 2; left: -4%; right: -4%; top: -16px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #c48a4e, #8a5525 55%, #5e3814); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .45); }
.vitrine-tringle::before, .vitrine-tringle::after { content: ''; position: absolute; top: -5px; width: 12px; height: 22px; border-radius: 3px; background: linear-gradient(90deg, #4c2c10, #8a5525 50%, #4c2c10); }
.vitrine-tringle::before { left: -6px; }
.vitrine-tringle::after { right: -6px; }
.js .vitrine.est-prete .vitrine-meches { display: block; }
.js .vitrine.est-prete .vitrine-entiere { opacity: 0; }
.js .vitrine.est-prete .vitrine-meche { animation: meche-descend 1.15s var(--courbe) backwards; animation-delay: calc(var(--o, 0) * 55ms + 120ms); }
@keyframes meche-descend { 0% { transform: translate3d(0, -104%, 0) rotate(0deg); } 72% { transform: translate3d(0, 1.5%, 0) rotate(calc(var(--l) * .3deg)); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } }
.vitrine-fiche { position: absolute; z-index: 3; left: -14px; bottom: 34px; display: grid; gap: 2px; max-width: min(78%, 300px); padding: 18px 18px 14px; background: #FBF4EA; color: var(--encre); border-radius: 3px; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .75); transform: rotate(-3deg); font-size: .95rem; line-height: 1.3; }
.vitrine-fiche strong { font-family: var(--titre); font-style: italic; font-size: 1.3em; color: var(--vermillon-fonce); }
.vitrine-pince { position: absolute; left: 26px; top: -20px; width: 16px; height: 38px; border-radius: 4px 4px 6px 6px; background: linear-gradient(90deg, #6e4a2a, #b88552 45%, #6e4a2a); box-shadow: 0 4px 6px rgba(0, 0, 0, .35); }
.vitrine-pince::after { content: ''; position: absolute; left: 3px; right: 3px; top: 12px; height: 3px; border-radius: 1px; background: #3b2a1c; }
.js .vitrine.est-prete .vitrine-fiche { animation: fiche-pose .8s var(--courbe-ressort) 1.1s backwards; }
@keyframes fiche-pose { from { opacity: 0; transform: translateY(-26px) rotate(-11deg); } }
.vitrine-astuce { position: absolute; z-index: 3; right: 8px; top: 14px; padding: 7px 12px; border-radius: 6px; background: rgba(23, 18, 15, .78); color: #FBF4EA; font-size: .82rem; font-weight: 700; pointer-events: none; transition: opacity .5s; }
.vitrine.est-touchee .vitrine-astuce { opacity: 0; }
@media (min-width: 1024px) { .vitrine-fiche { left: -34px; bottom: 48px; font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { html[data-calme="1"] .vitrine-meche, html[data-calme="1"] .vitrine-fiche { animation: none !important; } }

/* ---------- Les têtes de page du salon ---------- */
.tete-salon { position: relative; background: #F4E9DA; padding-block: clamp(26px, 5vw, 64px) clamp(46px, 6vw, 84px); overflow: hidden; }
.tete-salon::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 79px, rgba(43, 29, 20, .045) 79px 80px); pointer-events: none; }
.tete-salon .tete-pole-in { position: relative; }
.tete-salon .tete-pole-visuel { width: min(84vw, 470px); padding-left: 10px; }
.tete-salon .titre-page { color: #2B1D14; }
@media (min-width: 1024px) {
  .tete-salon { min-height: min(calc(100svh - var(--entete)), 860px); display: grid; align-items: center; }
  .tete-salon .tete-pole-visuel { width: min(100%, 480px); justify-self: end; margin-right: 20px; }
  .tete-salon .vitrine-cadre { max-height: calc(100svh - var(--entete) - 120px); aspect-ratio: auto; height: min(600px, calc(100svh - var(--entete) - 120px)); }
}
.tete-salon-simple .tete-pole-visuel { width: min(84vw, 400px); }
@media (min-width: 1024px) { .tete-salon-simple { min-height: 0; } .tete-salon-simple .vitrine-cadre { height: min(440px, calc(100svh - var(--entete) - 140px)); } }

/* ---------- Plus aucune forme ronde : les photos sont des tirages, les boutons des carreaux ---------- */
:root { --feuille: 8px; }
.bouton-icone, .bouton-ajout, .reseaux a, .etape-num, .annonce button, .quantite button, .loge-fleche, .tel-carte .ic { border-radius: 12px !important; }
.bouton > .ic:first-child:not(.ic-fin) { border-radius: 8px !important; }
.temoignage-photo { border-radius: 8px !important; }
.maison-feuille { --r: 6px; aspect-ratio: 4 / 5 !important; }
.maison-cosmetique .maison-feuille { --r: 6px; }
.maison-feuille::before { border: 0 !important; border-radius: 4px !important; background: #E6D3B9; box-shadow: inset 0 0 0 1px rgba(43, 29, 20, .06); }
.maison-cosmetique .maison-feuille::before { background: #DCE6D8; }
.maison-academy .maison-feuille::before { background: #F0D5C6; }
.maison-photo { box-shadow: 0 0 0 5px #fff, 0 18px 30px -20px rgba(23, 18, 15, .6); }
.maison-nervure { display: none; }
.categorie-rond { border-radius: 8px !important; }

.categorie-rond, .formation-rond { box-shadow: 0 0 0 4px #fff, 0 12px 20px -12px rgba(23, 18, 15, .55) !important; transform: rotate(-2.5deg); }
.categorie:nth-child(even) .categorie-rond, .formation-ligne:nth-child(even) .formation-rond { transform: rotate(2deg); }

/* ---------- L'étagère du salon (Cosmétique) ---------- */
.etagere-zone { justify-self: center; width: min(92vw, 500px); display: grid; gap: 12px; }
.etagere { position: relative; display: grid; gap: 34px; padding: 18px 16px 6px; }
.etagere-rang { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 22px); align-items: end; padding: 0 8px; }
.etagere-rang::after { content: ''; position: absolute; left: -16px; right: -16px; bottom: -16px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #c99159 0, #a06a36 35%, #7a4a1f 100%); box-shadow: 0 16px 18px -12px rgba(43, 29, 20, .55), inset 0 2px 0 rgba(255, 255, 255, .25); }
.etagere-rang::before { content: ''; position: absolute; left: -16px; right: -16px; bottom: -16px; height: 46px; background: linear-gradient(180deg, transparent, rgba(43, 29, 20, .09)); pointer-events: none; }
.etagere-pot { position: relative; display: grid; text-decoration: none; color: var(--encre); transform-origin: 50% 100%; }
.etagere-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 0 0 3px #fff, 0 10px 14px -10px rgba(0, 0, 0, .6); transition: transform .4s var(--courbe-ressort); }
.etagere-photo img { width: 100%; height: 100%; object-fit: cover; }
.etagere-etiquette { position: absolute; left: 50%; top: calc(100% + 18px); z-index: 2; display: grid; width: max-content; max-width: 130%; padding: 6px 9px 6px; transform: translateX(-50%) rotate(var(--balance, -2deg)); transform-origin: 50% -14px; background: #FBF4EA; border-radius: 2px; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .5); font-size: .74rem; line-height: 1.15; text-align: center; }
.etagere-etiquette::before { content: ''; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px; background: #6b4a2b; }
.etagere-etiquette strong { font-family: var(--titre); font-style: italic; font-size: 1.05em; max-width: 12ch; }
.etagere-etiquette span { font-weight: 800; color: var(--vermillon-fonce); }
.etagere-pot:nth-child(2) .etagere-etiquette { --balance: 2.5deg; }
.etagere-pot:nth-child(3) .etagere-etiquette { --balance: -1deg; }
.etagere-pot:hover .etagere-photo, .etagere-pot:focus-visible .etagere-photo { transform: translateY(-8px) rotate(-1.5deg); }
.etagere-pot:hover .etagere-etiquette { animation: etiquette-balance 1.2s var(--courbe) both; }
@keyframes etiquette-balance { 0% { transform: translateX(-50%) rotate(var(--balance, -2deg)); } 25% { transform: translateX(-50%) rotate(12deg); } 50% { transform: translateX(-50%) rotate(-8deg); } 75% { transform: translateX(-50%) rotate(4deg); } 100% { transform: translateX(-50%) rotate(var(--balance, -2deg)); } }
.etagere-rang + .etagere-rang { margin-top: 62px; }
.etagere-legende { text-align: center; font-weight: 700; color: var(--gris); margin-top: 60px; }
.js .etagere.est-vue .etagere-pot { animation: pot-pose .7s var(--courbe-ressort) backwards; animation-delay: calc(var(--k) * 90ms + 150ms); }
@keyframes pot-pose { 0% { opacity: 0; transform: translateY(-60px) rotate(-6deg); } 60% { opacity: 1; transform: translateY(4px) scaleY(.96); } 100% { transform: none; } }
.js .etagere:not(.est-vue) .etagere-pot { opacity: 0; }
@media (min-width: 1024px) { .etagere-zone { justify-self: end; width: min(100%, 500px); } .etagere-etiquette { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { html[data-calme="1"] .etagere-pot { animation: none !important; opacity: 1 !important; } }

/* ---------- La galerie : les tirages scotchés au mur du salon ---------- */
.mosaique-mur { padding-top: 14px; }
.mosaique-mur .tuile { overflow: visible; border-radius: 2px; padding: 8px 8px 38px; margin-bottom: 26px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 16px 26px -18px rgba(23, 18, 15, .55); transform: rotate(var(--r, -1deg)); transition: transform .45s var(--courbe-ressort), box-shadow .45s; }
.mosaique-mur .tuile:nth-child(3n + 1) { --r: 1.3deg; }
.mosaique-mur .tuile:nth-child(3n + 2) { --r: -.6deg; }
.mosaique-mur .tuile:nth-child(4n) { --r: -1.8deg; }
.mosaique-mur .tuile img, .mosaique-mur .tuile video { display: block; border-radius: 1px; }
.mosaique-mur .tuile:hover img { transform: none; }
.mosaique-mur .tuile:hover, .mosaique-mur .tuile:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.015); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 26px 34px -20px rgba(23, 18, 15, .6); z-index: 2; }
.mosaique-mur .tuile-titre { left: 10px; right: 10px; bottom: 8px; padding: 0; border-radius: 0; background: none; opacity: 1; transform: none; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: .95rem; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile-pince { display: none; }
.mosaique-mur .tuile-pince { display: block; position: absolute; left: 50%; top: -12px; width: 74px; height: 22px; margin-left: -37px; background: rgba(233, 216, 184, .78); transform: rotate(calc(var(--r, -1deg) * -3)); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 20% 8%, 100% 0, 96% 12%, 100% 24%, 97% 40%, 100% 56%, 96% 72%, 100% 92%, 92% 100%, 86% 90%, 80% 100%, 0 100%, 3% 84%, 0 66%, 4% 50%, 0 32%, 3% 18%); }
.mosaique-mur .tuile-lecture { border-radius: 10px; }
.js .mosaique-mur .tuile { animation: tirage-colle .7s var(--courbe-ressort) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes tirage-colle { from { opacity: 0; transform: rotate(calc(var(--r, -1deg) * 6)) translateY(-24px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { html[data-calme="1"] .mosaique-mur .tuile { animation: none; } }
.branche { display: none !important; }

html { overflow-x: clip; }

/* La signature du site, en bout de pied de page */
.pied-signature { margin-left: auto; }
@media (max-width: 599px) { .pied-signature { margin-left: 0; flex-basis: 100%; } }

/* Les réseaux de chaque maison, sur la page Contact */
.contact-maison { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.contact-maison:last-child { border-bottom: 0; }
.contact-maison > span { font-weight: 700; }
.contact-maison .reseaux { flex: none; }