/* ============================================================
   FPRO - direction 2 - Clinique
   Manrope seule. Blanc, gris tres clair, un accent. Cartes arrondies,
   motifs en pastilles, tarifs en vignettes, contact sur fond sombre.
   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="2"] {
  --titres: 'Manrope', system-ui, sans-serif;
  --corps: 'Manrope', system-ui, sans-serif;
  /* la couleur vient de la palette (themes.7.css) ; ici, la structure */
  --r: 12px;
  --r-carte: 16px;
  --r-grand: 24px;
  --largeur: 1140px;
}

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

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/manrope-400.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-500.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-700.woff2) format('woff2'); }

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

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-400.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/newsreader-500.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-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 : Manrope seule */
html[data-direction="2"], html[data-direction="2"][data-typo="a"] {
  --titres: 'Manrope', system-ui, sans-serif;
  --corps: 'Manrope', system-ui, sans-serif;
}

/* duo b : Inter seule */
html[data-direction="2"][data-typo="b"] {
  --titres: 'Inter', system-ui, sans-serif;
  --corps: 'Inter', system-ui, sans-serif;
}

/* duo c : Newsreader et Manrope */
html[data-direction="2"][data-typo="c"] {
  --titres: 'Newsreader', Georgia, serif;
  --corps: 'Manrope', system-ui, sans-serif;
}
html[data-direction="2"][data-typo="c"] h1,
html[data-direction="2"][data-typo="c"] h2,
html[data-direction="2"][data-typo="c"] h3 { font-weight: 500; letter-spacing: -.015em; }

