/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);*/



@font-face {
font-family: 'Cookie';
 font-style: normal;
 font-weight: normal;
 src: url('../font/Cookie-Regular.ttf');
 font-display: swap;
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

a:link {
    color: #3C3C3C;
}

/* visited link */
a:visited {
    color: #3C3C3C;
}

/* mouse over link */
a:hover {
    color: #3C3C3C;
}

/* selected link */
a:active {
    color: #3C3C3C;
}

.color-primary {
    color: #6bccd0
}

html {
    font-size: 62.5%
}

body {
    color: #3C3C3C;
	font-family: 'Open sans', sans-serif;
	/*font-display: optional;*/
    font-size: 1.2rem;
   /* background:#6bccd0;*/
    margin:0;
}

.wrap {
    margin: 0 auto;
    position: relative;
    width: 343px;
}

.logo {
    height: 54px;
    margin: 0 auto;
    background-color: #6bccd0;;

    position: fixed;
    z-index: 100;
    width: 100%;
  	box-shadow: rgb(117, 117, 117) 0px 0px 5px;
    top : 38px
}
.logo-top {
  height: 54px;
  margin: 0 auto;
  background-color: #6bccd0;;

  position: fixed;
  z-index: 100;
  width: 100%;
  box-shadow: rgb(117, 117, 117) 0px 0px 5px;
  top : 0px
}



.menu {
	float:left;
	font-size:20px;
	padding-top:4px;
	color:white;
  
}
.menuTitre {
	float:left;
	padding-left:70px;
	cursor:pointer;
	text-decoration: none;

}
.menuTitrePremier {
	float:left;
	padding-left:70px;
	cursor:pointer;
	text-decoration: none;

}

.boutonConnexion-top {
    position: fixed;
    top:14px;
    right:10px;
    background-color:#d0069b;
    border-radius:3px;
    padding-top:3px;
    padding-bottom:3px;
    padding-right:5px;
    padding-left:5px;
    width:155px;
    font-size:16px;
    text-align:center; 
    list-style: none;
}
.boutonConnexion {
  position: fixed;
  top:52px;
  right:10px;
  background-color:#d0069b;
  border-radius:3px;
  padding-top:3px;
  padding-bottom:3px;
  padding-right:5px;
  padding-left:5px;
  width:155px;
  font-size:16px;
  text-align:center; 
}

/* Accroches haut de page produit — le bandeau garde un background pleine largeur
   (effet "barre d'annonce") mais le contenu textuel est limité à 920 px et centré
   via un padding latéral calculé. Sans cette contrainte, en plein écran le texte
   s'étalait sur 140+ caractères, illisible. La formule max(20px, calc(...)) garde
   un padding minimum de 20 px en mobile, et bascule sur le centrage 920 dès que
   la viewport le permet. */
.accrocheZone {
    background-color:#fefef6;
    /* Padding vertical légèrement plus généreux pour aérer entre le hero
       et la section produits qui suit (haut de page jugé trop chargé). */
    padding: 28px max(20px, calc((100% - 920px) / 2)) 32px;
    text-align:center;
    font-size:18px;
    margin:0 auto;
    color:#333;
    font-weight: 300;

}
.accrocheZone2 {
    padding: 20px max(20px, calc((100% - 920px) / 2));
    text-align:center;
    font-size:18px;
    margin:0 auto;
    color:#333;
    font-weight: 300;

}

/* Badge discret sous l'accroche d'une home — mention de confiance localisée.
   Pill blanche translucide, typographie fine, icône (emoji ou image logo).
   Inséré dans .accrocheZone (déjà au-dessus de la flottaison) → visible sans
   scroll, sans décaler le layout. Usages actuels :
     - fr : "🇫🇷 Imprimé et expédié depuis la France"
     - de : logo GoGreen + "Wir versenden klimafreundlich mit der Deutschen Post"
   Classe générique pour pouvoir étendre à d'autres langues si besoin. */
.accroche-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(13, 143, 147, 0.25);
    border-radius: 999px;
    letter-spacing: 0.3px;
    line-height: 1.4;
    /* Anti-wrap : le texte court tient sur une ligne en plein écran ; on
       laisse wrap possible en mobile pour ne pas overflow. */
    white-space: nowrap;
}
.accroche-badge__icon {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
/* Si l'icône est une image (ex : logo GoGreen), on contraint la hauteur pour
   rester proportionnel au texte 13px. width auto pour préserver le ratio. */
.accroche-badge__icon img {
    height: 18px;
    width: auto;
    display: block;
}
@media (max-width: 480px) {
    .accroche-badge {
        font-size: 12px;
        padding: 4px 12px;
        white-space: normal;
    }
    .accroche-badge__icon img {
        height: 16px;
    }
}

.ratings-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px;
  max-width: 760px;
  margin: 0 auto;
}

.ratings-column,
.trustpilot-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 260px;
  min-height: 124px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 8px;
}

.ratings-score {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 6px;
}

.ratings-count {
  font-size: 14px;
  color: #666;
  margin-top: 3px;
}

.ratings-source {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
  font-style: italic;
}

.trustpilot-section .trustpilot-widget {
  width: 100%;
}

@media (max-width: 768px) {
  .ratings-container {
    gap: 14px;
    padding: 12px;
  }

  .ratings-column,
  .trustpilot-section {
    width: 100%;
    max-width: 320px;
    min-height: 124px;
  }
}

.welcomeZone {
	height: 515px;
}

.header {
    background-size: cover;
    border-bottom: 2px solid #6bccd0;

    font-size: 3rem;
    font-weight: 300;
    height: 510px;
    margin: 0 auto;
    text-align: center;
}


.header .inner {
    background: rgba(255, 255, 255, .93);
    float: left;
    margin-top: 110px;
    padding: 20px 10px;
    border-radius: 7px;
    position:relative
}

.header .inner p:first-child {
    line-height: 1.3em;
}

.headerSample {
   display: none;
   }

.titre {
font-size:19px;
text-align:center;
font-weight: 400;
}

.titre2 {
 font-weight: 600;
 font-size: 21px;
 text-align:center;
}

.titreN1 {
text-align:center;
font-size:35px;
font-weight:300
}
.titreH2 {
text-align:center;
font-size:25px;
font-weight:300
}
.zone1 {
padding-top: 55px;
clear: both;
width:100%;
background-color: white;
color:#484848;
text-align:center;
border-bottom: 2px solid #6bccd0;

}
.zone2 {
clear: both;
width:100%;
color:white;
background-color: #6bccd0;
text-align:center;
border-bottom: 2px solid #6bccd0;

}
.vignetteRonde {
	width:200px;
	height:200px;
	float:left;
	margin-top:20px;
	margin-right:60px;
	border-radius: 110px; 
	box-shadow: 0px 0px 16px 0px black; 
}
.vignetteRondeRight {
	width:200px;
	height:200px;
	float:right;
	margin-top:20px;
	margin-left:60px;
	border-radius: 110px; 
	box-shadow: 0px 0px 16px 0px black; 
}
.vignetteCarre {
	width:200px;
	height:200px;
	float:left;
	margin-top:20px;
	margin-right:60px;
	box-shadow: 0px 0px 16px 0px black; 
}

.vignetteCarreRight {
	width:200px;
	height:200px;
	float:right;
	margin-top:20px;
	margin-left:60px;
	box-shadow: 0px 0px 16px 0px black; 
}
.vignetteRect {
	width:265px;
	height:200px;
	float:left;
	margin-top:20px;
	margin-right:15px;
	box-shadow: 0px 0px 16px 0px black; 
}
.paragraphe {
    clear:both;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 20px;
    font-size: 15px;
    text-align:justify;

}
.categorieContainer {
    width:111px;
    height:80px;
    float:left;
    margin: 5px;
}
.categorie {
    width:100px;
    height:76px;
    background-repeat: no-repeat, repeat;
    background-position: center center;
    padding-left: 6px;
    font-size: 12px;
    text-align: left;
    background-size: cover;
    line-height: 120px;
    color:white;
    padding-left:10px;
    margin:0 auto;
}
.categorieContainerLink {
    width:120px;
    height:150px;
    float:left;
    margin: 25px;
}
.zone {   
width:100%;
max-width: 800px;
margin:0 auto;
padding-bottom: 50px;
font-size: 15px;

}
.vignette {
	width:200px;
	padding-right:10px;
	padding-left:10px;
}
.vignette400 {
	width:400px;
	padding-right:10px;
	padding-left:10px;
	margin:0 auto;
	text-align:left;
}
.vignette300 {
	width:320px;
	padding-right:10px;
	padding-left:10px;
	margin:0 auto;
	text-align:left;
}
.vignette500 {
	width:500px;
	padding-right:10px;
	padding-left:10px;
}
.vignette800 {
	width:800px;
	padding-right:10px;
	padding-left:10px;
	margin:0 auto;
}

.cout1 {
padding-top:55px
}

.cout2 {
padding-top:0px
}


.header .inner .download {
    padding-top: 19px
}

.header .inner .download a {
    text-decoration: none
}


.footer {
font-size:15px;
}
#logo-footer {
	height:40px;
}
.socialnetwork-logo {
	padding-left:15px;
}
.footer p {
    margin: 40px auto;
    line-height: 1.5em;
    width: 750px
}

.promo {
	position: absolute;
	margin-top:-95px;
	margin-left: 30px;
}
.faqContent {
	padding-top: 80px;
}


