/* ==========================================================================
   S.A.C.P — Surcouche de finition graphique
   --------------------------------------------------------------------------
   Chargée APRÈS assets/css/mediox.css. Les fichiers du gabarit d'origine
   ne sont pas modifiés : retirer ce fichier restitue le rendu initial.

   Périmètre : composition, proportions, typographie, espacements, états
   d'interaction et accessibilité.
   Hors périmètre : aucun contenu, aucune couleur nouvelle. Toutes les teintes
   utilisées ici proviennent des variables déjà déclarées par le gabarit
   (vert #33903F, bleu #2C51A3, bleu nuit #0A2241, gris #707882, #ECF0F5…).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Correction de cohérence de la palette d'origine
   --------------------------------------------------------------------------
   Le gabarit déclare --mediox-base: #33903F (vert S.A.C.P.) mais
   --mediox-base-rgb: 51, 193, 237 (cyan), vestige du thème de démonstration.
   Les 18 fonds translucides construits sur cette variable s'affichaient donc
   en cyan. On réaligne la version RGB sur la couleur verte réelle.
   -------------------------------------------------------------------------- */
:root {
  --mediox-base-rgb: 51, 144, 63; /* = #33903F */

  /* ---- Échelle d'élévation (bleu nuit institutionnel, jamais du noir pur) */
  --sacp-elev-1:
    0 1px 2px rgba(var(--mediox-black-rgb), .04),
    0 2px 8px -2px rgba(var(--mediox-black-rgb), .06);
  --sacp-elev-2:
    0 2px 4px rgba(var(--mediox-black-rgb), .04),
    0 12px 24px -8px rgba(var(--mediox-black-rgb), .10);
  --sacp-elev-3:
    0 4px 8px rgba(var(--mediox-black-rgb), .05),
    0 28px 48px -16px rgba(var(--mediox-black-rgb), .18);
  --sacp-elev-brand:
    0 10px 24px -10px rgba(var(--mediox-base-rgb), .55);

  /* ---- Rayons : on conserve 20px du gabarit comme valeur pivot */
  --sacp-r-xs: 8px;
  --sacp-r-sm: 12px;
  --sacp-r-md: 16px;
  --sacp-r-lg: var(--mediox-radius, 20px);
  --sacp-r-pill: 100px;

  /* ---- Mouvement : plus court et mieux amorti que le 0.5s linéaire d'origine */
  --sacp-ease: cubic-bezier(.22, .61, .36, 1);
  --sacp-dur: 220ms;
  --sacp-dur-slow: 420ms;

  /* ---- Rythme vertical fluide, borné par les valeurs d'origine (120px) */
  --sacp-section: clamp(64px, 8.5vw, 120px);
  --sacp-section-sm: clamp(48px, 6vw, 80px);
}

/* --------------------------------------------------------------------------
   2. Fondations typographiques
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale les ancres sous l'en-tête fixe */
  scroll-padding-top: 120px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Les titres du gabarit sont figés en pixels : on les rend fluides, en gardant
   la valeur d'origine comme borne haute pour ne pas altérer le rendu desktop. */
