/* Marteo — corrections pour les pages construites avec Elementor.

   Le thème définit body{color:#F2F1EC} (texte crème) car la page d'accueil est sur fond noir.
   Sur les pages Elementor à fond clair, ce réglage rend les textes invisibles.

   Les sélecteurs ci-dessous sont ancrés sur `.elementor`, la racine du contenu Elementor,
   présente à la fois sur le site public ET dans l'aperçu de l'éditeur.
   Ainsi le rendu est identique dans les deux contextes. */

.elementor {
  color: #0A0A0A;
  font-family: Archivo, system-ui, sans-serif;
}

.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
  color: inherit;
  margin: 0;
}

.elementor p,
.elementor li,
.elementor span,
.elementor div {
  color: inherit;
}

/* Tout élément portant sa propre couleur garde la priorité. */
.elementor [style*="color"] {
  color: revert;
}

/* Accordéon : lisible sur fond clair. */
.elementor .elementor-accordion .elementor-tab-title,
.elementor .elementor-accordion .elementor-tab-content {
  color: #0A0A0A;
}

/* Icon box : titre et description lisibles. */
.elementor .elementor-icon-box-title,
.elementor .elementor-icon-box-title a {
  color: #0A0A0A;
}

.elementor .elementor-icon-box-description {
  color: #5C5B56;
}

/* Boutons : transition douce. */
.elementor .elementor-button {
  transition: background-color .2s, color .2s, border-color .2s;
}

/* Quadrillage du hero : grille fine avec fondu radial sur les bords,
   repris du fichier de design d'origine. */
.elementor > .elementor-element:first-child {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(10, 10, 10, .1);
}

.elementor > .elementor-element:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, .055) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 65% at 50% 40%, #000 0%, transparent 78%);
}

/* Le contenu passe au-dessus du quadrillage. */
.elementor > .elementor-element:first-child > .elementor-container,
.elementor > .elementor-element:first-child > .e-con-inner,
.elementor > .elementor-element:first-child > .elementor-element {
  position: relative;
  z-index: 1;
}

/* Dans l'aperçu de l'éditeur, le fond du canevas doit être crème
   pour correspondre au rendu réel de la page. */
body.elementor-editor-preview,
body.elementor-html body {
  background: #F2F1EC;
}

/* ------------------------------------------------------------------
   Cartes flottantes du hero \u2014 pages services.
   Style hybride : arrondi doux, ombre teintee, palette Marteo lime/noir.
   Cible les identifiants d'element Elementor : les classes personnalisees
   ne sont pas rendues sur les containers, seulement sur les widgets.
------------------------------------------------------------------ */

.elementor-element-mrtfl01,
.elementor-element-mrtflp39,
.elementor-element-mrtflp87,
.elementor-element-mrtflp88,
.elementor-element-mrtflp89,
.elementor-element-mrtflp90,
.elementor-element-mrtflp91,
.elementor-element-mrtflp92 {
  position: absolute !important;
  inset: 0;
  display: block !important;
  padding: 0;
  pointer-events: none;
  z-index: 1;
}

.elementor-element-mrtfa01,
.elementor-element-mrtfap39,
.elementor-element-mrtfap87,
.elementor-element-mrtfap88,
.elementor-element-mrtfap89,
.elementor-element-mrtfap90,
.elementor-element-mrtfap91,
.elementor-element-mrtfap92,
.elementor-element-mrtfb01,
.elementor-element-mrtfbp39,
.elementor-element-mrtfbp87,
.elementor-element-mrtfbp88,
.elementor-element-mrtfbp89,
.elementor-element-mrtfbp90,
.elementor-element-mrtfbp91,
.elementor-element-mrtfbp92,
.elementor-element-mrtfc01,
.elementor-element-mrtfcp39,
.elementor-element-mrtfcp87,
.elementor-element-mrtfcp88,
.elementor-element-mrtfcp89,
.elementor-element-mrtfcp90,
.elementor-element-mrtfcp91,
.elementor-element-mrtfcp92,
.elementor-element-mrtfd01,
.elementor-element-mrtfdp39,
.elementor-element-mrtfdp87,
.elementor-element-mrtfdp88,
.elementor-element-mrtfdp89,
.elementor-element-mrtfdp90,
.elementor-element-mrtfdp91,
.elementor-element-mrtfdp92 {
  position: absolute;
  display: block !important;
  width: max-content;
  max-width: 210px;
  padding: 16px 20px;
  border: 1px solid rgba(10, 10, 10, .09);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 14px 34px -18px rgba(10, 10, 10, .34);
  will-change: transform;
}