.mosaique {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.image {
    width: 48%; /* Utilisez une valeur appropriée pour l'espace entre les images */
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

.image img {
    width: 100%;
    height: auto;
    display: block;
}

.legende {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    height: 120px; /* Hauteur fixe pour la zone de légende */
   
}

.instagram-button {
    display: inline-block;
    background-color: #405DE6; /* Couleur d'Instagram */
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.instagram-button:hover {
     background-color: #5851DB; /* Couleur d'Instagram au survol */
}

.gallery {
	display: block;
	width:600px;
	border: 1px solid rgb(192, 192, 192);
}

.grille-categories {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 0px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }

  .tuile-categorie-new {
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
  }

  .tuile-categorie-new:hover {
    transform: scale(1.03);
  }

  .tuile-categorie-new img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }

  .tuile-categorie-new:hover img {
    transform: scale(1.05);
  }

  .tuile-categorie-new h3 {
    font-size: 20px;
    color: #333;
    padding: 15px 10px;
    margin: 0;
  }



 

  .badge-tuile {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #17a2b8;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  .tuile-categorie-new:hover .badge-tuile {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    position: absolute;
}


.bloc-tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tuile-categorie-pastel {
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: 	#f0f0f0;
  text-align: center;
  transition: transform 0.3s ease;
  position: relative;
  cursor: pointer;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  height: 100%;
  
  
}

.tuile-categorie-pastel:hover {
  transform: scale(1.03);
}

.image-conteneur-grand {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.image-conteneur-grand img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;

 /* Ombre simulant projection aux deux coins */
  box-shadow:
    -20px 20px 25px -20px rgba(0, 0, 0, 0.25),
     20px 20px 25px -20px rgba(0, 0, 0, 0.25);
}

@supports selector(:has(*)) {
  .image-conteneur-grand:has(img[src*="/templates/duo_"]) {
    aspect-ratio: 1 / 1;
  }
}



.tuile-categorie-pastel:hover img {
  transform: scale(1.05) rotateX(2deg);
  box-shadow:
    -25px 25px 30px -20px rgba(0, 0, 0, 0.3),
     25px 25px 30px -20px rgba(0, 0, 0, 0.3);
}

.titre-bas {
  margin-top: 8px;
  text-align: center;
  min-height: 2.8em;
}

.titre-bas h3 {
  font-size: 13px;
  font-weight: 400;
  color: #777;
  margin: 0;
  line-height: 1.4;
}

/* Responsive (optionnel, mais améliore lisibilité mobile) */
@media (max-width: 600px) {
  .titre-bas h3 {
    font-size: 12px;
  }
}
.hover-text {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  color: #d0069b;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.tuile-categorie-pastel:hover .hover-text {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

  
  
  .promo-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffeef2;
    color: #b10063;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 10px 40px 10px 10px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .promo-close {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #b10063;
    cursor: pointer;
    line-height: 1;
  }
  @media (max-width: 480px) {
    .promo-banner {
      height: 38px; /* même hauteur qu’avant si souhaité */
      padding: 0 40px 0 10px;
      display: flex;
      align-items: center;
    }
  
    #promo-message {
      font-size: 12px;
      line-height: 1.2;
    }
    .promo-close {
      font-size: 16px;
      top: 6px;
    }
  }


  .text-image-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    max-width: 800px;
    margin-bottom: 30px;
  }
  
  .text-image-row .text {
    flex: 1;
    min-width: 250px;
  }
  
  .text-image-row .image {
    flex: 0 0 250px;
    max-width: 250px;
  }
  
  .text-image-row .image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  
  
  @keyframes fadeIn {
    from { opacity: 0; top: -20px; }
    to { opacity: 1; top: 0; }
  }





  @media screen and (min-width:1800px) {
	
	 .header {
        height: 665px;
        font-size: 2rem;
        position: inherit;
        padding-top: 100px;
  
    }
    
    .welcomeZone {
	    height: 665px;
    }

	
}
@media screen and (min-width:768px) and (max-width:1024px) {
	

.faqContent {
	padding-top:10px;
}
.menu {
	clear:both;
	float:left;
	font-size:18px;
	padding-top:1px;
	color:white;
}
.menuTitre {
	
	padding-left:72px;
text-decoration: none;
	
}

.menuTitrePremier {
	
	padding-left:20px;
text-decoration: none;
	
}
.zone1 .zone2 {
	
	position: inherit;
}
.zone {   
width:100%
}

.cout1 {
padding-top:55px
}
.cout2 {
padding-top:0px
}
	.vignette {
		width:200px
	}
.vignette400 {
	width:400px;
	padding-right:10px;
	padding-left:10px;
	margin:0 auto;
}
.vignette500 {
	width:500px;
	padding-right:10px;
	padding-left:10px;
}
.vignette800 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}


    
    .welcomeZone {
	   height: 560px;
    }

    .header {
        height: 560px;
        font-size: 2rem;
        position: inherit;
        padding-top: 100px;
  
    }

    .header .inner {
   margin-top: 7px;
    }

    /*.header .inner h1 {
        height: 55px;
    }*/

  
.footer {
font-size:9px;
}
#logo-footer {
	height:30px;
}
.socialnetwork-logo {
	padding-left:5px;
}

}


@media screen and (min-width:626px) and (max-width:768px) {
	

.faqContent {
	padding-top:10px;
}
.menu {
	clear:both;
	float:left;
	font-size:15px;
	padding-top:1px;
	color:white;
	padding-left:10px;
}
.menuTitre {
	
	padding-left:20px;
text-decoration: none;
	
}
.menuTitrePremier {
	
	padding-left:0px;
text-decoration: none;
	
}
.zone1 .zone2 {
	
	position: inherit;
}
.zone {   
width:100%
}
.promo {
	
}

.cout1 {
padding-top:0px
}
.cout2 {
padding-top:0px
}
.header .inner .download {
    padding-top: 9px
}

	.vignette {
		width:184px
	}
	.vignette400 {
	width:360px;
	padding-right:10px;
	padding-left:10px;
	margin:0 auto;
}
.vignette500 {
	width:500px;
	padding-right:10px;
	padding-left:10px;
}

.vignette800 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}

.promo {
	position: inherit;
	margin:5px auto;
}

    .wrap {
        width: auto
    }

    .header {
        height: 725px;
        font-size: 2rem;
         position: inherit;
         padding-top: 111px;
    }
    
    .welcomeZone {
	   height: 725px;
    }

    .header .inner {
margin-top: -7px;
left: 18%
    }

    .header .inner h1 {
        max-height: 100px
    }

      .headerSample {
     display: inherit;
  margin:0 auto;
  width:365px;
  float:inherit;
   }
  .footer {
font-size:9px;
}

   #logo-footer {
	height:30px;
}
.socialnetwork-logo {
	padding-left:5px;
}
}

@media screen and (min-width:400px) and (max-width:625px) {

.legende {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    height: 150px; /* Hauteur fixe pour la zone de légende */ 
}

.faqContent {
	padding-top:10px;
}
.menu {
	clear:both;
	float:left;
	font-size:15px;
	padding-top:1px;
	color:white;
	padding-left:10px;
}


.titre {
    padding: 0px;
}
.titre2 {
    padding: 0px;
}
.vignetteRonde {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteRondeRight {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteCarre {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteCarreRight {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteRect {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}

.menuTitre {
	
	
	padding-left:20px;
	font-size:12px;
	text-decoration: none;
	
	
}
.menuTitrePremier {
	
	
	padding-left:0px;
	font-size:12px;
	text-decoration: none;
	
	
}
.zone1 .zone2 {
	
	position: inherit;
}
.zone {   
width:300px;
}
.cout1 {
padding-top:0px
}
.cout2 {
padding-top:30px
}
.vignette {
	width:100%;
}
.vignette400 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
	margin:0 auto;
}
.vignette500 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}
.vignette800 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}

.header .inner .download {
    padding-top: 9px
}

.promo {
	position: inherit;
	margin:5px auto;
}

    .wrap {
        width: 320px;
    }

.welcomeZone {
	height: 800px;
}

    .header {
       
        font-size: 2rem;
         height: 800px;
         position: inherit;
         padding-top:71px;
    }
    
     .headerSample {
     display: inherit;
  margin:0 auto;
  width:300px;
  float:inherit;
   }
   
    .header .inner {
margin-top: 35px;
left: 7px;
    }

    .header .inner h1 {
        max-height: 100px
    }


.footer {
font-size:9px;
width:100%;
}
#logo-footer {
	height:30px;
}
.socialnetwork-logo {
	padding-left:5px;
}

}
.gallery {
	display:block;
	width:600px;
	border: 1px solid rgb(192, 192, 192);
}

@media screen and (max-width:400px) {

.legende {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    height: 150px; /* Hauteur fixe pour la zone de légende */ 
}
	
.vignetteRonde {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteRondeRight {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteCarre {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteCarreRight {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
.vignetteRect {
    clear:both;
    float:none;
    margin: 0 auto;
    margin-top: 30px;
}
	
.faqContent {
	padding-top:10px;
}
.menu {
	clear:both;
	float:left;
	font-size:12px;
	padding-top:1px;
	color:white;
	padding-left:1px;
	padding-right:1px;
}
.zone1 .zone2 {
	
	position: inherit;
}
.zone {   
width:300px;
}


.titre {
    font-size: 17px;
    text-align: center;
    padding: 0px;
    margin-bottom: 35px;
    }
    
 .titre2 {
	 font-size: 18px;
	 text-align: center;
	 padding: 0px;
	 margin-bottom: 35px;
 }

.menuTitre {
	
	padding-left:15px;
	font-size:11px;
	text-decoration: none;
	
}
.menuTitrePremier {
	
	padding-left:0px;
	font-size:11px;
	text-decoration: none;
	
}
.cout1 {
padding-top:0px
}
.cout2 {
padding-top:30px
}
.header .inner .download {
    padding-top: 9px
}

.vignette {
	width:100%
}
.vignette400 {
	width:100%;
	margin:0 auto;
	padding-right:10px;
	padding-left:10px;
}
.vignette500 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}
.vignette800 {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}

.promo {
	position: inherit;
	margin:5px auto;
}

    .wrap {
        width: 322px;
    }
    
    .welcomeZone {
	   height: 780px;
    }

    .header {
       
        font-size: 2rem;
        height: 780px;
         position: inherit;
         padding-top:100px;
    }
    


    .header .inner {
        float: none;
        margin: 0 auto;
        padding: 10px 10px 10px;
        position: relative;
        top: 5px;
        width: 100%;
        left:inherit;
    }

    .header .inner h1 {
        background-size: 90%;
        height: 48px;
    }
    
     .headerSample {
       display: inherit;
  margin:0 auto;
  width:250px;
  float:inherit;
   }
   
.footer {
font-size:9px;
}
#logo-footer {
	height:30px;
}
.socialnetwork-logo {
	padding-left:5px;
}

.gallery {
	display:block;
	width:400px;
	border: 1px solid rgb(192, 192, 192);
}

}

/********Menu.css  ***************************************/

* {
  box-sizing: border-box;
}
.approbationZone {
	position: fixed;
	bottom: 0px;
	background-color:grey;
	display:block;
	color:white;
	width:100%;
	line-height:20px;
	text-align:center;
}
.application {
	width:0px;
}

.question {
padding: 10px 10px 0px;
font-weight: 600;
font-size: 18px;
cursor:pointer;
}

.reponse {
display: none;
font-size: 15px;
}


.boutonConnexion {
	
	    list-style: none;
}

.navi {
  width: 100%;
  position: relative;
}

.navi > .navi-header {
  display: inline;
   float: left;
}

.navi > .navi-header > .navi-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}


.navi > .navi-btn {
  display: none;
}

.navi > .navi-links {
  display: inline;
  float: left;
  font-size: 17px;
  line-height: normal;
}
.navi > .navi-links > ul > li {
	display: inline-block;
}
.webclientHeaderDisplay {
	display:none !important;
	
}
.navi > .navi-links > ul > li > a {
  display: inline-block;
  padding: 13px 20px 11px 20px;
  text-decoration: none;
  color: white;

}

.navi > .navi-links > ul {
 list-style: none;
 margin : 0px;
 padding-inline-start: 40px !important;
}
 
.submenutitle {
	font-size:16px;
	color:#504f4f;
	padding-left:15px;	
}
  
.subsubmenu {
	list-style:none;
  	margin-top:5px;
  	padding-left:10px;
  	max-width:250px;
	
}
.subsubmenuelement {
	float:left;
	width:185px;
}
.submenu {
  padding:15px;
  margin:0;

  list-style:none;

  overflow: hidden;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,.2);
  background-color: #6bccd0;
  position: absolute;
  left: -990px;
 min-width:200px;

}
.submenu li {
  position: relative;
}
  
