/*
  Customisations legeres pour une landing Minecraft plus "pro".
  Tu peux personnaliser librement (couleurs, typo, etc.).
*/

/* ------------------------------------------------------------
  THEME JOUR / NUIT (auto)
  Le thème Antler gère déjà une base light/dark via data-background.
  Ici on harmonise 2-3 éléments custom (logo, cards, checkout).
------------------------------------------------------------ */

/* Logo : on garde 2 versions et on switch selon le background */
.logo-night { display: none !important; }
.logo-day { display: block !important; }

body[data-background="dark"] .logo-day { display: none !important; }
body[data-background="dark"] .logo-night { display: block !important; }

/* Variables utilitaires (utilisées uniquement dans nos composants custom) */
:root {
  --mc-card-border: rgba(0, 0, 0, 0.06);
  --mc-card-shadow: 0 10px 30px rgba(16, 25, 32, 0.08);

  --mc-field-bg: #ffffff;
  --mc-field-border: rgba(16, 25, 32, 0.14);
  --mc-field-text: #101920;
  --mc-field-placeholder: rgba(16, 25, 32, 0.55);
  --mc-field-shadow: 0 10px 25px rgba(16, 25, 32, 0.06);
}

body[data-background="dark"] {
  --mc-card-border: rgba(255, 255, 255, 0.09);
  --mc-card-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

  --mc-field-bg: #101920;
  --mc-field-border: rgba(255, 255, 255, 0.12);
  --mc-field-text: #ffffff;
  --mc-field-placeholder: rgba(255, 255, 255, 0.65);
  --mc-field-shadow: 0 16px 35px rgba(0, 0, 0, 0.45);
}

.top-header .heading {
  letter-spacing: -0.02em;
}

.pricing .wrapper .price {
  font-variant-numeric: tabular-nums;
}

/* Meilleure lisibilite des cartes */
.card .h2, .card .h5 {
  font-variant-numeric: tabular-nums;
}

/* Evite que le bouton "Commander" du menu ne casse sur mobile */
@media (max-width: 991px) {
  .menu-wrap .btn.btn-default-yellow-fill {
    width: 100%;
    text-align: center;
    margin-top: 8px !important;
  }
}

/* Supprime les éléments de démo du template (PANEL / DEMOS) */
#settings,
.btn-settings,
.btn-demos,
.settings,
.demos {
  display: none !important;
}


/* ------------------------------------------------------------
  HELP ICONS (SVG animés)
  - Les SVG du template utilisent un "gray" trop sombre sur nos fonds.
  - On utilise currentColor dans les SVG et on définit ici la couleur.
------------------------------------------------------------ */

.help-container .help-item .img svg {
  color: rgba(16, 25, 32, 0.70);
}

body[data-background="dark"] .help-container .help-item .img svg {
  color: rgba(255, 255, 255, 0.82);
}

/* Les blocs help de la hero (bg-rgba5) sont sur fond sombre en jour et en nuit */
.help-container.bg-rgba5 .help-item .img svg,
.top-header .help-container .help-item .img svg {
  color: rgba(255, 255, 255, 0.90);
}

/* Cartes d'actualités : padding + bordure subtile (rendu plus "pro") */
.news-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 26px;
  /* Aligne les cartes entre elles (même hauteur) + bouton en bas */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card hr {
  opacity: 0.12;
}

body[data-background="dark"] .news-card {
  border-color: rgba(255, 255, 255, 0.09);
}

body[data-background="dark"] .news-card hr {
  opacity: 0.25;
}

/* ------------------------------------------------------------
  CARTES "DÉTAIL" (OFFRE UNIQUE)
  - Plusieurs pages utilisent des blocks "service-section" hors du
    wrapper original du template (.services .service-wrap).
  - Sans ce wrapper, le template n'applique ni padding ni typographie.
  - On ajoute donc un style premium, lisible en jour/nuit.
------------------------------------------------------------ */

