/* =====================================================================
   Haria - le strict minimum par-dessus le template Synex.
   On ne touche PAS au design : uniquement le logo, le calibrage des
   images clients et les libelles en francais.
   Le violet est applique directement dans main.css.
   ===================================================================== */

/* ---------- Logo Haria (le template livrait un SVG "Synex") ---------- */
.haria-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.haria-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.haria-logo span {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--header);
}
.haria-logo--light span {
  color: var(--white);
}

/* ---------- Logos clients dans le marquee ----------
   Le template etait calibre pour des logos larges ; ceux des clients
   Haria sont carres. */
/* Mur de logos : on normalise la hauteur d'encre, pas la boite. Toutes les
   signatures sont calees sur la meme hauteur de casse ; SIXT, tres compact,
   a droit a un peu plus de hauteur pour peser autant que les autres. */
.brand-section-one .brand-img img {
  max-width: 200px;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-section-one .brand-img img[src*="sixt"] { max-height: 36px; }
/* Pastille du bandeau : celle du template (123 px de haut) depleassait sur
   ordinateur, les logos de 30 px se noyaient au centre. On resserre a 88 px,
   meme ratio qu'au telephone (70 px de pastille pour 26 px de logo).
   Telephone et tablette re-servent leurs tailles plus bas dans ce fichier. */
.brand-section-one .brand-img { height: 88px; }

/* ---------- Photos des temoignages ---------- */
.testimonial-box-items .client-info .thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

/* ---------- Le template met les boutons en Capitale A Chaque Mot ----------
   Illisible en francais, on revient a la casse d'origine. */
.theme-btn-main,
.theme-btn-main .theme-btn,
.theme-btn,
.pricing-box-items .theme-btn,
.section-title .sub-title,
.gt-list-area a,
.footer-list a {
  text-transform: none;
}

/* ---------- Avis clients : cartes de hauteur egale ----------
   Les temoignages Haria sont plus longs que ceux du template. Les cartes
   s'etirent a la hauteur de la plus haute (align-items: stretch sur la
   rangee, hauteur auto ici) et la signature est poussee en bas. */
.testimonial-box-items {
  display: flex;
  flex-direction: column;
}
.testimonial-box-items .client-info {
  align-items: center;
  margin-top: auto;
}

/* ---------- Tarifs : prix, equivalent annuel et alignement ---------- */
/* Description : hauteur reservee (3 lignes) pour aligner les prix des 4 cartes */
.pricing-box-items .pricing-header .price-text {
  min-height: 84px;
  margin-bottom: 20px;
}
/* Le bouton de la formule Gratuit tient sur deux lignes : on reserve la
   meme hauteur partout, sinon la liste « Ce qui est inclus » se decale. */
.pricing-box-items .theme-btn {
  min-height: 68px;
}
/* Et son rond garde sa taille : sans flex-shrink: 0, un libelle sur deux
   lignes l'aplatissait en ovale (38x46 sur telephone). */
.pricing-box-items .theme-btn .icon {
  flex: 0 0 46px;
}
/* Prix et note s'empilent proprement, quel que soit le montant */
.pricing-box-items .haria-price-row {
  display: block;
  margin-bottom: 25px;
}
.pricing-box-items .haria-price-row h3 {
  margin-bottom: 0;
  font-size: 48px;
  letter-spacing: -1.5px;
  white-space: nowrap;
}
.pricing-box-items .price sub {
  font-size: 15px;
  letter-spacing: 0;
  font-weight: 600;
  vertical-align: baseline;
  margin-left: 2px;
}
/* Note sous le prix : vide en mensuel, facturation annuelle sinon.
   Hauteur reservee (2 lignes) pour que les CTA restent alignes. */
.pricing-box-items .setup-fee {
  display: block;
  max-width: none;
  margin-top: 8px;
  padding-bottom: 0;
  min-height: 36px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
@media (min-width: 1200px) {
  .pricing-box-items .haria-price-row h3 {
    font-size: 40px;
    letter-spacing: -1px;
  }
}

/* ---------- Hero : titre long, equilibre sur deux lignes ----------
   Le titre est plus long que celui du template : sa colonne prend toute la
   largeur du conteneur (le paragraphe et les CTA gardent la leur, ils sont
   deja bornes) et text-wrap: balance repartit les mots en lignes de meme
   longueur au lieu d'une derniere ligne orpheline. */
.hero-1 .hero-content h1 {
  text-wrap: balance;
}

/* ---------- Hero : deux CTA plus longs, espaces et centrer ---------- */
.hero-1 .hero-content form {
  justify-content: center;
  gap: 18px;
  /* Les deux boutons demandent ~640 px : la borne du template (630 px)
     les squeezait et aplatissait les ronds de flèche en ovale. */
  max-width: 680px;
}
.hero-1 .hero-content form .theme-btn-main,
.haria-final-cta .theme-btn-main {
  max-width: none;
  width: auto;
  min-width: 240px;
  justify-content: center;
  flex-shrink: 0;
}
.hero-1 .hero-content form .theme-btn-main .theme-btn,
.haria-final-cta .theme-btn-main .theme-btn {
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}
/* Derniers CTA avant le pied de page : centrés sur le fond clair, même
   écart entre les deux boutons qu'au hero. L'air au-dessus vient du
   padding bas de la FAQ, celui du dessous du padding haut du pied de page. */
.haria-final-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
@media (max-width: 575px) {
  .hero-1 .hero-content form {
    display: flex;
    flex-wrap: wrap;
  }
  .hero-1 .hero-content form .theme-btn-main {
    margin-top: 0;
  }
}

/* ---------- Tarifs : le prix ne se coupe jamais sur deux lignes ---------- */
.pricing-box-items .haria-price-row .price {
  white-space: nowrap;
}

/* =====================================================================
   SURFACES ET TEXTES — la vitrine n'a qu'un seul thème, le clair.
   (Le mode sombre a été retiré : plus de data-theme, plus de bouton de
   bascule, plus de jeu de couleurs en double.) Les jetons --hp-* restent
   le point unique où changer une surface ou une encre.
   ===================================================================== */
:root {
  --accent: var(--theme);
  --hp-ink: #15171A;
  --hp-ink-soft: rgba(21, 23, 26, 0.8);
  --hp-card: #ffffff;
  --hp-card-2: #F8FAFC;
  --hp-line: rgba(21, 23, 26, 0.1);
}

body { color: var(--hp-ink-soft); }
.page-wrapper :is(h1, h2, h3, h4, h5, h6) { color: var(--hp-ink); }
/* Sauf dans le pied de page, qui est sombre : sinon titre noir sur noir. */
.footer-section :is(h1, h2, h3, h4, h5, h6) { color: var(--white); }
.section-title .sub-title { color: var(--hp-ink); }
.header-section { background: var(--hp-card); }
.header-section .nav-link { color: var(--hp-ink); }
.mobile-menu-main { background: var(--hp-card); }
.service-box-items { background-color: var(--hp-card); border-color: var(--hp-line); }
.choose-us-items { background: var(--hp-card-2); }
.pricing-box-items { background-color: var(--hp-card); }
.testimonial-box-items { background: var(--hp-card); }
.faq-items-1 .accordion-box .block { background: var(--hp-card); }
.faq-items-1 .accordion-box .block .acc-btn { color: var(--hp-ink); }
.faq-items-1 .accordion-box .block .acc-content .text { color: var(--hp-ink-soft); }
.brand-section-one .text { color: var(--hp-ink); }
.pricing-section .pricing-toggle-wrapper .toggle-label { color: var(--hp-ink); background-color: var(--hp-card-2); }
/* La remise annuelle : un petit texte violet juste sous la bascule, au lieu
   d'une pastille dans le bouton « Annuel ». */
.pricing-section .haria-save-note {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--theme);
}

/* En-tête : liens, logo, burger — sélecteurs exacts du template (ce
   fichier est chargé après main.css : à spécificité égale, il gagne). */
.header-main .navbar .navbar-nav .nav-item .nav-link { color: var(--hp-ink); }
.mobile-topbar .bars span { background: var(--hp-ink); }
.close-mobile-menu { color: var(--hp-ink); }
.mobile-menu-main :is(a, p, .info-title) { color: var(--hp-ink); }

/* ---------- Bouton « Créer mon assistant gratuit » de l'en-tête ----------
   Calibré comme les CTA du hero (ronds de 46 px, ~60 px de haut), il
   écrasait la barre fixe de 76 px. Rond, padding et texte réduits,
   uniquement dans l'en-tête : les autres boutons de la page gardent
   leur taille. Le survol de style-2 (plus haut dans ce fichier) remet
   25/7 : on le réaligne ici à spécificité supérieure. */
.header-1 .menu-right-info .theme-btn-main.style-2 { padding: 5px 5px 5px 18px; }
.header-1 .menu-right-info .theme-btn-main.style-2:hover { padding: 5px 5px 5px 18px; }
.header-1 .menu-right-info .theme-btn-main.style-2 .theme-btn { margin-right: 10px; font-size: 15px; }
.header-1 .menu-right-info .theme-btn-main.style-2 .theme-btn-arrow-left,
.header-1 .menu-right-info .theme-btn-main.style-2 .theme-btn-arrow-right { width: 36px; height: 36px; }

/* Textes secondaires grisés en dur dans le template */
.hero-section .hero-content p { color: var(--hp-ink-soft); }
.pricing-list span, .pricing-list li { color: var(--hp-ink-soft); }
.testimonial-box-items .text, .testimonial-box-items .info-content span { color: var(--hp-ink-soft); }
.choose-us-items p, .service-box-items p, .how-it-items p { color: var(--hp-ink-soft); }

/* Cartes services : une rangée = des cartes de même hauteur, bords bas
   alignés. La colonne Bootstrap est déjà étirée ; la carte la remplit,
   marge haute du template (30 px) déduite pour ne pas déborder. */
.service-box-items { height: calc(100% - 30px); }

/* Cartes tarifs : même principe, les quatre formules font la même hauteur. */
.pricing-box-items { height: calc(100% - 30px); }

/* Cartes « Avantages » (01 à 04) : même hauteur, bords bas alignés. */
.choose-us-items { height: calc(100% - 30px); }

/* En-tête de section (titre à gauche, CTA à droite) : le template ne prévoit
   aucun écart entre les deux. Nos titres français sont plus longs que ceux
   d'origine et venaient toucher le bouton — on réserve la gouttière. */
.section-title-area { gap: 30px 48px; }

/* ---------- Vignettes : plus de fondu au survol ----------
   Le template duplique chaque image et fait passer la copie par un
   translate + scaleX(2) + flou au survol. On fige les deux etats sur leur
   position de repos : l'image ne bouge plus. `:not(.haria-thumb-globe)`
   met la carte du globe hors de portee de cette regle, elle a son propre
   traitement juste en dessous. */
.service-box-items:hover .thumb:not(.haria-thumb-globe) img:first-child,
.how-it-image:hover img:first-child {
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}
.service-box-items:hover .thumb:not(.haria-thumb-globe) img:nth-child(2),
.how-it-image:hover img:nth-child(2) {
  transform: none;
  opacity: 1;
  filter: none;
}

/* =====================================================================
   GLOBE — embarqué dans la carte « Réponse en 2 secondes ».
   CSS repris de portal.css 2789-2945, restreint à ce qui sert ici.
   ===================================================================== */
.haria-thumb-globe { height: 370px; }
@media (max-width: 991px) {
  .service-box-items .haria-thumb-globe { height: 340px; }
}
/* Le fond fumé des cartes voisines vient d'images qui portent aussi un
   graphique : il fallait les flouter, donc les lisser. Ici on prend la
   fumée seule (hero-bg.jpg, la même texture, sans interface dessus) : elle
   reste NETTE, avec ses volutes et son contraste, exactement comme sur les
   cartes d'à côté. Le survol de la carte est neutralisé : sinon le template
   dévoile l'image d'origine en grand derrière le globe. */
.service-box-items .haria-thumb-globe img.haria-globe-bg,
.service-box-items:hover .haria-thumb-globe img.haria-globe-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1.6);
  opacity: 1;
  filter: none;
}
.haria-thumb-globe .globe-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  --gl-sea-light: #f6f7f9;
  --gl-sea: #e8eaef;
  --gl-land: #b4bac6;
  --gl-active: #7c3aed;
  opacity: 0;
  transition: opacity 0.5s;
}
.haria-thumb-globe .globe-stage.ready { opacity: 1; }
.gl-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.globe-stage.dragging .gl-canvas { cursor: grabbing; }
.globe-stage.pointing .gl-canvas { cursor: pointer; }
.gl-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--wm-pin, #241d4d);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(12, 8, 32, 0.34);
  pointer-events: none;
  z-index: 3;
}
.gl-tip[hidden] { display: none; }
.gl-tip.below { transform: translate(-50%, 14px); }
.gl-tip.flip { transform: translate(-88%, calc(-100% - 14px)); }
.gl-tip.below.flip { transform: translate(-88%, 14px); }
.gl-tip-title { font-size: 0.82rem; font-weight: 600; }
.gl-tip-sub { font-size: 0.68rem; color: rgba(255, 255, 255, 0.66); }
.gl-tip-sub:empty { display: none; }
.gl-tip-val { font-size: 0.72rem; color: rgba(255, 255, 255, 0.9); margin-top: 2px; }
.gl-tip-val:empty { display: none; }
.gl-hint {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  transform: translateX(-50%);
  font-size: 0.73rem;
  color: var(--hp-ink-soft);
  pointer-events: none;
  transition: opacity 0.25s;
}
.globe-stage.dragging .gl-hint, .globe-stage.pointing .gl-hint { opacity: 0; }
.gl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.85rem;
  color: var(--hp-ink-soft);
}
/* Tactile : rotation seule — le scroll vertical de la page passe sur le globe. */
@media (pointer: coarse) {
  .haria-thumb-globe .gl-canvas { touch-action: pan-y; }
  .haria-thumb-globe .gl-hint { display: none; }
}
@media print {
  .haria-thumb-globe .globe-stage { display: none; }
}

