/*
 * Pages publiques (P1 à P4). Toutes les couleurs et tailles viennent de
 * tokens.css, généré depuis les variables Figma : rien en dur ici.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Réduite aux icônes de ces pages : voir backend/scripts/public_fonts.py. */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("icones.woff2") format("woff2");
}

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

body {
  margin: 0;
  background: var(--color-surface-creme);
  color: var(--color-texte-principal);
  font: var(--texte-texte);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: var(--kit-bouton-bordure) solid var(--color-marque-rose);
  outline-offset: var(--kit-public-entete-bordure);
}

s {
  color: var(--color-texte-discret);
}

.icone {
  flex: none;
  font-family: var(--font-icones);
  font-weight: var(--kit-icone-graisse);
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

/* Lu par les lecteurs d'écran, invisible à l'écran. */
.lecteur {
  position: absolute;
  width: var(--kit-public-entete-bordure);
  height: var(--kit-public-entete-bordure);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.telephone {
  display: none;
}

.logo__corps {
  fill: var(--color-marque-rose);
}

.logo__oreilles {
  fill: var(--color-pale-rose-2);
}

.logo__yeux {
  fill: var(--color-marque-encre);
}

/* --- En-tête et pied --------------------------------------------------------- */

.entete {
  background: var(--color-surface-blanc);
  border-bottom: var(--kit-public-entete-bordure) solid
    var(--color-surface-gris-100);
}

.entete__contenu,
.pied__contenu,
.page {
  width: 100%;
  max-width: calc(
    var(--kit-public-page-largeur) + 2 * var(--kit-public-page-marge-h)
  );
  margin: 0 auto;
  padding-inline: var(--kit-public-page-marge-h);
}

.entete__contenu {
  display: flex;
  align-items: center;
  gap: var(--kit-public-entete-espace);
  padding-block: var(--kit-public-entete-marge-v);
}

.marque {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--kit-public-entete-marque-espace);
  font-size: var(--kit-public-entete-marque);
  font-weight: var(--kit-public-entete-marque-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-entete-marque-interlettrage);
}

.marque .logo {
  width: var(--kit-public-entete-logo);
  height: var(--kit-public-entete-logo);
}

.marque__fin {
  color: var(--color-marque-rose);
}

.entete__liens {
  display: flex;
  flex: 1;
  gap: var(--kit-public-entete-espace);
  min-width: 0;
  overflow: hidden;
  font-size: var(--kit-public-entete-lien);
  font-weight: var(--kit-public-entete-lien-graisse);
  white-space: nowrap;
}

.bouton {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--kit-public-entete-bouton-espace);
  padding-inline: var(--kit-public-entete-bouton-marge-h);
  font-weight: var(--kit-public-entete-bouton-texte-graisse);
  line-height: var(--kit-interligne-auto);
  text-align: center;
}

.bouton .icone {
  font-size: var(--kit-public-entete-bouton-icone);
  font-weight: var(--kit-icone-graisse-active);
}

.bouton--entete,
.bouton--noir {
  height: var(--kit-public-entete-bouton-hauteur);
  margin-left: auto;
  border-radius: var(--kit-public-entete-bouton-rayon);
  background: var(--color-marque-rose);
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-entete-bouton-texte);
}

.bouton--noir {
  background: var(--color-marque-encre);
}

.pied {
  background: var(--color-marque-encre);
  color: var(--color-texte-discret);
  font-size: var(--kit-public-pied-taille);
  font-weight: var(--kit-public-pied-graisse);
}

.pied__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-public-pied-espace);
  padding-block: var(--kit-public-pied-marge-v);
}

.pied__contenu p {
  flex: 1;
}

.pied__marque {
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-pied-marque);
  font-weight: var(--kit-public-pied-marque-graisse);
  letter-spacing: var(--kit-public-pied-marque-interlettrage);
}

.pied__marque span,
.pied__contenu a {
  color: var(--color-marque-jaune);
}

.pied__contenu a {
  font-weight: var(--kit-public-pied-lien-graisse);
}

