/* ============================================================
   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 7 : la couleur est partie dans themes.css, trois duos typographiques
   ============================================================ */


html[data-direction="1"] {
  --titres: 'Source Serif 4', Georgia, serif;
  --corps: 'Source Sans 3', system-ui, sans-serif;
  /* la couleur vient de la palette (themes.7.css) ; ici, la structure */
  --r: 999px;
  --r-carte: 18px;
}

/* --- Les familles utilisables par cette direction ------------------------- */

@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'); }

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fraunces-400.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/fraunces-600.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/fraunces-400i.woff2) format('woff2'); }


/* --- Duos typographiques -------------------------------------------------
   Une direction, plusieurs voix. Le duo est tire au sort comme la palette,
   et deux confreres de la meme ville n'ont jamais le meme.
   -------------------------------------------------------------------------- */

/* duo a : Source Serif 4 et Source Sans 3 */
html[data-direction="1"], html[data-direction="1"][data-typo="a"] {
  --titres: 'Source Serif 4', Georgia, serif;
  --corps: 'Source Sans 3', system-ui, sans-serif;
}

/* duo b : Fraunces et Source Sans 3 */
html[data-direction="1"][data-typo="b"] {
  --titres: 'Fraunces', Georgia, serif;
  --corps: 'Source Sans 3', system-ui, sans-serif;
}
html[data-direction="1"][data-typo="b"] h1 { letter-spacing: -.025em; }

/* duo c : Tout en Source Serif 4 */
html[data-direction="1"][data-typo="c"] {
  --titres: 'Source Serif 4', Georgia, serif;
  --corps: 'Source Serif 4', Georgia, serif;
}
html[data-direction="1"][data-typo="c"] body { font-size: 1.09rem; line-height: 1.66; }
html[data-direction="1"][data-typo="c"] .bouton,
html[data-direction="1"][data-typo="c"] .nav,
html[data-direction="1"][data-typo="c"] .etiq,
html[data-direction="1"][data-typo="c"] .barre-mobile,
html[data-direction="1"][data-typo="c"] .champ label { font-family: 'Source Sans 3', system-ui, sans-serif; }

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__ligne { 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: var(--encre-contraste); }
.section--accent .etiq { color: var(--accent-clair); }
.section--accent .section__corps { color: color-mix(in srgb, var(--encre-contraste) 84%, transparent); font-size: 1.1rem; }
.section--accent a { color: var(--encre-contraste); }
.section--accent ul.motifs li, .section--accent .t td { border-color: color-mix(in srgb, var(--encre-contraste) 24%, transparent); }
/* Dans cette direction, une rubrique en pleine couleur a un fond d'encre. Tout
   ce qui est ecrit en gris « discret » y devient illisible : gris sombre sur
   fond sombre, mesure a 2,65 alors qu'il faut 4,5. Chaque pack corrigeait le
   cas d'UNE de ses rubriques (« .lieu .mention ») et laissait passer les
   autres, le restaurant en tete. La correction est ecrite ici une fois, pour
   toutes les mentions, quel que soit le metier. */
.section--accent .mention,
.section--accent small,
.section--accent figcaption,
.section--accent dt,
.section--accent ul.infos-tarifs li,
.section--accent ul.coordonnees li,
.section--accent .reserve { color: color-mix(in srgb, var(--encre-contraste) 74%, transparent); }

/* 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; }
  .texte__in > .texte__citation { grid-column: 2; }
}
.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; }

/* Une rubrique peut porter les DEUX traitements : le pack la declare encadree,
   et la composition tiree la designe comme la rubrique en pleine couleur. En
   direction 1, l'accent pose un fond d'encre avec un texte clair, l'encadre
   pose un fond clair avec une carte blanche : ensemble, cela donnait un texte
   clair sur une carte blanche, c'est-a-dire une rubrique entierement
   invisible. Vu le 14 septembre sur la rubrique « La seance » d'un
   osteopathe : le titre, les questions et les reponses avaient disparu.
   L'encadre l'emporte, parce que c'est lui qui pose le fond que le lecteur
   voit ; les couleurs de l'accent sont donc annulees. */
.section--accent.section--encadre { color: var(--encre); }
.section--accent.section--encadre h2,
.section--accent.section--encadre a,
.section--accent.section--encadre .section__corps strong { color: var(--encre); }
.section--accent.section--encadre .section__corps { color: var(--encre-2); }
.section--accent.section--encadre .etiq { color: var(--accent-fonce); }
.section--accent.section--encadre ul.motifs li,
.section--accent.section--encadre .t td,
.section--accent.section--encadre .faq > div { border-color: var(--trait); }
.section--accent.section--encadre dt { color: var(--encre-2); }
.section--accent.section--encadre dd { color: var(--encre); }

/* 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: var(--accent-contraste); font-weight: 400; font-size: 1.6rem; }
.lieu .bouton { background: var(--accent-contraste); color: var(--accent-fonce); }
.lieu .mention { color: color-mix(in srgb, var(--accent-contraste) 80%, transparent); }

/* 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); }