/* ============================================================
   FPRO - base.css - commun a tous les sites, toutes directions
   Ne porte que la structure : grilles, positions, responsive,
   accessibilite, formulaires. L'allure (polices, couleurs, rayons,
   filets) vient de direction-N.css, les couleurs d'accent de themes.css.
   Version 5
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --gouttiere: 24px;
  --largeur: 1120px;
  --largeur-texte: 62ch;
  --r: 12px;
  --t-rapide: .15s ease;
  --titres: Georgia, serif;
  --corps: system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
img { background: var(--accent-clair); }

h1, h2, h3, h4 {
  font-family: var(--titres);
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child { margin-bottom: 0; }
a { color: var(--accent-fonce); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-clair); color: var(--encre); }

/* --- utilitaires ---------------------------------------------------------- */

.contenant { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.evite { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: var(--gouttiere); top: -100px; z-index: 100; background: var(--accent); color: var(--accent-contraste); padding: 10px 16px; border-radius: 8px; transition: top var(--t-rapide); }
.lien-evitement:focus { top: 10px; }
.etiq { display: block; margin: 0 0 14px; }
.mention { font-size: .85rem; color: var(--encre-2); }
/* Sur un telephone etroit, un titre de metier peut etre plus large que
   l'ecran a lui seul : « Kinesitherapeute » fait seize lettres, et a la taille
   prevue il sortait de la page. Deux mesures, dans cet ordre. D'abord le titre
   descend d'un cran en dessous de 420 pixels : a cette taille, le mot le plus
   long du metier tient dans la colonne, et rien ne se coupe. Ensuite seulement,
   et uniquement si cela ne suffisait pas, le mot se coupe plutot que de faire
   defiler la page de travers ; on a vu « Kinesitherap / eute a Tours » avant
   d'ajouter la premiere mesure, et cela se lit comme une page cassee.
   La ligne de signature de l'enseigne s'efface aussi : la barre haute est
   collante, et trois lignes de nom plus deux de signature mangeaient un
   cinquieme de l'ecran. C'est la regle deja retenue pour la marque FPRO. */
@media (max-width: 420px) {
  .accueil h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
  .accueil h1, .section__tete h2 { overflow-wrap: anywhere; }
}
h1, h2, h3, .etiq, .accueil__sur { overflow-wrap: break-word; }

.mesure { max-width: var(--largeur-texte); }
.contenant.mesure { max-width: calc(var(--largeur-texte) + 2 * var(--gouttiere)); }
/* pages annexes (mentions, confidentialite) : un titre de page, pas un titre d'accueil */
.section .mesure h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); margin-bottom: 1em; }
.section .mesure h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-top: 1.6em; }
[id] { scroll-margin-top: 84px; }

/* --- boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--corps); font-size: .95rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide), transform var(--t-rapide);
}
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton--plein { background: var(--accent); color: var(--accent-contraste); }
.bouton--plein:hover { background: var(--accent-fonce); color: var(--accent-contraste); }
.bouton--contour { border-color: var(--trait-fort); color: var(--encre); background: transparent; }
.bouton--contour:hover { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-clair); }
.bouton--discret { background: var(--accent-clair); color: var(--accent-fonce); }
.bouton--discret:hover { background: var(--accent); color: var(--accent-contraste); }
.boutons, .accueil__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- en-tete -------------------------------------------------------------- */

.entete { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--trait); }
.entete__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
/* La marque : le nom, sa ligne, et depuis la version 9 un logo facultatif.
   Le logo se pose a gauche, sur les deux rangees, et le nom reste ecrit : un
   logo accompagne un nom, il le remplace rarement, et la regle tient pour
   n'importe quelle forme de logo, carre, rond ou longue marque horizontale.
   Sans logo, la grille n'a qu'une colonne et rien ne change a l'ecran. */
