/* Styles propres au site, qui complètent la charte graphique.
   La charte définit les couleurs et les polices.
   Ce fichier définit la mise en page des blocs. */

/* --- Lien d'évitement ---
   Invisible à l'écran, il apparaît lors d'une navigation au clavier
   et permet de sauter le menu pour aller droit au contenu. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  background: var(--c-sauge);
  color: var(--c-blanc);
  padding: var(--esp-xs) var(--esp-sm);
}
.lien-evitement:focus {
  left: var(--esp-sm);
  top: var(--esp-xs);
  z-index: 100;
}

/* --- Bandeau d'information ponctuelle ---
   Désactivé par défaut : il est en commentaire dans chaque page.
   Mode d'emploi pour l'activer dans CLAUDE.md. */
.bandeau-annonce {
  background: var(--c-cuivre-pale);
  border-bottom: 1px solid var(--c-cuivre);
  color: var(--c-encre);
  font-size: var(--taille-sm);
  text-align: center;
}
.bandeau-annonce p {
  margin: 0 auto;
  padding-top: var(--esp-xs);
  padding-bottom: var(--esp-xs);
}

/* --- Bouton d'appel mobile ---
   Pastille fixe en bas d'écran, affichée seulement sur téléphone
   (voir la section Petit écran en fin de fichier). Masquée ailleurs par
   display: none, elle sort aussi de l'ordre de tabulation. */
.appel-mobile {
  display: none;
}

/* --- Bande d'informations pratiques ---
   Téléphone, horaires et adresse, visibles immédiatement. */
.bandeau-info {
  background: var(--c-sauge);
  color: var(--c-sauge-pale);
  font-size: var(--taille-xs);
}
.bandeau-info__interieur {
  display: flex;
  gap: var(--esp-md);
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.bandeau-info__item {
  color: var(--c-sauge-pale);
  text-decoration: none;
  white-space: nowrap;   /* empêche la coupure au milieu d'une info */
}
/* Seuls les liens réagissent au survol */
a.bandeau-info__item:hover {
  color: var(--c-blanc);
}

/* --- En-tête --- */
.entete {
  background: var(--c-blanc);
  border-bottom: 1px solid var(--c-bordure);
}

/* display: flex aligne les enfants sur une ligne.
   justify-content: space-between les écarte au maximum. */
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
  padding-top: var(--esp-md);
  padding-bottom: var(--esp-md);
}

.entete__identite {
  min-width: 0;    /* autorise le bloc à rétrécir sans forcer toute la ligne à déborder */
  text-decoration: none;
  line-height: 1.2;
}
.entete__nom {
  display: block;
  font-family: var(--police-texte);
  font-size: 1.5rem;          /* 24px : le nom prend enfin sa place */
  font-weight: 500;
  letter-spacing: -0.01em;    /* resserre légèrement, plus net en grand */
  color: var(--c-encre);
}
.entete__role {
  display: block;
  font-size: var(--taille-xs);
  color: var(--c-texte-clair);
  margin-top: 3px;
}

/* --- Menu ---
   min-width: 0 sur <nav> permet au menu de rétrécir ; flex-wrap fait
   passer un lien entier à la ligne plutôt que de couper un mot en deux
   (repéré sur "Le cabinet", qui se coupait en "Le" / "cabinet"). */
