/* Resonanc'E-Sport — responsive production v2.2 (front statique stabilisé)
   Art direction Desktop/Mobile.
   Desktop >= 1025px volontairement inchangé.

   CORRECTIF v2.2 : les règles mobiles ne dépendent plus de la sérialisation
   des styles inline par le moteur DC. Elles fonctionnent aussi sur le HTML
   public conservé tel quel, sans réécriture du DOM et sans flash. */

:root{
  --reso-mobile-gutter:20px;
  --reso-mobile-hero-media-h:clamp(245px,74vw,320px);
}

/* Navigation : menu complet sur ordinateur, hamburger uniquement sous 980 px. */
.rhx-desktop-nav{
  display:flex;
  align-items:center;
  gap:2px;
  margin-right:6px;
}
.rhx-desktop-nav a{
  color:#2B2B38;
  font-size:14px;
  font-weight:600;
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.rhx-desktop-nav a:hover{background:#F1F1F6;}
.rhx-desktop-nav a[aria-current="page"]{
  background:rgba(255,48,0,.08)!important;
  color:#FF3000!important;
}
#rhx-burger{display:none!important;transition:background .16s ease,border-color .16s ease;}
#rhx-burger:hover{background:#F1F1F6!important;}
.rhx-header{background:rgba(255,255,255,.86)!important;}
.rhx-partner-cta{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;}
.rhx-partner-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,48,0,.28)!important;}
#rhx-mobnav a{transition:background .16s ease;}
#rhx-mobnav a:hover{background:#F1F1F6;}

@media (max-width:980px){
  .rhx-desktop-nav,.rhx-partner-cta{display:none!important;}
  #rhx-burger{display:inline-flex!important;}
  /* Le menu recouvre la page au lieu de pousser tout le contenu vers le bas. */
  .rhx-header{isolation:isolate;}
  #rhx-mobnav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:102;
    box-shadow:0 18px 36px rgba(20,20,28,.16);
  }
}

/* Enveloppe <picture> du carrousel : transparente en desktop, surface d'art direction en mobile. */
.reso-carousel-picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.reso-carousel-picture > .reso-carousel-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Surface stable pendant le chargement : aucun fond gris ni texte alternatif
   peint dans les tuiles avant que le média soit décodé. */
[data-screen-label="Galerie — Hero"] .reso-carousel-picture,
[data-screen-label="Galerie — Photos"] .gtile{
  background:#0B0B14;
}
[data-screen-label="Galerie — Hero"] .reso-carousel-img,
[data-screen-label="Galerie — Photos"] .gtile img{
  background:#0B0B14;
  color:transparent;
}

/* Le CMS place directement sur chaque photo d'Actualités un aperçu miniature
   intégré au HTML. Il est peint au premier rendu puis recouvert par l'image
   nette, sans masquer le média ni exposer un aplat noir. */
[data-screen-label="Galerie — Photos"] .gtile > img{
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  [data-screen-label="Galerie — Photos"] .gtile > img{transition:none!important;}
}

