*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:#337ab7;text-decoration:none}
a:hover{text-decoration:underline}
body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:16px; line-height:1.5; color:#333; background:#fff;
}

.page-wrap{padding:0; margin:0; text-align:center;}
.container{width:100%; margin:0 auto; max-width:1170px; padding:0}
.spacer{padding:10px 0}

.lead-14{font-size:14pt}
.lead-18{font-size:18pt}
.bold{font-weight:700}
.center{text-align:center}
.justify{text-align:justify}

.band{
  background:#1c2333; color:#fff;
  text-align:center; padding:8px 0;
}
.band .title{font-family: "Trebuchet MS", Geneva, sans-serif;}

p.pad{padding:0 20px}

.form{width:100%; margin:0; padding:0 15px;}
.form .hint{font-size:.9rem; color:#555}
.form .form-row{
  display:flex; gap:10px; align-items:center;
  margin:12px 0; text-align:left;
}
.form label{flex:0 0 30%; font-weight:700;}
.form .required::after{content:" *"; color:#c00; font-weight:700}
.form .field{
  flex:1; display:block; width:100%;
  padding:10px 12px; border:1px solid #ccc; border-radius:4px;
  font-size:16px;
}
.form .actions{margin:16px 0; text-align:center}
.btn{
  display:inline-block; border:0; border-radius:4px;
  padding:10px 18px; font-size:16px; cursor:pointer;
}
.btn-success{background:#28a745; color:#fff}
.btn-white{
  display:inline-block; background:#fff; color:#333;
  border:1px solid #ddd; padding:8px 14px; border-radius:4px;
}

.hours p{margin:0 auto}
.emph{font-weight:700}

.map{width:100%; height:250px; border:0; display:block}

hr.sep{border:0; border-top:1px solid #eee; margin:20px 0}

/* Responsive formulaires uniquement */
@media (max-width: 767px){
  .form .form-row{flex-direction:column; align-items:stretch}
  .form label{flex:0 0 auto; width:100%}
}

/* ===== JPO ===== */
:root{
  --jpo-left:#0f2a23;
  --jpo-mint-top:#baf7dc;
  --jpo-mint-bot:#8ee8c8;
  --jpo-badge:#c9ffe9;
  --jpo-text:#0b3c2f;
}

.jpo-poster{ margin:24px 0 32px; text-align:initial; }
.jpo-wrap{ max-width:1100px; margin:0 auto; }

/* Grille 2/3–1/3 conservée à toutes largeurs */
.jpo-card{
  display:grid; grid-template-columns:2fr 1fr;
  background:var(--jpo-left); color:#fff;
  border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.35);
  overflow:visible;
}

/* Colonnes */
.jpo-left, .jpo-right{
  padding:clamp(4px,2.6vw,14px);
  overflow:visible; position:relative;
}
.jpo-left{ padding-bottom:12px; } /* tasse le bas à gauche */

/* Texte (au-dessus des images) */
.jpo-heading{ margin:0; line-height:.95; font-weight:800; font-size:clamp(28px,6vw,64px); text-transform:uppercase; position:relative; z-index:2; }
.jpo-dates{ font-weight:600; font-size:clamp(14px,2.2vw,22px); position:relative; z-index:2; }
.jpo-sub{ font-size:clamp(13px,1.6vw,16px); color:rgba(255,255,255,.92); max-width:48ch; position:relative; z-index:2; }
.jpo-badge{ background:var(--jpo-badge); color:var(--jpo-text); font-weight:600; padding:6px 12px; border-radius:8px; font-size:clamp(12px,1.5vw,14px); position:relative; z-index:2; }
.jpo-cta{ display:inline-block; font-weight:800; text-transform:uppercase; font-size:clamp(16px,2.2vw,22px); padding:10px 16px; border-radius:12px; background:linear-gradient(90deg,#e7fff5,#b7f7db); color:#073a2f; margin:8px 0 12px; position:relative; z-index:2; }
.jpo-highlights{ display:flex; flex-wrap:wrap; gap:10px 12px; position:relative; z-index:2; }
.jpo-tag{ background:#103d31; color:#c9ffe9; border:1px solid rgba(255,255,255,.12); padding:7px 12px; border-radius:999px; font-weight:400; font-size:clamp(8px,1.4vw,13px); }

.jpo-right{
  background:linear-gradient(180deg,var(--jpo-mint-top),var(--jpo-mint-bot));
  color:#0a2e25;

  /* Image en HAUT, écrits en BAS */
  display:flex; flex-direction:column;
  gap:12px;
}

/* ==== Images ==== */
/* Gauche : offsets en marges (comptent dans la hauteur) */
.jpo-img-left{ --x:-50px; --y:-150px; position:relative; z-index:1; }
.jpo-img-left img{
  max-width:none;
  width: clamp(680px, 112%, 1200px);
  height:auto; object-fit:cover;
  margin-left: var(--x);
  margin-top:  var(--y);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.20));
}

/* DROITE — HERO responsive en haut de la colonne */
.jpo-hero{
  position: relative;
  height: clamp(200px, 32vw, 420px);
  border-radius: 12px;
  /* IMPORTANT : on veut que ça puisse déborder à GAUCHE, pas à droite */
  overflow: visible;        /* autorise le débord à gauche */
  isolation: isolate;       /* évite les conflits de z-index */
}

/* Image ancrée à DROITE, centrée verticalement, et qui prend la hauteur */
.jpo-hero img{
  position: absolute;
  right: -25%;                 /* bord droit toujours à l'intérieur */
  top: 50%;
  transform: translateY(-50%) translateX(var(--shiftX, -12%));  /* négatif = vers la gauche */
  height: 115%;             /* prend plus que 100% de la hauteur pour un rendu plein */
  width: auto;              /* respect du ratio, on étire en hauteur */
  max-width: none;          /* autorise la translation/“débord” visuel */
  object-fit: contain;      /* sécurité si l'image change (pas de rognage involontaire) */
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
  pointer-events: none;
}

/* Zone textes à droite : collée EN BAS de la colonne */
.jpo-labels{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-top:auto; position:relative; z-index:2; }
.jpo-cta--right{ background:linear-gradient(90deg,#fbfffd,#d9ffe9); color:#083f33; }
.jpo-footer{ display:flex; justify-content:flex-end; gap:10px; font-weight:800; color:#0c4b3b; }
.jpo-note{ font-size:clamp(10px,1.4vw,12px); margin-top:6px; color:#0b3c2f; }

/* ===== Mobile : espace entre image GAUCHE et les tags + compaction ===== */
@media (max-width: 600px){
  .jpo-offer-text{ margin-bottom:14px; }  /* espace avant l’image gauche */
  .jpo-highlights{ gap:6px 6px; }
  .jpo-tag{ font-size:10.5px; padding:5px 8px; }

  .jpo-left, .jpo-right{ padding:14px 14px 10px; }

  .jpo-heading{ font-size:22px; line-height:1.04; }
  .jpo-dates{ font-size:12px; }
  .jpo-sub{ font-size:12px; max-width:38ch; }
  .jpo-co2{ font-size:11px; }

  .jpo-badge{ font-size:11px; padding:4px 8px; border-radius:6px; }
  .jpo-cta{ font-size:12.5px; padding:6px 9px; border-radius:10px; }

  /* gauche plus contenue + offsets bridés */
  .jpo-img-left img{
    width:84%;
    margin-left: clamp(-18px, var(--x), 0px);
    margin-top:  clamp(-56px, var(--y), 0px);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.14));
  }

  /* droite : zone image un peu moins haute sur mobile */
  .jpo-hero{ height: clamp(180px, 34vw, 360px); }
}

/* Très petits écrans */
@media (max-width: 420px){
  .jpo-left, .jpo-right{ padding:12px 12px 8px; }

  .jpo-heading{ font-size:20px; }
  .jpo-dates{ font-size:11.5px; }
  .jpo-sub{ font-size:11.5px; max-width:36ch; }
  .jpo-co2{ font-size:10.5px; }

  .jpo-badge{ font-size:10.5px; padding:4px 7px; }
  .jpo-cta{ font-size:12px; padding:6px 8px; }

  .jpo-img-left img{
    width:80%;
    margin-left: clamp(-14px, var(--x), 0px);
    margin-top:  clamp(-48px, var(--y), 0px);
  }

  .jpo-hero{ height: clamp(160px, 36vw, 320px); }
}

/* ===== Desktop : décale davantage l’image de droite vers la GAUCHE ===== */
/* Tu peux augmenter la valeur si tu la veux encore plus à gauche */
@media (min-width: 1024px){
  .jpo-hero{ --ox: 65%; --shiftX: -10%; }
}
@media (min-width: 1280px){
  .jpo-hero{ --ox: 70%; --shiftX: -20%; }
}
@media (min-width: 1440px){
  .jpo-hero{ --ox: 75%; --shiftX: -30%; }
}