.wp-block-post-content{
  margin: 20px 30px;
}

.center_button{
  display: flex;
  justify-content: center;
}

.welcome-comment details{
  border-radius: 12px;
}

.welcome-comment details summary{
  list-style: none;
  width: 736px;
}

.welcome-faq details summary{
  list-style: none;
}

/* --- Tailles de titres responsive (clamp) --- */
.titre-section{
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1.15;
}

/* --- Style H2 responsive --- */
.titre-type-h2{
  font-size: clamp(22px, 3.5vw, 28px);
  line-height: 1.3;
}

/* --- Style H3 responsive --- */
.titre-type-h3{
  font-size: clamp(18px, 3.5vw, 24px);
  line-height: 1.3;
}

/* --- Style H3 responsive --- */
.titre-type-h4{
  font-size: clamp(14px, 3.5vw, 20px);
  line-height: 1.3;
}


/* ######################################################################################################### */
/* ============================================= PAGE SERVICE ============================================== */
/* ######################################################################################################### */

/* --- Ajuste la largeur de la colonne texte "nos services sont conçus..." --- */
.paragraphe-check-orange img{
  vertical-align: middle;
  margin-right: 0.5em;
  margin-left: 16px;
}

/* --- Construit un conteneur centré et lisible (largeur + padding responsive) --- */
.section-contenu-services{
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);

}

.section-contenu-services p{
    max-width: calc(100% - clamp(10px, 6vw, 60px));
    margin-left: 0 !important;
    margin-right: auto !important;
  }

.section-gestion-integree{
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Limite la largeur du titre et le centre (texte blanc) */
.section-gestion-integree .wp-block-heading{
  max-width: 600px;
  margin: 0 auto 12px;
  color: #fff;
}

.section-gestion-integree p{
  max-width: 700px;
  margin: 0 auto;
  color: #fff;
  line-height: 1.6;
}

/* --- Mise en forme du bloc Colonnes "Gestion intégrée" en desktop (bordure + layout) --- */
.wp-block-columns.cols-gestion-integree{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 28px;
  margin: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 60px;
}

.wp-block-columns.cols-gestion-integree::before,
.wp-block-columns.cols-gestion-integree::after{
  border-radius: 18px !important;
}

/* Neutralise les marges/paddings par défaut des colonnes Gutenberg */
.wp-block-columns.cols-gestion-integree > .wp-block-column{
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

/* Fixe la largeur de la colonne image (1ère) + ajoute un padding interne */
.wp-block-columns.cols-gestion-integree > .wp-block-column:first-child{
  flex: 0 0 35%;
  padding-left: 28px !important;
}

.wp-block-columns.cols-gestion-integree > .wp-block-column:last-child{
  padding-right: 230px !important;
}

.wp-block-columns.cols-gestion-integree .wp-block-image,
.wp-block-columns.cols-gestion-integree figure{
  margin: 0 !important;
  width: 100% !important;
}

/* --- Rend l'image responsive + arrondie --- */
.wp-block-columns.cols-gestion-integree img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.wp-block-columns.cols-gestion-integree p{
  color: #fff;
  margin: 0;
  line-height: 1.6;
}
.wp-block-columns.cols-gestion-integree p + p{ margin-top: 10px; }

/* --- Variante desktop "inverse" (texte à gauche / image à droite) --- */
.wp-block-columns.cols-gestion-integree--reverse{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 28px;
  margin: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 250px;
}

.wp-block-columns.cols-gestion-integree--reverse::before,
.wp-block-columns.cols-gestion-integree--reverse::after{
  border-radius: 18px !important;
}

/* Reset Gutenberg sur les colonnes */
.wp-block-columns.cols-gestion-integree--reverse > .wp-block-column{
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

/* Ajoute un padding interne côté texte (1ère colonne) */
.wp-block-columns.cols-gestion-integree--reverse > .wp-block-column:first-child{
  padding-left: 28px !important;
}

/* Fixe la largeur de l’image (dernière colonne) + padding interne */
.wp-block-columns.cols-gestion-integree--reverse > .wp-block-column:last-child{
  flex: 0 0 35%;
  padding-right: 28px !important;
}

.wp-block-columns.cols-gestion-integree--reverse .wp-block-image,
.wp-block-columns.cols-gestion-integree--reverse figure{
  margin: 0 !important;
  width: 100% !important;
}

/* --- Image responsive --- */
.wp-block-columns.cols-gestion-integree--reverse img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.wp-block-columns.cols-gestion-integree--reverse p{
  color: #fff;
  margin: 0;
  line-height: 1.6;
}
.wp-block-columns.cols-gestion-integree--reverse p + p{ margin-top: 10px; }

.wrapper-fond-noir-1{
  position: relative;
  overflow: visible;
}

.wrapper-fond-noir-1::before{
  content:"";
  position: absolute;
  top: 17.5%;
  bottom: 0;
  left: 0;
  right: 0;

  margin-inline: -30px;

  background: #333;
  z-index: 0;
}

.wrapper-fond-noir-1 > *{
  position: relative;
  z-index: 1;
}

.wrapper-fond-noir-bas{
  position: relative;
  overflow: hidden;
}

.wrapper-fond-noir-bas::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 30%);
  background-color: #333;
  border-radius: 15px;
  z-index: 0;
}

.wrapper-fond-noir-bas > *{
  position: relative;
  z-index: 1;
}

.ma-step{
  --icon: 56px;
  --overlap: calc(var(--icon) / 2);
  --padY: 13px;
  --padR: 26px;

  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  --step-number: "01";
}

.ma-step > .wp-block-group,
.ma-step > .wp-block-columns,
.ma-step > .wp-block-group.is-layout-flex{
  display: flex;
  align-items: center;
  gap: 14px;
}

.ma-step .wp-block-image{
  width: var(--icon) !important;
  height: var(--icon) !important;
  flex: 0 0 var(--icon);
  margin: 0 !important;
}
.ma-step .wp-block-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Normalise le texte des steps (pas de marges Gutenberg) */
.ma-step p{
  margin: 0;
  line-height: 1.35 !important;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  max-width: 180px;
  font-weight: 100;
}

.ma-step::before{
  content: "";
  position: absolute;
  top: calc(-1 * var(--padY));
  bottom: calc(-1 * var(--padY));
  left: var(--overlap);
  right: 0;

  background: #f6f6f6;
  border: 1px dashed #dfdfdf;
  border-radius: 8px;
  z-index: 0;
}

.ma-step > *{
  position: relative;
  z-index: 1;
}

.step-01{ --step-number: "01"; }
.step-02{ --step-number: "02"; }
.step-03{ --step-number: "03"; }

.ma-step::after{
  content: var(--step-number);
  position: absolute;
  top: 1px;
  right: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #9cff00;
  z-index: 2;
  transform: translateY(-6px);
}

/* Limite la largeur des contenus dans la colonne “gestion intelligente” */
.wp-block-column.conteneur-gestion-intelligente > *{
  max-width: 540px;
  width: 100%;
  margin-right: auto;
}

/* --- Style du bouton "Contact service" (texte + icône) --- */
.btn-ContactService a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-40px);
}

/* --- Ajuste l'espace entre cartes de la grille "features" --- */
.feature-grid.is-layout-grid{ gap: 32px !important; }

/* --- Carte feature : fond, padding, arrondi, ombre --- */
.feature-card{
  background: #fff;
  padding: 22px 24px;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  height: 100%;
}

