/* Atkinson Hyperlegible : police dessinée pour les lecteurs malvoyants. */
@font-face {
  font-family: "Atkinson";
  src: url(/fonts/atkinson-next.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --soft: #eef5f0;
  --surface: #ffffff;
  --ink: #17241d;
  --muted: #475850;
  --line: #d6e1da;
  --accent: #0b7a45;
  --accent-hover: #08603a;
  --on-accent: #ffffff;
  --tint: #e1f0e6;
  /* Bandeau du haut et pied de page : vert foncé dans les deux thèmes. */
  --band: #0b5a35;
  --band-ink: #ffffff;
  --band-muted: #d5e9dc;
  --dot-open: #7be3a5;
  --dot-closed: #a9b8b0;
  --map-filter: grayscale(.5) contrast(1.05);
  --photo-filter: none;
  --radius: 12px;
  --radius-sm: 8px;
  /* Marge latérale, élargie en paysage pour ne pas passer sous l'encoche (viewport-fit=cover). */
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1713;
    --soft: #15211b;
    --surface: #1a2620;
    --ink: #e5ede8;
    --muted: #a9b9b0;
    --line: #2c3c34;
    --accent: #5cc98f;
    --accent-hover: #80d8a8;
    --on-accent: #062012;
    --tint: #1e3529;
    --band: #0a3d25;
    --map-filter: invert(.9) hue-rotate(180deg) grayscale(.5);
    --photo-filter: brightness(.85);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Mobile : pas d'agrandissement du texte en paysage, pas d'attente du double tap. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.125rem/1.6 "Atkinson", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.sprite { display: none; }
.nowrap { white-space: nowrap; }

.wrap { width: min(1160px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.skip { position: absolute; z-index: 1; left: 1rem; top: -4rem; padding: .5em 1em; border-radius: var(--radius-sm); background: var(--surface); }
.skip:focus { top: 1rem; }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .65rem 1.35rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Un bouton n'est pas du texte : pas de sélection à l'appui long, pas de flash gris au toucher. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s;
}
.btn-outline { background: transparent; color: var(--accent); }
/* Retour visuel dès l'appui, puisque le survol est réservé à la souris. */
.btn:active { border-color: var(--accent-hover); background: var(--accent-hover); translate: 0 1px; }
.btn-outline:active { border-color: var(--accent); background: var(--tint); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
  .btn-outline:hover { border-color: var(--accent); background: var(--tint); }
  .main-nav a:hover { border-bottom-color: var(--accent); color: var(--accent); }
}

/* Liens isolés : cible tactile d'au moins 44 px. */
.header-phone, .phone, .back, .main-nav a, .site-footer a, .actions > a:not(.btn), .ordo aside > a:not(.btn), .steps li > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
/* Barre fixée en bas des pages intérieures : mobile seulement, comme celle de l'accueil. */
.bottom-bar { display: none; }

/* Bandeau d'état, tout en haut */
.status-band { background: var(--band); color: var(--band-ink); }
.status { margin: 0; padding: .55rem var(--gutter); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; text-align: center; text-wrap: balance; }
.status[data-state]::before {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-right: .55em;
  border-radius: 50%;
  background: var(--dot-closed);
}
.status[data-state="open"]::before { background: var(--dot-open); box-shadow: 0 0 0 4px rgb(123 227 165 / .25); }

/* En-tête */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-main { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin-right: auto; color: var(--ink); font-size: 1.375rem; font-weight: 700; line-height: 1.15; text-decoration: none; }
.brand small { display: block; color: var(--muted); font-size: 1rem; font-weight: 400; }
.brand-mark { width: 36px; height: 36px; flex: none; fill: var(--accent); }
.header-phone { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.header-phone .icon { color: var(--accent); }
.main-nav { border-top: 1px solid var(--line); }
.main-nav .wrap { display: flex; flex-wrap: wrap; gap: 0 2rem; }
.main-nav a { min-height: 3rem; border-bottom: 3px solid transparent; color: var(--ink); font-weight: 600; line-height: 1.2; text-decoration: none; }
.main-nav a[aria-current] { border-bottom-color: var(--accent); color: var(--accent); }
/* Bouton « Menu » : mobile seulement. En large, la navigation reste toujours affichée. */
.menu { display: none; }

/* Accueil */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2rem, 5vw, 3.5rem); }
.hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); }
.lead { max-width: 32rem; margin: 0 0 1.75rem; color: var(--muted); font-size: 1.25rem; }
.hero-address { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; color: var(--muted); }
.hero-address .icon { color: var(--accent); }
.hero-photo { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--radius); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }

