/* Harmonisé sur la couleur primaire #0f766e (favicon) — outils/design_harmoniser.py */
/* ==========================================================================
   Cours de Yoga — direction « Yoga apaisé »
   Vert sauge #0f766e / sable rosé #f2fdfc / terracotta doux #17b7aa
   Trebuchet MS, formes très arrondies, mouvement lent et doux.
   ========================================================================== */

:root {
    --yg-sauge: #0f766e;
    --yg-sauge-fonce: #0c5b55;
    --yg-sable: #f2fdfc;
    --yg-sable-uni: #e7fcfa;
    --yg-terracotta: #17b7aa;
    --yg-terracotta-fonce: #129187;
    --yg-encre: #1f2a29;
}

/* --------------------------------------------------------------------
   HEADER desktop — fond sable rosé sans bordure, logo centré en haut,
   nav basse en pastilles vertes très arrondies, bouton terracotta pilule.
   -------------------------------------------------------------------- */
header.site-header.hdr-centered {
    background: var(--yg-sable);
    border-bottom: none;
    box-shadow: 0 6px 20px -12px rgba(15, 118, 110, 0.25);
    font-family: "Trebuchet MS", Verdana, sans-serif;
    padding-top: 18px;
}

header.site-header.hdr-centered .hdr-centered-top {
    justify-content: center;
    position: relative;
    padding-bottom: 6px;
}

header.site-header.hdr-centered .brand {
    color: var(--yg-sauge-fonce);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    gap: 10px;
}

header.site-header.hdr-centered .brand-logo {
    border-radius: 50%;
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 2px 10px -3px rgba(15, 118, 110, 0.35);
}

/* Le bouton d'action se déplace en absolu à droite : le logo reste
   visuellement centré au-dessus de la nav, sans toucher au DOM. */