/* Typographie interne, portee par les classes widget (elles, sont rendues). */
.mrt-fc__top p.n {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #0A0A0A;
}

.mrt-fc__bot p {
  margin: 6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8A8881;
}

.elementor-element-mrtfl01,
.elementor-element-mrtflp39,
.elementor-element-mrtflp87,
.elementor-element-mrtflp88,
.elementor-element-mrtflp89,
.elementor-element-mrtflp90,
.elementor-element-mrtflp91,
.elementor-element-mrtflp92 .elementor-widget { margin: 0; width: auto; }

/* Carte c : l'unique accent lime du jeu. */
.elementor-element-mrtfc01,
.elementor-element-mrtfcp39,
.elementor-element-mrtfcp87,
.elementor-element-mrtfcp88,
.elementor-element-mrtfcp89,
.elementor-element-mrtfcp90,
.elementor-element-mrtfcp91,
.elementor-element-mrtfcp92 {
  background: #C9F227;
  border-color: rgba(10, 10, 10, .14);
}
.elementor-element-mrtfc01 .mrt-fc__bot p,
.elementor-element-mrtfcp39 .mrt-fc__bot p,
.elementor-element-mrtfcp87 .mrt-fc__bot p,
.elementor-element-mrtfcp88 .mrt-fc__bot p,
.elementor-element-mrtfcp89 .mrt-fc__bot p,
.elementor-element-mrtfcp90 .mrt-fc__bot p,
.elementor-element-mrtfcp91 .mrt-fc__bot p,
.elementor-element-mrtfcp92 .mrt-fc__bot p { color: rgba(10, 10, 10, .62); }

/* Carte b : inversee, echo des service cards du design system. */
.elementor-element-mrtfb01,
.elementor-element-mrtfbp39,
.elementor-element-mrtfbp87,
.elementor-element-mrtfbp88,
.elementor-element-mrtfbp89,
.elementor-element-mrtfbp90,
.elementor-element-mrtfbp91,
.elementor-element-mrtfbp92 {
  background: #0A0A0A;
  border-color: rgba(242, 241, 236, .14);
}
.elementor-element-mrtfb01 .mrt-fc__top p.n,
.elementor-element-mrtfbp39 .mrt-fc__top p.n,
.elementor-element-mrtfbp87 .mrt-fc__top p.n,
.elementor-element-mrtfbp88 .mrt-fc__top p.n,
.elementor-element-mrtfbp89 .mrt-fc__top p.n,
.elementor-element-mrtfbp90 .mrt-fc__top p.n,
.elementor-element-mrtfbp91 .mrt-fc__top p.n,
.elementor-element-mrtfbp92 .mrt-fc__top p.n { color: #F2F1EC; font-size: 20px; }
.elementor-element-mrtfb01 .mrt-fc__bot p,
.elementor-element-mrtfbp39 .mrt-fc__bot p,
.elementor-element-mrtfbp87 .mrt-fc__bot p,
.elementor-element-mrtfbp88 .mrt-fc__bot p,
.elementor-element-mrtfbp89 .mrt-fc__bot p,
.elementor-element-mrtfbp90 .mrt-fc__bot p,
.elementor-element-mrtfbp91 .mrt-fc__bot p,
.elementor-element-mrtfbp92 .mrt-fc__bot p { color: rgba(242, 241, 236, .5); }

/* Placement : deux cartes de chaque cote, jamais sur le titre. */
.elementor-element-mrtfa01,
.elementor-element-mrtfap39,
.elementor-element-mrtfap87,
.elementor-element-mrtfap88,
.elementor-element-mrtfap89,
.elementor-element-mrtfap90,
.elementor-element-mrtfap91,
.elementor-element-mrtfap92 { top: 19%; left: 2%;    animation: mrt-drift 9s  ease-in-out infinite; }
.elementor-element-mrtfb01,
.elementor-element-mrtfbp39,
.elementor-element-mrtfbp87,
.elementor-element-mrtfbp88,
.elementor-element-mrtfbp89,
.elementor-element-mrtfbp90,
.elementor-element-mrtfbp91,
.elementor-element-mrtfbp92 { top: 58%; left: 6%;    animation: mrt-drift 11s ease-in-out infinite .8s; }
.elementor-element-mrtfc01,
.elementor-element-mrtfcp39,
.elementor-element-mrtfcp87,
.elementor-element-mrtfcp88,
.elementor-element-mrtfcp89,
.elementor-element-mrtfcp90,
.elementor-element-mrtfcp91,
.elementor-element-mrtfcp92 { top: 23%; right: 2.5%; animation: mrt-drift 10s ease-in-out infinite .4s; }
.elementor-element-mrtfd01,
.elementor-element-mrtfdp39,
.elementor-element-mrtfdp87,
.elementor-element-mrtfdp88,
.elementor-element-mrtfdp89,
.elementor-element-mrtfdp90,
.elementor-element-mrtfdp91,
.elementor-element-mrtfdp92 { top: 62%; right: 6%;   animation: mrt-drift 12s ease-in-out infinite 1.2s; }

@keyframes mrt-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  50%      { transform: translate3d(0, -13px, 0) rotate(.5deg); }
}

