/* ========================================
   BADGE PILLULE RÉUTILISABLE
   ======================================== */
.badge-pill {
    background-color: rgba(0, 169, 159, 0.2);
    color: #202e3b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 25px;
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s;
}

.badge-pill--active,
.badge-pill:active,
.badge-pill:hover {
    background-color: #00a99f;
    color: #f8f5e2;
}
/* Components - Emmanuel Claude */

/* ========================================
   PILLULE BLANCHE
   ======================================== */
.pillule-blanche {
    display: inline-block;
    background-color: #ffffff;
    color: #202e3b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}
.btn a{
    text-decoration: none;
}


/* ========================================
   BOUTON PRIMARY
   Base commune à toutes les variantes
   ======================================== */
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: fit-content;
    max-width: 100%;
    min-height: 50px;
    padding: 5px 25px;
    border-radius: 25px;
    color: #F8F5E2;
    background-color: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-primary .btn-text {
    color: inherit;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.btn.btn-primary .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-primary .btn-icon img,
.btn.btn-primary .btn-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Flèche générée automatiquement si aucun .btn-icon n'est présent */
.btn.btn-primary::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 8px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.7071 7.93291' fill='none'><path d='M0 3.96646H13.7742' stroke='black'/><path d='M10.3871 0.353553L14 3.96646L10.3871 7.57936' stroke='black'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.7071 7.93291' fill='none'><path d='M0 3.96646H13.7742' stroke='black'/><path d='M10.3871 0.353553L14 3.96646L10.3871 7.57936' stroke='black'/></svg>") no-repeat center / contain;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-primary:has(.btn-icon)::after {
    content: none;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
    gap: 23px;
}

/* ========================================
   Variante .orange.fill
   ======================================== */
.btn.btn-primary.orange.fill {
    background-color: #F05534;
    a{
        color: #F8F5E2;
    }
}

.btn.btn-primary.orange.fill:hover,
.btn.btn-primary.orange.fill:focus-visible {
    background-color: #F64B26;
}

/* ========================================
   Variante .blue.fill
   ======================================== */
.btn.btn-primary.blue.fill {
    background-color: #202E3B;
}

.btn.btn-primary.blue.fill:hover,
.btn.btn-primary.blue.fill:focus-visible {
    background-color: #162532;
}

/* ========================================
   Variante .white (outline)
   ======================================== */
.btn.btn-primary.white {
    background-color: transparent;
    border-color: #F8F5E2;
    color: #F8F5E2;
}

.btn.btn-primary.white:hover,
.btn.btn-primary.white:focus-visible {
    background-color: #F8F5E2;
    color: #202E3B;
}

/* ========================================
   BOUTON SECONDARY
   Lien souligné avec flèche, sans fond ni bordure
   ======================================== */
.btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 50px;
    padding: 5px 25px;
    color: #F8F5E2;
    background-color: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-secondary .btn-text {
    color: inherit;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.btn.btn-secondary .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-secondary .btn-icon img,
.btn.btn-secondary .btn-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Flèche générée automatiquement si aucun .btn-icon n'est présent */
.btn.btn-secondary::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 8px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.7071 7.93291' fill='none'><path d='M0 3.96646H13.7742' stroke='black'/><path d='M10.3871 0.353553L14 3.96646L10.3871 7.57936' stroke='black'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.7071 7.93291' fill='none'><path d='M0 3.96646H13.7742' stroke='black'/><path d='M10.3871 0.353553L14 3.96646L10.3871 7.57936' stroke='black'/></svg>") no-repeat center / contain;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-secondary:has(.btn-icon)::after {
    content: none;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
    gap: 23px;
}

/* Variante .white */
.btn.btn-secondary.white {
    color: #F8F5E2;
}

/* ========================================
   BOUTON BACK TO TOP
   Pilule orange verticale fixée en bas à droite
   ======================================== */
.btn.btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 42px;
    height: 57px;
    padding: 0;
    border: none;
    border-radius: 80px;
    background-color: #F05534;
    color: #F8F5E2;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                transform 0.3s ease,
                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn.btn-back-to-top::before {
    content: "";
    display: block;
    width: 8px;
    height: 13px;
    background-color: currentColor;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.36379 12.728' fill='black'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.071 7.071L1.414 12.728L0 11.314L4.95 6.364L0 1.414L1.414 0L7.071 5.657C7.25847 5.84453 7.36379 6.09884 7.36379 6.364C7.36379 6.62916 7.25847 6.88347 7.071 7.071Z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.36379 12.728' fill='black'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.071 7.071L1.414 12.728L0 11.314L4.95 6.364L0 1.414L1.414 0L7.071 5.657C7.25847 5.84453 7.36379 6.09884 7.36379 6.364C7.36379 6.62916 7.25847 6.88347 7.071 7.071Z'/></svg>") no-repeat center / contain;
    transform: rotate(-90deg);
}

.btn.btn-back-to-top:hover,
.btn.btn-back-to-top:focus-visible {
    background-color: #F64B26;
    padding-top: 8px;
}

/* État ancré au footer : moitié supérieure dépassant au-dessus du footer */
.site-footer {
    position: relative;
}

.btn.btn-back-to-top.docked {
    position: absolute;
    bottom: auto;
    right: 27px;
    top: 0;
    transform: translateY(-50%);
}

.btn.btn-back-to-top.docked.visible {
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .btn.btn-back-to-top {
        bottom: 20px;
        right: 20px;
    }

    .btn.btn-back-to-top.docked {
        right: 30px;
    }
}

/* ========================================
   BOUTON MAIL
   Pilule orange avec icône enveloppe beige
   ======================================== */
.btn.btn-mail,
li.btn-mail > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 49px;
    padding: 0;
    border: none;
    border-radius: 60px;
    background-color: #F05534;
    color: #F8F5E2;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-mail::before,
li.btn-mail > a::before {
    content: "";
    display: block;
    width: 25px;
    height: 19.444px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.0002 21.4444' fill='none'><path d='M1.00011 3.77778C1.00011 3.04107 1.29276 2.33453 1.8137 1.81359C2.33463 1.29266 3.04117 1 3.77788 1H23.2223C23.959 1 24.6656 1.29266 25.1865 1.81359C25.7074 2.33453 26.0001 3.04107 26.0001 3.77778V17.6667C26.0001 18.4034 25.7074 19.1099 25.1865 19.6309C24.6656 20.1518 23.959 20.4444 23.2223 20.4444H3.77788C3.04117 20.4444 2.33463 20.1518 1.8137 19.6309C1.29276 19.1099 1.00011 18.4034 1.00011 17.6667V3.77778Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M1.00011 3.77778L13.5001 12.1111L26.0001 3.77778' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.0002 21.4444' fill='none'><path d='M1.00011 3.77778C1.00011 3.04107 1.29276 2.33453 1.8137 1.81359C2.33463 1.29266 3.04117 1 3.77788 1H23.2223C23.959 1 24.6656 1.29266 25.1865 1.81359C25.7074 2.33453 26.0001 3.04107 26.0001 3.77778V17.6667C26.0001 18.4034 25.7074 19.1099 25.1865 19.6309C24.6656 20.1518 23.959 20.4444 23.2223 20.4444H3.77788C3.04117 20.4444 2.33463 20.1518 1.8137 19.6309C1.29276 19.1099 1.00011 18.4034 1.00011 17.6667V3.77778Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M1.00011 3.77778L13.5001 12.1111L26.0001 3.77778' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / contain;
}

.btn.btn-mail:hover,
.btn.btn-mail:focus-visible,
li.btn-mail:hover > a,
li.btn-mail > a:focus-visible {
    background-color: #F64B26;
    color: #F8F5E2;
    padding-bottom: 5px;
}

/* ========================================
   BOUTON LOCATION
   Pilule orange avec icône épingle beige
   ======================================== */
.btn.btn-location,
li.btn-location > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 49px;
    padding: 0;
    border: none;
    border-radius: 60px;
    background-color: #F05534;
    color: #F8F5E2;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-location::before,
li.btn-location > a::before {
    content: "";
    display: block;
    width: 19px;
    height: 22.167px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 22.6675' fill='black'><path d='M9.75 0.25C12.2696 0.25 14.6859 1.25089 16.4675 3.03249C18.2491 4.81408 19.25 7.23044 19.25 9.75C19.25 14.3005 14.3464 19.2753 11.5867 21.7168C10.5258 22.651 8.97417 22.651 7.91333 21.7168C5.15517 19.2753 0.25 14.3005 0.25 9.75C0.25 7.23044 1.25089 4.81408 3.03249 3.03249C4.81408 1.25089 7.23044 0.25 9.75 0.25ZM9.75 6.1875C8.80517 6.1875 7.89903 6.56283 7.23093 7.23093C6.56283 7.89903 6.1875 8.80517 6.1875 9.75C6.1875 10.6948 6.56283 11.601 7.23093 12.2691C7.89903 12.9372 8.80517 13.3125 9.75 13.3125C10.6948 13.3125 11.601 12.9372 12.2691 12.2691C12.9372 11.601 13.3125 10.6948 13.3125 9.75C13.3125 8.80517 12.9372 7.89903 12.2691 7.23093C11.601 6.56283 10.6948 6.1875 9.75 6.1875Z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 22.6675' fill='black'><path d='M9.75 0.25C12.2696 0.25 14.6859 1.25089 16.4675 3.03249C18.2491 4.81408 19.25 7.23044 19.25 9.75C19.25 14.3005 14.3464 19.2753 11.5867 21.7168C10.5258 22.651 8.97417 22.651 7.91333 21.7168C5.15517 19.2753 0.25 14.3005 0.25 9.75C0.25 7.23044 1.25089 4.81408 3.03249 3.03249C4.81408 1.25089 7.23044 0.25 9.75 0.25ZM9.75 6.1875C8.80517 6.1875 7.89903 6.56283 7.23093 7.23093C6.56283 7.89903 6.1875 8.80517 6.1875 9.75C6.1875 10.6948 6.56283 11.601 7.23093 12.2691C7.89903 12.9372 8.80517 13.3125 9.75 13.3125C10.6948 13.3125 11.601 12.9372 12.2691 12.2691C12.9372 11.601 13.3125 10.6948 13.3125 9.75C13.3125 8.80517 12.9372 7.89903 12.2691 7.23093C11.601 6.56283 10.6948 6.1875 9.75 6.1875Z'/></svg>") no-repeat center / contain;
}

.btn.btn-location:hover,
.btn.btn-location:focus-visible,
li.btn-location:hover > a,
li.btn-location > a:focus-visible {
    background-color: #F64B26;
    color: #F8F5E2;
    padding-bottom: 5px;
}

/* ========================================
   BOUTON RDV
   Pilule orange avec icône calendrier beige
   ======================================== */
.btn.btn-rdv,
li.btn-rdv > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 49px;
    padding: 0;
    border: none;
    border-radius: 60px;
    background-color: #F05534;
    color: #F8F5E2;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-rdv::before,
li.btn-rdv > a::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' fill='black'><path d='M19.55 2.3H17.25V1.15C17.25 0.845001 17.1288 0.552494 16.9132 0.336827C16.6975 0.12116 16.405 0 16.1 0C15.795 0 15.5025 0.12116 15.2868 0.336827C15.0712 0.552494 14.95 0.845001 14.95 1.15V2.3H8.05V1.15C8.05 0.845001 7.92884 0.552494 7.71317 0.336827C7.49751 0.12116 7.205 0 6.9 0C6.595 0 6.30249 0.12116 6.08683 0.336827C5.87116 0.552494 5.75 0.845001 5.75 1.15V2.3H3.45C2.535 2.3 1.65748 2.66348 1.01048 3.31048C0.363481 3.95748 0 4.835 0 5.75V19.55C0 20.465 0.363481 21.3425 1.01048 21.9895C1.65748 22.6365 2.535 23 3.45 23H19.55C20.465 23 21.3425 22.6365 21.9895 21.9895C22.6365 21.3425 23 20.465 23 19.55V5.75C23 4.835 22.6365 3.95748 21.9895 3.31048C21.3425 2.66348 20.465 2.3 19.55 2.3ZM20.7 19.55C20.7 19.855 20.5788 20.1475 20.3632 20.3632C20.1475 20.5788 19.855 20.7 19.55 20.7H3.45C3.145 20.7 2.85249 20.5788 2.63683 20.3632C2.42116 20.1475 2.3 19.855 2.3 19.55V11.5H20.7V19.55ZM20.7 9.2H2.3V5.75C2.3 5.445 2.42116 5.15249 2.63683 4.93683C2.85249 4.72116 3.145 4.6 3.45 4.6H5.75V5.75C5.75 6.055 5.87116 6.34751 6.08683 6.56317C6.30249 6.77884 6.595 6.9 6.9 6.9C7.205 6.9 7.49751 6.77884 7.71317 6.56317C7.92884 6.34751 8.05 6.055 8.05 5.75V4.6H14.95V5.75C14.95 6.055 15.0712 6.34751 15.2868 6.56317C15.5025 6.77884 15.795 6.9 16.1 6.9C16.405 6.9 16.6975 6.77884 16.9132 6.56317C17.1288 6.34751 17.25 6.055 17.25 5.75V4.6H19.55C19.855 4.6 20.1475 4.72116 20.3632 4.93683C20.5788 5.15249 20.7 5.445 20.7 5.75V9.2Z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' fill='black'><path d='M19.55 2.3H17.25V1.15C17.25 0.845001 17.1288 0.552494 16.9132 0.336827C16.6975 0.12116 16.405 0 16.1 0C15.795 0 15.5025 0.12116 15.2868 0.336827C15.0712 0.552494 14.95 0.845001 14.95 1.15V2.3H8.05V1.15C8.05 0.845001 7.92884 0.552494 7.71317 0.336827C7.49751 0.12116 7.205 0 6.9 0C6.595 0 6.30249 0.12116 6.08683 0.336827C5.87116 0.552494 5.75 0.845001 5.75 1.15V2.3H3.45C2.535 2.3 1.65748 2.66348 1.01048 3.31048C0.363481 3.95748 0 4.835 0 5.75V19.55C0 20.465 0.363481 21.3425 1.01048 21.9895C1.65748 22.6365 2.535 23 3.45 23H19.55C20.465 23 21.3425 22.6365 21.9895 21.9895C22.6365 21.3425 23 20.465 23 19.55V5.75C23 4.835 22.6365 3.95748 21.9895 3.31048C21.3425 2.66348 20.465 2.3 19.55 2.3ZM20.7 19.55C20.7 19.855 20.5788 20.1475 20.3632 20.3632C20.1475 20.5788 19.855 20.7 19.55 20.7H3.45C3.145 20.7 2.85249 20.5788 2.63683 20.3632C2.42116 20.1475 2.3 19.855 2.3 19.55V11.5H20.7V19.55ZM20.7 9.2H2.3V5.75C2.3 5.445 2.42116 5.15249 2.63683 4.93683C2.85249 4.72116 3.145 4.6 3.45 4.6H5.75V5.75C5.75 6.055 5.87116 6.34751 6.08683 6.56317C6.30249 6.77884 6.595 6.9 6.9 6.9C7.205 6.9 7.49751 6.77884 7.71317 6.56317C7.92884 6.34751 8.05 6.055 8.05 5.75V4.6H14.95V5.75C14.95 6.055 15.0712 6.34751 15.2868 6.56317C15.5025 6.77884 15.795 6.9 16.1 6.9C16.405 6.9 16.6975 6.77884 16.9132 6.56317C17.1288 6.34751 17.25 6.055 17.25 5.75V4.6H19.55C19.855 4.6 20.1475 4.72116 20.3632 4.93683C20.5788 5.15249 20.7 5.445 20.7 5.75V9.2Z'/></svg>") no-repeat center / contain;
}