.main-slider-two__title,
.main-slider-one__title {
  font-size: clamp(34px, 2rem + 3.2vw, 80px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.sec-title__title {
  font-size: clamp(27px, 1.6rem + 1.45vw, 45px);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance; /* évite les veuves sur les titres de section */
}

.page-header__title {
  font-size: clamp(30px, 1.8rem + 1.8vw, 55px);
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* Surtitre vert : lettrage légèrement ouvert, lecture plus nette en petit corps */
.sec-title__tagline {
  letter-spacing: .06em;
  font-weight: 700;
}

/* Longueur de ligne confortable pour les blocs de texte courant.
   65–75 signes est l'optimum de lisibilité ; au-delà l'œil perd la ligne. */
.about-two__text,
.about-one__text,
.welcome-one__text,
.section-text,
.service-details__text {
  max-width: 68ch;
}

/* Équilibre des titres courts sur 2 lignes */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   3. Boutons
   -------------------------------------------------------------------------- */

.mediox-btn {
  transition:
    background-color var(--sacp-dur) var(--sacp-ease),
    color var(--sacp-dur) var(--sacp-ease),
    box-shadow var(--sacp-dur) var(--sacp-ease),
    transform var(--sacp-dur) var(--sacp-ease);
  will-change: transform;
  border-radius: var(--sacp-r-pill);
  padding: 14px 28px;
  letter-spacing: .01em;
}

.mediox-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sacp-elev-brand);
}

.mediox-btn:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

/* --------------------------------------------------------------------------
   Bouton « Prendre Rendez-Vous » de l'en-tête
   --------------------------------------------------------------------------
   Dans le gabarit, l'intitulé se brisait en « Prendre Rendez- / Vous » : la
   barre était trop remplie pour le laisser sur une ligne. Plutôt que de
   rogner le bouton, on récupère la place dans la navigation, dont les entrées
   étaient espacées de 39 px — une respiration qu'on peut ramener à 24 px sans
   tasser le menu. Les 7 intervalles libèrent 105 px, soit un peu plus que les
   103 px qui manquaient au bouton.
   -------------------------------------------------------------------------- */

.main-header__btn.mediox-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Le gabarit n'affiche ce bouton aux côtés du menu qu'à partir de 1400 px
   (entre 1200 et 1399 px il est masqué, et en dessous le menu bascule en
   version mobile). Le resserrement ne s'applique donc qu'à cette plage : la
   respiration d'origine de 39 px est conservée partout ailleurs. */
@media (min-width: 1400px) {
  .main-menu .main-menu__list > li + li {
    margin-left: 24px;
  }

  /* L'en-tête comptait 170 px d'espaces fixes entre ses blocs — assez pour
     qu'au-delà d'une certaine largeur, le logo soit comprimé et l'intitulé du
     bouton brisé en deux. Ces intervalles deviennent proportionnels : larges
     sur grand écran, resserrés quand la place manque. Le logo retrouve ainsi
     sa taille pleine sans que rien ne déborde. */
  .main-header__sidebar-btn {
    margin-right: clamp(18px, 2.2vw, 80px);
  }

  .main-header__nav {
    margin-right: clamp(18px, 1.8vw, 60px);
  }

  .main-header__btn {
    margin-left: clamp(16px, 1.6vw, 40px);
  }
}

/* Entre 1600 et 1799 px, le gabarit fait apparaître le bloc téléphone
   (« Contacter-Nous », 208 px) alors que la barre contient déjà huit entrées
   de menu et un bouton sur une ligne. C'est la seule plage réellement serrée :
   on y resserre davantage, le temps que la largeur d'écran reprenne le dessus. */
@media (min-width: 1600px) and (max-width: 1799px) {
  .main-menu .main-menu__list > li + li {
    margin-left: 16px;
  }

  .main-header__btn {
    padding-left: 22px;
    padding-right: 22px;
  }

  .main-header__call {
    margin-left: 24px;
  }
}

/* --------------------------------------------------------------------------
   4. Accessibilité — anneau de focus
   --------------------------------------------------------------------------
   Le gabarit supprime l'indicateur de focus natif sans le remplacer : la
   navigation au clavier était impossible à suivre. On le rétablit avec la
   couleur verte institutionnelle, uniquement au clavier (:focus-visible).
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.mediox-btn:focus-visible {
  outline: 2px solid var(--mediox-base, #33903F);
  outline-offset: 3px;
  border-radius: var(--sacp-r-xs);
}

/* Sur fond bleu nuit, l'anneau vert manque de contraste : on le double de blanc */
.main-footer a:focus-visible,
.main-slider-two a:focus-visible,
.sacp-registration a:focus-visible,
.sacp-registration input:focus-visible,
.sacp-registration select:focus-visible,
.sacp-registration textarea:focus-visible {
  outline-color: var(--mediox-white, #FFFFFF);
  box-shadow: 0 0 0 5px rgba(var(--mediox-base-rgb), .45);
}

/* --------------------------------------------------------------------------
   5. Navigation principale
   -------------------------------------------------------------------------- */

/* Soulignement animé, ancré sous le libellé.
   `nowrap` garantit qu'un intitulé en deux mots (« A Propos », « Notre
   Equipe ») reste sur une seule ligne quelle que soit la largeur restante. */
.main-menu__list > li > a {
  position: relative;
  white-space: nowrap;
  transition: color var(--sacp-dur) var(--sacp-ease);
}

.main-menu__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--mediox-base, #33903F);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--sacp-dur) var(--sacp-ease);
}

.main-menu__list > li > a:hover::after,
.main-menu__list > li.current > a::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Entrée « Espace membres » : signalée par la couleur institutionnelle verte
   plutôt que par un bouton, pour ne pas élargir la barre de navigation — la
   place y est comptée au pixel. */
.main-menu__list > li.main-menu__members > a {
  color: var(--mediox-base, #33903F);
  font-weight: 700;
}

.main-menu__list > li.main-menu__members > a::after {
  transform: scaleX(1);
  transform-origin: left center;
  opacity: .35;
}

.main-menu__list > li.main-menu__members > a:hover::after {
  opacity: 1;
}

/* Sous-menus : apparition verticale douce plutôt que surgissement brut */
.main-menu__list > li > ul {
  border-radius: var(--sacp-r-md);
  box-shadow: var(--sacp-elev-3);
  overflow: hidden;
  border: 1px solid var(--mediox-border-color, #D9E1EB);
}

.main-menu__list > li > ul > li > a {
  transition:
    background-color var(--sacp-dur) var(--sacp-ease),
    color var(--sacp-dur) var(--sacp-ease),
    padding-left var(--sacp-dur) var(--sacp-ease);
}

.main-menu__list > li > ul > li > a:hover {
  padding-left: 28px;
}

/* En-tête collant : ombre progressive à l'état accroché */
.sticky-header--cloned.active,
.main-header.sticky-fixed {
  box-shadow: var(--sacp-elev-2);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Bouton burger : on élargit la zone cliquable SANS toucher au dessin.
   Une contrainte de taille minimale étirait les barres de 26 à 44 px et
   déformait l'icône ; le couple padding / marge négative agrandit la surface
   de frappe tout en laissant la boîte de contenu — donc les barres — à sa
   dimension d'origine. */
.main-header__sidebar-btn,
.mobile-nav__toggler {
  position: relative;
  transition: opacity var(--sacp-dur) var(--sacp-ease);
}

/* La zone de frappe est portée par un pseudo-élément : le gabarit fixe la
   largeur de l'icône à 29,71 px en `border-box`, où un simple padding
   réduirait la boîte de contenu à zéro et ferait disparaître deux des trois
   barres. */
.main-header__sidebar-btn::before,
.mobile-nav__toggler::before {
  content: "";
  position: absolute;
  inset: -15px;
}

.main-header__sidebar-btn span {
  transition: transform var(--sacp-dur) var(--sacp-ease);
}


/* --------------------------------------------------------------------------
   6. Navigation mobile et panneaux latéraux
   -------------------------------------------------------------------------- */

.mobile-nav__content,
.sidebar-one__content {
  box-shadow: var(--sacp-elev-3);
}

.mobile-nav__wrapper .mobile-nav__content {
  padding-top: 24px;
}

/* Liens de la navigation mobile : hauteur de frappe confortable */
.mobile-nav__container li > a {
  padding-top: 12px;
  padding-bottom: 12px;
  transition: color var(--sacp-dur) var(--sacp-ease);
}

/* Bouton de fermeture : cible tactile élargie */
.mobile-nav__close,
.search-popup__close,
.sidebar-one__close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--sacp-dur) var(--sacp-ease),
              transform var(--sacp-dur) var(--sacp-ease);
}

.mobile-nav__close:hover,
.search-popup__close:hover,
.sidebar-one__close:hover {
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   7. Cartes — échelle d'élévation homogène
   --------------------------------------------------------------------------
   Le gabarit appliquait une ombre unique et plate (0 15px 30px rgba(0,0,0,.08))
   sur des composants de niveaux hiérarchiques différents. On introduit une
   échelle à deux niveaux : repos discret, survol affirmé.
   -------------------------------------------------------------------------- */

.service-card,
.service-card-three,
.team-card,
.portfolio-card,
.blog-card-two,
.pricing-card,
.gallery-page__card,
.why-choose-one__item,
.work-process-one__item,
.faq-one__item,
.testimonial-card-two {
  border-radius: var(--sacp-r-lg);
  box-shadow: var(--sacp-elev-1);
  transition:
    box-shadow var(--sacp-dur-slow) var(--sacp-ease),
    transform var(--sacp-dur-slow) var(--sacp-ease);
}

.service-card:hover,
.service-card-three:hover,
.team-card:hover,
.portfolio-card:hover,
.blog-card-two:hover,
.pricing-card:hover,
.gallery-page__card:hover,
.why-choose-one__item:hover,
.testimonial-card-two:hover {
  box-shadow: var(--sacp-elev-3);
  transform: translateY(-6px);
}

/* Médias de carte : cadrage constant, jamais de déformation */
.service-card img,
.team-card img,
.portfolio-card img,
.blog-card-two img,
.gallery-page__card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform var(--sacp-dur-slow) var(--sacp-ease);
}

/* Léger rapprochement de l'image au survol de la carte */
.service-card:hover img,
.portfolio-card:hover img,
.blog-card-two:hover img,
.gallery-page__card:hover img {
  transform: scale(1.04);
}

/* Conteneurs d'image : masque le dépassement du zoom */
.service-card__image,
.team-card__image,
.portfolio-card__image,
.blog-card-two__image,
.gallery-page__card__image {
  overflow: hidden;
  border-radius: var(--sacp-r-md);
}

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */

.form-one input[type="text"],
.form-one input[type="email"],
.form-one input[type="tel"],
.form-one input[type="password"],
.form-one select,
.form-one textarea,
.form-control {
  border-radius: var(--sacp-r-sm);
  border: 1px solid var(--mediox-border-color, #D9E1EB);
  transition:
    border-color var(--sacp-dur) var(--sacp-ease),
    box-shadow var(--sacp-dur) var(--sacp-ease),
    background-color var(--sacp-dur) var(--sacp-ease);
}

.form-one input:focus,
.form-one select:focus,
.form-one textarea:focus,
.form-control:focus {
  border-color: var(--mediox-base, #33903F);
  box-shadow: 0 0 0 4px rgba(var(--mediox-base-rgb), .14);
  outline: none;
}

/* Champs invalides après interaction, sans couleur hors palette */
.form-one input:not(:placeholder-shown):invalid {
  border-color: rgba(var(--mediox-text-rgb), .55);
}

/* Étiquettes : hiérarchie plus lisible */
.form-one label {
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 6px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   9. Rythme vertical
   --------------------------------------------------------------------------
   Le gabarit mélangeait 116 / 120 / 181 / 200 px de respiration verticale,
   en valeurs fixes qui ne s'adaptaient pas aux petits écrans. On harmonise
   sur une échelle fluide, bornée aux valeurs d'origine côté desktop.
   -------------------------------------------------------------------------- */

.about-two,
.about-one,
.work-process-one,
.why-choose-two,
.team-one,
.blog-two,
.testimonial-two,
.faq-one,
.services-one {
  padding-top: var(--sacp-section);
  padding-bottom: var(--sacp-section);
}

.why-choose-two {
  padding-bottom: var(--sacp-section-sm);
}

/* Sections dont la respiration porte une composition (fonds, formes) :
   on ne touche qu'aux écrans réduits, pour préserver le rendu desktop. */
@media (max-width: 1199px) {
  .welcome-one,
  .services-two {
    padding-top: var(--sacp-section);
    padding-bottom: var(--sacp-section);
  }
}

/* Marge basse homogène sous les titres de section */
.sec-title {
  margin-bottom: clamp(28px, 3vw, 48px);
}

/* --------------------------------------------------------------------------
   9 bis. Révélation du titre de la bannière
   --------------------------------------------------------------------------
   Le gabarit masque le titre derrière six barres vertes, attend 2 200 ms,
   puis les retire toutes en même temps en animant `top` / `bottom`.
   Trois faiblesses : le message reste caché plus de deux secondes, le
   mouvement simultané est mécanique, et animer des propriétés de position
   force un recalcul de mise en page à chaque image.

   Ici : attente ramenée à 420 ms, barres décalées de 70 ms l'une après
   l'autre — le rideau s'ouvre de gauche à droite — et mouvement porté par
   `transform`, composé par le GPU. Même dessin, même vert institutionnel :
   seule la cadence change.
   -------------------------------------------------------------------------- */

.main-slider-two__title__overlay {
  transition:
    transform 760ms cubic-bezier(.76, 0, .24, 1),
    opacity 460ms linear;
  transition-delay: 420ms;
  will-change: transform;
}

/* Les barres impaires montent, les paires descendent : on conserve la
   position de repos du gabarit et l'on neutralise son animation de position,
   remplacée par une translation. */
.main-slider-two .active .main-slider-two__title__overlay:nth-child(1),
.main-slider-two .active .main-slider-two__title__overlay:nth-child(3),
.main-slider-two .active .main-slider-two__title__overlay:nth-child(5) {
  bottom: 5px;
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
}

.main-slider-two .active .main-slider-two__title__overlay:nth-child(2),
.main-slider-two .active .main-slider-two__title__overlay:nth-child(4),
.main-slider-two .active .main-slider-two__title__overlay:nth-child(6) {
  top: 5px;
  transform: translateY(calc(100% + 12px));
  opacity: 0;
}

/* Cadence : une barre toutes les 70 ms, de la gauche vers la droite. */
.main-slider-two .active .main-slider-two__title__overlay:nth-child(1) { transition-delay: 420ms; }
.main-slider-two .active .main-slider-two__title__overlay:nth-child(2) { transition-delay: 490ms; }
.main-slider-two .active .main-slider-two__title__overlay:nth-child(3) { transition-delay: 560ms; }
.main-slider-two .active .main-slider-two__title__overlay:nth-child(4) { transition-delay: 630ms; }
.main-slider-two .active .main-slider-two__title__overlay:nth-child(5) { transition-delay: 700ms; }
.main-slider-two .active .main-slider-two__title__overlay:nth-child(6) { transition-delay: 770ms; }

/* Sans mouvement, les barres doivent disparaître franchement : il serait
   inacceptable qu'elles restent posées sur le titre. */
@media (prefers-reduced-motion: reduce) {
  .main-slider-two__title__overlay {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   10. Compteurs, carrousels, pagination
   -------------------------------------------------------------------------- */

.count-box {
  transition: transform var(--sacp-dur-slow) var(--sacp-ease);
}

.funfact-one .count-box:hover {
  transform: translateY(-4px);
}

/* Puces de carrousel : cible plus généreuse, état actif explicite */
.owl-dots .owl-dot span,
.swiper-pagination-bullet {
  transition:
    width var(--sacp-dur) var(--sacp-ease),
    background-color var(--sacp-dur) var(--sacp-ease),
    opacity var(--sacp-dur) var(--sacp-ease);
}

.owl-dots .owl-dot.active span,
.swiper-pagination-bullet-active {
  width: 26px;
  border-radius: var(--sacp-r-pill);
  background-color: var(--mediox-base, #33903F);
}

/* Flèches de carrousel */
.owl-nav button,
.swiper-button-next,
.swiper-button-prev {
  transition:
    background-color var(--sacp-dur) var(--sacp-ease),
    color var(--sacp-dur) var(--sacp-ease),
    transform var(--sacp-dur) var(--sacp-ease),
    box-shadow var(--sacp-dur) var(--sacp-ease);
}

.owl-nav button:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: scale(1.08);
  box-shadow: var(--sacp-elev-2);
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */

.footer-widget__list a {
  transition: color var(--sacp-dur) var(--sacp-ease),
              transform var(--sacp-dur) var(--sacp-ease);
  display: inline-block;
}

.footer-widget__list a:hover {
  transform: translateX(4px);
}

.main-footer__social a,
.footer-widget__social a {
  transition:
    background-color var(--sacp-dur) var(--sacp-ease),
    border-color var(--sacp-dur) var(--sacp-ease),
    transform var(--sacp-dur) var(--sacp-ease);
}

.main-footer__social a:hover,
.footer-widget__social a:hover {
  transform: translateY(-3px);
}

/* Bandeau de contact du pied de page : élévation cohérente */
.main-footer__contact {
  box-shadow: var(--sacp-elev-2);
}

/* --------------------------------------------------------------------------
   12. Retour en haut
   -------------------------------------------------------------------------- */

.scroll-to-top {
  transition:
    opacity var(--sacp-dur) var(--sacp-ease),
    visibility var(--sacp-dur) var(--sacp-ease),
    transform var(--sacp-dur) var(--sacp-ease);
}

.scroll-to-top:hover {
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   13. Garde-fous responsive
   -------------------------------------------------------------------------- */

/* Aucun média ne doit forcer un défilement horizontal */
img, video, iframe, table, pre {
  max-width: 100%;
}

/* Les tableaux larges défilent dans leur propre conteneur */
.table-responsive,
.sacp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* Cible tactile de 44 px obtenue par la seule respiration interne :
     on ne touche pas à `display`, sous peine de réafficher les boutons que
     le gabarit masque volontairement sur petit écran (CTA de l'en-tête). */
  .mediox-btn {
    padding: 13px 24px;
    min-height: 44px;
  }

  /* Cartes : respiration interne réduite mais lisible */
  .service-card,
  .team-card,
  .portfolio-card,
  .blog-card-two,
  .pricing-card {
    border-radius: var(--sacp-r-md);
  }

  /* Les mots longs (noms d'établissements, intitulés) ne débordent plus */
  h1, h2, h3, h4, h5, h6, p, li, a {
    overflow-wrap: break-word;
  }
}

/* --------------------------------------------------------------------------
   14. Préférences système
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Les animations d'apparition ne doivent pas laisser d'éléments invisibles */
  .wow { visibility: visible !important; }
}

/* Curseur personnalisé : inutile et gênant au doigt */
@media (hover: none) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two { display: none !important; }
}

/* --------------------------------------------------------------------------
   15. Impression
   -------------------------------------------------------------------------- */

@media print {
  .main-header,
  .mobile-nav__wrapper,
  .search-popup,
  .sidebar-one,
  .scroll-to-top,
  .custom-cursor__cursor,
  .custom-cursor__cursor-two { display: none !important; }

  body { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}