/* CONGRES POINT S 2027 - feuille globale 
   Contient : tokens, surcharges du template, styles communs a toutes les pages.
   Largeurs : aucune valeur en dur, tout herite du .container Bootstrap 3.
   Regle a respecter : .ps27-page p vaut (0,1,1), donc toute classe de
   paragraphe doit s'ecrire .ps27-page .ma-classe pour la surcharger. */

/* ---- TOKENS ---- */
:root {
  --ps27-bleu:        #2C257D;
  --ps27-rouge:       #CF3723;
  --ps27-rouge-asset: #E4160A;  /* rouge reel des PNG tetiere / bas de page */
  --ps27-orange:      #E0A230;
  --ps27-vert:        #009654;
  --ps27-jaune:       #FEE64D;
  --ps27-jaune-asset: #FFE615;
  --ps27-cyan:        #18B2CA;  /* releve sur Forme_bleue_clair.png */
  /* variantes assombries, obligatoires pour du TEXTE sur blanc : les couleurs
     d'aplat ci-dessus tombent entre 2,2 et 3,8:1, sous le minimum de 4,5:1 */
  --ps27-orange-txt:  #A96200;
  --ps27-vert-txt:    #00804A;
  --ps27-cyan-txt:    #10707F;
  --ps27-orange-a-txt:#A85600;
  --ps27-orange-asset:#F07B00;  /* releve sur Forme_orange.png     */
  --ps27-vert-asset:  #149654;  /* releve sur Forme_verte.png      */
  --ps27-font:        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- SURCHARGES THEMEFOREST ---- */
header {
  background: none !important;
  position: relative;
  z-index: 10;
}
header .top-header {
  padding: 0 !important;
  border-bottom: 0 !important;
}
/* cellule Menu native non utilisee */
header .bottom-header {
  display: none !important;
}
/* cellule Map : iframe Google Maps de 650px, visible sans article arttype='Map' */
footer.footer-v1 .footer-map {
  display: none !important;
}
footer.footer-v1 {
  overflow: visible !important;
}
/* La cellule Footer est /html/body/footer/div[2], qui est un .container du
   template et non .bottom-footer. Il faut donc annuler SON padding pour que le
   footer s'aligne exactement sur le header. Ne pas ajouter de container dans
   l'article Footer, il y en a deja un. */
.ps27-wrap,
header .top-header > .container,
footer.footer-v1 > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- CONTENU DE PAGE ---- */
.ps27-page {
  max-width: none !important;
  margin: 0 !important;
  padding: 26px 15px 10px !important;
  font-family: var(--ps27-font) !important;
  color: var(--ps27-bleu) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.ps27-page img {
  max-width: 100% !important;
  height: auto !important;
  border: 0 !important;
  vertical-align: bottom !important;
}
.ps27-page p {
  color: var(--ps27-bleu) !important;
  font-family: var(--ps27-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
}
.ps27-page strong,
.ps27-page b {
  font-weight: 700 !important;
}
.ps27-page h2,
.ps27-page h3,
.ps27-page h4,
.ps27-page h5 {
  color: var(--ps27-bleu) !important;
  font-family: var(--ps27-font) !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}
.ps27-page a {
  color: var(--ps27-bleu) !important;
  text-decoration: underline !important;
}
.ps27-page a:hover {
  color: var(--ps27-rouge) !important;
}

/* ---- BANDEAU HAUT ---- */
.ps27-hero {
  position: relative;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
/* Les FICHIERS restent entiers, a leur cadrage d'origine : le recadrage en
   bande est fait uniquement ici, par object-fit. Consequences : hauteur
   identique sur toutes les pages, aucun pixel perdu dans les fichiers, et le
   cadrage vertical de chaque page se regle en une ligne avec object-position,
   sans jamais retoucher une image.
   Le rapport est le meme a tous les paliers, sinon le mobile rognerait les cotes. */
.ps27-hero-img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 2.5 !important;
  object-fit: cover !important;
  /* SANS !important : c'est la valeur par defaut, chaque page la surcharge par
     un style inline object-position sur sa banniere. Un !important ici battrait
     le style inline et annulerait tous les cadrages par page. */
  object-position: center center;
  border: 0 !important;
  vertical-align: bottom !important;
}
/* bandeau entier : rapport natif, aucun rognage, mais hauteur variable */
.ps27-hero--entier .ps27-hero-img {
  aspect-ratio: auto !important;
  object-fit: fill !important;
}
.ps27-hero-mark {
  position: absolute !important;
  right: 2%;
  bottom: 0;
  width: 30% !important;
  max-width: 340px !important;
  height: auto !important;
  border: 0 !important;
  pointer-events: none;
}

/* ---- BANDE BASSE : rangee justifiee ----
   Chaque tuile porte en style inline son flex-grow et son aspect-ratio, egaux
   a son rapport natif. La largeur est donc proportionnelle au format : une
   photo large prend plus de place qu'une etroite, toutes gardent la meme
   hauteur et AUCUNE n'est rognee. */
.ps27-endband {
  display: flex;
  max-width: none !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}
.ps27-endband img {
  display: block !important;
  flex-shrink: 1;
  flex-basis: 0;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  vertical-align: bottom !important;
}

/* ---- TITRE DE PAGE ----
   Taille native : le contenu utile des Titre_*.png ne fait que 154 a 366px
   de large, un agrandissement les rendrait flous. */
.ps27-title {
  text-align: center !important;
  margin: 0 0 34px !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}
.ps27-title img {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  border: 0 !important;
  vertical-align: bottom !important;
}

/* ---- COLLAGE : forme de couleur en fond + photos par-dessus ----
   La forme fait 60 % de la boite dans TOUTES les variantes, donc taille
   identique d'un jour a l'autre. Les photos restent petites pour laisser voir
   la forme, avec 8 points d'ecart entre la 1re (fin a 36) et la 2e (debut a 44). */
.ps27-collage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}
.ps27-collage-forme {
  display: block !important;
  width: 60% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 0 22% !important;
  border: 0 !important;
  vertical-align: bottom !important;
}
/* aspect-ratio impose : sans lui une photo portrait devient deux fois plus
   haute qu'une photo paysage a largeur egale, et ecrase la forme */
.ps27-collage-img {
  position: absolute !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  vertical-align: bottom !important;
}
/* la forme va de 22 a 82 %. La 1re photo deborde a gauche (6 a 48), la 2e a
   droite (54 a 96), avec 6 points d'ecart entre les deux. */
.ps27-collage-img--1 {
  left: 6%;
  top: 14%;
  width: 42%;
  z-index: 2;
}
.ps27-collage-img--2 {
  left: 54%;
  top: 34%;
  width: 42%;
  z-index: 3;
}
/* une seule photo : format large 16/9. Bord gauche a l'interieur du carre
   (qui va de 22 a 82 %), bord droit au-dela : elle ne deborde qu'a droite. */
.ps27-collage--une .ps27-collage-img--1 {
  left: 30%;
  top: 17%;
  width: 68%;
  aspect-ratio: 16 / 9 !important;
}
/* rappel explicite : la forme garde 60 % dans TOUTES les variantes */
.ps27-collage--une .ps27-collage-forme,
.ps27-collage--note .ps27-collage-forme {
  width: 60% !important;
  margin-left: 22% !important;
}
/* forme seule avec mention en attente, centree dans la forme */
.ps27-page .ps27-collage-note {
  position: absolute;
  left: 28%;
  top: 24%;
  width: 48%;
  z-index: 2;
  font-family: var(--ps27-font) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ---- TYPOGRAPHIE REUTILISABLE ---- */
.ps27-page .ps27-precision {
  color: var(--ps27-bleu) !important;
  font-family: var(--ps27-font) !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
}
.ps27-page .ps27-note {
  color: var(--ps27-orange-txt) !important;
  font-family: var(--ps27-font) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
}
/* mention IMPORTANT : orange gras dans le docx (E97132), assombri pour le contraste */
.ps27-page .ps27-important {
  color: var(--ps27-orange-txt) !important;
  font-family: var(--ps27-font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin: 0 0 12px !important;
}
/* valeur mise en avant : vert (00B050 / 4EA72E) */
.ps27-page .ps27-valeur {
  color: var(--ps27-vert-txt) !important;
  font-weight: 700 !important;
}
/* intitule de rubrique : rouge gras (EE0000) */
.ps27-page .ps27-label {
  color: var(--ps27-rouge) !important;
  font-weight: 700 !important;
}
/* bouton d'action */
.ps27-page .ps27-bouton {
  display: inline-block;
  background: #2b2080 !important;
  color: #FFFFFF !important;
  font-family: var(--ps27-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  padding: 12px 26px !important;
  border: 0 !important;
  border-radius: 4px;
  transition: background-color .18s ease;
}
.ps27-page .ps27-bouton:hover,
.ps27-page .ps27-bouton:focus {
  background: var(--ps27-orange-asset) !important;
  color: #FFFFFF !important;
}
/* contenu provisoire, a retirer avant mise en ligne */
.ps27-page .ps27-attente {
  display: inline-block;
  background: var(--ps27-jaune) !important;
  color: var(--ps27-bleu) !important;
  font-weight: 700 !important;
  padding: 1px 6px;
}

/* ---- MICRO-INTERACTIONS ----
   Tout est en amelioration progressive : sans JavaScript le contenu reste
   visible, seules les transitions au survol disparaissent. */
html {
  scroll-behavior: smooth;
}
.ps27-page [id] {
  scroll-margin-top: 16px;
}
.ps27-page .ps27-collage-img,
.ps27-page .ps27-activite-col img,
.ps27-endband img,
.ps27-page .ps27-bouton,
.ps27-page .ps27-rubrique-picto,
.ps27-page .ps27-activite-picto {
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
/* survol reserve aux vrais pointeurs : sur mobile un :hover reste colle
   apres le tap, ce qui donne un etat visuel faux */
@media (hover: hover) and (pointer: fine) {
  .ps27-page .ps27-collage-img:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 10px 26px rgba(44, 37, 125, .3);
    z-index: 5 !important;
  }
  .ps27-page .ps27-activite-col:hover img {
    transform: translateY(-5px);
  }
  .ps27-page .ps27-activite-col:hover img + img {
    box-shadow: 0 10px 22px rgba(44, 37, 125, .26);
  }
  .ps27-endband img:hover {
    transform: scale(1.06);
    filter: saturate(1.15) brightness(1.06);
    z-index: 2;
    position: relative;
  }
  .ps27-page .ps27-bouton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(44, 37, 125, .28);
  }
  .ps27-page .ps27-rubrique:hover .ps27-rubrique-picto,
  .ps27-page .ps27-activite:hover .ps27-activite-picto {
    transform: scale(1.12) rotate(-4deg);
  }
}
/* etat au tap, valable partout */
.ps27-page .ps27-bouton:active,
.ps27-page .ps27-galerie-prev:active,
.ps27-page .ps27-galerie-next:active {
  transform: scale(.94);
}
/* liseret de couleur qui se deploie sous les intitules de rubrique */
.ps27-page .ps27-rubrique-titre,
.ps27-page .ps27-vol-titre,
.ps27-page .ps27-tarif-titre,
.ps27-page .ps27-activite-titre {
  position: relative;
  padding-bottom: 7px !important;
}
.ps27-page .ps27-rubrique-titre:after,
.ps27-page .ps27-vol-titre:after,
.ps27-page .ps27-tarif-titre:after,
.ps27-page .ps27-activite-titre:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 34px;
  background: currentColor;
  border-radius: 2px;
  transition: width .45s ease;
}
.ps27-js .ps27-reveal.ps27-vu .ps27-rubrique-titre:after,
.ps27-js .ps27-reveal.ps27-vu .ps27-vol-titre:after,
.ps27-js .ps27-reveal.ps27-vu .ps27-tarif-titre:after,
.ps27-js .ps27-reveal.ps27-vu .ps27-activite-titre:after {
  width: 72px;
}
/* apparition au defilement : n'agit que si le script a pose .ps27-js.
   Volontairement discret, l'element est deja a 4/5 visible avant l'animation
   pour ne jamais laisser de grande zone blanche a l'arrivee sur la page. */
.ps27-js .ps27-reveal {
  opacity: .18;
  transform: translateY(10px);
}
.ps27-js .ps27-reveal.ps27-vu {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .4s ease;
}
/* cascade : les elements d'une meme serie apparaissent l'un apres l'autre */
.ps27-js .ps27-reveal:nth-child(2) { transition-delay: .04s; }
.ps27-js .ps27-reveal:nth-child(3) { transition-delay: .08s; }
.ps27-js .ps27-reveal:nth-child(4) { transition-delay: .12s; }
.ps27-js .ps27-reveal:nth-child(5) { transition-delay: .16s; }
.ps27-js .ps27-reveal:nth-child(6) { transition-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ps27-page *,
  .ps27-endband *,
  .ps27-header *,
  .ps27-footer * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .ps27-galerie-piste { scroll-behavior: auto !important; }
  .ps27-js .ps27-reveal,
  .ps27-js .ps27-reveal.ps27-vu {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ps27-page .ps27-collage-img:hover,
  .ps27-page .ps27-activite-col:hover img {
    transform: none;
  }
}

/* ---- MEDIA QUERIES ---- */
@media (min-width: 768px) {
  .ps27-page p {
    text-align: justify !important;
  }
  .ps27-page .ps27-precision,
  .ps27-page .ps27-note {
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  .ps27-page {
    font-size: 14px !important;
    padding-top: 18px !important;
  }
  .ps27-page p {
    font-size: 14px !important;
  }
  /* rien a redefinir sur mobile : le rapport natif s'applique a tous les paliers */
  .ps27-hero-mark {
    width: 38% !important;
    max-width: none !important;
  }
  .ps27-title {
    margin-bottom: 24px !important;
  }
  /* sans repli la hauteur commune tombe a 47px pour 6 tuiles : on passe a 2
     tuiles par ligne, ce qui rend la bande lisible sur telephone */
  .ps27-endband {
    margin-top: 18px !important;
    flex-wrap: wrap;
  }
  .ps27-endband img {
    flex-basis: 48% !important;
    flex-grow: 1 !important;
  }
  .ps27-collage {
    max-width: 320px;
  }
  .ps27-page .ps27-collage-note {
    font-size: 12px !important;
  }
}