.marque { color: var(--encre); text-decoration: none; margin-right: auto; line-height: 1.1;
  display: grid; grid-template-columns: auto; align-items: center; column-gap: 10px; }
.marque__nom { display: block; }
.marque__ligne { display: block; font-family: var(--corps); font-weight: 400; color: var(--encre-2); }
/* La barre haute est collante : sur un telephone etroit, trois lignes de nom
   plus deux de signature mangeaient un cinquieme de l'ecran. La signature
   s'efface, comme elle le fait deja pour la marque FPRO sur la vitrine. */
@media (max-width: 420px) { .marque__ligne { display: none; } }
.marque--logo { grid-template-columns: auto auto; }
.marque__logo { grid-row: 1 / span 2; grid-column: 1; display: block; height: 36px; }
.marque__logo img, .marque__logo svg { display: block; height: 100%; width: auto; max-width: 140px; object-fit: contain; }
.marque--logo .marque__nom, .marque--logo .marque__ligne { grid-column: 2; }
/* Un libelle de menu ne se coupe jamais en deux. Sans cette regle, les liens
   sont des elements flexibles qui retrecissent jusqu'a leur plus petit mot des
   que l'enseigne est longue : a 1600 pixels, une boulangerie affichait « Les /
   pains », « La / vitrine », « Le / fournil », et son numero de telephone
   coupe en deux dans le bouton d'appel. C'est la barre entiere qui passe a la
   ligne quand la place manque, jamais un mot. */
.nav { display: none; flex-wrap: wrap; }
.nav a { color: var(--encre-2); text-decoration: none; padding: 8px 12px; white-space: nowrap; }
.entete .bouton { white-space: nowrap; }
.nav a:hover { color: var(--encre); }
.entete .bouton { display: none; }
@media (min-width: 960px) {
  .nav { display: flex; gap: 2px; }
  .entete .bouton { display: inline-flex; }
  .nav { min-width: 0; }
}
/* Entre 960 et 1180 pixels, une enseigne longue, huit ou neuf entrees de
   menu et le bouton d'appel ne tiennent pas sur une ligne : la barre
   debordait de l'ecran, jusqu'a 103 pixels. Plutot que de masquer le bouton
   d'appel, qui est ce qui fait sonner le telephone, le menu passe a la ligne
   en dessous. La regle ne depend ni de la longueur de l'enseigne ni du
   nombre de rubriques : elle tient pour les seize metiers. */
@media (min-width: 960px) and (max-width: 1179px) {
  .entete__in { flex-wrap: wrap; row-gap: 0; }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin-left: -12px; padding-bottom: 6px; }
}

/* Garde-fou commun a toutes les grilles.
   Une grille qui ne declare pas ses colonnes n'en a qu'une, implicite, et
   celle-ci se dimensionne sur son contenu : il suffit d'une adresse longue ou
   d'un tableau pour qu'elle pousse la page hors de l'ecran d'un telephone.
   « grid-auto-columns » ne touche QUE les colonnes implicites : une grille qui
   declare ses colonnes n'est pas concernee, et rien ne bouge chez elle. Les
   seize feuilles de metier comptent une centaine de grilles de ce genre ; les
   borner une par une aurait laisse passer la suivante.
   -------------------------------------------------------------------------- */
main *, .entete *, .pied * { grid-auto-columns: minmax(0, 1fr); }

/* La fiche « terme / valeur » sur une ligne, que huit metiers emploient sous
   des noms differents (remb__faits, urgence__faits, livraison__faits...).
   Quand la place manque, la valeur passe sous son terme au lieu de pousser la
   page hors de l'ecran. Un seul metier avait ete rustine dans son coin, ce qui
   est exactement le defaut que cet audit cherchait : une regle posee pour un
   pack et pas pour les quinze autres. Elle est ecrite ici, une fois. */