.btn.btn-rdv:hover,
.btn.btn-rdv:focus-visible,
li.btn-rdv:hover > a,
li.btn-rdv > a:focus-visible {
    background-color: #F64B26;
    color: #F8F5E2;
    padding-bottom: 5px;
}

/* ========================================
   MODIFICATEUR : .btn-no-text
   Masque le label texte (et le sépareur éventuel) tout en
   conservant l'icône (générée via ::before). Utilisable en
   combinaison avec .btn-mail / .btn-rdv / .btn-location, y compris
   appliqué à un <li> de menu WordPress (la classe se propage au <a>).
   ======================================== */
.btn-no-text,
.btn-no-text > a {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0;
    gap: 0 !important;
}

.btn-no-text > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.btn-no-text > a > * {
    font-size: 0 !important;
    color: transparent !important;
}

/* On laisse l'icône (::before / .icon) visible et à sa taille normale */
.btn-no-text::before,
.btn-no-text > a::before,
.btn-no-text .icon {
    font-size: initial;
    color: #F8F5E2;
}

/* ========================================
   ICÔNES DÉCORATIVES (.icon.icon-{nom})
   À placer dans n'importe quel bouton, à gauche du texte.
   Utilisation : <span class="icon icon-play" aria-hidden="true"></span>
   ======================================== */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Espacement par défaut quand l'icône est dans un bouton */