/* ---------- Pied de page : la carte, sans le grand aplat noir ----------
   Le template peint tout le <footer> en #15171A et y pose une carte
   translucide. On rend le <footer> transparent (le fond clair de la page
   reprend sa place) et on donne à la carte le fond opaque qu'elle avait
   par transparence : même gris foncé, plus d'aplat noir autour. */
.footer-section {
  background: transparent;
}
.footer-area {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  /* Quatre lueurs violettes réparties sur la carte (coin haut droit, bas
     gauche, haut gauche, bas droit) sous le dégradé d'origine : elles donnent
     de la profondeur et « allument » le pied de page, en restant assez
     diffuses pour ne pas gêner la lecture du texte blanc. Tailles en px et
     non en % : sur telephone la carte est tres haute, des ellipses en %
     s'etiraient en bandes verticales. */
  background:
    radial-gradient(640px 360px at 90% 0%, rgba(139, 92, 246, 0.38), transparent 70%),
    radial-gradient(560px 320px at 0% 100%, rgba(124, 58, 237, 0.30), transparent 70%),
    radial-gradient(420px 240px at 22% 0%, rgba(167, 139, 250, 0.20), transparent 70%),
    radial-gradient(420px 240px at 80% 100%, rgba(124, 58, 237, 0.18), transparent 70%),
    linear-gradient(94.68deg, rgba(255, 255, 255, 0.04) 7.02%, rgba(255, 255, 255, 0.09) 90.21%),
    #15171A;
}
/* Filet lumineux sur l'arête haute de la carte : 1 px, violet au centre,
   éteint aux deux bouts. C'est ce qui « allume » le pied de page. */