/* --- Page -------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-page-espace);
  min-height: 60vh;
  padding-top: var(--kit-public-page-marge-haut);
  padding-bottom: var(--kit-public-page-marge-bas);
}

.fil {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-public-fil-espace);
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-fil-texte);
  font-weight: var(--kit-public-fil-texte-graisse);
}

.fil a {
  color: var(--color-marque-rose);
}

.fil [aria-hidden] {
  color: var(--color-texte-discret);
}

.titre {
  font-size: var(--kit-public-titre-taille);
  font-weight: var(--kit-public-titre-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-titre-interlettrage);
}

.intro,
.vide {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-intro-taille);
  font-weight: var(--kit-public-intro-graisse);
}

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-public-puce-espace);
}

.puce {
  padding: var(--kit-public-puce-marge-v) var(--kit-public-puce-marge-h);
  border: var(--kit-public-puce-bordure) solid var(--color-surface-gris-100);
  border-radius: var(--kit-public-puce-rayon);
  background: var(--color-surface-blanc);
  font-size: var(--kit-public-puce-taille);
  font-weight: var(--kit-public-puce-graisse);
  line-height: var(--kit-interligne-auto);
}

.puce--active {
  border-color: var(--color-marque-encre);
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

.section {
  margin-top: var(--kit-public-section-marge-haut);
  font-size: var(--kit-public-section-taille);
  font-weight: var(--kit-public-section-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-section-interlettrage);
}

/* --- Carte d'une offre ------------------------------------------------------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kit-carte-largeur), 1fr));
  gap: var(--kit-public-grille-espace);
}

.grille > li {
  max-width: calc(2 * var(--kit-carte-largeur));
}

.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--kit-carte-rayon);
  background: var(--color-surface-blanc);
  box-shadow: var(--ombre-carte);
}

.carte__visuel,
.offre__visuel,
.app__tuile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texte-sur-fond);
}

.carte__visuel {
  height: var(--kit-carte-visuel-hauteur);
}

.carte__visuel .icone {
  font-size: var(--kit-carte-visuel-icone);
}

.carte__visuel--photo {
  background: linear-gradient(
    135deg,
    var(--kit-carte-degrade-photo-debut),
    var(--kit-carte-degrade-photo-fin)
  );
}

.carte__visuel--video {
  background: linear-gradient(
    135deg,
    var(--kit-carte-degrade-video-debut),
    var(--kit-carte-degrade-video-fin)
  );
}

/* Photo posée sur le dégradé : si elle manque, l'icône reste visible. */
.visuel__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.badge {
  position: absolute;
  top: var(--kit-carte-badge-decalage);
  left: var(--kit-carte-badge-decalage);
  padding: var(--kit-badge-petit-marge-v) var(--kit-badge-petit-marge-h);
  border-radius: var(--kit-badge-petit-rayon);
  background: var(--color-marque-jaune);
  color: var(--color-texte-principal);
  font-size: var(--kit-badge-petit-texte);
  font-weight: var(--kit-badge-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-badge-interlettrage);
}

.badge--grand {
  top: var(--kit-public-offre-badge-decalage);
  left: var(--kit-public-offre-badge-decalage);
  padding: var(--kit-badge-grand-marge-v) var(--kit-badge-grand-marge-h);
  border-radius: var(--kit-badge-grand-rayon);
  font-size: var(--kit-badge-grand-texte);
}

.carte__lecture,
.offre__lecture {
  position: absolute;
  right: var(--kit-carte-lecture-droite);
  bottom: var(--kit-carte-lecture-bas);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kit-carte-lecture);
  height: var(--kit-carte-lecture);
  border-radius: var(--kit-carte-lecture-rayon);
  background: var(--color-marque-encre);
}

.carte__lecture .icone {
  font-size: var(--kit-carte-lecture-icone);
}

.carte__texte {
  display: flex;
  flex-direction: column;
  gap: var(--kit-carte-espace);
  padding: var(--kit-carte-marge-haut) var(--kit-carte-marge) var(--kit-carte-marge);
}

.carte__titre {
  font-size: var(--kit-carte-titre);
  font-weight: var(--kit-carte-titre-graisse);
  line-height: var(--kit-interligne-auto);
}

.carte__sous-titre {
  overflow: hidden;
  color: var(--color-texte-secondaire);
  font-size: var(--kit-carte-sous-titre);
  font-weight: var(--kit-carte-sous-titre-graisse);
  line-height: var(--kit-interligne-auto);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carte__prix {
  display: flex;
  align-items: baseline;
  gap: var(--kit-carte-prix-espace);
  font-size: var(--kit-carte-ancien-prix);
  font-weight: var(--kit-carte-ancien-prix-graisse);
}

.prix {
  color: var(--color-marque-rose);
  font-size: var(--kit-carte-prix);
  font-weight: var(--kit-carte-prix-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-carte-prix-interlettrage);
}

/* --- Fiche d'un commerce (P2) ------------------------------------------------ */

.banniere {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--kit-public-banniere-hauteur);
  overflow: hidden;
  border-radius: var(--kit-public-banniere-rayon);
  background: linear-gradient(
    135deg,
    var(--kit-carte-degrade-video-debut),
    var(--kit-carte-degrade-video-fin)
  );
  color: var(--color-pale-rose-2);
}

.banniere .icone {
  font-size: var(--kit-public-banniere-icone);
}

.commerce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-public-commerce-espace);
}

.commerce__pastille {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kit-public-commerce-pastille);
  height: var(--kit-public-commerce-pastille);
  border: var(--kit-public-commerce-pastille-bordure) solid
    var(--color-surface-blanc);
  border-radius: var(--kit-public-commerce-pastille-rayon);
  background: var(--color-marque-encre);
  color: var(--color-marque-jaune);
}

.commerce__pastille .icone {
  font-size: var(--kit-public-commerce-pastille-icone);
  font-weight: var(--kit-icone-graisse-active);
}

.commerce__texte {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--kit-public-commerce-texte-espace);
  min-width: 0;
}

.commerce__texte h1 {
  font-size: var(--kit-public-commerce-nom);
  font-weight: var(--kit-public-commerce-nom-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-commerce-nom-interlettrage);
}