.mc-feature-card {
  padding: 46px;
  border-radius: 12px;
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
  height: 100%;
}

@media (max-width: 575px) {
  .mc-feature-card { padding: 34px; }
  .mc-step-card { padding: 26px; }
}

.mc-feature-card .icon {
  margin-bottom: 18px;
  color: rgba(16, 25, 32, 0.70);
}

body[data-background="dark"] .mc-feature-card .icon {
  color: rgba(255, 255, 255, 0.88);
}

/* Titres & textes, proches du style Antler (services) */
.mc-feature-card .title {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 14px;
}

.mc-feature-card .subtitle {
  line-height: 34px;
  font-size: 16px;
  margin-bottom: 0;
  /* Le template force parfois seccolor en très sombre : on impose un
     texte secondaire adapté au fond (jour/nuit). */
  color: var(--mc-text-muted) !important;
}

/* Variante compacte ("Comment ça marche", etc.) */
.mc-step-card {
  padding: 34px;
}

.mc-step-card .title {
  font-size: 18px;
  margin-bottom: 10px;
}

.mc-step-card .subtitle {
  font-size: 15px;
  line-height: 30px;
}

/* Variante "side" : utilisée autour de l'offre (gauche/droite)
   -> padding un peu plus compact et listes lisibles jour/nuit */
.mc-feature-card.mc-side-card {
  padding: 38px;
}

@media (max-width: 575px) {
  .mc-feature-card.mc-side-card { padding: 30px; }
}

.mc-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.mc-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  line-height: 1.55;
  color: var(--mc-text-muted) !important;
}

.mc-bullets li:first-child {
  margin-top: 0;
}

.mc-bullets li i {
  color: #ee5586;
  margin-top: 3px;
}

/* Si Font Awesome remplace le <i> par un <svg> directement */
.mc-bullets li .svg-inline--fa,
.mc-bullets li svg.svg-inline--fa {
  color: #ee5586;
  flex: 0 0 auto;
  position: relative;
  top: 3px;
}

/* ------------------------------------------------------------
  OFFRE (page détail)
  - sidebar "Prix" lisible en mode nuit
------------------------------------------------------------ */

.offer-side-card {
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
  padding: 28px;
  background: var(--mc-field-bg);
}

.offer-side-card .offer-price {
  font-variant-numeric: tabular-nums;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
}

.offer-side-card .offer-price sup {
  font-size: 16px;
  top: -0.6em;
  position: relative;
}

.offer-side-card .offer-price .period {
  font-size: 14px;
  opacity: 0.8;
  margin-left: 6px;
}

/* Bouton "Lire l'article" plus discret */
.news-card .btn-news {
  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  border-radius: 10px;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.news-card .btn-news i,
.news-card .btn-news svg {
  font-size: 14px;
}



/* ------------------------------------------------------------
  ICONS DANS LES BOUTONS (Font Awesome SVG)
  - le template applique parfois des tailles énormes sur les <i>
    (ex: .service-section i { font-size: 60px; })
  - on force les icônes à rester à la taille du texte du bouton
------------------------------------------------------------ */
.btn i.fas,
.btn i.far,
.btn i.fab,
.btn i.fa,
.btn i[data-fa-i2svg],
.btn .svg-inline--fa {
  font-size: 1em !important;
  line-height: 1 !important;
}

.btn i[data-fa-i2svg] {
  display: inline-flex;
  align-items: center;
}

.btn i[data-fa-i2svg] > svg.svg-inline--fa,
.btn svg.svg-inline--fa {
  height: 1em;
  width: 1em;
  vertical-align: -0.125em;
}
/* ------------------------------------------------------------
  CHECKOUT (page de commande)
  - inputs plus modernes
  - sidebar résumé avec un vrai style
------------------------------------------------------------ */

.checkout-card {
  /* sec-main a déjà une ombre, on harmonise un look plus moderne */
  padding: 48px 48px;
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
}

@media (max-width: 575px) {
  .checkout-card { padding: 34px 22px; }
}

.form-modern .form-modern-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  /*
    IMPORTANT (lisibilité):
    Sur certains backgrounds (sec-bg / bg-seccolorstyle), la couleur héritée
    peut devenir "gris sur gris".
    On force une couleur lisible (jour/nuit) basée sur nos variables.
  */
  color: var(--mc-field-text);
  opacity: 0.92;
}

