/* ============================================================
   FPRO - direction 3 - Classique
   Newsreader + Inter. Creme, filets fins, accueil centre avec
   medaillon, tarifs a points de conduite, petites capitales.
   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="3"] {
  --titres: 'Newsreader', Georgia, serif;
  --corps: 'Inter', system-ui, sans-serif;
  /* la couleur vient de la palette (themes.7.css) ; ici, la structure */
  --r: 0px;
  --largeur: 1040px;
}

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

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

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


/* --- 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 : Newsreader et Inter */
html[data-direction="3"], html[data-direction="3"][data-typo="a"] {
  --titres: 'Newsreader', Georgia, serif;
  --corps: 'Inter', system-ui, sans-serif;
}

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

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

body { font-size: 1rem; line-height: 1.7; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
h1 { font-size: clamp(2.8rem, 2rem + 4vw, 5rem); }
h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); }
h3 { font-size: 1.45rem; font-weight: 500; }
.etiq { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 18px; }

.bouton { padding: 14px 24px; font-size: .92rem; letter-spacing: .01em; border-color: var(--encre); color: var(--encre); }
.bouton--plein { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.bouton--plein:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.bouton--contour:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.bouton--discret { background: transparent; border-color: var(--encre); color: var(--encre); }
.bouton--discret:hover { background: var(--encre); color: var(--fond); }

/* en-tete */
.entete { background: var(--fond); }
.entete__in { min-height: 70px; }
.marque { font-family: var(--titres); font-size: 1.4rem; font-weight: 500; }
.marque__ligne { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
@media (max-width: 420px) { .marque__ligne { display: none; } }
.nav { gap: 22px; }
.nav a { color: var(--encre); font-size: .9rem; font-weight: 500; padding: 8px 0; }
.nav a:hover { text-decoration: underline; }
.entete .bouton { padding: 10px 18px; min-height: 40px; }

/* accueil : centre, medaillon au-dessus du nom */
/* L'ecart sous l'accueil appartient a l'accueil, pas a son voisin.
   Il valait 0 ici, parce que la bande de reperes qui suit apporte son propre
   ecart (voir « .chiffres » plus bas). Mais six metiers sur seize n'ont pas
   de bande de reperes du tout, electricien, macon, paysagiste, photographe,
   plombier, restaurant : sur ceux-la, plus rien ne remplissait le vide, et
   les boutons d'appel tombaient PILE sur le filet de la rubrique suivante.
   Mesure du 15 septembre sur un restaurant en direction 3 : 0 px sous les
   boutons, contre 132 px sous chacune des huit autres rubriques de la meme
   page. Le zero etait ecrit en dur, donc le defaut valait a toutes les
   largeurs d'ecran.
   L'ecart est donc pose ici, et retire a la bande de reperes quand elle suit
   l'accueil : les pages qui l'ont gardent exactement le rendu d'avant.
   La composition « aucun » est mise a part : elle a deja son propre ecart bas
   dans la feuille commune, plus specifique que celle-ci, et n'a jamais porte
   le defaut. La toucher ici changerait un rendu qui est juste. */
.accueil { text-align: center; }
html:not([data-compo="aucun"]) .accueil {
  padding-block: clamp(48px, 7vw, 96px) clamp(48px, 7vw, 80px);
}
.accueil__in { grid-template-columns: 1fr !important; gap: 0; }
.accueil__media { order: -1; margin-bottom: 32px; }
.portrait { width: clamp(150px, 22vw, 220px); aspect-ratio: 1; border-radius: 50%; margin-inline: auto !important; border: 1px solid var(--trait); }
.portrait img { object-position: center 18%; }
.accueil__sur { margin-inline: auto; }
.accueil h1 { margin-bottom: .25em; }
.accueil__sous { font-family: var(--titres); font-style: italic; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); max-width: 34ch; margin-inline: auto; }
.accueil__corps { max-width: 52ch; margin-inline: auto; }
/* Direction 3 respire plus large que les deux autres : 23 a 25 px entre deux
   blocs de texte, contre 20 ailleurs. Un pas de 32 px avant les boutons n'y
   etait donc pas un palier, c'etait la meme foulee. Mesure du 14 septembre :
   les seize metiers portaient ce defaut en direction 3, et aucun ailleurs,
   parce que cette ligne recouvrait la regle commune. */
.accueil__actions { justify-content: center; margin-top: 48px; }

/* chiffres : ligne a filet fort */
.chiffres { margin-top: clamp(48px, 7vw, 80px); }
/* ... sauf juste apres l'accueil, qui porte desormais cet ecart lui-meme.
   Sans cette ligne, les pages qui ont une bande de reperes verraient leur
   accueil respirer deux fois plus qu'avant, et la correction d'un defaut en
   fabriquerait un autre sur dix metiers. Meme mise a part pour « aucun » :
   la ou l'ecart bas n'a pas bouge, la marge de la bande ne bouge pas non plus. */
html:not([data-compo="aucun"]) .accueil + .chiffres { margin-top: 0; }
.chiffres__in { border-top: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait); }
.chiffre, .chiffre:nth-child(n) { text-align: center; padding: 22px 16px !important; }
.chiffre b { font-weight: 400; font-size: 1.7rem; margin-bottom: 4px; }
.chiffre span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 899.98px) { .chiffre b { font-size: clamp(1.05rem, 4.6vw, 1.5rem); } }