.footer-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.9) 30%, rgba(139, 92, 246, 1) 55%, transparent);
  box-shadow: 0 0 18px 2px rgba(139, 92, 246, 0.55);
  pointer-events: none;
}
/* Même filet, plus discret, sur l'arête basse : la carte est cadrée des
   deux côtés. */
.footer-area::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.7) 45%, rgba(167, 139, 250, 0.6) 70%, transparent);
  box-shadow: 0 0 14px 1px rgba(139, 92, 246, 0.4);
  pointer-events: none;
}
/* Garde-fou : aucune adresse ne doit pouvoir sortir de la carte, meme plus
   longue que celle d'aujourd'hui. */
.footer-widget-wrapper .footer-widget-items .contact-list li a { overflow-wrap: anywhere; }
/* Les pictos Contact étaient violets sur fond sombre : blancs au repos, ils
   reprennent leur violet au survol, en même temps que le texte de la ligne. */
.footer-widget-wrapper .footer-widget-items .contact-list li img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}
.footer-widget-wrapper .footer-widget-items .contact-list li:hover img {
  filter: none;
}
/* Séparateur du bas teinté de violet plutôt que gris neutre. */
.footer-area .footer-bottom {
  border-top-color: rgba(124, 58, 237, 0.28);
}

/* =====================================================================
   AJUSTEMENTS D'INTERFACE
   ===================================================================== */