/* Bande de réassurance */
.reassure ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; margin: 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--soft); list-style: none; }
.reassure li { display: flex; align-items: center; gap: .85rem; }
.reassure p { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.badge { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: var(--tint); color: var(--accent); }
.badge .icon { width: 1.6rem; height: 1.6rem; }
.reassure .badge { background: var(--surface); }

/* Sections et cartes */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section :is(h1, h2) { margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
.section-lead { margin: 0 0 2rem; color: var(--muted); font-size: 1.1875rem; }
.card { padding: clamp(1.5rem, 3.5vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Ordonnance */
.ordo { display: grid; grid-template-columns: 1.6fr 1fr; align-items: start; gap: 1.5rem; }
.steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.steps h3 { margin: .3rem 0 .35rem; font-size: 1.1875rem; }
.steps p { margin: 0; color: var(--muted); }
.ordo-choice { grid-template-columns: minmax(0, 46rem); }
.ordo-summary { display: grid; align-self: stretch; align-content: start; justify-items: start; gap: 1rem; }
.ordo-summary p { margin: 0; font-size: 1.1875rem; }
.ordo aside { display: grid; justify-items: start; gap: 1rem; border-color: transparent; background: var(--soft); }
.ordo :is(aside, .ordo-summary) :is(h2, h3) { margin: 0; font-size: 1.3rem; }
.ordo aside p { margin: 0; }

/* Page ordonnance */
.page { padding-top: clamp(1rem, 3vw, 2rem); }
.back { gap: .4rem; margin-bottom: 1rem; font-weight: 600; }
.email-address {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: clamp(1.3rem, .9rem + 2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  -webkit-user-select: all; /* un clic ou un appui long sélectionne toute l'adresse */
  user-select: all;
}
.email-card .actions .btn { flex: 1 1 14rem; justify-content: center; }
.copy-feedback { min-height: 1.6em; margin: .75rem 0 0; color: var(--accent); font-weight: 700; }
:is(.email-card, .garde-card) h2 { margin: 1rem 0 1.25rem; font-size: 1.3rem; }
.ordo aside .phone, .actions .phone { margin: 0; }
.aside-hours { display: flex; gap: .6rem; }
.aside-hours .icon { margin-top: .2em; color: var(--accent); }

/* Page pharmacie de garde : étapes sourcées, numéros d'urgence */
.steps li > * { grid-column: 2; }
.steps li > a { justify-self: start; margin-top: .5rem; }
.garde-card h2:first-child { margin-top: 0; }
.garde-card h2:not(:first-child) { margin-top: 2.5rem; }
.steps .source, .garde-card > .source { margin: .4rem 0 0; color: var(--muted); font-size: 1rem; }
.note { margin: 1.75rem 0 0; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--soft); }
.urgences { display: grid; gap: .5rem; margin: 0 0 1.5rem; padding-left: 1.25rem; }
.urgences li::marker { color: var(--accent); }

/* Page services */
.service-group + .service-group { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.service-group h2 { margin-bottom: 1.25rem; font-size: 1.5rem; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.service img { width: 100%; height: auto; margin-bottom: 1.25rem; border-radius: var(--radius-sm); filter: var(--photo-filter); }
.service h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.service p { margin: 0 0 1rem; color: var(--muted); }
.service ul { display: grid; gap: .4rem; margin: 0; padding-left: 1.25rem; }
.service li::marker { color: var(--accent); }

/* Encadré sur bande claire : pharmacie de garde (accueil), question (services) */
.band { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--soft); }
.callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem; }
.callout h2 { margin: 0 0 .35rem; font-size: 1.5rem; }
.callout p { margin: 0; }

/* Horaires et accès */
.access { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem; }
.access h2 { margin-bottom: 1.25rem; }
address { font-style: normal; }
.access address { display: flex; align-items: flex-start; gap: .6rem; }
address .icon, .transit .icon { margin-top: .2em; color: var(--accent); }
.phone .icon { color: var(--accent); }
.phone { gap: .6rem; margin-top: .75rem; color: var(--ink); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.hours { display: grid; gap: .25rem; margin: 1.5rem 0; font-variant-numeric: tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .85rem; border-radius: var(--radius-sm); }
.hours dd { margin: 0; text-align: right; }
.hours [aria-current] { background: var(--tint); box-shadow: inset 4px 0 0 var(--accent); font-weight: 700; }
.transit { display: grid; gap: .5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.transit li { display: flex; gap: .6rem; }
.map { position: relative; min-height: 320px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; filter: var(--map-filter); }
.map figcaption { position: absolute; right: .5rem; bottom: .5rem; padding: 0 .45em; border-radius: 4px; background: var(--surface); color: var(--muted); font-size: .8125rem; }

/* Questions fréquentes (accueil) */
.faq { padding-top: 0; }
.faq h2 { margin-bottom: 1.25rem; }
.faq .card { max-width: 46rem; padding-block: .5rem; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { padding-block: 1rem; font-size: 1.1875rem; line-height: 1.35; }
.faq summary::marker { color: var(--accent); }
.faq details p { margin: 0 0 1.25rem; color: var(--muted); }

/* Pied de page */
.site-footer { background: var(--band); color: var(--band-muted); font-size: 1.0625rem; }
.site-footer a, .site-footer h2, .site-footer summary, .footer-brand { color: var(--band-ink); }
.site-footer :focus-visible { outline-color: var(--band-ink); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; padding-block: 2.75rem 2rem; }
.site-footer h2 { margin: 0 0 .75rem; font-size: 1.125rem; }
.site-footer p { margin: 0 0 .5rem; }
.site-footer ul { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 700; }
.footer-brand .brand-mark { width: 28px; height: 28px; fill: currentColor; }
.footer-legal { padding-block: .5rem 1.5rem; border-top: 1px solid rgb(255 255 255 / .2); }
summary { padding-block: .6rem; font-weight: 700; cursor: pointer; }
details p { max-width: 70ch; margin-top: .75rem; }
mark { padding: 0 .2em; background: #ffe58a; color: #1a1a1a; }

/* Tablette et mobile */
@media (max-width: 900px) {
  .hero, .ordo, .access { grid-template-columns: 1fr; }
  .callout { grid-template-columns: auto 1fr; }
  .callout .actions { grid-column: 1 / -1; }
  .reassure ul, .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .status { font-size: 1rem; }
  .header-cta { display: none; }
  .btn { padding-inline: 1rem; white-space: normal; }
  .card { padding: 1.25rem; }
  /* En-tête sur une ligne : le logo, puis le bouton Menu. Le téléphone est dans la barre fixée en bas. */
  .site-header { display: flex; flex-wrap: wrap; align-items: center; }
  .header-main { flex: 1; width: auto; min-width: 0; margin: 0 0 0 var(--gutter); padding-block: .75rem; }
  .brand { gap: .6rem; font-size: 1.125rem; text-wrap: balance; }
  .brand .brand-mark { width: 32px; height: 32px; }
  .header-phone { display: none; }
  .menu { display: block; margin: 0 var(--gutter) 0 .75rem; }
  .menu summary { padding-inline: .75rem; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--tint); }
  .menu[open] .i-list, .menu:not([open]) .i-x { display: none; }
  /* Navigation dépliée sous l'en-tête, dans le flux : une grande ligne par lien. */
  .main-nav { display: none; flex-basis: 100%; }
  .menu[open] + .main-nav { display: block; }
  .main-nav .wrap { flex-direction: column; gap: 0; width: auto; }
  .main-nav a { min-height: 3.5rem; padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a[aria-current] { border-bottom-color: var(--line); background: var(--tint); box-shadow: inset 4px 0 0 var(--accent); color: var(--ink); font-weight: 700; }
  .hero-photo { aspect-ratio: 16 / 9; }
  .callout { grid-template-columns: 1fr; justify-items: start; }
  .reassure ul, .footer-grid, .services { grid-template-columns: 1fr; }
  .map { min-height: 260px; }

  /* Les actions clés restent sous le pouce, dans une barre fixée en bas : accueil et pages intérieures. */
  .hero-actions, .bottom-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 2;
    flex-wrap: nowrap;
    gap: .5rem;
    padding: .5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .bottom-bar { display: flex; }
  .hero-actions .btn, .bottom-bar .btn { padding-inline: .75rem; font-size: 1rem; white-space: nowrap; }
  .hero-actions .btn:first-child, .bottom-bar .btn:first-child { flex: 1; justify-content: center; }
  /* Le numéro reste lu par les lecteurs d'écran, seule l'icône s'affiche. */
  .hero-actions .btn-outline span, .bottom-bar .btn-outline span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Place réservée en bas du pied de page : en fin de page, la barre ne cache rien. */
  body:has(.hero-actions, .bottom-bar) .site-footer { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}