/*
Theme Name: Salamandre
Theme URI: https://www.peax-webdesign.com/
Template: twentytwentyfive
Author: Salamandre
Author URI: https://wordpress.org
Description: Child theme with search modal functionality inspired by Twenty Twenty
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.0.0
Updated: 2025-12-11
*/
body {
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
a:focus {
    outline: none;
}
em {
    color: var(--wp--preset--color--custom-vert-clair) !important;
    font-style: normal;
}

.em-blanc em {
    color: white !important;
    font-style: normal;
}

.gs_logo_single--inner img {
        max-width: 248px; 
}
strong {
    font-weight: 500 !important;
}
/* =============================================================================
   FORMULAIRE
   ========================================================================== */
.kb-checkbox-style {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border-radius: 3px !important;
	margin-right: 10px !important;
}
.kb-adv-form-error-title {
	font-size: 23px !important;
    font-weight: normal !important;
}
.kb-adv-form-success, .kb-adv-form-warning  {
	margin-top: 20px !important;
}
.kb-adv-form-success {
    background: var(--wp--preset--color--custom-vert-clair)!important;
	text-align: center !important;
}

/* =============================================================================
   CTA BUTTON
   ========================================================================== */
.cta-btn {
    font-family: var(--wp--preset--font-family--bebas-neue) !important;
    font-size: 23px !important;
    text-transform: uppercase;
    color: #ffffff !important;
	border-radius : 10px !important;
    padding: 14px 45px !important;
	margin: 0px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
	background-color: var(--wp--preset--color--custom-bleu-marine) !important;
}

.cta-btn:hover {
    opacity: 0.85;
    color: #ffffff !important;
}


/* =============================================================================
   SEARCH MODAL STYLES
   Inspiré du thème Twenty Twenty - Modal de recherche avec overlay
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Search Toggle Button (Loupe dans le header)
   -------------------------------------------------------------------------- */

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    color: var(--wp--preset--color--contrast, #000);
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    outline: none;
}

.search-toggle:hover,
.search-toggle:focus {
    opacity: 0.7;
}

.search-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.search-toggle .toggle-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-toggle .search-icon {
    width: 24px;
    height: 24px;
}

.search-toggle .toggle-text {
    display: none;
}

/* -----------------------------------------------------------------------------
   Search Modal Overlay
   -------------------------------------------------------------------------- */

.search-modal {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}

.search-modal.show-modal {
    display: block;
}

.search-modal.active {
    opacity: 1;
}

.admin-bar .search-modal {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .search-modal {
        top: 46px;
    }
}

/* -----------------------------------------------------------------------------
   Search Modal Inner (Barre de recherche)
   -------------------------------------------------------------------------- */

.search-modal-inner {
    background: var(--wp--preset--color--base, #fff);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: default;
}

.search-modal.active .search-modal-inner {
    transform: translateY(0);
}

.search-modal-inner .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

@media (min-width: 768px) {
    .search-modal-inner .section-inner {
        padding: 3rem 4rem;
    }
}

/* -----------------------------------------------------------------------------
   Search Form - Positionnement relatif pour le clear button
   -------------------------------------------------------------------------- */

.search-modal .search-form {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.search-modal .search-form label {
    flex: 1;
    margin: 0;
    font-size: 0;
}

.search-modal .search-field {
    width: 100%;
    padding: 1rem 3rem 1rem 0;
    font-size: 1.25rem;
    border: none;
    border-bottom: 2px solid var(--wp--preset--color--contrast, #000);
    background: transparent;
    color: var(--wp--preset--color--contrast, #000);
    outline: none;
    transition: border-color 0.2s ease;
}

.search-modal .search-field:focus {
    border-bottom-color: var(--wp--preset--color--accent, #000);
}

.search-modal .search-field::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* Masquer le X natif du navigateur sur input type="search" */
.search-modal .search-field::-webkit-search-cancel-button,
.search-modal .search-field::-webkit-search-decoration,
.search-modal .search-field::-webkit-search-results-button,
.search-modal .search-field::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* -----------------------------------------------------------------------------
   Bouton Clear (effacer le champ)
   -------------------------------------------------------------------------- */

.search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wp--preset--color--contrast, #000);
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
}

.search-clear.visible {
    opacity: 1;
    visibility: visible;
}

.search-clear:hover,
.search-clear:focus {
    opacity: 0.7;
}

.search-clear svg {
    width: 24px;
    height: 24px;
}

/* -----------------------------------------------------------------------------
   Bouton Submit (loupe circulaire)
   -------------------------------------------------------------------------- */

.search-modal .search-submit {
    background: var(--wp--preset--color--contrast, #000);
    border: none;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.search-modal .search-submit:hover,
.search-modal .search-submit:focus {
    transform: scale(1.05);
    background: var(--wp--preset--color--accent, #333);
}

.search-modal .search-submit svg {
    width: 2rem;
    height: 2rem;
}

.search-modal .search-submit svg * {
    stroke: var(--wp--preset--color--base, #fff);
}

/* -----------------------------------------------------------------------------
   Accessibility - Screen Reader Text
   -------------------------------------------------------------------------- */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* -----------------------------------------------------------------------------
   Body States
   -------------------------------------------------------------------------- */

body.showing-modal {
    overflow: hidden;
}

.search-results .wp-block-search,
.search .wp-block-search {
    display: none !important;
}

/* =============================================================================
   HEADER STYLES
   Navigation principale et alignements
   ========================================================================== */
   
/* Breadcrumbs Yoast */
.yoast-breadcrumbs,
.yoast-breadcrumbs a,
.yoast-breadcrumbs span {
    font-family: var(--wp--preset--font-family--roboto);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.yoast-breadcrumbs a {
    text-decoration: none;
}

.yoast-breadcrumbs a:hover {
    text-decoration: underline;
}

.yoast-breadcrumbs .breadcrumb_last {
    color: #fff;
}

/* Breadcrumbs – The SEO Framework 
.tsf-breadcrumb,
.tsf-breadcrumb a,
.tsf-breadcrumb span {
    font-family: var(--wp--preset--font-family--roboto);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.tsf-breadcrumb a {
    text-decoration: none;
}
.tsf-breadcrumb ol {
    padding-inline-start: 0;
    margin: 0;
    list-style: none;
}
.tsf-breadcrumb a:hover {
    text-decoration: underline;
}


.tsf-breadcrumb span[aria-current="page"] {
    color: #fff;
}
*/

/* -----------------------------------------------------------------------------
   Alignement vertical - Baseline sur le logo
   -------------------------------------------------------------------------- */

header .wp-block-group.is-content-justification-space-between {
    align-items: baseline !important;
}

header .wp-block-site-logo {
    display: flex;
    align-items: flex-end;
}

/* -----------------------------------------------------------------------------
   Menu Principal - Typographie
   -------------------------------------------------------------------------- */

header .wp-block-navigation {
    align-items: baseline !important;
}

header .wp-block-navigation .wp-block-navigation-item__content {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

header .wp-block-navigation .wp-block-navigation__container {
    gap: 48px !important;
}
/* Couleur au survol du menu */
.wp-block-navigation__container .wp-block-navigation-item__content {
    transition: color 0.5s ease;
}

/* Au survol, change la couleur */
.wp-block-navigation__container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--custom-grisfonce);
}
/* Couleur menu actif */
.current-menu-item > a,
.current-menu-parent > a,
.current-menu-ancestor > a {
    color: var(--wp--preset--color--custom-grisfonce) !important;
}

/* -----------------------------------------------------------------------------
   Zone droite - Mon compte + Loupe
   -------------------------------------------------------------------------- */

header .wp-block-group.is-content-justification-right {
    align-items: flex-end !important;
    gap: 25px !important;
    transform: translateY(2px);
}

header .wp-block-group.is-content-justification-right .search-icon {
    width: 24px !important;
    height: 24px !important;
}

header .wp-block-group.is-content-justification-right > .wp-block-group:first-child {
    align-items: flex-end !important;
}

header .search-toggle {
    padding: 0;
    display: flex;
    align-items: flex-end;
}

/* Groupe Mon compte - lien avec image inline */
header .wp-block-group.is-content-justification-right > .wp-block-group:last-child {
    align-items: center !important;
}

header .wp-block-group.is-content-justification-right > .wp-block-group:last-child a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--wp--preset--color--contrast, #000);
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

header .wp-block-group.is-content-justification-right > .wp-block-group:last-child a:hover {
    text-decoration: underline;
}

header .wp-block-group.is-content-justification-right > .wp-block-group:last-child a img {
    width: 24px !important;
    height: 24px !important;
}

/* -----------------------------------------------------------------------------
   Header Responsive - Tablette (max-width: 1080px)
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    /* Logo réduit */
    header .wp-block-site-logo img {
        max-width: 120px !important;
        height: auto !important;
    }
    
    /* Gap menu réduit */
    header .wp-block-navigation .wp-block-navigation__container {
        gap: 32px !important;
    }
    
    /* Mon compte sur 1 ligne */
    header .wp-block-group.is-content-justification-right p {
        white-space: nowrap;
    }
    
    /* Picto profil - forcer 24px */
    header .wp-block-group.is-content-justification-right > .wp-block-group:last-child .wp-block-image img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }
}

/* -----------------------------------------------------------------------------
   Header Responsive - Tablette small (max-width: 980px)
   Menu texte + pictos sans "Mon compte"
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    /* Logo réduit */
    header .wp-block-site-logo img {
        max-width: 100px !important;
        height: auto !important;
    }
    
    /* Gap menu encore réduit */
    header .wp-block-navigation .wp-block-navigation__container {
        gap: 24px !important;
    }
    
    /* Masquer le texte "Mon compte", garder le picto */
    header .wp-block-group.is-content-justification-right > .wp-block-group:last-child a {
        font-size: 0 !important;
    }
    
    header .wp-block-group.is-content-justification-right > .wp-block-group:last-child a img {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Alignement en bas du logo */
    header .wp-block-group.is-content-justification-space-between {
        align-items: end !important;
    }
    
    /* Aligner le menu texte en bas */
    header .wp-block-navigation {
        align-self: end !important;
        margin-bottom: 0 !important;
        position: relative;
        top: 4px;
    }
}

/* -----------------------------------------------------------------------------
   Header Responsive - Mobile (max-width: 849px)
   Menu hamburger centré
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
    /* Compenser le décalage du container parent */
    header .wp-block-group.has-global-padding {
        padding-right: 20px !important;
    }
    
    /* Réorganiser le header : logo | burger | icônes */
    header .wp-block-group.is-content-justification-space-between {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: end !important;
    }
    
    /* Logo à gauche */
    header .wp-block-site-logo {
        justify-self: start;
    }

    /* Forcer le menu hamburger - masquer le menu desktop mais pas celui du modal */
    header .wp-block-navigation .wp-block-navigation__container {
        display: none !important;
    }

    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
    }

    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    
    /* Navigation (burger) au centre */
    header .wp-block-navigation {
        justify-self: center;
        order: 0;
        align-self: end !important;
        position: relative;
        top: 16px;
    }
    
    /* Zone droite (loupe + profil) */
    header .wp-block-group.is-content-justification-right {
        justify-self: end;
        transform: none;
    }
    
    /* Icône burger 3 barres - remplacer le SVG WordPress */
    header .wp-block-navigation__responsive-container-open svg {
        display: none;
    }
    
    header .wp-block-navigation__responsive-container-open {
        position: relative;
        width: 27px;
        height: 20px;
        background: none;
        border: none;
    }
    
    header .wp-block-navigation__responsive-container-open::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 27px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='27' height='20' viewBox='0 0 27 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1H25.5854' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 9.66666H24.7073' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 18.6667H24.7073' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* -----------------------------------------------------------------------------
   Header Responsive - Mobile small (max-width: 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Reset du top pour le burger */
    header .wp-block-navigation {
        top: 0;
    }
}

/* Modal centré */
#modal-1-content > ul {
    margin: 0 auto; 
}

/* Supprimer le contour sur menu */
.wp-block-navigation__container a {
    outline: none;
    box-shadow: none;
}


/* =============================================================================
   FOOTER STYLES
   Design custom avec image de fond et 3 colonnes
   ========================================================================== */

.footer-kadence {
	    font-family: var(--wp--preset--font-family--roboto) !important;
		font-size : 16px !important;
		line-height : 30px !important;
}

.footer-kadence .kb-advanced-heading-link {
    font-size: 16px !important;
}

.footer-kadence h4 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    margin: 0 0 16px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
}
.footer-kadence .wp-block-navigation .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--roboto)!important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.footer-kadence .wp-block-navigation .wp-block-navigation-item__content:hover,
.footer-kadence .wp-block-navigation .wp-block-navigation-item__content:focus {
    text-decoration: underline !important;
}
.wp-block-template-part {
    margin: 0 !important;
}
