/* =========================================
   TARIFS.CSS — Page Tarifs
========================================= */


/*============================
======= FICHIERS COMMUNS ========
=============================
   Styles généraux hors media queries
=============================*/

/* Indents utilitaires (inchangés) */
.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%;
  max-width: 350px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: justify;
}

/* BOX "MILLÉSIME" (titre/année) — base desktop */
.millesime {
  background: #BDBDBD;
  color: #000;
  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 D’IMAGE GÉNÉRIQUE .notgrp */
.notgrp {
  width: 90%;
  max-width: 1000px;
  margin: 20px auto;
}

.notgrp img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: none;
}

/* BLOCS TARIFS : .prixindiv et .prixgrp */
.prixindiv,
.prixgrp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* marges desktop d’origine */
.prixindiv { margin: 100px auto 20px 0; }
.prixgrp   { margin: 100px auto 50px 0; }

.prixindiv img,
.prixgrp img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;
  border-radius: 10px;
  border: none;
}



/*============================
====== FICHIERS PETITS FORMATS ======
=============================
   Smartphones portrait (≤480px)
=============================*/

/* Millésime smartphone portrait */
@media (max-width: 480px) and (orientation: portrait) {
  .millesime {
    font-size: 16px;
    padding: 12px 0;
    max-width: 320px;
    margin-top: 4px;          /* lift */
    margin-bottom: 20px;
  }
  /* compat noms existants si utilisés ailleurs */
  .annee-card { margin-top: 4px; margin-bottom: 20px; }
}

/* .notgrp smartphone portrait */
@media (max-width: 480px) and (orientation: portrait) {
  .notgrp {
    width: 95%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Blocs tarifs smartphone portrait */
@media (max-width: 480px) and (orientation: portrait) {
  :root { --tarifs-gap-mob: 14px; }

  .prixindiv,
  .prixgrp {
    width: 95%;
    max-width: 360px;
    margin: 10px auto;
  }

  .prixindiv { margin-top: 8px; margin-bottom: var(--tarifs-gap-mob); }
  .prixgrp   { margin-top: 8px; margin-bottom: var(--tarifs-gap-mob); }

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

  /* si les blocs tarifs sont dans .mainbox, on évite le padding bas excédentaire */
  .mainbox { padding-bottom: 0; }
}



/*============================
====== FICHIERS MOYENS FORMATS =====
=============================
   Smartphones paysage / tablettes portrait
=============================*/

/* Millésime — smartphone paysage (≤812px) */
@media (max-width: 812px) and (orientation: landscape) {
  .millesime {
    font-size: 17px;
    padding: 14px 0;
    max-width: 460px;
    margin: 40px auto;
  }
}

/* Millésime — iPad/tablette portrait (≤1024px) */
@media (max-width: 1024px) and (orientation: portrait) {
  .millesime {
    font-size: 18px;
    padding: 16px 0;
    max-width: 500px;
    margin: 60px auto;
  }
}

/* .notgrp — smartphone paysage (≤812px) */
@media (max-width: 812px) and (orientation: landscape) {
  .notgrp { max-width: 560px; }
}

/* .notgrp — iPad portrait (≤1024px) */
@media (max-width: 1024px) and (orientation: portrait) {
  .notgrp { max-width: 720px; }
}

/* Blocs tarifs — smartphone paysage (≤812px) */
@media (max-width: 812px) and (orientation: landscape) {
  .prixindiv img,
  .prixgrp img { max-width: 560px; }
}

/* Blocs tarifs — iPad portrait (≤1024px) */
@media (max-width: 1024px) and (orientation: portrait) {
  .prixindiv img,
  .prixgrp img { max-width: 720px; }
}



/*============================
===== FICHIERS GRANDS FORMATS ======
=============================
   Tablettes paysage / grands écrans ≤1366px
=============================*/

/* Millésime — iPad/tablette paysage (≤1366px) */
@media (max-width: 1366px) and (orientation: landscape) {
  .millesime {
    font-size: 19px;
    padding: 18px 0;
    max-width: 550px;
    margin: 70px auto;
  }
}

/* .notgrp — iPad paysage (≤1366px) */
@media (max-width: 1366px) and (orientation: landscape) {
  .notgrp { max-width: 960px; }
}

/* Blocs tarifs — iPad paysage (≤1366px) */
@media (max-width: 1366px) and (orientation: landscape) {
  .prixindiv img,
  .prixgrp img { max-width: 960px; }
}



/*============================
======= FICHIERS ORDINATEURS =======
=============================
   Desktop ≥1025px
=============================*/

/* Desktop large (≥1025px) – règle existante conservée */
@media (min-width: 1025px) {
  .notgrp { max-width: 1100px; }
}