/**
 * Components CSS — Glazam Child Theme
 * @version 3.0.0
 *
 * ═══════════════════════════════════════════════════════════
 *  BOUTON ANIMÉ — animation lettre par lettre au hover
 * ═══════════════════════════════════════════════════════════
 *
 *  Le shortcode [btn] génère cette structure HTML :
 *
 *    <a href="…" class="btn-glazam [btn-glazam--variant] [btn-glazam--size]">
 *      <span class="btn-glazam__mother">
 *        <span>C</span><span>o</span>…
 *      </span>
 *      <span class="btn-glazam__mother2" aria-hidden="true">
 *        <span>C</span><span>o</span>…
 *      </span>
 *    </a>
 *
 *  Au hover :
 *    • __mother  → chaque lettre glisse vers le bas (sort du bouton)
 *    • __mother2 → chaque lettre entre par le haut (vient se placer)
 *
 * ───────────────────────────────────────────────────────────
 *  SHORTCODES DISPONIBLES
 * ───────────────────────────────────────────────────────────
 *
 *  ── VARIANTES COULEUR ──
 *  [btn]Contact[/btn]                             cyan  → navy   (défaut)
 *  [btn variant="dark"]Contact[/btn]              navy  → transparent   (sombre → transparent)
 *  [btn variant="light"]Contact[/btn]             blanc → transparent   (clair → transparent)
 *  [btn variant="outline"]Contact[/btn]           contour cyan, fond cyan au hover
 *  [btn variant="outline-navy"]Contact[/btn]      contour navy, fond navy au hover
 *  [btn variant="ghost"]Contact[/btn]             texte seul, fond léger au hover
 *
 *  ── TAILLES ──
 *  [btn size="sm"]…[/btn]                         petit  (38px)
 *  [btn]…[/btn]                                   medium (44px, défaut)
 *  [btn size="lg"]…[/btn]                         grand  (56px)
 *  [btn size="xl"]…[/btn]                         xl     (66px)
 *
 *  ── OPTIONS ──
 *  [btn url="/contact/"]…[/btn]                   lien
 *  [btn full="true"]…[/btn]                       pleine largeur
 *  [btn target="_blank"]…[/btn]                   nouvel onglet
 *
 *  ── EXEMPLES COMBINÉS ──
 *  [btn url="/contact/" variant="dark" size="lg"]Nous contacter[/btn]
 *  [btn url="/services/" variant="outline" size="sm"]Voir les services[/btn]
 *  [btn url="/contact/" variant="light" full="true"]Parlez-nous de votre projet[/btn]
 */


/* ═══════════════════════════════════════════════════════════
   BASE — cyan => navy au hover  (variante par défaut)
   ═══════════════════════════════════════════════════════════ */
.btn-glazam {
    /* Layout */
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    position:         relative;
    overflow:         hidden;

    /* Taille par défaut (md) */
    height:           44px;
    padding:          0 28px;
    border-radius:    1rem;

    /* Typographie */
    font-family:      var(--font-display);
    font-size:        0.88rem;
    font-weight:      700;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    white-space:      nowrap;
    text-decoration:  none;

    /* Réglages */
    cursor:           pointer;
    user-select:      none;
    -webkit-appearance: none;
    appearance:       none;

    /* Couleurs par défaut : cyan fond, blanc texte */
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    color:            #ffffff;
    text-decoration: none !important;

    /* Transition fond/bord uniquement — les lettres ont leur propre transition */
    transition:
        background-color 0.32s ease,
        border-color     0.32s ease,
        color            0.32s ease;
}

.btn-glazam:hover {
    background-color: transparent;
    border-color:     var(--color-navy);
    color:            #ffffff;
}

.btn-glazam:active {
    transform: scale(0.97);
}


/* ═══════════════════════════════════════════════════════════
   ANIMATION — couche 1 : .btn-glazam__mother
   Texte visible au repos → glisse vers le BAS au hover
   ═══════════════════════════════════════════════════════════ */
.btn-glazam__mother {
    display:     flex;
    align-items: center;
    overflow:    hidden;
}