.nav {
  min-width: 0;
}
.nav__liste {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--esp-xs);
  gap: var(--esp-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liste a {
  color: var(--c-texte);
  text-decoration: none;
  font-size: var(--taille-sm);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav__liste a:hover,
.nav__liste a[aria-current="page"] {
  color: var(--c-encre);
  border-bottom-color: var(--c-sauge);
}

/* --- Sous-menus "Le cabinet" et "Nos soins" ---
   Sans JavaScript, chaque sous-menu reste affiché en liste simple (voir
   js/menu.js) : le CSS ne le masque jamais par défaut, seul l'attribut
   "hidden" posé par le script le fait disparaître. */
.nav__item-parent {
  position: relative;
}
.nav__declencheur {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: inherit;
  font-size: var(--taille-sm);
  color: var(--c-texte);
  background: none;
  border: none;
  padding: 0 0 2px;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav__declencheur:hover {
  color: var(--c-encre);
  border-bottom-color: var(--c-sauge);
}
.nav__declencheur[aria-expanded="true"] {
  color: var(--c-encre);
  border-bottom-color: var(--c-sauge);
}
.nav__chevron {
  transition: transform var(--transition);
}
.nav__declencheur[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}
.nav__sous-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__sous-menu a {
  color: var(--c-texte);
  text-decoration: none;
  font-size: var(--taille-sm);
  white-space: nowrap;
}
.nav__sous-menu a:hover,
.nav__sous-menu a[aria-current="page"] {
  color: var(--c-encre);
}
.nav__sous-menu a[aria-current="page"] {
  font-weight: 500;
}
@media (min-width: 861px) {
  .nav__sous-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--esp-xs);
    min-width: 200px;
    background: var(--c-blanc);
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    padding: var(--esp-xs) 0;
    z-index: 20;
  }
  .nav__sous-menu a {
    display: block;
    padding: var(--esp-xs) var(--esp-sm);
  }
  .nav__sous-menu a:hover {
    background: var(--c-sable);
  }
}

/* --- Bandeau d'accueil ---
   Texte à gauche, photo à droite. En dessous de 760px les deux colonnes
   s'empilent (voir la section Mobile) : le texte garde toujours la
   priorité de lecture, l'image suit. */
.accroche {
  background: var(--c-sable);
  padding: var(--esp-xxl) 0;
}
.accroche__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;   /* la photo prend la hauteur du bloc de texte */
  gap: var(--esp-xl);
}
.accroche__contenu {
  flex: 1 1 420px;
}
.accroche__media {
  flex: 1 1 420px;
}
.accroche__media picture {
  display: block;
  height: 100%;
}
.accroche__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rayon);
}
.accroche__titre {
  max-width: 15ch;
  margin-bottom: var(--esp-sm);
}
.accroche__texte {
  font-size: var(--taille-lg);
  max-width: 46ch;
}
.accroche__actions {
  display: flex;
  flex-wrap: wrap;   /* sous 340px environ, le second bouton passe à la ligne */
  gap: var(--esp-xs);
  margin-top: var(--esp-md);
}

/* --- Bloc image + texte ---
   Réutilisé pour présenter le praticien : texte à gauche, image à droite. */
.presentation__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-xl);
}
.presentation__contenu {
  flex: 1 1 420px;
}
.presentation__media {
  flex: 1 1 420px;
}
.presentation__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}

/* --- Cartes de soin ---
   Une carte par domaine, toutes de même gabarit : même fond, même
   bordure, même repère de survol. */
.cartes-soin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--esp-md);
  margin-top: var(--esp-lg);
}
.carte-soin {
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  padding: var(--esp-md);
  transition: border-color var(--transition);
}
.carte-soin:hover {
  border-color: var(--c-sauge);
}
.carte-soin h3 {
  font-size: var(--taille-h3);
  line-height: 1.25;
  min-height: 2.5em;   /* réserve la place de 2 lignes : "Esthétique dentaire" ne décale plus le texte des autres cartes */
  margin: 0 0 var(--esp-xs);
}
.carte-soin h3 a {
  color: var(--c-encre);
  text-decoration: none;
}
.carte-soin h3 a:hover {
  color: var(--c-sauge);
}
.carte-soin p {
  margin: 0;
  font-size: var(--taille-sm);
  color: var(--c-texte);
}

/* --- Plateau technique ---
   Les deux photos sont recadrées au même format paysage (4/3), y compris
   la photo du Cone Beam pourtant prise à la verticale. On réserve le
   cadre avec un padding-top en pourcentage plutôt que "aspect-ratio" :
   plus large compatibilité, le rendu ne dépend pas du support de cette
   propriété CSS récente. object-position cale le Cone Beam vers le haut
   pour garder l'appareil dans le cadre plutôt que le sol. */
.plateau-technique {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-md);
  margin: var(--esp-lg) 0 0;
}
.plateau-technique__figure {
  margin: 0;
}
.plateau-technique__cadre {
  position: relative;
  width: 100%;
  padding-top: 75%;   /* 4/3 : hauteur = 75 % de la largeur */
  overflow: hidden;
  border-radius: var(--rayon);
}
.plateau-technique__cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plateau-technique__figure--cone-beam img {
  object-position: center 15%;
}
.plateau-technique__figure figcaption {
  margin-top: var(--esp-xs);
  font-size: var(--taille-xs);
  color: var(--c-texte-clair);
  text-align: center;
}