.submenu li a {
  display:block;
  text-decoration: none;
  color: white;
  font-size:14px;
  padding:5px;
}

.navi > .navi-links > ul > li:hover > a {
   border-bottom: 3px solid white; 
   z-index:2;
}

.navi > .navi-links > ul > li:hover > a ~ .submenu1 {
  left: 180px;
}

.navi > .navi-links > ul > li:hover > a ~ .submenu2 {
  left: 330px;
}

.navi > .navi-links > ul > li:hover > a ~ .submenu3 {
  left: 280px;
}

.navi > .navi-links > ul > li:hover > a ~ .submenu4 {
  left: 450px;
}
.navi > .navi-links > ul > li:hover > a ~ .submenu5 {
  left: 550px;
}


.navi > #navi-check {
  display: none;
}



@media (max-width:900px) {

	.imgmenu {
	display: none;
}
  
  .logo {
  box-shadow: inherit;
  
  }
  .application {
	width:50%;
}

.submenu3 {
  padding: 10px 0px;

}

.subsubmenuelement {
	float:inherit;
	background-color: white !important;
  padding-top: 10px;
}

.subsubmenu {
	padding-left:10px !important;

}

  .webclientHeader {
    position: inherit;
    top: auto;
    right: auto;
  	margin: 0 auto;
  	margin-bottom: 20px;
  }
  
  .webclientHeaderDisplay {
	display:block !important;	
  }

 .navi > .navi-links > ul {
 	padding:0px;
    padding-inline-start: 0px !important;
}

  .navi > .navi-links > ul > li {
	display: inherit;
	border-top:1px solid grey;
}
.navi > .navi-links > ul > li:hover {
   border-bottom: 0px solid white; 
}
.navi > .navi-links > ul > li > a {
  display: inherit;
  padding: 13px 25px 9px 25px;
  text-decoration: none;
  color: #484848;
  text-align: left;
}

.submenu {
  padding:0;
  padding-left: 27px;
  margin:0;
  list-style:none;
  margin-top:5px;
  overflow: hidden;
  box-shadow: inherit;
  background-color: white;
  position: inherit;
  left: 0px;

}

.submenu li a {
  display:block;
  text-decoration: none;
  color: #484848;
  font-size:12px;
  padding:5px;
  text-align:left;
  background-color:white;
  
}
  .navi > .navi-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .navi > .navi-btn > label {
    display: inline-block;
    width: 50px;
    height: 54px;
    padding: 13px;
    padding-top: 16px;
  }
  .navi > .navi-btn > label:hover,.navi  #navi-check:checked ~ .navi-btn > label {
   background-color: rgba(0, 0, 0, 0.3);
  }
  .navi > .navi-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid white;
  }
  .navi > .navi-links {
    position: absolute;
    display: block;
    background-color: white;
    color:#484848;;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 54px;
    left: 0px;
  }
  .navi > .navi-links > a {
    display: block;
    width: 100%;
  }
  .navi > #navi-check:not(:checked) ~ .navi-links {
    height: 0px;
  }
  .navi > #navi-check:checked ~ .navi-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }  
}

.cards {
 text-align:center;
 border:1px solid #ccc;
 padding: 12px;
  width: 100%;  
 }
 
/******** End Menu.css  ***************************************/

@media (max-width: 560px) {

.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}
}



.cookie-consent-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    color: black;
    padding: 15px;
    font-size: 14px;
    text-align: center;
    z-index: 1000;
}

.cookie-consent-button {
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

.cookie-consent-button:hover {
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.cookie-consent-button:active {
    opacity: .5;
}

.cookie-consent-button.btn-success {
    background-color: #6bccd0;
    color: white;
}

.cookie-consent-button.btn-grayscale {
    background-color: #dfe1e5;
    color: black;
}

.cookie-consent-button.btn-outline {
    background-color: #e6f4ea;
    color: #6bccd0;
}

.cookie-consent-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cookie-consent-options label {
    margin: 0 10px;
    font-size: 14px;
}

.cookie-consent-options input {
    margin-right: 5px;
}

/************* FAQ Slyle *******************/
  <!-- Styles FAQ améliorés -->
      

        .faq-wrapper {
          max-width: 980px;
          margin: 0 auto;
        }

        .faq-intro {
          margin-top: 10px;
          font-size: 15px;
          color: #555;
        }

        .faq-toc {
          margin: 20px 0 30px;
          padding: 12px 16px;
          border-radius: 8px;
          background: #6bccd0;
          color: white;
          font-size: 14px;
        }
        .faq-toc strong {
          display: block;
          margin-bottom: 4px;
        }
        .faq-toc ul {
          margin: 6px 0 0 18px;
          padding: 0;
          color: white;
        }
        .faq-toc li {
          margin: 2px 0;
        }
        .faq-toc a {
          color: white;
          text-decoration: none;
        }
        .faq-toc a:hover {
          text-decoration: underline;
        }

        /* Titres de sections principales */
        .faq-section-title {
          font-size: 26px !important;
          font-weight: 300 !important;
          margin: 40px 0 15px;
          padding-bottom: 6px;
          
          scroll-margin-top: 130px; /* pour que l’ancre affiche bien le titre sous le header */
        }

        /* Séparateur vert entre grandes rubriques */
        .faq-separator {
          height: 2px;
          background: #6bccd0; 
          border-radius: 2px;
          margin: 35px 0 10px;
        }

        /* Sous-titres (sous-rubriques) */
        .faq-subtitle {
          font-size: 18px;
          font-weight: 600;
          margin: 35px 0 10px;
          color: #333;
        }

        /* Blocs Question / Réponse – style allégé */
        h2.question {
          position: relative;
          cursor: pointer;
          margin: 6px 0 0;
          padding: 8px 28px 8px 10px;
          font-size: 15px;
          font-weight: 400;
          background: transparent;
          border: none;
          color: #333;
          transition: color .15s ease, border-color .15s ease, background-color .15s ease;
        }
        h2.question::after {
          content: "▾";
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%) rotate(-90deg);
          font-size: 40px;
          color: #333;
          transition: transform .15s ease, color .15s ease;
        }
        h2.question:hover {
          background-color: #f9f9f9;
          border-color: #dcdcdc;
        }
        h2.question.active {
          color: #333;
          border-color: #c2d8ff;
        }
        h2.question.active::after {
          transform: translateY(-50%) rotate(0deg);
                    top: 40%;

       
        }

        .reponse {
          display: none; /* masqué par défaut, géré par le script */
          padding: 8px 0 12px;
          margin: 0 0 6px;
          font-size: 14px;
          line-height: 1.6;
          color: #444;

          border-left: 1px solid #D3D3D3; /* léger trait vert à gauche */
          margin-left: 10px;           /* petit décalage par rapport à la question */
          padding-left: 20px; 
        }
        .reponse p {
          margin: 0 0 6px;
        }
        .reponse li {
          margin-bottom: 3px;
        }

        /* Respiration entre questions */
        #section-cartes > div[itemscope],
        #section-credits-wrapper > div[itemscope],
        #section-compte-wrapper > div[itemscope],
        #section-support-wrapper > div[itemscope] {
          margin-bottom: 2px;
        }

        @media (max-width: 768px) {
          .faq-wrapper {
            padding: 0 4px;
          }
          .faq-section-title {
            font-size: 22px !important;
          }
          h2.question {
            font-size: 14px;
          }
          .reponse {
            font-size: 13px;
          }
        }



/* =============================================================================
   ============================================================================
   SIMPLYCARDS — DESIGN SYSTEM
   ============================================================================
   Système de design partagé pour réduire les inline styles dans les pages.
   Avant ce système : 131 attributs style="..." inline rien que dans la home FR,
   avec des tailles de h2 oscillant entre 24/35 px, 6 occurrences de
   #d0069b en dur, 20 de #6bccd0... → impossible d'avoir un design cohérent.
   Ce bloc fournit les variables + briques typographiques + composants
   de base que les pages peuvent utiliser via des classes sémantiques.
   ============================================================================= */

:root {
    /* Couleurs marque */
    --color-turquoise: #6bccd0;
    --color-turquoise-dark: #5dbec2;
    --color-magenta: #d0069b;
    --color-magenta-hover: #b80585;

    /* Couleurs neutres */
    --color-text: #484848;
    --color-text-dark: #2a2a2a;
    --color-text-soft: #6b6b6b;
    --color-bg-cream: #fefef6;
    --color-bg-light: #fafbfb;
    --color-border-light: #eef0f0;

    /* Échelle typographique */
    --fs-display: 35px;       /* H1/H2 grands titres de section */
    --fs-section: 24px;       /* H2 sous-section ou H3 fort */
    --fs-lead: 18px;          /* Phrase d'accroche, texte introductif */
    --fs-body: 15px;          /* Corps de texte courant */
    --fs-small: 14px;         /* Petits textes (formats, prix...) */
    --fs-author: 20px;        /* Auteur de témoignage */

    /* Layout */
    --radius-button: 7px;
    --radius-card: 10px;
    --shadow-card: 0 5px 9px -4px #969696;
}

/* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────────
   Remplace les inline style="font-size:35px;font-weight:300" répétés sur
   chaque <h2> de la home. */