/* ---------- En-tete : menu centre sur la page ----------
   Le template centre le menu dans ce qui reste apres le logo, pas dans
   l'en-tete : le bouton de droite etant plus large que le logo, le menu
   penchait vers la gauche. On aplatit le conteneur .navbar-collapse
   (display: contents) pour que logo / menu / bouton soient trois vrais
   elements flex, et on donne aux deux cotes le meme poids : le menu tombe
   alors exactement au centre. */
@media (min-width: 1200px) {
  /* Bootstrap impose display:flex !important sur ce conteneur a partir de
     xl : on ne peut l'aplatir qu'avec la meme arme. */
  .header-1 .navbar-expand-xl .navbar-collapse { display: contents !important; }
  .header-1 .navbar .navbar-brand { flex: 1 1 0; margin-right: 0; }
  .header-1 .menu-right-info { flex: 1 1 0; justify-content: flex-end; }
  .header-1 .navbar .navbar-nav { margin: 0 auto; }
}

/* ---------- En-tete : fixe des le premier pixel ----------
   Le template le pose en absolute, puis main.js le passe en fixed a 120 px
   de defilement avec un fadeInDown : entre 0 et 120 px il partait avec la
   page, disparaissait, puis redescendait. On le fixe d'emblee et on coupe
   l'animation ; la classe sticky-menu ne fait plus qu'ajouter l'ombre.
   Meme padding vertical que l'etat de repos (20 px, contre 18 px dans
   sticky-menu) pour que le logo ne saute pas de 2 px. */