[class$="__faits"] > div { flex-wrap: wrap; }
[class$="__faits"] > div > * { min-width: 0; }
@media (max-width: 480px) {
  [class$="__faits"] > div { flex-direction: column; gap: 2px; }
  [class$="__faits"] dd { text-align: left; }
}

/* --- accueil -------------------------------------------------------------- */

.accueil { padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 64px); }
/* Une colonne qui peut retrecir, et des elements qui l'acceptent.
   Sans « minmax(0, 1fr) », la colonne se dimensionne sur le contenu le plus
   large et ne descend jamais en dessous : un nom de commune insecable
   (« Aix-en-Provence ») suffisait alors a pousser toute la page hors de
   l'ecran sur un telephone. Le « min-width: 0 » leve la taille minimale
   automatique des elements de grille, qui annulait la meme correction. */
.accueil__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.accueil__in > *, .accueil__texte > * { min-width: 0; }
.accueil__actions { flex-wrap: wrap; }
.accueil h1 { margin-bottom: .3em; }
.accueil__sous { color: var(--encre-2); margin-bottom: 1em; }
.accueil__corps { max-width: 46ch; color: var(--encre-2); }
.accueil__corps p:last-child { margin-bottom: 0; }
/* Un palier doit se voir. Mesure du 14 septembre sur l'accueil centre : le
   titre laisse 22 px avant son sous-titre, le sous-titre 20 px avant le
   paragraphe, et le paragraphe 28 px avant une paire de boutons de 48 px de
   haut. Trois paliers presque egaux, dont le dernier precede le bloc le plus
   lourd de la page : l'oeil ne lit pas une respiration, il lit une ligne
   collee sous la precedente. Le pas avant les boutons vaut donc le double du
   pas entre deux lignes de texte, et les deux boutons se decollent l'un de
   l'autre. */