.commerce__texte p {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-commerce-detail);
  font-weight: var(--kit-public-commerce-detail-graisse);
}

.description {
  font-size: var(--kit-public-commerce-description);
  font-weight: var(--kit-public-commerce-description-graisse);
}

.adresses {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--kit-public-adresse-largeur), 1fr)
  );
  gap: var(--kit-public-adresse-colonne-espace);
}

.adresse {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-adresse-espace);
  padding: var(--kit-public-adresse-marge);
  border-radius: var(--kit-public-adresse-rayon);
  background: var(--color-surface-blanc);
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-adresse-taille);
  font-weight: var(--kit-public-adresse-graisse);
}

.adresse h3 {
  color: var(--color-texte-principal);
  font-size: var(--kit-public-adresse-nom);
  font-weight: var(--kit-public-adresse-nom-graisse);
  line-height: var(--kit-interligne-auto);
}

.adresse__horaires {
  color: var(--color-texte-principal);
  font-weight: var(--kit-public-adresse-horaires-graisse);
}

.adresse a {
  display: flex;
  align-items: center;
  gap: var(--kit-public-adresse-lien-espace);
  color: var(--color-marque-rose);
  font-weight: var(--kit-public-adresse-lien-graisse);
}

.adresse a .icone {
  font-size: var(--kit-public-adresse-lien-icone);
  font-weight: var(--kit-icone-graisse-active);
}

/* --- Page d'une offre (P3) --------------------------------------------------- */

.offre {
  display: flex;
  align-items: flex-start;
  gap: var(--kit-public-offre-espace);
}

.offre__visuel {
  flex: none;
  width: var(--kit-public-offre-visuel-largeur);
  max-width: 55%;
  height: var(--kit-public-offre-visuel-hauteur);
  overflow: hidden;
  border-radius: var(--kit-public-offre-visuel-rayon);
}

.offre__visuel > .icone {
  font-size: var(--kit-public-offre-visuel-icone);
}

.offre__lecture {
  right: var(--kit-public-offre-badge-decalage);
  bottom: var(--kit-public-offre-badge-decalage);
  width: var(--kit-public-offre-lecture);
  height: var(--kit-public-offre-lecture);
  border-radius: var(--kit-public-offre-lecture-rayon);
}

.offre__lecture .icone {
  font-size: var(--kit-public-offre-lecture-icone);
}

.offre__texte {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--kit-public-offre-colonne-espace);
  min-width: 0;
}

.offre__texte h1 {
  font-size: var(--kit-public-offre-titre);
  font-weight: var(--kit-public-offre-titre-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-offre-titre-interlettrage);
}

.offre__commerce {
  align-self: flex-start;
  color: var(--color-marque-rose);
  font-size: var(--kit-public-offre-commerce);
  font-weight: var(--kit-public-offre-commerce-graisse);
  text-decoration: underline;
}

.offre__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-public-offre-prix-espace);
  font-size: var(--kit-public-offre-ancien-prix);
  font-weight: var(--kit-public-offre-ancien-prix-graisse);
}

.offre__prix .prix {
  font-size: var(--kit-public-offre-prix);
  font-weight: var(--kit-public-offre-prix-graisse);
  letter-spacing: var(--kit-public-offre-prix-interlettrage);
}

.offre__economie {
  padding: var(--kit-public-offre-economie-marge-v)
    var(--kit-public-offre-economie-marge-h);
  border-radius: var(--kit-public-offre-economie-rayon);
  background: var(--color-etat-succes-pale);
  color: var(--color-etat-succes);
  font-size: var(--kit-public-offre-economie);
  font-weight: var(--kit-public-offre-economie-graisse);
}

.offre__description {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-offre-description);
  font-weight: var(--kit-public-offre-description-graisse);
}

.offre__lignes {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-offre-colonne-espace);
  font-size: var(--kit-public-offre-ligne);
  font-weight: var(--kit-public-offre-ligne-graisse);
}

.offre__lignes li {
  display: flex;
  align-items: center;
  gap: var(--kit-public-offre-ligne-espace);
}

.offre__lignes .icone {
  font-size: var(--kit-public-offre-ligne-icone);
}

.offre__alerte {
  display: flex;
  align-items: center;
  gap: var(--kit-public-offre-alerte-espace);
  padding: var(--kit-public-offre-alerte-marge);
  border-radius: var(--kit-public-offre-alerte-rayon);
  background: var(--color-pale-jaune);
  font-size: var(--kit-public-offre-alerte);
  font-weight: var(--kit-public-offre-alerte-graisse);
}

.offre__alerte .icone {
  color: var(--color-etat-alerte);
  font-size: var(--kit-public-offre-alerte-icone);
  font-weight: var(--kit-icone-graisse-active);
}

.offre__alerte--terminee {
  background: var(--color-surface-gris-100);
}

.bouton--offre {
  height: var(--kit-public-offre-bouton-hauteur);
  border-radius: var(--kit-public-offre-bouton-rayon);
  background: var(--color-marque-rose);
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-offre-bouton-texte);
  font-weight: var(--kit-public-offre-bouton-texte-graisse);
}

