/*
Theme Name: Storefront Custom
Template: storefront
Text Domain: storefront-custom
Version: 1.0.13
*/
 a:focus,
 a:active {
     outline: none;
 }
 body{
     font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
     font-size: 15px;
     line-height: 18px;
 }
 /* Storefront : full width par défaut */
 .right-sidebar .content-area,
 .left-sidebar .content-area {
     width: 100%;
 }

 .right-sidebar .widget-area,
 .left-sidebar .widget-area {
     display: none;
 }

 /* Largeur du contenu */
 .site-content .col-full {
     max-width: 1200px; /* ajuste si besoin */
 }
 #colophon {
     width: 100%;
 }
 #colophon .col-full {
     max-width: 100%;
     padding: 0 !important;

 }
 .site-footer{
     padding: 0 !important;
 }
 .site-header, .site-footer{
     background-color: #15163b !important;
     color: white !important;
 }
 .site-footer h3 {
     color: #ff4755 !important;
     font-weight: 800;
     font-size: 20px;
     font-style: italic;
     text-transform: uppercase;

 }
 .site-content h1, .site-content h2, .site-content h3, .site-content h4, .site-content h5, .site-content h6 {
     color: #15163b !important;
 }
 .site-content h1{
     font-size: 32px;
     text-transform: uppercase;
     font-weight: 800;
     font-style: italic;
 }
.site-content h2 {
     font-size: 30px;
    text-transform: uppercase;
    font-weight: 800;
    font-style: italic;
 }
 .main-navigation ul.menu>li>a{
     color: white !important;
     font-size:17px;
     font-weight:500;
     line-height:14px;
     text-align:justify;
 }
 .footer-4cols {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     max-width: 100%; /* ajuste si tu veux */
     margin: 0 auto;
     padding: 0;

 }
 .div-3cols {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     max-width: 100%; /* ajuste si tu veux */
    margin-bottom: 20px;

 }

 .bgft {
     padding: 0;

 }
 .bgft h2{

     font-size: 22px;
 }
 .bgft1{
     background-color: #15163b ;
 }
 .bgft2{
     background-image: linear-gradient(90deg, #15163b 0%, #ff4755 100%);
     background-color: #2E31AD;
 }
 .bgft3{
     background-color: #ff4755;
 }
 #colophon .footer-col {
     padding: 44px ;
 }
 /* Mobile */
 @media (max-width: 768px) {
     .footer-4cols {
         grid-template-columns: 1fr;
         text-align: center;
     }
     .div-3cols {
         grid-template-columns: 1fr;

     }
 }
 .bgft {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity .6s ease, transform .6s ease;
     will-change: opacity, transform;
 }

 .bgft.is-visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Optionnel : respecter les préférences d’accessibilité */
 @media (prefers-reduced-motion: reduce) {
     .bgft {
         transition: none;
         transform: none;
         opacity: 1;
     }
 }
 /* Carte */
 .flip-card {
     perspective: 1000px;
     width: 100%;
     max-width: 320px;
     height: 220px;
 }

 /* Conteneur interne */
 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.8s ease;
     transform-style: preserve-3d;
 }

 /* Hover desktop */
 @media (hover: hover) and (pointer: fine) {
     .flip-card:hover .flip-card-inner {
         transform: rotateY(180deg);
     }
 }
 .flip-card{
     perspective: 1200px;
     width: 100%;
     max-width: 100%;
     height: 240px;
 }

 .flip-card-inner{
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     transition: transform .7s cubic-bezier(.2,.8,.2,1);
 }

 .flip-card-front,
 .flip-card-back{
     position: absolute;
     inset: 0;
     padding: 22px;
     border-radius: 5px;
     backface-visibility: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
 }

 /* Face avant */
 .flip-card-front{
     background: white;
     color: #15163b ;
     border: solid 1px #15163b38;
     box-shadow: 0 5px 20px rgba(0,0,0,.18);
 }

 /* Face arrière */
 .flip-card-back{
     background: #fff;
     color: #111;
     border: solid 1px #15163b38;
     transform: rotateY(180deg);
     box-shadow: 0 12px 30px rgba(0,0,0,.18);
 }

 /* Titre */
 .flip-card h2{
     margin: 0 0 10px 0;
     font-size: 26px;
     line-height: 1.1;
 }

 /* Texte */
 .flip-card p{
     margin: 0;
     font-size: 15px;
     line-height: 1.5;
 }

 /* Hover desktop */
 @media (hover: hover) and (pointer: fine){
     .flip-card:hover .flip-card-inner{
         transform: rotateY(180deg);
     }
 }

 /* Mobile: pas de hover -> on gère au clic via une classe */
 .flip-card.is-flipped .flip-card-inner{
     transform: rotateY(180deg);
 }
 .flip-card, .flip-card * {
     pointer-events: auto;
 }

 .flip-card-inner {
     pointer-events: none; /* évite que les faces captent le clic */
 }

 .flip-card {
     pointer-events: auto;
 }
 .contact-page {
     max-width: 1000px;
     margin: 0 auto;
     padding: 40px 16px;
 }

 .contact-hero {
     text-align: center;
     margin-bottom: 40px;
 }

 .contact-hero h1 {
     margin-bottom: 12px;
 }

 .contact-hero p {
     max-width: 600px;
     margin: 0 auto 20px;
     opacity: 0.9;
 }

 .contact-hero__badges {
     display: flex;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
 }

 .badge {
     padding: 6px 14px;
     border-radius: 999px;
     font-size: 0.85rem;
     border: 1px solid rgba(0,0,0,0.15);
 }

 .contact-simple {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 24px;
 }

 .contact-card {
     background: #fff;
     border-radius: 16px;
     padding: 24px;
     border: 1px solid rgba(0,0,0,0.1);
 }

 .contact-intro {
     margin-bottom: 24px;
     opacity: 0.9;
 }

 .contact-methods {
     display: grid;
     gap: 16px;
     margin-bottom: 20px;
 }

 .contact-method {
     display: block;
     padding: 18px;
     border-radius: 12px;
     border: 1px solid rgba(0,0,0,0.15);
     text-decoration: none;
     transition: transform .15s ease, box-shadow .15s ease;
 }

 .contact-method:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(0,0,0,0.08);
 }

 .contact-label {
     display: block;
     font-size: 0.85rem;
     opacity: 0.7;
 }

 .contact-value {
     font-size: 1.1rem;
     font-weight: 600;
 }

 .contact-note {
     font-size: 0.85rem;
     opacity: 0.7;
 }

 .contact-list {
     padding-left: 18px;
 }

 .contact-list li {
     margin: 8px 0;
 }

 @media (max-width: 800px) {
     .contact-simple {
         grid-template-columns: 1fr;
     }
 }