html{line-height:1.15;-webkit-text-size-adjust:100%;}
body{margin:0;}
main{display:block;}
h1{font-size:2em;margin:.67em 0;}
hr{box-sizing:content-box;height:0;overflow:visible;}
pre{font-family:monospace;font-size:1em;}
a{background-color:transparent;}
abbr[title]{border-bottom:none;text-decoration:underline dotted;}
b,strong{font-weight:bolder;}
code,kbd,samp{font-family:monospace;font-size:1em;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-.25em;}
sup{top:-.5em;}
img{border-style:none;}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}
button,input{overflow:visible;}
button,select{text-transform:none;}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:none;}
fieldset{padding:.35em .75em .625em;}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
progress{vertical-align:baseline;}
textarea{overflow:auto;}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
details{display:block;}
summary{display:list-item;}
template{display:none;}
[hidden]{display:none;}
*,*::before,*::after{box-sizing:inherit;}
html{box-sizing:border-box;}
body,button,input,select,optgroup,textarea{color:#404040;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:1rem;line-height:1.5;}
h1,h2,h3,h4,h5,h6{clear:both;}
p{margin-bottom:1.5em;}
dfn,cite,em,i{font-style:italic;}
blockquote{margin:0 1.5em;}
address{margin:0 0 1.5em;}
pre{background:#eee;font-family:"Courier 10 Pitch",courier,monospace;line-height:1.6;margin-bottom:1.6em;max-width:100%;overflow:auto;padding:1.6em;}
code,kbd,tt,var{font-family:monaco,consolas,"Andale Mono","DejaVu Sans Mono",monospace;}
abbr,acronym{border-bottom:1px dotted #666;cursor:help;}
mark,ins{background:#fff9c0;text-decoration:none;}
big{font-size:125%;}
body{background:#fff;}
hr{background-color:#ccc;border:0;height:1px;margin-bottom:1.5em;}
ul,ol{margin:0 0 1.5em 3em;}
ul{list-style:disc;}
ol{list-style:decimal;}
li>ul,li>ol{margin-bottom:0;margin-left:1.5em;}
dt{font-weight:700;}
dd{margin:0 1.5em 1.5em;}
embed,iframe,object{max-width:100%;}
img{height:auto;max-width:100%;}
figure{margin:1em 0;}
table{margin:0 0 1.5em;width:100%;}
a{color:#4169e1;}
a:visited{color:inherit;}
a:hover,a:focus,a:active{color:#191970;}
a:focus{outline:none;}
a:hover,a:active{outline:0;}
button,input[type="button"],input[type="reset"],input[type="submit"]{border:1px solid;border-color:#ccc #ccc #bbb;border-radius:3px;background:#e6e6e6;color:rgba(0,0,0,.8);line-height:1;padding:.6em 1em .4em;}
button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover{border-color:#ccc #bbb #aaa;}
button:active,button:focus,input[type="button"]:active,input[type="button"]:focus,input[type="reset"]:active,input[type="reset"]:focus,input[type="submit"]:active,input[type="submit"]:focus{border-color:#aaa #bbb #bbb;}
input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],input[type="range"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="color"],textarea{color:#666;border:1px solid #ccc;border-radius:3px;padding:3px;}
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="range"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="color"]:focus,textarea:focus{color:#111;}
select{border:1px solid #ccc;}
textarea{width:100%;} :root {
--primary-fonce: #111111;
--secondary-fonce: #2d2d2d;
--text-color: #ffffff;
--blanc-gris: #ADADAD;
--error-color: #ef4444;
--border-radius: 12px;
--transition: all 0.2s ease;
--accent-color: #FFD700;
--shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.2);
--promo-height: 0px;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 1.75rem;
background-color: var(--secondary-fonce);
color: var(--text-color);
}
h1 {
position: relative;
line-height: 1.1;
}
h2, h3, h4, h5, h6 {
position: relative;
line-height: 1.2;
}
a { transition: var(--transition); }
body:not(.home) h1 {
font-size: 3rem;
text-align: center;
margin: 3rem auto 0;
}
body:not(.home) h2 {
font-size: 2rem;
text-align: center;
margin: 0.5rem auto 2rem;
}
button, input, select, optgroup, textarea {
font-family: 'Poppins', sans-serif;
}
@media screen and (max-width: 768px) {
body:not(.home) h1 {
font-size: 2rem;
margin: 2rem auto 0;
}
body:not(.home) h2 {
font-size: 1.25rem;
margin: 0.5rem auto 1rem;
}
} .site-header {
background-color: var(--primary-fonce);
position: fixed;
width: 100%;
top: 0;
z-index: 100;
transition: height 0.3s ease-in-out;
height: 120px;
display: flex;
align-items: center;
will-change: height; }
.site-header.sticky {
height: 80px;
box-shadow: var(--shadow-light);
}
.header-container {
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
width: 100%;
} svg.logo-image .ligne {
opacity: 0;
transform: translateX(-15px);
fill: #FFFFFF !important;
} svg.logo-image .note-musique {
opacity: 0;
transform: scale(0.5);
transform-origin: center;
} @keyframes apparitionNoteMusique {
0% {
opacity: 0;
transform: scale(0.5) rotate(-10deg);
}
15% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
70% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform: scale(0.8) rotate(5deg);
}
} @keyframes apparitionLigne {
0% {
opacity: 0;
transform: translateX(-15px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}  #page.parler svg.logo-image .ligne {
opacity: 0;
transform: translateX(-15px);
animation: apparitionLigneParler 0.6s ease forwards;
fill: #FFFFFF !important;
}  #page.parler svg.logo-image path.ligne:nth-of-type(1) {
animation-delay: 0.6s;
} #page.parler svg.logo-image path.ligne:nth-of-type(2) {
animation-delay: 0.4s;
} #page.parler svg.logo-image path.ligne:nth-of-type(3) {
animation-delay: 0.2s;
}
#page.parler svg.logo-image .note-musique {
opacity: 0 !important;
display: none !important;
}
@keyframes apparitionLigneParler {
0% {
opacity: 0;
transform: translateX(-15px);
}
100% {
opacity: 1;
transform: translateX(0);
}
} #page.chanter svg.logo-image .note-musique {
opacity: 0;
transform: scale(0.5) rotate(-10deg);
animation: apparitionNoteChanter 0.8s ease forwards 0.2s;
}
#page.chanter svg.logo-image .ligne {
opacity: 0 !important;
display: none !important;
}
@keyframes apparitionNoteChanter {
0% {
opacity: 0;
transform: scale(0.5) rotate(-10deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}  .logo {
grid-column: 2;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1.5rem;
}
.logo-image, .woocommerce-page .logo-image, .woocommerce .logo-image {
height: 75px;
width: auto;
transition: height 0.3s ease-in-out;
}
.sticky .logo {
padding-top: 1rem;
}
.sticky .logo-image, .woocommerce-page .sticky .logo-image, .woocommerce .sticky .logo-image {
height: 55px !important;
}
.main-navigation {
grid-column: 3;
justify-self: end;
width: 100%;
}
.main-navigation .menu-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
.main-navigation .menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-end;
box-sizing: border-box;
}
.main-navigation .menu li {
font-size: 1.5rem;
margin-left: 2.2rem;
margin-bottom: 0;
padding-left: 0;
}
.main-navigation .menu li a {
color:  var(--text-color);
text-decoration: none;
transition: color 0.3s ease;
outline: none !important;
}
.main-navigation .menu li a:hover {
color: var(--accent-color);
}
.main-navigation .menu li.mobile-only {
display: none !important;
}
@media screen and (max-width: 768px) {
.main-navigation .menu li.mobile-only {
display: block !important;
}
} .nav-cta {
display: none;
margin-left: 1.5rem;
padding: 0.6rem 1rem;
background-color: var(--accent-color);
color: var(--primary-fonce);
border-radius: 999px;
border: 1px solid var(--accent-color);
font-weight: bold;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
white-space: nowrap;
}
.nav-cta .arrow { display:inline-block; transition: transform .25s ease; }
.nav-cta:hover { background:#ffe159; transform: translateY(-1px); box-shadow: 0 8px 16px rgba(255,215,0,0.25); }
.nav-cta:hover .arrow { transform: translateX(4px); } .menu-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
display: none;
outline: none !important;
}
.burger {
position: relative;
width: 24px;
height: 20px;
transform: rotate(0deg);
transition: .5s ease-in-out;
}
.burger span, 
.burger span::before, 
.burger span::after {
position: absolute;
display: block;
width: 100%;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition: .25s ease-in-out;
}
.burger span {
top: 50%;
transform: translateY(-50%);
}
.burger span::before {
content: '';
top: -7px;
}
.burger span::after {
content: '';
bottom: -7px;
} .menu-toggle[aria-expanded="true"] .burger span {
background: transparent;
outline: none !important;
}
.menu-toggle[aria-expanded="true"] .burger span::before {
top: 0;
transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .burger span::after {
bottom: 0;
transform: rotate(-45deg);
} .main-navigation .menu li.current-menu-item a {
color:  var(--accent-color);
outline: none !important;
} .woo-icons {
display: flex;
align-items: center;
gap: 0.8rem;
line-height: 1;
}
.woo-icons a {
color: var(--text-color);
text-decoration: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 28px; }
.woo-icons svg {
width: 30px;
height: 30px;
transition: color 0.3s ease;
display: block; }
.woo-icons a:hover svg, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .out-of-stock {
color: var(--accent-color);
}
.woo-icons .account-link {
display: flex;
align-items: center;
}
.cart-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.cart-count {
position: absolute;
top: -6px;
right: -8px;
background-color: var(--accent-color);
color: var(--primary-fonce);
font-size: 11px;
padding: 2px 4px;
border-radius: 50%;
min-width: 15px;
text-align: center;
font-weight: bold;
line-height: 1;
transition: transform 0.3s ease-out;
} @media screen and (min-width: 769px) {
.mobile-menu-icons {
display: none;
}    
.woo-icons.desktop {
display: flex;
margin-left: 2rem;
}    
.menu-container {
display: flex;
align-items: center;
}
.nav-cta { display: inline-flex; }
} @media screen and (max-width: 768px) {
:root { --promo-height: 40px; }
.woo-icons.desktop {
display: none;
}    
.mobile-menu-icons {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
margin: 0;
z-index: 10;
}
.mobile-menu-icons .woo-icons svg {
width: 20px;
height: 20px;
}
.mobile-menu-icons .cart-count {
font-size: 10px;
min-width: 14px;
height: 14px;
line-height: 14px;
top: -5px;
right: -7px;
}  
.header-container {
grid-template-columns: 1fr auto 1fr;
gap: 0;
}    
.logo {
grid-column: 2;
padding-top: 1rem !important;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.logo-image {
height: 60px !important;
}
.sticky .logo-image {
height: 45px !important;
} .mobile-menu-icons {
grid-column: 1;
z-index: 2;
}
} .play-fab {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
height: 52px;
width: 52px;
padding: 0 0 0 4px;
border-radius: 999px;
background: var(--primary-fonce);
color: var(--text-color);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
z-index: 120;
border: 1px solid var(--text-color);
font-weight: bold;
transition: width .3s cubic-bezier(0.4, 0, 0.2, 1), 
border-radius .3s cubic-bezier(0.4, 0, 0.2, 1),
padding .3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow .2s ease,
background-color .2s ease;
white-space: nowrap;
overflow: visible;
text-decoration: none;
}
body.logged-in .play-fab {
background: var(--accent-color);
color: var(--primary-fonce);
border: 1px solid var(--accent-color);
animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
transform: scale(1);
}
50% {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3),
0 0 25px rgba(255, 255, 255, 0.15);
transform: scale(1.01);
}
} .play-fab::before {
content: '';
position: fixed;
bottom: -200px;
right: -50px;
width: 360px;
height: 360px;
background: var(--primary-fonce);
border: 1px solid var(--text-color);
border-radius: 50%;
z-index: -1;
transform: scale(0);
transform-origin: center;
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease;
} .play-fab:hover::before,
.play-fab:active::before,
.play-fab.mobile-active::before {
transform: scale(1);
opacity: 1;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.1s ease;
} .play-fab::before {
transition: transform 0.15s ease-out,
opacity 0.15s ease-out;
} @media (hover: hover) and (pointer: fine) {
.play-fab:hover::before {
transform: scale(1);
opacity: 1;
}
}
.play-fab svg {
color: var(--text-color);
flex-shrink: 0;
transition: transform 0.3s ease, color 0.3s ease;
animation: playIconPulse 2s ease-in-out infinite;
transform-origin: center;
}
body.logged-in .play-fab svg {
color: var(--primary-fonce);
}
@keyframes playIconPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.play-fab:hover, .play-fab:focus-visible, .play-fab.mobile-active {
width: auto;
padding: 0 1rem 0 0.875rem;
box-shadow: 0 14px 26px rgba(0,0,0,0.25);
color: var(--text-color);
}
.play-fab .play-fab-label { 
color: var(--text-color); 
margin-left: .5rem; 
font-weight: bold;
opacity: 0;
transform: translateX(-10px);
transition: opacity .1s ease, transform .1s ease;
position: absolute;
left: 100%;
white-space: nowrap;
z-index: 121;
visibility: hidden;
padding:2rem 0;
}
.play-fab:hover .play-fab-label, 
.play-fab:focus-visible .play-fab-label,
.play-fab.mobile-active .play-fab-label { 
opacity: 1;
transform: translateX(0);
position: static;
left: auto;
color: var(--text-color);
visibility: visible;
transition: opacity .25s ease .1s, transform .25s ease .1s, visibility 0s linear 0s;
} @media (hover: hover) and (pointer: fine) {
.play-fab:hover svg {
animation: playIconSpin 0.6s ease-in-out;
transform: scale(1.2) rotate(360deg);
color: var(--text-color);
}
body.logged-in .play-fab:hover svg {
color: var(--text-color);
}
} .play-fab:active svg,
.play-fab.mobile-active svg {
animation: playIconSpin 0.6s ease-in-out;
transform: scale(1.2) rotate(360deg);
color: var(--text-color);
}
body.logged-in .play-fab:active svg,
body.logged-in .play-fab.mobile-active svg {
color: var(--text-color);
}
@keyframes playIconSpin {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(180deg);
}
100% {
transform: scale(1.2) rotate(360deg);
}
}
.play-fab:hover svg,
.play-fab.mobile-active svg { 
color: var(--text-color); 
} @media screen and (max-width: 768px) {
.play-fab { 
height: 48px; 
width: 48px;
}
.play-fab:hover, .play-fab:focus-visible, .play-fab.mobile-active {
width: auto;
padding: 0 0.875rem 0 0.75rem;
}
.play-fab::before {
width: 275px;
height: 265px;
}
}
.nav-cta, 
body.woocommerce-account:not(.logged-in) .play-fab, 
body.woocommerce-cart .play-fab, 
body.woocommerce-checkout .play-fab, 
body.page-template-template-app-choix .play-fab { display: none !important; }
.cta-button, .cta-button:visited {
font-size: 1.5rem;
line-height: 1.45;
display: inline-block;
text-align: center;
background-color: var(--accent-color);
color: var(--primary-fonce);
padding: 1rem 2rem;
border-radius: var(--border-radius);
border: 1px solid var(--accent-color);
text-decoration: none !important;
font-weight: bold;
transition: background-color 0.3s ease;
}
.cta-button:hover, .cta-button:visited:hover {
background-color: var(--secondary-fonce);
color: var(--text-color);
border: 1px solid var(--text-color);
}
.cta-button.off, .cta-button.off:visited {
background-color: var(--primary-fonce);
color: var(--accent-color);
border-radius: var(--border-radius);
border: 1px solid var(--accent-color);
margin-left: 10px;
width: auto;
}
.cta-button.off:hover, .cta-button.off:visited:hover {
background-color: var(--secondary-fonce);
color: var(--text-color);
border: 1px solid  var(--text-color);
}
footer a.cta-button.off {
font-size: 1rem;
background-color: var(--secondary-fonce) !important;
color: var(--text-color) !important;
border: 1px solid var(--text-color) !important;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 0.75rem 1.25rem;
font-weight: 500 !important;
}
footer a.cta-button.off:hover {
background-color: var(--secondary-fonce) !important;
color: var(--accent-color) !important;
border: 1px solid var(--accent-color) !important;
}
.highlight {
position: relative;
display: inline-block;
margin: 0 0.5rem;
}
.highlight em {
position: relative;
display: inline-block;
background: linear-gradient(90deg, 
var(--text-color) 0%, 
var(--text-color) 33%,
var(--accent-color) 33%, 
var(--accent-color) 66%,
var(--text-color) 66%, 
var(--text-color) 100%
);
background-size: 300% 100%;
background-position: 0% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.highlight.sweep-active em {
animation: highlight-text-sweep 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.highlight::after {
content: '';
position: absolute;
left: -10px;
right: -10px;
height: 2px;
background-color: var(--text-color);
transform: skew(4deg) rotate(-2deg);
bottom: -1px;
padding: 0 20px;
}
.highlight.sweep-active::after {
animation: highlight-line-flash 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.contenu .highlight::after {
background-color: var(--blanc-gris);
} @keyframes highlight-text-sweep {
0% {
background-position: 100% 0;
}
100% {
background-position: 0% 0;
}
} @keyframes highlight-line-flash {
0%, 100% {
box-shadow: none;
}
20%, 80% {
box-shadow: 0 0 12px rgba(255, 215, 0, 0.8),
0 0 20px rgba(255, 215, 0, 0.4);
}
50% {
box-shadow: 0 0 16px rgba(255, 215, 0, 1),
0 0 28px rgba(255, 215, 0, 0.6);
}
}
@media screen and (max-width: 768px) {
.highlight::after {
height: 1px;
}
} .site-content {
margin-top: 100px;
}
.contenu {
padding: 4rem 2rem;
}
.entry-header {
padding: 2rem 2rem 0;
}
.entry-content {
padding: 3rem 2rem 2rem;
}
.entry-content.full {
padding: 0;
}
.entry-content h2 {
font-size: 3rem;
margin: 0 0 3rem;
}
.entry-content h2 em {
white-space: nowrap;
}
.video-wrapper {
position: relative;
overflow: hidden;
}
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
z-index: 0;
}
.content-overlay {
position: relative;
z-index: 1;
}
body.single-post .entry-header {
padding: 3rem 2rem 0;
}
body.single-post .entry-header h1 {
max-width: 800px;
margin: 2rem auto 0;
text-align: center;
}
.entry-content hr {
height: 0;
border: none;
border-bottom: 1px solid var(--blanc-gris);
margin-top: 3rem;
margin-bottom: 3rem;
opacity: 0.25;
} body.single-post .entry-content hr {
clear: none;
overflow: hidden;
display: flow-root;
} 
.entry-content .centrer {
text-align: center;
margin-top: 0;
}
.entry-footer {
padding: 0 2rem 2rem;
clear: both;
margin-top: 2rem;
} .entry-footer .post-navigation, .entry-header {
max-width: 1000px;
margin: 0 auto;
}
.entry-footer .nav-links {
display: flex;
justify-content: space-between;
gap: 1.5rem;
align-items: stretch;
}
.entry-footer .nav-previous,
.entry-footer .nav-next {
display: flex;
margin: 0;
flex: 0 1 auto;
}
.entry-footer .nav-previous {
justify-content: flex-start;
}
.entry-footer .nav-next {
justify-content: flex-end;
margin-left: auto;
}
.entry-footer .back-to-blog {
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: auto;
max-width: 350px;
min-width: 0;
}
.entry-footer .back-to-blog span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
}
.entry-footer .nav-previous .back-to-blog {
text-align: left;
}
.entry-footer .nav-next .back-to-blog {
text-align: right;
flex-direction: row;
}
.entry-footer .back-to-blog svg {
flex-shrink: 0;
}
footer a.karaoke-icon {
display: inline-block;
margin-top: 2rem;
opacity: 0.35;   
transition: opacity 0.2s ease;
&:hover {
opacity: 1;
}
} @media screen and (max-width: 768px) {
.entry-footer .nav-links {
flex-direction: column;
gap: 1rem;
}
.entry-footer .nav-previous,
.entry-footer .nav-next {
justify-content: flex-start;
margin-left: 0;
}
.entry-footer .back-to-blog {
max-width: 100%;
width: 100%;
}
.entry-footer .nav-next .back-to-blog {
text-align: left;
}
} @media screen and (max-width: 480px) {
.entry-footer {
padding: 0 1rem 2rem;
}
.entry-footer .back-to-blog {
font-size: 0.875rem;
padding: 0.5rem 1rem;
max-width: 100%;
width: 100%;
}
.entry-footer .back-to-blog svg {
width: 16px;
height: 16px;
}
} .bg-pale {
background-color: var(--primary-fonce);
} .promo-bar { display: none; } ul {
list-style: none;
padding-left: 0;
margin-bottom: 2em;
}
ul.negatif, ul.positif {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 30px;
align-items: start;
max-width: 750px;
margin: 0 auto 2em;
} ul li {
position: relative;
padding-left: 2.25em;
margin-bottom: 0.8em;
line-height: 1.4;
} ul.negatif li, ul.positif li {
opacity: 0;
transform: translateY(10px) scale(0.97);
filter: blur(3px);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
ul.negatif.animate-in li, ul.positif.animate-in li {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
} ul.negatif li::before {
content: "×";
position: absolute;
left: 0;
width: 1.5em;
height: 1.5em;
background-color: #ff4444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1em;
line-height: normal;
} ul.positif li::before {
content: "✓";
position: absolute;
left: 0;
width: 1.5em;
height: 1.5em;
background-color: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-fonce);
font-weight: bold;
font-size: 1em;
line-height: 1;
} ul.products .pricing-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: flex;
justify-content: center;
gap: 2rem;
}
ul.products .pricing-card {
background: var(--primary-fonce);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow-light);
display: flex;
flex-direction: column;
position: relative;
width: 33.333%;
min-width: 300px;
height: auto;
transition: transform 0.2s ease;
}
ul.products .pricing-card.featured {
border: 2px solid var(--primary-fonce);
box-shadow: var(--shadow-light);
}
ul.products .pricing-card:hover {
box-shadow: var(--shadow-hover);
}
ul.products .card-header {
text-align: center;
margin-bottom: 1.5rem;
}
ul.products .card-icon {
width: 48px;
height: 48px;
margin-bottom: 1rem;
}
ul.products .card-header h2 {
font-size: 1.5rem;
margin: 0;
}
ul.products .price {
text-align: center;
margin-bottom: 1rem;
}
ul.products .features, .product-description ul.features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
flex-grow: 1;
color:#FFFFFF;
}
ul.products .features li, .product-description ul.features li {
padding: 0.5rem 15px 0;
margin-bottom: 0.5em;
font-size: 80%;
display: flex;
}
ul.products .features li::before, .product-description ul.features li::before {
content: "✓";
color: var(--accent-color);
margin-right: 0.5rem;
font-weight: bold;
}
ul.products .cta-button {
width: 100%;
margin-top: auto;
cursor: pointer;
} @media (max-width: 1024px) {
ul.products .pricing-container {
flex-direction: column;
align-items: center;
}
ul.products .pricing-card {
width: 100%;
max-width: 400px;
}
ul.products .pricing-card.featured {
order: -1;
}
}
.center {
text-align: center;
} body.page-template-template-page-contenu .entry-content, body.page-template-template-page-contenu-c2a .entry-content, body.single-post .entry-content {
max-width: 1000px;
margin: 0 auto 2rem;
}
body.page-template-template-page-contenu .entry-content h2, body.page-template-template-page-contenu-c2a .entry-content h2, body.single-post .entry-content h2 {
font-size: 2rem;
margin: 2rem 0;
}
body.page-template-template-page-contenu .entry-content h2:first-child, body.page-template-template-page-contenu-c2a .entry-content h2:first-child, body.single-post .entry-content h2:first-child {
margin-top: 0;
}
body.page-template-template-page-contenu .entry-content ul:not(.positif), body.page-template-template-page-contenu-c2a .entry-content ul:not(.positif), body.single-post .entry-content ul:not(.positif) {
list-style: disc;
padding-left: 0;
margin: 1.5rem 0 1.5rem 2.5rem;
}
body.page-template-template-page-contenu .entry-content ul:not(.positif) li, body.page-template-template-page-contenu-c2a .entry-content ul:not(.positif) li, body.single-post .entry-content ul:not(.positif) li {
padding-left: 0.5rem;
}
body.page-template-template-page-contenu .entry-content ul.positif, body.page-template-template-page-contenu-c2a .entry-content ul.positif, body.single-post .entry-content ul.positif {
display: block;
margin: 0 0 4rem;
max-width: 100%;
}
body.page-template-template-page-contenu .entry-content ul.positif li, body.page-template-template-page-contenu-c2a .entry-content ul.positif li, body.single-post .entry-content ul.positif li {
margin-bottom: 1.5rem;
} .back-to-blog {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-color);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
margin-bottom: 1rem;
padding: 0.75rem 1.25rem;
border: 1px solid var(--blanc-gris);
border-radius: var(--border-radius);
transition: var(--transition);
background: transparent;
}
.back-to-blog svg {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.back-to-blog:hover, .back-to-blog:focus, .back-to-blog:active {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--primary-fonce);
}
.back-to-blog:hover svg {
transform: translateX(-4px);
} @media screen and (max-width: 768px) {
.back-to-blog {
font-size: 0.875rem;
padding: 0.5rem 1rem;
margin-bottom: 1.5rem;
}
.back-to-blog svg {
width: 16px;
height: 16px;
}
}  body.single-post .entry-content {
padding-top: 4rem;
}
body.single-post .entry-content .post-thumbnail {
float: right;
max-width: 500px;
width: 100%;
margin: 0 0 2rem 2rem;
border-radius: var(--border-radius);
transition: var(--transition);
}
body.single-post .entry-content .post-thumbnail img {
width: 100%;
height: auto;
border-radius: var(--border-radius);
display: block;
} @media screen and (max-width: 1024px) {
body.single-post .entry-content .post-thumbnail {
max-width: 350px;
margin: 0 0 1.5rem 1.5rem;
}
} @media screen and (max-width: 768px) {
body.single-post .entry-content .post-thumbnail {
float: none;
max-width: 100%;
margin: 0 0 2rem 0;
}
} @media screen and (max-width: 480px) {
body.single-post .entry-content .post-thumbnail {
margin: 0 0 1.5rem 0;
}
}
body.single-post .entry-content h2:first-of-type {
clear: none !important;
margin-top: 0 !important;
} .faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-container h2 {
text-align: center;
color:  var(--text-color);
margin-bottom: 30px;
}
.faq-item {
margin-bottom: 1rem;
border: 1px solid var(--blanc-gris);
border-radius: var(--border-radius);
overflow: hidden;
}
.faq-question {
padding: 1.5rem 60px 1.5rem 25px;
cursor: pointer;
font-weight: bold;
position: relative;
transition: all 0.3s ease;
color: var(--text-color);
}
.faq-question:hover, 
.faq-question.active {
background-color: #666;
} .faq-question::before,
.faq-question::after {
content: '';
position: absolute;
background-color:  var(--text-color);
transition: transform 0.3s ease;
} .faq-question::before {
width: 20px;
height: 2px;
right: 25px;
top: 50%;
transform: translateY(-50%);
} .faq-question::after {
width: 2px;
height: 20px;
right: 34px; top: 50%;
transform: translateY(-50%);
} .faq-question.active::after {
transform: translateY(-50%) rotate(90deg) scale(0);
}
.faq-answer {
visibility: hidden;
color:  var(--text-color);
height: 0;
padding: 0 25px;
transform-origin: top;
opacity: 0;
transition: transform 0.4s ease-out,
opacity 0.2s ease-out,
height 0.4s ease-out,
visibility 0s linear 0.4s,
padding 0.4s ease-out;
}
.faq-answer.active {
visibility: visible;
height: auto;
padding: 25px;
opacity: 1;
transition: transform 0.4s ease-out,
opacity 0.2s ease-out 0.2s,
visibility 0s linear 0s,
padding 0.4s ease-out;
}
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; margin-top: 4rem;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: var(--border-radius);
}
.play-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(0, 0, 0, 0.1);
z-index: 2; }
.custom-play-button {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
width: 80px;
height: 80px;
position: relative;
}
.play-overlay .custom-play-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: var(--accent-color);
border-radius: 50%;
transition: transform 0.2s ease;
}
.play-overlay .custom-play-button::after {
content: '';
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25px;
border-color: transparent transparent transparent var(--primary-fonce);
}
.play-overlay:hover .custom-play-button::before {
transform: translate(-50%, -50%) scale(1.1);
}
.video-container.video-playing .play-overlay {
display: none;
}  .gform_wrapper .gfield .gfield_label.gform-field-label,
.gform-theme--foundation .gfield .gfield_label.gform-field-label,
form.contact .gfield .gfield_label.gform-field-label {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
position: absolute !important;
left: 25px !important;
color: var(--text-color) !important;
font-size: 1.25rem !important;
font-weight: bold !important;
pointer-events: none !important;
transition: var(--transition) !important;
z-index: 2 !important;
background: transparent !important;
top: 50% !important;
transform: translateY(-50%) !important;
} .gform_wrapper.gform-theme--foundation {
--gf-field-gap-y: 1rem !important; } .gform_wrapper .gfield {
margin-bottom: 1rem !important;
padding-bottom: 0 !important;
} .gform_wrapper .gform_fields {
grid-row-gap: 1rem !important;
} .gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
margin-top: 0.5rem !important;
} .gfield:has(input:not(:placeholder-shown)) .gfield_label.gform-field-label,
.gfield:has(textarea:not(:placeholder-shown)) .gfield_label.gform-field-label {
opacity: 1 !important; } .gfield.field-has-content:has(input:not(:placeholder-shown)) .gfield_label.gform-field-label,
.gfield.field-has-content:has(textarea:not(:placeholder-shown)) .gfield_label.gform-field-label {
opacity: 0 !important;
} .gform_wrapper .gfield--type-textarea .gfield_label.gform-field-label,
form.contact .gfield--type-textarea .gfield_label.gform-field-label,
.gform-theme--foundation .gfield--type-textarea .gfield_label.gform-field-label {
top: 20px !important;
transform: none !important;
} .gform_wrapper form, .gform_wrapper .gform_validation_errors {
max-width: 800px;
margin: 0 auto;
}
.gform_wrapper {
margin: 0;
} .gform_wrapper .gfield {
position: relative !important;
margin-bottom: 0 !important;
} .ginput_container input,
.ginput_container textarea {
background-color: var(--secondary-fonce) !important;
border: 1px solid var(--blanc-gris) !important;
border-radius: var(--border-radius) !important;
color: white !important;
padding: 1.5rem 25px !important;
font-size: 1.25rem !important;
transition: var(--transition) !important;
width: 100% !important;
height:inherit !important; 
position: relative !important;
} .ginput_container_textarea textarea {
min-height: 200px !important;
height: 200px !important;
resize: vertical !important;
padding-top: 20px !important;
} .ginput_container input::placeholder,
.ginput_container textarea::placeholder {
color: transparent !important;
opacity: 0 !important;
} .ginput_container input:focus,
.ginput_container textarea:focus {
border-color: var(--accent-color) !important;
box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.1) !important;
outline: none !important;
} .gfield:has(input:focus) .gfield_label.gform-field-label,
.gfield:has(textarea:focus) .gfield_label.gform-field-label {
color: var(--accent-color) !important;
font-size: 0.85rem !important;
transform: none !important;
background-color: var(--primary-fonce) !important;
padding: 0 4px !important;
opacity: 0 !important;
transition: var(--transition) !important;
} .gform_wrapper form .gform_button {
font-size: 1.25rem !important;
line-height: 1.5 !important;
display: inline-block !important;
text-align: center !important;
background-color: var(--accent-color) !important;
color: var(--primary-fonce) !important;
padding: 1rem 2rem !important;
border-radius: var(--border-radius) !important;
border: 1px solid var(--accent-color) !important;
text-decoration: none !important;
font-weight: bold !important;
transition: var(--transition) !important;
cursor: pointer !important;
max-width: 325px !important;
}
.gform_wrapper form .gform_button:hover {
background-color: var(--secondary-fonce) !important;
color: var(--text-color) !important;
border: 1px solid var(--text-color) !important;
transform: translateY(-1px) !important;
} .gform_wrapper .validation_message {
color: var(--error-color) !important;
font-size: 1rem !important;
margin-top: 0.25rem !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
.gform_wrapper .gform_validation_errors {
font-size: 1rem !important;
border-radius: var(--border-radius) !important;
border: 1px solid var(--error-color) !important;
background: none !important;
height: auto !important;
color: var(--error-color) !important;
margin-bottom: 1rem !important;
}
.gform_wrapper .gform_validation_errors h2 {
font-size: 1rem !important;
color: var(--error-color) !important;
margin: 0 !important;
}
.gform_wrapper .gform_validation_errors .gform-icon {
padding:1rem;
}
.gform_wrapper .gform_validation_errors .gform-icon:before {
font-size: 2.25rem !important;
color: var(--error-color) !important;
} .charleft,
.ginput_counter,
.gfield_description[aria-live="polite"], 
.gfield_required {
display: none !important;
} .contact-container {
display: block;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.contact-form {
width: 100%;
text-align: center;
margin: 0 auto;
}
.contact-form .gform_wrapper form {
margin: 0 auto;
} .contact-avis {
padding: 0;
}
.contact-avis h4, .contact-form h4 {
margin-top: 0;
color: var(--text-color);
}
.contact-avis .convo-average-widget.default, body.woocommerce-dashboard .convo-average-widget.default {
margin: 25px 0 0 0 !important;
} @media screen and (max-width: 768px) {
.contact-container {
padding: 0 1rem;
}
.contact-form p.centrer {
text-align: center;
font-size: 1rem;
} .ginput_container input,
.ginput_container textarea {
padding: 1rem !important;
font-size: 1rem !important;
}
.gform_wrapper .gfield .gfield_label.gform-field-label, .gform-theme--foundation .gfield .gfield_label.gform-field-label, form.contact .gfield .gfield_label.gform-field-label, 
.gform-theme--foundation .gfield input::placeholder,
.gform-theme--foundation .gfield textarea::placeholder {
font-size: 1rem !important;
} .ginput_container_textarea textarea {
min-height: 125px !important;
height: 125px !important;
}
body {
font-size: 1.25rem;
}
.contact-avis h4, .contact-form h4 {
font-size: 1.25rem !important;
}
}
@media screen and (max-width: 640px) {
.ginput_container input,
.ginput_container textarea {
padding: 1rem !important;
}
.gform_wrapper form .gform_button {
width: 100% !important;
}
} .product-short-description {
margin-top: auto; } .error-404 .page-content {
text-align: center;
padding: 0 2rem 2rem;
}
.error-404 .entry-header img {
margin: 2rem auto;
display: block;
max-width: 160px;
}
.cta-container {
background-color: #000;
color: var(--text-color);
padding: 2rem 0;
text-align: center;
}
.cta-container .contenu {
padding-top: 0;
padding-bottom: 2rem;
}
.cta-container h3 {
font-weight: normal;
} .site-footer {
color: var(--text-color);
padding: 2rem 0 4rem;
text-align: center;
clear: both;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.site-footer a:not(.cta-button):not(.social-link), 
body:not(.woocommerce-account) .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt):not(.wc-block-components-button):not(.added_to_cart):not(.wc-forward):not(.reviews-count-link):not(.blog-post-thumbnail-link-title):not(.game-card), 
body.page-template-template-page-contenu .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt), 
body.page-template-template-page-contenu-c2a .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt), 
body.single-post .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt), 
button.wc-block-cart-item__remove-link, .lost_password a {
color: var(--text-color);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.5) !important;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: var(--transition);
}
.site-footer a:not(.cta-button):not(.social-link):hover, 
body:not(.woocommerce-account) .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt):not(.wc-block-components-button):not(.reviews-count-link):not(.blog-post-thumbnail-link-title):not(.game-card):hover, 
body.page-template-template-page-contenu .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt):hover, 
body.page-template-template-page-contenu-c2a .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt):hover, 
body.single-post .entry-content a:not(.button):not(.cta-button):not(.woocommerce-loop-product__link):not(.wc-block-checkout__login-prompt):hover, 
button.wc-block-cart-item__remove-link:hover, .lost_password a:hover {
color: var(--accent-color) !important;
text-decoration-color: var(--accent-color) !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 4px !important;
transition: var(--transition) !important;
}
.social-links {
display: flex;
gap: 1.5rem;
align-items: flex-start;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
margin: 0 auto 1rem;
}
.social-link {
position: relative;
color: var(--text-color);
transition: var(--transition);
display: flex;
align-items: center;
}
.social-link:hover {
color: var(--accent-color);
}
.social-link svg {
width: 30px;
height: 30px;
}
.social-link.tiktok {
position: relative;
display: inline-block; 
width: 24px;
height: 24px; 
}
.social-link.tiktok .tiktok-icon {
position: absolute;
top: 0;
left: 0;
transition: var(--transition);
}
.social-link.tiktok .tiktok-icon.hover {
opacity: 0;
}
.social-link.tiktok .tiktok-icon.default {
opacity: 1;
}
.social-link.tiktok:hover .tiktok-icon.default {
opacity: 0;
}
.social-link.tiktok:hover .tiktok-icon.hover {
opacity: 1;
}
.copyright {
text-align: center;
}
@media (max-width: 768px) {
.copyright {
font-size: 1.25rem !important;
}
}
@media (max-width: 480px) {
.site-footer {
padding: 3rem 0 6rem;
}
.copyright {
font-size: 1rem !important;
}
}
.copyright-line {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0;
}
.copyright-line p {
margin: 0;
font-size: 1.25rem;
}
.copyright .conf {
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0.5rem 0;
font-size: 1.25rem;
}
.copyright .links-group {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.copyright-line {
flex-direction: column;
gap: 0.25rem;
margin-bottom: 0.25rem;
}
.copyright .conf {
flex-direction: column;
align-items: center;
gap: 0.25rem;
margin: 0;
}    
.copyright .hosted {
display: block;
width: 100%;
text-align: center;
font-size: 1rem;
}
.copyright .hosted {
margin-top: 1rem;
}
.copyright-line .desktop-only, .copyright .desktop-only {
display: none;
}
} @media screen and (max-width: 768px) {
.site-header {
height: 80px;
}
.site-header.sticky {
height: 60px;
}
.logo-image, .woocommerce-page .logo-image, .woocommerce .logo-image {
height: 60px !important;
}
.sticky .logo-image, .woocommerce-page .sticky .logo-image, .woocommerce .sticky .logo-image {
height: 45px !important;
}
.main-navigation {
grid-column: auto;
}
.menu-toggle {
display: flex;
justify-self: auto;
position: relative;
z-index: 151; outline: none !important;
}
.main-navigation .menu-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(17, 17, 17, 0.98);
backdrop-filter: blur(8px);
padding: 0;
z-index: 150;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important; align-items: start;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
} .main-navigation.toggled .menu-container,
.main-navigation.active .menu-container {
opacity: 1;
visibility: visible;
transform: translateY(0);
} .main-navigation .menu {
flex-direction: column;
max-width: calc(100vw - 4rem);
margin: 5rem auto 0;
padding: 0 2rem;
align-items: center;
}
.main-navigation .menu li {
margin: 0;
width: 100%;
max-width: 400px;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-navigation .menu li a {
padding: 1rem;
display: block;
font-size: 1.75rem;
transition: var(--transition);
outline: none !important;
} .main-navigation.toggled .menu li,
.main-navigation.active .menu li {
opacity: 1;
transform: translateY(0);
outline: none !important;
} .main-navigation.toggled .menu li:nth-child(1),
.main-navigation.active .menu li:nth-child(1) { transition-delay: 0.1s; }
.main-navigation.toggled .menu li:nth-child(2),
.main-navigation.active .menu li:nth-child(2) { transition-delay: 0.2s; }
.main-navigation.toggled .menu li:nth-child(3),
.main-navigation.active .menu li:nth-child(3) { transition-delay: 0.3s; }
.main-navigation.toggled .menu li:nth-child(4),
.main-navigation.active .menu li:nth-child(4) { transition-delay: 0.4s; }
.main-navigation.toggled .menu li:nth-child(5),
.main-navigation.active .menu li:nth-child(5) { transition-delay: 0.5s; }
.site-content {
margin-top: 80px;
}
.entry-content {
padding: 2rem 2rem 2rem;
}
body:not(.home) h1 {
margin-top: 2rem;
font-size: 1.75rem;
}
.entry-content h2 {
font-size: 2.25rem;
margin: 0 0 2.25rem;
}
ul.negatif, ul.positif {
gap: 10px 20px;
max-width: 100%;
margin: 0 auto 2em;
font-size: 78%;
}
ul.positif {
gap: 10px 20px;
grid-template-columns: auto;
}
.footer-bottom {
flex-direction: column-reverse;
text-align: center;
gap: 1.5rem;
}
.social-links {
justify-content: center;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 2rem;
}
}
@media screen and (max-width: 480px) {
body:not(.home) h1 {
font-size: 1.5rem;
font-weight: 600;
}
.entry-content h2 {
font-size: 2rem;
font-weight: 600;
}
.main-navigation .menu li a {
font-size: 1.5rem;
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
font-size: 1.75rem !important;
margin-bottom: 0.5rem;
}
.single-product div.product .price, .woocommerce ul.products li.product .price {
font-size: 2rem !important;
}
.cta-button, .cta-button.off {
width: 100% !important;
}
.cta-button.off {
margin-left: 0;
margin-top: 10px;
}
.site-content {
margin-top: 60px;
}
.entry-content {
padding: 2rem 20px 2rem;
}
} .convo-loader-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(17, 17, 17, 0.90);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.convo-loader-overlay.active {
display: flex;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.convo-loader-content {
text-align: center;
transform: translateY(20px);
animation: slideUp 0.4s ease forwards 0.1s;
}
@keyframes slideUp {
to {
transform: translateY(0);
}
} .convo-spinner {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 2rem;
}
.convo-spinner-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top-color: var(--accent-color);
border-radius: 50%;
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.convo-spinner-ring:nth-child(1) {
animation-delay: -0.45s;
border-top-color: var(--accent-color);
}
.convo-spinner-ring:nth-child(2) {
animation-delay: -0.3s;
border-top-color: rgba(255, 215, 0, 0.6);
}
.convo-spinner-ring:nth-child(3) {
animation-delay: -0.15s;
border-top-color: rgba(255, 215, 0, 0.3);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .convo-loader-text {
color: var(--text-color);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
letter-spacing: 0.5px;
}
.convo-loader-subtext {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
font-weight: 400;
} .convo-loader-dots {
display: inline-block;
} @media screen and (max-width: 768px) {
.convo-spinner {
width: 60px;
height: 60px;
margin-bottom: 1.5rem;
}
.convo-loader-text {
font-size: 1.1rem;
}
.convo-loader-subtext {
font-size: 0.875rem;
}
} .convo-loader-overlay.active ~ * .woocommerce-notices-wrapper,
.convo-loader-overlay.active ~ * .blockUI,
body.woocommerce .blockUI.blockOverlay {
display: none !important;
} .woocommerce-form-login button[type="submit"]:disabled,
.woocommerce form.login button[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@media screen and (max-width: 480px) {
.woocommerce-MyAccount-content .dashboard-editions-grid a.button, .convo-review-trigger, .convo-submit-button, 
.start-game-button, .convo-average-widget.compact {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
}  .blog-list-container {
max-width: 1200px;
margin: 0 auto;
} .blog-posts-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 2rem !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 3rem 0 !important;
} .blog-post-item {
flex: 0 1 auto !important;
max-width: 400px !important;
width: 100% !important;
background: var(--secondary-fonce) !important;
border: 1px solid var(--blanc-gris) !important;
border-radius: var(--border-radius) !important;
padding: 1.5rem !important;
box-sizing: border-box !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
} .blog-posts-grid:has(.blog-post-item:nth-child(2)) .blog-post-item {
flex: 1 1 calc(50% - 1rem) !important;
max-width: calc(50% - 1rem) !important;
}
.blog-posts-grid:has(.blog-post-item:nth-child(3)) .blog-post-item {
flex: 1 1 calc(33.333% - 1.5rem) !important;
max-width: calc(33.333% - 1.5rem) !important;
} .blog-posts-grid:has(.blog-post-item:only-child) {
justify-content: center !important;
}
.blog-posts-grid .blog-post-item:only-child {
max-width: 400px !important;
} .blog-post-thumbnail-link {
display: block;
width: 100%;
margin-bottom: 1.5rem;
border-radius: var(--border-radius);
}
.blog-post-thumbnail {
width: 100% !important;
height: auto !important;
border-radius: var(--border-radius) !important;
transition: var(--transition) !important;
display: block;
}
.blog-post-item:hover .blog-post-thumbnail {
opacity: 0.85;
transform: scale(1.02);
} .blog-post-title {
font-size: 1.5rem !important;
color: var(--text-color) !important;
margin: 0 0 1.5rem 0 !important;
text-align: center !important;
line-height: 1.3 !important;
font-weight: 600 !important;
width: 100% !important;
}
.blog-post-title a {
color: var(--text-color) !important;
text-decoration: none !important;
transition: var(--transition) !important;
}
.blog-post-item:hover .blog-post-title a {
color: var(--accent-color) !important;
text-decoration: none !important;
} .blog-post-button {
width: 100% !important;
padding: 0.75rem 1.5rem !important;
font-size: 1.5rem !important;
font-weight: 600 !important;
background-color: var(--accent-color) !important;
color: var(--primary-fonce) !important;
border: 1px solid var(--accent-color) !important;
border-radius: 10px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
text-align: center !important;
text-decoration: none !important;
display: inline-block !important;
margin-top: auto !important;
}
.blog-post-button:hover {
background-color: var(--secondary-fonce) !important;
color: var(--text-color) !important;
border: 1px solid var(--text-color) !important;
} .blog-list-page .posts-navigation {
max-width: 1200px;
margin: 0 auto 2rem;
padding: 0;
}
.blog-list-page .nav-links {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.blog-list-page .nav-previous a,
.blog-list-page .nav-next a {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--accent-color);
color: var(--primary-fonce);
border: 1px solid var(--accent-color);
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.blog-list-page .nav-previous a:hover,
.blog-list-page .nav-next a:hover {
background-color: var(--secondary-fonce);
color: var(--text-color);
border-color: var(--text-color);
} @media (max-width: 1024px) { .blog-posts-grid:has(.blog-post-item:nth-child(2)) .blog-post-item {
flex: 1 1 calc(50% - 1rem) !important;
max-width: calc(50% - 1rem) !important;
}
.blog-posts-grid:has(.blog-post-item:nth-child(3)) .blog-post-item {
flex: 1 1 calc(50% - 1rem) !important;
max-width: calc(50% - 1rem) !important;
}
.blog-posts-grid {
gap: 1.5rem !important;
}
.blog-post-item {
padding: 1.5rem !important;
}
.blog-post-title {
font-size: 1.35rem !important;
}
} @media (max-width: 768px) {
.blog-list-page {
padding: 0 1rem 2rem;
}
.blog-posts-grid {
flex-direction: column !important;
align-items: center !important;
gap: 1.5rem !important;
margin-bottom: 2rem !important;
} .blog-post-item,
.blog-posts-grid:has(.blog-post-item:nth-child(2)) .blog-post-item,
.blog-posts-grid:has(.blog-post-item:nth-child(3)) .blog-post-item {
flex: 0 1 auto !important;
max-width: 400px !important;
width: 100% !important;
}
.blog-post-item {
padding: 1.5rem !important;
}
.blog-post-title {
font-size: 1.35rem !important;
}
.blog-post-button {
font-size: 1rem !important;
padding: 0.75rem 1.25rem !important;
}
} @media (max-width: 480px) {
.blog-list-page {
padding: 0 1rem 1.5rem;
}
.blog-posts-grid {
gap: 1.25rem !important;
}
.blog-post-item {
padding: 1.25rem !important;
max-width: 100% !important;
}
.blog-post-title {
font-size: 1.25rem !important;
margin-bottom: 1.25rem !important;
}
.blog-post-button {
padding: 0.65rem 1.25rem !important;
font-size: 0.95rem !important;
}
} .game-choice-page {
min-height: calc(100vh - 120px);
display: flex;
align-items: center;
justify-content: center;
}
.game-choice-page .site-content {
width: 100%;
}
.game-choice-title {
text-align: center;
font-size: 3rem;
margin: 2rem 0 5rem;
opacity: 0;
transform: translateY(-20px);
animation: fadeInDown 0.6s ease forwards 0.2s;
}
@keyframes fadeInDown {
to {
opacity: 1;
transform: translateY(0);
}
}
.game-choice-content {
padding: 2rem 4rem;
max-width: 1200px;
margin: 0 auto;
} .game-cards-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
max-width: 900px;
margin: 0 auto;
} .game-card {
position: relative;
background: var(--secondary-fonce);
border: 2px solid var(--blanc-gris);
border-radius: var(--border-radius);
padding: 2.5rem 2rem;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: var(--transition);
overflow: hidden;
opacity: 0;
transform: translateY(30px);
cursor: pointer;
} .conversation-card {
animation: fadeInUp 0.6s ease forwards 0.4s;
}
.karaoke-card {
animation: fadeInUp 0.6s ease forwards 0.6s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.game-card-glow {
display: none;
}
.game-card-inner {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
} .game-card-icon {
width: 100px;
height: 100px;
margin: 0 auto 1.5rem;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-fonce);
border-radius: 50%;
border: 2px solid var(--blanc-gris);
transition: var(--transition);
}
.game-card-icon svg {
color: var(--text-color);
transition: var(--transition);
} .game-card-title {
font-size: 2rem;
color: var(--text-color);
margin: 0 0 1rem;
font-weight: 700;
transition: var(--transition);
} .game-card-description {
font-size: 1rem;
color: var(--blanc-gris);
margin: 0 0 1.5rem;
line-height: 1.5;
transition: var(--transition);
} .game-card-arrow {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-color);
border-radius: 50%;
transition: var(--transition);
margin-top: auto;
align-self: flex-end;
}
.game-card-arrow svg {
color: var(--primary-fonce);
transition: var(--transition);
} .game-card:hover {
transform: translateY(-2px);
border-color: var(--accent-color);
box-shadow: var(--shadow-hover);
}
.game-card:hover .game-card-icon {
background: var(--accent-color);
border-color: var(--accent-color);
}
.game-card:hover .game-card-icon svg {
color: var(--primary-fonce);
}
.game-card:hover .game-card-title {
color: var(--accent-color);
}
.game-card:hover .game-card-description {
color: var(--text-color);
}
.game-card:hover .game-card-arrow svg {
transform: translateX(3px);
} .game-card:active {
transform: translateY(0);
} @media (max-width: 1024px) {
.game-choice-title {
font-size: 2.5rem;
margin: 1.5rem 0 4rem;
}
.game-cards-container {
gap: 2rem;
max-width: 800px;
}
.game-card {
padding: 2rem 1.5rem;
}
.game-card-icon {
width: 80px;
height: 80px;
}
.game-card-icon svg {
width: 60px;
height: 60px;
}
.game-card-title {
font-size: 1.75rem;
}
.game-card-description {
font-size: 0.95rem;
}
} @media (max-width: 768px) {
.game-choice-page {
min-height: calc(100vh - 80px);
}
.game-choice-title {
font-size: 2rem;
margin: 1rem 0 3rem;
}
.game-choice-content {
padding: 0 1.5rem 3rem;
}
.game-cards-container {
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 450px;
}
.game-card {
padding: 2rem 1.5rem;
}
.game-card-icon {
width: 75px;
height: 75px;
}
.game-card-icon svg {
width: 50px;
height: 50px;
}
.game-card-title {
font-size: 1.5rem;
}
.game-card-description {
font-size: 0.9rem;
margin-bottom: 1.25rem;
}
.game-card-arrow {
width: 40px;
height: 40px;
}
.game-card-arrow svg {
width: 20px;
height: 20px;
}
} @media (max-width: 480px) {
.game-choice-title {
font-size: 1.75rem;
margin: 1rem 0 2.5rem;
}
.game-choice-content {
padding: 0 1rem 2rem;
}
.game-cards-container {
gap: 1.25rem;
}
.game-card {
padding: 1.75rem 1.25rem;
}
.game-card-icon {
width: 70px;
height: 70px;
margin-bottom: 1.25rem;
}
.game-card-icon svg {
width: 45px;
height: 45px;
}
.game-card-title {
font-size: 1.35rem;
margin-bottom: 0.75rem;
}
.game-card-description {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.game-card-arrow {
width: 38px;
height: 38px;
}
.game-card-arrow svg {
width: 18px;
height: 18px;
}
}