/* ============================================================
DealFabric DS — Composant · Boutons
------------------------------------------------------------
MODE ALB : deux markups possibles, tous deux couverts.
1. Élément « Button » d Enfold → ,
enveloppé dans .avia-button-wrap. Classe personnalisée à
poser sur l élément : df-btn, df-btn-gold, df-btn-ghost.
2. Lien écrit dans un Text Block → .
Trois niveaux, pas plus :
df-btn action principale, fond ink
df-btn-gold LE CTA de l écran. Un seul par page vue.
df-btn-ghost action secondaire, contour
Le hover d Enfold éclaircit la couleur. Ici c est l inverse :
l or fonce et le texte passe en crème. C est le piège n°2 du
mémo de charte.
============================================================ */
/* Le wrap d Enfold ne doit rien imposer */
#top .df .avia-button-wrap{
margin:0;
display:inline-block;
}
/* Enfold pose la classe personnalisee sur le WRAP, pas sur le
lien. Sans ce garde-fou, la regle generique .df-btn habillait
le wrap en bouton pendant que le gardait celui du theme :
une boite blanche contenant une boite bleutee.
Le wrap redevient neutre, le lien interieur porte le bouton. */
#top .df .avia-button-wrap.df-btn,
#top .df .avia-button-wrap.df-btn-gold,
#top .df .avia-button-wrap.df-btn-ghost,
#top .df-night .avia-button-wrap.df-btn,
#top .df-panel .avia-button-wrap.df-btn,
/* Le survol aussi : sans ces cinq lignes, la regle generique
.df-btn:hover repeint le wrapper et dessine une boite coloree
autour du bouton. La specificite y est superieure d une classe,
le :hover comptant pour une. */
#top .df .avia-button-wrap.df-btn:hover,
#top .df .avia-button-wrap.df-btn-gold:hover,
#top .df .avia-button-wrap.df-btn-ghost:hover,
#top .df-night .avia-button-wrap.df-btn:hover,
#top .df-panel .avia-button-wrap.df-btn:hover{
display:inline-block;
background:none;
border:0;
padding:0;
border-radius:0;
box-shadow:none;
color:inherit;
font-size:inherit;
transition:none;
}
/* Le libelle qu Enfold enveloppe dans un span porte ses propres
styles de titre d iconbox : on le remet a plat. */
#top .df .avia-button .avia_iconbox_title{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
letter-spacing:normal;
text-transform:none;
color:inherit;
margin:0;
}
#top .df .df-btn,
#top #wrap_all .df a.avia-button.df-btn,
#top #wrap_all .df .avia-button-wrap.df-btn .avia-button{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--df-ink);
color:var(--df-n-text);
padding:12px 22px;
border-radius:var(--df-r-btn);
border:1px solid transparent;
font-family:var(--df-font-ui);
font-size:14px;
font-weight:500;
line-height:1.2;
text-shadow:none;
box-shadow:none;
transition:background var(--df-t-fast), color var(--df-t-fast), border-color var(--df-t-fast);
}
#top .df .df-btn:hover,
#top #wrap_all .df a.avia-button.df-btn:hover,
#top #wrap_all .df .avia-button-wrap.df-btn .avia-button:hover{
background:var(--df-night);
color:var(--df-n-text);
}
/* --- CTA or. Le texte reste ink, jamais blanc. --- */
/* Sur fond clair : bleu nuit, texte blanc. L or sur blanc ne tenait
pas le contraste — c est le piege n 1 du memo de charte. */
#top .df .df-btn-gold,
#top #wrap_all .df a.avia-button.df-btn-gold,
#top #wrap_all .df .avia-button-wrap.df-btn-gold .avia-button{
background:var(--df-ink-fixed);
border-color:var(--df-ink-fixed);
color:#FFFFFF;
}
#top .df .df-btn-gold:hover,
#top #wrap_all .df a.avia-button.df-btn-gold:hover,
#top #wrap_all .df .avia-button-wrap.df-btn-gold .avia-button:hover{
background:var(--df-night);
border-color:var(--df-night);
color:#FFFFFF;
}
/* --- Contour --- */
#top .df .df-btn-ghost,
#top #wrap_all .df a.avia-button.df-btn-ghost,
#top #wrap_all .df .avia-button-wrap.df-btn-ghost .avia-button{
background:var(--df-paper);
border-color:var(--df-line);
color:var(--df-ink);
}
#top .df .df-btn-ghost:hover,
#top #wrap_all .df a.avia-button.df-btn-ghost:hover,
#top #wrap_all .df .avia-button-wrap.df-btn-ghost .avia-button:hover{
background:var(--df-paper);
border-color:var(--df-ink);
color:var(--df-ink);
}
/* --- Sur fond sombre : section, panneau ou carte ---
Blanc pur, et texte en ink plutot qu en nuit : un aplat de
bouton n est pas du texte long, la regle « jamais de blanc pur
sur fond sombre » de la charte vise les paragraphes. Au survol
on descend vers l alt, ce qui donne un retour visible sans
changer la teinte. */
#top .df-night .df-btn,
#top .df-gradient .df-btn,
#top .df-panel .df-btn,
#top .df .df-card-night .df-btn,
#top #wrap_all .df-night .avia-button-wrap.df-btn .avia-button,
#top #wrap_all .df-panel .avia-button-wrap.df-btn .avia-button{
background:#FFFFFF;
color:var(--df-ink-fixed);
}
#top .df-night .df-btn:hover,
#top .df-gradient .df-btn:hover,
#top .df-panel .df-btn:hover,
#top .df .df-card-night .df-btn:hover,
#top #wrap_all .df-night .avia-button-wrap.df-btn .avia-button:hover,
#top #wrap_all .df-panel .avia-button-wrap.df-btn .avia-button:hover{
background:#EDF4F9;
color:var(--df-ink-fixed);
}
/* Sur fond sombre : l or reprend sa place, texte blanc. */
#top .df-night .df-btn-gold,
#top .df-panel .df-btn-gold,
#top .df-cta .df-btn-gold,
#top .df-band .df-btn-gold,
#top .df-gradient .df-btn-gold,
#top .df .df-card-night .df-btn-gold,
#top .df .df-pane-night .df-btn-gold,
#top #wrap_all .df-night .avia-button-wrap.df-btn-gold .avia-button,
#top #wrap_all .df-cta .avia-button-wrap.df-btn-gold .avia-button,
#top #wrap_all .df-band .avia-button-wrap.df-btn-gold .avia-button,
#top #wrap_all .df-panel .avia-button-wrap.df-btn-gold .avia-button{
background:var(--df-gold);
border-color:var(--df-gold);
color:#FFFFFF;
}
#top .df-night .df-btn-gold:hover,
#top .df-panel .df-btn-gold:hover,
#top .df-cta .df-btn-gold:hover,
#top .df-band .df-btn-gold:hover,
#top .df .df-card-night .df-btn-gold:hover,
#top .df .df-pane-night .df-btn-gold:hover{
background:var(--df-gold-hover);
border-color:var(--df-gold-hover);
color:#FFFFFF;
}
#top .df-night .df-btn-ghost,
#top .df-gradient .df-btn-ghost,
#top .df-panel .df-btn-ghost,
#top .df .df-card-night .df-btn-ghost{
background:transparent;
border-color:var(--df-n-line);
color:var(--df-n-text);
}
#top .df-night .df-btn-ghost:hover,
#top .df-gradient .df-btn-ghost:hover,
#top .df-panel .df-btn-ghost:hover,
#top .df .df-card-night .df-btn-ghost:hover{
background:var(--df-n-card);
border-color:var(--df-n-text-2);
color:var(--df-n-text);
}
/* ------------------------------------------------------------
df-btn-arrow — fleche qui glisse au survol
------------------------------------------------------------
En masque et non en image : la fleche prend currentColor, donc
la couleur du bouton quel que soit son contexte — ink sur fond
clair, marine sur le bouton blanc d une section sombre.
Ne tape pas de fleche dans le libelle, elle serait en double.
------------------------------------------------------------ */
#top .df .df-btn-arrow::after,
#top #wrap_all .df .avia-button-wrap.df-btn-arrow .avia-button::after{
content:"";
flex:0 0 auto;
width:15px;
height:15px;
margin-left:2px;
background-color:currentColor;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M9 4.5 12.5 8 9 11.5'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M9 4.5 12.5 8 9 11.5'/%3E%3C/svg%3E");
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
transition:transform var(--df-t) var(--df-ease);
}
#top .df .df-btn-arrow:hover::after,
#top #wrap_all .df .avia-button-wrap.df-btn-arrow .avia-button:hover::after{
transform:translateX(4px);
}
/* Le libelle du bouton Enfold est dans un span : sans display:flex
sur le lien, le ::after se placerait apres le span sans s aligner
sur sa ligne de base. */
#top #wrap_all .df .avia-button-wrap.df-btn-arrow .avia-button{
display:inline-flex;
align-items:center;
gap:8px;
}
@media (prefers-reduced-motion:reduce){
#top .df .df-btn-arrow::after,
#top #wrap_all .df .avia-button-wrap.df-btn-arrow .avia-button::after{
transition:none;
}
#top .df .df-btn-arrow:hover::after,
#top #wrap_all .df .avia-button-wrap.df-btn-arrow .avia-button:hover::after{
transform:none;
}
}
/* --- Tailles --- */
#top .df .df-btn-sm{ padding:9px 16px; font-size:13px; }
#top .df .df-btn-lg{ padding:15px 28px; font-size:15px; }
/* ============================================================
Liens
============================================================ */
/* Lien souligné d un filet or — accent de fin de bloc.
À poser sur le lien dans un Text Block. */
#top .df .df-link-gold{
display:inline-block;
font-family:var(--df-font-ui);
font-size:14px;
font-weight:500;
color:var(--df-ink);
border-bottom:1px solid var(--df-gold);
padding-bottom:2px;
}
#top .df .df-link-gold:hover{
color:var(--df-ink);
border-bottom-color:var(--df-gold-hover);
}
/* Lien « flèche » de carte. La flèche est ajoutée en CSS :
ne la tape pas dans le texte, elle serait en double. */
#top .df .df-link-go{
display:inline-block;
margin-top:18px;
font-size:var(--df-small);
color:var(--df-link);
}
#top .df .df-link-go::after{ content:" \2192"; }
/* ============================================================
Tags et badges
============================================================ */
#top .df .df-tag{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 11px;
border:1px solid var(--df-line);
border-radius:var(--df-r-sm);
font-size:var(--df-xs);
color:var(--df-ink-2);
background:var(--df-paper);
}
#top .df .df-tag-gold{
background:var(--df-gold-bg);
border-color:var(--df-gold-soft);
color:var(--df-gold-ink);
}
#top .df .df-badge{
display:inline-block;
padding:4px 10px;
border-radius:var(--df-r-sm);
font-size:var(--df-xs);
line-height:1.4;
}
#top .df .df-badge-ok{ background:var(--df-ok-bg); color:var(--df-ok-text); }
#top .df .df-badge-warn{ background:var(--df-warn-bg); color:var(--df-warn-text); }
#top .df .df-badge-err{ background:var(--df-err-bg); color:var(--df-err-text); }
#top .df .df-badge-info{ background:var(--df-info-bg); color:var(--df-info-text); }
#top .df .df-badge-gold{ background:var(--df-gold-bg); color:var(--df-gold-ink); }