/*
Theme Name: Mokko (Child Theme)
Theme URI: http://madsparrow.us/
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Mokko Creative Agency and Portfolio Theme – The theme is built to take advantage of the Full Site Editing features introduced in WordPress and Elementor plugin, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, page transition
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mokko
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: mokko
*/

/* Add your own modification from here
-------------------------------------------------------------- */

/* ========================================
   DAGUERRE — Formulaire global
   Adaptatif dark / light via data-theme
   Roboto 600
======================================== */

/* ---- Variables par thème ---- */

:root,
[data-theme="dark"] {
  --form-bg:              rgba(255, 255, 255, 0.03);
  --form-border:          rgba(255, 255, 255, 0.08);
  --form-border-focus:    rgba(255, 255, 255, 0.55);
  --form-input-bg:        rgba(255, 255, 255, 0.05);
  --form-input-bg-focus:  rgba(255, 255, 255, 0.09);
  --form-input-border:    rgba(255, 255, 255, 0.12);
  --form-text:            #ffffff;
  --form-placeholder:     rgba(255, 255, 255, 0.22);
  --form-label:           rgba(255, 255, 255, 0.50);
  --form-rgpd:            rgba(255, 255, 255, 0.35);
  --form-select-arrow:    rgba(255, 255, 255, 0.40);
  --form-btn-bg:          #ffffff;
  --form-btn-text:        #111111;
  --form-btn-hover:       #e0e0e0;
  --form-option-bg:       #1a1a1a;
  --form-success-bg:      rgba(255, 255, 255, 0.07);
  --form-success-text:    #7fff7f;
  --form-error-bg:        rgba(255, 80, 80, 0.10);
  --form-error-text:      #ff7f7f;
}

[data-theme="light"] {
  --form-bg:              #ffffff;
  --form-border:          rgba(0, 0, 0, 0.10);
  --form-border-focus:    rgba(0, 0, 0, 0.60);
  --form-input-bg:        #f5f5f5;
  --form-input-bg-focus:  #ececec;
  --form-input-border:    rgba(0, 0, 0, 0.14);
  --form-text:            #111111;
  --form-placeholder:     rgba(0, 0, 0, 0.28);
  --form-label:           rgba(0, 0, 0, 0.50);
  --form-rgpd:            rgba(0, 0, 0, 0.40);
  --form-select-arrow:    rgba(0, 0, 0, 0.40);
  --form-btn-bg:          #111111;
  --form-btn-text:        #ffffff;
  --form-btn-hover:       #333333;
  --form-option-bg:       #ffffff;
  --form-success-bg:      rgba(0, 150, 0, 0.08);
  --form-success-text:    #2d7a2d;
  --form-error-bg:        rgba(200, 0, 0, 0.07);
  --form-error-text:      #c00000;
}

/* ========================================
   STRUCTURE
======================================== */

.daguerre-form-wrapper {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 48px;
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 12px;
  box-sizing: border-box;
}

/* Grille double colonne */
.form-row {
  margin-bottom: 20px;
}

.form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 580px) {
  .daguerre-form-wrapper {
    padding: 28px 20px;
  }
  .form-row--half {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   LABELS
======================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-family: 'Roboto', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--form-label);
}

/* ========================================
   INPUTS / TEXTAREA / SELECT
======================================== */

.daguerre-form-wrapper input[type="text"],
.daguerre-form-wrapper input[type="email"],
.daguerre-form-wrapper input[type="tel"],
.daguerre-form-wrapper select,
.daguerre-form-wrapper textarea {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--form-text);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: 8px;
  padding: 14px 18px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.daguerre-form-wrapper input[type="text"]:focus,
.daguerre-form-wrapper input[type="email"]:focus,
.daguerre-form-wrapper input[type="tel"]:focus,
.daguerre-form-wrapper select:focus,
.daguerre-form-wrapper textarea:focus {
  border-color: var(--form-border-focus);
  background: var(--form-input-bg-focus);
}

.daguerre-form-wrapper input::placeholder,
.daguerre-form-wrapper textarea::placeholder {
  color: var(--form-placeholder);
  font-weight: 400;
}

/* ========================================
   SELECT — flèche custom
======================================== */

.form-group--select {
  position: relative;
}

.form-group--select::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--form-select-arrow);
  pointer-events: none;
}

.daguerre-form-wrapper select option {
  background: var(--form-option-bg);
  color: var(--form-text);
}

/* ========================================
   TEXTAREA
======================================== */

.daguerre-form-wrapper textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

/* ========================================
   RGPD
======================================== */

.form-row--rgpd {
  margin-bottom: 24px;
}

.form-row--rgpd .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-row--rgpd .wpcf7-list-item label {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--form-rgpd);
  line-height: 1.5;
  cursor: pointer;
}

.form-row--rgpd input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: var(--form-text);
  cursor: pointer;
}

/* ========================================
   BOUTON
======================================== */

.daguerre-form-wrapper input[type="submit"] {
  font-family: 'Roboto', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--form-btn-text);
  background: var(--form-btn-bg);
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.daguerre-form-wrapper input[type="submit"]:hover {
  background: var(--form-btn-hover);
  transform: translateY(-1px);
}

.daguerre-form-wrapper input[type="submit"]:active {
  transform: translateY(0);
}

/* ========================================
   MESSAGES CF7
======================================== */

.daguerre-form-wrapper .wpcf7-response-output {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
}

.wpcf7-mail-sent-ok {
  background: var(--form-success-bg);
  color: var(--form-success-text);
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: var(--form-error-bg);
  color: var(--form-error-text);
}

.wpcf7-not-valid-tip {
  font-size: 0.70rem;
  color: var(--form-error-text);
  margin-top: 4px;
}

.wpcf7-not-valid {
  border-color: var(--form-error-text) !important;
}


/* 1. Conteneur du sous-menu */
.home .elementor-nav-menu--dropdown.sub-menu {
    background-color: #1e1e1e !important; /* Couleur sombre identique aux pages internes */
    border-radius: 25px !important;       /* Coins bien arrondis */
    padding: 20px 0 !important;
    border: none !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5) !important;
}

/* 2. Liens et Police Roboto */
.home .elementor-nav-menu--dropdown .elementor-sub-item {
    /* On force une police système sans-serif si Roboto n'est pas chargée */
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important; 
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 12px 30px !important;
    background-color: transparent !important; /* Supprime le bloc beige au repos */
    transition: all 0.3s ease !important;
}

/* 3. Au survol : Texte doré et PAS de fond beige */
.home .elementor-nav-menu--dropdown .elementor-sub-item:hover {
    color: #c4a47c !important;                /* La couleur dorée du texte */
    background-color: transparent !important; /* Supprime le rectangle beige de l'image 3 */
}

/* 4. Correction spécifique pour l'item actif */
.home .elementor-nav-menu--dropdown .elementor-item-active {
    background-color: transparent !important;
    color: #c4a47c !important;
}