header.site-header.hdr-centered .hdr-centered-auth {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

header.site-header.hdr-centered .btn.btn-primary {
    background: var(--yg-terracotta);
    border: none;
    border-radius: 999px;
    color: #f6fefd;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-weight: 600;
    padding: 11px 22px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 6px 16px -6px rgba(23, 183, 170, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

header.site-header.hdr-centered .btn.btn-primary:hover {
    background: var(--yg-terracotta-fonce);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(23, 183, 170, 0.6);
}

header.site-header.hdr-centered .hamburger {
    color: var(--yg-sauge-fonce);
}

/* Nav basse : barre séparée du bloc logo, pastilles vertes très arrondies. */
header.site-header.hdr-centered .hdr-centered-nav {
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 118, 110, 0.25);
    flex-wrap: wrap;
}

header.site-header.hdr-centered .nav-link {
    background: rgba(15, 118, 110, 0.08);
    color: var(--yg-sauge-fonce);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease;
}

header.site-header.hdr-centered .nav-link:hover {
    background: var(--yg-sauge);
    color: #ffffff;
    transform: translateY(-2px);
}

header.site-header.hdr-centered .dropdown-trigger {
    background: rgba(15, 118, 110, 0.08);
    color: var(--yg-sauge-fonce);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    transition: transform 0.2s ease, background 0.2s ease;
}

header.site-header.hdr-centered .dropdown-trigger:hover,
header.site-header.hdr-centered .dropdown.open .dropdown-trigger {
    background: var(--yg-sauge);
    color: #ffffff;
    transform: translateY(-2px);
}

header.site-header.hdr-centered .dropdown-panel {
    border-radius: 22px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    box-shadow: 0 18px 36px -18px rgba(15, 118, 110, 0.4);
    overflow: hidden;
    background: #ffffff;
}

header.site-header.hdr-centered .dropdown-item {
    border-radius: 0;
}

header.site-header.hdr-centered .dropdown-item:hover {
    background: var(--yg-sable-uni);
}

header.site-header.hdr-centered .dropdown-item-keyword {
    color: var(--yg-sauge-fonce);
}

/* --------------------------------------------------------------------
   Barre + tiroir mobile — fond sable rosé, liens verts. On ne touche
   jamais à display/position/transform/visibility/overflow/width du
   mécanisme d'ouverture.
   -------------------------------------------------------------------- */
.mobile-drawer {
    background: var(--yg-sable);
    font-family: "Trebuchet MS", Verdana, sans-serif;
    padding-top: 26px;
}

.mobile-drawer .mobile-close {
    background: rgba(15, 118, 110, 0.1);
    color: var(--yg-sauge-fonce);
    border-radius: 50%;
}

.mobile-drawer .mobile-section-title {
    color: var(--yg-terracotta);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.mobile-drawer .mobile-nav-link {
    color: var(--yg-sauge-fonce);
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 14px;
    padding-left: 8px;
    transition: background 0.2s ease, padding-left 0.2s ease;
}

.mobile-drawer .mobile-nav-link:hover,
.mobile-drawer .mobile-nav-link:active {
    background: rgba(15, 118, 110, 0.1);
    padding-left: 14px;
}

.mobile-drawer .mobile-auth {
    border-top: 1px dashed rgba(15, 118, 110, 0.3);
    padding-top: 16px;
}

.mobile-drawer .mobile-auth .btn.btn-primary {
    background: var(--yg-terracotta);
    border-radius: 999px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #f6fefd;
}

.mobile-overlay {
    background: rgba(31, 42, 41, 0.45);
}

/* --------------------------------------------------------------------
   FOOTER — vert sauge en deux blocs (marque + phrase, liens en
   pastilles), coins très arrondis.
   -------------------------------------------------------------------- */
footer.site-footer.ftr-compact {
    background: var(--yg-sauge);
    color: #e8fcfb;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    border-radius: 32px 32px 0 0;
    padding: 40px 0 30px;
    margin-top: 12px;
}

footer.site-footer.ftr-compact .ftr-compact-inner {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    align-items: center;
    gap: 24px;
}

footer.site-footer.ftr-compact .footer-copy {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

footer.site-footer.ftr-compact .footer-copy::after {
    content: "Des cours de yoga, choisis près de chez vous.";
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(232, 252, 251, 0.8);
}

footer.site-footer.ftr-compact .ftr-compact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

footer.site-footer.ftr-compact .ftr-compact-links a {
    background: rgba(255, 255, 255, 0.12);
    color: #e8fcfb;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.85rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

footer.site-footer.ftr-compact .ftr-compact-links a:hover {
    background: var(--yg-terracotta);
    color: #f6fefd;
    transform: translateY(-2px);
}

/* Le séparateur en point-milieu du socle ne convient pas à des pastilles
   déjà espacées par le gap : on le retire. */
footer.site-footer.ftr-compact .ftr-compact-links a::after {
    content: none;
}

footer.site-footer.ftr-compact .ftr-compact-auth a {
    background: rgba(255, 255, 255, 0.12);
    color: #e8fcfb;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
}

footer.site-footer.ftr-compact .ftr-compact-auth a:hover {
    background: var(--yg-terracotta);
    color: #f6fefd;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------
   Page « Ajouter mon entreprise » — formulaire à bords très arrondis,
   champs pilule, arguments en cartes rondes à droite.
   -------------------------------------------------------------------- */
.ie-wrap {
    font-family: "Trebuchet MS", Verdana, sans-serif;
}

.ie-wrap .page-header h1 {
    color: var(--yg-sauge-fonce);
    font-weight: 700;
}

.ie-wrap .page-header p {
    color: var(--yg-encre);
}

.ie-wrap .ie-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 26px;
    align-items: start;
}

.ie-wrap .ie-card.auth-card {
    background: var(--yg-sable);
    border: none;
    border-radius: 30px;
    box-shadow: 0 20px 40px -24px rgba(15, 118, 110, 0.4);
    padding: 32px;
}

.ie-wrap .qf-section {
    color: var(--yg-sauge-fonce);
    font-weight: 700;
    font-size: 1.02rem;
    border-bottom: 2px dashed rgba(15, 118, 110, 0.3);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.ie-wrap .quote-lead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

.ie-wrap .quote-field-wide {
    grid-column: 1 / -1;
}

.ie-wrap .quote-field label {
    color: var(--yg-sauge-fonce);
    font-weight: 600;
    font-size: 0.88rem;
}

.ie-wrap .quote-field input,
.ie-wrap .quote-field select,
.ie-wrap .quote-field textarea {
    border: 1.5px solid rgba(15, 118, 110, 0.3);
    border-radius: 999px;
    min-height: 46px;
    padding: 0 20px;
    background: #ffffff;
    color: var(--yg-encre);
    font-family: "Trebuchet MS", Verdana, sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ie-wrap .quote-field textarea {
    border-radius: 26px;
    padding: 14px 20px;
    min-height: 96px;
}

.ie-wrap .quote-field input:focus,
.ie-wrap .quote-field select:focus,
.ie-wrap .quote-field textarea:focus {
    outline: none;
    border-color: var(--yg-sauge);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18);
}

.ie-wrap .quote-lead-actions {
    margin-top: 22px;
    text-align: center;
}

.ie-wrap .quote-lead-actions .btn.btn-primary {
    background: var(--yg-terracotta);
    border: none;
    border-radius: 999px;
    color: #f6fefd;
    font-weight: 700;
    min-height: 48px;
    padding: 0 34px;
    box-shadow: 0 10px 24px -10px rgba(23, 183, 170, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ie-wrap .quote-lead-actions .btn.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 28px -10px rgba(23, 183, 170, 0.6);
}

.ie-wrap .quote-lead-actions small {
    display: block;
    margin-top: 10px;
    color: rgba(31, 42, 41, 0.78);
}

/* Colonne latérale à droite : cartes bien rondes, teintées sauge/terracotta. */
.ie-wrap .ie-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ie-wrap .ie-why {
    border: none;
    border-radius: 26px;
    padding: 26px;
    background: #ffffff;
    box-shadow: 0 16px 32px -22px rgba(15, 118, 110, 0.4);
    animation: yg-apparition 0.6s ease both;
}

.ie-wrap .ie-side .ie-why:first-child {
    background: rgba(15, 118, 110, 0.08);
}

.ie-wrap .ie-side .ie-why:last-child {
    background: rgba(23, 183, 170, 0.07);
}

.ie-wrap .ie-why h2 {
    color: var(--yg-sauge-fonce);
    font-size: 1.05rem;
    font-weight: 700;
}

.ie-wrap .ie-why ul {
    padding-left: 20px;
}

.ie-wrap .ie-why li {
    margin-bottom: 8px;
    color: var(--yg-encre);
}

/* --------------------------------------------------------------------
   Animations sobres : apparition douce du header, pastilles qui
   s'élèvent au survol (déjà réglées ci-dessus via transform).
   -------------------------------------------------------------------- */
@keyframes yg-apparition {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

header.site-header.hdr-centered {
    animation: yg-apparition 0.55s ease both;
}

@media (prefers-reduced-motion: reduce) {
    header.site-header.hdr-centered,
    .ie-wrap .ie-why,
    header.site-header.hdr-centered .btn.btn-primary,
    header.site-header.hdr-centered .nav-link,
    header.site-header.hdr-centered .dropdown-trigger,
    footer.site-footer.ftr-compact .ftr-compact-links a,
    .mobile-drawer .mobile-nav-link,
    .ie-wrap .quote-lead-actions .btn.btn-primary {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------
   Mobile (< 992 px) : header centré resserré, footer en une colonne.
   -------------------------------------------------------------------- */
@media (max-width: 991px) {
    footer.site-footer.ftr-compact .ftr-compact-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    footer.site-footer.ftr-compact .ftr-compact-links {
        justify-content: center;
    }

    .ie-wrap .ie-grid {
        grid-template-columns: 1fr;
    }

    .ie-wrap .quote-lead-grid {
        grid-template-columns: 1fr;
    }
}