.accueil__actions { margin-top: 40px; gap: 16px; }
.accueil__media { position: relative; }
.portrait { margin: 0; overflow: hidden; background: var(--accent-clair); aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.accueil__note { display: none; }
@media (min-width: 900px) {
  .accueil__in { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .portrait { margin-inline: 0 0; margin-left: auto; }
}

/* --- compositions d'accueil ------------------------------------------------
   La direction fait le caractere, la palette fait la couleur, la composition
   fait le plan. Trois plans possibles pour le meme contenu, tires au sort
   comme le reste : deux confreres de la meme ville ne tombent pas dessus en
   meme temps. Sur telephone, tout revient a une colonne de toute facon.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  /* image a gauche, texte a droite */
  html[data-compo="gauche"] .accueil__in { grid-template-columns: .9fr 1.1fr; }
  html[data-compo="gauche"] .accueil__texte { order: 2; }
  html[data-compo="gauche"] .accueil__media { order: 1; }
  html[data-compo="gauche"] .portrait { margin-left: 0; margin-right: auto; }
  html[data-compo="gauche"] .portrait img { object-position: center 22%; }
}

/* accueil sans image : le titre porte la page. Le plan du client qui n'a pas
   encore envoye de photo, et de celui qui n'en veut pas.

   Un titre seul dans le coin haut gauche d'une page blanche ne se lit pas
   comme un parti pris, il se lit comme une image qui n'a pas charge. Le
   remede n'est pas de remplir le vide avec un dessin, c'est de le fermer :
   le haut de page devient un bandeau teinte qui va d'un bord a l'autre, et
   la bande de reperes qui le suit entre dans le meme bandeau. Le nom, la
   phrase, les trois chiffres utiles : c'est une page de titre, et il n'y
   manque rien. */
html[data-compo="aucun"] .accueil {
  background: var(--fond-2);
  padding-block: clamp(64px, 10vw, 150px) clamp(44px, 6vw, 84px);
}
html[data-compo="aucun"] .accueil__in { grid-template-columns: minmax(0, 1fr) !important; }
html[data-compo="aucun"] .accueil h1 { font-size: clamp(2.6rem, 1.9rem + 4.2vw, 5.2rem); max-width: 18ch; }
html[data-compo="aucun"] .accueil__sous { max-width: 52ch; font-size: 1.15rem; }
html[data-compo="aucun"] .accueil__corps { max-width: 60ch; columns: 1; }
html[data-compo="aucun"] .accueil + .chiffres {
  background: var(--fond-2);
  border-top: 1px solid var(--trait);
  padding-block: clamp(22px, 2.6vw, 34px);
}
@media (min-width: 900px) {
  /* Le nom a gauche, ce qu'on fait a droite : les deux moities du bandeau
     portent chacune quelque chose, et la place de l'image ne se devine plus.
     Les lignes sont posees a la main parce que le surtitre et la phrase
     d'accroche sont facultatifs : une rangee vide se referme toute seule,
     alors qu'un placement automatique decalerait la colonne de droite. */
  html[data-compo="aucun"] .accueil__texte {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: auto auto auto;
    column-gap: clamp(48px, 5vw, 88px);
    align-items: end;
  }
  html[data-compo="aucun"] .accueil__sur    { grid-area: 1 / 1 / 2 / 2; }
  html[data-compo="aucun"] .accueil h1      { grid-area: 2 / 1 / 3 / 2; max-width: none; }
  html[data-compo="aucun"] .accueil__sous   { grid-area: 3 / 1 / 4 / 2; margin-bottom: 0; }
  html[data-compo="aucun"] .accueil__corps  { grid-area: 1 / 2 / 4 / 3; columns: 1; max-width: 46ch; }
  html[data-compo="aucun"] .accueil__actions { grid-area: 4 / 1 / 5 / 3; margin-top: 48px; }
  html[data-compo="aucun"] .accueil__corps p:first-child { margin-top: 0; }
  html[data-compo="aucun"] .accueil__corps p:last-child { margin-bottom: 0; }
}

/* accueil pleine largeur : le texte au centre, l'image en bandeau dessous.
   Le plan qui convient a une photo de salle, de vitrine ou de chantier,
   c'est-a-dire tout ce qui est plus large que haut. */
html[data-compo="bandeau"] .accueil__in { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
html[data-compo="bandeau"] .accueil__texte { max-width: 40rem; margin-inline: auto; text-align: center; }
html[data-compo="bandeau"] .accueil__corps { max-width: 54ch; margin-inline: auto; }
html[data-compo="bandeau"] .accueil__actions { justify-content: center; }
html[data-compo="bandeau"] .portrait { max-width: none; aspect-ratio: 21 / 9; margin-inline: 0; margin-left: 0; }
html[data-compo="bandeau"] .portrait img { object-position: center 45%; }
/* sur un telephone, une bande 21/9 ne fait plus que cent cinquante pixels de
   haut : on ne voit plus rien de la boutique. Le bandeau s'y ouvre en 3/2. */
@media (max-width: 699px) {
  html[data-compo="bandeau"] .portrait { aspect-ratio: 3 / 2; }
}

/* --- galerie ---------------------------------------------------------------
   Une grille de photos legendees. Generique parce que plusieurs metiers en
   ont besoin : les menus et les plats d'un restaurant, les chantiers d'un
   artisan, le portfolio d'un photographe. Chaque pack peut la preciser.
   -------------------------------------------------------------------------- */

.galerie__grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
/* Une ou deux photos ne remplissent pas une rangee. Sur une grille a colonnes
   automatiques, elles restent collees a gauche avec deux colonnes vides a
   cote, et la page a l'air en panne : c'est ce que le restaurant montrait le
   13 septembre, et les quinze autres metiers avaient le meme defaut. En
   dessous de trois photos, la rangee se centre sous le texte, dans sa mesure.
   A partir de trois, la grille du metier reprend la main sans rien changer. */
.galerie__grille:not(:has(> :nth-child(3))) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: var(--largeur-texte);
  margin-inline: auto;
}
.galerie__grille:not(:has(> :nth-child(3))) > .galerie__item { flex: 1 1 280px; max-width: 360px; }

.galerie__item figure { margin: 0; }
.galerie__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-carte, 14px);
  border: 1px solid var(--trait);
  background: var(--accent-clair);
}
.galerie__item figcaption {
  margin-top: 10px;
  font-size: .92rem;
  color: var(--encre-2);
  line-height: 1.45;
}
.galerie__note { margin-top: 24px; }

