/* ==========================================================
   Cosy Coiffure — feuille de styles
   ========================================================== */

/* Polices hébergées localement (Fontsource, sous-ensemble latin) */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/sora-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/sora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/sora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }

:root {
  --bg: #F5F5F3;
  --surface: #FFFFFF;
  --ink: #151515;
  --ink-soft: #3A3A37;
  --muted: #5C5C58;
  --line: #DADAD6;
  --line-soft: #ECECE8;

  --blue: #102753;
  --blue-line: #2C4677;
  --on-blue: #F5F5F3;
  --on-blue-soft: #D6DDEA;
  --on-blue-muted: #B8C2D6;
  --on-blue-faint: #A9B5CC;


  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --container: 1200px;
  --gutter: 20px;
  --section-pad: 64px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.section--blue :focus-visible, .footer :focus-visible { outline-color: var(--on-blue); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-pad) 0; }
.section--white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--blue { background: var(--blue); color: var(--on-blue); }

h1, h2, h3 { margin: 0; }

.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--blue);
  color: #FFFFFF;
  font-weight: 500;
}
.btn:hover { color: #FFFFFF; opacity: 0.9; }

.link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 245, 243, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav {
  display: none;
  order: 3;
  width: 100%;
  flex-direction: column;
  font-size: 1rem;
}
.nav.is-open { display: flex; }
.nav a { padding: 12px 0; border-top: 1px solid var(--line); }

.header__actions { display: flex; align-items: center; gap: 8px; }

.phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9375rem;
}
.phone-btn span { display: none; }

.icon-btn {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

/* ---------- Accueil ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  padding-top: 48px;
  padding-bottom: var(--section-pad);
}

.hero__text {
  flex: 3 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.375rem, 5.5vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hero__lead { margin: 0; max-width: 620px; font-size: 1.0625rem; color: var(--ink-soft); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; }

.hero__image { position: relative; flex: 1 1 100%; min-width: 0; margin: 0; min-height: 280px; }
.hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* ---------- Qui sommes-nous ---------- */

.split { display: flex; flex-wrap: wrap; gap: 32px 80px; }
.split__head { flex: 1 1 300px; min-width: 0; }
.split__body {
  flex: 2 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
.split__body p { margin: 0; }

/* ---------- Tarifs ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
  margin-bottom: 24px;
}
.section-head p { margin: 0; max-width: 420px; font-size: 0.9375rem; }

.tabs { display: flex; gap: 8px; margin-bottom: 32px; }

.tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--blue); color: #FFFFFF; }

.price-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.price-col { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.price-cols--single .price-col { flex: 0 1 560px; }

.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px 8px;
}

.price-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.price-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  padding-bottom: 4px;
}
.price-table .note { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }
.price-table th[scope="col"] {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  padding: 8px 0 12px 8px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.price-table th[scope="col"]:first-child { text-align: left; padding-left: 0; }
.price-table th[scope="row"], .price-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
  text-align: left;
}
.price-table td { text-align: right; white-space: nowrap; padding-left: 8px; width: 64px; }
.price-table td:nth-child(2) { font-weight: 500; }
.price-table td:nth-child(3), .price-table td.na { color: var(--muted); }

/* ---------- Marques ---------- */

.brands-intro { flex: 2 1 480px; min-width: 0; margin: 0; font-size: 1.0625rem; color: var(--on-blue-soft); align-self: flex-end; }

.brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--blue-line);
  border-left: 1px solid var(--blue-line);
  margin-top: 32px;
}
.brand-card {
  border-right: 1px solid var(--blue-line);
  border-bottom: 1px solid var(--blue-line);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brand-card__name { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.02em; }
.brand-card__type { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-blue-muted); }
.brand-card__products { font-size: 0.9375rem; color: var(--on-blue-soft); }

/* ---------- Avis ---------- */

.rating { display: flex; align-items: center; gap: 16px; }
.rating__score { font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; }

.reviews-link { margin: 32px 0 0; }

/* ---------- Infos ---------- */

.infos { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 32px; }
.infos__details {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.infos__group { display: flex; flex-direction: column; gap: 28px; }
.infos h3 {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.infos p { margin: 0; font-size: 1.0625rem; }

.hours { margin: 0; display: grid; grid-template-columns: auto 1fr; font-size: 1rem; }
.hours dt, .hours dd { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.hours dd { margin: 0; text-align: right; }
.hours dt:last-of-type, .hours dd:last-of-type { border-bottom: 0; }
.hours .closed { color: var(--muted); }
.hours-note { margin-top: 16px !important; font-size: 0.875rem !important; color: var(--muted); }

.map { flex: 1 1 380px; min-width: 0; min-height: 280px; display: flex; flex-direction: column; gap: 12px; }
.map iframe { flex: 1; width: 100%; min-height: 280px; border: 0; border-radius: var(--radius); }

/* ---------- Pages légales ---------- */

.legal { max-width: 800px; }
.legal .title { margin-bottom: 12px; }
.legal > .muted { margin: 0 0 24px; font-size: 0.9375rem; }
.legal h2 {
  margin: 48px 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
}
.legal p, .legal ul { margin: 0 0 12px; color: var(--ink-soft); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.link-inline { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Footer ---------- */

.footer { background: var(--blue); color: var(--on-blue-soft); }
.footer__inner { padding-top: 48px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 32px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 64px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; font-size: 0.9375rem; }
.footer__brand .brand { color: var(--on-blue); }
.footer a { color: var(--on-blue-soft); }
.footer a:hover { color: #FFFFFF; }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 4px 48px; font-size: 0.9375rem; }
.footer__nav a { padding: 6px 0; }
.footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--blue-line);
  font-size: 0.8125rem;
  color: var(--on-blue-faint);
}
.footer__bottom a { color: var(--on-blue-faint); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ==========================================================
   Tablette et ordinateur (styles de base = mobile)
   ========================================================== */

@media (min-width: 901px) {
  :root { --gutter: 32px; --section-pad: 112px; }

  html { scroll-padding-top: 96px; }

  .header__inner { flex-wrap: nowrap; padding-top: 20px; padding-bottom: 20px; }
  .brand { font-size: 1.25rem; }
  .icon-btn { display: none; }
  .phone-btn { padding: 12px 20px; }
  .phone-btn span { display: inline; }

  .nav {
    display: flex;
    order: 0;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 28px;
    font-size: 0.9375rem;
  }
  .nav a { padding: 10px 0; border-top: 0; }

  .hero { padding-top: 96px; gap: 48px; }
  .hero__text { gap: 32px; }
  .hero__lead { font-size: 1.125rem; }
  .hero__image { flex-basis: 240px; min-height: 440px; }

  .section-head { margin-bottom: 56px; }

  .tab { flex: 0 1 auto; padding: 0 24px; }

  .price-cols { gap: 24px; }
  .price-col { flex-basis: 440px; gap: 24px; }
  .price-card { padding: 28px 28px 12px; }
  .price-table { font-size: 0.9375rem; }
  .price-table caption { font-size: 1.125rem; }
  .price-table th[scope="col"] { font-size: 0.75rem; padding-left: 12px; }
  .price-table td { width: 80px; padding-left: 12px; }

  .brands { margin-top: 56px; }
  .brand-card { padding: 40px 28px; }

  .rating__score { font-size: 2.5rem; }

  .infos { margin-top: 56px; gap: 48px; }
  .infos__details { gap: 40px; }
  .map { min-height: 420px; }
  .map iframe { min-height: 380px; }

  .footer__inner { padding-top: 64px; padding-bottom: 32px; gap: 48px; }
}