/* Site public localivia.com : mise en page sobre, mobile d'abord. Valeurs par les jetons de jetons.gen.css
   seulement (plan du 15/10, choix technique 2) ; aucune couleur littérale. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--lv-police-base);
  font-size: var(--lv-typo-taille-corps);
  line-height: var(--lv-typo-interligne-corps);
  color: var(--lv-couleur-texte);
  background-color: var(--lv-couleur-fond);
}

.evitement {
  position: absolute;
  left: var(--lv-espace-2);
  top: calc(-1 * var(--lv-espace-12));
  padding: var(--lv-espace-2) var(--lv-espace-4);
  background-color: var(--lv-couleur-surface);
  color: var(--lv-couleur-accent);
}

.evitement:focus {
  top: var(--lv-espace-2);
}

.entete,
.pied,
main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--lv-espace-4);
}

.entete {
  padding-top: var(--lv-espace-6);
}

.marque {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-taille-cible-portail);
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-2);
  font-weight: var(--lv-typo-graisse-forte);
  color: var(--lv-couleur-marque);
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--lv-police-titre);
  font-weight: var(--lv-typo-graisse-forte);
  line-height: var(--lv-typo-interligne-titre);
}

h1 {
  font-size: var(--lv-typo-taille-titre-1);
  margin: var(--lv-espace-4) 0;
}

h2 {
  font-size: var(--lv-typo-taille-titre-2);
  margin: var(--lv-espace-8) 0 var(--lv-espace-3);
}

h3 {
  font-size: var(--lv-typo-taille-titre-3);
  margin: var(--lv-espace-6) 0 var(--lv-espace-2);
}

p,
ul,
dl {
  margin: 0 0 var(--lv-espace-4);
}

li + li {
  margin-top: var(--lv-espace-2);
}

dt {
  font-weight: var(--lv-typo-graisse-forte);
}

dd {
  margin: 0 0 var(--lv-espace-3);
}

a {
  color: var(--lv-couleur-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--lv-couleur-accent-survol);
}

a:focus-visible {
  outline: var(--lv-taille-anneau-focus) solid var(--lv-couleur-focus);
  outline-offset: var(--lv-taille-anneau-focus);
}

code,
pre {
  font-size: var(--lv-typo-taille-petite);
  overflow-wrap: anywhere;
}

pre {
  overflow-x: auto;
  padding: var(--lv-espace-3);
  background-color: var(--lv-couleur-surface-enfoncee);
  border-radius: var(--lv-rayon-petit);
}

hr {
  border: none;
  border-top: 1px solid var(--lv-couleur-bordure);
  margin: var(--lv-espace-8) 0;
}

.discret,
.mise-a-jour {
  color: var(--lv-couleur-texte-discret);
}

.mise-a-jour {
  font-size: var(--lv-typo-taille-petite);
}

.encadre {
  padding: var(--lv-espace-4) var(--lv-espace-5);
  margin: var(--lv-espace-6) 0;
  background-color: var(--lv-couleur-surface);
  border: 1px solid var(--lv-couleur-bordure);
  border-radius: var(--lv-rayon-moyen);
}

.encadre > :last-child {
  margin-bottom: 0;
}

.contacts {
  list-style: none;
  padding: 0;
}

.contacts a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-taille-cible-portail);
}

.pied {
  margin-top: var(--lv-espace-10);
  border-top: 1px solid var(--lv-couleur-bordure);
  font-size: var(--lv-typo-taille-petite);
  color: var(--lv-couleur-texte-discret);
}

.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--lv-espace-4);
  list-style: none;
  padding: 0;
}

.pied li + li {
  margin-top: 0;
}

.pied a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-taille-cible-portail);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--lv-espace-4);
  font-size: var(--lv-typo-taille-petite);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--lv-espace-2);
  border-bottom: 1px solid var(--lv-couleur-bordure);
}

.tableau {
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------------------------------------------
   Page d'accueil (body.accueil) : en-tête « registre » (liste du mois posée comme une feuille), vrais écrans de
   l'application, frise d'un mois, une seule bande sombre pour l'appel final. Jetons seulement, mobile d'abord.
   --------------------------------------------------------------------------------------------------------------- */

.accueil {
  overflow-x: clip;
}

.accueil main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.accueil img {
  display: block;
  max-width: 100%;
  height: auto;
}