/* --- chiffres cles -------------------------------------------------------- */

.chiffres__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chiffre { padding: 22px 20px 20px 0; border-left: 1px solid var(--trait); }
.chiffre:nth-child(2n + 1) { border-left: 0; }
.chiffre:nth-child(2n) { padding-left: 20px; }
.chiffre:nth-child(n + 3) { border-top: 1px solid var(--trait); }
/* Un repere est court, mais rien n'oblige le client a etre court : plusieurs
   metiers acceptent jusqu'a soixante-dix caracteres dans ce champ, et leur
   propre exemple en fait soixante-cinq. En « nowrap », une phrase de cette
   longueur sortait de l'ecran et emportait la page avec elle. Seul le numero
   de telephone, qui est un lien, garde son insecabilite. */
.chiffre b { display: block; font-family: var(--titres); line-height: 1.1; margin-bottom: 6px; white-space: normal; }
.chiffre b a { white-space: nowrap; }
.chiffre b a { text-decoration: none; color: inherit; }
.chiffre span { display: block; font-size: .82rem; color: var(--encre-2); }
@media (max-width: 359.98px) {
  .chiffres__in { grid-template-columns: minmax(0, 1fr); }
  .chiffre:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--trait); }
  .chiffre:first-child { border-top: 0; }
}
@media (min-width: 900px) {
  .chiffres__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chiffre:nth-child(n) { border-top: 0; border-left: 1px solid var(--trait); padding-left: 24px; }
  .chiffre:nth-child(1) { border-left: 0; padding-left: 0; }
}

/* --- sections ------------------------------------------------------------- */

.section { padding-block: clamp(56px, 8vw, 104px); }
.section__tete h2 { margin-bottom: .6em; }
.section__corps { max-width: var(--largeur-texte); }
.section__corps > :last-child { margin-bottom: 0; }