.h-display {
    font-size: var(--fs-display);
    font-weight: 300;
    line-height: 1.2;
    /* Largeur uniforme : sans cette contrainte, les .h-display héritent de la
       largeur du wrapper de section (920 ou 1200 selon la section), ce qui
       crée des boîtes de titre incohérentes entre sections sur la home. On
       fixe une boîte uniforme à 920 (cohérent avec le standard d'harmonisation
       du site), centrée via auto. Les sections wrappers gardent leur rôle
       d'héberger des contenus larges (grilles, carousels) en dessous du titre. */
    max-width: 920px;
    margin: 10px auto;
}
.h-section {
    font-size: var(--fs-section);
    font-weight: 300;
    line-height: 1.3;
    margin: 10px 0;
}
.text-lead {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.5;
}

/* ─── COULEURS DE TEXTE ──────────────────────────────────────────────────
   Remplace les 50+ inline color:#... répétés. */
.text-turquoise { color: var(--color-turquoise); }
.text-magenta   { color: var(--color-magenta); }
.text-white     { color: #ffffff; }
.text-soft      { color: var(--color-text-soft); }
.text-dark      { color: var(--color-text-dark); }

/* ─── LIENS ──────────────────────────────────────────────────────────────
   Remplace les 25 occurrences de text-decoration:none et les liens magenta
   inline répétés dans les sections SEO et les références aux pages produits.

   ⚠ NB sur la spécificité : a:link / a:visited globaux (ligne 19) ont une
   spécificité 1,1 qui bat les classes seules (1,0). On utilise donc
   a.link-magenta (1,1 + ordre cascade) et a:link.link-magenta pour
   couvrir le cas pseudo-classe. */
.link-plain,
a.link-plain {
    text-decoration: none;
    color: inherit;
}
a.link-magenta,
a:link.link-magenta,
a:visited.link-magenta {
    color: var(--color-magenta);
    text-decoration: none;
}
a.link-magenta:hover {
    text-decoration: underline;
    color: var(--color-magenta);
}
/* Idem pour .text-default (cross-sell liens) */
a.text-default,
a:link.text-default,
a:visited.text-default {
    color: var(--color-text);
}

/* ─── BOUTON PRIMAIRE (CTA "DÉCOUVRIR" / "Envoyez vos cartes") ──────────
   Remplace les 3 blocs <div class="webclient" style="background-color:#d0069b;
   color:white;max-width:340px;font-size:21px;border-radius:7px;margin:...;
   cursor:pointer;line-height:56px;"> qu'on retrouvait à l'identique dans la
   home FR. Un seul style maintenant, modifiable depuis ici.

   Note : la classe .webclient existe déjà mais sert aussi à d'autres
   contextes (badges, etc.) → on garde .btn-primary séparée, et on
   l'applique en plus de .webclient sur les vrais CTA pour ne pas casser
   l'existant. */
.btn-primary {
    display: block;
    max-width: 340px;
    margin: 5px auto;
    padding: 0 20px;
    background-color: var(--color-magenta);
    color: #ffffff !important;        /* override couleur héritée des liens */
    font-size: 21px;
    font-weight: 400;
    line-height: 56px;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background-color 0.22s ease, transform 0.18s ease;
}
.btn-primary:hover {
    background-color: var(--color-magenta-hover);
    transform: translateY(-1px);
}

/* ─── WRAPPER DU H1 DANS LE HERO ────────────────────────────────────── */
.hero-h1-wrap {
    width: 300px;
    margin: 0 auto;
}

/* ─── BANDEAU PROMO INTERNE À LA CARTOUCHE HERO ─────────────────────
   "-20% avec le code promo WELCOME" affiché sous l'image carte.
   ⚠ NE PAS nommer .promo-banner : ce nom est DÉJÀ utilisé ligne 691
   par le bandeau fixed (position:fixed; top:0) géré par JS. Collision
   provoque l'affichage permanent du bandeau hero en haut de page. */
.hero-promo-tag {
    font-size: var(--fs-lead);
    text-align: center;
    color: var(--color-magenta);
    padding-top: 20px;
}

/* ─── BANDEAU D'INVITATION TÉLÉCHARGEMENT ("Téléchargez l'application") */
.download-prompt {
    font-size: var(--fs-lead);
    text-align: center;
    color: var(--color-text);
    padding-top: 20px;
}

/* ─── ZONE D'AVIS / TÉMOIGNAGES ─────────────────────────────────────────
   Remplace les <span style="font-weight:bold;color:#6bccd0"> (guillemets
   stylés) et <div style="font-size:20px;font-weight:500"> (auteur) qui
   apparaissaient 8 fois chacun dans le carousel d'avis. */
.quote-mark {
    font-weight: bold;
    color: var(--color-turquoise);
}
.review-author {
    font-size: var(--fs-author);
    font-weight: 500;
}

/* ─── UTILITAIRES LAYOUT ─────────────────────────────────────────────── */
.u-text-center { text-align: center; }
.u-clearfix    { clear: both; }
.u-mx-auto     { margin-left: auto; margin-right: auto; }

/* ─── SECTION GÉNÉRIQUE AVEC SÉPARATEUR TURQUOISE ─────────────────────
   ⚠ ATTENTION : .zone1 a DÉJÀ un border-bottom: 2px solid #6bccd0 par
   défaut (ligne 287 du CSS). Cette classe .section-divided était donc
   redondante quand appliquée à un .zone1. Le inline original
   <div class="zone1" style="border-bottom:0; border-bottom: 2px..."> ne
   faisait rien de plus que re-affirmer la règle par défaut.
   On laisse la classe utile au cas où elle serait appliquée à une div
   sans .zone1, mais sans !important pour ne pas créer de cumul visuel
   avec le border-bottom natif de .zone1. */
.section-divided {
    border-bottom: 2px solid var(--color-turquoise);
}

/* ─── ZONE-CARD : fond blanc translucide centré ──────────────────────
   Remplace les <div class="zone" style="background:rgba(255,255,255,.9);
   max-width:Xpx;padding-...."> répétés dans les sections "Avec SimplyCards
   envoyez beaucoup d'amour" et "Service client à votre écoute".
   Le max-width et le padding restent inline car ils varient (800 / 1200). */
.zone-card {
    background: rgba(255, 255, 255, 0.9);
}

/* ─── ZONE NARROW : sous-bloc texte rétréci ───────────────────────────
   Remplace les <div class="zone" style="clear:both;max-width: 601px;
   padding-top:...;"> dans la section catégories et service client. */
.zone-narrow {
    clear: both;
    max-width: 800px;
    margin: 0 auto;
}

/* ─── BLOC TEXTE SEO BAS DE PAGE ──────────────────────────────────────
   Remplace l'inline <div style="clear:both;padding:20px;max-width:800px;
   font-size:14px;margin:0 auto;text-align:justify"> qui enveloppe les
   4 sous-sections SEO en bas de la home. */
.home-text {
    clear: both;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    font-size: 14px;
    text-align: justify;
}
.home-text h2 {
    font-size: var(--fs-section);
    font-weight: 300;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGES PRODUITS — patterns d'exemples (texte + vignette flottante)
   Les pages produits (faire-part, anniversaires, vœux…) répètent toutes
   le même pattern : 5-6 blocs « exemple de message + vignette image »
   alternés gauche/droite. Avant : ~25 inline styles par bloc × 5 blocs
   = ~125 inline styles par page × 180 pages = ~22 000 inline styles.
   Avec ces classes : ~5 par bloc → ~25 par page → -80% par page produit.
   ═════════════════════════════════════════════════════════════════════ */

/* Wrapper d'un bloc exemple (image + texte) en FLEX, alterné gauche/droite
   via le suffixe -right / -left (image gauche-texte droite OU image droite-
   texte gauche). Inspiré du pattern .howto-step de la home.
   En grande largeur : pleine largeur jusqu'à 720 px, centré, gap propre.
   En mobile (≤700) : passe en column, image en haut, texte en bas. */
.example-block-right,
.example-block-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin: 40px auto;
    max-width: 720px;
    padding: 0;
    text-align: left;
    clear: both;
    float: none !important;       /* override l'ancien float */
}
.example-block-left {
    flex-direction: row-reverse;   /* image à droite, texte à gauche */
}

/* Colonne texte : flex, largeur max raisonnable (réutilise le calcul .howto) */
.example-text-right,
.example-text-left {
    flex: 1 1 0;
    max-width: 360px;
    width: auto !important;
    float: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/* Vignettes dans un example-block : on retire le float natif, on garde
   leur taille (200×200) via flex-shrink:0 */
.example-block-right > .vignetteCarre,
.example-block-right > .vignetteRonde,
.example-block-right > .vignetteCarreRight,
.example-block-right > .vignetteRondeRight,
.example-block-left > .vignetteCarre,
.example-block-left > .vignetteRonde,
.example-block-left > .vignetteCarreRight,
.example-block-left > .vignetteRondeRight {
    flex-shrink: 0;
    float: none !important;
    margin: 0 !important;
}

/* La .zone-800 (max-width:800) qui enveloppe les blocs exemples est trop
   étroite pour le nouveau layout flex à 920 px. On élargit si elle contient
   au moins un example-block. */
.zone-800:has(.example-block-right),
.zone-800:has(.example-block-left) {
    max-width: 920px;
}

/* Mobile : bascule en column */
@media (max-width: 700px) {
    .example-block-right,
    .example-block-left {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* Titre H3 de l'exemple */
.example-h3 {
    font-size: 20px;
    font-weight: 300;
}
/* Corps du message exemple */
.example-content {
    font-size: 15px;
    padding-top: 10px;
    text-align: justify;
}

/* Sous-titres H2 de la page produit (26px, weight 250) */
.h-product-sub {
    font-size: 26px;
    font-weight: 250;
}

/* Zone wide 1200 (wrapper pleine largeur de la section examples) */
.zone-wide-1200 {
    clear: both;
    max-width: 1200px;
    padding: 10px;
    margin: 0 auto;
}

/* Citation italique avec trait turquoise au-dessus */
.quote-italic {
    border-top: 2px solid var(--color-turquoise);
    padding-top: 20px;
    font-style: italic;
}

/* Image responsive 400px de large max */
.img-responsive-400 {
    width: 100%;
    max-width: 400px;
}
.img-responsive-500 {
    width: 100%;
    max-width: 500px;
}

/* Wrapper d'image avec marge. Le float:left initial a été retiré : sur
   beaucoup de pages produit, cette classe englobe par erreur plus que
   juste l'image (paragraphes, exemples, crosslink-list…) → tout le
   contenu se retrouvait flotté à gauche du parent, créant un décalage
   horizontal visible (crosslink-list non centrée, etc.). Si une vraie
   image flottante est nécessaire, utiliser <img style="float:left"> ou
   créer une classe plus ciblée. */
.img-float-left {
    margin: 10px;
}

/* Liste de cross-sell en bas de page produit ("Dans la rubrique X").
   Remplace <ul style="margin:0"> + <li style="display:block"> répétés
   sur 100+ pages produit. Retire les puces de liste héritées (list-style)
   et le padding-left default qui décalait les items à droite.

   ⚠ display:flex sur le <ul> + justify-content:center : les
   .categorieContainerLink enfants étaient en float:left → s'alignaient
   à gauche du UL avec un grand blanc à droite. Flex avec justify-center
   centre correctement les items, et flex-wrap:wrap permet le retour à
   la ligne sur petit écran. Les .categorieContainerLink enfants ont
   leur float neutralisé pour rentrer dans le flex layout. */
.crosslink-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 10px;
}
.crosslink-list li {
    display: block;
    list-style: none;
}
.crosslink-list a {
    color: var(--color-text);
}
.crosslink-list .categorieContainerLink {
    float: none !important;
}

/* Vignettes : ajout des propriétés background communes pour ne plus avoir
   à répéter background-repeat/size/position en inline sur chaque vignette */
.vignetteRonde,
.vignetteRondeRight,
.vignetteCarre,
.vignetteCarreRight {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Badge numérique turquoise foncé (puces "1", "2", "3" dans les listes
   d'étapes des pages produits). Remplace 50+ inline répétés :
   background:#509ea8;width:20px;height:20px;color:white;font-size:12px;
   line-height:20px;text-align:center;border-radius:10px */
.badge-step {
    display: inline-block;
    background: #509ea8;
    width: 20px;
    height: 20px;
    color: #ffffff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
}

/* Texte par défaut (color:#484848 sur certains <a> de cross-sell) */
.text-default {
    color: var(--color-text);
}

/* Citation italique (variante avec espaces différents : 'font-style: italic') */
.quote-italic-alt {
    border-top: 2px solid var(--color-turquoise);
    padding-top: 20px;
    font-style: italic;
}

/* Variantes de spacers utility */
.u-pt-20 { padding-top: 20px; }
.u-pt-40 { padding-top: 40px; }
.u-pt-80 { padding-top: 80px; }
.u-pb-10 { padding-bottom: 10px; }

/* Variante zone max-width 800 (sans le full pattern .zone) */
.zone-800 {
    max-width: 800px;
    margin: 0 auto;
    /* display:flow-root crée un nouveau Block Formatting Context qui
       englobe les float children (.img-float-left, .vignetteRonde, etc).
       Sans cela, sur certaines pages produit, un .img-float-left englobe
       par erreur la moitié de la zone (paragraphes + exemples) et flotte
       → .zone-800 calcule sa hauteur SANS ce contenu, et le border-bottom
       turquoise de la .zone1 parente apparaît au milieu du contenu visuel
       (juste sous le 1er paragraphe). flow-root corrige cela. */
    display: flow-root;
}
.zone-600 {
    max-width: 600px;
    margin: 0 auto;
}

/* Image responsive 400 avec width 80% (variante) */
.img-responsive-80-400 {
    width: 80%;
    max-width: 400px;
}

/* .titleH2 : classe HTML utilisée sur ~60 H2 dans les pages produit, mais
   sans style associé en CSS jusqu'à présent → forçait chaque H2 à porter
   un inline style="font-size:26px;font-weight:250". On définit la classe
   directement → les 60 inline disparaissent automatiquement sans toucher
   au HTML. */
.titleH2 {
    font-size: 26px;
    font-weight: 250;
}

/* H1 d'introduction des pages produit (sous-titre du sujet de la page).
   Avant : <h1 class="titre" style="font-size:35px;font-weight:300"> répété
   sur chaque page. Aucune règle h1 globale n'existait → certains H1 nus
   héritaient du browser default (très gros et gras). On applique 35/300
   à TOUS les <h1> par défaut, et on garde h1.titre pour la cascade.

   ⚠ EXCEPTION : sur la HOMEPAGE, le H1 du hero (".hero-h1-wrap h1.titre")
   doit rester à 19px / 400 (taille originale .titre du hero). Sans cet
   override, la règle h1 globale ferait passer le h1 du hero à 35px
   et casserait la cartouche. Spécificité 0,1,1,1 → bat h1.titre (0,0,1,1). */
h1 {
    font-size: 35px;
    font-weight: 300;
}
h1.titre {
    font-size: 35px;
    font-weight: 300;
}
.hero-h1-wrap h1,
.hero-h1-wrap h1.titre {
    font-size: 19px;
    font-weight: 400;
}

/* Zone "useZone" — div qui sert de wrapper "Créez vos cartes
   personnalisées" + CTA + apps stores juste avant le footer (rempli
   dynamiquement par setWelcomeZone() dans le JS). Le padding-top:80
   inline était répété sur ~200 pages. Mis en CSS directement.
   On conserve le border-bottom hérité de .zone1 (trait turquoise sous
   le useZone, qui sert de séparateur avant la newsletter insérée par JS).

   border-top : sur certaines pages (application-carte-postale, etc.) le
   sibling immédiatement avant useZone n'est pas une .zone1 → pas de
   border-bottom pour faire séparateur. On force un border-top sur
   useZone, puis on l'annule via le combinator .zone1 + #useZone quand
   le sibling précédent est déjà une .zone1 (pour éviter le doublement). */
#useZone {
    padding-top: 80px;
    border-top: 2px solid var(--color-turquoise);
}
/* Si une .zone1 existe DANS LE FLOW siblings AVANT useZone (peu importe
   les <br> ou autres éléments intermédiaires), elle fournit déjà le
   séparateur via son border-bottom → on annule le border-top de useZone
   pour éviter le doublement. */
.zone1 ~ #useZone {
    border-top: none;
}
/* Mais sur certaines pages (application-carte-postale, etc.) le prev
   sibling immédiat de useZone est un .paragraphe (sans border-bottom)
   → la zone1 plus haut est trop éloignée pour servir de séparateur
   visuel → on ré-active le border-top. Cette règle vient APRÈS .zone1 ~
   dans la cascade donc gagne (même spécificité). */
.paragraphe + #useZone {
    border-top: 2px solid var(--color-turquoise);
}

/* ═════════════════════════════════════════════════════════════════════════
   FIN DU DESIGN SYSTEM
   ═════════════════════════════════════════════════════════════════════════ */


/* =============================================================================
   SimplyCards — Polish visuel (HEADER & FOOTER)
   Aucune modification de contenu HTML, uniquement présentation.
   Palette préservée : turquoise #6bccd0 + magenta #d0069b
   Compatible avec tous les breakpoints existants (400/625/768/1024/1220/1800)
   ============================================================================= */

/* -------------------------------- HEADER -------------------------------- */

/* Bandeau header en BLANC (au lieu du turquoise saturé) — base d'une charte
   moderne où turquoise et magenta deviennent des accents et non du remplissage */
.logo,
.logo-top {
    background-image: none;
    background-color: #ffffff;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.06),
        0 6px 20px -10px rgba(0, 0, 0, 0.12);
}

/* SWAP DU LOGO via CSS uniquement : l'<img> originale (texte blanc conçu pour
   fond turquoise) reste dans le DOM pour SEO/accessibilité mais est masquée ;
   on affiche logo-sc-turquoise.webp (timbre coloré + script turquoise) en bg.
   Source 2517×608, ratio 4.14:1 → 166px de large à hauteur 40px. */
.navi > .navi-header > .navi-title a {
    display: inline-block;
    width: 166px;
    height: 40px;
    background-image: url('../images/logo-sc-turquoise.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    position: relative;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.navi > .navi-header > .navi-title a:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
.navi > .navi-header > .navi-title a img {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
/* Le wrapper du logo n'a plus besoin d'être blanc puisque le fond est blanc */
.navi > .navi-header > .navi-title {
    color: #3C3C3C;
}

/* Liens de navigation principaux : gris foncé sur fond blanc, hover en pill
   turquoise pastel avec texte assombri (style Stripe/Airbnb/Notion).
   white-space: nowrap empêche le passage à 2 lignes des libellés longs. */
.navi > .navi-links > ul > li > a {
    position: relative;
    color: #3C3C3C;
    white-space: nowrap;
    border-radius: 8px;
    margin: 0 2px;
    letter-spacing: 0.15px;
    /* Pas de transition sur background-color : lors d'un swap rapide d'un
       menu à l'autre, une transition 220 ms laissait les deux pills
       partiellement visibles en même temps → effet « furtif » de débordement.
       Hover instantané = pas d'overlap visible entre 2 pills. La transition
       sur la couleur du texte est conservée (effet doux non gênant). */
    transition: color 0.22s ease;
}
.navi > .navi-links > ul > li:hover > a {
    background-color: rgba(107, 204, 208, 0.16); /* turquoise pastel */
    color: #0d8f93;                              /* turquoise foncé lisible */
    border-bottom: none; /* neutralise la bordure dure héritée 3px solid white */
    z-index: auto;       /* neutralise z-index:2 hérité qui passait le pill
                            DEVANT le sous-menu et le faisait déborder dans la
                            zone d'overlap entre pill et panneau */
}

/* Sous-menus desktop : panneaux BLANCS flottants avec ombre douce
   (au lieu des blocs turquoise pleins de l'ancienne version).
   C'est le changement de style le plus marquant : pattern card flottante.
   Padding compact en hauteur pour des panneaux moins étirés verticalement. */
.submenu {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow:
        0 16px 32px -10px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 8px 14px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.navi > .navi-links > ul > li:hover > .submenu,
.navi > .navi-links > ul > li:hover > a ~ .submenu {
    opacity: 1;
    transform: translateY(0);
}

/* Liens des sous-menus : gris foncé sur le panneau blanc, hover turquoise
   pastel. translateX (et non padding-left) pour ne pas modifier le layout. */
.submenu li a {
    color: #3C3C3C;
    border-radius: 6px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.submenu li a:hover {
    background-color: rgba(107, 204, 208, 0.14);
    color: #0d8f93;
    transform: translateX(3px);
}

/* Titres de sous-sous-menus (Anniversaire, Mariage, Naissance, …)
   Mis en évidence par display:block + 14px + poids 700 + letter-spacing.
   padding-left:15px = même retrait que les <a> des liens (.subsubmenu a
   un padding-left:10 + <a> un padding-left:5 = 15 px) → titre et items
   sont visuellement alignés sur la même verticale. */
.submenutitle {
    display: block;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    color: #0d8f93;
    padding: 0 0 3px 15px;
    margin: 4px 0 3px 0;
    line-height: 1.25;
    letter-spacing: 0.2px;
}

/* (Les vignettes décoratives .submenu-thumb ont été remplacées par un layout
   mega menu pleine largeur — voir les règles dans @media (min-width: 901px)
   plus bas, qui centrent les colonnes dans un panneau blanc sur toute la
   largeur du viewport.) */

/* CTA principal "Envoyez vos cartes" : radius 8px pour s'aligner avec
   .webclient (DÉCOUVRIR, etc.) qui est à border-radius:7px en inline.
   Padding raisonné + white-space:nowrap pour garantir 1 ligne dans la largeur
   fixe de 155 px imposée par .boutonConnexion. font-weight conservé (400) car
   600 élargissait trop "Envoyez vos cartes" → passait sur 2 lignes. */
.boutonConnexion,
.boutonConnexion-top {
    border-radius: 8px;
    padding: 4px 10px;
    letter-spacing: 0.15px;
    white-space: nowrap;
    box-shadow: 0 4px 12px -2px rgba(208, 6, 155, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.boutonConnexion:hover,
.boutonConnexion-top:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(208, 6, 155, 0.6);
    background-color: #e0089b;
}

/* Tous les CTA magenta inline (DÉCOUVRIR, Envoyez vos cartes en ligne…) */
.webclient {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 12px -2px rgba(208, 6, 155, 0.4);
}
.webclient:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(208, 6, 155, 0.55);
}

/* Hamburger animé en croix lorsque le menu mobile est ouvert
   transform-origin: 50% 0 → on pivote autour de la BARRE visible (border-top
   au sommet du span de 10px), pas autour du centre du span → X symétrique.
   Couleur des barres : gris foncé sur le header désormais blanc. */
.navi > .navi-btn > label > span {
    border-top-color: #3C3C3C;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: 50% 0;
}
/* Survol/ouverture du bouton hamburger : fond gris très doux (était rgba 0,0,0,0.3) */
.navi > .navi-btn > label:hover,
.navi #navi-check:checked ~ .navi-btn > label {
    background-color: rgba(0, 0, 0, 0.05);
}
.navi > #navi-check:checked ~ .navi-btn > label > span:nth-of-type(1) {
    transform: translateY(10px) rotate(45deg);
}
.navi > #navi-check:checked ~ .navi-btn > label > span:nth-of-type(2) {
    opacity: 0;
}
.navi > #navi-check:checked ~ .navi-btn > label > span:nth-of-type(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* --------------- Header : adaptations mobile (≤900px) --------------- */
@media (max-width: 900px) {
    /* En mobile, les sous-menus sont toujours déployés en accordéon : on
       rétablit la visibilité ET on APLATIT le styling « panneau flottant »
       hérité du desktop (border-radius 12, bordure, box-shadow, transform).
       Sans ces resets, chaque sous-menu s'affiche comme une cartouche
       arrondie avec ombre dans le menu mobile → effet « cartes empilées »
       bizarre dans un accordéon plein écran. */
    .submenu {
        opacity: 1;
        transform: none;
        animation: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transition: none;
    }
    /* PANNEAU MOBILE PLEINE LARGEUR : sans cela le menu shrink-to-fit sur la
       largeur du libellé le plus long et s'aligne à gauche du viewport.
       Ombre douce sous le panneau pour le détacher du contenu de la page,
       sans excès. */
    .navi > .navi-links {
        width: 100%;
        box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.14);
    }
    /* Les sous-menus ont des width:300/600/770px INLINE dans le HTML
       (style="width:300px") → on les neutralise avec !important pour qu'ils
       s'alignent proprement à la largeur du panneau */
    .submenu {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 16px;
    }
    /* Les colonnes "Anniversaire/Mariage/Naissance…" doivent aussi prendre
       toute la largeur du panneau (et non leurs 185px figés du desktop) */
    .subsubmenuelement {
        width: 100%;
    }
    .subsubmenu {
        max-width: none !important;
    }
    /* En mobile le panneau est blanc : le pill blanc translucide serait
       quasi-invisible → gris bleu très doux. Reset margin/border-radius. */
    .navi > .navi-links > ul > li > a {
        margin: 0;
        border-radius: 0;
        transition: background-color 0.18s ease;
    }
    .navi > .navi-links > ul > li:hover > a {
        background-color: #f5fafa;
        color: #484848;
    }
    .navi > .navi-links > ul > li {
        border-top: 1px solid #eef0f0;
    }
    /* Hover des liens de sous-menu en mobile : fond visible, pas de shift */
    .submenu li a:hover {
        background-color: #eef7f8;
        transform: none;
    }
    /* Titres de sous-sous-menu en mobile : on hérite du desktop (display:block,
       font-weight:700, letter-spacing) et on n'ajuste que la couleur/taille
       /marges pour le contexte mobile (panneau blanc, plus de respiration
       verticale entre les rubriques). */
    .submenutitle {
        color: #4eb8bc;
        font-size: 13px;
        padding: 4px 0 4px 4px;
        margin: 12px 0 6px 8px;
    }

    /* CENTRAGE VERTICAL CARTOUCHE EN MOBILE (idem desktop, mais avec un
       padding-top de 54 px = hauteur du bandeau mobile). Le flexbox sur
       .header centre automatiquement la cartouche, quelle que soit la
       hauteur du .header dans les sous-@media (560, 725, 800, 780). */
    .header {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 54px !important;
    }
    .header .inner {
        margin-top: 0 !important;
        left: auto !important;     /* annule les left:18%/7px hérités */
    }
}

/* -------------------------------- FOOTER -------------------------------- */

/* Barre footer : dégradé cohérent avec le header */
.zone2 {
    background-image: linear-gradient(180deg, #6bccd0 0%, #5dbec2 100%);
}

/* Logo du footer */
#logo-footer {
    transition: transform 0.25s ease, filter 0.25s ease;
}
#logo-footer:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

/* Icones sociales : pastilles arrondies + élévation au survol */
footer#footerZone a img[alt*="facebook" i],
footer#footerZone a img[alt*="instagram" i],
footer#footerZone a img[alt*="pinterest" i],
footer#footerZone a img[alt*="support" i] {
    padding: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    box-sizing: content-box;
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
footer#footerZone a:hover img[alt*="facebook" i],
footer#footerZone a:hover img[alt*="instagram" i],
footer#footerZone a:hover img[alt*="pinterest" i],
footer#footerZone a:hover img[alt*="support" i] {
    background-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Pastille "blog" cohérente avec les autres icones */
footer#footerZone a[href*="blog.simplycards"] span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.16);
    transition: background-color 0.22s ease, transform 0.22s ease;
}
footer#footerZone a[href*="blog.simplycards"]:hover span {
    background-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

/* Liens textuels du footer : feedback opacité */
footer#footerZone a {
    transition: opacity 0.2s ease;
}
footer#footerZone a:hover {
    opacity: 0.85;
}