/* --- Supprime la marge du premier élément dans la carte --- */
.feature-card > :first-child{ margin-top: 0 !important; }

/* --- Header de carte : aligne icône + titre sur une ligne --- */
.feature-card__header{
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  padding: 0 !important;
  margin: 0 !important;
}

.feature-card__header > *{ margin: 0 !important; }

/* --- Style du titre dans la carte --- */
.feature-card .wp-block-heading{
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  color: #2b2b2b;
  margin: 0 !important;
}

/* Ajoute un padding droit au titre pour l’équilibre visuel */
.feature-card__header .wp-block-heading{
  padding-right: 50px;
  margin: 0 !important;
}

/* --- Zone icône de la carte --- */
.feature-card__icon-img{ flex: 0 0 auto; }

/* --- Icône responsive dans la carte --- */
.feature-card__icon-img img{
  width: 65px;
  height: 65px;
  object-fit: contain;
  display: block;
}

/* --- Texte de la carte : gestion des marges et lisibilité --- */
.feature-card p{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  line-height: 1.55;
  color: #1f1f1f;
}

/* Badge “livraison” : rangée centrée avec bordure pointillée */
.badge-livraison{
  display: flex;
  align-items: center;
  gap: 14px;

  max-width: 550px;
  margin: 0 auto;

  padding: 5px !important;

  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 16px;
  box-sizing: border-box;
}

/* Fixe la taille de l’icône du badge */
.badge-livraison .wp-block-image{
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px;
}

/* Image du badge : contient bien dans la case */
.badge-livraison .wp-block-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Texte du badge : sans marges Gutenberg */
.badge-livraison p{
  margin: 0;
  line-height: 1.5;
}


/* --- Wrapper "processus" : fond blanc + bordure pointillée + padding --- */
.processus-wrapper{
  background: #fff;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 20px;

  padding: 48px 40px !important;
  box-sizing: border-box;
}

/* Badge highlight : fond vert + alignement icône/texte */
.badge-highlight{
  display: flex;
  align-items: center;
  gap: 14px;

  max-width: 550px;
  margin: 0 auto;

  background: #b7ff00;
  padding: 8px;

  border-radius: 10px;
  box-sizing: border-box;
}

/* Icône du badge highlight */
.badge-highlight .wp-block-image{ flex: 0 0 auto; }

/* Taille fixe de l’icône */
.badge-highlight img{
  display: block;
  width: 60px !important;
  height: 60px !important;
}