/* --- Lien sous la galerie du plateau technique --- */
.plateau-technique__lien {
  margin-top: var(--esp-lg);
}

/* --- Équipements (page Plateau technique) ---
   Texte et photo côte à côte ; la variante --inverse place la photo à
   gauche pour alterner d'une section à l'autre. Sur petit écran, la
   photo passe toujours sous le texte. */
.equipement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-xl);
}
.equipement__texte {
  flex: 1 1 380px;
}
.equipement__media {
  flex: 1 1 380px;
}
@media (min-width: 861px) {
  .equipement--inverse .equipement__media {
    order: -1;
  }
}

/* --- Questions fréquentes de l'accueil ---
   Trois blocs de même gabarit : la question en titre, un court texte,
   puis un lien calé en bas du bloc pour rester aligné d'un bloc à l'autre. */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-md);
  margin-top: var(--esp-lg);
}
.question {
  display: flex;
  flex-direction: column;
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  padding: var(--esp-md);
}
.question__titre {
  font-size: var(--taille-lg);
  line-height: 1.3;
  margin: 0 0 var(--esp-sm);
}
.question p {
  font-size: var(--taille-sm);
  margin: 0 0 var(--esp-sm);
}
.question__lien {
  margin-top: auto;
  font-size: var(--taille-sm);
  font-weight: 500;
}

/* --- Fiches d'accès ---
   Présentation typographique (pas d'image) : un intitulé bref en cuivre,
   la valeur juste en dessous dans la police de titre. */
.fiches-acces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-lg);
  margin: var(--esp-lg) 0;
}
.fiches-acces__fiche h2,
.fiches-acces__fiche h3 {
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--c-cuivre);
  margin: 0 0 var(--esp-xs);
}
.fiches-acces__fiche p {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--c-encre);
  line-height: 1.4;
}

/* --- En-tête des pages intérieures ---
   Bandeau sable avec le titre de la page, plus sobre que l'accroche
   de la page d'accueil. */
.entete-page {
  background: var(--c-sable);
  padding: var(--esp-xl) 0 var(--esp-lg);
}
.entete-page__chapo {
  font-size: var(--taille-lg);
  max-width: var(--largeur-texte);
  margin: 0;
}

/* --- Texte courant des pages ---
   Rythme vertical des titres et largeur de lecture des listes,
   alignée sur celle des paragraphes. */
.texte-courant h2 {
  margin-top: var(--esp-lg);
}
.texte-courant > h2:first-child {
  margin-top: 0;
}
.texte-courant h3 {
  margin-top: var(--esp-md);
  margin-bottom: var(--esp-xs);
}
.texte-courant ul,
.texte-courant ol {
  max-width: var(--largeur-texte);
  margin: 0 0 var(--esp-sm);
  padding-left: var(--esp-md);
}
.texte-courant li {
  margin-bottom: var(--esp-xs);
}

/* --- Série d'illustrations ---
   Petits schémas côte à côte, lus comme une progression ; une seule
   légende pour l'ensemble. */
.serie-illustrations {
  margin: var(--esp-md) 0;
}
.serie-illustrations__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--esp-sm);
}
.serie-illustrations__grille img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}
.serie-illustrations figcaption {
  margin-top: var(--esp-xs);
  font-size: var(--taille-xs);
  color: var(--c-texte-clair);
}

/* --- Encadrés ---
   Sauge pâle pour une information, cuivre pâle pour un avertissement. */
.encadre {
  max-width: var(--largeur-texte);
  margin: 0 0 var(--esp-md);
  padding: var(--esp-md);
  background: var(--c-sauge-pale);
  border-radius: var(--rayon);
}
.encadre p:last-child {
  margin-bottom: 0;
}
.encadre--alerte {
  background: var(--c-cuivre-pale);
  border: 1px solid var(--c-cuivre);
}

/* --- Appel d'urgence ---
   Le numéro du cabinet, affiché en grand en haut de la page Urgences. */