.bouton--offre .icone {
  font-size: var(--kit-public-offre-bouton-icone);
}

.bouton--etroit {
  align-self: flex-start;
}

.offre__note {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-offre-note);
  font-weight: var(--kit-public-offre-note-graisse);
}

/* --- App non installée (P4) -------------------------------------------------- */

.app {
  background: var(--color-marque-rose);
  color: var(--color-texte-sur-fond);
}

.app__contenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--kit-public-app-espace);
  width: 100%;
  max-width: var(--kit-public-app-largeur);
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--kit-public-app-marge-h);
  text-align: center;
}

.app__contenu .logo {
  align-self: center;
  width: var(--kit-public-app-logo);
  height: var(--kit-public-app-logo);
}

.app__contenu .logo__corps {
  fill: var(--color-surface-blanc);
}

.app__marque {
  font-size: var(--kit-public-app-marque);
  font-weight: var(--kit-public-app-marque-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-app-marque-interlettrage);
}

.app__marque span {
  color: var(--color-marque-jaune);
}

.app__contenu h1 {
  font-size: var(--kit-public-app-titre);
  font-weight: var(--kit-public-app-titre-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-app-titre-interlettrage);
}

.app__carte {
  display: flex;
  align-items: center;
  gap: var(--kit-public-app-carte-espace);
  padding: var(--kit-public-app-carte-marge);
  border-radius: var(--kit-public-app-carte-rayon);
  background: var(--color-surface-blanc);
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-app-carte-detail);
  font-weight: var(--kit-public-app-carte-detail-graisse);
  text-align: left;
}

.app__tuile {
  flex: none;
  width: var(--kit-public-app-tuile);
  height: var(--kit-public-app-tuile);
  border-radius: var(--kit-public-app-tuile-rayon);
}

.app__tuile .icone {
  font-size: var(--kit-public-app-tuile-icone);
}

.app__carte-texte {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-app-texte-espace);
  min-width: 0;
}

.app__carte-texte span:first-child {
  color: var(--color-texte-principal);
  font-size: var(--kit-public-app-carte-titre);
  font-weight: var(--kit-public-app-carte-titre-graisse);
}

.bouton--app {
  min-height: var(--kit-public-app-bouton-hauteur);
  border-radius: var(--kit-public-app-bouton-rayon);
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-app-bouton-texte);
  font-weight: var(--kit-public-app-bouton-texte-graisse);
}

.bouton--app .icone {
  font-size: var(--kit-public-app-bouton-icone);
}

.bouton--clair {
  background: var(--color-surface-blanc);
  color: var(--color-texte-principal);
}

.app__note,
.app__retour {
  font-size: var(--kit-public-app-note);
  font-weight: var(--kit-public-app-note-graisse);
}

.app__retour {
  text-decoration: underline;
}

/* --- Téléphone --------------------------------------------------------------- */

@media (max-width: 720px) {
  .ordinateur,
  .entete__liens,
  .bouton--entete .icone {
    display: none;
  }

  .telephone {
    display: inline;
  }

  .titre {
    font-size: var(--kit-public-titre-telephone);
  }

  .grille {
    grid-template-columns: 1fr;
  }

  .grille > li {
    max-width: none;
  }

  .banniere {
    height: var(--kit-public-banniere-hauteur-telephone);
  }

  .banniere .icone {
    font-size: var(--kit-public-banniere-icone-telephone);
  }

  .commerce__texte {
    flex-basis: 50%;
  }

  .commerce__texte h1 {
    font-size: var(--kit-public-commerce-nom-telephone);
  }

  .commerce .bouton--noir {
    width: 100%;
    margin-left: 0;
  }

  .offre {
    flex-direction: column;
    align-items: stretch;
  }

  .offre__visuel {
    width: 100%;
    max-width: none;
    height: var(--kit-public-offre-visuel-hauteur-telephone);
  }

  .offre__visuel > .icone {
    font-size: var(--kit-public-offre-visuel-icone-telephone);
  }

  .offre__texte h1 {
    font-size: var(--kit-public-offre-titre-telephone);
  }

  .offre__prix .prix {
    font-size: var(--kit-public-offre-prix-telephone);
  }

  .offre__note {
    text-align: center;
  }

  .pied__contenu p {
    flex-basis: 100%;
  }
}

/* --- Accueil (L1, L1m) : présentation et liste d'attente ---------------------- */

.accueil__contenu {
  width: 100%;
  max-width: calc(var(--kit-public-accueil-largeur) + 2 * var(--kit-public-accueil-marge-h));
  margin: 0 auto;
  padding-inline: var(--kit-public-accueil-marge-h);
}

.action {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: var(--kit-public-accueil-bouton-hauteur);
  padding-inline: var(--kit-public-accueil-bouton-marge-h);
  border: 0;
  border-radius: var(--kit-public-accueil-bouton-rayon);
  font: inherit;
  font-size: var(--kit-public-accueil-bouton-texte);
  font-weight: var(--kit-public-accueil-bouton-graisse);
  line-height: var(--kit-interligne-auto);
  text-align: center;
  cursor: pointer;
}

.action--moyen {
  min-height: var(--kit-public-accueil-bouton-hauteur-moyen);
}

