/* ===================================
   RESET & ÉLÉMENTS DE BASE
   =================================== */

footer {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    margin-top: 0;
}

section {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
}

/* ===================================
   UTILITIES - CLASSES RÉUTILISABLES
   =================================== */

/* Formes & Bordures */
.radius-25,
figure.radius-25 img {
    border-radius: 25px;
}

.radius-50,
figure.radius-50 img {
    border-radius: 50px;
}

/* Blocs de couleur */
.blocblanc {
    background-color: var(--wp--preset--color--base);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.blocblanc.hero {
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

.blocbeige {
    background-color: var(--wp--preset--color--base-3);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Layout helpers */
.flexcenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.is-vertically-aligned-stretch {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nocut {
    display: inline-block;
}

/* ===================================
   TYPOGRAPHIE
   =================================== */

.h1seo {
    text-transform: uppercase;
}

h1:not(.h1seo),
.ph1 {
    font-size: var(--wp--preset--font-size--xxx-large);
    line-height: 1.3;
}

h1:not(.h1seo) strong,
.ph1 strong {
    color: var(--wp--preset--color--accent-blue-dark);
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

.balance {
    text-wrap: balance;
}

.cap {
    text-transform: uppercase;
}

.inlineblock {
    display: inline-block;
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */

/* Sticky Header */
.wp-block-template-part:has(>.is-position-sticky) {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
    -webkit-margin-before: 0;
    margin-block-start: 0;
}

/* Non connecté */
body:not(.logged-in) .wp-block-template-part:has(>.is-position-sticky) {
    top: 0px;
}

/* Connecté avec admin bar */
body.logged-in .wp-block-template-part:has(>.is-position-sticky) {
    top: var(--wp-admin--admin-bar--height, 0px);
}

/* Menus principaux */
.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-blue) !important;
}

/* Annuler hover pour items avec sous-menus */
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    cursor: default !important;
    pointer-events: none !important;
}

.wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover {
    color: inherit !important;
}

/* Sous-menus animés */
.wp-block-navigation__submenu-container {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    /* Animation */
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
}

/* État visible au hover */
.wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Hover items sous-menu */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--accent-blue) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Coins arrondis des items */
.wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
    border-radius: 0.5rem 0.5rem 0 0;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
    border-radius: 0 0 0.5rem 0.5rem;
}

/* ===================================
   COMPOSANTS DÉCORATIFS
   =================================== */

.blueDots {
    margin: 1rem;
    outline: 2.5px dashed var(--wp--preset--color--accent-blue);
    border: 10px solid var(--wp--preset--color--base-2);
}

/* Lignes décoratives SVG en arrière-plan */
.lignes {
    position: relative;
}

.lignes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.ligne1::before {
    background-position: center;
    background-image: url('../img/line-1.svg');
}

.ligne2::before {
    background-position: center;
    background-image: url('../img/line-2.svg');
}

.ligne3::before {
    background-position: bottom;
    background-image: url('../img/line-3.svg');
}

.ligne4::before {
    background-position: center;
    background-image: url('../img/line-4.svg');
}

/* ===================================
   BLOCS WORDPRESS FSE
   =================================== */

/* Boutons */
.is-style-outline:hover .wp-block-button__link {
    background-color: var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--base) !important;
}