.header-1 { position: fixed; }
.header-1.sticky-menu {
  animation: none;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ---------- Pastille du hero : on voit que c'est un bloc ----------
   Bordure blanche sur fond clair = invisible. On la passe en gris tres
   doux, avec un fond franchement blanc et une ombre un peu plus marquee. */
.hero-1 .hero-content .hero-sub {
  background: #fff;
  border: 1px solid rgba(21, 23, 26, 0.12);
  box-shadow: 0 2px 10px rgba(21, 23, 26, 0.06);
}

/* ---------- Tous les boutons : l'animation des boutons de tarifs ----------
   Le template faisait sauter la fleche de droite a gauche. On garde la
   fleche en place et on reprend exactement le comportement des boutons
   d'offres : leger soulevement, ombre violette, reflet qui balaie et
   fleche qui pivote. */
.theme-btn-main.style-2:hover {
  padding-right: 7px;
  padding-left: 25px;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(124, 58, 237, 0.25);
}
.theme-btn-main:hover .theme-btn-arrow-left {
  transform: translateX(-15px) scale(0);
  opacity: 0;
}
/* Le template faisait aussi glisser le libelle de 57 px vers la droite pour
   laisser passer la fleche : sans le va-et-vient, le texte passait sous le
   rond. On le laisse en place. */
.theme-btn-main:hover .theme-btn {
  transform: none;
  background-color: transparent;
}
.theme-btn-main:hover .theme-btn-arrow-right {
  transform: rotate(-45deg) scale(1.08);
  opacity: 1;
  background: linear-gradient(129.97deg, #3A4048 16.23%, #1B1E22 84.69%);
}
/* Le reflet : ::after de style-2 ne servait qu'a un flou d'arriere-plan
   invisible derriere un fond opaque, on le reaffecte. */
.theme-btn-main.style-2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  left: -75%;
  right: auto;
  width: 50%;
  height: 100%;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  transition: all 0.75s ease;
  z-index: 1;
  pointer-events: none;
}
.theme-btn-main.style-2:hover::after { left: 130%; }

/* ---------- Ronds de flèche : jamais écrasés ----------
   Enfants flex avec flex-shrink: 1, les cercles s'aplatissaient en ovale
   dès que le libellé manquait de place (39x46 sur les CTA du hero). Leur
   emprise est verrouillée sur TOUS les boutons : un déficit de largeur
   touche désormais le libellé, jamais le rond. */
.theme-btn-main .theme-btn-arrow-left,
.theme-btn-main .theme-btn-arrow-right {
  flex: 0 0 auto;
}

/* ---------- Cartes tarifs : plus de saut au survol ---------- */
.pricing-box-items:hover { transform: none; }

/* ---------- Etapes : pictos figes au survol ---------- */
.how-it-items li:hover .icon img { animation: none; }

/* ---------- Avis : defilement continu, comme le bandeau de logos ----------
   Meme mecanique (.marquee / .marquee-group), seules la duree et la
   largeur des cartes changent. */
.testimonial-marquee {
  --duration: 60s;
  gap: 30px;
}
.testimonial-marquee .marquee-group {
  gap: 30px;
  align-items: stretch;
  justify-content: flex-start;
}
.testimonial-marquee .testimonial-box-items {
  flex: 0 0 auto;
  width: 420px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  /* Blanches sur fond clair, les cartes n'avaient que leur ombre pour se
     detacher : on delimite chaque avis. */
  border: 1px solid rgba(21, 23, 26, 0.14);
  box-shadow: 0 4px 16px rgba(21, 23, 26, 0.07);
}
@media (max-width: 575px) {
  .testimonial-marquee .testimonial-box-items { width: 300px; }
}

/* =====================================================================
   TELEPHONE — l'essentiel du trafic arrive ici.
   Trois objectifs : rien qui deborde, moins de vide (le CTA doit rester
   a portee de pouce), et un appel a l'action visible en permanence.
   ===================================================================== */

/* Pastilles du carrousel de tarifs : creees par haria.js sur toutes les
   largeurs, visibles seulement quand le carrousel l'est (voir plus bas). */
.haria-carousel-dots { display: none; }

/* ---------- CTA toujours accessible ----------
   Le bouton de l'en-tete est reserve au bureau : sur telephone il n'y
   avait aucun appel a l'action visible tant qu'on n'ouvrait pas le menu. */
.haria-cta-mobile {
  display: none;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 50px;
  background: linear-gradient(103.71deg, #A78BFA 17.96%, #7C3AED 66.13%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25);
}
.haria-cta-mobile:hover { color: #fff; transform: translateY(-2px); }
.haria-menu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 22px;
  border-radius: 50px;
  background: linear-gradient(103.71deg, #A78BFA 17.96%, #7C3AED 66.13%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.haria-menu-cta:hover { color: #fff; }
@media (max-width: 1199px) {
  .haria-cta-mobile { display: inline-flex; }
}
@media (max-width: 400px) {
  .haria-cta-mobile { padding: 0 14px; font-size: 13px; }
}
/* Le template etire la marque a 130 px dans le menu deroulant : elle est
   carree, elle restait plantee au milieu d'une boite vide. */
.mobile-menu-area .mobile-menu-main .logo .haria-logo img { width: 30px; }
/* Le bloc contact du menu etait masque par le template : sur telephone il
   donne un second chemin de conversion (demo, e-mail) sans quitter la page. */
.mobile-menu-area .mobile-menu-main .off-contact-area { display: block; }

@media (max-width: 991px) {
  /* ---------- Rythme vertical ----------
     100 px de respiration entre chaque section, c'est un ecran entier de
     defilement sur un telephone : on resserre. */
  .section-padding { padding: 70px 0; }

  /* ---------- Hero : le titre ET les deux boutons dans le premier ecran ---------- */
  /* Pas de marge basse : le dashboard doit finir pile sur la limite entre
     le fond violet du hero et la section suivante, comme en bureau. */
  .hero-1 { padding-top: 90px; padding-bottom: 0; }
  .hero-1 .hero-content .hero-sub { margin-bottom: 16px; }
  .hero-1 .hero-content p { margin-top: 18px; }
  .hero-1 .hero-content form { margin-top: 28px; gap: 12px; flex-wrap: wrap; }
  /* Le template coupe la perspective sous 1200 px ; on la retablit, sinon
     l'inclinaison du dashboard serait plate (une rotation sans profondeur).
     Valeur plus courte qu'en bureau : l'ecran est plus petit, donc l'oeil
     est plus pres. */
  .hero-1 .hero-items {
    margin-top: 26px;
    perspective: 900px;
    transform-style: preserve-3d;
  }

  /* ---------- Pastilles de section ----------
     Hauteur fixe + texte long = le libelle sortait de la pastille. En
     hauteur auto il rentrait, mais sur deux lignes calees a gauche. On
     resserre la typo et les marges internes pour que les sept pastilles
     tiennent sur UNE ligne a partir de 360 px, et on centre le contenu
     pour les cas ou ca passe quand meme a la ligne (tres petits ecrans). */
  .section-title .sub-title,
  .hero-1 .hero-content .hero-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    height: auto;
    min-height: 38px;
    line-height: 1.25;
    padding: 5px 14px 5px 5px;
    max-width: 100%;
    text-align: center;
  }
  .section-title .sub-title { font-size: 13px; }
  /* Les sections « Etapes » et « FAQ » utilisent un en-tete en deux colonnes
     (titre a gauche, CTA a droite). Empile sur telephone, il restait cale a
     gauche alors que toutes les autres sections sont centrees : on aligne
     tout le monde. */
  .section-title-area {
    justify-content: center;
    text-align: center;
  }
  .section-title-area .section-title { width: 100%; }
  .section-title .sub-title b,
  .hero-1 .hero-content .hero-sub b { margin-right: 0; }
  .section-title .sub-title b { font-size: 13px; padding: 0 9px; }

  /* ---------- Bandeau de logos : format telephone ----------
     Des pastilles de 285 px sur un ecran de 390, on n'en voyait qu'une et demie. */
  .brand-section-one .brand-img { width: 190px; height: 84px; }
  .brand-section-one .marquee { --duration: 24s; gap: 14px; }
  .brand-section-one .marquee .marquee-group { gap: 14px; }
  .brand-section-one .brand-img img { max-width: 130px; max-height: 26px; }
  .brand-section-one .brand-img img[src*="sixt"] { max-height: 30px; }

  /* ---------- Avis : titre decolle ----------
     Le template annule la marge sous le titre de section en dessous de
     767 px : les avis venaient se coller dessous. */
  .testimonial-section .section-title { margin-bottom: 34px; }

  /* ---------- Avis : cartes calibrees pour l'ecran ---------- */
  .testimonial-marquee { --duration: 45s; gap: 16px; }
  .testimonial-marquee .marquee-group { gap: 16px; }
  .testimonial-marquee .testimonial-box-items { width: 300px; padding: 30px 24px; }
  .testimonial-marquee .testimonial-box-items .text { font-size: 15px; }

  /* ---------- Tarifs : un carrousel qui defile sur le cote ----------
     Quatre formules empilees, c'etait quatre ecrans de defilement et aucune
     comparaison possible. Elles glissent maintenant lateralement, avec
     accroche (scroll-snap) et un bout de la carte suivante toujours visible
     pour qu'on comprenne qu'il y en a d'autres. */
  .pricing-section .row {
    display: flex;
    flex-wrap: nowrap;
    /* La classe Bootstrap justify-content-center centre les items qui
       debordent DES DEUX cotes : au chargement, Gratuit et Starter se
       retrouvaient hors champ a gauche et c'etait Smart (la 3e carte)
       qui apparaissait. L'offre gratuite doit etre la premiere vue.
       (!important : la classe utilitaire Bootstrap en porte un aussi.) */
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 12px;
    margin-inline: -12px;
    padding-inline: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pricing-section .row::-webkit-scrollbar { display: none; }
  .pricing-section .row > [class*="col-"] {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
  }
  /* Pastilles de position, ajoutees par haria.js */
  .haria-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
  }
  .haria-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(21, 23, 26, 0.18);
    transition: background 0.25s, width 0.25s;
  }
  .haria-carousel-dots button.active {
    width: 22px;
    border-radius: 4px;
    background: var(--theme);
  }

  /* ---------- Globe : un peu moins haut, on gagne un demi-ecran ---------- */
  .service-box-items .haria-thumb-globe { height: 300px; }

  /* ---------- Pied de page : la ligne legale ne deborde plus ---------- */
  .footer-bottom .footer-bottom-wrapper { gap: 16px; }
  .footer-bottom .footer-bottom-wrapper .footer-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
  }
  .footer-bottom .footer-bottom-wrapper .footer-list li { font-size: 14px; }
  .footer-area { margin: 0 12px; }
}

/* Sous 375 px (petits Android, iPhone mini), un cran de plus pour garder
   les pastilles sur une seule ligne. */
@media (max-width: 374px) {
  .section-title .sub-title,
  .section-title .sub-title b { font-size: 12px; }
  .section-title .sub-title { padding-right: 12px; gap: 6px; }
}

@media (max-width: 575px) {
  /* ---------- Hero : un seul CTA ----------
     Deux boutons cote a cote sur un telephone, c'est deux libelles ecrases
     et une hesitation de plus avant le clic. On ne garde que le principal,
     centre et lisible ; la demo reste accessible par le CTA final et par le
     menu. */
  .hero-1 .hero-content form .theme-btn-main + .theme-btn-main { display: none; }
  .hero-1 .hero-content form { justify-content: center; }
  .hero-1 .hero-content form .theme-btn-main {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    padding: 6px 6px 6px 22px;
  }
  .hero-1 .hero-content form .theme-btn-main .theme-btn {
    flex: 0 1 auto;
    font-size: 17px;
    line-height: 1.2;
    white-space: nowrap;
    margin-right: 10px;
  }
  .hero-1 .hero-content form .theme-btn-main .theme-btn-arrow-right {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }
  .hero-1 .hero-content form .theme-btn-main .theme-btn-arrow-right i { font-size: 13px; }

  /* ---------- CTA final : les deux boutons, cote a cote ----------
     Ici le visiteur a lu la page : lui laisser le choix a du sens. Largeur
     strictement egale, typo et rond reduits pour que les deux tiennent. */
  .haria-final-cta {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }
  .haria-final-cta .theme-btn-main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 4px 4px 4px 12px;
    justify-content: space-between;
  }
  .haria-final-cta .theme-btn-main .theme-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    /* Le libelle porte le bouton : a 11 px sur une pastille de 178 px, il
       faisait rachitique, et les libelles longs se faisaient rogner par
       l'overflow du bouton. A 14 px avec passage a la ligne autorise, le
       texte remplit le bouton et rien n'est coupe, jusqu'a 320 px. */
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    margin-right: 4px;
  }
  /* Bouton seul d'une section (Etapes, FAQ) : meme gabarit, centre. */
  .section-title-area .theme-btn-main {
    width: auto;
    padding: 4px 4px 4px 18px;
  }
  .section-title-area .theme-btn-main .theme-btn { font-size: 13px; }
  /* Le rond de la fleche suit la reduction. Il faut reprendre le selecteur
     du template (.style-2, specificite 0-3-0) : avec un selecteur plus
     faible, seule la largeur passait et le rond devenait un ovale 32x46.
     flex: 0 0 32px l'empeche en plus d'etre ecrase par le libelle. */
  .theme-btn-main.style-2 .theme-btn-arrow-left,
  .theme-btn-main.style-2 .theme-btn-arrow-right {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }
  .theme-btn-main .theme-btn-arrow-left i,
  .theme-btn-main .theme-btn-arrow-right i { font-size: 11px; }

  .hero-1 { padding-top: 80px; }
  .section-padding { padding: 60px 0; }
  /* Bouton des cartes de tarifs : dans une carte etroite, le libelle passe
     sur deux lignes et l'ecart de 30 px du template poussait le rond hors
     du bouton. On resserre, le rond garde sa taille. */
  .pricing-box-items .theme-btn {
    padding-left: 16px;
    gap: 12px;
  }
  .testimonial-marquee .testimonial-box-items { width: 280px; }
  .pricing-box-items { padding: 32px 24px; }
  .how-it-items li { gap: 14px; }
}