.action--jaune {
  background: var(--color-marque-jaune);
  color: var(--color-marque-encre);
}

.action--noir {
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

.action--rose {
  background: var(--color-marque-rose);
  color: var(--color-texte-sur-fond);
}

.heros {
  overflow: hidden;
  padding-top: var(--kit-public-accueil-heros-marge-haut);
  background: var(--color-marque-rose);
  color: var(--color-texte-sur-fond);
}

.heros__nav {
  display: flex;
  align-items: center;
  gap: var(--kit-public-accueil-heros-nav-espace);
}

.heros__marque {
  margin-right: auto;
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-accueil-heros-marque);
  font-weight: var(--kit-public-accueil-heros-marque-graisse);
}

.heros__marque .logo {
  width: var(--kit-public-accueil-heros-logo);
  height: var(--kit-public-accueil-heros-logo);
}

.heros__marque .logo__corps {
  fill: var(--color-surface-blanc);
}

.heros__marque .marque__fin {
  color: var(--color-marque-jaune);
}

.heros__lien {
  font-size: var(--kit-public-accueil-heros-lien);
  font-weight: var(--kit-public-accueil-heros-lien-graisse);
}

.heros__rangee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kit-public-accueil-heros-espace);
  margin-top: var(--kit-public-accueil-heros-espace);
}

.heros__accroche {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kit-public-accueil-heros-accroche-espace);
  max-width: var(--kit-public-accueil-heros-accroche-largeur);
  padding-bottom: var(--kit-public-accueil-heros-accroche-marge-bas);
}

.heros__pastille,
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--kit-public-accueil-heros-pastille-espace);
  border-radius: var(--rayon-pilule);
}

.heros__pastille {
  padding: var(--kit-public-accueil-heros-pastille-marge-v) var(--kit-public-accueil-heros-pastille-marge-h);
  background: var(--color-marque-encre);
  font-size: var(--kit-public-accueil-heros-pastille-texte);
  font-weight: var(--kit-public-accueil-heros-pastille-graisse);
}

.heros__pastille .icone {
  color: var(--color-marque-jaune);
  font-size: var(--kit-public-accueil-heros-pastille-icone);
}

.heros h1 {
  font-size: var(--kit-public-accueil-heros-titre);
  font-weight: var(--kit-public-accueil-heros-titre-graisse);
  line-height: var(--kit-public-accueil-heros-titre-interligne);
  letter-spacing: var(--kit-public-accueil-heros-titre-interlettrage);
}

.heros h1 em {
  color: var(--color-marque-jaune);
  font-style: normal;
}

.heros__texte {
  max-width: var(--kit-public-accueil-heros-texte-largeur);
  font-size: var(--kit-public-accueil-heros-texte);
  font-weight: var(--kit-public-accueil-heros-texte-graisse);
  line-height: var(--kit-public-accueil-heros-texte-interligne);
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-public-accueil-heros-actions-espace);
}

.heros__reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-public-accueil-heros-reassurance-espace);
  font-size: var(--kit-public-accueil-heros-pastille-texte);
  font-weight: var(--kit-public-accueil-heros-pastille-graisse);
}

.heros__reassurance li {
  display: flex;
  align-items: center;
  gap: var(--kit-public-accueil-heros-reassurance-icone-espace);
}

.heros__reassurance .icone {
  color: var(--color-marque-jaune);
  font-size: var(--kit-public-accueil-heros-pastille-icone);
}

.heros__visuel {
  flex: none;
  align-self: flex-end;
  width: var(--kit-public-accueil-heros-visuel);
  margin-bottom: var(--kit-public-accueil-heros-visuel-debord);
}

.heros__image--telephone {
  display: none;
}

.heros__visuel img,
.pro__visuel {
  width: 100%;
  height: auto;
}

.heros__image--ordinateur,
.pro__visuel {
  display: block;
}

.promesses {
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

.promesses ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--kit-public-accueil-promesses-liste-espace);
  padding-block: var(--kit-public-accueil-promesses-marge-v);
}

.promesses li,
.pro__atouts li {
  display: flex;
  align-items: center;
  gap: var(--kit-public-accueil-promesses-espace);
}

.promesses li > span:last-child,
.pro__atouts li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-promesses-detail-espace);
  color: var(--color-texte-discret);
  font-size: var(--kit-public-accueil-promesses-detail);
  font-weight: var(--kit-public-accueil-promesses-detail-graisse);
}

.promesses strong,
.pro__atouts strong {
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-accueil-promesses-titre);
  font-weight: var(--kit-public-accueil-promesses-titre-graisse);
}

.promesses__pastille {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kit-public-accueil-promesses-pastille);
  height: var(--kit-public-accueil-promesses-pastille);
  border-radius: var(--kit-public-accueil-promesses-pastille-rayon);
  background: var(--color-marque-jaune);
  color: var(--color-marque-encre);
}

.promesses__pastille .icone {
  font-size: var(--kit-public-accueil-promesses-icone);
}

.bloc {
  padding-block: var(--kit-public-accueil-section-marge-v);
}

