/* =====================================================
   PRO-AM HERO / GRID — VERSION STABLE
   ===================================================== */

/* ===== Reset / thème ===== */
.content{ margin-top:0!important; }
.hero-section::before,
.bg-parallax-wrap-gradien::before,
.htc_single_item_dec::before{ content:none!important; }
.content-section.parallax-section{ padding:0!important; }

.container, .container-fluid{
  padding:0!important;
}

/* Bootstrap colonnes */
.mycol1{ padding-right:5px!important; }
.mycol2{ padding-left:0!important; }
.mycol1 p{ color:#fff; }

.my1{ height:100vh; }
.myrow1{ flex-wrap:nowrap!important; }

/* =====================================================
   LEFT
   ===================================================== */
.relais-left{
  background:#001243;
  color:#fff;
  min-height:100vh;
  display:flex;
  align-items:center;
}
.relais-left__inner{
  max-width:600px;
  padding:clamp(24px,4vw,56px);
}

.relais-kicker{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:20px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 22px 0;
  opacity:.95;
  text-align:left;
}
.relais-title{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(34px,2vw,52px);
  line-height:1.05;
  margin:0 0 18px 0;
  text-align:left;
}
.relais-rule{
  width:70px;
  height:5px;
  background:#d13538;
  margin:35px 0;
}
.relais-text{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;
  line-height:1.2;
  color:rgba(255,255,255,.85);
}

/* FIX clamp inversé */
.pluspt{ font-weight:800; font-size:clamp(28px,2vw,30px); }
.plusbigger{ font-weight:500; font-size:clamp(20px,2vw,20px); }

.whiteicon{ color:#fff; font-size:16px; }
.footer-social{ text-align:center!important; }
.vg-chat-button{ display:none; }
.mycenter{ text-align:center; }

/* =====================================================
   COUNTDOWN (inchangé, sain)
   ===================================================== */
.event-countdown{
  display:grid;
  grid-template-columns:repeat(4,auto);
  column-gap:22px;
  row-gap:12px;
  justify-content:center;
  align-items:baseline;
font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  padding:14px 22px;
  margin:16px auto 0;
  width:fit-content;

  background:rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.18),
             inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
}

.event-countdown > p{
  grid-column:1/-1;
  margin:0;
  text-align:center;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.85;
}

.event-countdown > div{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}

.event-countdown span{
  font-size:22px;
  font-weight:700;
  color:#fff;
}
.event-countdown small{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  opacity:.8;
}

/* =====================================================
   RIGHT GRID
   ===================================================== */
.event-right{
  height:100vh;
  background:#fff;
}
.event-grid{
  height:100%;
  display:grid;
  grid-template-columns:3fr 3fr 2fr;
  gap:5px;
  padding-right:5px;
}
.event-col{
  display:grid;
  gap:5px;
}
.event-col--a{ grid-template-rows:1fr 1.5fr; }
.event-col--b{ grid-template-rows:1.5fr 1fr; }
.event-col--c{ grid-template-rows:1fr; }

/* =====================================================
   TILE — LOGIQUE CLÉ
   ===================================================== */
.event-tile{
  position:relative;
  overflow:hidden;
}

/* Image */
.event-tile__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Overlay hover UNIQUE */
.event-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,18,67,.78);
  opacity:0;
  transition:opacity .25s ease;
  z-index:1;
}

/* Contenu */
.event-tile__content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  padding:18px;
}

/* Cartouche BLEU PAR DÉFAUT */
.event-tile__panel{
  position:relative;
  padding:14px 18px;
  background:rgba(0,18,67,.45);
  backdrop-filter:blur(1px);
  border-radius:10px;
  max-width:min(38ch,90%);
}