.btn > .icon:first-child {
    margin-right: 10px;
}

/* Icône play */
.icon.icon-play {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5' fill='none'><path d='M7.17857 7.89855V11.6014C7.17874 11.9038 7.26097 12.2006 7.41649 12.4599C7.572 12.7193 7.79499 12.9316 8.06167 13.0743C8.32835 13.2169 8.62873 13.2845 8.93081 13.2699C9.23289 13.2553 9.52534 13.159 9.777 12.9913L12.5541 11.1398C12.7829 10.9871 12.9705 10.7802 13.1002 10.5376C13.2298 10.295 13.2976 10.0241 13.2975 9.74899C13.2973 9.47389 13.2293 9.20307 13.0994 8.96057C12.9695 8.71807 12.7818 8.51138 12.5529 8.35883L9.777 6.50997C9.52534 6.34224 9.23289 6.24593 8.93081 6.23131C8.62873 6.21669 8.32835 6.2843 8.06167 6.42694C7.79499 6.56958 7.572 6.78191 7.41649 7.0413C7.26097 7.30068 7.17874 7.59611 7.17857 7.89855Z' stroke='black' stroke-width='1.5' fill='none'/><path d='M13.6071 0.75H5.89286C3.05254 0.75 0.75 3.05254 0.75 5.89286V13.6071C0.75 16.4475 3.05254 18.75 5.89286 18.75H13.6071C16.4475 18.75 18.75 16.4475 18.75 13.6071V5.89286C18.75 3.05254 16.4475 0.75 13.6071 0.75Z' stroke='black' stroke-width='1.5' fill='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5' fill='none'><path d='M7.17857 7.89855V11.6014C7.17874 11.9038 7.26097 12.2006 7.41649 12.4599C7.572 12.7193 7.79499 12.9316 8.06167 13.0743C8.32835 13.2169 8.62873 13.2845 8.93081 13.2699C9.23289 13.2553 9.52534 13.159 9.777 12.9913L12.5541 11.1398C12.7829 10.9871 12.9705 10.7802 13.1002 10.5376C13.2298 10.295 13.2976 10.0241 13.2975 9.74899C13.2973 9.47389 13.2293 9.20307 13.0994 8.96057C12.9695 8.71807 12.7818 8.51138 12.5529 8.35883L9.777 6.50997C9.52534 6.34224 9.23289 6.24593 8.93081 6.23131C8.62873 6.21669 8.32835 6.2843 8.06167 6.42694C7.79499 6.56958 7.572 6.78191 7.41649 7.0413C7.26097 7.30068 7.17874 7.59611 7.17857 7.89855Z' stroke='black' stroke-width='1.5' fill='none'/><path d='M13.6071 0.75H5.89286C3.05254 0.75 0.75 3.05254 0.75 5.89286V13.6071C0.75 16.4475 3.05254 18.75 5.89286 18.75H13.6071C16.4475 18.75 18.75 16.4475 18.75 13.6071V5.89286C18.75 3.05254 16.4475 0.75 13.6071 0.75Z' stroke='black' stroke-width='1.5' fill='none'/></svg>");
}

/* Icône WhatsApp */
.icon.icon-whatsapp {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>");
}

/* ========================================
   LEAD MARINE (format WYSIWYG)
   ======================================== */
.lead-inblock {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-top: 25px;
    margin: 0!important;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700!important;
    font-size: 16px!important;
    line-height: 1!important;
}

.lead-inblock--navy {
    color: #202E3B!important;
}

.lead-inblock--navy::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-image: url('../images/icons/list/navy/icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}