.bloc--jaune {
  padding-block: var(--kit-public-accueil-ville-marge-v);
  background: var(--color-pale-jaune);
}

.bloc--encre {
  overflow: hidden;
  padding-block: 0;
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

.bloc--rose {
  background: var(--color-marque-rose);
}

.bloc__contenu {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-section-entete-espace);
}

.bloc__contenu--centre {
  align-items: center;
  text-align: center;
}

.bloc h2 {
  font-size: var(--kit-public-accueil-section-titre);
  font-weight: var(--kit-public-accueil-section-titre-graisse);
  line-height: var(--kit-interligne-auto);
  letter-spacing: var(--kit-public-accueil-section-titre-interlettrage);
}

.bloc__sous-titre {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-section-sous-titre);
  font-weight: var(--kit-public-accueil-section-sous-titre-graisse);
}

.bloc__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kit-public-accueil-section-entete-espace);
}

.bloc__titres {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kit-public-accueil-section-entete-espace);
}

.etiquette {
  padding: var(--kit-public-accueil-section-etiquette-marge-v) var(--kit-public-accueil-section-etiquette-marge-h);
  font-size: var(--kit-public-accueil-section-etiquette-texte);
  font-weight: var(--kit-public-accueil-section-etiquette-graisse);
}

.etiquette .icone {
  color: var(--color-marque-jaune);
  font-size: var(--kit-public-accueil-section-etiquette-icone);
}

.etiquette--rose {
  background: var(--color-pale-rose);
  color: var(--color-marque-rose);
}

.etiquette--encre {
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

.etiquette--jaune {
  background: var(--color-marque-jaune);
  color: var(--color-marque-encre);
}

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kit-public-accueil-etape-grille-espace);
  width: 100%;
  margin: calc(var(--kit-public-accueil-section-espace) - var(--kit-public-accueil-section-entete-espace)) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.etape {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-etape-espace);
  padding: var(--kit-public-accueil-etape-marge);
  border-radius: var(--kit-public-accueil-etape-rayon);
  background: var(--color-surface-blanc);
  box-shadow: 0 var(--kit-public-accueil-etape-ombre-y) var(--kit-public-accueil-etape-ombre-flou)
    color-mix(in srgb, var(--color-marque-encre) 6%, transparent);
}

.etape__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.etape__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kit-public-accueil-etape-pastille);
  height: var(--kit-public-accueil-etape-pastille);
  border-radius: var(--kit-public-accueil-etape-pastille-rayon);
}

.etape__pastille .icone {
  font-size: var(--kit-public-accueil-etape-icone);
}

.etape__pastille--rose {
  background: var(--color-pale-rose);
  color: var(--color-marque-rose);
}

.etape__pastille--jaune {
  background: var(--color-pale-jaune);
  color: var(--color-marque-encre);
}

.etape__pastille--violet {
  background: var(--color-pale-violet);
  color: var(--color-marque-violet);
}

.etape__numero {
  color: var(--color-surface-gris-100);
  font-size: var(--kit-public-accueil-etape-numero);
  font-weight: var(--kit-public-accueil-etape-numero-graisse);
}

.etape h3 {
  font-size: var(--kit-public-accueil-etape-titre);
  font-weight: var(--kit-public-accueil-etape-titre-graisse);
}

.etape p {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-etape-texte);
  font-weight: var(--kit-public-accueil-etape-texte-graisse);
  line-height: var(--kit-public-accueil-etape-texte-interligne);
}

.accueil__offres {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: calc(
    var(--kit-public-accueil-ville-espace) -
      var(--kit-public-accueil-section-entete-espace)
  );
}

.accueil__offres > li {
  max-width: none;
}

.pro {
  display: flex;
  align-items: center;
  gap: var(--kit-public-accueil-pro-espace);
}

.pro__visuel {
  flex: none;
  align-self: flex-end;
  width: var(--kit-public-accueil-pro-visuel);
}

.pro__arguments {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kit-public-accueil-pro-arguments-espace);
  padding-block: var(--kit-public-accueil-section-marge-v);
}

.pro__atouts {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-pro-atouts-espace);
}

.pro__atouts li {
  gap: var(--kit-public-accueil-pro-atout-espace);
}

.pro__atouts li > span:last-child {
  gap: var(--kit-public-accueil-pro-texte-espace);
  font-size: var(--kit-public-accueil-pro-texte);
  font-weight: var(--kit-public-accueil-pro-texte-graisse);
}

.pro__pastille {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kit-public-accueil-pro-pastille);
  height: var(--kit-public-accueil-pro-pastille);
  border-radius: var(--kit-public-accueil-pro-pastille-rayon);
  background: var(--color-marque-encre-2);
  color: var(--color-marque-jaune);
}

.pro__pastille .icone {
  font-size: var(--kit-public-accueil-pro-icone);
}

.pro__offre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kit-public-accueil-pro-offre-espace);
  align-self: stretch;
  padding: var(--kit-public-accueil-pro-offre-marge-v) var(--kit-public-accueil-pro-offre-marge-h);
  border-radius: var(--kit-public-accueil-pro-offre-rayon);
  background: var(--color-marque-encre-2);
}

