/*
	Theme Name: Chère-amis
	Version: 1.0
	Author: Jolifisheurope
*/


.instagram #sb_instagram {
    width: 100%;
    margin: 39px auto;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#sb_instagram.sbi_col_4 #sbi_images .sbi_item:nth-child(2) {
    position: relative;
    top: -24px;
}


#sb_instagram.sbi_col_4 #sbi_images .sbi_item:nth-child(4) {
    position: relative;
    top: -24px;
}



.instagram #sb_instagram #sbi_images .sbi_item:hover{
    opacity: 0.5;
}

.newsletter__form .nf-form-content .nf-field-element input[type=submit] {
    background: var(--primary);
    position: absolute;
    border: 0;
    color: #ffffff;
    font-family: auto;
    transition: all .5s;
    border-radius: 99px;
    width: 32px;
    height: 32px;
    padding: 0;
    top: -75px;
    right: 39px;
}



.newsletter__form .nf-form-content button:hover, .newsletter__form .nf-form-content input[type=button]:hover, .newsletter__form .nf-form-content input[type=submit]:hover {
    background: var(--primary);
    color: #ffffff;
    padding-left: 20px;
    width: 59px;
    transition: all .5s;
}

.newsletter__form .checkbox-container.label-right label {
    margin: 0 0 0 30px;
    display: block;
    font-size: 13px;
    opacity: 0.7;
}


.newsletter__form .nf-form-content input:not([type=button]):focus {
    background: transparent;
    border-color: #919191;
    color: #FFF;
    outline: none;
    transition: all .5s;
}

.newsletter__form .nf-after-field{
    position: absolute;
}



.newsletter__form .nf-pass.field-wrap .nf-field-element:after {
    opacity: 0;
}


.nf-form-content .nf-error.field-wrap .nf-field-element:after {
    background: #e80000;
    color: #fff;
    font-family: FontAwesome;
    font-size: 20px;
    content: "\f12a";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    height: 48px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    transition: all .5s;
    opacity: 0;
    height: 0;
    width: 0;
}

@media (max-width:799px){
    .newsletter__form .nf-form-content .nf-field-element input[type=submit] {
    top: -85px;
    right: 39px;
}
}

.nf-form-cont {
    width: 99%;
}

.pane .nf-form-content textarea.ninja-forms-field {
    height: 99px;
}

.pane .nf-form-content input::placeholder{
    color:#FFF;

}

.pane .nf-form-content textarea::placeholder{
    color:#FFF;
background: url(./src/assets/img/fleche.svg);
}




.pane .nf-form-content select::placeholder{
    color:#FFF;

}

.pane .submit-wrap{
    width: fit-content;
}






.pane .nf-form-content .field-wrap input[type=submit] {
    transition: all .5s;
    border: transparent;
    height: 49px;
    padding-left: 0;
    font-size: 19px;
}


.pane .pane__wrapper {
    width: 99%;
}


.nf-form-content .list-select-wrap .nf-field-element:after {
    content: "\002794";
    font-family: auto;
    display: flex;
    border: 1px solid;
    color: #FFF;
    justify-content: center;
    transform: rotate(90deg);
    align-items: center;
    width: 24px;
    height: 24px;
    position: absolute;
    font-size: 13px;
    right: 0;
    top: 7px;
    border-radius: 9999px;
    z-index: 7;
    background: var(--primary);
}

.pane .nf-form-content .list-select-wrap .nf-field-element>div, .pane .nf-form-content input:not([type=button]), .pane .nf-form-content textarea {
     width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    margin-bottom: 15px;
     background: color-mix(in srgb, var(--secondary) 85%, white 15%);
    border: 0;
    border-radius: 29px;
    box-shadow: none;
    transition: all .5s;
}

.pane .nf-form-content button:hover, .pane .nf-form-content input[type=button]:hover, .pane .nf-form-content input[type=submit]:hover {
    color: #000000;
    background: #FFF;
    width: fit-content;
    padding: 0px 54px 0 30px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}



