/* Inter (SIL OFL 1.1, see fonts/OFL.txt), subset to the characters this page
   uses — new characters fall back to Arial until re-subset. */
@font-face {
  font-family: Inter;
  src: url(fonts/inter-400.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(fonts/inter-700.woff2) format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(fonts/inter-400i.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* Arial rescaled to Inter's metrics, so the swap doesn't reflow */
@font-face {
  font-family: "Inter fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 108%; ascent-override: 89.7%; descent-override: 22.3%; line-gap-override: 0%;
}

:root {
  --purple: #614793;
  --ink: #2c2833;
  --paper: #fbfaf7;  /* very lightly warm off-white */
  --sans: Inter, "Inter fallback", Arial, sans-serif;

  /* metric: every margin, padding and gap is a step of this scale */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s6: 3rem; --s8: 4rem;

  /* type: 1rem base, 1.25 ratio */
  --t-2: .75rem; --t-1: .875rem; --t1: 1.25rem; --t2: 1.5rem; --t3: 2rem;

  --measure: 76ch;  /* every block's box: the text column plus a gutter each side */
  --radius: 4px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 9rem }  /* nav wraps to 3 rows at 320px */
@media (width < 34em) { html { scroll-padding-top: 7rem } }  /* 2×2 nav: 2 × 2.6rem rows + padding */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  font: 400 1rem/1.6 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; border-radius: var(--radius) }
[hidden] { display: none }  /* load-bearing: the svg rule below would otherwise reveal the sprite */
svg {
  display: inline-block; width: 1.2em; height: 1.2em; margin-right: .4em; vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
a { color: var(--purple) }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }

h2, h3 { line-height: 1.2; color: var(--purple); text-wrap: balance }
h2 { font-size: var(--t2) }
h3 { font-size: var(--t1) }

p, ul, figure, address, img { margin-block: var(--s3) }
h2 { margin-block: var(--s6) var(--s3) }
h3 { margin-block: var(--s4) var(--s2) }
:where(header, nav, main, footer, section, figure, div, li) > :first-child { margin-block-start: 0 }
:where(header, nav, main, footer, section, figure, div, li) > :last-child { margin-block-end: 0 }

/* ---------------------------------- header, nav */

/* no inline padding: the banner fills the header edge to edge, so the gutter
   goes on the text children instead */
header {
  max-width: var(--measure);
  margin-inline: auto;
  padding-bottom: var(--s4);
  text-align: center;

  /* Artwork is aspect 2.1 in a 3.78 box: sized to the head's share of the
     height and anchored right, so the mane bleeds off the left as in the
     original. Clip is the original's diagonal, 92/531 of the height. */
  .banner {
    aspect-ratio: 5;
    background: var(--purple) url(imgs/banniere.svg) 40% 55% / auto 200% no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 82.7%, 0 100%);
  }
  h1 img { margin: var(--s4) auto 0 }  /* the h1 is just a box around the wordmark */
}

/* the bar keeps its own gutter as overhang instead of padding, so its rounded
   corners sit over empty margin and the page scrolls past under them unseen */
nav {
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: var(--measure);
  margin-inline: auto;
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--s1);
  background: var(--purple);

  /* the 4 links stop fitting on one row here; centring each wrapped row leaves
     them ragged, so switch to a 2×2 grid — equal columns, so the two links in
     each row share their edges instead of floating to their own widths */
  @media (width < 34em) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  a {
    padding: var(--s1) var(--s2);
    @media (width < 34em) { padding: calc(var(--s1) * .7) var(--s1) }
    border-radius: var(--radius);
    color: var(--paper);
    text-decoration: none;

    &:hover, &:focus-visible { background: rgb(255 255 255 / .15) }
    &.active { background: rgb(255 255 255 / .28) }  /* set by index.js; absent without JS */
  }

  /* lifts off the page once stuck, so content reads as passing under it.
     .stuck is set by index.js; without JS the bar just stays flat.
     Material dp4: a tight key shadow for the edge over a wide ambient one for
     the depth. Negative spreads cancel each blur's spill above the bar. */
  transition: box-shadow .25s ease-out;
  &.stuck {
    box-shadow:
      0 2px 4px -1px rgb(44 40 51 / .2),
      0 4px 10px -2px rgb(44 40 51 / .14),
      0 1px 0 rgb(44 40 51 / .06);  /* hairline: keeps the edge crisp against pale content */
  }
}