/* Sélecteur de langues : underline animée */
#langue a {
    position: relative;
    padding: 2px 3px;
    display: inline-block;
}
#langue a::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: -1px;
    height: 1px;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}
#langue a:hover::after {
    transform: scaleX(1);
}

/* Carte des moyens de paiement : on garde juste le border-radius, pas
   d'ombre (le visuel respire mieux sur le fond turquoise du footer). */
.footer img[alt="Moyens de paiement"] {
    border-radius: 4px;
}

/* =============================================================================
   DESKTOP ≥ 901px : LAYOUT HEADER SUR 2 LIGNES
   - Row 1 (~62px) : logo à gauche + CTA "Envoyez vos cartes" fixée à droite
   - Row 2 (~50px) : nav links centrés sur toute la largeur
   La nav passe désormais sous le logo en pleine largeur, ce qui permet de
   conserver le menu déroulant visible jusqu'à 900px (au lieu de basculer en
   hamburger dès 1220px comme avant — la nav avait moins d'espace horizontal).
   ============================================================================= */
@media (min-width: 901px) {

    /* Bandeau plus haut pour accueillir 2 lignes (62 logo + 50 nav ≈ 110) */
    .logo,
    .logo-top {
        height: 110px;
    }

    /* .navi en flex avec wrap : .navi-links bascule en row 2 grâce à flex-basis */
    .navi {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    /* Logo un peu plus gros (50 au lieu de 40) + bien aligné en row 1 */
    .navi > .navi-header {
        flex: 0 0 auto;
    }
    .navi > .navi-header > .navi-title {
        padding: 5px 22px;
    }
    .navi > .navi-header > .navi-title a {
        width: 207px;   /* ratio 4.14:1 × hauteur 50 */
        height: 50px;
    }

    /* On force .navi et .navi-links en position:static pour que le
       containing block du sous-menu (position:absolute) remonte jusqu'à
       .logo — qui a, lui, une hauteur EXPLICITE de 110 px. Du coup le
       top:calc(100% - X) du sous-menu se calcule sur 110, indépendamment
       des fluctuations internes du layout flex de .navi. */
    .navi {
        position: static;
    }
    .navi > .navi-links {
        flex-basis: 100%;
        display: block;
        float: none;
        text-align: center;
        padding: 0;
        min-height: 50px;
        font-size: 16px;
        position: static;
    }

    /* Séparateur léger entre row 1 (logo) et row 2 (nav) ancré sur
       .navi-header (en position:relative pour ce seul besoin). Pseudo
       qui s'étend en 100vw pour couvrir toute la largeur du bandeau. */
    .navi > .navi-header {
        position: relative;
    }
    .navi > .navi-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.07);
        pointer-events: none;
    }
    .navi > .navi-links > ul {
        padding-inline-start: 0 !important;
        margin: 0;
        text-align: center;
        /* display:flex retire l'espace HTML qui se rendait entre les </li><li>
           comme un caractère blanc (4-6 px) — c'est ce blanc, hors de tout
           <li>, qui faisait perdre le :hover lors d'un mouvement lent entre
           deux items et fermait/réouvrait le sous-menu. En flex les items
           sont strictement adjacents → hover continu d'un item à l'autre. */
        display: flex;
        justify-content: center;
    }
    /* <li> en inline-flex avec align-items:center et hauteur 50 = la zone
       de hover du menu item s'étend sur toute la hauteur de row 2 (pas
       seulement la hauteur du <a>). Garantit hover continu jusqu'au bord
       inférieur du bandeau, sans interstice vertical sous le pill. */
    .navi > .navi-links > ul > li {
        display: inline-flex;
        align-items: center;
        height: 50px;
    }
    /* padding 12 + line-height 22 + padding 12 = 46 px de hauteur de pill,
       centré dans le <li> de 50 px (via align-items:center du parent) →
       2 px de marge AU-DESSUS et AU-DESSOUS du pill. Le pill ne touche
       plus le bord inférieur du bandeau (y=110), donc plus de débordement
       perceptible sur l'image héro (visible surtout sur "Questions
       Fréquentes" qui n'a pas de sous-menu pour le masquer) ni de raccord
       visuel pill/sous-menu lors d'un changement rapide entre items. */
    .navi > .navi-links > ul > li > a {
        padding: 12px 18px;
        line-height: 22px;
    }
    /* Cas particulier "Questions Fréquentes" : c'est le seul <li> qui n'a
       pas de sous-menu (<ul> enfant) pour masquer le bord inférieur du
       pill au survol. À 46 px de hauteur le bord du pill touche y=108
       (bandeau 110 px - 2 px de marge), et le contraste pill turquoise
       pastel / image héro reste perceptible. On rétrécit donc le pill
       FAQ à 42 px (padding-top 12 + line-height 22 + padding-bottom 8) ET
       on l'ancre en haut du <li> via align-self:flex-start + margin-top:2,
       de façon à ce que :
       - le HAUT du pill soit à y=2, EXACTEMENT comme les autres items
         (qui ont un pill 46 px centré dans 50 px → top à y=2)
       - le BAS du pill soit à y=44, avec 6 px de marge au-dessus de y=110
         (= bord inférieur du bandeau) → plus de débordement perceptible
       - le TEXTE soit à y=14 du <li>, identique aux autres items
         (autres : 2 + padding-top 12 = 14 ; FAQ : 2 + padding-top 12 = 14)
       Coins inférieurs droits (border-radius 8/8/0/0) : le pill « plonge »
       proprement dans le bandeau, comme un onglet ; coins supérieurs
       arrondis 8 px conservés pour l'harmonie avec les autres pills. */
    .navi > .navi-links > ul > li:not(:has(> ul)) > a {
        align-self: flex-start;
        margin-top: 2px;
        padding: 12px 18px 8px 18px;
        border-radius: 8px 8px 0 0;
    }

    /* CTA "Envoyez vos cartes" centrée verticalement dans row 1 (62px) */
    .boutonConnexion-top {
        top: 18px;
    }
    .boutonConnexion {
        top: 56px;   /* promo banner (38px) + 18 */
    }

    /* CENTRAGE VERTICAL VIA FLEXBOX
       display:flex + justify-content:center centre automatiquement la
       cartouche au milieu du contenu du .header, peu importe sa hauteur
       réelle. padding-top:110 = hauteur du bandeau desktop pour exclure
       cette zone occultée du calcul de centrage → cartouche centrée dans
       la PARTIE VISIBLE du héros.

       background-position:center 110px : décale l'image de fond de 110 px
       vers le bas, donc le sujet (têtes des enfants, etc.) qui se trouvait
       dans la partie supérieure de l'image (et qui était coupé par le
       bandeau fixed) apparaît maintenant juste SOUS le bandeau. Le vide
       de 110 px créé en haut est invisible car couvert par le bandeau. */
    .header {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 560px !important;
        padding-top: 110px !important;
        background-position: center 110px !important;
    }
    .header .inner {
        margin-top: 0 !important;
    }

    /* Sur toutes les pages sauf la home, .header est dans un wrapper
       .welcomeZone qui avait des hauteurs variables selon le @media (515,
       560, 665…). On force 560 px pour que .welcomeZone matche EXACTEMENT
       .header → plus de hero "tassé" en grande largeur, alignement visuel
       parfait avec la home (qui utilise .header sans wrapper). */
    .welcomeZone {
        height: 560px !important;
    }
}

