/* ============================================================
   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; }
/* 25 septembre : l'arche retiree (Krikor : « moins bien que tout le reste, quelle que soit
   l'activite ») ; elle coupait le haut de la photo. La photo du haut prend les coins
   arrondis des autres photos, et le client choisit la partie montree dans Ajuster. */
.portrait { border-radius: 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); }

/* >>> grilles creuses : genere, ne pas editer a la main >>> */
/* Ramene chaque grille au nombre d elements qu elle porte vraiment.
   Deux tuiles dans une rangee de quatre restaient calees a gauche,
   avec la moitie de la rangee vide : le defaut du 15 septembre. */
@media (min-width: 900px) {
  :root .texte__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
/* La rangee orpheline : trois cartes dans deux colonnes, deux en haut
   et une seule en bas. Le defaut du 17 septembre, vu sur le fleuriste.
   Quand le compte d elements laisse un seul element sur la derniere
   rangee, la grille prend une colonne de plus (ou de moins) pour que la
   derniere rangee en porte au moins deux. Colonnes egales seulement :
   une mise en page texte et image n est pas une grille de cartes. */
/* <<< grilles creuses <<< */