/* ---------------------------------- contents */

main {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s8) var(--s2);
}

section + section { margin-top: var(--s8) }

ul { padding-left: var(--s3) }
ul.plain { list-style: none; padding: 0 }
li + li { margin-top: var(--s1) }

.callout {
  padding-left: var(--s3);
  border-left: 2px solid var(--purple);

  p + p { margin-top: var(--s2) }
  svg { color: var(--purple) }
}

.label { display: inline-block; min-width: 14ch }
#tarifs .label { min-width: 22ch }  /* widest label is "Thérapie de couple :" */

/* full width on a phone; from there it stays at 20rem and centres, so the
   float at 52em picks it up at the same size instead of snapping */
.illustration { width: min(100%, 20rem); margin-inline: auto }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26ch, 1fr));
  gap: var(--s6) var(--s3);

  img { margin-inline: auto }               /* cell can be wider than the 450px source */
  h3 { margin-block: var(--s2); text-align: center }
  li + li { margin-top: var(--s1) }
}

address { font-style: normal }

main address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);

  .map { flex: 1 0 100%; line-height: 0 }  /* own row until 40em */
  .map img { display: block; width: 14rem; height: auto; margin: 0 auto; border-radius: var(--radius) }
  > div { flex: 1 1 20ch }
  svg { color: var(--purple) }
}

/* ---------------------------------- footer */

footer {
  max-width: var(--measure);
  margin: auto;
  padding: var(--s3) var(--s2) calc(var(--s1) + var(--s8));  /* extra clears the fixed phone bar */
  border-radius: var(--radius) var(--radius) 0 0;  /* square where it meets the page end */
  text-align: center;
  color: var(--paper);
  background: var(--purple);
  > * { font-size: var(--t-1) }  /* not on the footer itself: --measure is in ch, so the box must stay at 1rem */
  p, address { margin-block: var(--s1) }
  img { margin-inline: auto }
  /* inline-grid: block stays centered, the two numbers share a left edge */
  .ids { display: inline-grid; grid-template-columns: auto auto; gap: 0 1ch; text-align: left }
  a { color: inherit }
  /* fine print, but it keeps the footer's --t-1 and a high opacity: the RGPD
     notice has to stay legible to count as "intelligible" */
  .legal {
    margin-top: var(--s3);
    text-align: left;
    opacity: .85;

    + .legal { margin-top: 0 }  /* collapsed, the summaries' own padding is the gap */
    &[open] + .legal { margin-top: var(--s2) }
    /* padding, not line-height: 12px × 1.6 is a 19px line box, under the 24px
       minimum tap target */
    summary { padding-block: 3px; text-align: center; font-weight: 700; font-size: var(--t-2); cursor: pointer }
    h3 { margin-block: var(--s2) var(--s1); font-size: var(--t-1); color: inherit }
  }
}

/* Fixed contact bar, phone only */
.contact {
  display: flex;
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  border-radius: var(--radius) var(--radius) 0 0;  /* square where it meets the viewport bottom */
  background: var(--purple);

  /* same Material dp4 pair as the nav, mirrored: the page scrolls under its top edge */
  box-shadow:
    0 -2px 4px -1px rgb(44 40 51 / .2),
    0 -4px 10px -2px rgb(44 40 51 / .14),
    0 -1px 0 rgb(44 40 51 / .06);

  a {
    flex: 1;
    padding: var(--s2);
    text-align: center;
    color: var(--paper);
    text-decoration: none;
    border-radius: inherit;  /* else the link background squares off the corners */

    + a { border-left: 1px solid rgb(255 255 255 / .25) }
  }
}

@media (min-width: 40em) {
  html { scroll-padding-top: var(--s8) }

  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: var(--s1) var(--s4);
    padding-bottom: var(--s1);
    text-align: left;

    img { margin-inline: 0 }
    .ids, .legal { grid-column: 1 / -1 }
  }

  .contact { display: none }

  main address .map { flex: none }  /* back beside the text */
  main address .map img { margin: 0 }
}

/* floats once the column is wide enough to keep a readable wrap beside it */
@media (min-width: 52em) {
  .illustration { float: right; margin: 0 0 var(--s3) var(--s3) }
}