@media (max-width:1024px){
  section > div[style*="max-width"][style*="1240px"],
  footer > div[style*="max-width"][style*="1240px"]{
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden;}

  /* Grilles de section : passage propre à une colonne (remplace la règle générique d'origine). */
  section [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  section [style*="grid-template-columns"] > *{min-width:0;}
  section .reso-volunteer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* Gouttières latérales sur les conteneurs de contenu. */
  section > div[style*="max-width"][style*="1240px"],
  footer > div[style*="max-width"][style*="1240px"]{
    padding-left:var(--reso-mobile-gutter)!important;
    padding-right:var(--reso-mobile-gutter)!important;
  }

  /* En-tête — même design, dimensions adaptées uniquement. */
  .rhx-header > div:first-child{
    height:64px!important;
    padding-left:14px!important;
    padding-right:14px!important;
    gap:8px!important;
  }
  .rhx-header img[alt="Resonanc'E-Sport"]{
    height:42px!important;
    width:auto!important;
    max-width:145px!important;
  }
  .rhx-header .rhx-partner-cta{
    font-size:12px!important;
    padding:9px 13px!important;
  }
  #rhx-burger{width:40px!important;height:40px!important;border-radius:12px!important;}
  #rhx-mobnav{max-height:calc(100vh - 64px);overflow:auto;-webkit-overflow-scrolling:touch;}

  /*
   * ART DIRECTION DU HERO EN MOBILE
   * -------------------------------
   * En desktop, la photo reste un fond plein cadre.
   * En mobile/tablette, la photo est isolée dans une bande photographique stable,
   * puis le texte se place EN DESSOUS. La hauteur du texte ne recadre donc plus la photo.
   */
  [data-screen-label="Accueil — Hero"],
  [data-screen-label="Sensibilisation — Hero"],
  [data-screen-label="Galerie — Hero"]{
    padding:0!important;
    min-height:0!important;
    background:#0B0B14!important;
  }

  /* Bande photo (le média du carrousel) fixée en haut, avec fondu vers le fond. */
  [data-screen-label="Accueil — Hero"] > div[data-no-edit],
  [data-screen-label="Sensibilisation — Hero"] > div[data-no-edit],
  [data-screen-label="Galerie — Hero"] > div[data-no-edit]{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    height:var(--reso-mobile-hero-media-h)!important;
    overflow:hidden!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.78) 87%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.78) 87%,transparent 100%);
  }

  /* Voiles sombres plein cadre (dégradés) neutralisés en mobile : la photo reste nette,
     le texte passe sur le fond sombre uni de la section. */
  [data-screen-label="Accueil — Hero"] > div[style*="linear-gradient"],
  [data-screen-label="Sensibilisation — Hero"] > div[style*="linear-gradient"],
  [data-screen-label="Galerie — Hero"] > div[style*="linear-gradient"]{
    display:none!important;
  }

  /* Conteneur de texte poussé sous la bande photo. */
  [data-screen-label="Accueil — Hero"] > div[style*="max-width"][style*="1240px"],
  [data-screen-label="Sensibilisation — Hero"] > div[style*="max-width"][style*="1240px"],
  [data-screen-label="Galerie — Hero"] > div[style*="max-width"][style*="1240px"]{
    padding-top:calc(var(--reso-mobile-hero-media-h) + 18px)!important;
    padding-right:var(--reso-mobile-gutter)!important;
    padding-bottom:52px!important;
    padding-left:var(--reso-mobile-gutter)!important;
  }

  /* Point focal mobile (secours quand il n'y a pas d'image mobile dédiée). */
  .reso-carousel-img.reso-focal-left{object-position:25% 50%!important;}
  .reso-carousel-img.reso-focal-center{object-position:50% 50%!important;}
  .reso-carousel-img.reso-focal-right{object-position:75% 50%!important;}

  /* Galerie — les span desktop ne doivent pas créer de colonnes implicites en mobile.
     Spécificité renforcée (3 attributs) pour l'emporter sur la règle générique de section. */
  [data-screen-label="Galerie — Photos"] [style*="grid-template-columns"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:14px!important;
  }
  [data-screen-label="Galerie — Photos"] .gtile{
    grid-column:auto!important;
    grid-row:auto!important;
    aspect-ratio:4/3;
    min-height:0!important;
  }
  [data-screen-label="Galerie — Photos"] .gtile img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .evrow{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important;}
  .evrow-with-thumb{
    grid-template-columns:84px minmax(0,1fr)!important;
    grid-template-areas:"image body" "date body" "cta cta";
    gap:12px 16px!important;
    padding:16px!important;
  }
  .evrow-with-thumb [data-role="ev-img"]{
    grid-area:image;
    width:84px;
    height:84px;
    margin:0!important;
    border-radius:12px!important;
  }
  .evrow-with-thumb [data-role="ev-date"]{
    grid-area:date;
    border-right:0!important;
    padding-right:0!important;
    text-align:center!important;
  }
  .evrow-with-thumb [data-role="ev-date"] > div:first-child{font-size:22px!important;}
  .evrow-with-thumb [data-role="ev-body"]{grid-area:body;align-self:center;}
  .evrow-with-thumb [data-role="ev-cta"]{
    grid-area:cta;
    justify-self:stretch;
    text-align:center;
  }
  form[style*="padding"]{padding:24px!important;}

  /* Contrôles d'édition CMS accessibles. */
  [data-cms-only][style*="right"][style*="24px"]{right:14px!important;bottom:14px!important;}
}