body { font-size: 1rem; line-height: 1.65; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 1.8rem + 3.6vw, 4.4rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.etiq { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.etiq::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
strong { font-weight: 700; }

.bouton { font-weight: 700; }
.bouton--contour { border-color: var(--trait); background: var(--surface); }
.bouton--contour:hover { border-color: var(--encre); background: var(--surface); color: var(--encre); }
.bouton svg { stroke-width: 2; }

/* en-tete */
.entete { background: var(--surface); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.marque { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; grid-template-columns: 32px auto; }
/* le carre decoratif tient lieu de signe tant que le client n'a pas de logo ;
   des qu'il en a un, c'est le logo qui prend la place, et le carre s'efface */
.marque::before { content: ''; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); box-shadow: inset 0 0 0 10px var(--accent), inset 0 0 0 16px var(--surface); }
.marque--logo { grid-template-columns: auto auto; }
.marque--logo::before { content: none; }
.marque__nom, .marque__ligne { grid-column: 2; }
.marque__ligne { font-weight: 500; font-size: .78rem; }
.nav a { font-size: .92rem; font-weight: 500; border-radius: 10px; }
.nav a:hover { background: var(--fond-2); }

/* accueil : photo arrondie et fiche d'adresse par-dessus */
.accueil { padding-bottom: clamp(48px, 6vw, 80px); }
.accueil__corps { font-size: 1.1rem; max-width: 56ch; }
.portrait { border-radius: var(--r-grand); }
.accueil__note {
  display: flex; gap: 12px; align-items: center;
  position: absolute; left: 0; right: 0; bottom: -22px; margin-inline: auto; max-width: 340px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(16, 21, 20, .08); font-size: .92rem; font-weight: 700;
}
.accueil__note svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899.98px) { .accueil__note { position: static; margin-top: 14px; max-width: none; box-shadow: none; } }

/* chiffres : en cartes */
.chiffres { padding-block: 32px 0; }
.chiffres__in { gap: 12px; }
.chiffre, .chiffre:nth-child(n) { background: var(--fond-2); border: 0 !important; border-radius: var(--r-carte); padding: 18px 20px !important; }
.chiffre b { font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: 0; order: 2; }
.chiffre span { font-size: .8rem; font-weight: 500; margin-bottom: 6px; }
.chiffre { display: flex; flex-direction: column; }

/* sections : blanc, une sur deux gris tres clair */
.section:nth-of-type(odd) { background: var(--fond-2); }
.section--accent { background: var(--fond-2) !important; }
.section--encadre { background: var(--fond) !important; }
.section--encadre .section__corps { background: var(--fond-2); border-radius: var(--r-carte); padding: 26px; }
.section__corps:has(> .t), .section__corps:has(> ul.motifs), .section__corps:has(> .services) { max-width: none; }

/* praticien */
.figure { border-radius: var(--r-grand); }
@media (min-width: 900px) { .texte-media__in { grid-template-columns: .9fr 1.1fr; } }
.texte-media__media { order: -1; }
.citation { font-size: 1.15rem; font-weight: 500; line-height: 1.5; color: var(--encre); background: var(--fond-2); border-radius: var(--r-carte); padding: 20px 22px; margin-top: 14px; }
.citation::before { content: '“'; color: var(--accent); font-size: 1.6em; line-height: 0; vertical-align: -.3em; margin-right: 4px; }

/* contenus */
ul.motifs { border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.motifs li { border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 11px 16px; font-size: .95rem; font-weight: 500; }
.section--accent ul.motifs li { background: var(--surface); }
.reserve { max-width: var(--largeur-texte); }
.section__corps { max-width: 68ch; }

/* tarifs en vignettes : le tableau devient une grille de cartes */
.t { display: grid; gap: 12px; margin-bottom: 24px; }
.t tbody { display: contents; }
.t tr { display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 20px; }
.t tr:first-child { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.t td, .t tr:last-child td { border: 0; padding: 0; }
.t td:first-child { font-weight: 500; font-size: .95rem; color: var(--encre-2); }
.t tr:first-child td:first-child { color: var(--accent-contraste); color: color-mix(in srgb, var(--accent-contraste) 86%, transparent); }
.t td:last-child { text-align: left; font-family: var(--titres); font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.t caption { display: none; }
@media (min-width: 700px) { .t { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .t { grid-template-columns: repeat(5, 1fr); } }
ul.infos-tarifs { display: grid; gap: 8px; }
@media (min-width: 800px) { ul.infos-tarifs { grid-template-columns: 1fr 1fr; } }

.h td:first-child { font-weight: 700; color: var(--encre); width: 36%; }
.adresse-forte { font-size: 1.25rem; font-weight: 700; }
.tel-fort { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; }
.service, .tarif-carte { border-radius: var(--r-carte); background: var(--surface); }

/* lieu */
.lieu { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); padding: 32px; }
.lieu h3 { font-size: 1.4rem; }
.lieu__adresse { font-size: 1.1rem; font-weight: 500; margin-bottom: 20px; }

/* contact sur fond sombre, formulaire en carte blanche */
.contact { background: var(--encre) !important; color: var(--encre-contraste); }
.contact h2, .contact .tel-fort a { color: var(--encre-contraste); }
.contact .etiq { color: var(--accent-clair); }
.contact .etiq::before { background: var(--accent-clair); }
.contact .section__corps { color: var(--encre-contraste); color: color-mix(in srgb, var(--encre-contraste) 80%, transparent); }
.contact .section__corps a { color: var(--encre-contraste); }
/* Le fond de la rubrique de contact est sombre dans cette direction. Les listes
   de coordonnees et de tarifs portent leur propre couleur, posee sur l'element
   lui-meme : elle l'emporte donc sur la couleur heritee de la rubrique, et le
   gris discret devenait du gris sombre sur fond sombre, mesure a 2,43 pour un
   seuil de 4,5. Le numero de telephone et l'adresse etaient les deux lignes
   concernees : exactement celles qu'on vient chercher. */
.contact ul.coordonnees li,
.contact ul.infos-tarifs li,
.contact .mention,
.contact small,
.contact dt { color: color-mix(in srgb, var(--encre-contraste) 78%, transparent); }
.contact .bouton--contour { border-color: color-mix(in srgb, var(--encre-contraste) 38%, transparent); color: var(--encre-contraste); background: transparent; }
.contact__in { align-items: center; }
.form { background: var(--surface); border-radius: var(--r-grand); padding: 28px; color: var(--encre); }
.form label { font-weight: 700; }
.form input[type="text"], .form input[type="email"], .form textarea { border-color: var(--trait); background: var(--fond-2); }
.form button { width: 100%; justify-content: center; }
.consentement { color: var(--encre-2); }

/* pied */
.pied h2 { font-size: .78rem; }

/* Cette direction elargit ses paragraphes a 68ch : une galerie d'une ou deux
   photos se centre dans la meme mesure, sinon elle flotte a cote du texte. */
.galerie__grille:not(:has(> :nth-child(3))) { max-width: 68ch; }