/*================== COMMUNS ===================*/

.indent-40 {
text-indent: 40px; }
.indent-45 {
text-indent: 45px; }
.indent-50 {
text-indent: 50px; }
.indent-55 {
text-indent: 55px; }
.indent-60 {
text-indent: 60px; }
.indent-65 {
text-indent: 65px; }
.indent-70 {
text-indent: 70px; }
.indent-75 {
text-indent: 75px; }
.indent-80 {
text-indent: 80px; }
.indent-85 {
text-indent: 85px; }
.indent-90 {
text-indent: 90px; }
.indent-95 {
text-indent: 95px; }
.indent-100 {
text-indent: 100px; }
.indent-105 {
text-indent: 105px; }
.indent-110 {
text-indent: 110px; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.cesure {
    width: 100%; /* ✅ Ajuste à la largeur de la box */
    max-width: 350px; /* ✅ Largeur max */
    word-wrap: break-word; /* ✅ Coupe les mots longs */
    overflow-wrap: break-word; /* ✅ Assure la compatibilité */
    hyphens: auto; /* ✅ Ajoute la césure automatique */
    text-align: justify; /* ✅ Justification pour plus d'équilibre */
}



/* === Conteneur d'images === */

.millesime {
  background: #BDBDBD;
  color: black;
  font-weight:bold;
  font-size: 20px;
  padding: 20px 0;
  border-radius: 10px;
  margin: 80px auto;
  display:block;
  width: 100%;
  max-width: 600px;
  text-align:center;
  box-sizing:border-box;
}

/* conteneur */
.notgrp{
  max-width: 1000px;
  width: 100%;
  margin: 20px auto;
}

/* image à l'intérieur du conteneur */
.notgrp img{
  display: block;
  width: 100% !important;  /* remplit la largeur du conteneur */
  height: auto;
}

@media (min-width: 1025px){
  .notgrp{ max-width: 1100px; }
}

.prixindiv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Prend toute la largeur */
    margin: 100px auto 20px 0px;
}
.prixgrp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Prend toute la largeur */
    margin: 100px auto 50px 0px;
}


/* === Images === */
.notgrp img, .prixindiv img, .prixgrp img {
  max-width: 800px; /* Limite la largeur */
  height: auto;
  border-radius: 10px;
  border: none;
}

/* === Taille de l'image "notgrp" selon l'écran === */

/* 💻 Version par défaut = desktop/tablette */
.notgrp {
  max-width: 1000px;
  width: 90%;
  margin: 20px auto;
}

.notgrp img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

/* 📱 Smartphone portrait (jusqu’à 480px) */
@media (max-width: 480px) {
  .notgrp {
    max-width: 360px;   /* ← limite la largeur de l’image */
    width: 95%;
  }

  .notgrp img {
    width: 100%;
  }

/* 📱 Ajustement des images tarifs sur smartphone portrait */
@media (max-width: 480px) {
  .prixindiv,
  .prixgrp {
    max-width: 360px;   /* largeur max du bloc */
    width: 95%;
    margin: 10px auto;
  }

  .prixindiv img,
  .prixgrp img {
    width: 100%;
    height: auto;
  }

/* ===========================
   📱 Smartphone portrait (≤480px)
   Rythme & placements tarifs
=========================== */
@media (max-width: 480px) {
  /* 1) Remonter légèrement “millésime”
     (on couvre les variantes d’écriture au cas où) */
  .millésime,
  .millesime,
  .annee-card {
    margin-top: 4px !important;     /* un petit lift */
    margin-bottom: 20px !important;  /* un peu d’air dessous */
  }

  /* 2) Taille & centrage des 3 images (sans toucher desktop) */
  .notgrp,
  .prixindiv,
  .prixgrp {
    width: 95%;
    max-width: 360px;       /* taille smartphone */
    margin-left: auto;
    margin-right: auto;
  }

  /* 3) Même écart partout : au-dessus / entre / au-dessous */
  :root {
    --tarifs-gap-mob: 14px; /* ← change cette valeur si tu veux plus/moins d’espace */
  }

  /* on “remonte” un peu : petit top + même spacing vertical */
  .notgrp     { margin-top: 8px  !important; margin-bottom: var(--tarifs-gap-mob) !important; }
  .prixindiv  { margin-top: 8px  !important; margin-bottom: var(--tarifs-gap-mob) !important; }
  .prixgrp    { margin-top: 8px  !important; margin-bottom: var(--tarifs-gap-mob) !important; }

  /* 4) Même espace sous la dernière image que l’écart entre les blocs
        → on supprime le padding bas de la mainbox et on s’aligne au gap */
  .mainbox {
    padding-bottom: 0 !important;
  }

  /* bonus compat moderne : si le navigateur supporte :has(),
     on ne met le padding-bottom à 0 que quand il y a des blocs tarifs */
  .mainbox:has(.notgrp, .prixindiv, .prixgrp) {
    padding-bottom: 0 !important;
  }
}