/* Titre visible par défaut */
.event-tile__title{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  font-size:clamp(16px,1.4vw,22px);
  transition:opacity .2s ease, transform .2s ease;
  color:#fff;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Texte hover (caché) */
.event-tile__hovertext{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;

  font-size:clamp(13px,1vw,16px);
  line-height:1.45;
}

/* ===== Hover : UNE SEULE COUCHE BLEUE ===== */
.event-tile:hover::before{ opacity:1; }

/* On coupe le cartouche pour éviter double bleu */
.event-tile:hover .event-tile__panel{
  background:transparent;
  backdrop-filter:none;
}

/* Switch texte */
.event-tile:hover .event-tile__title{
  opacity:0;
  transform:translateY(-6px);
}
.event-tile:hover .event-tile__hovertext{
  opacity:1;
  transform:translateY(0);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:991.98px){
  .event-right{ height:auto; }
  .event-grid{ grid-template-columns:1fr; }
  .event-col{ grid-auto-rows:220px; }
  .event-col--c .event-tile{ min-height:360px; }
}
@media (max-width:575.98px){
  .event-col{ grid-auto-rows:190px; }
  .event-col--c .event-tile{ min-height:300px; }
}

/* =====================================================
   PRO-AM — RESTE DE PAGE (SECTIONS)
   Base typographique + composants
   ===================================================== */

.proam-section{ padding:72px 0; }
.proam-block{ max-width:980px; margin:0 auto; }
.proam-divider{ height:1px; background:rgba(0,0,0,.08); margin:48px 0; }

/* Titles */
.proam-h2{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(22px,2vw,32px);
  letter-spacing:.02em;
  color:#0b1020;
  margin:0 0 18px 0;
  text-align:center;
}
.proam-h3{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(18px,1.5vw,22px);
  letter-spacing:.01em;
  color:#0b1020;
  margin:0 0 10px 0;
}

/* Text */
.proam-lead{

  margin:0 auto 18px auto;
  text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.7;
  color:rgba(11,16,32,.82);
}
.proam-text{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.75;
   color:#fff;
  margin:0 0 14px 0;
  font-weight: 500;
}

/* Key lines */
.proam-keylines{
  display:grid;
  gap:10px;

  margin:18px auto 0 auto;
  text-align:center;
}
.proam-keyline{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1;
  color:rgba(11,16,32,.78);
}

/* Quote block */
.proam-quote{
 
  margin:22px auto 0 auto;
  padding:18px 20px;
  border-left:4px solid #d13538;
  background:#001243;
  border-radius:12px;
 
}
.proam-quote strong{ color:#d13538; }

/* Callout */
.proam-callout{
  max-width:780px;
  margin:34px auto 18px auto;
  padding:18px 20px;
  background:rgba(0,18,67,.045);
  border:1px solid rgba(0,18,67,.10);
  border-radius:14px;
}
.proam-callout-title{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(17px,1.35vw,20px);
  color:#0b1020;
  margin:0 0 8px 0;
}
.proam-lines{ display:grid; gap:5px; margin-top:10px; }

/* Transition line */
.proam-transition{
  max-width:72ch;
  margin:0 auto 18px auto;
  text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.7;
  color:rgba(11,16,32,.72);
  text-align:left;
}

/* Timeline cards */
.proam-day{
  margin:18px 0;
  padding:22px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 14px 28px rgba(0,0,0,.06);
}
.proam-day-title{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.proam-day-kicker{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,18,67,.70);
}
.proam-day-heading{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(18px,1.6vw,22px);
  font-weight:850;
  color:#0b1020;
}

/* Lists */
.proam-ul{ margin:12px 0 0; padding-left:18px; }
.proam-ul li{
  margin:8px 0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.6;
  color:rgba(11,16,32,.78);
  text-align:left;
}


.proam-card__body p{
  margin:8px 0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.6;
  color:rgba(11,16,32,.78);
  text-align:left;
}


/* Photos */
.proam-photo{
  margin:24px auto 0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
  background:#fff;
}
.proam-photo img{
  width:100%;
  display:block;
  object-fit:cover;
}
.proam-photo--wide img{ aspect-ratio:21/9; }
.proam-photo--day  img{ aspect-ratio:16/7; }
.proam-photo--cta  img{ aspect-ratio:21/8; }
.proam-caption{
  padding:10px 14px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  color:rgba(11,16,32,.62);
}

/* Pillars */
.proam-pillars{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

/* Card (avec photo en haut, compatible avec ton HTML actuel) */
.proam-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  padding:0;
}
.proam-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:5px;
  border-top: 4px solid #d13538;
  opacity:.9;
  z-index:2;
}
.proam-card__media{
  position:relative;
  overflow:hidden;
}
.proam-card__media img{
  width:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:16/10;
  transform:scale(1.01);
}
.proam-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,0));
  pointer-events:none;
}
.proam-card__body{
  padding:18px 18px 20px 18px;
}
.proam-card__title{
  margin:0 0 10px 0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:850;
  font-size:clamp(16px,1.35vw,20px);
  color:#001243;
  letter-spacing:.01em;
}
.proam-card__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px 0;
  padding:6px 10px;
  border-radius:999px;
  
  border: 1px solid #d13538;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,18,67,.78);
}
.proam-card__body .proam-ul{
  margin:10px 0 0;
  padding-left:18px;
}
.proam-card__body .proam-ul li{
  margin:8px 0;
  line-height:1.55;
  color:rgba(11,16,32,.78);
}