.accueil h1,
.accueil h2,
.accueil h3 {
  margin: 0;
  text-wrap: balance;
}

.accueil :focus-visible {
  outline: var(--lv-taille-anneau-focus) solid var(--lv-couleur-focus);
  outline-offset: var(--lv-taille-anneau-focus);
}

/* En-tête */
.haut {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--lv-couleur-fond);
  border-bottom: 1px solid var(--lv-couleur-bordure);
}

.haut__dedans,
.ouverture__dedans,
.bloc__dedans,
.bas__dedans,
.fonctions {
  max-width: 76rem;
  margin: 0 auto;
  padding-left: var(--lv-espace-4);
  padding-right: var(--lv-espace-4);
}

.haut__dedans {
  display: flex;
  align-items: center;
  gap: var(--lv-espace-6);
  min-height: 4rem;
}

.haut__nav ul,
.haut__actions {
  display: flex;
  align-items: center;
  gap: var(--lv-espace-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.haut__nav li + li {
  margin-top: 0;
}

.haut__nav a,
.haut__agents {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-taille-cible-portail);
  font-size: var(--lv-typo-taille-petite);
  color: var(--lv-couleur-texte);
}

.haut__nav a {
  text-decoration: none;
}

.haut__nav a:hover {
  text-decoration: underline;
}

.haut__actions {
  margin-left: auto;
  gap: var(--lv-espace-4);
}

/* Boutons */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lv-espace-3);
  margin: var(--lv-espace-6) 0 0;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lv-taille-cible-confortable);
  padding: var(--lv-espace-3) var(--lv-espace-5);
  border: 2px solid var(--lv-couleur-accent);
  border-radius: var(--lv-rayon-moyen);
  font-weight: var(--lv-typo-graisse-forte);
  line-height: var(--lv-typo-interligne-titre);
  text-decoration: none;
}

.bouton--principal,
.bouton--principal:hover {
  background-color: var(--lv-couleur-accent);
  color: var(--lv-couleur-texte-sur-accent);
}

.bouton--principal:hover {
  background-color: var(--lv-couleur-accent-survol);
  border-color: var(--lv-couleur-accent-survol);
}

.bouton--second {
  background-color: var(--lv-couleur-surface);
  color: var(--lv-couleur-accent);
}

.bouton--second:hover {
  background-color: var(--lv-couleur-fond-etat-partenaire);
  color: var(--lv-couleur-accent-survol);
}

.bouton--petit {
  min-height: var(--lv-taille-cible-portail);
  padding: var(--lv-espace-2) var(--lv-espace-4);
  font-size: var(--lv-typo-taille-petite);
}

.bouton--grand {
  min-height: 3.5rem;
  padding: var(--lv-espace-4) var(--lv-espace-8);
  font-size: var(--lv-typo-taille-titre-3);
}

.bouton--clair,
.bouton--clair:hover {
  background-color: var(--lv-couleur-surface);
  border-color: var(--lv-couleur-surface);
  color: var(--lv-couleur-accent-sobre);
}

.bouton--clair:hover {
  background-color: var(--lv-couleur-fond-etat-partenaire);
}

.bandeau-fictif {
  display: inline-block;
  margin: 0;
  padding: 0.1em 0.6em;
  border-radius: var(--lv-rayon-petit);
  background-color: var(--lv-couleur-fond-etat-partenaire-possible);
  color: var(--lv-couleur-texte-etat-partenaire-possible);
  font-size: var(--lv-typo-taille-plancher);
  font-weight: var(--lv-typo-graisse-forte);
}

/* Ouverture */
.ouverture {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid var(--lv-couleur-bordure);
}