/* sections : creme et blanc borde, titres centres */
.section { border-top: 1px solid var(--trait); }
.accueil + .chiffres + .section { border-top: 0; }

/* accueil sans image : la direction 3 est centree, elle le reste. Deux
   colonnes de texte centre se lisent mal (les deux bords sont irreguliers) :
   ici le corps garde une seule colonne, et le filet de separation aussi. */
html[data-compo="aucun"] .accueil h1 { max-width: 20ch; margin-inline: auto; }
html[data-compo="aucun"] .accueil__sur { margin-inline: auto; }
@media (min-width: 900px) {
  html[data-compo="aucun"] .accueil__texte { display: block; }
  html[data-compo="aucun"] .accueil__corps {
    columns: 1;
    max-width: 56ch;
    margin-inline: auto;
  }
}
.section:nth-of-type(even) { background: var(--surface); }
/* 22 septembre : la teinte de bande, comme les rubriques « alt » ; dans la palette craie la
   surface est aussi blanche que le fond de page, et la rubrique d'accent disparaissait */
.section--accent { background: var(--bande, var(--surface)) !important; }
.section__tete { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.section__tete h2 { margin-bottom: 0; }
.section__tete .etiq { margin-bottom: 14px; }
.texte .section__corps { margin-inline: auto; }
.section--encadre .section__corps { border: 1px solid var(--trait-fort); padding: 32px; background: var(--surface); }
.cartes .section__corps { margin-inline: auto; }

/* praticien : titre a gauche cette fois, image et citation a droite */
@media (min-width: 900px) { .texte-media__in { grid-template-columns: 1fr 1.25fr; } }
.texte-media__media { order: -1; }
.texte-media .section__tete { text-align: left; margin-bottom: 24px; }
.figure img { border: 1px solid var(--trait); }
.figure figcaption { font-family: var(--titres); font-style: italic; text-align: center; font-size: 1rem; }
.citation { font-family: var(--titres); font-style: italic; font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); line-height: 1.32; text-align: center; margin-top: 40px; padding-top: 24px; position: relative; text-wrap: pretty; }
.citation::before { content: ''; position: absolute; top: 0; left: 50%; width: 48px; height: 1px; background: var(--trait-fort); transform: translateX(-50%); }

/* contenus */
ul.motifs { border: 0; columns: 1; column-gap: 56px; }
ul.motifs li { padding: 12px 0 12px 22px; position: relative; break-inside: avoid; }
ul.motifs li::before { content: '·'; position: absolute; left: 4px; top: 6px; font-family: var(--titres); font-size: 1.6rem; color: var(--accent); }
@media (min-width: 800px) { .motifs .section__corps { max-width: none; } ul.motifs { columns: 2; } }
.reserve { text-align: center; font-family: var(--titres); font-style: italic; font-size: 1rem; }

/* tarifs : points de conduite */
.t td { border: 0; padding: 12px 0; font-size: 1.05rem; }
.t tr { display: flex; align-items: baseline; gap: 8px; }
/* 27 septembre : un libelle long passe a la ligne au lieu de sortir de l ecran du telephone */
.t td:first-child { flex: 0 1 auto; min-width: 0; }
.t tr::after { content: ''; flex: 1; order: 1; border-bottom: 1px dotted var(--trait-fort); transform: translateY(-.35em); min-width: 24px; }
.t td:last-child { order: 2; font-weight: 500; font-size: 1.35rem; }
.t tbody { display: block; }
.t tr:last-child td { border: 0; }

.h td { padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--trait); }
.h tr:first-child td { border-top: 1px solid var(--trait-fort); }
.h td:first-child { font-family: var(--titres); font-size: 1.1rem; color: var(--encre); width: 40%; }
.adresse-forte { font-size: 1.6rem; }
.tel-fort { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.service, .tarif-carte { border-color: var(--trait-fort); background: var(--surface); }
.service__cle { letter-spacing: .16em; }

/* lieu */
.lieu { border: 1px solid var(--trait-fort); padding: 32px; background: var(--surface); }
.lieu .mention { font-family: var(--titres); font-style: italic; font-size: .95rem; }

/* formulaire : soulignes seulement */
.form label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 8px; }
.form input[type="text"], .form input[type="email"], .form textarea { border: 0; border-bottom: 1px solid var(--trait-fort); background: transparent; padding: 10px 0; border-radius: 0; }
.form input:focus, .form textarea:focus { box-shadow: none; border-bottom: 2px solid var(--accent); }
.form textarea { min-height: 110px; }
.consentement { margin: 12px 0 22px; }

/* pied */
.pied { border-top: 1px solid var(--trait-fort); }
.pied h2 { font-size: .72rem; letter-spacing: .18em; }

/* Les titres de rubrique sont centres dans cette direction, et « base » y
   centre deja la colonne des rubriques de texte. Les galeries, elles, ne
   l'etaient pas : un titre centre surplombait une colonne de photos et une
   note collees a gauche. Les rubriques propres a un metier (les menus d'un
   restaurant, par exemple) portent la meme correction dans leur feuille. */
.galerie .section__corps, .galerie__note { margin-inline: auto; }
.galerie__note { max-width: calc(var(--largeur-texte) / .85); }

/* >>> 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); }
}
:root .accueil__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 <<< */