/* ============================================
   elements.css — Éléments génériques du thème
   ============================================ */

/******************************************
 * Liens par défaut
 * Couleur primary pour tous les liens du site
 ******************************************/

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/******************************************
 * Bouton primaire
 * Basé sur le design Figma "button/primary"
 * Couleur par défaut : primary
 *
 * Compatible :
 *   - Utilisation directe sur <a>, <button>
 *   - Utilisation sur <li> de menu WordPress
 *     (le <li> porte .btn.btn-primary, le <a> enfant
 *      hérite visuellement du style)
 ******************************************/

/* --- Conteneur (li ou élément direct) --- */
.btn-primary,
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 10px 8px 20px;
    border: none;
    border-radius: 60px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    width: fit-content;
    list-style: none;
    /* Suppression des surcharges de la classe .btn de template.css */
    margin: 0;
}

/* --- Lien à l'intérieur d'un li.btn-primary (menu WordPress) --- */
.btn-primary a,
.btn.btn-primary a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    white-space: inherit;
    background: none;
    padding: 0;
    border: none;
    margin: 0;
}

.btn-primary a:hover,
.btn-primary a:focus,
.btn.btn-primary a:hover,
.btn.btn-primary a:focus {
    color: inherit;
    text-decoration: none;
}

/* --- États hover/focus/active (élément direct) --- */
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    text-decoration: none;
}

.btn-primary:active,
.btn.btn-primary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.25);
}

/* --- Icône flèche droite via ::after --- */
.btn-primary::after,
.btn.btn-primary::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='24' y='1.04907e-06' width='24' height='24' rx='12' transform='rotate(90 24 1.04907e-06)' fill='white'/%3E%3Cpath d='M19 12L5 12M13 6L19 12L13 18' stroke='%23EA5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Pas d'icône sur les variantes sans icône --- */
.btn-primary.no-icon::after,
.btn.btn-primary.no-icon::after {
    display: none;
}

/******************************************
 * Bouton secondaire
 * Basé sur le design Figma "button/secondary"
 * Couleur par défaut : #2D2D2D (gris secondaire)
 *
 * Compatible :
 *   - Utilisation directe sur <a>, <button>
 *   - Utilisation sur <li> de menu WordPress
 *     (le <li> porte .btn.btn-secondary, le <a> enfant
 *      hérite visuellement du style)
 ******************************************/

/* --- Conteneur (li ou élément direct) --- */
.btn-secondary,
.btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 10px 8px 20px;
    border: none;
    border-radius: 60px;
    background-color: var(--color-secondary, #2d2d2d);
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    width: fit-content;
    list-style: none;
    /* Suppression des surcharges de la classe .btn de template.css */
    margin: 0;
}

/* --- Lien à l'intérieur d'un li.btn-secondary (menu WordPress) --- */
.btn-secondary a,
.btn.btn-secondary a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    white-space: inherit;
    background: none;
    padding: 0;
    border: none;
    margin: 0;
}

.btn-secondary a:hover,
.btn-secondary a:focus,
.btn.btn-secondary a:hover,
.btn.btn-secondary a:focus {
    color: inherit;
    text-decoration: none;
}

/* --- États hover/focus/active (élément direct) --- */
.btn-secondary:hover,
.btn-secondary:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    text-decoration: none;
}

.btn-secondary:active,
.btn.btn-secondary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.25);
}

/* --- Icône flèche droite via ::after --- */
.btn-secondary::after,
.btn.btn-secondary::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='24' y='1.04907e-06' width='24' height='24' rx='12' transform='rotate(90 24 1.04907e-06)' fill='white'/%3E%3Cpath d='M19 12L5 12M13 6L19 12L13 18' stroke='%23EA5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Pas d'icône sur les variantes sans icône --- */
.btn-secondary.no-icon::after,
.btn.btn-secondary.no-icon::after {
    display: none;
}

/******************************************
 * Bouton tertiaire (outline)
 * Défini dans template.css, on ajoute ici
 * l'effet darken au survol
 ******************************************/

.btn.btn-tertiary:hover,
.btn.btn-tertiary:focus {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);
}

.btn.btn-tertiary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.25);
}

