/* ============================================================
   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: auto; }
/*
 * Decision du 21 septembre : plus de carre decoratif.
 *
 * La direction 2 dessinait un carre a l'accent, 32 px, a gauche du nom, tant
 * que le client n'avait pas de logo. L'intention etait de donner un signe a
 * qui n'en a pas. A l'usage il ne fait pas signe, il fait gabarit : les deux
 * demos en direction 2 portaient le meme carre, a la couleur pres, et ca se
 * voyait comme un logo par defaut.
 *
 * Sans logo, le nom seul, comme en direction 1. Le client qui veut un signe
 * importe ou compose le sien, et c'est le sien qui s'affiche.
 */
.marque::before { content: none; }
.marque--logo { grid-template-columns: auto auto; }
.marque--logo::before { content: none; }
.marque__nom, .marque__ligne { grid-column: 1; }
.marque--logo .marque__nom, .marque--logo .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 */
/* Meme defaut que l'accueil de la direction 3, trouve le meme jour par le
   meme controle : l'ecart bas valait 0, et la bande comptait sur la rubrique
   suivante pour respirer. Sauf qu'ici les reperes sont des CARTES a coins
   arrondis, et que la rubrique suivante porte une couleur de fond. Mesure du
   15 septembre sur une boulangerie : le bas des cartes et le haut de la
   rubrique suivante tombaient au meme pixel, avec exactement la meme couleur
   de fond (242, 237, 227). Les cartes perdaient donc leurs coins arrondis du
   bas et paraissaient a moitie enfoncees dans la rubrique d'en dessous.
   Une carte se detache de ce qui l'entoure ou elle n'est pas une carte. */
.chiffres { padding-block: 32px 32px; }
.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); }
/* 22 septembre : --fond-2 seul etait trop proche du fond de l'accueil, et
   les deux premieres rubriques se lisaient comme une seule. On l'assombrit
   d'une touche d'accent, toujours dans la palette. */
.section--accent { background: color-mix(in srgb, var(--fond-2) 89%, var(--accent)) !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; }

/* >>> 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-media__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) {
  :root .t:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .t:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  :root .t:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .t:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .t:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .t:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 800px) {
  :root ul.infos-tarifs:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
:root .marque:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
:root .marque--logo: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. */
@media (min-width: 700px) {
  :root .t:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .t:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .t:has(> :nth-child(10):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .t:has(> :nth-child(13):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  :root .t:has(> :nth-child(6):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .t:has(> :nth-child(11):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  :root ul.infos-tarifs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root ul.infos-tarifs:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root ul.infos-tarifs:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root ul.infos-tarifs:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root ul.infos-tarifs:has(> :nth-child(11):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root ul.infos-tarifs:has(> :nth-child(13):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* <<< grilles creuses <<< */

/* Deux photos se partagent une largeur plus genereuse que la mesure du texte,
   et leur plafond de hauteur monte de 380 a 460 px : a deux, chacune tenait
   dans 300 px de large et la galerie flottait dans le vide.
   Vu le 22 septembre sur le plombier. Une photo seule garde la mesure. */
.galerie__grille:has(> :nth-child(2):last-child) { max-width: 820px; }
.galerie__grille:has(> :nth-child(2):last-child) > .galerie__item { width: min(calc(460px * var(--ratio)), calc((100% - var(--ecart)) / 2)); }

/* Sur le fond assombri des rubriques en couleur, l'etiquette passe a l'accent
   fonce : a l'accent simple elle tombait a 4,15 pour 1 chez le plombier. */
.section--accent .etiq { color: var(--accent-fonce); }