/* PALIERS PROGRESSIFS DE HAUTEUR HERO EN GRANDE LARGEUR
   À partir de 1400 px de viewport, le hero à 560 px paraît trop tassé
   horizontalement : l'image background-cover est étirée (ratio largeur
   sur hauteur ~ 2.5+). On augmente progressivement la hauteur pour
   conserver un ratio plus naturel et donner plus d'air visuel à l'image.

   ⚠ Note sur le bandeau : il est en position:fixed (top:0, height:110).
   Il chevauche les 110 premiers px de l'image hero, mais comme sur la
   HOME (qui a ce comportement depuis toujours), on accepte ce masquage
   partiel — les images welcome/<sujet>.jpg sont conçues avec un sujet
   centré ou bas, le bandeau couvre la partie supérieure (souvent ciel /
   arrière-plan). Pas de décalage spécial : welcomeZone et .header
   matchent EXACTEMENT les hauteurs de .header sur la home. */
@media (min-width: 1400px) {
    .header {
        height: 640px !important;
    }
    .welcomeZone {
        height: 640px !important;
    }
}
@media (min-width: 1800px) {
    .header {
        height: 720px !important;
    }
    .welcomeZone {
        height: 720px !important;
    }
}

@media (min-width: 901px) {
    /* Reprise du @media 901+ : continuation des règles ci-dessous */

    /* Le .wrap par défaut a une width:343px fixe, plus large que la cartouche
       (.inner qui shrink-to-fit à ~331). Comme .inner est en float:left dans
       le .wrap, ça collait la cartouche à GAUCHE du .wrap (qui lui était bien
       centré) → décalage de ~12 px vers la gauche perceptible.
       width:fit-content fait épouser au .wrap la largeur exacte de la
       cartouche → .wrap centré (margin:0 auto) = cartouche centrée. */
    .header .wrap {
        width: fit-content;
    }

    /* ----------------- MEGA MENU pleine largeur ---------------------------
       Panneau blanc qui s'étend sur toute la largeur du viewport.
       top:100% = bas exact de .navi (qui mesure désormais 110 = .logo, sans
       interstice). La bordure top 1px sert de séparateur léger.

       CLEF UX :
       - pointer-events:none par DÉFAUT → les sous-menus cachés ne capturent
         pas les hovers. Sans ça, comme les sous-menus sont position:absolute
         pleine largeur et que le dernier en DOM est topmost, le curseur qui
         quittait l'item parent tombait sur le bridge du DERNIER sous-menu →
         celui-ci s'ouvrait à la place. C'était le bug "le sous-menu est
         modifié quand on descend".
       - pointer-events:auto activé QUAND le sous-menu est rendu visible
         (via :hover du li parent, OU :hover du sous-menu lui-même).
       - .submenu:hover garde le panneau ouvert tant que le curseur est
         dessus (ou sur son bridge), même si le li parent a perdu :hover. */
    .submenu {
        /* Containing block = .logo (height: 110px explicite, depuis qu'on
           a passé .navi et .navi-links en position:static). top:110px ==
           bord INFÉRIEUR EXACT de .logo → le sous-menu démarre tout juste
           sous le bandeau (sous le séparateur), sans aucune remontée dans
           la zone des items du menu. La border-top 1px du sous-menu se
           pose pile à y=110 et joue le rôle de séparateur léger. */
        top: 110px;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: none !important;

        border-radius: 0 0 12px 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-left: none;
        border-right: none;
        box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.18);

        display: flex;
        flex-wrap: wrap;
        justify-content: center;       /* colonnes centrées dans le panneau */
        align-items: flex-start;
        gap: 18px 36px;
        padding: 24px;
        text-align: left;              /* … mais le texte des items à gauche dans chaque colonne */

        transform: none;
        pointer-events: none;        /* caché : pas de capture des hovers */
        /* Transition instantanée pour éviter l'effet de crossfade quand on
           passe rapidement d'un item à l'autre (les deux sous-menus étaient
           simultanément à mi-opacité au même endroit pendant 220 ms). En
           desktop, le panneau apparaît/disparaît en 1 frame → swap net. */
        transition: none;
    }

    /* Persistance : le sous-menu reste ouvert quand le curseur est dessus
       (ou sur son bridge). pointer-events:auto se maintient via cette règle
       même quand le li parent a perdu :hover → on peut traverser le bridge
       et atteindre les liens du sous-menu sans qu'il se referme. */
    .submenu:hover {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .navi > .navi-links > ul > li:hover > .submenu,
    .navi > .navi-links > ul > li:hover > a ~ .submenu1,
    .navi > .navi-links > ul > li:hover > a ~ .submenu2,
    .navi > .navi-links > ul > li:hover > a ~ .submenu3,
    .navi > .navi-links > ul > li:hover > a ~ .submenu4,
    .navi > .navi-links > ul > li:hover > a ~ .submenu5 {
        left: 0;
        transform: none;
        opacity: 1;
        pointer-events: auto;        /* visible : activé pour le hover */
    }

    /* Colonnes : largeur fixe et float retiré pour layout flex propre.
       padding-top:10px inline (présent sur certains éléments pour l'ancien
       float-layout en 2 rangées) est neutralisé — flex gère le wrap tout
       seul, la gouttière verticale vient du gap du conteneur. */
    .submenu > .subsubmenuelement {
        float: none;
        width: 220px;
        padding-top: 0 !important;
        clear: none;
    }
}