.pane .nf-form-content .label-above .nf-field-label label, .pane .nf-form-content .label-below .nf-field-label label, .pane .nf-form-content .label-hidden .nf-field-label label {
    font-weight: 300;
    margin: 0;
    padding: 0;
    color: #FFF;

}



.pane .nf-form-content .label-above .nf-field-label, .pane .nf-form-content .label-below .nf-field-label, .pane .nf-form-content .label-hidden .nf-field-label {
    margin-bottom: 10px;
}

.pane .nf-form-content .list-select-wrap .nf-field-element>div:focus, .pane .nf-form-content input:not([type=button]):focus, .pane .nf-form-content textarea:focus {
    background: transparent;
    border-color: #FFF;
    color: #FFF;
    outline: none;
    transition: all .5s;
}
.pane .nf-form-content .nf-field-element input::placeholder,
.pane .nf-form-content .nf-field-element textarea::placeholder {
    color: #ffffff99;
    opacity: 1;
}
.pane .nf-form-content .nf-field-element input::-webkit-input-placeholder,
.modal-form__form-content .nf-field-element textarea::-webkit-input-placeholder {
    color: #ffffff99;
}

.modal-form__form-content .nf-field-element input::-moz-placeholder,
.modal-form__form-content .nf-field-element textarea::-moz-placeholder {
    color: #ffffff99;
    opacity: 1;
}

.modal-form__form-content .nf-field-element input:-ms-input-placeholder,
.modal-form__form-content .nf-field-element textarea:-ms-input-placeholder {
    color: #ffffff99;
}
.pane .nf-form-content select.ninja-forms-field:focus {
    color: #FFF;
    border-bottom: 1px solid;
    background: var(--primary);
}

.pane .nf-form-content select.ninja-forms-field {
    color: #FFF;
    background: var(--primary);
    border-bottom: 1px solid;
}

.pane .nf-form-content input.ninja-forms-field {
    height: 50px;
}

.pane .nf-error-msg, .pane .ninja-forms-req-symbol {
    color: #ffffff;
}

.pane .nf-error .nf-error-msg {
    color: #ffffff;
}

.pane__wrapper p {
    margin-bottom: 1rem;
    margin-top: 1rem;
    opacity: 1;
    margin-top: 0.5rem;
}

.pane__wrapper::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.pane__wrapper::-webkit-scrollbar{
	width: 11px;
	background-color: #F5F5F5;
}

.block--primary .pane__wrapper::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--primary);
}

.block--secondary .pane__wrapper::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--secondary);
}

.newsletter__form .nf-form-content .label-above .nf-field-label {
    height: 0;
}

.newsletter__form .nf-multi-cell .nf-cell {
    padding: 0 ;
}

.newsletter__form .nf-form-content input:not([type=button]) {
    background: transparent;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    box-shadow: none;
    color: #787878;
    transition: all .5s;
    height: 70px;
    width: 100%;
    border-radius: 5px;
}

.newsletter__form .nf-form-content label {
    font-size: 0;
}

.google .google__widget .ti-widget.ti-goog .ti-widget-container {
    color: #000000;
    margin-bottom: 0;
    margin-top: 0;
}

.google .google__widget .ti-widget.ti-goog .ti-header {
    display: flex;
    text-align: left;
    background-color: #ffffff;
    border-style: solid;
    border-color: #efefef;
    border-radius: 0px;
    padding: 15px;
    transition: all 300ms ease-out;
    overflow: visible;
    flex-direction: row;
}

