/* ============================================================================
   WIA FIXES mw (wia-montek) : correctifs de recette, charges EN DERNIER.
   Chaque bloc note le defaut de revue qu'il repare.
   ========================================================================= */

/* ---- PASSE 1 (revue 1) ------------------------------------------------- */

/* 1. FONDS PLACEHOLDER : les images background/1-4.jpg du package affichent
      leurs dimensions en filigrane geant (« 1920 X 380 » derriere FAQ, CTA,
      stats, journal). Les inline styles sont retires des gabarits, les fonds
      vivent ici, sobres et sombres. */
.page-wrapper.image-layer { background: linear-gradient(180deg, #181419 0%, #131016 45%, #17131a 100%); }
.banner-one { background-color: #131016; }
.journal-one, .stats-one { background-color: #161219; }

/* 2. HERO HOME : le media (.robot) recouvrait le H1 « Web design à Grenoble ».
      Contenu au-dessus, voile de lisibilite sur l'image (lecon dw : titre
      blanc sur photo claire = illisible sans voile). */
.banner-one { position: relative; }
.banner-one .robot { z-index: 0; }
.banner-one .robot.is-image::after {
  content: ""; position: absolute; inset: 0;
  /* bas renforce (revue 3) : la ligne tel/4,9/devis passait sur le halo clair */
  background: linear-gradient(180deg, rgba(10, 8, 12, .62) 0%, rgba(10, 8, 12, .30) 50%, rgba(10, 8, 12, .78) 100%);
}
.banner-one .auto-container { position: relative; z-index: 2; }

/* 3. HEADER : logo SVG Webiaprod (le lockup texte rose etait a 1,6:1 de
      contraste) et CTA « Parlez-nous de votre projet » en vrai bouton
      (classe posee par le theme, absente du CSS Montek). */
.main-header .logo-svg svg { height: 30px; width: auto; display: block; color: #fff; }
.main-header .logo-svg { color: #fff; }
.header-cta_btn {
  display: inline-block; padding: 12px 26px; border-radius: 40px;
  background: var(--theme-color, #ff2e6c); color: #fff !important;
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: opacity .25s;
}
.header-cta_btn:hover { opacity: .85; color: #fff; }

/* 4. MENU : 9 items faisaient replier la nav sur 2 lignes (le template en
      prevoit 5-6). Le menu passe a 5 items avec sous-menu « Expertises »
      (cote WP) ; padding legerement resserre en filet. */
.main-header .main-menu .navigation > li { margin-left: 22px; }

/* 5. SOUS-TITRES h3 quasi noirs sur fond noir dans les chapitres, la FAQ et
      le contact (heading-color du template pense pour fond clair). */
.journal-detail h3, .mw-chapter h3, .single-work h3,
.contact-one h3, .mw-faq h3, .faq-one h3 { color: #f2eef4; }

/* 6. STATS HOME : bords des cellules irreguliers, cellule fantome sous
      « 4,9/5 » : la grille s'etire uniformement. */
.stats-one .row { align-items: stretch; }
.stats-one [class*="stats-block"] { height: 100%; }

/* 7. FOOTER LEGAL tasse : respiration et separation des liens legaux. */
.footer-bottom { padding-top: 18px; padding-bottom: 18px; }
.footer_copyright { line-height: 1.9; }
.footer_satellite { margin: 0 6px; }
.footer-bottom .navigation li { margin-left: 14px; }

/* 8. Fleche de scroll du hero (SVG remplace le down.png anglais « WORK »). */
.banner-one .down-box svg { color: #fff; opacity: .85; }
.banner-one .down-box { cursor: pointer; }

/* ---- PASSE 2 (revue 2) ------------------------------------------------- */

/* 9. FOND DE DEPASSEMENT : html restait blanc : bloc blanc apres le footer
      des qu'une capture ou un overscroll depasse le bas de page. */
html { background-color: #131016; }

/* 10. INTRO DE LA PAGE REALISATIONS invisible : la regle p sombre du
       template (rgb 15,15,15) s'appliquait aux paragraphes INTERNES de
       l'intro, invisibles sur fond noir, EN LIVE aussi (mesure DOM). */
.page-title_text.mw-intro, .page-title_text { color: #cfc9d4; }
.page-title_text p, .mw-intro p { color: #cfc9d4; }
.page-title_text a { color: #fff; }

/* 11. LEGENDE « champs necessaires » de Gravity Forms : rendue en couleur
       sombre du plugin, invisible sur fond noir (l'asterisque rose seule
       ressortait). */
.gform_wrapper .gform_required_legend { color: #b9b2c0 !important; }

/* 12. TITLE CASE anglo-saxon sur les legendes de stats (« Sites Livrés
       Depuis 2012 ») : le CSS Montek capitalise chaque mot, faux en
       francais. */
.stats-one [class*="stats"] h6, .stats-one .stats-block_one-text,
.stats-one [class*="text"] { text-transform: none !important; }

/* 13. (retire, passe 4) le flex sur .inner-container ECRASAIT les tuiles
       stats en colonne de 145 px : la mise en page du template (floats)
       reprend ses droits ; l'ecart de bords de ±12 px est un mineur
       assume du template. */

/* 14. (retire) « Ils nous font confiance » est un carrousel Swiper : plein
       ecran en live ; l'effondrement sur un tiers etait un artefact du gate,
       corrige dans le gate (slides 33% a plat). */

/* 15. ARTICLE : l'illustration de colonne gauche defilait hors champ et
       laissait 2 ecrans de noir : elle suit la lecture. */
.journal-detail_image { position: sticky; top: 90px; }

/* ---- PASSE 3 (revue 3) ------------------------------------------------- */

/* 16. CARTES en dents de scie (journal home, expertises, bloc SEO) : les
       cartes d'une meme rangee s'etirent a hauteur egale. */
.journal-one .journal-block_one, .journal-one .journal-block_one-inner { height: 100%; }
.services-one [class*="block_one"], .services-one [class*="block_one-inner"] { height: 100%; }


/* ---- PASSE 4 (revue 4) ------------------------------------------------- */

/* 18. HERO : la ligne tel / 4,9 / devis et le sous-titre restaient tributaires
       du voile : lisibilite PROPRE par ombre portee, quel que soit le fond. */
.banner-one .mw-hero_meta, .banner-one .mw-hero_meta a,
.banner-one .banner-one_text, .banner-one .banner-one_text-two {
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}

/* 19. CARTES FACTUELLES du carrousel temoignages : la citation du template
       vit HORS du cadre (design pense pour un court verbatim) : nos cartes
       projet passent en carte fermee, vignette large, texte dedans. */
.mw-fact .testimonial-block_one-inner { border: 1px solid rgba(255, 255, 255, .12); padding: 22px; height: 100%; display: flex; flex-direction: column; }
.mw-fact .testimonial-block_one-content { border: none; padding: 0 0 14px; }
.mw-fact .testimonial-block_one-author { position: static !important; width: 100% !important; height: auto !important; margin: 0 0 16px !important; }
/* l'avatar du template est en ABSOLU (hors flux, conteneur a hauteur nulle,
   image peinte par-dessus le nom) : tout revient en flux normal. */
.mw-fact .testimonial-block_one-author img { position: static !important; inset: auto !important; width: 100% !important; height: 150px !important; object-fit: cover; border-radius: 8px; }
/* revue 6 : le nom du client etait pose PAR-DESSUS la vignette (illisible sur
   mockup clair) : il redescend SOUS la vignette, en flux normal. */
.mw-fact .testimonial-block_one-name { position: static !important; margin: 0 0 2px; transform: none !important; inset: auto !important; }
.mw-fact .testimonial-block_one-designation { position: static !important; margin: 0; }
.mw-fact .testimonial-block_one-lower { position: static; margin: 0; padding: 0; font-size: 15px; line-height: 24px; color: #cfc9d4; }
.mw-fact .testimonial-block_one-lower .view-more { display: inline-block; margin-top: 10px; }
.mw-fact .testimonial-block_one { height: 100%; }

/* ---- PASSE 6 (revue 5) ------------------------------------------------- */

/* 20. TITLE CASE (« Descente Des Alpages », « Sites Livres Depuis 2012 ») :
       le capitalize du template est fautif en francais sur les cartes. */
.gallery-block_one-title, .single-work h4, .single-work [class*="card"],
.awards-block_one-title, .journal-block_one-heading { text-transform: none !important; }

/* 21. GRILLE DU JOURNAL (page liste) : cartes d'une meme rangee etirees a
       hauteur egale. Lecon : height:100% sur un flex item NEUTRALISE le
       stretch de la rangee : on retire toute height et on laisse la row
       flex etirer ; float du template coupe. */
.blog .journal-block_one { display: flex; flex-direction: column; float: none; height: auto; }
.blog .journal-two .row { display: flex; flex-wrap: wrap; align-items: stretch; }
.blog .journal-block_one-inner { flex: 1; display: flex; flex-direction: column; }
.blog .journal-block_one-inner > :last-child { margin-top: auto; }

/* 22. BOUTON « Envoyer » du formulaire : prune sombre peu saillant : accent
       rose du site, comme le CTA du header. */
.contact-form .gform_button, .gform_wrapper .gform_button {
  background: var(--theme-color, #ff2e6c) !important; color: #fff !important;
  border: none; opacity: 1;
}
.contact-form .gform_button:hover { opacity: .85; }

/* 23. LIENS LEGAUX de la barre basse du footer : cramoisi trop sombre sur
       fond noir (#7F0348, ~2,5:1) : eclaircis. */
.footer-bottom a, .footer-bottom .navigation li a { color: #ff5e93; }
.footer-bottom a:hover { color: #fff; }

/* ---- PASSE 7 (revue mobile live JM 2026-08-25) -------------------------- */

/* 24. FORMULAIRE CONTACT lisible : placeholders trop pales, bouton Envoyer
       nu et minuscule, case et texte RGPD ternes. */
.gform_wrapper ::placeholder { color: rgba(255, 255, 255, .8) !important; opacity: 1 !important; }
.gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea {
  color: #fff !important; border-color: rgba(255, 255, 255, .38) !important;
}
.gform_wrapper .gfield_label { color: #fff; }
.gform_wrapper .gform_required_legend { color: rgba(255, 255, 255, .8) !important; }
.gform_wrapper .gfield_consent_label { color: #e6e2e9 !important; font-size: 15px; line-height: 1.6; }
.gform_wrapper input[type="checkbox"] { width: 22px; height: 22px; accent-color: #ff2e6c; }
.gform_wrapper .gform_footer { margin-top: 18px; }
.gform_wrapper .gform_button, .gform_wrapper input[type="submit"], .gform_wrapper button[type="submit"] {
  display: block; width: 100%; padding: 16px 26px; border: none; border-radius: 40px;
  background: #ff2e6c !important; color: #fff !important;
  font-size: 17px; font-weight: 700; letter-spacing: .3px; cursor: pointer;
}
.gform_wrapper .gform_button:hover { opacity: .88; }
@media (min-width: 768px) { .gform_wrapper .gform_button { width: auto; min-width: 240px; } }

/* 25. HEADER STICKY EN MOBILE (demande JM) : barre compacte fixee, fond
       opaque, la page respire dessous. */
@media (max-width: 991px) {
  .main-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 990;
    background: rgba(14, 12, 16, .97); backdrop-filter: blur(8px); }
  .main-header .header-lower { padding-top: 6px; padding-bottom: 6px; }
  .page-wrapper { padding-top: 76px; }
}

/* 26. BOUTON pleine largeur en mobile (le theme imposait une largeur auto). */
@media (max-width: 767px) {
  .gform_wrapper .gform_button, .gform_wrapper input[type="submit"] { width: 100% !important; }
}

/* ============================================================ WIA GF UX 2026-08-31 (PASSE 8)
   Labels visibles, exemples discrets, focus rose net, RGPD confortable,
   erreurs et confirmation stylees. Charte Montek (sombre + rose #ff2e6c). */
body .gform_wrapper .gfield_label{display:block;color:#fff;font-size:15px;font-weight:600;margin-bottom:8px;opacity:1}
body .gform_wrapper .gfield_required{color:#ff2e6c;padding-left:2px}
body .gform_wrapper .gfield:not(.gfield_contains_required) > .gfield_label::after{content:" (optionnel)";font-weight:400;font-size:13px;opacity:.55}
body .gform_wrapper ::placeholder{color:rgba(255,255,255,.45)!important;opacity:1!important}
body .gform_wrapper input,body .gform_wrapper select,body .gform_wrapper textarea{
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.28);min-height:52px;font-size:16px;border-radius:10px;
}
body .gform_wrapper input:focus,body .gform_wrapper select:focus,body .gform_wrapper textarea:focus{
  border-color:#ff2e6c;box-shadow:0 0 0 3px rgba(255,46,108,.25);outline:none;
}
body .gform_wrapper select option{background:#16070d;color:#fff}
body .gform_wrapper .gfield_description:not(.validation_message){color:rgba(255,255,255,.65);font-size:13px;margin-top:6px}
body .gform_wrapper .ginput_container_consent{display:flex;gap:12px;align-items:flex-start}
body .gform_wrapper input[type="checkbox"]{width:24px;height:24px;min-width:24px;flex:0 0 24px;margin-top:1px;accent-color:#ff2e6c;cursor:pointer}
body .gform_wrapper .gfield_consent_label{cursor:pointer}
body .gform_wrapper .gfield_consent_label a{text-decoration:underline}
body .gform_wrapper .gform_button,body .gform_wrapper input[type="submit"],body .gform_wrapper button[type="submit"]{
  padding:17px 40px;font-size:16px;font-weight:700;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease;
}
body .gform_wrapper .gform_button:hover{opacity:1;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,46,108,.35)}
body .gform_wrapper .gform_button:focus-visible{outline:3px solid rgba(255,46,108,.45);outline-offset:2px}
@media (min-width:768px){body .gform_wrapper .gform_button{min-width:300px}}
body .gform_wrapper .gfield_error input,
body .gform_wrapper .gfield_error textarea,
body .gform_wrapper .gfield_error select{border-color:#FF8A80!important}
body .gform_wrapper .gfield_validation_message,
body .gform_wrapper .validation_message{color:#FF8A80;background:rgba(255,138,128,.1);border:none;font-size:14px;padding:8px 12px;border-radius:8px;margin-top:8px}
body .gform_wrapper .gform_validation_errors{background:rgba(255,138,128,.1);border:1.5px solid #FF8A80;border-radius:12px;padding:14px 18px;box-shadow:none}
body .gform_wrapper .gform_validation_errors > h2{color:#FF8A80;font-size:15px;margin:0}
body .gform_confirmation_message{display:block;color:#fff;font-size:18px;line-height:1.6;padding:24px 28px;border:1.5px solid #ff2e6c;border-radius:12px}