/* Petits textes d'aide (ex: "Cette commande sera associée...") */
.form-modern .text-muted,
.form-modern .form-text,
.form-modern .small.text-muted {
  color: var(--mc-text-muted, var(--mc-field-placeholder)) !important;
}

.form-modern .form-modern-control {
  position: relative;
}

.form-modern .form-modern-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--mc-field-placeholder);
  pointer-events: none;
}

.form-modern .form-modern-control.is-textarea .form-modern-icon {
  top: 22px;
  transform: none;
}

.form-modern .form-modern-input {
  width: 100%;
  border-radius: 14px;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--mc-field-border);
  background: var(--mc-field-bg);
  color: var(--mc-field-text);
  box-shadow: var(--mc-field-shadow);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.form-modern textarea.form-modern-input {
  min-height: 150px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.form-modern .form-modern-input::placeholder {
  color: var(--mc-field-placeholder);
  opacity: 1;
}

.form-modern .form-modern-input:focus {
  outline: none;
  border-color: #ee5586;
  box-shadow: 0 0 0 0.25rem rgba(238, 85, 134, 0.18);
  transform: translateY(-1px);
}

/* Champ readonly : visuellement "verrouillé" mais propre */
.form-modern .form-modern-input[readonly] {
  opacity: 0.92;
  cursor: not-allowed;
}

.checkout-summary {
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
  border-radius: 12px;
  padding: 30px;
}

@media (min-width: 992px) {
  .checkout-summary {
    position: sticky;
    top: 120px;
  }
}

.checkout-summary .heading {
  margin-bottom: 18px;
  font-size: 20px;
}

.checkout-summary .posts .item-wrap {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--mc-card-border);
}

.checkout-summary .posts .item-wrap:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ------------------------------------------------------------
  THEME TOGGLE (Jour/Nuit)
  - Visible dans la barre info (header)
  - Auto par défaut : petit point
  - SHIFT+clic ou clic droit : retour en Auto
------------------------------------------------------------ */

.infonews-nav .theme-toggle {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-left: 30px; /* cohérent avec .infonews-nav a.iconews */
  background: transparent;
  border: none;
  cursor: pointer;
  color: #bcbcbc;
}

.infonews-nav .theme-toggle:hover {
  color: #ffffff;
}

.infonews-nav .theme-toggle .theme-icon {
  width: 38px;
  height: 38px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--mc-card-border);
  background: rgba(16, 25, 32, 0.04);
  box-shadow: 0 10px 25px rgba(16, 25, 32, 0.05);
}

.infonews-nav .theme-toggle .theme-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

body[data-background="dark"] .infonews-nav .theme-toggle .theme-icon {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
}

.infonews-nav .theme-toggle:focus {
  outline: none;
}

.infonews-nav .theme-toggle:focus .theme-icon {
  box-shadow: 0 0 0 0.25rem rgba(238, 85, 134, 0.18);
}

/* Petit point "AUTO" */
.infonews-nav .theme-toggle.is-auto .theme-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  right: 4px;
  top: 4px;
  background: #ee5586;
  box-shadow: 0 0 0 3px rgba(238, 85, 134, 0.15);
}

@media (max-width: 576px) {
  .infonews-nav .theme-toggle {
    margin-left: 15px;
  }
}


/* ------------------------------------------------------------
  BOUTONS (visibilite sur fonds sombres)
  - Le template Antler utilise "btn-default-fill" pour un bouton secondaire.
  - Sur fonds sombres (header sec-bg3, mode nuit, etc.), on force un style
    plus contrasté pour éviter les boutons "invisibles".
------------------------------------------------------------ */