/******************************************
 * Tailles
 ******************************************/

.btn-primary.is-small,
.btn.btn-primary.is-small {
    padding: 5px 8px 5px 15px;
    font-size: 14px;
    line-height: 22px;
    gap: 10px;
}

.btn-primary.is-large,
.btn.btn-primary.is-large {
    padding: 12px 15px 12px 25px;
    font-size: 22px;
    line-height: 32px;
    gap: 20px;
}

/******************************************
 * Labels flottants — Gravity Forms
 *
 * Actif uniquement si le <body> porte la classe
 * .option-floating-label (option ACF option_floating_label).
 *
 * Le label des champs texte (textarea exclue) se comporte
 * comme un placeholder : posé à l'intérieur du champ, il
 * s'anime au-dessus de la saisie au focus ou dès que le
 * champ contient une valeur.
 *
 * La détection "champ rempli" repose sur :placeholder-shown ;
 * un placeholder " " est injecté par js/main.js.
 *
 * Sélecteurs :has() + :is() (navigateurs modernes).
 ******************************************/

/* --- Champs texte & sous-champs concernés --- */
body.option-floating-label .gfield:has(input:is([type=text], [type=email], [type=tel], [type=number], [type=url], [type=password])),
body.option-floating-label .ginput_complex span,
body.option-floating-label .ginput_complex div {
    position: relative;
}

/* --- Réserve la zone haute du champ pour le label flottant --- */
body.option-floating-label .gfield input:is([type=text], [type=email], [type=tel], [type=number], [type=url], [type=password]),
body.option-floating-label .ginput_complex input:is([type=text], [type=email], [type=tel], [type=number], [type=url], [type=password]) {
    padding: 22px 0 0 !important;
}

/* --- Masquage du legend / label principal du champ d'adresse --- */
.gfield--type-address legend,
.gform_wrapper .gfield--type-address > legend,
.gfield_label_before_complex {
    display: none !important;
}

/* --- Ajout de (Nécessaire) sur les sous-labels si le champ est obligatoire --- */
.gfield_contains_required .ginput_complex label::after {
    content: ' (Nécessaire)';
    font-style: italic;
    font-size: inherit;
    line-height: inherit;
    color: #c12b0b !important;
}

/* --- État repos : le label fait office de placeholder (UNIQUEMENT sur champs texte avec floating input) --- */
body.option-floating-label .gfield:has(input:is([type=text], [type=email], [type=tel], [type=number], [type=url], [type=password])):not(:has(.ginput_complex)) > .gfield_label:not(.screen-reader-text),
body.option-floating-label .ginput_complex label {
    position: absolute !important;
    top: 15px !important;
    left: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Momo Trust Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 19px !important;
    color: #706f6f !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    text-transform: none !important;
    text-align: left !important;
    transition:
        top 0.2s ease-out,
        font-size 0.2s ease-out,
        line-height 0.2s ease-out,
        color 0.2s ease-out !important;
}

