/* ---------- Polices (hébergées avec le site : aucun appel à Google) ---------- */
@font-face { font-family: "Open Sans Condensed"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/open-sans-condensed-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/open-sans-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 400 900; font-style: normal; font-display: swap;
  src: url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2"); }

/* ---------- Couleurs et mesures relevées sur le site Wix ---------- */
:root {
  --creme: #FFFBED;
  --jaune: #F7DA7C;
  --corail: #FC7572;
  --noir: #000;
  --texte: "Open Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --titre: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --u: 1px;                       /* unité : 1px sur ordinateur, s'adapte sur téléphone */
  --largeur: min(980px, 100% - 20px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 200px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--texte);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.4;
  color: var(--noir);
  background: #f3d9e0;
}

/* Fond marbré fixe (fonctionne aussi sur iPhone) */
.fond {
  position: fixed; inset: 0; z-index: -1;
  background: #f3d9e0 url("images/banniere.jpg") center / cover no-repeat;
}

.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: .5rem; top: .5rem; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; }

/* ---------- En-tête (reste collé en haut sur ordinateur) ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  width: var(--largeur); height: 176px; margin: 0 auto;
  padding-top: 4px;
  background: var(--creme);
  border-radius: 0 0 20px 20px;
  text-align: center;
}
.nom { margin: 0; height: 34px; line-height: 34px; font-weight: 700; font-size: 25px; text-transform: uppercase; }
.nom span, h2 span {
  display: inline-block; width: 350px; max-width: 100%;
  background: linear-gradient(var(--jaune), var(--jaune)) no-repeat 0 16px / 100% 20px;
}
h1 {
  margin: 26px 0 0; font-family: var(--titre); font-weight: 600; font-size: 35px; line-height: 46px;
  font-variation-settings: "opsz" 18; letter-spacing: .0466em; text-transform: uppercase; color: var(--corail);
}
.lieu { margin: -1px 0 0; font-weight: 700; font-size: 20px; line-height: 27px; letter-spacing: .05em; }

nav { display: flex; justify-content: center; gap: 0 30px; margin-top: 9px; }
nav a {
  font-weight: 700; font-size: 22px; line-height: 25px; text-transform: uppercase;
  color: var(--noir); text-decoration: none;
}
nav a:hover, nav a:focus-visible, nav a.actif { color: var(--jaune); }
.burger { display: none; }

/* ---------- Blocs de contenu ---------- */
main { display: block; padding-top: 38px; }
#art-therapie { padding-bottom: 77px; }
.bloc {
  width: var(--largeur); margin: 0 auto 41px;
  padding: 42px 150px 75px;
  background: var(--creme); border-radius: 20px;
}
h2 {
  margin: 0 0 50px; height: 33px; text-align: center;
  font-family: var(--titre); font-weight: 500; font-size: 25px; line-height: 33px;
  font-variation-settings: "opsz" 18; letter-spacing: .04em; text-transform: uppercase;
}
h2 span { background-position: 0 10px; }
.bloc p { margin: 0 0 28.67px; text-align: justify; line-height: 28.67px; }
.bloc p:last-child { margin-bottom: 0; }

#parcours { padding-top: 42px; padding-bottom: 37px; }
#parcours h2 { margin-bottom: 53px; }
#parcours p { margin-bottom: 18px; line-height: 30.25px; }
#parcours p:last-child { margin-bottom: 0; }

#prestations { padding-top: 43px; padding-bottom: 96px; margin-bottom: 50px; }
#prestations h2 { margin-bottom: 48px; }
.centre p, .centre p.espace { text-align: center; margin: 0; line-height: 29px; font-weight: 300; }
.centre strong { font-weight: 700; }
.centre p.espace { margin-top: 0; margin-bottom: 29px; }
.centre a { text-underline-offset: .15em; }
.centre a:hover { color: var(--corail); }
#prestations > p { line-height: 30.25px; margin: 0 0 0; }
#prestations > p:first-of-type { margin-top: 0; }
#prestations > p + p { margin-top: 0; }
ul { margin: 0; padding: 0; list-style: "- " inside; line-height: 30.25px; text-align: justify; }
li { margin: 0; }

/* ---------- Contact ---------- */
.bloc--contact { position: relative; margin-bottom: 0; border-radius: 20px 20px 0 0; padding: 40px 150px 56px; }
.bloc--contact h2 { margin-bottom: 37px; }
.coordonnees { margin: 0 !important; text-align: center !important; font-weight: 700; font-size: 18px; line-height: 25px; }
.coordonnees a { text-underline-offset: .15em; }
.coordonnees a:hover, .coordonnees a:focus-visible { color: var(--corail); }
.actions { display: flex; justify-content: center; margin: 32px 0 0 !important; }
.bouton {
  display: inline-block; background: var(--corail); color: #fff;
  font-weight: 700; font-size: 18px; line-height: 34px; text-decoration: none; text-transform: uppercase;
  width: 186px; text-align: center; border: 0;
  transition: background .15s;
}
.bouton:hover, .bouton:focus-visible { background: var(--noir); }