/* Fonds sombres (sections) + mode nuit */
body[data-background="dark"] .btn-default-fill,
.sec-bg3 .btn-default-fill,
.sec-bg6 .btn-default-fill,
.bg-grey .btn-default-fill,
.bg-rgba5 .btn-default-fill {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body[data-background="dark"] .btn-default-fill:hover,
.sec-bg3 .btn-default-fill:hover,
.sec-bg6 .btn-default-fill:hover,
.bg-grey .btn-default-fill:hover,
.bg-rgba5 .btn-default-fill:hover {
  background-color: #fdd700 !important;
  color: #000000 !important;
  border-color: #fdd700 !important;
}

body[data-background="dark"] .btn-default-fill:focus,
.sec-bg3 .btn-default-fill:focus,
.sec-bg6 .btn-default-fill:focus,
.bg-grey .btn-default-fill:focus,
.bg-rgba5 .btn-default-fill:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(238, 85, 134, 0.18);
}


/* ------------------------------------------------------------
  INFRASTRUCTURE (nouvelle page)
  - Icônes SVG (currentColor) lisibles en jour/nuit
  - Cartes avec un rendu plus "premium"
------------------------------------------------------------ */

.infra-hero-icon {
  display: inline-block;
  max-width: 520px;
  width: 100%;
}

.infra-hero-icon svg {
  width: 100%;
  height: auto;
}

.infra-card {
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
  padding: 30px;
}

.infra-mini {
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
  padding: 22px;
  height: 100%;
}

.infra-icon,
.infra-icon-sm,
.infra-hero-icon {
  color: rgba(16, 25, 32, 0.70);
}

body[data-background="dark"] .infra-icon,
body[data-background="dark"] .infra-icon-sm,
body[data-background="dark"] .infra-hero-icon {
  color: rgba(255, 255, 255, 0.88);
}

/* Sur sections sombres, on force une couleur claire */
.sec-bg3 .infra-icon,
.sec-bg3 .infra-icon-sm,
.sec-bg3 .infra-hero-icon,
.bg-rgba5 .infra-icon,
.bg-rgba5 .infra-icon-sm,
.bg-rgba5 .infra-hero-icon {
  color: rgba(255, 255, 255, 0.92);
}

.infra-icon svg {
  max-width: 190px;
  width: 100%;
  height: auto;
}

.infra-icon-sm svg {
  max-width: 110px;
  width: 100%;
  height: auto;
}


/* ------------------------------------------------------------
  FORM MODERN - SELECT
  - Select cohérent avec nos inputs (jour/nuit)
  - Ajout d'une flèche "custom" (sans dépendance)
------------------------------------------------------------ */

.form-modern select.form-modern-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 54px;
  background-color: var(--mc-field-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mc-field-placeholder) 50%),
    linear-gradient(135deg, var(--mc-field-placeholder) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) calc(50% - 3px),
    calc(100% - 18px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form-modern select.form-modern-input:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, #ee5586 50%),
    linear-gradient(135deg, #ee5586 50%, transparent 50%);
}

.form-modern select.form-modern-input::-ms-expand {
  display: none;
}


/* ------------------------------------------------------------
  SUPPORT / TICKETS
  - Panels & tables adaptés au thème (jour/nuit)
  - Corrige les pages tickets "trop blanches" en mode nuit
------------------------------------------------------------ */

:root {
  --mc-panel-bg: #ffffff;
  --mc-text-muted: rgba(16, 25, 32, 0.62);
}

body[data-background="dark"] {
  --mc-panel-bg: #15212a;
  --mc-text-muted: rgba(255, 255, 255, 0.72);
}

.ticket-panel {
  background: var(--mc-panel-bg);
  border: 1px solid var(--mc-card-border);
  box-shadow: var(--mc-card-shadow);
  border-radius: 12px;
  padding: 42px;
}

@media (max-width: 575px) {
  .ticket-panel {
    padding: 32px 22px;
  }
}

.ticket-muted {
  color: var(--mc-text-muted) !important;
}

/* Table tickets (Bootstrap) : lisible en jour/nuit */
.tickets-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mc-field-text);
  --bs-table-border-color: var(--mc-card-border);
  --bs-table-striped-bg: rgba(16, 25, 32, 0.03);
  --bs-table-striped-color: var(--mc-field-text);
}

