/* ============================================================
   FPRO - direction 1 - Editoriale
   Source Serif 4 + Source Sans 3. Papier chaud, portrait en arche,
   citation en grand, section sombre pour la methode.
   Les polices sont servies depuis fpro.fr : aucun appel externe.
   Version 6 : Source Serif 4 remplace Fraunces
   ============================================================ */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-serif-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-serif-600.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-serif-400i.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-sans-600.woff2) format('woff2'); }

html[data-direction="1"] {
  --titres: 'Source Serif 4', Georgia, serif;
  --corps: 'Source Sans 3', system-ui, sans-serif;
  --r: 999px;
  --r-carte: 18px;
  /* neutres chauds, quelle que soit la palette d'accent */
  --fond: #f6f2ea;
  --fond-2: #efe9dd;
  --surface: #fffdf9;
  --encre: #1f1b17;
  --encre-2: #5b544c;
  --trait: #e2dacb;
  --trait-fort: #1f1b17;
}

body { font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 2rem + 3.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); }
h3 { font-size: 1.35rem; font-weight: 600; }
.etiq { font-family: var(--corps); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.bouton { padding: 14px 22px; }
.bouton--contour { border-color: var(--encre); }
.bouton--contour:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* en-tete */
.entete { background: var(--fond); }
.entete__in { min-height: 72px; }
.marque { font-family: var(--titres); font-size: 1.35rem; }
.marque span { font-size: .78rem; letter-spacing: .04em; margin-top: 3px; }
.nav a { border-radius: 999px; font-size: .95rem; }
.nav a:hover { background: var(--fond-2); }

/* accueil : l'arche */
.accueil__in { align-items: end; }
.accueil h1 em { font-style: italic; color: var(--accent); }
.accueil__sous { font-family: var(--titres); font-size: 1.25rem; }
.accueil__corps { font-size: 1.1rem; }
.portrait { border-radius: 999px 999px 18px 18px; }

/* chiffres */
.chiffres { background: var(--surface); border-block: 1px solid var(--trait); }
.chiffre b { font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); letter-spacing: -.02em; }
.chiffre span { letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 899.98px) { .chiffre b { font-size: clamp(1.05rem, 4.6vw, 1.5rem); } }

/* sections : alternance papier / blanc, methode en sombre */
.section:nth-of-type(odd) { background: var(--surface); }
.section--accent { background: var(--encre) !important; color: var(--fond); }
.section--accent h2 { color: #fff; }
.section--accent .etiq { color: var(--accent-clair); }
.section--accent .section__corps { color: rgba(246, 242, 234, .82); font-size: 1.1rem; }
.section--accent a { color: #fff; }
.section--accent ul.motifs li, .section--accent .t td { border-color: rgba(255, 255, 255, .22); }

/* sections texte : titre a gauche, corps a droite */
@media (min-width: 900px) {
  .texte__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
}
.section--encadre .section__corps { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 32px; }
.section--encadre { background: var(--fond-2) !important; }

/* praticien */
.figure { border-radius: var(--r-carte); }
.citation { font-family: var(--titres); font-style: italic; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); line-height: 1.32; color: var(--accent-fonce); padding-left: 22px; border-left: 3px solid var(--accent); text-wrap: pretty; }
.citation::before { content: '« '; }
.citation::after { content: ' »'; }

/* contenus */
.t td:last-child { font-size: 1.4rem; }
.t td, .h td { padding: 14px 0; }
ul.motifs { columns: 1; column-gap: 48px; }
ul.motifs li { break-inside: avoid; font-size: 1.05rem; }
@media (min-width: 900px) { ul.motifs { columns: 2; } }
.adresse-forte { font-size: 1.5rem; }
.tel-fort { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.02em; }
.service { border-radius: var(--r-carte); background: var(--surface); }
.tarif-carte { border-radius: var(--r-carte); background: var(--surface); }

/* lieu : carte pleine, couleur d'accent */
.lieu { background: var(--accent); color: var(--accent-contraste); border-radius: var(--r-carte); padding: 36px; }
.lieu h3 { color: #fff; font-weight: 400; font-size: 1.6rem; }
.lieu .bouton { background: #fff; color: var(--accent-fonce); }
.lieu .mention { color: rgba(255, 255, 255, .78); }

/* formulaire */
.form input[type="text"], .form input[type="email"], .form textarea { border-color: var(--trait); border-radius: 10px; }
.form label { letter-spacing: .02em; }

/* pied */
.pied { background: var(--fond); }