/* Feature image dans certains sous-menus (submenu1 Carte Postale,
   submenu4 Inspiration en DE/EN…) — affichée seulement quand le viewport
   est suffisamment large pour qu'elle ait sa place sans pousser les
   colonnes. En dessous, masquée → le sous-menu reste épuré. */
.submenu1-feature,
.submenu4-feature {
    display: none;
    list-style: none;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.submenu1-feature img,
.submenu4-feature img {
    display: block;
    width: 260px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
@media (min-width: 1100px) {
    .submenu1-feature,
    .submenu4-feature {
        display: block;
    }
}

/* Footer : sur mobile (≤625px) les 2 colonnes inline 50%/50% (logo+icones
   à gauche, paiement sécurisé à droite) sont trop étroites pour accueillir
   les 5 icônes sociales avec leurs pastilles → Facebook se faisait tronquer.
   On stack les 2 colonnes en pleine largeur : chacune a alors toute la
   largeur du viewport pour respirer. */
@media (max-width: 625px) {
    footer#footerZone .zone.footer > div[style*="50%"] {
        float: none !important;
        width: 100% !important;
        padding-top: 14px;
    }
}

/* =============================================================================
   Section "1-2-3 envoyez" sur la home — refonte en flexbox propre. L'ancienne
   structure utilisait des float:left/right qui faisaient apparaître le contenu
   décalé sur un côté de la zone, avec beaucoup d'espace vide à côté en grande
   largeur. Désormais : chaque étape centrée sur sa ligne, alternance image/
   texte via flex-direction:row-reverse.
   ============================================================================= */
/* Section howto (3 étapes + vidéo) — le wrapper .zone1.howto-zone doit
   afficher le séparateur turquoise en bas (sous la vidéo). Le border-bottom
   natif de .zone1 (ligne 287) devrait suffire, mais un cas observé montrait
   l'absence de séparateur → on force explicitement ici pour garantir le
   trait visuel entre la vidéo et la section des avis qui suit. */
.howto-zone {
    border-bottom: 2px solid var(--color-turquoise);
}
.howto-zone .zone {
    max-width: 920px !important;
}
.howto-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin: 40px auto;
    max-width: 720px;
    text-align: left;
}
.howto-step.howto-step-reverse {
    flex-direction: row-reverse;
}
.howto-image {
    flex-shrink: 0;
    float: none !important;
    margin: 0 !important;
    /* Propriétés background sorties des inline style de chaque <div class="howto-image">
       → seul background-image (URL spécifique à l'étape) reste inline */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* Petit texte de description sous chaque h3 d'étape howto. Remplace
   l'inline <div style="font-size:15px;padding-top:10px"> répété 3 fois. */
.howto-step-desc {
    font-size: 15px;
    padding-top: 10px;
}
.howto-text {
    flex: 1 1 0;
    max-width: 360px;
}
.howto-text h3 {
    margin: 0 0 8px 0;
}
.howto-video-intro {
    margin: 40px auto 0;
    text-align: center;
    font-size: 24px;
    font-weight: 300;
}
@media (max-width: 700px) {
    .howto-step,
    .howto-step.howto-step-reverse {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .howto-text {
        max-width: 100%;
        text-align: center;
    }
}

/* =============================================================================
   Section "À chaque occasion, sa carte personnalisée" sur la home — refonte
   en CSS Grid avec layout INTERNE HORIZONTAL pour chaque card (image à
   gauche, contenu à droite). L'ancienne structure : 2 cards 380px verticales
   → trop hautes et trop d'espace blanc à droite en grande largeur. Désormais
   grid repeat(2, minmax(0, 560px)) → 2 cards larges côte à côte, chacune en
   layout horizontal (220px image + contenu flex), occupent ~ 1150 px max
   au lieu de 790. Plus dense, moins vertical.
   ============================================================================= */
/* Override du max-width:800 de .zone global → la section occasions a besoin
   de plus d'espace horizontal (2 cards 560 px + gap 30 = 1150 px) pour que
   la grille puisse vraiment s'étendre. Sans cet override la grille est
   coincée à 800 px max et les cards s'écrasent à ~385 px de large, le
   contenu wrap horriblement et le layout horizontal interne ne respire pas. */
/* Aération verticale autour de la section : padding-top:0px était mis en
   inline dans le HTML pour coller la section à l'accroche → top de page
   trop chargé, manque de respiration. On rétablit un padding généreux haut
   + bas (override de l'inline style via !important). Idem pour l'écart entre
   le H2 et la grille, et entre la grille et le CTA en bas. */
.occasions-zone {
    padding-top: 48px !important;
    padding-bottom: 48px;
}
.occasions-zone > .zone {
    max-width: 1200px;
}
.occasions-zone > .zone > h2 {
    margin-bottom: 28px !important;
}
.occasions-zone .webclient {
    margin-top: 36px !important;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 560px));
    gap: 30px;
    justify-content: center;
    margin: 30px auto;
    padding: 0 20px;
}
.product-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 9px -4px #969696;
    overflow: hidden;
    /* Card en flex column : zone top (image+contenu en row) puis pied de card
       full-width avec prix + expédition. Avant : tout en row, prix collé à la
       colonne gauche → espace blanc sous la description en colonne droite,
       et prix/expédition contraints à 240px de large. */
    display: flex;
    flex-direction: column;
    text-align: left;
}
/* ZONE TOP : image (gauche) + contenu (droite) côte à côte. flex:1 1 auto
   pour absorber l'espace disponible — le footer s'auto-aligne en bas. */