.reseaux { position: absolute; top: 44px; left: 742px; display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.reseaux li { margin: 0; }
.reseaux a { display: block; }
.reseaux svg { display: block; width: 30px; height: 30px; }
.reseaux circle:first-child { fill: var(--noir); }
.reseaux a:hover circle:first-child, .reseaux a:focus-visible circle:first-child { fill: var(--corail); }

/* ---------- Pied de page : bande jaune collée au bloc Contact ---------- */
.pied {
  width: var(--largeur); margin: 0 auto; height: 52px;
  background: var(--jaune); text-align: center; font-size: 15px; line-height: 52px;
}
.pied p { margin: 0; }
.pied a { text-underline-offset: .15em; }
.pied a:hover { color: var(--corail); }

/* ---------- Téléphones : même logique, tout se met à l'échelle ---------- */
@media (max-width: 750px) {
  :root { --u: calc(min(100vw, 560px) / 320); --largeur: calc(100% - 20 * var(--u)); }
  html { scroll-padding-top: calc(16 * var(--u)); }
  body { font-size: calc(18 * var(--u)); }

  .entete {
    position: relative; height: calc(90 * var(--u)); padding: calc(5 * var(--u)) calc(46 * var(--u)) 0 0;
    border-radius: 0 0 calc(20 * var(--u)) calc(20 * var(--u));
  }
  .nom { height: calc(24 * var(--u)); line-height: calc(24 * var(--u)); font-size: calc(17 * var(--u)); }
  .nom span, h2 span { width: calc(220 * var(--u)); background: linear-gradient(var(--jaune), var(--jaune)) no-repeat 0 calc(10 * var(--u)) / 100% calc(14 * var(--u)); }
  h1 { margin-top: calc(7 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); }
  .lieu { margin-top: 0; font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }

  .burger {
    display: block; position: absolute; top: calc(15 * var(--u)); right: calc(10 * var(--u));
    width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; color: var(--corail);
  }
  .burger svg { display: block; width: 100%; height: 100%; }
  nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8 * var(--u));
    flex-direction: column; align-items: center; gap: calc(10 * var(--u)); margin: 0;
    padding: calc(20 * var(--u)); background: var(--creme); border-radius: calc(20 * var(--u));
  }
  .menu-ouvert nav { display: flex; }
  nav a { font-size: calc(19 * var(--u)); line-height: calc(25 * var(--u)); }

  main { padding-top: calc(28 * var(--u)); }
  .bloc {
    margin-bottom: calc(31 * var(--u)); padding: calc(22 * var(--u)) calc(10 * var(--u)) calc(48 * var(--u));
    border-radius: calc(20 * var(--u));
  }
  h2 { margin-bottom: calc(18 * var(--u)); height: calc(25 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(25 * var(--u)); }
  h2 span { background-position: 0 calc(8 * var(--u)); }
  .bloc p { margin-bottom: calc(24 * var(--u)); line-height: 1.378; }

  #art-therapie { padding-bottom: calc(48 * var(--u)); }
  #parcours { padding-top: calc(22 * var(--u)); padding-bottom: calc(19 * var(--u)); }
  #parcours h2 { margin-bottom: calc(18 * var(--u)); }
  #parcours p { margin-bottom: calc(15 * var(--u)); line-height: 1.444; }
  #parcours p:last-child { margin-bottom: 0; }

  #prestations { padding: calc(22 * var(--u)) calc(14 * var(--u)) calc(49 * var(--u)); margin-bottom: calc(33 * var(--u)); text-align: center; }
  #prestations h2 { margin-bottom: calc(23 * var(--u)); }
  #prestations p, #prestations ul, .centre p { text-align: center; line-height: 1.444; }
  .centre p, .centre p.espace { line-height: 1.444; }
  .centre p { margin-bottom: 0; }
  .centre p.espace { margin-bottom: calc(25 * var(--u)); }
  #prestations > p { margin: 0; }
  ul { line-height: 1.444; text-align: center; }
  #prestations > p { line-height: 1.444; }

  .bloc--contact { padding: calc(23 * var(--u)) calc(10 * var(--u)) calc(30 * var(--u)); margin-bottom: 0; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; }
  .bloc--contact h2 { margin-bottom: calc(22 * var(--u)); }
  .reseaux { position: static; justify-content: center; margin: 0 0 calc(22 * var(--u)); gap: calc(6 * var(--u)); }
  .reseaux svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .coordonnees { font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); }
  .actions { margin-top: calc(22 * var(--u)) !important; }
  .bouton { width: calc(120 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(34 * var(--u)); }

  .pied { height: auto; min-height: calc(29 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)); }
}

@media print {
  .fond, .burger, .actions, .reseaux { display: none; }
  body { background: none; }
  .entete { position: static; }
}