/* Practical */
.proam-practical{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 24px;
  margin-top:12px;
}
.proam-chip{
  padding:12px 14px;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(14px,1vw,16px);
  color:rgba(11,16,32,.78);
}

/* CTA */
.proam-cta{
  margin-top:26px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.proam-btn{
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  border:1px solid rgba(0,18,67,.22);
}
.proam-btn--primary{
  background:#001243;
  color:#fff;
  box-shadow:0 14px 26px rgba(0,18,67,.22);
}
.proam-btn--ghost{
  background:transparent;
  color:#001243;
  border-color:rgba(0,18,67,.35);
}
.proam-note{
  margin-top:14px;
  text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  color:rgba(11,16,32,.62);
}

/* Responsive */
@media (max-width:991.98px){
  .proam-section{ padding:54px 0; }
  .proam-pillars{ grid-template-columns:1fr; }
  .proam-practical{ grid-template-columns:1fr; }
  .proam-photo--wide img,
  .proam-photo--cta img{ aspect-ratio:16/9; }
  .proam-card__media img{ aspect-ratio:16/9; }
}

/* =====================================================
   TIMELINE PAR ÉTAPE — CSS (structure validée)
   Premium : rail élégant + caps début/fin
   ===================================================== */

.proam-wrap{
  background:linear-gradient(180deg, rgba(0,18,67,.02), rgba(0,0,0,0) 220px);
}

/* Étapes */
.proam-step{
  padding:86px 0;
  border-top:1px solid rgba(11,16,32,.08);
  position:relative;
}
.proam-step:first-child{ border-top:0; }

.proam-step__rail{
  position:absolute;
  left:24px;
  top:86px;
  bottom:86px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(
    to bottom,
    rgba(0,18,67,0),
    rgba(0,18,67,.55) 12%,
    rgba(0,18,67,.55) 88%,
    rgba(0,18,67,0)
  );
}


.proam-step__rail::before{ top:-6px; }
.proam-step__rail::after{ bottom:-6px; }

.proam-step__content{
  margin-left:140px;
  max-width:980px;
  padding-right:12px;
}

/* Aligne la typo en mode “éditorial” */
.proam-h2{ text-align:left; margin:0 0 16px 0; }
.proam-lead,
.proam-keylines,
.proam-quote,
.proam-transition{
  text-align:left;
  margin-left:0;
  margin-right:0;
}

/* Responsive */
@media (max-width:991.98px){
  .proam-step{ padding:58px 0; }
  .proam-step__rail{ display:none; }
  .proam-step__content{ margin-left:0; padding-right:0; }
  .proam-h2::before{ margin:0 0 14px 0; }
}

/* =====================================================
   FREEZE LAYOUT — neutralise anciens layouts "rail"
   (compatible base : on ne supprime rien, on stabilise)
   ===================================================== */
.proam-rail-section,
.proam-split{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
.proam-rail,
.proam-rail__label,
.proam-content,
.proam-body{
  all:unset;
}

/* =====================================================
   PRO-AM — TITRES (STYLE D’ORIGINE, GAUCHE)
   ===================================================== */

.proam-h2{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(22px, 2vw, 32px);
  letter-spacing:.02em;
  color:#001243;           /* bleu du hero */
  margin:0 0 18px 0;
  text-align:left;
  position:relative;
  padding-top:18px;        /* espace pour le trait rouge */
}

/* Trait rouge AU-DESSUS */
.proam-h2::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:56px;
  height:4px;
  background:#d13538;      /* rouge Vigiers */
  border-radius:2px;
}

/* H3 cohérent */
.proam-h3{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(18px,1.5vw,22px);
  letter-spacing:.01em;
  color:#0b1020;
  margin:0 0 10px 0;
}


/* Logo plein largeur dans la colonne gauche */
.proam-logo{
  display:block;
  width:100%;        /* prend toute la largeur disponible */
  max-width:100%;    /* aucune limite */
  height:auto;
}
.proam-quote{
  display:flex;
  align-items:center;     /* centrage vertical */
  min-height:160px;       /* ajuste : 140 / 160 / 180 */
  padding:18px 20px;      /* garde ton padding */
}

.proam-quote .proam-text{
  margin:0;               /* indispensable */
}
.black {color: rgba(11,16,32,.78) !important;}
/* Badge Jour (timeline) */
.proam-day-kicker{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border:1px solid #d13538;          /* bleu Vigiers */
  color:#001243;               /* rouge Vigiers */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:999px;
}
.myclub { color:#d13538;margin-right:6px;}

.proam-step__content2 {  margin-left:140px;
  padding-right:12px;
 }
 
 /* ===============================
   ÉTAPE FINALE — ENCADREMENT CTA
   =============================== */

.proam-step:last-child .proam-step__content{
  background:linear-gradient(
    180deg,
    rgba(0,18,67,.04),
    rgba(0,18,67,.02)
  );
  border:1px solid rgba(0,18,67,.10);
  border-radius:18px;
  padding:42px 48px;
}
/* CTA final : présence renforcée */
.proam-step:last-child .proam-btn--primary{
  font-size:16px;
  padding:14px 22px;
  box-shadow:0 18px 36px rgba(0,18,67,.25);
}
/* Texte contact final */
.proam-step:last-child .proam-note{
  margin-top:22px;
  font-size:15px;
  color:rgba(11,16,32,.75);
}
#vgchat-root {display:none;}


/* Touch devices: tap -> focus (remplace le hover) */
.event-tile:focus::before,
.event-tile:focus-within::before{
  opacity:1;
}

.event-tile:focus .event-tile__panel,
.event-tile:focus-within .event-tile__panel{
  background:transparent;
  backdrop-filter:none;
}

.event-tile:focus .event-tile__title,
.event-tile:focus-within .event-tile__title{
  opacity:0;
  transform:translateY(-6px);
}

.event-tile:focus .event-tile__hovertext,
.event-tile:focus-within .event-tile__hovertext{
  opacity:1;
  transform:translateY(0);
}


/* =====================================================
   HERO LEFT — TYPO FLUIDE (baseline 1600px)
   Objectif : même rendu à 1600px, réduction progressive en dessous
   ===================================================== */

/* 1) Confort global de la colonne gauche */
.relais-left__inner{
  /* réduit un peu le padding sur petits écrans sans toucher le rendu desktop */
  padding:clamp(18px, 3.2vw, 56px);
}

/* 2) Kicker */
.relais-kicker{
  font-size:clamp(14px, 1.1vw, 20px);
  margin:0 0 clamp(12px, 2vw, 22px) 0;
}

/* 3) Titre H1 (ton rendu à 1600 reste le max) */
.relais-title{
  font-size:clamp(26px, 2.9vw, 52px);
  line-height:1.15; /* ou 1.08 si tu veux un peu plus d’air */
  margin:0 0 clamp(12px, 2vw, 18px) 0;
}

/* 4) Texte (lead + body) */
.relais-text{
  font-size:clamp(15px, 1.25vw, 18px);
 .relais-text {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
}
}


.relais-title .pluspt{
  line-height:inherit;
  display:inline-block; /* évite certains comportements bizarres */
}


/* 5) Tes spans “pluspt / plusbigger” : deviennent réellement responsives */
.pluspt{
  font-weight:800;
  font-size:clamp(24px, 2.4vw, 30px);
  line-height:1.15;
}

.plusbigger{
  font-weight:500;
  font-size:clamp(16px, 1vw, 20px); /* 20 = rendu max */
}

/* 6) Trait rouge : respire moins sur petits écrans */
.relais-rule{
  margin:clamp(18px, 2.4vw, 35px) 0;
}

/* 7) Logo plein largeur : ok, mais on évite qu'il écrase tout sur mobile */
.proam-logo{
  width:100%;
  max-width:100%;
  height:auto;
  margin-top:clamp(10px, 2vw, 18px);
}

/* 8) Sur très petits écrans : on évite que les <br><br> explosent la hauteur */
@media (max-width:575.98px){
  /* on réduit l'effet “double saut de ligne” dans la colonne gauche */
  .relais-left__inner br{ display:none; }
}
/* =====================================================
   BREAKPOINT CUSTOM — empiler à 919px (au lieu de 767/991)
   ===================================================== */
@media (max-width:919px){

  /* empile gauche + droite */
  .myrow1{
    flex-wrap:wrap !important;
  }

  .mycol1,
  .mycol2{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    padding-right:0 !important;
    padding-left:0 !important;
  }

  /* hauteurs auto (sinon 100vh casse tout) */
  .my1{ height:auto !important; }
  .relais-left{ min-height:auto !important; padding:26px 0; }
  .event-right{ height:auto !important; }

  /* le compteur doit pouvoir se réduire */
  .event-countdown{
    width:100%;
    max-width:520px;
    justify-content:center;
  }
}
@media (max-width:919px){

  /* Centrage global du contenu gauche */
  .relais-left{
    text-align:center;
  }

  .relais-left__inner{
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column;
    align-items:center; /* centre les éléments (logo, countdown, etc.) */
  }

  /* Le trait rouge centré */
  .relais-rule{
    margin-left:auto;
    margin-right:auto;
  }

  /* Le countdown centré */
  .event-countdown{
    margin-left:auto;
    margin-right:auto;
  }

  /* Logos centrés */
  .proam-logo{
    margin-left:auto;
    margin-right:auto;
  }

  /* Social centré (au cas où) */
  .footer-social{
    text-align:center !important;
  }
}
/* =====================================================
   HERO RIGHT — MODE BANDEAUX SOUS 919px
   ===================================================== */
@media (max-width:919px){

  /* on casse la grille colonnes -> liste verticale */
  .event-grid{
    display:block;
    height:auto;
    padding-right:0;
  }

  /* les colonnes ne doivent plus imposer leur propre grille */
  .event-col{
    display:contents;
  }

  /* chaque tuile devient un bandeau */
  .event-tile{
    display:block;
    width:100%;
    min-height:220px; /* ajuste 200/240 selon tes images */
    margin:0 0 5px 0;
    border-radius:0; /* ou 12px si tu veux */
  }

  /* le panel peut être un peu plus large en bandeau */
  .event-tile__panel{
    max-width:min(62ch, 92%);
  }
}

/* =====================================================
   HOVER SUR MOBILE : tap = focus (même principe)
   ===================================================== */
@media (hover:none){
  /* 1er tap : affiche overlay + texte (via focus) */
  .event-tile:focus::before,
  .event-tile:focus-within::before{ opacity:1; }

  .event-tile:focus .event-tile__panel,
  .event-tile:focus-within .event-tile__panel{
    background:transparent;
    backdrop-filter:none;
  }

  .event-tile:focus .event-tile__title,
  .event-tile:focus-within .event-tile__title{
    opacity:0;
    transform:translateY(-6px);
  }

  .event-tile:focus .event-tile__hovertext,
  .event-tile:focus-within .event-tile__hovertext{
    opacity:1;
    transform:translateY(0);
  }
}
.event-tile__panel { padding-top: 18px; padding-bottom:18px }
@media (max-width:919px){
  .relais-text { line-height: 1.5; }
}
.proam-step:last-child {
  background: rgba(0,18,67,0.03);
}
.proam-step:last-child .proam-h2::before {
  background: #d13538;
}
.proam-photo, .proam-card {
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
@media (max-width:919px){

  .proam-step__content2{
    margin-left:0;        /* supprime le décalage */
    padding-right:0;      /* aligne bord à bord */
  }

}
.avoir p{color:#d13538;font-size: 17px;
  font-weight: 400;}
  
  
  /* CONTACT */
.proam-contact{ padding: clamp(36px, 6vw, 90px) 0; }
.proam-contact__card{
  background: #ffffff;
  border-radius: 18px;
  padding: clamp(18px, 3vw, 36px);
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  max-width: 980px;
}

.proam-form{ margin-top: 18px; }
.proam-form__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.proam-field{ display:flex; flex-direction:column; gap: 6px; }
.proam-field--full{ grid-column: 1 / -1; }

.proam-field label{
  font-weight: 700;
  font-size: 14px;
}

.proam-field input,
.proam-field select,
.proam-field textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
  background: #fff;
}
.proam-field textarea{ resize: vertical; min-height: 120px; }

.proam-field input:focus,
.proam-field select:focus,
.proam-field textarea:focus{
  border-color: rgba(0,18,67,.55);
  box-shadow: 0 0 0 4px rgba(0,18,67,.10);
}

.proam-form__foot{ margin-top: 14px; display:flex; flex-direction:column; gap: 12px; }

.proam-check{ display:flex; gap:10px; align-items:flex-start; font-size: 14px; line-height: 1.35; }
.proam-check input{ margin-top: 3px; }

.proam-form__alt{ font-size: 14px; opacity: .85; }

/* Responsive */
@media (max-width: 820px){
  .proam-form__grid{ grid-template-columns: 1fr; }
}

/* Honeypot */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


.proam-alert{
  margin: 14px 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
}
.proam-alert--success{
  background: rgba(46, 125, 50, .10);
  border: 1px solid rgba(46, 125, 50, .25);
}

/* Newsletter CTA */
.proam-newsletter{
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
.proam-newsletter__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.proam-newsletter__title{ margin:0; font-size: 18px; font-weight: 800; }
.proam-newsletter__desc{ margin: 4px 0 0; opacity:.85; }

/* Modal */
.proam-modal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.proam-modal.is-open{ display: block; }

.proam-modal__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

.proam-modal__dialog{
  position: relative;
  width: min(920px, calc(100% - 28px));
  margin: 6vh auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 120px rgba(0,0,0,.30);
  overflow: hidden;
}

.proam-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.proam-modal__title{ margin:0; font-size: 16px; font-weight: 800; }

.proam-modal__close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
}

.proam-modal__body{ padding: 14px 16px 18px; }

/* Iframe responsive */
.proam-iframeWrap{ width: 100%; }
.proam-iframeWrap iframe{
  width: 100%;
  height: min(78vh, 620px);
  border: 0;
  display:block;
}
/* Newsletter CTA (page principale) */
.proam-newsletter-cta{
  margin: clamp(32px, 6vw, 80px) 0;
}

.proam-newsletter-cta__card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(0,18,67,.08), rgba(0,18,67,.02));
  border: 1px solid rgba(0,18,67,.15);
}

.proam-newsletter-cta__title{
  margin: 0 0 6px 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #001243;
}

.proam-newsletter-cta__desc{
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.8);
}

.proam-newsletter-cta__action{
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 820px){
  .proam-newsletter-cta__card{
    flex-direction: column;
    align-items: flex-start;
  }
}


.proam-keylines-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.proam-partner {
  text-align: center;
}

.partner-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.7;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.partner-logo {
  max-width: 140px;
  height: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .proam-keylines-wrap {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .proam-partner {
    text-align: left;
	
  }
}


.minimini {font-size: 55% !important;
letter-spacing: .10em !important;}