.pro__offre p {
  display: flex;
  flex-direction: column;
  color: var(--color-texte-discret);
  font-size: var(--kit-public-accueil-pro-note);
  font-weight: var(--kit-public-accueil-pro-note-graisse);
}

.pro__prix {
  display: flex;
  align-items: baseline;
  gap: var(--kit-public-accueil-pro-prix-espace);
  color: var(--color-texte-sur-fond);
  font-size: var(--kit-public-accueil-pro-texte);
}

.pro__prix strong {
  color: var(--color-marque-jaune);
  font-size: var(--kit-public-accueil-pro-prix);
  font-weight: var(--kit-public-accueil-pro-prix-graisse);
  line-height: var(--kit-interligne-auto);
}

.pro__note {
  color: var(--color-texte-discret);
  font-size: var(--kit-public-accueil-pro-note);
  font-weight: var(--kit-public-accueil-pro-note-graisse);
}

.attente {
  display: flex;
  max-width: var(--kit-public-accueil-attente-largeur);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--kit-public-accueil-attente-rayon);
  background: var(--color-surface-blanc);
  box-shadow: 0 var(--kit-public-accueil-attente-ombre-y) var(--kit-public-accueil-attente-ombre-flou)
    color-mix(in srgb, var(--color-marque-encre) 22%, transparent);
}

.attente__promesse,
.attente__formulaire,
.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-attente-espace);
}

.attente__promesse {
  flex: none;
  width: var(--kit-public-accueil-attente-promesse-largeur);
  padding: var(--kit-public-accueil-attente-marge-v) var(--kit-public-accueil-attente-marge-h);
  background: var(--color-pale-jaune);
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-pro-texte);
  font-weight: var(--kit-public-accueil-pro-texte-graisse);
  line-height: var(--kit-public-accueil-etape-texte-interligne);
}

.attente__promesse h2 {
  color: var(--color-texte-principal);
}

.attente__promesse ul {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-attente-espace);
}

.attente__promesse li {
  display: flex;
  align-items: center;
  gap: var(--kit-public-accueil-attente-point-espace);
  color: var(--color-texte-principal);
  font-size: var(--kit-public-accueil-attente-point-texte);
  font-weight: var(--kit-public-accueil-attente-point-graisse);
  line-height: var(--kit-interligne-auto);
}

.attente__promesse .icone {
  flex: none;
  color: var(--color-marque-rose);
  font-size: var(--kit-public-accueil-attente-point-icone);
}

.attente__formulaire {
  flex: 1;
  min-width: 0;
  padding: var(--kit-public-accueil-attente-marge-v) var(--kit-public-accueil-attente-marge-h);
}

.bascule__choix {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bascule {
  display: flex;
  gap: var(--kit-public-accueil-attente-bascule-marge);
  padding: var(--kit-public-accueil-attente-bascule-marge);
  border-radius: var(--rayon-pilule);
  background: var(--color-surface-gris-100);
}

.bascule label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--kit-public-accueil-attente-option-espace);
  padding: var(--kit-public-accueil-attente-option-marge-v) var(--kit-public-accueil-attente-option-marge-h);
  border-radius: var(--rayon-pilule);
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-attente-option-texte);
  font-weight: var(--kit-public-accueil-attente-option-graisse);
  cursor: pointer;
}

.bascule .icone {
  font-size: var(--kit-public-accueil-attente-option-icone);
}

#profil-habitant:checked ~ .bascule label[for="profil-habitant"],
#profil-commercant:checked ~ .bascule label[for="profil-commercant"] {
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

#profil-habitant:checked ~ .bascule label[for="profil-habitant"] .icone,
#profil-commercant:checked ~ .bascule label[for="profil-commercant"] .icone {
  color: var(--color-marque-jaune);
}

#profil-habitant:focus-visible ~ .bascule label[for="profil-habitant"],
#profil-commercant:focus-visible ~ .bascule label[for="profil-commercant"] {
  outline: var(--kit-public-accueil-attente-champ-bordure) solid var(--color-marque-rose);
}

.formulaire {
  display: none;
}

#profil-habitant:checked ~ .formulaire--habitant,
#profil-commercant:checked ~ .formulaire--commercant {
  display: flex;
}

.formulaire__deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kit-public-accueil-attente-champs-espace);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--kit-public-accueil-attente-champ-espace);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-attente-libelle);
  font-weight: var(--kit-public-accueil-attente-libelle-graisse);
}

.champ legend {
  margin-bottom: var(--kit-public-accueil-attente-point-espace);
  padding: 0;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"] {
  width: 100%;
  height: var(--kit-public-accueil-attente-champ-hauteur);
  padding: 0 var(--kit-public-accueil-attente-champ-marge-h);
  border: var(--kit-public-accueil-attente-champ-bordure) solid var(--color-surface-gris-100);
  border-radius: var(--kit-public-accueil-attente-champ-rayon);
  background: var(--color-surface-blanc);
  color: var(--color-texte-principal);
  font: inherit;
  font-size: var(--kit-public-accueil-attente-champ-texte);
  font-weight: var(--kit-public-accueil-attente-champ-graisse);
}

