/* TentoniNumérik R44.3.16 — Informations complémentaires propres et ordonnées.
   Structure DOM préservée. Seuls Jeux éducatifs et Besoin d’aide sont masqués. */

.tn-responsive-extras{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  margin:22px 0 0!important;
  align-items:stretch!important;
}

/* Les deux fenêtres demandées sont supprimées visuellement sans toucher à la structure. */
.tn-responsive-extras .tn-ref-games,
.tn-responsive-extras .tn-ref-help{
  display:none!important;
  visibility:hidden!important;
}

/* Les trois blocs conservés forment une seule ligne propre sur ordinateur. */
.tn-responsive-extras .tn-ref-events,
.tn-responsive-extras .tn-ref-resources,
.tn-responsive-extras .tn-ref-weather{
  grid-column:auto!important;
  grid-row:auto!important;
  min-height:292px!important;
  height:auto!important;
  margin:0!important;
  padding:20px!important;
  box-sizing:border-box!important;
  border:1px solid #d8e6f4!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 12px 34px rgba(25,69,115,.10)!important;
  overflow:hidden!important;
}

/* Titres : on garde le texte DOM pour l’accessibilité et on lui donne un beau pictogramme local. */
.tn-responsive-extras .tn-ref-events header h3,
.tn-responsive-extras .tn-ref-resources header h3,
.tn-responsive-extras .tn-ref-weather > h3{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  margin:0!important;
  min-height:42px!important;
  color:#082d68!important;
  font-size:0!important;
  line-height:1.15!important;
  font-weight:900!important;
}

.tn-responsive-extras .tn-ref-events header h3::before,
.tn-responsive-extras .tn-ref-resources header h3::before,
.tn-responsive-extras .tn-ref-weather > h3::before{
  content:""!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
}

.tn-responsive-extras .tn-ref-events header h3::before{
  background-image:url('/assets/r44-3-16/events.svg')!important;
}
.tn-responsive-extras .tn-ref-resources header h3::before{
  background-image:url('/assets/r44-3-16/resources.svg')!important;
}
.tn-responsive-extras .tn-ref-weather > h3::before{
  background-image:url('/assets/r44-3-16/weather.svg')!important;
}

.tn-responsive-extras .tn-ref-events header h3::after{
  content:"Événements à venir"!important;
  font-size:18px!important;
}
.tn-responsive-extras .tn-ref-resources header h3::after{
  content:"Ressources populaires"!important;
  font-size:18px!important;
}
.tn-responsive-extras .tn-ref-weather > h3::after{
  content:"Votre météo"!important;
  font-size:18px!important;
}

/* En-tête des cartes. */
.tn-responsive-extras .tn-ref-utility header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding-bottom:12px!important;
  margin-bottom:7px!important;
  border-bottom:1px solid #e5edf6!important;
}