/* ---------- Hero : description courte sur telephone ----------
   Le paragraphe porte deux versions ; la courte n'existe que sous 768 px. */
.haria-desc-short { display: none; }
@media (max-width: 767px) {
  .hero-1 .hero-content .haria-desc-long { display: none; }
  .hero-1 .hero-content .haria-desc-short { display: inline; }
}

@media (max-width: 575px) {
  /* ---------- Hero : la pastille decollee de l'en-tete ----------
     L'en-tete fixe fait 76 px : a 80 px de padding, la pastille le touchait. */
  .hero-1 { padding-top: 104px; }

  /* ---------- Hero : titre plus gros ----------
     34 px du template, c'etait quatre lignes serrees et un titre qui ne
     portait plus. */
  .hero-1 .hero-content h1 {
    font-size: 37px;
    line-height: 1.1 !important;
  }

  /* ---------- Bandeau de logos : pastilles plus petites ----------
     Les logos gardent leur taille ; seule la pastille se resserre. IDLIFT,
     plus massif que les autres, perd un peu de hauteur. */
  .brand-section-one .brand-img { width: 165px; height: 70px; }
  .brand-section-one .brand-img img[src*="idlift"] { max-height: 22px; }

  /* ---------- Avis : meme air au-dessus et au-dessous des cartes ----------
     Titre -> cartes : 34 px ; cartes -> bas de section : 60 px. On aligne
     les deux sur 40 px. */
  .testimonial-section { padding-bottom: 40px; }
  .testimonial-section .section-title { margin-bottom: 40px; }
  /* ---------- Avis : fond violet du haut en bas ----------
     L'image est blanche sur son tiers haut. En cover sur un ecran etroit et
     haut, on la voyait en entier : haut blanc, bas violet. On l'agrandit et
     on la cale en bas pour ne garder que la partie violette. Le plugin
     ripples lit ces deux proprietes ; main.js les pose en style en ligne,
     d'ou le !important. */
  .testimonial-section .ripple-image {
    background-size: auto 220% !important;
    background-position: center bottom !important;
  }

  /* ---------- Etapes : picto a gauche du titre ----------
     Le template empile picto, titre et texte (display: grid) : trois
     etages par carte. Le picto passe a gauche du titre, en plus petit. */
  .how-it-items li {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
  }
  .how-it-items li .icon img { width: 44px; height: 44px; object-fit: contain; }
  .how-it-items li .content { display: contents; }
  .how-it-items li .content .title { margin-bottom: 0; }
  .how-it-items li .content p { grid-column: 1 / -1; margin-top: 12px; }
}