.champ input::placeholder {
  color: var(--color-texte-discret);
}

.champ input:focus-visible {
  border-color: var(--color-marque-encre);
  outline: none;
}

.champ input[aria-invalid="true"] {
  border-color: var(--color-etat-erreur);
}

.champ__erreur {
  color: var(--color-etat-erreur);
}

.choix__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-public-accueil-attente-choix-espace);
}

.choix input {
  position: absolute;
  opacity: 0;
}

.choix > span {
  display: inline-flex;
  align-items: center;
  gap: var(--kit-public-accueil-attente-choix-icone-espace);
  padding: var(--kit-public-accueil-attente-choix-marge-v) var(--kit-public-accueil-attente-choix-marge-h);
  border: var(--kit-public-accueil-attente-champ-bordure) solid var(--color-surface-gris-100);
  border-radius: var(--rayon-pilule);
  color: var(--color-texte-principal);
  font-size: var(--kit-public-accueil-attente-choix-texte);
  font-weight: var(--kit-public-accueil-attente-choix-graisse);
  cursor: pointer;
}

.choix .icone {
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-attente-choix-icone);
}

.choix input:checked + span {
  border-color: var(--color-marque-encre);
  background: var(--color-marque-encre);
  color: var(--color-texte-sur-fond);
}

.choix input:checked + span .icone {
  color: var(--color-marque-jaune);
}

.choix input:focus-visible + span {
  border-color: var(--color-marque-rose);
}

.attente__note {
  color: var(--color-texte-discret);
  font-size: var(--kit-public-accueil-attente-note);
  font-weight: var(--kit-public-accueil-attente-note-graisse);
}

.attente__note a {
  text-decoration: underline;
}

.attente__succes {
  align-items: center;
  justify-content: center;
  color: var(--color-texte-secondaire);
  font-size: var(--kit-public-accueil-pro-texte);
  font-weight: var(--kit-public-accueil-pro-texte-graisse);
  text-align: center;
}

.attente__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kit-public-accueil-attente-succes-pastille);
  height: var(--kit-public-accueil-attente-succes-pastille);
  border-radius: var(--rayon-pilule);
  background: var(--color-etat-succes-pale);
  color: var(--color-etat-succes);
}

.attente__coche .icone {
  font-size: var(--kit-public-accueil-attente-succes-icone);
}

.attente__succes h3 {
  color: var(--color-texte-principal);
  font-size: var(--kit-public-accueil-attente-succes-titre);
  font-weight: var(--kit-public-accueil-attente-succes-titre-graisse);
}

.accueil__pied {
  padding-block: var(--kit-public-accueil-pied-marge-v);
  background: var(--color-marque-encre);
  color: var(--color-texte-discret);
  font-size: var(--kit-public-accueil-pied-texte);
  font-weight: var(--kit-public-accueil-pied-texte-graisse);
}

.accueil__pied .accueil__contenu,
.accueil__pied nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-public-accueil-pied-espace);
}

.accueil__pied nav {
  margin-left: auto;
  color: var(--color-texte-sur-fond);
}

.accueil__pied-marque {
  color: var(--color-surface-blanc);
  font-size: var(--kit-public-accueil-pied-marque);
  font-weight: var(--kit-public-accueil-pied-marque-graisse);
}

.accueil__pied-marque span {
  color: var(--color-marque-rose);
}

@media (max-width: 900px) {
  .accueil__contenu {
    padding-inline: var(--kit-public-accueil-marge-h-telephone);
  }

  .heros__rangee,
  .pro {
    flex-direction: column;
    align-items: stretch;
  }

  .heros__accroche {
    padding-bottom: 0;
  }

  .heros h1 {
    font-size: var(--kit-public-accueil-heros-titre-telephone);
  }

  .heros__actions,
  .heros__actions .action {
    width: 100%;
  }

  .heros__visuel .heros__image--ordinateur {
    display: none;
  }

  .heros__visuel .heros__image--telephone {
    display: block;
  }

  .heros__visuel {
    align-self: center;
    width: var(--kit-public-accueil-heros-visuel-telephone);
    max-width: 100%;
  }

  .promesses ul {
    flex-direction: column;
  }

  .bloc,
  .bloc--jaune,
  .pro__arguments {
    padding-block: var(--kit-public-accueil-section-marge-v-telephone);
  }

  .bloc--encre {
    padding-block: 0;
  }

  .bloc__contenu--centre {
    align-items: flex-start;
    text-align: left;
  }

  .bloc h2 {
    font-size: var(--kit-public-accueil-section-titre-telephone);
  }

  .etapes {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }

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

  .pro__visuel {
    display: none;
  }

  .pro__offre .action,
  .bloc__entete .action {
    width: 100%;
  }

  .attente {
    flex-direction: column;
  }

  .attente__promesse {
    width: auto;
  }

  .attente__promesse,
  .attente__formulaire {
    padding: var(--kit-public-accueil-attente-marge-telephone);
  }

  .formulaire__deux {
    grid-template-columns: minmax(0, 1fr);
  }

  .accueil__pied nav {
    margin-left: 0;
  }
}