.tn-responsive-extras .tn-ref-utility header > a,
.tn-responsive-extras .tn-ref-more{
  color:#1269cb!important;
  font-size:11px!important;
  font-weight:850!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

/* Événements : lignes aérées avec date bien séparée. */
.tn-responsive-extras .tn-ref-event{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  padding:10px 0!important;
  border-bottom:1px solid #edf2f8!important;
}

.tn-responsive-extras .tn-ref-event > b{
  display:grid!important;
  place-items:center!important;
  width:52px!important;
  min-height:50px!important;
  padding:5px!important;
  border-radius:13px!important;
  background:#eef6ff!important;
  color:#176fd1!important;
  font-size:19px!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

.tn-responsive-extras .tn-ref-event > b small{
  margin-top:4px!important;
  font-size:8px!important;
  letter-spacing:.5px!important;
}

.tn-responsive-extras .tn-ref-event span strong{
  display:block!important;
  color:#102e62!important;
  font-size:12px!important;
  line-height:1.25!important;
}

.tn-responsive-extras .tn-ref-event span small{
  display:block!important;
  margin-top:3px!important;
  color:#607493!important;
  font-size:9px!important;
  line-height:1.25!important;
}

/* Ressources : chaque ressource devient une ligne claire et cliquable. */
.tn-responsive-extras .tn-ref-resources > a:not(.tn-ref-more){
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 18px!important;
  gap:10px!important;
  align-items:center!important;
  min-height:58px!important;
  padding:9px 7px!important;
  margin:4px 0!important;
  border:1px solid #edf2f8!important;
  border-radius:13px!important;
  background:#fbfdff!important;
  text-decoration:none!important;
  color:#102e62!important;
}

.tn-responsive-extras .tn-ref-resources > a:not(.tn-ref-more) > span{
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  background:#fff5d5!important;
  font-size:20px!important;
}

.tn-responsive-extras .tn-ref-resources > a strong{
  font-size:11px!important;
  line-height:1.2!important;
}

.tn-responsive-extras .tn-ref-resources > a small{
  display:block!important;
  margin-top:3px!important;
  color:#637996!important;
  font-size:8.5px!important;
  font-weight:500!important;
}

.tn-responsive-extras .tn-ref-resources > a > b{
  color:#176fd1!important;
  font-size:18px!important;
}

/* Météo : présentation propre, température séparée de la prévision. */
.tn-responsive-extras .tn-ref-weather{
  display:flex!important;
  flex-direction:column!important;
}

.tn-responsive-extras .tn-ref-weather-body{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
  margin-top:12px!important;
}

.tn-responsive-extras .tn-ref-now{
  display:grid!important;
  grid-template-columns:58px auto minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  row-gap:2px!important;
  align-items:center!important;
  padding:13px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#eef7ff,#fffaf0)!important;
}

.tn-responsive-extras .tn-ref-sun{
  grid-column:1!important;
  grid-row:1/3!important;
  display:grid!important;
  place-items:center!important;
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  background:#fff4c7!important;
  color:#f6ad00!important;
  font-size:36px!important;
}

.tn-responsive-extras .tn-ref-now > strong{
  grid-column:2!important;
  grid-row:1!important;
  color:#102e62!important;
  font-size:25px!important;
  line-height:1!important;
}

.tn-responsive-extras .tn-ref-now > small{
  grid-column:3!important;
  grid-row:1!important;
  color:#506a8e!important;
  font-size:10px!important;
}

.tn-responsive-extras .tn-ref-now > em{
  grid-column:2/4!important;
  grid-row:2!important;
  color:#607493!important;
  font-size:9px!important;
  font-style:normal!important;
}

.tn-responsive-extras .tn-ref-forecast{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}

.tn-responsive-extras .tn-ref-forecast span{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:74px!important;
  padding:7px 3px!important;
  border:1px solid #e6eef7!important;
  border-radius:12px!important;
  background:#f8fbff!important;
  box-sizing:border-box!important;
}

.tn-responsive-extras .tn-ref-forecast span small{
  color:#607493!important;
  font-size:8px!important;
}
.tn-responsive-extras .tn-ref-forecast span b{
  margin:3px 0!important;
  color:#f4ad00!important;
  font-size:17px!important;
}
.tn-responsive-extras .tn-ref-forecast span strong{
  color:#102e62!important;
  font-size:11px!important;
}

/* Tablette : deux cartes puis météo sur toute la largeur. */
@media(min-width:721px) and (max-width:1050px){
  .tn-responsive-extras{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }

  .tn-responsive-extras .tn-ref-events,
  .tn-responsive-extras .tn-ref-resources{
    grid-column:auto!important;
    min-height:278px!important;
  }

  .tn-responsive-extras .tn-ref-weather{
    grid-column:1/-1!important;
    min-height:220px!important;
  }

  .tn-responsive-extras .tn-ref-weather-body{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr)!important;
    align-items:center!important;
  }
}

/* Téléphone : les trois cartes l’une sous l’autre, propres et lisibles. */
@media(max-width:720px){
  .tn-responsive-extras{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:14px!important;
  }

  .tn-responsive-extras .tn-ref-events,
  .tn-responsive-extras .tn-ref-resources,
  .tn-responsive-extras .tn-ref-weather{
    grid-column:1!important;
    min-height:0!important;
    padding:15px!important;
    border-radius:18px!important;
  }

  .tn-responsive-extras .tn-ref-event{
    grid-template-columns:52px minmax(0,1fr)!important;
  }

  .tn-responsive-extras .tn-ref-forecast{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}