.product-card-top {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
/* COLONNE GAUCHE : image paysage en haut + formats sous l'image.
   Largeur fixe 240 px → l'image (background-size:cover) garde un beau
   ratio paysage 240×160 (3:2), et les formats sont alignés juste en
   dessous comme des sous-titres descriptifs de la carte produit. */
.product-card-left {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    background-color: #fafbfb;
}
.product-card-image {
    width: 100%;
    height: 160px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.product-card-formats {
    padding: 10px 14px;
    font-size: 13px;
    color: #555;
    line-height: 1.55;
    border-top: 1px solid #eef0f0;
}
.product-card-formats > div {
    line-height: 1.55;
}
/* Détails qualité/garantie sous les formats (papier 330g, finition vernie,
   garantie satisfait/remboursé). Petit checkmark turquoise en début de
   chaque ligne pour rassurer sans surcharger. Plus petit que les formats
   et avec un mini border-top discret pour séparer dimensions ↔ qualité.
   N'apparaît actuellement que sur la Carte postale FR. */
.product-card-details {
    list-style: none;
    margin: 0;
    padding: 8px 14px 12px;
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    border-top: 1px solid #eef0f0;
}
.product-card-details li {
    position: relative;
    padding-left: 16px;
}
.product-card-details li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #6bccd0;
    font-weight: 700;
    font-size: 12px;
    line-height: inherit;
}
/* COLONNE DROITE : titre + description. flex column pour que la description
   wrap proprement sans surcharger la card. */
.product-card-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
    font-size: 15px;
    line-height: 1.5;
    color: #484848;
}
.product-card-content h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: bold;
}
.product-card-content p {
    margin: 0 0 10px 0;
}

/* PIED DE CARD : full-width sous la zone top, séparé par un border-top
   discret. Prix + mention "tout inclus" à gauche, expédition à droite.
   Avant, le prix était coincé sous l'image dans la colonne gauche (240px) :
   "À partir de 2,19€" tenait sur 2 lignes, et l'espace blanc à droite sous
   la description restait inutilisé. Désormais le footer s'étend sur les
   deux colonnes → hiérarchie commerciale plus claire et meilleure densité. */
.product-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background-color: #fafbfb;
    border-top: 1px solid #eef0f0;
    font-size: 14px;
    color: #484848;
    flex-wrap: wrap;
}
.product-card-price-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.product-card-price {
    font-size: 17px;
    font-weight: 700;
    color: #2a2a2a;
}
/* Mention "tout inclus (impression, timbre, envoi)" sous le prix : petit,
   italique, gris, sans peser visuellement. Mais assez visible pour rassurer
   sur l'absence de frais cachés. */
.product-card-included {
    font-size: 12px;
    color: #777;
    font-style: italic;
    margin-top: 2px;
}
.product-card-shipping {
    font-size: 13px;
    color: #484848;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* Icône globe SVG monochrome (line-icon : cercle + 1 méridien + équateur).
   Préférée à l'emoji ✈ (transport aérien CO₂-intensif, mauvaise image) ou
   🌍 (rendu emoji coloré "jouet" sur la plupart des plateformes). Le SVG
   inline en data URI évite de dupliquer le markup dans les 6 product-cards
   (2 cards × 3 langues) et permet un rendu net + monochrome stable. Le
   pseudo-element ::before est compté comme flex-item dans le parent
   .product-card-shipping → le gap:6px s'applique automatiquement. */
.product-card-shipping::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23484848' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}

/* ÉTAPE 1 — Largeur intermédiaire (1100 → 700 px) : passe en GRID 1 COLONNE,
   mais chaque card RESTE en layout HORIZONTAL (image à gauche, texte à
   droite). Sans cet étage intermédiaire, entre 768 et 1100 px, les 2 cards
   restent côte à côte mais sont compressées → image 240 fixe + texte
   140-280 px → texte qui wrap sur 8-10 lignes → cards très hautes et moches.
   Avec 1 seule card par ligne et 720 px max de largeur, le texte a la place
   de respirer (480 px de large) → card courte et lisible. */
@media (max-width: 1100px) {
    .products-grid {
        grid-template-columns: minmax(0, 720px);
        gap: 20px;
    }
}

/* ÉTAPE 2 — Mobile/petit écran (≤ 700 px) : la card se replie en vertical
   (image en haut pleine largeur + formats juste sous + contenu dessous).
   À cette largeur, l'image 240 px de la colonne gauche serait écrasée → on
   préfère l'avoir en bandeau pleine largeur 220 px de haut. */
@media (max-width: 700px) {
    .products-grid {
        grid-template-columns: minmax(0, 460px);
        margin: 20px auto;
    }
    /* La card est DÉJÀ en flex column (top + footer empilés) à toutes les
       tailles. Ce qu'on bascule en mobile : la zone TOP passe à son tour en
       column → image en bandeau pleine largeur, puis contenu en-dessous. */
    .product-card-top {
        flex-direction: column;
    }
    .product-card-left {
        flex: 0 0 auto;
        width: 100%;
    }
    .product-card-image {
        height: 220px;
    }
    .product-card-formats {
        flex: 0 0 auto;
    }
    /* Footer en column en mobile : prix + mention sur ligne 1, expédition
       sur ligne 2. Empêche le price-wrap d'écraser la mention shipping. */
    .product-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 18px;
    }
    .product-card-shipping {
        white-space: normal;
    }
}

/* =============================================================================
   HARMONISATION DES LARGEURS DE SECTIONS — éviter l'effet "yoyo" / "entonnoir"
   en plein écran. Le .zone par défaut est à 800 px, mais certaines sections
   (avis, crosslinks) gagnent en équilibre visuel lorsqu'elles s'élargissent
   pour s'aligner sur les sections voisines (1200 / 920). On garde tout texte
   courant (.paragraphe, .zone-narrow, blocs example) à leur largeur calibrée
   pour la lisibilité — seuls les wrappers de section sont élargis.
   ============================================================================= */
/* Section avis (carousel testimonials) sur la home — était coincée à 800,
   entre la section howto (920) et la section "Avec SimplyCards" (1200), ce
   qui créait un rétrécissement visible en plein écran. On élargit à 1200 :
   le carousel et le ratings-container disposent simplement de plus d'espace
   centré, sans changer la taille des items eux-mêmes. */
.avis-zone > .zone {
    max-width: 1200px;
}

/* Wrapper de la liste crosslink "Dans la rubrique X" en bas des pages produit
   — était à 800 (inline) alors que les blocs example juste au-dessus sont à
   920. On aligne pour supprimer le rétrécissement de fin de page. La règle
   cible la .crosslink-list elle-même : son wrapper inline à max-width:800
   doit être passé à 920 (cf. find/replace inline dans les pages produit). */