/* --- État flottant : focus OU champ avec valeur --- */
body.option-floating-label .gfield:has(input:is([type=text], [type=email], [type=tel], [type=number], [type=url], [type=password])):not(:has(.ginput_complex)):is(:focus-within, :has(input:not(:placeholder-shown))) > .gfield_label:not(.screen-reader-text),
body.option-floating-label .ginput_complex span:is(:focus-within, :has(input:not(:placeholder-shown))) label,
body.option-floating-label .ginput_complex div:is(:focus-within, :has(input:not(:placeholder-shown))) label {
    top: 3px !important;
    font-size: 12px !important;
    line-height: 14px !important;
    color: var(--color-primary, #ea5b0c) !important;
}

/* --- Ajustement de la taille de "(Nécessaire)" pour suivre la taille dynamique du label --- */
.gform_wrapper .gfield_label .gfield_required {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit;
    transition: font-size 0.2s ease-out, line-height 0.2s ease-out, color 0.2s ease-out;
}


/******************************************
 * Formulaires
 ******************************************/

.gform_wrapper.gravity-theme .gfield_label{
    font-weight: 400!important;
}

/* --- Alignement côte à côte des sous-champs d'adresse (Ville, Code postal) --- */
.gform_wrapper .ginput_complex,
.block-contact .ginput_complex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 15px 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

.gform_wrapper .ginput_complex .ginput_full,
.gform_wrapper .ginput_complex span[class*="ginput_address_street"],
.block-contact .ginput_complex .ginput_full {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.gform_wrapper .ginput_complex .ginput_left,
.gform_wrapper .ginput_complex .ginput_right,
.gform_wrapper .ginput_complex span[class*="ginput_address_city"],
.gform_wrapper .ginput_complex span[class*="ginput_address_zip"],
.gform_wrapper .ginput_complex span[class*="ginput_address_state"],
.block-contact .ginput_complex .ginput_left,
.block-contact .ginput_complex .ginput_right {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    box-sizing: border-box !important;
}


/******************************************
 * Fil d'ariane — Yoast Breadcrumb
 *
 * Surcharge du rendu natif du plugin Yoast SEO.
 * Structure générée par yoast_breadcrumb() :
 *   <p id="breadcrumbs">
 *     <span>
 *       <span><a href="...">Accueil</a></span>
 *       <span class="breadcrumb_last" aria-current="page">Page</span>
 *     </span>
 *   </p>
 *
 * Le séparateur texte natif « » est masqué (color: transparent)
 * et remplacé par un chevron SVG discret entre chaque niveau.
 ******************************************/

/* --- Conteneur principal --- */
#breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 24px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-secondary, #2d2d2d);
    list-style: none;
    background-color: var(--color-quaternary, #eeeeee);
    border-radius: 6px;
    margin-top: 30px;
}

/* --- Span racine : alignement + masquage du séparateur « » natif --- */
#breadcrumbs > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: transparent;
}

/* --- Liens --- */
#breadcrumbs a {
    color: var(--color-primary, #ff154d);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

#breadcrumbs a:hover,
#breadcrumbs a:focus {
    color: var(--color-primary-dark, #d6003a);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Page courante (non cliquable) --- */
#breadcrumbs .breadcrumb_last {
    color: var(--color-secondary, #2d2d2d);
    font-weight: 600;
}

/* --- Chevron séparateur entre les niveaux --- */
#breadcrumbs > span > span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 10px;
    margin: 0 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23706F6F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

/******************************************
 * Surcharge des boutons WordPress natifs
 * Bloc « wp-block-button »
 *
 * On applique la même typographie et le
 * même ::after (flèche) que les boutons
 * du site, tout en laissant WordPress
 * gérer la couleur via ses classes
 * has-*-background-color / has-*-color.
 ******************************************/

.wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 10px 8px 20px;
    border: none;
    border-radius: 60px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 767px) {
    .wp-block-button {
        display: block;
        width: 100%;
    }

    .wp-block-button .wp-block-button__link {
        display: flex;
        width: 100%;
        max-width: 100%;
        padding: 10px 16px;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.4;
    }
}

.wp-block-button .wp-block-button__link.has-secondary-background-color {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-button .wp-block-button__link.has-secondary-background-color:hover,
.wp-block-button .wp-block-button__link.has-secondary-background-color:focus {
    background-color: var(--color-primary) !important;
    color: #ffffff;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.wp-block-button .wp-block-button__link:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.25);
}

/* --- Flèche droite via ::after --- */
.wp-block-button .wp-block-button__link::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='24' y='1.04907e-06' width='24' height='24' rx='12' transform='rotate(90 24 1.04907e-06)' fill='white'/%3E%3Cpath d='M19 12L5 12M13 6L19 12L13 18' stroke='%23EA5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Pas d'icône sur la variante "no-icon" --- */
.wp-block-button.is-style-no-icon .wp-block-button__link::after {
    display: none;
}

/* --- Tailles --- */
.wp-block-button.is-style-small .wp-block-button__link {
    padding: 5px 8px 5px 15px;
    font-size: 14px;
    line-height: 22px;
    gap: 10px;
}

.wp-block-button.is-style-large .wp-block-button__link {
    padding: 12px 15px 12px 25px;
    font-size: 22px;
    line-height: 32px;
    gap: 20px;
}