@media (max-width:600px){
  :root{
    --reso-mobile-gutter:18px;
    --reso-mobile-hero-media-h:clamp(235px,75vw,295px);
  }

  [data-screen-label="Galerie — Photos"] [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  [data-screen-label="Galerie — Photos"] .gtile{aspect-ratio:4/3;}
  section .reso-volunteer-grid{grid-template-columns:minmax(0,1fr)!important;}

  [data-screen-label="Accueil — Hero"] h1,
  [data-screen-label="Sensibilisation — Hero"] h1,
  [data-screen-label="Galerie — Hero"] h1{
    overflow-wrap:anywhere;
  }

  [data-screen-label="Accueil — Hero"] [style*="gap"][style*="26px 54px"],
  [data-screen-label="Galerie — Hero"] [style*="gap"][style*="24px 50px"]{
    gap:22px 28px!important;
  }

  footer [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
    gap:28px!important;
  }
}

@media (max-width:350px){
  .rhx-header img[alt="Resonanc'E-Sport"]{
    max-width:165px!important;
  }
}

/* Fiches détaillées des cinq événements phares. */
.reso-event-card{
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.reso-event-card:hover,.reso-event-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,48,0,.42)!important;
  box-shadow:0 12px 28px rgba(20,20,28,.12)!important;
  outline:none;
}
.reso-event-more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:20px;
  color:#C42600;
  font-size:13px;
  font-weight:700;
}
.reso-modal-open{overflow:hidden;}
.reso-event-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  transition:opacity .18s ease;
}
.reso-event-modal[hidden]{display:none!important;}
.reso-event-modal.is-open{opacity:1;}
.reso-event-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,12,.82);
  backdrop-filter:blur(8px);
}
.reso-event-dialog{
  position:relative;
  width:min(640px,100%);
  max-height:88vh;
  overflow:auto;
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.985);
  transition:transform .18s ease;
  outline:none;
}
.reso-event-modal.is-open .reso-event-dialog{transform:none;}
.reso-event-close{
  position:absolute;
  z-index:2;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  background:rgba(11,11,20,.78);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.reso-event-close:hover,.reso-event-close:focus-visible{background:#FF3000;outline:3px solid rgba(255,255,255,.7);}
.reso-event-modal-image{display:block;width:100%;height:240px;object-fit:cover;background:#171722;}
.reso-event-modal-content{padding:30px 32px 34px;}
.reso-event-modal-head{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px;}
.reso-event-tag{padding:6px 12px;border-radius:999px;background:rgba(255,48,0,.1);color:#C42600;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.reso-event-meta{color:#606078;font:13px 'JetBrains Mono',monospace;}
.reso-event-dialog h2{margin:0 0 18px;color:#14141C;font-family:'Russo One';font-size:clamp(26px,4vw,38px);font-weight:400;line-height:1.08;}
.reso-event-description{margin:0;color:#2B2B38;font-size:16px;line-height:1.7;}
.reso-event-stats{display:flex;flex-wrap:wrap;gap:20px 32px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(20,20,28,.08);}
.reso-event-stat{min-width:120px;}
.reso-event-stat strong{display:block;color:#FF3000;font-family:'Bungee';font-size:22px;font-weight:400;line-height:1.05;}
.reso-event-stat span{display:block;margin-top:7px;color:#606078;font-size:12.5px;line-height:1.4;}
.reso-event-partners-wrap{margin-top:30px;padding-top:26px;border-top:1px solid rgba(20,20,28,.1);}
.reso-event-partners-wrap h3{margin:0 0 14px;color:#14141C;font-size:13px;letter-spacing:.12em;text-transform:uppercase;}
.reso-event-partners{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.reso-event-partners li{padding:8px 11px;border-radius:999px;background:#F1F1F5;color:#464657;font-size:12.5px;}

@media (max-width:700px){
  .reso-event-modal{padding:14px;}
  .reso-event-dialog{max-height:calc(100vh - 28px);}
  .reso-event-modal-image{height:210px;}
  .reso-event-modal-content{padding:26px 22px 30px;}
  .reso-event-feature > div:first-child{min-height:230px!important;}
}

@media (prefers-reduced-motion:reduce){
  .reso-carousel-picture,.reso-carousel-img,.reso-event-card,.reso-event-modal,.reso-event-dialog{transition:none!important;}
  .gtile img,.evrow,a.btnp,a.btns{transition:none!important;}
}