/* Images - Style cercle */
.wp-block-image.is-style-circle img {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Accordéon */
.wp-block-accordion-item {
    background-color: var(--wp--preset--color--base);
    padding: var(--wp--preset--spacing--40);
    border-radius: 25px;
    margin-bottom: var(--wp--preset--spacing--30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-wrap: balance;
}

.wp-block-accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.wp-block-accordion-heading {
    margin-bottom: 0;
}

.wp-block-accordion-heading__toggle:hover {
    background-color: var(--wp--preset--color--base-2);
    text-decoration: none;
}

.wp-block-accordion-heading__toggle-title {
    flex: 1;
}

.wp-block-accordion-item:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: unset;
}

.wp-block-accordion-heading__toggle-icon {
    font-weight: 400;
    transition: transform 0.3s ease;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    transform: rotate(45deg); /* + devient × */
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
    margin-bottom: var(--wp--preset--spacing--30);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.wp-block-accordion-panel {
    padding-top: var(--wp--preset--spacing--20);
}

.wp-block-accordion-item.is-open:hover {
    transform: none;
}

/* ===================================
   COMPOSANTS CUSTOM
   =================================== */

/* Blocs avec chiffres auto-numérotés */
.blocs-numerotes {
    counter-reset: chiffre-fond;
}

.blocChiffre {
    position: relative;
    padding: var(--wp--preset--spacing--50);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    counter-increment: chiffre-fond;
}

.blocChiffre::before {
    content: counter(chiffre-fond);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(150px, 12vw, 200px);
    font-weight: 300;
    line-height: 1;
    opacity: 0.15;
    color: var(--wp--preset--color--accent-blue-dark);
    z-index: 0;
    pointer-events: none;
}

.blocChiffre > * {
    position: relative;
    z-index: 1;
}

/* ===================================
   PAGES SPÉCIFIQUES - CARRIÈRE
   =================================== */

/* Grille offres d'emploi */
.offre-emploi-grid {
    display: grid;
    grid-template-columns: 70% 30%;
    row-gap: 2rem;
    align-items: start;
}

.offre-emploi-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.offre-emploi-content p {
    margin: 0;
}

.offre-emploi-cta {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

/* Bouton outline pour les offres d'emploi */
.liste-offres-emploi .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid currentColor;
    color: #0376AC; /* Couleur principale Materna */
    text-decoration: none;
    white-space: nowrap;
}

/* ===================================
   PAGES SPÉCIFIQUES - CONTACT
   =================================== */

/* Colonnes - étirement vertical */
.wp-block-columns:has(.bgContact) {
    align-items: stretch;
}

.bgContact {
    background-image: url('/wp-content/uploads/2025/12/Photo-papa-et-bebe.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* ===================================
   INTÉGRATIONS TIERCES
   =================================== */

/* YouTube Lite Embed */
.wp-block-embed__wrapper:has(lite-youtube)::before {
    display: none !important;
}

lite-youtube {
    border-radius: 15px;
    overflow: hidden;
}

/* TranslatePress Switcher */
.trp-shortcode-switcher__wrapper p,
.trp-shortcode-switcher__wrapper br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.trp-shortcode-switcher__wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.trp-shortcode-anchor,
.trp-shortcode-overlay {
    margin: 0 !important;
    padding: 0 !important;
}

.trp-current-language-item__wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.trp-language-item {
    display: inline-flex;
    align-items: center;
    padding: 8px !important;
    text-decoration: none;
    transition: all var(--transition-duration, 0.2s);
    border-radius: var(--border-radius, 5px);
}

.trp-switcher-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px;
    background: var(--bg);
    border: var(--border);
    border-radius: var(--border-radius, 5px);
    overflow: hidden;
}

.trp-switcher-dropdown-list .trp-language-item {
    width: 100%;
    justify-content: flex-start;
}

.trp-shortcode-arrow {
    flex-shrink: 0;
    transition: transform var(--transition-duration, 0.2s);
}

.trp-shortcode-switcher[data-open="true"] .trp-shortcode-arrow {
    transform: rotate(180deg);
}

/* Menu langues custom */
.language-switcher {
    position: relative;
    display: inline-block;
}

.language-switcher .lang-current {
    background: transparent;
    border: none;
    padding: 8px 24px 8px 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    cursor: pointer;
    position: relative;
}

.language-switcher .lang-current::after {
    content: '▼';
    font-size: 10px;
    margin-left: 6px;
    transition: transform 0.3s;
}

.language-switcher .lang-current:hover {
    color: #0376AC;
}

.language-switcher .lang-list {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    min-width: 60px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
    z-index: 1000;
}

.language-switcher:hover .lang-list,
.language-switcher .lang-current:focus + .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-switcher .lang-list li {
    margin: 0;
}

.language-switcher .lang-list a {
    display: block;
    padding: 10px 16px;
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.language-switcher .lang-list a:hover {
    background: #f5f5f5;
    color: #0376AC;
}

.language-switcher p:empty {
    display: none;
    margin: 0;
    padding: 0;
}


/* Fluent Forms - Formulaire Contact */

/* Container formulaire */
.fluentform {
    max-width: 100%;
}

/* Labels */
.fluentform .ff-el-input--label label {
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    margin-bottom: 0.5rem;
    display: block;
}

/* Champs de saisie - inputs et selects */
.fluentform .ff-el-form-control {
    background-color: #fff;
    border: none;
    border-bottom: 2px solid var(--wp--preset--color--base-2);
    border-radius: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--wp--preset--color--contrast);
    transition: border-color 0.3s ease;
    width: 100%;
}

/* Placeholder */
.fluentform .ff-el-form-control::placeholder {
    color: var(--wp--preset--color--contrast);
    opacity: 0.5;
}

/* Ligne animée au focus */
.fluentform .ff-el-input--content {
    position: relative;
}

.fluentform .ff-el-input--content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--wp--preset--color--accent-blue-dark);
    transition: width 0.4s ease;
}

.fluentform .ff-el-form-control:focus {
    outline: none;
    border-bottom-color: transparent;
}

.fluentform .ff-el-input--content:has(.ff-el-form-control:focus)::after {
    width: 100%;
}

/* Textarea spécifique */
.fluentform textarea.ff-el-form-control {
    resize: vertical;
    min-height: 100px;
}

/* Espacement entre les champs */
.fluentform .ff-el-group {
    margin-bottom: 2rem;
}

/* Champs obligatoires - astérisque */
.fluentform .ff-el-is-required label::after {
    content: " *";
    color: var(--wp--preset--color--accent-blue);
}

/* Checkbox T&C */
.fluentform .ff-el-form-check label {
    display: flex !important;
    align-items: flex-start;
    gap: 1rem;
}

.fluentform .ff_tc_checkbox {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.fluentform .ff-el-form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--wp--preset--color--accent-blue);
}