.ouverture__dedans {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.surtitre {
  margin: 0 0 var(--lv-espace-5);
  font-size: var(--lv-typo-taille-petite);
  font-weight: var(--lv-typo-graisse-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lv-couleur-accent);
}

.accueil h1 {
  font-size: clamp(2.125rem, 1.1rem + 4vw, 4.25rem);
  font-weight: var(--lv-typo-graisse-moyenne);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.titre__suite {
  display: block;
  margin-top: var(--lv-espace-4);
  font-size: 0.55em;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--lv-couleur-accent-sobre);
}

.ouverture__sous-titre {
  max-width: 36rem;
  margin: var(--lv-espace-6) 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

/* La liste du mois, recomposée en HTML */
.liste-mois {
  position: relative;
  margin: 0;
}

.liste-mois__feuille {
  padding: var(--lv-espace-5) var(--lv-espace-6) var(--lv-espace-4);
  background-color: var(--lv-couleur-surface);
  border: 1px solid var(--lv-couleur-bordure);
  border-radius: var(--lv-rayon-grand);
  box-shadow: 0.75rem 0.75rem 0 var(--lv-couleur-surface-enfoncee);
}

.liste-mois__tete {
  margin: var(--lv-espace-3) 0 var(--lv-espace-4);
  padding-bottom: var(--lv-espace-3);
  border-bottom: 2px solid var(--lv-couleur-texte);
}

.liste-mois__titre {
  margin: 0;
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-2);
  font-weight: var(--lv-typo-graisse-forte);
  line-height: var(--lv-typo-interligne-titre);
}

.liste-mois__ot {
  margin: var(--lv-espace-1) 0 0;
  font-size: var(--lv-typo-taille-petite);
  color: var(--lv-couleur-texte-discret);
}

.liste-mois__groupe + .liste-mois__groupe {
  margin-top: var(--lv-espace-4);
}

.liste-mois__groupe-titre {
  display: flex;
  justify-content: space-between;
  gap: var(--lv-espace-3);
  margin: 0 0 var(--lv-espace-2);
  font-size: var(--lv-typo-taille-plancher);
  font-weight: var(--lv-typo-graisse-forte);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lv-couleur-texte-discret);
}

.liste-mois__groupe-titre .nombre {
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-3);
  letter-spacing: 0;
  color: var(--lv-couleur-texte);
}

.liste-mois ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-mois li {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: var(--lv-espace-2) 0;
  border-top: 1px solid var(--lv-couleur-surface-enfoncee);
}

.liste-mois .etab {
  display: flex;
  align-items: center;
}

.liste-mois .meta,
.liste-mois .preuve {
  padding-left: 1.2rem;
  font-size: var(--lv-typo-taille-petite);
}

.liste-mois .preuve {
  font-size: var(--lv-typo-taille-plancher);
  color: var(--lv-couleur-texte-discret);
}

.liste-mois__pied {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: var(--lv-espace-3) 0 0;
  padding-top: var(--lv-espace-3);
  border-top: 1px solid var(--lv-couleur-bordure);
  font-size: var(--lv-typo-taille-petite);
}

.liste-mois__pied::before {
  content: "✓";
  font-weight: var(--lv-typo-graisse-forte);
  color: var(--lv-couleur-succes);
}

.liste-mois figcaption {
  margin-top: var(--lv-espace-5);
  font-size: var(--lv-typo-taille-petite);
  color: var(--lv-couleur-texte-discret);
}

/* Symboles d'état (forme et libellé, jamais la couleur seule) */
.symbole {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.45em;
}

.symbole--non-partenaire {
  background-color: var(--lv-couleur-etat-non-partenaire);
}

.symbole--possible {
  border: 2px solid var(--lv-couleur-etat-partenaire-possible);
  border-radius: 50%;
  background-image: linear-gradient(90deg, transparent 50%, var(--lv-couleur-etat-partenaire-possible) 50%);
}

.symbole--compte {
  border: 2px dotted var(--lv-couleur-etat-non-partenaire);
  border-radius: var(--lv-rayon-petit);
}

/* Cinq fonctions */
.fonctions {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: var(--lv-espace-6);
  padding-bottom: var(--lv-espace-8);
  border-top: 1px solid var(--lv-couleur-bordure);
}

.fonctions h2 {
  margin-bottom: var(--lv-espace-6);
  font-size: var(--lv-typo-taille-titre-2);
}

.fonctions ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--lv-espace-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fonction;
}

.fonctions li {
  margin: 0;
  padding: var(--lv-espace-4);
  background-color: var(--lv-couleur-surface);
  border: 1px solid var(--lv-couleur-bordure);
  border-radius: var(--lv-rayon-grand);
  counter-increment: fonction;
}

.fonctions li::before {
  content: counter(fonction);
  display: block;
  margin-bottom: var(--lv-espace-2);
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-2);
  font-weight: var(--lv-typo-graisse-forte);
  color: var(--lv-couleur-accent);
}

.fonctions h3 {
  margin-bottom: var(--lv-espace-2);
  font-size: var(--lv-typo-taille-titre-3);
}