.google .google__widget .ti-widget.ti-goog .ti-rating {
    font-size: 19px;
    font-weight: bold;
    position: relative;
    top: 0;
    margin-right: 1px;
    line-height: 1em;
    background-color: transparent;
    padding: 1px 4px;
    margin-right: 17px;
    color: #FFF;
}
.google .google__widget .ti-widget.ti-goog .ti-stars {
    margin-top: 0;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

.google__widget .ti-widget.ti-goog .ti-text {
    line-height: 1em;
    margin-top: 3px;
    color: #000000;
    font-size: 19px;
    margin-left: 17px;
    margin-top: 1px;
    color: #FFF;
}

.google__widget .ti-widget.ti-goog a.ti-header:hover {
    background-color: transparent !important;
    border-color: #e2e2e2 !important;
}

@media only screen and (max-width: 999px){
    .pane__title {
        font-size: 47px;
    }
}

@media only screen and (max-width: 799px){
    .pane .nf-form-content .submit-wrap:after {
        top: 19px;
    }
}

/* Modale newsletter (views/commons/newsletter-modal.php) */
.newsletter-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

/* Le display:flex ci-dessus écraserait l'attribut hidden sans cette règle. */
.newsletter-modal[hidden] {
    display: none;
}

.newsletter-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}

/* Modale plein écran : le dialogue occupe toute la fenêtre, sans largeur
   maximale ni padding. */
.newsletter-modal__dialog {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Posée sur le coin de la carte : sans ça il faudrait rajouter du padding en haut
   du dialogue, ce qui décale la carte vers le bas et casse le centrage. */
.newsletter-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: #1d1d1b;
    cursor: pointer;
}

.newsletter-modal__close .icon {
    width: 18px;
    height: 18px;
}

/* Iframe Brevo en plein écran : les attributs width/height du template (540x760)
   sont neutralisés, elle remplit la modale. Le formulaire reste centré par le
   propre CSS de Brevo, et scrolling="auto" gère le défilement interne. */
.newsletter-brevo__iframe {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    border: 0;
}

/* Respiration verticale des sections Instagram, bon cadeau et avis Google.
   .voucher et .google n'avaient aucun padding vertical, .instagram héritait des
   3rem de .py-12.

   Le sélecteur porte volontairement sur l'élément (section.instagram) : .py-12
   est redéclaré dans le <style> inline de head.php, donc APRÈS style.css, et
   l'emporterait sur un simple .instagram à spécificité égale. */