.fluentform .ff_t_c {
    font-size: 0.875rem;
    color: var(--wp--preset--color--contrast);
    line-height: 1.5;
}

.fluentform .ff_t_c a {
    color: var(--wp--preset--color--accent-blue);
    text-decoration: underline;
}

.fluentform .ff_t_c a:hover {
    color: var(--wp--preset--color--accent-blue-dark);
}

/* Bouton d'envoi */
.fluentform .ff-btn-submit {
    background-color: var(--wp--preset--color--accent-green-light) !important;
    color: var(--wp--preset--color--contrast) !important;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
}

.fluentform .ff-btn-submit:hover {
    background-color: var(--wp--preset--color--accent-green) !important;
    color: var(--wp--preset--color--contrast) !important;
    opacity: 1;
}



/* Messages d'erreur */
.fluentform .error {
    color: #d32f2f;
    font-size: 0.875rem;
    position: absolute;
    bottom: -1.25rem;
}

/* Champs invalides */
.fluentform .ff-el-form-control[aria-invalid="true"] {
    border-bottom-color: #d32f2f !important;
}


/* ===================================
   MEDIA QUERIES - RESPONSIVE
   =================================== */

/* Utilities responsive */
@media screen and (max-width: 781px) {
    .mobile-order-1 {
        order: 1;
    }
    .mobile-order-2 {
        order: 2;
    }
    .mobile-order-3 {
        order: 3;
    }
    .mobile-order-4 {
        order: 4;
    }
}

/* Blocs responsive */
@media screen and (max-width: 768px) {
    .blocblanc,
    .blocblanc.hero {
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    }
    
    /* Grille offres d'emploi */
    .offre-emploi-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .offre-emploi-content h3,
    .offre-emploi-content p {
        text-align: center;
    }
    
    .offre-emploi-cta {
        justify-content: center;
    }
}

/* Header - Navigation responsive */
@media screen and (max-width: 1220px) {
    .site-header .desktop {
        display: none !important;
    }
    .site-header .mobile {
        display: flex;
    }
    .wp-block-navigation__responsive-container-content {
        padding: var(--wp--preset--spacing--50);
    }
}

@media screen and (min-width: 1221px) {
    .site-header .desktop {
        display: flex;
    }
    .site-header .mobile {
        display: none !important;
    }
}