.fonctions p {
  margin: 0;
}

/* Blocs de contenu */
.bloc {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.bloc__tete {
  max-width: 46rem;
  margin-bottom: var(--lv-espace-8);
}

.accueil .bloc h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem);
  font-weight: var(--lv-typo-graisse-moyenne);
}

.bloc__intro {
  margin: var(--lv-espace-4) 0 0;
  font-size: var(--lv-typo-taille-titre-3);
  color: var(--lv-couleur-texte-discret);
}

.bloc__dedans--deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lv-espace-10) clamp(2rem, 5vw, 5rem);
}

.bloc__dedans--deux h2 {
  margin-bottom: var(--lv-espace-6);
}

.bloc--produit,
.bloc--offre {
  background-color: var(--lv-couleur-surface-enfoncee);
}

.bloc--mois {
  border-bottom: 1px solid var(--lv-couleur-bordure);
}

.puces {
  margin: 0;
  padding: 0;
  list-style: none;
}

.puces li {
  position: relative;
  padding-left: 1.25rem;
}

.puces li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--lv-couleur-accent);
}

/* Tuiles des modules et captures */
.tuile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--lv-espace-5);
  background-color: var(--lv-couleur-surface);
  border: 1px solid var(--lv-couleur-bordure);
  border-radius: var(--lv-rayon-grand);
}

.tuile--inverse .tuile__texte {
  order: 2;
}

.tuile h3 {
  margin-bottom: var(--lv-espace-3);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

.tuile__accroche {
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-3);
  color: var(--lv-couleur-accent-sobre);
}

.capture {
  margin: 0;
}

.capture__cadre {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lv-couleur-bordure);
  border-radius: var(--lv-rayon-grand);
  background-color: var(--lv-couleur-fond);
}

.capture__cadre::before {
  content: "";
  display: block;
  height: 1.75rem;
  background-color: var(--lv-couleur-surface-enfoncee);
  border-bottom: 1px solid var(--lv-couleur-bordure);
}

.capture__cadre .bandeau-fictif {
  position: absolute;
  top: 0.25rem;
  right: var(--lv-espace-2);
}

.capture figcaption {
  margin-top: var(--lv-espace-3);
  font-size: var(--lv-typo-taille-petite);
  color: var(--lv-couleur-texte-discret);
}

.capture figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-taille-cible);
}

/* Tuile sans capture : le texte à gauche, le détail à droite. */
.tuile--texte {
  align-items: start;
}

.tuile--texte .tuile__texte > :last-child {
  margin-bottom: 0;
}

.etats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.etats li {
  margin: 0;
  padding: var(--lv-espace-4) 0;
  border-top: 1px solid var(--lv-couleur-bordure);
}

.etats li:last-child {
  padding-bottom: 0;
}

.etats strong {
  display: block;
  margin-bottom: var(--lv-espace-1);
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-3);
}

/* Accroche : la question des e-mails sans réponse, mise en avant. */
.tuile--accroche {
  align-items: start;
  border: 2px solid var(--lv-couleur-accent);
}

.tuile--accroche h3 {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
  font-weight: var(--lv-typo-graisse-moyenne);
}

.tuile--accroche .tuile__accroche {
  margin: var(--lv-espace-3) 0 0;
}

.tuile--accroche p:last-child {
  margin-bottom: 0;
}

/* Frise d'un mois */
.frise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lv-espace-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.frise li {
  position: relative;
  margin: 0;
  padding-top: var(--lv-espace-6);
  border-top: 2px solid var(--lv-couleur-bordure-champ);
}

.frise li::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid var(--lv-couleur-accent);
  border-radius: 50%;
  background-color: var(--lv-couleur-fond);
}

.frise__date {
  margin-bottom: var(--lv-espace-2);
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-2);
  font-weight: var(--lv-typo-graisse-forte);
  color: var(--lv-couleur-accent);
}

.phrase {
  max-width: 46rem;
  margin: var(--lv-espace-8) 0 0;
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-3);
}

/* Ce que Localivia ne fait pas */
.non {
  margin: 0;
  padding: 0;
  list-style: none;
}

.non li {
  position: relative;
  padding: var(--lv-espace-3) 0 var(--lv-espace-3) 2rem;
  border-top: 1px solid var(--lv-couleur-bordure);
}

.non li + li {
  margin-top: 0;
}