.appel-urgence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm) var(--esp-lg);
  margin-top: var(--esp-md);
  padding: var(--esp-md) var(--esp-lg);
  background: var(--c-cuivre-pale);
  border: 1px solid var(--c-cuivre);
  border-radius: var(--rayon);
}
.appel-urgence__libelle {
  margin: 0;
  color: var(--c-encre);
}
.appel-urgence__horaires {
  display: block;
  font-size: var(--taille-sm);
  color: var(--c-texte);
}
.appel-urgence__numero {
  font-family: var(--police-titre);
  font-size: var(--taille-h1);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-cuivre-fonce);
  text-decoration: none;
  white-space: nowrap;
}
.appel-urgence__numero:hover {
  color: var(--c-cuivre);
}

/* --- Carte OpenStreetMap ---
   Même technique que le plateau technique : le padding-top réserve un
   cadre de proportion fixe (2/1), l'iframe le remplit entièrement. */
.carte-osm {
  position: relative;
  padding-top: 50%;
  margin: var(--esp-md) 0 var(--esp-xs);
  overflow: hidden;
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
}
.carte-osm iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.legende {
  font-size: var(--taille-xs);
  color: var(--c-texte-clair);
}

/* --- Formulaire de contact --- */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--esp-md);
  max-width: var(--largeur-texte);
}
.formulaire__legende {
  margin: 0;
  font-size: var(--taille-sm);
}
.champ {
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
}
.champ label {
  font-size: var(--taille-sm);
  font-weight: 500;
  color: var(--c-encre);
}
.champ__aide {
  font-weight: 400;
  color: var(--c-texte-clair);
}
.champ input,
.champ textarea {
  font: inherit;
  color: var(--c-encre);
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--rayon);
  padding: var(--esp-xs) var(--esp-sm);
}
.champ textarea {
  resize: vertical;
}
.champ input:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--c-cuivre);
}
.champ--case {
  flex-direction: row;
  align-items: baseline;
}
.champ--case input {
  accent-color: var(--c-sauge);
}
.champ--case label {
  font-weight: 400;
}
/* Champ piège anti-spam : hors de l'écran, ignoré par le clavier et les
   lecteurs d'écran, mais présent dans le code que lisent les robots. */
.champ--piege {
  position: absolute;
  left: -9999px;
}
.obligatoire {
  color: var(--c-cuivre);
}
.formulaire .bouton {
  align-self: flex-start;
}

/* Messages de retour après envoi : contact.php renvoie vers
   contact.html#message-envoye (ou #message-erreur) ; :target affiche le
   message correspondant, sans JavaScript. */
.message-formulaire {
  display: none;
  max-width: var(--largeur-texte);
  margin: 0 0 var(--esp-md);
  padding: var(--esp-md);
  border-radius: var(--rayon);
}
.message-formulaire:target {
  display: block;
}
.message-formulaire p {
  margin: 0;
}
.message-formulaire--succes {
  background: var(--c-sauge-pale);
  border: 1px solid var(--c-sauge);
  color: var(--c-encre);
}
.message-formulaire--erreur {
  background: var(--c-cuivre-pale);
  border: 1px solid var(--c-erreur);
  color: var(--c-erreur);
}

/* --- Fiche d'informations légales ---
   Intitulé à gauche, valeur à droite ; empilés sur petit écran. */
.fiche-legale {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--esp-xs) var(--esp-md);
  max-width: var(--largeur-texte);
  margin: 0 0 var(--esp-md);
}
.fiche-legale dt {
  font-weight: 500;
  color: var(--c-encre);
}
.fiche-legale dd {
  margin: 0;
}

/* --- Formation et titres (page Le cabinet) ---
   Deux listes simples côte à côte, empilées sur petit écran : aucune
   mise en valeur d'un titre plutôt qu'un autre. */
.formation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--esp-lg) var(--esp-xl);
  margin-top: var(--esp-lg);
}
.formation__bloc h3 {
  margin-bottom: var(--esp-sm);
}
.formation__liste {
  margin: 0;
  padding-left: var(--esp-md);
}
.formation__liste li {
  margin-bottom: var(--esp-xs);
}

/* --- Pied de page ---
   Quatre colonnes sur grand écran, deux sur tablette, une sur mobile
   (voir la section Mobile). L'aération vient des marges et des
   interlignes, pas d'éléments décoratifs : un seul filet discret sépare
   la grille de la bande inférieure (numéro d'Ordre, copyright). */