/* Au hover : sort du flux pour laisser la place à __mother2 */
.btn-glazam:hover .btn-glazam__mother {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.btn-glazam:hover .btn-glazam__mother span {
    transform: translateY(1.2em);
}

/* Délais échelonnés — transition en vague */
.btn-glazam__mother span:nth-child(1)  { transition: transform 0.20s; }
.btn-glazam__mother span:nth-child(2)  { transition: transform 0.30s; }
.btn-glazam__mother span:nth-child(3)  { transition: transform 0.40s; }
.btn-glazam__mother span:nth-child(4)  { transition: transform 0.50s; }
.btn-glazam__mother span:nth-child(5)  { transition: transform 0.60s; }
.btn-glazam__mother span:nth-child(6)  { transition: transform 0.70s; }
.btn-glazam__mother span:nth-child(7)  { transition: transform 0.60s; }
.btn-glazam__mother span:nth-child(8)  { transition: transform 0.50s; }
.btn-glazam__mother span:nth-child(9)  { transition: transform 0.40s; }
.btn-glazam__mother span:nth-child(10) { transition: transform 0.30s; }
.btn-glazam__mother span:nth-child(11) { transition: transform 0.40s; }
.btn-glazam__mother span:nth-child(12) { transition: transform 0.50s; }
.btn-glazam__mother span:nth-child(13) { transition: transform 0.60s; }
.btn-glazam__mother span:nth-child(14) { transition: transform 0.50s; }
.btn-glazam__mother span:nth-child(15) { transition: transform 0.40s; }
.btn-glazam__mother span:nth-child(16) { transition: transform 0.30s; }
.btn-glazam__mother span:nth-child(17) { transition: transform 0.40s; }
.btn-glazam__mother span:nth-child(18) { transition: transform 0.50s; }
.btn-glazam__mother span:nth-child(19) { transition: transform 0.60s; }
.btn-glazam__mother span:nth-child(20) { transition: transform 0.70s; }


/* ═══════════════════════════════════════════════════════════
   ANIMATION — couche 2 : .btn-glazam__mother2
   Texte masqué au-dessus → descend EN POSITION au hover
   ═══════════════════════════════════════════════════════════ */
.btn-glazam__mother2 {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    pointer-events:  none;
}

/* État repos : lettres cachées au-dessus du bouton */
.btn-glazam__mother2 span {
    transform: translateY(-1.2em);
}

/* Hover : lettres descendent en position */
.btn-glazam:hover .btn-glazam__mother2 span {
    transform: translateY(0);
}

/* Délais miroir de __mother */
.btn-glazam__mother2 span:nth-child(1)  { transition: transform 0.20s; }
.btn-glazam__mother2 span:nth-child(2)  { transition: transform 0.30s; }
.btn-glazam__mother2 span:nth-child(3)  { transition: transform 0.40s; }
.btn-glazam__mother2 span:nth-child(4)  { transition: transform 0.50s; }
.btn-glazam__mother2 span:nth-child(5)  { transition: transform 0.60s; }
.btn-glazam__mother2 span:nth-child(6)  { transition: transform 0.70s; }
.btn-glazam__mother2 span:nth-child(7)  { transition: transform 0.60s; }
.btn-glazam__mother2 span:nth-child(8)  { transition: transform 0.50s; }
.btn-glazam__mother2 span:nth-child(9)  { transition: transform 0.40s; }
.btn-glazam__mother2 span:nth-child(10) { transition: transform 0.30s; }
.btn-glazam__mother2 span:nth-child(11) { transition: transform 0.40s; }
.btn-glazam__mother2 span:nth-child(12) { transition: transform 0.50s; }
.btn-glazam__mother2 span:nth-child(13) { transition: transform 0.60s; }
.btn-glazam__mother2 span:nth-child(14) { transition: transform 0.50s; }
.btn-glazam__mother2 span:nth-child(15) { transition: transform 0.40s; }
.btn-glazam__mother2 span:nth-child(16) { transition: transform 0.30s; }
.btn-glazam__mother2 span:nth-child(17) { transition: transform 0.40s; }
.btn-glazam__mother2 span:nth-child(18) { transition: transform 0.50s; }
.btn-glazam__mother2 span:nth-child(19) { transition: transform 0.60s; }
.btn-glazam__mother2 span:nth-child(20) { transition: transform 0.70s; }


/* ═══════════════════════════════════════════════════════════
   VARIANTE DARK — sombre vers clair
   Navy plein → cyan au hover
   Usage : [btn variant="dark"]Texte[/btn]
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--dark {
    background-color: var(--color-navy);
    border: solid 2px;
    border-color:     var(--color-navy);
    color:            #ffffff !important;
}
.btn-glazam--dark:hover {
    background-color: transparent;
    border: solid 2px;
    border-color:     #050B76 !important;
    color:            #050B76 !important;
}


/* ═══════════════════════════════════════════════════════════
   VARIANTE LIGHT — clair vers sombre
   Blanc + contour navy → navy plein au hover
   Usage : [btn variant="light"]Texte[/btn]
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--light {
    background-color: #27AECC;
    border: solid 2px;
    border-color: #27AECC;
    color: #ffffff !important;
}
.btn-glazam--light:hover {
    background-color: transparent;
    border: solid 2px;
    border-color: #27AECC;
    color: #27AECC !important;
}


/* ═══════════════════════════════════════════════════════════
   VARIANTE OUTLINE — contour cyan, fond cyan au hover
   Usage : [btn variant="outline"]Texte[/btn]
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--outline {
    background-color: transparent;
    border-color:     var(--color-primary);
    color:            var(--color-primary);
}
.btn-glazam--outline:hover {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    color:            #ffffff;
}


/* ═══════════════════════════════════════════════════════════
   VARIANTE OUTLINE-NAVY — contour navy, fond navy au hover
   Usage : [btn variant="outline-navy"]Texte[/btn]
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--outline-navy {
    background-color: transparent;
    border-color:     var(--color-navy);
    color:            var(--color-navy);
}
.btn-glazam--outline-navy:hover {
    background-color: var(--color-navy);
    border-color:     var(--color-navy);
    color:            #ffffff;
}


/* ═══════════════════════════════════════════════════════════
   VARIANTE GHOST — texte seul, fond léger au hover
   Usage : [btn variant="ghost"]Texte[/btn]
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--ghost {
    background-color: transparent;
    border-color:     transparent;
    color:            var(--color-navy);
}
.btn-glazam--ghost:hover {
    background-color: rgba(28, 34, 121, 0.07);
    border-color:     transparent;
    color:            var(--color-navy);
}


/* ═══════════════════════════════════════════════════════════
   TAILLES
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--sm {
    height:    38px;
    padding:   0 20px;
    font-size: 0.75rem;
}

.btn-glazam--lg {
    height:    56px;
    padding:   0 36px;
    font-size: 0.95rem;
}

.btn-glazam--xl {
    height:         66px;
    padding:        0 48px;
    font-size:      1.05rem;
    letter-spacing: 0.07em;
}


/* ═══════════════════════════════════════════════════════════
   PLEINE LARGEUR
   ═══════════════════════════════════════════════════════════ */
.btn-glazam--full {
    width:           100%;
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITÉ — préférence animations réduites
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .btn-glazam__mother span,
    .btn-glazam__mother2 span {
        transition: none !important;
        transform:  none !important;
    }
    .btn-glazam:hover .btn-glazam__mother {
        position: static;
    }
    .btn-glazam__mother2 {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   BADGE / LABEL TECHNIQUE
   Usage : [badge]Bois[/badge]   [badge variant="cyan"]Métal[/badge]
   ═══════════════════════════════════════════════════════════ */
.glazam-badge {
    display:        inline-flex;
    align-items:    center;
    font-family:    var(--font-sans);
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding:        4px 12px;
    border-radius:  var(--radius-pill);
    background:     rgba(28, 34, 121, 0.08);
    color:          var(--color-navy);
    border:         1px solid rgba(28, 34, 121, 0.15);
}

.glazam-badge--cyan {
    background:   rgba(0, 196, 204, 0.12);
    color:        var(--color-primary-hover);
    border-color: rgba(0, 196, 204, 0.28);
}


/* ═══════════════════════════════════════════════════════════
   CARTE DE SERVICE
   Usage : <div class="glazam-card">…</div>
   ═══════════════════════════════════════════════════════════ */
.glazam-card {
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       32px;
    transition:
        border-color 0.25s ease,
        box-shadow   0.25s ease,
        transform    0.25s ease;
}

.glazam-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 8px 32px rgba(0, 196, 204, 0.12);
    transform:    translateY(-3px);
}

.glazam-card__icon {
    width:         48px;
    height:        48px;
    margin-bottom: 20px;
}

.glazam-card__title {
    font-family:    var(--font-display);
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--color-navy);
    margin-bottom:  12px;
    letter-spacing: var(--tracking-display);
}

.glazam-card__text {
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════════
   Formulaire de CF7
   
   ═══════════════════════════════════════════════════════════ */
/* Grille 2 colonnes */
.cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Dernière ligne : pièces jointes à gauche, bouton à droite */
.cf7-bottom {
  align-items: center;
}

.cf7-submit {
  display: flex;
  justify-content: flex-end;
}

/* Champs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  background: #f0f4f8;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
}

/* Responsive mobile */
@media (max-width: 600px) {
  .cf7-row {
    grid-template-columns: 1fr;
  }
}