.non li::before {
  content: "✕";
  position: absolute;
  left: 0.25rem;
  font-weight: var(--lv-typo-graisse-forte);
  color: var(--lv-couleur-accent);
}

/* Offre */
.modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lv-espace-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.modules li {
  margin: 0;
  padding: var(--lv-espace-5);
  background-color: var(--lv-couleur-surface);
  border: 1px solid var(--lv-couleur-bordure);
  border-radius: var(--lv-rayon-grand);
}

.modules li > :last-child {
  margin-bottom: 0;
}

.modules__nom {
  margin-bottom: var(--lv-espace-2);
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-2);
  font-weight: var(--lv-typo-graisse-forte);
  line-height: var(--lv-typo-interligne-titre);
}

.offre__suite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lv-espace-6);
  margin-top: var(--lv-espace-8);
}

.offre__suite > div {
  padding: var(--lv-espace-6);
  background-color: var(--lv-couleur-surface);
  border-radius: var(--lv-rayon-grand);
}

.offre__suite h3 {
  margin-bottom: var(--lv-espace-4);
  font-size: var(--lv-typo-taille-titre-2);
}

.appel-decompte {
  border: 2px solid var(--lv-couleur-accent);
}

/* Questions */
.question {
  border-top: 1px solid var(--lv-couleur-bordure);
}

.question:last-child {
  border-bottom: 1px solid var(--lv-couleur-bordure);
}

.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lv-espace-4);
  min-height: var(--lv-taille-cible-confortable);
  padding: var(--lv-espace-3) 0;
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-3);
  font-weight: var(--lv-typo-graisse-forte);
  cursor: pointer;
  list-style: none;
}

.question summary::-webkit-details-marker {
  display: none;
}

.question summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--lv-couleur-bordure-champ);
  border-radius: 50%;
  color: var(--lv-couleur-accent);
}

.question[open] summary::after {
  content: "−";
}

.question p {
  max-width: 44rem;
}

/* Appel final : la seule bande sombre */
.appel {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background-color: var(--lv-couleur-accent-sobre);
  color: var(--lv-couleur-texte-sur-accent);
}

.appel__dedans {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--lv-espace-4);
  text-align: center;
}

.appel h2 {
  margin-bottom: var(--lv-espace-4);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: var(--lv-typo-graisse-moyenne);
}

.appel__texte {
  font-size: var(--lv-typo-taille-titre-3);
}

.appel a:not(.bouton) {
  color: var(--lv-couleur-texte-sur-accent);
}

.appel :focus-visible {
  outline-color: var(--lv-couleur-texte-sur-accent);
}

.appel__agents {
  margin-top: var(--lv-espace-6);
  font-size: var(--lv-typo-taille-petite);
}

/* Pied de page */
.bas {
  font-size: var(--lv-typo-taille-petite);
}

.bas__dedans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--lv-espace-8);
  padding-top: var(--lv-espace-10);
  padding-bottom: var(--lv-espace-6);
}

.bas ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bas li + li {
  margin-top: var(--lv-espace-1);
}

.bas ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-taille-cible);
}

.bas__marque {
  margin-bottom: var(--lv-espace-2);
  font-family: var(--lv-police-titre);
  font-size: var(--lv-typo-taille-titre-2);
  font-weight: var(--lv-typo-graisse-forte);
  color: var(--lv-couleur-marque);
}

.accueil .bas__titre {
  margin: 0 0 var(--lv-espace-3);
  font-family: var(--lv-police-base);
  font-size: var(--lv-typo-taille-petite);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bas__fin {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--lv-espace-4);
  border-top: 1px solid var(--lv-couleur-bordure);
  color: var(--lv-couleur-texte-discret);
}

@media (max-width: 64rem) {
  .haut__nav {
    display: none;
  }

  .ouverture__dedans,
  .tuile,
  .bloc__dedans--deux,
  .offre__suite {
    grid-template-columns: minmax(0, 1fr);
  }

  .tuile--inverse .tuile__texte {
    order: 0;
  }

  .fonctions ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .frise,
  .modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .haut__agents {
    display: none;
  }

  .frise,
  .modules,
  .fonctions ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .liste-mois__feuille {
    padding: var(--lv-espace-4);
    box-shadow: none;
  }

  .tuile {
    padding: var(--lv-espace-4);
  }
}