/* Atelier Coupe-Chou : identité « barbier » (charbon, crème, laiton, rouge barbier) */
@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --charbon: #17130f;
  --charbon-2: #231d17;
  --creme: #efe5d3;
  --creme-2: #e4d7c1;
  --laiton: #c39a55;
  --rouge: #a3292a;
  --texte: #2a231c;
  --titre: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font: 400 1.0625rem/1.6 var(--corps);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.section--sombre :focus-visible, .entete :focus-visible, .hero :focus-visible { outline-color: var(--laiton); }

.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .6rem 1rem; background: var(--laiton); color: var(--charbon); font-weight: 700; }
.evitement:focus { top: 3rem; }

.cadre { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: .95; letter-spacing: .02em; margin: 0 0 1rem; }
h1 { font-size: clamp(3.5rem, 2rem + 8vw, 8rem); }
h2 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); }
h3 { font-size: 2rem; }

.sur { margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--laiton); }
.sur--sombre { color: var(--rouge); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.4rem; border: 2px solid var(--laiton); font-family: var(--titre); font-size: 1.375rem; letter-spacing: .06em; text-decoration: none; transition: background-color .2s, color .2s, transform .2s; }
.btn--plein { background: var(--laiton); color: var(--charbon); }
.btn--plein:hover { background: var(--creme); border-color: var(--creme); }
.btn--trait { color: var(--creme); }
.btn--trait:hover { background: var(--creme); color: var(--charbon); border-color: var(--creme); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: var(--charbon); color: var(--creme); border-bottom: 1px solid rgba(195, 154, 85, .35); }
.entete__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 4.25rem; }
.marque { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--titre); font-size: 1.625rem; letter-spacing: .06em; text-decoration: none; color: var(--creme); }
.marque__rasoir { width: 2.4rem; color: var(--laiton); }
@media (min-width: 52.01rem) { .bouton-menu { display: none; } }
.bouton-menu { min-height: 2.75rem; padding: .4rem 1rem; border: 2px solid var(--laiton); background: none; color: var(--creme); font: 700 .875rem var(--corps); letter-spacing: .08em; text-transform: uppercase; }
.entete nav { display: flex; align-items: center; gap: 1.25rem; }
.entete nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.entete nav ul a { font-size: .9375rem; font-weight: 600; text-decoration: none; }
.entete nav ul a:hover { color: var(--laiton); }
.entete .btn { min-height: 2.5rem; padding: .4rem 1rem; font-size: 1.125rem; }
@media (max-width: 52rem) {
  .entete nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  .entete nav.est-ouvert { display: flex; }
  .entete nav ul { flex-direction: column; gap: 0; }
  .entete nav ul a { display: block; padding: .75rem 0; border-bottom: 1px solid rgba(239, 229, 211, .15); font-size: 1.125rem; }
}

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--charbon); color: var(--creme); padding-block: clamp(3rem, 6vw, 6rem); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--rouge) 0 14px, var(--creme) 14px 28px); }
.hero__grille { display: grid; gap: 3rem; align-items: center; }
.hero h1 span { color: var(--laiton); }
.hero__texte { max-width: 34rem; font-size: 1.125rem; color: #d9ccb6; margin-bottom: 2rem; }
.enseigne { position: relative; display: grid; place-items: center; min-height: 22rem; border: 2px solid rgba(195, 154, 85, .5); border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; background: radial-gradient(circle at 50% 35%, #2e261e, var(--charbon-2) 70%); padding: 2rem; }
.enseigne__poteau { position: absolute; left: 1.5rem; top: 2rem; bottom: 2rem; width: 18px; border-radius: 9px; background: repeating-linear-gradient(160deg, var(--rouge) 0 10px, var(--creme) 10px 20px, #2b4a6b 20px 30px, var(--creme) 30px 40px); box-shadow: 0 0 0 4px var(--charbon), 0 0 0 6px var(--laiton); }
.enseigne__rasoir { width: min(16rem, 80%); transform: rotate(-6deg); }
.enseigne__texte { margin: 1rem 0 0; font-family: var(--titre); font-size: 1.75rem; letter-spacing: .06em; color: var(--laiton); text-align: center; line-height: 1.05; }
@media (min-width: 52rem) { .hero__grille { grid-template-columns: 1.3fr 1fr; } }

/* Infos rapides */
.infos-rapides { background: var(--rouge); color: var(--creme); }
.infos-rapides ul { display: grid; gap: .5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); list-style: none; margin: 0; padding-block: 1.1rem; font-size: .9375rem; }
.infos-rapides strong { display: block; font-family: var(--titre); font-size: 1.5rem; font-weight: 400; letter-spacing: .05em; }

/* Sections */
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--sombre { background: var(--charbon); color: var(--creme); }
.section--creme { background: var(--creme-2); }
.deux { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .deux { grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; } }
.texte p { margin-top: 0; }
.points { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.points li { position: relative; padding: .7rem 0 .7rem 2rem; border-top: 1px solid #d2c2a6; }
.points li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 1rem; height: 1rem; background: var(--rouge); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Tarifs */
.tarifs { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 52rem) { .tarifs { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.tarifs h3 { color: var(--laiton); border-bottom: 2px solid var(--laiton); padding-bottom: .5rem; }
.tarifs dl { margin: 0; }
.tarifs dl div { display: flex; align-items: baseline; gap: .75rem; padding: .7rem 0; }
.tarifs dl div::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(239, 229, 211, .3); }
.tarifs dt { order: 0; }
.tarifs dd { order: 2; margin: 0; font-family: var(--titre); font-size: 1.625rem; color: var(--laiton); }
.note { margin: 2rem 0 0; font-size: .875rem; color: #b8a98f; }
.note--sombre { color: #6b5d4c; }

/* Galerie (illustrations en CSS) */
.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); list-style: none; margin: 2rem 0 0; padding: 0; }
.tuile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--charbon); }
.tuile span { position: absolute; left: 0; bottom: 0; padding: .4rem .8rem; background: var(--creme); color: var(--charbon); font-family: var(--titre); font-size: 1.25rem; letter-spacing: .05em; }
.tuile--rayures { background: repeating-linear-gradient(90deg, var(--charbon) 0 6px, #3a3027 6px 7px), var(--charbon); }
.tuile--rayures::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(195, 154, 85, .45)); }
.tuile--peigne { background: repeating-linear-gradient(90deg, var(--laiton) 0 4px, transparent 4px 12px) 50% 40% / 70% 30% no-repeat, linear-gradient(var(--laiton), var(--laiton)) 50% 30% / 74% 12% no-repeat, var(--charbon-2); }
.tuile--soleil { background: repeating-conic-gradient(from 0deg at 50% 60%, var(--rouge) 0 8deg, var(--charbon) 8deg 16deg); }
.tuile--damier { background: conic-gradient(var(--creme-2) 25%, var(--charbon) 0 50%, var(--creme-2) 0 75%, var(--charbon) 0) 0 0 / 3rem 3rem; }
.tuile--vagues { background: radial-gradient(circle at 50% 120%, transparent 30%, var(--laiton) 31% 34%, transparent 35%) 0 0 / 3rem 1.5rem, var(--charbon-2); }
.tuile--poteau { background: repeating-linear-gradient(135deg, var(--rouge) 0 18px, var(--creme) 18px 36px, #2b4a6b 36px 54px, var(--creme) 54px 72px); }

/* Horaires et plan */
.horaires { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
.horaires th, .horaires td { padding: .7rem 0; border-bottom: 1px solid #c9b796; text-align: left; }
.horaires td { text-align: right; font-weight: 600; }
.carte-plan svg { width: 100%; border: 3px solid var(--charbon); }

/* Réserver */
.reserver { text-align: center; }
.reserver p { margin: 0 auto 2rem; max-width: 30rem; color: #d9ccb6; }

/* Pied */
.pied { padding-block: 2rem; background: var(--charbon-2); color: #cdbfa6; font-size: .9375rem; }
.pied p { margin: .25rem 0; }
.pied a { color: var(--laiton); }