/* Texte du badge highlight */
.badge-highlight p{
  margin: 0;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

@media (max-width: 900px){
  /* --- En petit mobile : padding + hyphens pour éviter les débordements --- */
  .badge-highlight{
    max-width: 100%;
    padding: 14px 16px;
    gap: 12px;
  }

  .badge-highlight p{
    font-size: 14px;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }

/* --- Mobile : empile titre + paragraphe et centre le texte --- */
  .titre-parag-inline{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

/* --- En petit mobile : badge plus large et plus "respirant" --- */
    .badge-livraison{
    max-width: 92%;
    padding: 14px !important;
    gap: 12px;
  }

  .badge-livraison img{ width: 40px; }

  /* --- Helpers mobile : spacer réduit / spacer caché / reset marges --- */
  .spacer-half-mobile{ height: clamp(12px, 4vw, 40px) !important; }
  .hide-spacer-mobile{ display: none; }
  .no-margin-mobile{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --- En mobile : bouton centré et moins "décalé" --- */
  .btn-ContactService a{
    display: block;
    max-width: calc(100% - 20px);
    margin-inline: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    transform: none;
  }

  .btn-ContactService a img{
    max-width: 20px;
    height: auto;
  }

  /* --- Ajuste la taille d'icône en mobile --- */
  .ma-step{
    --icon: 48px;
    --padY: 14px;
  }

  /* --- En mobile : enlève un padding spécifique sur une section "processus" --- */
  .processus-padding{ padding: 0 !important; }

  /* --- En mobile : fond plein + plus petit padding latéral --- */
  .wrapper-fond-noir-bas::before{
    left: 0;
    right: 0;
    height: 100%;
  }

  /* --- Ajuste la position du fond en mobile --- */
  .wrapper-fond-noir-1::before{ top: 11%; }
  
  /* --- Version mobile du bloc colonnes "col-gestion-int-mobile" (stack en colonne) --- */
  body .wp-block-columns.col-gestion-int-mobile{
    padding: 20px !important;
    border-radius: 14px !important;
    gap: 16px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Réinitialise la structure des colonnes pour éviter les styles du thème */

  body .wp-block-columns.col-gestion-int-mobile > .wp-block-column{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .wp-block-columns.col-gestion-int-mobile p{
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
  }

  /* --- Image responsive et pleine largeur --- */

  body .wp-block-columns.col-gestion-int-mobile img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* --- En mobile : enlève les paddings latéraux et force plein largeur --- */
  .section-gestion-integree{ padding-inline: 0; }

  .section-gestion-integree .wp-block-heading,
  .section-gestion-integree p{
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
    text-align: center;
  }

  /* --- Supprime le décalage gauche de l'icône en mobile --- */
  .paragraphe-check-orange img{ margin-left: 0; }

  /* --- Renforce la suppression des marges/paddings en mobile (anti-styles thème WP) --- */
  body .wp-block-columns.cols-gestion-integree,
  body .wp-block-columns.col-gestion-int-mobile{
    margin: 0 !important;
    margin-block: 0 !important;
  }

  body .wp-block-columns.cols-gestion-integree > .wp-block-column,
  body .wp-block-columns.col-gestion-int-mobile > .wp-block-column{
    margin: 0 !important;
    padding: 0 !important;
  }

  body .wp-block-columns.cols-gestion-integree > .wp-block-column:first-child,
  body .wp-block-columns.cols-gestion-integree > .wp-block-column:last-child,
  body .wp-block-columns.col-gestion-int-mobile > .wp-block-column:first-child,
  body .wp-block-columns.col-gestion-int-mobile > .wp-block-column:last-child{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .wp-block-columns.col-gestion-int-mobile figure,
  body .wp-block-columns.col-gestion-int-mobile .wp-block-image{
    margin: 0 !important;
  }

  .ma-step{
    --icon: 52px;
    --padY: 14px;
  }
}

@media (min-width: 901px){
  /* --- Desktop : met titre + paragraphe sur une ligne (layout horizontal) --- */
  .titre-parag-inline{
    display: flex;
    align-items: center;
  }

  .titre-parag-inline p{
    padding-left: 300px;
    padding-right: 100px;
  }

  /* --- Centre certains titres/paragraphe en desktop (largeur max) --- */
  body .titre-h2-marge-centre{
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
  }

  body .petit-titre-parcourir{
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
  }

  body .paragraphe-marge-centre{
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
  }

  .col-texte-nos-services{
    flex: 0 0 calc(100% - 150px);
    max-width: calc(100% - 150px);
  }
}


/* ######################################################################################################### */
/* =========================================== PAGE WELCOME PACK =========================================== */
/* ######################################################################################################### */

@media (min-width: 901px){
  .wp-block-column.section-contenu-welcome-pack{
    display: flex;
    flex-direction: column;
  }

  /* TITRES : grande marge invisible à droite (tes valeurs) */

  .wp-block-column.section-contenu-welcome-pack .wp-block-heading{
    max-width: calc(100% - clamp(120px, 10vw, 320px));
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .wp-block-column.section-contenu-welcome-pack p{
    max-width: calc(100% - clamp(10px, 6vw, 90px));
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* --- Style du bouton "Demander un devis" (texte + icône) --- */

.btn-demande-devis a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-10px);
}

/* --- En mobile : bouton centré et moins "décalé" --- */

@media (max-width: 900px){

  .btn-demande-devis a{
    display: flex;
    align-items: center;
    margin-inline: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
  }

  .btn-demande-devis a img{
    max-width: 24px;
    height: auto;
  }
}

/* --- Mobile : centre le bloc "Boutons" --- */

@media (max-width: 900px){
  .btn-demande-devis-centre{
    justify-content: center !important;
  }
}

@media (max-width: 900px){
  .colonne-swap-mobile{
    flex-direction: column;
  }

  /* Colonne 1 (texte) → après */

  .colonne-swap-mobile > .wp-block-column:first-child{
    order: 2;
  }

  /* Colonne 2 (image) → avant */

  .colonne-swap-mobile > .wp-block-column:last-child{
    order: 1;
  }
}

@media (min-width: 769px){
  .hide-spacer-desktop{
    display: none;
  }
}

@media (min-width: 901px){
  .centrer-paragraphe-padd{
    max-width: 700px;
    margin-inline: auto;
    padding-inline: 25px;
    box-sizing: border-box;
    text-align: center;
  }
}

.tableau-colonnes-welcome{
  gap: 45px;
}

/* Colonnes du tableau Welcome */

.tableau-colonnes-welcome > .wp-block-column{
  background-color: #ffffff;
  border-radius: 16px;
  padding: 15px;
  box-sizing: border-box;
  text-align: left;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Image des colonnes Welcome : bordure + arrondi */

.tableau-colonnes-welcome .wp-block-image img{
  border: 1px dashed #cfcfcf;
  border-radius: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media (max-width: 900px){
  .tableau-colonnes-welcome{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .tableau-colonnes-welcome > .wp-block-column{
    width: auto !important;
    margin: 0 !important;
  }
}

/* Rangée : espace entre les 2 cartes */

.cartes-welcome-grid{
  max-width: 1100px;
  margin-inline: auto;
}

/* --- Carte : conteneur --- */

.carte-welcome{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 16px;
  max-width: 600px;
  margin-inline: auto;
}

.carte-welcome .wp-block-image{
  position: absolute;
  inset: 0;
  margin: 0 !important;
}

.carte-welcome .wp-block-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carte-welcome::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%);
  z-index: 1;
}

.carte-welcome > :not(.wp-block-image){
  position: relative;
  z-index: 2;
  color: #fff;
}

.carte-welcome p{
  margin: 0;
  color: #fff;
}

/* 1er paragraphe = "titre" */

.carte-welcome p:first-of-type{
  font-weight: 700;
  font-size: 18px;

}

.carte-welcome p:nth-of-type(2){
  font-size: 13px;
  line-height: 1.45;
  opacity: .9;
  padding: 8px 20px 0;
}

.carte-welcome::after{
  content: var(--num, "01");
  position: absolute;
  top: 14px;
  right: 16px;
  font-weight: 800;
  font-size: 26px;
  color: #b7ff00;
  z-index: 3;
}

.carte-01{ --num: "01"; }
.carte-02{ --num: "02"; }
.carte-03{ --num: "03"; }
.carte-04{ --num: "04"; }

/* --- Responsive : hauteur image plus petite --- */

@media (max-width: 900px){
  .cartes-welcome-grid{
    gap: 14px;
  }

  .carte-welcome p:first-of-type{

    font-size: 16px;
  }
}

/* --- Hauteur desktop --- */

@media (min-width: 901px){
  .carte-welcome{ height: 320px; }
}

/* --- Hauteur mobile --- */

@media (max-width: 900px){
  .carte-welcome{ height: 260px; }
}

.carte-welcome p:first-of-type{
  padding-left: 20px !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}

/* --- GRILLE (3 cartes) --- */

.cartes-offres-grid{
  gap: 22px;                 /* espace entre cartes */

  align-items: stretch;
}

/* --- CARTE (wrapper) --- */

.carte-offre{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  overflow: hidden;

  padding: 18px 18px 16px;
  box-sizing: border-box;

  display: flex;             /* --- permet de coller le bouton en bas --- */

  flex-direction: column;
  height: 100%;
}

.carte-offre .wp-block-image{
  margin: 0 0 14px 0 !important;
}

.carte-offre .wp-block-image img{
  display: block;
  width: 100%;
  height: 250px;             /* --- hauteur image (desktop) --- */

  object-fit: cover;
  border-radius: 12px;
}

/* TITRE / INTRO */

.carte-offre h3,
.carte-offre .wp-block-heading{
  margin: 0 0 8px 0 !important;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: #1a1a1a;
}

.carte-offre p{
  justify-content: left;
  margin: 0;
  color: #444;
  line-height: 1.45;
  font-size: 13px;
}

/* Force tout le contenu des cartes à gauche (même si Gutenberg a mis has-text-align-center) */

.carte-offre,
.carte-offre :where(p, h1, h2, h3, h4, h5, h6, .wp-block-group, .wp-block-paragraph){
  text-align: left !important;
}

.carte-offre .has-text-align-center{
  text-align: left !important;
}

/* --- Si un wrapper Gutenberg centre les blocs via flex --- */

.carte-offre :where(.is-layout-flex){
  align-items: flex-start !important;
}

.carte-offre .wp-block-buttons{
  justify-content: center !important;
  text-align: center !important;
}

/* petit espace sous l’intro (le 1er paragraphe après le titre) */

.carte-offre .wp-block-heading + p{
  margin-top: 2px;
  margin-bottom: 12px;
}

.carte-offre__points-verts{
  background: #b7ff00;
  border-radius: 10px;
  padding: 12px 12px;
  margin: 10px 0 14px;
  width: 100%;
}

.carte-offre__points-verts p{
  margin: 0;
  font-size: 12.5px;
  color: #111;
  line-height: 1.35;
}

.carte-offre__points-verts p + p{
  margin-top: 8px;
}

.carte-offre__points-verts .wp-block-group,
.carte-offre__points-verts .wp-block-columns,
.carte-offre__points-verts p{
  display: flex;
  align-items: center; /* ← CLÉ : centre verticalement */

  gap: 10px;
}

.carte-offre__points-gris{
  margin-top: 8px;
}

.carte-offre__points-gris p{
  margin: 0;
  font-size: 12.5px;
  color: #333;
  line-height: 1.35;
}

.carte-offre__points-gris p + p{
  margin-top: 10px;
}

.carte-offre__points-gris p{
  font-weight: 600;
  font-size: 14px;
}
.carte-offre__points-gris p span,
.carte-offre__points-gris strong{
  font-weight: 800;
}

/* Ligne = 2 colonnes (numéro / texte) */

.carte-offre__points-gris .point-ligne{
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 10px;
  align-items: start;
  margin: 0 0 14px 0;
}

.carte-offre__points-gris .point-num{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: #2b2b2b;
  font-family: "Inter", sans-serif;

}

.carte-offre__points-gris .point-texte{
  margin: 0;
}

/* Titre */

.carte-offre__points-gris .point-titre{
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.25;
}

.carte-offre__points-gris .point-sub{
  margin: 6px 0 0;
  font-weight: 400;
  font-size: 13px;
  color: #777;
  line-height: 1;
}

/* --- BOUTON EN BAS --- */

/* --- Pousse le bloc boutons tout en bas de la carte --- */

.carte-offre .wp-block-buttons,
.carte-offre__cta{
  margin-top: auto !important;
  display: inline-flex;
  justify-content: center !important;
  padding-top: 6px;
}

/* --- Style du bouton (si besoin) --- */

.carte-offre .wp-block-button__link{
  border-radius: 999px;
  padding: 10px 16px;
}

/* --- Le wrapper "Boutons" doit occuper 100% de la carte pour pouvoir centrer --- */

.carte-offre .wp-block-buttons{
  width: 100% !important;
}

/* --- Centre le(s) bouton(s) à l'intérieur --- */

.carte-offre .wp-block-buttons{
  display: flex !important;
  justify-content: center !important;
}

/* --- MOBILE --- */

@media (max-width: 900px){
  /* --- 1 carte par ligne (plus lisible) --- */

  .cartes-offres-grid{
    flex-direction: column;
    gap: 16px;
  }

  .carte-offre{
    padding: 16px 16px 14px;
  }

  .carte-offre .wp-block-image img{
    height: 160px;
  }
}

/* --- WRAPPER global (cadre blanc) Classe sur le Groupe parent : welcome-pack-contenu --- */

.welcome-pack-contenu{
  background: #fff;
  border: 0.5px dashed rgba(0,0,0,0.18);
  border-radius: 18px;
  padding: 48px 48px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
  box-sizing: border-box;
}

/* Titre + sous-titre centrés */

.welcome-pack-contenu .wp-block-heading{
  text-align: center;
  margin: 0 0 10px 0;
}

.welcome-pack-contenu > p{
  display: flex;
  text-align: center;
  margin: 0 auto 34px auto;
  max-width: 820px;
  color: #555;
  align-items: center;
}

/* COLONNES (4) Classe sur le bloc Colonnes : welcome-pack-4cols */

.welcome-pack-4cols{
  gap: 34px;
  align-items: start;
}

/* --- COLONNE (carte interne) Classe sur le Groupe dans chaque colonne : welcome-pack-col --- */

.welcome-pack-col{
  text-align: left;
}

.welcome-pack-col .wp-block-image{
  margin: 0 0 14px 0 !important;
}

.welcome-pack-col .wp-block-image img{
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

/* Titre de colonne */

.welcome-pack-col .wp-block-heading{
  text-align: left;         /* annule le centrage du titre global */

  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px 0 !important;
  color: #111;
}

.welcome-pack-col p{
  margin: 0;
  font-size: 13px;
  color: #333;
  line-height: 1.45;
}

.welcome-pack-col p{
  display: flex;
  align-items: center; /* ← CLÉ : centre verticalement */

  gap: 10px;
}

.welcome-pack-col p + p{
  margin-top: 10px;
}

/* --- RESPONSIVE --- */

@media (max-width: 900px){
  .welcome-pack-contenu{
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .welcome-pack-4cols{
    gap: 18px;
  }

  .welcome-pack-col .wp-block-image img{
    width: 48px;
    height: 48px;
  }

}

@media (max-width: 900px){
  /* --- Mobile : image + titre sur la même ligne, à gauche --- */

  .welcome-pack-col__head{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 12px;
    gap: 10px;
  }

  .welcome-pack-col__head .wp-block-image,
  .welcome-pack-col__head .wp-block-heading{
    margin: 0 !important;
  }

  .welcome-pack-col__head .wp-block-image{
    flex: 0 0 auto;
  }
}

/* BLOC 2 COLONNES (image + contenu) Classe sur Colonnes : bloc-unboxing */

.bloc-unboxing{
  gap: 0;
  align-items: center;
}

.bloc-unboxing .bloc-unboxing__image img,
.bloc-unboxing .wp-block-image img{
  border-radius: 18px;
  display: block;
}

@media (max-width: 900px){

  .bloc-unboxing .wp-block-image{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* --- Si le thème utilise un wrapper flex pour l'image --- */

  .bloc-unboxing .wp-block-image.is-layout-flex{
    justify-content: center !important;
  }

  .bloc-unboxing .wp-block-image img{
    display: inline-block !important;
  }
}

.bloc-unboxing__content-image{
  display: flex;
  align-items: center;
}

/* Colonne droite */

.bloc-unboxing__content{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bloc-unboxing__liste{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

/* --- Desktop uniquement : contrôle des largeurs de colonnes --- */

@media (min-width: 901px){
  .bloc-unboxing > .wp-block-column:first-child{
    flex: 0 0 45%;   /* ← réduit la colonne image */

    max-width: 45%;
  }

  .bloc-unboxing > .wp-block-column:last-child{
    flex: 0 0 55%;   /* ← élargit la colonne texte */

    max-width: 55%;
  }
}

.unboxing-item{
  background: #fff;
  border-radius: 12px;
  padding: 5px 6px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.unboxing-item__icon,
.unboxing-item .wp-block-image{
  margin: 0 !important;
  flex: 0 0 auto;
}

.unboxing-item__icon img,
.unboxing-item .wp-block-image img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.unboxing-item__text{
  margin: 0 !important;
  line-height: 1.35;
  color: #111;
}

.unboxing-item p{
  margin: 0 !important;
  color: #111;
  line-height: 1.35;
}

/* --- RESPONSIVE - les 2 grandes colonnes se stackent - mais les items restent en rangée --- */

@media (max-width: 900px){
  .bloc-unboxing{
    gap: 22px;
  }

  /* Stack des 2 colonnes */

  .bloc-unboxing.wp-block-columns{
    flex-direction: column !important;
  }

  .unboxing-item{
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* --- FAQ – style "cartes" (robuste Gutenberg) Classe sur le groupe qui WRAP les details : faq-welcome --- */

/* espace entre cartes */

.faq-welcome{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-welcome details,
.faq-welcome .wp-block-details{
  background: #fff !important;
  border: 0.8px dashed rgba(0,0,0,0.10) !important;
  border-radius: 16px !important;
  padding: 18px 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
  width: 50%;
}

@media (max-width: 900px){
  .faq-welcome details,
  .faq-welcome .wp-block-details{
    width: 100% !important;
  }
}

.faq-welcome summary::-webkit-details-marker{
  display: none;
}
.faq-welcome summary{
  list-style: none;
}

/* titre (question) */

.faq-welcome summary{
  position: relative;
  cursor: pointer;

  font-weight: 500;
  font-size: 16px;
  color: #111;

  padding-right: 34px;
  margin: 0;
}

.faq-welcome summary::after{
  content: "›";
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 18px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-welcome details[open] > summary::after{
  transform: rotate(-90deg);
}

.faq-welcome details > :not(summary),
.faq-welcome .wp-block-details > :not(summary){
  margin-top: 10px;
  color: #777;
  font-size: 14px;
  line-height: 1.5;
}

.faq-welcome p{
  margin: 0;
}

/* ######################################################################################################### */
/* =============================================== PAGE ECO ================================================ */
/* ######################################################################################################### */

.sous-titre-eco-marge{
  padding-right: 150px;
}

.para-eco-marge{
  padding-right: 20px;
}

@media (max-width: 900px){

  .bloc-eco .wp-block-image{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* --- Si le thème utilise un wrapper flex pour l'image --- */

  .bloc-eco .wp-block-image.is-layout-flex{
    justify-content: center !important;
  }

  .bloc-eco .wp-block-image img{
    display: inline-block !important;
  }
}

/* --- SECTION RSE (2 colonnes) --- */

.rse-section{
  max-width: 1200px;
  margin-inline: auto;
}

/* --- Gutenberg Columns wrapper --- */

.rse-columns{
  align-items: start;
  gap: 50px;
}

/* --- COLONNE GAUCHE : grille 8 logos --- */

.rse-logos-grid__inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* --- Carte logo --- */

.rse-logo-card{
  background: #fff;
  border: 0.8px dashed rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  box-sizing: border-box;
}

/* --- Image logo (dans la carte) --- */

.rse-logo-card .wp-block-image{
  margin: 0 0 10px 0 !important;
}

.rse-logo-card .wp-block-image img{
  display: block;
  margin-inline: auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.rse-logo-card p{
  margin: 0;
  color: #222;
  font-size: 12px;
  line-height: 1.35;
}

.rse-logo-card strong{
  display: block;
  font-weight: 800;
  margin-bottom: 2px;
}

/* COLONNE DROITE : titres + ligne logos + texte */

.rse-title{
  padding-right: 200px;
  padding-bottom: 20px;
}

.rse-certif-logos{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px 0;
}

.rse-certif-logos > .wp-block-image,
.rse-certif-logos > figure.wp-block-image{
  flex: 0 0 auto !important;
  width: 60px;
  margin: 0 !important;
}

.rse-certif-logos img{
  width: 70px !important;
  height: 70px !important;
  max-width: none !important; /* --- évite le "je me limite au wrapper" --- */

  object-fit: contain;
}

.rse-subtitle{
  margin: 0 0 10px 0;
}

.rse-text{
  padding-right: 100px;
  color: #555;
}

.logos-3-rangee{
  gap: 20px;
}

/* Badge highlight : fond vert + alignement icône/texte */

.badge-labels{
  display: flex;
  align-items: center;
  gap: 14px;

  max-width: 665px;
  margin: 0 auto;

  background: #b7ff00;
  padding: 8px;

  border-radius: 10px;
  box-sizing: border-box;
}

/* Icône du badge highlight */

.badge-labels .wp-block-image{ flex: 0 0 auto; }

/* Taille fixe de l’icône */

.badge-labels img{
  display: block;
  width: 60px !important;
  height: 60px !important;
}

/* Texte du badge highlight */

.badge-labels p{
  margin: 0;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

/* --- En petit mobile : padding + hyphens pour éviter les débordements --- */

@media (max-width: 900px){
  .badge-labels{
    max-width: 100%;
    padding: 14px 16px;
    gap: 12px;
  }

  .badge-labels p{
    font-size: 14px;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* --- SECTION (wrapper + colonnes) --- */

.ss-section {
  background: #333333;
  border-radius: 18px;
  padding: 36px;
  overflow: hidden;
}

.ss-section__cols {
  gap: 28px;
  align-items: center;
}

.ss-section__left {
  color: #ffffff !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 100px;
}

.ss-section__title {
  padding-bottom: 30px;
  font-weight: 700;
  line-height: 1.1;
  padding-bottom: 70px !important;
}

.ss-section__intro {
  margin: 0 0 22px 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  max-width: 52ch;
}

/* BADGES GRID (5 petits rectangles) */

.ss-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px 0;
  padding-right: 80px;
}

/* BADGE (petit rectangle) Gutenberg "Rangée" => on stylise le conteneur */

.ss-badge {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(51, 51, 51);

  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 52px;
}

.ss-badge__icon {
  width: 55px;
  height: 55px;
  flex: 0 0 55px;
  object-fit: contain;
}

.ss-badge__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

/* BADGE WIDE (rectangle large en bas) */

.ss-badge--wide {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(71, 71, 71);
  padding: 14px 16px;
  min-height: 64px;
}

.ss-badge--wide .ss-badge__icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.ss-badge--wide .ss-badge__text {
  font-weight: 600;
  color: rgba(255, 255, 255);
}

.ss-section__right {
  display: flex;
  justify-content: flex-end;
}

.ss-section__image {
  width: 100%;
  max-width: 560px;
  border-radius: 18px;
  overflow: hidden;
}

.ss-section__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* --- RESPONSIVE (mobile <= 900px) --- */

@media (max-width: 900px) {
  .ss-section {
    padding: 18px;
    border-radius: 16px;
  }

  .ss-section__cols {
    gap: 18px;
  }

  .ss-section__intro {
    max-width: none;
  }

  .ss-badges {
    grid-template-columns: 1fr; /* badges en 1 colonne */

  }

  .ss-section__right {
    justify-content: center;
  }

  .ss-section__image {
    max-width: 100%;
    border-radius: 16px;
  }

  /* --- Enlève tous les paddings ajoutés sur mobile --- */

  .ss-section__left,
  .ss-badges {
    padding: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .ss-section__left .wp-block-heading,
  .ss-section__left .wp-block-heading.has-text-align-left,
  .ss-section__left .wp-block-heading.has-text-align-right,
  .ss-section__left .ss-section__intro,
  .ss-section__left .ss-section__intro.has-text-align-left,
  .ss-section__left .ss-section__intro.has-text-align-right{
    text-align: center !important;
  }
}

/* --- SECTION --- */

.tc-section {
  padding: 20px 0;
}

.tc-section__inner {
  max-width: 1700px;
  margin: 0 auto;

}

.tc-section__header {
  text-align: center;
  margin: 0 0 28px 0;
}

.tc-section__title {
  margin: 0 0 10px 0;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(22px, 3.5vw, 28px);
}

.tc-section__intro {
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.6;
  padding-left: 240px;
  padding-right: 240px;
}

/* CARDS GRID (4 cartes) */

.tc-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 22px 0;
}

.tc-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  min-height: 170px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tc-card__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.tc-card__text {
  margin: 0;
  text-align: center;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.72);
}

.tc-card__text strong {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 800;
}

/* NOTE (encart bas) */

.tc-note {
  background: #ededed;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  padding: 4px 5px;

  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 850px;
  margin-inline: auto;
}

.tc-note__iconwrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #baff00;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
}

.tc-note__icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 46px;
}

.tc-note__text {
  margin: 0;
  color: rgba(0, 0, 0, 0.78);
  line-height: 1.5;
  font-weight: 600;
}

/* --- SECTION + BAND (fond gris) --- */

.wrapper-fond-noir-bas-eco{
  position: relative;
  overflow: hidden;
}

.wrapper-fond-noir-bas-eco::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 30%);
  background-color: #333;
  border-radius: 15px;
  z-index: 0;
}

.wrapper-fond-noir-bas-eco > *{
  position: relative;
  z-index: 1;
}

.titre-engagement{
  color: #ffffff;
  padding-left: 500px;
  padding-right: 500px;
  line-height: 1.45;
}

.para-engagement{
  color: #ffffff;
  padding-left: 380px;
  padding-right: 380px;
}

.para-soustitre-engagement{
  color: #797979;

}

.img-engagement{
  padding: 20px 0;
}

/* Badge guillemets : fond vert + alignement icône/texte */

.badge-guillemets{
  display: flex;
  align-items: center;
  gap: 14px;

  max-width: 750px;
  margin: 0 auto;

  background: #b7ff00;
  padding: 20px;

  border-radius: 10px;
  box-sizing: border-box;
}

/* Icône du badge guillemets */

.badge-guillemets .wp-block-image{ flex: 0 0 auto; }

/* Taille fixe de l’icône */

.badge-guillemets img{
  display: block;
  width: 60px !important;
  height: 60px !important;
}

/* Texte du badge highlight */

.badge-guillemets p{
  margin: 0;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

/* --- Section: Steps (supply chain) --- */

/* --- Section --- */

.sc-steps{
  padding: 64px 0;
}

.sc-steps__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.sc-steps__heading,
.sc-steps__intro{
  text-align: center;
}

.sc-steps__heading{
  margin: 0 0 12px;
}

.sc-steps__intro{
  margin: 0 0 44px;
}

/* --- Track wrapper: draws the horizontal line behind the dots --- */

.sc-steps__track{
  position: relative;
}

.sc-steps__track::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  height: 1px;
  background: rgba(0,0,0,.12);
  z-index: 0;
}

.sc-steps__cols{
  position: relative;
  z-index: 1;
}

.sc-step{
  text-align: center;
  padding: 0 2px;
}

.sc-step__icon img{
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: inline-block;
}

.sc-step__dot{
  position: relative;
  width: 24px;
  height: 24px;
  margin: 18px auto 18px;
  background: #fff;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.5);
  box-sizing: border-box;

  box-shadow: 0 0 0 6px #f6f6f6;
}

.sc-step__dot::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: rgba(0,0,0,.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.sc-step__title{
  margin: 0 0 10px;
  font-weight: 0;
  font-size: 18px;
}

.sc-step__text{
  margin: 0;
  color: rgba(0,0,0,.6);
  font-size: 14px;
  line-height: 1.5;

}

/* Simple note box */

.sc-note{
  max-width: 730px;
  margin: 0 auto;
  padding: 18px 40px;
  background: #f2f2f2;
  border: 1px dashed rgba(0,0,0,.22);
  border-radius: 12px;
  box-sizing: border-box;
}

.sc-note__text{
  margin: 0;
  text-align: center;
  color: rgba(0,0,0,.75);
  line-height: 1.45;
}

/* --- Mobile --- */

@media (max-width: 900px){
  .sc-note{
    max-width: 92%;
    padding: 16px 16px;
    border-radius: 10px;
  }
}

/* --- Green Points - Card section Breakpoint mobile: 900px --- */

.gp-card{
  background: #333333;
  border-radius: 12px;
  padding: 44px 28px 34px;
  color: #fff;
  overflow: hidden;
}

.gp-card__title{
  text-align: center;
  margin: 0 0 34px;
  color: #fff;
}

/* --- Products row (desktop) --- */

.gp-products{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 0 auto 44px;
}

/* Each product (image + badge) */

.gp-product{
   width: auto;            /* ✅ IMPORTANT */

  flex: 0 1 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gp-products > *{
  margin: 0 !important;
}

.gp-product__img{
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-product__img img{
  width: 150px;
  height: auto;
  display: block;
  z-index: 2;
}

.gp-products__arrow{
  width: 55px;
  height: auto;
  margin-top: 0;
  flex: 0 0 auto;
  align-self: center;
}

/* Green badge */

.gp-product__badge{
  display: inline-block;
  background: #c8f000;
  color: #111;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 0;
  transform: translateY(-16px);
  line-height: 1.15;
  text-align: left;
  min-width: 118px;
  box-sizing: border-box;
}

/* Badge typography: 2 lines */

.gp-product__badge strong{
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}
.gp-product__badge em{
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  opacity: .95;
}

.gp-product__badge br{
  content: "";
}

/* Second title + lead */

.gp-card__subtitle{
  text-align: center;
  margin: 0 0 8px;
  color: #fff;
}

.gp-card__lead{
  text-align: center;
  margin: 0 0 24px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

/* Criteria grid */

/* Works whether .gp-criteria is a Group "Grid" or plain Group */

.gp-criteria{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.gp-criterion{
  position: relative;
  text-align: center;
  padding: 0 12px 14px;
}

.gp-criterion::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 22px;
  bottom: 0;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,.25);
  box-sizing: border-box;
  z-index: 0;
}

.gp-criterion__icon img{
  width: 65px;
  height: 65px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
}

.gp-criterion__label{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

.gp-card__btn{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.gp-card__btn .wp-block-button__link{
  background: #c8f000;
  color: #111;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.gp-card__btn .wp-block-button__link:hover{
  filter: brightness(.95);
}

/* --- Style du bouton "Demander un devis" (texte + icône) --- */

.btn-objets-eco a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-10px);
  padding: 6px 14px;
}

/* --- Benefits (2x2 cards with icon + text) Mobile breakpoint: 900px --- */

.benefits{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
  box-sizing: border-box;
}

.benefits__title{
  text-align: center;
  margin: 0 0 10px;
}

.benefits__subtitle{
  text-align: center;
  margin: 0 0 26px;
  color: rgba(0,0,0,.65);
}

/* --- Grid (desktop: 2 columns) --- */

.benefits__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  justify-items: center;     /* cartes centrées dans leur colonne */

}

.benefit{
  width: 100%;
  max-width: 480px;          /* évite des cartes trop larges */

  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 14px;

  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.benefit .wp-block-image,
.benefit .wp-block-image figure{
  margin: 0 !important;
}

.benefit .wp-block-image{
  flex: 0 0 auto;
}

.benefit .wp-block-image img{
  width: 65px !important;
  height: 65px !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}

.benefit .wp-block-image figcaption{
  display: none !important;
}

.benefit__text{
  margin: 0 !important;
  color: rgba(0,0,0,.72);
  line-height: 1.35;
  font-size: 14px;
  text-align: left;
}

/* --- FAQ – style "cartes" (robuste Gutenberg) Classe sur le groupe qui WRAP les details : faq-eco --- */

/* espace entre cartes */

.faq-eco{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-eco details,
.faq-eco .wp-block-details{
  background: #fff !important;
  border: 0.8px dashed rgba(0,0,0,0.10) !important;
  border-radius: 16px !important;
  padding: 18px 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
  width: 70%;
}

@media (max-width: 900px){
  .faq-eco details,
  .faq-eco .wp-block-details{
    width: 100% !important;
  }
}

.faq-eco summary::-webkit-details-marker{
  display: none;
}
.faq-eco summary{
  list-style: none;
}

/* titre (question) */

.faq-eco summary{
  position: relative;
  cursor: pointer;

  font-size: 16px;
  color: #111;

  padding-right: 34px;
  margin: 0;
}

.faq-eco summary::after{
  content: "›";
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 18px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-eco details[open] > summary::after{
  transform: rotate(-90deg);
}

.faq-eco details > :not(summary),
.faq-eco .wp-block-details > :not(summary){
  margin-top: 10px;
  color: #202020;
  font-size: 14px;
  line-height: 1.5;
}

.faq-eco p{
  margin: 0;
}

.faq-eco summary{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 0;
}

.faq-eco summary::before{
  content: "";
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: #c8f000;
  letter-spacing: -0.02em;
}

.faq-eco details:nth-of-type(1) > summary::before{ content: "01"; }
.faq-eco details:nth-of-type(2) > summary::before{ content: "02"; }
.faq-eco details:nth-of-type(3) > summary::before{ content: "03"; }
.faq-eco details:nth-of-type(4) > summary::before{ content: "04"; }
.faq-eco details:nth-of-type(5) > summary::before{ content: "05"; }
.faq-eco details:nth-of-type(6) > summary::before{ content: "06"; }
.faq-eco details:nth-of-type(7) > summary::before{ content: "07"; }
.faq-eco details:nth-of-type(8) > summary::before{ content: "08"; }

.faq-eco summary::after{
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.faq-eco details[open] > summary::after{
  transform: translateY(-50%) rotate(-90deg);
}

/* --- Mobile --- */

@media (max-width: 900px){

  .benefits{
    padding: 22px 16px;
  }

  .benefits__subtitle{
    margin-bottom: 18px;
  }

  /* --- Still centered, 1 column on mobile --- */

  .benefits__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .benefit{
    max-width: 560px;
    padding: 16px 16px;
  }

  .benefit__icon img{
    width: 34px;
    height: 34px;
  }
}

/* --- En mobile : bouton centré et moins "décalé" --- */

@media (max-width: 900px){

  .btn-objets-eco{
    padding-left: 20px;
  }

  .btn-objets-eco a{
    display: flex;
    align-items: center;
    margin-inline: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
  }

  .btn-objets-eco a img{
    max-width: 24px;
    height: auto;
  }

  .wp-block-button.btn-objets-eco{
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- Mobile (<= 900px) Products: 1 per line Criteria: 2 per line --- */

@media (max-width: 900px){

  .gp-card{
    padding: 34px 16px 26px;
  }

  .gp-card__title{
    margin-bottom: 22px;
    padding-bottom: 20px;
  }

  /* Criteria grid 2 columns */

  .gp-criteria{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .gp-criterion::before{
    top: 20px;
  }
}

@media (max-width: 900px){

  /* --- Grille 2 + 1 --- */

  .gp-products{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    justify-items: center;
  }

  .gp-product{
    width: 100%;
    max-width: 140px;
  }

  .gp-product:nth-of-type(3){
    grid-column: 1 / -1;
    max-width: 160px;
  }

  .gp-product__img{
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gp-product__img img{
    width: 80px;
    height: auto;
    padding-bottom: 20px;
  }

  /* Badge compact et bien positionné */

  .gp-product__badge{
    max-width: 90px;
    margin: 0 auto;
    transform: translateY(-2px);
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  /* --- Pas de flèches en mobile --- */

  .gp-products__arrow{
    display: none;
  }
}

/* --- Responsive (mobile breakpoint: 900px) --- */

@media (max-width: 900px){

  /* Force le conteneur Columns en grid */

  .sc-steps__cols.wp-block-columns{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 18px;
  }

  /* IMPORTANT : annule les styles Gutenberg sur les colonnes */

  .sc-steps__cols.wp-block-columns > .wp-block-column{
    width: auto !important;
    flex: initial !important;
    flex-basis: auto !important;
    max-width: none !important;
  }

  .sc-steps__track{
    position: relative;
  }

  .sc-steps__track::before,
  .sc-steps__track::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,.12);
    z-index: 0;
  }

  .sc-steps__track::before{ top: 65px; }
  .sc-steps__track::after{  top: 275px; }

  .sc-step{
    position: relative;
    z-index: 1;
    padding: 0 6px;
    text-align: center;
  }

  .sc-step__icon img{
    width: 44px;
    height: 44px;
  }

  .sc-step__dot{
    width: 16px;
    height: 16px;
    margin: 14px auto 14px;
    box-shadow: 0 0 0 6px #f6f6f6;
  }

  .sc-step__dot::after{
    width: 6px;
    height: 6px;
  }

  .sc-step__title{
    font-size: 14px;
    margin: 0 0 8px;
  }

  .sc-step__text{
    font-size: 12px;
    line-height: 1.45;
  }
}

/* --- En petit mobile : padding + hyphens pour éviter les débordements --- */

@media (max-width: 600px){
  .badge-guillemets{
    max-width: 100%;
    padding: 14px 16px;
    gap: 12px;
  }

  .badge-guillemets p{
    font-size: 14px;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* --- En mobile : fond plein + plus petit padding latéral --- */

@media (max-width: 900px){
  .wrapper-fond-noir-bas-eco::before{
    left: 0;
    right: 0;
    height: 100%;
  }
}

/* --- RESPONSIVE (<= 900px) --- */

@media (max-width: 900px) {
  .tc-section {
    padding: 28px 0;
  }

  .tc-section__inner {
    padding: 0 14px;
  }

  .tc-section__header {
    margin-bottom: 20px;
  }

  .tc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .tc-card {
    padding: 20px 16px;
    min-height: unset;
    border-radius: 16px;
  }

  .tc-card__icon {
    width: 65px;
    height: 65px;
  }

  .tc-note {
    padding: 14px 14px;
    border-radius: 14px;
    align-items: flex-start;
  }

  .tc-section__intro, .titre-engagement,
  .para-engagement {
    padding-left: 0;
    padding-right: 0;
  }

  .tc-note__iconwrap {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }
}

@media (max-width: 520px) {
  .tc-cards {
    grid-template-columns: 1fr;
  }

  .tc-note {
    gap: 12px;
  }
}

/* --- MOBILE (<= 900px) --- */

@media (max-width: 900px){

  /* Colonnes Gutenberg -> stack propre */

  .rse-columns{
    gap: 18px;
  }

  /* --- Grille logos : 2 colonnes (au lieu de 4) --- */

  .rse-logos-grid__inner{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rse-certif-logos > .wp-block-image,
  .rse-certif-logos > figure.wp-block-image{
    width: 100px;
  }

  .rse-certif-logos img{
    width: 100px !important;
    height: 100px !important;
  }

  .sous-titre-eco-marge,
  .para-eco-marge,
  .rse-title,
  .rse-text{
    padding-right: 0;
  }

  /* --- La grille doit étirer ses items (sinon une carte peut prendre une largeur auto) --- */

  .rse-logos-grid__inner{
    justify-items: stretch;
    align-items: stretch;
  }

  /* --- Chaque carte prend 100% de la cellule --- */

  .rse-logo-card{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* --- Gutenberg peut mettre une width sur le wrapper image : on neutralise --- */

  .rse-logo-card .wp-block-image{
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }
}

@media print {

  /* garder les couleurs */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* cacher tout par défaut */
  body * {
    visibility: hidden !important;
  }

  /* afficher uniquement la zone voulue */
  .print-area,
  .print-area * {
    visibility: visible !important;
  }

  /* positionner la zone en haut de la page */
  .print-area {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }

  /* cacher des éléments WP classiques (au cas où) */
  header, footer, nav,
  #wpadminbar,
  .site-header, .site-footer,
  .navigation, .menu,
  .sidebar, .widget-area {
    display: none !important;
  }

  /* enlever marges/paddings inutiles du theme */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ######################################################################################################### */
/* ============================================ PAGE A PROPOS ============================================== */
/* ######################################################################################################### */

/* Comparaison 3 colonnes */

.compare-cols{
  align-items: center;
  width: 70%;
}

.compare-cols.wp-block-columns{
  gap: 0 !important;
}

.compare-cols.wp-block-columns > .wp-block-column{
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Colonnes 1 et 3 (cartes) */

.compare-card{
  background: transparent;
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 18px;
  padding: 50px;
  text-align: left;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-card img{
  width: 100%;
  border-radius: 14px;
  display: block;
}

/* Titre */

.compare-card h3,
.compare-card h4{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* Sous-titre */

.compare-card p{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

/* Colonne centrale (+) */

.compare-plus{
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-plus img{
  width: 36px;
  height: auto;
}

/* --- La "carte" : bordure + padding qui protège le contenu --- */

.compare-card{
  border: 1px dashed rgba(255,255,255,.35) !important;
  border-radius: 18px !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- Image dans la carte --- */

.compare-card .wp-block-image,
.compare-card figure{
  margin: 10px !important;
}

.compare-card img{
  display: block;
  width: 100% !important;
  height: auto;
  border-radius: 14px;
}

.wp-block-columns.compare-cols.is-layout-flex > .wp-block-column.compare-plus{
  flex: 0 0 auto !important;
  width: 100px !important;
}

.compare-plus{
  display: flex;
  justify-content: center;
  align-items: center;
}

.compare-plus img{
  width: 44px !important;
  height: auto;
  display: block;
}

/* --- Mobile --- */

@media (max-width: 900px){

  .compare-cols{
    gap: 16px;
    width: 100%;
  }

  .compare-cols{
    flex-direction: column;
  }

  .compare-plus img{
    width: 28px;
  }

  .compare-card{
    padding: 16px;
  }
}

/* BADGE (petit rectangle) Gutenberg "Rangée" => on stylise le conteneur */

.ss-badge-propos {
  width: 40%;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  background: #474747;

  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 52px;
}

.ss-badge-propos__icon {
  width: 65px;
  height: 65px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 65px;
}

.ss-badge-propos__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

/* --- Mobile --- */

@media (max-width: 900px){
  .ss-badge-propos{
    width: 100%;
  }
}

.unboxing-item-propos{
  background: #fff;
  border-radius: 12px;
  padding: 5px 6px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.unboxing-item-propos__icon,
.unboxing-item-propos .wp-block-image{
  margin: 0 !important;
  flex: 0 0 auto;
}

.unboxing-item-propos__icon img,
.unboxing-item-propos .wp-block-image img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.unboxing-item-propos__text{
  margin: 0 !important;
  line-height: 1.35;
  color: #111;
}

.unboxing-item-propos p{
  margin: 0 !important;
  color: #111;
  line-height: 1.35;
}

/* --- RESPONSIVE - les 2 grandes colonnes se stackent - mais les items restent en rangée --- */

@media (max-width: 900px){

  .unboxing-item-propos{
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* ######################################################################################################### */
/* ============================================ PAGE SOURCING ============================================== */
/* ######################################################################################################### */

/* BADGE (petit rectangle) Gutenberg "Rangée" => on stylise le conteneur */

.ss-badge-sourcing {
  width: 55%;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  background: #474747;

  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 52px;
}

.ss-badge-sourcing__icon {
  width: 65px;
  height: 65px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 65px;
}

.ss-badge-sourcing__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

/* --- Mobile --- */

@media (max-width: 900px){
  .ss-badge-sourcing{
    width: 100%;
  }
}

/* --- Steps 9 (3x3 cards) Mobile breakpoint: 900px --- */

.steps9{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Grid: 3 per row */

.steps9__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.steps9__grid div {
    margin-top: 0;
}

.step9{
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-sizing: border-box;
}

.step9__head{
  display: flex;
  align-items: center;        /* titre centré verticalement par rapport au numéro */

  gap: 14px;
  margin: 0 0 10px;
}

.step9__num{
  margin: 0;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: #c8f000;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

.step9__title{
  margin: 0;
  font-size: 18px;

  color: #fff;
}

.step9__text{
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.55;
}

/* --- FAQ – style "cartes" (robuste Gutenberg) Classe sur le groupe qui WRAP les details : faq-sourcing --- */

/* espace entre cartes */

.faq-sourcing{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-sourcing details,
.faq-sourcing .wp-block-details{
  background: #fff !important;
  border: 0.8px dashed rgba(0,0,0,0.10) !important;
  border-radius: 16px !important;
  padding: 18px 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
  width: 100%;
}

@media (max-width: 900px){
  .faq-sourcing details,
  .faq-sourcing .wp-block-details{
    width: 100% !important;
  }
}

.faq-sourcing summary::-webkit-details-marker{
  display: none;
}
.faq-sourcing summary{
  list-style: none;
}

/* titre (question) */

.faq-sourcing summary{
  position: relative;
  cursor: pointer;

  font-weight: 500;
  font-size: 16px;
  color: #111;

  padding-right: 34px;
  margin: 0;
}

.faq-sourcing summary::after{
  content: "›";
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 18px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-sourcing details[open] > summary::after{
  transform: rotate(-90deg);
}

.faq-sourcing details > :not(summary),
.faq-sourcing .wp-block-details > :not(summary){
  margin-top: 10px;
  color: #292929;
  font-size: 14px;
  line-height: 1.5;
}

.faq-sourcing p{
  margin: 0;
}

/* --- Mobile --- */

@media (max-width: 900px){

  .steps9{
    padding: 0 16px;
  }

  /* 1 colonne (lisible) */

  .steps9__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .step9{
    padding: 16px;
  }

  .step9__num{
    font-size: 30px;
  }

  .step9__title{
    font-size: 16px;
  }
}

/* ######################################################################################################### */
/* =============================================== PAGE CGV ================================================ */
/* ######################################################################################################### */

/* --- CGV wrapper : largeur centrée + padding --- */

.cgv{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.cgv__item{
  padding: 28px 0;
  border-bottom: 1px solid #e6e6e6;
  color: #333333;
}

.cgv__item:last-child{
  border-bottom: none;
}

/* Titres dans chaque item */

.cgv__item h2,
.cgv__item h3{
  margin: 0 0 12px 0;
}

.cgv__item p{
  margin: 0;
  line-height: 1.6;
}

.cgv-width{
padding-left: 400px;
  padding-right: 400px;
}

/* --- Mobile --- */

@media (max-width: 900px){
  .cgv{
    max-width: 100%;
    padding: 0 16px;
  }
  .cgv__item{
    padding: 20px 0;
  }

  .cgv-width{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ######################################################################################################### */
/* ============================================ PAGE HOMEPAGE ============================================== */
/* ######################################################################################################### */

/* --- Grille --- */

.cat-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: 85%;
  margin: 0 auto;

}

/* --- Mobile : 2 colonnes --- */

@media (max-width: 900px){
  .cat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
  margin: 0 auto;
  }
}

/* --- Carte --- */

.cat-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 10px;
}

.cat-card__img{
  display: flex;
  justify-content: center;
}

.cat-card__img figure{
  margin: 0;
}

.cat-card__img img{
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.cat-card h3,
.cat-card p{
  max-width: 240px;
  margin: 0;
}

.cat-card p{
  color: #6b6b6b;
  line-height: 1.5;
}

/* GRID */

.cards-grid-home{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1200px){
  .cards-grid-home{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .cards-grid-home{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.card-home{
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: stretch; /* IMPORTANT: plus de centrage */

}

.card-home .card__img-home,
.card-home .card__img-home figure,
.card-home .card__img-home .wp-block-image{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.card-home .card__img-home img{
  width: 100% !important;
  max-width: none !important;  /* IMPORTANT: casse le vieux max-width */

  height: 240px !important;
  object-fit: cover;
  display: block;
}

.card-home h2,
.card-home p{
  padding: 0 18px;
  text-align: left !important;
  max-width: none !important; /* IMPORTANT: casse les limites précédentes */

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 15px;
}

.card-home h3{
  margin: 14px 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

.card-home p{
  margin: 0 0 14px;
  color: #6b6b6b;
  line-height: 1.45;
  font-size: 14px;
}

/* --- Bouton en bas, centré --- */

.card__btnwrap-home{
  margin-top: auto;
  padding: 0 18px 18px;
  display: flex;
  justify-content: center;
}

.card__btnwrap-home .wp-block-button__link{
  border-radius: 999px;
  padding: 12px 18px;
  background: #2f3135;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
}

.card__btnwrap-home .wp-block-button__link::after{
  content: "↗";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d7ff4a;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}