.texte-media__in, .texte-lieu__in, .contact__in { display: grid; gap: 40px; }
.figure { margin: 0; overflow: hidden; }
.figure figcaption { font-size: .9rem; color: var(--encre-2); margin-top: 10px; }
.citation { margin: 28px 0 0; }
/* citation d'une section en texte seul : elle suit la colonne du corps */
.texte__citation { max-width: var(--largeur-texte); }
.lieu { align-self: start; }
.lieu h3 { margin-bottom: .4em; }
.lieu .mention { margin: 20px 0 0; }
@media (min-width: 900px) {
  .texte-media__in { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .texte-lieu__in { grid-template-columns: 1.2fr .8fr; gap: 64px; }
  .contact__in { grid-template-columns: .9fr 1.1fr; gap: 64px; }
}

/* --- contenus produits par les blocs de texte ----------------------------- */

table { border-collapse: collapse; width: 100%; }
.t td, .h td { padding: 12px 0; border-top: 1px solid var(--trait); vertical-align: baseline; }
.t tr:last-child td, .h tr:last-child td { border-bottom: 1px solid var(--trait); }
.t td:last-child { text-align: right; white-space: nowrap; font-family: var(--titres); }
/* Le prix reste insecable, le libelle peut se couper, et si l'ensemble ne
   tient toujours pas, c'est le tableau qui defile, jamais la page. */
.t td, .h td { overflow-wrap: break-word; }
.section__corps:has(> .t), .section__corps:has(> .h) { overflow-x: auto; }
.h td:first-child { color: var(--encre-2); width: 38%; }
.h tr[data-aujourdhui] td { font-weight: 650; color: var(--encre); }

ul.motifs, ul.infos-tarifs, ul.coordonnees { list-style: none; margin: 0 0 1em; padding: 0; }
ul.motifs li { padding: 12px 0; border-bottom: 1px solid var(--trait); }
ul.motifs { border-top: 1px solid var(--trait); }
ul.infos-tarifs li, ul.coordonnees li { padding: 5px 0 5px 18px; position: relative; color: var(--encre-2); font-size: .95rem; }
ul.infos-tarifs li::before, ul.coordonnees li::before { content: ''; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reserve { font-size: .9rem; color: var(--encre-2); margin-top: 20px; }
.adresse-forte { font-family: var(--titres); margin: 24px 0 8px; }
.tel-fort { font-family: var(--titres); margin: 0 0 .2em; line-height: 1.1; }
.tel-fort a { text-decoration: none; color: var(--encre); }
.urgence { font-size: .9rem; color: var(--encre-2); }
dl.pratique { margin: 0 0 1em; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
dl.pratique dt { color: var(--encre-2); }
dl.pratique dd { margin: 0; }

.services { display: grid; gap: 14px; }
.service { padding: 24px; border: 1px solid var(--trait); }
.service__cle { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 8px; }
.service h3 { margin-bottom: .35em; }
.service p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.cartes .section__corps { max-width: none; }
@media (min-width: 720px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }

.tarifs-fort { display: grid; gap: 12px; }
.tarif-carte { padding: 20px; border: 1px solid var(--trait); display: flex; flex-direction: column; gap: 10px; }
.tarif-carte__prix { font-family: var(--titres); font-size: 1.6rem; }
@media (min-width: 720px) { .tarifs-fort { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* --- formulaire ----------------------------------------------------------- */

.form .champ { margin-bottom: 16px; }
.form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; border: 1px solid var(--trait-fort); background: var(--surface);
  padding: 12px 14px; font: inherit; color: var(--encre); border-radius: var(--r);
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.form textarea { min-height: 130px; resize: vertical; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--encre-2); margin: 8px 0 18px; }
.consentement input { margin-top: 4px; flex: none; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form button { font: inherit; }
.form__retour { margin-top: 12px; font-size: .95rem; }
.form__retour:empty { display: none; }
.form__retour.ok { color: var(--accent-fonce); }
.form__retour.ko { color: var(--alerte); }

/* --- pied ----------------------------------------------------------------- */

.pied { border-top: 1px solid var(--trait); padding-block: 48px 110px; font-size: .92rem; color: var(--encre-2); }
.pied__grille { display: grid; gap: 32px; }
.pied h2 { font-family: var(--corps); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 2px 0; }
.pied .h td { padding: 4px 0; border: 0; font-size: .9rem; }
/* La ligne legale ferme la page. Bornee a 72 caracteres sans etre centree,
   elle se collait au bord gauche : mesure du 14 septembre, 24 px a gauche et
   610 px de vide a droite sous un pied dont tout le reste est aligne. Une
   phrase seule, en fin de page, se pose au milieu de la mesure, et son filet
   avec elle. */
.pied__legal {
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  max-width: 72ch;
  font-size: .85rem;
  text-align: center;
}
@media (min-width: 800px) {
  .pied__grille { grid-template-columns: 1fr 1.2fr 1fr; }
  .pied { padding-bottom: 48px; }
}

/* --- barre d'actions mobile ------------------------------------------------ */

.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface); border-top: 1px solid var(--trait);
}
.barre-mobile a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--encre); }
.barre-mobile a:first-child { background: var(--accent); color: var(--accent-contraste); }
.barre-mobile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 800px) { .barre-mobile { display: none; } }

/* --- impression ----------------------------------------------------------- */

@media print {
  .entete, .barre-mobile, .form, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}