/* Personnalisation de l'identité visuelle */
:root {
  --color-absolute-blue: #2c3e50; /* Ton bleu personnalisé */
  --primary-button-bg-color: #e74c3c; /* Ton bouton d'action (ex: rouge carnet) */
  --header-bg-color: #ffffff;
}

/* Importation Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');



.open-sans-black {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.montserrat-black {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

/* Application aux éléments du site */
:root {
  --font-family-sans: 'Open Sans', sans-serif;
  --font-family-serif: 'Montserrat', sans-serif; 
}

body {
  font-family: var(--font-family-sans) !important;
  -webkit-font-smoothing: antialiased;
  background-color: #F8F8F6;
}
.text-content {
  font-family: var(--font-family-serif) !important;
}
.page-wrapper {
  background-color: #F8F8F6;
}
.site-header__inner, .header-nav {
  background: #F5F4ED;
  border: none;
}
h1, h2, h3, .site-branding__name, .views-field-comments-link {
  font-family: var(--font-family-serif) !important;
  font-weight: 800;
}
.site-branding__name {
  letter-spacing: -0.5px;
}
.views-field-comments-link {
  padding-top: 3rem;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.comment--level-1 {
    border-block-start: none;
    border-block-end: 2px solid var(--color--gray-95);
}
p {
  font-family: var(--font-family-sans) !important;
}
.site-footer {
    position: relative;
    color: var(--color--gray-65);
    background: linear-gradient(180deg, #265158 0%, #265158 100%);
}
@media (min-width: 75rem) {
    body:not(.is-always-mobile-nav) .site-footer {
        border-inline-start: solid var(--content-left) #265158;
    }
}
.site-branding__name {
    @media (min-width: 75rem) {
        font-size: 1.75rem;
    }
}
.site-branding, .site-header {
    @media (min-width: 75rem) {
        min-height: auto; 
    }
}
.commerce-order-item-add-to-cart-form input[type="submit"] {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 1px;
  /*box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3); /* Ombre portée de la couleur du bouton */
}
/* On peut aussi changer la police ici si besoin */
/* body {
  font-family: 'Inter', sans-serif;
} */
/* --- DESIGN DU PANIER --- */





/* --- DESIGN DES AVIS CLIENTS (COMMENTAIRES) --- */

/* Masquer la date et l'heure */
article.comment .comment__time {
  display: none !important;
}

/* Optionnel : Masquer le mot "Objet" et rendre le titre plus discret */
article.comment h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

/* Enlever les liens "Répondre" ou "Modifier" pour les visiteurs normaux */
article.comment ul.links {
  display: none;
}


/* 1. On positionne le lien parent en relatif */
.cart-block--link__expand {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 2. On isole l'icône si nécessaire */
.cart-block--summary__icon {
  display: inline-block;
}

/* 3. On transforme le compteur en pastille absolue */
.cart-block--summary__count {
  position: absolute;
  top: -3px;       /* Ajustez selon la hauteur désirée */
  right: -8px;     /* Ajustez selon la largeur désirée */
  
  /* Style de la pastille */
  background-color: #e02424; /* Couleur d'arrière-plan (ex: rouge) */
  color: #ffffff;            /* Couleur du chiffre */
  font-size: 11px;
  font-weight: bold;
  
  /* Création du cercle perfect ou ovale selon le nombre */
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  padding: 0 4px;
  
  /* Centrage parfait du chiffre à l'intérieur */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Optionnel : petite bordure pour détacher l'icône si le fond est sombre */
  border: 2px solid #ffffff; 
}




a {
  outline: none !important;
}


.cart-block--link__expand {
  margin-top: 5px;
  width: 20px;
}

/* .field--name-body {
 text-align: center; 
} */






#block-taxou-panier {
      display: flex;
    align-items: center;
        padding-right: 13px;
    padding-bottom: 3px;
}

.wrapper_badge,
.js-form-wrapper,
.views-field-nothing {
  text-align: center;
  
}
.badge-top {
  display: inline-block;
  background: #FAECE7;
  color: #993C1D;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  margin: 0 auto 1.2rem;
  letter-spacing: 0.03em;
  line-height: normal;
  font-family: var(--font-family-serif) !important;
  min-width: 350px;
}
h1 {
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  font-family: var(--font-family-serif) !important;
  font-optical-sizing: auto;
  margin-top: auto;
}
h1 span {
  color: #D85A30;
}
.hero-sub {
  font-size: 16px;
  line-height: 1.6;
  margin-block: 10px !important;
  word-break: auto-phrase !important;
}


.mascot-icon {
   align-items:center;
   background-color:rgb(250, 236, 231);
   border-radius:50%;
   box-sizing:border-box;
   display:flex;
   font-size:26px;
   height:52px;
   justify-content:center;
   margin:0px;
   padding:0px;
   width:52px;
   flex: none;
}
.mascot-icon img {
  width: 32px;
  height: auto;
}
.mascot-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.quote-bubble {
    background: #f5f4ed;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 380px;
    text-align: left;
    border: 0.5px solid #D5D4CE;
}
.quote-bubble span {
  font-weight: bold;
}

.view-bouton-achat-guide-simple .field--name-quantity {
  display:none;
}

.view-content {
    display: grid;
    gap: 0;
}
/* ---------------  CONTENU  --------------- */


.pain-grid {
  box-sizing:border-box;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  margin:0px;
  padding:0px;
}

.pain-card {
  align-items:flex-start;
  background-color:rgba(0, 0, 0, 0);
  border-image:none 100% / 1 / 0 stretch;
  border-radius:0px;
  border:2.4px none rgb(0, 0, 0);
  box-sizing:border-box;
  display:flex;
  gap:10px;
  margin:0px;
  padding:14px;
}
.pain-card p {
  box-sizing:border-box;
}

:root {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f4ed;
  --color-border-tertiary: #1f1e1d26;
  --color-text-secondary: #3d3d3a;
  --color--gray-45: #5f7581;
  --color--gray-90: #dce2e5;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
  --sp: 1.125rem;
  --sp1: calc(1 * var(--sp));
  --sp1-5: calc(1.5 * var(--sp));
  --sp2: calc(2 * var(--sp));
  --sp2-5: calc(2.5 * var(--sp));
}
h2, .views-field-comments-link {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700; 
  text-align: center; 
  margin-block: 0;
  color: #4a4a4a;
  margin-bottom: 1.8rem; 
}
  .pain, .proof, .objections { padding: 2rem 1.5rem; background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: 20px }
  /* .pain h2 { font-size: 20px; font-weight: 500; text-align: center; margin-bottom: 1.4rem; } */
  .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .pain-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 14px; display: flex; gap: 10px; align-items: flex-start; }
  .pain-icon { color: #D85A30; font-size: 20px; flex-shrink: 0; margin-top: 2px; }
  .pain-card p { font-size: 13px; line-height: 18px; color: var(--color-text-secondary); margin-block-end: 0; margin-block-start: 0; }
  
  .solution { padding: 2.5rem 1.5rem;}
 /* .solution {-webkit-text-stroke-width:0px;border-bottom-color:rgb(0, 0, 0);border-bottom-width:2.4px;box-sizing:border-box;color:rgb(0, 0, 0);font-family:"Times New Roman";font-size:medium;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:2.5rem 1.5rem;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;}*/ 
  p.section-label { font-size: 12px; font-weight: 700; color: #993C1D; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: .5rem; margin-block-end: 0; }
  /* .solution h2 { font-size: 22px; font-weight: 500; margin-bottom: .6rem; } */
  p.solution-sub { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 1.8rem; line-height: 1.6; margin-block-start: .5rem; }
  .solution h2 { text-align: left; margin-block-end: .5vw; }
  .feature-list { display: flex; flex-direction: column; gap: 12px; }
  .feature-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); background: var(--color-background-primary); }
  .feature-num { width: 28px; height: 28px; border-radius: 50%; background: #FAECE7; color: #993C1D; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .feature-content h3 { font-size: 14px; line-height: 18px; font-weight: 800; margin-bottom: 3px; margin-block-start: 0;margin-top: 5px;}
  .feature-content p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-block-start: 0; }

  /* .proof { padding: 2.5rem 1.5rem; background: var(--color-background-secondary); border-bottom: 0.5px solid var(--color-border-tertiary); } */
  /* .proof { -webkit-text-stroke-width:0px;background-color:rgba(0, 0, 0, 0);border-bottom-color:rgb(0, 0, 0);border-bottom-width:2.4px;box-sizing:border-box;color:rgb(0, 0, 0);font-family:"Times New Roman";font-size:medium;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:2.5rem 1.5rem;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px; }*/
  
  /* .proof h2 { font-size: 20px; font-weight: 500; text-align: center; margin-bottom: 1.4rem; } */
  .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1.4rem; }
  .stat-box { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 16px 10px; text-align: center; }
  .stat-num { font-size: 24px; font-weight: 800; color: #D85A30; }
  .stat-label { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; line-height: 18px;}
  .testimonials { display: flex; flex-direction: column; gap: 10px; display: none;}
  .testi { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 14px 16px; }
  .testi-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 8px; }
  .testi-author { display: flex; align-items: center; gap: 8px; }
  .avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
  .testi-name { font-size: 12px; font-weight: 500; }
  .testi-role { font-size: 11px; color: var(--color-text-tertiary); }
  .stars { color: #EF9F27; font-size: 12px; margin-left: auto; }

  .contents { padding: 2.5rem 1.5rem; }
  /* .contents { -webkit-text-stroke-width:0px;border-bottom-color:rgb(0, 0, 0);border-bottom-width:2.4px;box-sizing:border-box;color:rgb(0, 0, 0);font-family:"Times New Roman";font-size:medium;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:2.5rem 1.5rem;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px; } */
  /* .contents h2 { font-size: 20px; font-weight: 500; margin-bottom: 1.4rem; } */
  .chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
  .chapter { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); background: var(--color-background-primary); }
  .ch-icon { font-size: 16px; color: #0F6E56; flex-shrink: 0; margin-top: 1px; }
  .chapter p { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; margin-block-start: 0; margin-block-end: 0; hyphens: manual;}
  .chapter strong { color: var(--color-text-primary); font-weight: 800; font-size: 13px; display: block; margin-bottom: 2px; }

  /* .objections { padding: 2.5rem 1.5rem; background: var(--color-background-secondary); border-bottom: 0.5px solid var(--color-border-tertiary); } */
  /* .objections { -webkit-text-stroke-width:0px;background-color:rgba(0, 0, 0, 0);border-bottom-color:rgb(0, 0, 0);border-bottom-width:2.4px;box-sizing:border-box;color:rgb(0, 0, 0);font-family:"Times New Roman";font-size:medium;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:2.5rem 1.5rem;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px; } */
  /* .objections h2 { font-size: 20px; font-weight: 500; margin-bottom: 1.2rem; text-align: center; } */
  .faq-item { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); background: var(--color-background-primary); margin-bottom: 8px; overflow: hidden; }
  .faq-q { padding: 14px 16px; font-size: 14px; line-height: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
  .faq-q i { color: #D85A30; font-size: 16px; }
  .faq-a { padding: 0 16px 14px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 12px; margin: 0 16px; }

  .offer { padding: 2.5rem 1.5rem; border-bottom: 0.5px solid var(--color-border-tertiary); }
  /* .offer { -webkit-text-stroke-width:0px;border-bottom-color:rgb(0, 0, 0);border-bottom-width:2.4px;box-sizing:border-box;color:rgb(0, 0, 0);font-family:"Times New Roman";font-size:medium;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:2.5rem 1.5rem;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px; }*/
  
  /* .offer h2 { font-size: 20px; font-weight: 500; margin-bottom: 1.4rem; text-align: center; } */
  .price-card { border: 2px solid #D85A30; border-radius: var(--border-radius-lg); padding: 1.5rem 1rem; text-align: center; max-width: 380px; margin: 0 auto; background: var(--color-background-primary); }
  .price-badge { display: inline-block; background: #FAECE7; color: #993C1D; font-size: 11px; line-height: 13px; font-weight: 800; padding: 4px 12px; border-radius: 20px; margin-bottom: 1rem; }
  .price-title { font-size: 18px; line-height: 24px; font-weight: 800; margin-bottom: .5rem; padding: 0 40px; hyphens: manual; margin-block-start: 0 !important; margin-block-end: 20px !important }
  .price-num { font-size: 48px; font-weight: 800; color: #D85A30; line-height: 1;    display: flex;
    justify-content: center; }
  .price-num sup { font-size: 22px; vertical-align: top; margin-top: 10px; display: inline-block; }
  .price-desc { font-size: 13px; line-height: 18px; color: var(--color-text-secondary); margin: .5rem 0 1.4rem; hyphens: manual;}
  .included { list-style: none; text-align: left; margin-bottom: 1.6rem; }
  .included li { font-size: 13px; font-weight: 800; line-height: 18px; color: var(--color-text-secondary); padding: 6px 0; border-bottom: 0.5px solid var(--color-border-tertiary); display: flex; gap: 8px; align-items: flex-start; }
  .included li:last-child { border-bottom: none; }
  .check-icon { color: #1D9E75; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  .urgency { margin-top: 1rem; font-size: 12px; line-height: 15px; color: #993C1D; display: flex; align-items: center; gap: 6px; justify-content: center; }

  .final-cta button { display: none; }
  /* .final-cta { -webkit-text-stroke-width:0px;box-sizing:border-box;color:rgb(0, 0, 0);font-family:"Times New Roman";font-size:medium;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:3rem 1.5rem;text-align:center;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px; } */
  /* .final-cta h2 { font-size: 22px; font-weight: 500; margin-bottom: .8rem; } */
  .final-cta p { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 1.8rem; line-height: 1.6; }
  .final-cta p:nth-child(2) { max-width: 600px; margin: 0 auto;}
  
  .guarantee { display: flex; align-items: center; gap: 10px; background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 12px 16px; max-width: 380px; margin: 1.4rem auto 0; text-align: left; }
  .guarantee i { color: #1D9E75; font-size: 22px; flex-shrink: 0; }
  .guarantee p { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin-block-start: 0; }
  .guarantee strong { color: var(--color-text-primary); }

  @media (max-width: 480px) {
   /* .hero h1 { font-size: 26px; }
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .stat-num { font-size: 20px; }
    .price-num { font-size: 38px; }*/
  }
  @media (max-width: 400px) { 
    .stats-row { 
      display: flex;
      flex-direction: column;
    }
   }
  @media (max-width: 600px) {
  .ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items {
    flex-wrap: wrap !important 
  }
}


.site-footer {
    & .menu {
        & li {
            margin-block-end: var(--sp0-5);
            display: inline-block;
            padding: 0 10px;
        }
    }
}
.site-footer {
    & .menu {
        text-align: center;
    }
}
.region > :where(:not([data-big-pipe-placeholder-id])) {
    @media (min-width: 62.5rem) {
        margin-block-end: 0;
    }
}
.site-footer__inner {
    @media (min-width: 75rem) {
        padding-block: var(--sp4) var(--sp1);
        padding-block-start: calc(4.5rem);
        padding-block-end: calc(14.625rem);
    }
}
.view-bouton-achat-guide-simple .field--name-quantity {
	display:none;
}

#views-form-commerce-cart-form-default-100 td {
	vertical-align : bottom;
}

#views-form-commerce-cart-form-default-100 td .form-item,
#views-form-commerce-cart-form-default-100 td .form-submit {
	margin : 0;
}
.view-bouton-achat-guide-simple .views-field-nothing .field-content {
  font-size: 12px;
  color: #73726c;
}

.view-bouton-achat-guide-simple .form-actions input,
.view-bouton-achat-guide .form-actions input,
.cta-main {
background-color: rgb(216, 90, 48);
    border-image: initial;
    border-radius: 40px;
    border: medium none currentcolor;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    margin: 0 auto;
    padding: 14px 36px;
    text-decoration: none;
    transition: opacity 0.15s;
    width: 250px;
    }
.view-bouton-achat-guide,
.commerce-order-item-add-to-cart-form > *,
.layout--onecol .views-field-nothing {
  text-align: left !important;
}
.layout--onecol .views-field-nothing {
  padding: 20px 0;
  margin: 0 auto;
  width: 250px;
}
.form-item-quantity-0-value {
  margin-block-start: 0;
}
.view-bouton-achat-guide .form-actions input {
  margin: 0;
}
.view-bouton-achat-guide .views-field-variations-target-id {
  max-width: 280px;
  margin: 0 auto;
}
.view-bouton-achat-guide .views-field-variations-target-id .js-form-wrapper {
  width: 250px;
    margin: 0 auto;
}
.view-bouton-achat-guide .views-field-variations-target-id .js-form-wrapper input {
  width: 100%;
}

.views-field-nothing {
  font-size: 12px; line-height: 15px;
  max-width: 280px;
  margin: 0 auto;
}
.views-field-field-avis-client .js-form-wrapper {
  text-align: left;
}
.form-actions {
    gap: 20px;
    display: flex;
    justify-content: center;
  }

  .cta-main {
  color: #fff !important;
    box-shadow: none !important;
    width: 260px;
}

.layout-region-checkout-main .js-form-wrappee,
.commerce-checkout-flow-multistep-default .js-form-wrapper {
  text-align: left;
  margin-block: var(--sp1);
}
/* .checkout-pane-payment-information .js-form-wrapper {
      
} */
.view-commerce-cart-form form table td .button, 
.view-commerce-cart-form form table tr .form-item {
  margin-block: 0;
}
.fieldset__legend {
  font-size: 16px;
}

/* Si le panier contient un élément, on ajoute un indicateur au bouton burger */
.cart-not-empty + .navbar-toggler::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  border: 2px solid white;
}


.views-field-nothing-1 .prix {
  text-align: center;
  color: #D85A30;
  font-size: 42px;
  line-height: normal;
  font-weight: 800;
  width: 100%;
}
.views-field-nothing-1 .prix sup {
  font-size: 20px;
}

.form-wrapper__login-option input.button {
  width: 100%;
  padding-inline: 0;
}



.block-layout-builder:not(:last-child) .field--name-body {
    margin-block-end: var(--sp1);
}




.node__content {
    @media (min-width: 62.5rem) {
        padding-block-end: 0;
    }
}
.region--content {
    @media (min-width: 62.5rem) {
        margin-block-end: 0;
    }
}
.layout--content-medium, .layout--pass--content-medium > * { 
  @media (max-width: 1024px) {
        grid-column: 2 / 14;
    }
  @media (max-width: 699px) {
        grid-column: 1 / 7;
    } 
}
.main-content__container {
    @media (max-width: 1024px) {
        padding-block-start: var(--sp3);
    }
}
@media (max-width: 1200px)  {
  #block-taxou-panier {
      align-items: flex-end;
  }
}
@media (max-width: 1024px)  {
  .site-branding__name{
    font-size: 1.5rem;
    line-height: 1.7rem;
  }

  h1 {
    font-size: 30px;
    white-space: normal !important;
    word-break: auto-phrase;
  }
  .badge-top {
    min-width: auto !important;
    word-break: auto-phrase;
  }
  .badge-top .dnone {
    display: none;
  }
  .badge-top span {
    display: block;
  }
}
.layout--twocol-section--50-50 {
        --layout-twocol-grid: repeat(2, minmax(0, 1fr)) !important;
    }
@media (max-width: 779px)  {
.form-actions .button {
  margin-block-start: 0;
    margin-inline-end: 0;
}
}
@media (max-width: 700px)  {
    .site-branding__name {
        font-size: 3.8vw;
        line-height: 4vw;
    }
    h1 {
    margin-bottom: 0;}
  h1,h2, .views-field-comments-link {
    font-size: 5vw;
    line-height: 6vw;
            hyphens: manual;
  }
  h2, .views-field-comments-link {
    margin-bottom: 1rem;
  }
  .hero-sub {
    font-size: 2.5vw;
    line-height: 1.3;
  }
  .badge-top {
    margin-bottom: 10px;
    font-size: 2.2vw;
  }
  .quote-bubble {
    font-size: 1.9vw;
    padding: 8px;
  }
  .text-content, .cke_editable {
    & p.hero-sub {
        margin-block-start: 1rem;
        margin-block-end: 10px;
        margin-top: 10px !important;
    }
  }
  .main-content__container {
        padding-block-start: var(--sp2);
  }
  .view-bouton-achat-guide-simple .form-actions input {
    font-size: 12px;
    width: 90%;
    padding: 7px 16px;
    height: var(--sp2);
  }
  .view-bouton-achat-guide-simple .views-field-nothing .field-content {
    padding-top: 8px;
    font-size: 9px;
    line-height: 1.2;
    display: block;
  }
  
  .wrapper_badge,
  .js-form-wrapper,
  .views-field-nothing {
    text-align: center;
        padding: 0;
      margin: 0;
  }
  .layout {
      margin-block-end: var(--sp2);
  }
  .block-layout-builder:not(:last-child) .field {
      margin-block-end: var(--sp1);
  }
  .view-bouton-achat-guide-simple .form-actions input {
      font-size: 13px;
      padding: 2vw 6px;
      height: auto;
  }
  .mascot-row {
    gap: 8px;
  }
  .mascot-icon {
    width: 30px;
    height: 30px;
  }
  .mascot-icon img {
    width: 24px;
  }
  .view-commerce-cart-form .js-form-wrapper {
    margin-block: 20px;
  }
  .layout--onecol .views-field-nothing {
    padding: 20px 0;
    margin: 0 auto;
  }
}

@media (max-width: 550px) { 
      .view-commerce-cart-form form table {
  display: flex;
  }
  .view-commerce-cart-form form table th,
  .view-commerce-cart-form form table td {
    border-block-end: 1px solid var(--color--gray-90) !important;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .view-commerce-cart-form form table td {
  justify-content: flex-end;
}
  .view-commerce-cart-form form table th::after {
    content: ":";
  }
  .view-commerce-cart-form form table > tbody {
    flex: 1 1;
  }
  .view-commerce-cart-form form table > *:last-child {
    text-align: right;
  }
  .view-commerce-cart-form form table tr {
    display: flex;
  flex-direction: column;
  }
   .view-commerce-cart-form form table td { 
    padding-block: 0;
   }
   
.view-commerce-cart-form form table td .button {
    margin-block: 0;
    margin-inline-end: 0;
}
.form-actions {
  margin-block: var(--sp1);
  justify-content: flex-end;
  margin-inline-end: 0;
}
.commerce-order-item-add-to-cart-form .form-actions {
   margin-block: 0;
   margin-inline-start: 0;
            justify-content: center;
            margin-inline: 0;
            margin: 0 auto;
  }

}
@media (max-width: 500px) { 
 #edit-actions-next {
  width: 100%;
    white-space: normal;
    hyphens: none;
    font-size: 16px;
    line-height: 18px;

 }
}
@media (max-width: 400px) {
    .main-content__container {
        padding-block-start: var(--sp1);
    }
    .block-layout-builder:not(:last-child) .field {
        margin-block-end: 10px;
    }
      .view-bouton-achat-guide-simple .views-field-nothing .field-content {
    font-size: 8px;
    line-height: 1.2;
    display: block;
  }
  .badge-top {
    margin-top: 6px;
    padding: 4px 8px;
  }
    .text-content, .cke_editable {
        & p.hero-sub {
            margin-block-start: 5px;
            margin-block-end: 5px;
            margin-top: 5px !important;
        }
    }
      .view-bouton-achat-guide-simple .form-actions input {
      font-size: 10px;
      margin-block: 0;
            margin-inline-start: 0;
    }
      .included {
        margin-inline: 0px 0px
      } 
      .price-title {
        width: 200px;
        margin: 0 auto;
        padding: 0;
      }
      .cta-main {
        width: 100%;
      }

}
 .price-tag {
  display: inline-flex;
  align-items: center; /* Aligne le bloc prix et le badge sur la même ligne */
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.price-tag:hover {
  transform: scale(1.03);
}

/* On superpose l'ancien et le nouveau prix */
.price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligne les prix à gauche */
  line-height: 1.1; /* Resserre l'espace vertical entre les deux prix */
}

/* L'ancien prix au-dessus, plus petit */
.old-price {
  color: #888;
  text-decoration: line-through;
  font-size: 0.8rem; /* Plus petit pour l'effet exposant */
  margin-bottom: 2px; /* Un tout petit espace avant le prix promo */
}

/* Le prix promo en évidence */
.new-price {
  color: #D85A30;
  font-weight: 800;
  font-size: 2.5rem; /* Un peu plus grand pour accentuer le contraste */
}
@media (max-width: 500px) {
 .layout--twocol-section--50-50 .new-price {
  font-size: 1.5rem;
  padding-bottom: 10px;
}
}
/* Le badge de réduction à droite */
.discount-badge {
  background-color: #D85A30;
  color: white;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  animation: pulse 2s infinite;
}
.price-tag p {
  margin-block-start: 0;
  display: flex;
            margin-block-end: 0;
}
.prix td {
  display: flex;
    justify-content: center;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(222, 74, 15, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}