/* ==========================================================================
   Thomas Alies — Ostéopathe à Joué-sur-Erdre
   Feuille de style unique. Les couleurs se règlent dans :root ci-dessous.
   ========================================================================== */

:root {
  --bandeau:  #8EA9AE;
  --beige:    #E2DED7;
  --blanc:    #F5F4F2;
  --encre:    #241811;
  --doux:     #6B5A4E;
  --noir:     #1B120C;
  --ligne:    #CFC8BE;
  --focus:    #2F5D68;

  --large:    1140px;
  --texte:    34rem;
  --air:      7rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 350;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.lien-evitement {
  position: absolute; left: -9999px;
  background: var(--noir); color: #fff; padding: .75rem 1.25rem; z-index: 200;
}
.lien-evitement:focus { left: 1rem; top: 1rem; }

/* --- En-tête -------------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--bandeau);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0 2.5rem; min-height: 68px;
}
.entete__nom {
  margin: 0; font-size: .95rem; font-weight: 400;
  letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entete__nom a { text-decoration: none; }

.nav { display: flex; align-items: center; gap: .4rem; }
.nav a {
  position: relative; display: block;
  padding: .6rem .2rem; margin: 0 .8rem;
  text-decoration: none; font-size: .72rem; font-weight: 400;
  letter-spacing: .17em; text-transform: uppercase;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .25rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after                { transform: scaleX(1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Le lien de prise de rendez-vous du menu suit la même logique que le
   bouton principal : plein sur tactile, contour sur appareil à souris. */
.nav a.nav__rdv {
  margin: 0 0 0 1.6rem;
  padding: .68rem 1.45rem;
  background: var(--noir);
  border: 1px solid var(--noir);
  color: #fff;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.nav a.nav__rdv::after { display: none; }
.nav a.nav__rdv:active { background: #3A2819; border-color: #3A2819; }

@media (hover: hover) and (pointer: fine) {
  .nav a.nav__rdv {
    background: transparent;
    border-color: var(--encre);
    color: var(--encre);
  }
  .nav a.nav__rdv:hover,
  .nav a.nav__rdv:focus-visible {
    background: var(--noir);
    border-color: var(--noir);
    color: #fff;
  }
}

.burger { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; color: inherit; }
.burger svg { display: block; width: 24px; height: 24px; }

/* --- Bandeau d'accueil ---------------------------------------------------- */

.banniere {
  position: relative;
  height: clamp(400px, 72vh, 720px);
  overflow: hidden; background: var(--beige);
}
.banniere img {
  width: 100%; height: 100%; object-fit: cover;
  animation: fondu-zoom 1.8s cubic-bezier(.2,.7,.3,1) both;
}
.banniere::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(27,18,12,.30) 0%, rgba(27,18,12,.10) 35%, rgba(27,18,12,.45) 100%);
}
.banniere__titre {
  position: absolute; left: 0; right: 0; bottom: 3.5rem; z-index: 2;
  margin: 0; padding: 0 2.5rem; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.banniere__nom {
  font-size: clamp(2.4rem, 7.5vw, 5.2rem);
  font-weight: 200; letter-spacing: .12em; line-height: 1; text-transform: uppercase;
  animation: fondu-monte 1.1s .35s cubic-bezier(.2,.7,.3,1) both;
}
.banniere__filet {
  width: 64px; height: 1px; background: rgba(255,255,255,.65);
  margin: 1.6rem 0 1.4rem;
  animation: filet 1s .8s cubic-bezier(.2,.7,.3,1) both;
}
.banniere__role {
  font-size: clamp(.72rem, 1.7vw, .92rem); font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  animation: fondu-monte 1.1s .6s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes fondu-zoom  { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
@keyframes fondu-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes filet       { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }

/* --- Apparition au défilement --------------------------------------------- */

.paraitre { opacity: 0; transform: translateY(30px); }
.paraitre.vu {
  opacity: 1; transform: none;
  transition: opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1);
}
.paraitre.vu.retard { transition-delay: .16s; }

/* --- Sections ------------------------------------------------------------- */

.section { padding: var(--air) 2.5rem; }
.section--beige { background: var(--beige); }
.section--blanc { background: var(--blanc); }
.section__interieur { max-width: var(--large); margin: 0 auto; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: center; }
.duo > div p, .duo > div ul { max-width: var(--texte); }

/* --- Titres --------------------------------------------------------------- */

h1, h2, h3 { margin: 0 0 1.75rem; font-weight: 250; }
h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
}
.section h2::after {
  content: ""; display: block; width: 44px; height: 1px;
  background: var(--ligne); margin-top: 1.6rem;
}
h3 {
  font-size: 1.05rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; margin: 2.75rem 0 1rem;
}
h3:first-of-type { margin-top: 0; }
p { margin: 0 0 1.5rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

/* --- Collage -------------------------------------------------------------- */

.collage { position: relative; }
.collage__fond { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.collage__sur {
  position: absolute; width: 44%; aspect-ratio: 3 / 4; object-fit: cover;
  right: 3%; bottom: -9%;
  box-shadow: 0 18px 45px rgba(27,18,12,.20);
  border: 6px solid var(--beige);
}
.section--blanc .collage__sur { border-color: var(--blanc); }

.visuel { margin: 0; }
.visuel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* --- Bouton --------------------------------------------------------------- */

/* Bouton par défaut : plein, donc toujours lisible.
   C'est ce que voient les appareils tactiles, qui ne survolent pas. */
.bouton {
  display: inline-block;
  background: var(--noir); color: #fff;
  border: 1px solid var(--noir);
  text-decoration: none; padding: 1.1rem 3rem;
  font-size: .74rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.bouton:active { background: #3A2819; border-color: #3A2819; }

/* Sur les appareils qui savent réellement survoler — souris ou pavé tactile —
   le bouton passe en contour fin et se remplit au survol.
   On interroge la capacité de l'appareil, pas la largeur de l'écran :
   un grand écran tactile ne survole pas davantage qu'un téléphone. */
@media (hover: hover) and (pointer: fine) {
  .bouton {
    background: transparent;
    color: var(--encre);
    border-color: var(--encre);
  }
  .bouton:hover,
  .bouton:focus-visible {
    background: var(--noir);
    border-color: var(--noir);
    color: #fff;
  }
}
.centre { text-align: center; }

/* --- Listes --------------------------------------------------------------- */

.liste-publics { list-style: none; margin: 0; padding: 0; }
.liste-publics li {
  margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ligne);
}
.liste-publics li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.infos { list-style: none; margin: 0 0 2rem; padding: 0; color: var(--doux); }
.infos li { margin-bottom: .55rem; }

/* --- Horaires ------------------------------------------------------------- */

.horaires { width: 100%; border-collapse: collapse; max-width: var(--texte); }
.horaires th, .horaires td {
  text-align: left; padding: .95rem 0; border-bottom: 1px solid var(--ligne); font-weight: 350;
}
.horaires th { width: 46%; letter-spacing: .04em; }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: 0; }
.horaires .ferme { color: var(--doux); }

/* --- Tarif ---------------------------------------------------------------- */

.prix {
  font-size: clamp(3.4rem, 10vw, 5.5rem);
  font-weight: 200; line-height: 1; letter-spacing: .02em; margin: 0 0 1rem;
}

/* --- Carte ---------------------------------------------------------------- */

.carte { width: 100%; aspect-ratio: 4 / 3; border: 0; filter: grayscale(.2); }

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

.avis { padding: var(--air) 2.5rem; background: var(--beige); }
.avis h2 { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); }
.avis h2::after { margin: 1.6rem auto 0; }

/* --- Texte long ----------------------------------------------------------- */

.texte { max-width: 40rem; }
.texte p { color: var(--doux); }
.texte h3 { color: var(--encre); }

/* --- Pied de page --------------------------------------------------------- */

.pied { background: var(--noir); color: #E4DED5; padding: 5rem 2.5rem 2.5rem; font-size: .875rem; line-height: 1.9; }
.pied__interieur {
  max-width: var(--large); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem;
}
.pied h2 { font-size: .68rem; font-weight: 400; letter-spacing: .22em; margin-bottom: 1.25rem; opacity: .55; }
.pied h2::after { display: none; }
.pied p { margin-bottom: .35rem; }
.pied a { text-decoration: none; opacity: .9; transition: opacity .3s ease; }
.pied a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pied__bas {
  max-width: var(--large); margin: 3.5rem auto 0; padding-top: 1.75rem;
  border-top: 1px solid rgba(228,222,213,.16);
  font-size: .74rem; letter-spacing: .08em; opacity: .5;
}

/* ============================ TABLETTE ==================================== */

@media (max-width: 900px) {
  :root { --air: 4.5rem; }
  .entete { padding: 0 1.5rem; min-height: 60px; }
  .entete__nom { font-size: .78rem; letter-spacing: .08em; }
  .burger { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bandeau); box-shadow: 0 16px 30px rgba(27,18,12,.18);
  }
  .nav.ouvert { display: flex; }
  .nav a { margin: 0; padding: 1.15rem 1.5rem; border-top: 1px solid rgba(27,18,12,.14); font-size: .8rem; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: rgba(27,18,12,.12); }
  .nav a.nav__rdv {
    margin: 0; border: 0; text-align: center;
    padding: 1.2rem 1.5rem; background: var(--noir); color: #fff;
  }
  .duo { grid-template-columns: 1fr; gap: 4.5rem; }
  .duo > div p, .duo > div ul { max-width: none; }
  .collage { margin-bottom: 3.5rem; }
  .banniere { height: clamp(360px, 62vh, 560px); }
  .banniere__titre { bottom: 2.75rem; }
}

/* ============================ TÉLÉPHONE =================================== */

@media (max-width: 600px) {
  :root { --air: 3.75rem; }
  body { font-size: 1rem; line-height: 1.75; }
  .section, .avis { padding: var(--air) 1.5rem; }

  /* Le portrait reste visible : vignette agrandie et ramenée dans le cadre. */
  .collage__fond { aspect-ratio: 1 / 1; }
  .collage__sur  { width: 46%; right: 0; bottom: -7%; border-width: 5px; }
  .collage { margin-bottom: 3rem; }

  .visuel img { aspect-ratio: 4 / 5; }
  .banniere { height: clamp(340px, 66vh, 480px); }
  .banniere__titre { bottom: 2.25rem; padding: 0 1.5rem; }
  .banniere__filet { margin: 1.1rem 0 1rem; }
  .bouton { display: block; text-align: center; padding: 1.1rem 1.5rem; }
  .pied { padding: 3.5rem 1.5rem 2rem; }
  .pied__interieur { gap: 2.5rem; }
}

/* --- Mouvement réduit ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .paraitre { opacity: 1; transform: none; }
}

/* --- Impression ----------------------------------------------------------- */

@media print {
  .entete, .burger, .bouton, .avis, .banniere { display: none; }
  body { background: #fff; }
  .section { padding: 1rem 0; }
  .paraitre { opacity: 1; transform: none; }
}