/* ==========================================================================
   Cabinet Chevassus, fondations.

   Parti pris, un carnet clinique. Fond papier légèrement vert, encre vert
   profond, filets d'un pixel plutôt que des ombres, empattements
   calligraphiques pour la voix du cabinet et linéale pour tout ce qui est
   factuel, les jours, les chiffres, les téléphones et les coordonnées.

   Motif unique du site, la semaine, une grille de jours remplie de prénoms sur
   les fiches cabinet. Les bandeaux en portaient aussi les filets verticaux,
   retirés parce qu'ils chargeaient le fond sans rien dire au visiteur.

   La feuille est découpée par responsabilité, un fichier par famille. base.html
   les appelle dans l'ordre du cascade, celui-ci d'abord, responsive.css et
   print.css en dernier. Aucun fichier ne redéfinit ce qu'un autre a posé, sauf
   ces deux là, c'est leur raison d'être.
   ========================================================================== */
:root {
  /* Palette imposée */
  --green: #1f7a5a;
  --green-dark: #12513b;
  --green-soft: #eaf5ef;
  --ink: #14201b;
  --muted: #55665e;
  --accent: #c2571f; /* réservé à Doctolib, et au contour de focus */
  --accent-strong: #bd541e; /* même teinte, un cran plus sombre, blanc sur fond à 4,7:1 */
  --white: #fff;
  --shadow: 0 24px 70px rgba(20, 32, 27, 0.14);

  /* Trois épaisseurs de filet, du plus discret au plus affirmé.
     --hairline sépare, --line encadre une étiquette, --control-line dessine le
     bord d'un bouton ou d'un lien cliquable et tient les 3:1 exigés sur les
     deux fonds de section. */
  --line: rgba(18, 81, 59, 0.4);
  --control-line: rgba(18, 81, 59, 0.74);

  /* Neutres dérivés de la même teinte, pour le fond de page */
  --paper: #f5faf7;
  --hairline: rgba(18, 81, 59, 0.4);
  --ink-soft: rgba(234, 245, 239, 0.72); /* texte secondaire sur fond vert */

  /* Surface d'une carte, et sa teinte au survol. Le survol s'éloigne toujours
     du fond de la section, jamais vers lui : sur fond papier il verdit, sur
     fond vert il fonce. Les sections redéfinissent ces deux valeurs, les
     composants n'écrivent plus aucune couleur de fond en dur. */
  --surface: #fff;
  --surface-hover: #dfeee7;

  /* Aplat plein, pastille ou vignette, qui doit se voir sur le fond de sa
     section quelle qu'elle soit. Les sections teintées le redéfinissent. */
  --tint: #dfeee7;

  /* Deux familles et pas une de plus, aucune police distante. La serif porte la
     voix du cabinet, la linéale tout le reste. --font-label n'est pas une
     troisième famille, c'est la linéale en petites capitales espacées, elle
     nomme les étiquettes pour que leur graisse et leur chasse se règlent en un
     seul endroit. */
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "P052", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: var(--font-body);

  --gutter: clamp(20px, 5vw, 76px);
  --measure: 1480px;
}

* {
  box-sizing: border-box;
}

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

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

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Texte réservé aux lecteurs d'écran, quand la couleur seule porte le sens. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 40;
  padding: 12px 20px;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   Typographie
   ========================================================================== */

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}

h1 {
  max-width: 16ch;
  margin-bottom: 22px;
  font-size: clamp(2.9rem, 7.4vw, 6rem);
}

h2 {
  max-width: 22ch;
  margin-bottom: 18px;
  font-size: clamp(1.95rem, 3.8vw, 3.1rem);
}

h3 {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Étiquette de section, chasse fixe et filet d'amorce. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--green);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  flex: none;
  background: currentcolor;
}

.lead {
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
}

.prose {
  max-width: 62ch;
}

.prose p {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 1.02rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Lien au fil d'une phrase. Il garde la taille et la chasse du texte qui le
   porte, seul le soulignement le signale, et il se coupe en fin de ligne comme
   un mot. À ne pas confondre avec .text-link, qui est un appel à l'action posé
   seul sur sa ligne. */
.prose a:not(.button) {
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  color: var(--green-dark);
  transition: background-size 260ms ease, color 200ms ease;
}

.prose a:not(.button):hover {
  background-size: 40% 1px;
  color: var(--green);
}

.prose-wide {
  max-width: 74ch;
}

.prose-wide p {
  font-size: clamp(1.04rem, 1.4vw, 1.16rem);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  color: var(--green-dark);
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: background-size 260ms ease, color 200ms ease;
}

.text-link:hover {
  background-size: 40% 1px;
  color: var(--green);
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Icônes
   ========================================================================== */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: inherit;
}

.icon-large {
  width: 26px;
  height: 26px;
  color: var(--green);
}

.doctolib-logo {
  max-height: 18px;
  width: auto;
}