section.instagram,
section.voucher,
section.google {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

@media (min-width: 768px) {
    section.instagram,
    section.voucher,
    section.google {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
}

/* Le widget Trustindex se dimensionne sur son contenu et rend le bloc avis plus
   étroit que le bon cadeau en face, alors que leurs deux wrappers font la même
   largeur. Son CSS est injecté par le plugin, hors du thème : on le force donc à
   remplir son conteneur. */
.google__widget,
.google__widget .ti-widget,
.google__widget .ti-widget-container {
    width: 100%;
    max-width: 100%;
}

/* Les deux blocs sont côte à côte dans une grille : leurs lignes s'alignent sur
   la plus haute, et le contenu du plus court reste collé en haut. On les passe en
   flex colonne pour le centrer verticalement. */
section.voucher,
section.google {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Centrage horizontal des contenus de ces deux blocs.
   Au-delà de 768px, .wrapper--left reçoit margin-right:0 et .wrapper--right
   margin-left:0 : les contenus sont plaqués vers l'intérieur de la page au lieu
   d'être centrés dans leur moitié. On rétablit les marges automatiques. */
@media (min-width: 768px) {
    .voucher .wrapper--left,
    .google .wrapper--right {
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ==========================================================================
   Footer — mise en page à trois zones + barre légale.
   Le CSS compilé (dist/main.min.css) décrit l'ancien footer à deux colonnes ;
   les règles ci-dessous le remplacent. style.css étant chargé après, elles
   l'emportent à spécificité égale.
   ========================================================================== */

.footer {
    display: block;
}

.footer__main {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer__main {
        grid-template-columns: 1fr 34%;
    }
}

/* Logo et texte forment un seul groupe, centré dans la zone sombre.
   Auparavant chacun occupait sa propre colonne de grille et s'y centrait
   séparément : l'ensemble se retrouvait décalé vers la gauche, puisque la
   position de chacun dépendait de la largeur de sa colonne, pas du groupe. */
.footer__dark {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding: 2rem;
}

/* --- Zones 1 et 2 : sombres ---
   Le padding et le centrage vertical sont désormais portés par .footer__dark ;
   ces deux blocs ne sont plus que des éléments flex à leur taille propre. */
.footer__brand,
.footer__infos {
    flex: 0 0 auto;
    padding: 0;
}

/* Sur mobile le bloc passe sous le logo. Sans largeur pleine il se dimensionne
   sur son contenu et se retrouve centré comme un pavé, le texte restant aligné
   à gauche : le rendu paraît décalé. On l'étale et on lui donne sa propre
   respiration latérale, en plus des 2rem de .footer__dark. */
@media (max-width: 767px) {
    .footer__infos {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* Le logo est au format portrait (viewBox 177x239) et, contrairement à celui de
   Stork, le SVG ne porte NI width NI height — seulement le viewBox. Avec
   height:auto il retombe donc sur la taille par défaut d'un élément remplacé au
   lieu de suivre son ratio. La hauteur doit être donnée explicitement ; la
   largeur s'en déduit par le viewBox. */
.footer__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 240px;
}

/* gap en deux valeurs : 0 entre les lignes, 1rem entre les icônes. Le gap simple
   hérité s'appliquait aussi verticalement et écartait les icônes du libellé
   depuis qu'elles sont passées à la ligne. */
/* Deux valeurs : la première sépare le libellé de la rangée d'icônes passée à la
   ligne, la seconde espace les icônes entre elles. */
.footer .footer__socials {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0;
}

/* Le font-size est posé sur le libellé seul : sur le conteneur il s'appliquerait
   aussi aux liens qui portent les icônes.
   width:100% le fait occuper toute la ligne du conteneur flex, ce qui renvoie les
   icônes à la ligne suivante tout en les gardant alignées entre elles. */
/* 1.125rem et non 1rem comme sur Stork : la fonte Typekit de Chère Amie rend
   plus petit à taille égale. On s'aligne sur le font-size du body. */
.footer .footer__socials span {
    width: 100%;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer__contact {
    margin-top: 2rem;
    font-size: 1.125rem;
    line-height: 1.6;
}

/* Seul le libellé est atténué ; la valeur en dessous reste en blanc plein. */
.footer__contact-title {
    margin-bottom: 0.25rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.footer__contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Zone 3 : panneau Diabolo Poivre, sur fond clair --- */
.footer__group {
    background-color: #ebebeb;
    color: #000;
    padding: 2rem;
    text-align: center;
}

.footer__group-label {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer .footer__diabolo-img {
    max-width: 200px;
    height: auto;
    margin: 0.5rem auto 1rem;
}

/* Colonne de texte resserrée et centrée sous le logo. Les libellés longs
   passent sur deux lignes, c'est assumé. */
.footer__group .footer__nav {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Le filet blanc de l'ancien footer sombre serait invisible sur fond clair.
   Le padding est resserré : avec des libellés sur deux lignes, 1rem de haut et
   de bas allongeait le panneau bien au-delà des colonnes sombres. */
.footer__group .footer__nav-link {
    border-color: rgba(0, 0, 0, 0.2);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    align-items: flex-start;
}

/* Deux corrections sur le chevron des libellés sur deux lignes :
   - flex-shrink:0, sinon le SVG est comprimé horizontalement par le texte long
     dans une colonne étroite, et le chevron paraît écrasé ;
   - le décalage compense align-items:flex-start pour poser l'icône sur la
     première ligne plutôt qu'à mi-hauteur du bloc. */
.footer__group .footer__nav-link .icon {
    flex: 0 0 1rem;
    margin-top: 2px;
}

/* Ce padding-bas venait de l'ancien footer ; il n'a plus rien à caler ici. */
.footer .footer__nav {
    padding-bottom: 0;
}

/* --- Barre légale --- */
.footer .footer__legals {
    margin-top: 0;
    padding: 1.25rem 2rem;
    text-align: center;
}