/* layout commun */

#services {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 25px;
    background: var(--black);
}

.prez-section, .post-cards-info {
    display: flex;
    flex-direction: column;
    color: var(--muted);
    text-align: center;
    max-width: 1000px;
    padding: 0 60px;
    margin-bottom: 50px;
}
.prez-section h2, .prez-section h3 {
    color: var(--cyan);
    margin: 25px 0;
}

@media screen and (width <= 860px) {
  .prez-section, .post-cards-info {
    padding: 0 20px;
  }  
}


#services .grid {
  /*display: grid;
  grid-template-columns: repeat(2, 1fr);*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
  gap: 24px;
  justify-items: center;
}

/* ==================== POST-CARDS INFO ==================== */
.post-cards-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.post-cards-info h3 {
  background : var(--gradient-01);
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
}

.post-cards-info strong {
  color: var(--violet);
}

.post-cards-info h4 {
  margin: 15px 0;
  /*color: var(--cyan);*/
}

/* ==================== MIN-BLOCS ==================== */
.mini-bloc, .mini-bloc-pack {
  max-width: 75vw;
  padding: 25px;
  border-radius: 15px 0 15px 0;
  transition: box-shadow .3s ease, border-color .3s ease;
}

/* ODD */
.mini-bloc:nth-child(odd) {
  margin-right: auto;
  border: 3px solid var(--cyan);
  box-shadow:
    0 0 6px var(--cyan-glow),
    0 0 16px var(--cyan-glow);
}

.mini-bloc:nth-child(odd) h4 {
  color: var(--violet);
}

/* EVEN */
.mini-bloc:nth-child(even) {
  margin-left: auto;
  border: 3px solid var(--violet);
  box-shadow:
    0 0 6px var(--violet-glow),
    0 0 16px var(--violet-glow);
}

.mini-bloc:nth-child(even) h4 {
  color: var(--cyan);
}

/* Responsive reset */
@media (max-width: 768px) {
  .mini-bloc:nth-child(odd),
  .mini-bloc:nth-child(even) 
   {
    margin-left: 0;
    margin-right: 0;
  }
}

.bloc-choix {
  text-align: left;
  margin-bottom: 25px;
}
.bloc-faq, .bloc-inclus, .bloc-supplement, .bloc-seo {
  text-align: left;
  margin-bottom: 25px;
}
@media screen and (width <= 789px){
  .bloc-choix { 
    text-align: center;
  }
}

.bloc-faq ul,
.bloc-supplement ul,
.bloc-inclus ul {
  list-style: none;      /* On désactive les puces natives */
  padding: 0;
  margin: 0;
}

.bloc-faq li,
.bloc-supplement li,
.bloc-inclus li {
  position: relative;
  padding-left: 1.5rem;  /* espace pour la puce */
  /*text-align: center;*/
}

/* Le losange / puce custom */
.bloc-faq li::before,
.bloc-supplement li::before,
.bloc-inclus li::before {
  /* content: "◆";                /* symbole du losange */
  content: "✦";
  position: absolute;
  left: 0;                     /* aligné au début du padding */
  top : 0;
  /*top: 50%;
  transform: translateY(-50%);*/
  font-size: 1rem;
}

.bloc-faq li::before,
.bloc-supplement li::before {
  color: var(--cyan);
}

.bloc-inclus li::before {
  color: var(--violet);
}



/* ==================== ID + PACK ==================== */
.bloc-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 25px;
}
.pack-intro {
  overflow: hidden; /* <-- évite que l’image déborde du flux */
}

.identity .img-shape, .pack-intro .img-shape-02 {
  float: left;
  width: 300px;              /* ajustable */
  height: auto;
  margin: 0 25px 15px 0;
  border-radius: 18px;       /* courbes + harmonieuses */
  shape-outside: inset(0 round 18px);  /* arrondi du flux du texte */
  object-fit: cover;
}
.pack-intro .img-shape-02  {
  float: right;
  margin: 0 0 15px 25px;
}
@media (max-width: 790px) {
 .identity .img-shape, .pack-intro .img-shape-02 {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
    shape-outside: none;
    display: block;
  }
}

@media (max-width: 790px) {
  .bloc-pack {
    align-items: center;
  }
}

/*.pack-versions h4{
  margin: 25px 0 5px 0;
}*/
/* ==================== RECAP ID ==================== */
.recap-identity {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 800px;
  margin: 25px auto;
}

.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.recap-card {
  padding: 1.5rem;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  background: transparent;
  border: 2px solid rgba(255,255,255,0.08);
}
.recap-card.web, .recap-card.print {
  border-color: var(--cyan);
}
.recap-card h5 {
  font-size: .9rem;
  opacity: .8;
  margin-bottom: .25rem;
  color: var(--violet);
}

.recap-result {
  text-align: center;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--violet-glow);
  backdrop-filter: blur(6px);
}
.recap-result h5 {
  color: var(--cyan);
}

@media (max-width: 768px) {
  .recap-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== BLOC PACK ==================== */

.bloc-pack {
  display: flex;
  flex-direction: column;
  align-items: center;      /* CENTRE le contenu (important) */
  width: 100%;
  box-sizing: border-box;
  gap: 24px;
  padding: 0 20px;
}


.bloc-pack .pack-versions {
  display: block;           /* flux normal (chaque mini-bloc peut utiliser margin auto) */
  width: 100%;
  max-width: 1100px;        /* fixe la zone utile (ajuste selon ta mise en page) */
  margin: 0 auto;
}

/* ---- mini-blocs : largeur contrôlée pour permettre les margins auto ---- */
.bloc-pack .pack-versions > .mini-bloc-pack {
  width: min(75vw, 680px);  /* width < conteneur (permet l'effet auto margin) */
  box-sizing: border-box;
  margin-bottom: 25px;      /* espacement vertical */
  padding: 25px;
  border-radius: 15px 0 15px 0;
  transition: box-shadow .3s ease, border-color .3s ease;
}

.bloc-pack ul {
  margin: 20px 0px;
  list-style: none;
  padding: 0;
}
.bloc-pack ul li {
  position: relative;
  margin: 0px 20px;
  padding-left: 20px;
}
.bloc-pack ul li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cyan); 
  font-size: 0.8rem;
  transform: translateY(2px);
}

.mini-bloc-pack {
  margin-bottom: 25px; /* pour espacer les blocs */
}
.pack-versions .mini-bloc-pack:nth-child(odd){
  margin-right: auto;
  border: 3px solid var(--cyan);
  box-shadow:
    0 0 6px var(--cyan-glow),
    0 0 16px var(--cyan-glow);
}
.pack-versions .mini-bloc-pack:nth-child(even) {
  margin-left: auto;
  border: 3px solid var(--violet);
  box-shadow:
    0 0 6px var(--violet-glow),
    0 0 16px var(--violet-glow);
}
.pack-versions .mini-bloc-pack:nth-child(odd) h4{
  color: var(--violet);
}
.pack-versions .mini-bloc-pack:nth-child(even) h4{
  color: var(--cyan);
}

/* ---- Responsive : revenir en colonne centrée ---- */
@media (max-width: 790px) {
  .bloc-pack {
    padding: 0 12px;
  }
  .bloc-pack .pack-versions {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bloc-pack .pack-versions > .mini-bloc-pack {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}