.pied {
  background: var(--c-sauge);
  color: var(--c-sable);
  padding: var(--esp-xl) 0 var(--esp-md);
  font-size: var(--taille-sm);
  line-height: 1.7;
}
.pied a {
  color: var(--c-blanc);
  text-decoration: none;
}
.pied a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-lg) var(--esp-xl);
}
.pied__titre {
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--c-blanc);
  margin: 0 0 var(--esp-md);
}
.pied__colonne p,
.pied__adresse {
  margin: 0 0 var(--esp-sm);
  max-width: none;
}
.pied__adresse {
  font-style: normal;
}
.pied__nom {
  color: var(--c-blanc);
  font-weight: 500;
}
.pied__telephone {
  font-size: var(--taille-lg);
  font-weight: 500;
  white-space: nowrap;
}
.pied .pied__bouton {
  margin-top: var(--esp-xs);
  color: var(--c-blanc);
  text-decoration: none;
}
.pied .pied__bouton:hover {
  text-decoration: none;
}
.pied__horaires {
  margin: 0;
}
.pied__horaires dt {
  color: var(--c-blanc);
  font-weight: 500;
}
.pied__horaires dd {
  margin: 0 0 var(--esp-sm);
}
.pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
}
.pied__liste--legal {
  margin-top: var(--esp-md);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--c-sauge-clair);
  font-size: var(--taille-xs);
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-xs) var(--esp-lg);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--c-sauge-clair);
  font-size: var(--taille-xs);
}
.pied__bas p {
  margin: 0;
  max-width: none;
}

/* --- Mobile ---
   En dessous de 860px, on empile l'en-tête verticalement. */
@media (max-width: 860px) {
  .pied__grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .entete__interieur {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav__liste {
    gap: var(--esp-sm);
  }
  /* Chaque entrée à sous-menu prend toute la largeur pour que celui-ci, déplié,
     s'empile proprement au lieu de se glisser à côté des autres liens. */
  .nav__item-parent {
    flex-basis: 100%;
  }
  /* :not([hidden]) est indispensable : sans lui, ce display écraserait
     le "display: none" que le navigateur applique à [hidden]. */
  .nav__sous-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--esp-xs);
    padding-left: var(--esp-md);
    margin-top: var(--esp-xs);
  }
  /* L'adresse est déjà dans le pied de page : on l'enlève
     de la bande pour éviter qu'elle déborde sur petit écran. */
  .bandeau-info__item--adresse {
    display: none;
  }
  /* Téléphone et horaires ne tiennent pas sur une ligne à 375px :
     les horaires passent dessous au lieu de déborder de l'écran. */
  .bandeau-info__interieur {
    flex-wrap: wrap;
    row-gap: 0;
  }

  /* Sur petit écran, le texte passe toujours avant l'image,
     quel que soit son ordre dans le code sur grand écran. */
  .presentation__contenu {
    order: 1;
  }
  .presentation__media {
    order: 2;
  }
  .accroche__media {
    order: 2;
    flex-basis: 100%;
  }
  /* Empilée sous le texte, la photo retrouve sa hauteur naturelle :
     "height: 100%" n'aurait plus de hauteur de référence à suivre. */
  .accroche__media picture,
  .accroche__media img {
    height: auto;
  }

  .fiche-legale {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fiche-legale dd {
    margin-bottom: var(--esp-sm);
  }
  .appel-urgence {
    padding: var(--esp-md);
  }
}

/* --- Petit écran (téléphone) ---
   Même seuil que la charte (760px). */
@media (max-width: 760px) {
  .pied__grille {
    grid-template-columns: 1fr;
  }
  .appel-mobile {
    position: fixed;
    right: var(--esp-sm);
    bottom: var(--esp-sm);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-xs);
    padding: var(--esp-xs) var(--esp-md);
    background: var(--c-sauge);
    color: var(--c-blanc);
    font-size: var(--taille-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--c-sauge-pale);
    border-radius: var(--rayon-pastille);
  }
  .appel-mobile:hover {
    background: var(--c-sauge-clair);
    color: var(--c-blanc);
  }
  /* Réserve la place de la pastille en bas du pied de page (dans sa
     couleur) : elle ne recouvre jamais la fin du contenu. */
  .pied {
    padding-bottom: calc(var(--esp-lg) + var(--esp-xl));
  }
}