/* Sous 1200px les cartes empieteraient sur le titre : on les retire. */
@media (max-width: 1199px) {
  .elementor-element-mrtfl01,
  .elementor-element-mrtflp39,
  .elementor-element-mrtflp87,
  .elementor-element-mrtflp88,
  .elementor-element-mrtflp89,
  .elementor-element-mrtflp90,
  .elementor-element-mrtflp91,
  .elementor-element-mrtflp92 { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element-mrtfa01,
  .elementor-element-mrtfap39,
  .elementor-element-mrtfap87,
  .elementor-element-mrtfap88,
  .elementor-element-mrtfap89,
  .elementor-element-mrtfap90,
  .elementor-element-mrtfap91,
  .elementor-element-mrtfap92,
  .elementor-element-mrtfb01,
  .elementor-element-mrtfbp39,
  .elementor-element-mrtfbp87,
  .elementor-element-mrtfbp88,
  .elementor-element-mrtfbp89,
  .elementor-element-mrtfbp90,
  .elementor-element-mrtfbp91,
  .elementor-element-mrtfbp92,
  .elementor-element-mrtfc01,
  .elementor-element-mrtfcp39,
  .elementor-element-mrtfcp87,
  .elementor-element-mrtfcp88,
  .elementor-element-mrtfcp89,
  .elementor-element-mrtfcp90,
  .elementor-element-mrtfcp91,
  .elementor-element-mrtfcp92,
  .elementor-element-mrtfd01,
  .elementor-element-mrtfdp39,
  .elementor-element-mrtfdp87,
  .elementor-element-mrtfdp88,
  .elementor-element-mrtfdp89,
  .elementor-element-mrtfdp90,
  .elementor-element-mrtfdp91,
  .elementor-element-mrtfdp92 { animation: none; transform: none; }
}

/* ------------------------------------------------------------------
   Page /contact/ : le formulaire de l'accueil, plus un champ service.
   Fond sombre herite de .cform : bordures claires, texte off-white.
   Bords adoucis et typo agrandie sur cette page uniquement.
------------------------------------------------------------------ */

.page-id-142 .cform {
  padding: 44px;
  gap: 16px;
  border-radius: 20px;
}

.page-id-142 .cform input,
.page-id-142 .cform textarea,
.page-id-142 .cform #marteo-service {
  padding: 19px 22px;
  font-size: 17px;
  border-radius: 12px;
}

.page-id-142 .cform textarea { min-height: 150px; }

.page-id-142 .cform button {
  font-size: 17px;
  padding: 21px;
}

.page-id-142 .cform .form-note {
  font-size: 13px;
  line-height: 1.5;
}

/* Intitule du champ service : meme registre que les labels mono du site. */
.cform .cform-label {
  display: block;
  margin-bottom: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, .5);
}

/* Le select reprend exactement les inputs de .cform (fond sombre). */
.cform #marteo-service {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(242, 241, 236, .2);
  border-radius: 0;
  background-color: transparent;
  font-family: Archivo, sans-serif;
  font-size: 15px;
  color: #F2F1EC;
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(242, 241, 236, .7) 50%),
    linear-gradient(135deg, rgba(242, 241, 236, .7) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.cform #marteo-service:focus {
  outline: none;
  border-color: #C9F227;
}

/* Le menu natif s'ouvre avec les couleurs de l'OS : on force la lisibilite. */
.cform #marteo-service option {
  background: #0A0A0A;
  color: #F2F1EC;
}

/* La page contact n'a pas de cartes flottantes : le hero respire moins haut. */
.page-id-142 .elementor > .elementor-element:first-child {
  padding-top: 120px;
  padding-bottom: 96px;
}

/* ------------------------------------------------------------------
   Bouton de la carte tarif (pages services).
   Le contenu de la carte est dans un bloc centre de 820px, mais le bouton
   est un widget frere : sans contrainte il se colle au bord du conteneur.
   On lui donne la meme colonne pour qu'il s'aligne sur le texte au-dessus.
------------------------------------------------------------------ */
.mrt-card-cta{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .mrt-card-cta{ margin-top: 24px; }
}