/* Ecrans tres etroits (iPhone SE, vieux Android). Le CTA n'a plus besoin de
   traitement special : son libelle passe a la ligne. Reste la carte de
   tarif, ou « gratuitement » est insecable et poussait le rond hors du
   bouton a 18 px. Ce bloc vient apres celui de 575 px : a specificite
   egale, c'est l'ordre qui tranche. */
@media (max-width: 344px) {
  .pricing-box-items .theme-btn { font-size: 15px; }
  .pricing-box-items .theme-btn .icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }
}

/* =====================================================================
   TARIFS — cartes epurees, sur toutes les largeurs
   D'abord concu pour le carrousel telephone, puis etendu au bureau. Inspire d'une grille de prix
   sobre : carte blanche a fin liseré et grands arrondis, nom de la formule
   precede d'une etoile, prix leger avec « / mois » dessous, bouton plein
   largeur sans fleche, filet de separation bord a bord, puis la liste avec
   de simples coches. Le carrousel lateral (sous 992 px) ne change pas.
   Place en fin de fichier : a specificite egale, ces regles passent apres
   les ajustements telephone plus haut.
   ===================================================================== */
/* ---------- Bascule Mensuel / Annuel : controle segmente ---------- */
  .pricing-section .pricing-toggle-wrapper {
    height: auto;
    line-height: normal;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(21, 23, 26, 0.1);
    border-radius: 14px;
    background: rgba(21, 23, 26, 0.04);
    box-shadow: none;
  }
  .pricing-section .pricing-toggle-wrapper .toggle-label {
    display: inline-flex;
    align-items: center;
    height: 44px;
    line-height: 1;
    padding: 0 22px;
    border-radius: 10px;
    background: transparent;
    color: rgba(21, 23, 26, 0.6);
    font-weight: 500;
  }
  .pricing-section .pricing-toggle-wrapper .toggle-label.active {
    background: #fff;
    color: var(--hp-ink);
    box-shadow: 0 1px 3px rgba(21, 23, 26, 0.12);
  }

  /* ---------- Carte ----------
     La carte Smart perdait son fond violet (image en style en ligne, d'ou
     le !important) : elle se distingue par un liseré violet et le seul
     bouton plein. */
  .pricing-box-items,
  .pricing-box-items.active {
    background: #fff !important;
    border: 1px solid rgba(21, 23, 26, 0.12);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: none;
  }
  .pricing-box-items.active {
    border-color: var(--theme);
    box-shadow: 0 0 0 1px var(--theme);
  }
  .pricing-box-items .pricing-header { margin-bottom: 0; }

  /* Nom de la formule, precede d'une etoile a quatre branches */
  .pricing-box-items .pricing-header .sub-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
  }
  .pricing-box-items .pricing-header .sub-price::before {
    content: "";
    flex: 0 0 20px;
    height: 20px;
    background: var(--theme);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .pricing-box-items .pricing-header .price-text {
    min-height: 63px;
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(21, 23, 26, 0.6);
  }

  /* Prix leger, « / mois » dessous. Hauteur reservee : la formule Gratuit
     n'a pas de « / mois », les boutons restent quand meme alignes. */
  .pricing-box-items .haria-price-row {
    min-height: 118px;
    margin-bottom: 20px;
  }
  .pricing-box-items .haria-price-row h3 {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1;
  }
  .pricing-box-items .pricing-header .price sub {
    display: block;
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(21, 23, 26, 0.6);
  }
  .pricing-box-items .setup-fee {
    min-height: 36px; /* la note annuelle passe sur deux lignes a 360 px */
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(21, 23, 26, 0.6);
  }
  /* « Sans carte bancaire » tient la place du « / mois » */
  .pricing-box-items .haria-price-row h3:not(:has(sub)) + .setup-fee {
    margin-top: 8px;
    font-size: 14px;
  }

  /* ---------- Bouton : plein largeur, contour fin, sans fleche ---------- */
  .pricing-box-items .theme-btn {
    min-height: 0;
    height: 48px;
    padding: 0 16px;
    gap: 0;
    justify-content: center;
    border: 1px solid rgba(21, 23, 26, 0.15);
    border-radius: 12px;
    background: #fff;
    color: var(--hp-ink);
    font-size: 16px;
    font-weight: 600;
  }
  .pricing-box-items .theme-btn .icon { display: none; }
  .pricing-box-items .theme-btn:hover {
    color: var(--hp-ink);
    transform: none;
    box-shadow: none;
  }
  .pricing-box-items.active .theme-btn,
  .pricing-box-items.active .theme-btn:hover {
    border-color: transparent;
    background: linear-gradient(103.71deg, #A78BFA 17.96%, #7C3AED 66.13%);
    color: #fff;
  }

  /* ---------- Liste : filet bord a bord, coches simples ---------- */
  .pricing-box-items .pricing-list {
    margin: 28px -24px 0;
    padding: 24px 24px 0;
    border-top: 1px solid rgba(21, 23, 26, 0.1);
  }
  /* « Tout Starter, plus : » : l'offre dit ce qu'elle ajoute a la precedente. */
  .pricing-box-items .pricing-list > span {
    display: block;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-ink);
  }
  .pricing-box-items .pricing-list ul { margin-top: 0; }
  .pricing-box-items .pricing-list ul li {
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--hp-ink);
  }
  .pricing-box-items .pricing-list ul li:not(:last-child) { margin-bottom: 14px; }
  .pricing-box-items .pricing-list ul li img { display: none; }
  .pricing-box-items .pricing-list ul li::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    margin-top: 2px;
    background: var(--hp-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

/* ---------- Tarifs sur bureau : cinq formules en un seul bloc ----------
   Inspire de Chatbase : les cartes sont collees en une grille, separees par
   un filet, seuls les coins exterieurs sont arrondis. La formule mise en
   avant (Smart) porte un onglet « Recommandé » pose sur son arete haute.
   Le conteneur s'elargit un peu pour laisser respirer cinq colonnes.
   Sous 1200 px : cartes separees (3 + 2 centrees), puis carrousel. */
@media (min-width: 1200px) {
  .pricing-section .container { max-width: 1360px; }
  .pricing-section .row { --bs-gutter-x: 0; }
  .pricing-section .row > [class*="col-"] + [class*="col-"] { margin-left: -1px; }
  .pricing-box-items,
  .pricing-box-items.active {
    position: relative;
    border-radius: 0;
    padding: 28px 22px;
  }
  .pricing-section .row > [class*="col-"]:first-child .pricing-box-items { border-radius: 24px 0 0 24px; }
  .pricing-section .row > [class*="col-"]:last-child .pricing-box-items { border-radius: 0 24px 24px 0; }
  .pricing-box-items .pricing-list {
    margin-left: -22px;
    margin-right: -22px;
    padding-left: 22px;
    padding-right: 22px;
  }
  /* La carte mise en avant passe au-dessus de ses voisines, sinon leur
     filet gris recouvre son liseré violet. */
  .pricing-box-items.active { z-index: 1; }
  .pricing-box-items.active::before {
    content: "Recommandé";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 14px 14px 0 0;
    background: var(--theme);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }
}
/* Entre 1200 et 1399 px, les colonnes font ~190 px : « 143,20 € » (annuel)
   touchait le bord a 48 px. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .pricing-box-items .haria-price-row h3 {
    font-size: 42px;
    letter-spacing: -1px;
  }
}