body[data-background="dark"] .tickets-table {
  --bs-table-color: rgba(255, 255, 255, 0.92);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.06);
  --bs-table-striped-color: rgba(255, 255, 255, 0.92);
  --bs-table-border-color: rgba(255, 255, 255, 0.10);
}

.tickets-table th,
.tickets-table td {
  border-color: var(--bs-table-border-color) !important;
}

.tickets-table thead th {
  font-weight: 700;
}

.tickets-table a {
  color: inherit;
  text-decoration: none;
}

.tickets-table a:hover {
  color: #ee5586;
  text-decoration: underline;
}

/* Messages ticket : cartes discrètes */
.ticket-message {
  border: 1px solid var(--mc-card-border);
  background: rgba(16, 25, 32, 0.02);
  padding: 18px;
  border-radius: 12px;
}

body[data-background="dark"] .ticket-message {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}



/* -----------------------------------------------------------
   Template polish: remove forced capitalization everywhere
   (Antler applique text-transform: capitalize sur beaucoup d'éléments)
------------------------------------------------------------ */
.section-heading,
.btn,
.pricing .heading,
.services .heading,
.casestudy .author,
.circle-section .title-round,
.top-header .wrapper .heading,
.top-header .golink {
  text-transform: none !important;
}

/* -----------------------------------------------------------
   Newsletter (footer) – feedback messages (jour/nuit)
------------------------------------------------------------ */
.newsletter-feedback {
  margin-top: 14px;
}

.newsletter-msg {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  border: 1px solid var(--mc-card-border);
  background: rgba(16, 25, 32, 0.03);
  color: var(--mc-field-text);
}

body[data-background="dark"] .newsletter-msg {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

.newsletter-msg--ok {
  border-color: rgba(0, 180, 90, 0.25);
}

.newsletter-msg--err {
  border-color: rgba(220, 53, 69, 0.35);
}

body[data-background="dark"] .newsletter-msg--ok {
  border-color: rgba(0, 220, 120, 0.35);
}



/* ------------------------------------------------------------
  OFFRE UNIQUE - sections de remplissage (pricing)
------------------------------------------------------------ */

.service-section .icon .help-anim,
.service-section .icon svg {
  width: 64px;
  height: 64px;
}

/* Couleur des SVG "pattern" (utilisent currentColor) */
.service-section .icon svg {
  color: rgba(16, 25, 32, 0.78);
}

body[data-background="dark"] .service-section .icon svg {
  color: rgba(255, 255, 255, 0.88);
}

/* Visuel infrastructure (superposition SVG) */
.infra-visual {
  padding: 26px;
}

.infra-visual .infra-visual-bg {
  max-width: 520px;
  width: 100%;
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.12));
  animation: infraFloat 6.5s ease-in-out infinite;
}

.infra-visual .infra-visual-fg {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 220px;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.18));
  animation: infraPulse 2.8s ease-in-out infinite;
}

body[data-background="dark"] .infra-visual .infra-visual-bg {
  opacity: 0.92;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.45));
}

body[data-background="dark"] .infra-visual .infra-visual-fg {
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.55));
}

@keyframes infraFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes infraPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

/* Etapes (cards) */
.step-card {
  padding: 22px;
  border: 1px solid rgba(0,0,0,0.06);
}

body[data-background="dark"] .step-card {
  border-color: rgba(255,255,255,0.10);
}